/* A continuous portrait page on phones and desktops. */
body{background:radial-gradient(ellipse at 10% 15%,#c1cfc0 0,transparent 45%),radial-gradient(ellipse at 90% 70%,#dbc7aa 0,transparent 48%),#dce2d6;background-attachment:fixed;font-size:15px}
#experience{max-width:480px;margin-inline:auto;background:var(--paper);box-shadow:0 0 70px #173e3325;overflow:clip;container-type:inline-size}
.gate,.entrance-curtain{max-width:480px;left:50%;right:auto;width:100%;transform:translateX(-50%)}
.gate-leaving{animation:gateFade 1.25s var(--ease) both}@keyframes gateFade{to{opacity:0;visibility:hidden}}
.wrap{padding-inline:24px}.section{padding-block:48px}.hero{display:block;min-height:0;padding-bottom:66px}.hero-copy{padding:32px 24px 0}.hero h1{font-size:clamp(38px,10.6cqw,52px);line-height:1.04;margin:16px 0;letter-spacing:-.025em}.hero h1 em{display:inline}.hero .eyebrow{font-size:11px;letter-spacing:.13em}.hero-sub{font-size:14px;max-width:100%;line-height:1.7}.hero-sign{font-size:25px;margin:14px 0}.hero-visual{height:clamp(215px,33svh,340px);min-height:0;margin:8px 24px 0;border-radius:95px 95px 5px 5px}.hero-spark{top:34px;right:16px;font-size:32px}.photo-caption{left:20px;bottom:20px;right:16px}.photo-caption p{font-size:25px;line-height:1.12}.scroll-link{left:24px;bottom:16px;font-size:12px;letter-spacing:.11em}.scroll-line{height:28px}
h2{font-size:clamp(34px,9cqw,43px);line-height:1.08;letter-spacing:-.02em}.quote-section{padding:32px 0}.quote-section h2{font-size:clamp(33px,8.7cqw,42px)}.quote-section p{font-size:15px;margin-top:20px;line-height:1.8}.eyebrow{font-size:12px;letter-spacing:.13em}.section-intro{margin-bottom:32px}.section-intro .eyebrow{margin-bottom:14px}.section-intro p:last-child{margin-top:20px;font-size:15px}.little-heart{margin-bottom:16px}
.memories{grid-template-columns:1fr 1fr;gap:18px;padding:10px 3px 32px}.print{padding:8px 8px 14px}.print:nth-child(2){margin-top:24px}.print:nth-child(3){grid-column:1/-1;width:78%;margin:12px auto 0;transform:rotate(-2deg)}.print .photo-button{aspect-ratio:4/5}.print p{font-size:22px;line-height:1.15;padding-top:12px}.photo-button:after{display:none}
.vow{padding-block:42px}.time-intro{text-align:center;margin-bottom:25px}.time-intro h2{font-size:36px;margin-top:14px}.counter-cards{display:grid;gap:22px}.time-card{position:relative;padding:26px 14px 22px;background:#ffffff08;border:1px solid #d9bf9140;border-radius:20px;overflow:hidden;isolation:isolate;text-align:center}.time-card:before{content:'';position:absolute;width:70px;height:2px;top:0;left:-70px;background:linear-gradient(90deg,transparent,#dfbf87,transparent);animation:timeGlint 11s linear infinite;pointer-events:none}.time-card:nth-child(2):before{animation-delay:-5s}@keyframes timeGlint{0%{left:-70px;opacity:0}15%{opacity:.7}75%{opacity:.7}100%{left:100%;opacity:0}}.time-emblem{width:34px;height:30px;margin:0 auto 14px;color:#e0c395}.time-emblem svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.2}.time-card .eyebrow{font-size:12px;letter-spacing:.07em;color:#e3d0ae}.time-date{display:block;color:#dae2d9;font-size:12px;margin-top:5px}.time-card h3{font-size:29px;line-height:1.16;margin:17px auto 20px;max-width:340px;color:#fff7e8}.counter{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0}.counter>div{border:0;padding:10px 2px 8px;text-align:center;min-width:0;background:#ffffff04;border-radius:10px}.counter strong{font:500 clamp(29px,8cqw,38px)/1.12 Memory;display:block;font-variant-numeric:tabular-nums;white-space:nowrap}.counter span{font:600 10px/1.5 Manrope;letter-spacing:.08em;margin-top:6px;display:block}.second-tick{animation:secondTick .35s ease}@keyframes secondTick{from{opacity:.5;transform:translateY(4px)}to{opacity:1;transform:none}}.vow-photo{width:86%;aspect-ratio:4/3;border-radius:85px 85px 4px 4px;margin:30px auto 0}.counter-note{font-size:12px!important;margin-top:18px!important;text-align:center}
.timeline{margin-top:25px}.timeline:before,.timeline-progress{left:7px}.moment{grid-template-columns:1fr;gap:20px;padding:0 0 42px 29px}.moment:before{left:2px;top:26px}.moment:nth-child(2n) .moment-photo{order:0}.moment-photo{aspect-ratio:4/3}.moment-copy h3{font-size:33px;margin:0 0 14px}.moment-copy p{font-size:15px;line-height:1.8}.wide-memory{aspect-ratio:4/5}.wide-caption{left:24px;right:24px;bottom:28px}.wide-caption h2{font-size:38px}.wide-caption .eyebrow{font-size:12px}
.children-heading{margin-bottom:30px}.children-heading h2{font-size:37px}.children-heading p:last-child{font-size:15px}.children{grid-template-columns:1fr;gap:28px}.child{padding:22px;max-width:400px;width:100%;margin:auto}.child .photo-button{aspect-ratio:4/4.4}.child h3{font-size:48px;margin-top:18px}.child time{font-size:12px}.child p{font-size:15px;line-height:1.8;margin:16px auto}.child-counter{font-size:25px}.child-counter small{font-size:11px}
.story-chapter{margin-bottom:36px}.story-photo{aspect-ratio:4/3}.story-inset{width:82%;margin:24px 0 0 auto;aspect-ratio:4/5}.story-note{padding:25px 4px 0}.story-note h3{font-size:35px;margin:0 0 15px}.story-note p{font-size:15px;line-height:1.8}.story-breath{padding:24px 0 30px}.story-breath h3{font-size:36px}.story-flow>.wrap>.story-photo{aspect-ratio:4/3}.story-photo.visible img{transform:none}
.music.section{grid-template-columns:1fr;padding-block:24px;gap:16px;margin-inline:auto;min-height:0;align-content:start}.turntable{padding:12px 14px;width:100%;max-width:400px;margin:auto}.music-art{height:clamp(180px,30svh,250px);padding:0}.record,.playing .record{width:auto;height:94%;aspect-ratio:1;left:auto;right:2%;top:50%}.music-cover{width:40%;left:0;top:31%;border-width:5px}.record-label{width:34%;display:block}.record-label svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.record-label text{font:600 22px Memory;fill:#173e33;letter-spacing:.2px}.record-label:after{z-index:1}.tonearm{right:0;top:4%;width:35%;height:73%}.arm-pivot{width:30px;height:30px;right:10px}.arm-bar{right:23px;top:15px;height:72%;width:6px;transform:rotate(0)}.playing .arm-bar{transform:rotate(25deg)}.arm-bar i{width:14px;height:23px;bottom:-15px;left:-4px;transform:none}.arm-rest{right:18px;top:77%;width:17px}.player-card{padding:0}.player-card .eyebrow{font-size:12px;letter-spacing:.13em;margin-bottom:8px}.player-card h2{font-size:33px;line-height:1.08;margin:0 0 12px}.player-copy{font-size:14px!important;line-height:1.6;margin:0 0 14px!important}.song-info{padding-top:12px}.song-info strong{font-size:16px}.song-info span{font-size:13px}.seek-wrap{margin-top:8px;height:34px}.song-times{font-size:12px}.player-controls{margin-top:12px;gap:28px}.player-controls button,.dialog-close,.password-form button,.floating-music{display:grid;place-items:center;padding:0;line-height:1}.player-controls #musicButton{width:54px;height:54px}.player-controls .side-control{width:42px;height:42px}.player-controls svg{display:block;width:24px;height:24px}.side-control svg,.dialog-close svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.music-status{font-size:13px!important}.floating-music{right:max(16px,calc((100vw - 480px)/2 + 16px));width:43px;height:43px}
.final{padding-block:46px}.final h2{font-size:37px;margin:18px auto 22px}.final p{font-size:15px}.letter-trigger{padding:22px 24px;max-width:100%;font-size:26px;margin-top:28px}.letter-trigger small{font-size:13px;line-height:1.4;letter-spacing:.04em}.closing{grid-template-columns:1fr;gap:28px}.closing .photo-button{aspect-ratio:4/3}.closing h2{font-size:37px}.closing p{font-size:15px;line-height:1.8;margin:20px 0}.signature{font-size:30px}footer{font-size:12px;padding-block:28px}
.dialog{width:min(92vw,440px);max-height:85svh}.dialog-close{width:44px;height:44px;top:12px;margin:12px;box-shadow:0 0 0 3px var(--paper)}.dialog-close svg{width:22px;height:22px}.letter{padding:65px 28px 28px}.letter:before{inset:16px}.letter h2{font-size:40px}.letter p{font-size:22px;line-height:1.65}.letter .eyebrow{font:600 12px/1.6 Manrope}.gate h1{font-size:51px}.gate p{font-size:14px}.gate .eyebrow{font-size:12px}.gate .key-symbol{margin-bottom:22px}.gate .demo-hint{font-size:12px}.password-form{margin-top:24px}.password-form button{height:48px}.preview-tools{font-size:12px}.preview-tools a{display:inline-block;margin:8px}
button,button *,[aria-hidden="true"],.petal,img{-webkit-user-select:none;user-select:none}img{-webkit-user-drag:none}.final-heart{pointer-events:none}.section-intro{position:relative}.section-intro:after{content:'✧';position:absolute;right:0;top:-12px;font:30px Memory;color:#89613188;pointer-events:none}.section-intro.visible:after{animation:softShine 2s ease both}@keyframes softShine{0%{opacity:0;transform:scale(.7) rotate(-15deg)}65%{opacity:.8}100%{opacity:.5;transform:scale(1) rotate(0)}}
@media(max-width:360px){.wrap{padding-inline:20px}.hero-copy{padding-inline:20px}.hero h1{font-size:38px}.hero-visual{margin-inline:20px}.time-card{padding-inline:10px}.time-card h3{font-size:27px}.counter strong{font-size:28px}.counter span{font-size:9px}.print p{font-size:20px}.player-card h2{font-size:30px}}
@media(max-height:650px){.hero-copy{padding-top:22px}.hero h1{font-size:38px;margin-block:12px}.hero-sub{font-size:13px}.hero-visual{height:190px}.music-art{height:175px}.music.section{gap:12px;padding-block:18px}.player-copy{font-size:13px!important;margin-bottom:10px!important}.player-card h2{font-size:30px}.gate h1{font-size:43px}}
@media(prefers-reduced-motion:reduce){.time-card:before{display:none}.second-tick,.section-intro.visible:after{animation:none}.gate-leaving{opacity:0}}
.time-card:not(.on-screen):before{animation-play-state:paused}
.record-label svg{user-select:none}.hero-visual img{animation-duration:24s}
/* Equal arcs keep both label words centered and safely inside the badge. */
.record-label text{font-size:20px;letter-spacing:0;text-anchor:middle}
.hero{padding-bottom:0}.scroll-link{position:relative;left:auto;bottom:auto;width:100%;height:88px;padding-inline:24px;transform:translateY(2px)}
#first-memory .quote-section{padding-top:0}#first-memory .little-heart{line-height:1}
.moment:before{content:'';left:-3px;top:20px;width:20px;height:20px;border:0;border-radius:0;box-shadow:none;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23896131' d='M12 21S2 14.5 2 8a5.5 5.5 0 0 1 10-3.2A5.5 5.5 0 0 1 22 8c0 6.5-10 13-10 13Z'/%3E%3C/svg%3E") center/16px 16px no-repeat}
