/* Progressive enhancement: the unchanged document remains readable without JS. */
html.scene-paging{scroll-padding-top:0}
html.scene-paging .hero{min-height:100svh;max-height:none}
html.scene-paging .sky-destination{min-height:100svh;scroll-margin-top:0}
html.scene-paging .memory{min-height:100svh;display:flex;align-items:center}
html.scene-paging .memory-copy{padding-top:6rem;padding-bottom:6rem}
html.scene-paging .quiet-shelf{min-height:100svh}
/* Keep real content in flow; reduce empty space instead of clipping a chapter
   into a fixed-height box. The same scene destinations apply at every size. */
@media(max-width:700px){
 html.scene-paging .memory{flex-direction:column;justify-content:center;padding:2rem 0}
 html.scene-paging .memory-copy{padding:0 1.5rem}
 html.scene-paging .bookmark{position:relative;inset:auto;transform:none;align-self:center;margin-top:1.5rem}
}
/* Short/landscape views retain every control in normal flow. At high text
   zoom a scene can still grow: scrollbar, focus and native links remain usable. */
@media(max-height:700px){
 html.scene-paging .site-header{padding-block:1rem}
 html.scene-paging .hero{height:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:6rem 1rem 2rem}
 html.scene-paging .hero-copy{position:relative;left:auto;top:auto;transform:none;width:100%}
 html.scene-paging .hero h1{font-size:clamp(1.5rem,min(7.5vw,6.5svh),3.3rem)}
 html.scene-paging .chapter-ornament{margin-bottom:1rem}
 html.scene-paging .hero-book,html.scene-paging .walk-link{position:relative;inset:auto;transform:none}
 html.scene-paging .walk-link{gap:.4rem}
 html.scene-paging .walk-line{height:20px}
}
@media(min-width:701px) and (max-height:700px){
 html.scene-paging .memory-copy{padding-top:2rem;padding-bottom:2rem}
}

/* All four stories share one shelf. Each whole entry opens its existing book.
   Use normal flow at every size so zoomed text is never clipped. */
html[data-page="home"] .story-shelf{display:grid;grid-template-columns:minmax(0,1fr);align-content:center;gap:clamp(1.5rem,4svh,2.5rem);padding:clamp(2rem,5svh,4rem) 5vw}
html[data-page="home"] .story-shelf .shelf-intro{text-align:center;margin:0}
html[data-page="home"] .story-shelf .shelf-intro h2{font-size:clamp(1.75rem,2.6vw,2.65rem);line-height:1.6;margin-top:.65rem}
html[data-page="home"] .story-shelf .shelf-entries{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2.5rem;width:100%;max-width:1000px;padding:0;margin:0 auto}
html[data-page="home"] .story-shelf .shelf-entry{grid-template-columns:40px minmax(0,1fr) 24px;align-items:center;gap:1rem;padding:1.4rem .25rem;border-bottom:0}
html[data-page="home"] .story-shelf .shelf-entry:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
html[data-page="home"] .story-shelf .entry-number{gap:.4rem;padding:0}
html[data-page="home"] .story-shelf .entry-number .book-sigil{width:34px;height:34px}
html[data-page="home"] .story-shelf .entry-kicker{font-size:.875rem;line-height:1.5;letter-spacing:.04em;margin-bottom:.45rem;color:#d2b77c}
html[data-page="home"] .story-shelf .entry-quote{font-size:clamp(1.05rem,1.5vw,1.4rem);line-height:1.7;overflow-wrap:break-word}
html[data-page="home"] .story-shelf .entry-action{grid-column:3;grid-row:1;display:block;min-height:0;margin:0;text-align:right;font-size:1.1rem;line-height:1}
html[data-page="home"] .story-shelf .entry-action-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:700px){
 html[data-page="home"] .story-shelf{gap:1rem;padding:1.5rem 1.25rem}
 html[data-page="home"] .story-shelf .shelf-intro h2{font-size:1.6rem;line-height:1.6;margin-top:.5rem}
 html[data-page="home"] .story-shelf .shelf-entries{grid-template-columns:minmax(0,1fr);max-width:460px}
 html[data-page="home"] .story-shelf .shelf-entry{grid-template-columns:28px minmax(0,1fr) 18px;gap:.65rem;padding:.75rem .1rem}
 html[data-page="home"] .story-shelf .shelf-entry:nth-last-child(2){border-bottom:0}
 html[data-page="home"] .story-shelf .entry-number .book-sigil{width:26px;height:26px}
 html[data-page="home"] .story-shelf .entry-kicker{margin-bottom:.3rem}
 html[data-page="home"] .story-shelf .entry-quote{font-size:1rem;line-height:1.6}
}
@media(min-width:701px) and (max-height:700px){
 html[data-page="home"] .story-shelf{gap:1rem;padding-top:1.5rem;padding-bottom:1.5rem}
 html[data-page="home"] .story-shelf .shelf-intro h2{font-size:1.75rem}
 html[data-page="home"] .story-shelf .shelf-entry{padding-top:1rem;padding-bottom:1rem}
}
@media(max-width:700px) and (max-height:620px){
 html[data-page="home"] .story-shelf{gap:.75rem;padding-top:1rem;padding-bottom:1rem}
 html[data-page="home"] .story-shelf .shelf-intro h2{font-size:1.4rem;line-height:1.45}
 html[data-page="home"] .story-shelf .shelf-entry{padding-top:.5rem;padding-bottom:.5rem}
}