/* Homeless Language Model. The page is one camcorder frame of a six room house at night.
   Built to his VHS frame (art/ref/vhs-reference.jpg, measured in NOTE.md) and to section 4 of the
   brief, half each: the hard horizon at 47.4% is the corridor between the two rows of rooms, the
   checker is the floor of the whole house, the four corner clusters are the channel, the light
   meter, the brass panel and the mode marks.

   Rebuilt 2026-11-02 to the review: one container, one grid of six equal rooms, the navigation
   above them, and two scales only.
     type    14 / 16 / 20 / 24 / 32   (14 is the floor on this ground, his order of 2026-10-19)
     space   4 / 8 / 12 / 16 / 24 / 32 / 48
   One face per role: Fraunces names things (the house, a place, a resident), Plex says everything
   else, including every number. */

@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-var-latin.woff2") format("woff2-variations");
  font-weight: 300 700; font-display: swap;
  font-variation-settings: "SOFT" 0, "WONK" 0;
}
@font-face { font-family: "Plex"; src: url("/fonts/plexmono-400-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex"; src: url("/fonts/plexmono-500-latin.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex"; src: url("/fonts/plexmono-600-latin.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --night: #090B0E;
  --floor: #12161D;
  --wall: #2C3440;
  --line: #3C4756;
  --lamp: #FFC46B;
  --text: #E9E4D8;
  --muted: #98A0AF;        /* 7.3:1 on the night, 6.2:1 on the floor */

  --s4: 4px; --s8: 8px; --s12: 12px; --s16: 16px; --s24: 24px; --s32: 32px; --s48: 48px;
  --t14: 14px; --t16: 16px; --t20: 20px; --t24: 24px; --t32: 32px;
  --caps: 0.08em;

  --page: 1120px;
  --rail: 372px;
  --split: 4px;            /* the tape's chromatic split: 0.37% of the frame, measured on his jpeg */
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { background: var(--night); }
body {
  margin: 0;
  background: var(--night);
  color: var(--text);
  font: 400 var(--t16)/1.6 "Plex", ui-monospace, monospace;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}

.skip {
  position: fixed; left: var(--s16); top: -64px; z-index: 40;
  background: var(--wall); color: var(--text); padding: var(--s12) var(--s24); border: 2px solid var(--lamp);
  font-size: var(--t14); text-decoration: none; transition: top .12s;
}
.skip:focus { top: var(--s16); }
:focus-visible { outline: 2px solid var(--lamp); outline-offset: 3px; }

/* ---------------------------------------------------------------- the tape
   His picture is a FRAME, so the page is a frame: one rule around the whole recording and the
   chromatic split carried on its own edge, warm to the left and cold to the right. */
.tape {
  width: min(var(--page), calc(100vw - var(--s48)));
  margin: var(--s24) auto var(--s48);
  position: relative;
  border: 2px solid var(--line);
  padding: var(--s32);
}
.tape::before, .tape::after { content: ""; position: absolute; inset: -2px; pointer-events: none; z-index: 1; }
.tape::before { border: 2px solid rgba(255,196,107,.20); transform: translateX(calc(-1 * var(--split))); }
.tape::after { border: 2px solid rgba(74,94,122,.38); transform: translateX(var(--split)); }

/* the recording's own treatment: even scan rows (1 px on 4) and one regular grain cell over the
   whole field, never a chaotic noise generator (his note of 2026-10-12) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 30; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,.18) 0 1px, rgba(0,0,0,0) 1px 4px),
    url("/img/grain.png") repeat;
  background-size: auto, 96px 96px;
  opacity: .3;
}

/* ---------------------------------------------------------------- the channel line and the meter */
.strip { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--rail)); gap: var(--s32); }
.strip--top { align-items: center; margin-bottom: var(--s24); }
.strip--bottom { align-items: stretch; margin-top: var(--s24); }

.hud { display: flex; align-items: center; gap: var(--s12); min-height: var(--s48); }
.hud--channel { font-size: var(--t14); letter-spacing: var(--caps); text-transform: uppercase; white-space: nowrap; }
.hud__chan { color: var(--lamp); font-weight: 600; }
.hud__sep { color: var(--line); }
.hud__state { color: var(--muted); }
.hud--meter { justify-content: flex-end; font-size: var(--t14); letter-spacing: var(--caps); text-transform: uppercase; white-space: nowrap; }
.hud__label { color: var(--muted); }
.hud__value { color: var(--text); font-weight: 500; letter-spacing: 0; text-transform: none; }

/* the meter is a generated object; only its fill is live, and at zero it keeps one visible notch */
.meter {
  position: relative; display: inline-block; flex: 0 0 90px; width: 90px; height: 42px;
  background: url("/img/battery.png") left center / 90px 42px no-repeat;
}
.meter__track { position: absolute; left: 6px; top: 6px; width: 68px; height: 30px; background: rgba(255,196,107,.14); }
.meter__fill { position: absolute; left: 6px; top: 6px; height: 30px; width: 4px; background: var(--lamp); transition: width .28s ease; }

/* a status, not a control: a badge, with no frame and no press */
.badge {
  display: inline-flex; align-items: center; min-height: var(--s24);
  padding: var(--s8) var(--s16);
  background: rgba(152,160,175,.16); color: var(--muted);
  font-size: var(--t14); font-weight: 600; letter-spacing: var(--caps); text-transform: uppercase;
}
.badge[data-live="true"] { background: rgba(255,196,107,.18); color: var(--lamp); }

/* ---------------------------------------------------------------- the doorways, above the house */
.doors { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s8); margin-bottom: var(--s24); }
.door {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s8);
  min-height: var(--s48); padding: 0 var(--s16);
  background: var(--floor); border: 1px solid var(--line); color: var(--text);
  font: 500 var(--t14)/1 "Plex", monospace; letter-spacing: var(--caps); text-transform: uppercase;
  white-space: nowrap; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s, transform .08s;
}
.door:hover { border-color: var(--lamp); color: var(--lamp); }
.door:active { transform: translateY(2px); }
.door[aria-current="true"] { background: var(--lamp); border-color: var(--lamp); color: #140F06; }
.door[aria-current="true"] .door__n { color: #140F06; }
.door__n { color: var(--muted); }

/* ---------------------------------------------------------------- the house */
.body { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--rail)); gap: var(--s32); }

.stage {
  position: relative; overflow: hidden;
  aspect-ratio: 720 / 576;
  background: url("/img/plan-wide.png") center / 100% 100% no-repeat;
}
.stage__plan { position: absolute; inset: 0; }
.rooms, .light { position: absolute; inset: 0; }
.light { width: 100%; height: 100%; }

/* --- a room: one cell of the plan, the same box, the same lamp and the same key in all six */
.room { position: absolute; display: block; text-align: left; }
.room__open { position: absolute; inset: 0; width: 100%; height: 100%; background: none; border: 0; padding: 0; cursor: pointer; }
.room__glow {
  position: absolute; left: 50%; top: var(--lampy); transform: translate(-50%, -50%);
  width: var(--glow); height: var(--glow); pointer-events: none;
  background: radial-gradient(circle, rgba(255,196,107,.42) 0%, rgba(255,196,107,.16) 38%, rgba(255,196,107,0) 70%);
  transition: width .4s ease, height .4s ease, opacity .4s ease;
}
.room__lamp { position: absolute; left: 50%; top: var(--lampy); transform: translate(-50%, -50%); width: 40px; height: 40px; }
.room__text { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s16) var(--s24); display: flex; flex-direction: column; align-items: flex-start; }
.room__lab { display: block; font-family: "Fraunces", Georgia, serif; font-size: var(--t24); line-height: 1.15; color: var(--text); transition: color .12s; }
.room__bal { display: block; font-size: var(--t20); font-weight: 500; color: var(--lamp); margin-top: var(--s8); }
.room__state { display: block; font-size: var(--t14); letter-spacing: var(--caps); text-transform: uppercase; color: var(--muted); margin-top: var(--s4); }
.room[data-dark="true"] .room__bal { color: var(--muted); }
.room:hover .room__lab { color: var(--lamp); }
.key--give { position: relative; z-index: 2; margin-top: var(--s12); min-height: 40px; padding: 0 var(--s16); font-size: var(--t14); }
.key--shortword { display: none; }

/* the lamps breathe, and a resident with less than two lines left blinks */
@keyframes breathe { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.045); } }
@keyframes blink { 0%, 62%, 100% { opacity: 1; } 70%, 86% { opacity: .35; } }
.room[data-dark="false"] .room__lamp, .room[data-dark="false"] .room__glow { animation: breathe 4.6s ease-in-out infinite; }
.room[data-room="2"] .room__lamp, .room[data-room="2"] .room__glow { animation-delay: -1.1s; }
.room[data-room="3"] .room__lamp, .room[data-room="3"] .room__glow { animation-delay: -2.3s; }
.room[data-room="4"] .room__lamp, .room[data-room="4"] .room__glow { animation-delay: -3.4s; }
.room[data-room="5"] .room__lamp, .room[data-room="5"] .room__glow { animation-delay: -0.6s; }
.room[data-room="6"] .room__lamp, .room[data-room="6"] .room__glow { animation-delay: -2.9s; }
.room--blink .room__lamp, .room--blink .room__glow { animation: blink 2.4s steps(1, end) infinite; }

/* ---------------------------------------------------------------- the places */
.place {
  grid-column: 1 / -1; z-index: 2;
  background: var(--floor); border: 1px solid var(--line);
  padding: var(--s32);
  display: flex; flex-direction: column; gap: var(--s16);
}
.place__head { font-family: "Fraunces", Georgia, serif; font-size: var(--t32); margin: 0; line-height: 1.1; }
.place__lead { margin: 0; max-width: 62ch; color: var(--muted); font-size: var(--t16); }
.place__cols { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--s32); min-height: 0; flex: 1; }
.col { min-width: 0; display: flex; flex-direction: column; gap: var(--s12); min-height: 0; }
.col__head { margin: 0; font-size: var(--t14); letter-spacing: var(--caps); text-transform: uppercase; color: var(--muted); font-weight: 500; }
.list { display: flex; flex-direction: column; gap: var(--s12); min-height: 0; }
.ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s16) var(--s32); align-content: start; }
.empty { margin: 0; color: var(--muted); font-size: var(--t16); }

.entry { position: relative; padding: 0 0 0 var(--s16); }
.entry::before { content: ""; position: absolute; left: 0; top: var(--s4); bottom: var(--s4); width: 2px; background: var(--line); }
.entry--lit::before { background: var(--lamp); }
.entry__who { font-family: "Fraunces", Georgia, serif; font-size: var(--t16); color: var(--text); }
.entry__meta { font-size: var(--t14); color: var(--muted); }
.entry__text { margin: var(--s4) 0 0; font-size: var(--t16); color: var(--text); }

.rows { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--s8) var(--s24); font-size: var(--t16); align-items: baseline; }
.rows dt { color: var(--muted); font-size: var(--t14); letter-spacing: var(--caps); text-transform: uppercase; }
.rows dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }

.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s24); font-size: var(--t16); }
.steps li { position: relative; padding-top: var(--s32); }
.steps li::before { counter-increment: s; content: counter(s); position: absolute; top: 0; left: 0; font-size: var(--t20); color: var(--lamp); font-weight: 500; }
.steps strong { color: var(--lamp); font-weight: 500; }

.split { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s8) var(--s24); font-size: var(--t16); }
.split dt { color: var(--text); }
.split dt b { color: var(--lamp); font-weight: 500; font-size: var(--t20); margin-right: var(--s8); }
.split dd { margin: 0; color: var(--muted); font-size: var(--t14); grid-row: 2; }

/* the whole prompt, in one readable measure. pre-line, not pre-wrap: preserved runs of spaces hang
   past the right edge of the box, which an audit reads (correctly) as text leaving its box */
.prompt {
  margin: 0; padding: 0; font-size: var(--t14); line-height: 1.6; color: var(--text);
  white-space: pre-line; overflow-wrap: anywhere; max-width: 92ch;
  min-width: 0; width: 100%;
}

.answer { margin-top: var(--s12); padding-left: var(--s12); position: relative; display: flex; flex-direction: column; gap: var(--s8); align-items: flex-start; }
.answer::before { content: ""; position: absolute; left: 0; top: var(--s4); bottom: var(--s4); width: 1px; background: var(--line); }
.answer__who { font-size: var(--t14); letter-spacing: var(--caps); text-transform: uppercase; color: var(--muted); }
.answer__text { margin: 0; font-size: var(--t16); }

.graph { display: block; width: 100%; height: 210px; }

.form { display: flex; flex-direction: column; gap: var(--s16); }
.field { display: flex; flex-direction: column; gap: var(--s8); }
.field__label { font-size: var(--t14); letter-spacing: var(--caps); text-transform: uppercase; color: var(--muted); }
.field input, .field textarea {
  background: var(--night); border: 1px solid var(--line); color: var(--text);
  font: 400 var(--t16)/1.5 "Plex", monospace; padding: var(--s12) var(--s16); min-height: var(--s48); width: 100%;
}
.field textarea { resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--lamp); }
.form__note { margin: 0; font-size: var(--t14); color: var(--muted); }

/* ---------------------------------------------------------------- the hall */
.journal { position: relative; background: var(--floor); border: 1px solid var(--line); min-width: 0; overflow: hidden; }
.journal__inner { position: absolute; inset: 0; display: flex; flex-direction: column; gap: var(--s16); padding: var(--s24); }
.journal__head { position: relative; display: flex; flex-direction: column; gap: var(--s4); padding-bottom: var(--s16); }
.journal__head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); }
.journal__title { font-family: "Fraunces", Georgia, serif; font-size: var(--t24); }
.journal__price { font-size: var(--t14); color: var(--muted); letter-spacing: var(--caps); text-transform: uppercase; }
.journal__lines { display: flex; flex-direction: column; gap: var(--s16); min-height: 0; overflow: hidden; flex: 0 0 auto; }
.journal__turn { position: relative; margin-top: var(--s16); padding-top: var(--s16); }
.journal__turn::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); }
.journal__sub { margin: 0 0 var(--s12); font-size: var(--t14); letter-spacing: var(--caps); text-transform: uppercase; color: var(--muted); font-weight: 500; }
.turns { margin: 0; display: grid; grid-template-columns: 64px 1fr; gap: var(--s8) var(--s16); font-size: var(--t14); align-items: baseline; }
.turns dt { color: var(--text); letter-spacing: var(--caps); text-transform: uppercase; font-weight: 500; }
.turns dd { margin: 0; color: var(--muted); }
.turns b { color: var(--lamp); font-weight: 400; }

/* ---------------------------------------------------------------- the mode marks, under the hall */
.modes { background: var(--floor); border: 1px solid var(--line); padding: var(--s24); display: flex; flex-direction: column; justify-content: center; gap: var(--s12); }
.mode { display: grid; grid-template-columns: 1fr auto; gap: var(--s16); align-items: baseline; }
.mode__k { font-size: var(--t14); letter-spacing: var(--caps); text-transform: uppercase; color: var(--muted); }
.mode__v { font-size: var(--t16); color: var(--text); text-align: right; }
.mode__mark { width: 16px; height: 16px; margin-right: var(--s8); vertical-align: -2px; opacity: .85; }

/* ---------------------------------------------------------------- the brass panel at the front door */
.plate {
  border-image: url("/img/plate-brass.png") 48 fill / 48px / 0 stretch;
  padding: var(--s32);
  display: flex; flex-direction: column; gap: var(--s16);
}
.plate__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s16); flex-wrap: wrap; }
.plate__name {
  margin: 0; font-family: "Fraunces", Georgia, serif; font-weight: 600;
  font-size: var(--t32); line-height: 1.1; color: var(--text);
  text-shadow: 0 0 24px rgba(255,196,107,.18);
}
.plate__chip { font-size: var(--t14); letter-spacing: var(--caps); text-transform: uppercase; color: var(--lamp); }
.plate__mint { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s16); align-items: stretch; }
.plate__label { display: flex; align-items: center; font-size: var(--t14); letter-spacing: var(--caps); text-transform: uppercase; color: var(--muted); }
.plate__addr {
  display: flex; align-items: center; min-width: 0;
  background: #0A0805; border: 1px solid #2E2516; color: var(--text);
  padding: var(--s12) var(--s16); min-height: var(--s48); font-size: var(--t14); overflow-wrap: anywhere; user-select: all;
}
.plate__addr[data-empty="true"] { color: var(--muted); user-select: auto; }
.plate__keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s8); }
.key--primary { grid-column: 1 / -1; }

.key {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s8);
  min-height: var(--s48); padding: 0 var(--s16); text-decoration: none;
  background: linear-gradient(to bottom, #43361F, #221C12);
  border: 1px solid #6B5634; color: var(--text);
  font: 500 var(--t14)/1 "Plex", monospace; letter-spacing: var(--caps); text-transform: uppercase;
  white-space: nowrap; cursor: pointer; transition: transform .08s ease, border-color .12s, background .12s;
}
.key:hover { border-color: var(--lamp); }
.key:active { transform: translateY(2px); }
.key--mark img { display: block; flex: 0 0 auto; }
.key--copy { min-width: 108px; }
.key--wide { width: 100%; }
.key[aria-disabled="true"], .key:disabled {
  opacity: .74; cursor: default; border-color: var(--line);
  background: linear-gradient(to bottom, #2A2419, #1A160F);
}
.key[aria-disabled="true"]:hover, .key:disabled:hover { border-color: var(--line); }
.key[aria-disabled="true"]:active, .key:disabled:active { transform: none; }

.paper {
  position: fixed; left: 50%; bottom: var(--s24); transform: translateX(-50%);
  margin: 0; padding: var(--s12) var(--s24); background: var(--floor); border: 1px solid var(--lamp); color: var(--text);
  font-size: var(--t14); z-index: 35; opacity: 0; transition: opacity .18s;
}
.paper[data-show="true"] { opacity: 1; }

/* ---------------------------------------------------------------- narrower screens */
@media (max-width: 1100px) {
  :root { --rail: 320px; }
  /* the column is narrower here, so the turn card keeps the word and the price and drops the
     sentence around them rather than disappearing altogether */
  .turns { gap: var(--s4) var(--s12); grid-template-columns: 56px 1fr; }
  .turns__what { display: none; }
  .journal__sub { margin-bottom: var(--s8); }
}

@media (max-width: 900px) {
  .tape { width: calc(100vw - var(--s24)); margin: var(--s16) auto var(--s32); padding: var(--s24); }
  :root { --split: 2px; }
  .strip, .body { grid-template-columns: minmax(0, 1fr); }
  .strip--top { gap: var(--s12); align-items: start; }
  .hud--meter { justify-content: flex-start; flex-wrap: wrap; }
  .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage { aspect-ratio: 760 / 1246; background-image: url("/img/plan-tall.png"); }
  .place__cols, .ledger, .steps, .split { grid-template-columns: minmax(0, 1fr); }
  .place { padding: var(--s24); }
  .place__head { font-size: var(--t24); }
  .journal { position: static; overflow: visible; }
  .journal__inner { position: static; padding: var(--s24); }
  .plate__keys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plate__mint { grid-template-columns: minmax(0, 1fr) auto; }
  .plate__label { grid-column: 1 / -1; }
  .room__text { padding: var(--s12) var(--s24); }
  .room__lab { font-size: var(--t20); }
  .room__bal { font-size: var(--t16); }
  .room__lamp { width: 32px; height: 32px; }
  .key--give { min-height: 40px; }
  .key--wideword { display: none; }
  .key--shortword { display: inline; }
  .graph { height: 260px; }
}

@media (max-width: 420px) {
  .tape { width: calc(100vw - var(--s16)); padding: var(--s16); }
  :root { --split: 1px; }
  .hud--channel { white-space: normal; flex-wrap: wrap; }
  .plate { padding: var(--s24); }
  .plate__name { font-size: var(--t24); }
  .plate__keys { grid-template-columns: minmax(0, 1fr); }
  .key--mark { justify-content: flex-start; }
  /* at 320 a room is 123 px wide: the name and the balance each have to fit on one line */
  .room__state { display: none; }
  .room__text { padding: var(--s12) var(--s16); }
  .room__lab { font-size: var(--t16); }
  .room__bal { font-size: var(--t14); margin-top: var(--s4); }
  .key--give { margin-top: var(--s8); }
  .key--primary { letter-spacing: 0.04em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}