/* The reading room takes only the height of what is in it. Stretching it to
   fill the window also stretched the forest behind it, and the ground the
   stump stands on slid away down the screen; letting it hug its contents keeps
   the stump on the floor of the picture at every size. */

/* book-stage shell — pages are real DOM leaves (same as the old bound book) */
.reader-toolbar[hidden]{display:none!important}
.reading-desk.book-shell{
  /* Measured on book-stage.png by reading the paper out of the photograph:
     it lies from 20.369% to 80.383% across and 5.283% to 62.264% down, so the
     drawings land on the paper and nowhere else. The drawings are cut to this
     same photograph, corner for corner. */
  --page-left:20.369%;
  --page-top:5.283%;
  --page-width:60.014%;
  --page-height:56.981%;
  /* Where the fold falls inside that paper. The split here must match the cut
     in the drawing, or one page would show a strip of the other. */
  --gutter:.5025;
  position:relative;
  width:var(--book-size,100%);
  /* The shell is the photograph, so it keeps the photograph's own shape.
     Held to any other, the log stretches and the paper with it. */
  aspect-ratio:3413/1808;
  margin:0 auto;
  --desk-depth:2200px;
  /* The turn pulls the camera back as the leaf rises, or the paper would swell
     over the page it is landing on. */
  perspective:var(--turn-depth,var(--desk-depth));
  perspective-origin:50% 45%;
  isolation:isolate;
  /* A turning page lifts out of the shell, so nothing may clip it. */
  overflow:visible;
}
/* Log, cushion and book are one photograph, so they can only move together. */
.reading-desk.book-shell .stage-scene{
  position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:2;pointer-events:none;user-select:none;
}
.reading-desk.book-shell .bound-book{
  position:absolute;
  left:var(--page-left);top:var(--page-top);
  width:var(--page-width);height:var(--page-height);
  margin:0;aspect-ratio:auto;border-radius:1px;background:transparent;
  transform-style:preserve-3d;overflow:visible;z-index:3;
}
/* Plate: show DOM pages, hide the canvas surface that was cropping art */
.bound-book[data-plate=true] .book-surface{display:none!important}
.bound-book[data-sculpted=true][data-plate=true] .bound-pages{display:grid!important}
.bound-book[data-sculpted=true]:not([data-plate=true]) .bound-pages,
.bound-book[data-sculpted=true]:not([data-plate=true]) .paper-curl{display:none!important}
.bound-book[data-sculpted=true]:before{display:none}
.bound-book[data-plate=true]{background:transparent;box-shadow:none}
.bound-book[data-plate=true] .bound-page{
  box-shadow:none;background:transparent;border-radius:0;overflow:hidden;
}
.bound-book[data-plate=true] .bound-page:after{display:none}
.bound-book[data-plate=true] .bound-page img{
  display:block;width:calc(100% / var(--gutter,.5));max-width:none;height:100%;object-fit:fill;pointer-events:none;
}
.bound-book[data-plate=true] .bound-page.right img{
  width:calc(100% / (1 - var(--gutter,.5)));margin-left:calc(-100% * var(--gutter,.5) / (1 - var(--gutter,.5)));
}
.bound-book[data-plate=true] .bound-page.left img{margin-left:0}
.bound-book[data-plate=true] .paper-curl{z-index:30}
.bound-book[data-plate=true] .paper-face{background-color:transparent}
/* turn hit-areas: never paint */
.reading-desk.book-shell .page-edge{
  appearance:none;-webkit-appearance:none;background:transparent!important;border:0!important;
  box-shadow:none!important;color:transparent;opacity:0;outline:none;
  top:0;bottom:0;height:auto;z-index:40;
}
/* The halves you press are the halves you see: split at the spine. */
.reading-desk.book-shell .page-edge.left{left:0;right:auto;
  width:calc(var(--page-left) + var(--page-width) * var(--gutter,.5))}
.reading-desk.book-shell .page-edge.right{right:0;left:auto;
  width:calc(100% - var(--page-left) - var(--page-width) * var(--gutter,.5))}
.reading-desk.book-shell .page-edge:focus-visible{opacity:1;outline:2px solid #ae925f;outline-offset:2px;background:transparent!important}
@media(max-width:700px){
  .reading-desk.book-shell{width:var(--book-size,100%)}
}

/* One 1024 x 508 coordinate system: only its scale changes across devices. */
.forest-story{background:#14291e;color:#fff7df}
.forest-story .reading-room{position:relative;isolation:isolate;min-height:0;overflow:hidden;background:#14291e;
  /* The same skirt the jelly room leaves under its last line. */
  padding-bottom:86px}
.forest-story .reading-room:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#0a160c35 0%,#0e221523 45%,#14291e 96%),url('/assets/reading/forest-path.jpg') center top / cover no-repeat}
.forest-story .reading-heading{padding:32px 16px 18px;text-shadow:0 2px 12px #0009}
.forest-story .reading-heading h1{font-size:clamp(34px,3.6vw,52px)}
.forest-story .reading-heading .eyebrow,.forest-story .byline{color:#e3dfc9}
.forest-story .bound-reader{max-width:1380px;padding:0 12px;margin:auto}
.forest-story .reader-toolbar{display:flex;justify-content:center;align-items:center;gap:18px;flex-wrap:wrap;margin:0 auto 16px;padding:0 10px}
.forest-story .reader-controls{gap:12px;margin:0}
.forest-story .reader-controls button{background:#203b2eef;border:1px solid #aaa17480;color:#fff3d4;box-shadow:none}
.forest-story .reader-controls button{min-height:44px;min-width:76px;border-radius:28px;font-size:14px;padding:8px 16px}
.forest-story .page-meter{min-width:115px;color:#f5e8c8}
.forest-story .page-meter progress{accent-color:#dfc682}
/* The stand is part of the photograph, so it must not slide under a finger.
   Clipping instead of scrolling keeps the edges trimmed without making the
   scene draggable; a sideways drag belongs to the page turn, nothing else. */
.forest-story .book-viewport{max-width:1240px;padding:0;margin:0 auto 10px;overflow:clip}
.forest-story .desk-hint{color:#ebe4d0;text-align:center;font-size:14px;margin:8px 12px 0}
.forest-story .reading-after{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 24px;color:#ece5cd;font-size:14px;padding:0 16px;margin:0}
.forest-story .reading-after a{color:#fff6da}
html:has(.forest-story){background:#14291e}
.forest-story .room-nav{color:#244d3b}
.forest-story .reader-controls button:hover{background:#365943;color:#fff3d4}
.forest-story .desk-hint{word-break:keep-all}
@media(max-width:700px){
 .forest-story .reading-heading{padding:26px 12px 18px}
 .forest-story .reading-heading .eyebrow{font-size:10px}
 .forest-story .bound-reader{padding:0}
 .forest-story .reader-toolbar{gap:10px;margin-bottom:20px}
 .forest-story .reader-controls{width:100%;gap:12px}
 .forest-story .book-viewport{width:100%}
 .forest-story .reading-desk.book-shell{width:calc(var(--book-size,100%) * 1.2);margin-left:-10%;margin-right:0}
 .forest-story .desk-hint{font-size:13px;max-width:310px;margin:12px auto 0;padding:0 12px}
 .forest-story .reading-room{padding-bottom:62px}
 .forest-story .reading-room:before{background-size:auto 100%;background-position:50% 0}
 .forest-story .room-links{gap:14px}
}