:root {
  --ink: #101b2a;
  --ink-soft: #2f3d4f;
  --paper: #f7f4ec;
  --paper-deep: #eee9de;
  --paper-light: #fffdf8;
  --line: #d7d0c2;
  --line-dark: #a9a192;
  --sage: #8fb7a2;
  --sage-dark: #3d6b59;
  --amber: #e8b861;
  --amber-soft: #f4e2bd;
  --rose: #d98272;
  --blue: #7f9fc6;
  --violet: #a58fbd;
  --cyan: #7ab5b2;
  --shadow: 0 20px 60px rgb(16 27 42 / 0.08);
  --content: 1240px;
  --serif: "Newsreader", Georgia, serif;
  --sans: "Manrope", Arial, sans-serif;
  --mono: "DM Mono", "SFMono-Regular", Consolas, monospace;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: 0.25;
  background-image: radial-gradient(rgb(16 27 42 / 0.18) 0.6px, transparent 0.6px);
  background-size: 12px 12px;
  mask-image: linear-gradient(to bottom, black, transparent 48%);
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 4px;
}

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

.site-header {
  position: sticky;
  z-index: 30;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  padding: 0 max(28px, calc((100vw - var(--content)) / 2));
  border-bottom: 1px solid rgb(16 27 42 / 0.12);
  background: rgb(247 244 236 / 0.9);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.025em;
  text-decoration: none;
}

.brand-mark {
  position: relative;
  display: block;
  width: 30px;
  height: 30px;
  border: 1px solid var(--ink);
  border-radius: 50%;
}

.brand-mark::before,
.brand-mark::after,
.brand-mark i {
  position: absolute;
  display: block;
  width: 5px;
  height: 5px;
  content: "";
  border-radius: 50%;
  background: var(--ink);
}

.brand-mark::before {
  top: 6px;
  left: 7px;
}

.brand-mark::after {
  top: 15px;
  right: 6px;
}

.brand-mark i:nth-child(1) {
  top: 13px;
  left: 10px;
  background: var(--amber);
}

.brand-mark i:nth-child(2) {
  top: 7px;
  right: 7px;
  background: var(--sage-dark);
}

.brand-mark i:nth-child(3) {
  bottom: 5px;
  left: 5px;
  background: var(--rose);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 0.88rem;
  font-weight: 600;
}

.site-nav a {
  text-decoration: none;
}

.site-nav a:not(.nav-source):hover {
  text-decoration: underline;
}

.nav-source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  color: var(--paper-light);
  border-radius: 999px;
  background: var(--ink);
}

/* The U+2197 glyph's ink overflows the label's cap height in both directions
   and varies by installed font, so no amount of centring makes it sit right.
   This draws the arrow instead: ink is centred in the viewBox, so the flex
   line does the alignment exactly. */
.ext-arrow {
  flex: none;
  width: 0.72em;
  height: 0.72em;
  opacity: 0.7;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.menu-toggle {
  display: none;
  padding: 8px 12px;
  color: var(--ink);
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--sage-dark);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(430px, 0.97fr);
  gap: 60px;
  align-items: center;
  min-height: 720px;
  max-width: var(--content);
  padding: 84px 28px 92px;
  margin: 0 auto;
}

.hero-copy h1 {
  max-width: 780px;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3.5rem, 6vw, 6.7rem);
  font-weight: 500;
  letter-spacing: -0.065em;
  line-height: 0.89;
}

.hero-copy h1 em {
  color: var(--sage-dark);
  font-weight: 500;
}

.hero-deck {
  max-width: 700px;
  margin: 34px 0 0;
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 50px;
  padding: 0 22px;
  border: 1px solid var(--ink);
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgb(16 27 42 / 0.12);
}

.button-primary {
  color: var(--paper-light);
  background: var(--ink);
}

.button-secondary {
  background: transparent;
}

.button-light {
  color: var(--ink);
  border-color: var(--paper-light);
  background: var(--paper-light);
}

.hero-note {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  align-items: start;
  max-width: 570px;
  margin-top: 48px;
}

.hero-note p {
  margin: 0;
  color: #576171;
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.7;
}

.note-line {
  display: block;
  height: 1px;
  margin-top: 10px;
  background: var(--line-dark);
}

.memory-figure {
  margin: 0;
}

.memory-figure-svg {
  display: block;
  width: 100%;
  height: auto;
}

.mf-band {
  stroke: var(--line);
  stroke-width: 1;
}

/* Tone deepens toward raw evidence: the surface is light, the sediment darker. */
.mf-band-context {
  fill: var(--paper-light);
}

.mf-band-belief {
  fill: #f4f1e8;
}

.mf-band-evidence {
  fill: var(--paper-deep);
}

.mf-layer {
  fill: var(--ink);
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 600;
}

.mf-sub {
  fill: #6b7480;
  font-family: var(--mono);
  font-size: 12.5px;
}

.mf-step {
  fill: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.mf-note {
  fill: #8b939d;
  font-family: var(--mono);
  font-size: 11.5px;
  font-style: italic;
}

/* The ascent: solid, confident, taken by every system in the atlas. */
.mf-up {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The descent: dashed, because it is nearly always incomplete. */
.mf-down {
  fill: none;
  stroke: var(--rose);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mf-down {
  stroke-dasharray: 7 6;
}

.mf-up-head {
  fill: var(--ink);
}

.mf-down-head {
  fill: var(--rose);
}

.mf-step-down {
  fill: #b4604f;
}

.mf-note-down {
  fill: #c08476;
}

.memory-figure-caption {
  max-width: 46ch;
  margin: 26px auto 0;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.55;
  text-align: center;
  text-wrap: pretty;
}

.signal-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: var(--content);
  margin: 0 auto;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}

.signal-strip div {
  display: flex;
  align-items: baseline;
  gap: 13px;
  min-height: 104px;
  padding: 28px;
  border-right: 1px solid var(--line);
}

.signal-strip div:last-child {
  border-right: 0;
}

.signal-strip strong {
  font-family: var(--serif);
  font-size: 2.3rem;
  font-weight: 500;
  line-height: 1;
}

.signal-strip span {
  color: #626b76;
  font-family: var(--mono);
  font-size: 0.62rem;
  line-height: 1.5;
  text-transform: uppercase;
}

.thesis-section,
.patterns-section,
.start-here,
.systems-section,
.method-section {
  max-width: var(--content);
  padding: 128px 28px;
  margin: 0 auto;
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: 40px;
  align-items: end;
  margin-bottom: 54px;
}

.section-heading .eyebrow {
  align-self: start;
  margin-top: 12px;
}

.section-heading h2 {
  max-width: 820px;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.5rem, 4.6vw, 5.2rem);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.thesis-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}

.thesis-card {
  position: relative;
  min-height: 280px;
  padding: 34px;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: rgb(255 253 248 / 0.58);
}

.thesis-card:nth-child(2),
.thesis-card:nth-child(3) {
  min-height: 220px;
}

.thesis-main {
  grid-row: span 2;
  padding: 48px;
  background: var(--ink);
  color: var(--paper-light);
}

.card-index {
  color: var(--sage-dark);
  font-family: var(--mono);
  font-size: 0.7rem;
}

.thesis-main .card-index {
  color: var(--amber);
}

.thesis-card h3 {
  max-width: 580px;
  margin: 58px 0 16px;
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.05;
}

.thesis-main h3 {
  margin-top: 100px;
  font-size: clamp(2.7rem, 4vw, 4.4rem);
}

.thesis-card p {
  max-width: 640px;
  margin: 0;
  color: #566170;
}

.thesis-main p {
  color: #cbd4dc;
  font-size: 1.1rem;
}

.thesis-card a {
  display: inline-flex;
  gap: 20px;
  margin-top: 34px;
  color: var(--amber);
  font-size: 0.85rem;
  font-weight: 700;
}

.patterns-section {
  padding-top: 70px;
}

.patterns-heading {
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
}

.patterns-heading > p {
  max-width: 520px;
  margin: 0 0 8px;
  color: #566170;
  font-size: 1rem;
}

.pattern-preview-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--ink);
  background: var(--ink);
}

.pattern-preview-card {
  --pattern-accent: var(--sage);
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 360px;
  padding: 28px;
  overflow: hidden;
  background: var(--paper-light);
  text-decoration: none;
}

.pattern-preview-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 6px;
  content: "";
  background: var(--pattern-accent);
}

.pattern-preview-card::after {
  position: absolute;
  right: -52px;
  bottom: -52px;
  width: 150px;
  height: 150px;
  content: "";
  border: 1px solid color-mix(in srgb, var(--pattern-accent) 60%, transparent);
  border-radius: 50%;
  box-shadow:
    0 0 0 24px color-mix(in srgb, var(--pattern-accent) 8%, transparent),
    0 0 0 48px color-mix(in srgb, var(--pattern-accent) 5%, transparent);
}

.pattern-preview-card > span {
  display: flex;
  gap: 12px;
  align-items: center;
  color: #69737e;
  font-family: var(--mono);
  font-size: 0.61rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pattern-preview-card > span b {
  color: var(--ink);
  font-weight: 500;
}

.pattern-preview-card h3 {
  max-width: 240px;
  margin: 58px 0 18px;
  font-family: var(--serif);
  font-size: 2.25rem;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
}

.pattern-preview-card p {
  max-width: 270px;
  margin: 0;
  color: #566170;
  font-size: 0.84rem;
}

.pattern-preview-card em {
  z-index: 1;
  margin-top: auto;
  color: var(--sage-dark);
  font-size: 0.73rem;
  font-style: normal;
  font-weight: 700;
}

.pattern-preview-card:hover h3 {
  color: var(--sage-dark);
}

.preview-rose { --pattern-accent: var(--rose); }
.preview-sage { --pattern-accent: var(--sage); }
.preview-blue { --pattern-accent: var(--blue); }
.preview-amber { --pattern-accent: var(--amber); }

.pattern-library-link {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 24px;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
  color: var(--paper-light);
  background: var(--ink);
  font-family: var(--mono);
  font-size: 0.68rem;
  text-decoration: none;
}

.pattern-library-link span:first-child {
  color: var(--amber);
  font-weight: 500;
  text-transform: uppercase;
}

.pattern-library-link span:last-child {
  color: #bfc9d2;
}

.systems-section {
  padding-top: 88px;
}

.systems-heading {
  grid-template-columns: 1fr auto;
}

.system-tools {
  align-self: end;
}

.search-box {
  display: flex;
  align-items: center;
  width: min(340px, 80vw);
  height: 48px;
  padding: 0 15px;
  border: 1px solid var(--line-dark);
  border-radius: 4px;
  background: var(--paper-light);
}

.search-box > span {
  margin-right: 10px;
  color: var(--sage-dark);
  font-size: 1.3rem;
}

.search-box input {
  width: 100%;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-size: 0.84rem;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.capability-row {
  margin-top: 10px;
}

.filter-legend {
  align-self: center;
  margin-right: 2px;
  color: #7c8794;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.cap-filter {
  cursor: help;
}

.result-count {
  margin: 18px 0 0;
  color: #6e7580;
  font-family: var(--mono);
  font-size: 0.7rem;
}

.filter-chip {
  padding: 8px 14px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  color: var(--ink-soft);
  background: transparent;
  font-size: 0.73rem;
  font-weight: 600;
  cursor: pointer;
}

.filter-chip:hover,
.filter-chip.is-active {
  color: var(--paper-light);
  border-color: var(--ink);
  background: var(--ink);
}

.system-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--ink);
  background: var(--ink);
}

.system-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 420px;
  padding: 28px;
  overflow: hidden;
  background: var(--paper-light);
}

.system-card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 5px;
  content: "";
  background: var(--card-accent, var(--sage));
}

.system-card[hidden] {
  display: none;
}

.system-card-wide {
  grid-column: 1 / -1;
  min-height: 380px;
  background:
    radial-gradient(circle at 82% 32%, rgb(143 183 162 / 28%), transparent 24%),
    linear-gradient(110deg, var(--paper-light) 0%, var(--paper-light) 45%, #edf3ef 100%);
}

.system-card-wide > p,
.system-card-wide dl {
  max-width: 520px;
}

.system-card-top {
  display: flex;
  justify-content: space-between;
  color: #6e7580;
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.system-card h3 {
  margin: 56px 0 16px;
  font-family: var(--serif);
  font-size: 2.5rem;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
}

.system-card > p {
  min-height: 82px;
  margin: 0;
  color: #566170;
  font-size: 0.9rem;
}

.system-card dl {
  margin: 22px 0 28px;
  border-top: 1px solid var(--line);
}

.system-card dl div {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.system-card dt {
  color: #777e87;
  font-family: var(--mono);
  font-size: 0.58rem;
  text-transform: uppercase;
}

.system-card dd {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.45;
}

.system-card > a {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  color: var(--sage-dark);
  font-size: 0.78rem;
  font-weight: 700;
}

.system-card > a:hover {
  color: var(--ink);
}

/* Every card has exactly one link, so the whole card can be its target. The
   link keeps its place in the layout and grows an overlay across the card,
   which leaves the markup, the focus order and the filter script untouched. */
.system-card > a::after {
  position: absolute;
  inset: 0;
  content: "";
}

.system-card:hover > a {
  color: var(--ink);
}

.system-card:hover h3 {
  color: var(--sage-dark);
}

/* Focus lands on the link, so draw the ring around what it now covers. */
.system-card > a:focus-visible {
  outline: none;
}

.system-card > a:focus-visible::after {
  outline: 2px solid var(--ink);
  outline-offset: -4px;
}

.accent-sage { --card-accent: #8fb7a2; }
.accent-mint { --card-accent: #abd2bb; }
.accent-blue { --card-accent: #7f9fc6; }
.accent-amber { --card-accent: #e8b861; }
.accent-rose { --card-accent: #d98272; }
.accent-violet { --card-accent: #a58fbd; }
.accent-cyan { --card-accent: #7ab5b2; }
.accent-red { --card-accent: #bd665e; }
.accent-gold { --card-accent: #c89536; }
.accent-sky { --card-accent: #8ab7cf; }
.accent-ink { --card-accent: #101b2a; }

.empty-state {
  padding: 60px 20px;
  border: 1px solid var(--line-dark);
  text-align: center;
}

.compare-callout {
  position: relative;
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 70px;
  align-items: center;
  min-height: 610px;
  padding: 88px max(28px, calc((100vw - var(--content)) / 2));
  overflow: hidden;
  color: var(--paper-light);
  background: var(--ink);
}

.compare-callout .eyebrow {
  color: var(--amber);
}

.compare-callout h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.8rem, 5vw, 5.7rem);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.compare-callout p:not(.eyebrow) {
  max-width: 780px;
  margin: 28px 0 38px;
  color: #c4ccd5;
  font-size: 1.05rem;
}

.callout-map {
  position: relative;
  width: min(420px, 80vw);
  aspect-ratio: 1;
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 50%;
}

.callout-map::before,
.callout-map::after {
  position: absolute;
  content: "";
  border: 1px solid rgb(255 255 255 / 0.17);
  border-radius: 50%;
}

.callout-map::before {
  inset: 16%;
}

.callout-map::after {
  inset: 33%;
}

.callout-map span {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 4px solid var(--ink);
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.55);
}

.callout-map span:nth-child(1) { top: 8%; left: 48%; }
.callout-map span:nth-child(2) { top: 30%; right: 9%; background: var(--sage); }
.callout-map span:nth-child(3) { right: 22%; bottom: 11%; background: var(--rose); }
.callout-map span:nth-child(4) { bottom: 18%; left: 13%; background: var(--blue); }
.callout-map span:nth-child(5) { top: 32%; left: 20%; background: var(--violet); }

.method-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-dark);
  border-left: 1px solid var(--line-dark);
}

.method-grid > div {
  min-height: 280px;
  padding: 28px;
  border-right: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}

.method-grid span {
  color: var(--sage-dark);
  font-family: var(--mono);
  font-size: 0.68rem;
}

.method-grid h3 {
  margin: 70px 0 14px;
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 500;
}

.method-grid p {
  margin: 0;
  color: #606a76;
  font-size: 0.84rem;
}

.method-links {
  display: flex;
  gap: 36px;
  margin-top: 30px;
  font-size: 0.82rem;
  font-weight: 700;
}

.method-links a {
  display: inline-flex;
  gap: 30px;
}

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  padding: 64px max(28px, calc((100vw - var(--content)) / 2));
  border-top: 1px solid var(--line-dark);
  background: var(--paper-deep);
}

.footer-brand {
  margin-bottom: 12px;
}

.site-footer p {
  max-width: 420px;
  margin: 0;
  color: #68717c;
  font-size: 0.78rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: start;
  font-size: 0.76rem;
  font-weight: 700;
}

/* Document pages */

.reading-progress {
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
}

.reading-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
}

.document-hero {
  position: relative;
  min-height: 470px;
  overflow: hidden;
  color: var(--paper-light);
  background: var(--ink);
}

.document-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1060px;
  padding: 70px 28px 76px;
  margin: 0 auto;
}

.back-link {
  display: inline-flex;
  gap: 9px;
  margin-bottom: 68px;
  color: #b9c3cd;
  font-size: 0.74rem;
  font-weight: 600;
  text-decoration: none;
}

.document-hero .eyebrow {
  color: var(--amber);
}

.document-hero h1 {
  max-width: 880px;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3.4rem, 7vw, 7rem);
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 0.92;
}

.document-deck {
  max-width: 800px;
  margin: 24px 0 0;
  color: #c7d0d8;
  font-size: 1.1rem;
}

.document-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
}

.meta-pill {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  min-height: 45px;
  padding: 8px 14px;
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: 4px;
  text-decoration: none;
}

.meta-pill span {
  color: #9eabb7;
  font-family: var(--mono);
  font-size: 0.56rem;
  text-transform: uppercase;
}

.meta-pill strong,
.meta-pill code {
  overflow: hidden;
  max-width: 280px;
  color: var(--paper-light);
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.revision-pill code {
  max-width: 190px;
}

.meta-pill .ext-arrow {
  color: var(--amber);
  opacity: 1;
}

/* The rubric, at the top of every report. The comparative index answers
   "which systems have X"; arriving on one report the useful question is what
   this system has and lacks against the same seven definitions. */
.capability-strip {
  margin-top: 26px;
}

.cap-legend {
  margin: 0 0 10px;
  color: #9eabb7;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.cap-legend b {
  color: var(--paper-light);
  font-weight: 600;
}

.cap-legend span {
  text-transform: none;
  letter-spacing: 0.02em;
}

.cap-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cap-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  color: #8d99a6;
  font-size: 0.72rem;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 999px;
  cursor: help;
}

.cap-chip.is-present {
  color: var(--paper-light);
  border-color: rgb(143 183 162 / 0.55);
  background: rgb(143 183 162 / 0.12);
}

.cap-mark {
  color: #6f7b88;
  font-size: 0.78rem;
  line-height: 1;
}

.cap-chip.is-present .cap-mark {
  color: var(--sage);
}

/* Sits above content rather than shifting it, and is dismissed by choosing —
   there is no close button, because closing without choosing is not a choice. */
/* Sits directly under the patterns section, so it takes the shared width and
   gutters above and only trims the duplicated vertical lead-in. */
.start-here {
  padding-top: 0;
}

.start-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.start-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px;
  color: var(--ink);
  border: 1px solid var(--line-dark);
  border-radius: 4px;
  text-decoration: none;
}

.start-card span {
  color: var(--sage-dark);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.start-card h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.32rem;
  font-weight: 400;
}

.start-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.55;
}

.start-card b {
  margin-top: auto;
  padding-top: 10px;
  color: var(--sage-dark);
  font-size: 0.78rem;
}

.start-card:hover {
  border-color: var(--sage-dark);
}

.capability-grid {
  font-size: 0.82rem;
}

.capability-grid th[scope="col"] {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.capability-grid th[scope="row"] {
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.capability-grid td {
  text-align: center;
}

.capability-grid .cap-yes {
  color: var(--sage-dark);
  font-weight: 700;
}

.capability-grid .cap-no {
  color: #b6bcc4;
}

.capability-grid .cap-count {
  font-family: var(--mono);
  font-size: 0.72rem;
}

.capability-grid tr[hidden] {
  display: none;
}

.prose .capability-row {
  margin: 0 0 6px;
}

.prose .result-count {
  margin: 0 0 18px;
}

.consent-banner {
  position: fixed;
  right: 18px;
  bottom: 18px;
  left: 18px;
  z-index: 90;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  align-items: center;
  justify-content: space-between;
  max-width: 640px;
  margin: 0 auto;
  padding: 18px 22px;
  color: var(--paper-light);
  background: var(--ink);
  border-radius: 6px;
  box-shadow: 0 18px 44px rgb(16 27 42 / 28%);
}

.consent-banner p {
  flex: 1 1 260px;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
}

.consent-actions {
  display: flex;
  gap: 10px;
}

.consent-banner button {
  padding: 8px 16px;
  color: var(--paper-light);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

.consent-banner button.is-primary {
  color: var(--ink);
  border-color: var(--sage);
  background: var(--sage);
}

.consent-banner button:hover {
  border-color: var(--paper-light);
}

.footer-consent {
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  border: 0;
  background: none;
  cursor: pointer;
}

.footer-consent:hover {
  text-decoration: underline;
}

@media (max-width: 520px) {
  .consent-banner {
    flex-direction: column;
    align-items: stretch;
  }

  .consent-actions {
    justify-content: flex-end;
  }
}

.hero-contours {
  position: absolute;
  z-index: 1;
  top: -45%;
  right: -6%;
  width: 650px;
  height: 650px;
  opacity: 0.25;
}

.hero-contours span {
  position: absolute;
  border: 1px solid var(--sage);
  border-radius: 50%;
}

.hero-contours span:nth-child(1) { inset: 4%; }
.hero-contours span:nth-child(2) { inset: 18%; }
.hero-contours span:nth-child(3) { inset: 32%; }
.hero-contours span:nth-child(4) { inset: 46%; background: rgb(232 184 97 / 0.2); }

.document-shell {
  display: grid;
  grid-template-columns: 230px minmax(0, 820px);
  gap: 72px;
  justify-content: center;
  max-width: 1220px;
  padding: 82px 28px 130px;
  margin: 0 auto;
}

.toc-shell {
  position: relative;
}

.toc {
  position: sticky;
  top: 108px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  padding-right: 18px;
}

.toc > p {
  padding-bottom: 12px;
  margin: 0 0 14px;
  border-bottom: 1px solid var(--line);
  color: #727a83;
  font-family: var(--mono);
  font-size: 0.61rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.toc nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.toc a {
  padding: 4px 0 4px 11px;
  border-left: 2px solid transparent;
  color: #6c7580;
  font-size: 0.69rem;
  line-height: 1.4;
  text-decoration: none;
}

.toc a:hover,
.toc a.is-active {
  color: var(--ink);
  border-color: var(--amber);
}

.toc a.toc-sub {
  padding-left: 22px;
  font-size: 0.64rem;
}

.prose {
  min-width: 0;
}

.prose > :first-child {
  margin-top: 0;
}

.prose h2 {
  padding-top: 46px;
  margin: 54px 0 24px;
  border-top: 1px solid var(--line-dark);
  font-family: var(--serif);
  font-size: clamp(2.15rem, 4vw, 3.4rem);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.05;
}

.prose h3 {
  margin: 46px 0 16px;
  font-family: var(--serif);
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.prose h4 {
  margin: 36px 0 12px;
  font-size: 1rem;
}

.prose p,
.prose li {
  color: #354456;
}

.prose p {
  margin: 0 0 19px;
}

.prose strong {
  color: var(--ink);
}

.prose a {
  color: #245f4b;
}

.prose ul,
.prose ol {
  padding-left: 24px;
  margin: 16px 0 25px;
}

.prose li {
  padding-left: 6px;
  margin: 7px 0;
}

.prose blockquote {
  padding: 7px 0 7px 24px;
  margin: 30px 0;
  border-left: 4px solid var(--amber);
  color: #4d5968;
  font-family: var(--serif);
  font-size: 1.25rem;
}

.prose code {
  padding: 0.12em 0.34em;
  border: 1px solid #ddd5c7;
  border-radius: 3px;
  background: #eee9df;
  font-family: var(--mono);
  font-size: 0.82em;
  /* Long unbroken spans (commit ids, file paths) were widening the whole
     document and giving every page a horizontal scrollbar. */
  overflow-wrap: anywhere;
}

.prose pre {
  max-width: 100%;
  padding: 22px;
  overflow-x: auto;
  border: 1px solid #2e4054;
  border-radius: 5px;
  color: #e5ecf2;
  background: #142335;
  font-family: var(--mono);
  font-size: 0.76rem;
  line-height: 1.65;
}

.prose pre code {
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
}

.prose pre.mermaid {
  color: var(--ink);
  border-color: var(--line);
  background: var(--paper-light);
}

.prose .mermaid {
  padding: 24px;
  margin: 28px 0;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper-light);
}

.prose .table-wrap {
  max-width: 100%;
  margin: 30px 0;
  overflow-x: auto;
  border: 1px solid var(--line-dark);
}

.prose table {
  width: 100%;
  min-width: 700px;
  border-collapse: collapse;
  font-size: 0.72rem;
  line-height: 1.45;
}

.prose th,
.prose td {
  padding: 11px 13px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  text-align: left;
}

.prose th {
  position: sticky;
  top: 0;
  color: var(--paper-light);
  background: var(--ink);
  font-family: var(--mono);
  font-size: 0.61rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* The rule above dresses `th` as the dark sticky column-header band, which
   assumes every `th` is a column header. The capability grid also marks its
   first column as `th scope="row"` — correct markup for a row label — so all
   62 system names inherited the dark band while the link inside kept its own
   green, leaving dark green on near-black. Row headers get ordinary cell
   treatment; only column headers get the band. */
.prose th[scope="row"] {
  position: static;
  color: inherit;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  letter-spacing: normal;
}

.prose tr:nth-child(even) td,
.prose tr:nth-child(even) th[scope="row"] {
  background: rgb(255 253 248 / 0.66);
}

.table-tools {
  display: none;
  justify-content: flex-end;
  margin: 30px 0 10px;
}

.table-tools.is-available {
  display: flex;
}

.table-tools + .table-wrap {
  margin-top: 0;
}

.table-expand {
  padding: 7px 13px;
  border: 1px solid var(--line-dark);
  border-radius: 4px;
  color: var(--ink-soft);
  background: var(--paper-light);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.table-expand:hover {
  color: var(--ink);
  border-color: var(--ink);
  background: #fff;
}

.table-expand:focus-visible {
  outline: 2px solid var(--sage-dark);
  outline-offset: 2px;
}

/* Breaking out of the prose column: width and offset are set in JS because the
   column is a grid cell, not a centred block. */
.prose .table-wrap.is-expanded {
  position: relative;
  z-index: 20;
  max-width: none;
  background: var(--paper-light);
  box-shadow: var(--shadow);
}

.sticky-table-head {
  position: fixed;
  z-index: 25;
  display: none;
  overflow: hidden;
  border-right: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  border-left: 1px solid var(--line-dark);
  background: var(--ink);
  box-shadow: 0 12px 28px rgb(16 27 42 / 0.2);
  pointer-events: none;
}

.sticky-table-head.is-visible {
  display: block;
}

.sticky-table-head table {
  table-layout: fixed;
  border-collapse: collapse;
  color: var(--paper-light);
  background: var(--ink);
  font-size: 0.72rem;
  line-height: 1.45;
  transform-origin: left top;
  will-change: transform;
}

.sticky-table-head th {
  padding: 11px 13px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--paper-light);
  background: var(--ink);
  font-family: var(--mono);
  font-size: 0.61rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: left;
  vertical-align: top;
}

.prose hr {
  margin: 46px 0;
  border: 0;
  border-top: 1px solid var(--line-dark);
}

.prose .pattern-index-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 48px 0 64px;
  border: 1px solid var(--ink);
  background: var(--ink);
}

.prose .pattern-index-card {
  --pattern-card: var(--sage);
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 310px;
  padding: 28px;
  overflow: hidden;
  color: var(--ink);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--pattern-card) 14%, var(--paper-light)), var(--paper-light) 58%);
  text-decoration: none;
}

.prose .pattern-index-card::after {
  position: absolute;
  right: -38px;
  bottom: -38px;
  width: 120px;
  height: 120px;
  content: "";
  border: 1px solid color-mix(in srgb, var(--pattern-card) 65%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 22px color-mix(in srgb, var(--pattern-card) 8%, transparent);
}

.prose .pattern-index-card > span {
  color: #5d6874;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.prose .pattern-index-card h2 {
  max-width: 310px;
  padding: 0;
  margin: 52px 0 14px;
  border: 0;
  font-size: 2.15rem;
}

.prose .pattern-index-card p {
  max-width: 350px;
  margin: 0 0 28px;
  font-size: 0.82rem;
}

.prose .pattern-index-card b {
  z-index: 1;
  margin-top: auto;
  color: var(--sage-dark);
  font-size: 0.72rem;
}

.prose .pattern-index-card:hover h2 {
  color: var(--sage-dark);
}

.prose .tone-rose { --pattern-card: var(--rose); }
.prose .tone-sage { --pattern-card: var(--sage); }
.prose .tone-violet { --pattern-card: var(--violet); }
.prose .tone-blue { --pattern-card: var(--blue); }
.prose .tone-amber { --pattern-card: var(--amber); }
.prose .tone-red { --pattern-card: #bd665e; }
.prose .tone-cyan { --pattern-card: var(--cyan); }
.prose .tone-mint { --pattern-card: #abd2bb; }
.prose .tone-gold { --pattern-card: #c89536; }
.prose .tone-ink { --pattern-card: #617185; }

@media (max-width: 1050px) {
  .home-hero {
    grid-template-columns: 1fr;
  }


  .system-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pattern-preview-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .method-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .document-shell {
    grid-template-columns: minmax(0, 820px);
  }

  .toc-shell {
    display: none;
  }
}

@media (max-width: 760px) {
  /* The figure scales with its viewBox, so at phone widths the annotation
     layers fall to ~7px. Rather than shrink further, drop to the diagram's
     core — three layers, three arrows, three verbs — and let the caption
     below carry the argument in readable prose. */
  .mf-sub,
  .mf-note {
    display: none;
  }

  .mf-layer {
    font-size: 34px;
  }

  .mf-step {
    font-size: 20px;
    transform: translateY(16px);
  }

  .site-header {
    min-height: 66px;
    padding: 0 18px;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .site-nav {
    position: absolute;
    top: 58px;
    right: 12px;
    display: none;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
    min-width: 210px;
    padding: 16px;
    border: 1px solid var(--line-dark);
    border-radius: 6px;
    background: var(--paper-light);
    box-shadow: var(--shadow);
  }

  .site-nav.is-open {
    display: flex;
  }

  .home-hero {
    gap: 52px;
    min-height: auto;
    padding: 70px 18px;
  }

  .hero-copy h1 {
    font-size: clamp(3rem, 15vw, 4.7rem);
  }









  .signal-strip {
    grid-template-columns: repeat(2, 1fr);
    margin: 0 18px;
  }

  .signal-strip div:nth-child(2) {
    border-right: 0;
  }

  .signal-strip div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .thesis-section,
  .patterns-section,
  .start-here,
  .systems-section,
  .method-section {
    padding: 90px 18px;
  }

  /* The shorthand above would reinstate the lead-in this section deliberately
     drops; it follows the patterns section at every width. */
  .start-here {
    padding-top: 0;
  }

  .section-heading,
  .systems-heading {
    grid-template-columns: 1fr;
  }

  .section-heading .eyebrow {
    margin-top: 0;
  }

  .thesis-grid {
    grid-template-columns: 1fr;
  }

  .thesis-main {
    grid-row: auto;
  }

  .pattern-preview-grid,
  .prose .pattern-index-grid {
    grid-template-columns: 1fr;
  }

  .pattern-preview-card {
    min-height: 320px;
  }

  .pattern-library-link {
    flex-direction: column;
  }

  .system-tools,
  .search-box {
    width: 100%;
  }

  .system-grid {
    grid-template-columns: 1fr;
  }

  .system-card {
    min-height: 390px;
  }

  .compare-callout {
    grid-template-columns: 1fr;
    padding: 80px 18px;
  }

  .callout-map {
    max-width: 330px;
    margin: 0 auto;
  }

  .method-grid {
    grid-template-columns: 1fr;
  }

  .method-grid > div {
    min-height: 230px;
  }

  .method-grid h3 {
    margin-top: 45px;
  }

  .method-links {
    flex-direction: column;
    gap: 14px;
  }

  .site-footer {
    flex-direction: column;
    padding: 50px 18px;
  }

  .footer-links {
    flex-direction: column;
    gap: 10px;
  }

  .document-hero-inner {
    padding: 54px 18px 62px;
  }

  .back-link {
    margin-bottom: 52px;
  }

  .document-hero h1 {
    font-size: clamp(3rem, 16vw, 5rem);
  }

  .document-meta {
    flex-direction: column;
    align-items: stretch;
  }

  .meta-pill {
    min-width: 0;
  }

  .meta-pill strong,
  .meta-pill code {
    max-width: 52vw;
  }

  .document-shell {
    padding: 60px 18px 96px;
  }

  .prose h2 {
    font-size: 2.35rem;
  }

  .prose .table-wrap {
    margin-right: -18px;
    margin-left: -18px;
    border-right: 0;
    border-left: 0;
  }
}

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

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}