:root {
  --olive: #4F5940;
  --sage: #AAB6A0;
  --paper: #F7F3E9;
  --ink: #30362C;
  --gold: #B89B5E;
  --white: #FFFDF7;
  --serif: "Cormorant Garamond", Georgia, serif;
  --script: "Allura", cursive;
  --sans: "Montserrat", Arial, sans-serif;
  --shadow: 0 24px 60px rgba(42, 51, 38, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }
body.invitation-open { overflow-x: hidden; }
button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }

[hidden] { display: none !important; }

.preloader {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: var(--paper); transition: opacity .6s ease, visibility .6s ease;
}
.preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-mark { font: 42px var(--script); color: var(--olive); }
.preloader-line { width: 70px; height: 1px; background: var(--gold); margin-top: 12px; animation: loadLine 1.1s ease-in-out infinite; }
@keyframes loadLine { 0%,100% { transform: scaleX(.25); opacity: .3; } 50% { transform: scaleX(1); opacity: 1; } }

.opening {
  position: fixed; inset: 0; z-index: 999;
  display: grid; place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.55), transparent 26%),
    radial-gradient(circle at 80% 70%, rgba(174,190,164,.28), transparent 30%),
    linear-gradient(135deg, #e9eee5 0%, #f8f6ed 50%, #dfe8dc 100%);
  transition: opacity .8s ease, transform .9s cubic-bezier(.7,0,.2,1);
}
.opening.closing { opacity: 0; transform: scale(1.05); pointer-events: none; }
.opening-card {
  position: relative; z-index: 3;
  width: min(90vw, 540px); min-height: 680px;
  padding: 80px 35px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  border: 1px solid rgba(79,89,64,.2);
  background: rgba(255,253,247,.67);
  box-shadow: 0 30px 100px rgba(54,68,49,.16);
  backdrop-filter: blur(8px);
}
.opening-card::before, .opening-card::after {
  content: ""; position: absolute; inset: 15px;
  border: 1px solid rgba(184,155,94,.38); pointer-events: none;
}
.opening-card::after { inset: 24px; border-color: rgba(79,89,64,.15); }
.eyebrow {
  margin: 0 0 14px;
  letter-spacing: .27em;
  font: 500 10px/1.5 var(--sans);
  color: rgba(255,255,255,.72);
  text-transform: uppercase;
}
.olive { color: var(--olive); }
.opening-initials {
  font: 82px/1 var(--script);
  color: var(--olive);
  margin: 14px 0 8px;
}
.opening-names {
  display: flex; gap: 10px; align-items: center;
  font: 500 30px var(--serif);
  letter-spacing: .03em;
  color: var(--olive);
}
.opening-names i { font: 400 22px var(--serif); color: var(--gold); }
.ornament { display:flex; align-items:center; gap:10px; width: 210px; margin: 20px 0; color: var(--gold); }
.ornament span { flex:1; height:1px; background: rgba(184,155,94,.5); }
.ornament b { font-size: 15px; font-weight:400; }
.opening-date { font: 500 15px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); }
.tap-note { font-size: 9px; letter-spacing: .14em; opacity: .55; margin-top: 20px; text-transform: uppercase; }

.opening-leaf {
  position:absolute; z-index:1; width: 280px; height: 600px; opacity:.25;
  background: repeating-linear-gradient(115deg, transparent 0 48px, rgba(79,89,64,.32) 49px 50px, transparent 51px 95px);
  filter: blur(.2px);
}
.opening-leaf::after {
  content:""; position:absolute; width:150px; height:360px;
  border-radius: 80% 10% 80% 10%;
  background: rgba(112,139,101,.2); transform: rotate(24deg);
}
.opening-leaf-a { left:-110px; top:-70px; transform:rotate(-25deg); }
.opening-leaf-b { right:-120px; bottom:-100px; transform:rotate(155deg); }
.opening-leaf-c { right: 7%; top:-260px; transform:rotate(70deg); opacity:.14; }

.button {
  display:inline-flex; align-items:center; justify-content:center; gap:16px;
  min-height: 48px; padding: 13px 22px;
  border:1px solid transparent;
  text-transform:uppercase; letter-spacing:.17em;
  font-size:10px; font-weight:600;
  transition: transform .3s ease, background .3s ease, color .3s ease, box-shadow .3s ease;
}
.button:hover { transform: translateY(-3px); box-shadow: 0 12px 25px rgba(0,0,0,.12); }
.button-light { color:var(--olive); background:var(--white); border-color:rgba(79,89,64,.18); }
.button-dark { color:var(--white); background:var(--olive); }
.button-outline { color:var(--olive); background:transparent; border-color:rgba(79,89,64,.35); }
.button-arrow { font-size:14px; }

.section { position:relative; padding:110px 22px; overflow:hidden; }
.container { width:min(1120px, 100%); margin:auto; }
.container.narrow { width:min(720px, 100%); text-align:center; }
.section-dark { color:var(--white); background:var(--olive); }
.paper-section { background:var(--paper); }
.section-heading { text-align:center; margin-bottom:55px; }
.section-heading h2, .container h2 {
  margin:0 0 15px;
  font: 600 clamp(44px, 7vw, 76px)/.95 var(--serif);
  letter-spacing:-.02em;
}
.section-heading p:last-child { margin:0; font: 18px/1.7 var(--serif); opacity:.72; }
.body-copy { max-width:560px; margin: 0 auto; font: 18px/1.8 var(--serif); opacity:.78; }

.hero {
  min-height:100svh; display:grid; place-items:center; text-align:center;
  background:
    radial-gradient(circle at 50% 45%, rgba(177,194,166,.16), transparent 36%),
    linear-gradient(145deg, #3f4934, var(--olive));
}
.hero-pattern {
  position:absolute; inset:0; opacity:.18;
  background-image: radial-gradient(circle, rgba(255,255,255,.55) 1px, transparent 1.5px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, transparent, black 25%, black 75%, transparent);
}
.hero-content { position:relative; z-index:2; padding:60px 0; }
.hero-script { font: 38px var(--script); color:#d8dfd1; margin:0 0 10px; }
.hero h1 {
  margin:0; display:flex; flex-direction:column;
  font: 500 clamp(62px, 13vw, 132px)/.78 var(--serif);
  letter-spacing:-.04em;
}
.hero h1 small { font: 38px var(--serif); color:var(--gold); margin:20px 0; }
.gold-rule { width:min(300px,70vw); display:flex; align-items:center; gap:10px; margin:34px auto 25px; }
.gold-rule span { height:1px; flex:1; background:rgba(184,155,94,.5); }
.gold-rule b { color:var(--gold); font-weight:400; }
.hero-date { margin:0; text-transform:uppercase; letter-spacing:.25em; font-size:12px; }
.hero-location { margin:12px 0 0; font:20px var(--serif); opacity:.7; }
.scroll-cue {
  display:grid; place-items:center; width:44px; height:44px; border:1px solid rgba(255,255,255,.3);
  border-radius:50%; margin:60px auto 0; color:var(--gold); animation: bob 2s ease-in-out infinite;
}
@keyframes bob { 50% { transform:translateY(7px); } }

.intro { text-align:center; min-height:720px; display:grid; place-items:center; }
.script-title { font:48px var(--script); color:var(--olive); margin:4px 0 20px; }
.date-card {
  margin:38px auto 0; width:230px; padding:22px 15px;
  border-top:1px solid var(--gold); border-bottom:1px solid var(--gold);
  display:flex; flex-direction:column; gap:3px; text-transform:uppercase; letter-spacing:.14em; font-size:9px;
}
.date-card strong { font:74px/1 var(--serif); color:var(--olive); letter-spacing:0; }
.botanical { position:absolute; width:240px; height:500px; opacity:.16; }
.botanical-left { left:-130px; top:70px; transform:rotate(-25deg); background:radial-gradient(ellipse at center, var(--sage) 0 3%, transparent 4%) 0 0/44px 65px; }
.botanical-right { right:-120px; bottom:10px; transform:rotate(150deg); background:radial-gradient(ellipse at center, var(--sage) 0 3%, transparent 4%) 0 0/44px 65px; }

.photo-feature { background:linear-gradient(180deg,var(--paper),#e9eee4); }
.photo-feature-grid { display:grid; grid-template-columns:1.05fr .8fr; gap:90px; align-items:center; }
.feature-image-frame { position:relative; padding:14px; background:rgba(255,255,255,.5); box-shadow:var(--shadow); transform:rotate(-2deg); }
.feature-image-frame img { width:100%; aspect-ratio:4/5; object-fit:cover; background:var(--sage); }
.feature-image-frame::before { content:""; position:absolute; inset:6px; border:1px solid rgba(184,155,94,.5); pointer-events:none; }
.photo-seal, .wax-initials {
  display:grid; place-items:center; width:74px; height:74px; border-radius:50%;
  background:var(--olive); color:#d9e0d2; border:5px double rgba(184,155,94,.65);
  box-shadow:0 10px 20px rgba(45,53,38,.22); font:30px var(--script);
}
.photo-seal { position:absolute; bottom:-20px; right:-18px; }
.feature-copy h2 { font-size:clamp(54px,7vw,82px); }
.feature-copy h2 em { font:normal 1em var(--script); color:var(--olive); }
.signature { margin-top:35px; font:54px var(--script); color:var(--olive); }

.story { background:linear-gradient(145deg,#46503a,#566047); }
.section-flourish { position:absolute; inset:auto -10% -130px; height:300px; border-radius:50%; border:1px solid rgba(216,226,210,.15); }
.timeline { position:relative; margin-top:50px; }
.timeline::before { content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; background:rgba(255,255,255,.2); transform:translateX(-50%); }
.timeline-item { position:relative; display:grid; grid-template-columns:1fr 54px 1fr; align-items:center; margin:32px 0; }
.timeline-item:nth-child(odd) .timeline-year { grid-column:1; text-align:right; padding-right:28px; }
.timeline-item:nth-child(odd) .timeline-card { grid-column:3; }
.timeline-item:nth-child(even) .timeline-year { grid-column:3; grid-row:1; text-align:left; padding-left:28px; }
.timeline-item:nth-child(even) .timeline-card { grid-column:1; grid-row:1; text-align:right; }
.timeline-dot { grid-column:2; grid-row:1; z-index:2; width:34px; height:34px; margin:auto; display:grid; place-items:center; border-radius:50%; color:var(--gold); background:var(--olive); border:1px solid rgba(184,155,94,.7); }
.timeline-year { font:32px var(--script); color:#d5dece; }
.timeline-card { padding:25px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); backdrop-filter:blur(5px); }
.timeline-card h3 { margin:0 0 8px; font:600 28px var(--serif); }
.timeline-card p { margin:0; line-height:1.7; font:16px var(--serif); opacity:.7; }

.events-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.event-card { position:relative; padding:48px 28px; text-align:center; border:1px solid rgba(79,89,64,.15); background:rgba(255,255,255,.34); min-height:450px; transition:transform .35s ease, box-shadow .35s ease; }
.event-card:hover { transform:translateY(-7px); box-shadow:var(--shadow); }
.event-icon { width:54px; height:54px; margin:0 auto 20px; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(184,155,94,.6); color:var(--gold); font:36px var(--serif); }
.event-number { margin:0; font-size:9px; letter-spacing:.2em; opacity:.45; }
.event-card h3 { margin:12px 0; font:600 34px var(--serif); color:var(--olive); }
.event-rule { width:55px; height:1px; background:var(--gold); margin:15px auto; }
.event-date { margin:0; font:600 13px var(--sans); text-transform:uppercase; letter-spacing:.12em; }
.event-time { margin:8px 0 25px; font:24px var(--serif); color:var(--olive); }
.event-venue { margin:0; font:600 16px var(--serif); }
.event-address { margin:4px auto 22px; max-width:230px; font-size:11px; line-height:1.6; opacity:.6; }
.text-link { font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--olive); border-bottom:1px solid rgba(79,89,64,.35); padding-bottom:5px; }

.countdown-section { text-align:center; background:#e7ece2; }
.countdown-wash { position:absolute; inset:0; opacity:.3; background:radial-gradient(circle at 20% 20%, white 0 2px, transparent 3px) 0 0/48px 48px; }
.countdown { position:relative; display:flex; justify-content:center; align-items:center; gap:clamp(10px,3vw,35px); margin:45px auto 20px; }
.countdown div { min-width:65px; }
.countdown strong { display:block; font:600 clamp(42px,8vw,72px)/.9 var(--serif); color:var(--olive); }
.countdown span { display:block; margin-top:8px; font-size:8px; letter-spacing:.15em; text-transform:uppercase; opacity:.55; }
.countdown i { font:40px var(--serif); color:var(--gold); opacity:.6; }
.countdown-message { font:22px var(--script); color:var(--olive); margin:18px 0 30px; }

.venue { min-height:650px; display:grid; place-items:center; text-align:center; background:linear-gradient(160deg,#414b37,#606b50); }
.venue::before, .venue::after { content:""; position:absolute; width:320px; height:320px; border-radius:50%; border:1px solid rgba(255,255,255,.1); }
.venue::before { top:-180px; left:-90px; }
.venue::after { bottom:-210px; right:-80px; }
.venue-inner { position:relative; z-index:2; }
.venue h2 { font-size:clamp(50px,8vw,90px); }
.venue-address { max-width:480px; margin:0 auto; font:20px/1.6 var(--serif); opacity:.7; }
.venue-date-line { display:flex; justify-content:center; gap:12px; margin:25px 0 35px; font-size:11px; letter-spacing:.15em; text-transform:uppercase; }

.gallery-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:12px; }
.gallery-item { position:relative; padding:0; border:0; overflow:hidden; background:var(--sage); min-height:230px; }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.gallery-item:hover img { transform:scale(1.045); }
.gallery-hover { position:absolute; inset:auto 14px 14px auto; padding:7px 10px; color:white; background:rgba(48,54,44,.65); backdrop-filter:blur(5px); font-size:8px; letter-spacing:.15em; text-transform:uppercase; opacity:0; transform:translateY(5px); transition:.3s; }
.gallery-item:hover .gallery-hover { opacity:1; transform:none; }
.gallery-1 { grid-column:span 5; grid-row:span 2; min-height:560px; }
.gallery-2 { grid-column:span 7; min-height:275px; }
.gallery-3 { grid-column:span 3; }
.gallery-4 { grid-column:span 4; }
.gallery-5 { grid-column:span 7; min-height:300px; }

.rsvp { text-align:center; background:linear-gradient(135deg,#f5f2e8,#dfe8dc); min-height:620px; display:grid; place-items:center; }
.rsvp-leaves { position:absolute; inset:0; opacity:.13; background:radial-gradient(ellipse at 20% 50%,var(--olive) 0 2%,transparent 2.5%) 0 0/70px 90px; }
.rsvp .wax-initials { margin:0 auto 30px; }
.rsvp h2 { font-size:clamp(52px,8vw,85px); }
.rsvp-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:32px; }

.qr-section { text-align:center; }
.qr-frame { width:180px; height:180px; margin:30px auto 0; padding:12px; background:white; border:1px solid rgba(184,155,94,.6); }
.qr-frame img { width:100%; height:100%; object-fit:contain; }

.family { text-align:center; }
.family-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:45px; }
.family-grid > div { padding:30px; border-top:1px solid var(--gold); border-bottom:1px solid rgba(79,89,64,.15); }
.family-grid h3 { margin:0 0 12px; font:36px var(--serif); color:var(--olive); }
.family-grid p { margin:0; font:17px/1.8 var(--serif); opacity:.7; }

.footer { text-align:center; padding-bottom:55px; }
.footer-initials { font:80px var(--script); color:#d5dfce; margin-bottom:20px; }
.footer h2 { font-size:clamp(50px,8vw,82px); }
.footer > .container > p { font:20px var(--serif); opacity:.7; }
.footer-rule { width:100px; height:1px; background:var(--gold); margin:28px auto; }
.footer small { font-size:8px; letter-spacing:.15em; text-transform:uppercase; opacity:.5; }

.music-toggle {
  position:fixed; z-index:800; right:18px; bottom:18px;
  border:1px solid rgba(255,255,255,.25); background:rgba(63,73,52,.9); color:white;
  display:flex; align-items:center; gap:8px; padding:8px 11px 8px 8px; border-radius:30px;
  backdrop-filter:blur(8px); box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.music-disc { width:29px; height:29px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--gold); font-size:13px; }
.music-label { font-size:8px; letter-spacing:.12em; text-transform:uppercase; }
.music-toggle.playing .music-disc { animation:spin 3s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.lightbox {
  position:fixed; inset:0; z-index:2000; background:rgba(20,25,19,.94);
  display:grid; place-items:center; padding:60px;
}
.lightbox img { max-width:min(90vw,1200px); max-height:85vh; object-fit:contain; box-shadow:0 25px 80px rgba(0,0,0,.35); }
.lightbox-close, .lightbox-nav {
  position:absolute; border:0; color:white; background:transparent; font-size:42px; line-height:1;
}
.lightbox-close { top:18px; right:25px; }
.lightbox-nav { top:50%; transform:translateY(-50%); width:55px; height:70px; font-size:55px; }
.lightbox-nav.prev { left:12px; }
.lightbox-nav.next { right:12px; }

.reveal { opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); transition-delay:var(--delay,0ms); }
.reveal.is-visible { opacity:1; transform:none; }

@media (max-width: 800px) {
  .section { padding:85px 18px; }
  .opening-card { min-height:620px; }
  .photo-feature-grid { grid-template-columns:1fr; gap:60px; }
  .feature-copy { text-align:center; }
  .events-grid { grid-template-columns:1fr; max-width:500px; margin:auto; }
  .event-card { min-height:410px; }
  .timeline-item { grid-template-columns:38px 1fr; gap:15px; }
  .timeline::before { left:18px; transform:none; }
  .timeline-dot { grid-column:1 !important; grid-row:1 !important; }
  .timeline-year, .timeline-item:nth-child(odd) .timeline-year, .timeline-item:nth-child(even) .timeline-year {
    grid-column:2; grid-row:1; text-align:left; padding:0; align-self:center;
  }
  .timeline-card, .timeline-item:nth-child(odd) .timeline-card, .timeline-item:nth-child(even) .timeline-card {
    grid-column:2; grid-row:2; text-align:left;
  }
  .timeline-item { align-items:start; }
  .gallery-grid { grid-template-columns:1fr 1fr; }
  .gallery-item, .gallery-1, .gallery-2, .gallery-3, .gallery-4, .gallery-5 {
    grid-column:span 1; grid-row:span 1; min-height:220px;
  }
  .gallery-1 { grid-row:span 2; min-height:452px; }
  .gallery-5 { grid-column:span 2; min-height:270px; }
  .family-grid { grid-template-columns:1fr; }
}
@media (max-width: 500px) {
  .opening-card { width:calc(100vw - 28px); min-height:590px; padding:70px 24px; }
  .opening-card::before { inset:10px; }
  .opening-card::after { inset:17px; }
  .opening-initials { font-size:72px; }
  .opening-names { font-size:26px; }
  .hero h1 { font-size:68px; }
  .hero h1 small { margin:15px 0; }
  .hero-script { font-size:33px; }
  .countdown { gap:5px; }
  .countdown div { min-width:56px; }
  .countdown strong { font-size:39px; }
  .countdown i { font-size:28px; }
  .lightbox { padding:40px 15px; }
  .lightbox-nav { width:40px; font-size:45px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal { opacity:1; transform:none; }
}