

:root {
    --bg:#BFA384;
    --bg-surface:#A18565;
    --bg-deep:#26211C;
    --bg-darker:#1A1612;
    --bg-kraft-light:#C9B094;
    --bg-tint:rgba(38, 33, 28, 0.06);


    --ink:#1C1814;
    --ink-muted:#211B17;
    --ink-subtle:#3D352E;
    --ink-inverse:#F7F3EE;

    --ink-inverse-muted:#E2D7C8;


    --accent:#9A1406;
    --accent-dark:#460500;
    --accent-light:#FF5A47;
    --accent-alpha:rgba(168, 32, 18, 0.12);


    --border:#7A664E;
    --border-light:#8E785D;
    --border-dark:#3D352E;
    --border-subtle:rgba(28, 24, 20, 0.18);


    --zugi-044:'Oswald', Impact, sans-serif;
    --zugi-3e0:"Literata", Georgia, serif;
    --zugi-760:"JetBrains Mono", "Courier New", monospace;


    --fs-xs:clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
    --fs-sm:clamp(0.875rem, 0.825rem + 0.25vw, 0.9375rem);
    --fs-base:clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --fs-md:clamp(1.125rem, 1.05rem + 0.38vw, 1.3125rem);
    --fs-lg:clamp(1.375rem, 1.25rem + 0.63vw, 1.75rem);
    --fs-xl:clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);
    --fs-2xl:clamp(2.25rem, 1.85rem + 2vw, 3.5rem);
    --fs-huge:clamp(3rem, 2.25rem + 3.75vw, 5.5rem);
    --fs-numeral:clamp(3.5rem, 2.75rem + 4.5vw, 6.75rem);


    --lh-tight:1.08;
    --lh-snug:1.25;
    --lh-body:1.58;

    --lh-relaxed:1.75;


    --space-2xs:0.25rem;
    --space-xs:0.5rem;
    --space-sm:0.75rem;
    --space-md:1rem;
    --space-lg:1.5rem;
    --space-xl:2rem;
    --space-2xl:3rem;
    --space-3xl:4.5rem;
    --space-4xl:6rem;
    --space-section:clamp(3.5rem, 3rem + 3vw, 6.5rem);


    --radius-none:0px;
    --radius-xs:2px;
    --radius-sm:3px;


    --container-max:1360px;
    --nav-rail-width:280px;


    --ease-trade:cubic-bezier(0.2, 0, 0.2, 1);
    --ease-snap:cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast:140ms;
    --dur-base:220ms;
    --dur-deliberate:360ms;


    --shadow-stamped:2px 2px 0px var(--ink);
    --shadow-inset:inset 0 1px 2px rgba(0, 0, 0, 0.15);
    --shadow-lift:0 8px 24px rgba(28, 24, 20, 0.18);
}


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


html {
    background-color:var(--bg);
    color:var(--ink);
    font-family:var(--zugi-3e0);
    font-size:16px;
    line-height:var(--lh-body);
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    scroll-behavior:smooth;
    overflow-x:hidden;
}


body {
    min-height:100vh;
    background-color:var(--bg);
    color:var(--ink);
    overflow-x:hidden;
    position:relative;
    display:flex;
    flex-direction:column;
}


h1, h2, h3, h4, h5, h6 {
    font-family:var(--zugi-044);
    font-weight:700;
    line-height:var(--lh-tight);
    color:var(--ink);
    text-transform:uppercase;
    letter-spacing:0.03em;
    word-wrap:break-word;
    overflow-wrap:break-word;
    hyphens:manual;
}


h1 {
    font-size:var(--fs-2xl);
    letter-spacing:0.02em;
}


h2 { font-size:var(--fs-xl); }


h3 { font-size:var(--fs-lg); }


h4 { font-size:var(--fs-md); }


p {
    font-family:var(--zugi-3e0);
    font-size:var(--fs-base);
    line-height:var(--lh-body);
    color:var(--ink);
    margin-bottom:var(--space-md);
    max-width:68ch;
}


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


strong, b {
    font-weight:700;
    color:var(--ink);
}


em, i { font-style:italic; }


small {
    font-size:var(--fs-sm);
    line-height:var(--lh-snug);
}


code, kbd, samp, pre {
    font-family:var(--zugi-760);
    font-size:var(--fs-sm);
}


hr {
    border:0;
    height:2px;
    background-color:var(--border);
    margin:var(--space-xl) 0;
}


ul, ol {
    padding-left:var(--space-xl);
    margin-bottom:var(--space-md);
}


ul:last-child, ol:last-child { margin-bottom:0; }


li {
    margin-bottom:var(--space-xs);
    font-size:var(--fs-base);
}


li::marker {
    color:var(--accent);
    font-weight:bold;
}


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


a {
    color:var(--accent-dark);
    text-decoration:underline;
    text-decoration-thickness:1.5px;
    text-underline-offset:3px;
    transition:color var(--dur-fast) var(--ease-trade), text-decoration-color var(--dur-fast) var(--ease-trade);
}


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


a:focus-visible {
    outline:2px solid var(--accent);
    outline-offset:3px;
    background-color:rgba(168, 32, 18, 0.08);
}


input, button, textarea, select {
    font:inherit;
    font-size:100%;
    line-height:1.15;
}


table {
    border-collapse:collapse;
    width:100%;
}


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


.skip-link {
    position:absolute;
    top:-100px;
    left:var(--space-md);
    z-index:1000;
    background:var(--accent);
    color:var(--ink-inverse);
    padding:var(--space-sm) var(--space-md);
    font-family:var(--zugi-760);
    font-size:var(--fs-sm);
    font-weight:600;
    text-decoration:none;
    border:2px solid var(--ink);
    transition:top var(--dur-fast) var(--ease-snap);
}


.skip-link:focus {
    top:var(--space-md);
    outline:3px solid var(--ink);
}


.screen-reader-only,
.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0, 0, 0, 0);
    white-space:nowrap;
    border:0;
}


.site-wrap {
    width:100%;
    min-height:100vh;
    display:flex;
    flex-direction:column;

}


.container {
    width:100%;
    max-width:var(--container-max);
    margin-left:auto;
    margin-right:auto;
    padding-left:clamp(1rem, 0.75rem + 1.25vw, 2.5rem);
    padding-right:clamp(1rem, 0.75rem + 1.25vw, 2.5rem);
}


.section {
    padding-top:var(--space-section);
    padding-bottom:var(--space-section);
    position:relative;
    border-bottom:2px solid var(--border);
}


.section--surface { background-color:var(--bg-surface); }


.section--deep {
    background-color:var(--bg-deep);
    color:var(--ink-inverse);
}


.section--deep h1,
.section--deep h2,
.section--deep h3,
.section--deep h4,
.section--deep strong { color:var(--ink-inverse); }


.section--deep p,
.section--deep li,
.section--deep span { color:var(--ink-inverse-muted); }


.section--deep hr { background-color:var(--border-dark); }


.split-2-1 {
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:var(--space-xl);
    max-width:100%;
}


@media (min-width: 900px) {
    .split-2-1 {
        grid-template-columns:minmax(0, 2fr) minmax(0, 1fr);
        gap:var(--space-2xl);
    }
}


.split-1-2 {
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:var(--space-xl);
    max-width:100%;
}


@media (min-width: 900px) {
    .split-1-2 {
        grid-template-columns:minmax(0, 1fr) minmax(0, 2fr);
        gap:var(--space-2xl);
    }
}


.split-half {
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:var(--space-xl);
    max-width:100%;
}


@media (min-width: 800px) {
    .split-half {
        grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
        gap:var(--space-2xl);
    }
}


.numeral-lead {
    display:block;
    font-family:var(--zugi-044);
    font-size:var(--fs-numeral);
    font-weight:700;
    line-height:0.95;
    color:var(--ink);
    letter-spacing:-0.01em;
    margin-bottom:var(--space-xs);
    text-transform:uppercase;
}


.numeral-lead--accent { color:#4A0600; }


.numeral-unit {
    font-family:var(--zugi-760);
    font-size:var(--fs-md);
    font-weight:600;
    letter-spacing:0.05em;
    color:var(--ink-muted);
    display:inline-block;
    margin-left:var(--space-xs);
    vertical-align:0.25em;
    text-transform:uppercase;
}


.section--deep .numeral-lead { color:var(--ink-inverse); }


.section--deep .numeral-lead--accent { color:var(--accent-light); }


.section--deep .numeral-unit { color:var(--ink-inverse-muted); }


.numeral-sentence {
    font-family:var(--zugi-3e0);
    font-size:var(--fs-md);
    font-weight:600;
    line-height:var(--lh-snug);
    color:var(--ink);
    margin-bottom:var(--space-lg);
    max-width:58ch;
}


.section--deep .numeral-sentence { color:var(--ink-inverse); }


.prose {
    font-family:var(--zugi-3e0);
    font-size:var(--fs-base);
    line-height:var(--lh-body);
    color:var(--ink);
}


.prose p { margin-bottom:var(--space-md); }


.prose ul, .prose ol {
    margin-bottom:var(--space-md);
    padding-left:1.5rem;
}


.prose li { margin-bottom:var(--space-xs); }


.prose h3 {
    margin-top:var(--space-xl);
    margin-bottom:var(--space-xs);
}


.prose h4 {
    margin-top:var(--space-lg);
    margin-bottom:var(--space-xs);
}


.prose blockquote {
    border-left:4px solid var(--accent);
    padding:var(--space-sm) var(--space-md);
    background:var(--bg-surface);
    margin:var(--space-lg) 0;
    font-style:italic;
}


.prose-legal {
    max-width:72ch;
    font-size:var(--fs-base);
}


.prose-legal p {
    line-height:var(--lh-relaxed);
    margin-bottom:var(--space-md);
}


.prose-legal h2 {
    font-size:var(--fs-xl);
    margin-top:var(--space-2xl);
    margin-bottom:var(--space-sm);
    padding-bottom:var(--space-xs);
    border-bottom:2px solid var(--border);
}


.prose-legal h3 {
    font-size:var(--fs-lg);
    margin-top:var(--space-xl);
    margin-bottom:var(--space-xs);
}


.tag-spec {
    display:inline-flex;
    align-items:center;
    gap:0.35rem;
    font-family:var(--zugi-760);
    font-size:var(--fs-xs);
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.05em;
    padding:0.2rem 0.5rem;
    background-color:var(--ink);
    color:var(--ink-inverse);
    border-radius:var(--radius-xs);
    max-width:100%;
    box-sizing:border-box;
}


.tag-spec--accent {
    background-color:var(--accent);
    color:var(--ink-inverse);
}


.tag-spec--outline {
    background-color:transparent;
    color:var(--ink);
    border:1px solid var(--border-dark);
}


@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;
    }
}
