/* The Read: site-wide prototype styles */
/* v33 — Case study detail pages: document blocks no longer use data-reveal */
/*       (blocks taller than the viewport never hit the 0.12 IO threshold and */
/*       stayed invisible); detail-page rhythm tightened (.page-case-study hero, */
/*       .cs-intro-section, .cs-section on rhythm-tight, doc rules to space-7). */
/* v32 — Case Studies: /work becomes /case-studies (landing + six detail pages). */
/*       New: case-link, hero-kicker, cs-download, cs-doc content typography */
/*       (fragments from the case study bundles), and the seven fs-viz play */
/*       structures per Case Studies/Case Study Process/reference/Play Visuals Spec.md. */
/* v31: About leadership uses three-up grid and transparent PNG portraits. */
/* v30 — Home hero: subhead wider (`hero--home` only); headline keeps default */
/*       `.hero-h1` measure (no shared narrow cap). */
/* v29 — Day One playbook Option C; prior v29 home hero cap superseded by v30. */
/* v28 — Home hero: static two-line hierarchy (no opacity pivot). Book card: */
/*       no hover motion. Doors sections align to indexed column. Day One: */
/*       tighter hero bridge, punchier playbook block. */
/* v27 — Book credibility blocks use production cover image */
/*       (assets/images/Wiser-Book-Closed.png) via `.book-card-cover--photo`. */
/* v26 — P3.22 review pass: section rhythm tightened ~50%, section index numbers */
/*       removed, indexed grid restructured to 2 columns (content + right rail), */
/*       indexed-content widened, header Inquire reskinned as teal bold text link. */
/* v25 — Multi-page expansion: shared chrome from home/v24 + new component */
/*       primitives for /contact, /how-we-work, /day-one, /work, /wiser-method, */
/*       /ai-first-principles, /about. Dark mode primary, DNA strand bg, scroll */
/*       reveals, chromatic accents (operator forest + owl orange), frosted header. */

/* ============================================================
   1. Tokens — dark mode primary
   ============================================================ */

:root {
  /* Surfaces */
  --color-bg: #0E0D0B;
  --color-bg-elevated: #16140F;
  --color-bg-deep: #060503;

  /* Type */
  --color-fg: #EDE9DD;
  --color-fg-soft: #B8B2A2;
  --color-mute: #807A6C;
  --color-mute-strong: #9A9384;

  /* Rules */
  --color-rule: #26231D;
  --color-rule-strong: #3A362E;

  /* Accents — operator forest as primary, owl orange as second voice */
  --color-accent: #4FA092;
  --color-accent-deep: #0A4D44;
  --color-accent-bright: #6BC4B4;

  --color-brand-warm: #E89A4D;
  --color-brand-warm-deep: #B57838;
  --color-brand-warm-soft: rgba(232, 154, 77, 0.18);

  --color-error: #E07A6A;

  /* Inverse tokens (kept for any components that need light-on-dark within a dark page) */
  --color-inverse-bg: #EDE9DD;
  --color-inverse-fg: #0E0D0B;

  /* Typography */
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", "SF Mono", Menlo, monospace;
  --font-serif: "Instrument Serif", "Newsreader", Georgia, serif;

  /* Type scale */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 21px;
  --text-xl: 28px;
  --text-2xl: 36px;
  --text-3xl: 48px;
  --text-4xl: 64px;
  --text-5xl: 96px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 192px;

  /* Section rhythm — v26 tightened ~50% per P3.22 review */
  --rhythm-tight: var(--space-7);    /* 48px (was 96px / --space-9) */
  --rhythm-normal: var(--space-8);   /* 64px (was 128px / --space-10) */
  --rhythm-wide: var(--space-9);     /* 96px (was 192px / --space-11) */

  /* Motion */
  --duration-instant: 100ms;
  --duration-quick: 200ms;
  --duration-base: 400ms;
  --duration-medium: 600ms;
  --duration-deliberate: 800ms;

  --easing-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --easing-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Layout */
  --container-max: 1280px;
  --header-height: 64px;
}

/* ============================================================
   2. Reset and base
   ============================================================ */

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background: var(--color-bg);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.55;
  font-feature-settings: "ss01", "cv11";
  position: relative;
  overflow-x: hidden;
}

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

ul, ol {
  list-style: none;
}

a {
  color: var(--color-accent-bright);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--duration-quick) var(--easing-ease-out),
              text-decoration-thickness var(--duration-instant) linear;
}

a:hover {
  text-decoration-thickness: 2px;
  color: var(--color-brand-warm);
}

a:focus-visible {
  outline: 2px solid var(--color-accent-bright);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection {
  background: var(--color-brand-warm-soft);
  color: var(--color-fg);
}

/* Skip link (accessibility) */

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  background: var(--color-fg);
  color: var(--color-bg);
  padding: var(--space-3) var(--space-5);
  z-index: 1000;
  text-decoration: none;
  border-radius: 4px;
  transition: top var(--duration-quick) var(--easing-ease-out);
}

.skip-link:focus {
  top: var(--space-4);
}

/* ============================================================
   3. DNA strand background (signature visual element)
   The metaphor link: "AI will be in the DNA of every business."
   The visual enacts the copy.

   v32: rendered on canvas from projected 3D points so mobile and
   desktop use the same geometry instead of CSS-rotated flat DOM rungs.
   ============================================================ */

.strand-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* Vertical mask so the strand fades at top and bottom edges,
     avoiding a hard cut where it meets the header / footer. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
}

.strand-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* Legacy placeholder retained in page markup; motion.js hides it and
   inserts the canvas renderer into .strand-bg. */
.strand-stage {
  display: none;
}

/* Each rung is a horizontal element that gets rotated around its Y axis
   by an angle proportional to its vertical position — that rotation
   builds the helix. The bar is the rung itself; the two nodes are the
   strand endpoints, traced by the eye into the spiral curves. */
.strand-rung {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
}

.strand-bar {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  margin-top: -0.5px;
  background: var(--color-accent);
  opacity: 0.065;
}

/* v18: atoms +10% again (22→24, 26→29). At perspective:1100 a 24px node
   scales between ~30.5px (front) and ~19.2px (back). Opacities preserved
   from v17 since the user is happy with the visibility level. */
.strand-node {
  position: absolute;
  top: 50%;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: 0.22;
  box-shadow: 0 0 6px rgba(79, 160, 146, 0.11);
}

.strand-node--l { left: 0; margin-left: -12px; }
.strand-node--r { right: 0; margin-right: -12px; }

.strand-rung--accent .strand-bar {
  background: var(--color-brand-warm);
  opacity: 0.12;
  height: 1px;
}

.strand-rung--accent .strand-node {
  background: var(--color-brand-warm);
  opacity: 0.34;
  width: 29px;
  height: 29px;
  margin-top: -14.5px;
  box-shadow: 0 0 9px rgba(232, 154, 77, 0.16),
              0 0 20px rgba(232, 154, 77, 0.06);
}

.strand-rung--accent .strand-node.strand-node--l { margin-left: -14.5px; }
.strand-rung--accent .strand-node.strand-node--r { margin-right: -14.5px; }

/* Atmospheric glow behind the hero — operator forest fading to charcoal.
   Anchored to the top so it lives in the hero zone, not the whole page. */
.atmosphere {
  position: fixed;
  top: -10%;
  left: -10%;
  width: 80vw;
  height: 90vh;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 30% 40%,
    rgba(79, 160, 146, 0.14),
    rgba(79, 160, 146, 0.06) 35%,
    transparent 65%
  );
  filter: blur(40px);
  opacity: 1;
  transition: opacity var(--duration-medium) var(--easing-ease-out);
}

.atmosphere.is-faded {
  opacity: 0;
}

/* Content stacks above the strand and atmosphere */
.site-header,
main,
.site-footer {
  position: relative;
  z-index: 2;
}

/* ============================================================
   4. Layout utilities
   ============================================================ */

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: clamp(24px, 8vw, 128px);
  padding-right: clamp(24px, 8vw, 128px);
}

/* Indexed section grid — v26: 2-column layout (content + right rail). The
   left-margin section-index column is removed entirely per P3.22 (numbering
   was confusing when sections reorder and the marginalia was carrying weight
   not earned). Content widened to 72ch; right rail at 3fr preserved for the
   pull-callout pattern on /how-we-work.

   Per-page section-index mono labels are still rendered in markup but hidden
   visually via `.margin-index { display: none }` so we don't have to scrub
   every page; if we ever want them back, a single line restores them. */

.indexed-grid {
  display: grid;
  grid-template-columns: 9fr 3fr;
  gap: var(--space-6);
}

.margin-index {
  display: none;
}

.indexed-content {
  grid-column: 1 / 2;
  max-width: 72ch;
}

.section {
  padding-top: var(--rhythm-normal);
  padding-bottom: var(--rhythm-normal);
}

.section-rule {
  border: 0;
  border-top: 1px solid var(--color-rule);
  margin: 0 0 var(--space-9) 0;
  width: 100%;
}

/* ============================================================
   5. Header — transparent at top, frosted glass on scroll
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  height: var(--header-height);
  display: flex;
  align-items: center;
  transition: height var(--duration-quick) var(--easing-ease-out),
              background var(--duration-quick) ease,
              backdrop-filter var(--duration-quick) ease,
              border-color var(--duration-quick) ease;
  border-bottom: 1px solid transparent;
}

.site-header.is-condensed {
  height: 56px;
  background: rgba(14, 13, 11, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
          backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: var(--color-rule);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-fg);
}

.brand:focus-visible {
  outline: 2px solid var(--color-fg);
  outline-offset: 4px;
  border-radius: 2px;
}

.brand-mark {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.brand-wordmark {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-base);
  letter-spacing: -0.005em;
  color: var(--color-fg);
}

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

.nav-link {
  color: var(--color-fg-soft);
  font-size: var(--text-sm);
  font-weight: 400;
  text-decoration: none;
  padding: var(--space-2) 0;
  position: relative;
  transition: color var(--duration-quick) ease;
}

.nav-link:hover {
  color: var(--color-fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--color-brand-warm);
}

.nav-link:focus-visible {
  outline: 2px solid var(--color-fg);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ============================================================
   6. Buttons
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 500;
  text-decoration: none;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--duration-quick) ease,
              border-color var(--duration-quick) ease,
              color var(--duration-quick) ease,
              box-shadow var(--duration-quick) ease,
              transform var(--duration-quick) ease;
  white-space: nowrap;
}

.btn-sm {
  font-size: var(--text-sm);
  padding: 10px 18px;
}

.btn-lg {
  font-size: var(--text-base);
  padding: 16px 28px;
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 0 rgba(232, 154, 77, 0);
}

.btn-primary:hover {
  background: var(--color-accent-bright);
  border-color: var(--color-accent-bright);
  color: var(--color-bg);
  box-shadow: 0 0 24px 0 rgba(232, 154, 77, 0.22);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
  background: var(--color-accent);
  box-shadow: 0 0 0 0 rgba(232, 154, 77, 0);
}

.btn-secondary {
  background: transparent;
  color: var(--color-fg);
  border-color: var(--color-rule-strong);
}

.btn-secondary:hover {
  border-color: var(--color-brand-warm);
  color: var(--color-brand-warm);
}

/* Header button (Inquire on dark surface) — v26 deprecated in favor of
   .nav-inquire text-link below. Kept defined for any other surface that
   still uses btn-primary in the header. */
.site-header .btn-primary {
  border-color: var(--color-accent);
}

.btn:focus-visible {
  outline: 2px solid var(--color-accent-bright);
  outline-offset: 2px;
}

.site-header .btn:focus-visible {
  outline-color: var(--color-fg);
}

/* Header Inquire text link (v26 per P3.22). The previous teal pill button
   carried too much weight in the header relative to the other nav links.
   This treatment matches nav-link sizing and weight pattern (small,
   single-word) but uses the accent color and bold weight to keep the
   conversion affordance recognizable. No box, no underline at rest. */
.nav-inquire {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent-bright);
  text-decoration: none;
  padding: var(--space-2) 0;
  transition: color var(--duration-quick) ease;
}

.nav-inquire:hover {
  color: var(--color-brand-warm);
}

.nav-inquire:focus-visible {
  outline: 2px solid var(--color-accent-bright);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ============================================================
   7. Inline link
   ============================================================ */

.inline-link {
  display: inline-block;
  color: var(--color-accent-bright);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  margin-top: var(--space-7);
  transition: color var(--duration-quick) ease;
}

.inline-link:hover {
  color: var(--color-brand-warm);
}

.inline-link .arrow {
  display: inline-block;
  transition: transform var(--duration-quick) var(--easing-ease-out);
}

.inline-link:hover .arrow {
  transform: translateX(4px);
}

/* ============================================================
   8. Mono labels
   ============================================================ */

.mono-label, .mono-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-mute-strong);
  display: block;
}

/* ============================================================
   9. Hero (Section 1)
   ============================================================ */

.hero {
  padding-top: var(--rhythm-wide);
  padding-bottom: var(--rhythm-tight);
  position: relative;
}

.hero-inner {
  position: relative;
  z-index: 1;
}

.hero-h1 {
  font-family: var(--font-sans);
  font-weight: 650;
  font-size: clamp(40px, 5.6vw, 76px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--color-fg);
  max-width: 22ch;
}

/* Home only: subhead wider than default 42ch so it lines up with how the
   two-line H1 reads at display size (v30; v29 shared cap reverted). */
.hero--home .hero-subhead {
  max-width: min(54ch, 100%);
}

.hero-h1 .line {
  display: block;
  /* text-wrap: balance distributes words evenly across each clause so
     neither half-sentence orphans a word on its own line. Applied at the
     line level (not the H1) because Line A and Line B are independent
     typographic units in this two-clause Sinek construction. */
  text-wrap: balance;
}

/* Pivot motion retired (v28): Line A stays muted, Line B carries emphasis in
   color and weight. No JS opacity dance; reads reliably on first paint. */
.hero-h1 .line-a {
  color: var(--color-fg-soft);
  opacity: 1;
}

.hero-h1 .line-b {
  color: var(--color-fg);
  font-weight: 700;
  opacity: 1;
  transform: none;
  margin-top: var(--space-2);
}

.hero-rule {
  display: block;
  width: 48px;
  height: 1px;
  background: var(--color-brand-warm);
  margin-top: var(--space-5);
  opacity: 0;
  box-shadow: 0 0 12px 0 rgba(232, 154, 77, 0.45);
}

.hero-subhead {
  font-size: var(--text-lg);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--color-fg-soft);
  max-width: 42ch;
  margin-top: var(--space-6);
  opacity: 0;
}

.hero-cta {
  margin-top: var(--space-7);
  opacity: 0;
}

.cta-pair {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* ============================================================
   10. Scroll reveal pattern (sections 2-8)
   Wired by motion.js via IntersectionObserver. Hero is excluded —
   it has its own entry beat. Stagger via data-reveal-delay attribute.
   ============================================================ */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms var(--easing-ease-out),
              transform 520ms var(--easing-ease-out);
  will-change: opacity, transform;
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal][data-reveal-delay="1"] { transition-delay: 80ms; }
[data-reveal][data-reveal-delay="2"] { transition-delay: 160ms; }
[data-reveal][data-reveal-delay="3"] { transition-delay: 240ms; }
[data-reveal][data-reveal-delay="4"] { transition-delay: 320ms; }
[data-reveal][data-reveal-delay="5"] { transition-delay: 400ms; }

/* ============================================================
   11. Indexed sections (Day One, How We Work, etc.)
   ============================================================ */

.indexed-section {
  padding-top: var(--rhythm-normal);
  padding-bottom: var(--rhythm-normal);
}

.section-h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--color-fg);
  margin-bottom: var(--space-6);
}

/* Strong single-sentence lead under an H2 (e.g. Day One playbook) */
.section-lede-impact {
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--color-fg);
  max-width: 52ch;
  margin: 0 0 var(--space-6);
}

.prose {
  max-width: 64ch;
}

.prose p {
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--color-fg-soft);
}

.prose p + p {
  margin-top: var(--space-5);
}

.prose.lede {
  margin-bottom: var(--space-7);
}

/* ============================================================
   12. Canons (Section 4)
   ============================================================ */

.canons {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-bottom: var(--space-7);
}

.canon {
  /* Single-column layout. The drop cap on .canon-text::first-letter is
     the visual marker for each canon; no separate initial column needed.
     The five canons stack vertically and the drop caps naturally spell
     W I S E R down the page as the eye scans. */
  max-width: 60ch;
}

.canon-text {
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--color-fg-soft);
  margin: 0;
}

/* Drop cap. Instrument Serif against the otherwise-sans page provides
   editorial typographic contrast and ties to the WISER-as-published-
   method framing. Operator-forest teal extends the existing accent
   thread (CTA buttons, inline links). Sized to span ~3 lines of body
   text at clamp body sizes; line-height tightened so it sits on the
   baseline of the first line and the descender doesn't push line 4. */
.canon-text::first-letter {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 4.2em;
  line-height: 0.85;
  color: var(--color-accent);
  float: left;
  margin-right: 14px;
  margin-top: 4px;
  margin-bottom: -4px;
  /* Instrument Serif has slight optical overhang on caps; pull the
     glyph left a hair so the body text aligns to the column edge. */
  margin-left: -2px;
}

/* ============================================================
   13. Cases (Section 6)
   ============================================================ */

.case {
  margin-top: var(--space-7);
}

.case .mono-tag {
  margin-bottom: var(--space-3);
  color: var(--color-brand-warm);
}

.case p {
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--color-fg-soft);
  max-width: 64ch;
}

.case-rule {
  border: 0;
  border-top: 1px solid var(--color-rule);
  margin: var(--space-6) 0 0 0;
  max-width: 64ch;
  width: 100%;
}

/* ============================================================
   14. Doors (Section 7)
   ============================================================ */

.doors-section {
  padding-top: var(--rhythm-wide);
  padding-bottom: var(--rhythm-normal);
}

.doors-h2 {
  margin-bottom: var(--space-7);
}

.doors-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-9);
  align-items: start;
  position: relative;
}

.doors-pair::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background: var(--color-rule);
  pointer-events: none;
}

.door {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.door-h3 {
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-fg);
}

.door p {
  font-size: var(--text-md);
  line-height: 1.55;
  max-width: 36ch;
  color: var(--color-fg-soft);
  margin-bottom: var(--space-2);
}

.door .btn {
  align-self: flex-start;
}

/* ============================================================
   15. FAQ (Section 8)
   ============================================================ */

.faq {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.qa .q {
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-fg);
  margin-bottom: var(--space-3);
  max-width: 64ch;
}

.qa .a {
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--color-fg-soft);
  max-width: 64ch;
}

/* ============================================================
   16. Footer
   ============================================================ */

.site-footer {
  background: var(--color-bg-deep);
  padding-top: var(--space-9);
  padding-bottom: var(--space-7);
  margin-top: var(--rhythm-normal);
  border-top: 1px solid var(--color-rule);
}

.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-8);
  padding-top: var(--space-7);
  padding-bottom: var(--space-9);
}

.footer-brand-lockup {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.footer-mark {
  width: 32px;
  height: 32px;
  object-fit: contain;
  opacity: 0.95;
}

.footer-wordmark {
  font-size: var(--text-md);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--color-fg);
}

.footer-tagline {
  font-size: var(--text-sm);
  color: var(--color-mute-strong);
  margin-top: var(--space-3);
}

.footer-col .mono-label {
  margin-bottom: var(--space-4);
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-col a {
  color: var(--color-fg-soft);
  text-decoration: none;
  font-size: var(--text-sm);
}

.footer-col a:hover {
  color: var(--color-brand-warm);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.footer-col .arrow-nw {
  color: var(--color-mute);
  font-size: 0.85em;
}

.footer-meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--color-mute);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-rule);
}

.footer-meta a {
  color: var(--color-mute);
  text-decoration: none;
}

.footer-meta a:hover {
  color: var(--color-fg);
  text-decoration: underline;
}

/* ============================================================
   17. Responsive (mobile and tablet)
   ============================================================ */

@media (max-width: 1023px) {
  .container {
    padding-left: clamp(24px, 6vw, 64px);
    padding-right: clamp(24px, 6vw, 64px);
  }

}

@media (max-width: 767px) {
  :root {
    --header-height: 56px;
  }

  .container {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Indexed grid collapses */
  .indexed-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .margin-index {
    position: static;
    padding-top: 0;
    margin-bottom: var(--space-3);
  }

  .indexed-content {
    grid-column: 1 / -1;
    max-width: none;
  }

  /* Hero scales down */
  .hero {
    padding-top: var(--space-9);
    padding-bottom: var(--space-7);
  }

  .hero-h1 {
    font-size: clamp(40px, 11vw, 56px);
    max-width: none;
  }

  .hero--home .hero-subhead {
    max-width: none;
  }

  .hero-subhead {
    font-size: var(--text-base);
  }

  /* Canons */
  .canons {
    gap: var(--space-5);
  }

  .canon-text::first-letter {
    font-size: 3.6em;
    margin-right: 10px;
    margin-top: 2px;
  }

  /* Doors */
  .doors-pair {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }

  .doors-pair::after {
    top: 50%;
    bottom: auto;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 1px;
  }

  /* Footer */
  .footer-inner {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }

  .footer-meta {
    flex-direction: column;
    gap: var(--space-3);
  }

  /* Header tightens; hide text nav links and keep only the Inquire CTA */
  .site-nav {
    gap: var(--space-4);
  }

  .site-nav .nav-link {
    display: none;
  }

  .brand-wordmark {
    white-space: nowrap;
  }

  .hero {
    padding-top: var(--space-7);
  }
}

/* ============================================================
   M1. Interior hero variant (single-line H1, no pivot)
   Used on every page except home. Same chrome (rule + subhead + CTA
   cascade), but the H1 is one statement rather than the two-line
   Sinek pivot. Slightly tighter top padding too.
   ============================================================ */

.hero--interior {
  padding-top: var(--space-10);
  padding-bottom: var(--space-9);
}

.page-day-one .hero--interior {
  padding-bottom: var(--space-6);
}

.page-day-one .hero-cta {
  margin-top: var(--space-5);
}

.page-day-one main > .section.indexed-section:first-of-type {
  padding-top: var(--space-6);
}

.hero--interior .hero-h1 {
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.08;
  max-width: 20ch;
}

/* The hero subhead on interior pages is allowed to be slightly wider
   so two-sentence subheads (e.g. /about) don't ladder awkwardly. */
.hero--interior .hero-subhead {
  max-width: 56ch;
}

/* ============================================================
   M2. Inline emphasis — semibold + forest underline
   Used for canonical first-mentions of named IP ("AI First Principles",
   "WISER Method", "An army of agents and integrations").
   ============================================================ */

.emph-named {
  font-weight: 600;
  color: var(--color-fg);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  text-decoration-color: var(--color-accent);
}

/* Contrast emphasis — used for the "boardroom / floor" pair on
   /how-we-work Section 2. The two nouns sit at fg; the connecting
   words around them sit at the regular mute fg-soft. */
.emph-contrast {
  color: var(--color-fg);
}

/* ============================================================
   M3. Pull callout — italic serif sitting in the right margin
   Used on /how-we-work Section 3 ("the Agile Manifesto for the AI era")
   and Section 6 ("AI is not a department"). On indexed-grid layouts the
   callout slots into the right (3fr) track via grid-column.
   ============================================================ */

.indexed-grid .pull-callout {
  grid-column: 2 / 3;
  align-self: start;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: 1.4;
  color: var(--color-fg);
  margin-top: var(--space-6);
  padding-left: var(--space-5);
  border-left: 2px solid var(--color-accent);
  max-width: 28ch;
}

/* ============================================================
   M4. KV list — key/value list with hairlines between rows
   Base atom used by:
     - /wiser-method Section 2 (four capabilities)
     - /wiser-method Section 4 (three axioms)
     - /wiser-method Section 7 (Plays / Playbooks / Positions)
     - /how-we-work Section 7 (what stays)
     - /day-one Section 5 (four signals)
     - /ai-first-principles Section 3 (twelve principles)
   Variants via modifier classes for label treatment.
   ============================================================ */

.kv-list {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-7);
}

.kv-item {
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-rule);
}

.kv-item:first-child {
  padding-top: var(--space-5);
}

.kv-list--flush .kv-item:first-child {
  border-top: 1px solid var(--color-rule);
}

.kv-item:last-child {
  border-bottom: 0;
}

.kv-key {
  display: block;
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-fg);
  margin-bottom: var(--space-3);
  letter-spacing: -0.005em;
}

.kv-body {
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--color-fg-soft);
  max-width: 64ch;
}

.kv-body p + p {
  margin-top: var(--space-4);
}

/* Variant: numbered (principles 01-12).
   Number renders as mono in the top-left of the row; key + body sit
   to the right in a single column. Uses grid for clean alignment. */
.kv-list--numbered .kv-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--space-5);
  align-items: baseline;
}

.kv-list--numbered .kv-number {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  color: var(--color-accent);
  letter-spacing: 0.04em;
  line-height: 1.3;
}

.kv-list--numbered .kv-axiom {
  display: block;
  margin-top: var(--space-4);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: 1.4;
  color: var(--color-fg);
}

/* Variant: signal — for /day-one's four signals.
   Number as mono accent, then bold lead, then body. Same row treatment. */
.kv-list--signal .kv-key {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.kv-list--signal .signal-num {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  color: var(--color-accent);
  letter-spacing: 0.04em;
  font-weight: 400;
}

/* ============================================================
   M5. WISER canon detailed block (for /how-we-work Section 4)
   v26 per P3.22: the sticky mono initial in the left rail was lifted out.
   Canons now render single-column, with the first letter of each canon
   name (W, I, S, E, R) rendered extra-bold in the operator-forest accent.
   The aphorism rhythm is intact (W I S E R still reads down the page as
   the eye scans) but the marginalia is gone.
   ============================================================ */

.wiser-canons {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-7);
}

.wiser-canon {
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
  max-width: 64ch;
}

.wiser-canon + .wiser-canon {
  border-top: 1px solid var(--color-rule);
}

/* v26: legacy sticky margin-initial styles kept as `display: none` so
   any leftover markup doesn't reflow. Safe to delete once HTML scrubs. */
.wiser-canon-initial {
  display: none;
}

.wiser-canon-body {
  max-width: 64ch;
}

.wiser-canon-name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xl);
  color: var(--color-fg);
  margin-bottom: var(--space-4);
  letter-spacing: -0.01em;
}

/* The first character of each canon name (W, I, S, E, R) lifts in weight
   and shifts to the operator-forest accent. Replaces the prior sticky
   margin-initial treatment with a quieter typographic accent that still
   makes the WISER acronym scannable down the page. */
.wiser-canon-name::first-letter {
  font-weight: 800;
  color: var(--color-accent);
}

.wiser-canon-body p {
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--color-fg-soft);
}

.wiser-canon-body p + p {
  margin-top: var(--space-5);
}

/* Refine closing pair gets emphasis: "Most firms skip refinement. We do not." */
.wiser-canon-close {
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--color-fg);
  margin-top: var(--space-5);
}

/* Compressed canon treatment for /wiser-method (different job).
   Aphorism then list of AIFP principles per canon. */
.canons-compact {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-7);
}

.canon-compact {
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-rule);
}

.canon-compact:first-child {
  border-top: 1px solid var(--color-rule);
}

.canon-compact-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-md);
  color: var(--color-accent);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-3);
}

.canon-compact-aphorism {
  font-size: var(--text-lg);
  line-height: 1.45;
  color: var(--color-fg);
  margin-bottom: var(--space-3);
  max-width: 60ch;
}

.canon-compact-principles {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-fg-soft);
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
  max-width: 72ch;
}

.canon-compact-principles strong {
  color: var(--color-mute-strong);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--text-xs);
  margin-right: var(--space-2);
}

/* ============================================================
   M6. Pull-quote section (for /how-we-work Section 5)
   Full-bleed within the container, serif italic H2, centered prose,
   hairline brackets above and below. Different register from the
   indexed editorial sections — earns its own visual weight.
   ============================================================ */

.pullquote-section {
  padding-top: var(--rhythm-wide);
  padding-bottom: var(--rhythm-wide);
  text-align: center;
}

.pullquote-inner {
  max-width: 720px;
  margin: 0 auto;
}

.pullquote-rule {
  display: block;
  width: 64px;
  height: 1px;
  background: var(--color-accent);
  margin: 0 auto var(--space-7);
  transform-origin: center;
}

.pullquote-h2 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-fg);
  margin-bottom: var(--space-7);
}

.pullquote-body p {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--color-fg-soft);
  max-width: 60ch;
  margin: 0 auto;
}

.pullquote-body p + p {
  margin-top: var(--space-5);
}

/* Left-aligned variant (v26 per P3.22 item j) for /how-we-work
   "Rearchitect with purpose. Not rebuild." — the line is strong enough
   to carry editorial weight without center-staging. */
.pullquote-section--left {
  text-align: left;
}

.pullquote-section--left .pullquote-inner {
  margin: 0;
  max-width: 64ch;
}

.pullquote-section--left .pullquote-rule {
  margin-left: 0;
}

.pullquote-section--left .pullquote-body p {
  margin: 0;
  max-width: 60ch;
}

.pullquote-section--left .pullquote-body p + p {
  margin-top: var(--space-5);
}

/* ============================================================
   M7. Triad block — three side-by-side items with vertical hairlines
   Used by /how-we-work Section 6 (Mindset / Culture / Operations)
   and by /about Section 6 (four beliefs — uses 2x2 variant).
   ============================================================ */

.triad {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-7);
  margin-top: var(--space-7);
  padding-top: var(--space-7);
  border-top: 1px solid var(--color-rule);
}

.triad-item {
  padding-right: var(--space-5);
  border-right: 1px solid var(--color-rule);
}

.triad-item:last-child {
  border-right: 0;
  padding-right: 0;
}

.triad-name {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}

.triad-body {
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--color-fg-soft);
}

/* Four-up variant for /about Section 6's four beliefs */
.triad--four {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

/* Row variant (v26 per P3.22 items k and u). Items stack vertically with
   horizontal hairlines between them. The triad-name becomes a stronger
   label (operator-forest, bold) and the body wraps wider. Used for the
   mindset/culture/operations block on /how-we-work and for the four
   beliefs on /about, both flipped from columns to rows per Anthony's
   review. */
.triad--rows {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  gap: 0;
  border-top: 0;
  padding-top: var(--space-6);
}

.triad--rows .triad-item {
  display: grid;
  grid-template-columns: minmax(160px, 200px) 1fr;
  gap: var(--space-6);
  align-items: baseline;
  padding: var(--space-5) 0;
  border-right: 0;
  border-top: 1px solid var(--color-rule);
}

.triad--rows .triad-item:last-child {
  border-bottom: 1px solid var(--color-rule);
}

.triad--rows .triad-name {
  margin-bottom: 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-accent);
}

.triad--rows .triad-body {
  max-width: 60ch;
}

/* Closing line below the triad */
.triad-close {
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--color-fg-soft);
  max-width: 64ch;
  margin-top: var(--space-7);
}

/* ============================================================
   M8. Bio block (for /about Section 3 + Section 4 Advisor)
   Two-up grid for leadership; single-column for advisor.
   Portraits use real headshots with the same editorial framing as the
   earlier placeholder lockups.
   ============================================================ */

.bio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-7);
}

.bio {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.bio-portrait {
  width: 100%;
  aspect-ratio: 4 / 5;
  max-width: 320px;
  background: linear-gradient(
    150deg,
    var(--color-bg-elevated) 0%,
    var(--color-bg) 100%
  );
  border: 1px solid var(--color-rule);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.bio-portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(79, 160, 146, 0.08),
    transparent 60%
  );
  pointer-events: none;
  z-index: 1;
}

.bio-portrait-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.88) contrast(1.02);
}

.bio-portrait--transparent {
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.bio-portrait--transparent::before {
  display: none;
}

.bio-portrait--transparent .bio-portrait-img {
  object-fit: contain;
  object-position: center bottom;
  filter: saturate(0.96) contrast(1.02);
}

.bio-portrait-initials {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 96px;
  line-height: 1;
  color: var(--color-fg-soft);
  z-index: 1;
}

.bio-portrait-note {
  position: absolute;
  bottom: var(--space-3);
  left: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-mute);
  letter-spacing: 0.04em;
  z-index: 1;
}

.bio-name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xl);
  color: var(--color-fg);
  letter-spacing: -0.01em;
  margin: 0;
}

.bio-role {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin-top: var(--space-1);
}

.bio-body {
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--color-fg-soft);
  max-width: 60ch;
}

.bio-body p + p {
  margin-top: var(--space-4);
}

.bio-credit {
  font-size: var(--text-sm);
  color: var(--color-mute-strong);
  margin-top: var(--space-4);
}

/* Advisor band — single-column variant below the leadership grid */
.bio--advisor {
  max-width: 720px;
  margin-top: var(--space-7);
}

.bio--advisor .bio-portrait {
  max-width: 220px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}

.bio--advisor .bio-portrait-initials {
  font-size: 64px;
}

/* ============================================================
   M9. Modal (Inquire form, used sitewide)
   Single block injected by motion.js. Opens on [data-modal-open="inquire"]
   click. Body scroll-locked when open. Closes on backdrop click, X button,
   or Escape key. Focus trapped inside.
   ============================================================ */

body.modal-open {
  overflow: hidden;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(6, 5, 3, 0.78);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(24px, 6vh, 80px) clamp(16px, 4vw, 48px);
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--easing-ease-out);
}

.modal-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-rule-strong);
  border-radius: 8px;
  width: 100%;
  max-width: 600px;
  padding: clamp(32px, 5vw, 56px) clamp(28px, 5vw, 48px);
  position: relative;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  transform: translateY(20px);
  transition: transform var(--duration-base) var(--easing-ease-out);
}

.modal-backdrop.is-open .modal {
  transform: translateY(0);
}

.modal-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  background: transparent;
  border: 0;
  color: var(--color-fg-soft);
  font-size: 24px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px;
  transition: color var(--duration-quick) ease,
              background var(--duration-quick) ease;
}

.modal-close:hover {
  color: var(--color-fg);
  background: var(--color-rule);
}

.modal-close:focus-visible {
  outline: 2px solid var(--color-accent-bright);
  outline-offset: 2px;
}

.modal-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--color-fg);
  margin-bottom: var(--space-3);
}

.modal-subtitle {
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--color-fg-soft);
  margin-bottom: var(--space-7);
}

/* ============================================================
   M10. Form (used by modal + /contact + /day-one booking)
   ============================================================ */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-field label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-fg);
  letter-spacing: -0.005em;
}

.form-field .required-mark {
  color: var(--color-brand-warm);
  margin-left: var(--space-1);
}

.form-field input,
.form-field textarea,
.form-field select {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--color-fg);
  background: var(--color-bg);
  border: 1px solid var(--color-rule-strong);
  border-radius: 6px;
  padding: 12px 14px;
  transition: border-color var(--duration-quick) ease,
              box-shadow var(--duration-quick) ease;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
}

.form-field textarea {
  resize: vertical;
  min-height: 96px;
}

.form-field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--color-fg-soft) 50%),
                    linear-gradient(135deg, var(--color-fg-soft) 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 13px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}

.form-field input:focus-visible,
.form-field textarea:focus-visible,
.form-field select:focus-visible {
  outline: none;
  border-color: var(--color-accent-bright);
  box-shadow: 0 0 0 3px rgba(79, 160, 146, 0.22);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--color-mute);
}

.form-submit {
  align-self: flex-start;
  margin-top: var(--space-3);
}

.form-help {
  font-size: var(--text-sm);
  color: var(--color-mute-strong);
  margin-top: var(--space-3);
}

.form-error {
  color: #ffb4a8;
  font-size: var(--text-sm);
  margin: var(--space-3) 0 0;
}

.form-success {
  border: 1px solid rgba(79, 160, 146, 0.35);
  border-radius: 10px;
  padding: var(--space-6);
  background: rgba(79, 160, 146, 0.08);
}

.form-success h2 {
  color: var(--color-fg);
  font-size: var(--text-xl);
  margin: 0 0 var(--space-2);
}

.form-success p {
  color: var(--color-fg-soft);
  margin: 0;
}

/* Inline alternative line below the form (used on /contact) */
.form-alt {
  margin-top: var(--space-7);
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--color-fg-soft);
}

.form-alt + .form-alt {
  margin-top: var(--space-3);
}

/* ============================================================
   M11. Day One signal routes — three plain-text decision branches
   below the four signals. No CTA chrome. Bold lead + body.
   ============================================================ */

.signal-routes {
  margin-top: var(--space-7);
  padding-top: var(--space-7);
  border-top: 1px solid var(--color-rule);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.signal-route {
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--color-fg-soft);
  max-width: 64ch;
}

.signal-route strong {
  color: var(--color-fg);
  font-weight: 600;
}

/* ============================================================
   M12. Work cases (for /work) — extended pattern from home's
   compressed three-sentence card. Each case is multi-paragraph.
   ============================================================ */

.case--extended {
  margin-top: var(--space-9);
}

.case--extended .mono-tag {
  margin-bottom: var(--space-4);
  color: var(--color-brand-warm);
}

.case--extended h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xl);
  color: var(--color-fg);
  margin-bottom: var(--space-5);
  letter-spacing: -0.01em;
}

.case--extended p {
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--color-fg-soft);
  max-width: 64ch;
}

.case--extended p + p {
  margin-top: var(--space-5);
}

/* Anonymization note (small italic line below hero on /work) */
.anonymization-note {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-md);
  color: var(--color-fg-soft);
  text-align: left;
  max-width: 60ch;
}

/* ============================================================
   M13. Bridge section (centered short block)
   Used on /work between the case list and the doors close.
   Smaller version of the pull-quote treatment.
   ============================================================ */

.bridge-section {
  padding-top: var(--rhythm-wide);
  padding-bottom: var(--rhythm-normal);
  text-align: center;
}

.bridge-inner {
  max-width: 600px;
  margin: 0 auto;
}

.bridge-h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--color-fg);
  margin-bottom: var(--space-5);
}

.bridge-body {
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--color-fg-soft);
  margin-bottom: var(--space-7);
}

/* ============================================================
   M14. Inline figure (mono digit emphasis)
   Used in /how-we-work Section 9 for "50 to 500" and "100 and 300".
   ============================================================ */

.figure {
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
  font-size: 0.94em;
  color: var(--color-fg);
}

/* ============================================================
   M14b. Book card
   Home "How We Work" and /wiser-method hero: real cover art in
   `.book-card-cover--photo`; typographic fallback remains on
   `.book-card-cover` without the modifier.
   ============================================================ */

.book-feature {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr;
  gap: var(--space-7);
  align-items: start;
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-rule);
}

.book-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}


.book-card-cover {
  position: relative;
  width: 180px;
  aspect-ratio: 2 / 3;
  background:
    linear-gradient(135deg, #F4EFE2 0%, #E6DEC8 100%);
  border: 1px solid var(--color-rule-strong);
  border-radius: 2px;
  padding: var(--space-5) var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow:
    -3px 6px 0 0 rgba(0, 0, 0, 0.18),
    -1px 2px 12px 0 rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.book-card-cover::before {
  /* spine highlight on the left edge */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 8px;
  background: linear-gradient(to right,
    rgba(0, 0, 0, 0.16) 0%,
    rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

.book-card-cover--photo {
  width: 200px;
  aspect-ratio: auto;
  height: auto;
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
  overflow: visible;
}

.book-card-cover--photo::before {
  display: none;
}

.book-card-cover--photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

.book-card-mark {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-deep);
  opacity: 0.85;
}

.book-card-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 34px;
  line-height: 0.95;
  letter-spacing: -0.015em;
  color: #0E0D0B;
}

.book-card-sub {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #2A2620;
  margin-top: var(--space-2);
}

.book-card-author {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #4A4438;
}

.book-feature-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-top: var(--space-2);
}

.book-feature-copy p {
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--color-fg-soft);
  max-width: 56ch;
}

.book-feature-meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-mute-strong);
}

/* ============================================================
   M15. Outbound link arrow (NE arrow for external links)
   ============================================================ */

.arrow-ne {
  display: inline-block;
  margin-left: 4px;
  color: var(--color-mute);
  font-size: 0.85em;
  transition: transform var(--duration-quick) ease;
}

a:hover .arrow-ne {
  transform: translate(2px, -2px);
  color: var(--color-brand-warm);
}

/* ============================================================
   M16. Doors copy variant (used on interior pages where the
   "Two doors" close uses prose paragraphs rather than the home's
   compact two-card pattern).
   ============================================================ */

.doors-prose {
  margin-bottom: var(--space-7);
}

.doors-prose .door-prose-item {
  margin-bottom: var(--space-6);
  max-width: 64ch;
}

.doors-prose .door-prose-item:last-child {
  margin-bottom: 0;
}

.doors-prose .door-prose-lead {
  font-weight: 600;
  color: var(--color-fg);
  font-size: var(--text-lg);
  display: block;
  margin-bottom: var(--space-3);
}

.doors-prose .door-prose-body {
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--color-fg-soft);
}

/* ============================================================
   M17. Active nav link state
   Subtle: a thin operator-forest underline + slightly stronger
   color. Marks the current page in the primary nav.
   ============================================================ */

.nav-link.is-active {
  color: var(--color-fg);
}

.nav-link.is-active::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--color-accent);
}

/* ============================================================
   M18. Mobile responsive for new components
   ============================================================ */

@media (max-width: 1023px) {
  .indexed-grid {
    grid-template-columns: 1fr;
  }

  .indexed-content {
    max-width: none;
  }

  .indexed-grid .pull-callout {
    grid-column: 1 / -1;
    margin-top: var(--space-5);
    margin-left: 0;
    max-width: 100%;
  }

  /* v26: wiser-canon is now single-column site-wide; no responsive override needed. */

  .bio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-7);
  }

  .triad {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }

  .triad-item {
    padding-right: var(--space-4);
  }

  .triad-item:nth-child(2) {
    border-right: 0;
    padding-right: 0;
  }

  .triad--four {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  .hero--interior {
    padding-top: var(--space-8);
    padding-bottom: var(--space-7);
  }

  .hero--interior .hero-h1 {
    font-size: clamp(36px, 10vw, 48px);
    max-width: none;
  }

  .indexed-grid .pull-callout {
    grid-column: 1 / -1;
    margin-top: var(--space-5);
    padding-left: var(--space-4);
  }

  .kv-list--numbered .kv-item {
    grid-template-columns: 40px 1fr;
    gap: var(--space-4);
  }

  .wiser-canon {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
  }

  .pullquote-section {
    padding-top: var(--space-9);
    padding-bottom: var(--space-9);
  }

  .pullquote-h2 {
    font-size: clamp(28px, 7vw, 40px);
  }

  .triad {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    padding-top: var(--space-5);
  }

  .triad--rows .triad-item {
    grid-template-columns: 1fr;
    gap: var(--space-2);
    padding: var(--space-4) 0;
  }

  .book-feature {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .book-card {
    align-self: start;
  }

  .book-card-cover {
    width: 140px;
  }

  .book-card-cover--photo {
    width: 158px;
  }

  .book-card-title {
    font-size: 28px;
  }

  .triad-item {
    border-right: 0;
    padding-right: 0;
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--color-rule);
  }

  .triad-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .triad--four {
    grid-template-columns: 1fr;
  }

  .bio-grid {
    grid-template-columns: 1fr;
    gap: var(--space-9);
  }

  .bio-portrait {
    max-width: 200px;
  }

  .modal {
    padding: var(--space-7) var(--space-5);
  }
}

/* ============================================================
   18. Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Hero entry beat: skip. Everything paints at full opacity. */
  .hero-rule, .hero-subhead, .hero-cta {
    opacity: 1 !important;
  }

  /* Hero H1: static hierarchy on home; no opacity/transform resets needed. */
  .hero-h1 .line-a,
  .hero-h1 .line-b {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Scroll reveals: paint at final state immediately. */
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  /* DNA strand: motion.js draws a static canvas frame for reduced motion. */
}

/* ============================================================
   M14. Case Studies — landing cards and detail pages (v32)
   Detail page content is generated from each case study's
   website bundle; the fragments are CSS-agnostic and these
   rules are the only styler. Hooks per Play Visuals Spec.
   ============================================================ */

/* --- Landing card link --- */

.case-link {
  display: inline-block;
  margin-top: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--color-accent-deep);
  padding-bottom: 2px;
  transition: color var(--duration-quick) var(--easing-ease-out),
              border-color var(--duration-quick) var(--easing-ease-out);
}

.case-link:hover {
  color: var(--color-accent-bright);
  border-bottom-color: var(--color-accent);
}

.case-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* --- Detail page hero kicker --- */

.hero-kicker {
  margin-bottom: var(--space-4);
  color: var(--color-brand-warm);
}

/* --- Detail page rhythm (v33) ---
   Document pages read as one continuous piece; the standard
   section rhythm left them gappy. Hero sits closer to the intro
   (same move as .page-day-one), and the three document sections
   run on the tight rhythm. */

.page-case-study .hero--interior {
  padding-bottom: var(--space-6);
}

.cs-intro-section {
  padding-bottom: var(--rhythm-tight);
}

.cs-section {
  padding-top: var(--rhythm-tight);
  padding-bottom: var(--rhythm-tight);
}

/* --- Download row --- */

.cs-download {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-top: var(--space-5);
  text-decoration: none;
  border: 1px solid var(--color-rule-strong);
  border-radius: 6px;
  padding: var(--space-3) var(--space-5);
  transition: border-color var(--duration-quick) var(--easing-ease-out),
              background-color var(--duration-quick) var(--easing-ease-out);
}

.cs-download:hover {
  border-color: var(--color-accent);
  background-color: rgba(79, 160, 146, 0.06);
}

.cs-download:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.cs-download-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-brand-warm);
}

.cs-download-text {
  font-size: var(--text-base);
  color: var(--color-fg);
}

/* --- Document content (narrative, deliverables, plays) --- */

.cs-doc {
  max-width: 72ch;
}

/* The hero carries the case title; the narrative fragment's own
   h1 (the source directory name) stays in the markup, unstyled
   and unshown. */
.cs-doc--narrative > .fs-case-study > h1 {
  position: absolute;
  left: -9999px;
}

.cs-doc h1 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--color-fg);
  margin: 0 0 var(--space-5) 0;
}

.cs-doc h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-fg);
  margin: var(--space-7) 0 var(--space-4) 0;
}

.cs-doc h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--color-fg);
  margin: var(--space-6) 0 var(--space-3) 0;
}

.cs-doc p {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-fg-soft);
  margin: 0 0 var(--space-4) 0;
  max-width: 64ch;
}

.cs-doc strong {
  color: var(--color-fg);
  font-weight: 600;
}

.cs-doc ul,
.cs-doc ol {
  margin: 0 0 var(--space-4) 0;
  padding-left: var(--space-5);
  max-width: 60ch;
}

.cs-doc li {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-fg-soft);
  margin-bottom: var(--space-2);
}

.cs-doc li::marker {
  color: var(--color-mute-strong);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.cs-doc blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--color-fg);
  border-left: 2px solid var(--color-accent);
  padding-left: var(--space-5);
  margin: var(--space-6) 0;
  max-width: 56ch;
}

.cs-doc table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-5) 0 var(--space-6) 0;
  font-size: var(--text-sm);
}

.cs-doc th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-mute-strong);
  text-align: left;
  padding: var(--space-2) var(--space-4) var(--space-2) 0;
  border-bottom: 1px solid var(--color-rule-strong);
}

.cs-doc td {
  color: var(--color-fg-soft);
  line-height: 1.5;
  vertical-align: top;
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: 1px solid var(--color-rule);
}

.cs-doc tr:last-child td {
  border-bottom: 0;
}

/* Rule between stacked documents */
.cs-doc-rule {
  margin-top: var(--space-7);
  margin-bottom: var(--space-7);
}

/* Plays grouped by canon */
.cs-canon-group {
  margin-top: var(--space-8);
}

.cs-canon-group:first-of-type {
  margin-top: 0;
}

.cs-canon-label {
  color: var(--color-brand-warm);
  margin-bottom: var(--space-5);
}

.cs-doc--play {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-rule);
}

.cs-canon-group .cs-doc--play:first-of-type {
  border-top: 0;
  padding-top: 0;
}

/* ============================================================
   M15. Play visuals (fs-viz) — site styling of the bundle's
   semantic structures. One rule set per type; every case
   study inherits it. Reference: Play Visuals Spec.md.
   ============================================================ */

.fs-viz {
  margin: var(--space-5) 0 var(--space-6) 0;
  padding: var(--space-5);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-rule);
  border-radius: 6px;
  max-width: 64ch;
}

.fs-viz-note {
  display: block;
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: var(--color-mute-strong);
}

/* --- Friction heat rows --- */

.fs-friction-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(120px, auto) 2fr;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-rule);
}

.fs-friction-row:last-child {
  border-bottom: 0;
}

.fs-friction-name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-fg);
}

.fs-friction-meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-mute-strong);
  white-space: nowrap;
}

.fs-friction-bar {
  position: relative;
  display: block;
  height: 22px;
  background: var(--color-bg-deep);
  border-radius: 3px;
  overflow: hidden;
}

.fs-friction-bar::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--pct, 0) * 1%);
  min-width: 4px;
  border-radius: 3px;
  background: var(--color-brand-warm);
}

.fs-friction-row[data-heat="high"] .fs-friction-bar::before {
  background: var(--color-error);
}

.fs-friction-row[data-heat="severe"] .fs-friction-bar::before {
  background: #C25144;
}

.fs-friction-pct {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 3px var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-fg);
  white-space: nowrap;
}

/* --- Error stack --- */

.fs-stack-step {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 2fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) 0;
}

.fs-stack-label {
  font-size: var(--text-sm);
  color: var(--color-fg-soft);
}

.fs-stack-bar {
  display: block;
  height: 14px;
  border-radius: 3px;
  background: var(--color-bg-deep);
  position: relative;
  overflow: hidden;
}

.fs-stack-bar::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--pct, 0) * 1%);
  min-width: 3px;
  border-radius: 3px;
  background: var(--color-accent);
}

.fs-stack-value {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-mute-strong);
  min-width: 48px;
  text-align: right;
}

.fs-stack-step--total {
  border-top: 1px solid var(--color-rule-strong);
  margin-top: var(--space-2);
  padding-top: var(--space-3);
}

.fs-stack-step--total .fs-stack-label {
  color: var(--color-fg);
  font-weight: 600;
}

.fs-stack-step--total .fs-stack-bar::before {
  background: var(--color-error);
}

.fs-stack-step--total .fs-stack-value {
  color: var(--color-fg);
}

/* --- Oversight tiers --- */

.fs-tier {
  display: grid;
  grid-template-columns: auto minmax(160px, auto) 1fr;
  gap: var(--space-2) var(--space-4);
  align-items: baseline;
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  background: var(--color-bg-deep);
  border-radius: 4px;
  border-left: 3px solid var(--color-accent);
}

.fs-tier:last-of-type {
  margin-bottom: 0;
}

.fs-tier[data-tier="2"] {
  border-left-color: var(--color-brand-warm);
}

.fs-tier[data-tier="3"] {
  border-left-color: var(--color-error);
}

.fs-tier-badge {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-mute-strong);
  white-space: nowrap;
}

.fs-tier-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-fg);
}

.fs-tier-desc {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-fg-soft);
}

/* --- Verdict cards --- */

.fs-viz--cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
}

.fs-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-bg-deep);
  border: 1px solid var(--color-rule);
  border-radius: 4px;
}

.fs-card-chip,
.fs-exp-chip {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px var(--space-2);
  border-radius: 3px;
  white-space: nowrap;
}

.fs-card[data-verdict="killed"] .fs-card-chip,
.fs-exp[data-outcome="killed"] .fs-exp-chip {
  color: var(--color-error);
  background: rgba(224, 122, 106, 0.12);
}

.fs-card[data-verdict="confirmed"] .fs-card-chip,
.fs-exp[data-outcome="confirmed"] .fs-exp-chip {
  color: var(--color-accent-bright);
  background: rgba(79, 160, 146, 0.12);
}

.fs-card[data-verdict="reframed"] .fs-card-chip,
.fs-exp[data-outcome="reframed"] .fs-exp-chip {
  color: var(--color-brand-warm);
  background: var(--color-brand-warm-soft);
}

.fs-exp[data-outcome="promising"] .fs-exp-chip {
  color: var(--color-accent);
  background: rgba(79, 160, 146, 0.08);
}

.fs-card-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-fg);
}

.fs-card-desc {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-fg-soft);
}

/* --- Experiment sequence --- */

.fs-exp {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "num name chip"
    "num desc desc";
  gap: var(--space-1) var(--space-4);
  align-items: baseline;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-rule);
}

.fs-exp:last-child {
  border-bottom: 0;
}

.fs-exp-num {
  grid-area: num;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-brand-warm);
}

.fs-exp-name {
  grid-area: name;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-fg);
}

.fs-exp-chip {
  grid-area: chip;
}

.fs-exp-desc {
  grid-area: desc;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-fg-soft);
}

/* --- Flow --- */

.fs-flow-nodes {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-4);
}

.fs-flow-node {
  flex: 1 1 140px;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--color-bg-deep);
  border: 1px solid var(--color-rule);
  border-radius: 4px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-fg);
  position: relative;
}

.fs-flow-node:not(:last-child)::after {
  content: "\2192";
  position: absolute;
  right: calc(-1 * var(--space-4) + 2px);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-mute-strong);
  font-weight: 400;
}

.fs-flow-node[data-role="human"] {
  border-color: var(--color-brand-warm-deep);
  background: var(--color-brand-warm-soft);
}

.fs-flow-node em {
  display: block;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  line-height: 1.45;
  color: var(--color-fg-soft);
}

.fs-flow-loop {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--color-mute-strong);
}

/* --- Incident timeline --- */

.fs-tl-item {
  position: relative;
  padding: 0 0 var(--space-5) var(--space-6);
}

.fs-tl-item:last-child {
  padding-bottom: 0;
}

.fs-tl-item::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 14px;
  bottom: -4px;
  width: 1px;
  background: var(--color-rule-strong);
}

.fs-tl-item:last-child::before {
  display: none;
}

.fs-tl-item::after {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--color-accent);
}

.fs-tl-item[data-tone="warn"]::after {
  background: var(--color-brand-warm);
}

.fs-tl-item[data-tone="alert"]::after {
  background: var(--color-error);
}

.fs-tl-item[data-tone="fix"]::after {
  background: var(--color-accent-bright);
}

.fs-tl-title {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-fg);
  margin-bottom: var(--space-1);
}

.fs-tl-desc {
  display: block;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-fg-soft);
}

/* --- Mobile --- */

@media (max-width: 640px) {
  .fs-friction-row,
  .fs-stack-step {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .fs-stack-value {
    text-align: left;
  }

  .fs-tier {
    grid-template-columns: 1fr;
  }

  .fs-flow-nodes {
    flex-direction: column;
  }

  .fs-flow-node:not(:last-child)::after {
    content: "\2193";
    right: auto;
    left: var(--space-4);
    top: auto;
    bottom: calc(-1 * var(--space-4) - 2px);
    transform: none;
  }

  .cs-doc table {
    display: block;
    overflow-x: auto;
  }
}