/* ==========================================================================
   Base, reset, document defaults, typography primitives, helpers.
   Depends on tokens.css.
   ========================================================================== */

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

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

/* The masthead is sticky, so give scroll-into-view (anchor jumps, keyboard
   focus) clearance to stop it hiding the target (WCAG 2.4.11 Focus Not
   Obscured). Values track the measured masthead heights: 132px wrapped on
   small screens, 72px single-row from the 860px masthead breakpoint. */
html { scroll-padding-top: 9.5rem; }
@media (min-width: 860px) {
  html { scroll-padding-top: 5.5rem; }
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  /* faint paper grain over the whole page */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}

/* width/height attributes reserve space (prevent layout shift) without distorting */
img { max-width: 100%; height: auto; display: block; }

a { color: var(--color-text); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--color-accent-deep); } /* deep red, AA-safe as text on yellow/paper */

h1, h2, h3, h4 { line-height: var(--lh-tight); }

p { max-width: var(--measure); }

/* Focus, always visible for keyboard users; flips on dark bands. */
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
[data-theme="dark"] :focus-visible { outline-color: var(--color-focus-invert); }

/* Skip link */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--color-text); color: var(--color-text-invert);
  padding: var(--space-2xs) var(--space-sm);
}
.skip:focus { left: var(--space-sm); top: var(--space-sm); }

/* Layout container */
.wrap { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* Section rhythm */
.band { padding-block: var(--space-xl); }
.band--dark { background: var(--color-surface-dark); color: var(--color-text-invert); }
.band--tight { padding-block: var(--space-lg); }
.band--center { text-align: center; }
.band--center p { margin-inline: auto; }
.band--center .cta-row { justify-content: center; }

/* Small print under a section (running-order notes, image credits) */
.note { margin-top: var(--space-md); font-size: var(--fs-sm); max-width: var(--measure); }

/* Screen-reader-only */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}