/* ==========================================================================
   Global reset and base typography — "Wayfinding"
   --------------------------------------------------------------------------
   Element-level defaults only. No component styling lives here.
   Every value comes from tokens.css; there are no literals in this file.
   ========================================================================== */

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

/* The `hidden` attribute only sets display:none in the UA stylesheet, so ANY
   author rule that sets display (e.g. a component using flex or grid) silently
   defeats it and the element stays on screen. This guard makes hidden mean
   hidden. Without it, the downloader rendered the thumbnail and its fallback
   placeholder at the same time. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;   /* stop iOS inflating text in landscape */
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--t-body-m);
  line-height: var(--t-body-m-lh);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;      /* never fake a weight we didn't ship */
  text-rendering: optimizeLegibility;
  /* Notched devices: never let content sit under the rounded corners. */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* ── Headings ────────────────────────────────────────────────────────────
   Plus Jakarta Sans, sentence case throughout. No uppercase, no width axis —
   the premium read comes from weight, tight tracking and restraint.        */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  text-wrap: balance;               /* no orphaned single words in headlines */
}

h1 {
  font-size: var(--t-display-xl);
  line-height: var(--t-display-xl-lh);
  letter-spacing: var(--t-display-xl-ls);
  font-weight: 750;                 /* variable axis: between bold and extrabold */
}

h2 {
  font-size: var(--t-display-l);
  line-height: var(--t-display-l-lh);
  letter-spacing: var(--t-display-l-ls);
}

h3 {
  font-size: var(--t-heading-m);
  line-height: var(--t-heading-m-lh);
  letter-spacing: var(--t-heading-m-ls);
  font-weight: var(--weight-semibold);
}

h4, h5, h6 {
  font-size: var(--t-body-l);
  line-height: 1.35;
  font-weight: var(--weight-semibold);
}

p { margin: 0; }

/* ── Links ───────────────────────────────────────────────────────────────
   --signal-deep, not --signal: raw orange as text measures 2.69:1.         */
a {
  color: var(--signal-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { text-decoration-thickness: 2px; }

/* ── Focus ───────────────────────────────────────────────────────────────
   Visible on keyboard only, and never removed. This is the one ring used
   site-wide, so it is impossible for a component to invent its own.        */
:focus { outline: none; }
:focus-visible {
  outline: var(--border-width-strong) solid var(--signal-deep);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── Forms ───────────────────────────────────────────────────────────────
   The 16px floor is load-bearing: any smaller and iOS Safari zooms the page
   when the field takes focus, which is the single worst mobile bug we have. */
input, textarea, select, button {
  font-family: inherit;
  font-size: var(--t-input-min);
  line-height: inherit;
  color: inherit;
}
input, textarea, select { min-height: 44px; }   /* tap-target floor */
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }

/* ── Media ───────────────────────────────────────────────────────────────*/
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
svg { fill: currentColor; }

/* ── Data ────────────────────────────────────────────────────────────────
   Mono with tabular figures so file sizes and resolutions align in columns. */
code, kbd, samp, pre, .u-data {
  font-family: var(--font-mono);
  font-size: var(--t-data);
  line-height: var(--t-data-lh);
  letter-spacing: var(--t-data-ls);
  font-variant-numeric: tabular-nums;
  /* These almost always hold a URL or a file name, neither of which contains a
     space to break at. Left alone their min-content width becomes the floor for
     whatever grid or flex column contains them, which pushed several pages
     sideways on a 320px screen. */
  overflow-wrap: anywhere;
  min-width: 0;
}

/* ── Layout primitives ───────────────────────────────────────────────────*/
.u-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.u-container--narrow { max-width: var(--container-narrow); }

.u-section { padding-block: var(--section-gap); }
.u-section--major { padding-block: var(--section-gap-major); }
/* Alternating weight is what gives the page a cadence instead of a stack. */
.u-section--fill { background: var(--n-50); }
.u-section--tint { background: var(--signal-soft); }

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

.u-eyebrow {
  font-family: var(--font-display);
  font-size: var(--t-eyebrow);
  line-height: var(--t-eyebrow-lh);
  letter-spacing: var(--t-eyebrow-ls);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Screen-reader-only, but focusable (used by the skip link). */
.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.u-visually-hidden:focus-visible {
  position: fixed;
  top: var(--s-4); left: var(--s-4);
  width: auto; height: auto;
  padding: var(--s-3) var(--s-4);
  margin: 0;
  clip-path: none;
  background: var(--ink);
  color: var(--ground);
  border-radius: var(--radius-md);
  z-index: var(--z-toast);
}

/* ── Reserved ad slots ───────────────────────────────────────────────────
   Nothing is served today. The heights are reserved now so that switching
   ads on later shifts no layout (CLS stays at 0).                          */
.u-ad-slot {
  display: block;
  width: 100%;
  margin-inline: auto;
  /* no background or border: an empty slot must be invisible */
}
.u-ad-slot--leaderboard { min-height: var(--ad-leaderboard-h); }
.u-ad-slot--inline      { min-height: var(--ad-inline-h); }
.u-ad-slot--mobile      { min-height: var(--ad-mobile-h); }
@media (max-width: 767px) {
  .u-ad-slot--leaderboard { min-height: var(--ad-mobile-h); }
}

/* ── Global motion opt-out ───────────────────────────────────────────────
   Durations are already collapsed in tokens.css; this catches anything that
   animates without using a duration token.                                 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}