@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&display=swap');

:root {
  --butter: #fff1a8;
  --pale: #fff9e9;
  --cream: #fffdf6;
  --yellow: #f5d75e;
  --gold: #b68a25;
  --ink: #39311e;
  --muted: #8e805a;
  --line: rgba(98, 76, 25, .18);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: 'DM Sans', sans-serif; overflow-x: hidden; }
.grain { position: fixed; inset: 0; pointer-events: none; z-index: 5; opacity: .12; 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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"); }
.topbar { position: absolute; top: 0; left: 0; width: 100%; padding: 24px 6vw; display: flex; align-items: center; justify-content: space-between; z-index: 8; }
.brand { font: 11px 'DM Mono', monospace; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--ink); }
.brand span, footer span { color: var(--gold); }
.music-btn { background: transparent; border: 1px solid var(--line); border-radius: 100px; padding: 9px 14px; color: var(--ink); font: 10px 'DM Mono', monospace; letter-spacing: .08em; cursor: pointer; }
.music-btn span { margin-left: 5px; text-transform: uppercase; }
.section { position: relative; min-height: 100vh; padding: 120px 7vw 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.hero { background: radial-gradient(ellipse at 50% 38%, #fff8d8 0, #fff3b8 42%, #f9e58b 100%); }
.eyebrow, .small-note, .scroll-hint, .letter-topline, .letter-date, .note-counter { font: 10px 'DM Mono', monospace; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow { color: var(--gold); margin: 0 0 22px; }
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); margin: 0 8px 1px 0; }
.small-note { color: var(--muted); margin: 0 0 30px; font-size: 9px; }
.intro { font: italic 15px 'Playfair Display', serif; margin: 0 0 15px; color: #75643c; }
h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; letter-spacing: -.045em; }
h1 { font-size: clamp(68px, 11vw, 144px); line-height: .84; margin: 0; }
h1 em, h2 em, h3 em, .big-confession em { color: var(--gold); font-weight: 500; }
.subtitle { font-size: 12px; letter-spacing: .05em; color: #796b48; margin: 27px 0 0; }
.hero-stamp { position: absolute; top: 27%; right: 13%; width: 96px; height: 96px; border: 1px solid rgba(139, 103, 18, .45); border-radius: 50%; display: flex; flex-direction: column; justify-content: center; font: 10px 'DM Mono', monospace; line-height: 1.3; transform: rotate(11deg); color: #82651c; }
.hero-stamp strong { font: italic 19px 'Playfair Display', serif; }
.soft-line { font: italic 17px 'Playfair Display', serif; margin: 38px 0 12px; }
.hero-copy { font-size: 12px; line-height: 1.8; margin: 4px 0; max-width: 340px; color: #665a3c; }
.muted { color: #a39672 !important; }
.pill-button { display: inline-flex; gap: 25px; align-items: center; justify-content: center; background: var(--ink); color: #fff9e5; border: 1px solid var(--ink); border-radius: 99px; padding: 14px 23px; font: 10px 'DM Mono', monospace; letter-spacing: .08em; cursor: pointer; transition: transform .2s, background .2s, color .2s; text-decoration: none; }
.pill-button:hover { transform: translateY(-3px); background: var(--gold); border-color: var(--gold); }
.hero .pill-button { margin-top: 30px; }
.scroll-hint { position: absolute; bottom: 26px; font-size: 8px; color: #8d7a43; }
.scroll-hint span { margin-left: 8px; }
.memories { background: var(--cream); }
.section-heading h2, .letter-section h2 { font-size: clamp(44px, 7vw, 84px); line-height: .98; margin: 0; }
.section-heading .subtitle { margin-top: 18px; }
.big-confession { font: 500 clamp(33px, 5vw, 58px)/1.1 'Playfair Display', serif; margin: 70px 0 12px; }
.center-copy { font-size: 11px; color: var(--muted); }
.photo-grid { width: min(780px, 100%); display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin: 28px auto 18px; align-items: center; }
.photo-card { border: 1px solid #e9dca7; background: #fff8db; padding: 0; position: relative; text-align: left; cursor: pointer; overflow: hidden; box-shadow: 0 12px 35px rgba(112, 87, 24, .07); transition: transform .25s; color: var(--ink); }
.photo-card:hover { transform: translateY(-7px) rotate(-1deg); }
.card-tall { height: 255px; }
.card-short { height: 210px; }
.photo-placeholder { position: absolute; inset: 0; display: grid; place-items: center; font-family: 'Playfair Display', serif; font-size: 85px; color: rgba(139, 103, 18, .6); background: linear-gradient(145deg, #fff1a9, #f8d96a); }
.card-short .photo-placeholder { background: linear-gradient(145deg, #fff8d7, #f5e5a0); }
.flower-art { font-size: 105px; }
.letter-art { font-size: 110px; }
.ribbon-art { font-size: 125px; }
.photo-number { position: absolute; top: 12px; left: 12px; font: 10px 'DM Mono', monospace; color: #4b3d18; }
.photo-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 28px 10px 12px; font: italic 12px 'Playfair Display', serif; background: linear-gradient(transparent, rgba(255, 250, 224, .96)); }
.note-counter { font-size: 9px; color: var(--muted); margin: 8px 0 24px; }
.secondary { background: transparent; color: var(--ink); }
.secondary:hover { color: white; }
.letter-section { background: #fff3bc; }
.letter-topline { width: min(670px, 100%); display: flex; justify-content: space-between; font-size: 8px; color: #a28a45; margin-bottom: 48px; }
.letter-section .eyebrow { margin-bottom: 13px; }
.letter-paper { position: relative; text-align: left; width: min(590px, 100%); padding: clamp(27px, 5vw, 58px); margin: 42px 0 15px; background: #fffdf5; box-shadow: 0 20px 55px rgba(121, 92, 24, .12); border: 1px solid #eee1b4; transform: rotate(-.5deg); font: 14px/1.9 'Playfair Display', serif; }
.letter-paper p { position: relative; z-index: 1; }
.letter-paper p:first-of-type { margin-top: 5px; }
.paper-decoration { position: absolute; top: 20px; right: 26px; color: #e7ca58; font-size: 35px; }
.letter-date { font-size: 8px; color: #aa9555; margin-bottom: 30px; }
.letter-signoff { margin-top: 28px; margin-bottom: 0; }
.signature { font: italic 30px 'Playfair Display', serif; margin-top: 0; color: var(--gold); }
.signature span { font-size: 18px; }
.letter-footnote { font: italic 13px 'Playfair Display', serif; color: #887644; margin: 20px 0 25px; }
.question-section { background: radial-gradient(ellipse at 50% 20%, #fff9dd, #ffed9d 65%, #f6d96d); }
.question-sun { color: var(--gold); font-size: 40px; margin-bottom: 20px; }
.question-pre { font: italic 16px 'Playfair Display', serif; margin: 0 0 18px; }
.question-section h2 { font-size: clamp(58px, 9vw, 110px); line-height: .9; margin: 0; }
.question-sub { max-width: 390px; font-size: 12px; line-height: 1.8; margin: 24px 0 0; }
.question-sub + .question-sub { margin-top: 5px; }
.answer-buttons { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 30px; }
.yes-button { background: var(--ink); }
.no-button { background: transparent; color: var(--ink); }
.answer-message { min-height: 20px; font: italic 14px 'Playfair Display', serif; color: #78601c; }
.end-card { width: min(440px, 100%); border: 1px solid rgba(143, 109, 24, .3); padding: 35px 20px; margin-top: 36px; background: rgba(255, 251, 229, .42); }
.end-sparkle { font-size: 26px; color: var(--gold); }
.end-card p { font: italic 13px 'Playfair Display', serif; }
.end-card h3 { font-size: 37px; line-height: 1; margin: 12px 0; }
.end-card .end-small { font: 9px 'DM Mono', monospace; letter-spacing: .08em; color: #8c7a48; text-transform: uppercase; margin-top: 24px; }
.text-button { background: transparent; border: 0; border-bottom: 1px solid var(--gold); padding: 8px 0; margin-top: 22px; color: var(--ink); font: 10px 'DM Mono', monospace; cursor: pointer; }
footer { text-align: center; padding: 25px 10px; background: var(--cream); font: 9px 'DM Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: #9b8c63; }
.modal { position: fixed; inset: 0; display: none; place-items: center; z-index: 20; padding: 20px; }
.modal.open { display: grid; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(51, 42, 19, .45); backdrop-filter: blur(5px); }
.modal-card { position: relative; width: min(390px, 100%); padding: 42px 30px 32px; background: #fffbed; text-align: center; box-shadow: 0 20px 70px rgba(0,0,0,.18); animation: pop .25s ease-out; }
.modal-close { position: absolute; top: 10px; right: 15px; border: 0; background: none; font-size: 26px; color: var(--ink); cursor: pointer; }
.modal-flower { font-size: 32px; color: var(--gold); }
.modal-card h2 { font-size: 36px; margin: 0 0 12px; }
.modal-card #modalText { font: italic 17px/1.6 'Playfair Display', serif; margin: 0 0 25px; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 650px) {
  .topbar { padding: 19px 5vw; }
  .brand { font-size: 9px; }
  .music-btn { padding: 8px 10px; }
  .section { padding: 105px 6vw 75px; }
  .hero-stamp { width: 72px; height: 72px; font-size: 8px; right: 5%; top: 25%; }
  .hero-stamp strong { font-size: 15px; }
  .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; gap: 12px; }
  .card-tall { height: 230px; }
  .card-short { height: 195px; }
  .big-confession { margin-top: 50px; }
  .letter-topline { margin-bottom: 35px; }
  .letter-paper { font-size: 13px; }
  .question-section h2 { font-size: clamp(55px, 15vw, 82px); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

.photo-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

.music-section { background: #fffdf6; }
.music-section h2 { font-size: clamp(48px, 7vw, 84px); line-height: .98; margin: 0; }
.music-description { font: italic 18px 'Playfair Display', serif; color: var(--gold); margin: 20px 0; }
.music-player { width: min(560px, 100%); aspect-ratio: 16 / 9; padding: 8px; border: 1px solid #eadca8; background: #fff7d5; box-shadow: 0 16px 40px rgba(112, 87, 24, .1); }
.music-player iframe { width: 100%; height: 100%; border: 0; display: block; }
.music-caption { font: italic 13px 'Playfair Display', serif; color: var(--muted); margin: 20px 0 25px; }