/* Initiative tokens and base. One hue family (deep forest), one accent (brass). */
:root {
  /* Surfaces, darkest to lightest */
  --sunken: #08110d;
  --base: #0b1712;
  --raised: #11211a;
  --overlay: #172a21;
  /* Lines */
  --line: #24382e;
  --line-strong: #36503f;
  --hairline: rgb(236 230 216 / 0.07);
  /* Text */
  --ivory: #ece6d8;
  --sage: #9db0a5;
  /* Accent */
  --brass: #c9a96e;
  --brass-strong: #e0c48a;
  --brass-soft: rgb(201 169 110 / 0.09);
  --brass-line: rgb(201 169 110 / 0.45);
  --ink-on-brass: #14110a;
  /* Paper (the plan card) */
  --paper: #f3eee2;
  --paper-top: #f6f2e8;
  --paper-ink: #1b2620;
  --paper-muted: #5b665f;
  --paper-line: #d9d1bf;
  /* States */
  --error: #ff8a7a;
  --focus: var(--brass-strong);
  --field-border: var(--line-strong);
  /* Depth */
  --card-fill: linear-gradient(180deg, var(--overlay) 0%, var(--raised) 55%);
  --card-shadow: inset 0 1px 0 var(--hairline), 0 2px 6px rgb(0 0 0 / 0.22), 0 28px 56px -28px rgb(0 0 0 / 0.6);
  --card-shadow-lift: inset 0 1px 0 var(--hairline), 0 4px 10px rgb(0 0 0 / 0.26), 0 40px 72px -30px rgb(0 0 0 / 0.72);
  --paper-shadow: 0 1px 1px rgb(0 0 0 / 0.25), 0 6px 12px -4px rgb(0 0 0 / 0.35), 0 22px 40px -18px rgb(0 0 0 / 0.55), 0 60px 90px -40px rgb(0 0 0 / 0.7);
  --glow: rgb(201 169 110 / 0.08);
  /* Type scale (about 1.25 steps, fluid at the top) */
  --fs-micro: 0.8125rem;
  --fs-small: 0.875rem;
  --fs-body: 1.0625rem;
  --fs-lead: 1.25rem;
  --fs-h3: 1.375rem;
  --fs-h2: clamp(2.25rem, 4.2vw, 3.5rem);
  --fs-h1: clamp(2.75rem, 5.6vw, 4.75rem);
  --fs-display: clamp(3.4rem, 7.6vw, 7rem);
  --fs-number: clamp(2.25rem, 3.4vw, 2.75rem);
  --tracking-label: 0.14em;
  --measure: 62ch;
  /* Space */
  --gutter: 16px;
  --max: 1240px;
  --sec-lg: clamp(112px, 14vw, 176px);
  --sec-md: clamp(88px, 11vw, 136px);
  --sec-sm: clamp(72px, 8vw, 104px);
  /* Shape */
  --radius: 6px;
  --radius-lg: 10px;
  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 150ms;
  --dur: 250ms;
  --dur-slow: 500ms;
  /* Fonts */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 104px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--base); color: var(--ivory);
  font: 400 var(--fs-body)/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
h1, h2 { font-family: var(--font-display); font-weight: 500; margin: 0; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: var(--fs-display); line-height: 0.97; }
h2 { font-size: var(--fs-h2); line-height: 1.04; }
h3 { font: 600 var(--fs-h3)/1.25 var(--font-body); margin: 0; letter-spacing: -0.005em; }
.mono { font-family: var(--font-mono); font-weight: 400; font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

/* Labels: small uppercase tracked mono */
.label, .kicker, .weeks {
  font: 400 var(--fs-micro)/1.4 var(--font-mono);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
}
.kicker { color: var(--brass); }

.skip { position: absolute; left: var(--gutter); top: -60px; background: var(--ivory); color: var(--base); padding: 12px 16px; z-index: 20; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 720px) { .wrap { padding: 0 40px; } }
@media (min-width: 1200px) { .wrap { padding: 0 56px; } }