.reader-hero { border-bottom: 1px solid var(--line); background: radial-gradient(ellipse at 78% 35%, #293847, transparent 46%), linear-gradient(115deg, #0b111a, #182637 65%, #0b111a); }
.reader-hero-inner { display: grid; grid-template-columns: minmax(0,1fr) 32%; align-items: center; gap: 5rem; min-height: 650px; padding-block: 10.5rem 6rem; }
.reader-hero-copy { max-width: 690px; }
.reader-back { display: inline-flex; gap: .7rem; margin-bottom: 3.5rem; color: #b8cad7; font: 700 .64rem/1.3 var(--sans); letter-spacing: .16em; text-decoration: none; text-transform: uppercase; }
.reader-back:hover { color: #fff; }
.reader-hero h1 { margin: 1rem 0 .4rem; font: 500 clamp(4.9rem,8vw,8.4rem)/.83 var(--serif); letter-spacing: -.055em; }
.reader-byline { margin: 0; color: #d5e1e9; font: italic 400 1.7rem/1.2 var(--serif); }
.reader-intro { max-width: 500px; margin: 1.8rem 0 2rem; color: #bac9d5; font: .95rem/1.85 var(--sans); }
.reader-hero-cover { justify-self: center; width: min(100%,300px); transform: rotate(3deg); }
.reader-hero-cover img { width: 100%; height: auto; box-shadow: 20px 28px 45px rgba(0,0,0,.45); }

.reader-layout { display: grid; grid-template-columns: minmax(190px,235px) minmax(0,790px); justify-content: center; align-items: start; gap: clamp(2rem,5vw,5rem); padding-block: 6rem 8rem; }
.reader-toc { position: sticky; top: 2rem; max-height: calc(100vh - 4rem); overflow: auto; padding: .5rem .5rem 1rem 0; }
.reader-toc .eyebrow { margin-bottom: 1.3rem; }
.reader-toc ol, .reader-mobile-toc ol { margin: 0; padding: 0; list-style: none; }
.reader-toc li a { display: block; padding: .65rem 0 .65rem .9rem; border-left: 1px solid rgba(185,202,216,.25); color: #b1c0cc; font: 500 .73rem/1.5 var(--sans); text-decoration: none; }
.reader-toc li a:hover { border-left-color: var(--accent); color: #fff; }
.toc-series { display: inline-flex; gap: .4rem; margin-top: 1.5rem; color: #d9e6ee; font: 700 .67rem/1.5 var(--sans); letter-spacing: .06em; text-decoration: none; }
.toc-series:hover { text-decoration: underline; }
.reader-main { min-width: 0; }
.reader-mobile-toc { display: none; }
.reader-manuscript { padding: clamp(3rem,6vw,5.5rem) clamp(2.6rem,6vw,5.5rem) 4.5rem; background: #f0f2f1; color: #17212b; box-shadow: 15px 30px 55px rgba(0,0,0,.2); }
.reader-story-label { margin: 0; color: #536979; font: 700 .62rem/1.5 var(--sans); letter-spacing: .2em; text-align: center; text-transform: uppercase; }
.reader-story-title { margin: 1rem 0 0; font: 500 clamp(3.5rem,6vw,5rem)/.95 var(--serif); letter-spacing: -.035em; text-align: center; }
.reader-author { margin: .5rem 0 5rem; color: #536979; font: italic 1.3rem/1.2 var(--serif); text-align: center; }
.reader-chapters section { scroll-margin-top: 2rem; }
.reader-chapters section + section { margin-top: 5rem; padding-top: 4.5rem; border-top: 1px solid #c6d0d5; }
.reader-chapters h2 { margin: 0 0 2.6rem; color: #17212b; font: 500 clamp(2.3rem,4vw,3rem)/1.03 var(--serif); letter-spacing: -.025em; text-align: center; }
.reader-chapters .chapter-dateline { margin: -1.7rem 0 2.5rem; color: #607482; font: italic 1rem/1.4 var(--serif); text-align: center; }
.reader-chapters p { margin: 0 0 1.05em; font: 1.08rem/1.8 Georgia, 'Times New Roman', serif; overflow-wrap: break-word; }
.reader-chapters .scene-break { margin-block: 2.5rem; color: #748894; letter-spacing: .45em; text-align: center; }
.reader-endmark { margin: 4rem 0 0; color: #667f8e; font: 2rem/1 var(--serif); text-align: center; }
.reader-finish { padding: 5rem 1rem 0; text-align: center; }
.reader-finish h2 { margin: 1rem auto 1.2rem; font: 500 clamp(3.1rem,5vw,4.6rem)/.94 var(--serif); letter-spacing: -.04em; }
.reader-finish h2 em { color: var(--accent); font-weight: 400; }
.reader-finish > p:not(.eyebrow) { max-width: 450px; margin: 0 auto 2rem; color: #b5c4cf; font: .9rem/1.8 var(--sans); }
.reader-top { display: block; width: fit-content; margin: 2rem auto 0; color: #b5c8d7; font: 700 .65rem/1.3 var(--sans); letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.reader-top:hover { color: #fff; }

@media (max-width: 900px) {
  .reader-hero-inner { gap: 2rem; }
  .reader-layout { grid-template-columns: minmax(145px,190px) minmax(0,1fr); gap: 2rem; }
  .reader-toc li a { font-size: .67rem; }
}
@media (max-width: 760px) {
  .reader-hero-inner { grid-template-columns: 1fr; gap: 3rem; min-height: 0; padding-block: 8rem 5rem; }
  .reader-back { margin-bottom: 2.8rem; }
  .reader-hero h1 { font-size: clamp(4.2rem,11vw,6rem); }
  .reader-hero-cover { width: min(58%,260px); }
  .reader-layout { display: block; padding-block: 3rem 6rem; }
  .reader-toc { display: none; }
  .reader-mobile-toc { display: block; margin-bottom: 1.5rem; border: 1px solid var(--line); background: #172230; }
  .reader-mobile-toc summary { display: flex; justify-content: space-between; padding: 1rem 1.2rem; cursor: pointer; font: 700 .7rem/1.3 var(--sans); letter-spacing: .13em; text-transform: uppercase; }
  .reader-mobile-toc ol { columns: 2; gap: 1rem; padding: 0 1.2rem 1.2rem; }
  .reader-mobile-toc li { break-inside: avoid; margin-bottom: .7rem; }
  .reader-mobile-toc a { color: #d7e3ec; font: .72rem/1.4 var(--sans); text-decoration: none; }
  .reader-mobile-toc a:hover { text-decoration: underline; }
}
@media (max-width: 540px) {
  .reader-hero h1 { font-size: clamp(3.9rem,13vw,5.2rem); }
  .reader-hero-cover { width: min(70%,225px); }
  .reader-manuscript { padding: 3.2rem 1.45rem 3rem; }
  .reader-story-title { font-size: 3.5rem; }
  .reader-author { margin-bottom: 3.5rem; }
  .reader-chapters h2 { font-size: 2.5rem; }
  .reader-chapters p { font-size: 1.035rem; line-height: 1.78; }
  .reader-chapters section + section { margin-top: 4rem; padding-top: 3.5rem; }
  .reader-mobile-toc ol { columns: 1; }
}