* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #08040e; }
body { display: flex; justify-content: center; }
main { width: min(100%, 1024px); line-height: 0; box-shadow: 0 0 40px #f7357940; position:relative; overflow:hidden; }
/* The source image includes a static 46px navigation row. Hide it so the live navigation is not repeated. */
img { display: block; width: 100%; height: auto; transform:translateY(-46px); margin-bottom:-46px; }
.desktop-milestones { position:absolute; top:25.8%; left:3.4%; width:48.3%; height:11.1%; z-index:3; display:grid; grid-template-columns:repeat(4,1fr); overflow:hidden; pointer-events:none; border:1px solid #af426778; border-radius:17px; color:#f5d9c9; background:radial-gradient(circle at 85% 0,#68214252,transparent 34%),linear-gradient(135deg,#221024f2,#0d0915f5); box-shadow:0 12px 25px #03020899,inset 0 1px #ffffff12; font-family:Georgia,serif; }
.desktop-stat { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-width:0; text-align:center; }
.desktop-stat + .desktop-stat { border-left:1px solid #e05a7c2e; }
.desktop-stat-icon { height:29%; display:grid; place-items:center; color:#ff5f98; font:normal clamp(27px,3.2vw,39px)/1 Georgia,serif; text-shadow:0 0 12px #ff2f7899; }
.desktop-calendar { font-size:clamp(23px,2.7vw,33px); }.desktop-sparkle { font-size:clamp(31px,3.5vw,42px); }
.desktop-stat strong { color:#f7dfd1; font-size:clamp(24px,3.15vw,35px); font-weight:400; line-height:1; text-shadow:0 1px 2px #000; }
.desktop-stat span { color:#e9d0c6; font-size:clamp(9px,1.08vw,13px); line-height:1.12; text-shadow:0 1px 2px #000; }
.site-nav { position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: min(100%, 1024px); height: 46px; z-index: 10; display: flex; justify-content: center; align-items: center; gap: clamp(12px, 3.2vw, 38px); background: #0b0610d9; border-bottom: 1px solid #ff4a8730; backdrop-filter: blur(10px); }
.site-nav a { height: 46px; display: grid; place-items: center; color: #eadbe0; font: 14px Georgia, serif; text-decoration: none; padding: 0 5px; transition: color .2s ease, text-shadow .2s ease, border-color .2s ease; border-bottom: 2px solid transparent; }
.site-nav a:hover, .site-nav a:focus-visible, .site-nav a.active { color: #ff7aa9; border-bottom-color: #ff3b7d; text-shadow: 0 0 12px #ff3d80; outline: none; }
.site-nav .for-you { border: 1px solid #ff4c8b; border-radius: 18px; height: 29px; padding: 0 17px; background: #d81a6266; }
.anchor { position:absolute; width:1px; height:1px; left:0; pointer-events:none; }
.song-button { position:absolute; top:19.45%; left:29.9%; width:12.7%; height:2.7%; z-index:3; border:1px solid #e4497c; border-radius:24px; background:linear-gradient(110deg,#1b0b1c,#130a16); color:#f7e8ed; cursor:pointer; box-shadow:0 0 9px #e92c6b55; font:clamp(10px,1.35vw,14px) Georgia,serif; white-space:nowrap; }
.song-button::before { content:'▶  Our Song'; }
.song-button:hover, .song-button:focus-visible { border-color:#ff78a8; box-shadow:0 0 16px #ff367ccc; outline:none; }
.song-button.playing { border-color:#ff5d99; box-shadow:0 0 18px #ff347bcc; }
.love-more-button { position:absolute; top:19.45%; left:5.8%; width:22.4%; height:2.7%; z-index:3; border:0; border-radius:24px; background:linear-gradient(105deg,#ff6094,#d51b5b); color:#fff8fa; cursor:pointer; box-shadow:0 0 16px #ff347da8; font:clamp(9px,1.25vw,14px) Georgia,serif; white-space:nowrap; }
.love-more-button:hover,.love-more-button:focus-visible { filter:brightness(1.12); box-shadow:0 0 22px #ff347dcc; outline:1px solid #ff8db4; }
.memory-carousel { position:absolute; top:55.1%; left:0; width:100%; height:12.7%; z-index:4; display:grid; grid-template-columns:31px 1fr 31px; align-items:center; gap:7px; padding:0 5px; background:#08050e; box-shadow:0 0 22px 8px #08050e; }
.memory-viewport { height:100%; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; background:#08050e; padding:2px 0; }
.memory-viewport::-webkit-scrollbar { display:none; }
.memory-rail { min-height:100%; display:flex; align-items:stretch; gap:10px; }
.memory-card { width:clamp(46px,13vw,133px); height:clamp(64px,17.5vw,179px); flex:0 0 clamp(46px,13vw,133px); min-width:0; max-width:none; overflow:hidden; border:1px solid #f07aa033; border-radius:18px; background:#1a0c19; box-shadow:0 7px 18px #00000088, inset 0 1px #ffffff20; transition:transform .22s ease, box-shadow .22s ease; }
.memory-card:hover { transform:translateY(-4px) scale(1.015); box-shadow:0 12px 24px #000000bb,0 0 15px #e9327455; }
.memory-card img { display:block; width:100%; height:100%; margin:0; transform:none; object-fit:cover; object-position:center center; }
.memory-arrow { width:27px; height:48px; padding:0; border:0; border-radius:0; background:transparent; color:#ffd0df; cursor:pointer; font:43px/34px Georgia,serif; text-shadow:0 0 9px #ff377d; box-shadow:none; }
.memory-arrow:hover,.memory-arrow:focus-visible { color:#fff; outline:none; transform:scale(1.15); }
.memory-empty { width:100%; display:grid; place-items:center; border:1px dashed #f6548d88; border-radius:8px; color:#f5b4c9; background:#180a15df; font:clamp(10px,1.45vw,15px) Georgia,serif; text-align:center; line-height:1.45; }
.song-card-cover { position:absolute; top:69.7%; left:34.15%; width:29.7%; height:22.15%; z-index:5; border:1px solid #a93d615c; border-radius:15px; background:#0b0711; box-shadow:0 0 20px #e8326a1a; }
.music-player { position:absolute; top:70.7%; left:36%; width:26.5%; height:19.95%; z-index:6; overflow:hidden; border:1px solid #d14a7670; border-radius:14px; padding:12px 15px; color:#f7e4e9; background:linear-gradient(145deg,#291023,#100a18); box-shadow:0 0 22px #e8326a22, inset 0 1px #ffffff13; font-family:Georgia,serif; }
.player-head { position:relative; display:flex; justify-content:center; align-items:center; color:#f7e4e9; font-size:clamp(11px,1.45vw,18px); }
.player-head small { position:absolute; right:0; color:#ef83a8; font-size:clamp(8px,.9vw,11px); }
.now-playing { display:flex; align-items:center; gap:9px; margin:17px 0 8px; min-width:0; }
.album-art { flex:none; width:clamp(32px,4vw,45px); height:clamp(32px,4vw,45px); display:grid; place-items:center; border-radius:9px; background:linear-gradient(145deg,#1bd3e9,#005185 55%,#101529); color:white; font-size:clamp(17px,2vw,26px); box-shadow:0 0 11px #0ce0ee66; }
.now-playing div:last-child { min-width:0; }.now-playing b,.now-playing small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.now-playing b { color:#f9edf0; font-size:clamp(9px,1.15vw,14px); }.now-playing small { margin-top:3px; color:#c6adb7; font-size:clamp(7px,.85vw,10px); }
.player-progress { width:100%; height:4px; margin:4px 0 0; accent-color:#ff5a94; cursor:pointer; }.player-time { display:flex; justify-content:space-between; color:#c7b5bc; font-size:clamp(7px,.82vw,10px); }
.player-controls { display:flex; align-items:center; justify-content:center; gap:clamp(11px,2.2vw,25px); margin:5px 0 8px; }.player-controls button { border:0; padding:0; background:transparent; color:#f9e8ee; cursor:pointer; font-size:clamp(11px,1.35vw,17px); }.player-controls .player-play { width:clamp(28px,3.8vw,42px); height:clamp(28px,3.8vw,42px); border-radius:50%; background:#f94e8b; box-shadow:0 0 14px #ff367d; font-size:clamp(12px,1.5vw,19px); }.player-controls button:hover,.player-controls button:focus-visible { color:#ff8bb4; transform:scale(1.1); outline:none; }
.player-list { max-height:27%; overflow:auto; border-top:1px solid #f45d8d2b; padding-top:4px; scrollbar-width:thin; }.playlist-item { display:flex; align-items:center; width:100%; gap:6px; border:0; padding:3px 2px; background:transparent; color:#cbb9bf; cursor:pointer; font:clamp(7px,.84vw,10px) Georgia,serif; text-align:left; }.playlist-item b { color:#ff76a5; }.playlist-item.active { color:#fff; background:#ff4d8717; border-radius:4px; }.playlist-item:hover { color:#ff9fc0; }
.heart-field { position: fixed; inset: 46px 0 0; z-index: 5; pointer-events: none; overflow: hidden; }
.heart { position: absolute; bottom: -30px; color: #ff4b8c; text-shadow: 0 0 10px #ff226c, 0 0 20px #ff226c; opacity: .78; animation: rise linear forwards; }
@keyframes rise { from { transform: translate3d(0,0,0) rotate(0deg) scale(.6); opacity:0; } 12% { opacity:.8; } 100% { transform: translate3d(var(--drift),-110vh,0) rotate(220deg) scale(1.2); opacity:0; } }
@media (min-width: 1025px) { main { margin: 16px 0; } }
@media (max-width: 550px) { .site-nav { gap: 4px; justify-content:space-around; } .site-nav a { font-size: 11px; padding:0 3px; } .site-nav .for-you { display:none; } }

/* A dedicated, readable experience for phone-sized screens. */
.mobile-experience { display:none; }
@media (max-width: 700px) {
  html { scroll-behavior:smooth; }
  body { display:block; background:radial-gradient(circle at 80% 5%,#5b123f 0,#140812 32%,#09050d 75%); }
  main { width:100%; margin:0; box-shadow:none; overflow:visible; }
  main > img, .desktop-milestones, .love-more-button, .song-button, .memory-carousel, .song-card-cover, .music-player, .anchor { display:none; }
  .site-nav { width:100%; height:54px; justify-content:flex-start; gap:2px; padding:0 12px; overflow-x:auto; scrollbar-width:none; background:#120a16e8; border-bottom-color:#ff75a04a; }
  .site-nav::-webkit-scrollbar { display:none; }
  .site-nav a { flex:0 0 auto; height:54px; padding:0 9px; font:12px/1 system-ui,sans-serif; color:#f8e6ed; }
  .site-nav .for-you { display:grid; height:30px; padding:0 12px; }
  .heart-field { inset:54px 0 0; opacity:.65; }
  .mobile-experience { display:block; position:relative; z-index:2; padding:54px 16px 34px; color:#fff4f7; font-family:Georgia,serif; line-height:1.45; }
  .mobile-hero { min-height:500px; display:flex; flex-direction:column; justify-content:flex-end; padding:32px 22px; border:1px solid #ff91b838; border-radius:26px; overflow:hidden; background:linear-gradient(0deg,#130711 6%,#1307111c 70%), url('assets/homepage.jpg') 68% 0 / auto 510px no-repeat; box-shadow:0 20px 45px #00000066, inset 0 1px #ffffff23; }
  .eyebrow, .section-kicker { margin:0 0 7px; color:#ff9cbd; font:700 10px/1.2 system-ui,sans-serif; letter-spacing:.16em; text-transform:uppercase; }
  .mobile-hero h1 { margin:0; font-size:clamp(42px,13vw,60px); line-height:.9; letter-spacing:-.05em; text-shadow:0 4px 24px #ff0b687a; }
  .mobile-hero h1 em { color:#ff5794; font-weight:400; }
  .mobile-hero > p:last-of-type { max-width:205px; margin:20px 0; font-size:16px; line-height:1.5; }
  .mobile-love-button { width:max-content; border:1px solid #ff88b1; border-radius:999px; padding:12px 17px; color:white; background:linear-gradient(110deg,#fa4d86,#b50f4c); box-shadow:0 9px 22px #e70b5a7d; font:600 13px system-ui,sans-serif; }
  .mobile-milestones { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; margin:16px 0 38px; }
  .mobile-milestones div { min-height:96px; display:grid; place-content:center; text-align:center; border:1px solid #ff84aa32; border-radius:17px; background:#ffffff0b; backdrop-filter:blur(8px); }
  .mobile-milestones strong { color:#ff81ac; font-size:27px; line-height:1; }.mobile-milestones span { margin-top:7px; color:#dbc6ce; font-size:10px; }.mobile-milestones .mobile-forever { font-size:34px; }
  .mobile-story, .mobile-memories, .mobile-letter { margin:0 0 38px; }
  .mobile-experience h2 { margin:0; color:#fff7f9; font-size:25px; line-height:1.18; letter-spacing:-.03em; }
  .mobile-story ol { margin:24px 0 0; padding:0; list-style:none; border-left:1px solid #ff5e9280; }
  .mobile-story li { position:relative; display:grid; gap:5px; padding:0 0 23px 20px; }.mobile-story li::before { content:'♥'; position:absolute; left:-8px; top:-3px; color:#ff5b93; font-size:15px; text-shadow:0 0 10px #ff2873; }.mobile-story li b { color:#ff97b9; font-size:14px; }.mobile-story li span { color:#d9c2ca; font-size:13px; }
  .mobile-memory-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:20px; }.mobile-memory-grid img { display:block; width:100%; aspect-ratio:.83; transform:none; margin:0; object-fit:cover; border:1px solid #ff98ba4f; border-radius:16px; box-shadow:0 10px 24px #00000070; }.mobile-memory-grid img:nth-child(3n) { grid-column:span 2; aspect-ratio:1.8; }
  .mobile-letter { padding:23px; border:1px solid #ff8ab43d; border-radius:22px; background:linear-gradient(145deg,#ff598515,#6e1b4412); box-shadow:inset 0 1px #ffffff14; }.mobile-letter > p:not(.section-kicker):not(.signature) { color:#e4ccd4; font-size:14px; }.signature { margin:20px 0 0; color:#ff78a9; font-size:18px; font-style:italic; }
  .mobile-player { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:16px; border:1px solid #ff8eb351; border-radius:20px; background:linear-gradient(135deg,#291222,#0d0b19); box-shadow:0 15px 35px #00000055; }.mobile-album { width:48px; height:48px; display:grid; place-items:center; border-radius:14px; color:white; background:linear-gradient(145deg,#15cedc,#005083 60%,#11152d); font-size:25px; }.mobile-player h2 { font-size:14px; }.mobile-player small { color:#cdb6bf; font:11px system-ui,sans-serif; }.mobile-player .section-kicker { margin-bottom:3px; font-size:8px; }.mobile-player button { width:43px; height:43px; border:0; border-radius:50%; color:white; background:#f84c88; box-shadow:0 0 15px #ff347d; font-size:16px; } footer { padding-top:28px; color:#bba7b0; text-align:center; font:11px system-ui,sans-serif; } footer span { color:#ff6398; }
}
@media (max-width:370px) { .mobile-experience { padding-left:12px; padding-right:12px; }.mobile-hero { padding-left:18px; padding-right:18px; }.mobile-milestones strong { font-size:23px; }.site-nav a { padding:0 7px; } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; } }