/* ============================================================
   WBA — Design tokens (locked to Brand Bible)
   ============================================================ */
:root {
  /* Core four */
  --navy:      #0A1A3A;   /* primary ink, headlines, buttons, footer */
  --offwhite:  #F5F2EC;   /* page canvas */
  --heather:   #C9C4BA;   /* secondary surfaces, muted bands */
  --black:     #0E0E10;   /* true-black sections only */

  /* Accents — used like a sport stripe: rare, deliberate */
  --citrus:    #D4FF3D;   /* ONE accent per view */
  --tennis:    #1F4D2E;   /* deep accent, secondary buttons, enrolled */

  /* Support */
  --slate:     #5A6378;   /* soft body text on light */
  --navy-tint: #ECE8DF;   /* off-white pressed a touch darker */
  --hair:      rgba(10,26,58,0.14);
  --hair-strong: rgba(10,26,58,0.24);
  --hair-light: rgba(245,242,236,0.18);

  /* Type families */
  --serif: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --sans:  "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --mono:  "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* Layout */
  --maxw: 1280px;
  --gut: clamp(20px, 5vw, 88px);
  --nav-h: 68px;
}

/* ============================================================
   Reset / base
   ============================================================ */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--offwhite);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4,p { margin: 0; }
::selection { background: var(--citrus); color: var(--navy); }

/* ============================================================
   Type primitives
   ============================================================ */
.serif { font-family: var(--serif); font-weight: 300; letter-spacing: -0.02em; }
.sans  { font-family: var(--sans); }
.mono  { font-family: var(--mono); }

.kicker {
  font-family: var(--mono);
  font-size: clamp(11px, 1.1vw, 13px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 400;
}
.eyebrow {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--slate);
}

.h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(48px, 8.5vw, 104px);
  line-height: 1.0;
  letter-spacing: -0.025em;
}
.h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 5.2vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.h3 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.lead {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(21px, 2.6vw, 30px);
  line-height: 1.35;
  color: var(--slate);
}
.body {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.55;
}
.caption {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
}
.italic { font-style: italic; }

/* wordmark */
.wordmark {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.9;
  text-transform: lowercase;
}