.reader-page 
{ --read-bg:#f6f1f3;
  --read-panel
  :#fffaf7; 
  --read-ink
  :#332b43;
  --read-muted
  :#746c7b;
  --read-accent
  :#9b78a9;
   --read-border:#d9cfdf; min-height:100vh; background:var(--read-bg); color:var(--read-ink); }
.reader-page--blood { --read-bg:#171118; --read-panel:#211720; --read-ink:#f7ece9; --read-muted:#c0adb4; --read-accent:#f06476; --read-border:#ffffff24; }
.reader-page--choice { --read-bg:#f7f2f5; --read-panel:#fffaf7; --read-ink:#342a45; --read-muted:#746a7a; --read-accent:#a779a6; --read-border:#d8cedd; }
.reader-header { position:relative; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:23px 6vw; border-bottom:1px solid var(--read-border); background:color-mix(in srgb, var(--read-bg) 94%, transparent); }
.reader-brand { color:var(--read-ink); font:800 18px var(--display); letter-spacing:.08em; }
.reader-brand span { color:var(--read-muted); font:600 9px var(--body); letter-spacing:.16em; }
.reader-header nav { display:flex; flex-wrap:wrap; gap:22px; }
.reader-header nav a,.reader-footer a { color:var(--read-muted); font-size:10px; letter-spacing:.08em; transition:color .2s; }
.reader-header nav a:hover,.reader-footer a:hover { color:var(--read-accent); }
.reader-hero { position:relative; display:grid; min-height:610px; grid-template-columns:1.1fr .9fr; align-items:center; gap:5vw; overflow:hidden; padding:80px 10vw; background:radial-gradient(ellipse at 78% 43%,color-mix(in srgb,var(--read-accent) 25%,transparent),transparent 48%),linear-gradient(135deg,var(--read-panel),var(--read-bg) 72%); }
.reader-page--blood .reader-hero { background:radial-gradient(ellipse at 78% 45%,#952b494d,transparent 48%),linear-gradient(135deg,#22141f,#130f16 72%); }
.reader-hero-copy { position:relative; z-index:2; max-width:650px; }
.reader-eyebrow,.reader-series,.chapter-kicker { color:var(--read-accent); font-size:9px; font-weight:700; letter-spacing:.2em; }
.reader-series { color:var(--read-muted); }
.reader-series span { padding:0 5px; color:var(--read-accent); }
.reader-hero h1 { margin:24px 0 15px; color:var(--read-ink); font:900 clamp(58px,8vw,110px)/.88 var(--display); letter-spacing:-.045em; text-transform:uppercase; }
.reader-hero h1 em { color:var(--read-accent); font-style:normal; }
.reader-subtitle { color:var(--read-ink); font-size:17px; }
.reader-description { max-width:450px; color:var(--read-muted); font-size:12px; line-height:1.9; }
.reader-start { display:inline-flex; align-items:center; gap:24px; margin-top:22px; padding:14px 17px; border:1px solid color-mix(in srgb,var(--read-accent) 60%,transparent); color:var(--read-ink); font-size:9px; font-weight:700; letter-spacing:.16em; transition:background .2s,transform .2s; }
.reader-start:hover { transform:translateY(-2px); background:color-mix(in srgb,var(--read-accent) 13%,transparent); }
.reader-start span { color:var(--read-accent); font-size:16px; }
.reader-art { position:relative; z-index:1; display:grid; min-height:420px; margin:0; place-items:center; }
.reader-art::before { position:absolute; width:min(34vw,430px); aspect-ratio:1; border:1px solid color-mix(in srgb,var(--read-accent) 38%,transparent); border-radius:50%; box-shadow:0 0 70px color-mix(in srgb,var(--read-accent) 14%,transparent),inset 0 0 60px color-mix(in srgb,var(--read-accent) 9%,transparent); content:''; }
.reader-art img { position:relative; z-index:1; width:100%; max-height:470px; object-fit:contain; filter:drop-shadow(0 20px 34px #0006); }
.reader-art figcaption { position:absolute; z-index:2; right:0; bottom:5%; color:var(--read-muted); font-size:8px; letter-spacing:.2em; }
.reader-mark { position:absolute; top:12%; right:28%; color:color-mix(in srgb,var(--read-accent) 10%,transparent); font:400 360px/1 var(--display); animation:reader-turn 55s linear infinite; }
.reader-page--blood .reader-mark { color:#f0647610; }
.reader-layout { display:grid; grid-template-columns:minmax(190px,250px) minmax(0,760px); justify-content:center; gap:clamp(35px,7vw,100px); padding:85px 6vw 105px; }
.reader-toc { position:sticky; top:28px; align-self:start; padding:24px 20px; border:1px solid var(--read-border); background:color-mix(in srgb,var(--read-panel) 88%,transparent); }
.reader-toc .reader-eyebrow { margin-top:0; }
.reader-toc>a:not(.reader-return) { display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--read-border); color:var(--read-ink); font-size:11px; }
.reader-toc>a span { color:var(--read-accent); font-size:9px; }
.reader-toc .reader-return { display:block; margin-top:24px; color:var(--read-muted); font-size:9px; line-height:1.7; }
.reader-content { min-width:0; }
.reader-note { display:flex; gap:15px; margin-bottom:48px; padding:20px 22px; border-left:2px solid var(--read-accent); background:color-mix(in srgb,var(--read-accent) 12%,transparent); color:var(--read-muted); }
.reader-note>span { color:var(--read-accent); }
.reader-note p { margin:0; font-size:11px; line-height:1.8; }
.reader-note strong { color:var(--read-ink); }
.reader-note code { color:var(--read-accent); }
.book-chapter { padding:36px 0 55px; border-top:1px solid var(--read-border); scroll-margin-top:30px; }
.chapter-kicker { color:var(--read-accent); }
.book-chapter h2 { margin:14px 0 25px; color:var(--read-ink); font:700 clamp(28px,4vw,42px)/1.15 var(--display); }
.chapter-placeholder { min-height:170px; padding:25px; border:1px dashed color-mix(in srgb,var(--read-accent) 52%,transparent); color:var(--read-muted); font-size:13px; line-height:2; }
.reader-end-link { display:inline-block; margin-top:15px; color:var(--read-muted); font-size:9px; letter-spacing:.15em; }
.reader-footer { display:flex; justify-content:space-between; gap:20px; padding:25px 6vw; border-top:1px solid var(--read-border); color:var(--read-muted); }
.reader-footer span { font-size:8px; letter-spacing:.14em; }
@keyframes reader-turn { to { transform:rotate(360deg); } }
@media(max-width:760px) {
  .reader-header { align-items:flex-start; flex-direction:column; padding:19px 6vw; }
  .reader-header nav { gap:15px; }
  .reader-hero { min-height:0; grid-template-columns:1fr; gap:10px; padding:65px 8vw 42px; }
  .reader-hero h1 { font-size:clamp(56px,14vw,88px); }
  .reader-art { min-height:310px; }
  .reader-art img { max-height:340px; }
  .reader-art::before { width:min(70vw,320px); }
  .reader-art figcaption { right:5%; }
  .reader-mark { top:39%; right:5%; font-size:230px; }
  .reader-layout { grid-template-columns:1fr; gap:30px; padding:52px 8vw 70px; }
  .reader-toc { position:static; }
  .reader-footer { align-items:flex-start; flex-direction:column; }
}
@media(prefers-reduced-motion:reduce) { .reader-mark { animation:none; } }

.reader-page--blood .book-chapter > p:not(.chapter-kicker) { margin:0 0 1.2em; color:var(--read-ink); font-size:13px; line-height:2; }
.reader-page--blood .book-chapter .chapter-epigraph { margin:0 0 30px; padding:17px 20px; border-left:2px solid var(--read-accent); color:var(--read-muted); font-style:italic; }
.reader-page--blood .book-chapter strong { color:#ff9aa5; }
.reader-page--blood .book-chapter em { color:#f2d8dc; }
.reader-page--blood .book-chapter .scene-break { width:54px; margin:34px auto; border:0; border-top:1px solid var(--read-accent); opacity:.65; }

/* Printed-novel treatment for the Blood reader */
.reader-page--blood .reader-layout { background:radial-gradient(ellipse at 50% 10%,#f4ead7 0,#e7dcc8 58%,#ddd0ba 100%); }
.reader-page--blood .reader-content { padding:clamp(38px,6vw,78px) clamp(26px,8vw,86px); border:1px solid #cfc1a9; background-color:#f8f1e3; background-image:linear-gradient(90deg,#a98c6720,transparent 2.5%,transparent 97%,#a98c6718),repeating-linear-gradient(0deg,#806b4b05 0 1px,transparent 1px 5px); box-shadow:0 18px 48px #39281624,0 2px 7px #39281612; color:#34291f; }
.reader-page--blood .book-chapter { padding:54px 0 62px; border-top:1px solid #d8cbb5; scroll-margin-top:28px; }
.reader-page--blood .book-chapter:first-child { padding-top:0; border-top:0; }
.reader-page--blood .book-chapter .chapter-kicker { margin:0 0 18px; color:#87594d; font:600 10px/1.6 Georgia,"Palatino Linotype",serif; letter-spacing:.16em; text-align:center; }
.reader-page--blood .book-chapter h2 { margin:0 auto 34px; color:#34291f; font:400 clamp(30px,4vw,41px)/1.2 Georgia,"Palatino Linotype",serif; letter-spacing:.01em; text-align:center; text-transform:none; }
.reader-page--blood .book-chapter > p:not(.chapter-kicker) { margin:0; color:#382e25; font:400 clamp(16px,1.15vw,18px)/1.95 Georgia,"Palatino Linotype",serif; text-align:justify; text-indent:1.5em; }
.reader-page--blood .book-chapter .chapter-epigraph { max-width:35em; margin:0 auto 32px; padding:0 12px 22px; border:0; border-bottom:1px solid #d8cbb5; color:#766557; font-size:15px; font-style:italic; line-height:1.75; text-align:center; text-indent:0; }
.reader-page--blood .book-chapter > p:nth-of-type(3):not(.chapter-kicker)::first-letter { float:left; margin:.08em .12em 0 0; color:#87594d; font:400 3.2em/.78 Georgia,"Palatino Linotype",serif; }
.reader-page--blood .book-chapter strong { color:#5e302d; }
.reader-page--blood .book-chapter em { color:inherit; }
.reader-page--blood .book-chapter .scene-break { width:auto; margin:2.2em 0; border:0; color:#9b755f; opacity:.9; text-align:center; }
.reader-page--blood .book-chapter .scene-break::after { content:"✦　❧　✦"; font:16px/1 Georgia,"Palatino Linotype",serif; }
.reader-page--blood .reader-toc { border:0; border-left:1px solid #a99478; background:transparent; color:#493b30; }
.reader-page--blood .reader-toc .reader-eyebrow { color:#87594d; font-family:Georgia,"Palatino Linotype",serif; letter-spacing:.16em; }
.reader-page--blood .reader-toc>a:not(.reader-return) { border-color:#c7b79d; color:#493b30; font-family:Georgia,"Palatino Linotype",serif; font-size:13px; }
.reader-page--blood .reader-toc>a span { color:#87594d; }
.reader-page--blood .reader-toc .reader-return { color:#6d5d4c; }
@media(max-width:760px) {
  .reader-page--blood .reader-layout { padding:38px 6vw 68px; }
  .reader-page--blood .reader-content { padding:38px 25px; }
  .reader-page--blood .book-chapter { padding:42px 0 48px; }
  .reader-page--blood .book-chapter h2 { margin-bottom:27px; }
  .reader-page--blood .book-chapter > p:not(.chapter-kicker) { font-size:17px; line-height:1.9; }
}