@font-face{font-family:'AL Brand';src:url('assets/al-Bold.otf') format('opentype');font-weight:700;font-display:swap}
@font-face{font-family:'AL Brand';src:url('assets/al-Medium.otf') format('opentype');font-weight:500;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url('assets/jakarta-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url('assets/jakarta-700.ttf') format('truetype');font-weight:700;font-display:swap}
:root{--cream:#fff9f4;--ink:#29221e;--muted:#66584d;--rose:#e11d48;--vh:1vh;--chapter-height:72vh;color-scheme:light}
*{box-sizing:border-box}html{background:var(--cream);color:var(--ink);scroll-behavior:smooth;scrollbar-color:#d6c2ab var(--cream)}body{margin:0;font-family:'Plus Jakarta Sans',sans-serif;overflow-x:clip}button,a,summary{-webkit-tap-highlight-color:transparent}button{font:inherit}a{color:inherit}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--rose);outline-offset:6px;border-radius:4px}button,summary{cursor:pointer}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:20px;top:-80px;z-index:100;padding:14px 20px;background:white}.skip-link:focus{top:20px}
.site-header{position:fixed;z-index:30;top:0;left:0;width:100%;display:flex;justify-content:space-between;align-items:flex-start;padding:32px 5.3vw;pointer-events:none}.site-header a,.site-header details{pointer-events:auto}.brand{display:block;width:112px;text-decoration:none}.brand img{display:block;width:100%;height:auto}
#story-menu{position:relative}#story-menu summary{list-style:none;display:flex;gap:15px;align-items:center;font-size:14px;padding:12px 16px;background:#fff9f4d9;border-radius:25px;backdrop-filter:blur(10px);user-select:none}#story-menu summary::-webkit-details-marker{display:none}#story-menu summary>span{font-size:22px;line-height:.8;transition:transform .2s}#story-menu[open] summary>span{transform:rotate(45deg)}.menu-panel{position:absolute;right:0;top:58px;width:255px;border:1px solid #d1baa43a;background:#fffaf6f7;backdrop-filter:blur(24px);padding:18px 22px;border-radius:18px;box-shadow:0 15px 70px #533d2720}.menu-panel nav{display:grid}.menu-panel nav a{display:block;text-decoration:none;font-size:14px;padding:11px 0;color:#66513f}.menu-panel nav a[aria-current],.menu-panel nav a:hover{color:var(--rose)}#motion-toggle{margin-top:13px;padding:14px 0 0;width:100%;border:0;border-top:1px solid #d8c7b6;background:transparent;color:#66513f;text-align:left;font-size:14px;display:flex;align-items:center;gap:10px}#motion-toggle>span:first-child{font-size:22px}
#world{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .5s}#world canvas{width:100%;height:100%;display:block}.immersive #world{opacity:1}.reading-wash{position:fixed;inset:0;pointer-events:none;z-index:1;background:linear-gradient(90deg,#fff9f4fa 0%,#fff9f4f7 25%,#fff9f4a6 36%,#fff9f410 50%,transparent 59%);opacity:0}.immersive .reading-wash{opacity:var(--wash-opacity,1)}.immersive[data-shot-kind=age] .reading-wash{opacity:0}
#journey{position:relative;z-index:2}.chapter{position:relative;min-height:100svh;padding:140px 6.3vw 100px;display:flex;align-items:center;gap:40px}.chapter-copy{width:38%;max-width:560px;position:relative;z-index:2}.chapter h1,.chapter h2{font-family:'AL Brand',serif;font-size:clamp(42px,4.8vw,70px);font-weight:700;letter-spacing:-.042em;line-height:1.06;margin:0;text-wrap:balance}.heading-context{display:block;font-weight:500;font-size:.55em;letter-spacing:-.02em;line-height:1.2;margin-bottom:22px;color:#8a684e}.child-picker{display:flex;align-items:center;gap:12px;margin-bottom:24px;color:#725d4c;font-size:13px;font-weight:700}.child-picker>div{display:inline-flex;padding:3px;border:1px solid #d5c1ae;background:#fffaf4d9;border-radius:999px;backdrop-filter:blur(10px)}.child-picker button{border:0;background:transparent;color:#725d4c;padding:7px 12px;border-radius:999px;font-size:13px;font-weight:700}.child-picker button[aria-pressed=true]{background:var(--ink);color:white;box-shadow:0 2px 8px #29221e1f}.begin-link{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;font-size:29px;text-decoration:none;margin-top:24px}.begin-link:hover,.replay:hover{color:var(--rose)}.primary-button{display:inline-flex;gap:28px;justify-content:center;align-items:center;padding:17px 26px;background:var(--rose);color:white;font-size:16px;font-weight:700;text-decoration:none;border-radius:13px;margin-top:30px;box-shadow:0 8px 26px #e11d4817}.primary-button:hover{background:#be123c}.replay{display:block;width:44px;height:44px;text-align:center;font-size:26px;color:var(--muted);text-decoration:none;line-height:44px;margin-top:10px}
.still-art{position:relative;width:56%;height:65svh;max-height:620px;background-repeat:no-repeat;background-size:contain;background-position:center;flex-shrink:0}.art-timeout{background-image:url('assets/timeout-child.webp')}.art-bedtime{background-image:url('assets/bedtime-family.webp')}.art-six{background-image:url('assets/classroom-child.webp')}.art-sixteen{background-image:url('assets/party-teen.webp')}.art-twentysix{background-image:url('assets/job-adult.webp')}.art-thirtysix{background-image:url('assets/next-generation.webp')}
body[data-child=boy] .art-timeout{background-image:url('assets/timeout-boy-v2.webp')}body[data-child=boy] .art-bedtime{background-image:url('assets/bedtime-boy-v2.webp')}body[data-child=boy] .art-six{background-image:url('assets/classroom-boy-v2.webp')}body[data-child=boy] .art-sixteen{background-image:url('assets/party-boy-v2.webp')}body[data-child=boy] .art-twentysix{background-image:url('assets/job-boy-v2.webp')}body[data-child=boy] .art-thirtysix{background-image:url('assets/next-generation-boy-v2.webp')}
.immersive .chapter{height:var(--chapter-height);min-height:0;display:block;padding:0}.immersive .chapter:last-child{height:calc(var(--vh)*100)}.immersive .chapter-copy{position:fixed;left:6.3vw;top:50%;width:36vw;max-width:540px;transform:translateY(-38%) translateY(var(--headline-y,0px));opacity:0;visibility:hidden;pointer-events:none;will-change:opacity,transform}.immersive .chapter.is-active .chapter-copy{visibility:visible;pointer-events:auto}.immersive .still-art{display:none}
.age-card{justify-content:center;text-align:center}.age-card .chapter-copy{width:100%;max-width:none}.age-card h2{font-size:clamp(25px,2.2vw,34px);font-weight:500;letter-spacing:-.015em;line-height:1.18;color:#8a684e}.age-number{display:block;font-size:clamp(54px,7vw,100px);font-weight:500;letter-spacing:-.055em;line-height:1.02;color:#6c472b;margin-top:12px}.immersive .age-card .chapter-copy{left:0;top:40%;width:100%;max-width:none;transform:translateY(-50%) translateY(var(--headline-y,0px))}
.story-status{position:fixed;z-index:28;right:5.3vw;bottom:31px;width:min(300px,30vw);color:#725d4c;font-size:12px;letter-spacing:.02em}.story-status-copy{display:flex;align-items:center;gap:10px;margin-bottom:10px}.status-rule{height:1px;flex:1;background:#bda99080}.step-dots{display:grid;grid-template-columns:repeat(15,1fr);gap:4px}.step-dots i{display:block;height:3px;border-radius:2px;background:#d8c9b9;transition:background .25s,transform .25s}.step-dots i.is-past{background:#b38c65}.step-dots i.is-current{background:var(--rose);transform:scaleY(2)}.story-status.did-advance .story-status-copy{animation:status-arrive .36s ease-out}@keyframes status-arrive{from{opacity:.35;transform:translateY(4px)}to{opacity:1;transform:none}}
.journey-progress{position:fixed;left:0;bottom:0;width:100%;height:3px;z-index:30;background:#eadfd4}#progress-fill{height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:#b38c65}.loading-note{position:fixed;bottom:24px;right:24px;z-index:40;background:var(--cream);border-radius:12px;padding:10px 14px;font-size:13px;color:#826b58}.loading-note.is-done{display:none}.reading-mode .site-header{background:#fff9f4e6;backdrop-filter:blur(12px)}.reading-mode .chapter-copy{opacity:1!important;visibility:visible!important;transform:none!important}.reading-mode .story-status{display:none}
@media(max-height:760px) and (min-width:761px){.chapter h1,.chapter h2{font-size:clamp(40px,4.2vw,57px)}.age-card h2{font-size:25px}.site-header{padding-top:25px}}
@media(max-width:760px){.site-header{padding:25px 24px}.brand{width:94px}#story-menu summary{font-size:13px;padding:9px 12px;gap:10px}.menu-panel{top:47px;width:250px;padding:16px 22px;max-height:calc(100svh - 120px);overflow:auto}.chapter{padding:130px 25px 60px;flex-direction:column;gap:25px;align-items:stretch;min-height:100svh}.chapter-copy{width:100%;max-width:none}.chapter h1,.chapter h2{font-size:clamp(34px,10.3vw,46px);line-height:1.08}.heading-context{font-size:23px;margin-bottom:20px}.child-picker{align-items:flex-start;flex-direction:column;gap:8px;margin-bottom:18px}.child-picker button{padding:6px 11px}.begin-link{margin-top:12px}.still-art{width:100%;height:53svh;max-height:560px}.immersive .chapter-copy{left:25px;top:14%;width:calc(100% - 50px);max-width:none;transform:translateY(var(--headline-y,0px))}.immersive .reading-wash{background:linear-gradient(180deg,#fff9f4fc 0px,#fff9f4f2 calc(var(--copy-bottom,270px) - 16px),#fff9f408 calc(var(--copy-bottom,270px) + 38px),transparent calc(var(--copy-bottom,270px) + 80px))}.age-card h2{font-size:23px}.age-number{font-size:clamp(48px,14vw,64px)}.immersive .age-card .chapter-copy{top:40%;left:0;width:100%;transform:translateY(-50%) translateY(var(--headline-y,0px))}.story-status{right:24px;bottom:24px;width:calc(100% - 48px);font-size:11px}.story-status-copy{margin-bottom:8px}.primary-button{font-size:15px;padding:15px 22px;margin-top:25px}.replay{font-size:24px}.reading-mode .age-card{justify-content:center;min-height:68svh}.reading-mode .age-card .chapter-copy{width:100%}.loading-note{right:15px;bottom:30px;font-size:12px}}
@media(max-width:380px){.chapter h1,.chapter h2{font-size:34px}.heading-context{font-size:21px}.age-card h2{font-size:22px}.age-number{font-size:46px}}
@media(max-height:600px) and (orientation:landscape){.site-header{padding-top:20px}.immersive .chapter-copy{top:37%;transform:translateY(-25%) translateY(var(--headline-y,0px))}.chapter h1,.chapter h2{font-size:32px}.heading-context{font-size:20px;margin-bottom:16px}.age-card h2{font-size:22px}.age-number{font-size:125px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}