/* Reading mode (static/js/book.js): the story as a book with a page curl. Loaded only on story pages. */

/* Literata (SIL Open Font License 1.1, see fonts/OFL-Literata.txt), the serif Google made for reading books on screens.
   Subsets from @fontsource-variable/literata, fetched only when a page needs them. */
@font-face { font-family: Literata; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url(/static/fonts/Literata-latin-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Literata; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url(/static/fonts/Literata-latin-ext-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Literata; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url(/static/fonts/Literata-cyrillic-normal.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Literata; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url(/static/fonts/Literata-latin-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Literata; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url(/static/fonts/Literata-latin-ext-italic.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Literata; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url(/static/fonts/Literata-cyrillic-italic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

.story-text .read-book { margin: -8px 0 28px; }

html.bk-open, html.bk-open body { overflow: hidden; }

.book {
  --bk-paper: #fdfaf4;
  --bk-desk: var(--surface-tertiary);
  --bk-serif: Literata, "Iowan Old Style", Georgia, serif;
  --bk-safe-top: env(safe-area-inset-top, 0px);
  --bk-safe-bottom: env(safe-area-inset-bottom, 0px);
  position: fixed; inset: 0; z-index: 70; overflow: hidden;
  background: var(--bk-paper); color: var(--foreground);
  opacity: 0; transition: opacity 280ms var(--ease-move);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.book[data-theme="dark"] { --bk-paper: #14232b; --bk-desk: #0e1a20; }
.book.open { opacity: 1; }
.book.bk-spread { background: var(--bk-desk); }

/* The desk holds the stage; the stage is one page (phones, portrait) or a two-page spread (wide screens) */
.bk-desk { position: absolute; inset: 0; display: grid; place-items: center; touch-action: none; }
.bk-spread .bk-desk { inset: calc(60px + var(--bk-safe-top)) 0 calc(56px + var(--bk-safe-bottom)); }
.bk-stage { position: relative; }
.bk-single .bk-stage { overflow: hidden; }
.bk-spread .bk-stage { filter: drop-shadow(0 18px 28px rgba(35, 31, 26, 0.18)) drop-shadow(0 2px 4px rgba(35, 31, 26, 0.1)); }
.book[data-theme="dark"].bk-spread .bk-stage { filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.45)); }

/* A page */
.bk-page {
  position: absolute; top: 0; left: 0; width: var(--pw); height: var(--ph); overflow: hidden;
  background: var(--bk-paper); color: var(--foreground);
  display: flex; flex-direction: column;
  padding: var(--pad-top) var(--pad-x) var(--pad-bottom);
}
.bk-page.bk-R { left: var(--rx); }
.bk-spread .bk-page::after { content: ""; position: absolute; top: 0; bottom: 0; width: 44px; pointer-events: none; }
.bk-spread .bk-page.bk-L::after { right: 0; background: linear-gradient(to left, rgba(35, 31, 26, 0.13), rgba(35, 31, 26, 0.04) 30%, transparent); }
.bk-spread .bk-page.bk-R::after { left: 0; background: linear-gradient(to right, rgba(35, 31, 26, 0.16), rgba(35, 31, 26, 0.04) 30%, transparent); }
.book[data-theme="dark"].bk-spread .bk-page.bk-L::after { background: linear-gradient(to left, rgba(0, 0, 0, 0.35), transparent); }
.book[data-theme="dark"].bk-spread .bk-page.bk-R::after { background: linear-gradient(to right, rgba(0, 0, 0, 0.4), transparent); }

.bk-head, .bk-folio {
  position: absolute; left: var(--pad-x); right: var(--pad-x); text-align: center;
  font-family: var(--bk-serif); font-size: 12px; line-height: 16px; letter-spacing: 0.06em;
  color: var(--subtle-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: oldstyle-nums;
}
.bk-head { top: calc(var(--pad-top) - 34px); font-style: italic; letter-spacing: 0.02em; }
.bk-folio { bottom: calc(var(--pad-bottom) - 34px); }

.bk-body {
  flex: 1; min-height: 0; overflow: hidden; width: 100%; max-width: 32em; margin: 0 auto;
  font-family: var(--bk-serif); font-size: var(--fs); line-height: 1.6; font-optical-sizing: auto;
  text-align: justify; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 7 3 3;
  font-kerning: normal; font-variant-ligatures: common-ligatures; font-variant-numeric: oldstyle-nums;
  text-rendering: optimizeLegibility;
}
.bk-narrow .bk-body { text-align: left; } /* phones: too few words a line to justify without gaps */
.bk-body p { margin: 0; text-indent: 1.3em; }
.bk-body p.noindent, .bk-body p.cont, .bk-body p.first { text-indent: 0; }
.bk-body p.split { text-align-last: justify; }
.bk-narrow .bk-body p.split { text-align-last: auto; }
.bk-body p.first::first-letter {
  float: left; font-family: var(--font-display); font-weight: 500; color: var(--brand);
  font-size: 3.35em; line-height: 0.82; margin: 0.08em 0.08em 0 -0.02em;
}
.bk-body em { font-style: italic; }

/* Title page, picture pages, the end */
.bk-titlepage, .bk-endpage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; }
.bk-titlepage .bk-mark, .bk-endpaper .bk-mark { width: 56px; height: 56px; opacity: 0.9; }
.bk-titlepage h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(32px, calc(var(--pw) * 0.1), 52px); line-height: 1.08; letter-spacing: -0.015em; margin-top: 10px; text-wrap: balance; }
.bk-titlepage .bk-by { font-family: var(--bk-serif); font-size: 18px; font-style: italic; color: var(--muted-foreground); }
.bk-titlepage .bk-rule { width: 40px; height: 1px; background: var(--border-strong); margin: 10px 0; }
.bk-titlepage .bk-attr { font-family: var(--bk-serif); font-size: 13px; line-height: 20px; color: var(--subtle-foreground); max-width: 26em; text-wrap: balance; }
.bk-endpaper { display: grid; place-items: center; }
.bk-endpaper .bk-mark { opacity: 0.35; }

.bk-plate { flex: 1; min-height: 0; margin: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; }
.bk-plate img { flex: 0 1 auto; min-height: 0; width: 100%; height: auto; aspect-ratio: 928 / 1152; object-fit: contain; }
.book[data-theme="dark"] .bk-plate img { filter: brightness(0.86); }
.bk-plate figcaption { font-family: var(--bk-serif); font-style: italic; font-size: 15px; line-height: 20px; color: var(--muted-foreground); text-align: center; }

.bk-endpage .bk-fin { font-family: var(--font-display); font-size: 34px; line-height: 40px; }
.bk-endpage .bk-orn { font-family: var(--bk-serif); color: var(--brand); font-size: 22px; letter-spacing: 0.4em; margin-left: 0.4em; }
.bk-endpage .btn { margin-top: 14px; }

/* The turning page: its back (the flap) and the shadows that make it read as paper */
.bk-turn { position: absolute; top: 0; left: var(--rx); width: var(--pw); height: var(--ph); pointer-events: none; z-index: 3; }
.bk-flapwrap { filter: drop-shadow(0 0 10px rgba(35, 31, 26, 0.22)); }
.book[data-theme="dark"] .bk-flapwrap { filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.55)); }
.bk-flap { position: absolute; top: 0; left: 0; width: var(--pw); height: var(--ph); transform-origin: 0 0; overflow: hidden; background: var(--bk-paper); }
.bk-flap > .bk-page { left: 0; }
.bk-flap > .bk-page.bk-mirror { transform: scaleX(-1); }
.bk-flap .bk-ghost { position: absolute; inset: 0; background: var(--bk-paper); opacity: 0.86; }
.bk-shade { position: absolute; top: 0; left: 0; transform-origin: 0 0; pointer-events: none; }
.bk-sheet { z-index: 2; will-change: clip-path; }

/* Bars */
.bk-bar, .bk-foot { position: absolute; left: 0; right: 0; z-index: 10; transition: opacity 220ms var(--ease-move); }
.bk-bar {
  top: 0; height: calc(56px + var(--bk-safe-top)); padding: var(--bk-safe-top) 8px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--bk-paper);
}
.bk-spread .bk-bar { background: transparent; }
.bk-name { flex: 1; min-width: 0; text-align: center; font-family: var(--font-heading); font-size: 17px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-aa { font-family: var(--bk-serif); font-size: 18px; font-weight: 500; letter-spacing: -0.02em; }
.bk-aa[aria-expanded="true"] { background: var(--secondary); }
.bk-foot {
  bottom: 0; height: calc(48px + var(--bk-safe-bottom)); padding: 0 24px var(--bk-safe-bottom);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  font-size: 12px; line-height: 16px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; background: var(--bk-paper);
}
.bk-spread .bk-foot { background: transparent; }
.bk-progress { width: min(240px, 60%); height: 3px; border-radius: 2px; background: var(--track); overflow: hidden; }
.bk-progress > div { height: 100%; width: 0; background: var(--foreground); opacity: 0.55; transition: width 300ms var(--ease-move); }
.book.bk-calm .bk-bar, .book.bk-calm .bk-foot { opacity: 0; pointer-events: none; }
.book.bk-calm .bk-settings { display: none; }

.bk-settings {
  position: absolute; z-index: 11; top: calc(52px + var(--bk-safe-top)); right: 8px; width: 248px;
  display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: var(--radius-xl);
  background: var(--popover); color: var(--popover-foreground); box-shadow: var(--shadow-float);
}
.bk-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bk-row .btn { padding: 0 10px; }
.bk-size span { font-family: var(--bk-serif); line-height: 1; }

.bk-arrow { position: absolute; z-index: 9; top: 50%; margin-top: -22px; color: var(--muted-foreground); transition: opacity 220ms; }
.bk-arrow:disabled { opacity: 0; pointer-events: none; }
.bk-prev { left: max(8px, env(safe-area-inset-left)); }
.bk-next { right: max(8px, env(safe-area-inset-right)); }
@media (hover: none) { .bk-arrow { display: none; } }
.bk-single .bk-arrow { opacity: 0.6; }
.book.bk-calm.bk-single .bk-arrow { opacity: 0; }

.bk-fade { animation: bk-fade 180ms var(--ease-move); }
@keyframes bk-fade { from { opacity: 0.2; } to { opacity: 1; } }