:root {
  --paper: #eee2cf;
  --paper-light: #faf4e9;
  --paper-deep: #d7c4a8;
  --ink: #211814;
  --ink-soft: #423a34;
  --wine: #6d2030;
  --wine-dark: #351018;
  --gold: #a78650;
  --wood: #3c281f;
  --muted: #746c63;
  --line: rgba(28, 24, 21, .18);
  --shadow: 0 22px 50px rgba(46, 25, 19, .18);
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: Georgia, "Times New Roman", serif;
  --reading: Georgia, "Times New Roman", serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 18% 8%, rgba(109, 32, 48, .075), transparent 30rem),
    radial-gradient(circle at 82% 72%, rgba(60, 40, 31, .06), transparent 34rem),
    linear-gradient(115deg, rgba(255,255,255,.16), transparent 38%),
    var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .34;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E"),
    radial-gradient(circle, rgba(72,45,31,.18) .45px, transparent .7px);
  background-size: 180px 180px, 5px 5px;
  z-index: 20;
  mix-blend-mode: multiply;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 200; background: var(--paper-light); padding: .8rem 1rem; }
.skip-link:focus { top: 1rem; }
.shell { width: min(100% - 2.5rem, 78rem); margin-inline: auto; }

.site-header {
  position: relative;
  z-index: 30;
  border-bottom: 1px solid var(--line);
  background: rgba(243, 235, 221, .92);
  backdrop-filter: blur(10px);
}
.site-header__inner { min-height: 4.75rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { text-decoration: none; display: inline-grid; line-height: 1; letter-spacing: .1em; }
.brand strong { font: 700 1.05rem/1 var(--display); }
.brand span { margin-top: .35rem; color: var(--muted); font-size: .62rem; letter-spacing: .22em; }
.desktop-nav { display: none; align-items: center; gap: 1.8rem; }
.desktop-nav a { font-size: .9rem; text-decoration: none; position: relative; }
.desktop-nav a::after { content: ""; position: absolute; height: 1px; left: 0; right: 100%; bottom: -.45rem; background: var(--wine); transition: right .25s ease; }
.desktop-nav a[aria-current="page"]::after { right: 0; }
@media (hover: hover) { .desktop-nav a:hover::after { right: 0; } }
.icon-button, .menu-button {
  min-width: 2.75rem; min-height: 2.75rem; border: 1px solid var(--line); background: transparent; cursor: pointer;
}
.menu-button { display: inline-grid; place-items: center; gap: 4px; padding: .7rem; }
.menu-button span { width: 1.25rem; height: 1px; background: currentColor; display: block; }
.mobile-menu { width: 100%; max-width: none; height: 100%; max-height: none; border: 0; margin: 0; padding: 0; background: var(--wine-dark); color: var(--paper-light); }
.mobile-menu::backdrop { background: rgba(28, 24, 21, .75); }
.mobile-menu__inner { min-height: 100%; display: grid; align-content: space-between; padding: 1.5rem; }
.mobile-menu nav { display: grid; gap: .7rem; padding-block: 4rem; }
.mobile-menu nav a { font: 400 clamp(2.1rem, 9vw, 3.6rem)/1.1 var(--display); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.16); padding: .3rem 0 .8rem; }
.mobile-menu__top { display: flex; justify-content: space-between; align-items: center; }
.mobile-menu__close { border: 1px solid rgba(255,255,255,.35); color: inherit; background: transparent; min-height: 2.75rem; padding-inline: 1rem; }

.eyebrow { color: var(--wine); font-size: .75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.section-number { color: var(--gold); font: italic 1rem/1 var(--display); }
.display { margin: 0; font: 400 clamp(3.1rem, 12vw, 7.8rem)/.88 var(--display); letter-spacing: -.045em; }
.display em { color: var(--wine); font-weight: 400; }
.lead { font: 400 clamp(1.25rem, 3vw, 1.75rem)/1.35 var(--display); }
.muted { color: var(--muted); }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
.text-link { display: inline-flex; align-items: center; gap: .65rem; min-height: 2.75rem; color: var(--wine); text-decoration: none; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; font-size: .78rem; }
.text-link::after { content: "→"; font-size: 1.1rem; transition: transform .2s ease; }
@media (hover: hover) { .text-link:hover::after { transform: translateX(.3rem); } }
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-height: 3.2rem; padding: .75rem 1.2rem; border: 1px solid var(--wine); background: var(--wine); color: var(--paper-light); text-decoration: none; text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; font-weight: 700; cursor: pointer;
}
@media (hover: hover) { .button:hover { background: var(--wine-dark); } }
.button--ghost { background: transparent; color: var(--wine); }
@media (hover: hover) { .button--ghost:hover { color: var(--paper-light); } }

.opening { position: fixed; inset: 0; z-index: 100; overflow: hidden; display: grid; place-items: center; background: var(--wine-dark); color: var(--paper-light); }
.opening[hidden] { display: none; }
.curtain { position: absolute; top: 0; bottom: 0; width: 52%; background: repeating-linear-gradient(90deg, #40121b 0%, #721f31 8%, #49131e 16%); box-shadow: inset -20px 0 35px rgba(0,0,0,.28), inset 16px 0 28px rgba(255,255,255,.035); will-change: transform; }
.curtain--left { left: 0; border-right: 1px solid rgba(211,181,126,.26); }
.curtain--right { right: 0; transform: scaleX(-1); border-left: 1px solid rgba(211,181,126,.26); }
.opening__brand { position: relative; z-index: 2; text-align: center; opacity: 0; }
.opening__brand strong { display: block; font: 500 clamp(2rem, 9vw, 5rem)/1 var(--display); letter-spacing: .08em; }
.opening__brand span { display: block; margin-top: 1rem; color: #d5bc90; font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; }

.hero { min-height: calc(100svh - 4.75rem); display: grid; align-items: center; padding-block: 3rem; overflow: hidden; }
.hero__grid { display: grid; gap: 3.5rem; }
.hero__copy { display: grid; gap: 1.5rem; align-content: center; }
.hero__copy .lead { max-width: 31rem; }
.hero__meta { display: flex; align-items: center; gap: 1rem; color: var(--muted); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; }
.hero__meta::before { content: "01"; color: var(--wine); font: italic 1rem/1 var(--display); }
.hero-book-wrap { display: grid; place-items: center; perspective: 1000px; }
.hero-book { width: min(62vw, 17rem); aspect-ratio: 2/3; transform: rotateY(-12deg) rotateX(2deg); box-shadow: 30px 28px 34px rgba(55, 16, 24, .2); transition: transform .3s ease; }
@media (hover: hover) { .hero-book:hover { transform: rotateY(-7deg) rotateX(1deg) translateY(-5px); } }

.cover { position: relative; isolation: isolate; aspect-ratio: 2/3; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 1rem; color: #f7f0e5; background: var(--cover, var(--wine)); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 15px 30px rgba(37,25,19,.2); }
.cover { background:
    linear-gradient(90deg, rgba(0,0,0,.28) 0 7%, transparent 8% 100%),
    linear-gradient(145deg, rgba(255,255,255,.09), transparent 42%),
    var(--cover, var(--wine));
  border-color: color-mix(in srgb, var(--cover-accent, #d3b77e) 42%, transparent);
  box-shadow: 0 18px 34px rgba(37,25,19,.25), inset 3px 0 0 rgba(255,255,255,.05);
}
.cover::before { content: ""; position: absolute; inset: .55rem; z-index: -1; border: 1px solid color-mix(in srgb, var(--cover-accent, #d3b77e) 62%, transparent); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.cover::after { content: ""; position: absolute; inset: 0; z-index: -2; opacity: .22; background-image: repeating-linear-gradient(90deg, transparent 0 3px, rgba(255,255,255,.12) 4px, transparent 5px 8px), repeating-linear-gradient(0deg, transparent 0 4px, rgba(0,0,0,.09) 5px, transparent 6px 10px); mix-blend-mode: soft-light; }
.cover__author { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; }
.cover__title { font: 500 clamp(1.35rem, 5vw, 2.4rem)/.95 var(--display); text-wrap: balance; }
.cover__year { color: var(--cover-accent, #d3b77e); font: italic .82rem/1 var(--display); }
.cover--red { --cover: #571825; --cover-accent: #d2a45f; }
.cover--green { --cover: #183c34; --cover-accent: #c0a56b; }
.cover--blue { --cover: #203651; --cover-accent: #b9a675; }
.cover--ochre { --cover: #75401f; --cover-accent: #e0b267; }
.cover--violet { --cover: #43263e; --cover-accent: #c6a06c; }
.cover--black { --cover: #25221f; --cover-accent: #c6a56e; }

.editorial-section { padding-block: 5rem; border-top: 1px solid var(--line); }
.section-head { display: grid; gap: 1rem; margin-bottom: 2.5rem; }
.section-head h2 { margin: 0; font: 400 clamp(2.3rem, 7vw, 4.5rem)/.98 var(--display); }
.featured { display: grid; gap: 2.5rem; align-items: center; }
.featured__cover { width: min(58vw, 18rem); margin-inline: auto; }
.featured__copy h3 { margin: .4rem 0 .75rem; font: 400 clamp(2.5rem, 8vw, 5rem)/.95 var(--display); }
.featured__facts { display: flex; flex-wrap: wrap; gap: .5rem 1rem; color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; }

.shelf { overflow: hidden; }
.shelf__track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(10rem, 68%); gap: 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .3rem 1.25rem 2rem; margin-inline: -1.25rem; scrollbar-width: thin; }
.book-card { scroll-snap-align: start; display: block; text-decoration: none; }
.book-card .cover { transition: transform .22s ease, box-shadow .22s ease; }
@media (hover: hover) { .book-card:hover .cover { transform: translateY(-.4rem); box-shadow: 0 22px 38px rgba(37,25,19,.26); } }
.book-card h3 { margin: .95rem 0 .15rem; font: 500 1.3rem/1.12 var(--display); }
.book-card p { margin: 0; color: var(--muted); font-size: .86rem; }
.book-card:active .cover { transform: scale(.98); }
.book-card__access { display: inline-block; margin-top: .45rem; color: var(--wine); font-size: .68rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }

.movement-list { border-top: 1px solid var(--line); }
.movement-row { display: grid; grid-template-columns: 4rem 1fr; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.movement-row time { color: var(--wine); font: italic 1rem/1.4 var(--display); }
.movement-row strong { display: block; font: 400 clamp(1.45rem, 5vw, 2.2rem)/1 var(--display); }
.movement-row span { color: var(--muted); font-size: .88rem; }

.page-hero { padding: 4.5rem 0 2.5rem; }
.page-hero h1 { margin: .6rem 0 1rem; font: 400 clamp(3.3rem, 12vw, 7rem)/.9 var(--display); letter-spacing: -.04em; }
.page-hero p { max-width: 40rem; }
.catalog-tools { display: grid; gap: 1rem; padding: 1.2rem 0; border-block: 1px solid var(--line); }
.search-field { position: relative; }
.search-field input { width: 100%; min-height: 3.2rem; padding: .8rem 1rem .8rem 2.8rem; border: 1px solid var(--line); border-radius: 0; background: var(--paper-light); color: var(--ink); }
.search-field::before { content: "⌕"; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--wine); font-size: 1.35rem; }
.filter-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.filter-chip { min-height: 2.75rem; padding: .55rem .9rem; border: 1px solid var(--line); background: transparent; cursor: pointer; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.filter-chip[aria-pressed="true"] { background: var(--wine); color: var(--paper-light); border-color: var(--wine); }
.result-count { color: var(--muted); font-size: .86rem; }
.catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2rem 1rem; padding-block: 2.5rem 5rem; }
.catalog-grid .book-card { content-visibility: auto; contain-intrinsic-size: 22rem; }
.empty-state { grid-column: 1/-1; border-block: 1px solid var(--line); padding: 3rem 0; }
.curation-note { margin: -2rem 0 5rem; padding: 1.25rem 0 1.25rem 1.25rem; border-left: 2px solid var(--gold); max-width: 52rem; color: var(--ink-soft); }
.curation-note strong { font-family: var(--display); font-size: 1.25rem; }
.curation-note p { margin: .35rem 0 0; }

.book-detail { display: grid; gap: 2.5rem; padding-block: 3rem 5rem; }
.book-detail__cover { width: min(65vw, 20rem); margin-inline: auto; perspective: 900px; }
.book-detail__cover .cover { transform: rotateY(-7deg); transform-origin: left center; }
.book-detail__copy h1 { margin: .4rem 0 .4rem; font: 400 clamp(3.2rem, 12vw, 7rem)/.9 var(--display); letter-spacing: -.045em; }
.book-detail__author { font: italic 1.35rem/1.3 var(--display); color: var(--wine); }
.book-detail__summary { max-width: 38rem; font: 400 1.2rem/1.55 var(--display); }
.detail-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.detail-grid { display: grid; gap: 2rem; padding-block: 3rem 6rem; border-top: 1px solid var(--line); }
.detail-block h2 { margin: 0 0 .75rem; color: var(--wine); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; }
.detail-block p { margin: 0; max-width: 42rem; }
.favorite-button[data-saved="true"]::before { content: "♥"; }
.favorite-button[data-saved="false"]::before { content: "♡"; }

html.is-diving, html.is-diving body { overflow: hidden; overscroll-behavior: none; }
.dive-overlay { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; overflow: hidden; isolation: isolate; perspective: 1600px; opacity: 0; visibility: hidden; pointer-events: none; background: transparent; }
.dive-overlay.is-active { visibility: visible; pointer-events: auto; }
.dive-backdrop { position: absolute; inset: -5%; z-index: -2; background:
    radial-gradient(circle at 50% 42%, rgba(245,235,216,.94) 0 26%, rgba(91,28,40,.18) 64%, rgba(30,15,17,.88) 118%),
    repeating-linear-gradient(90deg, rgba(96,67,43,.035) 0 1px, transparent 1px 5px),
    var(--paper-light); transform-origin: center; }
.dive-backdrop::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at center, transparent 20%, rgba(34,15,18,.28) 100%); }
.dive-book { position: relative; z-index: 2; width: min(64vw, 20rem); aspect-ratio: 2/3; perspective: 1500px; transform-style: preserve-3d; will-change: transform; }
.dive-book__volume { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.dive-book__back, .dive-book__page-block, .dive-book__front, .dive-sheet, .dive-spread { position: absolute; inset: 0; transform-style: preserve-3d; }
.dive-book__back { z-index: 0; translate: 0 0 -16px; border: 1px solid rgba(255,255,255,.12); background: color-mix(in srgb, var(--wine) 82%, #160b0d); box-shadow: 0 35px 70px rgba(22,10,12,.42); }
.dive-book__page-block { inset: 1.1% .5% 1.1% 2.8%; z-index: 1; translate: 0 0 -6px; border-radius: 0 3px 3px 0; background: repeating-linear-gradient(0deg, #eadfc9 0 2px, #d4c5a8 2px 3px); box-shadow: 8px 0 11px rgba(28,13,12,.22), inset -4px 0 8px rgba(78,52,28,.13); }
.dive-spread { left: -100%; width: 200%; z-index: 2; border-radius: 2px 4px 4px 2px; background:
    linear-gradient(90deg, #e5d7bd 0, #f6eddd 42%, #c6b18c 49.4%, #9b7d55 50%, #cbb792 50.6%, #f8efdf 58%, #eadcc4 100%);
  box-shadow: 0 26px 45px rgba(31,14,14,.25); transform: translateZ(-1px); }
.dive-spread::before, .dive-spread::after { content: ""; position: absolute; top: 12%; bottom: 12%; width: 36%; opacity: .22; background: repeating-linear-gradient(0deg, transparent 0 12px, rgba(68,43,27,.32) 12px 13px); }
.dive-spread::before { left: 8%; }
.dive-spread::after { right: 8%; }
.dive-sheet { inset: .8% 1% .8% 2%; z-index: calc(4 + var(--sheet-index)); transform-origin: 0 50%; transform: translateZ(calc(var(--sheet-index) * 1px)); border-radius: 0 3px 3px 0; border: 1px solid rgba(111,80,47,.09); background:
    linear-gradient(90deg, rgba(121,83,45,.12), transparent 8% 94%, rgba(90,57,31,.12)),
    repeating-linear-gradient(0deg, transparent 0 14px, rgba(83,54,33,.13) 14px 15px),
    #f4ead8; backface-visibility: visible; will-change: transform, opacity; }
.dive-book__front { z-index: 20; transform: translateZ(10px); transform-origin: 0 50%; will-change: transform, opacity; }
.dive-book__front::after { content: ""; position: absolute; inset: 0; z-index: -1; transform: rotateY(180deg) translateZ(1px); backface-visibility: hidden; border: 1px solid rgba(100,68,41,.16); background:
    linear-gradient(90deg, rgba(72,42,25,.2), transparent 9%),
    repeating-linear-gradient(0deg, transparent 0 15px, rgba(83,54,33,.1) 15px 16px),
    #eee2cd; }
.dive-book__cover-art { width: 100%; height: 100%; aspect-ratio: auto; transform: none; transform-origin: 50% 50%; backface-visibility: hidden; will-change: transform; }
.dive-light { position: absolute; inset: -15%; z-index: 30; pointer-events: none; opacity: 0; background: radial-gradient(circle at center, #fffdf7 0 32%, rgba(255,252,241,.97) 55%, rgba(255,252,241,0) 78%); }
.dive-status { position: absolute; left: 50%; bottom: max(1.5rem, env(safe-area-inset-bottom)); z-index: 31; translate: -50% 0; color: rgba(255,248,234,.82); font-size: .75rem; font-weight: 750; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.dive-overlay.is-fallback { background: var(--paper-light); }

@media (min-width: 48rem) {
  .dive-book { width: min(31vw, 21rem); }
}

.reader-page { background: #f3ebdd; }
.reader-page[data-theme="light"] { background: #fffdfa; }
.reader-page[data-theme="dark"] { background: #191714; color: #e8e0d4; color-scheme: dark; --line: rgba(232,224,212,.18); --muted: #b7aea3; --paper-light: #25211d; --ink: #e8e0d4; --wine: #d68a98; }
.reader-page::before { opacity: .13; }
.reader-header { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--paper-light) 93%, transparent); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.reader-header__inner { min-height: 4rem; display: grid; grid-template-columns: 3rem 1fr auto; align-items: center; gap: .5rem; }
.reader-header__title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center; font: 500 1rem/1.2 var(--display); }
.reader-tools { display: flex; gap: .35rem; }
.reader-progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: var(--progress, 0%); background: var(--wine); transition: width .1s linear; }
.reader { width: min(100% - 2.5rem, 45rem); margin-inline: auto; padding: 5rem 0 6rem; font-family: var(--reading); font-size: var(--reader-size, 1.2rem); line-height: var(--reader-leading, 1.85); }
.reader__book { text-align: center; color: var(--muted); font: 700 .72rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.reader h1 { margin: 3rem 0 .6rem; text-align: center; font: 400 clamp(2.7rem, 10vw, 5.2rem)/.95 var(--display); }
.reader__chapter-title { text-align: center; font-style: italic; color: var(--wine); }
.reader__meta { margin-top: .8rem; text-align: center; color: var(--muted); font: 700 .68rem/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.reader__ornament { display: grid; place-items: center; margin: 2.5rem auto; color: var(--gold); }
.reader__ornament::before { content: "◆"; font-size: .8rem; }
.reader p { margin: 0 0 1.4em; }
.reader-content > p:first-child:not(.reader-loading):not(.reader-error)::first-letter { float: left; color: var(--wine); font: 400 4.8rem/.75 var(--display); padding: .1rem .55rem 0 0; }
.reader-loading, .reader-error { text-align: center; color: var(--muted); font-family: var(--sans); font-size: 1rem; }
.reader-navigation { display: grid; gap: 1.5rem; margin-top: 4rem; }
.reader-next { padding-top: 2rem; border-top: 1px solid var(--line); display: grid; gap: .6rem; text-decoration: none; }
.reader-next[hidden] { display: none; }
.reader-next span { color: var(--muted); font: 700 .7rem/1.2 var(--sans); letter-spacing: .15em; text-transform: uppercase; }
.reader-next strong { font: 400 2rem/1 var(--display); }
.reader-next:not(.reader-next--previous) { text-align: right; }
.reader-source { margin-top: 4rem; font-family: var(--sans); line-height: 1.6; }
.source-links { display: flex; flex-wrap: wrap; gap: .65rem 1rem; }
.toc-dialog { max-height: min(82vh, 52rem); }
.toc-dialog .settings-dialog__inner { max-height: none; overflow: visible; }
.settings-dialog { width: min(calc(100% - 2rem), 29rem); border: 1px solid var(--line); background: var(--paper-light); color: var(--ink); padding: 0; }
.settings-dialog::backdrop { background: rgba(28,24,21,.66); }
.settings-dialog__inner { padding: 1.5rem; }
.settings-dialog__top { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 1rem; }
.settings-group { display: grid; gap: .75rem; padding-block: 1.1rem; border-bottom: 1px solid var(--line); }
.settings-group label, .settings-group legend { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.segmented { display: grid; grid-template-columns: repeat(3, 1fr); }
.segmented button { min-height: 2.75rem; border: 1px solid var(--line); background: transparent; cursor: pointer; }
.segmented button + button { border-left: 0; }
.segmented button[aria-pressed="true"] { background: var(--wine); color: var(--paper-light); }
.toc-list { display: grid; margin-top: 1rem; border-top: 1px solid var(--line); }
.toc-list a { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: .7rem; padding: .9rem 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.toc-list a[aria-current="page"] { color: var(--wine); font-weight: 700; }
.toc-list span { color: var(--muted); font: italic .9rem/1.5 var(--display); white-space: nowrap; }

.timeline { position: relative; margin-block: 3rem 6rem; }
.timeline::before { content: ""; position: absolute; top: 0; bottom: 0; left: 1.4rem; width: 1px; background: var(--line); }
.timeline-item { position: relative; display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding-bottom: 3rem; }
.timeline-item::before { content: ""; width: .65rem; height: .65rem; background: var(--wine); border-radius: 50%; margin: .4rem 0 0 1.1rem; z-index: 1; }
.timeline-item time { color: var(--wine); font: italic 1rem/1 var(--display); }
.timeline-item h2 { margin: .3rem 0 .5rem; font: 400 2rem/1 var(--display); }
.timeline-item p { margin: 0; color: var(--muted); }

.content-list { display: grid; gap: 0; border-top: 1px solid var(--line); margin-block: 2rem 6rem; }
.content-row { display: grid; gap: .5rem; padding: 1.4rem 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.content-row strong { font: 400 1.8rem/1.1 var(--display); }
.content-row span { color: var(--muted); }

.source-panel { margin: 1.5rem 0 0; padding: 1.2rem 1.25rem; border-left: 3px solid var(--gold); background: rgba(250,244,233,.58); }
.source-panel strong { display: block; margin-bottom: .25rem; font-family: var(--display); font-size: 1.08rem; }
.source-panel p { margin: 0 0 .7rem; color: var(--ink-soft); font-size: .92rem; }
.source-panel a { color: var(--wine); font-weight: 700; }
.reader-page[data-theme="dark"] .source-panel { background: rgba(255,255,255,.04); }

.site-footer { color: #eadfce; background: var(--wood); padding: 4rem 0 2rem; }
.footer-grid { display: grid; gap: 3rem; }
.site-footer .brand span, .site-footer .muted { color: #bcae9d; }
.footer-nav { display: grid; gap: .65rem; }
.footer-nav a { text-decoration: none; }
.footer-note { padding-top: 2rem; margin-top: 3rem; border-top: 1px solid rgba(255,255,255,.15); font-size: .75rem; color: #bcae9d; }

@media (min-width: 48rem) {
  .shell { width: min(100% - 4rem, 78rem); }
  .desktop-nav { display: flex; }
  .menu-button { display: none; }
  .hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(18rem, .75fr); align-items: center; }
  .featured { grid-template-columns: minmax(16rem, .8fr) minmax(0, 1.2fr); gap: 5rem; }
  .shelf__track { grid-auto-columns: minmax(10rem, 18%); margin-inline: 0; padding-inline: 0; }
  .movement-row { grid-template-columns: 7rem minmax(15rem,.8fr) 1fr; align-items: baseline; }
  .catalog-tools { grid-template-columns: 1fr auto; align-items: center; }
  .catalog-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 3rem 1.8rem; }
  .book-detail { grid-template-columns: minmax(17rem,.85fr) minmax(0,1.15fr); align-items: center; gap: 6rem; padding-block: 5rem 7rem; }
  .detail-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 4rem 6rem; }
  .reader-navigation { grid-template-columns: repeat(2, minmax(0,1fr)); }
  [data-reader-next] { grid-column: 2; }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
  .content-row { grid-template-columns: minmax(16rem,.8fr) 1.2fr; align-items: baseline; }
}

@media (min-width: 70rem) {
  .catalog-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .hero-book { width: 20rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}