/* ============================================================
   HOME — "Prime Time Guide": the client pitch told as a 2004
   Media Center TV-guide ad. The owner's photo plays on a TV, a
   torn newsprint listing lays out the project's week, the work
   runs as tonight's features in Media Center, a ruled channel
   grid holds the logos, and a remote flips through the project's
   episodes. XP Luna windows still carry the programs (Help
   Topics, New Message). Type: Tahoma bold for headings, Space
   Grotesk for body text, Tahoma for chrome. Icons: Pixel Icon
   Library. Image slots are grey placeholders naming their file.
   Loaded after style.css; everything below the icon colours is
   scoped to .home.
   ============================================================ */

/* icon colours for the icons Home adds */
.px-home { --ic-fill: var(--ic-orange); }
.px-questionCircle { --ic-fill: var(--ic-blue); }
.px-bookOpen { --ic-fill: var(--ic-violet); }
.px-flag { --ic-fill: var(--ic-red); }
.px-quote { --ic-fill: var(--ic-yellow); }

.home {
  /* the rhythm, on the 4px grid, stepping up at 640px and 1100px (below): the side gutter, the space above a
     section, the padding inside a colour band, a head to its content, one block to the next, a headline to its lead */
  --gutter: 20px; --section: 96px; --band-pad: 80px; --lead: 40px; --block: 64px; --head: 16px;
  --ink: #141414;
  --ink-2: #3d3b34;
  --on-band: color-mix(in srgb, var(--hi) 86%, transparent);
  /* newsprint: the listing band and the episode guide */
  --news: #e9e2cf;
  --news-ink: #1b1a17;
  --news-edge: #f7f4ec;
  /* rasters (asset/Home): the owner's newsprint scan (one 1200px tile), the torn edge's alpha and fibre rim */
  --news-tex: url("../asset/Home/newsprint-1200.jpg");
  --tear-mask: url("../asset/Home/tear-mask.png");
  --tear-rim: url("../asset/Home/tear-rim.png");
  /* Media Center broadcast blue and its green focus glow */
  --bc-deep: #04163f;
  --bc-mid: #0d3a8f;
  --bc-hi: #1d56b8;
  --bc-soft: #d6e2f8;
  --glow: #86d13f;
  --rec: #d6261c;
  /* the objects' materials, each drawn once */
  /* the gloss stays above the label: from a quarter down, the face holds white text at 4.5:1 */
  --rec-face: linear-gradient(180deg, #f4695e 0%, #d83127 24%, #c4241b 60%, #a8170f 100%);
  --rec-edge: #7e1410;
  --glow-face: linear-gradient(180deg, #a8e266, #5aa82a);
  --glow-edge: #d4f7ad;
  --glow-ink: #0b2206;
  --glow-halo: rgba(134, 209, 63, .55);
  --silver-face: linear-gradient(180deg, #f3f4f7 0%, #d4d7de 45%, #b3b8c2 100%);
  --silver-key: radial-gradient(circle at 35% 30%, #fff, #d5d8de 55%, #9aa0aa);
  --silver-edge: #6f747e;
  /* the hero's brushed steel: a sweep a step deeper than the silver, and its grain (a generated 1600px tile) */
  --steel: linear-gradient(180deg, #e3e6ea 0%, #c3c8cf 40%, #a4aab4 100%);
  --steel-tex: url("../asset/Home/steel-brushed-1600.webp");
  --screen-edge: 0 0 0 2px #2a2d35, 0 0 0 3px #7c818c;
  --bc-scrim: rgba(3, 18, 60, .92);
  container: home / inline-size;
  min-height: 100%;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.6 var(--read);
}
.home > header, .home > section { position: relative; padding: var(--section) var(--gutter) 0; }
@container home (min-width: 640px) { .home > * { --gutter: 40px; --section: 120px; --band-pad: 104px; --lead: 48px; --block: 80px; } }
@container home (min-width: 1100px) { .home > * { --gutter: 64px; --section: 144px; --band-pad: 128px; --lead: 56px; --block: 96px; --head: 20px; } }
.home .btn { font: 12px/1.3 var(--ui); color: #000; text-decoration: none; }
.home .btn.lg { font-size: 12px; }
.home .btn .px { width: 16px; height: 16px; }
.home .btn:disabled { color: var(--shade); }

/* shared type: Tahoma bold heads in black ink, the way the 2004 ads set them */
.pt-h2 { margin: 0; max-width: 22ch; font: 700 28px/1.05 var(--display); letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }
.sec-copy { min-width: 0; }

/* bands: the closing band keeps the Start green between XP's two light rules */
.hm-band { --band: var(--band-blue); z-index: 1; background: var(--band); color: #fff; }
.hm-band .pt-h2 { color: #fff; }
.hm-band::before, .hm-band::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; pointer-events: none; }
.hm-band::before { top: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85) 30%, rgba(255, 255, 255, .85) 70%, transparent); }
.hm-band::after { bottom: 0; background: linear-gradient(90deg, transparent, var(--orange-rule) 30%, var(--orange-rule) 70%, transparent); }
.hm-band :focus-visible { outline-color: #fff; }
.hm-band .mw :focus-visible { outline-color: #000; }
/* a checkbox draws its focus around its label, so on the band that label takes the white too */
.hm-band .chk input:focus-visible + span { outline-color: #fff; }

/* ============================================================
   MINI WINDOWS (XP programs drawn inside the page)
   ============================================================ */
.home .mw {
  position: relative; z-index: 1; min-width: 0; display: flex; flex-direction: column; padding: 0 3px 3px;
  border-radius: 8px 8px 0 0; background: var(--face); color: #000; font: 12px/1.3 var(--ui);
  box-shadow: var(--frame), 0 20px 34px -20px rgba(0, 20, 70, .55);
}
.mw-title { flex: none; height: 26px; margin: 0 -3px; display: flex; align-items: center; gap: 4px; padding: 0 4px 0 8px; border-radius: 7px 7px 0 0; background: var(--cap); color: #fff; font: 700 12px/1 var(--ui); text-shadow: 1px 1px var(--cap-shadow); white-space: nowrap; overflow: hidden; user-select: none; }
.mw-title.off { background: var(--cap-off); color: #e3ebfc; text-shadow: none; }
.mw-title .t-ico { display: flex; }
.mw-title .px { width: 16px; height: 16px; }
.mw-title .t-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* caption buttons, drawn faded: these are pictures of windows inside a page, not windows you can close */
.mw-btns { flex: none; display: flex; gap: 2px; opacity: .6; }
.mw-btns .mb { width: 19px; height: 19px; display: grid; place-items: center; border: 1px solid #fff; border-radius: 3px; background: var(--caption-btn); }
.mw-btns .mb.x { margin-left: 2px; background: var(--caption-close); }
.mw-btns svg { fill: #fff; width: 9px; height: 9px; }

/* grey image placeholder: a slot waiting for the owner's file, named in its tag */
.ph { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; padding: 0; border: 0; background: linear-gradient(180deg, #e8e8e8, #d6d6d6); box-shadow: inset 0 0 0 1px #c3c3c3; }
.ph-tag { position: absolute; left: 12px; top: 12px; max-width: calc(100% - 24px); display: flex; align-items: center; gap: 4px; padding: 4px 8px 4px 4px; border-radius: 3px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); font: 12px/1.3 var(--ui); color: #000; white-space: nowrap; overflow: hidden; }
.ph-tag .px { width: 16px; height: 16px; flex: none; }

/* ============================================================
   1 · NOW SHOWING — the headline printed on brushed steel, over
   a big CRT monitor playing the owner's photo
   ============================================================ */
/* the ground is a sheet of brushed steel: the grain tile (1600px drawn at 800, so a hairline is one pixel of a 2x
   screen) laid over the steel sweep in overlay, so it only lightens and darkens the metal, with two broad bands of
   sheen where the light catches the grain and a shade between them. The sheet's top edge is lit */
.home > .pt-hero {
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--lead); padding-top: 32px; padding-bottom: 64px;
  background:
    var(--steel-tex) 0 0 / 800px auto,
    linear-gradient(90deg, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, .4) 30%, rgba(255, 255, 255, 0) 52%, rgba(40, 44, 60, .1) 74%, rgba(255, 255, 255, .28) 90%, rgba(255, 255, 255, 0)),
    var(--steel);
  background-blend-mode: overlay, normal, normal;
  box-shadow: inset 0 1px var(--hi);
}
/* the words are printed on the metal: dark ink with a white emboss under it, like the skins' printed labels */
.pt-copy { position: relative; z-index: 2; min-width: 0; display: grid; justify-items: center; text-align: center; }
.pt-h1 { margin: 0; max-width: 20ch; font: 700 32px/1.02 var(--display); letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; text-shadow: 0 1px rgba(255, 255, 255, .7); }
.pt-intro { margin: var(--head) 0 0; max-width: 56ch; font: 16px/1.6 var(--read); color: var(--ink-2); text-wrap: pretty; text-shadow: 0 1px rgba(255, 255, 255, .6); }
.pt-acts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 24px; margin-top: 32px; }
/* Record: an XP push button in the remote's REC red */
.home .btn.rec { border-color: var(--rec-edge); background: var(--rec-face); color: #fff; font-weight: 700; text-shadow: 0 1px 0 rgba(90, 0, 0, .45); }
.home .btn.rec:not(:disabled):hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 0 14px rgba(214, 38, 28, .45); }
.home .btn.rec:not(:disabled):active { background: linear-gradient(180deg, #a8170f, #d83127); }
.home .btn.rec:focus-visible { outline-color: #fff; box-shadow: 0 0 0 2px var(--rec-edge); }
.home .btn.rec .rec-dot { background: radial-gradient(circle at 35% 35%, #fff, #ffd9d4 60%, #f3a79f); box-shadow: none; }
.pt-link { display: inline-flex; align-items: center; gap: 8px; padding: 8px 4px; border: 0; background: none; color: var(--ink); font: 700 14px/1.2 var(--ui); text-decoration: underline; text-decoration-color: rgba(20, 20, 20, .35); text-underline-offset: 4px; }
.pt-link:hover { text-decoration-color: currentColor; }
.pt-link .px { width: 16px; height: 16px; }
.rec-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff9a90, var(--rec) 60%, #8e110b); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }

/* the monitor: the case pages' CRT (its case, tube, chin and stand are style.css's .crt-*), up to 880px wide. The
   photo fills the 4:3 tube; the tube's scanlines and glass lie over the picture and its lower third */
.pt-crt { position: relative; z-index: 2; width: min(100%, 880px); margin: 0; }
.pt-crt picture { display: block; height: 100%; }
.pt-photo { display: block; width: 100%; height: 100%; object-fit: cover; cursor: crosshair; }
/* the Media Center info bar across the bottom of the picture */
.tv-lower { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 56px 20px 16px; background: linear-gradient(180deg, transparent, rgba(3, 18, 60, .8) 42%, var(--bc-scrim)); color: #fff; pointer-events: none; }
.tv-now { margin-bottom: 12px; padding: 4px 8px; border-radius: 3px; background: var(--glow-face); color: var(--glow-ink); font: 700 12px/1 var(--ui); text-transform: uppercase; letter-spacing: .06em; }
.tv-title { max-width: 100%; font: 700 20px/1.15 var(--ui); }
.tv-bar { align-self: stretch; display: block; height: 3px; margin-top: 16px; border-radius: 2px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.tv-bar i { display: block; height: 100%; background: var(--glow); }
/* pointing at a detection box printed on the photo */
.pt-sel { position: absolute; border: 1px dashed var(--hi); outline: 1px dashed #000; outline-offset: -2px; pointer-events: none; }
/* power-on, once: the lamp lights, a bright line opens into the picture, then the info bar rises */
.pt-crt.power picture { animation: tv-on .9s cubic-bezier(.2, .8, .2, 1) both; }
.pt-crt.power .tv-lower { animation: tv-lower .5s .75s cubic-bezier(.2, .8, .2, 1) both; }
.pt-crt.power .crt-lamp { animation: crt-lamp .3s steps(1, end) both; }
@keyframes crt-lamp { from { filter: brightness(.35) saturate(.5); box-shadow: inset 0 -1px 1px rgba(0, 0, 0, .3); } }
@keyframes tv-on { 0% { filter: brightness(0); clip-path: inset(49.6% 0 49.6% 0); } 35% { filter: brightness(2.4); clip-path: inset(49.6% 0 49.6% 0); } 70% { filter: brightness(1.35); clip-path: inset(0); } 100% { filter: brightness(1); clip-path: inset(0); } }
@keyframes tv-lower { from { transform: translateY(100%); opacity: 0; } }

@container home (max-width: 520px) {
  .tv-lower { padding: 40px 16px 12px; }
  .tv-now { margin-bottom: 8px; }
  .tv-title { font-size: 16px; }
  .tv-bar { margin-top: 12px; }
}
/* at full size the monitor is a size bigger than a case page's, so its chin grows with it: a taller chin, and
   bigger grille, keys, lamp and power key. The lower third steps up with the tube */
@container home (min-width: 1100px) {
  .pt-crt .crt-chin { height: 56px; gap: 12px; }
  .pt-crt .crt-grille { height: 20px; background-size: 6px 6px; }
  .pt-crt .crt-keys i { width: 16px; height: 8px; }
  .pt-crt .crt-lamp { width: 8px; height: 8px; }
  .pt-crt .crt-power { width: 20px; height: 20px; }
  .pt-crt .tv-lower { padding: 64px 28px 24px; }
  .pt-crt .tv-title { font-size: 24px; }
}

/* ============================================================
   2 · THE LISTING — torn newsprint, the project's four slots
   ============================================================ */
.home > .pt-listing { z-index: 3; margin-top: -24px; padding: 0; filter: drop-shadow(0 7px 6px rgba(20, 16, 8, .28)); }
.pl-paper {
  position: relative; padding: 20px var(--gutter) 0;
  background: var(--news) var(--news-tex) 0 0 / 1200px auto; color: var(--news-ink);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 47px) no-repeat, var(--tear-mask) bottom / 2400px 48px repeat-x;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - 47px) no-repeat, var(--tear-mask) bottom / 2400px 48px repeat-x;
}
.pl-fringe { position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; height: 48px; background: var(--news-edge);
  -webkit-mask: var(--tear-rim) bottom / 2400px 48px repeat-x; mask: var(--tear-rim) bottom / 2400px 48px repeat-x; }
.pl-h { margin: 0 0 16px; font: 700 24px/1 var(--display); letter-spacing: -0.04em; text-transform: uppercase; }
.pl-slots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; border: 2px solid var(--news-ink); border-bottom: 0; background: var(--news-ink); }
/* each slot spans three rows of the table's grid, so labels, titles and genres line up across a row */
.pl-slots li { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; background: var(--news) var(--news-tex) 0 0 / 1200px auto; }
.pt-slot { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; row-gap: 0; padding: 0; border: 0; background: none; color: inherit; text-align: left; }
/* hierarchy, as a TV guide prints it: the slot time is a small caps label, the programme title leads,
   the synopsis reads, the genre is fine print */
.sl-when { padding: 8px 16px; border-bottom: 2px solid var(--news-ink); font: 700 12px/1.2 var(--ui); letter-spacing: .08em; text-transform: uppercase; }
.sl-main { display: grid; align-content: start; gap: 8px; padding: 16px 16px 20px; }
.sl-main b { font: 700 18px/1.1 var(--display); letter-spacing: -0.02em; }
.sl-main span { font: 14px/1.45 var(--read); color: var(--ink-2); }
/* the genre row ends above the tear: the tear line runs 19-37px above the paper's bottom edge, so 52px of
   empty cell under each label lets only the column rules and blank paper run into it; every word reads whole */
.sl-genre { padding: 8px 16px 12px; border-top: 1px solid var(--news-ink); font: 12px/1.2 var(--read); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.pl-slots li:nth-last-child(-n+2) .sl-genre { padding-bottom: 52px; }
.pt-slot:hover .sl-main b { text-decoration: underline; text-underline-offset: 3px; }
.pt-slot[aria-current="true"] .sl-when { background: var(--news-ink); color: var(--news); }
.pt-slot:focus-visible { outline: 2px dotted var(--news-ink); outline-offset: -6px; }
@container home (min-width: 700px) {
  .pl-slots { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pl-slots li .sl-genre { padding-bottom: 52px; }
}

/* ============================================================
   3 · A NOTE FROM THE HOST — the promise as the headline, the
   letter as the column, a halftone signature
   ============================================================ */
.home > .pt-letter { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.lt-head .pt-h2 { max-width: 14ch; font-size: 32px; }
/* three steps down from the headline: the stand is the deck in full ink, the letter is body copy in a softer ink,
   the signature is the smallest */
.lt-stand { margin: 24px 0 0; max-width: 34ch; font: 18px/1.5 var(--read); color: var(--ink); text-wrap: pretty; }
.lt-body { max-width: 576px; }
.lt-body p { margin: 0 0 20px; font: 16px/1.7 var(--read); color: var(--ink-2); text-wrap: pretty; }
.lt-sign { display: flex; align-items: center; gap: 16px; margin: 32px 0 0 !important; }
.lt-ava { position: relative; flex: none; width: 64px; height: 64px; overflow: hidden; border-radius: 3px; background: var(--news); box-shadow: 0 0 0 1px var(--news-ink); }
.lt-ava img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.25); }
.lt-ava::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(0, 0, 0, .32) 36%, transparent 40%) 0 0 / 3px 3px; mix-blend-mode: multiply; }
.lt-sign b { display: block; font: 700 14px/1.3 var(--display); color: var(--ink); }
.lt-sign small { display: block; font: 14px/1.4 var(--read); color: var(--ink-2); }
@container home (min-width: 820px) {
  .home > .pt-letter { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 64px; align-items: start; }
}

/* ============================================================
   4 · TONIGHT'S FEATURES — the owner's five case studies as programme rows, each cover beside its
   programme info, and the UI shots below on a control-room multiviewer. Each part is headed by its
   name beside a lit green lamp: above its content, and in a column of its own from 1100px
   ============================================================ */
.home > .pt-features { overflow: hidden; margin-top: var(--section); padding-top: var(--band-pad); padding-bottom: var(--band-pad); color: #fff;
  background: radial-gradient(90% 50% at 88% 0%, var(--bc-hi), transparent 72%), linear-gradient(180deg, var(--bc-mid), var(--bc-deep) 80%); }
.pt-features :focus-visible { outline-color: #fff; }
/* the stage's blue (this band and the channel grid's) is dithered like the covers, one dot a screen pixel: a copy
   of the band's own gradient on a layer beneath the content, run through #bcDither (index.html). Text and
   pictures stay sharp above it, and where a browser cannot run the filter the plain gradient still shows */
.home > .pt-features, .home > .pt-channels { isolation: isolate; }
.home > .pt-features::before, .home > .pt-channels::before { content: ""; position: absolute; inset: 0; z-index: -1; background: inherit; filter: url(#bcDither); pointer-events: none; }
.ft-row { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
.ft-air { margin-top: var(--block); }
.ft-mark { margin: 0; display: flex; align-items: flex-start; gap: 12px; font: 700 18px/20px var(--display); color: #fff; text-wrap: balance; }
.ft-mark::before { content: ""; flex: none; width: 20px; height: 20px; box-sizing: border-box; border: 1px solid var(--glow-edge); border-radius: 50%; background: var(--glow-face); box-shadow: 0 0 18px var(--glow-halo); }

/* a programme row: the cover, then its code and number, title, logline and tags; rows split by a dashed rule */
.ft-shows { list-style: none; margin: 0; padding: 0; }
.ft-show { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 32px 0; }
.ft-show:first-child { padding-top: 0; }
/* each row opens its case study: the title is the link, and its hit area spreads over the row's cover and info
   (not the space between rows). Pointed at, the title underlines; focused from the keyboard, XP's dotted
   rectangle runs round the whole row */
.ft-link { color: inherit; text-decoration: none; }
.ft-link::after { content: ""; position: absolute; inset: 32px 0; z-index: 3; }
.ft-show:first-child .ft-link::after { top: 0; }
.ft-show:hover .ft-link, .ft-link:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.ft-link:focus-visible { outline: none; }
.ft-link:focus-visible::after { outline: 1px dotted #fff; outline-offset: 8px; }
.ft-show + .ft-show { background: repeating-linear-gradient(90deg, rgba(214, 226, 248, .35) 0 4px, transparent 4px 8px) top / 100% 1px no-repeat; }
.ft-cover { position: relative; overflow: hidden; border-radius: 10px; background: #000; }
.ft-cover .ph, .ft-cover img { display: block; width: 100%; aspect-ratio: 32 / 21; object-fit: cover; }
.ft-dither { position: absolute; inset: 0; width: 100%; height: 100%; }
/* pointing at a row (or reaching its link from the keyboard) dims its cover and brings up the case study's UI
   card (460 × 345, or smaller on a cover too short to keep 24px above and below it): it rises from under the
   cover's bottom edge and tips upright from 40° back on its X axis to flat as it comes. A touch screen has no
   pointer to point with, so there the card comes up while its cover crosses the middle of the window (app.js,
   homePeek: .peek) and goes down again as it leaves */
.ft-cover { container: ft-cover / inline-size; perspective: 1200px; }
.ft-cover::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(4, 22, 63, .6); opacity: 0; transition: opacity .3s; }
.ft-ui { display: block; position: absolute; left: 50%; top: 50%; z-index: 2; width: min(460px, 87.5cqw - 64px); overflow: hidden; border-radius: 8px;
  box-shadow: 0 28px 48px -18px rgba(0, 0, 0, .7); opacity: 0; transform-origin: 50% 100%; transform: translate(-50%, 25%) rotateX(40deg);
  transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .25s; }
.ft-cover .ft-ui .ph, .ft-cover .ft-ui img { aspect-ratio: 4 / 3; }
.ft-show.peek .ft-cover::after, .ft-show:has(.ft-link:focus-visible) .ft-cover::after { opacity: 1; }
.ft-show.peek .ft-ui, .ft-show:has(.ft-link:focus-visible) .ft-ui { opacity: 1; transform: translate(-50%, -50%) rotateX(0deg); }
@media (hover: hover) {
  .ft-show:hover .ft-cover::after { opacity: 1; }
  .ft-show:hover .ft-ui { opacity: 1; transform: translate(-50%, -50%) rotateX(0deg); }
}
/* without motion the card is simply there, upright and in place */
@media (prefers-reduced-motion: reduce) {
  .ft-ui { transform: translate(-50%, -50%); }
}
.ft-prog { display: flex; flex-direction: column; align-items: flex-start; }
.ft-code { margin: 0 0 20px; display: flex; align-items: center; gap: 12px; font: 12px/20px var(--read); color: var(--bc-soft); }
/* the number sits in a hairline box, led in by a short line from a dot; it keeps the Figma's 10px, the
   owner's one exception to the type scale */
.ft-no { position: relative; margin-left: 20px; padding: 0 8px; border: 1px solid rgba(214, 226, 248, .6); border-radius: 4px; font-size: 10px; }
.ft-no::before { content: ""; position: absolute; right: 100%; top: 50%; width: 20px; height: 3px; transform: translateY(-50%);
  background: radial-gradient(circle, currentColor 1.5px, transparent 1.6px) 0 50% / 3px 3px no-repeat, linear-gradient(currentColor, currentColor) 0 50% / 100% 1px no-repeat; }
/* this band keeps the Figma's font sizes; only the title steps down on a phone, where 44px does not fit */
.ft-title { margin: 0; font: 700 32px/1.05 var(--display); letter-spacing: -0.025em; color: #fff; text-wrap: balance; }
.pt-features .ph-tag { font-size: 11px; }
.ft-sub { margin: 12px 0 0; max-width: 44ch; font: 16px/1.6 var(--read); color: #e3ecff; text-wrap: pretty; }
/* the owner's white tag label read 3:1 on its half-white pill; Broadcast Deep ink holds 5:1 on any part of the band */
.ft-tags { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
/* 24px tags at 12px, the owner's size for every tag on the site (smaller than the Figma's 14px) */
.ft-tags li { padding: 4px 12px; border-radius: 16px; background: rgba(255, 255, 255, .5); font: 12px/16px var(--read); letter-spacing: .02em; color: var(--bc-deep); white-space: nowrap; }

/* also on air: the UI shots as feeds on one control-room display, each with its under-monitor label and
   tally lamp; pointing at a feed takes it to air (red), and a wall never ends on a ragged row */
.mv-mon { padding: 12px; border-radius: 12px; background: linear-gradient(180deg, #3b3f49, #2a2d35 55%);
  box-shadow: inset 0 1px rgba(255, 255, 255, .2), inset 0 -1px rgba(0, 0, 0, .5), 0 30px 50px -26px rgba(0, 0, 0, .8); }
.mv-wall { list-style: none; margin: 0; padding: 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border-radius: 4px; background: #000; }
.mv-feed { position: relative; width: 100%; display: block; padding: 0; border: 0; background: #000; color: #e3ecff; text-align: left; }
.mv-pic { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #0b0d12; }
.mv-pic .ph, .mv-pic img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.mv-umd { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 8px; background: #000; font: 700 12px/1 var(--ui); white-space: nowrap; overflow: hidden; }
.mv-umd span { overflow: hidden; text-overflow: ellipsis; }
.mv-tally { flex: none; width: 8px; height: 8px; border-radius: 2px; background: #3a3f4a; transition: background .15s, box-shadow .15s; }
.mv-feed::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .15s; }
.mv-feed:hover::after, .mv-feed:focus-visible::after { box-shadow: inset 0 0 0 2px var(--rec); }
.mv-feed:hover .mv-tally, .mv-feed:focus-visible .mv-tally { background: var(--rec); box-shadow: 0 0 6px rgba(214, 38, 28, .85); }
.mv-feed:hover .mv-umd, .mv-feed:focus-visible .mv-umd { color: #fff; }
.mv-feed:focus-visible { outline: none; }
.mv-off { display: none; }
.mv-off .mv-pic { display: grid; place-items: center; background: #06070a; }
.mv-off .mv-pic span { font: 700 12px/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: #7c818c; }
/* the wall locks onto its feeds once, the first time it scrolls into view */
.mv-wall.lock .mv-pic { animation: mv-lock .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--k) * 55ms); }
@keyframes mv-lock { 0% { filter: brightness(0); } 35% { filter: brightness(1.9) contrast(1.3); } 100% { filter: none; } }
@container home (max-width: 639.98px) {
  .mv-off.ns-2 { display: block; }
}
@container home (min-width: 640px) {
  .ft-row { row-gap: 32px; }
  .ft-title { font-size: 44px; }
  .mv-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mv-off.ns-3 { display: block; }
}
/* the cover beside its programme info at the Figma's 640 : 338. The rows share one pair of columns (a
   subgrid), so every cover is one size and the info never narrows past the longest title */
@container home (min-width: 760px) {
  .ft-shows { display: grid; grid-template-columns: minmax(0, 640fr) 338fr; column-gap: 32px; }
  .ft-show { grid-column: 1 / -1; grid-template-columns: subgrid; column-gap: 32px; align-items: start; }
  .ft-tags { margin-top: 44px; }
}
/* the heads' column keeps the Figma's share (250 of 1320px), from 200px up to its 250px */
@container home (min-width: 1100px) {
  .ft-row { grid-template-columns: clamp(200px, 19%, 250px) minmax(0, 1fr); column-gap: 60px; row-gap: 0; align-items: start; }
}

/* ============================================================
   5 · CHANNELS — the logos, in a channel grid on the broadcast stage. The band follows Tonight's features
   without a gap, on its deepest blue, and is laid out as the stage's third part: the same row (.ft-row),
   its name beside a lit lamp (.ft-mark), so the grid runs exactly as wide as the multiviewer above it
   ============================================================ */
.home > .pt-channels { padding-top: 0; padding-bottom: var(--band-pad); background: var(--bc-deep); color: #fff; }
/* the ruled grid, drawn the way Media Center draws its guide: 1px light rules between deep-blue cells */
.ch-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border: 1px solid rgba(214, 226, 248, .28); background: rgba(214, 226, 248, .28); }
.ch-grid li { display: grid; gap: 12px; padding: 16px 16px 20px; background: var(--bc-deep); }
.ch-no { font: 700 12px/1 var(--display); letter-spacing: .02em; color: var(--bc-soft); }
/* every logo takes the area of a --lg square, so a wide wordmark and a square mark weigh the same. They sit
   in grey (no saturation), so no client's colour competes with the stage, and take their own colours only
   while the pointer is on their cell */
.ch-art { --lg: 48px; height: var(--lg); display: grid; place-items: center; padding: 0 8px; }
.ch-logo { width: auto; max-width: 100%; height: calc(var(--lg) * var(--k)); object-fit: contain; filter: grayscale(1); opacity: .75; transform: scale(var(--zoom, 1)); transition: filter .2s, opacity .2s; }
/* at rest each logo sits back at 75%; under the pointer it comes up to full strength in its own colours */
.ch-grid li:hover .ch-logo { filter: none; opacity: 1; }
/* a file drawn in dark ink for a light ground (found when it loads, see logoInk) is turned light: its black
   goes white, and under the pointer its hues come back while the black stays white */
.ch-logo.ink { filter: grayscale(1) invert(1); }
.ch-grid li:hover .ch-logo.ink { filter: invert(1) hue-rotate(180deg); }
.ch-grid .ch-off { display: none; }
@container home (max-width: 639.98px) {
  .ch-grid .ch-off.ns-2 { display: block; }
}
@container home (min-width: 640px) {
  .ch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ch-art { --lg: 64px; }
  .ch-grid .ch-off.ns-3 { display: block; }
}
@container home (min-width: 1100px) {
  .ch-art { --lg: 72px; }
}

/* ============================================================
   6 · REVIEWS — the owner's clients in their own words: a row of
   quote columns that runs past the window's edge and scrolls
   sideways (the owner's Figma, 2026-09-25)
   ============================================================ */
.rv-head { margin: 0; font: 700 24px/1 var(--display); letter-spacing: -0.03em; text-transform: uppercase; color: var(--ink); }
/* the row reaches both edges of the window; its padding starts the first column on the gutter. The scrollbar
   stays hidden: the cut-off column shows there is more, and a mouse drags the row (app.js rvDrag) */
.rv-row { list-style: none; display: flex; gap: 20px; margin: 32px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-padding-inline: var(--gutter); }
.rv-row::-webkit-scrollbar { display: none; }
.rv-row.grab { cursor: grab; }
.rv-row.drag { cursor: grabbing; user-select: none; }
/* each column holds its quote at the top and its byline at the foot, level with its neighbours', and ends on
   a hairline rule */
.rv { flex: none; display: flex; width: min(560px, 80cqi); padding-right: 20px; border-right: .5px solid #a9b7cf; }
.rv figure { flex: 1; display: flex; flex-direction: column; gap: 32px; margin: 0; }
.rv blockquote { margin: 0; }
.rv blockquote p { margin: 0; font: 16px/1.6 var(--read); color: #000; }
.rv blockquote p + p { margin-top: 1.6em; }
.rv figcaption { display: grid; margin-top: auto; font: 12px/1.3 var(--ui); color: #000; }
.rv figcaption b { font: 700 14px/1.35 var(--ui); }
/* the icons on Home's light sections keep to one colour: Broadcast Mid line on a Broadcast Soft fill */
.pe-items .px { --ic-line: var(--bc-mid); --ic-fill: var(--bc-soft); }
/* on a phone one column fills the view and the next one peeks in; a swipe settles on a column. Only one column
   shows at a time, so each keeps its byline right under its own quote */
@container home (max-width: 759px) {
  .rv-row { align-items: flex-start; scroll-snap-type: x mandatory; }
  .rv { scroll-snap-align: start; }
}

/* ============================================================
   7 · THE EPISODE GUIDE — each episode's still on a TV, the remote
   ============================================================ */
/* the groove between What clients say and the episode guide (the owner's request): XP's etched line cut deeper,
   an Etched Grey edge over a Face Rule wall and a Luna face floor that fades into the paper, its ends fading out
   like the Start menu's separators. Half a section's space above it and half below */
.home > .pt-divider { height: 7px; margin: calc(var(--section) / 2) var(--gutter) 0; border: 0;
  background: linear-gradient(180deg, var(--shade) 0 1px, #d8d2bd 1px 2px, var(--face) 2px 5px, var(--hi) 7px);
  -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.home > .pt-divider + .pt-episodes { padding-top: calc(var(--section) / 2); }
@media (forced-colors: active) { .home > .pt-divider { border-top: 1px solid CanvasText; } }
/* the TV and the copy share a row: the copy takes the width its longest What you get row needs to stay on one
   line, and the TV takes the rest, from 440px up to the Figma's 704px. Where the two no longer fit side by side,
   the copy wraps under the TV */
.pe-main { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px 60px; margin-top: 32px; }
/* the TV and its remote. The TV block is a size container, so the remote follows the TV's own width: it rests
   across the TV's lower right corner once the TV is wide enough to keep the caption clear, and below that it
   tucks under the bezel's lip. The TV keeps room under it for what the remote hangs below the bezel */
.pe-set { --rm-h: 116px; position: relative; flex: 1 1 440px; min-width: 0; max-width: 704px; container: pe-tv / inline-size; }
.pe-tv { position: relative; margin: 0 0 calc(var(--rm-h) - 20px); }
/* the TV: a 2004 silver flat panel, with a blue power LED at the bezel's lower right */
.tv-bezel { position: relative; padding: 12px 12px 28px; border-radius: 12px; background: var(--silver-face); box-shadow: inset 0 1px var(--hi), inset 0 -2px 3px rgba(40, 44, 60, .25), 0 26px 44px -20px rgba(0, 20, 70, .6), 0 2px 4px rgba(0, 0, 0, .2); }
.tv-led { position: absolute; right: 24px; bottom: 11px; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle, #cfeaff, #1e7be0); box-shadow: 0 0 6px #4aa8ff; }
.pe-screen { position: relative; overflow: hidden; aspect-ratio: 17 / 10; border-radius: 3px; background: #000; box-shadow: var(--screen-edge); }
.pe-img { display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
/* a light fade under the caption: the scrim reaches a third of its strength at the screen's foot (the owner's
   Figma). The caption keeps a navy edge of its own, so the white reads over a light picture too */
.pe-lower { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 32px 16px 12px; background: linear-gradient(180deg, transparent, var(--bc-scrim) 275%); color: #fff; font: 700 14px/1.2 var(--ui); text-shadow: 0 0 2px var(--bc-scrim), 0 1px 3px var(--bc-scrim); }
.pe-lower .tv-now { margin-bottom: 0; text-shadow: none; }
/* changing the channel: a short burst of snow over the picture */
.pe-screen.flick::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--news-tex) 0 0 / 140px 140px, rgba(255, 255, 255, .5); background-blend-mode: difference; animation: flick .24s steps(4) both; }
@keyframes flick { 0% { opacity: 1; background-position: 0 0, 0 0; } 50% { background-position: 37px 11px, 0 0; } 100% { opacity: 0; background-position: 11px 43px, 0 0; } }
/* the copy's width is its What you get row on one line: the title and the text fill whatever that gives and
   never widen it (inline-size containment). From 760px the episode showing sits over a hidden copy of every
   episode in the same cell, so the copy keeps the width and height of the longest and changing the episode
   never moves the TV, the remote or the page below */
.pe-copy { flex: 0 1 auto; min-width: 0; display: grid; padding-top: 12px; }
.pe-copy > * { grid-area: 1 / 1; min-width: 0; }
.pe-ghost { display: none; visibility: hidden; }
.pe-title { margin: 0; font: 600 24px/1.15 var(--display); letter-spacing: -0.02em; text-wrap: balance; contain: inline-size; }
/* body copy under a heading: 16px in a softer ink than the heading, on every light section */
.pe-text { margin: 16px 0 0; max-width: 70ch; font: 16px/1.6 var(--read); color: var(--ink-2); contain: inline-size; }
.pe-get { margin: 28px 0 20px; font: 700 14px/1.2 var(--ui); }
/* What you get: three things side by side, each icon over its label, spread across the copy's width. A label
   never breaks; where the copy is narrower than the row, the last thing moves to a row of its own */
.pe-items { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; }
.pe-items li { display: grid; align-content: start; justify-items: start; gap: 8px; font: 16px/1.4 var(--read); color: var(--ink-2); white-space: nowrap; }
.pe-items .px { width: 24px; height: 24px; }
/* the remote: a silver 2004 media remote lying on its side, 220px on a mouse desktop (44px keys on touch, below).
   A brushed shell with a glossy top edge, two dark recessed wells for the keys (round arrow keys, then rubber
   number keys standing on their skirts), wrapping under each other. It hangs from the TV block's foot: tucked
   under the bezel, centred, until the corner is clear */
.pt-remote { position: absolute; z-index: 1; bottom: 0; left: 50%; translate: -50% 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 12px; width: 220px; max-width: 100%; padding: 10px 16px;
  border-radius: 32px 26px 26px 32px;
  background: linear-gradient(180deg, transparent 8%, rgba(255, 255, 255, .6) 16%, transparent 26%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, rgba(40, 44, 60, .035) 1px 3px),
    linear-gradient(180deg, #f8f9fb 0%, #e2e5ea 55%, #a2a7b1 100%);
  box-shadow: inset 0 2px 1px var(--hi), inset 0 -3px 5px rgba(40, 44, 60, .35), 0 2px 3px rgba(0, 0, 0, .2), 0 18px 26px -12px rgba(4, 14, 32, .3); }
.rm-well { display: grid; gap: 6px; padding: 6px; border-radius: 10px; background: linear-gradient(180deg, #24272e, #363a42);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .65), inset 0 -1px 0 rgba(255, 255, 255, .08), 0 1px 0 rgba(255, 255, 255, .9); }
.rm-pad { grid-auto-flow: column; align-items: center; border-radius: 22px; }
.rm-key { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid #1b1d22; border-radius: 50%; background: var(--silver-key); box-shadow: 0 2px 0 #121418, inset 0 1px 0 rgba(255, 255, 255, .8); }
.rm-key .px { width: 16px; height: 16px; --ic-line: #1d2a3a; }
.rm-go { border-color: #1f4a0e; background: radial-gradient(circle at 35% 30%, #dcf8b8, #7cc83c 45%, #3e8a1c); box-shadow: 0 3px 0 #173a0a, 0 0 10px var(--glow-halo), inset 0 1px 0 rgba(255, 255, 255, .6); }
.rm-key:hover, .rm-num:hover { filter: brightness(1.08); }
.rm-nums { grid-template-columns: repeat(4, 32px); }
.rm-num { height: 32px; padding: 0; border: 1px solid #1b1d22; border-radius: 6px 6px 8px 8px; background: linear-gradient(180deg, #f5f6f8, #cdd0d6 72%, #b6bac2); box-shadow: 0 2px 0 #121418, inset 0 1px 0 var(--hi); color: #1d2a3a; font: 700 14px/1 var(--ui); }
.rm-num[aria-pressed="true"] { border-color: #1f4a0e; background: var(--glow-face); color: var(--glow-ink); box-shadow: 0 2px 0 #173a0a, 0 0 10px var(--glow-halo), inset 0 1px 0 rgba(255, 255, 255, .6); }
.rm-key:active, .rm-num:active { transform: translateY(2px); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .35); }
.pt-remote button:focus-visible { outline: 2px dotted #000; outline-offset: 2px; }
.rm-well button:focus-visible { outline-color: var(--hi); }
/* a TV 500px wide keeps the caption clear of the remote: from there the remote rests across the lower right
   corner, its middle 8px up from the TV's foot and 32px of it past the TV's edge (inside the gap or the gutter),
   as the Figma lays it */
@container pe-tv (min-width: 500px) {
  .pe-tv { margin-bottom: calc(var(--rm-h) / 2 - 8px); }
  .pt-remote { left: auto; right: -32px; translate: none; }
}
@container home (min-width: 760px) {
  .pe-ghost { display: block; }
}
/* on a phone the copy takes the full width under the TV, and the three things read down a list, each icon
   beside its label; a label too long to sit beside its icon drops under it whole */
@container home (max-width: 639px) {
  .pe-copy { flex-basis: 100%; }
  .pe-items { display: grid; gap: 12px; }
  .pe-items li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; white-space: normal; }
  .pe-items .px { flex: none; }
}

/* ============================================================
   8 · SERVICES — a Media Center menu: the focused item glows
   green and its notes open beside it
   ============================================================ */
.home > .pt-services { margin-top: var(--section); padding-top: var(--band-pad); padding-bottom: var(--band-pad); overflow: hidden; color: #fff;
  background: radial-gradient(90% 120% at 100% 0%, var(--bc-hi), var(--bc-mid) 45%, var(--bc-deep) 100%); }
/* the head is a Section Mark, as over the channel grid: 24px above the menu, 32px from 640px */
.mm-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 24px; }
/* the menu keeps its items together at the top, however tall the picture beside it */
.mm-list { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; gap: 4px; }
.mm-item { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 8px 16px; border: 1px solid transparent; border-radius: 6px; background: none; color: #e3ecff; text-align: left; font: 700 24px/1.1 var(--display); letter-spacing: -0.02em; }
.mm-no { flex: none; min-width: 2.2em; font: 700 12px/1 var(--ui); opacity: .3; font-variant-numeric: tabular-nums; }
.mm-t { flex: 1; min-width: 0; }
.mm-item .px { flex: none; width: 16px; height: 16px; opacity: 0; --ic-line: var(--glow-ink); }
.mm-item:hover { background: rgba(255, 255, 255, .08); }
.mm-item[aria-pressed="true"] { border-color: var(--glow-edge); background: var(--glow-face); color: var(--glow-ink); box-shadow: 0 0 20px var(--glow-halo); }
.mm-item[aria-pressed="true"] .px { opacity: 1; }
.mm-item:focus-visible { outline: 2px dotted #fff; outline-offset: 2px; }
.mm-pane { align-self: start; }
.mm-fig { margin: 0; }
/* the owner's pictures keep their own shape (4444 × 4823) and sit flat on the blue, with no line or shadow; a slot
   waiting for one takes the same shape */
.mm-img { display: block; width: 100%; height: auto; aspect-ratio: 4444 / 4823; object-fit: cover; border-radius: 10px; }
.mm-img.ph { overflow: hidden; }
.mm-pane.swap { animation: mce-in .3s cubic-bezier(.2, .8, .2, 1); }
@keyframes mce-in { from { opacity: 0; transform: scale(1.03); } }
@container home (min-width: 760px) {
  .mm-body { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 48px; }
}

/* ============================================================
   9 · FAQ — Help Topics
   ============================================================ */
@container home (min-width: 820px) {
  /* the heading sits on the window's middle, so the short column balances the tall one */
  .home > .pt-faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: 64px; align-items: center; }
}
@container home (max-width: 819px) {
  .pt-faq .mw { margin-top: var(--lead); }
}
.help-tabs { display: flex; padding: 4px 4px 0; position: relative; z-index: 1; margin-bottom: -2px; }
.help-tabs .tab { padding: 4px 12px; border: 1px solid var(--tab-line); border-bottom: 0; border-radius: 3px 3px 0 0; background: var(--tab-face); }
.help-tabs .tab.on { background: #fcfcfe; box-shadow: inset 0 2px #ffc83c, inset 0 3px var(--orange-rule); }
.help-main { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; padding: 8px; background: #fcfcfe; border: 1px solid var(--tab-line); }
.faq-q { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 4px; border: 0; background: none; color: #000; text-align: left; font: 12px/1.3 var(--ui); }
.faq-q .px { width: 16px; height: 16px; flex: none; }
.faq-q span { padding: 0 4px; }
.faq-q:hover span { text-decoration: underline; }
.faq-q[aria-expanded="true"] span { background: var(--sel); color: #fff; text-decoration: none; }
.faq-q:focus-visible { outline: none; }
.faq-q:focus-visible span { outline: 1px dotted #000; outline-offset: 1px; }
.faq-a { padding: 12px 16px 16px 28px; font: 14px/1.6 var(--read); }
.faq-a h3 { margin: 0 0 8px; font: 700 16px/1.3 var(--display); color: var(--heading-ink); }
.faq-a p { margin: 0 0 12px; max-width: 52ch; }
.faq-empty { display: none; margin: 0; padding: 12px 16px; color: var(--ink-2); }
@container home (min-width: 820px) {
  /* the window is as tall as its list of topics; every answer is shorter, so nothing jumps between topics */
  .help-main { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 12px; }
  .faq-q { grid-column: 1; grid-row: var(--r); }
  .faq-a, .faq-empty { grid-column: 2; grid-row: 1 / span 7; align-self: stretch; padding: 12px 16px 16px; border-left: 1px solid #d8e1f3; }
  .faq-empty:not([hidden]) { display: block; }
  /* every answer keeps its place in the one cell, unseen, so the window is as tall as the longest and never jumps */
  .faq-a[hidden] { display: block !important; visibility: hidden; }
}

/* ============================================================
   10 · THE CLOSE — a 2000s credit squeeze on the Start button's green: the programme's end credits
   shrink into a dark column while "Up next" takes the rest of the frame, and the next programme is
   the visitor's project, written in a New Message window
   ============================================================ */
.home > .hm-cta { --band: radial-gradient(70% 55% at 88% 0%, rgba(255, 255, 255, .14), transparent 72%), var(--band-green); margin-top: var(--section); padding-top: var(--band-pad); padding-bottom: 0; }
.hm-cta::after { display: none; }
.cl-squeeze { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "next" "credits"; gap: 48px; }
.cl-next { grid-area: next; position: relative; min-width: 0; }
.cta-h { max-width: 16ch; font-size: 32px; line-height: 1.02; letter-spacing: -0.03em; }
.cl-lead { margin: var(--head) 0 0; max-width: 40ch; font: 16px/1.6 var(--read); color: var(--on-band); text-wrap: pretty; }
.cl-next .hm-mail { margin-top: 32px; }

/* the credits: the programme's end frame, squeezed. Roles right, names left, around one centre line */
.cl-credits { position: relative; z-index: 4; grid-area: credits; min-width: 0; padding: 32px 20px; border-radius: 10px; color: #fff;
  background: linear-gradient(180deg, var(--bc-deep), #020b22); box-shadow: inset 0 0 0 1px rgba(214, 226, 248, .16), inset 0 24px 40px -24px rgba(29, 86, 184, .55), 0 26px 44px -22px rgba(0, 20, 0, .6); }
.cr-roll { display: grid; justify-items: center; text-align: center; }
.cr-star { display: grid; gap: 8px; margin: 0; }
.cr-star b { font: 700 18px/1.15 var(--display); letter-spacing: -0.01em; }
.cr-star span { font: 700 12px/1.3 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--bc-soft); }
.cr-list { width: 100%; display: grid; gap: 12px; margin: 32px 0 0; padding: 24px 0 0; border-top: 1px solid rgba(214, 226, 248, .18); }
.cr-list div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; align-items: baseline; }
.cr-list dt { text-align: right; font: 700 12px/1.5 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--bc-soft); }
.cr-list dd { margin: 0; text-align: left; font: 14px/1.45 var(--read); color: #fff; overflow-wrap: anywhere; }
.cr-list time { font-variant-numeric: tabular-nums; }
.cr-list .nb { white-space: nowrap; }
.cr-list a, .cr-list button { padding: 0; border: 0; background: none; color: #fff; font: inherit; text-align: left; text-decoration: underline; text-decoration-color: rgba(214, 226, 248, .45); text-underline-offset: 3px; cursor: pointer; }
.cr-list a:hover, .cr-list button:hover { color: var(--glow); text-decoration-color: currentColor; }
.cl-credits :focus-visible { outline: 2px dotted #fff; outline-offset: 2px; }
.cr-motto { margin: 32px 0 0; font: 700 16px/1.35 var(--display); color: #fff; }
.cr-copy { margin: 12px 0 0; font: 12px/1.3 var(--ui); color: var(--bc-soft); }
/* side by side from 960px: the ask first on the left, the credits squeezed into the right-hand column, so the
   reading order, the tab order and the picture agree */
@container home (min-width: 960px) {
  .cl-squeeze { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "next credits"; column-gap: 48px; }
  .cl-credits { display: grid; align-content: center; }
}
/* the squeeze, once: a full-frame screen holds, then shrinks into the credits column while the credits roll
   to rest inside it and Up next slides in; the frame ends exactly where the credits panel sits, so handing
   back to the panel is seamless, and every part starts from the layout that is already visible */
.cl-squeeze.squeeze::before { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: 10px; pointer-events: none; background: linear-gradient(180deg, var(--bc-deep), #020b22);
  box-shadow: inset 0 0 0 1px rgba(214, 226, 248, .16); animation: cl-squeeze 1.3s cubic-bezier(.2, .8, .2, 1) both; }
.cl-squeeze.squeeze .cl-credits { background: none; box-shadow: none; }
.cl-squeeze.squeeze .cl-next { animation: cl-next .8s .55s cubic-bezier(.2, .8, .2, 1) both; }
.cl-squeeze.squeeze .cr-roll { animation: cr-roll .9s .45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes cl-squeeze { 0%, 28% { clip-path: inset(0 0 0 0 round 10px); } 72%, 100% { clip-path: inset(0 0 0 calc(100% - var(--cw)) round 10px); } }
@keyframes cl-next { from { opacity: 0; transform: translateX(48px); } }
@keyframes cr-roll { from { opacity: 0; transform: translateY(40px); } }

/* the fine print under the frame: the startup setting, and a way back to the top */
.cl-fine { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 48px; padding: 16px 0 20px; border-top: 1px solid rgba(255, 255, 255, .28); }
.home .ft-start { min-height: 24px; gap: 8px; font: 12px/1.3 var(--ui); color: #fff; }
.cl-top { display: inline-flex; align-items: center; gap: 8px; min-height: 24px; padding: 4px 8px; border: 0; border-radius: 3px; background: none; color: #fff; font: 12px/1.3 var(--ui); }
.cl-top:hover { background: rgba(255, 255, 255, .16); }
.cl-top .px { width: 16px; height: 16px; --ic-fill: var(--ic-green); }

/* New Message */
.mail-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 8px; align-items: center; padding: 8px; }
.mail-head label { text-align: right; }
.mail-to { display: flex; gap: 4px; min-width: 0; }
.mail-to .field { flex: 1; }
.home .mail-copy { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; }
.mail-copy .px { width: 16px; height: 16px; }
.home .field { height: 22px; min-width: 0; padding: 0 4px; border: 0; border-radius: 0; font: 12px/20px var(--ui); color: #000; }
.home select.field {
  -webkit-appearance: none; appearance: none; padding-right: 24px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='18'%3E%3Crect x='.5' y='.5' width='16' height='17' rx='2.5' fill='%23c1d3fb' stroke='%23fff'/%3E%3Crect x='1.5' y='1.5' width='14' height='15' rx='1.5' fill='none' stroke='%239eb7f2'/%3E%3Cpath d='M5 7.5l3.5 3.5L12 7.5' fill='none' stroke='%234d6185' stroke-width='2'/%3E%3C/svg%3E") right 2px center / 17px 18px no-repeat;
}
.home .mail-body { display: block; width: calc(100% - 16px); height: auto; min-height: 160px; margin: 0 8px; padding: 8px 12px; border: 0; border-radius: 0; resize: vertical; background: #fff; box-shadow: var(--well); font: 14px/1.5 var(--read); color: #000; }
.mail-body::placeholder { color: var(--ink-2); opacity: .75; }
.mail-send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 12px 8px 8px; }
.mail-send small { flex: 1 1 200px; min-width: 0; font: 12px/1.3 var(--ui); color: var(--dark); }
/* what became of the message: XP's notification balloon standing on the Send button (app.js, mailBalloon) */
.mail-send { position: relative; }
.mail-bal { position: absolute; left: 0; bottom: calc(100% - 4px); z-index: 3; width: min(320px, calc(100% - 8px)); padding: 8px 28px 8px 12px;
  background: var(--tip); color: #000; border: 1px solid #000; border-radius: 7px; box-shadow: var(--menu-shadow); font: 12px/1.4 var(--ui);
  animation: mail-bal .2s cubic-bezier(.2, .8, .2, 1); transition: opacity .3s; }
.mail-bal::before, .mail-bal::after { content: ''; position: absolute; left: 44px; border-style: solid; border-color: transparent; }
.mail-bal::before { top: 100%; border-width: 12px 12px 0 0; border-top-color: #000; }
.mail-bal::after { top: calc(100% - 1px); left: 45px; border-width: 10px 10px 0 0; border-top-color: var(--tip); }
.mail-bal b { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.mail-bal p { margin: 0; text-wrap: pretty; }
.mail-bal .mail-copy { margin-top: 8px; }
.mail-bal.out { opacity: 0; }
@keyframes mail-bal { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .mail-bal { animation: none; transition: none; } }
/* a field only a bot fills in (worker/index.js drops what arrives with it) */
.mail-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ============================================================
   THE TWO STEPS: at 640px and 1100px of window width the rhythm
   opens up and the headings step up the type scale (12, 14, 16,
   18, 20, 24, 28, 32, 40, 44), never in between
   ============================================================ */
@container home (min-width: 640px) {
  .home > .pt-hero { padding-top: 40px; padding-bottom: 72px; }
  .home > .pt-listing { margin-top: -32px; }
  .pl-paper { padding-top: 24px; }
  .rv-row { gap: 32px; }
  /* 28px, not the Figma's 32: Space Grotesk sets a hair wider in the browser, and the Figma's longest line takes
     528.3px here, so the quotes get 531px and break where the Figma breaks them. The longest line still ends
     32px short of the rule */
  .rv { padding-right: 28px; }
  .cl-next .hm-mail { margin-top: 40px; }
  .cl-credits { padding: 40px 24px; }
  .pt-h2, .pl-h { font-size: 32px; }
  .pt-h1, .cta-h, .lt-head .pt-h2 { font-size: 40px; }
  .rv-head, .pe-title { font-size: 28px; }
  .sl-main b, .cr-star b, .lt-stand { font-size: 20px; }
  .pt-services .mm-body { margin-top: 32px; }
  .mm-item { font-size: 32px; }
}
@container home (min-width: 1100px) {
  .home > .pt-hero { padding-top: 48px; padding-bottom: 80px; }
  .home > .pt-listing { margin-top: -40px; }
  .pl-paper { padding-top: 32px; }
  .home > .pt-letter { column-gap: 80px; }
  .rv-row { margin-top: 40px; }
  /* the owner's Figma: 120px from the quotes to the episode guide's head, the groove in the middle */
  .home > .pt-divider { margin-top: 60px; }
  .home > .pt-divider + .pt-episodes { padding-top: 60px; }
  .mm-body { column-gap: 64px; }
  .home > .pt-faq { column-gap: 80px; }
  .cl-squeeze { column-gap: 64px; }
  .cl-credits { padding: 48px 32px; }
  .cl-fine { margin-top: 64px; }
  .pt-h2, .pl-h { font-size: 40px; }
  .pt-h1, .cta-h, .lt-head .pt-h2 { font-size: 44px; }
  .rv-head { font-size: 32px; }
  .sl-main b, .cr-star b { font-size: 24px; }
  /* the services menu at the owner's 52px, where its column holds the longest name on one line (32px from 640px,
     24px on a phone) */
  .mm-item { font-size: 52px; }
}

/* ============================================================
   SMALL AND TOUCH SCREENS: every control takes a 44px finger,
   on a phone (the window is full screen) and on a touch tablet
   at any width
   ============================================================ */
@media (max-width: 720px), (pointer: coarse) {
  .mail-bal { padding-right: 44px; }
  .mail-bal .mail-copy { min-height: 44px; }
  .mail-bal .pet-x { top: 0; right: 0; width: 44px; height: 44px; border: 0; }
  .mail-bal .pet-x::before, .mail-bal .pet-x::after { left: 16px; right: 16px; top: 21px; }
  .home .btn { min-height: 44px; }
  .home .field { height: 44px; }
  .pt-link { min-height: 44px; }
  /* the remote with every key 44px, its shell trimmed to 280px round the two wells */
  .pe-set { --rm-h: 164px; }
  .pt-remote { gap: 12px 16px; width: 280px; padding: 16px 24px; border-radius: 44px 36px 36px 44px;
    box-shadow: inset 0 2px 1px var(--hi), inset 0 -4px 6px rgba(40, 44, 60, .35), 0 2px 3px rgba(0, 0, 0, .2), 0 24px 34px -16px rgba(4, 14, 32, .3); }
  .rm-well { gap: 8px; padding: 8px; border-radius: 14px; }
  .rm-pad { border-radius: 30px; }
  .rm-key { width: 44px; height: 44px; }
  .rm-go { box-shadow: 0 3px 0 #173a0a, 0 0 14px var(--glow-halo), inset 0 1px 0 rgba(255, 255, 255, .6); }
  .rm-nums { grid-template-columns: repeat(4, 44px); }
  .rm-num { height: 44px; border-radius: 8px 8px 10px 10px; }
  /* the touch remote needs a 560px TV to rest on its corner clear of the caption; below that it stays tucked */
  @container pe-tv (max-width: 559px) {
    .pe-tv { margin-bottom: calc(var(--rm-h) - 20px); }
    .pt-remote { left: 50%; right: auto; translate: -50% 0; }
  }
  .faq-q { min-height: 44px; }
  .cr-list { gap: 0; }
  .cr-list div { min-height: 44px; align-items: center; }
  .cr-list a, .cr-list button { display: inline-flex; align-items: center; min-height: 44px; }
  .cl-top { min-height: 44px; }
  .home .ft-start { min-height: 44px; }
}