/* ════════════════════════════════════════════════════════════════════════════
   359 — THE MOBILE TYPE RAMP. 349's colour ladder gets its size twin.
   ════════════════════════════════════════════════════════════════════════════

   THE PROBLEM, MEASURED (scripts/type-scan.js, 9 Aug 2026): our-family had 104
   font-size rules, 75 of them under 16px, and NINE ≤700px overrides on the
   whole page. Mobile inherited desktop's type scale wholesale; only the display
   serif was ever adapted. 12.5px alone appeared in 29 rules on our-family, 15
   on historian, 11 on vault. Ed's words for the result: "looks like a website
   squashed onto a phone — fonts feel small."

   THE INSTRUMENT IS ONE FILE. Sizes are declared here as SEMANTIC tokens with
   their own ≤700px values, so a rule written once — `font-size: var(--t-body)`
   — is correct at both breakpoints and no page has to carry a second media
   query to say it. That is also why the tokens work in INLINE styles: this
   codebase writes a lot of type inside JS template strings, where a media
   query cannot reach but a custom property resolves normally.

   THE RAMP (desktop → ≤700px):

     token           desktop   mobile   weight   what it is
     --t-display     (clamps)  (clamps)   300    hero serif — already right, untouched
     --t-title         19        20      400     card and section titles
     --t-body          15        16      400     sentence-like reading content
     --t-secondary     13        15      400     supporting lines, subtitles
     --t-meta          12.5      13      400     timestamps, counts, attribution
     --t-label         11        11      500     eyebrows, uppercase-tracked — exempt
     --t-input         16        16      400     every field, everywhere

   THREE FLOORS, NON-NEGOTIABLE (p15 gates them):
     · sentence-like body ≥16px on mobile
     · meta ≥13px on mobile
     · EVERY input ≥16px everywhere — under 16 iOS Safari zooms the page on
       focus, which is the "squashed website" feeling at its most literal.
       (`circle-name` and the chat input were already 16 before this prompt —
       someone fixed those two after feeling it, which is the bug reporting
       itself.)

   WEIGHT: DM Sans 300 is banned below 16px on mobile — thin AND small is the
   double penalty. --t-w-body is 400 at every size the ramp covers.

   ⚠ DRIFT IS HOW THIS ROTS (the 349 lesson). No page may redeclare a --t-*
   value locally; p15 asserts it. If a surface genuinely needs a size the ramp
   does not have, the ramp gains a token — here, once.
   ════════════════════════════════════════════════════════════════════════════ */

/* ⚠ THE SIZES ARE rem, NOT px, AND THAT IS LOAD-BEARING — the migration nearly
   broke two live things by not noticing.
     · people.html and historian.html carry a real ACCESSIBILITY PREFERENCE
       (`html[data-font-size=small|medium|large]` → root 13/16/20px, stored in
       localStorage). It works by scaling the ROOT, so it only ever reached
       rem-based rules; a ramp in px would have silently switched that control
       off for every rule it touched — 54 of them on people.html alone.
     · shell.html sets `html{font-size:120%}` on purpose. A px ramp SHRANK that
       page's type without anyone asking for it.
   At the default 16px root every value below computes to exactly the px figure
   in the table, so nothing else moves. --t-input stays in PX deliberately: the
   iOS zoom threshold is an absolute 16px, not a preference. */
:root {
  --t-title:     1.1875rem;  /* 19px */
  --t-body:      0.9375rem;  /* 15px */
  --t-secondary: 0.8125rem;  /* 13px */
  --t-meta:      0.78125rem; /* 12.5px */
  --t-label:     0.6875rem;  /* 11px */
  --t-input:     16px;

  --t-w-body:  400;
  --t-w-label: 500;

  --t-lh-body:      1.55;
  --t-lh-secondary: 1.5;
}

@media (max-width: 700px) {
  :root {
    --t-title:     1.25rem;    /* 20px */
    --t-body:      1rem;       /* 16px */
    --t-secondary: 0.9375rem;  /* 15px */
    --t-meta:      0.8125rem;  /* 13px */
    --t-label:     0.6875rem;  /* 11px */
    --t-input:     16px;

    --t-lh-body:      1.6;
    --t-lh-secondary: 1.55;
  }
}

/* The universal input floor. Declared here rather than page by page because
   "every field, everywhere" is exactly the kind of rule that rots when it is
   restated twelve times — and the pages that got it right did so one field at
   a time, which is how three of them were still at 13px. */
input, textarea, select {
  font-size: var(--t-input);
}