:root{--paper:#eee3cf;--paper-light:#f7efdf;--sand:#d5b58a;--leather:#79543c;--ink:#352b27;--muted:#786b5e;--accent:#a65d49;--line:rgba(53,43,39,.24);--shadow:0 24px 55px rgba(52,37,26,.2);--serif:"Playfair Display",Georgia,serif;--sans:"DM Sans",Arial,sans-serif;--script:"Caveat",cursive}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scroll-padding-top:18px}body{font-family:var(--sans);font-size:16px;line-height:1.55;color:var(--ink);background:var(--paper);overflow-x:hidden}body.modal-open{overflow:hidden}button,input{font:inherit}button{color:inherit}.story-page main{position:relative;isolation:isolate}.paper-grain{position:fixed;inset:0;z-index:20;pointer-events:none;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E")}.scene{position:relative;overflow:hidden}.hero{min-height:100svh;padding:24px clamp(22px,5vw,78px) 30px;background:radial-gradient(ellipse at 76% 30%,rgba(255,250,235,.78),transparent 35%),linear-gradient(140deg,#f6ecd9 0%,#e9d9bd 62%,#d7bd98 100%);display:flex;flex-direction:column;isolation:isolate}.hero-topline,.hero-footer{display:flex;justify-content:space-between;align-items:center;gap:18px;font-size:.62rem;letter-spacing:.17em;font-weight:600}.hero-topline{position:relative;z-index:3;border-bottom:1px solid var(--line);padding-bottom:15px}.edition{color:var(--muted);text-align:right}.hero-copy{position:relative;z-index:2;width:min(620px,60%);margin:clamp(55px,10vh,110px) 0 0 6%;}.eyebrow{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600}.hero-copy h1{font:400 clamp(3.2rem,7vw,7rem)/.99 var(--serif);letter-spacing:-.055em;margin:20px 0 28px;max-width:760px}.hero-copy h1 em,.featured-intro h2 em,.archive-heading h2 em,.birthday-copy h2 em{font-weight:400;color:var(--accent)}.name-field{display:flex;flex-direction:column;gap:6px;width:min(290px,100%);font-size:.75rem;color:var(--muted)}.name-field input{background:transparent;border:0;border-bottom:1px solid rgba(53,43,39,.48);border-radius:0;padding:8px 0 10px;outline:none;font:1.4rem var(--script);color:var(--ink)}.name-field input:focus{border-color:var(--accent)}.hero-note{font:1.35rem var(--script);color:var(--leather);margin-top:15px}.flight-path{position:absolute;z-index:1;width:56%;height:40%;right:2%;top:26%;opacity:.55}.flight-path svg{width:100%;height:100%;overflow:visible}.flight-path path{fill:none;stroke:#a67d55;stroke-width:1.4;stroke-dasharray:4 8}.paper-jet{position:absolute;z-index:2;width:clamp(76px,12vw,155px);right:13%;top:28%;transform:rotate(-9deg);filter:drop-shadow(8px 13px 7px rgba(62,43,29,.15))}.paper-jet svg{width:100%;height:auto;overflow:visible}.paper-jet svg path{fill:#fff4de;stroke:#987452;stroke-width:1.2;stroke-linejoin:round}.horizon{position:absolute;right:0;left:0;bottom:15%;height:20%;opacity:.65;overflow:hidden}.horizon span{position:absolute;bottom:-60%;width:80%;height:130%;border-radius:50% 50% 0 0;background:#b79c77;transform:rotate(-6deg)}.horizon span:nth-child(1){left:-20%;background:#d3bd99}.horizon span:nth-child(2){left:8%;bottom:-76%;background:#bda27c}.horizon span:nth-child(3){left:38%;bottom:-90%;background:#9e8969}.horizon span:nth-child(4){right:-25%;bottom:-70%;background:#c6ad86}.horizon span:nth-child(5){right:-45%;bottom:-110%;background:#8e8064}.hero-footer{position:absolute;z-index:2;bottom:22px;left:clamp(22px,5vw,78px);right:clamp(22px,5vw,78px);color:#685744}.scroll-mark{font-size:1.3rem}.suspension-scene{position:absolute;z-index:4;right:clamp(8%,12vw,18%);bottom:-3px;width:clamp(210px,29vw,365px);height:clamp(245px,35vw,405px);pointer-events:none}.support-line{position:absolute;left:-50vw;right:-50vw;top:20px;height:4px;background:linear-gradient(#97724c,#5b422c 48%,#b28b60);box-shadow:0 3px 5px #60482c44}.line-knot{position:absolute;left:calc(50% - 13px);top:-5px;width:26px;height:14px;border:2px solid #7b5737;border-radius:50%;transform:rotate(-12deg)}.envelope-loop{position:absolute;z-index:2;top:17px;left:calc(50% - 8px);width:16px;height:31px;border:3px solid #9a724a;border-bottom-color:transparent;border-radius:50% 50% 0 0;transform:rotate(4deg)}.envelope{position:absolute;top:45px;left:50%;width:78%;aspect-ratio:1.45;transform:translateX(-50%) rotate(1.5deg);filter:drop-shadow(0 20px 15px rgba(67,45,27,.2))}.envelope-back,.envelope-front,.envelope-flap{position:absolute;inset:0}.envelope-back{background:#c8a477;border:1px solid #9c7954}.envelope-front{background:linear-gradient(145deg,#ead3ae,#d5b68c);clip-path:polygon(0 0,50% 60%,100% 0,100% 100%,0 100%);border:1px solid #b28d61}.envelope-flap{z-index:1;background:linear-gradient(160deg,#f0ddbd,#d5b58a);clip-path:polygon(0 0,100% 0,50% 63%);border-bottom:1px solid #b28d61}.envelope-seal{position:absolute;z-index:2;left:50%;top:51%;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#a65d49;color:#f5e6cc;font-size:.85rem;box-shadow:0 2px 5px #68452b33}.scene-caption{position:absolute;bottom:0;left:0;right:0;text-align:center;font:1.4rem var(--script);color:#71573c}.landing-scene{min-height:78svh;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 65%,#cdb18a 0%,#d9c19d 35%,#e6d4b4 74%,#e9ddc7 100%)}.landing-scene:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(168deg,transparent 0 28px,#a98d6755 29px,#e8d8b855 30px,transparent 33px);opacity:.25}.broken-thread{position:absolute;top:0;width:48%;height:3px;background:#8b6746}.broken-thread-left{left:0;transform:rotate(.8deg);transform-origin:left}.broken-thread-right{right:0;transform:rotate(-1deg);transform-origin:right}.sand-haze{position:absolute;inset:40% 0 0;background:radial-gradient(ellipse at 50% 100%,#a98c64aa,transparent 65%)}.landed-envelope{position:relative;z-index:1;width:clamp(190px,25vw,320px);aspect-ratio:1.45;background:linear-gradient(145deg,#ddc198,#c8a477);border:1px solid #a98961;box-shadow:0 24px 25px #5b432d2b;transform:rotate(-8deg) translateY(20px);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}.landed-envelope:after{content:"";position:absolute;inset:0;background:linear-gradient(35deg,transparent 49.5%,#a98961 50%,transparent 50.5%),linear-gradient(-35deg,transparent 49.5%,#a98961 50%,transparent 50.5%);opacity:.6}.landed-flap{position:absolute;inset:0;background:#e8d1ad;clip-path:polygon(0 0,100% 0,50% 58%);border-bottom:1px solid #ad8a60}.landed-seal{position:absolute;z-index:2;top:55%;left:50%;transform:translate(-50%,-50%);color:#a65d49;font-size:1.1rem}.landing-caption{position:absolute;bottom:12%;left:20px;right:20px;text-align:center;font:clamp(1.4rem,2.8vw,2.3rem) var(--script);color:#604a34}.section-marker{position:absolute;z-index:3;top:24px;left:clamp(22px,5vw,78px);right:clamp(22px,5vw,78px);display:flex;justify-content:space-between;color:#6e5c49;font-size:.62rem;letter-spacing:.16em}.featured-memory{min-height:110svh;padding:110px 8vw 90px;background:#f1e7d5;display:grid;grid-template-columns:minmax(250px,.75fr) minmax(350px,1fr);align-items:center;gap:clamp(36px,8vw,130px)}.featured-memory .section-marker{top:25px}.featured-intro{padding-left:5%;max-width:450px}.featured-intro h2,.archive-heading h2{font:400 clamp(2.8rem,5vw,5.1rem)/1.06 var(--serif);letter-spacing:-.05em;margin:22px 0}.featured-intro>p:last-child{font:1.4rem var(--script);color:var(--muted)}.photo-frame{display:block;position:relative;border:0;padding:12px 12px 38px;background:#f8f0df;box-shadow:0 25px 50px #4e38241f,0 2px 5px #4e38241c;cursor:pointer;text-align:left}.featured-photo{width:min(100%,610px);justify-self:center;transform:rotate(2.2deg)}.featured-photo:before,.hanging-photo:before{content:"";position:absolute;inset:5px;border:1px solid #8c6d4a25;pointer-events:none}.featured-photo img,.hanging-photo img{display:block;width:100%;aspect-ratio:1.16;object-fit:cover;filter:saturate(.78) sepia(.08)}.photo-corner{position:absolute;left:22px;bottom:11px;font-size:.55rem;letter-spacing:.14em;color:#7e6c58}.photo-tap{position:absolute;right:22px;bottom:9px;font:1.3rem var(--script);color:var(--accent)}.photo-tap span{font-family:var(--sans)}.photo-caption{position:absolute;bottom:38px;right:10%;font:1.4rem var(--script);color:var(--muted)}.hanging-memory{min-height:95svh;background:radial-gradient(ellipse at 50% 15%,#f8efdf,#e7d5b7 78%);display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:110px 14vw 100px;gap:8vw}.hanging-memory .section-marker{top:25px}.hanging-rope{position:absolute;top:0;left:50%;height:24%;width:2px;background:#8b6746;box-shadow:2px 0 2px #5c412322}.hanging-rope:before{content:"";position:absolute;top:0;left:-30vw;width:60vw;height:2px;background:#8b6746}.rope-clip{position:absolute;bottom:-8px;left:-7px;width:16px;height:16px;border:2px solid #9c784f;border-radius:50%;background:#d6bd97}.hanging-photo{width:min(100%,370px);justify-self:center;transform:rotate(-5deg);padding-bottom:45px}.hanging-photo img{aspect-ratio:.86}.hanging-note{position:absolute;bottom:12px;left:22px;font:1.35rem var(--script);color:#7d6042}.journey-prompt{justify-self:start;max-width:300px}.prompt-arrow{font-size:2.2rem;color:var(--accent)}.journey-prompt p{font:clamp(2rem,3.3vw,3.2rem)/1.1 var(--serif);margin:16px 0 25px}.journey-prompt em{color:var(--accent)}.desktop-prompt,.mobile-prompt{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.mobile-prompt{display:none}.memory-archive{padding:130px clamp(22px,7vw,110px) 150px;background:#e8d8bd}.archive-heading{max-width:760px;margin:0 auto 70px;text-align:center}.archive-heading h2{font-size:clamp(2.8rem,5vw,5rem)}.archive-instruction{font:1.4rem var(--script);color:var(--muted)}.archive-board{position:relative;max-width:1120px;min-height:1100px;margin:0 auto;background:linear-gradient(135deg,#e2cfad,#e9d9bc 45%,#d8c09a);border:1px solid #bba17b;box-shadow:inset 0 0 70px #8d70451c,0 25px 50px #614a2c14;overflow:hidden}.archive-board:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 7px,#7e603a08 8px,transparent 9px);pointer-events:none}.memory-threads{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.memory-threads path{fill:none;stroke:#896844;stroke-width:2.2;stroke-linecap:round;filter:drop-shadow(1px 2px 1px #5b432522)}.archive-photo{position:absolute;z-index:2;width:clamp(130px,19%,220px);padding:9px 9px 32px;background:#f7efdf;box-shadow:0 13px 25px #4d37241f,0 2px 5px #4d372418;transition:box-shadow .25s ease;}.archive-photo img{display:block;width:100%;aspect-ratio:.94;object-fit:cover;filter:saturate(.75) sepia(.1)}.archive-photo figcaption{position:absolute;bottom:6px;left:10px;right:8px;font:clamp(.9rem,1.35vw,1.2rem) var(--script);color:#6d543a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.archive-photo:after{content:"";position:absolute;top:-6px;left:50%;width:13px;height:13px;border-radius:50%;background:#a65d49;box-shadow:0 2px 3px #44301f44;transform:translateX(-50%)}.archive-photo:hover{z-index:5;box-shadow:0 20px 35px #4d37243b}.p1{left:8%;top:7%;transform:rotate(-7deg)}.p2{left:39%;top:4%;transform:rotate(5deg)}.p3{right:7%;top:13%;transform:rotate(7deg)}.p4{left:21%;top:25%;transform:rotate(4deg)}.p5{left:61%;top:29%;transform:rotate(-6deg)}.p6{left:5%;top:42%;transform:rotate(5deg)}.p7{left:39%;top:44%;transform:rotate(-4deg)}.p8{right:5%;top:47%;transform:rotate(6deg)}.p9{left:22%;top:61%;transform:rotate(-6deg)}.p10{left:59%;top:64%;transform:rotate(4deg)}.p11{left:4%;top:78%;transform:rotate(-4deg)}.p12{left:38%;top:81%;transform:rotate(6deg)}.p13{right:5%;top:77%;transform:rotate(-7deg)}.p14{left:26%;top:8%;transform:rotate(2deg);width:clamp(115px,15%,175px)}.p15{right:27%;top:15%;transform:rotate(-3deg);width:clamp(120px,16%,185px)}.archive-stamp{position:absolute;right:35%;bottom:4%;z-index:1;font:1.4rem/.95 var(--serif);text-align:center;color:#9a654d;border:1px solid #9a654d;padding:12px;transform:rotate(-10deg);opacity:.75}.birthday-ending{min-height:100svh;display:grid;place-items:center;padding:100px 20px 90px;text-align:center;background:radial-gradient(ellipse at 50% 45%,#fbf1dd,#eee0c7 64%,#dfc8a4);isolation:isolate}.birthday-ending>.eyebrow{position:absolute;top:11%;left:20px;right:20px}.birthday-copy{position:relative;z-index:2}.birthday-small{font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}.birthday-copy h2{font:400 clamp(5rem,13vw,12rem)/.75 var(--script);letter-spacing:-.06em;color:#9f4f3c;margin:35px 0}.birthday-copy h2 em{color:#9f4f3c}.birthday-copy p{font:1.8rem var(--script);color:#6b5845}.birthday-heart{display:block;font-size:2.5rem;color:var(--accent);margin-top:14px}.ending-footnote{position:absolute;bottom:65px;left:20px;right:20px;font:1.35rem var(--script);color:var(--muted)}.date-link{position:absolute;bottom:25px;right:clamp(20px,5vw,70px);font-size:.67rem;letter-spacing:.09em;text-decoration:none;color:var(--leather);border-bottom:1px solid #a65d4980;padding-bottom:3px}.date-link span{color:var(--accent)}.ending-thread{position:absolute;top:0;width:40%;height:2px;background:#8b6746}.ending-thread-a{left:0}.ending-thread-b{right:0}.confetti-field{position:absolute;inset:0;overflow:hidden;pointer-events:none}.confetti-piece{position:absolute;top:-25px;left:var(--x);width:7px;height:13px;background:var(--confetti-color);opacity:.8;transform:rotate(var(--turn));animation:confetti-fall var(--duration) linear var(--delay) infinite;}.confetti-piece:nth-child(3n){width:5px;height:5px;border-radius:50%}.confetti-piece:nth-child(4n){width:4px;height:17px}.@keyframes confetti-fall{to{transform:translate3d(22px,110vh,0) rotate(calc(var(--turn) + 500deg))}}.memory-modal{position:fixed;z-index:100;inset:0;display:grid;place-items:center;padding:24px;visibility:hidden;opacity:0;transition:opacity .35s ease,visibility .35s ease}.memory-modal.is-open{visibility:visible;opacity:1}.modal-backdrop{position:absolute;inset:0;border:0;background:rgba(43,34,28,.48);backdrop-filter:blur(10px);cursor:pointer}.modal-content{position:relative;z-index:1;width:min(800px,92vw);padding:clamp(12px,2vw,24px) clamp(12px,2vw,24px) 18px;background:#f5ead5;box-shadow:0 30px 100px #21170f55;transform:scale(.91) rotate(-1.5deg);transition:transform .6s cubic-bezier(.2,.8,.2,1);}.memory-modal.is-open .modal-content{transform:scale(1) rotate(0)}.modal-close{position:absolute;z-index:4;top:-17px;right:-17px;width:42px;height:42px;border:0;border-radius:50%;background:#352b27;color:#f5ead5;font-size:1.8rem;line-height:1;cursor:pointer;box-shadow:0 5px 14px #21170f33}.modal-photo-frame{position:relative;padding:10px;background:#e1cfb0}.modal-photo-frame img,.modal-photo-frame video{display:block;width:100%;max-height:68vh;aspect-ratio:1.35;object-fit:cover}.modal-photo-frame video{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);opacity:0;transition:opacity .45s ease}.modal-photo-frame video.is-visible{opacity:1}.modal-poster{transition:opacity .45s ease}.modal-poster.is-hidden{opacity:0}.video-start-hint{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);padding:7px 13px;background:#352b27c9;color:#f7efdf;font:1.1rem var(--script);white-space:nowrap}.video-start-hint.is-hidden{display:none}.modal-caption{text-align:center;font:1.5rem var(--script);color:#70583d;margin:12px 0 3px}.modal-controls{display:flex;justify-content:center;gap:10px}.modal-controls button{display:none;border:1px solid #b99a73;background:transparent;padding:6px 12px;font-size:.7rem;cursor:pointer}.modal-controls button.is-visible{display:block}.needs-play .video-start-hint{cursor:pointer}.needs-play .video-start-hint:after{content:" ▶"}.mobile-prompt{display:none}
@media(max-width:760px){.hero{min-height:100svh;padding-top:18px}.hero-topline{font-size:.53rem}.edition{max-width:130px}.hero-copy{width:88%;margin:70px 0 0 0}.hero-copy h1{font-size:clamp(3.2rem,12vw,5.3rem)}.flight-path{width:88%;height:30%;right:-15%;top:31%}.paper-jet{right:12%;top:36%;width:95px}.horizon{bottom:21%;height:15%}.suspension-scene{right:8%;width:220px;height:270px;bottom:0}.support-line{top:20px}.scene-caption{font-size:1.1rem}.hero-footer{font-size:.5rem;letter-spacing:.1em;bottom:16px}.landing-scene{min-height:72svh}.landing-caption{bottom:10%;font-size:1.4rem}.featured-memory{min-height:auto;padding:100px 8vw 95px;grid-template-columns:1fr;gap:38px}.featured-intro{padding:0;max-width:560px}.featured-intro h2{font-size:clamp(3rem,11vw,4.4rem)}.featured-photo{width:min(100%,510px);justify-self:center}.photo-caption{position:static;text-align:center;margin-top:20px}.hanging-memory{min-height:100svh;padding:100px 9vw 80px;grid-template-columns:1fr;gap:40px;align-content:center}.hanging-rope{left:35%;height:28%}.hanging-rope:before{left:-35vw;width:70vw}.hanging-photo{width:min(66%,290px);justify-self:center;margin-top:25px}.journey-prompt{justify-self:center;text-align:center}.journey-prompt p{font-size:2.3rem}.desktop-prompt{display:none}.mobile-prompt{display:inline;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.memory-archive{padding:100px 14px}.archive-heading{padding:0 12px;margin-bottom:40px}.archive-heading h2{font-size:clamp(2.7rem,10vw,4rem)}.archive-board{min-height:1300px}.archive-photo{width:clamp(100px,32%,165px);padding:6px 6px 25px}.archive-photo img{aspect-ratio:.88}.archive-photo figcaption{font-size:.9rem;bottom:4px;left:7px}.p1{left:4%;top:4%}.p2{left:44%;top:3%}.p3{right:4%;top:18%}.p4{left:20%;top:21%}.p5{right:6%;top:34%}.p6{left:4%;top:39%}.p7{left:39%;top:42%}.p8{right:4%;top:53%}.p9{left:20%;top:58%}.p10{left:58%;top:65%}.p11{left:3%;top:74%}.p12{left:38%;top:79%}.p13{right:3%;top:84%}.p14{left:22%;top:10%;width:26%}.p15{right:26%;top:29%;width:26%}.archive-stamp{right:37%;bottom:3%;font-size:1rem}.birthday-copy h2{font-size:clamp(5.4rem,20vw,8rem)}.birthday-ending>.eyebrow{top:9%;font-size:.58rem}.ending-footnote{bottom:70px}.date-link{left:20px;right:20px;bottom:25px}.modal-content{width:min(95vw,650px)}.modal-photo-frame img,.modal-photo-frame video{aspect-ratio:.95;max-height:62vh}.modal-close{top:-12px;right:-8px;width:38px;height:38px}}
@media(max-width:390px){.hero-copy{margin-top:55px}.hero-copy h1{font-size:3.05rem}.suspension-scene{right:5%;width:190px;height:235px}.name-field{width:240px}.archive-board{min-height:1160px}.archive-photo{width:31%;}.archive-photo figcaption{font-size:.76rem}.p14{width:25%}.p15{width:25%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
.date-card {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 24px 18px;
    background: var(--light-choco);
}

.card-stage {
    position: relative;
    width: min(560px, 100%);
    transition: height 450ms cubic-bezier(.22, .68, 0, 1);
}

.card-holder,
.card-holder-one {
    position: relative;
    width: min(560px, 100%);
    padding: 20px;
    background: var(--card);
    box-shadow: 0 10px 28px rgb(74 47 18 / 20%);
}

.card-stage > .card-holder {
    position: absolute;
    top: 0;
    left: 50%;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 10px);
    transition: opacity 220ms ease, transform 300ms ease, visibility 0s linear 300ms;
}

.card-stage > .card-holder.is-active {
    z-index: 1;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
    transition: opacity 220ms ease, transform 300ms ease, visibility 0s;
}

.card-holder-one {
    display: flex;
    width: min(400px, 100%);
    flex-direction: column;
    padding: 14px;
}

.card-holder-one .heart-fuel {
    top: 4.5%;
    right: 7.5%;
    width: 56px;
}

.card-holder-one .playground {
    min-height: 0;
    aspect-ratio: 1.36;
    flex: 0 0 auto;
    padding: 32px 20px;
}

.card-holder-one .playground h1 {
    font-size: clamp(1.6rem, 4.5vw, 1.9rem);
    line-height: 1.2;
}

.card-holder-one .cta {
    gap: 8px;
    margin-top: 15px;
}

.card-holder-one .first-cta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    transition: grid-template-columns 450ms ease, gap 450ms ease;
}

.card-holder-one .first-cta.no-accepted {
    grid-template-columns: minmax(0, 0fr) minmax(0, 1fr);
    gap: 0;
}

.card-holder-one .first-cta .no-button {
    min-width: 0;
    overflow: hidden;
    transition: opacity 300ms ease, min-height 450ms ease, padding 450ms ease, border-width 450ms ease;
}

.card-holder-one .first-cta.no-accepted .no-button {
    min-height: 0;
    padding-block: 0;
    border-width: 0;
    opacity: 0;
}

.card-holder-one .first-cta .yes-button {
    min-width: 0;
    transition: grid-column 450ms ease;
}

.card-holder-one .first-cta.no-accepted .yes-button {
    grid-column: 1 / -1;
}

.card-holder-one .cta button {
    min-height: 66px;
    font-size: clamp(1.8rem, 5vw, 2rem);
}

.card-holder-two {
    display: flex;
    width: min(405px, 100%);
    min-height: min(610px, calc(100dvh - 32px));
    flex-direction: column;
    padding: 14px;
}

.card-holder-two .heart-fuel {
    top: 4.5%;
    right: 7.5%;
    width: 56px;
}

.heart-fuel {
    position: absolute;
    z-index: 1;
    top: 7%;
    right: 7%;
    width: clamp(54px, 12vw, 82px);
    height: auto;
    pointer-events: none;
}

.heart-fuel img {
    display: block;
    width: 100%;
    height: 100%;
}

.playground {
    min-height: 270px;
    aspect-ratio: 1.36;
    display: grid;
    place-items: center;
    padding: 48px 28px;
    background: var(--soft-grey);
}

.playground h1,
.cta button {
    color: #000;
    font-family: "Ink Free", "Segoe Print", "Bradley Hand", Caveat, cursive;
    font-weight: 700;
}

.playground h1 {
    max-width: 420px;
    font-size: clamp(2rem, 7vw, 3rem);
    line-height: 1.25;
    text-align: center;
}

.cta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 22px;
}

.cta button {
    min-height: clamp(62px, 13vw, 90px);
    border: 1px solid transparent;
    background: var(--soft-caramel);
    box-shadow: 0 6px 14px rgb(42 29 12 / 20%);
    color: #000;
    font-family: "Ink Free", "Segoe Print", "Bradley Hand", Caveat, cursive;
    font-style: normal;
    font-weight: 700;
    cursor: pointer;
    font-size: clamp(2rem, 7vw, 3rem);
}

.cta button:last-child {
    background: var(--soft-caramel);
}

.card-holder-two .playground {
    min-height: 0;
    aspect-ratio: 1.47;
    flex: 0 0 auto;
    padding: 32px 20px;
}

.card-holder-two .playground h1 {
    font-size: clamp(1.5rem, 2.2vw, 1.8rem);
    line-height: 1.2;
}

.food-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px 8px;
    margin: 40px 24px 0;
    padding: 0;
    list-style: none;
}

.food-options li {
    min-width: 0;
}

.choice-button {
    display: grid;
    width: 100%;
    min-height: 60px;
    padding: 2px;
    border: 0;
    border-radius: 999px;
    background: var(--light-choco);
    font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
    font-size: clamp(1.6rem, 2.5vw, 2rem);
    place-items: center;
    cursor: pointer;
    transition: outline-color 160ms ease, transform 160ms ease, background-color 160ms ease;
}

.choice-button:hover {
    transform: scale(1.04);
}

.choice-button.is-selected {
    outline: 3px solid #ff9750;
    outline-offset: 0;
}

.choice-button:focus-visible {
    outline: 3px solid #ff9750;
    outline-offset: 2px;
}

.card-holder-two .cta {
    display: flex;
    justify-content: center;
    margin-top: auto;
    padding-top: 54px;
}

.card-holder-two .cta button {
    width: min(184px, 70%);
    min-height: 67px;
}

.card-holder-four {
    display: flex;
    width: min(405px, 100%);
    min-height: 602px;
    flex-direction: column;
    padding: 14px;
}

.card-holder-four .heart-fuel {
    top: 4.5%;
    right: 7.5%;
    width: 56px;
}

.card-holder-four .playground {
    min-height: 0;
    aspect-ratio: 1.47;
    flex: 0 0 auto;
    padding: 32px 20px;
}

.card-holder-four .playground h1 {
    font-size: clamp(1.5rem, 2.2vw, 1.8rem);
    line-height: 1.2;
}

.date-picker,
.time-picker {
    width: 82%;
    margin-inline: auto;
}

.date-picker {
    margin-top: 6px;
}

.time-picker {
    margin-top: 8px;
}

.date-picker label,
.time-picker label {
    display: block;
    margin: 0 0 2px 2px;
    color: var(--deep-brown);
    font-size: 1.25rem;
    font-style: italic;
    font-weight: 700;
    line-height: 1.3;
}

.date-picker input,
.time-picker input {
    width: 100%;
    min-height: 67px;
    padding: 8px 12px;
    border: 1px solid var(--deep-brown);
    border-radius: 0;
    background: #fffdfa;
    color: #111;
    font: 1.25rem Arial, sans-serif;
    text-align: center;
}

.card-holder-four .cta {
    display: flex;
    justify-content: center;
    margin-top: auto;
    padding-top: 20px;
}

.card-holder-four .cta button {
    width: 82%;
    min-height: 67px;
    color: var(--deep-brown);
    font-size: clamp(1.5rem, 5vw, 1.8rem);
}

.card-holder-five {
    display: flex;
    width: min(405px, 100%);
    min-height: 572px;
    flex-direction: column;
    padding: 14px;
}

.card-holder-five .heart-fuel {
    top: 4.5%;
    right: 7.5%;
    width: 56px;
}

.card-holder-five .playground {
    min-height: 0;
    aspect-ratio: 1.75;
    flex: 0 0 auto;
    align-content: center;
    gap: 0;
    padding: 28px 18px;
}

.card-holder-five .playground h1 {
    font-size: clamp(1.5rem, 2.2vw, 1.8rem);
    line-height: 1.2;
}

.card-holder-five .playground p {
    margin-top: 2px;
    color: var(--deep-brown);
    font-size: 1rem;
    font-style: italic;
    font-weight: 700;
    line-height: 1.2;
}

.activity-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 35px 12px;
    margin: 24px 20px 0;
    padding: 0;
    list-style: none;
}

.activity-options li {
    min-height: 54px;
}

.activity-options .choice-button {
    min-height: 54px;
    background: transparent;
    font-size: 2.5rem;
}

.selection-hint {
    min-height: 1.3em;
    margin: 8px 0 0;
    color: var(--deep-brown);
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
}

.selection-hint:empty {
    visibility: hidden;
}

.date-picker input:focus-visible,
.time-picker input:focus-visible {
    outline: 3px solid #ff9750;
    outline-offset: 2px;
}

.cta button:hover:not(:disabled) {
    filter: brightness(.98);
}

.cta button:disabled {
    cursor: not-allowed;
}

.final-plans {
    flex-wrap: wrap;
    justify-content: center;
}

.final-plans span {
    line-height: 1.4;
    max-width: 100%;
    overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}



.card-holder-five .cta {
    display: flex;
    justify-content: center;
    margin-top: auto;
    padding-top: 30px;
}

.card-holder-five .cta button {
    width: 82%;
    min-height: 66px;
    color: var(--deep-brown);
    font-size: clamp(1.35rem, 5vw, 1.65rem);
}

.card-holder-six {
    display: flex;
    width: min(405px, 100%);
    padding: 14px;
}

.final-card {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 36px 18px 28px;
    background: var(--soft-grey);
    text-align: center;
}

.final-heart {
    display: block;
    width: 72px;
    height: 105px;
    object-fit: contain;
}

.final-card h1 {
    color: #000;
    font-size: clamp(1.5rem, 6vw, 1.8rem);
    font-weight: 700;
    line-height: 1.25;
}

.final-card h1 span {
    font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
}

.pickup-message {
    max-width: 300px;
    color: #777;
    font-size: 1.1rem;
    font-style: italic;
    line-height: 1.35;
}

.pickup-message span,
.final-details span,
.final-plans span,
.travel-icon {
    font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
}

.final-details {
    display: grid;
    gap: 2px;
    color: #111;
    font-size: 1.1rem;
    font-style: italic;
}

.final-plans {
    display: flex;
    gap: 8px;
    font-size: 1.5rem;
}

.travel-icon {
    font-size: 2rem;
}

@media (max-width: 380px) {
    .card-holder,
    .card-holder-one {
        padding: 16px;
    }

    .playground {
        min-height: 260px;
    }

    .heart-fuel {
        top: 7%;
        right: 7%;
    }

    .card-holder-two {
        min-height: min(610px, calc(100dvh - 32px));
    }

    .card-holder-four {
        min-height: min(602px, calc(100dvh - 32px));
    }

    .card-holder-five {
        min-height: min(572px, calc(100dvh - 32px));
    }

    .activity-options {
        gap: 24px 8px;
        margin: 20px 10px 0;
    }

    .food-options {
        gap: 12px 6px;
        margin: 28px 10px 0;
    }

    .food-options li {
        min-height: 52px;
    }
}
/* Return-to-origin composition: the opening scene becomes the birthday reveal. */
.hero-birthday{display:none;position:absolute;z-index:8;inset:0;place-items:center;text-align:center;padding:70px 20px;background:radial-gradient(ellipse at 50% 48%,#fbf1dd 0%,#eee0c7 65%,#dfc8a4 100%)}.hero-birthday h2{font:400 clamp(5rem,13vw,12rem)/.75 var(--script);letter-spacing:-.06em;color:#9f4f3c;margin:34px 0}.hero-birthday h2 em{font-weight:400}.hero-birthday-name{font:1.8rem var(--script);color:#6b5845}.hero.is-birthday-reveal .hero-birthday{display:grid;align-content:center}.hero.is-birthday-reveal .hero-topline,.hero.is-birthday-reveal .hero-copy,.hero.is-birthday-reveal .flight-path,.hero.is-birthday-reveal .paper-jet,.hero.is-birthday-reveal .horizon,.hero.is-birthday-reveal .hero-footer,.hero.is-birthday-reveal .suspension-scene{visibility:hidden}.hero-confetti{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,#b56d4b 2px,transparent 3px),radial-gradient(circle,#75816a 2px,transparent 3px),radial-gradient(circle,#d5ad75 3px,transparent 4px);background-size:87px 109px,131px 137px,173px 151px;background-position:10px -20px,55px 25px,30px 8px;opacity:.6}@media(max-width:760px){.hero-birthday h2{font-size:clamp(5.4rem,20vw,8rem)}}

/* PASS 1 refinement: hero composition alignment */
.hero {
  --hero-gutter: clamp(24px, 6vw, 92px);
  min-height: min(900px, 100svh);
  min-height: max(700px, min(900px, 100svh));
  padding: 26px var(--hero-gutter) 32px;
  display: block;
  position: relative;
}
.hero-topline {
  position: relative;
  width: 100%;
  min-height: 34px;
}
.hero-copy {
  width: min(53%, 650px);
  margin: clamp(76px, 12vh, 124px) 0 0 clamp(0px, 3.5vw, 52px);
}
.hero-copy .eyebrow {
  max-width: 34ch;
  line-height: 1.7;
}
.hero-copy h1 {
  max-width: 650px;
  font-size: clamp(3.7rem, 6.2vw, 6.5rem);
  line-height: 1.02;
  margin: 22px 0 25px;
  text-wrap: balance;
}
.name-field { width: min(290px, 100%); }
.hero-note { margin-top: 13px; }
.flight-path {
  width: 49%;
  height: 34%;
  right: 2.5%;
  top: 24%;
}
.paper-jet {
  width: clamp(84px, 10vw, 132px);
  right: 13%;
  top: 28%;
}
.horizon {
  bottom: 12%;
  height: 19%;
}
.suspension-scene {
  right: clamp(5%, 9vw, 145px);
  bottom: 7%;
  top: auto;
  width: clamp(250px, 27vw, 350px);
  height: clamp(285px, 34vw, 370px);
}
.support-line {
  top: 22px;
  height: 4px;
}
.envelope-loop { top: 19px; }
.envelope { top: 48px; width: 76%; }
.scene-caption {
  bottom: -3px;
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  white-space: nowrap;
}
.hero-footer {
  left: var(--hero-gutter);
  right: var(--hero-gutter);
  bottom: 20px;
}

@media (min-width: 761px) and (max-width: 1050px) {
  .hero-copy { width: 51%; margin-top: 86px; margin-left: 0; }
  .hero-copy h1 { font-size: clamp(3.5rem, 6.3vw, 5rem); }
  .paper-jet { right: 9%; top: 29%; width: 95px; }
  .flight-path { width: 50%; right: 0; top: 27%; }
  .suspension-scene { right: 4%; width: 280px; height: 310px; bottom: 8%; }
  .scene-caption { font-size: 1.15rem; }
}

@media (max-width: 760px) {
  .hero {
    min-height: max(780px, 100svh);
    padding: 18px 22px 28px;
  }
  .hero-topline { gap: 12px; padding-bottom: 12px; font-size: .55rem; }
  .edition { max-width: 145px; line-height: 1.5; }
  .hero-copy {
    width: min(100%, 510px);
    margin: clamp(52px, 8vh, 72px) 0 0;
  }
  .hero-copy .eyebrow { max-width: 31ch; font-size: .6rem; }
  .hero-copy h1 {
    max-width: 500px;
    font-size: clamp(3.2rem, 10.5vw, 4.8rem);
    line-height: 1.02;
    margin: 16px 0 20px;
  }
  .name-field { width: min(260px, 80%); }
  .hero-note { font-size: 1.2rem; }
  .flight-path { width: 78%; height: 23%; right: -7%; top: 40%; opacity: .4; }
  .paper-jet { width: 78px; right: 10%; top: 41%; }
  .horizon { bottom: 14%; height: 14%; }
  .suspension-scene {
    right: 7%;
    bottom: 6%;
    top: auto;
    width: clamp(205px, 54vw, 270px);
    height: clamp(235px, 60vw, 290px);
  }
  .support-line { top: 17px; }
  .envelope-loop { top: 14px; height: 27px; }
  .envelope { top: 40px; width: 76%; }
  .scene-caption { bottom: -2px; font-size: 1.05rem; }
  .hero-footer { left: 22px; right: 22px; bottom: 14px; font-size: .48rem; letter-spacing: .09em; }
}

@media (max-width: 390px) {
  .hero { min-height: max(760px, 100svh); padding-inline: 18px; }
  .hero-copy { margin-top: 45px; }
  .hero-copy h1 { font-size: clamp(2.85rem, 11vw, 3.3rem); }
  .paper-jet { width: 65px; top: 43%; right: 8%; }
  .flight-path { top: 42%; height: 20%; }
  .suspension-scene { width: 190px; height: 220px; right: 5%; bottom: 7%; }
  .scene-caption { font-size: .95rem; }
  .hero-footer { font-size: .43rem; }
}

/* PASS 1 — complete cinematic composition pass across all story scenes */
:root{--paper:#f3e7d0;--ink:#352b27;--accent:#a65d49;--leather:#79543c;--muted:#80664f;--line:#c8b394}
html{scroll-behavior:smooth;scroll-padding-top:0}
.story-page{background:#f3e7d0}
.story-page main{background:#f3e7d0}
.scene{isolation:isolate}

/* Opening: centered editorial balance, with the envelope support confined to the envelope. */
.hero{
  min-height:max(760px,100svh);
  padding:clamp(24px,4vw,58px) clamp(22px,6vw,96px) 52px;
  background:radial-gradient(ellipse at 50% 35%,rgba(255,249,235,.92) 0%,rgba(248,237,216,.74) 42%,transparent 73%),linear-gradient(180deg,#f5e9d2 0%,#f0dfbf 72%,#e5d0aa 100%);
}
.hero-topline{display:none!important}
.hero-copy{
  width:min(620px,48%);
  margin:clamp(92px,14vh,150px) 0 0 clamp(0px,3.5vw,54px);
}
.hero-copy .eyebrow{max-width:34ch;line-height:1.75}
.hero-copy h1{max-width:650px;font-size:clamp(3.7rem,6.2vw,6.8rem);line-height:.98;margin:24px 0 28px;text-wrap:pretty}
.name-field{width:min(290px,100%)}
.name-field input{border-bottom:1px solid rgba(83,62,43,.42)}
.hero-note{margin-top:14px}
.flight-path{width:43%;height:31%;right:4%;top:24%;opacity:.64}
.paper-jet{width:clamp(82px,9vw,126px);right:13%;top:27%}
.horizon{left:-2%;right:-2%;bottom:-1%;height:22%;opacity:.62;overflow:hidden;mask-image:linear-gradient(to bottom,#000 0%,#000 44%,rgba(0,0,0,.72) 69%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 44%,rgba(0,0,0,.72) 69%,transparent 100%)}
.horizon span{bottom:-68%;height:150%;width:90%;filter:blur(.3px)}
.horizon span:nth-child(1){left:-23%}.horizon span:nth-child(2){left:4%;bottom:-80%}.horizon span:nth-child(3){left:34%;bottom:-90%}.horizon span:nth-child(4){right:-20%;bottom:-76%}.horizon span:nth-child(5){right:-42%;bottom:-112%}
.suspension-scene{right:clamp(5%,10vw,150px);bottom:9%;top:auto;width:clamp(250px,26vw,350px);height:clamp(275px,32vw,365px)}
.support-line{left:13%;right:13%;top:22px;height:2px;background:linear-gradient(180deg,#a77d50,#765333);box-shadow:0 2px 3px #60482c24}
.line-knot{left:calc(50% - 12px);top:-5px;width:24px;height:13px}
.envelope-loop{top:19px;height:27px;border-width:2px}
.envelope{top:44px;width:82%}
.scene-caption{bottom:-28px;font-size:clamp(1.05rem,1.6vw,1.35rem);white-space:normal}
.hero-footer{left:50%;right:auto;bottom:17px;transform:translateX(-50%);justify-content:center;color:#79543c}
.hero-footer .scroll-mark{display:block;font-size:1.5rem;line-height:1;animation:scroll-breathe 2.2s ease-in-out infinite}
@keyframes scroll-breathe{0%,100%{transform:translateY(0);opacity:.65}50%{transform:translateY(5px);opacity:1}}

/* Landing: a quiet ground plane, not a separate hard-edged panel. */
.landing-scene{min-height:88svh;padding:90px 24px;background:radial-gradient(ellipse at 50% 56%,#d9c19c 0%,#e4d1af 43%,#eee0c6 78%,#f3e7d0 100%)}
.landing-scene:before{background:repeating-linear-gradient(168deg,transparent 0 35px,#a98d6728 36px,#e8d8b83a 38px,transparent 42px);opacity:.26;mask-image:linear-gradient(to bottom,transparent 0%,#000 28%,#000 80%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 28%,#000 80%,transparent 100%)}
.broken-thread{width:clamp(80px,19vw,260px);height:2px;opacity:.8}.broken-thread-left{left:0;transform:rotate(1deg)}.broken-thread-right{right:0;transform:rotate(-1deg)}
.sand-haze{inset:26% 0 0;background:radial-gradient(ellipse at 50% 100%,#a98c6466,transparent 68%)}
.landed-envelope{width:clamp(210px,27vw,340px);transform:rotate(-7deg) translateY(-2vh);box-shadow:0 28px 32px #5b432d25}
.landing-caption{bottom:13%;max-width:680px;margin:auto;font-size:clamp(1.5rem,2.4vw,2.2rem)}
.section-marker{font-size:.58rem;letter-spacing:.15em;opacity:.76}

/* Featured memory: one balanced editorial frame, with breathing room around the image. */
.featured-memory{min-height:100svh;padding:clamp(100px,12vh,145px) clamp(24px,10vw,150px) 105px;grid-template-columns:minmax(260px,.8fr) minmax(340px,1fr);gap:clamp(40px,7vw,110px);background:radial-gradient(ellipse at 75% 42%,#f8efdf 0%,#f1e5d0 55%,#ead9bb 100%)}
.featured-intro{padding-left:0;max-width:430px;justify-self:center}
.featured-intro .eyebrow{line-height:1.8}
.featured-intro h2{font-size:clamp(3rem,4.8vw,5.2rem);line-height:1.02}
.featured-photo{width:min(100%,560px);padding:13px 13px 42px;transform:rotate(1.5deg);box-shadow:0 30px 55px #4e382425,0 3px 8px #4e38241b}
.featured-photo img{aspect-ratio:.94;max-height:68vh}
.photo-caption{right:clamp(24px,9vw,130px);bottom:32px;font-size:1.3rem}

/* Archive: an intentional memory wall with a tall, continuous board. */
.memory-archive{padding:clamp(105px,13vh,155px) clamp(20px,7vw,108px) clamp(120px,15vh,180px);background:linear-gradient(180deg,#e9d9bd 0%,#e5d1ad 48%,#ead9bd 100%)}
.archive-heading{max-width:760px;margin:0 auto clamp(50px,7vw,86px);text-align:center}
.archive-heading h2{font-size:clamp(3rem,5.2vw,5.4rem);line-height:1.03}
.archive-board{max-width:1180px;min-height:clamp(1200px,118vw,1540px);border-radius:2px;background:radial-gradient(ellipse at 50% 15%,#ead9b9,#e0cba7 70%,#d8c09a);box-shadow:inset 0 0 95px #8d70451b,0 30px 65px #614a2c17}
.memory-threads path{stroke-width:1.8;opacity:.88}
.archive-photo{width:clamp(135px,17%,220px);padding:9px 9px 34px;box-shadow:0 16px 28px #4d372426,0 2px 5px #4d372418}
.archive-photo img{aspect-ratio:.92}
.archive-photo figcaption{font-size:clamp(.88rem,1.25vw,1.15rem)}
.p1{left:7%;top:6%;transform:rotate(-7deg)}.p2{left:39%;top:4%;transform:rotate(4deg)}.p3{right:7%;top:12%;transform:rotate(6deg)}
.p4{left:20%;top:24%;transform:rotate(3deg)}.p5{left:62%;top:27%;transform:rotate(-5deg)}.p6{left:5%;top:40%;transform:rotate(4deg)}
.p7{left:39%;top:42%;transform:rotate(-3deg)}.p8{right:5%;top:45%;transform:rotate(5deg)}.p9{left:21%;top:59%;transform:rotate(-5deg)}
.p10{left:60%;top:62%;transform:rotate(4deg)}.p11{left:5%;top:76%;transform:rotate(-3deg)}.p12{left:38%;top:79%;transform:rotate(5deg)}
.p13{right:5%;top:76%;transform:rotate(-6deg)}.p14{left:24%;top:7%;width:clamp(115px,14%,180px);transform:rotate(2deg)}.p15{right:26%;top:15%;width:clamp(120px,15%,190px);transform:rotate(-2deg)}
.archive-stamp{right:40%;bottom:3.5%;font-size:1.2rem;background:#e8d6b6aa}

/* Hanging photo: centered like a found keepsake before the viewer travels back. */
.hanging-memory{min-height:100svh;padding:clamp(110px,14vh,160px) clamp(24px,12vw,180px) 110px;grid-template-columns:1fr 1fr;gap:clamp(45px,8vw,120px);background:radial-gradient(ellipse at 48% 20%,#f7edda 0%,#ecddc2 60%,#e2cba5 100%)}
.hanging-rope{height:30%;left:50%;background:#8b6746}
.hanging-rope:before{left:-30vw;width:60vw;opacity:.72}
.hanging-photo{width:min(100%,360px);padding:12px 12px 48px;transform:rotate(-3.5deg);box-shadow:0 26px 45px #4e382426}
.hanging-photo img{aspect-ratio:.82}
.journey-prompt{max-width:340px;justify-self:center}
.journey-prompt p{font-size:clamp(2.3rem,3.4vw,3.5rem);line-height:1.08}

/* Birthday: strong center, consistent paper atmosphere, quiet details around the message. */
.birthday-ending{min-height:100svh;padding:110px 24px 100px;background:radial-gradient(ellipse at 50% 43%,#fbf2e1 0%,#f3e5cb 58%,#e4cda7 100%)}
.birthday-ending>.eyebrow{top:14%;letter-spacing:.15em}
.birthday-copy{max-width:900px;margin-top:-1vh}
.birthday-small{letter-spacing:.16em}
.birthday-copy h2{font-size:clamp(6rem,13vw,12.5rem);line-height:.78;margin:32px 0}
.birthday-copy p{font-size:clamp(1.45rem,2vw,1.9rem)}
.ending-thread{width:clamp(70px,17vw,240px);opacity:.65}
.ending-footnote{bottom:70px;font-size:1.3rem}
.date-link{border-bottom-color:#a65d4970}

/* Tablet and mobile retain the same hierarchy without overlap. */
@media (min-width:761px) and (max-width:1050px){
 .hero{min-height:max(760px,100svh)}.hero-copy{width:51%;margin-top:110px;margin-left:0}.hero-copy h1{font-size:clamp(3.6rem,6vw,5.4rem)}
 .suspension-scene{right:4%;width:280px;height:310px;bottom:9%}.support-line{left:14%;right:14%}.scene-caption{font-size:1.1rem}
 .featured-memory{padding-inline:6vw;gap:5vw}.archive-board{min-height:1300px}
}
@media(max-width:760px){
 .hero{min-height:max(850px,100svh);padding:28px 22px 46px;background:radial-gradient(ellipse at 50% 30%,#fbf1df 0%,#f2e2c5 57%,#e5cda6 100%)}
 .hero-copy{width:min(100%,540px);margin:clamp(54px,8vh,82px) auto 0;text-align:center}
 .hero-copy .eyebrow{max-width:32ch;margin:0 auto;font-size:.62rem}.hero-copy h1{font-size:clamp(3.25rem,10.5vw,5rem);line-height:.99;margin:20px auto 22px;max-width:560px}
 .name-field{width:min(280px,88%);margin:0 auto;text-align:left}.hero-note{font-size:1.2rem}
 .flight-path{width:78%;height:19%;right:2%;top:43%;opacity:.42}.paper-jet{width:74px;right:12%;top:43%}
 .horizon{height:20%;bottom:0}.suspension-scene{width:clamp(205px,54vw,270px);height:clamp(235px,60vw,290px);right:50%;transform:translateX(50%);bottom:8%}
 .support-line{left:13%;right:13%;top:17px}.envelope-loop{top:14px;height:24px}.envelope{top:39px;width:80%}.scene-caption{bottom:-24px;font-size:1.02rem}
 .hero-footer{bottom:15px}.hero-footer .scroll-mark{font-size:1.35rem}
 .landing-scene{min-height:78svh}.landed-envelope{width:clamp(205px,66vw,300px)}.landing-caption{bottom:10%;font-size:1.35rem;max-width:32ch;margin:auto}
 .section-marker{left:22px;right:22px;font-size:.52rem}
 .featured-memory{min-height:auto;padding:100px 8vw 100px;grid-template-columns:1fr;gap:32px}.featured-intro{text-align:center;max-width:540px;margin:auto}.featured-intro h2{font-size:clamp(3rem,10vw,4.3rem)}.featured-photo{width:min(100%,500px)}.featured-photo img{aspect-ratio:.92;max-height:none}.photo-caption{position:static;text-align:center;margin-top:20px}
 .memory-archive{padding:100px 14px 120px}.archive-heading{padding:0 12px;margin-bottom:42px}.archive-heading h2{font-size:clamp(2.7rem,9.5vw,4rem)}.archive-board{min-height:clamp(1160px,300vw,1450px)}.archive-photo{width:clamp(100px,29%,160px);padding:6px 6px 25px}.archive-photo img{aspect-ratio:.88}.archive-photo figcaption{font-size:.82rem;bottom:4px;left:7px}.archive-photo:after{width:11px;height:11px}
 .p1{left:3%;top:4%}.p2{left:39%;top:3%}.p3{right:3%;top:16%}.p4{left:17%;top:21%}.p5{right:4%;top:33%}.p6{left:3%;top:38%}.p7{left:38%;top:41%}.p8{right:3%;top:52%}.p9{left:17%;top:57%}.p10{left:57%;top:64%}.p11{left:3%;top:73%}.p12{left:36%;top:78%}.p13{right:3%;top:84%}.p14{left:20%;top:10%;width:24%}.p15{right:24%;top:28%;width:24%}.archive-stamp{right:35%;bottom:2.5%;font-size:.9rem;padding:9px}
 .hanging-memory{min-height:auto;padding:110px 8vw 90px;grid-template-columns:1fr;gap:38px;align-content:center}.hanging-rope{left:50%;height:22%}.hanging-rope:before{left:-35vw;width:70vw}.hanging-photo{width:min(68%,300px);margin-top:18px;justify-self:center}.journey-prompt{justify-self:center;text-align:center;max-width:360px}.journey-prompt p{font-size:clamp(2.2rem,8vw,3rem)}.desktop-prompt{display:none}.mobile-prompt{display:inline}
 .birthday-ending{min-height:100svh;padding:110px 20px 105px}.birthday-ending>.eyebrow{top:11%;font-size:.58rem}.birthday-copy h2{font-size:clamp(5.4rem,19vw,8.5rem);margin:28px 0}.ending-footnote{bottom:70px;font-size:1.08rem}.date-link{left:20px;right:20px;bottom:23px;text-align:center}
}
@media(max-width:390px){.hero{min-height:850px;padding-inline:18px}.hero-copy{margin-top:48px}.hero-copy h1{font-size:clamp(2.8rem,10.8vw,3.2rem)}.suspension-scene{width:190px;height:220px;bottom:9%}.scene-caption{font-size:.9rem}.archive-board{min-height:1160px}.archive-photo figcaption{font-size:.72rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-footer .scroll-mark{animation:none}}