/* ============================================================
   NOOK TYPOGRAPHY
   ------------------------------------------------------------
   Nook's display voice is Fraunces driven through its variable
   axes — not the default instance. Every display size gets its
   own optical size, weight, SOFT (terminal softness) and WONK
   (the swapped, slightly odd glyph set). That combination is
   what makes the type read as Nook's rather than as "a serif".

   Rules of the house:
   - WONK is ON for display, OFF for anything small. The wonky
     glyphs are charming at 40px and illegible at 13px.
   - opsz always tracks the actual rendered size.
   - Display text is tightened; UI text never is.
   - Numerals in stats use display face + tabular figures so
     changing values don't reflow.
   ============================================================ */

/* ---------- Display scale ----------
   fluid, clamped, and optically sized per step. */

.n-display,
h1, h2, h3, h4 {
  font-family: var(--nook-font-display);
  font-weight: 500;
  color: var(--nook-ink-strong);
  margin: 0;
  text-wrap: balance;
}

/* d1 — hero. Maximum wonk, softest terminals, tightest tracking. */
.n-d1 {
  font-family: var(--nook-font-display);
  font-size: clamp(42px, 7.2vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.028em;
  font-weight: 480;
  font-variation-settings: 'opsz' 120, 'SOFT' 42, 'WONK' 1;
  text-wrap: balance;
}

/* d2 — section openers. */
.n-d2 {
  font-family: var(--nook-font-display);
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.022em;
  font-weight: 500;
  font-variation-settings: 'opsz' 72, 'SOFT' 34, 'WONK' 1;
  text-wrap: balance;
}

/* d3 — block headings inside the product. */
.n-d3 {
  font-family: var(--nook-font-display);
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.12;
  letter-spacing: -0.016em;
  font-weight: 520;
  font-variation-settings: 'opsz' 40, 'SOFT' 26, 'WONK' 1;
}

/* d4 — card titles. Wonk off; too small to carry it. */
.n-d4 {
  font-family: var(--nook-font-display);
  font-size: 19px;
  line-height: 1.22;
  letter-spacing: -0.011em;
  font-weight: 560;
  font-variation-settings: 'opsz' 24, 'SOFT' 18, 'WONK' 0;
}

/* ---------- Numerals ----------
   Big statistics are display-face, tabular, and very tight.
   This is the single most "Nook" typographic gesture. */

.n-numeral {
  font-family: var(--nook-font-display);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: -0.04em;
  font-weight: 500;
  line-height: 0.9;
  font-variation-settings: 'opsz' 144, 'SOFT' 30, 'WONK' 0;
  color: var(--nook-ink-strong);
}

.n-numeral-xl { font-size: clamp(52px, 9vw, 92px); }
.n-numeral-lg { font-size: clamp(36px, 5vw, 52px); }
.n-numeral-md { font-size: 30px; }
.n-numeral-sm { font-size: 22px; }

/* The timer face: monospaced-by-tabular display numerals, wide. */
.n-timeface {
  font-family: var(--nook-font-display);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1;
  font-variation-settings: 'opsz' 144, 'SOFT' 20, 'WONK' 0;
  font-weight: 430;
  letter-spacing: -0.03em;
  line-height: 1;
}

/* ---------- Eyebrow / label ----------
   Small caps-ish label, wide tracking. Used to open sections. */

.n-eyebrow {
  font-family: var(--nook-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nook-brick-text);
  display: block;
}

.n-eyebrow--muted { color: var(--nook-muted); }
.n-eyebrow--olive { color: var(--nook-olive); }
.n-eyebrow--on-dark { color: var(--nook-amber); }

/* A label that sits on a rule — editorial section marker. */
.n-rule-label {
  display: flex;
  align-items: center;
  gap: var(--nook-s-4);
  margin-bottom: var(--nook-s-6);
}
.n-rule-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--nook-border);
}

/* ---------- Body ---------- */

body {
  font-family: var(--nook-font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--nook-ink);
  font-feature-settings: 'cv05' 1, 'cv11' 1, 'ss01' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.n-lead {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.55;
  color: var(--nook-ink);
  max-width: 54ch;
}

.n-body   { font-size: 15px; line-height: 1.62; }
.n-small  { font-size: 13.5px; line-height: 1.55; }
.n-micro  { font-size: 12px; line-height: 1.45; letter-spacing: 0.005em; }
.n-muted  { color: var(--nook-muted); }
.n-muted-soft { color: var(--nook-muted-soft); }

/* Editorial pull-quote / manifesto text — display face, loose. */
.n-prose-display {
  font-family: var(--nook-font-display);
  font-size: clamp(21px, 2.6vw, 30px);
  line-height: 1.34;
  letter-spacing: -0.012em;
  font-weight: 420;
  font-variation-settings: 'opsz' 60, 'SOFT' 40, 'WONK' 1;
  max-width: 26ch;
}

/* Ordinal step numbers: 01 / 02 / 03 — outlined, editorial. */
.n-step-num {
  font-family: var(--nook-font-display);
  font-size: clamp(40px, 5vw, 62px);
  font-weight: 400;
  font-variation-settings: 'opsz' 100, 'SOFT' 0, 'WONK' 1;
  letter-spacing: -0.02em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--nook-border-strong);
  display: block;
}

/* ---------- Wordmark ----------
   Nook's logotype: display face, wonk on, a hair of extra
   tracking on the double-o so the counters breathe. */

.n-wordmark {
  font-family: var(--nook-font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.014em;
  font-variation-settings: 'opsz' 32, 'SOFT' 30, 'WONK' 1;
  line-height: 1;
  color: var(--nook-ink-strong);
}

/* ---------- Utilities ---------- */

.n-tabular { font-variant-numeric: tabular-nums; }
.n-nowrap  { white-space: nowrap; }
.n-balance { text-wrap: balance; }
.n-pretty  { text-wrap: pretty; }

/* Latvian and Russian need slightly different display tracking —
   diacritic stacks and Cyrillic counters read tighter otherwise. */
:root[lang='lv'] .n-d1,
:root[lang='lv'] .n-d2 { letter-spacing: -0.018em; }

:root[lang='ru'] .n-d1,
:root[lang='ru'] .n-d2 { letter-spacing: -0.012em; font-variation-settings: 'opsz' 96, 'SOFT' 30, 'WONK' 0; }
:root[lang='ru'] .n-wordmark { font-variation-settings: 'opsz' 32, 'SOFT' 30, 'WONK' 1; }