:root { --ink:#0b0b0b; --cream:#eeeae2; --gutter:clamp(20px,5vw,72px); --display:'Geist',Arial,sans-serif; --mono:'JetBrains Mono',monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--ink); }
body { margin:0; background:var(--ink); color:var(--cream); font-family:var(--display); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
.grain { position:fixed; inset:0; z-index:100; pointer-events:none; opacity:.04; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.mono { font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
.hero { position:relative; min-height:100svh; display:grid; place-items:center; overflow:hidden; padding:120px var(--gutter) 84px; background:#fff; color:var(--ink); }
.photo-intro { position:absolute; inset:0; z-index:20; display:grid; place-items:center; background:#fff; opacity:1; transition:opacity .26s ease; }
.photo-intro.is-finished { opacity:0; }
.photo-intro-frame { position:relative; width:min(68vw,420px,54svh); aspect-ratio:3/4; overflow:hidden; background:#fff; }
.photo-intro-frame::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.15; mix-blend-mode:soft-light; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='4' seed='7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)'/%3E%3C/svg%3E"); }
.photo-intro img { display:block; width:100%; height:100%; object-fit:cover; opacity:0; filter:grayscale(1) contrast(1.08) brightness(.98); }
.photo-intro.is-playing img { opacity:1; }
.title-wrap { position:relative; z-index:2; width:100%; text-align:center; }
h1 { width:100%; margin:0; display:flex; align-items:baseline; justify-content:center; gap:clamp(12px,2.8vw,46px); font-size:clamp(52px,11vw,170px); font-weight:700; line-height:.78; letter-spacing:-.075em; text-align:center; text-transform:uppercase; opacity:0; }
.hero.is-ready h1 { animation:name-float 2.6s cubic-bezier(.16,1,.3,1) .15s both; }
h1 i { font-family:var(--display); font-size:1em; font-style:normal; font-weight:700; text-transform:none; }
.hero-messages { position:absolute; top:calc(100% + clamp(14px,2vw,27px)); left:50%; width:min(94vw,1100px); text-align:center; }
.message-track { display:flex; align-items:center; gap:clamp(14px,2vw,28px); width:max-content; white-space:nowrap; transform:translateX(0); transition:transform .2s cubic-bezier(.22,1,.36,1); }
.message-line { margin:0; overflow:hidden; font-family:var(--mono); font-size:clamp(15px,1.65vw,20px); font-weight:400; line-height:1.6; letter-spacing:.18em; text-transform:uppercase; }
.message-line span { display:block; }
.message-line span.is-typing::after { content:""; display:inline-block; width:1px; height:.95em; margin-left:.16em; background:currentColor; vertical-align:-.08em; animation:caret-blink .7s steps(1,end) infinite; }
.heart-reveal { margin:0; overflow:hidden; font-family:var(--display); font-size:19.6875px; font-weight:400; line-height:1; }
.heart-reveal span { display:block; transform:scaleX(1.08) scaleY(.82); }
@keyframes name-float { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(-22px); } }
@keyframes caret-blink { 50% { opacity:0; } }
@keyframes scroll-reveal { to { opacity:1; transform:translate(-50%,0); } }
.scroll { position:absolute; z-index:3; bottom:max(22px,env(safe-area-inset-bottom)); left:50%; display:flex; align-items:center; justify-content:center; gap:16px; white-space:nowrap; font:13px var(--mono); letter-spacing:.16em; text-align:center; text-transform:uppercase; opacity:0; transform:translate(-50%,18px); }.scroll.is-visible{animation:scroll-reveal 1.3s cubic-bezier(.16,1,.3,1) forwards}.scroll span{font-size:21px}
.film-section { --film-padding:clamp(28px,5svh,64px); height:100svh; min-height:0; padding:var(--film-padding) var(--gutter); display:flex; align-items:center; overflow:hidden; background:var(--ink); color:var(--cream); }
.film-section .mono { font-size:12px; }
.film-layout { width:min(100%,1180px); height:100%; margin:0 auto; display:grid; grid-template-columns:minmax(280px,430px) minmax(320px,1fr); grid-template-areas:"video copy"; column-gap:clamp(60px,9vw,150px); align-items:center; }
.video-frame { position:relative; grid-area:video; width:100%; height:100%; min-height:0; max-width:100%; display:flex; align-items:center; justify-content:flex-start; align-self:center; justify-self:start; overflow:hidden; }
.video-frame video { display:block; width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; background:#050505; box-shadow:0 30px 80px rgba(0,0,0,.4); }
.sound-toggle { position:absolute; top:12px; right:12px; z-index:2; padding:7px 10px; border:1px solid rgba(255,255,255,.28); border-radius:999px; background:rgba(0,0,0,.38); color:rgba(255,255,255,.82); font:12px var(--mono); letter-spacing:.11em; text-transform:uppercase; cursor:pointer; backdrop-filter:blur(6px); transition:background .2s ease,color .2s ease; }
.sound-toggle:hover,.sound-toggle:focus-visible { background:rgba(0,0,0,.68); color:#fff; }
.sound-toggle[hidden] { display:none; }
.film-copy { grid-area:copy; align-self:center; }
h2 { margin:0; font-size:clamp(48px,6vw,86px); font-weight:600; line-height:.88; letter-spacing:-.06em; }
.film-copy .celebration-note { margin:clamp(30px,4vw,54px) 0 0; }
.film-copy .passport-note { width:max-content; margin:12px 0 0; display:flex; align-items:center; gap:12px; line-height:1.5; }
.passport-note span { font-size:21px; line-height:1; }
.date-section { min-height:88svh; padding:100px var(--gutter); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }.date-section>p{margin:0}
.date-line { margin-block:clamp(32px,6vw,70px)!important; display:flex; align-items:center; gap:clamp(10px,2vw,30px); font-size:clamp(62px,16vw,230px); font-weight:700; line-height:.78; letter-spacing:-.075em; }.date-line b{font-weight:300;opacity:.4}
.video-date { position:relative; width:min(100%,1100px); height:clamp(120px,20vw,270px); margin-block:clamp(14px,2.5vw,30px); }
.waves-source { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.waves-date { display:block; width:100%; height:100%; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.date-kicker { margin-bottom:8px!important; font-size:14px; }
.date-written { font:14px/1.5 var(--mono); letter-spacing:.16em; text-transform:uppercase; }
.date-location { margin-top:8px!important; font-size:14px; }
.calendar-link { margin-top:14px; padding:8px 11px; border:1px solid rgba(255,255,255,.3); border-radius:999px; font:12px var(--mono); letter-spacing:.13em; text-transform:uppercase; transition:border-color .2s ease,background .2s ease; }
.calendar-link:hover,.calendar-link:focus-visible { border-color:rgba(255,255,255,.75); background:rgba(255,255,255,.08); }
.calendar-link span { margin-left:5px; font-size:12px; }
footer { padding:28px var(--gutter); display:flex; justify-content:space-between; border-top:1px solid rgba(255,255,255,.18); }footer p{margin:0}footer>p:first-child{font-weight:700;text-transform:uppercase}
@media(max-width:700px){h1{flex-direction:column;align-items:center;gap:8px;line-height:.72}h1 i{margin-block:4px}.hero-messages{top:calc(100% + 15px);width:98vw}.message-track{gap:10px}.message-line{font-size:clamp(9px,2.8vw,13px);letter-spacing:.1em}.heart-reveal{font-size:16.875px}.film-section{--film-padding:clamp(18px,3svh,30px);padding:var(--film-padding) var(--gutter)}.film-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"video" "copy";justify-items:center;row-gap:clamp(12px,2.2svh,22px)}.video-frame{height:100%;min-height:0;width:100%;max-width:100%;align-self:center;justify-self:center;justify-content:center}.film-copy{width:min(100%,390px);align-self:end;text-align:center}.film-copy h2{font-size:clamp(19px,5.6vw,25px);letter-spacing:-.035em;white-space:nowrap}.film-copy h2 br{display:none}.film-copy .celebration-note{margin:18px 0 0}.film-copy .passport-note{margin:8px auto 0}.date-line{gap:8px}footer{gap:20px;align-items:center}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero.is-ready h1{animation:none;opacity:1;transform:translateY(-22px)}.message-track{transition:none}.message-line span.is-typing::after{animation:none}.scroll,.scroll.is-visible{animation:none;opacity:1;transform:translate(-50%,0)}}