/* ============================================================
   PACKET 04 · "Kamsi Learns to Read" — BOOK-SPECIFIC PARTS
   ------------------------------------------------------------
   Cover, certificate, and the early-reading activity
   components. Reuses tokens.css + pages.css verbatim.
   Home pillar: Media (teal). Soft, rounded, gentle — matches
   the first-three look.
   ============================================================ */

/* ===================== COVER (P1) ========================== */
.cover {
  background: var(--cream);
  text-align: center;
  align-items: center;
  justify-content: flex-start;
  padding: 0.75in 0.6in 0.6in;
}
.cover-eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.cover-eyebrow .ce-brand { color: var(--pillar-digital); }   /* rust */
.cover-eyebrow .ce-rest  { color: var(--pillar-media); }     /* teal */
.cover-title {
  align-self: stretch;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 52px;
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--pillar-media);
  margin: 0 0 10px;
}
body.title-marker .cover-title { letter-spacing: 0; font-style: italic; }
.cover-sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0 auto 16px;
  max-width: 34ch;
}
.cover-badge {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--pillar-media);
  border-radius: var(--r-pill);
  padding: 8px 20px;
  white-space: nowrap;
}
.cover-art {
  flex: 1 1 auto;
  width: 100%;
  min-height: 4.1in;
  margin: 18px 0 12px;
  display: flex;
  flex-direction: column;
  transform: scale(var(--hero-scale, 1));
  transform-origin: center;
}
.cover-art .art-needed,
.cover-art .art-color,
.cover-art .art-line { flex: 1 1 auto; width: 100%; min-height: 0; }
.cover-quote {
  align-self: stretch;
  margin: 0 0 14px;
  padding: 12px 22px;
  background: var(--pillar-8);
  border-radius: var(--r-sm);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 17px;
  color: var(--pillar-ink);
}
.cover-foot {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}

/* ============== FOR-GROWN-UPS FULL PAGE (P2) =============== */
.gp-page { justify-content: flex-start; }
.gp-lede {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink);
  margin: var(--s-4) 0 var(--s-5);
  max-width: 64ch;
}
.gp-section-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 19px;
  color: var(--pillar-ink);
  margin: 0 0 12px;
}
.gp-ideas { list-style: none; margin: 0 0 var(--s-5); padding: 0; }
.gp-ideas li { position: relative; padding-left: 26px; margin-bottom: 14px; }
.gp-ideas li::before {
  content: "";
  position: absolute; left: 0; top: 4px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--pillar);
}
.gp-ideas .gi-head {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  display: block;
  margin-bottom: 2px;
}
.gp-ideas .gi-body {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ============== SHARED CORNER HELPER (real art) =========== */
.helper {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
.helper-fig { flex: none; background: var(--cream); }
.helper-fig img { display: block; height: 100%; width: 100%; object-fit: contain; mix-blend-mode: multiply; }
.helper .bubble { max-width: 230px; }

/* ============== P3 · HOW A BOOK WORKS ===================== */
.print-aware {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 24px;
  align-items: center;
}
.pa-hero { height: 3.5in; background: var(--cream); }
.pa-notes { display: flex; flex-direction: column; gap: 14px; }
.pa-note {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink);
}
.pa-note .pa-ar {
  flex: none;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: 20px;
  color: var(--pillar);
}
.pa-note b { color: var(--pillar-ink); font-weight: 700; }
.read-this-way {
  margin-top: 4px;
  padding: 12px 16px;
  background: var(--pillar-8);
  border-radius: var(--r-md);
  text-align: center;
}
.read-this-way .rtw-label {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 16px;
  color: var(--pillar-ink);
}
.read-this-way .rtw-line {
  margin-top: 8px;
  height: 0;
  border-top: 3px dotted var(--pillar);
  position: relative;
}
.read-this-way .rtw-line::after {
  content: "→";
  position: absolute; right: -2px; top: -13px;
  color: var(--pillar);
  font-weight: 700;
}

/* ============== P4 · OBJECT GRID ========================== */
.obj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.obj-cell { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.obj-cell .art-needed { width: 100%; aspect-ratio: 1 / 0.82; }
.obj-cell .obj-prompt { font-family: var(--font-sans); font-weight: 500; font-size: 13px; color: var(--ink); }
.obj-cell .obj-prompt b { color: var(--pillar-ink); font-weight: 700; }
.first-sound-foot { display: flex; justify-content: flex-end; margin-top: var(--s-4); }

/* ============== P5 · RHYME ROWS =========================== */
.rhyme-list { display: flex; flex-direction: column; gap: 14px; }
.rhyme-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  padding: 14px; background: var(--pillar-8);
  border: 1.5px solid var(--pillar-bd); border-radius: var(--r-md);
}
.rhyme-item { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.rhyme-pic {
  width: 88px; height: 88px;
  border: 2px solid var(--pillar-bd); border-radius: var(--r-pill);
  background: #fff; display: flex; align-items: center; justify-content: center; font-size: 38px;
}
.rhyme-word { font-family: var(--font-serif); font-weight: 600; font-size: 18px; color: var(--ink); }
.rhyme-hint { text-align: center; font-family: var(--font-serif); font-style: italic; font-size: 15px; color: var(--pillar-ink); margin-top: 4px; }

/* ============== P6 · CLAP ================================= */
.clap-wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 24px; align-items: center; }
.clap-hero { height: 3.2in; background: var(--cream); }
.clap-list { display: flex; flex-direction: column; gap: 14px; }
.clap-word {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 16px; background: var(--pillar-8);
  border: 1.5px solid var(--pillar-bd); border-radius: var(--r-md);
}
.clap-syl { font-family: var(--font-serif); font-weight: 700; font-size: 21px; color: var(--ink); }
.clap-syl .sep { color: var(--pillar); padding: 0 2px; }
.clap-dots { display: flex; gap: 9px; }
.clap-dots .dot { width: 24px; height: 24px; border: 2px solid var(--pillar-bd); border-radius: 50%; background: #fff; }
.clap-count { font-family: var(--font-sans); font-weight: 700; font-size: 13px; color: var(--pillar-ink); }

/* ============== P7 / P8 · TRACE LETTERS =================== */
.letters-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.letter-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 8px; background: var(--pillar-8);
  border: 1.5px solid var(--pillar-bd); border-radius: var(--r-md);
}
.trace-letter {
  font-family: var(--font-serif); font-weight: 700; font-size: 72px; line-height: 0.92;
  color: transparent;
  -webkit-text-stroke: 2.5px var(--pillar);
  text-stroke: 2.5px var(--pillar);
}
.letter-sound { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 18px; color: var(--pillar-ink); }
.letter-key { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 100%; }
.letter-key .art-needed { width: 100%; aspect-ratio: 1 / 0.78; }
.letter-key .lk-word { font-family: var(--font-sans); font-weight: 500; font-size: 12px; color: var(--ink); }
.letters-foot { display: flex; justify-content: flex-end; margin-top: var(--s-4); }

/* ============== P9 · BLEND IT ============================= */
.blend-list { display: flex; flex-direction: column; gap: 18px; }
.blend-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sound-box {
  width: 66px; height: 66px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-weight: 700; font-size: 30px;
  color: var(--cream); border-radius: var(--r-md);
  box-shadow: var(--shadow-soft);
}
.sound-box.s1 { background: var(--pillar-media); }
.sound-box.s2 { background: var(--pillar-civic); color: var(--ink); }
.sound-box.s3 { background: var(--pillar-digital); }
.blend-plus { font-family: var(--font-sans); font-weight: 700; font-size: 22px; color: var(--ink-mute); }
.blend-fast { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 15px; color: var(--pillar-ink); margin: 0 4px; }
.blend-word { font-family: var(--font-serif); font-weight: 700; font-size: 32px; letter-spacing: 0.02em; color: var(--ink); text-transform: uppercase; }
.blend-pic { width: 74px; }
.blend-pic .art-needed { aspect-ratio: 1 / 1; }

/* ============== P10 · I CAN READ ========================= */
.read-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 22px; }
.read-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px; background: var(--pillar-8);
  border: 1.5px solid var(--pillar-bd); border-radius: var(--r-md);
}
.read-item .ri-pic { width: 50px; }
.read-item .ri-pic .art-needed { aspect-ratio: 1 / 1; }
.read-item .ri-word {
  flex: 1; font-family: var(--font-serif); font-weight: 700; font-size: 24px;
  letter-spacing: 0.05em; text-transform: uppercase; color: transparent;
  -webkit-text-stroke: 1.5px var(--pillar);
}
.read-item .ri-check { flex: none; width: 24px; height: 24px; border: 2px solid var(--pillar-bd); border-radius: var(--r-xs); background: #fff; }

/* ============== P11 · SIGHT WORDS ======================== */
.sight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sight-card {
  aspect-ratio: 1 / 0.62; display: flex; align-items: center; justify-content: center;
  background: var(--pillar-8); border: 2px solid var(--pillar-bd); border-radius: var(--r-md);
  font-family: var(--font-serif); font-weight: 700; font-size: 40px; letter-spacing: 0.03em;
  color: transparent; -webkit-text-stroke: 2px var(--pillar);
}

/* ============== P12 · SENTENCE =========================== */
.sentence-build {
  padding: 20px 24px; background: var(--pillar-8);
  border: 1.5px solid var(--pillar-bd); border-radius: var(--r-md);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-family: var(--font-serif); font-weight: 700; font-size: 32px; color: var(--ink);
}
.sentence-build .blank { display: inline-block; min-width: 190px; border-bottom: 3px dotted var(--pillar); height: 40px; }
.picture-bank { margin-top: 16px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pb-label { grid-column: 1 / -1; font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }
.pb-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pb-item .art-needed { width: 100%; aspect-ratio: 1 / 0.85; }
.pb-item span { font-family: var(--font-sans); font-weight: 500; font-size: 12px; color: var(--ink); }

/* ============== P13 · READ WITH ME ======================= */
.story-wrap { display: grid; grid-template-columns: 1fr 0.6fr; gap: 24px; align-items: center; }
.story-card {
  background: #fff; border: 1.5px solid var(--pillar-bd); border-radius: var(--r-md);
  box-shadow: var(--shadow-soft); padding: 24px 28px;
}
.story-card .sc-line {
  font-family: var(--font-serif); font-weight: 600; font-size: 25px; line-height: 1.6; color: var(--ink);
  border-bottom: 2px dotted var(--ink-faint); padding-bottom: 6px; margin-bottom: 12px;
}
.story-card .sc-line:last-child { border-bottom: none; margin-bottom: 0; }
.story-card .sc-line b { color: var(--pillar-ink); }
.story-hero { height: 3.0in; background: var(--cream); }

/* ============== P14 · WHY, THOUGH ======================== */
.why-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: center; }
.why-hero { height: 3.4in; background: var(--cream); }
.why-text { display: flex; flex-direction: column; gap: 18px; }
.why-big { font-family: var(--font-serif); font-weight: 700; font-size: 27px; line-height: 1.25; color: var(--ink); }
.why-big em { color: var(--pillar-ink); font-style: italic; }

/* ============== P15 · STREAK ============================= */
.streak-wrap { display: grid; grid-template-columns: 1fr 0.72fr; gap: 24px; align-items: center; }
.streak-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; color: var(--pillar); }
.streak-star { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; position: relative; }
.streak-star svg { width: 100%; height: 100%; }
.streak-num { position: absolute; font-family: var(--font-sans); font-weight: 800; font-size: 15px; color: var(--pillar-ink); }
.streak-hero { height: 2.6in; }

/* ============== P16 · CERTIFICATE ======================== */
.cert { background: var(--cream); text-align: center; align-items: center; justify-content: center; padding: 0.7in; }
.cert-frame {
  width: 100%; flex: 1 1 auto;
  background: var(--cream);
  border: 3px solid var(--pillar-media); border-radius: var(--r-lg);
  padding: 34px 40px; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.cert-frame > * { flex-shrink: 0; }
.cert-frame::before {
  content: ""; position: absolute; inset: 9px;
  border: 1.5px solid var(--pillar-civic); border-radius: var(--r-md); pointer-events: none;
}
.cert-star { width: 78px; height: 78px; margin-bottom: 14px; color: var(--pillar-media); }
.cert-kicker {
  font-family: var(--font-sans); font-weight: 700; font-size: 13px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--pillar-digital); margin-bottom: 12px;
}
.cert-title {
  align-self: stretch; font-family: var(--font-serif); font-weight: 700; font-size: 38px;
  line-height: 1.1; color: var(--pillar-media); margin: 0 0 26px;
}
.cert-name { width: 70%; max-width: 420px; }
.cert-name .cn-rule { border-bottom: 2px solid var(--ink); height: 34px; }
.cert-name .cn-label { font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--ink-mute); margin-top: 7px; }
.cert-cheer { display: flex; gap: 20px; align-items: flex-end; justify-content: center; margin-top: 34px; height: 1.05in; }
.cert-cheer img { display: block; height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.cert-grass {
  align-self: stretch; height: 16px; margin-top: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='16'%3E%3Cg stroke='%232D2D2D' stroke-width='1.6' fill='none' stroke-linecap='round'%3E%3Cpath d='M8 16 L6 5 M8 16 L11 7 M8 16 L8 3'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center bottom;
}
.cert-foot {
  margin-top: 18px; font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--ink-mute);
}

/* title-marker tweak — affects in-book titles too */
body.title-marker .page-title,
body.title-marker .cert-title { font-style: italic; letter-spacing: 0; }