/* Read. Play. Atelier. Reading Notebook. Shared engine styles.
   One copy. Edit here and every lesson changes.
   Rooted in the Science of Reading. Grown with care. */


/* ============================================================
   READ. PLAY. ATELIER.  Reading Notebook
   MASTER LESSON TEMPLATE. Engine version 12. Ten page blueprint.
   Page types: doorway, invitation, teach, tryit, sweep, parts,
               wordcards, match, oddone, beats, lettertiles, soundtiles,
               read, play,
               listen, choose,
               atelier, apply, brainbreak, practice, sort, minibook,
               reflection, closing.
   To build the next lesson, copy this file and edit LESSON only.
   ============================================================ */

:root{
  --navy:#064789; --olive:#679436; --tan:#e8b262; --rose:#d87c74;
  --cream:#fdf8f0; --bark:#2a3d1c; --steel:#427aa1;
  --stage:var(--olive); --stage-soft:#eef2e6;
  /* approved sound colours. used whenever letters are colour coded. */
  --vowel:#d87c74; --letter-b:#427aa1; --letter-d:#e8b262; --glued:#a5be00;
  /* the three strands. read navy, play olive, atelier tan yellow. */
  --read:#064789; --play:#679436; --atelier:#e8b262;
  /* atelier tan on cream needs a darker ink for small type to stay readable */
  --e8b262-atelier:#c07f22;
  --page-w:816px;
  --nav-h:58px;      /* bottom bar */
  --brand-h:44px;    /* wordmark strip */
  --title:'Fredoka One','Nunito',system-ui,sans-serif;
  --body:'Nunito',system-ui,sans-serif;
  --hand:'Caveat','Nunito',cursive;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--body);color:var(--bark);
  background:#f2f3ef;
  display:flex;flex-direction:column;align-items:center;
  padding:10px 14px 0;
  height:100dvh;overflow:hidden;
}
.paper{
  background-color:#fff;
  background-image:
    repeating-linear-gradient(92deg, rgba(42,61,28,.016) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(4deg, rgba(42,61,28,.012) 0 1px, transparent 1px 6px);
}
/* the notebook sits on the desk and is sized by the screen, never the other
   way round. a pre-reader should never have to scroll. */
/* The notebook is sized by the screen, never the other way round.
   A pre-reader should never have to scroll.
   Column, not row. The brandbar sits on top. The page takes the rest. */
.shell{
  width:100%;max-width:1500px;margin:0 auto;
  height:calc(100dvh - var(--nav-h));
  display:flex;flex-direction:column;
}
#stagewrap{
  flex:1;min-height:0;
  display:flex;align-items:center;justify-content:center;
}
.brandbar{
  height:var(--brand-h);flex:0 0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  /* the All lessons and For grown ups buttons are fixed to the top corners.
     inset the wordmark and the tagline so nothing sits underneath them. */
  padding:0 150px;margin:0;
}
/* the real mark, not a typeset stand in */
.brandbar .mark{display:flex;align-items:center;height:100%;text-decoration:none}
.brandbar .mark img{display:block;height:30px;width:auto;max-width:230px;object-fit:contain}
@media (max-width:620px){ .brandbar .mark img{height:24px} }
.brandbar .rooted{font-family:var(--hand);font-size:20px;color:var(--steel)}

.page{
  position:relative;height:100%;width:auto;aspect-ratio:16/10;max-width:100%;max-height:100%;border-radius:18px;overflow:hidden;
  box-shadow:0 22px 44px rgba(42,61,28,.16), 0 2px 0 rgba(255,255,255,.7) inset;
  border:1px solid rgba(42,61,28,.10);display:none;container-type:size;margin:0 auto;
}
.page.on{display:block;animation:rise .34s ease both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.inner{position:absolute;inset:0;padding:6cqh 6cqh 8cqh;display:flex;flex-direction:column}

.crest{position:absolute;top:0;left:0;right:0;height:13cqh;background:var(--stage-soft);border-radius:0 0 60% 40% / 0 0 22% 30%}
.crest .stagename{position:absolute;right:7.5cqh;top:3.2cqh;text-align:right}
.crest .stagename b{display:block;font-family:var(--title);font-size:4.6cqh;color:var(--stage);line-height:1}
.crest .stagename i{display:block;font-style:normal;font-family:var(--hand);font-size:3.4cqh;color:var(--stage);opacity:.9;margin-top:.4cqh}

h1.ptitle{font-family:var(--title);font-size:7.2cqh;line-height:1.06;margin:0 0 2.5cqh;color:var(--bark)}
h1.ptitle.sm{font-size:6cqh}
.eyebrow{font-family:var(--body);font-weight:800;font-size:2.5cqh;letter-spacing:.18em;text-transform:uppercase;color:var(--stage);margin:0 0 1.6cqh}
/* the three strands always keep their own colour, on every page, in every stage */
.eyebrow.read{color:var(--navy)}
.eyebrow.play{color:var(--olive)}
.eyebrow.atelier{color:var(--e8b262-atelier,#c07f22)}
.body-copy{font-size:3.5cqh;line-height:1.62;margin:0 0 2cqh;max-width:62ch}
.body-copy.big{font-size:4cqh}

.steps{list-style:none;margin:1cqh 0 0;padding:0}
.steps li{font-size:3.9cqh;line-height:1.5;padding:1.7cqh 0 1.7cqh 7cqh;position:relative;border-bottom:1px dashed rgba(42,61,28,.16)}
.steps li:last-child{border-bottom:0}
.steps li::before{
  content:attr(data-n);position:absolute;left:0;top:1.3cqh;width:4.6cqh;height:4.6cqh;border-radius:50%;
  background:var(--stage);color:#fff;font-family:var(--title);font-size:2.6cqh;display:grid;place-items:center;
}

.ashley{
  margin-top:auto;display:flex;gap:2.6cqh;align-items:flex-start;background:#fff;
  border:1px solid rgba(42,61,28,.14);
  border-radius:180px 20px 180px 20px / 20px 180px 20px 180px;padding:3.2cqh 4cqh;
}
.ashley .who{font-family:var(--body);font-weight:800;font-size:2.4cqh;letter-spacing:.12em;text-transform:uppercase;color:var(--stage);white-space:nowrap;padding-top:.9cqh}
.ashley q{font-family:var(--hand);font-size:4.6cqh;line-height:1.25;color:var(--navy);quotes:'\201C' '\201D'}

.prompts{margin:2.6cqh 0 0;padding:0;list-style:none;display:grid;gap:1.6cqh}
.prompts li{font-size:3.6cqh;line-height:1.45;background:#fff;border:1px solid rgba(42,61,28,.13);border-left:.9cqh solid var(--stage);border-radius:4px 16px 16px 4px;padding:2.4cqh 3cqh}

.artwell{
  position:relative;width:100%;border:.5cqh dashed rgba(42,61,28,.28);
  border-radius:22px 90px 26px 80px / 80px 24px 90px 24px;
  background:repeating-linear-gradient(45deg, rgba(103,148,54,.05) 0 10px, transparent 10px 20px), #fff;
  display:grid;place-items:center;padding:4cqh;text-align:center;
}
.artwell .label{font-family:var(--hand);font-size:3.6cqh;color:var(--bark);opacity:.62;line-height:1.3;max-width:44ch}
.artwell .label b{display:block;font-family:var(--body);font-weight:800;font-size:2.3cqh;letter-spacing:.16em;text-transform:uppercase;color:var(--stage);margin-bottom:1.2cqh}
.visual-art{overflow:hidden;background:linear-gradient(180deg,#fff 0%,var(--stage-soft) 100%);border-style:solid}
.concept{position:relative;width:72%;height:72%;color:var(--stage)}
.concept i,.concept b,.concept em,.concept span,.concept strong{position:absolute;display:block;font-style:normal}
.ready-brain{width:44%;border:.9cqh solid var(--stage);border-radius:48% 52% 46% 54%;background:#fff}
.ready-brain i,.ready-brain b{top:32%;width:4cqh;height:4cqh;border-radius:50%;background:var(--navy)}
.ready-brain i{left:25%}.ready-brain b{right:25%}.ready-brain em{left:34%;bottom:22%;width:32%;height:12%;border-bottom:.8cqh solid var(--stage);border-radius:50%}
.mail i{left:12%;top:13%;width:76%;height:70%;border:.9cqh solid var(--stage);border-radius:2cqh;background:#fff}
.mail b{left:18%;top:16%;width:62%;height:48%;border-left:.8cqh solid var(--stage);border-bottom:.8cqh solid var(--stage);transform:rotate(-45deg)}
.direction{height:34%;top:18%;border-bottom:1.2cqh solid var(--stage)}
.direction::after{content:"";position:absolute;right:-1cqh;bottom:-2.5cqh;border-left:5cqh solid var(--stage);border-top:2.5cqh solid transparent;border-bottom:2.5cqh solid transparent}
.direction i,.direction b,.direction em{bottom:-2.4cqh;width:4cqh;height:4cqh;border-radius:50%;background:#fff;border:.7cqh solid var(--stage)}
.direction i{left:4%}.direction b{left:42%}.direction em{left:76%}
.book i,.book b{top:10%;width:43%;height:78%;background:#fff;border:.8cqh solid var(--stage)}
.book i{left:6%;border-radius:2cqh 0 0 2cqh}.book b{right:6%;border-radius:0 2cqh 2cqh 0}.book em{left:49%;top:10%;height:78%;border-left:1.1cqh solid var(--stage)}
.sound i,.sound b,.sound em{top:50%;border:.8cqh solid var(--stage);border-top-color:transparent;border-bottom-color:transparent;border-right-color:transparent;border-radius:50%;transform:translateY(-50%)}
.sound i{left:12%;width:16%;height:26%}.sound b{left:31%;width:26%;height:48%}.sound em{left:54%;width:34%;height:70%}
.first-sound{display:flex;align-items:center;justify-content:center;gap:2cqh}
.first-sound strong,.first-sound i,.first-sound b,.first-sound em{position:static;width:11cqh;height:11cqh;border-radius:50%;background:#d9dfd1}
.first-sound strong{width:15cqh;height:15cqh;background:var(--stage);box-shadow:0 0 0 2cqh var(--stage-soft)}
.match-start i,.match-start b,.match-start em,.match-start span{width:15cqh;height:15cqh;border-radius:50%;top:15%;background:#d9dfd1}
.match-start i{left:8%;background:var(--stage)}.match-start b{left:32%;background:var(--stage)}.match-start em{right:32%;background:var(--navy)}.match-start span{right:8%;background:var(--navy)}
.match-start::before,.match-start::after{content:"";position:absolute;top:58%;width:26%;border-bottom:.8cqh solid currentColor}.match-start::before{left:9%}.match-start::after{right:9%}
.rhyme i,.rhyme b{top:18%;width:34%;height:56%;display:grid;place-items:center;border:.8cqh solid var(--stage);border-radius:3cqh;background:#fff;font-family:var(--title);font-size:6cqh;color:var(--bark)}
.rhyme i{left:8%}.rhyme b{right:8%}.rhyme::after{content:"";position:absolute;left:42%;right:42%;top:46%;border-top:1cqh dotted var(--stage)}
.beats{display:flex;align-items:center;justify-content:center;gap:5cqh}
.beats i,.beats b,.beats em{position:static;width:12cqh;height:12cqh;border-radius:50%;background:var(--stage);box-shadow:0 2cqh 0 var(--stage-soft)}
.letter-pairs i,.letter-pairs b,.letter-pairs em,.letter-pairs span{top:10%;width:20%;height:66%;display:grid;place-items:center;border-radius:2cqh;background:#fff;border:.6cqh solid var(--stage);font-family:var(--title);font-size:8cqh;color:var(--stage)}
.letter-pairs i{left:4%}.letter-pairs b{left:28%}.letter-pairs em{right:28%}.letter-pairs span{right:4%}
.letter-sound i{left:8%;top:4%;width:34%;height:78%;display:grid;place-items:center;border-radius:3cqh;background:#fff;border:.8cqh solid var(--stage);font-family:var(--title);font-size:12cqh;color:var(--stage)}
.letter-sound b,.letter-sound em{top:50%;border:.8cqh solid var(--stage);border-top-color:transparent;border-bottom-color:transparent;border-right-color:transparent;border-radius:50%;transform:translateY(-50%)}
.letter-sound b{left:54%;width:14%;height:34%}.letter-sound em{left:68%;width:20%;height:58%}
.vowel-house{width:76%;height:78%;border:.9cqh solid var(--stage);border-radius:3cqh;background:#fff}
.vowel-house::before{content:"";position:absolute;left:8%;right:8%;top:-28%;height:52%;background:var(--stage);clip-path:polygon(50% 0,100% 100%,0 100%)}
.vowel-house div{position:absolute;inset:18% 6% 12%;display:grid;grid-template-columns:repeat(5,1fr);gap:1cqh}
.vowel-house i{position:static;display:grid;place-items:center;border-radius:1.4cqh;background:var(--stage-soft);color:var(--stage);font-family:var(--title);font-size:5cqh}

/* Picture-first readiness path. No reading is required to use these cards. */
.action-path{display:grid;grid-template-columns:repeat(5,1fr);gap:1.5cqh;margin:auto 0 3cqh}
.action-card{appearance:none;border:1px solid rgba(42,61,28,.14);border-bottom:.8cqh solid var(--stage);border-radius:20px;background:#fff;padding:2.4cqh 1.2cqh;display:grid;gap:1.4cqh;place-items:center;color:var(--bark);font-family:var(--title);font-size:2.7cqh;cursor:pointer;transition:transform .16s ease,background .16s ease}
.action-card:hover{transform:translateY(-.8cqh)}
.action-card.done{background:var(--stage-soft);box-shadow:0 0 0 .45cqh var(--stage) inset}
.action-picture{position:relative;display:block;width:10cqh;height:10cqh;border-radius:50%;background:var(--stage-soft)}
.action-picture i,.action-picture b,.action-picture em{position:absolute;display:block}
.action-card.sit .action-picture i{left:2.1cqh;top:2cqh;width:4.8cqh;height:3.8cqh;border:.7cqh solid var(--stage);border-top:0;border-radius:0 0 1cqh 1cqh}
.action-card.sit .action-picture b{left:2.2cqh;top:6.2cqh;width:6cqh;border-top:.7cqh solid var(--stage)}
.action-card.breathe .action-picture i,.action-card.breathe .action-picture b,.action-card.breathe .action-picture em{left:50%;top:50%;border:.45cqh solid var(--stage);border-radius:50%;transform:translate(-50%,-50%);animation:breathe 3s ease-in-out infinite}
.action-card.breathe .action-picture i{width:3cqh;height:3cqh}.action-card.breathe .action-picture b{width:5.5cqh;height:5.5cqh;animation-delay:.3s}.action-card.breathe .action-picture em{width:8cqh;height:8cqh;animation-delay:.6s}
@keyframes breathe{50%{opacity:.25;transform:translate(-50%,-50%) scale(1.12)}}
.action-card.hands .action-picture i,.action-card.hands .action-picture b{top:2.1cqh;width:3.1cqh;height:5.8cqh;background:var(--stage);border-radius:60% 60% 45% 45%}
.action-card.hands .action-picture i{left:1.8cqh;transform:rotate(-16deg)}.action-card.hands .action-picture b{right:1.8cqh;transform:rotate(16deg)}
.action-card.look .action-picture{border-radius:70% 12%;transform:rotate(45deg);border:.7cqh solid var(--stage);background:#fff}
.action-card.look .action-picture i{width:3.2cqh;height:3.2cqh;left:2.7cqh;top:2.7cqh;border-radius:50%;background:var(--stage)}
.action-card.listen .action-picture i{left:2cqh;top:1.8cqh;width:3.8cqh;height:6cqh;border:.7cqh solid var(--stage);border-right:0;border-radius:70% 0 0 70%}
.action-card.listen .action-picture b,.action-card.listen .action-picture em{border:.55cqh solid var(--stage);border-left:0;border-top-color:transparent;border-bottom-color:transparent;border-radius:0 50% 50% 0}
.action-card.listen .action-picture b{left:5.4cqh;top:3.1cqh;width:1.4cqh;height:3.2cqh}.action-card.listen .action-picture em{left:6cqh;top:2.1cqh;width:2cqh;height:5.2cqh;opacity:.55}
@media(max-width:700px){.action-path{grid-template-columns:repeat(3,1fr)}.action-card{font-size:3.4cqh}}

.cardrow{display:grid;grid-template-columns:repeat(3,1fr);gap:3cqh;margin:1cqh 0 0}
.tcard{
  border:1px solid rgba(42,61,28,.16);background:#fff;border-radius:20px;
  padding:4cqh 2.4cqh;text-align:center;cursor:pointer;font-family:var(--body);
  transition:transform .18s ease, background .18s ease;
}
.tcard:hover{transform:translateY(-3px)}
.tcard .glyph{
  width:12cqh;height:12cqh;margin:0 auto 2cqh;border-radius:50%;
  background:var(--stage-soft);border:.5cqh solid var(--stage);
  display:grid;place-items:center;font-family:var(--title);font-size:5cqh;color:var(--stage);
}
.tcard .cname{font-family:var(--title);font-size:3.4cqh;color:var(--bark);line-height:1.15}
.tcard .cnote{font-size:2.7cqh;line-height:1.4;opacity:.7;margin-top:1cqh}
.tcard.done{background:var(--stage-soft);box-shadow:0 0 0 .55cqh var(--stage) inset}
.tcard.done .glyph{background:var(--stage);color:#fff}

/* ---------- listening game ---------- */
.listenrow{display:grid;gap:2.6cqh;margin:1cqh 0 0}
.lrow{
  display:grid;grid-template-columns:auto 1fr auto auto;gap:2.4cqh;align-items:center;
  background:#fff;border:1px solid rgba(42,61,28,.14);border-radius:20px;padding:2.8cqh 3cqh;
}
.lrow .num{
  width:7cqh;height:7cqh;border-radius:50%;background:var(--stage-soft);border:.45cqh solid var(--stage);
  display:grid;place-items:center;font-family:var(--title);font-size:3.2cqh;color:var(--stage);
}
.lrow .hear{
  font-family:var(--title);font-size:3.2cqh;color:#fff;background:var(--stage);
  border:0;border-radius:999px;padding:2cqh 4.4cqh;cursor:pointer;
}
.lrow .pick{
  font-family:var(--body);font-weight:800;font-size:2.9cqh;background:#fff;color:var(--bark);
  border:1px solid rgba(42,61,28,.22);border-radius:999px;padding:1.9cqh 3.4cqh;cursor:pointer;
}
.lrow .pick.sel{background:var(--stage);color:#fff;border-color:var(--stage)}
.lrow .pick.right{box-shadow:0 0 0 .45cqh var(--stage-soft)}
.lrow .pick.wrong{animation:nudge .38s;border-color:#d87c74;color:#9d4e48}
.lrow.solved{background:var(--stage-soft);border-color:var(--stage)}
.lrow .cue{font-family:var(--hand);font-size:3.4cqh;opacity:.72}

/* ---------- sort bins ---------- */
.sortpool{display:flex;flex-wrap:wrap;gap:2cqh;margin:1cqh 0 2.6cqh}
.chip{
  font-family:var(--body);font-weight:700;font-size:3.1cqh;
  background:#fff;border:1px solid rgba(42,61,28,.2);border-radius:999px;
  padding:1.9cqh 3.8cqh;cursor:pointer;
}
.chip.taken{opacity:.32;pointer-events:none}
.chip.armedchip{background:var(--stage);color:#fff;border-color:var(--stage)}
.bins{display:grid;grid-template-columns:1fr 1fr;gap:3cqh;flex:1;min-height:0}
.bin{
  border:.5cqh dashed rgba(42,61,28,.26);border-radius:20px;background:#fff;
  padding:3cqh;display:flex;flex-direction:column;gap:2cqh;cursor:pointer;
}
.bin.armed{border-style:solid;border-color:var(--stage);background:var(--stage-soft)}
.bin.wrongbin{animation:nudge .38s;border-color:#d87c74;background:#fff5f3}
.bin h4{font-family:var(--title);font-size:4.2cqh;margin:0;color:var(--stage);text-align:center}
.bin .drop{display:flex;flex-wrap:wrap;gap:1.6cqh;align-content:flex-start;flex:1}
.bin .drop span{
  font-family:var(--body);font-weight:700;font-size:2.9cqh;background:#fff;
  border:1px solid rgba(42,61,28,.18);border-radius:999px;padding:1.4cqh 3cqh;
}
.sorthint{font-family:var(--hand);font-size:3.4cqh;opacity:.72;margin-top:2cqh}

/* ---------- breathing ---------- */
.breath{
  width:24cqh;height:24cqh;border-radius:50%;margin:1cqh auto 2cqh;
  background:radial-gradient(circle at 35% 30%, #fff, var(--stage-soft));
  border:.55cqh solid var(--stage);display:grid;place-items:center;
  font-family:var(--hand);font-size:3.6cqh;color:var(--stage);animation:breathe 8s ease-in-out infinite;
}
@keyframes breathe{0%,100%{transform:scale(.88)}45%{transform:scale(1.06)}}

/* ---------- atelier pad ---------- */
.pad-wrap{position:relative;width:100%;flex:1;min-height:0;display:flex;flex-direction:column;gap:2cqh}
.pad{flex:1;width:100%;border-radius:18px;border:.5cqh solid rgba(42,61,28,.22);background:#fff;touch-action:none;display:block;min-height:0}
.padtools{display:flex;align-items:center;gap:2cqh;flex-wrap:wrap}
.swatch{width:7cqh;height:7cqh;border-radius:50%;cursor:pointer;border:.45cqh solid rgba(42,61,28,.25)}
.swatch.sel{box-shadow:0 0 0 .55cqh #fff, 0 0 0 1.1cqh var(--bark)}
.padbtn{margin-left:auto;font-family:var(--body);font-weight:700;font-size:2.9cqh;border:1px solid rgba(42,61,28,.22);background:#fff;color:var(--bark);border-radius:999px;padding:1.6cqh 4cqh;cursor:pointer}
.bubble{align-self:flex-start;background:#fff;border:.5cqh solid var(--stage);border-radius:180px 24px 180px 24px / 24px 180px 24px 180px;padding:2.4cqh 4cqh;font-family:var(--hand);font-size:4.2cqh;color:var(--navy)}

/* ---------- soundtiles. the letter now carries a sound.
              stretchy sounds can be held. quick sounds cannot. ---------- */
.soundgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:2.6cqh;margin:1cqh 0 0}
.soundgrid.five{grid-template-columns:repeat(5,1fr);gap:2.2cqh}
.soundgrid.five .stile{padding:2.6cqh .9cqh 2.2cqh}
.soundgrid.five .glyphs{font-size:6.6cqh}
.soundgrid.five .glyphs em{font-size:4.8cqh}
.stile.vowel .glyphs{color:var(--vowel)}
.stile.vowel .tag{background:rgba(216,124,116,.16);color:var(--vowel)}
.stile.vowel.done{box-shadow:0 0 0 .5cqh var(--vowel) inset;background:rgba(216,124,116,.10)}
.stile{
  background:#fff;border:1px solid rgba(42,61,28,.18);border-radius:20px;
  padding:2.8cqh 1.2cqh 2.4cqh;text-align:center;cursor:pointer;
  transition:transform .18s ease, background .18s ease;
}
.stile:hover{transform:translateY(-3px)}
.stile .glyphs{font-family:var(--title);font-size:7.4cqh;line-height:1;color:var(--bark)}
.stile .glyphs em{font-style:normal;opacity:.5;font-size:5.4cqh;margin-left:.7cqh}
.stile .snd{
  margin-top:1.4cqh;font-family:var(--hand);font-size:4.4cqh;color:var(--navy);
  opacity:0;transition:opacity .22s;line-height:1.05;
}
.stile .key{
  font-family:var(--body);font-weight:700;font-size:2.4cqh;opacity:0;
  transition:opacity .22s;margin-top:.4cqh;
}
.stile .tag{
  display:inline-block;margin-top:1.4cqh;font-family:var(--body);font-weight:800;
  font-size:1.7cqh;letter-spacing:.14em;text-transform:uppercase;
  border-radius:999px;padding:.9cqh 2.4cqh;background:var(--stage-soft);color:var(--stage);
  opacity:0;transition:opacity .22s;
}
.stile.done{background:var(--stage-soft);box-shadow:0 0 0 .5cqh var(--stage) inset}
.stile.done .snd,.stile.done .key,.stile.done .tag{opacity:1}
.stile.done .tag{background:#fff}

/* ---------- lettertiles. print arrives here, at Lesson 10.
              a letter is one thing with two shapes. ---------- */
.tilegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:2.6cqh;margin:1cqh 0 0}
.ltile{
  background:#fff;border:1px solid rgba(42,61,28,.18);border-radius:20px;
  padding:3cqh 1.4cqh 2.2cqh;text-align:center;cursor:pointer;
  transition:transform .18s ease, background .18s ease;
}
.ltile:hover{transform:translateY(-3px)}
.ltile .glyphs{font-family:var(--title);font-size:8.4cqh;line-height:1;color:var(--bark)}
.ltile .glyphs em{font-style:normal;opacity:.5;font-size:6cqh;margin-left:.8cqh}
.ltile .lname{
  margin-top:1.6cqh;font-family:var(--body);font-weight:800;font-size:1.9cqh;
  letter-spacing:.16em;text-transform:uppercase;color:var(--stage);
  opacity:0;transition:opacity .22s;
}
.ltile.done{background:var(--stage-soft);box-shadow:0 0 0 .5cqh var(--stage) inset}
.ltile.done .lname{opacity:1}
.tilenote{font-family:var(--hand);font-size:3.4cqh;opacity:.72;margin-top:2.6cqh;text-align:center}

/* ---------- beats. tap once per syllable. overshooting resets. ---------- */
.beatrows{display:grid;gap:2.6cqh;margin:1cqh 0 0}
.brow{
  display:grid;grid-template-columns:1fr auto auto;gap:2.6cqh;align-items:center;
  background:#fff;border:1px solid rgba(42,61,28,.14);border-radius:20px;padding:2.8cqh 3cqh;
}
.brow .bword{font-family:var(--title);font-size:4.2cqh;color:var(--bark);line-height:1.05}
.brow .bword small{
  display:block;font-family:var(--body);font-weight:800;font-size:1.9cqh;
  letter-spacing:.14em;text-transform:uppercase;color:var(--stage);margin-bottom:.7cqh;
}
.bdots{display:flex;gap:1.5cqh}
.bdots i{
  width:4.6cqh;height:4.6cqh;border-radius:50%;display:block;
  background:rgba(42,61,28,.13);transition:background .14s, transform .14s;
}
.bdots i.lit{background:var(--stage);transform:scale(1.12)}
.clap{
  font-family:var(--title);font-size:3.2cqh;color:#fff;background:var(--stage);
  border:0;border-radius:999px;padding:2.2cqh 4.8cqh;cursor:pointer;
  box-shadow:0 .6cqh 0 rgba(42,61,28,.22);
}
.clap:active{transform:translateY(.3cqh);box-shadow:0 .3cqh 0 rgba(42,61,28,.22)}
.brow.solved{background:var(--stage-soft);box-shadow:0 0 0 .5cqh var(--stage) inset}
.brow.solved .clap{opacity:.35;pointer-events:none}
.brow.over{animation:nudge .38s}
.chincue{
  margin-top:2.6cqh;background:var(--stage-soft);border-radius:18px;padding:2.6cqh 3.4cqh;
  font-family:var(--hand);font-size:3.6cqh;color:var(--navy);text-align:center;
}

/* ---------- match. pair two items that share a feature ---------- */
.matchgrid{display:grid;grid-template-columns:1fr 1fr;gap:3cqh;margin:1cqh 0 0}
.mcol{display:flex;flex-direction:column;gap:2.2cqh}
.mcolhead{
  font-family:var(--body);font-weight:800;font-size:2.2cqh;letter-spacing:.14em;
  text-transform:uppercase;color:var(--stage);text-align:center;
}
.mchip{
  font-family:var(--title);font-size:4cqh;color:var(--bark);
  background:#fff;border:1px solid rgba(42,61,28,.2);border-radius:16px;
  padding:2.6cqh 2cqh;text-align:center;cursor:pointer;
  transition:background .16s, color .16s, border-color .16s, transform .16s;
}
.mchip:hover{transform:translateY(-2px)}
.mchip.armed{background:var(--stage);color:#fff;border-color:var(--stage)}
.mchip.locked{background:var(--stage-soft);border-color:var(--stage);pointer-events:none}
.mchip.wrong{animation:nudge .38s}

/* ---------- oddone. pick the one that does not belong ---------- */
.oddrows{display:grid;gap:2.6cqh;margin:1cqh 0 0}
.orow{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2cqh;align-items:stretch}
.ochip{
  font-family:var(--title);font-size:3.8cqh;color:var(--bark);
  background:#fff;border:1px solid rgba(42,61,28,.2);border-radius:16px;
  padding:2.6cqh 1.6cqh;text-align:center;cursor:pointer;
  transition:background .16s, color .16s, border-color .16s, transform .16s;
}
.ochip:hover{transform:translateY(-2px)}
.ochip.out{background:var(--stage);color:#fff;border-color:var(--stage)}
.ochip.wrong{animation:nudge .38s}
.orow.solved .ochip{pointer-events:none}
.orow.solved .ochip:not(.out){opacity:.5}
.oralnote{font-family:var(--hand);font-size:3.3cqh;opacity:.72;margin-top:2.4cqh}

/* ---------- wordcards. oral phonological work, before print.
              the picture is for the child. the word is for the adult. ---------- */
.wcards{display:grid;grid-template-columns:repeat(3,1fr);gap:2.6cqh;flex:1;min-height:0;margin:1cqh 0 0}
.wcard{
  display:flex;flex-direction:column;gap:1.6cqh;min-height:0;
  background:#fff;border:1px solid rgba(42,61,28,.16);border-radius:20px;
  padding:2.6cqh;cursor:pointer;text-align:center;
  transition:transform .18s ease, background .18s ease;
}
.wcard:hover{transform:translateY(-3px)}
.wcard .mini{
  flex:1;min-height:0;border:.45cqh dashed rgba(42,61,28,.26);border-radius:14px;
  background:repeating-linear-gradient(45deg, rgba(103,148,54,.05) 0 9px, transparent 9px 18px), #fff;
  display:grid;place-items:center;padding:1.8cqh;
}
.wcard .mini span{font-family:var(--hand);font-size:2.6cqh;opacity:.6;line-height:1.25}
.wcard .mini img{display:block;width:100%;height:100%;object-fit:contain;min-height:0}
.wcard .say{
  font-family:var(--body);font-weight:800;font-size:2cqh;letter-spacing:.14em;
  text-transform:uppercase;color:var(--stage);
}
.wcard .word{font-family:var(--title);font-size:4.6cqh;color:var(--bark);line-height:1}
.wcard.done{background:var(--stage-soft);box-shadow:0 0 0 .5cqh var(--stage) inset}
.wcnote{font-family:var(--hand);font-size:3.3cqh;opacity:.72;margin-top:2.4cqh}

/* ---------- parts. a labelled figure drawn in CSS ---------- */
.partsfig{flex:1;min-height:0;display:grid;place-items:center;padding:2cqh 0}
.bk{position:relative;width:52%;aspect-ratio:3/4}
.bk .zone{position:absolute;cursor:pointer;transition:background .2s, border-color .2s, transform .2s}
.bk .zone:hover{transform:translateY(-2px)}
.bk .back{
  right:0;top:5%;width:86%;height:95%;z-index:1;
  background:#f0f1ec;border:.55cqh solid rgba(42,61,28,.3);border-radius:3px 16px 16px 3px;
}
.bk .front{
  left:9%;top:0;width:86%;height:95%;z-index:3;
  background:#fff;border:.55cqh solid rgba(42,61,28,.32);border-radius:3px 16px 16px 3px;
  box-shadow:0 1cqh 2cqh rgba(42,61,28,.10);
}
.bk .spine{
  left:2%;top:0;width:10%;height:95%;z-index:4;
  background:var(--stage-soft);border:.55cqh solid rgba(42,61,28,.32);border-radius:16px 2px 2px 16px;
}
.bk .zone.on{background:var(--stage);border-color:var(--stage)}
.bk .front .titlelines{
  position:absolute;left:14%;right:14%;top:22%;display:grid;gap:2.2cqh;
}
.bk .front .titlelines b{display:block;height:2.2cqh;border-radius:999px;background:rgba(42,61,28,.20)}
.bk .zone.on .titlelines b{background:rgba(255,255,255,.55)}
.partchips{display:flex;gap:2cqh;flex-wrap:wrap;justify-content:center;margin-top:2.6cqh}
.partchip{
  font-family:var(--body);font-weight:700;font-size:3cqh;
  background:#fff;border:1px solid rgba(42,61,28,.2);border-radius:999px;padding:1.8cqh 3.6cqh;opacity:.42;
}
.partchip.found{opacity:1;background:var(--stage-soft);border-color:var(--stage);color:var(--bark)}
.partnote{font-family:var(--hand);font-size:3.3cqh;opacity:.72;text-align:center;margin-top:2cqh}

/* ---------- sweep. drag left to right. reusable for directionality
              and later for continuous blending ---------- */
.sweeps{display:flex;flex-direction:column;gap:3.4cqh;margin:1cqh 0 0}
.trailwrap{display:flex;flex-direction:column;gap:1.2cqh}
.traillabel{font-family:var(--body);font-weight:800;font-size:2.4cqh;letter-spacing:.14em;text-transform:uppercase;color:var(--stage)}
.trail{
  position:relative;height:12cqh;border-radius:999px;overflow:hidden;
  background:#fff;border:1px solid rgba(42,61,28,.18);touch-action:none;cursor:pointer;
}
.trail .fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--stage-soft);transition:width .04s linear}
.trail .glyphs{
  position:absolute;inset:0;display:flex;align-items:center;gap:2.6cqh;padding:0 9cqh 0 10cqh;
  font-family:var(--title);font-size:3.6cqh;color:rgba(42,61,28,.32);letter-spacing:.06em;
}
.trail .marker{
  position:absolute;top:50%;left:0;transform:translate(-50%,-50%);
  width:8.4cqh;height:8.4cqh;border-radius:50%;background:var(--stage);color:#fff;
  display:grid;place-items:center;font-family:var(--title);font-size:2.9cqh;
  box-shadow:0 .5cqh 0 rgba(42,61,28,.25);
}
.trail .starthint{
  position:absolute;left:10.5cqh;top:50%;transform:translateY(-50%);
  font-family:var(--hand);font-size:3.2cqh;color:var(--bark);opacity:.55;
}
.trail.moved .starthint{display:none}
.trail.locked{opacity:.38;pointer-events:none}
.trail.done{border-color:var(--stage)}
.sweepnote{font-family:var(--hand);font-size:3.3cqh;opacity:.72;margin-top:2.4cqh}

/* ---------- choose. tap the correct spot on a line of print ---------- */
.chooserows{display:grid;gap:2.4cqh;margin:1cqh 0 0}
.crow{
  display:flex;align-items:center;gap:2.4cqh;
  background:#fff;border:1px solid rgba(42,61,28,.14);border-radius:16px;padding:2.8cqh 3cqh;
}
.crow .line{flex:1;display:flex;align-items:center;gap:1.6cqh}
.crow .line b{height:2.4cqh;border-radius:999px;background:rgba(42,61,28,.22);display:block}
.spot{
  width:6.6cqh;height:6.6cqh;border-radius:50%;flex:none;cursor:pointer;
  border:.5cqh dashed rgba(42,61,28,.34);background:#fff;
}
.spot.right{background:var(--stage);border-style:solid;border-color:var(--stage)}
.spot.wrong{animation:nudge .38s}
@keyframes nudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.crow .verdict{
  font-family:var(--hand);font-size:3.1cqh;opacity:0;min-width:20cqh;text-align:right;
  transition:opacity .2s;color:var(--stage);
}
.crow.solved .verdict{opacity:.85}
.crow.missed .verdict{opacity:.85;color:var(--bark)}

/* ---------- teach. one clear example ---------- */
.teachlines{display:grid;gap:2cqh;margin:2.6cqh 0 0}
.teachline{
  display:grid;grid-template-columns:auto 1fr;gap:2.6cqh;align-items:start;
  background:#fff;border:1px solid rgba(42,61,28,.14);border-radius:18px;padding:2.6cqh 3.2cqh;
}
.teachline b{
  width:6cqh;height:6cqh;border-radius:50%;background:var(--stage);color:#fff;
  font-family:var(--title);font-size:3cqh;display:grid;place-items:center;
}
.teachline span{font-size:3.6cqh;line-height:1.42}
.callout{
  margin-top:2.6cqh;background:var(--stage-soft);border-radius:18px;
  padding:2.8cqh 3.6cqh;font-family:var(--hand);font-size:4.2cqh;color:var(--navy);text-align:center;
}

/* ---------- tryit. tap to open reveal ---------- */
.reveal{flex:1;min-height:0;display:flex;flex-direction:column}
.envelope{
  flex:1;min-height:0;border:.5cqh solid rgba(42,61,28,.24);border-radius:14px;
  background:linear-gradient(#fff,#fbfbf9);display:grid;place-items:center;
  cursor:pointer;padding:4cqh;text-align:center;position:relative;overflow:hidden;
}
.envelope::before{
  content:'';position:absolute;top:0;left:0;right:0;height:48%;
  background:linear-gradient(160deg, rgba(232,178,98,.30), rgba(232,178,98,.10));
  clip-path:polygon(0 0, 100% 0, 50% 100%);
}
.envelope .flaptext{position:relative;font-family:var(--hand);font-size:4cqh;color:var(--bark);opacity:.82;line-height:1.3}
.envelope.gone{display:none}
.note-card{
  flex:1;min-height:0;display:none;flex-direction:column;gap:2cqh;justify-content:center;
  border:.5cqh solid var(--stage);border-radius:14px;background:#fff;padding:4cqh;text-align:center;
}
.note-card.on{display:flex}
.note-card .msg{font-family:var(--hand);font-size:4.8cqh;line-height:1.35;color:var(--navy)}
.note-card .sig{font-family:var(--hand);font-size:3.8cqh;opacity:.75}

/* ---------- minibook. reusable for any decodable text ---------- */
.mb{flex:1;min-height:0;display:flex;flex-direction:column;gap:2cqh}
.mbframe{
  flex:1;min-height:0;display:grid;grid-template-columns:4cqh 1fr;
  border:.5cqh solid rgba(42,61,28,.22);border-radius:6px 20px 20px 6px;
  background:#fff;overflow:hidden;
}
.mbspine{background:repeating-linear-gradient(180deg, var(--stage) 0 9px, rgba(255,255,255,.55) 9px 15px)}
.mbleaf{padding:3cqh;display:flex;min-height:0}
.mbleafpane{flex:1;min-height:0;display:flex;flex-direction:column;gap:2cqh}
.mbart{
  flex:1;min-height:0;border:.45cqh dashed rgba(42,61,28,.26);border-radius:14px;
  background:repeating-linear-gradient(45deg, rgba(103,148,54,.05) 0 10px, transparent 10px 20px), #fff;
  display:grid;place-items:center;padding:2.4cqh;text-align:center;
}
.mbart .label{font-family:var(--hand);font-size:3.2cqh;opacity:.62;line-height:1.3;max-width:40ch}
.mbart .label b{display:block;font-family:var(--body);font-weight:800;font-size:2.1cqh;letter-spacing:.16em;text-transform:uppercase;color:var(--stage);margin-bottom:1cqh}
.mbcap{font-family:var(--title);font-size:3.9cqh;color:var(--bark);text-align:center;line-height:1.15}
.mbcap small{display:block;font-family:var(--hand);font-weight:400;font-size:3.1cqh;opacity:.7;margin-top:.8cqh}
.mbbar{display:flex;align-items:center;gap:2.4cqh;flex-wrap:wrap}
.mbturn{font-family:var(--title);font-size:3.4cqh;color:#fff;background:var(--stage);border:0;border-radius:999px;padding:2.2cqh 5cqh;cursor:pointer}
.mbturn:disabled{opacity:.35;cursor:default}
.mbway{font-family:var(--hand);font-size:3.2cqh;opacity:.72}
.mbdots{display:flex;gap:1.4cqh;margin-left:auto}
.mbdots i{width:3.4cqh;height:3.4cqh;border-radius:50%;background:rgba(42,61,28,.16);display:block}
.mbdots i.now{background:var(--stage)}

/* ---------- reflection ---------- */
.starters{display:grid;gap:2.4cqh;margin:1cqh 0 0}
.starter{background:#fff;border:1px solid rgba(42,61,28,.14);border-radius:18px;padding:3cqh 3.4cqh}
.starter .lead{font-family:var(--title);font-size:4.2cqh;color:var(--stage)}
.starter .rule{margin-top:1.6cqh;height:.35cqh;border-radius:2px;background:repeating-linear-gradient(90deg, rgba(42,61,28,.22) 0 12px, transparent 12px 22px)}
.waysin{margin-top:2.4cqh;font-size:3cqh;line-height:1.5;opacity:.78;font-style:italic}

/* ---------- closing ---------- */
.closing{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;height:100%;gap:2cqh}
.seal{width:22cqh;height:22cqh;border-radius:50%;background:var(--stage-soft);border:.6cqh solid var(--stage);display:grid;place-items:center;font-family:var(--title);font-size:8cqh;color:var(--stage);margin-bottom:1cqh}
.turnpage{font-family:var(--title);font-size:4.2cqh;color:#fff;background:var(--stage);border:0;border-radius:999px;padding:2.6cqh 8cqh;cursor:pointer;box-shadow:0 .9cqh 0 rgba(42,61,28,.25)}
.turnpage:active{transform:translateY(.4cqh);box-shadow:0 .5cqh 0 rgba(42,61,28,.25)}


/* ---------- nav ---------- */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-top:1px solid rgba(42,61,28,.14);padding:10px 16px calc(10px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:12px;justify-content:center}
.nav button{font-family:var(--body);font-weight:800;font-size:14px;border:1px solid rgba(42,61,28,.2);background:#fff;color:var(--bark);border-radius:999px;padding:9px 18px;cursor:pointer}
.nav button:disabled{opacity:.35;cursor:default}
.nav .primary{background:var(--olive);border-color:var(--olive);color:#fff}
.nav .track{display:flex;gap:6px;align-items:center;margin:0 4px}
.nav .track b{width:9px;height:9px;border-radius:50%;background:rgba(42,61,28,.2);cursor:pointer;display:block}
.nav .track b.now{background:var(--olive);transform:scale(1.35)}
.nav .count{font-size:13px;opacity:.65;font-variant-numeric:tabular-nums;min-width:64px;text-align:center}

.gu-open{position:fixed;right:16px;top:16px;z-index:41;font-family:var(--body);font-weight:800;font-size:13px;background:#fff;border:1px solid rgba(42,61,28,.2);color:var(--navy);border-radius:999px;padding:9px 16px;cursor:pointer}
.drawer{position:fixed;inset:0;z-index:60;display:none;background:rgba(42,61,28,.42);padding:24px;overflow:auto}
.drawer.on{display:block}
.drawer .card{max-width:640px;margin:40px auto;background:#fff;border-radius:20px;padding:32px;border:1px solid rgba(42,61,28,.16);box-shadow:0 30px 70px rgba(42,61,28,.3)}
.drawer h2{font-family:var(--title);font-size:26px;margin:0 0 4px;color:var(--navy)}
.drawer .sub{font-family:var(--hand);font-size:20px;color:var(--olive);margin-bottom:20px}
.drawer h3{font-family:var(--body);font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--olive);margin:22px 0 8px}
.drawer ul{margin:0;padding-left:20px;line-height:1.7;font-size:15px}
.drawer p{line-height:1.7;font-size:15px;margin:0}
.drawer .close{margin-top:26px;font-family:var(--body);font-weight:800;font-size:14px;background:var(--navy);color:#fff;border:0;border-radius:999px;padding:11px 26px;cursor:pointer}
.drawer .note{margin-top:18px;padding:14px 16px;background:#fff;border-radius:14px;border-left:4px solid var(--tan);font-size:14px;line-height:1.6}

@media (max-width:560px){ .drawer .card{padding:22px} .nav .track{display:none} }


/* ---------- landscape layout ----------------------------------------
   A wide page gets two columns. The picture sits beside the words
   instead of above them, so nothing has to scroll.                    */
.split{display:grid;grid-template-columns:1fr 1fr;gap:5cqh;flex:1;min-height:0}
.split > *{min-height:0}
.split .col{display:flex;flex-direction:column;min-height:0}
.split .artwell{aspect-ratio:auto;height:100%}
.split .prompts{margin-top:0;align-content:start}
.split .teachlines{margin-top:0}

/* four across reads better than four down on a wide page */
.tilegrid,.soundgrid{grid-template-columns:repeat(4,1fr)}
.soundgrid.five{grid-template-columns:repeat(5,1fr)}
.wcards{grid-template-columns:repeat(3,1fr)}

/* the atelier pad gets the full width it deserves */
.pad-wrap{flex-direction:row;gap:3cqh;align-items:stretch}
.pad-wrap .pad{flex:1}
.pad-side{display:flex;flex-direction:column;justify-content:space-between;width:30%;gap:2cqh}
.padtools{flex-direction:row;flex-wrap:wrap}

@media (max-aspect-ratio:1/1){
  /* a phone held upright. fall back to one column and allow the page to be tall. */
  .page{aspect-ratio:3/4}
  .split{grid-template-columns:1fr;gap:3cqh}
  .pad-wrap{flex-direction:column}
  .pad-side{width:100%}
}


/* ---------- top strip clearance ------------------------------------
   Narrow screens cannot hold the wordmark, the tagline and both
   buttons on one line. The tagline goes first. It is the least
   useful thing to a child.                                          */
@media (max-width:1000px){ .brandbar .rooted{display:none} }
@media (max-width:620px){
  .brandbar{padding:0 118px}
  .brandbar .mark{font-size:13px}
}

/* the drawing page ran seven pixels long. give it back. */
.pad-wrap{gap:2.2cqh}
.bubble{padding:2cqh 3.4cqh}


/* ---------- landscape corrections for the three tall Try Together pages
   Lesson 4 parts, Lesson 5 listen, Lesson 9 beats.
   All three stacked vertically because they were drawn for a portrait
   page. On a wide page they use the width instead.                    */

/* Lesson 4. The book was sized from its width, so its height followed
   and pushed the chips off the bottom. Size it from the space it has. */
.partsfig{padding:1cqh 0;min-height:0}
.bk{height:100%;width:auto;aspect-ratio:3/4;max-width:46%}
.partchips{margin-top:2cqh}
.partnote{margin-top:1.4cqh}

/* Lesson 5. Four listening rounds, two across instead of four down. */
.listenrow{grid-template-columns:1fr 1fr;gap:2.2cqh}
.lrow{grid-template-columns:auto 1fr auto;grid-template-areas:"num cue hear" "picks picks picks";row-gap:1.6cqh}
.lrow .num{grid-area:num}
.lrow .cue{grid-area:cue}
.lrow .hear{grid-area:hear}
.lrow > div:last-of-type{grid-area:picks;justify-content:center}

/* Lesson 9. The chin cue is guidance, not a control. Let it sit
   quietly on one line rather than take a full band of the page. */
.beatrows{gap:2cqh}
.chincue{margin-top:2cqh;padding:1.8cqh 3cqh;font-size:3.2cqh}
.brow{padding:2.2cqh 3cqh}


/* ---------- final trims -------------------------------------------
   Measured across all twelve lessons, every page, at 1391 by 868.
   Three pages ran a little long. These take back the difference
   without changing how anything reads.                              */

/* Lesson 9 page 4. Clap rows plus the chin cue, 26px over. */
.beatrows{gap:1.7cqh}
.brow{padding:1.9cqh 3cqh}
.chincue{margin-top:1.6cqh;padding:1.5cqh 3cqh;font-size:3cqh}

/* Lesson 12 page 10. The closing seal and its lines, 14px over. */
.closing{gap:1.6cqh}
.seal{width:19cqh;height:19cqh;font-size:7cqh;margin-bottom:.4cqh}

/* Lesson 5 page 7. The drawing pad, 5px over. */
.pad-wrap{gap:2cqh}


/* ---------- card pictures -------------------------------------------
   Small objects, one per card, so a child who cannot read yet can play
   without an adult reading every chip aloud. A card with no picture
   renders exactly as before, so nothing has to be retrofitted at once. */
.cardpic{display:block;width:100%;height:auto;object-fit:contain;pointer-events:none}
.cardpic.sm{width:7cqh;height:7cqh;flex:0 0 auto}

.chip.haspic{display:inline-flex;align-items:center;gap:1.6cqh;padding:1.2cqh 3cqh 1.2cqh 1.4cqh}
.chip.haspic .cardpic{border-radius:50%;background:#fff}

.mchip.haspic{display:flex;flex-direction:column;align-items:center;gap:1cqh;padding:1.8cqh 1.4cqh}
.mchip.haspic .cardpic{width:11cqh;height:11cqh}
.ochip.haspic{display:flex;flex-direction:column;align-items:center;gap:1cqh;padding:1.8cqh 1cqh}
.ochip.haspic .cardpic{width:10cqh;height:10cqh}
.mchip b,.ochip b,.chip b{font-weight:inherit}

.bword .cardpic.sm{display:inline-block;vertical-align:middle;margin-right:1.6cqh}
.wcard .mini .cardpic{width:auto;height:100%;max-width:100%}

/* ====================================================================
   LAND OF WORDS additions, and a warmer doorway for every lesson.
   ==================================================================== */

/* ---------- the doorway. a book cover, not a worksheet header ---------- */
.doorway{overflow:hidden}
.doorway .dw-sky{
  position:absolute;top:0;left:0;right:0;height:46%;
  background:var(--stage-soft);
  border-radius:0 0 46% 46% / 0 0 18% 18%;
}
.doorway .dw-inner{
  position:absolute;inset:0;padding:7cqh 7cqh 13cqh;
  display:grid;grid-template-columns:1fr 30%;gap:4cqh;align-items:center;
}
.doorway .dw-badge{
  position:absolute;top:5cqh;left:6cqh;
  width:13cqh;height:13cqh;border-radius:50%;
  background:var(--stage);color:#fff;
  display:grid;place-items:center;
  font-family:var(--title);font-size:6.4cqh;line-height:1;
  box-shadow:0 1cqh 0 rgba(42,61,28,.18);
}
.doorway .dw-body{padding-top:9cqh}
.doorway .dw-stage{
  font-family:var(--body);font-weight:800;font-size:2.5cqh;letter-spacing:.2em;
  text-transform:uppercase;color:var(--stage);margin:0 0 1cqh;
}
.doorway h1{
  font-family:var(--title);font-size:9.6cqh;line-height:.98;
  margin:0 0 2cqh;color:var(--bark);text-transform:none;
}
.doorway .dw-lead{
  font-family:var(--hand);font-size:4.4cqh;line-height:1.25;
  color:var(--bark);opacity:.85;margin:0 0 3cqh;max-width:30ch;
}
.doorway .skillbox{
  background:#fff;border:.4cqh solid var(--stage);
  border-radius:999px;padding:2.4cqh 4cqh;text-align:center;display:inline-block;
}
.doorway .skillbox .v{font-family:var(--hand);font-size:4cqh;color:var(--bark);line-height:1.2}
.doorway .dw-guide{
  width:100%;height:auto;max-height:52cqh;object-fit:contain;align-self:end;
}

.doorway .rpa{display:grid;grid-template-columns:repeat(3,1fr);gap:2.6cqh;margin-top:4cqh;max-width:64cqh}
.doorway .rpa div{
  border-radius:20px;padding:2.6cqh 1.6cqh;text-align:center;
  border:.35cqh solid transparent;
}
.doorway .rpa b{display:block;font-family:var(--title);font-size:3.4cqh;font-weight:400}
.doorway .rpa small{
  display:block;font-family:var(--hand);font-size:3cqh;opacity:.8;margin-top:.8cqh;line-height:1.15;
}
.doorway .rpa .r{background:#e7eef6;color:var(--navy);border-color:rgba(6,71,137,.18)}
.doorway .rpa .p{background:#eef2e6;color:#4d7028;border-color:rgba(103,148,54,.22)}
.doorway .rpa .a{background:#fbf0e0;color:#b0741c;border-color:rgba(232,178,98,.4)}

.doorway .dw-foot{
  position:absolute;left:7cqh;right:7cqh;bottom:5cqh;
  display:flex;align-items:center;justify-content:space-between;
}
.doorway .dots{display:flex;gap:1.5cqh;flex-wrap:wrap}
.doorway .dots i{width:3.2cqh;height:3.2cqh;border-radius:50%;background:rgba(42,61,28,.13);display:block}
.doorway .dots i.past{background:var(--stage);opacity:.42}
.doorway .dots i.now{background:var(--stage);transform:scale(1.3)}
.doorway .dw-where{font-family:var(--hand);font-size:3.4cqh;opacity:.7}

/* ---------- the guide, standing quietly on the teaching pages ---------- */
.companion{
  position:absolute;right:3cqh;bottom:2cqh;width:15cqh;height:auto;
  opacity:.9;pointer-events:none;z-index:2;
}

/* ---------- the adult line, present but not shouting ---------- */
.adultline{
  font-family:var(--hand);font-size:3.2cqh;color:var(--bark);opacity:.6;
  margin:.6cqh 0 1.6cqh;
}

/* ---------- bigger targets. a five year old on a tablet ---------- */
.chip{font-size:3.5cqh;padding:2cqh 4.4cqh}
.chip.haspic{padding:1.6cqh 3.6cqh 1.6cqh 1.8cqh}
.cardpic.sm{width:8.4cqh;height:8.4cqh}
.mchip{font-size:4.4cqh;padding:3cqh 2.2cqh;min-height:12cqh;display:flex;align-items:center;justify-content:center}
.ochip{font-size:4.2cqh;padding:3cqh 1.8cqh;min-height:12cqh;display:flex;align-items:center;justify-content:center}
.tcard{padding:4.4cqh 2.6cqh}

/* ---------- sound colours, earning their keep in Land of Words ---------- */
.snd-v{color:var(--vowel)}
.snd-b{color:var(--letter-b)}
.snd-d{color:var(--letter-d)}
.snd-glue{color:var(--glued)}

/* ---------- blending. the sounds run together rather than sit apart ---------- */
.blendrow{display:flex;align-items:center;justify-content:center;gap:0;margin:2cqh 0}
.blendrow span{
  font-family:var(--title);font-size:11cqh;color:var(--bark);
  transition:transform .3s ease, color .3s ease;
}
.blendrow.joined span{transform:translateX(0)}

/* ---------- art well with a brief but no painting yet ---------- */
.artwell .standin:empty + .label{display:block}
.artwell.nofile .label{display:block}

/* ---------- word building. sound boxes a child taps and pushes ---------- */
.wordbuild{display:grid;gap:2cqh;margin:1cqh 0 0;flex:1;min-height:0;align-content:center}
.wbrow{
  display:flex;align-items:center;justify-content:center;gap:2.4cqh;
  background:#fff;border:1px solid rgba(42,61,28,.14);border-radius:22px;padding:2cqh 3cqh;
}
.wbpic{width:11cqh;height:11cqh;object-fit:contain;flex:0 0 auto}
.wbsounds{display:flex;gap:1.6cqh}
.wbsounds b{
  font-family:var(--title);font-size:6cqh;line-height:1;
  width:9.5cqh;height:10.5cqh;display:grid;place-items:center;
  background:var(--stage-soft);border:.45cqh solid var(--stage);border-radius:14px;
  color:var(--bark);cursor:pointer;transition:transform .18s ease, background .18s ease;
}
.wbsounds b.vowel{color:var(--vowel);border-color:var(--vowel);background:rgba(216,124,116,.10)}
.wbsounds b.said{background:var(--stage);color:#fff;transform:translateY(-.8cqh)}
.wbrow.joined .wbsounds{gap:0}
.wbrow.joined .wbsounds b{border-radius:0;border-left-width:0}
.wbrow.joined .wbsounds b:first-child{border-radius:14px 0 0 14px;border-left-width:.45cqh}
.wbrow.joined .wbsounds b:last-child{border-radius:0 14px 14px 0}
.wbword{
  font-family:var(--title);font-size:5cqh;color:var(--stage);min-width:9ch;
  opacity:0;transition:opacity .3s ease;
}
.wbrow.joined .wbword{opacity:1}
.wbpush{
  font-family:var(--title);font-size:3.2cqh;color:#fff;background:var(--stage);
  border:0;border-radius:999px;padding:1.6cqh 3.6cqh;cursor:pointer;flex:0 0 auto;
  box-shadow:0 .6cqh 0 rgba(42,61,28,.2);
}
.wbrow.joined .wbpush{opacity:.35;pointer-events:none}

/* ---------- glued sounds. one part, never split ---------- */
.wbsounds b.glued{
  color:#5f7000;border-color:var(--glued);
  background:rgba(165,190,0,.14);
  min-width:14cqh;
}
.wbsounds b.glued::after{
  content:'';position:absolute;
}
.wbrow.joined .wbsounds b.glued{background:rgba(165,190,0,.22)}

/* ============================================================
   SHOWPATH. the invitation page, told in pictures
   Letters, then sounds, then a word. Three panels, three short
   captions. A child who cannot read a sentence can still read
   this page, because the page is not made of sentences.
   ============================================================ */
.showpath{
  flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  gap:2.4cqh;margin:2cqh 0 0;
}
.sp-step{
  flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2.6cqh;
  background:#fff;border:1px solid rgba(42,61,28,.14);border-radius:26px;
  padding:3.4cqh 2cqh;align-self:stretch;
}
.sp-art{
  flex:1;min-height:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1.8cqh;
}
.sp-cap{
  font-family:var(--body);font-weight:700;font-size:3.2cqh;line-height:1.2;
  color:var(--bark);text-align:center;
}
.sp-tiles{display:flex;gap:1.4cqh;align-items:center}
.sp-tiles b{
  font-family:var(--title);font-size:6.4cqh;line-height:1;
  width:9.6cqh;height:10.6cqh;display:grid;place-items:center;
  background:var(--stage-soft);border:.45cqh solid var(--stage);border-radius:14px;
  color:var(--bark);
}
.sp-tiles b.vowel{color:var(--vowel);border-color:var(--vowel);background:rgba(216,124,116,.10)}
.sp-tiles b.glued{color:#5f7000;border-color:var(--glued);background:rgba(165,190,0,.16);min-width:14cqh;width:auto;padding:0 1.6cqh}

/* loose letters sit at angles, because they have not been put in order yet */
.sp-step.loose .sp-tiles{gap:2cqh}
.sp-step.loose .sp-tiles b:nth-child(1){transform:rotate(-7deg) translateY(.6cqh)}
.sp-step.loose .sp-tiles b:nth-child(2){transform:rotate(4deg) translateY(-.8cqh)}
.sp-step.loose .sp-tiles b:nth-child(3){transform:rotate(-3deg) translateY(.4cqh)}

/* the word step. the same tiles, pushed into one piece */
.sp-tiles.joined{gap:0}
.sp-tiles.joined b{border-radius:0;border-left-width:0}
.sp-tiles.joined b:first-child{border-radius:14px 0 0 14px;border-left-width:.45cqh}
.sp-tiles.joined b:last-child{border-radius:0 14px 14px 0}
.sp-pic{width:13cqh;height:13cqh;object-fit:contain}

.sp-arrow{
  flex:0 0 auto;width:5cqh;height:5cqh;position:relative;opacity:.5;
}
.sp-arrow::before{
  content:'';position:absolute;left:0;top:50%;width:100%;height:.5cqh;
  background:var(--stage);transform:translateY(-50%);border-radius:2px;
}
.sp-arrow::after{
  content:'';position:absolute;right:0;top:50%;width:2cqh;height:2cqh;
  border-top:.5cqh solid var(--stage);border-right:.5cqh solid var(--stage);
  transform:translateY(-50%) rotate(45deg);border-radius:2px;
}

/* ============================================================
   DEMO. the teach page, shown rather than described
   One word, very large. The three numbered instruction lines it
   replaces told the adult what to do. This lets the child do it.
   ============================================================ */
.wordbuild.demo{align-content:center}
.wordbuild.demo .wbrow{
  border:0;background:transparent;padding:0;
  gap:3.4cqh;flex-wrap:wrap;
}
.wordbuild.demo .wbsounds{gap:2.6cqh}
.wordbuild.demo .wbsounds b{
  font-size:11cqh;width:17cqh;height:19cqh;border-radius:22px;border-width:.6cqh;
}
.wordbuild.demo .wbsounds b.glued{min-width:25cqh;width:auto;padding:0 2cqh}
.wordbuild.demo .wbrow.joined .wbsounds{gap:0}
.wordbuild.demo .wbrow.joined .wbsounds b:first-child{border-radius:22px 0 0 22px}
.wordbuild.demo .wbrow.joined .wbsounds b:last-child{border-radius:0 22px 22px 0}
.wordbuild.demo .wbpush{font-size:4.4cqh;padding:2.2cqh 5cqh}
.wordbuild.demo .wbword{font-size:11cqh;min-width:0;color:var(--stage)}

/* the picture is the answer, so it waits until the sounds are pushed */
.wordbuild.demo .wbpic{width:19cqh;height:19cqh;opacity:0;transition:opacity .45s ease .15s}
.wordbuild.demo .wbrow.joined .wbpic{opacity:1}

/* ---------- art briefs, moved into the grown ups drawer ---------- */
#drawer .card ul li b{font-family:var(--body);font-weight:800}

/* a match chip may now hold a picture instead of a word */
.mchip-pic{width:12cqh;height:12cqh;object-fit:contain;display:block;margin:0 auto}

/* ============================================================
   SOUND
   A small mark that only appears when the recordings are found,
   so a child is never invited to tap something that is silent.
   ============================================================ */
[data-say]{cursor:pointer}
body.has-audio [data-say]{position:relative}
body.has-audio .sp-tiles b[data-say]::after,
body.has-audio .wbsounds b[data-say]::after{
  content:'';position:absolute;right:.8cqh;bottom:.8cqh;
  width:1.6cqh;height:1.6cqh;border-radius:50%;
  background:var(--stage);opacity:.55;
}
body.has-audio .wordbuild.demo .wbsounds b[data-say]::after{width:2.4cqh;height:2.4cqh}
[data-say]:active{transform:scale(.96)}

/* the picture on the showpath word panel, much bigger */
.sp-pic{width:22cqh;height:22cqh;object-fit:contain}
.sp-step .sp-art{gap:2.4cqh}

/* ============================================================
   WORDBUILD. the rows were overlapping the notes underneath
   Three rows of tiles plus a picture came to more than the page
   had, so the grid overflowed and painted on top of the writing.
   The rows now shrink to fit and the picture waits until the
   sounds are pushed, which also stops it giving the word away.
   ============================================================ */
.wordbuild{
  display:flex;flex-direction:column;justify-content:center;
  gap:1.8cqh;flex:1;min-height:0;overflow:hidden;
}
.wbrow{flex:0 1 auto;min-height:0;padding:1.6cqh 2.6cqh;gap:2cqh}
.wbsounds b{width:8.4cqh;height:9.2cqh;font-size:5.2cqh}
.wbsounds b.glued{min-width:12.5cqh;width:auto;padding:0 1.4cqh}
.wbpic{width:9cqh;height:9cqh;opacity:0;transition:opacity .4s ease .1s}
.wbrow.joined .wbpic{opacity:1}
.wbword{font-size:4.4cqh;min-width:6ch}
.wbpush{padding:1.3cqh 3cqh;font-size:3cqh}

/* ============================================================
   SCENE. the Read page, built from the art that exists
   Escargot on a garden path following a trail of letters that
   gets smaller as it goes away from you.
   ============================================================ */
.scene{
  position:relative;flex:1;min-height:0;width:100%;overflow:hidden;
  border-radius:22px 90px 26px 80px / 80px 24px 90px 24px;
  border:.4cqh solid rgba(42,61,28,.16);
}
.sc-sky{position:absolute;inset:0 0 42% 0;background:linear-gradient(180deg,#fff 0%,#f3f7ec 100%)}
.sc-ground{
  position:absolute;inset:44% 0 0 0;
  background:linear-gradient(180deg, rgba(103,148,54,.16) 0%, rgba(103,148,54,.34) 100%);
}
.sc-path{
  position:absolute;left:-6%;right:-6%;bottom:-14%;height:74%;
  background:radial-gradient(ellipse at 50% 100%, rgba(232,178,98,.55) 0 42%, transparent 62%);
  transform:rotate(-3deg);
}
.sc-letter{
  position:absolute;font-family:var(--title);font-size:5.4cqh;line-height:1;
  color:var(--bark);background:#fff;border:.4cqh solid var(--stage);
  border-radius:12px;padding:1cqh 1.6cqh;transform-origin:center;
  box-shadow:0 .5cqh 0 rgba(42,61,28,.12);
}
.sc-letter.vowel{color:var(--vowel);border-color:var(--vowel)}
.sc-letter.glued{color:#5f7000;border-color:var(--glued);background:rgba(165,190,0,.14)}
.sc-guide{position:absolute;left:2%;bottom:4%;height:46%;object-fit:contain}

/* ============================================================
   ATELIER. show one before asking for one
   ============================================================ */
.stickers{display:flex;align-items:center;gap:2.4cqh;margin:1.6cqh 0 .6cqh}
.sticker{
  margin:0;display:flex;flex-direction:column;align-items:center;gap:.6cqh;
  background:#fff;border:.4cqh solid var(--stage);border-radius:16px;
  padding:1.2cqh 1.6cqh;box-shadow:0 .5cqh 0 rgba(42,61,28,.12);
}
.sticker.s0{transform:rotate(-4deg)} .sticker.s1{transform:rotate(3deg)} .sticker.s2{transform:rotate(-2deg)}
.sticker img{width:7.6cqh;height:7.6cqh;object-fit:contain}
.sticker figcaption{font-family:var(--title);font-size:3.2cqh;line-height:1}
.sticker figcaption b{font-weight:inherit;color:var(--bark)}
.sticker figcaption b.glued{color:#5f7000}
.sticker figcaption b.vowel{color:var(--vowel)}
.stickers-yours{
  font-family:var(--hand);font-size:3.4cqh;color:var(--bark);opacity:.6;
  border:.4cqh dashed rgba(42,61,28,.3);border-radius:16px;padding:2.4cqh 2.8cqh;
}

/* ============================================================
   REFLECTION. a checklist a child can tick
   ============================================================ */
.checklist{display:grid;gap:2cqh;margin:2.6cqh 0 0;align-content:start}
.checkrow{
  display:flex;align-items:center;gap:2.6cqh;width:100%;text-align:left;
  background:#fff;border:1px solid rgba(42,61,28,.14);border-radius:18px;
  padding:2.4cqh 3cqh;cursor:pointer;font:inherit;
  transition:background .2s ease, border-color .2s ease;
}
.checkrow .tick{
  flex:0 0 auto;width:5.4cqh;height:5.4cqh;border-radius:10px;
  border:.45cqh solid var(--stage);background:#fff;position:relative;
}
.checkrow .tick::after{
  content:'';position:absolute;left:32%;top:14%;width:30%;height:58%;
  border-right:.55cqh solid #fff;border-bottom:.55cqh solid #fff;
  transform:rotate(42deg) scale(.4);opacity:0;transition:transform .2s ease, opacity .2s ease;
}
.checkrow.ticked{background:var(--stage-soft);border-color:var(--stage)}
.checkrow.ticked .tick{background:var(--stage)}
.checkrow.ticked .tick::after{opacity:1;transform:rotate(42deg) scale(1)}
.checkrow .lead{font-family:var(--title);font-size:4cqh;line-height:1.3;color:var(--bark)}
.checkrow .lead em{font-style:normal;color:var(--stage)}
.checkrow .lead em .gluedink{color:#5f7000;font-weight:inherit}

/* the printed word on a match chip, coloured by its sound parts */
.mword b{font-weight:inherit;color:var(--bark)}
.mword b.glued{color:#5f7000}
.mword b.vowel{color:var(--vowel)}
.mchip.locked .mword b{color:#fff}

/* Ms. Ashley opens selected Land of Letters lessons with a short model. */
.ashley-video-page .ashley-video-inner{
  padding:16cqh 6cqh 7cqh;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.ashley-video-page .eyebrow{margin-bottom:1cqh}
.ashley-video-page .ptitle{font-size:5.4cqh;margin-bottom:1.8cqh}
.ashley-video-shell{
  width:min(105cqh,92%);
  padding:1.2cqh;
  background:#fff;
  border:.45cqh solid var(--stage);
  border-radius:3cqh;
  box-shadow:0 1.8cqh 4cqh rgba(42,61,28,.15);
}
.ashley-video-shell video{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:2cqh;
  background:var(--stage-soft);
}
.ashley-video-note{
  margin:1.6cqh 0 0;
  font-family:var(--hand);
  font-size:3.6cqh;
  color:var(--stage);
}


/* Approved Midjourney lesson paintings and accurate teaching overlays. */
.artwell.visual-art{padding:0;background:#fff}
.artwell.visual-art .artimg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1}
.artwell.visual-art:not(.nofile) .standin{display:none}
.art-letter{
  position:absolute;z-index:3;transform:translate(-50%,-50%);
  display:grid;place-items:center;
  font-family:var(--title);font-size:4.2cqh;line-height:1;color:var(--navy);
  text-shadow:0 1px 0 #fff,0 0 6px rgba(255,255,255,.96);
}
.art-letter.vowel{color:var(--vowel)}
.vowel-button-row{
  position:absolute;z-index:4;left:50%;bottom:2.2cqh;transform:translateX(-50%);
  display:flex;gap:1.5cqh;padding:1.2cqh 1.7cqh;
  background:rgba(255,255,255,.93);border-radius:999px;
  box-shadow:0 .8cqh 2.2cqh rgba(42,61,28,.16);
}
.vowel-button-row button{
  width:7.2cqh;height:7.2cqh;border-radius:50%;
  border:.45cqh solid var(--vowel);background:#fff;color:var(--vowel);
  font-family:var(--title);font-size:4cqh;line-height:1;cursor:pointer;
}
.vowel-button-row button:hover,.vowel-button-row button:focus-visible{
  background:var(--vowel);color:#fff;transform:translateY(-.3cqh);outline:none;
}