:root{--navy:#11172c;--navy2:#1a2340;--pink:#e8b6c7;--pink-soft:#f7e6eb;--gold:#d8b56e;--gold-light:#f3dfad;--cream:#fff9f1;--ink:#222338;--muted:#767588;--line:rgba(216,181,110,.3);--serif:'Playfair Display',Georgia,serif;--sans:'DM Sans',Arial,sans-serif;--script:'Dancing Script',cursive}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit}.ambient{position:fixed;width:360px;height:360px;border-radius:50%;filter:blur(100px);opacity:.18;pointer-events:none;z-index:-1}.ambient-one{background:#e8b6c7;top:12%;left:-210px}.ambient-two{background:#d8b56e;right:-240px;top:60%}.nav-wrap{height:78px;padding:0 clamp(20px,6vw,88px);display:flex;align-items:center;justify-content:space-between;gap:22px;background:rgba(17,23,44,.97);color:#fff;position:sticky;top:0;z-index:100;border-bottom:1px solid rgba(216,181,110,.22);backdrop-filter:blur(16px)}.brand{display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:2px;white-space:nowrap}.brand b{color:var(--gold)}.brand-mark{display:grid;place-items:center;width:37px;height:37px;border:1px solid var(--gold);border-radius:50%;font-family:var(--serif);font-size:17px;color:var(--gold)}.nav-links{display:flex;gap:clamp(16px,3vw,38px);font-size:12px;color:#e4e1e6}.nav-links a{transition:color .2s}.nav-links a:hover{color:var(--gold)}.music-toggle{display:flex;align-items:center;gap:8px;border:1px solid rgba(216,181,110,.55);border-radius:30px;padding:8px 13px;background:transparent;color:#fff;font-size:11px;cursor:pointer;white-space:nowrap}.music-icon{font-size:18px;color:var(--gold)}.music-toggle[aria-pressed=true] .music-icon{animation:musicPulse 1s ease-in-out infinite}.hero{min-height:660px;background:radial-gradient(ellipse at 78% 48%,#28304b 0%,#171e37 34%,var(--navy) 72%);color:#fff;position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:65px clamp(24px,8vw,120px) 90px;gap:24px;overflow:hidden}.hero:after{content:"";position:absolute;inset:0;background-image:radial-gradient(#f3dfad 1px,transparent 1px);background-size:65px 65px;opacity:.12;pointer-events:none}.hero-copy,.hero-art{position:relative;z-index:2}.hero-copy{max-width:600px}.eyebrow,.section-kicker{font-size:10px;font-weight:700;letter-spacing:2.5px;color:var(--gold);display:flex;align-items:center;gap:12px}.eyebrow-line{display:inline-block;width:25px;height:1px;background:var(--gold)}h1,h2,h3,p{margin-top:0}h1{font:600 clamp(48px,6.5vw,88px)/1.06 var(--serif);letter-spacing:-2px;margin:25px 0 10px}h1 em,h2 em{font-weight:500;color:var(--pink);font-family:var(--script);letter-spacing:0}.gold-text{color:var(--gold-light)}.hero-name{font-size:16px;letter-spacing:2px;color:#f2dfe5;margin-bottom:18px}.hero-description{max-width:490px;font-size:14px;line-height:1.95;color:#d0d0dc}.hero-actions{display:flex;align-items:center;gap:25px;flex-wrap:wrap;margin-top:28px}.button{display:inline-flex;align-items:center;justify-content:center;gap:15px;padding:14px 20px;border-radius:4px;border:1px solid transparent;font-size:12px;font-weight:700;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s}.button:hover{transform:translateY(-3px)}.button-gold{background:linear-gradient(120deg,#f2dfad,#d0a653);color:#211d2c;box-shadow:0 9px 28px rgba(216,181,110,.15)}.button-gold:hover{box-shadow:0 12px 35px rgba(216,181,110,.3)}.text-link{font-size:12px;color:#eee;display:inline-flex;gap:10px;align-items:center}.text-link span{color:var(--gold)}.hero-note{margin-top:38px;display:flex;gap:10px;align-items:center;color:#a7a8b9;font-size:10px;letter-spacing:.3px}.note-star{color:var(--gold);font-size:19px}.hero-art{min-height:420px;display:grid;place-items:center}.birthday-emblem{width:min(100%,480px);max-height:420px;object-fit:contain;filter:drop-shadow(0 22px 45px rgba(0,0,0,.25));animation:float 6s ease-in-out infinite;position:relative;z-index:2}.art-orbit{position:absolute;border:1px solid rgba(216,181,110,.25);border-radius:50%;width:390px;height:390px}.orbit-two{width:310px;height:310px;border-style:dashed;opacity:.6}.art-spark{position:absolute;color:var(--gold-light);z-index:3;animation:twinkle 2.5s ease-in-out infinite}.spark-one{top:15%;right:16%;font-size:24px}.spark-two{left:12%;top:28%;font-size:34px;animation-delay:.8s}.spark-three{bottom:17%;right:22%;font-size:20px;animation-delay:1.3s}.art-caption{position:absolute;bottom:1%;right:7%;display:flex;flex-direction:column;align-items:flex-end;color:#d9d5e0}.art-caption span{font-size:8px;letter-spacing:2px}.art-caption b{font:500 26px var(--script);color:var(--gold-light)}.scroll-cue{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;font-size:8px;letter-spacing:2px;color:#a9a9b9;z-index:3}.scroll-cue span{height:24px;width:1px;background:var(--gold)}.section-shell{max-width:1120px;margin:auto;padding:100px 30px}.intro{padding-top:112px;padding-bottom:100px}.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(35px,8vw,100px);margin-top:28px}.intro h2,.section-heading h2,.poetry-side h2,.birthday-note h2{font:600 clamp(34px,4.5vw,54px)/1.2 var(--serif);letter-spacing:-1.4px;margin:0}.intro h2 em,.section-heading h2 em,.poetry-side h2 em,.birthday-note h2 em{color:#bd8d4a}.gold-rule{height:2px;width:64px;background:var(--gold);margin-top:26px}.intro-copy p{font-size:14px;color:#656476;line-height:2}.signature{font:600 26px var(--script);color:#b58547}.quote-band{background:var(--pink-soft);padding:60px 24px;text-align:center;position:relative}.quote-mark{font:80px/.8 var(--serif);color:#d1a45c;display:block}.quote-band p{max-width:720px;margin:10px auto 20px;font:500 clamp(20px,2.7vw,30px)/1.55 var(--serif);color:#3a3441}.quote-credit{font-size:9px;letter-spacing:2px;color:#98774b}.court-section{padding-top:105px;padding-bottom:110px}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:35px}.section-heading h2{margin-top:14px}.section-heading>p{max-width:300px;font-size:12px;line-height:1.9;color:var(--muted);margin-bottom:5px}.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.case-card{padding:25px 23px;background:#fff;border:1px solid #eee5d9;box-shadow:0 10px 35px rgba(29,28,44,.035);transition:transform .25s,border-color .25s}.case-card:hover{transform:translateY(-5px);border-color:#d9bd85}.case-number{font-size:9px;letter-spacing:1.7px;color:#8d8995;border-bottom:1px solid #eee8df;padding-bottom:15px}.case-number span{color:#b38b4d}.case-icon{font-size:27px;color:#bd985b;margin:23px 0 9px}.case-card h3{font:600 22px/1.3 var(--serif);margin-bottom:12px}.case-summary{font-size:12px;line-height:1.8;color:var(--muted);min-height:66px}.case-toggle{width:100%;display:flex;justify-content:space-between;align-items:center;background:transparent;border:0;border-top:1px solid #eee8df;padding:15px 0 0;margin-top:14px;color:#8b6736;font-size:11px;font-weight:700;cursor:pointer;text-align:left}.case-toggle span{font-size:18px}.case-details{padding-top:13px;font-size:12px;line-height:1.8;color:#646173}.case-details p{margin-bottom:10px}.court-footnote{text-align:center;color:#9993a0;font-size:10px;margin:27px 0 0}.eighteen-section{background:var(--navy);color:#fff;padding:95px 0 100px;position:relative;overflow:hidden}.eighteen-section:before{content:"18";position:absolute;right:-15px;top:-125px;font:700 380px/.9 var(--serif);color:rgba(255,255,255,.025);pointer-events:none}.eighteen-section .section-shell{padding-top:0;padding-bottom:0;position:relative;z-index:1}.eighteen-heading h2 em{color:var(--pink)}.eighteen-heading>p{color:#b6b7c5}.things-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.thing-card{min-height:145px;padding:16px 12px;display:flex;flex-direction:column;justify-content:space-between;text-align:left;border:1px solid rgba(216,181,110,.28);background:rgba(255,255,255,.035);color:#fff;cursor:pointer;transition:background .25s,transform .25s,border-color .25s;position:relative;overflow:hidden}.thing-card:hover,.thing-card:focus-visible{background:rgba(216,181,110,.1);border-color:var(--gold);transform:translateY(-3px);outline:none}.thing-number{font:500 25px var(--serif);color:var(--gold)}.thing-prompt{font-size:10px;line-height:1.5;color:#d6d5df}.thing-card.revealed{background:#f4e6e9;color:var(--navy);border-color:var(--pink)}.thing-card.revealed .thing-number{color:#a8793d}.thing-card.revealed .thing-prompt{color:#3f3b4a}.grid-hint{text-align:center;color:#a9a9ba;font-size:10px;letter-spacing:1px;margin:26px 0 0}.poetry-section{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center;padding-top:110px;padding-bottom:110px}.poetry-side{position:relative}.poetry-side h2{margin:15px 0}.poetry-side>p{font-size:13px;color:var(--muted);max-width:240px}.poetry-flower{font-size:100px;color:#d9b879;opacity:.55;margin-top:20px}.poetry-paper{padding:clamp(28px,5vw,55px);background:#fff;box-shadow:0 15px 45px rgba(38,31,46,.07);border:1px solid #f0e7db;position:relative}.poetry-paper:before{content:"";position:absolute;inset:9px;border:1px solid #f1e8dd;pointer-events:none}.paper-label{font-size:9px;letter-spacing:2px;color:#b18a4e}.poetry-paper>p:not(.poetry-translation){font:500 clamp(20px,2.7vw,28px)/1.85 var(--serif);color:#423b4a;margin:25px 0}.paper-divider{color:#c6a15e;letter-spacing:4px}.poetry-translation{font-size:12px;line-height:1.9;color:#777182;margin:23px 0 0}.birthday-note{background:linear-gradient(145deg,#f5e2e7,#fff6ed);padding:95px 24px 70px;text-align:center;position:relative;overflow:hidden}.birthday-note .section-kicker{justify-content:center}.birthday-note h2{margin:15px 0}.gift-icon{font-size:37px;color:#bd914e;margin:20px 0}.note-intro{color:#777182;font-size:13px}.gift-button{margin-top:16px}.signoff{margin:35px 0 0;font-size:11px;color:#777182}.signoff span,.letter-signature span{font:600 27px var(--script);color:#9d7541;margin-left:5px}.note-glow{position:absolute;width:320px;height:320px;border-radius:50%;background:rgba(255,255,255,.55);filter:blur(60px);top:15%;left:calc(50% - 160px);pointer-events:none}.birthday-note>*:not(.note-glow){position:relative}.footer{background:var(--navy);color:#d8d6e0;text-align:center;padding:35px 20px 40px}.footer-star{font-size:22px;color:var(--gold)}.footer p{font-size:11px;margin:8px 0}.footer small{font-size:10px;color:#9b9bab}.modal{position:fixed;inset:0;z-index:500;display:none;align-items:center;justify-content:center;padding:20px}.modal.open{display:flex;animation:fadeIn .25s ease}.modal-backdrop{position:absolute;inset:0;background:rgba(9,12,25,.78);backdrop-filter:blur(7px)}.modal-card{position:relative;width:min(100%,560px);max-height:90vh;overflow:auto;background:var(--cream);padding:42px clamp(24px,6vw,55px);text-align:center;box-shadow:0 25px 90px rgba(0,0,0,.3);border:1px solid rgba(216,181,110,.6);animation:riseIn .35s ease}.modal-close{position:absolute;right:16px;top:12px;border:0;background:transparent;font-size:27px;color:#75687b;cursor:pointer}.modal-spark{font-size:28px;color:#bf9656;margin-bottom:8px}.modal-card .section-kicker{justify-content:center;font-size:9px}.modal-card h2{font:600 34px var(--serif);margin:12px 0 20px}.letter-copy{text-align:left;font-size:13px;line-height:1.95;color:#686475}.letter-final{font-family:var(--serif);font-size:17px;color:#9c7541!important}.letter-signature{margin:18px 0 25px;font-size:11px;color:#777182}.button-dark{background:var(--navy);color:#fff}.button-dark:hover{background:#29314d}.footer small,.hero-description,.intro-copy p{ text-wrap:pretty}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes twinkle{0%,100%{opacity:.55;transform:scale(.9)}50%{opacity:1;transform:scale(1.15)}}@keyframes musicPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes riseIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:850px){.nav-wrap{padding:0 22px}.nav-links{gap:15px}.hero{padding-left:35px;padding-right:35px;min-height:590px}.art-orbit{width:300px;height:300px}.orbit-two{width:245px;height:245px}.case-grid{grid-template-columns:1fr 1fr}.case-card:last-child{grid-column:1/-1}.things-grid{grid-template-columns:repeat(3,1fr)}.thing-card{min-height:125px}.poetry-section{gap:35px}}
@media(max-width:600px){.nav-wrap{height:66px;padding:0 16px}.brand{font-size:9px;letter-spacing:1.4px;gap:7px}.brand-mark{width:32px;height:32px}.nav-links{display:none}.music-toggle{padding:7px 10px}.hero{grid-template-columns:1fr;padding:57px 24px 70px;text-align:center;gap:8px}.hero-copy{margin:auto}.eyebrow{justify-content:center;font-size:8px;letter-spacing:1.8px}.hero h1{font-size:57px;margin-top:22px}.hero-name{font-size:13px}.hero-description{font-size:13px}.hero-actions{justify-content:center;gap:18px}.hero-note{justify-content:center;margin-top:25px;font-size:9px}.hero-art{min-height:290px;margin-top:8px}.birthday-emblem{width:min(100%,330px);max-height:300px}.art-orbit{width:270px;height:270px}.orbit-two{width:215px;height:215px}.art-caption{right:2%;bottom:0}.scroll-cue{bottom:17px}.section-shell{padding:72px 22px}.intro{padding-top:78px;padding-bottom:75px}.intro-grid{grid-template-columns:1fr;gap:25px}.intro h2,.section-heading h2,.poetry-side h2,.birthday-note h2{font-size:39px}.intro-copy p{font-size:13px}.quote-band{padding:48px 23px}.quote-band p{font-size:22px}.section-heading{display:block}.section-heading>p{margin-top:16px}.court-section{padding-top:75px;padding-bottom:78px}.case-grid{grid-template-columns:1fr}.case-card:last-child{grid-column:auto}.case-summary{min-height:0}.eighteen-section{padding:75px 0}.eighteen-section .section-shell{padding-left:22px;padding-right:22px}.things-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.thing-card{min-height:126px;padding:14px 12px}.thing-number{font-size:23px}.thing-prompt{font-size:10px}.poetry-section{grid-template-columns:1fr;gap:24px;padding-top:78px;padding-bottom:78px}.poetry-flower{font-size:65px;margin-top:10px}.poetry-paper{padding:32px 25px}.poetry-paper>p:not(.poetry-translation){font-size:21px}.birthday-note{padding:76px 20px 58px}.birthday-note h2{font-size:36px}.modal-card{padding:39px 24px 28px}.modal-card h2{font-size:29px}.letter-copy{font-size:12px}.footer{padding:30px 20px}.footer p{line-height:1.8}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Chapter 18 personal details */
.little-world{padding-top:85px;padding-bottom:90px}.world-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.world-grid article{background:#fff;border:1px solid #eee5d9;padding:24px;box-shadow:0 8px 28px rgba(29,28,44,.035)}.world-grid article>span{font-size:27px}.world-grid h3{font:600 20px var(--serif);margin:12px 0 8px}.world-grid p{font-size:12px;line-height:1.85;color:var(--muted);margin:0}.little-world-note{margin-top:18px;padding:18px 22px;background:var(--pink-soft);font-size:13px;color:#514657}.little-world-note b{color:#9b7040}.surprise-card{width:min(100%,650px);min-height:380px}.surprise-loading{padding:18px 0 12px}.surprise-loading h2{font:600 29px var(--serif);margin:14px 0 8px}.loading-status{font-size:12px;color:#82798a;min-height:22px}.loading-small{font:italic 13px var(--serif);color:#9b7548;margin-top:20px}.loading-track{height:3px;background:#eadfe0;max-width:280px;margin:20px auto;overflow:hidden}.loading-track span{display:block;height:100%;width:0;background:linear-gradient(90deg,#d7a6b9,#d8b56e);animation:loadProgress 4.3s ease forwards}.radar{width:112px;height:112px;margin:5px auto 25px;border:1px solid rgba(190,145,78,.5);border-radius:50%;display:grid;place-items:center;position:relative;background:radial-gradient(circle,rgba(232,182,199,.25),transparent 68%)}.radar b{font:600 39px var(--serif);color:#b68a4c}.radar span{position:absolute;inset:8px;border:1px solid rgba(190,145,78,.4);border-radius:50%;animation:radarPulse 2s ease-out infinite}.radar span:nth-child(2){animation-delay:.65s}.radar span:nth-child(3){animation-delay:1.3s}.look-reveal{margin:24px auto 18px;max-width:390px}.look-placeholder{min-height:210px;border:1px dashed #c9a66a;background:linear-gradient(145deg,#fff5f5,#f4e6e9);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#8b6a4a}.look-placeholder span{font-size:34px}.look-placeholder b{font:600 18px var(--serif)}.look-placeholder small{font-size:10px;color:#8b8490}.look-reveal>p{font:italic 14px var(--serif);color:#987448;margin:12px 0}.surprise-reveal[hidden],.surprise-loading[hidden]{display:none!important}@keyframes radarPulse{0%{transform:scale(.75);opacity:.9}100%{transform:scale(1.55);opacity:0}}@keyframes loadProgress{0%{width:0}100%{width:100%}}
@media(max-width:850px){.world-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.little-world{padding-top:70px;padding-bottom:72px}.world-grid{grid-template-columns:1fr}.world-grid article{padding:20px}.surprise-card{padding:38px 22px 26px}.surprise-loading h2{font-size:25px}.look-placeholder{min-height:175px}}

/* Animated, page-by-page birthday letter */
.letter-progress{display:flex;align-items:center;gap:12px;margin:0 0 18px;color:#9b7848;font-size:9px;letter-spacing:1.5px;text-align:left}
.letter-progress-track{height:3px;flex:1;background:#e8dfd4;border-radius:9px;overflow:hidden}
.letter-progress-track span{display:block;height:100%;width:20%;background:linear-gradient(90deg,#d6ae68,#e9b7c7);transition:width .35s ease}
.letter-pages{position:relative;min-height:230px;text-align:left}
.letter-page{display:none;min-height:220px;padding:24px 22px;background:linear-gradient(145deg,#fffdf9,#fff7f0);border:1px solid #eadcc9;box-shadow:0 12px 30px rgba(35,28,40,.07);border-radius:5px;animation:letterPageIn .45s ease both}
.letter-page.active{display:flex;flex-direction:column;justify-content:center}
.letter-page p{font:400 15px/1.95 var(--sans);color:#5f5968;margin:0 0 15px}
.letter-page .letter-page-signoff{font:500 18px var(--script);color:#a47a43;text-align:right;margin:15px 0 0}
.letter-page .nicknames{font:500 17px/2 var(--script);color:#a77b48;text-align:center}
.birthday-wish{margin-top:24px;padding:20px 10px;border-top:1px solid #e7d6bd;text-align:center}
.birthday-wish h3{font:600 25px var(--serif);color:#a77b48;margin:0 0 10px}
.birthday-wish p{font:400 14px/1.8 var(--sans);text-align:center;margin:0}
.letter-controls{display:flex;justify-content:space-between;gap:12px;margin:17px 0 25px}
.letter-controls .button{min-width:125px;padding:12px 15px}
.letter-controls button:disabled{opacity:.4;cursor:not-allowed;transform:none}
.final-look-section{margin:20px 0;padding:24px 16px;background:#f7edf0;border:1px solid #e7cbd4;animation:letterPageIn .5s ease both}
.final-look-section h3{font:600 25px var(--serif);color:#9c7541;margin:8px 0}
.final-look-section>p:not(.section-kicker){font-size:12px;color:#777182}
.look-placeholder{min-height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;margin-top:16px;border:1px dashed #c9a66f;background:rgba(255,255,255,.55);color:#9c7541}
.look-placeholder span{font-size:30px}.look-placeholder b{font:500 17px var(--serif)}.look-placeholder small{font-size:10px;color:#8d8791}
.surprise-teaser{margin:20px auto 0;max-width:430px;font:500 18px/1.8 var(--serif);color:#61566a}
.surprise-teaser em{color:#a77b48;font-family:var(--script);font-size:24px}
@keyframes letterPageIn{from{opacity:0;transform:translateX(14px) translateY(5px)}to{opacity:1;transform:translateX(0) translateY(0)}}
@media(max-width:600px){.letter-page{padding:21px 17px;min-height:245px}.letter-page p{font-size:13px}.letter-controls .button{min-width:0;flex:1;font-size:10px;padding:12px 8px}.surprise-teaser{font-size:16px}.surprise-teaser em{font-size:21px}}
@media(prefers-reduced-motion:reduce){.letter-page.active,.final-look-section{animation:none}.letter-progress-track span{transition:none}}
