:root{
  --bg:#efe6da;
  --panel:rgba(250,247,241,.48);
  --panel-strong:rgba(250,247,241,.58);
  --ink:#2b2521;
  --soft:#6d625a;
  --accent:#9d6b58;
  --line:rgba(67,52,44,.16);
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Jost",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:#d8c8b7;-webkit-text-size-adjust:100%;overflow-x:hidden;scroll-behavior:smooth}
body{min-width:320px;background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;line-height:1.55;text-align:center;overflow-x:hidden;-webkit-font-smoothing:antialiased}
button,a{font:inherit}
[hidden]{display:none!important}

/* Full-bleed photographic atmosphere */
.photo-stage{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#cdbba8}
.photo{position:absolute;inset:-9%;background:url("couple.jpg") 58% 46%/cover no-repeat;transform:scale(1.09);filter:saturate(.9) contrast(.96);opacity:.96;will-change:transform,opacity,filter}
.photo-wash{position:absolute;inset:0;background:linear-gradient(180deg,rgba(29,21,17,.12) 0%,rgba(244,237,228,.02) 38%,rgba(244,237,228,.14) 68%,rgba(24,18,15,.10) 100%)}
.photo-vignette{position:absolute;inset:0;background:radial-gradient(75% 55% at 50% 44%,transparent 20%,rgba(27,20,16,.12) 100%),linear-gradient(90deg,rgba(250,244,235,.02),transparent 38%,rgba(24,18,15,.10))}

main{position:relative;z-index:1}

/* Hero */
.hero{min-height:108svh;position:relative;display:flex;align-items:flex-end;padding:0 22px 15svh;color:#fffaf3}
.hero-content{width:min(100%,390px);margin:0 auto;padding:30px 22px 36px;border:1px solid rgba(255,255,255,.20);border-radius:30px;background:linear-gradient(145deg,rgba(38,27,21,.10),rgba(255,250,243,.035));backdrop-filter:blur(4px) saturate(108%);-webkit-backdrop-filter:blur(4px) saturate(108%);box-shadow:0 18px 55px rgba(25,17,12,.10),inset 0 1px 0 rgba(255,255,255,.18);position:relative;overflow:hidden}
.hero-content::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 42%,rgba(35,22,15,.06));pointer-events:none}
.eyebrow{position:relative;font-size:9px;letter-spacing:.36em;padding-left:.36em;opacity:.82;margin-bottom:25px}
.names{position:relative;font-family:var(--serif);font-weight:300;font-size:clamp(62px,18vw,86px);line-height:.83;letter-spacing:-.025em;text-shadow:0 3px 24px rgba(0,0,0,.18)}
.n1{display:block;text-align:left;padding-left:4px}.n2{display:block;text-align:right;padding-right:4px}
.amp{display:block;font-size:.44em;line-height:1;color:#ead3bf;margin:.35em 0;font-style:italic}
.hero-date{position:relative;margin-top:30px;font-size:10px;letter-spacing:.28em;padding-left:.28em;opacity:.9}
.hero-date span{margin:0 .65em;color:#ead3bf}
.scroll-cue{position:absolute;bottom:11px;left:50%;width:1px;height:27px;background:rgba(255,255,255,.22);transform:translateX(-50%);overflow:hidden}
.scroll-cue span{display:block;width:1px;height:11px;background:#fff;animation:scrollcue 1.9s ease-in-out infinite}
@keyframes scrollcue{0%{transform:translateY(-12px);opacity:0}35%{opacity:1}100%{transform:translateY(28px);opacity:0}}

/* One shared frosted window for ALL text content */
.content-panel{width:calc(100% - 22px);max-width:560px;margin:-2svh auto 22px;border:1px solid rgba(255,255,255,.46);border-radius:38px;background:linear-gradient(180deg,rgba(249,245,239,.48),rgba(247,241,233,.42));backdrop-filter:blur(15px) saturate(118%);-webkit-backdrop-filter:blur(15px) saturate(118%);box-shadow:0 28px 90px rgba(48,33,24,.18),inset 0 1px 0 rgba(255,255,255,.55);overflow:hidden;position:relative}
.content-panel::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.22),transparent 26%,transparent 74%,rgba(153,105,82,.06));pointer-events:none}
.section{position:relative;padding:104px 28px;z-index:1}
.section+ .section{border-top:1px solid rgba(255,255,255,.16)}

.section-kicker{font-size:9px;letter-spacing:.34em;padding-left:.34em;color:var(--accent);font-weight:400;margin-bottom:31px}
.lead{font-family:var(--serif);font-weight:300;font-size:clamp(25px,7.3vw,34px);line-height:1.38;max-width:16em;margin:0 auto;letter-spacing:-.01em}

/* Date */
.date-section{padding-top:126px;padding-bottom:116px}
.date-wrap{display:flex;flex-direction:column;align-items:center}
.date-main{display:flex;align-items:center;text-align:left}
.day{font-family:var(--serif);font-weight:300;font-size:clamp(118px,36vw,154px);line-height:.78;letter-spacing:-.055em;padding-right:19px}
.date-side{border-left:1px solid rgba(157,107,88,.48);padding:8px 0 8px 18px;min-width:122px}
.month{font-size:12px;letter-spacing:.32em;font-weight:400;padding-left:.32em}
.year{font-family:var(--serif);font-size:25px;line-height:1.15;color:var(--soft);margin-top:5px;letter-spacing:.08em}
.hairline{display:block;width:30px;height:1px;background:var(--accent);margin:19px 0 17px}
.time{font-family:var(--serif);font-size:29px;line-height:1;letter-spacing:.1em}
.date-caption{font-size:9px;letter-spacing:.3em;color:var(--soft);margin-top:25px;padding-left:.3em;text-transform:uppercase}

.countdown{display:grid;grid-template-columns:repeat(4,1fr);width:100%;max-width:350px;margin:67px auto 0;padding-top:25px;border-top:1px solid var(--line)}
.countdown>div{padding:0 2px}.countdown>div+div{border-left:1px solid var(--line)}
.countdown b{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(34px,10.2vw,43px);line-height:1;font-variant-numeric:tabular-nums}
.countdown span{display:block;margin-top:11px;font-size:8px;letter-spacing:.2em;color:var(--soft);padding-left:.2em}
.after{font-family:var(--serif);font-style:italic;font-size:24px;line-height:1.5;max-width:15em;margin:60px auto 0}

/* Venue */
.venue-section{padding-top:124px;padding-bottom:128px}
.venue-mark{font-family:var(--serif);font-size:22px;color:var(--accent);margin-bottom:25px}
h2{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(49px,14vw,66px);line-height:1.05;letter-spacing:-.02em}
.venue-sub{font-family:var(--serif);font-size:22px;letter-spacing:.12em;color:var(--soft);margin:7px 0 42px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:50px;padding:0 27px;border:1px solid rgba(43,37,33,.7);border-radius:999px;color:var(--ink);text-decoration:none;font-size:10px;letter-spacing:.24em;font-weight:400;background:rgba(255,255,255,.24);transition:background .35s ease,color .35s ease,transform .35s ease; -webkit-tap-highlight-color:transparent}
.btn span{font-size:14px;line-height:1;margin-top:-2px}
.btn:active{background:var(--ink);color:#f7f1e9;transform:scale(.98)}
.btn:focus-visible,.music:focus-visible{outline:1px solid var(--accent);outline-offset:4px}

/* Closing */
.closing{padding-top:130px;padding-bottom:max(90px,calc(env(safe-area-inset-bottom) + 80px))}
.closing-lead{font-size:clamp(22px,6.5vw,29px)}
.closing-line{display:block;width:34px;height:1px;background:var(--accent);margin:43px auto 35px}
.sign{font-family:var(--serif);font-weight:300;font-size:clamp(35px,10.8vw,49px);line-height:1.05;letter-spacing:-.02em}
.sign i{font-style:italic;color:var(--accent);font-size:.68em;margin:0 .15em}
.fin-date{margin-top:17px;font-size:10px;letter-spacing:.32em;padding-left:.32em;color:var(--soft)}

/* Music */
.music{position:fixed;top:max(14px,calc(env(safe-area-inset-top) + 9px));right:max(14px,calc(env(safe-area-inset-right) + 9px));z-index:20;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.46);background:rgba(34,25,21,.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fffaf3;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent;box-shadow:0 8px 25px rgba(25,16,11,.12)}
.music svg{width:15px;height:15px;fill:currentColor}.music .i-pause,.music.on .i-play{display:none}.music.on .i-pause{display:block}.music[hidden]{display:none!important}

/* Scroll-driven cinematic text reveal */
.js [data-r]{opacity:0;transform:translate3d(0,24px,0);filter:blur(5px);transition:opacity 1.25s cubic-bezier(.22,1,.36,1) var(--d,0s),transform 1.25s cubic-bezier(.22,1,.36,1) var(--d,0s),filter 1.25s cubic-bezier(.22,1,.36,1) var(--d,0s)}
.js [data-r].in{opacity:1;transform:none;filter:none}
.js .hairline[data-r]{transform:scaleX(0);transform-origin:left center}.js .hairline[data-r].in{transform:scaleX(1)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}.scroll-cue{display:none}.photo{transform:none!important}.js [data-r]{opacity:1;transform:none;filter:none;transition:none}.js .hairline[data-r]{transform:none}
}
@media (max-width:340px){
  .hero{padding-left:16px;padding-right:16px;padding-bottom:13svh}.hero-content{padding-left:20px;padding-right:20px;border-radius:28px}
  .content-panel{width:calc(100% - 14px);border-radius:30px}.section{padding-left:22px;padding-right:22px}
  .day{padding-right:14px}.date-side{padding-left:14px;min-width:112px}.btn{padding:0 22px;letter-spacing:.19em}
}