/* Fullhouse – a teletext magazine. One face, eight colours, a character grid. */

@font-face {
  font-family: "Bedstead";
  src: url("fonts/bedstead.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Bedstead SC";
  src: url("fonts/bedstead-semicondensed.woff") format("woff");
  font-display: swap;
}

:root {
  /* The teletext palette: these eight and nothing in between. */
  --black: #000;
  --white: #fff;
  --yellow: #ff0;
  --cyan: #0ff;
  --green: #0f0;
  --magenta: #f0f;
  --red: #f00;
  --blue: #00f;

  --face: "Bedstead", ui-monospace, monospace;
  --cell: 1.3;            /* line height of one character row */
  --row: calc(1em * var(--cell));
  --gutter: clamp(20px, 5vw, 56px);
  /* Space between pages: generous everywhere, a little more on phones where sections stack long. */
  --between: clamp(4.5rem, 9vw, 7.5rem);
  --page: 1180px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html {
  background: var(--black);
  color: var(--white);
  font-family: var(--face);
  font-size: clamp(15px, 0.4vw + 12px, 18px);
  line-height: var(--cell);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--blue) var(--black);
}
@media (max-width: 480px) {
  html { font-family: "Bedstead SC", var(--face); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body { margin: 0; padding-bottom: calc(var(--row) * 3); }

::selection { background: var(--yellow); color: var(--black); }

a { color: var(--cyan); text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
a:hover { color: var(--black); background: var(--cyan); text-decoration: none; }

/* Focus: the one thing that lights up, as on the TV. */
:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.skip {
  position: absolute; left: var(--gutter); top: -10em; z-index: 10;
  background: var(--yellow); color: var(--black); padding: 0.25em 0.75em;
}
.skip:focus { top: 0.5em; }

.wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }

/* Double height: same width, twice as tall, like a teletext title. */
.dh {
  display: inline-block;
  white-space: nowrap;
  transform: scaleY(2);
  transform-origin: 0 0;
  margin-bottom: var(--row);
}

/* ---------- Header line ---------- */

/* Always on screen, like the top row of a teletext page: the page number follows you. */
.header-bar { position: sticky; top: 0; z-index: 6; background: var(--black); }

.header-line {
  display: flex; flex-wrap: wrap; gap: 0 2ch; align-items: baseline;
  padding-top: calc(var(--row) * 0.5);
  padding-bottom: calc(var(--row) * 0.5);
  white-space: nowrap;
}
.header-line .pno { color: var(--white); }
.header-line .name, .header-line .name a { color: var(--yellow); }
.header-line .name a:hover { color: var(--black); background: var(--yellow); }
.header-line .when { color: var(--cyan); margin-left: auto; font-variant-numeric: tabular-nums; }
.header-line .lang a { color: var(--white); }
.header-line .lang a:hover { color: var(--black); background: var(--white); }

/* ---------- P100 ---------- */

.title-band {
  background: var(--blue);
  padding: calc(var(--row) * 0.4) 2ch calc(var(--row) * 0.6);
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0 3ch;
}
.title-band h1 {
  margin: 0;
  font-weight: normal;
  font-size: clamp(2.2rem, 5.2vw, 4rem);
  line-height: 1;
  letter-spacing: 0;
  color: var(--yellow);
}
.title-band h1 .dh { margin-bottom: 1em; }

/* Page 888: the pitch set as subtitles, black boxes on the band. */
.subs {
  margin: 0.3em 0 0;
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.2em;
  text-align: right;
}
.subs span { background: var(--black); padding: 0.1em 1ch; }
.subs .y { color: var(--yellow); }
.subs .w { color: var(--white); }
.subs .c { color: var(--cyan); }
@media (max-width: 700px) { .subs { align-items: flex-start; text-align: left; } }

/* ---------- Logo ---------- */

/* The mark: a house on the mosaic grid in the four Fastext colours. Sized to the double-height title. */
.title-band h1 { display: flex; align-items: flex-start; gap: 0.25em; }
.title-band .mark { height: 2em; width: auto; flex: none; }

/* ---------- The TV ---------- */

/* The real screenshot sits behind the drawn set, in the hole of its screen (see img/tv.svg). */
.tv { margin: 0; }
.set { position: relative; aspect-ratio: 1000 / 720; }
.set .screen {
  position: absolute; left: 6%; top: 20.14%; width: 74%; height: 56.67%;
  object-fit: cover; object-position: left top;
  border-radius: 4.9% / 8.8%;
}
.set .frame { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The glass: a soft curve of light and dark over the picture. */
.set::after {
  content: ""; position: absolute; left: 6%; top: 20.14%; width: 74%; height: 56.67%;
  border-radius: 4.9% / 8.8%;
  background: radial-gradient(120% 120% at 50% 45%, transparent 55%, rgb(0 0 0 / 0.45) 100%),
    repeating-linear-gradient(to bottom, rgb(0 0 0 / 0.22) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 0 24px rgb(0 0 0 / 0.6);
  pointer-events: none;
}
.subpage { margin: 0; padding: 0 0 0.3em; display: flex; justify-content: flex-end; gap: 1ch; align-items: stretch; }
/* HOLD, the teletext key that freezes a rotating page: here it stops the hero TV changing channel. */
.subpage .hold {
  font: inherit; color: var(--white); background: var(--black); border: 0; border-radius: 0;
  padding: 0.05em 1ch; cursor: pointer; min-height: 1.8rem;
}
.subpage .hold:hover { color: var(--black); background: var(--white); }
.subpage .hold[aria-pressed="true"] { color: var(--black); background: var(--yellow); }
.subpage span { background: var(--black); color: var(--white); padding: 0.05em 1ch; }

.hero { background: var(--blue); padding: 0 2ch calc(var(--row) * 1.5); display: grid; gap: calc(var(--row) * 1.5) 3ch; }
.hero .tv { max-width: calc((100svh - 17rem) * 1000 / 720); width: 100%; justify-self: center; }
.hero .waitlist { padding: 0; }
@media (min-width: 1000px) {
  .hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
  .hero .waitlist .fields { flex-direction: column; align-items: stretch; }
  .hero .waitlist label.email { flex: none; }
  .hero .waitlist button { align-self: stretch; }
}

/* ---------- Waitlist (P199) ---------- */

.waitlist {
  background: var(--blue);
  padding: var(--row) 2ch;
}
.waitlist .lead { margin: 0 0 calc(var(--row) * 0.5); }
.waitlist .lead .pno { color: var(--yellow); margin-right: 1ch; }
.waitlist .fields {
  display: flex; flex-wrap: wrap; gap: calc(var(--row) * 0.5) 2ch; align-items: stretch;
}
.waitlist label.email { flex: 1 1 22ch; display: flex; flex-direction: column; gap: 0.2em; }
.waitlist label.email span { color: var(--cyan); }
.waitlist input[type="email"] {
  font: inherit;
  color: var(--black);
  background: var(--white);
  border: 0;
  border-radius: 0;
  padding: 0.45em 1ch;
  caret-color: var(--blue);
  min-height: 2.75rem;
}
.waitlist input[type="email"]::placeholder { color: var(--blue); }
.waitlist input[aria-invalid="true"] { outline: 3px solid var(--red); outline-offset: 0; }
.waitlist button {
  font: inherit;
  align-self: flex-end;
  color: var(--black);
  background: var(--yellow);
  border: 0;
  border-radius: 0;
  padding: 0.45em 2ch;
  min-height: 2.75rem;
  cursor: pointer;
}
.waitlist button:hover { background: var(--white); }
.waitlist button[disabled] { background: var(--cyan); cursor: progress; }
.waitlist .consent {
  display: flex; gap: 1ch; align-items: flex-start;
  margin-top: calc(var(--row) * 0.5);
  max-width: 92ch;
}
.waitlist .consent input {
  appearance: none;
  flex: none;
  width: 1.15em; height: 1.15em; margin: 0.1em 0 0;
  background: var(--black);
  border: 2px solid var(--white);
  border-radius: 0;
  cursor: pointer;
}
.waitlist .consent input:checked { background: var(--yellow); border-color: var(--yellow); box-shadow: inset 0 0 0 3px var(--black); }
.waitlist .consent input[aria-invalid="true"] { border-color: var(--red); }
.waitlist .consent a { color: var(--white); }
.waitlist .consent a:hover { color: var(--black); background: var(--white); }
.waitlist .error { color: var(--black); background: var(--yellow); padding: 0 1ch; margin: 0.4em 0 0; }
.waitlist .error:empty { display: none; }
.waitlist .status { margin: calc(var(--row) * 0.5) 0 0; }
.waitlist .status:empty { display: none; }
.waitlist .status.ok { color: var(--black); background: var(--green); padding: 0.2em 1ch; }
.waitlist .status.fail { color: var(--black); background: var(--yellow); padding: 0.2em 1ch; }

/* ---------- Pages ---------- */

.page {
  padding-top: var(--between);
  scroll-margin-top: calc(var(--row) * 3);
}
.page h2 {
  position: relative;
  margin: 0 0 calc(var(--row) * 2.6);
  padding: calc(var(--row) * 0.35) 2ch 0;
  background: var(--band, var(--blue));
  color: var(--ink, var(--white));
  font-weight: normal;
  font-size: clamp(1.4rem, 3.4vw, 2.6rem);
  line-height: 1;
  display: flex; align-items: flex-start; gap: 2ch;
}
.page h2 .pno { color: inherit; font-size: 1rem; padding-top: 0.35em; }
.page h2 .dh { color: inherit; }
/* Mosaic edge under each page head: sextant blocks in the band's colour. */
.page h2::after {
  content: "\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02\1FB02\1FB0D\1FB02";
  position: absolute; left: 0; right: 0; top: 100%;
  font-size: 1rem; line-height: 1;
  color: var(--band, var(--blue));
  white-space: nowrap; overflow: hidden;
}
#buses { --band: var(--red); --ink: var(--black); }
#rain { --band: var(--green); --ink: var(--black); }
#today { --band: var(--cyan); --ink: var(--black); }
#looks { --band: var(--yellow); --ink: var(--black); }
#answers { --band: var(--magenta); --ink: var(--black); }
.page h2 .dh { margin-bottom: 1em; }
.page .say { max-width: 46ch; margin: 0 0 calc(var(--row) * 1.4); line-height: 1.45; }
.c-red { color: var(--red); }
.c-yellow { color: var(--yellow); }
.c-cyan { color: var(--cyan); }
.c-green { color: var(--green); }
.c-magenta { color: var(--magenta); }
.c-white { color: var(--white); }

.cols { display: grid; gap: calc(var(--row) * 2) 5ch; }
@media (min-width: 900px) {
  .cols { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
}



.shot { margin: 0; }
.shot img { display: block; width: 100%; height: auto; border: 1px solid var(--blue); }
.shot figcaption { color: var(--cyan); margin-top: 0.7em; font-size: 0.85em; line-height: 1.4; }


/* Index page: numbered subpages with dotted leaders. */
.index > li { min-width: 0; }
.index { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--row) * 2.2) 5ch; }
@media (min-width: 900px) { .index { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.index .entry { min-width: 0; overflow: hidden; display: flex; align-items: baseline; gap: 1ch; margin: 0 0 0.4em; color: var(--yellow); }
.index .sub { color: var(--white); flex: none; }
.index .what { flex: none; white-space: nowrap; }
.index .lead-dots { flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; color: var(--cyan); }
.index .lead-dots::after { content: "........................................................................................................"; }
.index .say { margin-bottom: 0.6em; }
.index .noshot { color: var(--cyan); font-size: 0.85em; margin: 0; }

/* ---------- Looks: one TV, five channels ---------- */

/* The picker sits above the set, so the set can take the full width. */
.channel-stage { display: grid; justify-items: center; gap: 1em; margin-top: calc(var(--row) * 2); }
.channel { max-width: 920px; width: 100%; }
.knob-hint { margin: 0; text-align: center; color: var(--white); }
.knob-hint span { display: inline-block; width: 0.9em; height: 0.9em; border-radius: 50%; margin: 0 0.6ch -0.1em 1ch; }
.knob-hint .y { background: var(--yellow); }
.knob-hint .c { background: var(--cyan); }
/* Changing channel: the picture collapses to a bright line, snow for a moment, then the new one opens. */
.tuner .screen { transform-origin: 50% 50%; transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.16s; }
.tuner.off .screen { transform: scaleY(0.012); filter: brightness(3); transition-duration: 0.12s; transition-timing-function: cubic-bezier(0.7, 0, 0.9, 0.4); }
.tuner .noise {
  position: absolute; left: 6%; top: 20.14%; width: 74%; height: 56.67%;
  border-radius: 4.9% / 8.8%; opacity: 0; pointer-events: none;
}
.tuner.static .noise { opacity: 1; }
/* The channel number on the set's display. */
.ch-display {
  position: absolute; left: 83.6%; top: 22.2%; width: 13%; height: 4.72%;
  background: var(--black); color: var(--green);
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(9px, 1.4vw, 15px); line-height: 1;
}
/* The knobs are the real controls, drawn over the ones in the picture. */
.knob {
  position: absolute; border: 0; border-radius: 50%; padding: 0; cursor: pointer;
  transform: rotate(var(--turn, 0deg)); transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.knob::after { content: ""; position: absolute; left: 44%; top: 6%; width: 12%; height: 40%; background: var(--black); }
.knob.next { left: 86.5%; top: 30.56%; width: 7.2%; height: 10%; background: var(--yellow); }
.knob.prev { left: 87.3%; top: 45%; width: 5.6%; height: 7.78%; background: var(--cyan); }
.knob:hover { box-shadow: 0 0 0 3px var(--white); }
/* Until it has been turned once, the yellow knob calls for a hand: a white ring that swells and fades. */
#looks .tuner:not(.turned) .knob.next { animation: beckon 2.2s ease-out infinite; }
@keyframes beckon {
  0% { box-shadow: 0 0 0 0 rgb(255 255 255 / 0.9); }
  70%, 100% { box-shadow: 0 0 0 14px rgb(255 255 255 / 0); }
}
.knob:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }

.channels { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4em 1ch; }
@media (min-width: 900px) {
  .channels { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .channels button { flex-direction: column; gap: 0.2em; height: 100%; }
  .channels button b { white-space: normal; }
}
.channels button {
  font: inherit; color: var(--white); background: var(--black); text-align: left;
  border: 0; border-radius: 0; width: 100%; padding: 0.35em 1ch; min-height: 2.75rem; cursor: pointer;
  display: flex; gap: 1.5ch; align-items: baseline;
}
.channels button b { font-weight: normal; color: var(--yellow); white-space: nowrap; }
.channels .ch { color: var(--black); background: var(--green); padding: 0 0.8ch; flex: none; }
.channels button:hover { background: var(--blue); }
.channels button[aria-pressed="true"] { background: var(--blue); }
.channels button[aria-pressed="true"] .ch { background: var(--yellow); }

@media (prefers-reduced-motion: reduce) {
  .tuner .screen, .tuner.off .screen, .knob { transition: none; }
  #looks .tuner:not(.turned) .knob.next { animation: none; box-shadow: 0 0 0 3px var(--white); }
}

/* ---------- Answers ---------- */

.qa { margin: 0; display: grid; gap: 0.4em 5ch; }
@media (min-width: 900px) { .qa { grid-template-columns: 22ch minmax(0, 1fr); } }
.qa dt { color: var(--yellow); }
.qa dd { margin: 0 0 calc(var(--row) * 1.5); max-width: 56ch; line-height: 1.45; }

/* ---------- Close ---------- */

.close {
  margin-top: var(--between);
  background: var(--blue);
  padding: var(--row) 2ch;
  display: flex; flex-wrap: wrap; gap: var(--row) 3ch; align-items: center; justify-content: space-between;
}
.close p { margin: 0; font-size: clamp(1.1rem, 2.4vw, 1.8rem); color: var(--yellow); }
.close a {
  color: var(--black); background: var(--yellow); text-decoration: none;
  padding: 0.45em 2ch; min-height: 2.75rem; display: inline-flex; align-items: center;
}
.close a:hover { background: var(--white); }

footer {
  padding: calc(var(--row) * 1.5) 0;
  display: flex; flex-wrap: wrap; gap: 0.5em 3ch;
  color: var(--white);
}
footer a { color: var(--white); }
footer a:hover { color: var(--black); background: var(--white); }

/* ---------- Fastext: the four coloured keys ---------- */

.fastext {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  background: var(--black);
  border-top: 1px solid var(--blue);
}
.fastext ul {
  list-style: none; margin: 0 auto; padding: 0 var(--gutter);
  max-width: var(--page);
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1ch;
}
/* On a phone the six keys sit in two rows of three. */
@media (max-width: 700px) {
  .fastext ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1ch; }
  body { padding-bottom: calc(var(--row) * 5); }
}
.fastext a {
  display: flex; align-items: center; gap: 1ch;
  min-height: 2.75rem;
  text-decoration: none;
  white-space: nowrap; overflow: hidden;
}
.fastext a::before {
  content: ""; flex: none; width: 1.6ch; height: 0.9em; background: currentColor;
}
.fastext .red a { color: var(--red); }
.fastext .green a { color: var(--green); }
.fastext .yellow a { color: var(--yellow); }
.fastext .cyan a { color: var(--cyan); }
.fastext .magenta a { color: var(--magenta); }
.fastext .blue a { color: var(--white); }
.fastext a:hover, .fastext a[aria-current="true"] { color: var(--black); }
.fastext .red a:hover, .fastext .red a[aria-current="true"] { background: var(--red); }
.fastext .green a:hover, .fastext .green a[aria-current="true"] { background: var(--green); }
.fastext .yellow a:hover, .fastext .yellow a[aria-current="true"] { background: var(--yellow); }
.fastext .cyan a:hover, .fastext .cyan a[aria-current="true"] { background: var(--cyan); }
.fastext .magenta a:hover, .fastext .magenta a[aria-current="true"] { background: var(--magenta); }
/* Blue cannot carry black: the lit blue key keeps white text. */
.fastext .blue a:hover, .fastext .blue a[aria-current="true"] { background: var(--blue); color: var(--white); }
/* With a keyboard, the number is the key: a cap in the key's colour, the digit in black. */
.fastext .red { --key: var(--red); } .fastext .green { --key: var(--green); } .fastext .yellow { --key: var(--yellow); }
.fastext .cyan { --key: var(--cyan); } .fastext .magenta { --key: var(--magenta); } .fastext .blue { --key: var(--blue); }
.fastext kbd {
  font: inherit; display: inline-grid; place-items: center; flex: none;
  min-width: 1.7em; height: 1.35em; color: var(--black); background: var(--key);
}
.fastext .blue kbd { color: var(--white); }
.fastext .blue a:hover kbd, .fastext .blue a[aria-current="true"] kbd { background: var(--white); color: var(--blue); }
.fastext a:hover kbd, .fastext a[aria-current="true"] kbd { background: var(--black); color: var(--key); }
@media (hover: hover) and (pointer: fine) { .fastext a::before { display: none; } }
.header-line .keys-hint { color: var(--yellow); }
@media not ((hover: hover) and (pointer: fine)) {
  .fastext kbd, .header-line .keys-hint { display: none; }
}
@media (max-width: 1100px) { .header-line .keys-hint { display: none; } }

/* Page search: the header counts up to the page you asked for. */
.header-line .pno.searching { color: var(--yellow); }

/* ---------- CRT ---------- */

/* The page seen through a picture tube: fine scanlines, darker corners, and a faint band of light
   that rolls down every 7 s, and brightness that breathes slowly. All of it sits above the content and never takes a click. */
body::before, body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 20;
}
body::before {
  background:
    repeating-linear-gradient(to bottom, rgb(0 0 0 / 0.16) 0 1px, transparent 1px 3px),
    radial-gradient(140% 110% at 50% 50%, transparent 62%, rgb(0 0 0 / 0.5) 100%);
}
body::after {
  background: linear-gradient(to bottom, transparent, rgb(255 255 255 / 0.045) 45%, rgb(255 255 255 / 0.06) 50%, rgb(255 255 255 / 0.045) 55%, transparent);
  height: 26vh; inset: auto 0 auto 0; top: -26vh;
  animation: roll 7s linear infinite;
}
@keyframes roll { to { transform: translateY(calc(100vh + 26vh)); } }
/* The tube breathes: brightness rises and falls slowly, no flicker. */
html { animation: hum 6s ease-in-out infinite; }
@keyframes hum { 50% { filter: brightness(1.03); } }
@media (prefers-reduced-motion: reduce) {
  body::after { display: none; }
  html { animation: none; }
}
@media (forced-colors: active) { body::before, body::after { display: none; } }

/* ---------- Plain pages (privacy) ---------- */

.doc { max-width: 64ch; padding-bottom: calc(var(--row) * 2); }
.doc h1 { font-weight: normal; color: var(--yellow); font-size: 1.8rem; margin: var(--row) 0; }
.doc h2 { font-weight: normal; color: var(--cyan); font-size: 1.1rem; margin: calc(var(--row) * 1.5) 0 0.5em; }
.doc p, .doc li { margin: 0 0 0.8em; }
.doc .todo { color: var(--black); background: var(--yellow); padding: 0 1ch; }

/* Phones: wider gutters, more air between stacked blocks. */
@media (max-width: 700px) {
  .page h2 { margin-bottom: calc(var(--row) * 2.2); }
  .cols { gap: calc(var(--row) * 2.4); }
  .channels { gap: 0.6em; }
  .index { gap: calc(var(--row) * 2.6); }
  .hero { padding-inline: 1.5ch; }
  .waitlist .fields { gap: calc(var(--row) * 0.8); }
}

/* Page titles take focus only so a key jump lands there; they are not controls, so no ring. */
.page h2[tabindex="-1"]:focus { outline: none; }

.fastext .blue a::before { background: var(--blue); outline: 1px solid var(--white); }