/* Sounds & Motions — Myrtle Farm Montessori.
   School palette from public/brand/provenance.json; Montessori letter colours:
   vowels blue, consonants rose. */
:root {
  --green: #086738; --green-dark: #054a28; --green-tint: #e5f1e9;
  --barn: #bb1f25; --barn-dark: #961a1f;
  --sky: #22aae2; --sky-tint: #e3f3fb;
  --earth: #a87b50; --earth-tint: #f6eee4;
  --ink: #231f20; --muted: #555d5a; --line: #e4ded1;
  --paper: #fbf9f4; --card: #ffffff;
  --vowel: #23699a; --vowel-tint: #e6f0f8;
  --consonant: #a83a5b; --consonant-tint: #f9eaee;
  --learning: 'Andika', 'Nunito Sans', sans-serif;
  --radius: 20px; --gutter: 16px; --page: 1080px;
  color: var(--ink); background: var(--paper);
  font: 17px/1.55 'Nunito Sans', system-ui, sans-serif;
  font-synthesis: none; -webkit-text-size-adjust: 100%;
}
@view-transition { navigation: auto; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--paper); }
main { flex: 1; width: 100%; max-width: var(--page); margin: 0 auto; padding: 8px var(--gutter) 40px; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
svg { display: block; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 6px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; left: 12px; top: -80px; z-index: 100; background: var(--card); padding: 12px 16px; border-radius: 10px; font-weight: 800; }
.skip-link:focus { top: 12px; }

/* Letter forms ------------------------------------------------------------- */
.learning { font-family: var(--learning); font-weight: 400; }
html[data-font="cursive"] { --learning: 'Playwrite US Trad', cursive; }
html[data-font="modern"] { --learning: 'Playwrite US Modern', cursive; }
.font-beginner { font-family: 'Andika', sans-serif; }
.font-cursive { font-family: 'Playwrite US Trad', cursive; }
.font-modern { font-family: 'Playwrite US Modern', cursive; }
html[data-case="lower"] .glyph .uc, html[data-case="upper"] .glyph .lc { display: none; }
.vowel { --tone: var(--vowel); --tint: var(--vowel-tint); }
.consonant { --tone: var(--consonant); --tint: var(--consonant-tint); }

/* Header ------------------------------------------------------------------- */
.site-header { width: 100%; max-width: var(--page); margin: 0 auto; padding: 14px var(--gutter); display: flex; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.school-logo { width: 52px; height: 52px; flex-shrink: 0; }
.brand-text { font-size: 21px; font-weight: 800; line-height: 1.15; color: var(--green); letter-spacing: -.3px; }
.brand-text small { display: block; font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: 0; margin-top: 2px; }
.site-nav { display: flex; gap: 4px; margin-left: auto; }
.site-nav a { font-size: 15px; font-weight: 700; padding: 10px 14px; border-radius: 999px; min-height: 44px; display: flex; align-items: center; }
.site-nav a:hover { background: var(--green-tint); }
.site-nav a[aria-current] { color: var(--green); background: var(--green-tint); }
.style-button { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: 15px; font-weight: 700; }
.style-button:hover { border-color: var(--green); }
.style-glyph { font-family: 'Andika', sans-serif; font-size: 22px; line-height: 1; color: var(--green); }

/* Letter strip ------------------------------------------------------------- */
.letter-strip { width: 100%; max-width: var(--page); margin: 0 auto; }
.letter-strip ol { display: flex; gap: 4px; padding: 4px var(--gutter) 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.letter-strip ol::-webkit-scrollbar { display: none; }
.letter-strip li { flex: 1 0 auto; scroll-snap-align: center; }
.strip-letter { display: grid; place-items: center; min-width: 38px; height: 46px; padding: 0 4px; border-radius: 12px; font-size: 25px; line-height: 1; color: var(--tone); background: var(--tint); }
.strip-letter:hover { box-shadow: inset 0 0 0 2px var(--tone); }
.strip-letter[aria-current] { background: var(--tone); color: #fff; }

/* Letter page -------------------------------------------------------------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); grid-template-areas: "identity stage" "instructions stage"; column-gap: 48px; row-gap: 28px; padding-top: 16px; }
.identity { grid-area: identity; align-self: end; }
.hero-heading { display: flex; flex-direction: column; font-weight: 400; }
/* The box reserves each font's tallest ascender and deepest descender (measured
   over a-z and Aa-Zz), so the sound line below never collides with a letter.
   The font's invisible text box reaches up over the letter strip, so taps pass
   through it to the strip letters. */
.hero-letter { display: block; font-size: 200px; line-height: 1; padding: 0 0 .17em; color: var(--tone); letter-spacing: -2px; pointer-events: none; }
html[data-font="cursive"] .hero-letter { padding: .14em .2em .5em .3em; }
html[data-font="modern"] .hero-letter { padding: .02em .08em .44em; }
.cue { font-size: 24px; line-height: 1.3; color: var(--muted); }
.cue .sound { font-family: 'Andika', sans-serif; font-size: 34px; font-weight: 700; color: var(--ink); margin-right: 6px; }
.cue strong { color: var(--ink); font-weight: 800; }
.note { margin-top: 12px; font-size: 17px; color: #3d4442; max-width: 34ch; }
.instructions { grid-area: instructions; align-self: start; }
.howto { font-size: 25px; line-height: 1.3; font-weight: 800; color: var(--green); max-width: 22ch; text-wrap: balance; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; }
.teacher-toggle, .primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 22px; border-radius: 999px; background: var(--green); color: #fff; font-size: 17px; font-weight: 800; }
.teacher-toggle:hover, .primary-button:hover { background: var(--green-dark); }
.teacher-toggle[aria-expanded="true"] { background: var(--card); color: var(--green); box-shadow: inset 0 0 0 2px var(--green); }
.teacher-toggle svg, .primary-button svg, .quiet-button svg { width: 22px; height: 22px; flex-shrink: 0; }
.quiet-button { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 12px 18px; border-radius: 999px; font-size: 16px; font-weight: 700; color: var(--green); }
.quiet-button:hover { background: var(--green-tint); }

.stage { grid-area: stage; position: relative; }
.stage-art { position: relative; aspect-ratio: 208 / 196; border-radius: 28px; overflow: hidden; background: #cfeaf7; isolation: isolate; touch-action: pan-y pinch-zoom; }
.scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.frida-live { position: absolute; inset: 0; }
.frida-svg { width: 100%; height: 100%; }
.stage-controls { position: absolute; right: 14px; bottom: 14px; display: flex; gap: 10px; }
.round-button { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .94); color: var(--green); box-shadow: 0 2px 10px rgba(35, 31, 32, .2); font-weight: 800; font-size: 17px; }
.round-button svg { width: 22px; height: 22px; }
.round-button:hover { background: #fff; }
[data-action="motion"][data-state="playing"] svg:first-child, [data-action="motion"]:not([data-state="playing"]) svg:last-child { display: none; }
.slow-button[aria-pressed="true"] { background: var(--green); color: #fff; }
.frida-live .frida-eyes { transform-box: fill-box; transform-origin: center; animation: frida-blink 5.2s infinite; }
@keyframes frida-blink { 0%, 94%, 100% { transform: scaleY(1); } 96.5% { transform: scaleY(.1); } }

.teacher-player { margin-top: 24px; padding: 14px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.teacher-player[hidden] { display: none; }
.teacher-player video { display: block; width: 100%; max-height: 70vh; aspect-ratio: 16 / 9; object-fit: contain; background: var(--ink); border-radius: 12px; }
.teacher-caption { margin-top: 10px; color: var(--muted); font-size: 15px; }
.teacher-close { margin-top: 4px; }

.steps { margin-top: 44px; }
.steps h2 { font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--green); margin-bottom: 14px; }
.storyboard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.storyboard li { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.still { aspect-ratio: 208 / 196; background: linear-gradient(#dcf0f9 0 62%, #c4e0b2 62%); }
.storyboard p { display: flex; gap: 10px; align-items: baseline; padding: 14px 16px 16px; font-size: 17px; line-height: 1.4; }
.step-number { flex-shrink: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--tone); color: #fff; font-size: 14px; font-weight: 800; transform: translateY(-1px); }

.pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: 36px; padding-top: 14px; border-top: 1px solid var(--line); }
.pager-link { display: flex; align-items: center; gap: 4px; min-width: 88px; min-height: 56px; padding: 0 12px; border-radius: 16px; font-size: 34px; line-height: 1; }
.pager-link[rel="next"] { justify-self: end; justify-content: flex-end; }
a.pager-link:hover, .pager-all:hover { background: var(--green-tint); }
.pager-link > span { color: var(--tone); }
.pager-link svg { width: 26px; height: 26px; color: var(--green); }
.pager-all { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 18px; border-radius: 999px; font-size: 17px; font-weight: 800; color: var(--green); }
.pager-all svg { width: 20px; height: 20px; }

/* Index -------------------------------------------------------------------- */
.index-intro { padding: 20px 0 24px; }
.index-intro h1, .guide-main h1 { font-size: clamp(32px, 5vw, 46px); line-height: 1.1; font-weight: 800; letter-spacing: -1px; color: var(--green); }
.index-intro p { margin-top: 10px; font-size: 19px; max-width: 40ch; }
.text-link { font-weight: 800; color: var(--green); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; padding: 10px 0; }
.alphabet { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.tile { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "art art" "letter word"; align-items: center; column-gap: 10px; height: 100%; padding: 8px 12px 10px 8px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); border-bottom: 5px solid var(--tone); color: var(--tone); transition: transform .15s ease, box-shadow .15s ease; }
.tile:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(35, 31, 32, .1); }
.tile-frida { grid-area: art; display: block; aspect-ratio: 208 / 196; margin-bottom: 4px; border-radius: 14px; overflow: hidden; background: linear-gradient(#dcf0f9 0 62%, #c4e0b2 62%); }
.tile-letter { grid-area: letter; font-size: 48px; line-height: 1.15; padding-left: 4px; }
.tile-word { grid-area: word; font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.color-key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 24px; font-size: 15px; color: var(--muted); }
.color-key .text-link { margin-left: auto; font-size: 16px; }
.color-key span::before { content: ''; display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 8px; vertical-align: -1px; }
.vowel-key::before { background: var(--vowel); }
.consonant-key::before { background: var(--consonant); }

/* Guide -------------------------------------------------------------------- */
.guide-main { max-width: 760px; padding-top: 24px; }
.guide-list { margin: 28px 0 24px; counter-reset: guide; display: grid; gap: 14px; }
.guide-list li { counter-increment: guide; position: relative; padding: 18px 20px 18px 66px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.guide-list li::before { content: counter(guide); position: absolute; left: 18px; top: 18px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #fff; font-weight: 800; font-size: 16px; }
.guide-list h2 { font-size: 19px; margin-bottom: 4px; }
.guide-list p, .guide-main > p { font-size: 17px; color: #3b4240; }
.guide-links { margin-bottom: 20px; }
.guide-links a, .guide-list a { color: var(--green); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; word-break: break-all; }
.guide-main > .primary-button { margin-top: 20px; }

/* Footer, toast, dialog ---------------------------------------------------- */
.site-footer { width: 100%; max-width: var(--page); margin: 0 auto; padding: 22px var(--gutter) 32px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
#toast { position: fixed; bottom: max(24px, env(safe-area-inset-bottom)); left: 50%; z-index: 50; max-width: min(90vw, 460px); padding: 14px 20px; border-radius: 14px; background: var(--green); color: #fff; font-size: 15px; font-weight: 700; opacity: 0; pointer-events: none; transform: translate(-50%, 16px); transition: opacity .2s, transform .2s; box-shadow: 0 6px 24px rgba(35, 31, 32, .2); }
#toast.visible { opacity: 1; transform: translate(-50%, 0); }
dialog { width: min(620px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); border: 0; border-radius: 24px; padding: 24px; color: var(--ink); box-shadow: 0 24px 80px rgba(35, 31, 32, .3); }
dialog::backdrop { background: rgba(35, 31, 32, .45); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dialog-heading h2 { font-size: 24px; color: var(--green); }
.icon-button { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; }
.icon-button:hover { background: var(--green-tint); }
.icon-button svg { width: 22px; height: 22px; }
dialog form > p { font-size: 16px; color: var(--muted); margin: 8px 0 4px; }
fieldset { border: 0; padding: 0; margin: 18px 0 0; min-width: 0; }
legend { font-size: 15px; font-weight: 800; margin-bottom: 10px; padding: 0; }
.font-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.font-option, .case-options label { position: relative; min-width: 0; border: 2px solid var(--line); border-radius: 14px; padding: 12px 36px 12px 14px; cursor: pointer; }
.font-option:has(input:checked), .case-options label:has(input:checked) { border-color: var(--green); background: var(--green-tint); }
.font-option input, .case-options input { position: absolute; top: 12px; right: 12px; accent-color: var(--green); width: 18px; height: 18px; margin: 0; }
.font-preview { display: block; font-size: 30px; line-height: 1.5; white-space: nowrap; }
.font-preview .vowel { color: var(--vowel); }
.font-preview .consonant { color: var(--consonant); }
.font-name { display: block; font-size: 15px; font-weight: 800; }
.font-option small { display: block; font-size: 14px; color: var(--muted); line-height: 1.4; }
.case-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.case-options label { display: flex; flex-direction: column; font-size: 15px; font-weight: 700; }
.case-sample { font-family: 'Andika', sans-serif; font-size: 24px; font-weight: 400; white-space: nowrap; }
.done-button { width: 100%; margin-top: 22px; }

/* Letter style sizing ------------------------------------------------------ */
html[data-case="both"] .hero-letter { font-size: 150px; letter-spacing: -2px; }
html[data-case="both"] .tile-letter { font-size: 36px; }
html[data-case="both"] .strip-letter, html[data-case="both"] .pager-link { font-size: 21px; }
html[data-font="cursive"] .hero-letter, html[data-font="modern"] .hero-letter { font-size: 140px; letter-spacing: 0; }
html[data-font="cursive"][data-case="both"] .hero-letter, html[data-font="modern"][data-case="both"] .hero-letter { font-size: 100px; }
html[data-font="cursive"] .tile-letter, html[data-font="modern"] .tile-letter { font-size: 46px; line-height: 1.7; }
html[data-font="cursive"][data-case="both"] .tile-letter, html[data-font="modern"][data-case="both"] .tile-letter { font-size: 32px; }
html[data-font="cursive"] .strip-letter, html[data-font="modern"] .strip-letter { font-size: 19px; }
html[data-font="cursive"][data-case="both"] .strip-letter, html[data-font="modern"][data-case="both"] .strip-letter { font-size: 15px; }

/* Wide screens: the whole alphabet fits in one row. */
@media (min-width: 1060px) {
  .letter-strip ol { justify-content: center; overflow: visible; }
  .letter-strip li { flex: 0 0 auto; }
}

/* Tablets and phones ------------------------------------------------------- */
@media (max-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "identity" "stage" "instructions"; row-gap: 14px; padding-top: 4px; }
  .hero-heading { flex-direction: row; align-items: center; gap: 16px; }
  .hero-letter { font-size: clamp(84px, 26vw, 120px); flex-shrink: 0; }
  html[data-case="both"] .hero-letter { font-size: clamp(64px, 19vw, 92px); }
  html[data-font="cursive"] .hero-letter, html[data-font="modern"] .hero-letter { font-size: clamp(60px, 18vw, 84px); }
  html[data-font="cursive"][data-case="both"] .hero-letter, html[data-font="modern"][data-case="both"] .hero-letter { font-size: clamp(44px, 13vw, 58px); }
  .cue { font-size: 19px; }
  .cue .sound { display: block; font-size: 30px; line-height: 1.2; }
  .note { margin-top: 2px; font-size: 16px; max-width: none; }
  .stage-art { border-radius: 22px; }
  .howto { font-size: 21px; max-width: none; }
  .actions { margin-top: 14px; gap: 8px; }
  .teacher-toggle { flex: 1 1 auto; }
  .steps { margin-top: 32px; }
  .storyboard { gap: 10px; }
  .storyboard p { flex-direction: column; gap: 6px; padding: 10px 10px 14px; font-size: 15px; }
  .pager { position: sticky; bottom: 0; z-index: 5; margin: 28px calc(-1 * var(--gutter)) -40px; padding: 4px var(--gutter) calc(4px + env(safe-area-inset-bottom)); background: rgba(251, 249, 244, .96); border-top: 1px solid var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .letter-main { padding-bottom: 40px; }
  .alphabet { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }
}
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .site-header { padding-top: 10px; padding-bottom: 10px; gap: 10px; }
  .school-logo { width: 44px; height: 44px; }
  .brand { gap: 9px; }
  .brand-text { font-size: 18px; }
  .brand-text small { font-size: 13px; }
  .site-nav { display: none; }
  .style-button { margin-left: auto; padding: 6px 12px; }
  .style-label { font-size: 14px; }
  .strip-letter { min-width: 36px; height: 44px; font-size: 23px; }
  .round-button { width: 48px; height: 48px; }
  .storyboard p { font-size: 14px; padding: 8px 8px 12px; }
  .step-number { width: 22px; height: 22px; font-size: 13px; }
  .index-intro { padding: 8px 0 16px; }
  .index-intro p { font-size: 17px; }
  .alphabet { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .tile { grid-template-columns: 1fr; grid-template-areas: "letter" "word"; justify-items: center; text-align: center; min-height: 100px; padding: 6px 4px 10px; border-radius: 16px; }
  .tile-frida { display: none; }
  .tile-letter { font-size: 44px; padding: 0; }
  .tile-word { font-size: 14px; }
  html[data-font="cursive"] .tile-letter, html[data-font="modern"] .tile-letter { font-size: 40px; padding-bottom: .25em; }
  html[data-font="cursive"][data-case="both"] .tile-letter, html[data-font="modern"][data-case="both"] .tile-letter { font-size: 28px; }
  .site-footer { font-size: 13px; }
  dialog { padding: 18px; }
  .font-preview { font-size: 24px; }
  .font-option, .case-options label { padding: 10px 30px 10px 12px; }
  .font-option input, .case-options input { top: 10px; right: 10px; }
  .case-sample { font-size: 20px; }
}
@media (max-width: 380px) {
  .style-label { display: none; }
  .style-button { padding: 6px 10px; }
  .tile-letter { font-size: 40px; }
  .tile-word { font-size: 13px; }
}
@media (max-width: 330px) {
  .alphabet { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .font-options { grid-template-columns: 1fr; }
  .storyboard { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  .site-header, .letter-strip, .stage, .actions, .teacher-player, .pager, .site-footer, .skip-link, #toast, dialog { display: none !important; }
  body, main { background: #fff; padding: 0; }
  .hero { display: block; }
  .identity { display: flex; align-items: center; gap: 28px; }
  .hero-letter { font-size: 110px; }
  .steps { break-inside: avoid; margin-top: 16px; }
  .still { height: 200px; }
  .storyboard li, .tip { border: 1px solid #ccc; }
}