/* ============================================================
   TINY CEO BOOKLET — DESIGN SYSTEM
   For children aged 4–7, read with a parent or grandparent.
   A5 page size (148mm × 210mm).
   ============================================================ */

/* ----- Fonts (loaded via index.html <link> for performance) ----- */

:root {
  /* Type */
  --font-display: "Fredoka One", "Fredoka", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* BYOC ink */
  --ink: #111827;
  --ink-soft: #374151;
  --muted: #6B7280;
  --rule: #E5E7EB;

  /* Journey accents */
  --money: #10B981;     /* green — Adventure 1 (Where money comes from) */
  --ai: #F59E0B;        /* amber — Adventure 2 (Saving for what I love) */
  --bitcoin: #3B82F6;   /* blue — Adventure 3 (Taking care of what I have) */
  --tiny: #7C3AED;      /* purple — Tiny CEO brand */

  /* Speech bubble colours per character */
  --luna: var(--tiny);
  --finn: var(--money);
  --mila: var(--bitcoin);

  /* Page tints — softened "cream-paper" versions */
  --tint-cover:  #F6F1FF;   /* very soft purple-cream */
  --tint-a1:     #FFF7DD;   /* amber-cream — pride */
  --tint-bridge: #FFF1D8;   /* warm cream — between A1 and A2 */
  --tint-a2:     #FFEFDC;   /* peach — patience */
  --tint-a3:     #EAF2FF;   /* blue-cream — care */
  --tint-closing:#F6F1FF;   /* matches cover, brand bookends */

  /* Speech-bubble fills (soft tints of the speaker colour) */
  --bubble-luna: #F1ECFE;
  --bubble-finn: #E6F8F0;
  --bubble-mila: #E8F0FE;

  /* A5 page size */
  --page-w: 148mm;
  --page-h: 210mm;
  --page-pad: 14mm;

  /* Parent-prompt footer is a fixed-height strip at the bottom of every
     page. Content above it gets a matching padding-bottom so a long
     speech bubble can never overlap the prompt. */
  --footer-h: 24mm;
  --footer-buffer: 4mm;

  /* Soft corners everywhere */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-pill: 999px;
}

/* ----- Reset ----- */

*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.45;
  background: #ECEAE6;       /* warm grey "table" colour around pages on screen */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* On-screen viewer wrapper */
.booklet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14mm;
  padding: 14mm 6mm;
}

/* ============================================================
   PAGE
   ============================================================ */

.page {
  position: relative;
  width: var(--page-w);
  height: var(--page-h);
  padding: var(--page-pad);
  background: #FFFFFF;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 6px 24px rgba(17, 24, 39, 0.10),
              0 1px 3px rgba(17, 24, 39, 0.06);
  break-after: page;
  page-break-after: always;
}

.page:last-child { break-after: auto; page-break-after: auto; }

/* Per-section tints */
.page--cover    { background: var(--tint-cover); }
.page--front    { background: #FFFFFF; }
.page--a1       { background: var(--tint-a1); }
.page--bridge   { background: var(--tint-bridge); }
.page--a2       { background: var(--tint-a2); }
.page--a3       { background: var(--tint-a3); }
.page--closing  { background: var(--tint-closing); }

/* The main content area sits in the top grid row, the parent
   prompt sits in the bottom row. The page-content can scroll-
   conceptually but never overflow on print. */

/* Content area fills the page above the fixed-height parent prompt.
   We SHRINK the box (via height calc) rather than reserve space with
   padding-bottom — overflow:hidden clips at the padding edge of the
   box, so padding would NOT prevent content from leaking onto the
   footer. A short box + overflow:hidden does. */
.page-content {
  height: calc(100% - var(--footer-h) - var(--footer-buffer));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 5mm;
  min-height: 0;
  overflow: hidden;
}

/* Pages without a parent prompt (cover, welcome, mission line) reclaim
   the full content area. */
.page--no-prompt .page-content { height: 100%; }

/* Variants for content alignment */
.page-content--top    { justify-content: flex-start; padding-top: 4mm; }
.page-content--bottom { justify-content: flex-end; padding-bottom: 2mm; }
.page-content--split  { justify-content: space-between; }
.page-content--left   { align-items: flex-start; text-align: left; }
.page-content--right  { align-items: flex-end; text-align: right; }

/* ============================================================
   PAGE NUMBER + ADVENTURE TAG
   ============================================================ */

.page-number {
  position: absolute;
  bottom: 6mm;
  right: 8mm;
  font-family: var(--font-body);
  font-size: 9pt;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.adv-tag {
  position: absolute;
  top: 6mm;
  left: 8mm;
  font-family: var(--font-body);
  font-size: 8pt;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.adv-tag--a1 { color: var(--money); }
.adv-tag--a2 { color: var(--ai); }
.adv-tag--a3 { color: var(--bitcoin); }
.adv-tag--tiny { color: var(--tiny); }

/* ============================================================
   PARENT PROMPT (footer strip on every story page)
   ============================================================ */

/* Fixed-height footer strip, anchored to the bottom of the page.
   Same vertical position on every page → consistent rhythm. */
.parent-prompt {
  position: absolute;
  left: var(--page-pad);
  right: var(--page-pad);
  bottom: var(--page-pad);
  height: var(--footer-h);
  padding-top: 4mm;
  border-top: 1px dashed var(--rule);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4mm;
  align-items: start;
  overflow: hidden;
}

.parent-prompt__label {
  font-family: var(--font-body);
  font-size: 7.5pt;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--tiny);
  white-space: nowrap;
  padding-top: 1mm;
}

.parent-prompt__body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 10pt;
  line-height: 1.45;
  font-style: italic;
  color: var(--muted);
}

/* For the occasional longer grown-up prompt that must stay verbatim:
   a touch smaller + tighter so it fits the fixed-height footer strip
   without clipping. Still well-readable for an adult. */
.parent-prompt__body--long {
  font-size: 8.5pt;
  line-height: 1.32;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0;
}

.display--xxl { font-size: 56pt; }       /* cover */
.display--xl  { font-size: 40pt; }       /* identity claim, closing lines */
.display--lg  { font-size: 32pt; }       /* big single-line moments */
.display--md  { font-size: 24pt; }       /* section titles */
.display--sm  { font-size: 18pt; }       /* small headings */

.body-lg {
  font-family: var(--font-body);
  font-size: 18pt;
  line-height: 1.45;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

.body-md {
  font-family: var(--font-body);
  font-size: 15pt;
  line-height: 1.5;
  font-weight: 500;
  color: var(--ink-soft);
  margin: 0;
}

.body-sm {
  font-family: var(--font-body);
  font-size: 12pt;
  line-height: 1.5;
  font-weight: 500;
  color: var(--ink-soft);
  margin: 0;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 9pt;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 3mm;
}

.eyebrow--money   { color: var(--money); }
.eyebrow--ai      { color: var(--ai); }
.eyebrow--bitcoin { color: var(--bitcoin); }
.eyebrow--tiny    { color: var(--tiny); }

/* Pull quote — the closing-line callouts in each adventure */
.pullquote {
  font-family: var(--font-display);
  font-size: 26pt;
  line-height: 1.18;
  color: var(--ink);
  text-align: center;
  padding: 8mm 4mm;
  position: relative;
  max-width: 110mm;
}

.pullquote::before,
.pullquote::after {
  content: "";
  display: block;
  width: 16mm;
  height: 3px;
  border-radius: 2px;
  margin: 4mm auto;
  background: currentColor;
  opacity: 0.25;
}

.pullquote--tiny    { color: var(--tiny); }
.pullquote--money   { color: var(--money); }
.pullquote--ai      { color: var(--ai); }
.pullquote--bitcoin { color: var(--bitcoin); }

/* ============================================================
   BYOC BRAND MARK ("Be Your Own CEO" with the three colours)
   ============================================================ */

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.18em;
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink);
}

.brand small {
  font-family: var(--font-body);
  font-weight: 800;
  letter-spacing: 0.05em;
  font-size: 0.55em;
  text-transform: uppercase;
}

/* The "CEO" letters carry the three journey colours: C green, E amber, O blue. */
.brand .c   { color: var(--money); }
.brand .e,
.brand .ai  { color: var(--ai); }
.brand .o   { color: var(--bitcoin); }

.brand--tiny {
  font-family: var(--font-display);
  font-size: 18pt;
  letter-spacing: 0.04em;
  color: var(--tiny);
  text-transform: uppercase;
}

/* ============================================================
   CHARACTER IMAGES
   ============================================================ */

.character {
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.character--full   { max-height: 52%; max-width: 70%; height: auto; width: auto; }
.character--hero   { max-height: 56%; max-width: 80%; height: auto; width: auto; }
.character--med    { max-height: 36%; max-width: 50%; height: auto; width: auto; }
.character--head   {
  width: 40mm;
  height: 40mm;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  border: 4px solid #FFFFFF;
  box-shadow: 0 2px 10px rgba(17, 24, 39, 0.10);
}
.character--head-lg {
  width: 56mm;
  height: 56mm;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  border: 5px solid #FFFFFF;
  box-shadow: 0 2px 10px rgba(17, 24, 39, 0.10);
}
.character--trio   { max-height: 65%; max-width: 92%; height: auto; width: auto; }

/* ============================================================
   SPEECH BUBBLES
   Soft-cornered, intimate. Tail points to the speaker.
   ============================================================ */

.bubble {
  position: relative;
  max-width: 110mm;
  padding: 5mm 7mm;
  border-radius: var(--r-lg);
  font-family: var(--font-body);
  font-size: 14pt;
  line-height: 1.35;
  font-weight: 600;
  text-align: left;
  margin: 1mm 0;
}

.bubble p { margin: 0 0 2.5mm; }
.bubble p:last-child { margin-bottom: 0; }

/* Larger bubble for opening-line moments */
.bubble--display {
  font-size: 17pt;
  font-weight: 600;
  line-height: 1.35;
}

.bubble--luna {
  background: var(--bubble-luna);
  color: var(--luna);
}

.bubble--finn {
  background: var(--bubble-finn);
  color: var(--finn);
}

.bubble--mila {
  background: var(--bubble-mila);
  color: var(--mila);
}

/* Small attribution above each bubble */
.bubble-attr {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 9pt;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 2mm 8mm;
}

.bubble-attr--luna { color: var(--luna); }
.bubble-attr--finn { color: var(--finn); }
.bubble-attr--mila { color: var(--mila); }

/* Two-column scene: character on left, bubble on right (or vice versa) */
.scene {
  display: grid;
  grid-template-columns: 50mm 1fr;
  gap: 6mm;
  align-items: center;
  width: 100%;
  text-align: left;
}

.scene--reverse {
  grid-template-columns: 1fr 50mm;
}

.scene--reverse > .scene__char { order: 2; justify-self: end; }
.scene--reverse > .scene__words { order: 1; }

.scene__char {
  display: flex;
  align-items: center;
  justify-content: center;
}

.scene__char img { width: 100%; height: auto; max-height: 90mm; object-fit: contain; }

.scene__words { display: flex; flex-direction: column; align-items: flex-start; }

/* ============================================================
   WRITING / DRAWING SPACES
   ============================================================ */

.write-prompt {
  font-family: var(--font-body);
  font-size: 16pt;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4mm;
}

.write-lines {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8mm;
  padding: 2mm 4mm;
}

.write-lines__line {
  height: 1.6mm;
  background-image: linear-gradient(to right, var(--rule) 60%, transparent 60%);
  background-size: 6mm 1.6mm;
  background-repeat: repeat-x;
  background-position: 0 50%;
}

.draw-box {
  width: 100%;
  flex: 1 1 auto;
  border: 2px dashed var(--rule);
  border-radius: var(--r-lg);
  background: #FFFFFF;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 4mm;
}

.draw-box__corner {
  position: absolute;
  bottom: 4mm;
  right: 4mm;
  width: 22mm;
  height: auto;
  opacity: 0.85;
}

.draw-box__corner--left {
  left: 4mm; right: auto;
  bottom: 4mm;
}

/* Two draw-boxes side by side — the "choose between two" page in Adventure 2.
   Reuses .draw-box; this just lays a pair out in two equal columns. */
.draw-pair {
  width: 100%;
  flex: 1 1 auto;
  min-height: 58mm;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5mm;
}

.draw-pair .draw-box {
  min-height: 0;
  height: 100%;
}

/* Jar shape for Adventure 2. Sized to leave room for the saving tracker
   below it on the same page. */
.jar {
  width: 60mm;
  height: 66mm;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 0 auto;
}

.jar__neck {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 34mm;
  height: 7mm;
  background: #FFFFFF;
  border: 2px dashed var(--ai);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
}

.jar__body {
  width: 56mm;
  height: 52mm;
  background: #FFFFFF;
  border: 2px dashed var(--ai);
  border-radius: 8px 8px 28px 28px;
  margin-top: 6mm;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 9pt;
  color: var(--muted);
  text-align: center;
  padding: 4mm;
}

/* Saving progress tracker — a row of coins to colour in, below the jar.
   "Watch them grow", no number target. */
.coin-track {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4mm;
  margin-top: 2mm;
  width: 100%;
  max-width: 110mm;
}

.coin-track__coin {
  width: 10mm;
  height: 10mm;
  border-radius: 50%;
  border: 2px dashed var(--ai);
  background: #FFFFFF;
  flex: 0 0 auto;
}

.coin-track__label {
  font-family: var(--font-body);
  font-size: 10pt;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ai);
  margin: 2mm 0 0;
  max-width: 110mm;
}

/* "My first coin came from..." box on the bridge page */
.coin-box {
  width: 100%;
  max-width: 110mm;
  border: 2px solid var(--tiny);
  border-radius: var(--r-lg);
  padding: 6mm 7mm;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  gap: 4mm;
  text-align: left;
}

.coin-box__lead {
  font-family: var(--font-body);
  font-size: 13pt;
  font-weight: 700;
  color: var(--tiny);
  margin: 0;
}

.coin-box__line {
  border-bottom: 2px dashed var(--rule);
  height: 9mm;
}

/* Care pledge box for Adventure 3 */
.pledge {
  width: 100%;
  border: 2px solid var(--bitcoin);
  border-radius: var(--r-lg);
  padding: 8mm 7mm;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  gap: 6mm;
}

.pledge__title {
  font-family: var(--font-display);
  font-size: 18pt;
  color: var(--bitcoin);
  margin: 0 0 2mm;
  text-align: center;
}

.pledge__line {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4mm;
  align-items: end;
}

.pledge__lead {
  font-family: var(--font-body);
  font-size: 14pt;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.pledge__blank {
  border-bottom: 2px dashed var(--rule);
  height: 9mm;
}

/* Completion certificate — the graduation page before the bridge to MiniCEO.
   Marks finishing all three adventures as an explicit moment. */
.certificate {
  width: 100%;
  max-width: 118mm;
  border: 3px solid var(--tiny);
  border-radius: var(--r-lg);
  padding: 8mm 9mm;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4mm;
  text-align: center;
}

.certificate__kicker {
  font-family: var(--font-body);
  font-size: 11pt;
  font-weight: 700;
  color: var(--ink-soft);
  margin: 0;
}

.certificate__name { width: 100%; max-width: 86mm; }

.certificate__name-line {
  border-bottom: 2px dashed var(--tiny);
  height: 11mm;
}

.certificate__name-label {
  font-family: var(--font-body);
  font-size: 8.5pt;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1.5mm 0 0;
}

.certificate__title {
  font-family: var(--font-display);
  font-size: 30pt;
  color: var(--tiny);
  margin: 1mm 0;
}

.certificate__identities {
  display: flex;
  flex-direction: column;
  gap: 2.5mm;
}

.certificate__brand { margin: 2mm 0 0; }

/* ============================================================
   COVER PAGE
   ============================================================ */

.cover-frame {
  position: relative;
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 4mm;
  text-align: center;
  align-items: center;
  justify-items: center;
}

.cover-frame__top { padding-top: 4mm; }

.cover-frame__art {
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 100%;
}

.cover-frame__art img {
  max-height: 110mm;
  max-width: 100%;
  height: auto;
  width: auto;
}

.cover-frame__bottom { padding-bottom: 4mm; }

.cover-title {
  font-family: var(--font-display);
  color: var(--tiny);
  font-size: 60pt;
  letter-spacing: 0.01em;
  line-height: 1;
  margin: 0;
}

.cover-tagline {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13pt;
  color: var(--ink-soft);
  margin: 4mm 0 0;
}

.cover-byline {
  font-family: var(--font-body);
  font-size: 11pt;
  color: var(--muted);
  margin-top: 6mm;
}

/* Three-dot decoration in journey colours */
.dots {
  display: inline-flex;
  gap: 4mm;
  margin: 3mm auto;
}

.dots span {
  width: 6mm;
  height: 6mm;
  border-radius: 50%;
}

.dots .d1 { background: var(--money); }
.dots .d2 { background: var(--ai); }
.dots .d3 { background: var(--bitcoin); }

/* ============================================================
   MEET-THE-CAST CARD
   ============================================================ */

.cast {
  display: grid;
  /* minmax(0,1fr) lets each column shrink below its content's intrinsic
     min-width — without it, a long word like "grandmother" can blow out
     the column and push text past the card's right edge. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 4mm;
  width: 100%;
  align-items: stretch;
}

.cast__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #FFFFFF;
  border-radius: var(--r-lg);
  padding: 4mm 4mm;
  box-shadow: 0 1px 4px rgba(17,24,39,0.06);
  gap: 3mm;
  min-width: 0;
  overflow: hidden;
}

/* Circular avatar wrapper — the wrapper carries the circle clip,
   so a transform on the inner img gets clipped to the circle (a
   transform on the img alone escapes border-radius). */
.cast__card-img {
  width: 30mm;
  height: 30mm;
  border-radius: 50%;
  overflow: hidden;
  background: #FFFFFF;
  flex-shrink: 0;
}

.cast__card-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 28%;
}

/* Mila's source PNG is already tightly cropped to head + shoulders;
   the other two include more of the body, so we zoom them in to
   make all three circles read as the same scale of headshot. */
.cast__card-img img[src*="Luna_Circle"],
.cast__card-img img[src*="Finn_Circle"] {
  transform: scale(1.55);
  transform-origin: center 30%;
}

.cast__name {
  font-family: var(--font-display);
  font-size: 16pt;
  margin: 0;
}

.cast__name--luna { color: var(--luna); }
.cast__name--finn { color: var(--finn); }
.cast__name--mila { color: var(--mila); }

.cast__role {
  font-family: var(--font-body);
  font-size: 9pt;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin: 0;
}

.cast__line {
  font-family: var(--font-body);
  font-size: 9.5pt;
  line-height: 1.35;
  color: var(--ink-soft);
  margin: 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

/* ============================================================
   ADVENTURE TITLE PAGE (the cover for each adventure)
   ============================================================ */

.adv-cover {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  text-align: center;
  align-items: center;
  justify-items: center;
}

.adv-cover__num {
  font-family: var(--font-body);
  font-weight: 800;
  letter-spacing: 0.3em;
  font-size: 11pt;
  text-transform: uppercase;
  margin: 0;
}

.adv-cover__title {
  font-family: var(--font-display);
  font-size: 40pt;
  line-height: 1.05;
  margin: 4mm 0 6mm;
  color: var(--ink);
}

.adv-cover__feeling {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 13pt;
  color: var(--ink-soft);
  margin: 0;
}

.adv-cover__identity {
  font-family: var(--font-display);
  font-size: 22pt;
  margin: 4mm 0 0;
}

.adv-cover__art {
  display: flex;
  align-items: center;
  justify-content: center;
}

.adv-cover__art img {
  max-height: 90mm;
  max-width: 100%;
}

.adv-cover--a1 .adv-cover__num,
.adv-cover--a1 .adv-cover__identity { color: var(--money); }
.adv-cover--a2 .adv-cover__num,
.adv-cover--a2 .adv-cover__identity { color: var(--ai); }
.adv-cover--a3 .adv-cover__num,
.adv-cover--a3 .adv-cover__identity { color: var(--bitcoin); }

/* ============================================================
   UTILITY
   ============================================================ */

.center { text-align: center; }
.full   { width: 100%; }
.stack  { display: flex; flex-direction: column; gap: 4mm; }
.stack--lg { gap: 8mm; }
.stack--xl { gap: 12mm; }
.row    { display: flex; gap: 6mm; align-items: center; justify-content: center; }
.spacer { flex: 1; }
.sr-only {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

/* Pages with no prompt simply hide the footer; .page-content reclaims
   the full height via the .page--no-prompt rule above. */
.page--no-prompt .parent-prompt { display: none; }

/* Welcome / front matter: pretty signature line for the child's name */
.belongs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6mm;
  margin: 6mm 0;
}

.belongs__label {
  font-family: var(--font-body);
  font-size: 13pt;
  font-weight: 700;
  color: var(--ink-soft);
}

.belongs__line {
  width: 90mm;
  height: 14mm;
  border-bottom: 2px dashed var(--tiny);
  position: relative;
}

/* Decorative star/heart confetti dots used sparingly */
.confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.confetti span {
  position: absolute;
  width: 4mm;
  height: 4mm;
  border-radius: 50%;
}

/* ============================================================
   LANGUAGE TOGGLE (screen-only)
   Floating EN / NL switcher so a reader who lands on one
   language can reach the other. Hidden in print via the
   .screen-only rule in print.css.
   ============================================================ */

.lang-toggle {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  box-shadow: 0 4px 16px rgba(17, 24, 39, 0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--font-body);
}

.lang-toggle__icon {
  font-size: 15px;
  line-height: 1;
  margin: 0 4px 0 6px;
  opacity: 0.65;
}

.lang-toggle__opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 32px;       /* comfortable tap target on phones */
  padding: 0 12px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--muted);
  transition: background 0.15s ease, color 0.15s ease;
}

.lang-toggle__opt:hover {
  background: #F1ECFE;     /* soft tiny-purple tint */
  color: var(--tiny);
}

.lang-toggle__opt[aria-current="true"] {
  background: var(--tiny);
  color: #FFFFFF;
}