/* ===========================================================================
   GROWTH SYSTEM v3 — reset, typography, grid, primitives
   A flat yellow drafting board with a 1px grid drawn on it. Ink on yellow.
   =========================================================================== */

/* Aliases so any v2 selector still resolves during the transition. */
:root{
  --ink-canvas: var(--ground); --ink-canvas-2: var(--ground-2); --ink-canvas-3: var(--ground-2);
  --on-dark: var(--ink); --on-dark-2: var(--ink-2); --on-dark-3: var(--ink-3);
  --on-light: var(--ink); --on-light-2: var(--ink-2); --on-light-3: var(--ink-3);
  --rule-dark: var(--rule); --rule-dark-strong: var(--rule-strong); --rule-light: var(--rule); --rule-light-strong: var(--rule-strong);
  /* v5.2: the eight v2 aliases that lived here (--accent-text/-deep/-cta/
     -cta-hover/-ink/-quiet/-line, --brand-warm) are gone. The v2 migration is
     finished and none of them was referenced by any served stylesheet or
     generator; two still held the retired blue rgba(0,97,254,…). */
}

*, *::before, *::after{ box-sizing: border-box; }
html{ overflow-x: hidden; overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
  overflow-x: hidden; overflow-x: clip; margin: 0;
  background: var(--ground); color: var(--ink);
  font-family: var(--font-body); font-size: var(--t-body); line-height: 1.55; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{ margin: 0; }
ul,ol{ padding: 0; list-style: none; }
img,svg,video{ display: block; max-width: 100%; }
img{ height: auto; }
button,input,select,textarea{ font: inherit; color: inherit; }
a{ color: inherit; text-decoration: none; }

/* --- The drafting grid ----------------------------------------------------
   One fixed layer behind everything, drawn from the page edge so it never
   seams between sections. */
body::before{
  content: none; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell);
  background-position: calc(var(--rail) + var(--gutter)) 0;
}
main, .nav, .footer, .rail, .menu, .utility{ position: relative; z-index: 1; }

/* --- Display -------------------------------------------------------------
   Archivo's width axis is used deliberately: the big statements sit wide,
   the reading sizes stay normal. */
.display-xl,.display-l,.h2{ font-family: var(--font-display); text-wrap: balance; }
.display-xl{ font-size: var(--t-display-xl); font-weight: 700; font-optical-sizing: auto; letter-spacing: -.01em;  line-height: .96; }
.display-l { font-size: var(--t-display-l);  font-weight: 700; font-optical-sizing: auto; letter-spacing: -.008em; line-height: 1; }
.h2        { font-size: var(--t-h2);         font-weight: 600; font-optical-sizing: auto; letter-spacing: -.005em; line-height: 1.12; }
.h3        { font-family: var(--font-body); font-size: var(--t-h3); font-weight: 700; letter-spacing: -.012em; line-height: 1.25; }

/* The reference's outline-vs-filled type: a word arrives as an outline and
   fills in. Two stacked copies, opacity only. */
.em{ font-weight: 800; }
.em--accent{ font-weight: 800; color: var(--em); }
.outline{ -webkit-text-stroke: 1.5px currentColor; color: transparent; }
.em-stop{ margin-left: -.02em; }
.display-xl:has(.lb){ text-wrap: initial; }
.lb{ display: inline; }
@media (min-width: 768px){ .lb{ display: block; } }
.optical-T{ text-indent: -.04em; } .optical-O{ text-indent: -.03em; }

p{ text-wrap: pretty; }
.lede{ font-size: var(--t-lede); line-height: 1.45; letter-spacing: -.008em; color: var(--fg-2, var(--ink-2)); max-width: 46ch; }
.body{ max-width: 62ch; color: var(--fg-2, var(--ink-2)); }
.small{ font-size: var(--t-small); line-height: 1.5; }

/* --- Labels --------------------------------------------------------------- */
.label{ font-family: var(--font-mono); font-size: var(--t-label); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; line-height: 1.2; color: var(--fg-2, var(--ink-2)); }
.label--accent{ color: var(--ink); }
.mono{ font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: .02em; line-height: 1.5; font-variant-numeric: tabular-nums lining-nums; }
.figure-xl{ font-family: var(--font-display); font-weight: 800; font-stretch: 112%; font-size: clamp(2.75rem, 1.85rem + 3.85vw, 5.5rem); letter-spacing: -.04em; line-height: .9; font-variant-numeric: tabular-nums lining-nums; }

/* --- The block-with-a-circle ornament, from the reference ---------------- */
.mark{ display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; background: var(--ink); flex: none; }
.mark::after{ content: ""; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--ground); }
.mark--ground{ background: var(--ground); outline: 1px solid var(--ink); outline-offset: -1px; }
.mark--ground::after{ background: var(--dot, var(--ink)); }

/* --- Layout --------------------------------------------------------------- */
.shell{ width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
@media (min-width: 900px){ .shell{ padding-left: calc(var(--rail) + var(--gutter)); } }
.band{ position: relative;
  background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell); background-position: calc(var(--rail) + var(--gutter)) 0; }
.band-y  { padding-block: var(--band-y); }
.band-y-l{ padding-block: var(--band-y-l); }
.grid{ display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-6) clamp(1rem, .3rem + 3vw, 2.5rem); }
@media (max-width: 900px){ .grid{ grid-template-columns: repeat(6, minmax(0,1fr)); } }
.rule{ height: 1px; border: 0; margin: 0; background: var(--rule-c, var(--rule)); transform-origin: left center; }
.rule--draw{ transform: scaleX(0); transition: transform var(--dur-4) var(--ease-out); }
.in .rule--draw, .rule--draw.in{ transform: scaleX(1); }

/* --- Accessibility --------------------------------------------------------- */
.skip{ position: absolute; left: var(--s-4); top: var(--s-4); z-index: var(--z-skip); transform: translateY(-200%);
  background: var(--ink); color: var(--ground); padding: var(--s-3) var(--s-5);
  font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; transition: transform var(--dur-1) var(--ease); }
.skip:focus-visible{ transform: translateY(0); }
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible{ outline: 2px solid var(--ink); outline-offset: 3px; }
.visually-hidden{ position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
main:focus{ outline: none; }

/* --- Reveal ---------------------------------------------------------------- */
.rv{ opacity: 0; transform: translateY(14px); }
.rv, .rv > *{ transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.rv.in{ opacity: 1; transform: none; }
.stagger > *{ opacity: 0; transform: translateY(12px); }
.stagger.in > *{ opacity: 1; transform: none; }
.stagger.in > :nth-child(1){ transition-delay: 0ms; } .stagger.in > :nth-child(2){ transition-delay: 70ms; }
.stagger.in > :nth-child(3){ transition-delay: 140ms; } .stagger.in > :nth-child(4){ transition-delay: 210ms; }
.stagger.in > :nth-child(5){ transition-delay: 280ms; } .stagger.in > :nth-child(6){ transition-delay: 350ms; }
.stagger.done > :nth-child(n){ transition-delay: 0ms !important; }

/* --- Utilities ------------------------------------------------------------- */
.mt-4{ margin-top: var(--s-4); } .mt-5{ margin-top: var(--s-5); } .mt-6{ margin-top: var(--s-6); }
.mt-7{ margin-top: var(--s-7); } .mt-8{ margin-top: var(--s-8); } .mt-9{ margin-top: var(--s-9); }
.self-end{ align-self: end; } .pb-band{ padding-bottom: var(--band-y); } .ink-3{ color: var(--fg-3, var(--ink-3)); }
.measure-15{ max-width: 15ch; } .measure-16{ max-width: 16ch; } .measure-17{ max-width: 17ch; } .measure-18{ max-width: 18ch; }
.measure-22{ max-width: 22ch; } .measure-24{ max-width: 24ch; } .measure-34{ max-width: 34ch; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .rv, .stagger > *{ opacity: 1 !important; transform: none !important; }
  .rule--draw{ transform: scaleX(1) !important; }
}
body.paused *, body.paused *::before, body.paused *::after{ animation-play-state: paused !important; }