/* Landing page palette, type, motion and scenes. */
:root{
  --ink:#0a0908;
  --bone:#e8e5dc;
  --ash:#b3ada3;
  --ember:#c85f22;
  --frame:clamp(28px,7.5vw,144px);
  --rail-inset:clamp(18px,2.1vw,32px);
  --rail-height:min(480px,max(320px,50svh),calc(100svh - 64px));
  --ui-text:#d9d3c6;
  --ui-text-hi:#f2ebdc;
  --ui-ink:#2a211a;
  --ui-rule:#d9d3c633;
  --ui-current:var(--ember);
  --ui-current-hi:#d66a2a;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --display:'Saira Extra Condensed',ui-sans-serif,system-ui,sans-serif;
  --body:'Saira',ui-sans-serif,system-ui,sans-serif;

  /* Inline noise avoids an image request. */
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
/* The chapter gauge replaces the visual scrollbar. */
html{
  scroll-snap-type:y mandatory;
  scroll-behavior:smooth;
  scroll-padding-top:0;
  scrollbar-width:none;                      /* Firefox */
}
.hero-runway,.act,.creed{ scroll-snap-align:start; scroll-snap-stop:always }
html::-webkit-scrollbar{ width:0; height:0 } /* WebKit */
body{
  margin:0; background:var(--ink); color:var(--bone);
  font:300 clamp(.97rem,1.1vw,1.14rem)/1.78 var(--body);
  letter-spacing:.012em; overflow-x:hidden;
}
img{max-width:100%; display:block}

/* Fixed overlays. */
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  background-image:var(--noise); opacity:.028;
}
.motes{ position:fixed; inset:0; z-index:55; pointer-events:none; width:100%; height:100% }

/* Shared axis for ticks and air. */
.o2{
  position:fixed;z-index:61;right:var(--rail-inset);top:50%;
  width:1px;height:var(--rail-height);transform:translateY(-50%);
  background:#e2d6bd26;pointer-events:none;
}
.o2 i{
  position:absolute;inset:0;display:block;transform-origin:bottom;
  background:linear-gradient(to top,#ae7749,#d4c1a0 64%,#eae3d3);
  opacity:.5;
}

/* Full-screen hero. */
.hero-runway{ position:relative; height:100svh; min-height:0 }
.hero-runway > .hero{ position:sticky; top:0; height:100svh; min-height:460px }

/* Fade the lede as the hero leaves. */
.lede{ opacity:calc(1 - var(--t,0) * .22) }

/* Dark copy over the poster's pale sky. */
.lede{
  position:absolute; z-index:5; inset:0;
  padding:clamp(30px,6vh,64px) var(--frame) clamp(54px,8vh,96px);
  display:grid; grid-template-rows:1fr auto; justify-items:center;
  pointer-events:none;
}
.lede__say{
  grid-row:2; justify-self:start; position:relative;
  display:grid; gap:clamp(10px,1.6vh,20px);
  padding-left:clamp(13px,1.5vw,20px);
  border-left:1px solid rgba(200,95,34,.45);
}
/* A broad light scrim protects dark copy. */
.lede__say::before{
  content:''; position:absolute; z-index:-1;
  /* Keep the gradient edge off-screen. */
  inset:-20vh -34vw -16vh -22vw; pointer-events:none;
  background:radial-gradient(38% 58% at 28% 54%,
    #fdf7ecf7 0%, #fdf7ecd6 32%, #fdf7ec5c 56%, transparent 72%);
}
.lede p{
  margin:0; max-width:27ch; color:#18120d;
  font-weight:400; letter-spacing:.02em;
}
.lede p:first-child{ font-size:1.05em; line-height:1.6 }
.lede .dim{ color:#503b25; font-size:.93em; max-width:24ch }

/* Full-screen acts. */
.act{ position:relative; height:100svh }
.act__pin{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:grid; place-items:center;
  contain:layout paint;
}
.act__art{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  filter:saturate(.76) contrast(1.06) brightness(.84) sepia(.08);
}
.act.is-live .act__art{ will-change:transform }
/* Sweep an ink veil; noise affects its edge, not the art. */
.act__veil{
  --dis:0;
  position:absolute; left:-2px; right:-2px; top:0; height:200%;
  z-index:2; pointer-events:none;
  background:var(--ink);
  /* Translate the 200%-tall mask; stops use half-scale coordinates. */
  -webkit-mask-image:linear-gradient(to top,transparent 41%,#000 50%);
          mask-image:linear-gradient(to top,transparent 41%,#000 50%);
  transform:translate3d(0,calc(var(--dis) * -100%),0);
}
.act__veil::after{
  content:''; position:absolute; inset:0; background:var(--ink);
  /* Noise fringe leads the solid edge. */
  -webkit-mask-image:var(--noise),linear-gradient(to top,transparent 40%,#000 56%);
          mask-image:var(--noise),linear-gradient(to top,transparent 40%,#000 56%);
  -webkit-mask-composite:source-in;
          mask-composite:intersect;
  -webkit-mask-size:320px 320px,100% 100%;
          mask-size:320px 320px,100% 100%;
}
.act__vig{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    /* Protect left-aligned copy. */
    linear-gradient(to right,#0b0a09e6 0%,#0b0a0999 26%,transparent 58%),
    radial-gradient(120% 90% at 50% 45%,transparent 28%,#0b0a09cc 100%),
    linear-gradient(to top,#0b0a09 0%,#0b0a0999 20%,transparent 52%);
}
.act__copy{
  position:relative; z-index:3;
  width:min(1240px,calc(100vw - 48px)); display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(12px,1.8vw,28px); row-gap:clamp(16px,2.4vh,30px);
}
.act__copy p{ grid-column:1/span 7; margin:0; max-width:34ch; text-shadow:0 2px 30px #0b0a09cc }

/* Type scale. */
.t.sm{ font-family:var(--display); font-weight:300;
       font-size:clamp(.82rem,1vw,.98rem); letter-spacing:.34em;
       text-transform:uppercase; color:#9c9084 }
.t.lg{ font-family:var(--display); font-weight:200; letter-spacing:.055em;
       font-size:clamp(1.85rem,4.2vw,3.9rem); line-height:1.16; max-width:25ch;
       color:#f6f1e9 }
.t.xl{ font-family:var(--display); font-weight:100; letter-spacing:.14em;
       font-size:clamp(2.5rem,7.6vw,6.6rem); line-height:1.02; text-transform:uppercase;
       max-width:20ch; color:#fbf7f0 }
.t.beat{ font-family:var(--display); font-weight:200; letter-spacing:.1em;
         font-size:clamp(1.4rem,2.7vw,2.4rem); color:#ded3c4 }
.t.dim{ color:var(--ash) }

/* Word arrival. */
.t[data-split] span{
  display:inline-block; white-space:pre;
  opacity:0; filter:blur(9px); transform:translateY(.42em);
  transition:opacity .85s var(--ease-out),
             filter  .85s var(--ease-out),
             transform .85s var(--ease-out);
  transition-delay:min(calc(var(--i) * 20ms),460ms);
}
.is-in .t[data-split] span{ opacity:1; filter:blur(0); transform:none }
.t.beat{ opacity:0; transform:translateY(.5em); transition:opacity .82s var(--ease-out),transform .82s var(--ease-out) }
.is-in .t.beat{ opacity:1; transform:none }
.is-in .t.beat:nth-of-type(2){ transition-delay:.34s }
.is-in .t.beat:nth-of-type(3){ transition-delay:.68s }
/* Pointer light. */
.act--dark .act__pin{ --mx:50%; --my:50%; background:#050506 }

.act__art--dim{ filter:brightness(.22) saturate(.44) contrast(1.12) }
.act__art--lit{
  z-index:2; filter:brightness(1.12) saturate(.78) contrast(1.08);
  -webkit-mask-image:radial-gradient(circle clamp(190px,27vmax,520px) at var(--mx,50%) var(--my,50%),
                     #000 0%,#000 17%,#000d 36%,#0007 56%,transparent 76%);
          mask-image:radial-gradient(circle clamp(190px,27vmax,520px) at var(--mx,50%) var(--my,50%),
                     #000 0%,#000 17%,#000d 36%,#0007 56%,transparent 76%);
  -webkit-mask-composite:source-over; mask-composite:add;
  -webkit-mask-size:auto; mask-size:auto;
}
.act--dark .act__pin::before,
.act--dark .act__pin::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  mix-blend-mode:screen;
}
.act--dark .act__pin::before{
  background:
    radial-gradient(circle at var(--mx) var(--my),#fffce0b8 0 1px,#b8dbd775 2px,transparent 7px),
    radial-gradient(circle clamp(150px,20vmax,390px) at var(--mx) var(--my),#d9eee41f 0%,#9ac6c315 24%,#568fa00b 47%,transparent 76%);
  filter:blur(.25px);
}
.act--dark .act__pin::after{
  opacity:.30; filter:blur(1.2px);
  background:
    radial-gradient(circle clamp(170px,23vmax,440px) at var(--mx) var(--my),transparent 0 52%,#b9d8d812 53%,transparent 54.2%),
    radial-gradient(circle clamp(205px,28vmax,540px) at var(--mx) var(--my),transparent 0 68%,#d9a77d0c 69%,transparent 70.2%);
}
.act--dark .act__copy p{ text-shadow:0 2px 40px #000, 0 0 90px #000 }
.act--dark .t.xl{ color:#fff }
.act--dark .t.dim{ color:#a99e91 }

/* Artless loss scene. */
.act--void .act__pin{
  background:radial-gradient(90% 70% at 50% 50%,#141210 0%,#0b0a09 70%);
}

/* Creed. */
.creed{
  position:relative; min-height:100svh; display:grid; place-content:center;
  gap:clamp(10px,1.8vh,20px); text-align:center; padding:14vh clamp(24px,6vw,80px);
  background:linear-gradient(to bottom,#0b0a09,#000);
}
.creed__mark{
  width:clamp(120px,15vw,210px); margin:0 auto clamp(24px,5vh,60px);
  opacity:.18; filter:blur(.3px);
}
.creed__keep,.creed__go{
  margin:0; font-family:var(--display); font-weight:200; text-transform:uppercase;
  font-size:clamp(2.1rem,5.8vw,5.4rem); line-height:1.06; letter-spacing:.24em; font-weight:100;
}
.creed__keep{ color:var(--bone) }
/* Match the scene dissolve. */
.creed__go{
  color:#c3b8a9;
  -webkit-mask-image:var(--noise),linear-gradient(to bottom,#000 0%,#0007 62%,transparent 100%);
          mask-image:var(--noise),linear-gradient(to bottom,#000 0%,#0007 62%,transparent 100%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
  -webkit-mask-size:320px 320px,100% 100%; mask-size:320px 320px,100% 100%;
}

/* Keep the lede clear of the Runner on narrow landscape screens. */
@media (max-width:1100px){
  .lede p{ max-width:23ch }
  .lede .dim{ max-width:22ch }
}

@media (max-width:720px){
  .act__copy{ grid-template-columns:1fr; width:calc(100vw - 48px) }
  .act__copy p{ grid-column:1; max-width:100% }
  /* Keep wide-image subjects clear of mobile copy. */
  main > .act:nth-of-type(1) .act__art,
  main > .act:nth-of-type(2) .act__art,
  main > .act:nth-of-type(5) .act__art,
  main > .act:nth-of-type(7) .act__art{ background-position:40% 50% }

  /* Mobile copy uses the bottom scrim. */
  .act__pin{ align-items:end }
  .act__copy{ padding-bottom:16vh }
  .act__vig{
    background:
      linear-gradient(to top,#0b0a09f7 0%,#0b0a09d9 30%,#0b0a0966 56%,transparent 76%),
      radial-gradient(140% 80% at 50% 34%,transparent 22%,#0b0a09b3 100%);
  }
  .creed__mark{ margin-bottom:clamp(18px,4vh,40px) }
  .lede{ padding-inline:24px; padding-bottom:clamp(54px,8vh,74px) }
  .lede p{ max-width:none; font-size:.88rem; line-height:1.55 }
  .lede .dim{ max-width:none; color:#47331f; font-size:.78rem; line-height:1.62 }
}

/* Live-type wordmark. */
.brand{
  position:absolute; margin:0; padding:0;
  display:block;
  font-family:'Saira Extra Condensed',var(--display);
  font-weight:100; line-height:.82;
  color:#353b43;
  opacity:1; text-rendering:geometricPrecision; z-index:1;
  /* Preserve backdrop blending. */
  mix-blend-mode:multiply;
  will-change:auto;
  white-space:nowrap; user-select:none;
}
.brand .row{
  display:flex; align-items:flex-start; width:max-content;
  letter-spacing:.052em; white-space:nowrap;
  transform:scaleY(1.12); transform-origin:left top;
}
.brand .row > span{ display:block; flex:none }
.brand .row > .gap{ width:.24em }



.runner-contact{
  border-radius:50%; pointer-events:none;
  background:radial-gradient(ellipse at center,#24150dcc 0%,#33201670 42%,transparent 74%);
  filter:blur(3px); mix-blend-mode:multiply; opacity:.46;
}

@media (max-width:720px){
  .brand .row{ letter-spacing:.036em }
  .brand .row > .gap{ width:.19em }
  .runner-contact{ opacity:.38 }
}


/* Scene composition. */
::selection{background:#b28255;color:#101113}
a,button{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:1px solid #dfc49f;outline-offset:7px}
.skip-link{position:fixed;left:24px;top:-80px;z-index:90;padding:10px 18px;background:#121414;color:var(--bone)}
.skip-link:focus{top:18px}
/* Low-frequency mask noise drifts across the wordmark. */
:root{
  --fog:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0045' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .30 .70'/%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23f)'/%3E%3C/svg%3E");
}
.brand{
  mix-blend-mode:normal;font-weight:200;
  /* Light fill, hairline dark outline: reads on both sky and cloud. */
  -webkit-text-stroke:.55px rgba(38,30,24,.55);
  text-shadow:0 0 .04em rgba(30,25,20,.30);
  -webkit-mask-image:var(--fog),linear-gradient(to bottom,#000 62%,#000000cc 82%,#00000055 96%,transparent 100%);
          mask-image:var(--fog),linear-gradient(to bottom,#000 62%,#000000cc 82%,#00000055 96%,transparent 100%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
  -webkit-mask-size:900px 900px,100% 100%; mask-size:900px 900px,100% 100%;
  -webkit-mask-position:0 0,0 0; mask-position:0 0,0 0;
  animation:fogflow 70s linear infinite;
}
@keyframes fogflow{ to{ -webkit-mask-position:900px 120px,0 0; mask-position:900px 120px,0 0 } }
.brand .row{transform:none;letter-spacing:.065em}
.hero::after{background:linear-gradient(#1017201c,transparent 35%),linear-gradient(0deg,#18120a30,transparent 24%)}
.lede{padding:0 var(--frame) 10vh}
.lede__say{gap:12px;padding-left:0;border-left:0;max-width:310px}
.lede p{font-size:14px;line-height:1.75;max-width:32ch;letter-spacing:.005em;color:#231f1b}
.lede p:first-child{font-size:14px;line-height:1.75}
.lede .dim{font-size:12px;line-height:1.8;max-width:32ch;color:#443d32}
/* Oversize the glow so its edge stays off-screen. */
.lede__say::before{
  inset:-60vh -70vw -55vh -45vw;
  background:radial-gradient(ellipse 19% 26% at 39% 51%,
    #e8d8bd96 0%, #e8d8bd5e 34%, #e8d8bd1f 58%, #e8d8bd08 76%, transparent 90%);
}
.lede{overflow:hidden}
/* Lede as label + statement, in the chapter-copy hierarchy. */
.lede__say{gap:14px;max-width:none}
.lede p.lede__kind{font:400 13px/1.7 var(--body);letter-spacing:.24em;text-transform:uppercase;color:#7a4a2c;max-width:none}
.lede p.lede__line{font:200 clamp(2rem,2.95vw,2.65rem)/1.06 var(--display);letter-spacing:.03em;color:#231f1b;max-width:none}
.chapter-nav{
  position:fixed;z-index:65;right:calc(var(--rail-inset) - 16px);
  top:50%;height:var(--rail-height);width:32px;transform:translateY(-50%);
}
.chapter-nav a{
  position:absolute;left:0;top:0;width:32px;height:32px;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;text-decoration:none;
  color:#dbd4c17a;font:400 9px/1 var(--body);font-variant-numeric:tabular-nums;
}
.chapter-nav a:nth-child(2){top:12.5%}.chapter-nav a:nth-child(3){top:25%}
.chapter-nav a:nth-child(4){top:37.5%}.chapter-nav a:nth-child(5){top:50%}
.chapter-nav a:nth-child(6){top:62.5%}.chapter-nav a:nth-child(7){top:75%}
.chapter-nav a:nth-child(8){top:87.5%}.chapter-nav a:nth-child(9){top:100%}
.chapter-nav a::after{
  content:'';position:absolute;right:16px;width:12px;height:1px;background:#d7cab375;
  transform:scaleX(.5);transform-origin:right;transition:transform .18s ease-out,background .18s;
}
.chapter-nav a[aria-current]::after{transform:scaleX(1);background:var(--ui-current)}
.chapter-nav span{
  position:absolute;right:56px;white-space:nowrap;padding:9px 12px;
  background:var(--ui-ink);color:var(--ui-text-hi);letter-spacing:.24em;text-transform:uppercase;font-size:10px;
  opacity:0;transform:translateX(3px);transition:opacity .16s,transform .16s;pointer-events:none;
}
.chapter-nav a:focus-visible span{opacity:1;transform:none}
@media(hover:hover) and (pointer:fine){
  .chapter-nav a:hover span{opacity:1;transform:none}
  .chapter-nav a:hover::after{transform:scaleX(1)}
}
.act__copy{width:calc(100% - 2 * var(--frame));column-gap:24px;row-gap:24px}
.act__copy p{grid-column:1 / span 6;max-width:30ch}
.chapter-label{grid-column:1/-1;display:flex;align-items:center;color:#c2b399;font:400 9px/1.5 var(--body);letter-spacing:.23em;margin:0 0 16px}
.t.lg{font-weight:300;font-size:clamp(2rem,3.55vw,3.4rem);line-height:1.22;letter-spacing:.018em;max-width:29ch;color:#e8e5dc}
.t.xl{font-weight:200;font-size:clamp(3rem,6vw,6rem);letter-spacing:.055em;line-height:1.08;color:#ecebe1}
.t.sm{font-family:var(--body);font-size:10px;letter-spacing:.17em;line-height:1.8;color:#b7beb9}
.t.beat{font-size:clamp(1.5rem,2.55vw,2.6rem);letter-spacing:.035em;font-weight:300}
.act__art{background-position:var(--art-position,center);filter:saturate(.64) contrast(1.04) brightness(.83)}
/* Keep each image subject clear of its copy. */
#surface{--art-position:26% 50%}
#hazards{--art-position:76% 48%}
/* pump01: bright arch dead centre (cols 5-8), dark floor along the bottom. */
#gear{--art-position:50% 42%}
/* robot: the android stands in the left third, open ground to the right. */
#world{--art-position:42% 50%}
/* gate: lit ring centred, dark walls both sides. */
#loss{--art-position:50% 50%}
#sanctuary{--art-position:50% 44%}
#hazards .act__copy p,#world .act__copy p{grid-column:8/-1}
#hazards .chapter-label,#world .chapter-label{grid-column:8/-1}
#hazards .act__vig,#world .act__vig{background:linear-gradient(270deg,#090b0de8, #090b0d80 37%,transparent 78%),linear-gradient(0deg,#0a0908,transparent 30%)}
#mission .act__copy{align-self:start;padding-top:14vh;pointer-events:none}
#mission .act__copy p{grid-column:1/span 7}
#mission .t.xl{font-size:clamp(3rem,5.5vw,5.3rem);max-width:19ch}
#mission .chapter-label{margin-bottom:0;color:#a5b6b5}
#mission .act__copy .dim{font-size:13px}
#gear .act__copy{align-self:end;padding-bottom:13vh}
#gear .act__copy p{grid-column:1/span 5;max-width:32ch}
#gear .chapter-label{grid-column:1/span 5}
#gear .act__vig{background:linear-gradient(0deg,#0a0908 2%,#0a0908d4 26%,transparent 62%),linear-gradient(90deg,#0a0908a6,transparent 46%)}
#world .act__copy{align-self:end;padding-bottom:12vh}
#world .act__copy p{max-width:34ch}
#loss .act__copy p:first-of-type{grid-column:1/span 5;font-family:var(--body);font-size:clamp(16px,1.45vw,21px);line-height:1.85;letter-spacing:0;color:#b4b3aa}
#loss .act__copy .xl{grid-column:8/-1;grid-row:2;align-self:center;max-width:18ch;font-size:clamp(3rem,5vw,5rem)}
#loss .act__vig{background:linear-gradient(90deg,#0a0908d9,#0a090880 34%,transparent 52%),linear-gradient(270deg,#0a0908c4,transparent 40%)}
#sanctuary .act__copy{justify-items:center;text-align:center}
#sanctuary .chapter-label{justify-content:center}
#sanctuary .act__copy p{grid-column:3/span 8;max-width:50ch}
#sanctuary .act__copy .xl{max-width:20ch;margin-top:14px}
#sanctuary .act__vig{background:linear-gradient(0deg,#0a0908,transparent 60%),radial-gradient(ellipse,#0a09089c, #0a090838)}
.creed{gap:16px}
.creed__keep,.creed__go{font-size:clamp(2rem,4.8vw,4.6rem);letter-spacing:.13em}
.creed__mark{width:74px;opacity:.38;margin-bottom:32px}
.creed__status{
  margin:0 0 8px;color:#c2b399;font:400 9px/1.5 var(--body);
  letter-spacing:.24em;text-transform:uppercase;
}

/* Light spill and lens ghosts. */
.act--dark .act__pin{--mx:64%;--my:58%;--beam:clamp(290px,39vmax,720px);--gx:43%;--gy:45%}
.act__art--dim{filter:brightness(.40) saturate(.55) contrast(1.08)}
.act__art--lit{filter:brightness(1.10) saturate(.65);background-position:center;
  mask-image:radial-gradient(ellipse var(--beam) calc(var(--beam)*.78) at var(--mx,64%) var(--my,58%),#000 0%,#000000ed 9%,#000000a6 25%,#00000052 48%,#00000014 70%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse var(--beam) calc(var(--beam)*.78) at var(--mx,64%) var(--my,58%),#000 0%,#000000ed 9%,#000000a6 25%,#00000052 48%,#00000014 70%,transparent 100%)}
.act--dark .act__pin::before{filter:none;background:radial-gradient(ellipse var(--beam) calc(var(--beam)*.78) at var(--mx) var(--my),#dcf0e513, #a6c9d009 30%,transparent 72%)}
.act--dark .act__pin::after{opacity:.4;filter:blur(3px);background:radial-gradient(ellipse 30px 22px at var(--gx) var(--gy),#abc3b70d,transparent 75%),radial-gradient(ellipse 5px 3px at var(--gx) var(--gy),#ccd9b520,transparent)}
.torch-optics{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen;opacity:.5;background:radial-gradient(ellipse 42vw 1px at var(--mx) var(--my),#c1e4e318,transparent 75%),radial-gradient(ellipse 36vw 9vh at 50% 88%,#a2d4d409,transparent 80%)}
@media(max-width:720px){
  :root{--frame:28px}
  .hero-runway>.hero{min-height:620px}
  .lede{padding-bottom:11vh}
  .lede__say{width:42vw;max-width:210px;padding-left:0;gap:10px}
  .lede p,.lede p:first-child{font-size:11px;line-height:1.7}
  .lede .dim{font-size:10px;line-height:1.7}
  .chapter-nav span{right:38px}
  .act__copy{width:calc(100% - 2 * var(--frame));grid-template-columns:1fr;gap:20px;padding-bottom:11vh}
  .act__copy p,#hazards .act__copy p,#gear .act__copy p,#world .act__copy p,#mission .act__copy p,#loss .act__copy p:first-of-type,#loss .act__copy .xl,#sanctuary .act__copy p{grid-column:1;grid-row:auto;max-width:100%}
  .chapter-label,#hazards .chapter-label,#gear .chapter-label,#world .chapter-label{grid-column:1;margin-bottom:8px;font-size:8px}
  .t.lg{font-size:clamp(1.85rem,7.2vw,2.7rem);line-height:1.22}
  .t.xl{font-size:clamp(2.7rem,10vw,4rem)}
  #gear .act__copy{padding-bottom:11vh}
  #mission .act__copy{padding-top:12vh;padding-bottom:0}
  #mission .t.xl{font-size:clamp(2.8rem,10vw,4rem);max-width:16ch}
  #mission .t.sm{max-width:28ch;font-size:9px}
  #mission .act__art{background-position:53% 65%;background-size:auto 80%;background-repeat:no-repeat}
  #mission .act__art--dim{filter:brightness(.48) saturate(.55)}
  #hazards .act__vig,#gear .act__vig,#world .act__vig,#loss .act__vig{background:linear-gradient(0deg,#0a0908 4%,#0a0908d9 32%,transparent 85%)}
  #loss .act__copy p:first-of-type{font-size:15px;line-height:1.8}
  #loss .act__copy .xl{font-size:2.9rem;max-width:15ch}
  #sanctuary .act__copy p{font-size:14px}
  #sanctuary .act__copy .xl{font-size:2.9rem}
  .creed__keep,.creed__go{font-size:clamp(1.7rem,7vw,2.8rem);letter-spacing:.09em}
}
@media(max-height:540px) and (min-width:721px){
    .lede__say{max-width:260px}
  .act__copy{row-gap:14px}.chapter-label{margin-bottom:0}
  .t.lg{font-size:2rem}.t.xl,#mission .t.xl{font-size:3rem}
}
@media(min-width:721px){
  /* Cover fits this art's height exactly, so the 10vh push would open an
     unlit strip across the header band. Oversize it instead. */
  #mission .act__art{background-position:center calc(50% + 10vh);background-size:auto calc(100% + 24vh);background-repeat:no-repeat}
  #mission .t.sm{max-width:none}
  #mission .act__copy .dim{max-width:48ch}
}

/* Keep the black surround continuous with the original cave image. */
.act--dark .act__pin{background:#000}
.t.lg,.t.xl{text-wrap:pretty}
/* Avoid focus boxes around programmatic targets. */
section[tabindex="-1"]:focus,.hero-runway[tabindex="-1"]:focus,.view[tabindex="-1"]:focus{outline:none}

/* Hide the hero layer bleed during page turns. */
.hero::before{
  content:'';position:absolute;left:0;right:0;bottom:0;height:16%;z-index:4;pointer-events:none;
  background:linear-gradient(to top,#0a0908,#0a0908b3 40%,transparent);
  opacity:min(1,calc(var(--t,0) * 2));
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;scroll-snap-type:none}
  .hero-runway,.act{height:auto;min-height:0}
  .hero-runway>.hero{position:relative}
  .hero__stage{display:block}
  .hero.is-ready .hero__still{opacity:0}
  .hero__l[data-id=sun],.brand{animation:none}
  .lede{opacity:1}
  .motes{display:none}
  .act__pin{position:relative;height:auto;min-height:100svh;padding:12vh 0}
  .act__veil{display:none}
  .act--dark .act__pin::after{display:none}
  #mission .act__copy{padding-top:0;padding-bottom:100px}
  .creed__go{-webkit-mask-image:none;mask-image:none}
  .act__art--lit{display:block}
  .t[data-split] span,.t.beat{opacity:1!important;filter:none!important;transform:none!important;transition:none}
  .chapter-nav a::after,.chapter-nav span{transition:none}
}

/* Wide frames already overflow vertically; cover keeps the width filled. */
@media(min-width:721px) and (min-aspect-ratio:23/10){
  #mission .act__art{background-size:cover}
}

/* Lede on small screens: keep the statement left of the Runner. */
@media(max-width:720px){
  .lede__say{width:auto;max-width:min(78vw,340px)}
  .lede p.lede__kind{font-size:10px;letter-spacing:.2em}
  .lede p.lede__line{font-size:clamp(1.6rem,7.4vw,2.1rem);line-height:1.08}
}
@media(max-height:540px) and (min-width:721px){
  .lede__say{max-width:none}
  .lede p.lede__line{font-size:clamp(1.6rem,4.2vh,2.2rem)}
}