@font-face{font-family:"Deutsch Gothic";src:url(../fonts/Deutsch.ttf) format("truetype");font-display:swap}
  /* Palette from design/STORY_NOTES.md and STAGE5_DIRECTION.md: ash black, charcoal, lava red, deep blood red, bone.
     Ember orange was removed in feedback round 1. Gold (kintsugi) only where something is mended. */
  :root{
    --sc-canvas:#0c0a09; --sc-surface:#171311; --sc-ink:#efe7da; --sc-ink-soft:#a89e92;
    --sc-accent:#6e0f14; --sc-accent-ink:#efe7da;
    /* Blood red only (orange removed, 2026-11-10). #6e0f14 is the deep blood red for fills and glows. It is too dark to read
       as text on ash black (1.6:1), so type uses two lifted steps of the same hue: --lava for big display, --lava-text for small. */
    --lava:#6e0f14; --lava-btn:#6e0f14; --lava-text:#6e0f14; --blood:#6e0f14; --gold:#d9a441; --ember:#e8604a;
    /* user decision 2026-11-10: #6e0f14 is the only red, everywhere (text included) */
    --sc-font-display:"Pirata One",serif;
    --sc-font-text:"Play",system-ui,sans-serif;
    --font-dg:"Deutsch Gothic","Pirata One",serif;
    --bar-h:3.5rem;
  }
  html{scroll-padding-top:var(--bar-h)}
  body{font-family:var(--sc-font-text);font-weight:400}
  .skip{position:fixed;left:1rem;top:-4rem;z-index:200;background:var(--lava-btn);color:var(--sc-ink);padding:.7rem 1rem;border-radius:6px;font-weight:700}
  .skip:focus{top:1rem}
  .disp{font-family:var(--sc-font-display);font-weight:400;letter-spacing:.01em}

  /* ---------- ash drifting down the whole manga (page-wide, off under reduced motion) ---------- */
  #ash{position:fixed;inset:0;width:100%;height:100%;z-index:30;pointer-events:none}

  /* ---------- chrome: wordmark + hamburger ---------- */
  .bar{position:fixed;inset:0 0 auto 0;z-index:90;height:var(--bar-h);display:flex;align-items:center;justify-content:space-between;
       padding:0 max(1rem,env(safe-area-inset-right)) 0 max(1rem,env(safe-area-inset-left));pointer-events:none}
  .bar > *{pointer-events:auto}
  .mark{font:400 1.5rem/1 var(--sc-font-display);letter-spacing:.02em;color:var(--sc-ink);text-decoration:none;padding:.75rem .25rem}
  .mark b{color:var(--sc-ink);font-weight:400}
  .burger{width:48px;height:48px;border-radius:50%;border:1px solid var(--sc-hairline-strong);background:color-mix(in oklab,var(--sc-canvas) 78%,transparent);
          backdrop-filter:blur(8px);display:grid;place-items:center;cursor:pointer;color:var(--sc-ink)}
  .burger span{display:block;width:20px;height:2px;background:currentColor;border-radius:2px;position:relative;transition:transform .24s var(--sc-ease-out),background-color .24s}
  .burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:currentColor;border-radius:2px;transition:transform .24s var(--sc-ease-out)}
  .burger span::before{top:-7px}.burger span::after{top:7px}
  .burger[aria-expanded="true"] span{background:transparent}
  .burger[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
  .burger[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}
  :focus-visible{outline:3px solid var(--lava-text);outline-offset:3px}

  .menu{position:fixed;inset:0;z-index:80;background:radial-gradient(90% 70% at 85% 100%,color-mix(in oklab,var(--blood) 85%,transparent),transparent 72%),var(--sc-canvas);display:grid;align-content:center;padding:6rem var(--sc-gutter) 3rem;
        opacity:0;visibility:hidden;transform:translateY(-1.2rem);transition:opacity .32s var(--sc-ease-out),transform .32s var(--sc-ease-out),visibility 0s .32s}
  .menu.open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .menu p.sc-label{margin:0 0 1.2rem;color:var(--sc-ink-soft)}
  .menu ul{list-style:none;margin:0;padding:0;display:grid;gap:.2rem}
  .menu a{display:flex;align-items:baseline;gap:1.2rem;padding:.4rem 0;font:400 clamp(2.6rem,9vw,5.4rem)/1 var(--sc-font-display);color:var(--sc-ink);text-decoration:none;min-height:48px;text-transform:uppercase}
  .menu a small{font:500 .95rem/1.3 var(--sc-font-text);text-transform:none;color:var(--sc-ink-soft);transition:opacity .25s,transform .25s var(--sc-ease-out)}
  @media (hover:hover){ .menu a small{opacity:0;transform:translateX(-10px)} .menu a:hover small,.menu a:focus-visible small{opacity:1;transform:none} }
  .menu a:hover,.menu a:focus-visible{color:var(--lava-text)}
  .menu .skipnote{margin-top:2.4rem;color:var(--sc-ink-soft);max-width:44ch;font-size:var(--sc-t-sm)}

  /* ---------- hero: title page, planes back to front: village, mist x2, veil, ground, type ---------- */
  .hero [data-sc-stage]{background:var(--sc-canvas);overflow:hidden}
  .plane{position:absolute;left:0;right:0;max-width:none;will-change:transform}
  .plane--village{top:clamp(3.6rem,13%,8.5rem);left:50%;width:max(112vw,1100px);margin-left:calc(max(112vw,1100px)/-2);opacity:.94}
  .plane--village img{display:block;width:100%;height:auto;filter:contrast(1.05)}
  .mist{position:absolute;left:0;width:100%;height:46%;overflow:hidden;pointer-events:none}
  .mist i{position:absolute;inset:0 auto 0 0;width:200%;background:url(../mist.webp) repeat-x 0 50%/50% 100%;animation:mist-drift 70s linear infinite}
  .mist--a{bottom:20%;opacity:.55}
  .mist--b{bottom:34%;opacity:.32;transform:scaleY(-1)}
  .mist--b i{animation-duration:110s;animation-direction:reverse}
  @keyframes mist-drift{to{transform:translateX(-50%)}}
  .hero .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,10,9,.82) 0%,rgba(12,10,9,.06) 32%,rgba(12,10,9,0) 50%,rgba(110,15,20,.42) 70%,rgba(12,10,9,.94) 100%);pointer-events:none}
  .plane--ground{inset:auto 0 -2px 0;height:34%;background:var(--sc-canvas);clip-path:polygon(0 62%,6% 54%,12% 60%,19% 44%,24% 56%,31% 50%,40% 62%,52% 48%,61% 58%,70% 40%,76% 55%,86% 46%,93% 58%,100% 50%,100% 100%,0 100%)}
  .hero__copy{position:absolute;left:var(--sc-gutter);right:var(--sc-gutter);bottom:clamp(2.4rem,9vh,6rem);z-index:5;max-width:64rem}
  .hero__copy .sc-label{color:var(--sc-ink);opacity:.9;margin:0 0 .6rem}
  .hero h1{margin:0;font:400 clamp(2.9rem,1rem + 10.2vw,10rem)/.86 var(--sc-font-display);letter-spacing:.01em;text-transform:uppercase;position:relative}
  .hero h1 i{font-style:normal;color:var(--sc-ink)}
  .hero__sub{word-spacing:-.16em}
  .hero__sub{margin:1rem 0 0;max-width:24ch;font:400 clamp(1.7rem,1.2rem + 1.8vw,2.7rem)/1.1 var(--font-dg);color:var(--sc-ink)}
  /* forest panel: wipes in top to bottom, then the owl (separate layer, so its pop-out survives) fades in */
  .forest{position:relative;line-height:0;width:min(100%,56rem);justify-self:center}
  .forest .base{display:block;width:100%;height:auto}
  @media (prefers-reduced-motion:no-preference){
    .forest .base{clip-path:inset(0 0 100% 0);transition:clip-path 1.3s cubic-bezier(.6,0,.3,1) .65s}
    .forest.go .base{clip-path:inset(0 0 0 0);transition-delay:0s}
    .forest .owl{opacity:0;transform:translateY(14px);transition:opacity .6s ease-in,transform .6s var(--sc-ease-out)}
    .forest.go .owl{opacity:1;transform:none;transition:opacity .9s ease-out 1.35s,transform .9s var(--sc-ease-out) 1.35s}
  }
  .forest .owl{position:absolute;left:0;top:39.681%;width:29.897%;height:auto}
  .swap{display:inline-grid;vertical-align:top}
  .swap>*{grid-area:1/1;font:inherit;transition:opacity .5s var(--sc-ease-out),transform .6s var(--sc-ease-out)}
  .swap .a{opacity:0;transform:translateY(-.35em)}
  .swap .b{color:var(--lava);font-weight:400}
  .swap.armed .a{opacity:1;transform:none}.swap.armed .b{opacity:0;transform:translateY(.35em)}
  .swap.armed.go .a{opacity:0;transform:translateY(-.35em)}.swap.armed.go .b{opacity:1;transform:none}

  /* ---------- statement ---------- */
  .statement [data-sc-stage]{display:grid;place-items:center start;padding:0 var(--sc-gutter);background:radial-gradient(80% 65% at 78% 100%,color-mix(in oklab,var(--blood) 75%,transparent),transparent 72%),radial-gradient(50% 40% at 10% 0%,color-mix(in oklab,var(--blood) 35%,transparent),transparent 70%),var(--sc-canvas)}
  .statement .stmt{display:grid;gap:.05em}
  .statement p{margin:0;font:400 clamp(3.2rem,1.4rem + 8vw,9.5rem)/.9 var(--sc-font-display)}
  .statement p em{font-style:normal;color:var(--lava-text)}

  /* ---------- manga column ---------- */
  .chapter{width:min(100% - 2*var(--sc-gutter),68rem);margin-inline:auto;display:grid;gap:clamp(.9rem,2.2vw,1.8rem)}
  .chapter figure{margin:0;line-height:0;position:relative}
  .chapter img{display:block;width:100%;height:auto;max-width:none;will-change:transform}
  .fw{overflow:hidden;position:relative}
  .cl{padding-block:var(--sc-section) 0}
  .f-s{width:min(100%,52rem);justify-self:center}
  .pair{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(.9rem,2.2vw,1.8rem);align-items:end}
  .pair figure:nth-child(1){grid-column:1/8}.pair figure:nth-child(2){grid-column:8/13;align-self:start;margin-top:3rem}
  /* impact panel: shake + white flash once, the first time it is half on screen */
  .hit .fw img{animation:none}
  .hit.go .fw img{animation:thump .62s cubic-bezier(.2,.7,.2,1) both}
  .hit .fw::after{content:"";position:absolute;inset:0;background:var(--sc-ink);opacity:0;pointer-events:none}
  .hit.go .fw::after{animation:flash .5s ease-out both}
  @keyframes thump{0%{transform:scale(1.09) translate(0,0)}14%{transform:scale(1.07) translate(-10px,5px)}28%{transform:scale(1.06) translate(9px,-6px)}44%{transform:scale(1.04) translate(-6px,3px)}62%{transform:scale(1.02) translate(3px,-2px)}100%{transform:scale(1) translate(0,0)}}
  @keyframes flash{0%{opacity:.7}100%{opacity:0}}

  /* ---------- cauldron (page 13, art only) ---------- */
  .smoke [data-sc-stage]{display:grid;place-items:center;background:var(--sc-canvas)}
  .smoke figure{margin:0;height:min(100dvh,1100px);aspect-ratio:612/1536;max-width:92vw;line-height:0}
  .smoke img{width:100%;height:100%;object-fit:contain;display:block}

  /* ---------- hood + slides peak ---------- */
  .hood{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1rem,3vw,3rem);align-items:center;width:min(100% - 2*var(--sc-gutter),68rem);margin:0 auto;padding-block:var(--sc-section)}
  .hood figure{grid-column:1/8;margin:0;line-height:0}.hood img{width:100%;height:auto;display:block}
  .hood .sc-stack{grid-column:8/13}
  .hood h2 .blood{color:var(--lava);display:block;margin-top:.15em}
  .hood h2{margin:0;font:400 clamp(2.4rem,1.2rem + 3.6vw,4.6rem)/.98 var(--sc-font-display);text-wrap:balance}
  .slides [data-sc-stage]{display:grid;place-items:center;background:radial-gradient(85% 60% at 50% 100%,color-mix(in oklab,var(--blood) 80%,transparent),transparent 74%),var(--sc-canvas);overflow:hidden}
  .slides__art{position:relative;width:min(1100px,94vw);line-height:0;grid-area:1/1;--clean:0;align-self:start;margin-top:calc(var(--bar-h) + 2.6rem)}
  .slides__art img{width:100%;height:auto;display:block}
  .grime{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;
         -webkit-mask-image:radial-gradient(circle at 50% 54%,transparent calc(var(--clean)*1%),#000 calc(var(--clean)*1% + 22%));
                 mask-image:radial-gradient(circle at 50% 54%,transparent calc(var(--clean)*1%),#000 calc(var(--clean)*1% + 22%))}
  /* kintsugi: gold only appears once the ash is cleared, because that is the mended part */
  .crack{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;--g:clamp(0,calc((var(--clean) - 64) / 56),1)}
  .crack path{fill:none;stroke:var(--gold);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--g))}
  .slides__copy{grid-area:1/1;align-self:end;justify-self:start;z-index:6;padding:0 var(--sc-gutter) clamp(1.6rem,6vh,4rem);width:min(100%,46rem)}
  .slides__copy h2{margin:0 0 .6rem;font:400 clamp(3rem,1.4rem + 6vw,7rem)/.9 var(--sc-font-display);text-shadow:0 2px 24px rgba(12,10,9,.9)}
  .slides__copy p{margin:0 0 1.2rem;max-width:38ch;font:400 var(--sc-t-lg)/1.5 var(--sc-font-text);text-shadow:0 1px 16px rgba(12,10,9,.95)}
  .slides__lead{grid-area:1/1;align-self:start;justify-self:start;padding:calc(var(--bar-h) + 1rem) var(--sc-gutter) 0;z-index:6}
  .slides__lead p{margin:0;font:400 clamp(2rem,1rem + 3.4vw,4.4rem)/.95 var(--sc-font-display);max-width:12ch;text-shadow:0 2px 20px rgba(12,10,9,.95)}
  .slides__lead p b{font-weight:400;color:var(--lava-text)}
  .slides .scrim-b{position:absolute;inset:auto 0 0 0;height:60%;background:linear-gradient(0deg,rgba(12,10,9,.94),rgba(12,10,9,.55) 45%,transparent);pointer-events:none;z-index:4}

  /* ---------- buttons ---------- */
  .btn{display:inline-flex;align-items:center;gap:.6rem;min-height:48px;padding:.8rem 1.5rem;border-radius:999px;background:var(--lava-btn);color:var(--sc-ink);
       font:700 1rem/1 var(--sc-font-text);text-decoration:none;border:0;cursor:pointer;transition:transform .2s var(--sc-ease-out),background-color .2s}
  .btn{border:1px solid color-mix(in oklab,var(--sc-ink) 22%,transparent)}
  .btn:hover{transform:translateY(-2px);border-color:color-mix(in oklab,var(--sc-ink) 55%,transparent)}
  .btn--ghost{background:transparent;color:var(--sc-ink);border:1px solid var(--sc-hairline-strong)}
  .btn--ghost:hover{background:color-mix(in oklab,var(--sc-ink) 8%,transparent)}
  .row{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}

  /* ---------- the real slide: 360 photo sequence driven by scroll ---------- */
  .real [data-sc-stage]{display:grid;place-items:center;overflow:hidden;background:radial-gradient(70% 55% at 50% 58%,#4d3a36 0%,color-mix(in oklab,var(--blood) 70%,#241917) 40%,var(--sc-canvas) 84%)}
  .real__spin{position:relative;width:min(1100px,96vw);aspect-ratio:1000/620;grid-area:1/1;margin-top:3rem}
  .real__spin canvas{position:absolute;inset:0;width:100%;height:100%}
  .real__spin .shadow{position:absolute;left:20%;right:20%;bottom:15%;height:9%;background:radial-gradient(closest-side,rgba(0,0,0,.7),transparent);filter:blur(7px)}
  .real__lead{grid-area:1/1;align-self:start;justify-self:start;padding:calc(var(--bar-h) + .8rem) var(--sc-gutter) 0;z-index:6}
  .real__lead .sc-label{color:var(--sc-ink);opacity:.85;margin:0 0 .4rem}
  .real__lead h2{margin:0;font:400 clamp(3.2rem,1.4rem + 7vw,9rem)/.88 var(--sc-font-display);text-shadow:0 2px 24px rgba(12,10,9,.9)}
  .real__cue{grid-area:1/1;z-index:6;margin:0;max-width:17ch;font:700 clamp(1.05rem,.9rem + .7vw,1.5rem)/1.2 var(--sc-font-text);text-shadow:0 2px 16px rgba(12,10,9,.95);padding:0 var(--sc-gutter)}
  .real__cue.c1{align-self:end;justify-self:start;padding-bottom:18vh}
  .real__cue.c2{align-self:center;justify-self:end;text-align:right}
  .real__cue.c3{align-self:end;justify-self:end;text-align:right;padding-bottom:18vh}
  .real__cue.c4{align-self:end;justify-self:start;padding-bottom:30vh}
  .real__marker{grid-area:1/1;width:min(1100px,92vw);aspect-ratio:16/9;margin-top:3rem;border:2px dashed color-mix(in oklab,var(--sc-ink) 40%,transparent);border-radius:var(--sc-r-lg);display:grid;place-content:center;gap:.6rem;text-align:center;padding:1.5rem;color:var(--sc-ink-soft);background:repeating-linear-gradient(135deg,transparent 0 16px,color-mix(in oklab,var(--sc-ink) 5%,transparent) 16px 32px)}
  .real__marker b{font:400 clamp(1.6rem,1rem + 2vw,2.6rem)/1 var(--sc-font-display);color:var(--sc-ink)}
  .real__cta{grid-area:1/1;align-self:end;justify-self:center;z-index:6;padding-bottom:clamp(1.4rem,6vh,3.4rem);display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center}
  /* ---------- the white tag + worn in + reviews ---------- */
  .tagband{display:grid;gap:clamp(1.2rem,3vw,3rem);align-items:center;width:min(100% - 2*var(--sc-gutter),70rem);margin:0 auto;padding-block:var(--sc-section) 0}
  @media(min-width:860px){.tagband{grid-template-columns:1.2fr 1fr}}
  .tagband figure{margin:0;line-height:0}.tagband img{width:100%;height:auto;border-radius:var(--sc-r-md);border:1px solid var(--sc-hairline)}
  .tagband h2,.worn h2{margin:.3rem 0 .8rem;font:400 clamp(2.8rem,1.4rem + 5vw,6.4rem)/.9 var(--sc-font-display)}
  .tagband .sc-label,.worn .sc-label{color:var(--sc-ink-soft)}
  .worn{width:min(100% - 2*var(--sc-gutter),70rem);margin:0 auto;padding-block:var(--sc-section) 0}
  .wgrid{display:grid;gap:clamp(.7rem,1.6vw,1.2rem);grid-template-columns:repeat(6,1fr);margin-top:1.4rem}
  .wgrid figure{margin:0;line-height:0;border-radius:var(--sc-r-md);overflow:hidden;border:1px solid var(--sc-hairline)}
  .wgrid img{width:100%;height:100%;object-fit:cover;display:block}
  .wgrid .w1{grid-column:1/4;grid-row:1/3;aspect-ratio:4/5}.wgrid .w2{grid-column:4/7;aspect-ratio:3/2}.wgrid .w3{grid-column:4/7;aspect-ratio:3/2}
  .wgrid .w4{grid-column:1/4;aspect-ratio:3/2}.wgrid .w5{grid-column:4/7;aspect-ratio:3/2}
  @media(max-width:640px){.wgrid{grid-template-columns:1fr}.wgrid figure{grid-column:1!important;grid-row:auto!important;aspect-ratio:4/3!important}}
  .revs{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(18rem,100%),1fr));margin-top:clamp(2rem,5vw,4rem)}
  .rev{border:1px solid var(--sc-hairline);border-radius:var(--sc-r-lg);padding:1.3rem;background:var(--sc-surface);display:grid;gap:.5rem;align-content:start}
  .rev p{margin:0;line-height:1.55}.rev .who{font-weight:700}.rev .meta{color:var(--sc-ink-soft);font-size:var(--sc-t-sm)}
  .rev .stars{display:inline-flex;gap:2px}.rev .stars svg{width:16px;height:16px;fill:var(--sc-ink)}.rev .stars svg.off{opacity:.25}

  /* ---------- the painting + Instagram mosaic ---------- */
  .burned{width:min(100% - 2*var(--sc-gutter),62rem);margin:0 auto;padding-block:var(--sc-section) 0;display:grid;gap:1.2rem}
  .burned figure{margin:0;line-height:0;border-radius:var(--sc-r-md);overflow:hidden;border:1px solid var(--sc-hairline);box-shadow:0 30px 80px -30px rgba(110,15,20,.9)}
  .burned img{width:100%;height:auto;display:block}
  .burned h2{margin:0;font:400 clamp(2.8rem,1.4rem + 5vw,6.4rem)/1.15 var(--sc-font-display);text-align:center;padding-bottom:.18em;overflow:visible}
  .burned h2 .sc-split{padding-bottom:.3em;margin-bottom:-.3em}
  .burned .sc-label{text-align:center}
  .igrid{display:grid;gap:clamp(.6rem,1.4vw,1.1rem);grid-template-columns:repeat(12,1fr);margin-top:1.4rem}
  .igrid figure{margin:0;line-height:0;border-radius:var(--sc-r-md);overflow:hidden;border:1px solid var(--sc-hairline);position:relative}
  .igrid img{width:100%;height:100%;object-fit:cover;display:block}
  .igrid .a{grid-column:1/8;aspect-ratio:1/1}.igrid .b{grid-column:8/13;aspect-ratio:auto}.igrid .b img{object-position:50% 100%}
  .igrid .c{grid-column:1/5;aspect-ratio:4/5}.igrid .d{grid-column:5/9;aspect-ratio:4/5}.igrid .e{grid-column:9/13;aspect-ratio:4/5}
  .igrid .g{grid-column:4/10;aspect-ratio:1/1}
  @media(max-width:640px){.igrid{grid-template-columns:1fr}.igrid figure{grid-column:1!important;aspect-ratio:4/5!important}}
  /* ---------- giving + community ---------- */
  .giving{width:min(100% - 2*var(--sc-gutter),70rem);margin:0 auto;padding-block:var(--sc-section) 0;display:grid;gap:1rem;justify-items:start}
  @media(min-width:860px){.giving{grid-template-columns:auto 1fr;gap:3rem;align-items:center}}
  .giving .big{font:400 clamp(7rem,4rem + 18vw,20rem)/.8 var(--sc-font-display);margin:0;color:var(--sc-ink);letter-spacing:.01em;-webkit-text-stroke:0}
  .giving .big sup{font-size:.4em;vertical-align:top;line-height:1.1}
  .giving p{margin:0;max-width:30ch;font:400 clamp(1.4rem,1rem + 1.6vw,2.2rem)/1.2 var(--sc-font-text)}
  .join{width:min(100% - 2*var(--sc-gutter),70rem);margin:0 auto;padding-block:var(--sc-section) var(--sc-section);display:grid;gap:1.4rem}
  @media(min-width:860px){.join{grid-template-columns:1.1fr 1fr;align-items:end;gap:4rem}}
  .join h2{margin:.3rem 0 .6rem;font:400 clamp(3rem,1.4rem + 6vw,7rem)/.88 var(--sc-font-display)}
  .join .sc-label{color:var(--sc-ink-soft)}.join p{margin:0;color:var(--sc-ink-soft);max-width:38ch}
  .join form{display:grid;gap:.7rem}.join label{font-weight:700;font-size:.92rem}
  .join .fld{display:flex;gap:.6rem;flex-wrap:wrap}
  .join input[type=email]{flex:1 1 14rem;min-height:52px;background:var(--sc-surface);color:var(--sc-ink);border:1px solid var(--sc-hairline-strong);border-radius:999px;padding:.6rem 1.2rem;font:400 1rem var(--sc-font-text)}
  .join input:focus-visible{outline:3px solid var(--sc-ink);outline-offset:2px}
  .join .msg{min-height:1.4em;font-size:.92rem;color:var(--sc-ink)}
  .gc-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
  .join small{color:var(--sc-ink-soft)}
  /* ---------- shop rail ---------- */
  .shop [data-sc-stage]{background:var(--sc-canvas);display:grid;align-items:center}
  .rail{display:flex;gap:clamp(1rem,2.5vw,2.4rem);padding:0 var(--sc-gutter);align-items:stretch;width:max-content}
  .rail__lead{width:min(78vw,26rem);align-self:center}
  .rail__lead h2{margin:0 0 1rem;font:400 clamp(3rem,1.4rem + 5vw,6rem)/.9 var(--sc-font-display)}
  .item{width:min(80vw,24rem);background:var(--sc-surface);border:1px solid var(--sc-hairline);border-radius:var(--sc-r-lg);padding:1.6rem;display:flex;flex-direction:column;gap:.9rem;min-height:min(27rem,72dvh)}
  .item h3{margin:0;font:400 2.3rem/1 var(--sc-font-display)}
  .item .tag{font:700 .75rem/1 var(--sc-font-text);letter-spacing:.1em;text-transform:uppercase;color:var(--lava-text)}
  .item p{margin:0;color:var(--sc-ink-soft);line-height:1.6;font-size:var(--sc-t-sm)}
  .item .btn{margin-top:auto;align-self:flex-start}
  .item--hero{border-color:color-mix(in oklab,var(--lava) 65%,transparent);background:linear-gradient(180deg,color-mix(in oklab,var(--blood) 30%,var(--sc-surface)),var(--sc-surface) 70%)}
  .rail__end{width:min(70vw,20rem);align-self:center;color:var(--sc-ink-soft);font-size:var(--sc-t-sm);line-height:1.6;padding-right:var(--sc-gutter)}

  /* ---------- close ---------- */
  .close{background:radial-gradient(90% 70% at 15% 100%,color-mix(in oklab,var(--blood) 85%,transparent),transparent 72%),radial-gradient(50% 50% at 95% 0%,color-mix(in oklab,var(--blood) 40%,transparent),transparent 70%),var(--sc-canvas);display:grid;place-items:center start;padding:0 var(--sc-gutter);overflow:hidden}
  .close h2{margin:0 0 1.6rem;font:400 clamp(3.2rem,1.4rem + 8vw,10rem)/.88 var(--sc-font-display);max-width:11ch;text-wrap:balance;position:relative;z-index:2}
  .close .row{position:relative;z-index:2}
  .ghost-mark{position:absolute;left:50%;bottom:2.4rem;transform:translateX(-50%);font:400 clamp(4rem,19vw,20rem)/.8 var(--sc-font-display);letter-spacing:.01em;color:transparent;-webkit-text-stroke:1px color-mix(in oklab,var(--sc-ink) 14%,transparent);white-space:nowrap;pointer-events:none;z-index:1;user-select:none}
  .foot{position:absolute;left:var(--sc-gutter);right:var(--sc-gutter);bottom:1.2rem;display:flex;flex-wrap:wrap;gap:.4rem 2rem;color:var(--sc-ink-soft);font-size:var(--sc-t-sm);z-index:3}
  .foot a{color:var(--sc-ink);text-underline-offset:3px}

  /* #6e0f14 stays the fill of every red word. A hairline bone edge keeps those words readable on ash black (remove this rule to go edge-free). */
  .statement p em,.swap .b,.slides__lead p b{-webkit-text-stroke:.7px color-mix(in oklab,var(--sc-ink) 70%,transparent);paint-order:stroke fill}
  @media (max-width:760px){
    .hero h1{font-size:clamp(2.2rem,11.4vw,3.8rem)}
    .pair{display:grid;grid-template-columns:1fr}
    .pair figure:nth-child(n){grid-column:1;margin-top:0}
    .hood{grid-template-columns:1fr}.hood figure,.hood .sc-stack{grid-column:1}
    .slides__copy{padding-bottom:1.4rem}
    .foot{bottom:.8rem}.ghost-mark{bottom:3.6rem}
  }
  @media (prefers-reduced-motion:reduce){
    #ash{display:none} .grime{display:none} .mist i{animation:none}
    .menu,.burger span,.burger span::before,.burger span::after{transition:none}
    .crack{--g:1}.swap>*{transition:none}
  }