:root{--ink:#2f174f;--purple:#7440c4;--purple-dark:#3c195f;--lavender:#cfb4f5;--lilac:#e7dcfa;--white:#fffbff;--pink:#f5bfdc;--violet-pink:#d78aca;--font-main:'DM Sans',Arial,sans-serif;--font-display:'Anton',Impact,'Arial Narrow',sans-serif;--font-script:'Sacramento','Brush Script MT',cursive}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:32px}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font-main);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:3px solid #f086c3;outline-offset:5px}
::selection{background:#e8bbfc;color:#2f174f}
.grain{position:fixed;z-index:45;inset:0;pointer-events:none;opacity:.11;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='.62' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.25' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.progress{position:fixed;z-index:60;left:0;top:0;height:3px;background:#d684d7;width:0;pointer-events:none;transition:width .12s linear}
.section-pad{padding:clamp(78px,9vw,140px) max(24px,calc((100vw - 1160px)/2))}
.reveal{opacity:0;transform:translateY(35px);transition:opacity .85s ease,transform .9s cubic-bezier(.15,.7,.2,1)}
.reveal.is-visible{opacity:1;transform:translateY(0)}
.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(22px,6vw,88px);font-size:11px;font-weight:800;letter-spacing:.16em;position:absolute;left:0;right:0;z-index:12;color:#371658}
.topbar-symbol{font-size:29px;line-height:1;color:var(--purple)}
/* HERO - oversized poster typography with photographic collage */
.hero{min-height:740px;min-height:100svh;position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(115deg,#fffafd 0%,#f0e4fd 55%,#f8deed 100%);display:flex;flex-direction:column;justify-content:center}
.hero::before{content:'';position:absolute;width:45vw;height:45vw;min-width:300px;min-height:300px;border:1px solid #b28bd5;border-radius:50%;left:-20vw;top:13vh;opacity:.44}
.hero::after{content:'';position:absolute;width:360px;height:360px;border:1px solid #bc91d7;border-radius:50%;right:-195px;bottom:5%;opacity:.52}
.hero-stage{position:relative;width:min(100%,1450px);margin:15px auto 0;min-height:clamp(610px,70vw,850px);display:flex;justify-content:center;align-items:center;isolation:isolate}
.hero-typography{position:absolute;z-index:1;inset:10% 0 10%;width:100%;display:flex;justify-content:center;align-items:center;text-align:center;pointer-events:none}
.hero-typography h1{margin:0;display:flex;flex-direction:column;line-height:.83;letter-spacing:-.045em;color:var(--purple);text-shadow:0 1px 0 #ffffff12}
.hero-typography .happy{font-family:var(--font-display);font-size:clamp(124px,27vw,386px);white-space:nowrap}
.hero-typography .birthday{font-family:var(--font-display);font-size:clamp(85px,16.3vw,236px);white-space:nowrap;letter-spacing:-.047em;transform:translateY(.13em)}
.hero-portrait-wrap{position:relative;z-index:2;width:min(30vw,360px);min-width:260px;margin-top:42px;transform:rotate(-5deg);animation:hero-enter 1.3s cubic-bezier(.2,.8,.2,1) both}
.hero-behind-shape{position:absolute;inset:-15px;border-radius:45% 45% 18% 18%;background:#ce93e3;transform:rotate(10deg);box-shadow:0 25px 50px #73369a24}
.hero-portrait{position:relative;aspect-ratio:3/4;margin:0;overflow:hidden;border:8px solid var(--white);border-radius:46% 46% 18% 18%;box-shadow:0 24px 76px #3c195f40;transform:rotate(4deg)}
.hero-portrait img{width:100%;height:100%;object-fit:cover;object-position:center 41%;filter:saturate(1.03)}
.hero-heart{position:absolute;color:var(--purple);text-shadow:0 5px 10px #dfb8ec;font-size:85px;line-height:1;pointer-events:none}
.heart-a{top:7%;left:-70px;animation:floaty 5s ease-in-out infinite}
.heart-b{bottom:4%;right:-42px;color:#eaa1c7;font-size:56px;animation:floaty 4s ease-in-out -2s infinite}
.hero-script{position:absolute;z-index:5;bottom:4%;left:50%;width:100%;margin:0;transform:translateX(-50%) rotate(-7deg);font-family:var(--font-script);font-size:clamp(87px,12vw,180px);line-height:.8;color:var(--ink);text-align:center;white-space:nowrap;text-shadow:2px 3px 0 #fff9;pointer-events:none;animation:script-enter 1.1s 1s ease both}
.hero-script span{display:inline-block;font-family:var(--font-main);font-size:.22em;vertical-align:middle;transform:rotate(12deg)}
.hero-stars span{position:absolute;z-index:4;color:#a16bcc;animation:twinkle 3.8s ease-in-out infinite;pointer-events:none}
.hero-stars span:nth-child(1){font-size:42px;top:19%;left:12%}.hero-stars span:nth-child(2){font-size:62px;top:16%;right:12%;animation-delay:.7s}.hero-stars span:nth-child(3){font-size:32px;bottom:22%;left:13%;animation-delay:1.2s}.hero-stars span:nth-child(4){font-size:40px;right:10%;bottom:16%;animation-delay:.4s}
.orb{position:absolute;border-radius:50%;filter:blur(11px);pointer-events:none}.orb-one{height:150px;width:150px;background:#d99aff44;top:9%;right:17%}.orb-two{height:230px;width:230px;background:#e98eb955;bottom:12%;left:13%}
.hero-bottom{position:absolute;z-index:6;bottom:20px;left:clamp(22px,6vw,88px);right:clamp(22px,6vw,88px);display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end;gap:10px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:800}
.hero-small-date{text-align:right}.scroll-cue{justify-self:center;text-align:center;display:grid;place-items:center;height:54px;width:54px;border:1px solid #623b83;border-radius:50%;text-decoration:none;font-size:27px;animation:floaty 3s ease-in-out infinite}
.nickname-strip{background:var(--purple-dark);color:#fff;overflow:hidden;padding:22px 0;border-top:2px solid #7140a2;border-bottom:2px solid #7140a2}
.nickname-track{display:flex;align-items:center;white-space:nowrap;width:max-content;gap:24px;font-size:clamp(17px,2.3vw,26px);font-weight:800;letter-spacing:-.04em;animation:marquee 30s linear infinite}
.nickname-track .asterisk{font-size:19px;color:#e7b6ef}
/* A letter, with a soft framed photograph */
.letter-section{position:relative;overflow:hidden;background:#fff9fe}
.letter-grid{display:grid;grid-template-columns:.87fr 1.13fr;gap:clamp(40px,7vw,105px);align-items:center}
.letter-photo-group{position:relative;max-width:485px;padding:25px 24px 36px}
.letter-oval-back{position:absolute;inset:-15px -15px 25px;border-radius:48% 52% 49% 51%;background:#e1c5f7;transform:rotate(10deg);filter:drop-shadow(0 20px 26px #4f24501a)}
.letter-frame{position:relative;overflow:hidden;border:12px solid white;border-bottom-width:31px;transform:rotate(-5deg);background:#decdf1;box-shadow:0 25px 48px #3a20552c;aspect-ratio:3/4}
.letter-frame img{height:100%;width:100%;object-fit:cover;object-position:52% 47%}
.photo-scribble{position:absolute;right:-10px;top:-36px;font-size:72px;color:#a475da;transform:rotate(15deg)}
.letter-sticker{position:absolute;bottom:3px;left:0;font-family:var(--font-script);font-size:clamp(56px,5.5vw,95px);color:#65359c;transform:rotate(-8deg);text-shadow:1px 1px white}
.floating-handdrawn{position:absolute;right:5%;top:6%;font-size:160px;color:#e8caeb;transform:rotate(17deg);font-weight:200}
.letter-text{font-size:clamp(16px,1.5vw,20px);line-height:1.83;letter-spacing:-.012em;max-width:690px}
.letter-text p{margin:0 0 1.35em}.letter-text .letter-finish{margin-top:2em;font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:clamp(23px,2.3vw,35px);line-height:1.55;color:var(--purple)}.letter-finish strong{font-family:var(--font-script);font-style:normal;font-weight:400;font-size:1.9em;color:var(--ink);line-height:1.1}
.tiny-heart{font-size:40px;color:#be84ce;margin-bottom:12px}
/* 3: three words, glowing color fields */
.peace-section{position:relative;min-height:740px;background:#d9c4ef;overflow:hidden;display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:clamp(30px,5vw,90px);isolation:isolate}
.peace-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 27% 43%,#fff8ff 0%,#ead9f4 28%,transparent 68%),radial-gradient(ellipse at 75% 40%,#bb8cd3 0%,transparent 50%);opacity:.9;z-index:-1}
.peace-media{aspect-ratio:4/5;position:relative;max-width:465px;justify-self:center;filter:drop-shadow(0 20px 48px #4e2c7544)}
.peace-media::before{content:'';position:absolute;inset:-22px;border:2px solid #fcf2ffb7;border-radius:49% 48% 46% 45%;transform:rotate(-12deg)}
.peace-media img{width:100%;height:100%;object-fit:cover;object-position:center 41%;border-radius:48% 48% 35% 35%;border:8px solid #fff4;mask-image:linear-gradient(to bottom,#000 0 86%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0 86%,transparent 100%)}
.peace-copy h2{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(49px,6.2vw,105px);font-weight:400;line-height:1.05;letter-spacing:-.025em;margin:0;color:#3b1b60}
.peace-copy em{font-style:normal;color:#fff7ff;text-shadow:0 4px 24px #7243a077}
.peace-strokes{margin-top:35px;font-family:var(--font-script);font-size:80px;color:#fff9ff}
.peace-sparkle{position:absolute;color:#fff9ff;z-index:2;font-size:60px;animation:twinkle 3s infinite}.sparkle-one{left:6%;top:16%}.sparkle-two{right:11%;bottom:15%}
/* 4: photographic-typographic mosaic */
.collage-section{background:#faf5ff;position:relative;overflow:hidden}
.collage-heading{text-align:center;font-size:37px;color:#9d70cc;padding-bottom:24px}
.mosaic{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(9px,1.5vw,19px);max-width:1080px;margin:auto}
.mosaic-tile{min-height:0;aspect-ratio:1/1;position:relative;overflow:hidden;border-radius:clamp(12px,2vw,23px)}
.mosaic-tile.photo{background:#d7bce9}.mosaic-tile.photo img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}.mosaic-tile.photo:hover img{transform:scale(1.06)}
.mosaic-tile.word{display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;font-family:var(--font-display);font-weight:400;letter-spacing:-.04em}
.mosaic-tile.word span{font-size:clamp(28px,5vw,77px);position:relative;z-index:1}.mosaic-tile.word i{position:absolute;right:7px;bottom:-30px;opacity:.2;font-size:clamp(105px,15vw,215px);font-style:normal}
.word-purple{background:#7346bb;color:#fff}.word-lilac{background:#e0c5f8;color:#552789}.word-pink{background:#f4c2e2;color:#642e87}
/* 5: playful food */
.food-section{position:relative;overflow:hidden;background:#f8d9ec}
.food-layout{display:grid;grid-template-columns:1fr .9fr;align-items:center;gap:clamp(25px,7vw,90px)}
.food-pretitle{font-size:40px;margin-bottom:18px}
.food-copy h2{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:clamp(82px,11vw,165px);line-height:.92;margin:0;color:#4a216e;letter-spacing:-.04em}
.food-copy h2 span{color:#ba70b5}.food-copy p{font-size:clamp(19px,2.4vw,30px);font-weight:700;line-height:1.5;letter-spacing:-.03em;max-width:590px;margin:38px 0 0}
.food-image{position:relative;margin:0 auto;transform:rotate(5deg);width:min(100%,430px);aspect-ratio:3/4;background:white;padding:13px 13px 28px;box-shadow:0 20px 55px #4c255a30;border-radius:7px}
.food-image img{width:100%;height:100%;object-fit:cover;object-position:center 49%;border-radius:3px}
.food-star{position:absolute;right:-46px;top:-52px;font-size:110px;color:#9454c9;animation:floaty 4s infinite}
.food-doodle{position:absolute;pointer-events:none;color:#b67cc3;opacity:.4}.doodle-one{font-size:155px;top:-65px;left:-27px}.doodle-two{font-size:230px;bottom:-98px;right:-18px}
/* 6: separate editorial portraits */
.portraits-section{background:#fffafc;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,9vw,150px);row-gap:clamp(86px,12vw,180px);align-items:start}
.portrait-story{position:relative;min-width:0;max-width:520px;margin:auto;width:100%}.portrait-story.story-right{padding-top:120px}.portrait-story.story-full{grid-column:1/-1;max-width:780px;padding-top:5px}
.portrait-photo{position:relative;isolation:isolate;padding:20px 20px 25px;max-height:720px;background:#f9e8f8}
.portrait-photo:before{content:'';position:absolute;inset:-19px;background:#e6cafa;border-radius:40% 50% 50% 30%;z-index:-1;transform:rotate(-8deg)}
.portrait-photo img{height:100%;max-height:620px;width:100%;object-fit:cover;object-position:center 34%;box-shadow:0 16px 35px #4b2b6b29;border-radius:8px}
.portrait-photo.pink-shape::before{background:#f4c3df}.portrait-photo.lilac-shape::before{background:#dbc0fa;transform:rotate(9deg)}.portrait-photo.purple-shape::before{background:#a77cd3;border-radius:41% 29% 20% 34%;transform:rotate(3deg)}
.portrait-story.story-full img{aspect-ratio:1.5;object-fit:cover;object-position:center 46%}
.portrait-story p{font-family:var(--font-script);font-size:clamp(65px,8vw,120px);line-height:1;margin:15px 0 -5px;text-align:center;color:var(--purple-dark);transform:rotate(-4deg)}
.portrait-story p span{font-family:var(--font-main);font-size:.28em;vertical-align:middle}.photo-decoration{position:absolute;top:-62px;right:-22px;font-size:90px;color:var(--purple);line-height:1}
/* 7: playful tags */
.words-section{position:relative;min-height:650px;display:flex;align-items:center;justify-content:center;isolation:isolate;overflow:hidden;background:#ead8fa}
.words-orbit{position:absolute;z-index:-1;width:70vw;height:70vw;min-height:420px;min-width:420px;border:2px solid #fff9;border-radius:50%;box-shadow:0 0 0 150px #f8edff77,0 0 0 300px #e2ccf344}
.words-content{display:flex;flex-direction:column;gap:clamp(13px,2vw,24px);align-items:center;position:relative;z-index:1;width:100%}
.words-line{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(11px,2vw,21px)}
.pill{display:inline-block;padding:clamp(14px,1.7vw,24px) clamp(17px,3vw,38px);font-weight:800;letter-spacing:-.04em;font-size:clamp(20px,3.3vw,47px);border-radius:100px;white-space:nowrap;box-shadow:0 9px 0 #412a6810;transition:transform .25s ease}.pill:hover{transform:translateY(-7px) rotate(2deg)}.pill.light{background:#fffaff;color:#53317a}.pill.dark{background:#5b329a;color:#fff}.pill.pink{background:#efabd1;color:#653084}
.words-heart{position:absolute;left:5%;bottom:-90px;font-size:300px;color:#fff8;transform:rotate(-20deg)}
/* 8: couple photo always last */
.final-section{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 65% 30%,#854fb8 0,#48206c 55%,#32154b 100%);color:white;min-height:1100px;text-align:center;padding:65px 24px 75px}
.final-top{position:relative;z-index:1;font-size:12px;letter-spacing:.18em;font-weight:800;text-transform:uppercase}.final-top span{margin:0 12px;font-size:21px;vertical-align:middle;color:#f4cbe9}
.final-art{position:relative;width:min(100%,510px);margin:55px auto 0;transform:rotate(-5deg)}
.final-picture-glow{position:absolute;inset:-45px;z-index:-1;background:#e89cdb;filter:blur(60px);opacity:.24;border-radius:50%}
.final-picture{padding:12px 12px 32px;margin:0;background:#fff5f9;transform:rotate(-3deg);box-shadow:0 30px 60px #1c092c7f;border-radius:5px;aspect-ratio:3/4.1;overflow:hidden}
.final-picture img{width:100%;height:100%;object-fit:cover;object-position:53% 41%}
.final-hearts{position:absolute;right:-75px;top:16%;font-size:110px;color:#f6c0e2;line-height:.8;writing-mode:vertical-rl;transform:rotate(12deg);animation:floaty 5s ease-in-out infinite}
.final-copy{position:relative;z-index:2;margin:-10px auto 0;max-width:880px}
.final-date{font-size:12px;letter-spacing:.2em;font-weight:800;text-transform:uppercase;margin:25px 0}
.final-copy h2{font-family:var(--font-display);font-weight:400;font-size:clamp(55px,8vw,112px);line-height:1.03;text-transform:uppercase;letter-spacing:-.025em;margin:0}.final-copy h2 em{display:inline-block;font-family:var(--font-script);font-size:1.25em;font-weight:400;text-transform:none;letter-spacing:0;line-height:.8;white-space:nowrap;color:#ffc8ef;transform:rotate(-5deg)}
.final-thanks{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:600;font-size:clamp(19px,3vw,33px);line-height:1.5;margin:36px 0 24px}
.heart-button{display:grid;place-items:center;width:77px;height:77px;border:1.5px solid #f9d7f1;background:#f7e1f4;color:var(--purple);border-radius:50%;font-size:35px;cursor:pointer;margin:0 auto 26px;box-shadow:0 0 35px #eea3dc44;transition:transform .25s ease,box-shadow .25s ease}.heart-button:hover{transform:scale(1.12);box-shadow:0 0 58px #eea3dc77}.heart-button:active{transform:scale(.95)}
.restart{display:inline-block;text-decoration:none;text-transform:uppercase;font-weight:700;letter-spacing:.1em;font-size:11px;padding:13px 15px;border-bottom:1px solid #d9b4f0;opacity:.88}
.final-orbit{position:absolute;pointer-events:none;border:1px solid #fff3;border-radius:50%;width:610px;height:610px}.final-orbit-a{left:-320px;top:10%}.final-orbit-b{right:-400px;bottom:13%;width:800px;height:800px}
.heart-particle{position:fixed;z-index:100;top:0;left:0;pointer-events:none;color:#f1aee3;font-family:var(--font-main);font-weight:900;line-height:1;animation:heart-launch var(--duration,1200ms) cubic-bezier(.15,.7,.1,1) forwards;will-change:transform,opacity}
/* MOVEMENT */
@keyframes hero-enter{from{opacity:0;transform:translateY(95px) rotate(-15deg) scale(.85)}to{opacity:1;transform:translateY(0) rotate(-5deg) scale(1)}}
@keyframes script-enter{from{opacity:0;transform:translate(-50%,30px) rotate(-4deg)}to{opacity:1;transform:translate(-50%,0) rotate(-7deg)}}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -16px}}
@keyframes twinkle{0%,100%{opacity:.6;transform:scale(.8)}50%{opacity:1;transform:scale(1.12)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes heart-launch{0%{transform:translate(0,0) rotate(0) scale(.6);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--angle)) scale(1.45);opacity:0}}
@media (max-width:900px){
 .topbar{height:62px}.hero-stage{min-height:630px}.hero-script{bottom:7%;font-size:clamp(86px,13vw,140px)}
 .letter-grid{grid-template-columns:1fr;gap:42px}.letter-photo-group{width:min(80%,480px);justify-self:center}.letter-text{max-width:750px;margin:auto}
 .peace-section{min-height:650px;grid-template-columns:.9fr 1.1fr}.peace-copy h2{font-size:clamp(43px,6vw,65px)}
 .food-layout{gap:20px}.food-copy h2{font-size:clamp(66px,10vw,115px)}
}
@media (max-width:600px){
 .section-pad{padding:88px 21px}.topbar{height:64px;padding:0 20px;font-size:10px}.topbar-symbol{font-size:20px}
 .hero{min-height:720px;min-height:100svh;justify-content:flex-start}.hero-stage{width:100%;min-height:0;flex:1;margin:56px auto 48px;max-height:760px}
 .hero-typography{inset:0;align-items:flex-start;padding-top:5vh}.hero-typography h1{width:100%;line-height:.94}
 .hero-typography .happy{font-size:clamp(90px,26.5vw,166px)}.hero-typography .birthday{font-size:clamp(61px,16.2vw,100px);letter-spacing:-.04em;transform:translateY(-.04em)}
 .hero-portrait-wrap{position:absolute;width:min(61vw,310px);min-width:0;top:28%;margin:0}.hero-portrait{border-width:6px}.hero-behind-shape{inset:-10px}
 .hero-script{width:max-content;bottom:11%;font-size:clamp(82px,19vw,118px);max-width:98vw;white-space:nowrap}
 .hero-heart{font-size:58px}.heart-a{left:-38px}.heart-b{right:-28px;font-size:36px}
 .hero-stars span:nth-child(1){left:6%;top:24%}.hero-stars span:nth-child(2){top:33%;right:5%}.hero-stars span:nth-child(3){bottom:27%;left:8%}.hero-stars span:nth-child(4){bottom:16%;right:6%}
 .hero-bottom{left:21px;right:21px;bottom:12px;font-size:10px}.scroll-cue{width:44px;height:44px;font-size:24px}
 .nickname-strip{padding:17px 0}.nickname-track{font-size:19px;gap:18px}
 .letter-photo-group{width:min(88%,380px);margin-bottom:15px}.letter-frame{border-width:8px;border-bottom-width:22px}.letter-sticker{font-size:69px}.floating-handdrawn{right:-24px;top:27%;font-size:100px}.letter-text{font-size:17px;line-height:1.77}.letter-text p{margin-bottom:1.3em}.letter-text br{display:none}.letter-finish br{display:block}.letter-text .letter-finish{font-size:24px}
 .peace-section{grid-template-columns:1fr;gap:20px;min-height:0;padding-top:78px;padding-bottom:80px}.peace-media{width:min(75%,350px);aspect-ratio:4/4.5}.peace-copy{text-align:center;margin-top:-8px}.peace-copy h2{font-size:clamp(42px,10vw,65px)}.peace-strokes{font-size:55px;margin-top:16px}
 .collage-section{padding-left:12px;padding-right:12px}.mosaic{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.mosaic-tile{border-radius:12px}.mosaic-tile.word span{font-size:clamp(28px,8vw,52px)}
 .food-section{padding-top:95px;padding-bottom:92px}.food-layout{grid-template-columns:1fr;gap:45px}.food-copy{text-align:center}.food-pretitle{font-size:36px}.food-copy h2{font-size:clamp(75px,20vw,128px)}.food-copy p{font-size:19px;margin:25px auto 0;max-width:400px}.food-image{width:min(78%,340px)}.food-star{font-size:77px;right:-28px;top:-34px}
 .portraits-section{grid-template-columns:1fr;gap:92px}.portrait-story{max-width:370px;width:80%}.portrait-story.story-right{padding-top:0}.portrait-story.story-full{grid-column:auto;width:91%;padding-top:0}.portrait-story.story-full img{aspect-ratio:1.18}.portrait-photo{padding:10px 10px 15px}.portrait-photo:before{inset:-13px}.portrait-story p{font-size:clamp(58px,15vw,92px);white-space:nowrap}.photo-decoration{font-size:65px;top:-47px}
 .words-section{padding:92px 12px;min-height:500px}.words-orbit{box-shadow:0 0 0 80px #f8edff77,0 0 0 150px #e2ccf344}.words-content{gap:13px}.words-line{gap:9px}.pill{font-size:clamp(16px,4.2vw,24px);padding:13px 16px}.words-heart{font-size:150px;bottom:-50px}
 .final-section{padding:55px 22px 70px;min-height:0}.final-top{font-size:10px}.final-art{width:min(75%,390px);margin:46px auto 0}.final-picture{padding:8px 8px 21px}.final-hearts{right:-48px;font-size:76px}.final-copy{margin:0 auto}.final-date{margin:35px 0 22px}.final-copy h2{font-size:clamp(43px,11vw,72px)}.final-copy h2 em{font-size:1.28em;white-space:normal}.final-thanks{font-size:21px;margin:26px auto}.heart-button{width:68px;height:68px}
}
@media (max-width:350px){.hero-typography .happy{font-size:26vw}.hero-script{font-size:17vw}.hero-stage{margin-top:64px}.pill{font-size:15px;padding:12px 13px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}.hero-script{opacity:1}.hero-portrait-wrap{opacity:1}}
/* Final optical alignment: keep the handwritten greeting completely on-screen. */
@media (min-width:601px){.hero-script{bottom:12%;font-size:clamp(85px,10vw,145px)}}
@media (max-width:600px){.portrait-story.story-right p{font-size:clamp(36px,11vw,57px)}}

/* V2: cinematic directional entrances and a playful drifting sky */
.reveal{--from-x:0px;--from-y:70px;--from-rot:0deg;opacity:0;transform:translate3d(var(--from-x),var(--from-y),0) rotate(var(--from-rot)) scale(.96);filter:blur(7px);transition:opacity 1.05s ease,transform 1.15s cubic-bezier(.18,.85,.2,1),filter 1.05s ease;will-change:transform,opacity}
.reveal.is-visible{opacity:1;transform:translate3d(0,0,0) rotate(0deg) scale(1);filter:blur(0)}
.reveal[data-entrance="left"]{--from-x:-105px;--from-y:0px;--from-rot:-3deg}
.reveal[data-entrance="right"]{--from-x:105px;--from-y:0px;--from-rot:3deg}
.reveal[data-entrance="up"]{--from-y:115px}
.reveal[data-entrance="pop"]{--from-y:20px;--from-rot:5deg}
section{isolation:isolate;position:relative;overflow:hidden}
section > :not(.sky-cloud){position:relative;z-index:1}
.sky-cloud{position:absolute;z-index:0;pointer-events:none;width:clamp(130px,26vw,370px);height:clamp(50px,9vw,140px);background:radial-gradient(ellipse at 25% 62%,rgba(255,255,255,.72) 0 30%,transparent 33%),radial-gradient(ellipse at 48% 37%,rgba(255,255,255,.8) 0 37%,transparent 40%),radial-gradient(ellipse at 72% 65%,rgba(255,255,255,.68) 0 33%,transparent 36%);filter:blur(9px);opacity:.56;animation:cloudDrift 22s ease-in-out infinite alternate}
.sky-cloud-a{top:14%;left:-12%}.sky-cloud-b{bottom:12%;right:-14%;animation-duration:29s;animation-delay:-10s;transform:scale(.75)}
@keyframes cloudDrift{0%{translate:-12px 4px}50%{translate:45px -16px}100%{translate:100px 12px}}
.cutout-stage{background:radial-gradient(ellipse at 50% 55%,#f7dfff 0%,#cda7ee 55%,transparent 73%)!important;overflow:visible!important;border-radius:48% 48% 25% 25%!important}
.cutout-stage img{object-fit:contain!important;filter:drop-shadow(0 20px 18px rgba(60,15,100,.22));border-radius:0!important}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;filter:none}.sky-cloud{animation:none}}

/* V4 : compositions à partir des PNG détourés fournis, sans altérer les sujets */
.cutout-frame {background:radial-gradient(circle at 55% 35%,#f9e6ff,#d5b8f2);overflow:visible;border:0;box-shadow:none;}
.cutout-frame img {object-fit:contain!important;object-position:bottom center!important;filter:drop-shadow(0 18px 18px #6b42924a);}
.cutout-mosaic {background:radial-gradient(circle at 40% 40%,#fbe9ff,#c9a6ed)!important;}
.cutout-mosaic img {object-fit:contain!important;object-position:center bottom!important;filter:drop-shadow(0 8px 10px #4b257840);}
.cutout-portrait {background:radial-gradient(circle at 40% 30%,#f7e8ff,#d9baf5);}
.cutout-portrait img {object-fit:contain!important;object-position:center bottom!important;box-shadow:none!important;}
.cutout-final {background:radial-gradient(circle at 50% 30%,#b38bdb,#7042a4);overflow:visible!important;}
.cutout-final img {object-fit:contain!important;object-position:center bottom!important;filter:drop-shadow(0 16px 15px #240d3766);}


.discovery-hint{text-align:center;font-weight:700;letter-spacing:.04em;color:#7148a5;margin:0 auto 1.2rem;font-size:clamp(1rem,2vw,1.3rem)}
.letter-surprise{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%}
.envelope-trigger{appearance:none;border:0;background:none;cursor:pointer;padding:20px;display:block;width:min(100%,370px);aspect-ratio:1.45;perspective:850px}
.envelope-visual{position:relative;display:block;width:100%;height:100%;filter:drop-shadow(0 20px 22px #693e9040);transition:transform .6s}
.envelope-trigger:hover .envelope-visual{transform:translateY(-8px) rotate(-2deg)}
.envelope-back,.envelope-front,.envelope-flap,.envelope-paper,.envelope-seal{position:absolute;display:block}
.envelope-back{inset:16% 2% 0;background:#b88be3;border-radius:14px}
.envelope-paper{inset:12% 14% 18%;background:#fff9ff;border-radius:10px;text-align:center;padding-top:16%;font-size:2rem;transition:transform .8s .2s}
.envelope-front{inset:16% 2% 0;background:#e4c7fa;clip-path:polygon(0 0,50% 53%,100% 0,100% 100%,0 100%);border-radius:12px}
.envelope-flap{inset:16% 2% auto;height:52%;background:#cba4ec;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top center;transition:transform .7s;z-index:3}
.envelope-seal{top:55%;left:calc(50% - 23px);width:46px;height:46px;border-radius:50%;background:#8151b3;color:white;display:grid;place-items:center;z-index:4;font-size:1.5rem;transition:opacity .3s}
.envelope-trigger.is-open .envelope-flap{transform:rotateX(175deg);z-index:0}
.envelope-trigger.is-open .envelope-paper{transform:translateY(-45%)}.envelope-trigger.is-open .envelope-seal{opacity:0}
.hidden-letter{width:100%;max-width:640px;opacity:0;transform:translateY(30px);transition:opacity .7s,transform .7s}
.hidden-letter.is-shown{opacity:1;transform:translateY(0)}
.hidden-letter[hidden]{display:none}
.gifts-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem;max-width:1000px;margin:1.5rem auto;width:100%;position:relative;z-index:2}
.gift{border:0;background:rgba(255,255,255,.32);border-radius:25px;padding:22px 8px 16px;min-height:180px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;transition:transform .25s,background .3s}
.gift:hover{transform:translateY(-6px);background:rgba(255,255,255,.58)}
.gift-scene{width:110px;height:105px;position:relative;display:block}
.gift-box,.gift-lid,.gift-ribbon,.gift-bow,.gift-spark{position:absolute;display:block}
.gift-box{width:90px;height:65px;bottom:0;left:10px;background:#ac7cda;border-radius:5px 5px 12px 12px;box-shadow:inset -12px 0 #9360c7}
.gift-ribbon{width:17px;height:65px;bottom:0;left:47px;background:#f9d4ed}
.gift-lid{width:106px;height:21px;left:2px;top:18px;background:#8151b3;border-radius:5px;z-index:2;transform-origin:15% 80%;transition:transform .7s cubic-bezier(.2,.9,.25,1)}
.gift-bow{font-size:45px;color:#f9d4ed;position:absolute;top:-40px;left:34px}
.gift-spark{font-size:35px;color:#fff;top:5px;left:40px;opacity:0;transition:opacity .5s,transform .6s}
.gift-word{font-size:clamp(.95rem,2vw,1.3rem);font-weight:800;color:#583482;opacity:0;transform:translateY(12px) scale(.8);transition:opacity .5s .2s,transform .6s .2s;min-height:1.6em;text-align:center}
.gift.is-open .gift-lid{transform:translate(-18px,-48px) rotate(-22deg)}
.gift.is-open .gift-spark{opacity:1;transform:translateY(-34px) scale(1.4)}
.gift.is-open .gift-word{opacity:1;transform:translateY(0) scale(1)}
.gift:focus-visible,.envelope-trigger:focus-visible{outline:3px solid #6637a6;outline-offset:5px}
@media(min-width:900px){.gifts-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:500px){.gifts-grid{gap:.6rem}.gift{padding:15px 3px;min-height:160px}.gift-scene{transform:scale(.75);transform-origin:bottom center;margin-top:-10px}.letter-grid{gap:1rem}}
@media(prefers-reduced-motion:reduce){.gift *,.envelope-trigger *, .hidden-letter{transition:none!important}}


/* V6 responsive repairs */
html,body{max-width:100%;overflow-x:clip}
.hero{min-height:0;min-height:100svh}
.hero-stage{min-height:0}
@media(max-width:600px){
 .hero{min-height:690px;min-height:100svh}
 .hero-stage{flex:1;min-height:560px;margin:0 auto 28px;max-height:none}
 .hero-typography{padding-top:0;top:4%;bottom:auto;height:auto;align-items:flex-start}
 .hero-typography .happy{font-size:clamp(82px,24vw,148px)}
 .hero-typography .birthday{font-size:clamp(58px,15vw,95px)}
 .hero-portrait-wrap{top:26%;width:min(58vw,295px)}
 .hero-script{bottom:13%;font-size:clamp(64px,16vw,108px)}
 .section-pad{padding-top:60px;padding-bottom:65px}
 .peace-section{min-height:0}
}
.words-section{min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:70px max(18px,4vw);overflow:hidden}
.gift-hint{position:relative;z-index:2;margin:0 auto 8px!important;max-width:100%;text-align:center}
.gifts-grid{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2.3vw,25px);width:min(100%,1000px);max-width:1000px;margin:0 auto!important;align-items:stretch;justify-items:stretch;z-index:2}
.gift{width:100%;min-width:0;min-height:180px;overflow:visible;padding:18px 6px;justify-content:center;gap:10px;box-sizing:border-box}
.gift-scene{flex:none;width:110px;height:110px;max-width:100%;transform:none;margin:0}
.gift-word{max-width:100%;font-size:clamp(13px,1.8vw,19px);line-height:1.25;overflow-wrap:anywhere}
@media(min-width:900px){.gifts-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:760px}}
@media(max-width:600px){.words-section{padding:55px 15px 65px;gap:10px}.gifts-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.gift{min-height:177px;padding:14px 4px}.gift-scene{transform:scale(.9);transform-origin:center center;margin:0}.gift-word{font-size:15px}}
.memory-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,22px);width:min(100%,1040px);margin:0 auto}
.memory-card{appearance:none;border:0;border-radius:25px;background:radial-gradient(circle,#f7e9ff,#cfa8e7);position:relative;overflow:hidden;aspect-ratio:3/4;cursor:pointer;padding:0;box-shadow:0 18px 35px #5429751a;isolation:isolate}
.memory-card img{width:100%;height:100%;object-fit:contain;object-position:center bottom;transition:transform .55s,filter .55s}
.memory-card .memory-word{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;font-family:var(--font-display);font-size:clamp(30px,5vw,75px);color:#fff;background:#57287bbd;opacity:0;transform:translateY(15px);transition:opacity .45s,transform .45s}
.memory-card[aria-pressed="true"] .memory-word{opacity:1;transform:translateY(0)}
.memory-card[aria-pressed="true"] img{transform:scale(1.08);filter:blur(3px)}
.memory-card:focus-visible{outline:3px solid #7441b3;outline-offset:4px}
@media(max-width:600px){.memory-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.memory-card:last-child{grid-column:1/-1;width:70%;justify-self:center}.memory-card{border-radius:17px}.memory-card .memory-word{font-size:clamp(28px,9vw,48px)}}
/* avoid large blank panels when scroll observer is late or blocked */
.reveal{filter:none;will-change:auto}
.reveal:not(.is-visible){opacity:1;transform:none}

/* V7: the label emerges from the physical gap between lid and box. */
.gift-scene{overflow:visible;isolation:isolate}
.gift-box{z-index:2}
.gift-ribbon{z-index:3}
.gift-lid{z-index:6}
.gift-spark{z-index:7;pointer-events:none}
.gift-scene .gift-word{position:absolute;z-index:4;left:50%;bottom:53px;width:145px;max-width:none;min-height:0;padding:8px 6px;border-radius:12px;background:#fff9ff;color:#583482;box-shadow:0 8px 20px #53277425;transform:translate(-50%,30px) scale(.65);opacity:0;line-height:1.18;font-size:clamp(12px,1.5vw,17px);pointer-events:none;transition:opacity .35s ease,transform .65s cubic-bezier(.2,.9,.2,1)}
.gift.is-open .gift-scene .gift-word{opacity:1;transform:translate(-50%,-20px) scale(1);transition-delay:.25s}
.gift.is-open .gift-lid{transform:translate(-13px,-68px) rotate(-18deg)}
.gift{overflow:visible;position:relative;min-height:205px}
.gifts-grid{row-gap:28px}
@media(max-width:600px){.gift{min-height:190px}.gifts-grid{row-gap:25px}.gift-scene .gift-word{font-size:14px;width:120px}.gift.is-open .gift-scene .gift-word{transform:translate(-50%,-18px) scale(1)}}
/* Remove the oversized empty purple screen before the final photo. */
.final-section{min-height:0!important;height:auto!important;padding:40px 22px 65px!important;display:flex;flex-direction:column;align-items:center;gap:0}
.final-top{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px}
.final-art{margin:25px auto 0!important;position:relative!important;top:auto!important;bottom:auto!important;transform:rotate(-3deg)}
.final-copy{margin:12px auto 0!important;position:relative!important;top:auto!important}
.final-orbit-a{top:0;width:340px;height:340px;left:-220px}
.final-orbit-b{bottom:0;width:370px;height:370px;right:-230px}
@media(max-width:600px){.final-section{padding:26px 18px 48px!important}.final-art{width:min(78%,330px)!important;margin:22px auto 0!important}.final-picture{aspect-ratio:3/4.1}.final-date{margin:20px 0 12px!important}.final-thanks{margin:18px auto!important}}