:root {
  color-scheme: light;
  --ink: #233e31;
  --green: #214b3b;
  --green-dark: #173b2d;
  --rust: #aa4f2e;
  --paper: #fffdf6;
  --cream: #f7f1e4;
  --line: #e1d5bd;
  font-family: Georgia, 'Times New Roman', serif;
  background: var(--cream);
  color: var(--ink);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
button, textarea, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, textarea:focus-visible { outline: 3px solid #b75a32; outline-offset: 3px; }
.site-header { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 max(20px, calc((100vw - 1050px) / 2)); border-bottom: 1px solid #e4d9c6; background: #fbf7ec; }
.brand { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; border: 0; padding: 0; background: transparent; color: var(--green); font-size: 20px; font-weight: 700; white-space: nowrap; }
.brand img { border-radius: 50%; }
.brand em { color: var(--rust); font-style: normal; }
.language-button { min-height: 46px; padding: 8px 14px; border: 1px solid #c9d1bc; border-radius: 24px; background: transparent; color: var(--green); font: 700 14px/1.2 Arial, sans-serif; }
main { max-width: 1080px; margin: auto; padding: 30px 24px 50px; outline: none; }
.eyebrow, .section-label { margin: 0; color: #9c5436; font: 700 12px/1.4 Arial, sans-serif; letter-spacing: .13em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-weight: 500; }
.home-intro { text-align: center; margin-bottom: 25px; }
.home-intro h1 { margin: 9px 0 8px; font-size: clamp(32px, 5vw, 47px); line-height: 1.1; }
.home-intro p:last-child { margin-bottom: 0; font-size: 19px; line-height: 1.45; color: #50675a; }
.shelf-heading { max-width: 820px; margin: 0 auto 13px; display: flex; justify-content: space-between; align-items: baseline; }
.shelf-heading h2 { margin: 0; font-size: 22px; }
.shelf-heading span { font: 14px Arial, sans-serif; color: #67796c; }
.story-list { max-width: 820px; margin: auto; display: grid; gap: 18px; }
.shelf-book { display: grid; grid-template-columns: minmax(190px, 43%) 1fr; overflow: hidden; background: var(--paper); border: 1px solid #e1d4bd; border-radius: 10px; box-shadow: 0 12px 30px #544b3015; }
.shelf-book img { width: 100%; height: 100%; min-height: 265px; max-height: 330px; object-fit: cover; background: #e7c7a2; }
.shelf-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 30px; }
.shelf-copy h3 { margin: 10px 0 10px; font-size: clamp(27px, 4.3vw, 38px); line-height: 1.1; }
.shelf-copy p:not(.eyebrow) { color: #53695b; font-size: 18px; line-height: 1.4; }
.primary, .secondary, .nav-button, .whatsapp, .choice { min-height: 52px; border-radius: 7px; font: 700 16px/1.25 Arial, sans-serif; text-decoration: none; }
.primary, .nav-button.next { color: white; background: var(--green); border: 1px solid var(--green); }
.primary { padding: 13px 22px; }
.primary:hover, .nav-button.next:hover { background: var(--green-dark); }
.secondary, .nav-button.prev, .whatsapp { background: #fffdf6; border: 1px solid #abb7a4; color: var(--green); padding: 12px 18px; }
.reader { max-width: 950px; margin: 0 auto; }
.reader-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 15px; }
.reader-heading h1 { margin: 0; font-size: clamp(20px, 3.2vw, 28px); line-height: 1.15; }
.reader-heading .page-count { flex: none; font: 15px Arial, sans-serif; color: #5c6f60; }
.open-book { display: grid; grid-template-columns: 1fr 1fr; min-height: 470px; background: var(--paper); border: 1px solid #dfd0b8; border-radius: 7px; box-shadow: 0 11px 26px #604d321c; overflow: hidden; }
.illustration { position: relative; min-height: 420px; background: #e9d4b8; overflow: hidden; }
.illustration img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.page-copy { padding: clamp(24px, 4.5vw, 45px); display: flex; flex-direction: column; justify-content: center; align-items: stretch; box-shadow: inset 9px 0 13px -13px #6d6049; }
.page-copy .little-star { color: #b5683d; font-size: 25px; line-height: 1; margin-bottom: 22px; }
.story-text { white-space: pre-line; margin: 0; font-size: clamp(21px, 2.9vw, 25px); line-height: 1.52; letter-spacing: .003em; }
.story-end { margin: 20px 0 0; color: #a45a36; font-size: 18px; font-style: italic; }
.choice-title { font-size: 19px; line-height: 1.3; font-weight: 700; margin: 20px 0 10px; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.choice { padding: 0 0 10px; overflow: hidden; border: 1px solid #c6cdbb; background: #f8f5e9; color: var(--green); }
.choice img { display: block; width: 100%; height: 80px; object-fit: cover; margin-bottom: 8px; }
.choice span { display: block; padding: 0 7px; }
.reader-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.nav-button { width: 100%; padding: 12px 14px; }
.nav-button:disabled { opacity: .45; cursor: default; }
.after-story { margin: 22px 0 0; padding: 20px; border: 1px solid #ded4bf; border-radius: 8px; background: #fbf8ee; }
.after-story h2 { font-size: 24px; margin-bottom: 9px; }
.after-story p { font-size: 17px; line-height: 1.45; margin-bottom: 13px; }
.after-story textarea { display: block; width: 100%; min-height: 110px; resize: vertical; border: 1px solid #a7b39f; border-radius: 6px; background: #fffefa; padding: 12px; color: var(--ink); font: 18px/1.4 Arial, sans-serif; }
.after-story form .primary { margin-top: 10px; }
.after-story .private-note { color: #5f6d5d; font: 14px/1.4 Arial, sans-serif; margin: 9px 0 0; }
.share-row { margin-top: 15px; display: flex; flex-wrap: wrap; gap: 10px; }
.whatsapp { display: inline-flex; justify-content: center; align-items: center; }
.small-note { font: 14px/1.4 Arial, sans-serif; color: #617363; margin: 12px 0 0; }
.install-hint { max-width: 820px; margin: 20px auto 0; color: #5c7060; font: 15px/1.5 Arial, sans-serif; }
.toast { position: fixed; bottom: max(15px, env(safe-area-inset-bottom)); left: 50%; transform: translate(-50%, 12px); width: max-content; max-width: calc(100% - 32px); opacity: 0; pointer-events: none; background: var(--green-dark); color: white; padding: 12px 17px; border-radius: 8px; font: 15px/1.4 Arial, sans-serif; transition: opacity .2s, transform .2s; z-index: 10; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.loading, .error { margin: 50px auto; max-width: 620px; font-size: 21px; line-height: 1.5; }
@media (max-width: 620px) {
  .site-header { height: 68px; padding: 0 16px; }
  main { padding: 22px 16px 36px; }
  .home-intro { margin-bottom: 23px; }
  .home-intro h1 { font-size: 33px; }
  .shelf-book { grid-template-columns: 1fr; }
  .shelf-book img { height: 240px; min-height: 0; }
  .shelf-copy { padding: 24px; }
  .shelf-copy h3 { font-size: 30px; }
  .reader-heading { margin-bottom: 11px; }
  .reader-heading h1 { font-size: 21px; }
  .reader-heading .page-count { font-size: 14px; }
  .open-book { display: block; min-height: 0; }
  .illustration { min-height: 0; height: clamp(235px, 67vw, 330px); }
  .page-copy { padding: 25px 24px 28px; box-shadow: none; }
  .page-copy .little-star { margin-bottom: 13px; font-size: 21px; }
  .story-text { font-size: 22px; line-height: 1.46; }
  .choice img { height: 76px; }
  .reader-nav { margin-top: 12px; gap: 9px; }
}
@media (max-width: 335px) {
  .brand { font-size: 18px; gap: 6px; }
  .language-button { padding: 8px 10px; font-size: 13px; }
  .page-copy { padding: 22px 19px; }
  .choice-grid { grid-template-columns: 1fr; }
}
/* ---- The garden, the classroom and the drawing page (added 2026-11-10) ---- */
.home-intro { margin-bottom: 16px; }
.garden { max-width: 820px; margin: 0 auto 26px; background: var(--paper); border: 1px solid #e1d4bd; border-radius: 10px; overflow: hidden; box-shadow: 0 12px 30px #544b3015; }
.garden-art { display: block; width: 100%; height: clamp(190px, 44vw, 350px); }
.garden-caption { padding: 16px 22px 18px; }
.garden-text { margin: 5px 0 0; font-size: 21px; line-height: 1.35; }
.garden-note { margin: 6px 0 0; color: #617363; font: 14px/1.4 Arial, sans-serif; }
.girl { cursor: pointer; outline: none; }
.girl:focus-visible image { filter: drop-shadow(0 0 3px #fff3bf); }
.sway { animation: sway 5.5s ease-in-out infinite alternate; }
.twinkle { animation: twinkle 3.4s ease-in-out infinite alternate; }
.lantern, .glow, .glint { animation: glow 2.8s ease-in-out infinite alternate; }
.fly { animation: fly 9s ease-in-out 0.6s 1 both; }
@keyframes sway { from { transform: rotate(-2.2deg); } to { transform: rotate(2.2deg); } }
@keyframes twinkle { from { opacity: .35; } to { opacity: 1; } }
@keyframes glow { from { opacity: .72; } to { opacity: 1; } }
@keyframes fly { 0% { transform: translate(-60px, 150px); } 35% { transform: translate(260px, 70px); } 70% { transform: translate(560px, 120px); } 100% { transform: translate(860px, 40px); } }
.class-door { max-width: 820px; margin: 22px auto 0; display: grid; grid-template-columns: minmax(150px, 30%) 1fr; overflow: hidden; background: var(--paper); border: 1px solid #e1d4bd; border-radius: 10px; box-shadow: 0 12px 30px #544b3015; }
.class-door img { width: 100%; height: 100%; max-height: 260px; object-fit: cover; object-position: 50% 30%; }
.class-door h3 { margin: 10px 0 8px; font-size: clamp(24px, 3.8vw, 32px); line-height: 1.12; }
.classroom, .pad { max-width: 820px; margin: 0 auto; }
.class-head { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 22px; align-items: center; margin-bottom: 20px; }
.class-head img { width: 100%; height: auto; border-radius: 10px; border: 1px solid #d9c8a9; }
.class-head h1 { margin: 8px 0 8px; font-size: clamp(27px, 4.6vw, 40px); line-height: 1.1; }
.class-sub { margin: 0; color: #53695b; font-size: 18px; line-height: 1.4; }
.chalkboard { padding: 24px 26px 26px; border: 9px solid #7a5a3c; border-radius: 8px; background: #2f4a3d; color: #f4f1e4; box-shadow: inset 0 0 40px #0003; }
.chalk-label { margin: 0 0 8px; color: #e9c98a; font: 700 12px/1.4 Arial, sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.chalkboard h2 { margin: 0 0 10px; font-size: clamp(25px, 4vw, 32px); }
.chalk-fact { margin: 0; font-size: clamp(20px, 2.8vw, 23px); line-height: 1.5; }
.chalk-task { margin: 18px 0 0; padding-top: 14px; border-top: 1px dashed #ffffff55; color: #ffe6ae; font-size: 20px; line-height: 1.4; }
.classroom > section { margin-top: 28px; }
.classroom .shelf-heading { margin-bottom: 12px; gap: 12px; }
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.pinned { display: flex; flex-direction: column; gap: 4px; padding: 8px 8px 10px; border: 1px solid #d9cdb3; border-radius: 6px; background: #fbf5e6; color: var(--ink); text-align: left; box-shadow: 0 5px 12px #544b3018; }
.pinned:nth-child(odd) { transform: rotate(-1deg); }
.pinned:nth-child(even) { transform: rotate(.8deg); }
.pinned canvas { display: block; width: 100%; aspect-ratio: 1; border: 1px solid #e6dcc5; background: var(--paper); }
.pin-title { font-size: 17px; line-height: 1.2; }
.pin-by { color: #67796c; font: 13px/1.3 Arial, sans-serif; }
.wall-empty { padding: 26px 20px; border: 2px dashed #d3c6a8; border-radius: 8px; color: #617363; font-size: 19px; text-align: center; }
.stage { margin-top: 18px; padding: 12px; border: 1px solid #ded4bf; border-radius: 8px; background: #fbf8ee; }
.stage canvas { display: block; width: min(100%, 560px); aspect-ratio: 1; margin: 0 auto; border: 1px solid #e1d5bd; background: var(--paper); }
.stage-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.stage-bar strong { font-size: 19px; font-weight: 500; }
.stage-bar span { color: #67796c; font: 14px Arial, sans-serif; margin-right: auto; }
.class-actions { margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pad-task { margin: 0 0 12px; font-size: 20px; color: #7a4a2c; }
#pad-canvas { display: block; width: min(100%, 78vh, 760px); aspect-ratio: 1; margin: 0 auto; border: 2px solid #d9c8a9; border-radius: 6px; background: var(--paper); touch-action: none; cursor: crosshair; box-shadow: 0 8px 20px #544b3018; }
.pad-tools { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 14px; }
.swatch, .size { width: 48px; height: 48px; border-radius: 50%; border: 3px solid #fffdf6; outline: 1px solid #b9ad94; background: var(--c, #fffdf6); color: #5c6f60; font-size: 18px; display: grid; place-items: center; padding: 0; }
.swatch.on, .size.on { outline: 3px solid var(--green); }
.size i { display: block; border-radius: 50%; background: var(--ink); }
.pad label { display: block; margin: 12px 0 6px; font: 700 15px Arial, sans-serif; }
.pad label:first-child { margin-top: 0; }
.pad input, .pad select { width: 100%; min-height: 50px; padding: 10px 12px; border: 1px solid #a7b39f; border-radius: 6px; background: #fffefa; color: var(--ink); font: 18px Arial, sans-serif; }
/* Page turns, and a last page that goes quiet */
.open-book.turn-next .page-copy, .open-book.turn-next .illustration img { animation: turn-next .42s ease-out both; }
.open-book.turn-back .page-copy, .open-book.turn-back .illustration img { animation: turn-back .42s ease-out both; }
@keyframes turn-next { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes turn-back { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
.reader.is-end .open-book { animation: dim 2.4s ease-out .5s both; }
@keyframes dim { to { background: #f1ead9; box-shadow: 0 11px 34px #1b2a3a40; filter: brightness(.94) saturate(.92); } }
@media (max-width: 620px) {
  .garden-caption { padding: 14px 18px 16px; }
  .garden-text { font-size: 19px; }
  .class-door { grid-template-columns: 1fr; }
  .class-door img { height: 210px; }
  .class-head { grid-template-columns: 1fr; gap: 14px; }
  .class-head img { max-width: 260px; margin: 0 auto; }
  .chalkboard { padding: 20px; border-width: 7px; }
}
/* ---- Muse's art (added 2026-11-10) ---- */
.garden-art, .kitchen-art { display: block; width: 100%; }
.garden-art { height: auto; aspect-ratio: 1600 / 720; }
.kitchen-art { aspect-ratio: 1200 / 870; border-radius: 10px; border: 1px solid #d9c8a9; }
.actor { cursor: pointer; outline: none; }
.actor:focus-visible image { filter: drop-shadow(0 0 4px #fff3bf); }
.class-head { grid-template-columns: 1fr; gap: 16px; }
.kitchen { min-height: 120px; }
.chalkboard { border: 0; border-radius: 6px; box-shadow: none; background: #2f4a3d url("./art/leoncio/chalkboard.webp") center / 100% 100% no-repeat; aspect-ratio: 3 / 2; padding: 17% 25% 25% 26%; display: flex; flex-direction: column; justify-content: center; overflow: hidden; container-type: inline-size; }
.chalkboard h2 { font-size: clamp(13px, 4.2cqw, 34px); margin-bottom: 1.5cqw; }
.chalk-fact { font-size: clamp(10px, 3cqw, 24px); line-height: 1.38; }
.chalk-task { font-size: clamp(10px, 2.8cqw, 22px); margin-top: 2cqw; padding-top: 1.6cqw; }
.chalk-label { font-size: clamp(7px, 1.7cqw, 13px); margin-bottom: 1cqw; }
.wall { background: #c9a36b url("./art/leoncio/wall.webp") center / 100% 100% no-repeat; aspect-ratio: 3 / 2; padding: 25% 21% 7% 21%; align-content: start; overflow-y: auto; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.wall-empty { background: #c9a36b url("./art/leoncio/wall.webp") center / 100% 100% no-repeat; aspect-ratio: 3 / 2; border: 0; display: grid; place-items: center; padding: 26% 22% 10%; color: #5a3f22; }
.pinned { padding: 5px 5px 7px; }
.pin-title { font-size: 14px; }
.pin-by { font-size: 11px; }
/* Story pictures are square: show the whole picture instead of cropping it. */
.open-book .illustration { aspect-ratio: 1 / 1; min-height: 0; height: auto; align-self: start; }
.open-book { align-items: start; }
.open-book .page-copy { align-self: stretch; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } .fly { display: none; } }

/* The portrait from the kitchen wall, opened. */
.portrait-view { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px; background: rgba(28, 18, 10, .94); }
.portrait-view figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: 0; }
.portrait-view img { display: block; width: min(92vw, 70vh); height: auto; aspect-ratio: 1; image-rendering: pixelated; border: 6px solid #8a5c34; outline: 3px solid #3d2616; border-radius: 4px; }
.portrait-view figcaption { color: #fdf3df; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.15rem, 4.6vw, 1.6rem); text-align: center; }
.portrait-close { font: inherit; font-size: 1.05rem; padding: 10px 22px; min-height: 48px; border-radius: 999px; border: 1px solid #d9c8a9; background: #fdf3df; color: #3d2616; }

/* Muse's chalkboard stays in the scene; the same lesson is easy to read on a phone. */
.classroom > .lesson-readable { margin-top: 12px; padding: 22px 24px; border: 1px solid #dfd1b7; border-radius: 10px; background: #fffdf5; color: #293f34; }
.lesson-readable .lesson-readable-label { margin: 0 0 8px; color: #8c6653; font: 700 12px/1.4 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.lesson-readable h2 { margin: 0 0 12px; font-size: 26px; line-height: 1.2; }
.lesson-readable p { margin: 0; font-size: 20px; line-height: 1.5; }
.lesson-readable .lesson-readable-task { margin-top: 16px; padding-top: 14px; border-top: 1px solid #e2d8c4; }

/* A single welcoming family-word screen, sized for a phone. */
.family-door { min-height: min(76vh, 720px); display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 32px 0; }
.family-card { width: min(100%, 520px); min-width: 0; padding: clamp(24px, 5vw, 42px); border: 1px solid #dfd1b7; border-radius: 18px; background: #fffdf5; box-shadow: 0 12px 34px #563c2114; }
.family-card h1 { margin: 8px 0 14px; font-size: clamp(30px, 7vw, 44px); line-height: 1.1; }
.family-card > p:not(.eyebrow) { margin: 0 0 24px; font-size: 21px; line-height: 1.4; }
.family-card label { display: block; margin-bottom: 10px; font-size: 19px; font-weight: 700; }
.family-word-row { display: flex; gap: 10px; align-items: stretch; }
.family-word-row input { min-width: 0; flex: 1; min-height: 54px; padding: 10px 14px; border: 1px solid #a99a80; border-radius: 8px; background: #fff; color: #253a30; font: inherit; font-size: 23px; }
.family-word-row button { min-height: 54px; }
.family-enter { width: 100%; margin-top: 18px; min-height: 54px; font-size: 20px; }
.family-feedback { min-height: 2.8em; margin: 14px 0 0; color: #78513c; font-size: 18px; line-height: 1.4; }