:root {
    /* Authoritative Ochre Field Ground & Palette */
    --bg-ground:#C8903A;
    --bg-surface:#B67E2C;
    --bg-surface-elevated:#D29C48;
    --bg-dark:#24180A;
    --bg-dark-surface:#1E1308;
    --bg-canvas:#BA822E;


    --ink-primary:#1A1208;
    --ink-muted:#241708;
    --ink-subtle:#2A1C0A;
    --ink-light:#F7EBD4;
    --ink-light-muted:#D8C3A4;
    --accent:#0E271B;
    --accent-tint:#1B3B2B;
    --accent-contrast:#F7EBD4;


    --rule-line:rgba(26, 18, 8, 0.22);
    --rule-line-strong:rgba(26, 18, 8, 0.45);
    --rule-line-inverse:rgba(247, 235, 212, 0.2);


    --status-err:#8E2319;
    --status-err-bg:rgba(142, 35, 25, 0.12);
    --status-ok:#1B3B2B;
    --status-ok-bg:rgba(27, 59, 43, 0.14);


    /* Fonts */
    --lepu-4d4:'Cinzel', Georgia, 'Times New Roman', serif;
    --lepu-c23:'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --lepu-1a5:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;


    /* Typography fluid scales (clamp-based for 320px to 1440px) */
    --text-xs:clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
    --text-sm:clamp(0.8438rem, 0.81rem + 0.18vw, 0.9375rem);
    --text-base:clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
    --text-md:clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
    --text-lg:clamp(1.3125rem, 1.2rem + 0.55vw, 1.625rem);
    --text-xl:clamp(1.625rem, 1.45rem + 0.85vw, 2.125rem);
    --text-2xl:clamp(2.0625rem, 1.75rem + 1.4vw, 2.875rem);
    --text-hero:clamp(2.35rem, 1.95rem + 2.2vw, 4rem);


    --leading-tight:1.15;
    --leading-snug:1.3;
    --leading-normal:1.6;
    --leading-loose:1.75;


    --tracking-tight:-0.015em;
    --tracking-normal:0em;
    --tracking-wide:0.05em;
    --tracking-caps:0.08em;


    --radius-xs:2px;
    --radius-sm:2px;
    --radius-md:3px;


    --page-max:1240px;
    --gutter-fluid:clamp(1.25rem, 4vw, 3.5rem);


    /* Elevation & press borders */
    --shadow-press:inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 2px 4px rgba(26, 18, 8, 0.18);
    --shadow-flat:0 1px 2px rgba(26, 18, 8, 0.12);
    --shadow-lift:0 8px 24px rgba(26, 18, 8, 0.25);


    --ease-letterpress:cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-snappy:cubic-bezier(0.16, 1, 0.3, 1);
    --dur-rapid:140ms;
    --dur-medium:240ms;
    --dur-deliberate:400ms;
}


/* Base Reset */
*,
*::before,
*::after {
    box-sizing:border-box;
    margin:0;
    padding:0;
}


html {
    font-size:100%;
    scroll-behavior:smooth;
    scroll-padding-top:5rem;
    -webkit-text-size-adjust:100%;
    background-color:var(--bg-ground);
    color:var(--ink-primary);
}


body {
    min-height:100vh;

    font-family:var(--lepu-c23);
    font-size:var(--text-base);
    line-height:var(--leading-normal);
    background-color:var(--bg-ground);
    color:var(--ink-primary);
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
    position:relative;
}


/* Background canvas grain / generative depth layer fallback */
.bg-generative-canvas {
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:0;
    opacity:0.28;
}


/* Display and Heading typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family:var(--lepu-4d4);
    font-weight:700;
    line-height:var(--leading-tight);
    color:var(--ink-primary);
    text-wrap:balance;
    letter-spacing:var(--tracking-normal);
    margin:0;
}


h1 {
    font-size:var(--text-hero);
    font-weight:900;
    letter-spacing:var(--tracking-tight);
}


h2 {
    font-size:var(--text-2xl);
    font-weight:700;
    border-bottom:1px solid var(--rule-line-strong);
    padding-bottom:0.4rem;
    margin-bottom:1.25rem;
}


h3 {
    font-size:var(--text-lg);
    font-weight:700;
    margin-bottom:0.65rem;
}


h4 {
    font-size:var(--text-md);
    font-weight:600;
    margin-bottom:0.4rem;
}


p {
    margin-bottom:1.2rem;
    max-width:68ch;
}


p:last-child { margin-bottom:0; }


small,
.type-small {
    font-size:var(--text-sm);
    line-height:var(--leading-snug);
    color:var(--ink-muted);
}


.type-mono {
    font-family:var(--lepu-1a5);
    font-size:var(--text-sm);
    letter-spacing:-0.01em;
}


.type-lead {
    font-size:var(--text-md);
    line-height:var(--leading-snug);
    font-weight:600;
    color:var(--ink-primary);
}


hr,
.letterpress-rule {
    border:0;
    height:1px;
    background-color:var(--rule-line-strong);
    margin:2rem 0;
    width:100%;
}


.letterpress-rule-double {
    border:0;
    height:4px;
    border-top:1px solid var(--rule-line-strong);
    border-bottom:1px solid var(--rule-line-strong);
    margin:2.25rem 0;
    background:transparent;
}


img,
picture,
svg,
video {
    display:block;
    max-width:100%;
    height:auto;
}


img {
    font-style:italic;
    shape-margin:0.75rem;
    border-radius:var(--radius-xs);
}


/* Links */
a {
    color:var(--ink-primary);
    text-decoration-color:var(--rule-line-strong);
    text-underline-offset:3px;
    transition:color var(--dur-rapid) var(--ease-letterpress),
                            text-decoration-color var(--dur-rapid) var(--ease-letterpress);
}


a:hover {
    color:var(--accent);
    text-decoration-color:var(--accent);
}


/* Form Controls Reset (font: inherit on controls only) */
input,
button,
textarea,
select {
    font:inherit;
    color:inherit;
}


button {
    cursor:pointer;
    background:none;
    border:none;
}


.skip-link {
    position:absolute;
    top:-100px;
    left:1.5rem;
    background:var(--bg-dark);
    color:var(--ink-light);
    font-family:var(--lepu-1a5);
    font-size:var(--text-sm);
    padding:0.75rem 1.25rem;
    z-index:1000;
    text-decoration:none;
    border:1px solid var(--ink-light);
    border-radius:var(--radius-xs);
    box-shadow:var(--shadow-lift);
    transition:top var(--dur-rapid) var(--ease-snappy);
}


.skip-link:focus {
    top:1.5rem;
    outline:2px solid var(--ink-light);
    outline-offset:2px;
}


/* Layout Primitives */
.shell-wrap {
    width:100%;
    max-width:var(--page-max);
    margin-left:auto;
    margin-right:auto;
    padding-left:var(--gutter-fluid);
    padding-right:var(--gutter-fluid);
    position:relative;
    z-index:1;
}


.shell-bleed {
    width:100%;
    position:relative;
    z-index:1;
}


.section-block {
    padding-top:clamp(3.5rem, 7vw, 6.5rem);
    padding-bottom:clamp(3.5rem, 7vw, 6.5rem);
    position:relative;
}


.section-divider { border-top:1px solid var(--rule-line-strong); }


/* Book Margin Layout Architecture */
.book-layout {
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:2.25rem;
    align-items:start;
}


@media (min-width: 1040px) {
    .book-layout {
        grid-template-columns:minmax(0, 68%) minmax(0, 32%);
        gap:clamp(2rem, 5vw, 4.5rem);
    }
}


.book-main { min-width:0; }


.book-margin {
    min-width:0;
    font-size:var(--text-sm);
    line-height:var(--leading-snug);
    color:var(--ink-muted);
}


.margin-note {
    border-left:2px solid var(--rule-line-strong);

    padding-left:1rem;
    margin-bottom:2rem;
    font-size:var(--text-sm);
}


.margin-note-dark { border-left-color:var(--accent); }


.margin-label {
    font-family:var(--lepu-1a5);
    font-size:var(--text-xs);
    text-transform:uppercase;
    letter-spacing:var(--tracking-caps);
    color:var(--ink-subtle);
    display:block;
    margin-bottom:0.35rem;
}


.margin-figure {
    font-family:var(--lepu-4d4);
    font-size:var(--text-lg);
    font-weight:700;
    color:var(--ink-primary);
    display:block;
    line-height:1.1;
    margin-bottom:0.25rem;
}


.icon {
    display:inline-block;
    width:1.25rem;
    height:1.25rem;
    stroke-width:0;
    stroke:currentColor;
    fill:currentColor;
    flex-shrink:0;
    vertical-align:-0.18em;
}


.icon-sm {
    width:1rem;
    height:1rem;
}


.icon-lg {
    width:1.75rem;
    height:1.75rem;
}


/* Accessible hidden utility */
.visually-hidden {
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;

    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0, 0, 0, 0) !important;
    white-space:nowrap !important;
    border:0 !important;
}


/* Focus Visible Standard */
:focus-visible {
    outline:2px solid var(--ink-primary);
    outline-offset:3px;
}


/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration:0.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:0.01ms !important;
        scroll-behavior:auto !important;
    }
}