/* ============================================================
   base.css — Reset, document defaults, typography primitives,
   and a small set of utilities. No component or layout logic.
   ============================================================ */

/* Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
::selection { background: var(--copper); color: var(--ink); }

/* Content container */
.wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--content-pad);
}

/* Typography */
h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--paper);
}
h1 { font-size: 58px; line-height: 1.06; }
h2 { font-size: 36px; line-height: 1.16; }
h3 { font-size: 23px; line-height: 1.3; }
h1 em, h2 em { font-style: italic; color: var(--copper); font-weight: 400; }

p.lead {
  font-size: 18px;
  color: var(--paper-dim);
  max-width: 540px;
  font-weight: 400;
}
p.lead.lead--wide { max-width: none; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper);
  display: flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--copper); }

/* Scroll-reveal primitive (behavior added by reveal-on-scroll.js) */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Spacing utilities — keep one-off margins out of the markup */
.u-mt-sm { margin-top: 12px; }
.u-mt-md { margin-top: 16px; }
.u-mt-lg { margin-top: 20px; }
.u-mt-xl { margin-top: 32px; }
.u-maxw-prose { max-width: 760px; }
.text-fine { font-size: 14px; color: var(--paper-faint); }

@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
}

@media (max-width: 860px) {
  h1 { font-size: 40px; }
  h2 { font-size: 28px; }
}