:root{--paper:#e8eae4;--ink:#1c2226;--muted:#4f5a60;--mark:#f0b90b;--rule:rgba(28,34,38,.25);
--serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
--sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
@media (prefers-color-scheme:dark){:root{--paper:#171c1f;--ink:#e8eae4;--muted:#a3adb2;--rule:rgba(232,234,228,.25)}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:1.0625rem/1.6 var(--sans)}
a{color:inherit;text-decoration-color:var(--mark);text-decoration-thickness:.18em;text-underline-offset:.2em}
a:focus-visible{outline:3px solid var(--mark);outline-offset:3px}
.wrap{max-width:68rem;margin:0 auto;padding:0 1.25rem}
header{border-bottom:1px solid var(--rule)}
header .wrap{display:flex;justify-content:space-between;align-items:baseline;padding-top:1.25rem;padding-bottom:1.25rem}
.brand{font:800 1.3rem var(--serif);letter-spacing:-.01em;text-decoration:none}
nav a{margin-left:1.5rem;text-decoration:none}
nav a:hover,nav a[aria-current]{text-decoration:underline;text-decoration-color:var(--mark);text-decoration-thickness:.18em;text-underline-offset:.3em}
h1{font:800 clamp(3.2rem,11vw,8rem)/.92 var(--serif);letter-spacing:-.035em;margin:0}
h2{font:700 clamp(1.6rem,4vw,2.2rem)/1.15 var(--serif);letter-spacing:-.015em;margin:0 0 1rem}
.hero{padding:4rem 0 1rem}
.lead{font:1.3rem/1.5 var(--serif);max-width:34rem;margin:1.75rem 0 0}
.road{margin:2.5rem 0 4rem}
.road h2{margin-bottom:1.5rem}
.layer{display:grid;grid-template-columns:11rem 1fr;gap:1rem;padding:1.1rem 1.5rem;position:relative}
.layer b{font-family:var(--serif);font-size:1.1rem}
.layer p{margin:0;max-width:40rem}
.l1{background:#2a3236;color:#f1f2ee;padding-top:2.4rem}
.l2{background:#46515a;color:#f1f2ee}
.l3{background:#6d7b82;color:#10161a}
.l4{background:#b3ab97;color:#1c1a14}
.l5{background:#8b7a5c;color:#14110a;padding-bottom:1.6rem}
.l1::before{content:"";position:absolute;left:0;right:0;top:.9rem;height:6px;
background:repeating-linear-gradient(90deg,var(--mark) 0 3rem,transparent 3rem 5rem);
animation:reveal 1.8s ease-out both}
@keyframes reveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.facts{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));border-top:1px solid var(--rule);padding:2.5rem 0 3rem}
.facts p{margin:0;max-width:26rem}
.more{padding-bottom:4rem;font:700 1.4rem var(--serif)}
.story{max-width:42rem;position:relative;padding:0 0 3rem 2rem;font:1.2rem/1.7 var(--serif)}
.story::before{content:"";position:absolute;left:0;top:.4rem;bottom:3rem;width:5px;
background:repeating-linear-gradient(180deg,var(--mark) 0 2.5rem,transparent 2.5rem 4.5rem)}
.story p{margin:0 0 1.5em}
.story .close{font-weight:700}
.page-top{padding:3.5rem 0 2.5rem}
footer{border-top:1px solid var(--rule);color:var(--muted);font-size:.95rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;padding-top:1.5rem;padding-bottom:1.5rem}
@media (max-width:40rem){.layer{grid-template-columns:1fr;gap:.2rem}.story{padding-left:1.25rem;font-size:1.1rem}}
@media (prefers-reduced-motion:reduce){.l1::before{animation:none}}