/* ============================================================
   TYPOGRAPHY — two voices, clear scale
   16 / 1.7 body (sans, the reading voice) · 13 small ·
   22 card title · 28→40 page title (serif, the museum voice).
   Weight carries hierarchy within each voice.
============================================================ */
*{box-sizing:border-box}
[hidden]{display:none!important}   /* the HTML hidden attribute beats any display rule (a display:flex once silently un-hid the install hint) */
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px;scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.7 var(--font-sans);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;touch-action:manipulation;overflow-x:hidden;overscroll-behavior-y:none}
img,svg,video{max-width:100%;height:auto}
textarea,input,select{max-width:100%}
h1,h2,h3{font-family:var(--font-serif);font-weight:600;margin:0;color:var(--ink);letter-spacing:.01em;text-wrap:balance}
h4{font-family:var(--font-sans);font-weight:600;margin:0;color:var(--ink);letter-spacing:-.01em}
h1{font-size:1.75rem;line-height:1.25}
h2{font-size:1.25rem;line-height:1.35}
h3{font-size:1.05rem;line-height:1.4}
p{margin:.4em 0}
a{color:inherit}
::selection{background:var(--accent-tint-2)}
code{font-family:var(--font-mono);font-size:.88em;background:var(--surface-2);padding:.1em .4em;border-radius:6px}

/* page titles scale with how long the question is; three steps, no more.
   Serif display voice: no negative tracking (CJK serif cramps under it). */
h1.t-huge{font-size:clamp(1.85rem,4.6vw,2.6rem);line-height:1.35;letter-spacing:.01em}
h1.t-large{font-size:clamp(1.6rem,3.6vw,2.2rem);line-height:1.35;letter-spacing:.01em}
h1.t-medium{font-size:clamp(1.35rem,2.6vw,1.75rem);line-height:1.4;letter-spacing:.01em}
.card .question.t-huge,.card .question.t-large,.card .question.t-medium{font-size:1.375rem;line-height:1.5;letter-spacing:.01em}

.meta{color:var(--ink-2);font-size:.8125rem;font-weight:400}
.meta.tiny{font-size:.75rem;color:var(--ink-3)}
.meta a{color:var(--accent-deep);text-decoration:none;font-weight:500}
.meta a:hover{text-decoration:underline;text-underline-offset:3px}
.lede{font-size:1.0625rem;line-height:1.7;color:var(--ink-2);margin:6px 0 var(--s5);max-width:36em}

/* "kicker" is now a small quiet tag: type of thought, section context. Sentence case, no tracking. */
.kicker{display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;font-weight:500;color:var(--ink-2);letter-spacing:0;text-transform:none}
.kicker .dot{background:var(--ink-3)}
.kicker .dot.action{background:var(--accent)}
.kicker .dot.human{background:var(--accent)}
.serif{font-family:var(--font-serif)}   /* V21: the museum voice */
.sans{font-family:var(--font-sans)}
.warn-inline{color:var(--warn)}
.error{color:var(--danger);font-size:.9rem}