:root {
	--paper: #eee5d3;
	--paper-2: #f7f1e6;
	--ink: #25211b;
	--muted: #5f594f;
	--rust: #9b3d27;
	--gold: #d49a3f;
	--sage: #69745b;
	--blue: #526b78;
	--line: rgba(37, 33, 27, .2);
	--serif: Georgia, "Times New Roman", serif;
	--sans: "Segoe UI", system-ui, sans-serif;
	--mono: "Cascadia Code", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; background: var(--paper); }
body { margin: 0; color: var(--ink); background: radial-gradient(circle at 1px 1px, #2f271c12 1px, transparent 0) 0 0/18px 18px, var(--paper); font: 17px/1.55 var(--serif); }
a { color: inherit; text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; }
code { font: .8em/1.4 var(--mono); overflow-wrap: anywhere; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.skip:not(:focus) { position: fixed; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
.skip:focus { position: fixed; z-index: 100; top: 1rem; left: 1rem; padding: .7rem 1rem; background: white; color: var(--ink); }

.topbar { position: sticky; z-index: 50; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem max(1rem, calc((100vw - 1180px)/2)); border-bottom: 1px solid #ffffff25; color: #f7efe1; background: #25211bf2; backdrop-filter: blur(12px); font-family: var(--sans); }
.brand { font-weight: 900; letter-spacing: -.02em; text-decoration: none; white-space: nowrap; }
.brand span { color: #d8a25f; font-size: .72rem; letter-spacing: .08em; }
.topbar nav { display: flex; gap: .15rem; overflow-x: auto; }
.topbar nav a { padding: .45rem .55rem; color: #d8d1c5; font-size: .72rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.topbar nav a:hover { color: white; }

.hero { min-height: calc(100vh - 57px); width: min(1180px, calc(100% - 2rem)); margin: auto; padding: clamp(4rem, 9vw, 8rem) 0 5rem; display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(2rem, 7vw, 7rem); align-items: center; }
.eyebrow { margin: 0 0 .6rem; color: var(--rust); font: 900 .7rem/1.3 var(--sans); letter-spacing: .15em; text-transform: uppercase; }
h1, h2, h3, p { text-wrap: pretty; }
h1, h2, h3 { margin: 0; line-height: 1.02; }
h1 { max-width: 10ch; font-size: clamp(3.5rem, 8vw, 7.2rem); letter-spacing: -.065em; }
h1 em { color: var(--rust); font-weight: 500; }
h2 { max-width: 17ch; font-size: clamp(2.3rem, 5vw, 4.7rem); letter-spacing: -.05em; }
h3 { font-size: clamp(1.35rem, 2.5vw, 2rem); letter-spacing: -.025em; }
.lede, .intro { color: var(--muted); font-size: clamp(1.05rem, 1.7vw, 1.28rem); }
.lede { max-width: 56ch; margin: 1.5rem 0; }
.intro { max-width: 66ch; margin: .9rem 0 0; }
.hero-actions, .proof-list { display: flex; flex-wrap: wrap; gap: .6rem; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.8rem; padding: .65rem 1rem; border: 1px solid var(--ink); background: transparent; color: var(--ink); font: 800 .8rem/1 var(--sans); text-decoration: none; cursor: pointer; }
.button.primary { border-color: var(--rust); background: var(--rust); color: white; }
.button:hover { transform: translateY(-1px); box-shadow: 4px 4px 0 var(--gold); }
.proof-list { margin: 1.6rem 0 0; padding: 0; list-style: none; }
.proof-list li { padding: .35rem .6rem; border: 1px solid var(--line); border-radius: 99px; background: #fff6; font: 700 .68rem/1 var(--sans); }
.proof-list li::before { content: "●"; margin-right: .35rem; color: var(--sage); }
.proof-list .warning::before { color: var(--gold); }
.scope-note { max-width: 52ch; margin: .8rem 0 0; color: var(--muted); font: .76rem/1.45 var(--sans); }
.hero-plate { position: relative; margin: 0; padding: .7rem; border: 1px solid #0008; background: var(--ink); box-shadow: 18px 20px 0 var(--rust); transform: rotate(.6deg); }
.hero-plate img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.hero-plate figcaption { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem .25rem .15rem; color: #eee4d2; font: .75rem/1.4 var(--sans); }
.hero-plate figcaption span { color: #aaa398; }

.answer-strip { display: grid; grid-template-columns: 1fr 1fr; background: var(--ink); color: #eee5d3; }
.answer-strip div { padding: 2rem max(1rem, calc((100vw - 1180px)/2)); }
.answer-strip div:first-child { padding-right: 3rem; background: #9b3d27; text-align: right; }
.answer-strip div:last-child { padding-left: 3rem; }
.answer-strip b, .answer-strip span { display: block; }
.answer-strip b { margin-bottom: .3rem; color: #edba72; font: 900 .68rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.chapter-map { display: grid; grid-template-columns: auto repeat(8, 1fr); gap: 1px; padding: 1px max(1rem, calc((100vw - 1180px)/2)); background: var(--line); font-family: var(--sans); }
.chapter-map > * { display: grid; place-items: center; min-height: 3.4rem; padding: .55rem; background: var(--paper-2); text-align: center; }
.chapter-map b { color: var(--rust); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.chapter-map a { color: var(--muted); font-size: .7rem; font-weight: 800; text-decoration: none; }
.chapter-map a:hover { color: var(--rust); }

.chapter { scroll-margin-top: 4.5rem; padding: clamp(5rem, 9vw, 8rem) max(1rem, calc((100vw - 1180px)/2)); border-top: 1px solid var(--line); }
.chapter.paper { background: #f8f2e8d9; }
.chapter.dark { color: #f2e9da; background: #28241e; }
.chapter.dark .intro { color: #bbb2a5; }
.chapter-head { display: grid; grid-template-columns: 4rem 1fr; gap: 1.2rem; align-items: start; margin-bottom: 3rem; }
.chapter-no { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; margin: 0; border: 2px solid currentColor; border-radius: 50%; color: var(--rust); font: 900 .9rem var(--mono); }
.dark .chapter-no { color: var(--gold); }
.two-col, .lab-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(310px, .8fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: start; }
.lab-layout.reverse { grid-template-columns: minmax(0, 1.2fr) minmax(310px, .8fr); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pair figure { margin: 0; padding: .55rem; background: var(--ink); }
.pair img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.pair figcaption { padding: .55rem .2rem 0; color: #eee5d3; font: 700 .72rem var(--sans); }
.note-stack { display: grid; gap: 1rem; }
.note { padding: 1.2rem; border-top: 4px solid var(--sage); background: #fff9; }
.note.caution { border-color: var(--gold); }
.note b { font: 900 .72rem var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.note p { margin: .45rem 0 0; color: var(--muted); }
.citation, .source-line { color: var(--muted); font: .8rem/1.55 var(--sans); }

.viewer { --split: 50%; position: relative; isolation: isolate; overflow: hidden; border: .6rem solid var(--ink); background: #8a8882; box-shadow: 12px 14px 0 #9b3d2730; touch-action: pan-y; }
.viewer.square { aspect-ratio: 1; }
.viewer.wide { aspect-ratio: 16/9; }
.viewer > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; }
.viewer .baseline { z-index: 1; clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.viewer .divider { position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--split); width: 2px; background: white; transform: translateX(-1px); pointer-events: none; }
.viewer .divider::after { content: "↔"; position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 2px solid white; border-radius: 50%; background: var(--rust); color: white; font: 900 1rem var(--sans); transform: translate(-50%, -50%); }
.viewer input[type="range"] { position: absolute; z-index: 5; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.viewer:has(input[type="range"]:focus-visible) { outline: 3px solid var(--gold); outline-offset: 4px; }
.viewer-zoom { position: absolute; z-index: 6; right: .65rem; bottom: .65rem; padding: .48rem .6rem; border: 1px solid #fff8; background: #191713de; color: white; font: 800 .65rem/1 var(--sans); cursor: pointer; }
.view-label { position: absolute; z-index: 4; top: .65rem; padding: .35rem .5rem; background: #191713d9; color: white; font: 900 .62rem/1 var(--sans); letter-spacing: .07em; text-transform: uppercase; pointer-events: none; }
.view-label.left { left: .65rem; }
.view-label.right { right: .65rem; }
.lab-panel fieldset, .verdict-desk fieldset { margin: 0; padding: 0; border: 0; }
.lab-panel legend, .verdict-desk legend { margin-bottom: .7rem; font: 900 .72rem var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.lab-panel fieldset { display: flex; flex-wrap: wrap; gap: .45rem; }
.lab-panel fieldset label, .verdict-desk fieldset label { cursor: pointer; font: 800 .78rem/1.2 var(--sans); }
.lab-panel fieldset label { padding: .55rem .7rem; border: 1px solid var(--line); background: #fff7; }
.lab-panel input, .verdict-desk input { accent-color: var(--rust); }
.lab-panel label:has(input:checked) { border-color: var(--rust); background: var(--rust); color: white; }
.readout { margin-top: 1.2rem; padding: 1.4rem; border-left: 5px solid var(--gold); background: #fff9; }
.readout > p { margin: 0 0 1rem; font-size: 1.08rem; }
.readout dl { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: 0; }
.readout dl div { padding-top: .7rem; border-top: 1px solid var(--line); }
.readout dt { color: var(--muted); font: 900 .65rem var(--sans); text-transform: uppercase; }
.readout dd { margin: .3rem 0 0; }

.witness-grid, .responsibility-grid, .critique-grid, .source-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.witness { padding: clamp(1rem, 3vw, 2rem); border: 1px solid var(--line); background: #fff7; }
.witness h3 { margin-bottom: 1.2rem; }
.witness > p:last-of-type { color: var(--muted); }
.witness .poster { width: 100%; aspect-ratio: 16/9; object-fit: contain; background: #fbfaf5; }
.inspect-inline { margin-top: .6rem; padding: .5rem .65rem; border: 1px solid var(--ink); background: transparent; color: var(--ink); font: 800 .7rem var(--sans); cursor: pointer; }
.viewer.simple { border-width: .4rem; box-shadow: none; }
.mini-pair { display: grid; grid-template-columns: 7rem 1fr; gap: .8rem; align-items: center; padding: .7rem; border-top: 1px solid var(--line); font: 700 .72rem var(--sans); }
.mini-pair img { width: 7rem; aspect-ratio: 4/3; object-fit: contain; }
.anatomy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 0; padding: 1px; background: #ffffff28; list-style: none; counter-reset: anatomy; }
.anatomy li { counter-increment: anatomy; min-height: 13rem; padding: 1.5rem; background: #28241e; }
.anatomy li::before { content: "0" counter(anatomy); display: block; margin-bottom: 1.5rem; color: var(--gold); font: 900 .8rem var(--mono); }
.anatomy b, .anatomy span, .anatomy small { display: block; }
.anatomy b { font: 900 1rem var(--sans); }
.anatomy span { margin-top: .5rem; color: #c9c0b2; }
.anatomy small { margin-top: 1rem; color: #9d9486; }
.coverage { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; }
.coverage p { margin: 0; padding: 1.2rem; border: 1px solid #ffffff28; }
.responsibility-grid { grid-template-columns: repeat(4, 1fr); }
.responsibility-grid article { min-height: 10rem; padding: 1.25rem; border-top: 5px solid var(--rust); background: #fff9; }
.responsibility-grid article:nth-child(2) { border-color: var(--gold); }
.responsibility-grid article:nth-child(3) { border-color: var(--sage); }
.responsibility-grid article:nth-child(4) { border-color: var(--blue); }
.responsibility-grid b, .responsibility-grid span { display: block; }
.responsibility-grid b { margin-bottom: .7rem; font: 900 .82rem var(--sans); text-transform: uppercase; }
.responsibility-grid span { color: var(--muted); }
.responsibility-grid small { display: block; margin-top: .7rem; color: var(--muted); font: .67rem/1.45 var(--sans); }
.responsibility-grid a { text-decoration-thickness: 1px; }
.hypothesis { margin: 2rem 0; padding: 2rem; border: 2px solid var(--ink); background: var(--gold); box-shadow: 9px 9px 0 var(--ink); }
.hypothesis p:last-child { max-width: 70ch; margin-bottom: 0; }
.critique-grid > div { padding: 1.4rem; border-left: 5px solid var(--sage); background: #fff9; }
.critique-grid > div:last-child { border-color: var(--rust); }
.critique-grid b { font: 900 .75rem var(--sans); text-transform: uppercase; }
.critique-grid p { margin-bottom: 0; color: var(--muted); }

.verdict-desk { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.verdict-desk fieldset { display: grid; gap: .45rem; padding: 1.2rem; border: 1px solid var(--line); background: #fff7; }
.verdict-desk fieldset label { display: flex; align-items: center; gap: .55rem; padding: .5rem; }
.verdict-output { grid-column: 1/-1; display: grid; grid-template-columns: 1fr auto auto; gap: .7rem; align-items: end; margin-top: .5rem; }
.verdict-output > label { grid-column: 1/-1; font: 900 .72rem var(--sans); text-transform: uppercase; }
.verdict-output textarea { width: 100%; padding: 1rem; border: 1px solid var(--ink); background: var(--paper-2); resize: vertical; font: .85rem/1.5 var(--mono); }
#copy-status { min-width: 7rem; color: var(--muted); font: 800 .75rem var(--sans); }
.stop-line { margin-top: 1.5rem; padding: 1rem; border: 2px solid var(--rust); color: var(--rust); text-align: center; font: 800 .88rem var(--sans); }
.source-grid { grid-template-columns: repeat(3, 1fr); }
.source-grid a { min-height: 8rem; padding: 1.2rem; border: 1px solid var(--line); background: #fff9; text-decoration: none; }
.source-grid a:hover { border-color: var(--rust); transform: translateY(-2px); }
.source-grid a::after { content: "Visit primary source ↗"; display: block; margin-top: 1rem; color: var(--rust); font: 900 .68rem var(--sans); text-transform: uppercase; }
.source-grid b, .source-grid span { display: block; }
.source-grid b { font: 900 .9rem var(--sans); }
.source-grid span { margin-top: .5rem; color: var(--muted); font-size: .9rem; }
details { margin-top: 1.5rem; border: 1px solid var(--line); background: #fff7; }
summary { padding: 1rem; cursor: pointer; font: 900 .82rem var(--sans); }
details ul { margin: 0; padding: 0 2.5rem 1.2rem; color: var(--muted); }
.full-ledger { font-family: var(--sans); }
footer { display: flex; justify-content: space-between; gap: 2rem; padding: 2rem max(1rem, calc((100vw - 1180px)/2)); background: var(--ink); color: #aaa398; font: .75rem var(--sans); }
#image-zoom { width: min(94vw, 1500px); max-width: none; padding: 2.8rem 1rem 1rem; border: 1px solid #ffffff55; background: #171512; color: white; }
#image-zoom::backdrop { background: #111d; backdrop-filter: blur(5px); }
#image-zoom figure { margin: 0; }
#image-zoom img { width: 100%; max-height: 82vh; object-fit: contain; }
#image-zoom figcaption { padding: .8rem 0 0; color: #d0c7b8; font: .8rem var(--sans); }
.zoom-close { position: absolute; top: .6rem; right: .6rem; padding: .45rem .7rem; border: 1px solid #fff7; background: transparent; color: white; font: 800 .7rem var(--sans); cursor: pointer; }
.evidence-title { max-width: 17ch; font-size: clamp(2.7rem, 6vw, 5.8rem); }
.table-wrap { margin-top: 2rem; overflow-x: auto; border: 1px solid var(--line); }
.evidence-table { width: 100%; min-width: 850px; border-collapse: collapse; background: #fff9; }
.evidence-table caption { padding: 1rem; color: var(--rust); font: 900 .76rem var(--sans); letter-spacing: .12em; text-align: left; text-transform: uppercase; }
.evidence-table th, .evidence-table td { padding: .85rem; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.evidence-table th { color: var(--muted); font: 900 .68rem var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.evidence-table td { font-size: .9rem; }
.ledger-list { padding-left: 1.2rem; color: var(--muted); }
.ledger-list li { margin: .6rem 0; }
.evidence-cards { margin-bottom: 1.5rem; }
.source-heading { margin: 2.5rem 0 1rem; }
.compact-sources a { min-height: 6.5rem; }

@media (max-width: 900px) {
	.brand span { display: none; }
	.hero, .two-col, .lab-layout, .lab-layout.reverse { grid-template-columns: 1fr; }
	.hero { min-height: auto; }
	.hero-plate { width: min(650px, 100%); margin: auto; }
	.anatomy, .responsibility-grid { grid-template-columns: 1fr 1fr; }
	.source-grid { grid-template-columns: 1fr 1fr; }
	.chapter-map { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 620px) {
	body { font-size: 16px; }
	html { scroll-padding-top: 6.5rem; }
	.topbar { display: block; padding: .35rem .5rem; }
	.brand { display: none; }
	.topbar nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: .2rem; overflow: visible; }
	.topbar nav a { display: grid; place-items: center; min-height: 2.55rem; padding: .3rem; border: 1px solid #ffffff17; font-size: .72rem; white-space: normal; text-align: center; }
	.chapter { padding-block: 4.5rem; }
	.chapter { scroll-margin-top: 6.5rem; }
	.chapter-head { grid-template-columns: 3rem 1fr; }
	.chapter-no { width: 2.5rem; height: 2.5rem; }
	.answer-strip, .pair, .witness-grid, .critique-grid, .coverage, .anatomy, .responsibility-grid, .source-grid, .verdict-desk { grid-template-columns: 1fr; }
	.chapter-map { grid-template-columns: repeat(2, 1fr); }
	.answer-strip div:first-child, .answer-strip div:last-child { padding: 1.5rem 1rem; text-align: left; }
	.readout dl { grid-template-columns: 1fr; }
	.verdict-output { grid-template-columns: 1fr; }
	.verdict-output > label { grid-column: auto; }
	footer { display: block; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.button:hover, .source-grid a:hover { transform: none; }
}