@font-face{font-family:Story;src:url('assets/story-serif.ttf') format('truetype');font-display:swap}
:root{--ink:#173f35;--paper:#fbfaf4;--line:#b9c8c0;--sun:#f7d476;--coral:#d96752}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#102f28;color:var(--ink);font:16px/1.55 Arial,Helvetica,sans-serif}button{font:inherit;cursor:pointer}a{color:inherit}:focus-visible{outline:3px solid #f3a452;outline-offset:3px}.skip{position:fixed;top:-80px;left:14px;z-index:30;background:#fff;padding:12px}.skip:focus{top:14px}
.reader-header{height:72px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:9px clamp(16px,4vw,52px);background:#fff;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:9px;text-decoration:none;font:1rem Story,Georgia,serif;letter-spacing:.11em}.brand img{width:44px;height:44px}.page-status{width:min(32vw,330px);text-align:center;font-size:.75rem;font-weight:700}.page-progress{height:5px;background:#dce5df;margin-top:7px}.page-progress i{display:block;width:5%;height:100%;background:var(--coral);transition:width .5s}.exit{justify-self:end;text-underline-offset:4px;font-size:.85rem}
.reader{min-height:calc(100vh - 72px);padding:22px clamp(18px,4vw,58px) 24px;background:#eef1e9}.book-switcher{width:min(1420px,100%);margin:0 auto 14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.book-switcher span{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-right:4px}.book-switcher a{font-size:.76rem;text-decoration:none;border:1px solid #9dafaa;background:#fff;padding:7px 10px}.book-switcher a[aria-current=true]{background:var(--ink);color:#fff}
.page-stage{width:min(1420px,100%);min-height:min(68vh,760px);margin:auto;display:grid;grid-template-columns:minmax(330px,.62fr) minmax(0,1.38fr);box-shadow:0 28px 65px #102f2830;background:#fff;overflow:hidden}.art-frame{position:relative;overflow:hidden;background:#183f35;min-height:520px}.art-frame img{width:100%;height:100%;object-fit:cover;will-change:transform;transform:scale(1.04)}.art-frame.motion-in img{animation:panIn 6.5s ease-out both}.art-frame.motion-left img{animation:panLeft 6.5s ease-in-out both}.art-frame.motion-right img{animation:panRight 6.5s ease-in-out both}.art-frame.motion-out img{animation:panOut 6.5s ease-in-out both}.story-glow{position:absolute;width:42%;aspect-ratio:1;border-radius:50%;background:#ffd77538;filter:blur(35px);right:-12%;top:-14%;animation:drift 6s ease-in-out infinite alternate;pointer-events:none}
.page-copy{position:relative;padding:clamp(34px,4.5vw,70px);display:flex;flex-direction:column;justify-content:center;background:#fffdf7;animation:copyIn .55s ease both}.chapter{font-size:.69rem;font-weight:700;letter-spacing:.17em;color:#a34b3b;margin:0 0 25px}.page-copy h1{font:400 clamp(2.4rem,3.8vw,4.6rem)/.94 Story,Georgia,serif;letter-spacing:-.035em;margin:0 0 25px}.page-copy>p:nth-of-type(2){font:1.08rem/1.68 Story,Georgia,serif;margin:0;color:#315047}.page-number{position:absolute;right:25px;bottom:18px;font:1.2rem Story,Georgia,serif;color:#819088}
.page-stage[data-kind=cover]{grid-template-columns:1fr}.page-stage[data-kind=cover] .page-copy{display:none}.page-stage[data-kind=cover] .art-frame{min-height:min(72vh,780px)}.cover-copy{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10%;color:#fff;background:linear-gradient(90deg,#0b2a23b8 0,#0b2a2360 48%,transparent 80%);text-shadow:0 2px 18px #0008}.cover-copy p{font-size:.72rem;font-weight:700;letter-spacing:.18em}.cover-copy h1{font:400 clamp(3.6rem,7vw,7.5rem)/.84 Story,Georgia,serif;max-width:850px;margin:14px 0 20px}.cover-copy>span{font-size:.85rem;border:1px solid #ffffff9e;padding:8px 12px}.cover-copy[hidden]{display:none}
.page-stage[data-kind^=special]{grid-template-columns:1fr;background:#fffdf7}.page-stage[data-kind^=special] .art-frame{display:none}.page-stage[data-kind^=special] .page-copy{min-height:min(68vh,760px);align-items:center;text-align:center;background:radial-gradient(circle at center,#fff 0,#fffdf7 48%,#f2ead2 100%)}.page-stage[data-kind^=special] .page-copy h1{font-size:clamp(4rem,8vw,8rem);border-bottom:1px solid var(--ink);padding:0 8vw 22px}.page-stage[data-kind^=special] .page-copy>p:nth-of-type(2){font-size:1rem}.page-stage[data-kind="special gift"] .page-copy h1{font-size:clamp(3.2rem,6vw,6.4rem);color:#a34b3b}
.reader-controls{width:min(1420px,100%);margin:18px auto 0;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px}.reader-controls button{min-height:48px;border:1px solid var(--ink);background:#fff;padding:11px 17px;font-weight:700;color:var(--ink)}.reader-controls button:disabled{opacity:.35;cursor:not-allowed}.reader-controls #next{background:var(--ink);color:#fff;min-width:140px}.dots{display:flex;justify-content:center;gap:5px}.dots button{width:27px;height:27px;min-height:0;padding:0;border:0;border-radius:50%;background:transparent;font-size:.68rem}.dots button[aria-current=true]{background:var(--coral);color:#fff}.animation-bar{width:min(1420px,100%);margin:16px auto 0;background:#f7d476;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 18px}.animation-bar div span,.animation-bar div strong{display:block}.animation-bar div span{font-size:.76rem}.animation-bar button{background:#173f35;color:#fff;border:0;padding:12px 17px;font-weight:700}.test-note{width:min(1420px,100%);margin:12px auto 0;text-align:right;font-size:.72rem;color:#60716a}.reader.playing .animation-bar{position:relative}.reader.playing .animation-bar:after{content:'';position:absolute;left:0;bottom:0;height:4px;background:#d96752;animation:autoTimer 6.5s linear infinite}
@keyframes panIn{from{transform:scale(1.14) translate(-2%,-1%)}to{transform:scale(1.04)}}@keyframes panLeft{from{transform:scale(1.05) translate(1%,0)}to{transform:scale(1.15) translate(-2%,1%)}}@keyframes panRight{from{transform:scale(1.14) translate(-2%,0)}to{transform:scale(1.05) translate(1%,-1%)}}@keyframes panOut{from{transform:scale(1.04)}to{transform:scale(1.15) translate(1%,-1%)}}@keyframes copyIn{from{opacity:0;transform:translateY(10px)}}@keyframes drift{to{transform:translate(-20%,18%)}}@keyframes autoTimer{from{width:0}to{width:100%}}
@media(max-width:900px){.reader{padding:16px}.page-stage{grid-template-columns:1fr;min-height:0}.art-frame{min-height:0;aspect-ratio:3/2;order:1}.page-copy{min-height:360px;order:2}.animation-bar{align-items:flex-start}.dots{gap:2px}.dots button{width:23px;height:23px}.page-stage[data-kind=cover] .art-frame{min-height:0;aspect-ratio:4/3}.page-stage[data-kind^=special] .page-copy{min-height:560px}}
@media(max-width:600px){.reader-header{height:64px;grid-template-columns:1fr auto}.brand{font-size:.78rem}.brand img{width:40px;height:40px}.page-status{position:fixed;z-index:10;top:64px;left:0;right:0;width:100%;background:#fff;padding:6px 16px;border-bottom:1px solid var(--line)}.page-status>span{position:absolute;left:-9999px}.exit{font-size:.75rem}.reader{padding:44px 10px 20px}.book-switcher span{width:100%}.book-switcher a{font-size:.68rem}.art-frame{aspect-ratio:4/3}.page-copy{min-height:350px;padding:35px 25px 55px}.page-copy h1{font-size:3rem}.page-copy>p:nth-of-type(2){font-size:1rem}.cover-copy h1{font-size:3.4rem}.reader-controls{gap:7px}.reader-controls button{padding:9px 11px}.reader-controls #next{min-width:110px}.dots{overflow-x:auto;justify-content:flex-start}.animation-bar{align-items:stretch;flex-direction:column}.animation-bar button{width:100%}.test-note{text-align:left}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.story-glow{display:none}}

:root{--ink:#142521;--paper:#f7f8f4;--line:#c8d1cc;--sun:#dff467;--coral:#536cf4}.brand img{object-fit:contain}.reader{background:#e7ece7}.animation-bar{background:var(--sun)}
.reader-controls button,.animation-bar button,.book-switcher a{border-radius:999px;white-space:nowrap}

/* Full-screen book reader */
.reader{min-height:calc(100vh - 72px);padding:18px clamp(18px,4vw,58px) 28px;background:radial-gradient(circle at 50% 18%,#f5f3eb 0,#dfe6e0 55%,#cbd7d1 100%)}
.book-switcher{width:max-content;max-width:100%;margin:0 auto 12px;padding:5px;justify-content:center;flex-wrap:nowrap;overflow-x:auto;background:#ffffffc9;border:1px solid #b8c5be;border-radius:999px;box-shadow:0 8px 24px #102f2810}.book-switcher span{padding:0 10px}.book-switcher a{border:0;padding:8px 14px;background:transparent}.book-switcher a:hover{background:#edf1ed}.book-switcher a[aria-current=true]{background:var(--ink);color:#fff}.page-stage{position:relative;grid-template-columns:1fr 1fr;height:clamp(560px,calc(100vh - 175px),850px);min-height:0;border:9px solid #eee9dc;border-radius:8px;overflow:hidden;perspective:2200px;box-shadow:0 38px 75px #102f2847,0 8px 0 #aab7b0;background:#fffdf7}.page-stage:not([data-kind=cover]):not([data-kind^=special]):after{content:"";position:absolute;z-index:6;top:0;bottom:0;left:50%;width:34px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,#152e272c 42%,#fff9ec7a 50%,#152e2727 58%,transparent);pointer-events:none}.page-copy{padding:clamp(32px,4vw,62px);padding-left:clamp(86px,7vw,112px);box-shadow:inset -28px 0 42px -38px #152e276b}.page-stage[data-kind^=special] .page-copy{padding-left:clamp(32px,4vw,62px)}.art-frame{box-shadow:inset 28px 0 42px -38px #152e276b}.page-stage[data-kind=cover]{width:min(470px,76vw,calc((100vh - 175px)*.8));height:auto;aspect-ratio:4/5;border-width:12px;box-shadow:24px 34px 70px #102f2859,7px 7px 0 #a5b1aa}.page-stage[data-kind=cover] .art-frame{min-height:0;height:100%}.page-stage[data-kind=cover] .cover-copy{display:flex;background:linear-gradient(180deg,#081f1905 25%,#081f19d9 100%);justify-content:flex-end;padding:12% 9%}.page-stage[data-kind=cover] .cover-copy h1{font-size:clamp(2.6rem,5vw,4.4rem);line-height:.92}.page-stage[data-kind=cover] .cover-copy p{margin:0}
.book-arrow{position:absolute;z-index:12;top:50%;width:58px;height:58px;border:1px solid #ffffff99;border-radius:50%;display:grid;place-items:center;background:#142521e8;color:#fff;font:1.65rem/1 Story,Georgia,serif;box-shadow:0 10px 25px #102f2840;transform:translateY(-50%);transition:transform .18s ease,background .18s ease}.book-arrow:hover{background:#536cf4;transform:translateY(-50%) scale(1.06)}.book-arrow:disabled{opacity:0;pointer-events:none}.book-arrow-previous{left:18px}.book-arrow-next{right:18px}.reader-controls{width:min(1420px,100%);margin:12px auto 0;display:block}.dots{min-height:32px}.turn-sheet{position:absolute;z-index:9;top:0;bottom:0;left:50%;right:0;opacity:0;pointer-events:none;transform-origin:left center;transform-style:preserve-3d;backface-visibility:hidden;background:linear-gradient(90deg,#dfd8ca 0,#fffdf7 7%,#f7f1e4 88%,#d9d1c4 100%);box-shadow:-12px 0 28px #102f2840}.page-stage.turn-forward .turn-sheet{animation:turnForward 1.1s cubic-bezier(.7,.02,.25,1) both}.page-stage.turn-back .turn-sheet{left:0;right:50%;transform-origin:right center;animation:turnBack 1.1s cubic-bezier(.7,.02,.25,1) both}.art-frame img,.art-frame.motion-in img,.art-frame.motion-left img,.art-frame.motion-right img,.art-frame.motion-out img{animation:none!important;transform:none!important}.story-glow{display:none}
@keyframes turnForward{0%{opacity:1;transform:rotateY(0)}45%{opacity:1}100%{opacity:.12;transform:rotateY(-178deg)}}@keyframes turnBack{0%{opacity:1;transform:rotateY(0)}45%{opacity:1}100%{opacity:.12;transform:rotateY(178deg)}}
body[data-audience=adult] .page-copy>p:nth-of-type(2){font-size:.96rem;line-height:1.55}body[data-audience=adult] .page-copy h1{font-size:clamp(2.1rem,3vw,3.5rem)}body[data-audience="9-12"] .page-copy>p:nth-of-type(2){font-size:1rem;line-height:1.58}body[data-audience="9-12"] .page-stage[data-kind=cover] .cover-copy h1{font-size:clamp(2.15rem,3.6vw,3.25rem);line-height:.94}
@media(max-width:900px){.reader{padding:16px}.page-stage,.page-stage[data-kind=cover]{width:100%;height:auto;min-height:0;border-width:6px}.art-frame{aspect-ratio:4/5}.page-stage[data-kind=cover] .art-frame{height:auto;aspect-ratio:4/5}.page-copy{padding:35px 25px 55px}.book-arrow{width:48px;height:48px}.book-arrow-previous{left:10px}.book-arrow-next{right:10px}.turn-sheet{display:none}.book-switcher{justify-content:flex-start}.book-switcher span{position:absolute;left:-9999px}}
.sample-mode .test-note{display:none}.sample-mode .page-stage{margin-top:4px}

/* Keep the closed cover inside the same reader frame as every open spread. */
@media(min-width:901px){
  .page-stage[data-kind=cover]{width:min(1420px,100%);height:clamp(560px,calc(100vh - 175px),850px);aspect-ratio:auto;border-width:9px;box-shadow:0 38px 75px #102f2847,0 8px 0 #aab7b0}
  .page-stage[data-kind=cover] .art-frame{height:100%;background-image:linear-gradient(#0d241fc7,#0d241fc7),var(--page-art);background-position:center;background-size:cover}
  .page-stage[data-kind=cover] .art-frame:before{content:"";position:absolute;inset:-24px;z-index:0;background:inherit;filter:blur(18px);opacity:.82}
  .page-stage[data-kind=cover] .art-frame img{position:absolute;z-index:1;inset:0;height:100%;width:auto;aspect-ratio:4/5;margin:auto;object-fit:cover;box-shadow:0 0 0 1px #fff4,0 26px 65px #081a16aa}
  .page-stage[data-kind=cover] .cover-copy{inset:0 auto 0 50%;width:auto;height:100%;aspect-ratio:4/5;transform:translateX(-50%)}
}

/* Wide cover artwork fills the fixed reader frame edge to edge. */
@media(min-width:901px){
  .page-stage[data-kind=cover] .art-frame{background:none}
  .page-stage[data-kind=cover] .art-frame:before{display:none}
  .page-stage[data-kind=cover] .art-frame img{inset:0;width:100%;height:100%;aspect-ratio:auto;margin:0;object-fit:cover;box-shadow:none}
  body[data-audience=adult] .page-stage[data-kind=cover] .art-frame img{object-position:center top}
  .page-stage[data-kind=cover] .cover-copy{inset:0;width:100%;height:100%;aspect-ratio:auto;transform:none;padding:7% 9%}
}