/* Home page showpieces: the hero collage and the "one story, four ways" picker.
   Flat style, as everywhere: borders, no shadows, no gradients.

   The scraps, the book cover, the spreads, the book page, the slides and the
   quote card are printed things. tokens.css gives them the light palette in
   both modes, so the hex border colours of the scraps below are correct in
   dark mode too. The tabs, the pager and the text beside them follow the
   theme. */

:root {
  --font-hand: "Caveat", "Bradley Hand", "Segoe Print", cursive;
  --font-type: "Special Elite", "Courier New", Courier, monospace;
}

/* Paper scraps, shared by the hero and the "from the box" row */
.scrap { background: var(--white); border: 1px solid var(--line); border-radius: 6px; color: var(--ink); }
.scrap-letter {
  padding: 18px 20px; font-family: var(--font-hand); font-size: 1.45rem; line-height: 1.25;
  background: var(--paper); border-color: #D9CDB3;
}
.scrap-letter .date { display: block; text-align: right; font-size: 1.15rem; color: var(--ink-soft); margin-bottom: 4px; }
.scrap-letter .sign { display: block; text-align: right; margin-top: 6px; }
.scrap-photo { padding: 10px 10px 8px; }
.scrap-photo img { display: block; width: 100%; border-radius: 2px; }
.scrap-photo span { display: block; font-family: var(--font-hand); font-size: 1.2rem; text-align: center; padding-top: 4px; }
.scrap-stub { padding: 14px 16px; font-family: var(--font-type); font-size: 0.82rem; line-height: 1.5; background: var(--marigold-tint); border-color: #E6CFA0; }
.scrap-stub b { display: block; letter-spacing: 0.06em; border-bottom: 1.5px solid var(--ink); padding-bottom: 4px; margin-bottom: 6px; }
.scrap-stub dl { display: grid; grid-template-columns: auto 1fr; gap: 0 14px; margin: 0; }
.scrap-stub dd { margin: 0; text-align: right; }
.scrap-audio { padding: 16px 18px; background: var(--sage-tint); border-color: #CFDACF; }
.scrap-audio .wave { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.scrap-audio .play { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; }
.scrap-audio .bars { flex: 1; height: 32px; display: flex; align-items: center; gap: 3px; overflow: hidden; }
.scrap-audio .bars i { flex: 1; min-width: 2px; background: var(--sage-dark); border-radius: 2px; }
.scrap-audio q { display: block; font-size: 1rem; line-height: 1.45; quotes: "\201C" "\201D"; }

/* Hero collage: the box on the left, the book on the right */
.hero-art { margin: 0; }
.hero-art-grid { display: grid; grid-template-columns: 1fr 34px 0.82fr; gap: 10px; align-items: center; padding: 10px 6px; }
.pile { display: grid; }
.pile .scrap-letter { transform: rotate(-3deg); position: relative; z-index: 1; font-size: 1.25rem; }
.pile .scrap-photo { width: 62%; margin: -22px 0 0 auto; transform: rotate(4deg); position: relative; z-index: 2; }
.pile .scrap-stub { width: 74%; margin-top: -30px; transform: rotate(-2deg); position: relative; z-index: 3; }
.pile .scrap-audio { width: 80%; margin-top: -26px; transform: rotate(-2deg); position: relative; z-index: 3; padding: 12px 14px; }
.pile .scrap-audio q { font-size: 0.85rem; }
.pile .scrap-audio .wave { margin-bottom: 6px; }
/* A typed page, for a person who typed and did not write by hand */
.scrap-typed { font-family: var(--font-type); font-size: 0.95rem !important; line-height: 1.5; }
.scrap-typed .date { font-size: 0.75rem; }
.hero-arrow { color: var(--ink); }
/* The box, with the book that comes out of it in front */
.box-and-book { position: relative; padding: 0 12% 54% 0; }
.mini-book {
  position: absolute; right: 0; bottom: 0; width: 44%; aspect-ratio: 3 / 4; box-sizing: border-box;
  background: var(--marigold); color: #1F2A44; border: 2px solid #1F2A44; border-left-width: 8px; border-radius: 3px 8px 8px 3px;
  padding: 10% 8%; display: flex; flex-direction: column; transform: rotate(5deg); text-align: left;
}
.mini-book b { font-family: var(--font-display); font-weight: 600; font-size: clamp(0.95rem, 2vw, 1.3rem); line-height: 1.1; }
.mini-book span { font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; margin-top: auto; }
.box-card {
  aspect-ratio: 3 / 4; background: var(--panel); color: var(--on-panel); border-radius: 12px;
  border-top: 16px solid var(--marigold); padding: 9% 10%; display: flex; flex-direction: column; text-align: center;
}
.box-card .peach { width: 54%; margin: 4% auto 8%; }
.box-card b { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 3.2vw, 2rem); line-height: 1.1; color: var(--on-panel); }
.box-card span { font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--marigold); margin-top: 8px; }
.box-card small { margin-top: auto; font-size: 0.8rem; color: var(--on-panel-soft); }
.hero-art figcaption { font-size: 0.9rem; color: var(--muted); margin-top: 18px; text-align: center; }
@media (max-width: 480px) {
  .hero-art-grid { grid-template-columns: 1fr 22px 0.8fr; gap: 6px; }
  .pile .scrap-letter { font-size: 1.05rem; padding: 12px 14px; }
  .pile .scrap-stub { font-size: 0.62rem; padding: 10px; width: 86%; }
  .pile .scrap-photo span { font-size: 0.95rem; }
}

/* From the box: three sources in a row */
.box-row { display: grid; grid-template-columns: 1.15fr 0.9fr 1.1fr; gap: 20px; align-items: start; }
.box-item { margin: 0; }
.box-item figcaption { font-size: 0.9rem; color: var(--muted); margin-top: 10px; }
.box-item figcaption b { color: var(--ink); }
.box-item:nth-child(1) .scrap { transform: rotate(-1deg); }
.box-item:nth-child(2) .scrap { transform: rotate(1.2deg); }
@media (max-width: 900px) {
  .box-row { grid-template-columns: 1fr; max-width: 460px; }
  .box-item .scrap { transform: none !important; }
}
.becomes { display: flex; align-items: center; gap: 14px; margin: 44px 0 20px; font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); }
.becomes::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.format-panel { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 36px; align-items: start; margin-bottom: 48px; }
.js .format-panel { margin-bottom: 0; }
.format-panel[hidden] { display: none; }
.format-about h3 { font-size: 1.5rem; }
.format-about .built { font-size: 0.9rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 14px; margin-top: 18px; }
@media (max-width: 900px) { .format-panel { grid-template-columns: 1fr; gap: 20px; } }

/* Pager: one page at a time when scripts run { display: grid; gap: 16px; }

/* Picture book */
.spread {
  display: grid; grid-template-columns: 1fr 1fr; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.spread img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.spread-text { padding: 8% 9%; display: flex; flex-direction: column; justify-content: center; border-left: 1px solid var(--line); }
.spread-text p { font-family: var(--font-display); font-size: clamp(1.15rem, 2.1vw, 1.5rem); line-height: 1.35; color: var(--ink); margin: 0 0 0.6em; }
.spread-text p:last-of-type { margin-bottom: 0; }
.spread-text .hand { font-family: var(--font-hand); font-size: 1.25em; }
.spread-text .folio { margin-top: 16px; font-size: 0.85rem; color: var(--muted); }
@media (max-width: 620px) {
  .spread { grid-template-columns: 1fr; }
  .spread-text { border-left: 0; border-top: 1px solid var(--line); padding: 22px 22px 24px; min-height: 190px; }
}

/* Book page */
.print-page {
  background: var(--white); border: 1px solid var(--line); border-radius: 4px; max-width: 520px;
  padding: 44px 48px 28px; font-family: Georgia, "Times New Roman", serif; font-size: 1rem; line-height: 1.7; color: var(--ink);
}
.print-page .chapter { text-indent: 0; font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); text-align: center; margin: 0; }
.print-page h4 { font-size: 1.7rem; text-align: center; margin: 6px 0 24px; }
.print-page p { text-indent: 1.4em; margin: 0; }
.print-page h4 + p { text-indent: 0; }
.print-page h4 + p::first-letter { font-family: var(--font-display); font-size: 3.1em; float: left; line-height: 0.85; padding: 6px 8px 0 0; }
.print-page sup { font-family: var(--font-body); font-size: 0.65em; font-weight: 700; color: var(--sage-dark); }
.print-page figure { margin: 22px 0 0; }
.print-page figure img { display: block; width: 100%; border: 1px solid var(--line); }
.print-page figcaption { font-size: 0.82rem; font-style: italic; color: var(--muted); text-align: center; margin-top: 6px; }
.print-page ol { margin: 22px 0 0; padding: 14px 0 0 1.4em; border-top: 1px solid var(--line); font-family: var(--font-body); font-size: 0.8rem; line-height: 1.5; color: var(--muted); }
.print-page .folio { text-indent: 0; text-align: center; font-size: 0.85rem; color: var(--muted); margin-top: 18px; }
@media (max-width: 520px) { .print-page { padding: 28px 22px 20px; } }

/* Reunion slides. Type scales with the slide {
  container-type: inline-size; aspect-ratio: 16 / 9; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--paper); color: var(--ink); overflow: hidden;
}

/* The hidden attribute must win over the display rules above. */
[data-page][hidden] { display: none; }
.scrap-photo img, .print-page figure img { height: auto; }

/* The promo video on the home page. The file loads only after a press on play. */
.promo-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #FBF6EC; border: 1px solid var(--line); border-radius: var(--radius); }