/* base.css — design tokens, reset, typography
   Warm palette retained · editorial serif/sans system inspired by "Steep".
   Palette: 22223b · 4a4e69 · 9a8c98 · c9ada7 · f2e9e4 */

:root {
  /* raw palette */
  --ink:   #22223b;   /* darkest navy  */
  --slate: #4a4e69;   /* muted purple  */
  --mauve: #9a8c98;   /* grey mauve    */
  --rose:  #c9ada7;   /* dusty rose    */
  --cream: #f2e9e4;   /* cream         */

  /* semantic */
  --bg: #faf7f5;            /* near-cream page background */
  --fog: #f4eeea;           /* secondary section canvas   */
  --surface: #ffffff;       /* elevated cards             */
  --text: var(--ink);
  --muted: #5c5870;         /* readable muted, derived from slate */
  --faint: #8b8597;         /* tertiary text              */
  --line: #e8ded8;          /* warm hairline border       */
  --line-strong: #d9cdc6;
  --accent: var(--slate);   /* primary accent             */
  --accent-2: var(--rose);  /* secondary / highlight      */
  --accent-soft: #efe4de;
  --warm-wash: #f6e3d8;     /* apricot-like warm tint     */

  /* layout */
  --max: 1160px;
  --max-narrow: 760px;
  --nav-h: 68px;
  --section-gap: clamp(64px, 11vw, 120px);

  /* radii — generous, ceramic */
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* signature three-layer soft shadow */
  --shadow: 0 0 0 1px rgba(34,34,59,.04), 0 20px 25px -5px rgba(34,34,59,.08), 0 8px 10px -6px rgba(34,34,59,.06);
  --shadow-sm: 0 0 0 1px rgba(34,34,59,.04), 0 8px 18px -8px rgba(34,34,59,.14);
  --shadow-lift: 0 0 0 1px rgba(34,34,59,.05), 0 28px 50px -12px rgba(34,34,59,.22);

  /* type */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;

  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-size: 17px;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ---------- Editorial type scale (mobile-first) ---------- */
h1 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(40px, 9vw, 76px);
  line-height: 1.04;
  letter-spacing: -0.025em;
}
h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 5.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
h3 {
  font-family: var(--font);
  font-size: clamp(18px, 2.4vw, 21px);
  letter-spacing: -0.015em;
  font-weight: 600;
}
h4 { font-family: var(--font); font-weight: 600; }
p  { color: #3a3747; }

a { color: var(--accent); }

.eyebrow {
  text-transform: uppercase; letter-spacing: .18em; font-size: 12px;
  font-weight: 600; color: var(--accent); margin-bottom: 14px;
}
.lead {
  font-size: clamp(17px, 2.3vw, 20px);
  color: var(--muted);
  margin-top: 18px;
  line-height: 1.55;
  letter-spacing: -0.012em;
}

/* ---------- Scroll-reveal motion ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }

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

@media (max-width: 560px) {
  body { font-size: 16px; }
}