:root{color-scheme:dark;--bg:#100d12;--panel:#17111a;--ink:#fff6ee;--muted:#d2c2ce;--gold:#e7be84;--line:#554050;--serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;--sans:system-ui,sans-serif}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--sans);min-height:100svh}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
button:disabled{opacity:.43;cursor:default}
h1,h2,p,figure{margin:0}
.masthead{min-height:68px;padding:10px clamp(16px,5vw,76px);display:flex;align-items:center;gap:24px;border-bottom:1px solid var(--line);background:#100c12;justify-content:space-between}
.wordmark{border:0;background:none;padding:8px 0;min-height:44px;display:flex;align-items:center;gap:12px;letter-spacing:.17em;font-size:.74rem;font-weight:700;text-align:left}
.wordmark span{width:23px;height:15px;border:1px solid var(--gold);transform:skew(-20deg);box-shadow:inset 0 0 0 3px #151016,inset 0 0 0 4px #a46872}
.identity,.eyebrow,.opening-index{letter-spacing:.16em;text-transform:uppercase;font-size:.72rem;font-weight:700}
.identity{color:var(--muted);margin-left:auto}
.opening,.closing{padding:clamp(40px,9vw,122px) clamp(22px,8vw,128px);background:radial-gradient(ellipse at 83% 22%,#542235 0%,transparent 49%),radial-gradient(ellipse at 20% 92%,#271732 0%,transparent 55%),#100d12;position:relative}
.opening{min-height:calc(100svh - 132px);display:grid;align-items:center;padding-bottom:115px}
.opening-copy{position:relative;max-width:1000px}
.eyebrow{color:var(--gold)}
h1,.closing h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.65rem,7.5vw,7.4rem);line-height:.96;letter-spacing:-.055em;margin:.23em 0 .28em}
em{color:#f0c899;font-weight:400}
.tagline{font-family:var(--serif);font-size:clamp(1.2rem,2.5vw,2rem);margin-bottom:9px}
.intro{color:var(--muted);max-width:52ch}
.primary,.quiet,.floating{min-height:44px;padding:8px 15px;border:1px solid var(--line);background:var(--panel);border-radius:4px}
.primary{margin-top:28px;background:var(--gold);color:#221420;font-weight:700;border-color:transparent;padding:11px 20px}
.primary span{margin-left:12px}
button:hover:enabled{border-color:var(--gold)}
.primary:hover{background:#f5d5a8}
.opening-index{color:var(--muted);position:absolute;bottom:22px;left:clamp(22px,8vw,128px);right:clamp(22px,8vw,128px);border-top:1px solid var(--line);padding-top:15px;display:flex;justify-content:space-between;gap:10px}
.story{width:min(100% - 48px,1280px);margin:14px auto 20px}
.stage{position:relative;background:#09070b;display:grid;justify-items:center;align-items:center;overflow:hidden;touch-action:pan-y;min-height:100px}
.stage img{display:block;width:100%;height:auto;max-height:calc(100svh - 286px);object-fit:contain}
.floating{position:absolute;right:12px;top:12px;background:#140e19ed;z-index:1}
figcaption{border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(130px,19%) 1fr;gap:22px;padding:15px 0 14px}
figcaption .eyebrow{padding-top:6px}
figcaption h2{font:400 clamp(1.55rem,3vw,2.55rem)/1.05 var(--serif);letter-spacing:-.025em;margin-bottom:5px}
figcaption p{color:var(--muted);max-width:92ch}
.controls,.projection-tools,.sequence,#timeline{display:flex;align-items:center;gap:8px}
.controls{justify-content:space-between;margin-top:10px}
.sequence{gap:14px}
output{color:var(--gold);font-variant-numeric:tabular-nums;white-space:nowrap}
#timeline button{background:none;border:0;border-bottom:2px solid var(--line);min-width:37px;min-height:44px;color:var(--muted);font-size:.8rem}
#timeline button[aria-current="step"]{background:#33202e;color:var(--ink);border-color:var(--gold)}
.projection-tools{justify-content:center;margin-top:8px}
.closing{min-height:calc(100svh - 146px)}
.closing h2{max-width:17ch;font-size:clamp(2.6rem,6.8vw,6.2rem)}
.validation{color:var(--muted);font-size:.88rem;margin-top:14px;max-width:63ch}
footer{padding:15px clamp(20px,5vw,76px);border-top:1px solid var(--line);color:var(--muted);font-size:.73rem}
dialog{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;padding:0;background:#08070a;color:var(--ink)}
dialog[open]{display:grid;place-items:center}
dialog img{width:100%;height:100%;object-fit:contain}
dialog::backdrop{background:#08070a}
body:has(dialog[open]){overflow:hidden}
.presenting .identity,.presenting footer{display:none}
.presenting .masthead{min-height:50px;padding-block:3px}
.presenting .story{width:min(100% - 28px,1800px);margin-top:5px}
.presenting .stage img{max-height:calc(100svh - 282px)}
.presenting.captionless .stage img{max-height:calc(100svh - 162px)}
.reveal{animation:reveal .82s ease-out}
.reveal-caption{animation:reveal .58s .21s both}
.fade{animation:reveal .28s ease-out}
@keyframes reveal{from{opacity:0}to{opacity:1}}
@media(max-width:700px){
  .identity{display:none}
  .story{width:calc(100% - 24px)}
  .stage img,.presenting .stage img,.presenting.captionless .stage img{max-height:none}
  figcaption{grid-template-columns:1fr;gap:5px}
  figcaption p{font-size:.94rem}
  .controls{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .sequence{grid-column:1/-1;grid-row:1;justify-content:space-between;gap:6px}
  #timeline{flex:1;gap:3px}
  #timeline button{flex:1;min-width:0;padding:0}
  .floating{right:6px;top:6px;padding-inline:9px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important}}