/* GENERATED by site-v2-src/build.py from site.css — edit site.css, then rebuild. */

/* ---------- 1. Tokens ---------- */
:root {
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* fluid type scale (min → max between 360px and 1440px) */
  --fs-xs: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --fs-sm: clamp(0.84rem, 0.82rem + 0.10vw, 0.90rem);
  --fs-base: clamp(1.00rem, 0.97rem + 0.15vw, 1.10rem);
  --fs-md: clamp(1.15rem, 1.08rem + 0.30vw, 1.35rem);
  --fs-lg: clamp(1.50rem, 1.30rem + 0.90vw, 2.10rem);
  --fs-xl: clamp(2.00rem, 1.50rem + 1.90vw, 3.10rem);
  --fs-2xl: clamp(2.60rem, 1.80rem + 3.40vw, 4.80rem);

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-body: 1.6;
  --measure: 74ch;
  --measure-narrow: 46ch;

  /* spacing — 8pt rhythm with fluid section gaps */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem;
  --section: clamp(3.25rem, 2.5rem + 3vw, 5.5rem);
  --section-sm: clamp(2.5rem, 2rem + 2vw, 3.5rem);

  --wrap: 1280px;
  --wrap-narrow: 860px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  --radius: 6px;
  --radius-lg: 12px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 0.6s;
  --dur-slow: 1.1s;

  --accent-h: 192;
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #F6F4EF;
  --bg-2: #EFECE5;
  --bg-3: #E7E3DA;
  --surface: #FBFAF7;
  --ink: #0F1522;
  --ink-2: #3A4150;
  --ink-3: #6B7280;
  --ink-4: #9AA0AB;
  --line: rgba(15, 21, 34, 0.10);
  --line-strong: rgba(15, 21, 34, 0.22);
  --accent: #0B8FB3;
  --accent-ink: #086F8B;
  --accent-soft: rgba(11, 143, 179, 0.10);
  --shadow: 0 1px 2px rgba(15, 21, 34, 0.04), 0 12px 32px -12px rgba(15, 21, 34, 0.14);
  --glass: rgba(246, 244, 239, 0.78);
  --selection: rgba(11, 143, 179, 0.22);
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0A0F1A;
  --bg-2: #0F1522;
  --bg-3: #151C2B;
  --surface: #0E1420;
  --ink: #EDEBE6;
  --ink-2: #B9BCC4;
  --ink-3: #7F8592;
  --ink-4: #545B69;
  --line: rgba(237, 235, 230, 0.09);
  --line-strong: rgba(237, 235, 230, 0.20);
  --accent: #2FC3E3;
  --accent-ink: #6ED6EC;
  --accent-soft: rgba(47, 195, 227, 0.12);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 40px -16px rgba(0, 0, 0, 0.6);
  --glass: rgba(10, 15, 26, 0.72);
  --selection: rgba(47, 195, 227, 0.28);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html:has(.mobile-menu:not([hidden])) { overflow: hidden; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01", "kern";
  transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out);
}
::selection { background: var(--selection); }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.skip-link { position: absolute; left: var(--s-4); top: -100px; padding: var(--s-2) var(--s-4); background: var(--ink); color: var(--bg); z-index: 100; border-radius: var(--radius); }
.skip-link:focus { top: var(--s-4); }
main:focus { outline: none; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 3. Type ---------- */
h1, h2, h3, h4 { margin: 0; font-weight: 400; letter-spacing: -0.01em; text-wrap: balance; }
.display, h1 { font-family: var(--font-display); font-size: var(--fs-2xl); line-height: var(--lh-tight); letter-spacing: -0.015em; }
h2 { font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1.08; }
h3 { font-family: var(--font-body); font-size: var(--fs-md); font-weight: 500; line-height: var(--lh-snug); letter-spacing: -0.005em; }
h4 { font-size: var(--fs-base); font-weight: 600; }
h1 em, h2 em, .display em { font-style: italic; color: var(--accent-ink); }
.lede { font-size: var(--fs-md); line-height: 1.5; color: var(--ink-2); max-width: var(--measure); text-wrap: pretty; }
.prose { max-width: var(--measure); color: var(--ink-2); text-wrap: pretty; }
.prose p { margin-bottom: 1.25em; }
.prose strong { color: var(--ink); font-weight: 500; }
.prose a { color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); transition: text-decoration-color 0.25s; }
.prose a:hover { text-decoration-color: var(--accent); }
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 var(--s-5);
}
.eyebrow::before { content: ""; width: 20px; height: 1px; background: var(--accent); flex: none; }
.eyebrow.plain::before { display: none; }
.mono { font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: 0.02em; color: var(--ink-3); }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------- 5. Buttons & links ---------- */
.btn {
  --btn-bg: var(--ink); --btn-fg: var(--bg);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 0.85rem 1.35rem; min-height: 46px;
  font-weight: 500; font-size: var(--fs-sm); letter-spacing: 0.005em; line-height: 1;
  color: var(--btn-fg); background: var(--btn-bg);
  border-radius: 999px; border: 1px solid transparent;
  transition: transform 0.35s var(--ease-out), background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); transition-duration: 0.1s; }
.btn-primary { --btn-bg: var(--ink); --btn-fg: var(--bg); }
.btn-primary:hover { box-shadow: 0 8px 20px -10px rgba(0,0,0,0.5); }
.btn-primary::after { content: "→"; font-family: var(--font-mono); font-weight: 400; transition: transform 0.35s var(--ease-out); }
.btn-primary:hover::after { transform: translateX(3px); }
.btn-ghost { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--ink); background: var(--accent-soft); }
.btn-sm { padding: 0.6rem 1rem; min-height: 38px; font-size: var(--fs-xs); }
.btn-lg { padding: 1.05rem 1.7rem; min-height: 54px; font-size: var(--fs-base); }
.link-arrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: 500; color: var(--ink);
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat; background-size: 0% 1px; background-position: 0 100%;
  transition: background-size 0.45s var(--ease-out);
  padding-bottom: 2px;
}
.link-arrow::after { content: "→"; font-family: var(--font-mono); transition: transform 0.35s var(--ease-out); }
.link-arrow:hover { background-size: 100% 1px; }
.link-arrow:hover::after { transform: translateX(4px); }
.link-arrow.muted { color: var(--ink-2); }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4); align-items: center; }
.cta-row .link-arrow { margin-left: var(--s-2); }

/* ---------- 8. Motion primitives ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); transition-delay: var(--d, 0s); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-group > * { opacity: 0; transform: translateY(14px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.reveal-group.is-in > * { opacity: 1; transform: none; }
.reveal-group.is-in > :nth-child(1) { transition-delay: 0.00s; } .reveal-group.is-in > :nth-child(2) { transition-delay: 0.08s; }
.reveal-group.is-in > :nth-child(3) { transition-delay: 0.16s; } .reveal-group.is-in > :nth-child(4) { transition-delay: 0.24s; }
.reveal-group.is-in > :nth-child(5) { transition-delay: 0.32s; } .reveal-group.is-in > :nth-child(6) { transition-delay: 0.40s; }
.reveal-group.is-in > :nth-child(7) { transition-delay: 0.48s; } .reveal-group.is-in > :nth-child(8) { transition-delay: 0.56s; }
/* word-mask reveal for headlines */
.words .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.words .w > span { display: inline-block; transform: translateY(110%); transition: transform 0.9s var(--ease-out); transition-delay: calc(var(--i) * 45ms + var(--d, 0s)); }
.words.is-in .w > span { transform: none; }
/* line draw */
.draw path, .draw line, .draw circle { stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000); transition: stroke-dashoffset var(--dur-slow) var(--ease-in-out); }
.draw.is-in path, .draw.is-in line, .draw.is-in circle { stroke-dashoffset: 0; }

/* ---------- 18. Reduced motion / print ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bg-grid, .bg-orb { transform: none !important; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .reveal, .reveal-group > *, .era, .form-grid.stagger > *, .paths.settle .path { opacity: 1 !important; transform: none !important; }
  .words .w > span { transform: none !important; }
  .draw path, .draw line, .draw circle { stroke-dashoffset: 0 !important; }
  .pull::before { transform: none !important; }
  .live i::after { display: none; }
}
@media print { .site-header, .site-footer, .theme-toggle, .progress-hairline { display: none; } body { background: #fff; color: #000; } }