/* 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 .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 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 .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;
}
.wbword b{font-weight:inherit;color:var(--stage)}
.wbword b.vowel{color:var(--vowel)}
.wbword b.glued{color:#5f7000}
.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].voiced::after,
body.has-audio .wbsounds b[data-say].voiced::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].voiced::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}

/* ============================================================
   PULLAPART. Lesson 14 undoes what Lesson 13 did
   The word is whole to begin with, and the picture is there from
   the start, because in segmenting the child already knows the
   word. What they have to find is the parts inside it.
   ============================================================ */
.wordbuild.pull .wbpic{opacity:1}
.wordbuild.pull .wbrow{transition:gap .3s ease}
.wordbuild.pull .wbsounds{transition:gap .35s ease}
.wordbuild.pull .wbrow.pulled .wbsounds{gap:2.4cqh}
.wordbuild.pull.demo .wbrow.pulled .wbsounds{gap:3.4cqh}
.wordbuild.pull .wbrow.pulled .wbsounds b{
  border-radius:14px;border-left-width:.45cqh;
}
.wordbuild.pull.demo .wbrow.pulled .wbsounds b{border-radius:22px}
.wordbuild.pull .wbrow.pulled .wbpush{opacity:.35;pointer-events:none}

/* the number of parts, revealed once the word is pulled apart */
.wbcount{
  font-family:var(--title);font-size:5cqh;color:var(--stage);
  min-width:2ch;text-align:center;opacity:0;transition:opacity .3s ease .5s;
}
.wbrow.pulled .wbcount{opacity:1}
.wordbuild.pull.demo .wbcount{font-size:11cqh}

/* ============================================================
   SOUNDCOUNT. how many sounds, answered in dots not numerals
   ============================================================ */
.counts{display:flex;flex-direction:column;justify-content:center;gap:2cqh;flex:1;min-height:0;overflow:hidden}
.scrow{
  display:flex;align-items:center;gap:3cqh;
  background:#fff;border:1px solid rgba(42,61,28,.14);border-radius:22px;
  padding:1.6cqh 3cqh;transition:background .25s ease, border-color .25s ease;
}
.scpic{width:11cqh;height:11cqh;object-fit:contain;flex:0 0 auto}
.scword{font-family:var(--title);font-size:5cqh;color:var(--bark);min-width:6ch}
.scchoices{display:flex;gap:2.4cqh;margin-left:auto}
.scdots{
  display:flex;align-items:center;gap:1.2cqh;cursor:pointer;
  background:var(--stage-soft);border:.45cqh solid var(--stage);border-radius:999px;
  padding:1.8cqh 2.8cqh;transition:transform .18s ease, background .18s ease;
}
.scdots i{width:2.6cqh;height:2.6cqh;border-radius:50%;background:var(--stage);display:block}
.scdots:active{transform:scale(.96)}
.scdots.right{background:var(--stage)}
.scdots.right i{background:#fff}
.scdots.miss{background:rgba(216,124,116,.18);border-color:var(--vowel);transform:translateX(-.6cqh)}
.scrow.solved{background:var(--stage-soft);border-color:var(--stage)}
.scrow.solved .scdots:not(.right){opacity:.3;pointer-events:none}
.scmark{
  width:4.4cqh;height:4.4cqh;border-radius:50%;flex:0 0 auto;
  border:.4cqh solid rgba(42,61,28,.16);position:relative;
}
.scrow.solved .scmark{background:var(--stage);border-color:var(--stage)}
.scrow.solved .scmark::after{
  content:'';position:absolute;left:32%;top:16%;width:30%;height:56%;
  border-right:.5cqh solid #fff;border-bottom:.5cqh solid #fff;transform:rotate(42deg);
}

/* a showpath panel that answers with a count rather than letters */
.sp-dots{display:flex;gap:2cqh;align-items:center}
.sp-dots i{width:5.4cqh;height:5.4cqh;border-radius:50%;background:var(--stage);display:block}


/* a dot that carries a sound is tappable and shows it */
.sp-dots i[data-say]{cursor:pointer;transition:transform .18s ease}
.sp-dots i[data-say]:active{transform:scale(.9)}
.sp-dots i.vowel{background:var(--vowel)}
.sp-dots i.glued{background:var(--glued)}
body.has-audio .sp-dots i[data-say].voiced{box-shadow:0 0 0 .5cqh rgba(255,255,255,.9), 0 0 0 .9cqh var(--stage)}
/* the picture on a word panel says the whole word */
.sp-pic[data-say]{cursor:pointer}


/* A sound with no recording yet stays quiet and shows nothing. The dot
   is a promise that tapping will do something, so it only appears once
   the file for that exact sound is known to be there. */
[data-say]{cursor:default}
[data-say].voiced{cursor:pointer}

/* ============================================================
   READWORD. the first word the letters carry
   Everything before this said the sounds aloud and put print
   beside them as decoration. Here the letters do the work.
   The picture waits behind a check, because a picture shown
   first turns reading into guessing.
   ============================================================ */
.readword{
  flex:1;min-height:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3cqh;
}
.rw-word{font-family:var(--title);font-size:19cqh;line-height:1;letter-spacing:.02em}
.rw-word b{font-weight:inherit;color:var(--bark)}
.rw-word b.glued{color:#5f7000}
.rw-word b.vowel{color:var(--vowel)}
.rw-check{
  font-family:var(--title);font-size:4cqh;color:#fff;background:var(--stage);
  border:0;border-radius:999px;padding:2cqh 5cqh;cursor:pointer;flex:0 0 auto;
  box-shadow:0 .6cqh 0 rgba(42,61,28,.2);
}
.readword.checked .rw-check{opacity:.35;pointer-events:none}
.rw-pic{width:19cqh;height:19cqh;object-fit:contain;opacity:0;transition:opacity .45s ease .1s}
.readword.checked .rw-pic{opacity:1}

/* ============================================================
   SWAP. the rime holds still, the first sound changes
   an sits in its own column on every row, so a child sees the
   pattern before anybody names it. That is the whole argument
   for teaching in word families.
   ============================================================ */
.swap{
  flex:1;min-height:0;display:flex;flex-direction:column;
  justify-content:center;gap:2cqh;overflow:hidden;
}
.sw-row{
  display:grid;grid-template-columns:13cqh 20cqh 1fr;align-items:center;gap:2.4cqh;
  background:#fff;border:1px solid rgba(42,61,28,.14);border-radius:22px;
  padding:1.4cqh 3.4cqh;cursor:pointer;font:inherit;text-align:left;
  transition:background .25s ease, border-color .25s ease;
}
.sw-on,.sw-rime{font-family:var(--title);font-size:8.6cqh;line-height:1;font-weight:400}
.sw-on{color:var(--bark);text-align:right}
/* The rime is only green when it is genuinely a glued sound. an is
   glued and is read in one piece. at is not, it is two sounds that
   happen to travel together. Colouring at green would tell a child
   something untrue, and they would carry that into ant and ask. */
.sw-rime{color:var(--bark)}
.sw-rime.glued{color:#5f7000}
.sw-rime.vowel{color:var(--vowel)}
.sw-pic{width:9.5cqh;height:9.5cqh;object-fit:contain;justify-self:end;opacity:0;transition:opacity .4s ease}
.sw-row.checked{background:var(--stage-soft);border-color:var(--stage)}
.sw-row.checked .sw-pic{opacity:1}

/* ============================================================
   SORT, when the bins are right and wrong
   A chip that carries an answer is refused by the wrong bin
   rather than accepted quietly. A tick for a wrong sort would
   teach the opposite of the lesson.
   ============================================================ */
.bin.wrongbin{
  animation:binno .5s ease;
  border-color:var(--vowel) !important;
  background:rgba(216,124,116,.10) !important;
}
@keyframes binno{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-1.2cqh)}
  75%{transform:translateX(1.2cqh)}
}
/* a word chip carries its sound colours, same as everywhere else */
.chip b{font-weight:inherit;color:var(--bark)}
.chip b.glued{color:#5f7000}
.chip b.vowel{color:var(--vowel)}
.bin .drop span b{font-weight:inherit;color:var(--bark)}
.bin .drop span b.glued{color:#5f7000}
.bin .drop span b.vowel{color:var(--vowel)}

/* ============================================================
   HEART WORDS
   The heart is the only marking that means do not sound this
   out. Rose, like the vowels, because a heart word is usually
   a vowel behaving badly.
   ============================================================ */
.hw-heart, .ph-word.heart::before, .hunt-heart{
  --heart:#d87c74;
}
.heart-shape{position:relative}
.hw-heart{
  position:relative;width:16cqh;height:16cqh;flex:0 0 auto;
  transform:rotate(-45deg);background:var(--heart);border-radius:0 0 3cqh 0;
}
.hw-heart::before,.hw-heart::after{
  content:'';position:absolute;width:100%;height:100%;background:var(--heart);border-radius:50%;
}
.hw-heart::before{top:-50%;left:0}
.hw-heart::after{top:0;right:-50%}

.heartword{
  flex:1;min-height:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4cqh;
}
.hw-word{
  font-family:var(--title);font-size:18cqh;line-height:1;color:var(--bark);
  letter-spacing:.02em;
}

/* ============================================================
   PHRASES
   Real space between the words, because a phrase read as one
   long shape is not reading.
   ============================================================ */
.phrases{display:flex;flex-direction:column;justify-content:center;gap:2.2cqh;flex:1;min-height:0;overflow:hidden}
.ph-row{
  display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:3cqh;
  background:#fff;border:1px solid rgba(42,61,28,.14);border-radius:22px;padding:1.6cqh 3.4cqh;
  transition:background .25s ease, border-color .25s ease;
}
.ph-words{display:flex;align-items:center;gap:3.4cqh}
.ph-word{
  font-family:var(--title);font-size:7.4cqh;line-height:1;color:var(--bark);
  cursor:default;position:relative;
}
.ph-word b{font-weight:inherit;color:var(--bark)}
.ph-word b.glued{color:#5f7000}
.ph-word b.vowel{color:var(--vowel)}
.ph-word.voiced{cursor:pointer}
/* a heart word wears a small heart above it */
.ph-word.heart{color:var(--vowel)}
.ph-word.heart::before{
  content:'';position:absolute;left:50%;top:-2.6cqh;width:2.4cqh;height:2.4cqh;
  transform:translateX(-50%) rotate(-45deg);background:var(--heart);border-radius:0 0 .5cqh 0;
  box-shadow:-.6cqh -.6cqh 0 0 var(--heart), .6cqh .6cqh 0 0 var(--heart);
  opacity:.9;
}
.ph-check{
  font-family:var(--title);font-size:3cqh;color:#fff;background:var(--stage);
  border:0;border-radius:999px;padding:1.4cqh 3.2cqh;cursor:pointer;
  box-shadow:0 .5cqh 0 rgba(42,61,28,.2);
}
.ph-row.checked .ph-check{opacity:.35;pointer-events:none}
.ph-pic{width:10cqh;height:10cqh;object-fit:contain;opacity:0;transition:opacity .4s ease}
.ph-row.checked{background:var(--stage-soft);border-color:var(--stage)}
.ph-row.checked .ph-pic{opacity:1}

/* ============================================================
   HUNT
   Away from the screen and into a real book.
   ============================================================ */
.hunt{display:flex;justify-content:center;gap:4cqh;margin:3cqh 0 1cqh}
.hunt-heart{
  width:9cqh;height:9cqh;border:0;background:transparent;cursor:pointer;padding:0;
  position:relative;transition:transform .2s ease;
}
.hunt-heart::before,.hunt-heart::after{
  content:'';position:absolute;left:50%;top:14%;width:52%;height:82%;
  background:#fff;border:.5cqh solid var(--heart);border-radius:50% 50% 0 0;
  transform-origin:0 100%;
}
.hunt-heart::before{transform:translateX(-100%) rotate(-45deg)}
.hunt-heart::after{transform:translateX(0) rotate(45deg)}
.hunt-heart.found::before,.hunt-heart.found::after{background:var(--heart)}
.hunt-heart:active{transform:scale(.92)}

/* 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);
}



/* ============================================================
   LAND OF WORDS. AUDIO DOORWAY AND BLEND CHOICE
   Used first by Lesson 13. Shared without changing older lessons.
   ============================================================ */
.audio-doorway-inner{
  display:grid;
  place-items:center;
  align-content:center;
  gap:1.7cqw;
  text-align:center;
}
.ad-guide{
  width:auto;
  height:min(23cqw,26cqh);
  max-width:34%;
  object-fit:contain;
}
.audio-doorway-line{
  max-width:32ch;
  margin:0;
  color:#33491a;
  font-family:"Nunito",sans-serif;
  font-size:2.25cqw;
  font-weight:800;
  line-height:1.3;
}
.audio-doorway-listen,
.blend-hear{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:1.2cqw;
  min-height:7cqw;
  padding:1.3cqw 2.4cqw;
  border:0;
  border-radius:999px;
  background:#064789;
  color:#fff;
  font-family:"Fredoka One","Nunito",sans-serif;
  font-size:2cqw;
  cursor:pointer;
  box-shadow:0 1cqw 2.4cqw rgba(6,71,137,.18);
}
.audio-doorway-listen.playing{background:#679436}
.audio-doorway-begin{margin-top:.4cqw}
.blendgame{
  display:grid;
  place-items:center;
  width:100%;
  flex:1;
  min-height:0;
}
.blend-round{
  display:none;
  width:min(84cqw,100%);
  text-align:center;
}
.blend-round.active{
  display:grid;
  place-items:center;
  gap:1.6cqw;
  animation:blend-arrive .28s ease-out;
}
.blend-round-count{
  color:#65745a;
  font-family:"Nunito",sans-serif;
  font-size:1.55cqw;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.blend-hear{
  min-width:36cqw;
  background:#679436;
}
.blend-dots{
  display:flex;
  align-items:center;
  gap:.55cqw;
}
.blend-dots i{
  display:block;
  width:1.25cqw;
  height:1.25cqw;
  border-radius:50%;
  background:#fff;
  opacity:.38;
  transform:scale(.78);
  transition:opacity .18s ease,transform .18s ease;
}
.blend-dots i.on{
  opacity:1;
  transform:scale(1.22);
}
.blend-arrow{
  width:8cqw;
  height:2.3cqw;
  border-bottom:.55cqw solid #e8b262;
  position:relative;
}
.blend-arrow::after{
  content:"";
  position:absolute;
  right:-.2cqw;
  bottom:-.78cqw;
  border-left:1.7cqw solid #e8b262;
  border-top:.9cqw solid transparent;
  border-bottom:.9cqw solid transparent;
}
.blend-choices{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:2cqw;
  width:min(68cqw,100%);
}
.blend-choice{
  display:grid;
  place-items:center;
  aspect-ratio:1;
  padding:1.4cqw;
  border:.45cqw solid rgba(232,178,98,.42);
  border-radius:2.4cqw;
  background:#fff;
  cursor:pointer;
  box-shadow:0 .8cqw 2cqw rgba(42,61,28,.08);
  transition:transform .16s ease,border-color .16s ease,background .16s ease;
}
.blend-choice:hover,.blend-choice:focus-visible{
  border-color:#e8b262;
  transform:translateY(-.35cqw);
  outline:0;
}
.blend-choice img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.blend-choice.right{
  border-color:#679436;
  background:#f3f8ec;
  box-shadow:0 0 0 .55cqw rgba(103,148,54,.16);
}
.blend-choice.wrong{
  border-color:#d87c74;
  background:#fff6f5;
  animation:blend-wiggle .34s ease;
}
.blend-choice.nopic::after{
  content:attr(data-word);
  color:#064789;
  font-family:"Fredoka One","Nunito",sans-serif;
  font-size:3cqw;
}
.blend-feedback{
  min-height:3cqw;
  color:#679436;
  font-family:"Fredoka One","Nunito",sans-serif;
  font-size:2.2cqw;
}
@keyframes blend-arrive{
  from{opacity:0;transform:translateY(1cqw)}
  to{opacity:1;transform:none}
}
@keyframes blend-wiggle{
  0%,100%{transform:translateX(0)}
  30%{transform:translateX(-.7cqw)}
  70%{transform:translateX(.7cqw)}
}
@media(max-width:700px){
  .ad-guide{max-width:42%;height:min(28cqw,24cqh)}
  .audio-doorway-line{font-size:3.2cqw}
  .audio-doorway-listen,.blend-hear{font-size:2.8cqw;min-height:9cqw}
  .blend-round{width:94cqw}
  .blend-hear{min-width:50cqw}
  .blend-choices{width:82cqw;gap:2.6cqw}
  .blend-feedback{font-size:3.1cqw}
}

/* a vowel inside a rime keeps its own colour */
.sw-rime i.v{font-style:normal;color:var(--vowel)}
.sw-rime.glued i.v{color:inherit}

/* ============================================================
   FIND IT
   Read the Picture is a search now, not a slideshow. The chips
   are the thing to do. On a painting the child marks their own
   find, because nothing here knows where anything is in the art.
   On a scene the letters are real elements, so the tap is checked
   and only the right one counts.
   ============================================================ */
.findbar{
  display:flex;flex-wrap:wrap;gap:1.6cqh;margin:2.4cqh 0 0;justify-content:center;
}
.findchip{
  display:inline-flex;align-items:center;gap:1.4cqh;
  font-family:var(--body);font-weight:700;font-size:2.9cqh;line-height:1.2;
  color:var(--bark);background:#fff;
  border:1px solid rgba(42,61,28,.16);border-left:.8cqh solid var(--stage);
  border-radius:4px 16px 16px 4px;padding:1.6cqh 2.4cqh;cursor:pointer;
  transition:background .25s ease, border-color .25s ease, opacity .25s ease;
}
.findtick{
  width:3.4cqh;height:3.4cqh;flex:0 0 auto;border-radius:8px;
  border:.4cqh solid var(--stage);background:#fff;position:relative;
}
.findtick::after{
  content:'';position:absolute;left:30%;top:12%;width:32%;height:58%;
  border-right:.45cqh solid #fff;border-bottom:.45cqh solid #fff;
  transform:rotate(42deg) scale(.4);opacity:0;transition:transform .2s ease, opacity .2s ease;
}
.findchip.found{background:var(--stage-soft);border-color:var(--stage)}
.findchip.found .findtick{background:var(--stage)}
.findchip.found .findtick::after{opacity:1;transform:rotate(42deg) scale(1)}
.findchip:active{transform:scale(.98)}

/* the one being hunted for right now sits forward */
.findchip[data-now]{box-shadow:0 0 0 .5cqh var(--stage-soft)}
.findchip.found[data-now]{box-shadow:none}

/* a letter on the path that has been spotted */
.sc-letter{cursor:pointer;transition:box-shadow .25s ease, transform .2s ease}
.sc-letter.spotted{box-shadow:0 0 0 .7cqh var(--stage-soft), 0 .5cqh 0 rgba(42,61,28,.12)}

/* the one line a child is given. short enough to be recognised
   rather than read, and quieter than the work it introduces */
.child-line{
  font-family:var(--body);font-weight:700;font-size:3.4cqh;line-height:1.3;
  color:var(--bark);opacity:.85;margin:.6cqh 0 1.6cqh;
}

/* ============================================================
   THE GARDEN PATH
   The letters used to lie flat on grass with no reason to be
   there. They are signposts now, standing along Escargot's route,
   each on its own stake, getting smaller as the path goes away.
   A child can see why they are in a row and why they are worth
   looking at.
   ============================================================ */
.sc-post{
  position:absolute;transform-origin:bottom center;
  display:flex;flex-direction:column;align-items:center;
}
.sc-post .sc-letter{position:static;transform-origin:center}
.sc-stake{
  display:block;width:.9cqh;height:5.2cqh;
  background:linear-gradient(180deg, rgba(180,121,31,.85), rgba(140,95,25,.7));
  border-radius:0 0 2px 2px;margin-top:-.2cqh;
}

/* a hedge along the back so the path goes somewhere */
.sc-hedge{
  position:absolute;left:-4%;right:-4%;top:36%;height:16%;
  background:radial-gradient(ellipse at 20% 100%, rgba(103,148,54,.55), transparent 60%),
             radial-gradient(ellipse at 50% 100%, rgba(103,148,54,.45), transparent 62%),
             radial-gradient(ellipse at 82% 100%, rgba(103,148,54,.5), transparent 60%);
}
/* and a gate at the far end, so the path is going to somewhere */
.sc-gate{
  position:absolute;right:9%;top:33%;width:7%;height:11%;
  border:.45cqh solid rgba(180,121,31,.75);border-bottom:0;border-radius:40% 40% 0 0;
  background:linear-gradient(180deg, rgba(255,255,255,.55), transparent);
}