/* ==========================================================================
   TELETEXT — one page. Loaded on a/teletext.html.

   Founder, 2026-09-26: the page is Annie's Claude artifact, shell excepted.
   A television set: a black screen composed in real 40 x 24 character
   cells, the remote's Fastext keys under it, and the record below set in
   the same cell face at reading size.

   The cell is the unit on the screen: --tt-cw is one cell's width, derived
   from the screen's own inline size (container query), so the 40-column
   raster scales down to 375px instead of overflowing. The glyph is set a
   little smaller than the cell and letter-spaced to fill it exactly, as a
   teletext character generator leaves space around each glyph.

   The palette is the WST eight and nothing else, declared first so the
   record's "as built" swatches read them in transmission order. On black,
   blue fails as text (2.4:1) and is used only as a bar under yellow; red
   (5.3:1) and magenta (6.7:1) pass AA and are used for short labels; the
   record's sentences are set in white, yellow, cyan or green.

   VT323 has one weight and no italic, and the shell sets font-synthesis
   none: nothing here is bold or italic. Emphasis is a colour change.
   ========================================================================== */
@font-face {
  font-family: "VT323 X";
  src: url("fonts/vt323.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

.tt-page {
  --tt-k: #000000;
  --tt-r: #FF0000;
  --tt-g: #00FF00;
  --tt-y: #FFFF00;
  --tt-b: #0000FF;
  --tt-m: #FF00FF;
  --tt-c: #00FFFF;
  --tt-w: #FFFFFF;
  --tt-set: #1A1A1A;     /* the television's cabinet, not the transmission */
  --tt-face: "VT323 X", "VT323", ui-monospace, Menlo, monospace;
  background: var(--tt-k);
}
.tt-page main { background: var(--tt-k); }

/* Motionless arrival: the shell's scroll reveal must never leave the record
   at opacity 0 (outranks site.css's .js-reveal rule). */
.tt-page main > section.tt-rec { opacity: 1; transform: none; transition: none; will-change: auto; }

.tt-vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---- the television ---------------------------------------------------- */
.tt-hero { padding: clamp(16px, 4vw, 44px) clamp(12px, 3vw, 32px) 0; font-family: var(--tt-face); }
.tt-tv {
  max-width: 920px; margin: 0 auto;
  padding: clamp(10px, 2.4vw, 22px);
  background: var(--tt-set);
  border-radius: clamp(14px, 3vw, 28px);
  box-shadow: inset 0 0 0 6px #333333, 0 10px 30px #000000;
  color: var(--tt-w);
}
.tt-scr {
  position: relative; background: var(--tt-k);
  padding: clamp(6px, 1.6vw, 16px);
  border-radius: 10px;
  /* the raster never shrinks below a legible cell: under that width the
     screen scrolls sideways, as Web 1.0's fixed canvas does */
  overflow-x: auto; overflow-y: hidden;
}
/* scan lines: decoration over the raster, never over controls or text below */
.tt-cells::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px);
}
/* 40 cells of at least 10px: the glyph is then 18px, not 6px, at 375 */
.tt-cells { container-type: inline-size; position: relative; min-width: 400px; }
.tt-sub { --tt-cw: calc(100cqw / 40); }
.tt-sub + .tt-sub { margin-top: calc(var(--tt-cw) * 2); }

.tt-r {
  display: block; white-space: pre; overflow: hidden;
  height: calc(var(--tt-cw) * 1.25);
  line-height: calc(var(--tt-cw) * 1.25);
  font-size: calc(var(--tt-cw) * 1.79);
  /* 0.4em advance at 1.79 cells leaves 0.284 of a cell: spacing makes it exactly one */
  letter-spacing: calc(var(--tt-cw) * 0.284);
  font-family: var(--tt-face);
}
.tt-r--dh { height: calc(var(--tt-cw) * 2.5); }
.tt-r--dh .tt-dh { display: inline-block; transform: scaleY(2); transform-origin: 0 0; }
.tt-mo svg { display: block; width: 100%; height: 100%; }

.tt-fw { color: var(--tt-w); } .tt-fy { color: var(--tt-y); } .tt-fc { color: var(--tt-c); }
.tt-fg { color: var(--tt-g); } .tt-fm { color: var(--tt-m); } .tt-fr { color: var(--tt-r); }
.tt-fb { color: var(--tt-b); } .tt-fk { color: var(--tt-k); }
.tt-bw { background: var(--tt-w); } .tt-by { background: var(--tt-y); } .tt-bc { background: var(--tt-c); }
.tt-bg { background: var(--tt-g); } .tt-bm { background: var(--tt-m); } .tt-br { background: var(--tt-r); }
.tt-bb { background: var(--tt-b); }

/* One subpage at a time once the script runs; without it every subpage
   stands in order and nothing is concealed. */
.tt-js .tt-sub { display: none; }
.tt-js .tt-sub.tt-on { display: block; }
.tt-js .tt-sub + .tt-sub { margin-top: 0; }
.tt-js .tt-cn span { visibility: hidden; }
.tt-js.tt-rvon .tt-cn span { visibility: visible; }

/* ---- the remote -------------------------------------------------------- */
.tt-keys { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; align-items: center; }
.tt-keys[hidden], .tt-help[hidden] { display: none; }
.tt-pg input {
  width: 3.4em; min-height: 44px; padding: 0 .3em;
  background: var(--tt-k); color: var(--tt-y);
  border: 2px solid var(--tt-y); border-radius: 8px;
  font: 400 26px/1 var(--tt-face); text-align: center; letter-spacing: .1em;
}
.tt-k {
  min-height: 44px; min-width: 44px; padding: 0 14px;
  border: 2px solid transparent; border-radius: 8px;
  font: 400 26px/1 var(--tt-face); color: var(--tt-k); cursor: pointer;
}
.tt-k--x { background: var(--tt-k); color: var(--tt-w); border-color: var(--tt-w); }
.tt-k--x[aria-pressed="true"] { background: var(--tt-w); color: var(--tt-k); }
.tt-k--x[hidden] { display: none; }
.tt-hero :focus-visible, .tt-rec :focus-visible { outline: 3px solid var(--tt-y); outline-offset: 2px; }
.tt-k:focus-visible { outline-color: var(--tt-w); }
.tt-help { margin: 10px 0 0; font-size: 1.3rem; line-height: 1.3; color: var(--tt-w); max-width: 46em; }
.tt-cap {
  margin: 18px 0 2px; font-size: clamp(1.5rem, 3.2vw, 2.1rem); line-height: 1.15;
  color: var(--tt-c); text-transform: uppercase;
}

/* ---- the record: teletext pages at reading size ----------------------- */
.tt-rec {
  font: 400 1.5rem/1.3 var(--tt-face);
  color: var(--tt-w); background: var(--tt-k);
  padding: clamp(28px, 5vw, 64px) clamp(16px, 4vw, 40px) clamp(40px, 6vw, 80px);
}
.tt-w { max-width: 920px; margin: 0 auto; }
.tt-rec p { margin: 0 0 .7em; max-width: 34em; }
.tt-rec a:not(.tt-fx) { color: var(--tt-c); text-decoration: underline 2px; text-underline-offset: 3px; }
.tt-rec a:not(.tt-fx):hover { color: var(--tt-y); }
.tt-rec em { font-style: normal; color: var(--tt-y); }
.tt-rec b { font-weight: 400; }
.tt-rec h3 { font: inherit; margin: 0; }
.tt-fg-w { color: var(--tt-w); } .tt-fg-y { color: var(--tt-y); } .tt-fg-c { color: var(--tt-c); }
.tt-fg-g { color: var(--tt-g); } .tt-fg-m { color: var(--tt-m); } .tt-fg-r { color: var(--tt-r); }
.tt-quiet { color: var(--tt-m); }

.tt-s { margin-top: 2.6rem; }
.tt-s:first-child { margin-top: 0; }
/* The page header: a full-width background bar, the heading in double height. */
.tt-bar {
  display: flex; justify-content: space-between; align-items: flex-start; gap: .5em;
  padding: 0 .35em; color: var(--tt-k);
}
.tt-bg-w { background: var(--tt-w); color: var(--tt-k); }
.tt-bg-y { background: var(--tt-y); color: var(--tt-k); }
.tt-bg-c { background: var(--tt-c); color: var(--tt-k); }
.tt-bg-g { background: var(--tt-g); color: var(--tt-k); }
.tt-bg-m { background: var(--tt-m); color: var(--tt-k); }
.tt-bg-r { background: var(--tt-r); color: var(--tt-k); }
.tt-bg-b { background: var(--tt-b); color: var(--tt-y); }
.tt-h2 {
  margin: 0; font: 400 clamp(1.45rem, 6.4vw, 1.9rem)/1.1 var(--tt-face);
  height: 2.2em; white-space: nowrap; text-transform: uppercase; letter-spacing: .05em;
}
.tt-dh2 { display: inline-block; transform: scaleY(2); transform-origin: 0 0; }
.tt-cnt { margin-left: .3em; }
.tt-pno { font-size: clamp(1.45rem, 6.4vw, 1.9rem); line-height: 2.2; }
.tt-body { padding-top: .9rem; }

.tt-meta { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 2em; }
.tt-meta div { display: grid; grid-template-columns: 6.6em 1fr; gap: 0 .6em; padding: .35em 0; border-bottom: 3px solid var(--tt-b); }
.tt-meta dt { color: var(--tt-y); }
.tt-meta dd { margin: 0; }

.tt-claim { font-size: clamp(1.7rem, 3.6vw, 2.2rem); line-height: 1.2; }
.tt-lbl {
  display: inline-block; padding: 0 .3em; margin-right: .35em;
  line-height: 1.25; text-transform: uppercase; font-size: .9em;
}
.tt-diag { color: var(--tt-y); font-size: 1.8rem; line-height: 1.2; }

.tt-tw { overflow-x: auto; }
.tt-ct, .tt-rt { border-collapse: collapse; width: 100%; font: inherit; }
.tt-ct th, .tt-ct td { text-align: left; vertical-align: top; padding: .45em .6em .45em 0; font-weight: 400; }
.tt-ct tr + tr th, .tt-ct tr + tr td { border-top: 3px solid var(--tt-b); }
.tt-ct th { width: 12em; }
.tt-ct th .tt-lbl { display: table; margin-top: .2em; font-size: .75em; }
.tt-ct td p { margin: 0 0 .3em; }
.tt-none { color: var(--tt-m); }
.tt-tags a, .tt-ct th a, .tt-nb__n a, .tt-mach a, .tt-foot a { display: inline-flex; align-items: center; min-height: 44px; }
.tt-tags { display: flex; flex-wrap: wrap; gap: 0 1em; }

.tt-swatch { list-style: none; margin: .2em 0 .2em; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(5.2em, 1fr)); gap: .6em; }
.tt-swatch li { display: flex; flex-direction: column; gap: .2em; }
/* the chip is a block of colour; its label sits below it in white on black */
.tt-chip { display: block; height: 1.6em; box-shadow: inset 0 0 0 2px var(--tt-w); }
.tt-swatch code { font: inherit; font-size: 1.2rem; color: var(--tt-w); }

.tt-rules { list-style: none; margin: 0; padding: 0; }
.tt-rules li { display: grid; grid-template-columns: 8.5em 1fr; gap: .2em 1em; padding: .6em 0; border-top: 3px solid var(--tt-b); }
.tt-rules li:first-child { border-top: 0; }
.tt-rules h3 { color: var(--tt-y); text-transform: uppercase; }
.tt-rules p { margin: .25em 0 0; }
.tt-ev { color: var(--tt-m); }

.tt-two { display: grid; gap: 1.5em; }
.tt-rt { max-width: 40em; }
.tt-rt th, .tt-rt td { text-align: left; padding: .35em .6em; font-weight: 400; border-bottom: 3px solid var(--tt-b); }
.tt-rt thead th { background: var(--tt-c); color: var(--tt-k); border-bottom: 0; }
.tt-firm { color: var(--tt-y); }

.tt-nb { list-style: none; margin: 0; padding: 0; }
.tt-nb li { padding: .4em 0 .6em; border-top: 3px solid var(--tt-b); }
.tt-nb li:first-child { border-top: 0; }
.tt-nb__n { font-size: 1.9rem; line-height: 1.2; margin: 0 0 .1em !important; }
.tt-nb__n .tt-quiet { font-size: 1.3rem; }

/* Fastext: the four coloured keys as the page's exits. Black lettering on
   each colour (red 5.3:1, the lowest). */
.tt-fxs { display: grid; grid-template-columns: repeat(auto-fit, minmax(11em, 1fr)); gap: 10px; }
.tt-rec .tt-fx { display: block; padding: .5em .7em .6em; text-decoration: none; min-height: 44px; }
.tt-rec .tt-fx:hover { outline: 3px solid var(--tt-w); outline-offset: -3px; }
.tt-fx b { display: block; font-size: 1.85rem; line-height: 1.1; text-transform: uppercase; }
.tt-fx small { display: block; font-size: 1.3rem; line-height: 1.25; margin-top: .3em; }
.tt-mach { margin-top: 1.2em !important; display: flex; flex-wrap: wrap; gap: 0 1.2em; align-items: center; }
.tt-foot { margin: 3rem 0 0 !important; padding-top: .6em; border-top: 3px solid var(--tt-b); display: flex; flex-wrap: wrap; gap: 0 1.6em; max-width: none !important; }

@media (max-width: 640px) {
  .tt-meta { grid-template-columns: 1fr; }
  .tt-rules li { grid-template-columns: 1fr; }
  .tt-ct th, .tt-ct td { display: block; width: auto; padding-right: 0; }
  .tt-ct tr + tr td { border-top: 0; padding-top: 0; }
  .tt-k { padding: 0 10px; font-size: 24px; }
  .tt-meta div { grid-template-columns: 1fr; }
  .tt-rt { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tt-tv, .tt-rec { scroll-behavior: auto; }
}

/* Flash (Design Completion Campaign, 2026-09-29): the word alternates with its
   background, four beats, then holds steady. Only on page 104, never under
   reduced motion; it restarts each time the page is shown. */
@keyframes tt-flash { 0%, 49.9% { visibility: visible; } 50%, 100% { visibility: hidden; } }
@media (prefers-reduced-motion: no-preference) {
  .tt-fl { animation: tt-flash 1s step-end 4; }
}

/* Fidelity/QA (2026-09-29): at the narrowest phones the section bar lets its heading shrink so the page number stays inside. */
@media (max-width: 22.5rem) { .tt-bar { min-width: 0; } .tt-bar .tt-h2 { min-width: 0; overflow-wrap: anywhere; } .tt-pno { font-size: 1.25rem; flex: none; } }