/* ============================================================================
   BASE — reset + document defaults + type scale application
   Mobile-first (375px), news register, paper background (§5, §7, §8).
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--weight-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures;
}

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

/* The `display:block` above is an author rule and would otherwise defeat the UA
   `[hidden]` rule; restore it so hidden media (e.g. the pending hero img) stays
   hidden until revealed. */
[hidden] { display: none !important; }

a {
  color: inherit;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-warmgray-300);
}
a:hover { text-decoration-color: var(--color-amber); }

/* Visible keyboard focus everywhere (§5 accessibility) */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}
/* Only suppress the ring for pointer users, never for keyboard */
:focus:not(:focus-visible) { outline: none; }

/* --- Headings & display type (§8) ---------------------------------------- */
h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-tight);
  margin: 0;
}

.hed {
  font-size: var(--fs-hed);
  line-height: var(--lh-hed);
  letter-spacing: var(--ls-hed);
  font-weight: var(--weight-bold);
  text-wrap: balance;
}

.section-hed {
  font-size: var(--fs-section);
  line-height: var(--lh-tight);
  font-weight: var(--weight-semibold);
  text-wrap: balance;
}

.dek {
  font-size: var(--fs-dek);
  line-height: var(--lh-dek);
  color: var(--color-ink-70);
  font-weight: var(--weight-body);
  text-wrap: pretty;
}

/* Lead / narrative paragraphs */
.lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
}

p { margin: 0 0 var(--space-sm) 0; text-wrap: pretty; }

em, i { font-style: italic; }
strong, b { font-weight: var(--weight-semibold); }

/* Utility to hide content visually but keep it for screen readers */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}