/* =========================================================================
   Company site — token layer (working name; see README.md)

   FORKED 2026-08-22 from the Amendment Design System project
   (claude.ai/design project 151c8ef0-0bee-488c-a286-bb4aeda9470b),
   file colors_and_type.css at that date. Forked by copying, then PRUNING.
   This file is the authority for this project; the parent's DESIGN.md is
   reference only. Forward-only: if something here turns out to be worth
   having in the parent, port it there deliberately — never the reverse.

   KEPT from the parent (verbatim values, same names where possible):
     - the three type families and their variation presets
     - the zinc neutral ramp, opacity-rung text, hairline/subtle borders
     - the slate ramp as INK + focus (not as a brand colour)
     - semantic colours (conventional only)
     - 4px spacing, sm/md/lg/full radii, slate-900 two-layer shadow tiers
     - motion durations/easings and the allowed-properties rule
     - focus ring, 44px target, 12px floor, the ch ban

   LEFT BEHIND (Amendment brand, do not reintroduce):
     - Momentum green / --color-action / --color-momentum
     - the aurora (all lobes, light and dark) and the "breathe"
     - glass materials (material-ultrathin … material-chrome)
     - paper canvases (cream/parchment) and the dark-room lamp
     - the seal emboss, the signature face, the ceremonial register
     - skeleton/spinner (a static page has no loading state)
     - the print-letter profile (a minimal print block replaces it)

   DIVERGENCES, stated:
     - Dark mode follows prefers-color-scheme AUTOMATICALLY, with
       data-theme="dark|light" as the override. The parent is class-only by
       design (the operator chooses the room's lighting); a business card
       with no toggle should just match the visitor's OS.
     - One accent slot, --color-accent, is provided and DEFAULTS TO INK.
       The page must read fully in monochrome; an accent, if Claude Design
       proposes one, is a decision for Jason (README → open decisions).
     - Surfaces are flat: zinc canvas, hairline ring, shadow tier. No blur.
   ========================================================================= */

/* -------- Fonts ---------------------------------------------------------- */
/* Archivo self-hosted (variable: wdth 62–125, wght 100–900, true italic).
   Newsreader + IBM Plex Mono from Google Fonts — neither carries a width axis
   to lose. Re-run the wdth check from the parent's fonts/README.md after any
   font swap: a cut without wdth loads cleanly and silently collapses chrome. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&display=swap');

@font-face {
  font-family: 'Archivo';
  src: url('fonts/Archivo-VariableFont_wdth_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/Archivo-Italic-VariableFont_wdth_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: italic;
  font-display: swap;
}

/* =========================================================================
   TOKENS
   ========================================================================= */
:root {
  /* --------------------------- COLOR -------------------------------- */
  /* Ink — the slate ramp. In the parent this is "Midnight Indigo", a brand
     primary. Here it is just ink: headings, rules, the default plate. */
  --color-ink-light: #334155;   /* slate-700 */
  --color-ink:       #1e293b;   /* slate-800 */
  --color-ink-dark:  #0f172a;   /* slate-900 */

  /* Accent — ONE slot, defaults to ink. See header. */
  --color-accent:       var(--color-ink);
  --color-accent-hover: var(--color-ink-light);
  --color-accent-label: rgb(255 255 255 / 92%);

  /* Functional — attention without alarm. Focus, link underline hover. */
  --color-functional-light: #94a3b8;   /* slate-400 */
  --color-functional:       #64748b;   /* slate-500 */
  --color-functional-dark:  #475569;   /* slate-600 */

  /* Semantic — conventional only. A company page rarely needs these. */
  --color-success: #047857;   /* emerald-700 */
  --color-warning: #b45309;   /* amber-700 */
  --color-danger:  #dc2626;   /* red-600 */

  /* Neutral — warm-gray zinc */
  --color-white:    #ffffff;
  --color-zinc-50:  #fafafa;
  --color-zinc-100: #f4f4f5;
  --color-zinc-200: #e4e4e7;
  --color-zinc-400: #a1a1aa;
  --color-zinc-500: #71717a;
  --color-zinc-700: #3f3f46;
  --color-zinc-800: #27272a;
  --color-zinc-900: #18181b;
  --color-black:    #000000;

  /* Text — opacity on black (HIG three-rung). Safe because every surface
     here is a flat neutral. */
  --text-primary:   rgb(0 0 0 / 87%);
  --text-secondary: rgb(0 0 0 / 55%);
  --text-tertiary:  rgb(0 0 0 / 38%);

  /* Borders */
  --border-hairline: rgb(0 0 0 / 5%);
  --border-subtle:   rgb(0 0 0 / 10%);

  /* Canvas + surface (flat — no glass) */
  --canvas:  var(--color-zinc-100);
  --surface: var(--color-white);
  --surface-ring: var(--border-subtle);

  /* --------------------------- TYPE --------------------------------- */
  --font-sans:  'Archivo', ui-sans-serif, system-ui, sans-serif;
  --font-serif: 'Newsreader', ui-serif, Georgia, serif;
  --font-mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Newsreader optical stops — ALWAYS set one. Display just off the 72
     extreme; text at its own rendered size. (Parent values, verbatim.) */
  --serif-display: 'opsz' 60, 'wght' 800; /* @kind font */
  --serif-text:    'opsz' 16, 'wght' 450; /* @kind font */
  --serif-quote:   'opsz' 24, 'wght' 400; /* @kind font */

  /* Archivo width presets. Body is 104, NOT the axis default — widening a
     face lowers its character count; 104 is where the measure was kept and
     where Archivo's O is a circle. Chrome sits at the ceiling (125); display
     is NARROWER than chrome (120) — width is not a ladder. Do not tidy. */
  --sans-body:    "wdth" 104; /* @kind font */
  --sans-chrome:  "wdth" 125; /* @kind font */
  --sans-display: "wdth" 120; /* @kind font */
  --track-chrome: 0.12em; /* @kind other */

  /* Canonical weights (parent recalibrated to these 2026-08-13). */
  --sans-thin: 100; /* @kind font */
  --sans-extralight: 200; /* @kind font */
  --sans-light: 300; /* @kind font */
  --sans-normal: 400; /* @kind font */
  --sans-medium: 500; /* @kind font */
  --sans-semibold: 600; /* @kind font */
  --sans-bold: 700; /* @kind font */
  --sans-extrabold: 800; /* @kind font */
  --sans-black: 900; /* @kind font */

  /* --------------------------- SPACING ------------------------------ */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-32: 128px;
  --section-y-mobile: 64px;
  --section-y-desktop: 128px;

  /* Measure — rem derived from a counted line, never ch (parent rule:
     ch is the advance width of the zero glyph OF THE ELEMENT CARRYING THE
     RULE; 65ch on a sans shell wrapping serif prose measured 97 characters).
     body = 69 chars of role-body-serif @16px; lede = 47 chars @20px. */
  --measure-body: min(28rem, 100% - 2rem); /* @kind spacing */
  --measure-lede: min(24rem, 100% - 2rem); /* @kind spacing */
  --container-wide: 80rem; /* @kind spacing */
  --container-tight: 48rem; /* @kind spacing */

  /* --------------------------- RADII -------------------------------- */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-full: 9999px;

  /* --------------------------- SHADOWS ------------------------------ */
  /* One ink, slate-900, two layers per tier. Elevation is shadow + ring,
     never transform. */
  --shadow-flat:     none;
  --shadow-whisper:  0 1px 2px 0 rgb(15 23 42 / 0.04), 0 1px 1px -1px rgb(15 23 42 / 0.04);
  --shadow-raised:   0 4px 6px -1px rgb(15 23 42 / 0.12), 0 2px 4px -2px rgb(15 23 42 / 0.12);
  --shadow-floating: 0 20px 25px -5px rgb(15 23 42 / 0.18), 0 8px 10px -6px rgb(15 23 42 / 0.18);

  /* --------------------------- MOTION ------------------------------- */
  --duration-instant: 100ms; /* @kind other */
  --duration-fast: 150ms; /* @kind other */
  --duration-base: 200ms; /* @kind other */
  --duration-slow: 300ms; /* @kind other */
  --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  /* Transition ONLY background, box-shadow, color, opacity, outline.
     Never transform. Never `all`. */

  /* --------------------------- FOCUS / TARGET ----------------------- */
  --focus-color:  var(--color-functional);
  --focus-width:  2px; /* @kind spacing */
  --focus-offset: 4px; /* @kind spacing */
  --target-min:   44px; /* @kind spacing */
  /* 12px is the type floor — no chrome exception. */
}

/* ---- Dark: automatic, with override. The one deliberate divergence. ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --text-primary:   rgb(255 255 255 / 87%);
    --text-secondary: rgb(255 255 255 / 55%);
    --text-tertiary:  rgb(255 255 255 / 38%);
    --border-hairline: rgb(255 255 255 / 20%);
    --border-subtle:   rgb(255 255 255 / 10%);
    --canvas:  var(--color-zinc-900);
    --surface: var(--color-zinc-800);
    --surface-ring: var(--border-subtle);
    --color-accent:       rgb(255 255 255 / 87%);
    --color-accent-hover: rgb(255 255 255 / 100%);
    --color-accent-label: var(--color-zinc-900);
    --focus-color: var(--color-functional-light);
  }
}
/* Scoped to any element, not just :root, so a specimen can show light and
   dark side by side in one document. A [data-theme="light"] block below
   restores light values inside an OS-dark page. */
[data-theme="dark"] {
  --text-primary:   rgb(255 255 255 / 87%);
  --text-secondary: rgb(255 255 255 / 55%);
  --text-tertiary:  rgb(255 255 255 / 38%);
  --border-hairline: rgb(255 255 255 / 20%);
  --border-subtle:   rgb(255 255 255 / 10%);
  --canvas:  var(--color-zinc-900);
  --surface: var(--color-zinc-800);
  --surface-ring: var(--border-subtle);
  --color-accent:       rgb(255 255 255 / 87%);
  --color-accent-hover: rgb(255 255 255 / 100%);
  --color-accent-label: var(--color-zinc-900);
  --focus-color: var(--color-functional-light);
}
[data-theme="light"] {
  --text-primary:   rgb(0 0 0 / 87%);
  --text-secondary: rgb(0 0 0 / 55%);
  --text-tertiary:  rgb(0 0 0 / 38%);
  --border-hairline: rgb(0 0 0 / 5%);
  --border-subtle:   rgb(0 0 0 / 10%);
  --canvas:  var(--color-zinc-100);
  --surface: var(--color-white);
  --surface-ring: var(--border-subtle);
  --color-accent:       var(--color-ink);
  --color-accent-hover: var(--color-ink-light);
  --color-accent-label: rgb(255 255 255 / 92%);
  --focus-color: var(--color-functional);
}
/* Dark-mode optical bloom on display numerals only (parent: 700 → 650). */
@media (prefers-color-scheme: dark) {
  :root .role-stat-display { font-weight: 650; }
}
[data-theme="dark"] .role-stat-display { font-weight: 650; }
[data-theme="light"] .role-stat-display { font-weight: var(--sans-bold); }

/* =========================================================================
   ROLES
   ========================================================================= */
.site {
  background: var(--canvas);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-variation-settings: var(--sans-body);
  font-weight: var(--sans-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings — serif, never ALL CAPS. */
.role-display-hero {
  font-family: var(--font-serif);
  font-variation-settings: var(--serif-display);
  font-size: clamp(2rem, 4.5vw, 3.75rem);
  font-weight: 800; line-height: 1.1; letter-spacing: -0.01em;
  color: var(--text-primary); text-wrap: balance;
}
.role-display-section {
  font-family: var(--font-serif);
  font-variation-settings: var(--serif-display);
  font-size: 1.5rem; font-weight: 800; line-height: 1.2;
  color: var(--text-primary);
}
/* The one paragraph under the masthead. */
.role-lede {
  font-family: var(--font-serif);
  font-variation-settings: var(--serif-text);
  font-size: 1.25rem; font-weight: 450; line-height: 1.55;
  max-width: var(--measure-lede); color: var(--text-primary); text-wrap: pretty;
}
.role-body {
  font-family: var(--font-sans); font-variation-settings: var(--sans-body);
  font-size: 1rem; font-weight: var(--sans-normal); line-height: 1.5;
  color: var(--text-primary);
}
.role-body-serif {
  font-family: var(--font-serif); font-variation-settings: var(--serif-text);
  font-size: 1rem; font-weight: 450; line-height: 1.625; color: var(--text-primary);
}
/* Chrome register — section heads, card eyebrows, the stat label. Uppercase
   lives HERE ONLY. It is a heading register; captions and taglines stay on
   the body axis. */
.role-label-caps {
  font-family: var(--font-sans); font-variation-settings: var(--sans-chrome);
  font-size: 0.75rem; font-weight: var(--sans-semibold); line-height: 1;
  letter-spacing: var(--track-chrome); text-transform: uppercase;
  color: var(--text-secondary);
}
/* Provenance — "measured 2026-08-21", "source: contact-officials". Serif
   roman, not italic (small italic asks too much of a calligraphic face). */
.role-metadata {
  font-family: var(--font-serif); font-variation-settings: 'opsz' 16, 'wght' 420;
  font-size: 0.875rem; font-weight: 420; color: var(--text-secondary);
}
/* Pull quotes from the repos — serif italic, 18px+ only. */
.role-quote {
  font-family: var(--font-serif); font-variation-settings: var(--serif-quote);
  font-style: italic; font-size: 1.25rem; font-weight: 400; line-height: 1.5;
  color: var(--text-primary); text-wrap: pretty;
}
.role-caption {
  font-family: var(--font-sans); font-size: 0.75rem;
  font-weight: var(--sans-normal); line-height: 1.25; color: var(--text-secondary);
}
/* Machine identifiers — repo names, span names, UUIDs, keyboard. NOT numbers. */
.role-code {
  font-family: var(--font-mono); font-size: 0.875rem; font-weight: 400; line-height: 1.5;
}
/* Hero stat numerals — sans, display width, tabular. Numbers are Archivo,
   never mono; mono is for identifiers a reader copies. */
.role-stat-display {
  font-family: var(--font-sans); font-variation-settings: var(--sans-display);
  font-weight: var(--sans-bold); font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1; letter-spacing: -0.01em; color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
/* Secondary figures — timeline years, counts inside cards. */
.role-stat-secondary {
  font-family: var(--font-sans); font-variation-settings: var(--sans-body);
  font-weight: var(--sans-semibold); font-size: 1.25rem; line-height: 1.2;
  font-variant-numeric: tabular-nums; color: var(--text-primary);
}

/* ---- Surfaces (flat) ---- */
.surface {
  background: var(--surface);
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--surface-ring);
  border-radius: var(--radius-md);
}
.surface--raised { box-shadow: var(--shadow-raised), inset 0 0 0 1px var(--surface-ring); }
.shadow-flat     { box-shadow: var(--shadow-flat); }
.shadow-whisper  { box-shadow: var(--shadow-whisper); }
.shadow-raised   { box-shadow: var(--shadow-raised); }
.shadow-floating { box-shadow: var(--shadow-floating); }

/* ---- Links + the one plate ---- */
a { color: inherit; text-decoration: underline; text-decoration-color: var(--border-subtle); text-underline-offset: 0.15em;
    transition: text-decoration-color var(--duration-base) var(--ease-standard); }
a:hover { text-decoration-color: currentColor; }
.role-plate {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--target-min); padding: 0 22px;
  background: var(--color-accent); color: var(--color-accent-label);
  /* A <button> does not inherit page type: without an explicit size the label falls back to
     the UA default (~13px) and reads far smaller than the plate around it. */
  font-family: var(--font-sans); font-weight: var(--sans-semibold);
  font-size: 1rem; line-height: 1;
  border: 0; border-radius: var(--radius-md); text-decoration: none;
  box-shadow: var(--shadow-raised), inset 0 0 0 1px rgb(0 0 0 / 10%);
  transition: background var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}
.role-plate:hover { background: var(--color-accent-hover); }

/* ---- Measure ---- */
.measure      { max-width: var(--measure-body); }
.measure-lede { max-width: var(--measure-lede); }

/* ---- Focus ---- */
:where(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}
:where(a):focus-visible { outline-offset: 8px; }

/* ---- Hard lines ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
@media (prefers-contrast: more) {
  :root { --text-secondary: rgb(0 0 0 / 75%); }
  [data-theme="dark"] { --text-secondary: rgb(255 255 255 / 75%); }
}

/* ---- Print — it is a business card; it should print. ---- */
@page { size: letter; margin: 1in; }
@media print {
  :root { --text-primary: rgb(0 0 0 / 100%); --text-secondary: rgb(0 0 0 / 45%); --text-tertiary: rgb(0 0 0 / 45%); --canvas: #fff; --surface: #fff; }
  .surface, .surface--raised { box-shadow: none; border: 1px solid rgb(0 0 0 / 15%); }
  nav, .no-print { display: none; }
  a { text-decoration: none; }
}