:root { color-scheme: light; --ink:#362921; --forest:#2a5141; --wine:#60302d; --paper:#fffaf0; --cream:#f8f0dd; --gold:#c08f4b; --line:#d7c6a7; }
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f9f3e5;color:var(--ink);font-family:Georgia,'Times New Roman',serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #2d7f87;outline-offset:3px}.skip-link{position:absolute;top:-60px;left:15px;z-index:50;padding:10px;background:#fff}.skip-link:focus{top:10px}
.site-header{min-height:76px;position:relative;z-index:5;display:flex;align-items:center;gap:22px;padding:12px clamp(16px,3.3vw,58px);background:#fffdf6f2;border-bottom:1px solid #e5dac7;box-shadow:0 3px 18px #3022140c}.site-brand{font-size:clamp(17px,1.55vw,25px);font-weight:700;color:var(--wine);white-space:nowrap;text-decoration:none}.leaf{font-size:1.5em;color:#748a35;margin-right:7px}.header-rule{height:33px;border-left:1px solid #bca98d}.book-heading{display:flex;align-items:baseline;gap:12px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.book-heading strong{font-style:italic;font-size:clamp(19px,1.8vw,28px);color:var(--wine)}.book-subtitle{font-size:14px;font-style:italic;white-space:nowrap}.top-nav{display:flex;gap:5px;margin-left:auto;white-space:nowrap}.nav-btn{border:0;padding:10px 15px;border-radius:999px;color:#59372c;background:transparent;font-size:14px}.nav-btn:hover{background:#f8ead2}.nav-btn.active{background:#f8e6c8;font-weight:700}
.book-scene{position:relative;isolation:isolate;overflow:hidden;min-height: min(775px,85vh);background:linear-gradient(#c2d8cd 0%,#e6ddad 45%,#d5d5a1 100%);padding:22px clamp(13px,2.5vw,45px) 26px}.book-scene::after{content:"";pointer-events:none;position:absolute;inset:0;background:linear-gradient(90deg,#f3e8bf2c,#ffffff00 30%,#ffffff00 70%,#f3e8bf2c),url("assets/paper-noise.svg");opacity:.5;z-index:-1}.landscape{position:absolute;inset:0;z-index:-2;overflow:hidden}.landscape-sun{position:absolute;top:13%;right:12%;width:145px;aspect-ratio:1;border-radius:50%;background:#ffefd0;box-shadow:0 0 100px 45px #fff4ce}.mountain{position:absolute;left:-10%;width:120%;height:40%;bottom:24%;clip-path:polygon(0 100%,20% 30%,35% 85%,52% 20%,68% 80%,80% 30%,100% 90%,100% 100%)}.mountain-back{background:#98ab9a;opacity:.65;transform:translateY(-30px)}.mountain-front{background:#7d9b83;opacity:.65;bottom:12%;clip-path:polygon(0 100%,12% 65%,24% 79%,40% 30%,52% 85%,67% 52%,80% 71%,100% 30%,100% 100%)}.river{position:absolute;left:-20%;bottom:-23%;width:145%;height:37%;background:linear-gradient(165deg,#a5b9ac 10%,#d5dfbe 20%,#91b7b2 35%,#bed6bb 45%,#9abfbd 90%);transform:rotate(-8deg);border-radius:50%}.hill{position:absolute;bottom:-20%;height:47%;width:42%;border-radius:50%;background:linear-gradient(#9eaa69,#77864e)}.hill-left{left:-19%}.hill-right{right:-21%}.tree{position:absolute;bottom:13%;width:44px;height:76%;background:linear-gradient(90deg,#735135,#af7b4e,#6f4b34);border-radius:25px;opacity:.88}.tree-left{left:3%;transform:rotate(-12deg)}.tree-right{right:3%;transform:rotate(11deg)}.tree-crown{position:absolute;bottom:42%;left:-95px;width:260px;height:270px;border-radius:48%;background:radial-gradient(ellipse at 60% 33%,#e4c45e 0 8%,#9d9c42 8% 21%,#668450 37%,#52713f 66%,#405b3a 100%);box-shadow:40px 35px 6px 15px #6b8755,-35px 15px 6px 10px #7b9153;filter:blur(3px)}.flowers{position:absolute;bottom:5%;font-size:34px;color:#ddaf71;letter-spacing:22px;opacity:.8}.flowers-left{left:1%}.flowers-right{right:1%}
.viewer-topline{max-width:1300px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:12px;position:relative;z-index:2}.series-pill{padding:10px 18px;border-radius:50px;background:#fcf7ebcc;border:1px solid #ffffffbe;color:#63462f;font-size:14px;letter-spacing:.015em;backdrop-filter:blur(7px)}.viewer-actions{display:flex;align-items:center;gap:5px;padding:6px;border-radius:22px;background:#fff9eddf;box-shadow:0 4px 17px #422c2921}.icon-button{border:0;background:transparent;color:#563d2d;min-width:36px;min-height:35px;border-radius:13px;font-size:25px;line-height:1}.icon-button:hover{background:#f2e7d3}.turner{display:grid;grid-template-columns:minmax(40px,1fr) minmax(0,980px) minmax(40px,1fr);align-items:center;gap:clamp(8px,2vw,25px);max-width:1360px;min-height:575px;margin:5px auto 0;touch-action:pan-y;position:relative;z-index:1}.page-arrow{place-self:center;width:clamp(42px,5vw,68px);height:clamp(42px,5vw,68px);border:2px solid #d9b58c;background:#fff8e7ee;color:#573324;border-radius:50%;font-size:clamp(40px,5vw,62px);line-height:40px;display:grid;place-items:center;box-shadow:0 5px 14px #44291a3a}.page-arrow span{margin-top:-7px}.page-arrow:hover:not(:disabled){background:#fff;transform:translateY(-2px)}.page-arrow:disabled{opacity:.36;cursor:default;box-shadow:none}.page-mat{width:100%;min-height:530px;max-height:575px;display:flex;justify-content:center;align-items:center;overflow:visible;perspective:1200px}.page-paper{background:#fff8e9;display:flex;justify-content:center;align-items:center;border:8px solid #fff5de;outline:2px solid #9d764a;border-radius:5px;box-shadow:5px 4px 0 #b79058,8px 7px 0 #8a6243,0 19px 40px #321d145b,0 5px 12px #2f1a1336;transition:transform 250ms ease;transform-origin:center center;overflow:hidden;max-height:530px;max-width:100%;will-change:transform}.page-paper img{max-height:515px;max-width:min(100%,920px);height:auto;width:auto;object-fit:contain;display:block;user-select:none}.page-paper.flipping-next{animation:turnNext .3s ease both}.page-paper.flipping-prev{animation:turnPrev .3s ease both}@keyframes turnNext{0%{transform:rotateY(0deg) translateX(0);opacity:1}45%{transform:rotateY(-14deg) translateX(-22px);opacity:.8}100%{transform:rotateY(0deg) translateX(0);opacity:1}}@keyframes turnPrev{0%{transform:rotateY(0deg)}45%{transform:rotateY(14deg) translateX(22px);opacity:.8}100%{transform:rotateY(0deg);opacity:1}}
.reader-bottom{max-width:990px;margin:0 auto;text-align:center;position:relative;z-index:1}.page-indicator{background:#fffaeedc;padding:10px 24px;min-width:170px;border-radius:35px;border:1px solid #d8bfa0;display:inline-flex;gap:9px;align-items:center;justify-content:center;box-shadow:0 3px 8px #533d2521;font-weight:700}.page-dot{color:#ad8f6b}.reader-help{margin:13px auto;color:#51372c;font-style:italic;font-size:14px;text-shadow:0 1px 8px #fff}.reader-help span{margin:0 8px}.progress-track{height:5px;width:min(480px,70%);background:#f9edd6ad;border-radius:10px;margin:13px auto 0;overflow:hidden}.progress-track span{display:block;height:100%;width:5.25%;border-radius:10px;background:#8d6b3e;transition:width .25s}
.reading-rail{padding:22px clamp(14px,4.5vw,70px) 30px;background:#fdf8ec;border-top:2px solid #eee1cc}.rail-top{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1350px;margin:0 auto 14px}.rail-top h2{font-size:19px;margin:0;color:#60452f}.rail-right{display:flex;gap:7px}.small-button{padding:9px 13px;border-radius:12px;border:1px solid #cdb995;background:#fff8ea;color:#67472f;font-family:inherit;font-size:13px;text-decoration:none}.small-button:hover{background:#f6eacb}.small-button.secondary{background:#f9efe0}.thumbnail-list{max-width:1350px;margin:auto;display:flex;overflow-x:auto;gap:13px;padding:8px 5px 18px;scroll-snap-type:x proximity;scrollbar-color:#ad9677 #f6eddd;scrollbar-width:thin}.thumb{position:relative;flex:none;max-width:112px;min-width:85px;display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:transparent;color:#57422f;padding:2px 2px 6px;scroll-snap-align:center}.thumb img{height:85px;width:auto;max-width:125px;object-fit:contain;border:3px solid #fff;box-shadow:0 2px 6px #4a352d33;border-radius:5px;transition:transform .15s}.thumb span{font-size:11px;max-width:120px;line-height:1.2;text-align:center}.thumb:hover img{transform:translateY(-3px)}.thumb[aria-current="page"] img{border-color:#bc753a;box-shadow:0 0 0 2px #e2bc6d,0 3px 10px #60412b55}.transcript{max-width:850px;margin:14px auto 0;padding:25px 30px;background:#fff;border:1px solid #eadac3;border-radius:18px;box-shadow:0 6px 18px #684b2810}.transcript h3{margin-top:0;color:#603c2a}.transcript p{line-height:1.65;font-size:16px}.transcript .transcript-note{color:#74685e;font-style:italic;font-size:13px}.footer{padding:18px clamp(15px,4vw,65px) 28px;display:flex;justify-content:space-between;gap:12px;font-size:12px;color:#786349;background:#f6efdf}.info-dialog{border:1px solid #c9b58e;background:#fffaf0;max-width:min(520px,calc(100% - 32px));border-radius:22px;padding:34px 37px;box-shadow:0 20px 80px #2a251d88;color:#3c3027}.info-dialog::backdrop{background:#231b17a6;backdrop-filter:blur(4px)}.info-dialog h2{font-size:31px;color:#63382c;margin:2px 0 15px}.info-dialog p,.info-dialog li{line-height:1.55}.info-dialog li{margin:9px 0}.info-dialog .dialog-note{font-size:13px;color:#706458}.dialog-close{position:absolute;right:18px;top:10px;border:0;background:transparent;font-size:28px;color:#624938}.dialog-leaf{font-size:35px;color:#879747}.dialog-action{background:#5d6340;color:#fff;border:0;padding:12px 24px;border-radius:24px;margin-top:5px}.dialog-action:hover{background:#475035}
:fullscreen.book-scene{height:100vh;min-height:100vh;padding-top:13px}.book-scene:fullscreen .turner{min-height:calc(100vh - 155px)}.book-scene:fullscreen .page-mat{max-height:calc(100vh - 180px);min-height:auto}.book-scene:fullscreen .page-paper,.book-scene:fullscreen .page-paper img{max-height:calc(100vh - 190px)}
@media(max-width:1050px){.site-header{gap:12px}.book-subtitle{display:none}.nav-btn{padding:9px 10px}.turner{min-height:490px}.page-mat{min-height:465px;max-height:490px}.page-paper,.page-paper img{max-height:455px}}
@media(max-width:690px){.site-header{flex-wrap:wrap;gap:5px 12px;min-height:70px;padding:8px 15px}.site-brand{font-size:18px}.header-rule{height:22px}.book-heading strong{font-size:17px}.top-nav{width:100%;justify-content:space-between}.nav-btn{font-size:12px;padding:8px 11px}.book-scene{padding:14px 8px 18px;min-height:600px}.viewer-topline{padding:0 8px}.series-pill{font-size:11px;padding:8px 10px}.viewer-actions{padding:3px}.icon-button{min-width:30px;min-height:31px;font-size:21px}.turner{grid-template-columns:42px minmax(0,1fr) 42px;gap:2px;min-height:445px}.page-mat{max-height:410px;min-height:380px}.page-paper{max-height:380px;border-width:4px;outline-width:1px}.page-paper img{max-height:370px}.page-arrow{height:39px;width:39px;font-size:42px;line-height:30px}.reader-help{font-size:11px}.page-indicator{font-size:12px;padding:9px 14px}.rail-top{align-items:flex-start;flex-direction:column}.thumbnail-list{gap:7px}.thumb img{height:65px}.thumb{max-width:95px;min-width:70px}.thumb span{font-size:10px}.footer{flex-direction:column;text-align:center}.tree{opacity:.42}.info-dialog{padding:24px 25px}}
@media(max-width:420px){.book-heading strong{font-size:15px}.turner{grid-template-columns:31px minmax(0,1fr) 31px}.page-arrow{width:30px;height:35px;font-size:34px}.page-mat{min-height:330px;max-height:350px}.page-paper{max-height:330px}.page-paper img{max-height:320px}.turner{min-height:360px}.book-scene{min-height:520px}.series-pill{font-size:10px}.rail-right{width:100%}.small-button{flex:1;text-align:center}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Zoom: the page frame becomes a pannable viewport while the illustration grows inside it. */
.page-paper.is-zoomed{display:block;overflow:auto;cursor:grab;touch-action:pan-x pan-y;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b79058 #fff5de;max-height:none;max-width:none}
.page-paper.is-zoomed.is-dragging{cursor:grabbing}
.page-paper.is-zoomed img{max-width:none;max-height:none}
.page-paper:not(.is-zoomed) img{cursor:zoom-in}
.icon-button:disabled{opacity:.35;cursor:default}
.icon-button:disabled:hover{background:transparent}

/* Read aloud */
.read-aloud-button{display:inline-flex;align-items:center;gap:6px;border:1px solid #d9b58c;background:#fffaf0;color:#563d2d;min-height:35px;padding:0 14px;border-radius:13px;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer}
.read-aloud-button:hover{background:#f2e7d3}
.read-aloud-button[aria-pressed="true"]{background:var(--forest);border-color:var(--forest);color:#fffaf0}
.read-aloud-button .ra-icon{font-size:16px;line-height:1}
.action-divider{width:1px;height:22px;background:#d9c4a3;margin:0 3px}
.narration{max-width:780px;margin:4px auto 12px;padding:12px 16px 10px;background:#fffaeef2;border:1px solid #d8bfa0;border-radius:18px;box-shadow:0 4px 14px #533d2524;text-align:left}
.narration-text{margin:0;font-size:17px;line-height:1.6;color:#4a362b;max-height:6.6em;overflow-y:auto}
.narration-text .sentence.is-active{background:#f4e6c4;border-radius:4px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.narration-text .word.is-active{background:var(--forest);color:#fffaf0;border-radius:4px}
.narration-controls{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
.narration-button{padding:6px 12px;border-radius:10px;border:1px solid #cdb995;background:#fff8ea;color:#67472f;font-family:inherit;font-size:13px;cursor:pointer}
.narration-button:hover{background:#f6eacb}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media(max-width:690px){.read-aloud-button{padding:0 9px;font-size:12px;min-height:31px}.narration-text{font-size:15px}.narration{margin:2px 6px 10px}}
@media(max-width:420px){.read-aloud-button .ra-label{display:none}}
.narration-notice{max-width:780px;margin:4px auto 8px;padding:8px 14px;background:#fff4d6;border:1px solid #e0b96a;border-radius:12px;color:#5a3b1f;font-size:14px;text-align:center}
/* Full-screen fallback (iPhone Safari has no Fullscreen API for pages): fill the window. */
.book-scene.is-expanded{position:fixed;inset:0;z-index:1000;height:100vh;height:100dvh;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:max(10px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
.book-scene.is-expanded .turner{min-height:0}
.book-scene.is-expanded .page-mat{min-height:0;max-height:none}
.book-scene.is-expanded .page-paper,.book-scene.is-expanded .page-paper img{max-height:calc(100dvh - 150px)}
.book-scene.is-expanded .reader-help{display:none}
html.reader-expanded,html.reader-expanded body{overflow:hidden}
.book-scene.is-expanded{display:flex;flex-direction:column}
.book-scene.is-expanded .turner{flex:1 1 auto;align-content:center;width:100%}

/* Family Time game, placed below the illustrated reader without changing its page-turning code. */
.family-game-section{max-width:1060px;margin:38px auto 20px;padding:clamp(18px,3vw,36px);background:#fffaf0;border:1px solid #e5d1b5;border-radius:25px;box-shadow:0 10px 34px #543f2612;color:#4c3b2f}
.family-game-heading{max-width:800px}
.family-game-eyebrow{text-transform:uppercase;letter-spacing:.11em;font:700 12px Arial,sans-serif;color:#98513c;margin:0 0 11px}
.family-game-heading h2{font:700 clamp(26px,4vw,40px) Georgia,serif;color:#3c5242;line-height:1.1;margin:0 0 15px}
.family-game-heading p{font:17px/1.65 Georgia,serif;color:#584a3c}
.family-game-button{display:inline-block;padding:13px 22px;border-radius:999px;border:2px solid #315e4c;background:#315e4c;color:#fffaf0;font:bold 16px Georgia,serif;text-decoration:none;min-height:48px;box-sizing:border-box}
.family-game-button:hover{background:#244639;border-color:#244639}
.family-game-button:focus-visible,.family-game-inline summary:focus-visible{outline:3px solid #236f90;outline-offset:3px}
.family-game-inline{margin-top:25px;border-top:1px solid #e4d2b9;padding-top:16px}
.family-game-inline summary{cursor:pointer;color:#315e4c;font:700 17px Georgia,serif;list-style:revert}
.family-game-inline iframe{border:1px solid #dbc5a5;border-radius:16px;width:100%;height:855px;margin-top:16px;background:#f6efe1;display:block}
@media(max-width:700px){.family-game-section{margin:24px 12px;padding:18px}.family-game-inline iframe{height:1140px}}
/* Series links: anchors styled like the header buttons, and footer links. */
a.nav-btn{text-decoration:none;display:inline-flex;align-items:center}
.footer-links{display:flex;gap:16px;justify-content:center}.footer-links a{color:var(--wine);font-weight:700;text-decoration:none}.footer-links a:hover{text-decoration:underline}
@media(max-width:690px){.top-nav a.nav-next{display:none}}