/* ============================================================
   Reset + base typography
   ============================================================ */

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

html,
body {
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  background: var(--surface-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background 0.2s ease, color 0.2s ease;
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: var(--fill-brand);
  color: var(--fill-on-brand);
}

img,
svg {
  max-width: 100%;
  display: block;
}

button {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* ---------- Layout container ---------- */
.wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
}
@media (max-width: 760px) {
  .wrap { padding: 0 var(--sp-5); }
}

/* ---------- Type primitives ---------- */
.display {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: 0.98;
  letter-spacing: var(--ls-display);
  margin: 0;
}

.h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: var(--lh-headline);
  letter-spacing: var(--ls-tight);
  margin: 0;
}

.h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-headline);
  letter-spacing: var(--ls-tight);
  margin: 0;
}

.h3 {
  font-family: var(--font-sans, 'General Sans'), sans-serif;
  font-weight: 600;
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.3;
  letter-spacing: -0.008em;
  margin: 0;
}

.h4 {
  font-family: var(--font-sans, 'General Sans'), sans-serif;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: -0.005em;
  margin: 0;
}

.body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
}

.small {
  font-size: var(--fs-small);
  line-height: 1.45;
}

.mono {
  font-family: var(--font-mono);
}

.kicker {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.kicker-lg {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-body-lg);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* ---------- Sodium underline (decorative on light, text-eligible on dark) ---------- */
.sodium {
  background-image: linear-gradient(var(--accent-voltage), var(--accent-voltage));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% var(--bw-6);
  padding-bottom: var(--bw-6);
}

.sodium--lg {
  background-size: 100% 8px;
  padding-bottom: 8px;
}

/* ---------- Animated drawing underline (hero entrance) ---------- */
.sodium--draw {
  background-size: 0 var(--bw-6);
  animation: draw var(--dur-underline) var(--ease-out) 200ms forwards;
}

@keyframes draw {
  to { background-size: 100% var(--bw-6); }
}

@media (prefers-reduced-motion: reduce) {
  .sodium--draw { animation: none; background-size: 100% var(--bw-6); }
}

/* ---------- Skip link (a11y) ---------- */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--text-primary);
  color: var(--text-inverse);
  padding: var(--sp-3) var(--sp-4);
  z-index: 100;
}
.skip:focus { left: var(--sp-4); top: var(--sp-4); }