/* EL STUDIO — hero (01 ON AIR) */
.onair {
  --accent: var(--red);
  --vpad: 7vh;                                              /* breathing room above and below the set */
  --h-pad: clamp(12px, 1.5vw, 24px);                        /* TV bezel padding */
  --h-bz: calc(var(--h-pad) * .5);
  --h-panel: clamp(62px, 6vw, 100px);
  --cabh: clamp(96px, 15vh, 150px);                         /* bay that holds the VCR + tape rack */
  --avail: calc(100svh - var(--osd-h) - 2 * var(--vpad));
  --iw: min(100vw - 2 * var(--gutter), var(--maxw));
  --tvw: min(var(--iw) * .52, var(--avail) / .89);          /* TV + cabinet is one unit: its height is always .87 x its width */
  --mew: calc(var(--tvw) * .27);                            /* the cutout standing beside the cabinet */
  --sign: min((var(--iw) - var(--tvw) - var(--mew) - clamp(32px, 4vw, 72px) - clamp(16px, 1.8vw, 32px)) / 4.5, 15vh);   /* sign fills its column */
  position: relative; height: 100svh; min-height: 600px; padding-top: var(--osd-h);
  display: flex; flex-direction: column; overflow: clip; background: var(--ink);
}

/* ---------- night brick wall, lit by the sign and falling into darkness */
.onair__wall { position: absolute; inset: 0; z-index: 0; isolation: isolate; background: #2a1a17 url("../assets/ui/hero/bricks.webp") 0 0 / 600px auto; }
.onair__wall::before {               /* light map, multiplied onto the bricks */
  content: ""; position: absolute; inset: 0; mix-blend-mode: multiply;
  background:
    radial-gradient(30% 44% at 22% 48%, #ff8a8a 0%, #e0303c 26%, rgba(150,14,26,.9) 52%, rgba(60,6,12,0) 82%),
    radial-gradient(22% 30% at 26% 72%, rgba(255,90,190,.55), transparent 70%),
    radial-gradient(34% 46% at 66% 44%, rgba(120,140,190,.32), transparent 72%),
    linear-gradient(#0f0809, #0f0809);
}
.onair__wall::after {                /* hot spill + falloff to black at the floor and ceiling */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(18% 26% at 22% 46%, rgba(255,40,60,.22), transparent 70%),
    linear-gradient(rgba(10,7,8,.75), transparent 22%, transparent 64%, rgba(10,7,8,.9) 92%, var(--ink)),
    radial-gradient(120% 90% at 40% 50%, transparent 55%, rgba(5,3,4,.75));
}

.onair__inner {
  position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; width: var(--iw); margin: 0 auto; padding: var(--vpad) 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 4vw, 72px); align-items: center;
}

/* ---------- the neon sign */
.onair__sign { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; }
.neon-board {
  position: relative; display: inline-block; padding: calc(var(--sign) * .28) calc(var(--sign) * .36) calc(var(--sign) * .2);
  border-radius: 10px;
  background:
    linear-gradient(118deg, rgba(255,255,255,.075), rgba(255,255,255,.012) 34%, rgba(255,255,255,0) 60%, rgba(255,255,255,.035)),
    rgba(40,10,14,.18);
  box-shadow:
    inset 0 0 0 1px rgba(255,180,190,.13), inset 0 1px 0 rgba(255,255,255,.2), inset 1px 0 0 rgba(255,120,130,.12),
    0 0 0 1px rgba(0,0,0,.35), 0 26px 40px -16px rgba(0,0,0,.6);
}
.neon-board::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(70% 70% at 45% 45%, rgba(255,40,60,.16), transparent 70%); pointer-events: none; }
.neon-board__stand {
  position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #fff, #c9c4cc 30%, #6c6770 70%, #3a363c);
  box-shadow: 0 0 0 2px rgba(0,0,0,.35), 3px 5px 5px rgba(0,0,0,.55), 0 0 6px rgba(255,60,80,.35);
}
.neon-board__stand:nth-child(1) { top: 10px; left: 10px; }
.neon-board__stand:nth-child(2) { top: 10px; right: 10px; }
.neon-board__stand:nth-child(3) { bottom: 10px; left: 10px; }
.neon-board__stand:nth-child(4) { bottom: 10px; right: 10px; }
.neon-name {
  position: relative; margin: 0; font: 400 var(--sign)/.9 var(--f-neon); letter-spacing: .02em; white-space: nowrap;
  color: #fff4f2; -webkit-text-stroke: .022em rgba(255,70,84,.92);
  text-shadow: 0 0 1px #fff, 0 0 4px #ff5a66, 0 0 9px var(--red), 0 0 20px var(--red), 0 0 44px rgba(255,30,50,.75), 0 0 90px rgba(200,0,30,.6);
  animation: buzz 3s infinite;
}
.neon-name__row { position: relative; display: block; }
.neon-name__row + .neon-name__row { margin-left: .3em; }
.neon-name__row::after {             /* the tubes' shadow on the acrylic */
  content: attr(data-t); position: absolute; left: 0; top: 0; z-index: -1; color: rgba(0,0,0,.5);
  -webkit-text-stroke: 0; text-shadow: none; transform: translate(.035em, .06em); filter: blur(3px);
}
.neon-clip-unused { position: absolute; bottom: .1em; width: .1em; height: .07em; border-radius: 2px; background: linear-gradient(rgba(255,255,255,.55), rgba(190,180,200,.35)); box-shadow: 0 1px 1px rgba(0,0,0,.5); -webkit-text-stroke: 0; }
.flick { display: inline; animation: flick 5.5s infinite 1.2s; }
.neon-script {
  position: relative; margin: .3em 0 0 1.1em; transform: rotate(-5deg); transform-origin: left; white-space: nowrap;
  font: 400 calc(var(--sign) * .6)/1 var(--f-script); color: #fff1fa; -webkit-text-stroke: .012em rgba(255,90,190,.9);
  text-shadow: 0 0 1px #fff, 0 0 5px var(--pink), 0 0 14px var(--pink), 0 0 34px rgba(255,79,180,.7);
  animation: flick 9s infinite 3s;
}
.neon-board__cable { position: absolute; left: 30%; bottom: calc(100% - 4px); width: 26px; height: 60vh; fill: none; stroke: #151316; stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(3px 6px 3px rgba(0,0,0,.55)); pointer-events: none; z-index: -1; }
.neon-board__cable path { vector-effect: non-scaling-stroke; }
.neon-board__boot { position: absolute; left: calc(30% + 6px); top: -7px; width: 14px; height: 16px; border-radius: 3px 3px 5px 5px; background: linear-gradient(90deg, #0d0c0e, #2b282d 45%, #121013); box-shadow: 0 3px 4px rgba(0,0,0,.6); }
.onair__cta { display: flex; flex-wrap: wrap; gap: 16px; margin: clamp(24px, 5vh, 48px) 0 0 4px; }

/* ---------- the set: TV on a cabinet */
.onair__set { position: relative; min-width: 0; display: flex; align-items: flex-end; gap: clamp(16px, 1.8vw, 32px); }
.onair__set .tv--hero { flex: none; width: var(--tvw); }
.onair__me { position: relative; flex: none; width: var(--mew); margin: 0 0 2px; }
.onair__me img { display: block; width: 100%; height: auto; filter: drop-shadow(-6px 10px 14px rgba(0,0,0,.55)) brightness(.94); }
.onair__me::after {                  /* contact shadow on the floor */
  content: ""; position: absolute; left: 4%; right: 4%; bottom: -8px; height: 18px; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.75), transparent);
}
.tv--hero { --pad: var(--h-pad); --bz: var(--h-bz); --panel: var(--h-panel); }
.tv--hero .tv__body { background: linear-gradient(90deg, rgba(255,50,64,.09), transparent 22%), radial-gradient(130% 70% at 28% -12%, rgba(255,255,255,.11), transparent 58%), linear-gradient(180deg, #312d30 0%, #242123 38%, #1b191b 78%, #151315 100%); z-index: 2; }
.tv--hero .tv__screen { aspect-ratio: 1.42; }
.tv--hero.is-film .tv__screen video { object-fit: contain; background: #000; }
.tv--hero .tv__panel { gap: clamp(8px, 1.3vh, 14px); }
.tv--hero .tv__grill { max-width: none; }
.tv--hero .tv__brand { writing-mode: horizontal-tb; transform: none; width: 100%; padding: 5px 4px 4px; border-radius: 2px; text-align: center; font-size: clamp(10px, .85vw, 14px); letter-spacing: .04em; overflow: hidden; white-space: nowrap; color: #1c1a1d; opacity: 1; text-shadow: 0 1px 0 rgba(255,255,255,.45);
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 3px), linear-gradient(90deg, #8b8790, #d8d4dc 28%, #a19da6 55%, #e1dde4 78%, #96929b);
  box-shadow: 0 0 0 1px #0a090a, inset 0 1px 0 rgba(255,255,255,.6); }
.tv--hero .tv__brand small { font-size: .8em; margin-top: 2px; letter-spacing: .06em; }
.tv__knobs { display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 1.2vh, 14px); }
.tv--hero .tv__knob { --k: clamp(34px, 3.3vw, 52px); }
.tv__knob--ch { cursor: default; transform: rotate(-40deg); }
.tv__knob-labels { display: none; }
.tv__power { display: flex; align-items: center; gap: 6px; font: 400 11px/1 var(--f-crt); color: #8d8690; letter-spacing: .08em; }
.tv__power i { font-style: normal; }

.cab {
  position: relative; z-index: 1; margin: -2px -2.2% 0; padding: 11px 12px 13px; border-radius: 3px;
  background:
    linear-gradient(90deg, rgba(255,60,70,.12), transparent 30%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 1px, transparent 1px 7px, rgba(255,255,255,.025) 7px 8px, transparent 8px 13px),
    linear-gradient(#3a2620, #2a1a15 40%, #1f130f);
  box-shadow: inset 0 2px 0 rgba(255,170,150,.18), inset 0 -2px 0 rgba(0,0,0,.5), 0 0 0 1px #0a0606, 0 30px 40px -10px rgba(0,0,0,.8);
}
.cab::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--noise); opacity: .3; mix-blend-mode: overlay; pointer-events: none; }
.cab__bay {
  position: relative; z-index: 1; display: flex; align-items: flex-end; gap: clamp(8px, 1vw, 16px); height: var(--cabh); padding: 0 clamp(6px, .8vw, 12px);
  background: linear-gradient(rgba(0,0,0,.85), rgba(0,0,0,.35) 30%, rgba(0,0,0,.55)), linear-gradient(90deg, #1a0f0c, #120a08);
  box-shadow: inset 0 8px 14px rgba(0,0,0,.9), inset 0 -1px 0 rgba(255,170,150,.08);
}

/* ---------- VCR deck */
.vcr--deck {
  flex: 0 0 41%; margin: 0; height: auto; aspect-ratio: 3.3; max-height: 94%;
  display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: "brand vfd" "slot vfd" "ctrl ctrl";
  grid-template-rows: auto minmax(0, 1fr) auto; gap: 5px 6%; padding: 8px 12px 8px; align-items: stretch;
  container-type: inline-size;
}
.vcr__brand { grid-area: brand; font: 400 clamp(10px, .85vw, 13px)/1 var(--f-crt); color: #c9c2cc; letter-spacing: .05em; white-space: nowrap; overflow: hidden; }
.vcr__brand b { display: none; font: 400 1em/1 var(--f-crt); color: #6e6872; margin-left: 4px; letter-spacing: .1em; }
.vcr--deck .vcr__slot {
  grid-area: slot; height: auto; min-height: 22px; border-radius: 2px; overflow: visible;
  background: linear-gradient(#050405, #0e0c0e); box-shadow: inset 0 3px 4px #000, 0 1px 0 rgba(255,255,255,.09), 0 -1px 0 rgba(0,0,0,.7);
}
.vcr--deck .vcr__tape {                             /* seated: down in the carriage, seen through the smoked flap */
  left: 7%; right: 7%; top: 18%; bottom: 0; height: auto; padding: 0 8px; display: flex; align-items: center;
  font-size: clamp(10px, 1vw, 14px); line-height: 1; z-index: 1; transform-origin: 50% 70%;
  transform: translateY(0) scale(.96); opacity: .92; filter: brightness(.86);
}
.vcr__flap {               /* smoked hinged cassette door */
  position: absolute; inset: 0; z-index: 2; transform-origin: 50% 0; transform: perspective(200px) rotateX(0deg);
  background: linear-gradient(rgba(90,86,94,.42), rgba(30,28,32,.36) 45%, rgba(10,9,11,.55)); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -2px 2px rgba(0,0,0,.6);
}
.vcr__flap::after { content: ""; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font: 400 10px/1 var(--f-crt); color: rgba(255,255,255,.32); letter-spacing: .1em; }

/* ---------- the tape changer. hero.js switches the phases (is-eject → is-empty → is-ready → is-insert); every beat
   inside a phase is a cue from the CUE table in hero.js (--e-* eject, --g-* gap, --i-* insert), so the motion lands
   on the sounds. The cassette's poses, all written translateY() scale() so they blend into each other:
   seated (above) · mouth: lifted to the opening, translateY(-14%) scale(1) · out: sticking out toward you,
   translateY(-60%) scale(1.15), in front of the flap · gone: lifted away toward the camera, out of focus */
.vcr--deck.is-empty .vcr__tape { opacity: 0; }

/* eject (0 = tape-out.mp3 starts): key down · 1.00 the carriage lifts it, the door gives · 1.20 POP · lifted away */
.vcr--deck.is-eject .vcr__eject i { animation: vcrKey .34s cubic-bezier(.3,.7,.4,1) both; }
.vcr--deck.is-eject .vcr__tape {
  animation:
    tapeLift calc(var(--e-pop) - var(--e-lift)) cubic-bezier(.3,.2,.3,1) var(--e-lift) both,
    tapeOut calc(var(--e-away) - var(--e-pop)) linear var(--e-pop) forwards;
}
.vcr--deck.is-eject .vcr__flap {
  animation:
    flapNudge calc(var(--e-pop) - var(--e-lift)) ease-out var(--e-lift) both,
    flapFling .24s cubic-bezier(.2,.8,.3,1) var(--e-pop) forwards,
    flapShut .34s linear var(--e-flap) forwards;
}
@keyframes tapeLift { to { transform: translateY(-14%) scale(1); opacity: 1; filter: brightness(.95); } }
@keyframes tapeOut {
  0%   { transform: translateY(-14%) scale(1); opacity: 1; z-index: 3; filter: brightness(.95) drop-shadow(0 0 0 rgba(0,0,0,0)) blur(0); animation-timing-function: cubic-bezier(.1,.75,.3,1); }
  8%   { transform: translateY(-82%) scale(1.19); filter: brightness(1.16) drop-shadow(0 7px 5px rgba(0,0,0,.55)) blur(0); animation-timing-function: cubic-bezier(.4,0,.5,1); }
  17%  { transform: translateY(-54%) scale(1.13); animation-timing-function: cubic-bezier(.4,0,.5,1); }
  25%  { transform: translateY(-63%) scale(1.155); animation-timing-function: ease-in-out; }
  32%  { transform: translateY(-60%) scale(1.15); opacity: 1; filter: brightness(1.12) drop-shadow(0 6px 5px rgba(0,0,0,.5)) blur(0); animation-timing-function: cubic-bezier(.5,0,.85,.55); }
  62%  { opacity: .9; animation-timing-function: ease-in; }
  100% { transform: translateY(-120%) scale(1.45); opacity: 0; z-index: 3; filter: brightness(1.2) drop-shadow(0 14px 10px rgba(0,0,0,.35)) blur(1.8px); }
}
@keyframes flapNudge { to { transform: perspective(200px) rotateX(-30deg); } }
@keyframes flapFling { 0% { transform: perspective(200px) rotateX(-30deg); } 45% { transform: perspective(200px) rotateX(-86deg); } 100% { transform: perspective(200px) rotateX(-78deg); } }
@keyframes flapShut {                                /* spring-loaded: swings shut, knocks against the frame, settles */
  0%   { transform: perspective(200px) rotateX(-78deg); animation-timing-function: cubic-bezier(.5,0,.9,.6); }
  42%  { transform: perspective(200px) rotateX(0deg); animation-timing-function: ease-out; }
  62%  { transform: perspective(200px) rotateX(-7deg); animation-timing-function: ease-in; }
  80%  { transform: perspective(200px) rotateX(0deg); animation-timing-function: ease-out; }
  90%  { transform: perspective(200px) rotateX(-1.5deg); }
  100% { transform: perspective(200px) rotateX(0deg); }
}

/* gap: the next cassette is brought to the slot from in front (it arrives as the gap ends) */
.vcr--deck.is-ready .vcr__tape { animation: tapeBring var(--g-bring) cubic-bezier(.2,.6,.3,1) calc(var(--g-len) - var(--g-bring)) both; }
@keyframes tapeBring {
  0%   { transform: translateY(-125%) scale(1.45); opacity: 0; z-index: 3; filter: brightness(1.2) drop-shadow(0 14px 10px rgba(0,0,0,.35)) blur(1.8px); }
  55%  { opacity: 1; }
  100% { transform: translateY(-60%) scale(1.15); opacity: 1; z-index: 3; filter: brightness(1.12) drop-shadow(0 6px 5px rgba(0,0,0,.5)) blur(0); }
}

/* insert (0 = tape-in.mp3 starts): pushed through the door (0–0.40) · the carriage takes it and draws it in
   (0.40–1.15, easing off) · 1.15 it seats with a bump and the door snaps shut · 1.35 threading: the deck shudders,
   the VFD dims */
.vcr--deck.is-insert { animation: vcrThread .26s linear var(--i-thread) both; }
.vcr--deck.is-insert .vcr__vfd { animation: vcrDip .3s ease-out var(--i-thread) both; }
.vcr--deck.is-insert .vcr__tape {
  animation:
    tapePush var(--i-grab) cubic-bezier(.4,.1,.3,1) both,
    tapePull calc(var(--i-seat) - var(--i-grab)) cubic-bezier(.32,.12,.42,1) var(--i-grab) forwards,
    tapeSeat .2s linear var(--i-seat) forwards;
}
.vcr--deck.is-insert .vcr__flap {
  animation:
    flapPush .18s cubic-bezier(.2,.7,.3,1) both,
    flapSnap .28s linear var(--i-seat) forwards;
}
@keyframes tapePush {
  0%   { transform: translateY(-60%) scale(1.15); opacity: 1; z-index: 3; filter: brightness(1.12) drop-shadow(0 6px 5px rgba(0,0,0,.5)) blur(0); }
  100% { transform: translateY(-14%) scale(1); opacity: 1; z-index: 3; filter: brightness(.96) drop-shadow(0 0 0 rgba(0,0,0,0)) blur(0); }
}
@keyframes tapePull {
  0%   { transform: translateY(-14%) scale(1); opacity: 1; z-index: 1; filter: brightness(.96); }
  6%   { transform: translateY(-11.5%) scale(.995); }
  100% { transform: translateY(-3%) scale(.966); opacity: .95; z-index: 1; filter: brightness(.88); }
}
@keyframes tapeSeat {
  0%   { transform: translateY(-3%) scale(.966); animation-timing-function: cubic-bezier(.5,0,1,.6); }
  16%  { transform: translateY(7%) scale(.96); animation-timing-function: ease-out; }
  48%  { transform: translateY(-1.5%) scale(.96); animation-timing-function: ease-in-out; }
  76%  { transform: translateY(.8%) scale(.96); }
  100% { transform: translateY(0) scale(.96); opacity: .92; filter: brightness(.86); }
}
@keyframes flapPush { 0% { transform: perspective(200px) rotateX(0deg); } 70% { transform: perspective(200px) rotateX(-84deg); } 100% { transform: perspective(200px) rotateX(-80deg); } }
@keyframes flapSnap {
  0%   { transform: perspective(200px) rotateX(-80deg); animation-timing-function: cubic-bezier(.6,0,.95,.5); }
  24%  { transform: perspective(200px) rotateX(0deg); animation-timing-function: ease-out; }
  46%  { transform: perspective(200px) rotateX(-8deg); animation-timing-function: ease-in; }
  66%  { transform: perspective(200px) rotateX(0deg); animation-timing-function: ease-out; }
  82%  { transform: perspective(200px) rotateX(-2deg); }
  100% { transform: perspective(200px) rotateX(0deg); }
}
.vcr__vfd {
  grid-area: vfd; display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; padding: 4px 8px; border-radius: 3px;
  background: radial-gradient(120% 120% at 30% 20%, #10201b, #050a08); box-shadow: inset 0 2px 4px #000, 0 0 0 1px #000, 0 1px 0 1px rgba(255,255,255,.06);
  font: 400 clamp(12px, 1vw, 15px)/1 var(--f-crt); color: #7dffc4; text-shadow: 0 0 5px rgba(80,255,180,.7), 0 0 12px rgba(80,255,180,.25);
  overflow: hidden; white-space: nowrap;
}
.vcr__vfd span { overflow: hidden; text-overflow: ellipsis; opacity: .9; }
.vcr--deck .vcr__clock { font-size: clamp(17px, 1.65vw, 26px); color: inherit; text-shadow: inherit; letter-spacing: .04em; }
.vcr__ctrl { grid-area: ctrl; display: flex; gap: 5px; }
.vcr__btn, .vcr--deck .vcr__eject {
  flex: 1; min-height: 28px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; box-shadow: none; transform: none;
}
.vcr__btn i {
  display: grid; place-items: center; width: 100%; height: clamp(14px, 1.5vw, 19px); border-radius: 2px; font: 400 clamp(11px, .9vw, 14px)/1 var(--f-crt); font-style: normal; letter-spacing: -.08em; color: #2a272c;
  background: linear-gradient(#f1eef3, #b9b4bd 48%, #8f8a94 52%, #c8c3cc); box-shadow: 0 0 0 1px #070607, 0 2px 0 #050405, inset 0 1px 0 rgba(255,255,255,.9);
  transition: transform .06s, box-shadow .06s;
}
.vcr__btn:hover i { filter: brightness(1.08); }
.vcr__btn:active i, .vcr__btn.is-hit i { transform: translateY(2px); box-shadow: 0 0 0 1px #070607, inset 0 1px 2px rgba(0,0,0,.35); }
.vcr__btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 3px; }
.vcr--deck .vcr__eject i { background: linear-gradient(#ff8088, #d4202f 50%, #a8101c 52%, #d82a36); color: #fff; }

/* ---------- tape rack: 16 cassettes, spines out */
.rack { position: relative; flex: 1 1 auto; min-width: 0; height: 100%; display: flex; align-items: flex-end; }
.rack::after { content: ""; position: absolute; left: -4px; right: -4px; bottom: 0; height: 6px; background: linear-gradient(#4a3028, #24150f); box-shadow: 0 -1px 0 rgba(255,180,160,.15); }
.rack__tapes { display: flex; align-items: flex-end; gap: 2px; width: 100%; height: 100%; padding: 8px 2px 6px; }
.tape-spine {
  --c: var(--red); position: relative; flex: 1 1 0; min-width: 0; height: 100%; padding: 0; border: 0; cursor: pointer; border-radius: 2px 2px 1px 1px;
  background: linear-gradient(90deg, #0b0a0b, #252226 35%, #19171a 70%, #0a090a);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 1px 0 0 rgba(0,0,0,.8), 0 3px 4px rgba(0,0,0,.6);
  transform: translateY(0) rotate(var(--r, 0deg)); transform-origin: 50% 100%;
  transition: transform .35s cubic-bezier(.3,1.3,.5,1), opacity .3s, filter .2s;
}
.tape-spine::before { content: ""; position: absolute; left: 22%; right: 22%; top: 3px; height: 3px; border-radius: 1px; background: #050405; box-shadow: 0 1px 0 rgba(255,255,255,.07); }
.tape-spine__label {
  position: absolute; left: 12%; right: 12%; top: 10px; bottom: 7%; overflow: hidden; border-radius: 1px;
  background: linear-gradient(var(--c) 0 6px, rgba(0,0,0,.35) 6px 7px, transparent 7px), var(--paper, #efe6d2);
  box-shadow: inset 0 0 6px rgba(120,90,40,.25);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 10px 0 4px;
}
.tape-spine__label::after { content: ""; position: absolute; inset: 0; background: var(--noise); opacity: .3; mix-blend-mode: multiply; }
.tape-spine__label b {
  writing-mode: vertical-rl; transform: rotate(180deg); font: 400 12px/1 var(--f-marker); font-size: min(13px, calc((var(--cabh) * .93 - 40px) / (var(--len) * .66))); color: #1c1714; white-space: nowrap; letter-spacing: .02em;
}
.tape-spine__label small { display: none;  font: 400 clamp(11px, .95vw, 14px)/1 var(--f-pen); color: #4b4038; }
.tape-spine:hover { transform: translateY(-7px) rotate(var(--r, 0deg)); filter: brightness(1.12); }
.tape-spine:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.tape-spine.is-out { transform: translateY(-112%); opacity: 0; pointer-events: none; }
.tape-spine.is-out::after { content: none; }
/* a cassette leaves the rack: unseated (--lift), then carried toward the camera (bigger, out of focus); dropping
   back is the same move reversed, ending with a little settle in its slot. Timed by --g-len / --e-drop / --e-away. */
.tape-spine { --lift: -14%; --near: 1.16; }
.tape-spine.is-lift, .tape-spine.is-drop, .tape-spine.is-back { transition: none; transform-origin: 50% 60%; }
.tape-spine.is-lift { animation: spineLift var(--g-len) linear both; pointer-events: none; }
.tape-spine.is-drop { animation: spineDrop calc(var(--e-away) - var(--e-drop)) linear var(--e-drop) both; }
.tape-spine.is-back { animation: spineDrop .36s linear both; }
@keyframes spineLift {
  0%   { transform: translateY(0) scale(1) rotate(var(--r, 0deg)); opacity: 1; filter: brightness(1) blur(0); animation-timing-function: cubic-bezier(.2,.7,.3,1); }
  42%  { transform: translateY(var(--lift)) scale(1.03) rotate(var(--r, 0deg)); opacity: 1; filter: brightness(1.1) blur(0); animation-timing-function: cubic-bezier(.5,0,.8,.5); }
  100% { transform: translateY(calc(var(--lift) * 1.7)) scale(var(--near)) rotate(0deg); opacity: 0; filter: brightness(1.25) blur(1.6px); }
}
@keyframes spineDrop {
  0%   { transform: translateY(calc(var(--lift) * 1.7)) scale(var(--near)) rotate(0deg); opacity: 0; filter: brightness(1.25) blur(1.6px); animation-timing-function: cubic-bezier(.2,.6,.4,1); }
  38%  { transform: translateY(var(--lift)) scale(1.03) rotate(var(--r, 0deg)); opacity: 1; filter: brightness(1.1) blur(0); animation-timing-function: cubic-bezier(.55,0,.85,.4); }
  74%  { transform: translateY(1.5%) scale(1) rotate(var(--r, 0deg)); filter: brightness(1) blur(0); animation-timing-function: ease-out; }
  88%  { transform: translateY(-.8%) scale(1) rotate(var(--r, 0deg)); animation-timing-function: ease-in-out; }
  100% { transform: translateY(0) scale(1) rotate(var(--r, 0deg)); opacity: 1; filter: brightness(1) blur(0); }
}

/* ---------- the screen through a tape change: the last frame freezes and drops out (is-freeze/is-drop) → the VCR's
   blue screen (is-blue) → tracking: snow over the new picture rolling until it catches (is-static), fading (is-lock) */
.tv__static { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; opacity: 0; image-rendering: pixelated; pointer-events: none; transition: opacity .12s; }
.tv--hero.is-freeze .tv__static { opacity: 1; transition: none; filter: saturate(1.2) contrast(1.05) brightness(1.05) sepia(.06) blur(.35px); }
.tv--hero.is-drop .tv__static { animation: picDrop var(--e-blue) cubic-bezier(.55,0,.85,.35) both; }
@keyframes picDrop {
  0%   { transform: none; filter: saturate(1.2) contrast(1.05) brightness(1.05) sepia(.06) blur(.35px); }
  45%  { transform: translateY(-1.2%) scale(1.01, .96); filter: saturate(1) contrast(1.15) brightness(.7) sepia(.06) blur(.6px); }
  100% { transform: translateY(2.5%) scale(1.02, .84); filter: saturate(.6) contrast(1.4) brightness(.1) sepia(.06) blur(1px); }
}
.tv--hero.is-blue .tv__blue { opacity: 1; animation: blueOn .16s steps(1, end) both; }
.tv--hero.is-blue .tv__static { opacity: 0; transition: none; }
.tv--hero.is-blue .tv__osd { opacity: 0; }
.tv--hero.is-static .tv__static { opacity: 1; transition: none; }
.tv--hero.is-static.is-lock .tv__static { opacity: 0; transition: opacity var(--t-fade, .3s) cubic-bezier(.4,0,.6,1); }

@media (prefers-reduced-motion: reduce) {
  .tape-spine, .vcr__flap, .vcr--deck .vcr__tape { transition: none; }
  .vcr--deck, .vcr--deck .vcr__tape, .vcr--deck .vcr__flap, .vcr--deck .vcr__vfd, .vcr--deck .vcr__eject i, .tape-spine,
  .tv--hero .tv__static, .tv--hero .tv__blue { animation: none !important; }
}

/* ---------- desktop: the TV, VCR, tape rack and cabinet are ONE unit sized in cqw (1cqw = 1% of the TV's width),
   so the deck's internal layout is identical at every viewport, just bigger or smaller */
@media (min-width: 901px) and (min-aspect-ratio: 1/1), (orientation: landscape) and (max-height: 540px) {
  .onair__set .tv--hero { container-type: inline-size; --pad: 2.2cqw; --bz: 1.1cqw; --panel: 11cqw; }
  .tv--hero .tv__body { border-radius: 2.4cqw 2.4cqw 1.8cqw 1.8cqw / 2.2cqw 2.2cqw 1.6cqw 1.6cqw; }
  .tv--hero .tv__osd, .tv--hero .tv__blue { font-size: 3cqw; }
  .tv--hero .tv__panel { gap: 1.5cqw; padding: .5cqw 0 .3cqw; }
  .tv--hero .tv__grill { min-height: 6cqw; border-radius: .6cqw; }
  .tv--hero .tv__brand { font-size: 1.3cqw; padding: .6cqw .4cqw .5cqw; }
  .tv--hero .tv__knob { --k: 5.4cqw; }
  .tv--hero .tv__knobs { gap: 1.4cqw; }
  .tv--hero .tv__power { font-size: 1.15cqw; gap: .7cqw; }
  .tv--hero .tv__led { width: 1cqw; height: 1cqw; }
  .tv--hero .cab { padding: 1.4cqw 1.5cqw 1.7cqw; }
  .tv--hero .cab__bay { height: 20cqw; gap: 1.4cqw; padding: 0 1.2cqw; }
  .tv--hero .vcr--deck { container-type: normal; flex: 0 0 40%; aspect-ratio: 2.75; max-height: 92%; gap: .6cqw 1.2cqw; padding: 1cqw 1.3cqw; margin-bottom: 1.2cqw; border-radius: .5cqw .5cqw .8cqw .8cqw; }
  .tv--hero .vcr__brand { font-size: 1.25cqw; }
  .tv--hero .vcr--deck .vcr__slot { min-height: 0; }
  .tv--hero .vcr--deck .vcr__tape { font-size: 1.45cqw; padding: 0 .9cqw; border-width: .12cqw; }
  .tv--hero .vcr__vfd { gap: .5cqw; padding: .5cqw 1cqw; font-size: 1.25cqw; }
  .tv--hero .vcr--deck .vcr__clock { font-size: 2.7cqw; }
  .tv--hero .vcr__ctrl { gap: .6cqw; }
  .tv--hero .vcr__btn, .tv--hero .vcr--deck .vcr__eject { min-height: 0; height: 2.6cqw; }
  .tv--hero .vcr__btn i { height: 2cqw; font-size: 1.3cqw; }
  .tv--hero .rack__tapes { gap: .25cqw; padding: 1cqw .2cqw .7cqw; }
  .tv--hero .tape-spine::before { top: .35cqw; height: .35cqw; }
  .tv--hero .tape-spine__label { top: 1.1cqw; padding: 1.1cqw 0 .4cqw; background: linear-gradient(var(--c) 0 .7cqw, rgba(0,0,0,.35) .7cqw .82cqw, transparent .82cqw), var(--paper, #efe6d2); }
  .tv--hero .tape-spine__label b { font-size: min(1.6cqw, 13.6cqw / (var(--len) * .7)); }
}
@media (min-width: 901px) and (max-width: 1180px) and (min-aspect-ratio: 1/1) {
  .onair { --mew: 0px; --tvw: min(var(--iw) * .56, var(--avail) / .89); }
  .onair__me { display: none; }
}

/* ---------- tablet / phone: stack */
@media (max-width: 900px) and (min-height: 541px), (max-aspect-ratio: 1/1) {
  .onair { height: auto; min-height: 0; --tvw: 100%; --sign: clamp(52px, 15vw, 104px); --cabh: auto; --h-pad: clamp(10px, 2.6vw, 18px); --h-bz: calc(var(--h-pad) * .5); --h-panel: clamp(48px, 11vw, 74px); }
  .onair__inner { grid-template-columns: 1fr; width: auto; margin: 0 var(--gutter); padding: 40px 0 64px; gap: 40px; }
  .onair__sign { align-items: center; text-align: center; }
  .neon-board { text-align: left; }
  .onair__cta { justify-content: center; margin-left: 0; }
  .neon-board__cable, .neon-board__boot { display: none; }
  .onair__set .tv--hero { flex: 1 1 auto; width: auto; min-width: 0; }
  .onair__me { display: none; }
  .cab__bay { flex-direction: column; align-items: stretch; height: auto; padding: 10px 8px 0; gap: 10px; }
  .vcr--deck { flex: none; width: 100%; max-height: none; aspect-ratio: auto; min-height: 92px; }
  .rack { height: 132px; margin: 0 -8px; }
  .rack__tapes { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 14px 10px 8px; gap: 3px; scrollbar-width: thin; }
  .tape-spine { flex: 0 0 38px; scroll-snap-align: start; --lift: -7%; --near: 1.08; }
  .tape-spine__label b { font-size: min(13px, calc(68px / (var(--len) * .66))); }
}
@media (min-width: 600px) and (max-width: 900px) and (min-height: 541px), (min-width: 600px) and (max-aspect-ratio: 1/1) {
  .onair { --mew: 22%; }
  .onair__me { display: block; }
}
@media (max-width: 520px) {
  .tv--hero .tv__panel { gap: 8px; }
  .tv--hero .tv__brand small { display: none; }
  .vcr__brand b { display: none; }
}

/* ---------- touch: VCR keys, tapes and the sound knob big enough for a thumb (stacked phones + tablets) */
@media (max-width: 900px) and (min-height: 541px), (max-aspect-ratio: 1/1) {
  .vcr__btn, .vcr--deck .vcr__eject { min-height: 40px; }
  .vcr__btn i { height: 24px; font-size: 13px; }
  .tape-spine { flex-basis: 40px; }
  .tv--hero .tv__knob { --k: clamp(40px, 5vw, 52px); }
  .tv--hero .tv__grill { min-height: 24px; }
}

/* ---------- landscape phones / short windows: sign and set side by side, and the whole set
   (TV + VCR + tape rack) fits in ONE screen height; the deck gets thumb-sized keys, the rack scrolls */
@media (orientation: landscape) and (max-height: 540px) {
  .onair {
    --vpad: 10px; --mew: 0px;
    --cabh: clamp(88px, 26svh, 108px);
    --tvw: min(var(--iw) * .56, (var(--avail) - var(--cabh) + 2px) / .665);
    --sign: min((var(--iw) - var(--tvw) - clamp(16px, 3vw, 32px)) / 4.7, 19svh);
    height: auto; min-height: 100svh;
  }
  .onair__inner { gap: clamp(16px, 3vw, 32px); }
  .onair__me { display: none; }
  .onair__cta { margin-top: clamp(10px, 4svh, 20px); gap: 10px; }
  .onair .tv--hero { --panel: 12cqw; }
  .onair .tv--hero .tv__knob { --k: min(10.5cqw, 40px); }
  .onair .tv--hero .tv__knobs { gap: 1cqw; }
  .onair .tv--hero .cab__bay { height: var(--cabh); gap: 8px; padding: 0 8px; }
  .onair .tv--hero .vcr--deck {
    flex: 0 0 auto; width: clamp(184px, 56%, 232px); height: auto; aspect-ratio: auto; max-height: none; align-self: stretch;
    margin: 5px 0 6px; padding: 5px 7px 2px; gap: 3px 7px;
  }
  .onair .tv--hero .vcr__brand { font-size: 9px; }
  .onair .tv--hero .vcr--deck .vcr__tape { font-size: 10px; padding: 0 5px; }
  .onair .tv--hero .vcr__vfd { gap: 2px; padding: 3px 6px; font-size: 9px; }
  .onair .tv--hero .vcr--deck .vcr__clock { font-size: 15px; }
  .onair .tv--hero .vcr__ctrl { gap: 4px; }
  .onair .tv--hero .vcr__btn, .onair .tv--hero .vcr--deck .vcr__eject { min-height: 40px; height: 40px; }
  .onair .tv--hero .vcr__btn i { height: 26px; font-size: 12px; }
  .onair .tv--hero .rack__tapes { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; gap: 3px; padding: 8px 4px 6px; }
  .onair .tv--hero .tape-spine { flex: 0 0 36px; scroll-snap-align: start; --lift: -6%; --near: 1.07; }
  .onair .tv--hero .tape-spine__label b { font-size: min(11px, (var(--cabh) - 34px) / (var(--len) * .68)); }
}