:root{
  --ink:#1E2A4A;      /* indigo ink: text */
  --page:#EEF2F0;     /* cool paper */
  --slate:#5B7B8C;    /* secondary text, rules */
  --lamp:#E3A72F;     /* projector lamp: single accent */
  --frame:#FFFFFF;
  --line:#C9D3D2;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{--ink:#E6EAF2;--page:#141B2E;--slate:#98ADBB;--frame:#1C2540;--line:#2E3A58}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font:1.0625rem/1.65 var(--serif);
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
a{color:inherit;text-decoration-color:var(--lamp);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{text-decoration-thickness:3px}
:focus-visible{outline:3px solid var(--lamp);outline-offset:3px;border-radius:2px}
.wrap{max-width:68rem;margin:0 auto;padding:0 1.5rem}
.masthead{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-top:1.5rem;padding-bottom:1.5rem;flex-wrap:wrap}
.mark{font:600 1.25rem/1 var(--serif);text-decoration:none;letter-spacing:.01em}
.mark span{color:var(--slate);font-weight:400}
.masthead nav{font:0.9375rem/1 var(--sans);display:flex;gap:1.25rem}
.masthead nav a{text-decoration:none;color:var(--slate)}
.masthead nav a:hover,.masthead nav a[aria-current]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--lamp)}

/* Home */
.hero{padding:3rem 0 2rem;display:grid;grid-template-columns:minmax(0,1fr);gap:2.5rem}
.hero h1{font:400 clamp(2.4rem,6vw,4.6rem)/1.05 var(--serif);margin:0;max-width:14ch;letter-spacing:-.015em}
.hero p.lede{font-size:1.25rem;max-width:36rem;margin:0;color:var(--slate)}
.story{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin:0;padding:0;list-style:none}
.story li{margin:0}
.shot{aspect-ratio:16/9;background:var(--frame);border:1px solid var(--line);border-radius:3px;display:block;width:100%;height:auto;color:var(--ink)}
.story .cap{font:0.9375rem/1.4 var(--serif);font-style:italic;margin-top:.5rem;color:var(--slate)}
.story li:nth-child(n){animation:develop .9s ease-out both}
.story li:nth-child(2){animation-delay:.35s}.story li:nth-child(3){animation-delay:.7s}.story li:nth-child(4){animation-delay:1.05s}
@keyframes develop{from{opacity:0;filter:grayscale(1) blur(3px)}to{opacity:1;filter:none}}
@media (prefers-reduced-motion:reduce){.story li{animation:none!important}}
.lamp{fill:var(--lamp)}
.stroke{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;padding:2.5rem 0;border-top:1px solid var(--line)}
.modes h2{font:600 1.25rem/1.3 var(--serif);margin:0 0 .4rem}
.modes p{margin:0;color:var(--slate);max-width:32ch}
.status{border-top:1px solid var(--line);padding:2.5rem 0 3rem;max-width:40rem}
.status h2{font:400 1.75rem/1.2 var(--serif);margin:0 0 .75rem}

/* Documents */
.doc{max-width:42rem;padding:2rem 0 3rem}
.doc h1{font:400 clamp(2rem,4.5vw,3rem)/1.1 var(--serif);margin:.5rem 0 .5rem;letter-spacing:-.01em}
.doc .updated{font:0.9375rem/1.4 var(--sans);color:var(--slate);margin:0 0 2rem}
.doc h2{font:600 1.25rem/1.3 var(--serif);margin:2.25rem 0 .5rem}
.doc p,.doc li{max-width:66ch}
.doc ul,.doc ol{padding-left:1.25rem}
.doc dl{display:grid;grid-template-columns:max-content 1fr;gap:.4rem 1.5rem;margin:1rem 0}
.doc dt{color:var(--slate)}
.doc dd{margin:0}
.note{border-left:3px solid var(--lamp);padding:.25rem 0 .25rem 1rem;margin:1.5rem 0}

footer{border-top:1px solid var(--line);font:0.875rem/1.6 var(--sans);color:var(--slate);padding:1.5rem 0 2.5rem}
footer .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
footer nav{display:flex;gap:1rem;flex-wrap:wrap}
footer a{text-decoration:none}footer a:hover{text-decoration:underline}

@media (max-width:760px){
  .story{grid-template-columns:repeat(2,minmax(0,1fr))}
  .modes{grid-template-columns:minmax(0,1fr);gap:1.5rem}
  .doc dl{grid-template-columns:minmax(0,1fr)}
  .doc dt{margin-top:.5rem}
}
.doc h3{font:600 1.0625rem/1.4 var(--sans);margin:1.25rem 0 .25rem}
.emblem{margin:0;max-width:26rem;color:var(--ink)}
.emblem svg{display:block;width:100%;height:auto}
.emblem .lamp{animation:glow 1.6s ease-out both}
@keyframes glow{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.emblem .lamp{animation:none}}