/* ==========================================================================
   VHS version — the same portfolio in a room with a 90s yellow TV/video
   combo on a shelf (img: TELE90+VHS.jpg). Slate-blue wall, white shelves,
   tapes spine out in their plastic sleeves. The projects are tapes; one goes
   into the video recorder and the TV plays it, page by page.
   Without JS: every tape is followed by its text.
   Built on archivo.css (type, cells, buttons) and chrome.css (masthead, colophon).
   ========================================================================== */

@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 900; font-display: swap;
}
@font-face {
  font-family: "Pinyon Script";
  src: url("../fonts/pinyon-script-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}

html:root {
  color-scheme: dark;
  /* the colours are in themes/vhs.css */
  --rule: color-mix(in srgb, var(--ink) 50%, transparent);
  --hair: color-mix(in srgb, var(--ink) 22%, transparent);

  /* the TV: a muted, slightly green yellow plastic, as in the photo */
  --tv: #d2c767;
  --tv-hi: #e6dd96;
  --tv-lo: #b1a64e;
  --tv-edge: #8c8336;
  --tv-ink: #4b4519;
  /* white-painted shelves */
  --plank: #dcd8cd;
  --plank-hi: #f3f1ea;
  --plank-lo: #a8a397;
  --plank-h: 1.5rem;
  --spine-w: 2.75rem;
  --spine-h: 14rem;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* long thin scuffs on the plastic sleeves */
  --scuffs: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='300'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .015' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.1 -.72'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
}
@media (min-width: 37.5em) { html:root { --spine-w: 3.1rem; --spine-h: 16.5rem; } }
@media (min-width: 64em)   { html:root { --spine-w: 3.4rem; --spine-h: 19rem; --plank-h: 1.75rem; } }

body.vhs {
  background:
    radial-gradient(ellipse 60% 45% at 50% 4%, rgb(150 170 185 / .28), transparent 70%),
    linear-gradient(#425060, #2e3841 70%, #262e36);
  background-color: var(--bg);
}
/* film grain over everything */
body.vhs::before {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- the room: TV on the top shelf, the socials beside it ---------- */

.room { padding: 2rem var(--pad) 0; }
.room__row {
  position: relative;
  display: grid; align-items: end; gap: 1.25rem .75rem;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "tv tv" "l r";
  padding-bottom: var(--plank-h);
}
/* the plank: its top face catches the light, its edge is in shade */
.room__row::after, .tapes--shelf::after {
  content: ""; position: absolute; z-index: 0; height: var(--plank-h);
  background:
    linear-gradient(var(--plank-hi) 0 22%, #c9c5ba 24%, var(--plank) 34%, var(--plank) 78%, var(--plank-lo));
  box-shadow: 0 1.1rem 1.4rem -.5rem rgb(0 0 0 / .55);
}
.room__row::after { left: calc(-1 * var(--pad)); right: calc(-1 * var(--pad)); bottom: 0; }
.tv { grid-area: tv; justify-self: center; }
.tapes--l { grid-area: l; justify-self: end; }
.tapes--r { grid-area: r; justify-self: start; }
@media (min-width: 64em) {
  .room__row { grid-template-columns: 1fr minmax(0, 44rem) 1fr; grid-template-areas: "l tv r"; gap: 1.5rem; }
}

.room__cta {
  margin: 1.25rem 0 0; text-align: center;
  font: 700 .8rem/1.3 var(--tech); letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
}
.room__arrow { display: inline-block; color: var(--text-accent); animation: nudge 1.4s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(.3rem); } }

/* ---------- tapes, spine out, packed tight ---------- */

.tapes { display: flex; align-items: flex-end; gap: 1px; position: relative; z-index: 1; }
/* each case a touch wider or taller than its neighbours (--w, --h) */
.tape {
  position: relative; flex: none; display: flex; align-items: flex-end;
  width: calc(var(--spine-w) * var(--w, 1)); height: var(--spine-h);
}
.tape--side { height: calc(var(--spine-h) * .92); }
.tape__spine {
  all: unset; display: block; width: 100%; height: calc(100% * var(--h, 1)); cursor: pointer;
  border-radius: 2px;
}
.tape__spine:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.tape__spine .spine { transition: transform .3s cubic-bezier(.3, .7, .2, 1), box-shadow .3s; }
.tape__spine:hover .spine, .tape__spine:focus-visible .spine {
  transform: translateY(-.8rem);
  box-shadow: var(--spine-shadow), 0 .8rem 1rem -.2rem rgb(0 0 0 / .45);
}

/* the gap a tape leaves on the shelf */
.tape.is-out .tape__spine { visibility: hidden; }
.tape.is-out::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(100% * var(--h, 1));
  background: linear-gradient(90deg, rgb(0 0 0 / .6), rgb(0 0 0 / .3) 60%, rgb(0 0 0 / .5));
}

/* the projects' shelves: rows of tapes, a plank between rows (the list's
   background, one band per row) and one under the last row */
.shelf { padding-bottom: 2rem; }
.tapes--shelf {
  position: relative;
  flex-wrap: wrap; justify-content: center; align-content: flex-start;
  row-gap: var(--plank-h);
  padding: 0 var(--pad); margin: 2rem 0 var(--plank-h);
  background:
    repeating-linear-gradient(transparent 0 var(--spine-h),
      var(--plank-hi) var(--spine-h) calc(var(--spine-h) + var(--plank-h) * .22),
      #c9c5ba 0 calc(var(--spine-h) + var(--plank-h) * .24),
      var(--plank) 0 calc(var(--spine-h) + var(--plank-h) * .78),
      var(--plank-lo) 0 calc(var(--spine-h) + var(--plank-h)))
    0 0 / 100% calc(var(--spine-h) + var(--plank-h)) repeat-y;
}
.tapes--shelf::after { left: 0; right: 0; top: 100%; }
/* the shelf above throws a shade on the top of each case */
.tapes--shelf .spine { --shade: linear-gradient(rgb(0 0 0 / .32), transparent 16%); }

.js .tape__content { display: none; }
.no-js .tapes--shelf { display: block; background: none; padding: 2rem var(--pad); }
.no-js .tapes--shelf::after { display: none; }
.no-js .tapes--shelf .tape { display: grid; grid-template-columns: var(--spine-w) 1fr; gap: 1.5rem; width: auto; height: auto; margin-bottom: 2.5rem; }
.no-js .tapes--shelf .tape__spine { height: var(--spine-h); }

/* ---------- the spine of a case ---------- */

.spine {
  /* (cq units on the spine itself would measure the page: it is its own container) */
  --spine-shadow: inset 0 0 0 1px rgb(0 0 0 / .6), inset 2px 0 0 rgb(255 255 255 / .1), inset -3px 0 0 rgb(0 0 0 / .35);
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .28rem;
  width: 100%; height: 100%; padding: .45rem 0 .4rem;
  container-type: size;
  border-radius: 2px; overflow: hidden;
  background: var(--shade, none), var(--sp-bg);
  color: var(--sp-ink);
  box-shadow: var(--spine-shadow);
}
/* the clear sleeve: a lip along the top, a shine down the left, the round
   of the case darker to the right, scuffs */
.spine::before {
  content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 4px; pointer-events: none;
  background: linear-gradient(rgb(255 255 255 / .38), rgb(255 255 255 / .06));
}
.spine::after, .sleeve::after {
  content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgb(255 255 255 / .2) 0 1.5px, transparent 3px 12%, rgb(255 255 255 / .17) 21%, rgb(255 255 255 / .05) 32%, transparent 44% 76%, rgb(0 0 0 / .3)),
    linear-gradient(transparent 82%, rgb(0 0 0 / .28)),
    var(--scuffs) 0 0 / 100% 100%;
  opacity: .75;
}
.spine__logo {
  flex: none; width: 60cqw; aspect-ratio: 1 / 1.12; display: grid; place-items: center;
  clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
  background: linear-gradient(135deg, rgb(255 255 255 / .25), transparent 50%), var(--sp-logo);
  color: var(--sp-logo-ink, #141414);
  font: 800 21cqw/1 var(--sans); padding-bottom: 14%;
}
/* the title runs down the spine; the line over it, beside it */
.spine__body {
  flex: 1; min-height: 0; width: 100%;
  writing-mode: vertical-rl; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4cqw;
  overflow: hidden;
}
.spine__title {
  white-space: nowrap; color: var(--sp-title); line-height: 1;
  font-size: min(var(--max, 54cqw), calc(var(--k, 88) * 1cqh / var(--chars, 6)));
}
.spine__kicker {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: 100%;
  font: 600 9cqw/1 var(--tech); letter-spacing: .1em; text-transform: uppercase; opacity: .85;
}
.spine__pic {
  flex: none; width: 76cqw; aspect-ratio: 1 / 1.12; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 38% 32%, var(--sp-pic1), var(--sp-pic2) 75%);
  color: var(--sp-title); --paper: var(--sp-pic2);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .4), inset 0 0 4cqw rgb(0 0 0 / .45);
}
.spine__pic svg { width: 86%; height: 86%; }
.spine__pic b { font: 800 46cqw/1 "Playfair Display", serif; }
.spine__rate {
  flex: none; width: 46cqw; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: var(--rate, #d0202a); color: var(--rate-ink, #fff);
  font: 800 22cqw/1 var(--sans);
  box-shadow: 0 0 0 3.5cqw rgb(255 255 255 / .92);
}
.spine__vhs { flex: none; font: 900 14cqw/1 var(--sans); letter-spacing: .04em; padding: 1.5cqw 3.5cqw; border: max(1px, 2.5cqw) solid currentColor; }
.spine__cat { flex: none; font: 600 8.5cqw/1 var(--tech); letter-spacing: .04em; white-space: nowrap; opacity: .8; }
/* thin cases lose the small print */
@container (max-width: 2.9rem) { .spine__kicker, .spine__cat { display: none; } }
@container (max-height: 15rem) { .spine__pic { width: 64cqw; } }

/* lettering */
.ty--cond   .spine__title { --k: 86; font-family: var(--sans); font-weight: 800; font-stretch: 62%; text-transform: uppercase; letter-spacing: .02em; }
.ty--serif  .spine__title { --k: 58; font-family: "Playfair Display", Georgia, serif; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.ty--script .spine__title { --k: 112; --max: 62cqw; font-family: "Pinyon Script", "Playfair Display", serif; font-weight: 400; line-height: 1.15; }
.ty--wide   .spine__title { --k: 54; font-family: var(--sans); font-weight: 900; font-stretch: 112%; text-transform: uppercase; }
.ty--mono   .spine__title { --k: 66; font-family: var(--tech); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }

/* the age circles carry the year (23, 24, 25, 26) */
.rate--23 { --rate: #2e9b4a; }
.rate--24 { --rate: #e0b10c; --rate-ink: #141414; }
.rate--25 { --rate: #d63a78; }
.rate--26 { --rate: #c8172a; }

/* spine colours (after the photo) and the tones of their little picture */
.sp--a { --sp-bg: #151515; --sp-ink: #ebe3cf; --sp-title: #e5392c; --sp-logo: #c9a640; --sp-pic1: #5a3a2a; --sp-pic2: #1d1512; }
.sp--b { --sp-bg: #a51f2a; --sp-ink: #f3e9d2; --sp-title: #f3e9d2; --sp-logo: #151515; --sp-logo-ink: #f3e9d2; --sp-pic1: #e7a457; --sp-pic2: #5a1218; }
.sp--c { --sp-bg: #ece3cb; --sp-ink: #151515; --sp-title: #151515; --sp-logo: #a51f2a; --sp-logo-ink: #f3e9d2; --sp-pic1: #9fb8c4; --sp-pic2: #2d3d4c; }
.sp--d { --sp-bg: #e3c142; --sp-ink: #151515; --sp-title: #151515; --sp-logo: #151515; --sp-logo-ink: #e3c142; --sp-pic1: #f4e2a0; --sp-pic2: #7a5a1c; }
.sp--e { --sp-bg: #1d2a45; --sp-ink: #ebe3cf; --sp-title: #f08a3c; --sp-logo: #c9a640; --sp-pic1: #5d8fb8; --sp-pic2: #101a2e; }
.sp--f { --sp-bg: #f5f1e6; --sp-ink: #151515; --sp-title: #c8172a; --sp-logo: #1d2a45; --sp-logo-ink: #f5f1e6; --sp-pic1: #f2c3a0; --sp-pic2: #6b2a24; }
.sp--g { --sp-bg: #d3602a; --sp-ink: #151515; --sp-title: #151515; --sp-logo: #151515; --sp-logo-ink: #d3602a; --sp-pic1: #ffd08a; --sp-pic2: #6e2a10; }
.sp--h { --sp-bg: #2a676e; --sp-ink: #f3e9d2; --sp-title: #f3e9d2; --sp-logo: #e3c142; --sp-pic1: #a9d4c9; --sp-pic2: #123236; }

/* the tape in flight (a copy of its spine) */
.spine.spine-ghost {
  position: fixed; left: 0; top: 0; z-index: 70; margin: 0; pointer-events: none;
  transform-origin: 50% 50%; will-change: transform;
}

/* ---------- the TV/video combo ---------- */

.tv { position: relative; width: min(100%, 44rem); container-type: inline-size; padding-bottom: 1.2cqi; }
.tv__body {
  position: relative; z-index: 1;
  padding: 4.2cqi 4.6cqi 0;
  border-radius: 4.6cqi 4.6cqi 2.6cqi 2.6cqi;
  background:
    var(--grain) 0 0 / 160px 160px,
    radial-gradient(ellipse 90% 55% at 28% 0%, rgb(255 255 235 / .35), transparent 65%),
    linear-gradient(176deg, var(--tv-hi), var(--tv) 26%, var(--tv) 74%, var(--tv-lo));
  box-shadow:
    inset 0 .35cqi 0 rgb(255 255 255 / .55),
    inset .45cqi 0 0 rgb(255 255 255 / .2),
    inset -.6cqi 0 1cqi rgb(0 0 0 / .1),
    inset 0 -.7cqi 0 rgb(0 0 0 / .12),
    0 1cqi 0 var(--tv-edge),
    0 1.3cqi .4cqi rgb(0 0 0 / .35),
    0 2.6rem 2.6rem -1.4rem rgb(0 0 0 / .75);
}
/* two feet under the cabinet */
.tv::before, .tv::after {
  content: ""; position: absolute; bottom: 0; width: 12%; height: 2cqi; border-radius: 0 0 .8cqi .8cqi;
  background: linear-gradient(#3b3a2c, #1e1d16);
}
.tv::before { left: 9%; }
.tv::after { right: 9%; }

/* the frame round the tube, chamfered: in shade at the top, lit below */
.tv__bezel {
  padding: 1.8cqi; border-radius: 3.6cqi;
  background:
    var(--grain) 0 0 / 160px 160px,
    linear-gradient(var(--tv-lo), var(--tv) 30%, var(--tv-hi));
  box-shadow: inset 0 .9cqi 1.4cqi rgb(0 0 0 / .32), inset 0 -.3cqi .3cqi rgb(255 255 255 / .45), 0 .25cqi 0 rgb(255 255 255 / .35);
}
/* the tube: a black gasket, curved glass */
.tv__screen {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  container-type: size;
  border-radius: 3cqi / 3.8cqi;
  background: radial-gradient(ellipse 85% 75% at 50% 45%, #22427c, #0f1f45 60%, #050b1d);
  box-shadow: 0 0 0 .9cqi #23231a, 0 0 0 1.25cqi rgb(0 0 0 / .3), inset 0 0 6cqi rgb(0 0 0 / .85), inset 0 0 1.2cqi #000;
}
@media (max-width: 37.49em) { .tv__screen { aspect-ratio: 1 / 1.25; } }
/* scanlines and the glass */
.tv__screen::before, .tv__screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.tv__screen::before { z-index: 3; background: repeating-linear-gradient(transparent 0 2px, rgb(0 0 0 / .2) 2px 3px); animation: roll 6s linear infinite; }
.tv__screen::after {
  z-index: 4; border-radius: inherit;
  background:
    radial-gradient(ellipse 70% 55% at 30% 20%, rgb(255 255 255 / .15), transparent 62%),
    linear-gradient(158deg, rgb(255 255 255 / .06) 0 34%, transparent 34.4%),
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 52%, rgb(0 0 0 / .55));
}
@keyframes roll { to { background-position: 0 3px; } }

.tv__noise {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%;
  image-rendering: pixelated; opacity: 0; transition: opacity .15s; pointer-events: none;
}
.tv.is-static .tv__noise { opacity: 1; }
.tv.is-static .tv__out { opacity: 0; }

/* on-screen display of the video recorder */
.tv__osd, .osd__page {
  position: absolute; z-index: 5; left: 5cqw; right: 5cqw; margin: 0;
  display: flex; justify-content: space-between; gap: 1rem;
  font: 600 max(.7rem, 4.4cqh)/1 var(--tech); letter-spacing: .1em; text-transform: uppercase;
  color: #fff; text-shadow: .3cqh .3cqh 0 #000, 0 0 1.2cqh rgb(120 200 255 / .7);
}
.tv__osd { top: 4.5cqh; }
.osd__page { bottom: 4cqh; justify-content: flex-end; }
.tv.is-playing .osd__mode { color: #b8ffcf; }
/* "press ▶ PLAY": bottom left of the screen, blinking like a VCR prompt,
   and the PLAY key glows, until PLAY has been pressed once */
.osd__hint {
  position: absolute; z-index: 5; left: 5cqw; bottom: 4cqh; margin: 0;
  font: 600 max(.65rem, 3.6cqh)/1 var(--tech); letter-spacing: .1em; text-transform: uppercase;
  color: #b8ffcf; text-shadow: .3cqh .3cqh 0 #000, 0 0 1.2cqh rgb(120 255 180 / .7);
  animation: blink 1.2s steps(2) infinite;
}
.tv.has-played .osd__hint, .tv.is-static .osd__hint, .tv__screen:popover-open .osd__hint { display: none; }
.tv:not(.has-played) [data-tv="play"] { animation: key-glow 1.2s ease-in-out infinite; }
@keyframes key-glow { 50% { box-shadow: 0 .45cqi 0 #958b3f, 0 0 0 .35cqi #b8ffcf, 0 0 2.4cqi #b8ffcf, inset 0 .15cqi 0 rgb(255 255 255 / .7); } }
.tv.is-ejecting .osd__mode { animation: blink .5s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* what plays */
.tv__out {
  position: absolute; z-index: 1; inset: 13cqh 6cqw 11cqh;
  overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgb(234 242 255 / .4) transparent;
  color: #eaf2ff; transition: opacity .2s;
  --ink: #eaf2ff; --ink-soft: #b4c8e6; --rule: rgb(234 242 255 / .35); --hair: rgb(234 242 255 / .2);
  --accent: #e9cf4f; --on-accent: #151515;
}
.tvp[hidden] { display: none; }
.tvp { animation: tune .45s ease-out; }
@keyframes tune {
  0% { opacity: 0; transform: translateX(-2%) skewX(-4deg); filter: blur(2px); }
  40% { opacity: 1; transform: translateX(1%) skewX(2deg); }
  100% { transform: none; filter: none; }
}
.tvp--cover { display: grid; grid-template-columns: 36% 1fr; gap: 5cqw; align-items: center; min-height: 100%; }
.tvp__code { font: 600 max(.7rem, 3.6cqh)/1 var(--tech); letter-spacing: .14em; color: #b4c8e6; }
.tvp__title {
  margin: .4em 0 .25em; font: 800 min(9cqw, 13cqh)/.92 var(--sans); font-stretch: 62%; text-transform: uppercase;
  text-shadow: -.35cqw 0 rgb(255 50 90 / .75), .35cqw 0 rgb(60 220 255 / .75);
  overflow-wrap: anywhere;
}
.tvp__use { font: 700 max(.7rem, 3.4cqh)/1.3 var(--tech); letter-spacing: .08em; text-transform: uppercase; color: #e9cf4f; }
.tvp__quote { margin-top: .8em; font: 600 max(.8rem, 4.2cqh)/1.25 var(--sans); }
.tvp--text p, .tvp--facts > p { font: 400 max(.8rem, min(3.1cqw, 4.6cqh))/1.5 var(--sans); max-width: 62ch; }
.tvp--text p + p, .tvp--facts > p + p { margin-top: .7em; }
.tvp--facts .cells { margin-bottom: 1rem; }
.tvp--facts .socials { margin-top: 1rem; }
.tvp .btn { min-height: 2.5rem; }

/* ---------- the screen, full screen ----------
   PLAY lifts the tube into the top layer (a manual popover), over the whole
   viewport; what plays stays clickable. An ✕ in the corner, or Esc, puts it
   back in the set. In the set the popover's UA styles are undone, so it lays
   out as before. */
.tv__screen[popover] {
  display: block; position: relative; inset: auto;
  width: auto; height: auto; margin: 0; padding: 0; border: 0;
  overflow: hidden; color: inherit;
}
.tv__screen:popover-open {
  position: fixed; inset: 0;
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  border-radius: 0; box-shadow: none;
  animation: tube-on .35s cubic-bezier(.2, .8, .2, 1);
}
.tv__screen::backdrop { background: #000; }
@keyframes tube-on {
  0% { clip-path: inset(49.5% 0 49.5% 0); filter: brightness(3); }
  60% { clip-path: inset(0); filter: brightness(1.4); }
  100% { clip-path: inset(0); filter: none; }
}
html:has(.tv__screen:popover-open) { overflow: hidden; }
/* a wide screen: the picture keeps a readable column */
.tv__screen:popover-open .tv__out { inset: 12cqh max(6cqw, (100cqw - 72rem) / 2) 12cqh; }
.tv__screen:popover-open .tvp--text p,
.tv__screen:popover-open .tvp--facts > p { font-size: clamp(1rem, .7rem + 1.2vw, 1.6rem); }
.tv__screen:popover-open .tvp__title { font-size: min(7cqw, 11cqh); }

/* the ✕ and the page keys: only full screen, in the OSD's voice */
.tv__close, .tv__osd-key {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: inline-grid; place-items: center;
  min-width: 2.75rem; min-height: 2.75rem;
  color: #fff; filter: drop-shadow(2px 2px 0 #000) drop-shadow(0 0 6px rgb(120 200 255 / .7));
  font: 600 1rem/1 var(--tech); letter-spacing: .1em;
}
.tv__close {
  position: absolute; z-index: 6; top: max(1rem, 3cqh); right: max(1rem, 3cqw);
  width: 3rem; height: 3rem;
}
.tv__close svg { width: 1.75rem; height: 1.75rem; }
.tv__full-keys { position: absolute; z-index: 6; left: 5cqw; bottom: max(.5rem, 2.5cqh); gap: .5rem; }
.tv__osd-key[aria-disabled="true"] { opacity: .35; cursor: default; }
.tv__close:hover, .tv__osd-key:not([aria-disabled="true"]):hover { color: #b8ffcf; }
.tv__close:focus-visible, .tv__osd-key:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tv__screen:popover-open .tv__osd { right: calc(max(1rem, 3cqw) + 3.5rem); }
/* hidden unless full screen (also where :popover-open is unknown) */
.tv__close, .tv__full-keys { display: none; }
.tv__screen:popover-open .tv__close { display: inline-grid; }
.tv__screen:popover-open .tv__full-keys { display: flex; }
@media (prefers-reduced-motion: reduce) { .tv__screen:popover-open { animation: none; } }

/* the sleeve: the picture of the tape */
.sleeve {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .4rem;
  aspect-ratio: .7; padding: 7% 6% 6%; overflow: hidden; container-type: inline-size;
  background:
    radial-gradient(circle, rgb(0 0 0 / .18) 22%, transparent 24%) 0 0 / 5cqi 5cqi,
    var(--sp-bg);
  color: var(--sp-ink); --paper: var(--sp-bg);
  border-radius: 2px; box-shadow: 0 1cqh 3cqh rgb(0 0 0 / .6), inset 0 0 0 1px rgb(0 0 0 / .4);
}
.sleeve__studio { font: 800 8cqi/1 var(--sans); letter-spacing: .12em; padding: 2cqi 3cqi; background: var(--sp-logo); color: var(--sp-logo-ink, #141414); }
.sleeve__art { flex: 1; min-height: 0; width: 80%; display: grid; place-items: center; color: var(--sp-title); }
.sleeve__art svg { width: 100%; height: 100%; }
.sleeve__code { font: 800 15cqi/1 var(--tech); white-space: nowrap; color: var(--sp-title); opacity: .85; }
.sleeve__title {
  font: 800 min(24cqi, calc(165cqi / var(--chars, 6)))/.9 var(--sans); font-stretch: 62%;
  text-transform: uppercase; text-align: center; color: var(--sp-title);
}
.sleeve__foot { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.sleeve__foot .spine__rate { width: 18cqi; font-size: 8cqi; box-shadow: 0 0 0 1.4cqi rgb(255 255 255 / .9); }
.sleeve__vhs { font: 800 9cqi/1 var(--sans); padding: 1cqi 2cqi; border: .8cqi solid currentColor; }
.tape__content .sleeve { max-width: 12rem; }

/* ---------- the panel under the screen ---------- */

.tv__panel {
  display: grid; align-items: center; gap: 1.3cqi 2.6cqi; padding-top: 1.6cqi;
  grid-template-columns: 1.1fr 3fr 1.3fr;
  grid-template-areas: "badge brand speaker" "badge vcr speaker" "power keys speaker" "foot foot foot";
  color: var(--tv-ink);
}
.tv__brand { grid-area: brand; justify-self: center; font: 800 max(.65rem, 2.2cqi)/1 var(--sans); letter-spacing: .32em; text-shadow: 0 .12cqi 0 rgb(255 255 255 / .45); }
.tv__badge { grid-area: badge; align-self: start; display: grid; gap: .5cqi; padding-top: 1cqi; text-shadow: 0 .12cqi 0 rgb(255 255 255 / .45); }
.tv__badge b { font: 900 italic max(.7rem, 2.4cqi)/1 var(--sans); letter-spacing: -.02em; }
.tv__badge span { font: 700 max(.55rem, 1.6cqi)/1 var(--sans); letter-spacing: .1em; }

/* the cassette door: a long recess, its flap printed with the label */
.vcr {
  grid-area: vcr; height: max(2.6rem, 8.6cqi); padding: .7cqi; border-radius: .9cqi;
  background: linear-gradient(var(--tv-lo), var(--tv) 70%);
  box-shadow: inset 0 .6cqi 1cqi rgb(0 0 0 / .32), 0 .25cqi 0 rgb(255 255 255 / .45);
}
.vcr__slot {
  position: relative; display: block; height: 100%;
  border-radius: .5cqi; background: #14120a; overflow: hidden; perspective: 40cqi;
  box-shadow: inset 0 .6cqi .8cqi #000;
}
.vcr__flap {
  position: absolute; inset: 0; transform-origin: 50% 0;
  display: grid; place-content: center; justify-items: center; gap: .5cqi;
  background: var(--grain) 0 0 / 160px 160px, linear-gradient(#e8df99, #d3c973 55%, #c2b863);
  box-shadow: inset 0 .2cqi 0 rgb(255 255 255 / .55), inset 0 -.35cqi 0 rgb(0 0 0 / .14);
  transition: transform .3s cubic-bezier(.3, .7, .2, 1), filter .3s;
}
.vcr.is-open .vcr__flap { transform: rotateX(80deg); filter: brightness(.65); }
.vcr__label {
  padding: .5cqi 2.4cqi; border: max(1px, .16cqi) solid rgb(75 69 25 / .55);
  font: 700 max(.55rem, 1.5cqi)/1 var(--sans); letter-spacing: .26em;
}
.vcr__small { font: 600 max(.42rem, .95cqi)/1 var(--tech); letter-spacing: .14em; opacity: .75; }

/* the speaker: rows of vertical slots */
.tv__speaker {
  grid-area: speaker; align-self: stretch; position: relative; min-height: 14cqi; border-radius: 1.2cqi;
  background: linear-gradient(var(--tv), var(--tv-lo));
  box-shadow: inset 0 .4cqi .7cqi rgb(0 0 0 / .22), 0 .2cqi 0 rgb(255 255 255 / .35);
}
.tv__speaker::before {
  content: ""; position: absolute; inset: 14% 12%;
  background: repeating-linear-gradient(90deg, rgb(35 32 12 / .8) 0 .5cqi, transparent .5cqi 1.45cqi);
  -webkit-mask: repeating-linear-gradient(#000 0 2.3cqi, transparent 2.3cqi 3cqi);
          mask: repeating-linear-gradient(#000 0 2.3cqi, transparent 2.3cqi 3cqi);
}

/* power, the standby light and the jacks */
.tv__power { grid-area: power; display: flex; align-items: center; gap: 1.6cqi; }
.tv__button {
  width: 4.2cqi; height: 4.2cqi; min-width: 14px; min-height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #f1e9ad, #b8ad57);
  box-shadow: 0 0 0 .55cqi var(--tv-lo), 0 .35cqi .2cqi .55cqi rgb(0 0 0 / .18);
}
.tv__led { width: 1.3cqi; height: 1.3cqi; min-width: 5px; min-height: 5px; border-radius: 50%; background: #5b1b12; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .4); }
.tv.is-playing .tv__led { background: #ff4b2b; box-shadow: 0 0 1cqi #ff4b2b; }
.tv__jack {
  width: 2.4cqi; height: 2.4cqi; min-width: 8px; min-height: 8px; border-radius: 50%;
  background: radial-gradient(circle, #0d0d0a 28%, #8d8a76 31% 46%, #bdb35d 50%);
  box-shadow: 0 .15cqi 0 rgb(255 255 255 / .35);
}

/* the transport keys, in a recessed strip */
.tv__keys {
  grid-area: keys; justify-self: center; display: flex; gap: .7cqi;
  padding: .8cqi 1cqi; border-radius: .8cqi;
  background: rgb(60 55 20 / .16);
  box-shadow: inset 0 .4cqi .6cqi rgb(0 0 0 / .25), 0 .2cqi 0 rgb(255 255 255 / .4);
}
.tv__key {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: inline-grid; place-items: center;
  min-width: max(2.75rem, 7.4cqi); min-height: max(2rem, 4.2cqi); padding: 0 1cqi;
  border-radius: .5cqi;
  background: linear-gradient(#efe7ac, #cdc27a);
  box-shadow: 0 .45cqi 0 #958b3f, 0 .6cqi .3cqi rgb(0 0 0 / .2), inset 0 .15cqi 0 rgb(255 255 255 / .7);
  font: 700 max(.7rem, 1.8cqi)/1 var(--tech); color: var(--tv-ink);
  transition: transform .08s ease, box-shadow .08s ease;
}
.tv__key:active, .tv__key.is-pressed { transform: translateY(.4cqi); box-shadow: 0 .05cqi 0 #958b3f, inset 0 .15cqi 0 rgb(255 255 255 / .4); }
.tv__key[aria-disabled="true"] { opacity: .5; cursor: default; }
.tv__key:focus-visible { outline: 3px solid #151515; outline-offset: 2px; }

/* the lip along the bottom of the cabinet */
.tv__foot {
  grid-area: foot; height: 2.2cqi; margin: .6cqi -4.6cqi 0;
  border-radius: 0 0 2.6cqi 2.6cqi;
  background: linear-gradient(rgb(0 0 0 / .1), rgb(0 0 0 / .02) 40%, rgb(0 0 0 / .14));
  border-top: max(1px, .2cqi) solid rgb(0 0 0 / .12);
}

@media (max-width: 37.49em) {
  .tv__panel { grid-template-columns: 2fr 1fr; grid-template-areas: "brand brand" "vcr speaker" "keys keys" "foot foot"; }
  .tv__badge, .tv__power, .vcr__small { display: none; }
  .tv__keys { gap: .4rem; }
  .tv__key { min-width: 2.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tv__screen::before { animation: none; }
}