/* ============================================================
   DCG v12 · Design system
   Greyscale carries the page. Colour is reserved for action,
   for consequence, and for the SGM primaries inside instruments.

   Every component reads ground-relative tokens (--fg, --rule,
   --surface). Any section that sits on a dark ground redefines
   those tokens once, so no component ever needs to know which
   ground it is on.
   ============================================================ */

:root {
  /* --- Grey ramp --- */
  --white: #FFFFFF;
  --grey-05: #F1F1EF;
  --grey-15: #E2E2DF;
  --grey-30: #C2C2BE;
  --grey-50: #8A8A8A;
  --grey-70: #565656;
  --grey-88: #1F1F1F;
  --black: #141414;
  --black-deep: #070707;

  /* --- Ground-relative tokens: light ground (default) --- */
  --ground: var(--white);
  --surface: var(--white);
  --fg: var(--black);
  --fg-2: var(--grey-70);
  --fg-3: var(--grey-50);
  --rule: var(--grey-15);
  --rule-strong: var(--grey-30);

  /* --- Accent: action only --- */
  --signal: #4B54FB;

  /* --- DCG primary green: structural relations --- */
  --dcg-green: #176B52;

  /* --- Flare: consequence, event, risk --- */
  --flare: #FF4500;

  /* --- SGM primaries. Spectral Governance Model: these are the
         primary colours of the model and stay inside instruments. --- */
  --sgm-red: #F02D2D;      /* coercion */
  --sgm-yellow: #F2B32C;   /* resources — a true yellow: against #FF4500 the
                              red and resource modalities became one colour,
                              which is the one thing the model cannot afford */
  --sgm-blue: #2D5BF0;     /* legitimacy */

  /* --- Type --- */
  --font-display: "Barlow Semi Condensed", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --step-hero: clamp(2.5rem, 4.6vw, 4.4rem);
  --step-1: clamp(1.85rem, 3.2vw, 3rem);
  --step-2: clamp(1.3rem, 1.9vw, 1.65rem);
  --step-3: 1.2rem;
  --step-lead: clamp(1.02rem, 1.25vw, 1.18rem);
  --step-body: 1rem;
  --step-small: .9rem;
  --step-micro: .7rem;

  /* --- Rhythm --- */
  --max: 1280px;
  --gutter: clamp(20px, 4vw, 52px);
  --act-pad: clamp(72px, 8vw, 120px);
  --radius: 4px;
  --ease: cubic-bezier(.22, .61, .21, 1);
}

/* --- Light alternate ground --- */
.act--alt { --ground: var(--grey-05); --surface: var(--white); }

/* --- Dark ground: one place, every section that needs it --- */
.act--terrain,
.case-bleed,
.site-footer,
.on-dark {
  --ground: var(--black-deep);
  --surface: #101010;
  --fg: var(--white);
  --fg-2: #A8A8A8;
  --fg-3: #6E6E6E;
  --rule: var(--grey-88);
  --rule-strong: #343434;
}

/* ============ Base ============ */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: 1.65;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* height:auto is load-bearing — without it the width/height attributes act as
   presentational hints and win over any aspect-ratio we set. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 {
  margin: 0; text-wrap: balance;
  font-family: var(--font-display);
}
h1 { font-weight: 700; }
h2, h3, h4 { font-weight: 600; }
p { margin: 0; text-wrap: pretty; }

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

::selection { background: var(--signal); color: #fff; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 200;
  background: var(--black); color: #fff;
  font: 500 var(--step-small) var(--font-mono);
  padding: 10px 16px; border-radius: var(--radius);
  transform: translateY(-300%); transition: transform .2s var(--ease);
}
.skip-link:focus { transform: none; }

/* ============ Grounds ============ */
.act { position: relative; padding-block: var(--act-pad); }
.act--paper, .act--alt, .act--terrain { background: var(--ground); color: var(--fg); }

/* ============ Typographic voice ============ */
/* Eyebrow: label always reads at full contrast; the square is the accent. */
.eyebrow {
  font: 500 var(--step-micro) var(--font-mono);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--fg);
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 24px;
}
.eyebrow::before {
  content: ""; width: 9px; height: 9px; flex: none;
  background: var(--signal);
}
.eyebrow--flare::before { background: var(--flare); }
.eyebrow--plain::before { background: var(--fg-3); }

.display { font-size: var(--step-hero); font-weight: 700; letter-spacing: -.014em; line-height: 1.02; max-width: 18ch; }
.headline { font-size: var(--step-1); font-weight: 600; letter-spacing: -.012em; line-height: 1.12; max-width: 24ch; }
.lead { font-size: var(--step-lead); line-height: 1.62; color: var(--fg-2); max-width: 58ch; }
.mono-meta {
  font: 500 var(--step-micro) var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3);
}
.statement {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.3rem, 2.3vw, 1.9rem); letter-spacing: -.012em;
  line-height: 1.26; color: var(--fg); max-width: 42ch;
}

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 13px 28px;
  overflow-wrap: anywhere;
  border-radius: var(--radius);
  font: 500 var(--step-small) var(--font-body);
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn--primary { background: var(--signal); color: #fff; }
.btn--primary:hover { background: var(--fg); color: var(--ground); }
/* Ghost always contrasts: it takes its colour from the ground it sits on. */
.btn--ghost { color: var(--fg); border-color: color-mix(in srgb, var(--fg) 40%, transparent); }
.btn--ghost:hover { background: var(--fg); color: var(--ground); border-color: var(--fg); }

/* Text link with rule */
.link {
  display: inline-block; text-decoration: none; color: var(--fg);
  font: 500 .76rem var(--font-mono);
  letter-spacing: .12em; text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 45%, transparent);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.link:hover { color: var(--signal); border-color: var(--signal); }
.link::after { content: " →"; }

/* ============ Epistemic status pills ============ */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  font: 500 .64rem var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 2px;
  border: 1px solid var(--rule-strong);
  color: var(--fg-2);
}
.pill::before { content: ""; width: 5px; height: 5px; background: currentColor; }
.pill--flare { color: var(--flare); border-color: color-mix(in srgb, var(--flare) 45%, transparent); }
.pill--signal { color: var(--signal); border-color: color-mix(in srgb, var(--signal) 45%, transparent); }
.act--terrain .pill--signal { color: #8F96FF; }

/* ============ Cards ============ */
.card {
  border: 1px solid var(--rule);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 30px 28px;
  transition: border-color .2s var(--ease);
}
a.card { text-decoration: none; display: block; }
.card:hover { border-color: var(--rule-strong); }

/* ============================================================
   Instruments — every colour ground-relative, so the same
   figure reads correctly on white and on black.
   ============================================================ */
:root {
  --ins-line: var(--grey-15);
  --ins-node: var(--black);
  --ins-text: var(--grey-50);
  --ins-faint: #B4B4B0;
  --ins-open: var(--signal);
  --ins-cond: var(--flare);
  --ins-blocked: var(--grey-30);
  --ins-cone: rgba(75, 84, 251, .035);
}
.act--terrain, .case-bleed, .site-footer, .on-dark,
.section--dark, .final-cta, .dcg-instrument--dark, .instrument-panel,
.pilot-panel, .detail-panel, .decision-brief, .power-orbit,
.triangulation-panel, .power-projection-panel, .research-interface,
.portal-preview, .work-card.dark, .work-card.navy {
  --ins-line: #262626;
  --ins-node: var(--white);
  --ins-text: #6E6E6E;
  --ins-faint: #4A4A4A;
  --ins-open: #8F96FF;
  --ins-cond: var(--flare);
  --ins-blocked: #343434;
  --ins-cone: rgba(143, 150, 255, .05);
}

.ins-micro {
  fill: var(--ins-text);
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 1.6px; text-transform: uppercase;
}
.ins-label { fill: var(--ins-node); font-family: var(--font-mono); font-size: 9px; letter-spacing: 1px; }
.ins-label--end { text-anchor: end; }
.ins-rule, .ins-depth { stroke: var(--ins-line); stroke-width: 1; fill: none; }
.ins-node { fill: var(--ins-node); }
.ins-edge { stroke: var(--ins-line); stroke-width: 1.4; fill: none; }
.ins-feed { stroke: var(--ins-faint); stroke-width: 1; fill: none; stroke-dasharray: 3 4; }
.ins-frag { fill: var(--ins-faint); }
.ins-open { stroke: var(--ins-open); stroke-width: 2; fill: none; }
.ins-cond { stroke: var(--ins-cond); stroke-width: 2; fill: none; stroke-dasharray: 7 5; }
.ins-dot-open { fill: var(--ins-open); }
.ins-dot-cond { fill: var(--ins-cond); }
.ins-dot-faint { fill: var(--ins-faint); }

/* P-Futures cone */
.ins-cone { fill: var(--ins-cone); stroke: var(--ins-line); stroke-width: 1; }
.ins-path { fill: none; stroke-width: 3; stroke-linecap: round; }
.ins-path--open { stroke: var(--ins-open); }
.ins-path--cond { stroke: var(--ins-cond); stroke-dasharray: 9 6; }
.ins-path--blocked { stroke: var(--ins-blocked); stroke-width: 2.2; stroke-dasharray: 4 6; }
.ins-barrier { stroke: var(--flare); stroke-width: 3.2; stroke-linecap: round; }

/* Suez propagation */
.ins-route { stroke: var(--ins-line); stroke-width: 1.5; fill: none; }
.ins-canal { stroke: var(--ins-open); stroke-width: 2.2; fill: none; }
.ins-vessel { fill: var(--flare); }
.ins-ripple { stroke: var(--flare); stroke-width: 1.3; fill: none; }
.ins-sever-bg { stroke: var(--ground); stroke-width: 6; }
.ins-sever { stroke: var(--flare); stroke-width: 1.5; stroke-dasharray: 4 5; }

/* Spectral composition — SGM primaries */
.ins-box { fill: none; stroke: var(--ins-line); stroke-width: 1; }
.ins-spec { fill: none; stroke-width: 2; stroke-dasharray: 6 4; }
.ins-spec--coercion { stroke: var(--sgm-red); }
.ins-spec--resource { stroke: var(--sgm-yellow); }
.ins-spec--validation { stroke: var(--sgm-blue); }
.ins-lum { fill: none; stroke: var(--ins-node); stroke-width: 1.2; stroke-opacity: .55; }
.ins-lum--outer { stroke-opacity: .25; stroke-dasharray: 3 5; }

/* Micrographics */
.ins-loop { fill: none; stroke-width: 1.5; stroke-dasharray: 56 10; }
.ins-loop--coercion { stroke: var(--sgm-red); }
.ins-loop--resource { stroke: var(--sgm-yellow); }
.ins-loop--validation { stroke: var(--sgm-blue); }
.ins-loop-label { font-family: var(--font-mono); font-size: 11px; }
.ins-loop-label--coercion { fill: var(--sgm-red); }
.ins-loop-label--resource { fill: var(--sgm-yellow); }
.ins-loop-label--validation { fill: var(--sgm-blue); }
.ins-radar { fill: color-mix(in srgb, var(--ins-open) 14%, transparent); stroke: var(--ins-open); stroke-width: 1.4; }
.ins-radar--inner { fill: color-mix(in srgb, var(--flare) 16%, transparent); stroke: var(--flare); stroke-width: 1.2; }
.ins-barrier-label {
  fill: var(--flare); font-family: var(--font-mono);
  font-size: 8.5px; letter-spacing: 1.2px;
}

/* ============================================================
   Causal Geometry — one model, three lenses.
   The lens changes which question the figure answers, so it
   changes what is coloured and what is named.
   ============================================================ */
.geo-svg { width: 100%; height: auto; display: block; }
.geo-cluster { fill: none; stroke: var(--ins-line); stroke-width: 1; }
.geo-cluster-title {
  fill: var(--ins-text); font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 1.5px;
}
.geo-edge {
  fill: none; stroke: var(--ins-line); stroke-width: 1.2; stroke-opacity: .56;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .3s var(--ease), stroke-opacity .3s var(--ease);
}
.geo-edge.is-cross { stroke-width: 1.7; stroke-opacity: .82; }
.geo-node {
  fill: var(--ground); stroke: var(--ins-node); stroke-width: 1.35;
  transition: fill .3s var(--ease), stroke .3s var(--ease), r .3s var(--ease);
}
.geo-lum, .geo-loop, .geo-lev {
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease);
}
.geo-lum { fill: none; stroke: var(--ins-node); stroke-width: 1; stroke-opacity: .5; }
.geo-lum--outer { stroke-opacity: .22; stroke-dasharray: 3 5; }
.geo-loop-ring { fill: none; stroke-width: 1.4; stroke-dasharray: 26 7; }
.geo-loop-ring--R { stroke: var(--flare); }
.geo-loop-ring--B { stroke: var(--ins-open); }
.geo-loop-id { font-family: var(--font-mono); font-size: 9px; letter-spacing: 1px; }
.geo-loop-id--R { fill: var(--flare); }
.geo-loop-id--B { fill: var(--ins-open); }
.geo-lev-ring { fill: none; stroke: var(--ins-open); stroke-width: 1.6; }
.geo-lev-name {
  fill: var(--ins-node); font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 1px;
}
.geo-lev-note {
  fill: var(--ins-text); font-family: var(--font-body); font-size: 9.5px;
}

/* Lens · Causal Geometry — directed structure and polarity */
[data-active-lens="geometry"] .geo-edge--pos { stroke: var(--dcg-green); }
[data-active-lens="geometry"] .geo-edge--neg { stroke: var(--flare); stroke-dasharray: 5 4; }
[data-active-lens="geometry"] .geo-loop { opacity: 1; }

/* Lens · Spectral composition — the SGM primaries */
[data-active-lens="spectral"] .geo-edge--coercion { stroke: var(--sgm-red); }
[data-active-lens="spectral"] .geo-edge--resource { stroke: var(--sgm-yellow); }
[data-active-lens="spectral"] .geo-edge--validation { stroke: var(--sgm-blue); }
[data-active-lens="spectral"] .geo-edge { stroke-opacity: .7; }
[data-active-lens="spectral"] .geo-lum { opacity: 1; }

/* Lens · Structural leverage — where bounded change carries consequence */
[data-active-lens="leverage"] .geo-edge { stroke: var(--ins-faint); stroke-opacity: .3; }
[data-active-lens="leverage"] .geo-node { fill: var(--ground); stroke: var(--ins-faint); }
[data-active-lens="leverage"] .geo-node.is-lev { fill: var(--ins-open); stroke: var(--ins-open); }
[data-active-lens="leverage"] .geo-cluster-title { fill: var(--ins-faint); }
[data-active-lens="leverage"] .geo-lev { opacity: 1; }

/* ============================================================
   Home hero — light structural ground + highlighted semilattice.
   ============================================================ */
.semilattice-svg { width: 100%; height: auto; display: block; overflow: visible; }
.hero-zone-label {
  fill: var(--grey-50); font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 1.6px;
}
.hero-depth { stroke: var(--grey-15); stroke-width: 1; }
.hero-structure-envelope { fill: rgba(31, 31, 31, .018); stroke: var(--grey-15); stroke-width: 1; }
.hero-structure-edge { fill: none; stroke: var(--grey-15); stroke-width: 1.1; stroke-opacity: .76; }
.hero-structure-link { fill: none; stroke: var(--grey-15); stroke-width: .9; stroke-opacity: .52; stroke-dasharray: 3 6; }
.hero-structure-node { fill: var(--grey-30); fill-opacity: .55; }
.semi-edge { fill: none; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; stroke-opacity: .42; }
.semi-edge--cyan { stroke: #00d8b7; }
.semi-edge--green { stroke: #39d37c; }
.semi-edge--yellow { stroke: #ffd23c; }
.semi-edge--orange { stroke: #ff7a1a; }
.semi-edge--red { stroke: #ff3b30; }
.semi-edge--gray { stroke: #6f7377; }
.semi-edge.is-weighted { stroke-opacity: .72; }
.semi-edge.is-focus { stroke-opacity: .98; }
.semi-node { fill: var(--white); stroke-width: 1.75; opacity: .58; }
.semi-node--cyan { stroke: #00d8b7; }
.semi-node--green { stroke: #39d37c; }
.semi-node--yellow { stroke: #ffd23c; }
.semi-node--orange { stroke: #ff7a1a; }
.semi-node--red { stroke: #ff3b30; }
.semi-node--gray { stroke: #6f7377; }
.semi-node.is-focus { opacity: 1; }
.semi-origin-halo { fill: none; stroke: var(--grey-30); stroke-width: 1; }
.semi-node--origin { fill: var(--black); stroke: var(--black); stroke-width: 2.15; }

@media (max-width: 700px) { :root { --act-pad: clamp(52px, 11vw, 76px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}