@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Instrument+Serif:ital@0;1&family=Kalam:wght@300;400&display=swap');
:root{--blue:#cbe8fb;--brown:#4d2e22;--paper:#fffdf7;--serif:'Instrument Serif',Georgia,serif;--hand:'Kalam',cursive;--sans:'DM Sans',Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--blue);color:var(--brown);font-family:var(--sans);line-height:1.75;background-image:radial-gradient(circle,var(--brown) 4px,transparent 4.5px),radial-gradient(circle,var(--brown) 4px,transparent 4.5px);background-size:100px 100px;background-position:0 0,50px 50px}h1,h2,p,figure{margin:0}h1,h2{font-weight:400}a{color:inherit;text-underline-offset:5px}a:focus-visible,button:focus-visible{outline:3px solid #3e709b;outline-offset:6px}.hand{font-family:var(--hand);font-weight:300}.topbar{width:min(100% - 80px,1200px);margin:28px auto 0;display:flex;justify-content:space-between;gap:20px;font-size:13px}.topbar span,.topbar time{background:var(--blue);padding:2px 10px}.intro{padding:90px 30px 100px;display:flex;justify-content:center;text-align:center}.intro-inner{background:var(--blue);padding:15px 50px;max-width:780px;width:100%}.greeting{font-size:29px;transform:rotate(-3deg)}.intro h1{font-family:var(--serif);font-size:clamp(100px,17vw,210px);letter-spacing:-.04em;line-height:1.05;margin:13px 0 16px}.intro-line{font-size:19px;line-height:1.65}.love-note{font-size:23px;margin-top:28px;transform:rotate(-2deg)}.scroll-note{display:inline-flex;flex-direction:column;align-items:center;font-size:12px;text-decoration:none;margin-top:42px;gap:18px}.scroll-note span{height:37px;width:1px;background:var(--brown)}.you-section{background:#e9f4fb;padding:78px max(30px,calc((100% - 1200px)/2)) 70px}.gallery-heading{padding:0 20px;display:flex;align-items:baseline;justify-content:space-between;gap:30px;margin-bottom:55px}.gallery-heading h2{font-family:var(--serif);font-size:70px;line-height:1.1}.gallery-heading p{font-size:24px;transform:rotate(-3deg)}.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding:0 16px 55px}.photo{background:var(--paper);padding:10px 10px 0;box-shadow:0 7px 16px #4d2e2214;border:1px solid #4d2e221f;position:relative;transition:translate .5s}.photo:hover{translate:0 -6px}.photo img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}.photo figcaption{font-size:21px;line-height:1.35;min-height:72px;padding:16px 4px;display:flex;align-items:center;justify-content:center;text-align:center}.photo-one{transform:rotate(-5deg)}.photo-two{transform:rotate(3deg);margin-top:48px;margin-bottom:-48px}.photo-three{transform:rotate(-3deg);margin-top:9px;margin-bottom:-9px}.photo-four{transform:rotate(5deg);margin-top:55px;margin-bottom:-55px}.gallery-note{text-align:center;font-size:24px;padding-top:22px}.me-section{padding:105px 40px 115px}.me-inner{width:min(100%,890px);margin:auto;display:grid;grid-template-columns:1fr 1.15fr;gap:100px;align-items:center;background:var(--blue);padding:25px 20px}.cattia-photo{transform:rotate(-5deg);width:100%;max-width:330px}.me-copy h2{font-family:var(--serif);font-size:65px;line-height:1.1;margin:18px 0 30px}.me-copy h2 .hand{display:block;font-size:32px;color:#3d6383;line-height:1.4;margin-top:10px;transform:rotate(-3deg)}.me-copy>p{font-size:16px;margin-top:18px}.me-copy>p:first-child{font-size:13px;margin-top:0}.me-copy a{display:inline-block;font-size:13px;margin-top:25px}.letter-section{padding:0 35px 100px}.letter{width:min(100%,760px);margin:auto;background:var(--paper);padding:55px 75px;box-shadow:0 12px 28px #4d2e2214}.letter-meta{display:flex;justify-content:space-between;gap:20px;font-size:12px;margin-bottom:38px}.letter h2{font-size:48px;line-height:1.3;margin-bottom:24px;transform:rotate(-2deg)}.letter>p{font-size:17px;line-height:1.9;margin-bottom:20px}.letter .letter-sign{font-size:35px;line-height:1.4;margin:32px 0 0;transform:rotate(-3deg)}.closing{text-align:center;background:var(--blue);width:min(100% - 60px,720px);margin:0 auto;padding:25px 25px 65px}.closing>p{font-size:15px}.closing h2{font-family:var(--serif);font-size:105px;line-height:1.1;margin:22px 0 25px}.closing h2 .hand{font-size:66px;color:#3d6383;display:block;margin-top:10px;transform:rotate(-5deg)}.closing a{display:inline-block;font-size:12px;margin-top:35px}.footer{width:min(100% - 80px,1200px);margin:0 auto;padding:20px 10px 25px;font-size:12px;display:flex;justify-content:space-between;background:var(--blue);border-top:1px solid #4d2e2230}button{font:inherit}#music-toggle{position:fixed;right:18px;bottom:18px;font-size:12px;border:1px solid var(--brown);color:var(--brown);background:var(--paper);padding:8px 14px;z-index:5;cursor:pointer}#music-toggle[hidden]{display:none}::selection{background:#aecfe8}
@media(max-width:1000px){.gallery{gap:16px}.gallery-heading h2{font-size:60px}.gallery-heading p{font-size:21px}.photo figcaption{font-size:18px}.me-inner{gap:65px}.me-copy h2{font-size:56px}}
@media(max-width:760px){body{background-size:76px 76px;background-position:0 0,38px 38px;background-image:radial-gradient(circle,var(--brown) 3px,transparent 3.5px),radial-gradient(circle,var(--brown) 3px,transparent 3.5px)}.topbar{width:calc(100% - 32px);font-size:11px;gap:10px;margin-top:20px}.topbar span,.topbar time{padding:2px 4px}.intro{padding:76px 20px 70px}.intro-inner{padding:14px 10px}.greeting{font-size:23px}.intro h1{font-size:clamp(88px,22vw,150px);margin:18px 0}.intro-line{font-size:17px}.love-note{font-size:20px;margin-top:25px}.scroll-note{margin-top:32px}.you-section{padding:50px 24px 48px}.gallery-heading{display:block;padding:0 4px;margin-bottom:38px}.gallery-heading h2{font-size:57px}.gallery-heading p{font-size:21px;margin-top:17px}.gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 20px;padding:0 6px 28px;max-width:540px;margin:auto}.photo{padding:7px 7px 0}.photo figcaption{font-size:19px;min-height:74px;padding:11px 3px}.photo-two{margin-top:26px;margin-bottom:-26px;transform:rotate(4deg)}.photo-three{margin-top:0;margin-bottom:0;transform:rotate(-4deg)}.photo-four{margin-top:26px;margin-bottom:-26px;transform:rotate(3deg)}.gallery-note{font-size:21px;max-width:320px;margin:auto;padding-top:20px}.me-section{padding:70px 25px 75px}.me-inner{grid-template-columns:1fr;gap:42px;max-width:440px;padding:20px 15px}.cattia-photo{width:73%;max-width:270px;justify-self:center}.me-copy h2{font-size:58px;margin-top:12px;margin-bottom:25px}.me-copy h2 .hand{font-size:29px}.me-copy>p{font-size:16px}.letter-section{padding:0 20px 65px}.letter{padding:32px 27px}.letter-meta{font-size:11px;gap:12px;margin-bottom:28px}.letter h2{font-size:41px}.letter>p{font-size:16px;line-height:1.9;margin-bottom:18px}.letter .letter-sign{font-size:32px}.closing{width:calc(100% - 40px);padding:22px 12px 50px}.closing h2{font-size:85px}.closing h2 .hand{font-size:56px}.footer{width:calc(100% - 40px);font-size:11px;padding:19px 2px 24px}}
@media(max-width:360px){.topbar{font-size:10px}.intro{padding-top:65px}.greeting{font-size:21px}.intro h1{font-size:85px}.you-section{padding-left:19px;padding-right:19px}.gallery{gap:25px 14px}.photo figcaption{font-size:16px;min-height:70px}.gallery-heading h2{font-size:52px}.gallery-heading p{font-size:18px}.me-copy h2{font-size:50px}.me-copy h2 .hand{font-size:25px}.letter{padding:27px 23px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

.music-control{position:fixed;top:16px;right:16px;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));z-index:10}.music-control #music-toggle{position:static;display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:60px;min-height:38px;padding:6px 12px;border:1px solid #4d2e2270;border-radius:20px;background:var(--paper);color:var(--brown);font-size:12px;font-weight:500;line-height:1.2;box-shadow:0 2px 7px #4d2e2212;cursor:pointer;transition:background-color .2s,color .2s,transform .15s}.music-control #music-toggle:active{transform:scale(0.96)}.music-control #music-toggle:disabled{opacity:.65;cursor:default}.music-control.is-playing #music-toggle{background:var(--brown);color:var(--paper)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.topbar{padding-right:80px}.closing h2 .hand{font-size:clamp(38px,6.5vw,66px)}@media(max-width:760px){.closing h2{font-size:clamp(56px,18vw,85px)}.closing h2 .hand{font-size:clamp(35px,9vw,56px)}.photo figcaption{font-size:18px}}@media(max-width:360px){.photo figcaption{font-size:16px}}.music-hint{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(16px);background:var(--paper);color:var(--brown);border:1px solid #4d2e2240;border-radius:999px;padding:9px 18px;font-size:13px;font-weight:500;box-shadow:0 6px 20px #4d2e2226;z-index:100;cursor:pointer;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,transform .35s ease,visibility .35s;white-space:nowrap}.music-hint.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);animation:pulse-hint 2.2s infinite ease-in-out}@keyframes pulse-hint{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.04)}}@media(max-width:760px){.music-hint{font-size:12px;padding:8px 16px;bottom:18px}}