/* ============================================================
   Base — reset, type, layout primitives
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

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

img, svg, video { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--accent-ink); text-decoration: none; }
a:hover { color: var(--accent-strong); }

button { font: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font);
  color: var(--ink);
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
h1 { font-size: var(--fs-hero); letter-spacing: -0.035em; line-height: 1.04; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.03em; }
h3 { font-size: var(--fs-h3); letter-spacing: -0.02em; }

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }
strong { color: var(--ink-2); font-weight: 600; }

/* --- Layout primitives --- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); }
.container-wide { max-width: var(--container-wide); }

.section { padding-block: var(--s-10); }
@media (max-width: 768px) { .section { padding-block: var(--s-8); } }
.section-sm { padding-block: var(--s-8); }

.bg-soft { background: var(--bg-soft); }
.bg-tint { background: var(--bg-tint); }
.bg-dark {
  background: var(--ink);
  color: var(--on-dark-2);
}
.bg-dark h1, .bg-dark h2, .bg-dark h3 { color: #fff; }
.bg-dark strong { color: #fff; }

/* --- Type utilities --- */
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-3); font-weight: 400; }
.bg-dark .lead { color: var(--on-dark-2); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-cap); font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--accent-page-ink); margin-bottom: var(--s-5);
}
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-page); }
.bg-dark .eyebrow { color: #fff; }
.bg-dark .eyebrow::before { background: var(--accent); }

.measure { max-width: 60ch; }
.measure-tight { max-width: 46ch; }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-3{margin-top:var(--s-3)} .mt-4{margin-top:var(--s-4)} .mt-5{margin-top:var(--s-5)}
.mt-6{margin-top:var(--s-6)} .mt-7{margin-top:var(--s-7)} .mt-8{margin-top:var(--s-8)}

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

/* --- Skip link --- */
.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: 1000;
  background: var(--ink); color: #fff; padding: var(--s-3) var(--s-5);
  border-radius: var(--r-sm); font-weight: 600; transition: top var(--dur-1) var(--ease);
}
.skip-link:focus { top: var(--s-4); }

/* --- Focus --- */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.bg-dark :focus-visible { outline-color: #fff; }

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}