/* Self-hosted fonts (latin subset, variable). Served from /fonts so first
   paint never waits on a third-party origin. swap = text shows immediately
   in the fallback, then upgrades when the woff2 arrives. */
/* Body sans — Duaility Grotesk: a renamed OFL derivative of Archivo, retracked
   tighter toward an even, neutral neo-grotesque register (lower x-height, tight
   fit). Hanken Grotesk is kept below it as a fallback. */
@font-face {
  font-family: "Duaility Grotesk";
  font-style: normal;
  font-weight: 360 680;
  font-display: swap;
  src: url("/fonts/duaility-grotesk-var.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/hanken-var.woff2") format("woff2");
}
/* Serif — Fraunces (OFL), in two optical cuts so contrast tracks size like a
   real foundry family: DISPLAY (opsz 144, dramatic) for the big hero/section
   headlines, TEXT (opsz 38, calmer) for smaller section + card titles and
   italic pull-quotes. Owned outright, no usage-based licensing. wght 300–700. */
@font-face {
  font-family: "Fraunces Display";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/fraunces-display-var.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces Text";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/fraunces-text-var.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces Text";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/fraunces-text-italic-var.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/plexmono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/plexmono-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/plexmono-600.woff2") format("woff2");
}

:root {
  --bg: #dedede;
  --paper: #f7f7f5;
  --paper-soft: #f0f0ee;
  --ink: #1b1b1b;
  --muted: #5f5f63;
  --line: #d6d6d2;
  --dark: #141514;
  --dark-2: #1c1d1c;
  --dark-line: #303130;
  --dark-muted: #909294;
  --white: #f5f5f1;
  /* Duaility accents, restrained: indigo = intelligence, gold = the human core */
  --accent: #4f46e5;
  --accent-soft: #818cf8;
  --accent-warm: #e8a830;
  --accent-glow: rgba(79, 70, 229, .16);
  --gold-glow: rgba(232, 168, 48, .35);
  --font-serif: "Fraunces Text", Georgia, "Times New Roman", serif;
  --font-display: "Fraunces Display", Georgia, "Times New Roman", serif;
  --font-sans: "Duaility Grotesk", "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Anchor jumps (nav links to #outcomes / #architecture / #platform / #contact)
   must clear the floating sticky header instead of hiding under it. */
section[id] {
  scroll-margin-top: 92px;
}

body {
  margin: 0;
  /* Establish a block formatting context so the header's `margin-top: 18px`
     can't collapse through the body. Without this the `body#top` box starts at
     y=18, so clicking the logo (href="#top") jumps the page down 18px instead of
     landing at the true top. */
  display: flow-root;
  /* one shared content box so the header, main, and footer always line up */
  --shell: min(1180px, calc(100% - 48px));
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.45), transparent 26rem),
    var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.45;
}

a {
  color: inherit;
  text-decoration: none;
}

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.page-grid {
  display: none;
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: linear-gradient(to bottom, transparent, black 16%, black 78%, transparent);
  opacity: .24;
}

.site-header,
.site-footer {
  width: var(--shell);
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 18px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 18px;
  margin-top: 18px;
  background: rgba(247,247,245,.78);
  border: 1px solid rgba(24,24,24,.1);
  backdrop-filter: blur(18px);
}

.brand,
.nav-links,
.mobile-menu,
.nav-cta {
  font-size: 14px;
  letter-spacing: 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 560;
}

.brand-mark {
  width: 34px;
  height: 22px;
  display: inline-flex;
}

.brand-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
  color: #4e4e50;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.mobile-menu {
  display: none;
  position: relative;
}

.mobile-menu summary {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  list-style: none;
}

.mobile-menu summary::-webkit-details-marker {
  display: none;
}

.mobile-menu-icon,
.mobile-menu-icon::before,
.mobile-menu-icon::after {
  display: block;
  width: 16px;
  height: 1px;
  background: var(--ink);
}

.mobile-menu-icon {
  position: relative;
}

.mobile-menu-icon::before,
.mobile-menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.mobile-menu-icon::before { top: -5px; }
.mobile-menu-icon::after { top: 5px; }

.mobile-menu nav {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 30;
  display: grid;
  min-width: 180px;
  padding: 8px;
  border: 1px solid var(--line);
  background: rgba(247,247,245,.96);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
}

.mobile-menu nav a {
  padding: 11px 12px;
  color: #4e4e50;
}

.mobile-menu nav a:hover {
  color: var(--accent);
}

.nav-links a,
.site-footer a,
.nav-cta {
  transition: opacity .2s ease, transform .2s ease;
}

.nav-links a:hover,
.site-footer a:hover,
.nav-cta:hover {
  opacity: .62;
}

.nav-cta {
  border: 1px solid var(--line);
  padding: 10px 16px;
  background: #fff;
}

.nav-cta:hover {
  border-color: var(--accent);
  color: var(--accent);
  opacity: 1;
}

main {
  width: var(--shell);
  /* match the inter-section gap (.frame margin-bottom) so header->first-section
     spacing is uniform with section->section spacing */
  margin: clamp(28px, 2.8vw, 40px) auto 0;
}

.frame {
  position: relative;
  margin: 0 auto clamp(28px, 2.8vw, 40px);
  padding: 28px;
}

.frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 1px solid rgba(30,30,30,.04);
  background:
    repeating-linear-gradient(
      135deg,
      rgba(0,0,0,.04) 0,
      rgba(0,0,0,.04) 1px,
      transparent 1px,
      transparent 10px
    );
}

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

.frame-light::before {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(45,45,45,.055) 0,
      rgba(45,45,45,.055) 1px,
      transparent 1px,
      transparent 10px
    ),
    #fbfbfa;
}

.frame-dark::before {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,.05) 0,
      rgba(255,255,255,.05) 1px,
      transparent 1px,
      transparent 10px
    ),
    #111211;
}

.panel,
.dark-section > .section-head,
.outcome-grid,
.layer-grid,
.architecture-section > .section-head,
.architecture-grid,
.cta-section > * {
  border: 1px solid var(--line);
  background: var(--paper);
}

.hero {
  max-width: 1180px;
}

.hero.frame {
  padding: 0;
}

.hero.frame::before {
  display: none;
}

.hero-panel {
  display: block;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 26%, rgba(79, 70, 229, .08), transparent 20rem),
    radial-gradient(circle at 18% 14%, rgba(232, 168, 48, .1), transparent 18rem),
    var(--paper);
}

.hero-head {
  display: grid;
  /* Copy column gets the larger share so the headline fits on two lines instead
     of orphaning "Operations." onto a third (see the min-width font cap below). */
  grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
  padding: clamp(40px, 5vw, 76px) clamp(36px, 5vw, 76px) clamp(36px, 4vw, 56px);
}

.hero-head h1 {
  max-width: none;
  margin-bottom: 22px;
  text-wrap: balance;
}

/* Two-column hero only (>1080px). Trim the headline's max size a touch so it
   settles on two lines in the copy column. Scoped to min-width so it never
   overrides the larger mobile h1 size (clamp(40px, 11vw, 56px)) below, and so
   blog/article h1s keep the global clamp(30px, 3vw, 50px). */
@media (min-width: 1081px) {
  .hero-head h1 {
    font-size: clamp(30px, 2.9vw, 47px);
  }
}

/* Match the body register used in feature rows / cards (18px / 1.45) so the hero's
   lead doesn't render smaller and looser than ordinary body copy further down the
   page. text-wrap: pretty keeps the narrow hero column from orphaning end words. */
.hero-head .lead {
  max-width: 480px;
  margin-bottom: 0;
  font-size: 18px;
  line-height: 1.45;
  text-wrap: pretty;
}

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

.hero-actions span {
  max-width: 300px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

/* ---- Hero illustration: your operation and its live AI twin ---- */
.hero-art {
  width: 100%;
}

.hero-art svg {
  display: block;
  width: 100%;
  max-width: 452px;
  height: auto;
  margin-inline: auto;
  overflow: visible;
  animation: twFloat 9s ease-in-out infinite;
}

/* connectors: human inputs flowing into the twin */
.di-flow {
  stroke: var(--accent-warm);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 2 8;
  opacity: .85;
  animation: twFlow 1.6s linear infinite;
}

/* left: knowledge / taste / judgment (human side) */
.di-ring {
  fill: #ffffff;
  stroke: var(--accent-warm);
  stroke-width: 1.8;
}

.di-ic {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* right: the AI twin (machine side) */
.di-twin-halo {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.4;
  stroke-dasharray: 4 6;
  opacity: .55;
  transform-origin: 372px 200px;
  animation: twSpin 26s linear infinite;
}

.di-twin-ring {
  fill: rgba(79, 70, 229, .06);
  stroke: var(--accent);
  stroke-width: 1.8;
  animation: twPulse 3.6s ease-in-out infinite;
  transform-origin: 372px 200px;
}

.di-twin-ic {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.di-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-anchor: middle;
}

.di-label-in { fill: var(--accent-warm); }
.di-label-twin { fill: var(--accent); font-size: 13px; }

@keyframes twFlow {
  to { stroke-dashoffset: -20; }
}

@keyframes twSpin {
  to { transform: rotate(360deg); }
}

@keyframes twPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.035); opacity: .82; }
}

@keyframes twFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@media (prefers-reduced-motion: reduce) {
  .di-flow, .di-twin-halo, .di-twin-ring, .hero-art svg,
  .net-flow, .net-hub-halo,
  .orbit, .orbit-diagram .core,
  .tree-diagram .stem, .tree-diagram .drop, .tree-diagram .node { animation: none; }
}

.hero-lower {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
  border-top: 1px solid var(--line);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
.section-head h2,
.cta-section h2 {
  margin-bottom: 22px;
  max-width: 1040px;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.0;
}

h1 {
  font-size: clamp(30px, 3vw, 50px);
}

.lead,
.section-head p,
.light-head p {
  max-width: 640px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.48;
  letter-spacing: 0;
}

.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 13px 18px;
  border: 1px solid var(--ink);
  font-size: 14px;
  letter-spacing: 0;
  transition: transform .2s ease, opacity .2s ease;
}

.button:hover {
  transform: translateY(-1px);
  opacity: .82;
}

.button:disabled {
  cursor: not-allowed;
  opacity: .7;
  transform: none;
}

.button-dark {
  background: var(--accent);
  color: var(--white);
}

.hero-metric {
  position: relative;
  display: grid;
  place-items: center;
  border-left: 1px solid var(--line);
  padding: 36px;
  overflow: hidden;
}

.metric-label {
  position: absolute;
  top: 50px;
  left: 48px;
  color: #767679;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.metric-label .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 9px;
}

.metric-label .dot-twin { background: var(--accent); }
.metric-label .dot-human { background: var(--accent-warm); }

.donut {
  width: min(100%, 320px);
  color: #989896;
}

.donut svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.donut-band {
  fill: url(#hatchPattern);
  stroke: var(--accent);
  stroke-width: 1;
}

.donut-human {
  fill: var(--accent-warm);
  stroke: #d99a1f;
  stroke-width: 1;
}

.donut-core {
  fill: var(--paper);
  stroke: #cfcfca;
  stroke-width: 1;
}

.donut text {
  fill: var(--ink);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.feature-grid {
  background: transparent;
}

.feature-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 0;
  padding: 42px clamp(30px, 5vw, 72px);
}

.feature-row + .feature-row {
  border-top: 1px dashed #c8c8c4;
}

.number {
  color: var(--ink);
  font-size: 18px;
  letter-spacing: 0;
}

.feature-row h2 {
  margin-bottom: 14px;
  font-family: var(--font-serif);
  font-size: clamp(25px, 2vw, 34px);
  font-weight: 400;
  letter-spacing: 0;
}

.feature-row p {
  max-width: 650px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.45;
}

/* Feature-row numbers recede into a quiet grey so the serif title leads. */
.number { color: #9a9a97; }

/* Airier body copy site-wide. The premium reference reads light; Archivo at 400 is
   a touch sturdy, so the running copy drops to 370 for an even, quiet color. Scoped
   to reading text only — nav, buttons, brand, and mono labels keep their weights. */
.lead,
.section-head p,
.light-head p,
.feature-row p,
.outcome-card p,
.layer-card p,
.architecture-card p,
.cta-section > div p,
.oss-card p,
.post-body,
.index-lead,
.note-hook { font-weight: 370; }

.dark-section {
  max-width: 1180px;
  color: var(--white);
}

.dark-section > .section-head,
.outcome-grid,
.layer-grid {
  background: var(--dark);
  border-color: var(--dark-line);
}

.section-head {
  padding: clamp(42px, 6vw, 74px) clamp(36px, 6vw, 76px);
}

.section-head h2,
.cta-section h2 {
  font-size: clamp(26px, 2.8vw, 42px);
}

.dark-section .section-head p,
.dark-section p {
  color: var(--dark-muted);
}

.outcome-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 0;
}

.outcome-card {
  min-height: 455px;
  padding: 42px clamp(34px, 5vw, 58px);
}

.outcome-card + .outcome-card {
  border-left: 1px solid var(--dark-line);
}

.outcome-card h3,
.layer-card h3 {
  margin-bottom: 14px;
  color: var(--white);
  font-family: var(--font-serif);
  font-size: clamp(25px, 2vw, 34px);
  font-weight: 400;
  letter-spacing: 0;
}

.outcome-card p,
.layer-card p {
  max-width: 590px;
  font-size: 17px;
  line-height: 1.45;
}

.bar-chart {
  position: relative;
  height: 215px;
  margin-top: 46px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  border-bottom: 1px solid var(--dark-line);
}

.bar-wrap {
  position: relative;
}

.bar-value {
  display: block;
  margin-bottom: 8px;
  color: var(--white);
  font-size: 30px;
  letter-spacing: 0;
}

.bar-caption {
  display: block;
  margin-bottom: 18px;
  color: var(--dark-muted);
  font-size: 14px;
}

.bar {
  height: 100px;
  border-top: 4px solid var(--white);
  border-left: 1px dashed var(--dark-line);
  border-right: 1px dashed var(--dark-line);
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent);
}

.first .bar {
  border-top-color: var(--accent-soft);
}

.second .bar {
  height: 155px;
  border-top-color: var(--accent-warm);
}

.striped {
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.09) 0,
      rgba(255,255,255,.09) 1px,
      transparent 1px,
      transparent 11px
    ),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent);
}

.timeline {
  position: relative;
  /* tall enough to fully contain the tallest marker (m4: 176px line + label,
     anchored 62px off the base) so the rising lines never overrun the
     description above */
  height: 300px;
  margin-top: 32px;
}

.line-base {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 32px;
  height: 18px;
  border: 1px solid var(--dark-line);
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.13) 0,
      rgba(255,255,255,.13) 1px,
      transparent 1px,
      transparent 8px
    );
}

.marker {
  position: absolute;
  bottom: 62px;
  width: 88px;
  transform: translateX(-50%);
}

.marker::before {
  content: "";
  display: block;
  width: 1px;
  height: var(--h, 70px);
  margin: 0 auto 8px;
  border-left: 1px dashed rgba(255,255,255,.55);
}

.marker::after {
  content: "";
  position: absolute;
  top: calc(var(--h, 70px) - 2px);
  left: 50%;
  transform: translateX(-50%);
  width: 9px;
  height: 9px;
  border: 2px solid var(--white);
  background: var(--dark);
}

.marker span,
.marker small {
  display: block;
  text-align: center;
}

.marker span {
  color: var(--white);
  font-family: var(--font-serif);
  font-size: 27px;
  letter-spacing: 0;
}

.marker small {
  color: var(--dark-muted);
  font-size: 11px;
}

.m1 { left: 12.5%; --h: 55px; }
.m2 { left: 37.5%; --h: 96px; }
.m3 { left: 62.5%; --h: 135px; }
.m4 { left: 87.5%; --h: 176px; }

.layer-grid {
  border-top: 0;
  padding: clamp(40px, 5vw, 60px) clamp(28px, 4vw, 46px) clamp(34px, 4vw, 52px);
}

/* Zero column-gap + symmetric card margins put each card's centre at exactly
   1/6, 1/2 and 5/6 of the row — the same x as the SVG's 200/600/1000 origins —
   so the three converging streams meet each box dead-centre at any width. */
.layer-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
}

/* Each layer is a wrapped rectangular plate; the three feed into one twin. */
.layer-card {
  position: relative;
  margin: 0 clamp(14px, 2vw, 32px);
  padding: clamp(22px, 2.2vw, 30px) clamp(20px, 2vw, 28px);
  border: 1px solid var(--dark-line);
  background: rgba(255, 255, 255, .02);
}

.card-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 12px;
}

.card-head span {
  color: var(--white);
  font-size: 22px;
  letter-spacing: 0;
}

.card-head h3 {
  margin-bottom: 0;
  font-size: clamp(22px, 1.7vw, 28px);
}

.layer-card p {
  font-size: 15px;
  line-height: 1.55;
}

/* Convergence: a stream drops from each box, the three merge at a confluence,
   and one trunk feeds the twin hub. Full-width SVG, height auto → uniform scale,
   so viewBox x 200/600/1000 land on the card centres. */
.layer-merge {
  display: block;
  width: 100%;
  height: auto;
  margin-top: clamp(18px, 2vw, 30px);
}
.layer-merge .edge { fill: none; stroke: url(#mergeGrad); stroke-width: 1.6; }
.layer-merge .flow {
  fill: none; stroke: var(--accent-soft); stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 4 150; animation: mergeFlow 3.2s linear infinite;
}
.layer-merge .hub { fill: var(--dark); stroke: var(--accent); stroke-width: 1.6; }
.layer-merge .hub-glow { fill: var(--accent); opacity: .14; }
.layer-merge .hub-ic { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.layer-merge .hub-label {
  fill: var(--accent-soft); font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase;
}

@keyframes mergeFlow { to { stroke-dashoffset: -154; } }

.architecture-section {
  max-width: 1180px;
}

/* Platform keeps the standard hatched frame gutter (like the dark plates and the
   contact section); only the hero opts out of it. The head + grid float inside
   the gutter as one bordered plate. */

.architecture-section > .section-head,
.architecture-grid {
  background: var(--paper);
  border-color: var(--line);
}

.light-head {
  border-bottom: 0;
}

/* Closed, ruled plate with internal dividers — matches .outcome-grid / .layer-grid
   so the three diagram cells read as instrument cells, not floating columns.
   border-top:0 because the section head already supplies the divider above. */
.architecture-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-top: 0;
}

.architecture-card {
  display: flex;
  flex-direction: column;
  padding: clamp(40px, 4vw, 56px) clamp(26px, 3vw, 44px);
  text-align: center;
}

.architecture-card + .architecture-card {
  border-left: 1px solid var(--line);
}

/* Fixed-height stage so the three diagrams share one baseline and the headings
   below them line up across the row. */
.diagram {
  position: relative;
  flex: none;
  height: 248px;
  margin-bottom: clamp(26px, 2.6vw, 36px);
}

.orbit-diagram {
  display: grid;
  place-items: center;
}

/* spokes tying each facet back to the central brain */
.orbit-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.orbit-link {
  stroke: #cdcdc8;
  stroke-width: 1.2;
}

.orbit {
  position: absolute;
  border: 1px solid #d2d2ce;
  border-radius: 999px;
  animation: twSpin 20s linear infinite;
}

/* a signal travelling around each ring */
.orbit::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: var(--accent-warm);
  box-shadow: 0 0 7px 1px var(--gold-glow);
}

.o1 { width: 92px; height: 92px; animation-duration: 9s; }
.o2 { width: 150px; height: 150px; animation-duration: 14s; animation-direction: reverse; }
.o3 { width: 210px; height: 210px; animation-duration: 22s; }

.orbit-diagram .core {
  animation: twPulse 3.6s ease-in-out infinite;
}

.core,
.hub,
.node {
  display: grid;
  place-items: center;
  background: var(--paper);
  border: 1px solid #d3d3cf;
  border-radius: 999px;
  font-size: 31px;
  line-height: 1;
}

.core {
  width: 58px;
  height: 58px;
  z-index: 2;
}

.ic {
  width: 22px;
  height: 22px;
  display: block;
  color: var(--ink);
}

.core .ic,
.hub .ic {
  width: 30px;
  height: 30px;
}

.node .ic {
  width: 26px;
  height: 26px;
}

.orbit-diagram .core {
  border-color: var(--accent-warm);
  box-shadow:
    0 0 0 2px var(--accent-warm),
    0 0 20px 2px var(--gold-glow);
}

.orbit-diagram .core .ic {
  color: var(--accent-warm);
}

.network-diagram .hub {
  border-color: var(--accent);
}

.network-diagram .hub .ic {
  color: var(--accent);
}

.chip,
.engine {
  position: absolute;
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid #d5d5d1;
  background: var(--paper);
  color: #1e1e1f;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* anchored by center % so the orbit-link spokes (also % based) always meet them;
   nowrap keeps the ✓ on the same line for the longer right-side labels, which
   would otherwise wrap against the container edge */
.orbit-diagram .chip { white-space: nowrap; }
.c1 { top: 52px; left: 13%; transform: translateX(-50%); }
.c2 { top: 52px; left: 87%; transform: translateX(-50%); }
.c3 { bottom: 48px; left: 13%; transform: translateX(-50%); }
.c4 { bottom: 48px; left: 87%; transform: translateX(-50%); }

.tree-diagram {
  /* horizontal distance from each edge to the outer chip centers, as a share of
     the diagram width; the rail, drops and side chips all reference this, so they
     stay aligned AND keep proportional spacing whatever the card width */
  --side: 17%;
  display: grid;
  place-items: center;
  /* let the chip labels size to the diagram's own width, not the viewport, so
     they fit the narrow 3-column cards yet stay legible when the diagram is wide */
  container-type: inline-size;
}

.tree-diagram .chip {
  font-size: clamp(7.5px, 3cqi, 10.5px);
  letter-spacing: .01em;
  white-space: nowrap;
}

.tree-diagram .engine {
  border-color: rgba(79, 70, 229, .32);
  background: rgba(79, 70, 229, .07);
  color: var(--accent);
}

.tree-diagram .server {
  border-color: var(--accent);
  /* opaque paper UNDER the indigo tint so the node masks the stem behind it
     (a bare rgba tint is translucent and lets the dashed line show through) */
  background:
    linear-gradient(rgba(79, 70, 229, .06), rgba(79, 70, 229, .06)),
    var(--paper);
  box-shadow:
    0 0 0 2px rgba(79, 70, 229, .08),
    0 0 20px 2px var(--accent-glow);
}

.tree-diagram .server .ic {
  color: var(--accent);
}

.tree-diagram .b2 {
  border-color: rgba(79, 70, 229, .36);
  color: var(--accent);
}

.engine {
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.node {
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 64px;
  font-family: var(--font-mono);
  font-size: 22px;
  z-index: 2;
}

.stem,
.rail,
.drop {
  position: absolute;
  background: #d5d5d1;
}

.stem {
  top: 42px;
  left: 50%;
  width: 1px;
  height: 128px;
  transform: translateX(-50%);
}

.rail {
  top: 170px;
  left: var(--side);
  right: var(--side);
  height: 1px;
}

.drop {
  top: 170px;
  width: 1px;
  height: 14px;
}

.d1 { left: var(--side); transform: translateX(-50%); animation-delay: 0s; }
.d2 { left: 50%; transform: translateX(-50%); animation-delay: -.45s; }
.d3 { right: var(--side); transform: translateX(50%); animation-delay: -.9s; }

/* orchestration flowing down to workflows, policies, automations */
.tree-diagram .stem,
.tree-diagram .drop {
  background-image: repeating-linear-gradient(to bottom, var(--accent) 0 4px, transparent 4px 11px);
  background-size: 100% 11px;
  background-repeat: repeat-y;
  animation: treeFlow 1.3s linear infinite;
}

.tree-diagram .node {
  animation: nodePulse 3.8s ease-in-out infinite;
}

@keyframes treeFlow {
  to { background-position-y: 11px; }
}

@keyframes nodePulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.05); }
}

.b1 { left: var(--side); bottom: 36px; transform: translateX(-50%); }
.b2 { left: 50%; bottom: 36px; transform: translateX(-50%); }
.b3 { right: var(--side); bottom: 36px; transform: translateX(50%); }

.network-diagram {
  position: relative;
}

.net-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* curved connectors fanning out from the hub */
.net-link {
  stroke: #d3d3cf;
  stroke-width: 1.4;
  stroke-linecap: round;
}

.net-flow {
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 1.5 9;
  opacity: .55;
  animation: twFlow 1.7s linear infinite;
}

.net-node {
  fill: var(--paper);
  stroke: #d5d5d1;
  stroke-width: 1.4;
}

.net-ic {
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.net-hub-halo {
  stroke: var(--accent);
  stroke-width: 1.4;
  stroke-dasharray: 4 6;
  opacity: .5;
  transform-origin: 150px 125px;
  animation: twSpin 26s linear infinite;
}

.net-hub {
  fill: rgba(79, 70, 229, .06);
  stroke: var(--accent);
  stroke-width: 1.8;
}

.net-hub-ic {
  stroke: var(--accent);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.architecture-card h3 {
  margin-bottom: 12px;
  font-family: var(--font-serif);
  font-size: clamp(24px, 1.9vw, 31px);
  font-weight: 400;
  letter-spacing: 0;
}

.architecture-card p {
  max-width: 38ch;
  margin: 0 auto;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}

.cta-section {
  max-width: 1180px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(330px, .8fr);
  align-items: stretch;
  gap: 0;
  /* Closing panel: fill most of the viewport so (a) clicking "Contact Us" can
     scroll the card cleanly under the sticky header — as the last section it
     otherwise can't scroll far enough — and (b) the final CTA reads as a
     deliberate arrival rather than a cramped afterthought. */
  min-height: calc(100svh - 132px);
}

.cta-section > div,
.signup-form {
  background: var(--paper);
  border-color: var(--line);
}

.cta-section > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(42px, 6vw, 72px);
}

.cta-section h2 {
  max-width: 560px;
  margin-bottom: 18px;
  font-size: clamp(28px, 3vw, 44px);
}

.cta-section > div p {
  max-width: 520px;
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.45;
  letter-spacing: 0;
}

.signup-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: clamp(34px, 5vw, 56px);
  border-left: 0;
}

.signup-form label {
  display: grid;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
}

.signup-form input {
  width: 100%;
  min-height: 54px;
  padding: 0 16px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font: inherit;
  outline: none;
}

.signup-form input[type="email"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.signup-checklist {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.signup-checklist legend {
  padding: 0;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 13px;
}

.signup-checklist label {
  grid-auto-flow: column;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 14px;
  cursor: pointer;
}

.signup-checklist input[type="checkbox"] {
  width: 18px;
  min-height: 0;
  height: 18px;
  padding: 0;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.signup-checklist input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.form-status {
  margin: 0;
  min-height: 18px;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--muted);
}

.form-status.is-success { color: var(--accent); }
.form-status.is-error { color: #b4321f; }

.site-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 26px;
  /* footer shares the header's box (width inherited from .site-header rule); the
     19px inset matches the header's pill padding (18px) + 1px border, so the
     copyright lines up under the brand and the links under the nav */
  padding: 28px 19px 54px;
  color: #616164;
  font-size: 13px;
}

.site-footer span {
  margin-right: auto;
}

/* ---- Open Source / Governance Kit ---- */
.section-eyebrow {
  display: inline-block;
  margin-bottom: 16px;
  color: var(--accent-warm);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.oss-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  padding: clamp(26px, 3.4vw, 42px);
  border: 1px solid var(--dark-line);
  border-top: 0;
  background: var(--dark);
}

.oss-main {
  max-width: 640px;
}

.oss-name {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}

.oss-name h3 {
  margin: 0;
  color: var(--white);
  font-family: var(--font-serif);
  font-size: clamp(23px, 1.9vw, 30px);
  font-weight: 400;
  letter-spacing: 0;
}

.badge-oss {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border: 1px solid rgba(232, 168, 48, .5);
  color: var(--accent-warm);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.badge-oss::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent-warm);
  box-shadow: 0 0 0 3px var(--gold-glow);
}

.oss-card p {
  margin: 0;
  color: var(--dark-muted);
  font-size: 16px;
  line-height: 1.5;
}

.oss-link {
  flex-shrink: 0;
  white-space: nowrap;
}

/* ---- Depth ---- */
.dark-section .section-head,
.outcome-grid,
.layer-grid {
  background-image: radial-gradient(120% 90% at 50% -10%, rgba(255, 255, 255, .045), transparent 60%);
}

/* ---- Hover affordances ---- */
.feature-row,
.architecture-card {
  transition: background-color .28s ease;
}

.feature-row:hover,
.architecture-card:hover {
  background-color: var(--paper-soft);
}

/* ---- Motion ---- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @keyframes spin-in {
    from { opacity: 0; transform: rotate(-26deg) scale(.92); }
    to   { opacity: 1; transform: rotate(0) scale(1); }
  }

  /* Hero: orchestrated load reveal */
  .hero-head h1,
  .hero-head .lead,
  .hero-lower .feature-row,
  .hero-lower .hero-metric {
    opacity: 0;
    animation: rise .8s cubic-bezier(.22, .61, .36, 1) forwards;
  }

  .hero-head h1 { animation-delay: .05s; }
  .hero-head .lead { animation-delay: .18s; }
  .hero-lower .feature-row:nth-child(1) { animation-delay: .30s; }
  .hero-lower .feature-row:nth-child(2) { animation-delay: .40s; }
  .hero-lower .hero-metric { animation-delay: .34s; }

  .donut svg { transform-origin: 110px 110px; }
  .hero-lower .hero-metric .donut svg {
    opacity: 0;
    animation: spin-in 1s cubic-bezier(.22, .61, .36, 1) .5s forwards;
  }

  /* Below-fold: scroll-triggered reveals (gated on .js so content shows without JS).
     Opacity-only fade — deliberately NO translateY. A vertical transform shifts the
     section box, so a not-yet-revealed section sits below its resting place and the
     gap above it (e.g. hero -> first section) reads larger until it animates in,
     making the inter-section gaps look non-uniform. Fading in place keeps every gap
     a constant 44px at all times. */
  .js .reveal {
    opacity: 0;
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1);
  }

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

  /* Data viz: grow bars + raise markers once their section is in view */
  .js .bar {
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform .9s cubic-bezier(.22, .61, .36, 1);
  }

  .is-visible .bar { transform: scaleY(1); }

  .js .marker {
    opacity: 0;
    transform: translateX(-50%) translateY(16px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
  }

  .is-visible .marker { opacity: 1; transform: translateX(-50%) translateY(0); }
  .is-visible .m1 { transition-delay: .05s; }
  .is-visible .m2 { transition-delay: .15s; }
  .is-visible .m3 { transition-delay: .25s; }
  .is-visible .m4 { transition-delay: .35s; }
}

@media (max-width: 1080px) {
  body {
    --shell: min(920px, calc(100% - 24px));
  }

  .hero-head,
  .hero-lower,
  .outcome-grid,
  .architecture-grid,
  .cta-section {
    grid-template-columns: 1fr;
    /* Stacked single column is naturally tall; drop the viewport floor so the
       two cards don't split into half-empty panels. */
    min-height: 0;
  }

  .hero-head {
    gap: clamp(24px, 5vw, 40px);
  }

  .hero-art {
    order: -1;
  }

  .hero-art svg {
    max-width: 360px;
  }

  .hero-head .lead {
    max-width: 560px;
  }

  .hero-metric,
  .outcome-card + .outcome-card,
  .architecture-card + .architecture-card {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .outcome-card + .outcome-card {
    border-top-color: var(--dark-line);
  }

  .layer-row {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .layer-card {
    margin: 0;
  }

  /* the convergence graphic only reads with the three boxes side by side */
  .layer-merge {
    display: none;
  }

  .cta-section .signup-form {
    /* Stacked: the form sits below the head box, so restore its left border
       (dropped for the side-by-side desktop layout) and share the top edge. */
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  .oss-card {
    align-items: flex-start;
  }
}

@media (max-width: 760px) {
  body {
    --shell: calc(100% - 24px);
  }

  .site-header {
    top: 12px;
  }

  .nav-links {
    display: none;
  }

  .mobile-menu {
    display: block;
  }

  main {
    margin-top: 32px;
  }

  .frame {
    padding: 14px;
    margin-bottom: 32px;
  }

  /* the four serif labels sit ~25% apart; trim them so Squad/Mesh don't collide */
  .marker {
    width: 72px;
  }

  .marker span {
    font-size: 20px;
  }

  .hero-panel {
    min-height: auto;
  }

  .hero-actions {
    align-items: flex-start;
    gap: 12px;
  }

  .hero-actions .button {
    width: 100%;
  }

  .hero-head,
  .feature-row,
  .section-head,
  .outcome-card,
  .architecture-card,
  .cta-section > div,
  .signup-form,
  .oss-card {
    padding: 30px 22px;
  }

  h1 {
    font-size: clamp(40px, 11vw, 56px);
  }

  .section-head h2,
  .cta-section h2 {
    font-size: clamp(38px, 10vw, 56px);
  }

  .cta-section > div p {
    font-size: 16px;
  }

  .feature-row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 30px 22px;
  }

  .layer-grid {
    padding: 24px 18px;
  }

  .metric-label {
    position: static;
    justify-self: start;
    margin-bottom: 20px;
  }

  .hero-metric {
    display: block;
  }

  .site-footer {
    width: calc(100% - 24px);
    padding-left: 19px;
    padding-right: 19px;
    flex-wrap: wrap;
  }
}

/* Phone widths: the tree diagram's three leaf chips no longer fit side by
   side, so reclaim the edge gutters and shrink the labels to prevent overlap. */
@media (max-width: 460px) {
  .tree-diagram .chip {
    padding: 0 6px;
    min-height: 26px;
  }
}

/* ============================================================
   Blog — generated under /blog/ from blog/posts/*.html
   Reuses the site tokens; only adds the reading column + cards.
   ============================================================ */

.nav-links a[aria-current="page"] {
  color: var(--accent);
}

/* Blog pages share the same content shell as the header/footer so the frame
   lines up with the nav pill at every breakpoint. */
.blog-main {
  width: var(--shell);
}

/* Shared paper column that sits inside the .frame chrome */
.post-shell {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: clamp(34px, 5vw, 72px) clamp(24px, 5vw, 72px);
}

/* Posts use a clean editorial layout (cf. Anthropic's blog): a centered text
   column, a left table-of-contents rail, and a right metadata rail. The page
   background is inherited from the default `body` rule so the blog matches the
   home page exactly (grey --bg + radial glow) rather than its own surface. */

.post {
  max-width: none;
  padding: 0;
}
.post::before {
  display: none;
}

.post-grid {
  display: grid;
  grid-template-columns: minmax(0, 680px);
  justify-content: center;
}
.post-main {
  min-width: 0;
}

/* rails appear only once there's room for them */
.post-toc,
.post-meta-rail {
  display: none;
}

@media (min-width: 1080px) {
  .post-grid {
    grid-template-columns: 184px minmax(0, 640px) 196px;
    gap: clamp(28px, 3.4vw, 52px);
    align-items: start;
  }
  .post-toc {
    display: block;
    position: sticky;
    top: 108px;
  }
  .post-meta-rail {
    display: flex;
    flex-direction: column;
    gap: 22px;
    position: sticky;
    top: 108px;
  }
  /* date + reading time live in the right rail on desktop */
  .post-main .post-meta {
    display: none;
  }
}

/* shared rail label (mono, like the section eyebrow) */
.rail-label {
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* left rail: table of contents */
.post-toc nav {
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.toc-link {
  padding-left: 13px;
  border-left: 2px solid transparent;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.35;
  transition: color .2s ease, border-color .2s ease;
}
.toc-link:hover {
  color: var(--ink);
}
.toc-link.is-active {
  color: var(--ink);
  border-left-color: var(--accent);
}

/* right rail: metadata */
.post-meta-rail .meta-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.post-meta-rail .rail-label {
  margin: 0;
}
.meta-value {
  font-size: 14px;
  color: var(--ink);
}
.meta-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.meta-chip {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  color: var(--ink);
}
.copy-link {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(79, 70, 229, .4);
  transition: text-decoration-color .2s ease;
}
.copy-link:hover {
  text-decoration-color: var(--accent);
}
.copy-link.is-copied {
  color: var(--muted);
  text-decoration: none;
}

/* ---- Post header ---- */
.post-back {
  display: inline-block;
  margin-bottom: 30px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  transition: color .2s ease;
}

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

.post-meta,
.post-card-meta {
  display: block;
  margin-bottom: 14px;
  color: #767679;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.post-title {
  margin-bottom: 20px;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.04;
}

.post-lead {
  margin-bottom: 0;
  color: var(--muted);
  font-family: var(--font-serif);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.5;
}

.post .post-lead {
  padding-bottom: clamp(28px, 4vw, 40px);
  border-bottom: 1px solid var(--line);
}

/* ---- Post body (prose) ---- */
.post-body {
  margin-top: clamp(28px, 4vw, 40px);
  font-size: 18px;
  line-height: 1.62;
  color: #2a2a2c;
}

.post-body > * {
  margin: 0 0 1.15em;
}

.post-body h2,
.post-body h3 {
  margin: 1.7em 0 .5em;
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.15;
  color: var(--ink);
}

.post-body h2 { font-size: clamp(23px, 2vw, 30px); }
.post-body h3 { font-size: clamp(20px, 1.6vw, 24px); }

.post-body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(79, 70, 229, .35);
  transition: text-decoration-color .2s ease;
}

.post-body a:hover {
  text-decoration-color: var(--accent);
}

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

.post-body ul,
.post-body ol {
  padding-left: 1.4em;
}

.post-body li { margin-bottom: .5em; }
.post-body li::marker { color: var(--accent-warm); }

.post-body blockquote {
  margin: 1.6em 0;
  padding: 6px 0 6px 26px;
  border-left: 2px solid var(--accent-warm);
  font-family: var(--font-serif);
  font-size: clamp(19px, 1.7vw, 23px);
  font-style: italic;
  line-height: 1.45;
  color: var(--ink);
}

.post-body blockquote em { font-style: normal; }

.post-body code {
  padding: .12em .4em;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: .86em;
}

.post-body pre {
  padding: 18px 20px;
  overflow-x: auto;
  background: var(--dark);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.6;
}

.post-body pre code {
  padding: 0;
  background: none;
  border: 0;
  font-size: inherit;
}

.post-body img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line);
}

.post-body hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2.2em 0;
}

/* ============================================================
   Blog index with grid and list views.
   Fraunces titles, mono meta, hairline rules, and the indigo/gold
   duality carry through both layouts. Inherits the grey --bg so it
   sits in the same world as the home page and ties to the brand through
   the serif, mono eyebrow, and hatch signature mark.
   ============================================================ */

.blog-index {
  /* Fill the same column as the header/footer so the content's left and right
     edges line up with the nav instead of sitting inside an extra ~90px gutter.
     Inner text blocks keep their own readable max-widths. */
  width: 100%;
  padding: clamp(6px, 2vw, 24px) 0 clamp(56px, 8vw, 104px);
}

/* ---- Header ---- */
.index-head {
  max-width: 760px;
  margin-bottom: clamp(30px, 4.5vw, 56px);
}

/* hatched brand signature above the eyebrow */
.index-mark {
  display: block;
  width: 58px;
  height: 16px;
  margin-bottom: 24px;
  background: repeating-linear-gradient(135deg,
    var(--accent) 0 1.5px, transparent 1.5px 7px);
  opacity: .55;
}

.index-eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-warm);
}

.index-title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 5.2vw, 60px);
  line-height: 1.03;
  letter-spacing: -.012em;
  color: var(--ink);
}

.index-lead {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.5;
  color: var(--muted);
}

/* ---- Tools row (lightweight: search + sort, no facet rail) ---- */
.index-tools {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 4px;
}

.index-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(340px, 100%);
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  transition: border-color .2s ease, background .2s ease;
}
.index-search:focus-within {
  border-color: var(--accent);
  background: #fff;
}
.index-search svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--muted);
}
.index-search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
}
.index-search-input::placeholder { color: var(--muted); }

.index-controls {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 22px);
}
.index-sort {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Grid / List view toggle — a small segmented control */
.view-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
}
.view-btn {
  display: grid;
  place-items: center;
  width: 33px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  cursor: pointer;
  color: var(--muted);
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.view-btn svg { width: 16px; height: 16px; }
.view-btn:hover { color: var(--ink); }
.view-btn.is-active {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
.sort-btn {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: var(--muted);
  transition: color .18s ease;
}
.sort-btn:hover { color: var(--ink); }
.sort-btn.is-active { color: var(--ink); }
.sort-sep {
  color: var(--line);
  user-select: none;
}

/* ---- The numbered note list ---- */
.note-list {
  counter-reset: note;
  margin: clamp(12px, 1.6vw, 20px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.note {
  counter-increment: note;
}
/* .note sets display:grid via .note-link; restate the hide explicitly so a
   searched-out note actually disappears (and stops advancing the counter). */
.note[hidden] { display: none !important; }

.note--indigo { --note-accent: #4f46e5; }
.note--gold   { --note-accent: #e8a830; }

.note-link {
  position: relative;
  display: grid;
  grid-template-columns: clamp(54px, 7vw, 104px) minmax(0, 1fr) auto;
  align-items: start;
  gap: clamp(14px, 2.4vw, 40px);
  padding: clamp(26px, 3.4vw, 42px) clamp(10px, 1.6vw, 22px);
  border-bottom: 1px solid var(--line);
  color: inherit;
  transition: background .28s ease, padding-left .28s ease;
}
.note-link:hover {
  padding-left: clamp(18px, 2.4vw, 34px);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--note-accent) 7%, transparent),
    transparent 72%);
}

.note-index {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: .9;
  font-weight: 400;
  color: color-mix(in srgb, var(--note-accent) 34%, transparent);
  transition: color .28s ease;
}
.note-link:hover .note-index { color: var(--note-accent); }

.note-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.note-kicker {
  margin-bottom: 13px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--note-accent);
}
.note-title {
  margin: 0 0 11px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(24px, 2.7vw, 37px);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--ink);
  transition: color .2s ease;
}
.note-link:hover .note-title { color: var(--note-accent); }
.note-hook {
  margin: 0 0 17px;
  max-width: 58ch;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
}
.note-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.note-arrow {
  align-self: center;
  font-size: 24px;
  line-height: 1;
  color: var(--line);
  transition: transform .28s ease, color .28s ease;
}
.note-link:hover .note-arrow {
  color: var(--note-accent);
  transform: translateX(7px);
}

/* The colored cover band belongs to grid view only; list view hides it. */
.note-cover { display: none; }

/* Suppress transitions for the instant the layout flips, so the cards' borders
   don't shimmer/repaint mid-transition while the grid reflows. */
.note-list.is-switching .note-link,
.note-list.is-switching .note-cover,
.note-list.is-switching .note-cover svg { transition: none !important; }

/* ---- Grid view — brand-native cards, same markup as the list ---- */
.note-list[data-view="grid"] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 28px);
  border-top: 0;
}
@media (min-width: 1080px) {
  .note-list[data-view="grid"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .note-list[data-view="grid"] { grid-template-columns: 1fr; }
}

.note-list[data-view="grid"] .note-index,
.note-list[data-view="grid"] .note-arrow { display: none; }

.note-list[data-view="grid"] .note-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.note-list[data-view="grid"] .note-link:hover {
  padding: 0;
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--note-accent) 55%, var(--line));
  box-shadow: 0 16px 34px rgba(20, 20, 20, .08);
  background: var(--paper);
}

.note-list[data-view="grid"] .note-cover {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--note-accent);
}
.note-list[data-view="grid"] .note-cover svg {
  width: auto;
  height: 58%;
  transition: transform .3s ease;
}
.note-list[data-view="grid"] .note-link:hover .note-cover svg { transform: scale(1.05) rotate(-1.2deg); }

.note-list[data-view="grid"] .note-main {
  flex: 1;
  padding: clamp(18px, 1.8vw, 24px) clamp(18px, 1.9vw, 24px) clamp(20px, 2vw, 26px);
}
.note-list[data-view="grid"] .note-kicker { margin-bottom: 12px; }
.note-list[data-view="grid"] .note-title {
  margin-bottom: 11px;
  font-size: clamp(21px, 1.7vw, 26px);
  line-height: 1.14;
}
.note-list[data-view="grid"] .note-hook {
  margin-bottom: 16px;
  font-size: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.note-list[data-view="grid"] .note-meta {
  margin-top: auto;
  font-size: 11.5px;
}

.index-noresults {
  padding: 44px 4px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .04em;
}
.note-empty {
  padding: 32px 4px;
  color: var(--muted);
}

/* ---- Responsive ---- */
@media (max-width: 680px) {
  .note-link {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
    padding-top: 24px;
    padding-bottom: 24px;
  }
  .note-arrow { display: none; }
  .note-index { font-size: 24px; }
  .index-tools { flex-wrap: wrap; gap: 12px; }
  .index-sort { margin-left: 0; }
  .post-body { font-size: 17px; }
}

/* ---- Post figures (inline SVG diagrams, matching the site's visual language) ---- */
.post-figure {
  margin: clamp(30px, 4.5vw, 48px) 0;
}

.post-figure svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  padding: clamp(18px, 3.4vw, 32px);
}

.post-figure figcaption {
  margin-top: 14px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .02em;
  text-align: center;
}

/* Fig 1 — allocation bars */
.fig-rowlabel { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; fill: var(--muted); }
.seg-produce { fill: var(--accent); }
.seg-cut { fill: url(#allocHatch); stroke: var(--line); stroke-width: 1; }
.seg-judge { fill: var(--accent-warm); }
.seg-txt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-anchor: middle; }
.seg-txt.on-dark { fill: var(--white); }
.seg-txt.on-light { fill: var(--ink); }
.leg-txt { font-family: var(--font-mono); font-size: 11px; fill: var(--muted); }

/* Fig 2 — generated diff (subtraction) */
.diff-panel { fill: var(--paper); stroke: var(--line); stroke-width: 1; }
.diff-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; fill: var(--muted); }
.diff-keep { fill: var(--accent); }
.diff-del { fill: var(--accent); opacity: .15; }
.diff-strike { stroke: #9a9a96; stroke-width: 1.4; }
.diff-glyph-keep { fill: var(--accent); font-family: var(--font-mono); font-size: 15px; }
.diff-glyph-del { fill: #b3b3ae; font-family: var(--font-mono); font-size: 15px; }

/* Working styles: focused human modes beside continuous agent sessions */
.work-panel { fill: var(--paper); stroke: var(--line); stroke-width: 1; }
.work-heading { font-family: var(--font-mono); font-size: 11px; font-weight: 650; letter-spacing: .13em; fill: var(--ink); }
.work-sub { font-family: var(--font-serif); font-size: 13px; font-style: italic; fill: var(--muted); }
.work-human-node { fill: var(--paper-soft); stroke: var(--accent-warm); stroke-width: 1.4; }
.work-node-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-anchor: middle; fill: var(--ink); }
.work-human-line { fill: none; stroke: var(--accent-warm); stroke-width: 1.5; stroke-dasharray: 3 4; }
.work-human-arrow { fill: var(--accent-warm); }
.work-reset { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .06em; text-anchor: middle; fill: var(--accent-warm); }
.work-note { font-family: var(--font-serif); font-size: 12px; font-style: italic; fill: var(--muted); }
.work-agent-session { fill: var(--paper-soft); stroke: var(--accent); stroke-width: 1.2; }
.work-session-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: .09em; fill: var(--accent); }
.work-agent-node { fill: var(--accent); }
.work-agent-line { fill: none; stroke: var(--accent); stroke-width: 1.6; }
.work-agent-arrow { fill: var(--accent); }
.work-step-label { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .04em; text-anchor: middle; fill: var(--muted); }
.work-parallel { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .1em; text-anchor: middle; fill: var(--accent); }

/* Fig 3 — verification loop */
.loop-track { fill: none; stroke: var(--line); stroke-width: 2; }
.loop-flow {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 2 10;
  animation: loopDash 1.5s linear infinite;
}
.loop-node { fill: var(--paper); stroke: var(--accent); stroke-width: 1.6; }
.loop-ic { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.loop-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-anchor: middle; fill: var(--ink); }
.loop-sub { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .05em; text-anchor: middle; fill: var(--muted); }
/* center: human judgment governs the mechanical loop (gold) */
.loop-hub { fill: var(--paper); stroke: var(--accent-warm); stroke-width: 1.8; }
.loop-hub-ic { fill: none; stroke: var(--accent-warm); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.loop-hub-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-anchor: middle; fill: var(--accent-warm); }
.loop-spoke { fill: none; stroke: var(--accent-warm); stroke-width: 1.4; stroke-dasharray: 3 4; }
.loop-spoke-arrow { fill: var(--accent-warm); }
.loop-gov { font-family: var(--font-serif); font-style: italic; font-size: 12px; text-anchor: middle; fill: var(--accent-warm); }

@keyframes loopDash { to { stroke-dashoffset: -24; } }

@media (prefers-reduced-motion: reduce) {
  .loop-flow { animation: none; }
}