/* ==========================================================================
   Base — reset, self-hosted faces, elemental typography
   ========================================================================== */

/* --------------------------------------------------------------------------
   Faces. Variable fonts, self-hosted, so nothing blocks on a third party
   and no visitor IP reaches Google. Fetched by `npm run fonts`.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Syne";
  src: url("/assets/fonts/syne-variable.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-variable.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-italic-variable.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

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

* {
  margin: 0;
}

html {
  /* 125% makes 1rem = 20px, the base the type scale is built from.
     Expressed as a percentage so it still honours the reader's own
     browser font-size setting. */
  font-size: 125%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchored headings clear the fixed header. */
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  min-height: 100svh;
  background-color: var(--ground);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  /* The waterline device relies on full-bleed sections; never let one
     of them introduce a horizontal scrollbar. */
  overflow-x: clip;
}

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

/* Every image and video carries intrinsic width/height in the markup, so
   this preserves the reserved box rather than collapsing it. CLS target 0. */
img,
video {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

p,
h1,
h2,
h3,
h4,
li,
figcaption {
  overflow-wrap: break-word;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

/* --------------------------------------------------------------------------
   Typography
   Syne carries the voice at display sizes; Newsreader carries everything
   meant to be read. Newsreader's italic is used for the CTA rails, where
   its warmth plays against Syne's geometry.
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h1 {
  font-size: var(--step-5-fluid);
  font-weight: var(--weight-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

h2 {
  font-size: var(--step-4-fluid);
  font-weight: var(--weight-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

h3 {
  font-size: var(--step-2);
}

h4 {
  font-size: var(--step-1);
}

p {
  text-wrap: pretty;
}

strong,
b {
  font-weight: var(--weight-medium);
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color var(--dur-fast) var(--ease-out),
    text-decoration-color var(--dur-fast) var(--ease-out);
}

a:hover {
  color: var(--link-hover);
}

:focus-visible {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

/* Suppress the ring for pointer users, keep it for keyboard. */
:focus:not(:focus-visible) {
  outline: none;
}

::selection {
  background-color: var(--brand-ice);
  color: var(--brand-navy);
}

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

/* Keyboard escape hatch to the main content, revealed on focus. */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-lightbox);
  padding: var(--space-2) var(--space-3);
  background-color: var(--brand-navy);
  color: var(--brand-ghost);
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* The eyebrow. Set in Syne, uppercase, widely tracked — it labels, and it
   is the one place small type is allowed to be loud. */
.eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-quiet);
}

.lead {
  font-size: var(--step-1);
  line-height: var(--leading-loose);
  color: var(--text-muted);
  max-width: var(--measure-tight);
}

/* A line break that only applies once there is room for the line it makes.
   Display headings are composed to break at a specific word on wide screens;
   on a phone that same break would strand a single word or force a mid-word
   hyphenation, so below 40rem the text wraps naturally instead. */
@media (max-width: 39.999rem) {
  .br-wide {
    display: none;
  }
}