:root {
  --ivory: #F6F2EC;
  --ivory-deep: #EEE7DB;
  --stone: #E5DFD4;
  --stone-2: #D8D0C0;
  --ink: #141414;
  --ink-2: #2A2A28;
  --ink-3: #5A5954;
  --ink-4: #8A887F;
  --farella: #0A6FE8;
  --farella-ink: #0852AE;
  --clay: #C86B3B;
  --cream: #FBF8F3;

  --display: "Instrument Serif", "Newsreader", Georgia, serif;
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --bg: var(--ivory);
  --fg: var(--ink);
  --muted: var(--ink-3);
  --rule: var(--stone);
  --accent: var(--farella);

  --maxw: 1440px;
  --gutter: clamp(20px, 4vw, 64px);
}

/* Clean clinical variant */
[data-direction="clinical"] {
  --ivory: #FAFAFA;
  --ivory-deep: #F1F2F4;
  --stone: #E3E6EB;
  --cream: #FFFFFF;
  --ink: #0C1014;
  --accent: #0A6FE8;
}

/* Warm human variant */
[data-direction="warm"] {
  --ivory: #F4EDE3;
  --ivory-deep: #EADFCB;
  --stone: #DCCDB2;
  --cream: #FAF5EC;
  --ink: #2A1F12;
  --accent: #A0562C;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--fg); }
body {
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

.display {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.02;
}
.display em { font-style: italic; font-family: var(--display); }

.eyebrow {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3);
}

.rule { border: 0; border-top: 1px solid var(--rule); }

.smile-divider {
  display: block;
  width: 180px;
  height: 28px;
  color: var(--accent);
  opacity: 0.85;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.01em;
  transition: all 160ms ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--ink);
  color: var(--cream);
}
.btn-primary:hover { background: var(--accent); }
.btn-ghost {
  border: 1px solid var(--ink);
  color: var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--cream); }
.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  font-size: 14px;
  font-weight: 500;
}
.btn-link:hover { color: var(--accent); }

/* Sections */
section { position: relative; }
.section-pad { padding: clamp(80px, 12vh, 160px) 0; }
.section-pad-sm { padding: clamp(60px, 8vh, 100px) 0; }

/* Number marker (editorial section index) */
.sec-idx {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--ink-4);
  text-transform: uppercase;
}

/* Fade-in on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 900ms cubic-bezier(.2,.7,.2,1), transform 900ms cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* Image placeholder */
.placeholder {
  background: repeating-linear-gradient(45deg, var(--stone) 0 2px, transparent 2px 14px), var(--ivory-deep);
  color: var(--ink-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}

/* Scroll lock for nav backdrop */
.nav-scrolled { background: color-mix(in oklab, var(--bg), transparent 8%); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); }

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