:root{
  --cream:#F6EAD4; --cream-2:#EFDDBE; --paper:#FBF4E6;
  --pink:#EE97A8; --pink-2:#E07A92; --hot:#D9466F; --rose:#B23A5B;
  --orange:#E8622A; --mustard:#EFAE2F; --teal:#2A8A87; --brown:#5B3624;
  --ink:#2B1A17; --muted:#6E5149;
  --screen-green:#9CFF9C;
  --font-display:'Syne', 'Archivo', sans-serif; --font-logo:'Bagel Fat One', 'Archivo Black', sans-serif;
  --font-body:'Archivo', 'Helvetica Neue', sans-serif;
  --font-crt:'VT323', ui-monospace, monospace;
  --text-xs:clamp(.75rem,.72rem + .15vw,.8125rem);
  --text-sm:clamp(.875rem,.85rem + .15vw,.9375rem);
  --text-base:clamp(1rem,.97rem + .15vw,1.0625rem);
  --text-lg:clamp(1.125rem,1rem + .5vw,1.375rem);
  --text-xl:clamp(1.5rem,1.2rem + 1.2vw,2.25rem);
  --text-2xl:clamp(2rem,1.4rem + 2.6vw,3.5rem);
  --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{font-family:var(--font-body);font-size:var(--text-base);line-height:1.55;color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
:focus-visible{outline:3px solid var(--hot);outline-offset:3px;border-radius:6px}
ul{list-style:none}

/* top bar */
.topbar{position:fixed;inset:0 0 auto 0;z-index:40;display:flex;align-items:center;gap:24px;padding:12px clamp(16px,3vw,36px);
  background:color-mix(in srgb,var(--cream) 82%,transparent);backdrop-filter:blur(10px);border-bottom:2px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.logo{display:flex;color:var(--ink)}
.nav{display:flex;gap:clamp(12px,2.2vw,28px);margin-left:auto}
.nav a{text-decoration:none;font-weight:700;font-size:var(--text-sm);letter-spacing:.06em;text-transform:uppercase;padding:6px 2px;border-bottom:3px solid transparent;transition:border-color .2s,color .2s}
.nav a:hover{border-color:var(--hot);color:var(--rose)}
.sound{font-weight:700;font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;border:2px solid var(--ink);border-radius:999px;padding:7px 14px;transition:background .2s,color .2s}
.sound[aria-pressed="true"]{background:var(--ink);color:var(--cream)}

/* room */
.room{position:relative;padding-top:64px;background:#E9B9B6;overflow:hidden}
.stage{position:relative;width:100%;aspect-ratio:1672/941;max-height:calc(100svh - 150px);margin:0 auto;
  max-width:calc((100svh - 150px) * 1.7768)}
.room-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage-bg{position:relative;background:linear-gradient(#D99BAA 0 14.6%,#D2B293 14.6% 71.2%,#D07F91 71.2% 75%,#C97482 75%)}
.room-photo{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}

.wall{position:absolute;inset:0;transform:translate3d(var(--wx,0),var(--wy,0),0) scale(1.035);will-change:transform}
.print{position:absolute;margin:0;transform:perspective(700px) rotate(var(--r,0deg)) rotateX(var(--px,0deg)) rotateY(var(--py,0deg)) translateZ(var(--pz,0px));
  box-shadow:var(--psh,0 6px 14px rgba(70,20,20,.22)),0 1px 2px rgba(0,0,0,.2);transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s;will-change:transform;cursor:default}
.print.hot{transition:transform .08s linear,box-shadow .2s}
.print img{width:100%;height:auto}
.print::before{content:"";position:absolute;z-index:2;left:50%;top:-7%;width:42%;height:12%;transform:translateX(-50%) rotate(-3deg);background:rgba(255,248,225,.72);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.print .glare{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.55),transparent 55%);mix-blend-mode:soft-light;opacity:0;transition:opacity .3s}
.print.hot .glare{opacity:1}
.p1{left:4%;top:19%;width:5.4%}
.p2{left:11%;top:16%;width:8%}
.p3{left:22%;top:20%;width:5.2%}
.p4{left:12.5%;top:40%;width:5%}
.onair{left:73%;top:17%;width:6.6%;filter:brightness(.62) saturate(.6);transition:filter .5s,transform .5s cubic-bezier(.2,.8,.2,1)}
.onair::before{display:none}
.onair.live{filter:brightness(1.12) saturate(1.2) drop-shadow(0 0 14px rgba(255,120,60,.85))}
.p6{left:82%;top:15%;width:6.6%}
.p7{left:91%;top:21%;width:5%}
.p8{left:75%;top:38.5%;width:5.4%}

/* the TV in 3D */
.tv-shadow{position:absolute;left:31%;top:81%;width:38%;height:12%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(90,20,35,.42),rgba(90,20,35,.18) 60%,transparent);filter:blur(6px);
  transform:translate3d(var(--sx,0),0,0) scaleX(var(--ss,1));will-change:transform}
.tv-pos{position:absolute;left:29.78%;top:1.81%;width:40.37%;height:89.16%;perspective:1500px;perspective-origin:50% 45%}
.tv3d{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:50% 62%;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(var(--tz,0px));will-change:transform}
.tv-depth{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.tv-depth img{position:absolute;inset:0;width:100%;height:100%}
.tv-face{position:absolute;inset:0;width:100%;height:100%;transform:translateZ(0);user-select:none;-webkit-user-drag:none;pointer-events:none}
.tv-glare{position:absolute;inset:0;pointer-events:none;transform:translateZ(3px);
  -webkit-mask:url(img/tv.webp) center/100% 100% no-repeat;mask:url(img/tv.webp) center/100% 100% no-repeat;
  background:radial-gradient(circle at var(--gx,40%) var(--gy,30%),rgba(255,255,255,.5),rgba(255,255,255,0) 42%);mix-blend-mode:soft-light}

/* screen */
.screen{position:absolute;left:20.47%;top:26.4%;width:56.6%;height:33.8%;border-radius:11% / 14%;overflow:hidden;background:#151a16;cursor:pointer;
  box-shadow:inset 0 0 30px rgba(0,0,0,.85);transform:translateZ(1px)}

/* channel cards */
.card{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:9% 10%;color:#fff;font-family:var(--font-crt)}
.card .bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(1.15) contrast(1.05)}
.card .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(0,0,0,.78))}
.card .t{position:relative;font-size:clamp(14px,2.1vw,34px);line-height:.95;text-transform:uppercase;text-shadow:2px 2px 0 rgba(0,0,0,.6)}
.card .m{position:relative;font-size:clamp(10px,1.15vw,19px);opacity:.9;margin-top:.35em;text-transform:uppercase}
.card .pl{position:relative;display:inline-block;margin-top:.5em;font-size:clamp(10px,1.1vw,18px);background:var(--screen-green);color:#062;padding:0 .4em;align-self:flex-start;animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}
.card.id{justify-content:center;align-items:center;text-align:center;background:var(--cream);color:var(--ink);padding:6%}
.card.id .bands{position:absolute;inset:auto 0 0 0;height:30%;display:flex;flex-direction:column}
.card.id .bands i{flex:1}
.card.id .bands i:nth-child(1){background:var(--mustard)}.card.id .bands i:nth-child(2){background:var(--orange)}.card.id .bands i:nth-child(3){background:var(--hot)}.card.id .bands i:nth-child(4){background:var(--teal)}
.card.id .big{font-family:var(--font-display);font-size:clamp(22px,3.6vw,60px);line-height:1;color:var(--rose);position:relative;top:-12%}
.card.id .sub{font-family:var(--font-crt);font-size:clamp(11px,1.3vw,22px);text-transform:uppercase;position:relative;top:-12%;letter-spacing:.04em}
.card.bars{background:linear-gradient(90deg,#c0c0c0 0 14.28%,#c0c000 0 28.57%,#00c0c0 0 42.85%,#00c000 0 57.14%,#c000c0 0 71.42%,#c00000 0 85.71%,#0000c0 0);justify-content:center;align-items:center;text-align:center}
.card.bars .box{background:#111;padding:.5em 1em;border:2px solid #fff}
.card.bars .t{font-size:clamp(13px,1.8vw,30px)}
.card.credits{background:#0b0b0b;justify-content:flex-start;align-items:center;text-align:center;padding:0}
.roll{position:absolute;left:0;right:0;top:100%;animation:roll 34s linear infinite;font-size:clamp(10px,1.2vw,20px);line-height:1.35;text-transform:uppercase}
.roll h4{color:var(--mustard);font-weight:400;margin-top:1.2em}
@keyframes roll{to{transform:translateY(calc(-100% - 40vh))}}

/* knobs */
.knob{position:absolute;width:9.4%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) translateZ(4px);transition:box-shadow .2s}
.knob span{position:absolute;left:50%;top:50%;transform:translate(-120%,-50%);right:auto;white-space:nowrap;font-size:var(--text-xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--ink);color:var(--cream);padding:3px 8px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .2s, transform .2s}
.knob:hover,.knob:focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.75),0 0 18px rgba(255,255,255,.6)}
.knob:hover span,.knob:focus-visible span{opacity:1;transform:translate(-135%,-50%)}
.k4 span{transform:translate(30%,-50%)}
.k4:hover span,.k4:focus-visible span{transform:translate(45%,-50%)}
.k1{left:10.07%;top:29.05%}.k2{left:10.07%;top:40.93%}.k3{left:10.07%;top:50.35%}.k4{left:87.97%;top:31.06%;width:10.9%}
.knob.turn{animation:turn .35s}
@keyframes turn{50%{transform:translate(-50%,-50%) translateZ(4px) rotate(40deg)}}

/* remote strip */
.remote{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 16px 6px}
.chstrip{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:4px}
.chstrip::-webkit-scrollbar{display:none}
.ch{flex:0 0 auto;min-width:42px;height:38px;border-radius:10px;background:var(--cream);border:2px solid var(--ink);font-family:var(--font-crt);font-size:22px;line-height:1;box-shadow:0 3px 0 var(--ink);transition:transform .1s, background .2s}
.ch:hover{background:#fff}
.ch:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.ch[aria-current="true"]{background:var(--ink);color:var(--screen-green)}
.ch.dead{color:var(--muted);border-style:dashed}
.rbtn{width:38px;height:38px;border-radius:50%;background:var(--hot);color:#fff;border:2px solid var(--ink);box-shadow:0 3px 0 var(--ink);flex:0 0 auto}
.hint{position:relative;z-index:2;text-align:center;font-size:var(--text-xs);color:var(--ink);opacity:.75;padding:0 16px 20px}
.kbd{font-family:var(--font-crt);font-size:1.15em;border:1.5px solid currentColor;border-radius:4px;padding:0 4px}

/* rainbow divider */
.rainbow{display:flex;flex-direction:column;height:40px}
.rainbow i{flex:1}
.rainbow i:nth-child(1){background:var(--mustard)}.rainbow i:nth-child(2){background:var(--orange)}.rainbow i:nth-child(3){background:var(--hot)}.rainbow i:nth-child(4){background:var(--pink)}.rainbow i:nth-child(5){background:var(--teal)}
.rainbow.thin{height:20px}

/* sections */
.section{padding:clamp(56px,8vw,112px) 0}
.wrap{width:min(1180px,100% - 2*clamp(18px,4vw,48px));margin:0 auto}
.sec-head{margin-bottom:clamp(28px,4vw,48px);max-width:46ch}
.eyebrow{font-weight:800;font-size:var(--text-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--rose);margin-bottom:10px}
.eyebrow.light{color:var(--mustard)}
h2{font-family:var(--font-display);font-weight:400;font-size:var(--text-2xl);line-height:1.02;letter-spacing:-.005em;color:var(--ink)}
h3{font-weight:800;font-size:var(--text-sm);letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}

/* tape shelf */
.tapes{background:var(--paper)}
.shelf{margin-bottom:40px}
.shelf-label{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.shelf-label b{font-family:var(--font-display);font-weight:400;font-size:var(--text-xl);color:var(--rose)}
.shelf-label span{font-size:var(--text-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.rack{display:flex;flex-direction:column;gap:6px;padding:14px 14px 18px;background:linear-gradient(#7a4a30,#5B3624);border-radius:10px;box-shadow:inset 0 -6px 0 rgba(0,0,0,.25),0 10px 24px rgba(91,54,36,.25)}
.tape{position:relative;display:flex;align-items:center;height:58px;border-radius:5px;background:#1d1a19;color:#fff;overflow:hidden;text-align:left;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s;box-shadow:0 2px 0 rgba(0,0,0,.4)}
.tape:hover,.tape:focus-visible{transform:translateX(18px)}
.tape .ch-no{flex:0 0 64px;height:100%;display:grid;place-items:center;font-family:var(--font-crt);font-size:26px;color:var(--screen-green);border-right:2px solid rgba(255,255,255,.08)}
.tape .label{flex:1;min-width:0;margin:9px 12px;padding:4px 12px;background:var(--paper);color:var(--ink);border-radius:3px;display:flex;align-items:baseline;gap:12px;overflow:hidden}
.tape .label strong{font-weight:800;font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tape .label em{font-style:normal;font-size:var(--text-xs);color:var(--muted);white-space:nowrap}
.tape .stripe{flex:0 0 clamp(90px,16%,190px);height:100%;background:linear-gradient(115deg,transparent 0 18%,var(--mustard) 18% 34%,var(--orange) 34% 50%,var(--hot) 50% 66%,var(--teal) 66% 82%,transparent 82%)}
.tape.v2 .stripe{background:linear-gradient(90deg,#d23 0 20%,#f60 20% 40%,#fc0 40% 60%,#3a5 60% 80%,#38c 80%)}
.tape.v3{background:#efe6d4;color:var(--ink)}
.tape.v3 .ch-no{color:var(--rose);border-color:rgba(0,0,0,.1)}
.tape.v3 .label{background:#fff}
.tape.dead{opacity:.6}
.tape.dead .label em::after{content:" · tape missing";color:var(--hot);font-weight:700}

/* guide */
.guide{background:var(--cream)}
.guide-head{display:flex;align-items:center;gap:22px;max-width:none}
.tvguide-mast{display:flex;flex-direction:column;align-items:center;justify-content:center;width:96px;height:96px;flex:0 0 auto;background:var(--hot);color:#fff;border-radius:10px;transform:rotate(-4deg);box-shadow:4px 4px 0 var(--ink)}
.tvguide-mast span{font-family:var(--font-display);font-size:34px;line-height:.9}
.tvguide-mast b{font-weight:800;font-size:14px;letter-spacing:.25em}
.listings{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.listing{display:grid;grid-template-columns:120px 1fr;gap:14px;background:var(--paper);border:2px solid var(--ink);border-radius:var(--radius);padding:12px;box-shadow:4px 4px 0 var(--ink);text-align:left;transition:transform .2s, box-shadow .2s}
.listing:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--hot)}
.listing .th{aspect-ratio:4/3;border-radius:8px;background:#222 center/cover;position:relative;overflow:hidden}
.listing .th b{position:absolute;left:6px;top:4px;font-family:var(--font-crt);font-weight:400;font-size:20px;color:var(--screen-green);text-shadow:0 0 4px #000}
.listing .th.bars{background:linear-gradient(90deg,#c0c0c0 0 14.28%,#c0c000 0 28.57%,#00c0c0 0 42.85%,#00c000 0 57.14%,#c000c0 0 71.42%,#c00000 0 85.71%,#0000c0 0)}
.listing h4{font-weight:800;font-size:var(--text-base);line-height:1.2;margin-bottom:4px}
.listing .kind{font-size:var(--text-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rose);margin-bottom:6px}
.listing p{font-size:var(--text-xs);color:var(--muted);line-height:1.45}

/* awards */
.awards{background:var(--ink);color:var(--cream)}
.awards h2{color:var(--cream)}
.awards-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:clamp(32px,5vw,72px)}
.lede{margin:18px 0 24px;color:color-mix(in srgb,var(--cream) 78%,transparent);max-width:40ch}
.pill{border:2px solid var(--mustard);color:var(--mustard);border-radius:999px;padding:10px 18px;font-weight:700;font-size:var(--text-sm);transition:background .2s,color .2s}
.pill:hover{background:var(--mustard);color:var(--ink)}
.award-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.award h3{color:var(--pink);margin-top:4px}
.award ul{margin-bottom:22px}
.award li{font-size:var(--text-sm);padding:6px 0;border-bottom:1px solid rgba(246,234,212,.14)}
.tight li{padding:4px 0}

/* about */
.about{background:var(--paper)}
.about-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(32px,5vw,72px);align-items:start}
.box{position:relative;background:#F1ECE2;border-radius:6px;padding:28px 28px 26px;box-shadow:0 18px 36px rgba(43,26,23,.18);overflow:hidden;border:1px solid rgba(0,0,0,.08)}
.box-stripes{display:flex;flex-direction:column;height:118px;margin:-28px -28px 26px}
.box-stripes i{flex:1}
.box-stripes i:nth-child(1){background:var(--hot)}.box-stripes i:nth-child(2){background:var(--orange)}.box-stripes i:nth-child(3){background:var(--mustard)}.box-stripes i:nth-child(4){background:#7FB069}.box-stripes i:nth-child(5){background:#3E7CB1}
.box-brand{font-family:var(--font-display);font-size:var(--text-2xl);line-height:1}
.box-model{font-weight:800;margin-top:10px;font-size:var(--text-base)}
.box-small{font-size:var(--text-xs);color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-top:4px}
.contact{display:flex;flex-direction:column;gap:6px;margin:24px 0}
.contact a{font-weight:700;font-size:var(--text-lg);text-decoration:none;border-bottom:2px solid var(--hot);align-self:flex-start}
.contact a:hover{color:var(--rose)}
.clocks{display:flex;gap:28px;border-top:2px dashed rgba(0,0,0,.18);padding-top:16px}
.clocks div{display:flex;flex-direction:column}
.clk{font-family:var(--font-crt);font-size:40px;line-height:1;color:var(--rose)}
.clocks small{font-size:var(--text-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 36px}
.cv li{font-size:var(--text-sm);padding:5px 0;border-bottom:1px solid rgba(43,26,23,.12)}
.cv h3{color:var(--rose)}

.foot{background:var(--cream)}
.foot p{text-align:center;padding:20px;font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* big screen */
.bigscreen{position:fixed;inset:0;z-index:60;background:rgba(20,10,10,.86);display:grid;place-items:center;padding:20px}
.bigscreen[hidden]{display:none}
.big-inner{position:relative;width:min(1100px,100%)}
.big-frame{aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden}
.big-frame iframe{width:100%;height:100%;border:0}
.big-close{position:absolute;right:-6px;top:-48px;width:40px;height:40px;border-radius:50%;background:var(--cream);font-size:26px;line-height:1}
.big-title{color:var(--cream);margin-top:12px;font-family:var(--font-crt);font-size:24px;text-transform:uppercase}
.bigbtn{position:absolute;z-index:6;right:7%;bottom:8%;font-family:var(--font-crt);font-size:clamp(10px,1vw,16px);background:rgba(0,0,0,.6);color:#fff;border:1px solid rgba(255,255,255,.5);padding:1px 6px;border-radius:3px}

/* responsive */
@media (max-width: 900px){
  .awards-grid,.about-grid{grid-template-columns:1fr}
  .award-cols{grid-template-columns:1fr 1fr}
}
@media (max-width: 700px){
  .nav{display:none}
  .sound{margin-left:auto}
  .room{padding-top:64px}
  .stage{width:235vw;max-width:none;max-height:none;margin-left:calc(50% - 117.5vw)}
  .room-photo{-webkit-mask-image:none;mask-image:none}
  .knob span{display:none}
  .award-cols,.cv{grid-template-columns:1fr}
  .listing{grid-template-columns:96px 1fr}
  .tape .stripe{flex-basis:56px}
  .tape .label em{display:none}
  .tape:hover{transform:translateX(8px)}
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ===== true 3D set ===== */
.stage{touch-action:pan-y}
.gl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.stage.grab{cursor:grab}.stage.grabbing{cursor:grabbing}.stage.point{cursor:pointer}
.player3d{position:absolute;z-index:4;border-radius:9% / 12%;overflow:hidden;background:#000;box-shadow:0 0 0 2px rgba(0,0,0,.6)}
.player3d[hidden]{display:none}
.player-frame,.player-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.p3-btn{position:absolute;z-index:2;bottom:6%;font-family:var(--font-crt);font-size:clamp(11px,1vw,16px);background:rgba(0,0,0,.65);color:#fff;border:1px solid rgba(255,255,255,.5);padding:1px 7px;border-radius:3px}
.p3-big{right:7%}.p3-stop{left:7%}
.tip{position:absolute;z-index:6;pointer-events:none;transform:translate(14px,-130%);font-size:var(--text-xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--ink);color:var(--cream);padding:4px 9px;border-radius:6px;white-space:nowrap}
.tip[hidden]{display:none}
.loading{position:absolute;inset:0;z-index:5;display:grid;place-items:center;pointer-events:none;transition:opacity .6s}
.loading span{font-family:var(--font-crt);font-size:24px;background:var(--ink);color:var(--screen-green);padding:4px 12px;border-radius:6px}
.loading.done{opacity:0}
.sr-controls{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.sr-controls:focus-within{position:absolute;left:12px;bottom:12px;width:auto;height:auto;clip:auto;z-index:7;display:flex;gap:6px}
.sr-controls button{background:var(--cream);border:2px solid var(--ink);border-radius:8px;padding:4px 10px;font-size:var(--text-xs);font-weight:700}

.h-touch{display:none}
@media (hover:none){.h-mouse{display:none}.h-touch{display:inline}}

/* ===== White draft ===== */
:root{--cream:#ffffff;--paper:#ffffff;--cream-2:#f4f4f4}
body,.room,.stage-bg,.tapes,.guide,.about,.foot{background:#fff}
.topbar{background:rgba(255,255,255,.88)}
.room-photo{display:none}
.awards{background:#fff;color:var(--ink)}
.awards .pill{border-color:var(--rose);color:var(--rose)}
.awards .pill:hover{background:var(--rose);color:#fff}
.box{background:#fff}
.awards h2{color:var(--ink)}
.awards .lede{color:var(--muted)}
.awards .eyebrow,.awards [class*="eyebrow"]{color:var(--rose)}
.award h3{color:var(--rose)}
.award li{border-bottom-color:rgba(43,26,23,.1)}

/* ===== KDL '70s stripe identity ===== */
h2,.shelf-label b,.box-brand,.tvguide-mast span,.card.id .big{font-weight:800;letter-spacing:-.02em}
.kdl-mark{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}
.kdl-mark b{font-family:var(--font-logo);font-weight:400;font-size:30px;line-height:1;letter-spacing:-.02em}
.kdl-stripes{display:flex;flex-direction:column;width:38px}
.kdl-stripes i{display:block;height:4px}
.kdl-stripes i:nth-child(1){background:var(--mustard)}.kdl-stripes i:nth-child(2){background:var(--orange)}.kdl-stripes i:nth-child(3){background:var(--hot)}.kdl-stripes i:nth-child(4){background:var(--teal)}
.logo{text-decoration:none}
.box-brand{font-family:var(--font-logo);font-weight:400;letter-spacing:-.01em}
h2{font-size:clamp(1.9rem,1.3rem + 2.2vw,3.1rem);line-height:1.02;letter-spacing:-.035em;max-width:none}
.shelf-label b{letter-spacing:-.03em}
.kdl-mark b{font-size:34px}
.kdl-stripes{width:44px}.kdl-stripes i{height:4.5px}

/* stacked lockup: stripes under the letters */
.kdl-mark{flex-direction:column;align-items:stretch;gap:3px}
.kdl-mark b{font-size:30px;line-height:.9}
.kdl-stripes{width:auto}
.kdl-stripes i{height:3px}


/* photo look */
.ph{position:absolute;inset:0;perspective:1600px;perspective-origin:50% 45%;pointer-events:none;--ry:0deg;--rx:0deg;--sx:50%;--shx:0px;--bob:0px}
.ph-tv,.ph-shadow{position:absolute;left:50%;top:2%;height:96%;aspect-ratio:1229/1280;transform:translateX(-50%)}
.ph-shadow{transform:translateX(calc(-50% + var(--shx)));opacity:.9}
.ph-tv{transform-style:preserve-3d;transform:translateX(-50%) translateY(var(--bob)) rotateX(var(--rx)) rotateY(var(--ry));transform-origin:50% 72%;will-change:transform}
.ph-body{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none}
.ph-screen,.ph-glass{position:absolute;display:block;-webkit-mask:url(img/photo/screen-mask.png?v=1) 0 0/100% 100%;mask:url(img/photo/screen-mask.png?v=1) 0 0/100% 100% luminance}
.ph-screen{object-fit:cover;filter:saturate(1.05) contrast(1.04) blur(.25px)}
.ph-glass{mix-blend-mode:screen;opacity:.5;pointer-events:none}
.ph-sheen{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;opacity:.45;
  background:linear-gradient(105deg,transparent calc(var(--sx) - 30%),rgba(255,255,255,.55) var(--sx),transparent calc(var(--sx) + 30%));
  -webkit-mask:url(img/photo/tv.png?v=1) 0 0/100% 100%;mask:url(img/photo/tv.png?v=1) 0 0/100% 100%}
.topbtn{flex:0 0 auto;height:38px;padding:0 14px;border-radius:19px;background:var(--cream);border:2px solid var(--ink);box-shadow:0 3px 0 var(--ink);font-family:var(--font-crt);font-size:20px;line-height:1;color:var(--ink);white-space:nowrap}
.topbtn[aria-pressed="true"]{background:var(--ink);color:var(--screen-green)}
.topbtn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
@media (max-width:700px){.remote{flex-wrap:wrap}.chstrip{flex:1 1 0;min-width:0}.remote::after{content:"";flex-basis:100%;order:4;height:0}.topbtn{order:5;margin:2px auto 0}}

/* ===== VHS piles ===== */
.sec-sub{margin-top:10px;color:var(--muted);font-size:var(--text-sm)}
.stacks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px);align-items:end;padding-top:24px}
.stack .shelf-label{margin-bottom:22px}
.pile{position:relative;--W:360px;--D:calc(var(--W) * .578);--rx:-6deg;--ry:0deg;--hx:0;perspective:1400px;perspective-origin:50% 20%;padding:calc(var(--W) * .05) 0 calc(var(--W) * .08);
  display:flex;flex-direction:column;transform-style:preserve-3d}
.pile > .vhs{transform:rotateX(var(--rx)) rotateY(var(--ry)) translateX(var(--dx)) rotateZ(var(--rz));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.vhs{position:relative;display:block;width:100%;aspect-ratio:1200/199;margin-top:-1px;padding:0;border:0;background:none;transform-style:preserve-3d;cursor:pointer;z-index:1}
.vhs:hover,.vhs:focus-visible{z-index:5}
.vb{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.vhs:hover .vb,.vhs:focus-visible .vb{transform:translateZ(calc(var(--W) * .42)) translateX(calc(var(--W) * .05 + var(--hx) * var(--W) * .03)) translateY(-30%) rotateX(-46deg) rotateY(calc(var(--hx) * 10deg))}
.vhs:active .vb{transform:translateZ(calc(var(--W) * .46)) translateY(-34%) rotateX(-50deg) scale(.98)}
.vhs:focus-visible{outline:none}.vhs:focus-visible .spine{outline:3px solid var(--hot);outline-offset:3px}
.f{position:absolute;display:block}
.spine{inset:0;background:url(img/vhs/spine.webp) 0 0/100% 100%;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.top{left:0;bottom:100%;width:100%;height:var(--D);background:#121111 url(img/vhs/face.webp) 0 0/100% 100%;transform-origin:50% 100%;transform:rotateX(90deg);border-radius:6px}
.bot{left:0;top:100%;width:100%;height:var(--D);background:#141313;transform-origin:50% 0;transform:rotateX(-90deg)}
.endl,.endr{top:0;height:100%;width:var(--D);background:linear-gradient(90deg,#0d0c0c,#232121)}
.endl{left:0;transform-origin:0 50%;transform:rotateY(90deg)}
.endr{right:0;transform-origin:100% 50%;transform:rotateY(-90deg)}
/* the paper label on the spine */
.lab{position:absolute;left:17.6%;width:76%;top:10%;height:80%;display:flex;align-items:center;gap:3%;padding:0 2.5%;overflow:hidden;container-type:size}
.lab .band{flex:0 0 auto;height:100%;width:9%}
.band.none{display:none}
.band.rainbow{background:linear-gradient(90deg,#e8382f 0 20%,#f28a1e 20% 40%,#f6c818 40% 60%,#3da35a 60% 80%,#2c76c4 80%)}
.band.yellow{background:#f3c21c;width:14%}
.band.red{background:#d8322b;width:5%}
.lab .ttl{flex:0 1 auto;min-width:0;font-family:var(--hand),cursive;font-weight:400;font-size:64cqh;line-height:1;color:var(--ink);white-space:nowrap;letter-spacing:.01em;transform:rotate(-1deg);mix-blend-mode:multiply;opacity:.92}
.lab small{margin-left:auto;flex:0 0 auto;font-family:'Permanent Marker',cursive;font-size:42cqh;color:var(--ink);opacity:.75;mix-blend-mode:multiply}
.lab em{flex:0 0 auto;font-family:'Permanent Marker',cursive;font-style:normal;font-size:34cqh;color:#c0262d;transform:rotate(-6deg)}
.vhs.dead .ttl{position:relative;opacity:.55}
.vhs.dead .ttl::after{content:"";position:absolute;left:-4%;right:-4%;top:52%;height:12cqh;background:#c0262d;border-radius:4px;transform:rotate(-2deg);opacity:.85}
.vhs.dead{cursor:not-allowed}
/* the label on the cassette face (seen when a tape slides out) */
.flab{position:absolute;left:25.8%;width:48.8%;top:6%;height:45%;padding:4% 5%;display:flex;flex-direction:column;justify-content:center;gap:6%;container-type:size;overflow:hidden}
.flab b{font-family:var(--hand),cursive;font-weight:400;font-size:27cqh;line-height:1.05;color:var(--ink);mix-blend-mode:multiply}
.flab small{font-family:"Permanent Marker",cursive;font-size:12cqh;color:#4a4444;mix-blend-mode:multiply}
.pile-shadow{position:absolute;left:4%;right:4%;bottom:calc(var(--W) * .04);height:calc(var(--W) * .08);background:radial-gradient(closest-side,rgba(30,20,20,.32),transparent);z-index:0;pointer-events:none}
@media (max-width:900px){.stacks{grid-template-columns:minmax(0,440px);justify-content:center;gap:48px}}
@media (prefers-reduced-motion:reduce){.vb,.pile > .vhs{transition:none}}
.stack .shelf-label{flex-direction:column;align-items:flex-start;gap:4px}
.stack .shelf-label b{font-size:clamp(26px,2.4vw,34px);line-height:1;white-space:nowrap}
.pile{pointer-events:none}.pile > .vhs{pointer-events:auto}
.vhs::before{content:"";position:absolute;inset:-3px 0;z-index:-1}

/* ===== refined 70s serif name ===== */
.box-brand{font-family:'Fraunces',Georgia,serif;font-weight:600;font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 1;font-size:clamp(2.4rem,1.6rem + 2.6vw,3.6rem);letter-spacing:-.012em;word-spacing:.06em;line-height:.95}
.box-model{font-family:'Fraunces',Georgia,serif;font-weight:400;font-style:italic;font-variation-settings:"opsz" 36,"SOFT" 50;font-size:var(--text-lg);margin-top:12px;letter-spacing:0}

/* ===== "Pick a channel" cue: floats above the strip, takes no layout space ===== */
.remote-cue{position:absolute;left:50%;bottom:calc(100% + 2px);transform:translateX(-50%);z-index:3;margin:0;pointer-events:none;
  display:flex;align-items:baseline;justify-content:center;gap:14px;white-space:nowrap;font-family:var(--font-crt);font-size:22px;line-height:1;color:var(--ink)}
.cue-pick{text-transform:uppercase;letter-spacing:.06em;color:var(--rose);background:rgba(255,255,255,.85);padding:2px 8px;border-radius:4px}
.cue-pick i{display:inline-block;font-style:normal;animation:cueBob 1.6s ease-in-out infinite}
@keyframes cueBob{50%{transform:translateY(4px)}}
.cue-now{min-width:16ch;padding:3px 10px;border-radius:4px;background:var(--ink);color:var(--screen-green);font-size:20px}
.cue-now em{font-style:normal;opacity:.7}.cue-now b{font-weight:400}.cue-now small{font-size:1em;color:#e8836a}
.cue-now.hov{color:#fff}
@media (max-width:700px){.remote-cue{font-size:17px;gap:8px}.cue-now{font-size:15px;min-width:0}}
@media (prefers-reduced-motion:reduce){.cue-pick i{animation:none}}