/* The approved first envelope and reading-page compositions. */
.hero{height:calc(100svh - 140px);min-height:600px;display:block;padding:0}
.letter-brand{top:10%;font-size:32px;letter-spacing:.15em}
.letter-brand span{margin-top:12px}
.hero::after{inset:27% 4px 8%;border-radius:19px;background:radial-gradient(#a7894d0c .7px,transparent .8px),linear-gradient(130deg,#fff8e6,#ecdfbf);background-size:6px 6px,100% 100%;border:1px solid #fff9e6;box-shadow:0 14px 32px #070d1866}
.hero-copy{position:absolute;top:30%;left:0;right:0;margin:0}
.hero-copy .kicker{display:none}
.hero-copy h1{font-size:23px;letter-spacing:.12em;margin:0;color:#2e493b}
.hero-copy h1::before,.hero-copy h1::after{content:'—';font-size:18px;color:#a2a991;margin:0 12px}
.envelope{position:absolute;left:50%;top:40%;transform:translateX(-50%);width:min(70vw,278px);height:180px;margin:0}
.envelope.opening{transform:translate(-50%,-24px) scale(.94)}
.seal{background:#214b3c;border-color:#c9bd82;color:#dce6ba;box-shadow:0 2px 8px #193c3d55}
.seal svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.hero>.primary{position:absolute;left:50%;bottom:13%;transform:translateX(-50%);width:76%;min-height:47px;padding:12px 10px;font-size:15px;white-space:nowrap}
.hero>.primary:active{transform:translateX(-50%) scale(.98)}
.hero>.quiet{display:none}
#readingPage{padding:17px 16px 30px}
.read-head{min-height:40px;gap:8px;margin:0 0 12px}
.read-head .read-tag,.read-head .status{display:none}
.read-head .lang-row{margin:0;gap:7px}
.read-head .voice{padding:8px 9px}
.read-head .switch button{padding:7px 11px}
.reading-letter{display:flex;flex-direction:column;background:#f6edd6;background-image:radial-gradient(#8b72400d .7px,transparent .8px);background-size:6px 6px;color:#2d3b30;border:1px solid #fff7df;border-radius:21px;padding:22px 16px 18px;box-shadow:0 14px 35px #0004;overflow:hidden}
.reading-letter .case-title{order:1;color:#2c4035;text-shadow:none;text-align:center;font-size:25px;line-height:1.4;margin:0 0 7px;letter-spacing:.015em}
.reading-letter .case-sub{order:2;text-align:center;color:#6d765e;font-size:11px;margin-bottom:16px}
.reading-letter .illustration{order:3;border:0;box-shadow:none;height:220px;border-radius:0;background:#f6edd6;margin:0 -16px}
.reading-letter .image-caption{order:4;text-shadow:none;color:#7a806d;font-size:9px;text-align:right;margin:3px 0 10px}
.reading-letter .story-paper{order:5;background:none;border:0;box-shadow:none;border-radius:0;padding:2px 7px 2px 0;max-height:330px;scrollbar-gutter:stable;scrollbar-color:#a99971 #e9dfc5}
.reading-letter .story-paper::before{display:none}
.reading-letter .story-paper p{font-size:16px;line-height:1.95}
.reading-letter .card-actions{order:6;margin-top:20px}
.reading-letter .action-btn{background:#2e5944;border-color:#577557;color:#fff6df;box-shadow:0 4px 9px #2c493524}
.reading-letter .action-btn.secondary{background:#fff9e7;color:#365840;border-color:#b9c2a1}
.reading-letter .action-btn.saved{background:#d8e3c3;color:#35523a}
.reading-letter .after-note{order:7;color:#79816e;text-shadow:none;font-size:11px;text-align:center;line-height:1.7;margin-bottom:0}
.theme-choice[data-theme='night'] .theme-swatch{background-position:center 30%}
body[data-theme='warm'] .hero::after{display:none}
body[data-theme='warm'] .letter-brand{top:9%;color:#315c43;text-shadow:0 1px 10px #fffbe6;font-size:30px}
body[data-theme='warm'] .hero-copy{top:32%;z-index:3}
body[data-theme='warm'] .hero-copy h1{font-size:20px;color:#415f43;text-shadow:0 1px 5px #fff8e4}
body[data-theme='warm'] .hero-copy h1::before,body[data-theme='warm'] .hero-copy h1::after{content:'✦';font-size:12px;color:#79976c;margin:0 10px}
body[data-theme='warm'] .envelope{top:39%;height:178px;filter:drop-shadow(0 10px 9px #52724833)}
body[data-theme='warm'] .hero>.primary{bottom:22%;width:64%;background:#6e925d;border-color:#98ae7a;box-shadow:0 5px 12px #4e69312b}
body[data-theme='warm'] .reading-letter{background-color:#fff8e9;border-color:#fffef1;border-radius:21px;padding-top:0}
body[data-theme='warm'] .reading-letter .illustration{order:0;height:240px;margin-top:0;border-radius:20px 20px 0 0}
body[data-theme='warm'] .reading-letter .case-title{margin-top:20px;font-size:24px;color:#36543c}
body[data-theme='warm'] .reading-letter .case-sub{margin-bottom:12px}
body[data-theme='warm'] .reading-letter .image-caption{display:none}
body[data-theme='warm'] .reading-letter .story-paper{background:none;scrollbar-color:#93a877 #eee7cc}
body[data-theme='warm'] .reading-letter .action-btn{background:#75975f;border-color:#8aa974;color:#fffaf0;border-radius:23px}
body[data-theme='warm'] .reading-letter .action-btn.secondary{background:#fff9e9;color:#6e8053;border-color:#bac8a0}
body[data-theme='warm'] .reading-letter .after-note{color:#7d896c;text-shadow:none}
@media(max-width:350px){.read-head .switch button{padding:7px 8px}.read-head .voice{font-size:11px}.hero-copy h1{font-size:21px}.reading-letter .case-title{font-size:23px}}
@media(prefers-reduced-motion:reduce){.hero *{transition:none!important}}

/* Closed cream envelope and bounded one-second opening transition */
.envelope{height:174px;perspective:900px;transform-style:preserve-3d;filter:drop-shadow(0 16px 18px #070d18a0)}
.env-back,.env-body,.env-flap{position:absolute;inset:0;border-radius:10px;overflow:hidden}
.env-back{background:linear-gradient(145deg,#f8edcf,#eadbb7);box-shadow:inset 0 0 0 1px #fff8df}
.env-body{z-index:1;background:linear-gradient(155deg,#fff4d8,#e8d8b0);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.env-body:before{content:"";position:absolute;inset:0;background:linear-gradient(34deg,transparent 49.6%,#c7b78e 50%,transparent 50.5%),linear-gradient(-34deg,transparent 49.6%,#c7b78e 50%,transparent 50.5%);opacity:.78}
.env-flap{z-index:2;inset:0 0 auto;height:58%;transform-origin:top center;clip-path:polygon(0 0,100% 0,50% 100%);background:linear-gradient(180deg,#fff1d0,#e5d4aa);border:1px solid #c8b88e;backface-visibility:visible;transition:transform .45s ease;filter:drop-shadow(0 2px 1px #85734b2b)}
.envelope.opening{transform:translateX(-50%);opacity:1}
.envelope.opening .env-flap{transform:rotateX(178deg);z-index:0}
.seal{z-index:4;top:56%;background:#214b3c;border:2px solid #d8d3a8;color:#dce6ba}
.seal svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.app{isolation:isolate}
.paper-transition{position:absolute;inset:0;z-index:25;display:none;align-items:center;justify-content:center;background:#07111bd9;pointer-events:none;transform:none}
.paper-transition.run{display:flex;animation:transitionVeil 1s ease both}
.transition-letter{width:min(74%,340px);height:0;border-radius:8px;background:#f4d87b;box-shadow:0 15px 35px #03080ba8,inset 0 0 0 1px #fff2b0;transform-origin:center;animation:none}
.paper-transition.run .transition-letter{animation:letterUnfold 1s cubic-bezier(.22,.7,.2,1) both}
@keyframes letterUnfold{0%{height:2px;transform:scaleY(.05) translateY(0);border-radius:50%}32%{height:110px;transform:scaleY(.86) translateY(-8px);border-radius:7px}72%{height:min(58vh,510px);transform:scaleY(1) translateY(0);border-radius:7px}100%{height:min(82vh,680px);transform:scaleY(1);border-radius:5px}}
@keyframes transitionVeil{0%{opacity:0}12%{opacity:1}88%{opacity:1}100%{opacity:0}}
.next-letter{display:block;width:100%;margin:14px 0 2px;border:1px solid #8b9b72;border-radius:22px;padding:12px 16px;background:#e9dfc5;color:#35523a;font-size:15px;font-weight:700}
.next-letter[hidden]{display:none}
.reading-letter .next-letter{order:8}
@media(prefers-reduced-motion:reduce){.hero *{transition-duration:.12s!important}.paper-transition.run{animation-duration:1s!important}.paper-transition.run .transition-letter{height:65vh;animation:quietLetterReveal 1s ease both!important}@keyframes quietLetterReveal{from{opacity:0}to{opacity:1}}}

/* Forest museum: selected warm 3, Mushroom House */
body[data-theme="warm"] #museumPage .museum-title{color:#526945;text-shadow:0 2px 0 #fff6de;letter-spacing:.16em}
body[data-theme="warm"] #museumPage .favorites-open{border:2px solid #9a7148;border-radius:18px 18px 9px 9px;background:linear-gradient(180deg,#f8edcf,#e9d8b0);box-shadow:inset 0 0 0 3px #fff6df,0 7px 14px #40533128;color:#495f3c}
body[data-theme="warm"] #museumPage .favorites-star{background:#dce6c8;border-radius:50%;color:#697e4c}
body[data-theme="warm"] #museumPage .favorites-label b{color:#405a39;font-size:16px}
body[data-theme="warm"] #museumPage .favorites-label small,body[data-theme="warm"] #museumPage .category-count-note{color:#657454}
body[data-theme="warm"] #museumPage .favorites-chevron{color:#80643b}
body[data-theme="warm"] #museumPage .museum-category{border:2px solid #98764e;border-radius:19px 19px 12px 12px;background:linear-gradient(180deg,#f5e8c9,#e9d8b5);box-shadow:inset 0 0 0 3px #fff6df,0 6px 12px #384a3127}
body[data-theme="warm"] #museumPage .museum-category:nth-child(3n+2){border-radius:13px 19px 12px 12px}
body[data-theme="warm"] #museumPage .museum-category.expanded{border-color:#75875d;background:linear-gradient(180deg,#f9efdc,#e7e2c9);box-shadow:inset 0 0 0 3px #fff8e4,0 8px 17px #344c3030}
body[data-theme="warm"] #museumPage .category-tile .cat-icon{width:36px;height:36px;display:grid;place-items:center;border:1px solid #91a075;border-radius:48% 48% 42% 42%;background:#e1e8cf;color:#526744}
body[data-theme="warm"] #museumPage .category-tile .cat-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
body[data-theme="warm"] #museumPage .category-tile b{color:#45583b;font-size:13px}
body[data-theme="warm"] #museumPage .category-tile small{color:#7d8062;font-size:10px}
body[data-theme="warm"] #museumPage .museum-category.expanded .category-tile{border-bottom:1px dashed #9a8b67;background:#efe5c9}
body[data-theme="warm"] #museumPage .category-entry{border:1px solid #b5b38e;border-radius:10px 10px 5px 5px;background:#fff8e6;color:#485c3d;font-size:15px;padding:10px 9px;min-height:44px}
body[data-theme="warm"] #museumPage .category-entry.locked{color:#a7a48d;background:#f0ead7}
body[data-theme="warm"] #museumPage .category-entry .entry-state{color:#87916d;font-size:11px}
body[data-theme="warm"] #favoritesDrawer{background-color:#e9e5d1;background-image:linear-gradient(#e9e1cbef,#e9e1cbef),url("assets/warm-forest.webp")}
body[data-theme="warm"] #favoritesDrawer .favorites-drawer-head h2,body[data-theme="warm"] #favoritesDrawer .favorite-entry b{color:#465c3d}
body[data-theme="warm"] #favoritesDrawer .favorite-entry{background:#fff4db;border:1px solid #aa9067;border-radius:16px 16px 9px 9px}
body[data-theme="warm"] #favoritesDrawer .favorite-entry small,body[data-theme="warm"] #favoritesDrawer .favorites-note{color:#788064}
body[data-theme="warm"] #favoritesDrawer .favorite-entry .favorite-icon{background:#dce6c8;color:#586d45}
body[data-theme="warm"] #favoritesDrawer .favorite-entry .favorite-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
body[data-theme="warm"] #favoritesDrawer .favorites-empty{background:#fff4db;color:#657454;border-color:#a9a080}
body[data-theme="warm"] #readingPage::before{background-image:linear-gradient(180deg,#f3ecd980,#efe7d5b3),url("assets/warm-forest.webp")}
.env-body:after{content:"";position:absolute;z-index:1;left:0;right:0;bottom:0;height:58%;clip-path:polygon(0 0,50% 100%,100% 0);background:linear-gradient(180deg,#f2e4c1,#e5d6b2);filter:drop-shadow(0 -1px 0 #c5b58c)}