:root { --blue:#c9dfef; --blue-soft:#eaf4fa; --blue-mid:#aacde5; --navy:#142a3d; --cream:#fffdf8; --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--navy); font-family:Arial,Helvetica,sans-serif; }
button { font:inherit; }
.intro { position:fixed; inset:0; z-index:100; display:grid; place-items:center; overflow:hidden; background:var(--blue); transition:opacity .85s ease,visibility .85s ease; }
.intro::before,.intro::after { content:''; position:absolute; border:1px solid rgba(255,255,255,.55); border-radius:50%; }
.intro::before { width:52vw; height:52vw; min-width:420px; min-height:420px; left:-25vw; top:-30vw; }
.intro::after { width:38vw; height:38vw; min-width:330px; min-height:330px; right:-20vw; bottom:-24vw; }
.intro-opened { opacity:0; visibility:hidden; pointer-events:none; }
.intro-inner { position:relative; z-index:1; padding:24px; text-align:center; }
.date-label { margin:0 0 28px; font-size:11px; font-weight:700; letter-spacing:.28em; text-transform:uppercase; }
.tiny-star { display:block; margin-bottom:18px; font-size:13px; color:white; }
.intro h1 { margin:0; font-family:Georgia,'Times New Roman',serif; font-size:clamp(45px,7vw,86px); font-weight:400; letter-spacing:-.055em; }
.intro h1 i { font-weight:400; }
.intro-inner>p:not(.date-label) { margin:18px 0 34px; font:italic 17px Georgia,serif; }
.intro button,.secret-button { border:1px solid var(--navy); border-radius:999px; color:var(--navy); background:transparent; padding:14px 24px; cursor:pointer; transition:.25s ease; }
.intro button span { margin-left:28px; }
.intro button:hover,.secret-button:hover { background:var(--navy); color:white; transform:translateY(-2px); }
.intro-footer,.final-footer { position:absolute; bottom:22px; font-size:9px; font-weight:700; letter-spacing:.25em; text-transform:uppercase; opacity:.58; }
.site { opacity:0; transition:opacity .6s ease .25s; }
.site.is-visible { opacity:1; }
.section-pad { padding-left:clamp(22px,6vw,92px); padding-right:clamp(22px,6vw,92px); }
.music-button { position:fixed; top:18px; right:18px; z-index:50; display:flex; align-items:center; gap:8px; border:1px solid rgba(20,42,61,.13); border-radius:999px; background:rgba(255,255,255,.82); color:var(--navy); padding:9px 13px; font-size:10px; font-weight:700; letter-spacing:.08em; backdrop-filter:blur(12px); cursor:pointer; }
.music-dot { width:7px; height:7px; border-radius:50%; background:var(--blue-mid); }
.music-dot.playing { animation:pulse 1.2s ease infinite; }
.hero { position:relative; min-height:100vh; display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:clamp(40px,8vw,130px); background:var(--cream); overflow:hidden; }
.hero::after { content:''; position:absolute; top:0; right:0; width:38%; height:100%; background:var(--blue-soft); z-index:0; }
.hero-copy,.hero-photo,.hero-date { position:relative; z-index:1; }
.eyebrow { margin:0 0 22px; font-size:10px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; }
.hero h2,.section-heading h2,.facts h2,.camera-roll h2,.birthday-note h2,.finale h2 { margin:0; font-family:Georgia,'Times New Roman',serif; font-weight:400; letter-spacing:-.055em; line-height:.98; }
.hero h2 { font-size:clamp(55px,7.8vw,112px); }
em { color:#73a9cc; font-weight:400; }
.hero-sub { margin-top:20px; font:italic 18px Georgia,serif; }
.hero-photo { width:min(100%,540px); justify-self:center; }
.hero-photo .media-shell { aspect-ratio:4/5; border:10px solid white; box-shadow:0 25px 70px rgba(32,70,94,.16); }
.hero-photo .media-file { object-position:center 42%; }
.hero-photo .scribble { position:absolute; right:-22px; bottom:12%; transform:rotate(-7deg); }
.hero-date { position:absolute; bottom:34px; left:clamp(22px,6vw,92px); font-size:10px; letter-spacing:.24em; }
.media-shell { position:relative; overflow:hidden; background:#d9eaf4; }
.media-placeholder { position:absolute; inset:0; display:grid; place-items:center; color:rgba(20,42,61,.48); background:#d9eaf4; }
.media-placeholder span { position:absolute; top:16px; left:17px; font:13px Georgia,serif; }
.media-placeholder small { font-size:9px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; }
.media-file { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:1; }
.play-mark { position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:52px; height:52px; border-radius:50%; border:1px solid rgba(20,42,61,.3); font-size:13px; }
.memory { position:relative; margin:0; }
.memory figcaption { margin-top:10px; font:italic 14px Georgia,serif; }
.scribble { font-family:'Bradley Hand','Comic Sans MS',cursive; font-size:16px; color:#568bac; }
.memories { padding-top:150px; padding-bottom:170px; background:white; }
.section-heading { max-width:700px; margin-bottom:120px; }
.section-heading h2 { font-size:clamp(49px,6.2vw,88px); }
.memory-flow { display:grid; grid-template-columns:repeat(12,1fr); align-items:start; row-gap:120px; }
.memory-large { grid-column:1/span 7; }
.memory-large .media-shell { aspect-ratio:6/5; }
.memory-polaroid { grid-column:8/span 4; padding:12px 12px 42px; background:#fff; box-shadow:0 18px 45px rgba(20,42,61,.1); transform:rotate(2.2deg); }
.memory-polaroid .media-shell { aspect-ratio:1; }
.memory-polaroid figcaption { position:absolute; bottom:12px; left:16px; }
.memory-tall { grid-column:2/span 4; }
.memory-tall .media-shell { aspect-ratio:3/4.5; border-radius:180px 180px 8px 8px; }
.memory-tall .scribble { position:absolute; right:-30px; top:16%; transform:rotate(8deg); }
.memory-video { grid-column:8/span 4; margin-top:100px; }
.memory-video .media-shell { aspect-ratio:9/16; border-radius:6px; }
.memory-small { grid-column:2/span 3; transform:rotate(-2deg); }
.memory-small .media-shell { aspect-ratio:4/5; border:8px solid var(--blue-soft); }
.memory-wide { grid-column:6/span 7; }
.memory-wide .media-shell { aspect-ratio:16/10; }
.memory-extra-left { grid-column:1/span 5; }
.memory-extra-left .media-shell { aspect-ratio:2/3; border-radius:6px; }
.memory-extra-left .media-file { filter:brightness(1.12); }
.memory-extra-center { grid-column:7/span 4; margin-top:100px; transform:rotate(1.4deg); }
.memory-extra-center .media-shell { aspect-ratio:3/4.7; border:8px solid var(--blue-soft); }
.memory-extra-right { grid-column:5/span 7; }
.memory-extra-right .media-shell { aspect-ratio:16/10; }
.memory-small .media-file,.strip-photo:last-child img { filter:brightness(1.1); }
.little-note { position:relative; font:italic clamp(24px,3vw,39px)/1.15 Georgia,serif; }
.little-note span { display:block; margin-bottom:16px; font:9px Arial,sans-serif; letter-spacing:.2em; }
.note-one { grid-column:9/span 4; align-self:center; }
.note-two { grid-column:7/span 5; align-self:center; }
.note-three { grid-column:6/span 5; align-self:center; }
.note-four { grid-column:7/span 5; align-self:center; }
.facts { padding-top:150px; padding-bottom:150px; background:var(--blue-soft); }
.facts-title-wrap { display:grid; grid-template-columns:1fr 2fr; align-items:end; margin-bottom:80px; }
.facts h2 { font-size:clamp(50px,6.3vw,90px); }
.fact-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.fact-card { min-height:230px; display:flex; flex-direction:column; padding:20px; border:1px solid rgba(20,42,61,.15); border-radius:4px 30px 4px 4px; background:rgba(255,255,255,.58); }
.fact-card>span { font-size:9px; letter-spacing:.18em; opacity:.55; }
.fact-card h3 { margin:auto 0 8px; font:italic 24px Georgia,serif; }
.fact-card p { margin:0; max-width:26ch; font-size:12px; line-height:1.5; }
.fact-1,.fact-2 { grid-column:span 3; }
.fact-3,.fact-4,.fact-5 { grid-column:span 2; }
.camera-roll { padding-top:150px; padding-bottom:150px; overflow:hidden; background:var(--cream); }
.camera-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:75px; }
.camera-roll h2 { font-size:clamp(45px,5.8vw,80px); }
.photo-strip { display:grid; grid-template-columns:repeat(5,1fr); align-items:center; gap:12px; width:112%; margin-left:-6%; }
.strip-photo { position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--blue); }
.strip-photo:nth-child(2),.strip-photo:nth-child(4) { transform:translateY(20px); }
.strip-placeholder { position:absolute; inset:0; display:grid; place-items:center; background:var(--blue); }
.strip-placeholder span { font:30px Georgia,serif; color:rgba(20,42,61,.28); }
.strip-photo img { position:relative; width:100%; height:100%; object-fit:cover; opacity:1; }
.strip-labels { margin:42px 0 0; text-align:center; font-size:9px; letter-spacing:.14em; text-transform:uppercase; }
.birthday-note { padding-top:170px; padding-bottom:170px; background:var(--blue); }
.letter { position:relative; width:min(720px,100%); margin:auto; padding:clamp(35px,7vw,90px); background:var(--cream); box-shadow:0 26px 70px rgba(20,42,61,.12); }
.letter-number { position:absolute; right:25px; top:25px; font:13px Georgia,serif; color:#79aaca; }
.birthday-note h2 { margin-bottom:45px; font-size:clamp(50px,7vw,82px); }
.letter-body { max-width:530px; font:18px/1.7 Georgia,serif; }
.letter-body p { margin:0 0 18px; }
.sign-off { margin:45px 0 0; font-family:'Bradley Hand','Comic Sans MS',cursive; font-size:24px; color:#5c94b7; transform:rotate(-2deg); }
.finale { position:relative; min-height:100vh; display:grid; place-items:center; overflow:hidden; background:#f9fcfe; text-align:center; }
.finale::before { content:''; position:absolute; width:470px; height:470px; border:1px solid var(--blue); border-radius:50%; }
.finale-inner { position:relative; z-index:1; }
.finale h2 { font-size:clamp(56px,8vw,105px); }
.final-love { margin:24px 0 32px; font:italic 20px Georgia,serif; }
.secret-button:disabled { opacity:.55; }
.secret { height:0; margin-top:0; opacity:0; transform:translateY(8px); transition:.45s ease; font:italic 18px Georgia,serif; }
.secret.is-open { height:40px; margin-top:28px; opacity:1; transform:none; }
.spark { position:absolute; color:#7aacca; animation:twinkle 1.6s ease infinite alternate; }
.spark-one { left:10%; bottom:24%; }.spark-two { right:6%; top:30%; animation-delay:.4s; }.spark-three { right:18%; bottom:8%; animation-delay:.8s; }
@keyframes pulse { 50% { transform:scale(1.45); opacity:.55; } }
@keyframes twinkle { to { transform:scale(1.45) rotate(12deg); opacity:.35; } }
@media (max-width:760px) {
  .hero { min-height:auto; grid-template-columns:1fr; padding-top:120px; padding-bottom:90px; }
  .hero::after { top:auto; bottom:0; width:100%; height:43%; }
  .hero-photo { width:90%; }.hero-date { display:none; }
  .memories,.facts,.camera-roll,.birthday-note { padding-top:100px; padding-bottom:100px; }
  .section-heading { margin-bottom:80px; }.memory-flow { grid-template-columns:repeat(6,1fr); row-gap:85px; }
  .memory-large { grid-column:1/-1; }.note-one { grid-column:2/-1; }.memory-polaroid { grid-column:2/span 5; }.memory-tall { grid-column:1/span 5; }
  .note-two { grid-column:2/-1; }.memory-video { grid-column:2/span 4; margin-top:0; }.memory-small { grid-column:1/span 4; }
  .note-three { grid-column:2/-1; }.memory-wide { grid-column:1/-1; }.facts-title-wrap { display:block; }.facts-title-wrap .eyebrow { margin-bottom:24px; }
  .memory-extra-left { grid-column:1/span 5; }.note-four { grid-column:2/-1; }.memory-extra-center { grid-column:2/span 4; margin-top:0; }.memory-extra-right { grid-column:1/-1; }
  .fact-card { grid-column:1/-1; min-height:175px; }.camera-heading { display:block; }.camera-heading .eyebrow { margin-bottom:24px; }
  .photo-strip { display:flex; width:max-content; margin-left:-22px; }.strip-photo { width:46vw; flex:0 0 auto; }.strip-labels { text-align:left; line-height:1.8; }
  .finale::before { width:86vw; height:86vw; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }