/* ==========================================================================
   Base: reset, document defaults, typography primitives, motion
   ========================================================================== */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-ink);
  background: var(--color-bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--color-navy); color: var(--color-bg); }

a { color: var(--color-navy); text-decoration: none; }
a:hover { color: var(--color-navy-dark); }

button, input, select, textarea { font-family: inherit; }

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

/* Accessible skip link ---------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-navy);
  color: var(--color-bg);
  padding: 12px 18px;
  z-index: 200;
  border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }

/* Scroll reveal ----------------------------------------------------------- */
@keyframes lqFade {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
[data-reveal] { opacity: 1; }
.js [data-reveal] { opacity: 0; }
[data-reveal].is-in { animation: lqFade .8s cubic-bezier(.16, .7, .3, 1) forwards; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1 !important; animation: none !important; }
  [data-reveal].is-in { animation: none !important; }
}

/* Type primitives --------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--color-amber);
  margin: 0 0 22px;
}

.h1-hero {
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.1;
  letter-spacing: -.015em;
  margin: 0 0 20px;
  max-width: 15em;
  text-wrap: balance;
}

.h1 {
  font-weight: 600;
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.06;
  letter-spacing: -.012em;
  margin: 0 0 28px;
  max-width: 15em;
  text-wrap: balance;
}
.h1--tight   { margin: 0 0 24px; max-width: 14em; }
.h1--compact { font-size: clamp(32px, 4.6vw, 48px); margin: 0 0 12px; max-width: none; }
.h1--about   { font-size: clamp(32px, 4.8vw, 52px); margin: 0 0 28px; }
.h1--contact { font-size: clamp(32px, 4.6vw, 48px); margin: 0 0 22px; max-width: none; }
.h1--404     { font-size: clamp(32px, 4.6vw, 48px); line-height: 1.08; margin: 0 0 18px; max-width: none; }

.h2 {
  font-weight: 400;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0;
  text-wrap: balance;
}
.h2--plain  { letter-spacing: normal; }
.h2--stacked { margin: 0 0 8px; letter-spacing: normal; }

.h2-panel {
  font-weight: 600;
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.12;
  margin: 0 0 18px;
}
.h2-panel--sm { font-size: clamp(24px, 3.4vw, 32px); margin: 0 0 22px; }

.h2-legal {
  font-weight: 600;
  font-size: 22px;
  color: var(--color-ink);
  margin: 0 0 10px;
}

.lede {
  font-size: 18px;
  color: var(--color-text-5);
  max-width: 34em;
  margin: 0 0 32px;
  line-height: 1.55;
}
.lede-17 { font-size: 17px; color: var(--color-text-3); margin: 0; max-width: 34em; }