/* ============================================================
   Base — reset, typography, layout primitives (SPEC §3/§4)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--heading);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-md);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }

p { margin: 0 0 var(--space-sm); max-width: var(--maxw-prose); }
a { color: var(--c-burgundy); text-decoration-color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--c-darkred); }

ul { padding-left: 1.2em; }

::selection { background: var(--c-burgundy); color: var(--c-sand); }

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

/* --- Layout primitives --- */
.container {
  width: min(100% - 3rem, var(--maxw-content));
  margin-inline: auto;
}
.container--wide  { width: min(100% - 3rem, var(--maxw-wide)); }
.container--narrow { width: min(100% - 3rem, var(--maxw-narrow)); }

.section { padding-block: var(--space-xl); }
.section--tall { padding-block: var(--space-2xl); }
/* Anchor targets must clear the fixed header */
.section[id] { scroll-margin-top: var(--header-h); }
.section--warm { background: var(--bg-warm); }
.section--warm-2 { background: var(--bg-warm-2); }
.section--dark {
  background: var(--bg-dark);
  color: var(--text-invert);
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--c-sand); }
.section--dark a { color: var(--c-sand); }
.section--burgundy {
  background: var(--bg-burgundy);
  color: var(--text-invert);
}
.section--burgundy h1, .section--burgundy h2, .section--burgundy h3 { color: var(--c-sand); }

.center { text-align: center; }
.center p { margin-inline: auto; }

/* Eyebrow label — uppercase, tracked, gold */
.eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: var(--space-sm);
}
.section--warm .eyebrow, .section--warm-2 .eyebrow { color: var(--c-darkred); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--text-muted);
}
.section--dark .lead, .section--burgundy .lead { color: var(--c-sand-soft); }

/* Fine gold divider */
.divider {
  width: 64px; height: 1px;
  background: var(--accent);
  border: 0;
  margin: var(--space-md) auto;
}
.divider--left { margin-inline: 0; }

/* Prose pages (privacy, terms) */
.prose { max-width: var(--maxw-prose); }
.prose h2 { font-size: var(--fs-h3); margin-top: var(--space-lg); }

/* Scroll reveal — ui.js adds .is-visible */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

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

/* Author display rules (.btn, .email-capture, …) would otherwise
   override the UA stylesheet and defeat the hidden attribute. */
[hidden] { display: none !important; }