/* ============================================================================
   REDDENDA · SHARED DESIGN SYSTEM  —  /assets/reddenda-system.css
   The single source of truth for tokens + the Palantir type scale, extracted
   from MASTER-PLAN.visualSystem + ELEVATION-SPEC-home so all pages stop drifting.

   CONTRACT (binding):
   · Surfaces are monochrome only (--ink / --paper / --paper-2). Cobalt #1E7A45 is
     the ONLY accent and is spent like money — ONE accent word per headline, ONE
     filled CTA per viewport. Instrument colors (--ok/--amber/--threat) live ONLY
     inside data-viz frames, never as a heading.
   · Headlines are Geist weight 400 at EVERY size (large + light + tight IS the
     authority). Headline ink is #1E2124, never pure #000. Dark bands are near-black
     #0A0A0B / #0B0C10, never #000.
   · Self-contained: no @import, no external dependency. Pairs with
     reddenda-motion.css (the four verbs) and reddenda-nav.{css,js}.
   ========================================================================== */

/* ============================ DESIGN TOKENS =============================== */
:root{
  /* — surfaces: deep-forest black / pristine white (the matte mass) — */
  --ink:#070D08;          /* brand near-black, faintest field-green cast */
  --ink-2:#121A10;        /* secondary dark surface (cards on dark) */
  --ink-bg:#08120C;       /* dark SECTION background — deep forest near-black, never #000 */
  --paper:#FFFFFF;        /* pristine — green NEVER tints large white areas */
  --paper-2:#F3F4F0;      /* faint warm-grey-green paper */
  --paper-3:#E9EBE4;

  /* — THE ACCENT: two-green system (token name --cobalt kept for cascade) — */
  --cobalt:#1E7A45;       /* BRAND mid-green: the ONE filled CTA, active states, rules, topbars */
  --cobalt-700:#16301F;   /* hover/pressed → deepens to forest, never brightens */
  --cobalt-soft:rgba(90,224,139,.10);
  --mil:#1E7A45; --mil-700:#16301F; --mil-800:#16301F; --mil-900:#0E2417;
  --mil-hud:#5AE08B;      /* ELECTRIC accent (Oregon "Warp Speed") — ONE per headline, spent like ammo */
  --mil-hud-2:#7DF29A;    /* brightest tick / inset top-light */
  --mil-rgb:90,224,139;   /* rgba() glows track the electric accent */
  --viz-phosphor:#41E08A; /* live data strokes INSIDE canvas/.viz only — never on text/borders */

  /* — CHROME: polished gunmetal (Oregon/Nike) — STATIC identity + seams ONLY — */
  --chrome-2:#BEC3C9; --chrome-3:#8C9298; --chrome-edge:#C3C8CE;
  --chrome-grad:linear-gradient(166deg,#F4F6F7 0%,#C9CDD2 22%,#EEF0F2 46%,#8C9298 70%,#D5D8DC 88%,#A7ACB2 100%);

  /* — condensed face (Nike/Oregon jersey-attitude) — SMALL UI ONLY, never sentences — */
  --cond:'Saira Condensed','Oswald',var(--sans);

  /* — type ink — */
  --ink-soft:#1E2124;     /* HEADLINE text on white (the Palantir secret — never #000) */
  --paper-head:#EFEFEF;   /* hero H1 on dark — slightly dimmed white softens glare */
  --body-ink:#4A4D55;     /* lead body on white */

  /* — greys — */
  --g-50:#FAFAFB; --g-100:#EDEEF1; --g-300:#C9CCD3;
  --g-500:#7C8089; --g-600:#5A5E66; --g-700:#3A3D44;

  /* — hairline seams (the single most "Palantir" detail) — */
  --line:rgba(10,10,11,.10);
  --line-d:rgba(255,255,255,.12);
  --rule-light:#E6E7EA;
  --rule-dark:#13241A;    /* seam between dark bands — forest hairline, not neutral grey */

  /* — instrument signal (ONLY inside .viz / canvas data frames) — */
  --ok:#39D98A; --amber:#FFB23E; --threat:#FF5D5D;

  /* — per-vertical viz accent (tints DATA-VIZ ONLY; chrome stays cobalt) — */
  --ac:#1E7A45;           /* default; pages override: defense #5B8CFF / finance #1E7A45 / energy #FFB23E / health #B98CFF */

  /* — fonts — */
  --sans:'Geist','Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'Geist Mono','IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;

  /* — PALANTIR TYPE SCALE (weight 400 at every size) — */
  --t-mega:clamp(48px,9vw,132px);      /* used EXACTLY ONCE per page (full-bleed statement) */
  --t-h1:clamp(44px,7vw,96px);         /* hero default */
  --t-h1-word:clamp(56px,11vw,128px);  /* single-word hero clamp (SENTINEL/RECONCILE fills the frame) */
  --t-h2:clamp(34px,5vw,68px);
  --t-h3:clamp(24px,3vw,40px);
  --t-lead:18px;                       /* lead body */
  --t-body:17px;
  --t-eyebrow:11px;
  --t-data:14px;

  /* — rhythm — */
  --maxw:1240px;
  --sec-pad:120px;                     /* desktop section padding */
}
@media(max-width:640px){
  :root{ --sec-pad:78px; }
}

/* ============================== RESET ==================================== */
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:var(--t-body); line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img,canvas,svg,video{ max-width:100%; display:block; }
button{ font:inherit; }

/* HARD RULE: every headline is weight 400, tight, never #000 */
h1,h2,h3,h4{ margin:0; font-weight:400; letter-spacing:-.035em; line-height:1.0; color:inherit; }
/* CONTRAST SAFETY: headings inherit their section color, so ANY dark section/card that sets
   color:#fff (incl. custom ones like .cascade) gets white headings automatically — no heading
   can ever render near-black on a dark band. Light sections carry --ink-soft (set below). */
.sec--ink h1,.sec--ink h2,.sec--ink h3,.sec--ink h4,
.hero h1,.hero h2,.hero h3,.final h1,.final h2{ color:#fff; }

/* =========================== TYPE SCALE CLASSES ========================== */
.t-mega{ font-size:var(--t-mega); letter-spacing:-.045em; line-height:.94; }
.t-h1{ font-size:var(--t-h1); letter-spacing:-.04em; line-height:1.0; }
.t-h1--word{ font-size:var(--t-h1-word); letter-spacing:-.045em; line-height:.96; }
.t-h2{ font-size:var(--t-h2); letter-spacing:-.03em; line-height:1.04; }
.t-h3{ font-size:var(--t-h3); letter-spacing:-.02em; line-height:1.12; }

.lead-p{
  font-family:var(--sans); font-size:var(--t-lead); line-height:1.5;
  color:var(--body-ink); max-width:46ch; letter-spacing:-.005em;
}
.sec--ink .lead-p{ color:rgba(255,255,255,.72); }   /* AA-clean on dark */

/* EYEBROW — condensed jersey-attitude label; electric-green tick prefix */
.eyebrow{
  font-family:var(--cond); font-size:var(--t-eyebrow); line-height:1.6; font-weight:600;
  letter-spacing:.20em; text-transform:uppercase; color:var(--g-500);
  display:inline-flex; align-items:center; gap:9px;
}
.eyebrow::before{
  content:""; width:6px; height:6px; flex:0 0 auto;
  background:var(--mil-hud); box-shadow:0 0 8px rgba(90,224,139,.55);
}
.sec--ink .eyebrow{ color:rgba(255,255,255,.55); }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
/* stat numerals — condensed, tabular, electric (the scoreboard readout) */
.mono.stat,.stat-num{ font-family:var(--cond); font-weight:600; font-variant-numeric:tabular-nums; color:var(--mil-hud); letter-spacing:0; }

/* ============================ LAYOUT HELPERS ============================= */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 32px; position:relative; }
@media(max-width:640px){ .wrap{ padding:0 20px; } }
section{ position:relative; }

/* SECTION BANDS — cinematic dark↔light cadence, 1px hairline at every seam */
.sec{ padding:var(--sec-pad) 0; position:relative; }
.sec--paper{ background:var(--paper); color:var(--ink-soft); border-top:1px solid var(--rule-light); }
.sec--paper-2{ background:var(--paper-2); color:var(--ink-soft); border-top:1px solid var(--rule-light); }
.sec--ink{ background:var(--ink-bg); color:#fff; border-top:1px solid var(--rule-dark); }
.sec--paper h2,.sec--paper-2 h2{ color:var(--ink-soft); }

/* NAV BRAND LOCKUP — white wordmark + a persistent tagline under REDDENDA (mobile + web) */
.brand,.lockup{ flex-wrap:wrap; }
.brand b,.lockup b{ color:#fff; }
.brand-tag{ flex-basis:100%; order:5; font-family:var(--mono); font-size:8.5px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.55); margin-top:2px; white-space:nowrap; line-height:1; }
@media(max-width:420px){ .brand-tag{ font-size:7.5px; letter-spacing:.1em; } }

/* THE .lead — Palantir signature: headline LEFT, one clause RIGHT, baseline-aligned */
.lead{
  display:grid; grid-template-columns:1.1fr .9fr; gap:32px 56px;
  align-items:end; margin-bottom:54px;
}
.lead > .lead-aside{ padding-bottom:.35em; }
@media(max-width:860px){
  .lead{ grid-template-columns:1fr; gap:20px; align-items:start; margin-bottom:40px; }
  .lead > .lead-aside{ padding-bottom:0; }
}

/* ============================== BUTTONS ================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px; padding:0 24px; border-radius:3px;
  font-weight:500; font-size:15px; letter-spacing:-.01em; cursor:pointer;
  border:1px solid transparent; white-space:nowrap;
  transition:transform var(--d-sm,.34s) var(--ease-out,cubic-bezier(.22,1,.36,1)),
             background var(--d-sm,.34s) var(--ease-out,cubic-bezier(.22,1,.36,1)),
             border-color var(--d-sm,.34s) var(--ease-out,cubic-bezier(.22,1,.36,1)),
             color var(--d-sm,.34s) var(--ease-out,cubic-bezier(.22,1,.36,1));
}
.btn .arr{ transition:transform var(--d-sm,.34s) var(--ease-out,cubic-bezier(.22,1,.36,1)); }
.btn:hover .arr{ transform:translateX(4px); }
.btn:active{ transform:scale(.97); }

/* the SINGLE filled button per viewport — anodized forest with one electric top-light */
.btn--p{ background:var(--mil); color:#fff;
  box-shadow:inset 0 1px 0 rgba(125,242,139,.35), 0 10px 30px -12px rgba(0,0,0,.5); }
.btn--p:hover{ background:var(--mil-700); }

/* ghost button — light context */
.btn--ghost{ background:transparent; color:var(--ink-soft); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--ink-soft); }
/* ghost button — dark context (nav stays white-on-dark, never a 2nd cobalt fill) */
.sec--ink .btn--ghost,.btn--ghost-d{ color:#fff; border-color:rgba(255,255,255,.32); background:transparent; }
.sec--ink .btn--ghost:hover,.btn--ghost-d:hover{ border-color:#fff; background:rgba(255,255,255,.07); }

/* ===================== THE .rb-def ETYMOLOGY CARD ======================= */
/* Scholarly Latin definition card; cobalt left-rule draws down on reveal */
.rb-def{
  position:relative; padding:22px 26px 24px 30px; max-width:560px;
  background:rgba(255,255,255,.02); border:1px solid var(--line-d); border-radius:6px;
}
.sec--paper .rb-def,.sec--paper-2 .rb-def{ background:#fff; border-color:var(--line); }
.rb-def::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--cobalt); transform:scaleY(0); transform-origin:top;
  transition:transform var(--d-lg,.9s) var(--ease,cubic-bezier(.16,1,.3,1));
}
.rb-def.in::before,.reveal.in .rb-def::before{ transform:scaleY(1); }
.rb-def .rb-word{ font-family:var(--mono); font-size:13px; letter-spacing:.06em; color:var(--cobalt); text-transform:lowercase; }
.rb-def .rb-pos{ font-family:var(--mono); font-size:12px; color:var(--g-500); margin-left:8px; }
.rb-def .rb-mean{ display:block; margin-top:12px; font-size:19px; line-height:1.4; letter-spacing:-.01em; }
.sec--ink .rb-def .rb-mean{ color:rgba(255,255,255,.9); }
.rb-def .rb-note{ display:block; margin-top:12px; font-family:var(--mono); font-size:11.5px; line-height:1.6; color:var(--g-500); letter-spacing:.02em; }

/* ===================== HONESTY CHROME (shared, DRY) ===================== */
/* Status taxonomy — exactly four labels. Never invent a fifth. */
.status{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  padding:5px 10px; border-radius:3px; border:1px solid currentColor; line-height:1;
}
.status i{ width:7px; height:7px; border-radius:50%; background:currentColor; flex:0 0 auto; }
.status--live{ color:var(--cobalt); }                 /* Healthcare ONLY */
.status--dev{ color:var(--g-500); }                   /* OFFERING · IN DEVELOPMENT (Defense/Finance/Energy) */
.status--illus{ color:var(--amber); }                 /* DESIGN-INTENT / ILLUSTRATIVE (every dashboard/showcase) */
.status--opp{ color:var(--g-500); }                   /* DOCUMENTED-OPPORTUNITY (cite a public source inline) */
.sec--ink .status--dev,.sec--ink .status--opp{ color:rgba(255,255,255,.6); }

/* per-figure caption — every number is captioned or it doesn't ship */
.illus-cap{ font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--g-500); margin-top:10px; }
.sec--ink .illus-cap{ color:rgba(255,255,255,.42); }

/* human-in-the-loop ledger line (the single most trust-building frame) */
.human-gate{
  display:inline-flex; align-items:center; gap:11px;
  border:1px solid var(--cobalt); border-radius:5px; padding:12px 16px;
  font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--mil-hud);
  background:rgba(90,224,139,.06);
}
.human-gate i{ width:9px; height:9px; border-radius:50%; background:var(--mil-hud); flex:0 0 auto; box-shadow:0 0 9px var(--mil-hud); }

/* ============== DATA-VIZ FRAME — the ONLY place instrument color lives === */
/* forest-black scope housing (de-blued from navy; cascades to all .viz frames) */
.viz{
  position:relative; border:1px solid var(--line-d); border-radius:8px; overflow:hidden;
  background:radial-gradient(circle at 50% 42%,#0C140C,#060A06 74%);
  aspect-ratio:16/10; box-shadow:0 30px 80px -34px rgba(0,0,0,.7);
}
@media(max-width:520px){ .viz{ aspect-ratio:4/3; } }
.viz canvas{ position:absolute; inset:0; width:100%; height:100%; }
.viz .viz-hud{ position:absolute; inset:0; pointer-events:none; font-family:var(--mono); font-size:10px; color:rgba(255,255,255,.55); letter-spacing:.06em; }
.viz-hud .tl{ position:absolute; top:11px; left:13px; }
.viz-hud .tr{ position:absolute; top:11px; right:13px; text-align:right; }
.viz-hud .bl{ position:absolute; bottom:11px; left:13px; }

/* ============================ FOCUS / A11Y ============================== */
:focus-visible{ outline:2px solid var(--cobalt); outline-offset:2px; border-radius:2px; }
.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; }

/* skip link */
.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--cobalt); color:#fff; padding:10px 16px; border-radius:0 0 4px 0; }
.skip:focus{ left:0; }

/* tap-target floor — every interactive control ≥44px (binding) */
.tap{ min-width:44px; min-height:44px; }

/* ===================== CHROME — polished-metal text (Oregon/Nike) ========= */
/* Use on LARGE display words only (hero accent, single statement words). The
   gradient is clipped to the glyphs; a solid fallback keeps it legible if
   background-clip:text is unsupported. */
.chrome-text{
  background-image:var(--chrome-grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .chrome-text{ color:var(--chrome-edge); -webkit-text-fill-color:var(--chrome-edge); }
}
/* a thin chrome hairline (top edge of premium cards / bands) */
.chrome-edge{ border-top:1px solid var(--chrome-edge); }

/* CHROME SEAM — the abstracted Oregon mirror-wing: one polished gunmetal 1px line
   along the top edge of a dark band (the ONLY place chrome appears in volume). */
.chrome-seam{ position:absolute; top:0; left:0; right:0; height:1px; z-index:4;
  background:var(--chrome-grad); opacity:.8; pointer-events:none; }