*{box-sizing:border-box}
:root{
  --paper:#f6efe5;--paper2:#efe4d4;--ink:#3f3934;--muted:#8b7d70;
  --brown:#715b4b;--rose:#a66f69;--line:rgba(63,57,52,.16);
}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);background:
  radial-gradient(circle at 15% 10%,rgba(255,255,255,.9),transparent 28%),
  radial-gradient(circle at 85% 70%,rgba(203,177,150,.18),transparent 30%),
  var(--paper);
  font-family:Georgia,"Times New Roman",serif;overflow-x:hidden;
}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.22;background-image:url("data:image/svg+xml,%3Csvg width='160' height='160' 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='.08'/%3E%3C/svg%3E");z-index:20}
button{font:inherit;color:inherit;border:0;cursor:pointer}
.topbar{position:fixed;top:0;left:0;right:0;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 6vw;background:rgba(246,239,229,.76);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);z-index:30}
.brand{font-size:14px;letter-spacing:.06em;text-transform:lowercase}.brand span{color:var(--rose)}
.music-btn{background:none;font-size:14px;letter-spacing:.05em}.music-btn span{font-size:11px;text-transform:uppercase;opacity:.55}
main{width:min(1100px,92%);margin:auto}
.cover{min-height:100vh;position:relative;display:flex;align-items:center;padding:100px 4vw 70px}
.cover-note{width:55%;position:relative;z-index:3}
.tiny,.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.22em;color:var(--muted)}
.cover h1{font-size:clamp(48px,7vw,86px);font-weight:400;line-height:.9;margin:22px 0;color:#423b35}
h1 em,h2 em{font-weight:400;color:var(--rose)}
.cover p{max-width:390px;line-height:1.7;color:var(--muted);font-size:15px}
.open-btn{margin-top:18px;background:var(--ink);color:#fff;padding:14px 20px;border-radius:2px;letter-spacing:.05em;box-shadow:7px 7px 0 #d8c6b2;transition:.25s}
.open-btn:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 #d8c6b2}
.cover-photo{position:absolute;width:min(40vw,360px);right:7%;top:19%;z-index:2}
.polaroid{background:#fff;padding:12px 12px 40px;box-shadow:0 15px 35px rgba(61,48,38,.18);position:relative}
.polaroid img{display:block;width:100%;aspect-ratio:3/4;object-fit:contain;background:#f3ece2;filter:saturate(.88) contrast(.97)}
.caption{text-align:center;margin-top:13px;font-size:13px;color:#6f6258}
.tilt-left{transform:rotate(4deg)}.tape{position:absolute;width:115px;height:27px;background:rgba(213,187,155,.52);z-index:4;transform:rotate(-8deg);top:16%;right:26%}
.stamp{position:absolute;right:3%;bottom:13%;font:11px/1.4 monospace;letter-spacing:.18em;text-align:center;border:1px solid #a89078;padding:9px;color:#8a735e;transform:rotate(-8deg)}
.intro{min-height:75vh;display:flex;flex-direction:column;justify-content:center;max-width:760px;padding:80px 8vw}
.intro h2{font-size:clamp(42px,7vw,76px);font-weight:400;line-height:.95;margin:15px 0 25px}.intro-copy{max-width:480px;line-height:1.8;color:var(--muted);font-size:16px}.scribble{font-size:65px;color:var(--rose);transform:rotate(-12deg);margin-top:20px}
.scrapbook{padding:100px 0}.section-heading{margin-bottom:50px}.section-heading>span{font:12px monospace;color:var(--rose);letter-spacing:.2em}.section-heading h2{font-size:50px;font-weight:400;margin:8px 0 4px}.section-heading p{margin:0;color:var(--muted);font-style:italic}
.photo-board{min-height:1100px;position:relative}
.photo-board .polaroid{position:absolute;width:260px}
.p1{left:4%;top:30px;transform:rotate(-6deg)}.p2{right:7%;top:5px;transform:rotate(7deg)}.p3{left:20%;top:440px;transform:rotate(4deg)}.p4{right:14%;top:540px;transform:rotate(-5deg)}
.pin{position:absolute;width:12px;height:12px;border-radius:50%;background:#8c6e57;top:-5px;left:50%;z-index:2;box-shadow:0 2px 4px #999}
.paper-card{background:#eadbc6;box-shadow:0 12px 30px rgba(61,48,38,.12);position:absolute;padding:28px}.quote-card{width:250px;left:45%;top:220px;transform:rotate(-3deg);text-align:center}.quote-mark{font-size:60px;color:var(--rose);line-height:.5}.quote-card p{font-size:23px;line-height:1.25;font-style:italic}.quote-card small{color:var(--muted)}.note-card{width:230px;right:5%;top:350px;transform:rotate(4deg);font-style:italic;font-size:18px;line-height:1.5}.heart{display:block;text-align:right;color:var(--rose);font-size:30px}.tape-mini{position:absolute;width:75px;height:18px;background:rgba(213,187,155,.55);top:-9px;left:75px;transform:rotate(-4deg)}
.letter{padding:100px 0 150px;display:flex;justify-content:center}.envelope{width:min(680px,92vw);min-height:520px;position:relative;background:#dfc8ae;box-shadow:0 22px 50px rgba(61,48,38,.18);overflow:visible}.envelope-back{position:absolute;inset:0;background:#dcc2a5;overflow:hidden;border-radius:2px}.envelope-back:before,.envelope-back:after{content:"";position:absolute;bottom:0;width:70%;height:100%;background:#d4b89a}.envelope-back:before{left:0;clip-path:polygon(0 100%,100% 100%,0 0)}.envelope-back:after{right:0;clip-path:polygon(100% 100%,0 100%,100% 0)}.letter-paper{position:absolute;width:72%;left:14%;top:30px;min-height:360px;max-height:400px;overflow-y:auto;background:#fffaf1;padding:40px 42px;box-shadow:0 8px 25px rgba(61,48,38,.15);z-index:3;opacity:0;transform:translateY(40%);pointer-events:none;transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .5s ease}.letter-label{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}.letter-paper h2{font-size:36px;font-weight:400}.letter-paper p{font-size:14px;line-height:1.75}.signature{text-align:right;font-style:italic;color:var(--rose)}.envelope-flap{position:absolute;left:0;top:0;width:100%;height:58%;background:#e5cfb7;clip-path:polygon(0 0,100% 0,50% 82%);z-index:5;transform-origin:top center;transition:transform .8s;pointer-events:none}.letter-btn{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:8;background:#4b4038;color:white;padding:11px 18px;font-size:12px;letter-spacing:.05em;white-space:nowrap}.envelope.open .envelope-flap{transform:rotateX(180deg)}.envelope.open .letter-paper{opacity:1;transform:translateY(0);pointer-events:auto;z-index:6}
.gallery{padding:60px 0 140px}.center{text-align:center}.gallery-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:15px;margin-top:55px}.gallery-photo{padding:0;background:#fff;overflow:hidden;min-height:230px}.gallery-photo img{width:100%;height:100%;object-fit:contain;background:#eee5d9;display:block;filter:saturate(.86);transition:transform .5s,filter .5s}.gallery-photo:hover img{transform:scale(1.04);filter:saturate(1)}.gallery-photo:nth-child(1){grid-column:span 5;grid-row:span 2}.gallery-photo:nth-child(2){grid-column:span 3}.gallery-photo:nth-child(3){grid-column:span 4}.gallery-photo:nth-child(4){grid-column:span 4}.gallery-photo:nth-child(5){grid-column:span 3}.gallery-photo:nth-child(6){grid-column:span 5}
.ending{padding:80px 0 120px}.ending-card{max-width:650px;margin:auto;text-align:center;padding:80px 30px;border:1px solid var(--line);background:rgba(255,250,243,.5)}.ending h2{font-size:62px;font-weight:400;line-height:.9;margin:20px}.ending p{color:var(--muted);font-style:italic}.big-heart{font-size:60px;color:var(--rose);margin:20px}.surprise-btn{background:none;border-bottom:1px solid var(--ink);padding:5px;font-size:12px}.lightbox,.surprise{position:fixed;inset:0;background:rgba(31,26,22,.9);display:none;align-items:center;justify-content:center;z-index:100;padding:25px}.lightbox.show,.surprise.show{display:flex}.lightbox img{max-width:min(90vw,700px);max-height:90vh;object-fit:contain;box-shadow:0 20px 60px #000}.close-lightbox,.close-surprise{position:absolute;right:25px;top:20px;color:#fff;background:none;font-size:34px}.surprise-box{background:#fff8ef;max-width:420px;padding:55px 35px;text-align:center;position:relative}.surprise-box>span{font-size:50px;color:var(--rose)}.surprise-box h2{font-size:42px;font-weight:400;margin:10px}.surprise-box p{color:var(--muted)}
.reveal{opacity:0;transform:translateY(35px);transition:opacity .8s,transform .8s}.reveal.visible{opacity:1;transform:none}
.floating-hearts{position:fixed;inset:0;pointer-events:none;z-index:25}.float-heart{position:absolute;color:var(--rose);animation:floatUp 2.8s ease-out forwards;font-size:18px}@keyframes floatUp{0%{transform:translateY(20px) scale(.6);opacity:0}20%{opacity:1}100%{transform:translateY(-180px) rotate(20deg);opacity:0}}
@media(max-width:700px){
 .topbar{height:56px;padding:0 5vw}.brand{font-size:12px}.music-btn span{display:none}
 .cover{min-height:900px;display:block;padding-top:125px}.cover-note{width:100%;text-align:center}.cover h1{font-size:52px}.cover p{margin:20px auto}.cover-photo{width:74vw;max-width:310px;right:12%;top:53%}.tape{top:51%;right:25%}.stamp{display:none}
 .intro{min-height:65vh;padding:70px 5vw}.intro h2{font-size:46px}
 .scrapbook{padding:70px 0}.section-heading h2{font-size:42px}.photo-board{min-height:1200px}.photo-board .polaroid{width:46vw}.p1{left:0}.p2{right:0;top:10px}.quote-card{left:27%;top:300px;width:46vw}.p3{left:0;top:610px}.p4{right:0;top:700px}.note-card{right:17%;top:960px;width:66vw}
 .letter{padding:60px 0 100px}.envelope{min-height:540px}.letter-paper{width:82%;left:9%;top:42px;padding:28px 24px;min-height:380px;max-height:430px}
 .gallery-grid{grid-template-columns:1fr 1fr}.gallery-photo{grid-column:auto!important;grid-row:auto!important;min-height:250px;aspect-ratio:3/4}.gallery-photo:nth-child(1){grid-row:span 2!important}.ending h2{font-size:52px}
}

/* FIX: portrait display without cropping */
.cover-photo img,
.photo-board .polaroid img,
.gallery-photo img {
  object-fit: contain !important;
  object-position: center;
  background: #f3ece2;
}

/* FINAL UI FIX: remove blue tap/focus outline and prevent page drag/sideways movement */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
  overflow-y: auto;
  overscroll-behavior-x: none;
  overscroll-behavior-y: auto;
  -webkit-overflow-scrolling: touch;
}

button, a, input, textarea, select, [role="button"] {
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
}

button:focus,
button:focus-visible,
button:active,
a:focus,
a:focus-visible,
a:active,
[role="button"]:focus,
[role="button"]:focus-visible,
[role="button"]:active {
  outline: none !important;
  box-shadow: none;
}

body {
  overscroll-behavior-x: none;
  overscroll-behavior-y: auto;
  touch-action: auto;
  -webkit-overflow-scrolling: touch;
}

/* Keep the nested letter scroll from interfering with the main page scroll. */
.letter-paper {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: auto;
  touch-action: pan-y;
}

/* Header behavior: hide while scrolling down, reveal while scrolling up */
.topbar { transition: transform .35s ease, opacity .35s ease; will-change: transform; }
.topbar.header-hidden { transform: translateY(-110%); opacity: 0; pointer-events: none; }