@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600&family=Manrope:wght@400;500;600;700&family=Literata:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');
:root{--forest:#244d40;--ink:#29362f;--muted:#747b6f;--accent:#a16d38;--paper:#faf8ee}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}body{background:#24362c;color:var(--ink);font-family:Manrope,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;font:inherit;color:inherit;border:0;background:none}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #b77b3c;outline-offset:3px}button:disabled{opacity:.25;cursor:default}[hidden]{display:none!important}#landscape{position:fixed;inset:0;background:url('assets/screen-landscape.webp') center/cover no-repeat;pointer-events:none}#screen{position:fixed;left:var(--sx);top:var(--sy);width:var(--sw);height:var(--sh);background:var(--paper);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;isolation:isolate}header{height:64px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid #254b4014}.brand{font-weight:700;font-size:23px;letter-spacing:-1px;display:flex;align-items:center}.brand>span:first-child{color:#a16d38}.brand-caption{font-size:13px;font-weight:500;letter-spacing:.2px;margin-left:16px;padding-left:16px;border-left:1px solid #b8b7a6}#menu{font-size:13px;color:var(--forest);display:flex;gap:13px;align-items:center}#menu span{font-size:16px}.slide{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:60% 40%;padding:26px 34px 12px;gap:10px}.slide:after{content:'';position:absolute;width:180px;height:180px;border:1px solid #a89f7c28;border-radius:50%;right:-85px;top:-85px;pointer-events:none}#text-panel{min-height:0;position:relative;z-index:2;padding-right:6px;overflow:hidden}.eyebrow{font-size:12px;letter-spacing:1.7px;text-transform:uppercase;color:var(--accent);font-weight:600;margin:0 0 12px}h1{font:500 clamp(26px,2.7vw,43px)/1.13 Literata,Georgia,serif;letter-spacing:-1.1px;margin:0 0 17px;max-width:620px}h1 em{font-weight:400;color:var(--forest)}#copy{font:400 16px/1.58 Manrope,sans-serif;color:#49544c}#copy p{margin:0 0 13px}#copy p:last-child{margin-bottom:0}#copy strong{color:var(--forest);font-weight:700}#copy .feature{padding:9px 0 9px 16px;border-left:2px solid #a98750;background:linear-gradient(90deg,#e9ede26b,transparent)}#copy .statement{font:400 23px/1.4 Literata,Georgia,serif;color:var(--forest);padding-left:18px;border-left:2px solid #b6884b}.hero h1{font-size:clamp(38px,4.2vw,63px);line-height:1.05;margin-bottom:17px}.hero #copy{font-size:17px;line-height:1.65}.hero #copy p:first-child{font:400 23px/1.4 Literata,serif;color:var(--forest)}#hero-actions{display:flex;gap:18px;align-items:center;margin-top:24px}.primary{display:flex;gap:22px;align-items:center;background:var(--forest);color:#fffdf1;border-radius:5px;font-size:14px;padding:14px 18px;box-shadow:0 5px 15px #254c4020;white-space:nowrap}.primary:hover{background:#32634f}.primary span{font-size:20px}#hero-actions>span{font-size:12px;line-height:1.5;color:var(--muted)}#art-panel{position:relative;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center}#art{display:block;max-width:100%;width:100%;height:calc(100% - 38px);object-fit:contain;mix-blend-mode:multiply}#art-caption{font:italic 400 15px/1.4 Literata,Georgia,serif;color:#747a67;text-align:center;margin:7px 10px 0;max-width:250px}#art-index{position:absolute;right:0;top:0;font:400 66px/1 Literata,serif;color:#a58a4d15;z-index:-1}footer{height:60px;flex-shrink:0;display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 34px;border-top:1px solid #254b4024}.navigation{display:flex;align-items:center;gap:9px}.navigation button{height:35px;width:35px;border:1px solid #b4c0b1;border-radius:50%;font-size:21px;color:var(--forest)}.navigation button:hover:not(:disabled){background:#e7eddf}#counter{font-size:12px;min-width:47px;text-align:center;font-variant-numeric:tabular-nums;color:#6f7b6f}#progress{display:flex;gap:5px}#progress button{padding:0;width:17px;height:3px;background:#d6d9ca;border-radius:2px}#progress button.active{background:var(--forest)}.contact{font-size:13px;font-weight:600;color:var(--forest);white-space:nowrap}.contact span{margin-left:6px;color:var(--accent)}.outside-author{position:fixed;bottom:26px;left:30px;color:#fff8dc;font-size:12px;text-shadow:0 1px 6px #17291c;background:#223b2b9c;padding:8px 12px;border-radius:3px}.outside-signature{position:fixed;bottom:30px;right:30px;color:#fff8dc;font-size:11px;text-shadow:0 1px 6px #17291c}.slide.enter{animation:slideIn .43s cubic-bezier(.22,.65,.27,1) both}@keyframes slideIn{from{opacity:0;transform:translateX(var(--direction,28px))}to{opacity:1;transform:translateX(0)}}dialog{border:0;border-radius:10px;padding:36px;max-width:min(620px,90vw);max-height:88dvh;overflow:auto;background:var(--paper);color:var(--ink);box-shadow:0 20px 100px #0005}dialog::backdrop{background:#172d26bd;backdrop-filter:blur(7px)}dialog h2{font:400 31px/1.2 Literata,serif;margin:10px 0 25px}dialog h2 em{color:var(--forest)}.close{position:absolute;right:15px;top:12px;font-size:28px}#contents-list{display:grid;grid-template-columns:1fr 1fr;gap:3px 22px}#contents-list button{padding:13px 0;text-align:left;border-bottom:1px solid #d3d8c7;font-size:14px}#contents-list button span{color:var(--accent);font-size:12px;margin-right:12px}#contents-list button.active{color:var(--accent)}#about-link{margin-top:25px;font-size:13px;text-decoration:underline}#about p:not(.eyebrow){font-size:16px;line-height:1.7}#about a{display:inline-block;margin-top:16px;color:var(--forest);text-decoration:underline;font-size:14px}.continuation h1{font-size:27px}.continuation .eyebrow{margin-bottom:8px}
@media(min-width:1600px){header{height:78px}.slide{padding:35px 48px 20px}#copy{font-size:18px;line-height:1.7}footer{height:74px;margin:0 48px}header{padding:0 48px}.hero #copy{font-size:19px}}
@media(max-width:1000px){header{height:53px;padding:0 24px}.slide{padding:19px 24px 10px;grid-template-columns:62% 38%}footer{height:53px;margin:0 24px}h1{font-size:28px}#copy{line-height:1.5}.hero h1{font-size:39px}.hero #copy p:first-child{font-size:20px}#hero-actions{margin-top:17px}.primary{font-size:13px;padding:11px 14px}#hero-actions>span{display:none}.contact{font-size:12px}#progress button{width:11px}.brand-caption{font-size:12px}#art-caption{font-size:13px}}
@media(max-width:650px){#screen{left:5%!important;top:8%!important;width:90%!important;height:82%!important;outline:9px solid #242720;border-radius:13px;box-shadow:0 20px 50px #10170d80}#landscape{background-position:center}header{height:55px;padding:0 19px}.brand{font-size:21px}.brand-caption{font-size:12px;margin-left:10px;padding-left:10px}#menu{font-size:0;gap:0}#menu span{font-size:19px}.slide{display:block;padding:20px 22px 12px}#text-panel{height:100%;padding:0}#art-panel{position:absolute;right:14px;bottom:8px;width:32%;height:29%;opacity:.16;pointer-events:none}#art-caption,#art-index{display:none}#art{height:100%}h1{font-size:29px;letter-spacing:-.6px;margin-bottom:16px}.hero h1{font-size:45px}.hero #copy{font-size:16px}.hero #copy p:first-child{font-size:23px}.hero #art-panel{height:41%;width:40%;opacity:.2}.eyebrow{font-size:11px;letter-spacing:1.25px;margin-bottom:14px}#copy{font-size:16px;line-height:1.65}#hero-actions{margin-top:24px}.primary{font-size:14px;padding:12px 15px}footer{height:79px;margin:0 20px;flex-wrap:wrap;justify-content:space-between;align-content:center;gap:9px}#progress{order:3;width:100%;gap:4px}#progress button{flex:1;height:3px}.contact{font-size:11px}.navigation{gap:4px}.navigation button{width:29px;height:29px;font-size:18px}#counter{font-size:11px;min-width:43px}.outside-author{bottom:3%;left:5%;font-size:10px;padding:7px}.outside-signature{display:none}dialog{padding:30px 24px}dialog h2{font-size:27px}#contents-list{gap:0 14px}#contents-list button{font-size:13px;padding:11px 0}.continuation h1{font-size:24px}}
@media(max-height:600px){header{height:42px}.slide{padding-top:12px}h1{font-size:24px;margin-bottom:10px}.eyebrow{margin-bottom:8px;font-size:11px}#copy{line-height:1.45}.hero h1{font-size:35px}.hero #copy p:first-child{font-size:20px}#hero-actions{margin-top:12px}.primary{padding:8px 12px}.continuation h1{font-size:23px}.outside-author,.outside-signature{bottom:8px;font-size:10px}footer{height:50px}}
@media(max-width:650px) and (max-height:600px){#screen{top:6%!important;height:86%!important}.slide{padding:15px 18px 10px}header{height:43px}footer{height:67px}.hero h1{font-size:37px}.hero #copy p:first-child{font-size:20px}.outside-author{bottom:.5%;padding:3px 8px}.hero #art-panel{height:30%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
.hero #art-index{display:none}
@media(min-width:651px) and (max-width:1599px){.hero h1{font-size:42px;line-height:1.08;margin-bottom:14px}.hero #copy p:first-child{font-size:20px;line-height:1.4}.hero #copy{font-size:16px;line-height:1.5}.hero #hero-actions{margin-top:16px}.hero #hero-actions>span{display:none}}
@media(min-width:651px) and (max-height:650px){header{height:44px}.hero h1{font-size:34px}.hero #copy p:first-child{font-size:18px}.hero #copy{font-size:16px;line-height:1.4}.hero #hero-actions{margin-top:12px}}
@media(max-width:650px){.hero h1{font-size:32px;line-height:1.08;letter-spacing:-.6px;margin-bottom:14px}.hero #copy p:first-child{font-size:18px;line-height:1.4}.hero #copy{font-size:16px;line-height:1.5}.hero #hero-actions{margin-top:16px}.hero .eyebrow{font-size:10px;letter-spacing:1px;margin-bottom:12px}.hero .primary{font-size:13px;padding:10px 12px}.hero #art-panel{width:42%;height:35%;opacity:.12}.contact{font-size:12px}#counter{font-size:12px}}
@media(max-width:360px){.brand-caption{font-size:11px}.slide{padding-left:19px;padding-right:19px}.hero h1{font-size:30px}footer{margin:0 15px}.navigation{gap:2px}}
@media(min-width:651px) and (max-aspect-ratio:1/1){#screen{left:5%!important;top:12%!important;width:90%!important;height:76%!important;outline:12px solid #242720;box-shadow:0 20px 50px #10170d80}}

/* Balance complete sections before splitting, preserving readable body type. */
.density-compact{grid-template-columns:67% 33%;gap:12px;padding-top:18px}
.density-compact h1,.density-compact.continuation h1{font-size:28px;line-height:1.13;margin-bottom:12px}
.density-compact .eyebrow{margin-bottom:9px}
.density-compact #copy{font-size:16px;line-height:1.48}
.density-compact #copy p{margin-bottom:10px}
.density-compact #copy .feature{padding:5px 0 5px 13px}
.density-compact #copy .statement{font-size:19px;line-height:1.35}
.density-spacious #copy{font-size:20px;line-height:1.65}
.density-spacious #copy p{margin-bottom:20px}
.density-spacious #copy .statement{font-size:27px;line-height:1.4}
@media(max-width:650px){.density-compact h1,.density-compact.continuation h1{font-size:24px;line-height:1.15}.density-compact #copy{line-height:1.48}.density-compact #copy .statement{font-size:18px}.density-spacious #copy{font-size:18px;line-height:1.6}.density-spacious #copy .statement{font-size:23px}}
@media(max-height:600px){.density-compact h1,.density-compact.continuation h1{font-size:23px}.density-compact{padding-top:12px}.density-spacious #copy{font-size:18px;line-height:1.5}}

@media(max-width:360px) and (max-height:650px){.hero h1,.hero.density-compact h1{font-size:26px;line-height:1.08;margin-bottom:10px}.hero #copy p:first-child{font-size:16px;line-height:1.4}.hero #copy{font-size:16px;line-height:1.4}.hero #hero-actions{margin-top:10px}.hero .primary{white-space:normal;font-size:12px;gap:8px;padding:8px 10px}.density-compact h1,.density-compact.continuation h1{font-size:21px}.continuation h1{font-size:23px}.eyebrow{letter-spacing:.6px}}

#foreground-child{position:fixed;inset:0;background:url('assets/screen-landscape.webp') center/cover no-repeat;pointer-events:none;z-index:3}
.outside-author,.outside-signature{z-index:4}
@media(max-width:650px),(min-width:651px) and (max-aspect-ratio:1/1){#foreground-child{display:none}}

/* Quiet identity and a single invitation at the end of the story. */
.brand{gap:22px;letter-spacing:-.8px}.brand>.brand-logo{color:var(--ink);white-space:nowrap}.brand-logo>span{color:var(--accent)}
.brand-caption{font-family:Caveat,"Segoe Print",cursive;font-size:31px;font-weight:500;line-height:1.1;letter-spacing:0;margin-left:0;padding-left:22px;color:var(--forest)}
.slide.closing{grid-template-rows:minmax(0,1fr) auto;row-gap:16px}
#final-action{grid-column:1/-1;display:flex;justify-content:center;padding:2px 0 6px;position:relative;z-index:2}
.final-contact{font-size:17px;font-weight:600;padding:16px 29px;gap:24px;border-radius:6px;box-shadow:0 6px 18px #244d4026}
.outside-signature{font-size:13px}
@media(max-width:1000px){.brand-caption{font-size:28px}.final-contact{font-size:16px;padding:13px 23px}}
@media(max-width:650px){.brand{gap:12px;font-size:20px}.brand-caption{padding-left:12px;font-size:26px}.slide.closing{display:grid;grid-template-columns:1fr;row-gap:12px}.closing #text-panel{height:auto;min-height:0}.final-contact{font-size:15px;padding:13px 16px;gap:12px;white-space:normal;text-align:center}#final-action{padding:0 0 3px}.outside-author{bottom:4.5%;font-size:10px}.outside-signature{display:block;bottom:1.7%;left:5%;right:auto;font-size:10px;line-height:1.3}.brand-caption{white-space:nowrap}}
@media(max-width:360px){.brand{font-size:18px;gap:9px}.brand-caption{font-size:23px;padding-left:9px}.outside-signature{font-size:9px}.final-contact{font-size:14px;padding:11px 12px}}
@media(max-width:650px) and (max-height:600px){.outside-author{bottom:3%;padding:2px 7px}.outside-signature{bottom:.6%;font-size:9px}}

#walk-clean{position:fixed;inset:0;pointer-events:none;background:url('assets/walk-clean.webp') center/cover no-repeat;opacity:0;transition:opacity .3s ease}
#walking-child{position:fixed;left:var(--walk-left);top:var(--walk-top);width:var(--walk-size);height:var(--walk-size);background:url('assets/walk-atlas.webp') 50% 100%/300% 200% no-repeat;pointer-events:none;z-index:3;opacity:0;transform-origin:50% 70%;will-change:transform}
.boy-walking #walk-clean,.boy-walking #walking-child{opacity:1}.boy-walking #foreground-child{opacity:0}
.boy-arrived #walking-child{opacity:0;transition:opacity .3s ease}.boy-arrived #foreground-child{transition:opacity .3s ease}
@media(prefers-reduced-motion:reduce){#walk-clean,#walking-child{display:none!important}}
@media(max-width:650px),(max-aspect-ratio:1/1){#walk-clean,#walking-child{display:none!important}}

.boy-preparing #walk-clean{opacity:1;transition:none}.boy-preparing #foreground-child{opacity:0}
/* A deliberate choice starts the short entrance and unlocks optional sound. */
.choosing #landscape{background-image:url('assets/walk-clean.webp')}.choosing #foreground-child{opacity:0}.choosing #slide,.choosing #screen>footer{visibility:hidden}
html[data-cover="girl"] #landscape,html[data-cover="girl"] #foreground-child{background-image:url('assets/girl-cover.webp')}
html.choosing[data-cover] #landscape{background-image:url('assets/walk-clean.webp')}
#welcome{position:absolute;inset:64px 0 0;z-index:5;padding:20px 50px 16px;text-align:center;display:flex;flex-direction:column;align-items:center;background:var(--paper)}
#welcome h1{font:500 clamp(27px,3vw,43px)/1.1 Literata,Georgia,serif;max-width:none;margin:0 0 9px;letter-spacing:-.6px}.welcome-intro{font:400 17px/1.4 Literata,serif;margin:0 0 18px;color:#66705e}
.cover-options{display:flex;gap:26px;min-height:0;width:100%;max-width:850px;flex:1}.cover-option{padding:5px;border:1px solid #b7925c;border-radius:12px;min-width:0;flex:1;display:flex;flex-direction:column;overflow:hidden;background:#f2eee1;transition:transform .2s,box-shadow .2s}.cover-option:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 8px 20px #294b4026}.cover-option img{width:100%;height:0;flex:1;min-height:0;object-fit:cover;object-position:center 64%;border-radius:8px}.cover-option>span{display:flex;justify-content:center;gap:24px;background:var(--forest);color:#fffbea;border-radius:6px;font:400 22px/1.2 Literata,serif;padding:13px 15px;margin-top:5px}.cover-option>span>span{font-family:Manrope,sans-serif}
#sound-toggle{flex-shrink:0;font-size:13px;color:var(--forest);padding:11px 15px 4px}#sound-toggle:hover{text-decoration:underline}#entrance-status{font-size:12px;margin:2px 0 0;min-height:17px;color:var(--muted)}
@media(min-width:1600px){#welcome{inset-block-start:78px;padding:30px 65px}}
@media(max-width:1000px){#welcome{inset-block-start:53px;padding:15px 25px 8px}.cover-options{gap:18px}.cover-option>span{font-size:19px;padding:11px}.welcome-intro{margin-bottom:12px}}
@media(max-width:650px){#welcome{inset-block-start:55px;padding:20px 18px 12px}.cover-options{gap:12px;flex-direction:column}.cover-option{flex-direction:row;align-items:stretch;padding:4px}.cover-option img{width:53%;height:100%;flex:none;object-fit:cover;object-position:center 75%}.cover-option>span{flex:1;align-items:center;flex-direction:column;gap:8px;margin:0 0 0 5px;padding:10px 4px;font-size:21px}#welcome h1{font-size:27px}.welcome-intro{font-size:15px;margin-bottom:16px}#sound-toggle{padding-top:12px}}
@media(max-height:650px) and (min-width:651px){#welcome{inset-block-start:44px;padding:10px 35px 6px}#welcome h1{font-size:26px}.welcome-intro{font-size:14px;margin-bottom:10px}.cover-option>span{font-size:17px;padding:8px}#sound-toggle{padding-top:7px}#entrance-status{min-height:12px;font-size:11px}}
@media(max-width:650px) and (max-height:600px){#welcome{inset-block-start:43px;padding:12px 15px 6px}#welcome h1{font-size:24px}.welcome-intro{margin-bottom:10px}.cover-option>span{font-size:18px}#sound-toggle{padding:7px 10px 0}}
@media(max-width:650px),(max-aspect-ratio:1/1),(prefers-reduced-motion:reduce){#sound-toggle{display:none}}