/* The Podcasts page: the rack's parts, type and light on the dark room, without the rack.
   Sizes come from --u as on the rack, so the keys, caps, readouts, meters and the monitor are the same parts at the
   same sizes. */

.pg {
  --u: calc(min(100cqw, 1400px) * 1.75 / 19);
  --fs-body: clamp(13px, calc(var(--u) * 0.118), 16px); --fs-label: clamp(7.5px, calc(var(--u) * 0.068), 9.5px); --fs-name: clamp(8.5px, calc(var(--u) * 0.08), 11px);
  --cap-w: max(64px, calc(var(--u) * 0.5)); --cap-h: calc(var(--cap-w) * 0.6); --fs-cap: max(8.5px, calc(var(--cap-w) * 0.14)); --bz: min(22px, calc(var(--u) * 0.17));
  --ink: #e4e0d7; --ink-dim: #9a9da5; --ink-line: rgba(228, 224, 215, 0.2); --engrave: 0 1px 0 rgba(0, 0, 0, 0.8); --silk: var(--stamp-font); --punch: var(--punch-font); --plate-solid: #0e0f12;
  --accent: var(--amber); --led-on: url(../assets/img/parts/led-amber-on.png); --led-off: url(../assets/img/parts/led-amber-off.png);
  --btn-wide: url(../assets/img/parts/btn-wide-dark.png); --btn-ink: #e3dfd6; --scr-bg: #1b1306; --scr-ink: #ffb000; --scr-glow: 0 0 8px rgba(255, 176, 0, 0.5); --link: var(--amber);
  position: relative; max-width: 1400px; margin: 0 auto; padding: 0 0 40px; color: var(--ink);
}
@media (max-width: 999px) { .pg { --u: clamp(84px, 10.5cqw, 100px); --fs-label: 9px; } }

/* the site bar is shared (rack.css). Here it is glass, as on the other pages: no plate, no edge, so the room's red and
   its smoke run under the mark and the menu; once the page has scrolled under it, a blur keeps the mark and the caps
   clear of the words beneath */
.sitebar { background: transparent; border-bottom-color: transparent; box-shadow: none; transition: background-color 0.3s, filter 0.6s; }
body.scrolled .sitebar { background: rgba(10, 11, 13, 0.42); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); }

/* ---------- the booth ---------- */
.hero { display: grid; grid-template-columns: minmax(240px, 360px) minmax(0, 1fr); align-items: stretch; gap: calc(var(--u) * 0.45); padding: calc(var(--u) * 0.3) calc(var(--u) * 0.3) calc(var(--u) * 0.3); }
.emblem { display: grid; justify-items: center; align-content: start; gap: 6px; }
/* the lamp: the print is HTML over the rendered lens; lit, it flickers on, the way a real one does, and its light
   reaches the mic below */
.onair { display: grid; place-items: center; width: 200px; height: 80px; border-radius: 12px; background: url(../assets/img/parts/onair-off.png) center / 100% 100% no-repeat; font: 600 25px/1 "Barlow", Arial, sans-serif; letter-spacing: 0.18em; text-indent: 0.18em; text-transform: uppercase; color: #b8817b; transition: box-shadow 0.35s; }
/* the room: the lamp's red on the walls, faint while it is off and full while it is on, and smoke drifting through
   the room on a layer under the page. The smoke is grey until the lamp lights; then a second layer of the same
   puffs, moving in step with the first, shows them in the lamp's red where its light reaches, masked round the
   lamp itself (the script keeps the lamp's place and builds the puffs) */
@property --glow { syntax: "<number>"; inherits: true; initial-value: 0; }
body { --glow: 0; --lx: 24vw; --ly: 22vh; transition: --glow 0.35s; background: radial-gradient(1400px 600px at 50% -10%, rgba(255, 255, 255, 0.05), transparent 60%), radial-gradient(70% 62% at var(--lx) var(--ly), rgb(255 56 36 / calc(0.09 + var(--glow) * 0.26)), transparent 70%), radial-gradient(60% 55% at 88% 86%, rgb(200 40 30 / calc(0.05 + var(--glow) * 0.1)), transparent 70%), var(--void); background-attachment: scroll, fixed, fixed, scroll; }
body.playing { --glow: 1; }
.pg { z-index: 1; }
.smoke { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.smoke i { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--w); margin: calc(var(--w) / -2) 0 0 calc(var(--w) / -2); background: var(--tex) center / contain no-repeat; opacity: var(--o); will-change: transform; animation: var(--path) var(--dur) linear var(--lag) infinite; }
.smoke.lit { opacity: 0; -webkit-mask-image: radial-gradient(circle at var(--lx) var(--ly), #000 0, rgba(0, 0, 0, 0.75) 16vmax, rgba(0, 0, 0, 0.18) 34vmax, transparent 52vmax); mask-image: radial-gradient(circle at var(--lx) var(--ly), #000 0, rgba(0, 0, 0, 0.75) 16vmax, rgba(0, 0, 0, 0.18) 34vmax, transparent 52vmax); }
.smoke.lit i { background: #ff4a34; -webkit-mask: var(--tex) center / contain no-repeat; mask: var(--tex) center / contain no-repeat; opacity: calc(var(--o) * 1.6); }
body.playing .smoke.lit { opacity: 1; animation: lit-flicker 0.8s steps(1, end) both; }
@keyframes smoke-a { 0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); } 50% { transform: translate3d(9vw, -16vh, 0) rotate(14deg) scale(1.25); } 100% { transform: translate3d(-6vw, -34vh, 0) rotate(26deg) scale(1.5); } }
@keyframes smoke-b { 0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); } 50% { transform: translate3d(-11vw, -14vh, 0) rotate(-12deg) scale(1.3); } 100% { transform: translate3d(5vw, -32vh, 0) rotate(-22deg) scale(1.55); } }
@keyframes smoke-c { 0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(0.9); } 50% { transform: translate3d(7vw, -20vh, 0) rotate(18deg) scale(1.2); } 100% { transform: translate3d(14vw, -36vh, 0) rotate(30deg) scale(1.45); } }
@keyframes smoke-d { 0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1.1); } 50% { transform: translate3d(-8vw, -12vh, 0) rotate(-16deg) scale(1.35); } 100% { transform: translate3d(-15vw, -30vh, 0) rotate(-28deg) scale(1.6); } }
@media (prefers-reduced-motion: reduce) { .smoke i { animation: none; } body.playing .smoke.lit { animation: none; } }
/* the lights go down while a show plays: the rack's low light (body.lowlight) on the parts, the page's print and the mic
   dimmed with it; the lamp, the tube and the readout keep their own light */
.lowlight .sitebar, .lowlight .title, .lowlight .silkline, .lowlight .lede, .lowlight .kicker, .lowlight .blurb, .lowlight .scrawl, .lowlight .awards, .lowlight .lineup, .lowlight .zone { filter: brightness(0.55); }
.sitebar, .title, .silkline, .lede, .kicker, .blurb, .scrawl, .awards, .lineup, .zone, .micwrap .mic { transition: filter 0.6s; }
.lowlight .micwrap .mic:not(.lit) { filter: brightness(0.45); }
.lowlight .program .crt { box-shadow: 0 0 90px 18px rgba(220, 235, 255, 0.1); }
body.playing .onair { background-image: url(../assets/img/parts/onair-on.png); color: #fff6f0; text-shadow: 0 0 9px #fff, 0 0 2px #fff; box-shadow: 0 0 44px 12px rgba(255, 60, 40, 0.36), 0 30px 60px 10px rgba(255, 50, 30, 0.14); animation: lamp-flicker 0.8s steps(1, end) both; }
@keyframes lamp-flicker {
  0%, 7% { background-image: url(../assets/img/parts/onair-off.png); color: #b8817b; text-shadow: none; box-shadow: none; }
  8%, 12% { background-image: url(../assets/img/parts/onair-on.png); color: #fff6f0; text-shadow: 0 0 9px #fff, 0 0 2px #fff; box-shadow: 0 0 44px 12px rgba(255, 60, 40, 0.36); }
  13%, 23% { background-image: url(../assets/img/parts/onair-off.png); color: #b8817b; text-shadow: none; box-shadow: none; }
  24%, 29% { background-image: url(../assets/img/parts/onair-on.png); color: #fff6f0; text-shadow: 0 0 9px #fff, 0 0 2px #fff; box-shadow: 0 0 44px 12px rgba(255, 60, 40, 0.36); }
  30%, 34% { background-image: url(../assets/img/parts/onair-off.png); color: #b8817b; text-shadow: none; box-shadow: none; }
  35%, 100% { background-image: url(../assets/img/parts/onair-on.png); color: #fff6f0; text-shadow: 0 0 9px #fff, 0 0 2px #fff; box-shadow: 0 0 44px 12px rgba(255, 60, 40, 0.36), 0 30px 60px 10px rgba(255, 50, 30, 0.14); }
}
/* the mic stands on the column's centre line, under the lamp, and shrinks on a short window so the booth fits it;
   the lit render fades in over it while a show plays */
.micwrap { position: relative; display: block; width: min(100%, 340px); }
.micwrap .mic { display: block; width: 100%; height: auto; max-height: calc(100vh - 290px); object-fit: contain; object-position: top; }
.micwrap .lit { position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s; }
body.playing .micwrap .lit { opacity: 1; animation: lit-flicker 0.8s steps(1, end) both; }
@keyframes lit-flicker { 0%, 7% { opacity: 0; } 8%, 12% { opacity: 1; } 13%, 23% { opacity: 0; } 24%, 29% { opacity: 1; } 30%, 34% { opacity: 0; } 35%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { body.playing .onair, body.playing .micwrap .lit { animation: none; } }
/* the words: the name at the top, its cap tops level with the lamp's top edge (the box is trimmed to the cap height,
   so nothing sits above it), his line and his paragraph; the
   shows along the bottom. With a show on the stage its name stands at the top, two sizes down, and the stage
   follows it, the rest of the header waiting behind */
.intro { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto minmax(16px, 1fr) auto; align-content: start; min-width: 0; }
.title { margin: 0; font-family: var(--punch); font-weight: 800; font-size: clamp(56px, min(calc(var(--u) * 1.05), 11vw), 136px); line-height: 0.9; text-transform: uppercase; color: var(--ink); text-shadow: var(--engrave); text-wrap: balance; text-box: trim-start cap alphabetic; }
.silkline { margin: 16px 0 0; font-family: var(--silk); font-size: max(9px, var(--fs-label)); letter-spacing: 0.22em; text-transform: uppercase; line-height: 1.9; color: var(--ink-dim); text-shadow: var(--engrave); }
.lede { max-width: 58ch; margin: 18px 0 0; font-size: clamp(15px, calc(var(--u) * 0.135), 18px); line-height: 1.55; color: #c9ccd2; }
.lineup { grid-row: 5; grid-column: 1; }
.program { grid-row: 2; grid-column: 1; }
body.on-program .intro { grid-template-rows: auto auto; }
body.on-program .title { padding-right: 136px; font-size: clamp(28px, min(calc(var(--u) * 0.42), 4.4vw), 56px); line-height: 0.95; }
body.on-program .silkline, body.on-program .lede, body.on-program .lineup { display: none; }

/* ---------- the lineup: the shows go by, artwork in a bezel, the LED lit on the one that is playing ---------- */
.lineup { overflow-x: auto; overflow-y: hidden; margin: 0 calc(var(--u) * -0.3) 0 0; padding: 10px 0 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.lineup::-webkit-scrollbar { display: none; }
/* the belt is one grid of four rows (art, title, network, award) that every show shares, so a one-line title or
   network leaves the room a two-line one takes and each row meets across the belt */
.belt { display: grid; grid-auto-flow: column; grid-auto-columns: max-content; grid-template-rows: repeat(4, auto); row-gap: 8px; align-items: start; width: max-content; }
.belt .again { display: contents; }
.show { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; gap: 8px; align-content: start; width: clamp(150px, calc(var(--u) * 1.5), 196px); margin-right: 22px; color: inherit; text-decoration: none; }
.show:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
/* the artwork frames take their height from their width the old way: every layout sizes their row from it */
.art::before { content: ""; display: block; padding-top: 100%; }
.art { position: relative; display: block; overflow: hidden; border: 6px solid transparent; border-image: url(../assets/img/parts/bezel.png) 16 fill / 6px; background: #000; }
.art img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(165deg, rgba(255, 255, 255, 0.07), transparent 38%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7), inset 0 3px 8px rgba(0, 0, 0, 0.55); pointer-events: none; }
.art .led { position: absolute; right: 8px; bottom: -9px; z-index: 2; }
.ttl { display: block; min-height: 2.5em; max-height: 2.5em; overflow: hidden; font: 600 14px/1.25 "Barlow", Arial, sans-serif; color: var(--ink); }
.net { font-family: var(--silk); font-size: max(8px, calc(var(--fs-label) * 0.92)); letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.4; color: var(--ink-dim); text-shadow: var(--engrave); }
/* an award is printed between laurels, in the panel's dim ink */
.award { display: inline-flex; align-items: center; gap: 4px; justify-self: start; font-family: var(--silk); font-size: 8px; letter-spacing: 0.14em; text-indent: 0.14em; text-transform: uppercase; line-height: 1.3; color: var(--ink-dim); text-shadow: var(--engrave); }
.award::before, .award::after { content: ""; flex: none; width: 13px; height: 20px; background: url(../assets/img/laurel.svg) center / contain no-repeat; }
.award::after { transform: scaleX(-1); }

/* ---------- the stage: the show that was clicked, under its own name ---------- */
.program { display: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "bar bar" "picture side"; gap: 16px calc(var(--u) * 0.3); align-content: start; padding-top: 10px; outline: none; }
body.on-program .program { display: grid; animation: program-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
@keyframes program-in { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { body.on-program .program { animation: none; } }
.stagebar { grid-area: bar; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.stageright { position: absolute; top: 0; right: 0; z-index: 3; display: grid; justify-items: end; gap: 10px; } /* the Close cap sits in the header, level with the name; on a narrow screen the Live lamp stands over it */
/* the lamp and the cap are a pair: one width, one height, one print. The cap is rendered at the lens's length, not the transport cap stretched */
.stageright .live, .stageright .tkeys .tbtn.wide { box-sizing: border-box; width: 112px; height: 44px; aspect-ratio: auto; padding: 0; font-family: "Barlow", Arial, sans-serif; font-weight: 600; font-size: 14px; line-height: 1; letter-spacing: 0.18em; text-indent: 0.18em; text-transform: uppercase; }
.stageright .tkeys .tbtn.wide { background-image: url(../assets/img/parts/btn-long-dark.png); }
.live { display: none; }
.kicker { margin: 0; font-family: var(--silk); font-size: max(9px, var(--fs-label)); letter-spacing: 0.22em; text-transform: uppercase; line-height: 1.6; color: var(--ink-dim); text-shadow: var(--engrave); }
/* the picture: the main rack's CRT, square, as wide as its half of the column or as tall as the window allows, the
   transport and the readout under it. The artwork sits on the tube until the player takes it; the shield keeps
   clicks on the transport, and lifts only if the browser refused to start the player */
/* the picture's one column is the picture's own width: an auto column would size itself to the transport's print and leave the tube narrower than its box */
.picture { grid-area: picture; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; width: min(100%, calc((100vh - 400px) * 16 / 9)); min-width: min(100%, 240px); }
.program .crt { width: 100%; max-width: none; height: auto; aspect-ratio: 16 / 9; } /* max-width: the rack caps a tube at 420px under 1000; this one is the column's */
.program .tube::after { background-image: url(../assets/img/parts/crt-glass-wide.png), repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0 1px, transparent 1px 3px); }
.program .tube::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 9% / 11%; background: repeating-linear-gradient(90deg, rgba(255, 60, 60, 0.07) 0 1px, rgba(60, 255, 60, 0.07) 1px 2px, rgba(60, 60, 255, 0.07) 2px 3px), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .7  0 0 0 0 .7  0 0 0 0 .7  0 0 0 .5 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"); background-size: 3px 100%, 160px 160px; opacity: 0.55; mix-blend-mode: screen; pointer-events: none; animation: snow 0.4s steps(3) infinite; }
@media (prefers-reduced-motion: reduce) { .program .tube::before { animation: none; } }
.ch-art img { position: absolute; inset: -3%; width: 106%; height: 106%; object-fit: contain; filter: saturate(1.2) contrast(1.06) brightness(0.96) blur(0.4px); }
.ch-tube { display: none; }
.crt.video .ch-tube, .crt.spot .ch-tube { display: block; }
/* Spotify's player is a card of its own: shown whole and sharp, with nothing over it, since the listener may need to sign in on it */
.crt.spot .ch-tube iframe { inset: 0; width: 100%; height: 100%; filter: none; border-radius: 9% / 11%; }
.ch-tube iframe { position: absolute; inset: -3%; width: 106%; height: 106%; border: 0; filter: saturate(1.2) contrast(1.06) brightness(0.96) blur(0.4px); }
.tube .shield { position: absolute; inset: 0; z-index: 2; display: none; }
.crt.video:not(.open) .shield { display: block; }
/* the caps on one line; the readout under them is as wide as their row, its two fields sharing the glass */
.deckrow { display: grid; grid-template-columns: max-content; justify-content: center; justify-items: stretch; gap: 10px; }
.deckrow .readout { width: 100%; }
.deckrow .readout .f { flex: 1 1 var(--w, 6ch); width: auto; }
.program.silent .deckrow { display: none; } /* a show with nothing to play here shows its artwork and its links */
.tbtn.on { box-shadow: 0 0 0 1px var(--accent), 0 0 10px var(--accent); }
/* to the right: his words, his contribution in his own hand on a strip of tape, the laurels, the links */
.side { grid-area: side; display: grid; gap: 14px; align-content: start; justify-items: start; min-width: 0; }
.blurb { margin: 0; max-width: 60ch; font-size: clamp(14px, calc(var(--u) * 0.12), 16px); line-height: 1.5; color: #c9ccd2; }
.scrawl { font-size: clamp(16px, calc(var(--u) * 0.16), 22px); }
.blurb:empty, .scrawl:empty, .awards:empty, .zone:has(> :empty) { display: none; }
.awards { display: flex; gap: 18px; flex-wrap: wrap; }
.program .award { max-width: 40ch; font-size: max(9px, var(--fs-label)); } /* a long award wraps inside a box the laurels hug, instead of spreading them across the column */
.program .award::before, .program .award::after { width: 17px; height: 27px; }
.program .zone .tkeys { flex-wrap: wrap; }
.program .zone .tkeys .tbtn { text-decoration: none; }

@media (max-width: 1199px) {
  /* the column is too narrow for the picture and the words side by side: the stage stacks, the picture across it */
  .program { grid-template-columns: 1fr; grid-template-areas: "bar" "picture" "side"; }
  .picture { width: 100%; }
}
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 22px; padding-top: 24px; }
  /* no room for the booth: the lamp and the mic go, and a Live lamp over the Close cap says what the big one said */
  .emblem { display: none; }
  .live { display: grid; place-items: center; border-radius: 8px; background: url(../assets/img/parts/onair-off.png) center / 100% 100% no-repeat; color: #b8817b; transition: box-shadow 0.35s; }
  body.playing .live { background-image: url(../assets/img/parts/onair-on.png); color: #fff6f0; text-shadow: 0 0 9px #fff, 0 0 2px #fff; box-shadow: 0 0 26px 6px rgba(255, 60, 40, 0.36); animation: lamp-flicker 0.8s steps(1, end) both; }
  .intro { grid-template-rows: none; justify-items: center; width: 100%; }
  .micwrap { width: auto; }
  .micwrap .mic { width: auto; max-height: 38vh; }
  .onair { width: 160px; height: 64px; font-size: 20px; }
  .lede { margin-inline: auto; }
  /* the lineup runs edge to edge: pulled left by exactly the hero's padding, never past the right edge */
  .lineup, .program { grid-row: auto; }
  .lineup { justify-self: start; width: 100vw; margin: 20px 0 0 calc(50% - 50vw); }
  /* the stage stacks: the picture, then the rest, all set left; Close on the stage's first line under the name */
  .program { width: 100%; text-align: left; justify-items: stretch; }
  body.on-program .intro { text-align: left; justify-items: stretch; }
  body.on-program .title { padding-right: 0; }
  .stageright { position: static; }
  .side { justify-items: start; }
}