@font-face {
  font-family:Jost;
  src:url("./assets/jost.woff2") format("woff2");
  font-weight:100 900;
  font-display:swap;
}
@font-face {
  font-family:"Cormorant Garamond";
  src:url("./assets/cormorant-garamond.woff2") format("woff2");
  font-weight:300 700;
  font-display:swap;
}
@font-face {
  font-family:Allura;
  src:url("./assets/allura.woff2") format("woff2");
  font-display:swap;
}
:root {
  color-scheme:light;
  --ink:#252820;
  --muted:#53584f;
  --paper:#f4f4ef;
  --white:#fcfcf8;
  --green:#e1ebd5;
  --dark-green:#303d31;
  --red:#ad332c;
  --rule:#25282030;
  --gutter:clamp(18px,5vw,72px);
  --serif:"Cormorant Garamond", Georgia, serif;
  --script:"Aston Script", Allura, cursive;
  background:var(--paper);
  color:var(--ink);
  font:16px/1.6 Jost,system-ui,sans-serif;
}
body { margin:0; }
a { color:inherit; }
h1,h2,h3 { margin:0; font-family:var(--serif); font-weight:400; line-height:.96; text-wrap:balance; }
:focus-visible { outline:2px solid var(--red); outline-offset:4px; }
.intro { --envelope-background:#e1ebd5; --envelope-shadow:inset 0 -8px 20px #353f3626; }
#open span { position:absolute; top:68%; left:50%; transform:translateX(-50%); white-space:nowrap; padding:.7em 1em; border-radius:999px; background:var(--dark-green); color:var(--white); font:600 .83rem Jost,sans-serif; }
.guest-nav {
  position:sticky;
  top:10px;
  z-index:2;
  display:flex;
  align-items:center;
  gap:clamp(.8rem,2.4vw,2rem);
  width:fit-content;
  max-width:calc(100% - 12px);
  box-sizing:border-box;
  margin:12px 12px 0 0;
  padding:.7rem .7rem .7rem clamp(1rem,4vw,3.5rem);
  overflow-x:auto;
  background:#f7f7f7;
  color:#111;
  border-radius:0 999px 999px 0;
  scrollbar-width:none;
  transition:padding .3s ease,box-shadow .3s ease,background-color .3s ease;
}
.guest-nav.is-compact {
  padding-block:.4rem;
  background:#fff;
  box-shadow:0 5px 20px #152a2420;
}
.guest-nav a {
  flex:none;
  white-space:nowrap;
  text-decoration:none;
  text-transform:uppercase;
  font:500 clamp(.7rem,1.5vw,1rem)/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;
}
.guest-nav a:hover,.guest-nav a[aria-current] { text-decoration:underline; text-underline-offset:.25em; }
.guest-nav .wordmark { display:none; }
.guest-nav .nav-cta { margin-inline-start:clamp(0px,1vw,1rem); padding:.75em 1.15em; border-radius:999px; color:#fff; background:#111; }
.guest-nav a:focus-visible { outline-offset:2px; }
@media (prefers-reduced-motion:reduce) { .guest-nav { transition:none; } }
.wedding-hero { overflow:hidden; padding:clamp(60px,9vw,120px) var(--gutter) 0; background:var(--paper); text-align:center; scroll-margin-top:4rem; }
.hero-title { position:relative; z-index:1; }
.hero-date { display:inline-block; margin:0 0 1rem; color:var(--red); font-size:.82rem; font-weight:650; }
h1 { font-size:clamp(4.35rem,12vw,12.5rem); letter-spacing:-.04em; }
.hero-copy { max-width:36ch; margin:1.1rem auto 1.4rem; color:var(--muted); text-wrap:pretty; }
.hero-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:.55rem; }
.action, #replay, #music-toggle { display:inline-block; border:1px solid var(--rule); border-radius:999px; padding:.55em 1em; background:var(--white); color:var(--ink); font:600 .85rem/1.5 Jost,sans-serif; text-decoration:none; white-space:nowrap; cursor:pointer; transition:background .2s, color .2s, transform .2s; }
.action:hover,#replay:hover,#music-toggle:hover { background:var(--green); transform:translateY(-2px); }
.primary { background:var(--red); color:var(--white); border-color:var(--red); }
.primary:hover { background:#882922; color:var(--white); }
#music-toggle[hidden],#replay[hidden] { display:none; }
.hero-photos { display:grid; grid-template-columns:1fr 1.25fr 1fr; align-items:center; max-width:950px; margin:clamp(24px,5vw,64px) auto 0; padding:0 0 34px; }
.hero-photo { display:block; width:100%; height:auto; aspect-ratio:5/4; object-fit:cover; border-radius:clamp(10px,2vw,24px); border:4px solid var(--white); box-sizing:border-box; box-shadow:0 12px 30px #25312522; }
.photo-left { --tilt:-9deg; transform:translateX(12%) rotate(var(--tilt)); }
.photo-center { --tilt:0deg; z-index:1; aspect-ratio:4/3; }
.photo-right { --tilt:9deg; transform:translateX(-12%) rotate(var(--tilt)); }
.guest-section { padding:clamp(54px,8vw,110px) var(--gutter); scroll-margin-top:3.5rem; }
.guest-section h2 { font-size:clamp(3rem,7vw,7rem); margin-bottom:.3em; letter-spacing:-.025em; }
.guest-section h3 { font-size:clamp(2rem,4vw,3.3rem); }
.guest-section p { max-width:62ch; }
.rose { background:var(--green); }
.eyebrow { color:var(--muted); font-size:.8rem; font-weight:650; }
#countdown { text-align:center; }
#countdown h2 { margin-inline:auto; }
.countdown { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.5rem; max-width:650px; margin:auto; font-size:clamp(.69rem,2vw,1rem); }
.countdown div { background:var(--white); border-radius:1rem; padding:clamp(.6rem,2vw,1.2rem) .2rem; }
.countdown strong { display:block; font:clamp(2rem,7vw,5rem)/1 var(--serif); font-variant-numeric:tabular-nums; }
.story,.venue-grid,.wedding-footer { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,4vw,60px); align-items:center; }
.venue-grid { align-items:stretch; }
.venue { overflow:hidden; border-radius:1.4rem; background:var(--white); border:1px solid var(--rule); }
.venue img,.story img,.wedding-footer img { display:block; width:100%; object-fit:cover; }
.venue img { aspect-ratio:16/9; }
.story img,.wedding-footer img { border-radius:1.4rem; aspect-ratio:4/3; }
.venue > div { padding:clamp(14px,3vw,30px); }
.accordion { max-width:800px; }
.accordion details { padding:.9rem 0; border-bottom:1px solid var(--rule); }
.accordion details:first-child { border-top:1px solid var(--rule); }
summary { cursor:pointer; font-weight:650; }
summary time { display:inline-block; min-width:5.6em; color:var(--red); }
.entourage { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:1rem; }
.entourage div { border-top:1px solid var(--rule); padding-top:.75rem; }
.entourage dt { font-weight:700; }
.entourage dd { margin:0; }
.tribute { font:clamp(1.4rem,3vw,2rem)/1.25 var(--serif); }
.swatches { display:flex; flex-wrap:wrap; gap:1rem; list-style:none; padding:0; }
.swatches li::before { content:""; display:block; width:2.2rem; height:2.2rem; border-radius:50%; background:var(--swatch); }
.qr { display:block; width:120px; margin-top:1rem; }
.qr svg { display:block; width:100%; height:auto; }
.note { color:var(--muted); font-size:.85rem; }
.wedding-footer { background:var(--dark-green); color:var(--white); }
@keyframes arrive { from { opacity:0; translate:0 22px; } to { opacity:1; translate:0 0; } }
@keyframes photo-rise { from { opacity:0; translate:0 45px; rotate:calc(var(--tilt) * -1); } to { opacity:1; translate:0 0; rotate:0deg; } }
@media (prefers-reduced-motion:no-preference) {
  html { scroll-behavior:smooth; }
  body.revealed .hero-title > * { animation:arrive .66s cubic-bezier(.2,.75,.25,1) both; }
  body.revealed .hero-title h1 { animation-delay:.1s; }
  body.revealed .hero-copy { animation-delay:.2s; }
  body.revealed .hero-actions { animation-delay:.28s; }
  body.revealed .hero-photo { animation:photo-rise .94s cubic-bezier(.2,.75,.25,1) both; }
  body.revealed .photo-left { animation-delay:.12s; }
  body.revealed .photo-right { animation-delay:.24s; }
  .guest-section.in-view h2 { animation:arrive .58s cubic-bezier(.2,.75,.25,1) both; }
}
@media (max-width:640px) {
  .story,.wedding-footer { grid-template-columns:1fr; }
  .guest-nav .wordmark { display:none; }
  .hero-photo { border-width:2px; }
}


.hero-title h1 {
  font-family:var(--script);
  font-size:clamp(3.15rem, 12vw, 11rem);
  font-weight:400;
  letter-spacing:normal;
  line-height:1.05;
}

.venue { display:flex; flex-direction:column; min-width:0; }
.venue > div { display:flex; flex:1; flex-direction:column; }
.venue .eyebrow { margin:0 0 .55rem; }
.venue h3 + p { margin:.65rem 0 1rem; }
.venue-directions { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:1rem; margin-top:auto; padding-top:1rem; border-top:1px solid var(--rule); }
.venue-directions figure { display:grid; justify-items:center; gap:.25rem; margin:0; }
.venue-directions .qr { width:min(100%,104px); margin:0; background:white; }
.venue-directions figcaption { color:var(--muted); font-size:.68rem; text-align:center; }
.venue-directions .action { justify-self:end; text-align:center; background:var(--green); }
.venue-directions .action:hover { background:var(--dark-green); color:var(--white); }

@media (max-width:640px) {
  #venues { padding-inline:clamp(12px,4vw,22px); }
  .venue-grid { gap:clamp(8px,2.5vw,16px); }
  .venue { border-radius:.85rem; }
  .venue > div { padding:clamp(8px,3vw,16px); }
  .venue img { aspect-ratio:4 / 3; }
  .venue .eyebrow { font-size:.7rem; }
  .venue h3 { font-size:clamp(1.25rem,5.4vw,2rem); }
  .venue h3 + p { font-size:.76rem; line-height:1.4; }
  .venue-directions { grid-template-columns:minmax(0,1fr); gap:.65rem; padding-top:.65rem; }
  .venue-directions .action { justify-self:stretch; font-size:.75rem; padding:.55em .4em; }
}

.guest-section h2,.rsvp-page h1 { font-family:var(--script); letter-spacing:normal; line-height:1.1; }
.guest-section h2 { font-size:clamp(2.65rem, 6.7vw, 6rem); }
.hero-date,#countdown .eyebrow,.venue h3 + p,#faq summary,.wedding-footer h2 + p {
  font-family:var(--serif);
  font-weight:600;
}
.hero-date,#countdown .eyebrow,.wedding-footer h2 + p { font-size:1.22rem; }
.venue h3 + p { font-size:clamp(.96rem, 2.8vw, 1.24rem); }
#faq summary { font-size:clamp(1.3rem, 3vw, 1.65rem); }

#entourage {
  background:#39796f url("./assets/entourage-background.jpg") center / cover no-repeat;
  text-align:center;
}
.entourage-content {
  box-sizing:border-box;
  max-width:760px;
  margin-inline:auto;
  padding:clamp(20px,5vw,52px) clamp(14px,4vw,40px);
  border:1px solid #fcfcf8;
  border-radius:1rem;
  background:#f7faf1ed;
}
.entourage-content .entourage {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(.8rem,3vw,1.7rem);
}
.entourage-content .entourage div { border-color:#39796f55; overflow-wrap:anywhere; }
.entourage-content .entourage div:last-child { grid-column:1 / -1; }
.entourage-content .entourage dt { margin-bottom:.3rem; }
.entourage-content .entourage dd { font-size:clamp(.85rem,2.8vw,1.05rem); }
.entourage-content .tribute { margin:1.5rem auto 0; max-width:35ch; }

#countdown {
  background:linear-gradient(#0626288c,#0626288c), #062628 url("./assets/countdown-background.jpg") center 48% / cover no-repeat;
  color:var(--white);
}
#countdown .eyebrow { margin-inline:auto; color:inherit; }
#countdown .countdown div { background:#fcfcf8f2; color:var(--ink); }

.attire-illustration { max-width:900px; margin:1.5rem 0 1rem; }
.attire-illustration img { display:block; width:100%; height:auto; border-radius:.9rem; }

#gifts {
  background:linear-gradient(#081b14b0,#081b14b0), #081b14 url("./assets/gifts-background.jpg") center 58% / cover no-repeat;
  color:var(--white);
  text-align:center;
}
#gifts p,#gifts .qr { margin-inline:auto; }
#gifts .note { color:inherit; }

#rsvp {
  background:linear-gradient(#03171099,#03171099), #031710 url("./assets/rsvp-background.jpg") center / cover no-repeat;
  color:var(--white);
  text-align:center;
}
#rsvp p,#rsvp .qr { margin-inline:auto; }
#rsvp .note { color:inherit; }
#rsvp .action { border-color:transparent; }
#rsvp :focus-visible { outline-color:var(--white); }

.photo-gallery {
  background:linear-gradient(#052c3173,#052c3173), #052c31 url("./assets/gallery-background.jpg") center 45% / cover no-repeat;
  color:var(--white);
  text-align:center;
}
.photo-gallery :focus-visible { outline-color:var(--white); }
.photo-window { overflow-x:auto; }
.photo-track { display:flex; width:max-content; }
.photo-set { display:flex; flex:none; gap:.65rem; padding-inline-end:.65rem; }
.photo-set img { display:block; width:clamp(128px, 24vw, 236px); aspect-ratio:4 / 3; object-fit:cover; border-radius:.65rem; }
.photo-set[aria-hidden="true"] { display:none; }
@media (prefers-reduced-motion:no-preference) {
  .photo-window:has(.is-looping) { overflow:hidden; }
  .is-looping { animation:photo-marquee 38s linear infinite; }
  .is-looping .photo-set[aria-hidden="true"] { display:flex; }
  .photo-window:focus-within .is-looping { animation-play-state:paused; }
}
@keyframes photo-marquee { to { transform:translateX(-50%); } }


#music-toggle {
  position:fixed;
  z-index:4;
  right:calc(16px + env(safe-area-inset-right));
  bottom:calc(16px + env(safe-area-inset-bottom));
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  padding:0;
  background:var(--dark-green);
  color:var(--white);
  box-shadow:0 3px 12px #16231b45;
}
#music-toggle[hidden] { display:none; }
.music-disc {
  grid-area:1 / 1;
  width:40px;
  aspect-ratio:1;
  border-radius:50%;
  background:conic-gradient(#17251e,#718277,#17251e,#4b6354,#17251e);
  border:1px solid #ffffff40;
}
.music-symbol { grid-area:1 / 1; z-index:1; font-size:14px; }
@media (prefers-reduced-motion:no-preference) {
  .music-disc { animation:record-spin 3s linear infinite paused; }
  #music-toggle.playing .music-disc { animation-play-state:running; }
}
@keyframes record-spin { to { transform:rotate(1turn); } }