/* ============================================================
   MONTEREY STUDIO — type.css
   Local font-faces · type scale · heading and text styles
   Owner: typography specialist
   Direction: design/direction.md §4 — three families, three sizes.
   ============================================================ */

/* ---- Archivo variable (wght 100–900, wdth 62–125) — display ---- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Newsreader variable (opsz 6–72, wght 400–500) — text ---- */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/newsreader-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/newsreader-italic-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Spline Sans Mono variable (wght 400–500) — instrument layer ---- */
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/splinesansmono-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Base text
   ============================================================ */

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Newsreader', Georgia, serif;
  font-optical-sizing: auto;
  font-size: 1.125rem;
  line-height: 1.55;
  font-weight: 400;
  font-kerning: normal;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

p { max-width: 34em; text-wrap: pretty; }

a {
  color: var(--ember);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--ember) 40%, transparent);
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
a:hover { border-bottom-color: var(--ember); }

em, .voice-italic {
  font-style: italic;
  font-weight: 400;
}

strong { font-weight: 500; }

/* ============================================================
   The three sizes (§4) — the mid-size headline is banned.
   ============================================================ */

/* 1 · Display — Archivo, all caps, enormous. The wdth axis breathes
      with the day via --display-wdth (118 at noon → 100 at sunset).
      Set PRESSED: tight tracking, tight word-space, no daylight
      between lines. The confidence is in the setting, not the size. */
.display {
  font-family: 'Archivo', 'Helvetica Neue', sans-serif;
  font-variation-settings: 'wght' 900, 'wdth' var(--display-wdth);
  text-transform: uppercase;
  font-size: clamp(4rem, 12.5vw, 11.5rem);
  line-height: 0.86;
  letter-spacing: -0.028em;
  word-spacing: -0.05em;
  /* Optical left alignment: tuck the cap side-bearing into the gutter
     so the stroke — not the glyph box — sits on the margin line. */
  text-indent: -0.045em;
  text-wrap: balance;
  margin: 0;
  /* Live shadow recipe (§2, binding): tight dark + long soft warm.
     Direction always opposes --sun-x — motion.js guarantees a real
     horizontal slant so the pair reads as cast light, never as a
     default drop blur: the tight layer is a crisp contact shadow at
     a third of the throw, the warm layer a long Ember wash at the
     full throw. */
  /* Photoreal tuning: display type mostly stands against open AIR,
     and air catches no shadow — the tight dark layer is dropped to
     a whisper (edge definition, not a cast shadow) and the long
     warm layer reads as halation from the backlight. */
  text-shadow:
    calc(var(--shadow-dx) * 0.33) calc(var(--shadow-dy) * 0.33) 2px
      color-mix(in srgb, var(--afterglow-ink) 10%, transparent),
    var(--shadow-dx) var(--shadow-dy) calc(var(--shadow-len) * 0.55)
      color-mix(in srgb, var(--ember) 18%, transparent);
}

/* Section-scale display — still display, just not hero-scale.
   Slightly opened leading: these wrap to 2–4 balanced lines. */
.display-2 {
  font-size: clamp(2.9rem, 7.2vw, 6.8rem);
  line-height: 0.9;
}

/* 2 · Body — Newsreader, ~1.125rem, set above.
      The kicker is the working paragraph of every stanza — give it a
      designed size of its own between body and display. */
.kicker {
  font-size: 1.3rem;
  line-height: 1.5;
  text-wrap: pretty;
}

/* Evidence clauses — quiet next to the figures, but finely set.
   Weight 500: a text serif at this size needs it to hold its color
   against the water it sits on. */
.clause {
  font-weight: 500;
  line-height: 1.5;
  text-wrap: pretty;
}

/* 3 · Mono — Spline Sans Mono instrument layer. Finer than body:
      an instrument reads smaller and crisper than prose. */
.mono {
  font-family: 'Spline Sans Mono', ui-monospace, 'SF Mono', monospace;
  font-weight: 400;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.mono strong { font-weight: 500; }

/* Eyebrow timestamps — computed for Monterey today by motion.js.
   The one recurring mark of the system: a touch heavier, a touch
   wider, with a longer rule — deliberate, not decorative. */
.eyebrow {
  color: color-mix(in srgb, var(--kelp) 80%, var(--offshore));
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  margin: 0 0 var(--s-4);
  display: flex;
  align-items: center;
  gap: 0.85em;
}
.eyebrow::after {
  content: '';
  display: inline-block;
  width: 5rem;
  height: 1px;
  background: var(--hairline);
}

/* Pull-quotes and service descriptors — Newsreader italic.
   A real typographic moment: larger, tighter leading, and the
   opening quote hung outside the measure. */
.pull {
  font-style: italic;
  font-size: clamp(1.3rem, 1.15rem + 0.55vw, 1.55rem);
  line-height: 1.42;
  color: var(--kelp);
  max-width: 24em;
  margin: var(--s-5) 0 0;
  text-indent: -0.48em; /* hang the “ */
  text-wrap: pretty;
}

/* Evidence figures — big mono numerals. The sharpest moment on the
   site (§6): large enough to argue with the display, tracked tight
   so the mono advance doesn't read as gaps. */
.figure-mono {
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-weight: 500;
  font-size: clamp(1.9rem, 3.9vw, 3.5rem);
  letter-spacing: -0.03em;
  word-spacing: -0.28em; /* mono word-space at this size reads as a hole */
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

/* The wordmark */
.wordmark {
  white-space: nowrap;
  font-family: 'Archivo', sans-serif;
  font-variation-settings: 'wght' 500, 'wdth' 110;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.9rem;
  color: var(--chrome-ink, var(--ink));
  border-bottom: none;
  /* no color transition: --chrome-ink is written every frame, and a
     transition would restart each frame and never settle */
  transition: none;
}
.wordmark:hover { color: var(--ember); }