/* Podcast studio page. The site's broadcast kit, on the studio floor: the hero is the studio's own
   double doors in CSS 3D, a slice of the wall and floor cut out and stood on the page. The ON AIR box
   lights, the doors swing out and the room's lights come up on the set (podcast.js). Below it the page
   runs like the website and branding pages: crawl, past shows, how it works, the rate card, the desk
   that adds up the session, the board and the booking. Reuses style.css tokens; the accent stays a
   tally, never a fill. Shared pieces (crawl, rate card, xp, cues, wsbar) started as copies of
   site/css/brand.css, so each page can change without breaking the other. */

.ps{--desk:#1C1A1B; --mod:#242122; --mod-2:#161415; --tape:#EFEDEC}
/* style.css sets overflow-x:hidden on html and body, which makes body a scroll box and
   stops the meter sticking. clip does the same job without that side effect */
html:has(body.ps),body.ps{overflow-x:clip}
body.ps{padding-bottom:4.5rem}
#talkback,#shows,#how,#vs,#rates,#desk,#book,#faq{scroll-margin-top:4.5rem}

/* ---------- hero copy ---------- */
.ps-flag{display:inline-flex; align-items:center; gap:.55rem; margin-bottom:1.4rem; padding:.36rem .7rem; background:var(--umd); color:var(--umd-ink); border:1px solid #000; border-radius:1px;
  font-family:var(--f-mono); font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase}
.ps-flag .tally{animation:ps-blink 2.4s steps(1) infinite}
@keyframes ps-blink{0%,70%{opacity:1}71%,100%{opacity:.25}}
@media (prefers-reduced-motion:reduce){ .ps-flag .tally{animation:none} }
.ps-sub{margin-top:1.4rem; max-width:34ch; font-family:var(--f-head); font-weight:600; font-size:clamp(1.15rem,1.7vw,1.4rem); line-height:1.4; color:var(--ink-2); text-wrap:pretty}
.btn--big{min-height:56px; padding-inline:1.5rem 1.6rem; font-size:1.05rem}
.ps-head{padding-bottom:clamp(2rem,4vw,3.5rem); overflow-x:clip}  /* the doors swing past the column; no sideways scroll */
.ps-head__grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(1.5rem,3vw,3rem); align-items:center}
.ps-head__copy{position:relative; z-index:2}
.ps-head .page-head__title{font-size:clamp(2.2rem,3.6vw,3.3rem)}
.ps-head .page-head__title em{font-style:normal; color:var(--ink)}
.ps-head .page-head__title small{font-size:.38em; font-weight:600; letter-spacing:.02em; color:var(--ink-2); white-space:nowrap}
@media (max-width:980px){
  .ps-head{padding-top:5.25rem}
  .ps-head__grid{grid-template-columns:minmax(0,1fr); gap:.5rem}
  .ps-stage{order:-1}
}

/* ---------- the hero stage: the studio doors, built in CSS 3D ----------
   .dr is the camera (perspective) and the size container: every length is a share of the wall
   width --W, so the set scales with the column. The wall is three panels round the doorway with its
   thickness (--D) showing at the edges and in the reveal; the set photo hangs --R behind the opening,
   on the room's floor, so it moves against the doorway as the stage turns. The doors are two leaves
   hinged on the jambs, each a front, a back and an edge. Nothing with opacity, overflow, filter or
   clip-path sits on a 3D group, only on leaves, or Chrome flattens the scene. */
.ps-stage{min-width:0}
.dr{position:relative; aspect-ratio:1/.84; container-type:inline-size; perspective:1250px; perspective-origin:50% 22%; pointer-events:none; user-select:none}
.dr__tilt,.dr__rig,.dr__box,.dr__leaf,.dr__sign{transform-style:preserve-3d}
.dr__tilt{position:absolute; inset:0;
  --W:82cqi; --dw:calc(var(--W) * .56); --dh:calc(var(--W) * .5); --hh:calc(var(--W) * .74);
  --wl:calc((var(--W) - var(--dw)) / 2); --dt:calc(var(--hh) - var(--dh));
  --D:calc(var(--W) * .045); --R:calc(var(--W) * .34); --F:calc(var(--W) * .3); --sl:calc(var(--W) * .03); --t:calc(var(--W) * .016)}
/* the pose GSAP takes over (rotateY, then rotateX, as GSAP writes them), so no-JS gets the same angle */
.dr__rig{position:absolute; left:50%; top:44%; width:0; height:0; transform:rotateY(-25deg) rotateX(8deg)}
.dr__box{position:absolute; left:calc(var(--W) / -2); top:calc(var(--hh) / -2); width:var(--W); height:var(--hh)}
.dr__floor{position:absolute; left:6%; right:2%; top:80%; height:16%; border-radius:50%; background:radial-gradient(closest-side,rgba(35,31,32,.24),rgba(35,31,32,0))}

/* the room: the set, a step back behind the doorway, standing on its own floor */
.dr__room{position:absolute; left:calc(var(--W) * .05); top:calc(var(--W) * .13); width:calc(var(--W) * .8); height:calc(var(--hh) - var(--W) * .11); overflow:hidden; background:#060505;
  transform:translateZ(calc(var(--R) * -1))}
.dr__set{position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; object-position:50% 62%}
.dr[data-set="cyc"] .dr__set{object-position:100% 72%}
.dr__haze{position:absolute; inset:0; background:#040303; opacity:0}
.dr__rfloor{position:absolute; left:var(--wl); top:var(--hh); width:var(--dw); height:var(--R); transform-origin:50% 0; transform:rotateX(-90deg);
  background:linear-gradient(0deg,#3A3431,#1B1817)}
.dr[data-set="cyc"] .dr__rfloor{background:linear-gradient(0deg,#C9C6C3,#9E9A97)}
.dr__rfloor::after{content:""; position:absolute; inset:0; background:#040303; opacity:0}

/* the studio floor out front, cut like the wall, with the room's light spilling on it */
.dr__deck{position:absolute; left:0; top:var(--hh); width:var(--W); height:var(--F); transform-origin:50% 0; transform:rotateX(90deg); overflow:hidden;
  background:linear-gradient(180deg,#1E1B1C,#141213)}
.dr__deck i{position:absolute; left:var(--wl); width:var(--dw); top:0; height:100%;
  background:radial-gradient(75% 110% at 50% 0,rgba(255,206,160,.5),rgba(255,206,160,.14) 55%,rgba(255,206,160,0) 100%)}
.dr__deck-e{position:absolute; left:0; top:var(--hh); width:var(--W); height:calc(var(--D) * .7); transform:translateZ(var(--F)); background:linear-gradient(180deg,#2E2A2B,#0E0C0D)}

/* the reveal: the wall's thickness round the opening, warm on the room side */
.dr__jamb{position:absolute}
.dr__jamb::after{content:""; position:absolute; inset:0; background:#0A0909; opacity:0}
.dr__jamb--l{left:var(--wl); top:var(--dt); width:var(--D); height:var(--dh); transform-origin:0 50%; transform:rotateY(90deg); background:linear-gradient(90deg,#2C2728,#6B5A4E)}
.dr__jamb--r{left:calc(var(--wl) + var(--dw) - var(--D)); top:var(--dt); width:var(--D); height:var(--dh); transform-origin:100% 50%; transform:rotateY(-90deg); background:linear-gradient(270deg,#2C2728,#5A4B41)}
.dr__jamb--t{left:var(--wl); top:var(--dt); width:var(--dw); height:var(--D); transform-origin:50% 0; transform:rotateX(-90deg); background:linear-gradient(180deg,#221E1F,#4A3E36)}

/* the wall: acoustic slats, darker towards the floor; each panel offsets the slats so they run on */
.dr__wall{position:absolute; top:0; height:var(--hh);
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(0,0,0,.5)) 0 0 / 100% var(--hh) no-repeat,
    linear-gradient(90deg,#2C2829 0 7%,#211D1E 7% 62%,#0C0A0B 62% 100%) var(--bx,0) 0 / var(--sl) 100% repeat-x,#171415;
  box-shadow:inset 0 1px 0 #3A3536}
.dr__wall--l{left:0; width:var(--wl)}
.dr__wall--r{left:calc(var(--wl) + var(--dw)); width:var(--wl); --bx:calc((var(--wl) + var(--dw)) * -1)}
.dr__wall--t{left:var(--wl); width:var(--dw); height:var(--dt); --bx:calc(var(--wl) * -1)}
.dr__edge{position:absolute}
.dr__edge--t{left:0; top:calc(var(--D) * -1); width:var(--W); height:var(--D); transform-origin:50% 100%; transform:rotateX(90deg); background:linear-gradient(0deg,#3E393A,#252122)}
.dr__edge--r{left:calc(var(--W) - var(--D)); top:0; width:var(--D); height:var(--hh); transform-origin:100% 50%; transform:rotateY(-90deg); background:linear-gradient(270deg,#3A3536,#1A1718)}
.dr__edge--l{left:0; top:0; width:var(--D); height:var(--hh); transform-origin:0 50%; transform:rotateY(90deg); background:#141213}
/* the ON AIR box's light on the wall */
.dr__glow{position:absolute; left:calc(var(--W) * .2); top:calc(var(--dt) * -.25); width:calc(var(--W) * .6); height:calc(var(--dt) * 1.5); transform:translateZ(1px);
  background:radial-gradient(closest-side,rgba(247,126,45,.34),rgba(247,126,45,.1) 55%,rgba(247,126,45,0))}

/* ON AIR: a lit box over the doors */
.dr__sign{position:absolute; left:calc(var(--W) * .365); top:calc(var(--dt) * .26); width:calc(var(--W) * .27); height:calc(var(--W) * .085); --sd:calc(var(--W) * .028)}
.dr__sign-s{position:absolute; background:#0B0909}
.dr__sign-s--t{left:0; top:0; width:100%; height:var(--sd); transform-origin:50% 0; transform:rotateX(90deg); background:#2A2526}
.dr__sign-s--b{left:0; top:calc(100% - var(--sd)); width:100%; height:var(--sd); transform-origin:50% 100%; transform:rotateX(-90deg)}
.dr__sign-s--l{left:0; top:0; width:var(--sd); height:100%; transform-origin:0 50%; transform:rotateY(-90deg)}
.dr__sign-s--r{left:calc(100% - var(--sd)); top:0; width:var(--sd); height:100%; transform-origin:100% 50%; transform:rotateY(90deg); background:#1E1A1B}
.dr__sign-f{position:absolute; inset:0; display:grid; place-items:center; transform:translateZ(var(--sd)); background:#150E0B;
  border:max(1px,calc(var(--W) * .005)) solid #3A1D12; border-radius:calc(var(--W) * .006); box-shadow:0 0 0 max(1px,calc(var(--W) * .003)) #000}
.dr__sign-f::before{content:""; position:absolute; inset:calc(max(1px,calc(var(--W) * .005)) * -1); border:max(1px,calc(var(--W) * .005)) solid var(--accent); border-radius:inherit;
  background:radial-gradient(120% 140% at 50% 50%,#4A2108,#2A1308 70%);
  box-shadow:0 0 calc(var(--W) * .05) rgba(247,126,45,.55), inset 0 0 calc(var(--W) * .025) rgba(247,126,45,.45)}
.dr__sign-f b{position:relative; font-family:var(--f-display); font-stretch:var(--display-width); font-weight:800; font-size:calc(var(--W) * .043); line-height:1; letter-spacing:.08em; text-transform:uppercase;
  color:#fff; text-shadow:0 0 calc(var(--W) * .012) rgba(247,126,45,.95)}

/* the session clock and the studio plate, on the wall beside the doors */
.dr__clock{position:absolute; left:calc(var(--wl) + var(--dw) + var(--wl) * .1); top:calc(var(--dt) + var(--dh) * .05); width:calc(var(--wl) * .8); padding:calc(var(--W) * .01) calc(var(--W) * .012);
  transform:translateZ(calc(var(--W) * .008)); display:flex; flex-direction:column; align-items:flex-end; gap:calc(var(--W) * .006);
  background:#0B0A09; border:max(1px,calc(var(--W) * .004)) solid #000; box-shadow:0 0 0 max(1px,calc(var(--W) * .004)) #2E2A2B}
.dr__clock-r{display:flex; align-items:center; gap:.4em; font-family:var(--f-mono); font-size:max(6px,calc(var(--W) * .016)); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#8A8485; line-height:1}
.dr__clock-r i{width:.7em; height:.7em; background:var(--accent); box-shadow:0 0 .6em rgba(247,126,45,.85)}
.dr__clock-t{font-family:var(--f-mono); font-size:calc(var(--W) * .042); font-weight:700; line-height:1; letter-spacing:.03em; color:var(--lcd); font-variant-numeric:tabular-nums; text-shadow:0 0 calc(var(--W) * .012) rgba(245,154,98,.55)}
.dr__plate{position:absolute; left:calc(var(--wl) + var(--dw) + var(--wl) * .1); top:calc(var(--dt) + var(--dh) * .34); width:calc(var(--wl) * .8); padding:calc(var(--W) * .011) calc(var(--W) * .012);
  transform:translateZ(calc(var(--W) * .004)); display:flex; flex-direction:column; gap:calc(var(--W) * .005);
  background:linear-gradient(170deg,#E4E1DF,#AFAAA8); box-shadow:0 0 0 max(1px,calc(var(--W) * .002)) #000; color:#231F20}
.dr__plate span{font-family:var(--f-mono); font-size:max(6px,calc(var(--W) * .015)); font-weight:600; letter-spacing:.14em; text-transform:uppercase; line-height:1; color:#4A4748}
.dr__plate b{font-family:var(--f-display); font-stretch:var(--display-width); font-weight:800; font-size:calc(var(--W) * .02); letter-spacing:-.01em; line-height:1.05; white-space:nowrap}

/* the doors: black leaves, a narrow vision panel, a steel pull and a kick plate; padded on the studio side */
.dr__leaf{position:absolute; top:var(--dt); width:calc(var(--dw) / 2); height:var(--dh)}
.dr__leaf--l{left:var(--wl); transform-origin:0 50%; transform:rotateY(-104deg)}
.dr__leaf--r{left:calc(var(--wl) + var(--dw) / 2); transform-origin:100% 50%; transform:rotateY(80deg)}
.dr__face{position:absolute; inset:0; background:linear-gradient(180deg,#252122,#141213 70%,#0F0D0E);
  box-shadow:inset 0 0 0 max(1px,calc(var(--W) * .003)) #000, inset 0 0 0 calc(var(--W) * .009) #1E1B1C, inset 0 0 0 calc(var(--W) * .011) #2E2A2B}
.dr__vp{position:absolute; top:13%; width:20%; height:36%; background:linear-gradient(165deg,#4A5056 0%,#1A1D20 40%,#0A0B0C 100%);
  box-shadow:inset 0 0 0 max(1px,calc(var(--W) * .003)) #000, 0 0 0 calc(var(--W) * .004) #3A3536}
.dr__pull{position:absolute; top:40%; width:calc(var(--W) * .011); height:28%; border-radius:calc(var(--W) * .006);
  background:linear-gradient(90deg,#5E5A59,#E2DFDD 45%,#7A7675); box-shadow:0 0 0 max(1px,calc(var(--W) * .002)) #000}
.dr__kick{position:absolute; left:4%; right:4%; bottom:2%; height:10%; background:linear-gradient(180deg,#A29E9C,#6A6665 60%,#585453); box-shadow:inset 0 1px 0 #CFCBCA}
.dr__leaf--l .dr__vp{right:18%} .dr__leaf--r .dr__vp{left:18%}
.dr__leaf--l .dr__pull{right:7%} .dr__leaf--r .dr__pull{left:7%}
.dr__back{position:absolute; inset:0; transform:translateZ(calc(var(--t) * -1)) rotateY(180deg);
  background:radial-gradient(circle,#2E2A2B 0 34%,#171415 72%) 0 0 / calc(var(--W) * .034) calc(var(--W) * .034),#171415;
  box-shadow:inset 0 0 0 calc(var(--W) * .008) #0C0A0B}
.dr__lip{position:absolute; top:0; height:100%; width:var(--t); background:#38333A}
.dr__leaf--l .dr__lip{left:calc(100% - var(--t)); transform-origin:100% 50%; transform:rotateY(-90deg)}
.dr__leaf--r .dr__lip{left:0; transform-origin:0 50%; transform:rotateY(90deg)}

/* the intro, with motion allowed: shut, unlit, dark. .is-on (podcast.js, or the head script's
   timeout if the script never runs) lights ON AIR, then opens the doors and brings the room up */
html.dr-anim .dr:not(.is-on) .dr__leaf{transform:rotateY(0deg)}
html.dr-anim .dr:not(.is-on) .dr__haze,html.dr-anim .dr:not(.is-on) .dr__rfloor::after,html.dr-anim .dr:not(.is-on) .dr__jamb::after{opacity:.94}
html.dr-anim .dr:not(.is-on) .dr__deck i,html.dr-anim .dr:not(.is-on) .dr__glow,html.dr-anim .dr:not(.is-on) .dr__sign-f::before{opacity:0}
html.dr-anim .dr:not(.is-on) .dr__sign-f b{color:#5A3020; text-shadow:none}
html.dr-anim .dr:not(.is-on) .dr__clock-r i{background:#3A1D12; box-shadow:none}
html.dr-anim .dr .dr__leaf{transition:transform 1.6s cubic-bezier(.62,0,.22,1) 1s}
html.dr-anim .dr .dr__leaf--r{transition-delay:1.12s}
html.dr-anim .dr .dr__haze,html.dr-anim .dr .dr__rfloor::after,html.dr-anim .dr .dr__jamb::after{transition:opacity 1.3s ease 1.35s}
html.dr-anim .dr .dr__deck i{transition:opacity 1.2s ease 1.5s}
html.dr-anim .dr.is-on .dr__sign-f::before,html.dr-anim .dr.is-on .dr__glow{animation:dr-flick 1s linear both}
html.dr-anim .dr.is-on .dr__sign-f b{animation:dr-flick-t 1s linear both}
@keyframes dr-flick{0%{opacity:0}9%{opacity:1}13%{opacity:.1}21%{opacity:1}25%{opacity:.3}33%,100%{opacity:1}}
@keyframes dr-flick-t{0%{color:#5A3020; text-shadow:none}9%{color:#fff}13%{color:#7A4028}21%{color:#fff}25%{color:#8A4A30}33%,100%{color:#fff}}
/* after the intro: a set change dips the room's lights and brings them back up */
.dr.is-live .dr__haze,.dr.is-live .dr__rfloor::after,.dr.is-live .dr__jamb::after{transition:opacity .6s ease}
.dr.is-dim .dr__haze,.dr.is-dim .dr__rfloor::after,.dr.is-dim .dr__jamb::after{opacity:.9; transition-duration:.3s}
.dr.is-live .dr__clock-r i{animation:dr-rec 2s steps(1) infinite}
@keyframes dr-rec{0%,60%{opacity:1}61%,100%{opacity:.2}}

/* the set keys under the stage */
.dr-keys{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.6rem .7rem; margin-top:.25rem}
.dr-keys__l{font-family:var(--f-mono); font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.dr-key{display:inline-flex; align-items:center; gap:.55rem; min-height:44px; padding:.5rem .9rem; font-family:var(--f-head); font-weight:700; font-size:.9rem; color:var(--ink); cursor:pointer;
  background:var(--paper); border:1.5px solid var(--black); border-bottom-width:4px; border-radius:2px; transition:transform .08s, border-bottom-width .08s, background .2s}
.dr-key:hover{background:var(--paper-2)}
.dr-key i{flex:none; width:7px; height:7px; background:var(--led-off); transition:background .15s, box-shadow .15s}
.dr-key[aria-pressed="true"]{transform:translateY(2px); border-bottom-width:2px; margin-bottom:2px; background:var(--paper-2)}
.dr-key[aria-pressed="true"] i{background:var(--accent); box-shadow:var(--glow)}
.dr-key:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
.dr-keys__more{padding-block:.6rem; font-size:.9rem; color:var(--ink-2); text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:1.5px; text-underline-offset:.2em}
.dr-keys__more:hover{color:var(--ink)}

/* phones and tablets: the stage opens the page above the headline */
@media (max-width:980px){
  .dr{aspect-ratio:1/.66; margin-inline:calc(-1 * var(--pad-x) / 2); perspective:1200px}
  .dr__tilt{--W:62cqi}
}
@media (max-width:759px){
  .ps-head{padding-top:4.5rem}
  .dr{aspect-ratio:1/.72; perspective:900px}
  .dr__tilt{--W:78cqi}
  .dr__rig{top:42%}
  .dr-keys__more{display:none}
}

/* ---------- the crawl: what's in every session ---------- */
.crawl{position:relative; z-index:1; display:flex; align-items:stretch; background:#000; color:#fff; border-block:1px solid #000; overflow:hidden; font-family:var(--f-mono)}
.crawl__bug{flex:none; display:flex; align-items:center; gap:.6rem; margin:0; padding:.95rem clamp(1rem,2.5vw,1.6rem); background:var(--umd); color:#fff; border-right:1px solid #2A2627;
  font-family:var(--f-mono); font-size:.8125rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; position:relative; z-index:1}
.crawl__win{flex:1; min-width:0; display:flex; overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.crawl__track{display:flex; flex:none; align-items:center; margin:0; padding:0; list-style:none; animation:crawl 46s linear infinite}
.crawl:hover .crawl__track{animation-play-state:paused}
.crawl__track li{flex:none; display:flex; align-items:center; gap:.9rem; padding:1rem clamp(.9rem,1.8vw,1.4rem); font-size:.8125rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; color:var(--umd-ink)}
.crawl__track li::before{content:""; flex:none; width:6px; height:6px; background:var(--lcd); box-shadow:0 0 6px rgba(245,154,98,.6)}
@keyframes crawl{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){ .crawl__track{animation:none; flex-wrap:wrap} .crawl__track[aria-hidden]{display:none} }
@media (max-width:640px){ .crawl{flex-direction:column} .crawl__bug{border-right:0; border-bottom:1px solid #2A2627; padding-block:.7rem} }

/* ---------- shows recorded here ---------- */
.prev__kicker{display:flex; align-items:center; gap:.6rem; margin-bottom:.9rem; font-family:var(--f-mono); font-size:.6875rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3)}
.prev__kicker::before{content:""; flex:none; width:7px; height:7px; background:var(--accent); box-shadow:var(--glow)}
.ps-past{padding-bottom:0}
.ps-past .sec-head{margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.ps-strip{background:var(--paper); border:0; padding-block:0}
.ps-past-cue{padding:0 0 var(--sec-y)}
.ps-past-cue .cue{margin-top:clamp(1.5rem,3vw,2.25rem)}

/* ---------- cues: a CTA after every section ---------- */
.cue{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem 2rem; margin-top:clamp(2rem,4vw,3rem); padding-top:clamp(1.25rem,2.5vw,1.75rem); border-top:1.5px solid var(--black)}
.cue--dark{border-top-color:#2A2627}
.cue__t{font-family:var(--f-display); font-stretch:var(--display-width); font-weight:800; font-size:clamp(1.3rem,2.6vw,2rem); letter-spacing:-.025em; line-height:1.15}
.cue__t > span{color:var(--ink-3)}
.cue--dark .cue__t > span{color:var(--on-black-2)}
.cue .btn{white-space:nowrap}

/* ---------- expanders: the FAQ's LED and plus ---------- */
.xp > summary{display:flex; align-items:center; gap:.7rem; cursor:pointer; list-style:none}
.xp > summary::-webkit-details-marker{display:none}
.xp > summary::before{content:""; flex:none; width:7px; height:7px; background:#4A4748; transition:background .2s, box-shadow .2s}
.xp > summary::after{content:""; flex:none; width:12px; height:12px; margin-left:auto; transition:transform .3s var(--ease);
  background:linear-gradient(currentColor,currentColor) center/12px 2px no-repeat, linear-gradient(currentColor,currentColor) center/2px 12px no-repeat}
.xp[open] > summary::before{background:var(--accent); box-shadow:var(--glow)}
.xp[open] > summary::after{transform:rotate(45deg)}
.xp > summary:focus-visible{outline:2px solid #fff; outline-offset:3px}

/* ---------- the rate card: three packages, the detail folded away ---------- */
section.rates{margin:0; padding:var(--sec-y) 0; background:var(--paper-2); border-top:1px solid var(--line-2); list-style:none}
.rc{--rc-x:clamp(.9rem,2.4vw,1.75rem); --rc-gap:clamp(.8rem,2vw,1.75rem)}
.rc .mon__screen{aspect-ratio:auto; background:#0A0909; color:var(--umd-ink)}
.rc .mon__screen::after{background:linear-gradient(155deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,0) 30%)}
.rc :focus-visible{outline:2px solid #fff; outline-offset:3px}
.rc ::selection{background:#fff; color:var(--black)}
.rc__top{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .8rem; padding:.6rem var(--rc-x); background:var(--umd); border-bottom:1px solid #000;
  font-family:var(--f-mono); font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase}
.rc__top b{color:#fff; font-size:.95rem; letter-spacing:.1em}
.rc__gst{margin-left:auto; color:var(--lcd); text-shadow:0 0 6px rgba(245,154,98,.35)}
.rc__rows{list-style:none; margin:0; padding:0}
.rc__row{display:grid; grid-template-columns:minmax(0,1fr) 5.5rem minmax(7.5rem,auto) auto; grid-template-areas:"what wk rate go" "inc inc inc inc";
  align-items:center; column-gap:var(--rc-gap); padding:1.15rem var(--rc-x) .85rem; border-top:1px solid #1B1819; transition:background .2s}
.rc__row:first-child{border-top:0}
.rc__row:hover{background:#121011}
.rc__row--pick{background:#110F10; box-shadow:inset 3px 0 0 var(--accent)}
.rc__what{grid-area:what; min-width:0}
.rc__what h3{display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .9rem; font-family:var(--f-display); font-stretch:var(--display-width); font-weight:800; font-size:clamp(1.2rem,2vw,1.5rem); letter-spacing:-.02em; line-height:1.1; color:#fff}
.rc__tag{display:inline-flex; align-items:center; gap:.45rem; font-style:normal; font-family:var(--f-mono); font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--lcd)}
.rc__tag .tally{width:7px; height:7px}
.rc__what p{margin-top:.3rem; font-size:1rem; line-height:1.45; color:var(--on-black-2); text-wrap:pretty}
.rc__wk{grid-area:wk; font-family:var(--f-mono); font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--on-black-2); white-space:nowrap}
.rc__rate{grid-area:rate; display:flex; flex-direction:column; align-items:flex-end; gap:.3rem}
.rc__rate .lcd{min-height:0; padding:.5rem .75rem; font-size:1.2rem; letter-spacing:.05em}
.rc__rate small{font-family:var(--f-mono); font-size:.625rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#8A8485; white-space:nowrap}
.rc__rate small:empty{display:none}
.rc__go{grid-area:go}
.rc__inc{grid-area:inc; margin-top:.6rem}
.rc__inc > summary{padding:.35rem 0; font-family:var(--f-mono); font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--on-black-2); width:max-content}
.rc__inc > summary::after{margin-left:.2rem}
.rc__inc > summary:hover{color:#fff}
.rc__inc ul{list-style:none; margin:.35rem 0 .4rem; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); gap:.35rem 1.5rem}
.rc__inc li{position:relative; padding-left:1.1rem; font-size:.95rem; line-height:1.45; color:var(--umd-ink)}
.rc__inc li::before{content:""; position:absolute; left:0; top:.55em; width:6px; height:6px; background:var(--lcd); box-shadow:0 0 6px rgba(245,154,98,.5)}
.rc__inc li b{color:#fff; font-weight:600}
.rc__inc a{color:#fff; text-decoration:underline; text-decoration-color:var(--accent)}
.rc__every{padding:1.2rem var(--rc-x) 1rem; border-top:1px solid #000; background:#0E0C0D}
.rc__every > p{max-width:62ch; font-size:1rem; line-height:1.5; color:var(--on-black-2)}
.rc__every > p b{color:#fff; font-weight:600}
.rc__inc--kit{margin-top:.5rem}
.rc__inc--kit ul{grid-template-columns:minmax(0,1fr); max-width:62ch}
.rc__fold{border-top:1px solid #1B1819}
.rc__fold > summary{padding:1rem var(--rc-x); font-family:var(--f-head); font-weight:700; font-size:1.05rem; color:#fff}
.rc__fold > summary:hover{background:#121011}
.rc__fold > summary .lcd{min-height:0; padding:.35rem .6rem; font-size:.8rem; margin-left:auto}
.rc__fold > summary::after{margin-left:0}
.rc__list{list-style:none; margin:0; padding:0 var(--rc-x) .6rem}
.rc__list li{display:grid; grid-template-columns:minmax(0,14rem) minmax(0,1fr) auto; gap:.2rem 1.25rem; align-items:center; padding:.75rem 0; border-top:1px solid #1B1819}
.rc__list b{font-family:var(--f-head); font-weight:700; font-size:1rem; color:#fff}
.rc__list span:not(.lcd){font-size:.92rem; line-height:1.45; color:var(--on-black-2)}
.rc__list .lcd{min-height:0; padding:.35rem .6rem; font-size:.85rem; justify-self:end; white-space:nowrap}
.rc__foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem 1rem; padding:.7rem var(--rc-x); border-top:1px solid #000; background:#070606;
  font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase; color:var(--on-black-2)}
.rc__foot .lcd{min-height:0; padding:.35rem .6rem; font-size:.6875rem}
@media (max-width:760px){
  .rc__row{grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"what what" "wk rate" "go go" "inc inc"; row-gap:.7rem}
  .rc__go{justify-content:center}
  .rc__rate .lcd{font-size:1.1rem}
  .rc__list li{grid-template-columns:minmax(0,1fr) auto}
  .rc__list li span:not(.lcd){grid-column:1 / -1; grid-row:2}
  .rc__list li .lcd{grid-row:1; grid-column:2}
}

/* ---------- no-signal placeholder: a luminance ramp, labelled with who owes the photo ---------- */
.nosig{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.35rem; text-align:center;
  background:linear-gradient(90deg,#C9C6C5 0 14.28%,#AEAAA9 0 28.56%,#8F8B8A 0 42.84%,#716D6C 0 57.12%,#555151 0 71.4%,#3A3737 0 85.68%,#222020 0) top/100% 70% no-repeat,
             linear-gradient(90deg,#0E0D0D 0 33%,#1B1919 0 66%,#090808 0) bottom/100% 30% no-repeat;
  container-type:inline-size}
.nosig b,.nosig i{position:relative; z-index:1; font-style:normal; font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.14em; background:var(--umd); color:var(--umd-ink); padding:.3em .6em; border:1px solid #000}
.nosig b{font-size:clamp(10px,5cqi,15px); font-weight:700}
.nosig i{font-size:clamp(9px,3.6cqi,11px); font-weight:600; color:var(--lcd)}

/* ---------- THE DESK ---------- */
.desk{padding:var(--sec-y) 0; background:var(--desk); color:var(--on-black)}
.desk .sec-sub{color:var(--on-black-2)}
.desk ::selection{background:#fff; color:var(--black)}
.desk :focus-visible{outline:2px solid #fff; outline-offset:3px}
.desk__grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(290px,370px); gap:clamp(1rem,2vw,1.5rem); align-items:start}
.desk__modules{display:grid; gap:clamp(1rem,2vw,1.5rem); min-width:0}
.desk__pair{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(1rem,2vw,1.5rem)}

/* a module: a panel on the desk, header strip like a UMD */
.mod{min-width:0; margin:0; padding:0 clamp(.9rem,2vw,1.4rem) clamp(1rem,2vw,1.4rem); border:1px solid #000; border-radius:3px;
  background:linear-gradient(180deg,var(--mod),#1F1C1D); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 1px 0 rgba(255,255,255,.03)}
.mod__head{float:left; width:calc(100% + 2*clamp(.9rem,2vw,1.4rem)); display:flex; align-items:center; gap:.7rem;
  margin:0 calc(-1*clamp(.9rem,2vw,1.4rem)) clamp(1rem,2vw,1.3rem); padding:.55rem clamp(.9rem,2vw,1.4rem);
  background:var(--umd); border-bottom:1px solid #000; border-radius:3px 3px 0 0;
  font-family:var(--f-mono); font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--umd-ink)}
.mod__head + *{clear:both}
.mod__n{color:var(--lcd); font-variant-numeric:tabular-nums}
.mod__l{color:#fff}
.mod__r{margin-left:auto; color:var(--on-black-2); letter-spacing:.1em; text-align:right}
.mod__foot{clear:both; margin-top:1rem; font-size:.85rem; line-height:1.5; color:var(--on-black-2)}

/* hidden native inputs; the hardware is the label */
.desk input[type=radio],.desk input[type=checkbox],.tick input{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}

/* 01 package keys: the rate card's three rows, as keys */
.pkk{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem}
.pkk__key{position:relative; display:grid; grid-template-columns:8px minmax(0,1fr); grid-template-areas:"led t" ". p" ". em"; gap:.3rem .6rem; align-items:center; align-content:start;
  padding:.85rem .85rem .9rem; background:#2B2728; border:1px solid #000; border-bottom:4px solid #000; border-radius:2px; cursor:pointer; transition:transform .08s, border-bottom-width .08s, background .2s}
.pkk__key:hover{background:#322E2F}
.pkk__led{grid-area:led; width:7px; height:7px; background:#4A4546; transition:background .15s, box-shadow .15s}
.pkk__key b{grid-area:t; font-family:var(--f-head); font-weight:700; font-size:1rem; color:var(--on-black)}
.pkk__p{grid-area:p; font-family:var(--f-mono); font-size:.875rem; font-weight:600; color:var(--lcd); font-variant-numeric:tabular-nums}
.pkk__key em{grid-area:em; font-style:normal; font-family:var(--f-mono); font-size:.625rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--on-black-2)}
.pkk__key:has(input:checked){transform:translateY(2px); border-bottom-width:2px; margin-bottom:2px; background:#1A1718; box-shadow:inset 0 0 0 1px rgba(247,126,45,.35)}
.pkk__key:has(input:checked) .pkk__led{background:var(--accent); box-shadow:var(--glow)}
.pkk__key:has(input:focus-visible){outline:2px solid #fff; outline-offset:2px}

/* 02 vision switcher */
.sw__pgm{margin-bottom:.8rem}
.sw__pgm .mon__screen img{transition:none}
.sw__pgm .mon__screen.is-cut{animation:cut .18s steps(1)}
@keyframes cut{0%{filter:brightness(1.6)}}
.sw__desc{font-size:.95rem; line-height:1.5; color:var(--on-black-2); min-height:3em; margin-bottom:1rem; max-width:60ch}
.sw__desc b{color:var(--on-black); font-weight:600}
.sw__bus{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(.5rem,1.2vw,.9rem)}
.sw__src{display:block; cursor:pointer; border-radius:3px}
.sw__src .mon{display:block; padding:4px}
.sw__src .mon__screen{display:block}
.sw__src .mon__screen img{width:100%; height:100%; object-fit:cover}
.sw__src .umd{margin-top:4px; font-size:.625rem; letter-spacing:.12em; padding:.4rem .5rem}
.sw__src .nosig i{display:none}
.sw__src .nosig b{font-size:clamp(8px,7cqi,12px)}
.sw__src:hover .mon{box-shadow:0 0 0 1px var(--on-black-2)}
.sw__src:has(input:checked) .mon{box-shadow:0 0 0 2px var(--accent)}
.sw__src:has(input:checked) .tally{background:var(--accent); box-shadow:0 0 7px rgba(247,126,45,.85)}
.sw__src:has(input:focus-visible){outline:2px solid #fff; outline-offset:3px}
.sw__pgm .mon__screen > img:first-child{width:100%; height:100%; object-fit:cover}

/* 03 channel strips */
.chs{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.5rem}
.ch{display:grid; grid-template-rows:auto auto 1fr auto; grid-template-columns:1fr 1fr; grid-template-areas:"n n" "on on" "meter fader" "tape tape";
  gap:.6rem .35rem; justify-items:center; padding:.7rem .4rem .6rem; min-height:236px; background:var(--mod-2); border:1px solid #000; border-radius:2px; cursor:pointer}
.ch__n{grid-area:n; font-family:var(--f-mono); font-size:.6875rem; font-weight:600; letter-spacing:.1em; color:var(--on-black-2)}
.ch__on{grid-area:on; width:30px; height:22px; border-radius:2px; background:#2B2728; border:1px solid #000; border-bottom-width:3px; position:relative; transition:transform .08s, border-bottom-width .08s}
.ch__on::after{content:""; position:absolute; left:50%; top:50%; width:6px; height:6px; margin:-3px 0 0 -3px; background:#3F3A3B; transition:background .15s, box-shadow .15s}
.ch__meter{grid-area:meter; position:relative; width:8px; height:100%; min-height:110px; background:#0B0A0A; border:1px solid #000; overflow:hidden}
.ch__meter i{position:absolute; left:0; right:0; bottom:0; height:0;
  background:linear-gradient(0deg,#D9D5D3 0 78%,var(--accent) 78%) bottom/100% 110px;
  -webkit-mask:repeating-linear-gradient(0deg,#000 0 7px,transparent 7px 9px); mask:repeating-linear-gradient(0deg,#000 0 7px,transparent 7px 9px)}
.ch__fader{grid-area:fader; position:relative; width:6px; height:100%; min-height:110px; background:#0B0A0A; border-radius:3px; box-shadow:inset 0 1px 2px #000}
.ch__fader i{position:absolute; left:50%; bottom:4%; width:28px; height:14px; margin-left:-14px; border-radius:2px;
  background:linear-gradient(180deg,#8E898A,#4A4748 45%,#6F6C6D 55%,#3A3637); border:1px solid #000; transition:bottom .35s var(--ease)}
.ch__fader i::after{content:""; position:absolute; left:3px; right:3px; top:50%; height:1px; background:#fff}
.ch__tape{grid-area:tape; width:100%; padding:.3rem .2rem; background:var(--tape); color:var(--black); text-align:center; border-radius:1px;
  font-family:var(--f-mono); font-size:.6875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; transform:rotate(-.6deg)}
.ch.is-on .ch__on{transform:translateY(2px); border-bottom-width:1px}
.ch.is-on .ch__on::after{background:#fff; box-shadow:0 0 6px rgba(255,255,255,.7)}
.ch--x.is-on .ch__on::after{background:var(--accent); box-shadow:0 0 7px rgba(247,126,45,.85)}
.ch.is-on .ch__fader i{bottom:62%}
.ch.is-on .ch__meter i{height:55%}
.ch.is-on .ch__n{color:#fff}
.ch:has(input:focus-visible){outline:2px solid #fff; outline-offset:2px}
@media (prefers-reduced-motion:no-preference){
  .ch.is-on .ch__meter i{animation:vu 1.1s steps(6) infinite alternate}
  .ch.is-on:nth-child(2) .ch__meter i{animation-duration:.8s; animation-delay:-.3s}
  .ch.is-on:nth-child(3) .ch__meter i{animation-duration:1.35s; animation-delay:-.6s}
  .ch.is-on:nth-child(4) .ch__meter i{animation-duration:.95s; animation-delay:-.2s}
}
@keyframes vu{0%{height:22%} 30%{height:64%} 55%{height:40%} 80%{height:81%} 100%{height:48%}}

/* 04 studio clock */
.clk{display:grid; justify-items:center; gap:1rem}
.clk__face{width:min(100%,220px); height:auto; display:block}
.clk__face circle{transition:fill .25s}
.clk__big{font-family:var(--f-mono); font-size:19px; font-weight:700; fill:var(--lcd); letter-spacing:.04em; font-variant-numeric:tabular-nums}
.clk__sub{font-family:var(--f-mono); font-size:5.4px; font-weight:600; fill:var(--on-black-2); letter-spacing:.14em}
.clk.is-over .clk__big{fill:var(--accent)}
.clk__keys{display:flex; align-items:center; gap:.6rem}
.clk__keys .lcd--n{min-width:4.2ch; min-height:44px}
.key{min-width:52px; min-height:44px; padding:.5rem .7rem; font-family:var(--f-mono); font-weight:700; font-size:.95rem; color:var(--on-black); cursor:pointer;
  background:#2B2728; border:1px solid #000; border-bottom:4px solid #000; border-radius:2px; transition:transform .08s, border-bottom-width .08s}
.key:hover{background:#343031}
.key:active{transform:translateY(2px); border-bottom-width:2px}
.key:disabled{opacity:.4; cursor:default}

/* 05 aux keys */
.aux{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr)); gap:.6rem}
.aux__key{position:relative; display:grid; grid-template-columns:8px minmax(0,1fr) auto; grid-template-areas:"led t p" ". d d"; gap:.35rem .6rem; align-items:center;
  padding:.8rem .85rem .85rem; background:#2B2728; border:1px solid #000; border-bottom:4px solid #000; border-radius:2px; cursor:pointer;
  transition:transform .08s, border-bottom-width .08s, background .2s}
.aux__key:hover{background:#322E2F}
.aux__led{grid-area:led; width:7px; height:7px; background:#4A4546; transition:background .15s, box-shadow .15s}
.aux__t{grid-area:t; font-family:var(--f-head); font-weight:700; font-size:.95rem; color:var(--on-black)}
.aux__p{grid-area:p; font-family:var(--f-mono); font-size:.8125rem; font-weight:600; color:var(--lcd); white-space:nowrap}
.aux__p--free{color:var(--on-black-2)}
.aux__d{grid-area:d; font-size:.82rem; line-height:1.45; color:var(--on-black-2)}
.aux__key:has(input:checked){transform:translateY(2px); border-bottom-width:2px; margin-bottom:2px; background:#1A1718; box-shadow:inset 0 0 0 1px rgba(247,126,45,.35)}
.aux__key:has(input:checked) .aux__led{background:var(--accent); box-shadow:var(--glow)}
.aux__key:has(input:focus-visible){outline:2px solid #fff; outline-offset:2px}
.aux__key:has(input:disabled){opacity:.42; cursor:not-allowed}

/* 06 the running total */
.meter{position:sticky; top:5.5rem}
.meter__in{padding:clamp(5px,.6vw,9px); background:var(--bezel); border-radius:3px; box-shadow:0 0 0 1px #000}
.meter__head{display:flex; align-items:center; gap:.55rem; padding:.45rem .6rem; background:var(--umd); border:1px solid #000;
  font-family:var(--f-mono); font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--umd-ink)}
.meter__draft{margin-left:auto; color:var(--black); background:var(--lcd); padding:.1rem .4rem; letter-spacing:.12em}
.meter__total{display:flex; flex-direction:column; align-items:flex-end; gap:.1rem; margin-top:5px; padding:1rem .9rem .8rem; background:var(--lcd-bg); border:1px solid #000;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.9)}
.meter__big{font-family:var(--f-mono); font-weight:700; font-size:clamp(2rem,3.2vw,2.6rem); line-height:1; color:var(--lcd); letter-spacing:.02em; font-variant-numeric:tabular-nums;
  text-shadow:0 0 10px rgba(245,154,98,.45)}
.meter__gst{font-family:var(--f-mono); font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--on-black-2)}
.edl{list-style:none; margin:5px 0 0; padding:.3rem 0; background:#0A0909; border:1px solid #000; font-family:var(--f-mono); font-size:.75rem; line-height:1.4; color:var(--umd-ink); font-variant-numeric:tabular-nums}
.edl li{display:grid; grid-template-columns:2.6ch 3.6ch minmax(0,1fr) auto; gap:.6rem; padding:.42rem .7rem; border-top:1px solid #1A1718}
.edl li:first-child{border-top:0}
.edl .e-n{color:#6F6C6D}
.edl .e-s{color:var(--lcd)}
.edl .e-d{min-width:0; overflow-wrap:anywhere}
.edl .e-a{text-align:right; white-space:nowrap}
.edl li.is-new{animation:edl .6s ease-out}
@keyframes edl{0%{background:rgba(247,126,45,.18)}}
.meter__sum{margin:5px 0 0; padding:.5rem .7rem; background:#0A0909; border:1px solid #000; font-family:var(--f-mono); font-size:.75rem; color:var(--on-black-2)}
.meter__sum div{display:flex; justify-content:space-between; padding:.15rem 0}
.meter__sum dd{margin:0; color:var(--umd-ink); font-variant-numeric:tabular-nums}
.meter__note{margin:.7rem .3rem .2rem; font-size:.8rem; line-height:1.45; color:var(--on-black-2)}
.meter__go{margin:.6rem .3rem .3rem; width:calc(100% - .6rem); justify-content:center}
.desk .meter .btn--accent{--skirt:#8E898A; color:var(--black); background:#fff; border-color:#fff}

@media (max-width:1060px){
  .desk__grid{grid-template-columns:1fr}
  .meter{position:static}
}
@media (max-width:640px){
  .desk__pair{grid-template-columns:1fr}
  .pkk{grid-template-columns:1fr}
  .pkk__key{grid-template-columns:8px minmax(0,1fr) auto; grid-template-areas:"led t p" ". em em"}
  .pkk__key em:empty{display:none}
  .sw__bus .umd__l{letter-spacing:.06em}
  .sw__bus .umd__the,.sw__src .nosig b{display:none}
  .ch{min-height:200px}
}

/* ---------- BOOK ---------- */
.board{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,122px),1fr)); gap:.6rem}
.day{display:flex; flex-direction:column; gap:4px; padding:4px; background:var(--bezel); border-radius:3px; box-shadow:0 0 0 1px #000}
.day__h{display:flex; justify-content:space-between; align-items:baseline; gap:.4rem; padding:.4rem .5rem; background:var(--umd); color:var(--umd-ink);
  font-family:var(--f-mono); font-size:.6875rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase}
.day__h b{color:var(--lcd); font-weight:700}
.slot{display:flex; align-items:center; gap:.5rem; min-height:44px; padding:.55rem .6rem; background:#1F1C1D; color:var(--on-black); border:1px solid #000; border-bottom:3px solid #000; border-radius:1px; cursor:pointer;
  font-family:var(--f-mono); font-size:.75rem; font-weight:600; letter-spacing:.06em; text-align:left; transition:background .15s}
.slot::before{content:""; flex:none; width:7px; height:7px; background:#4A4546}
.slot:hover:not([aria-disabled=true]){background:#2B2728}
.slot[aria-pressed=true]{background:#2B2728; transform:translateY(2px); border-bottom-width:1px}
.slot[aria-pressed=true]::before{background:var(--accent); box-shadow:var(--glow)}
.slot[aria-disabled=true]{cursor:not-allowed; color:#6F6C6D; background:#141213}
.slot.is-taken{text-decoration:line-through; text-decoration-color:#6F6C6D}
.slot:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.day--off .day__h b{color:#6F6C6D}
.board__note{margin-top:.9rem; font-size:.85rem; color:var(--ink-3)}

.book__grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem); margin-top:clamp(2.5rem,5vw,4rem)}
.book__h{font-family:var(--f-display); font-stretch:var(--display-width); font-weight:800; font-size:clamp(1.25rem,2vw,1.5rem); letter-spacing:-.025em}
.book__rules .steps{margin-top:1.2rem}
.book__rules .step{grid-template-columns:auto minmax(0,1fr)}
.book__rules .step__d{grid-column:2}
.draft-i{font-style:normal; font-family:var(--f-mono); font-size:.6875rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); border:1px solid var(--line-2); padding:.05rem .35rem; margin-left:.3rem; white-space:nowrap}
.tick{display:inline-flex; align-items:center; gap:.8rem; margin-top:1.4rem; min-height:48px; padding:.7rem 1.1rem .7rem .95rem; cursor:pointer;
  font-family:var(--f-head); font-weight:700; font-size:.95rem; border:1.5px solid var(--black); border-bottom-width:4px; border-radius:2px; background:var(--paper); transition:transform .08s}
.tick__led{width:9px; height:9px; background:var(--led-off); transition:background .15s, box-shadow .15s}
.tick:has(input:checked){transform:translateY(2px); border-bottom-width:2px; background:var(--paper-2)}
.tick:has(input:checked) .tick__led{background:var(--accent); box-shadow:var(--glow)}
.tick:has(input:focus-visible){outline:2px solid var(--ink); outline-offset:3px}

.fields{display:grid; grid-template-columns:1fr 1fr; gap:.9rem; margin-top:1.2rem}
.fields .wide{grid-column:1 / -1}
.fields label{display:block; margin-bottom:.4rem; font-family:var(--f-head); font-weight:600; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2)}
.fields .opt{text-transform:none; letter-spacing:0; color:var(--ink-3); font-weight:500}
.fields input,.fields select{width:100%; min-height:48px; padding:.7rem .85rem; font:inherit; font-size:1rem; color:var(--ink); background:var(--paper);
  border:1.5px solid var(--black); border-bottom-width:3px; border-radius:2px; outline:none; appearance:none; -webkit-appearance:none}
.fields select{padding-right:2.4rem; background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23231F20' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right .9rem center/10px 6px}
.fields input:focus,.fields select:focus{border-color:var(--black); box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--accent)}
@media (max-width:760px){ .book__grid,.fields{grid-template-columns:1fr} }

.pay{display:flex; align-items:stretch; gap:1rem; margin-top:1.6rem; flex-wrap:wrap}
.pay__side{display:flex; flex-direction:column; justify-content:center; gap:.6rem}
.pay__side .intake__state{align-self:flex-start}
.onair{display:flex; align-items:center; justify-content:center; min-width:150px; padding:.9rem 1.2rem; background:#0B0A0A; border:1px solid #000; border-radius:3px;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.9), 0 0 0 4px var(--bezel)}
.onair span{font-family:var(--f-display); font-stretch:var(--display-width); font-weight:900; font-size:1.35rem; letter-spacing:.06em; text-transform:uppercase; color:#3a1d12; transition:color .3s, text-shadow .3s}
.onair.is-live span{color:var(--accent); text-shadow:0 0 14px rgba(247,126,45,.8), 0 0 2px rgba(247,126,45,.9)}
@media (prefers-reduced-motion:no-preference){ .onair.is-live span{animation:onair 2.4s ease-in-out infinite} }
@keyframes onair{50%{text-shadow:0 0 22px rgba(247,126,45,.95), 0 0 3px rgba(247,126,45,1)}}
.pay__err{margin-top:.8rem; font-size:.92rem; color:var(--ink); min-height:1.4em}
.pay__err:not(:empty)::before{content:""; display:inline-block; width:8px; height:8px; margin-right:.55rem; background:var(--accent); box-shadow:var(--glow)}
.booked{margin-top:1rem}
.booked .umd{margin-top:0}
.booked .umd__l{white-space:normal}
.booked__t{margin-top:.8rem; font-size:.92rem; line-height:1.55; color:var(--ink-2); max-width:60ch}

/* ---------- the building ---------- */
#building .svc__lead{max-width:56ch}

/* ---------- the sticky bar: the price, then the running total ---------- */
.wsbar{position:fixed; left:0; right:0; bottom:0; z-index:var(--z-mcta); display:flex; justify-content:center; align-items:center; gap:1rem; padding:.7rem var(--pad-x) calc(.7rem + env(safe-area-inset-bottom));
  background:var(--black); color:#fff; border-top:1px solid #000; transform:translateY(110%); transition:transform .4s var(--ease)}
.wsbar.show{transform:none}
@media (prefers-reduced-motion:reduce){ .wsbar{transition:none} }
.wsbar__t{display:flex; align-items:center; gap:.6rem; min-width:0; font-size:1rem; color:var(--on-black-2)}
.wsbar__t b{color:#fff; font-family:var(--f-head); font-weight:700; white-space:nowrap}
.wsbar .btn{--skirt:#8E898A; color:var(--black); background:#fff; border-color:#fff; --led:var(--accent)}
.wsbar .btn:hover{background:var(--paper-2); border-color:var(--paper-2)}
@media (max-width:760px){ .wsbar{justify-content:space-between} .wsbar__t{flex-direction:column; align-items:flex-start; gap:0; line-height:1.3; font-size:.9rem} .wsbar__t .tally{display:none} .wsbar .btn{padding-inline:.9rem} .wsbar__s{font-size:.8rem} }

/* ---------- depth: the page is one camera move through the studio ----------
   Below the doors, every piece of hardware is first seen at an angle, and the camera swings round
   to face it as it scrolls in (podcast.js, a scrub, no pin). The angles they rest at live here, so
   no-JS and reduced motion get the same still frame. The hardware has thickness too: a chassis edge
   under each bezel, and keys with real travel. Only leaves carry shadows; the one 3D group (the
   monitor wall's .wrap) carries no opacity, filter or overflow, or Chrome flattens it. */
.ps{--chassis:0 0 0 1px #000, inset 0 1px 0 rgba(255,255,255,.06), 0 3px 0 #0B0A0A, 0 6px 0 #050404, 0 34px 44px -22px rgba(35,31,32,.6)}

/* the monitor wall: a curved bank, the outer screens turned in and brought forward */
.ps-strip{perspective:1600px; perspective-origin:50% 30%}
.ps-strip .wrap{transform-style:preserve-3d; grid-template-columns:repeat(3,minmax(0,1fr))}
.ps-strip figure{transform:var(--bank,none); box-shadow:var(--chassis)}
.ps-strip figure:nth-child(3n+1){--bank:translateZ(50px) rotateY(14deg)}
.ps-strip figure:nth-child(3n){--bank:translateZ(50px) rotateY(-14deg)}
@media (max-width:760px){
  .ps-strip{perspective:900px}
  .ps-strip .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ps-strip figure:nth-child(odd){--bank:translateZ(16px) rotateY(9deg)}
  .ps-strip figure:nth-child(even){--bank:translateZ(16px) rotateY(-9deg)}
}

/* rack units with a body: the rate card, the desk's modules, the meter, the board's days */
.ps .rc,.ps .meter__in,.ps .pvw__mon .mon{box-shadow:var(--chassis)}
.desk .mod{box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 3px 0 #0E0C0D, 0 6px 0 #080707, 0 26px 30px -18px rgba(0,0,0,.85)}
.ps .day{box-shadow:0 0 0 1px #000, 0 3px 0 #0B0A0A, 0 18px 22px -14px rgba(35,31,32,.55)}

/* the closer's monitor hangs on an arm, turned towards the copy */
.ps .pvw__mon .mon{transform:perspective(1400px) rotateY(14deg) rotateX(3deg); transform-origin:50% 50%}

/* keys with travel: a deeper skirt, and a press that takes it all */
.pkk__key,.aux__key,.key,.dr-key,.tick{border-bottom-width:6px; box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.pkk__key:has(input:checked),.aux__key:has(input:checked),.dr-key[aria-pressed="true"],.tick:has(input:checked){transform:translateY(4px); border-bottom-width:2px; margin-bottom:4px}
.key:active{transform:translateY(4px); border-bottom-width:2px}
.slot{border-bottom-width:5px}
.slot[aria-pressed=true]{transform:translateY(4px); border-bottom-width:1px}
.ps .btn--big{border-bottom-width:6px}
.ps .btn--big:active{transform:translateY(4px); border-bottom-width:2px; margin-bottom:4px}

/* the K Dolls frames have no case study to link to, so they carry the VL bug on the figure instead */
.ps-strip figure{position:relative}
.ps-strip figure:not(:has(a))::before{content:""; position:absolute; z-index:2; top:calc(clamp(5px,.6vw,8px) + 4.5%); right:calc(clamp(5px,.6vw,8px) + 4%); width:clamp(12px,6%,20px); aspect-ratio:1;
  background:#fff; opacity:.72; -webkit-mask:var(--mark) center/contain no-repeat; mask:var(--mark) center/contain no-repeat; pointer-events:none}

/* the request desk: a notes field, the line under the pay key, no "booked" strike-through (nothing is booked yet) */
.fields textarea{width:100%; min-height:5.2rem; padding:.7rem .85rem; font:inherit; font-size:1rem; color:var(--ink); background:var(--paper); border:1px solid var(--line-2); border-radius:0; resize:vertical}
.fields textarea:focus{border-color:var(--black); box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--accent); outline:0}
.pay__note{margin-top:.8rem; font-size:.85rem; color:var(--ink-3)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}


/* ---------- talkback: first-timer worries, logged like the intercom between floor and gallery.
   Each line's talk key lights as it scrolls in (podcast.js adds .is-on); no JS or reduced motion: all lit */
.tb{padding-bottom:var(--sec-y)}
.tb__log{list-style:none; margin:0; padding:0; border-top:1.5px solid var(--black); font-size:1rem}
.tb__row{display:grid; grid-template-columns:5.5rem minmax(0,1fr) minmax(0,1.25fr); gap:.5rem clamp(1rem,3vw,2.5rem); align-items:baseline; padding:clamp(1.1rem,2.2vw,1.6rem) 0; border-bottom:1px solid var(--line-2)}
.tb__tc{font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.08em; color:var(--muted); font-variant-numeric:tabular-nums}
.tb__in{font-family:var(--f-display); font-stretch:var(--display-width); font-weight:800; font-size:clamp(1.15rem,1.9vw,1.5rem); letter-spacing:-.02em; line-height:1.2; color:var(--ink); text-wrap:balance}
.tb__out{line-height:1.55; color:var(--ink-2); max-width:52ch; text-wrap:pretty}
.tb__who{display:flex; align-items:center; gap:.5rem; margin-bottom:.45rem; font-family:var(--f-mono); font-size:.625rem; font-weight:600; font-stretch:normal; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3)}
.tb__key{flex:none; width:14px; height:9px; border-radius:1px; background:var(--accent); box-shadow:var(--glow); transition:background .25s, box-shadow .25s}
.tb--armed .tb__row:not(.is-on) .tb__key{background:var(--led-off); box-shadow:inset 0 -1px 0 rgba(0,0,0,.18)}
.tb__out .tb__who::before{content:""; width:14px; height:1.5px; background:var(--ink-3)}
@media (prefers-reduced-motion:reduce){ .tb__key{transition:none} }
@media (max-width:760px){
  .tb__row{grid-template-columns:1fr; gap:.2rem}
  .tb__tc{order:-1}
  .tb__out{margin-top:.6rem; padding-left:1rem; border-left:1.5px solid var(--line-2)}
}

/* ---------- spare room or Studio 205: preview against programme, with a Take key between ---------- */
.vs{padding-bottom:var(--sec-y)}
.vs__bus{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:clamp(.75rem,2vw,1.5rem); align-items:stretch}
.vs__mon{display:flex; flex-direction:column}
.vs__mon .mon__screen{flex:1}
.vs__take{align-self:center}
.vs__mon .mon__screen{aspect-ratio:auto; min-height:100%; padding:clamp(1.1rem,2.5vw,1.9rem) clamp(1rem,2.4vw,1.8rem)}
.vs__mon--pvw .mon__screen{background:#0E0D0D; color:#8B8687}
.vs__mon--pvw .mon__screen::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px)}
.vs__mon--pgm .mon__screen{background:#0A0909; color:var(--umd-ink)}
.vs__mon--pgm{box-shadow:0 0 0 1px #000, 0 0 0 3px var(--accent)}
.vs__list{position:relative; z-index:1; list-style:none; margin:0; padding:0; display:grid; gap:1.05rem}
.vs__list li{display:grid; gap:.2rem; padding-left:1rem; border-left:2px solid #2A2627}
.vs__mon--pgm .vs__list li{border-left-color:var(--accent)}
.vs__list b{font-family:var(--f-mono); font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase}
.vs__mon--pvw .vs__list b{color:#B5B0B1; text-decoration:line-through; text-decoration-color:rgba(247,126,45,.7); text-decoration-thickness:1.5px}
.vs__mon--pgm .vs__list b{color:#fff}
.vs__list span{font-size:.95rem; line-height:1.45}
.vs__take{display:grid; place-items:center; width:clamp(4.25rem,7vw,5.5rem); aspect-ratio:1; border-radius:3px; background:#1A1718; border:1px solid #000; text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 5px 0 #000, 0 7px 14px rgba(0,0,0,.25); transition:transform .12s, box-shadow .12s}
.vs__take-k{font-family:var(--f-mono); font-size:.75rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#fff; padding:.35rem .5rem; border-radius:1px; background:#3a1d12; transition:background .2s, box-shadow .2s}
.vs__take:hover .vs__take-k,.vs__take:focus-visible .vs__take-k{background:var(--accent); box-shadow:var(--glow); color:var(--black)}
.vs__take:active{transform:translateY(4px); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 1px 0 #000, 0 2px 6px rgba(0,0,0,.25)}
.vs__take:focus-visible{outline:2px solid var(--black); outline-offset:3px}
@media (max-width:860px){
  .vs__bus{grid-template-columns:1fr; gap:1.25rem}
  .vs__take{justify-self:center; width:auto; aspect-ratio:auto; padding:.7rem 1.4rem}
}
@media (prefers-reduced-motion:reduce){ .vs__take,.vs__take-k{transition:none} }

/* ---------- the one-line ask at the foot of the FAQ ---------- */
.tb-ask .cue__t{max-width:46ch}
.tb-ask .cue__t > span{display:block; margin-top:.35rem; font-family:var(--f-body); font-stretch:normal; font-weight:450; font-size:1rem; letter-spacing:0; line-height:1.5}


/* ---------- readout: the studio's numbers on a rack panel, ears and screws included ---------- */
.ro-sec{padding:clamp(2rem,4vw,3rem) 0 0}
.ro{position:relative; padding:clamp(.6rem,1.2vw,.9rem) clamp(1.6rem,3vw,2.4rem); background:linear-gradient(#1D1A1B,#141213); border:1px solid #000; border-radius:3px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 10px 24px rgba(0,0,0,.18)}
.ro__ear{position:absolute; top:0; bottom:0; width:clamp(1rem,2vw,1.5rem); display:flex; flex-direction:column; justify-content:space-between; padding:.7rem 0; align-items:center}
.ro__ear--l{left:0} .ro__ear--r{right:0}
.ro__ear::before,.ro__ear::after{content:""; width:7px; height:7px; border-radius:50%; background:radial-gradient(circle at 35% 35%,#6F6C6D,#2A2627 70%); box-shadow:0 1px 0 rgba(255,255,255,.06)}
.ro__grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin:0; background:#000; border:1px solid #000}
.ro__cell{display:flex; flex-direction:column-reverse; justify-content:flex-end; gap:.55rem; padding:clamp(1rem,2vw,1.5rem) clamp(.9rem,1.8vw,1.4rem); background:#0E0D0C}
.ro__cell dt{font-family:var(--f-mono); font-size:.6875rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; line-height:1.5; color:var(--on-black-2); max-width:28ch}
.ro__cell dd{margin:0; display:flex; align-items:baseline; gap:.1em; font-family:var(--f-mono); font-weight:700; color:var(--lcd); text-shadow:0 0 10px rgba(245,154,98,.45); font-variant-numeric:tabular-nums; line-height:1}
.ro__n{font-size:clamp(2.2rem,4.4vw,3.6rem); letter-spacing:-.02em}
.ro__u{font-size:clamp(1.4rem,2.6vw,2.1rem)}
.ro__w{font-size:clamp(1.25rem,2.3vw,1.85rem); letter-spacing:.04em; text-transform:uppercase}
@media (max-width:760px){ .ro__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:420px){ .ro{padding-inline:1.15rem} .ro__cell{padding-inline:.75rem} .ro__cell dt{font-size:.625rem; letter-spacing:.08em} }

/* ---------- location: a call sheet laid on the black section, the way a crew gets sent to a location ---------- */
.loc .sec-head{margin-bottom:clamp(2rem,4vw,3rem)}
.loc .sec-sub{max-width:52ch; line-height:1.6}
.cs{background:var(--paper); color:var(--ink); border-radius:1px; box-shadow:0 18px 40px rgba(0,0,0,.45); font-size:.95rem}
.cs__top{display:grid; grid-template-columns:auto repeat(3,minmax(0,1fr)); border-bottom:2px solid var(--black); font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase}
.cs__top > span{display:flex; flex-direction:column; gap:.25rem; padding:.75rem clamp(.8rem,1.6vw,1.2rem); border-left:1px solid var(--line-2); font-weight:600; color:var(--ink)}
.cs__top b{font-weight:600; font-size:.625rem; color:var(--ink-3)}
.cs__top .cs__doc{flex-direction:row; align-items:center; gap:.55rem; border-left:0; background:var(--black); color:#fff; font-weight:700; letter-spacing:.16em}
.cs__top .cs__doc::before{content:""; width:7px; height:7px; background:var(--accent); box-shadow:var(--glow)}
.cs__rows{margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr))}
.cs__rows > div{display:grid; grid-template-columns:8.5rem minmax(0,1fr); gap:.4rem 1rem; padding:.95rem clamp(.8rem,1.6vw,1.2rem); border-bottom:1px solid var(--line-2)}
.cs__rows > div:nth-child(odd){border-right:1px solid var(--line-2)}
.cs__rows > div:nth-last-child(-n+2){border-bottom:0}
.cs__rows dt{font-family:var(--f-mono); font-size:.6875rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); padding-top:.2rem}
.cs__rows dd{margin:0; line-height:1.5; color:var(--ink-2)}
.loc .cue{margin-top:clamp(2rem,4vw,3rem)}
@media (max-width:860px){
  .cs__rows{grid-template-columns:1fr}
  .cs__rows > div:nth-child(odd){border-right:0}
  .cs__rows > div:nth-last-child(2){border-bottom:1px solid var(--line-2)}
}
@media (max-width:560px){
  .cs__top{grid-template-columns:1fr 1fr}
  .cs__top .cs__doc{grid-column:1 / -1}
  .cs__top > span:nth-child(2){border-left:0}
  .cs__top > span:nth-child(4){grid-column:1 / -1; border-left:0; border-top:1px solid var(--line-2)}
  .cs__rows > div{grid-template-columns:1fr; gap:.25rem}
}