/* Plum Autumn Release 2026, from the website handoff (index.html). Asset URLs here are relative to this file. */
/* Plum's licensed faces (public/fonts); Newsreader / Hanken Grotesk stay named as fallbacks in --alpina / --passenger */
@font-face{font-family:"Passenger Sans";src:url("fonts/PassengerSans-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Passenger Sans";src:url("fonts/PassengerSans-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Passenger Sans";src:url("fonts/PassengerSans-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Passenger Sans";src:url("fonts/PassengerSans-Semibold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
/* serifs are GT Alpina Regular at every weight; italics are slanted from it (no Regular Italic cut in the kit) */
@font-face{font-family:"GT Alpina";src:url("fonts/GT-Alpina-Standard-Regular.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

body{margin:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Layout: one long native scroll in two parts. A pinned stage where giant condensed type reveals word by word,
   holds and recedes while a large sheet of paper with a film and a note slides over it, then the paper widens
   into the page. The 11 releases follow as stacked sheets, alternating white and blush, each title shrinking
   into a pinned header. Images are redrawn by a WebGL layer that bends with scroll speed and ripples on click. */
:root{
  --bg:#FFFFFF;
  --pink:#FCF2F8;
  --ink:#2C0B21;
  --ink-2:#2C0B21;
  --ghost:#D4D3CB;
  --pill:#F4E48C;
  --plum:#5B2A6E;
  --paper:#FFFFFF;
  --t-rust:#B4532A; --t-ochre:#C9922E; --t-olive:#6E7444; --t-plum:#5B2A6E; --t-wine:#7A2E3A;
  --t-moss:#3F5A45; --t-clay:#A8705A; --t-ink:#2B3242; --t-sand:#B9A27A; --t-fig:#4B3150; --t-brick:#8E3B26;
  /* the site uses only two faces: Passenger Sans and GT Alpina (each with its closest free stand-in) */
  /* brand faces: used where installed; otherwise the closest Google Fonts match loads */
  --passenger:"Passenger Sans","Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --alpina:"GT Alpina","GT Alpina Standard","Newsreader",Georgia,"Times New Roman",serif;
  --display:var(--passenger);
  --body:var(--passenger);
  --serif:var(--alpina);
  --gx:max(18px, env(safe-area-inset-left, 0px));
  --gr:max(18px, env(safe-area-inset-right, 0px));
  --gb:max(14px, env(safe-area-inset-bottom, 0px));
  color-scheme:light;
;letter-spacing:-.02em}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--plum);outline-offset:3px}
.sm{font-size:10px;letter-spacing:.05em;text-transform:uppercase;font-weight:500}

/* ---------- fixed chrome (above the WebGL layer) ---------- */
.logo{position:fixed;top:max(16px,env(safe-area-inset-top,0px));left:var(--gx);z-index:40;display:block;line-height:0;transition:opacity .3s}
.logo img{height:34px;width:auto}
.prog{position:fixed;bottom:calc(var(--gb) + 8px);right:var(--gr);transition:opacity .3s;z-index:40;display:flex;align-items:center;gap:10px;color:#fff;mix-blend-mode:difference}
.prog .dots{display:flex;gap:5px}
.prog .dots i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.3;transition:opacity .3s}
.prog .dots i.on{opacity:1}
.foot{position:fixed;left:var(--gx);bottom:calc(var(--gb) + 6px);z-index:40;color:#fff;mix-blend-mode:difference;display:flex;gap:10px;transition:opacity .3s}
.foot span+span::before{content:"|";margin-right:10px;opacity:.7}
.menu-btn{position:fixed;right:var(--gr);top:max(14px,env(safe-area-inset-top,0px));z-index:96;width:48px;height:34px;border-radius:3px;background:#FF4052;display:grid;place-content:center;gap:6px;transition:transform .3s;box-shadow:0 0 0 1px rgba(255,255,255,.22)}
.menu-btn i{display:block;width:22px;height:1.5px;background:var(--paper)}
.menu-btn:hover{transform:scale(1.06)}
body.menu-open .menu-btn i:first-child{transform:translateY(3.75px) rotate(45deg)}
body.menu-open .menu-btn i:last-child{transform:translateY(-3.75px) rotate(-45deg)}

.gl-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:30;pointer-events:none;opacity:0;transition:opacity .8s ease}
.gl-canvas.on{opacity:1}
body.gl [data-gl]{visibility:hidden}

/* smooth scroll helpers (Lenis) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
/* load curtain */
.curtain{position:fixed;left:0;right:0;top:0;height:100vh;height:100svh;z-index:90;background:var(--ink);color:var(--bg);display:grid;place-items:center;will-change:transform}
.curtain-in{display:flex;flex-direction:column;align-items:center;gap:8px}
.curtain-in img{height:clamp(40px,5vw,64px);width:auto}
.curtain-in i{font-family:var(--serif);font-size:20px;opacity:.75;letter-spacing:-.02em}

/* ---------- part 1: manifesto + paper (pinned stage) ---------- */
/* the track holds only the letter sequence now (the film plays in beats, not on scroll): 100vh + 382vh */
.track{position:relative;height:482vh;isolation:isolate}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.mf{position:absolute;inset:0;will-change:transform}
.mf-a{position:absolute;left:0;right:0;top:0;padding:0 var(--gr) 0 var(--gx);will-change:transform}
/* every line is sized in script so it runs from the left edge to the right edge */
.ln{display:block;white-space:nowrap;font-family:var(--alpina);font-weight:400;line-height:.98;text-align:center;letter-spacing:-.02em}
.w{display:inline-block;color:var(--ink);opacity:.14;filter:blur(7px);transform:translateY(.22em) scale(.96);transition:opacity 1s ease,filter 1.1s cubic-bezier(.2,.7,.1,1),transform 1.1s cubic-bezier(.16,1,.3,1)}
.w.on{opacity:1;filter:none;transform:none}
/* highlighter behind "Plum Autumn Release.": sweeps in left to right once the words reveal */
.w.hl{position:relative;isolation:isolate;transition:opacity 1s ease,filter 1.1s cubic-bezier(.2,.7,.1,1),transform 1.1s cubic-bezier(.16,1,.3,1),color .5s ease calc(.55s + var(--d) * .22s)}
.w.hl::before{content:"";position:absolute;z-index:-1;left:-.08em;right:-.34em;top:-.04em;bottom:-.16em;background:#FF4052;border-radius:.06em;transform:scaleX(0);transform-origin:left center;transition:transform .7s cubic-bezier(.65,0,.25,1) calc(.45s + var(--d) * .22s)}
.w.hl.hl-last::before{right:-.08em}
.w.hl.on{color:#fff}
.w.hl.on::before{transform:scaleX(1)}
.hc{display:inline-block}
.mf-a.wave .hc{animation:wave .8s cubic-bezier(.3,0,.2,1) calc(var(--i) * 28ms)}
@keyframes wave{35%{transform:translateY(-.14em) rotate(-4deg)}70%{transform:translateY(.03em)}}
@media (prefers-reduced-motion:reduce){.mf-a.wave .hc{animation:none}}
.stage-dim{position:absolute;inset:0;z-index:2;background:#000;opacity:0;pointer-events:none}
.hint{position:absolute;left:50%;bottom:calc(var(--gb) + 14px);translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:6px;transition:opacity .4s}
.hint b{width:1px;height:34px;background:var(--ink);transform-origin:top;animation:drip 1.6s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

.paper{position:absolute;left:50%;top:0;z-index:3;background:var(--paper);box-shadow:0 60px 120px -50px rgba(20,10,25,.45);padding:clamp(56px,8vw,150px) clamp(22px,7vw,140px) clamp(56px,7vw,130px);will-change:transform;transform:translate3d(-50%,110vh,0)}
.paper-in{display:flex;flex-direction:column;align-items:center;gap:clamp(48px,6vw,110px)}
.p-head{width:100%;display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center}
.p-head .sm{color:var(--ink-2)}
.p-hello{margin:0 0 calc(-1 * clamp(6px,.9vw,15px));font-family:var(--alpina);font-weight:400;font-size:clamp(28px,4vw,68px);line-height:1;letter-spacing:-.02em}
.p-film{margin:0;width:100%;display:flex;flex-direction:column;gap:12px}
.p-film figcaption{display:flex;justify-content:space-between;gap:16px;color:var(--ink-2)}
.p-body{width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);gap:24px;border-top:1px solid #E2E0D8;padding-top:26px}
.p-lbl{color:var(--ink-2);padding-top:6px}
.sheet{position:absolute;z-index:4;left:0;top:0;visibility:hidden;display:grid;place-items:center;background:var(--paper)}
.bridge{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;opacity:0}
/* the Autumn Release lettering is a vector cut into thin strips; a wave rolls through them, the strips lift
   toward the cursor, and a click sends a ripple outward */
.ar-wrap{display:block;width:clamp(240px,46%,640px);max-width:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ar-svg{display:block;width:100%;height:auto;overflow:visible;fill:#111}
.bridge .mask{display:block;overflow:hidden;padding-bottom:.08em}
.bridge em{display:block;font-family:var(--alpina);font-style:normal;font-size:clamp(52px,7.6vw,128px);line-height:1;letter-spacing:-.02em}
.bridge-sub{display:flex;flex-direction:column;align-items:center;gap:12px;opacity:0}
.arrow{width:24px;height:86px;margin-top:18px;overflow:visible}
.arrow-line{transform-box:fill-box;transform-origin:top center}
.arrow-star{transform-box:fill-box;transform-origin:center 55%}
.bars{position:absolute;inset:0;z-index:5;display:flex;pointer-events:none;overflow:hidden}
/* each band reaches 2px under its neighbour, so no hairline of the letter shows between two bands */
.bars i{flex:1;height:100%;transform:translate3d(0,100%,0);will-change:transform;margin-right:-2px}
.bars i:last-child{margin-right:0}
.ln .lt{display:inline-block}
.badge{width:64px;height:64px;border-radius:50%;background:var(--plum);color:var(--paper);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-stretch:90%;font-size:15px;letter-spacing:-.02em}
.vid{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:2px}
.vid img,.vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.vid-play{position:absolute;left:50%;top:50%;translate:-50% -50%;width:clamp(64px,7vw,92px);aspect-ratio:1;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:#2C0B21;display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 30px rgba(20,10,25,.25);transition:transform .35s cubic-bezier(.34,1.56,.64,1),background-color .3s}
.vid-play svg{width:42%;margin-left:6%}
.vid-play:hover,.vid-play:focus-visible{transform:scale(1.08);background:#fff}
.vid.playing .vid-play{display:none}
.paper .copy{max-width:62ch;font-family:var(--alpina);font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--ink-2);display:flex;flex-direction:column;gap:18px;letter-spacing:-.02em}
.paper .copy p,.paper .copy h3{margin:0}
.paper .copy .lead{font-weight:400;font-family:var(--serif);font-size:clamp(26px,2.7vw,42px);line-height:1.14;color:var(--ink);margin-bottom:10px;letter-spacing:-.02em}
.sig{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:2px}
.sig b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:36px;line-height:1;letter-spacing:-.02em}

/* ---------- skydive: the film is scrubbed by scroll on the pinned stage, then the paper rises over its last frame ---------- */
/* the opening is filled with the Plum logo's pink */
.curtain{background:#2F8FD8 url("media/opening-first.jpg") center / cover no-repeat;color:#fff;transform-origin:50% 52%}
.op-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:blur(18px);transform:scale(1.08)}
.curtain:not(.live) .curtain-copy span{opacity:0}
.curtain.live .op-vid{filter:none;transform:none}
.curtain::before{z-index:1;content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 45% at 50% 50%,rgba(10,30,20,.38),rgba(10,30,20,0));pointer-events:none}
.curtain-copy{position:relative;z-index:2;text-shadow:0 2px 4px rgba(0,0,0,.45),0 6px 24px rgba(0,0,0,.45),0 12px 60px rgba(8,24,40,.5)}
/* the corner logo turns white while the pink fill is up, then eases back to pink */
.logo-img{transition:filter .9s ease}
/* the logo keeps its pink and the nav box sits above the opening frame */
.curtain ~ .menu-btn{z-index:96}
.curtain-copy{margin:0;display:flex;flex-direction:column;align-items:center;gap:0;max-width:none;padding:0 var(--gr) 0 var(--gx);text-align:center;font-family:var(--alpina);font-weight:400;font-size:clamp(34px,4.6vw,84px);line-height:1.04;text-wrap:balance;letter-spacing:-.02em}
.curtain-copy span{display:block}
.logo{z-index:95}
.mf{background:#2F8FD8 url("media/opening-first.jpg") center / cover no-repeat}
.mf-a{display:none}
#dive{position:absolute;inset:0;width:100%;height:100%;display:block}
/* captions sit at the sides, alternating left and right, so the jumper in the middle stays in view */
.dive-cap{position:absolute;inset:0;z-index:1;display:grid;align-items:center;padding:0 clamp(24px,5vw,80px);pointer-events:none}
.cap{grid-area:1/1;margin:0;justify-self:start;text-align:left;font-family:var(--alpina);font-weight:400;font-size:clamp(34px,4.6vw,84px);line-height:1.04;color:#fff;text-wrap:balance;text-shadow:0 2px 4px rgba(0,0,0,.45),0 6px 24px rgba(0,0,0,.45),0 12px 60px rgba(8,24,40,.5);opacity:0;transform:translateY(18px);filter:blur(6px);transition:opacity .7s ease,transform .9s cubic-bezier(.16,1,.3,1),filter .8s ease;letter-spacing:-.02em}
.cap.on{opacity:1;transform:none;filter:none}
/* opacity and position are driven from the scroll position in diveFrame, so no CSS transitions or blur here */
.cap,.cap.cloud,.cap.cloud.gone{transition:none!important;filter:none!important;will-change:opacity,transform}
.cap.r{justify-self:end;text-align:right}
.cap > span{white-space:nowrap}
/* the opening line sits centred and only fades */
.cap.c{justify-self:center;text-align:center;transform:none;filter:none;transition:opacity 1.2s ease}
/* a firmer, contained drop shadow for the line over the bright sky */
.cap.sh{text-shadow:0 2px 4px rgba(0,0,0,.4),0 6px 22px rgba(0,0,0,.28)}
.cap.cloud{transition:opacity 1.9s ease,transform 2.2s cubic-bezier(.16,1,.3,1),filter 1.9s ease}
.cap.cloud.gone{transform:translateY(-34px) scale(1.06);filter:blur(16px) brightness(1.6);opacity:0}
/* centred near the top of the frame, above the falling figure */
@keyframes wiggle{
  0%,100%{translate:0 0;rotate:0deg}
  25%{translate:.6px -1.4px;rotate:-.35deg}
  50%{translate:-.5px .9px;rotate:.25deg}
  75%{translate:.4px -.7px;rotate:-.18deg}}
.cap > span,.curtain-copy span{animation:wiggle 3.4s ease-in-out infinite;transform-origin:50% 60%;will-change:translate,rotate}
.cap > span:nth-child(2),.curtain-copy span:nth-child(2){animation-delay:-1.2s}
.cap > span:nth-child(3){animation-delay:-2.3s}
@media (prefers-reduced-motion:reduce){.cap > span,.curtain-copy span{animation:none}}
/* low: centred under the diver; ctr: centred in the frame */
.cap.low{align-self:end;justify-self:center;text-align:center;margin-bottom:clamp(70px,12vh,130px)}
.cap.ctr{justify-self:center;text-align:center}
.cap .more{opacity:0;transition:opacity .9s ease}
.cap.more-on .more{opacity:1}
/* the closing line runs as one line across the field; its second half fades in where it will stand */
.cap.line{font-size:clamp(26px,3.3vw,60px)}
.cap.line em{font-style:normal}
.cap.top{align-self:start;justify-self:center;text-align:center;margin-top:clamp(84px,14vh,150px)}
.cap.mid{justify-self:center;text-align:center;font-size:clamp(36px,5.6vw,92px);font-weight:700}
#dive{will-change:filter,transform}
@media (max-width:760px){.dive-cap{align-items:end;padding-bottom:calc(var(--gb) + 80px)}.cap > span{white-space:normal}}
.cap > span{display:block}
.cap mark{background:#FF4052;color:#fff;padding:0 .12em;border-radius:.06em;-webkit-box-decoration-break:clone;box-decoration-break:clone;text-shadow:none}
.menu-btn{transition:transform .3s,opacity .4s}
.stage .hint{color:#fff;font-size:20px;font-weight:500;letter-spacing:.16em;gap:12px;text-shadow:0 1px 8px rgba(0,0,0,.6),0 0 20px rgba(0,0,0,.35)}
.stage .hint b{background:#fff;width:3px;height:80px;box-shadow:0 0 8px rgba(0,0,0,.4)}
@media (prefers-reduced-motion:reduce){.cap{transition:none}}

/* ---------- part 2: releases, stacked ---------- */
.rel{--sec:var(--bg);position:relative;isolation:isolate;background:var(--sec);padding-bottom:150px}
.rel:nth-child(even){--sec:var(--pink)}
.stack .rel{position:sticky}
/* a release with no screens is still tall enough for its title to finish shrinking into the header, like the others */
.stack .rel:not(:has(.fv-imgs)){min-height:calc(100vh + 30vh + 40px)}
.rel .dim{position:absolute;inset:0;z-index:50;background:#000;opacity:0;pointer-events:none}
.fv-head{position:sticky;top:20px;z-index:20;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:12px;padding:90px var(--gr) 0 var(--gx);pointer-events:none}
.band{position:absolute;left:0;right:0;top:-20px;background:var(--sec);opacity:0;z-index:-1;box-shadow:0 1px 0 rgba(17,17,17,.08)}
.fv-title{margin:0;width:100%;text-align:center;font-family:var(--alpina);font-weight:400;line-height:1;text-wrap:balance;font-size:96px;letter-spacing:-.02em}
.fv-title .wd{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.fv-title .ch{display:inline-block;transform:translateY(105%);transition:transform .9s cubic-bezier(.2,.7,.1,1)}
.rel.shown .fv-title .ch{transform:none}
.fv-info{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr);gap:24px;padding:60px var(--gr) 0 var(--gx)}
.meta{display:flex;flex-direction:column;gap:2px}
.meta span:first-child{color:var(--ink-2)}
.meta+.meta{margin-top:14px}
.txt{display:flex;flex-direction:column;gap:14px;grid-column:2/4;max-width:560px}
.txt h3{margin:0;font-family:var(--alpina);font-size:clamp(26px,2.6vw,38px);font-weight:400;line-height:1.12;letter-spacing:-.02em}
.txt .sub{margin:0;font-family:var(--alpina);font-style:italic;font-size:clamp(20px,1.8vw,24px);line-height:1.15;color:var(--ink);letter-spacing:-.02em}
.txt .body p{margin:0 0 10px;font-family:var(--passenger);font-size:16px;line-height:1.6;color:var(--ink)}
.txt .body p:first-child{color:var(--ink)}
.fv-imgs{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding:70px var(--gr) 0 var(--gx);align-items:start}
.fv-imgs figcaption{will-change:transform}
.fv-imgs figure{margin:0;display:flex;flex-direction:column;gap:8px;min-width:0}
.fv-imgs .f1{grid-column:3/6}
.fv-imgs .f2{grid-column:8/11;margin-top:12vh}
/* two phones side by side sit a little further apart (about half a column each way) */
.fv-imgs .f1:not(.wide):not(.solo):has(+ .f2:not(.wide)){translate:1.5vw 0}
.fv-imgs .f1:not(.wide) + .f2:not(.wide){translate:-1.5vw 0}
/* desktop screens get a wide landscape frame; a phone paired with one moves to the right */
.fv-imgs .f1.wide{grid-column:1/8}
.fv-imgs .f2.wide{grid-column:6/13}
.fv-imgs .f1.wide + .f2:not(.wide){grid-column:9/12}
.fv-imgs:has(.f2.wide) .f1.wide{grid-column:1/7}
.fv-imgs .f1.wide + .f2.wide{grid-column:7/13}
.wide .ph{aspect-ratio:16/10}
/* a release with a single desktop screen centres it */
.fv-imgs .f1.solo{grid-column:3/11}
/* a single phone screen sits centred at phone width, not stretched across the row */
.fv-imgs .f1.solo:not(.wide){grid-column:5/9}
.lot{position:absolute;inset:0}
/* the still shown before the animation starts; it fades away once the first frames are drawn */
.lot-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;transition:opacity .35s ease}
.lot-thumb.off{opacity:0}
.lot svg{display:block}
.menu .top,.idx h3{font-weight:700}
.ph{position:relative;width:100%;max-width:100%;aspect-ratio:664/970;overflow:hidden;will-change:transform}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* footer: one centred column. The Plum logo (its letters drop in and hop when touched), the Autumn Release lettering
   with the paper's wave, the closing line, round social buttons and the copyright, with a back-to-top pill in a strip just above the footer. */
.site-foot,.sf-up{--lh:clamp(40px,4vw,64px)}
.site-foot,.sf-up{--fh:clamp(440px,64svh,640px)}
.site-foot{position:relative;background:linear-gradient(#fff 0%,rgba(255,255,255,.85) 14%,rgba(255,255,255,.4) 38%,rgba(255,255,255,.22) 60%,rgba(255,255,255,.15)),url("footer-bg.webp") center bottom / cover no-repeat,var(--bg);color:var(--ink);display:flex;flex-direction:column;align-items:center;text-align:center;min-height:var(--fh);padding:clamp(40px,6vh,64px) var(--gr) calc(var(--gb) + 28px) var(--gx);overflow:hidden}
/* everything but the copyright is centred in the space above it */
.sf-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(16px,2.4vh,24px)}
.sf-logos{display:flex;align-items:center;justify-content:center;gap:clamp(16px,2vw,28px)}
.sf-logos::before{content:"";order:1;width:1px;align-self:stretch;background:rgba(17,17,17,.25)}
.sf-logos .sf-ar{order:2}
.sf-plum{display:flex;align-items:flex-end;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
.sf-plum span{display:block;transform-origin:50% 100%;will-change:transform}
.sf-plum svg{display:block;height:var(--lh);width:auto;overflow:visible}
.sf-ar{width:calc(var(--lh) * 2.2);cursor:pointer;-webkit-tap-highlight-color:transparent}
.sf-line{color:var(--ink);margin:0;font-family:var(--alpina);font-size:clamp(17px,1.4vw,22px);line-height:1.1;text-wrap:balance;letter-spacing:-.02em}
.sf-row{margin-top:clamp(30px,5vh,56px);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(14px,1.6vw,22px)}
.sf-social{display:flex;gap:clamp(12px,1.2vw,18px)}
.sf-social a{width:50px;height:50px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;transition:background-color .3s ease,color .3s ease,transform .4s cubic-bezier(.34,1.56,.64,1)}
.sf-social a:hover,.sf-social a:focus-visible{background:#FF4052;color:#fff;transform:translateY(-3px) scale(1.06)}
.sf-social svg{width:22px;height:22px}
/* the band above the footer: only the back-to-top pill, filling whatever the footer leaves of the screen */
.sf-up{display:flex;justify-content:center;align-items:center;background:var(--bg);min-height:calc(100svh - var(--fh));padding:clamp(24px,4vh,40px) var(--gr) clamp(20px,3vh,28px) var(--gx)}
.sf-pill{height:44px;padding:0 22px;border-radius:999px;border:2px solid var(--ink);background:transparent;color:var(--ink);font:inherit;font-size:16px;font-weight:600;cursor:pointer;transition:background-color .3s ease,border-color .3s ease,color .3s ease}
.sf-pill:hover,.sf-pill:focus-visible{background:#FF4052;border-color:#FF4052;color:#fff}
.sf-copy{color:#fff;text-shadow:0 1px 8px rgba(0,40,80,.35);margin:0;padding-top:clamp(28px,5vh,56px);font-size:14px;font-weight:600;letter-spacing:.01em}
/* everything else rises in once the footer comes into view */
.site-foot [data-fi]{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform 1.1s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--d,0) * 90ms)}
.site-foot.in [data-fi]{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.site-foot [data-fi]{transition:none}}

/* ---------- menu + jump loader ---------- */
.idx{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:40px}
/* three columns: user releases, HR admin releases, past releases */
.idx h3{margin:0 0 12px;font-family:var(--serif);font-style:italic;font-weight:400;font-size:24px;color:var(--pill);letter-spacing:-.02em}
.idx ol{list-style:none;margin:0;padding:0;border-top:1px solid #2E2E2B}
.idx a{color:inherit;text-decoration:none}
.idx .ext{font-size:16px;line-height:1;opacity:.7}
.idx button,.idx a{display:grid;grid-template-columns:34px 1fr 12px;gap:10px;align-items:center;width:100%;text-align:left;padding:11px 0;border-bottom:1px solid #2E2E2B}
.idx .n{font-family:var(--alpina);font-size:13px;opacity:.55;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.idx .t{font-family:var(--alpina);font-weight:400;font-size:clamp(22px,2.1vw,34px);line-height:1.05;transition:color .2s,translate .3s;letter-spacing:-.02em}
.idx .d{width:10px;height:10px;border-radius:50%;background:var(--c)}
.idx button:hover .t,.idx a:hover .t{color:var(--pill);translate:8px 0}
.menu{position:fixed;inset:0;z-index:94;font-family:var(--alpina);background:var(--ink);color:var(--bg);overflow-y:auto;clip-path:polygon(0% 0%,0% 0%,-22% 100%,0% 100%);transition:clip-path 1s cubic-bezier(.7,0,.2,1);padding:max(70px,env(safe-area-inset-top,0px)) var(--gr) 100px var(--gx);letter-spacing:-.02em}
body.menu-open .menu{clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%)}
/* the strip behind the logo and close button stays put while the list scrolls under it */
.menu-bar{position:sticky;top:calc(-1 * max(70px,env(safe-area-inset-top,0px)));z-index:2;display:block;height:66px;margin:calc(-1 * max(70px,env(safe-area-inset-top,0px))) calc(-1 * var(--gr)) calc(max(70px,env(safe-area-inset-top,0px)) - 66px) calc(-1 * var(--gx));background:var(--ink)}
body.menu-instant .menu{transition:none}
.menu .top{display:block;margin:0 0 30px;font-family:var(--serif);font-style:italic;font-size:22px;color:var(--pill);text-align:left;letter-spacing:-.02em}
.ld{position:fixed;inset:0;z-index:50;background:color-mix(in srgb,var(--c) 26%,#FFFFFF);display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .45s ease}
.ld.on{opacity:1;pointer-events:auto}
.ld-in{display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center;padding:0 var(--gr) 0 var(--gx)}
.ld-img{position:relative;width:min(140px,30vw);aspect-ratio:3/2;overflow:hidden}
.ld-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ld-t{font-size:clamp(34px,5vw,60px);line-height:.95;text-transform:uppercase;max-width:14ch}
.ld-t .a{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em}
.ld-t .b{font-family:var(--display);font-weight:800;font-stretch:80%}
.ld-n{position:absolute;bottom:calc(var(--gb) + 6px);left:0;right:0;text-align:center;font-size:11px;font-variant-numeric:tabular-nums}

@media (max-width:760px){
  .p-body{grid-template-columns:1fr;gap:12px}
  .p-film figcaption span+span{display:none}
  .idx{grid-template-columns:1fr}
  .fv-info{grid-template-columns:1fr;padding-top:36px}
  .txt{grid-column:auto}
  .metas{display:flex;gap:28px}.meta+.meta{margin-top:0}
  .fv-imgs{grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;padding-top:40px}
  .fv-imgs .f1{grid-column:1/4}
  .fv-imgs .f2{grid-column:4/7;margin-top:56px}
  .fv-imgs .f1.wide,.fv-imgs .f2.wide{grid-column:1/7}
  .fv-imgs .f1.wide + .f2:not(.wide){grid-column:3/7}
  .fv-imgs:has(.f2.wide) .f1.wide,.fv-imgs .f1.wide + .f2.wide,.fv-imgs .f1.solo{grid-column:1/7}
  .foot{display:none}
}
@media (prefers-reduced-motion:reduce){
  .w,.fv-title .ch,.menu{transition:none!important}
  .hint b{animation:none}
}

/* ---------- revisions after launch (Nov 2026) ---------- */
/* load: the waiting frame is as soft as the film's first frame, so nothing pops from sharp to blurred */
.mf{background:#2F8FD8}
.mf::before{content:"";position:absolute;inset:0;background:url("media/opening-first.jpg") center / cover no-repeat;filter:blur(18px);transform:scale(1.08)}
@media (orientation:portrait){.mf::before{background-image:url("media/opening-first-mobile.jpg")}}
/* the plumhq.com navbar replaces the page's own logo and menu */
/* nothing may widen the page sideways (clip, unlike hidden, keeps position:sticky working) */
html,body{overflow-x:clip}
/* the captions under the screens: 3px up, centred under their screen */
.fv-imgs figcaption{font-size:13px;text-align:center}
/* releases: the short line sits small above a title-sized headline; everything centred, no big title */
.fv-head{display:none}
.metas{display:none}
.fv-info{grid-template-columns:minmax(0,1fr);padding-top:clamp(96px,12vh,140px)}
/* one 480px column for every line of copy in a release */
.txt{grid-column:1/-1;max-width:480px;width:100%;margin:0 auto;align-items:stretch;text-align:left}
.txt .eyebrow{text-align:center;margin:0 0 6px;font-family:var(--passenger);font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);opacity:.75}
/* one headline size in every release; a clear gap separates it from the subline and body, which sit close */
.txt h3{font-size:clamp(32px,3.2vw,46px);line-height:1.08;margin-bottom:clamp(14px,1.8vw,26px)}
.txt .sub{font-size:clamp(21px,1.8vw,25px)}
/* body copy reads left-aligned in a comfortable measure (~65 characters) under the centred heads */
.txt .body{text-align:left}
.txt .body p{font-size:18px}
/* touch screens: the skydive is about a third shorter again (film part halved) */
/* touch screens: the letter sequence keeps its shorter run (100vh + 74vh) */
@media (max-width:760px),(hover:none) and (pointer:coarse){.track{height:174vh}}
/* phones: film captions sit around 55% of the screen height; release screens stack one under the other */
@media (max-width:760px){
  .dive-cap{align-items:center;padding-top:10vh;padding-bottom:0}.cap.low,.cap.top{align-self:center;margin:0}
  .fv-imgs{gap:32px}
  .fv-imgs figure{grid-column:2/6!important;margin-top:0!important;translate:none!important;position:sticky;top:86px;transform-origin:50% 0;will-change:filter,transform}
  .fv-imgs figure + figure{z-index:2}
  .fv-imgs figure.wide{grid-column:1/7!important}
}
/* chapter tracker: frosted glass with a faint warm tint. A wide pill names the current chapter and opens the
   chapter card above it; the square button beside it goes back to the top */
.chap{--glass:rgba(255,247,240,.58);--edge:rgba(255,255,255,.55);position:fixed;right:max(16px,var(--gr));bottom:calc(var(--gb) + 12px);z-index:60;width:min(340px,calc(100vw - 32px));display:flex;flex-direction:column;gap:10px;color:var(--ink);transition:opacity .3s ease,transform .3s ease}
.chap.away{opacity:0;transform:translateY(12px);pointer-events:none}
.chap-list,.chap-btn,.chap-top{background:var(--glass);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);border:1px solid var(--edge);box-shadow:0 10px 30px -14px rgba(44,11,33,.35),inset 0 1px 0 rgba(255,255,255,.45)}
.chap-list{border-radius:18px;max-height:min(60vh,520px);overflow-y:auto;overscroll-behavior:contain;opacity:0;transform:translateY(10px) scale(.98);transform-origin:50% 100%;visibility:hidden;transition:opacity .3s ease,transform .35s cubic-bezier(.2,.7,.1,1),visibility 0s linear .35s}
.chap.open .chap-list{opacity:1;transform:none;visibility:visible;transition:opacity .3s ease,transform .35s cubic-bezier(.2,.7,.1,1),visibility 0s}
.chap-list ol{list-style:none;margin:0;padding:8px}
.chap-list .g{padding:12px 10px 4px;color:var(--ink);opacity:.55}
.chap-list button{display:grid;grid-template-columns:24px 1fr;gap:8px;align-items:baseline;width:100%;text-align:left;padding:8px 10px;border-radius:10px;transition:background-color .2s ease}
.chap-list button:hover,.chap-list button.on{background:rgba(44,11,33,.07)}
.chap-list .n{font-size:11px;opacity:.5;font-variant-numeric:tabular-nums}
.chap-list .t{font-family:var(--alpina);font-size:17px;line-height:1.2;letter-spacing:-.02em}
.chap-bar{display:flex;gap:10px}
.chap-btn{flex:1;min-width:0;display:flex;align-items:center;gap:12px;height:56px;padding:0 20px;border-radius:16px;font-size:18px;font-weight:500;transition:background-color .2s ease}
.chap-btn .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chap-btn .chev{flex:none;width:20px;height:20px;transition:transform .3s ease}
/* hamburger icon; it turns into a close (x) while the chapter list is open */
.chap-btn .chev .i-close,.chap.open .chap-btn .chev .i-menu{display:none}
.chap.open .chap-btn .chev .i-close{display:inline}
.chap-top{flex:none;width:56px;height:56px;border-radius:16px;display:grid;place-items:center;transition:transform .2s ease}
.chap-btn:hover,.chap-top:hover{--glass:rgba(255,247,240,.78)}
.chap-top:hover{transform:translateY(-2px)}
.chap-top svg{width:20px;height:20px}
@media (max-width:760px){.chap{right:0;left:0;margin:0 auto}.chap-btn,.chap-top{height:50px}.chap-top{width:50px}.chap-btn{font-size:17px;padding:0 16px}}
/* stay connected: the two CTAs after the last release, straight into the footer */
.cta{position:relative;z-index:1;background:var(--bg);display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center;padding:clamp(80px,12vh,140px) var(--gr) clamp(48px,8vh,96px) var(--gx)}
.cta-h{margin:0;font-family:var(--alpina);font-weight:400;font-size:clamp(36px,4.6vw,66px);line-height:1.05;letter-spacing:-.02em;color:var(--ink)}
.cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.cta-btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 28px;border-radius:999px;border:2px solid var(--ink);color:var(--ink);font-size:16px;font-weight:600;text-decoration:none;transition:background-color .25s ease,border-color .25s ease,color .25s ease}
.cta-btn:hover,.cta-btn:focus-visible{background:var(--ink);color:#fff}
.cta-btn--primary{background:#FF4052;border-color:#FF4052;color:#fff}
.cta-btn--primary:hover,.cta-btn--primary:focus-visible{background:#e5313f;border-color:#e5313f}
/* the last release no longer leaves a screen of white before the footer */
.rel:last-child{padding-bottom:80px}
/* site navbar: a gradient blur with a faint tint instead of the solid bar. Over the film and colour the logo,
   links and buttons are white; over the white sections (nav--light, set in app.js) they turn Plum red and ink */
.navbar{--nav-tint:rgba(29,7,22,.42)}
.navbar.nav--light{--nav-tint:rgba(255,248,242,.94)}
/* never the solid purple bar: not on scroll, not on hover (only behind the open phone menu) */
.navbar:not(.nav--menu-open) .nav-bg{display:none}
.navbar .nav-blur{height:calc(100% + 40px);background:linear-gradient(var(--nav-tint) 0%,var(--nav-tint) 35%,rgba(255,255,255,0) 100%);transition:background .4s ease}
.navbar .nav-logo{color:#FFF8F2;transition:color .3s ease}
.navbar.nav--light:not(.nav--menu-open) .nav-logo{color:#FF4052}
.navbar.nav--light:not(.nav--menu-open) .nav-item-link{color:#2C0B21}
.navbar.nav--light:not(.nav--menu-open) .nav-item-link-icon-line,
.navbar.nav--light:not(.nav--menu-open) .nav-hamburger-line{background-color:#2C0B21}
.navbar.nav--light:not(.nav--menu-open) .button-4.nav-stroke-light--hover-red{color:#2C0B21;border-color:#2C0B21}
/* desktop: more room under the screens before the next release */
@media (min-width:900px){.rel{padding-bottom:240px}.rel:last-child{padding-bottom:120px}}
/* the letter's film: YouTube's player under our own play button (app.js) */
/* the player is taller than the frame: the video still fills it edge to edge (centred, fit to width), while YouTube's
   title bar and bottom strip, which no setting removes, sit in the cropped-off band above and below */
.vid iframe{position:absolute;left:0;top:-80px;width:100%;height:calc(100% + 160px);border:0;pointer-events:none;background:#000}
.vid .vid-poster{z-index:1;transition:opacity .5s ease}
.vid.playing .vid-poster{opacity:0;pointer-events:none}
.vid.ended .vid-poster{opacity:1}
.vid-hit{position:absolute;inset:0;z-index:2;border:0;padding:0;background:transparent;cursor:pointer;display:none}
.vid.playing .vid-hit{display:block}
.vid-play{z-index:3}
/* while it plays muted, a small speaker-off badge says a click turns the sound on */
.vid.muted::after{content:"";position:absolute;right:14px;bottom:14px;z-index:3;width:34px;height:34px;border-radius:50%;pointer-events:none;background:rgba(20,10,25,.55) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 9.5h3.5L12 5.5v13l-4.5-4H4z'/><path d='M16 9.5l5 5M21 9.5l-5 5'/></svg>") center / 18px no-repeat}
/* ---------- the film plays as a video (in beats) ---------- */
#dive{object-fit:cover;background:transparent}
/* ---------- loader: the blurred opening frame, the Plum mark, the lettering and a thin progress line ---------- */
.boot{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;color:#fff;background:#2F8FD8 url("media/opening-first.jpg") center / cover no-repeat;transition:opacity .7s ease,visibility 0s linear .7s;
  /* if the script never runs, the loader still clears itself */
  animation:boot-failsafe 0s linear 12s forwards}
@media (orientation:portrait){.boot{background-image:url("media/opening-first-mobile.jpg")}}
.boot::before{content:"";position:absolute;inset:-40px;background:inherit;filter:blur(18px);transform:scale(1.08)}
.boot::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 55% at 50% 50%,rgba(10,30,40,.32),rgba(10,30,40,.12))}
.boot-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2vh,22px);transition:transform .9s cubic-bezier(.2,.7,.1,1),opacity .6s ease}
.boot-logo{height:clamp(38px,5vw,64px);width:auto}
.boot-t{margin:0;font-family:var(--alpina);font-weight:400;font-size:clamp(28px,3.6vw,52px);line-height:1;letter-spacing:-.02em;text-shadow:0 2px 18px rgba(8,24,40,.45)}
.boot-bar{width:clamp(140px,18vw,240px);height:2px;margin-top:clamp(8px,1.6vh,16px);background:rgba(255,255,255,.28);border-radius:2px;overflow:hidden}
.boot-bar i{display:block;height:100%;background:#fff;transform:scaleX(0);transform-origin:0 50%;transition:transform .35s ease}
.boot.off{opacity:0;visibility:hidden;pointer-events:none}
.boot.off .boot-in{transform:translateY(-14px) scale(.98);opacity:0}
@keyframes boot-failsafe{to{opacity:0;visibility:hidden;pointer-events:none}}
/* ---------- skip the intro: a frosted pill, bottom left, only while the film is on ---------- */
.skip-intro{position:fixed;left:max(16px,var(--gx));bottom:calc(var(--gb) + 12px);z-index:60;height:44px;padding:0 18px;border-radius:14px;font-size:15px;font-weight:500;color:var(--ink);background:rgba(255,247,240,.58);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);border:1px solid rgba(255,255,255,.55);box-shadow:0 10px 30px -14px rgba(44,11,33,.35);opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s linear .4s}
body.in-intro .skip-intro{opacity:1;visibility:visible;transition:opacity .4s ease .6s,visibility 0s}
.skip-intro:hover{background:rgba(255,247,240,.8)}
/* when iOS has refused to play, the prompt reads "Tap to play" and stands out */
body.film-blocked .stage .hint{font-size:22px;letter-spacing:.12em}
body.film-blocked .stage .hint span{white-space:nowrap;padding:12px 22px;border-radius:999px;background:rgba(255,247,240,.22);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.45)}
/* the film is tappable while the intro is on (iOS also needs the pointer cursor to send the tap at all) */
body.in-intro #track .stage{cursor:pointer;-webkit-tap-highlight-color:transparent}