* { box-sizing: border-box; }
:root {
  --ink: #3f3040; --muted: #81727e; --rose: #c86d88; --rose-dark: #a84e70;
  --cream: #fff9f5; --paper: #fffdfb; --line: #f0e3e2; --lavender: #eee7f5;
}
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: "DM Sans", sans-serif; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .18; z-index: -1; background-image: radial-gradient(#c99b9f .65px, transparent .65px); background-size: 12px 12px; }
button, input { font: inherit; }
button { cursor: pointer; }
.ambient { position: fixed; z-index: -1; border-radius: 50%; filter: blur(3px); pointer-events: none; }
.ambient-one { width: 330px; height: 330px; background: #f8e2e5; top: 15%; left: -230px; }
.ambient-two { width: 280px; height: 280px; background: #eee5f6; bottom: 5%; right: -200px; }
.topbar { height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(22px, 6vw, 88px); border-bottom: 1px solid rgba(226, 205, 208, .65); }
.brand { font-family: "Playfair Display", serif; font-size: 20px; color: var(--ink); text-decoration: none; letter-spacing: -.4px; }
.brand span { color: var(--rose); font-size: 25px; margin-left: 4px; }
.topbar-note { font-size: 11px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.section-wrap { width: min(1100px, calc(100% - 44px)); margin-inline: auto; }
.hero { min-height: 640px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 36px; padding-block: 58px 76px; }
.eyebrow { color: var(--rose-dark); text-transform: uppercase; letter-spacing: .19em; font-size: 10px; font-weight: 700; margin: 0 0 20px; }
.tiny-star { font-size: 15px; margin-right: 7px; }
h1, h2 { font-family: "Playfair Display", Georgia, serif; font-weight: 500; letter-spacing: -.045em; }
h1 { font-size: clamp(52px, 6vw, 78px); line-height: .99; margin: 0 0 25px; }
h1 em, h2 em { color: var(--rose); font-weight: 500; }
.hero-intro { max-width: 390px; color: var(--muted); font-size: 16px; line-height: 1.85; margin: 0 0 30px; }
.primary-button, .secondary-button { border: 0; border-radius: 999px; padding: 15px 22px; background: var(--ink); color: white; font-size: 12px; letter-spacing: .015em; box-shadow: 0 8px 22px rgba(63,48,64,.12); transition: transform .2s, background .2s, box-shadow .2s; }
.primary-button:hover, .secondary-button:hover { transform: translateY(-2px); background: var(--rose-dark); box-shadow: 0 12px 26px rgba(168,78,112,.2); }
.primary-button span, .secondary-button span { color: #f4bacb; margin-left: 13px; font-size: 17px; }
.micro-note { font-family: "Playfair Display", serif; font-style: italic; color: #9b8b96; font-size: 13px; margin-top: 18px; }
.hero-art { min-height: 440px; position: relative; display: grid; place-items: center; }
.orbit { position: absolute; border: 1px solid #ead5dc; border-radius: 50%; transform: rotate(-22deg); }
.orbit-one { width: 370px; height: 430px; }
.orbit-two { width: 310px; height: 370px; transform: rotate(31deg); border-color: #e8dced; }
.moon { position: absolute; top: 30px; right: 65px; font-size: 54px; color: #d6a6b7; transform: rotate(-20deg); }
.star, .flower { position: absolute; color: #c77a95; }
.star { font-size: 27px; }.star-a { top: 60px; left: 70px; }.star-b { top: 125px; right: 32px; color: #b7a0c9; }.star-c { bottom: 45px; right: 70px; color: #c6a15e; }
.flower { font-size: 35px; color: #b69ac5; }.flower-a { left: 30px; bottom: 90px; }.flower-b { right: 25px; top: 190px; color: #d7a3a8; }
.polaroid { background: #fffdfa; padding: 12px 12px 17px; box-shadow: 0 18px 45px rgba(111,72,87,.16); transform: rotate(-5deg); z-index: 1; width: 255px; }
.photo-placeholder { height: 275px; overflow: hidden; position: relative; background: linear-gradient(180deg, #f5dce0 0%, #f9e9d6 55%, #d7c4d9 100%); display: flex; align-items: end; justify-content: center; background-image: url(./images/we.png); background-size: cover; background-repeat: no-repeat; }
.photo-sun { position: absolute; top: 39px; right: 40px; font-size: 38px; color: #fff5d5; }
.photo-hill { position: absolute; bottom: -45px; width: 290px; height: 170px; border-radius: 50% 50% 0 0; }
.hill-back { background: #d5b8ce; left: -90px; transform: rotate(-13deg); }.hill-front { background: #b7a0bd; right: -90px; bottom: -70px; transform: rotate(15deg); }
.photo-caption-inside { position: absolute; top: 15px; left: 12px; font-family: "Playfair Display", serif; font-style: italic; font-size: 11px; color: #765a70; }
.polaroid > p { margin: 13px 0 0; text-align: center; font-family: "Playfair Display", serif; font-size: 14px; font-style: italic; color: #77606f; }.polaroid > p span { color: var(--rose); }
.little-note { position: absolute; z-index: 2; padding: 12px 16px; background: #fff1ed; color: #8f667c; font-family: "Playfair Display", serif; font-style: italic; font-size: 13px; line-height: 1.6; box-shadow: 0 8px 20px #a97f8c19; }
.note-left { left: 4px; bottom: 68px; transform: rotate(-9deg); }.note-right { right: 0; top: 75px; transform: rotate(7deg); background: #f0e9f6; }
.letter-section, .memories-section { padding-block: 64px 84px; }
.section-heading { text-align: center; margin: 0 auto 35px; }
.section-heading .eyebrow { margin-bottom: 12px; }
.section-heading h2, .wish-card h2, .final-note h2 { font-size: clamp(38px, 5vw, 52px); margin: 0 0 12px; line-height: 1.1; }
.section-heading > p:last-child { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.letter-card { position: relative; max-width: 780px; margin: auto; padding: clamp(28px, 5vw, 58px); background: var(--paper); border: 1px solid var(--line); box-shadow: 0 20px 70px rgba(115,76,90,.06); border-radius: 5px; }
.letter-card::before, .letter-card::after { content: "✦"; position: absolute; color: #d9b2c0; font-size: 20px; }.letter-card::before { top: 22px; left: 24px; }.letter-card::after { bottom: 22px; right: 24px; }
.letter-decoration { position: absolute; top: 18px; right: 26px; color: #e5c1cc; font-size: 32px; }
.letter-card p { color: #776b76; font-size: 14px; line-height: 2; margin: 0 0 18px; }
.letter-card .letter-greeting { color: var(--ink); font-family: "Playfair Display", serif; font-size: 22px; margin-bottom: 23px; }
.letter-card .letter-ending { color: var(--rose-dark); font-family: "Playfair Display", serif; font-style: italic; font-size: 17px; margin-top: 26px; }
.letter-card .signature { text-align: right; font-family: "Playfair Display", serif; font-size: 22px; color: var(--ink); margin: 28px 0 0; }.signature span { color: var(--rose); }
.memory-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.memory-tile { min-height: 250px; padding: 30px 18px; border-radius: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative; overflow: hidden; cursor: pointer; transition: transform .2s; border: 1px dashed rgba(145,104,131,.25); }
.memory-tile:hover { transform: translateY(-4px) rotate(-.5deg); }.memory-pink { background: #f8e7e8; }.memory-lilac { background: #eee8f5; }.memory-peach { background: #f8eadd; }
.memory-tile input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 3; }
.memory-tile.has-photo { background-size: cover; background-position: center; }.memory-tile.has-photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(44,30,42,.7), transparent 75%); }
.tile-icon, .tile-title, .tile-subtitle, .tile-change { position: relative; z-index: 1; }.tile-icon { font-size: 30px; color: #b86e8d; margin-bottom: 12px; }.tile-title { font-family: "Playfair Display", serif; font-size: 23px; }.tile-subtitle { font-size: 11px; color: #8a7483; margin-top: 8px; }.tile-change { margin-top: 22px; font-size: 10px; letter-spacing: .05em; color: #9b687e; }.has-photo .tile-icon, .has-photo .tile-title, .has-photo .tile-subtitle, .has-photo .tile-change { color: white; text-shadow: 0 1px 5px #0005; }
.photo-tip { max-width: 650px; margin: 18px auto 0; text-align: center; font-size: 11px; color: #9a8b95; line-height: 1.7; }
.wish-section { padding-block: 20px 85px; }.wish-card { text-align: center; background: #f2eaf5; border: 1px solid #e7dbea; padding: 60px 22px; position: relative; overflow: hidden; }.wish-card h2 { margin-bottom: 18px; }.wish-card > p:not(.eyebrow):not(.wish-result) { max-width: 460px; margin: 0 auto 25px; color: #817180; font-size: 13px; line-height: 1.9; }.wish-sparkle { position: absolute; color: #c4a0c4; font-size: 34px; }.sparkle-left { left: 8%; top: 20%; }.sparkle-right { right: 8%; bottom: 20%; color: #d6a06f; }.secondary-button { background: var(--rose-dark); }.wish-result { max-width: 470px; margin: 25px auto 0; color: #8f4e6b; font-family: "Playfair Display", serif; font-style: italic; font-size: 18px; line-height: 1.8; animation: rise .5s ease both; }
.final-note { text-align: center; padding-block: 0 85px; }.tiny-heart { font-size: 33px; color: var(--rose); margin-bottom: 14px; }.final-note > p:first-of-type { color: var(--muted); font-family: "Playfair Display", serif; font-style: italic; font-size: 17px; }.final-note h2 { margin: 12px 0 18px; }.final-signature { color: #95828f; font-size: 12px; }.final-signature span { color: var(--rose-dark); font-family: "Playfair Display", serif; font-style: italic; font-size: 20px; }
footer { min-height: 68px; display: flex; justify-content: center; align-items: center; gap: 20px; border-top: 1px solid var(--line); color: #9b8a95; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 15px; }footer span:nth-child(2) { color: var(--rose); }
.modal-backdrop { position: fixed; inset: 0; z-index: 20; background: rgba(48,35,48,.48); backdrop-filter: blur(7px); display: grid; place-items: center; padding: 20px; }.modal-backdrop[hidden] { display: none; }
.modal-card { position: relative; width: min(490px, 100%); background: #fffaf7; border: 1px solid #f0dce2; padding: 48px clamp(24px, 6vw, 48px); text-align: center; box-shadow: 0 25px 90px #27172830; animation: rise .35s ease both; }.modal-close { position: absolute; top: 12px; right: 16px; background: transparent; border: 0; color: #9b7e8d; font-size: 28px; }.modal-heart { display: block; font-size: 36px; color: var(--rose); margin-bottom: 15px; }.modal-card .eyebrow { margin-bottom: 12px; }.modal-card h2 { font-size: 34px; line-height: 1.2; margin: 0 0 17px; }.modal-card > p:not(.eyebrow):not(.modal-signature) { color: #81727e; font-size: 13px; line-height: 1.9; }.modal-signature { font-family: "Playfair Display", serif; font-style: italic; color: var(--rose-dark); font-size: 19px; margin: 23px 0; }
.confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 30; overflow: hidden; }.confetti-piece { position: absolute; top: -20px; width: 9px; height: 14px; opacity: 0; animation: fall 2.7s ease-in forwards; }.floating-heart { position: fixed; z-index: 15; pointer-events: none; color: var(--rose); animation: floatUp 2.5s ease-out forwards; }
@keyframes fall { 0% { transform: translateY(-20px) rotate(0); opacity: 1; } 100% { transform: translateY(110vh) rotate(700deg); opacity: 0; } }
@keyframes floatUp { 0% { transform: translateY(0) scale(.7); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-180px) scale(1.5) rotate(20deg); opacity: 0; } }
@keyframes rise { from { transform: translateY(14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (max-width: 760px) {
  .topbar { height: 62px; padding-inline: 22px; }.topbar-note { font-size: 8px; letter-spacing: .04em; }
  .hero { grid-template-columns: 1fr; gap: 10px; padding-block: 65px 45px; text-align: center; }.hero-copy { display: flex; flex-direction: column; align-items: center; }.hero-intro { font-size: 14px; max-width: 340px; }.hero-art { min-height: 410px; margin-top: 4px; }.orbit-one { width: 300px; height: 350px; }.orbit-two { width: 260px; height: 310px; }.polaroid { width: 218px; }.photo-placeholder { height: 230px; }.note-left { left: 0; bottom: 50px; }.note-right { right: 0; top: 52px; }.moon { right: 35px; top: 20px; }.flower-a { left: 4px; }.flower-b { right: 5px; }
  .letter-section, .memories-section { padding-block: 45px 60px; }.section-heading { margin-bottom: 25px; }.letter-card { padding: 40px 25px; }.letter-card p { font-size: 13px; }.letter-card .letter-greeting { font-size: 20px; }
  .memory-grid { grid-template-columns: 1fr; gap: 12px; }.memory-tile { min-height: 205px; }.wish-section { padding-block: 10px 60px; }.wish-card { padding-block: 48px; }.sparkle-left { left: 5%; top: 8%; }.sparkle-right { right: 5%; bottom: 8%; }
  .final-note { padding-bottom: 60px; } footer { gap: 10px; font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }