/* The assistant's page — a letter. A centred letterhead with the address at the top-left, the date at
   the top-right, and the conversation set as the letter's body at the foot: the assistant's lines
   indented like paragraphs, the visitor's flush. No dashes. Composition from Johan's third frame
   (Fred-Perry file, node 15193-22608, 26 Oct 2026).

   DRAFT FLAGS:
   1. The typewriter face has no studio token (type.family has primary and ui only) — a local
      variable until the site's type decision; Courier Prime since 26 Oct (Courier New before).
   2. The frame's line pitch is 15 at 12; the studio pairs are 12/14 and 12/16 — 16 taken, to be judged.
   3. The measures (letterhead 32ch, body 55ch), the body's left at a quarter of the width, the
      paragraph indent (4ch): read from the frame in characters of the face — typographic, flagged.
   4. The page inset is space.32 all round (the frame's ~90 was tried as space.96 and brought back
      to 32, Johan, 26 Oct); the bottom of the body space.80 — read from the frame.
   5. The 768 breakpoint literal, as in site.css. */
:root { --site-family-mono: "Courier Prime", "Courier New", Courier, monospace; }

/* Courier Prime (Quote-Unquote Apps, OFL) — the typewriter face redrawn for the screen, self-hosted
   (Johan, 26 Oct 2026). Latin subset; Courier New stands in while it loads at the same advance width,
   so nothing moves. */
@font-face { font-family: "Courier Prime"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/courier-prime-400.woff2") format("woff2"); }
@font-face { font-family: "Courier Prime"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/courier-prime-700.woff2") format("woff2"); }
@font-face { font-family: "Courier Prime"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/courier-prime-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Courier Prime"; font-style: italic; font-weight: 700; font-display: swap; src: url("fonts/courier-prime-700-italic.woff2") format("woff2"); }

* { box-sizing: border-box; margin: 0; }
html, body { min-height: var(--fence-screen-h); }
body {
  position: relative;
  padding: var(--space-32);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--site-family-mono);
  font-weight: var(--type-weight-regular);
  font-size: var(--type-size-sm);   /* one step up from xs/16 (Johan, 26 Oct 2026) */
  line-height: var(--type-leading-16);  /* 14 on 16: a touch tighter than the 18 pair (Johan, 26 Oct 2026) */
  letter-spacing: var(--type-tracking-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-underline-offset: 20%;
}
a { color: inherit; }
/* A link in the dialogue wears brackets, not an underline — a typewriter's way of marking (Johan, 26 Oct 2026) */
.dialogue a { text-decoration: none; }
.dialogue a::before { content: "["; }
.dialogue a::after { content: "]"; }
.dialogue a:hover { color: var(--color-text-secondary); }

/* The letterhead: the sender and the date as one block at the top-left, flush left, a line of air between */
.sender { font-style: normal; max-width: 32ch; }
.dateline { margin-top: var(--space-16); }

/* The light/dark switch: the bottom-left corner, written as text — the current mode in brackets */
.mode { position: absolute; left: var(--space-32); bottom: var(--space-32); }
.mode button { all: unset; cursor: pointer; }
.mode button:hover { color: var(--color-text-secondary); }
.mode button:focus-visible { outline: var(--stroke-hairline) solid var(--color-stroke-primary); outline-offset: var(--space-4); }
.mode button[aria-current="true"]::before { content: "["; }
.mode button[aria-current="true"]::after { content: "]"; }
[data-color-mode="dark"] .cursor { background: var(--color-text-primary); } /* on the black ground the block is the ink; the letter under it still inverts */

/* The page in three columns (Johan, 26 Oct 2026): the first holds the studio name at the top and the
   light/dark switch at its foot; the second is the conversation, resting on the foot; the third is empty
   for now — the stair's furthest step may walk into it. */
.letter {
  position: absolute;
  left: var(--layout-third);
  bottom: var(--space-96);
  width: 84ch;
  max-width: calc(100% - var(--layout-third) - var(--space-32));
}

/* The dialogue as BLOCKS that step across the page (Johan's references, 26 Oct 2026: the interview spread
   whose answers stair rightward, the playlist whose tab stops wander, the page with numbers in its margin).
   The opening is a plain block (the salutation “Welcome.” was tried and removed). Then each exchange: the visitor's
   question a short block stepped in by one stop, in the ink (grey and roman numerals were tried and removed);
   the assistant's answer a ragged block flush with the opening, so the assistant's voice is always flush left
   (the other way round, and a drifting stair, were tried first). */
.dialogue { list-style: none; padding: 0; }
.dialogue li { text-wrap: pretty; }
.dialogue .them { max-width: 46ch; text-indent: 0; } /* no first-line indents: position is the page's one structural device (26 Oct) */ /* the opening: a block of the answers' measure (justification was tried and removed — it breaks the monospace grid) */
.dialogue .waiting::after { content: "…"; }
.dialogue .after-blank { margin-top: 1lh; } /* one empty line before the paragraph in which the assistant says who it is */

.dialogue .you {                                  /* the question: a short block stepped in by one stop, in the ink like everything else */
  position: relative;
  max-width: 33ch;                                /* between the first 28 and the shared edge at 38 (Johan, 26 Oct) */
  margin-top: var(--space-16);
  margin-bottom: var(--space-6);                  /* a hair of air before the answer (Johan, 26 Oct) */
  margin-left: 8ch;                               /* the visitor steps in; the assistant's voice is always flush left (Johan, 26 Oct) */
  text-indent: 0;
}
.dialogue .answer {                               /* the answer: a ragged block, flush with the opening */
  max-width: 46ch;
  text-indent: 0;
}

/* The visitor's line: a bare input in the same voice, flush, no box, no button; Enter sends.
   The caret is a BLOCK, one cell wide, as on a terminal or a typewriter's ribbon guide: the native
   caret is hidden and the block follows the real caret position (set from the script, in ch). */
.ask { margin-top: 0; }
.line { display: flex; position: relative; cursor: text; margin-left: 8ch; } /* the I-beam over the whole line, ghost and caret included; the line sits at the visitor's stop */
.line input {
  all: unset;
  flex: 1;
  min-width: 0;
  padding: 0;
  text-indent: 0;
  font: inherit;
  color: inherit;
  caret-color: transparent;
  cursor: text; /* all: unset dropped the I-beam */
}
.line input:focus-visible { outline: none; }
/* The ghost: an example question typed into the empty line in grey, behind the input, erased when the visitor writes */
.ghost { position: absolute; left: 0; top: 0; color: var(--color-text-secondary); white-space: pre; pointer-events: none; }
.cursor {
  position: absolute;
  left: var(--at, 0ch);
  top: calc((1lh - 1em) / 2); /* the em box, centred on the line: the block covers the type, not the leading */
  width: 1ch;
  height: 1em;
  background: var(--color-bg-primary);
  mix-blend-mode: difference; /* page-white in difference: a black block on the empty cell, and the letter under it inverted, as a terminal does */
  animation: blink calc(var(--motion-duration-slow) * 2) step-end infinite; /* a terminal’s blink, on for half and off for half: an 800 cycle, twice the slow duration (the 2000 linger read as sleepy, Johan 26 Oct) */
  pointer-events: none;
}
.line input:not(:focus) + .cursor { visibility: hidden; }
.line.ghosting .cursor { background: var(--color-text-secondary); mix-blend-mode: normal; } /* while a suggestion types itself, its caret is a ghost too */
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }

@media (max-width: 767px) {
  body { display: flex; flex-direction: column; padding: var(--space-16); }
  /* the body rests on the foot here too: pushed down by the empty page, growing upward as the exchange goes on */
  .letter { position: static; width: auto; max-width: none; margin-top: auto; padding-top: var(--space-64); }
  .mode { position: static; margin-top: var(--space-32); } /* below the body on the phone, where the corner is the line's */
  .dialogue li { text-wrap: auto; } /* below the line phones wrap greedily (studio rule, 5 Sep 2026) */
  .dialogue .you { max-width: none; }
  .dialogue .them { max-width: none; }
  .dialogue .answer { max-width: none; margin-left: 4ch; } /* a shallow stair, no drift */
}