/* ============================================================
   STATIC CHAPEL — THE TAPE
   a haunted VHS you operate with a remote.
   dead-channel black / phosphor white / vhs blue / blood red / timestamp amber
   ============================================================ */

:root{
  --black:  #0b0d0c;
  --white:  #e8f0ea;
  --blue:   #2a3cff;
  --red:    #c1272d;
  --amber:  #f2b632;
  --osd:    'Share Tech Mono', monospace;
  --disp:   'Bebas Neue', sans-serif;
  --hand:   'Permanent Marker', cursive;
  --remote-w: 108px;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html,body{ height:100%; }

body{
  background:#000;
  color:var(--white);
  font-family:var(--osd);
  overflow:hidden;
}

a{ color:inherit; }

::selection{ background:var(--red); color:var(--white); }

/* ============ THE TV ============ */

#tv{
  position:fixed; inset:0;
  padding:10px;
  background:#000 url("img/tv-cabinet-woodgrain.webp") center / cover; /* the set's cabinet, seen at the rim */
}

#screen{
  position:relative;
  height:100%;
  background:
    radial-gradient(ellipse 120% 90% at 50% 40%, #131715 0%, var(--black) 55%, #060707 100%);
  border-radius:38px / 30px;
  overflow:hidden;
  box-shadow:
    inset 0 0 4px rgba(232,240,234,.12),
    0 0 0 6px #0a0a0a,
    0 0 60px rgba(42,60,255,.06);
}

/* phosphor curvature vignette */
.vignette{
  position:absolute; inset:0; z-index:40; pointer-events:none;
  border-radius:inherit;
  box-shadow:
    inset 0 0 140px rgba(0,0,0,.92),
    inset 0 0 40px rgba(0,0,0,.55);
  background:radial-gradient(ellipse 145% 120% at 50% 50%, transparent 62%, rgba(0,0,0,.75) 100%);
}

/* scanlines + slow phosphor flicker */
.scanlines{
  position:absolute; inset:0; z-index:39; pointer-events:none;
  background:
    repeating-linear-gradient(0deg,
      rgba(0,0,0,.28) 0px, rgba(0,0,0,.28) 1px,
      transparent 1px, transparent 3px),
    repeating-linear-gradient(90deg,
      rgba(42,60,255,.02) 0 2px, rgba(193,39,45,.02) 2px 4px);
  animation:phosphor 7s infinite steps(1);
}
@keyframes phosphor{
  0%,100%{ opacity:1; } 92%{ opacity:1; }
  93%{ opacity:.72; } 94%{ opacity:1; } 96%{ opacity:.85; } 97%{ opacity:1; }
}

/* chromatic fringe */
.chroma{
  text-shadow:
    -2px 0 rgba(42,60,255,.8),
     2px 0 rgba(193,39,45,.75),
     0 0 14px rgba(232,240,234,.18);
}

/* ============ OSD CHROME ============ */

.osd{ position:absolute; inset:0; z-index:45; pointer-events:none; }

.osd-item{
  position:absolute;
  font-family:var(--osd);
  font-size:clamp(13px,1.5vw,18px);
  letter-spacing:.14em;
  color:var(--white);
}

.osd-play{ top:22px; left:30px; animation:osdblink 4s steps(1) infinite; }
@keyframes osdblink{ 0%,100%{opacity:1} 48%{opacity:1} 50%{opacity:.55} 52%{opacity:1} }

.osd-topright{
  top:22px; right:calc(var(--remote-w) + 34px);
  display:flex; flex-direction:column; align-items:flex-end; gap:4px;
}

.osd-eject{
  pointer-events:auto;
  color:var(--white); text-decoration:none;
  border-bottom:1px dotted rgba(232,240,234,.4);
  padding-bottom:1px;
}
.osd-eject:hover,.osd-eject:focus-visible{ color:var(--amber); border-color:var(--amber); }

.osd-rec{ color:var(--white); }
.rec-dot{ color:var(--red); animation:recblink 1.1s steps(1) infinite; }
@keyframes recblink{ 0%,100%{opacity:1} 50%{opacity:.1} }

.osd-tc{ color:var(--amber); font-size:clamp(14px,1.7vw,20px); letter-spacing:.2em; }

.osd-sp{
  bottom:52px; left:30px; color:rgba(232,240,234,.75);
  background:rgba(6,8,7,.72); padding:2px 8px;
}

.osd-chwrap{
  bottom:52px; right:calc(var(--remote-w) + 34px);
  display:flex; gap:12px; align-items:baseline;
  background:rgba(6,8,7,.72); padding:2px 8px;
}
.osd-chnum{ color:var(--amber); letter-spacing:.2em; }
.osd-chname{ color:rgba(232,240,234,.65); font-size:.8em; letter-spacing:.3em; }

.osd-footer{
  pointer-events:auto;
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  width:max-content; max-width:86%;
  text-align:center;
  font-size:clamp(9px,1.05vw,12px);
  letter-spacing:.22em;
  color:rgba(242,182,50,.85);
  text-decoration:none;
  border-bottom:1px dotted rgba(242,182,50,.35);
  background:rgba(6,8,7,.72);
  padding:2px 10px 2px;
}
.osd-footer:hover,.osd-footer:focus-visible{ color:var(--amber); border-color:var(--amber); text-shadow:0 0 10px rgba(242,182,50,.5); }

/* ============ CHANNELS (no scroll between — zap only) ============ */

.channel{
  position:absolute; inset:0; z-index:10;
  overflow-y:auto; overflow-x:hidden;
  padding:84px calc(var(--remote-w) + 40px) 96px 40px;
  scrollbar-width:thin; scrollbar-color:rgba(232,240,234,.25) transparent;
}
.channel[hidden]{ display:none; }

.ch-inner{ max-width:1060px; margin:0 auto; }

.ch-title{
  font-family:var(--disp);
  font-size:clamp(34px,5vw,64px);
  letter-spacing:.06em;
  color:var(--white);
  line-height:.95;
}

.ch-sub{
  margin-top:10px;
  font-size:clamp(11px,1.2vw,14px);
  letter-spacing:.18em;
  color:rgba(232,240,234,.6);
}

.ch-kicker{
  font-size:clamp(10px,1.2vw,14px);
  letter-spacing:.3em;
  color:rgba(232,240,234,.7);
  text-align:center;
}

/* ============ CH01 · NOISE ============ */

.ch01{ display:flex; }
.ch01 .ch01-inner{ margin:auto; } /* safe centering: never clips when content overflows */

.ch01-bg{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:url('img/ksm-greylab-red-crowd.webp') center 30% / cover no-repeat;
  opacity:.22;
  filter:saturate(1.3) contrast(1.15) brightness(.75);
  mask-image:radial-gradient(ellipse 100% 90% at 50% 45%, #000 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 100% 90% at 50% 45%, #000 30%, transparent 78%);
}
/* keep bg inside the channel, not the page */
.ch01{ position:absolute; }
.ch01 .ch01-bg{ position:absolute; }

.ch01-inner{ width:100%; max-width:1080px; margin:0 auto; }

.bandname{
  display:block;
  width:min(96%,900px);
  margin:6px auto 0;
  transform:skewX(-3.5deg) rotate(-.6deg);
  overflow:visible;
}
.bn{
  font-family:var(--disp);
  font-size:128px;
  letter-spacing:8px;
  fill:var(--white);
}
.bn-blue{ fill:none; stroke:var(--blue); stroke-width:2.2; transform:translate(-6px,-3px); opacity:.85; }
.bn-red { fill:none; stroke:var(--red);  stroke-width:2.2; transform:translate(6px,4px);  opacity:.85; }
.bn-main{ animation:bn-jitter 6s steps(1) infinite; }
@keyframes bn-jitter{
  0%,100%{ transform:translate(0,0); } 88%{ transform:translate(0,0); }
  89%{ transform:translate(-3px,1px); } 90%{ transform:translate(2px,-1px); } 91%{ transform:translate(0,0); }
}

.motto{
  margin:2px 0 30px;
  text-align:center;
  font-size:clamp(13px,1.8vw,20px);
  letter-spacing:.42em;
  color:var(--amber);
}

.ch01-cols{
  display:grid;
  grid-template-columns:minmax(300px,430px) 1fr;
  gap:44px;
  align-items:start;
}

/* masking-tape tracklist sticker */
.tape-strip{
  background:
    linear-gradient(178deg, rgba(255,255,255,.08), transparent 40%),
    #d8cfae;
  color:#191512;
  padding:20px 26px 16px;
  transform:rotate(-2.2deg);
  clip-path:polygon(1.5% 0%, 98% 1%, 100% 12%, 99% 30%, 100% 55%, 98.5% 78%, 100% 92%, 97% 100%, 3% 99%, 0% 86%, 1.5% 60%, 0% 34%, 1% 14%);
  box-shadow:0 10px 34px rgba(0,0,0,.65), 0 0 0 1px rgba(0,0,0,.2) inset;
}
.tape-head{
  font-family:var(--hand);
  font-size:clamp(13px,1.4vw,16px);
  border-bottom:2px solid rgba(25,21,18,.8);
  padding-bottom:8px;
}
.tape-tracks{
  list-style:none;
  margin-top:10px;
  counter-reset:trk;
}
.tape-tracks li{
  counter-increment:trk;
  display:flex; align-items:baseline; gap:10px;
  font-family:var(--hand);
  font-size:clamp(15px,1.7vw,20px);
  line-height:1.75;
}
.tape-tracks li::before{
  content:counter(trk) ".";
  min-width:1.3em;
}
.tape-tracks li span{ flex:1; }
.tape-tracks li em{ font-style:normal; opacity:.75; font-size:.85em; }
.tape-tracks li:nth-child(odd){ transform:rotate(-.4deg); }
.tape-tracks li:nth-child(even){ transform:rotate(.5deg); }
.tape-foot{
  margin-top:10px;
  font-family:var(--hand);
  font-size:clamp(11px,1.2vw,13px);
  opacity:.65;
  transform:rotate(-1deg);
}

.ch01-copy p{
  font-size:clamp(13px,1.45vw,17px);
  line-height:1.8;
  letter-spacing:.04em;
  color:rgba(232,240,234,.88);
  margin-bottom:18px;
  max-width:56ch;
}
.ch01-hint{
  color:rgba(232,240,234,.45) !important;
  font-size:clamp(10px,1.1vw,12px) !important;
  letter-spacing:.25em !important;
}

/* the artifact itself, dropped beside the copy */
.c90-shot{ margin-top:24px; max-width:340px; transform:rotate(.8deg); }
.c90-shot img{
  width:100%; display:block;
  border:1px solid #22262c;
  box-shadow:0 12px 30px rgba(0,0,0,.55);
}
.c90-shot figcaption{
  margin-top:8px;
  font-size:10px; letter-spacing:.22em;
  color:rgba(232,240,234,.5);
}

/* ============ CH02 · SHOWS — TV GUIDE ============ */

.tvguide{
  margin-top:34px;
  border:1px solid rgba(232,240,234,.22);
  background:rgba(6,8,7,.6);
}

.tvg-row{
  display:grid;
  grid-template-columns:190px repeat(4,1fr);
  border-bottom:1px solid rgba(232,240,234,.14);
  transition:background .12s linear;
}
.tvg-row:last-child{ border-bottom:none; }

.tvg-head{
  background:rgba(42,60,255,.14);
  color:var(--amber);
}
.tvg-head .tvg-cell{ font-size:clamp(10px,1.1vw,13px); letter-spacing:.22em; }

.tvg-cell{
  padding:16px 14px;
  font-size:clamp(11px,1.2vw,14px);
  letter-spacing:.1em;
  border-left:1px solid rgba(232,240,234,.1);
  display:flex; flex-direction:column; justify-content:center; gap:3px;
}
.tvg-cell:first-child{ border-left:none; }

.tvg-venue{ color:var(--white); }
.tvg-venue b{
  display:block;
  color:var(--amber);
  font-weight:400;
  letter-spacing:.16em;
  font-size:.92em;
}

.tvg-row:not(.tvg-head):hover,
.tvg-row:not(.tvg-head):focus-within{
  background:rgba(242,182,50,.09);
  box-shadow:inset 3px 0 0 var(--red);
}

.tvg-us{
  color:var(--black);
  background:var(--amber);
  font-weight:700;
  letter-spacing:.14em;
  text-shadow:none;
  clip-path:polygon(0 6%, 100% 0, 99% 100%, 1% 96%);
}
.tvg-row:hover .tvg-us{ background:#ffd15c; }

.tvg-off{ color:rgba(232,240,234,.35); font-style:italic; }

.tvg-note{
  margin-top:18px;
  font-size:clamp(10px,1.1vw,12px);
  letter-spacing:.2em;
  color:rgba(232,240,234,.5);
}

/* mobile time labels (hidden on desktop) */
.tvg-cell::before{
  content:attr(data-t);
  display:none;
  color:var(--amber);
  font-size:.78em;
  letter-spacing:.2em;
}

/* ============ CH03 · FOOTAGE — PAUSED FRAMES ============ */

.frames{
  margin-top:34px;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:34px 28px;
}

.vhs-frame{ display:block; }

.vhs-screen{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  border-radius:14px / 12px;
  background:#000;
  box-shadow:
    0 0 0 3px #050606,
    0 0 0 4px rgba(232,240,234,.16),
    0 14px 34px rgba(0,0,0,.7);
  isolation:isolate;
}

.vhs-screen img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  filter:contrast(1.06) saturate(1.12);
}

/* inner curvature + frame scanlines */
.vhs-screen::before{
  content:"";
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 1px, transparent 1px 3px);
  box-shadow:inset 0 0 46px rgba(0,0,0,.8);
  border-radius:inherit;
}

/* tracking glitch band — rips through on hover */
.vhs-screen::after{
  content:"";
  position:absolute; left:-6%; right:-6%; top:-30%; height:22%;
  z-index:3; pointer-events:none;
  background:
    repeating-linear-gradient(0deg,
      rgba(232,240,234,.28) 0 2px,
      rgba(11,13,12,.85) 2px 4px,
      rgba(42,60,255,.3) 4px 5px,
      rgba(193,39,45,.3) 5px 6px);
  opacity:0;
  filter:blur(.5px);
}
.vhs-frame:hover .vhs-screen::after,
.vhs-frame:focus-within .vhs-screen::after{
  opacity:1;
  animation:tracking-rip .8s linear infinite;
}
@keyframes tracking-rip{
  0%{ top:-25%; transform:skewX(0deg); }
  45%{ transform:skewX(-8deg); }
  100%{ top:110%; transform:skewX(6deg); }
}
.vhs-frame:hover img{
  animation:frame-shudder .35s steps(2) infinite;
  filter:contrast(1.2) saturate(1.35) hue-rotate(-6deg);
}
@keyframes frame-shudder{
  0%,100%{ transform:translateX(0); }
  50%{ transform:translateX(3px) scaleY(1.005); }
}

.vhs-pause{
  position:absolute; top:10px; left:12px; z-index:4;
  font-family:var(--osd);
  font-size:13px; letter-spacing:.18em;
  color:var(--white);
  text-shadow:-1.5px 0 rgba(42,60,255,.9), 1.5px 0 rgba(193,39,45,.85);
  animation:osdblink 2.4s steps(1) infinite;
}

.vhs-stamp{
  position:absolute; bottom:10px; right:12px; z-index:4;
  font-family:var(--osd);
  font-size:12px; letter-spacing:.16em;
  color:var(--amber);
  text-shadow:0 0 8px rgba(242,182,50,.45);
}

.vhs-frame figcaption{
  margin-top:10px;
  font-size:clamp(10px,1.05vw,12px);
  letter-spacing:.16em;
  color:rgba(232,240,234,.55);
  text-transform:uppercase;
}

.frames-note{
  margin-top:30px;
  font-size:clamp(10px,1.1vw,12px);
  letter-spacing:.22em;
  color:rgba(232,240,234,.45);
}

/* ============ CH04 · TRACKING — SETTINGS MENU ============ */

.ch04{ display:flex; }
.ch04::before{ /* ghost of the test card bleeding through the weak signal */
  content:""; position:absolute; inset:0;
  background:url("img/dead-channel-card.webp") center / cover;
  opacity:.05; pointer-events:none;
}
.ch04-inner{ width:100%; margin:auto; position:relative; }

/* wobbling horizontal-hold bar */
.hhold{
  position:absolute; left:0; right:0; top:34%; height:56px;
  z-index:5; pointer-events:none;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(232,240,234,.06) 30%,
    rgba(42,60,255,.14) 48%,
    rgba(232,240,234,.1) 52%,
    rgba(193,39,45,.1) 70%,
    transparent 100%);
  filter:blur(1px);
  animation:hhold-wobble 5.5s ease-in-out infinite;
}
@keyframes hhold-wobble{
  0%,100%{ transform:translateY(0) skewY(0deg); opacity:.8; }
  20%{ transform:translateY(-26vh) skewY(.6deg); opacity:.5; }
  38%{ transform:translateY(10vh) skewY(-.8deg); opacity:.9; }
  60%{ transform:translateY(30vh) skewY(.4deg); opacity:.6; }
  80%{ transform:translateY(-8vh) skewY(-.5deg); opacity:.85; }
}

.settings{
  margin-top:40px;
  display:flex; flex-direction:column; gap:6px;
  max-width:760px;
}

.set-row{
  display:grid;
  grid-template-columns:34px 170px 1fr;
  align-items:baseline;
  gap:14px;
  padding:16px 18px;
  text-decoration:none;
  font-family:var(--osd);
  letter-spacing:.16em;
  border:1px solid transparent;
  transition:background .1s linear;
}

.set-arrow{
  color:var(--amber);
  opacity:0;
  transform:translateX(-8px);
  transition:opacity .1s, transform .12s;
}

.set-key{
  color:var(--white);
  font-size:clamp(16px,2vw,24px);
}

.set-val{
  color:rgba(232,240,234,.55);
  font-size:clamp(11px,1.3vw,15px);
  overflow-wrap:anywhere;
}

.set-row:hover,.set-row:focus-visible{
  background:rgba(42,60,255,.12);
  border-color:rgba(42,60,255,.4);
  outline:none;
}
.set-row:hover .set-arrow,.set-row:focus-visible .set-arrow{
  opacity:1; transform:translateX(0);
  animation:osdblink 1s steps(1) infinite;
}
.set-row:hover .set-key,.set-row:focus-visible .set-key{
  color:var(--amber);
  text-shadow:-1.5px 0 rgba(42,60,255,.8), 1.5px 0 rgba(193,39,45,.8);
}
.set-row:hover .set-val,.set-row:focus-visible .set-val{ color:var(--white); }

.set-dim{ opacity:.32; pointer-events:none; }

.set-note{
  margin-top:34px;
  font-size:clamp(10px,1.15vw,13px);
  letter-spacing:.2em;
  color:rgba(232,240,234,.5);
  max-width:60ch;
  line-height:1.9;
}

/* ============ STATIC BURST (channel zap) ============ */

#staticfx{
  position:absolute; inset:0; z-index:60; pointer-events:none;
  display:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='260' height='260' filter='url(%23n)' opacity='0.9'/></svg>");
  background-size:260px 260px;
  mix-blend-mode:screen;
}
#staticfx.on{
  display:block;
  animation:snowstorm .25s steps(5) both;
}
@keyframes snowstorm{
  0%{ background-position:0 0; opacity:1; }
  25%{ background-position:-90px 60px; }
  50%{ background-position:70px -120px; opacity:.95; }
  75%{ background-position:-40px -30px; }
  100%{ background-position:120px 90px; opacity:1; }
}

#screen.flicker{ animation:sigdrop .25s steps(3) both; }
@keyframes sigdrop{
  0%{ filter:brightness(1); }
  34%{ filter:brightness(2.1) contrast(1.6); transform:translateY(2px); }
  67%{ filter:brightness(.35); transform:translateY(-3px) skewX(.6deg); }
  100%{ filter:brightness(1); transform:none; }
}

/* ============ BOOT — "TRACKING..." ============ */

#boot{
  position:absolute; inset:0; z-index:80;
  background:var(--black);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:18px;
  cursor:pointer;
}
#boot::before{ /* the dead channel you're tuning past */
  content:""; position:absolute; inset:0;
  background:url("img/dead-channel-card.webp") center / cover;
  opacity:.14; pointer-events:none;
}
#boot > *{ position:relative; }
#boot.done{ display:none; }

.boot-text{
  font-family:var(--osd);
  font-size:clamp(22px,3.4vw,40px);
  letter-spacing:.5em;
  padding-left:.5em; /* balance tracking */
  color:var(--white);
}
.boot-dots{ animation:osdblink .7s steps(1) infinite; }

.boot-skip{
  font-size:clamp(10px,1.1vw,12px);
  letter-spacing:.3em;
  color:rgba(232,240,234,.4);
}

/* rolling horizontal bar */
.boot-bar{
  position:absolute; left:0; right:0; height:90px; top:-20%;
  background:linear-gradient(180deg,
    transparent,
    rgba(232,240,234,.05) 25%,
    rgba(232,240,234,.16) 50%,
    rgba(42,60,255,.1) 65%,
    transparent);
  animation:bootroll .75s linear infinite;
}
@keyframes bootroll{
  from{ top:-18%; } to{ top:112%; }
}

/* ============ REMOTE ============ */

.remote{
  position:fixed;
  right:16px; top:50%;
  transform:translateY(-50%);
  z-index:90;
  width:var(--remote-w);
  display:flex; flex-direction:column; gap:8px;
  padding:14px 10px;
  background:linear-gradient(160deg,#181a19,#0c0e0d 60%);
  border:1px solid rgba(232,240,234,.14);
  border-radius:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.75), inset 0 1px 0 rgba(232,240,234,.08);
}

.remote-label{
  text-align:center;
  font-size:9px;
  letter-spacing:.3em;
  color:rgba(232,240,234,.4);
  margin-bottom:2px;
}

.chbtn{
  appearance:none;
  font-family:var(--osd);
  background:#111413;
  color:rgba(232,240,234,.75);
  border:1px solid rgba(232,240,234,.16);
  border-radius:6px;
  padding:10px 6px 8px;
  cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  letter-spacing:.14em;
  transition:background .1s, color .1s, box-shadow .1s;
}
.chbtn b{ font-weight:400; font-size:13px; }
.chbtn span{ font-size:8.5px; letter-spacing:.24em; opacity:.7; }

.chbtn:hover{ background:#1b1f1d; color:var(--white); }
.chbtn:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }

.chbtn[aria-pressed="true"]{
  background:var(--red);
  color:var(--white);
  border-color:#e8574f;
  box-shadow:0 0 16px rgba(193,39,45,.55), inset 0 0 8px rgba(0,0,0,.4);
}
.chbtn[aria-pressed="true"] span{ opacity:.95; }

/* ============ MOBILE — remote docks bottom, guide stacks ============ */

@media (max-width: 860px){
  :root{ --remote-w: 0px; }

  #tv{ padding:6px; }
  #screen{ border-radius:22px / 18px; }

  .channel{ padding:76px 20px 170px 20px; }

  .osd-topright{ right:22px; }
  .osd-chwrap{ right:22px; bottom:116px; }
  .osd-sp{ bottom:116px; left:22px; }
  .osd-footer{ bottom:84px; font-size:8.5px; max-width:92%; }

  /* remote: bottom dock */
  .remote{
    top:auto; right:0; left:0; bottom:0;
    transform:none;
    width:auto;
    flex-direction:row;
    justify-content:center;
    gap:6px;
    border-radius:14px 14px 0 0;
    padding:10px 8px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .remote-label{ display:none; }
  .chbtn{ flex:1; max-width:120px; padding:8px 4px 7px; }

  .ch01-cols{ grid-template-columns:1fr; gap:30px; }
  .tape-strip{ transform:rotate(-1.4deg); max-width:460px; }
  .bn{ letter-spacing:5px; }

  /* TV guide becomes stacked rows */
  .tvguide{ border:none; background:transparent; display:flex; flex-direction:column; gap:16px; }
  .tvg-head{ display:none; }
  .tvg-row{
    grid-template-columns:1fr;
    border:1px solid rgba(232,240,234,.2);
    background:rgba(6,8,7,.6);
  }
  .tvg-cell{ border-left:none; border-top:1px solid rgba(232,240,234,.08); }
  .tvg-venue{ border-top:none; background:rgba(42,60,255,.12); }
  .tvg-cell::before{ display:block; }
  .tvg-venue::before{ display:none; }
  .tvg-us{ clip-path:polygon(0 8%, 100% 0, 100% 100%, 1% 94%); }
  .tvg-us::before{ color:var(--black); opacity:.75; }

  .frames{ grid-template-columns:1fr; }

  .set-row{ grid-template-columns:24px 1fr; }
  .set-val{ grid-column:2; }

  .hhold{ height:40px; }
}

/* ============ REDUCED MOTION — the tape behaves ============ */

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation:none !important;
    transition:none !important;
  }
  #staticfx{ display:none !important; }
  #screen.flicker{ animation:none !important; filter:none; }
  #boot{ display:none; } /* JS also removes it instantly */
  .boot-bar{ display:none; }
  .hhold{ opacity:.35; }
  .vhs-frame:hover img{ filter:contrast(1.06) saturate(1.12); }
}