/* ============================================================
   NOVO — Design Tokens
   ============================================================ */

:root {
  /* Core palette */
  --nova-black: #111111;
  --nova-ink: #1A1A1A;
  --nova-warm-white: #F5F2EB;
  --nova-off-white: #FAF8F3;
  --nova-paper: #EFEBE1;
  --nova-silver: #BFC3C7;
  --nova-stone: #D9D7D2;
  --nova-champagne: #D8C7AA;
  --nova-champagne-deep: #C9B48E;

  /* Derived neutrals */
  --nova-line: rgba(17, 17, 17, 0.12);
  --nova-line-soft: rgba(17, 17, 17, 0.06);
  --nova-muted: rgba(17, 17, 17, 0.56);
  --nova-faint: rgba(17, 17, 17, 0.40);

  /* Accent intensity (tweakable) */
  --accent-intensity: 1;
  --accent: color-mix(in oklch, var(--nova-champagne) calc(var(--accent-intensity) * 100%), var(--nova-warm-white));

  /* Copy density (tweakable) */
  --density: 1;      /* 0.8 tight — 1 normal — 1.25 airy */

  /* Surfaces */
  --surface-0: var(--nova-warm-white);
  --surface-1: var(--nova-off-white);
  --surface-2: #FFFFFF;
  --surface-ink: var(--nova-black);
  --on-ink: var(--nova-warm-white);

  /* Type */
  --font-display: "Inter Tight", "Söhne", "Neue Haas Grotesk", system-ui, sans-serif;
  --font-body: "Inter", "Söhne", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
  --font-serif: "Instrument Serif", "GT Sectra", "Canela", Georgia, serif;

  /* Type scale (editorial) */
  --t-overline: 11px;
  --t-caption: 12px;
  --t-body-s: 14px;
  --t-body: 16px;
  --t-body-l: 18px;
  --t-lead: clamp(18px, 1.4vw, 22px);
  --t-h4: clamp(20px, 1.8vw, 26px);
  --t-h3: clamp(26px, 2.6vw, 36px);
  --t-h2: clamp(36px, 4.2vw, 64px);
  --t-h1: clamp(48px, 6vw, 96px);
  --t-display: clamp(72px, 10vw, 168px);

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;
  --sp-11: 192px;

  /* Radii */
  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-4: 12px;
  --r-pill: 999px;

  /* Page geometry */
  --page-max: 1440px;
  --gutter: clamp(24px, 4vw, 64px);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dark mode — invert the warm system */
[data-theme="dark"] {
  --surface-0: #0D0D0D;
  --surface-1: #141414;
  --surface-2: #1A1A1A;
  --surface-ink: var(--nova-warm-white);
  --on-ink: var(--nova-black);
  --nova-line: rgba(245, 242, 235, 0.12);
  --nova-line-soft: rgba(245, 242, 235, 0.06);
  --nova-muted: rgba(245, 242, 235, 0.60);
  --nova-faint: rgba(245, 242, 235, 0.40);
}

/* ============================================================
   Base
   ============================================================ */

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--surface-0);
  color: var(--surface-ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

[data-theme="dark"] body {
  background: var(--surface-0);
  color: var(--surface-ink);
}

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

hr {
  border: 0;
  border-top: 1px solid var(--nova-line);
  margin: 0;
}

/* ============================================================
   Type utilities
   ============================================================ */

.display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 0.92;
}

.h1 { font-family: var(--font-display); font-size: var(--t-h1); font-weight: 300; letter-spacing: -0.035em; line-height: 0.98; }
.h2 { font-family: var(--font-display); font-size: var(--t-h2); font-weight: 350; letter-spacing: -0.03em; line-height: 1.02; }
.h3 { font-family: var(--font-display); font-size: var(--t-h3); font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; }
.h4 { font-family: var(--font-display); font-size: var(--t-h4); font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; }
.lead { font-size: var(--t-lead); line-height: 1.45; color: var(--nova-muted); font-weight: 400; }
.body { font-size: var(--t-body); line-height: 1.6; }
.caption { font-size: var(--t-caption); line-height: 1.4; color: var(--nova-muted); }
.mono {
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  letter-spacing: 0;
  font-feature-settings: "ss01";
}
.serif-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}
.overline {
  font-size: var(--t-overline);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--nova-muted);
}

/* Wordmark class — NOVO logo
   Spec: Century Gothic Bold, 30% letter-spacing, 4px outward outline, no fill */
.wordmark {
  font-family: "Century Gothic", "URW Gothic", "Avant Garde", "ITC Avant Garde Gothic", "Futura", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 4px currentColor;
  paint-order: stroke fill;
}
/* Smaller wordmark instances scale stroke proportionally */
.wordmark.wordmark-sm { -webkit-text-stroke-width: 1.5px; }
.wordmark.wordmark-md { -webkit-text-stroke-width: 2.5px; }

/* ============================================================
   Layout
   ============================================================ */

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

.section {
  padding-block: calc(var(--sp-10) * var(--density));
  border-top: 1px solid var(--nova-line);
}
.section:first-of-type { border-top: 0; }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--sp-7);
  margin-bottom: calc(var(--sp-8) * var(--density));
}

.section-num {
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  color: var(--nova-muted);
  letter-spacing: 0.08em;
}

@media (max-width: 820px) {
  .section-head { grid-template-columns: 1fr; gap: var(--sp-4); }
}

/* ============================================================
   Common
   ============================================================ */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--nova-line);
  color: var(--nova-muted);
  background: transparent;
}

.tile {
  background: var(--surface-2);
  border: 1px solid var(--nova-line);
  border-radius: var(--r-0);
}

.card-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nova-muted);
}

/* Horizontal rule with inline label */
.rule-label {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.rule-label::after {
  content: "";
  height: 1px;
  background: var(--nova-line);
}

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

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: var(--r-pill);
  border: 1px solid var(--surface-ink);
  background: var(--surface-ink);
  color: var(--on-ink);
  cursor: pointer;
  transition: all .25s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--surface-ink); }
.btn.small { padding: 8px 14px; font-size: 11px; letter-spacing: 0.16em; }
.btn.icon { padding: 10px; }