/* ThirdGuard.com — first iteration prototype
   Direction: ink + paper base, one signal accent, bracket motif from the wordmark.
   Colours and fonts are prototype choices for consultant review, not an approved identity. */

/* ---------- Colour tokens ----------
   Derived tokens first, then palette values. Safety is the site palette (on :root).
   The other variations apply via data-palette on <html> (palettes/<key>/ pages)
   or on any element (the palettes/ hub cards). */
:root, [data-palette] {
  --signal: var(--accent);                 /* contextual accent; dark sections remap it */
  --signal-fg: var(--on-accent);           /* text on an accent-filled button */
  --accent-on-ink: var(--accent);          /* accent used on dark sections */
  --accent-on-ink-fg: var(--on-accent);
  --band-bg: var(--accent);                /* closing call-to-action band */
  --band-fg: var(--on-accent);
  --band-accent: var(--on-accent);
  --band-dot: var(--paper);                /* closing full stop, echoes the hero's accent dot */
  --on-ink-line: color-mix(in srgb, var(--on-ink) 14%, transparent);
  --on-paper-line: color-mix(in srgb, var(--on-paper) 14%, transparent);
}

/* Graphite: the chosen palette. Cool engineering greys with a red-leaning orange. */
:root, [data-palette="graphite"] {
  --ink: #111316; --ink-2: #181b1f; --ink-3: #252930;
  --paper: #eef0f0; --paper-2: #e0e3e4;
  --accent: #ff5410; --accent-text: #b03806; --on-accent: #111316;
  --on-ink: #eef0f0; --on-ink-muted: #9aa0a6;
  --on-paper: #111316; --on-paper-muted: #545a61;
}

/* Comparison variations */
[data-palette="signal"] {
  --ink: #0d0e0c; --ink-2: #161815; --ink-3: #22251f;
  --paper: #f1eee6; --paper-2: #e6e2d6;
  --accent: #ff5b1f; --accent-text: #b33a09; --on-accent: #0d0e0c;
  --on-ink: #f1eee6; --on-ink-muted: #a3a197;
  --on-paper: #0d0e0c; --on-paper-muted: #57554e;
}
[data-palette="furnace"] {
  --ink: #1b1410; --ink-2: #241b15; --ink-3: #33271f;
  --paper: #efe6d6; --paper-2: #e3d7c2;
  --accent: #ff6a1a; --accent-text: #a8430c; --on-accent: #1b1410;
  --on-ink: #f3eadb; --on-ink-muted: #b0a290;
  --on-paper: #1b1410; --on-paper-muted: #62564a;
}
[data-palette="safety"] {
  --ink: #000000; --ink-2: #0b0b0b; --ink-3: #1c1c1c;
  --paper: #ffffff; --paper-2: #f2f2f0;
  --accent: #ff4f00; --accent-text: #b83800; --on-accent: #000000;
  --on-ink: #ffffff; --on-ink-muted: #a0a0a0;
  --on-paper: #000000; --on-paper-muted: #555555;
}
[data-palette="ember"] {
  --ink: #24100a; --ink-2: #2e150d; --ink-3: #3d1c11;
  --paper: #f7ede4; --paper-2: #efdfd1;
  --accent: #ff5b1f; --accent-text: #ad380a; --on-accent: #24100a;
  --on-ink: #fbeee4; --on-ink-muted: #c99f8a;
  --on-paper: #24100a; --on-paper-muted: #6b4a3d;
}
[data-palette="field"] {
  --ink: #ff5b1f; --ink-2: #f4521a; --ink-3: #e44a14;
  --paper: #f4efe6; --paper-2: #e9e1d3;
  --accent: #ff5b1f; --accent-text: #b33a09; --on-accent: #0d0e0c;
  --on-ink: #0d0e0c; --on-ink-muted: #46200f;
  --on-paper: #0d0e0c; --on-paper-muted: #57554e;
  --accent-on-ink: #fbf6ee; --accent-on-ink-fg: #0d0e0c;
  --band-bg: #0d0e0c; --band-fg: #f4efe6; --band-accent: #ff5b1f; --band-dot: #ff5b1f;
}

/* Dark sections remap the contextual accent */
.s-ink, .s-ink-2, .site-header, .site-footer, .portrait {
  --signal: var(--accent-on-ink);
  --signal-fg: var(--accent-on-ink-fg);
}

:root {
  --font-sans: "Archivo", "Inter", "Helvetica Neue", Arial, sans-serif; /* Inter only fills in Greek agent letters */
  --font-mono: "IBM Plex Mono", "Inter", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --wrap: 1280px;
  --gutter: clamp(16px, 4vw, 48px);
  --section-y: clamp(72px, 10vw, 144px);
  --chamfer: 10px;
  --header-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--on-paper);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 650; }

:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 100;
  background: var(--accent); color: var(--on-accent); padding: 8px 14px; font-weight: 600;
}
.skip-link:focus { top: 12px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

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

/* ---------- Surfaces ---------- */
.s-ink { background: var(--ink); color: var(--on-ink); }
.s-ink-2 { background: var(--ink-2); color: var(--on-ink); }
.s-paper { background: var(--paper); color: var(--on-paper); }
.s-paper-2 { background: var(--paper-2); color: var(--on-paper); }
.s-signal { background: var(--band-bg); color: var(--band-fg); --signal: var(--band-accent); --signal-fg: var(--band-fg); }

.section { padding-block: var(--section-y); }
.section + .section.s-paper, .s-paper + .s-paper { border-top: 1px solid var(--on-paper-line); }

.muted { color: var(--on-paper-muted); }
.s-ink .muted, .s-ink-2 .muted { color: var(--on-ink-muted); }

/* ---------- Type ---------- */
.display {
  font-size: clamp(44px, 7.6vw, 116px);
  line-height: 0.94;
  letter-spacing: -0.025em;
  font-weight: 640;
  font-variation-settings: "wdth" 112;
}
.display .accent-dot { color: var(--signal); }
.s-signal .accent-dot { color: var(--band-dot); }

.h2 {
  font-size: clamp(32px, 4.6vw, 64px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 640;
  font-variation-settings: "wdth" 110;
}
.h3 {
  font-size: clamp(21px, 1.9vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 620;
  font-variation-settings: "wdth" 106;
}
.statement {
  font-size: clamp(24px, 2.9vw, 40px);
  line-height: 1.18;
  letter-spacing: -0.015em;
  font-weight: 450;
  font-variation-settings: "wdth" 104;
  max-width: 28ch;
}
.statement-lg { font-size: clamp(30px, 4.2vw, 60px); line-height: 1.08; max-width: 24ch; font-weight: 500; }
.lede {
  font-size: clamp(18px, 1.55vw, 22px);
  line-height: 1.45;
  max-width: 40ch;
}

.kicker {
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 560;
  font-variation-settings: "wdth" 106;
  color: var(--signal);
  margin-bottom: 24px;
}

.mono { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.02em; }

/* ---------- Prototype review markers ---------- */
/* Unverified copy-deck inputs. Plain by default; add ?markers=1 to any URL to highlight them. */
html.show-markers .tbc {
  background: color-mix(in srgb, var(--signal) 13%, transparent);
  outline: 1px dashed var(--signal);
  outline-offset: 1px;
  padding: 0 0.2em;
}
.tbc { font-style: normal; }

.concept-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
}
.concept-label::before {
  content: ""; width: 7px; height: 7px; background: var(--signal);
  clip-path: polygon(30% 0, 100% 0, 100% 70%, 70% 100%, 0 100%, 0 30%);
}

/* ---------- Buttons & links ---------- */
.btn {
  --c: var(--chamfer);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 15px 22px 15px 22px;
  font-family: var(--font-sans); font-size: 15px; font-weight: 600;
  letter-spacing: 0.01em; text-decoration: none; line-height: 1;
  background: var(--signal); color: var(--signal-fg);
  border: 0; cursor: pointer;
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  transition: background-color 0.18s ease, transform 0.18s ease;
}
.btn:hover { background: color-mix(in srgb, var(--signal) 86%, white); }
.btn:active { transform: translateY(1px); }
.btn-ink { background: var(--ink); color: var(--on-ink); }
.btn-ink:hover { background: var(--ink-3); }
.btn-paper { background: var(--paper); color: var(--on-paper); }
.btn-paper:hover { background: #fff; }

/* Text link: a soft underline that goes solid on hover */
.link-arrow {
  display: inline-block; padding-block: 12px;
  font-weight: 600; font-size: 15px;
  text-decoration: underline 1px; text-underline-offset: 5px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color .18s ease;
}
.link-arrow:hover { text-decoration-color: currentColor; }

.actions { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; margin-top: 40px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--ink) 92%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  color: var(--on-ink);
  border-bottom: 1px solid var(--on-ink-line);
}
.site-header .wrap { display: flex; align-items: center; gap: 32px; height: var(--header-h); }

/* The wordmark in two layers, so the brackets can take the accent: letters in the text colour, brackets in --signal
   (orange; on a palette whose dark sections are orange, the remapped light accent). Each layer carries its own mask,
   since a mask on .logo itself would also clip the other layer. */
.logo {
  display: block; position: relative;
  width: 152px;
  aspect-ratio: 990 / 155;
}
.logo::before, .logo::after { content: ""; position: absolute; inset: 0; }
.logo::before {
  background: currentColor;
  -webkit-mask: url("../img/thirdguard-logo-letters.svg") no-repeat center / contain;
  mask: url("../img/thirdguard-logo-letters.svg") no-repeat center / contain;
}
.logo::after {
  background: var(--signal);
  -webkit-mask: url("../img/thirdguard-logo-brackets.svg") no-repeat center / contain;
  mask: url("../img/thirdguard-logo-brackets.svg") no-repeat center / contain;
}
.logo-link { color: var(--on-ink); flex-shrink: 0; padding-block: 8px; }

.nav { display: flex; gap: 30px; margin-left: auto; align-items: center; }
.nav a {
  text-decoration: none; font-size: 15px; font-weight: 500; color: var(--on-ink-muted);
  position: relative; padding-block: 6px; transition: color .15s ease;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--on-ink); }
.nav a[aria-current="page"]::before { content: "["; position: absolute; left: -0.6em; color: var(--signal); }
.nav a[aria-current="page"]::after { content: "]"; position: absolute; right: -0.6em; color: var(--signal); }
.site-header .btn { padding: 12px 18px; font-size: 14px; }
.header-cta { margin-left: auto; white-space: nowrap; }
@media (max-width: 480px) {
  .site-header .wrap { gap: 16px; }
  .site-header .header-cta { padding: 10px 14px; font-size: 13px; }
}

.menu-toggle {
  display: none; margin-left: auto;
  background: none; border: 1px solid var(--on-ink-line); color: var(--on-ink);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  padding: 10px 14px; cursor: pointer;
}

@media (max-width: 900px) {
  .menu-toggle { display: inline-flex; }
  .nav-wrap {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--ink); border-bottom: 1px solid var(--on-ink-line);
    padding: 8px var(--gutter) 28px;
  }
  .nav-wrap.open { display: block; }
  .nav { flex-direction: column; align-items: flex-start; gap: 0; margin: 0 0 20px; }
  .nav a { font-size: 22px; padding-block: 12px; color: var(--on-ink); width: 100%; border-bottom: 1px solid var(--on-ink-line); }
  .nav a[aria-current="page"]::before, .nav a[aria-current="page"]::after { content: none; }
  .nav a[aria-current="page"] { color: var(--signal); }
}
@media (min-width: 901px) {
  .nav-wrap { display: flex; align-items: center; gap: 36px; margin-left: auto; }
}

/* ---------- Hero ---------- */
.hero { padding-block: clamp(40px, 5vw, 80px) clamp(48px, 6vw, 96px); position: relative; overflow: hidden; }
.hero-split {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 4.5vw, 80px); align-items: center;
}
.hero-copy { padding-block: 16px; }
.hero .display { font-size: clamp(44px, 5.4vw, 86px); }
.hero .display .line { display: block; }
/* Longer hero headlines get a wider copy column and a slightly smaller size */
.hero .display-long { font-size: clamp(40px, 4.6vw, 76px); }
.hero-split:has(.display-long) { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
.hero .lede { color: var(--on-ink); margin-top: clamp(24px, 2.6vw, 36px); }
@media (max-width: 960px) {
  .hero-split, .hero-split:has(.display-long) { grid-template-columns: 1fr; }
  .hero .display { font-size: clamp(44px, 9vw, 80px); }
}
@media (max-width: 700px) { .hero .display .line { display: inline; } }

.page-hero { padding-top: clamp(56px, 9vw, 128px); padding-bottom: clamp(56px, 8vw, 112px); }
.page-hero .display { font-size: clamp(42px, 6.6vw, 100px); max-width: 16ch; }
.page-hero .lede { margin-top: 32px; color: var(--on-ink-muted); }
.page-hero .lede strong { color: var(--on-ink); font-weight: 500; }

/* Hero art (see HERO_ART in site.js) */
.hero-figure { margin: 0; }
.hero-art { position: relative; height: clamp(380px, 40vw, 580px); }
.hero-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-figure picture, .hero-photo { display: block; width: 100%; height: auto; }
/* Desktop: the photo bleeds off the right edge of the page, cropped taller to match the headline */
@media (min-width: 961px) {
  .hero-figure--photo { margin-right: calc(-1 * (max(0px, (100vw - var(--wrap)) / 2) + var(--gutter))); }
  .hero-figure--photo .hero-photo { aspect-ratio: 4 / 3; object-fit: cover; object-position: left center; }
}
.hero-figure figcaption { padding-top: 12px; color: var(--on-ink-muted); font-size: 13px; max-width: 52ch; }
@media (max-width: 960px) { .hero-art { height: clamp(300px, 72vw, 460px); } }

/* Type-only hero option */
.hero--type .hero-split { grid-template-columns: 1fr; }
.hero--type .display { font-size: clamp(48px, 7.4vw, 116px); }
.hero--type .hero-copy { padding-block: clamp(24px, 4vw, 64px); }
.hero--type .lede { max-width: 46ch; }

/* Editorial photography: one image per page, on dark sections only */
.page-hero-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 4.5vw, 80px); align-items: center; }
.page-hero-split .display { font-size: clamp(42px, 5.4vw, 84px); }
.page-hero-photo { position: relative; margin: 0; }
.page-hero-photo img { display: block; width: 100%; height: auto; }
@media (max-width: 860px) { .page-hero-split { grid-template-columns: 1fr; } }

/* ---------- Brackets (graphic system) ---------- */
.bracketed { position: relative; padding: clamp(20px, 3vw, 40px) clamp(24px, 3.4vw, 48px); }
.bracketed::before, .bracketed::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(12px, 1.4vw, 20px);
  border: 2px solid var(--signal);
}
.bracketed::before { left: 0; border-right: 0; }
.bracketed::after { right: 0; border-left: 0; }
.bracketed-label {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  background: inherit; padding: 0 12px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--signal);
  white-space: nowrap;
}

/* ---------- Layout helpers ---------- */
.split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 96px); }
.split-even { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 96px); align-items: start; }
.split-form { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
@media (max-width: 860px) { .split, .split-even, .split-form { grid-template-columns: 1fr; } }

.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: clamp(40px, 5vw, 72px); }
.section-head .h2 { max-width: 16ch; }
.section-head .h2-stack { max-width: none; }
.h2-stack span { display: block; }

/* ---------- Pillars ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--on-paper); }
.pillar { padding: 32px 28px 8px 0; }
.pillar + .pillar { border-left: 1px solid var(--on-paper-line); padding-left: 28px; }
.pillar .h3 { margin-bottom: 16px; }
.pillar p { color: var(--on-paper-muted); }
@media (max-width: 860px) {
  .pillars { grid-template-columns: 1fr; }
  .pillar, .pillar + .pillar { border-left: 0; padding: 28px 0; border-bottom: 1px solid var(--on-paper-line); }
}

/* ---------- Fleet diagram (home) ---------- */
/* Desktop draws the SVG; narrower screens show the same content as a stacked list. */
.fleet { margin: 0; }
.fleet-diagram { display: block; width: 100%; height: auto; overflow: visible; }
.fleet-lines path { fill: none; stroke: color-mix(in srgb, var(--on-ink) 38%, transparent); stroke-width: 1.5; }
.fleet-head { fill: color-mix(in srgb, var(--on-ink) 55%, transparent); }
.fleet-box { fill: var(--ink-2); stroke: var(--on-ink-line); stroke-width: 1.5; }
.fleet-box.is-you { stroke: var(--signal); stroke-width: 2; }
.fleet-bracket { fill: none; stroke: var(--signal); stroke-width: 3; }
.fleet-title, .fleet-sub, .fleet-pill-text { text-anchor: middle; }
.fleet-title { fill: var(--on-ink); font-size: 19px; font-weight: 600; font-variation-settings: "wdth" 106; }
.fleet-sub { fill: var(--on-ink-muted); font-size: 14.5px; }
.fleet-pill { fill: var(--ink); stroke: color-mix(in srgb, var(--on-ink) 38%, transparent); stroke-width: 1.5; }
.fleet-pill-text { fill: var(--on-ink-muted); font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; }

.fleet-motion path { fill: none; stroke: none; }
.fleet-chip { fill: var(--on-ink-muted); font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; }
.fleet-dot { fill: color-mix(in srgb, var(--on-ink) 75%, transparent); }
.fleet-dot.is-alert { fill: var(--signal); }
.fleet-box, .fleet-pill { transition: stroke .3s ease; }
.fleet-box.is-alert, .fleet-pill.is-alert { stroke: var(--signal); stroke-width: 2; }
.fleet-sub.is-alert, .fleet-pill-text.is-alert { fill: var(--signal); }
.fleet-chip { text-anchor: middle; }
.fleet-chip.fleet-chip-end { text-anchor: end; }
.fleet-chip.fleet-chip-start { text-anchor: start; }
/* Venue logo in each agent box, inside the wordmark's brackets: a ThirdGuard agent on that venue */
.fleet-venue-bracket { fill: none; stroke: var(--signal); stroke-width: 2; }
.tl.fleet-venue-logo { height: 100%; width: 100%; aspect-ratio: auto; background: var(--on-ink); }
.fleet-venue-mark { fill: var(--on-ink); }

/* Signal monitor: a funnel of faint guide curves with data packets flowing down into the arrow.
   The thread behind a firing signal lights up in accent and its packets speed up. */
.fleet-thread-base { fill: none; stroke: color-mix(in srgb, var(--on-ink) 9%, transparent); stroke-width: 1; transition: stroke .3s ease; }
.fleet-flow { fill: none; stroke: color-mix(in srgb, var(--on-ink) 62%, transparent); stroke-width: 1.5; stroke-linecap: round;
  animation: fleet-flow 1.6s linear infinite; animation-play-state: paused; }
.fleet-thread:nth-child(3n) .fleet-flow { stroke: color-mix(in srgb, var(--on-ink) 34%, transparent); }
.fleet-diagram.is-live .fleet-flow { animation-play-state: running; }
@keyframes fleet-flow { to { stroke-dashoffset: var(--o); } }
.fleet-thread.is-alert .fleet-thread-base { stroke: color-mix(in srgb, var(--signal) 55%, transparent); stroke-width: 1.5; }
.fleet-thread.is-alert .fleet-flow { stroke: var(--signal); stroke-width: 2.25; animation-duration: .45s !important; }
/* Decision log: each step of a decision, with its reason; only the newest line's step is accent */
.fleet-log-rule { stroke: var(--on-ink-line); stroke-width: 1; }
.fleet-log-row { font-family: var(--font-mono); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.fleet-log-time { fill: color-mix(in srgb, var(--on-ink-muted) 70%, transparent); }
.fleet-log-tag { fill: var(--on-ink-muted); letter-spacing: .06em; }
.fleet-log-msg { fill: color-mix(in srgb, var(--on-ink) 82%, transparent); }
.fleet-log-row.is-new { animation: fleet-log-in .35s ease-out; }
.fleet-log-row.is-new .fleet-log-tag { fill: var(--signal); }
.fleet-log-row.is-new .fleet-log-msg { fill: var(--on-ink); }
@keyframes fleet-log-in { from { opacity: 0; } }
.fleet-monitor-cat { fill: var(--on-ink-muted); font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; text-anchor: middle; opacity: .75; }
.fleet-monitor-cat.is-alert { fill: var(--signal); opacity: 1; }

/* Allocation rings: shades follow segment order within each ring; the segment being cut turns accent */
.fleet-diagram, .fleet-list {
  --fl-s1: color-mix(in srgb, var(--on-ink) 88%, transparent);
  --fl-s2: color-mix(in srgb, var(--on-ink) 60%, transparent);
  --fl-s3: color-mix(in srgb, var(--on-ink) 38%, transparent);
  --fl-s4: color-mix(in srgb, var(--on-ink) 22%, transparent);
}
.fleet-seg { fill: none; stroke-width: 12; transition: stroke .3s ease; }
.fleet-seg.s1 { stroke: var(--fl-s1); } .fleet-key .s1 { fill: var(--fl-s1); }
.fleet-seg.s2 { stroke: var(--fl-s2); } .fleet-key .s2 { fill: var(--fl-s2); }
.fleet-seg.s3 { stroke: var(--fl-s3); } .fleet-key .s3 { fill: var(--fl-s3); }
.fleet-seg.s4 { stroke: var(--fl-s4); } .fleet-key .s4 { fill: var(--fl-s4); }
.fleet-seg.is-alert { stroke: var(--signal); }
.fleet-key rect { transition: fill .3s ease; }
.fleet-key.is-alert rect { fill: var(--signal); }
.fleet-key-name { fill: var(--on-ink-muted); font-size: 12.5px; }
.fleet-key-pct { fill: var(--on-ink); font-family: var(--font-mono); font-size: 12.5px; text-anchor: end; font-variant-numeric: tabular-nums; }
.fleet-key.is-alert .fleet-key-name, .fleet-key.is-alert .fleet-key-pct { fill: var(--signal); }
.fleet-summary { margin-top: clamp(40px, 5vw, 64px); padding-top: 28px; border-top: 1px solid var(--on-ink-line); max-width: 64ch; }
.fleet-summary .lede + .lede { margin-top: 14px; }
.fleet-list { list-style: none; margin: 0; padding: 0; }
/* Desktop: kept for screen readers only, since the SVG is aria-hidden */
@media (min-width: 1000px) {
  .fleet-list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
.fleet-list li { position: relative; padding: 18px 20px; border: 1px solid var(--on-ink-line); background: var(--ink-2); }
.fleet-list li + li { margin-top: 28px; }
.fleet-list li + li::before { content: ""; position: absolute; left: 50%; top: -28px; height: 28px; border-left: 1.5px solid color-mix(in srgb, var(--on-ink) 38%, transparent); }
.fleet-list b { display: block; font-size: 18px; font-weight: 600; font-variation-settings: "wdth" 106; }
.fleet-list li > span { display: block; margin-top: 4px; color: var(--on-ink-muted); font-size: 15px; }
.fleet-list .is-you { border-color: var(--signal); }
.fleet-list .is-guard { border-left: 3px solid var(--signal); border-right: 3px solid var(--signal); }
.fleet-list-agent { padding-right: 96px !important; }
.fleet-list .fleet-list-ring { position: absolute; top: 50%; right: 20px; width: 60px; height: 60px; margin: -30px 0 0; border-radius: 50%;
  -webkit-mask: radial-gradient(circle, transparent 17px, #000 18px); mask: radial-gradient(circle, transparent 17px, #000 18px); }
.fleet-list .fleet-list-alloc { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .02em; }
@media (max-width: 999px) { .fleet-diagram { display: none; } }

/* ---- EXPERIMENT: portfolio value over time (2 November 2026). To revert, delete this block, the JS block
   marked EXPERIMENT in site.js, and undo the wider OS box (see README). No figures, by design (see README). ---- */
.fleet-growth-rule { stroke: var(--on-ink-line); stroke-width: 1; }
.fleet-growth-area { fill: color-mix(in srgb, var(--on-ink) 7%, transparent); }
.fleet-growth-line { fill: none; stroke: color-mix(in srgb, var(--on-ink) 85%, transparent); stroke-width: 1.75; stroke-linejoin: round; }
.fleet-growth-head { fill: var(--on-ink); }
.fleet-growth-dot { fill: var(--signal); }
/* ---- END EXPERIMENT ---- */

/* Thirty agents (second press): the ten tiles hand over to stacks of three mini tiles per column */
.fl-30, .fl-tiles10 { transition: opacity .35s ease, visibility 0s; }
.fleet:not(.is-30) .fl-30, .fleet.is-30 .fl-tiles10 { opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s .35s; }
.fleet-mini .fleet-seg { stroke-width: 5; }
.fleet-mini-title { fill: var(--on-ink); font-size: 11px; font-weight: 600; font-variation-settings: "wdth" 106; }
.fleet-mini-sub { fill: var(--on-ink-muted); font-size: 9.5px; }

/* Scale strategies: a button centred under the diagram. Pressing it folds A–C into compact tiles and deploys
   seven more beside them. Scaling is one way, so the button fades out once used. */
.fleet { position: relative; }
.fleet-scale[hidden] { display: none; }
/* Centred on the diagram's spine (SVG x 560 in a viewBox starting at 80, 1050 wide), under the risk checks */
.fleet-scale { display: flex; width: fit-content; margin: clamp(32px, 4vw, 56px) 0 0 calc(480 / 1050 * 100%); translate: -50% 0; }
.fleet-scale { transition: background-color .18s ease, transform .18s ease, opacity .35s ease, visibility 0s; }
.section:has(.fleet.is-30) .fleet-scale { opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s .35s; }

.fl-3, .fl-10 { transition: opacity .35s ease, visibility 0s; }
.fleet.is-scaled .fl-3, .fleet:not(.is-scaled) .fl-10 { opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s .35s; }
.fleet-tile { opacity: 0; visibility: hidden; transform: translateY(12px) scale(.9); transform-box: fill-box; transform-origin: 50% 40%;
  transition: opacity .3s ease, transform .3s ease, visibility 0s .3s; }
.fleet-tile.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease, transform .6s cubic-bezier(.2, .9, .25, 1.15), visibility 0s; }
.fleet-tile .fleet-seg { stroke-width: 9; }
.fleet-tile-title { fill: var(--on-ink); font-size: 15px; font-weight: 600; text-anchor: middle; font-variation-settings: "wdth" 106; }
.fleet-tile-type { fill: var(--on-ink-muted); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .03em; text-anchor: middle; }
.fleet-tile-sub { fill: var(--on-ink-muted); font-size: 11.5px; text-anchor: middle; }
.fleet-tile-sub.is-alert { fill: var(--signal); }
.fleet-tile .fleet-box.is-new { stroke: var(--signal); stroke-width: 2; }
/* At ten or thirty agents a signal sweeps along the arrows (stopping at the arrowheads) instead of landing dots on
   the agents; only the agents it moves flash, with an orange outline */
.fleet-sweep { fill: none; stroke: var(--on-ink-muted); stroke-width: 2; stroke-linecap: round; stroke-dashoffset: var(--len);
  animation: fleet-sweep var(--ms) linear forwards, fleet-sweep-fade .5s ease-out var(--ms) forwards; }
.fleet-sweep.is-alert { stroke: var(--signal); stroke-width: 2.25; }
@keyframes fleet-sweep { to { stroke-dashoffset: 0; } }
@keyframes fleet-sweep-fade { to { opacity: 0; } }
.fleet-box.is-flash { animation: fleet-flash .9s ease-out; }
/* Outline only: tinting the dark fill with orange reads as red */
@keyframes fleet-flash { from { stroke: var(--signal); stroke-width: 3; } }

/* Scaling is desktop-only: below 1000px the button is hidden and the list stays at three agents.
   On desktop the D–J list items exist for screen readers once scaled. */
.fleet:not(.is-scaled) .fleet-list .fl-10 { display: none; }
@media (max-width: 999px) { .fleet-scale, .fleet-list-slot { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  .fl-3, .fl-10, .fl-30, .fl-tiles10, .fleet-tile, .fleet-tile.is-on, .fleet-scale { transition: none !important; animation: none !important; }
}

/* Live list: below 1000px site.js adds .is-animated and plays the same scenes on the list, sized to fit one phone screen.
   Without it (no script, reduced motion, screen readers on desktop) the list stays as above. */
.fleet-list:not(.is-animated) .fleet-list-readout,
.fleet-list:not(.is-animated) .fleet-list-status,
.fleet-list:not(.is-animated) .fleet-list-log { display: none; }
.fleet-list li { transition: border-color .3s ease; }
.fleet-list li.is-alert { border-top-color: var(--signal); border-bottom-color: var(--signal); }
.fleet-list li.is-alert:not(.is-guard) { border-color: var(--signal); }
.fleet-list span.is-alert { color: var(--signal); }

/* Layout: one grid, with the three agents side by side as tiles so "one acts, two hold" reads at a glance.
   Each card keeps its title and live line; its longer copy (.fleet-list-more) is hidden visually but stays for screen readers. */
.fleet-list.is-animated { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px;
  --fl-line: color-mix(in srgb, var(--on-ink) 38%, transparent); --fl-dot: color-mix(in srgb, var(--on-ink) 80%, transparent); }
.fleet-list.is-animated > li { grid-column: 1 / -1; padding: 10px 14px; }
.fleet-list.is-animated li + li { margin-top: 0; }
.fleet-list.is-animated b { font-size: 16px; line-height: 1.3; }
/* The operating system's line swaps to "Learned · …", which can run to two lines, so it keeps room for two */
.fleet-list.is-animated #fll-sub-os { font-size: 13.5px; min-height: calc(2 * 1.55em); }
.fleet-list.is-animated .fleet-list-more { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.fleet-list.is-animated > .fleet-list-agent { grid-column: auto; padding: 10px 6px !important; text-align: center; }
.fleet-list.is-animated > .fleet-list-agent b { font-size: 14px; line-height: 1.25; }
.fleet-list.is-animated .fleet-list-ring { position: static; display: block; width: 42px; height: 42px; margin: 0 auto 6px;
  -webkit-mask: radial-gradient(circle, transparent 11px, #000 12px); mask: radial-gradient(circle, transparent 11px, #000 12px); }

.fleet-list .fleet-list-readout { display: flex; gap: 10px; align-items: baseline; margin: 6px 0 0; padding: 5px 10px;
  border: 1px solid var(--on-ink-line); background: var(--ink); font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .04em;
  white-space: nowrap; overflow: hidden; transition: border-color .3s ease; }
.fleet-list li.is-alert .fleet-list-readout { border-color: var(--signal); }
.fleet-list-readout > :last-child { overflow: hidden; text-overflow: ellipsis; }
.fleet-list .fleet-list-cat { flex: none; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.fleet-list .fleet-list-cat.is-alert { opacity: 1; }
/* Status lines keep one line of room so cards don't change height mid-scene */
.fleet-list .fleet-list-status { min-height: 1.5em; margin-top: 4px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em;
  line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fleet-list.is-animated > .fleet-list-agent .fleet-list-status { margin-top: 6px; font-size: 11.5px; letter-spacing: 0; }
/* Decision log: the newest three rows, one line each */
.fleet-list .fleet-list-log { margin-top: 6px; padding-top: 4px; border-top: 1px solid var(--on-ink-line);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .02em; font-variant-numeric: tabular-nums; line-height: 1.5; }
.fleet-list-log-row { display: grid; grid-template-columns: auto 6.5em minmax(0, 1fr); gap: 0 10px; padding: 1px 0; }
.fleet-list-log-row > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fleet-list-log-row > :nth-child(1) { color: color-mix(in srgb, var(--on-ink-muted) 70%, transparent); }
.fleet-list-log-row > :nth-child(2) { color: var(--on-ink-muted); letter-spacing: .06em; }
.fleet-list-log-row > :nth-child(3) { color: color-mix(in srgb, var(--on-ink) 82%, transparent); }
.fleet-list-log-row.is-new { animation: fleet-log-in .35s ease-out; }
.fleet-list-log-row.is-new > :nth-child(2) { color: var(--signal); }
.fleet-list-log-row.is-new > :nth-child(3) { color: var(--on-ink); }
@media (max-width: 479px) {
  .fleet-list-log-row { grid-template-columns: 6.5em minmax(0, 1fr); }
  .fleet-list-log-row > :nth-child(1) { display: none; }
}

/* Connectors: lines branch from the operating system to each agent and merge into the risk checks.
   A dot runs down the line into the card a step reaches; orange once a signal fires. */
.fleet-list.is-animated > li + li::before, .fleet-list.is-animated > .fleet-list-agent::after {
  content: ""; position: absolute; left: 50%; width: 9px; margin-left: -4.5px; border-left: 0;
  background: linear-gradient(var(--fl-line), var(--fl-line)) 50% 0 / 1.5px 100% no-repeat; }
.fleet-list.is-animated > li + li::before { top: -13px; height: 12px; }
.fleet-list.is-animated > .fleet-list-agent::after { top: calc(100% + 1px); height: 12px; }
.fleet-list.is-animated > #fll-box-exec::before { display: none; }
.fleet-list.is-animated > li.is-hot { --fl-dot: var(--signal); }
.fleet-list.is-animated > li.is-pulse::before, .fleet-list.is-animated > li.is-pulse-out::after {
  background: radial-gradient(circle, var(--fl-dot) 3px, transparent 3.5px) 50% -9px / 9px 9px no-repeat,
    linear-gradient(var(--fl-line), var(--fl-line)) 50% 0 / 1.5px 100% no-repeat;
  animation: fleet-list-dot var(--pulse, .8s) ease-in-out; }
@keyframes fleet-list-dot { to { background-position: 50% calc(100% + 9px), 50% 0; } }

/* ---------- Operating model ---------- */
.model { margin-top: 8px; }
.model-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0;
  counter-reset: step;
}
.model-step {
  position: relative; padding: 22px 18px 24px; min-height: 100%;
  border-left: 1px solid var(--on-ink-line);
  transition: background-color .35s ease;
}
.model-step:first-child { border-left: 0; }
.model-step .num { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--on-ink-muted); display: block; margin-bottom: 36px; transition: color .35s ease; }
.model-step .name { font-size: clamp(20px, 1.7vw, 24px); font-weight: 640; font-variation-settings: "wdth" 110; letter-spacing: -0.01em; display: block; margin-bottom: 12px; }
.model-step .layer { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--on-ink-muted); display: block; margin-bottom: 14px; }
.model-step p { font-size: 15px; line-height: 1.45; color: var(--on-ink-muted); }
.model-step .gain { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--on-ink-line); font-size: 14px; color: var(--on-ink); }
.model-step .gain b { display: block; font-family: var(--font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-ink-muted); margin-bottom: 6px; }
.model-step .tag { display: inline-block; margin-top: 14px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; border: 1px dashed var(--on-ink-muted); color: var(--on-ink-muted); padding: 3px 7px; }
.model-step.is-active { background: color-mix(in srgb, var(--signal) 9%, transparent); }
.model-step.is-active .num { color: var(--signal); }
.model-step::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--signal);
  transform: scaleX(0); transform-origin: left; transition: transform .5s ease;
}
.model-step.is-active::after { transform: scaleX(1); }

.model-loop {
  display: flex; align-items: center; gap: 12px; margin-top: 18px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-ink-muted);
}
.model-loop::before { content: ""; flex: 1; height: 1px; background: var(--on-ink-line); }
.model-loop::after { content: "↺"; color: var(--signal); font-size: 15px; }

.model-compact .model-step p, .model-compact .model-step .gain, .model-compact .model-step .layer { display: none; }
.model-compact .model-step .num { margin-bottom: 20px; }

@media (max-width: 1100px) {
  .model-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .model-step:nth-child(4) { border-left: 0; }
  .model-step:nth-child(n+4) { border-top: 1px solid var(--on-ink-line); }
}
@media (max-width: 640px) {
  .model-steps { grid-template-columns: 1fr; }
  .model-step { border-left: 0; border-top: 1px solid var(--on-ink-line); }
  .model-step:first-child { border-top: 0; }
  .model-step .num { margin-bottom: 14px; }
  .model-compact .model-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .model-compact .model-step:nth-child(odd) { border-left: 0; }
  .model-compact .model-step:nth-child(even) { border-left: 1px solid var(--on-ink-line); }
  .model-compact .model-step:nth-child(-n+2) { border-top: 0; }
}

.figure-note { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: center; color: var(--on-ink-muted); font-size: 14px; }

/* ---------- Status ladder ---------- */
.ladder { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--on-paper-line); }
.ladder-col { padding: 28px; }
.ladder-col + .ladder-col { border-left: 1px solid var(--on-paper-line); }
.ladder-col h3 { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; }
.ladder-col .sub { font-size: 14px; color: var(--on-paper-muted); margin-bottom: 28px; }
.ladder-col ul { list-style: none; margin: 0; padding: 0; }
.ladder-col li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--on-paper-line); font-size: clamp(18px, 1.6vw, 22px); font-weight: 560; font-variation-settings: "wdth" 106; }
.ladder-col li .st { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--on-paper-muted); white-space: nowrap; }
.ladder-col.now li .st { color: var(--accent-text); }
.ladder-col.later li { color: var(--on-paper-muted); }
.ladder-col.later { background: repeating-linear-gradient(135deg, transparent 0 9px, color-mix(in srgb, var(--on-paper) 4%, transparent) 9px 10px); }
@media (max-width: 760px) { .ladder { grid-template-columns: 1fr; } .ladder-col + .ladder-col { border-left: 0; border-top: 1px solid var(--on-paper-line); } }

/* ---------- Principles (approach) ---------- */
.principles { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--on-paper); }
.principle { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px clamp(24px, 4vw, 64px); padding: clamp(28px, 3.4vw, 48px) 0; border-bottom: 1px solid var(--on-paper-line); }
.principle .h3 { font-size: clamp(24px, 2.6vw, 36px); }
.principle p { color: var(--on-paper-muted); font-size: 18px; max-width: 46ch; }
@media (max-width: 860px) { .principle { grid-template-columns: 1fr; gap: 12px; } }

.mandate-def { display: grid; gap: 0; margin: 0; }
.mandate-def > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); gap: 20px; padding: 22px 0; border-top: 1px solid var(--on-ink-line); }
.mandate-def > div:first-child { border-top: 0; }
.mandate-def dt { font-size: clamp(22px, 2.4vw, 32px); font-weight: 640; font-variation-settings: "wdth" 112; letter-spacing: -0.01em; }
.mandate-def dd { margin: 0; color: var(--on-ink-muted); padding-top: 6px; }
@media (max-width: 560px) { .mandate-def > div { grid-template-columns: 1fr; gap: 6px; } }

/* ---------- People ---------- */
.people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.person { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 28px; padding-top: 28px; border-top: 2px solid var(--on-paper); }
.portrait {
  aspect-ratio: 4 / 5; background: var(--ink); color: var(--on-ink); --signal: var(--accent-on-ink);
  display: grid; place-items: center; position: relative;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.portrait .initials { font-size: 34px; font-weight: 640; font-variation-settings: "wdth" 115; letter-spacing: .02em; }
.portrait .initials::before { content: "["; color: var(--signal); margin-right: 4px; }
.portrait .initials::after { content: "]"; color: var(--signal); margin-left: 4px; }
.portrait .ph { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-ink-muted); }
.person .role { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-paper-muted); margin: 8px 0 18px; }
.person p { color: var(--on-paper-muted); font-size: 16px; }
.person .link-arrow { font-size: 14px; }
@media (max-width: 960px) { .people { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .person { grid-template-columns: 1fr; } .portrait { max-width: 200px; } }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
/* Careers: open roles */
.roles { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--on-paper); }
.role-row { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) auto; gap: 16px clamp(24px, 4vw, 64px); align-items: start; padding: clamp(24px, 3vw, 40px) 0; border-bottom: 1px solid var(--on-paper-line); }
.role-row .h3 { font-size: clamp(22px, 2.2vw, 30px); }
.role-row p { color: var(--on-paper-muted); margin-top: 10px; }
.role-row .role-meta { margin-top: 4px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.8; }
.role-duties { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; max-width: 60ch; }
.role-duties li { position: relative; padding-left: 20px; color: var(--on-paper-muted); font-size: 16px; }
.role-duties li::before { content: ""; position: absolute; left: 0; top: .7em; width: 8px; height: 2px; background: var(--signal); }
@media (max-width: 760px) { .role-row { grid-template-columns: 1fr; gap: 8px; } }

.data-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.data-table caption { text-align: left; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-paper-muted); padding-bottom: 14px; }
.data-table th, .data-table td { text-align: left; vertical-align: top; padding: 18px 20px 18px 0; border-top: 1px solid var(--on-paper-line); }
.data-table thead th { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--on-paper-muted); border-top: 2px solid var(--on-paper); }
.data-table tbody th { font-weight: 600; width: 42%; }
.data-table td { color: var(--on-paper-muted); }

/* ---------- Forms ---------- */
.form { display: grid; gap: 22px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 8px; }
.field label { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-paper-muted); }
.field label .opt { text-transform: none; letter-spacing: 0; }
.field input, .field select, .field textarea {
  font: inherit; font-size: 17px; color: var(--on-paper);
  background: color-mix(in srgb, var(--paper) 45%, white); border: 1px solid color-mix(in srgb, var(--on-paper) 28%, transparent); border-radius: 0;
  padding: 14px 14px; width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--on-paper) 50%), linear-gradient(135deg, var(--on-paper) 50%, transparent 50%); background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.field textarea { min-height: 168px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--on-paper); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.field [aria-invalid="true"] { border-color: #c02a00; }
.field .err { color: #a32400; font-size: 14px; min-height: 0; }
.field .err:empty { display: none; }
.form-foot { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; }
.form-foot small { color: var(--on-paper-muted); font-size: 14px; max-width: 44ch; }
.form-status { padding: 18px 20px; border-left: 3px solid var(--signal); background: var(--paper-2); font-size: 16px; }
.form-status[hidden] { display: none; }
.form-status.is-error { border-left-color: #c02a00; }

.contact-aside { border-top: 2px solid var(--on-paper); padding-top: 24px; }
.contact-aside dl { margin: 0; }
.contact-aside dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-paper-muted); margin-top: 22px; }
.contact-aside dd { margin: 6px 0 0; font-size: 17px; }

/* ---------- Essays (series pages and homepage insights) ---------- */
.essay-meta { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-ink-muted); margin-bottom: 20px; }
.essay { max-width: 66ch; margin-inline: auto; }
.essay p { font-size: clamp(17px, 1.35vw, 19px); line-height: 1.65; color: var(--on-paper-muted); }
.essay p + p { margin-top: 1.1em; }
.essay .essay-pull { margin-block: 1.6em; padding-left: clamp(16px, 1.8vw, 24px); border-left: 2px solid var(--signal); font-size: clamp(21px, 2vw, 27px); line-height: 1.3; font-weight: 560; font-variation-settings: "wdth" 104; color: var(--on-paper); }
.essay .essay-pull + .essay-pull { margin-top: 0; }
.essay h2 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; letter-spacing: -0.015em; font-weight: 640; font-variation-settings: "wdth" 110; color: var(--on-paper); margin: clamp(44px, 5vw, 64px) 0 16px; }
.essay .essay-sub { margin: -6px 0 24px; color: var(--accent-text); font-weight: 560; font-variation-settings: "wdth" 106; }
/* Evidence exhibit: breaks out of the reading column, up to 960px */
.evidence { --fig-w: min(960px, calc(100vw - 2 * var(--gutter))); width: var(--fig-w); margin: 28px calc((100% - var(--fig-w)) / 2) 0; }
.evidence ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); border-top: 2px solid var(--on-paper); }
.evidence li { padding: 24px 0 28px; border-bottom: 1px solid var(--on-paper-line); }
.evidence .evidence-figure { display: block; font-size: clamp(36px, 4vw, 52px); line-height: 1; font-weight: 640; font-variation-settings: "wdth" 112; letter-spacing: -0.02em; color: var(--accent-text); }
.evidence h3 { margin: 12px 0 8px; font-size: 19px; font-weight: 620; font-variation-settings: "wdth" 106; }
.essay .evidence p { font-size: 16px; line-height: 1.55; }
.essay .evidence p + p { margin-top: 10px; }
.essay .evidence .evidence-caveat { font-style: italic; }
.essay .evidence .evidence-source { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .02em; }
@media (max-width: 760px) { .evidence ul { grid-template-columns: 1fr; } }
.essay-next { margin-top: clamp(48px, 6vw, 80px); padding-top: 28px; border-top: 1px solid var(--on-paper-line); }
.essay-next .essay-meta { color: var(--on-paper-muted); margin-bottom: 8px; }
.essay-next a { font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; font-variation-settings: "wdth" 108; text-decoration: none; color: var(--on-paper); }
.essay-next a:hover { color: var(--accent-text); }

.insights { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.insight { display: block; text-decoration: none; color: inherit; }
.insight-media { position: relative; display: block; margin-bottom: 20px; }
.insight img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 35%; transition: opacity .2s ease; }
.insight .essay-meta { margin-bottom: 10px; }
.insight .h3 { margin-bottom: 10px; }
.insight p { color: var(--on-ink-muted); font-size: 16px; }
.insight:hover img { opacity: .85; }
.insight:hover .h3 { color: var(--signal); }
@media (max-width: 860px) { .insights { grid-template-columns: 1fr; } }
/* Investor mark laid over the collage, like a printed label */
.ift-badge { position: absolute; left: 14px; bottom: 14px; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; background: var(--ink); color: var(--on-ink); font-size: 20px; font-weight: 640; font-variation-settings: "wdth" 110; line-height: 1; }
.ift-badge .tl { --h: 24px; background: var(--on-ink); }
.page-hero-photo .ift-badge { left: 20px; bottom: 20px; font-size: 26px; padding: 10px 18px 10px 12px; }
.page-hero-photo .ift-badge .tl { --h: 32px; }

/* ---------- CTA band ---------- */
.cta-band { padding-block: clamp(72px, 9vw, 128px); }
.cta-band .h2 { max-width: 18ch; font-size: clamp(34px, 5.2vw, 76px); }
.cta-band p { max-width: 46ch; font-size: 18px; margin-top: 24px; }
.cta-band .cta-aside { margin-top: 20px; font-size: 16px; }

/* ---------- Prose (legal placeholders) ---------- */
.prose { max-width: 68ch; }
.prose h2 { font-size: 24px; font-variation-settings: "wdth" 106; margin: 48px 0 14px; }
.prose .table-wrap { margin-top: 24px; }
.prose p, .prose li { color: var(--on-paper-muted); }
.notice { border: 1px dashed var(--signal); background: color-mix(in srgb, var(--signal) 6%, transparent); padding: 20px 22px; font-size: 15px; margin-bottom: 40px; }
.notice strong { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; display: block; margin-bottom: 6px; font-weight: 500; color: var(--accent-text); }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--on-ink); padding-block: 64px 36px; }
.footer-top { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 40px; padding-bottom: 56px; border-bottom: 1px solid var(--on-ink-line); }
.footer-top .logo { width: min(100%, 420px); }
.footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; align-content: start; justify-self: end; min-width: min(100%, 420px); }
.footer-nav a { text-decoration: none; color: var(--on-ink-muted); padding: 10px 0; border-top: 1px solid var(--on-ink-line); font-size: 15px; }
.footer-nav a:hover { color: var(--on-ink); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding-top: 28px; font-size: 13px; color: var(--on-ink-muted); }
@media (max-width: 760px) { .footer-top { grid-template-columns: 1fr; } .footer-nav { justify-self: stretch; } }

/* ---------- Motion ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .model-step, .model-step::after, .btn { transition: none; }
  .fleet-flow, .fleet-log-row.is-new { animation: none; }
}
html.no-js .reveal { opacity: 1; transform: none; }

/* ---------- Readiness signals (hidden) ----------
   Elements marked data-readiness carry development-status labels: concept labels,
   the "Longer-term design" tag, the home "Current development" section and the
   Technology "Status" section. Hidden at the owner's request. Delete this rule
   to restore them. */
[data-readiness] { display: none !important; }

/* ---------- Colour variations (palettes/) ---------- */
.palette-bar { background: var(--paper-2); color: var(--on-paper); font-size: 13px; border-bottom: 1px solid var(--on-paper-line); }
.palette-bar .wrap { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center; padding-block: 9px; }
.palette-bar a { color: var(--on-paper-muted); text-decoration: none; }
.palette-bar a:hover { color: var(--on-paper); }
.palette-bar a[aria-current] { color: var(--on-paper); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.palette-links { display: inline-flex; flex-wrap: wrap; gap: 6px 16px; margin-left: auto; }

.pal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 28px; }
.pal-card { display: block; text-decoration: none; color: inherit; border: 1px solid color-mix(in srgb, #000 14%, transparent); transition: transform .2s ease; }
.pal-card:hover { transform: translateY(-3px); }
.pal-hero { padding: 26px 24px 28px; }
.pal-hero .kicker { font-size: 13px; margin-bottom: 12px; }
.pal-head { font-size: 32px; line-height: .98; letter-spacing: -0.02em; font-weight: 640; font-variation-settings: "wdth" 112; margin-bottom: 22px; }
.pal-hero .btn { padding: 11px 16px; font-size: 13px; }
.pal-paper { padding: 16px 24px; font-size: 15px; border-top: 0 !important; }
.pal-band { padding: 14px 24px; font-size: 17px; font-weight: 620; font-variation-settings: "wdth" 110; }
.pal-meta { padding: 20px 24px 8px; background: #fff; color: #000; }
.pal-meta p { color: #555; font-size: 15px; margin: 6px 0 0; }
.pal-meta .link-arrow { font-size: 14px; }

/* ---------- Hero options hub (heroes/) ---------- */
.hub-art { position: relative; height: 300px; }
.hub-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hub-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hub-type { height: 300px; display: flex; align-items: center; padding: 24px; }
.hub-type .pal-head { font-size: 40px; margin: 0; }

/* ---------- Trust strip (home) ---------- */
.trust { border-top: 1px solid var(--on-ink-line); border-bottom: 1px solid var(--on-ink-line); }
/* A thin, slowly scrolling row of logos. Two identical tracks move together so the loop is seamless. */
.marquee { display: flex; overflow: hidden; padding-block: 22px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; flex-shrink: 0; animation: marquee 40s linear infinite; }
.marquee-track li { display: flex; align-items: center; padding-inline: clamp(28px, 3.5vw, 56px); height: 32px; }
.marquee .tl { max-width: none; flex: none; }
.marquee:hover .marquee-track { animation-play-state: paused; }
/* IFT's mark is a symbol, so its name sits beside it */
.marquee-ift { gap: 10px; font-size: 20px; font-weight: 640; font-variation-settings: "wdth" 110; color: color-mix(in srgb, var(--on-ink) 78%, transparent); }
@keyframes marquee { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { justify-content: center; flex-wrap: wrap; -webkit-mask-image: none; mask-image: none; }
  .marquee-track { animation: none; flex-wrap: wrap; justify-content: center; row-gap: 16px; }
  .marquee-track[aria-hidden] { display: none; }
}

/* Logos: every mark is drawn in one muted colour through a mask, at optically balanced sizes.
   Curve and Pendle are multi-tone, so their PNGs carry greyscale in the alpha channel.
   Files come from each organisation's own site (see README). */
/* Each mark sets --h and --ar, and its width is worked out from them. Leaving the width to aspect-ratio under a
   percentage max-width inside a shrink-to-fit item drew every mark at zero width in WebKit (Safari, and all
   browsers on iPhone); only IFT showed, because its name gives its item a width. */
.tl {
  display: block; max-width: 100%;
  height: var(--h); aspect-ratio: var(--ar); width: calc(var(--h) * var(--ar));
  background: color-mix(in srgb, var(--on-ink) 78%, transparent);
  -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain;
  transition: background-color .2s ease;
}
.marquee li:hover .tl { background: var(--on-ink); }
.tl-morpho { --h: 22px; --ar: 104 / 21; -webkit-mask-image: url("../img/logos/morpho.svg"); mask-image: url("../img/logos/morpho.svg"); }
.tl-derive { --h: 21px; --ar: 600 / 97; -webkit-mask-image: url("../img/logos/derive.png"); mask-image: url("../img/logos/derive.png"); }
.tl-aave { --h: 17px; --ar: 94 / 16; -webkit-mask-image: url("../img/logos/aave.svg"); mask-image: url("../img/logos/aave.svg"); }
.tl-maple { --h: 30px; --ar: 108 / 34; -webkit-mask-image: url("../img/logos/maple.svg"); mask-image: url("../img/logos/maple.svg"); }
.tl-pendle { --h: 24px; --ar: 880 / 180; -webkit-mask-image: url("../img/logos/pendle.png"); mask-image: url("../img/logos/pendle.png"); }
.tl-curve { --h: 30px; --ar: 1; -webkit-mask-image: url("../img/logos/curve.png"); mask-image: url("../img/logos/curve.png"); }
.tl-sky { --h: 28px; --ar: 1; -webkit-mask-image: url("../img/logos/sky.png"); mask-image: url("../img/logos/sky.png"); }
.tl-ethena { --h: 28px; --ar: 1; -webkit-mask-image: url("../img/logos/ethena.svg"); mask-image: url("../img/logos/ethena.svg"); }
.tl-hyperliquid { --h: 22px; --ar: 852 / 132; -webkit-mask-image: url("../img/logos/hyperliquid.svg"); mask-image: url("../img/logos/hyperliquid.svg"); }
.tl-ift { --h: 28px; --ar: 1; -webkit-mask-image: url("../img/logos/ift.png"); mask-image: url("../img/logos/ift.png"); }

/* ---------- Vault assets chart (home) ---------- */
.tvl { margin: 0; padding-bottom: 32px; } /* room for the date labels under the baseline */
.tvl-hero { margin-top: 40px; display: grid; gap: 6px; }
.tvl-hero-num { font-size: clamp(56px, 7vw, 104px); line-height: .9; font-weight: 640; font-variation-settings: "wdth" 112; letter-spacing: -0.03em; }
.tvl-hero-label { font-size: 16px; color: var(--on-paper-muted); max-width: 32ch; }
.tvl-chart {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 32px);
  height: clamp(260px, 30vw, 380px); align-items: end;
  border-bottom: 1px solid var(--on-paper); padding-top: 32px;
}
.tvl-col { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; position: relative; }
.tvl-value { font-size: 18px; font-weight: 600; margin-bottom: 10px; }
.tvl-bar { display: block; height: var(--h); min-height: 4px; background: color-mix(in srgb, var(--on-paper) 78%, transparent); border-radius: 4px 4px 0 0; }
.tvl-col.is-latest .tvl-bar { background: var(--accent); }
.tvl-date { position: absolute; bottom: -30px; left: 0; font-size: 13px; color: var(--on-paper-muted); }
/* Bars rise from the baseline once the figure reveals; each value rides up on its bar. */
/* Transitions live on the .in state only, so hiding them on load is instant. */
.tvl.reveal .tvl-bar { height: 0; }
.tvl.reveal .tvl-value { opacity: 0; }
.tvl.reveal.in .tvl-bar { height: var(--h); transition: height 1.1s cubic-bezier(.22, .8, .24, 1) .15s; }
.tvl.reveal.in .tvl-value { opacity: 1; transition: opacity .5s ease .5s; }
.tvl.reveal.in .tvl-col:nth-child(2) .tvl-bar { transition-delay: .27s; }
.tvl.reveal.in .tvl-col:nth-child(3) .tvl-bar { transition-delay: .39s; }
.tvl.reveal.in .tvl-col:nth-child(2) .tvl-value { transition-delay: .62s; }
.tvl.reveal.in .tvl-col:nth-child(3) .tvl-value { transition-delay: .74s; }
.tvl.reveal.in .tvl-col:nth-child(4) .tvl-bar { transition-delay: .51s; }
.tvl.reveal.in .tvl-col:nth-child(4) .tvl-value { transition-delay: .86s; }
html.no-js .tvl .tvl-bar { height: var(--h); }
html.no-js .tvl .tvl-value { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .tvl .tvl-bar, .tvl .tvl-value { transition: none !important; } }