/* ============================================================
   usestop v2 — typography
   Fraunces (display, WONK+SOFT axes) + Geist Mono + Inter Tight
   Owned by Garth. Filename is typography-v2.css (NOT typography.css)
   because /index.html already loads /css/typography.css for the
   camera app — overwriting that file would poison the app bundle.
   Worker: link this file from landing.html, not typography.css.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,100..900,0..100,0..1;1,9..144,100..900,0..100,0..1&family=Inter+Tight:wght@300;400;500&family=Geist+Mono:wght@400;500&display=swap');

/* ---- tokens -------------------------------------------------- */
:root {
  --font-display: 'Fraunces', 'Times New Roman', Georgia, serif;
  --font-mono:    'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
  --font-body:    'Inter Tight', 'Inter', system-ui, sans-serif;

  /* WONK dial 0–100. Below 50 = SOFT only. Above 50 = WONK=1 + SOFT. */
  --wonk: 20;

  /* body scale */
  --fs-body:   1rem;      /* 16px */
  --fs-lead:   1.1875rem; /* 19px */
  --fs-meta:   0.6875rem; /* 11px — Geist Mono metadata/frame counter */
  --fs-slug:   0.75rem;   /* 12px — FRAME 0N / SLUG */

  --lh-display: 0.92;
  --lh-body:    1.48;
  --lh-lead:    1.38;

  --ls-meta:  0.18em;
  --ls-slug:  0.22em;
  --ls-body: -0.005em;
}

/* ---- body + lead -------------------------------------------- */
body.v2, .v2 p, .v2 li {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--paper, #F2EFE6);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.v2 p.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-weight: 300;
  max-width: 42ch;
}

/* ---- display + wonk dial ------------------------------------ */
.v2 .display,
.v2 h1, .v2 h2, .v2 h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-display);
  letter-spacing: -0.025em;
  font-variation-settings:
    "opsz" 144,
    "SOFT" clamp(0, calc(var(--wonk) * 1), 100),
    "WONK" clamp(0, calc((var(--wonk) - 50) / 50), 1);
}

/* hero display — WONK dial 50 */
.v2 .display-hero { --wonk: 50; font-size: clamp(5rem, 14vw, 14rem); }

/* body display moments — WONK dial 20 (gentle) */
.v2 .display-body { --wonk: 20; font-size: clamp(2.25rem, 4.2vw, 4rem); }

/* expressive pull quote — WONK dial 80 (wonky, feral) */
.v2 .display-wonky { --wonk: 80; font-variation-settings:
  "opsz" 144, "SOFT" 100, "WONK" 1; font-style: italic; }

/* section ink-draw: weight animates 200 → 700 over 900ms */
@keyframes v2-ink-draw {
  from { font-variation-settings: "opsz" 144, "wght" 200, "SOFT" 60, "WONK" 1; opacity: 0.2; }
  to   { font-variation-settings: "opsz" 144, "wght" 700, "SOFT" 50, "WONK" 1; opacity: 1; }
}
.v2 .ink-draw {
  animation: v2-ink-draw 900ms cubic-bezier(.22,.61,.36,1) both;
}

/* ---- monospace metadata ------------------------------------- */
.v2 .meta,
.v2 .slug,
.v2 .frame-num,
.v2 .mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--paper, #F2EFE6);
  opacity: 0.72;
}
.v2 .slug { letter-spacing: var(--ls-slug); font-size: var(--fs-slug); opacity: 0.55; }

/* ---- reduced motion ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .v2 .ink-draw { animation: none; opacity: 1; font-variation-settings: "opsz" 144, "wght" 700, "SOFT" 50, "WONK" 1; }
}