:root {
  --book-paper: oklch(23% .025 65);
  --book-lit: oklch(31% .035 70);
  --book-edge: oklch(38% .04 65);
  --book-gutter: oklch(10% .023 60);
  --book-glow: oklch(75% .1 75 / .1);
  --book-shadow: oklch(8% .02 50 / .7);
  --book-thread: oklch(60% .06 70);
  --book-ribbon: oklch(36% .095 10);
  --book-curl-light: oklch(52% .045 75);
}
@media(prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --book-paper: oklch(92% .038 82); --book-lit: oklch(97% .037 87);
    --book-edge: oklch(72% .065 75); --book-gutter: oklch(35% .055 65);
    --book-glow: oklch(99% .075 90 / .35);
    --book-curl-light: oklch(99% .022 90);
  }
}
:root[data-theme="light"] {
  --book-paper: oklch(92% .038 82); --book-lit: oklch(97% .037 87);
  --book-edge: oklch(72% .065 75); --book-gutter: oklch(35% .055 65);
  --book-glow: oklch(99% .075 90 / .35);
  --book-curl-light: oklch(99% .022 90);
}
.reading-room { --book-open: 0; isolation: isolate; }
.reading-room .ledger-page { max-width: none; padding: 0; overflow: clip; }
.book-scene { position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.book-scroll .book-scene { position: fixed; top: var(--site-bar-height); bottom: 0; height: auto; }
.book-desk { position: absolute; inset: -10%; background: url('/img/ride/baked/records-1600.avif') 35% 30% / cover; }
.book-leaf {
  position: absolute; top: calc(58px - var(--book-rise, 0px)); bottom: -25vh;
  background: radial-gradient(ellipse at 2% 15%, var(--book-glow), transparent 65%), var(--book-paper);
  box-shadow: 0 1px 0 var(--book-edge), 0 5px 0 var(--book-paper), 0 6px 0 var(--book-edge), 0 10px 0 var(--book-paper), 0 11px 0 var(--book-edge), 0 16px 0 var(--book-gutter), -12px 20px 45px var(--book-shadow);
}
.book-leaf::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("/blog/paper-grain.svg"); opacity: .16; mix-blend-mode: soft-light; }
.book-leaf--left { left: calc(4% - var(--book-open) * 58%); width: 58%; transform: rotate(-2deg); transform-origin: right top; border-radius: 4% 1% 0 0 / 2% 1% 0 0; background-color: var(--book-lit); }
.book-leaf--right { left: calc(62% - var(--book-open) * 58%); width: 110%; top: calc(70px - var(--book-rise, 0px)); transform: rotate(2deg); transform-origin: left top; border-radius: 2% 0 0 0 / 1% 0 0 0; }
.book-leaf--right::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,var(--book-gutter),transparent 4%,var(--book-lit) 12%,transparent 38%); }
.book-binding {
  position: absolute; top: calc(62px - var(--book-rise, 0px)); bottom: -25vh;
  left: calc(62% - var(--book-open) * 58%); width: 46px; transform: translateX(-50%) rotate(-1deg);
  background: repeating-linear-gradient(0deg,transparent 0 109px,var(--book-thread) 110px,transparent 112px), linear-gradient(90deg,transparent,var(--book-gutter) 48%,var(--book-shadow) 52%,transparent);
  border-radius: 40% 40% 0 0;
}
.book-ribbon { position: absolute; width: 18px; height: 130vh; left: calc(62.5% - var(--book-open) * 58%); top: 0; transform: rotate(-4deg); transform-origin: top; background: linear-gradient(90deg,var(--book-shadow),var(--book-ribbon) 28%,var(--book-ribbon) 70%,var(--book-shadow)); box-shadow: 8px 5px 8px var(--book-shadow); }
.reading-room .ledger-hero { position: relative; display: block; min-height: max(780px,calc(100svh - var(--site-bar-height))); padding: clamp(160px,20vh,235px) 0 120px; }
.reading-room .hero-copy { position: relative; margin-left: 10%; width: 44%; max-width: 680px; transform: rotate(-2deg); transform-origin: center; }
.reading-room .hero-copy h1 { font-size: clamp(64px,6.7vw,108px); line-height: 1.05; letter-spacing: -.035em; margin: 32px 0 40px; }
.reading-room .title-star { font-size: .38em; margin-left: .7em; }
.reading-room .hero-description { font-size: clamp(21px,2vw,28px); line-height: 1.55; margin: 0; }
.reading-room .hero-anchor { margin-top: 48px; font-size: 13px; }
.reading-room .eyebrow { font-size: 11px; }
.book-marginalia { position: absolute; top: 155px; right: 7%; display: flex; align-items: flex-start; gap: 28px; color: var(--muted); }
.book-marginalia span:first-child { writing-mode: vertical-rl; font: 38px/1.8 'Shippori Mincho',serif; color: var(--cool); }
.book-marginalia span:last-child { writing-mode: vertical-rl; font: 10px var(--mono); letter-spacing: .1em; padding-top: 7px; }
.book-colophon { margin: 0; position: absolute; bottom: 36px; left: 11%; width: 42%; font: 10px var(--mono); color: var(--muted); display: flex; justify-content: space-between; transform: rotate(-2deg); }
.book-corner { position: absolute; width: clamp(260px,30vw,500px); aspect-ratio: 420 / 460; right: -1%; bottom: 0; filter: drop-shadow(-4px -4px 7px var(--book-shadow)); }
.book-underneath { position: absolute; inset: 0; clip-path: polygon(100% 0,100% 100%,0 100%); background: url("/img/ride/wood-color.avif") center / cover; }
.desk-within { position: absolute; width: 90%; height: 80%; object-fit: cover; object-position: 35%; left: 28%; top: 35%; }
.ledger-within { position: absolute; width: 65%; height: 65%; object-fit: contain; left: 42%; top: 48%; transform: rotate(-8deg); filter: drop-shadow(4px 8px 8px var(--book-shadow)); }
.corner-within { position: absolute; width: 35px; height: 44px; bottom: 5%; right: 2%; transform: rotate(12deg); clip-path: polygon(100% 0,100% 100%,0 100%); background: url('/img/ride/baked/records-800.avif') center / cover; }
.book-curl { position: absolute; inset: 0; width: 100%; height: 100%; }
.curl-edge { stop-color: var(--book-edge); }.curl-light { stop-color: var(--book-curl-light); }.curl-paper { stop-color: var(--book-paper); }.curl-shadow { stop-color: var(--book-gutter); }.curl-hairline { stroke: var(--book-curl-light); stroke-width: 1; }
.reading-room .writing-index { position: relative; margin: 0 0 0 4%; padding: 50px clamp(24px,6vw,120px) 48px; background: linear-gradient(var(--book-lit),var(--book-paper) 220px); border-left: 1px solid var(--book-edge); scroll-margin-top: var(--site-bar-height); }
.reading-room .sora-invitation { margin: 0 0 0 4%; padding: 44px clamp(24px,6vw,120px); background: var(--book-paper); }
.reading-room .kg-footer { position: relative; background: var(--page); }

@media(max-width:1000px) {
  .reading-room .hero-copy h1 { font-size: 64px; }
  .reading-room .hero-copy { width: 48%; margin-left: 8%; }
  .reading-room .eyebrow { font-size: 9px; }
  .book-marginalia { right: 5%; }
  .reading-room .writing-index { margin-left: 4%; padding-inline: 28px; border-right: 0; }
}
@media(max-width:700px) {
  .book-leaf--left { left: calc(-8% - var(--book-open) * 82%); width: 104%; }
  .book-leaf--right,.book-binding { left: calc(96% - var(--book-open) * 94%); }
  .book-ribbon { left: calc(97% - var(--book-open) * 94%); width: 12px; }
  .book-leaf { top: calc(36px - var(--book-rise, 0px)); }
  .book-leaf--right { top: calc(45px - var(--book-rise, 0px)); }
  .book-binding { top: calc(40px - var(--book-rise, 0px)); }
  .reading-room .ledger-hero { min-height: max(780px,calc(100svh - var(--site-bar-height))); padding: 110px 0 330px; }
  .reading-room .hero-copy { width: 80%; margin-left: 8%; transform: rotate(-1deg); }
  .reading-room .hero-copy h1 { font-size: clamp(48px,12vw,74px); margin: 28px 0; }
  .reading-room .hero-description { font-size: 21px; }
  .reading-room .hero-description br { display: none; }
  .reading-room .hero-anchor { margin-top: 28px; }
  .book-marginalia { top: auto; bottom: 75px; left: 9%; right: auto; }
  .book-marginalia span:first-child { font-size: 24px; }
  .book-marginalia span:last-child { display: none; }
  .book-corner { width: 230px; bottom: 0; right: -16px; }
  .book-colophon { bottom: 22px; left: 8%; width: 45%; font-size: 8px; display: block; }
  .book-colophon span { display: none; }
  .reading-room .writing-index { margin-left: 3%; padding: 30px 20px; }
  .reading-room .sora-invitation { padding-inline: 24px; }
}
@media print { .book-scene,.book-corner,.book-marginalia { display: none; } .reading-room .writing-index { box-shadow: none; border: 0; padding: 0; } }