/* ==========================================================================
   BASE - fonts, reset, typography primitives, focus
   Every value here comes from tokens.css.
   ========================================================================== */

/* ---- Self-hosted variable fonts (no external requests, faster LCP) ------- */
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

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

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

body {
  margin: 0;
  background: var(--c-ground);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* ---- Headings ----------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  color: var(--c-ink);
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
}

h2 {
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
}

h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.34; }
h4 { font-size: var(--fs-h4); font-weight: 600; line-height: 1.38; }

p { margin: 0; }

/* ---- Links -------------------------------------------------------------- */
a {
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color var(--dur) var(--ease);
}
a:hover { color: var(--c-accent-hover); }

/* Links that behave as blocks (cards, list rows) opt out of underline. */
a.u-plain { text-decoration: none; color: inherit; }

/* ---- Focus -------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: var(--radius);
}
:focus:not(:focus-visible) { outline: none; }

/* ---- Layout helpers ----------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-tight); }

/* A hairline above a section, used instead of boxing sections in cards. */
.section--ruled { border-top: var(--border); }

/* THE SERIF CARRIES EDITORIAL COPY, THE SANS CARRIES CHROME.

   This is the split that decides whether the site reads as a publication or
   as a product, and it is the one thing the previous build had backwards. The
   serif was used on headings and nothing else, so every standfirst, deck and
   card description fell through to the sans by default.

   From here: headlines, standfirsts, decks, card titles and bylines are the
   display serif. Navigation, buttons, eyebrows, dates, read times and form
   labels are the sans. Nothing editorial is set in the sans, and no chrome is
   set in the serif. */
.lead {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--c-ink-2);
  max-width: var(--w-read);
}

/* The deck: the line under a headline or a card title. Same face as the thing
   it sits beneath, because they are one piece of writing. */
.dek {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  line-height: 1.45;
  color: var(--c-ink-2);
}

.meta {
  font-size: var(--fs-xs);
  color: var(--c-ink-3);
  letter-spacing: 0.01em;
}

.u-measure { max-width: var(--w-read); }

/* Keeps a compound term whole. For hyphenated words a line break would
   otherwise split into two half words at the hyphen. */
.u-nowrap { white-space: nowrap; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---- Section header ----------------------------------------------------
   Headline on top, supporting line below it, left aligned. Never a big
   headline on the left with a small paragraph floating on the right. */
.section-head { margin-bottom: var(--s-7); }
.section-head p { margin-top: var(--s-3); }

.section-head__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
}

/* ---- Icons -------------------------------------------------------------- */
/* Icon geometry is the published Phosphor Icons "regular" set (MIT).
   Paths are used verbatim from the library, not redrawn. */
.icon {
  width: 1.25rem; height: 1.25rem;
  flex-shrink: 0;
  fill: currentColor;
}
.icon--lg { width: 1.6rem; height: 1.6rem; }
.icon--sm { width: 1rem; height: 1rem; }

/* ---- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}