:root { --reader-font-size: 20px; }

.book-reader {
    --reader-bg: #0b0b0a;
    --reader-surface: #121210;
    --reader-text: #d8d2c6;
    --reader-heading: #f0eadf;
    --reader-muted: #77736b;
    --reader-line: rgba(255, 255, 255, .09);
    --reader-accent: #a88c58;
    min-height: 100vh;
    padding-bottom: 120px;
    color: var(--reader-text);
    background: radial-gradient(circle at 50% 0, rgba(168, 140, 88, .055), transparent 34rem), var(--reader-bg);
    transition: color 220ms ease, background 220ms ease;
}

.book-reader[data-theme="light"] {
    --reader-bg: #e8e0cf;
    --reader-surface: #f2ead9;
    --reader-text: #393329;
    --reader-heading: #211d17;
    --reader-muted: #817869;
    --reader-line: rgba(52, 42, 29, .14);
    --reader-accent: #82673e;
    background: radial-gradient(circle at 50% 0, rgba(255, 255, 255, .36), transparent 38rem), var(--reader-bg);
}

.book-reader *, .book-reader *::before, .book-reader *::after { box-sizing: border-box; }

.book-reader__progress { position: fixed; z-index: 1002; top: 0; right: 0; left: 0; height: 2px; }
.book-reader__progress span { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; background: var(--reader-accent); }

.book-bar {
    position: sticky;
    z-index: 1000;
    top: 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 70px;
    padding: 0 clamp(18px, 4vw, 58px);
    border-bottom: 1px solid var(--reader-line);
    background: color-mix(in srgb, var(--reader-bg) 90%, transparent);
    backdrop-filter: blur(18px);
}

.book-bar__back { display: inline-flex; gap: 11px; align-items: center; width: fit-content; color: var(--reader-muted); font: 600 10px/1 Inter, sans-serif; letter-spacing: .13em; text-decoration: none; text-transform: uppercase; }
.book-bar__back span:first-child { color: var(--reader-accent); font: 400 19px/1 Georgia, serif; transition: transform 180ms ease; }
.book-bar__back:hover span:first-child { transform: translateX(-4px); }

.book-bar__identity { display: flex; gap: 12px; align-items: center; color: var(--reader-muted); font: 500 10px/1.2 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.book-bar__identity i { width: 3px; height: 3px; border-radius: 50%; background: var(--reader-accent); }
.book-bar__identity button { display: flex; gap: 6px; align-items: center; padding: 6px 8px; border: 0; border-radius: 4px; color: var(--reader-accent); background: transparent; font: inherit; letter-spacing: inherit; cursor: pointer; text-transform: inherit; }
.book-bar__identity button small { max-width: 0; overflow: hidden; opacity: 0; color: var(--reader-muted); font-size: 8px; transition: max-width 180ms ease, opacity 180ms ease; }
.book-bar__identity button:hover { background: var(--reader-line); }
.book-bar__identity button:hover small, .book-bar__identity button:focus-visible small { max-width: 54px; opacity: 1; }
.book-bar__identity button:focus-visible { outline: 2px solid var(--reader-accent); outline-offset: 2px; }

.book-tools { display: flex; gap: 2px; align-items: center; justify-self: end; }
.book-tools button, .book-tools output { display: grid; width: 34px; height: 34px; padding: 0; place-items: center; border: 0; border-radius: 50%; color: var(--reader-muted); background: transparent; font: 500 13px/1 Georgia, serif; }
.book-tools button { cursor: pointer; }
.book-tools button:hover { color: var(--reader-heading); background: var(--reader-line); }
.book-tools button:focus-visible, .book-chapter-navigation a:focus-visible, .book-chapter-navigation select:focus-visible, .book-resume:focus-visible { outline: 2px solid var(--reader-accent); outline-offset: 3px; }
.book-tools button span { font-family: Inter, sans-serif; font-size: 9px; }
.book-tools output { width: 27px; color: var(--reader-accent); font: 500 10px/1 Inter, sans-serif; }
.book-tools__divider { width: 1px; height: 20px; margin: 0 7px; background: var(--reader-line); }
.book-tools__moon { width: 13px; height: 13px; border-radius: 50%; box-shadow: inset 5px -2px 0 var(--reader-accent); }
.book-tools__sun { display: none; width: 12px; height: 12px; border: 2px solid var(--reader-accent); border-radius: 50%; }
.book-reader[data-theme="light"] .book-tools__moon { display: none; }
.book-reader[data-theme="light"] .book-tools__sun { display: block; }

.book-page { width: min(100% - 44px, 900px); margin-inline: auto; font-family: "EB Garamond", Garamond, Georgia, serif; font-size: var(--reader-font-size); }

.book-masthead { padding: clamp(64px, 8vw, 96px) 0 clamp(42px, 6vw, 64px); text-align: center; }
.book-masthead__author { margin-bottom: 8px; color: var(--reader-muted); font: 600 9px/1 Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.book-masthead p { margin: 0 0 18px; color: var(--reader-accent); font-family: "EB Garamond", Garamond, Georgia, serif; letter-spacing: .12em; }
.book-masthead p strong { font-size: 1.08rem; font-weight: 800; }
.book-masthead p span { color: var(--reader-muted); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.book-masthead h1 { margin: 0; color: var(--reader-heading); font-size: clamp(2.4rem, 5vw, 4.3rem); font-weight: 600; letter-spacing: -.045em; line-height: 1; white-space: nowrap; }
.book-masthead > span { display: block; margin-top: 30px; color: var(--reader-muted); font-size: 1em; font-style: italic; }
.book-masthead__description { max-width: 610px; margin: 25px auto 0; color: var(--reader-text); font-size: .9em; line-height: 1.55; }

.book-chapters-strip { display: flex; gap: 1px; margin: 0 0 34px; overflow-x: auto; border: 1px solid var(--reader-line); background: var(--reader-line); scrollbar-width: thin; }
.book-chapters-strip a { position: relative; display: grid; flex: 1 0 205px; grid-template-columns: auto minmax(0, 1fr) auto; gap: 11px; align-items: center; min-height: 62px; padding: 10px 15px 13px; overflow: hidden; color: var(--reader-muted); background: var(--reader-bg); text-decoration: none; transition: color 180ms ease, background 180ms ease; }
.book-chapters-strip a > span { min-width: 2.2em; color: var(--reader-accent); font: 700 15px/1 "EB Garamond", Garamond, Georgia, serif; letter-spacing: .03em; text-align: center; }
.book-chapters-strip a strong { overflow: hidden; color: inherit; font: 700 17px/1.1 "EB Garamond", Garamond, Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.book-chapters-strip a small { color: var(--reader-muted); font: 700 11px/1 "EB Garamond", Garamond, Georgia, serif; }
.book-chapters-strip a > i { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: color-mix(in srgb, var(--reader-accent) 15%, transparent); }
.book-chapters-strip a > i b { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; background: var(--reader-accent); transition: transform 180ms ease; }
.book-chapters-strip a:hover { color: var(--reader-heading); background: var(--reader-surface); }
.book-chapters-strip a.is-active { color: #100e0a; background: var(--reader-accent); }
.book-chapters-strip a.is-active > span, .book-chapters-strip a.is-active small { color: currentColor; }
.book-chapters-strip a.is-active > i { background: rgba(16, 14, 10, .2); }
.book-chapters-strip a.is-active > i b { background: #100e0a; }
.book-chapters-strip a:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--reader-accent); outline-offset: -2px; }

.book-chapter-heading { display: flex; flex-direction: column; align-items: center; min-height: 225px; justify-content: center; padding: 34px 0 30px; text-align: center; }
.book-chapter-heading > span { color: var(--reader-accent); font: 700 17px/1 "EB Garamond", Garamond, Georgia, serif; letter-spacing: .06em; }
.book-chapter-heading h1 { max-width: 690px; margin: 12px 0 0; color: var(--reader-heading); font-size: clamp(2.15rem, 5vw, 3.45rem); font-weight: 600; letter-spacing: -.04em; line-height: .98; text-wrap: balance; }
.book-chapter-heading > div { display: flex; align-items: center; width: 98px; margin-top: 27px; }
.book-chapter-heading > div::before, .book-chapter-heading > div::after { content: ""; flex: 1; height: 1px; background: var(--reader-line); }
.book-chapter-heading > div i { width: 5px; height: 5px; margin: 0 10px; transform: rotate(45deg); background: var(--reader-accent); }

.book-chapter-copy { width: min(100%, 740px); min-height: 42vh; margin-inline: auto; }
.book-chapter-copy p { margin: 0 0 .62em; color: var(--reader-text); font-size: 1em; line-height: 1.68; text-align: justify; text-wrap: pretty; hyphens: auto; }
.book-chapter-copy p + p { text-indent: 1.45em; }
.book-chapter-copy > p.book-opening-paragraph { text-indent: 0; }
.book-chapter-dateline { margin-bottom: 1.1em !important; color: var(--reader-muted) !important; font-size: .84em !important; letter-spacing: .025em; text-align: center !important; text-indent: 0 !important; }
.book-dropcap-letter { float: left; margin: .09em .12em 0 0; color: var(--reader-accent); font-size: 4.25em; font-weight: 500; line-height: .72; }
.book-dropcap-punctuation { display: inline-block; margin-right: .08em; font-size: .28em; line-height: 1; vertical-align: top; }
.book-chapter-copy .book-opening-line { margin-bottom: 1.2em; color: var(--reader-heading); font-size: 1.12em; font-weight: 500; text-indent: 0; }
.book-chapter-copy blockquote { max-width: 610px; margin: 56px auto; padding: 4px 36px; border-left: 1px solid var(--reader-accent); color: var(--reader-muted); font-size: 1.08em; font-style: italic; line-height: 1.55; text-align: center; }
.book-ornament { width: 100%; margin-inline: auto; background-color: var(--reader-accent); background-repeat: no-repeat; background-position: center; background-size: contain; opacity: .82; transition: background-color 220ms ease; }
.book-ornament--start { width: min(100%, 195px); aspect-ratio: 1060 / 207; margin-bottom: 22px; -webkit-mask: url('../img/books/ornaments/chapter-start.png') center / contain no-repeat; mask: url('../img/books/ornaments/chapter-start.png') center / contain no-repeat; }
.book-ornament--scene { width: min(100%, 228px); aspect-ratio: 1353 / 186; margin-block: 20px 18px; -webkit-mask: url('../img/books/ornaments/scene-break.png') center / contain no-repeat; mask: url('../img/books/ornaments/scene-break.png') center / contain no-repeat; }
.book-ornament--end { width: min(100%, 175px); aspect-ratio: 1044 / 348; margin-top: 30px; -webkit-mask: url('../img/books/ornaments/chapter-end.png') center / contain no-repeat; mask: url('../img/books/ornaments/chapter-end.png') center / contain no-repeat; }
.book-ornament + p { text-indent: 0; }
.book-markdown h2, .book-markdown h3 { margin: 2.2em 0 .7em; color: var(--reader-heading); font-family: "EB Garamond", Garamond, Georgia, serif; font-weight: 700; line-height: 1.1; }
.book-markdown h2 { font-size: 1.8em; }
.book-markdown h3 { font-size: 1.35em; }
.book-markdown strong { color: var(--reader-heading); font-weight: 700; }
.book-markdown em { color: var(--reader-muted); }
.book-markdown hr { width: 90px; margin: 38px auto; border: 0; border-top: 1px solid var(--reader-accent); opacity: .65; }
.book-markdown ul, .book-markdown ol { margin: 1.2em 0; padding-left: 1.5em; color: var(--reader-text); line-height: 1.72; }
.book-markdown a { color: var(--reader-accent); }
.book-markdown img { display: block; width: auto; max-width: min(72%, 650px); height: auto; margin: 23px auto 27px; border: 0; filter: saturate(.82) contrast(1.02); }
.book-markdown p:has(> img:only-child) { margin: 0; text-indent: 0; }
.book-markdown p:has(> img[title="wide"]:only-child) { width: min(calc(100vw - 44px), 680px); max-width: none; margin-left: 50%; transform: translateX(-50%); }
.book-markdown img[title="wide"] { width: 100%; }
.book-markdown img[title="medium"] { width: min(100%, 430px); }
.book-markdown img[title="small"] { width: min(100%, 280px); }

.book-prologue { width: min(100%, 740px); margin: 55px auto 0; padding: 75px 0 20px; border-top: 1px solid var(--reader-line); text-align: center; }
.book-prologue > span { color: var(--reader-accent); font: 700 18px/1 "EB Garamond", Garamond, Georgia, serif; }
.book-prologue h2 { margin: 17px 0 38px; color: var(--reader-heading); font-size: clamp(2.5rem, 6vw, 4.2rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.book-prologue p { margin: 0; color: var(--reader-text); font-size: 1.05em; line-height: 1.65; text-align: left; }
.book-prologue p::first-letter { float: left; margin: .09em .12em 0 0; color: var(--reader-accent); font-size: 4.1em; line-height: .72; }
.book-prologue a { display: inline-flex; gap: 12px; align-items: center; margin-top: 42px; color: var(--reader-heading); font: 700 15px/1 "EB Garamond", Garamond, Georgia, serif; text-decoration: none; }
.book-prologue a b { color: var(--reader-accent); font-size: 1.3em; transition: transform 180ms ease; }
.book-prologue a:hover b { transform: translateX(4px); }

.book-chapter-navigation { width: min(100%, 740px); margin: 105px auto 0; padding: 52px 0 10px; border-top: 1px solid var(--reader-line); }
.book-chapter-navigation > p { margin: 0 0 25px; color: var(--reader-muted); font: 600 9px/1 Inter, sans-serif; letter-spacing: .18em; text-align: center; text-transform: uppercase; }
.book-chapter-navigation__select { position: relative; max-width: 510px; margin: auto; }
.book-chapter-navigation__select label { position: absolute; top: 10px; left: 17px; color: var(--reader-accent); font: 600 8px/1 Inter, sans-serif; letter-spacing: .14em; pointer-events: none; text-transform: uppercase; }
.book-chapter-navigation select { width: 100%; height: 64px; padding: 23px 48px 7px 16px; border: 1px solid var(--reader-line); border-radius: 2px; color: var(--reader-heading); background: var(--reader-surface); font: 500 16px/1.2 "EB Garamond", Garamond, serif; cursor: pointer; }
.book-chapter-navigation__buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; margin-top: 32px; }
.book-chapter-navigation__buttons a { display: flex; gap: 10px; align-items: center; color: var(--reader-muted); font: 600 9px/1.4 Inter, sans-serif; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.book-chapter-navigation__buttons a:last-child { justify-content: flex-end; text-align: right; }
.book-chapter-navigation__buttons a span { color: var(--reader-accent); font: 400 17px/1 Georgia, serif; }
.book-chapter-navigation__buttons a:hover { color: var(--reader-heading); }
.book-chapter-navigation__latest { color: var(--reader-muted); font: 500 9px/1.5 Inter, sans-serif; letter-spacing: .09em; text-align: right; text-transform: uppercase; }

.book-resume { position: fixed; z-index: 1003; right: 28px; bottom: 28px; display: grid; gap: 5px; min-width: 260px; padding: 16px 20px; transform: translateY(20px); border: 1px solid var(--reader-line); border-left: 2px solid var(--reader-accent); opacity: 0; color: var(--reader-heading); background: var(--reader-surface); box-shadow: 0 18px 50px rgba(0,0,0,.28); font: 500 12px/1.3 Inter, sans-serif; text-align: left; cursor: pointer; transition: opacity 250ms ease, transform 250ms ease; }
.book-resume.is-visible { transform: none; opacity: 1; }
.book-resume small { overflow: hidden; color: var(--reader-muted); font-size: 9px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }

@media (max-width: 700px) {
    .book-reader { padding-bottom: 80px; }
    .book-bar { grid-template-columns: 1fr auto; min-height: 60px; padding-inline: 14px; }
    .book-bar__identity { display: none; }
    .book-page { width: min(100% - 34px, 900px); }
    .book-masthead { padding-block: 52px 40px; }
    .book-masthead h1 { font-size: clamp(2.1rem, 10vw, 3.5rem); }
    .book-chapters-strip { margin-right: -17px; margin-left: -17px; }
    .book-chapters-strip a { flex-basis: 184px; min-height: 58px; padding-inline: 13px; }
    .book-chapter-heading { min-height: 205px; padding-block: 30px 27px; }
    .book-chapter-heading h1 { font-size: clamp(2.05rem, 10vw, 3.15rem); }
    .book-markdown img { max-width: 82%; }
    .book-chapter-copy p { line-height: 1.64; text-align: left; }
    .book-chapter-copy blockquote { margin: 44px 0; padding-inline: 22px; }
    .book-chapter-navigation__buttons { gap: 12px; }
    .book-chapter-navigation__buttons a { font-size: 8px; }
    .book-resume { right: 16px; bottom: 16px; left: 16px; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .book-reader *, .book-reader *::before, .book-reader *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}