@font-face{font-family:SiteText;src:url('_assets/fonts/30d0605e33f11801d64fca6956db9d62.woff') format('woff');font-display:swap}
@font-face{font-family:SiteScript;src:url('_assets/fonts/3e614d79b65056e1c61609b76da7fee2.woff') format('woff');font-display:swap}
@font-face{font-family:SiteFunky;src:url('_assets/fonts/950a0acfb0d4b5d3115b0a78ddb504dc.woff') format('woff');font-display:swap}
@font-face{font-family:SiteBold;src:url('_assets/fonts/8a9fe5a81e551d0861772dfe55926a8c.woff') format('woff');font-display:swap}
:root{--red:#ff3131;--yellow:#ffd978;--cyan:#64d8d4;--navy:#1c2448;--peach:#e7b06e;--pink:#cf5de3;--ink:#2a1717}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#131313;color:var(--ink);font-family:SiteText,Arial,sans-serif;overflow-x:hidden}
img{display:block;max-width:100%}
.panel{min-height:100svh;padding:clamp(18px,3vw,44px);position:relative;display:grid;place-items:center;overflow:hidden}
.hero{background:var(--red)}
.hero-card{width:min(1180px,100%);height:min(82svh,760px);border-radius:30px;overflow:hidden;position:relative;box-shadow:0 24px 80px #72101055}
.hero-card>img{width:100%;height:100%;object-fit:cover}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,#00000024 0%,transparent 55%,#0000001f 100%)}
h1,h2{margin:0;text-wrap:balance}
h1{position:absolute;inset:6% 5% auto;text-align:center;color:white;font-size:clamp(2.7rem,7vw,6.7rem);line-height:.9;text-shadow:0 5px 18px #0007}
h1{font-family:SiteScript,"Brush Script MT",cursive}
.pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:#e97be9;color:#3a203f;padding:.85rem 2rem;min-width:210px;font-weight:800;text-decoration:none;box-shadow:0 9px 24px #2d153d26;transition:transform .18s ease,filter .18s ease}
.pill:hover,.pill:focus-visible{transform:translateY(-3px) scale(1.03);filter:saturate(1.2)}
.pill:active{transform:scale(.95)}
.hero-link{position:absolute;bottom:7%;left:50%;transform:translateX(-50%)}
.hero-link:hover,.hero-link:focus-visible{transform:translateX(-50%) translateY(-3px) scale(1.03)}
.intro{background:var(--yellow)}
.intro-grid{width:min(1120px,100%);display:grid;grid-template-columns:minmax(280px,.9fr) minmax(360px,1.1fr);gap:clamp(26px,6vw,90px);align-items:center}
.photo-card{margin:0;background:#fff;padding:14px 14px 55px;border-radius:8px;box-shadow:0 18px 40px #5b432c35}
.photo-card img{aspect-ratio:3/4;object-fit:cover;border-radius:3px}
.tilted-left{transform:rotate(-3deg)}
.letter-card{background:#fffef8;border-radius:24px;padding:clamp(28px,5vw,65px);font-size:clamp(1.05rem,1.8vw,1.5rem);line-height:1.55;box-shadow:0 22px 55px #61461f26}
.stamp{position:absolute;width:100px;filter:drop-shadow(0 10px 10px #0002)}
.stamp-a{top:20px;left:20px;transform:rotate(-10deg)}
.meet{background:var(--cyan);grid-template-columns:minmax(280px,1fr) minmax(280px,.9fr);gap:clamp(30px,6vw,90px);padding-inline:max(5vw,25px)}
.meet-copy{max-width:650px}
.meet h2{font-family:SiteFunky,sans-serif;font-size:clamp(4rem,11vw,9rem);line-height:.8;letter-spacing:.02em;color:#321b1b}
.meet p{font-size:clamp(1.1rem,2vw,1.55rem);line-height:1.55}
.meet-photo{margin:0;transform:rotate(2deg);background:#fff;padding:12px;border-radius:18px;box-shadow:0 22px 45px #214b5433}
.meet-photo img{width:100%;aspect-ratio:1.25;object-fit:cover;border-radius:12px}
.mini-person{position:absolute;left:3%;top:5%;width:88px;filter:drop-shadow(0 12px 8px #0004)}
.always{background:var(--navy);color:#fff;grid-template-columns:minmax(300px,1.2fr) minmax(280px,.8fr);gap:clamp(25px,5vw,70px);padding-inline:max(4vw,20px)}
.collage{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;transform:rotate(-1deg)}
.collage img{width:100%;height:clamp(190px,28vw,360px);object-fit:cover;border:8px solid #fff;box-shadow:0 16px 30px #0005}
.collage img:nth-child(2),.collage img:nth-child(3){transform:translateY(28px)}
.always-copy h2{font-family:SiteBold,sans-serif;font-size:clamp(4rem,10vw,9rem);line-height:.85;color:#ffde75}
.always-copy p{font-size:clamp(1.2rem,2.3vw,1.8rem);line-height:1.5}
.birthday{background:#f2a5c2;grid-template-columns:minmax(300px,1fr) minmax(320px,1fr);gap:clamp(30px,6vw,90px)}
.birthday-photo{width:min(560px,100%);border:12px solid #fff;border-bottom-width:70px;transform:rotate(-3deg);box-shadow:0 20px 45px #78344c33}
.birthday-photo img{aspect-ratio:4/3;width:100%;object-fit:cover}
.birthday-copy{max-width:670px;position:relative}
.birthday-copy h2{font-family:SiteScript,cursive;font-size:clamp(3.5rem,8vw,7.5rem);line-height:.88;color:#4c1e31}
.birthday-copy p{font-size:clamp(1.1rem,2vw,1.5rem);line-height:1.55}
.cartoon{width:120px;margin-left:auto;transform:rotate(6deg)}
.meter-section{background:var(--peach)}
.meter-card{width:min(1180px,100%);min-height:min(78svh,720px);border-radius:32px;overflow:hidden;position:relative;box-shadow:0 24px 70px #6b432755}
.meter-bg{position:absolute;inset:0;background:linear-gradient(#0a395244,#0b203399),url('_assets/media/f300f3dd99acf957a26a5ff7713652c9.jpg') center/cover}
.meter-content{position:relative;min-height:inherit;padding:clamp(28px,5vw,70px);display:flex;flex-direction:column;align-items:center;text-align:center;color:#f5bd73}
.meter-content h2{font-family:SiteBold,sans-serif;font-size:clamp(3rem,7vw,6.5rem);line-height:1}
.meter{width:min(920px,92%);height:220px;position:relative;margin:15px 0 4px;display:flex;align-items:center}
.meter input{width:100%;height:16px;margin:0;appearance:none;background:#d25ce0;border-radius:999px;cursor:pointer;touch-action:none}
.meter input::-webkit-slider-thumb{appearance:none;width:72px;height:92px;background:transparent;border:0}
.meter input::-moz-range-thumb{width:72px;height:92px;background:transparent;border:0}
.meter-head{position:absolute;width:80px;height:100px;object-fit:contain;left:50%;top:55px;transform:translateX(-50%);pointer-events:none;filter:drop-shadow(0 8px 9px #0006)}
.meter output{position:absolute;top:19px;left:50%;transform:translateX(-50%);background:#fff;color:#36263d;padding:.28rem .62rem;border-radius:999px;font-weight:900;box-shadow:0 5px 12px #0003}
.meter-content p{margin:0 0 25px;font-size:clamp(.9rem,1.6vw,1.25rem);color:#f3b468;line-height:1.45}
.meter-content p span{font-weight:800}
.video-link{color:#2df0e8;background:#d35de5}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .75s ease,transform .75s ease}
.reveal.visible{opacity:1;transform:none}
@media(max-width:760px){
 .panel{min-height:auto;padding:28px 15px}
 .hero{min-height:100svh}
 .hero-card{height:calc(100svh - 56px);border-radius:22px}
 .hero-card>img{object-position:center}
 h1{font-size:clamp(3rem,15vw,5.2rem);inset:6% 3% auto}
 .hero-link{bottom:8%;min-width:180px}
 .intro-grid,.meet,.always,.birthday{grid-template-columns:1fr}
 .intro,.meet,.always,.birthday,.meter-section{padding-block:55px}
 .photo-card{width:min(84vw,420px);margin:auto}
 .letter-card{padding:28px 24px;font-size:1rem}
 .stamp{width:62px;top:10px;left:8px}
 .meet{gap:25px}
 .meet h2,.always-copy h2,.birthday-copy h2{text-align:center}
 .meet p,.always-copy p,.birthday-copy p{text-align:center}
 .meet-photo{order:2}
 .mini-person{width:55px;top:15px}
 .always{padding-bottom:80px}
 .collage{gap:8px}
 .collage img{height:43vw;border-width:5px}
 .birthday-photo{border-width:8px;border-bottom-width:42px}
 .cartoon{margin:20px auto 0}
 .meter-card{min-height:570px;border-radius:23px}
 .meter-content{padding:38px 12px 25px}
 .meter-content h2{font-size:3rem}
 .meter{height:175px;width:92%}
 .meter-head{top:42px;width:64px;height:80px}
 .meter output{top:7px;font-size:.8rem}
 .meter input{height:11px}
 .meter-content p{font-size:.82rem;padding:0 5px}
 .video-link{min-width:170px;padding:.72rem 1.25rem}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.pill{transition:none}}
.heart-character{display:block;width:clamp(210px,23vw,310px);margin:20px auto 0;padding:0;border:0;background:transparent;cursor:pointer;touch-action:manipulation;transition:transform .18s ease}
.heart-character img{width:100%;height:auto;max-height:380px;object-fit:contain;filter:drop-shadow(0 10px 12px #60243922)}
.heart-character:hover{transform:scale(1.035) rotate(-2deg)}
.heart-character:active{transform:scale(.94)}
.heart-character:focus-visible{outline:3px solid #a42469;outline-offset:8px;border-radius:30px}
.heart-particle{position:fixed;z-index:9999;width:var(--size);height:auto;pointer-events:none;user-select:none;will-change:transform,opacity}
@media(max-width:760px){.heart-character{width:230px}.heart-character img{max-height:310px}}
@media(prefers-reduced-motion:reduce){.heart-character{transition:none}}