

:root {
    --ground:#ded2bc;
    --ink:#221e19;
    --ochre:#8f4f0e;
    --terracotta:#9b3920;
    --olive:#565d47;
    --sand-light:#ebe3d3;
    --ground-dark:#1c1916;


    --ink-soft:#38322b;
    --ink-muted:#585044;
    --ink-faint:#7a7061;
    --sand-warm:#e4d8c1;
    --sand-deep:#d0c2a7;


    --border-hairline:rgba(34, 30, 25, 0.12);
    --border-soft:rgba(34, 30, 25, 0.20);
    --border-strong:rgba(34, 30, 25, 0.38);
    --border-ochre:rgba(184, 120, 50, 0.40);
    --border-olive:rgba(86, 93, 71, 0.35);


    --on-dark-ground:#1c1916;
    --on-dark-paper:#282420;
    --on-dark-ink:#ede3cf;
    --on-dark-muted:#b3a894;
    --on-dark-faint:#8a8170;
    --on-dark-border:rgba(237, 227, 207, 0.16);


    --waka-509:"Cinzel", Georgia, "Times New Roman", serif;
    --waka-1e6:"Crimson Pro", Georgia, "Times New Roman", serif;
    --waka-c46:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;


    --step--2:clamp(0.72rem, 0.70rem + 0.12vw, 0.80rem);
    --step--1:clamp(0.86rem, 0.82rem + 0.22vw, 0.98rem);
    --waka-372:clamp(1.06rem, 1.01rem + 0.28vw, 1.22rem);
    --waka-9e3:clamp(1.24rem, 1.16rem + 0.46vw, 1.48rem);
    --waka-d5f:clamp(1.48rem, 1.35rem + 0.72vw, 1.84rem);
    --waka-6ae:clamp(1.78rem, 1.58rem + 1.12vw, 2.32rem);
    --waka-2e2:clamp(2.14rem, 1.85rem + 1.62vw, 2.92rem);
    --waka-335:clamp(2.54rem, 2.15rem + 2.25vw, 3.65rem);


    --space-3xs:0.25rem;
    --space-2xs:0.5rem;
    --space-xs:0.75rem;
    --space-s:1rem;
    --space-m:1.5rem;
    --space-l:2rem;
    --space-xl:3rem;
    --space-2xl:4.5rem;
    --space-3xl:6.5rem;


    --measure-reading:780px;
    --measure-wide:1140px;
    --measure-narrow:560px;
    --measure-full:100%;


    --radius-xs:2px;
    --radius-sm:3px;
    --radius-md:4px;
    --radius-lg:6px;


    --shadow-subtle:0 1px 2px rgba(34, 30, 25, 0.05);
    --shadow-card:0 4px 14px rgba(34, 30, 25, 0.08);
    --shadow-lift:0 10px 28px rgba(34, 30, 25, 0.14);


    --dur-fast:140ms;
    --dur-base:220ms;
    --dur-slow:380ms;
    --ease-editorial:cubic-bezier(0.16, 1, 0.3, 1);
    --ease-standard:cubic-bezier(0.4, 0, 0.2, 1);


    --touch-target:44px;
}


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


html {
    -webkit-text-size-adjust:100%;
    tab-size:4;
    scroll-behavior:smooth;

    background-color:var(--ground);
    color:var(--ink);
}


body {
    background-color:var(--ground);
    color:var(--ink);
    font-family:var(--waka-1e6);
    font-size:var(--waka-372);
    line-height:1.68;
    font-weight:400;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
    min-height:100vh;
}


input, button, textarea, select {
    font:inherit;
    color:inherit;
    letter-spacing:inherit;
}


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


a {
    color:inherit;
    text-decoration:none;
}


ul, ol {
    list-style:none;
}


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


button {
    background:none;
    border:none;
    cursor:pointer;
    text-align:inherit;
}


h1, h2, h3, h4, h5, h6 {
    font-family:var(--waka-509);
    font-weight:600;
    line-height:1.22;
    letter-spacing:0.02em;
    color:var(--ink);
    text-wrap:balance;
    margin-top:0;
    min-width:0;
}


h1 {
    font-size:var(--waka-335);
    letter-spacing:0.03em;
    line-height:1.15;
}


h2 {
    font-size:var(--waka-6ae);
    letter-spacing:0.025em;
    line-height:1.22;
}


h3 {
    font-size:var(--waka-d5f);
    letter-spacing:0.02em;
    line-height:1.28;
}


h4 {
    font-size:var(--waka-9e3);
    letter-spacing:0.015em;
    line-height:1.34;
}


p {
    margin-top:0;
    margin-bottom:var(--space-m);
    text-wrap:pretty;
    min-width:0;
}


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


.lede-p,
.lede {
    font-size:var(--waka-9e3);
    line-height:1.55;
    color:var(--ink-soft);
    margin-bottom:var(--space-l);
    font-style:normal;
}


blockquote,
.pull-quote {
    font-family:var(--waka-1e6);
    font-style:italic;
    font-size:var(--waka-d5f);
    line-height:1.45;
    color:var(--ink);
    padding:var(--space-m) 0 var(--space-m) var(--space-l);
    border-left:3px solid var(--ochre);
    margin:var(--space-xl) 0;
}


.pull-quote cite {
    display:block;
    font-family:var(--waka-509);
    font-style:normal;
    font-size:var(--step--1);
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--ink-muted);
    margin-top:var(--space-xs);

}


cite {
    font-style:italic;
}


code, kbd, samp, pre {
    font-family:var(--waka-c46);
    font-size:var(--step--1);
}


.mono-spec {
    font-family:var(--waka-c46);
    font-size:var(--step--1);
    letter-spacing:0.02em;
}


.container-reading {
    width:100%;
    max-width:var(--measure-reading);
    margin-left:auto;
    margin-right:auto;
    padding-left:var(--space-m);
    padding-right:var(--space-m);
    min-width:0;
}


.container-wide {
    width:100%;
    max-width:var(--measure-wide);
    margin-left:auto;
    margin-right:auto;
    padding-left:var(--space-m);
    padding-right:var(--space-m);
    min-width:0;
}


.container-full {
    width:100%;
    padding-left:var(--space-m);
    padding-right:var(--space-m);
    min-width:0;
}


.sr-only {
    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;
}


.skip-link {
    position:absolute;
    top:var(--space-xs);
    left:var(--space-xs);
    z-index:1000;
    padding:var(--space-xs) var(--space-m);
    background-color:var(--ground-dark);
    color:var(--sand-light);
    font-family:var(--waka-c46);

    font-size:var(--step--1);
    border:1px solid var(--ochre);
    border-radius:var(--radius-sm);
    transform:translateY(-160%);
    transition:transform var(--dur-base) var(--ease-editorial);
}


.skip-link:focus-visible {
    transform:translateY(0);
    outline:2px solid var(--ochre);
    outline-offset:2px;
}


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


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


.editorial-flow {
    width:100%;
    max-width:var(--measure-reading);
    margin-left:auto;
    margin-right:auto;
}


.editorial-flow > * + * {
    margin-top:var(--space-m);
}


.subhead-inline {
    font-size:var(--waka-d5f);
    line-height:1.3;
    margin-top:var(--space-2xl);
    margin-bottom:var(--space-s);
    color:var(--ink);
}


.subhead-secondary {
    font-size:var(--waka-9e3);
    line-height:1.35;
    margin-top:var(--space-xl);
    margin-bottom:var(--space-xs);
    color:var(--ink-soft);
}


.figure-plate {
    margin:var(--space-2xl) 0;
    width:100%;
}


.figure-plate img {
    width:100%;
    height:auto;
    border-radius:var(--radius-sm);
    border:1px solid var(--border-hairline);
}


.plate-caption {
    font-family:var(--waka-1e6);
    font-style:italic;
    font-size:var(--step--1);
    line-height:1.5;
    color:var(--ink-muted);
    margin-top:var(--space-xs);
    padding-left:var(--space-xs);
    border-left:2px solid var(--olive);
}


.inset-box {
    background-color:var(--sand-light);
    border:1px solid var(--border-soft);
    border-radius:var(--radius-sm);
    padding:var(--space-m) var(--space-l);
    margin:var(--space-xl) 0;
}


.inset-box-title {
    font-family:var(--waka-509);
    font-size:var(--waka-372);
    font-weight:600;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--ink);
    margin-bottom:var(--space-xs);
}


.tag-badge {
    display:inline-flex;
    align-items:center;
    gap:var(--space-2xs);
    padding:0.2rem 0.6rem;
    font-family:var(--waka-c46);
    font-size:var(--step--2);
    line-height:1.3;
    border-radius:var(--radius-xs);
    background-color:var(--sand-warm);
    color:var(--ink);
    border:1px solid var(--border-hairline);
    min-height:24px;
}


.tag-ochre {
    background-color:rgba(184, 120, 50, 0.15);
    border-color:var(--border-ochre);
    color:#6c3d0c;
}


.tag-olive {
    background-color:rgba(86, 93, 71, 0.15);
    border-color:var(--border-olive);
    color:#313824;
}


.tag-terracotta {
    background-color:rgba(164, 80, 56, 0.14);
    border-color:rgba(164, 80, 56, 0.35);
    color:#5c2314;
}


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