:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

/* Layout: one book opening at a time on a reading table; art across the top of each spread, text set on the page below, turn with buttons, arrows or swipe. Book paper is fixed in both themes. */
:root {
  --table: #D7EAEE;
  --chrome: #1F3A4D;
  --chrome-muted: #5B7383;
  --btn: #FFFFFF;
  --btn-line: #A9C6CE;
  --paper: #FFFDF8;
  --paper-ink: #23384A;
  --paper-muted: #637889;
  --rust: #E4574A;
  --letter: "Grandstander", "Comic Sans MS", system-ui, sans-serif;
  --book: "Literata", Georgia, "Times New Roman", serif;
  --sk-paper:#FBFDFD; --sk-ink:#23384A; --sk-gutter:#9BB0BC;
  --sk-skin:#F7D2B4; --sk-blush:#F4A09A; --sk-mouth:#B9474A;
  --sk-hair:#A0612E; --sk-hair2:#3B2A20; --sk-hair3:#D9A441; --sk-white:#ECECEA;
  --sk-shirt:#E4574A; --sk-stripe:#FFFFFF; --sk-shirt2:#7FB77E; --sk-shirt8:#4E8FD1;
  --sk-shirt13:#4A566A; --sk-flannel:#B5473A; --sk-shirt23:#E3EAF0; --sk-tie:#2E6A8E;
  --sk-run:#F08A3C; --sk-shirt33:#4F918B; --sk-cardigan:#9C7BB0; --sk-pants:#3D5A80;
  --sk-wall:#F1EEDD; --sk-wall2:#D6D9E8; --sk-floor:#D9B98C; --sk-wood:#B9895A;
  --sk-tile:#DDF0F2; --sk-grout:#B5D6DB; --sk-floor2:#A3CDD3;
  --sk-tub:#FFFFFF; --sk-bubble:#EAF8FB; --sk-water:#6BC4D3; --sk-duck:#F7C531; --sk-beak:#F08A2C;
  --sk-mud:#8C6A43; --sk-mudwater:#D6BD95; --sk-fizz:#F3A6C8; --sk-towel:#9ED3C2;
  --sk-speech:#FFFFFF; --sk-truck:#4E8FD1; --sk-bin:#7FB77E; --sk-cat:#9AA0B4;
  --sk-boat:#E4574A; --sk-comic:#F7C531; --sk-stink:#8BAA4A; --sk-metal:#B8C4CC;
  --sk-glass:#CFE9EE; --sk-curtain:#F2B8A6; --sk-bottle:#E86FA0; --sk-sky:#D3ECF5; --sk-grass:#A6CD86;
  --sk-tent:#E8A33D; --sk-tentdoor:#7A4E1E; --sk-flame:#F59A2B; --sk-fog:#E3ECEE;
  --sk-night:#203A5C; --sk-moon:#FCE7A1; --sk-box:#D2AE7C; --sk-candle:#FFFFFF; --sk-ice:#D2F0FA;
  --sk-chair:#C5885A; --sk-basin:#9FB8C4; --sk-nightwall:#2B3F5E; --sk-nightfloor:#1E2D45;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --table:#10212B; --chrome:#E4EEF2; --chrome-muted:#93AAB6; --btn:#1A303C; --btn-line:#2F4B59; color-scheme: dark; }
}
:root[data-theme="dark"] { --table:#10212B; --chrome:#E4EEF2; --chrome-muted:#93AAB6; --btn:#1A303C; --btn-line:#2F4B59; color-scheme: dark; }

html, body { min-height: 100%; }
body { background: var(--table); color: var(--chrome); font-family: var(--book); }
.reader { max-width: 1160px; margin: 0 auto; padding-inline: 16px; padding-block: 24px 40px; display: grid; gap: 18px; }

.bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bar h1 { font-family: var(--letter); font-weight: 900; font-size: 20px; letter-spacing: .04em; text-transform: uppercase; margin: 0; }
.bar .where { margin-left: auto; font-family: var(--letter); font-weight: 700; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--chrome-muted); font-variant-numeric: tabular-nums; }

.stage { display: grid; justify-items: center; }
.page { background: var(--paper); color: var(--paper-ink); border-radius: 3px; box-shadow: 0 1px 2px rgba(40,30,20,.18), 0 14px 40px -12px rgba(40,30,20,.45); position: relative; width: 100%; overflow: hidden; }
.page.single { max-width: 470px; }
.page.spread::after { content: ""; position: absolute; inset: 0 auto 0 50%; width: 70px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(60,40,20,.10) 46%, rgba(60,40,20,.16) 50%, rgba(60,40,20,.10) 54%, transparent); pointer-events: none; }
.page svg { display: block; width: 100%; height: auto; }

.words { display: grid; grid-template-columns: 1fr 1fr; }
.words > div { padding: 18px clamp(18px, 4vw, 52px) clamp(22px, 3.2vw, 40px); display: grid; align-content: start; gap: .6em; }
.words p { margin: 0; font-size: clamp(16px, 1.75vw, 21px); line-height: 1.5; max-width: 34ch; }
.words .r p { margin-left: auto; }
.words p.v { max-width: 40ch; line-height: 1.45; }
.words .r p.v { text-align: right; }
.words .ref { font-style: italic; }
.words .loud { font-family: var(--letter); font-weight: 900; letter-spacing: .03em; font-size: 1.25em; line-height: 1; }
@media (max-width: 620px) {
  .words { grid-template-columns: 1fr; }
  .words > div { padding-block: 12px 4px; }
  .words > div:last-child { padding-bottom: 22px; }
  .words .r p { margin-left: 0; }
  .page.spread::after { display: none; }
}

/* cover */
.cover { position: relative; }
.cover .titleblock { position: absolute; inset: 0 0 auto 0; padding: 26px 26px 0; text-align: left; }
.cover .t { font-family: var(--letter); font-weight: 900; text-transform: uppercase; line-height: .88; font-size: clamp(42px, 11vw, 62px); letter-spacing: .01em; margin: 0; text-wrap: balance; }
.cover .t span { color: var(--rust); }
.cover .by { margin-top: 12px; font-family: var(--letter); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 15px; color: var(--paper-muted); }

/* title spread & back */
.front { display: grid; grid-template-columns: 1fr 1fr; min-height: clamp(420px, 52vw, 600px); }
.front > div { display: grid; align-content: center; justify-items: center; gap: 18px; padding: 40px clamp(20px, 4vw, 56px); text-align: center; }
.front .ded { font-style: italic; font-size: clamp(16px, 1.7vw, 20px); max-width: 26ch; line-height: 1.5; margin: 0; }
.front .small { font-size: 12.5px; color: var(--paper-muted); max-width: 32ch; margin: 0; line-height: 1.5; }
.front .t { font-family: var(--letter); font-weight: 900; text-transform: uppercase; line-height: .9; font-size: clamp(34px, 4.6vw, 58px); margin: 0; text-wrap: balance; }
.front .t span { color: var(--rust); }
.front .by { font-family: var(--letter); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 15px; color: var(--paper-muted); margin: 0; }
.vignette { width: min(150px, 60%); }
@media (max-width: 620px) { .front { grid-template-columns: 1fr; } .page.spread.front-page::after { display:none; } }
.back { display: grid; gap: 14px; padding: 34px 30px 0; }
.back p { margin: 0; font-size: 17px; line-height: 1.55; }
.back .blurb-t { font-family: var(--letter); font-weight: 900; font-size: 26px; text-transform: uppercase; line-height: 1; }
.back .ages { font-family: var(--letter); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 13px; color: var(--paper-muted); }

/* controls */
.controls { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.controls button.turn { font-family: var(--letter); font-weight: 900; font-size: 17px; letter-spacing: .08em; text-transform: uppercase; background: var(--btn); color: var(--chrome); border: 1.5px solid var(--btn-line); border-radius: 999px; padding: 9px 20px; cursor: pointer; }
.controls button.turn:disabled { opacity: .35; cursor: default; }
.controls button:focus-visible, .dots button:focus-visible { outline: 2.5px solid var(--rust); outline-offset: 2px; }
.dots { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; max-width: 100%; }
.dots button { width: 12px; height: 12px; padding: 0; border-radius: 50%; border: 1.5px solid var(--chrome-muted); background: transparent; cursor: pointer; }
.dots button[aria-current="true"] { background: var(--rust); border-color: var(--rust); }
.hint { text-align: center; font-size: 13px; color: var(--chrome-muted); margin: 0; }

@media (prefers-reduced-motion: no-preference) {
  .page { animation: turn .35s ease-out; }
  @keyframes turn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* illustration rendering: the storyboard's clean ink-and-flat-color style */
.ill path, .ill rect, .ill circle, .ill ellipse { stroke: var(--sk-ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ill .ns, .ill .bg { stroke: none; }
.ill .limb { stroke-width: 4.5; }
.ill .arm { stroke-width: 3.5; }
.ill .thin { stroke-width: 1.3; }
.ill text { stroke: none; fill: var(--sk-ink); font-family: var(--letter); font-weight: 800; }
.ill text.big { stroke: var(--sk-ink); stroke-width: 1.4; paint-order: stroke; }