/* ============ The Daily Drop · v3 WALKTHROUGH with the FREEFALL opening ============ */
@font-face{font-family:"Barlow Condensed";src:url(/fonts/barlow-condensed-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/fonts/barlow-condensed-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:Archivo;src:url(/v4/fonts/archivo-var.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:Barlow;src:url(/fonts/barlow-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Barlow;src:url(/fonts/barlow-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Barlow;src:url(/fonts/barlow-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:JBMono;src:url(/v4/fonts/jetbrains-var.woff2) format("woff2");font-weight:100 800;font-display:swap}
@property --gl{syntax:"<color>";inherits:true;initial-value:rgb(150,110,80)}
@property --gr{syntax:"<color>";inherits:true;initial-value:rgb(120,90,70)}

:root{
  --ink:#08070a; --ink2:#131116; --ink3:#1d1a21; --line:rgba(255,240,225,.13);
  --paper:#f7f2ea; --mute:#d3c9be; --mute2:#ab9f93;
  --red:#e30613; --red-hi:#ff3d4a; --warm:#ffcf9a;
  --focus:#ffbf47;
  --display:Archivo,"Arial Narrow",system-ui,sans-serif;
  --body:Barlow,system-ui,sans-serif;
  --mono:JBMono,ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.2,.7,.1,1);
  --pad:16px; --top:56px; --dock:78px;
  color-scheme:dark;
}
@media (min-width:900px){:root{--pad:40px;--top:72px;--dock:0px}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--ink);color:var(--paper);font:400 17px/1.5 var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video,canvas{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--paper);color:var(--ink);padding:12px 16px;border-radius:10px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}
.skip-film{position:absolute;top:auto;left:-9999px}
.skip-film:focus{left:12px;top:72px;position:absolute;z-index:60}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:999px;font:700 16px/1 var(--body);letter-spacing:.01em;text-decoration:none;border:0;cursor:pointer;white-space:nowrap;transition:transform .35s var(--ease),background .25s,box-shadow .35s}
.btn:active{transform:scale(.97)}
.btn-red{background:var(--red);color:#fff;box-shadow:0 8px 30px -8px rgba(227,6,19,.75),inset 0 1px 0 rgba(255,255,255,.22)}
.btn-red:hover{background:#f01422;box-shadow:0 10px 44px -6px rgba(227,6,19,.95)}
.btn-ghost{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.btn-ghost:hover{background:rgba(255,255,255,.16)}
.btn-light{background:var(--paper);color:var(--ink)}
.btn.sm{min-height:44px;padding:0 16px;font-size:15px}
.btn.big{min-height:56px;font-size:18px;padding:0 28px}

/* ---------- header ---------- */
.top{position:fixed;inset:0 0 auto 0;height:var(--top);z-index:40;display:flex;align-items:center;gap:16px;padding:0 var(--pad) 0 calc(var(--pad) - 2px);
  background:linear-gradient(rgba(6,5,7,.78),rgba(6,5,7,0));transition:background .4s,box-shadow .4s,opacity .8s var(--ease),transform .9s var(--ease)}
.top.solid{background:rgba(10,9,12,.97);box-shadow:0 1px 0 var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.brand{display:flex;align-items:center;min-height:44px}
.brand img{height:28px;width:auto;filter:drop-shadow(0 2px 10px rgba(0,0,0,.5))}
.nav{display:none}
.top-act{margin-left:auto;display:flex;align-items:center;gap:6px}
.today-chip{display:none}
.icon-btn{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.24);color:#fff;text-decoration:none;font:700 14px/1 var(--body);cursor:pointer;padding:0 12px}
.icon-btn:hover{background:rgba(255,255,255,.12)}
.pause .lbl{display:none}
.pause .ico{width:12px;height:14px;border-left:4px solid #fff;border-right:4px solid #fff}
.pause[aria-pressed=true] .ico{width:0;height:0;border:0;border-left:12px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.ico-lines{display:grid;gap:4px}.ico-lines i{display:block;width:18px;height:2px;background:#fff;border-radius:2px}.ico-lines i:nth-child(2){width:12px}
.desk{display:none}
@media (min-width:900px){
  .brand img{height:34px}
  .nav{display:flex;gap:2px;margin-left:20px}
  .nav a{font:600 15px/1 var(--body);text-decoration:none;padding:14px 11px;border-radius:999px;color:rgba(255,255,255,.88)}
  .nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
  .today-chip{display:inline-flex;align-items:baseline;gap:8px;min-height:44px;align-items:center;padding:0 16px;border-radius:999px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.2);font:600 14px/1 var(--body);white-space:nowrap;cursor:pointer;color:#fff}
  .today-chip:hover{background:rgba(255,255,255,.1)}
  .today-chip b{font:800 21px/1 var(--display);font-stretch:90%;color:var(--red-hi);text-shadow:0 0 14px rgba(255,40,55,.6)}
  .pause .lbl{display:inline}
  .menu-btn{display:none}
  .desk{display:inline-flex}
  .top-act{gap:10px}
}
@media (min-width:900px) and (max-width:1240px){.nav a{padding:14px 7px;font-size:14px}.pause .lbl{display:none}.today-chip > span{display:none}}
/* (live site: the site menu has six pages, none hidden; see the header rules at the end) */

/* ---------- the film (pinned story) ---------- */
.story{position:relative;background:var(--ink)}
.pin{position:relative}
.js:not(.static) .pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#060508;
  --rx:0px;--ry:0px;--rw:100vw;--rh:100svh;transition:--gl 1s linear,--gr 1s linear}
#film{position:absolute;inset:0;width:100%;height:100%;z-index:2;filter:blur(var(--dof,0px))}
.poster{position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s}
.pin.live .poster{opacity:0}
#refl{position:absolute;left:0;top:0;z-index:1;opacity:0;transform-origin:0 0;pointer-events:none;
  -webkit-mask-image:linear-gradient(#000,transparent 85%);mask-image:linear-gradient(#000,transparent 85%);filter:blur(1.5px)}
.stage{display:none}
.rim{position:absolute;left:0;top:0;z-index:3;width:100%;height:100%;pointer-events:none;transform-origin:0 0;overflow:visible}
.rim .scrim{position:absolute;inset:0;border-radius:inherit;background:
  linear-gradient(rgba(0,0,0,.6) 0,rgba(0,0,0,.26) 20%,rgba(0,0,0,0) 38%),
  linear-gradient(0deg,rgba(0,0,0,.8) 0,rgba(0,0,0,.32) 26%,rgba(0,0,0,0) 46%)}
.rim .sheen,.rim .br,.rim .readout{display:none}
.grain{position:absolute;inset:-50%;z-index:5;pointer-events:none;opacity:.06;background-image:var(--grain);background-size:180px;animation:grain .9s steps(6) infinite;mix-blend-mode:overlay}
@media (max-width:899px){.grain{display:none}} /* 25 Oct 2026: the overlay-blended noise tile read as coloured blotches on phones */
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,-2%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}}
.pin[data-seg=b-1] .rim,.pin[data-seg=outro] .rim{box-shadow:0 0 0 1px rgba(255,240,225,.22),0 30px 90px -20px rgba(0,0,0,.9),0 0 80px -10px rgba(227,6,19,.35)}

/* desktop: a lit stage, the screen floats in its own light */
@media (min-width:900px){
  .js:not(.static) .stage{display:block;position:absolute;inset:0;z-index:0;overflow:hidden;background:
    radial-gradient(120% 90% at 50% 120%,#130d10 0,#060508 60%)}
  .glow{position:absolute;inset:0;opacity:.9;transition:opacity 1.2s var(--ease);background:
    radial-gradient(520px 640px at calc(var(--rx) - 30px) calc(var(--ry) + var(--rh) * .45),color-mix(in srgb,var(--gl) 58%,transparent),transparent 72%),
    radial-gradient(520px 640px at calc(var(--rx) + var(--rw) + 30px) calc(var(--ry) + var(--rh) * .45),color-mix(in srgb,var(--gr) 58%,transparent),transparent 72%),
    radial-gradient(900px 300px at calc(var(--rx) + var(--rw) * .5) calc(var(--ry) - 40px),rgba(255,236,214,.06),transparent 70%)}
  .floor{position:absolute;left:0;right:0;bottom:0;top:calc(var(--ry) + var(--rh) + 4px);border-top:1px solid rgba(255,240,225,.07);background:
    radial-gradient(60% 120% at calc(var(--rx) + var(--rw) * .5) 0,color-mix(in srgb,var(--gr) 30%,transparent),transparent 70%),
    linear-gradient(rgba(255,255,255,.03),transparent 70%)}
  .poster{left:auto;right:64px;top:80px;width:auto;height:calc(100svh - 154px);aspect-ratio:4/5;border-radius:20px}
  .rim{box-shadow:0 0 0 1px rgba(255,240,225,.18),0 50px 120px -30px rgba(0,0,0,.95),
    -40px 0 120px -30px var(--gl),40px 0 120px -30px var(--gr),0 0 0 6px rgba(255,255,255,.02)}
  .pin.is-full .rim{box-shadow:none}
  .rim .scrim{background:linear-gradient(0deg,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 26%)}
  .pin.is-full .rim .scrim{background:radial-gradient(90% 90% at 62% 50%,transparent 30%,rgba(0,0,0,.55)),linear-gradient(90deg,rgba(0,0,0,.72) 0,rgba(0,0,0,.2) 40%,transparent 60%)}
  .rim .sheen{display:block;position:absolute;inset:0;border-radius:inherit;overflow:hidden}
  .rim .sheen::after{content:"";position:absolute;top:-20%;bottom:-20%;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.07) 45%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.07) 55%,transparent);animation:sheen 9s var(--ease) infinite}
  @keyframes sheen{0%,55%{transform:translateX(0)}100%{transform:translateX(450%)}}
  .rim .br{display:block;position:absolute;width:22px;height:22px;border:0 solid rgba(255,255,255,.8);filter:drop-shadow(0 0 6px rgba(255,255,255,.4));transition:opacity .6s}
  .rim .tl{left:-12px;top:-12px;border-left-width:2px;border-top-width:2px}
  .rim .tr{right:-12px;top:-12px;border-right-width:2px;border-top-width:2px}
  .rim .bl{left:-12px;bottom:-12px;border-left-width:2px;border-bottom-width:2px}
  .rim .brr{right:-12px;bottom:-12px;border-right-width:2px;border-bottom-width:2px}
  .rim .readout{display:flex;justify-content:space-between;gap:16px;position:absolute;left:18px;right:18px;top:16px;margin:0;text-shadow:0 1px 6px rgba(0,0,0,.9);font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,240,225,.72)}
  .rim .ro-b{left:0;right:0;top:auto;bottom:-30px;text-shadow:none}
  .rec{display:inline-flex;align-items:center;gap:6px;color:#ff6b74}
  .rec i{width:7px;height:7px;border-radius:50%;background:#ff2b38;box-shadow:0 0 10px #ff2b38;animation:blink 1.4s steps(2) infinite}
  @keyframes blink{50%{opacity:.25}}
  .pin.is-full .rim .br,.pin.is-full .rim .readout,.pin[data-seg=outro] .rim .readout,.pin[data-seg=b-1] .rim .readout{opacity:0}
  .pin[data-seg=b-1] .rim .br{opacity:.4}
}

/* intro: a red line draws, the letterbox opens, a warm flare crosses (phone); desktop opens the screen from the line in film.js */
.bars{position:absolute;inset:0;pointer-events:none;z-index:30;display:none}
.boot .bars{display:block}
.bars i{position:absolute;left:0;right:0;height:50.5%;background:#000;transition:transform 1.05s cubic-bezier(.7,0,.2,1) .5s}
.bars i:first-child{top:0}.bars i:nth-child(2){bottom:0}
.bars b{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--red);box-shadow:0 0 18px 2px rgba(227,6,19,.9);transform:scaleX(0);transition:transform .55s var(--ease),opacity .5s .7s}
.boot.go .bars b{transform:scaleX(1);opacity:0}
.boot.go .bars i:first-child{transform:translateY(-101%)}
.boot.go .bars i:nth-child(2){transform:translateY(101%)}
@media (min-width:900px){.boot .bars{display:none}.boot .glow{opacity:0}.boot.go .glow{opacity:.9;transition-delay:.9s}}
.flare{position:absolute;inset:0;pointer-events:none;z-index:29;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(40% 60% at 50% 50%,rgba(255,200,140,.55),rgba(255,140,60,.12) 50%,transparent 70%);transform:translateX(-80%)}
.boot.go .flare{animation:flare 2.2s var(--ease) .7s both}
@keyframes flare{0%{opacity:0;transform:translateX(-70%)}35%{opacity:.85}100%{opacity:0;transform:translateX(75%)}}
.boot .top{opacity:0;transform:translateY(-14px)}
.boot.go .top{opacity:1;transform:none;transition-delay:1.1s}
/* the phone dock is there from first paint (no boot slide-in) */
.dip{position:absolute;inset:0;z-index:35;background:#000;opacity:0;pointer-events:none;transition:opacity .16s}
.pin.dipping .dip{opacity:1}

/* chapter progress: segments (phone) and rail (desktop) */
.segs{position:absolute;z-index:20;left:12px;right:12px;top:calc(var(--top) + 2px);display:flex;gap:4px}
.segs i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.28);overflow:hidden;position:relative}
.segs i::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:0 50%;transform:scaleX(var(--f,0))}
.rail{display:none}
@media (min-width:900px){
  .segs{display:none}
  .rail{display:block;position:absolute;z-index:20;left:20px;top:50%;transform:translateY(-50%)}
  .rail ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
  .rail a{display:grid;grid-template-columns:28px auto;align-items:center;column-gap:8px;min-height:44px;padding:0 12px 0 8px;text-decoration:none;color:rgba(255,255,255,.6);border-radius:10px;position:relative;transition:color .3s}
  .rail a:hover{color:#fff;background:rgba(255,255,255,.06)}
  .rail .n{font:600 12px/1 var(--mono);letter-spacing:.04em}
  .rail .t{font:600 14px/1 var(--body);opacity:0;transform:translateX(-6px);transition:opacity .4s var(--ease),transform .5s var(--ease)}
  .rail:hover .t,.rail a.on .t,.rail a:focus-visible .t{opacity:1;transform:none}
  .rail i{position:absolute;left:8px;bottom:8px;width:20px;height:2px;background:rgba(255,255,255,.22);overflow:hidden}
  .rail i b{position:absolute;inset:0;background:var(--red);box-shadow:0 0 8px var(--red);transform-origin:0 50%;transform:scaleX(var(--f,0))}
  .rail a.on{color:#fff}
  .rail a.done i b{background:rgba(255,255,255,.75);box-shadow:none}
}

/* ---------- HUD set pieces anchored to the film (sizes in 540-px frame units, scaled by film.js) ---------- */
.anchor{position:absolute;left:0;top:0;z-index:4;width:0;height:0;transform-origin:0 0;pointer-events:none;opacity:0;will-change:transform,opacity}
.reticle .br{position:absolute;width:28px;height:28px;border:0 solid #fff;filter:drop-shadow(0 0 6px rgba(255,60,70,.9))}
.reticle .tl{left:-104px;top:-74px;border-left-width:3px;border-top-width:3px}
.reticle .tr{left:76px;top:-74px;border-right-width:3px;border-top-width:3px}
.reticle .bl{left:-104px;top:46px;border-left-width:3px;border-bottom-width:3px}
.reticle .brr{left:76px;top:46px;border-right-width:3px;border-bottom-width:3px}
.ret-x{position:absolute;left:-40px;top:-40px;width:80px;height:80px;border-radius:50%;border:2px dashed rgba(255,70,80,.85);animation:spin 6s linear infinite;box-shadow:0 0 18px rgba(255,40,55,.45)}
@keyframes spin{to{transform:rotate(360deg)}}
.ret-l{position:absolute;left:-104px;top:-110px;white-space:nowrap;padding:6px 10px;border-radius:6px;background:rgba(8,6,10,.72);border:1px solid rgba(255,90,100,.6);font:700 15px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#fff}
.ret-l::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:#ff2b38;box-shadow:0 0 8px #ff2b38;animation:blink 1.2s steps(2) infinite}
.holotag .ht-in{position:absolute;left:66px;top:56px;width:122px;padding:10px 8px 8px;border-radius:12px;text-align:center;display:grid;gap:3px;transform:rotate(-7deg);transform-origin:0 0;
  background:linear-gradient(160deg,rgba(255,255,255,.24),rgba(255,255,255,.06));border:1.5px solid rgba(255,255,255,.6);
  box-shadow:0 0 0 1px rgba(255,60,70,.35),0 0 34px rgba(255,40,55,.6),inset 0 0 20px rgba(255,255,255,.12);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.holotag b{font:900 52px/.9 var(--display);font-stretch:92%;color:#ff3946;text-shadow:0 0 18px rgba(255,40,55,.9),0 0 40px rgba(255,40,55,.5)}
.holotag .ht-in span{font:700 13px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#fff}
.holotag .ht-line{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 10px #fff,0 0 22px rgba(255,40,55,.9);animation:ping 1.8s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 10px #fff,0 0 0 0 rgba(255,60,70,.8)}100%{box-shadow:0 0 10px #fff,0 0 0 18px rgba(255,60,70,0)}}
@keyframes hover{50%{transform:translateY(-6px)}}
.boxglow::before{content:"";position:absolute;left:-260px;top:-300px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,236,190,.95),rgba(255,190,110,.45) 40%,rgba(255,140,60,0) 100%);mix-blend-mode:screen}
.boxglow::after{content:"";position:absolute;left:-330px;top:-420px;width:660px;height:660px;border-radius:50%;opacity:.55;mix-blend-mode:screen;
  background:repeating-conic-gradient(from 0deg,rgba(255,220,160,.0) 0 8deg,rgba(255,220,160,.35) 10deg,rgba(255,220,160,0) 12deg 22deg);
  -webkit-mask-image:radial-gradient(closest-side,#000 20%,transparent 75%);mask-image:radial-gradient(closest-side,#000 20%,transparent 75%);animation:spin 24s linear infinite}

/* chapters layered over the film */
.js:not(.static) .chapters{position:absolute;inset:0;z-index:10;pointer-events:none}
.js:not(.static) .ch,.js:not(.static) .breather,.js:not(.static) .outro{position:absolute;inset:0;visibility:hidden;transition:visibility 0s .5s}
.js:not(.static) .ch.on,.js:not(.static) .breather.on,.js:not(.static) .outro.on{visibility:visible;transition-delay:0s}
.ch .still{display:none}
.ch .txt{position:absolute;left:var(--pad);right:var(--pad);pointer-events:auto}
.ch[data-pos=top] .txt{top:calc(var(--top) + 22px)}
.ch[data-pos=bottom] .txt{bottom:calc(var(--dock) + 22px)}
.tag{display:flex;align-items:center;gap:10px;margin:0 0 10px;font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.8)}
.tag .num{display:inline-grid;place-items:center;height:22px;padding:0 7px;border-radius:5px;background:rgba(227,6,19,.85);color:#fff;box-shadow:0 0 14px rgba(227,6,19,.6)}
.eyebrow{margin:0 0 8px;font:700 15px/1.25 var(--body);color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.85)}
.eyebrow.kick{font:800 20px/1 var(--display);font-stretch:90%;text-transform:uppercase;letter-spacing:.02em;color:var(--warm)}
.title,.hero-h1{margin:0;font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.88;letter-spacing:-.01em;color:#fff;
  text-shadow:0 2px 2px rgba(0,0,0,.25),0 6px 40px rgba(0,0,0,.6)}
.title{font-size:clamp(44px,12.6vw,62px);font-stretch:84%}
.sub{margin:12px 0 0;max-width:36ch;font:600 16px/1.4 var(--body);color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.95),0 0 2px rgba(0,0,0,.7)}
.small{margin:10px 0 0;font:500 14px/1.4 var(--body);color:rgba(255,255,255,.9);text-shadow:0 1px 8px rgba(0,0,0,.9)}
.hero-h1{display:block}
.h1a{display:block;font-size:clamp(26px,7.4vw,34px);font-stretch:100%;letter-spacing:.01em;margin-bottom:4px}
.h1row{display:flex;align-items:flex-end;gap:10px}
.h1b{display:block;font-size:clamp(140px,42vw,196px);font-weight:900;font-stretch:96%;line-height:.8;letter-spacing:-.04em;color:var(--red);
  text-shadow:0 0 30px rgba(255,30,45,.7),0 0 90px rgba(255,30,45,.45),0 10px 60px rgba(0,0,0,.5);transform-origin:20% 90%}
.h1c{display:block;font-size:clamp(30px,9vw,44px);font-stretch:90%;margin-bottom:.32em}
#ch-2 .sub{font-size:18px;margin-top:10px}

/* the drop-week meter (hero and today sheet) */
.meter{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:4px;max-width:420px}
.meter li{position:relative;display:grid;justify-items:center;gap:3px;padding:7px 0 6px;border-radius:9px;background:rgba(8,6,10,.58);border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.meter span{font:600 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.meter b{font:800 19px/1 var(--display);font-stretch:85%;color:#fff}
.meter li.is-today{background:var(--red);border-color:#ff6b75;box-shadow:0 0 22px rgba(255,30,45,.75);transform:translateY(-3px)}
.meter li.is-today span{color:#fff}
.meter li:last-child b{color:#fff;text-shadow:0 0 12px rgba(255,255,255,.8)}
.meter li:last-child{border-color:rgba(255,255,255,.55)}
.meter.big b{font-size:24px}

/* letter cascade (chars created by film.js): quick, done by ~0.4 s, never caught half-built */
.w{display:inline-block;white-space:nowrap}
.c{display:inline-block}
.js:not(.static) .ch .c,.js:not(.static) .breather .c{opacity:0;transform:translate3d(0,.32em,0);filter:blur(4px);transition:opacity .15s,transform .2s,filter .15s}
.js:not(.static) .ch.on .c,.js:not(.static) .breather.on .c{opacity:1;transform:none;filter:none;
  transition:opacity .26s var(--ease) calc(var(--i)*12ms),transform .32s var(--ease) calc(var(--i)*12ms),filter .26s var(--ease) calc(var(--i)*12ms)}
.js:not(.static) .ch .tag,.js:not(.static) .ch .eyebrow,.js:not(.static) .ch .sub,.js:not(.static) .ch .count,.js:not(.static) .ch .tiers,.js:not(.static) .ch .mcard,.js:not(.static) .ch .small,.js:not(.static) .ch .acts,.js:not(.static) .ch .open-now,.js:not(.static) .ch .addr,.js:not(.static) .ch .hours,.js:not(.static) .ch .meter{
  opacity:0;transform:translateY(16px);transition:opacity .2s,transform .3s}
.js:not(.static) .ch.on .tag,.js:not(.static) .ch.on .eyebrow{opacity:1;transform:none;transition:opacity .45s var(--ease),transform .55s var(--ease)}
.js:not(.static) .ch.on .sub,.js:not(.static) .ch.on .open-now,.js:not(.static) .ch.on .addr,.js:not(.static) .ch.on .meter{opacity:1;transform:none;transition:opacity .5s var(--ease) .12s,transform .6s var(--ease) .12s}
.js:not(.static) .ch.on .count,.js:not(.static) .ch.on .tiers,.js:not(.static) .ch.on .mcard,.js:not(.static) .ch.on .hours{opacity:1;transform:none;transition:opacity .55s var(--ease) .2s,transform .65s var(--ease) .2s}
.js:not(.static) .ch.on .small,.js:not(.static) .ch.on .acts{opacity:1;transform:none;transition:opacity .55s var(--ease) .28s,transform .65s var(--ease) .28s}
.js:not(.static) .ch .hint{opacity:0;transition:opacity .3s}
.js:not(.static) .ch.on .hint{opacity:1;transition:opacity 1s 1.2s}
.js:not(.static) .ch .h1b{opacity:0;transform:scale(1.3);filter:blur(12px);transition:opacity .2s,transform .3s,filter .2s}
.js:not(.static) .ch.on .h1b{opacity:1;transform:none;filter:none;transition:opacity .7s var(--ease) .15s,transform 1.1s cubic-bezier(.16,1,.3,1) .15s,filter .7s var(--ease) .15s}
.js:not(.static) .ch .h1c{opacity:0;transform:translateX(-16px);transition:opacity .2s,transform .3s}
.js:not(.static) .ch.on .h1c{opacity:1;transform:none;transition:opacity .6s var(--ease) .4s,transform .8s var(--ease) .4s}

/* subtitles, inside the screen */
.cues{list-style:none;margin:0;padding:0;position:absolute;left:var(--rx);width:var(--rw);top:calc(var(--ry) + var(--rh) - var(--cue-b,0px));text-align:center;pointer-events:none}
.ch[data-pos=top] .cues{--cue-b:calc(var(--dock) + 34px)}
.ch[data-pos=bottom] .cues{top:calc(var(--top) + 30px)}
.cues li{position:absolute;left:12px;right:12px;bottom:0;opacity:0;transform:translateY(10px);transition:opacity .3s,transform .4s var(--ease)}
.ch[data-pos=bottom] .cues li{bottom:auto;top:0}
.cues li > span{display:inline;padding:5px 12px;border-radius:6px;background:rgba(8,6,10,.7);font:600 16px/1.9 var(--body);color:#fff;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.cues li.on{opacity:1;transform:none;transition:opacity .5s var(--ease) .05s,transform .6s var(--ease) .05s}
@media (min-width:900px){
  .ch .cues,.ch[data-pos=bottom] .cues{top:calc(var(--ry) + var(--rh) - 46px)}
  .ch .cues li,.ch[data-pos=bottom] .cues li{top:auto;bottom:0}
  .cues li > span{font-size:19px}
  #ch-6 .cues{left:calc(var(--rx) + var(--rw) * .3);width:calc(var(--rw) * .64)}
}

/* restock: a glowing LED countdown that ticks */
.count{margin:16px 0 0;display:grid;gap:8px}
.count-l{margin:0;font:600 12px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.9)}
.led{margin:0;display:flex;gap:6px}
.led .seg{position:relative;display:grid;justify-items:center;gap:4px;min-width:62px;padding:8px 8px 7px;border-radius:12px;background:rgba(14,4,7,.72);border:1px solid rgba(255,70,80,.5);
  box-shadow:0 0 24px -4px rgba(255,30,45,.55),inset 0 0 18px rgba(255,30,45,.18);overflow:hidden}
.led .seg::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px);pointer-events:none}
.led b{font:800 38px/1 var(--mono);font-variant-numeric:tabular-nums;color:#ff4b56;text-shadow:0 0 10px rgba(255,40,55,.95),0 0 30px rgba(255,40,55,.6)}
.led i{font:600 10px/1 var(--mono);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,220,220,.85)}
.led .sec b{animation:tickpulse 1s steps(1) infinite}
@keyframes tickpulse{0%{text-shadow:0 0 16px rgba(255,60,70,1),0 0 44px rgba(255,40,55,.8)}50%{text-shadow:0 0 10px rgba(255,40,55,.9),0 0 26px rgba(255,40,55,.5)}}
.count-n{margin:0;font:500 13px/1.3 var(--body);color:rgba(255,255,255,.82);text-shadow:0 1px 8px rgba(0,0,0,.9)}

/* the price board overlay (drawn over Mia's board in E04) */
.board{position:absolute;left:0;top:0;z-index:4;width:244px;height:232px;transform-origin:0 0;pointer-events:none;opacity:0}
.board-rows{position:absolute;inset:15% 6% 5% 6%;display:grid;grid-template-rows:repeat(7,1fr);gap:3%}
.board-scan{position:absolute;left:4%;right:4%;top:12%;height:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);box-shadow:0 0 12px #fff;animation:scan 2.6s var(--ease) infinite;opacity:.7}
@keyframes scan{0%{transform:translateY(0);opacity:0}15%{opacity:.8}100%{transform:translateY(190px);opacity:0}}
.brow{position:relative;display:flex;align-items:center;gap:6px;padding:0 6%;border-radius:6px;
  background:rgba(255,255,255,.04);border:1.5px solid rgba(255,90,100,.18);color:rgba(255,255,255,.25);
  font:800 19px/1 var(--display);font-stretch:88%;text-transform:uppercase;transition:color .5s,background .5s,border-color .5s,box-shadow .6s,transform .5s var(--ease)}
.brow .bd{font:700 12px/1 var(--mono);letter-spacing:.06em}
.brow .bp{margin-left:auto}
.brow .bt{display:none;margin-left:auto;font:700 9px/1 var(--mono);letter-spacing:.08em;padding:3px 5px;border-radius:4px;background:#fff;color:var(--red)}
.brow .bt + .bp{margin-left:8px}
.brow .bt-r{display:inline-block;background:#fff;color:var(--ink);opacity:0;transition:opacity .5s}
.brow.lit{color:#fff;border-color:rgba(255,80,90,.75);background:rgba(227,6,19,.16);box-shadow:0 0 18px rgba(255,40,55,.45),inset 0 0 14px rgba(255,40,55,.25)}
.brow.lit .bt-r{opacity:1}
.brow.lit.is-past{color:rgba(255,255,255,.6);border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.06);box-shadow:none}
.brow.cursor{background:var(--red);color:#fff;border-color:#ff6b75;box-shadow:0 0 30px 4px rgba(255,30,45,.75);transform:scale(1.06)}
.brow.is-today.cursor .bt:not(.bt-r){display:inline-block}
.brow.is-today.cursor.pulse{animation:pulse 1.6s ease-in-out infinite}
.brow.wed{color:#fff;border-color:#fff;box-shadow:0 0 26px rgba(255,255,255,.55)}
@keyframes pulse{50%{box-shadow:0 0 50px 10px rgba(255,30,45,.9)}}
.ladder{display:none;list-style:none;margin:16px 0 0;padding:0}

/* mystery tiers: glass chips with a light sweep, each a link */
.tiers{margin:16px 0 0;display:flex;gap:8px;flex-wrap:wrap}
.tiers a{position:relative;overflow:hidden;display:inline-grid;place-items:center;min-height:48px;min-width:64px;padding:0 14px;border-radius:12px;text-decoration:none;
  background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font:800 25px/1 var(--display);font-stretch:88%;color:#fff;box-shadow:0 0 20px -6px rgba(255,210,150,.6);transition:transform .3s var(--ease),background .3s}
.tiers a:hover{transform:translateY(-2px);background:rgba(255,255,255,.26)}
.tiers a:last-child{background:linear-gradient(160deg,#ff3442,#c4000f);border-color:#ff7a83;box-shadow:0 0 26px rgba(255,30,45,.7)}
.tiers a::after{content:"";position:absolute;top:-10%;bottom:-10%;left:-70%;width:50%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-15deg);animation:chipsweep 3.4s var(--ease) infinite}
.tiers a:nth-child(2)::after{animation-delay:.15s}.tiers a:nth-child(3)::after{animation-delay:.3s}.tiers a:nth-child(4)::after{animation-delay:.45s}
@keyframes chipsweep{0%,60%{transform:translateX(0) skewX(-15deg)}100%{transform:translateX(420%) skewX(-15deg)}}

/* members: a holographic member card */
.mcard{position:relative;overflow:hidden;margin:14px 0 0;max-width:460px;padding:12px 12px 10px;border-radius:18px;
  background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.05) 50%,rgba(255,80,90,.12));border:1px solid rgba(255,255,255,.4);
  box-shadow:0 30px 60px -24px rgba(0,0,0,.9),0 0 40px -10px rgba(255,60,70,.45),inset 0 1px 0 rgba(255,255,255,.4);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
.mc-h{display:flex;align-items:center;justify-content:space-between;margin:0 0 8px;font:700 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#fff}
.qr{width:46px;height:46px;padding:4px;border-radius:8px;background:#fff;fill:#0b0b0d;box-shadow:0 0 18px rgba(255,255,255,.55)}
.mc-sheen{position:absolute;inset:-40% auto -40% -60%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),rgba(140,220,255,.18),transparent);transform:rotate(12deg);animation:mcsheen 5s var(--ease) infinite;pointer-events:none}
@keyframes mcsheen{0%,50%{transform:translateX(0) rotate(12deg)}100%{transform:translateX(480%) rotate(12deg)}}
.pts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pts li{display:grid;gap:4px;padding:8px 10px;border-radius:12px;background:rgba(8,6,10,.55);border:1px solid rgba(255,255,255,.16)}
.pts b{font:800 26px/1 var(--display);font-stretch:85%;color:#ff4b56;text-shadow:0 0 14px rgba(255,40,55,.7)}
.pts span{font:600 14px/1.25 var(--body);color:#fff}
.acts{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0}
.open-now{display:inline-flex;align-items:center;gap:8px;margin:10px 0 0;padding:8px 14px;border-radius:999px;background:rgba(8,6,10,.66);border:1px solid rgba(110,231,140,.5);font:700 15px/1 var(--body);color:#d6fbe0}
.open-now i{width:9px;height:9px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 0 rgba(74,222,128,.6);animation:live 2s infinite}
@keyframes live{70%{box-shadow:0 0 0 10px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
.addr{margin:10px 0 0;font:600 16px/1.35 var(--body);color:#fff}
.hours{margin:10px 0 0;border-collapse:collapse;width:100%;max-width:420px;font-size:15px}
.hours th,.hours td{text-align:left;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.16);font-weight:600}
.hours td{text-align:right;color:#efe7de}
.hours em{display:none;font-style:normal;margin-left:6px;padding:2px 8px;border-radius:999px;background:var(--red);color:#fff;font-size:12px}
.hours .is-today th,.hours .is-today td{color:#fff}
.hours .is-today em{display:inline-block}
.glass{background:linear-gradient(160deg,rgba(18,14,20,.72),rgba(18,14,20,.5));border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:16px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.18);-webkit-backdrop-filter:blur(16px) saturate(130%);backdrop-filter:blur(16px) saturate(130%)}
#ch-8 .txt.glass{left:12px;right:12px;top:calc(var(--top) + 18px)}
#ch-8 .title{font-size:44px}
#ch-8 .acts .btn{min-height:46px}
#ch-9 .title{font-size:clamp(38px,11vw,54px)}

/* breathers: full-bleed type, width axis and a light sweep follow the scroll */
.measuring .c{transition:none !important;transform:none !important}
.measuring .breather{visibility:visible !important}
.breather{display:grid;place-items:center;text-align:center;pointer-events:none}
.bw{margin:0;font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.84;color:#fff;letter-spacing:-.01em;opacity:var(--bo,1)}
.bl{display:block;font-size:var(--bfs,19vw);font-stretch:var(--bst,90%);text-shadow:0 8px 60px rgba(0,0,0,.6)}
.bw{position:relative}
.js:not(.static) .bw::after{content:"";position:absolute;inset:-10% -4%;background:linear-gradient(100deg,transparent calc(var(--sweep,0%) - 14%),rgba(255,226,184,.22) var(--sweep,0%),transparent calc(var(--sweep,0%) + 14%));mix-blend-mode:screen;pointer-events:none}
.bl.red{color:var(--red);text-shadow:0 0 40px rgba(255,20,35,.7),0 0 100px rgba(255,20,35,.4)}

/* outro: the film becomes a reel card */
.outro{pointer-events:none}
.outro img{position:absolute;left:50%;top:calc(var(--ry) - 92px);width:min(230px,48vw);height:auto;transform:translate(-50%,calc((1 - var(--o,0)) * 20px));opacity:var(--o,0);filter:drop-shadow(0 0 20px rgba(255,40,55,.4))}
.outro p{position:absolute;left:0;right:0;text-align:center;margin:0;opacity:var(--o,0)}
.o-k{top:calc(var(--ry) + var(--rh) + 22px);font:600 13px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--warm)}
.o-t{top:calc(var(--ry) + var(--rh) + 46px);font:800 clamp(38px,10vw,72px)/.9 var(--display);font-stretch:84%;text-transform:uppercase;color:#fff}

/* desktop composition: type column beside the lit screen */
@media (min-width:900px){
  .js:not(.static) .ch .txt{left:var(--col-l,196px);right:auto;width:var(--col-w,520px);top:50% !important;bottom:auto !important;transform:translateY(-50%)}
  .js:not(.static) .ch.on .txt{transform:translateY(-50%)}
  .title{font-size:var(--tfs,88px)}
  .sub{font-size:20px;max-width:30ch;margin-top:18px}
  .tag{font-size:13px;margin-bottom:16px}
  .eyebrow{font-size:17px}
  .h1a{font-size:44px}
  .h1b{font-size:min(17vw,250px)}
  .h1c{font-size:58px}
  #ch-2 .sub{font-size:23px}
  .meter{max-width:470px}
  .meter b{font-size:23px}
  .led b{font-size:56px}
  .led .seg{min-width:92px;padding:12px 10px 10px}
  #ch-8 .txt.glass{left:var(--col-l);right:auto;top:50%;padding:24px}
  #ch-8 .title{font-size:var(--tfs)}
  #ch-9 .title{font-size:calc(var(--tfs) * .86)}
  .pts span{font-size:15px}
  #ch-6 .title{font-size:88px}
  .o-t{font-size:64px}
}

/* ---------- after the film: calm editorial with light ---------- */
.after{position:relative;background:
  radial-gradient(70% 40% at 50% 0,rgba(227,6,19,.16),transparent 70%),
  radial-gradient(60% 30% at 80% 35%,rgba(255,180,110,.08),transparent 70%),
  var(--ink);padding-bottom:24px}
.kicker{margin:0 0 12px;font:600 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--warm)}
.sec-title{margin:0;font:800 clamp(44px,12vw,112px)/.9 var(--display);font-stretch:84%;text-transform:uppercase;letter-spacing:-.01em}
.sec-sub{margin:16px 0 0;max-width:46ch;color:var(--mute);font-size:18px}
.sec-head{padding:0 var(--pad);max-width:1320px;margin:0 auto 36px}
.lucky{padding:28px var(--pad);max-width:1320px;margin:0 auto}
.lucky p{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:14px 18px;border-radius:18px;background:linear-gradient(90deg,rgba(227,6,19,.18),rgba(255,255,255,.04));border:1px solid rgba(255,90,100,.35);font:500 16px/1.45 var(--body);color:#efe6dc}
.lucky p > span:nth-child(2){flex:1 1 340px}
.lucky-badge{display:inline-block;padding:5px 11px;border-radius:999px;background:var(--red);color:#fff;font:800 15px/1.2 var(--display);font-stretch:90%;text-transform:uppercase;letter-spacing:.04em;box-shadow:0 0 18px rgba(255,30,45,.6)}
.lucky a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;font-weight:700;text-decoration:none;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.reels{padding:72px 0 48px}
.reel-rail{list-style:none;padding:6px var(--pad) 20px;display:grid;grid-template-columns:1fr 1fr;gap:26px 12px;max-width:1360px;margin:0 auto}
.reel{min-width:0}
.reel-play{position:relative;display:block;width:100%;aspect-ratio:9/16;padding:0;border:0;border-radius:20px;overflow:hidden;cursor:pointer;background:#000;
  box-shadow:0 40px 70px -34px rgba(0,0,0,.95),0 0 0 1px rgba(255,235,210,.16),0 0 60px -20px rgba(255,120,80,.35);transition:transform .6s var(--ease),box-shadow .6s}
.reel-play::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.5),transparent 40%);pointer-events:none}
.reel-play img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.reel-play:hover{transform:translateY(-6px)}
.reel-play:hover img{transform:scale(1.05)}
.reel-glass .long{display:none}
.reel-glass{position:absolute;z-index:1;left:8px;right:8px;bottom:8px;display:flex;align-items:center;gap:8px;min-height:48px;padding:0 10px;border-radius:14px;background:rgba(12,10,14,.6);border:1px solid rgba(255,255,255,.28);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font:700 15px/1 var(--body);color:#fff}
.play{width:30px;height:30px;border-radius:50%;background:var(--red);position:relative;flex:none;box-shadow:0 0 16px rgba(255,30,45,.8)}
.play::after{content:"";position:absolute;left:12px;top:9px;border-left:10px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent}
.reel-meta{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;margin:12px 2px 0;font-size:15px;color:var(--mute)}
.reel-meta b{color:#fff;font:800 20px/1 var(--display);font-stretch:88%;text-transform:uppercase}
.reel-meta a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:#fff;font-weight:700;text-underline-offset:4px}
@media (min-width:900px){
  .reel-rail{grid-template-columns:repeat(4,1fr);gap:22px}
  .reel:nth-child(even){transform:translateY(48px)}
  .js:not(.static) .reel.reveal:nth-child(even){transform:translateY(72px)}
  .js:not(.static) .reel.reveal.in:nth-child(even){transform:translateY(48px)}
  .reel-glass .long{display:inline}.reel-glass{left:10px;right:10px;bottom:10px;min-height:52px;padding:0 14px}
  .reels{padding-bottom:96px}
}

.more{padding:64px 0}
.more-list{list-style:none;margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:1320px}
.more-list a{position:relative;display:grid;align-content:start;gap:4px;height:100%;text-decoration:none;padding-bottom:6px}
.m-img{display:block;position:relative;overflow:hidden;border-radius:16px;aspect-ratio:1/1;margin-bottom:10px;box-shadow:0 30px 60px -30px rgba(0,0,0,.95),0 0 0 1px rgba(255,235,210,.12)}
.m-img::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,7,10,.45),transparent 50%)}
.m-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.more-list img.tall{object-position:50% 30%}
.more-list a:hover img{transform:scale(1.06)}
.m-n{font:800 20px/1.05 var(--display);font-stretch:88%;text-transform:uppercase;color:#fff}
.m-p{font:800 22px/1.1 var(--display);font-stretch:88%;color:var(--red-hi);text-shadow:0 0 16px rgba(255,40,55,.45)}
.m-d{font-size:15px;color:var(--mute);line-height:1.35}
@media (min-width:900px){
  .more-list{grid-template-columns:repeat(4,1fr);gap:22px}
  .m-img{aspect-ratio:4/5}
  .m-n{font-size:26px}.m-p{font-size:30px}
}

.alerts{padding:40px var(--pad) 80px}
.alerts-in{max-width:1320px;margin:0 auto;padding:36px 0 32px;border-radius:28px;position:relative;overflow:hidden;
  background:radial-gradient(60% 80% at 100% 0,rgba(227,6,19,.28),transparent 60%),linear-gradient(160deg,var(--ink3),var(--ink2));border:1px solid var(--line);box-shadow:0 40px 90px -40px rgba(0,0,0,.95)}
.alerts .sec-head{margin-bottom:24px}
.form{padding:0 var(--pad);display:grid;gap:14px}
.form label{display:grid;gap:6px;font:600 15px/1.2 var(--body)}
.form input:not([type=checkbox]){min-height:54px;padding:0 16px;border-radius:14px;border:1.5px solid rgba(255,255,255,.3);background:rgba(255,255,255,.06);color:#fff;font:500 18px/1 var(--body)}
.form input:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-color:transparent}
.form .check{grid-template-columns:28px 1fr;align-items:start;gap:10px;font:500 13px/1.45 var(--body);color:var(--mute)}
.form .check input{width:24px;height:24px;margin:0;accent-color:var(--red)}
.form-done{margin:0;font-weight:700;color:var(--warm);min-height:1.5em}
@media (min-width:900px){.alerts-in{padding:56px 24px 48px}.form{grid-template-columns:repeat(3,1fr);align-items:end}.form .check{grid-column:1/3}.form .btn{justify-self:end}}
/* live site: the real drop-alerts form (forms.ts, Turnstile, /api/alerts/) */
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .field{display:grid;gap:4px;align-content:end}
.form .field-error{margin:0;font:600 13px/1.3 var(--body);color:#ff9aa1}
.form .field-error:empty{display:none}
.form input[aria-invalid=true]{border-color:#ff5a64}
.form .form-note{margin:0;font:500 13px/1.3 var(--body);color:var(--mute)}
.form .cf-turnstile{min-height:65px}
.form .form-status:empty{min-height:0}
.form .form-status.err{color:#ff9aa1}
@media (min-width:900px){.form .form-note,.form .form-status{grid-column:1/-1}.form .cf-turnstile{grid-column:1/3}}

.foot{padding:48px var(--pad) calc(var(--dock) + 40px + env(safe-area-inset-bottom));background:#050407;border-top:1px solid var(--line);display:grid;gap:18px;color:var(--mute)}
.foot img{height:40px;width:auto}
.foot-tag{margin:0;font:600 12px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase}
.foot address{font-style:normal;line-height:1.7}
.foot a{color:#fff;text-underline-offset:3px}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 18px}
.foot nav a{display:inline-flex;align-items:center;min-height:44px}
.foot-copy{margin:0;font-size:14px}
@media (min-width:900px){.foot{grid-template-columns:auto 1fr 1fr;align-items:start;gap:28px 56px}.foot nav{grid-column:2/4}}

/* reveal: leaf reveals in pikotw's timing */
.js:not(.static) .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.js:not(.static) .reveal.in{opacity:1;transform:none}

/* phone action dock */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-template-columns:auto 1fr 1fr;gap:8px;align-items:center;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(rgba(10,9,12,.9),rgba(10,9,12,.98));border-top:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.dock .btn{min-height:50px;padding:0 10px;font-size:16px}
.dock-price{display:flex;align-items:center;gap:8px;min-height:50px;padding:0 8px 0 4px;background:none;border:0;cursor:pointer;text-align:left}
.dock-price b{font:900 36px/1 var(--display);font-stretch:90%;color:var(--red-hi);letter-spacing:-.02em;text-shadow:0 0 16px rgba(255,40,55,.6)}
.dock-price > span{font:700 14px/1.15 var(--body);color:#fff}
.dock-price > span > span{font-weight:600;color:#e6ddd3;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:3px}
@media (max-width:370px){.dock-price > span{font-size:13px}.dock .btn{font-size:15px}}
@media (min-width:900px){.dock{display:none}}

/* cookie consent: a top pill with its text; after chapter 1 it tucks into a small labelled chip */
.consent{position:fixed;z-index:44;left:12px;right:12px;top:calc(var(--top) + 14px);display:flex;align-items:center;gap:10px;padding:6px 6px 6px 14px;border-radius:999px;
  background:rgba(14,11,14,.92);border:1px solid rgba(255,255,255,.2);box-shadow:0 10px 30px rgba(0,0,0,.5);transition:opacity .45s,transform .55s var(--ease),visibility 0s}
.consent p{margin:0;font:600 14px/1.25 var(--body);flex:1}
.consent p a{color:var(--warm);display:inline-block;padding:2px 0}
.consent div{display:flex;gap:6px}
.consent.gone,.consent.tucked{opacity:0;transform:translateY(-12px);pointer-events:none;visibility:hidden;transition:opacity .45s,transform .55s var(--ease),visibility 0s .55s}
.boot .consent{opacity:0}
.boot.go .consent{opacity:1;transition:opacity .6s 2.6s}
.consent-chip{display:none;min-height:44px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:rgba(14,11,14,.6);color:#fff;font:700 13px/1 var(--body);cursor:pointer;white-space:nowrap}
.consent-chip.show{display:inline-flex;align-items:center;animation:chipin .5s var(--ease)}
.consent-chip.gone{display:none}
@keyframes chipin{from{opacity:0;transform:translateY(-6px)}}
.consent.open{opacity:1;transform:none;pointer-events:auto;visibility:visible;top:calc(var(--top) + 10px);transition-delay:0s}
@media (min-width:900px){
  .consent{right:auto;left:24px;top:auto;bottom:20px;max-width:440px}
  .consent.open{top:auto;bottom:20px}
}
.hint{display:flex;align-items:center;gap:10px;margin:14px 0 0;font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.hint i{width:18px;height:28px;border:2px solid #fff;border-radius:10px;position:relative}
.hint i::after{content:"";position:absolute;left:50%;top:5px;width:3px;height:6px;margin-left:-1.5px;border-radius:2px;background:#fff;animation:wheel 1.6s var(--ease) infinite}
@keyframes wheel{0%{opacity:0;transform:translateY(-2px)}30%{opacity:1}100%{opacity:0;transform:translateY(9px)}}
.static .hint{display:none}
@media (max-width:899px){#ch-2 .hint{display:none}}

/* dialogs */
.dlg{border:0;padding:0;background:transparent;color:#fff;max-width:min(560px,94vw);width:100%;max-height:92vh}
.dlg::backdrop{background:rgba(5,4,6,.84);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.dlg-in{background:linear-gradient(160deg,var(--ink3),var(--ink2));border:1px solid var(--line);border-radius:22px;padding:22px;display:grid;gap:14px}
.dlg-h{margin:0;font:800 30px/1 var(--display);font-stretch:86%;text-transform:uppercase}
.dlg-k{margin:6px 0 0;font:600 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--warm)}
.go-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.go-list a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0 14px;border-radius:12px;background:rgba(255,255,255,.06);text-decoration:none;font:700 19px/1 var(--body)}
.go-list a span{font:600 14px/1 var(--body);color:var(--mute)}
.go-list a:hover{background:rgba(255,255,255,.12)}
.chap-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:4px}
.chap-list a{display:flex;align-items:center;gap:12px;min-height:46px;padding:0 12px;border-radius:12px;text-decoration:none;font:700 16px/1 var(--body)}
.chap-list a:hover,.chap-list a.on{background:rgba(255,255,255,.08)}
.chap-list span{font:600 13px/1 var(--mono);color:var(--mute2)}
.td-price{display:flex;align-items:center;gap:14px;margin:0}
.td-price b{font:900 84px/.8 var(--display);font-stretch:92%;color:var(--red-hi);text-shadow:0 0 30px rgba(255,40,55,.6)}
.td-price > span{font:600 16px/1.35 var(--body);color:var(--mute)}
#todayDlg .open-now{justify-self:start;margin:0}
#todayDlg .addr,#todayDlg .hours,#todayDlg .small{margin:0}
#todayDlg .meter{margin:0;max-width:none}
.reel-dlg{max-width:min(420px,94vw)}
.reel-dlg video{width:100%;aspect-ratio:9/16;max-height:70vh;border-radius:14px;background:#000}
.dlg-x{justify-self:end}

/* ---------- static mode: reduced motion or "Pause motion" ---------- */
.static .story{height:auto;background:var(--ink)}
.static .pin{padding-top:calc(var(--top) + 8px)}
.static .stage,.static #film,.static #refl,.static .rim,.static .poster,.static .bars,.static .flare,.static .segs,.static .rail,.static .anchor,.static .board,.static .grain,.static .dip,.static .outro{display:none}
.static .chapters{display:grid;gap:0}
.static .ch{position:relative;display:grid;gap:18px;padding:28px var(--pad) 40px;max-width:1180px;margin:0 auto;border-bottom:1px solid var(--line)}
.static .ch .still{display:block;width:100%;max-width:420px;aspect-ratio:4/5;object-fit:cover;object-position:50% 40%;border-radius:18px;order:2}
.static .ch .txt{order:1;position:static;transform:none}
.static .ch .cues{order:3;position:static;display:flex;flex-wrap:wrap;gap:8px;text-align:left}
.static .cues li{position:static;opacity:1;transform:none}
.static .cues li > span{font-size:15px}
.static .ladder{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.static .ladder li{display:grid;gap:4px;justify-items:center;padding:10px 0;border-radius:10px;background:var(--ink2);border:1px solid var(--line);font:600 12px/1 var(--mono);text-transform:uppercase}
.static .ladder b{font:800 22px/1 var(--display);font-stretch:85%}
.static .ladder em{display:none;font-style:normal;font-size:10px}
.static .ladder .is-today{background:var(--red);border-color:var(--red)}
.static .ladder .is-today em{display:block}
.static .breather{padding:56px var(--pad);text-align:center}
.static .bl{font-size:min(17vw,170px);font-stretch:90%}
.static .h1b{font-size:min(40vw,220px)}
.static .top{background:rgba(10,9,12,.97)}
.static .glass{position:static}
@media (min-width:900px){
  .static .ch{grid-template-columns:420px 1fr;align-items:center;gap:56px}
  .static .ch:nth-of-type(even){grid-template-columns:1fr 420px}
  .static .ch .still{order:0;aspect-ratio:9/16;grid-row:1/3}
  .static .ch:nth-of-type(even) .still{order:2;grid-column:2}
  .static .ch .txt{width:auto;align-self:end}
  .static .ch .cues{align-self:start}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition-duration:.01ms !important}}

/* leaving chapters fade out fast so two titles never stack */
.js:not(.static) .ch .txt,.js:not(.static) .ch .cues{transition:opacity .14s}
.js:not(.static) .ch:not(.on) .txt,.js:not(.static) .ch:not(.on) .cues{opacity:0}
.js:not(.static) .ch.on .txt,.js:not(.static) .ch.on .cues{opacity:1;transition:none}
#ch-8 .title{font-size:44px}
@media (min-width:900px){#ch-8 .title{font-size:calc(var(--tfs) * .8)}}
@media (max-width:899px){
  #ch-8 .txt.glass{top:auto;bottom:calc(var(--dock) + 12px);padding:14px}
  #ch-8 .title{font-size:40px}
  #ch-8 .hours{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;font-size:14px}
  #ch-8 .hours tbody{display:contents}
  #ch-8 .hours tr{display:flex;justify-content:space-between;gap:6px;border-bottom:1px solid rgba(255,255,255,.16)}
  #ch-8 .hours th,#ch-8 .hours td{border:0;padding:5px 0;white-space:nowrap}
  #ch-8 .hours em{display:none}
  #ch-8 .hours .is-today th,#ch-8 .hours .is-today td{color:#ff7a83}
  #ch-8 .addr{font-size:15px}
  #ch-8 .small{font-size:13px;margin-top:6px}
  #ch-8 .acts{margin-top:10px}
}
@media (max-width:899px){
  #ch-9 .title{font-size:38px}
  #ch-9 .mcard{padding:10px 10px 8px;margin-top:10px}
  #ch-9 .pts b{font-size:22px}
  #ch-9 .pts span{font-size:13px}
  #ch-9 .pts li{padding:6px 8px}
  .qr{width:38px;height:38px}
}
@media (max-width:899px){.static .pin{padding-top:calc(var(--top) + 72px)}}
.dlg{overflow:auto}

/* =====================================================================
   v3: the Freefall opening, the handover, the text handover rule,
   the four things we sell and the separate repairs service
   ===================================================================== */

/* ---------- the opening stage (WebGL tag over a navy void) ---------- */
.void{display:none}
.js:not(.static) .void{display:block;position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 55% at 62% 42%,#13213e 0%,#070b14 55%,#05070c 100%)}
.js:not(.static) .void::before{content:"";position:absolute;left:calc(50% - 60px);top:-10%;width:120px;height:120%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,60,80,.22),rgba(255,60,80,0) 70%);transform:scaleY(0);transform-origin:top;animation:shaft 1.4s var(--ease) .1s forwards}
@media (min-width:900px){.js:not(.static) .void::before{left:calc(65% - 60px)}}
@keyframes shaft{to{transform:scaleY(1)}}
#tag3d{display:none}
.js:not(.static) #tag3d{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:0;transition:opacity .6s var(--ease)}
.gl-ready #tag3d{opacity:1}
/* once the first fade-in is done, the canvas opacity follows the scroll with no lag, so it is
   at 0 before film.js takes it out of paint (display:none) at the impact handover */
.gl-live #tag3d{transition:none}
.nogl #tag3d{display:none !important}
.stage,.rim{opacity:var(--film,1)}
#film{opacity:var(--fo,1)}
.pin{background:#05070c}

/* the opening's copy: one beat at a time, bottom-left, above the dock */
.op::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--shade,1);
  background:linear-gradient(180deg,rgba(5,7,12,.5) 0,rgba(5,7,12,0) 16%),linear-gradient(0deg,rgba(5,7,12,.94) 0,rgba(5,7,12,.7) 30%,rgba(5,7,12,0) 56%)}
.op .beats{position:absolute;left:var(--pad);right:var(--pad);bottom:calc(var(--dock) + 22px);height:0}
.op .beat{position:absolute;left:0;right:0;bottom:0}
.mega{margin:0;font:800 clamp(46px,15.2vw,74px)/.86 var(--display);text-transform:uppercase;letter-spacing:-.01em;color:#fff;--wd:84%;text-shadow:0 4px 34px rgba(0,0,0,.45)}
.mega .w{display:inline-block;font-stretch:var(--wd)}
.mega .red{color:var(--red-hi);text-shadow:0 0 42px rgba(255,30,50,.55)}
.op .tag{margin-bottom:12px}
.op .sub{margin-top:14px;font-size:17px;max-width:34ch}
.op .hint{position:absolute;right:var(--pad);bottom:96px;margin:0;opacity:var(--hint,1)}
@media (max-width:899px){.op .hint{display:none}}
@media (min-width:900px){
  .op::before{background:linear-gradient(0deg,rgba(5,7,12,.86) 0,rgba(5,7,12,.3) 32%,rgba(5,7,12,0) 52%),linear-gradient(90deg,rgba(5,7,12,.6) 0,rgba(5,7,12,0) 46%)}
  .op .beats{left:196px;right:auto;width:min(860px,56vw);bottom:clamp(112px,14vh,140px)}
  .mega{font-size:clamp(64px,7.3vw,132px);--wd:104%}
  .op .sub{font-size:21px;max-width:42ch;margin-top:20px}
  .op .tag{margin-bottom:18px}
}
/* motion: beats hand over sequentially (outgoing gone in .1 s, incoming waits .24 s) */
.js:not(.static) .op .beat{opacity:0;transition:opacity .1s linear;pointer-events:none}
.js:not(.static) .op .beat.on{opacity:1;transition:opacity .3s var(--ease) .24s;pointer-events:auto}
.js:not(.static) .mega .w{font-stretch:62%;opacity:0;transform:translateY(.32em);filter:blur(6px);transition:font-stretch .2s,opacity .1s linear,transform .2s,filter .1s}
.js:not(.static) .beat.on .mega .w{font-stretch:var(--wd);opacity:1;transform:none;filter:none;
  transition:font-stretch 1.25s var(--ease),opacity .55s var(--ease),transform .9s var(--ease),filter .7s var(--ease);transition-delay:calc(.24s + var(--i,0) * 80ms)}
.js:not(.static) .op .beat .tag,.js:not(.static) .op .beat .sub{opacity:0;transform:translateY(14px);transition:opacity .1s linear,transform .2s}
.js:not(.static) .op.on .beat.on .tag{opacity:1;transform:none;transition:opacity .5s var(--ease) .26s,transform .7s var(--ease) .26s}
.js:not(.static) .op.on .beat.on .sub{opacity:1;transform:none;transition:opacity .6s var(--ease) .46s,transform .8s var(--ease) .46s}

/* the handover: impact flash -> a band of light -> one red line (driven by scroll in film.js) */
.handover{display:none}
.js:not(.static) .handover{display:block;position:absolute;inset:0;z-index:6;pointer-events:none;visibility:hidden}
.ho-glow{position:absolute;left:-10%;right:-10%;top:0;bottom:0;opacity:var(--ga,0);transform:scaleY(var(--gs,1));transform-origin:50% 50%;
  background:radial-gradient(70% 55% at 50% 50%,rgba(255,244,236,.98) 0,rgba(255,92,100,.92) 26%,rgba(214,8,26,.72) 52%,rgba(120,0,12,.35) 78%,rgba(60,0,6,0) 100%)}
.ho-line{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:#ff3a46;opacity:var(--la,0);
  box-shadow:0 0 16px 3px rgba(255,30,45,.95),0 0 60px 10px rgba(255,30,45,.5)}

/* ---------- TEXT HANDOVER RULE for the film chapters ----------
   The outgoing chapter's copy and cues fade out in .1 s; the incoming copy waits .2 s before it
   rises, so in any one region there is always an empty beat between two chapters' text. */
.js:not(.static) .ch .txt,.js:not(.static) .ch .cues{transition:opacity .1s linear}
.js:not(.static) .ch:not(.on) .txt,.js:not(.static) .ch:not(.on) .cues{opacity:0}
.js:not(.static) .ch.on .txt,.js:not(.static) .ch.on .cues{opacity:1;transition:opacity .25s var(--ease) .2s}
.js:not(.static) .ch.on .tag,.js:not(.static) .ch.on .eyebrow{transition-delay:.2s}
.js:not(.static) .ch.on .sub,.js:not(.static) .ch.on .open-now,.js:not(.static) .ch.on .addr,.js:not(.static) .ch.on .meter{transition-delay:.3s}
.js:not(.static) .ch.on .count,.js:not(.static) .ch.on .tiers,.js:not(.static) .ch.on .mcard,.js:not(.static) .ch.on .hours{transition-delay:.38s}
.js:not(.static) .ch.on .small,.js:not(.static) .ch.on .acts{transition-delay:.46s}
.js:not(.static) .ch.on .c{transition-delay:calc(.2s + var(--i) * 12ms)}
/* cues inside one chapter hand over the same way */
.js:not(.static) .cues li{transition:opacity .1s linear,transform .2s}
.js:not(.static) .cues li.on{transition:opacity .45s var(--ease) .24s,transform .55s var(--ease) .24s}

/* after the film: the rail goes, the reel card fades before the pin lets go */
.rail{transition:opacity .35s var(--ease)}
.pin[data-seg=outro] .rail{opacity:0;pointer-events:none}
.outro img{top:calc(var(--ry) - 84px)}
.o-k{top:calc(var(--ry) + var(--rh) + 24px)}

/* ---------- the four things we sell ---------- */
.more-list{counter-reset:none}
.m-no{position:absolute;z-index:1;left:10px;top:10px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--red);color:#fff;font:800 16px/1 var(--display);box-shadow:0 0 16px rgba(255,30,45,.6)}
.more .sec-sub{color:var(--mute)}

/* ---------- repairs: a separate service, not a product ---------- */
.service{padding:8px var(--pad) 64px}
.svc{max-width:1320px;margin:0 auto;display:grid;border-radius:28px;overflow:hidden;background:var(--paper);color:var(--ink);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.95),0 0 0 1px rgba(255,235,210,.2)}
.svc-img{position:relative;aspect-ratio:16/9;overflow:hidden}
.svc-img img{width:100%;height:100%;object-fit:cover;object-position:40% 40%}
.svc-body{padding:22px 20px 24px}
.svc-badge{margin:0 0 12px}
.svc-badge span{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;border:1.5px solid var(--ink);font:700 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.svc-badge span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red)}
.svc-title{margin:0;font:800 clamp(40px,11vw,84px)/.9 var(--display);font-stretch:84%;text-transform:uppercase;letter-spacing:-.01em}
.svc-title span{display:block;color:var(--red);font-size:.56em;line-height:1;margin-top:6px}
.svc-lead{margin:14px 0 0;font:500 17px/1.45 var(--body);max-width:52ch;color:#2a2228}
.svc-kinds{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.svc-kinds li{display:grid;gap:2px;padding:10px 14px;border-radius:14px;background:#fff;border:1px solid rgba(8,7,10,.12)}
.svc-kinds b{font:800 20px/1.1 var(--display);font-stretch:88%;text-transform:uppercase}
.svc-kinds span{font:500 15px/1.35 var(--body);color:#4a4148}
.svc-price{margin:16px 0 0;font:500 17px/1.4 var(--body)}
.svc-price b{font:800 28px/1 var(--display);font-stretch:88%;color:var(--red)}
.svc .acts .btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(8,7,10,.55)}
.svc .acts .btn-ghost:hover{background:rgba(8,7,10,.06)}
.svc .small{color:#5a5058;text-shadow:none}
@media (min-width:900px){
  .svc{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
  .svc-img{aspect-ratio:auto;min-height:100%}
  .svc-body{padding:44px 44px 40px}
  .svc-kinds{grid-template-columns:repeat(3,1fr)}
}
.td-svc{margin:0;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid var(--line);font:500 15px/1.4 var(--body);color:var(--mute)}
.td-svc b{color:#fff;margin-right:4px}
.td-svc a{color:#fff;font-weight:700;text-underline-offset:3px}

/* ---------- static (reduced motion / Pause motion): a still of the tag on SUN $7 + the copy ---------- */
.static .op{position:relative;display:grid;gap:22px;padding:28px var(--pad) 40px;max-width:1180px;margin:0 auto;border-bottom:1px solid var(--line)}
.static .op::before{display:none}
.static .op .op-still{display:block;order:0;max-width:none;aspect-ratio:auto;border-radius:18px;overflow:hidden}
.static .op .op-still img{width:100%;height:auto}
.static .op .beats{position:static;height:auto;display:grid;gap:26px}
.static .op .beat{position:static}
.static .op .hint{display:none}
@media (min-width:900px){.static .op{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:48px}.static .op .op-still{grid-row:auto}.static .mega{font-size:72px}}
/* the tag still is the opening's poster from first paint (0.07 MB): it stands behind the copy
   while three.js loads, cross-fades away as the WebGL canvas fades in, and stays for no-WebGL */
.js:not(.static) .op .op-still{display:block;position:absolute;inset:0;z-index:-1;transition:opacity .6s var(--ease)}
.js:not(.static) .op .op-still img{width:100%;height:100%;object-fit:cover}
.gl-ready:not(.nogl) .op .op-still{opacity:0}
.js:not(.static) .op.on .hint{opacity:var(--hint,1);transition:opacity .4s}

/* =====================================================================
   Final pass (18 Oct): copy scrims, header backdrop in the opening,
   phone-only lines, three reels, no-wrap prices
   ===================================================================== */
/* the opening: the header gets a backdrop while the WebGL plates are on screen */
.in-op .top{background:linear-gradient(rgba(5,7,12,.96),rgba(5,7,12,.88));box-shadow:0 1px 0 rgba(160,180,255,.08);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
/* the opening's copy-side scrim: stronger, so no plate numeral or ring reads through the type */
.op::before{background:linear-gradient(180deg,rgba(5,7,12,.5) 0,rgba(5,7,12,0) 16%),linear-gradient(0deg,rgba(5,7,12,.97) 0,rgba(5,7,12,.9) 36%,rgba(5,7,12,.55) 50%,rgba(5,7,12,0) 64%)}
@media (min-width:900px){
  .op::before{background:linear-gradient(0deg,rgba(5,7,12,.9) 0,rgba(5,7,12,.45) 34%,rgba(5,7,12,0) 54%),linear-gradient(90deg,rgba(5,7,12,.82) 0,rgba(5,7,12,.62) 32%,rgba(5,7,12,0) 56%)}
}
/* phone: the eyebrow stays on one line */
@media (max-width:899px){
  .op .tag{font-size:11.5px;letter-spacing:.1em;white-space:nowrap}
}
/* phone: every chapter's copy sits on its own scrim, so in-shot signage never reads through it */
@media (max-width:899px){
  .js:not(.static) .ch .txt{isolation:isolate}
  .js:not(.static) .ch .txt:not(.glass)::before{content:"";position:absolute;z-index:-1;left:calc(var(--pad) * -1);right:calc(var(--pad) * -1);pointer-events:none}
  .js:not(.static) .ch[data-pos=bottom] .txt:not(.glass)::before{top:-90px;bottom:calc((var(--dock) + 22px) * -1);
    background:linear-gradient(0deg,rgba(6,5,8,.94) 0,rgba(6,5,8,.9) 64%,rgba(6,5,8,.55) 83%,rgba(6,5,8,0) 100%)}
  .js:not(.static) .ch[data-pos=top] .txt:not(.glass)::before{top:calc((var(--top) + 22px) * -1);bottom:-90px;
    background:linear-gradient(180deg,rgba(6,5,8,.97) 0,rgba(6,5,8,.95) 66%,rgba(6,5,8,.6) 84%,rgba(6,5,8,0) 100%)}
  .cues li > span{background:rgba(8,6,10,.84)}
  .ch .cues.d-only{display:none !important}
  #ch-2 .m-only{display:block}
  #ch-2 .m-only span{display:inline-block;padding:6px 12px;border-radius:6px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);font-weight:600;font-size:15px}
}
.m-only{display:none}
@media (min-width:900px){.cues li > span{background:rgba(8,6,10,.8)}}
/* three reels */
@media (min-width:900px){
  .reel-rail.n3{grid-template-columns:repeat(3,1fr);max-width:1120px;gap:28px}
}
@media (max-width:899px){
  .reel-rail.n3 .reel:last-child{grid-column:1/-1;justify-self:center;width:calc(50% - 6px)}
}
/* product prices never orphan their last tier */
.m-p{white-space:nowrap}
@media (max-width:899px){.m-p{font-size:clamp(15px,4.4vw,22px);letter-spacing:-.01em}}
/* desktop: "$1 Wednesday." is the widest beat; set it narrower so it clears the Wednesday plate */
@media (min-width:900px){.op .beat[data-b="2"] .mega{--wd:76%}.op .beat[data-b="2"] .mega .red{display:block;width:max-content}}
/* the three reels line up with the section heading; the pallets card crops above the L01 storefront */
@media (min-width:900px){.reel-rail.n3{margin-left:max(0px,calc((100% - 1320px) / 2));margin-right:auto}}
.more-list li:nth-child(4) img.tall{object-position:50% 4%}
/* today's price breathes in the dock (phone) and the header chip (desktop): a "live" cue that is
   always on screen (also keeps headless capture producing frames at the very bottom of the page) */
@keyframes livePrice{0%,100%{text-shadow:0 0 16px rgba(255,40,55,.6)}50%{text-shadow:0 0 22px rgba(255,40,55,.9)}}
.dock-price b,.today-chip b{animation:livePrice 3s ease-in-out infinite}

/* =====================================================================
   v4 (18 Oct): the Seedance loops, the cut-out props and the 2D motion kit, curated into one page.
   Kit styles: kit/kit.css (copied from ../motion-kit). Everything below is placement.
   ===================================================================== */

/* ---------- hero -> dock: the $7 TODAY peel sticker is OFF (fix round 1; film.js PEEL) ---------- */
@keyframes gotPrice{0%{transform:scale(1)}35%{transform:scale(1.28)}100%{transform:scale(1)}}
.dock-price b.got,.today-chip b.got{display:inline-block;animation:gotPrice .7s var(--k-spring) both,livePrice 3s ease-in-out .7s infinite}

/* ---------- ch-05: flip countdown (replaces v3's LED) + the RESTOCK THURSDAY stamp ---------- */
#ch-5 .count{gap:10px}
#ch-5 .flip-host{width:100%;max-width:440px}
#ch-5 .flip-host .k-cd-g > span{color:rgba(255,235,230,.82)}
#ch-5 .stamp-host{position:absolute;left:50%;top:calc(var(--top) + 22px);width:min(200px,52vw);margin-left:calc(min(200px,52vw) / -2);pointer-events:none;filter:drop-shadow(0 2px 14px rgba(0,0,0,.55))}
#ch-5 .stamp-host .k-stamp{color:#ff3341}
@media (min-width:900px){
  #ch-5 .stamp-host{left:calc(var(--rx) + var(--rw) + 272px);top:calc(50% + 262px);width:236px;margin-left:0}
  #ch-5 .flip-host{max-width:470px}
}
.static #ch-5 .stamp-host{position:static;margin:0;width:200px;order:4}

/* ---------- b-2: the drop week as a ladder (scrubbed), closing on the restock loop arrow ---------- */
.b-ladder .bl-panel{position:relative;opacity:var(--bo,0);width:min(100% - 24px,1040px);display:grid;justify-items:center;gap:6px}
.b-ladder .bl-panel::before{content:"";position:absolute;z-index:-1;inset:-14% -10%;background:radial-gradient(closest-side,rgba(6,5,8,.9),rgba(6,5,8,.72) 60%,rgba(6,5,8,0));pointer-events:none}
.bl-kick{margin:0;font:600 12px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--warm)}
.bl-row{width:100%;display:grid;justify-items:center;align-items:center;gap:0}
.b-ladder .ladder-host{width:100%;max-width:640px}
/* fix round 3: the 3D ladder. The canvas melts into the vignette at its edges; the restock pill is an
   embossed HTML chip that rides the arc's apex. */
.l3-host{position:relative;max-width:none!important}
.b-ladder .l3-host{width:min(100%,980px)}
.l3-canvas{display:block;margin:0 auto;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 80%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 80%,transparent 100%)}
.l3-pill{position:absolute;left:0;top:0;opacity:0;white-space:nowrap;pointer-events:none;will-change:transform,opacity;
  padding:9px 18px 10px;border-radius:999px;font:800 14px/1 var(--cond,"Barlow Condensed",sans-serif);letter-spacing:.08em;color:#fff;
  text-shadow:0 1px 0 rgba(0,0,0,.6),0 0 12px rgba(255,60,75,.35);
  background:linear-gradient(180deg,#3a2a30 0%,#1d1418 48%,#100b0e 100%);
  border:1.5px solid #ff2a3a;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -3px 6px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.6),0 0 22px rgba(255,30,50,.5),0 10px 24px -8px rgba(0,0,0,.9)}
@media (max-width:899px){.l3-pill{font-size:12px;padding:7px 13px 8px}
  .l3-canvas{-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 90%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 90%,transparent 100%)}}
.bl-note{margin:0;font:500 13px/1.3 var(--body);color:rgba(255,255,255,.86)}
@media (min-width:900px){
  .b-ladder .ladder-host{max-width:760px}
  .bl-kick{font-size:13px}
  .bl-note{font-size:14px}
}
/* the ladder's labels, brighter than the kit default on the dark vignette */
.b-ladder .k-lad-day{fill:rgba(247,242,234,.84)}
.b-ladder .k-lad-day.is-today{fill:#fff}
.b-ladder .k-lad-price{fill:rgba(247,242,234,.93)}
.b-ladder .k-lad-price.is-past{fill:rgba(247,242,234,.64)}
.b-ladder .k-lad-price.is-today{fill:#fff}
.static .b-ladder{padding:40px var(--pad)}
.static .b-ladder .bl-panel{opacity:1;margin:0 auto}

/* ---------- the loops: a lazy poster picture under a muted, looping video ---------- */
.clip{position:relative;display:block;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#141117;isolation:isolate;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.95),0 0 0 1px rgba(255,235,210,.12)}
.clip img,.clip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.clip video{opacity:0;transition:opacity .45s var(--ease)}
.clip video.on{opacity:1}
.static .clip video{display:none}

/* ---------- the cut-out props: one soft contact shadow for all ---------- */
.prop{position:absolute;z-index:3;pointer-events:none;display:block}
.prop img{position:relative;z-index:1;display:block;width:100%;height:auto;transform-origin:50% 94%;will-change:transform;transform:rotate(var(--rr,0deg))}
.prop-sh{position:absolute;z-index:0;left:12%;right:12%;bottom:1%;height:11%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.66),rgba(0,0,0,.3) 58%,rgba(0,0,0,0));filter:blur(2.5px);transform-origin:50% 50%}

/* ---------- four things we sell: four matching cards ---------- */
.sell4{padding:64px 0 72px}
.cards4{list-style:none;margin:0 auto;padding:0 var(--pad);display:grid;gap:44px;max-width:1320px;counter-reset:none}
.card4 > a{display:block;text-decoration:none;color:inherit;border-radius:20px}
.c4-media{position:relative;display:block}
.c4-media .m-no{z-index:2}
/* Fix round 1: the props scale with the real object (pallet > bin > box > mail), rest at a small angle
   so they read as cut-outs stepping out of the clip, not a copy of the object in it, and the sealed
   box lands on the empty counter at the bottom left of P2, clear of Mia and the four boxes. */
.card4 .prop{right:1%;bottom:-36%;width:31%;--rr:-5deg}
.card4 .prop-box{right:auto;left:4%;bottom:4%;width:25%;--rr:4deg}
.card4 .prop-mail{width:22%;right:3%;bottom:-36%;--rr:-8deg}
.card4 .prop-pallet{width:36%;right:0;bottom:-36%;--rr:3deg}
.card4[data-prop=box] .c4-head{padding-right:0}
.c4-body{display:grid;gap:4px;padding:14px 2px 0}
.c4-head{display:flex;align-items:center;gap:10px;padding-right:35%;min-height:48px}
.c4-head .k-ico{width:42px;height:42px;color:#fff}
.card4 .m-n{font-size:24px}
.card4 .m-p{font-size:24px}
.card4 .m-d{font-size:16px;max-width:42ch}
.card4 > a:hover .clip img{transform:none}
.tape-host{position:absolute;z-index:1;left:-6%;right:44%;top:27%;transform:rotate(-4deg);transform-origin:0 50%;pointer-events:none}
@media (min-width:900px){
  .cards4{grid-template-columns:1fr 1fr;gap:64px 44px}
  .card4 .prop{width:29%;right:1%;bottom:-40%}
  .card4 .prop-box{width:22%;right:auto;left:4%;bottom:4%}
  .card4 .prop-mail{width:20%;right:5%;bottom:-36%}
  .card4 .prop-pallet{width:34%;right:0;bottom:-42%}
  .card4 .m-n{font-size:30px}.card4 .m-p{font-size:30px}
  .c4-head{padding-right:36%}
  .card4 .m-d{max-width:min(42ch,60%)}
  .c4-head .k-ico{width:48px;height:48px}
}

/* ---------- repairs: the service panel leads with the S1 loop ---------- */
.service .svc{overflow:visible;position:relative}
.svc-media{position:relative}
.svc-media .clip{border-radius:28px 28px 0 0;box-shadow:none}
.svc .prop-dev{right:3%;bottom:-15%;width:36%}
.svc-kinds li{grid-template-columns:40px 1fr;align-items:start;column-gap:12px}
.svc-kinds .k-ico{width:40px;height:40px;color:var(--ink);margin-top:2px}
.sk-t{display:grid;gap:2px}
.svc-price .k-mark{--k-mark:var(--red)}
@media (min-width:900px){
  .svc-media{position:static}
  .svc-media .clip{border-radius:28px 0 0 28px;aspect-ratio:auto;height:100%;min-height:540px}
  /* Fix round 1: the devices land INSIDE the paper panel, in the empty top-right corner beside
     "REPAIRS." (never above the panel, where they read as a fifth product on the Pallets card) */
  .svc .prop-dev{right:30px;bottom:auto;top:30px;width:150px}
  .svc-kinds li{grid-template-columns:1fr;row-gap:8px}
}

/* ---------- find us: the V1 loop and the route map ---------- */
.visit{padding:64px 0 72px}
.visit .sec-head{margin-bottom:28px}
.visit-grid{max-width:1320px;margin:0 auto;padding:0 var(--pad);display:grid;gap:18px}
.visit-media .clip{border-radius:22px}
.map-host{height:500px}
@media (min-width:900px){
  .visit-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px;align-items:stretch}
  .visit-media .clip{aspect-ratio:auto;height:100%;min-height:520px}
  .map-host{height:100%;min-height:520px}
}

/* ---------- confetti hosts ---------- */
/* Fix round 1: the confetti layer sits BEHIND the Lucky card and is clipped to the Lucky band, so no
   piece is drawn over the Lucky copy (or drifts into the reels heading); the card gets an opaque backdrop
   and the band gets headroom above the card for the burst. */
.lucky{position:relative;isolation:isolate;padding-top:72px}
.lucky-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;-webkit-mask-image:linear-gradient(transparent,#000 36px);mask-image:linear-gradient(transparent,#000 36px)}
.lucky p{position:relative;z-index:1;background:linear-gradient(90deg,rgba(227,6,19,.18),rgba(255,255,255,.04)),#140b0e}
.alerts-in{isolation:isolate}
.join-fx{position:absolute;inset:0;pointer-events:none;z-index:5}

/* fix round 2: the marked phrase gets one clean straight underline (the hand-drawn scribble is gone).
   Its weight scales with the type; it draws left to right once, and is simply there under reduced motion. */
.u-line{white-space:nowrap;background-image:linear-gradient(var(--red),var(--red));background-repeat:no-repeat;
  background-position:0 calc(100% - .02em);background-size:0% max(2px,.085em);padding-bottom:.08em;
  transition:background-size .9s cubic-bezier(.22,.8,.2,1) .15s}
.u-line.is-in{background-size:100% max(2px,.085em)}
.static .u-line,.k-still .u-line{transition:none;background-size:100% max(2px,.085em)}
@media (prefers-reduced-motion: reduce){.u-line{transition:none;background-size:100% max(2px,.085em)}}
/* b-2: the film card steps right back; its readouts and corners go, so the ladder reads alone */

.pin[data-seg=b-2] .rim{opacity:0}
/* fix round 1: the floor line under the (now gone) card would cut through the ladder's day labels */
.pin .floor{transition:opacity .35s var(--ease)}
.pin[data-seg=b-2] .floor{opacity:0}
/* fix round 1: a prop's squash / rest angle at the card edge must never widen the layout viewport
   (on phones it made the whole page zoom for ~0.5 s as the bin and pallet landed: the old "header jump") */
.sell4,.service,.visit{overflow-x:clip}

/* ---------- fix round 4: the drop-week ladder in pure CSS 3D (ported from the Claude Design canvas) ---------- */
.lc-host{position:relative;max-width:none!important;display:grid;justify-items:center}
.b-ladder .lc-host{width:min(100%,980px)}
.lc{position:relative;overflow:visible}
.lc-stage{position:absolute;left:0;top:0;transform-origin:0 0;perspective:2300px;perspective-origin:50% 38%}
.lc-world,.lc-col,.lc-plane{transform-style:preserve-3d}
.lc-world{position:absolute;width:0;height:0}
.lc-plane{position:absolute}
.lc-col{position:absolute;width:84px;transform-origin:50% 100%;animation:lc-rise 1.05s cubic-bezier(.2,.85,.25,1.12) both}
.lc-f{position:absolute;box-sizing:border-box;border-radius:3px;backface-visibility:hidden}
.lc-front{left:0;top:0;width:84px;height:100%;transform:translateZ(42px);overflow:hidden}
.lc-side{left:0;top:0;width:84px;height:100%;transform:rotateY(90deg) translateZ(42px)}
.lc-top{left:0;top:-42px;width:84px;height:84px;transform:rotateX(90deg)}
.past .lc-front{background:linear-gradient(180deg,#61636f 0%,#40414b 34%,#272830 78%,#1d1d23 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 1px 0 0 rgba(255,255,255,.14),inset -2px 0 0 rgba(0,0,0,.45)}
.next .lc-front{background:linear-gradient(180deg,#44464f 0%,#2b2c33 40%,#1a1a1f 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 1px 0 0 rgba(255,255,255,.1),inset -2px 0 0 rgba(0,0,0,.5)}
.today .lc-front{background:linear-gradient(180deg,#ff6a73 0%,#f2121f 26%,#d0060f 70%,#98030b 100%);box-shadow:inset 0 1px 0 rgba(255,220,222,.8),inset 1px 0 0 rgba(255,180,185,.45),inset -2px 0 0 rgba(90,0,6,.55),0 0 40px rgba(255,30,50,.5);animation:lc-breathe 2.6s ease-in-out 2.2s infinite}
.past .lc-side{background:linear-gradient(180deg,#34353d 0%,#1d1d23 60%,#121216 100%)}
.next .lc-side{background:linear-gradient(180deg,#26272d 0%,#141418 100%)}
.today .lc-side{background:linear-gradient(180deg,#c20612 0%,#7a030b 70%,#560207 100%)}
.past .lc-top{background:linear-gradient(135deg,#fffbf4 0%,#e6ddd1 55%,#c9bfb3 100%);box-shadow:0 0 22px rgba(255,236,214,.6)}
.next .lc-top{background:linear-gradient(135deg,#d9d2c9 0%,#a7a097 100%);box-shadow:0 0 12px rgba(255,236,214,.25)}
.today .lc-top{background:linear-gradient(135deg,#ffd0d3 0%,#ff5560 50%,#e30613 100%);box-shadow:0 0 36px rgba(255,50,70,.9)}
.wed .lc-top{background:linear-gradient(135deg,#ff9aa1 0%,#ff2a3a 60%,#c00512 100%);box-shadow:0 0 26px rgba(255,40,60,.75)}
.lc-gloss{position:absolute;top:0;left:12%;width:20%;height:100%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.13),rgba(255,255,255,0))}
.lc-day{position:absolute;left:0;right:0;bottom:14px;text-align:center;font:700 15px/1 "Barlow Condensed",var(--cond,sans-serif);letter-spacing:.2em;color:rgba(245,238,228,.82);text-shadow:0 1px 0 rgba(255,255,255,.2),0 -1px 0 rgba(0,0,0,.9)}
.today .lc-day{color:#fff;text-shadow:0 -1px 0 rgba(90,0,6,.9),0 1px 0 rgba(255,200,204,.65)}
.lc-tday{position:absolute;left:0;right:0;top:16px;text-align:center;font:800 11px/1 "Barlow Condensed",sans-serif;letter-spacing:.26em;color:#fff;text-shadow:0 -1px 0 rgba(90,0,6,.9),0 1px 0 rgba(255,200,204,.6)}
.lc-price{position:absolute;width:160px;text-align:center;font:800 56px/1 "Barlow Condensed",sans-serif;color:#efe8de;text-shadow:0 -1px 0 #fff,0 1px 0 #bdb4aa,0 2px 0 #a39a90,0 3px 0 #877f76,0 4px 0 #6a635c,0 5px 0 #4d4843,0 6px 1px #2f2c29,0 14px 20px rgba(0,0,0,.8);animation:lc-pop .6s ease-out both}
.past.lc-price{color:#d9d1c7}
.today.lc-price{font-size:68px;color:#fff;text-shadow:0 -1px 0 #fff,0 1px 0 #ffb0b6,0 2px 0 #ff5d68,0 3px 0 #e3202d,0 4px 0 #b80e19,0 5px 0 #8a0610,0 6px 1px #5c030a,0 0 34px rgba(255,40,60,.85),0 16px 22px rgba(0,0,0,.7)}
.lc-line{position:absolute;left:0;top:0;overflow:visible;filter:drop-shadow(0 0 6px rgba(255,42,58,.95)) drop-shadow(0 0 16px rgba(255,42,58,.55))}
.lc-line path:first-child{stroke-dasharray:1;animation:lc-draw 1.1s cubic-bezier(.6,0,.3,1) 1.5s both}
.lc-knots{animation:lc-fade .5s ease-out 2.5s both}
.lc-arc{position:absolute;left:0;top:0;overflow:visible;filter:drop-shadow(0 0 12px rgba(255,236,214,.35))}
.lc-arc .lc-t{stroke-dasharray:1;animation:lc-draw 1.5s cubic-bezier(.55,0,.3,1) 2.7s both}
.lc-head{transform-box:fill-box;transform-origin:50% 50%;animation:lc-headin .5s cubic-bezier(.2,1.5,.4,1) 4.1s both}
.lc-pill{position:absolute;white-space:nowrap;padding:11px 22px 12px;border-radius:999px;font:800 17px/1 "Barlow Condensed",sans-serif;letter-spacing:.08em;color:#fff;background:linear-gradient(180deg,#3d2c33 0%,#1f151a 50%,#110b0e 100%);border:2px solid #ff2a3a;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -3px 6px rgba(0,0,0,.6),0 0 26px rgba(255,30,50,.55),0 12px 26px -8px rgba(0,0,0,.9);text-shadow:0 1px 0 rgba(0,0,0,.6);animation:lc-pillin .6s ease-out 3.7s both}
.lc-floor{left:-700px;top:-450px;width:1400px;height:900px;transform:rotateX(90deg);background:radial-gradient(closest-side at 50% 52%,rgba(255,30,48,.34),rgba(255,30,48,0) 30%),repeating-linear-gradient(0deg,rgba(255,235,220,.06) 0 1px,transparent 1px 60px),repeating-linear-gradient(90deg,rgba(255,235,220,.06) 0 1px,transparent 1px 60px),radial-gradient(closest-side,rgba(34,30,36,.92),rgba(12,10,13,0));-webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent);mask-image:radial-gradient(closest-side,#000 55%,transparent)}
.lc-floor-glow{left:-260px;top:-260px;width:520px;height:520px;transform:rotateX(90deg) translateZ(1px);background:radial-gradient(closest-side,rgba(255,40,60,.55),rgba(255,40,60,0));animation:lc-glow 2.6s ease-in-out 2.2s infinite}
.lc-refl{position:absolute;width:84px;border-radius:3px;opacity:.5;-webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent);animation:lc-fade .8s ease-out 1.3s both}
.lc-ph .lc-price{font-size:78px}
.lc-ph .today.lc-price{font-size:94px}
.lc-ph .lc-day{font-size:28px;bottom:12px;letter-spacing:.12em}
.lc-ph .lc-tday{font-size:17px;top:12px;letter-spacing:.14em}
.lc-ph .lc-pill{font-size:34px;padding:18px 34px 20px;border-width:3px}
@keyframes lc-rise{from{transform:scaleY(.001)}to{transform:scaleY(1)}}
@keyframes lc-pop{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes lc-fade{from{opacity:0}to{opacity:1}}
@keyframes lc-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes lc-headin{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}
@keyframes lc-pillin{from{opacity:0;transform:translate(-50%,-30%)}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes lc-breathe{0%,100%{box-shadow:inset 0 1px 0 rgba(255,220,222,.8),inset 1px 0 0 rgba(255,180,185,.45),inset -2px 0 0 rgba(90,0,6,.55),0 0 34px rgba(255,30,50,.45)}50%{box-shadow:inset 0 1px 0 rgba(255,220,222,.8),inset 1px 0 0 rgba(255,180,185,.45),inset -2px 0 0 rgba(90,0,6,.55),0 0 70px rgba(255,30,50,.85)}}
@keyframes lc-glow{0%,100%{opacity:.75}50%{opacity:1}}
/* live site: the cookie notice (/consent.js) on phones sits under the header, clear of the dock and of the
   chapter copy at the bottom of the film */
@media (max-width:899px){body.v4 #ddConsent{top:calc(var(--top) + 10px + env(safe-area-inset-top));bottom:auto}}
/* live site (ES): the underlined phrase may wrap (the underline follows each line); the dock's today chip
   keeps its open line on one line */
.u-line{white-space:normal;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.dock-price span span{white-space:nowrap}
/* live site: the header never wraps a nav label; the today text and the Pause label only show from 1440 px
   (the live header has no Cookies chip, and the Spanish labels are longer) */
@media (min-width:900px){.nav a{white-space:nowrap}}
@media (min-width:900px) and (max-width:1439px){.pause .lbl{display:none}.today-chip > span{display:none}}
@media (min-width:900px) and (max-width:1279px){.nav a{padding:14px 7px;font-size:14px}}
@media (min-width:1440px) and (max-width:1599px){html[lang=es] .today-chip > span{display:none}}
/* live site: the header carries the site's six pages (Grand opening, Pallets, Mystery boxes, Repairs, Visit,
   FAQ & rules) like every other page. Below 1440 px the desktop Directions button gives way (Visit, the dock and
   the menu still lead to directions); below 1280 px the price chip too, and the menu type tightens. */
@media (min-width:900px) and (max-width:1439px){.top-act .btn-ghost.desk{display:none}}
@media (min-width:900px) and (max-width:1279px){.today-chip{display:none}.nav{margin-left:12px}.nav a{padding:12px 6px;font-size:13.5px}}
@media (min-width:1280px) and (max-width:1439px){.nav a{padding:14px 8px;font-size:14.5px}}
@media (min-width:1440px) and (max-width:1599px){html[lang=es] .pause .lbl{display:none}}
/* the opening line is a plain text link, not the pill button style of .lucky a (it wraps to several lines) */
.lucky a.lucky-open{display:block;min-height:0;padding:0;border-radius:0;background:none;box-shadow:none;font-weight:500;color:inherit;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:3px;flex:1 1 340px;min-width:0;overflow-wrap:anywhere}
.lucky-open:hover{text-decoration-color:#fff}
.foot-local{margin:0;display:flex;flex-wrap:wrap;gap:4px 18px}
.foot-local a{display:inline-flex;align-items:center;min-height:44px}
/* shared footer (dd-footer.css): keep it clear of the fixed bottom dock */
.v4 .ddf{padding-bottom:calc(var(--dock) + 40px + env(safe-area-inset-bottom))}