/* general cognitions · brass protocol v4 stylesheet */
/* shared across every page. tokens first, then primitives, then components, then page-specific. */

/* =========================================================================
   01 / design tokens
   ========================================================================= */

:root {
  /* light mode palette · industrial sage. dominant register. */
  --bg-page: #B8BDB6;          /* sage gray-green page surface */
  --bg-surface: #BEC3BC;       /* slightly lighter elevated panel */
  --bg-elevated: #C6CAC2;      /* highest elevation panel */
  --bg-invert: #0A0A0A;        /* dark panel · drives the "black panels on sage pages" rhythm */

  /* always-dark anchor surfaces (ticker & footer): preserved across mode flips */
  --bg-deep: #0A0A0A;
  --text-on-deep: #F5F5F0;
  --border-deep: #2A2A2A;

  /* text */
  --text-primary: #0A0A0A;
  --text-secondary: #2A2D29;
  --text-tertiary: #5A5D58;
  --text-on-invert: #F0EBE0;   /* cream on dark inverted panels */

  /* borders */
  --border-default: rgba(10, 10, 10, 0.18);
  --border-heavy: #0A0A0A;
  --border-invert: rgba(240, 235, 224, 0.20);   /* visible on dark invert blocks */

  /* accent · saturated industrial red (single brand pop, used sparingly) */
  --accent: #E5181D;
  --accent-ink: #F5F5F0;
  --accent-dim: rgba(229, 24, 29, 0.55);

  /* secondary alias · kept for legacy usage; same red as accent so the page
     reads with one consistent brand pop instead of an orange/red split. */
  --secondary: var(--accent);
  --secondary-ink: var(--accent-ink);
  --secondary-dim: var(--accent-dim);

  /* status */
  --status-active: #1A8A4A;
  --status-warning: #C49A35;
  --status-error: #CC2200;
  --status-neutral: #5A5D58;

  /* page gradient stops · tune the depth of the sage surface */
  --bg-grad-top: #BABFB8;
  --bg-grad-mid: #B8BDB6;
  --bg-grad-bottom: #B5BAB3;

  /* grain texture · tunable per surface */
  --grain-page-opacity: 0.22;
  --grain-page-blend: multiply;
  --grain-page-tile: 240px;
  --grain-invert-opacity: 0.14;
  --grain-invert-blend: screen;
  --grain-invert-tile: 240px;

  /* invert block (dark panel) surface tints · for nested elevation */
  --invert-tint-surface: rgba(255, 255, 255, 0.04);
  --invert-tint-elevated: rgba(255, 255, 255, 0.08);
  --invert-tint-border: rgba(240, 235, 224, 0.18);

  /* ascii art surface */
  --ascii-fs: 12px;
  --ascii-fs-sm: 10px;
  /* fig 02 chain diagram · slightly smaller than body ascii so dense caption
     rows read as subordinate to the layer titles without mixing font sizes
     inside one line (which would break monospace alignment). */
  --ascii-fs-fig02: 10.5px;
  --ascii-line: 1.45;
  --ascii-pad: 20px;

  /* typography stacks · the project ships exactly two text faces:
     - display-grotesque: big shoulders display drives every title and
       editorial moment (sharp, industrial signage face). stack sans notch
       is the secondary fallback.
     - body: stack sans notch carries every non-title surface site-wide.
     mono and ascii stacks below are reserved for technical/diagrammatic
     surfaces only (labels, buttons, ascii art) and don't count as a third
     reading face. */
  --font-display-grotesque: "Big Shoulders Display", "Stack Sans Notch", "Barlow Condensed", "Oswald", sans-serif;
  --font-body: "Stack Sans Notch", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", "SF Mono", ui-monospace, monospace;
  /* dedicated stack for ascii blocks · departure mono is a single-weight
     lo-fi pixel monospace; falls back to the standard mono stack if the
     stylesheet from departuremono.com/mono.css fails to load. */
  --font-ascii: "Departure Mono", "JetBrains Mono", "IBM Plex Mono", "SF Mono", ui-monospace, monospace;

  /* spacing scale · base 4px */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;
  --space-48: 192px;

  /* layout */
  --page-max: 1440px;
  --page-margin: 80px;
  --grid-gutter: 24px;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro: 220ms;
  --dur-page: 1100ms;
}

/* =========================================================================
   02 / reset & base
   ========================================================================= */

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* smooth anchor navigation · powers the fade-in cascade triggered by nav link
     clicks. paired with the .reveal observer below for a coordinated transition. */
  scroll-behavior: smooth;
}

/* honour reduced-motion preferences · jumps straight to anchors and shows
   reveal targets immediately without animation. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-primary);
  /* subtle vertical gradient on the page · per §14.2, dark mode template */
  background: var(--bg-page)
    linear-gradient(180deg, var(--bg-grad-top) 0%, var(--bg-grad-mid) 55%, var(--bg-grad-bottom) 100%) fixed;
  position: relative;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease-out);
}

a:hover {
  color: var(--accent);
}

button {
  font: inherit;
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
}

ul, ol {
  list-style: none;
}

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

/* =========================================================================
   03 / surface texture · grain (mandatory per system)
   ========================================================================= */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  opacity: var(--grain-page-opacity);
  mix-blend-mode: var(--grain-page-blend);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: var(--grain-page-tile) var(--grain-page-tile);
}

/* cream "invert" panels (sections 02 and 05 in dark mode) carry their own
   paper-grain · multiply blend, slightly heavier, scoped to the block. */
.invert {
  position: relative;
  isolation: isolate;
}

.invert::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: var(--grain-invert-opacity);
  mix-blend-mode: var(--grain-invert-blend);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n2)'/%3E%3C/svg%3E");
  background-size: var(--grain-invert-tile) var(--grain-invert-tile);
}

.invert > * { position: relative; z-index: 1; }

/* =========================================================================
   04 / typography primitives
   ========================================================================= */

.serif {
  font-family: var(--font-display-grotesque);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 0.95;
}

.grotesque {
  font-family: var(--font-display-grotesque);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.9;
}

.mono {
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.label--muted { color: var(--text-tertiary); }
.label--accent { color: var(--accent); }
.label--ink { color: var(--text-primary); }

.micro {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  line-height: 1.4;
}

.body-prose {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-secondary);
}

.body-prose--ink { color: var(--text-primary); }

/* display scale */
.display-hero {
  font-family: var(--font-display-grotesque);
  font-weight: 600;
  font-size: clamp(56px, 9vw, 132px);
  line-height: 0.92;
  letter-spacing: -0.03em;
}

.display-grotesque-hero {
  font-family: var(--font-display-grotesque);
  font-weight: 800;
  font-size: clamp(52px, 10vw, 148px);
  line-height: 0.85;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

.display-section {
  font-family: var(--font-display-grotesque);
  font-weight: 700;
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.display-stat {
  font-family: var(--font-display-grotesque);
  font-weight: 800;
  font-size: clamp(56px, 8vw, 112px);
  line-height: 1;
  letter-spacing: -0.03em;
}

.heading-lg {
  font-family: var(--font-display-grotesque);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.heading-md {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.005em;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: currentColor;
}

/* =========================================================================
   05 / layout
   ========================================================================= */

.shell {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding-left: calc(var(--page-margin) + env(safe-area-inset-left, 0px));
  padding-right: calc(var(--page-margin) + env(safe-area-inset-right, 0px));
  padding-top: 0;
  padding-bottom: 0;
  position: relative;
  box-sizing: border-box;
}

.section {
  padding: var(--space-16) 0;
  position: relative;
}

.section--tight { padding: var(--space-12) 0; }
.section--xl { padding: var(--space-24) 0 var(--space-16); }

.section-head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-12);
  align-items: end;
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-heavy);
}

.section-head__index {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--text-tertiary);
  text-transform: uppercase;
}

.section-head__title {
  font-family: var(--font-display-grotesque);
  font-weight: 700;
  font-size: clamp(36px, 4.8vw, 64px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--text-primary);
}

/* asymmetric column splits */
.grid {
  display: grid;
  gap: var(--grid-gutter);
}
.grid--12 { grid-template-columns: repeat(12, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--2 { grid-template-columns: 1fr 1fr; }
.grid--3-9 { grid-template-columns: 3fr 9fr; }
.grid--4-8 { grid-template-columns: 4fr 8fr; }
.grid--5-7 { grid-template-columns: 5fr 7fr; }

/* =========================================================================
   06 / ticker bar
   ========================================================================= */

.ticker {
  background: var(--bg-deep);
  color: var(--text-on-deep);
  border-top: 1px solid var(--border-deep);
  border-bottom: 1px solid var(--border-deep);
  overflow: hidden;
  position: relative;
  /* sit above page grain so the strip stays legible */
  z-index: 1005;
}

/* breathing room when a ticker sits inside the hero, below the cta block */
.hero > .ticker { margin-top: var(--space-6); }

.ticker__item { color: var(--text-on-deep); }

.ticker__track {
  display: flex;
  gap: 48px;
  padding: 10px 0;
  white-space: nowrap;
  animation: ticker-scroll 70s linear infinite;
  width: max-content;
}

.ticker__item {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-on-deep);
}

.ticker__item--accent { color: var(--accent); }

.ticker__sep {
  color: var(--text-tertiary);
  margin: 0 0;
}

/* connector-matrix variant: same motion, longer duration to keep pixel-speed
   readable since it carries roughly 3x the content of the top status ticker. */
.ticker--matrix {
  margin-top: var(--space-4);
}
.ticker--matrix .ticker__track {
  animation-duration: 180s;
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* =========================================================================
   06.5 / scroll reveal · sections fade in as they enter the viewport
   ·  the .reveal class is attached by js (main.js) to every <section> and
      to <footer> on every page. the observer flips them to .is-visible
      once they cross ~12% into view, which staggers naturally with the
      browser's smooth-scroll on anchor nav clicks.
   ·  pure opacity fade · no translation. content holds its layout slot the
      whole time so nothing reflows or appears to slide upward.
   ·  fallback: if js doesn't run (or is removed), the html.no-js root
      class keeps everything visible so content is never hidden.
   ========================================================================= */

.reveal {
  opacity: 0;
  transition: opacity var(--dur-page) var(--ease-out);
  will-change: opacity;
}

.reveal.is-visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-visible {
    opacity: 1;
    transition: none;
  }
}

/* if javascript fails to boot, never trap content behind an invisible state. */
html.no-js .reveal {
  opacity: 1;
  transition: none;
}

/* =========================================================================
   07 / top navigation
   ========================================================================= */

/* above body grain (::before z-index 1000) so bar + mobile drawer read solid */
.nav {
  position: sticky;
  top: 0;
  z-index: 1100;
  background: var(--bg-page);
  border-bottom: 1px solid var(--border-default);
  backdrop-filter: blur(8px);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--space-6);
  gap: var(--space-6);
  flex-wrap: nowrap;
  min-width: 0;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-primary);
}

/* black monogram on sage: invert+contrast on footer reads heavier; push
   contrast + slight darken so header stroke matches footer lockup weight. */
.nav__mark {
  height: 24px;
  width: auto;
  flex-shrink: 0;
  display: block;
  filter: contrast(1.38) brightness(0.96);
}

/* bitmap mark: black on transparent → invert to cream on dark chrome */
.invert .nav__mark,
.footer .nav__mark,
.ticker .nav__mark {
  filter: invert(1) contrast(1.12);
}

.nav__wordmark {
  font-family: var(--font-display-grotesque);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
}

/* registered-trademark mark · perfect circle with a centered R, replaces
   the unicode ® character so the ring reads as a clean geometric circle
   regardless of the surrounding font. inherits color from parent. */
.tm-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  margin-left: 6px;
  vertical-align: 0.6em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  box-sizing: border-box;
  flex-shrink: 0;
}

.tm-mark--sm {
  width: 9px;
  height: 9px;
  font-size: 5.5px;
  margin-left: 5px;
  vertical-align: 0.7em;
}

.nav__sub {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav__link {
  font-family: var(--font-display-grotesque);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.nav__link.is-active,
.nav__link:hover {
  color: var(--text-primary);
}

.nav__cta {
  display: inline-flex;
  flex-shrink: 0;
}

.nav__toggle {
  display: none;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-heavy);
  align-items: center;
  justify-content: center;
}

.nav__toggle span {
  display: block;
  width: 14px;
  height: 1px;
  background: var(--text-primary);
  position: relative;
}

.nav__toggle span::before,
.nav__toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 14px;
  height: 1px;
  background: var(--text-primary);
}

.nav__toggle span::before { top: -5px; }
.nav__toggle span::after { top: 5px; }

/* =========================================================================
   08 / buttons
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  font-family: var(--font-display-grotesque);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--border-heavy);
  background: transparent;
  color: var(--text-primary);
  transition: background var(--dur-micro) var(--ease-out),
              color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out);
}

.btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.btn--solid {
  background: var(--text-primary);
  color: var(--text-on-invert);
}

.btn--solid:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.btn--accent {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

.btn--accent:hover {
  background: var(--text-primary);
  border-color: var(--text-primary);
}

.btn--ghost-invert {
  border-color: var(--text-on-invert);
  color: var(--text-on-invert);
}

.btn--ghost-invert:hover {
  background: var(--text-on-invert);
  color: var(--text-primary);
}

.btn--sm {
  padding: 11px 18px;
  font-size: 14px;
  white-space: nowrap;
}

.btn__arrow {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

/* =========================================================================
   09 / hero
   ========================================================================= */

.hero {
  position: relative;
  padding: var(--space-8) 0 var(--space-12);
  overflow: hidden;
}

.hero__meta-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
  margin-bottom: var(--space-12);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  gap: var(--space-6);
  flex-wrap: wrap;
}

.hero__meta-strip > span { display: inline-flex; align-items: center; gap: 8px; }

.hero__title {
  margin-bottom: var(--space-8);
}

.hero__title em {
  font-style: normal;
  color: var(--accent);
}

.hero__sub {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--grid-gutter);
  margin-top: var(--space-8);
  align-items: start;
}

/* narrower mission readout · pre stretches full panel width so glyphs sit
   edge-to-edge inside the terminal chrome (tight pad vs global ascii--terminal). */
.hero__terminal {
  min-width: 0;
  width: 100%;
  max-width: 420px;
  justify-self: end;
}

.hero__terminal .ascii--terminal {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
}

.hero__terminal-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: var(--space-4);
}

.hero__lede {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 52ch;
}

.hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: var(--space-8);
}

.hero__deck {
  border: 1px solid var(--border-heavy);
  background: var(--bg-surface);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hero__deck-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero__deck-row span:first-child { color: var(--text-tertiary); }

/* =========================================================================
   10 / status pill
   ========================================================================= */

.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-active);
  box-shadow: 0 0 0 2px rgba(26, 138, 74, 0.18);
  flex-shrink: 0;
}

.status--warning .status__dot { background: var(--status-warning); box-shadow: 0 0 0 2px rgba(196, 154, 53, 0.18); }
.status--error .status__dot { background: var(--status-error); }
.status--neutral .status__dot { background: var(--status-neutral); box-shadow: none; }

/* =========================================================================
   11 / cards
   ========================================================================= */

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  min-height: 260px;
  transition: border-color var(--dur-micro) var(--ease-out);
}

.card:hover { border-color: var(--border-heavy); }

.card__index {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text-tertiary);
  text-transform: uppercase;
}

.card__title {
  font-family: var(--font-display-grotesque);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.card__body {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.card__footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--border-default);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.card__icon {
  width: 28px;
  height: 28px;
  stroke: var(--text-primary);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

/* layered architecture stack · uses cards but visually stepped */
.stack {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-heavy);
}

.stack__row {
  display: grid;
  grid-template-columns: 80px 1fr 2fr 120px;
  gap: 0;
  padding: 22px 24px;
  border-bottom: 1px solid var(--border-default);
  align-items: start;
  background: var(--bg-surface);
  transition: background var(--dur-micro) var(--ease-out);
}

.stack__row:last-child { border-bottom: 0; }
.stack__row:hover { background: var(--bg-elevated); }

/* the highlighted layer in the protocol stack is always a dark island,
   regardless of whether the parent section is dark page or cream invert. */
.stack__row--active {
  background: var(--bg-deep);
  color: var(--text-on-deep);
  --text-primary: var(--text-on-deep);
  --text-secondary: rgba(245, 245, 240, 0.72);
  --text-tertiary: rgba(245, 245, 240, 0.55);
}

.stack__row--active .stack__num,
.stack__row--active .stack__title,
.stack__row--active .stack__body,
.stack__row--active .stack__meta { color: var(--text-on-deep); }

.stack__num {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
}

.stack__title {
  font-family: var(--font-display-grotesque);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}

.stack__body {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  padding-left: var(--space-6);
}

.stack__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  text-align: right;
}

/* =========================================================================
   12 / spec table · signature data component
   ========================================================================= */

.spec {
  width: 100%;
  /* separate borders so tbody rows can translate on hover without fighting
     collapsed-border table layout in some engines. */
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.spec thead th {
  background: var(--bg-invert);
  color: var(--text-on-invert);
  text-align: left;
  padding: 10px 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  font-size: 10px;
  border-right: 1px solid var(--border-invert);
  border-bottom: 1px solid var(--border-invert);
}

.spec thead th:last-child { border-right: 0; }

.spec tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-default);
  vertical-align: top;
  color: var(--text-primary);
  background: var(--bg-page);
  transition: background-color var(--dur-micro) var(--ease-out);
}

.spec tbody tr:last-child td { border-bottom: 0; }

.spec tbody tr {
  transition: transform var(--dur-micro) var(--ease-out);
}

.spec tbody tr:hover {
  transform: translateY(-3px);
  position: relative;
  z-index: 1;
}

.spec tbody tr:hover td {
  background: var(--bg-surface);
}

.spec td:first-child {
  color: var(--text-tertiary);
  width: 30%;
}

.spec td:nth-child(2) {
  width: 20%;
  color: var(--text-secondary);
}

.spec td:nth-child(3) {
  width: 38%;
}

.spec td:last-child {
  width: 12%;
  text-align: center;
}

.spec th:last-child { text-align: center; }

/* horizontal scroll for wide spec tables on narrow viewports · wrapper must
   bound width (max-width + min-width 0) so min-wide tables do not widen body */
.table-scroll {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  margin-bottom: var(--space-2);
  overscroll-behavior-x: contain;
}

/* width: max-content keeps the matrix wide; scroll happens inside .table-scroll only */
.table-scroll .spec {
  width: max-content;
  min-width: 640px;
  max-width: none;
}

@media (prefers-reduced-motion: reduce) {
  .spec tbody tr { transition: none; }
  .spec tbody tr:hover { transform: none; }
}

/* =========================================================================
   13 / inverted accent block
   ========================================================================= */

.invert {
  background: var(--bg-invert);
  color: var(--text-on-invert);
  /* rebind tokens so descendants render correctly on the dark panel embedded
     in a sage page (per §2.6 of the system). this turns the block into a
     dark-mode island; descendants automatically pick the right tones. */
  --text-primary: var(--text-on-invert);
  --text-secondary: rgba(240, 235, 224, 0.72);
  --text-tertiary: rgba(240, 235, 224, 0.50);
  --bg-surface: var(--invert-tint-surface);
  --bg-elevated: var(--invert-tint-elevated);
  --border-default: var(--invert-tint-border);
  --border-heavy: var(--text-on-invert);
}

.invert .label,
.invert .micro,
.invert .eyebrow,
.invert .section-head__index { color: var(--text-tertiary); }

.invert .section-head { border-color: var(--border-heavy); }

.invert .section-head__title { color: var(--text-primary); }

.invert a:hover { color: var(--accent); }

/* full-bleed accent panel */
.accent-block {
  background: var(--accent);
  color: var(--accent-ink);
  padding: var(--space-16) 0;
  position: relative;
}

/* closing cta on the landing page · tall enough to read as its own section
   and separate clearly from the dark footer band. */
.accent-block--engage {
  padding: var(--space-24) 0 var(--space-32);
  min-height: clamp(380px, 44vh, 680px);
  display: flex;
  align-items: center;
}

.accent-block--engage .shell {
  width: 100%;
}

.accent-block .display-section,
.accent-block .display-grotesque-hero { color: var(--accent-ink); }

/* the engage block is a closing cta, not a hero · dial the headline back from
   the global display-grotesque-hero scale and lift the body copy so the two
   columns balance at the same vertical mass instead of leaving dead air. */
.accent-block .display-grotesque-hero {
  font-size: clamp(38px, 6vw, 84px);
  line-height: 0.9;
}

.accent-block .body-prose {
  font-size: 20px;
  line-height: 1.55;
}

.accent-block .label { color: rgba(245, 245, 240, 0.72); }

/* on the accent (red) field the ctas read as solid cream pills with the
   block's red as the ink, pushed to max display weight so the labels punch
   against the dense surrounding noise. hover inverts to outline for feedback. */
.accent-block .btn {
  background: var(--accent-ink);
  color: var(--accent);
  border-color: var(--accent-ink);
  font-weight: 900;
  letter-spacing: 0.1em;
}

.accent-block .btn:hover {
  background: transparent;
  color: var(--accent-ink);
  border-color: var(--accent-ink);
}

.accent-block .btn .btn__arrow { stroke-width: 2; }
.accent-block .btn:hover .btn__arrow { stroke-width: 1.5; }

/* soften input placeholders on the accent panel · the high-contrast cream
   ink reads as live value text otherwise. drop opacity so the hint sits
   visually behind real input. */
.accent-block input::placeholder,
.accent-block textarea::placeholder {
  color: var(--accent-ink);
  opacity: 0.45;
}

.accent-block input:focus::placeholder,
.accent-block textarea:focus::placeholder {
  opacity: 0.3;
}

/* =========================================================================
   13.5 / ascii art · terminals, diagrams, technical visualizations
   ========================================================================= */

/* base block · preserves whitespace for monospace alignment, scrolls horizontally
   on viewports too narrow to fit the full grid. */
.ascii {
  font-family: var(--font-ascii);
  white-space: pre;
  overflow-x: auto;
  font-size: var(--ascii-fs);
  line-height: var(--ascii-line);
  letter-spacing: 0;
  color: var(--text-primary);
  /* departure mono is a single-weight pixel font; force 400 so browsers
     never synthesize bold (which destroys the pixel grid). */
  font-weight: 400;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  /* hairline scrollbar styling for chrome/safari */
  scrollbar-width: thin;
  /* render at the pixel grid · departure mono is built around the pixel
     and benefits from sharp edges. */
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  font-smooth: never;
}

.ascii::-webkit-scrollbar { height: 4px; }
.ascii::-webkit-scrollbar-thumb { background: var(--border-default); }

/* framed variant · sits as a panel on the page surface */
.ascii--frame {
  background: var(--bg-surface);
  border: 1px solid var(--border-heavy);
  padding: var(--ascii-pad);
}

/* terminal variant · always-dark surface regardless of mode (operational chrome) */
.ascii--terminal {
  background: var(--bg-deep);
  color: var(--text-on-deep);
  border: 1px solid var(--border-heavy);
  padding: var(--ascii-pad);
}

.ascii--sm { font-size: var(--ascii-fs-sm); }

/* centered figure strip · keeps wide diagrams in the visual center of the
   content column with room to breathe above/below. */
.ascii-figure {
  width: 100%;
  max-width: min(1080px, 100%);
  margin-inline: auto;
  padding: var(--space-8) var(--space-4);
  box-sizing: border-box;
}

.ascii-figure .ascii {
  display: block;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
}

.invert .ascii-figure--on-invert {
  padding-inline: var(--space-6);
}

/* fig 02 · smaller pixel grid so caption rows are less dominant */
.ascii--fig02 {
  font-size: var(--ascii-fs-fig02);
  line-height: 1.6;
}

/* fig 04 · slightly tighter vertical rhythm on the closed-loop diagram */
.ascii--fig04 {
  line-height: 1.5;
}

/* inline highlight tokens for ascii content · wrap any character span in these
   to colour without breaking monospace alignment (the spans are zero-width). */
.ascii .hl-secondary { color: var(--secondary); font-weight: 700; }
.ascii .hl-secondary-dim { color: var(--secondary-dim); }
.ascii .hl-active { color: var(--status-active); font-weight: 700; }
.ascii .hl-accent { color: var(--accent); font-weight: 700; }
.ascii .hl-warn { color: var(--status-warning); font-weight: 700; }
.ascii .hl-dim { color: var(--text-tertiary); }
.ascii .hl-bright { color: var(--text-primary); font-weight: 600; }

/* =========================================================================
   14 / micrographics · edge labels, crop marks, barcode strips
   ========================================================================= */

.edge-label {
  position: absolute;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.edge-label--left {
  left: 16px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
}

.edge-label--right {
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.crop-mark {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--text-tertiary);
}

.crop-mark--tl { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.crop-mark--tr { top: 8px; right: 8px; border-left: 0; border-bottom: 0; }
.crop-mark--bl { bottom: 8px; left: 8px; border-right: 0; border-top: 0; }
.crop-mark--br { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }

.barcode {
  display: inline-flex;
  align-items: end;
  gap: 1px;
  height: 22px;
}

.barcode span {
  display: inline-block;
  width: 2px;
  background: currentColor;
  height: 100%;
}

.barcode span:nth-child(3n) { width: 1px; height: 70%; }
.barcode span:nth-child(4n) { width: 3px; }
.barcode span:nth-child(5n) { height: 80%; }
.barcode span:nth-child(7n) { width: 1px; }

.stripe-fill {
  background-image: repeating-linear-gradient(
    0deg,
    var(--text-primary) 0,
    var(--text-primary) 2px,
    transparent 2px,
    transparent 5px
  );
}

.divider {
  width: 100%;
  height: 1px;
  background: var(--border-default);
  margin: var(--space-12) 0;
}

.divider--heavy { background: var(--border-heavy); height: 2px; }

/* slash separator decorative */
.slash-row {
  display: flex;
  gap: 4px;
  font-family: var(--font-mono);
  color: var(--text-tertiary);
  letter-spacing: 0.1em;
  font-size: 11px;
  user-select: none;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.slash-row::-webkit-scrollbar {
  display: none;
}

/* trust strip */
.trust {
  display: flex;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
  padding: var(--space-8) 0;
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
}

.trust__label {
  flex-basis: 100%;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}

.trust__item {
  font-family: var(--font-display-grotesque);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* =========================================================================
   15 / stat block
   ========================================================================= */

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--border-heavy);
  border-bottom: 1px solid var(--border-heavy);
}

.stat {
  padding: var(--space-8) var(--space-6);
  border-right: 1px solid var(--border-default);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stat:last-child { border-right: 0; }

.stat__value {
  font-family: var(--font-display-grotesque);
  font-weight: 800;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}

.stat__value em {
  font-style: normal;
  color: var(--accent);
}

.stat__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.stat__body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 32ch;
}

/* =========================================================================
   16 / footer
   ========================================================================= */

.footer {
  background: var(--bg-deep);
  color: var(--text-on-deep);
  padding: var(--space-12) 0 var(--space-6);
  position: relative;
  border-top: 1px solid var(--border-deep);
}

.footer .label,
.footer .micro { color: var(--text-tertiary); }

.footer__top {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: var(--grid-gutter);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--border-deep);
  align-items: start;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 36ch;
}

.footer__mark {
  height: 24px; /* match header nav mark; column flex: align-self keeps aspect ratio */
  width: auto;
  max-width: none;
  align-self: flex-start;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  filter: invert(1) contrast(1.12);
}

.footer__wordmark {
  font-family: var(--font-display-grotesque);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-on-deep);
}

.footer__tag {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(245, 245, 240, 0.6);
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gutter);
}

.footer__col h4 {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 16px;
}

.footer__col ul li + li { margin-top: 10px; }

.footer__col a {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-on-deep);
}

.footer__col a:hover { color: var(--accent); }

.footer__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-6);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  flex-wrap: wrap;
  gap: 12px;
}

/* =========================================================================
   17 / blog · list + post
   ========================================================================= */

.post-archive__head {
  display: grid;
  grid-template-columns: 100px minmax(0, 3fr) minmax(110px, 1fr) minmax(100px, 1fr) 56px;
  gap: var(--grid-gutter);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-heavy);
  align-items: baseline;
}

.post-archive__head-read { text-align: right; }

.post-row {
  display: grid;
  grid-template-columns: 100px minmax(0, 3fr) minmax(110px, 1fr) minmax(100px, 1fr) 56px;
  gap: var(--grid-gutter);
  padding: 22px 0;
  border-bottom: 1px solid var(--border-default);
  align-items: baseline;
  transition: background var(--dur-micro) var(--ease-out);
}

.post-row:hover { background: var(--bg-surface); }

.post-row__date,
.post-row__author,
.post-row__cat,
.post-row__read {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.post-row__author {
  color: var(--text-secondary);
  text-transform: none;
  letter-spacing: 0.05em;
}

.post-row__read { text-align: right; }

.post-row__title {
  font-family: var(--font-display-grotesque);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.post-row:hover .post-row__title { color: var(--accent); }

.post-row__cat { color: var(--text-secondary); }

/* legal long-form */
.longform {
  max-width: 72ch;
}

.longform h2 {
  font-family: var(--font-display-grotesque);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 56px 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-default);
}

.longform h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17px;
  margin: 32px 0 10px;
  letter-spacing: -0.005em;
}

.longform p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 18px;
}

.longform p strong { color: var(--text-primary); font-weight: 600; }

.longform ul {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

.longform ul li {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
  padding-left: 22px;
  position: relative;
  margin-bottom: 8px;
}

.longform ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 10px;
  height: 1px;
  background: var(--text-primary);
}

.longform a {
  color: var(--text-primary);
  border-bottom: 1px solid var(--accent);
}

/* -------------------------------------------------------------------------
   17.1 / bento grid · featured posts on the field-notes index
   ------------------------------------------------------------------------- */

.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: 1px;
  background: var(--border-heavy);
  border: 1px solid var(--border-heavy);
}

.bento__cell {
  background: var(--bg-page);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  position: relative;
  text-decoration: none;
  color: inherit;
  min-height: 220px;
  transition: background var(--dur-micro) var(--ease-out);
}

.bento__cell:hover { background: var(--bg-surface); }

.bento__cell--featured {
  grid-column: span 4;
  grid-row: span 2;
  padding: var(--space-8);
}

.bento__cell--medium { grid-column: span 2; grid-row: span 2; }
.bento__cell--standard { grid-column: span 2; grid-row: span 1; }

.bento__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--space-4);
}

.bento__cat {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--border-heavy);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  align-self: flex-start;
  margin-bottom: var(--space-4);
  color: var(--text-primary);
}

.bento__title {
  font-family: var(--font-display-grotesque);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
}

.bento__cell--featured .bento__title {
  font-family: var(--font-display-grotesque);
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.015em;
}

.bento__cell:hover .bento__title { color: var(--accent); }

.bento__excerpt {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-top: var(--space-3);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bento__cell--featured .bento__excerpt {
  font-size: 16px;
  -webkit-line-clamp: 4;
  margin-top: var(--space-4);
}

.bento__cell--standard .bento__excerpt { -webkit-line-clamp: 2; }

.bento__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding-top: var(--space-4);
  margin-top: auto;
  border-top: 1px dashed var(--border-default);
}

.bento__author {
  color: var(--text-secondary);
  text-transform: none;
  letter-spacing: 0.06em;
}

.bento__arrow {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  transition: transform var(--dur-micro) var(--ease-out);
}

.bento__cell:hover .bento__arrow { transform: translate(2px, -2px); }

/* -------------------------------------------------------------------------
   17.2 / post page · individual field-note article
   ------------------------------------------------------------------------- */

.post__back {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-8);
}

.post__back:hover { color: var(--text-primary); }

.post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-default);
  margin-bottom: var(--space-6);
}

.post__title {
  font-family: var(--font-display-grotesque);
  font-weight: 600;
  font-size: clamp(40px, 5.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.018em;
  margin: 0;
  max-width: 22ch;
}

.post__author {
  margin: var(--space-4) 0 0;
  font-family: var(--font-display-grotesque);
  font-weight: 500;
  font-size: clamp(15px, 1.4vw, 18px);
  letter-spacing: 0.02em;
  color: var(--text-secondary);
}

.post__author strong {
  color: var(--text-primary);
  font-weight: 700;
}

.post__byline {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  color: var(--text-tertiary);
}

.post__lede {
  font-family: var(--font-display-grotesque);
  font-weight: 500;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--text-primary);
  max-width: 64ch;
  margin: 0 0 var(--space-8);
}

.post__pull {
  font-family: var(--font-display-grotesque);
  font-weight: 600;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: var(--space-12) 0;
  padding: var(--space-6) 0 var(--space-6) var(--space-8);
  border-left: 4px solid var(--accent);
  max-width: 60ch;
}

.post__filed {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--border-heavy);
  border-bottom: 1px solid var(--border-heavy);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.shell--narrow {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  padding-left: calc(var(--page-margin) + env(safe-area-inset-left, 0px));
  padding-right: calc(var(--page-margin) + env(safe-area-inset-right, 0px));
  padding-top: 0;
  padding-bottom: 0;
  box-sizing: border-box;
}

/* =========================================================================
   18 / responsive
   ========================================================================= */

@media (max-width: 1023px) {
  :root { --page-margin: 32px; }
  .nav__inner {
    gap: var(--space-4);
    padding: 16px var(--space-4);
  }
  .nav__brand {
    min-width: 0;
  }
  .nav__brand > div {
    min-width: 0;
  }
  .nav__wordmark {
    font-size: clamp(14px, 2.6vw, 19px);
  }
  .nav__sub { display: none; }
  .nav__menu { gap: 18px; }
  .nav__link { font-size: 15px; letter-spacing: 0.06em; }
  .nav__cta.btn--sm {
    padding: 10px 14px;
    font-size: 12px;
  }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3-9, .grid--4-8, .grid--5-7 { grid-template-columns: 1fr; }
  .hero__sub { grid-template-columns: 1fr; }
  .hero__terminal { max-width: none; justify-self: stretch; }
  .footer__top { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: repeat(2, 1fr); }
  .stack__row { grid-template-columns: 56px 1fr; row-gap: 14px; }
  .stack__row > * { grid-column: 2; }
  .stack__num { grid-column: 1; grid-row: 1; }
  .stack__meta { grid-column: 2; text-align: left; }
  .stat-row { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid var(--border-default); }
  .stat:last-child { border-bottom: 0; }
  .post-archive__head { display: none; }
  .post-row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
    padding: var(--space-6) 0;
  }
  .post-row__read { text-align: left; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento__cell--featured { grid-column: span 2; grid-row: span 1; }
  .bento__cell--medium { grid-column: span 2; grid-row: span 1; }
  .bento__cell--standard { grid-column: span 1; grid-row: span 1; }
}

@media (max-width: 767px) {
  :root { --page-margin: 16px; --ascii-fs-fig02: 9.5px; }

  /* stop wide monospace / headlines from forcing horizontal page scroll */
  .shell {
    max-width: 100%;
    min-width: 0;
  }

  .display-grotesque-hero,
  .hero__title,
  .section-head__title {
    overflow-wrap: anywhere;
  }

  .ascii-figure {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .ascii-figure .ascii {
    max-width: 100%;
    box-sizing: border-box;
  }

  .table-scroll {
    max-width: 100%;
    min-width: 0;
  }

  /* integrations matrix: never let table intrinsic width expand the viewport */
  #integrations {
    overflow-x: clip;
  }

  #integrations .shell {
    min-width: 0;
  }

  .display-grotesque-hero {
    font-size: clamp(30px, 11vw, 148px);
    line-height: 0.88;
  }

  .display-section {
    font-size: clamp(28px, 8vw, 72px);
  }

  .section-head__title {
    font-size: clamp(28px, 9vw, 64px);
  }

  .body-prose {
    font-size: clamp(16px, 4.2vw, 17px);
  }

  .hero__lede {
    font-size: clamp(17px, 4.5vw, 19px);
    max-width: none;
  }

  .ascii-figure { padding: var(--space-6) 0; }
  .invert .ascii-figure--on-invert { padding-inline: 0; }
  .section { padding: var(--space-12) 0; }
  .section--xl { padding: var(--space-16) 0 var(--space-12); }

  /* nav: two-row chrome · extra rhythm so it does not feel stacked tight */
  .nav__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    row-gap: var(--space-4);
    column-gap: var(--space-4);
    align-items: center;
    padding: var(--space-4) var(--space-4);
    padding-left: calc(var(--space-4) + env(safe-area-inset-left, 0px));
    padding-right: calc(var(--space-4) + env(safe-area-inset-right, 0px));
  }

  .nav__brand {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    align-self: center;
  }

  .nav__brand > div {
    min-width: 0;
  }

  .nav__wordmark {
    font-size: clamp(13px, 3.8vw, 18px);
    letter-spacing: 0.03em;
    line-height: 1.12;
  }

  .nav__toggle {
    grid-column: 2;
    grid-row: 1;
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    align-self: center;
    touch-action: manipulation;
  }

  .nav__cta {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    justify-self: stretch;
    justify-content: center;
    touch-action: manipulation;
    margin-top: var(--space-2);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-default);
  }

  .nav__menu {
    display: none;
  }

  /* height follows links · no full-viewport scroll well for four items */
  .nav__menu.is-open {
    display: flex;
    position: fixed;
    top: var(--nav-overlay-top, 100px);
    left: 0;
    right: 0;
    bottom: auto;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    height: auto;
    max-height: calc(
      100svh - var(--nav-overlay-top, 100px) - env(safe-area-inset-bottom, 0px)
    );
    /* opaque panel + blur: sits above page grain with .nav z-index */
    background-color: var(--bg-page);
    background-image: linear-gradient(
      180deg,
      var(--bg-grad-top) 0%,
      var(--bg-grad-mid) 45%,
      var(--bg-grad-bottom) 100%
    );
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    align-content: flex-start;
    padding: var(--space-6)
      calc(var(--page-margin) + env(safe-area-inset-right, 0px))
      max(var(--space-8), env(safe-area-inset-bottom, 0px))
      calc(var(--page-margin) + env(safe-area-inset-left, 0px));
    gap: var(--space-3);
    z-index: 1;
    border-top: 1px solid var(--border-heavy);
    border-bottom: 1px solid var(--border-default);
    box-shadow: 0 12px 40px rgba(10, 10, 10, 0.12);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .nav__menu .nav__link {
    flex: 0 0 auto;
    font-size: 18px;
    letter-spacing: 0.05em;
    line-height: 1.3;
    padding: var(--space-2) 0;
  }

  .hero__meta-strip {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--space-3);
    font-size: 10px;
    letter-spacing: 0.1em;
  }

  .hero__cta-row {
    flex-direction: column;
  }

  .hero__cta-row .btn {
    width: 100%;
    justify-content: center;
    touch-action: manipulation;
  }

  .hero {
    padding-bottom: var(--space-8);
  }

  .trust {
    gap: var(--space-6);
  }

  .trust__item {
    font-size: clamp(15px, 4vw, 18px);
  }

  .card {
    min-height: 0;
    padding: var(--space-6) var(--space-4);
  }

  .card__title {
    font-size: clamp(18px, 5vw, 24px);
  }

  .card__footer {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .accent-block .display-grotesque-hero {
    font-size: clamp(28px, 9vw, 84px);
  }

  .accent-block .body-prose {
    font-size: clamp(17px, 4.5vw, 20px);
  }

  .edge-label {
    display: none;
  }

  .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .section-head { grid-template-columns: 1fr; gap: var(--space-4); align-items: start; }
  .footer__cols { grid-template-columns: 1fr; }
  .footer__wordmark {
    font-size: clamp(22px, 6vw, 28px);
  }
  body::before { opacity: 0.03; }
  .crop-mark { display: none; }
  .bento { grid-template-columns: 1fr; }
  .bento__cell--featured,
  .bento__cell--medium,
  .bento__cell--standard {
    grid-column: span 1;
    grid-row: auto;
  }

  .stat__value {
    font-size: clamp(40px, 14vw, 88px);
  }

  .accent-block .grid {
    gap: var(--space-8);
  }

  .stack__body {
    padding-left: var(--space-4);
  }

  .btn {
    touch-action: manipulation;
  }

  .post__title { font-size: clamp(34px, 9vw, 56px); }
  .post__pull { padding-left: var(--space-5); margin: var(--space-8) 0; }

  .table-scroll .spec {
    min-width: 0;
    width: max-content;
  }

  .table-scroll .spec th,
  .table-scroll .spec td {
    width: auto;
    overflow-wrap: anywhere;
  }

  .table-scroll .spec td:last-child {
    white-space: nowrap;
  }

  .spec {
    font-size: 10px;
    letter-spacing: 0.05em;
  }

  .spec thead th,
  .spec tbody td {
    padding: 8px 10px;
  }

  .accent-block { padding: var(--space-12) 0; }

  .accent-block--engage {
    padding: var(--space-16) 0 var(--space-24);
    min-height: 0;
    align-items: flex-start;
  }

  .accent-block--engage .hero__cta-row {
    margin-bottom: 0;
    padding-bottom: var(--space-6);
    gap: var(--space-4);
  }

  .accent-block--engage .shell {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}