/* The Life At album: a leather cover over four paper spreads. Turns are rigid board lit by flat shades. */
@font-face { font-family: 'Klee One'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/story/fonts/klee-one-regular-latin.woff2') format('woff2'); }
@font-face { font-family: 'Klee One'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/story/fonts/klee-one-semibold-latin.woff2') format('woff2'); }

/* One width drives the heading, the book and the bar. Book height is width / 1.75; the 144px is padding 16 + title 36 + 14 + gap 18 + bar 44 + padding 16,
   so on desktop the whole book and its bar sit above the fold down to 1280x720. --header-h is re-measured by storybook.js. */
.story-library { --header-h: 96px; --book-w: min(100%, 1200px, max(760px, calc((100svh - var(--header-h) - 144px) * 1.75))); background: #1b2b3c; background-image: radial-gradient(ellipse at 50% 38%, #314b60 0, #1b2b3c 72%); padding: 16px max(24px, calc((100vw - 1200px) / 2)) 16px; min-height: calc(100svh - var(--header-h)); overflow: clip; }
.story-heading { width: min(1200px, calc(100vw - 96px)); margin: 0 auto 14px; }
.story-heading h1 { font-size: 36px; line-height: 1; color: #faf7ef; }
.storybook { --book-paper: #f7f3e9; --book-ink: #17293d; --book-blue: #247aad; --book-hand: 'Klee One', 'Segoe Print', cursive; width: var(--book-w); margin-inline: auto; display: flex; flex-direction: column; gap: 18px; color: var(--book-ink); outline-offset: 8px; }
.storybook:focus-visible, .book-bar :focus-visible { outline-color: #9fcae7; }
.book-stage { position: relative; perspective: 2800px; isolation: isolate; container-type: inline-size; touch-action: pan-y pinch-zoom; scroll-margin-top: calc(var(--header-h) + 8px); }

/* Book mode stacks the cover and every spread in one grid cell, so the cover is always exactly the size of a page
   and the book never changes size between pages. */
@media screen {
  .book-ready:not(.book-reading-all) > .book-stage { display: grid; grid-template-columns: minmax(0, 1fr); }
  .book-ready:not(.book-reading-all) > .book-stage > :is(.book-cover, .book-spread) { grid-area: 1 / 1; margin-block: 0; }
  .book-ready:not(.book-reading-all) > .book-stage > .book-spread { aspect-ratio: 1.75; }
  .book-ready:not(.book-reading-all) > .book-stage > .book-spread[hidden] { display: grid !important; visibility: hidden; }
}

/* The cover is exactly one page, so opening is a hinge with no change in size. Its warm rim is still. */
.book-cover { display: none; position: relative; z-index: 1; width: 50%; margin-inline: auto; padding: 6cqi 5cqi; border: 1px solid #332114; border-radius: 5px 12px 10px 4px; background-color: #533725; background-image: linear-gradient(90deg, #140d0873, transparent 9%, #f6d2950b 54%, #180f0a26), url('/assets/story/album-leather-cover.webp'); background-size: auto, cover; background-position: center; color: #ead3ad; text-align: center; cursor: pointer; transform-origin: left center; box-shadow: inset 1px 0 3px #bea0775c, inset -2px 0 3px #160e0866, inset 0 0 34px #f6c66a14, 3px 3px 0 #dcb985, 5px 5px 0 #fff0c4, 7px 7px 0 #4a3020, 0 20px 30px #0b111850, 0 0 0 1px #f3cc7f33, 0 0 16px 2px #f8cd7052, 7px 9px 34px 4px #f0b85a40, 0 0 80px 12px #e8a84a24; }
.book-ready .book-cover:not([hidden]) { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.book-cover::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 31px; border-radius: 5px 0 0 4px; background: linear-gradient(90deg, #21150e66, #8e674124 30%, #25160d70 63%, #c5a47429 70%, transparent); pointer-events: none; }
.book-cover::after { content: ''; position: absolute; inset: 15px 17px 15px 37px; border: 1px solid #d8b16f4d; border-radius: 2px 7px 6px 2px; box-shadow: 0 1px 0 #160e0733, inset 0 1px 0 #edd0a414, 0 0 12px #f1c06a1a, inset 0 0 18px #f1c06a0f; pointer-events: none; }
.book-cover:focus-visible { outline-color: #b6d9ef; outline-offset: 9px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .book-ready .book-cover { transition: transform 280ms cubic-bezier(.2,.8,.2,1); }
  .book-ready .book-cover:is(:hover, :focus-visible) { transform: rotateY(-4deg); }
}
.book-cover__window { position: relative; display: flex; align-items: center; justify-content: center; width: 116px; height: 116px; margin-bottom: 26px; border-radius: 3px; background: var(--book-paper); background-image: radial-gradient(ellipse at 30% 22%, #fffef74d, transparent 70%); box-shadow: inset 0 3px 5px #1c110a99, inset 0 1px 1px #120b06, inset 3px 0 4px #1c110a66, inset -2px 0 3px #1c110a40, inset 0 -1px 0 #fff9ec80, 0 1px 0 #d9b88a3d, 0 0 0 1px #2a1a10; }
.book-cover__window img { width: 58px; height: 70px; opacity: .82; filter: saturate(.72) brightness(1.04); mix-blend-mode: multiply; }
.book-cover__window::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.11' filter='url(%23grain)'/%3E%3C/svg%3E"); pointer-events: none; }
.book-cover__title { display: block; font-family: Georgia, 'Times New Roman', serif; font-size: 40px; font-size: clamp(32px, 3.6cqi, 46px); font-weight: 400; line-height: 1.25; letter-spacing: .16em; text-indent: .16em; text-transform: uppercase; color: #c6a26d; text-shadow: 0 -1px 1px #160c07, 0 1px .5px #e7c68b60, 0 0 20px #f5c87a33; }
.book-cover__title > span { display: block; margin-bottom: 13px; font-size: .46em; letter-spacing: .22em; }
/* Open the album is pressed into the leather like the title: bare letters, no plate or arrow. */
.book-cover__hint { margin-top: 44px; font-family: Georgia, 'Times New Roman', serif; font-size: 14px; font-size: clamp(13px, 1.25cqi, 16px); letter-spacing: .24em; text-indent: .24em; text-transform: uppercase; color: #dcb87d; text-shadow: 0 -1px 1px #160c07, 0 1px .5px #e7c68b60; transition: color .3s ease; }
.book-cover:is(:hover, :focus-visible) .book-cover__hint { color: #ecd09a; }
.book-cover__title > span { color: #d8b680; }

/* Paper. */
.book-spread { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); position: relative; isolation: isolate; border-radius: 2px 3px 3px 2px; background: var(--book-paper); box-shadow: 0 2px 0 #c0b7a6, 0 3px 0 #eee9dc, 0 5px 0 #c7bfaf, 0 6px 0 #eee8dc, 0 22px 30px #060d164d; }
.book-spread + .book-spread { margin-top: 36px; }
.book-spread { scroll-margin-top: calc(var(--header-h) + 64px); }
.book-spread::before { content: ''; position: absolute; inset: -4px -6px -11px -5px; z-index: -1; border: 1px solid #4f3424; border-radius: 4px 5px 6px 4px; background: linear-gradient(to bottom, #624632 0 calc(100% - 10px), #ddd5c4 calc(100% - 10px) calc(100% - 8px), #afa38e calc(100% - 8px) calc(100% - 7px), #ebe4d5 calc(100% - 7px) calc(100% - 5px), #59402d calc(100% - 5px)); box-shadow: 0 2px 2px #1c160f40, 0 18px 28px #080e1840; pointer-events: none; }
.book-spread::after { content: ''; position: absolute; top: 0; bottom: -5px; left: 50%; width: 42px; transform: translateX(-50%); z-index: 2; background: linear-gradient(90deg, transparent, #5447380a 20%, #51443121 42%, #352d2257 48%, #30291e73 50%, #fffdf1a3 53%, #79664e0f 73%, transparent); pointer-events: none; }
.book-page { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center; min-width: 0; margin: 0; padding: 48px 56px; padding: 4.5cqi 5cqi; background: var(--book-paper); }
.book-page::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.095' filter='url(%23grain)'/%3E%3C/svg%3E"), radial-gradient(ellipse at 25% 15%, #fffef736, transparent 75%); }
.book-page::after { content: ''; position: absolute; z-index: -1; pointer-events: none; }
.book-page--left { border-radius: 2px 0 0 2px; }
.book-page--left::after { inset: 0 0 0 auto; width: 12%; background: linear-gradient(to left, #8b7d6412, transparent); }
.book-page--right { order: 1; border-radius: 0 3px 2px 0; }
.book-page--right::after { inset: 0 auto 0 0; width: 26px; background: linear-gradient(to right, #62543c0f, transparent); }
.about-page .book-page h2 { margin: 0 0 .5em; font-family: var(--book-hand); font-size: 36px; font-size: clamp(28px, 3.5cqi, 46px); font-weight: 600; line-height: 1.15; letter-spacing: 0; text-transform: none; color: var(--book-ink); }
.about-page .book-page p { max-width: 32em; margin: 0; font-family: var(--book-hand); font-size: 19px; font-size: clamp(17px, 2.1cqi, 24px); line-height: 1.55; }
.about-page .book-page p + p { margin-top: .7em; }
.book-page a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .book-page a:hover { color: var(--book-blue); } }

/* Prints sit straight on the page in a thin white border. */
.book-page--image { align-items: center; gap: 14px; gap: 1.4cqi; }
.book-print { display: block; width: auto; height: auto; max-width: 100%; max-height: 44cqi; padding: 6px; background: #fffefa; box-shadow: 0 1px 2px #352a2526, 1px 4px 6px #352a2514; }
.book-page figcaption { font-family: var(--book-hand); font-size: 17px; font-size: clamp(15px, 1.5cqi, 19px); line-height: 1.4; text-align: center; }
.book-team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6cqi; width: 100%; margin: 0; padding: 0; list-style: none; }
.book-team li { display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: var(--book-hand); font-size: 17px; font-size: clamp(15px, 1.5cqi, 19px); }
.book-team .book-print { width: 100%; max-height: none; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }

/* One bar under the book: an edge button on each side, the position and Read all between them. */
.book-bar { display: none; }
.book-ready .book-bar { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); align-items: center; gap: 12px; color: #e8eef3; font-family: var(--body); font-size: 16px; line-height: 1.2; transition: opacity 200ms ease, visibility 0s linear 0s; }
.book-ready:is(.book-closed, .book-opening) .book-bar { opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 0s linear 200ms; }
.book-bar__edge { justify-self: start; white-space: nowrap; min-width: 44px; min-height: 44px; padding: 0 18px; border: 1px solid #faf7ef66; border-radius: 2px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.book-bar__edge--next { justify-self: end; }
@media (hover: hover) and (pointer: fine) { .book-bar__edge:hover { border-color: #faf7ef; background: #ffffff12; } }
.book-bar__middle { display: flex; align-items: center; gap: 10px; white-space: nowrap; margin: 0; color: #c5d0da; font-size: 15px; font-variant-numeric: tabular-nums; }
.book-bar__middle button { min-height: 44px; padding: 0 2px; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .book-bar__middle button:hover { color: #faf7ef; } }
.book-reading-all .book-bar { position: sticky; top: var(--header-h); z-index: 8; grid-template-columns: auto; justify-content: start; margin-inline: -8px; padding: 4px 8px; background: #1b2b3c; }
.story-library:has(.book-reading-all) { padding-bottom: 48px; }
.book-reading-all .book-bar :is(.book-bar__edge, [data-book-position], .book-bar__dot) { display: none; }

/* Turning parts. Only transform and opacity animate; opacity only ever on the flat shades and casts. */
.book-leaf { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 5; transform-style: preserve-3d; pointer-events: none; }
.book-leaf--next { left: 50%; transform-origin: left center; }
.book-leaf--prev { left: 0; transform-origin: right center; }
.book-leaf__face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.book-leaf__face--back { transform: rotateY(180deg); }
.book-leaf__face > * { height: 100%; }
.book-leaf__shade { position: absolute; inset: 0; z-index: 3; opacity: 0; pointer-events: none; background: linear-gradient(to right, #17293dcc, #17293d80); }
:is(.book-leaf--prev .book-leaf__face--front, .book-leaf--next .book-leaf__face--back, .book-cover-leaf .book-leaf__face--back) .book-leaf__shade { background: linear-gradient(to left, #17293dcc, #17293d80); }
.book-turn-cast { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 4; opacity: 0; pointer-events: none; }
.book-turn-cast--right { left: 50%; transform-origin: left center; background: linear-gradient(to right, #0a121c8c, transparent 85%); }
.book-turn-cast--left { left: 0; transform-origin: right center; background: linear-gradient(to left, #0a121c8c, transparent 85%); }
.book-stationary { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 3; pointer-events: none; }
.book-stationary--left { left: 0; }
.book-stationary--right { left: 50%; }
.book-stationary--full { left: 0; width: 100%; }
.book-stationary > * { height: 100%; }
.book-cover-shell { position: absolute; inset: 0; z-index: 5; transform-style: preserve-3d; pointer-events: none; }
.book-cover-underlay { position: absolute; top: 0; bottom: 0; left: 50%; width: 50%; box-shadow: 4px -3px 0 #624632, 6px 5px 0 #ddd5c4, 6px 10px 0 #59402d, 0 18px 28px #080e1840; }
.book-cover-underlay > .book-page { height: 100%; }
.book-cover-leaf { left: 50%; transform-origin: left center; }
.book-cover-leaf .book-leaf__face { overflow: visible; }
.book-cover-leaf .book-cover { display: flex; position: static; width: 100%; height: 100%; margin: 0; transform: none; transition: none; }
.book-cover-leaf .book-leaf__face--back { box-shadow: -4px -3px 0 #624632, -5px 5px 0 #ddd5c4, -5px 10px 0 #59402d; }
.book-turning .book-stage > .book-spread { pointer-events: none; }

/* Single-page mode (phones, portrait tablets and landscape phones): one card per spread, picture first, the whole book in one screen.
   storybook.js uses the same query string (SINGLE_PAGE); tests/storybook-content.test.cjs keeps them identical. */
@media screen and (max-width: 759px), screen and (orientation: portrait) and (max-width: 1099px), screen and (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .story-library { --header-h: 76px; --book-w: min(100%, 600px); --page-h: max(440px, calc(100svh - var(--header-h) - 116px)); --pic-h: clamp(150px, calc(var(--page-h) - 295px), 330px); padding: 10px 16px 0; }
  .story-heading { margin-bottom: 10px; }
  .story-heading h1 { font-size: 32px; }
  .storybook { gap: 12px; }
  .book-bar :focus-visible { outline-offset: -3px; }
  .book-stage { perspective: 1800px; perspective-origin: 50% 40%; }
  .book-ready:not(.book-reading-all) > .book-stage > .book-spread { aspect-ratio: auto; min-height: var(--page-h); }
  .book-spread { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .book-spread::after { top: 0; bottom: 0; left: 0; width: 14px; transform: none; border-radius: 2px 0 0 2px; background: linear-gradient(to right, #68452e24, transparent); }
  .book-page { order: 0; justify-content: flex-start; padding: 14px 20px 18px; border-radius: 0; }
  .book-page::after { display: none; }
  .book-page--image { order: -1; height: var(--pic-h); justify-content: center; gap: 6px; padding: 14px 16px 0; }
  .book-print { max-height: calc(var(--pic-h) - 44px); }
  .book-print--tall { width: auto; height: calc(var(--pic-h) - 20px); max-height: none; object-fit: contain; }
  .book-team { gap: 8px; width: min(100%, calc((var(--pic-h) - 74px) * 3 + 16px)); }
  .book-team li { font-size: 15px; gap: 2px; }
  .book-team .book-print { aspect-ratio: 1; }
  .about-page .book-page h2 { font-size: 26px; margin-bottom: 10px; }
  .about-page .book-page p { font-size: 17px; line-height: 1.5; }
  .book-page figcaption { font-size: 15px; }
  .book-cover { width: 100%; padding: 40px 30px; }
  .book-cover__title { font-size: 38px; }
  .book-cover__window { width: 100px; height: 100px; margin-bottom: 22px; }
  .book-cover__window img { width: 50px; height: 60px; }
  .book-cover__hint { margin-top: 36px; font-size: 13px; }
  .book-leaf--single, .book-cover-leaf { left: 0; width: 100%; transform-origin: left center; }
  .book-turn-cast--full { left: 0; width: 100%; transform-origin: left center; background: linear-gradient(to right, #0a121c66, transparent 70%); }
  .book-ready:not(.book-reading-all) .book-bar { position: sticky; bottom: 0; z-index: 8; padding: 4px 0 calc(4px + env(safe-area-inset-bottom)); background: #1b2b3c; }
  .book-ready .book-bar { gap: 8px; }
  .book-bar__edge { padding-inline: 12px; }
}
@media screen and (max-width: 380px) {
  .book-ready .book-bar { font-size: 15px; }
  .book-bar__edge { padding-inline: 10px; }
  .book-bar__middle { gap: 6px; font-size: 14px; }
}
@media screen and (max-width: 340px) {
  .book-ready .book-bar { gap: 4px; }
  .book-bar__edge { padding-inline: 6px; }
  .book-bar__dot { display: none; }
}
@media screen and (max-width: 1100px) { .story-heading { width: min(1200px, calc(100vw - 64px)); } }
@media screen and (max-width: 800px) { .story-heading { width: calc(100vw - 48px); } }
@media screen and (max-width: 759px) { .story-heading { width: auto; } }
@media screen and (min-width: 600px) and (orientation: portrait) and (max-width: 1099px) {
  .story-library { --page-h: max(440px, min(780px, calc(100svh - var(--header-h) - 116px))); --pic-h: clamp(240px, calc(var(--page-h) - 360px), 400px); }
  .about-page .book-page h2 { font-size: 34px; }
  .about-page .book-page p { font-size: 20px; }
  .book-page--text { padding: 24px 36px 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .storybook *, .storybook *::before, .storybook *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .story-library { padding: 0; min-height: 0; background: #fff; }
  .story-heading, .storybook { width: auto; }
  .story-heading h1 { color: #17293d; }
  .book-spread::before, .book-spread::after { display: none; }
  .book-spread[hidden] { display: grid !important; }
  .book-spread { break-inside: avoid; box-shadow: none; margin-bottom: 25px !important; }
  .book-bar, .book-cover, .book-leaf, .book-stationary, .book-turn-cast, .book-cover-shell { display: none !important; }
}

/* Phones, portrait and landscape. The words take the height they need and the picture gets the rest, so the sticky bar
   never covers text; Read all is the full-width vertical version. Rules match descendants, so the turning copies lay out
   exactly like the card they copy. */
@media screen and (max-width: 600px), screen and (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .story-library { --header-h: var(--header-height, 60px); --page-h: max(380px, calc(100svh - var(--header-h) - 64px)); padding-top: 12px; }
  /* The cover carries the title on a phone; the h1 stays for screen readers. */
  .story-heading { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .storybook { gap: 8px; }
  .book-stage { perspective: 2600px; perspective-origin: 50% 50%; }
  .book-ready:not(.book-reading-all) .book-bar { padding: 0 0 env(safe-area-inset-bottom); }
  .book-page { padding: 12px 20px 16px; }
  .about-page .book-page h2 { font-size: 24px; margin-bottom: 8px; }
  .book-ready:not(.book-reading-all) .book-spread { grid-template-rows: minmax(0, 1fr) auto; }
  .book-ready:not(.book-reading-all) .book-page--image { height: auto; min-height: 140px; container-type: size; padding: 12px 12px 0; gap: 4px; }
  .book-ready:not(.book-reading-all) .book-print { max-height: calc(100cqh - 26px); }
  .book-ready:not(.book-reading-all) .book-page--image:not(:has(figcaption)) .book-print { max-height: 100cqh; }
  .book-ready:not(.book-reading-all) .book-print--tall { height: 100cqh; width: auto; max-height: none; }
  /* Three 4:5 portraits and up to two lines of name each fit the picture height: 3 * (100cqh - 40px) / 1.25 + 16px. */
  .book-ready:not(.book-reading-all) .book-team { width: min(100%, calc(100cqh * 2.4 - 80px)); }
  .book-team .book-print { aspect-ratio: 4 / 5; }
  .book-team li { text-align: center; font-size: 14px; line-height: 1.3; }
  .book-reading-all .book-page--image { height: auto; padding: 14px 14px 0; }
  .book-reading-all .book-print { max-height: none; width: 100%; }
  .book-reading-all .book-print--tall { width: 64%; height: auto; }
  .book-reading-all .book-team { width: 100%; }
  .book-reading-all .book-team .book-print { width: 100%; }
  /* storybook.js sets --header-top to 0 when the header scrolls away (landscape phones), so Read all's bar pins to the top. */
  .book-reading-all .book-bar { top: var(--header-top, var(--header-h)); }
}
/* Short portrait phones (an iPhone SE or mini in Safari is about 553px tall): smaller words give the picture about 50px
   more, and the tall app screenshot shows its top at a readable width instead of a whole-phone thumbnail. */
@media screen and (max-width: 600px) and (max-height: 600px) and (orientation: portrait) {
  .book-page { padding: 10px 18px 12px; }
  .about-page .book-page h2 { font-size: 21px; margin-bottom: 4px; }
  .about-page .book-page p { font-size: 15px; line-height: 1.42; }
  .book-page figcaption, .book-team li { font-size: 13px; }
  .book-ready:not(.book-reading-all) .book-print--tall { width: min(100%, 220px); height: 100cqh; object-fit: cover; object-position: top; }
}
/* Tall portrait phones: every picture is already as wide as the card, so a taller card only added blank paper. */
@media screen and (max-width: 600px) and (min-height: 760px) and (orientation: portrait) {
  .story-library { --page-h: min(640px, calc(100svh - var(--header-h) - 64px)); }
}
/* Page one has nothing behind it, so a touch phone shows no left button there; going on from the last page still closes. */
@media screen and (max-width: 600px) and (hover: none), screen and (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .book-ready:has(> .book-stage > .book-spread[data-chapter="1"]:not([hidden])) .book-bar__edge:not(.book-bar__edge--next) { visibility: hidden; }
}
/* Landscape phones: one card with the picture beside the words, cover and bar on one screen, clear of the Dynamic Island. */
@media screen and (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .story-library { --book-w: 100%; --page-h: calc(100svh - var(--header-h) - 64px); padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); }
  .book-spread { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .book-ready:not(.book-reading-all) .book-spread, .book-reading-all .book-spread { grid-template-rows: minmax(0, 1fr); }
  /* The bar grows by the home-indicator inset, so the card gives that height back and the bar covers none of it. */
  .book-ready:not(.book-reading-all) > .book-stage > .book-spread { min-height: calc(var(--page-h) - env(safe-area-inset-bottom)); }
  .book-page--image { order: -1; }
  .book-page--text { justify-content: center; padding: 12px 24px 14px; }
  .about-page .book-page h2 { font-size: 22px; }
  .about-page .book-page p { font-size: 16px; line-height: 1.45; }
  .book-cover { padding: 16px 30px; }
  .book-cover__window { width: 72px; height: 72px; margin-bottom: 12px; }
  .book-cover__window img { width: 36px; height: 43px; }
  .book-cover__title { font-size: 30px; }
  .book-cover__hint { margin-top: 18px; }
  .book-reading-all .book-print--tall { width: auto; max-height: 320px; }
}
/* Touch gets a short press fade instead of a hover colour that sticks after the tap. */
@media (hover: none) {
  .book-bar__edge:active, .book-bar__middle button:active { opacity: .72; }
}