/* ═══════════════════════════════════════════════════════════════════════
   JIMMY WATERS — V2
   The man is called Waters and signs himself H2O, so water is the whole
   system: deep sections and shallow ones, a tide line between every
   change of depth, condensation on the dark panels, ripples off anything
   you press. Type is a Didone at display sizes over a grotesque, figures
   in mono. The only chromatic colour is the paint from the booth.
   ═══════════════════════════════════════════════════════════════════ */

@font-face{font-family:Bodoni;src:url(fonts/bodoni-normal.woff2) format('woff2');
  font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:Bodoni;src:url(fonts/bodoni-italic.woff2) format('woff2');
  font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:Archivo;src:url(fonts/archivo-var.woff2) format('woff2');
  font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Archivo;src:url(fonts/archivo-var-ext.woff2) format('woff2');
  font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:JB;src:url(fonts/jbmono.woff2) format('woff2');
  font-weight:400 700;font-display:swap}

:root{
  /* deep water */
  --deep:#060A11;
  --deep-2:#0A111B;
  --deep-3:#111A26;
  --deep-4:#18232F;

  /* shallow: cool paper, the light off a flat sea */
  --foam:#EDF0F0;
  --foam-2:#E1E6E6;
  --foam-3:#F6F8F8;

  --ink:#070B10;
  --ink-2:#2B353D;
  --ink-3:#48535B;

  --bone:#F5F7F7;
  --bone-2:#D6DCE0;
  --bone-3:#A6AFB6;

  --rule-d:rgba(255,255,255,.10);
  --rule-d2:rgba(255,255,255,.2);
  --rule-l:rgba(10,16,22,.13);
  --rule-l2:rgba(10,16,22,.26);

  /* the paint from the booth drives every accent on the page */
  --acc:#2E8BB8;
  --acc-2:#8FD3EC;
  --acc-3:#164A66;

  --gut:clamp(1.3rem,3.6vw,4rem);
  --max:1640px;
  --ease:cubic-bezier(.19,1,.22,1);
  --dock-h:0px;

  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");

  /* condensation: beads of water with a highlight, tiled over dark panels */
  --beads:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='none'%3E%3Cg opacity='.5'%3E%3Ccircle cx='34' cy='42' r='7' fill='%23ffffff' fill-opacity='.05'/%3E%3Ccircle cx='32' cy='39' r='2' fill='%23ffffff' fill-opacity='.16'/%3E%3Ccircle cx='150' cy='28' r='4' fill='%23ffffff' fill-opacity='.05'/%3E%3Ccircle cx='149' cy='26.5' r='1.2' fill='%23ffffff' fill-opacity='.16'/%3E%3Ccircle cx='212' cy='96' r='9' fill='%23ffffff' fill-opacity='.045'/%3E%3Ccircle cx='209' cy='92' r='2.6' fill='%23ffffff' fill-opacity='.15'/%3E%3Ccircle cx='72' cy='128' r='3' fill='%23ffffff' fill-opacity='.06'/%3E%3Ccircle cx='118' cy='176' r='6' fill='%23ffffff' fill-opacity='.05'/%3E%3Ccircle cx='116' cy='173' r='1.8' fill='%23ffffff' fill-opacity='.16'/%3E%3Ccircle cx='24' cy='210' r='5' fill='%23ffffff' fill-opacity='.05'/%3E%3Ccircle cx='188' cy='232' r='3.4' fill='%23ffffff' fill-opacity='.06'/%3E%3Ccircle cx='244' cy='158' r='2.4' fill='%23ffffff' fill-opacity='.07'/%3E%3Ccircle cx='96' cy='72' r='2' fill='%23ffffff' fill-opacity='.07'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

  /* one period of swell, used as a mask for every tide line */
  --wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cpath d='M0 42 C100 8 200 8 300 42 C400 76 500 76 600 42 C700 8 800 8 900 42 C1000 76 1100 76 1200 42 L1200 80 L0 80 Z' fill='%23000'/%3E%3C/svg%3E");
}

/* the paint booth is the theme switcher */
[data-paint="h2o"]      {--acc:#2E8BB8;--acc-2:#8FD3EC;--acc-3:#164A66}
[data-paint="gold"]     {--acc:#C09449;--acc-2:#EFDCA8;--acc-3:#65501F}
[data-paint="tangerine"]{--acc:#D9661F;--acc-2:#F7B183;--acc-3:#6E2E0C}
[data-paint="pacific"]  {--acc:#0F9AA0;--acc-2:#8FE2E2;--acc-3:#0A4A4C}
[data-paint="cherry"]   {--acc:#C6203C;--acc-2:#F28B9F;--acc-3:#63111F}
[data-paint="money"]    {--acc:#1E8C58;--acc-2:#7FD1A5;--acc-3:#0D4429}
[data-paint="grape"]    {--acc:#7444C4;--acc-2:#BC9EEC;--acc-3:#361B62}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:92px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
  transition-duration:.001ms!important}}

body{
  margin:0;background:var(--deep);color:var(--bone);
  font:400 clamp(1.08rem,.3vw + 1.02rem,1.19rem)/1.7 Archivo,'Helvetica Neue',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;padding-bottom:var(--dock-h);
}
body::after{content:'';position:fixed;inset:0;z-index:6;pointer-events:none;
  background-image:var(--grain);background-size:170px 170px;opacity:.05}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--acc);color:#fff}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--acc);color:#fff;padding:.7rem 1rem}
.skip:focus{left:.6rem;top:.6rem}

/* ── depth ─────────────────────────────────────────────────────────
   Every section declares whether it is deep water or shallow. The tide
   dividers between them read the two tones off these.               */
.deep{background:var(--deep);color:var(--bone);--rule:var(--rule-d);--rule-2:var(--rule-d2);
  --fg:var(--bone);--fg-2:var(--bone-2);--fg-3:var(--bone-3);--panel:var(--deep-2)}
.deep-2{background:var(--deep-2);color:var(--bone);--rule:var(--rule-d);--rule-2:var(--rule-d2);
  --fg:var(--bone);--fg-2:var(--bone-2);--fg-3:var(--bone-3);--panel:var(--deep-3)}
.shallow{background:var(--foam);color:var(--ink);--rule:var(--rule-l);--rule-2:var(--rule-l2);
  --fg:var(--ink);--fg-2:var(--ink-2);--fg-3:var(--ink-3);--panel:var(--foam-3)}

/* condensation, only where it is dark enough to read */
.deep,.deep-2{background-image:var(--beads);background-size:260px 260px}

/* ── tide line ─────────────────────────────────────────────────────
   Three swells at different speeds, masked out of the colour of the
   section it is flowing into.                                       */
.tide{position:relative;height:clamp(46px,6vw,88px);pointer-events:none;overflow:hidden;
  margin-bottom:-1px;background:var(--from,transparent)}
.tide::before,.tide::after,.tide>i{content:'';position:absolute;inset:0;
  -webkit-mask-image:var(--wave);mask-image:var(--wave);
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
  background-color:var(--to)}
.tide::before{-webkit-mask-size:1200px 100%;mask-size:1200px 100%;opacity:.3;
  animation:swell 19s linear infinite}
.tide>i{display:block;-webkit-mask-size:820px 100%;mask-size:820px 100%;opacity:.45;
  animation:swell 13s linear infinite reverse}
.tide::after{-webkit-mask-size:1560px 100%;mask-size:1560px 100%;
  animation:swell 27s linear infinite}
@keyframes swell{to{-webkit-mask-position:1560px 0;mask-position:1560px 0}}

/* ── type ─────────────────────────────────────────────────────────── */
.display,.colossal,.foot-mark{
  font-family:Bodoni,'Didot','Bodoni MT',Georgia,serif;font-weight:600;
  letter-spacing:-.022em;line-height:.95;margin:0;
}
.display{font-size:clamp(2.4rem,4.6vw,4.4rem)}
.display em{font-style:italic;font-weight:500}
.mono{font-family:JB,'SFMono-Regular',ui-monospace,monospace;font-variant-numeric:tabular-nums}

.tag{margin:0;font-size:.86rem;font-weight:600;letter-spacing:.02em;
  color:var(--fg-2,var(--bone-2));line-height:1.5}
/* uppercase survives only where the string is two or three words at most */
.tag-key{font-size:.78rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.tag-acc{color:var(--acc)}
.sw span,.dock-meta .tag,.reel-info .mono,.deck-cat,.rail{text-transform:uppercase}
.shallow .tag-acc{color:var(--acc-3)}
.lede{margin:0;color:var(--fg-2,var(--bone-2));font-size:clamp(1.12rem,.35vw + 1.05rem,1.26rem);
  max-width:46ch;line-height:1.66}
.fine{margin:0;font-size:.94rem;color:var(--fg-3,var(--bone-3));line-height:1.62}
.ul{text-decoration:none;border-bottom:1px solid var(--acc);padding-bottom:2px;
  color:var(--acc-2);font-size:.96rem;font-weight:600;transition:opacity .2s}
.shallow .ul{color:var(--acc-3);border-color:var(--acc-3)}
.ul:hover{opacity:.7}

.pull{font-family:Bodoni,Georgia,serif;font-style:italic;font-weight:500;
  font-size:clamp(1.35rem,2.2vw,1.95rem);line-height:1.3;color:var(--fg,var(--bone));
  margin:2rem 0 0;padding-left:1.5rem;border-left:2px solid var(--acc)}

/* a droplet used as punctuation throughout */
.drip{display:inline-block;width:.52em;height:.68em;vertical-align:-.06em;
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 26'%3E%3Cpath d='M10 0C10 0 19 11.4 19 17a9 9 0 1 1-18 0C1 11.4 10 0 10 0Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 26'%3E%3Cpath d='M10 0C10 0 19 11.4 19 17a9 9 0 1 1-18 0C1 11.4 10 0 10 0Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}

/* ── shell + the editorial grid ────────────────────────────────────
   Desktop gets a proper margin column: the eyebrow sits out in the
   gutter and the heading runs beside it, the way a monograph sets it. */
.sec{padding:clamp(4rem,7.5vw,8rem) var(--gut);max-width:var(--max);margin-inline:auto;
  position:relative}
.sec-top{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);
  gap:clamp(1rem,3vw,3.5rem);align-items:start;margin-bottom:clamp(2.4rem,5vw,4.5rem)}
.sec-top>.tag{padding-top:.7rem;position:relative;font-size:.8rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase}
.sec-top>.tag::after{content:'';position:absolute;left:0;top:-.5rem;width:2.4rem;height:2px;
  background:var(--acc)}
.sec-head{display:grid;gap:1.4rem}
@media (max-width:900px){
  .sec-top{grid-template-columns:1fr;gap:1.2rem}
  .sec-top>.tag{padding-top:0}
  .sec-top>.tag::after{display:none}
}
.more{display:flex;justify-content:center;margin-top:clamp(2.4rem,4vw,3.6rem)}

/* ── buttons ──────────────────────────────────────────────────────── */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  border:0;background:transparent;border-radius:999px;padding:.78rem 1.5rem;
  cursor:pointer;position:relative;
  font-size:.82rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  text-decoration:none;overflow:hidden;
  transition:color .25s,box-shadow .25s,transform .25s var(--ease)}
.pill svg{width:12px;height:12px;position:relative;z-index:1}
.pill span,.pill{z-index:0}
.pill-lg{padding:1.02rem 2rem;font-size:.85rem}
.pill-acc{background:linear-gradient(152deg,var(--acc-2),var(--acc) 46%,var(--acc-3));
  color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.28);
  box-shadow:0 1px 0 rgba(255,255,255,.34) inset,0 10px 26px -14px var(--acc)}
.pill-acc:hover{transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 18px 34px -14px var(--acc)}
.pill-ghost{background:transparent;color:var(--fg,var(--bone));
  box-shadow:inset 0 0 0 1px var(--rule-2,var(--rule-d2))}
.pill-ghost:hover{box-shadow:inset 0 0 0 1px currentColor;transform:translateY(-2px)}
.pill:active{transform:translateY(0) scale(.985)}
/* a ripple leaves the point you pressed */
.pill::after,.ctl::after,.reel-hit .play::after{content:'';position:absolute;
  left:50%;top:50%;width:8px;height:8px;border-radius:50%;translate:-50% -50%;
  border:1.5px solid currentColor;opacity:0;pointer-events:none}
.pill:active::after,.ctl:active::after{animation:ripple .65s var(--ease)}
@keyframes ripple{0%{opacity:.6;scale:1}100%{opacity:0;scale:26}}

.ctl{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;cursor:pointer;
  border:1px solid var(--rule-2,var(--rule-d2));background:transparent;color:var(--fg,var(--bone));
  position:relative;overflow:hidden;
  transition:background .2s,border-color .2s,transform .2s var(--ease)}
.ctl svg{width:18px;height:18px;position:relative;z-index:1}
.ctl:hover{background:color-mix(in srgb,currentColor 10%,transparent);transform:translateY(-1px)}
.ctl-lg{width:66px;height:66px;border-color:transparent;color:#fff;
  background:linear-gradient(152deg,var(--acc-2),var(--acc) 46%,var(--acc-3));
  box-shadow:0 14px 34px -16px var(--acc)}
.ctl-lg svg{width:24px;height:24px}
.ctl-sm{width:36px;height:36px}.ctl-sm svg{width:15px;height:15px}
.ctl-fill{width:42px;height:42px;border-color:transparent;color:#fff;
  background:linear-gradient(152deg,var(--acc-2),var(--acc) 46%,var(--acc-3))}
.ctl-txt{width:auto;padding:0 1.25rem;border-radius:999px;font-size:.74rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;margin-left:auto;height:46px}
.ctl-txt[aria-pressed=true]{background:var(--acc);border-color:transparent;color:#fff}
.i-pause{display:none}
.playing .ctl-lg .i-play,.playing .ctl-fill .i-play{display:none}
.playing .ctl-lg .i-pause,.playing .ctl-fill .i-pause{display:block}

/* ── top bar ──────────────────────────────────────────────────────── */
.bar{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;gap:2rem;
  padding:0 var(--gut);height:78px;border-bottom:1px solid transparent;
  background:linear-gradient(180deg,rgba(6,10,17,.8),rgba(6,10,17,.32) 66%,transparent);
  transition:background .35s,border-color .35s,height .35s}
.bar.stuck{background:var(--deep);border-bottom-color:var(--rule-d);height:68px}
.mark{display:flex;align-items:baseline;gap:.7rem;text-decoration:none;flex:0 0 auto;
  color:var(--bone)}
.mark-mono{font-family:Bodoni,Georgia,serif;font-size:1.55rem;font-weight:700;line-height:1;
  color:var(--acc-2);transition:color .5s var(--ease)}
.mark-mono sub{font-size:.56em;vertical-align:-.18em;font-weight:500}
.mark-full{font-family:Bodoni,Georgia,serif;font-size:1.04rem;letter-spacing:.02em}
@media (max-width:1240px){.mark-full{display:none}}

.nav{display:flex;gap:.1rem;margin-left:auto}
.nav a{display:flex;align-items:baseline;gap:.42rem;text-decoration:none;position:relative;
  font-size:.84rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--bone-2);padding:.55rem .72rem;transition:color .22s}
.nav a i{font-family:JB,monospace;font-style:normal;font-size:.7rem;color:var(--bone-3);
  transition:color .22s}
.nav a::after{content:'';position:absolute;left:.72rem;right:.72rem;bottom:.28rem;height:1px;
  background:var(--acc);transform:scaleX(0);transform-origin:left;
  transition:transform .32s var(--ease)}
.nav a:hover,.nav a.on{color:var(--bone)}
.nav a.on i,.nav a:hover i{color:var(--acc-2)}
.nav a.on::after,.nav a:hover::after{transform:scaleX(1)}
.bar-end{display:flex;align-items:center;gap:.8rem;flex:0 0 auto}
.burger{display:none;width:42px;height:42px;border:0;background:transparent;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:6px}
.burger span{width:20px;height:1.5px;background:var(--bone);transition:transform .3s var(--ease)}
.burger[aria-expanded=true] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.burger[aria-expanded=true] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
@media (max-width:1100px){
  .nav{position:fixed;inset:78px 0 auto;flex-direction:column;gap:0;padding:1rem var(--gut) 2rem;
    background:var(--deep);border-bottom:1px solid var(--rule-d);
    transform:translateY(-115%);transition:transform .45s var(--ease);z-index:-1}
  .nav.open{transform:none}
  .nav a{padding:1rem 0;font-size:1rem;letter-spacing:.05em;border-bottom:1px solid var(--rule-d)}
  .nav a::after{display:none}
  .burger{display:flex}
}
@media (max-width:600px){.bar-end .pill{display:none}}

/* ── side rails ───────────────────────────────────────────────────── */
.rail{position:fixed;top:50%;z-index:90;font-size:.7rem;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--bone-3);white-space:nowrap;pointer-events:none;
  mix-blend-mode:difference}
.rail-l{left:1rem;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl}
.rail-r{right:1rem;transform:translateY(-50%);writing-mode:vertical-rl}
@media (max-width:1500px){.rail{display:none}}

/* ── 00 opening ────────────────────────────────────────────────────
   The photograph lives in a card, not behind the type. The card tilts
   to the pointer, crossfades through four stills, and stands in a pool
   of its own reflection.                                             */
.open{position:relative;min-height:calc(100svh - var(--dock-h));display:flex;align-items:center;
  padding:6.6rem var(--gut) clamp(2.4rem,5vw,4rem);overflow:hidden;background:var(--deep)}
.open-wash{position:absolute;inset:0;z-index:0;pointer-events:none}
.open-wash span{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5}
.open-wash span:nth-child(1){left:-12%;top:-18%;width:62vw;height:62vw;
  background:radial-gradient(circle,color-mix(in srgb,var(--acc) 40%,transparent),transparent 68%);
  animation:caustic 24s ease-in-out infinite alternate}
.open-wash span:nth-child(2){right:-16%;bottom:-24%;width:56vw;height:56vw;
  background:radial-gradient(circle,color-mix(in srgb,var(--acc-3) 72%,transparent),transparent 66%);
  animation:caustic 31s ease-in-out infinite alternate-reverse}
.open-wash span:nth-child(3){left:38%;top:26%;width:34vw;height:34vw;
  background:radial-gradient(circle,color-mix(in srgb,var(--acc-2) 16%,transparent),transparent 64%);
  animation:caustic 19s ease-in-out infinite alternate}
@keyframes caustic{50%{transform:translate3d(3%,-2.4%,0) scale(1.12)}
  100%{transform:translate3d(-2.4%,2%,0) scale(1.05)}}

.open-in{position:relative;z-index:1;max-width:var(--max);width:100%;margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5.5rem);align-items:center}
@media (max-width:1024px){
  .open{align-items:flex-start;padding-top:6.5rem}
  .open-in{grid-template-columns:1fr;gap:clamp(1.8rem,5vw,3rem)}
  .plaque{order:-1}
}

.colossal{font-size:clamp(3.1rem,7.4vw,7.4rem);line-height:.9;letter-spacing:-.032em;
  margin:1rem 0 0;display:grid}
.colossal .l1{font-weight:500}
.colossal .l2{padding-left:.05em}
.colossal em{font-style:italic;font-weight:400;
  background:linear-gradient(174deg,#fff 0%,var(--acc-2) 72%,var(--acc) 116%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.open-note{margin:1.6rem 0 0;max-width:42ch;color:var(--bone-2);font-size:1.14rem;line-height:1.64}
.open-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.9rem}
.open-facts{list-style:none;margin:2rem 0 0;padding:1.4rem 0 0;display:flex;flex-wrap:wrap;
  gap:2.4rem;border-top:1px solid var(--rule-d)}
.open-facts li{display:grid;gap:.3rem}
.open-facts b{font-size:1.14rem;font-weight:600;letter-spacing:-.008em}

/* the card */
/* Height, not width, is what runs out first in a viewport-tall hero, so the
   card is sized off svh and the type column takes whatever is left. */
.plaque{margin:0 0 0 auto;position:relative;perspective:1200px;
  width:min(100%,58svh)}
@media (max-width:1024px){.plaque{width:min(100%,46svh);margin-inline:0}}
@media (max-width:640px){.plaque{width:100%}}
.plaque-tilt{position:relative;transform-style:preserve-3d;
  transition:transform .5s var(--ease)}
.plaque-frame{position:relative;aspect-ratio:5/4.1;overflow:hidden;border-radius:2px;
  background:var(--deep-3);
  box-shadow:0 3px 0 rgba(255,255,255,.1) inset,0 44px 90px -34px #000,
             0 0 0 1px rgba(255,255,255,.12),0 0 90px -30px color-mix(in srgb,var(--acc) 60%,transparent)}
.pl-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .9s var(--ease);filter:contrast(1.05) saturate(.95)}
.pl-img.is-on{opacity:1}
.plaque-gloss{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.2) 0%,transparent 26%,transparent 68%,
    rgba(255,255,255,.08) 100%)}
.plaque-corner{position:absolute;right:0;bottom:0;width:34%;height:44%;pointer-events:none;
  background:linear-gradient(315deg,color-mix(in srgb,var(--acc) 34%,transparent),transparent 62%);
  mix-blend-mode:screen}
.plate{position:absolute;left:-1.1rem;bottom:-1.1rem;z-index:3;background:#F6F3E6;border-radius:5px;
  padding:.32rem .68rem .4rem;text-align:center;line-height:1;transform:rotate(-4deg) translateZ(40px);
  box-shadow:0 14px 26px -12px rgba(0,0,0,.7),inset 0 0 0 2.4px #1D3E8C}
.plate span{display:block;font-size:.5rem;font-weight:800;letter-spacing:.16em;color:#1D3E8C;
  text-transform:uppercase}
.plate b{display:block;font-size:1.2rem;font-weight:800;color:#1D3E8C;letter-spacing:.05em;
  font-family:Archivo,sans-serif;font-variation-settings:'wdth' 88}

/* the pool it stands in */
.plaque-pool{position:relative;height:clamp(44px,5.5vw,84px);margin-top:2px;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.34),transparent 68%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.34),transparent 68%)}
.pl-refl{width:100%;aspect-ratio:5/4;object-fit:cover;transform:scaleY(-1);
  filter:blur(5px) saturate(.5) brightness(.42);
  animation:lap 7s ease-in-out infinite alternate}
@keyframes lap{to{transform:scaleY(-1) translateX(1.2%) skewX(.7deg)}}
.plaque-cap{display:flex;align-items:baseline;gap:.7rem;margin-top:1rem;font-size:1rem}
.plaque-cap .mono{color:var(--acc-2);font-size:.74rem}
.plaque-cap b{font-weight:600;font-size:1rem;letter-spacing:-.008em}

/* ── ledger ────────────────────────────────────────────────────────
   The figures are set in the grotesque, not the Didone. A Bodoni at
   30px on a light ground loses its hairlines entirely and the numbers
   read as broken. Number first, label under it, so a label that wraps
   cannot knock the figures out of line with each other.             */
.ledger{border-bottom:1px solid var(--rule-l)}
.ledger dl{max-width:var(--max);margin:0 auto;padding:0 var(--gut);
  display:grid;grid-template-columns:repeat(4,1fr)}
.ledger div{padding:clamp(1.8rem,3vw,2.8rem) 0;border-left:1px solid var(--rule-l);
  padding-left:clamp(1.1rem,2vw,2rem);
  display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:.7rem}
.ledger div:first-child{border-left:0;padding-left:0}

.ledger dd{margin:0;font-family:Archivo,'Helvetica Neue',Arial,sans-serif;
  font-size:clamp(2.2rem,3.4vw,3.2rem);font-weight:700;line-height:1;
  letter-spacing:-.035em;color:var(--ink);
  font-variant-numeric:lining-nums tabular-nums;font-variation-settings:'wdth' 96}

.ledger dt{font-size:.92rem;font-weight:500;letter-spacing:0;
  color:var(--ink-2);display:flex;align-items:baseline;gap:.5rem;line-height:1.4}
.ledger dt .drip{color:var(--acc);width:.46em;height:.6em;flex:0 0 auto;
  transform:translateY(.08em)}

@media (max-width:820px){
  .ledger dl{grid-template-columns:1fr 1fr}
  .ledger div{padding-block:clamp(1.4rem,4.6vw,1.9rem);gap:.55rem}
  .ledger div:nth-child(3){border-left:0;padding-left:0}
  .ledger div:nth-child(-n+2){border-bottom:1px solid var(--rule-l)}
  .ledger dd{font-size:clamp(2rem,8.4vw,2.8rem)}
  .ledger dt{font-size:.64rem;letter-spacing:.12em}
}
@media (max-width:400px){
  .ledger div{padding-left:.9rem}
  /* tighten the tracking rather than the size: these still have to be read */
  .ledger dt{font-size:.64rem;letter-spacing:.07em}
}

/* ── running strip ────────────────────────────────────────────────── */
.strip{overflow:hidden;padding:1rem 0;background:var(--deep-2);position:relative;
  border-block:1px solid var(--rule-d)}
.strip-in{display:flex;gap:2.8rem;width:max-content;animation:roll 92s linear infinite}
.strip span{display:flex;align-items:center;gap:.6rem;white-space:nowrap;
  font-size:.84rem;font-weight:600;letter-spacing:.02em;color:var(--bone-2)}
.strip span b{color:var(--bone);font-weight:600}
.strip .drip{color:var(--acc-2)}
@keyframes roll{to{transform:translateX(-50%)}}
.strip:hover .strip-in{animation-play-state:paused}

/* ── 01 deck ──────────────────────────────────────────────────────── */
.deck-in{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(2rem,4.5vw,5rem);align-items:start}
@media (max-width:1040px){.deck-in{grid-template-columns:1fr}}
.deck-now{position:sticky;top:104px}
@media (max-width:1040px){.deck-now{position:static}}

.deck-meta{margin-bottom:1.8rem;min-height:6.4rem}
.deck-meta .display{font-size:clamp(2rem,2.8vw,2.6rem);margin:.55rem 0 .85rem}
.deck-wave{position:relative;margin-bottom:1.5rem}
.deck-wave canvas{width:100%;height:56px;display:block}
.deck-wave input[type=range]{position:absolute;inset:0;width:100%;height:56px;margin:0;
  opacity:0;cursor:pointer}
.deck-time{display:flex;justify-content:space-between;font-size:.84rem;color:var(--bone-2);
  margin-top:.5rem;letter-spacing:0}
.deck-ctrl{display:flex;align-items:center;gap:.7rem}

.tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.3rem}
.tab{border:1px solid var(--rule-d);background:transparent;color:var(--bone-2);
  border-radius:999px;padding:.58rem 1.15rem;cursor:pointer;font-size:.75rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;transition:all .24s var(--ease);white-space:nowrap}
.tab:hover{color:var(--bone);border-color:var(--bone-3)}
.tab[aria-selected=true]{background:linear-gradient(152deg,var(--acc-2),var(--acc) 52%,var(--acc-3));
  border-color:transparent;color:#fff}
.deck-blurb{margin:0 0 1.7rem;color:var(--bone-2);font-size:1.06rem;max-width:44ch}

.tracks{list-style:none;margin:0;padding:0;max-height:min(66vh,660px);overflow-y:auto;
  border-top:1px solid var(--rule-d);scrollbar-width:thin;
  scrollbar-color:var(--rule-d2) transparent}
.tracks::-webkit-scrollbar{width:5px}
.tracks::-webkit-scrollbar-thumb{background:var(--rule-d2)}
.trk{display:grid;grid-template-columns:2.6rem minmax(0,1fr) auto;align-items:center;gap:1rem;
  padding:.92rem .4rem;cursor:pointer;border:0;border-bottom:1px solid var(--rule-d);
  background:transparent;color:inherit;font:inherit;text-align:left;width:100%;position:relative;
  transition:background .22s,padding-left .3s var(--ease)}
.trk::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--acc);
  transform:scaleY(0);transition:transform .3s var(--ease)}
.trk:hover::before,.trk.on::before{transform:scaleY(1)}
.trk:hover{background:rgba(255,255,255,.03);padding-left:1rem}
.trk-n{font-family:JB,monospace;font-size:.78rem;color:var(--bone-3);display:grid;
  place-items:center;height:18px}
.trk-t{min-width:0}
.trk-t b{display:block;font-weight:600;font-size:1.13rem;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trk-t span{display:block;font-size:.86rem;letter-spacing:0;color:var(--bone-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:.2rem}
.trk-d{font-family:JB,monospace;font-size:.82rem;color:var(--bone-2)}
.trk.on{background:rgba(255,255,255,.05);padding-left:1rem}
.trk.on .trk-t b{color:var(--acc-2)}
.eq{display:none;gap:2px;align-items:flex-end;height:14px}
.trk.on .eq{display:flex}
.trk.on .num{display:none}
.eq i{width:2px;background:var(--acc-2);height:30%;animation:bounce .95s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:.2s}.eq i:nth-child(3){animation-delay:.4s}
.eq i:nth-child(4){animation-delay:.1s}
body:not(.playing) .eq i{animation-play-state:paused}
@keyframes bounce{0%,100%{height:22%}50%{height:100%}}

/* ── 02 studio ────────────────────────────────────────────────────── */
.studio-in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,4.5rem);align-items:center}
@media (max-width:980px){.studio-in{grid-template-columns:1fr}}
.studio-shot{margin:0;position:relative}
.studio-shot img{width:100%;aspect-ratio:16/10;object-fit:cover;filter:contrast(1.05) saturate(.92)}
.cap{margin:.9rem 0 0;font-size:.96rem;color:var(--fg-2);display:flex;gap:.6rem;align-items:baseline}
.credits{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.credits li{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;
  padding:1rem 0;border-bottom:1px solid var(--rule)}
.credits b{font-family:Bodoni,Georgia,serif;font-size:1.62rem;font-weight:600;letter-spacing:-.012em}

.mpc{margin-top:clamp(3rem,6vw,5.5rem);border:1px solid var(--rule-d);background:var(--deep-2);
  background-image:var(--beads);background-size:260px 260px;
  padding:clamp(1.3rem,2.6vw,2.2rem);position:relative;overflow:hidden;color:var(--bone);
  --fg:var(--bone);--fg-2:var(--bone-2);--fg-3:var(--bone-3);--rule-2:var(--rule-d2)}
.mpc::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(62% 74% at 80% -12%,color-mix(in srgb,var(--acc) 20%,transparent) 0%,transparent 66%)}
.mpc>*{position:relative}
.mpc .tag{color:var(--bone-2)}
.mpc .tag-acc{color:var(--acc-2)}
.mpc-head{display:flex;flex-wrap:wrap;gap:1.4rem;align-items:flex-end;justify-content:space-between;
  margin-bottom:1.9rem}
.mpc-head .display{font-size:clamp(1.6rem,2.4vw,2.1rem);margin-top:.5rem}
.mpc-ctrl{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem}
.tempo{display:flex;align-items:center;gap:.7rem}
.tempo input{width:112px;accent-color:var(--acc)}
.tempo b{font-size:.92rem;color:var(--bone);min-width:2.2rem}

.grid{display:grid;gap:6px}
.grid-row{display:grid;grid-template-columns:5.4rem repeat(16,1fr);gap:5px;align-items:center}
.grid-row>.tag{font-size:.82rem;letter-spacing:0;font-weight:600;color:var(--bone-2)}
.pad{aspect-ratio:1;border:1px solid var(--rule-d);background:rgba(255,255,255,.02);cursor:pointer;
  padding:0;border-radius:3px;transition:background .14s,border-color .14s,transform .14s var(--ease)}
.pad:nth-child(4n+2){background:rgba(255,255,255,.05)}
.pad:hover{border-color:var(--bone-3)}
.pad[aria-pressed=true]{background:linear-gradient(152deg,var(--acc-2),var(--acc) 58%,var(--acc-3));
  border-color:transparent}
.pad.hit{transform:scale(1.18);box-shadow:0 0 22px -2px var(--acc)}
@media (max-width:780px){
  .grid{overflow-x:auto;padding-bottom:.6rem;scrollbar-width:thin}
  .grid-row{grid-template-columns:3rem repeat(16,34px);gap:4px;width:max-content;min-width:100%}
  .grid-row>.tag{font-size:.56rem;letter-spacing:.06em;position:sticky;left:0;
    background:var(--deep-2);z-index:1;padding-right:.3rem}
}
.mpc-foot{display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center;justify-content:space-between;
  margin-top:1.7rem}
.mpc-note{margin:0;font-size:.95rem;color:var(--bone-2);max-width:42ch}
.presets{display:flex;flex-wrap:wrap;gap:.4rem}
.preset{border:1px solid var(--rule-d);background:transparent;color:var(--bone-2);cursor:pointer;
  padding:.5rem 1rem;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;transition:all .2s}
.preset:hover{color:var(--bone);border-color:var(--acc)}

/* ── 03 the '64 ───────────────────────────────────────────────────── */
.sixtyfour{padding-top:0}
.sf-art{position:relative;margin:0 calc(var(--gut) * -1) clamp(2.5rem,5vw,4.5rem);
  height:min(76vh,680px)}
.sf-art img{width:100%;height:100%;object-fit:cover;object-position:50% 62%;
  filter:grayscale(.22) contrast(1.06)}
.sf-art::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,var(--deep) 0%,transparent 24%,transparent 62%,var(--deep) 100%)}
.sf-in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(2rem,4.5vw,5rem);align-items:start}
@media (max-width:1040px){.sf-in{grid-template-columns:1fr}}
.spec{margin:2.6rem 0 0;padding:0;border-top:1px solid var(--rule-d)}
.spec div{display:flex;justify-content:space-between;gap:1.5rem;padding:.9rem 0;
  border-bottom:1px solid var(--rule-d)}
.spec dt{font-size:.98rem;font-weight:500;letter-spacing:0;color:var(--bone-2)}
.spec dd{margin:0;font-size:1.06rem;font-weight:600}

.sf-paint{border:1px solid var(--rule-d);padding:clamp(1.2rem,2.2vw,1.8rem);
  background:var(--deep-2);position:sticky;top:104px}
@media (max-width:1040px){.sf-paint{position:static}}
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:.65rem;margin:1.3rem 0}
@media (max-width:520px){.swatches{grid-template-columns:repeat(3,1fr)}}
.sw{border:0;padding:0;background:transparent;cursor:pointer;display:grid;gap:.5rem;
  transition:transform .26s var(--ease)}
.sw:hover{transform:translateY(-3px)}
/* each swatch is a bead of paint with a wet highlight */
.sw i{display:block;aspect-ratio:1;border-radius:50%;position:relative;overflow:hidden;
  background:radial-gradient(circle at 34% 26%,var(--c2),var(--c1) 54%,var(--cd));
  box-shadow:inset 0 -6px 12px -6px rgba(0,0,0,.7),
             inset 0 3px 6px -3px rgba(255,255,255,.55),
             0 8px 18px -10px #000}
.sw i::after{content:'';position:absolute;left:22%;top:14%;width:26%;height:18%;
  border-radius:50%;background:rgba(255,255,255,.72);filter:blur(1.5px)}
.sw[aria-checked=true] i{box-shadow:inset 0 -6px 12px -6px rgba(0,0,0,.7),
  inset 0 3px 6px -3px rgba(255,255,255,.55),0 0 0 2px var(--deep-2),0 0 0 3.5px var(--bone)}
.sw span{font-size:.8rem;font-weight:600;letter-spacing:0;color:var(--bone-2);text-align:center;line-height:1.35}
.sw[aria-checked=true] span{color:var(--bone)}
.sf-now{margin:0;display:flex;gap:.6rem;align-items:baseline;padding-top:1rem;
  border-top:1px solid var(--rule-d)}
.sf-now b{font-family:Bodoni,Georgia,serif;font-size:1.45rem;font-weight:600;color:var(--acc-2)}
.sf-second{margin:clamp(3rem,6vw,5rem) 0 0}
.sf-second img{width:100%;aspect-ratio:21/9;object-fit:cover;object-position:50% 55%;
  filter:grayscale(.18) contrast(1.04)}

/* ── 04 catalogue ─────────────────────────────────────────────────── */
.filters{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:2rem}
.fchip{border:1px solid var(--rule);background:transparent;color:var(--fg-2);cursor:pointer;
  padding:.52rem 1.05rem;border-radius:999px;font-size:.73rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;transition:all .22s}
.fchip:hover{color:var(--fg);border-color:var(--fg-3)}
.fchip[aria-pressed=true]{background:linear-gradient(152deg,var(--acc-2),var(--acc) 52%,var(--acc-3));
  border-color:transparent;color:#fff}
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
.disc{display:block;text-decoration:none;background:var(--foam);padding:.95rem;
  transition:background .3s}
.disc:hover{background:var(--foam-3)}
.disc-art{position:relative;overflow:hidden}
.disc-art img{width:100%;aspect-ratio:1;object-fit:cover;filter:grayscale(.5) contrast(1.03);
  transition:filter .45s,transform .7s var(--ease)}
.disc:hover .disc-art img{filter:none;transform:scale(1.05)}
.disc-meta{margin-top:.75rem;display:flex;justify-content:space-between;gap:.6rem;align-items:baseline}
.disc-meta b{font-size:.95rem;font-weight:600;line-height:1.36;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.disc-meta span{font-family:JB,monospace;font-size:.78rem;color:var(--ink-3);flex:0 0 auto}

/* ── 05 visuals: the reel ─────────────────────────────────────────── */
.reel-stage{position:relative;overflow:hidden;background:var(--deep-2);
  box-shadow:0 50px 100px -50px #000}
.reel-plate{position:relative;aspect-ratio:2.35/1}
@media (max-width:760px){.reel-plate{aspect-ratio:16/10}}
.reel-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .6s var(--ease),transform 7s linear;
  filter:grayscale(.26) contrast(1.06);transform:scale(1.02)}
.reel-layer.is-on{opacity:1;transform:scale(1.07)}
.reel-stage::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,10,17,.5) 0%,transparent 26%,
    rgba(6,10,17,.22) 54%,rgba(6,10,17,.9) 100%)}
.reel-hit{position:absolute;inset:0;z-index:2;border:0;background:transparent;cursor:pointer;
  display:grid;place-items:center}
.reel-hit .play{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;
  position:relative;background:rgba(6,10,17,.4);border:1px solid rgba(255,255,255,.32);
  color:var(--bone);backdrop-filter:blur(2px);
  transition:transform .4s var(--ease),background .3s,border-color .3s,color .3s}
.reel-hit .play svg{width:22px;height:22px;margin-left:3px}
/* a ring of ripples pushes out while you hover the stage */
.reel-hit .play::before,.reel-hit .play::after{content:'';position:absolute;inset:-1px;
  border-radius:50%;border:1px solid var(--acc-2);opacity:0}
.reel-hit:hover .play{transform:scale(1.1);color:#fff;border-color:transparent;
  background:linear-gradient(152deg,var(--acc-2),var(--acc) 52%,var(--acc-3))}
.reel-hit:hover .play::before{animation:pulse 2.2s var(--ease) infinite}
.reel-hit:hover .play::after{animation:pulse 2.2s var(--ease) .7s infinite}
@keyframes pulse{0%{opacity:.7;scale:1}100%{opacity:0;scale:2.1}}

.reel-info{position:absolute;left:0;bottom:0;z-index:3;pointer-events:none;
  padding:clamp(1.1rem,2.4vw,2.2rem);display:grid;gap:.5rem;max-width:70%}
.reel-info .mono{font-size:.82rem;letter-spacing:.06em;color:var(--acc-2)}
.reel-info .display{font-size:clamp(1.6rem,3.2vw,2.8rem)}
.reel-arrows{position:absolute;right:clamp(1.1rem,2.4vw,2.2rem);
  bottom:clamp(1.1rem,2.4vw,2.2rem);z-index:3;display:flex;gap:.5rem}
.reel-arrows .ctl{background:rgba(6,10,17,.44);color:var(--bone);border-color:var(--rule-d2)}

.film{margin-top:1.5rem;overflow-x:auto;overflow-y:hidden;padding:15px 0;position:relative;
  scrollbar-width:none;cursor:grab}
.film::-webkit-scrollbar{display:none}
.film.drag{cursor:grabbing}
.film::before,.film::after{content:'';position:absolute;left:0;right:0;height:9px;
  background-image:radial-gradient(circle at 6px 50%,var(--deep-4) 2.6px,transparent 2.8px);
  background-size:19px 9px;pointer-events:none;z-index:2}
.film::before{top:0}.film::after{bottom:0}
.film-track{display:flex;gap:6px;list-style:none;margin:0;padding:0;width:max-content}
.frame{position:relative;border:0;padding:0;background:transparent;cursor:pointer;
  width:clamp(116px,12.5vw,186px);display:block;transition:transform .3s var(--ease)}
.frame img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:grayscale(.8) brightness(.55);
  transition:filter .35s}
.frame::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--rule-d);
  transition:box-shadow .3s}
.frame:hover img{filter:grayscale(.2) brightness(.95)}
.frame:hover{transform:translateY(-3px)}
.frame[aria-current=true] img{filter:none}
.frame[aria-current=true]::after{box-shadow:inset 0 0 0 2px var(--acc)}
.frame .fno{position:absolute;left:6px;top:5px;font-family:JB,monospace;font-size:.7rem;
  color:var(--bone);text-shadow:0 1px 3px #000;opacity:.75}
.frame[aria-current=true] .fno{color:var(--acc-2);opacity:1}
@media (max-width:640px){
  .reel-arrows{top:.8rem;bottom:auto;right:.8rem}
  .reel-info{max-width:100%;padding-bottom:.9rem}
  .reel-hit .play{width:58px;height:58px}
  .reel-hit .play svg{width:17px;height:17px}
}

/* ── quote slab ───────────────────────────────────────────────────── */
.slab{position:relative;padding:clamp(5rem,11vw,9rem) var(--gut);overflow:hidden;isolation:isolate}
.slab img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 44%;
  z-index:-2;filter:grayscale(.62) contrast(1.12) brightness(.62)}
.slab::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(6,10,17,.95) 0%,rgba(6,10,17,.72) 50%,rgba(6,10,17,.28) 100%)}
.slab blockquote{margin:0 auto;max-width:var(--max)}
.slab p{margin:0 0 1.7rem;font-family:Bodoni,Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(1.65rem,4.2vw,3.4rem);line-height:1.18;letter-spacing:-.02em;color:var(--bone)}
.slab cite{font-style:normal;display:flex;flex-wrap:wrap;gap:.7rem;align-items:baseline;
  font-size:.96rem;color:var(--bone-2)}

/* ── 06 interviews ────────────────────────────────────────────────── */
.talks{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.talks li{border-bottom:1px solid var(--rule)}
.talk{display:grid;grid-template-columns:3.4rem minmax(0,1.05fr) minmax(0,1fr) 13rem;
  gap:1.8rem;align-items:center;padding:1.6rem .3rem;width:100%;border:0;background:transparent;
  color:inherit;font:inherit;text-align:left;cursor:pointer;
  transition:padding-left .34s var(--ease),background .3s}
.talk:hover{background:color-mix(in srgb,var(--fg) 4%,transparent);padding-left:1.1rem}
.talk .mono{font-size:.72rem;color:var(--fg-3)}
.talk .tk-h{font-family:Bodoni,Georgia,serif;font-size:clamp(1.48rem,2vw,1.92rem);font-weight:600;
  letter-spacing:-.012em;line-height:1.2}
.talk .tk-s{display:block;font-size:.78rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--acc-3);margin-bottom:.5rem}
.deep .talk .tk-s,.deep-2 .talk .tk-s{color:var(--acc-2)}
.talk .tk-n{font-size:1.02rem;color:var(--fg-2);line-height:1.6}
.talk .tk-shot{position:relative;overflow:hidden}
.talk .tk-shot img{width:100%;aspect-ratio:16/9;object-fit:cover;filter:grayscale(.5);
  opacity:.72;transition:opacity .35s,filter .35s,transform .6s var(--ease)}
.talk:hover .tk-shot img{opacity:1;filter:grayscale(0);transform:scale(1.06)}
@media (max-width:1020px){
  .talk{grid-template-columns:2.6rem minmax(0,1fr) 8rem;gap:1.2rem}
  .talk .tk-n{display:none}
}
@media (max-width:620px){
  .talk{grid-template-columns:2.2rem minmax(0,1fr)}
  .talk .tk-shot{display:none}
}

/* ── 07 story ─────────────────────────────────────────────────────── */
.story-in{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(2rem,5vw,5.5rem);align-items:start}
@media (max-width:980px){.story-in{grid-template-columns:1fr}}
.story-copy .display{margin:1.2rem 0 2rem;max-width:19ch}
.story-copy p{margin:0 0 1.55rem;color:var(--fg-2);font-size:1.14rem;line-height:1.78;max-width:62ch}
.drop::first-letter{float:left;font-family:Bodoni,Georgia,serif;font-size:4.4em;line-height:.76;
  font-weight:500;margin:.06em .12em 0 0;color:var(--acc-2)}
.story-side{display:grid;gap:1.4rem;position:sticky;top:110px}
@media (max-width:980px){.story-side{position:static}}
.story-shot{margin:0}
.story-shot img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(.32) contrast(1.05)}

/* ── 08 contact ───────────────────────────────────────────────────── */
.contact-in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:clamp(2rem,4.5vw,5rem);align-items:start}
@media (max-width:940px){.contact-in{grid-template-columns:1fr}}
.links{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.links li{border-bottom:1px solid var(--rule)}
.links a{display:grid;grid-template-columns:3rem minmax(0,1fr) auto;gap:1.4rem;align-items:baseline;
  padding:1.35rem .3rem;text-decoration:none;transition:padding-left .34s var(--ease),background .3s}
.links a:hover{background:color-mix(in srgb,var(--fg) 4%,transparent);padding-left:1.1rem}
.links .mono{font-size:.72rem;color:var(--fg-3)}
.links b{font-family:Bodoni,Georgia,serif;font-size:1.68rem;font-weight:600;letter-spacing:-.012em}
.links em{font-style:normal;font-size:.98rem;color:var(--fg-2)}
.links a:hover b{color:var(--acc-2)}

.book{border:1px solid var(--rule-d);padding:clamp(1.3rem,2.6vw,2rem);display:grid;gap:1rem;
  background:var(--deep-2);color:var(--bone);--fg-3:var(--bone-3)}
.book label{display:grid;gap:.5rem}
.book .tag{color:var(--bone-2)}
.book input,.book select,.book textarea{border:0;border-bottom:1px solid var(--rule-d2);
  background:transparent;color:var(--bone);padding:.62rem 0;font-size:1.08rem;width:100%}
.book textarea{resize:vertical;min-height:74px}
.book input:focus,.book select:focus,.book textarea:focus{outline:none;border-bottom-color:var(--acc)}
.book select option{background:var(--deep-2)}
.book .pill{justify-self:start;margin-top:.4rem}

/* ── footer ───────────────────────────────────────────────────────── */
.foot{padding:clamp(3rem,5vw,4.5rem) var(--gut) clamp(2rem,4vw,3rem)}
.foot-in{max-width:var(--max);margin-inline:auto;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem;align-items:end}
@media (max-width:820px){.foot-in{grid-template-columns:1fr}}
.foot-mark{font-size:clamp(2.4rem,6.4vw,5.2rem);line-height:.9}
.foot-mark small{display:block;font-family:Archivo,sans-serif;font-size:.68rem;font-weight:700;
  letter-spacing:.32em;text-transform:uppercase;color:var(--acc-2);margin-top:.9rem}
.foot .fine{max-width:46ch}
.foot a{color:var(--acc-2);text-decoration:none;border-bottom:1px solid var(--acc-3)}

/* ── dock ─────────────────────────────────────────────────────────── */
/* No paint containment here: it would clip the unmute cue that sits above
   the bar. The flicker fix was dropping backdrop-filter, not this. */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:95;background:#070B12;
  border-top:1px solid var(--rule-d);transform:translateY(110%);
  transition:transform .5s var(--ease);padding-bottom:env(safe-area-inset-bottom)}
.dock.up{transform:none}
.dock-bar{position:absolute;left:0;right:0;top:0;height:2px;background:var(--rule-d)}
.dock-bar i{display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--acc-3),var(--acc-2));transition:width .25s linear}
.dock-in{max-width:var(--max);margin-inline:auto;padding:0 var(--gut);
  display:flex;align-items:center;gap:1rem;height:78px}
.dock-art{width:50px;height:50px;object-fit:cover;flex:0 0 auto}
.dock-meta{min-width:0;flex:1 1 auto;display:grid;gap:.1rem}
.dock-meta b{font-size:1.1rem;font-weight:600;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dock-meta .tag{font-size:.84rem;letter-spacing:0;color:var(--bone-2);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.dock-ctrl{display:flex;align-items:center;gap:.45rem;flex:0 0 auto}
.unmute{flex:0 0 auto;display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  border:1px solid var(--rule-d2);background:transparent;color:var(--bone);border-radius:999px;
  padding:.5rem .95rem;font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  white-space:nowrap;transition:all .22s}
.unmute svg{width:16px;height:16px}
.unmute .i-muted{display:none}
.unmute:hover{border-color:var(--bone)}
body.muted .unmute{background:linear-gradient(152deg,var(--acc-2),var(--acc) 52%,var(--acc-3));
  border-color:transparent;color:#fff;animation:knock 2.8s ease-out infinite}
body.muted .unmute:hover{animation:none}
body.muted .unmute .i-muted{display:block}
body.muted .unmute .i-sound{display:none}
@keyframes knock{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--acc) 70%,transparent)}
  55%,100%{box-shadow:0 0 0 15px transparent}}
/* The button is always just an icon. The words live in the cue above it, so
   they never fight the track title for room on a narrow bar. */
.unmute{padding:0;width:38px;height:38px;justify-content:center;border-radius:50%}
.unmute span{display:none}
body.muted .dock-in{cursor:pointer}
@media (max-width:660px){.dock-meta .tag,.dock-x{display:none}.dock-in{gap:.7rem}}
@media (max-width:430px){.dock-art{display:none}}

/* ── lightbox ─────────────────────────────────────────────────────── */
.lb{border:0;padding:52px 0 0;background:transparent;max-width:min(1220px,94vw);width:100%;
  color:var(--bone);overflow:visible}
.lb::backdrop{background:rgba(4,7,12,.95);backdrop-filter:blur(8px)}
.lb-frame{position:relative;width:min(100%,calc(68vh * 16 / 9));margin-inline:auto;
  aspect-ratio:16/9;background:#000;overflow:hidden;box-shadow:0 50px 100px -40px #000}
.lb-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lb-cap{margin:1rem auto 0;width:min(100%,calc(68vh * 16 / 9));font-size:1.02rem;
  letter-spacing:0;color:var(--bone)}
.lb-x{position:absolute;right:0;top:4px;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--rule-d2);background:transparent;color:var(--bone);cursor:pointer;
  display:grid;place-items:center}
.lb-x svg{width:18px;height:18px}
.lb-x:hover{background:var(--acc);color:#fff;border-color:transparent}

/* ── reveal ───────────────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(28px)}
.rv.in{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1s var(--ease)}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

@media (max-width:520px){.dock-meta{min-width:80px}}


/* ═══════════════════════════════════════════════════════════════════
   THE DECK'S FORMATS
   The same audio, played back on four machines. Everything is drawn in
   CSS off two inputs: body.playing, and --p, the 0..1 progress the
   frame loop writes onto the deck.
   ═══════════════════════════════════════════════════════════════ */

.formats{display:flex;gap:.35rem;margin-bottom:1.5rem;flex-wrap:wrap}
.fbtn{border:1px solid var(--rule-d);background:transparent;color:var(--bone-2);cursor:pointer;
  padding:.48rem .9rem;border-radius:999px;font-size:.7rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;transition:all .24s var(--ease);display:flex;align-items:center;gap:.4rem}
.fbtn svg{width:13px;height:13px}
.fbtn:hover{color:var(--bone);border-color:var(--bone-3)}
.fbtn[aria-checked=true]{background:linear-gradient(152deg,var(--acc-2),var(--acc) 54%,var(--acc-3));
  border-color:transparent;color:#fff}

.media{position:relative;width:min(100%,480px);aspect-ratio:1/.9;margin-bottom:2.2rem}
.fmt{position:absolute;inset:0;opacity:0;visibility:hidden;transform:scale(.965);
  transition:opacity .45s var(--ease),transform .55s var(--ease),visibility .45s}
.fmt.on{opacity:1;visibility:visible;transform:none}
.media img.art{width:100%;height:100%;object-fit:cover;display:block}
.fmt-vinyl,.fmt-cd,.fmt-tape{display:grid;place-items:center}
.fmt-vinyl svg,.fmt-cd svg,.fmt-tape svg{width:100%;height:auto;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.55))}

/* the spinning parts idle until the deck is playing */
.jw-spin,.jw-cdspin,.jw-reelL,.jw-reelR{animation:spin 4.4s linear infinite;
  animation-play-state:paused}
.jw-cdspin{animation-duration:1.5s}
.jw-reelL,.jw-reelR{animation-duration:3s}
.playing .jw-spin,.playing .jw-cdspin,.playing .jw-reelL,.playing .jw-reelR{
  animation-play-state:running}
@keyframes spin{to{transform:rotate(360deg)}}

/* the tonearm rests off the platter, then drops in to play */
.jw-arm{transform-box:view-box;transform-origin:402px 108px;transform:rotate(-15deg);
  transition:transform 1.1s var(--ease)}
.playing .jw-arm{transform:rotate(0deg)}

/* the laser winks while it reads */
.jw-lens{filter:drop-shadow(0 0 7px var(--acc));transition:opacity .3s}
.playing .jw-lens{animation:blip 2.2s ease-in-out infinite}
@keyframes blip{50%{opacity:.4}}

/* the reels transfer: left hub shrinks, right hub grows with progress */
.jw-wind-l{r:calc(30px - 14px * var(--p,0));transition:r .35s linear}
.jw-wind-r{r:calc(20px + 14px * var(--p,0));transition:r .35s linear}

.deck-cat{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bone-3);margin:1.4rem 0 1.8rem}

/* ── stream ───────────────────────────────────────────────────────── */
.fmt-digital{display:grid;grid-template-rows:1fr auto;gap:1rem}
.fmt-digital .stream{position:relative;overflow:hidden;border-radius:3px;
  box-shadow:0 30px 60px -30px #000,0 0 0 1px rgba(255,255,255,.1)}
.fmt-digital .spectrum{position:absolute;left:0;right:0;bottom:0;height:34%;
  display:flex;align-items:flex-end;gap:2px;padding:0 6% 6%;
  background:linear-gradient(180deg,transparent,rgba(6,10,17,.86))}
.fmt-digital .spectrum i{flex:1;background:linear-gradient(180deg,var(--acc-2),var(--acc));
  height:12%;border-radius:1px;transition:height .12s linear}
.playing .fmt-digital .spectrum i{animation:spectral 1.1s ease-in-out infinite}
@keyframes spectral{0%,100%{height:16%}50%{height:78%}}
.fmt-digital .meta{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:1fr 1fr;gap:.5rem .9rem;font-size:.82rem;letter-spacing:0}
.fmt-digital .meta li{display:flex;justify-content:space-between;gap:.6rem;
  border-bottom:1px solid var(--rule-d);padding-bottom:.35rem}
.fmt-digital .meta span{color:var(--bone-3)}
.fmt-digital .meta b{color:var(--bone-2);font-weight:400}

@media (max-width:520px){
  .media{width:100%}
  .fbtn{padding:.44rem .72rem;font-size:.66rem}
}


/* ── the unmute cue ────────────────────────────────────────────────
   A notification sitting on top of the bar with a tail pointing at the
   speaker button, so nobody has to work out that the silence is on
   purpose. It leaves the moment sound is on.                        */
.unmute-wrap{position:relative;flex:0 0 auto;display:flex;align-items:center}
.cue{position:absolute;bottom:calc(100% + 15px);left:50%;translate:-50% 0;z-index:4;
  display:flex;align-items:center;gap:.5rem;white-space:nowrap;pointer-events:none;
  padding:.62rem 1rem;border-radius:999px;
  background:linear-gradient(152deg,var(--acc-2),var(--acc) 52%,var(--acc-3));
  color:#fff;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  text-shadow:0 1px 2px rgba(0,0,0,.3);
  box-shadow:0 12px 26px -10px color-mix(in srgb,var(--acc) 90%,transparent),
             0 1px 0 rgba(255,255,255,.34) inset;
  opacity:0;transform:translateY(8px) scale(.96);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.cue svg{width:15px;height:15px;flex:0 0 auto}
.cue::after{content:'';position:absolute;top:100%;left:50%;translate:-50% -1px;
  border:7px solid transparent;border-top-color:var(--acc);filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
.cue.show{opacity:1;transform:none;animation:nudge 2.6s var(--ease) .5s infinite}
@keyframes nudge{0%,72%,100%{transform:translateY(0)}82%{transform:translateY(-4px)}}
@media (max-width:420px){.cue{font-size:.68rem;padding:.54rem .8rem;letter-spacing:.07em}}
@media (prefers-reduced-motion:reduce){.cue.show{animation:none}}