/* ============================================================
   Akasha Zhu — Site Design System
   Boss-approved colors (paper + ink) + scholarly serif structure
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&family=JetBrains+Mono:wght@400;500;600&family=Inter:wght@400;500;600&display=swap');

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

:root {
  /* Boss-approved paper + ink */
  --bg: #F0EEE6;
  --bg-elev: #E8E5DA;
  --text: #1F1E1D;
  --text-muted: #847A6E;
  --line: #D9D4C5;
  --accent: #1F4D4A;
  --accent-soft: #C9D8D4;
  --highlight: #F0E0BE;

  --serif: 'Newsreader', 'Georgia', 'Times New Roman', serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  --ui: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --container: 880px;
  --container-wide: 1180px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 32px;
  --space-lg: 64px;
  --space-xl: 96px;
  --space-2xl: 144px;

  --display: clamp(2.6rem, 5vw, 3.8rem);
  --h1: clamp(1.9rem, 3.2vw, 2.4rem);
  --h2: clamp(1.4rem, 2.4vw, 1.7rem);
  --h3: 1.2rem;
  --body: 1.06rem;
  --small: 0.92rem;
  --xs: 0.82rem;

  --radius: 6px;
  --radius-lg: 14px;
  --shadow-card: 0 1px 0 rgba(31,30,29,0.04), 0 8px 24px -16px rgba(31,30,29,0.18);
  --transition: 0.3s ease;
}

body.dark, html[data-theme="dark"] {
  --bg: #1F1E1D;
  --bg-elev: #2A2826;
  --text: #E8E6DE;
  --text-muted: #9A9183;
  --line: #3A3733;
  --accent: #6BAA9A;
  --accent-soft: #1F3331;
  --highlight: #2D2820;
  --shadow-card: 0 1px 0 rgba(0,0,0,0.4), 0 8px 24px -16px rgba(0,0,0,0.5);
}

html { font-size: 18px; line-height: 1.65; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--serif);
  background-color: var(--bg);
  color: var(--text);
  font-feature-settings: "kern", "liga", "ss01";
  font-optical-sizing: auto;
  transition: background var(--transition), color var(--transition);
  overflow-x: hidden;
}

html[lang="en"] .lang-zh { display: none !important; }
html[lang="zh"] .lang-en { display: none !important; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container-wide { max-width: var(--container-wide); margin: 0 auto; padding: 0 24px; }

/* v5.8: bumped section padding 120/80 → 144/96 (combined gap between
   adjacent sections grew from 200px to 240px) to address "sections
   feel too tight" feedback after dividers were removed.
   v5.9: bumped to 200/144 per boss feedback that Investments / Contact
   still feel tight against the section above.
   v6.0: many sections also carry class="container", whose
   `padding: 0 24px` shorthand has higher specificity than `section`
   and was zeroing out the vertical padding. Re-apply padding-top /
   padding-bottom on `section.container` so the spacing actually lands. */
section { padding: 100px 0 72px; position: relative; }
section.container, section.container-wide {
  padding-top: 100px;
  padding-bottom: 72px;
}

/* ---------- Top nav ---------- */
.topnav {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.topnav-inner {
  max-width: var(--container-wide); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px;
  font-family: var(--ui); font-size: 0.86rem; font-weight: 500;
  letter-spacing: 0.01em;
}
.topnav-brand { font-family: var(--serif); font-weight: 600; font-size: 1.08rem; letter-spacing: -0.01em; color: var(--text); text-decoration: none; }
.topnav-brand:hover { opacity: 0.7; }
.topnav-links { display: flex; gap: 22px; align-items: center; }
.topnav-links a { color: var(--text-muted); text-decoration: none; transition: color var(--transition); }
.topnav-links a:hover { color: var(--text); }
.topnav-tools { display: flex; gap: 14px; align-items: center; }

@media (max-width: 720px) { .topnav-links { display: none; } }

/* ---------- Toggles ---------- */
.tool-btn {
  font-family: var(--ui); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em;
  background: transparent; border: 1px solid var(--line); color: var(--text-muted);
  padding: 6px 11px; border-radius: 999px; cursor: pointer;
  transition: all var(--transition);
}
.tool-btn:hover { color: var(--text); border-color: var(--text-muted); }
.tool-btn .sep { opacity: 0.4; margin: 0 4px; }
.tool-btn .on { color: var(--text); font-weight: 700; }

/* ---------- Hero ---------- */
.hero {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-lg);
  position: relative;
}
.hero h1 {
  font-size: var(--display);
  font-weight: 600;
  line-height: 1.0;
  letter-spacing: -0.025em;
  margin-bottom: var(--space-sm);
  font-variation-settings: "opsz" 60;
}
.hero .eyebrow {
  font-family: var(--ui);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 20px;
}
.hero .lead {
  font-size: 1.2rem;
  line-height: 1.55;
  max-width: 720px;
  color: var(--text);
  margin-top: var(--space-md);
  font-style: italic;
  font-weight: 380;
  font-variation-settings: "opsz" 30;
}
.hero .lead a {
  font-style: normal;
  color: var(--text);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: border-color var(--transition);
}
.hero .lead a:hover { border-color: var(--accent); color: var(--accent); }

.hero-meta {
  display: flex; flex-wrap: wrap; gap: 22px;
  margin-top: var(--space-lg);
  font-family: var(--ui); font-size: 0.84rem; color: var(--text-muted);
}
.hero-meta span strong { color: var(--text); font-weight: 600; }

/* ---------- Iron Triangle ---------- */
.triangle-section {
  padding: var(--space-2xl) 0 var(--space-xl);
  text-align: center;
}
.triangle-eyebrow {
  font-family: var(--ui); font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 22px;
}
.triangle-title {
  font-size: clamp(1.9rem, 3.6vw, 2.6rem); font-weight: 600; line-height: 1.15;
  letter-spacing: -0.02em; margin-bottom: 14px;
}
.triangle-sub {
  color: var(--text-muted); max-width: 560px; margin: 0 auto var(--space-lg);
  font-size: 1.05rem; line-height: 1.6;
}
.triangle-wrap {
  position: relative; max-width: 580px; margin: 0 auto;
  aspect-ratio: 1 / 0.92;
}
.triangle-svg { width: 100%; height: 100%; overflow: visible; }
.tri-edge { stroke: var(--line); stroke-width: 1.5; fill: none; transition: stroke var(--transition); }
.tri-vertex { cursor: pointer; transition: all var(--transition); }
.tri-vertex circle { fill: var(--bg); stroke: var(--text); stroke-width: 1.6; transition: all var(--transition); }
.tri-vertex:hover circle { fill: var(--accent); stroke: var(--accent); }
.tri-vertex .tri-label {
  font-family: var(--serif); font-size: 22px; font-weight: 600;
  fill: var(--text); transition: fill var(--transition);
}
.tri-vertex:hover .tri-label { fill: var(--bg); }
.tri-vertex .tri-tag {
  font-family: var(--ui); font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; fill: var(--text-muted);
  text-transform: uppercase;
}
.tri-center { font-family: var(--mono); font-size: 12px; font-weight: 500; fill: var(--text-muted); letter-spacing: 0.04em; }
.tri-center-formula { font-family: var(--mono); font-size: 14px; font-weight: 600; fill: var(--text); }

/* ---------- Lifecycle Flow (Action → Currency engine) ---------- */
.lifecycle-section {
  padding: var(--space-xl) 0 var(--space-2xl);
  text-align: center;
  border-top: 1px solid var(--line);
}
.lifecycle-eyebrow {
  font-family: var(--ui); font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 22px;
}
.lifecycle-title {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 600; line-height: 1.15;
  letter-spacing: -0.02em; margin-bottom: 14px;
}
.lifecycle-sub {
  color: var(--text-muted); max-width: 620px; margin: 0 auto var(--space-lg);
  font-size: 1.05rem; line-height: 1.6;
}
.lifecycle-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.lifecycle-svg {
  width: 100%;
  min-width: 820px;
  height: auto;
  overflow: visible;
  display: block;
}

.life-node circle {
  fill: var(--bg);
  stroke: var(--text);
  stroke-width: 1.6;
  transition: all var(--transition);
}
.life-node:hover circle {
  fill: var(--accent);
  stroke: var(--accent);
}
.life-label {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  fill: var(--text);
  letter-spacing: 0.06em;
  transition: fill var(--transition);
  pointer-events: none;
}
.life-node:hover .life-label { fill: var(--bg); }

.life-caption-cn,
.life-caption-en {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  fill: var(--text);
  letter-spacing: -0.005em;
  pointer-events: none;
}
.life-caption-mono {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  fill: var(--text-muted);
  letter-spacing: 0.08em;
  pointer-events: none;
}

.life-arrow {
  stroke: var(--line);
  stroke-width: 1.6;
  fill: none;
  transition: stroke var(--transition);
}
.life-arrowhead { fill: var(--line); transition: fill var(--transition); }
.lifecycle-svg:hover .life-arrow,
.lifecycle-svg:hover .life-arrowhead { stroke: var(--text-muted); fill: var(--text-muted); }

.life-loop {
  stroke: var(--accent);
  stroke-width: 1.2;
  stroke-dasharray: 5, 5;
  fill: none;
  opacity: 0.7;
}
.life-loophead { fill: var(--accent); opacity: 0.7; }
.life-loop-text {
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: var(--accent);
  pointer-events: none;
}

.life-tooltip-bg {
  fill: var(--bg-elev);
  stroke: var(--accent);
  stroke-width: 1;
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}
.life-tooltip {
  font-family: var(--ui);
  font-size: 11.5px;
  line-height: 1.45;
  fill: var(--text);
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
}
.life-node:hover .life-tooltip-bg,
.life-node:hover .life-tooltip { opacity: 1; }

/* ---------- Section heading ---------- */
/* v3.0.3: dropped border-bottom + padding-bottom across the board.
   The .meta count (when present) sits on the right baseline-aligned
   with the h2 title — they read as one line without needing an
   underline. Whitespace alone separates header from content.
   v5.8: bumped margin-bottom from var(--space-md) to var(--space-lg)
   for more breathing room between section title and content cards. */
.section-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: var(--space-lg);
}
.section-head h2 { font-size: var(--h2); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }
.section-head .meta {
  font-family: var(--ui); font-size: 0.78rem; color: var(--text-muted);
  letter-spacing: 0.1em; text-transform: uppercase;
}

/* ---------- Strand ---------- */
.strand { padding: var(--space-md) 0; border-bottom: 1px solid var(--line); }
.strand:last-child { border-bottom: none; }
.strand-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.strand-title { font-size: var(--h3); font-weight: 600; letter-spacing: -0.005em; }
.strand-ongoing {
  font-family: var(--ui); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--accent-soft); color: var(--accent);
  padding: 3px 10px; border-radius: 999px;
}
.strand-lead { color: var(--text); font-size: 1.04rem; line-height: 1.6; margin-bottom: 18px; max-width: 720px; }
.strand-list { list-style: none; padding: 0; }
.strand-list li {
  padding: 14px 0;
  border-top: 1px dashed var(--line);
  display: flex; gap: 18px; align-items: baseline;
}
.strand-list li:first-child { border-top: none; padding-top: 0; }
.strand-list li strong { font-weight: 700; color: var(--text); min-width: 0; }
.strand-list li .term {
  font-family: var(--mono); font-weight: 600;
  color: var(--accent); font-size: 0.92rem;
  min-width: 64px;
}
.strand-cta a {
  font-family: var(--ui); font-size: 0.86rem; font-weight: 500;
  color: var(--accent); text-decoration: none;
  border-bottom: 1px solid var(--accent-soft);
  padding-bottom: 1px; transition: border-color var(--transition);
}
.strand-cta a:hover { border-color: var(--accent); }

/* ---------- Manifesto ---------- */
.manifesto {
  padding: var(--space-xl) 0;
  /* v3.0.5: removed border-top/bottom; the gradient bg alone gives
     enough visual separation from adjacent sections. */
  background: linear-gradient(180deg, transparent 0%, var(--bg-elev) 50%, transparent 100%);
  text-align: center;
}
.manifesto-eyebrow {
  font-family: var(--ui); font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 26px;
}
.manifesto-quote {
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  line-height: 1.35; font-weight: 400;
  letter-spacing: -0.012em;
  max-width: 800px; margin: 0 auto;
  color: var(--text);
  font-style: italic;
  font-variation-settings: "opsz" 36;
}
.manifesto-quote em { font-style: normal; font-weight: 600; color: var(--accent); }
.manifesto-attr {
  margin-top: 28px;
  font-family: var(--ui); font-size: 0.84rem;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}
.manifesto-attr a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line); }
.manifesto-attr a:hover { border-color: var(--accent); }

/* ---------- Cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  transition: all var(--transition);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); border-color: var(--accent-soft); }
.card-eyebrow {
  font-family: var(--ui); font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 12px;
}
.card-title { font-size: 1.32rem; font-weight: 600; line-height: 1.2; margin-bottom: 10px; letter-spacing: -0.01em; }
.card-title a { color: var(--text); text-decoration: none; }
.card-title a:hover { color: var(--accent); }

/* When the whole card is itself a link (e.g. Contact cards) */
a.card { color: var(--text); text-decoration: none; display: block; }
a.card:hover { color: var(--text); }
a.card .card-title { color: var(--text); }
a.card:hover .card-title { color: var(--accent); }

/* Compact contact card value (email / handle / username) */
.contact-value {
  font-family: var(--mono);
  font-size: 1.0rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text);
  word-break: break-all;
  line-height: 1.3;
}
a.card:hover .contact-value { color: var(--accent); }
.card-desc { color: var(--text-muted); font-size: 0.97rem; line-height: 1.6; }
.card-link {
  font-family: var(--ui); font-size: 0.82rem; font-weight: 500;
  margin-top: 16px; display: inline-block;
  color: var(--accent); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}
.card:hover .card-link { border-color: var(--accent); }

/* ---------- Investment / Books ---------- */
.thesis-list { list-style: none; padding: 0; }
.thesis-list > li { padding: 28px 0; border-top: 1px solid var(--line); }
.thesis-list > li:first-child { border-top: none; }
.thesis-title { font-size: 1.18rem; font-weight: 700; color: var(--text); margin-bottom: 10px; letter-spacing: -0.005em; }
.thesis-body { color: var(--text); font-size: 1.0rem; line-height: 1.65; margin-bottom: 12px; max-width: 720px; }
.thesis-meta { font-family: var(--ui); font-size: 0.82rem; color: var(--text-muted); }
.thesis-meta strong { color: var(--text); font-weight: 600; }

.book-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.book-item {
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-elev);
  transition: all var(--transition);
}
.book-item:hover { border-color: var(--accent); transform: translateY(-2px); }
.book-num { font-family: var(--mono); font-size: 0.78rem; font-weight: 600; color: var(--accent); letter-spacing: 0.08em; }
.book-title { font-size: 1.1rem; font-weight: 700; margin: 4px 0 6px; letter-spacing: -0.005em; }
.book-desc { color: var(--text-muted); font-size: 0.92rem; line-height: 1.55; }

/* ---------- Patents page ---------- */
.patent-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  margin: var(--space-md) 0 var(--space-lg);
  padding: 22px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.patent-stat { text-align: center; }
.patent-stat .num {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700; color: var(--accent);
  line-height: 1; letter-spacing: -0.02em;
  font-variation-settings: "opsz" 60;
}
.patent-stat .label {
  font-family: var(--ui); font-size: 0.74rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted); margin-top: 8px;
}

.patent-group { margin-bottom: var(--space-lg); }
.patent-group-head {
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.patent-group-head h3 {
  font-size: 1.18rem; font-weight: 700;
  letter-spacing: -0.005em;
}
.patent-group-head .count {
  font-family: var(--mono); font-size: 0.82rem; font-weight: 600;
  background: var(--accent-soft); color: var(--accent);
  padding: 3px 10px; border-radius: 999px;
}
.patent-group-desc {
  color: var(--text-muted); font-size: 0.95rem; line-height: 1.6;
  margin-bottom: 16px; max-width: 720px;
}

.patent-list { list-style: none; padding: 0; }
.patent-list li {
  padding: 11px 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 90px 1fr 175px 50px;
  gap: 14px;
  font-size: 0.94rem;
  align-items: baseline;
}
.patent-list li:last-child { border-bottom: 1px solid var(--line); }
.patent-list li:hover { background: var(--bg-elev); }
.patent-type {
  font-family: var(--ui); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
}
.patent-type.type-utility { color: var(--accent); }
.patent-type.type-design { color: #8B7E6E; }
.patent-type.type-invention { color: #8B2635; }
body.dark .patent-type.type-design { color: #B5A78F; }
body.dark .patent-type.type-invention { color: #D88B95; }
.patent-title { color: var(--text); line-height: 1.45; }
.patent-no {
  font-family: var(--mono); font-size: 0.76rem;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}
.patent-year {
  font-family: var(--mono); font-size: 0.78rem;
  color: var(--text-muted);
  text-align: right;
}

@media (max-width: 720px) {
  .patent-list li {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .patent-list .patent-no { font-size: 0.72rem; }
  .patent-list .patent-year { text-align: left; }
}

/* ---------- Articles ---------- */
.articles-cluster { margin-top: var(--space-md); }
.articles-cluster h3 {
  font-size: 1rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-family: var(--ui);
}
.articles-cluster:first-of-type h3 { border-top: none; padding-top: 0; }
.articles-list { list-style: none; padding: 0; }
.articles-list li {
  padding: 10px 0;
  display: flex; gap: 14px; align-items: baseline;
  border-bottom: 1px dotted var(--line);
}
.articles-list li:last-child { border-bottom: none; }
.articles-list a {
  color: var(--text); text-decoration: none;
  font-size: 1.0rem;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), color var(--transition);
  flex: 1;
}
.articles-list a:hover { border-color: var(--accent); color: var(--accent); }
.articles-list .year {
  font-family: var(--mono); font-size: 0.78rem; color: var(--text-muted);
  flex-shrink: 0;
}

.featured-article {
  display: block;
  padding: 28px 30px;
  background: var(--bg-elev);
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  margin-bottom: var(--space-md);
  text-decoration: none; color: var(--text);
  transition: all var(--transition);
}
.featured-article:hover { transform: translateY(-1px); border-color: var(--accent); }
.featured-eyebrow {
  font-family: var(--ui); font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 8px;
}
.featured-title { font-size: 1.4rem; font-weight: 600; line-height: 1.25; margin-bottom: 8px; letter-spacing: -0.01em; }
.featured-desc { color: var(--text-muted); font-size: 0.98rem; line-height: 1.55; max-width: 640px; }
.featured-meta { margin-top: 12px; font-family: var(--ui); font-size: 0.82rem; color: var(--text-muted); }
.featured-meta strong { color: var(--accent); }

/* ---------- Tags ---------- */
.tags { display: flex; flex-wrap: wrap; gap: 10px; }
.tag {
  font-family: var(--ui); font-size: 0.86rem; font-weight: 500;
  padding: 7px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text); transition: all var(--transition);
}
.tag:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Footer ---------- */
.site-footer {
  padding: var(--space-lg) 0 var(--space-md);
  border-top: 1px solid var(--line);
  margin-top: var(--space-lg);
  text-align: center;
  font-family: var(--ui); font-size: 0.82rem; color: var(--text-muted);
}
.site-footer .colophon { margin-bottom: 8px; }
.site-footer .credit { opacity: 0.6; font-size: 0.76rem; }
.site-footer a { color: var(--text-muted); text-decoration: underline; text-decoration-color: var(--line); }
.site-footer a:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* ---------- Theory page specifics ---------- */
.theory-hero {
  padding: var(--space-xl) 0 var(--space-lg);
  border-bottom: 1px solid var(--line);
}
.theory-hero .eyebrow {
  font-family: var(--ui); font-size: 0.84rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 20px;
}
.theory-hero h1 {
  font-size: clamp(2.4rem, 4.5vw, 3.4rem); font-weight: 700;
  line-height: 1.05; letter-spacing: -0.025em; margin-bottom: 16px;
}
.theory-hero .acronym { color: var(--accent); font-style: italic; font-weight: 400; }
.theory-hero .tagline { font-size: 1.3rem; line-height: 1.5; color: var(--text); max-width: 720px; font-style: italic; font-weight: 380; }

.formula-block {
  font-family: var(--mono); font-size: 1.08rem;
  background: var(--bg-elev);
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  padding: 22px 28px;
  border-radius: var(--radius);
  margin: var(--space-md) 0;
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
}
.formula-block .label {
  font-family: var(--ui); font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-muted);
}
.formula-block code { font-weight: 600; color: var(--accent); font-size: 1.16rem; }

.theory-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin: var(--space-md) 0; }
.pillar {
  padding: 22px 24px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.pillar-num { font-family: var(--mono); font-size: 0.82rem; font-weight: 600; color: var(--accent); letter-spacing: 0.1em; }
.pillar-title { font-size: 1.06rem; font-weight: 700; margin: 4px 0 8px; }
.pillar-desc { color: var(--text-muted); font-size: 0.92rem; line-height: 1.55; }

.prose { max-width: 760px; }
.prose p { margin-bottom: 18px; font-size: 1.06rem; line-height: 1.72; }
.prose p strong { color: var(--accent); font-weight: 700; }
.prose h3 { font-size: 1.18rem; font-weight: 700; margin-top: 38px; margin-bottom: 12px; letter-spacing: -0.005em; }
.prose ul { margin: 16px 0 24px 22px; }
.prose ul li { margin-bottom: 10px; line-height: 1.65; }
.prose blockquote {
  margin: 24px 0; padding: 16px 22px;
  background: var(--bg-elev); border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  font-style: italic; font-size: 1.04rem; line-height: 1.6;
}
.prose blockquote em { font-style: normal; font-weight: 700; color: var(--accent); }

.related-docs { margin-top: var(--space-md); }
.related-docs h3 {
  font-size: 0.94rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 14px; font-family: var(--ui);
}

/* ---------- Library ---------- */
.library-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.library-cluster {
  padding: 28px 26px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.library-cluster h3 { font-size: 1.16rem; font-weight: 700; margin-bottom: 6px; letter-spacing: -0.005em; }
.library-cluster .pillar-tag {
  font-family: var(--mono); font-size: 0.74rem; color: var(--accent);
  margin-bottom: 14px; letter-spacing: 0.06em;
}
.library-cluster ul { list-style: none; padding: 0; }
.library-cluster li {
  font-size: 0.92rem; padding: 7px 0;
  color: var(--text);
  border-bottom: 1px dotted var(--line);
  line-height: 1.5;
}
.library-cluster li:last-child { border-bottom: none; }
.library-cluster li strong { color: var(--text); font-weight: 700; }
.library-cluster li .sub { color: var(--text-muted); font-size: 0.84rem; display: block; margin-top: 2px; }

/* ---------- Subscribe (v7.0) ---------- */
.subscribe-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  max-width: 720px;
  margin: 0 auto;
}
.subscribe-eyebrow {
  font-family: var(--mono); font-size: 0.78rem;
  letter-spacing: 0.08em; color: var(--accent);
  text-transform: uppercase; margin-bottom: 12px;
}
.subscribe-title {
  font-size: clamp(1.4rem, 2.4vw, 1.7rem);
  font-weight: 600; line-height: 1.25;
  letter-spacing: -0.01em; margin-bottom: 14px;
  color: var(--text);
}
.subscribe-lead {
  font-size: 1.0rem; line-height: 1.6;
  color: var(--text); margin-bottom: 22px;
  max-width: 560px;
}
.subscribe-form {
  display: flex; gap: 10px; flex-wrap: wrap;
  align-items: stretch;
}
.subscribe-input {
  flex: 1 1 240px;
  min-width: 0;
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 0.92rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--transition);
}
.subscribe-input:focus {
  outline: none;
  border-color: var(--accent);
}
.subscribe-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important; height: 1px !important;
  opacity: 0 !important;
}
.subscribe-button {
  padding: 12px 22px;
  font-family: var(--mono);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  cursor: pointer;
  transition: opacity var(--transition);
}
.subscribe-button:hover { opacity: 0.88; }
.subscribe-button:disabled { opacity: 0.6; cursor: wait; }
.subscribe-status {
  margin-top: 14px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-muted);
  min-height: 1.2em;
}
.subscribe-status.is-success { color: var(--accent); }
.subscribe-status.is-error { color: #B85C3C; }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  html { font-size: 17px; }
  section { padding: 72px 0 48px; }   /* v6.1: halved (was 144/96) — felt too airy */
  /* v6.0: same fix — re-apply vertical padding on section.container on mobile */
  section.container, section.container-wide { padding-top: 72px; padding-bottom: 48px; }
  .triangle-section { padding: var(--space-xl) 0 var(--space-lg); }
  .hero { padding-top: var(--space-lg); }
  .hero-meta { gap: 12px; font-size: 0.78rem; }
  .formula-block { padding: 18px; }
  .strand-list li { flex-direction: column; gap: 6px; }
  .strand-list li .term { min-width: 0; }
  /* Contact: keep 4-in-a-row even on narrow screens (boss feedback) */
  .contact-cards { grid-template-columns: repeat(4, 1fr) !important; gap: 10px; }
  .contact-cards .card { padding: 14px 10px; }
  .contact-cards .card-eyebrow { font-size: 0.66rem; margin-bottom: 6px; }
  .contact-cards .contact-value { font-size: 0.78rem; word-break: break-all; }
}

/* ---------- Reveal-on-scroll (safe fallback: visible by default) ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js [data-reveal].in { opacity: 1; transform: translateY(0); }

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

/* ============================================================
   v3.1 — Library chapter pages (.doc-page) and catalog (.lib-*)
   ============================================================ */

/* ---------- Chapter page (each converted .docx) ---------- */
body.doc-page { background: var(--bg); color: var(--text); }

.doc-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 24px;
  padding: 14px 24px;
  background: rgba(240, 238, 230, 0.92);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
  font-family: var(--ui); font-size: 0.88rem;
}
body.dark .doc-nav, html[data-theme="dark"] .doc-nav {
  background: rgba(31, 30, 29, 0.92);
}
.doc-nav .brand { color: var(--text); text-decoration: none; font-weight: 600; }
.doc-nav .lib   { color: var(--text-muted); text-decoration: none; }
.doc-nav a:hover { color: var(--accent); }

article.doc {
  max-width: 720px;
  margin: 0 auto;
  padding: 64px 28px 96px;
}
.doc-header { margin-bottom: 48px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.doc-cat {
  font-family: var(--mono); font-size: 0.74rem;
  color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: 12px;
}
.doc-header h1 {
  font-family: var(--serif); font-size: clamp(1.7rem, 3.2vw, 2.2rem);
  font-weight: 700; letter-spacing: -0.01em; line-height: 1.25;
  margin: 0 0 12px;
}
.doc-meta { font-family: var(--ui); font-size: 0.82rem; color: var(--text-muted); }

.doc-body {
  font-family: var(--serif);
  font-size: 1.06rem; line-height: 1.78;
  color: var(--text);
}
.doc-body p { margin: 0.9em 0; }
.doc-body h1, .doc-body h2, .doc-body h3, .doc-body h4 {
  font-family: var(--serif); font-weight: 700;
  letter-spacing: -0.005em; line-height: 1.3;
  margin: 1.8em 0 0.65em;
}
.doc-body h1 { font-size: 1.5rem;  padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.doc-body h2 { font-size: 1.28rem; }
.doc-body h3 { font-size: 1.12rem; color: var(--accent); }
.doc-body h4 { font-size: 1rem; }
.doc-body strong { font-weight: 700; color: var(--text); }
.doc-body em { font-style: italic; color: var(--text-muted); }
.doc-body ul, .doc-body ol { margin: 0.8em 0 1em 1.6em; }
.doc-body li { margin-bottom: 0.4em; line-height: 1.7; }
.doc-body blockquote {
  border-left: 3px solid var(--accent);
  margin: 1.2em 0; padding: 0.5em 1.4em;
  color: var(--text-muted); background: var(--bg-elev);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.doc-body code {
  font-family: var(--mono); font-size: 0.92em;
  background: var(--bg-elev); padding: 2px 6px; border-radius: 4px;
}
.doc-body pre {
  font-family: var(--mono); font-size: 0.9rem;
  background: var(--bg-elev); padding: 16px;
  border-radius: var(--radius); overflow-x: auto;
  margin: 1em 0;
}
.doc-body table { border-collapse: collapse; margin: 1em 0; width: 100%; font-size: 0.96rem; }
.doc-body td, .doc-body th { border: 1px solid var(--line); padding: 8px 12px; vertical-align: top; }
.doc-body th { background: var(--bg-elev); font-weight: 600; text-align: left; }
.doc-body img { max-width: 100%; height: auto; border-radius: var(--radius); margin: 1em 0; }
.doc-body a {
  color: var(--accent); text-decoration: none;
  border-bottom: 1px solid var(--accent-soft);
}
.doc-body a:hover { background: var(--accent-soft); }
.doc-body hr { border: none; border-top: 1px solid var(--line); margin: 2em 0; }

.doc-footer {
  margin-top: 64px; padding-top: 24px;
  border-top: 1px solid var(--line);
  font-family: var(--ui); font-size: 0.9rem;
}
.doc-footer a { color: var(--text-muted); text-decoration: none; }
.doc-footer a:hover { color: var(--accent); }

/* ---------- Library catalog (/library/) ---------- */
.lib-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.lib-chip {
  display: inline-block;
  padding: 6px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--mono); font-size: 0.78rem;
  color: var(--text); text-decoration: none;
  transition: var(--transition);
}
.lib-chip:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }

.lib-section { padding-top: var(--space-md); }

.lib-group {
  margin: 14px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-elev);
  overflow: hidden;
}
.lib-group > summary {
  cursor: pointer;
  padding: 14px 18px;
  font-family: var(--ui); font-size: 0.95rem; font-weight: 600;
  display: flex; align-items: center; gap: 10px;
  list-style: none;
  user-select: none;
}
.lib-group > summary::-webkit-details-marker { display: none; }
.lib-group > summary::before {
  content: "▸"; transition: transform 0.2s ease;
  display: inline-block; color: var(--text-muted);
}
.lib-group[open] > summary::before { transform: rotate(90deg); }
.lib-group-name { flex: 1; }
.lib-group-count {
  font-family: var(--mono); font-size: 0.74rem;
  color: var(--text-muted);
  background: var(--bg);
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--line);
}

.lib-list {
  list-style: none; padding: 0; margin: 0;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.lib-list li {
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
  transition: background 0.12s ease;
}
.lib-list li:last-child { border-bottom: none; }
.lib-list li:hover { background: var(--bg-elev); }
.lib-list li a {
  color: var(--text); text-decoration: none;
  flex: 1; font-size: 0.96rem; line-height: 1.4;
}
.lib-list li a:hover { color: var(--accent); }
.lib-list .lib-size {
  font-family: var(--mono); font-size: 0.74rem;
  color: var(--text-muted); white-space: nowrap;
}

#lib-search {
  font-family: var(--ui);
}
#lib-search:focus { border-color: var(--accent); }

/* ---------- Book page enhancements ---------- */
.book-list .book-item a:hover .book-title { color: var(--accent); }
.book-list .book-item { transition: var(--transition); }
.book-list .book-item:hover { transform: translateY(-2px); }

@media (max-width: 720px) {
  article.doc { padding: 32px 18px 64px; }
  .lib-list li { flex-direction: column; align-items: flex-start; gap: 4px; }
  .doc-nav { gap: 14px; padding: 12px 18px; font-size: 0.82rem; }
}