/* ==========================================================================
   Base — reset + element defaults + typography
   ========================================================================== */

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-500);
  line-height: var(--lh-body);
  color: var(--c-ink-700);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; margin-inline: auto; }
a { color: inherit; text-decoration: none; }

/* In-copy links (paragraphs/lists/table cells within page content) get a
   distinct, WCAG AA-compliant gold (~5.5:1 on white, ~5:1 on the off-white
   section background) instead of blending into body text. This is a
   darkened gold, not the bright brand --c-cta/--c-accent gold, because
   those only reach ~2.4-3.1:1 on these backgrounds — too low for text.
   Nav/footer/breadcrumb/card/button links keep their own explicit colors,
   which win by specificity or simply live outside .content. */
.content p a, .content li a, .content td a, .content th a {
  color: var(--c-link-gold);
  text-decoration: underline;
  text-decoration-color: rgba(133,100,4,.35);
  text-underline-offset: 2px;
}
.content p a:hover, .content li a:hover, .content td a:hover, .content th a:hover,
.content p a:focus-visible, .content li a:focus-visible, .content td a:focus-visible, .content th a:focus-visible {
  color: var(--c-link-gold-hover);
  text-decoration-color: currentColor;
}

ul, ol { padding-left: 1.2em; }
table { border-collapse: collapse; width: 100%; }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  color: var(--c-primary);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--sp-3);
}
h1 { font-size: clamp(1.9rem, 4vw, var(--fs-1000)); }
h2 { font-size: clamp(1.5rem, 3vw, var(--fs-900)); }
h3 { font-size: var(--fs-700); color: var(--c-primary-600); margin-top: var(--sp-4); }
h4 { font-size: var(--fs-600); color: var(--c-secondary); margin-top: var(--sp-3); }

p { margin: 0 0 var(--sp-3); }

.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;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--c-primary); color: #fff; padding: var(--sp-2) var(--sp-3);
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--c-cta);
  outline-offset: 2px;
}