/* =========================================================
   @cal/ui — Base. Mirrors the live askcal.io type treatment:
   Newsreader 500 headlines (tight tracking), serif lede, the emphasised
   <em> accent, the Geist Mono eyebrow. Hairlines, no boxes.
   Import AFTER tokens.css.
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cal-bg);
  color: var(--cal-fg);
  font-family: var(--sans);
  font-size: var(--cal-text-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--cal-transition-base), color var(--cal-transition-base);
}

/* Display + headlines: Newsreader 500, tight tracking, tight leading */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: var(--cal-tracking-display);
  line-height: var(--cal-leading-display);
  color: var(--cal-fg);
  margin: 0 0 var(--cal-space-4);
}
h1 { font-size: var(--cal-text-h1); }
h2 { font-size: var(--cal-text-h2); }
h3 { font-size: var(--cal-text-h3); line-height: 1.2; }
h4 { font-size: 17px; line-height: 1.2; }

/* THE signature accent: italic Newsreader inside a serif headline */
h1 em, h2 em, .cal-display em, .display em {
  font-style: italic;            /* synthesized from upright Newsreader */
  color: var(--cal-accent);
}

p { margin: 0 0 var(--cal-space-4); max-width: 68ch; color: var(--cal-fg-muted); }
a { color: var(--cal-accent); text-decoration: none; }
a:hover { color: var(--cal-accent-hover); text-decoration: underline; }

/* Numerals: mono, tabular */
.cal-num, code, kbd, samp {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* The eyebrow: mono, tracked, uppercase.
   Brand v3: green is a marker, never a letter, and amber is 1.94:1 on paper so
   it is a fill or a rule and never type. The colour variants below therefore
   carry their meaning in a left rule with the text left at ink. */
.cal-eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cal-fg-subtle);
  font-weight: 500;
}
.cal-eyebrow--green,
.cal-eyebrow--amber,
.cal-eyebrow--blue { color: var(--cal-fg, #1A1A1A); padding-left: 8px; border-left: 3px solid currentColor; }
.cal-eyebrow--green { border-left-color: var(--green); }
.cal-eyebrow--amber { border-left-color: var(--amber); }
.cal-eyebrow--blue  { border-left-color: var(--blue); }

/* Serif lede, like the live hero subhead */
.cal-lede {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(19px, 1.7vw, 22px);
  line-height: 1.45;
  color: var(--cal-fg-muted);
  max-width: 720px;
}

/* Hairline, never a box */
hr, .cal-rule { border: 0; height: 1px; background: var(--cal-border); margin: var(--cal-space-6) 0; }

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--cal-focus-ring);
  outline-offset: 2px;
}

img, svg { max-width: 100%; height: auto; display: block; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}