/* ---------- Base ---------- */
/* Fonts — swap these three to restyle the whole site */
:root {
  --font-display: 'Playfair Display', Georgia, serif;
  --font-accent: 'Playfair Display', Georgia, serif; /* used in italic for flourish titles */
  --font-body: 'Montserrat', system-ui, sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  /* Hero keeps the original invitation fonts */
  --font-hero-display: 'Cormorant Garamond', serif;
  --font-hero-script: 'Pinyon Script', cursive;
  --font-hero-body: Jost, system-ui, sans-serif;
}
html { scroll-behavior: smooth }
body { font-variant-numeric: lining-nums; margin: 0; background: #fdf5ee; color: #3a2a24; font-family: var(--font-body); -webkit-font-smoothing: antialiased }
a { color: #c4441f; text-decoration-thickness: 1px; text-underline-offset: 3px }
a:hover { color: #8f2f14 }
* { box-sizing: border-box }
input, select, textarea, button { font: inherit }

.page { min-height: 100vh; overflow-x: hidden }
.serif { font-family: var(--font-display) }
.script { font-family: var(--font-accent); font-style: italic; font-weight: 400 }
.eyebrow { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #c4441f; font-weight: 500 }
.muted { color: #5c4a42 }
.section { scroll-margin-top: 0; padding: clamp(60px, 8vw, 100px) 20px }
.container { max-width: 1100px; margin: 0 auto }
.section-title { margin: 0; font-family: var(--font-accent); font-style: italic; font-weight: 400; font-size: clamp(40px, 5vw, 58px); line-height: 1; color: #c4441f }
.section-title--lg { font-size: clamp(44px, 5.5vw, 64px) }
.center { text-align: center }
[hidden] { display: none !important }

/* ---------- Buttons ---------- */
.btn { display: inline-block; text-decoration: none; text-transform: uppercase; border-radius: 2px; cursor: pointer; transition: background-color .3s var(--ease-out), color .3s var(--ease-out), transform .2s var(--ease-out), box-shadow .3s var(--ease-out) }
.btn--solid { background: #c4441f; color: #fff; border: 0 }
.btn--solid:hover { background: #a8381a; color: #fff }
.btn--outline { border: 1px solid #c4441f; color: #c4441f; background: rgba(255, 255, 255, .5) }
.btn--outline:hover { background: #fff; color: #c4441f }
.btn--sm { font-size: 12px; letter-spacing: .14em; padding: 13px 20px }
.btn--outline.btn--sm { padding: 12px 20px; background: transparent }
.btn--outline.btn--sm:hover { background: #fff }

/* ---------- Intro video ---------- */
.intro { display: none }
.js .intro { display: block; position: fixed; inset: 0; z-index: 100; background: #fdeee1; transition: opacity 1.4s cubic-bezier(.4, 0, .2, 1), visibility 0s linear 1.4s }
.intro.is-done { opacity: 0; visibility: hidden; pointer-events: none }
.intro.is-done .intro__video { transform: scale(1.04); transition: transform 1.4s cubic-bezier(.4, 0, .2, 1) }
.intro__video { display: block; width: 100%; height: 100%; object-fit: cover }
/* iOS Safari can flash its own play button before autoplay kicks in */
.intro__video::-webkit-media-controls, .intro__video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none }
html.intro-playing, html.intro-playing body { overflow: hidden }

/* ---------- Nav ---------- */
.nav { position: absolute; top: 0; left: 0; right: 0; z-index: 20; padding: 22px 16px 0 }
.nav__bar, .nav__backdrop { display: none }
.nav__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px clamp(18px, 4vw, 52px); font-size: clamp(11px, 1.2vw, 13px); letter-spacing: .2em; text-transform: uppercase; font-weight: 500 }
.nav__links a { color: #3a2a24; text-decoration: none; white-space: nowrap; padding: 8px 2px; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s }
.nav__links a:hover, .nav__links a.is-active { color: #c4441f; border-bottom-color: #c4441f }

/* Mobile: transparent bar (RSVP left, menu right) that frosts once the page scrolls; the menu opens as a soft overlay */
@media (max-width: 699px) {
  .nav { position: fixed; padding: 0; pointer-events: none }
  .nav > * { pointer-events: auto }
  .nav__bar { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; height: 58px; padding: 0 10px 0 16px; background: rgba(253, 245, 238, 0); -webkit-backdrop-filter: blur(0) saturate(1); backdrop-filter: blur(0) saturate(1); transition: background-color .45s ease, -webkit-backdrop-filter .45s ease, backdrop-filter .45s ease }
  .nav.is-scrolled .nav__bar { background: rgba(253, 245, 238, .72); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1) }
  .nav.is-open .nav__bar { background: rgba(253, 245, 238, 0); -webkit-backdrop-filter: blur(0) saturate(1); backdrop-filter: blur(0) saturate(1) }
  .nav__cta { display: inline-flex; align-items: center; height: 36px; padding: 0 18px; border-radius: 2px; background: #c4441f; color: #fff; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; text-decoration: none; transition: background-color .25s, transform .2s var(--ease-out) }
  .nav__cta:hover { background: #a8381a; color: #fff }
  .nav__cta:active { transform: scale(.98) }
  .nav__toggle { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: #c4441f; cursor: pointer; -webkit-tap-highlight-color: transparent }
  .nav__toggle:focus-visible { outline: 2px solid #c4441f; outline-offset: 2px }
  .nav__toggle-icon { position: relative; width: 22px; height: 9px }
  .nav__toggle-icon::before, .nav__toggle-icon::after { content: ""; position: absolute; left: 0; width: 22px; height: 1.5px; background: currentColor; border-radius: 1px; transition: transform .3s var(--ease-out) }
  .nav__toggle-icon::before { top: 0 }
  .nav__toggle-icon::after { bottom: 0 }
  .nav.is-open .nav__toggle-icon::before { transform: translateY(3.75px) rotate(45deg) }
  .nav.is-open .nav__toggle-icon::after { transform: translateY(-3.75px) rotate(-45deg) }

  .nav__links { position: fixed; top: 0; left: 0; right: 0; z-index: 2; flex-direction: column; flex-wrap: nowrap; gap: 0; padding: 58px 28px 22px; max-height: 100dvh; overflow-y: auto; font-size: 13px; letter-spacing: .12em; background: rgba(253, 245, 238, .86); -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1); box-shadow: 0 30px 60px -30px rgba(90, 40, 20, .35); opacity: 0; transform: translateY(-14px); visibility: hidden; transition: opacity .3s, transform .35s var(--ease-out), visibility 0s linear .35s }
  .nav.is-open .nav__links { opacity: 1; transform: none; visibility: visible; transition: opacity .3s, transform .35s var(--ease-out) }
  .nav__links a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 2px; border-bottom: 1px solid rgba(196, 68, 31, .14) }
  .nav__links a:hover, .nav__links a.is-active { border-bottom-color: rgba(196, 68, 31, .14) }
  .nav__links a.is-active::after { content: ""; width: 6px; height: 6px; background: #d9532e; border-radius: 50% }
  .nav__links a[href="#rsvp"] { color: #c4441f; border-bottom: 0 }
  .nav__links a[href="#rsvp"]::after { content: "\2192"; width: auto; height: auto; background: none; border-radius: 0; font-size: 16px; letter-spacing: 0 }

  .nav__backdrop { display: block; position: fixed; inset: 0; z-index: 1; background: rgba(58, 42, 36, .14); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s linear .3s }
  .nav.is-open .nav__backdrop { opacity: 1; visibility: visible; transition: opacity .3s }
  body.menu-open { overflow: hidden }
}

/* ---------- Hero ---------- */
.hero { font-family: var(--font-hero-body); font-variant-numeric: normal; position: relative; text-align: center; padding: clamp(90px, 10vw, 120px) 20px clamp(60px, 8vw, 100px); background: radial-gradient(ellipse at 50% 30%, #fffaf5 0%, #fdf5ee 55%, #fbeadc 100%) }
.hero__floral { position: absolute; pointer-events: none; object-fit: cover }
.hero__floral--left { left: 0; bottom: 0; height: min(100%, 760px); max-width: 22vw; object-position: right bottom }
.hero__floral--right { right: 0; bottom: 0; height: min(100%, 880px); max-width: 23vw; object-position: left bottom }
.hero__content { position: relative; max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; align-items: center }
.hero__rings { width: clamp(180px, 32vw, 300px); height: auto; margin-bottom: 14px }
.hero__kicker { font-size: clamp(13px, 1.6vw, 16px); letter-spacing: .4em; text-transform: uppercase; color: #c4441f; font-weight: 500 }
.hero__names { margin: clamp(14px, 2.5vw, 24px) 0 0; font-family: var(--font-hero-display); font-weight: 500; color: #d9532e; line-height: .9; display: flex; flex-direction: column; align-items: center }
.hero__name { font-size: clamp(64px, 13vw, 128px); letter-spacing: .12em; padding-left: .12em }
.hero__and { display: flex; align-items: center; gap: 18px; width: 100%; margin: 4px 0 }
.hero__and-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #d4a24a) }
.hero__and-line--r { background: linear-gradient(270deg, transparent, #d4a24a) }
.hero__and-word { font-family: var(--font-hero-script); font-weight: 400; font-size: clamp(44px, 7vw, 70px); letter-spacing: 0; color: #c4441f; line-height: 1.1 }
.hero__sub { margin-top: clamp(18px, 3vw, 28px); font-size: clamp(14px, 1.8vw, 18px); letter-spacing: .3em; text-transform: uppercase; color: #c4441f; font-weight: 500 }
.hero__date { margin-top: 18px; display: flex; align-items: center; gap: clamp(14px, 3vw, 26px); font-family: var(--font-hero-display); font-weight: 600; font-size: clamp(34px, 5vw, 48px); letter-spacing: .08em; color: #3a2a24 }
.hero__date-sep { width: 1px; height: .9em; background: #d4a24a }
.hero__place { margin-top: 12px; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: #5c4a42 }
.hero__ctas { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center }
.hero__ctas .btn { font-size: 13px; letter-spacing: .2em; padding: 15px 28px }
.hero__ctas .btn--outline { padding: 14px 28px }

/* ---------- Countdown ---------- */
.countdown { background: linear-gradient(100deg, #d9532e, #e8774a 55%, #d9532e); color: #fff; text-align: center; padding: clamp(36px, 5vw, 56px) 20px }
.countdown__title { font-family: var(--font-accent); font-style: italic; font-weight: 400; font-size: clamp(24px, 3vw, 32px); line-height: 1.2 }
.countdown__grid { margin: 28px auto 0; max-width: 640px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) }
.countdown__cell { display: flex; flex-direction: column; gap: 6px }
.countdown__cell + .countdown__cell { border-left: 1px solid rgba(255, 255, 255, .4) }
.countdown__num { font-family: var(--font-display); font-weight: 500; font-size: clamp(34px, 5vw, 52px); line-height: 1; font-variant-numeric: tabular-nums }
.countdown__label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase }

/* ---------- Story ---------- */
.story { padding: clamp(60px, 8vw, 110px) 20px }
.story__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: clamp(36px, 6vw, 80px); align-items: start }
.story__intro { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 20px }
.story__lede { margin: 20px 0 0; font-family: var(--font-display); font-style: italic; font-size: clamp(19px, 2vw, 22px); line-height: 1.55; color: #3a2a24; text-wrap: pretty }
.story__dates { margin-top: 12px; display: flex; align-items: center; gap: 16px; font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 2.8vw, 32px); letter-spacing: .04em; color: #d9532e }
.story__dates-line { flex: 1; height: 1px; background: linear-gradient(90deg, #d4a24a, #e6b98f) }
.story__caption { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #5c4a42 }
.timeline { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; border-left: 1.5px solid #e9a283 }
.timeline li { position: relative; padding: 0 0 32px 28px }
.timeline li:last-child { padding-bottom: 0 }
.timeline__dot { position: absolute; left: -6px; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: #fdf5ee; border: 2px solid #d9532e }
.timeline__dot--filled { background: #d9532e }
.timeline__heart { position: absolute; left: -9.75px; top: 2px; width: 18px; height: 18px; fill: #d9532e }
.timeline__when { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #c4441f; font-weight: 500 }
.timeline__title { margin-top: 6px; font-family: var(--font-display); font-size: 22px; font-weight: 500 }
.timeline p { margin: 6px 0 0; font-size: 16px; line-height: 1.7; text-wrap: pretty }

/* ---------- Schedule ---------- */
.schedule { text-align: center }
.schedule .section-title { margin-top: 10px }
.schedule__grid { max-width: 960px; margin: 48px auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px }
.event { background: #fdf5ee; border: 1px solid #f1dccb; padding: 36px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px }
.event--featured { background: #d9532e; border-color: #d9532e; color: #fff }
.event__time { font-family: var(--font-display); font-weight: 500; font-size: 44px; line-height: 1; color: #d9532e }
.event__time .ampm { font-size: 18px }
.event--featured .event__time { color: #fff }
.event__rule { width: 28px; height: 1px; background: #d4a24a }
.event--featured .event__rule { background: #fff }
.event__name { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500 }
.event__desc { font-size: 15px; line-height: 1.6; color: #5c4a42 }
.event--featured .event__desc { color: #fff }
.schedule__note { margin: 28px auto 0; font-size: 14px; color: #5c4a42; font-style: italic }

/* ---------- Details ---------- */
.venue { display: flex; flex-direction: column; gap: 22px; border: 1px solid #f1dccb; background: #fff8f2; padding: clamp(24px, 4vw, 40px) }
.venue__name { margin-top: 8px; font-family: var(--font-display); font-weight: 500; font-size: 30px; line-height: 1.15 }
.venue__addr { margin-top: 8px; font-size: 16px; line-height: 1.6; font-style: normal }
.venue__actions { display: flex; flex-wrap: wrap; gap: 10px }
.venue-row { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: stretch }
.venue { justify-content: space-between }
.venue__mapwrap { margin: 0; display: flex; flex-direction: column; gap: 8px }
.venue__map { flex: 1; display: block; width: 100%; min-height: 300px; border: 1px solid #f1dccb; background: #f3eee8 }
@media (max-width: 799px) {
  .venue-row { grid-template-columns: 1fr }
  .venue__map { min-height: 240px }
}
.dress { background: #d9532e; color: #fff; padding: 32px; display: flex; flex-direction: column; gap: 10px }
.dress .eyebrow { color: #fff }
.dress--day { max-width: 960px; margin: 40px auto 0; align-items: center; text-align: center; padding: 36px 28px; box-shadow: 0 24px 48px -24px rgba(170, 60, 20, .55) }
.dress__head { font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 3vw, 32px); line-height: 1.2 }
.dress__quip { font-family: var(--font-display); font-style: italic; font-size: 19px; line-height: 1.45 }

/* ---------- Travel ---------- */
.travel__intro { margin: 14px auto 0; max-width: 520px; font-size: 16px; line-height: 1.6; color: #5c4a42 }
.travel__grid { margin-top: 64px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(28px, 4vw, 48px) }
.travel__col { display: flex; flex-direction: column; gap: 14px }
.travel__head { font-family: var(--font-display); font-weight: 500; font-size: 24px; padding-bottom: 12px; border-bottom: 1px solid #e6b98f }
.travel__col p { margin: 0; font-size: 16px; line-height: 1.7 }
.travel__col strong { font-weight: 500 }
.hotel { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding-bottom: 12px; border-bottom: 1px dashed #ecd0b8 }
.hotel > div { display: flex; flex-direction: column; gap: 2px }
.hotel__name { font-size: 16px; font-weight: 500; color: #3a2a24; text-decoration: none }
a.hotel__name:hover { color: #c4441f }
.hotel__note { font-size: 13px; color: #5c4a42 }
.hotel__dist { font-family: var(--font-display); font-weight: 500; font-size: 18px; color: #c4441f; white-space: nowrap }

/* ---------- RSVP ---------- */
.rsvp__grid { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(32px, 5vw, 64px); align-items: start }
.rsvp__intro { display: flex; flex-direction: column; gap: 16px }
.rsvp__by { margin: 0; font-family: var(--font-display); font-style: italic; font-size: 21px; line-height: 1.45 }
.rsvp__by span { font-style: normal; font-weight: 600 }
.rsvp__text { margin: 0; font-size: 16px; line-height: 1.7; color: #5c4a42 }
.phones { display: flex; flex-direction: column; gap: 10px; margin-top: 8px }
.phone { display: flex; justify-content: space-between; align-items: center; border: 1px solid #f1dccb; padding: 16px 20px; text-decoration: none; color: #3a2a24; font-size: 18px; letter-spacing: .06em; transition: border-color .2s }
.phone:hover { border-color: #c4441f; color: #3a2a24 }
.phone span { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #c4441f }
.rsvp__card { background: #fff8f2; border: 1px solid #f1dccb; padding: clamp(24px, 4vw, 40px) }
.rsvp__card-title { margin: 0 0 26px; padding-bottom: 20px; border-bottom: 1px solid #f1dccb; font-family: var(--font-accent); font-style: italic; font-weight: 400; font-size: clamp(28px, 3vw, 34px); line-height: 1.15; color: #c4441f }
.form { display: flex; flex-direction: column; gap: 26px }
.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 }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0 }
fieldset.field legend { padding: 0; margin-bottom: 10px }
.field { display: flex; flex-direction: column; gap: 6px }
.field__label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500 }
.field__error { margin: 0; font-size: 13px; line-height: 1.4; color: #a8381a; animation: rise .35s var(--ease-out) both }
.input { transition: border-color .2s, box-shadow .2s }
.input:focus { border-color: #c4441f; box-shadow: 0 1px 0 #c4441f; outline: none }
.input[aria-invalid="true"] { border-color: #c4441f }
.input { padding: 10px 0; border: 0; border-bottom: 1px solid #e3c7b0; border-radius: 0; background: transparent; font-size: 16px; letter-spacing: 0; text-transform: none; font-weight: 400; color: #3a2a24; outline-color: #c4441f }
.input::placeholder { color: #b5a196 }
textarea.input { resize: vertical; min-height: 92px; padding: 12px 14px; border: 1px solid #e3c7b0; background: rgba(255, 255, 255, .6) }
textarea.input:focus { box-shadow: 0 0 0 1px #c4441f }

/* Attendance: two button-like choices on visually hidden radios */
.attend__options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.attend__option { position: relative }
.attend__option span { display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 10px 12px; border: 1px solid #e3c7b0; background: #fff; font-family: var(--font-body); font-size: 15px; font-weight: 500; letter-spacing: .02em; line-height: 1.25; text-align: center; color: #3a2a24; cursor: pointer; transition: background-color .25s var(--ease-out), border-color .25s var(--ease-out), color .25s var(--ease-out) }
.attend__option:hover span { border-color: #c4441f }
.attend__option input:checked + span { background: #c4441f; border-color: #c4441f; color: #fff }
.attend__option input:focus-visible + span { outline: 2px solid #c4441f; outline-offset: 2px }
.attend[aria-invalid="true"] .attend__option span { border-color: #c4441f }


/* Underlined select with a drawn chevron */
.input--select { appearance: none; -webkit-appearance: none; padding-right: 28px; cursor: pointer; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23c4441f' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 4px center }

/* Guests + dietary collapse away when declining */
.form__extra { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .45s var(--ease-out), opacity .3s, margin-top .45s var(--ease-out) }
.form__extra-inner { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 26px }
.form__extra.is-collapsed { grid-template-rows: 0fr; opacity: 0; margin-top: -26px }
.form__submit { margin-top: 4px; background: #c4441f; color: #fff; border: 0; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; padding: 17px; cursor: pointer; border-radius: 2px; transition: background-color .2s }
.form__submit:hover { background: #a8381a }
.form__submit:disabled { opacity: .7 }
.form__error { margin: 0; font-size: 14px; color: #a8381a }
.thanks { text-align: center; padding: 40px 10px; display: flex; flex-direction: column; gap: 12px; align-items: center }
.thanks__title { font-family: var(--font-accent); font-style: italic; font-weight: 400; font-size: 44px; line-height: 1.1; color: #c4441f }
.thanks p { margin: 0; font-size: 16px; line-height: 1.7; color: #5c4a42 }
.thanks__again { margin-top: 10px; background: none; border: 1px solid #c4441f; color: #c4441f; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; padding: 12px 20px; cursor: pointer; transition: background-color .2s }
.thanks__again:hover { background: #fff }

/* ---------- FAQ ---------- */
.faq { --grain: .45; background: radial-gradient(ellipse 60% 50% at 0% 0%, rgba(232, 119, 74, .12), transparent 70%), radial-gradient(ellipse 50% 45% at 100% 100%, rgba(212, 162, 74, .14), transparent 70%), #fdf5ee }
.faq .deco--1 { right: -50px; top: 0; height: 70%; transform: rotate(12deg); opacity: .05 }
.faq__list { max-width: 760px; margin: 44px auto 0; border-top: 1px solid #e6b98f }
.faq__item { border-bottom: 1px solid #e6b98f }
.faq__q { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 18px 2px; cursor: pointer; font-family: var(--font-display); font-weight: 500; font-size: clamp(18px, 2vw, 21px); line-height: 1.35; color: #3a2a24; transition: color .2s; -webkit-tap-highlight-color: transparent }
.faq__q::-webkit-details-marker { display: none }
.faq__q:hover, .faq__item[open] .faq__q { color: #c4441f }
.faq__q:focus-visible { outline: 2px solid #c4441f; outline-offset: 2px }
.faq__icon { position: relative; flex: none; width: 14px; height: 14px; color: #c4441f }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 0; top: 6.25px; width: 14px; height: 1.5px; background: currentColor; transition: transform .3s var(--ease-out) }
.faq__icon::after { transform: rotate(90deg) }
.faq__item[open] .faq__icon::after { transform: rotate(0) }
.faq__a { padding: 0 34px 22px 2px }
.faq__a p { margin: 0; font-size: 16px; line-height: 1.7; color: #5c4a42; text-wrap: pretty }
.faq__a strong { font-weight: 500; color: #3a2a24 }
.js .faq__item[open] .faq__a { animation: rise .4s var(--ease-out) both }

/* ---------- Registry ---------- */
.registry__card { scroll-margin-top: 80px; max-width: 760px; margin: clamp(56px, 8vw, 88px) auto 0; background: #d9532e; color: #fff; text-align: center; padding: clamp(36px, 6vw, 56px) clamp(24px, 5vw, 56px); display: flex; flex-direction: column; align-items: center; gap: 14px; box-shadow: 0 24px 48px -24px rgba(170, 60, 20, .55) }
.registry__card .eyebrow { color: #fff }
.registry__title { margin: 0; font-family: var(--font-accent); font-style: italic; font-weight: 400; font-size: clamp(30px, 4vw, 42px); line-height: 1.15 }
.registry__text { margin: 0; max-width: 520px; font-size: 16px; line-height: 1.7 }
.registry__btn { margin-top: 10px; background: #fff; color: #c4441f; font-size: 13px; letter-spacing: .2em; padding: 15px 28px }
.registry__btn:hover { background: #fdf5ee; color: #8f2f14 }

/* ---------- Footer ---------- */
.footer { position: relative; text-align: center; padding: clamp(40px, 6vw, 80px) 20px clamp(70px, 9vw, 110px) }
.footer__floral { position: absolute; object-fit: cover; pointer-events: none; opacity: .95; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 35%); mask-image: linear-gradient(to bottom, transparent, #000 35%) }
.footer__floral--left { left: 0; bottom: -30%; height: 150%; max-width: 22vw; object-position: right bottom }
.footer__floral--right { right: 0; bottom: -25%; height: 140%; max-width: 20vw; object-position: left bottom }
.footer__content { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px }
.footer__line { font-family: var(--font-accent); font-style: italic; font-weight: 400; font-size: clamp(32px, 4.5vw, 48px); line-height: 1.2; color: #c4441f }
.footer__sig { font-family: var(--font-display); font-weight: 500; font-size: 17px; letter-spacing: .18em; color: #3a2a24 }

/* ---------- Textured backgrounds & decorations ---------- */
.textured { position: relative; overflow: clip }
.textured::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--grain, .45); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .32 0 0 0 0 .2 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") }
.textured__inner { position: relative }
.deco { position: absolute; pointer-events: none }
.deco--contain { object-fit: contain }
.deco--cover { object-fit: cover }

.countdown { --grain: .35; position: relative; overflow: clip }
.countdown .deco--1 { left: -40px; top: -30%; height: 170%; transform: scaleX(-1) rotate(-12deg); opacity: .14 }
.countdown .deco--2 { right: -30px; top: -40%; height: 180%; transform: rotate(14deg); opacity: .14 }
.countdown .deco--3 { left: 28%; top: -60%; height: 120%; transform: rotate(70deg); opacity: .06 }
.countdown__inner { position: relative }

.story { --grain: .45; background: radial-gradient(ellipse 60% 50% at 100% 0%, rgba(232, 119, 74, .16), transparent 70%), radial-gradient(ellipse 50% 45% at 0% 100%, rgba(212, 162, 74, .16), transparent 70%), radial-gradient(ellipse 40% 30% at 30% 20%, rgba(255, 255, 255, .7), transparent 70%), #fdf5ee }
.story .deco--1 { left: -60px; top: 8%; height: 520px; transform: scaleX(-1) rotate(-20deg); opacity: .06 }
.story .deco--2 { right: 0; bottom: -10px; height: clamp(160px, 20vw, 280px); max-width: 12vw; opacity: .9 }

.schedule { --grain: .5; background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255, 250, 245, .9), transparent 70%), linear-gradient(180deg, #fbe2cf, #fdf0e5) }
.schedule .deco--1 { left: -50px; top: -10%; height: 130%; transform: scaleX(-1) rotate(-8deg); opacity: .08 }
.schedule .deco--2 { right: -50px; top: -5%; height: 125%; transform: rotate(10deg); opacity: .08 }
.schedule .deco--3 { left: 0; bottom: -20px; height: clamp(200px, 26vw, 340px); max-width: 18vw; transform: scaleX(-1) }
.schedule .deco--4 { right: 0; bottom: -60px; height: clamp(260px, 34vw, 460px); max-width: 16vw }

.travel .deco--4 { left: 0; bottom: -80px; height: clamp(260px, 32vw, 440px); max-width: 16vw }

.travel { --grain: .5; background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(255, 250, 245, .8), transparent 75%), linear-gradient(160deg, #fbe0cc, #fdeee2 50%, #f9dcc6) }
.travel .deco--1 { left: -40px; top: -8%; height: 120%; transform: scaleX(-1) rotate(-14deg); opacity: .08 }
.travel .deco--2 { right: -40px; bottom: -20%; height: 110%; transform: rotate(160deg); opacity: .07 }
.travel .deco--3 { right: 0; top: -10px; height: clamp(200px, 24vw, 320px); max-width: 18vw }

.finale { --grain: .5; background: radial-gradient(ellipse 50% 40% at 15% 20%, rgba(255, 252, 248, .85), transparent 70%), linear-gradient(180deg, #fdf5ee 0%, #fbdcc5 55%, #f8cfb3 80%, #f9dcc6 100%) }
.finale > .rsvp { position: relative }
.finale .deco--1 { right: -50px; top: -6%; height: 80%; transform: rotate(12deg); opacity: .08; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 95%); mask-image: linear-gradient(to bottom, #000 55%, transparent 95%) }

/* Cards lifted off the textured backgrounds */
.event { background: #fffaf6; box-shadow: 0 24px 48px -28px rgba(160, 70, 30, .4) }
.event--featured { background: #d9532e; box-shadow: 0 24px 48px -24px rgba(170, 60, 20, .55) }
.venue { background: #fffaf6; box-shadow: 0 24px 48px -30px rgba(160, 70, 30, .35) }
.phone { background: rgba(255, 250, 246, .8) }
.rsvp__card { background: #fffaf6; box-shadow: 0 30px 60px -30px rgba(160, 70, 30, .45) }

/* ---------- Small screens ---------- */
.hero__place span:not(.hero__place-sep), .footer__sig span:not(.footer__sig-sep) { white-space: nowrap }

@media (max-width: 699px) {
  .hero__content { padding: 0 6px }
  .hero__floral--left { max-width: 15vw; height: min(100%, 520px) }
  .hero__floral--right { max-width: 16vw; height: min(100%, 600px) }
  .hero__place { display: flex; flex-direction: column; gap: 6px; font-size: 11px; letter-spacing: .25em }
  .hero__place-sep { display: none }
  .hero__ctas { width: 100%; flex-direction: column; align-items: center }
  .hero__ctas .btn { width: min(100%, 280px); text-align: center }

  .countdown__label { font-size: 10px; letter-spacing: .1em }

  .faq__list { margin-top: 32px }
  .faq__q { min-height: 56px; padding: 16px 0; gap: 16px }
  .faq__a { padding: 0 0 20px }
  .faq.section.textured { padding-bottom: 60px }
  .registry__btn { width: min(100%, 280px); text-align: center }

  /* Leaves stay, but out from behind the text: ghost shapes fade to texture,
     coloured corners drop into extra space below each section's content */
  .deco--ghost { opacity: .035 !important }
  .section.textured { padding-bottom: calc(clamp(60px, 8vw, 100px) + 90px) }
  .section.textured .deco:not(.deco--ghost) { top: auto; bottom: 0; height: 110px; max-width: 22vw; object-fit: contain }
  .section.textured .deco:not(.deco--ghost)[src*="floral"] { object-fit: cover }
  /* Sized by section height these grow to 4x the screen width in the tall stacked
     sections and cross behind every line of text — pin them to opposite corners */
  .schedule .deco--ghost, .travel .deco--ghost { height: 360px; bottom: auto }
  .schedule .deco--1, .travel .deco--1 { left: -80px; top: -40px }
  .schedule .deco--2, .travel .deco--2 { right: -125px; top: auto; bottom: 140px }

  .footer { padding-left: 16vw; padding-right: 16vw }
  .footer__floral--left, .footer__floral--right { max-width: 15vw }
  .footer__line { font-size: clamp(26px, 7vw, 34px) }
  .footer__sig { display: flex; flex-direction: column; gap: 6px; font-size: 15px; letter-spacing: .16em }
  .footer__sig-sep { display: none }
}

@media (max-width: 360px) {
  .countdown__label { font-size: 9px; letter-spacing: .08em }
  .hero__name { letter-spacing: .08em }
}

/* ---------- Motion ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }

/* Hero entrance: three quiet steps */
.js .hero__content > * { animation: rise .8s var(--ease-out) both; animation-delay: .1s }
.js .hero__content > .hero__names { animation-delay: .25s }
.js .hero__content > :nth-child(n+4) { animation-delay: .4s }
.js .hero__floral { animation: fade 1.2s ease-out both }
/* Hold the entrance until web fonts are in, so text never swaps mid-animation */
.js:not(.is-ready) .hero__content > *, .js:not(.is-ready) .hero__floral { animation-play-state: paused }

/* Scroll reveals: whole blocks only (tagged in script.js) */
.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms) }
.js [data-reveal].is-visible { opacity: 1; transform: none }
/* The row holding the map iframe only fades; moving iframes stutters */
.js .venue-row[data-reveal] { transform: none }
/* Own compositor layer only while hidden or animating */
.js [data-reveal]:not(.reveal-done) { will-change: opacity, transform; backface-visibility: hidden }

/* Press feedback on buttons */
.btn:active, .form__submit:active { transform: scale(.98) }
.form__submit { transition: background-color .3s var(--ease-out), transform .2s var(--ease-out) }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important }
  .js [data-reveal] { opacity: 1; transform: none }
}