/* ============================================================================
   MINI RETIREMENT — BASE ELEMENT DEFAULTS
   ----------------------------------------------------------------------------
   Sensible, on-brand defaults for raw HTML elements. Import AFTER tokens.css.
   Opinionated (sets body bg, heading fonts, link behavior) — import this on
   NEW pages you want to inherit the house style. The example pages style their
   own elements and intentionally do NOT import this file.

       <link rel="stylesheet" href="tokens.css">
       <link rel="stylesheet" href="base.css">
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { margin: 0; }

/* Headings — display serif at regular weight (Newsreader reads best at 400) */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-heading); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); }
/* h3/h4 step down to the sans for UI-level headings */
h3 { font-size: var(--fs-h3); line-height: var(--lh-tight); font-family: var(--font-sans); font-weight: var(--fw-medium); letter-spacing: 0; }
h4 { font-size: var(--fs-h4); line-height: var(--lh-tight); font-family: var(--font-sans); font-weight: var(--fw-medium); letter-spacing: 0; }

/* Display helpers for big editorial headlines */
.display-xl { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--fs-display-xl); line-height: var(--lh-display); letter-spacing: var(--tracking-tight); }
.display-lg { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--fs-display-lg); line-height: var(--lh-display); letter-spacing: var(--tracking-tight); }
.display    { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--fs-display);    line-height: var(--lh-display); letter-spacing: var(--tracking-tight); }

/* Display italics are a brand signature — Newsreader has true italics.
   Set the accent color on the emphasized phrase. */
.display em, .display-lg em, .display-xl em, h1 em, h2 em {
  font-style: italic;
  color: var(--accent);
}

p { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); }

.lede     { font-size: var(--fs-body-lg); line-height: 1.55; color: var(--ink-2); }
.caption  { font-size: var(--fs-caption); color: var(--ink-2); }
.overline { font-size: var(--fs-overline); letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--ink-2); font-weight: var(--fw-medium); }

/* Tabular numerals for any data figure */
.num, .data {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Links: no underline at rest; underline appears on hover.
   Inline body links (.prose a) stay underlined for affordance. */
a { color: var(--accent); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 0.18em; }
.prose a { text-decoration: underline; text-underline-offset: 0.18em; }

ul, ol { margin: 0; padding-left: 1.25em; }
li { line-height: var(--lh-body); }

code, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--paper-3);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
}

hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-6) 0; }

::selection { background: var(--accent); color: var(--paper-2); }

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 40%, transparent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}