/* Page-specific layout and data visualizations. */
:root { --shared:#8A5A19; --shared-2:#B08A4E; --added:#C9BFA6; }
.wrap { width:100%;max-width:680px;margin:0 auto;padding:0 20px }
main { flex:1;padding:28px 0 }
h1 { font-family:var(--serif);font-size:32px;line-height:1.12;letter-spacing:-.025em;margin:20px 0 10px;text-align:center }
h2 { font-family:var(--serif);font-size:24px;letter-spacing:-.02em;margin:34px 0 10px }
h3 { font-size:16px;margin:20px 0 6px }
p { margin:0 0 12px;color:var(--ink-2) }
p strong { color:var(--ink) }
.lede { font-size:17px;text-align:center;max-width:54ch;margin:0 auto 8px }
.back-link { display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);text-decoration:none;border:1px solid var(--line-2);border-radius:9px;padding:8px 13px;margin-bottom:6px }
.back-link:hover { color:var(--accent);border-color:var(--accent) }
.card { background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;margin:16px 0;box-shadow:var(--shadow-soft) }
.big-num { font-family:var(--serif);font-size:34px;line-height:1;color:var(--accent) }
.facts { display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:16px 0 }
.fact { background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow-soft) }
.fact .l { font-size:13.5px;color:var(--ink-2);margin-top:4px;line-height:1.4 }
.canon { margin:8px 0 4px }
.canon-row { margin:14px 0 }
.canon-name { display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:14px;margin-bottom:5px }
.canon-name b { font-weight:650;color:var(--ink) }
.canon-name span { font-family:var(--mono);font-size:11.5px;color:var(--ink-3);white-space:nowrap }
.bar { display:flex;height:30px;border-radius:8px;overflow:hidden;background:var(--card-2);border:1px solid var(--line) }
.seg { display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10.5px;color:#fff;min-width:0;overflow:hidden;white-space:nowrap }
.seg.ot { background:var(--shared) }
.seg.nt { background:var(--shared-2) }
.seg.add { background:var(--added);color:#4A3F2A }
.seg.none { background:transparent }
.legend { display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:12px;font-size:12.5px;color:var(--ink-3) }
.legend i { display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px;font-style:normal }
.legend .ot { background:var(--shared) }
.legend .nt { background:var(--shared-2) }
.legend .add { background:var(--added) }
.tl { list-style:none;margin:10px 0 0;padding:0;position:relative }
.tl::before { content:"";position:absolute;left:64px;top:6px;bottom:6px;width:2px;background:var(--line) }
.tl li { position:relative;display:flex;gap:14px;padding:7px 0 }
.tl .yr { flex:0 0 52px;text-align:right;font-family:var(--mono);font-size:12px;color:var(--accent);padding-top:2px }
.tl .dot { position:absolute;left:60px;top:14px;width:10px;height:10px;border-radius:50%;background:var(--accent);border:2px solid var(--bg) }
.tl .what { flex:1;min-width:0;padding-left:22px }
.tl .what b { font-weight:650 }
.tl .what small { display:block;color:var(--ink-3);font-size:12.5px;line-height:1.4 }
.tl li.era .dot { background:var(--ink-3) }
.tl li.era .yr { color:var(--ink-3) }
.tbl-scroll { overflow-x:auto;-webkit-overflow-scrolling:touch;margin:10px 0 }
table { border-collapse:collapse;width:100%;font-size:14px }
th, td { text-align:left;padding:8px 10px;border-bottom:1px solid var(--line) }
th { font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);font-weight:600 }
td.n { font-family:var(--mono);text-align:right;white-space:nowrap }
tbody tr:last-child td { border-bottom:none }
.books { columns:2;column-gap:26px;font-size:14px;margin:8px 0 }
.books div { break-inside:avoid;display:flex;justify-content:space-between;gap:10px;padding:3px 0;border-bottom:1px dotted var(--line) }
.books span { font-family:var(--mono);color:var(--ink-3) }
.note { font-size:12.5px;color:var(--ink-3);margin-top:10px }
.attrib { font-size:14px;margin:14px 0 }
.attrib div { break-inside:avoid;padding:9px 0;border-bottom:1px dotted var(--line) }
.attrib div:last-child { border-bottom:none }
.attrib b { font-weight:650 }
.attrib a { margin-left:9px;text-decoration:none }
.attrib em { font-style:normal;color:var(--ink-2) }
.attrib a:hover em { color:var(--accent) }
.attrib small { display:block;color:var(--ink-3);font-size:12.5px;line-height:1.5;margin-top:2px }
.lic-tag { font-family:var(--mono);font-size:11px;color:var(--ink-2);background:var(--card-2);border-radius:5px;padding:1px 6px;white-space:nowrap }
.faq-item { margin:0 0 10px;border:1px solid var(--line);border-radius:12px;background:var(--card);box-shadow:var(--shadow-soft);overflow:hidden }
.faq-item summary { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 15px;cursor:pointer;font-weight:650;color:var(--ink);list-style:none }
.faq-item summary::-webkit-details-marker { display:none }
.faq-item summary::after { content:"+";font-family:var(--mono);font-size:18px;font-weight:400;color:var(--accent);flex:none }
.faq-item[open] summary::after { content:"–" }
.faq-item[open] summary { border-bottom:1px solid var(--line) }
.faq-item p { padding:12px 15px 14px;margin:0;font-size:14.5px }
.cta { display:block;text-align:center;background:var(--accent);color:var(--accent-ink);border-radius:13px;padding:14px;font-weight:650;text-decoration:none;margin:22px 0 0 }
@media (max-width:430px) {
h1 { font-size:27px }
h2 { font-size:21px }
.lede { font-size:15.5px;text-align:left }
.books { columns:1 }
.tl::before { left:46px }
.tl .yr { flex-basis:38px;font-size:11.5px }
.tl .dot { left:42px }
.tl .what { padding-left:18px }
.seg { font-size:9.5px }
.tbl-scroll { overflow-x:visible }
table, tbody, tr, td { display:block;width:100% }
thead { display:none }
tr { border-bottom:1px solid var(--line);padding:10px 0 }
tbody tr:last-child { border-bottom:none }
td { border:none;padding:1px 0 }
td.bk { font-weight:650;font-size:15px;margin-bottom:2px }
td.n { text-align:left;display:inline-block;width:auto;margin-right:16px }
td[data-l]::before { content:attr(data-l) " ";font-family:var(--mono);font-size:10px;
    letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin-right:5px; }
td[data-l="Why"] { color:var(--ink-2);font-size:13.5px;margin-top:3px }
.lic-tag { white-space:normal;overflow-wrap:anywhere }
}
main>.wrap { max-width:1160px }
main { padding-bottom:52px }
.back-link { border:0;border-radius:0;padding:0;font:12px var(--sans);letter-spacing:0;text-transform:none }
h1 { font-size:54px;font-weight:400;line-height:1.05;text-align:left;letter-spacing:-.04em;margin:0 0 22px;text-wrap:balance }
.lede { text-align:left;font-size:16px;line-height:1.7;margin:0;max-width:43ch }
.guide-nav { display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;padding:18px 0;border-block:1px solid var(--line-2);font-size:12px }
.guide-nav>span { text-transform:uppercase;letter-spacing:.13em;font-size:10px;color:var(--ink-3);margin-right:8px }
.guide-nav a { text-decoration:none;color:var(--ink-2);padding:6px 0 }
.guide-nav a:hover { color:var(--accent);text-decoration:underline }
.guide-section { display:grid;grid-template-columns:100px minmax(0,1fr);gap:24px;padding:44px 0;border-bottom:1px solid var(--line) }
.section-number { font:italic 26px var(--serif);color:var(--accent);padding-top:4px }
.section-body { min-width:0 }
.section-body>h2 { font:400 32px/1.2 var(--serif);margin:0 0 20px;letter-spacing:-.025em;scroll-margin-top:24px }
.section-body>p { max-width:74ch;line-height:1.75;margin-bottom:16px }
.section-body>h3 { font:400 24px var(--serif);margin:28px 0 12px }
.section-body>.note { font-size:13px;line-height:1.7 }
.facts { grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:28px 0 0;border-top:1px solid var(--line-2) }
.fact { background:transparent;border:0;border-right:1px solid var(--line);border-radius:0;padding:24px 20px 4px;box-shadow:none }
.fact:first-child { padding-left:0 }
.fact:last-child { border-right:0 }
.big-num { font-size:44px;font-weight:400 }
.fact .l { font-size:13px;line-height:1.6;margin-top:12px }
.canon { margin:24px 0;padding:26px 30px;background:linear-gradient(110deg,#fffdf8,var(--card-2));border:1px solid var(--line);border-top:2px solid var(--accent);border-radius:4px }
.canon-row { margin:0 0 22px }
.canon-name { font-size:16px;margin-bottom:9px }
.canon-name b { font:21px var(--serif) }
.canon-name span { font:12px var(--sans) }
.bar { height:36px;border-radius:3px }
.seg { font-family:var(--sans);font-size:12px }
.legend { border-top:1px solid var(--line);padding-top:18px;font-size:12px;gap:10px 20px }
.translations-section .section-body>p, .references-section .section-body>p { max-width:70ch }
.tl { margin:24px 0 0;max-width:840px }
.tl::before { left:100px;width:1px }
.tl li { padding:14px 0;gap:24px }
.tl .yr { flex-basis:86px;font:19px var(--serif);padding-top:0 }
.tl .dot { left:96px;top:21px;width:9px;height:9px }
.tl .what { padding-left:18px }
.tl .what b { font:22px var(--serif) }
.tl .what small { font-size:14px;line-height:1.6;margin-top:5px }
.tl li.era { padding-block:20px }
.tl li.era .dot { top:27px }
.tbl-scroll { margin:24px 0 }
th, td { padding:16px 14px;vertical-align:top }
th { font:11px var(--sans);letter-spacing:.08em }
td.n { font-family:var(--sans) }
td.bk { font:20px var(--serif) }
.book-reference { margin-top:30px;padding:22px 0;border-block:1px solid var(--line-2) }
.book-reference summary { cursor:pointer;color:var(--ink) }
.book-reference summary h3 { display:inline;font:24px var(--serif);margin:0 }
.book-reference>p { font-size:14px;margin:18px 0 }
.books { columns:3;column-gap:32px }
.books div { padding:7px 0;border-bottom:1px solid var(--line) }
.books span { font:13px var(--sans) }
.faq-item { border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;margin:0 }
.faq-item summary { padding:20px 0;font-weight:500 }
.faq-item p { padding:12px 0 24px;max-width:74ch;line-height:1.7 }
.attrib { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 36px;margin-top:24px }
.attrib>div { padding:20px 0;border-bottom:1px solid var(--line);min-width:0 }
.attrib b { display:block;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin-bottom:6px }
.attrib a { display:block;font:21px/1.35 var(--serif);margin:0 0 8px;overflow-wrap:anywhere }
.attrib small { font-size:12px;line-height:1.7 }
.lic-tag { display:table;margin-top:6px;padding:3px 7px;font:10px/1.6 var(--sans);border-radius:3px;white-space:normal }
.cta { display:table;background:transparent;color:var(--accent);border-radius:0;border-bottom:1px solid var(--line-2);padding:8px 0;margin:36px auto 0;font-size:14px;font-weight:500 }
a:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline:2px solid var(--accent);outline-offset:4px }
@media(max-width:1000px) {
h1 { font-size:46px }
.guide-section { grid-template-columns:48px minmax(0,1fr);gap:20px }
.facts { grid-template-columns:repeat(2,minmax(0,1fr)) }
.fact:nth-child(2) { border-right:0 }
.fact:nth-child(3) { padding-left:0 }
.fact { padding-bottom:20px }
}
@media(max-width:700px) {
h1 { font-size:44px;margin-bottom:18px }
.lede { font-size:15px }
.guide-nav { gap:4px 18px }
.guide-nav>span { flex-basis:100% }
.guide-nav a { min-height:40px;display:flex;align-items:center }
.guide-section { grid-template-columns:1fr;gap:12px;padding:30px 0 }
.section-number { font-size:20px }
.section-body>h2 { font-size:29px;margin-bottom:18px }
.section-body>p { font-size:15px;line-height:1.75 }
.canon { padding:20px 16px }
.canon-name { align-items:start }
.canon-name b { font-size:18px }
.canon-name span { font-size:11px }
.seg { font-size:10px }
.attrib { grid-template-columns:1fr }
.books { columns:2 }
.big-num { font-size:38px }
.fact { padding-inline:16px }
.tl::before { left:78px }
.tl .yr { flex-basis:65px;font-size:16px }
.tl .dot { left:74px }
.tl li { gap:20px }
.tl .what { padding-left:8px }
.tl .what b { font-size:20px }
.tl .what small { font-size:13px }
.section-body>h3 { font-size:23px }
.book-reference summary h3 { font-size:22px }
}
@media(max-width:430px) {
.books { columns:1 }
.tbl-scroll td { padding:3px 0 }
.tbl-scroll tr { padding:18px 0 }
.tbl-scroll td.bk { font-size:20px }
.tbl-scroll td[data-l="Why"] { font-size:14px }
.canon { padding-inline:12px }
.seg { font-size:9px }
.canon-name { flex-wrap:wrap;gap:3px 12px }
}
.illustrated-prose { display:grid;grid-template-columns:minmax(0,2fr) minmax(220px,1fr);gap:32px;align-items:start;margin:12px 0 24px }
.prose-copy { min-width:0 }
.prose-copy p { line-height:1.75;margin-bottom:16px }
.editorial-vignette { margin:0;align-self:start }
.editorial-vignette img { display:block;width:100%;height:auto;mix-blend-mode:multiply;mask-image:radial-gradient(ellipse at center,#000 48%,transparent 72%) }
.editorial-vignette figcaption { font:italic 15px/1.5 var(--serif);color:var(--ink-3);text-align:center;margin:8px 0 0 }
.translations-section .editorial-vignette { margin-top:20px }
@media(max-width:900px) {
.illustrated-prose { grid-template-columns:1fr;gap:12px }
.editorial-vignette { width:min(100%,300px);justify-self:center }
.translations-section .editorial-vignette { margin:0 }
.prose-copy p { font-size:15px }
}
.timeline-next { max-width:840px;margin:28px 0 0;padding:22px 0;border-top:1px solid var(--line-2) }
.timeline-next-label { display:block;font:10px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px }
.timeline-next a { display:inline-block;font:24px/1.3 var(--serif);color:var(--accent);text-decoration:none }
.timeline-next a span { display:inline-block;margin-left:10px;font:18px var(--sans) }
.timeline-next a:hover { text-decoration:underline;text-underline-offset:5px }
.timeline-next p { font-size:14px;line-height:1.65;color:var(--ink-2);max-width:66ch;margin:10px 0 0 }
@media(max-width:700px) {
.timeline-next a { font-size:22px }
}
.timeline-next { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:28px;align-items:center;max-width:none }
.timeline-next .timeline-next-art { display:block;border-radius:6px;overflow:hidden }
.timeline-next-art img { display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover }
.timeline-next-copy { min-width:0 }
@media(max-width:700px) {
.timeline-next { grid-template-columns:1fr;gap:20px }
.timeline-next-art { max-width:480px }
}
.translations-section .section-body > .canon-history { max-width:none }
.book-lists-section .section-body>p { max-width:none }
@media(max-width:1000px) {
}