/* =========================================================================
   Miru Studio — Typography system (v1)
   -------------------------------------------------------------------------
   Eight intentional tiers. Every type rule on this site uses one of these.
   No bespoke font-size / line-height / letter-spacing anywhere else.

   Tiers (token name → role)
     t-display    Hero claim. Once per page max.
     t-title      Section headlines, page titles, big section moments
     t-subtitle   Card titles, sub-section heads, pull quotes
     t-lead       Intro paragraph, deck
     t-body       Paragraph copy
     t-caption    Small body, footnotes
     t-label      Mono uppercase markers, section labels, captions over media
     t-numeral    Stat numbers (the only place 700 weight appears)

   Modifier
     .is-italic   Composes with t-subtitle (or any tier) to switch to
                  Sentinel italic with curly quote marks. Block pull-quote
                  treatment only. Never inline emphasis.

   Rules behind the rules
   - Tracking follows size. Bigger = tighter. Caps mono = looser.
   - Line-height follows size. Display under 1.0, headline 1.1–1.25, body 1.5–1.6.
   - Weight 500 (Medium) is the studio's default voice. 400 is body. 700 is numerals only.
   - Sentinel italic is a block-quote frame, never inline.
   - Mono is film-slate. Labels, credits. Never body, never headlines.
   ========================================================================= */

:root {
  /* Font stacks */
  --font-sans: 'NHG', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-italic: 'Sentinel', Georgia, 'Times New Roman', serif;

  /* Sizes */
  --t-display-size:  clamp(56px, 9.6vw, 168px);
  --t-title-size:    clamp(40px, 5.6vw, 96px);
  --t-subtitle-size: clamp(24px, 3.2vw, 48px);
  --t-lead-size:     clamp(18px, 1.6vw, 22px);
  --t-body-size:     17px;
  --t-caption-size:  13px;
  --t-label-size:    11px;
  --t-numeral-size:  clamp(40px, 4.2vw, 64px);

  /* Tracking */
  --t-display-track:  -0.04em;
  --t-title-track:    -0.03em;
  --t-subtitle-track: -0.018em;
  --t-lead-track:     -0.005em;
  --t-body-track:     0;
  --t-caption-track:  -0.003em;
  --t-label-track:    0.18em;
  --t-numeral-track:  -0.03em;

  /* Line heights */
  --t-display-lh:  0.92;
  --t-title-lh:    0.98;
  --t-subtitle-lh: 1.15;
  --t-lead-lh:     1.45;
  --t-body-lh:     1.6;
  --t-caption-lh:  1.5;
  --t-label-lh:    1.5;
  --t-numeral-lh:  1;
}

/* =========================================================================
   Utility classes — apply directly on elements
   ========================================================================= */

.t-display {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-display-size);
  line-height: var(--t-display-lh);
  letter-spacing: var(--t-display-track);
}

.t-title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-title-size);
  line-height: var(--t-title-lh);
  letter-spacing: var(--t-title-track);
}

.t-subtitle {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-subtitle-size);
  line-height: var(--t-subtitle-lh);
  letter-spacing: var(--t-subtitle-track);
}

.t-lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-lead-size);
  line-height: var(--t-lead-lh);
  letter-spacing: var(--t-lead-track);
}

.t-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  letter-spacing: var(--t-body-track);
}

.t-caption {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-caption-size);
  line-height: var(--t-caption-lh);
  letter-spacing: var(--t-caption-track);
}

.t-label {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--t-label-size);
  line-height: var(--t-label-lh);
  letter-spacing: var(--t-label-track);
  text-transform: uppercase;
}

.t-numeral {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--t-numeral-size);
  line-height: var(--t-numeral-lh);
  letter-spacing: var(--t-numeral-track);
}

/* Sentinel italic block-quote modifier. Compose with any size tier. */
.is-italic {
  font-family: var(--font-italic);
  font-weight: 600;
  font-style: italic;
}
.is-italic.has-quotes::before { content: '\201C'; opacity: 0.55; margin-right: 0.05em; }
.is-italic.has-quotes::after  { content: '\201D'; opacity: 0.55; margin-left: 0.05em; }

/* Sensible defaults for raw HTML elements that don't take a class */
h1 { font: 500 var(--t-display-size)/var(--t-display-lh) var(--font-sans); letter-spacing: var(--t-display-track); margin: 0; }
h2 { font: 500 var(--t-title-size)/var(--t-title-lh) var(--font-sans); letter-spacing: var(--t-title-track); margin: 0; }
h3 { font: 500 var(--t-subtitle-size)/var(--t-subtitle-lh) var(--font-sans); letter-spacing: var(--t-subtitle-track); margin: 0; }
h4 { font: 500 var(--t-lead-size)/var(--t-lead-lh) var(--font-sans); letter-spacing: var(--t-lead-track); margin: 0; }