/* OFFENSIVE LABS TECHNOLOGIES - offensivelabs.tech | css/main.css
   Source of truth: DESIGN.md v5.0 - VIBRANT MONOCHROME BY INVERSION.
   Dark default; light paper via <html data-theme="light">. Screens stay
   graphite in both modes, but screen TITLE BARS invert (v5). The accent
   is PURE INVERSION, used boldly - solid buttons, inverted chips and
   hovers, console edge-glow, inverted nav marker + ticker label -
   capped ~10-15% of pixels (DESIGN.md 4.4). No hue: every v5 literal
   is R=G=B. Page css loads AFTER this file; never redefine tokens.
   Gate: python tools/hue_audit_v4.py */

/* ----- 1. TOKENS ----- */
:root {
  /* -- theme: dark (DEFAULT) ---------------------------------------------- */
  --bg: #0B0C0E;                 /* page base */
  --bg-panel: #131519;           /* panels, alt bands, drawer */
  --bg-elevated: #1A1D22;        /* raised surfaces */
  --ink: #EDEEF0;                /* primary text */
  --ink-muted: #9BA0A8;          /* secondary text */
  --ink-faint: #7A7F87;          /* tertiary mono labels */
  --line: #26292E;               /* hairlines */
  --line-strong: #3A3E46;        /* emphasized borders */
  --accent: #FFFFFF;             /* THE accent - pure white */
  --accent-ink: #0B0C0E;         /* text on accent fills */
  --wash: rgba(255, 255, 255, 0.05);
  --grid-line: rgba(255, 255, 255, 0.032);
  --glow: rgba(255, 255, 255, 0.16);
  --pulse: rgba(255, 255, 255, 0.50);
  --selection: rgba(255, 255, 255, 0.26);
  --header-bg: rgba(11, 12, 14, 0.88);

  /* dark layered background: graphite radial shadows + 64px grid lattice */
  --page-layers:
    radial-gradient(1100px 640px at 50% -12%, rgba(255, 255, 255, 0.045), transparent 62%),
    radial-gradient(900px 620px at -8% 108%, rgba(0, 0, 0, 0.42), transparent 62%),
    radial-gradient(900px 620px at 108% 108%, rgba(0, 0, 0, 0.42), transparent 62%),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  --page-layer-sizes: auto, auto, auto, 64px 64px, 64px 64px;
  --vignette: radial-gradient(ellipse 120% 90% at 50% 38%, transparent 58%, rgba(0, 0, 0, 0.50) 100%);

  /* -- theme: light (paper) ------------------------------------------------ */
  /* Applied on <html data-theme="light"> - see the override block below. */

  /* -- screens: CONSTANT in both modes (instruments stay graphite) --------- */
  --screen-bg: #0E1013;
  --screen-panel: #14171B;
  --screen-line: #2A2D33;
  --screen-ink: #E9EBEE;
  --screen-mid: #9BA0A8;
  --screen-dim: #7E838B;
  --screen-bright: #FFFFFF;

  /* shared screen recipes (fix 7/9): attack-graph wash + spec-terminal drop shadow */
  --screen-graph: radial-gradient(420px 240px at 50% 30%, rgba(255, 255, 255, 0.04), transparent 70%);
  --shadow-screen: 0 18px 40px -20px rgba(0, 0, 0, 0.7);

  /* -- typography: IBM Plex superfamily, 6 weights, no italics ------------- */
  --font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --font-sans: "IBM Plex Sans", "Segoe UI", system-ui, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Cascadia Mono", Consolas, Menlo, monospace;

  --display-1: clamp(2.6rem, 6vw, 4.9rem);    /* homepage statement */
  --display-2: clamp(2.1rem, 4.2vw, 3.4rem);  /* inner-page h1 */
  --title-1: clamp(1.5rem, 2.4vw, 2.15rem);   /* section h2 */
  --title-2: 1.2rem;                          /* card / split h3 */

  --fs-xs: 0.6875rem;    /* 11px - mono labels */
  --fs-sm: 0.8125rem;    /* 13px - nav, buttons */
  --fs-md: 0.875rem;     /* 14px - small copy */
  --fs-base: 1rem;       /* 16px - body */
  --fs-lg: 1.0625rem;    /* 17px - lede */

  --lh-tight: 1.06;
  --lh-snug: 1.18;
  --lh-heading: 1.25;
  --lh-normal: 1.65;

  --ls-display: -0.012em;   /* Plex Serif display */
  --ls-heading: -0.008em;
  --ls-label: 0.16em;       /* mono uppercase labels */
  --ls-index: 0.20em;       /* //NN section indexes */

  /* -- spacing (4px base) -------------------------------------------------- */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;   --space-6: 2rem;
  --space-7: 3rem;     --space-8: 4rem;     --space-9: 6rem;
  --section-pad: clamp(6rem, 10vw, 8.75rem);
  --container-pad: clamp(1.25rem, 4vw, 2rem);

  /* -- layout / radius / motion / z ---------------------------------------- */
  --container: 72.5rem;
  --header-h: 4.25rem;
  --radius-sm: 4px;
  --radius-control: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 150ms;
  --t-med: 260ms;
  --t-reveal: 600ms;
  --z-header: 50;
  --z-skip: 100;

  color-scheme: dark;
}

/* Light paper mode - warm grain + hairline grid. */
[data-theme="light"] {
  --bg: #F5F3EE;
  --bg-panel: #FFFFFF;
  --bg-elevated: #FBFAF7;
  --ink: #16181C;
  --ink-muted: #5A5F66;
  --ink-faint: #6A6D74;
  --line: #E3E0D8;
  --line-strong: #C9C5BA;
  --accent: #16181C;             /* ink is the accent on paper */
  --accent-ink: #FFFFFF;
  --wash: rgba(22, 24, 28, 0.04);
  --grid-line: rgba(22, 24, 28, 0.045);
  --glow: rgba(22, 24, 28, 0.18);
  --pulse: rgba(22, 24, 28, 0.40);
  --selection: rgba(22, 24, 28, 0.16);
  --header-bg: rgba(245, 243, 238, 0.88);

  /* paper: 1px grain dots @4px pitch over a 96px hairline grid */
  --page-layers:
    radial-gradient(rgba(22, 24, 28, 0.05) 1px, transparent 1px),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  --page-layer-sizes: 4px 4px, 96px 96px, 96px 96px;
  --vignette: radial-gradient(ellipse 120% 90% at 50% 36%, transparent 62%, rgba(22, 24, 28, 0.06) 100%);

  color-scheme: light;
}

/* ----- 2. RESET & BASE ----- */
*,
*::before,
*::after{ box-sizing: border-box; }

html{ background-color: var(--bg); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-color: var(--line-strong) var(--bg); scrollbar-width: thin; }

body {
  margin: 0;
  padding-top: var(--header-h);      /* fixed header */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: transparent;    /* base lives on <html>; negative-z
                                       texture layers (3) stay visible */
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main#main{ flex: 1 0 auto; }

h1, h2{ margin: 0 0 var(--space-4); font-family: var(--font-serif); font-weight: 600; line-height: var(--lh-snug); color: var(--ink); text-wrap: balance; }
h3, h4, h5, h6{ margin: 0 0 var(--space-3); font-family: var(--font-sans); font-weight: 600; line-height: var(--lh-heading); color: var(--ink); text-wrap: balance; }

p{ margin: 0 0 var(--space-4); }
p:last-child{ margin-bottom: 0; }

ul, ol{ margin: 0; padding: 0; }
ul{ list-style: none; }

img, svg{ max-width: 100%; }
img{ display: block; height: auto; }

a{ color: var(--accent); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 0.2em; }
a:hover{ text-decoration-color: var(--accent); }

strong{ font-weight: 600; color: var(--ink); }

code{ font-family: var(--font-mono); font-size: 0.875em; color: var(--ink); background: var(--wash); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.125em 0.375em; }

:focus{ outline: none; }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

::selection{ background: var(--selection); color: var(--ink); }

::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: var(--bg); }
::-webkit-scrollbar-thumb{ background: var(--line-strong); border-radius: var(--radius-full); }

/* ----- 3. LAYERED BACKGROUND - never flat (DESIGN.md 7), pure CSS ----- */
body::before{ content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: var(--page-layers); background-size: var(--page-layer-sizes); background-repeat: repeat; }

body::after{ content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--vignette); }

/* ----- 4. UTILITIES & LAYOUT PRIMITIVES ----- */
.container{ width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--container-pad); }

.section{ padding-block: var(--section-pad); position: relative; }
.section--flush-top{ padding-block-start: 0; }

.section--alt{ background: var(--bg-panel); border-block: 1px solid var(--line); }

.hairline{ height: 1px; border: 0; margin: 0; background: linear-gradient(90deg, transparent, var(--line-strong) 50%, transparent); }

.grid{ display: grid; gap: var(--space-5); }
.grid--2{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); }

.actions{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

.mono-label{ font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-muted); margin: 0 0 var(--space-3); }

/* Shared 10px mono micro-label recipes. Components join the group whose
   values match exactly; color/margin stay with each component. (.msg-meta,
   .model-index, .graph-caption, .lab-note-date keep their own recipes -
   0.14em / 10.5px / 0.16em / fs-xs - so their rendering is unchanged.) */
.mono-micro,
.console-pane-label,
.dot-map-caption,
.ticker-label,
.console-caption {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.console-meta,
.footer-pgp {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
}

/* v5: ONE serif word per major headline, max - accent color only. */
.accent-serif{ color: var(--accent); }

.visually-hidden{ position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

.skip-link {
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-skip);
  padding: 0.6rem 1rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: var(--radius-control);
  text-decoration: none;
  transform: translateY(calc(-100% - 1.5rem));
}
.skip-link:focus-visible{ transform: none; outline: 2px solid var(--accent); outline-offset: 3px; }

/* ----- 5. BUTTONS (DESIGN.md 9.12) - one pair, every page ----- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.72rem 1.35rem;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none;
  border-radius: var(--radius-control);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    box-shadow var(--t-med) var(--ease),
    transform var(--t-fast) var(--ease);
}

/* Primary = solid accent: white on graphite / ink on paper. */
.btn-primary{ background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn-primary:hover{ box-shadow: 0 10px 30px -10px var(--glow); transform: translateY(-1px); }
.btn-primary:active{ transform: none; box-shadow: none; }

.btn-ghost{ background: transparent; color: var(--ink); border-color: var(--line-strong); }
/* v5: ghost hover = FULL inversion */
.btn-ghost:hover{ border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }

.btn .btn-arrow{ font-family: var(--font-mono); font-size: 0.85em; transition: transform var(--t-fast) var(--ease); }
.btn:hover .btn-arrow{ transform: translateX(2px); }

/* ----- 6. SITE HEADER - brand | nav links + ghost CTA | theme toggle (9.1) ----- */
.site-header{ position: fixed; inset: 0 0 auto 0; z-index: var(--z-header); background: var(--header-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }

.header-inner{ display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); height: var(--header-h); }

.brand{ display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.brand-glyph{ width: 34px; height: 27px; flex: none; object-fit: cover; border-radius: 4px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.brand:hover .brand-glyph{ transform: scale(1.04); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); }
.brand-name{ font-family: var(--font-sans); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.08em; color: var(--ink); white-space: nowrap; transition: color var(--t-fast) var(--ease); }

.site-nav{ display: flex; align-items: center; gap: var(--space-4); }

.nav-link{ font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0.04em; color: var(--ink-muted); text-decoration: none; padding: 0.35rem 0.1rem; transition: color var(--t-fast) var(--ease); }
.nav-link:hover{ color: var(--ink); }
/* v5: active nav marker = solid inverted chip. */
.nav-link[aria-current="page"]{ color: var(--accent-ink); background: var(--accent); text-decoration: none; padding: 0.35rem 0.65rem; border-radius: var(--radius-sm); }

/* Ghost nav CTA - "Request engagement" -> index.html#contact */
.nav-cta {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  text-decoration: none;
  margin-left: var(--space-2);
  transition:
    background-color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}
.nav-cta:hover{ background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* Theme toggle - mono label naming the mode it switches TO. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.25rem;
  padding: 0.5rem 0.7rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-muted);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  cursor: pointer;
  transition:
    color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}
/* v5: toggle hover inverts */
.theme-toggle:hover{ color: var(--accent-ink); border-color: var(--accent); background: var(--accent); }

.header-tools{ display: flex; align-items: center; gap: var(--space-2); }

/* Hamburger - hidden >=880px */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 9px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  cursor: pointer;
}
.nav-toggle-bar{ display: block; height: 1.5px; width: 100%; background: var(--ink); border-radius: var(--radius-full); transition: transform var(--t-med) var(--ease), opacity var(--t-fast) var(--ease); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

/* ----- 7. STATEMENT HERO + STATUS LINE (DESIGN.md 9.3) - quiet first fold ----- */
.hero{ position: relative; overflow: clip; padding-block: clamp(7rem, 14vh, 11rem) clamp(5rem, 9vh, 7.5rem); }

/* Optional radar sweep - very faint, reduced-motion gated (9.10). */
.hero-radar {
  position: absolute;
  top: -34%;
  left: 50%;
  width: min(1400px, 170vw);
  aspect-ratio: 1;
  z-index: -1;
  pointer-events: none;
  transform: translateX(-50%);
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    var(--pulse) 0deg,
    rgba(255, 255, 255, 0.10) 22deg,
    transparent 56deg
  );
  opacity: 0.05;
  filter: blur(1px);
  mask-image: radial-gradient(circle, rgba(0, 0, 0, 0.9) 0%, transparent 68%);
  animation: radar-sweep 24s linear infinite;
}
[data-theme="light"] .hero-radar{ background: conic-gradient( from 0deg, rgba(22, 24, 28, 0.5) 0deg, rgba(22, 24, 28, 0.10) 22deg, transparent 56deg ); }
@keyframes radar-sweep {
  to { transform: translateX(-50%) rotate(360deg); }
}

.hero-inner{ position: relative; }

/* Small mono status line above the statement. */
.status-line {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--space-5);
}

.status-dot{ width: 6px; height: 6px; flex: none; border-radius: var(--radius-full); background: var(--accent); animation: status-pulse 2.8s var(--ease) infinite; }
@keyframes status-pulse {
  0%   { box-shadow: 0 0 0 0 var(--pulse); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* THE statement - Plex Serif 600, one line, institutional. */
.statement{ font-family: var(--font-serif); font-weight: 600; font-size: var(--display-1); line-height: var(--lh-tight); letter-spacing: var(--ls-display); max-width: 16ch; margin: 0 0 var(--space-5); color: var(--ink); }

.display-2{ font-family: var(--font-serif); font-weight: 600; font-size: var(--display-2); line-height: var(--lh-tight); letter-spacing: var(--ls-display); max-width: 18ch; margin: 0 0 var(--space-4); }

.hero-lede{ font-size: var(--fs-lg); line-height: 1.6; color: var(--ink-muted); max-width: 34rem; margin-bottom: var(--space-6); }

.page-hero{ position: relative; overflow: clip; padding-block: clamp(4rem, 8vw, 6.5rem) clamp(2.5rem, 5vw, 4rem); }
.page-hero .page-lede{ font-size: var(--fs-lg); color: var(--ink-muted); max-width: 40rem; }

/* ----- 8. STATUS BAND (DESIGN.md 9.4) - the honest replacement for trust strips ----- */
.status-band{ border-block: 1px solid var(--line); background: var(--wash); padding-block: var(--space-4); }
.status-band-grid{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); }
.status-band-item{ display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-muted); margin: 0; }
.status-band-link {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink);
  text-decoration-color: var(--line-strong);
  padding: 0.25rem 0.55rem;
  border-radius: var(--radius-sm);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
/* v5: hover = full inversion */
.status-band-link:hover{ background: var(--accent); color: var(--accent-ink); text-decoration: none; }

/* ----- 9. CONSOLE MOCK - recolored mono, screen tokens only (DESIGN.md 9.5) ----- */
.console-stage{ perspective: 1200px; max-width: 66rem; margin-inline: auto; }

.console {
  transform: rotateX(6deg);
  transform-origin: 50% 100%;
  background: var(--screen-bg);
  border: 1px solid var(--screen-line);
  border-radius: var(--radius-lg);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.30),
    0 0 46px -8px rgba(255, 255, 255, 0.20),
    0 48px 110px -36px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

/* v5: INVERTED title bar - screen-bright fill, screen-bg content. */
.console-chrome{ display: flex; align-items: center; gap: var(--space-3); padding: 0.65rem 1rem; background: var(--screen-bright); }
.console-dots{ display: inline-flex; gap: 6px; flex: none; }
.console-dots i{ width: 9px; height: 9px; border-radius: var(--radius-full); background: var(--screen-bg); }
.console-url {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--screen-bright);
  background: var(--screen-bg);
  border-radius: var(--radius-full);
  padding: 0.3rem 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.console-live{ display: inline-flex; align-items: center; gap: 0.45rem; flex: none; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.14em; color: var(--screen-bg); }
.console-live-dot{ width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--screen-bg); animation: screen-pulse 1.8s var(--ease) infinite; }
@keyframes screen-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); }
  50%      { opacity: 0.55; box-shadow: 0 0 0 6px transparent; }
}

/* 3-pane body: agents | graph | findings */
.console-body{ display: grid; grid-template-columns: 168px minmax(0, 1fr) 216px; min-height: 340px; }

.console-sidebar,
.console-feed{ background: rgba(255, 255, 255, 0.02); padding: var(--space-3) var(--space-3) var(--space-4); min-width: 0; }
.console-sidebar{ border-right: 1px solid var(--screen-line); }
.console-feed{ border-left: 1px solid var(--screen-line); }

.console-pane-label{ color: var(--screen-dim); margin: 0 0 var(--space-3); }

.console-agents{ display: flex; flex-direction: column; gap: 2px; }
.console-agent{ display: flex; align-items: center; gap: 0.55rem; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--screen-mid); padding: 0.42rem 0.5rem; border-radius: var(--radius-sm); }
.console-agent.is-running{ color: var(--screen-ink); background: rgba(255, 255, 255, 0.06); }
.console-agent.is-done{ color: var(--screen-mid); }
.agent-dot{ width: 6px; height: 6px; flex: none; border-radius: var(--radius-full); background: var(--screen-line); }
.console-agent.is-running .agent-dot{ background: var(--screen-bright); animation: screen-pulse 1.8s var(--ease) infinite; }
.console-agent.is-done .agent-dot{ background: var(--screen-mid); }

/* Graph pane */
.console-main{ padding: var(--space-3) var(--space-4) var(--space-4); min-width: 0; }
.console-main-head{ display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.console-title{ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--screen-ink); margin: 0; }
.console-meta{ color: var(--screen-dim); margin: 0; white-space: nowrap; }
.console-graph {
  border: 1px solid var(--screen-line);
  border-radius: var(--radius-control);
  background: var(--screen-graph), var(--screen-bg);
  padding: var(--space-2);
}
.console-graph-svg{ display: block; width: 100%; height: auto; }

/* SVG edges - grayscale, emphasis by brightness */
.path-dim{ stroke: rgba(255, 255, 255, 0.16); stroke-width: 1.5; stroke-dasharray: 3 5; }
.path-live-glow{ stroke: rgba(255, 255, 255, 0.25); stroke-width: 6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.path-live{ stroke: var(--screen-bright); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 7 9; animation: dash-march 1.4s linear infinite; }
@keyframes dash-march {
  to { stroke-dashoffset: -32; }
}

/* SVG nodes */
.node rect{ fill: var(--screen-panel); stroke: var(--screen-line); stroke-width: 1; }
.node text{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; fill: var(--screen-mid); }
.node--live rect{ fill: #1E2227; stroke: var(--screen-ink); }
.node--live text{ fill: var(--screen-ink); }
.node--objective rect{ stroke: var(--screen-bright); stroke-width: 1.5; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.30)); }
.node--objective text{ fill: var(--screen-bright); font-weight: 600; }

/* Findings pane */
.console-findings{ display: flex; flex-direction: column; gap: var(--space-3); }
.finding-head{ display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: 0.35rem; }
.finding-time{ font-family: var(--font-mono); font-size: 10px; color: var(--screen-dim); }
.finding-text{ font-size: 12px; line-height: 1.55; color: var(--screen-mid); margin: 0; }

/* Console responsive flatten */
@media (max-width: 1099px) {
  .console-body { grid-template-columns: 148px minmax(0, 1fr); }
  .console-feed {
    grid-column: 1 / -1;
    border-left: none;
    border-top: 1px solid var(--screen-line);
  }
  .console-findings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: var(--space-4);
  }
}
/* Mobile nav + console flatten - one shared breakpoint (merged). */
@media (max-width: 879px) {
  .nav-toggle{ display: flex; }

  .site-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    z-index: calc(var(--z-header) - 1);
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    padding: var(--space-4) var(--container-pad) var(--space-5);
    background: var(--bg-panel);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 32px 60px -30px rgba(0, 0, 0, 0.55);
    opacity: 0;
    transform: translateY(-10px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease), visibility 0s var(--t-med);
  }
  .site-nav.is-open{ opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition-delay: 0s; }
  .nav-link{ padding: 0.8rem 0.4rem; font-size: var(--fs-base); border-bottom: 1px solid var(--line); }
  .nav-link[aria-current="page"]{ padding: 0.8rem 0.5rem; }
  .nav-cta{ margin: var(--space-3) 0 0; justify-content: center; padding: 0.8rem 1rem; }

  .console{ transform: none; }
  .console-stage{ perspective: none; }
}
@media (max-width: 639px) {
  .console-sidebar{ display: none; }
  .console-body{ grid-template-columns: minmax(0, 1fr); }
}

/* ----- 10. SEVERITY CHIPS - inverted mono, never color (DESIGN.md 9.6) -----
   Shared chip base: every mono status/severity/tag chip sits on it -
   .sev here, .model-state (13), .engine-status (home.css), .track-eng and
   .pub-tag (research.css) keep only their differing bits. Modifiers below
   and page css override the base (page css loads after this file). */
.chip,
.sev,
.model-state,
.engine-status,
.track-eng,
.pub-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 2px 7px;
}
.sev--critical{ background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
/* v5: HIGH tightens to full --ink outline (invert > ink > muted) */
.sev--high{ background: transparent; border-color: var(--ink); color: var(--ink); }
.sev--med{ background: transparent; border-color: var(--line); color: var(--ink-muted); }
/* On screens the inversion is always white-on-graphite. */
.console .sev--critical,
.terminal .sev--critical,
.engine-graph .sev--critical{ background: var(--screen-bright); border-color: var(--screen-bright); color: var(--screen-bg); }
.console .sev--high,
.terminal .sev--high,
.engine-graph .sev--high{ background: transparent; border-color: var(--screen-mid); color: var(--screen-ink); }
.console .sev--med,
.terminal .sev--med,
.engine-graph .sev--med{ background: transparent; border-color: var(--screen-line); color: var(--screen-mid); }

/* ----- 11. DENSE SPEC-SHEET TABLES (DESIGN.md 9.7) ----- */
.spec-table{ width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.spec-table th,
.spec-table td{ text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--line); }
.spec-table th{ font-family: var(--font-mono); font-size: 10.5px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); }
.spec-table td{ color: var(--ink); vertical-align: top; }
.spec-table th[scope="row"],
.spec-table td:first-child{ font-family: var(--font-mono); font-size: 0.8125rem; color: var(--ink-muted); white-space: nowrap; }
.spec-table tbody tr:nth-child(even){ background: var(--wash); }
.spec-table tbody tr:last-child th,
.spec-table tbody tr:last-child td{ border-bottom: 0; }
.spec-table--dense th,
.spec-table--dense td{ padding: 0.35rem 0.6rem; }
.table-caption{ font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-faint); margin: 0 0 var(--space-3); caption-side: top; text-align: left; }
.table-scroll{ overflow-x: auto; }

/* Mono parameter rows (used inside the engagement-model band). */
.spec-list{ border-top: 1px solid var(--line); margin-top: var(--space-4); }
.spec-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
}
.spec-k{ color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.12em; font-size: 10.5px; }
.spec-v{ color: var(--ink-muted); text-align: right; }

/* ----- 12. SECTION HEADS + SPLIT-ROW RHYTHM (DESIGN.md 9.8) ----- */
.section-head{ margin-bottom: var(--space-7); }
.section-index{ font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--ls-index); color: var(--ink-faint); margin: 0 0 var(--space-3); }
.section-title{ font-size: var(--title-1); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); max-width: 26ch; margin-bottom: var(--space-3); }
.section-sub{ font-size: var(--fs-lg); color: var(--ink-muted); max-width: 44rem; }

.split{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
.split--flip{ grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.split--flip .split-copy{ order: 2; }
.split--flip .split-visual{ order: 1; }

.split-copy .card-title{ margin-bottom: var(--space-3); }
.split-copy .card-text{ color: var(--ink-muted); max-width: 38rem; }
.split-copy .actions{ margin-top: var(--space-5); }

/* ----- 13. ENGAGEMENT-MODEL BAND - uneven columns, hairline-divided (9.9) ----- */
.model-band{ display: grid; grid-template-columns: 1.1fr 1fr 1.35fr; border-block: 1px solid var(--line); }
.model{ padding: clamp(1.5rem, 3vw, 2.25rem); min-width: 0; }
.model + .model{ border-left: 1px solid var(--line); }
.model-index{ font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-faint); margin: 0 0 var(--space-4); }
.model-state{ margin-bottom: var(--space-3); }
.model-state--open{ border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.model .card-title{ font-size: var(--title-2); margin-bottom: var(--space-2); }
.model .card-text{ color: var(--ink-muted); font-size: var(--fs-md); }
@media (max-width: 959px) {
  .model-band{ grid-template-columns: 1fr; }
  .model + .model{ border-left: none; border-top: 1px solid var(--line); }
}

/* ----- 14. TELEMETRY - dot map + event ticker (DESIGN.md 9.10) ----- */
.dot-map{ margin: 0; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-panel); padding: var(--space-4); }
.dot-map-svg{ display: block; width: 100%; height: auto; }
.map-dots{ fill: var(--ink-faint); opacity: 0.55; }
.map-route{ fill: none; stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 2 5; opacity: 0.6; }
.map-node > circle{ fill: var(--accent); }
.map-node-ring{ fill: none; stroke: var(--accent); stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: node-pulse 3s var(--ease) infinite; }
.map-node:nth-of-type(2) .map-node-ring{ animation-delay: 0.8s; }
.map-node:nth-of-type(3) .map-node-ring{ animation-delay: 1.6s; }
.map-node:nth-of-type(4) .map-node-ring{ animation-delay: 2.4s; }
@keyframes node-pulse {
  0%   { transform: scale(1); opacity: 0.7; }
  70%  { transform: scale(3.4); opacity: 0; }
  100% { transform: scale(3.4); opacity: 0; }
}
.dot-map-caption{ color: var(--ink-faint); margin: var(--space-3) 0 0; }

/* Event ticker - CSS-transform marquee, edge-faded. */
.ticker{ display: flex; align-items: stretch; border-block: 1px solid var(--line); background: var(--bg-panel); }
/* v5: the label cell is a solid inverted block anchoring the band. */
.ticker-label {
  flex: none;
  display: flex;
  align-items: center;
  padding: 0.7rem 1.1rem;
  color: var(--accent-ink);
  background: var(--accent);
  border-right: 1px solid var(--accent);
}
.ticker-viewport{ flex: 1; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.ticker-track{ display: flex; align-items: center; gap: 3rem; width: max-content; padding: 0.7rem 0; animation: ticker-scroll 48s linear infinite; }
.ticker-group{ display: flex; align-items: center; gap: 3rem; flex: none; }
.ticker-item{ font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.06em; color: var(--ink-muted); white-space: nowrap; }
/* v5: ticker highlights (engine names) are inverted mono chips. */
.ticker-item b{ font-weight: 400; color: var(--accent-ink); background: var(--accent); padding: 1px 6px; border-radius: 3px; }
@keyframes ticker-scroll {
  to { transform: translateX(-50%); }
}

/* ----- 15. TERMINAL SPEC BLOCK - screen tokens, engine sections only (9.11) ----- */
.terminal{ max-width: 44rem; background: var(--screen-bg); border: 1px solid var(--screen-line); border-radius: var(--radius-md); box-shadow: var(--shadow-screen); overflow: hidden; }
/* v5: inverted terminal title bar. */
.terminal-bar{ display: flex; align-items: center; gap: var(--space-3); padding: 0.6rem 1rem; background: var(--screen-bright); }
.terminal-dots{ display: inline-flex; gap: 6px; flex: none; }
.terminal-dots i{ width: 9px; height: 9px; border-radius: var(--radius-full); background: var(--screen-bg); }
.terminal-title{ font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--screen-bg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.terminal-screen{ padding: var(--space-4); font-family: var(--font-mono); font-size: 12.5px; line-height: 1.75; }
.terminal-line{ margin: 0; min-height: 1.75em; white-space: pre-wrap; overflow-wrap: anywhere; }
.terminal-prompt{ color: var(--screen-bright); }
.terminal-caret{ display: inline-block; width: 0.55em; height: 1.05em; margin-left: 2px; vertical-align: text-bottom; background: var(--screen-bright); animation: caret-blink 1.1s steps(1) infinite; }
@keyframes caret-blink {
  50% { opacity: 0; }
}
.t-cmd{ color: var(--screen-ink); }
.t-dim{ color: var(--screen-dim); }
.t-out{ color: var(--screen-mid); }
.t-ok{ color: var(--screen-bright); }  /* emphasis by brightness, never hue */

/* ----- 17. DOCTRINE PULLQUOTE - own voice only (DESIGN.md 9.14) ----- */
.pullquote{ position: relative; margin: 0; padding-left: var(--space-6); font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.5rem, 3vw, 2.4rem); line-height: 1.3; color: var(--ink); max-width: 30rem; }
.pullquote::before{ content: "\201C"; position: absolute; left: 0; top: -0.12em; font-size: 2.6em; line-height: 1; color: var(--accent); }
.pullquote-source{ margin-top: var(--space-5); font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: 0.04em; color: var(--ink-muted); }
.pullquote-source::before{ content: "\2014"; color: var(--ink); margin-right: 0.5em; }

/* ----- 18. PANELS, CARDS, CONTACT CARDS (support, never the rhythm) ----- */
.panel{ background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius-md); padding: clamp(1.5rem, 3vw, 2rem); }

.card-title{ font-size: var(--title-2); letter-spacing: var(--ls-heading); margin-bottom: var(--space-2); }
.card-text{ color: var(--ink-muted); }
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding: 0.35rem 0.65rem;
  margin-left: -0.65rem;
  border-radius: var(--radius-sm);
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
/* v5: card-link hover = full inversion */
.card-link:hover{ background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.card-link .btn-arrow{ font-family: var(--font-mono); font-size: 0.85em; }

.contact-card{ display: flex; flex-direction: column; gap: var(--space-2); }
.contact-label{ font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-muted); margin: 0; }
.contact-value {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  color: var(--ink);
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  margin-left: -0.5rem;
  border-radius: var(--radius-sm);
  overflow-wrap: anywhere;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
/* v5: hover = full inversion */
.contact-value:hover{ background: var(--accent); color: var(--accent-ink); }
.contact-note{ font-size: var(--fs-md); color: var(--ink-muted); margin: 0; }

/* ----- 19. ENGINE VISUAL PRIMITIVES - PRETEXT thread (grayscale) ----- */
.thread{ display: flex; flex-direction: column; gap: var(--space-3); max-width: 26rem; }
.msg{ border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-panel); padding: var(--space-3) var(--space-4); max-width: 88%; }
.msg-meta{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 var(--space-2); }
.msg-text{ font-size: var(--fs-md); color: var(--ink); margin: 0; }
.msg--target{ border-color: var(--line-strong); }
.msg--target .msg-meta{ color: var(--ink-muted); }
.msg--lure{ border-color: var(--accent); background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 30px -10px var(--glow); align-self: flex-end; }
.msg--lure .msg-meta{ color: var(--accent-ink); opacity: 0.7; }
.msg--lure .msg-text{ color: var(--accent-ink); }
.msg--agent{ align-self: flex-start; }
.msg--operator{ align-self: center; max-width: 100%; }

/* ----- 20. SITE FOOTER (DESIGN.md 9.2) ----- */
.site-footer{ background: var(--bg-panel); border-top: 1px solid var(--line); padding-block: var(--space-9) var(--space-6); position: relative; }
/* 3 columns since v5 (brand | nav | engines); contact lives in the
   .footer-contact destination block below (20b). */
.footer-grid{ display: grid; grid-template-columns: 2fr 1fr 1.3fr; gap: var(--space-7) var(--space-6); }
.footer-tagline{ font-size: var(--fs-md); color: var(--ink-muted); max-width: 30rem; margin: var(--space-4) 0 0; }
.footer-heading{ font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-faint); margin: 0 0 var(--space-4); }
.footer-links{ display: flex; flex-direction: column; gap: var(--space-3); }
.footer-links a{ color: var(--ink-muted); text-decoration: none; font-size: var(--fs-md); transition: color var(--t-fast) var(--ease); }
.footer-links a:hover{ color: var(--ink); }

/* ----- 20b. FOOTER CONTACT BLOCK (v5) - id="contact" destination -----
   Every engagement CTA ends at index.html#contact. Full class docs:
   _partials/reference.html + DESIGN.md 9.2. Reuses .mono-label,
   .contact-label, .contact-note. */
.footer-contact {
  margin-top: var(--space-8);
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius-md);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  scroll-margin-top: calc(var(--header-h) + var(--space-3));
}
.footer-contact-grid{ display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: var(--space-6) var(--space-7); align-items: start; }
.footer-contact-title{ font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: var(--ls-display); margin: 0 0 var(--space-3); }
.footer-contact-channels{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.footer-channel + .footer-channel{ border-left: 1px solid var(--line); padding-left: var(--space-6); }
.footer-channel-mail {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--ink);
  text-decoration: none;
  padding: 0.25rem 0.55rem;
  margin: 0 0 var(--space-2) -0.55rem;
  border-radius: var(--radius-sm);
  overflow-wrap: anywhere;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
/* v5: hover = full inversion */
.footer-channel-mail:hover{ background: var(--accent); color: var(--accent-ink); }
.footer-pgp{ text-transform: uppercase; color: var(--ink-faint); margin: var(--space-3) 0 0; overflow-wrap: anywhere; }
.footer-bottom{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.footer-legal,
.footer-domain{ font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.06em; color: var(--ink-faint); margin: 0; }
.footer-domain{ color: var(--ink-muted); }

/* Split rows + footer collapse share the 899px breakpoint (merged). */
@media (max-width: 899px) {
  .split,
  .split--flip{ grid-template-columns: minmax(0, 1fr); }
  .split--flip .split-copy{ order: 1; }
  .split--flip .split-visual{ order: 2; }

  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .footer-contact-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 559px) {
  .footer-grid{ grid-template-columns: 1fr; }
  .footer-contact-channels{ grid-template-columns: 1fr; }
  .footer-channel + .footer-channel{ border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: var(--space-5); }
}

/* ----- 21. SCROLL REVEAL - [data-reveal] -> .is-revealed (JS contract, 8) ----- */
.js [data-reveal]{ opacity: 0; transform: translateY(22px); transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease); will-change: opacity, transform; }
.js [data-reveal].is-revealed{ opacity: 1; transform: none; }

/* ----- 22. REDUCED MOTION - everything stops (DESIGN.md 8, 9.10) ----- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero-radar { animation: none; opacity: 0.04; }
  .status-dot,
  .console-live-dot,
  .console-agent.is-running .agent-dot { animation: none; }
  .path-live { animation: none; stroke-dasharray: none; }
  .terminal-caret { animation: none; }
  .map-node-ring { animation: none; opacity: 0.4; }
  .ticker-track { animation: none; }

  .btn,
  .btn .btn-arrow,
  .nav-link,
  .nav-cta,
  .theme-toggle,
  .status-band-link,
  .contact-value,
  .card-link,
  .footer-channel-mail { transition: none; }
  .site-nav { transition: none; }
}