/* ==========================================================================
   Base: reset, typography, layout primitives
   ========================================================================== */

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

/* Root size drives every rem in the design: compact on laptops, a touch larger on big monitors */
html {
  font-size: 15px;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 8px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (min-width: 1600px) { html { font-size: 16px; } }
@media (min-width: 2200px) { html { font-size: 18px; } }

/* Lenis smooth scroll (only active when the script loads) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 var(--fs-body)/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure, dl, dd { margin: 0; }
p { text-wrap: pretty; }

h1, h2, h3, h4 {
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.04;
  text-wrap: balance;
}

:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; }
.on-dark :focus-visible { outline-color: var(--coral); }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 500;
  background: var(--navy); color: #fff; padding: 10px 16px; text-decoration: none;
}
.skip-link:focus { top: 12px; }

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

/* layout */
.wrap {
  width: 100%;
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}

.section { padding-block: var(--section-y); position: relative; }
.on-dark { background: var(--navy); color: var(--on-dark); }
.bg-cream { background: var(--cream); }
.bg-cream-2 { background: var(--cream-2); }
.bg-stone { background: var(--stone); }

.label {
  font: 500 var(--fs-label)/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--indigo);
}
.on-dark .label { color: #8f8cf5; }

.h2 { font-size: var(--fs-h2); }
.lede {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 34em;
}
.on-dark .lede { color: var(--on-dark-soft); }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(20px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(32px, 4.6vw, 64px);
}
.section-head .label { display: block; margin-bottom: 16px; }

/* scroll progress */
.progress {
  position: fixed; left: 0; top: 0; right: 0; height: 2px; z-index: 150;
  background: var(--grad); transform: scaleX(0); transform-origin: left; pointer-events: none;
}

/* reveal (one gentle transition, only when JS is available) */
.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}