/* Marschwerk landing page.
   One committed look: the game's sky haze and cloud tops, ink for night,
   bronze for the West and steel for the East (docs/adr/0289), gold only
   for the wishlist and the Golden Hour. The ground under the page follows
   the chapter in view (body[data-ground]), the way a map's climate does. */

@font-face{font-family:"Fell";src:url(fonts/fell-italic.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:"Fell";src:url(fonts/fell-roman.woff2) format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Silk";src:url(fonts/silk-400.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Silk";src:url(fonts/silk-400-ext.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Silk";src:url(fonts/silk-700.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Silk";src:url(fonts/silk-700-ext.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"RedHat";src:url(fonts/redhat-latin.woff2) format("woff2");font-weight:400 600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"RedHat";src:url(fonts/redhat-latin-ext.woff2) format("woff2");font-weight:400 600;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  color-scheme: light;
  /* the world */
  --haze:#B9A5B8;
  --dawn:#D6C7D3;
  --cloud:#F3EEF2;
  --dusk:#D8B2A9;
  --ash:#2A2430;
  --ink:#1E1A26;
  --ink-2:#4B4356;
  --bronze:#B07A45;
  --steel:#8C9DB4;
  --gold:#E9B44C;
  --gold-hi:#F7D98C;
  --renown:#D93F7A;
  /* tinctures: three lords a side */
  --coral:#E4725E; --saffron:#E3A93A; --rust:#B5532F;
  --cobalt:#3C63B8; --ice:#9DD3E4;  --indigo:#4B3F8F;

  --fg:var(--ink);
  --fg-2:var(--ink-2);
  --rule:color-mix(in oklab,var(--fg) 20%,transparent);
  --ground:var(--haze);

  --fell:"Fell","IM Fell English","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --silk:"Silk","Silkscreen",ui-monospace,Consolas,monospace;
  --sans:"RedHat","Red Hat Text","Segoe UI",system-ui,sans-serif;

  --steam-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'%3E%3Cpath d='M12.46 0C5.89 0 .51 5.06 0 11.5l6.7 2.77a3.5 3.5 0 0 1 1.99-.62h.2l2.98-4.31v-.06a4.72 4.72 0 1 1 4.71 4.72h-.11l-4.25 3.03v.17a3.54 3.54 0 0 1-7.01.7L.43 15.9A12.5 12.5 0 1 0 12.46 0ZM6.3 18.33c.27.57.74 1.04 1.37 1.3a2.66 2.66 0 0 0 3.47-1.43 2.64 2.64 0 0 0-1.43-3.47 2.63 2.63 0 0 0-1.96-.03l1.59.66a1.95 1.95 0 1 1-1.5 3.6L6.3 18.34Zm13.42-9.06a3.14 3.14 0 1 0-6.28 0 3.14 3.14 0 0 0 6.28 0Zm-5.49 0a2.36 2.36 0 1 1 4.72 0 2.36 2.36 0 0 1-4.72 0Z'/%3E%3C/svg%3E");
  --gutter:clamp(16px,5vw,72px);
  --bar-h:64px;
  --ease:cubic-bezier(.2,.7,.1,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--bar-h)}
body{margin:0;background:var(--ground);color:var(--fg);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;transition:background-color .9s var(--ease),color .9s var(--ease)}
body[data-ground="sky"]{--ground:var(--haze)}
body[data-ground="cloud"]{--ground:var(--cloud)}
body[data-ground="dawn"]{--ground:var(--dawn)}
body[data-ground="day"]{--ground:var(--dawn)}
body[data-ground="dusk"]{--ground:var(--dusk)}
body[data-ground="ash"]{--ground:var(--ash);--fg:var(--cloud);--fg-2:#B8AEBF}
body[data-ground="gold"]{--ground:var(--gold)}
img,video,canvas{display:block;max-width:100%}
figure,blockquote{margin:0}
[hidden]{display:none!important}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--ink);color:var(--cloud);padding:10px 14px;font:700 12px/1 var(--silk)}
.skip:focus{left:8px}

/* ------------------------------------------------------------ buttons */
.btn{--bg:var(--gold);--tx:var(--ink);display:inline-flex;align-items:center;gap:.7em;font:700 13px/1 var(--silk);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--tx);background:var(--bg);border:0;padding:14px 18px 13px;cursor:pointer;white-space:nowrap;
  box-shadow:inset 0 -4px 0 rgba(30,26,38,.22),inset 0 2px 0 rgba(255,255,255,.35),0 0 0 2px var(--ink);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background-color .18s}
.btn:hover{transform:translateY(-2px);box-shadow:inset 0 -4px 0 rgba(30,26,38,.22),inset 0 2px 0 rgba(255,255,255,.35),0 0 0 2px var(--ink),0 6px 0 -1px var(--ink)}
.btn:active{transform:translateY(1px);box-shadow:inset 0 -2px 0 rgba(30,26,38,.22),0 0 0 2px var(--ink)}
.btn-gold:hover{--bg:var(--gold-hi)}
.btn-ink{--bg:var(--ink);--tx:var(--cloud);box-shadow:inset 0 -3px 0 rgba(0,0,0,.4),0 0 0 2px var(--ink)}
.btn-s{font-size:11px;padding:10px 13px 9px}
.btn-l{font-size:15px;padding:18px 24px 17px}
.btn-xl{font-size:clamp(15px,1.6vw,20px);padding:24px 32px 22px}
.steam{width:1.25em;height:1.25em;flex:none;background:currentColor;
  -webkit-mask:var(--steam-svg) center/contain no-repeat;mask:var(--steam-svg) center/contain no-repeat}
.inline-cta{font:700 12px/1 var(--silk);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:4px;white-space:nowrap}
.inline-cta:hover{background:var(--gold);color:var(--ink)}

/* ------------------------------------------------------------ bar */
.bar{position:fixed;inset:0 0 auto 0;z-index:40;height:calc(var(--bar-h) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) var(--gutter) 0;display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.bar > *{pointer-events:auto}
/* Past the hero the bar stands on a fade of the page's ground, so a
   headline scrolling under it never reads through the name. */
.bar::before{content:"";position:absolute;inset:0 0 -28px 0;z-index:-1;background:linear-gradient(180deg,var(--ground) 45%,color-mix(in oklab,var(--ground) 0%,transparent));opacity:0;transition:opacity .4s,background .9s}
body.past-hero .bar::before{opacity:1}
body.over-film .bar::before{opacity:0}
body.past-hero.over-film .bar-mark,body.past-hero.over-film .bar-lang{color:var(--cloud);text-shadow:0 1px 12px rgba(20,16,28,.5)}
.bar-mark{font:700 14px/1 var(--silk);letter-spacing:.14em;text-decoration:none;opacity:0;transform:translateY(-6px);transition:opacity .4s,transform .4s var(--ease)}
body.past-hero .bar-mark{opacity:1;transform:none}
.bar-end{display:flex;align-items:center;gap:18px}
.bar-lang{font:400 11px/1 var(--silk);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:8px 2px;border-bottom:1px solid transparent}
.bar-lang:hover{border-bottom-color:currentColor}
.bar-lang .narrow{display:none}
.bar .btn{opacity:0;transform:translateY(-6px);transition:opacity .4s,transform .4s var(--ease)}
body.past-hero .bar .btn{opacity:1;transform:none}
body.at-seat .bar .btn{opacity:0;pointer-events:none}

/* ------------------------------------------------------------ rope */
.rope{position:fixed;left:var(--gutter);right:var(--gutter);bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:30;height:30px;opacity:0;transition:opacity .5s;pointer-events:none}
body.past-hero .rope{opacity:1;pointer-events:auto}
.rope-line{position:absolute;left:0;right:0;bottom:6px;height:3px;display:flex}
.rope-west{background:var(--bronze);flex:0 0 var(--knot,0%);transition:flex-basis .2s linear}
.rope-east{background:var(--steel);flex:1}
.rope-knot{position:absolute;bottom:0;left:var(--knot,0%);transform:translateX(-50%);transition:left .2s linear;z-index:1}
.rope-knot::after{content:"";display:block;width:12px;height:12px;margin:0 auto;background:var(--fg);transform:translateY(-1px) rotate(45deg);box-shadow:0 0 0 2px var(--ground)}
/* The label leans the way the knot stands, so it stays on the rope at
   both ends. */
.rope-clock{position:absolute;bottom:18px;left:50%;transform:translateX(calc(var(--knot,0%) * -1));font:700 11px/1 var(--silk);letter-spacing:.08em;text-transform:uppercase;font-variant-numeric:tabular-nums;white-space:nowrap}
.rope-notches{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.rope-notches li{position:absolute;bottom:0;transform:translateX(-50%)}
.rope-notches a{display:block;width:22px;height:22px;position:relative}
.rope-notches a::before{content:"";position:absolute;left:50%;bottom:4px;width:2px;height:8px;background:var(--fg);transform:translateX(-50%);opacity:.45;transition:height .2s,opacity .2s,background-color .2s}
.rope-notches li.free a::before{width:5px;height:5px;bottom:5px;border-radius:0;transform:translateX(-50%) rotate(45deg)}
.rope-notches li.past a::before{background:var(--bronze);opacity:1}
.rope-notches li.now a::before{opacity:0}
.rope-notches a span{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font:400 10px/1 var(--silk);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;background:var(--fg);color:var(--ground);padding:5px 6px 4px;opacity:0;pointer-events:none;transition:opacity .15s}
.rope-notches li:first-child a span{left:0;transform:none}
.rope-notches li:last-child a span{left:auto;right:0;transform:none}
.rope-notches a:hover span,.rope-notches a:focus-visible span{opacity:1}
.rope:has(.rope-notches a:hover) .rope-clock{opacity:0}

/* ------------------------------------------------------------ dock (phones) */
.dock{display:none}

/* ------------------------------------------------------------ chapters */
main{display:block}
.ch{position:relative;padding:clamp(96px,14vh,160px) var(--gutter) 0}
.slate{display:flex;align-items:center;gap:14px;font:700 12px/1 var(--silk);letter-spacing:.16em;text-transform:uppercase;margin-bottom:22px}
.slate .clock{color:var(--bronze);font-variant-numeric:tabular-nums}
body[data-ground="gold"] .slate .clock{color:var(--ink)}
.slate::after{content:"";flex:0 1 120px;height:1px;background:currentColor;opacity:.4;order:1}
.slate .slate-name{order:2}
.head{font:italic 400 clamp(34px,5.6vw,88px)/1 var(--fell);letter-spacing:-.01em;margin:0 0 .5em;max-width:15ch;text-wrap:balance}
.head.big{font-size:clamp(58px,12vw,210px);line-height:.9;max-width:none}
.sub{font:400 clamp(17px,1.4vw,21px)/1.45 var(--sans);max-width:36ch;margin:0;color:var(--fg-2)}
.label{font:400 11px/1.4 var(--silk);letter-spacing:.14em;text-transform:uppercase}

/* media shared */
.m{position:relative;overflow:hidden;background:color-mix(in oklab,var(--fg) 12%,var(--ground))}
.m img,.m video,.m canvas{width:100%;height:100%;object-fit:cover}
.m canvas{position:absolute;inset:0;opacity:0;transition:opacity .4s}
.m.live canvas{opacity:1}
.m.ph{display:grid;place-items:center}
.m.ph::after{content:attr(data-ph);font:400 10px/1 var(--silk);letter-spacing:.14em;text-transform:uppercase;opacity:.5}
.pin{position:relative;height:100svh;overflow:hidden}
.stage{position:absolute;inset:0}
.stage > .m{position:absolute;inset:0}
.on-film{position:relative;z-index:2;color:var(--cloud);text-shadow:0 2px 24px rgba(20,16,28,.45)}
.pin .on-film{position:absolute}
.pin .slate{white-space:nowrap;right:var(--gutter)}

/* ------------------------------------------------------------ 00:00 hero */
.hero{padding:0}
.hero .pin{height:100svh}
.hero-clouds{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.hero-sky{position:absolute;inset:0;pointer-events:none;z-index:1;z-index:1;background:
  linear-gradient(180deg,rgba(185,165,184,0) 45%,rgba(185,165,184,.55) 78%,var(--haze) 100%),
  linear-gradient(90deg,rgba(185,165,184,.55) 0%,rgba(185,165,184,0) 55%)}
.hero-copy{position:absolute;z-index:3;left:var(--gutter);right:var(--gutter);bottom:clamp(88px,15vh,150px);z-index:3;display:grid;gap:18px;justify-items:start}
.hero-mark{margin:0;position:relative;width:min(78vw,980px);aspect-ratio:2048/272}
.hero-mark picture{display:contents}
.hero-mark .mark-img{width:100%;height:auto;filter:drop-shadow(0 20px 26px rgba(30,26,38,.22))}
.js .hero-mark .mark-img{opacity:0}
.hero-mark .mark-blocks{position:absolute;inset:-12% -2% -30% -2%;width:104%;height:142%;pointer-events:none}
.hero-tagline{margin:0;font:700 clamp(12px,1.1vw,15px)/1 var(--silk);letter-spacing:.34em;text-transform:uppercase;padding-left:.3em}
.hero-act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:10px}
.hero-release{font:400 12px/1 var(--silk);letter-spacing:.16em;text-transform:uppercase}
.hero-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;display:grid;justify-items:center;gap:10px;font:400 10px/1 var(--silk);letter-spacing:.3em;text-transform:uppercase}
.hero-cue i{width:1px;height:44px;background:currentColor;transform-origin:top;animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);opacity:1}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}

/* ------------------------------------------------------------ oath
   Subtitles over the fall: the lines come while the camera is still above
   the clouds, the last lands as it dives into the battle. */
.oath-words{position:absolute;z-index:3;left:var(--gutter);right:var(--gutter);top:50%;transform:translateY(-50%);pointer-events:none}
.oath-words p{font:italic 400 clamp(32px,4.6vw,76px)/1.04 var(--fell);margin:0;text-wrap:balance;max-width:17ch}
.oath-words .o2{margin-top:.4em;padding-left:clamp(0px,8vw,160px);max-width:20ch}
.oath-words .o3{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);margin:0;padding:0;text-align:center;max-width:none;font-size:clamp(76px,15vw,260px);line-height:.9;color:var(--cloud);text-shadow:0 6px 60px rgba(20,16,28,.55)}
.js .oath-words .o1,.js .oath-words .o2,.js .oath-words .o3{opacity:0}
.js .oath-words .w{opacity:.12;transition:opacity .3s linear}
.js .oath-words .w.lit{opacity:1}
.shields{display:inline-flex;gap:5px;align-items:center;vertical-align:middle}
.shields i{width:20px;height:25px;background:var(--t);clip-path:polygon(0 0,100% 0,100% 58%,50% 100%,0 58%);box-shadow:inset 0 0 0 2px var(--bronze)}
.shields i.e{box-shadow:inset 0 0 0 2px var(--steel)}
.shields b{width:2px;height:22px;margin:0 6px;background:currentColor;opacity:.5}

/* ------------------------------------------------------------ works */
.works .head{margin-left:clamp(0px,30vw,520px)}
.works-film{margin:clamp(32px,6vh,64px) calc(var(--gutter) * -1) 0}
.works-film .pin{height:100svh}
.hud{position:relative;margin:clamp(48px,10vh,120px) 0 0;max-width:1400px}
.hud > .m{aspect-ratio:16/9;box-shadow:0 0 0 2px var(--ink),0 30px 60px -20px rgba(30,26,38,.45)}
.notes{list-style:none;margin:0;padding:0}
.note{display:grid;gap:4px;max-width:30ch}
.note b{font:700 12px/1.2 var(--silk);letter-spacing:.12em;text-transform:uppercase}
.note span{font:italic 400 19px/1.25 var(--fell)}
/* Each note is pinned to the thing it names (--x, --y of the picture): a
   gold square on it, a leader to the right, the note beyond; `.left`
   notes sit on the far side of their thing so they stay inside. */
@media (min-width:900px){
  .notes{position:absolute;inset:0;pointer-events:none}
  .note{position:absolute;left:var(--x);top:var(--y);transform:translate(86px,-50%);background:var(--ink);color:var(--cloud);padding:12px 14px 13px;box-shadow:0 12px 30px -10px rgba(20,16,28,.6)}
  .note::before{content:"";position:absolute;right:100%;top:50%;width:80px;height:1px;background:var(--gold)}
  .note::after{content:"";position:absolute;right:calc(100% + 80px);top:calc(50% - 6px);width:12px;height:12px;background:var(--gold);box-shadow:0 0 0 2px var(--ink);transform:translateX(6px)}
  .note.left{transform:translate(86px,-50%)}
}
@media (max-width:899px){.notes{display:grid;gap:18px;margin-top:22px}.note{border-left:3px solid var(--gold);padding-left:12px}}

/* ------------------------------------------------------------ tug */
.tug{padding:0;margin-top:clamp(96px,14vh,160px)}
.tug .slate{top:calc(var(--bar-h) + 24px);left:var(--gutter)}
.tug .head{left:var(--gutter);bottom:clamp(96px,16vh,160px);max-width:12ch}
.tug-seats{left:var(--gutter);bottom:clamp(96px,16vh,160px);margin:0;display:flex;align-items:center;gap:16px;font:400 11px/1.4 var(--silk);letter-spacing:.14em;text-transform:uppercase}
.tug .head{bottom:clamp(140px,22vh,220px)}
.tug-rope{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(56px,9vh,84px);z-index:2;display:flex;align-items:center;gap:14px;color:var(--cloud);font:700 12px/1 var(--silk);letter-spacing:.16em;text-transform:uppercase}
.tug-rope i{flex:1;height:4px;position:relative;background:linear-gradient(90deg,var(--bronze) 0 var(--front,50%),var(--steel) var(--front,50%) 100%)}
.tug-rope b{position:absolute;left:var(--front,50%);top:50%;width:16px;height:16px;background:var(--cloud);transform:translate(-50%,-50%) rotate(45deg);box-shadow:0 0 0 3px var(--ink)}

/* ------------------------------------------------------------ front: the reel */
.front .head.big{margin-bottom:.35em}
.reel{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(28px,4vw,64px) clamp(12px,1.6vw,24px);align-items:start}
.cut{margin:0}
.cut .m{aspect-ratio:16/9}
.cut figcaption{font:400 10px/1.5 var(--silk);letter-spacing:.12em;text-transform:uppercase;padding-top:10px;display:grid;gap:2px;color:var(--fg-2)}
.cut figcaption b{color:var(--fg);font-weight:700}
.c-a{grid-column:1/span 8}
.c-b{grid-column:9/span 4;margin-top:22%}.c-b .m{aspect-ratio:4/5}
.c-c{grid-column:2/span 5;margin-top:-6%}.c-c .m{aspect-ratio:1/1}
.c-d{grid-column:7/span 6;margin-top:8%}
.c-e{grid-column:1/span 12}.c-e .m{aspect-ratio:21/9}
.c-f{grid-column:4/span 6}
@media (max-width:760px){
  .reel{grid-template-columns:1fr 1fr}
  .c-a,.c-d,.c-e{grid-column:1/-1;margin:0 calc(var(--gutter) * -1)}
  .c-a figcaption,.c-d figcaption,.c-e figcaption{padding-inline:var(--gutter)}
  .c-b,.c-c{grid-column:span 1;margin-top:0}.c-c .m,.c-b .m{aspect-ratio:4/5}
  .c-e .m{aspect-ratio:16/9}
  .c-f{grid-column:1/-1}
}

/* ------------------------------------------------------------ crossings */
.cross .head{max-width:18ch}
.cross-ui{display:grid;grid-template-columns:minmax(200px,280px) 1fr;gap:clamp(20px,3vw,48px);align-items:start}
.cross-tabs{display:grid;gap:4px}
.cross-tabs button{display:flex;align-items:center;gap:14px;padding:12px 14px;background:transparent;border:0;cursor:pointer;text-align:left;font:700 12px/1 var(--silk);letter-spacing:.14em;text-transform:uppercase;position:relative;opacity:.55;transition:opacity .2s,background-color .2s}
.cross-tabs button img{width:32px;height:32px;image-rendering:pixelated}
.cross-tabs button:hover{opacity:.85}
.cross-tabs button[aria-selected="true"]{opacity:1;background:var(--ink);color:var(--cloud)}
.cross-tabs button::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:var(--p,0%);background:var(--gold)}
.cross-panel .m{aspect-ratio:16/9}
.cross-line{font:italic 400 clamp(24px,2.6vw,38px)/1.15 var(--fell);margin:18px 0 14px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px}
.cross-line small,.spell p small{font:400 10px/1 var(--silk);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}
.spell p small{margin-left:auto}
.opens{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.opens .label{margin-right:10px}
.opens img{width:52px;height:52px;image-rendering:pixelated}
@media (max-width:760px){
  .cross-ui{grid-template-columns:1fr}
  .cross-tabs{grid-auto-flow:column;grid-auto-columns:1fr;overflow-x:auto;scrollbar-width:none}
  .cross-tabs button{flex-direction:column;gap:8px;padding:10px 4px;font-size:9px;letter-spacing:.08em;text-align:center}
}

/* ------------------------------------------------------------ muster roll */
.roll .head{max-width:22ch}
.roll-ui{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:center}
.roll-stage{position:relative;aspect-ratio:1/1;max-height:74svh;width:100%;margin-inline:auto;background:
   radial-gradient(ellipse at 50% 60%,#fff 0,var(--cloud) 42%,var(--dawn) 100%);
  cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;overflow:hidden}
.roll-stage:active{cursor:grabbing}
.roll-canvas{position:absolute;inset:0;width:100%;height:100%}
.roll-fallback{position:absolute;left:50%;top:50%;width:60%;transform:translate(-50%,-52%);image-rendering:pixelated}
.roll-hint{position:absolute;left:0;right:0;bottom:16px;text-align:center;font:400 10px/1 var(--silk);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-2)}
.roll-deg{position:absolute;right:16px;top:16px;font:400 11px/1 var(--silk);font-variant-numeric:tabular-nums;color:var(--fg-2)}
.roll-role{font:700 11px/1.4 var(--silk);letter-spacing:.14em;text-transform:uppercase;color:var(--bronze);margin:0 0 10px}
.roll-name{font:italic 400 clamp(40px,5vw,76px)/.95 var(--fell);margin:0 0 16px}
.roll-desc{margin:0 0 22px;max-width:38ch;font-size:clamp(17px,1.3vw,20px)}
.roll-facts{display:flex;gap:28px;margin:0 0 24px}
.roll-facts dt{font:400 10px/1.4 var(--silk);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}
.roll-facts dd{margin:4px 0 0;font:700 15px/1.2 var(--silk);display:flex;align-items:center;gap:8px}
.roll-facts dd img{width:24px;height:24px;image-rendering:pixelated}
/* The unit's whole tree, a column per step; the lines are drawn under it
   (site.js, `lineage`), the way to the unit shown in bronze. */
.roll-lineage{position:relative;display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);margin-bottom:26px;width:max-content;max-width:100%}
.roll-lineage.alone{display:none}
.roll-lineage svg{position:absolute;inset:0;pointer-events:none;overflow:visible}
.roll-lineage path{fill:none;stroke:var(--fg);stroke-opacity:.28;stroke-width:1.5}
.roll-lineage path.way{stroke:var(--bronze);stroke-opacity:1;stroke-width:2.5}
.roll-lineage .col{display:flex;flex-direction:column;gap:6px;position:relative}
.roll-lineage button{border:0;padding:0;background:none;cursor:pointer;width:52px;height:52px;position:relative;opacity:.62;transition:opacity .15s,transform .15s var(--ease)}
.roll-lineage button:hover{opacity:1;transform:translateY(-2px)}
.roll-lineage button.way{opacity:1}
.roll-lineage button img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.roll-lineage button[aria-current="true"]{opacity:1;outline:2px solid var(--bronze);outline-offset:2px}
@media (max-width:420px){.roll-lineage{gap:14px}.roll-lineage button{width:44px;height:44px}}
.roll-index{margin:clamp(32px,6vh,64px) calc(var(--gutter) * -1) 0;padding:4px var(--gutter) 10px;display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x proximity;
  -webkit-mask:linear-gradient(90deg,#000 85%,transparent);mask:linear-gradient(90deg,#000 85%,transparent)}
.roll-group{flex:none;scroll-snap-align:start}
.roll-group .label{display:block;margin-bottom:8px;color:var(--fg-2)}
.roll-group div{display:flex;gap:4px}
.roll-group button{width:56px;height:56px;padding:0;border:0;background:none;cursor:pointer;transition:transform .15s var(--ease)}
.roll-group button:hover{transform:translateY(-3px)}
.roll-group button[aria-selected="true"]{outline:2px solid var(--bronze);outline-offset:2px}
.roll-group button img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.roll-more{margin:22px 0 0;display:flex;flex-wrap:wrap;gap:12px 22px;align-items:baseline;font:italic 400 22px/1.3 var(--fell)}
@media (max-width:860px){.roll-ui{grid-template-columns:1fr}.roll-stage{margin:0 calc(var(--gutter) * -1)}}

/* ------------------------------------------------------------ tower */
.tower{padding:0;margin-top:clamp(96px,14vh,160px)}
.tower .slate{top:calc(var(--bar-h) + 24px);left:var(--gutter)}
/* The meteor falls through the middle and lands low: the words take the sky. */
.tower-words{left:var(--gutter);right:var(--gutter);top:calc(var(--bar-h) + 64px)}
.tower .head.big{font-size:clamp(50px,8vw,140px);max-width:17ch;margin-bottom:.3em}
.tower .sub{color:var(--cloud);text-shadow:0 1px 3px rgba(20,16,28,.8),0 2px 18px rgba(20,16,28,.7)}
.spells{padding:clamp(40px,8vh,80px) 0 0}
.spell-strip{list-style:none;margin:0;padding:0 var(--gutter) 12px;display:flex;gap:clamp(12px,1.4vw,20px);overflow-x:auto;scroll-snap-type:x proximity;
  -webkit-mask:linear-gradient(90deg,#000 80%,transparent);mask:linear-gradient(90deg,#000 80%,transparent)}
.spell{flex:0 0 clamp(220px,24vw,340px);scroll-snap-align:start}
.spell .m{aspect-ratio:4/5}
.spell p{display:flex;align-items:center;gap:10px;margin:10px 0 0;font:700 12px/1.2 var(--silk);letter-spacing:.12em;text-transform:uppercase}
.spell p img{width:32px;height:32px;image-rendering:pixelated}
.spell.more{display:grid;place-items:center;font:italic 400 28px/1.2 var(--fell);color:var(--fg-2)}

/* ------------------------------------------------------------ keep */
.keep{padding:0;margin-top:clamp(96px,14vh,160px)}
.keep .slate{top:calc(var(--bar-h) + 24px);left:var(--gutter)}
.keep .head{right:var(--gutter);bottom:clamp(96px,16vh,150px);text-align:right;max-width:13ch}
.keep-ladder{position:absolute;z-index:2;left:var(--gutter);bottom:clamp(96px,16vh,150px);list-style:none;margin:0;padding:0;display:flex;gap:10px;font:700 clamp(18px,2vw,26px)/1 var(--silk);color:var(--cloud)}
.keep-ladder li{width:2.2em;height:2.2em;display:grid;place-items:center;box-shadow:inset 0 0 0 2px rgba(243,238,242,.45);opacity:.5;transition:opacity .2s,background-color .2s,color .2s}
.keep-ladder li.on{opacity:1;background:var(--cloud);color:var(--ink);box-shadow:none}
.keep-ladder li.ruin.on{background:var(--renown);color:var(--cloud)}

/* ------------------------------------------------------------ golden hour */
.golden{padding-bottom:0}
.golden .head.big{color:var(--ink)}
.gold-film{margin:0 calc(var(--gutter) * -1);position:relative}
.gold-film .m{aspect-ratio:21/9;max-height:88svh;width:100%}
.golden .sub{color:var(--ink);margin-top:22px;font:italic 400 clamp(22px,2.2vw,32px)/1.25 var(--fell);max-width:28ch}
@media (max-width:760px){.gold-film .m{aspect-ratio:4/5}}

/* Strips that run sideways: snap with the gutter kept, a mouse may drag
   them, they drift by themselves while nobody holds them, and their
   scrollbar is the page's own (site.js, `dragStrips`, `drift`, `stripBar`). */
.field-strip,.spell-strip,.roll-index{scroll-padding-inline:var(--gutter);cursor:grab;scrollbar-width:none}
.field-strip::-webkit-scrollbar,.spell-strip::-webkit-scrollbar,.roll-index::-webkit-scrollbar{display:none}
.field-strip.dragging,.spell-strip.dragging,.roll-index.dragging,
.field-strip.gliding,.spell-strip.gliding,.roll-index.gliding{scroll-snap-type:none}
.field-strip.dragging,.spell-strip.dragging,.roll-index.dragging{cursor:grabbing;user-select:none}
.strip-bar{position:relative;height:18px;margin:6px 0 0;cursor:pointer;touch-action:none}
.strip-bar::before{content:"";position:absolute;left:0;right:0;top:8px;height:2px;background:var(--fg);opacity:.16}
.strip-bar i{position:absolute;top:6px;height:6px;min-width:28px;background:var(--bronze);box-shadow:0 0 0 2px var(--ground);transition:height .15s,top .15s}
.strip-bar:hover i,.strip-bar.held i{top:4px;height:10px}
.strip-bar.held{cursor:grabbing}
.spells .strip-bar{margin-inline:var(--gutter)}
.roll-index + .strip-bar{margin-top:2px}
.field-strip.dragging *,.spell-strip.dragging *,.roll-index.dragging *{pointer-events:none}

/* ------------------------------------------------------------ fields */
.field-strip{list-style:none;margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter) 12px;display:flex;gap:clamp(12px,1.4vw,20px);overflow-x:auto;scroll-snap-type:x proximity;
  -webkit-mask:linear-gradient(90deg,#000 78%,transparent);mask:linear-gradient(90deg,#000 78%,transparent)}
.field{flex:0 0 clamp(260px,34vw,520px);scroll-snap-align:start}
.field .m{aspect-ratio:3/2}
.field p{margin:10px 0 0;font:400 10px/1.5 var(--silk);letter-spacing:.12em;text-transform:uppercase;display:flex;gap:10px;color:var(--fg-2)}
.field p b{color:var(--fg);font-weight:700}
.field.more{display:grid;place-items:center;flex-basis:clamp(120px,14vw,200px);font:italic 400 34px/1 var(--fell);color:var(--fg-2)}

/* ------------------------------------------------------------ seat */
.seat{padding:0;margin-top:clamp(96px,14vh,160px);min-height:100svh;display:grid;align-items:center;overflow:hidden}
.seat-film{position:absolute;inset:0}
.seat-film .m{position:absolute;inset:0}
.seat-film::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 55%,rgba(185,165,184,.82),rgba(185,165,184,.35) 70%,rgba(185,165,184,.1))}
.seat-copy{position:relative;z-index:2;display:grid;justify-items:center;text-align:center;padding:clamp(120px,16vh,180px) var(--gutter) clamp(120px,16vh,180px);gap:0}
.seat-copy .slate{justify-content:center}
.seat-copy .slate::after{display:none}
.seat-copy picture{display:contents}
.seat-mark{width:min(70vw,760px);height:auto;margin-bottom:26px;filter:drop-shadow(0 18px 24px rgba(30,26,38,.2))}
.seat .head{max-width:16ch;margin-inline:auto}
.seat-release{font:700 12px/1 var(--silk);letter-spacing:.2em;text-transform:uppercase;margin:22px 0 8px}
.seat-modes{font:400 11px/1.6 var(--silk);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2);margin:0 0 34px}
.press{display:inline-grid;gap:4px;text-decoration:none;padding:12px 18px;border:2px solid var(--ink)}
.press b{font:700 12px/1 var(--silk);letter-spacing:.14em;text-transform:uppercase}
.press span{font-size:13px;color:var(--fg-2)}
.press:hover{background:var(--ink);color:var(--cloud)}
.press:hover span{color:inherit}

/* ------------------------------------------------------------ footer */
.foot{padding:48px var(--gutter) calc(80px + env(safe-area-inset-bottom,0px));display:flex;flex-wrap:wrap;gap:10px 32px;align-items:baseline;font-size:14px;color:var(--fg-2);border-top:1px solid var(--rule)}
.foot p{margin:0}
.foot-made{color:var(--fg);font-weight:500}
.foot-links{display:flex;gap:20px;margin-left:auto}
.foot-links a{text-decoration:none;border-bottom:1px solid var(--rule)}
.foot-links a:hover{border-bottom-color:currentColor}

/* ------------------------------------------------------------ phones */
@media (max-width:760px){
  :root{--bar-h:56px}
  .bar .btn{display:none}
  .bar-lang .wide{display:none}.bar-lang .narrow{display:inline}
  .rope{display:none}
  .dock{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom,0px));background:color-mix(in oklab,var(--cloud) 92%,transparent);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--ink);
    border-top:3px solid;border-image:linear-gradient(90deg,var(--bronze) 0 var(--knot,50%),var(--steel) var(--knot,50%) 100%) 1;
    transform:translateY(110%);transition:transform .45s var(--ease)}
  body.past-hero .dock{transform:none}
  body.at-seat .dock{transform:translateY(110%)}
  .dock-text{display:grid;gap:4px;font:400 9px/1 var(--silk);letter-spacing:.14em;text-transform:uppercase}
  .dock-text b{font-size:11px}
  .hero-copy{bottom:clamp(84px,13vh,120px)}
  .hero-mark{width:calc(100vw - var(--gutter) * 2)}
  .hero-sky{background:linear-gradient(180deg,rgba(185,165,184,0) 30%,rgba(185,165,184,.7) 70%,var(--haze) 100%)}
  .works .head{margin-left:0}
  .keep .head{text-align:left;left:var(--gutter);right:auto}
  .keep-ladder{bottom:auto;top:calc(var(--bar-h) + 60px)}
  .foot{padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}
  .foot-links{margin-left:0}
}

/* ------------------------------------------------------------ calm */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .js .hero-mark .mark-img{opacity:1}
  .hero-mark .mark-blocks{display:none}
  .js .oath-words .w,.js .oath-words .o1,.js .oath-words .o2{opacity:1}
  .oath-words .o3{display:none}
  .pin{height:auto;aspect-ratio:16/9;max-height:100svh}
  .hero .pin{height:100svh}
}
@media (prefers-reduced-motion:reduce){
  .oath-words{top:calc(var(--bar-h) + 16px);transform:none}
  .oath-words p{font-size:clamp(24px,3vw,40px)}
}