:root { color-scheme: light dark; --page: #f7f8fa; --ink: #222; --muted: #626669; --line: #d4d7db; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
a:focus { outline: 2px solid currentColor; outline-offset: 4px; }
img { display: block; max-width: 100%; height: auto; }
.skip-link { position: absolute; top: -100px; left: 1rem; padding: .75rem; background: var(--page); }
.skip-link:focus { top: .5rem; }
.reading-bar, footer { width: calc(100% - 3rem); max-width: 1080px; margin: 0 auto; padding: 1.25rem 0; display: flex; justify-content: space-between; gap: 1rem; font-size: .875rem; }
.reading-bar { border-bottom: 1px solid var(--line); }
.reading-bar a { display: inline-block; padding: .5rem 0; }
article { padding: 2.75rem 0 4rem; }
.chapter-opening { width: calc(100% - 2rem); max-width: 780px; margin: 0 auto 4rem; }
.chapter-opening h1 { font-size: 1rem; font-weight: 400; color: var(--muted); text-align: center; margin: 0 0 1.5rem; }
.chapter-opening img { width: 100%; box-shadow: 0 .75rem 3rem #22222260; }
.chapter-copy { width: calc(100% - 3rem); max-width: 680px; margin: 0 auto; font-size: 1.375rem; overflow-wrap: break-word; }
.chapter-section + .chapter-section { margin-top: 1.1rem; }
.chapter-navigation { width: calc(100% - 3rem); max-width: 680px; margin: 3rem auto 0; padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: .9375rem; }
.chapter-navigation a { display: inline-block; padding: .75rem 0; }
.chapter-navigation a:last-child { text-align: right; }
.chapter-index { width: calc(100% - 3rem); max-width: 540px; margin: 3rem auto 5rem; }
.chapter-index h1 { font-size: 2rem; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .5rem; }
.byline { color: var(--muted); margin-top: 0; }
.chapter-index h2 { margin-top: 2.5rem; font-size: 1.125rem; font-weight: 500; }
.chapter-index ol { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.chapter-index li { border-bottom: 1px solid var(--line); }
.chapter-index li a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; }
.chapter-index li span { color: var(--muted); font-size: .8125rem; white-space: nowrap; }
.closing-art { position: relative; width: calc(100% - 2rem); max-width: 680px; height: 260px; margin: 4rem auto 2.5rem; }
.closing-art img { position: absolute; left: 35%; top: 0; width: 52%; height: 100%; object-fit: contain; opacity: .72; }
.closing-art p { position: absolute; left: 34%; top: 54%; transform: translateY(-50%); margin: 0; font-size: 2.25rem; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
footer { flex-wrap: wrap; color: var(--muted); font-size: .8125rem; }
@media (prefers-color-scheme: dark) { :root { --page: #141713; --ink: #e6e9e3; --muted: #a7afa5; --line: #3a4138; } }
@media (max-width: 650px) { .chapter-copy { width: calc(100% - 2.5rem); } .chapter-opening { margin-bottom: 2.5rem; } .chapter-navigation { gap: .65rem; font-size: .8125rem; } .closing-art { height: 160px; } .closing-art p { font-size: 1.5rem; } }