/* BLACK PEARL v8: a class memory log, rebuilt around three references Nishal picked:
   Axel Vanhessche (giant word + loose photos), Codrops Sticky Grid Scroll (the day), Codrops 3D Gradient Carousel (everything).
   Light warm ground, borderless photos, small uppercase meta text, the footer exactly as v7. */
@font-face{font-family:"Anton";src:url(../fonts/anton-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Bricolage";src:url(../fonts/bricolage-grotesque-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Bricolage";src:url(../fonts/bricolage-grotesque-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
:root{--bg:#f4efe7;--bg2:#ebe4d9;--ink:#1d1a17;--mute:#7b7168;--line:rgba(29,26,23,.13);--r:#d9332d;--y:#f0bf2a;--rad:4px;
  --pad:clamp(18px,4vw,72px);--hp:clamp(16px,1.7vw,28px);--disp:"Anton",Impact,"Arial Narrow",sans-serif;--ui:"Bricolage",system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html.lock,html.lock body{overflow:hidden}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--ui);overflow-x:clip;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--r);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--ink);color:var(--bg);padding:8px 12px;border-radius:6px}
.skip:focus{left:8px}
.kicker{margin:0 0 10px;font:600 13px/1.2 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);display:flex;align-items:center;gap:10px}
.kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--r);flex:none}
.title{margin:0;font:600 clamp(36px,4.6vw,68px)/1.02 var(--ui);letter-spacing:-.025em}
.sec-sub{margin:14px 0 0;color:var(--mute);max-width:44ch}
.sec-head{padding:clamp(72px,10vw,150px) var(--pad) clamp(28px,3.4vw,52px)}

/* small uppercase info blocks, the way Axel sets his */
.meta{margin:0;font:400 11.5px/1.32 var(--ui);letter-spacing:.03em;text-transform:uppercase;color:var(--ink)}
.ul{font:inherit;letter-spacing:inherit;text-transform:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(29,26,23,.35)}
.ul:hover{text-decoration-color:currentColor}
.big{margin:0;font:400 clamp(64px,13.4vw,236px)/.8 var(--disp);text-transform:uppercase;letter-spacing:-.005em}

/* preloader: the logo turns once on paper, then fades */
.pre{position:fixed;inset:0;z-index:90;background:var(--bg);display:grid;place-items:center;animation:pre-out .01s linear 1.6s forwards}
.seen .pre{display:none}
@keyframes pre-out{to{visibility:hidden}}
.sticker{display:grid;place-items:center;aspect-ratio:1}
.sticker svg{grid-area:1/1;width:100%;height:100%}
.sticker text{font:600 12.5px var(--ui);fill:var(--ink);letter-spacing:.16em}
.sticker img{grid-area:1/1;width:54%;height:auto;border-radius:50%}
.sticker--pre{width:min(40vw,180px)}

/* ---------- hero (ref: Axel Vanhessche) ---------- */
.hero{position:relative;height:max(100svh,58vw);min-height:600px;overflow:clip;--wt:4.4vw}
.hero .meta{position:absolute;z-index:3}
.hm1{left:var(--hp);top:22px}
.hm2{left:27vw;top:22px}
.home{left:52vw;top:22px;text-decoration-color:rgba(29,26,23,.35)}
.home:hover{text-decoration-color:currentColor}
.nav{right:var(--hp);top:22px;display:flex;gap:0}
.nav a{text-decoration:none;color:var(--mute);transition:color .2s}
.nav a:first-child{color:var(--ink)}
.nav a+a::before{content:", ";color:var(--mute)}
.nav a:hover{color:var(--ink)}
.word{position:absolute;z-index:1;left:var(--hp);right:var(--hp);top:var(--wt);margin:0;display:flex;justify-content:space-between;
  font:400 calc((100vw - 2 * var(--hp)) / var(--wfit, 4.79))/.86 var(--disp);text-transform:uppercase;white-space:nowrap;color:var(--ink)}
.word__ln{display:block;overflow:clip;padding-top:.04em}
.word__ln>i{display:inline-block;font-style:normal;will-change:transform}
.hp{position:absolute;z-index:4;display:block;width:var(--w);left:var(--l);top:var(--t);aspect-ratio:3/4;padding:0;will-change:transform}
.hp__in{display:block;width:100%;height:100%;overflow:hidden;background:var(--bg2)}
.hp img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.hp:hover img{transform:scale(1.035)}
.hp1{--l:68.5vw;--t:21.6vw;--w:22vw}
.hp2{--l:var(--hp);--t:26vw;--w:13vw}
.hp3{--l:33vw;--t:31vw;--w:16vw}
.hp4{--l:46.6vw;--t:16.6vw;--w:9vw}
.hp5{--l:56vw;--t:38.5vw;--w:10vw}
.hm3{left:calc(var(--hp) + 14.6vw);top:27.2vw}
.hm4{left:calc(var(--hp) + 14.6vw);top:calc(27.2vw + 44px)}
.hm5{right:var(--hp);bottom:22px;color:var(--mute)}

/* ---------- the day (ref: Codrops Sticky Grid Scroll) ---------- */
.dhead{position:relative;padding:clamp(80px,10vw,170px) var(--hp) clamp(40px,5vw,80px);display:grid;grid-template-columns:auto 1fr 1fr 1fr;column-gap:3vw;align-items:end}
.dhead .big{grid-row:1/span 3;margin-right:2vw}
.dm1{grid-column:2}
.dm2{grid-column:3}
.dm3{grid-column:4;justify-self:end}
.scene{position:relative;height:330vh}
.scene__stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;contain:paint}
.scene__label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none;z-index:0}
.scene__label .meta{color:var(--mute)}
.scene__name{margin:10px 0 12px;font:400 clamp(44px,5.6vw,92px)/.92 var(--disp);text-transform:uppercase}
.scene__blurb{margin:0;max-width:28ch;font:400 16px/1.4 var(--ui);color:#4d4540}
.grid{position:absolute;left:50%;top:50%;width:min(51vw,calc(100svh * .78));margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);column-gap:2.2%;row-gap:calc(min(51vw,calc(100svh * .78)) * .054);transform:translate(-50%,-50%);z-index:1}
.grid--2{width:min(64vw,calc(100svh * 1.2))}
.cell{position:relative;aspect-ratio:1;will-change:transform}
.cell>button{display:block;width:100%;height:100%;overflow:hidden;background:var(--bg2)}
.cell img{width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.cell--clip>button::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(20,18,16,.38) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%23fff'/%3E%3C/svg%3E") center/22px no-repeat}
.scene__foot{position:absolute;left:var(--hp);right:var(--hp);bottom:20px;display:flex;justify-content:space-between;z-index:2;pointer-events:none}
.scene__foot .meta{color:var(--mute)}
.scene__top{position:absolute;left:var(--hp);right:var(--hp);top:20px;display:flex;justify-content:space-between;z-index:2}
.scene__top .meta{color:var(--mute)}
.scene__top a{pointer-events:auto;text-decoration:none}
.scene__top a:hover{color:var(--ink)}

/* section heads after the hero's voice: a big word and small info blocks */
.shead{padding:clamp(80px,9vw,150px) var(--hp) clamp(30px,3.4vw,52px);display:grid;grid-template-columns:auto 1fr 1fr;column-gap:3vw;align-items:end}
.big--sec{font-size:clamp(56px,8.4vw,150px);grid-row:1/span 2;margin-right:1vw}
.sm1{grid-column:2}
.sm2{grid-column:3;max-width:34ch}
.clips .shead .meta{color:#b3a99e}
.mn-m{margin-top:16px;color:var(--mute)}
.dm2{max-width:34ch}
/* ---------- everything (ref: Codrops Infinite Gradient 3D Carousel) ---------- */
.ring{position:relative;height:100vh;height:100svh;min-height:640px;overflow:hidden;background:#f6f1ea;color:var(--ink)}
.ring__bg{position:absolute;inset:0;width:100%;height:100%;display:block}
.ring__head{position:absolute;z-index:3;left:var(--hp);right:var(--hp);top:22px;display:grid;grid-template-columns:auto 1fr auto;column-gap:3vw;align-items:start}
.big--ring{font-size:clamp(44px,6.4vw,110px)}
.rm1{padding-top:4px}
.rm1__how{color:rgba(29,26,23,.62)}
.parts{display:flex;flex-wrap:wrap;justify-content:flex-end;max-width:46vw;padding-top:4px}
.parts button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:rgba(29,26,23,.55);padding:2px 0;transition:color .25s}
.parts button+button::before{content:", ";color:rgba(29,26,23,.55)}
.parts button:hover,.parts button[aria-current=true]{color:var(--ink)}
.ring__stage{position:absolute;inset:0;z-index:2;perspective:1800px;perspective-origin:50% 50%;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none}
.ring__stage.grab{cursor:grabbing}
.ring__stage:focus-visible .card.front{outline:2px solid var(--ink);outline-offset:6px}
.ring__cards{position:absolute;left:50%;top:52%;transform-style:preserve-3d}
.card{position:absolute;left:0;top:0;width:var(--cw);aspect-ratio:3/4;margin-left:calc(var(--cw) / -2);border-radius:14px;overflow:hidden;background:rgba(255,255,255,.35);
  backface-visibility:hidden;will-change:transform;visibility:hidden;box-shadow:0 40px 60px -40px rgba(40,25,15,.35)}
.card.on{visibility:visible}
.card img{width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.ring{--cw:clamp(220px,23vw,360px)}
.ring__foot{position:absolute;z-index:3;left:var(--hp);right:var(--hp);bottom:22px;display:grid;grid-template-columns:1fr auto 1fr;align-items:end}
.rf2{font-variant-numeric:tabular-nums;color:rgba(29,26,23,.62)}
.rf3{justify-self:end;display:flex;gap:8px}
.rbtn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.42);color:var(--ink);transition:background .2s}
.rbtn:hover{background:rgba(255,255,255,.75)}
/* reduced motion: a flat grid instead of the ring */
.flat{position:relative;z-index:2;padding:150px var(--hp) 60px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.flat button{aspect-ratio:3/4;overflow:hidden;border-radius:6px;background:var(--bg2)}
.flat img{width:100%;height:100%;object-fit:cover}
.flat h3{grid-column:1/-1;margin:18px 0 0;font:400 11.5px/1.3 var(--ui);letter-spacing:.03em;text-transform:uppercase;scroll-margin-top:20px}
.ring--flat{height:auto;min-height:0}
.ring--flat .ring__stage,.ring--flat .ring__foot,.ring--flat .rm1__how{display:none}

/* clips */
.clips{background:var(--ink);color:var(--bg);padding-bottom:clamp(60px,8vw,120px);position:relative}
.clips .kicker,.clips .sec-sub{color:#b3a99e}
.reel{display:flex;gap:clamp(14px,1.8vw,26px);overflow-x:auto;scroll-snap-type:x mandatory;padding:4px var(--pad) 10px;scrollbar-width:none;scroll-padding:0 var(--pad)}
.reel::-webkit-scrollbar{display:none}
.clip{flex:none;scroll-snap-align:start;width:calc(min(74vh,720px) * 9 / 16);margin:0}
.clip__box{position:relative;width:100%;aspect-ratio:9/16;background:#2a2623;border-radius:6px;overflow:hidden}
.clip video{width:100%;height:100%;object-fit:cover;display:block}
.ic{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(20,18,16,.42);color:#fff;transition:background .2s}
.ic:hover{background:rgba(20,18,16,.65)}
.clip__sound{position:absolute;right:12px;bottom:12px}
.clip__sound[aria-pressed=true]{background:var(--r)}
.clip__full{position:absolute;right:12px;top:12px}
.reel__nav{position:absolute;right:var(--pad);top:clamp(72px,10vw,150px);display:flex;gap:10px}
.reel__nav .ic{width:46px;height:46px;background:transparent;box-shadow:inset 0 0 0 1px rgba(244,239,231,.3)}
.reel__nav .ic:hover{background:rgba(244,239,231,.08)}

/* what we served */
.menu{padding:clamp(72px,10vw,150px) var(--pad);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(30px,6vw,110px);align-items:start}
.menu__list{list-style:none;margin:30px 0 0;padding:0;columns:2;column-gap:48px}
.menu__list li{display:flex;align-items:baseline;gap:10px;break-inside:avoid;padding:10px 0;border-bottom:1px solid var(--line);font:400 17px/1.3 var(--ui)}
.menu__list li::after{content:"";order:1;flex:1}
.menu__list li b{order:2;font-weight:400;color:var(--mute);font-variant-numeric:tabular-nums}
.menu__art{margin:0}
.art{display:block;width:100%;border-radius:var(--rad);overflow:hidden;background:var(--bg2)}
.art img{width:100%;height:auto}
.menu__art--ig{grid-column:1/-1;max-width:560px}

/* ending (kept: the crew, the line, the giant YES2YEA) */
.end{padding:clamp(60px,8vw,120px) 0 34px;text-align:center;overflow:clip;border-top:1px solid var(--line)}
.end__crew{margin:0 auto;width:min(76vw,calc(84vh * .75),1000px)}
.end__line{margin:44px var(--pad) 0;font:400 clamp(24px,3.2vw,50px)/1.1 var(--disp);text-transform:uppercase}
.end__line i{font-style:normal;color:var(--r)}
.end__links{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 28px;margin:20px var(--pad) 0;font:400 15px var(--ui);color:var(--mute)}
.end__links a{text-decoration:none;border-bottom:1px solid var(--line)}
.end__links a:hover{color:var(--ink);border-color:var(--ink)}
.end__giant{margin:clamp(40px,6vw,90px) 0 0;font:400 25.4vw/.78 var(--disp);color:var(--r);letter-spacing:-.01em;white-space:nowrap}
.end__note{max-width:60ch;margin:28px auto 0;padding:0 var(--pad);font:400 14px/1.55 var(--ui);color:var(--mute)}
/* film strips */
.film{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:4px 2px}
.film::-webkit-scrollbar{display:none}
.film button{flex:none;width:54px;height:68px;border-radius:3px;overflow:hidden;opacity:.45;transition:opacity .2s;outline-offset:2px}
.film button img{width:100%;height:100%;object-fit:cover}
.film button[aria-current=true]{opacity:1;outline:2px solid #fff}
.film button:hover{opacity:.9}

/* shared overlay controls */
.act{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:8px;color:#fff;font:400 14px/1 var(--ui);text-decoration:none;white-space:nowrap;background:rgba(255,255,255,.08);transition:background .2s}
.act:hover{background:rgba(255,255,255,.18)}
.act svg{width:17px;height:17px}
.act--sound[aria-pressed=true]{background:var(--r)}
.arrow{position:absolute;z-index:5;top:50%;width:52px;height:52px;margin-top:-26px;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;display:none;place-items:center;transition:background .2s}
.arrow:hover{background:rgba(255,255,255,.18)}
.arrow--l{left:clamp(14px,2vw,32px)}
.arrow--r{right:clamp(14px,2vw,32px)}
.sv__x,.vw__x{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.08);color:#fff}
.sv__x:hover,.vw__x:hover{background:rgba(255,255,255,.18)}

/* stories player */
.sv{position:fixed;inset:0;z-index:60;background:#14110f;color:#fff;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.sv__bd{position:absolute;inset:-10%;width:120%;height:120%;object-fit:cover;filter:blur(48px) saturate(1.1) brightness(.7);opacity:.55}
.sv__top{position:absolute;inset:0 0 auto;z-index:4;padding:12px clamp(12px,3vw,40px) 0;background:linear-gradient(rgba(0,0,0,.42),transparent)}
.sv__bars{display:flex;gap:4px;max-width:1300px;margin:0 auto}
.sv__bars span{flex:1;height:2.5px;border-radius:2px;background:rgba(255,255,255,.28);overflow:hidden}
.sv__bars i{display:block;height:100%;background:#fff;transform:scaleX(0);transform-origin:0 50%}
.sv__bars span.done i{transform:scaleX(1)}
.sv__head{display:flex;align-items:center;gap:12px;max-width:1300px;margin:12px auto 0}
.sv__av{width:36px;height:36px;border-radius:50%;object-fit:cover}
.sv__title{margin:0;display:flex;flex-direction:column;line-height:1.2}
.sv__title b{font:600 16px/1.2 var(--ui)}
.sv__title span{font:400 13px var(--ui);color:rgba(255,255,255,.72)}
.sv__count{margin-left:auto;font:400 13px var(--ui);color:rgba(255,255,255,.72);font-variant-numeric:tabular-nums}
.sv__stage{position:absolute;z-index:1;inset:0}
.sv__stage>*{position:absolute;inset:0;margin:auto;max-width:100%;max-height:100%;object-fit:contain;border-radius:3px}
.sv__tap{position:absolute;z-index:3;top:90px;bottom:120px}
.sv__tap--l{left:0;width:30%}
.sv__tap--r{right:0;width:70%}
.sv__foot{position:absolute;z-index:4;left:0;right:0;bottom:0;padding:0 12px calc(16px + env(safe-area-inset-bottom));background:linear-gradient(transparent,rgba(0,0,0,.45))}
.sv__acts{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding-top:30px}
.sv__film{display:none}
.sv__jump{font:400 13px/1.2 var(--ui);color:rgba(255,255,255,.75);max-width:120px;text-align:left}
.sv__jump:hover{color:#fff}
.sv__jump--r{text-align:right}
.sv.paused .sv__bars span.cur i{opacity:.6}

/* photo viewer */
.vw{position:fixed;inset:0;z-index:70;background:#14110f;color:#fff;touch-action:none;user-select:none;-webkit-user-select:none}
.vw__head{position:absolute;z-index:4;inset:0 0 auto;display:flex;align-items:center;gap:10px;padding:14px clamp(12px,3vw,40px)}
.vw__title{margin:0 auto 0 0;display:flex;flex-direction:column;line-height:1.2}
.vw__title b{font:600 16px/1.2 var(--ui)}
.vw__title span{font:400 13px var(--ui);color:rgba(255,255,255,.72)}
.vw__acts{display:flex;align-items:center;gap:8px}
.vw__count{font:400 13px var(--ui);color:rgba(255,255,255,.72);margin-right:6px;font-variant-numeric:tabular-nums}
.vw__stage{position:absolute;inset:74px clamp(10px,7vw,110px) 100px}
.vw__stage img{position:absolute;left:50%;top:50%;transform-origin:50% 50%;border-radius:3px;background:#2a2623;will-change:transform}
.vw__film{position:absolute;left:0;right:0;bottom:16px;justify-content:center;padding:4px 12px}

.toast{position:fixed;left:50%;top:18px;z-index:95;margin:0;transform:translate(-50%,calc(-100% - 90px));background:var(--ink);color:var(--bg);font:400 15px/1 var(--ui);padding:13px 18px;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.18);transition:transform .35s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.toast.on{transform:translate(-50%,0)}

/* desktop */
@media (min-width:900px){
  .sv__stage{top:88px;bottom:112px;left:110px;right:110px}
  .sv__tap{display:none}
  .arrow{display:grid}
  .sv__head .sv__acts{margin-left:auto;padding:0;flex-wrap:nowrap}
  .sv__head .sv__count{margin-left:8px}
  .sv__foot{padding:0 clamp(12px,3vw,40px) 16px;height:108px;display:flex;align-items:flex-end;justify-content:center}
  .sv__film{display:flex;align-items:center;gap:18px;max-width:1300px;width:100%}
  .sv__film .film{flex:1;justify-content:safe center}
}
@media (max-width:899px){
  .sv__acts .act{height:36px;font-size:13px;padding:0 12px}
}
@media (max-width:1100px) and (min-width:761px){
  .dhead{grid-template-columns:auto 1fr 1fr}
  .dm3{grid-column:2/span 2;justify-self:start;margin-top:14px}
}
/* phone */
@media (max-width:760px){
  body{font-size:16px}
  .meta{font-size:11px}
  .hero{height:max(100svh,225vw);min-height:0;--wt:30vw}
  .hm1{top:16px}
  .hm2{left:var(--hp);top:52px}
  .nav{top:16px}
  .home{left:45vw;right:auto;top:52px}
  .nav__x{display:none}
  .word{flex-direction:column;font-size:calc((100vw - 2 * var(--hp)) / var(--wfitm, 2.33));line-height:.84}
  .word__ln+.word__ln{margin-top:.02em}
  .hp1{--l:45vw;--t:100vw;--w:50vw}
  .hp2{--l:var(--hp);--t:106vw;--w:30vw}
  .hp3{--l:52vw;--t:173vw;--w:40vw}
  .hp4{--l:65vw;--t:10vw;--w:22vw}
  .hp5{display:none}
  .hm3{left:var(--hp);top:172vw}
  .hm4{left:var(--hp);top:calc(172vw + 40px)}
  .hm5{right:auto;left:var(--hp)}
  .dhead{grid-template-columns:1fr 1fr;row-gap:16px;padding-top:90px}
  .dhead .big{grid-row:auto;grid-column:1/-1;font-size:27vw;margin:0 0 8px}
  .dm1{grid-column:1}.dm2{grid-column:2}.dm3{grid-column:1/-1;justify-self:start}
  .shead{grid-template-columns:1fr 1fr;row-gap:12px}
  .big--sec{grid-row:auto;grid-column:1/-1;font-size:17vw}
  .sm1{grid-column:1}.sm2{grid-column:2}
  .scene{height:290vh}
  .grid,.grid--2{width:86vw;column-gap:3%;row-gap:calc(86vw * .03)}
  .cell{aspect-ratio:3/4}
  .grid--2 .cell{aspect-ratio:3/4}
  .scene__name{font-size:13vw}
  .scene__blurb{font-size:15px;max-width:22ch}
  .ring{--cw:68vw;min-height:560px}
  .ring__head{grid-template-columns:1fr auto;row-gap:10px}
  .big--ring{font-size:15vw}
  .rm1{text-align:right}
  .parts{grid-column:1/-1;justify-content:flex-start;max-width:none;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--hp) * -1);padding:4px var(--hp)}
  .parts::-webkit-scrollbar{display:none}
  .parts button{flex:none;padding:6px 0}
  .ring__cards{top:53%}
  .rf2{display:none}
  .ring__foot{grid-template-columns:1fr auto}
  .flat{grid-template-columns:repeat(3,1fr);gap:8px;padding-top:170px}
  .clip{width:70vw}
  .reel__nav{display:none}
  .menu{grid-template-columns:1fr}
  .menu__list{columns:1}
  .end__crew{width:calc(100% - 32px)}
  .end__line{font-size:24px;line-height:1.15}
  .vw__acts{position:fixed;left:0;right:0;bottom:92px;justify-content:center}
  .vw__stage{inset:70px 0 146px}
  .vw__film button{width:44px;height:56px}
}
/* reduced motion: nothing pins, nothing spins */
.rm .scene{height:auto;padding:40px 0}
.rm .scene__stick{position:relative;height:auto;overflow:visible;display:flex;flex-direction:column;align-items:center;gap:28px;padding:40px 0}
.rm .scene__label{position:static;order:-1}
.rm .grid{position:static;transform:none}
.rm .scene__foot,.rm .scene__top{position:static;order:-2;width:calc(100% - 2 * var(--hp))}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
.end__giant{pointer-events:none}