/* =========================================================
   Salsabil — On Air
   palette: newsprint butter, studio ink, on-air red,
            test-card cobalt, washi mint & pink
   ========================================================= */
:root {
  --paper: #F1E7C9;
  --paper-2: #E5D7AE;
  --note: #FFFAEA;
  --ink: #1C1B33;
  --ink-soft: #4A4866;
  --red: #D7263D;
  --red-dark: #A8172B;
  --cobalt: #2B4FD8;
  --mint: #A8DCC0;
  --pink: #F6B8C6;
  --yellow: #F7D154;
  --phosphor: #7CFF9B;

  --f-display: "Gloock", "Times New Roman", serif;
  --f-body: "Schibsted Grotesk", system-ui, sans-serif;
  --f-hand: "Gochi Hand", "Comic Sans MS", cursive;
  --f-ar: "Aref Ruqaa", serif;
  --f-osd: "VT323", monospace;
  --f-type: "Courier Prime", "Courier New", monospace;

  --gutter: clamp(16px, 4vw, 56px);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--paper);
  /* paper grain */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .12 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; border-radius: 4px; }

.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 14px; z-index: 100; }
.skip:focus { left: 8px; }

.hand { font-family: var(--f-hand); font-weight: 400; }
.doodle { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: url(#boil); }
.doodle path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease-out) .2s; }
.is-drawn .doodle path, .doodle.is-drawn path { stroke-dashoffset: 0; }

.section-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 7vw, 5.5rem);
  line-height: .95;
  letter-spacing: -.01em;
  margin: 0;
}
.section-title--light { color: var(--paper); }

/* ---------- placeholders for missing media ---------- */
.media { position: relative; margin: 0; overflow: hidden; background: var(--ink); }
.media img, .media video { width: 100%; height: 100%; object-fit: cover; }
.media.is-empty {
  background:
    repeating-linear-gradient(-45deg, transparent 0 14px, rgba(28,27,51,.08) 14px 28px),
    var(--paper-2);
}
.media.is-empty img, .media.is-empty video { display: none; }
.media.is-empty::after {
  content: "add " attr(data-label);
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 12px; text-align: center;
  font-family: var(--f-hand); font-size: 1rem; line-height: 1.2;
  color: var(--ink-soft);
}

/* ======================= NAV ======================= */
.nav {
  display: flex; align-items: center; gap: 16px;
  padding: 20px var(--gutter);
}
.nav__brand {
  font-family: var(--f-display); font-size: 1.6rem; text-decoration: none;
  margin-right: auto;
}
.nav__pills { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.nav__pills a {
  display: block; padding: 7px 18px;
  border: 1.5px solid var(--ink); border-radius: 999px;
  text-decoration: none; font-size: .95rem; font-weight: 500;
  transition: background .2s, color .2s, transform .2s var(--ease-out);
}
.nav__pills a:hover { background: var(--ink); color: var(--paper); transform: rotate(-2deg); }

.onair {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 12px;
  background: #3a1016; color: #6b2a32;
  border: 2px solid var(--ink); border-radius: 6px;
  font-family: var(--f-body); font-weight: 800; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none;
  transition: background .08s, color .08s, box-shadow .08s;
}
.onair__dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.onair.is-lit {
  background: var(--red); color: #fff;
  box-shadow: 0 0 0 3px rgba(215,38,61,.18), 0 0 26px rgba(215,38,61,.55);
}

/* ======================= HERO ======================= */
.hero { min-height: 100svh; display: flex; flex-direction: column; }
.hero__grid {
  flex: 1;
  display: grid; grid-template-columns: 1.1fr 1fr; align-items: center;
  gap: clamp(24px, 4vw, 64px);
  padding: 2vh var(--gutter) 6vh;
}
.hero__title { position: relative; }
.name { margin: 0; font-weight: 400; }
.name__first {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(4.2rem, 13.5vw, 13rem);
  line-height: .82;
  letter-spacing: -.035em;
  margin-left: -.04em;
}
.name__last {
  display: block;
  margin-top: .5em;
  font-family: var(--f-body); font-weight: 700;
  font-size: clamp(1.05rem, 1.8vw, 1.5rem);
  letter-spacing: .02em;
}
.name__ar {
  position: absolute; left: 50%; top: -24%;
  margin: 0;
  font-family: var(--f-ar); font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 5.6rem);
  color: var(--red);
  transform: rotate(-9deg);
  filter: url(#boil);
  line-height: 1;
}
.hero__role { max-width: 30ch; margin: 1.4em 0 0; font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--ink-soft); }
.hero__scroll {
  display: inline-flex; align-items: flex-start; gap: 6px;
  margin-top: 2.2em; font-size: 1.35rem; text-decoration: none; color: var(--red);
  transform: rotate(-3deg);
}
.hero__scroll .doodle { width: 38px; height: 46px; margin-top: 10px; }

.hero__tv { position: relative; display: grid; justify-items: center; }
.hero__hint {
  position: absolute; right: 0; top: -70px;
  margin: 0; font-size: 1.3rem; color: var(--cobalt);
  transform: rotate(5deg);
  display: flex; flex-direction: column; align-items: flex-end;
}
.hero__hint .doodle { width: 64px; height: 38px; transform: rotate(10deg); margin: 0 6px 0 0; }

/* ======================= TV ======================= */
.tv { position: relative; width: min(100%, 560px); }
.tv__antenna { position: absolute; left: 50%; top: -64px; width: 0; height: 70px; }
.tv__antenna i {
  position: absolute; bottom: 0; left: 0;
  width: 3px; height: 92px; background: var(--ink); border-radius: 3px;
  transform-origin: bottom center;
}
.tv__antenna i::after { content: ""; position: absolute; top: -6px; left: -4px; width: 11px; height: 11px; border-radius: 50%; background: var(--ink); }
.tv__antenna i:first-child { transform: rotate(-32deg); }
.tv__antenna i:last-child { transform: rotate(24deg); height: 78px; }
.tv__antenna::after { content: ""; position: absolute; left: -26px; bottom: -6px; width: 54px; height: 20px; border-radius: 30px 30px 0 0; background: var(--ink); }

.tv__body {
  position: relative;
  display: grid; grid-template-columns: 1fr 92px; gap: 18px;
  padding: 22px;
  background: var(--red);
  border: 3px solid var(--ink);
  border-radius: 34px;
  box-shadow: inset -10px -12px 0 rgba(0,0,0,.14), inset 8px 8px 0 rgba(255,255,255,.18), 10px 12px 0 var(--ink);
}
.tv__screen {
  position: relative;
  aspect-ratio: 4 / 3.3;
  background: #08080f;
  border: 10px solid #F3E9CF;
  border-radius: 26% / 20%;
  overflow: hidden;
  box-shadow: 0 0 0 3px var(--ink), inset 0 0 0 2px #000;
}
.tv__channels { position: absolute; inset: 0; clip-path: inset(50% 50% 50% 50%); }
.tv.is-on .tv__channels { animation: crt-on 1.1s steps(22) forwards; }
@keyframes crt-on {
  0%   { clip-path: inset(49.6% 49% 49.6% 49%); filter: brightness(6); }
  18%  { clip-path: inset(49.6% 0 49.6% 0);   filter: brightness(5); }
  45%  { clip-path: inset(10% 0 10% 0);       filter: brightness(2.2) contrast(1.3); }
  70%  { clip-path: inset(0 0 0 0);           filter: brightness(1.4); }
  100% { clip-path: inset(0 0 0 0);           filter: none; }
}
.ch { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.ch.is-on { opacity: 1; visibility: visible; }
.ch .media { position: absolute; inset: 0; }
.ch .media.is-empty { background: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(255,255,255,.05) 14px 28px), #1a1934; }
.ch .media.is-empty::after { color: #b9b5d8; }
.ch__bug {
  position: absolute; top: 14%; left: 12%;
  font-family: var(--f-osd); font-size: 1.3rem; color: #fff;
  background: var(--red); padding: 0 8px; line-height: 1.3;
}
.ch__lower {
  position: absolute; left: 0; right: 0; bottom: 12%;
  padding: 6px 12% 6px 12%;
  background: linear-gradient(90deg, var(--cobalt) 70%, transparent);
  color: #fff; font-weight: 700; font-size: clamp(.8rem, 1.6vw, 1.05rem);
}
.ch__lower em { font-style: normal; font-weight: 400; opacity: .8; margin-left: 8px; }

/* channel 2 – test card */
.bars { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, 1fr); }
.bars i:nth-child(1) { background: #d9d9d9; }
.bars i:nth-child(2) { background: #F7D154; }
.bars i:nth-child(3) { background: #6fd3e0; }
.bars i:nth-child(4) { background: #66c46e; }
.bars i:nth-child(5) { background: #d36fd0; }
.bars i:nth-child(6) { background: var(--red); }
.bars i:nth-child(7) { background: var(--cobalt); }
.bars__circle {
  position: absolute; left: 50%; top: 46%; translate: -50% -50%;
  width: 46%; aspect-ratio: 1; border-radius: 50%;
  background: #fff; border: 4px solid #000;
  display: grid; place-items: center; text-align: center;
  font-family: var(--f-display); font-size: clamp(1rem, 2.6vw, 1.6rem); line-height: 1;
}
.bars__msg {
  position: absolute; left: 0; right: 0; bottom: 10%; margin: 0;
  text-align: center; font-family: var(--f-osd); font-size: 1.4rem; color: #fff;
  background: #000; letter-spacing: .1em;
}

/* channel 4 – news */
.ch--news { background: radial-gradient(circle at 30% 30%, #2f4fd8, #14205e); color: #fff; }
.news__head {
  position: absolute; left: 12%; right: 12%; top: 27%;
  margin: 0; font-family: var(--f-display); font-size: clamp(1.1rem, 2.6vw, 1.9rem); line-height: 1.08;
}
.ticker { position: absolute; left: 0; right: 0; bottom: 12%; background: var(--yellow); color: var(--ink); overflow: hidden; }
.ticker p {
  margin: 0; white-space: nowrap; display: inline-block;
  font-family: var(--f-osd); font-size: 1.35rem; line-height: 1.5;
  animation: ticker 16s linear infinite;
}
@keyframes ticker { to { transform: translateX(-50%); } }

.tv__static { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; opacity: 0; pointer-events: none; }
.tv__static.is-on { opacity: 1; }
.tv__scan {
  position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%),
    radial-gradient(ellipse at 28% 18%, rgba(255,255,255,.18), transparent 34%);
}
.tv__osd {
  position: absolute; top: 12%; right: 12%;
  font-family: var(--f-osd); font-size: 1.7rem; color: var(--phosphor);
  text-shadow: 0 0 6px rgba(124,255,155,.8);
  opacity: 0; transition: opacity .1s;
}
.tv__osd.is-on { opacity: 1; }

.tv__panel { display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 6px; }
.knob {
  position: relative;
  width: 72px; height: 72px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fffaf0, #e8dcb9 55%, #c8b88e);
  border: 3px solid var(--ink);
  box-shadow: 0 5px 0 var(--ink);
  cursor: pointer;
  transition: transform .18s steps(3);
  padding: 0;
}
.knob::before { /* ridges */
  content: ""; position: absolute; inset: 5px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(28,27,51,.25) 0 4deg, transparent 4deg 18deg);
}
.knob span { position: absolute; left: 50%; top: 6px; width: 5px; height: 22px; margin-left: -2.5px; background: var(--ink); border-radius: 3px; }
.knob:active { box-shadow: 0 2px 0 var(--ink); translate: 0 3px; }
.knob--sm { width: 46px; height: 46px; cursor: default; }
.knob--sm span { height: 14px; top: 4px; }
.tv__grille {
  width: 70px; flex: 1; min-height: 60px;
  border-radius: 10px;
  background: repeating-linear-gradient(0deg, var(--ink) 0 3px, transparent 3px 9px);
  opacity: .8;
}
.tv__legs { display: flex; justify-content: space-between; padding: 0 80px; }
.tv__legs i { width: 16px; height: 34px; background: var(--ink); border-radius: 0 0 6px 6px; }
.tv__legs i:first-child { transform: skewX(14deg); }
.tv__legs i:last-child { transform: skewX(-14deg); }

/* ======================= ABOUT ======================= */
.about { position: relative; padding: 14vh var(--gutter) 10vh; }
.about .section-title { text-align: center; }
.about__psst { text-align: center; margin: .6em 0 0; font-size: 1.25rem; color: var(--cobalt); transform: rotate(-1.5deg); }

.desk { position: relative; height: 900px; max-width: 1200px; margin: 30px auto 0; }
.piece {
  position: absolute; left: var(--x); top: var(--y);
  transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(calc(var(--r) + var(--tilt, 0deg)));
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.piece.is-dragging { cursor: grabbing; }
.piece.is-dragging { filter: drop-shadow(10px 18px 0 rgba(28,27,51,.18)); }
.desk.will-land .piece { opacity: 0; }
.desk .piece.is-landed { opacity: 1; animation: land .45s steps(5) both; }
@keyframes land {
  0%   { transform: translate(var(--dx,0px), -60px) rotate(calc(var(--r) - 14deg)) scale(1.15); opacity: 0; }
  40%  { opacity: 1; }
  80%  { transform: translate(var(--dx,0px), 4px) rotate(calc(var(--r) + 2deg)) scale(.98); }
  100% { transform: translate(var(--dx,0px), var(--dy,0px)) rotate(var(--r)) scale(1); }
}

.tape {
  position: absolute; top: -14px; left: 50%; translate: -50% 0;
  width: 110px; height: 30px; opacity: .85;
  clip-path: polygon(0 8%, 6% 0, 12% 10%, 18% 0, 24% 8%, 100% 0, 96% 100%, 90% 90%, 84% 100%, 78% 92%, 0 100%, 4% 50%);
  transform: rotate(-4deg);
}
.tape--mint { background: var(--mint); }
.tape--pink { background: var(--pink); }
.tape--yellow { background: var(--yellow); }

.cutout { width: 26%; margin: 0; z-index: 1; }
.media--cutout { aspect-ratio: 3 / 4.4; background: transparent; overflow: visible; }
.media--cutout img { object-fit: contain; filter: drop-shadow(0 0 0 #fff) drop-shadow(5px 0 0 #fff) drop-shadow(-5px 0 0 #fff) drop-shadow(0 5px 0 #fff) drop-shadow(0 -5px 0 #fff) drop-shadow(8px 10px 0 rgba(28,27,51,.18)); }
.media--cutout.is-empty { border-radius: 46% 46% 12px 12px; border: 6px solid #fff; box-shadow: 8px 10px 0 rgba(28,27,51,.18); }
.cutout__tag { position: absolute; left: -30%; top: 46%; font-size: 1.5rem; color: var(--red); transform: rotate(-8deg); }
.cutout__tag .doodle { display: block; width: 64px; height: 36px; margin-left: 40px; transform: scale(-1, -1); }

.note {
  width: 30%; padding: 30px 26px 24px;
  background: var(--note);
  box-shadow: 4px 6px 0 rgba(28,27,51,.12);
  background-image: repeating-linear-gradient(0deg, transparent 0 29px, rgba(43,79,216,.18) 29px 30px);
  background-position: 0 14px;
}
.note h3 { margin: 0 0 8px; font-size: 1.9rem; line-height: 1; color: var(--red); }
.note ul { margin: 0; padding-left: 1.1em; font-size: .98rem; line-height: 30px; }
.note li::marker { color: var(--red); content: "♥  "; font-size: .8em; }

.script {
  width: 31%; padding: 30px 30px 22px;
  background: #fff;
  font-family: var(--f-type); font-size: .9rem; line-height: 1.5;
  box-shadow: 4px 6px 0 rgba(28,27,51,.12);
}
.script p { margin: 0 0 .9em; }
.script__slug { font-weight: 700; }
.script__who { margin: 1.1em 0 0 !important; text-align: center; }
.script__line { padding: 0 8%; }
.script__dir { padding: 0 14%; font-style: italic; color: var(--ink-soft); }
.script__page { position: absolute; top: 10px; right: 16px; }

.polaroid {
  width: 23%; margin: 0;
  padding: 12px 12px 0; background: #fff;
  box-shadow: 4px 6px 0 rgba(28,27,51,.12);
}
.polaroid .media { aspect-ratio: 1; }
.polaroid figcaption { padding: 10px 2px 14px; font-size: 1.25rem; text-align: center; }

.sticky {
  width: 24%; padding: 24px 22px;
  background: var(--pink);
  box-shadow: 4px 8px 0 rgba(28,27,51,.12);
  border-radius: 2px 2px 18px 2px;
}
.sticky h3 { margin: 0 0 6px; font-size: 1.8rem; line-height: 1; }
.sticky p { margin: 0 0 .5em; font-weight: 600; font-size: 1.05rem; }
.sticky .sticky__small { font-weight: 400; font-size: .92rem; }

.ticket {
  display: flex; align-items: stretch;
  background: var(--yellow);
  border: 2px dashed rgba(28,27,51,.35);
  font-size: .9rem; line-height: 1.25;
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 10px, #000 11px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 10px, #000 11px) right / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 50%, transparent 10px, #000 11px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 10px, #000 11px) right / 51% 100% no-repeat;
}
.ticket__l { padding: 12px 14px 12px 20px; border-right: 2px dashed rgba(28,27,51,.35); font-weight: 800; letter-spacing: .1em; }
.ticket__r { padding: 12px 22px 12px 14px; }

/* ======================= REEL ======================= */
.reel { position: relative; background: var(--ink); color: var(--paper); }
.reel::before, .reel::after { /* torn paper edges */
  content: ""; position: absolute; left: 0; right: 0; height: 26px; background: var(--paper);
  z-index: 2; pointer-events: none;
}
.reel::before { top: -1px; clip-path: var(--torn-top, none); }
.reel::after { bottom: -1px; clip-path: var(--torn-bottom, none); }
.reel__sticky {
  position: sticky; top: 0;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center; gap: 4vh;
  overflow: hidden;
  padding: 8vh 0;
}
.reel__head { padding: 0 var(--gutter); display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 32px; }
.reel__sub { margin: 0; color: #c9c4e2; max-width: 40ch; }

.strip {
  --hole: rgba(241,231,201,.9);
  position: relative;
  padding: 34px 0;
  background:
    radial-gradient(circle, transparent 0, transparent 0),
    #0b0a14;
  transform: rotate(-1.5deg);
  box-shadow: 0 0 0 1px #000;
}
.strip::before, .strip::after { /* sprocket holes */
  content: ""; position: absolute; left: 0; right: 0; height: 14px;
  background: repeating-linear-gradient(90deg, transparent 0 14px, var(--hole) 14px 30px, transparent 30px 42px);
  -webkit-mask: linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0);
  border-radius: 3px;
  opacity: .85;
}
.strip::before { top: 10px; }
.strip::after { bottom: 10px; }
.strip__track {
  display: flex; gap: 22px; margin: 0; padding: 0 var(--gutter);
  list-style: none;
  will-change: transform;
}
.frame { position: relative; flex: 0 0 auto; width: clamp(220px, 26vw, 340px); }
.frame .media { aspect-ratio: 4 / 5; border-radius: 6px; background: #1d1c35; }
.frame .media.is-empty { background: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(255,255,255,.04) 14px 28px), #1d1c35; }
.frame .media.is-empty::after { color: #9d98c4; }
.frame__edge {
  display: flex; justify-content: space-between;
  margin: 0 0 6px; font-family: var(--f-osd); font-size: 1rem; color: #e9a33a; letter-spacing: .08em;
}
.frame__title { margin: 10px 0 0; font-family: var(--f-display); font-size: 1.35rem; font-weight: 400; color: var(--paper); line-height: 1.1; }
.frame__note { margin: 2px 0 0; font-family: var(--f-hand); font-size: 1.1rem; color: #c9c4e2; }
.frame .media { transition: transform .35s var(--ease-out); }
.frame:hover .media { transform: rotate(-1.5deg) scale(1.02); }

/* ======================= SCHEDULE ======================= */
.schedule { padding: 16vh var(--gutter) 10vh; }
.guide {
  max-width: 1100px; margin: 0 auto;
  background: var(--note);
  border: 2px solid var(--ink);
  box-shadow: 10px 12px 0 var(--cobalt);
  padding: clamp(24px, 4vw, 56px);
}
.guide__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; padding-bottom: 20px; border-bottom: 3px double var(--ink); }
.guide__date { margin: 0; font-size: 1.35rem; color: var(--red); transform: rotate(-2deg); }
.guide__list { list-style: none; margin: 0; padding: 0; }
.slot {
  display: grid; grid-template-columns: 170px 1fr; gap: 24px;
  padding: 26px 0; border-bottom: 1px dashed rgba(28,27,51,.35);
}
.slot__time { margin: 0; font-family: var(--f-display); font-size: 1.5rem; line-height: 1.1; }
.slot__time span { display: block; font-family: var(--f-body); font-size: .95rem; color: var(--ink-soft); margin-top: 4px; }
.slot h3 { margin: 0; font-size: 1.3rem; font-weight: 700; line-height: 1.25; }
.slot__ch { margin: 2px 0 10px; color: var(--cobalt); font-weight: 600; }
.slot ul { margin: 0; padding-left: 1.1em; max-width: 68ch; color: var(--ink-soft); }
.slot li + li { margin-top: .25em; }
.live-badge {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 8px; padding: 1px 9px 1px 7px;
  background: var(--red); color: #fff; border-radius: 4px;
  font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; vertical-align: 3px;
}
.live-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: blink 1.6s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.guide__extras { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; padding-top: 30px; }
.extra__title { margin: 0 0 12px; font-family: var(--f-display); font-weight: 400; font-size: 1.7rem; }
.extra dl { margin: 0; }
.extra dt { font-weight: 700; margin-top: 12px; }
.extra dt:first-child { margin-top: 0; }
.extra dd { margin: 2px 0 0; color: var(--ink-soft); }
.dl-rows { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; }
.dl-rows dt, .dl-rows dd { margin: 0; padding: 7px 0; border-bottom: 1px dotted rgba(28,27,51,.3); font-weight: 500; }
.dl-rows dd { font-family: var(--f-display); color: var(--ink); }

/* ======================= SKILLS / RADIO ======================= */
.skills { padding: 10vh var(--gutter) 14vh; text-align: center; }
.skills__hint { margin: .5em 0 40px; font-size: 1.3rem; color: var(--cobalt); transform: rotate(-1.5deg); }
.radio {
  max-width: 880px; margin: 0 auto; text-align: left;
  background: var(--cobalt);
  border: 3px solid var(--ink); border-radius: 28px;
  padding: 26px;
  box-shadow: inset 0 -10px 0 rgba(0,0,0,.18), inset 0 6px 0 rgba(255,255,255,.15), 10px 12px 0 var(--ink);
}
.radio__top { display: grid; grid-template-columns: 1fr 1.6fr; gap: 22px; }
.radio__grille {
  border-radius: 16px; border: 3px solid var(--ink);
  background:
    radial-gradient(circle, var(--ink) 2.2px, transparent 2.8px) 0 0 / 12px 12px,
    #e9dfc2;
  min-height: 160px;
}
.radio__lcd {
  border-radius: 12px; border: 3px solid var(--ink);
  background: #b9d48f;
  box-shadow: inset 0 0 22px rgba(40,70,20,.35);
  padding: 14px 18px;
  font-family: var(--f-osd); color: #24331a;
  min-height: 160px;
}
.lcd__row { display: flex; justify-content: space-between; align-items: baseline; }
.lcd__freq { font-size: 1.6rem; }
.lcd__freq b { font-weight: 400; font-size: 3rem; line-height: 1; }
.lcd__signal { display: flex; align-items: flex-end; gap: 3px; height: 22px; }
.lcd__signal i { width: 6px; background: #24331a; opacity: .18; }
.lcd__signal i:nth-child(1) { height: 25%; } .lcd__signal i:nth-child(2) { height: 50%; }
.lcd__signal i:nth-child(3) { height: 75%; } .lcd__signal i:nth-child(4) { height: 100%; }
.lcd__signal i.on { opacity: 1; }
.lcd__station { margin: 4px 0 0; font-size: 2rem; line-height: 1; }
.lcd__desc { margin: 6px 0 0; font-family: var(--f-body); font-size: .98rem; line-height: 1.4; max-width: 48ch; min-height: 2.8em; }
.radio.is-noise .lcd__station, .radio.is-noise .lcd__desc { opacity: .45; }

.radio__dial {
  position: relative; margin-top: 22px; height: 86px;
  border-radius: 12px; border: 3px solid var(--ink);
  background: var(--note);
  overflow: hidden;
}
.dial__scale { position: absolute; inset: 0 14px; }
.dial__scale .tick { position: absolute; bottom: 0; width: 1.5px; height: 12px; background: var(--ink); }
.dial__scale .tick.major { height: 24px; width: 2px; }
.dial__scale .num { position: absolute; bottom: 28px; translate: -50% 0; font-family: var(--f-osd); font-size: 1.15rem; }
.dial__scale .st { position: absolute; top: 8px; translate: -50% 0; width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
.dial__needle {
  position: absolute; top: 0; bottom: 0; left: 14px; width: 4px; margin-left: -2px;
  background: var(--red); box-shadow: 0 0 0 1px var(--red-dark);
  pointer-events: none;
}
.dial__input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize;
}
.radio__dial:has(.dial__input:focus-visible) { outline: 3px solid var(--yellow); outline-offset: 3px; }
.radio__presets { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; margin-top: 18px; }
.preset {
  padding: 10px 4px 8px; border: 2.5px solid var(--ink); border-radius: 8px;
  background: #F3E9CF; cursor: pointer;
  font-size: .82rem; font-weight: 700; text-align: center;
  box-shadow: 0 5px 0 var(--ink);
  transition: transform .08s, box-shadow .08s, background .15s;
}
.preset:hover { background: #fff; }
.preset[aria-pressed="true"] { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); background: var(--yellow); }

/* ======================= CONTACT / PHONE ======================= */
.contact {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px;
  padding: 10vh var(--gutter) 14vh;
  max-width: 1300px; margin: 0 auto;
}
.contact__lead { max-width: 36ch; font-size: 1.15rem; color: var(--ink-soft); margin: 1em 0 1.5em; }
.contact__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.contact__links a { font-weight: 600; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.contact__links a:hover { color: var(--red); }
.big-link { font-family: var(--f-display); font-weight: 400 !important; font-size: clamp(1.15rem, 2.4vw, 1.9rem); word-break: break-all; }

.phone { position: relative; height: 460px; }
.phone__cord { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
#cordShadow { fill: none; stroke: var(--ink); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
#cordPath { fill: none; stroke: #3a3963; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: translate(-1px, -1px); }
.phone__base { position: absolute; width: 320px; left: 50%; bottom: 30px; translate: -40% 0; overflow: visible; }
.base__body { fill: var(--red); stroke: var(--ink); stroke-width: 3; }
.base__cradle { fill: none; stroke: var(--ink); stroke-width: 8; stroke-linecap: round; }
.base__dial { fill: #F3E9CF; stroke: var(--ink); stroke-width: 3; }
.base__holes circle { fill: var(--red); stroke: var(--ink); stroke-width: 2; }
.base__center { fill: var(--yellow); stroke: var(--ink); stroke-width: 2.5; }
.base__stop { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.receiver {
  position: absolute; left: 0; top: 0; width: 300px;
  touch-action: none; cursor: grab; user-select: none; -webkit-user-drag: none;
  transform-origin: 50% 50%;
}
.receiver svg { display: block; width: 100%; overflow: visible; }
.receiver svg path:first-child { fill: var(--ink); stroke: var(--ink); stroke-width: 2; }
.receiver__shine { fill: none; stroke: #4c4a78; stroke-width: 4; stroke-linecap: round; }
.receiver.is-dragging { cursor: grabbing; }
.phone__bubble {
  position: absolute; left: 0; top: 0; margin: 0;
  padding: 10px 16px; background: #fff; border: 2px solid var(--ink); border-radius: 18px 18px 18px 4px;
  font-size: 1.25rem; white-space: nowrap; pointer-events: none;
  opacity: 0; transform: scale(.6); transform-origin: 0 100%;
  transition: opacity .15s, transform .25s var(--ease-out);
}
.phone__bubble.is-on { opacity: 1; transform: scale(1); }
.phone__hint { position: absolute; right: 6%; top: 16%; margin: 0; color: var(--red); font-size: 1.4rem; transform: rotate(6deg); }
.phone__hint .doodle { display: block; width: 54px; height: 44px; }
.phone.is-picked .phone__hint { opacity: 0; transition: opacity .3s; }

/* ======================= FOOTER ======================= */
.off {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 32px;
  padding: 10vh var(--gutter);
  background: var(--ink); color: var(--paper);
}
.mini-tv {
  width: 190px; padding: 12px; border-radius: 20px;
  background: var(--paper); border: 3px solid #000;
}
.mini-tv__screen { position: relative; aspect-ratio: 4/3; background: #000; border-radius: 22% / 18%; overflow: hidden; }
.mini-tv__pic {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(90deg, #d9d9d9 0 14.28%, #F7D154 0 28.57%, #6fd3e0 0 42.85%, #66c46e 0 57.14%, #d36fd0 0 71.42%, var(--red) 0 85.71%, var(--cobalt) 0);
  font-family: var(--f-osd); font-size: 1rem; color: #fff;
}
.mini-tv__pic span { background: #000; padding: 0 6px; }
.mini-tv.is-off .mini-tv__pic { animation: crt-off .7s steps(14) forwards; }
.mini-tv.is-off .mini-tv__screen::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px;
  border-radius: 50%; background: #fff; box-shadow: 0 0 8px 3px #fff;
  animation: dot-fade 1.4s .7s forwards; opacity: 0;
}
@keyframes crt-off {
  0%   { transform: scale(1, 1); filter: brightness(1); }
  45%  { transform: scale(1, .012); filter: brightness(4); }
  80%  { transform: scale(.02, .012); filter: brightness(6); }
  100% { transform: scale(0, 0); }
}
@keyframes dot-fade { 0% { opacity: 1; } 100% { opacity: 0; } }
.off__big { margin: 0; font-family: var(--f-display); font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.05; }
.off__small { margin: 10px 0 0; color: #a7a3c7; font-size: .9rem; }
.off__again {
  margin-top: 10px; padding: 0; background: none; border: 0; cursor: pointer;
  color: var(--yellow); font-size: 1.3rem; text-decoration: underline; text-underline-offset: 4px;
}

/* ======================= RESPONSIVE ======================= */
@media (max-width: 1000px) {
  .nav__pills { display: none; }
  .hero__grid { grid-template-columns: 1fr; padding-top: 4vh; }
  .hero__tv { margin-top: 70px; }
  .hero__hint { right: 0; bottom: -10%; }

  .about__psst { display: none; }
  .desk { height: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 36px 24px; }
  .piece { position: relative; left: auto; top: auto; }
  .cutout { width: min(300px, 70%); order: -1; }
  .cutout__tag { right: -20%; }
  .note, .script { width: min(420px, 100%); }
  .polaroid { width: min(240px, 60%); }
  .sticky { width: min(260px, 70%); }

  .radio__top { grid-template-columns: 1fr; }
  .radio__grille { display: none; }
  .radio__presets { grid-template-columns: repeat(4, 1fr); }

  .contact { grid-template-columns: 1fr; }
  .guide__extras { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 1rem; }
  .name__ar { position: relative; left: auto; top: auto; display: block; text-align: right; margin: -.6em 0 -.2em; }
  .cutout__tag { left: -6%; top: auto; bottom: -4%; }
  .cutout__tag .doodle { display: none; }
  .tv__body { grid-template-columns: 1fr 64px; padding: 14px; gap: 12px; border-radius: 26px; }
  .knob { width: 54px; height: 54px; }
  .knob span { height: 16px; top: 4px; }
  .knob--sm { width: 36px; height: 36px; }
  .tv__legs { padding: 0 50px; }
  .tv__osd { font-size: 1.2rem; }
  .ch__bug, .bars__msg, .ticker p { font-size: 1rem; }
  .hero__hint { position: static; margin-top: 12px; align-self: end; justify-self: end; }
  .hero__hint .doodle { display: none; }
  .slot { grid-template-columns: 1fr; gap: 6px; }
  .phone { height: 400px; }
  .phone__base { width: 220px; }
  .receiver { width: 200px; }
  .phone__hint { top: 4%; }
  .frame { width: 72vw; }
}

/* film strip without scroll pinning (narrow screens / reduced motion) */
.reel.is-native { height: auto !important; }
.reel.is-native .reel__sticky { position: relative; min-height: 0; }
.reel.is-native .strip { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.reel.is-native .strip::-webkit-scrollbar { display: none; }
.reel.is-native .strip__track { width: max-content; transform: none !important; }
.reel.is-native .frame { scroll-snap-align: center; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .doodle, .name__ar { filter: none; }
}

/* ======================= BRAND PARTNERSHIPS — PHONES ======================= */
.brands { position: relative; max-width: 1400px; margin: 0 auto; padding: 16vh var(--gutter) 13vh; }
.brands__title { margin: 0; font-family: var(--f-display); font-weight: 400; line-height: .82; letter-spacing: -.03em; font-size: clamp(3.6rem, 11vw, 10rem); }
.brands__w1 { display: block; }
.brands__w2 {
  position: absolute; z-index: 3; right: var(--gutter); bottom: 6vh;
  pointer-events: none;
}
.brands__with { position: absolute; left: calc(var(--gutter) + clamp(12rem, 31vw, 29rem)); top: calc(16vh + .4em); margin: 0; font-size: 1.5rem; color: var(--red); transform: rotate(-6deg); }
.brands__with .doodle { display: block; width: 130px; height: 26px; }
.brands__sub { max-width: 46ch; margin: 18px 0 0; color: var(--ink-soft); }
.brands__more { position: absolute; z-index: 3; left: calc(var(--gutter) + 3%); bottom: calc(6vh + 2rem); margin: 0; font-size: 1.8rem; color: var(--cobalt); transform: rotate(-6deg); }

.phones {
  list-style: none; margin: 6vh 0 calc(clamp(3.6rem, 11vw, 10rem) * .5); padding: 0;
  display: flex; justify-content: center; align-items: center; gap: clamp(14px, 2.2vw, 36px);
}
.ph { width: clamp(150px, 15vw, 220px); display: grid; justify-items: center; gap: 12px;
  transform: rotate(var(--r, 0deg)) translateY(var(--y, 0px)); transition: transform .45s var(--ease-out); }
.ph:nth-child(1) { --r: -5deg; --y: 30px; }
.ph:nth-child(2) { --r: 3deg;  --y: -10px; }
.ph:nth-child(3) { --r: 0deg;  --y: 0px; width: clamp(180px, 18vw, 262px); }
.ph:nth-child(4) { --r: -3deg; --y: -16px; }
.ph:nth-child(5) { --r: 5deg;  --y: 24px; }
.ph:hover, .ph.is-live { --r: 0deg; --y: -12px; }

.ph__tag {
  margin: 0; padding: 5px 14px; border-radius: 999px;
  background: var(--note); border: 1.5px solid var(--ink);
  font-size: .82rem; font-weight: 700; white-space: nowrap;
  box-shadow: 2px 3px 0 var(--ink);
}
.ph:nth-child(odd) .ph__tag { background: var(--ink); color: var(--paper); }

.handset {
  position: relative; display: block; width: 100%; padding: 7px;
  aspect-ratio: 9 / 19; border: 0; border-radius: 32px; cursor: pointer;
  background: linear-gradient(145deg, #2e2d4d, var(--ink) 40%);
  box-shadow: inset 0 0 0 1.5px #55537a, 8px 12px 0 rgba(28,27,51,.18);
}
.handset::before { /* the camera island */
  content: ""; position: absolute; z-index: 3; top: 14px; left: 50%; translate: -50% 0;
  width: 30%; height: 15px; border-radius: 10px; background: #000;
}
.handset__screen { position: relative; display: block; width: 100%; height: 100%; border-radius: 25px; overflow: hidden; background: #000; }
.handset video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* camera viewfinder overlay */
.vf { position: absolute; inset: 0; pointer-events: none; font-family: var(--f-osd); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.vf__corners { position: absolute; inset: 34px 12px 30px; }
.vf__corners::before, .vf__corners::after {
  content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.85);
}
.vf__corners::before { top: 0; left: 0; border-right: 0; border-bottom: 0; box-shadow: none; }
.vf__corners::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.vf__rec { position: absolute; top: 40px; left: 18px; font-size: 1.05rem; line-height: 1; display: flex; align-items: center; gap: 5px; }
.vf__rec i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: blink 1.2s steps(2) infinite; }
.vf__tc { position: absolute; top: 40px; right: 18px; font-size: 1.05rem; line-height: 1; }
.vf__bar { position: absolute; left: 12px; right: 12px; bottom: 14px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.3); overflow: hidden; }
.vf__bar i { display: block; height: 100%; width: 0; background: #fff; }
.vf__snd {
  position: absolute; right: 12px; bottom: 26px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(0,0,0,.45);
}
.vf__snd svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.vf__snd .snd-on { display: none; }
.ph.is-live .vf__snd { background: var(--red); }
.ph.is-live .vf__snd .snd-on { display: inline; }
.ph.is-live .vf__snd .snd-off { display: none; }
.ph.is-live .handset { box-shadow: inset 0 0 0 1.5px #55537a, 0 0 0 3px var(--red), 8px 12px 0 rgba(28,27,51,.18); }

.ph__cap { margin: 0; text-align: center; font-family: var(--f-hand); font-size: 1.2rem; line-height: 1.1; }
.ph__cap a { display: block; margin-top: 3px; font-family: var(--f-body); font-size: .78rem; color: var(--ink-soft); }

@media (max-width: 1000px) {
  .brands__with { position: static; margin-top: 6px; }
  .phones { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1);
    padding: 40px var(--gutter) 30px; }
  .phones::-webkit-scrollbar { display: none; }
  .ph, .ph:nth-child(3) { flex: 0 0 auto; width: min(56vw, 230px); scroll-snap-align: center; }
  .brands__w2 { position: static; display: block; text-align: right; }
  .brands__more { position: static; text-align: right; margin-top: 4px; }
  .brands { padding-bottom: 8vh; }
}

/* ======================= FILM COUNTDOWN INTRO ======================= */
@property --sweep { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.leader {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: #2a2826;
  cursor: pointer;
  animation: leader-flicker .16s steps(2) infinite;
}
.no-leader .leader { display: none; }
.leader.is-done { animation: leader-out .45s steps(5) forwards; pointer-events: none; }
@keyframes leader-flicker { 50% { background: #312e2b; } }
@keyframes leader-out { 0% { background: #fff; } 30% { background: #fff; opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
.leader::before { /* film grain */
  content: ""; position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.35'/%3E%3C/svg%3E");
  animation: grain .3s steps(3) infinite; pointer-events: none;
}
@keyframes grain { 33% { transform: translate(-7%, 4%); } 66% { transform: translate(5%, -6%); } }
.leader__frame {
  position: relative; width: min(84vw, 640px); aspect-ratio: 4 / 3;
  border-radius: 6% / 8%; overflow: hidden;
  background: #8d8a84;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.25), inset 0 0 80px rgba(0,0,0,.55);
}
.leader__sweep {
  position: absolute; inset: -40%;
  background: conic-gradient(from 0deg, #5f5c57 var(--sweep), transparent 0);
  animation: sweep .42s linear infinite;
}
@keyframes sweep { from { --sweep: 0deg; } to { --sweep: 360deg; } }
.leader__marks { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #f4f1ea; stroke-width: 3; opacity: .9; }
.leader__num {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--f-display); font-size: min(40vw, 230px); line-height: 1; color: #f4f1ea;
  text-shadow: 0 0 2px #000;
}
.leader__scratch { position: absolute; top: 0; bottom: 0; left: 30%; width: 1px; background: rgba(255,255,255,.5); animation: scratch .5s steps(4) infinite; pointer-events: none; }
.leader__scratch--2 { left: 72%; width: 2px; background: rgba(0,0,0,.4); animation-duration: .7s; }
@keyframes scratch { 25% { left: 12%; } 50% { left: 66%; opacity: 0; } 75% { left: 41%; opacity: 1; } }
.leader__skip { position: absolute; bottom: 24px; left: 0; right: 0; margin: 0; text-align: center; font-family: var(--f-osd); font-size: 1.1rem; color: #cbc6bd; letter-spacing: .08em; }

/* ======================= CHANNEL ZAP ======================= */
.zap { position: fixed; inset: 0; z-index: 150; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; opacity: 0; }
.zap.is-on { opacity: .92; }
.zap-osd {
  position: fixed; z-index: 151; top: 22px; right: 26px; margin: 0;
  font-family: var(--f-osd); font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1; color: var(--phosphor);
  text-shadow: 0 0 8px rgba(124,255,155,.8), 2px 2px 0 rgba(0,0,0,.6);
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
.zap-osd.is-on { opacity: 1; }

/* ======================= REMOTE ======================= */
.remote {
  position: fixed; z-index: 90; right: clamp(12px, 2.4vw, 32px); bottom: 0;
  width: 84px;
  transform: translateY(calc(100% - 64px)) rotate(-4deg);
  transform-origin: 50% 100%;
  transition: transform .45s var(--ease-out), opacity .3s;
}
.remote.is-open { transform: translateY(-14px) rotate(-2deg); }
.remote.is-hidden { transform: translateY(110%) rotate(-4deg); opacity: 0; }
.remote__top, .remote__pad { background: var(--ink); }
.remote__top {
  display: grid; justify-items: center; gap: 6px; width: 100%;
  padding: 12px 8px 10px; border: 0; border-radius: 30px 30px 0 0; cursor: pointer;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.12);
}
.remote__led { width: 9px; height: 9px; border-radius: 50%; background: #5b1520; box-shadow: inset 0 1px 1px rgba(0,0,0,.6); }
.remote__led.is-blink { background: #ff3b52; box-shadow: 0 0 10px 2px rgba(255,59,82,.8); }
.remote__name { font-family: var(--f-osd); font-size: .95rem; line-height: 1; color: var(--paper); letter-spacing: .04em; white-space: nowrap; }
.remote__pad { padding: 4px 9px 18px; border-radius: 0 0 22px 22px; box-shadow: 8px 10px 0 rgba(28,27,51,.18); }
.remote__keys { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.key {
  display: grid; justify-items: center; padding: 5px 0 4px; border-radius: 10px;
  background: #F3E9CF; color: var(--ink); text-decoration: none;
  box-shadow: 0 3px 0 #b9ac88; transition: transform .08s, box-shadow .08s, background .15s;
}
.key b { font-family: var(--f-osd); font-weight: 400; font-size: 1.35rem; line-height: .9; }
.key span { font-size: .58rem; font-weight: 700; letter-spacing: .02em; line-height: 1.2; }
.key:hover { background: #fff; }
.key:active, .key.is-pressed { transform: translateY(3px); box-shadow: 0 0 0 #b9ac88; }
.key[aria-current="true"] { background: var(--yellow); }
.key--off { background: var(--red); color: #fff; box-shadow: 0 3px 0 var(--red-dark); }
.remote__rocker { display: grid; gap: 5px; margin-top: 10px; }
.remote__rocker button {
  padding: 5px 0; border: 0; border-radius: 8px; cursor: pointer;
  background: #3a3963; color: var(--paper); font-family: var(--f-osd); font-size: 1rem; line-height: 1;
  box-shadow: 0 3px 0 #0f0e20;
}
.remote__rocker button:active { transform: translateY(3px); box-shadow: none; }
.remote__tip { margin: 10px 0 0; text-align: center; font-size: .6rem; color: #a7a3c7; }
@media (pointer: coarse) { .remote__tip { display: none; } }

/* ======================= VHS CV ======================= */
.vhs {
  position: relative; display: block; width: min(340px, 100%); height: 150px; margin-top: 38px;
  text-decoration: none; color: inherit;
}
.vhs__sleeve, .vhs__tape { position: absolute; top: 0; height: 128px; }
.vhs__sleeve {
  left: 0; width: 230px; z-index: 2; overflow: hidden;
  background: var(--note); border: 2.5px solid var(--ink); border-radius: 4px;
  box-shadow: 6px 8px 0 rgba(28,27,51,.15);
  transform: rotate(-3deg); transition: transform .4s var(--ease-out);
}
.vhs__stripes {
  position: absolute; right: -10px; top: 0; bottom: 0; width: 90px;
  background: linear-gradient(90deg, var(--red) 0 25%, var(--yellow) 25% 50%, var(--cobalt) 50% 75%, var(--ink) 75%);
  transform: skewX(-14deg);
}
.vhs__title { position: absolute; left: 14px; top: 14px; font-family: var(--f-display); font-size: 1.65rem; line-height: .95; }
.vhs__sub { position: absolute; left: 14px; bottom: 12px; font-family: var(--f-osd); font-size: 1.05rem; letter-spacing: .06em; color: var(--ink-soft); }
.vhs__tape {
  left: 40px; width: 220px; z-index: 1;
  background: #1a1930; border-radius: 6px;
  box-shadow: inset 0 0 0 2px #000, inset 0 6px 0 rgba(255,255,255,.08);
  transform: translateX(26px) rotate(-1deg);
  transition: transform .55s var(--ease-out);
}
.vhs__window {
  position: absolute; left: 50%; top: 20px; translate: -50% 0;
  width: 128px; height: 44px; border-radius: 6px;
  background: #2e2c4a; box-shadow: inset 0 0 0 2px #0b0a17;
  display: flex; justify-content: space-around; align-items: center;
}
.vhs__reel {
  width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle, #f3e9cf 0 5px, #6d6a8f 5px 7px, #3a3858 7px);
  position: relative;
}
.vhs__reel::after { /* spokes */
  content: ""; position: absolute; inset: 9px; border-radius: 50%;
  background: repeating-conic-gradient(#f3e9cf 0 12deg, transparent 12deg 60deg);
}
.vhs__label {
  position: absolute; left: 14px; right: 14px; bottom: 12px;
  padding: 4px 8px; background: #fff; border-radius: 2px;
  font-family: var(--f-hand); font-size: 1rem; line-height: 1.05; color: var(--ink);
}
.vhs__label small { font-size: .78rem; color: var(--red); }
.vhs:hover .vhs__tape, .vhs:focus-visible .vhs__tape { transform: translateX(120px) rotate(2deg); }
.vhs:hover .vhs__sleeve, .vhs:focus-visible .vhs__sleeve { transform: rotate(-5deg) translateX(-6px); }
.vhs:hover .vhs__reel, .vhs:focus-visible .vhs__reel { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.vhs__hint { margin: 4px 0 0; font-size: 1.15rem; color: var(--red); transform: rotate(-2deg); }
@media (hover: none) { .vhs__tape { transform: translateX(90px) rotate(2deg); } }
@media (max-width: 420px) { .vhs { transform: scale(.88); transform-origin: 0 0; } }

/* phones fall back to a poster + badge when autoplay is blocked or Data Saver is on */
.vf__tap {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  display: none; flex-direction: column; align-items: center; gap: 6px;
  font-family: var(--f-hand); font-size: 1.1rem; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8);
}
.vf__tap svg { width: 54px; height: 54px; padding: 12px 10px 12px 14px; border-radius: 50%; background: var(--red); fill: #fff; box-shadow: 0 4px 0 var(--red-dark); }
.ph.needs-tap .vf__tap { display: flex; }
.ph.needs-tap .vf__rec i { animation: none; opacity: .4; }

/* =========================================================
   PHONE OPTIMISATION — keep this block last so it wins
   ========================================================= */
.section-title, .brands__title, .off__big { text-wrap: balance; }
.swipe-hint { display: none; }

@media (max-width: 1000px), (pointer: coarse) {
  /* notes can't be dragged on touch screens, so let the page scroll through them */
  .piece { touch-action: auto; cursor: default; user-select: auto; -webkit-user-select: auto; }
}

@media (max-width: 760px) {
  :root { --gutter: 18px; }
  body { font-size: 1rem; line-height: 1.6; }

  /* tighter vertical rhythm: less thumb-scrolling between sections */
  .hero__grid { padding-top: 2vh; padding-bottom: 4vh; gap: 12px; }
  .hero__scroll { margin-top: 1.1em; }
  .hero__tv { margin-top: 64px; }
  .about { padding: 9vh var(--gutter) 6vh; }
  .desk { margin-top: 18px; gap: 30px 18px; }
  .reel__sticky { padding: 7vh 0 6vh; gap: 3vh; }
  .brands { padding: 9vh var(--gutter) 6vh; }
  .phones { margin-top: 2vh; margin-bottom: 0; padding-top: 34px; }
  .schedule { padding: 8vh 14px 6vh; }
  .guide { padding: 24px 18px; box-shadow: 6px 8px 0 var(--cobalt); }
  .slot { padding: 20px 0; }
  .slot__time { font-size: 1.3rem; }
  .skills { padding: 6vh var(--gutter) 9vh; }
  .skills__hint { margin-bottom: 24px; }
  .contact { padding: 6vh var(--gutter) 8vh; gap: 10px; }
  .off { padding: 8vh var(--gutter) calc(8vh + 70px); }

  /* side-scrolling rows: say so, and give the first item room */
  .swipe-hint {
    display: flex; align-items: center; gap: 8px; margin: 0;
    font-family: var(--f-hand); font-size: 1.15rem; transform: rotate(-2deg);
  }
  .swipe-hint::after { content: ""; width: 34px; height: 2px; background: currentColor; box-shadow: 6px 0 0 -0px currentColor; animation: nudge 1.6s steps(4) infinite; }
  @keyframes nudge { 50% { transform: translateX(8px); } }
  .reel .swipe-hint { color: var(--yellow); padding: 0 var(--gutter); }
  .brands .swipe-hint { color: var(--cobalt); margin-top: 14px; }
  .frame { width: 76vw; }
  .ph { --r: 0deg !important; --y: 0px !important; }
  .ph:nth-child(odd) { --r: -2deg !important; }
  .ph:nth-child(even) { --r: 2deg !important; }
  .phones { padding-left: calc(var(--gutter) + 8px); padding-right: calc(var(--gutter) + 8px); scroll-padding: 0 var(--gutter); }

  /* bigger tap targets */
  .contact__links { gap: 4px; }
  .contact__links a { display: inline-flex; align-items: center; min-height: 44px; }
  .ph__cap a { display: flex; justify-content: center; align-items: center; min-height: 40px; font-size: .85rem; }
  .preset { min-height: 46px; font-size: .85rem; }
  .knob { width: 58px; height: 58px; }

  /* contact phone sits centred under the text */
  .phone { height: 380px; margin: 0 auto; width: 100%; max-width: 420px; }
  .phone__base { translate: -50% 0; width: 230px; }
  .receiver { width: 210px; }
  .phone__hint { right: 2%; top: 6%; }
  .vhs { margin-top: 26px; }

  /* film countdown fits small screens */
  .leader__frame { width: 92vw; }

  /* ---------- the remote becomes a floating button + pop-up keypad ---------- */
  .remote {
    right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    width: auto; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 10px;
    transform: none; transition: transform .35s var(--ease-out), opacity .25s;
  }
  .remote.is-open { transform: none; }
  .remote.is-hidden, .remote.is-tucked { transform: translateY(calc(100% + 30px)); opacity: 0; pointer-events: none; }
  .remote__top {
    width: 58px; height: 58px; padding: 0; border-radius: 50%;
    display: grid; place-items: center; align-content: center; gap: 3px;
    box-shadow: inset 0 3px 0 rgba(255,255,255,.12), 4px 6px 0 rgba(28,27,51,.22);
  }
  .remote__name { font-size: .8rem; }
  .remote__name::before { content: "TV"; }
  .remote__name { font-size: 0; }
  .remote__name::before { font-size: .95rem; }
  .remote__pad {
    width: min(270px, calc(100vw - 28px)); padding: 14px; border-radius: 22px;
    transform-origin: 100% 100%;
    display: none;
  }
  .remote.is-open .remote__pad { display: block; animation: pad-in .22s steps(4); }
  @keyframes pad-in { from { transform: scale(.6) rotate(4deg); opacity: 0; } }
  .remote__keys { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .key { min-height: 52px; align-content: center; padding: 4px 0; }
  .key b { font-size: 1.6rem; }
  .key span { font-size: .7rem; }
  .remote__rocker { grid-template-columns: 1fr 1fr; gap: 8px; }
  .remote__rocker button { min-height: 44px; font-size: 1.15rem; }
}

@media (max-width: 360px) {
  .name__first { font-size: 4rem; }
  .tv__body { grid-template-columns: 1fr 54px; padding: 12px; gap: 10px; }
  .knob { width: 50px; height: 50px; }
  .radio { padding: 14px; }
  .lcd__freq b { font-size: 2.4rem; }
  .lcd__station { font-size: 1.6rem; }
  .vhs { transform: scale(.84); transform-origin: 0 0; }
}
@media (max-width: 760px) { .onair { min-height: 44px; } }
@media (max-width: 360px) {
  .radio__presets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .preset { font-size: .8rem; padding-left: 2px; padding-right: 2px; }
}
@media (max-width: 760px) {
  .radio { padding: 16px; }
  .radio__presets { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .preset { font-size: .74rem; padding-left: 0; padding-right: 0; letter-spacing: -.01em; }
  .phone { height: 330px; }
  .phone__hint { top: 2%; }
}
@media (max-width: 360px) { .radio__presets { grid-template-columns: repeat(3, minmax(0, 1fr)); } .preset { font-size: .8rem; } }
@media (max-width: 760px) {
  /* "partnerships" is one long word: size it to the screen so it never spills */
  .brands__title { font-size: min(15vw, 4.4rem); }
}