@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800&display=swap');
:root{--ink:#362b22;--muted:#71614e;--line:#d7c9b2;--paper:#f6f0e3;--green:#4d2d24;--lime:#e7c994;--blue:#ece5d7}
body{background:#251c16;color:var(--ink);position:relative;isolation:isolate}body:before{content:'';position:fixed;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(18,13,9,.57),rgba(23,15,9,.28) 48%,rgba(15,11,8,.82)),url('assets/library-background.png') center/cover no-repeat;pointer-events:none}header{max-width:none;padding:18px max(30px,calc((100vw - 1180px)/2));min-height:90px;background:#211910e8;border-bottom:1px solid #b7915547;color:#f3e9d5}.brand{font-family:'Cormorant Garamond',Georgia,serif;font-size:29px;font-weight:600}.brand-sub{font-size:11px;letter-spacing:1.8px;color:#cab18c}.mark{background:transparent;border:1px solid #b99a62;color:#efd29f;border-radius:5px}.mark span{color:#c29c5f}nav{font-size:14px;gap:30px}nav a.active{border-color:#d1ad73}.profile{color:#e5d6bd;border-color:#ac916259}#count{background:#bda06c26;color:#ddc396}.demo{background:#261e16dc;border-color:#a58b5633;color:#cfb993;font-size:10px;padding:5px 15px}.demo span{color:#b8a994;font-size:11px}main{max-width:1176px;padding:32px 24px 42px;min-height:calc(100vh - 200px)}h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;letter-spacing:-.8px}.library-intro{text-align:center;color:#f5ead6;text-shadow:0 2px 12px #0008}.library-intro .eyebrow{color:#d6bc8a;letter-spacing:3.7px;font-size:11px;margin:0 0 8px}.library-intro h1{font-size:clamp(36px,4.5vw,55px);line-height:1.14}.library-intro p:not(.eyebrow){color:#e0d2bc;font-size:15px;margin:10px 0}.library-role{display:inline-block;font-size:11px;color:#d1baa0;letter-spacing:.6px;border-top:1px solid #ae915359;padding-top:8px;margin-top:3px}.book-shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;max-width:900px;margin:17px auto 0;align-items:start}.book-item{min-width:0;text-align:center}.book-link{display:block;position:relative;aspect-ratio:2/3;color:#f8df9e;text-decoration:none;filter:drop-shadow(14px 19px 14px #0009);transform-origin:50% 90%;transition:transform .35s,filter .35s}.book-link:hover{transform:translateY(-9px) rotate(-1deg);filter:drop-shadow(16px 24px 18px #000b)}.book-link:focus-visible{outline:3px solid #eed3a2;outline-offset:-9px;border-radius:10px}.book-art{display:block;width:100%;height:100%;clip-path:polygon(6% 8%,9% 7%,89% 6.5%,90% 7.5%,94% 7.5%,95% 9%,95% 89%,93% 90%,90% 90%,89% 92%,9% 90%,5% 89%,5% 10%);object-fit:contain}.tone-1 .book-art{filter:hue-rotate(125deg) saturate(.52) brightness(.9)}.tone-2 .book-art{filter:hue-rotate(195deg) saturate(.62) brightness(.9)}.book-lettering{position:absolute;inset:19% 18% 15% 19%;display:flex;align-items:center;flex-direction:column;text-align:center;justify-content:center;text-shadow:0 1px 1px #170e03,0 -1px #f7d58a60}.book-series{font-size:8px;letter-spacing:2px;line-height:1.7;max-width:145px}.book-rule{font-size:18px;color:#d9b774;margin:13px 0 17px}.book-lettering h3{font-size:clamp(27px,3.1vw,39px);line-height:1.08;font-weight:600;letter-spacing:-.3px;overflow-wrap:normal}.book-author{font-size:9px;letter-spacing:2.5px;margin-top:auto;padding-top:12px}.bottom-rule{margin:18px 0 0}.book-open{font-size:10px;letter-spacing:.9px;text-transform:uppercase;margin-top:10px;color:#f4ddb5}.book-caption{margin-top:-8px;font-size:12px;color:#e4d3b9;text-shadow:0 2px 5px #000;padding:0 4px}.shuffle{margin:24px 0 27px}.shuffle .btn{color:#f0ddba;background:#2b201bd4;border:1px solid #c7a5748c;font-weight:400;padding:10px 23px;border-radius:5px;font-size:13px;backdrop-filter:blur(8px)}.shuffle .btn:hover{background:#4a3626}.coach{max-width:920px;margin:auto;background:#211a13e6;border:1px solid #b596634a;border-radius:7px;padding:18px 25px;gap:18px;backdrop-filter:blur(10px)}.coach .avatar{background:#cbb07c;color:#30241b;border:1px solid #dbc8a1;width:47px;height:47px;font:22px 'Cormorant Garamond',Georgia,serif}.coach h3{color:#eddbbb;font-size:24px}.coach p{color:#c3b39c;font-size:13px}.coach .btn.light{background:transparent;border-color:#b1925f80;color:#eddbbb;font-size:13px;border-radius:5px;padding:9px 17px}.btn{background:#4d3426;border-color:#4d3426;border-radius:5px}.btn.secondary{border-color:#c7b591;color:#4d3426}.btn.text{color:#614324}.back{color:#f2dfbd;margin-top:8px}.lesson-grid{gap:0;background:#f6f0e3;border:1px solid #c2ab7c;border-radius:4px;box-shadow:0 18px 55px #0008;overflow:hidden;grid-template-columns:minmax(0,1fr) 275px;animation:page-open .4s ease-out}.lesson{border:0;border-radius:0;background:#faf5e9;padding:45px 50px;min-height:510px;box-shadow:inset -14px 0 18px -15px #6e563b66}.lesson h1{font-size:45px}.lesson .lead{font-family:Georgia,serif;font-size:19px;line-height:1.85;color:#493b2e}.lesson .eyebrow{font-size:10px;color:#85714f}.aside{padding:40px 27px;background:#eee5d2}.aside h3{font-size:28px}.aside .step{font-size:13px;border-color:#c6b797}.aside p{font-size:13px}.aside .eyebrow{font-size:10px}.answer{background:#eee4ce}.question{background:#fcf8ef;border-color:#d9caaa;color:#57422d}.extra h3{font-size:29px}.complete{border-color:#d4c29e}.welcome{border-color:#b99d6b;border-radius:6px;box-shadow:0 20px 60px #0005;background:#faf5e9}.welcome-story{background:linear-gradient(#281b13a8,#281b13d9),url('assets/library-background.png') center/cover}.welcome-story h1{font-family:'Cormorant Garamond',Georgia,serif;font-size:49px}.welcome-story .quote{color:#e6d1ad}.welcome-story p,.welcome-story .eyebrow{color:#daceb8}.role:has(input:checked){background:#eee4ce;border-color:#8f744b}.role input{accent-color:#725539}.form h2{font-size:36px}.chat-heading{color:#f1e1c3}.chat-heading .muted{color:#cfbea1}.chat-heading .avatar{background:#d8bd8a;border-color:#bd9c66}.chat-panel{background:#faf5e9;border-color:#c7b186;border-radius:7px;box-shadow:0 15px 45px #0005}.bubble{background:#eae1cc}.bubble.user{background:#e1e4d5}.suggestions button{background:#faf5e9;color:#57442b;border-color:#d4c4a6}.chat-wrap>.fine{color:#dfcdb0;background:#241b14c9;padding:15px;border-radius:5px}.empty{background:#f8f0df;border:1px solid #a98853;box-shadow:0 20px 45px #0005;border-radius:7px}.empty h2{font-size:34px}.studied-shelf{row-gap:30px}.studied-shelf .book-caption{margin-bottom:15px}footer{color:#c6b59a;border-color:#b3915845;font-size:11px;background:#21191091;max-width:none;justify-content:space-between;padding:16px max(30px,calc((100vw - 1128px)/2))}input,textarea{background:#fffdf8;border-color:#c8b796}.profile:hover{background:#c5a3691c}@keyframes page-open{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}@media(min-width:1500px){main{padding-top:40px}.book-shelf{max-width:980px}}@media(max-width:900px){header{padding:17px 24px}.book-shelf{gap:12px}.book-lettering h3{font-size:30px}.book-series{font-size:7px}.book-rule{margin:8px 0 12px}.book-author{font-size:8px}.book-open{font-size:9px}.lesson-grid{grid-template-columns:1fr}.aside{display:none}.lesson{box-shadow:none}}@media(max-width:900px){header{padding:15px 19px;gap:10px}.brand{font-size:25px}.brand-sub{font-size:10px}.demo span{font-size:10px}.library-intro h1{font-size:37px}.library-intro p:not(.eyebrow){font-size:14px;max-width:300px;margin:12px auto}.library-intro .eyebrow{font-size:10px}.library-role{font-size:10px}.book-shelf{grid-template-columns:1fr;max-width:285px;gap:23px;margin-top:10px}.book-lettering h3{font-size:39px}.book-series{font-size:8px}.book-rule{margin:15px 0 19px}.book-author{font-size:10px}.book-open{font-size:10px}.book-caption{font-size:13px}.coach{padding:20px}.coach h3{font-size:24px}.coach .btn{width:100%}.lesson{padding:29px 25px;min-height:0}.lesson h1{font-size:37px}.lesson .lead{font-size:18px}.welcome-story h1{font-size:38px}.chat-heading h1{font-size:33px}footer{padding:18px 20px}.shuffle{margin-top:28px}}@media(prefers-reduced-motion:reduce){.book-link{transition:none}.book-link:hover{transform:none}.lesson-grid{animation:none}}
/* Keep lettering proportional to the physical cover at every window width. */
.book-link{container-type:inline-size}.book-lettering{inset:22% 18% 20% 19%;justify-content:space-between}.book-series{font-size:2.8cqw;letter-spacing:.6cqw;max-width:80%}.book-lettering h3{font-size:13cqw;line-height:1.09}.book-rule,.bottom-rule{font-size:5cqw;margin:0}.book-author{font-size:3.2cqw;letter-spacing:.8cqw;margin:0;padding:0}.book-open{display:none}.shuffle .btn.secondary{color:#f0ddba;border-color:#c7a5748c}.book-caption{position:relative;margin-top:-7px}

/* Ben's portrait: full image in the book, face-only presentation in chat. */
.book-subtitle{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-size:7cqw;line-height:1.3;margin-top:9px;color:#f4dfb0}.lesson .lesson-subtitle{font-family:'Cormorant Garamond',Georgia,serif;font-size:28px;line-height:1.3;color:#786041;margin:-13px 0 26px}.bio-opening{display:grid;grid-template-columns:minmax(140px,.8fr) minmax(0,1.2fr);gap:27px;align-items:start}.bio-portrait{display:block;width:100%;height:auto;border-radius:3px}.bio-opening .lead{margin:0;font-size:18px;line-height:1.8}.chat-heading .portrait-avatar{position:relative;overflow:hidden;width:72px;height:72px;border:2px solid #c7ab79;background:#bcbcbc}.portrait-avatar img{position:absolute;width:170%;height:auto;max-width:none;left:-41%;top:-12%;display:block}.chat-heading>div:last-child{min-width:0}@media(max-width:900px){.bio-opening{grid-template-columns:1fr;gap:24px}.bio-portrait{width:min(100%,245px);margin:0 auto}.bio-opening .lead{font-size:18px}.chat-heading .portrait-avatar{width:62px;height:62px}.chat-heading h1{font-size:29px}.chat-heading p{font-size:13px}}

/* Give the title the space previously occupied by the author credit. */
.book-title-group{flex:1;display:flex;flex-direction:column;justify-content:center;padding:12px 0}.book-lettering h3{font-size:14cqw}

/* Main menu: keep every destination visible on smaller screens. */
header nav{gap:24px}header nav a{white-space:nowrap}@media(max-width:1050px){header{flex-wrap:wrap}header .profile{margin-left:auto}header nav{order:3;width:100%;justify-content:center;flex-wrap:wrap;gap:8px 24px;margin:4px auto 0}}@media(max-width:900px){header nav{gap:4px 19px;font-size:13px}header nav a{padding:8px 0}}

.coach .portrait-avatar{position:relative;overflow:hidden;background:#bcbcbc;width:54px;height:54px;border:1px solid #dbc8a1}

/* A distinct reading room for real-life stories. */
body[data-view="stories"]:before{background:linear-gradient(180deg,#20170dcc,#20170d66 50%,#20170dd9),url('assets/stories-background.png') center/cover no-repeat}.stories-intro{max-width:980px;margin:auto}.stories-intro h1{text-wrap:balance}.story-shelf{margin-top:10px;max-width:830px}.story-book .book-art{filter:sepia(.75) saturate(.65) brightness(1.23)}.story-book .book-lettering{color:#fff0c7}.story-book h2{font-size:14cqw;line-height:1.12}.story-placeholder .book-link:hover{transform:none;filter:drop-shadow(14px 19px 14px #0009)}.story-placeholder .book-caption{margin-top:-8px}.shuffle .stories-note{max-width:560px;margin:14px auto 0;color:#e5d4ba;background:#251a10bd;padding:10px 15px;border-radius:5px;font-size:13px}.shuffle .btn:disabled{cursor:default;opacity:.65}@media(max-width:900px){.story-shelf{max-width:285px}}

.story-book .story-title{font-size:11cqw;line-height:1.18}.story-child{display:block;font-size:8cqw;line-height:1.3;margin-bottom:14px}.story-challenge{display:block}
.story-shelf{max-width:940px;gap:25px;margin-top:26px}
.story-book{filter:drop-shadow(5px 12px 9px #332f2533);aspect-ratio:2/3}
.story-book .book-art{clip-path:none;object-fit:fill;filter:none}
.story-book.booklet-1 .book-art{filter:hue-rotate(175deg)}
.story-book.booklet-2 .book-art{filter:hue-rotate(260deg)}
.story-book .book-lettering{inset:18% 14% 19% 23%;color:#163842;text-shadow:none;justify-content:center}
.story-book .book-series{font:800 3.8cqw 'Nunito',Arial,sans-serif;letter-spacing:.5cqw;max-width:100%}
.story-book .book-rule{display:none}
.story-book .book-title-group{flex:0;padding:24px 0}
.story-book .story-title{font-family:'Nunito',Arial,sans-serif;font-weight:800;letter-spacing:-.3px;font-size:10cqw;line-height:1.2}
.story-book .story-child{font-size:6cqw;font-weight:700;line-height:1.4;margin-bottom:18px;letter-spacing:0}
.story-placeholder .book-link:hover{filter:drop-shadow(5px 12px 9px #332f2533)}
.story-placeholder .book-caption{margin-top:5px;font-size:14px}
@media(max-width:900px){.story-shelf{max-width:300px;gap:28px}.story-book .book-title-group{padding:20px 0}}

/* Fictional portraits beneath a warm, soft photographic haze. */
body[data-view="stories"] .stories-intro p.story-collection-count{color:#493d31;font-size:15px;text-shadow:none}
.story-book:hover{transform:translateY(-5px);filter:drop-shadow(5px 16px 12px #332f2544)}
.story-reader{max-width:830px;margin:15px auto 30px;box-shadow:0 18px 55px #0006;border:1px solid #c2ab7c;border-radius:5px}
.story-back{display:block;max-width:830px;margin:0 auto;text-decoration:none}
.story-reader h1{font-size:clamp(30px,4vw,44px);line-height:1.12}
.story-reader .eyebrow{font-size:13px;line-height:1.6;letter-spacing:1px}
.story-reader .lesson-tools{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:24px}
.story-body{font:18px/1.85 Georgia,serif;color:#493b2e;margin-top:28px;overflow-wrap:anywhere}
.story-body p{margin:0 0 1.2em}
.story-sources{border-top:1px solid #d4c29e;padding-top:18px;margin-top:32px;font-size:14px;color:#66533d;overflow-wrap:anywhere}
.story-sources summary{cursor:pointer}.story-sources li{margin:10px 0}
.story-video{aspect-ratio:16/9;margin-top:25px;background:#201910}.story-video iframe{width:100%;height:100%;border:0}
.translation-note{font-size:14px;color:#66533d}
@media(max-width:900px){.story-reader{padding:26px 22px}.story-body{font-size:17px}.story-reader .complete{display:flex;flex-direction:column;gap:20px;align-items:stretch}.story-reader .eyebrow{font-size:12px}}
.read-stacks{display:block;max-width:566px;max-height:min(530px,60vh);max-height:min(530px,60dvh);overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;margin:35px auto;padding:10px 24px 28px;scrollbar-color:#ad9163 #29272055}.read-stacks:focus-visible{outline:2px solid #f5d390;outline-offset:4px;border-radius:8px}
.read-stack{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:flex-end;max-width:510px;width:100%;margin-inline:auto;filter:drop-shadow(4px 14px 10px #0008)}
.read-volume{flex-shrink:0;width:var(--width);margin:0 0 -1px;position:relative;left:var(--shift)}
.read-spine{position:relative;display:flex;align-items:center;justify-content:center;height:42px;min-height:42px;padding:8px 14%;min-width:0;color:#f7dfaa;text-align:center;text-decoration:none;isolation:isolate;transition:transform .2s}
.read-spine:before{content:'';position:absolute;inset:0;z-index:-1;background:url('assets/read-book-spine.png') center 51%/104% 248% no-repeat}
.read-spine span{font-family:'Cormorant Garamond',Georgia,serif;font-size:17px;font-weight:600;line-height:1.15;text-shadow:0 1px 2px #170c08;display:block;min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spine-tone-1:before{filter:hue-rotate(130deg) saturate(.55)}
.spine-tone-2:before{filter:hue-rotate(210deg) saturate(.6)}
.spine-tone-3:before{filter:sepia(.5) saturate(.8)}
.read-spine:hover{transform:translateX(8px)}
.read-spine:focus-visible{outline:3px solid #f5d390;outline-offset:2px;border-radius:6px}
.read-volume:has(:focus-visible),.read-volume:hover{z-index:1}
@media(max-width:900px){.read-stacks{max-height:min(488px,60vh);max-height:min(488px,60dvh);margin-top:25px;padding:8px 16px 24px}.read-spine{height:39px;min-height:39px;padding:7px 13%}.read-spine span{font-size:15px}}
@media(prefers-reduced-motion:reduce){.read-spine{transition:none}.read-spine:hover{transform:none}}
body[data-view="stories"]:before{background:linear-gradient(180deg,rgba(246,239,225,.80),rgba(246,239,225,.60) 48%,rgba(246,239,225,.78)),url('assets/stories-photo-wall.png') center/cover no-repeat}
body[data-view="stories"] .stories-intro{color:#372e27;text-shadow:none}
body[data-view="stories"] .stories-intro .eyebrow{color:#66533d}
body[data-view="stories"] .book-caption{color:#3c3026;text-shadow:none}
body[data-view="stories"] .shuffle .stories-note{color:#493d31;background:#faf5eadb}

.story-search{max-width:760px;margin:22px auto 12px;padding:18px 22px;background:#fffaf0ed;border:1px solid #cbb997;border-radius:12px;color:#3b382f;box-shadow:0 5px 20px #40301c12}
.story-search label{display:block;font-weight:600;margin-bottom:9px}.story-search-controls{display:flex;gap:10px;align-items:center}.story-search input{flex:1;min-width:0;margin:0;padding:12px;border-radius:6px}.story-search .btn{flex-shrink:0}.story-search p{font-size:13px;margin:10px 0 0;color:#64594b}.story-search-status{text-align:center;color:#3b382f;background:#fffaf0dc;padding:10px;border-radius:8px;max-width:760px;margin:14px auto}.story-search input:focus-visible{outline:2px solid #285e5b;outline-offset:2px}@media(max-width:900px){.story-search{padding:15px}.story-search-controls{flex-wrap:wrap}.story-search input{flex-basis:100%}}


.topic-video{margin:0 0 26px}.topic-video iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:10px;background:#1f2928}.topic-video p{line-height:1.5}.topic-reading{margin-top:32px}.topic-reading h2{font-size:25px}.topic-section{border-top:1px solid #d9e3e0}.topic-section:last-child{border-bottom:1px solid #d9e3e0}.topic-section summary{cursor:pointer;padding:17px 8px;font-weight:600;line-height:1.5;color:#174443}.topic-section summary:focus-visible{outline:2px solid #174443;outline-offset:2px}.topic-section[open] summary{background:#f0f4eb}.topic-section-body{padding:2px 8px 16px;overflow-wrap:anywhere}.topic-section-body p{line-height:1.8}.topic-source{font-size:12px;color:#66746c;border-top:1px solid #e3e8e2;padding-top:14px}.topic-related{margin:24px 0}.topic-related a{display:block;padding:12px 0;border-bottom:1px solid #d9e3e0;text-underline-offset:3px}.topic-care-note{font-size:14px;line-height:1.6;padding:15px 18px;background:#f1f4ed;border-radius:8px}@media(max-width:900px){.lesson-grid .aside{display:block}.topic-video iframe{min-width:0}}

.topic-video video{display:block;width:100%;aspect-ratio:16/9;border-radius:10px;background:#1f2928}

.chat-recommendation{display:block;margin-top:14px;padding:12px 15px;border:1px solid #b8c9bc;border-radius:10px;background:#fff;text-decoration:none;line-height:1.5}.chat-recommendation small{display:block;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#5a6d6d}.chat-recommendation:hover{background:#e2eea8}.composer button:disabled{opacity:.6;cursor:wait}
html[lang=de] .book-title-group,html[lang=fi] .book-title-group{width:100%;min-width:0}html[lang=de] .book-lettering h3,html[lang=fi] .book-lettering h3,html[lang=de] .story-title,html[lang=fi] .story-title{max-width:100%;overflow-wrap:normal;hyphens:manual}
html[lang=fi] .book-item:not(.story-book) .book-lettering{left:15%;right:14%}
html[lang=fi] .book-title-group h3{hyphens:manual;line-height:1.08;letter-spacing:-.3px}

/* Compact story search */
.story-search{padding:10px 16px;margin-top:14px}.story-search input{padding:8px 10px}.story-search .btn{padding:9px 16px}.story-search p{margin-top:5px}@media(max-width:900px){.story-search{padding:10px 12px}}

.story-search #story-search-help{margin:0 0 6px}

.mobile-book-dots{display:none}
@media(max-width:900px){
 .book-shelf.mobile-book-carousel{display:flex;position:relative;max-width:none;width:calc(100% + 24px);margin:10px -12px 0;padding:0 12px 8px;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-left:12px;scrollbar-width:thin;scrollbar-color:#c7a574 transparent;align-items:start}
 .mobile-book-carousel .book-item{flex:0 0 min(72vw,240px,40svh);scroll-snap-align:start;container-type:inline-size}
 .mobile-book-carousel:after{content:'';flex:0 0 25vw}
 .mobile-book-carousel .book-link:hover{transform:none}
 .mobile-book-dots{display:flex;justify-content:center;gap:4px;margin:0 auto}
 .mobile-book-dots button{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;background:transparent;cursor:pointer}
 .mobile-book-dots button:before{content:'';width:8px;height:8px;background:#a58d69;border-radius:50%;border:1px solid #f1dfbf}
 .mobile-book-dots button.active:before{background:#fff1cf;width:11px;height:11px}
 .mobile-book-dots button:focus-visible{outline:2px solid #e7c994;border-radius:4px}
 .mobile-book-dots + .shuffle{margin:5px 0 22px;text-align:center}
 .mobile-book-dots + .shuffle .btn{min-height:44px;max-width:100%;padding:10px 16px}
}

.book-reading-time{display:block;font-family:inherit;font-size:12px;line-height:1.4;font-weight:500;letter-spacing:.3px;color:#f4ddb5;margin:18px 0 0;text-align:center}

.story-cover-time{position:absolute;bottom:0;left:0;right:0;display:block;text-align:center;font-family:'Nunito',Arial,sans-serif;font-size:4.3cqw;font-weight:600;line-height:1.4;color:#163842;letter-spacing:0}

/* Trial: intact and broken seals indicate opening history. */
.cover-seal{display:flex;flex-direction:column;align-items:center;gap:1cqw;color:#efd59e;font:600 3cqw Nunito,Arial,sans-serif;letter-spacing:.15cqw;line-height:1.2;text-shadow:0 1px 2px #160e08}.cover-seal svg{width:13cqw;height:13.4cqw;filter:drop-shadow(0 2px 2px #0008)}

/* Unopened books are tied with a red ribbon; opened books have none. */
.cover-ribbon,.cover-ribbon-space{display:block;width:100%;height:17cqw;flex-shrink:0;position:relative}.cover-ribbon svg{position:absolute;width:145%;max-width:none;height:auto;left:-22.5%;top:-3cqw;filter:drop-shadow(0 2px 2px #0006)}

/* Ribbon follows the physical cover, above the title, with a small side bow. */
.book-link>.cover-ribbon{position:absolute;left:9%;top:19%;width:82%;height:auto;z-index:2;pointer-events:none}.book-link>.cover-ribbon svg{position:static;display:block;width:100%;height:auto;filter:drop-shadow(0 1px 1px #0008)}.ribbon-header-space{display:block;height:13cqw;flex-shrink:0}

/* Library emblem revealed when a book has been opened. */
.opened-cover-header{height:13cqw;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2cqw;flex-shrink:0;color:#efd59e;font:700 2.6cqw Nunito,Arial,sans-serif;letter-spacing:.35cqw;line-height:1.5;text-align:center;text-shadow:0 1px 2px #170e03}.opened-cover-star{font-size:4.6cqw;line-height:1;color:#d9b774}

/* Fit the wider spiral-bound story cover, including its page edge. */
.story-book.book-link>.cover-ribbon{left:5.4%;width:92.5%;top:calc(12.2% + 4px);transform:rotate(-.35deg);transform-origin:center}.story-book.book-link>.cover-ribbon svg{filter:drop-shadow(0 1px .5px #30101970)}

/* Story library emblem aligns with the ribbon rather than the title. */
.story-book .opened-cover-header{position:absolute;top:-4%;left:0;width:100%;height:13cqw;color:#111;text-shadow:none}.story-book .book-lettering:has(.opened-cover-header)::before{content:'';display:block;height:13cqw;flex-shrink:0}

/* Keep the story ribbon on the front cover, before the exposed page edge. */
.story-book.book-link>.cover-ribbon{left:5.4%;width:89.7%;transform:none}

/* Wrap beyond the front cover over the spine and page block. */
.book-link:not(.story-book)>.cover-ribbon{left:4%;width:94%}
.story-book.book-link>.cover-ribbon{left:5.4%;width:93%;transform:none}

/* Tuck the outer ribbon edge inside the book silhouette. */
.book-link:not(.story-book)>.cover-ribbon{left:4%;width:91%}

/* Trim the topic ribbon at the left silhouette, preserving its right edge. */
.book-link:not(.story-book)>.cover-ribbon{left:calc(4% + 3px);width:calc(91% - 3px)}

/* Trim the story ribbon at the outer right book edge. */
.story-book.book-link>.cover-ribbon{clip-path:inset(0 3px 0 0)}

/* First portrait draft for register, sign-in and account. */
.account-draft .welcome-story{gap:24px;justify-content:flex-start}.profile-portrait{height:280px;width:100%;overflow:hidden;border-radius:6px;background:#b4dce1}.profile-portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 25%}.account-draft .welcome-story .quote{margin-top:auto}@media(max-width:900px){.profile-portrait{height:220px}}

/* Finnish portrait: preserve the supplied transparent image without a frame. */
html .profile-portrait{background:transparent;border-radius:0;overflow:visible;height:320px}html .profile-portrait img{object-fit:contain;object-position:center;height:100%;width:100%}

/* Finnish profile portrait sits at the bottom, twenty percent larger. */
html .account-draft .welcome-story{padding-bottom:0}html .account-draft .profile-portrait{order:3;height:384px;min-height:384px;margin-top:auto;flex-shrink:0}html .account-draft .profile-portrait img{object-position:center bottom}html .account-draft .welcome-story .quote{margin-top:0}

/* Large Finnish portrait; omit the quotation in this design. */
html .account-draft .welcome-story .quote{display:none}html .account-draft .profile-portrait{height:768px;min-height:768px;width:calc(100% + 96px);margin-left:-48px;overflow:hidden}html .account-draft .profile-portrait img{width:100%;height:100%;object-fit:cover;object-position:center bottom}@media(max-width:900px){html .account-draft .profile-portrait{width:calc(100% + 60px);margin-left:-30px;height:600px;min-height:600px}}

.profile-invitation{font-size:19px;line-height:1.65}.profile-invitation p{margin:0 0 22px}.profile-invitation .profile-credentials{font-size:15px;line-height:1.5;font-weight:700}

/* Finnish introduction and signature share the requested typography. */
html .profile-invitation{font-size:24px;line-height:1.5}html .profile-invitation .profile-credentials{font-family:inherit;font-size:inherit;line-height:inherit;font-weight:inherit}

/* Finnish registration/sign-in annotation adjustments. */
html .account-form>.register-heading{font-family:inherit}html .account-form>.signin-greeting{display:none}html .account-form>.eyebrow{font-family:inherit;font-size:24px;line-height:1.4;letter-spacing:0;text-transform:none;margin:24px 0 16px}

#account-preview-note:empty{display:none}

html .account-form>.register-heading{font-family:"DM Sans",sans-serif;font-size:24px;line-height:1.35;font-weight:700}

html #account-draft-form > p.fine:first-of-type{font-size:16px}

/* Finnish account typography from browser annotations. */
html #profile-details>h2,html #access-heading{font-family:"DM Sans",sans-serif;font-size:24px;font-weight:700;line-height:1.35}html .account-form .access-price>strong{font-family:"DM Sans",sans-serif;font-size:20px;font-weight:700}

html .account-form .updates-choice small{display:none}

/* Shared account and checkout heading typography in every language. */
html .account-form .full-access-offer>h2,html #purchase-title{font-family:"DM Sans",sans-serif;font-size:24px;font-weight:700;line-height:1.35}

/* Profile draft: portrait and introduction above the account form. */
html:root .welcome.account-draft{grid-template-columns:1fr}
html:root .account-draft .welcome-story{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:stretch;gap:32px;padding:36px 44px 0;min-height:0}
html:root .account-draft .welcome-story .profile-portrait{position:relative;order:0;align-self:stretch;width:100%;height:auto;min-height:0;margin:0;background:transparent;border-radius:0;overflow:hidden}
html:root .account-draft .welcome-story .profile-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%;transform:scale(1.25);transform-origin:center center}
html:root .account-draft .welcome-story .profile-invitation{padding:0 0 28px;align-self:start}
html:root .account-draft .welcome-story .profile-invitation p:last-child{margin-bottom:0}
html:root .account-draft .account-form{width:100%;max-width:780px;box-sizing:border-box;justify-self:center;padding:36px 44px}
@media(max-width:900px){
html:root .account-draft .welcome-story{grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr);gap:14px;padding:20px 16px 0}
html:root .account-draft .welcome-story .profile-invitation{font-size:17px;line-height:1.45;padding-bottom:20px}
html:root .account-draft .welcome-story .profile-invitation .profile-credentials{font-size:15px}
html:root .account-draft .welcome-story .profile-portrait img{object-fit:cover;object-position:center 25%;transform:scale(1.1)}
html:root .account-draft .account-form{padding:24px 20px}
}

html[lang="en"] .account-form>.signin-greeting{display:none}

/* Keep the top of the supplied portrait visible at every screen width. */
html:root .account-draft .welcome-story .profile-portrait img{object-position:center top;transform:none}

/* Welcome text and credentials: 20px in every language and viewport. */
html:root .account-draft .welcome-story .profile-invitation,html:root .account-draft .welcome-story .profile-invitation .profile-credentials{font-size:20px}

/* Offset the transparent space above the hair to align with the text capitals. */
html:root .account-draft .welcome-story .profile-portrait{container-type:inline-size}html:root .account-draft .welcome-story .profile-portrait img{inset:auto;left:0;top:calc(7px - 13.2cqw);width:100%;height:auto;max-width:none;object-fit:initial;transform:none}

/* Place visible hair 5px below the welcome panel top. */
html:root .account-draft .welcome-story .profile-portrait{margin-top:-36px;height:calc(100% + 36px)}html:root .account-draft .welcome-story .profile-portrait img{top:calc(5px - 13.2cqw)}@media(max-width:900px){html:root .account-draft .welcome-story .profile-portrait{margin-top:-20px;height:calc(100% + 20px)}}

.account-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.remove-account-dialog{border:1px solid #b99d6b;border-radius:8px;background:#faf5e9;padding:28px;max-width:calc(100% - 40px)}.remove-account-dialog::backdrop{background:#0008}.remove-account-dialog h2{font:700 24px "DM Sans",sans-serif}

.register-signin-hint{margin:0 0 24px;font-size:16px}.register-signin-link{border:0;background:none;padding:0;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

body[data-view="children"]:before{background:linear-gradient(180deg,#f6efe1cc,#f6efe199 48%,#f6efe1c7),url('assets/stories-photo-wall.png') center/cover no-repeat}.children-page{padding:24px 0 40px}.children-page h1{text-align:center;color:#372e27;margin:0 0 32px}.letter-sheets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;max-width:1050px;margin:auto}.letter-sheet{aspect-ratio:210/297;border:1px solid #d4c4a7;border-radius:2px;background:linear-gradient(110deg,#fffdf6,#f8f0de);box-shadow:0 10px 24px #35251235;padding:24px 20px;display:flex;flex-direction:column;align-items:center;color:#493529;cursor:pointer;font-family:"DM Sans",sans-serif}.letterhead{display:flex;flex-direction:column;align-items:center;gap:8px;font:24px Georgia,serif;width:100%;padding-bottom:18px;border-bottom:1px solid #b99d6b}.letter-portrait{width:100px;height:100px;overflow:hidden;position:relative}.letter-portrait img{position:absolute;width:175px;max-width:none;left:-37px;top:-23px}.letter-title{font-size:22px;font-weight:700;margin-top:36px}.letter-rule{width:45px;height:1px;background:#b99d6b;margin-top:22px}.letter-soon{margin-top:28px;font-size:15px}.letter-soon[hidden]{display:none}@media(max-width:900px){.letter-sheets{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 8px 24px;gap:16px}.letter-sheet{flex:0 0 82%;scroll-snap-align:center}.children-page h1{font-size:32px}}

body[data-view="children"]:before{background:linear-gradient(#fff3dd22,#fff3dd22),url("assets/children-writing-desk.png") center/cover no-repeat}.children-page h1{color:#fff8e9;text-shadow:0 2px 5px #35200ddd}.letter-sheet{box-shadow:0 12px 25px #29160666}

body[data-view="children"]:before{background:#e8e1d5}.writer-page{max-width:850px;margin:auto;padding:20px 0 48px}.writer-portrait{display:block;width:100%;height:auto;border-radius:4px 4px 0 0}.writer-page h1{color:#372e27;text-shadow:none;font-size:32px;margin:0;padding:28px 20px 20px;background:#fffaf0}.writer-page .letter-sheets{display:flex;flex-direction:column;gap:0;padding:0 28px 28px;background:#fffaf0;overflow:visible}.writer-page .letter-sheet{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;aspect-ratio:auto;min-height:76px;width:100%;flex:auto;background:transparent;box-shadow:none;border:0;border-top:1px solid #d9cbb5;border-radius:0;padding:20px 8px;text-align:left}.writer-page .letterhead,.writer-page .letter-rule{display:none}.writer-page .letter-title{margin:0;font-size:22px}.writer-page .letter-sheet:after{content:'→';font-size:24px}.writer-page .letter-sheet:hover{background:#f2eadc}.writer-page .letter-soon{order:2;flex-basis:100%;margin-top:8px}@media(max-width:900px){.writer-page{padding-top:8px}.writer-page h1{font-size:26px}.writer-page .letter-sheets{padding:0 16px 20px}.writer-page .letter-title{font-size:20px}}

.writer-page>h1{border-radius:4px 4px 0 0}.writer-page>.writer-portrait{border-radius:0}

.writer-page .letter-title{flex:1;min-width:0;line-height:1.4}.writer-page .letter-sheet:after{flex:0 0 auto;margin-left:16px}

.writer-page .letter-sheets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding:30px 18px;background:#fffaf0}.writer-page .letter-sheet{position:relative;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;aspect-ratio:1145/1280;min-height:0;padding:30% 12% 8%;border:0;background:url('assets/letter-envelope.png') center/100% 100% no-repeat;isolation:isolate;transition:transform .18s ease}.writer-page .letter-sheet:hover{background:url('assets/letter-envelope.png') center/100% 100% no-repeat;transform:translateY(-5px)}.writer-page .letter-title{flex:0 0 auto;font-size:17px;line-height:1.3;text-align:center;color:#4b2634;font-weight:700}.writer-page .letter-sheet:after{content:'PDF';position:absolute;top:23%;right:12%;margin:0;font-size:11px;line-height:1;font-weight:700;letter-spacing:1px;color:#4b2634;border:1px solid #4b2634;border-radius:3px;padding:3px 4px}.writer-page .letter-soon{position:absolute;bottom:17%;left:10%;right:10%;flex-basis:auto;order:0;margin:0;text-align:center;color:#4b2634;font-size:14px}@media(max-width:900px){.writer-page .letter-sheets{grid-template-columns:1fr;justify-items:center;padding:24px 20px;gap:24px}.writer-page .letter-sheet{width:100%;max-width:340px;padding:30% 12% 8%}.writer-page .letter-title{font-size:20px}}

.writer-page .letter-sheets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding:30px 18px;background:#fffaf0}.writer-page .letter-sheet{position:relative;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;aspect-ratio:1145/1280;min-height:0;padding:30% 12% 8%;border:0;background:url('assets/letter-envelope.png') center/100% 100% no-repeat;isolation:isolate;transition:transform .18s ease}.writer-page .letter-sheet:hover{background:url('assets/letter-envelope.png') center/100% 100% no-repeat;transform:translateY(-5px)}.writer-page .letter-title{flex:0 0 auto;font-size:17px;line-height:1.3;text-align:center;color:#4b2634;font-weight:700}.writer-page .letter-sheet:after{content:'PDF';position:absolute;bottom:9%;right:10%;margin:0;font-size:11px;line-height:1;font-weight:700;letter-spacing:1px;color:#4b2634;border:1px solid #4b2634;border-radius:3px;padding:3px 4px}.writer-page .letter-soon{position:absolute;bottom:17%;left:10%;right:10%;flex-basis:auto;order:0;margin:0;text-align:center;color:#4b2634;font-size:14px}@media(max-width:900px){.writer-page .letter-sheets{grid-template-columns:1fr;justify-items:center;padding:24px 20px;gap:24px}.writer-page .letter-sheet{width:100%;max-width:340px;padding:30% 12% 8%}.writer-page .letter-title{font-size:20px}}

.writer-page .letter-sheet,.writer-page .letter-sheet:hover{background-image:url('assets/letter-envelope-simple.svg');background-size:100% 100%;aspect-ratio:320/340;padding:0}.writer-page .letter-title{position:absolute;top:20%;left:17%;right:17%;font-size:16px;line-height:1.3;color:#49382c}.writer-page .letter-sheet:after{bottom:12%;right:12%;color:#49382c;border-color:#49382c}.writer-page .letter-soon{bottom:22%;font-size:13px}@media(max-width:900px){.writer-page .letter-sheet{padding:0}.writer-page .letter-title{font-size:18px}}

.writer-page .letter-sheet,.writer-page .letter-sheet:hover{background-image:url('assets/letter-envelope-simple.png');background-size:100% 100%;aspect-ratio:320/340;padding:0}.writer-page .letter-title{position:absolute;top:20%;left:17%;right:17%;font-size:16px;line-height:1.3;color:#49382c}.writer-page .letter-sheet:after{top:auto;bottom:12%;right:12%;color:#49382c;border-color:#49382c}.writer-page .letter-soon{bottom:22%;font-size:13px}@media(max-width:900px){.writer-page .letter-sheet{padding:0}.writer-page .letter-title{font-size:18px}}

.writer-page .letter-pagination{margin:-5mm 0 0;padding:0 20px 28px;background:#fffaf0;text-align:center}

.writer-page .letter-sheet:after{background:#f6c568;opacity:1}

.writer-page .letter-sheet:after{background:#b3262d;color:#fff;border-color:#b3262d;opacity:1}
.letter-interview{width:min(720px,calc(100vw - 40px));max-height:90dvh;padding:0;border:1px solid #d4c4a7;border-radius:14px;background:#fffaf0;color:#372e27;box-shadow:0 24px 80px #0005;font-family:'DM Sans',sans-serif}.letter-interview::backdrop{background:#221c17b3}.interview-header{position:sticky;top:0;display:flex;align-items:flex-start;gap:20px;padding:24px 28px;background:#fffaf0;border-bottom:1px solid #e4d8c5;z-index:1}.interview-header h2{font:700 22px/1.35 'DM Sans',sans-serif;margin:5px 0 0}.interview-byline{color:#80633c;font-weight:700}.interview-close{margin-left:auto;border:0;background:transparent;font-size:30px;cursor:pointer;color:inherit}.interview-body{padding:20px 28px 28px}.interview-draft{font-size:13px;color:#766957;background:#f0e9dc;padding:10px 12px;border-radius:6px}.interview-intro{line-height:1.5}.interview-question{display:block;font-weight:600;line-height:1.5;margin:18px 0 10px}.interview-answer{white-space:pre-wrap;background:#e8eff0;border-radius:12px;padding:12px 16px;margin-left:32px;overflow-wrap:anywhere}.interview-progress{font-size:13px;color:#80633c;margin-top:24px}.interview-input{box-sizing:border-box;width:100%;font:16px/1.5 'DM Sans',sans-serif;padding:12px;border:1px solid #bcae98;border-radius:8px;background:white;resize:vertical}.interview-controls{display:flex;justify-content:space-between;margin-top:18px;gap:12px}.letter-interview button:disabled{opacity:.45;cursor:default}.interview-review{border-bottom:1px solid #e4d8c5;padding-bottom:12px;margin-bottom:20px}.interview-edit{background:transparent;border:0;text-decoration:underline;color:#6b4b30;cursor:pointer}.letter-interview :focus-visible{outline:3px solid #ac803d;outline-offset:3px}@media(max-width:900px){.letter-interview{width:100%;max-width:100%;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0}.interview-header{padding:20px}.interview-body{padding:16px 20px 28px}.interview-header h2{font-size:20px}}

.letter-interview .interview-header{display:flex;flex-direction:row;justify-content:space-between;color:#372e27;min-height:0;height:auto}.letter-interview .interview-header h2,.letter-interview .interview-close{color:#372e27}.letter-interview .interview-header>div{flex:1;min-width:0}.letter-interview .interview-close{flex:0 0 auto;padding:0 4px;margin:0}

.letter-template-interview{width:min(760px,calc(92dvh * .7071));height:92dvh;max-height:1000px;border:0;border-radius:0;background:#fff url('assets/interview-template-en.png?v=ai-restored-20261013') center/100% 100% no-repeat;overflow:hidden;box-sizing:border-box}.letter-template-interview[data-language=fi]{background-image:url('assets/interview-template-fi.png?v=ai-restored-20261013')}.letter-template-interview[data-language=de]{background-image:url('assets/interview-template-de.png?v=ai-restored-20261013')}.letter-template-interview .interview-header{position:absolute;top:18%;left:10%;right:10%;padding:0 0 12px;background:transparent;border-bottom:1px solid #d3e4e8}.letter-template-interview .interview-byline{display:none}.letter-template-interview .interview-header h2{font-size:18px;line-height:1.35;margin:0}.letter-template-interview .interview-close{position:fixed;top:8px;right:8px;background:white;border-radius:50%;width:34px;height:34px;font-size:26px;box-shadow:0 1px 6px #0002}.letter-template-interview .interview-body{position:absolute;top:29%;bottom:14%;left:10%;right:10%;overflow-y:auto;padding:0 8px 12px 0;overscroll-behavior:contain}.letter-template-interview .interview-draft{font-size:11px;padding:8px;background:#eff6f8}.letter-template-interview .interview-intro{font-size:14px}.letter-template-interview .interview-question{font-size:15px}.letter-template-interview .interview-answer{font-size:14px}.letter-template-interview .interview-controls{position:sticky;bottom:0;background:white;padding:12px 0 0}.letter-template-interview .interview-progress{margin-top:16px}@media(max-width:900px){.letter-template-interview{width:100%;height:100dvh;max-height:100dvh;margin:0}.letter-template-interview .interview-header{top:18%;left:10%;right:10%;padding:0 0 12px}.letter-template-interview .interview-header h2{font-size:17px}.letter-template-interview .interview-body{padding:0 5px 12px 0}.letter-template-interview .interview-controls .btn{padding:10px 12px}}

.letter-template-interview .interview-header h2{text-align:center}

.encouragement-questions .interview-input{display:block;min-height:44px}.encouragement-questions textarea.interview-input{resize:vertical;overflow-y:auto;min-height:76px}.encouragement-questions .interview-question{margin-top:24px}.encouragement-questions>.btn{margin-top:8px}

.letter-template-interview .interview-header{top:calc(18% - 10mm)}.letter-template-interview .interview-body{top:calc(29% - 10mm)}

.letter-template-interview .interview-body{top:calc(29% - 25mm);scrollbar-color:#345d96 #f5fafb}.letter-template-interview .interview-body::-webkit-scrollbar{width:10px}.letter-template-interview .interview-body::-webkit-scrollbar-track{background:#f5fafb}.letter-template-interview .interview-body::-webkit-scrollbar-thumb{background:#345d96;border-radius:8px}

.letter-template-interview[data-language=fi][data-template=important]{background-image:url('assets/interview-important-fi.png?v=ai-restored-20261013')}
.letter-template-interview[data-language=fi][data-template=apology]{background-image:url('assets/interview-apology-fi.png?v=ai-restored-20261013')}
.letter-template-interview[data-language=en][data-template=important]{background-image:url('assets/interview-important-en.png?v=ai-restored-20261013')}
.letter-template-interview[data-language=en][data-template=apology]{background-image:url('assets/interview-apology-en.png?v=ai-restored-20261013')}
.letter-template-interview[data-language=de][data-template=important]{background-image:url('assets/interview-important-de.png?v=ai-restored-20261013')}
.letter-template-interview[data-language=de][data-template=apology]{background-image:url('assets/interview-apology-de.png?v=ai-restored-20261013')}

.letter-template-interview[data-language=fi][data-template=sorry]{background-image:url('assets/interview-sorry-fi.png')}
.letter-template-interview[data-language=en][data-template=sorry]{background-image:url('assets/interview-sorry-en.png')}
.letter-template-interview[data-language=de][data-template=sorry]{background-image:url('assets/interview-sorry-de.png')}

.brand:has(.ks-mark) .brand-sub{bottom:7px}

/* Keep the page width stable when switching between short and long account tabs. */
html{scrollbar-gutter:stable}
@supports not (scrollbar-gutter:stable){html{overflow-y:scroll}}

/* Raise and strengthen the active navigation underline without moving the text. */
header nav a{position:relative}header nav a.active{border-bottom-color:transparent}header nav a.active::after{content:"";position:absolute;left:0;right:0;height:4px;bottom:calc(3mm - 2px);background:#d1ad73;pointer-events:none}

/* Match the tighter collection-to-button spacing used on Letters. */
.book-shelf + .shuffle{margin-top:calc(24px - 5mm)}
@media(max-width:900px){.book-shelf + .shuffle{margin-top:calc(28px - 5mm)}}

@media(min-width:901px){.book-shelf ~ .shuffle{margin-top:calc(24px - 5mm)}}

/* Reserve space inside the scrollport for the 3px outline and 3px offset. */
.letter-template-interview .interview-body{padding-left:8px;padding-right:8px}

.topic-section-body .topic-example{margin:24px 0 24px 28px;padding:4px 0 4px 20px;border-left:3px solid #b99d6b;font:inherit;color:inherit}.topic-example p{margin:0}@media(max-width:900px){.topic-section-body .topic-example{margin-left:12px;padding-left:14px}}

.letter-template-interview .letter-description{padding-right:5mm;text-align:justify;text-align-last:left;margin:0 0 28px;font-family:"DM Sans",sans-serif;font-size:15px;font-weight:400;line-height:1.4;color:#000000}

.letter-age-fields{margin-top:20px}.letter-age-fields label{display:block;font-size:15px;font-weight:600;margin:16px 0 8px}.letter-result-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}.letter-result label{display:block;font-weight:600;margin:16px 0 8px}.letter-result .letter-draft-text{min-height:350px;line-height:1.55}.letter-generation-status{font-size:14px}.encouragement-questions[hidden],.letter-description[hidden]{display:none}

/* Only the letter body scrolls while its modal is open; retain the page gutter to avoid a width jump. */
html:has(.letter-interview[open]){overflow:hidden}body:has(.letter-interview[open]){overflow:hidden}

/* The letter body is the sole scrolling container while its dialog is open. */
html:has(.letter-interview[open]),body:has(.letter-interview[open]){overflow:hidden;scrollbar-width:none;scrollbar-gutter:auto}
html:has(.letter-interview[open])::-webkit-scrollbar,body:has(.letter-interview[open])::-webkit-scrollbar,.letter-template-interview::-webkit-scrollbar{display:none}
.letter-template-interview{overflow:hidden;scrollbar-width:none}

/* Editable letter: scroll the text only, keeping actions in view. */
.letter-template-interview .interview-body:has(.letter-result){overflow:hidden;display:flex;flex-direction:column}
.letter-template-interview .letter-result{display:flex;flex-direction:column;flex:1;min-height:0}
.letter-template-interview .letter-result>p{flex:none;margin:0 0 8px}
.letter-template-interview .letter-result>label{flex:none;margin:4px 0 8px}
.letter-template-interview .letter-result .letter-draft-text{flex:1;min-height:0;height:0;resize:none;overflow-y:auto;scrollbar-color:#345d96 #f5fafb}
.letter-template-interview .letter-result-actions{flex:none;margin-top:12px;gap:8px}
.letter-template-interview .letter-result>[role=status]:empty{display:none}

.letter-access-note{display:inline-block;margin:8px 0 8px 12px;font-size:14px;color:#372e27}

/* Reflow the letter form as text grows: header height is content-driven. */
.letter-template-interview[open]{display:grid;grid-template-rows:16% auto minmax(0,1fr) 12%;width:min(47.5rem,96vw);height:92dvh;max-height:62.5rem;padding:0 clamp(1rem,6vw,4.25rem);font-size:1rem}
.letter-template-interview .interview-header{position:static;grid-row:2;min-width:0;display:block;padding:0 .5em .75em;margin:0;background:transparent}
.letter-template-interview .interview-header h2{font-size:1.125em;line-height:1.4;overflow-wrap:anywhere}
.letter-template-interview .interview-body{position:static;grid-row:3;min-height:0;min-width:0;padding:.75em .5em;overflow-x:hidden;overflow-y:auto}
.letter-template-interview .letter-description{font-size:.9375em;line-height:1.45;padding-right:.5em;margin:0 0 1.5em;overflow-wrap:anywhere}
.letter-template-interview .interview-question{font-size:.9375em;line-height:1.5;overflow-wrap:anywhere;margin:1.2em 0 .6em}
.letter-template-interview .interview-input{font-size:1em;line-height:1.5;padding:.75em;max-width:100%}
.letter-template-interview .btn{font-size:.875em;white-space:normal;overflow-wrap:anywhere;padding:.75em 1em}
.letter-template-interview .letter-result-actions{gap:.5em;flex-wrap:wrap}
/* At high zoom / short viewports, give the usable space to the form. */
@media(max-height:600px),(max-width:480px){
 .letter-template-interview[open]{width:100%;height:100dvh;max-height:100dvh;margin:0;padding:2.75em 5% 1em;background:#fff;border:.4em solid #666;grid-template-rows:auto minmax(0,1fr)}
 .letter-template-interview .interview-header{grid-row:1}
 .letter-template-interview .interview-body{grid-row:2}
 .letter-template-interview .letter-result>p{font-size:.875em;line-height:1.4}
 .letter-template-interview .letter-result-actions .btn{flex:1 1 auto;padding:.5em}
}

.letter-template-interview .letter-description{width:100%;max-width:100%;height:auto;white-space:normal;text-align:left;text-align-last:auto;overflow-wrap:anywhere;padding-right:0;font-size:1em;line-height:1.5}


/* One fixed-proportion sheet: browser zoom scales paper and content together. */
.letter-template-interview[open]{display:block;width:100vw;max-width:none;height:100dvh;max-height:none;inset:0;margin:0;padding:1.5rem;overflow:auto;scrollbar-width:auto;background:transparent!important;border:0;box-shadow:none;font-size:1rem}
.letter-template-interview::-webkit-scrollbar{display:block;width:12px;height:12px}
.letter-template-interview .letter-paper{box-sizing:border-box;width:47.5rem;height:67.18rem;margin:0 auto;display:grid;grid-template-rows:10.75rem auto minmax(0,1fr) 8rem;padding:0 4.25rem;background:#fff url('assets/interview-template-en.png?v=ai-restored-20261013') center/100% 100% no-repeat;box-shadow:0 1rem 4rem #0005}
.letter-template-interview[data-language=fi] .letter-paper{background-image:url('assets/interview-template-fi.png?v=ai-restored-20261013')}
.letter-template-interview[data-language=de] .letter-paper{background-image:url('assets/interview-template-de.png?v=ai-restored-20261013')}
.letter-template-interview .interview-header{grid-row:2}
.letter-template-interview .interview-body{grid-row:3}
.letter-template-interview .letter-result>p{font-size:1em;line-height:1.5}
.letter-template-interview .letter-result-actions .btn{flex:initial;padding:.75em 1em}
.letter-template-interview .interview-close{z-index:5}

.letter-template-interview[data-language=fi][data-template=important] .letter-paper{background-image:url('assets/interview-important-fi.png?v=ai-restored-20261013')}

.letter-template-interview[data-language=fi][data-template=apology] .letter-paper{background-image:url('assets/interview-apology-fi.png?v=ai-restored-20261013')}

.letter-template-interview[data-language=en][data-template=important] .letter-paper{background-image:url('assets/interview-important-en.png?v=ai-restored-20261013')}

.letter-template-interview[data-language=en][data-template=apology] .letter-paper{background-image:url('assets/interview-apology-en.png?v=ai-restored-20261013')}

.letter-template-interview[data-language=de][data-template=important] .letter-paper{background-image:url('assets/interview-important-de.png?v=ai-restored-20261013')}

.letter-template-interview[data-language=de][data-template=apology] .letter-paper{background-image:url('assets/interview-apology-de.png?v=ai-restored-20261013')}

/* Compact account introduction on phones, in every language. */
@media(max-width:900px){html:root .account-draft .welcome-story .profile-invitation,html:root .account-draft .welcome-story .profile-invitation .profile-credentials{font-size:14px;line-height:1.5}html:root .account-draft .welcome-story .profile-invitation p{margin-bottom:12px}}


@media(max-width:900px){body[data-view="library"] #app>.shuffle,body[data-view="stories"] #app>.shuffle,.writer-page .letter-pagination,.mobile-book-dots{display:none!important}.writer-page .letter-sheets{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;justify-content:flex-start}.writer-page .letter-sheet{flex:0 0 82%;scroll-snap-align:center}}

.phone-shelf-arrows{display:none}@media(max-width:900px){.phone-shelf-arrows{display:flex;justify-content:center;gap:1.5rem;margin:.5rem 0 1.5rem}.phone-shelf-arrows .btn{min-width:48px;min-height:44px;font-size:1.5rem;padding:.2rem .9rem}.phone-shelf-arrows button:disabled{opacity:.3;cursor:default}}
@media(max-width:900px){.writer-page .letter-sheets{flex-direction:row;flex-wrap:nowrap;overflow-y:hidden}.writer-page .letter-sheet{min-width:82%}}

/* Constrain the envelope track so it scrolls instead of widening the page. */
@media(max-width:900px){.writer-page{width:100%;min-width:0}.writer-page .letter-sheets{display:flex;flex-flow:row nowrap;width:100%;max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}.writer-page .letter-sheet{flex:0 0 min(72vw,340px);width:min(72vw,340px);min-width:min(72vw,340px);max-width:none;scroll-snap-align:start}}

.letter-template-interview[data-language=pl][data-template=important] .letter-paper{background-image:url('assets/interview-important-en.png?v=ai-restored-20261013')}
.letter-template-interview[data-language=pl][data-template=apology] .letter-paper{background-image:url('assets/interview-apology-en.png?v=ai-restored-20261013')}

/* Real paper envelope design supplied by Ben. Keep text live and localized. */
.writer-page{background:#ded4c2}
.writer-page .letter-sheets{background:transparent;gap:24px;padding:28px 24px 12px}
.writer-page .letter-sheet,.writer-page .letter-sheet:hover{background:transparent url('assets/letter-envelope-realistic.png') center/100% 100% no-repeat;aspect-ratio:1145/1374;padding:0;border:0;box-shadow:none;mix-blend-mode:multiply}
.writer-page .letter-title{top:22%;left:14%;right:14%;font-size:17px;line-height:1.28;color:#302821;font-weight:700}
.writer-page .letter-sheet:after{display:none}
.writer-page .letter-pagination{background:transparent;margin:0;padding:0 20px 28px}
@media(max-width:900px){.writer-page .letter-sheets{padding:22px 14px 10px;gap:16px}.writer-page .letter-title{font-size:18px}}
/* Isolate the supplied artwork without tinting its white paper. */
.writer-page .letter-sheet,.writer-page .letter-sheet:hover{background:none;mix-blend-mode:normal;filter:drop-shadow(0 5px 5px #55463325)}
.writer-page .letter-sheet:before{content:'';position:absolute;inset:0;z-index:-1;background:url('assets/letter-envelope-realistic.png') center/100% 100% no-repeat;clip-path:polygon(9.2% 9.1%,88.2% 9.1%,88.2% 41.2%,89.9% 42.3%,89.9% 87.7%,7.3% 87.7%,7.3% 42.3%,9.2% 41.2%)}
/* Wider writing area and a clear, friendly informal typeface. */
@font-face{font-family:'Letter Fredoka';src:url('assets/Fredoka-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
.writer-page .letter-sheets{gap:10px;padding-left:12px;padding-right:12px}
.writer-page .letter-sheet:before{left:-4%;right:-4%}
.writer-page .letter-title{left:8%;right:8%;top:21%;font-family:'Letter Fredoka','DM Sans',sans-serif;font-weight:400;font-size:19px;line-height:1.22;color:#302821;text-wrap:balance}
@media(max-width:900px){.writer-page .letter-sheets{gap:12px;padding-left:14px;padding-right:14px}.writer-page .letter-title{font-size:21px}}


/* Shorter titles leave more breathing room on the paper. */
.writer-page .letter-title{left:15%;right:15%}


/* Closed, ribboned editions hide the page block; opened editions keep the original art. */
.book-link:not(.story-book) .book-art.book-closed{clip-path:polygon(5.4% 6.6%,90% 6.6%,90% 90.5%,5.4% 90.5%)}
.book-link:not(.story-book):has(.book-closed)>.cover-ribbon{width:calc(86% - 3px)}
.story-book.book-link:has(.book-closed)>.cover-ribbon{left:calc(5.4% + 1px);width:calc(89.8% + 1px);clip-path:none}

/* Visual language selection */
.language-picker{border:0;padding:0;margin:18px 0 22px;min-width:0}.language-picker legend{font-weight:600;font-size:14px;margin-bottom:10px}.language-flags{display:flex;flex-wrap:wrap;gap:10px}.language-flag{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;min-width:88px;padding:12px 10px;border:1px solid #d5c8b5;border-radius:12px;background:#fffcf6;color:#45372b;font:500 14px 'DM Sans',sans-serif;cursor:pointer;transition:background .15s,box-shadow .15s}.language-flag svg{width:48px;height:32px;border-radius:3px;box-shadow:0 1px 4px #0002}.language-flag:hover{background:#f3eadb}.language-flag[aria-pressed=true]{border:2px solid #99703c;padding:11px 9px;background:#efe1c9;box-shadow:0 0 0 2px #99703c18}.language-flag:focus-visible{outline:3px solid #315f96;outline-offset:3px}.language-flag:disabled{cursor:default;background:#f0ece5;color:#746b5e}.language-flag:disabled svg{opacity:.65}.language-flag small{font-size:10px;line-height:1.2}.language-save-status:empty{display:none}.account-fields:has(.language-picker){grid-template-columns:1fr}.language-picker [type=hidden]{display:none}@media(max-width:480px){.language-flags{gap:8px}.language-flag{min-width:76px;flex:1 0 25%;padding:10px 8px}.language-flag[aria-pressed=true]{padding:9px 7px}}

/* Chat header matches the Letters page. */
body[data-view="chat"]:before{background:#e8e1d5}.chat-wrap.chat-writer-page{max-width:850px;margin:auto;padding:20px 0 32px;background:#ded4c2}.chat-writer-page>.chat-page-title{text-align:center;color:#372e27;text-shadow:none;font-size:32px;margin:0;padding:28px 20px 20px;background:#fffaf0;border-radius:4px 4px 0 0}.chat-writer-portrait{display:block;width:100%;height:auto;aspect-ratio:2146/733;object-fit:contain;background:#ded4c2}.chat-page-intro{text-align:center;padding:20px 24px 0;margin:0;color:#45382c}.chat-writer-page>.chat-panel{margin:20px 24px;border-radius:12px}.chat-writer-page>p.fine{margin-left:24px;margin-right:24px}@media(max-width:900px){.chat-wrap.chat-writer-page{padding-top:8px}.chat-writer-page>.chat-page-title{font-size:26px}.chat-writer-page>.chat-panel{margin:16px 12px}.chat-page-intro{padding:16px 16px 0}}

/* Distinct Dr Ben replies and a phone-friendly send button. */
.messages .ben-bubble{position:relative;margin-left:46px;max-width:calc(88% - 46px);background:#244c78;color:#fff}.ben-chat-avatar{position:absolute;left:-44px;top:0;width:34px;height:34px;object-fit:cover;object-position:50% 10%;border-radius:50%;background:#e9e1d5;border:1px solid #c5bba9}.ben-bubble p,.ben-bubble a,.ben-bubble small{color:#fff}.ben-bubble .chat-recommendation{background:#ffffff14;border-color:#ffffff55}.chat-mobile-send{display:none}.chat-input-bubble{position:relative}@media(max-width:900px){.messages .ben-bubble{max-width:calc(96% - 42px);margin-left:42px;padding:14px 16px}.ben-chat-avatar{left:-40px;width:32px;height:32px}.chat-input-bubble textarea{padding-right:62px;padding-bottom:18px;min-height:80px;border-radius:20px;resize:vertical}.chat-mobile-send{position:absolute;right:9px;bottom:12px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:10px;border:0;border-radius:50%;background:#244c78;color:white;cursor:pointer}.chat-mobile-send svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}.chat-mobile-send:focus-visible{outline:3px solid #b58b46;outline-offset:3px}.composer-actions>button[type=submit]{display:none}.composer-actions{justify-content:flex-end}.chat-keyboard-hint{display:none}}

/* Original portrait, cropped to the head inside Dr Ben's bubble. */
.messages .ben-bubble{margin-left:0;max-width:88%;padding-left:76px;min-height:76px}.ben-chat-avatar{left:14px;top:14px;width:46px;height:46px;border:0;background:#eee6d8 url('assets/ben-chat-portrait.png') 58.55% 17.26% / 249.44% auto no-repeat;border-radius:50%}@media(max-width:900px){.messages .ben-bubble{margin-left:0;max-width:96%;padding-left:66px;min-height:68px}.ben-chat-avatar{left:12px;top:14px;width:40px;height:40px}}

.chat-input-bubble textarea{padding-right:16px}.composer-actions{justify-content:flex-end}

/* Remove the empty strip above Letters and Chat headings. */
.writer-page,.chat-wrap.chat-writer-page{padding-top:0}

/* Compact the shared registration, sign-in and account introduction. */
body[data-view="welcome"] main{padding-top:0}
html:root .account-draft .welcome-story{padding-top:20px}
html:root .account-draft .welcome-story .profile-invitation,html:root .account-draft .welcome-story .profile-invitation .profile-credentials{font-size:17px;line-height:1.45}
html:root .account-draft .welcome-story .profile-invitation{padding-bottom:20px}
html:root .account-draft .welcome-story .profile-invitation p{margin-bottom:14px}
@media(max-width:900px){html:root .account-draft .welcome-story{padding-top:14px}html:root .account-draft .welcome-story .profile-invitation,html:root .account-draft .welcome-story .profile-invitation .profile-credentials{font-size:13px;line-height:1.45}}

/* Remove redundant collection labels above the Explore and Stories headings. */
body[data-view="library"] .library-intro>.eyebrow,body[data-view="stories"] .stories-intro>.eyebrow{display:none}

/* Keep the portrait at its head offset until its bottom needs anchoring. */
html:root .account-draft .welcome-story .profile-portrait{margin-top:-20px;height:calc(100% + 20px)}
html:root .account-draft .welcome-story .profile-portrait img{top:max(calc(5px - 13.2cqw),calc(100% - 142.3173173173cqw))}
@media(max-width:900px){html:root .account-draft .welcome-story .profile-portrait{margin-top:-14px;height:calc(100% + 14px)}}

html:root .account-draft .profile-invitation ul{margin:0;padding-left:1.2em}html:root .account-draft .profile-invitation li{margin:0 0 .2em}

/* Center the language choices and outline the flag artwork. */
.language-flags{justify-content:center}
.language-picker legend{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.language-flag svg{outline:1px solid #897762;outline-offset:0}
.language-save-status{text-align:center}

/* Compact name/nickname fields without limiting the entered name. */
.account-form #account-name,.account-form #profile-name{width:calc(12ch + 32px);max-width:100%;box-sizing:border-box}

/* Consistent warm text throughout the profile introduction. */
html:root .account-draft .welcome-story .profile-invitation,html:root .account-draft .welcome-story .profile-invitation *{color:#DACEB8}

/* Give the portrait more headroom and the introduction a minimum height. */
html:root .account-draft .welcome-story{min-height:260px;box-sizing:border-box}
html:root .account-draft .welcome-story .profile-portrait img{top:max(calc(10px - 13.2cqw),calc(100% - 142.3173173173cqw))}

/* Invisible flag buttons retain their generous hit areas. */
.language-picker .language-flag,.language-picker .language-flag:hover,.language-picker .language-flag[aria-pressed=true],.language-picker .language-flag:disabled{background:transparent;border-color:transparent;box-shadow:none}
.language-picker .language-flag[aria-pressed=true] svg{outline:2px solid #99703c;outline-offset:2px}

/* Center introduction text vertically within the profile banner. */
html:root .account-draft .welcome-story .profile-invitation{align-self:center}

/* Keep the compact save button alongside the nickname. */
.profile-name-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
html .account-form .profile-name-row .account-submit{width:auto;flex:0 0 auto;margin:0;padding:12px 20px;white-space:nowrap}
html .account-form .profile-name-row #profile-name{margin:0;flex:0 1 auto}

/* Keep both speakers aligned on the left. */
.messages .bubble.user{margin-left:0;margin-right:auto;border-radius:4px 18px 18px}

/* Checkout headings use the app body font. */
.purchase-dialog h2{font-family:Manrope,sans-serif;font-weight:700;letter-spacing:normal}

/* Rounded closed story covers; keep the spiral binding visible. */
.story-book .book-art.book-closed{clip-path:polygon(89.746% 5.404%,90.460% 5.435%,91.162% 5.528%,91.839% 5.681%,92.480% 5.892%,93.075% 6.157%,93.613% 6.471%,94.085% 6.830%,94.482% 7.227%,94.799% 7.654%,95.029% 8.106%,95.168% 8.574%,95.215% 9.049%,95.215% 90.365%,95.168% 90.840%,95.029% 91.308%,94.799% 91.760%,94.482% 92.188%,94.085% 92.584%,93.613% 92.943%,93.075% 93.257%,92.480% 93.522%,91.839% 93.733%,91.162% 93.886%,90.460% 93.979%,89.746% 94.010%,9.473% 94.010%,9.039% 93.991%,8.613% 93.935%,8.202% 93.842%,7.813% 93.714%,7.451% 93.553%,7.125% 93.362%,6.838% 93.144%,6.597% 92.904%,6.405% 92.644%,6.265% 92.370%,6.181% 92.086%,6.152% 91.797%,6.152% 89.974%,1.953% 89.974%,1.953% 10.000%,6.152% 10.000%,6.152% 7.617%,6.181% 7.328%,6.265% 7.044%,6.405% 6.770%,6.597% 6.510%,6.838% 6.270%,7.125% 6.052%,7.451% 5.861%,7.812% 5.700%,8.202% 5.572%,8.613% 5.479%,9.039% 5.423%,9.473% 5.404%)}

.letter-template-interview[data-language=en][data-template=important],.letter-template-interview[data-language=en][data-template=important] .letter-paper{background-image:url("assets/interview-parents-en.png?v=parents-20261016")}
.letter-template-interview[data-language=fi][data-template=important],.letter-template-interview[data-language=fi][data-template=important] .letter-paper{background-image:url("assets/interview-parents-fi.png?v=parents-20261016")}
.letter-template-interview[data-language=pl][data-template=important],.letter-template-interview[data-language=pl][data-template=important] .letter-paper{background-image:url("assets/interview-parents-pl.png?v=parents-20261016")}
.letter-template-interview[data-language=es][data-template=important],.letter-template-interview[data-language=es][data-template=important] .letter-paper{background-image:url("assets/interview-parents-es.png?v=parents-20261016")}
.letter-template-interview[data-language=de][data-template=important],.letter-template-interview[data-language=de][data-template=important] .letter-paper{background-image:url("assets/interview-parents-de.png?v=parents-20261016")}
.letter-template-interview[data-language=en][data-template=apology],.letter-template-interview[data-language=en][data-template=apology] .letter-paper{background-image:url("assets/interview-sorry-en.png?v=sorry-20261016")}
.letter-template-interview[data-language=en][data-template=sorry],.letter-template-interview[data-language=en][data-template=sorry] .letter-paper{background-image:url("assets/interview-sorry-en.png?v=sorry-20261016")}
.letter-template-interview[data-language=fi][data-template=apology],.letter-template-interview[data-language=fi][data-template=apology] .letter-paper{background-image:url("assets/interview-sorry-fi.png?v=sorry-20261016")}
.letter-template-interview[data-language=fi][data-template=sorry],.letter-template-interview[data-language=fi][data-template=sorry] .letter-paper{background-image:url("assets/interview-sorry-fi.png?v=sorry-20261016")}
.letter-template-interview[data-language=pl][data-template=apology],.letter-template-interview[data-language=pl][data-template=apology] .letter-paper{background-image:url("assets/interview-sorry-pl.png?v=sorry-20261016")}
.letter-template-interview[data-language=pl][data-template=sorry],.letter-template-interview[data-language=pl][data-template=sorry] .letter-paper{background-image:url("assets/interview-sorry-pl.png?v=sorry-20261016")}
.letter-template-interview[data-language=es][data-template=apology],.letter-template-interview[data-language=es][data-template=apology] .letter-paper{background-image:url("assets/interview-sorry-es.png?v=sorry-20261016")}
.letter-template-interview[data-language=es][data-template=sorry],.letter-template-interview[data-language=es][data-template=sorry] .letter-paper{background-image:url("assets/interview-sorry-es.png?v=sorry-20261016")}
.letter-template-interview[data-language=de][data-template=apology],.letter-template-interview[data-language=de][data-template=apology] .letter-paper{background-image:url("assets/interview-sorry-de.png?v=sorry-20261016")}
.letter-template-interview[data-language=de][data-template=sorry],.letter-template-interview[data-language=de][data-template=sorry] .letter-paper{background-image:url("assets/interview-sorry-de.png?v=sorry-20261016")}
/* Halve the vertical spacing around the letter choices. */
.writer-page .letter-sheets{padding-top:14px;padding-bottom:6px}
@media(max-width:900px){.writer-page .letter-sheets{padding-top:11px;padding-bottom:5px}}

/* Form titles replace the printed letterhead; PDF templates remain separate. */
.letter-template-interview .letter-paper{grid-template-rows:6rem minmax(6.25rem,auto) minmax(0,1fr) 8rem}
.letter-template-interview .interview-header{padding-left:8rem;padding-right:1rem;align-content:center}
.letter-template-interview[data-language=en] .letter-paper{background-image:url("assets/form-background-en.png")!important}
.letter-template-interview[data-language=fi] .letter-paper{background-image:url("assets/form-background-fi.png")!important}
.letter-template-interview[data-language=pl] .letter-paper{background-image:url("assets/form-background-pl.png")!important}
.letter-template-interview[data-language=es] .letter-paper{background-image:url("assets/form-background-es.png")!important}
.letter-template-interview[data-language=de] .letter-paper{background-image:url("assets/form-background-de.png")!important}

/* Center form headings on the sheet and clear the dove. */
.letter-template-interview .interview-header{padding-left:.5em;padding-right:.5em}
.letter-template-interview .interview-body{padding-top:5mm;box-sizing:border-box}

/* Expand nickname editing only on request. */
.profile-name-editor{margin:20px 0}.profile-name-editor summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;font-weight:600;min-height:44px;width:fit-content}.profile-name-editor summary::-webkit-details-marker{display:none}.profile-name-editor summary svg{flex-shrink:0}.profile-name-editor summary:focus-visible{outline:2px solid currentColor;outline-offset:4px}.profile-name-editor[open] .profile-name-row{margin-top:12px}

/* Place the Chat title directly below the menu. */
body[data-view='chat'] main#app{padding-top:0}


/* Chat and Letters headings meet the navigation bar. */
body:is([data-view='chat'],[data-view='children']) main#app{padding-top:0;margin-top:0}
body:is([data-view='chat'],[data-view='children']) main#app>.chat-writer-page,body[data-view='children'] main#app>.writer-page{padding-top:0;margin-top:0}


/* Compact language trigger with larger tap targets in its dropdown. */
header nav .menu-language{position:relative;align-self:center;flex:0 0 auto}
header nav .menu-language summary{display:flex;align-items:center;justify-content:center;width:44px;min-height:44px;cursor:pointer;list-style:none;border-radius:5px}
header nav .menu-language summary::-webkit-details-marker{display:none}
header nav .menu-language summary svg{width:30px;height:20px;border:1px solid #bcae98;border-radius:2px}
header nav .menu-language summary:focus-visible{outline:2px solid #d1ad73;outline-offset:2px}
header nav .menu-language-choices{position:absolute;right:0;top:100%;z-index:1000;padding:8px;background:#fffaf0;border:1px solid #c8b796;border-radius:8px;box-shadow:0 8px 24px #0004;display:flex;flex-direction:column;gap:4px}
header nav .menu-language:not([open]) .menu-language-choices{display:none}
header nav .menu-language-choices .language-flag{display:flex;align-items:center;justify-content:center;width:64px;min-height:48px;padding:6px;border:1px solid transparent;border-radius:5px;background:transparent;cursor:pointer}
header nav .menu-language-choices .language-flag svg{display:block;width:44px;height:30px;border:1px solid #bcae98;border-radius:2px}
header nav .menu-language-choices .language-flag:hover,header nav .menu-language-choices .language-flag:focus-visible{background:#eee1cd;outline:2px solid #a78046}
header nav .menu-language-choices .language-flag[aria-pressed="true"]{border-color:#a78046;background:#f2e7d3}

/* Access first, account details beneath the separator. */
.account-form>.full-access-offer{border-top:0;margin-top:0;padding-top:0}.account-form>.full-access-offer+#profile-details{border-top:1px solid var(--line);margin-top:26px;padding-top:24px}

/* Restore the native disclosure arrow before the settings label. */
.profile-name-editor summary{display:list-item;list-style:disclosure-closed inside}.profile-name-editor[open]>summary{list-style-type:disclosure-open}.profile-name-editor summary::-webkit-details-marker{display:inline-block}


/* Explicit settings disclosure indicator across browsers. */
.profile-name-editor>summary{display:flex;align-items:center;gap:8px;list-style:none}.profile-name-editor>summary::-webkit-details-marker{display:none}.profile-name-editor>summary::marker{content:''}.profile-name-editor>summary::before{content:'\25B6';display:inline-block;flex:0 0 auto;font-size:.75em;line-height:1}.profile-name-editor[open]>summary::before{transform:rotate(90deg)}


/* Emphasize the main navigation in every language. */
header nav > a{font-weight:700}


/* Satin OPEN lettering above the knot on unopened books. */
.cover-ribbon::after{content:"OPEN";position:absolute;left:73.67%;top:2.5cqw;transform:translateX(-50%);font-family:Arial,sans-serif;font-size:2.76cqw;font-weight:800;line-height:1;letter-spacing:.08em;background:linear-gradient(165deg,#780d25 5%,#d93651 25%,#ffc1c8 43%,#e66379 49%,#a61432 72%,#650b22);background-clip:text;-webkit-background-clip:text;color:transparent;filter:drop-shadow(0 1px .4px #300410aa);pointer-events:none}

/* Plain lettering keeps the story ribbon label clear against bright covers. */
.story-book.book-link>.cover-ribbon::after{background:none;-webkit-text-fill-color:#780d25;color:#780d25;filter:none}

/* Matching listen/read outline icons, after the translated label. */
.story-full>summary::after{content:"";display:inline-block;width:2em;height:2em;margin-left:.6em;vertical-align:middle;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23222%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%205v15M12%205C9%203%205%203%202%204v15c3-1%207-1%2010%201%203-2%207-2%2010-1V4c-3-1-7-1-10%201Z%22%2F%3E%3Cpath%20d%3D%22M5%207c1.5-.2%203%200%204%20.5M15%207.5c1-.5%202.5-.7%204-.5%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
.story-full.story-audio>summary::after{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23222%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209a6%206%200%200%201%2012%200c0%204-4%204.5-4%208a4%204%200%200%201-8%200%22%2F%3E%3Cpath%20d%3D%22M9%209a3%203%200%200%201%206%200c0%202-3%202-3%204%22%2F%3E%3C%2Fsvg%3E")}

/* Keep mobile shelf controls legible against the detailed backgrounds. */
@media(max-width:900px){.phone-shelf-arrows .btn{background:#c7a574;color:#35291f;border:1px solid #b99d6b;box-shadow:0 2px 6px #0004;opacity:1}.phone-shelf-arrows .btn:hover:not(:disabled){background:#d4b68d}.phone-shelf-arrows .btn:disabled{opacity:1;background:#ded5c5;color:#8c8275;border-color:#b6aa96;box-shadow:none}.phone-shelf-arrows .btn:focus-visible{outline:3px solid #d1ad73;outline-offset:3px}}

/* Story shelf arrows use a light-blue background. */
@media(max-width:900px){body[data-view="stories"] .phone-shelf-arrows .btn{background:#dcecf5}body[data-view="stories"] .phone-shelf-arrows .btn:hover:not(:disabled){background:#e8f3fa}body[data-view="stories"] .phone-shelf-arrows .btn:disabled{background:#dcecf5;color:#8598a5;border-color:#afc4d1}}

/* Keep the profile introduction readable when a portrait would become too small. */
@media(max-width:549px){html:root .account-draft .welcome-story{grid-template-columns:minmax(0,1fr);gap:0;min-height:0;padding:22px 20px}html:root .account-draft .welcome-story .profile-portrait{display:none}html:root .account-draft .welcome-story .profile-invitation{grid-column:1;width:auto;padding:0}html:root .account-draft .welcome-story .profile-invitation p:last-child{margin-bottom:0}}