/* ==========================================================================
   ACHROMATIC — styles
   Colours below come straight from the logo: six beams + phosphor white.
   ========================================================================== */

/* Fonts are bundled in assets/fonts (SIL Open Font License) — no external requests. */
@font-face {
  font-family: "Archivo"; font-style: normal; font-display: swap;
  font-weight: 100 900; font-stretch: 62% 125%;
  src: url(../assets/fonts/archivo-latin-wdth-normal.woff2) format("woff2-variations"), url(../assets/fonts/archivo-latin-wdth-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-display: swap;
  font-weight: 100 900; font-stretch: 62% 125%;
  src: url(../assets/fonts/archivo-latin-ext-wdth-normal.woff2) format("woff2-variations"), url(../assets/fonts/archivo-latin-ext-wdth-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "VT323"; font-style: normal; font-display: swap; font-weight: 400;
  src: url(../assets/fonts/vt323-latin-400-normal.woff2) format("woff2");
}

:root {
  /* base */
  --ink: #060508;          /* screen black */
  --ink-2: #0e0b10;
  --cab: #1b1612;          /* TV cabinet plastic */
  --cab-hi: #2e261f;
  --phos: #f6eedb;         /* warm phosphor white (the wordmark) */
  --dim: #a89f90;
  --line: rgba(246, 238, 219, .12);

  /* the six beams */
  --red: #ff3b30;
  --orange: #ff8c1a;
  --yellow: #ffd60a;
  --green: #2ee86a;
  --blue: #2f9bff;
  --violet: #a35cff;
  --signal: #ff4a22;       /* "FILM PRODUCTION" red */

  /* phosphor accents for UI states */
  --term: #46ff8f;         /* terminal green */
  --amber: #ffb020;        /* VFD / tape counter */
  --cyan: #3ce6ff;         /* keyboard focus */

  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --crt: "VT323", ui-monospace, "Courier New", monospace;

  --nav-h: 64px;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1320px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(1200px 700px at 70% -10%, rgba(255, 140, 26, .07), transparent 60%),
    radial-gradient(900px 600px at 0% 20%, rgba(47, 155, 255, .05), transparent 60%),
    var(--ink);
  color: var(--phos);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, canvas, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 800; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 2000; background: var(--phos); color: var(--ink); padding: 8px 14px; }
.skip:focus { left: 8px; }
.noscript { padding: 120px 24px; text-align: center; }

/* ---------- global scanline overlay (toggle) ---------- */
html.scan body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 3000;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.16) 2px 3px);
  mix-blend-mode: multiply;
  animation: roll 9s linear infinite;
}
@keyframes roll { to { background-position: 0 30px; } }

/* ---------- shared type ---------- */
.section-title {
  font-size: clamp(2.1rem, 5.2vw, 4.2rem);
  line-height: .98;
  font-variation-settings: "wdth" 125;
  font-weight: 800;
  letter-spacing: -.01em;
  text-shadow: 0 0 18px rgba(246, 238, 219, .28);
  text-wrap: balance;
}
.section-head {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: 12px 40px; margin-bottom: 36px;
}
.section-note { margin: 0; color: var(--dim); max-width: 38ch; }

section { padding: clamp(72px, 10vw, 140px) var(--gutter); max-width: var(--max); margin: 0 auto; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  border: 1px solid rgba(246, 238, 219, .35);
  border-radius: 999px;
  background: transparent;
  text-decoration: none;
  font-weight: 650;
  font-variation-settings: "wdth" 110;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.btn:hover { border-color: var(--phos); box-shadow: 0 0 22px rgba(246,238,219,.18); }
.btn--primary { background: var(--phos); color: var(--ink); border-color: var(--phos); }
.btn--primary::before {
  content: ""; width: 0; height: 0;
  border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.btn--primary:hover { box-shadow: 0 0 30px rgba(246,238,219,.45); }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 900;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 24px;
  padding: 0 var(--gutter);
  padding-top: env(safe-area-inset-top);
  background: rgba(6, 5, 8, .72);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  border-bottom: 1px solid var(--line);
}
.nav__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.nav__mark { width: 58px; height: 29px; filter: drop-shadow(0 0 4px rgba(255,255,255,.25)); }
.nav__word {
  font-weight: 850; font-size: 19px; text-transform: uppercase; letter-spacing: .02em;
  font-variation-settings: "wdth" 125;
  text-shadow: 0 0 10px rgba(246,238,219,.55), 0 0 1px #fff;
}
.nav__links { display: flex; gap: 6px; }
.nav__links a {
  position: relative; display: inline-block;
  padding: 8px 12px; text-decoration: none; font-weight: 600;
  font-variation-settings: "wdth" 112;
  color: rgba(246, 238, 219, .82);
}
.nav__links a:hover { color: var(--phos); }
/* glitch: two colour-separated copies flicker in on hover */
.nav__links a::before, .nav__links a::after {
  content: attr(data-text);
  position: absolute; inset: 0; padding: inherit;
  opacity: 0; pointer-events: none;
}
.nav__links a::before { color: var(--red); }
.nav__links a::after  { color: var(--cyan); }
.nav__links a:hover::before { opacity: .85; animation: glitchA .45s steps(2) 1; }
.nav__links a:hover::after  { opacity: .85; animation: glitchB .45s steps(2) 1; }
.nav__links a:hover::before, .nav__links a:hover::after { animation-fill-mode: forwards; }
@keyframes glitchA {
  0%   { transform: translate(-3px, 0);  clip-path: inset(0 0 60% 0); }
  25%  { transform: translate(3px, -1px); clip-path: inset(40% 0 20% 0); }
  50%  { transform: translate(-2px, 1px); clip-path: inset(70% 0 0 0); }
  75%  { transform: translate(1px, 0);   clip-path: inset(10% 0 70% 0); }
  100% { transform: translate(0, 0); opacity: 0; clip-path: inset(0); }
}
@keyframes glitchB {
  0%   { transform: translate(3px, 0);   clip-path: inset(50% 0 10% 0); }
  25%  { transform: translate(-3px, 1px); clip-path: inset(0 0 70% 0); }
  50%  { transform: translate(2px, -1px); clip-path: inset(30% 0 40% 0); }
  75%  { transform: translate(-1px, 0);  clip-path: inset(80% 0 0 0); }
  100% { transform: translate(0, 0); opacity: 0; clip-path: inset(0); }
}

.nav__toggles { display: flex; align-items: center; gap: 8px; }
.toggle {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255,255,255,.03);
  font-size: 13px; font-weight: 600; color: var(--dim);
}
.toggle:hover { color: var(--phos); border-color: rgba(246,238,219,.3); }
.toggle__lamp {
  width: 8px; height: 8px; border-radius: 50%;
  background: #3a2c22; box-shadow: inset 0 0 2px #000;
  transition: background .2s, box-shadow .2s;
}
.toggle[aria-pressed="true"] { color: var(--phos); }
.toggle[aria-pressed="true"] .toggle__lamp { background: var(--amber); box-shadow: 0 0 8px var(--amber), 0 0 2px #fff; }

.nav__burger { display: none; }

/* ==========================================================================
   TV (shared by hero, grid sets and the player)
   ========================================================================== */
.tv {
  position: relative;
  display: grid; grid-template-columns: 1fr auto; gap: clamp(12px, 1.6vw, 22px);
  padding: clamp(12px, 1.8vw, 24px);
  border-radius: clamp(18px, 2.4vw, 30px);
  background:
    linear-gradient(160deg, rgba(255,255,255,.06), transparent 30%),
    linear-gradient(170deg, var(--cab-hi), var(--cab) 45%, #0c0907);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -4px 0 rgba(0,0,0,.5),
    0 40px 90px rgba(0,0,0,.65),
    0 2px 0 #050403;
}
.tv__screen {
  padding: clamp(6px, .9vw, 12px);
  border-radius: clamp(16px, 2vw, 26px);
  background: #030203;
  box-shadow: inset 0 0 0 2px #000, inset 0 8px 22px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.04);
}
.tv__crt {
  position: relative; isolation: isolate;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 7% / 11%;            /* curved tube corners */
  background: #000;
  box-shadow: 0 0 50px rgba(246, 238, 219, .07);
}
.tv__crt video, .tv__crt img, .tv__crt iframe, .player__media > * {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  border: 0;
}
.tv__crt video { filter: saturate(1.12) contrast(1.06); }
/* fine tube scanlines + RGB mask */
.tv__crt::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,.0) 0 1px, rgba(0,0,0,.28) 1px 2px, rgba(0,0,0,0) 2px 3px),
    repeating-linear-gradient(to right, rgba(255,0,0,.035) 0 1px, rgba(0,255,0,.03) 1px 2px, rgba(0,0,255,.035) 2px 3px);
}
/* vignette + glass glare */
.tv__crt::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    radial-gradient(120% 130% at 50% 50%, transparent 58%, rgba(0,0,0,.6) 100%),
    linear-gradient(165deg, rgba(255,255,255,.10), rgba(255,255,255,0) 32%),
    radial-gradient(60% 40% at 30% 12%, rgba(255,255,255,.06), transparent 70%);
}

/* static noise canvas */
.static {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  image-rendering: pixelated;
  opacity: 0; transition: opacity .12s;
  pointer-events: none;
}
.static.is-on { opacity: 1; }

/* on-screen display */
.osd {
  position: absolute; z-index: 5;
  font-family: var(--crt);
  font-size: clamp(18px, 2.3vw, 32px);
  line-height: 1;
  color: #eaffef;
  text-shadow: 0 0 6px var(--term), 0 0 14px rgba(70,255,143,.6), 2px 0 rgba(255,59,48,.5), -2px 0 rgba(60,230,255,.45);
  pointer-events: none;
  letter-spacing: .04em;
  transition: opacity .3s;
}
.osd--tl { top: 7%; left: 6%; }
.osd--tr { top: 7%; right: 6%; }
.osd--bl { bottom: 8%; left: 6%; font-size: clamp(16px, 1.8vw, 26px); }
.osd.is-hidden { opacity: 0; }

/* CRT power on / off */
.is-powering-on { animation: crtOn .75s var(--ease) both; }
.is-powering-off { animation: crtOff .45s cubic-bezier(.6,0,.9,.4) both; }
@keyframes crtOn {
  0%   { transform: scale(.02, .006); filter: brightness(8) saturate(0); }
  30%  { transform: scale(1, .006);   filter: brightness(7) saturate(0); }
  62%  { transform: scale(1, 1.02);   filter: brightness(2.2) saturate(.6); }
  100% { transform: none; filter: none; }
}
@keyframes crtOff {
  0%   { transform: none; filter: none; }
  50%  { transform: scale(1, .006); filter: brightness(6) saturate(0); }
  100% { transform: scale(0, .006); filter: brightness(10) saturate(0); }
}
/* glitch jitter when a picture changes */
.is-glitching > video, .is-glitching > img, .is-glitching .player__media { animation: jitter .32s steps(3) 1; }
@keyframes jitter {
  0%   { transform: translate(0,0); }
  20%  { transform: translate(-6px, 2px) skewX(6deg); filter: hue-rotate(60deg) saturate(2); }
  45%  { transform: translate(5px, -2px) skewX(-4deg); filter: hue-rotate(-40deg); }
  70%  { transform: translate(-3px, 0) scaleY(1.02); }
  100% { transform: none; filter: none; }
}

/* ==========================================================================
   HERO SET — a mid-70s "solid state" colour receiver in a wooden console:
   brushed-stainless front, dark-grey screen mask, chrome tuning knobs.
   Textures are generated (SVG noise), so there is nothing to download.
   ========================================================================== */
.crt-set {
  grid-column: 2; grid-row: 1; z-index: 1;
  position: relative;
  margin-top: clamp(8px, 1.5vw, 24px);
  --wood: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='320'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0035 .22' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .05 0 0 0 0 .02 1.9 0 0 0 -.62'/%3E%3C/filter%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .5' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .85 0 0 0 0 .55 0 0 0 0 .3 0 1.6 0 0 -.78'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' fill='%23532f18'/%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23l)'/%3E%3C/svg%3E");
  --steel:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0025 0.9' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.1 0 0 0 -0.42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.003 0.7' numOctaves='3' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.0 0 0 0 -0.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #dcdcd8 0%, #b9b9b4 18%, #c9c9c4 46%, #a9a9a4 74%, #bdbdb8 100%);
  --steel-v:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='400'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.0025' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.1 0 0 0 -0.42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='400'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7 0.003' numOctaves='3' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.0 0 0 0 -0.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    linear-gradient(90deg, #a8a8a3 0%, #d4d4cf 22%, #bfbfba 50%, #d9d9d4 72%, #a3a39e 100%);
}

/* wooden console surround */
.crt-set__body {
  position: relative;
  padding: clamp(8px, 1vw, 14px) clamp(12px, 1.7vw, 24px) clamp(12px, 1.6vw, 22px);
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,0) 4%, rgba(0,0,0,0) 96%, rgba(0,0,0,.5)),
    linear-gradient(180deg, rgba(255,214,170,.10), rgba(0,0,0,0) 20%, rgba(0,0,0,.35)),
    var(--wood) 0 0 / 640px 320px;
  box-shadow:
    inset 0 1px 0 rgba(255,225,190,.25),
    inset 0 0 0 1px rgba(0,0,0,.35),
    0 0 0 1px #120a05,
    0 40px 90px rgba(0,0,0,.75),
    0 0 140px rgba(255,140,60,.05);
}
/* photographic film grain over the whole set */
.crt-set__body::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 8;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85 0.85' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: .9;
}

/* brushed-stainless front */
.crt-set__front {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(126px, 11.4vw, 158px);
  grid-template-rows: auto auto;
  gap: 0 clamp(10px, 1.1vw, 16px);
  padding: clamp(12px, 1.5vw, 20px) clamp(12px, 1.5vw, 20px) 0;
  border-radius: 5px;
  background: var(--steel);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(0,0,0,.35),
    inset 1px 0 0 rgba(255,255,255,.5),
    inset -1px 0 0 rgba(0,0,0,.25),
    0 0 0 1px #2a2724,
    0 2px 3px rgba(0,0,0,.6);
}

/* the stepped steel bezel stepping down into the mask */
.crt-set__screen {
  display: flex; flex-direction: column;
  border: clamp(5px, .6vw, 8px) solid;
  border-color: #6f6f6b #9d9d98 #e2e2dd #868681;      /* recessed: top in shadow, bottom catching light */
  border-radius: clamp(14px, 1.7vw, 22px);
  background: #2b2b2b;
  box-shadow: 0 0 0 1px rgba(0,0,0,.45), 0 1px 0 1px rgba(255,255,255,.55);
}
/* dark-grey moulded mask around the tube */
.crt-set__mask {
  flex: 1; display: flex; flex-direction: column;
  padding: clamp(12px, 1.7vw, 24px) clamp(14px, 2vw, 28px);
  border-radius: clamp(10px, 1.3vw, 16px);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.9' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0.035'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.10), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #4e4e4c 0%, #383837 30%, #2b2b2a 70%, #232322 100%);
  box-shadow:
    inset 0 2px 3px rgba(0,0,0,.6),
    inset 0 -1px 0 rgba(255,255,255,.08);
}
.crt-set__recess {
  flex: 1; display: flex; flex-direction: column;
  padding: clamp(4px, .5vw, 7px);
  border-radius: clamp(12px, 1.6vw, 20px);
  background: #0a0a0a;
  box-shadow:
    inset 0 6px 10px rgba(0,0,0,.95),
    0 -1px 0 rgba(0,0,0,.6),
    0 1px 0 rgba(255,255,255,.12),          /* lower lip of the mask catching light */
    0 0 0 3px rgba(0,0,0,.18);
}

/* the picture tube: about 4:3, pillow-shaped, curved glass; grows to fill the mask */
.crt-tube {
  flex: 1;
  aspect-ratio: 4 / 3;
  border-radius: 9% / 12%;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M10 1.2C30 .2 70 .2 90 1.2 96.5 1.6 98.4 3.5 98.8 10 99.8 30 99.8 70 98.8 90 98.4 96.5 96.5 98.4 90 98.8 70 99.8 30 99.8 10 98.8 3.5 98.4 1.6 96.5 1.2 90 .2 70 .2 30 1.2 10 1.6 3.5 3.5 1.6 10 1.2Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M10 1.2C30 .2 70 .2 90 1.2 96.5 1.6 98.4 3.5 98.8 10 99.8 30 99.8 70 98.8 90 98.4 96.5 96.5 98.4 90 98.8 70 99.8 30 99.8 10 98.8 3.5 98.4 1.6 96.5 1.2 90 .2 70 .2 30 1.2 10 1.6 3.5 3.5 1.6 10 1.2Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  background: #0c0e0d;                         /* unlit phosphor face */
  box-shadow: none;
}
.crt-tube video { filter: saturate(1.22) contrast(1.1) brightness(1.06) blur(.35px); }
/* the second (pre-loading) picture waits out of sight */
.crt-tube video.is-standby { opacity: 0; visibility: hidden; }
.crt-tube::before { animation: flick .14s steps(2) infinite; }
@keyframes flick { 50% { opacity: .82; } }
.crt-tube .osd { z-index: 5; }
.crt-tube .osd--tl { top: 9%; left: 9%; }
.crt-tube .osd--bl { top: calc(9% + clamp(22px, 2.8vw, 38px)); bottom: auto; left: 9%; }

/* slow bright band rolling down the tube */
.crt-tube__roll {
  position: absolute; left: 0; right: 0; top: -25%; height: 25%; z-index: 4; pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.05) 50%, transparent);
  animation: rollbar 7.5s linear infinite;
}
@keyframes rollbar { to { transform: translateY(500%); } }

/* convex glass: room reflection, streak, edge fall-off */
.crt-tube__glass {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background:
    radial-gradient(ellipse 72% 42% at 30% 4%, rgba(255,255,255,.17), rgba(255,255,255,.05) 45%, transparent 72%),
    linear-gradient(118deg, transparent 60%, rgba(255,255,255,.045) 64%, transparent 71%),
    radial-gradient(ellipse 125% 125% at 50% 48%, transparent 50%, rgba(0,0,0,.32) 76%, rgba(0,0,0,.85) 100%);
  box-shadow: inset 0 0 26px 8px rgba(0,0,0,.7), inset 0 2px 1px rgba(255,255,255,.08);
}

/* switched off: picture gone, glass and reflections stay */
.crt-tube.is-off > video, .crt-tube.is-off > canvas, .crt-tube.is-off > .osd, .crt-tube.is-off > .crt-tube__roll { visibility: hidden; }



/* side-by-side layout: the tube stretches to fill the mask like a real set */
@media (min-width: 701px) {
  .crt-set .crt-tube { aspect-ratio: auto; min-height: 200px; }
}
@media (max-width: 1180px) {
  .crt-plate i, .crt-plate span:last-child { display: none; }
}

/* ---------- right-hand control column ---------- */
.crt-set__panel {
  position: relative;
  display: flex; flex-direction: column; align-items: stretch; gap: clamp(8px, 1vw, 12px);
  padding: 8px 9px 10px;
  margin-bottom: clamp(10px, 1.2vw, 14px);
  border-radius: 3px;
  background: var(--steel-v);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.55),                 /* groove around the panel */
    0 0 0 2px rgba(255,255,255,.5),
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -1px 0 rgba(0,0,0,.25);
}
.crt-engrave {
  display: block;
  font-size: 7.5px; line-height: 1.15; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #3b3935;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
  text-align: center; white-space: nowrap;
}

/* black name plate with silver lettering, red pilot lamp beside it */
.crt-plate {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  margin-right: 26px;
  padding: 3px 5px; border-radius: 2px;
  background: linear-gradient(180deg, #2a2927, #0f0f0e);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 0 rgba(255,255,255,.7), 0 -1px 0 rgba(0,0,0,.35);
}
.crt-plate span {
  font-size: 6.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  font-variation-settings: "wdth" 100;
  background: linear-gradient(180deg, #ffffff, #a7a7a2 55%, #e8e8e3);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  white-space: nowrap;
}
.crt-plate i { width: 1px; align-self: stretch; background: rgba(255,255,255,.35); }
.crt-lamp {
  position: absolute; top: 8px; right: 8px;
  width: 20px; height: 11px; border-radius: 3px;
  background: linear-gradient(180deg, #5a1712, #2c0907);
  box-shadow: 0 0 0 1px #3a3936, 0 0 0 2px #d9d9d4, inset 0 1px 2px rgba(0,0,0,.7);
  transition: background .25s, box-shadow .25s;
}
.crt-lamp.is-on {
  background: radial-gradient(70% 90% at 35% 30%, #ffd2c8, #ff3b2a 40%, #b4140a 100%);
  box-shadow: 0 0 0 1px #3a3936, 0 0 0 2px #d9d9d4, 0 0 10px rgba(255,59,42,.85), 0 0 22px rgba(255,59,42,.45);
}
.crt-engrave--aft { position: absolute; top: 24px; right: 7px; font-size: 6.5px; text-align: right; }

/* tuner: vertical indicator window + two chrome detent knobs */
.crt-tuner { display: grid; grid-template-columns: auto 1fr; gap: 6px; align-items: stretch; margin-top: 8px; }
.crt-window {
  width: clamp(34px, 3vw, 40px);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 7px 0;
  border-radius: 3px;
  background: linear-gradient(90deg, #060606, #1d1d1d 50%, #0a0a0a);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,255,255,.04), 0 1px 0 rgba(255,255,255,.7), 0 -1px 0 rgba(0,0,0,.35);
}
.crt-window__lab {
  font-size: clamp(9px, .8vw, 11px); line-height: 1; font-weight: 800; letter-spacing: .06em;
  color: #b9b9b4; text-shadow: 0 0 2px rgba(255,255,255,.2);
}
.crt-window__num {
  font-family: var(--crt); font-size: clamp(26px, 2.4vw, 34px); line-height: .9; letter-spacing: -.03em;
  color: #ff4632; text-shadow: 0 0 6px rgba(255,70,50,.95), 0 0 16px rgba(255,70,50,.5);
}
.crt-tuner__knobs { display: grid; gap: clamp(8px, 1vw, 12px); justify-items: center; }

/* big chrome knob: polished bezel, knurled skirt, glossy cap, pointer lever */
.crt-bigknob {
  --kd: clamp(64px, 6vw, 82px);
  --rot: -60deg;
  position: relative; width: var(--kd); height: var(--kd);
  padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
}
.crt-bigknob::before {                      /* chrome escutcheon */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background:
    repeating-radial-gradient(circle, rgba(255,255,255,.07) 0 1px, rgba(0,0,0,.05) 1px 2px),
    conic-gradient(from 210deg, #7d7d79, #f6f6f2 12%, #9a9a95 26%, #e9e9e4 40%, #6f6f6b 55%, #fafaf6 70%, #8c8c87 84%, #7d7d79);
  box-shadow: 0 0 0 1px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.5);
}
.crt-bigknob__skirt {
  position: absolute; inset: 11%; border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.55), rgba(255,255,255,0) 45%),
    repeating-conic-gradient(#f3f3ef 0 4deg, #8e8e89 4deg 8deg);
  box-shadow: 0 5px 8px rgba(0,0,0,.55), 0 2px 0 rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.25);
}
.crt-bigknob__cap {
  position: absolute; inset: 27%; border-radius: 50%;
  background:
    radial-gradient(circle at 38% 30%, rgba(255,255,255,.75), rgba(255,255,255,0) 30%),
    radial-gradient(circle at 50% 60%, #2e2e2d, #0b0b0b 75%);
  box-shadow: inset 0 0 0 2px rgba(220,220,215,.9), inset 0 -2px 4px rgba(0,0,0,.7), 0 1px 1px rgba(255,255,255,.4);
}
.crt-bigknob__lever {                        /* the chrome bar that points at the channel */
  position: absolute; left: 50%; top: 50%;
  width: 58%; height: 7px; margin-top: -3.5px;
  transform-origin: 0 50%;
  transform: rotate(var(--rot));
  border-radius: 1px 4px 4px 1px;
  background: linear-gradient(180deg, #ffffff, #b9b9b4 45%, #6c6c68 55%, #d4d4cf);
  box-shadow: 0 3px 4px rgba(0,0,0,.55);
  transition: transform .38s cubic-bezier(.3, 1.6, .5, 1);
}
.crt-bigknob__lever::after {                  /* red index tip */
  content: ""; position: absolute; right: 2px; top: 2px; width: 6px; height: 3px; border-radius: 1px; background: #d4321f;
}
.crt-bigknob:active .crt-bigknob__skirt { box-shadow: 0 2px 4px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.25); }
.crt-bigknob--b { --rot: 150deg; }

/* small spun-aluminium knobs */
.crt-small { display: flex; justify-content: space-around; gap: 6px; }
.crt-small__ctl { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.crt-minknob {
  --k: -140deg;
  position: relative; width: clamp(30px, 2.8vw, 36px); height: clamp(30px, 2.8vw, 36px);
  padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background:
    radial-gradient(circle, rgba(0,0,0,0) 0 54%, #e9e9e4 55%, #8d8d88 66%, #5b5b57 72%, rgba(0,0,0,0) 73%),
    repeating-conic-gradient(#e4e4df 0 5deg, #7c7c77 5deg 10deg);
  box-shadow: 0 4px 6px rgba(0,0,0,.5), 0 1px 0 rgba(0,0,0,.4);
}
.crt-minknob::before {                         /* machined face */
  content: ""; position: absolute; inset: 22%; border-radius: 50%;
  background:
    repeating-radial-gradient(circle, rgba(255,255,255,.12) 0 1px, rgba(0,0,0,.06) 1px 2px),
    conic-gradient(from 200deg, #8a8a85, #fbfbf7 14%, #a3a39e 30%, #ececE7 46%, #7e7e79 62%, #f4f4ef 78%, #8a8a85);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.3);
}
.crt-minknob span {
  position: absolute; inset: 22%; border-radius: 50%;
  transform: rotate(var(--k)); transition: transform .4s cubic-bezier(.3, 1.4, .5, 1);
}
.crt-minknob span::after {
  content: ""; position: absolute; top: 4%; left: 50%; width: 2px; height: 38%; margin-left: -1px; border-radius: 1px;
  background: #1d1c1a;
}
.crt-minknob[aria-pressed="true"] { --k: 40deg; }
.crt-minknob:active { box-shadow: 0 2px 3px rgba(0,0,0,.5); }
/* volume knob: press and turn. Bigger invisible grip area for fingers; no page scroll while turning */
.crt-minknob--vol { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.crt-minknob--vol::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; }
.crt-minknob--vol span { transition: transform .12s ease-out; }
.crt-minknob--vol.is-turning span { transition: none; }
.crt-minknob--vol.is-turning { box-shadow: 0 2px 3px rgba(0,0,0,.5), 0 0 0 3px rgba(255,176,32,.35); }
/* old-TV volume bar along the bottom of the picture */
.crt-tube .osd--vol {
  left: 50%; bottom: 9%; top: auto; transform: translateX(-50%);
  white-space: nowrap; letter-spacing: 0;
  font-size: clamp(14px, 1.7vw, 22px);
}

/* R G B indicator strip */
.crt-rgb {
  display: flex; justify-content: center; gap: 5px;
  padding: 4px 6px; border-radius: 2px;
  background: linear-gradient(180deg, #1c1c1b, #0c0c0c);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.7);
}
.crt-rgb i { width: 22px; height: 6px; border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 1px rgba(0,0,0,.35); }
.crt-rgb i:nth-child(1) { background: #e45a4b; }
.crt-rgb i:nth-child(2) { background: #3fbf5a; }
.crt-rgb i:nth-child(3) { background: #4fa8e6; }

/* vertical-slot speaker grille */
.crt-speaker {
  flex: 1; min-height: 50px;
  border-radius: 2px;
  background:
    repeating-linear-gradient(90deg, #121212 0 3px, rgba(0,0,0,0) 3px 7px) 3px 0 / 100% 100% no-repeat,
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.02));
  -webkit-mask: linear-gradient(90deg, transparent 0 3px, #000 3px calc(100% - 3px), transparent calc(100% - 3px));
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
}

/* COLOR control: turn it to drain the colour out of the picture */
.crt-trim { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.crt-trim__plate {
  align-self: stretch; text-align: center;
  padding: 2px 4px; border-radius: 2px;
  background: linear-gradient(180deg, #2a2927, #111);
  font-size: 7px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #d6d6d1;
}
.crt-minknob--color { --k: 40deg; }
.crt-minknob--color[aria-pressed="false"] { --k: -140deg; }

/* black-and-white picture */
.crt-tube video, .crt-tube canvas { transition: filter .5s ease; }
.crt-tube.is-mono video { filter: grayscale(1) contrast(1.18) brightness(1.06) blur(.35px); }
.crt-tube .osd { transition: filter .5s ease; }
.crt-tube.is-mono .osd { filter: grayscale(1) brightness(1.1); }

/* chrome lip along the bottom of the front */
.crt-set__lip {
  grid-column: 1 / -1;
  position: relative;
  height: clamp(16px, 2vw, 26px);
  margin: 0 calc(-1 * clamp(12px, 1.5vw, 20px));
  border-radius: 0 0 5px 5px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0025 0.9' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.1 0 0 0 -0.42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #8e8e89 0%, #f2f2ee 18%, #c5c5c0 55%, #8f8f8a 100%);
  box-shadow: inset 0 1px 0 rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.6);
}
.crt-jack {
  position: absolute; right: 9%; top: 50%; width: 18px; height: 9px; margin-top: -4.5px;
  border-radius: 2px; background: #121212;
  box-shadow: inset 0 1px 2px #000, 0 1px 0 rgba(255,255,255,.6);
}
.crt-jack::before, .crt-jack::after {
  content: ""; position: absolute; top: 2.5px; width: 4px; height: 4px; border-radius: 50%; background: #3a3a38;
}
.crt-jack::before { left: 3px; } .crt-jack::after { right: 3px; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  min-height: 100svh;
  padding-top: calc(var(--nav-h) + clamp(14px, 2.4vw, 36px));
  padding-bottom: clamp(48px, 6vw, 80px);
  display: flex; flex-direction: column; justify-content: center; gap: clamp(28px, 4vw, 52px);
}
.hero__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 770px);
  align-items: center;
}
.beams {
  grid-column: 1; grid-row: 1;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(10px, 1.6vw, 22px);
  margin-right: -60px;               /* tuck under the TV so they "enter" the set */
  margin-left: calc(-1 * var(--gutter));
  position: relative; z-index: 0;
}
.beams i {
  display: block; height: 3px; border-radius: 3px;
  transform-origin: left center;
  animation: beam 1s var(--ease) both;
}
.beams i:nth-child(1) { background: var(--red);    box-shadow: 0 0 10px var(--red), 0 0 24px var(--red); animation-delay: .05s; }
.beams i:nth-child(2) { background: var(--orange); box-shadow: 0 0 10px var(--orange), 0 0 24px var(--orange); animation-delay: .1s; }
.beams i:nth-child(3) { background: var(--yellow); box-shadow: 0 0 10px var(--yellow), 0 0 24px var(--yellow); animation-delay: .15s; }
.beams i:nth-child(4) { background: var(--green);  box-shadow: 0 0 10px var(--green), 0 0 24px var(--green); animation-delay: .2s; }
.beams i:nth-child(5) { background: var(--blue);   box-shadow: 0 0 10px var(--blue), 0 0 24px var(--blue); animation-delay: .25s; }
.beams i:nth-child(6) { background: var(--violet); box-shadow: 0 0 10px var(--violet), 0 0 24px var(--violet); animation-delay: .3s; }
@keyframes beam { from { transform: scaleX(0); opacity: .2; } to { transform: scaleX(1); opacity: 1; } }


.hero__copy {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 24px 56px; align-items: end;
}
.hero__title {
  font-size: clamp(2.6rem, 5.6vw, 5.4rem);
  line-height: .92;
  font-weight: 850;
  font-variation-settings: "wdth" 125;
  letter-spacing: -.02em;
  /* chromatic aberration that the "lens" pulls into focus on load */
  animation: focus 1.8s .6s var(--ease) both;
}
.hero__line { display: block; }
@keyframes focus {
  from { text-shadow: -9px 0 rgba(255,59,48,.85), 9px 0 rgba(47,155,255,.85), 0 -5px rgba(255,214,10,.5), 0 0 0 transparent; filter: blur(2px); }
  to   { text-shadow: 0 0 rgba(255,59,48,0), 0 0 rgba(47,155,255,0), 0 0 rgba(255,214,10,0), 0 0 26px rgba(246,238,219,.35); filter: blur(0); }
}
.hero__intro { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: rgba(246,238,219,.86); max-width: 42ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* ==========================================================================
   WORK — tuner + grid
   ========================================================================== */
.tuner {
  display: grid;
  grid-template-columns: auto minmax(260px, 380px) 1fr;
  align-items: center; gap: 20px 28px;
  padding: 18px 22px;
  margin-bottom: 36px;
  border-radius: 20px;
  background: linear-gradient(175deg, #221c17, #120e0c);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 20px 50px rgba(0,0,0,.45);
}
.knob {
  position: relative; width: 112px; height: 112px; border-radius: 50%;
  touch-action: none; cursor: grab;
  --rot: -135deg;
}
.knob:active { cursor: grabbing; }
.knob__ticks { position: absolute; inset: 0; }
.knob__ticks span {
  position: absolute; left: 50%; top: 50%;
  width: 2px; height: 9px; margin: -56px 0 0 -1px;
  transform-origin: 1px 56px;
  border-radius: 2px;
  background: var(--c, #fff);
  box-shadow: 0 0 6px var(--c, #fff);
  opacity: .45; transition: opacity .2s;
}
.knob__ticks span.is-active { opacity: 1; }
.knob__cap {
  position: absolute; inset: 14px; border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.22), transparent 45%),
    repeating-conic-gradient(from 0deg, #3a322b 0 5deg, #1e1915 5deg 10deg);
  box-shadow: 0 6px 14px rgba(0,0,0,.7), inset 0 0 0 6px #241e19, inset 0 0 0 7px rgba(255,255,255,.08);
  transform: rotate(var(--rot));
  transition: transform .4s cubic-bezier(.3, 1.4, .5, 1);
}
.knob.is-dragging .knob__cap { transition: none; }
.knob__pointer {
  position: absolute; left: 50%; top: 9px; width: 4px; height: 22px; margin-left: -2px;
  border-radius: 2px; background: var(--phos); box-shadow: 0 0 8px var(--phos);
}
.vfd {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: 14px;
  padding: 12px 16px; border-radius: 10px;
  background: #0b0705;
  box-shadow: inset 0 2px 8px #000, 0 0 0 1px rgba(255,176,32,.12);
  font-family: var(--crt); color: var(--amber);
  text-shadow: 0 0 6px rgba(255,176,32,.8);
  line-height: 1.05;
}
.vfd__ch { grid-row: span 2; font-size: 44px; align-self: center; }
.vfd__label { font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vfd__count { font-size: 18px; opacity: .7; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255,255,255,.02);
  font-size: 14.5px; font-weight: 600; color: var(--dim);
  white-space: nowrap;
  transition: color .2s, border-color .2s, background .2s;
}
.chip::before {
  content: ""; width: 14px; height: 3px; border-radius: 2px;
  background: var(--c, var(--phos)); box-shadow: 0 0 6px var(--c, var(--phos));
  opacity: .5;
}
.chip:hover { color: var(--phos); }
.chip[aria-pressed="true"] { color: var(--phos); border-color: var(--c, var(--phos)); background: rgba(255,255,255,.05); }
.chip[aria-pressed="true"]::before { opacity: 1; }

.grid-wrap { position: relative; }
/* carousel: one row of sets that scrolls sideways and snaps to each TV */
.grid {
  --per: 3;
  --gap: clamp(18px, 2.4vw, 32px);
  list-style: none; margin: 0; padding: 4px 2px 8px;
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
  gap: var(--gap);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.grid::-webkit-scrollbar { display: none; }
.grid > li { scroll-snap-align: start; min-width: 0; }
.grid.is-empty { grid-auto-columns: 100%; }
/* VCR-style transport strip: brushed steel, chrome keys in recesses, mechanical counter */
.carousel__bar {
  --plate:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0025 0.9' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.1 0 0 0 -0.42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.003 0.7' numOctaves='3' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.0 0 0 0 -0.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #dcdcd8 0%, #b9b9b4 18%, #c9c9c4 46%, #a9a9a4 74%, #bdbdb8 100%);
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2vw, 22px);
  width: fit-content; max-width: 100%;
  margin: 26px auto 0;
  padding: 12px clamp(26px, 3vw, 34px) 26px;
  border-radius: 6px;
  background: var(--plate);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 0 0 1px #24211e,
    0 6px 14px rgba(0,0,0,.55);
}
.carousel__bar[hidden] { display: none; }
.carousel__screw {
  position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fbfbfa, #aaa59e 45%, #5d5954 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.7);
}
.carousel__screw::after {
  content: ""; position: absolute; left: 1px; right: 1px; top: 50%; height: 1.6px; margin-top: -.8px;
  background: rgba(35,31,28,.85); border-radius: 1px; transform: rotate(35deg);
}
.carousel__screw:first-child { left: 9px; }
.carousel__screw:last-child { right: 9px; }
.carousel__screw:last-child::after { transform: rotate(-20deg); }

/* chrome push key sitting in a dark recess cut into the plate */
.carousel__key {
  position: relative;
  width: clamp(70px, 7vw, 86px); height: 46px; padding: 0;
  border: 0; border-radius: 4px; cursor: pointer;
  background:
    linear-gradient(180deg, rgba(255,255,255,.9) 0, rgba(255,255,255,0) 2px),
    linear-gradient(180deg, #fbfaf7 0%, #dcd8d1 34%, #ada89f 50%, #c8c4bd 78%, #e2ded7 100%);
  box-shadow:
    0 0 0 3px #141312,                          /* the recess */
    0 0 0 4px rgba(0,0,0,.45),
    0 1px 0 4px rgba(255,255,255,.55),          /* lit lower lip of the cut-out */
    inset 0 -2px 0 rgba(0,0,0,.18),
    0 4px 0 #4a453f,                            /* key side face = travel */
    0 6px 6px rgba(0,0,0,.55);
  transition: transform .07s, box-shadow .07s;
}
.carousel__key b {
  display: block; font-size: 17px; line-height: 1; letter-spacing: -.12em;
  color: #2b2723; text-shadow: 0 1px 0 rgba(255,255,255,.75);
}
.carousel__key small {
  position: absolute; left: 0; right: 0; top: calc(100% + 11px);
  font-size: 9px; line-height: 1; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: #2f2c28; text-shadow: 0 1px 0 rgba(255,255,255,.6);
}
.carousel__key:hover b { color: #000; }
.carousel__key:active {
  transform: translateY(4px);
  box-shadow:
    0 0 0 3px #141312, 0 0 0 4px rgba(0,0,0,.45), 0 1px 0 4px rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.18), inset 0 2px 3px rgba(0,0,0,.25),
    0 0 0 #4a453f, 0 1px 2px rgba(0,0,0,.55);
}
.carousel__key:focus-visible { outline: 2px solid var(--cyan); outline-offset: 7px; }

/* mechanical tape counter: white numerals on black drums behind a small window */
.carousel__count { position: relative; display: flex; flex-direction: column; align-items: center; }
.carousel__count small {
  position: absolute; left: -10px; right: -10px; top: calc(100% + 11px); text-align: center;
  font-size: 8.5px; line-height: 1; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: #2f2c28; text-shadow: 0 1px 0 rgba(255,255,255,.6); white-space: nowrap;
}
.carousel__drums {
  display: flex; align-items: center; gap: 2px;
  padding: 4px 5px; border-radius: 3px;
  background: #0d0d0c;
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 1px 0 1px rgba(255,255,255,.6), inset 0 2px 4px rgba(0,0,0,.9);
}
.carousel__drums .d {
  display: grid; place-items: center;
  width: 19px; height: 30px; border-radius: 2px;
  font-family: var(--font); font-size: 19px; font-weight: 700; font-variation-settings: "wdth" 85; line-height: 1;
  color: #f2efe8;
  background: linear-gradient(180deg, #000 0%, #2b2a28 22%, #3a3936 50%, #2b2a28 78%, #000 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
  text-shadow: 0 -1px 0 rgba(0,0,0,.6);
}
.carousel__drums .d.is-roll { animation: drumroll .32s cubic-bezier(.3,1.4,.5,1); }
@keyframes drumroll { from { transform: translateY(-40%); opacity: .2; } to { transform: none; opacity: 1; } }
.carousel__drums .sep { width: 8px; text-align: center; color: #8d8a84; font-size: 13px; font-weight: 700; }
@media (max-width: 700px) {
  .carousel__bar { width: 100%; justify-content: space-between; padding-left: 26px; padding-right: 26px; }
  .carousel__key { width: 74px; }
}
@media (max-width: 1080px) { .grid { --per: 2; } }
@media (max-width: 700px)  { .grid { --per: 1; grid-auto-columns: 84%; } .grid > li { scroll-snap-align: center; } }
@media (prefers-reduced-motion: reduce) { .grid { scroll-behavior: auto; } }
.grid-static { border-radius: 16px; z-index: 10; }

.set__btn {
  display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left;
}
.set__btn:focus-visible { outline: none; }
.set__btn:focus-visible .set__tv { outline: 2px solid var(--cyan); outline-offset: 4px; }
.set__tv {
  padding: 10px; border-radius: 18px;
  background: linear-gradient(170deg, var(--cab-hi), var(--cab) 50%, #0c0907);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 40px rgba(0,0,0,.5);
  transition: transform .35s var(--ease), box-shadow .35s;
}
.set__tv .tv__crt { border-radius: 6% / 10%; }
.set__tv .tv__crt img { transition: filter .3s, opacity .3s; filter: saturate(.85) brightness(.82); }
.set__tv video { opacity: 0; transition: opacity .25s; }
.set.is-live .set__tv video.is-ready { opacity: 1; }
.set.is-live .set__tv .tv__crt img { filter: saturate(1.1) brightness(1); }
.set.is-live .set__tv { box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 18px 50px rgba(0,0,0,.5), 0 0 40px -10px var(--c, rgba(246,238,219,.4)); }
.set .osd { font-size: 20px; }
.set .osd--tr { opacity: 0; }
.set.is-live .osd--tr { opacity: 1; }
.set .osd--bl { font-size: 18px; bottom: 9%; left: auto; right: 6%; }
.set__cap { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 4px 0; }
.set__title {
  font-size: 1.2rem; font-weight: 750; line-height: 1.2;
  font-variation-settings: "wdth" 112;
}
.set__meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 14.5px; color: var(--dim); }
.set__meta::before {
  content: ""; width: 12px; height: 3px; border-radius: 2px; flex: none;
  background: var(--c, var(--phos)); box-shadow: 0 0 6px var(--c, var(--phos));
}
.set__cat { font-size: 14px; color: var(--dim); white-space: nowrap; }

.set--empty .set__tv { display: grid; }
.empty {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: 28px; align-items: center;
}
.empty p { color: var(--dim); max-width: 44ch; }
.empty strong { display: block; color: var(--phos); font-size: 1.5rem; font-variation-settings: "wdth" 115; margin-bottom: 6px; }

/* ==========================================================================
   STUDIO
   ========================================================================== */
.studio {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: start;
}
.studio__story { margin-top: 32px; font-size: 1.12rem; max-width: 60ch; color: rgba(246,238,219,.88); }
.studio__quote {
  position: relative;
  margin: 40px 0 0; padding: 4px 0 4px 34px;
  font-size: clamp(1.35rem, 2.2vw, 1.9rem); line-height: 1.25; font-weight: 600;
  font-variation-settings: "wdth" 80;
  max-width: 34ch;
}
/* the six beams, turned vertical, as the quote rule */
.studio__quote::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 20px;
  background: linear-gradient(to right,
    var(--red) 0 2px, transparent 2px 3.6px, var(--orange) 3.6px 5.6px, transparent 5.6px 7.2px,
    var(--yellow) 7.2px 9.2px, transparent 9.2px 10.8px, var(--green) 10.8px 12.8px, transparent 12.8px 14.4px,
    var(--blue) 14.4px 16.4px, transparent 16.4px 18px, var(--violet) 18px 20px);
  filter: drop-shadow(0 0 4px rgba(255,255,255,.3));
}
.studio__photo { margin: 0; position: sticky; top: calc(var(--nav-h) + 24px); }
.monitor {
  position: relative; padding: 14px; border-radius: 22px;
  background: linear-gradient(170deg, var(--cab-hi), var(--cab) 50%, #0c0907);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 30px 70px rgba(0,0,0,.55);
}
.monitor img { width: 100%; height: auto; border-radius: 14px; filter: contrast(1.05) saturate(.9); }
.monitor::after {
  content: ""; position: absolute; inset: 14px; border-radius: 14px; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.18) 2px 3px),
    radial-gradient(120% 100% at 50% 50%, transparent 60%, rgba(0,0,0,.45));
}
.studio__photo figcaption { margin-top: 12px; font-size: 14.5px; color: var(--dim); }

.approach { grid-column: 1 / -1; }
.approach__title { font-size: 1.15rem; font-weight: 700; font-variation-settings: "wdth" 112; margin-bottom: 20px; color: var(--dim); }
.approach__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px;
  counter-reset: step;
}
.approach__list li { counter-increment: step; padding-top: 18px; border-top: 2px solid var(--c); }
.approach__list li:nth-child(1) { --c: var(--red); }
.approach__list li:nth-child(2) { --c: var(--green); }
.approach__list li:nth-child(3) { --c: var(--blue); }
.approach__list h4 {
  margin: 0 0 8px; font-size: 1.5rem; font-weight: 800; font-variation-settings: "wdth" 120;
}
.approach__list h4::before {
  content: counter(step); font-family: var(--crt); font-weight: 400; font-size: 1.6rem;
  color: var(--c); text-shadow: 0 0 8px var(--c); margin-right: 12px;
}
.approach__list p { color: var(--dim); max-width: 38ch; }

/* ==========================================================================
   SERVICES — programme guide
   ========================================================================== */
.guide { border-top: 1px solid var(--line); }
.guide__row {
  display: grid;
  grid-template-columns: 90px minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 12px 32px; align-items: start;
  padding: 28px 8px;
  border-bottom: 1px solid var(--line);
  transition: background .25s;
}
.guide__row:hover { background: linear-gradient(90deg, rgba(255,255,255,.035), transparent 80%); }
.guide__ch {
  white-space: nowrap;
  font-family: var(--crt); font-size: 34px; line-height: 1; color: var(--c, var(--phos));
  text-shadow: 0 0 10px var(--c, var(--phos));
  opacity: .8; transition: opacity .2s;
}
.guide__row:hover .guide__ch { opacity: 1; }
.guide__name { font-size: clamp(1.3rem, 2vw, 1.65rem); font-weight: 780; line-height: 1.15; font-variation-settings: "wdth" 115; }
.guide__text { margin: 0; color: rgba(246,238,219,.82); }
.guide__deliv { list-style: none; margin: 0; padding: 0; font-size: 15px; color: var(--dim); }
.guide__deliv li { padding: 2px 0; }
.guide__link {
  display: inline-block; margin-top: 10px; padding: 0; border: 0; background: none;
  font-size: 15px; font-weight: 650; color: var(--phos);
  text-decoration: underline; text-decoration-color: var(--c); text-underline-offset: 5px; text-decoration-thickness: 2px;
}

/* ==========================================================================
   COLLABORATE — "Work with us"
   ========================================================================== */
.contact {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(36px, 5vw, 80px); align-items: start;
}
.contact__side { position: sticky; top: calc(var(--nav-h) + 32px); }
.contact__kicker {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px;
  font-family: var(--crt); font-size: 22px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--phos);
}
.onair {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 3px rgba(255,74,34,.18), 0 0 14px var(--signal);
  animation: onair 2.4s ease-in-out infinite;
}
@keyframes onair { 50% { opacity: .45; box-shadow: 0 0 0 3px rgba(255,74,34,.08), 0 0 6px var(--signal); } }
.contact__intro { margin-top: 24px; font-size: 1.12rem; color: rgba(246,238,219,.86); max-width: 42ch; }
.contact__direct { margin: 36px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 22px; }
.contact__direct dt { color: var(--dim); font-size: 15px; padding-top: 2px; }
.contact__direct dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.contact__direct a { text-decoration-color: rgba(246,238,219,.35); text-underline-offset: 4px; }
.contact__direct a:hover { text-decoration-color: var(--phos); }

/* the form sits on a green phosphor terminal, like an old studio monitor */
.terminal {
  padding: clamp(12px, 1.8vw, 22px); border-radius: 26px;
  background: linear-gradient(170deg, #2a2620, #171410 55%, #0c0a08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 40px 80px rgba(0,0,0,.6);
}
.terminal__screen {
  position: relative; overflow: hidden;
  padding: clamp(18px, 3vw, 36px);
  border-radius: 4% / 3%;
  background: radial-gradient(120% 100% at 50% 40%, #06210f, #020a05 75%);
  box-shadow: inset 0 0 60px rgba(0,0,0,.85), 0 0 50px rgba(70,255,143,.06);
  font-family: var(--crt); font-size: clamp(20px, 1.9vw, 23px); line-height: 1.25;
  color: var(--term);
  text-shadow: 0 0 6px rgba(70,255,143,.7);
}
.terminal__screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.28) 2px 3px),
    radial-gradient(120% 120% at 50% 50%, transparent 60%, rgba(0,0,0,.55));
}
.caret {
  display: inline-block; width: .6em; height: 1em; vertical-align: -0.12em; margin-left: .3em;
  background: var(--term); box-shadow: 0 0 8px var(--term);
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.collab { position: relative; display: grid; gap: clamp(22px, 2.6vw, 30px); }
.collab__head {
  margin: 0; padding-bottom: 10px;
  border-bottom: 1px dashed rgba(70,255,143,.3);
  color: rgba(70,255,143,.7); letter-spacing: .06em; text-transform: uppercase;
}
.collab__step { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 12px; }
.collab__label {
  display: flex; align-items: baseline; gap: 12px; margin: 0 0 2px; padding: 0;
  text-transform: uppercase; letter-spacing: .04em; color: #eaffef;
}
.collab__num { color: var(--amber); text-shadow: 0 0 8px rgba(255,176,32,.6); }

.collab__hint { margin: -2px 0 4px; color: rgba(70,255,143,.62); font-size: .88em; text-shadow: none; }

/* ways to collaborate: clear, bordered choices with a radio lamp; the chosen one is lit solid */
.ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.way { position: relative; cursor: pointer; display: block; min-width: 0; }
.way:last-child:nth-child(odd) { grid-column: 1 / -1; }
.way input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.way__body {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; align-content: start; gap: 3px 12px;
  height: 100%; padding: 11px 14px 12px;
  border: 1px solid rgba(70,255,143,.32); border-radius: 4px;
  background: rgba(70,255,143,.035);
  transition: background .15s, border-color .15s, box-shadow .15s, color .15s;
}
.way__lamp {
  width: 15px; height: 15px; margin-top: .22em; border-radius: 50%;
  border: 2px solid rgba(70,255,143,.75);
  box-shadow: 0 0 6px rgba(70,255,143,.35);
  display: grid; place-items: center;
}
.way__lamp::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: transparent; }
.way__title { font-weight: 400; text-transform: uppercase; letter-spacing: .03em; color: #eaffef; }
.way__text { grid-column: 2; color: rgba(70,255,143,.64); font-size: .88em; line-height: 1.2; text-shadow: none; }
.way:hover .way__body { border-color: var(--term); background: rgba(70,255,143,.09); box-shadow: 0 0 14px rgba(70,255,143,.18); }
.way:hover .way__lamp::before { background: rgba(70,255,143,.5); }
.way input:checked + .way__body {
  background: var(--term); border-color: var(--term);
  box-shadow: 0 0 22px rgba(70,255,143,.5);
  color: #03140a; text-shadow: none;
}
.way input:checked + .way__body .way__title { color: #03140a; }
.way input:checked + .way__body .way__text { color: rgba(3,20,10,.78); }
.way input:checked + .way__body .way__lamp { border-color: #03140a; box-shadow: none; }
.way input:checked + .way__body .way__lamp::before { background: #03140a; width: 7px; height: 7px; }
.way input:focus-visible + .way__body { outline: 2px solid var(--cyan); outline-offset: 2px; }
.collab__step--ways.is-invalid .way__body { border-color: rgba(255,107,90,.7); }
.collab__step--ways.is-invalid .collab__hint { color: #ff8a7a; }

/* the writing area: its own lit panel, boxed fields, amber prompts */
.collab__step--write {
  padding: clamp(14px, 2vw, 20px);
  border: 1px solid rgba(70,255,143,.3); border-radius: 6px;
  background: linear-gradient(180deg, rgba(70,255,143,.07), rgba(70,255,143,.025));
  box-shadow: inset 0 0 24px rgba(70,255,143,.05);
}
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.field { display: grid; gap: 5px; min-width: 0; }
.field__label { color: var(--amber); text-transform: uppercase; letter-spacing: .03em; text-shadow: 0 0 6px rgba(255,176,32,.45); }
.field__label::before { content: "> "; white-space: pre; }
.field__label em { font-style: normal; opacity: .65; }
.field input, .field textarea {
  width: 100%; min-width: 0; min-height: 44px;
  padding: 7px 11px;
  border: 1px solid rgba(70,255,143,.42); border-radius: 3px;
  background: rgba(0,10,4,.55); color: #dcffe8;
  font: inherit; text-shadow: inherit;
  caret-color: var(--term);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.field textarea { resize: vertical; min-height: 7.5em; line-height: 1.25; }
.field input::placeholder, .field textarea::placeholder { color: rgba(70,255,143,.38); }
.field input:hover, .field textarea:hover { border-color: rgba(70,255,143,.7); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--term); background: rgba(70,255,143,.07); box-shadow: 0 0 0 1px var(--term), 0 0 16px rgba(70,255,143,.3); }
.field.is-invalid input, .field.is-invalid textarea { border-color: #ff6b5a; box-shadow: 0 0 0 1px #ff6b5a; }
.hp { position: absolute; left: -9999px; }

.collab__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.btn--term {
  border-radius: 3px; border: 0; min-height: 52px; padding: 0 34px;
  background: var(--term); color: #02140a;
  font-family: var(--crt); font-size: 24px; font-weight: 400; letter-spacing: .05em; text-transform: uppercase;
  text-shadow: none;
  box-shadow: 0 0 18px rgba(70,255,143,.5);
}
.btn--term:hover { border-color: transparent; box-shadow: 0 0 30px rgba(70,255,143,.8); }
.btn--term:disabled { opacity: .5; cursor: progress; }
.collab__status { margin: 0; min-height: 1.3em; }
.collab__status.is-error { color: #ff7a6a; text-shadow: 0 0 6px rgba(255,90,70,.7); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer { margin-top: 40px; }
.bars { display: grid; grid-template-columns: repeat(6, 1fr); height: 10px; }
.bars i:nth-child(1) { background: var(--red); }
.bars i:nth-child(2) { background: var(--orange); }
.bars i:nth-child(3) { background: var(--yellow); }
.bars i:nth-child(4) { background: var(--green); }
.bars i:nth-child(5) { background: var(--blue); }
.bars i:nth-child(6) { background: var(--violet); }
.footer__row {
  max-width: var(--max); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px;
  padding: 28px var(--gutter) calc(28px + env(safe-area-inset-bottom));
  font-size: 15px; color: var(--dim);
}
.footer__row p { margin: 0; }
.footer__social { display: flex; flex-wrap: wrap; gap: 18px; }
.footer__top { text-decoration: none; color: var(--dim); }
.footer__top:hover { color: var(--phos); }

/* ---------- social links: tiny CRT screens ---------- */
.contact__social { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-top: 30px; }
.contact__social + .contact__direct { margin-top: 30px; }
.social__icon { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; padding: 16%; filter: drop-shadow(0 0 5px rgba(255,255,255,.35)); }
.social {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--phos); font-weight: 600;
}
.social__tv {
  position: relative; flex: none;
  width: 58px; height: 46px; padding: 5px;
  border-radius: 10px;
  background: linear-gradient(160deg, #3a332b, #1c1814 60%, #0f0d0b);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -2px 3px rgba(0,0,0,.5), 0 6px 16px rgba(0,0,0,.5);
}
.social__tv::before {                              /* the glass */
  content: ""; position: absolute; inset: 5px; border-radius: 9px / 12px;
  background: radial-gradient(110% 100% at 50% 45%, #1b1712, #050404 75%);
  box-shadow: inset 0 0 12px rgba(0,0,0,.9);
}
.social__tv::after {                               /* scanlines + glass sheen */
  content: ""; position: absolute; inset: 5px; border-radius: 9px / 12px; pointer-events: none;
  background:
    linear-gradient(160deg, rgba(255,255,255,.12), transparent 40%),
    repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.35) 2px 3px);
}
.social__glyph {
  position: relative; z-index: 1;
  display: grid; place-items: center; height: 100%;
  font-family: var(--crt); font-size: 24px; line-height: 1; letter-spacing: .04em;
  color: var(--phos);
  text-shadow: 0 0 6px rgba(246,238,219,.75), 0 0 14px rgba(246,238,219,.3);
  transition: text-shadow .2s;
}
.social__name { text-decoration: underline; text-decoration-color: rgba(246,238,219,.3); text-underline-offset: 4px; }
/* hover: the picture splits into colour, like a mis-converged tube */
.social:hover .social__glyph, .social:focus-visible .social__glyph {
  text-shadow: -2px 0 0 rgba(255,59,48,.85), 2px 0 0 rgba(47,155,255,.85), 0 0 10px rgba(246,238,219,.9);
  animation: social-jitter .5s steps(2) 1;
}
.social:hover .social__name { text-decoration-color: var(--phos); }
@keyframes social-jitter { 0% { transform: translateX(-1px) skewX(-4deg); } 50% { transform: translateX(1px); } 100% { transform: none; } }

.social--small { gap: 8px; color: var(--dim); font-weight: 500; }
.social--small .social__tv { width: 40px; height: 32px; padding: 4px; border-radius: 8px; }
.social--small .social__tv::before, .social--small .social__tv::after { inset: 4px; border-radius: 6px / 8px; }
.social--small .social__glyph { font-size: 18px; }
.social--small .social__name { text-decoration: none; }
.social--small:hover { color: var(--phos); }
@media (prefers-reduced-motion: reduce) { .social:hover .social__glyph { animation: none; } }

/* ---------- Instagram: the logo itself, with a CRT look, above the hero TV ---------- */
.crt-set.has-ig { margin-top: clamp(70px, 6vw, 82px); }
.hero-ig {
  position: absolute; z-index: 2;
  right: 5%; bottom: calc(100% + 12px);
  display: block; padding: 4px;                     /* a bigger tap target than the logo */
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.ig-crt {
  position: relative; display: block;
  width: 46px; height: 46px; border-radius: 23%;
  overflow: hidden;
  filter: drop-shadow(0 0 6px rgba(255,226,180,.35)) drop-shadow(0 0 16px rgba(255,226,180,.14));
  animation: ig-flicker 7s steps(1) infinite;
  transition: transform .25s var(--ease);
}
.ig-crt__logo, .ig-crt__glyph {
  display: block; width: 100%; height: 100%;
  /* colour fringes of a not-quite-converged tube */
  filter: saturate(1.12) contrast(1.06) drop-shadow(-1px 0 0 rgba(255,40,40,.45)) drop-shadow(1px 0 0 rgba(40,140,255,.45));
}
.ig-crt__glyph { display: grid; place-items: center; background: #1b1714; color: var(--phos); font-weight: 800; font-size: 26px; }
.ig-crt::before {                                    /* scanlines + curved-glass shading */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.26) 2px 3px),
    radial-gradient(120% 120% at 50% 45%, transparent 55%, rgba(0,0,0,.42)),
    linear-gradient(150deg, rgba(255,255,255,.18), transparent 35%);
}
.ig-crt::after {                                     /* a soft scan band rolling down */
  content: ""; position: absolute; left: 0; right: 0; top: -40%; height: 40%; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.14), transparent);
  animation: ig-roll 4.5s linear infinite;
}
@keyframes ig-roll { to { transform: translateY(350%); } }
@keyframes ig-flicker { 0%, 100% { opacity: 1; } 46% { opacity: .9; } 47% { opacity: 1; } 81% { opacity: .95; } 82% { opacity: 1; } }
@keyframes ig-glitch {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-2px) skewX(-5deg); clip-path: inset(10% 0 55% 0); }
  40%  { transform: translateX(2px); clip-path: inset(50% 0 15% 0); }
  60%  { transform: translateX(-1px); clip-path: none; }
  100% { transform: none; }
}
.hero-ig:hover .ig-crt, .hero-ig:focus-visible .ig-crt { transform: translateY(-2px) scale(1.06); }
.hero-ig:hover .ig-crt__logo, .hero-ig:focus-visible .ig-crt__logo {
  filter: saturate(1.2) contrast(1.08) drop-shadow(-2px 0 0 rgba(255,40,40,.75)) drop-shadow(2px 0 0 rgba(40,140,255,.75));
  animation: ig-glitch .45s steps(4) 1;
}
.hero-ig:focus-visible { outline: none; }
.hero-ig:focus-visible .ig-crt { outline: 2px solid var(--cyan); outline-offset: 4px; }
@media (max-width: 700px) {
  .crt-set.has-ig { margin-top: 62px; }
  .hero-ig { right: 4%; bottom: calc(100% + 9px); }
  .ig-crt { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .ig-crt, .ig-crt::after, .hero-ig:hover .ig-crt__logo { animation: none; }
  .ig-crt { transition: none; }
}

/* ==========================================================================
   PLAYER (modal)
   ========================================================================== */
body.is-locked { overflow: hidden; }
.player {
  position: fixed; inset: 0; z-index: 1500;
  overflow-y: auto; overscroll-behavior: contain;
  background: rgba(4, 3, 6, .96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.player[hidden] { display: none; }
.player__inner {
  position: relative;
  max-width: min(1180px, calc((100vh - 240px) * 1.72 + 2 * var(--gutter)));
  min-width: min(100%, 640px);
  margin: 0 auto;
  padding: calc(64px + env(safe-area-inset-top)) var(--gutter) 64px;
  display: grid; gap: 18px;
}
.player__close {
  position: absolute; top: calc(14px + env(safe-area-inset-top)); right: var(--gutter);
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255,255,255,.04);
  font-weight: 600; font-size: 14.5px;
}
.player__close span { color: var(--red); text-shadow: 0 0 8px var(--red); font-size: 17px; }
.player__close:hover { border-color: rgba(246,238,219,.4); }
.tv--player { grid-template-columns: 1fr; }
.player__media { position: absolute; inset: 0; }
.player__media video { object-fit: contain; background: #000; }
.player__media .player__frame { width: 100%; height: 100%; }
.player.is-fullscreen .tv__crt { border-radius: 0; }

.deck {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px 18px;
  padding: 14px; border-radius: 16px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0 1px, transparent 1px 3px),
    linear-gradient(#26211c, #141110);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 14px 30px rgba(0,0,0,.5);
}
.deck__keys { display: flex; gap: 8px; }
.key {
  display: grid; place-items: center; gap: 1px;
  width: 64px; height: 56px; padding: 6px 0 4px;
  border: 0; border-radius: 6px;
  background: linear-gradient(#3d352e, #221d19);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 4px 0 #0a0807, 0 5px 10px rgba(0,0,0,.4);
  transition: transform .06s, box-shadow .06s;
}
.key b { font-size: 17px; line-height: 1; font-weight: 600; letter-spacing: -.05em; color: var(--phos); }
.key small { font-size: 11px; color: var(--dim); text-transform: lowercase; }
.key:hover b { text-shadow: 0 0 8px rgba(246,238,219,.7); }
.key:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 #0a0807; }
.key--play { width: 76px; }
.key--play b { color: var(--amber); text-shadow: 0 0 8px var(--amber); }
.key[aria-pressed="true"] b { color: var(--red); text-shadow: 0 0 8px var(--red); }
.deck__vfd {
  padding: 10px 14px; border-radius: 8px; background: #0b0705;
  box-shadow: inset 0 2px 8px #000, 0 0 0 1px rgba(255,176,32,.12);
  font-family: var(--crt); color: var(--amber); text-shadow: 0 0 6px rgba(255,176,32,.8);
}
.deck__readout { display: flex; justify-content: space-between; gap: 12px; font-size: 24px; line-height: 1; margin-bottom: 8px; }
.deck__track {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 18px; margin: 0; background: transparent; cursor: pointer;
}
.deck__track::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--amber) var(--p, 0%), rgba(255,176,32,.2) var(--p, 0%));
  box-shadow: 0 0 6px rgba(255,176,32,.5);
}
.deck__track::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255,176,32,.2); }
.deck__track::-moz-range-progress { height: 4px; background: var(--amber); }
.deck__track::-webkit-slider-thumb {
  -webkit-appearance: none; width: 10px; height: 18px; margin-top: -7px; border-radius: 2px;
  background: #ffe2a3; box-shadow: 0 0 10px var(--amber);
}
.deck__track::-moz-range-thumb { width: 10px; height: 18px; border: 0; border-radius: 2px; background: #ffe2a3; box-shadow: 0 0 10px var(--amber); }

.player__info {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px 56px;
  padding-top: 18px;
}
.player__title { font-size: clamp(1.8rem, 3.6vw, 2.8rem); line-height: 1.02; font-variation-settings: "wdth" 122; }
.player__meta { margin: 10px 0 14px; color: var(--dim); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.player__meta i { width: 14px; height: 3px; border-radius: 2px; background: var(--c, var(--phos)); box-shadow: 0 0 6px var(--c, var(--phos)); }
.player__clipnow { color: var(--phos); }
/* 1·2·3 clip switcher: little preset buttons on a VFD strip */
.clips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.clips[hidden] { display: none; }
.clips__label { font-size: 14.5px; color: var(--dim); margin-right: 4px; }
.clips__btn {
  min-width: 44px; height: 44px; padding: 0 12px;
  border: 1px solid rgba(255,176,32,.25); border-radius: 8px;
  background: #0b0705;
  font-family: var(--crt); font-size: 26px; line-height: 1; color: rgba(255,176,32,.55);
  box-shadow: inset 0 2px 6px #000;
  transition: color .2s, border-color .2s, text-shadow .2s;
}
.clips__btn:hover { color: var(--amber); }
.clips__btn[aria-current="true"] { color: var(--amber); border-color: var(--amber); text-shadow: 0 0 8px var(--amber); }
.player__desc { max-width: 62ch; color: rgba(246,238,219,.88); white-space: pre-line; }
.player__orig { margin: 6px 0 0; font-size: 1.05rem; color: var(--dim); }
.credits { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; font-size: 15px; align-content: start; }
.credits dt { color: var(--dim); }
.credits dd { margin: 0; font-weight: 600; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .tuner { grid-template-columns: auto 1fr; }
  .chips { grid-column: 1 / -1; }
  .guide__row { grid-template-columns: 70px minmax(0, 1fr) minmax(0, 1.2fr); }
  .guide__deliv { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 4px 18px; }
}

@media (max-width: 900px) {
  :root { --nav-h: 58px; }
  .hero { min-height: auto; justify-content: start; }
  .hero__stage { grid-template-columns: 1fr; }
  .beams { display: none; }
  .crt-set { grid-column: 1; width: 100%; max-width: 640px; margin-left: auto; margin-right: auto; }
  .hero__copy { grid-template-columns: 1fr; }
  .studio, .contact { grid-template-columns: 1fr; }
  .contact__side { position: static; }
  .studio__photo { position: static; max-width: 520px; }
  .approach__list { grid-template-columns: 1fr; gap: 22px; }
  .player__info { grid-template-columns: 1fr; }
  .empty { grid-template-columns: 1fr; }
}

/* TV panel moves under the screen on narrow screens */
@media (max-width: 700px) {
  .tv { grid-template-columns: 1fr; }
  .crt-set__front { grid-template-columns: 1fr; padding: 9px 9px 0; }
  .crt-set__panel {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center; gap: 6px;
    margin: 10px 0;
    padding: 9px 8px;
  }
  .crt-plate, .crt-engrave--aft, .crt-rgb, .crt-speaker, .crt-engrave__long { display: none; }
  .crt-trim { order: 3; gap: 4px; }
  .crt-trim__plate { padding: 1px 4px; font-size: 6.5px; }
  .crt-lamp { position: static; order: 4; }
  .crt-tuner { margin: 0; order: 1; }
  .crt-tuner__knobs { grid-auto-flow: column; }
  .crt-bigknob { --kd: 48px; }
  .crt-window { width: 26px; }
  .crt-window__num { font-size: 21px; }
  .crt-window__lab { font-size: 8px; }
  .crt-tuner { gap: 5px; }
  .crt-tuner__knobs { gap: 6px; }
  .crt-minknob { width: 28px; height: 28px; }
  .crt-small { order: 2; justify-content: center; gap: 6px; }
  .crt-set__lip { margin: 0 -9px; }
  .crt-tube { flex: none; }

  .nav__links {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; gap: 0;
    padding: 12px var(--gutter) 28px;
    background: rgba(6,5,8,.97);
    border-bottom: 1px solid var(--line);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .2s, transform .2s, visibility 0s .2s;
  }
  .nav.is-open .nav__links { transform: none; opacity: 1; visibility: visible; transition: opacity .2s, transform .2s; }
  .nav__links a { padding: 14px 0; font-size: 1.6rem; font-weight: 800; font-variation-settings: "wdth" 125; border-bottom: 1px solid var(--line); }
  .nav__burger {
    display: grid; gap: 5px; place-content: center;
    width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: none;
  }
  .nav__burger span { width: 18px; height: 2px; background: var(--phos); border-radius: 1px; transition: transform .2s, opacity .2s; }
  .nav.is-open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.is-open .nav__burger span:nth-child(2) { opacity: 0; }
  .nav.is-open .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav__word { font-size: 16px; }
  .nav__mark { width: 46px; height: 23px; }
  .toggle { padding: 0 10px; height: 36px; font-size: 12px; }

  .tuner { grid-template-columns: auto 1fr; padding: 14px; gap: 14px; }
  .knob { width: 88px; height: 88px; }
  .knob__cap { inset: 11px; }
  .knob__ticks span { margin-top: -44px; transform-origin: 1px 44px; height: 7px; }
  .vfd__ch { font-size: 34px; }
  .vfd__label { font-size: 19px; white-space: normal; }
  .chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -14px; padding: 2px 14px 6px; scrollbar-width: none; scroll-snap-type: x proximity; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { scroll-snap-align: start; }

  .guide__row { grid-template-columns: 64px minmax(0, 1fr); padding: 22px 0; gap: 8px 14px; }
  .guide__ch { font-size: 24px; padding-top: 3px; }
  .guide__mid, .guide__deliv { grid-column: 2; }

  .field-row, .ways { grid-template-columns: 1fr; }
  .way__body { padding: 10px 12px 11px; }
  .collab__actions .btn--term { width: 100%; justify-content: center; }
  .collab__head { font-size: .82em; letter-spacing: .03em; }

  .deck { grid-template-columns: 1fr; }
  .deck__keys { justify-content: space-between; }
  .key { flex: 1; width: auto; min-width: 0; }
  .key--play { flex: 1.3; }
  .deck__keys--small { order: 3; }
}

@media (max-width: 420px) {
  .toggle span:not(.toggle__lamp) { font-size: 11.5px; }
  .nav__word { display: none; }
}

@media (hover: none) {
  .nav__links a::before, .nav__links a::after { display: none; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  html.scan body::after { animation: none; }
  .crt-tube__roll { display: none; }
}

/* ---------- Programme guide: swipeable cards on phones ---------- */
@media (max-width: 700px) {
  .guide {
    display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 14px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
    border-top: 0; padding: 4px 2px 10px;
  }
  .guide::-webkit-scrollbar { display: none; }
  .guide__row {
    scroll-snap-align: center;
    display: flex; flex-direction: column; gap: 10px;
    padding: 20px 18px 22px;
    border: 0; border-radius: 14px;
    background: linear-gradient(170deg, #211b17, #120e0c);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 3px 0 var(--c, var(--phos)), 0 14px 30px rgba(0,0,0,.45);
  }
  .guide__row:hover { background: linear-gradient(170deg, #211b17, #120e0c); }
  .guide__ch { font-size: 30px; padding-top: 0; }
  .guide__deliv { display: block; }
  .guide__deliv li { padding: 3px 0; }
}