:root {
  --paper: #f4f1ea;
  --paper-deep: #e8e2d6;
  --ink: #19201e;
  --muted: #65706c;
  --line: #c9c5bb;
  --green: #0e5c48;
  --green-light: #d8e7df;
  --coral: #c9523a;
  --coral-light: #f3dcd5;
  --gold: #b07a19;
  --blue: #315f7d;
  --white: #fffdf8;
  --mono: "IBM Plex Mono", monospace;
  --sans: "IBM Plex Sans", sans-serif;
  --serif: "Newsreader", Georgia, serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.7; }
a { color: var(--green); text-underline-offset: 3px; }
a:hover { color: var(--coral); }
code, pre { font-family: var(--mono); }

.book-bar { position: sticky; z-index: 20; top: 0; min-height: 64px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 8px 28px; border-bottom: 1px solid var(--line); background: rgba(244, 241, 234, .94); backdrop-filter: blur(12px); }
.book-bar__author { display: flex; align-items: center; gap: 10px; width: max-content; color: var(--ink); text-decoration: none; line-height: 1.1; }
.book-bar__author img { border-radius: 50%; object-fit: cover; filter: grayscale(18%); }
.book-bar__author span { display: grid; gap: 3px; }
.book-bar__author strong { font: 600 14px var(--sans); }
.book-bar__author small { color: var(--muted); font: 11px var(--sans); }
.book-bar__label { color: var(--muted); font: 500 11px var(--mono); letter-spacing: 0; text-transform: uppercase; }
.book-bar__back { justify-self: end; font-size: 13px; font-weight: 600; text-decoration: none; }
.reading-progress { position: fixed; z-index: 30; top: 63px; left: 0; width: 100%; height: 2px; }
.reading-progress span { display: block; width: 0; height: 100%; background: var(--coral); }

.book-layout { display: grid; grid-template-columns: minmax(180px, 250px) minmax(0, 860px); gap: clamp(32px, 6vw, 96px); justify-content: center; padding: 0 40px 100px; }
.contents { position: sticky; top: 102px; align-self: start; max-height: calc(100vh - 126px); overflow: auto; margin-top: 74px; padding: 22px 0 22px 20px; border-left: 1px solid var(--line); }
.contents__title { margin: 0 0 15px; color: var(--muted); font: 500 11px var(--mono); text-transform: uppercase; }
.contents ol { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.contents li { counter-increment: toc; }
.contents a { display: grid; grid-template-columns: 25px 1fr; padding: 5px 8px; border-left: 2px solid transparent; color: var(--muted); font-size: 13px; line-height: 1.35; text-decoration: none; }
.contents a::before { content: "0" counter(toc); color: #979b95; font: 11px var(--mono); }
.contents a:hover, .contents a[aria-current="true"] { border-color: var(--coral); color: var(--ink); background: rgba(255, 253, 248, .55); }
.contents__status { display: flex; align-items: center; gap: 8px; margin-top: 24px; color: var(--muted); font-size: 11px; }
.contents__status span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }

.book { min-width: 0; }
.hero { padding: clamp(80px, 12vw, 150px) 0 82px; }
.eyebrow, .chapter__number { margin: 0 0 16px; color: var(--coral); font: 500 12px var(--mono); text-transform: uppercase; }
h1, h2, h3 { font-family: var(--serif); letter-spacing: 0; }
h1 { max-width: 760px; margin: 0; font-size: clamp(64px, 9vw, 112px); line-height: .82; font-weight: 700; }
.hero__subtitle { margin: 22px 0 34px; color: var(--green); font: 600 clamp(27px, 4vw, 44px)/1.05 var(--serif); }
.hero__lede { max-width: 750px; margin: 0; font: 500 clamp(20px, 2.4vw, 27px)/1.48 var(--serif); }
.hero__meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 34px; color: var(--muted); font: 12px var(--mono); }
.hero__meta span + span::before { content: "·"; margin-right: 24px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.button { display: inline-flex; align-items: center; min-height: 42px; padding: 8px 16px; border: 1px solid var(--ink); color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none; }
.button:hover { border-color: var(--coral); color: var(--coral); }
.button--primary { border-color: var(--green); background: var(--green); color: white; }
.button--primary:hover { background: var(--coral); color: white; }

.premise { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 110px; padding: 32px 0; border-top: 4px solid var(--ink); border-bottom: 1px solid var(--ink); }
.premise p { margin: 0; font: 600 29px/1.2 var(--serif); }
.premise span { color: var(--muted); font-size: 15px; line-height: 1.55; }
.chapter { padding: 100px 0 20px; border-top: 1px solid var(--line); }
.chapter__number { margin-bottom: 8px; }
h2 { max-width: 760px; margin: 0 0 24px; font-size: clamp(42px, 6vw, 68px); line-height: .98; }
h3 { margin: 54px 0 14px; font-size: 28px; line-height: 1.15; }
.chapter__intro { max-width: 720px; margin: 0 0 40px; color: #3f4946; font: 500 23px/1.45 var(--serif); }
p { max-width: 720px; }
blockquote { margin: 52px 0; padding: 18px 0 18px 32px; border-left: 4px solid var(--coral); color: var(--green); font: 600 30px/1.25 var(--serif); }
pre { max-width: 100%; overflow-x: auto; margin: 32px 0; padding: 24px; border-left: 3px solid var(--green); background: #202825; color: #edf1e9; font-size: 13px; line-height: 1.65; tab-size: 2; }
:not(pre) > code { padding: 2px 5px; background: var(--paper-deep); color: #30413c; font-size: .82em; }

.diagram { margin: 48px 0; border: 1px solid var(--line); background-color: var(--white); background-image: linear-gradient(rgba(25,32,30,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(25,32,30,.035) 1px, transparent 1px); background-size: 20px 20px; }
.timeline-diagram { position: relative; display: grid; gap: 24px; padding: 34px 30px 30px 80px; }
.timeline-diagram__label { position: absolute; top: 15px; right: 18px; color: var(--muted); font: 10px var(--mono); text-transform: uppercase; }
.timeline-diagram__axis { position: absolute; top: 0; bottom: 0; left: 50px; border-left: 1px dashed var(--muted); }
.transaction { display: grid; grid-template-columns: 125px repeat(3, 1fr); align-items: center; gap: 10px; }
.transaction strong { font: 600 12px var(--mono); }
.event { padding: 9px 8px; border: 1px solid; background: var(--white); font: 11px/1.3 var(--mono); text-align: center; }
.event--read { border-color: var(--blue); color: var(--blue); }
.event--decide { border-color: var(--gold); color: #74500f; }
.event--write { border-color: var(--coral); color: var(--coral); }

.concept-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 44px 0; background: var(--line); border: 1px solid var(--line); }
.concept-grid div { padding: 24px; background: var(--white); }
.concept-grid span { display: block; color: var(--coral); font: 10px var(--mono); text-transform: uppercase; }
.concept-grid strong { display: block; margin: 7px 0 5px; font: 600 21px var(--serif); }
.concept-grid p { margin: 0; color: var(--muted); font-size: 13px; }
.note { margin: 40px 0; padding: 24px 28px; border: 1px solid #93b1a4; background: var(--green-light); }
.note strong { font: 600 17px var(--serif); }
.note p { margin: 5px 0 0; font-size: 14px; }
.note--warning { border-color: #d39b8c; background: var(--coral-light); }

.anomaly-table, .product-matrix { display: grid; margin: 42px 0; border-top: 3px solid var(--ink); font-size: 13px; line-height: 1.45; }
.anomaly-table > div { display: grid; grid-template-columns: 140px 1.4fr 1fr; gap: 24px; padding: 15px 10px; border-bottom: 1px solid var(--line); }
.anomaly-table__head, .product-matrix__head { color: var(--muted); font: 10px var(--mono); text-transform: uppercase; }
.anomaly-table strong { color: var(--green); }

.level-map { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 42px 0; background: var(--line); border: 1px solid var(--line); }
.level-map article { position: relative; min-height: 185px; padding: 25px; background: var(--white); }
.level-map__index { position: absolute; top: 15px; right: 16px; color: #aaa9a1; font: 11px var(--mono); }
.level-map h3 { margin: 30px 0 8px; font-size: 24px; }
.level-map p { margin: 0; color: var(--muted); font-size: 13px; }
.level-map__active { box-shadow: inset 4px 0 var(--gold); }
.level-map__strong { box-shadow: inset 4px 0 var(--green); }
.snapshot-diagram { padding: 30px; }
.snapshot-row { display: grid; grid-template-columns: 180px repeat(3, 1fr); align-items: center; gap: 10px; margin: 15px 0; }
.snapshot-row strong { font: 12px var(--mono); }
.snapshot-row small { grid-column: 2 / -1; color: var(--muted); font-size: 11px; }
.snapshot { padding: 10px; border: 1px solid var(--blue); background: #e4edf1; color: var(--blue); font: 11px var(--mono); text-align: center; }
.snapshot--wide { grid-column: 2 / -1; border-color: var(--green); background: var(--green-light); color: var(--green); }

.version-chain { padding: 44px 28px 30px; }
.version-chain__versions { display: flex; align-items: center; justify-content: center; gap: 15px; }
.version-chain__versions i { color: var(--muted); font-style: normal; }
.version { position: relative; min-width: 150px; padding: 16px; border: 1px solid var(--line); background: var(--paper); font: 12px var(--mono); text-align: center; }
.version small { display: block; color: var(--muted); }
.version--old { border-color: var(--blue); }
.version--new { border-color: var(--coral); }
.version-chain__views { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 25px; color: var(--muted); font-size: 11px; text-align: center; }
.check-list { display: grid; gap: 12px; max-width: 720px; padding: 0; list-style: none; }
.check-list li { position: relative; padding-left: 30px; }
.check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-family: var(--mono); }

.chapter--feature { margin-top: 80px; padding: 100px 40px 50px; border: 0; background: #e8e5dc; box-shadow: 0 0 0 100vmax #e8e5dc; clip-path: inset(0 -100vmax); }
.doctors-diagram { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: stretch; padding: 0; }
.doctor-path, .doctor-invariant { display: grid; align-content: center; gap: 12px; min-height: 230px; padding: 24px; text-align: center; }
.doctor-path strong { font: 600 12px var(--mono); }
.doctor-path span { padding: 8px; border: 1px solid var(--line); background: var(--white); font-size: 12px; }
.doctor-path .commit { border-color: var(--coral); color: var(--coral); font-family: var(--mono); }
.doctor-invariant { background: var(--ink); color: white; }
.doctor-invariant span, .doctor-invariant small { color: #bbc3c0; font: 10px/1.5 var(--mono); }
.doctor-invariant strong { font: 600 24px var(--serif); }
.strategies { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; padding: 1px; background: var(--line); list-style: none; counter-reset: strategies; }
.strategies li { position: relative; padding: 28px; background: var(--white); counter-increment: strategies; }
.strategies li::before { content: "0" counter(strategies); display: block; margin-bottom: 24px; color: var(--coral); font: 11px var(--mono); }
.strategies strong, .strategies span { display: block; }
.strategies strong { font: 600 20px var(--serif); }
.strategies span { margin-top: 5px; color: var(--muted); font-size: 13px; }

.product-matrix > div { display: grid; grid-template-columns: 120px 130px 170px 1fr; gap: 18px; padding: 16px 10px; border-bottom: 1px solid var(--line); }
.product-matrix strong { font-family: var(--serif); font-size: 17px; }
.pattern-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 45px; }
.pattern-list article { min-width: 0; padding: 25px; border: 1px solid var(--line); background: var(--white); }
.pattern-list article > span { color: var(--coral); font: 10px var(--mono); text-transform: uppercase; }
.pattern-list h3 { margin: 15px 0 10px; font-size: 23px; }
.pattern-list p { color: var(--muted); font-size: 13px; }
.pattern-list pre { margin: 22px 0 0; padding: 17px; font-size: 11px; }
.retry-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 40px 0; padding: 25px; border: 1px solid var(--line); background: var(--white); font: 11px var(--mono); }
.retry-flow span { padding: 8px; border: 1px solid var(--green); color: var(--green); }
.retry-flow i { color: var(--muted); font-style: normal; }
.retry-flow b { width: 100%; margin-top: 12px; color: var(--coral); font-weight: 500; }
.retry-flow em { color: var(--coral); font-style: normal; }

.decision-tree { display: grid; gap: 0; margin: 40px 0; border-top: 3px solid var(--ink); }
.decision-tree__question { display: grid; grid-template-columns: 38px 1fr 210px; align-items: center; gap: 20px; padding: 18px 6px; border-bottom: 1px solid var(--line); }
.decision-tree__question > span { color: var(--coral); font: 12px var(--mono); }
.decision-tree__question p { margin: 0; font-size: 14px; }
.decision-tree__question strong { color: var(--green); font-size: 13px; }
.summary-box { margin: 60px 0 10px; padding: 10px 34px 28px; border: 1px solid var(--green); background: var(--green); color: white; }
.summary-box h3 { margin-top: 25px; }
.summary-box ol { display: grid; gap: 8px; padding-left: 22px; }

.featured-resource { margin: 40px 0 60px; padding: 30px; border-top: 4px solid var(--coral); background: var(--ink); color: white; }
.featured-resource > span { color: #bdc7c3; font: 10px var(--mono); text-transform: uppercase; }
.featured-resource h3 { max-width: 650px; margin: 16px 0; font-size: 34px; }
.featured-resource p { color: #bdc7c3; font-size: 14px; }
.featured-resource a { color: #f0b4a6; font-size: 13px; font-weight: 600; }
.media-resources { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: -40px 0 60px; border: 1px solid var(--line); background: var(--line); }
.media-resources a { display: grid; gap: 8px; padding: 24px; background: var(--white); color: var(--ink); text-decoration: none; }
.media-resources a:hover { box-shadow: inset 4px 0 var(--coral); }
.media-resources span { color: var(--coral); font: 10px var(--mono); text-transform: uppercase; }
.media-resources strong { font: 600 20px/1.2 var(--serif); }
.media-resources small { color: var(--muted); font-size: 12px; }
.bibliography { margin: 24px 0 70px; }
.bibliography--series { padding-left: 30px; }
.bibliography--series li { display: grid; grid-template-columns: minmax(220px, .8fr) 1fr; gap: 24px; padding: 10px 0 10px 6px; border-bottom: 1px solid var(--line); font-size: 13px; }
.bibliography--series li::marker { color: var(--coral); font-family: var(--mono); }
.bibliography--series a { font-weight: 600; }
.bibliography--series span { color: var(--muted); }
.bibliography--cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.bibliography--cards a { display: grid; gap: 7px; min-height: 120px; padding: 22px; background: var(--white); color: var(--ink); text-decoration: none; }
.bibliography--cards a:hover { box-shadow: inset 4px 0 var(--coral); }
.bibliography--cards strong { font: 600 18px/1.2 var(--serif); }
.bibliography--cards span { color: var(--muted); font-size: 12px; }
.book-footer { display: grid; grid-template-columns: 1fr 1.5fr; gap: 28px; margin-top: 120px; padding: 35px 0; border-top: 4px solid var(--ink); }
.book-footer div { display: grid; align-content: start; }
.book-footer div strong { font-family: var(--serif); font-size: 22px; }
.book-footer div span, .book-footer p { color: var(--muted); font-size: 12px; }
.book-footer p { margin: 0; }
.book-footer > a { grid-column: 2; font-size: 13px; font-weight: 600; }

@media (max-width: 980px) {
  .book-layout { grid-template-columns: minmax(0, 760px); padding-inline: 28px; }
  .contents { display: none; }
  .book-bar { grid-template-columns: 1fr auto; }
  .book-bar__label { display: none; }
}

@media (max-width: 680px) {
  body { font-size: 16px; }
  html { scroll-padding-top: 70px; }
  .book-bar { min-height: 58px; padding: 7px 16px; }
  .book-bar__author img { width: 36px; height: 36px; }
  .book-bar__author small { display: none; }
  .book-bar__back { font-size: 11px; }
  .reading-progress { top: 57px; }
  .book-layout { padding: 0 18px 60px; }
  .hero { padding: 68px 0 62px; }
  h1 { font-size: clamp(54px, 17vw, 78px); }
  .hero__subtitle { font-size: 29px; }
  .hero__lede, .chapter__intro { font-size: 20px; }
  .hero__meta { display: grid; gap: 5px; }
  .hero__meta span + span::before { display: none; }
  .hero__actions { display: grid; }
  .button { justify-content: center; text-align: center; }
  .premise { grid-template-columns: 1fr; gap: 18px; margin-bottom: 70px; }
  .premise p { font-size: 25px; }
  .chapter { padding-top: 72px; }
  h2 { font-size: 43px; }
  h3 { font-size: 25px; }
  blockquote { padding-left: 20px; font-size: 25px; }
  pre { margin-inline: -18px; padding: 20px 18px; border-left-width: 2px; font-size: 11px; }
  .transaction { grid-template-columns: 1fr; }
  .timeline-diagram { padding: 30px 20px; }
  .timeline-diagram__axis { display: none; }
  .event { text-align: left; }
  .concept-grid, .level-map, .strategies, .pattern-list, .bibliography--cards, .media-resources { grid-template-columns: 1fr; }
  .anomaly-table__head, .product-matrix__head { display: none !important; }
  .anomaly-table > div, .product-matrix > div { grid-template-columns: 1fr; gap: 5px; padding: 18px 5px; }
  .anomaly-table > div span:last-child, .product-matrix > div span:last-child { color: var(--muted); }
  .snapshot-diagram { padding: 18px; }
  .snapshot-row { grid-template-columns: 1fr; }
  .snapshot-row small, .snapshot--wide { grid-column: 1; }
  .version-chain__versions { flex-direction: column; }
  .version-chain__versions i { transform: rotate(90deg); }
  .version-chain__views { grid-template-columns: 1fr; }
  .chapter--feature { margin-top: 60px; padding-inline: 18px; }
  .doctors-diagram { grid-template-columns: 1fr; }
  .doctor-path, .doctor-invariant { min-height: auto; }
  .doctor-invariant { order: -1; }
  .decision-tree__question { grid-template-columns: 25px 1fr; gap: 8px; }
  .decision-tree__question strong { grid-column: 2; }
  .bibliography--series li { grid-template-columns: 1fr; gap: 2px; }
  .book-footer { grid-template-columns: 1fr; }
  .book-footer > a { grid-column: 1; }
}

@media print {
  .book-bar, .reading-progress, .contents, .hero__actions { display: none; }
  body { background: white; font-size: 11pt; }
  .book-layout { display: block; padding: 0; }
  .chapter { break-before: page; }
  .chapter--feature { box-shadow: none; clip-path: none; }
  a { color: inherit; }
}