/* Hero ---------------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; min-height: 100svh; display: grid; place-items: center; overflow: hidden; padding: calc(var(--nav-h) + env(safe-area-inset-top, 0px)) var(--gutter) var(--s-9); color: var(--on-photo); text-align: center; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__video { opacity: 0; }
.hero__video.is-playing { opacity: 1; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 72% 58% at 50% 46%, rgb(28 30 18 / 0.6), rgb(28 30 18 / 0.26) 60%, rgb(28 30 18 / 0) 88%), linear-gradient(to bottom, rgb(20 24 14 / 0) 60%, rgb(20 24 14 / 0.28)); }
.hero__text { display: grid; justify-items: center; gap: var(--s-3); text-shadow: 0 0 2px rgb(20 24 14 / 0.55), 0 0 7px rgb(20 24 14 / 0.55), 0 2px 32px rgb(20 24 14 / 0.6); }
.hero__kicker { font-size: clamp(1rem, 0.8rem + 0.9vw, 1.75rem); letter-spacing: 0.24em; text-transform: uppercase; text-shadow: 0 0 2px rgb(20 24 14 / 0.65), 0 0 10px rgb(20 24 14 / 0.65), 0 2px 32px rgb(20 24 14 / 0.6); padding: 0.35em 1.4em; background: radial-gradient(closest-side, rgb(20 24 14 / 0.4), rgb(20 24 14 / 0)); }
.hero__names { font-family: var(--font-script); font-size: var(--step-5); line-height: 1.1; padding: 0.05em 0.2em 0.15em; text-wrap: balance; }
.hero__date { font-variant-numeric: lining-nums; font-weight: 500; font-size: clamp(1.25rem, 1rem + 1vw, 2rem); letter-spacing: 0.2em; text-transform: uppercase; }
.hero__place { font-weight: 500; font-size: clamp(0.875rem, 0.8rem + 0.4vw, 1.125rem); letter-spacing: 0.32em; text-transform: uppercase; }
.hero__pause { position: absolute; right: var(--gutter); bottom: calc(var(--s-5) + env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-4); border: 1px solid rgb(251 246 234 / 0.7); border-radius: 999px; background: rgb(20 24 14 / 0.25); color: var(--on-photo); font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; }

/* Welcome ------------------------------------------------------------------- */
.welcome { padding: var(--section-y) var(--gutter) var(--s-8); text-align: center; color: #2A2A28; }
.welcome__inner { display: grid; gap: var(--s-5); max-width: 44rem; margin-inline: auto; font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.5rem); line-height: 1.45; text-wrap: balance; }
.welcome__sign { margin-top: var(--s-3); }
.welcome__names { margin-top: calc(-1 * var(--s-3)); font-family: var(--font-script); font-size: clamp(3rem, 2rem + 4vw, 5.25rem); line-height: 1.15; color: var(--ink); }

/* Footer -------------------------------------------------------------------- */
.footer { display: grid; justify-items: center; gap: var(--s-4); padding: var(--s-9) var(--gutter) calc(var(--s-8) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); text-align: center; color: var(--ink); }
.footer .ln { font-size: 4.5rem; color: var(--ink); }
.footer__line { font-variant-numeric: lining-nums; font-weight: 500; font-size: var(--step--1); letter-spacing: 0.32em; text-transform: uppercase; }

/* Portrait phones: the poster's top 40% is bright sky, so sit the text on the horizon and fields. */
@media (orientation: portrait) and (max-width: 599px) {
  .hero { place-items: end center; padding-bottom: calc(22svh + env(safe-area-inset-bottom, 0px)); }
}
/* Countdown band: tall veil photo with its own golden glow at the sides ------------- */
.countdown { position: relative; isolation: isolate; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; overflow: hidden; background: #E8C58C; color: var(--on-photo); }
.countdown__glow { display: none; }
.countdown__photo { grid-area: 1 / 1; width: 100%; }
.countdown__photo img { width: 100%; height: auto; }
.countdown__overlay { grid-area: 1 / 1; align-self: end; z-index: 1; display: grid; justify-items: center; gap: var(--s-4); width: 100%; padding: var(--s-9) var(--gutter) clamp(32px, 7vh, 80px); background: linear-gradient(to top, rgb(72 44 14 / 0.66), rgb(72 44 14 / 0.38) 55%, rgb(72 44 14 / 0)); text-shadow: 0 0 2px rgb(60 36 12 / 0.6), 0 0 7px rgb(60 36 12 / 0.55), 0 2px 22px rgb(60 36 12 / 0.6); }
@media (max-width: 699px) { .countdown__overlay { background: linear-gradient(to top, rgb(72 44 14 / 0.84), rgb(72 44 14 / 0.64) 50%, rgb(72 44 14 / 0)); } }
.countdown .btn--outline-light { background: rgb(60 36 12 / 0.32); }
.countdown__clock { display: flex; align-items: flex-start; font-weight: 300; font-size: clamp(2.75rem, 1.6rem + 5vw, 6rem); line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.countdown__unit { display: grid; justify-items: center; gap: var(--s-2); }
.countdown__label { font-weight: 500; font-size: clamp(0.75rem, 0.65rem + 0.3vw, 0.9375rem); letter-spacing: 0.2em; text-transform: uppercase; text-shadow: 0 0 2px rgb(60 36 12 / 0.75), 0 0 8px rgb(60 36 12 / 0.7); }
.countdown__sep { padding-inline: 0.04em; }
.countdown__today { font-family: var(--font-script); font-size: var(--step-3); }
@media (min-width: 700px) {
  .countdown { height: min(92vh, 960px); }
  .countdown__glow { display: block; position: absolute; inset: 0; z-index: -2; background: url("/media/veil-glow.jpg") center / auto 100% no-repeat; }
  .countdown__photo { height: 100%; width: auto; aspect-ratio: 1080 / 1619; -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent); }
  .countdown__photo img { height: 100%; width: 100%; object-fit: cover; }
}

/* Our Story ------------------------------------------------------------------- */
.story { display: grid; grid-template-columns: minmax(0, 464px) minmax(0, 580px); justify-content: center; align-items: center; gap: clamp(32px, 8vw, 128px); padding: var(--section-y) var(--gutter); }
.story__photo { padding: 4px; border: 1px solid #DCD5C8; background: var(--cream-deep); }
.story__photo img { width: 100%; aspect-ratio: 464 / 550; object-fit: cover; object-position: 50% 40%; }
.story__text { display: grid; gap: var(--s-5); letter-spacing: 0.02em; line-height: 1.5; }
.story__text .title-script { justify-self: center; }
@media (max-width: 899px) {
  .story { grid-template-columns: minmax(0, 560px); gap: var(--s-6); }
  .story__text { display: contents; }
  .story__text .title-script { order: -1; }
}

/* Monogram band ------------------------------------------------------------------ */
.monogram { position: relative; isolation: isolate; display: grid; place-items: center; height: clamp(300px, 38vw, 560px); overflow: hidden; }
.monogram picture { position: absolute; inset: 0; z-index: -1; }
.monogram img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.monogram .ln { font-size: clamp(7rem, 4rem + 9vw, 13rem); color: var(--on-photo); text-shadow: 0 2px 30px rgb(0 0 0 / 0.25); }
@media (max-width: 599px) { .monogram { height: auto; aspect-ratio: 4 / 3; } }
/* The Day ------------------------------------------------------------------------ */
.day { padding: var(--s-8) var(--gutter); }
.timeline { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--s-4); max-width: 1600px; margin: var(--s-7) auto 0; padding: 0; list-style: none; text-align: center; }
.timeline__icon { width: clamp(72px, 7vw, 120px); height: auto; margin: 0 auto var(--s-4); }
.timeline__time { font-size: clamp(1.0625rem, 0.9rem + 0.45vw, 1.375rem); font-variant-numeric: oldstyle-nums; white-space: nowrap; }
.timeline__name { font-style: italic; font-size: clamp(1.25rem, 1rem + 0.7vw, 1.75rem); color: var(--ink); }
@media (min-width: 1100px) { .timeline__name { white-space: nowrap; } }
.day__note { margin-top: var(--s-6); font-style: italic; font-size: var(--step-1); text-align: center; text-wrap: balance; }
@media (max-width: 1099px) { .timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: var(--s-7); } }
@media (max-width: 599px) {
  .timeline { grid-template-columns: 1fr; gap: 0; max-width: 420px; text-align: left; }
  .timeline__item { display: grid; grid-template-columns: 64px 1fr; column-gap: var(--s-4); align-items: center; padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
  .timeline__icon { grid-row: span 2; width: 64px; margin: 0; }
  .timeline__time { white-space: normal; }
}

/* The Venue ---------------------------------------------------------------------- */
.venue { position: relative; isolation: isolate; display: grid; place-items: center; min-height: clamp(560px, 80vh, 900px); overflow: hidden; padding: var(--s-9) var(--gutter); color: var(--on-photo); text-align: center; }
.venue__media { position: absolute; inset: 0; z-index: -2; }
.venue__media img { width: 100%; height: 100%; object-fit: cover; }
.venue::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 50% 62% at 50% 54%, rgb(24 20 10 / 0.74), rgb(24 20 10 / 0.4) 70%, rgb(24 20 10 / 0.18)); }
.venue__text { display: grid; justify-items: center; gap: var(--s-3); text-shadow: 0 0 2px rgb(20 16 8 / 0.5), 0 0 7px rgb(20 16 8 / 0.5), 0 2px 24px rgb(20 16 8 / 0.5); }
.venue .btn--outline-light { background: rgb(20 16 8 / 0.3); }
.venue__title { font-weight: 300; font-size: clamp(3.5rem, 2.4rem + 4.6vw, 6.5rem); line-height: 1; }
.venue__the { font-family: var(--font-script); }
.venue__name { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); letter-spacing: 0.24em; text-transform: uppercase; }
.venue__sub { font-weight: 500; font-size: clamp(0.875rem, 0.8rem + 0.4vw, 1.125rem); letter-spacing: 0.32em; text-transform: uppercase; }
.venue__sprig { width: 40px; height: 13px; color: var(--on-photo); }
.venue__address { font-style: normal; font-variant-numeric: lining-nums; font-size: clamp(0.9375rem, 0.85rem + 0.4vw, 1.1875rem); letter-spacing: 0.12em; line-height: 1.6; text-transform: uppercase; }
.venue__actions { display: flex; gap: var(--s-5); margin-top: var(--s-4); }
@media (max-width: 599px) {
  .venue::after { background: rgb(24 20 10 / 0.62); }
  .venue__name { letter-spacing: 0.18em; }
  .venue__sub { letter-spacing: 0.2em; text-wrap: balance; }
  .venue__actions { flex-direction: column; width: 100%; }
  .venue__actions .btn { width: 100%; }
}

/* Where to Stay ------------------------------------------------------------------- */
.stay { position: relative; overflow: hidden; padding: var(--section-y) var(--gutter); }
.stay__floral { position: absolute; pointer-events: none; mix-blend-mode: darken; }
.stay__floral--tr { top: 0; right: 0; width: clamp(110px, 15vw, 220px); height: auto; }
.stay__floral--bl { bottom: 0; left: 0; width: clamp(110px, 15vw, 240px); height: auto; }
.hotels { display: grid; grid-template-columns: repeat(2, minmax(0, 468px)); justify-content: center; gap: clamp(24px, 3vw, 40px); margin-top: var(--s-7); }
.hotel { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--s-4); padding: var(--s-7) var(--s-6) var(--s-6); background: var(--forest); color: var(--on-forest); text-align: center; }
.hotel::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgb(201 175 120 / 0.55); pointer-events: none; }
.hotel__art { width: min(100%, 344px); height: auto; mix-blend-mode: lighten; }
.hotel__name { font-weight: 500; font-variant-caps: small-caps; font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem); letter-spacing: 0.06em; line-height: 1.2; text-wrap: balance; }
.hotel__address { font-style: normal; font-size: var(--step-1); line-height: 1.45; }
.hotel__note { max-width: 26ch; font-size: var(--step-1); line-height: 1.4; text-wrap: balance; }
.hotel .btn { width: min(100%, 334px); margin-top: auto; }
.stay__note { display: grid; justify-items: center; gap: var(--s-3); margin-top: var(--s-6); font-style: italic; font-size: var(--step-1); color: var(--ink); text-align: center; }
.stay__note .divider { width: min(120px, 40%); }
@media (max-width: 799px) {
  .hotels { grid-template-columns: minmax(0, 468px); }
  .stay__floral--tr, .stay__floral--bl { width: 88px; }
}
@media (max-width: 599px) { .stay__floral { display: none; } }
/* Transportation ------------------------------------------------------------- */
.travel { padding: var(--section-y) var(--gutter); }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 360px)); justify-content: center; gap: clamp(20px, 3vw, 40px); margin-top: var(--s-7); }
.card { position: relative; display: grid; align-content: start; gap: var(--s-3); padding: var(--s-6) var(--s-5); border: 1px solid var(--line); text-align: center; }
.card::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgb(168 139 98 / 0.35); pointer-events: none; }
.card__title { font-style: italic; font-size: var(--step-2); color: var(--ink); }
@media (max-width: 899px) { .cards { grid-template-columns: minmax(0, 520px); } }

/* Registry: text on the cream wash, trail photo on the right -------------------- */
.registry { position: relative; display: grid; grid-template-columns: 45fr 55fr; min-height: clamp(560px, 90vh, 940px); background: #F3E3CC; color: #3C391F; }
.registry__photo { position: relative; grid-column: 2; grid-row: 1; }
.registry__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 75%; }
.registry__photo::before { content: ""; position: absolute; inset: 0 auto 0 -2px; z-index: 1; width: 35%; background: linear-gradient(to right, #F3E3CC, rgb(243 227 204 / 0.6) 40%, rgb(243 227 204 / 0)); }
.registry__text { grid-column: 1; grid-row: 1; align-self: center; display: grid; justify-items: start; gap: var(--s-5); padding: var(--s-8) var(--gutter) var(--s-8) clamp(24px, 7vw, 120px); }
.registry__kicker { font-weight: 500; font-size: var(--step--1); letter-spacing: 0.32em; text-transform: uppercase; }
.registry__title { margin-top: var(--s-6); font-weight: 300; font-size: var(--step-4); line-height: 1; }
.registry__copy { max-width: 26ch; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); line-height: 1.45; }
.registry .btn--outline-ink { color: #3C391F; }
.registry__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.registry__actions .btn { flex: 1 1 auto; padding-inline: 1.25em; } /* side by side when they fit, else stacked at one width */
@media (max-width: 799px) {
  .registry { grid-template-columns: 1fr; }
  .registry__photo { grid-column: 1; height: 60vh; min-height: 360px; }
  .registry__photo img { object-position: 50% 80%; }
  .registry__photo::before { inset: auto 0 0 0; width: auto; height: 30%; background: linear-gradient(to top, #F3E3CC, rgb(243 227 204 / 0)); }
  .registry__text { grid-row: 2; padding: var(--s-6) var(--gutter) var(--s-8); }
  .registry__title { margin-top: 0; }
  .registry__actions { width: 100%; }
  .registry__actions .btn { flex: 1 1 100%; }
}

/* FAQ ------------------------------------------------------------------------- */
.faq-section { padding: var(--section-y) var(--gutter); }