/* ============================================================
   Hope Springs — READING STARS stylesheet  (early phonics readers)
   Oxford Reading Club "Reading Stars" picture-word worksheets.
   Link from a lesson:  <link rel="stylesheet" href="readingstars.css">

   Fully self-contained — it does NOT touch the other stylesheets, so
   editing it can never change the grammar / Happy Readers / Clunk lessons.

   These sheets print A3 LANDSCAPE (the originals are A3): a ring of
   pictures around a central word bank, each picture over a 4-line
   handwriting rule. Tracing hints and the sentence page use the
   "Nilam Tracing ABC Shapes" font (hollow dotted letters to trace).
   ============================================================ */

/* ---- Tracing font: Nilam Tracing ABC Shapes (hollow outline letters).
        Embedded so it prints anywhere. ---- */
@font-face {
  /* Hollow DOTTED tracing letters. Naturally a short x-height, so .ink stretches
     it vertically (scaleY) to fill the writing line top-to-baseline while keeping
     the dotted look. (fonts/Nilam.ttf is the tall thin monoline alternative.) */
  font-family: "NilamTracing";
  src: url("fonts/NilamTracingABCShapes.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
/* ---- Reading font: Andika (SIL literacy font), for the word bank,
        instructions and titles. ---- */
@font-face {
  font-family: "Andika";
  src: url("fonts/Andika-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Andika";
  src: url("fonts/Andika-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --font-kid:   "Andika", "Comic Sans MS", "Segoe Print", sans-serif;
  --font-trace: "NilamTracing", "Andika", sans-serif;
  --font-jp:
    "HGMaruGothicMPRO", "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN",
    "Yu Gothic", sans-serif;

  /* Reading Stars palette — bright, print-safe */
  --star:  #f5a623;   /* gold star accent */
  --sky:   #2ca3d6;   /* ribbon / titles  */
  --grape: #7b5ea7;   /* matching dots    */
  --paper: #fffdf6;   /* warm page        */
  --ink:   #22303a;   /* body text        */
  --line:  #33586b;   /* writing lines    */
  --red:   #e11d1d;   /* dotted midlines  */

  /* Tunable sizes (mm/pt) — one place to nudge the whole page fit. */
  --pic-h:   49mm;    /* picture height in the ring          */
  --write-h: 19mm;    /* 4-line writing rule height          */
  --gap:     6mm;     /* gap between ring cells              */
}

/* ---- Page setup: A3 landscape for printing ---- */
@page { size: A3 landscape; margin: 0; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font-kid);
  color: var(--ink);
  background: #e9eef2;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.page {
  position: relative;
  width: 420mm;
  min-height: 293mm;          /* not a full 297: avoids a near-empty extra sheet */
  padding: 10mm 12mm 11mm;
  background: var(--paper);
  display: flex;
  flex-direction: column;
}
.page + .page { page-break-before: always; }

/* ---- Top ribbon: series + book, with a star ---- */
.brand {
  display: flex; align-items: center; gap: 12px;
  background: var(--sky);
  color: #fff;
  border-radius: 14px;
  padding: 7px 18px;
  font-weight: 700;
  font-size: 18pt;
  box-shadow: 0 2px 0 rgba(0,0,0,.12);
}
.brand .star { color: var(--star); font-size: 22pt; line-height: 1; text-shadow: 0 1px 0 rgba(0,0,0,.15); }
.brand .book { margin-left: auto; font-weight: 400; opacity: .95; }

/* ---- Instruction line (with optional Japanese support) ---- */
.instr {
  margin: 8px 2px 4px;
  font-size: 16pt;
  font-weight: 700;
}
.instr .jp {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 12pt;
  color: #5a6b76;
  margin-left: 12px;
}

/* =====================================================================
   THE PICTURE RING (parts 1 & 2)
   4 columns × 3 rows. The middle row's two inner cells merge into the
   centre panel (word bank on the hints page, title on the blank page).
   ===================================================================== */
.ring {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto auto;
  gap: var(--gap);
  align-content: space-between;
  margin-top: 4px;
}
.cell { display: flex; flex-direction: column; }
.pic {
  width: 100%;
  height: var(--pic-h);
  object-fit: cover;
  border-radius: 12px;
  border: 4px solid #fff;
  box-shadow: 0 0 0 3px #dfe6ec;
  background: #eef2f5;
}

/* Centre panel spans the two inner columns of the middle row */
.centre {
  grid-column: 2 / 4;
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
}
/* word bank (hints page) */
.bank {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 8px 18px;
  font-size: 26pt; font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.bank .w { white-space: nowrap; }
/* big book title (blank page) */
.booktitle {
  font-size: 46pt; font-weight: 700;
  color: var(--sky);
  text-align: center;
  line-height: 1.1;
}
.booktitle .star { color: var(--star); }

/* ---- 4-line writing rule under each picture ----
   top solid, red dotted centre (x-height), solid baseline, red dotted
   descender line. Given tracing letters sit in .ink on the baseline. */
.write {
  position: relative;
  height: var(--write-h);
  margin-top: 6px;
  background-repeat: no-repeat;
  background-image:
    repeating-linear-gradient(to right, var(--red) 0 6px, transparent 6px 12px), /* descender */
    linear-gradient(var(--line), var(--line)),                                    /* baseline  */
    repeating-linear-gradient(to right, var(--red) 0 6px, transparent 6px 12px), /* centre    */
    linear-gradient(var(--line), var(--line));                                    /* top       */
  background-size: 100% 2px, 100% 2.4px, 100% 2px, 100% 2.4px;
  background-position: 0 100%, 0 66.66%, 0 33.33%, 0 0;
}
/* the row of letters: given letters (traceable) + blank slots, resting
   with their baseline on the rule's baseline (66.66% down). */
.ink {
  position: absolute;
  left: 8px; right: 8px;
  bottom: 33.33%;                 /* baseline of the 4-line rule */
  /* seat the baseline on the line, then stretch tall to fill it (dotted font
     is short) — scaled from the bottom so the baseline stays put. */
  transform: translateY(9%) scaleY(1.45);
  transform-origin: center bottom;
  display: flex;
  align-items: flex-end;
  font-family: var(--font-trace);
  color: var(--ink);
  font-size: 34pt;
  line-height: 1;
  letter-spacing: 1px;
}
.ink .g { color: var(--ink); }                 /* a given letter to trace */
.ink .b { color: transparent; }                /* a blank slot to fill in */
.ink .sp { width: 10px; }                       /* a small word-gap */

/* =====================================================================
   THE SENTENCE + PICTURE MATCH (part 3)
   Left: sentences to trace and copy. Right: shuffled pictures.
   Draw a line to match; copy the sentence on the rule.
   ===================================================================== */
.match {
  flex: 1;
  display: flex;
  gap: 12mm;
  margin-top: 6px;
}
/* left: the sentences, each on its own 4-line rule with a blank rule below */
.sheets { flex: 1.25; display: flex; flex-direction: column; justify-content: space-between; }
/* right: a free "pool" the picture chips are scattered across */
.pool { flex: 1; position: relative; }

.srow {
  position: relative;
  padding-right: 28px;            /* room for the match dot */
}
.srow .write { height: 20mm; }                 /* both rules a bit taller here */
.srow .write.copy { margin-top: 6px; }         /* the blank copy rule */
.srow .write .ink {
  left: 4px; right: 4px;
  font-size: 31pt;                             /* stretched ~1.45x, so keep the base modest */
  white-space: nowrap;
}

/* the match dot (right edge of a sentence, on a picture chip) */
.dot {
  position: absolute;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--grape);
}
.srow .dot { right: 0; top: 50%; transform: translateY(-50%); }

/* a scattered picture chip: small framed picture + a match dot */
.chip { position: absolute; width: 38mm; }
.chip img {
  width: 100%;
  height: 29mm;
  object-fit: cover;
  border-radius: 12px;
  border: 4px solid #fff;
  box-shadow: 0 3px 6px rgba(0,0,0,.20), 0 0 0 3px #dfe6ec;
  background: #eef2f5;
}
.chip .dot { left: -9px; top: 50%; transform: translateY(-50%); }

/* ---- Footer: note + page number star ---- */
.foot {
  margin-top: 8px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.foot .note { font-size: 12pt; color: #5a6b76; }
.pageno {
  position: relative;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 15pt;
}
.pageno::before {
  content: "★";
  position: absolute; inset: 0;
  color: var(--star);
  font-size: 40px; line-height: 40px; text-align: center;
  z-index: 0;
}
.pageno span { position: relative; z-index: 1; color: #6a4a00; }

/* ---- Screen preview only ---- */
@media screen {
  body { padding: 16px; }
  .page {
    margin: 0 auto 18px;
    box-shadow: 0 2px 14px rgba(0,0,0,.18);
  }
}