/* PAYDAY AJ — payday.css
   Palette locked from the client brief 9/9/26: money green + foil gold on a
   green-biased black. Ticket red was removed by the client — do not add it back.
   Change the five values in :root and the whole site re-skins. */

:root{
  --ink:#0A0C09;
  --ink-2:#11150F;
  --ink-3:#181D16;
  --line:#2A3226;
  --line-2:#3B4633;
  --text:#F3F1E9;
  --muted:#98A08F;
  --green:#27A24E;
  --green-lit:#32C160;
  --green-deep:#0F5427;
  --gold:#E0A22B;
  --gold-lit:#F0B441;
  --gold-deep:#7A5A13;
  --shadow:0 24px 60px -28px rgba(0,0,0,.92);
  --display:"Archivo Black","Arial Black",Impact,sans-serif;
  --body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"Space Mono",ui-monospace,"Courier New",monospace;
  --pad:clamp(56px,7vw,86px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--text);
  font-family:var(--body);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--gold);color:#0A0C09}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wrap{width:min(1180px,92vw);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;background:transparent;
  border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease, backdrop-filter .3s ease}
/* A scrim instead of a rule — the bar melts into the hero at the top of the page. */
.nav::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(10,12,9,.78),rgba(10,12,9,0));
  opacity:1;transition:opacity .3s ease}
.nav.stuck{background:rgba(10,12,9,.9);backdrop-filter:blur(14px);
  border-bottom-color:var(--line)}
.nav.stuck::before{opacity:0}
.nav .wrap{position:relative}
.nav .wrap{display:flex;align-items:center;gap:26px;height:64px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);
  font-size:15px;letter-spacing:.02em;text-decoration:none;margin-right:auto}
.brand img{width:30px;height:30px;border-radius:50%;object-fit:cover;
  border:1.5px solid var(--gold)}
.navlinks{display:flex;gap:24px;font-size:12.5px;letter-spacing:.05em;
  text-transform:uppercase;font-weight:600}
.navlinks a{color:var(--muted);text-decoration:none;transition:color .18s}
.navlinks a:hover{color:var(--gold)}
@media (max-width:900px){.navlinks{display:none}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--body);
  font-weight:700;font-size:13.5px;letter-spacing:.04em;text-transform:uppercase;
  padding:12px 20px;text-decoration:none;border:0;cursor:pointer;
  background:var(--green);color:#04160A;transition:transform .16s,background .16s}
.btn:hover{background:var(--green-lit);transform:translateY(-1px)}
.btn.gold{background:var(--gold);color:#170F02}
.btn.gold:hover{background:var(--gold-lit)}
.btn.ghost{background:transparent;color:var(--text);
  box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn.ghost:hover{background:var(--ink-3);color:var(--gold);
  box-shadow:inset 0 0 0 1.5px var(--gold)}

/* ---------- hero — cinematic video frame ---------- */
.hero{position:relative;min-height:min(88vh,720px);display:flex;align-items:flex-end;
  overflow:hidden;border-bottom:1px solid var(--line);margin-top:-64px;padding-top:64px}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:88% 42%;
  filter:contrast(1.1) saturate(.8) brightness(.62)}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(to top,var(--ink) 1%,rgba(10,12,9,.86) 38%,rgba(10,12,9,.3) 78%),
    linear-gradient(to right,rgba(10,12,9,.96) 0%,rgba(10,12,9,.9) 34%,rgba(10,12,9,.12) 78%)}
/* Muted YouTube loop behind the hero. The still underneath is the fallback —
   it shows while the video buffers, and stays if autoplay is refused. */
.hero-video{position:absolute;inset:0;overflow:hidden;opacity:0;
  transition:opacity 1.1s ease;pointer-events:none}
.hero-video.on{opacity:1}
.hero-video iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100vw;height:56.25vw;min-height:100vh;min-width:177.78vh;border:0;
  filter:contrast(1.1) saturate(.8) brightness(.62)}
.slip{position:absolute;inset:0;z-index:2;opacity:.55;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(224,162,43,.10) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(224,162,43,.10) 1px,transparent 1px);
  background-size:19px 23px;
  -webkit-mask-image:radial-gradient(110% 80% at 12% 88%,#000 0%,transparent 68%);
  mask-image:radial-gradient(110% 80% at 12% 88%,#000 0%,transparent 68%)}
.hero .wrap{position:relative;z-index:3;padding:0 0 clamp(44px,6vw,70px)}
.hero-inner{max-width:44ch}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:11px}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--green)}
h1{font-family:var(--display);margin:18px 0 0;line-height:.86;
  font-size:clamp(52px,9vw,120px);letter-spacing:-.025em}
h1 .out{color:transparent;-webkit-text-stroke:2px var(--gold);paint-order:stroke}
.tagline{font-family:var(--display);font-size:clamp(17px,2.3vw,26px);
  color:var(--gold);margin:20px 0 0;line-height:1.14;letter-spacing:-.01em}
.motto{font-family:var(--mono);font-size:13.5px;letter-spacing:.06em;color:var(--green);
  margin:12px 0 0;text-transform:uppercase;font-weight:700}
.rolebar{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}
.role{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 11px;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line-2);
  background:rgba(10,12,9,.5)}
.herocta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}


/* ---------- money in the letterforms ----------
   Four copies of the word sit on top of the real one, each filled with
   nothing but falling bills and clipped to its own glyphs, so the cash is
   only ever visible INSIDE "PAYDAY" — AJ underneath stays solid gold outline.
   Each copy runs its own duration and starts mid-cycle on a negative delay;
   every bill enters above the cap height and exits below the baseline, so
   the loop restart always happens out of sight.
   It's a paint animation, so it's deliberately kept to one small element. */
.pd{position:relative;display:inline-block;isolation:isolate}
.rain{position:absolute;left:0;top:0;font:inherit;letter-spacing:inherit;
  color:transparent;-webkit-background-clip:text;background-clip:text;
  pointer-events:none;user-select:none;
  -webkit-user-select:none;contain:paint;white-space:nowrap}
.r1{opacity:.96;background-repeat:repeat-y;
  background-image:url(assets/bill-mini-l.webp),url(assets/bill-mini.webp),url(assets/bill-mini-r.webp),url(assets/bill-mini-l.webp),url(assets/bill-mini.webp);
  background-size:0.277em auto,0.298em auto,0.291em auto,0.335em auto,0.284em auto;
  animation:fall-r1 3.6s linear -0.7s infinite}
@keyframes fall-r1{
  0%{background-position:calc(9.6% + 0.00%) 0.0763em,calc(31.2% + 0.00%) 0.3598em,calc(50.2% + 0.00%) 0.3564em,calc(70.2% + 0.00%) 0.3681em,calc(91.0% + 0.00%) 0.0770em}
  25%{background-position:calc(9.6% + -1.10%) 0.1913em,calc(31.2% + -1.10%) 0.4902em,calc(50.2% + -1.10%) 0.4781em,calc(70.2% + -1.10%) 0.5072em,calc(91.0% + -1.10%) 0.2013em}
  50%{background-position:calc(9.6% + 1.40%) 0.3062em,calc(31.2% + 1.40%) 0.6206em,calc(50.2% + 1.40%) 0.5999em,calc(70.2% + 1.40%) 0.6462em,calc(91.0% + 1.40%) 0.3255em}
  75%{background-position:calc(9.6% + -0.60%) 0.4212em,calc(31.2% + -0.60%) 0.7510em,calc(50.2% + -0.60%) 0.7216em,calc(70.2% + -0.60%) 0.7852em,calc(91.0% + -0.60%) 0.4498em}
  100%{background-position:calc(9.6% + 0.00%) 0.5361em,calc(31.2% + 0.00%) 0.8813em,calc(50.2% + 0.00%) 0.8433em,calc(70.2% + 0.00%) 0.9242em,calc(91.0% + 0.00%) 0.5740em}}
.r2{opacity:.72;background-repeat:repeat-y;
  background-image:url(assets/bill-mini.webp),url(assets/bill-mini-r.webp),url(assets/bill-mini-l.webp),url(assets/bill-mini.webp),url(assets/bill-mini-r.webp);
  background-size:0.312em auto,0.316em auto,0.256em auto,0.262em auto,0.264em auto;
  animation:fall-r2 5.0s linear -2.8s infinite}
@keyframes fall-r2{
  0%{background-position:calc(15.6% + 0.00%) 0.0917em,calc(37.1% + 0.00%) 0.0312em,calc(57.5% + 0.00%) 0.3685em,calc(77.7% + 0.00%) 0.3329em,calc(97.4% + 0.00%) 0.2960em}
  25%{background-position:calc(15.6% + -1.10%) 0.2282em,calc(37.1% + -1.10%) 0.1634em,calc(57.5% + -1.10%) 0.4747em,calc(77.7% + -1.10%) 0.4475em,calc(97.4% + -1.10%) 0.4065em}
  50%{background-position:calc(15.6% + 1.40%) 0.3647em,calc(37.1% + 1.40%) 0.2956em,calc(57.5% + 1.40%) 0.5810em,calc(77.7% + 1.40%) 0.5621em,calc(97.4% + 1.40%) 0.5169em}
  75%{background-position:calc(15.6% + -0.60%) 0.5012em,calc(37.1% + -0.60%) 0.4278em,calc(57.5% + -0.60%) 0.6872em,calc(77.7% + -0.60%) 0.6767em,calc(97.4% + -0.60%) 0.6274em}
  100%{background-position:calc(15.6% + 0.00%) 0.6377em,calc(37.1% + 0.00%) 0.5600em,calc(57.5% + 0.00%) 0.7935em,calc(77.7% + 0.00%) 0.7914em,calc(97.4% + 0.00%) 0.7378em}}
.r3{opacity:.48;background-repeat:repeat-y;
  background-image:url(assets/bill-mini-r.webp),url(assets/bill-mini-l.webp),url(assets/bill-mini.webp),url(assets/bill-mini-r.webp),url(assets/bill-mini-l.webp);
  background-size:0.347em auto,0.259em auto,0.301em auto,0.34em auto,0.323em auto;
  animation:fall-r3 7.1s linear -1.5s infinite}
@keyframes fall-r3{
  0%{background-position:calc(22.2% + 0.00%) 0.4000em,calc(44.8% + 0.00%) 0.1367em,calc(63.7% + 0.00%) 0.0959em,calc(84.5% + 0.00%) 0.1712em,calc(2.3% + 0.00%) 0.2182em}
  25%{background-position:calc(22.2% + -1.10%) 0.5452em,calc(44.8% + -1.10%) 0.2442em,calc(63.7% + -1.10%) 0.2276em,calc(84.5% + -1.10%) 0.3135em,calc(2.3% + -1.10%) 0.3523em}
  50%{background-position:calc(22.2% + 1.40%) 0.6903em,calc(44.8% + 1.40%) 0.3517em,calc(63.7% + 1.40%) 0.3593em,calc(84.5% + 1.40%) 0.4557em,calc(2.3% + 1.40%) 0.4863em}
  75%{background-position:calc(22.2% + -0.60%) 0.8355em,calc(44.8% + -0.60%) 0.4592em,calc(63.7% + -0.60%) 0.4910em,calc(84.5% + -0.60%) 0.5979em,calc(2.3% + -0.60%) 0.6204em}
  100%{background-position:calc(22.2% + 0.00%) 0.9806em,calc(44.8% + 0.00%) 0.5667em,calc(63.7% + 0.00%) 0.6227em,calc(84.5% + 0.00%) 0.7401em,calc(2.3% + 0.00%) 0.7544em}}
@media (prefers-reduced-motion:reduce){.rain{display:none}}

/* ---------- sections ---------- */
section{padding:var(--pad) 0}
.alt{background:var(--ink-2)}
.sechead{display:flex;align-items:flex-end;justify-content:space-between;
  gap:26px;flex-wrap:wrap;margin-bottom:34px}
h2{font-family:var(--display);font-size:clamp(27px,3.7vw,44px);line-height:1;
  margin:10px 0 0;letter-spacing:-.018em}
.sub{color:var(--muted);max-width:62ch;margin:12px 0 0;font-size:15.5px}

/* perforated ticket stub divider */
.perf{position:relative;height:0;border-top:2px dashed var(--line-2);margin-bottom:30px}
.perf::before,.perf::after{content:"";position:absolute;top:-11px;width:20px;height:20px;
  border-radius:50%;background:var(--ink);box-shadow:inset 0 0 0 2px var(--line-2)}
.alt .perf::before,.alt .perf::after{background:var(--ink-2)}
.perf::before{left:-10px}
.perf::after{right:-10px}

/* ---------- videos ---------- */
.vgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
@media (max-width:680px){.vgrid{grid-template-columns:1fr}}
.vid{position:relative;display:block;text-decoration:none;background:var(--ink-3);
  box-shadow:inset 0 0 0 1px var(--line);transition:transform .2s,box-shadow .2s}
.vid.playing{box-shadow:inset 0 0 0 1px var(--gold)}
.vid.playing:hover{transform:none}
.vid:hover{box-shadow:inset 0 0 0 1px var(--gold);transform:translateY(-3px)}
.vthumb{position:relative;aspect-ratio:16/9;overflow:hidden;display:block;width:100%;
  padding:0;border:0;background:var(--ink);cursor:pointer}
.vthumb iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vthumb img{width:100%;height:100%;object-fit:cover}
.play{position:absolute;inset:0;display:grid;place-items:center}
.play span{width:54px;height:54px;border-radius:50%;background:rgba(10,12,9,.6);
  box-shadow:inset 0 0 0 1.5px var(--gold);display:grid;place-items:center;transition:.2s}
.vid:hover .play span{background:var(--gold)}
.play svg{width:15px;height:15px;fill:var(--gold);margin-left:3px;transition:.2s}
.vid:hover .play svg{fill:#170F02}
.vbody{padding:16px 18px 18px}
.vbody h3{font-family:var(--display);font-size:17px;margin:0;letter-spacing:.01em}
.vbody p{margin:6px 0 0;font-family:var(--mono);font-size:11px;color:var(--muted);
  letter-spacing:.08em;text-transform:uppercase}

/* ---------- album ---------- */
.album{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:52px;
  align-items:start}
@media (max-width:900px){.album{grid-template-columns:1fr;gap:34px}}
.cover{position:relative}
.cover img{width:100%;box-shadow:var(--shadow)}
.badge{position:absolute;top:-13px;left:-13px;background:var(--green);color:#04160A;
  font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;padding:8px 12px}
.meta{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  margin-top:22px;border:1px solid var(--line)}
.meta > div{background:var(--ink-2);padding:13px 14px}
.meta dt{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:0}
.meta dd{margin:5px 0 0;font-family:var(--mono);font-size:14px;font-weight:700;color:var(--gold)}
.tracks{list-style:none;margin:0;padding:0;columns:2;column-gap:34px;
  font-variant-numeric:tabular-nums}
@media (max-width:900px){.tracks{columns:1}}
.tracks li{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);
  break-inside:avoid;font-size:15px}
.tracks .n{font-family:var(--mono);font-size:12.5px;color:var(--green);min-width:22px;
  padding-top:2px}
.tracks .t{font-weight:600}
.tracks li.lead .t{color:var(--gold)}
.platforms{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.plat{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  padding:9px 13px;text-decoration:none;color:var(--text);
  box-shadow:inset 0 0 0 1px var(--line);transition:.16s}
.plat:hover{color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}

/* ---------- film ---------- */
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:22px}
.film{box-shadow:inset 0 0 0 1px var(--line);background:var(--ink-3)}
.film img{aspect-ratio:16/9;object-fit:cover;width:100%}
.film .fb{padding:17px 18px}
.film h3{font-family:var(--display);font-size:18px;margin:0}
.film .role2{font-family:var(--mono);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--green);margin:7px 0 0}
.film p{margin:9px 0 0;font-size:14.5px;color:var(--muted)}

/* ---------- press ---------- */
/* Six co-signs. auto-fit picked five across and left a sixth cell of bare
   container background showing — the grid's own colour leaking through the
   gap. Fixed counts that divide into six mean the row is always full. */
.press{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
@media (max-width:820px){.press{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.press{grid-template-columns:1fr}}
.press div{background:var(--ink);padding:20px 18px;display:flex;flex-direction:column;
  min-height:112px}
.press .who{font-family:var(--display);font-size:15.5px;line-height:1.2}
/* Push the label to the bottom so they line up even when a name wraps. */
.press .what{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-top:auto;padding-top:12px}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
@media (max-width:860px){.about{grid-template-columns:1fr;gap:32px}}
.about p{font-size:16.5px;color:#DCD9CE;max-width:58ch}
.about p + p{margin-top:15px}
.photostack{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.photostack img{width:100%;height:100%;object-fit:cover}
.photostack .tall{grid-row:span 2}


/* ---------- booking ---------- */
.bookgrid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:start}
@media (max-width:900px){.bookgrid{grid-template-columns:1fr;gap:34px}}
.terms{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:26px}
.terms > div{background:var(--ink-2);padding:15px 18px}
.terms dt{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:0}
.terms dd{margin:6px 0 0;font-size:15px;font-weight:600}
.terms dd small{display:block;font-weight:400;color:var(--muted);font-size:13px;margin-top:3px}

.picker{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-bottom:22px}
@media (max-width:520px){.picker{grid-template-columns:1fr}}
.picker button{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;padding:13px 12px;background:transparent;color:var(--muted);
  border:0;box-shadow:inset 0 0 0 1px var(--line-2);cursor:pointer;transition:.16s;
  text-align:left}
.picker button:hover{color:var(--text)}
.picker button[aria-pressed="true"]{background:var(--green-deep);color:#EAF7EE;
  box-shadow:inset 0 0 0 1px var(--green)}
form{display:grid;gap:15px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
@media (max-width:620px){.row{grid-template-columns:1fr}}
label{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:7px}
input,select,textarea{width:100%;background:var(--ink);color:var(--text);
  border:1px solid var(--line-2);padding:12px 13px;font-family:var(--body);font-size:15px}
input:focus,select:focus,textarea:focus{border-color:var(--gold);outline:none}
textarea{min-height:104px;resize:vertical}
fieldset{border:0;margin:0;padding:0;display:grid;gap:15px}
fieldset[hidden],[hidden]{display:none!important}
.formnote{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.04em;
  line-height:1.7}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.sent{background:rgba(39,162,78,.09);box-shadow:inset 0 0 0 1px rgba(39,162,78,.42);
  padding:18px 20px}
.sent h3{font-family:var(--display);font-size:17px;margin:0 0 8px;color:var(--green-lit)}
.sent p{margin:0;font-size:14.5px;color:#CFD6C8}
.sent p + p{margin-top:9px}
.sent a{color:var(--gold)}

/* ---------- mailing list ---------- */
.mail{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--ink-2)}
.mail .wrap{display:flex;align-items:center;justify-content:space-between;gap:26px;
  padding:26px 0;flex-wrap:wrap}
.mail h3{font-family:var(--display);font-size:19px;margin:0}
.mail p{margin:6px 0 0;color:var(--muted);font-size:14px}
.mailform{display:flex;gap:9px;flex-wrap:wrap}
.mailform input{min-width:230px}

/* ---------- placeholder flag ---------- */
.todo{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);background:rgba(224,162,43,.09);
  box-shadow:inset 0 0 0 1px var(--gold-deep);padding:4px 9px;display:inline-block}

/* ---------- footer ---------- */
footer{padding:46px 0 60px}
.fgrid2{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;
  align-items:flex-start}
.socials{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
.small{font-family:var(--mono);font-size:11.5px;color:var(--muted);line-height:1.9;
  letter-spacing:.03em;max-width:46ch}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto}
}

/* ================================================================
   BACKGROUND PLAYER — the ticket-stub bar docked to the bottom
   Browsers block sound until the visitor interacts with the page, so
   this can't start on its own. It sits there, one tap from playing,
   and keeps going as they scroll. Volume opens at 65%.
   To add a track: drop the mp3 in assets/audio/ and add it to
   data-tracks on .player in index.html. Nothing else to change.
   ================================================================ */
body{padding-bottom:78px}
@media(max-width:700px){body{padding-bottom:70px}}

.player{position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:rgba(10,12,9,.94);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-top:2px dashed var(--line-2);
  transform:translateY(0);transition:transform .35s ease}
/* punched corners — same stub language as the bet slip */
.player::before,.player::after{content:"";position:absolute;top:-11px;
  width:20px;height:20px;border-radius:50%;background:var(--ink);
  box-shadow:inset 0 0 0 2px var(--line-2)}
.player::before{left:-10px}
.player::after{right:-10px}

.player .inner{width:min(1180px,92vw);margin-inline:auto;display:grid;
  grid-template-columns:auto auto minmax(0,1fr) auto auto auto auto;
  gap:18px;align-items:center;padding:13px 0}

.pbtn{width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:var(--green);color:#04160A;display:grid;place-items:center;
  transition:background .16s,transform .16s;flex:none}
.pbtn:hover{background:var(--green-lit);transform:scale(1.04)}
.pbtn svg{width:16px;height:16px;fill:currentColor}
.player.on .pbtn{background:var(--gold)}
.player.on .pbtn:hover{background:var(--gold-lit)}

.skip{background:transparent;border:0;color:var(--muted);cursor:pointer;
  padding:8px;display:grid;place-items:center}
.skip:hover{color:var(--gold)}
.skip svg{width:15px;height:15px;fill:currentColor}

.nowbox{min-width:0}
.nowbox .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.nowbox .t{font-family:var(--display);font-size:15px;letter-spacing:-.005em;
  margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-decoration:none;display:block}
.nowbox .t:hover{color:var(--gold)}

/* EQ bars — CSS animation by default, driven by the real waveform
   once the analyser is running (see app.js). */
.eqbox{display:flex;align-items:flex-end;gap:3px;height:26px}
.eqbox i{width:3px;background:var(--gold);display:block;height:20%;
  animation:eq 1.1s ease-in-out infinite alternate;
  transition:background .2s}
.eqbox i:nth-child(2){animation-delay:.16s;background:var(--green)}
.eqbox i:nth-child(3){animation-delay:.32s}
.eqbox i:nth-child(4){animation-delay:.08s;background:var(--green)}
.eqbox i:nth-child(5){animation-delay:.42s}
.eqbox i:nth-child(6){animation-delay:.24s;background:var(--green)}
.eqbox i:nth-child(7){animation-delay:.5s}
@keyframes eq{from{height:12%}to{height:100%}}
.player:not(.on) .eqbox i{animation-play-state:paused;height:26%;
  background:var(--line-2)}
.player.live .eqbox i{animation:none}

/* volume — thin gold-filled track, gold knob.
   Every browser draws a range input differently, so the track and the
   thumb are both rebuilt from scratch on each engine. */
.vol{display:flex;align-items:center;gap:9px}
.vol .vi{width:15px;height:15px;fill:var(--muted);flex:none}
.vol input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;
  width:84px;height:14px;background:transparent;cursor:pointer;
  margin:0;padding:0;border:0;display:block}
.vol input[type=range]:focus{outline:none}
.vol input[type=range]:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
/* WebKit / Blink */
.vol input[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none;
  appearance:none;height:3px;border:0;border-radius:2px;
  background:linear-gradient(var(--gold),var(--gold)) left center/var(--fill,65%) 3px no-repeat,
             var(--line-2)}
.vol input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:12px;height:12px;border-radius:50%;background:var(--gold);
  border:0;margin-top:-4.5px;transition:transform .14s}
.vol input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.25)}
/* Firefox */
.vol input[type=range]::-moz-range-track{height:3px;border:0;border-radius:2px;
  background:var(--line-2)}
.vol input[type=range]::-moz-range-progress{height:3px;border-radius:2px;
  background:var(--gold)}
.vol input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;
  background:var(--gold);border:0}

.serialtag{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  color:var(--muted);white-space:nowrap}
.plink{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;padding:9px 13px;
  background:var(--gold);color:#170F02;font-weight:600;white-space:nowrap;
  transition:background .16s}
.plink:hover{background:var(--gold-lit)}

@media(max-width:980px){.serialtag{display:none}}
@media(max-width:860px){.eqbox{display:none}}
@media(max-width:700px){
  .player .inner{grid-template-columns:auto minmax(0,1fr) auto;gap:12px;
    padding:10px 0}
  .skip,.vol,.plink{display:none}
  .pbtn{width:40px;height:40px}
  .nowbox .t{font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){
  .eqbox i{animation:none!important;height:45%}
}

/* ================================================================
   RESTRAINT PASS + MOTION
   Everything below intentionally overrides earlier rules rather than
   editing them, so the original design is one delete away if this
   direction turns out to be wrong.
   ================================================================ */

/* ---- 1. breathe ----------------------------------------------
   The single biggest lever on "does this feel expensive". Roughly
   40% more air per section and a narrower measure for body copy. */
:root{--pad:clamp(72px,8vw,118px)}
.sechead{margin-bottom:clamp(38px,5vw,58px)}
.sub{max-width:52ch;font-size:15px;color:var(--muted)}

/* ---- 2. drop the banding -------------------------------------
   Alternating background bands were doing the work of separating
   sections. Whitespace does it better and leaves one flat black
   field for the photography to sit on. */
.alt{background:transparent}
.perf{border-top:1px solid var(--line);margin-bottom:clamp(30px,4vw,44px)}
.perf::before,.perf::after{display:none}
.alt .perf::before,.alt .perf::after{display:none}

/* ---- 3. quieter labels ---------------------------------------
   The gold eyebrow appeared on all eight sections, which spent the
   accent colour until it stopped reading as an accent. Now it's
   muted text with a short green tick, and gold is reserved for
   things you can actually click. */
.eyebrow{font-size:10.5px;letter-spacing:.2em;color:var(--muted);gap:9px}
.eyebrow::before{width:16px;height:1px;background:var(--green)}
.hero .eyebrow{color:var(--gold)}

/* ---- 4. fewer boxes ------------------------------------------ */
.role{box-shadow:none;background:transparent;color:var(--muted);padding:6px 0;
  margin-right:16px}
.rolebar{gap:0}
/* The old grid drew its dividers with a 1px gap over a filled container —
   clever, but the moment the cells went transparent for this pass that fill
   became a big green box. Dividers are now a border on each item and the
   container has no background at all. */
.press{background:none;border:0;gap:0 clamp(24px,4vw,56px)}
.press > div{background:transparent;box-shadow:none;min-height:0;
  padding:18px 0 26px;border-top:1px solid var(--line);display:block}
/* `.press div` matches .who and .what too — they're divs — so the original
   112px min-height was being applied to every single line of text inside a
   cell, not just the cell. Three times the height for no reason. */
/* `.press div` matches .who and .what too — they're divs — so the cell's
   112px min-height, 20px/18px padding and flex column were all being applied
   a second time to every line of text inside it. That's where the 275px-tall
   rows came from. Reset the inner two explicitly. */
.press .who,.press .what{min-height:0;padding:0;display:block;background:none}
.press .who{font-size:16px;line-height:1.25;margin:0 0 6px}
.press .what{margin:0;font-size:10.5px}
.slip{opacity:.3}

/* ---- 5. the CTA: float and glow ------------------------------
   Only the primary green button moves. A ghost button that floated
   too would turn the hero into a bouncy castle.
   The glow is a box-shadow on a pseudo-element rather than the
   button itself, so the blur is composited and never re-lays-out
   the row of buttons around it. */
.btn{position:relative;transition:transform .22s cubic-bezier(.22,1,.36,1),
  background .18s ease,box-shadow .22s ease}
.nav .btn{animation:none}
.btn:not(.ghost){animation:lift 4.6s ease-in-out infinite;
  box-shadow:0 0 0 0 rgba(39,162,78,0),0 10px 26px -14px rgba(39,162,78,.85)}
.btn:not(.ghost)::after{content:"";position:absolute;inset:-2px;z-index:-1;
  background:inherit;filter:blur(13px);opacity:.42;
  transition:opacity .22s ease;pointer-events:none}
.btn:not(.ghost):hover{transform:translateY(-3px);animation-play-state:paused}
.btn:not(.ghost):hover::after{opacity:.72}
.btn.gold{box-shadow:0 10px 26px -14px rgba(224,162,43,.9)}
@keyframes lift{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}}

/* ---- 6. scroll reveals ---------------------------------------
   Transform + opacity only, so each one runs on the compositor and
   costs nothing on the main thread. .seen is added once by the
   observer in app.js and never removed — nothing re-animates on the
   way back up, which is the thing that makes reveal effects
   obnoxious. No-JS and reduced-motion both fall through to visible. */
.rise{opacity:0;transform:translate3d(0,22px,0);
  transition:opacity .62s cubic-bezier(.22,1,.36,1),
             transform .62s cubic-bezier(.22,1,.36,1)}
.rise.seen{opacity:1;transform:none}
.rise:nth-child(2){transition-delay:.06s}
.rise:nth-child(3){transition-delay:.12s}
.rise:nth-child(4){transition-delay:.18s}

/* ---- 7. performance -------------------------------------------
   Transitioning backdrop-filter forces the compositor to re-blur the
   whole strip behind the bar on every frame for 300ms, starting the
   moment you scroll — this was the main source of the choppiness.
   The blur still appears, it just snaps instead of animating.
   The player's blur is dropped entirely: over a near-black page it
   was invisible and cost a full-width backdrop snapshot per frame. */
.nav{transition:background .3s ease,border-color .3s ease}
.player{backdrop-filter:none;-webkit-backdrop-filter:none;
  background:rgba(10,12,9,.97)}
/* A filtered, full-viewport iframe gets its own compositor layer so
   scrolling past it doesn't re-run the filter. */
.hero-video{contain:layout paint;will-change:opacity}
.hero-video iframe{transform:translate3d(-50%,-50%,0)}

@media (prefers-reduced-motion:reduce){
  .btn:not(.ghost){animation:none}
  .rise{opacity:1;transform:none;transition:none}
}

/* ---- 8. stop filtering live video ------------------------------
   contrast/saturate/brightness on the hero iframe meant the GPU
   re-filtered a full-viewport moving video texture every frame it
   painted. The still image keeps its filter — that's paid once — but
   the video now gets the same darkening from a flat scrim layered
   over it, which costs nothing. brightness(.62) is worth roughly a
   38% black overlay, so the look holds. */
.hero-video iframe{filter:none}
.hero-bg::after{background:
  linear-gradient(to top,var(--ink) 1%,rgba(10,12,9,.86) 38%,rgba(10,12,9,.3) 78%),
  linear-gradient(to right,rgba(10,12,9,.96) 0%,rgba(10,12,9,.9) 34%,rgba(10,12,9,.12) 78%),
  linear-gradient(rgba(10,12,9,.40),rgba(10,12,9,.40))}

/* ---- 9. aspect ratios ------------------------------------------
   Regression from the last pass: adding width/height attributes to
   every image fixed the layout shift, but an HTML height attribute
   sets the CSS height property. With .cover img at width:100% the
   browser was drawing an 800px-tall box at ~700px wide — a square
   album cover stretched into a portrait. Same on the film stills,
   where the explicit height also cancelled their aspect-ratio rule.
   height:auto hands the ratio back to the intrinsic size. The four
   rules that set a height deliberately (avatar, hero, thumbnails,
   photo stack) all out-specify this and are unaffected. */
img{height:auto}
/* Parked by the observer in app.js once the hero scrolls away — the
   bills keep their positions, they just stop costing a repaint. */
.rain-off .rain{animation-play-state:paused}

/* ---- 10. crop the portrait to the face -------------------------
   pr-pimpinken.jpg is 676x845 — a tall portrait dropped into a 16:9
   box. object-fit:cover keeps the middle band by default, and on this
   frame the middle is his jacket: the crop line lands across his chin.
   Pulling the focal point up to 6% keeps the face in frame.
   Any portrait source added to this row later will need the same
   treatment; landscape sources crop sideways and are fine as-is. */
.film img[src$="pr-pimpinken.jpg"]{object-position:50% 6%}

/* ================================================================
   THE BILL STACK
   Every section after booking is a $100 bill. With html.stack-on (set
   by app.js) the stage pins under the nav and scrolling thumbs the top
   bill off to reveal the next. Without it — reduced motion, or JS off —
   the same bills simply sit one after another.
   Sizes on phones are designed to fit one screen; app.js also measures
   each bill and scales its contents down a touch on very short phones,
   so nothing ever spills out of the card.
   ================================================================ */
:root{--nav-h:64px;--player-h:74px}

.stack{position:relative;padding:12px 0 40px}
.bill{position:relative;width:min(1180px,calc(100% - 32px));margin:28px auto}

.bill-front{position:relative;border-radius:6px;overflow:hidden;
  background:#10140E url(assets/bill-bg.webp) center/cover no-repeat;
  box-shadow:inset 0 0 0 1px #242B21,0 24px 48px -18px rgba(0,0,0,.95)}
/* the engraved double frame */
.bill-front::before,.bill-front::after{content:"";position:absolute;pointer-events:none;z-index:1}
.bill-front::before{inset:14px;border:1px solid #3B4633;border-radius:3px}
.bill-front::after{inset:20px;border:1px solid rgba(39,162,78,.32);border-radius:2px}
.bill-100{position:absolute;z-index:1;font-family:var(--display);font-size:30px;line-height:1;
  letter-spacing:-.02em;color:rgba(224,162,43,.12);pointer-events:none}
.bill-100.tl{left:36px;top:30px}
.bill-100.br{right:36px;bottom:30px}
.bill-serial{position:absolute;z-index:1;right:116px;top:40px;font-family:var(--mono);
  font-size:12px;letter-spacing:.14em;color:var(--green);pointer-events:none}
.bill-motto{position:absolute;z-index:1;left:38px;bottom:34px;font-family:var(--mono);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);pointer-events:none}
.bill-seal{position:absolute;z-index:1;right:34px;top:26px;width:64px;height:64px;border-radius:50%;
  box-sizing:border-box;border:2px solid rgba(39,162,78,.6);
  box-shadow:inset 0 0 0 4px #10140E,inset 0 0 0 5px rgba(39,162,78,.45);
  display:grid;place-items:center;font-family:var(--display);font-size:14px;color:var(--green);
  background:#10140E;pointer-events:none}

.bill-body{position:relative;z-index:2;box-sizing:border-box;padding:84px 72px 68px;
  display:flex;flex-direction:column;gap:24px}
.bill-shine,.bill-shade{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0}
.bill-shine{background:linear-gradient(115deg,rgba(240,180,65,0) 38%,rgba(240,180,65,.16) 50%,rgba(240,180,65,0) 62%);
  background-size:260% 100%}
.bill-shade{background:#050604}
/* the back of the bill, folded over the front when a corner peels */
.bill-flapwrap{position:absolute;inset:0;z-index:4;pointer-events:none;visibility:hidden}
.bill-flap{position:absolute;inset:0;background:#1B2418 url(assets/bill-back.webp) center/cover no-repeat}
.bill-flapshade{position:absolute;inset:0}

/* ---- content inside a bill ---- */
.bill-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.bill-head h2{margin:8px 0 0;font-size:clamp(30px,3.2vw,42px)}
.bill-head .sub{margin:8px 0 0;font-size:14.5px}
.bill .vid:hover{transform:none}
.bill-vgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.bill .vbody{padding:12px 14px 14px}
.bill .vbody h3{font-size:15px}
.bill-album{display:grid;grid-template-columns:auto minmax(0,1fr);gap:40px;align-items:start}
.bill-album .cover img{width:min(290px,32vh);height:auto}
.bill .tracks{column-gap:28px}
.bill .tracks li{padding:7px 0}
.bill-fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.bill .film .fb{padding:14px 16px}
.bill .film p{font-size:13.5px;margin-top:6px}
.bill-about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:stretch}
.bill-about p{font-size:15.5px;color:#DCD9CE;margin:0 0 12px;max-width:52ch}
.bill-about h2{font-size:clamp(30px,3.2vw,42px)}
.bill-about .photostack{grid-template-rows:1fr 1fr;height:min(440px,52vh);min-height:0}
.bill-about .photostack img{height:100%;min-height:0}
.bill .press{margin:0}
.bill .tablewrap{margin:0}

/* ---- stacked mode ---- */
html.stack-on .stack{padding:0}
html.stack-on .stack-stage{position:sticky;top:var(--nav-h);overflow:hidden;
  height:calc(100vh - var(--nav-h) - var(--player-h));
  height:calc(100svh - var(--nav-h) - var(--player-h));
  perspective:1700px;perspective-origin:50% -20%}
html.stack-on .bill{position:absolute;left:0;right:0;top:14px;margin:0 auto;
  width:min(1180px,calc(100% - 48px));height:calc(100% - 58px);
  transform-origin:50% 0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  will-change:transform}
html.stack-on .bill-front{position:absolute;inset:0}
/* the body is scaled to fit its card when app.js says it has to */
html.stack-on .bill-body{position:absolute;top:0;left:50%;
  width:calc(100% / var(--fit,1));height:calc(100% / var(--fit,1));
  transform:translateX(-50%) scale(var(--fit,1));transform-origin:50% 0}
html.stack-on .bill-about{flex:1;min-height:0}
html.stack-on .bill-about .photostack{height:100%}

/* ---- phones: each bill laid out to fit one phone screen ---- */
@media (max-width:699px){
  .bill{width:calc(100% - 20px)}
  html.stack-on .bill{width:calc(100% - 20px);top:10px;height:calc(100% - 34px)}
  .bill-front::before{inset:8px}
  .bill-front::after{inset:12px}
  .bill-100{font-size:18px}
  .bill-100.tl{left:22px;top:20px}
  .bill-100.br{right:22px;bottom:18px}
  .bill-serial{font-size:9.5px;right:70px;top:27px;letter-spacing:.1em}
  .bill-motto{font-size:8.5px;left:22px;bottom:20px;letter-spacing:.14em}
  .bill-seal{width:42px;height:42px;right:20px;top:16px;font-size:10px;
    box-shadow:inset 0 0 0 3px #10140E,inset 0 0 0 4px rgba(39,162,78,.45)}
  .bill-body{padding:62px 20px 44px;gap:16px}
  .bill-head{flex-direction:column;align-items:flex-start;gap:12px}
  .bill-head h2,.bill-about h2{font-size:27px}
  .bill-head .sub{font-size:13px}
  .bill-head .btn{padding:10px 16px;font-size:12px}
  .bill-vgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .bill .vbody{padding:8px 10px 10px}
  .bill .vbody h3{font-size:12.5px}
  .bill .vbody p{display:none}
  .bill .play span{width:38px;height:38px}
  .bill-album{grid-template-columns:1fr;gap:14px}
  .bill-album .cover img{width:112px}
  .bill-album .badge{font-size:9px;padding:5px 8px;top:-8px;left:-8px}
  .bill .tracks{columns:2;column-gap:16px}
  .bill .tracks li{padding:5px 0;gap:8px;font-size:12.5px}
  .bill .tracks .n{font-size:11px;min-width:18px}
  .bill-fgrid{grid-template-columns:1fr;gap:10px}
  .bill .film{display:grid;grid-template-columns:128px minmax(0,1fr);align-items:center}
  .bill .film img{height:100%;aspect-ratio:16/9}
  .bill .film .fb{padding:8px 12px}
  .bill .film h3{font-size:14px}
  .bill .film .role2{font-size:10px}
  .bill .film p{font-size:12.5px;margin-top:4px}
  .bill-about{grid-template-columns:1fr;gap:14px}
  .bill-about p{font-size:14px;margin-bottom:8px}
  .bill-about .photostack{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1fr;height:150px;gap:8px}
  .bill-about .photostack .tall{grid-row:auto}
  html.stack-on .bill-about .photostack{height:150px}
  html.stack-on .bill-about{flex:none}
  .bill .press{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bill .press > div{padding:10px 0 14px}
  .bill .press .who{font-size:14px}
  .bill .press .what{font-size:9.5px}
  .bill .shows{font-size:12px}
  .bill .shows th,.bill .shows td{padding:8px 6px}
}
/* balance the content on the note instead of leaving it top-heavy */
/* auto margins centre the content when there's room and fall back to
   top-aligned when there isn't, so an over-tall bill overflows downward only
   (where the fit measurement in app.js can see it), never off the top */
html.stack-on .bill-body > :first-child{margin-top:auto}
html.stack-on .bill-body > :last-child{margin-bottom:auto}
/* The note texture is a pre-rendered image, not the vector original: an
   SVG this detailed gets re-drawn every frame a bill moves, which cost
   more than everything else in the stack put together. */

/* ---- keeping the flip on the compositor ----
   Every value the stack changes per frame is a transform or an opacity on
   an element that has its own layer, so the GPU just moves pictures around
   instead of repainting bills. The one exception is the corner peel's
   clip, which only ever touches the single bill mid-flip. */
html.stack-on .bill-shade{will-change:opacity}
html.stack-on .bill-shine{background-size:100% 100%;left:-100%;right:auto;width:300%;
  background:linear-gradient(105deg,rgba(240,180,65,0) 40%,rgba(240,180,65,.16) 50%,rgba(240,180,65,0) 60%);
  will-change:transform,opacity}

/* ---- phones: the note stands upright ----
   A landscape banknote forced into a tall phone card gets squashed. On
   phones the texture is the same engraving turned 90 degrees, like a bill
   held vertically, and it's sized to cover rather than stretch, so the
   rosettes and portrait oval stay round on every screen. */
@media (max-width:699px){
  .bill-front{background-image:url(assets/bill-bg-tall.webp)}
  .bill-flap{background-image:url(assets/bill-back-tall.webp)}
}

/* ---- content from AJ (2026-09-21) ---- */
/* six video tiles: 3 across on desktop, 2 on phones */
.bill-vgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:699px){.bill-vgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* the last tile sends people to the full channel */
.vmore{text-decoration:none;color:inherit;display:flex;flex-direction:column}
.vmore-box{aspect-ratio:16/9;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 18px;background:rgba(39,162,78,.08);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--gold)}
.vmore-t{font-family:var(--display);font-size:clamp(15px,1.6vw,20px);line-height:1.05;color:var(--text)}
.vmore-box svg{width:26px;height:26px;flex:none}
.vmore:hover .vmore-box{box-shadow:inset 0 0 0 1px var(--gold)}
@media (max-width:699px){.vmore-t{font-size:14px}.vmore-box{padding:0 12px}.vmore-box svg{width:18px;height:18px}}
/* a co-sign with something to watch */
.press .who a{color:inherit;text-decoration:none;border-bottom:1px solid var(--gold-deep)}
.press .who a:hover{color:var(--gold);border-bottom-color:var(--gold)}
/* shows, until there are dates */
.noshows{border-top:1px solid var(--line);padding-top:22px;max-width:56ch}
.noshows-t{font-family:var(--display);font-size:clamp(20px,2vw,26px);line-height:1.2;margin:0 0 12px}
.noshows p{margin:0;color:var(--muted)}
.noshows .noshows-t{color:var(--text)}
.noshows-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.small a{color:var(--gold);text-decoration:none}
.small a:hover{text-decoration:underline}
/* videos bill: heading on the left, a 3x2 grid on the right, so six
   tiles fit a laptop-height card without shrinking */
@media (min-width:900px){
  #videos .bill-body{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);
    gap:44px;align-content:center;align-items:center}
  html.stack-on #videos .bill-body > *{margin:0}
  #videos .bill-head{flex-direction:column;align-items:flex-start;gap:20px}
}
/* phones: three small tiles across, titles only */
@media (max-width:699px){
  .bill-vgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .bill .vbody{padding:6px 7px 8px}
  .bill .vbody h3{font-size:10.5px;letter-spacing:0}
  .bill .play span{width:28px;height:28px}
  .bill .play svg{width:10px;height:10px}
  .vmore-t{font-size:11px}.vmore-box{padding:0 8px}.vmore-box svg{width:14px;height:14px}
  .bill-about p{font-size:13.5px;line-height:1.5;margin-bottom:7px}
  .bill-about .photostack,html.stack-on .bill-about .photostack{height:112px}
}

/* keep keyboard focus / anchor scrolls clear of the fixed player bar */
html{scroll-padding-bottom:calc(var(--player-h) + 12px)}


/* Phones: the fold's shading is a fixed gradient instead of one rebuilt
   on every frame. The fold angle never changes mid-flip anyway, and
   rebuilding it was the most expensive thing in the whole flip. */
@media (max-width:699px){
  .bill-flapshade{background:linear-gradient(-116deg,
    rgba(0,0,0,.62) 12%, rgba(255,255,255,.07) 36%,
    rgba(0,0,0,.06) 64%, rgba(0,0,0,.42) 90%)}
}