/* ============ WORK: four chapters, each with its own way of showing films ============ */
#work{position:relative;background:transparent;padding:8vh 0 4vh;overflow:hidden}
.chapter{position:relative;padding:7vh 0 6vh}
.chapter::before{content:"";position:absolute;left:50%;top:0;width:min(1280px,calc(100% - 48px));height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(239,225,198,.14),transparent)}
.chapter:first-child::before{display:none}

/* chapter title: words sit soft until a camera focus box travels to each and snaps it sharp */
.ch-head{width:min(1280px,calc(100% - 48px));margin:0 auto 4vh;display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:10px 28px}
.ch-num{font:400 13px/1 Mono;letter-spacing:.2em;color:var(--accent);padding-bottom:1.1em}
.ch-head h2{position:relative;margin:0;font:400 clamp(48px,7.4vw,120px)/.9 Anton;letter-spacing:.005em;white-space:nowrap}
.ch-head h2 span{display:inline-block;filter:blur(9px);opacity:.55;transition:filter .45s var(--ease),opacity .45s;cursor:default;
  background:linear-gradient(180deg,#FFF6E4,#EFE1C6 40%,#C9B38C);-webkit-background-clip:text;background-clip:text;color:transparent}
.ch-head h2 span.sharp{filter:none;opacity:1}
.fbox2{position:absolute;left:0;top:0;width:0;height:0;border:2px solid var(--accent);box-shadow:0 0 16px rgba(224,102,31,.5);opacity:0;pointer-events:none;
  transition:left .5s var(--ease),top .5s var(--ease),width .5s var(--ease),height .5s var(--ease),opacity .4s}
.fbox2::before,.fbox2::after{content:"";position:absolute;width:10px;height:10px;border:2px solid #fff}
.fbox2::before{left:-7px;top:-7px;border-right:0;border-bottom:0}.fbox2::after{right:-7px;bottom:-7px;border-left:0;border-top:0}
.ch-head p{margin:0;justify-self:end;text-align:right;font:600 15px/1.4 SG;opacity:.75;max-width:320px;padding-bottom:.9em}
.ch-head p em{display:block;font:400 11px/1 Mono;font-style:normal;letter-spacing:.2em;color:var(--accent);margin-top:8px}

/* ---- glass plate: every film sits in a thick glossy slab whose frosted edge carries the film's own colours ---- */
.plate{position:relative;isolation:isolate;border-radius:24px;
  background:linear-gradient(145deg,rgba(255,255,255,.26),rgba(255,255,255,.06) 36%,rgba(255,255,255,.03) 64%,rgba(255,214,180,.16));
  /* crisp top edge, bevel, a sliver of slab thickness below, and a glow in the film's colour */
  box-shadow:inset 0 2px 0 rgba(255,255,255,.78),inset 0 0 0 1px rgba(255,255,255,.24),inset 0 -2px 0 rgba(255,255,255,.14),inset 2px 0 0 rgba(255,255,255,.18),
    0 7px 0 -2px rgba(255,236,214,.10),0 8px 0 -2px rgba(0,0,0,.6),0 0 46px -6px rgba(255,170,110,.22),0 40px 90px rgba(0,0,0,.72)}
.pl-frost{position:absolute;inset:0;border-radius:inherit;background:#1a1411 center/cover no-repeat;z-index:-1;opacity:.72}
/* rim light: a gradient border, brightest top-left and bottom-right, like light catching the edges of a glass slab */
.plate::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.6px;z-index:5;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,255,255,.22) 22%,rgba(255,255,255,.06) 50%,rgba(255,226,196,.18) 78%,rgba(255,200,150,.75));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.pl-frost::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(160deg,rgba(255,255,255,.34),rgba(255,255,255,.08) 28%,rgba(10,8,7,.12) 58%,rgba(10,8,7,.32))}
.pl-media{position:absolute;inset:var(--gap,14px);border-radius:calc(24px - var(--gap,14px) + 4px);background:#000 center/cover no-repeat;overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.75),0 0 0 2.5px rgba(255,255,255,.16),0 8px 22px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.08)}
/* the picture sits behind glass: a soft curved reflection on top and a diagonal gloss streak */
.pl-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(130% 55% at 50% -22%,rgba(255,255,255,.2),rgba(255,255,255,0) 62%),linear-gradient(118deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 16%,rgba(255,255,255,0) 30%,rgba(255,255,255,0) 72%,rgba(255,255,255,.06) 100%)}
.pl-shine{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:4;mix-blend-mode:screen;
  background:linear-gradient(105deg,transparent 38%,rgba(255,244,230,.22) 48%,rgba(255,255,255,.34) 50%,rgba(255,244,230,.22) 52%,transparent 62%) no-repeat;
  background-size:260% 100%;background-position:130% 0;transition:background-position 1.1s var(--ease)}
.plate.on .pl-shine,.plate:hover .pl-shine{background-position:-30% 0}
.plate>.inplay{inset:var(--gap,14px);border-radius:calc(24px - var(--gap,14px) + 4px)}

/* ambient glow: the chapter is lit by the colours of the film in front */
.amb{position:absolute;left:50%;top:50%;width:min(1200px,96vw);height:120%;transform:translate(-50%,-50%);pointer-events:none;z-index:0;filter:blur(40px) saturate(1.3)}
.amb i{position:absolute;inset:0;background:center/cover no-repeat;opacity:0;transition:opacity 1.2s;border-radius:50%;
  -webkit-mask:radial-gradient(closest-side,#000 30%,transparent);mask:radial-gradient(closest-side,#000 30%,transparent)}
.amb i.on{opacity:.55}
.floor-gloss{position:absolute;left:50%;bottom:-6%;width:min(1100px,92vw);height:28%;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(50% 60% at 50% 0%,rgba(255,226,196,.10),transparent 70%);border-top:1px solid rgba(255,236,214,.12);
  -webkit-mask:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);mask:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent)}

/* glowing play button: a glass disc with a warm ring of light orbiting it (steadies on hover) */
.gring{position:absolute;left:50%;top:50%;width:78px;height:78px;margin:-39px 0 0 -39px;border-radius:50%;border:0;padding:0;cursor:pointer;background:none;z-index:3;
  transition:transform .35s var(--ease),opacity .3s}
.gring::before{content:"";position:absolute;inset:-3px;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 52%,rgba(224,102,31,.2) 62%,#E0661F 78%,#FFD6A0 90%,transparent 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));
  filter:drop-shadow(0 0 6px rgba(255,160,90,.9));animation:orbit 2.4s linear infinite}
.gring::after{content:"";position:absolute;inset:-14px;border-radius:50%;background:radial-gradient(closest-side,rgba(224,102,31,.28),rgba(224,102,31,0));z-index:-1}
.gring-disc{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.26),rgba(255,255,255,.06) 55%,rgba(20,16,13,.35));
  backdrop-filter:blur(10px) saturate(1.3);-webkit-backdrop-filter:blur(10px) saturate(1.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 0 0 1px rgba(255,255,255,.14),0 10px 30px rgba(0,0,0,.45)}
.gring svg{width:20px;height:22px;margin-left:4px;fill:#FFF3E2;filter:drop-shadow(0 0 6px rgba(255,200,150,.6))}
.gring:hover{transform:scale(1.08)}
.gring:hover::before{animation-play-state:paused;background:conic-gradient(#E0661F,#FFD6A0,#E0661F,#FFB070,#E0661F);filter:drop-shadow(0 0 10px rgba(255,160,90,1))}
@keyframes orbit{to{transform:rotate(360deg)}}

/* inline player: the video plays where the thumbnail was */
.inplay{position:absolute;inset:0;z-index:6;background:#000;border-radius:inherit;overflow:hidden;animation:inplay .35s var(--ease)}
.inplay iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.inplay .x{position:absolute;right:10px;top:10px;z-index:2;width:38px;height:38px;border-radius:50%;cursor:pointer;color:#fff;font:600 15px/1 SG;display:grid;place-items:center}
@keyframes inplay{from{opacity:0;transform:scale(.97)}}
.playing .gring{opacity:0;pointer-events:none}

/* ---- 01 AD FILMS: depth carousel — the sides turn edge-on and dissolve into frosted glass ---- */
.depth{position:relative;height:clamp(260px,30vw,460px);perspective:1500px;perspective-origin:50% 45%;user-select:none;touch-action:pan-y}
/* the stage is a plane inside the 3D scene: a tilted card dips behind it, so only the cards take clicks */
.dstage{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.dcard{pointer-events:auto}
.dwrap{position:relative}
.depth{z-index:1}
.dcard{position:absolute;left:50%;top:50%;width:min(50vw,720px);aspect-ratio:16/9;cursor:pointer;--gap:15px;will-change:transform}
.dfrost{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:5;opacity:var(--frost,0);
  background:linear-gradient(115deg,rgba(255,244,230,.34),rgba(255,236,214,.14) 45%,rgba(20,16,13,.55));box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.dcard .gring{opacity:0;pointer-events:none;transform:scale(.8)}
.dcard.on .gring{opacity:1;pointer-events:auto;transform:none}
.dcard.on{cursor:default}
.dnav{width:min(880px,calc(100% - 48px));margin:3vh auto 0;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px}
.navb{width:52px;height:52px;border-radius:50%;cursor:pointer;color:var(--ink);font:400 26px/1 SG;display:grid;place-items:center;padding:0 0 3px}
.navb:hover{box-shadow:0 0 0 1px rgba(224,102,31,.7),0 0 24px rgba(224,102,31,.35)}
.pinfo{text-align:center;min-height:86px;transition:opacity .25s,transform .25s}
.pinfo.swap{opacity:0;transform:translateY(6px)}
.pinfo h3{margin:10px 0 0;font:800 clamp(22px,2.2vw,34px)/1 BSD;text-transform:uppercase;letter-spacing:.01em}
.pinfo p{margin:6px 0 0;font:600 14px/1.35 SG;opacity:.8}
.pinfo p small{font:400 11px/1.5 Mono;letter-spacing:.06em;opacity:.75;margin-left:8px}
.tape{display:inline-block;font:400 11px/1 Mono;letter-spacing:.16em;color:#fff;padding:6px 9px;border-radius:5px;background:rgba(224,102,31,.88);box-shadow:0 0 18px rgba(224,102,31,.45)}
.dcount{display:block;margin-top:10px;font:400 11px/1 Mono;letter-spacing:.2em;opacity:.5}

/* ---- 02/03 spotlight carousel — slim framed slices; the chosen one opens out and re-crops ---- */
.spot{width:min(1280px,calc(100% - 48px));margin:0 auto}
.rail{display:flex;align-items:center;justify-content:center;height:clamp(260px,30vw,440px)}
.spot{position:relative}
.rail{position:relative;z-index:1}
.sl{position:relative;flex:0 0 var(--cw);height:100%;margin-left:-10px;border-radius:18px;cursor:pointer;--gap:7px;
  transition:flex-basis .7s var(--ease),filter .5s;filter:saturate(.6) brightness(.6)}
.sl .pl-media{border-radius:13px}
.sl:first-child{margin-left:0}
.sl:hover{filter:saturate(.8) brightness(.8)}
.sl.on{flex-basis:var(--ow);filter:none;cursor:default}
.sl .cap{position:absolute;left:7px;right:7px;bottom:7px;border-radius:0 0 13px 13px;z-index:3;padding:60px 22px 18px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.82));
  opacity:0;transform:translateY(10px);transition:opacity .4s .25s,transform .4s .25s;white-space:nowrap}
.sl.on .cap{opacity:1;transform:none}
.sl .cap h3{margin:8px 0 0;font:800 clamp(20px,2vw,30px)/1 BSD;text-transform:uppercase;letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis}
.sl .cap p{margin:5px 0 0;font:600 13px/1.3 SG;opacity:.85;overflow:hidden;text-overflow:ellipsis}
.sl .gring{opacity:0;pointer-events:none}
.sl.on .gring{opacity:1;pointer-events:auto;transition-delay:.3s}
.sl .num{position:absolute;left:50%;bottom:14px;transform:translateX(-50%) rotate(-90deg);transform-origin:center;font:400 10px/1 Mono;letter-spacing:.2em;opacity:.7;transition:opacity .3s}
.sl.on .num{opacity:0}

/* ---- 04 REELS: post carousel — one post, the rest of the album floating either side ---- */
.post{position:relative;height:clamp(640px,84vh,820px);display:grid;place-items:center}
.floater{position:absolute;left:50%;top:50%;width:200px;aspect-ratio:9/16;margin:-178px 0 0 -100px;border-radius:18px;--gap:6px;cursor:pointer;z-index:2;
  will-change:transform,opacity,filter}
.floater .pl-media{border-radius:13px}
.floater{animation:bob 7s ease-in-out infinite;animation-delay:var(--bd,0s)}
@keyframes bob{50%{translate:0 -12px}}
.pbar{position:absolute;left:10px;right:10px;top:9px;display:flex;gap:4px;z-index:5}
.pbar i{flex:1;height:2.5px;border-radius:2px;background:rgba(255,255,255,.28);overflow:hidden}
.pbar b{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;background:#fff;box-shadow:0 0 6px rgba(255,255,255,.7)}
.floater:hover{filter:brightness(1.1)}
.pcard{position:relative;z-index:10;transition:transform .5s var(--ease);width:min(380px,calc(100vw - 48px));border-radius:22px;overflow:hidden;
  background:linear-gradient(180deg,rgba(38,30,24,.72),rgba(18,14,12,.78));backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);
  box-shadow:0 40px 100px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(255,255,255,.1)}
.pglare{position:absolute;inset:0;z-index:20;pointer-events:none;border-radius:inherit;mix-blend-mode:screen;
  background:radial-gradient(45% 30% at var(--gx,25%) var(--gy,0%),rgba(255,255,255,.18),transparent 70%)}
.post .amb{height:80%}
/* the cube turn: the face turning away darkens, with a thin line of light on the edge the two faces share */
.pshade{position:absolute;inset:0;z-index:19;pointer-events:none;border-radius:inherit;opacity:0;background:rgba(4,3,3,.88)}
.pshade::after{content:"";position:absolute;top:0;bottom:0;left:var(--edge,0%);width:3px;margin-left:-1.5px;background:linear-gradient(180deg,rgba(255,236,210,0),rgba(255,236,210,.95) 50%,rgba(255,236,210,0));box-shadow:0 0 18px rgba(255,200,150,.6)}
.pcard.ghost{pointer-events:none;backface-visibility:hidden}
.pcard{backface-visibility:hidden}
.phead{display:flex;align-items:center;gap:10px;padding:12px 14px;font:600 14px/1.1 SG}
.phead img{width:34px;height:34px;border-radius:50%;box-shadow:0 0 0 2px #0b0908,0 0 0 3.5px var(--accent)}
.phead small{display:block;font:400 11px/1.3 SG;opacity:.6;margin-top:2px}
.phead .dots{margin-left:auto;opacity:.6;letter-spacing:2px}
.pmedia{position:relative;aspect-ratio:4/5;background:#000;overflow:hidden;transition:aspect-ratio .4s var(--ease);touch-action:pan-y}
.pmedia.playing{aspect-ratio:9/16}
.pimg{position:absolute;inset:0;background:#000 center/cover no-repeat;transition:opacity .3s}
.pimg.swap{opacity:.2}
.parr{position:absolute;top:50%;width:34px;height:34px;margin-top:-17px;border-radius:50%;cursor:pointer;color:#fff;font:400 20px/1 SG;display:grid;place-items:center;padding:0 0 2px;z-index:4}
.parr.l{left:10px}.parr.r{right:10px}
.pdots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:5px;z-index:4}
.pdots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.45);transition:background .3s,transform .3s}
.pdots i.on{background:var(--accent);transform:scale(1.25)}
.pacts{display:flex;gap:16px;padding:12px 14px 4px}
.pacts svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pacts .sv{margin-left:auto}
.pcap{padding:4px 14px 16px;font:400 13px/1.45 SG;min-height:64px;transition:opacity .25s}
.pcap b{font-weight:600}
.pcap .tape{margin-top:8px;font-size:10px;padding:5px 8px}

.after{position:relative;min-height:70vh;display:grid;place-items:center;background:#060505;font:800 clamp(28px,4vw,60px)/1 BSD;text-transform:uppercase;text-align:center;padding:10vh 24px}
.after small{display:block;font:400 12px/1.6 Mono;letter-spacing:.2em;opacity:.55;margin-top:18px;text-transform:none}

/* ============ liquid-glass pages (menu, send a brief) ============ */
.gpage{position:fixed;inset:0;z-index:60;display:grid;place-items:center;visibility:hidden;opacity:0;transition:opacity .4s,visibility 0s .4s}
.gpage.open{visibility:visible;opacity:1;transition:opacity .4s}
.gpage .veil{position:absolute;inset:0;background:rgba(5,4,4,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.gpanel{position:relative;width:min(760px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:auto;border-radius:28px;padding:34px clamp(22px,4vw,48px) 38px;
  background:linear-gradient(145deg,rgba(255,236,214,.16),rgba(224,102,31,.07) 40%,rgba(20,16,13,.30));
  backdrop-filter:blur(30px) saturate(1.5);-webkit-backdrop-filter:blur(30px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(255,255,255,.06),inset 0 0 0 1px rgba(255,255,255,.12),0 40px 120px rgba(0,0,0,.6);
  transform:translateY(24px) scale(.97);filter:blur(6px);transition:transform .55s var(--ease),filter .55s}
.gpage.open .gpanel{transform:none;filter:none}
.gpanel::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(60% 40% at 18% 0%,rgba(255,255,255,.18),transparent 70%),radial-gradient(50% 50% at 100% 100%,rgba(224,102,31,.18),transparent 70%)}
.gp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.gp-head .brand{font-size:24px}
.dip{position:fixed;inset:0;z-index:9999;background:#050404;opacity:0;pointer-events:none;transition:opacity .28s ease}
.dip.on{opacity:1}
.gp-close{width:46px;height:46px;border-radius:50%;cursor:pointer;color:var(--ink);font:400 20px/1 SG;display:grid;place-items:center}
.gp-links a{display:flex;align-items:baseline;justify-content:space-between;padding:14px 4px;border-bottom:1px solid rgba(255,255,255,.1);color:var(--ink);text-decoration:none;
  font:400 clamp(34px,6vw,64px)/1 Anton;letter-spacing:.01em;transition:color .25s,padding .25s}
.gp-links a small{font:400 11px/1 Mono;letter-spacing:.2em;opacity:.5}
.gp-links a:hover{color:#FFB27A;padding-left:14px}
.gp-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.gp-form h2{grid-column:1/-1;margin:0 0 6px;font:400 clamp(40px,6vw,64px)/.95 Anton}
.gp-form label{display:grid;gap:7px;font:400 11px/1 Mono;letter-spacing:.16em;opacity:.85}
.gp-form label.full{grid-column:1/-1}
.gp-form input,.gp-form select,.gp-form textarea{font:600 15px/1.3 SG;color:var(--ink);padding:14px 16px;border-radius:14px;border:0;outline:0;
  background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:box-shadow .25s}
.gp-form select option{background:#1a1511}
.gp-form input:focus,.gp-form select:focus,.gp-form textarea:focus{box-shadow:inset 0 0 0 1px rgba(224,102,31,.8),0 0 20px rgba(224,102,31,.25)}
.gp-form textarea{min-height:110px;resize:vertical}
.gp-form .note{grid-column:1/-1;font:400 12px/1.5 SG;opacity:.6}

/* glowing pill button: icon disc with an orbiting warm ring */
.gpill{position:relative;grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:14px;padding:8px 26px 8px 8px;border-radius:999px;border:0;cursor:pointer;
  color:var(--ink);font:600 15px/1 SG;letter-spacing:.12em;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px rgba(255,255,255,.14),0 10px 30px rgba(0,0,0,.35)}
.gpill .gring{position:relative;left:auto;top:auto;margin:0;width:46px;height:46px}
.gpill .gring svg{width:16px;height:16px;margin-left:0}
.gpill:hover .gring::before{animation-play-state:paused;background:conic-gradient(#E0661F,#FFD6A0,#E0661F,#FFB070,#E0661F)}

@media (max-width:720px){
  .ch-head{grid-template-columns:1fr;gap:8px}
  .ch-head p{justify-self:start;text-align:left;padding:0}
  .ch-num{padding:0}
  .depth{height:62vw}
  .dcard{width:78vw;border-radius:10px}
  .dnav{gap:12px}.navb{width:44px;height:44px}
  .gring{width:62px;height:62px;margin:-31px 0 0 -31px}
  .rail{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;height:auto;gap:12px;padding:0 24px;scrollbar-width:none}
  .rail::-webkit-scrollbar{display:none}
  .spot{width:100%}
  .sl,.sl.on{flex:0 0 82vw;aspect-ratio:16/9;height:auto;margin-left:0;scroll-snap-align:center;filter:none}
  .sl .cap{opacity:1;transform:none;padding:40px 14px 12px}
  .sl .gring{opacity:1;pointer-events:auto}
  .sl .num{display:none}
  .post{height:auto;padding:4vh 0}
  .post .pcard{width:min(380px,80vw)}
  .floater{width:120px;margin:-107px 0 0 -60px}
  .gp-form{grid-template-columns:1fr}
}

/* sections off screen: their looping animations pause (bg.js) */
.offscreen,.offscreen *,.offscreen *::before,.offscreen *::after{animation-play-state:paused!important}

/* ---- backdrops behind the chapters (bg.js, ?bg=a|b|c) ---- */
#work{overflow:clip}
.wdust{position:sticky;top:0;display:block;width:100%;height:100vh;margin-bottom:-100vh;z-index:0;pointer-events:none}
/* a / c: an LED wall: the film's colour glow seen through a grid of pixels */
.bg-a .amb i.on,.bg-c .amb i.on{opacity:1}
.bg-a .amb,.bg-c .amb{filter:blur(34px) saturate(1.6) brightness(1.25)}
.dwrap>.dnav,.ch-head{position:relative;z-index:2}
.led{position:absolute;left:50%;top:50%;width:min(1240px,100vw);height:124%;transform:translate(-50%,-50%);pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(7,6,6,0) 0 1.25px,rgba(7,6,6,.68) 1.85px) 0 0/5px 5px;
  -webkit-mask:linear-gradient(transparent,#000 12%,#000 78%,transparent);mask:linear-gradient(transparent,#000 12%,#000 78%,transparent)}
.led{overflow:hidden}
.led::after{content:"";position:absolute;left:0;right:0;top:0;height:100%;background:linear-gradient(180deg,transparent 0,rgba(255,240,220,.05) 49%,rgba(255,240,220,.1) 50%,transparent 51%);animation:ledscan 7s linear infinite}
@keyframes ledscan{from{transform:translateY(-100%)}to{transform:translateY(200%)}}
/* the studio floor: a perspective grid with a line of light sweeping toward you */
.wfloor{position:absolute;left:-20%;right:-20%;bottom:0;height:42%;pointer-events:none;z-index:0;transform:perspective(520px) rotateX(64deg);transform-origin:50% 100%;
  background:linear-gradient(90deg,rgba(239,225,198,.16) 1px,transparent 1px) 50% 0/70px 70px,linear-gradient(rgba(239,225,198,.16) 1px,transparent 1px) 0 0/70px 70px;
  -webkit-mask:linear-gradient(transparent,#000 45%,#000 75%,transparent);mask:linear-gradient(transparent,#000 45%,#000 75%,transparent)}
.wfloor::after{content:"";position:absolute;left:0;right:0;top:-12px;height:100%;background:linear-gradient(90deg,transparent,rgba(224,102,31,.8),transparent) 0 11px/100% 2px no-repeat,linear-gradient(90deg,transparent,rgba(224,102,31,.35),transparent) 0 0/100% 24px no-repeat;-webkit-mask:linear-gradient(transparent,#000 5px,#000 19px,transparent 24px) 0 0/100% 24px no-repeat;mask:linear-gradient(transparent,#000 5px,#000 19px,transparent 24px) 0 0/100% 24px no-repeat;animation:floorscan 5.5s cubic-bezier(.5,0,.8,1) infinite}
@keyframes floorscan{from{transform:translateY(0);opacity:0}15%{opacity:1}to{transform:translateY(100%);opacity:.2}}
/* viewfinder corners around each chapter, with its stage readout and a running timecode */
.whud{position:absolute;left:max(14px,calc(50% - 690px));right:max(14px,calc(50% - 690px));top:3vh;bottom:2.2vh;pointer-events:none;z-index:0;font:400 10px/1 Mono;letter-spacing:.18em;color:rgba(239,225,198,.42)}
.whud .c{position:absolute;width:22px;height:22px;border:1.5px solid rgba(239,225,198,.32)}
.whud .tl{left:0;top:0;border-right:0;border-bottom:0}.whud .tr{right:0;top:0;border-left:0;border-bottom:0}
.whud .bl{left:0;bottom:0;border-right:0;border-top:0}.whud .br{right:0;bottom:0;border-left:0;border-top:0}
.whud .m1{position:absolute;right:34px;top:6px}
.whud .m2{position:absolute;right:34px;bottom:6px}
.whud .m2 b{display:inline-block;width:6px;height:6px;border-radius:50%;background:#FF3B2F;box-shadow:0 0 8px #FF3B2F;margin-right:9px;animation:blink 1.2s steps(1) infinite}
.whud .m2 em{font-style:normal;margin-left:9px;color:rgba(239,225,198,.7)}
/* b: fluted glass: the film's colours glowing through vertical reeds */
.bg-b .amb i.on{opacity:.95}
.flute{position:absolute;left:50%;top:50%;width:min(1320px,100vw);height:126%;transform:translate(-50%,-50%);pointer-events:none;z-index:0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.09) 0,rgba(255,255,255,.015) 4px,rgba(0,0,0,.34) 15px,rgba(255,255,255,.06) 19px);
  -webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
/* c: an amber hologram of the yak beside the chapter, projected up from a glowing base */
.holo{position:absolute;right:clamp(300px,27vw,440px);bottom:-1.5vh;height:clamp(180px,28vh,300px);aspect-ratio:606/1000;pointer-events:none;z-index:0;animation:holo 7s infinite}
.holo.flip .fig{transform:scaleX(-1)}
.holo .fig{position:absolute;inset:0;opacity:.62;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.holo img{width:100%;height:100%;object-fit:contain;display:block;filter:grayscale(1) sepia(1) saturate(2.6) hue-rotate(-10deg) brightness(1.55) contrast(1.15);
  -webkit-mask:repeating-linear-gradient(#000 0 2px,rgba(0,0,0,.35) 2px 4px);mask:repeating-linear-gradient(#000 0 2px,rgba(0,0,0,.35) 2px 4px)}
.holo .scan{position:absolute;left:0;right:0;height:22%;top:-25%;background:linear-gradient(180deg,transparent,rgba(255,210,160,.55) 50%,transparent);mix-blend-mode:screen;animation:holoscan 4.5s linear infinite}
.holo .base{position:absolute;left:-12%;right:-12%;bottom:-3%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,170,100,.55),rgba(255,140,70,.18) 60%,transparent);box-shadow:0 0 0 1px rgba(255,190,130,.25) inset}
.holo .beam{position:absolute;left:-6%;right:-6%;top:-4%;bottom:0;background:linear-gradient(0deg,rgba(255,160,90,.2),rgba(255,160,90,.03) 70%,transparent);clip-path:polygon(22% 0,78% 0,100% 100%,0 100%);filter:blur(6px)}
@keyframes holoscan{to{top:105%}}
@keyframes holo{0%,46%,52%,100%{opacity:1;transform:none}47%{opacity:.45;transform:translateX(3px)}48%{opacity:1;transform:translateX(-2px)}50%{opacity:.8}}
@media (max-width:720px){.whud .m1{display:none}.holo{right:4px;bottom:auto;top:-6px;height:118px}.wfloor{height:30%}}

/* everything after the hero stands on one stage: its ground, the dust and the floor run under every section */
.stageall{position:relative;overflow-x:clip;background:linear-gradient(#050404,#0A0807 4%,#080706)}

/* ---- phones and tablets: the same look, a fraction of the memory ----
   iOS keeps a separate picture of every layer at 3x the pixels, and frosted glass needs one more: a copy of everything behind it.
   The glass play discs on every film, the scan running on every LED wall and the screen-blended gloss on every plate added up past
   what Instagram's built-in browser allows, and iOS closed the page (it reloads, then closes again). On touch screens they turn
   into near-identical flat versions: no blur behind, no blending, the LED walls hold still. */
@media (hover:none),(max-width:720px){
  .gring-disc{-webkit-backdrop-filter:none;backdrop-filter:none;background:radial-gradient(circle at 35% 28%,rgba(236,196,168,.9),rgba(184,124,90,.9) 52%,rgba(104,64,44,.94))}
  .dcard:not(.on) .gring::before{animation:none}
  .pcard{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(180deg,rgba(34,27,22,.93),rgba(16,13,11,.95))}
  .navb.glass,.parr.glass,.inplay .x.glass,nav .glass{-webkit-backdrop-filter:none;backdrop-filter:none}
  .navb.glass,.parr.glass,.inplay .x.glass{background:rgba(30,25,21,.78)}
  .pl-shine,.pglare{mix-blend-mode:normal}
  .led::after{content:none}
  .floater{will-change:auto}
}