:root {
  color-scheme: dark;
  --bg: #080908;
  --panel: rgba(17, 18, 16, 0.82);
  --panel-2: rgba(27, 28, 24, 0.86);
  --line: rgba(255, 255, 255, 0.14);
  --line-strong: rgba(255, 255, 255, 0.28);
  --text: #f4f1e8;
  --muted: #b8b3a6;
  --soft: #868074;
  --ink: #0d0e0d;
  --accent: #e6c66d;
  --cyan: #8cd6e8;
  --green: #91d38c;
  --red: #ee8c80;
  --violet: #c8a6ef;
  --max: 1220px;
  --radius: 6px;
  --shadow: 0 26px 90px rgba(0, 0, 0, 0.42);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

a {
  color: inherit;
  text-decoration-color: rgba(230, 198, 109, 0.55);
  text-underline-offset: 3px;
}

button, input { font: inherit; }

.bg-art {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(8, 9, 8, 0.96), rgba(8, 9, 8, 0.86) 42%, rgba(8, 9, 8, 0.94)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.72)),
    url("../assets/sketch_3.png") center / cover no-repeat;
  filter: saturate(0.86) contrast(1.08);
}

.bg-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(90deg, black, transparent 82%);
}

/* Topbar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  min-height: 76px;
  padding: 14px 28px;
  border-bottom: 1px solid var(--line);
  background: rgba(8, 9, 8, 0.82);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.brand strong, .brand small { display: block; }
.brand strong { text-transform: uppercase; font-size: 15px; }
.brand small { color: var(--muted); font-size: 12px; }

.top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.top-actions a {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  padding: 8px 12px;
  text-decoration: none;
  font-size: 13px;
}

.top-actions a:hover,
.top-actions a.is-current {
  border-color: rgba(230, 198, 109, 0.58);
  background: rgba(230, 198, 109, 0.12);
}

/* Side nav (chapter index) */
.side-nav {
  position: fixed;
  top: 106px;
  left: 24px;
  width: 210px;
  display: grid;
  gap: 4px;
  z-index: 10;
}

.side-nav-title {
  padding: 2px 10px 6px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.side-nav a {
  display: block;
  padding: 8px 10px;
  border-left: 2px solid transparent;
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
  border-radius: 0 var(--radius) var(--radius) 0;
}

.side-nav a small {
  display: block;
  color: var(--soft);
  font-size: 11px;
  margin-top: 2px;
}

.side-nav a.is-active,
.side-nav a:hover {
  color: var(--text);
  border-left-color: var(--accent);
  background: rgba(255, 255, 255, 0.045);
}

.side-nav a.is-current {
  color: var(--text);
  border-left-color: var(--accent);
  background: rgba(230, 198, 109, 0.10);
}

/* Main column
   The fixed .side-nav occupies x:24..234 (left:24 + width:210). main used to
   be centered with `margin:0 auto` after shrinking its width by 300px — but
   auto-centering splits that reserved space evenly on BOTH sides instead of
   putting it all on the left where the sidebar actually is. On viewports
   where half of that gap (150px) is less than the sidebar's right edge + a
   gutter (234 + 24 = 258px), main's left edge lands under the sidebar and
   wrapped hero/section paragraphs render on top of the nav labels (e.g.
   1440px viewport → 150px < 258px → ~84px overlap). Fixed by clamping the
   left margin to never go below the sidebar footprint, while still
   centering normally (unchanged) once the viewport is wide enough that
   centering alone already clears it. */
main {
  --content-w: min(var(--max), calc(100% - 300px));
  width: var(--content-w);
  margin: 0 auto;
  margin-left: max(258px, calc((100% - var(--content-w)) / 2));
  padding: 48px 0 96px;
}

.hero, .section {
  scroll-margin-top: 96px;
  margin-bottom: 46px;
}

.hero {
  min-height: calc(100vh - 110px);
  display: grid;
  align-content: center;
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--accent);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.08em;
  font-weight: 800;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.14; letter-spacing: 0; }

h1 { font-size: 60px; max-width: 900px; }
h2 { font-size: 32px; }
h3 { font-size: 20px; }
h4 { font-size: 15px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }

p { margin: 12px 0 0; }

ul, ol { margin: 12px 0 0; padding-left: 34px; }
li + li { margin-top: 6px; }

.hero-lead {
  max-width: 980px;
  color: #e6e0d4;
  font-size: 20px;
}

.hero-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.hero-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 11px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hero-meta span code {
  margin: 0 0.32em;
}

.hero-meta span.dot::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  margin-right: 7px;
}

/* Chapter grid on the landing */
.chapter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.chapter-grid a {
  display: block;
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: border-color 120ms ease, transform 120ms ease;
}

.chapter-grid a:hover {
  border-color: rgba(230, 198, 109, 0.55);
  transform: translateY(-2px);
}

.chapter-grid a .n {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink);
  font-weight: 900;
  font-size: 14px;
  margin-bottom: 10px;
}

.chapter-grid a h3 { color: var(--text); }
.chapter-grid a p { color: var(--muted); font-size: 14px; }
.chapter-grid a .go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Section head */
.section {
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.section-head {
  max-width: 840px;
  margin-bottom: 24px;
}

.section-head > p:last-child {
  color: var(--muted);
  font-size: 17px;
}

/* Cards & grids reused across chapters */
.cards, .split-grid, .split-3, .split-4, .lane-grid, .stat-grid {
  display: grid;
  gap: 14px;
}

.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split-grid { grid-template-columns: minmax(0, 1fr) minmax(320px, 0.6fr); }
.split-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.split-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lane-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.cards article,
.split-3 article,
.split-4 article,
.lane-grid article,
.stat-grid article,
.memo-box,
.decision-box {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 18px;
}

.cards article h3 { margin-bottom: 6px; }
.cards article p { color: var(--muted); }

.stat-grid article {
  display: grid;
  gap: 6px;
}

.stat-grid strong {
  display: block;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1;
  color: var(--text);
}

.stat-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stat-grid p { color: var(--muted); font-size: 13px; margin: 0; }

/* Tag pills */
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 999px;
  padding: 3px 9px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tag.cyan { color: var(--cyan); border-color: rgba(140, 214, 232, 0.46); }
.tag.green { color: var(--green); border-color: rgba(145, 211, 140, 0.46); }
.tag.red { color: var(--red); border-color: rgba(238, 140, 128, 0.46); }
.tag.violet { color: var(--violet); border-color: rgba(200, 166, 239, 0.46); }
.tag.gold { color: var(--accent); border-color: rgba(230, 198, 109, 0.55); }

/* Callout / memo boxes */
.callout {
  border-left: 3px solid var(--accent);
  padding: 14px 18px;
  background: rgba(230, 198, 109, 0.09);
  color: #f6edcf;
  margin-top: 18px;
  border-radius: 0 var(--radius) var(--radius) 0;
}

.callout.cyan { border-color: var(--cyan); background: rgba(140, 214, 232, 0.08); color: #dff2f7; }
.callout.red { border-color: var(--red); background: rgba(238, 140, 128, 0.08); color: #fddad4; }

.memo-box { padding: 22px; margin-top: 18px; }

/* Code / mono */
code {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}

p code, li code, td code, .memo-box code {
  display: inline;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.32);
  color: #dfeeff;
}

td code, th code {
  overflow-wrap: anywhere;
  word-break: break-word;
}

pre {
  margin: 16px 0 0;
  padding: 16px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.42);
  color: #dfeeff;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.55;
}

pre code {
  display: block;
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
}

/* Table */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(8, 9, 8, 0.68);
  margin-top: 18px;
}

table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

th, td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  text-align: left;
  overflow-wrap: anywhere;
  word-break: break-word;
}

th {
  color: var(--accent);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

td { color: #ded8cb; }
tr:last-child td { border-bottom: 0; }

/* Flow diagrams (ascii-ish boxes rendered with CSS grid) */
.flow-diagram {
  display: grid;
  gap: 10px;
  margin-top: 20px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.24);
}

.flow-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  align-items: stretch;
}

.flow-box {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
}

.flow-box.primary {
  border-color: rgba(230, 198, 109, 0.55);
  background: rgba(230, 198, 109, 0.10);
}

.flow-box.cyan {
  border-color: rgba(140, 214, 232, 0.5);
  background: rgba(19, 37, 42, 0.68);
}

.flow-box.violet {
  border-color: rgba(200, 166, 239, 0.42);
  background: rgba(45, 34, 61, 0.6);
}

.flow-box h4 {
  color: var(--accent);
  margin-bottom: 6px;
}

.flow-box p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.flow-arrow {
  text-align: center;
  color: var(--soft);
  font-family: "JetBrains Mono", monospace;
  font-size: 18px;
  padding: 4px 0;
}

/* Pager between chapters */
.pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 60px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.pager a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  text-decoration: none;
  max-width: 46%;
}

.pager a:hover {
  border-color: rgba(230, 198, 109, 0.55);
}

.pager a.prev { text-align: left; }
.pager a.next { text-align: right; margin-left: auto; }

.pager a small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pager a strong { font-size: 15px; }

/* Responsive */
@media (max-width: 1080px) {
  .side-nav { position: static; width: auto; padding: 20px 24px 0; }
  main { width: min(var(--max), 100%); margin-left: auto; padding: 24px 24px 96px; }
  .chapter-grid, .split-3, .split-4, .lane-grid, .stat-grid, .cards {
    grid-template-columns: 1fr 1fr;
  }
  .split-grid { grid-template-columns: 1fr; }
  h1 { font-size: 42px; }
  h2 { font-size: 26px; }
}

@media (max-width: 640px) {
  .chapter-grid, .split-3, .split-4, .lane-grid, .stat-grid, .cards {
    grid-template-columns: 1fr;
  }
  .topbar { flex-direction: column; align-items: flex-start; padding: 12px 16px; }
  .top-actions { justify-content: flex-start; }
  h1 { font-size: 34px; }
}

/* Overview prose density — 2026-07-11 (CEO). The .split-grid columns stack
   <h3>+<p> blocks; global h3 margin is 0, so each heading jammed against the
   paragraph above it. Give the heading blocks vertical breathing room. */
.split-grid h3 { margin-top: 30px; }
.split-grid > div > h3:first-child { margin-top: 0; }
.split-grid h3 + p { margin-top: 10px; }

/* Overview: the product gallery butts against the hero intro — no divider bar */
#product { border-top: none; padding-top: 0; }

/* Overview hero: matches the section-lead reference in colour AND size (no keyword highlights) */
.hero-compact .hero-lead { color: var(--muted); font-size: 17px; }