/* Silk Audio Music, direction C: THE TURNTABLE (2026-10-17)
   A fixed stage (a real-time record) that the chapters scroll past; the needle scrubs with scroll.
   Type system A kept as is: Bodoni Moda (variable) for titles, Montserrat for labels, buttons and body,
   pill buttons. The scale is in README.md ("Type system"). */
@font-face{font-family:"Bodoni Moda";src:url("fonts/bodoni-moda-var.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url("fonts/bodoni-moda-italic-var.woff2") format("woff2");font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:"Montserrat";src:url("fonts/montserrat-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Montserrat";src:url("fonts/montserrat-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Montserrat";src:url("fonts/montserrat-800.woff") format("woff");font-weight:800;font-display:swap}
@font-face{font-family:"Bodoni Fallback";src:local("Georgia");size-adjust:103.7%;ascent-override:108.5%;descent-override:38.6%;line-gap-override:0%}
@font-face{font-family:"Montserrat Fallback";src:local("Arial");size-adjust:108%;ascent-override:89.6%;descent-override:23.2%;line-gap-override:0%}

:root{
  /* the room: warm black, tinted neutrals (never flat grey), one gold, one amber */
  --night:#0E0B08; --night-2:#161210; --night-3:#1F1915; --line:rgba(243,231,211,.12); --line-2:rgba(243,231,211,.2); --edge:rgba(243,231,211,.2);
  --cream:#F3E7D3; --dim:#C4B49C; --mute:#A69780; --gold:#D9B86A; --gold-2:#F0D088; --amber:#E8A05A;
  /* the lamps, one per act (the stage reads the same values) */
  --lamp-velvet-union:#2E4A7A; --lamp-velour:#E8B35A; --lamp-winter-lane:#6E9AC8; --lamp-syvnt:#E03A3A; --lamp-fm:#FF3B3B;
  --display:"Bodoni Moda","Bodoni Fallback",Georgia,"Times New Roman",serif;
  --sans:"Montserrat","Montserrat Fallback",Arial,system-ui,sans-serif;
  --t-hero:clamp(42px,32.1px + 2.5vw,68px);
  --t-h2:clamp(34px,30.1px + 1vw,48px);
  --t-feature:clamp(36px,32.3px + .952vw,48px);
  --t-lead:clamp(28px,25.3px + .667vw,36px);
  --t-h3:clamp(26px,23.7px + .571vw,32px);
  --t-act:clamp(40px,34.1px + 1.524vw,56px);
  --t-cal:clamp(22px,19.8px + .571vw,28px);
  --t-card:clamp(19px,18.3px + .19vw,21px);
  --t-count:clamp(32px,29.3px + .667vw,42px);
  --t-signoff:clamp(24px,20.3px + .952vw,34px);
  --t-lede:clamp(17px,16.6px + .095vw,18px);
  --t-body:clamp(16px,15.6px + .095vw,17px);
  --t-label:12px; --t-btn:13px; --t-meta:13px; --t-fine:14px;
  --track-label:.12em; --track-btn:.1em;
  --pill:999px; --gutter:16px; --max:1200px;
  /* the stage's share of the viewport: the bottom band on phones, the left column from 900 px */
  --stage-h:38svh; --stage-w:45%;
  /* clip of the stage (no JS: the settled state; the script animates these through the hero) */
  --cr:0%; --cb:62%;
  --sh:100vh; --sh:100svh;
  --ease:cubic-bezier(.2,.8,.2,1);
  /* lamp light on the display type: a warm glow, a darker edge for dimension (Minh, 2026-10-17: "a little glow ... to see the typography pop") */
  --glow:0 0 18px rgba(217,184,106,.22),0 0 44px rgba(217,184,106,.10),0 1px 0 rgba(30,18,8,.9),0 2px 12px rgba(0,0,0,.55);
  --glow-small:0 0 10px rgba(217,184,106,.16),0 1px 0 rgba(30,18,8,.8);
  --glow-label:0 0 8px rgba(217,184,106,.28);
  /* the channel banner's brushed gold, sampled from the master (brand-2026-10-07): used for the act names only (Minh, 2026-10-17: "the gradient version ... look nice too") */
  --brushed:linear-gradient(180deg,#B38A46 0%,#C9A35A 15%,#E2C074 42%,#F4D489 55%,#D9B466 68%,#AE8744 100%);
  --glow-count:0 0 14px rgba(240,208,136,.5),0 0 40px rgba(240,208,136,.22),0 1px 0 rgba(30,18,8,.9);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--night)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--night);color:var(--cream);font:400 var(--t-body)/1.6 var(--sans);overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--gold);color:var(--night)}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.05;margin:0;letter-spacing:0;font-optical-sizing:auto}
h4{line-height:1.2;letter-spacing:.005em}
.num,time,.count,.dur,.date{font-variant-numeric:lining-nums tabular-nums}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--night);padding:10px 16px;font:600 var(--t-btn) var(--sans);border-radius:var(--pill);z-index:60}
.skip:focus{left:16px;top:12px}

/* labels: Montserrat 600 at 12 px, only where they carry a fact (what, who, when) */
.k,.meta,.sub-h small{font:600 var(--t-label)/1.5 var(--sans);letter-spacing:var(--track-label);text-transform:uppercase}
.k{color:var(--gold);margin-right:.6em}
.meta{font-weight:400;letter-spacing:.01em;text-transform:none;color:var(--mute);display:block;font-variant-numeric:tabular-nums}
.tagline{white-space:nowrap;font:italic 500 1.8em/1 var(--display);letter-spacing:0;text-transform:none;color:var(--gold-2);margin-left:.5em;vertical-align:-.14em}

/* buttons and chips: pills, quiet hover, visible focus */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 26px;border:1px solid var(--edge);border-radius:var(--pill);background:transparent;color:var(--cream);text-decoration:none;font:600 var(--t-btn)/1 var(--sans);letter-spacing:var(--track-btn);text-transform:uppercase;cursor:pointer;transition:border-color .2s,background .2s,color .2s,box-shadow .2s,transform .2s}
.btn:hover{border-color:var(--gold);color:var(--gold);background:rgba(217,184,106,.06)}
.btn:active{transform:translateY(1px)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:var(--night)}
.btn.gold:hover{background:var(--gold-2);border-color:var(--gold-2);color:var(--night);box-shadow:0 6px 24px rgba(217,184,106,.22)}
.btn[disabled]{opacity:.5;cursor:default}
.motion-toggle{background:rgba(14,11,8,.55);border:1px solid var(--edge);border-radius:var(--pill);color:var(--dim);font:600 var(--t-label)/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;padding:9px 14px;cursor:pointer;min-height:36px;transition:border-color .2s,color .2s}
.motion-toggle:hover,.motion-toggle[aria-pressed="true"]{border-color:var(--gold);color:var(--gold)}
.btn:focus-visible,.motion-toggle:focus-visible,.chips button:focus-visible,.links a:focus-visible,.loop-pause:focus-visible,.search input:focus-visible,.field input:focus-visible,.top nav a:focus-visible,.top .mark:focus-visible,.now a:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}

/* the Visual System's glow: every Bodoni title sits in lamp light */
h1,h2,h3,.goodnight,.signoff,.calendar .date,.next-ch .when,.now a,.turn p,.covers-words .side{text-shadow:var(--glow)}
h4,.lead h3{text-shadow:var(--glow-small)}
.k,.brand,.track,.act .role,.chips button[aria-pressed="true"],.sub-h small{text-shadow:var(--glow-label)}
.chips button[aria-pressed="true"]{text-shadow:none}
/* a pool of lamp light on the wall behind each section headline */
.chapter h2,.sub-h h3,.covers-words h2,.booth-words h2,.shop h2,.signup h2,.act h3,.goodnight{position:relative;z-index:0}
.chapter h2:before,.sub-h h3:before,.covers-words h2:before,.booth-words h2:before,.shop h2:before,.signup h2:before,.act h3:before,.goodnight:before{content:"";position:absolute;left:-14%;right:-10%;top:-70%;bottom:-70%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side at 42% 50%,rgba(232,160,90,.15),rgba(232,160,90,.05) 55%,transparent 100%)}
.hero h1:before{display:none}

/* top bar: static on phones (the stage already holds the top of the screen), sticky from 900 px */
.top{position:relative;z-index:30;background:var(--night)}
.top .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding-top:10px;padding-bottom:10px}
.top .mark{display:flex;align-items:center;gap:10px;text-decoration:none;font:600 19px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;padding-top:2px}
.top .mark img{width:36px;height:36px;border-radius:50%}
.top nav{flex:1 0 100%;display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;font:600 var(--t-label)/1 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.top nav a{text-decoration:none;color:var(--dim);padding:8px 0}
.top nav a:hover{color:var(--gold)}

/* ---------- Side A: the stage and the column ---------- */
.side-a{position:relative;max-width:var(--max);margin:0 auto}
.stage{position:sticky;top:0;height:var(--sh);z-index:2;pointer-events:none;overflow:hidden;
  clip-path:inset(0 var(--cr) var(--cb) 0);background:var(--night)}
.stage-art{position:absolute;inset:0;background:var(--night)}
.stage-art canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.stage-art canvas[hidden]{display:none}
/* the fallback (no WebGL): the rendered vinyl loop, centred where the record would be, with the act art on its label */
.fallback{position:absolute;margin:0;left:calc((100% - var(--cr)) / 2);top:calc((100% - var(--cb)) / 2);width:min(78vmin,560px);aspect-ratio:1;transform:translate(-50%,-50%)}
@media (max-width:899px){.fallback{width:min(60vw,320px)}}
.fallback video{width:100%;aspect-ratio:1;border-radius:50%;background:var(--night-2)}
.fallback .label-art{position:absolute;left:50%;top:50%;width:24.7%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);object-fit:cover;opacity:.92}
.js .stage.gl .fallback{display:none}
.stage-ui{position:absolute;left:0;right:var(--cr);bottom:var(--cb);display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:44px var(--gutter) 14px;pointer-events:none;
  background:linear-gradient(0deg,rgba(14,11,8,.88) 0%,rgba(14,11,8,.55) 55%,rgba(14,11,8,0) 100%)}
.stage-ui > *{pointer-events:auto}
.now{margin:0;font-size:var(--t-fine);line-height:1.5;color:var(--dim);display:grid;gap:2px;max-width:60%}
@media (max-width:899px){.now .k,.now .who{display:none}.now a{font-size:16px}.stage-ui{padding-top:30px;padding-bottom:10px}}
.now .k{display:block;color:var(--gold)}
.now a{color:var(--cream);text-decoration:none;font:600 18px/1.3 var(--display)}
.now a:hover{color:var(--gold-2)}
.now .who{color:var(--mute)}
.js .stage.off .stage-ui{opacity:0;transition:opacity .4s}

.column{position:relative;margin-top:calc(-1 * var(--sh));overflow-x:clip}
.hero{position:relative;z-index:3;min-height:var(--sh);display:grid;place-items:center;text-align:center;padding:40px var(--gutter) 60px}
.hero-words{position:relative;max-width:40rem;display:grid;justify-items:center}
.hero-words:before{content:"";position:absolute;inset:-60px -60px -110px -60px;z-index:-1;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(14,11,8,.9),rgba(14,11,8,.7) 60%,rgba(14,11,8,0) 100%)}
.brand{font:600 var(--t-label)/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0}
.hero h1{font-size:var(--t-hero);line-height:1.02;letter-spacing:-.005em;margin:14px 0 20px;text-wrap:balance}
.hero h1 .l{display:inline-block}
.hero .lede{font-size:var(--t-lede);line-height:1.55;color:var(--dim);max-width:32rem;margin:0 0 24px}
.hero .cta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.season{margin:22px 0 0;font-size:var(--t-fine);line-height:1.6;color:var(--dim);max-width:32rem}
.season a{color:var(--cream)}
/* the load: the two lines of the headline rise once (the one choreographed moment) */
.js:not(.no-reveal) .hero h1 .l{opacity:0;transform:translateY(.4em);animation:rise .9s var(--ease) forwards}
.js:not(.no-reveal) .hero h1 .l:nth-child(2){animation-delay:.12s}
.js:not(.no-reveal) .hero .lede,.js:not(.no-reveal) .hero .cta,.js:not(.no-reveal) .hero .season{opacity:0;animation:rise .9s var(--ease) .3s forwards}
.js:not(.no-reveal) .hero .cta{animation-delay:.42s}
.js:not(.no-reveal) .hero .season{animation-delay:.54s}
@keyframes rise{to{opacity:1;transform:none}}

.chapter{position:relative;padding:9vh var(--gutter) 7vh}
.chapter h2{font-size:var(--t-h2);line-height:1.04;text-wrap:balance}
.chapter .sub{color:var(--dim);max-width:34rem;margin:14px 0 0}

/* next: the one big date */
.next-ch{padding-top:12vh;padding-bottom:3vh}
.cal-ch{padding-top:5vh}
.track{margin:0 0 10px;font:600 var(--t-label)/1.5 var(--sans);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--dim)}
.next-ch h2{font-size:var(--t-feature)}
.next-ch .when{font:600 clamp(22px,20.5px + .381vw,26px)/1.2 var(--display);margin:16px 0 0;color:var(--cream)}
.next-ch .tnote{font:600 var(--t-label)/1.4 var(--sans);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--mute);margin-left:10px}
.count{display:none}
.js .count{display:inline-flex;align-items:baseline;gap:10px}
.next-ch .count{margin:14px 0 0}
.next-ch .count .lbl{font:600 var(--t-label)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.next-ch .count b{font:600 var(--t-count)/1 var(--display);color:var(--gold-2);text-shadow:var(--glow-count)}
.next-ch .count.out .lbl{display:none}
.next-ch .note{color:var(--dim);max-width:34rem;margin:18px 0 22px}
.links{display:flex;flex-wrap:wrap;gap:8px}
.links a,.links .pl{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 16px;border:1px solid var(--edge);border-radius:var(--pill);text-decoration:none;font:600 var(--t-label)/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--cream);transition:border-color .2s,color .2s,background .2s}
.links a:hover{border-color:var(--gold);color:var(--gold);background:rgba(217,184,106,.06)}
.links .pl{color:var(--mute);border-style:dashed}
.links .pl small{font:500 12px/1 var(--sans);letter-spacing:0;color:var(--mute);text-transform:none}

/* the season: a dated list, a line per date */
.calendar{list-style:none;margin:28px 0 0;padding:0}
.calendar li{display:grid;grid-template-columns:1fr;gap:8px;padding:18px 0;border-top:1px solid var(--line)}
.calendar li.r-out .count{display:none}
.calendar .count b:not(:empty):before{content:"in "}
.calendar .date{font:600 clamp(20px,19.3px + .19vw,22px)/1.15 var(--display);color:var(--cream)}
.calendar .what{display:grid;gap:4px;min-width:0}
.calendar .what h3{font-size:var(--t-cal);line-height:1.15}
.calendar .what .count{margin-left:10px;color:var(--amber);font-weight:600;text-transform:uppercase;letter-spacing:.1em;text-shadow:var(--glow-label)}
.calendar .what .count b{font-weight:600}
.calendar .what .count b:empty{display:none}
.calendar .status{color:var(--dim)}
.calendar li.r-out .status{color:var(--mute)}
.calendar li.r-soon .status{color:var(--gold-2)}
.calendar li.r-out .date,.calendar li.r-out .what h3{color:var(--dim)}

/* the acts: a header loop, then one chapter per act, each framed differently */
.acts-head .loop.wide{margin:26px 0 0;position:relative}
.loop{position:relative;margin:0}
.loop video,.loop img{width:100%;background:var(--night-2)}
.loop.wide video{aspect-ratio:16/9;border:1px solid var(--line)}
.loop-pause{position:absolute;right:12px;top:12px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(243,231,211,.35);background:rgba(14,11,8,.65);cursor:pointer;display:grid;place-items:center;padding:0;z-index:3}
.loop-pause span{display:block;width:10px;height:12px;border-left:3px solid var(--cream);border-right:3px solid var(--cream)}
.loop-pause[aria-pressed="true"] span{width:0;height:0;border:0;border-left:11px solid var(--cream);border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.loop-pause:hover{border-color:var(--gold)}

.act{--lamp:var(--amber);--pin:.5;--pr:1;min-height:0;padding-top:8vh;padding-bottom:5vh}
.act:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--pin);
  background:radial-gradient(70% 55% at 0% 40%,color-mix(in oklab,var(--lamp) 26%,transparent),transparent 70%)}
.act-velvet-union{--lamp:var(--lamp-velvet-union)}
.act-velour{--lamp:var(--lamp-velour)}
.act-winter-lane{--lamp:var(--lamp-winter-lane)}
.act-syvnt{--lamp:var(--lamp-syvnt)}
.act .photo{position:relative;margin:0 0 24px;clip-path:inset(0 calc((1 - var(--pr)) * 100%) 0 0)}
.act .photo img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:50% 25%;filter:saturate(.95);box-shadow:0 30px 60px rgba(0,0,0,.5)}
.act h3.gold-name{font:800 clamp(38px,30px + 2.2vw,64px)/1 var(--sans);letter-spacing:.02em;text-transform:uppercase;text-wrap:balance;
  background:var(--brushed);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;
  filter:drop-shadow(0 0 14px rgba(217,184,106,.28)) drop-shadow(0 2px 2px rgba(0,0,0,.6))}
.act h3.gold-name:before{display:none}
.act .role{font:600 var(--t-label)/1.5 var(--sans);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--mute);margin:12px 0 0}
.act .blurb{color:var(--dim);margin:12px 0 18px;max-width:30rem}
/* each act's portrait is cropped to its own moment */
.act-velour .photo img{object-position:50% 18%}
.act-winter-lane .photo img{object-position:50% 22%}
.act-syvnt .photo img{object-position:60% 0;filter:saturate(.85) contrast(1.06) brightness(.92)}
.act-syvnt .photo:after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(224,58,58,.5),rgba(90,10,20,.3) 55%,rgba(14,11,8,.45));mix-blend-mode:multiply}

/* the turn: nearly nothing on screen */
.turn{min-height:55vh;min-height:55svh;display:grid;place-items:center;text-align:center;padding-top:6vh;padding-bottom:6vh}
.turn p{position:relative;z-index:0;font:italic 500 clamp(34px,24.6px + 2.4vw,68px)/1.2 var(--display);color:var(--cream);max-width:18ch;margin:0;text-wrap:balance;text-shadow:var(--glow)}
.turn p:before{content:"";position:absolute;left:-20%;right:-20%;top:-50%;bottom:-50%;z-index:-1;pointer-events:none;background:radial-gradient(50% 55% at 50% 50%,rgba(232,160,90,.16),rgba(232,160,90,.05) 55%,transparent 78%)}

/* ---------- On air: the peak ---------- */
.onair{position:relative;background:#070605}
.booth{position:relative;height:100vh;height:100svh;--pb:1}
.js .booth{height:120vh;height:120svh}
.booth-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.booth .booth-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 30%;filter:brightness(calc(.62 + .38 * var(--pb))) saturate(calc(.85 + .15 * var(--pb)))}
.booth video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%;mix-blend-mode:screen;opacity:.9}
@media (prefers-reduced-motion:reduce){.booth video{display:none}.booth .booth-photo{filter:none}}
.booth .scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,6,5,.9) 0%,rgba(7,6,5,.62) 30%,rgba(7,6,5,0) 52%)}
.booth-words{position:absolute;left:var(--gutter);right:var(--gutter);bottom:7vh;max-width:30rem}
.booth-words h2{font-size:clamp(40px,34px + 1.4vw,60px)}
.booth-words p{color:var(--dim);margin:14px 0 0;max-width:30rem}
.booth-words .fine{color:var(--mute)}
.fm .list{margin-top:8px}

/* ---------- Side B: the videos ---------- */
.side-b{position:relative;padding-bottom:30px}
.covers{position:relative;min-height:min(52vh,520px);display:grid;align-items:end;overflow:hidden;background:var(--night)}
.covers .loop.band{position:absolute;inset:0}
.covers .loop.band video{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.covers .scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,11,8,.95) 0%,rgba(14,11,8,.55) 45%,rgba(14,11,8,0) 80%)}
.covers-words{position:relative;z-index:2;padding-top:20vh;padding-bottom:28px;width:100%}
.covers-words .side{font:italic 500 clamp(20px,16px + 1vw,26px)/1 var(--display);color:var(--gold-2);margin:0 0 8px}
.covers-words h2{font-size:var(--t-h2)}
.covers-words p{color:var(--dim);margin:12px 0 0;max-width:34rem}
.lead{display:grid;gap:16px;text-decoration:none;color:inherit;margin:34px 0 28px}
.th{position:relative;display:block;overflow:hidden;background:var(--night-3);border:1px solid var(--line)}
.th img{width:100%;aspect-ratio:16/9;object-fit:cover}
.th .dur{position:absolute;right:10px;bottom:10px;z-index:2;font:600 var(--t-label)/1 var(--sans);letter-spacing:.04em;background:rgba(14,11,8,.85);color:var(--cream);padding:6px 8px;border-radius:6px}
.pv{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;opacity:0;transition:opacity .4s;z-index:1}
.pv.on{opacity:1}
.short .pv{width:300%;left:-100%}
.lead h3{font-size:var(--t-lead);line-height:1.06;margin:10px 0 14px;text-wrap:balance}
.lead .play{font:600 var(--t-label)/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.lead:hover h3{color:var(--gold-2)}
.finder{display:grid;gap:14px;padding:18px 0 8px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{min-height:40px;padding:8px 16px;border:1px solid var(--edge);border-radius:var(--pill);background:transparent;color:var(--dim);font:600 var(--t-label)/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.chips button:hover{color:var(--gold);border-color:var(--gold);background:rgba(217,184,106,.06)}
.chips button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--night)}
.search{display:grid;gap:6px}
.search span{font:600 var(--t-label)/1.5 var(--sans);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--mute)}
.search input{width:100%;min-height:48px;padding:10px 20px;background:var(--night-2);border:1px solid var(--line-2);border-radius:var(--pill);color:var(--cream);font:400 16px var(--sans);outline:none;caret-color:var(--gold)}
.search input:focus{border-color:var(--gold)}
.search input::placeholder{color:var(--mute)}
.sub-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:32px 0 12px}
.sub-h h3{font-size:var(--t-h3)}
.sub-h small{color:var(--mute);font-variant-numeric:tabular-nums}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 12px}
.card,.row{text-decoration:none;color:inherit;display:grid;gap:10px;min-width:0}
.card h4,.row h4,.short h4{font-size:var(--t-card);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .meta,.row .meta,.short .meta{margin-top:4px}
.card:hover h4,.row:hover h4,.short:hover h4{color:var(--gold-2)}
.card:hover .th,.row:hover .th,.short:hover .th,.lead:hover .th{border-color:var(--gold)}
.list{display:grid;gap:14px}
.row{grid-template-columns:132px 1fr;align-items:center;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.js [data-shelf] .more{display:none}
.moreline{margin:24px 0 0;text-align:center}
.moreline .btn[hidden]{display:none}
.empty{color:var(--mute);font:italic 500 20px/1.4 var(--display);margin:12px 0 0}
.shorts{background:var(--night-2);margin-top:40px;padding-bottom:28px}
.rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:max(var(--gutter),calc((100% - var(--max)) / 2 + var(--gutter)));padding:4px max(var(--gutter),calc((100% - var(--max)) / 2 + var(--gutter))) 10px;scrollbar-width:thin;scrollbar-color:var(--gold) transparent}
.rail .short{flex:0 0 min(58vw,200px);scroll-snap-align:start;text-decoration:none;color:inherit}
.rail .short .th img{aspect-ratio:9/16;object-fit:cover}
.rail .short h4{font-size:19px;margin:10px 0 2px}

/* shop and list */
.shop{display:grid;gap:26px;padding-top:70px}
.shop h2{font-size:var(--t-h3);margin:0 0 12px}
.shop-words p{color:var(--dim);max-width:30rem;margin:0 0 20px}
.products{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.products a{display:grid;gap:8px;text-decoration:none;color:inherit}
.products img,.products .ph{width:100%;aspect-ratio:1;object-fit:cover;border:1px solid var(--line);background:var(--night-3);display:block}
.products .ph{background:linear-gradient(135deg,var(--night-3),var(--night-2));position:relative}
.products .ph:after{content:"";position:absolute;left:50%;top:50%;width:46px;height:46px;transform:translate(-50%,-50%);border:1px solid var(--line-2);border-radius:50%;background:url("img/watermark.png") center/60% no-repeat;opacity:.6}
.products .name{font:600 16px/1.35 var(--sans)}
.products .price{font:600 var(--t-label)/1.5 var(--sans);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--mute)}
.products a:hover .name{color:var(--gold-2)}
.signup{display:grid;gap:20px;margin-top:56px;padding:28px 22px;border:1px solid var(--line-2);border-radius:6px;background:var(--night-2)}
.signup h2{font-size:var(--t-h3);margin:0 0 10px}
.signup p{color:var(--dim);margin:0;max-width:30rem}
.form label{font:600 var(--t-label)/1.5 var(--sans);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--mute);display:block;margin-bottom:6px}
.field{display:grid;gap:8px}
.field input{min-height:48px;padding:10px 20px;background:var(--night);border:1px solid var(--line-2);border-radius:var(--pill);color:var(--cream);font:400 16px var(--sans);outline:none;width:100%;caret-color:var(--gold)}
.field input:focus{border-color:var(--gold)}
.fine{font-size:var(--t-fine);line-height:1.5;color:var(--mute);margin:10px 0 0}
.fine.note{color:var(--gold-2);min-height:1.5em;margin-top:8px}
.fine.note:empty{margin:0;min-height:0}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;margin:0}
.signup .btn.gold{background:var(--brushed);border-color:#C9A35A;color:#1A1208;text-shadow:none}
.signup .btn.gold:hover{box-shadow:0 6px 24px rgba(217,184,106,.3);filter:brightness(1.05)}
.fine a{color:var(--dim)}

/* footer: the record at rest */
footer{margin-top:80px;padding:40px 0 30px;position:relative;overflow:hidden}
footer:before{content:"";position:absolute;left:50%;bottom:-30vw;width:60vw;height:60vw;max-width:720px;max-height:720px;margin-left:-30vw;border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%,#0A0908 0 1.5px,#171310 1.5px 3px);box-shadow:0 0 0 1px rgba(217,184,106,.1),0 -30px 80px rgba(0,0,0,.6);opacity:.9;pointer-events:none}
@media (min-width:900px){footer:before{margin-left:-360px;bottom:-360px}}
footer .wrap{display:grid;gap:22px;position:relative}
.goodnight{font:600 var(--t-h2)/1 var(--display);margin:0 0 10px;color:var(--cream)}
.foot-row{display:grid;gap:18px}
.signoff{font:600 var(--t-signoff)/1.15 var(--display);margin:0;letter-spacing:.08em;text-transform:uppercase}
.signoff .tagline{display:block;font-size:.85em;letter-spacing:0;margin:6px 0 0;white-space:normal}
footer .links a{min-height:44px}
footer p{margin:0}

/* reveals (only under .js and not with reduced motion) */
.js:not(.no-reveal) [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .7s var(--ease)}
.js:not(.no-reveal) [data-reveal].in,.js:not(.no-reveal) [data-reveal]:focus-within{opacity:1;transform:none}
.still *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  .js .hero h1 .l,.js .hero .lede,.js .hero .cta,.js .hero .season{animation:none;opacity:1;transform:none}
  .js .booth{height:100vh;height:100svh}
  .act{--pin:.5;--pr:1}
}

@media (min-width:700px){
  :root{--gutter:28px}
  .top .wrap{flex-wrap:nowrap;height:64px;padding-top:0;padding-bottom:0}
  .top nav{flex:0 0 auto;flex-wrap:nowrap;margin-left:auto;gap:24px;letter-spacing:var(--track-label)}
  .calendar li{grid-template-columns:132px 1fr;gap:10px 16px;align-items:start}
  .calendar .date{padding-top:6px}
  .calendar .links{grid-column:2}
  .list.two{grid-template-columns:1fr 1fr;gap:14px 36px}
  .lead{grid-template-columns:1.3fr 1fr;align-items:center;gap:28px}
  .finder{grid-template-columns:1fr minmax(260px,.6fr);align-items:end}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .row{grid-template-columns:200px 1fr;gap:18px}
  .fm .list{max-width:820px}
  .shop{grid-template-columns:.9fr 1.3fr;align-items:start}
  .products{grid-template-columns:repeat(4,1fr)}
  .signup{grid-template-columns:1fr 1fr;align-items:center;padding:36px}
  .field{grid-template-columns:1fr auto}
  .foot-row{grid-template-columns:1fr auto;align-items:end}
  /* the words' panel: stops in px from the grid's left edge, so the copy sits in the dark at 1440, 1920 and 2560 alike */
  .booth .scrim{--g:max(var(--gutter),calc((100% - 1200px) / 2));background:linear-gradient(90deg,rgba(7,6,5,.95) 0,rgba(7,6,5,.92) calc(var(--g) + 360px),rgba(7,6,5,.6) calc(var(--g) + 520px),rgba(7,6,5,.15) calc(var(--g) + 700px),rgba(7,6,5,0) calc(var(--g) + 860px)),linear-gradient(0deg,rgba(7,6,5,.4),rgba(7,6,5,0) 22%)}
  .booth-words{left:max(var(--gutter),calc((100% - 1200px) / 2));bottom:auto;top:50%;transform:translateY(-50%);max-width:21rem}
  .booth .booth-photo{object-position:72% 30%}
}
@media (min-width:900px){
  :root{--cr:55%;--cb:0%;--sh:min(78vh,760px);--sh:min(78svh,760px)}
  .top{position:sticky;top:0;background:rgba(14,11,8,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .stage{top:0}
  .stage-ui{padding:48px var(--gutter) 20px}
  .now{max-width:70%}
  .column > .chapter{margin-left:var(--stage-w);padding-left:56px;padding-right:var(--gutter)}
  .hero{padding:48px var(--gutter) 60px}
  .hero-words{max-width:40rem}
  .chapter{padding-top:11vh;padding-bottom:8vh}
  .next-ch{padding-top:14vh;padding-bottom:3vh}
  .cal-ch{padding-top:6vh}
  .act{min-height:0;padding-top:8vh;padding-bottom:6vh}
  .calendar{max-width:640px}
  .column > .turn{margin-left:0;padding-left:var(--stage-w)}
}
@media (min-width:1100px){
  .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@supports not (color: color-mix(in oklab, red 10%, transparent)){
  .act:before{background:radial-gradient(70% 55% at 0% 40%,rgba(232,160,90,.22),transparent 70%)}
}
/* James 2026-10-17: on wide screens the photo slides right so all three hosts and the cat clear the words' panel
   (at 1920 the left host sat dimmed under the scrim). Its left edge fades into the night colour. */
@media (min-width:1100px){
  .booth-stick{background:#070605}
  .booth .booth-photo,.booth video{transform:translateX(20%);object-position:50% 30%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%);mask-image:linear-gradient(90deg,transparent 0,#000 24%)}
  .booth .scrim{--g:max(var(--gutter),calc((100% - 1200px) / 2));background:linear-gradient(90deg,rgba(7,6,5,.9) 0,rgba(7,6,5,.85) calc(var(--g) + 360px),rgba(7,6,5,0) calc(var(--g) + 470px)),linear-gradient(0deg,rgba(7,6,5,.4),rgba(7,6,5,0) 22%)}
}
/* James 2026-10-17: the headline glow pools (:before, right:-10%) pushed the phone layout 20 px wide; clip them at the page edge (clip, not hidden, so sticky still works). */
html,body{overflow-x:clip}
/* James 2026-10-17 review fixes */
/* the hero sits above the stage: let clicks through to the stage's Pause and "on the turntable" controls */
.hero{pointer-events:none}.hero-words{pointer-events:auto}
/* tabbing backwards never parks a control under the sticky top bar */
@media (min-width:900px){html{scroll-padding-top:76px}}
/* the shop is locked until it opens: plain labels, no dead links */
.btn.soon{cursor:default;opacity:.7}
.soon-link{color:var(--mute)}
.products .product{display:grid;gap:10px;color:inherit}
#main:focus{outline:none}
/* James 2026-10-17 (Minh: "on mobile this gets cut off"): on phones the 16:9 group photo was cropped to the
   middle, cutting off the host in purple. Show the whole group across the width, above the words. */
@media (max-width:699px){
  .booth-stick{background:#070605}
  .booth .booth-photo,.booth video{inset:auto;top:9%;left:0;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:50% 40%;transform:scale(1.62);transform-origin:47% 30%;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,#000 70%,transparent 100%)}
  .booth-words{top:calc(9svh + 84vw);bottom:auto}
}
/* Minh 2026-10-17: "out now should be bold too, like the in 5 days" */
.calendar li.r-out .status{color:var(--amber);font-weight:600;text-transform:uppercase;letter-spacing:.1em;text-shadow:var(--glow-label)}