/* =================================================================
   Lily Rivers v3 — "the site is one continuous mix"
   Sakura: blush silk, cocoa lacquer, dusty rose and rose gold
   (Lily: no blue, no chrome). Everything moves at 124 BPM (1 beat = 0.4839s).
   ================================================================= */
:root {
  /* anodised cobalt */
  --cobalt-hi: #f5dfd9;
  --cobalt:    #e8c4bd;
  --cobalt-lo: #d9aba2;
  --navy:      #2e1814;
  --navy-hi:   #4a2a24;
  /* polished chrome */
  --chrome-hi: #fff5f1;
  --chrome:    #ecd3cc;
  --chrome-lo: #b08a82;
  /* gold foil */
  --gold-hi:   #f7d6c8;
  --gold:      #d49a82;
  --gold-lo:   #9a5a48;
  /* text */
  --cream:     #fbf1ec;

  --beat: 0.48387s;                        /* 60 / 124 */
  --serif: "Cormorant Garamond", "Cormorant", Garamond, Georgia, serif;
  --sans:  "Jost", "Futura", "Avenir Next", system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 64px);
  --deck-h: 68px;
  --ease-film: cubic-bezier(0.16, 1, 0.3, 1);

  /* reusable metal finishes */
  --brush: repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, rgba(0,0,0,.035) 1px 2px, transparent 2px 4px);
  --chrome-fill: linear-gradient(180deg, var(--chrome-hi) 0%, #f3e2dd 30%, #b58f86 49%, #7a5a52 51%, #e9d2cb 72%, var(--chrome-hi) 100%);
  --gold-plate:  linear-gradient(180deg, var(--gold-hi) 0%, #e8b39e 45%, #d49a82 100%);
  --gold-fill:   linear-gradient(180deg, var(--gold-hi) 0%, #e8b39e 34%, var(--gold-lo) 50%, #c08470 52%, #eec0ad 78%, var(--gold-hi) 100%);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root, html { background: var(--cobalt); color-scheme: light; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--cobalt);
  color: var(--navy);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 1px solid var(--gold-hi); outline-offset: 6px; }
::selection { background: var(--gold); color: var(--navy); }

.skip { position: fixed; left: var(--gutter); top: -60px; z-index: 100; background: var(--cream); color: var(--navy); padding: 10px 16px; }
.skip:focus { top: 16px; }

/* ---------- Metallic type ---------- */
.gold-text {
  background: var(--gold-fill);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.h-display {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 96;
  font-size: clamp(2.8rem, 7vw, 7rem);
  line-height: 1;
  letter-spacing: -0.02em;
  padding-bottom: 0.08em;
}
.h-small { font-size: 0.78rem; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; }
.link {
  display: inline-block; padding-bottom: 4px; font-weight: 400;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size 250ms var(--ease-film);
}
.link:hover { background-size: 0 1px; background-position: 100% 100%; }

/* ---------- Masthead: just the signature (the deck is the nav) ---------- */
.masthead { position: fixed; inset: 0 0 auto 0; z-index: 40; padding: 26px var(--gutter); pointer-events: none; }
.masthead.on-dark .wordmark { color: var(--cream); }
.wordmark {
  pointer-events: auto;
  font-weight: 500; font-size: 0.9rem; letter-spacing: 0.5em; text-transform: uppercase;
  color: var(--navy);
}

/* ---------- Rooms (colours: see the Sakura layer and living backdrop below) ---------- */
.room { position: relative; overflow: clip; isolation: isolate; }   /* clip, not hidden: same crop, but sticky children (the Played chips) still stick */

/* The light sweep: a soft band of light that glides across the metal as you scroll */
.sheen {
  position: absolute; inset: -20% -60%; z-index: -1;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.16) 46%, rgba(255,255,255,.34) 50%, rgba(255,255,255,.16) 54%, transparent 62%);
  mix-blend-mode: soft-light;
  transform: translateX(-40%);
}
.room--played .sheen, .room--studio .sheen { mix-blend-mode: overlay; }

/* ---------- Hero film ---------- */
.hero { height: 440vh; position: relative; }   /* shorter: the explosion lands within the first two scrolls */
.hero__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--cobalt); color: var(--navy); }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.letterbox {
  position: absolute; left: 0; right: 0; z-index: 2;
  height: max(0px, calc((100svh - 100vw / 2.35) / 2));
  background: var(--brush), linear-gradient(180deg, var(--navy-hi), var(--navy));
  transform-origin: top;
}
.letterbox--top { top: 0; }
.letterbox--bottom { bottom: 0; transform-origin: bottom; }

.curtain {
  position: absolute; inset: 0; z-index: 5;
  background: var(--brush), linear-gradient(180deg, var(--navy-hi) 0%, var(--navy) 100%);
  display: grid; place-items: center;
}
.curtain__loading {
  font-size: 0.8rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--chrome);
  display: flex; gap: 0.8em; align-items: baseline;
}
.curtain__loading em {
  font-family: var(--serif); font-size: 1.6rem; letter-spacing: 0; text-transform: none;
  color: var(--cream);
}

.titlecard {
  --tc-size: clamp(1.7rem, 5.4vw, 5.2rem);
  position: absolute; z-index: 3; left: 0; right: 0;
  top: calc(max(0px, (100svh - 100vw / 2.35) / 2) + 5vh);
  text-align: center; pointer-events: none;
}
.titlecard__name {
  /* the brand wordmark, set large: Jost medium capitals, wide tracking */
  font-family: var(--sans); font-style: normal; font-weight: 500;
  font-size: var(--tc-size);
  line-height: 1.1; letter-spacing: 0.5em; text-transform: uppercase;
  padding-left: 0.5em;          /* balances the trailing tracking so it centres optically */
}
.titlecard__credit { margin-top: 1.2em; font-size: 0.78rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--navy); }

/* Exploded-view callouts: label + hairline leader, like the annotations on an exploded diagram.
   Corner slots are set by main.js (callout--left / --right, --slot-1 / --slot-2). Scroll-scrubbed with the film. */
.callouts { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.callout { pointer-events: auto; text-decoration: none; color: var(--on-film); transition: scale 140ms var(--ease-film); text-shadow: 0 1px 14px rgb(40 22 20 / 0.45); }
.callout:active { scale: 0.98; }
.callout:focus-visible { outline: 2px solid var(--accent); outline-offset: 8px; }
.callout__small em { font-style: italic; }
@media (hover: hover) and (pointer: fine) {
  .callout__big { transition: color 160ms ease; }
  .callout:hover .callout__big { color: #f4b9c7; }   /* a light berry: legible on the rosewood film */
}
.callout {
  --big: clamp(2.2rem, 3.6vw, 4rem);
  position: absolute; max-width: 19rem; font-size: var(--big); color: var(--ground);   /* light on the dark rosewood film */
  opacity: 0; visibility: hidden;
}
.callout--left  { left: var(--gutter); text-align: left; }
.callout--right { right: var(--gutter); text-align: right; }
/* one shared vertical system for both sides: slot-1 is a fixed distance from the top so it always
   clears the pale header band (~170px), slot-2 is anchored off the bottom so it always clears the
   deck bar (~90px) regardless of viewport height -- neither side gets its own ad hoc numbers. */
.callout--slot-1 { top: clamp(200px, 20vh, 260px); }
.callout--slot-2 { top: auto; bottom: clamp(200px, 28vh, 300px); }
.callout__big, .callout__small { margin: 0; overflow: clip; padding: 0.06em 0.1em 0.14em 0; margin-right: -0.1em; }
.callout__big > span, .callout__small > span { display: block; }
.callout__big { font: 400 1em/1 var(--display); letter-spacing: -0.02em; font-synthesis: none; text-wrap: balance; }
.callout__big em { color: #f4b9c7; font-style: normal; }
.callout__small { font: 500 0.95rem/1.35 var(--text); color: rgb(246 230 228 / 0.8); margin-top: 0.4rem; }
/* the leader is drawn in one SVG layer: from the label's first line to the part's live screen position (film/anchors.json) */
.callouts__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.callout__line { fill: none; stroke: var(--ground); stroke-opacity: 0.8; stroke-width: 1.1; stroke-dasharray: 1; stroke-linejoin: round; filter: drop-shadow(0 0 1.5px rgb(21 16 14 / 0.85)) drop-shadow(0 0 3px rgb(21 16 14 / 0.5)); }   /* a two-layer dark halo keeps it legible crossing the pale chrome parts */   /* dashoffset is set inline by main.js */
.callout__pin { fill: var(--navy); stroke: var(--ground); stroke-width: 1.75; filter: drop-shadow(0 0 2px rgb(21 16 14 / 0.6)); }   /* pale ring + dark core: reads as a UI pin, not a product highlight */
@media (max-aspect-ratio: 4/5) {
  /* phones: the deck fills the lower screen, so the callouts take the title band at the top, left and right.
     slot-1 clears the masthead plus the safe area; slot-2 is anchored off the bottom to clear the deck bar. */
  .callout { --big: clamp(1.7rem, 7.4vw, 2.3rem); max-width: 62vw; }
  /* phones: at the peak the parts fill the top of the screen and the floor below the deck is empty, so every
     callout reads from the lower slot (never over the screen or knob) */
  .callout--slot-1 { top: auto; bottom: clamp(120px, 20vh, 170px); }
  .callout--slot-2 { top: auto; bottom: clamp(120px, 20vh, 170px); }
}

/* ---------- B: Journey ---------- */
.bio { padding: 28vh var(--gutter) 24vh; }
.statement {
  font-family: var(--serif); font-weight: 400; font-variation-settings: "opsz" 72;
  font-size: clamp(1.9rem, 4.2vw, 4.4rem); line-height: 1.1; letter-spacing: -0.01em;
  max-width: 22ch; margin: 0 0 22vh 8vw;
}
.bio__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); align-items: end; }
.frame--portrait { grid-column: 1 / span 5; aspect-ratio: 4 / 5; }
.bio__text { grid-column: 7 / span 5; max-width: 34rem; }
.bio__text .h-display { margin-bottom: 0.5em; }
.bio__text p { margin-bottom: 1.3em; }

/* ---------- Frames / placeholders (chrome-edged) ---------- */
.frame {
  position: relative; overflow: hidden;
  background: var(--navy);
  box-shadow: 0 0 0 1px rgba(255,255,255,.22), 0 0 0 5px rgba(46,24,20,.35), 0 30px 60px rgba(46,24,20,.35);
}
.placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
  padding: 22px; font-size: 0.8rem; color: var(--chrome);
  background: var(--brush), radial-gradient(120% 90% at 30% 20%, var(--navy-hi) 0%, var(--navy) 65%);
}
.placeholder span:first-child { color: var(--gold-hi); letter-spacing: 0.08em; }

/* ---------- C: Played, a departures board of every room (rows from data/played.json via render/build_played.py) ---------- */
.played { padding: 20vh var(--gutter) 22vh; --pb-cols: minmax(0, 13rem) minmax(0, 1fr) minmax(0, 12.5rem); }
.played > .h-display { margin-bottom: 4vh; }
.pb-chips {
  display: flex; gap: 8px; margin: 0 0 22px; padding: 10px 0 8px; position: sticky; top: 0; z-index: 2;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--metal) transparent;
}
.pb-chips::-webkit-scrollbar { height: 4px; }
.pb-chips::-webkit-scrollbar-thumb { background: var(--metal); border-radius: 4px; }
@media (min-width: 761px) { .pb-chips { flex-wrap: wrap; overflow: visible; position: static; } }   /* desktop: every chip visible */
.pb-chip {
  flex: 0 0 auto; min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; cursor: pointer;
  font: 500 0.8125rem/1 var(--sans); letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-soft); background: var(--glass); border: 1px solid var(--line); border-radius: 999px;
  transition: background-color 160ms var(--ease-film), color 160ms var(--ease-film), border-color 160ms var(--ease-film), scale 140ms var(--ease-film);
}
.pb-chip:active { scale: 0.97; }
.pb-chip[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
@media (hover: hover) and (pointer: fine) { .pb-chip:hover:not([aria-pressed="true"]) { border-color: var(--accent); color: var(--ink-head); } }
.pb { border-top: 1px solid var(--ink); max-width: 72rem; }   /* keeps the room-to-group read short on wide screens */
.pb-chips { max-width: 72rem; }
.pb__cols, .pb__row { display: grid; grid-template-columns: var(--pb-cols); gap: 20px; }
.pb__cols { margin: 0; padding: 10px 4px; font: 500 0.75rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.pb__cols span:last-child { text-align: right; }
.pb__rows { list-style: none; margin: 0; padding: 0; }
.pb__row { align-items: baseline; padding: 16px 4px; border-bottom: 1px solid var(--line); perspective: 900px; }
.pb__row.is-hidden { display: none; }
.pb__city { font: 500 0.8125rem/1.4 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.pb__room { font-family: var(--display); font-weight: 400; font-synthesis: none; color: var(--ink-head); font-size: clamp(1.15rem, 2.4vw, 1.55rem); line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; }
.pb__room a { color: inherit; text-decoration: none; background-image: linear-gradient(var(--metal), var(--metal)); background-size: 100% 1px; background-position: 0 92%; background-repeat: no-repeat; }
.pb__room a:hover, .pb__room a:focus-visible { color: var(--accent); }
.pb-arrow { width: 0.42em; height: 0.42em; margin-left: 0.25em; vertical-align: 0.45em; color: var(--ink-soft); }
.pb__room a:hover .pb-arrow, .pb__room a:focus-visible .pb-arrow { color: var(--accent); }
.pb__note { display: block; margin-top: 3px; font: 400 0.875rem/1.4 var(--text); letter-spacing: 0; color: var(--ink-soft); }
.pb__tag { font: 500 0.7rem/1.4 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); text-align: right; align-self: center; }
/* the board flips in row by row (main.js adds .pb-motion only when motion is allowed) */
.pb-motion .pb__row { opacity: 0; transform: rotateX(-86deg); transform-origin: 50% 40%; transition: transform 320ms var(--ease-film), opacity 220ms linear; }
.pb-motion .pb__row.is-in { opacity: 1; transform: none; }
@media (max-width: 760px) {
  .pb-chips { top: calc(env(safe-area-inset-top, 0px) + 84px); margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter);
    background: var(--chip-scrim); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }   /* sticks just under the masthead; frosted so rows scrolling beneath stay out of the chips' way */
  .pb__cols { grid-template-columns: 1fr auto; }
  .pb__cols span:nth-child(2) { display: none; }
  .pb__row { grid-template-columns: 1fr auto; row-gap: 2px; }
  .pb__city { grid-column: 1; grid-row: 1; }
  .pb__room { grid-column: 1 / -1; grid-row: 2; font-size: clamp(1.25rem, 6vw, 1.6rem); }
  .pb__tag { grid-column: 2; grid-row: 1; max-width: 12rem; }
  .pb__row:has(.pb__city:empty) .pb__room { grid-row: 1; grid-column: 1; }
  .pb__row:has(.pb__city:empty) .pb__city { display: none; }
}
@media (prefers-reduced-motion: reduce) { .pb-motion .pb__row { opacity: 1; transform: none; transition: none; } }

/* ---------- D: Studio, the gold room ---------- */
.studio {
  padding: 20vh var(--gutter);
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: 10vh;
  align-items: start;
}
.studio__intro { grid-column: 1 / span 6; }
.studio__title {
  font-family: var(--serif); font-style: italic; font-weight: 400; font-variation-settings: "opsz" 96;
  font-size: clamp(4.5rem, 14vw, 14rem); line-height: 0.9; letter-spacing: -0.03em;
  color: var(--navy); padding-bottom: 0.05em;
}
.studio__meta { margin: 1.4em 0 1.6em; font-weight: 400; }
.studio__note { max-width: 34ch; }
.studio__demo { display: block; margin-top: 0.6em; font-size: 0.85rem; color: #5a2e26; }
.studio__links { display: flex; gap: 28px; margin-top: 28px; }

/* The mixer: a navy lacquer console with chrome faders */
.mixer {
  grid-column: 8 / span 5;
  padding: 26px 26px 22px;
  background: var(--brush), linear-gradient(180deg, var(--navy-hi) 0%, var(--navy) 100%);
  color: var(--cream);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.4), 0 40px 80px rgba(90, 40, 30, 0.3);
}
.mixer__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.mixer__play {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 0 22px 0 16px;
  background: var(--gold-plate); color: var(--navy);
  border: 0; border-radius: 999px; cursor: pointer;
  font: 500 0.85rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 6px 16px rgba(0,0,0,.3);
  transition: transform calc(var(--beat) / 4) ease-out;
}
.mixer__play:active { transform: scale(0.97); }
.mixer__play-icon { width: 11px; height: 14px; background: var(--navy); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.mixer__play[aria-pressed="true"] .mixer__play-icon { width: 11px; height: 12px; clip-path: none; background: linear-gradient(90deg, var(--navy) 0 35%, transparent 35% 65%, var(--navy) 65%); }
.mixer__bpm { font-size: 0.75rem; letter-spacing: 0.16em; color: var(--chrome); }
.mixer__bpm span { font-size: 1.4rem; letter-spacing: 0; color: var(--cream); font-variant-numeric: tabular-nums; margin-right: 4px; }

.mixer__channels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.channel {
  display: grid; grid-template-columns: 10px 1fr; grid-template-rows: 220px auto auto; column-gap: 10px; row-gap: 12px;
  justify-items: center;
  padding: 14px 10px 12px;
}
.meter {
  grid-row: 1; grid-column: 1; width: 6px; height: 100%;
  background:
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(46,24,20,1) 5px 7px),
    linear-gradient(0deg, var(--cobalt-hi) 0%, var(--chrome-hi) 70%, var(--gold) 88%, #ff8f7a 100%);
  -webkit-mask: linear-gradient(0deg, #000 var(--level, 0%), rgba(0,0,0,.12) var(--level, 0%));
          mask: linear-gradient(0deg, #000 var(--level, 0%), rgba(0,0,0,.12) var(--level, 0%));
}
/* vertical chrome fader */
.fader {
  grid-row: 1; grid-column: 2;
  -webkit-appearance: none; appearance: none;
  writing-mode: vertical-lr; direction: rtl;
  width: 36px; height: 100%;
  background: transparent; cursor: grab;
}
.fader::-webkit-slider-runnable-track { width: 4px; background: #1a0c0a; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.fader::-moz-range-track { width: 4px; background: #1a0c0a; border-radius: 2px; }
.fader::-webkit-slider-thumb {
  -webkit-appearance: none; width: 34px; height: 20px; margin-left: -15px; border-radius: 3px;
  background: var(--cream);
  box-shadow: 0 3px 8px rgba(0,0,0,.45), inset 0 -2px 0 rgba(46,24,20,.25);
}
.fader::-moz-range-thumb {
  width: 34px; height: 20px; border: 0; border-radius: 3px;
  background: var(--cream);
}
.mute {
  grid-row: 2; grid-column: 1 / -1;
  min-height: 32px; width: 100%;
  background: transparent; color: var(--chrome);
  border: 1px solid rgba(236,211,204,.35); border-radius: 3px; cursor: pointer;
  font: 500 0.66rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
}
.mute[aria-pressed="true"] { background: var(--gold-plate); color: var(--navy); border-color: transparent; }
.channel__name { grid-row: 3; grid-column: 1 / -1; font-size: 0.8rem; letter-spacing: 0.06em; }

.sets { grid-column: 1 / span 6; }
.sets ul { list-style: none; margin-top: 16px; border-top: 1px solid var(--navy); }
.sets a { display: flex; justify-content: space-between; gap: 16px; padding: 15px 0; min-height: 44px; border-bottom: 1px solid rgba(46,24,20,.25); }
.sets__via { font-size: 0.85rem; color: var(--ink-soft); }

/* ---------- E: Frames ---------- */
.frame--tall { aspect-ratio: 4 / 5; }
.frame--wide { aspect-ratio: 3 / 2; }
.frame--square { aspect-ratio: 1; height: 40vh !important; }

/* ---------- F: Bookings ---------- */
.bookings { padding: 26vh var(--gutter) calc(var(--deck-h) + 8vh); text-align: center; }
.bookings .h-small { color: var(--chrome); }
.bookings__email {
  display: inline-block; margin: 0.3em 0 0.9em;
  font-family: var(--serif); font-style: italic; font-variation-settings: "opsz" 96;
  font-size: clamp(2.2rem, 7.5vw, 7.5rem); line-height: 1.05; letter-spacing: -0.02em; padding: 0 0.08em 0.08em;
}
.socials { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 36px; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; }
.socials a { display: inline-block; padding: 12px 0; transition: color 160ms ease; }
.socials a:hover { color: var(--finale-soft); }
.colophon { margin-top: 14vh; font-size: 0.75rem; color: var(--chrome-lo); letter-spacing: 0.08em; }

/* =================================================================
   THE DECK — fixed CDJ strip: jog, now playing, overview, hot cues, BPM
   ================================================================= */
.deck {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  height: var(--deck-h);
  display: grid; grid-template-columns: auto minmax(120px, 200px) 1fr auto auto; align-items: center; gap: 20px;
  padding: 0 var(--gutter);
  background: var(--brush), linear-gradient(180deg, #5a3530 0%, var(--navy) 55%, #22110e 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 -18px 40px rgba(40,20,16,.3);
  color: var(--cream);
}
.deck__jog { width: 44px; height: 44px; }
.deck__jog svg { width: 100%; height: 100%; display: block; }
.jog-ring { fill: none; stroke: var(--cream); stroke-width: 1.5; }
.jog-plate { fill: #1a0c0a; stroke: rgba(255,255,255,.15); }
.jog-mark { stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round; }
.deck__jog svg { transform-origin: 50% 50%; }

.deck__now { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.deck__cue-letter { font-size: 0.72rem; font-weight: 500; color: var(--navy); background: var(--gold-plate); border-radius: 2px; padding: 2px 6px; }
.deck__title { font-family: var(--serif); font-style: italic; font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* track overview: played portion + cue markers */
.deck__overview { position: relative; height: 18px; }
.deck__overview::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: rgba(236,211,204,.22); }
.deck__played { position: absolute; left: 0; top: 50%; height: 2px; margin-top: -1px; width: 100%; transform-origin: left; transform: scaleX(0); background: var(--gold-fill); }
.deck__markers span {
  position: absolute; top: 0; width: 0; height: 0; margin-left: -5px;
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid var(--chrome);
}
.deck__markers span.is-live { border-top-color: var(--gold-hi); }

.deck__cues { list-style: none; display: flex; gap: 6px; }
.deck__cues a {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 12px 0 8px;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.02));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  transition: background calc(var(--beat) / 2), color calc(var(--beat) / 2);
}
.cue-letter {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 2px;
  font-weight: 500; color: var(--navy);
  background: var(--cream);
}
.deck__cues a.is-live { background: var(--gold-plate); color: var(--navy); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.deck__cues a.is-live .cue-letter { background: var(--navy); color: var(--gold-hi); }
.deck__cues a:hover:not(.is-live) { background: rgba(255,255,255,.14); }

.deck__bpm { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.beat { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); animation: beat var(--beat) steps(1, end) infinite; }
@keyframes beat { 0% { opacity: 1; } 30% { opacity: 0.25; } }

@media (max-width: 1100px) {
  .cue-label { display: none; }
  .deck__cues a { padding: 0 8px; }
}
@media (max-width: 760px) {
  :root { --deck-h: 60px; }
  .deck { grid-template-columns: auto 1fr auto; gap: 8px; }
  .deck__now { display: none; }
  .deck__bpm { font-size: 0.8rem; gap: 0; }
  .deck__bpm .beat { display: none; }      /* the pulsing dot: the number alone fits a phone */
  .deck__overview { order: 3; grid-column: 1 / -1; position: absolute; left: 0; right: 0; top: -9px; height: 18px; }
  .deck__cues { gap: 3px; justify-self: end; }
  .deck__cues a { min-height: 44px; min-width: 34px; justify-content: center; padding: 0; }
  .bio__grid, .studio { grid-template-columns: 1fr; row-gap: 48px; }
  .frame--portrait, .bio__text, .studio__intro, .mixer, .sets { grid-column: 1 / -1; }
  .statement { margin-left: 0; }
  .channel { grid-template-rows: 180px auto auto; }
}

/* ---------- Strobe hits (see strobe.js for the flash limiter) ---------- */
.strobe {
  position: fixed; inset: 0; z-index: 44; pointer-events: none; opacity: 0;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 246, 228, 1) 0%, rgba(255, 246, 228, 0) 55%),
    radial-gradient(90% 70% at 0% 50%, rgba(255, 246, 228, .8) 0%, rgba(255, 246, 228, 0) 50%),
    radial-gradient(90% 70% at 100% 50%, rgba(255, 246, 228, .8) 0%, rgba(255, 246, 228, 0) 50%);
  mix-blend-mode: screen;
}
.strobe.is-hit { animation: strobe-hit 160ms steps(1, end) forwards, strobe-decay 260ms 60ms ease-out forwards; }
@keyframes strobe-hit { 0% { opacity: var(--strobe, .5); } }
@keyframes strobe-decay { from { opacity: var(--strobe, .5); } to { opacity: 0; } }

/* the studio's strobe bar: a thin light over the console that fires on the kick */
.mixer { position: relative; }
.mixer__strobe {
  position: absolute; left: 12%; right: 12%; top: -26px; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, #fff6e4 20%, #fff 50%, #fff6e4 80%, transparent);
  box-shadow: 0 0 24px 6px rgba(255, 246, 228, .55);
  opacity: 0.12; transition: opacity 140ms ease-out;
}
.mixer__strobe.is-on { opacity: 1; transition: none; }

/* ---------- Cursor: a small CDJ jog wheel around the system pointer ----------
   The ring hugs the pointer on a tight follow (main.js); its position marker turns once per bar at 124 BPM,
   like the marker on a CDJ platter. Grows over links, fills with the accent over anything that plays. */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 60;
  width: 36px; height: 36px; margin: -18px 0 0 -18px;
  pointer-events: none; opacity: 0;
  transition: scale 160ms var(--ease-film), opacity 200ms ease;   /* scale composes with the x/y transform GSAP sets */
}
.cursor__wheel { display: block; width: 100%; height: 100%; overflow: visible; animation: cursor-spin calc(var(--beat) * 4) linear infinite; }
.cursor__ring { fill: transparent; stroke: var(--ink); stroke-width: 1.1; vector-effect: non-scaling-stroke; transition: fill 160ms ease, stroke 160ms ease; }
.cursor__mark { fill: var(--accent); }
@keyframes cursor-spin { to { transform: rotate(360deg); } }
.cursor.is-link { scale: 1.55; }
.cursor.is-play { scale: 1.7; }
.cursor.is-play .cursor__ring { fill: color-mix(in srgb, var(--accent) 22%, transparent); stroke: var(--accent); }
.cursor.is-down { scale: 0.86; transition-duration: 90ms; }
@media (prefers-reduced-motion: reduce) { .cursor__wheel { animation: none; } }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ---------- Grain ---------- */
.grain {
  position: fixed; inset: -50%; z-index: 50; pointer-events: none; opacity: 0.08; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 0.9s steps(5) infinite;
}
@keyframes grain { 0% { transform: translate(0,0); } 25% { transform: translate(-2%,3%); } 50% { transform: translate(3%,-2%); } 75% { transform: translate(-3%,-3%); } 100% { transform: translate(0,0); } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .grain, .beat { animation: none; }
  .strobe, .mixer__strobe { display: none; }
  .hero { height: auto; }
  .hero__stage { position: relative; }
  .letterbox, .curtain { display: none; }
  .cursor { display: none; }
}

/* =================================================================
   PALETTE SYSTEM (v6) — replaces the Sakura layers.
   Every colour below comes from semantic tokens; two palettes set them,
   chosen by the sun where the visitor is (sky.js):
     1974        by day: cream paper, chocolate, burnt sienna (the default)
     night       after dark: espresso black, bone type, oxblood, cognac
   The pearl CDJ film is transparent, so it sits in every palette unchanged.
   ================================================================= */
:root[data-palette="night"] {
  --ground:     #15100e;
  --ground-2:   #221915;
  --ink:        #eee4d6;   /* bone */
  --ink-soft:   #b3a594;   /* 7.9:1 on espresso */
  --ink-head:   #f6ede1;   /* headings: brightest bone (the day value is dark espresso: invisible at night) */
  --link:       #e2b8a0;   /* inline links: light rose gold, always underlined (9:1 on espresso) */
  --accent-hover:   #e0bba5;   /* lit rose gold */
  --accent-pressed: #b88f78;
  --listen-bg:  rgba(26, 19, 16, 0.86);   /* masthead Listen over the film */
  --chip-scrim: rgba(21, 16, 14, 0.84);   /* sticky Played chips on phones */
  --accent:     #d0a58c;   /* champagne rose gold, text-safe (8.6:1) */
  --on-accent:  #15100e;
  --metal:      #b98a78;
  --line:       rgba(238, 228, 214, 0.14);
  --glass:      rgba(26, 19, 16, 0.66);
  --glass-line: rgba(238, 228, 214, 0.12);
  --glass-hi:   rgba(255, 240, 225, 0.08);
  --shadow:     rgba(0, 0, 0, 0.45);
  --room-journey: rgba(21, 16, 14, 0.30);
  --room-played:  rgba(30, 22, 19, 0.34);
  --room-studio:  rgba(40, 18, 20, 0.32);
  --room-frames:  rgba(24, 22, 18, 0.32);
  --room-finale:  rgba(8, 6, 5, 0.55);
  --finale-ink:   #eee4d6;
  --finale-soft:  #b3a594;
  --frame-a: #2b211d;  --frame-b: #3a2a24;
  --cue-a: #7d2e33; --cue-b: #5f6f5d; --cue-c: #4f6b6a;
  --cue-d: #7a5c42; --cue-e: #6e5a4a; --cue-f: #7a6244;   /* cream letters read at 5:1 or better */
  --cue-ink: #f3ece2; --cue-ink-dark: #f3ece2;
  --display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --display-style: normal;
  --display-weight: 400;
  --grain: 0.07;
  color-scheme: dark;
}
:root,
:root[data-palette="1974"] {
  /* day: finished pink-lime plaster & limewash — chalky blush, pale oak, warm off-white ink */
  --ground:     #f9e5e0;   /* light limewash plaster */
  --ground-2:   #edd1cb;   /* mid blush plaster */
  --ink:        #412c28;   /* deep plaster-espresso ink (10.7:1 on ground) */
  --ink-head:   #3a221e;   /* headings: a shade deeper espresso for impact (7:1+ everywhere) */
  --link:       #6b241f;   /* inline links: deeper berry so small text holds 4.5:1 on deep rose; always underlined */
  --ink-soft:   #4f322c;   /* muted plaster-brown: >=4.5:1 even on the deepest mesh moment */
  --accent:     #77332e;   /* terracotta-berry: links, active (7.6:1 on ground) */
  --accent-hover:   #893934;   /* lit terracotta on hover */
  --accent-pressed: #622824;   /* deepened terracotta on press */
  --on-accent:  #fdf2ef;
  --listen-bg:  rgba(251, 238, 234, 0.94);   /* masthead Listen: near-solid over the moving film */
  --chip-scrim: rgb(251 228 223 / 0.72);   /* sticky Played chips on phones */
  --on-film:    #f9e5e0;   /* type drawn over the CDJ film (title, callouts): the film looks the same day and night, so this never flips */
  --metal:      #b1867e;   /* oak floor, hairlines only */
  --line:       rgba(65, 44, 40, 0.14);
  --glass:      rgba(253, 242, 239, 0.9);   /* opaque enough that deck-bar text holds contrast over the moving film */
  --glass-line: rgba(65, 44, 40, 0.12);
  --glass-hi:   rgba(255, 249, 246, 0.6);
  --shadow:     rgba(65, 44, 40, 0.14);
  --room-journey: rgba(249, 229, 224, 0.42);
  --room-played:  rgba(246, 216, 209, 0.50);
  --room-studio:  rgba(254, 221, 211, 0.48);
  --room-frames:  rgba(247, 222, 216, 0.42);
  --room-finale:  rgba(48, 32, 29, 0.94);   /* deep plaster-espresso finale, near-solid so small labels hold contrast */
  --finale-ink:   #f9e5e0;
  --finale-soft:  #d6b3ac;
  --frame-a: #f6d8d1;  --frame-b: #e3bbb2;
  --cue-a: #d59b91; --cue-b: #dcb2ab; --cue-c: #e9beb4;
  --cue-d: #d0a49d; --cue-e: #754b45; --cue-f: #77332e;
  --cue-ink: #412c28; --cue-ink-dark: #fdf2ef;
  --display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --display-style: italic;
  --display-weight: 400;
  --grain: 0.06;
}

/* legacy names used by the base layout rules, pointed at the palette */
:root {
  --cobalt: var(--ground); --cobalt-hi: var(--ground); --cobalt-lo: var(--ground-2);
  --navy: var(--ink); --navy-hi: var(--ink-soft);
  --cream: var(--ground);
  --chrome: var(--ink-soft); --chrome-lo: var(--ink-soft); --chrome-hi: var(--ground);
  --gold: var(--metal); --gold-hi: var(--metal); --gold-lo: var(--accent);
  --gold-plate: linear-gradient(var(--accent), var(--accent));
  --gold-fill: linear-gradient(var(--ink), var(--ink));
  --chrome-fill: linear-gradient(var(--ink), var(--ink));
  --brush: linear-gradient(transparent, transparent);
  --serif: var(--display);
  --text: "Hanken Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
}

html { background: var(--ground); transition: background-color 0.8s ease; }
body { font-family: var(--text); font-weight: 400; color: var(--ink); background: transparent; }
.wordmark, .titlecard__name, .titlecard__credit, .h-small, .deck__cues a, .curtain__loading, .socials { font-family: var(--sans); }
.wordmark { color: var(--ink); }
.titlecard__name { color: var(--ground); }
.titlecard__credit { color: rgb(251 228 223 / 0.9); text-shadow: 0 1px 10px rgb(40 22 20 / 0.35); }   /* over the hero film */
.h-display, .statement, .studio__title, .bookings__email, .deck__title {
  font-family: var(--display); font-style: normal; font-weight: var(--display-weight); font-variation-settings: normal;
}
/* the palette's italic (1974) is for headlines only; long lines stay upright */
.h-display, .studio__title { font-style: var(--display-style); }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline-color: var(--accent); }

/* ---------- living backdrop (Paper Shaders mesh gradient, 10 colours per mood; see backdrop.js) ---------- */
.backdrop { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.backdrop canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
/* film grain over the gradient: one static SVG noise tile, so it stays crisp while the gradient renders small */
.backdrop::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.45 0 0 0 0 0.48 0 0 0 1.2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.sheen { display: none; }

/* sections let the gradient through; a tint of their own keeps text contrast steady */
.room--journey { background: var(--room-journey); color: var(--ink); }
.room--played  { background: var(--room-played);  color: var(--ink); }
.room--studio  { background: var(--room-studio);  color: var(--ink); }
.room--frames  { background: var(--room-frames);  color: var(--ink); }
.room--finale  { background: var(--room-finale);  color: var(--finale-ink); }
.room--finale .h-small, .room--finale .residency__note { color: var(--finale-soft); }
.room--finale .link, .room--finale a { color: var(--finale-ink); }
.no-backdrop .room--journey, .no-backdrop .room--frames { background: var(--ground); }
.no-backdrop .room--played, .no-backdrop .room--studio { background: var(--ground-2); }
.no-backdrop .room--finale { background: var(--ink); color: var(--ground); }
/* 1974: the Played room is a chocolate block, so its type flips to cream */

/* ---------- the opening ---------- */
.hero__stage { background: transparent; color: var(--ink); }
.hero__stage::after { display: none; }
.letterbox { display: none; }
.curtain { background: var(--ground); }
.curtain__loading { color: var(--ink-soft); }
.curtain__loading em { color: var(--ink); font-family: var(--display); font-style: var(--display-style); font-size: 1.9rem; }
/* the Lottie wordmark is authored in plum; every palette recolours it to its own ink */
.titlecard__lottie svg path { fill: var(--on-film) !important; }
.titlecard__name { color: var(--on-film); }   /* pale on the rosewood film (dark ink sank below 3:1 there) */
.titlecard__lottie {
  position: absolute; left: 50%; top: calc(var(--tc-size) * -0.005); transform: translateX(-50%);
  width: calc(var(--tc-size) * 760 / 72); height: calc(var(--tc-size) * 80 / 72);
}
.titlecard__lottie svg { display: block; }
.titlecard.has-lottie .titlecard__name { color: transparent; }

/* caption plates */

/* frames and placeholders */
.frame { background: var(--frame-a); box-shadow: 0 24px 60px var(--shadow); border-radius: 2px; }
.placeholder { background: linear-gradient(160deg, var(--frame-a) 0%, var(--frame-b) 100%); color: var(--ink-soft); }
.placeholder span:first-child { color: var(--accent); }


/* studio console */
.studio__demo, .sets__via { color: var(--ink-soft); }
.sets ul { border-top-color: var(--ink); }
.sets a { border-bottom-color: var(--line); }
.mixer {
  background: var(--glass); color: var(--ink);
  -webkit-backdrop-filter: blur(20px) saturate(1.1); backdrop-filter: blur(20px) saturate(1.1);
  border: 1px solid var(--glass-line); border-radius: 6px;
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 30px 70px var(--shadow);
}
.mixer__bpm { color: var(--ink-soft); }
.mixer__bpm span { color: var(--ink); }
.mixer__play { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.mixer__play:hover { background: var(--accent-hover); }
.mixer__play:active { background: var(--accent-pressed); }
.mixer__play-icon { background: var(--on-accent); }
.mixer__play[aria-pressed="true"] .mixer__play-icon { background: linear-gradient(90deg, var(--on-accent) 0 35%, transparent 35% 65%, var(--on-accent) 65%); }
.meter { background: repeating-linear-gradient(0deg, transparent 0 5px, var(--glass) 5px 7px),
                     linear-gradient(0deg, var(--cue-c) 0%, var(--cue-b) 40%, var(--cue-d) 65%, var(--cue-a) 100%); }
.fader::-webkit-slider-runnable-track { background: var(--line); box-shadow: none; }
.fader::-moz-range-track { background: var(--line); }
.fader::-webkit-slider-thumb { background: var(--ink); box-shadow: 0 3px 10px var(--shadow), inset 0 -2px 0 var(--accent); }
.fader::-moz-range-thumb { background: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.mute { color: var(--ink-soft); border-color: var(--line); }
.mute:hover:not([aria-pressed="true"]) { border-color: var(--metal); color: var(--ink); }
.mute[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.mute[aria-pressed="true"]:hover { background: var(--accent-hover); }
.mixer__strobe { background: linear-gradient(90deg, transparent, #fff 25%, #fff 75%, transparent); box-shadow: 0 0 22px 6px rgba(255,255,255,.9); }

/* ---------- the deck bar ---------- */
.deck {
  background: var(--glass); color: var(--ink);
  -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1);
  border-top: 1px solid var(--glass-line);
  box-shadow: 0 -12px 40px var(--shadow);
}
.jog-ring { stroke: var(--ink); }
.jog-plate { fill: var(--ground); stroke: var(--glass-line); }
.jog-mark { stroke: var(--accent); }
.deck__cue-letter { background: var(--accent); color: var(--on-accent); }
.deck__overview::before { background: var(--line); }
.deck__played { background: var(--accent); }
.deck__markers span { border-top-color: var(--ink-soft); }
.deck__markers span.is-live { border-top-color: var(--accent); }
.deck__cues a { background: transparent; box-shadow: inset 0 0 0 1px var(--glass-line); color: var(--ink); border-radius: 3px; }
.deck__cues a:hover:not(.is-live) { background: var(--glass-hi); }
/* each hot cue carries its own muted colour, live or not */
.deck__cues li:nth-child(1) { --cue: var(--cue-a); --cue-fg: var(--cue-ink); }
.deck__cues li:nth-child(2) { --cue: var(--cue-b); --cue-fg: var(--cue-ink); }
.deck__cues li:nth-child(3) { --cue: var(--cue-c); --cue-fg: var(--cue-ink); }   /* pale green: dark letter (light was 1.8:1) */
.deck__cues li:nth-child(4) { --cue: var(--cue-d); --cue-fg: var(--cue-ink); }
.deck__cues li:nth-child(5) { --cue: var(--cue-e); --cue-fg: var(--cue-ink-dark); }
.deck__cues li:nth-child(6) { --cue: var(--cue-f); --cue-fg: var(--cue-ink-dark); }
.deck__cues .cue-letter,
.deck__cues a.is-live .cue-letter { background: var(--cue); color: var(--cue-fg); border-radius: 2px; }
.deck__cues a.is-live { background: var(--ink); color: var(--ground); box-shadow: none; }
.beat { background: var(--accent); }

.link { color: var(--link); background-image: linear-gradient(var(--metal), var(--metal)); }   /* one meaning: berry + underline = you can go there */
.grain { opacity: var(--grain); }
.strobe { mix-blend-mode: normal; }

@media (prefers-reduced-transparency: reduce) {
  .deck, .mixer { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--ground); }
}

/* portrait phones */
@media (max-aspect-ratio: 4/5) {
  .titlecard { top: calc(env(safe-area-inset-top, 0px) + 12vh); --tc-size: clamp(1.4rem, 7vw, 2.2rem); }
  .titlecard__name { letter-spacing: 0.42em; padding-left: 0.42em; }
}

/* the fixed masthead: a soft strip in the ground colour so text never runs under the wordmark */
.masthead::before {
  content: ""; position: absolute; inset: 0 0 -44px 0; z-index: -1;
  background: linear-gradient(180deg, var(--ground) 0%, color-mix(in srgb, var(--ground) 80%, transparent) 55%, transparent 100%);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
          mask-image: linear-gradient(180deg, #000 60%, transparent);
}
.masthead.on-dark .wordmark { color: var(--finale-ink); }
.masthead.on-dark::before { background: linear-gradient(180deg, rgba(10, 8, 7, 0.6) 0%, transparent 100%); }

/* ---------- Bookings: the residency leads, then contact and press ---------- */
.residency { margin-bottom: clamp(48px, 8vw, 96px); }
.residency__venue { font-size: clamp(2.6rem, 7vw, 5.6rem); line-height: 1; margin: 0.15em 0 0.2em; }
.residency__note { font-size: 0.95rem; }
.press-links { list-style: none; padding: 0; margin: 1.6em 0 2.4em; display: flex; flex-wrap: wrap; gap: 12px 32px; }

/* ---------- photo slots: drop a file into images/ with the slot's name and it replaces the placeholder ---------- */
.frame > img, .frame > picture { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }
.frame > img, .frame > picture > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.frame > img.is-missing { display: none; }
.frame > video { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; }   /* the KOKO reel in the bio frame */

/* ---------- Masthead: Listen, from the first second ---------- */
.masthead { display: flex; justify-content: space-between; align-items: center; }
.masthead__listen {
  pointer-events: auto; display: inline-flex; align-items: center; gap: 10px;
  font: 500 0.72rem/1 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; text-decoration: none;
  color: var(--ink); padding: 10px 14px; border: 1px solid var(--glass-line); border-radius: 2px;
  background: var(--listen-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);   /* near-solid: it sits over the moving film */
}
.masthead__listen { cursor: pointer; min-height: 44px; padding: 0 16px 0 10px; box-sizing: border-box; transition: background-color 160ms var(--ease-film), color 160ms var(--ease-film), border-color 160ms var(--ease-film); }
.masthead__listen:focus-visible { background: var(--ink); color: var(--ground); outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .masthead__listen:hover { background: var(--ink); color: var(--ground); } }
@media (hover: none), (pointer: coarse) { .masthead__listen:active { scale: 0.97; } }   /* fine pointers get GSAP's magnetic press instead */
/* the play ring: icon morphs play/pause, the ring fills with the mix's progress, and spins while it loads */
/* both words share one grid cell, so the button keeps the width of the longer word and never shifts */
.listen__label { display: inline-grid; }
.listen__word { grid-area: 1 / 1; }
.listen__word + .listen__word, .masthead__listen.is-playing .listen__word:first-child { visibility: hidden; }
.masthead__listen.is-playing .listen__word + .listen__word { visibility: visible; }
.listen__ring { width: 22px; height: 22px; flex: none; overflow: visible; }
.listen__track, .listen__prog { fill: none; stroke: currentColor; stroke-width: 1.4; }
.listen__track { opacity: 0.28; }
.listen__prog { stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0)); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 12px 12px; transition: stroke-dashoffset 400ms linear; }
.listen__play, .listen__pause { fill: currentColor; transform-box: fill-box; transform-origin: center; transition: opacity 180ms var(--ease-film), transform 180ms var(--ease-film); }
.listen__pause { opacity: 0; transform: scale(0.6); }
.masthead__listen.is-playing .listen__play { opacity: 0; transform: scale(0.6); }
.masthead__listen.is-playing .listen__pause { opacity: 1; transform: none; }
.masthead__listen.is-loading .listen__prog { stroke-dasharray: 22 78; transition: none; animation: listen-spin 0.9s linear infinite; }
@keyframes listen-spin { to { transform: rotate(270deg); } }
@media (prefers-reduced-motion: reduce) { .masthead__listen.is-loading .listen__prog { animation-duration: 2.4s; } }
.masthead.on-dark .masthead__listen { color: var(--finale-ink); background: rgba(45, 30, 27, 0.9); border-color: rgba(251, 228, 223, 0.2); }

/* ---------- Opening: scroll hint (appears only after four bars of stillness) ---------- */
.scroll-cue {
  position: absolute; z-index: 3; left: 50%; bottom: calc(var(--deck-h) + 28px); transform: translate(-50%, 8px);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font: 500 0.68rem/1 var(--sans); letter-spacing: 0.3em; padding-left: 0.3em; text-transform: uppercase; color: rgb(251 228 223 / 0.85);   /* over the hero film */
  opacity: 0; transition: opacity 0.8s var(--ease-film), transform 0.8s var(--ease-film); pointer-events: none;
}
.scroll-cue.is-on { opacity: 1; transform: translate(-50%, 0); }
.scroll-cue__line { width: 1px; height: 36px; background: linear-gradient(rgb(251 228 223 / 0.85), transparent); transform-origin: top; animation: cue-line calc(var(--beat) * 4) var(--ease-film) infinite; }
@keyframes cue-line { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- Listen strip and click-to-play players ---------- */

/* ---------- Played: rooms with recordings link to them ---------- */

/* ---------- Share ---------- */

.share .h-small { margin: 0 8px 0 0; }

@media (max-width: 760px) {
  .masthead__listen { padding: 0 13px 0 9px; gap: 8px; letter-spacing: 0.18em; }
  
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue__line { animation: none; }
}

/* =================================================================
   FRAMES — SX-70 prints on the table (1972's instant film, right for "1974")
   ================================================================= */
:root { --paper: #f3ede2; --paper-shade: #e6ddcd; --lightbox: rgba(24, 16, 12, 0.92); }
:root[data-palette="night"] { --paper: #ece3d4; --paper-shade: #d9ccb7; --lightbox: rgba(6, 4, 3, 0.94); }

.frames { padding: clamp(80px, 12vw, 160px) var(--gutter) clamp(80px, 10vw, 140px); }
.frames__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: clamp(24px, 4vw, 48px); }

.table { position: relative; height: min(88vh, 860px); }
:root[data-palette="night"] .table::before {             /* a pool of warm lamplight on the table after dark */
  content: ""; position: absolute; inset: -10% -5%; z-index: 0; pointer-events: none;
  background: radial-gradient(55% 60% at 50% 42%, rgba(255, 214, 170, 0.16), transparent 70%);
}

   /* a touch of instant-film warmth */

/* ---------- flyer wall (Played): dated, billed proof ---------- */

/* ---------- lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: var(--lightbox); cursor: zoom-out; }
.lightbox[hidden] { display: none; }
.lightbox__stage { display: grid; place-items: center; width: 100%; height: 100%; padding: 6vh 4vw calc(var(--deck-h) + 4vh); }
.lightbox__stage img { width: auto; height: auto; max-width: 92vw; max-height: calc(100svh - 10vh - var(--deck-h)); object-fit: contain; filter: none; box-shadow: 0 40px 80px rgba(0,0,0,.45); }
.lightbox__close {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 20px); right: var(--gutter);
  font: 500 0.7rem/1 var(--sans); letter-spacing: 0.24em; text-transform: uppercase;
  color: #f3e7d3; background: none; border: 1px solid rgba(243, 231, 211, 0.4); border-radius: 2px; padding: 11px 16px; cursor: pointer;
}

/* ---------- film break: a full-bleed reel between Played and Studio ---------- */

/* phones: the table becomes a loose two-column pile (no dragging; tap to open) */
@media (max-width: 760px) {
  .table { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 18px; padding: 8px 4px; }
  
  
  
}

.masthead.over-played .wordmark { color: #f3e7d3; }
.masthead.over-played::before { background: linear-gradient(180deg, rgba(46, 31, 24, 0.92) 0%, rgba(46, 31, 24, 0.7) 55%, transparent 100%); }
.masthead.over-played .masthead__listen { color: #f3e7d3; background: rgba(46, 31, 24, 0.5); border-color: rgba(243, 231, 211, 0.3); }

/* =================================================================
   IN THE BOOTH — DJ photos on a 35mm strip (fashion lives on the Polaroid table)
   ================================================================= */

.booth .h-small { padding: 0 var(--gutter); margin-bottom: 28px; color: #c7ae92; }

   /* edge print, like Kodak frame numbers */

@media (max-width: 760px) {
}

.bookings__events { max-width: 40em; margin: 1.4em 0 0; color: var(--finale-soft); font-size: 0.95rem; }

.room--finale .colophon { color: var(--finale-soft); }

/* ---------- Music: every set as an Apple-Music-style pill player ---------- */
.sets__sound { font: var(--display-style) var(--display-weight) clamp(1.2rem, 2.2vw, 1.55rem)/1.3 var(--display); margin: 8px 0 28px; }
.sets__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.set { display: block; }
.sets__more { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 28px; }
.sets .h-small { margin-bottom: 0; }

/* The pill: one capsule per set (and Sakura). Nothing from SoundCloud/Mixcloud/Spotify
   loads until its play button is tapped -- see main.js "Music pills". */
.pill {
  position: relative; isolation: isolate;
  display: flex; align-items: center; gap: 14px;
  min-height: 64px; padding: 8px 20px 8px 8px; box-sizing: border-box;
  border-radius: 999px; border: 1px solid var(--line); background: var(--glass);
  box-shadow: 0 1px 0 var(--glass-hi) inset, 0 14px 28px -14px var(--shadow);
  transition: box-shadow 200ms var(--ease-film);
}
@media (hover: hover) and (pointer: fine) {
  .pill:hover { box-shadow: 0 1px 0 var(--glass-hi) inset, 0 18px 36px -14px var(--shadow); }
}

/* the round play/pause button: 44px, accent fill, morphing icon */
.pill__play {
  flex: 0 0 auto; position: relative; z-index: 1;
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent);
  transition: transform 160ms var(--ease-film), background-color 160ms var(--ease-film);
}
.pill__play:active { transform: scale(0.96); }
.pill__play:disabled { cursor: default; }
.pill__play:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .pill__play:hover:not(:disabled) { background: var(--accent-hover); }
}
.pill__icon { width: 18px; height: 18px; overflow: visible; }
.pill__icon-play, .pill__icon-pause { fill: currentColor; transform-box: fill-box; transform-origin: center; transition: opacity 180ms var(--ease-film), transform 180ms var(--ease-film); }
.pill__icon-pause { opacity: 0; transform: scale(0.85); }
.pill__play[aria-pressed="true"] .pill__icon-play { opacity: 0; transform: scale(0.85); }
.pill__play[aria-pressed="true"] .pill__icon-pause { opacity: 1; transform: scale(1); }
/* loading state: the icon fades for a small spinner while the provider script loads */
.pill__spinner { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--on-accent); border-top-color: transparent; }
.pill.is-loading .pill__icon { opacity: 0; }
.pill.is-loading .pill__spinner { display: block; animation: pill-spin 700ms linear infinite; }
@keyframes pill-spin { to { transform: rotate(360deg); } }

/* title + meta: DM Sans for the title, tiny tracked Jost caps for the meta beneath */
.pill__info { flex: 1 1 auto; min-width: 0; padding-bottom: 10px; }
.pill__title {
  display: block; font: 500 1rem/1.25 var(--text); color: var(--ink-head);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color 160ms var(--ease-film);
}
.pill.is-playing .pill__title { color: var(--accent); }
.pill__meta {
  display: block; margin-top: 3px; font: 500 0.6875rem/1 var(--sans);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* elapsed time (right) and provider word (tiny, subtle) */
.pill__side { flex: 0 0 auto; display: grid; justify-items: end; gap: 2px; padding-bottom: 10px; }
.pill__time { font: 500 0.75rem/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.pill:not(.is-started) .pill__time { visibility: hidden; }   /* no '0:00' on sets nobody has played yet */
@media (max-width: 760px) { .pill__via { display: none; } }   /* phones: the width goes to the set's label, not the provider */
.pill__via { font: 500 0.625rem/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); opacity: 0.65; }

/* the progress line: a hairline rail along the pill's bottom inner edge, filled in accent */
.pill__track { position: absolute; left: 66px; right: 20px; bottom: 11px; height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; pointer-events: none; }
.pill__fill { display: block; height: 100%; width: 0%; background: var(--accent); transition: width 200ms linear; }

/* the controlling iframe: not display:none (the SoundCloud/Mixcloud widget APIs need a live, rendered
   iframe to postMessage with) -- just visually gone, off-flow, and out of the accessibility tree */
.pill__hidden-frame { position: absolute; width: 1px; height: 1px; opacity: 0; left: -9999px; top: 0; border: 0; pointer-events: none; }

/* fallback: the provider script didn't load in time, so the raw player is revealed under the pill */
.pill__fallback, .pill__spotify {
  margin-top: 10px; border-radius: 24px; overflow: clip; border: 1px solid var(--line); background: var(--ground-2);
}
.pill__fallback-frame, .pill__spotify-frame { display: block; width: 100%; border: 0; }
.pill__spotify { border-radius: 16px; }

@media (prefers-reduced-motion: reduce) {
  .pill, .pill__play, .pill__icon-play, .pill__icon-pause, .pill__fill, .pill__title { transition: none; }
}

@media (max-width: 760px) {
  .pill { min-height: 56px; gap: 12px; padding: 6px 16px 6px 6px; }
  .pill__play { width: 40px; height: 40px; }
  .pill__title { font-size: 0.9375rem; }
  .pill__track { left: 58px; right: 16px; }
}

/* ---------- Final section: the brand, contact, links, socials ---------- */
.bookings__mark { display: block; width: min(560px, 80vw); height: auto; margin: 0 0 clamp(40px, 6vw, 72px); }
.studio .sets { grid-column: 1 / -1; }
.sets__more a { display: inline; padding: 0; min-height: 0; border: 0; }

/* =================================================================
   TYPOGRAPHY (Lily picked option C, 2026-09-27): DM Serif Display + DM Sans.
   Headings are the loudest thing on the page: DM Serif Display (one weight, high contrast),
   big, tight, full-strength ink, with one italic accent word in the accent colour (<em>).
   DM Sans for reading text; Jost 500 for the wordmark and labels.
   Floors: no text under 13px; tracked capitals 0.10-0.14em below 16px.
   ================================================================= */
:root, :root[data-palette="1974"], :root[data-palette="night"] {
  --display: "DM Serif Display", "Didot", "Bodoni 72", Georgia, serif;
  --display-style: normal;
  --display-weight: 400;
  --text: "DM Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --serif: var(--display);
}
body { font-family: var(--text); font-weight: 400; font-size: 1.0625rem; line-height: 1.65; font-optical-sizing: auto; }
p, li { font-weight: 400; }
em { font-style: italic; }

/* DM Serif Display has a single weight: never let the browser fake a bold */
.h-display, .studio__title, .statement, .bookings__email, .deck__title, .sets__sound,
.polaroid__cap {
  font-family: var(--display); font-weight: 400; font-synthesis: none; font-variation-settings: normal;
}
/* section headings: big, tight, full ink */
.h-display {
  font-style: normal; color: var(--ink-head);
  font-size: clamp(3.5rem, 8vw, 7.5rem); line-height: 0.92; letter-spacing: -0.028em;
  text-wrap: balance; padding-bottom: 0.06em;
}
.h-display em, .statement em { color: var(--accent); font-style: normal; }   /* the accent word pops by colour, upright like the rest */
/* SplitText line masks clip at the padding box: give ascenders, descenders and italic overhang room
   (tight 0.92 leading would otherwise cut the tail of y, g, p), without moving the layout */
.reveal-lines > div { padding: 0.08em 0.12em 0.2em 0; margin: -0.08em -0.12em -0.2em 0; }
.bio__text .h-display { font-size: clamp(3rem, 6vw, 6rem); }
.statement { font-style: normal; font-size: clamp(2rem, 4.4vw, 4.6rem); line-height: 1.06; letter-spacing: -0.02em; color: var(--ink-head); max-width: 25ch; }
.studio__title { font-style: normal; font-size: clamp(5rem, 15vw, 14rem); line-height: 0.86; letter-spacing: -0.035em; color: var(--accent); }
.bookings__email { font-style: normal; font-size: clamp(2.4rem, 8vw, 8rem); line-height: 1; letter-spacing: -0.025em; }
.deck__title { font-style: normal; }
.sets__sound { font-style: normal; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.3; letter-spacing: -0.01em; }

/* reading text */
.bio__text p, .studio__note, .studio__meta, .copy p { font-size: 1.0625rem; line-height: 1.7; max-width: 62ch; }
.studio__demo, .sets__via, .residency__note { font-size: 0.875rem; font-weight: 500; }

/* labels: Jost 500, 13px floor, tracking scaled to size */
.h-small, .frames__hint, .scroll-cue, .deck__cues a, .masthead__listen, .titlecard__credit,
.socials a, .colophon, .mute, .channel__name, .mixer__bpm, .gal__cap {
  font-family: var(--sans); font-weight: 500;
}
.h-small { font-size: 0.8125rem; letter-spacing: 0.14em; }
.frames__hint, .colophon, .mute, .channel__name { font-size: 0.8125rem; letter-spacing: 0.1em; }
.titlecard__credit { font-size: 0.875rem; letter-spacing: 0.24em; }
.masthead__listen { font-size: 0.8125rem; letter-spacing: 0.16em; }
.deck__cues a { font-size: 0.8125rem; letter-spacing: 0.1em; }
.socials a { font-size: 0.875rem; letter-spacing: 0.08em; }

/* =================================================================
   FRAMES — one editorial grid for every photo and reel (PhotoSwipe opens them)
   Desktop 4 columns · tablet 3 · phone 2. Cells are square; tiles span big 2x2, tall 1x2, wide 2x1, sq 1x1.
   ================================================================= */
.frames { padding: clamp(80px, 11vw, 150px) var(--gutter) clamp(80px, 10vw, 140px); }
.frames__head { margin-bottom: clamp(28px, 4vw, 52px); }
.gal {
  --cols: 4; --gap: clamp(10px, 1.2vw, 18px);
  --cell: calc((min(100vw, 1600px) - 2 * var(--gutter) - (var(--cols) - 1) * var(--gap)) / var(--cols));
  display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-auto-rows: var(--cell);
  grid-auto-flow: dense; gap: var(--gap); max-width: 1600px; margin: 0 auto;
}
.gal__item { position: relative; display: block; overflow: hidden; border-radius: 2px; background: var(--frame-a); cursor: zoom-in; }
.gal--big  { grid-column: span 2; grid-row: span 2; }
.gal--tall { grid-row: span 2; }
.gal--wide { grid-column: span 2; }
.gal__item img, .gal__item video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-film); }
.gal__item:focus-visible img { transform: scale(1.035); }
@media (hover: hover) and (pointer: fine) { .gal__item:hover img, .gal__item:hover video { transform: scale(1.035); } }
.gal__item:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.gal--reel::after {                       /* a small "reel" mark so a moving tile reads as intentional */
  content: "Reel"; position: absolute; left: 12px; bottom: 12px; padding: 5px 9px; border-radius: 2px;
  font: 500 0.8125rem/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: #fbf1ee; background: rgba(46, 37, 48, 0.55);
}
@media (max-width: 1100px) { .gal { --cols: 3; } }
@media (max-width: 760px) {
  .gal { --cols: 2; --gap: 10px; }
  .gal--tall { grid-row: span 2; }
}
@media (prefers-reduced-motion: reduce) { .gal__item img, .gal__item video { transition: none; } }
/* PhotoSwipe: match the site's quiet chrome */
.pswp { --pswp-bg: #1a1418; --pswp-icon-color: #fbf1ee; }

.pill.studio__player { max-width: 560px; margin: 20px 0 12px; }
/* final section: one centred column — brand, contact, links, socials */
.bookings { text-align: center; }
.bookings__mark { margin-left: auto; margin-right: auto; }
.bookings .press-links, .bookings .socials { justify-content: center; }
.masthead.on-dark .masthead__listen { color: var(--finale-ink); background: rgba(46, 37, 48, 0.55); border-color: rgba(246, 230, 228, 0.3); }
@media (max-width: 760px) {
  .studio, .bio__grid { grid-template-columns: minmax(0, 1fr); }      /* never let a wide child stretch the phone column */
  .studio > *, .sets__list, .set, .mixer { min-width: 0; }
  .bookings .press-links { flex-direction: column; align-items: center; gap: 14px; }
  /* Played on a phone: the venue gets the full width, the city sits under it */
  .mixer__channels { gap: 8px; }
  .channel .mute { padding-left: 4px; padding-right: 4px; letter-spacing: 0.08em; max-width: 100%; }
}

/* press feedback (the magnetic buttons get theirs from main.js, since GSAP owns their transform) */
.mute, .deck__cues a { transition-property: background-color, color, border-color, scale; transition-duration: 200ms, 200ms, 200ms, 140ms; transition-timing-function: var(--ease-film); }
.mute:active, .deck__cues a:active { scale: 0.97; }
/* phones, 4-core laptops and ?lite: no continuous layers */
.low-power .grain { animation: none; }
.low-power .cursor { display: none; }

/* ===== Sakura video: a still poster, YouTube (no-cookie) loads only on tap ===== */
.vid { max-width: 560px; margin: 8px 0 20px; }
.vid__poster, .vid__frame {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; max-width: 100%;
  border-radius: 18px; overflow: hidden; background: #140c0b;
  box-shadow: 0 0 0 1px var(--line), 0 14px 28px -14px var(--shadow);
}
.vid__poster { padding: 0; border: 0; cursor: pointer; }
.vid__poster img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 400ms var(--ease-film), filter 400ms var(--ease-film); }
.vid__poster::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgb(20 12 11 / 0.28), transparent 42%); pointer-events: none; }
.vid__btn {
  position: absolute; left: 50%; top: 50%; z-index: 1; translate: -50% -50%;
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent);
  box-shadow: 0 10px 26px -8px rgb(20 12 11 / 0.55);
  transition: scale 160ms var(--ease-film), background-color 160ms var(--ease-film);
}
.vid__btn svg { width: 26px; height: 26px; fill: currentColor; translate: 1px 0; }
.vid__poster:active .vid__btn { scale: 0.96; }
.vid__poster:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .vid__poster:hover img { scale: 1.02; filter: saturate(1.06); }
  .vid__poster:hover .vid__btn { background: var(--accent-hover); scale: 1.04; }
}
@media (prefers-reduced-motion: reduce) { .vid__poster img { transition: none; } }
.vid__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vid__cap { display: flex; justify-content: space-between; gap: 16px; margin-top: 10px; font-size: 0.875rem; font-weight: 500; color: var(--ink-soft); }
.vid__via { letter-spacing: 0.04em; }

/* ===== Day / night switch: iOS-style, beside Listen ===== */
.masthead__right { display: flex; align-items: center; gap: 10px; pointer-events: auto; }
.theme-toggle {
  display: grid; place-items: center; width: 56px; height: 44px; padding: 0; border: 0; background: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.theme-toggle__track {
  position: relative; display: block; width: 52px; height: 30px; border-radius: 999px; box-sizing: border-box;
  background: var(--listen-bg); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: background-color 240ms var(--ease-film), border-color 240ms var(--ease-film);
}
.theme-toggle__thumb {
  position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 999px;
  display: grid; place-items: center; background: var(--ink); color: var(--ground);
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.22);
  transform-origin: left center;
  transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1), background-color 240ms ease, color 240ms ease;   /* iOS drawer curve */
}
.theme-toggle[aria-checked="true"] .theme-toggle__thumb { transform: translateX(20px); transform-origin: right center; }
.theme-toggle:active .theme-toggle__thumb { transform: scaleX(1.22); }                                          /* the thumb stretches while held, like iOS */
.theme-toggle[aria-checked="true"]:active .theme-toggle__thumb { transform: translateX(20px) scaleX(1.22); }
.theme-toggle__thumb svg { position: absolute; width: 15px; height: 15px; transition: opacity 200ms ease, transform 300ms cubic-bezier(0.32, 0.72, 0, 1); }
.theme-toggle__sun { fill: currentColor; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.theme-toggle__moon { fill: currentColor; opacity: 0; transform: rotate(-60deg) scale(0.6); }
.theme-toggle[aria-checked="true"] .theme-toggle__sun { opacity: 0; transform: rotate(60deg) scale(0.6); }
.theme-toggle[aria-checked="true"] .theme-toggle__moon { opacity: 1; transform: none; }
.theme-toggle:focus-visible { outline: none; }
.theme-toggle:focus-visible .theme-toggle__track { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .theme-toggle:hover .theme-toggle__track { border-color: var(--accent); } }
.masthead.on-dark .theme-toggle__track { background: rgba(45, 30, 27, 0.9); border-color: rgba(251, 228, 223, 0.2); }
.masthead.on-dark .theme-toggle__thumb { background: var(--finale-ink); color: #2d1e1b; }
.masthead.over-played .theme-toggle__track { background: rgba(46, 31, 24, 0.5); border-color: rgba(243, 231, 211, 0.3); }
.masthead.over-played .theme-toggle__thumb { background: #f3e7d3; color: #2e1f18; }
@media (max-width: 760px) { .masthead__right { gap: 4px; } .theme-toggle { width: 52px; } }
@media (prefers-reduced-motion: reduce) { .theme-toggle__thumb, .theme-toggle__thumb svg { transition-duration: 0ms; } }
/* the page crossfades between day and night where the browser supports View Transitions */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 420ms; animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }