/* Template "storybook": an open book; each spread is a photo (left) and a part of the letter (right). On phones the
   book shows one page at a time, the photo above its words. Pages turn with a 3D leaf. Colours only from themes.css. */

body[data-layout="storybook"] .show { background: radial-gradient(75% 65% at 50% 40%, var(--bg-2), var(--bg) 78%); }
body[data-layout="storybook"] .book-wrap { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 22px; padding: 78px 14px 24px; }
body[data-layout="storybook"] .book { position: relative; width: min(92vw, 1040px, calc(72svh * 1.5)); aspect-ratio: 3 / 2; perspective: 2400px; transition: transform .9s var(--ease); touch-action: pan-y; }
body[data-layout="storybook"] .book::before { content: ''; position: absolute; z-index: -1; inset: 6% 3% -3%; border-radius: 30px; background: rgba(0, 0, 0, .38); filter: blur(26px); }
body[data-layout="storybook"] .book.closed { transform: translate3d(-25%, 0, 0); }
body[data-layout="storybook"] .book.closed::before { left: 52%; }
body[data-layout="storybook"] .page,
body[data-layout="storybook"] .face { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; color: var(--ink); background: var(--paper); }
body[data-layout="storybook"] .page { cursor: pointer; }
body[data-layout="storybook"] .page.left { left: 0; border-radius: 12px 0 0 12px; }
body[data-layout="storybook"] .page.right { right: 0; border-radius: 0 12px 12px 0; }
body[data-layout="storybook"] .page.left::after,
body[data-layout="storybook"] .page.right::after { content: ''; position: absolute; top: 0; bottom: 0; width: 36px; pointer-events: none; }
body[data-layout="storybook"] .page.left::after { right: 0; background: linear-gradient(to left, rgba(0, 0, 0, .22), transparent); }
body[data-layout="storybook"] .page.right::after { left: 0; background: linear-gradient(to right, rgba(0, 0, 0, .18), transparent); }
body[data-layout="storybook"] .book.closed .page.left { visibility: hidden; }
body[data-layout="storybook"] .book.closed .page.right::after { display: none; }

/* the turning leaf: its front is the page being turned, its back the page that lands on the other side */
body[data-layout="storybook"] .leaf { position: absolute; z-index: 5; top: 0; bottom: 0; width: 50%; transform-style: preserve-3d; pointer-events: none; }
body[data-layout="storybook"] .leaf.fwd { left: 50%; transform-origin: 0 50%; }
body[data-layout="storybook"] .leaf.back { left: 0; transform-origin: 100% 50%; }
body[data-layout="storybook"] .face { inset: 0; width: auto; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
body[data-layout="storybook"] .face.back { transform: rotateY(180deg); }
body[data-layout="storybook"] .leaf.fwd .face.front, body[data-layout="storybook"] .leaf.back .face.back { border-radius: 0 12px 12px 0; }
body[data-layout="storybook"] .leaf.fwd .face.back, body[data-layout="storybook"] .leaf.back .face.front { border-radius: 12px 0 0 12px; }
body[data-layout="storybook"] .face::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, rgba(0, 0, 0, .12), transparent 30%, transparent 70%, rgba(0, 0, 0, .08)); }

/* what is on a page */
body[data-layout="storybook"] .side { position: absolute; inset: 0; display: grid; padding: 8% 9% 9%; min-height: 0; }
body[data-layout="storybook"] .side-frame { position: relative; width: 100%; height: 100%; min-height: 0; padding: 8px 8px 30px; background: #fff; transform: rotate(-1.2deg); box-shadow: 0 2px 4px rgba(0, 0, 0, .14), 0 14px 30px rgba(0, 0, 0, .18); }
body[data-layout="storybook"] .side-frame img { display: block; width: 100%; height: 100%; object-fit: cover; background: #ece7e2; }
body[data-layout="storybook"] .side-frame .ph { inset: 8px 8px 30px; }
body[data-layout="storybook"] .side-text { align-content: center; overflow-y: auto; text-align: center; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: clamp(1.05rem, 1.7vw, 1.45rem); line-height: 1.65; }
body[data-layout="storybook"] .side-text p { margin: 0; text-wrap: pretty; }
body[data-layout="storybook"] .side-orn { display: block; text-align: center; font-size: 2.4rem; font-style: normal; color: var(--accent-deep); }
body[data-layout="storybook"] .side-cover {
  align-content: center; justify-items: center; gap: .3rem; text-align: center; color: var(--paper);
  background: radial-gradient(90% 70% at 30% 20%, color-mix(in srgb, var(--accent) 70%, transparent), transparent 70%), linear-gradient(160deg, var(--accent-deep), color-mix(in srgb, var(--accent-deep) 50%, #000));
  box-shadow: inset 0 0 0 10px color-mix(in srgb, var(--gold) 45%, transparent), inset 0 0 0 11px color-mix(in srgb, var(--gold) 80%, transparent);
}
body[data-layout="storybook"] .side-cover .eyebrow { margin: 0; color: color-mix(in srgb, var(--paper) 80%, transparent); }
body[data-layout="storybook"] .side-cover h2 { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 400; font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.1; overflow-wrap: anywhere; }
body[data-layout="storybook"] .side-cover .side-orn { color: var(--gold); margin-top: .6rem; }
body[data-layout="storybook"] .side-end { align-content: center; justify-items: center; gap: 1rem; text-align: center; overflow-y: auto; }
body[data-layout="storybook"] .side-end .eyebrow { margin: 0; color: color-mix(in srgb, var(--ink) 55%, transparent); }
body[data-layout="storybook"] .side-end .end-name { margin: 0; font-family: 'Caveat', cursive; font-size: clamp(1.8rem, 3.6vw, 2.6rem); color: var(--ink); overflow-wrap: anywhere; }
body[data-layout="storybook"] .side-rest { align-content: start; overflow-y: auto; gap: 14px; }
body[data-layout="storybook"] .side-rest h3 { margin: 0; text-align: center; font-size: .68rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 55%, transparent); }
body[data-layout="storybook"] .side .prints { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 12px; padding: 4px; }

body[data-layout="storybook"] .book-nav { display: flex; align-items: center; gap: 14px; }
body[data-layout="storybook"] .book-prev { width: 44px; padding: 0; font-size: 1.4rem; }
body[data-layout="storybook"] .book-next { min-width: 150px; }
body[data-layout="storybook"] .book-count { min-width: 60px; text-align: center; font-size: .74rem; letter-spacing: .22em; color: var(--muted); font-variant-numeric: tabular-nums; }

/* phones: one page at a time, the photo above its words */
@media (max-width: 759px) {
  body[data-layout="storybook"] .book { width: min(90vw, 460px, calc(66svh * .72)); aspect-ratio: .72; }
  body[data-layout="storybook"] .book.closed { transform: none; }
  body[data-layout="storybook"] .book.closed::before { left: 3%; }
  body[data-layout="storybook"] .page.left { display: none; }
  body[data-layout="storybook"] .page.right { left: 0; width: 100%; border-radius: 6px 14px 14px 6px; }
  body[data-layout="storybook"] .leaf, body[data-layout="storybook"] .leaf.back { left: 0; width: 100%; transform-origin: 0 50%; }
  body[data-layout="storybook"] .leaf .face.front, body[data-layout="storybook"] .leaf .face.back { border-radius: 6px 14px 14px 6px; }
  body[data-layout="storybook"] .side-both { grid-template-rows: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; padding: 9% 8% 8%; }
  body[data-layout="storybook"] .side-both .side-text { font-size: 1.12rem; padding: 0 2px; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-layout="storybook"] .book { transition: none; }
}