:root {
  --paper: #f5f0e6;
  --ink: #141414;
  --panel-bg: #ffffff;
  --caption: #ffe27a;
  --highlight: #e8a400;
  --gutter: 12px;
  --muted: #555;
  --bar: rgba(245, 240, 230, 0.96);
  --chip: #fff;
  --brand-2: #6419f9;
}

/* Dark theme of the published page (index.html.j2 sets data-theme: the app's choice, else the
   device's). Only the page around the comic: the pages themselves stay on paper. Not in the app,
   which loads this file too and has its own theme (body.app). */
:root[data-theme="dark"] body:not(.app) {
  color-scheme: dark;
  --paper: #16141c;
  --ink: #ebe7f2;
  --muted: #aaa4b6;
  --bar: rgba(22, 20, 28, 0.96);
  --chip: #2a2633;
  --brand-2: #9a6bff;
  --highlight: #ffb21a;
}
:root[data-theme="dark"] body:not(.app) .story { --paper: #f5f0e6; --ink: #141414; color: #141414; }
:root[data-theme="dark"] body:not(.app) .page { border-color: #8a84a0; box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.45); }

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 16px 32px;
  background: var(--paper);
  color: var(--ink);
  font-family: "Comic Neue", "Comic Sans MS", "Chalkboard SE", sans-serif;
}

.masthead { max-width: 1100px; margin: 0 auto; padding: 24px 0 8px; }
.masthead h1 {
  margin: 0;
  font-family: "Outfit", "Comic Neue", sans-serif; /* the sans of the logo, with lower case */
  font-weight: 800;
  font-size: clamp(2rem, 6vw, 3.4rem);
  letter-spacing: 0.005em;
}

.credits { margin: 4px 0 0; font-size: 13px; color: var(--muted); }

.story { max-width: 1100px; margin: 0 auto; display: grid; gap: 28px; }

.page {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--gutter);
  padding: var(--gutter);
  background: var(--panel-bg);
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.18);
}

.panel {
  margin: 0;
  border: 3px solid var(--ink);
  background: var(--ink);
  outline: 5px solid transparent;
  outline-offset: 2px;
  transition: outline-color 0.25s;
}
.has-audio .panel { cursor: pointer; }
.panel.active { outline-color: var(--highlight); }

.art { position: relative; overflow: hidden; container-type: inline-size; }
.art img { display: block; width: 100%; height: auto; }

/* Fonts, sizes and colours come from the story (typography.py: --speech-font, --caption-fill...),
   set on the story element; --text-scale is the [-] [+] of each text (caption, line) in the editor. */
.caption, .offscreen {
  position: relative;
  margin: 0;
  padding: 6px 10px;
  background: var(--fill);
  color: var(--text);
  font-family: var(--font);
  border-bottom: 2px solid var(--ink);
  font-size: calc(clamp(12px, 4.2cqi, 16px) * var(--size) * var(--text-scale, 1));
  font-weight: 700;
}
.caption {
  --font: var(--caption-font, inherit); --size: var(--caption-size, 1);
  --text: var(--caption-color, var(--ink)); --fill: var(--caption-fill, var(--caption));
}
.offscreen {
  --font: var(--offscreen-font, inherit); --size: var(--offscreen-size, 1);
  --text: var(--offscreen-color, var(--ink)); --fill: var(--offscreen-fill, #fff6d0);
}
.caption { position: absolute; top: 0; left: 0; max-width: 70%; border-right: 2px solid var(--ink); }
/* Moved or resized in the editor: a box with a border on every side. */
.caption.moved { max-width: none; border: 2px solid var(--ink); }

.back-link {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--chip);
  color: var(--ink);
  font: 700 14px "Comic Neue", sans-serif;
  text-decoration: none;
}
.back-link:hover { background: var(--caption); color: #141414; }
@media print { .back-link { display: none; } }
/* Lines of people not in the picture: a caption strip inside the bottom of the
   image, so every panel keeps the picture's proportions. */
.offscreens { position: absolute; left: 0; right: 0; bottom: 0; }
.offscreen { font-style: italic; font-weight: 400; border-top: 2px solid var(--ink); border-bottom: 0; }

.balloon {
  position: absolute;
  left: 0;
  top: 0;
  max-width: 62%;
  margin: 0;
  padding: 7px 12px;
  background: var(--fill);
  color: var(--text);
  font-family: var(--font);
  border: 2px solid var(--ink);
  border-radius: 1.6em;
  font-size: calc(clamp(12px, 4.4cqi, 17px) * var(--size) * var(--text-scale, 1));
  line-height: 1.2;
  text-align: center;
  visibility: hidden; /* shown once player.js has placed it */
}
.balloon.placed { visibility: visible; }
.balloon-speech {
  --font: var(--speech-font, inherit); --size: var(--speech-size, 1);
  --text: var(--speech-color, var(--ink)); --fill: var(--speech-fill, #fff);
}
.balloon-shout {
  --font: var(--shout-font, inherit); --size: var(--shout-size, 1);
  --text: var(--shout-color, var(--ink)); --fill: var(--shout-fill, #fff);
}
.balloon-thought {
  --font: var(--thought-font, inherit); --size: var(--thought-size, 1);
  --text: var(--thought-color, var(--ink)); --fill: var(--thought-fill, #fff);
}
.balloon-song {
  --font: var(--song-font, inherit); --size: var(--song-size, 1);
  --text: var(--song-color, var(--ink)); --fill: var(--song-fill, #f3ecff);
}
.balloon-shout { font-weight: 700; border-radius: 6px; border-width: 3px; }
.balloon-thought { border-style: dashed; }
/* Sung lines: a wavy musical balloon with notes around the words (the notes are in the text) */
.balloon-song { font-style: italic; border-style: double; border-width: 4px; border-radius: 1.6em 1.1em 1.5em 1.2em / 1.1em 1.6em 1em 1.5em; }

/* Tail: a triangle pointing at the speaker; --tail-x is set by player.js */
.balloon::after, .balloon::before {
  content: "";
  position: absolute;
  left: var(--tail-x, 50%);
  width: 0;
  height: 0;
  border: 10px solid transparent;
  transform: translateX(-50%);
}
.balloon.tail-down::before { top: 100%; border-top-color: var(--ink); border-bottom: 0; border-width: 13px 9px 0; }
.balloon.tail-down::after { top: calc(100% - 3px); border-top-color: var(--fill); border-bottom: 0; border-width: 12px 7px 0; }
.balloon.tail-up::before { bottom: 100%; border-bottom-color: var(--ink); border-top: 0; border-width: 0 9px 13px; }
.balloon.tail-up::after { bottom: calc(100% - 3px); border-bottom-color: var(--fill); border-top: 0; border-width: 0 7px 12px; }
.balloon-thought::before, .balloon-thought::after { display: none; }

/* ?play when the browser wants a tap before the sound: a big ▶ over the page. */
.play-start {
  position: fixed; left: 50%; top: 50%; z-index: 30; transform: translate(-50%, -50%);
  width: 96px; height: 96px; padding: 0 0 0 6px; border: 3px solid rgba(255, 255, 255, 0.9); border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(20, 20, 20, 0.55); color: #fff; cursor: pointer; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
}
@media print { .play-start { display: none; } }

.made-with {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 1100px;
  margin: 28px auto 0;
  font-size: 13px;
  color: var(--muted);
}
.made-with img { width: 28px; height: 28px; }
.made-with span { font-family: "Outfit", "Comic Neue", sans-serif; font-weight: 800; font-size: 15px; letter-spacing: 0; color: var(--ink); }
.made-with b { font-weight: inherit; color: var(--brand-2); font-size: 1.28em; line-height: 0; vertical-align: -0.05em; } /* the larger "2" of the logo */

/* Audio controls: under the title, then kept at the top of the window while reading. */
.player {
  position: sticky;
  top: 0;
  z-index: 20; /* over the balloons and captions */
  margin: 8px -16px 20px;
  padding: 10px 16px;
  background: var(--bar);
  border-bottom: 2px solid var(--ink);
}
.player audio { display: block; width: 100%; max-width: 1100px; margin: 0 auto; }

@media print {
  body, :root[data-theme="dark"] body:not(.app) { padding: 0; background: #fff; --paper: #fff; --ink: #141414; color: #141414; } /* paper, also in the dark theme */
  :root[data-theme="dark"] body:not(.app) .page { border-color: #141414; }
  .player { display: none; }
  .story { gap: 0; max-width: none; }
  .page { box-shadow: none; break-after: page; break-inside: avoid; }
  .page:last-child { break-after: auto; }
  .panel { break-inside: avoid; outline: none; }
  .balloon { visibility: visible; }
}