/* Taylor & Tristan — shared styles for all eight pages.
   Sky blue #b2cada, metallic gold, Manrope, and Cormorant Garamond. */
:root {
  --paper: #fcfaf5;
  --ink: #263e50;
  --blue: #b2cada;
  --blue-light: #e7f0f6;
  --muted: #405362;
  --line: #d9c8a5;
  --gold: #78601d;
  --gold-accent: #d4af37;
  --font-heading: "Cormorant Garamond", Georgia, serif;
  --font-body: "Manrope", Arial, sans-serif;
  --gold-shine: linear-gradient(115deg, #8e681c 0%, #d5ad35 19%, #fff0a0 35%, #c49b26 48%, #ffe99a 65%, #ad8225 83%, #ecd06b 100%);
  --button-gold:
    radial-gradient(ellipse at 32% 0%, rgba(255,250,211,.65), transparent 65%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, rgba(105,74,12,.035) 1px 2px, transparent 2px 4px),
    linear-gradient(110deg, transparent 15%, rgba(255,247,193,.25) 42%, rgba(255,247,193,.08) 58%, transparent 80%),
    linear-gradient(180deg, #ecd47e, #dfbd53 24%, #d5ac3c 55%, #cba033 78%, #bd9029);
}

/* Base and shared navigation */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 105px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.7 var(--font-body); min-height: 100svh; display: flex; flex-direction: column; }
main { flex: 1; }
a { color: inherit; text-underline-offset: 5px; -webkit-tap-highlight-color: transparent; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 5px; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { font-family: var(--font-heading); font-weight: 500; }
h1, h2 { font-size: clamp(34px, 4.1vw, 56px); line-height: 1.12; letter-spacing: -1.4px; }
h3 { font-size: 29px; line-height: 1.2; }
p { max-width: 65ch; }
.eyebrow { font-size: clamp(16px, 1.6vw, 21px); font-weight: 700; line-height: 1.5; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 24px; }
.small { font-size: 14px; }
.skip-link { position: absolute; top: -90px; left: 12px; z-index: 10; background: #fff; padding: 12px; }
.skip-link:focus { top: 12px; }
.site-header { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 25px; min-height: 83px; padding: 15px 4%; background: #d8e7f0; border-bottom: 2px solid transparent; border-image: var(--gold-shine) 1; }
.site-header nav { display: flex; align-items: center; gap: 22px; }
.site-header .header-mark { justify-self: start; }
.site-header .nav-pages { justify-content: center; }
.site-header .header-rsvp { justify-self: end; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; font-size: 12px; font-weight: 700; line-height: 1.4; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; }
.site-header nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; font-size: 13px; letter-spacing: .8px; text-transform: uppercase; text-decoration: none; text-align: center; }
.site-header nav a:hover, .site-header nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
.header-mark { font: 28px var(--font-heading); text-decoration: none; white-space: nowrap; }
.header-mark span, .monogram span { font-style: italic; color: var(--gold); margin: 0 3px; }
.header-mark small { font-size: 18px; margin-left: 12px; }
.nav-rsvp, .button, .rsvp-status { background: var(--button-gold); color: #30260e; border: 1px solid #a47b24; border-top-color: #f5e2a0; border-left-color: #ddbf68; border-radius: 5px; text-shadow: 0 1px 0 rgba(255,245,194,.5); box-shadow: inset 0 1px 0 rgba(255,253,224,.75), inset 0 -1px 0 rgba(110,77,14,.3), 0 3px 8px rgba(63,48,16,.1); }
.nav-rsvp { padding: 10px 22px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 49px; padding: 15px 26px; font-size: 14px; font-weight: 600; text-align: center; text-decoration: none; margin-top: 25px; }
.button:hover, .nav-rsvp:hover { filter: brightness(1.05); }
.section-wrap { max-width: 1200px; margin: auto; padding: 80px 40px; }
.page-heading { padding: 58px 24px 48px; text-align: center; background: linear-gradient(120deg, #e7f0f6, #d8e7f0); border-bottom: 1px solid var(--line); }
.page-heading p { margin: 16px auto 0; color: var(--muted); }
.section-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px 30px; margin-bottom: 36px; }
.section-heading .eyebrow { margin: 0; }

/* Home photo and story */
.hero { position: relative; display: flex; align-items: center; justify-content: center; height: calc(100svh - 83px); min-height: 700px; max-height: 980px; padding: 90px 24px; text-align: center; overflow: hidden; background: #182a39; isolation: isolate; }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 43%; transform: scale(1.16); z-index: -3; }
.hero-shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(13,28,40,.35), rgba(13,28,40,.55) 40%, rgba(13,28,40,.55) 60%, rgba(13,28,40,.45)); }
.hero-content { position: relative; z-index: 2; width: 100%; max-width: 1200px; color: #fffdf4; text-shadow: 0 2px 16px #0009; }
.hero-announcement { margin: 0 auto 24px; font: 500 clamp(18px, 2vw, 25px)/1.5 var(--font-heading); letter-spacing: 2px; }
.hero h1 { font-size: clamp(56px, 6.3vw, 100px); letter-spacing: -3px; line-height: 1.14; text-wrap: balance; }
.hero h1 em { margin: 0 .1em; font-size: .8em; color: #f9dc73; }
.hero-date { font-size: clamp(14px, 1.5vw, 19px); letter-spacing: 4px; margin: 26px auto 0; font-weight: 600; color: #fff0b3; }
.hero-place { margin: 15px auto 0; font-size: clamp(12px, 1.3vw, 16px); }
.hero-bottom { position: absolute; bottom: 34px; left: 0; right: 0; width: fit-content; margin: auto; padding: 10px; z-index: 2; color: #fff3bd; font-size: 10px; letter-spacing: 3px; text-decoration: none; }
.hero-bottom span { margin-left: 13px; }

.couple-photo { display: block; width: 100%; height: auto; border-radius: 180px 180px 4px 4px; }



.signature { margin-top: 30px; font: italic clamp(22px, 2.3vw, 29px)/1.5 var(--font-heading); color: var(--gold); }

/* Gold countdown and calendar keepsake */
.countdown-band { display: flex; align-items: center; justify-content: center; gap: 36px; padding: 48px 24px; text-align: center; background: radial-gradient(ellipse at 50% 35%, rgba(255,255,255,.65), transparent 65%), linear-gradient(115deg, #dce9f2, #b2cada 50%, #dce9f2); border-bottom: 2px solid transparent; border-image: var(--gold-shine) 1; }
.countdown-display { position: relative; min-width: 0; padding-right: 36px; }
.countdown-display::after { content: ""; position: absolute; top: 10%; right: 0; width: 2px; height: 80%; border-radius: 2px; background: var(--gold-shine); }
.countdown-display strong { display: block; width: fit-content; max-width: 100%; margin: auto; font-size: clamp(72px, 10vw, 120px); font-weight: 700; font-variant-numeric: lining-nums tabular-nums; line-height: 1.15; letter-spacing: -.045em; color: #856019; }
.countdown-display span { display: block; margin-top: 14px; font-size: clamp(14px, 1.6vw, 18px); font-weight: 700; line-height: 1.6; letter-spacing: 2px; text-transform: uppercase; }
.calendar-button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 0 0 auto; gap: 10px; width: 174px; min-height: 164px; padding: 20px 14px; text-decoration: none; border: 2px solid transparent; border-radius: 20px; background: linear-gradient(#fff,#fff) padding-box, var(--gold-shine) border-box; box-shadow: 0 8px 20px rgba(38,62,80,.09), 0 2px 4px rgba(135,104,35,.08); transition: transform 180ms ease, box-shadow 180ms ease; }
.calendar-button::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(190,155,55,.22); border-radius: 14px; pointer-events: none; }
.calendar-icon { display: block; flex-shrink: 0; width: 48px; height: 48px; color: #a47b20; }
.calendar-label { font-size: 14px; font-weight: 700; line-height: 1.4; }
.calendar-date { font-size: 10px; font-weight: 600; line-height: 1.5; letter-spacing: 1.2px; color: #806019; }
.calendar-button:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(38,62,80,.12); }
.calendar-button:active { transform: translateY(0); }

/* Four-stop timeline and venue cards */
.celebration .section-heading .eyebrow { font-size: clamp(23px, 2.5vw, 32px); letter-spacing: 4px; }
.timeline-date { font: clamp(20px, 2.1vw, 27px)/1.4 var(--font-heading); }
.day-timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 12px 0 48px; padding: 0; }
.day-timeline li { position: relative; display: grid; grid-template-rows: 30px 42px auto auto; align-content: start; justify-items: center; min-width: 0; text-align: center; }
.day-timeline li::after { content: ""; position: absolute; top: 50px; left: 50%; width: 100%; height: 2px; background: var(--gold-shine); }
.day-timeline li:last-child::after { display: none; }
.day-timeline time { font-size: 20px; font-weight: 600; line-height: 30px; letter-spacing: 1px; }
.timeline-dot { position: relative; z-index: 1; align-self: center; width: 18px; height: 18px; border: 3px solid var(--paper); border-radius: 50%; background: var(--gold-shine); box-shadow: 0 0 0 1px #b58e32; }
.day-timeline h3 { margin: 8px 12px 0; font-size: clamp(23px, 2.3vw, 30px); line-height: 1.3; }
.day-timeline p { margin: 9px 16px 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.event-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 30px; }
.event-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid transparent; border-radius: 18px; background: linear-gradient(#fffdf8,#fffdf8) padding-box, var(--gold-shine) border-box; box-shadow: 0 4px 12px rgba(38,62,80,.04), 0 16px 36px rgba(38,62,80,.07); }
.venue-photo { display: block; width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; object-position: center; flex-shrink: 0; background: var(--blue-light); border-bottom: 1px solid #d6b65d; }
.event-content { display: flex; flex-direction: column; flex: 1; padding: clamp(24px, 3vw, 36px); }
.card-number { align-self: flex-start; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #d7bb69; color: #806019; font-size: 12px; font-weight: 700; line-height: 1.5; letter-spacing: 2px; text-transform: uppercase; }
.event-content h3 { min-height: 2.2em; font-size: clamp(34px, 3.2vw, 44px); line-height: 1.1; letter-spacing: -.6px; }
.venue-location { margin: 18px 0 26px; font-style: normal; font-size: 15px; line-height: 1.8; color: var(--muted); }
.venue-schedule { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(135px, 100%), 1fr)); align-content: start; gap: 22px; min-height: 148px; margin: auto 0 22px; padding: 24px; border: 2px solid transparent; border-radius: 14px; background: linear-gradient(135deg, #f2f8fc, #dceaf4 60%, #cbdfea) padding-box, var(--gold-shine) border-box; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 5px 14px rgba(38,62,80,.06); }
.venue-schedule > div { min-width: 0; }
.venue-schedule dt { margin-bottom: 14px; font-size: 11px; font-weight: 700; line-height: 1.5; letter-spacing: 1.3px; text-transform: uppercase; color: #40596b; }
.venue-schedule dd { margin: 0; font-size: clamp(25px, 2.4vw, 32px); font-weight: 600; font-variant-numeric: lining-nums tabular-nums; line-height: 1.25; }
.venue-schedule time { white-space: nowrap; }
.venue-schedule dd > time { display: block; }
.venue-schedule time span { margin-left: 2px; font-size: .65em; font-weight: 600; }
.venue-end-time { display: block; margin-top: 12px; font-size: 12px; font-weight: 500; line-height: 1.5; color: #40596b; }


.venue-map:hover { filter: brightness(1.04); }

/* Wedding party: five across desktop, two across tablet and phone */
.party-section { background: #eef4f8; }

.party-heading { text-align: center; margin: 0 auto 48px; }


.party-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; gap: 48px 24px; width: 100%; margin: auto; }
.party-card { min-width: 0; padding: 10px 8px 20px; text-align: center; }
.party-portrait { display: grid; place-items: center; width: 100%; height: auto; aspect-ratio: 4/5; border-radius: 160px 160px 0 0; background: linear-gradient(145deg,#eaf3f9,#b2cada); border: 1px solid #c7a449; box-shadow: inset 0 0 0 7px #edf4f8, inset 0 0 0 8px #d4af3766; }
.party-portrait span { font: italic 55px var(--font-heading); color: #6b5a28; }
/* Adjust center 30% to reposition a person's face in the arch. */
img.party-portrait { display: block; object-fit: cover; object-position: center 30%; padding: 7px; background: #f9f6ed; box-shadow: 0 8px 22px rgba(38,62,80,.08); }
.party-card h3 { margin: 20px 0 10px; font-size: clamp(24px, 2vw, 29px); font-weight: 600; line-height: 1.1; overflow-wrap: break-word; }
.party-card .party-role { margin: 0 0 12px; font-size: 11px; font-weight: 700; line-height: 1.6; letter-spacing: 1.1px; text-transform: uppercase; }
.party-card p:not(.party-role) { margin: 0; font-size: 13px; line-height: 1.7; color: var(--muted); }
.party-card-honor { border-radius: 150px 150px 12px 12px; background: linear-gradient(180deg,rgba(236,213,143,.22),rgba(255,250,232,.75)); box-shadow: 0 10px 24px rgba(126,97,25,.08); }
.party-card-honor .party-portrait { border: 3px solid #c6a13c; box-shadow: 0 0 0 3px #fff8df, 0 0 0 4px #d9b857, 0 8px 20px rgba(136,105,29,.16); }
.party-card-honor h3 { color: #705318; }
.party-card-honor .party-role { display: inline-block; max-width: 100%; padding: 7px 12px; color: #30260e; background: var(--button-gold); border: 1px solid #bb9437; border-radius: 30px; box-shadow: inset 0 1px 0 rgba(255,250,220,.8); }

/* Travel, FAQ, registry, and RSVP */
.faq { max-width: 920px; padding-top: 55px; }
details { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; padding: 23px 32px 23px 0; position: relative; font-size: 15px; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 2px; font-size: 24px; line-height: 1; }
details[open] summary::after { content: "−"; }
details p { padding: 0 25px 25px 0; color: var(--muted); font-size: 14px; }
.registry { text-align: center; padding-top: 90px; padding-bottom: 95px; }
.registry h2 { max-width: 690px; margin: auto; }
.registry > p:not(.eyebrow) { margin: 24px auto 0; max-width: 510px; font-size: 14px; color: var(--muted); }
.registry p.status-pill { display: inline-block; border: 1px solid var(--line); padding: 10px 22px; font-size: 12px; }
.rsvp { padding: 65px 35px; background: linear-gradient(120deg,#d6e5ef,#b2cada 55%,#d9e8f2); text-align: center; }
.rsvp-inner { max-width: 1060px; margin: auto; padding: 64px 25px; border: 2px solid transparent; border-image: var(--gold-shine) 1; box-shadow: 0 0 0 7px #ffffff26; }
.rsvp h2 { font-size: clamp(40px, 5vw, 66px); }
.rsvp h2 em { color: #6c5419; }
.rsvp p { margin-left: auto; margin-right: auto; }
.rsvp h2 + p { margin-top: 23px; font-size: 14px; }
.rsvp-status { display: inline-block; padding: 14px 25px; margin-top: 30px; margin-bottom: 17px; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.rsvp .small { font-size: 12px; }
footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 38px 5.5%; border-top: 1px solid var(--line); }
.monogram { font: 30px var(--font-heading); letter-spacing: -2px; text-decoration: none; }
footer p { font-size: 11px; color: var(--muted); }
footer p span { margin: 0 10px; }
.footer-note { font: italic 16px var(--font-heading); }


/* Ornate heading, shared floral artwork, and metallic home accents */
.page-heading { position: relative; isolation: isolate; overflow: hidden; }








@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .home-page .hero h1 em, .home-page .hero-date, .home-page .hero-bottom, .home-page .signature { background: var(--button-gold); background-clip: text; -webkit-background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 1px 1px #4b35122b); }
}

/* Travel: hotel gallery, stay details, and helpful cards */
.travel-intro { text-align: center; margin: 0 auto 38px; }
.travel-intro .eyebrow { font-size: 12px; margin-bottom: 14px; color: var(--gold); }
.travel-intro > p:last-child { margin: 20px auto 0; color: var(--muted); }
.hotel-card { display: grid; grid-template-columns: 1.25fr 1fr; overflow: hidden; border: 1px solid transparent; border-radius: 22px; background: linear-gradient(#fffdf8,#fffdf8) padding-box, var(--gold-shine) border-box; box-shadow: 0 12px 30px #263e5010; }
.hotel-gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 12px; background: #e9f1f6; }
.hotel-gallery figure { position: relative; margin: 0; min-width: 0; overflow: hidden; border-radius: 10px; }
.hotel-gallery .hotel-photo-main { grid-column: 1/-1; }
.hotel-gallery img { display: block; width: 100%; height: 100%; min-height: 145px; aspect-ratio: 16/10; object-fit: cover; }
.hotel-photo-main img { min-height: 260px; aspect-ratio: 16/9; }
.hotel-gallery figcaption { position: absolute; bottom: 10px; left: 10px; right: 10px; width: fit-content; padding: 5px 12px; background: #fffdf8ee; border: 1px solid #cfb974; border-radius: 20px; color: var(--ink); font-size: 10px; font-weight: 600; }
.hotel-copy { align-self: center; padding: 38px; }
.hotel-copy .eyebrow { font-size: 11px; letter-spacing: 1.5px; margin-bottom: 14px; color: var(--gold); }
.hotel-copy h3 { font-size: clamp(34px,3.5vw,46px); line-height: 1.1; }
.hotel-copy address { margin: 20px 0; font-style: normal; font-size: 15px; line-height: 1.8; color: var(--muted); }
.hotel-copy > p:not(.eyebrow) { font-size: 14px; color: var(--muted); }
.travel-card-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; margin-top: 32px; }
.travel-info-card { padding: 34px; border: 1px solid #d6c594; border-radius: 18px; background: linear-gradient(135deg,#f7fbfd,#e7f0f6); }
.travel-info-card .eyebrow { margin-bottom: 16px; font-size: 11px; letter-spacing: 1.5px; color: var(--gold); }
.travel-info-card h2 { font-size: 36px; letter-spacing: -.6px; }
.travel-info-card > p:not(.eyebrow) { margin-top: 20px; font-size: 14px; color: var(--muted); }
.travel-list { list-style: none; padding: 0; margin: 24px 0; }
.travel-list li { padding: 14px 0; border-top: 1px solid #c7d8e2; }
.travel-list strong, .travel-list span { display: block; }
.travel-list strong { font-size: 13px; }
.travel-list span { margin-top: 6px; font-size: 13px; color: var(--muted); }
.travel-link { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; font-size: 13px; font-weight: 600; text-decoration-color: #bb963c; }
.local-note { padding: 20px; margin-top: 26px; border: 1px dashed #bea75b; border-radius: 10px; background: #ffffff88; font-size: 13px; color: var(--muted); }
.faq details { margin-bottom: 14px; padding: 0 22px; border: 1px solid #d8c99f; border-radius: 12px; background: #fffdf8; }

/* Responsive rules, in one place */
/* Header: brand and date left, page links centered, RSVP right.
   Smaller screens keep brand/RSVP on row one and page links on row two. */
@media (max-width: 1250px) {
  .site-header { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand rsvp" "pages pages"; gap: 8px 16px; padding: 12px 20px; }
  .site-header .header-mark { grid-area: brand; margin: 0; }
  .site-header .header-rsvp { grid-area: rsvp; }
  .site-header .nav-pages { grid-area: pages; width: 100%; flex-wrap: wrap; gap: 4px 22px; }
  .site-header .nav-pages a { min-height: 36px; font-size: 12px; }
}

@media (max-width: 1050px) {
  .party-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; gap: 40px 30px; }
}
@media (max-width: 760px) {
  
  
  
  
  .hotel-card, .travel-card-grid { grid-template-columns: 1fr; }
  .hotel-copy, .travel-info-card { padding: 26px; }
  .hotel-gallery img { min-height: 115px; }
  .hotel-photo-main img { min-height: 180px; }

  html { scroll-padding-top: 155px; }
  .section-wrap { padding: 60px 24px; }
  .page-heading { padding: 40px 20px; }
  .hero { height: 680px; min-height: 620px; max-height: 850px; padding: 85px 18px; }
  .hero-photo { object-position: 49% 50%; }
  .hero-announcement { font-size: 18px; letter-spacing: 1px; }
  .hero h1 { font-size: clamp(42px, 8.7vw, 62px); letter-spacing: -1.5px; }
  .hero-date { font-size: 14px; letter-spacing: 3px; }
  .hero-bottom { bottom: 24px; font-size: 9px; letter-spacing: 2px; }
  
  .couple-photo { max-width: 480px; margin: auto; }
  
  
  .section-heading { flex-direction: column; align-items: flex-start; gap: 12px; }
  .day-timeline { grid-template-columns: 1fr; margin: 8px 0 36px; }
  .day-timeline li { display: block; text-align: left; padding: 0 0 30px 42px; }
  .day-timeline li:last-child { padding-bottom: 0; }
  .day-timeline li::after { top: 15px; left: 9px; width: 2px; height: 100%; }
  .timeline-dot { position: absolute; left: 1px; top: 6px; }
  .day-timeline h3 { margin: 6px 0 0; font-size: 25px; }
  .day-timeline p { margin: 7px 0 0; font-size: 14px; }
  .event-grid { grid-template-columns: 1fr; gap: 28px; }
  .event-content { padding: 26px 22px; }
  .event-content h3 { min-height: 0; }
  .venue-schedule { min-height: 0; margin-top: 0; padding: 20px; gap: 20px; }
  
  .party-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; gap: 30px 14px; }
  .party-card { padding: 8px 4px 14px; }
  .party-card h3 { margin: 16px 0 8px; font-size: clamp(19px, 5vw, 25px); line-height: 1.15; overflow-wrap: anywhere; }
  .party-card .party-role { font-size: 11px; letter-spacing: .5px; }
  .party-card-honor .party-role { padding: 6px 8px; }
  .party-card p:not(.party-role) { font-size: 12px; line-height: 1.6; }
  
  .rsvp { padding: 35px 18px; }
  .rsvp-inner { padding: 50px 22px; }
  footer { flex-direction: column; gap: 10px; padding: 30px 20px; text-align: center; }
}
@media (max-width: 600px) {
  .site-header { padding: 10px 16px; }
  .site-header .header-mark { font-size: 27px; }
  .site-header .header-mark small { font-size: 15px; margin-left: 8px; }
  .site-header .header-rsvp { min-height: 38px; padding: 9px 18px; }
  .site-header .nav-pages { gap: 2px 14px; }
  .site-header .nav-pages a { font-size: 11px; letter-spacing: .5px; }

  .countdown-band { gap: 18px; padding: 32px 16px; }
  .countdown-display { flex: 1 1 auto; padding-right: 18px; }
  .countdown-display strong { font-size: clamp(48px, 12vw, 72px); }
  .countdown-display span { max-width: 180px; margin-left: auto; margin-right: auto; font-size: 12px; letter-spacing: 1px; }
  .calendar-button { width: 124px; min-height: 144px; padding: 16px 10px; gap: 9px; border-radius: 16px; }
  .calendar-button::before { border-radius: 10px; }
  .calendar-icon { width: 40px; height: 40px; }
  .calendar-label { font-size: 12px; }
  .calendar-date { font-size: 9px; letter-spacing: .6px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .calendar-button { transition: none; }
  .calendar-button:hover { transform: none; }
}

/* FLORAL PLACEMENT: artwork grows in from corners, not the middle of cards.
   Change opacity to soften it; change the negative offsets to crop more/less.
   These decorative layers never receive clicks or cover the reading layer. */
.floral-scene { position: relative; isolation: isolate; overflow: hidden; }
.floral-scene > section { position: relative; z-index: 1; }
.floral-scene::before, .floral-scene::after, .page-heading::before, .page-heading::after,
.home-page .hero::before, .home-page .hero::after {
  content: ""; position: absolute; pointer-events: none;
  background-repeat: no-repeat; background-size: contain;
  filter: saturate(.76); z-index: 0;
}
.floral-scene::before { top: -65px; left: -125px; width: 285px; height: 390px;
  background-image: url("./assets/floral-spray.png"); transform: rotate(-28deg); opacity: .38;
  -webkit-mask-image: linear-gradient(135deg,#000 25%,transparent 85%);
  mask-image: linear-gradient(135deg,#000 25%,transparent 85%); }
.floral-scene::after { bottom: -125px; right: -100px; width: 320px; height: 430px;
  background-image: url("./assets/floral-bouquet.png"); transform: rotate(-20deg); opacity: .5;
  -webkit-mask-image: linear-gradient(315deg,#000 30%,transparent 85%);
  mask-image: linear-gradient(315deg,#000 30%,transparent 85%); }
.floral-scene-reverse::before { left: auto; right: -125px; transform: scaleX(-1) rotate(-28deg); }
.floral-scene-reverse::after { right: auto; left: -100px; transform: scaleX(-1) rotate(-20deg); }
/* Leave a generous paper margin below opaque sections for the corner stems. */
.floral-scene { padding-bottom: 70px; }
.page-heading { padding-top: 75px; padding-bottom: 65px; }
.page-heading > * { position: relative; z-index: 1; }
.page-heading::before { width: 290px; height: 340px; top: -150px; left: -75px;
  background-image: url("./assets/floral-bouquet.png"); transform: rotate(135deg); opacity: .62;
  -webkit-mask-image: linear-gradient(0deg,transparent,#000 55%); mask-image: linear-gradient(0deg,transparent,#000 55%); }
.page-heading::after { width: 250px; height: 330px; bottom: -165px; right: -65px;
  background-image: url("./assets/floral-spray.png"); transform: rotate(-28deg); opacity: .55;
  -webkit-mask-image: linear-gradient(0deg,#000 25%,transparent); mask-image: linear-gradient(0deg,#000 25%,transparent); }
.home-page .hero::before { top: -110px; left: -135px; width: clamp(250px,27vw,420px); height: clamp(350px,38vw,580px);
  background-image: url("./assets/floral-spray.png"); transform: rotate(-18deg); opacity: .42; filter: saturate(.65) brightness(.85);
  -webkit-mask-image: linear-gradient(135deg,#000 15%,#000c 40%,transparent 82%); mask-image: linear-gradient(135deg,#000 15%,#000c 40%,transparent 82%); }
.home-page .hero::after { bottom: -180px; right: -145px; width: clamp(280px,30vw,460px); height: clamp(380px,42vw,640px);
  background-image: url("./assets/floral-bouquet.png"); transform: rotate(12deg); opacity: .38; filter: saturate(.65) brightness(.85);
  -webkit-mask-image: linear-gradient(315deg,#000 15%,#000c 42%,transparent 85%); mask-image: linear-gradient(315deg,#000 15%,#000c 42%,transparent 85%); }

/* EDIT: Typography/color settings live in :root at the top of this file. */
button { font: inherit; cursor: pointer; }
button:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.section-lede { margin-bottom: 32px; color: var(--muted); }





.story-signature { display: block; margin-top: 24px; color: var(--gold); font: italic 27px var(--font-heading); }
.memory-section .eyebrow, .places-section .eyebrow, .lookbook .eyebrow { font-size: 12px; letter-spacing: 2px; margin-bottom: 12px; color: var(--gold); }
.memory-grid, .places-grid, .lookbook-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 26px; }
.photo-frame { margin: 0; background: #fffdf8; padding: 10px; border: 1px solid var(--line); box-shadow: 0 10px 25px #263e5010; border-radius: 5px; }
.photo-frame img { display: block; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; border-radius: 3px; }
.photo-frame figcaption { padding: 18px 8px 10px; font: italic 25px var(--font-heading); text-align: center; }
.memory-grid .photo-frame:nth-child(2) { margin-top: 35px; }
.place-card { padding: 30px; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(140deg,#fffdf8,#edf4f8); }
.place-card h3 { margin: 26px 0 16px; }
.place-card p { font-size: 14px; }
[aria-disabled="true"] { color: var(--muted); text-decoration: none; cursor: default; }
.places-section iframe { display: block; width: 100%; height: 420px; border: 1px solid var(--line); border-radius: 16px; margin-top: 30px; }
.look-card { overflow: hidden; border: 1px solid var(--line); border-radius: 130px 130px 12px 12px; background: #fffdf8; }
.photo-crop { overflow: hidden; }
.look-card img { display: block; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; }
.look-copy { padding: 26px; }
.look-copy p { margin-top: 14px; font-size: 14px; }
.couple-keepsake { max-width: 350px; margin: 38px auto 0; transform: rotate(-2deg); }

/* Gallery: responsive grid; full-size dialog uses native horizontal scrolling.
   Add photos in gallery.html only; script.js builds the viewer automatically. */
.gallery-intro { margin: 0 auto 36px; text-align: center; color: var(--muted); }
.gallery-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; align-items: start; }
.gallery-tile { min-width: 0; margin: 0; }
.gallery-tile a { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--blue-light); }
.gallery-tile:nth-child(3n + 2) { margin-top: 35px; }
.gallery-tile img { display: block; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; }
.gallery-tile:nth-child(4n) img { aspect-ratio: 1; }
.gallery-tile figcaption { padding: 12px 4px; font: italic 24px var(--font-heading); }
.photo-dialog { width: min(1100px,96vw); max-width: 96vw; height: min(880px,94dvh); max-height: 94dvh; padding: 0; color: var(--ink); background: var(--paper); border: 1px solid #c9a850; border-radius: 14px; box-shadow: 0 30px 100px #0005; overflow: hidden; }
.photo-dialog[open] { display: flex; flex-direction: column; }
.photo-dialog::backdrop { background: #102431e8; }
.viewer-toolbar, .viewer-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; flex: 0 0 auto; }
.viewer-toolbar h2 { font-size: 28px; letter-spacing: -.3px; }
.viewer-toolbar button, .viewer-controls button { min-height: 44px; border: 1px solid #b89849; border-radius: 8px; padding: 9px 14px; background: #fff; color: var(--ink); font-size: 13px; }
.viewer-controls button:disabled { opacity: .4; cursor: default; }
.viewer-count { font-size: 13px; white-space: nowrap; }
.viewer-track { display: flex; flex: 1; min-height: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.viewer-slide { flex: 0 0 100%; min-width: 0; height: 100%; margin: 0; padding: 0 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; scroll-snap-align: center; scroll-snap-stop: always; }
.viewer-slide img { display: block; width: 100%; height: calc(100% - 45px); min-height: 0; object-fit: contain; }
.viewer-slide figcaption { flex: 0 0 auto; padding: 8px; font-size: 14px; text-align: center; }
body.gallery-open { overflow: hidden; }

/* Photo motion: a gentle arrival and hover lift; no auto-advancing slideshow.
   Images remain visible if JavaScript is unavailable. */
@keyframes photo-arrive { from { opacity: .25; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
.photo-arrived { animation: photo-arrive 850ms ease-out both; }
.photo-frame, .gallery-tile img, .look-card img, .hotel-gallery img, img.party-portrait { transition: transform 450ms ease, box-shadow 450ms ease; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .photo-frame:hover { transform: translateY(-5px); box-shadow: 0 16px 32px #263e5020; }
  .gallery-tile a:hover img, .look-card:hover img, .hotel-gallery figure:hover img { transform: scale(1.035); }
  img.party-portrait:hover { transform: translateY(-4px); }
}
@media (max-width: 760px) {
  .floral-scene { padding-bottom: 45px; }
  .floral-scene::before { width: 170px; height: 240px; left: -95px; top: -35px; opacity: .26; }
  .floral-scene::after { width: 200px; height: 280px; right: -100px; bottom: -90px; opacity: .35; }
  .floral-scene-reverse::before { left: auto; right: -95px; }
  .floral-scene-reverse::after { right: auto; left: -100px; }
  .page-heading { padding-top: 60px; padding-bottom: 60px; }
  .page-heading::before { width: 190px; height: 240px; left: -80px; top: -110px; opacity: .4; }
  .page-heading::after { width: 170px; height: 240px; right: -80px; bottom: -130px; opacity: .38; }
  .home-page .hero::before { width: 230px; height: 330px; top: -85px; left: -115px; opacity: .35; }
  .home-page .hero::after { width: 250px; height: 350px; right: -120px; bottom: -135px; opacity: .32; }
  .story-versions, .places-grid { grid-template-columns: 1fr; }
  
  .memory-grid { gap: 16px; grid-template-columns: 1fr; max-width: 420px; margin: auto; }
  .memory-grid .photo-frame:nth-child(2) { margin-top: 0; }
  .lookbook-grid { grid-template-columns: 1fr; max-width: 440px; margin: auto; }
  .gallery-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 14px; }
  .gallery-tile:nth-child(3n + 2) { margin-top: 0; }
  .gallery-tile:nth-child(even) { margin-top: 25px; }
  .gallery-tile figcaption { font-size: 21px; }
  .viewer-toolbar, .viewer-controls { padding: 12px; gap: 8px; }
  .viewer-toolbar h2 { font-size: 23px; }
  .viewer-controls button { padding: 9px 10px; font-size: 12px; }
  .photo-dialog { width: 96vw; height: 88dvh; }
}
@media (prefers-reduced-motion: reduce) {
  .photo-arrived { animation: none; }
  .photo-frame, .gallery-tile img, .look-card img, .hotel-gallery img, img.party-portrait { transition: none; }
}
/* Carry solid section colors on the outer frame so the corner artwork stays visible. */
.floral-scene:has(> .party-section) { background: #eef4f8; }
.floral-scene:has(> .rsvp) { background: linear-gradient(120deg,#d6e5ef,#b2cada 55%,#d9e8f2); }
.floral-scene > .party-section, .floral-scene > .rsvp { background: transparent; }

/* SHARED PAGE TITLES: calligraphy, simple subtitle, rounded gold frame. */
.page-title-frame { width: min(100%,900px); margin: auto; padding: 28px 24px 36px; border: 1px solid transparent; border-radius: 22px; text-align: center; background: linear-gradient(135deg,#fffdf8,#edf5f9) padding-box,var(--gold-shine) border-box; }
.page-title-frame h1, .page-title-frame h2 { margin: 0; font: 400 clamp(62px,7.5vw,106px)/1.3 "Pinyon Script",cursive; letter-spacing: 0; text-wrap: balance; }
.page-title-frame p { max-width: none; margin: 10px auto 0; color: var(--ink); font: 500 clamp(14px,1.7vw,19px)/1.6 var(--font-body); letter-spacing: .3px; }
.story-title-frame { margin-bottom: 44px; }

/* OUR STORY: Her Story, center photograph, His Story. */
.story-perspectives { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr); align-items: center; gap: clamp(24px,3vw,44px); }
.story-side { min-width: 0; padding: 28px 0; text-align: center; }
.story-kicker { margin-bottom: 10px; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); }
.story-side h3 { margin-bottom: 24px; font-size: clamp(34px,3.3vw,46px); font-style: italic; }
.story-side > p:not(.story-kicker) { margin: 0 auto 18px; max-width: 36ch; font-size: 15px; line-height: 1.9; color: var(--muted); overflow-wrap: break-word; }
.story-center-photo { width: 100%; max-width: 380px; min-width: 0; margin: 0 auto; padding: 8px; border: 1px solid transparent; border-radius: 200px 200px 12px 12px; background: linear-gradient(var(--paper),var(--paper)) padding-box,var(--gold-shine) border-box; box-shadow: 0 12px 32px #263e5019; }
.story-center-photo .couple-photo { width: 100%; margin: 0; border-radius: 190px 190px 6px 6px; }
.our-story-signature { margin-top: 38px; text-align: center; }

/* VENUE CHAPTERS: rounded photo and map together; information alongside. */
#celebration .event-grid { grid-template-columns: minmax(0,1fr); gap: 70px; margin-top: 64px; }
#celebration .event-card { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); align-items: stretch; gap: 18px clamp(28px,5vw,64px); padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
#celebration .event-card > .venue-photo { grid-column: 1; grid-row: 1; align-self: start; width: 100%; max-width: none; margin: 0; height: auto; aspect-ratio: 4/3; padding: 7px; object-fit: cover; object-position: center; border: 1px solid transparent; border-radius: 22px; background: linear-gradient(var(--paper),var(--paper)) padding-box,var(--gold-shine) border-box; box-shadow: 0 12px 30px #263e5014; }
#celebration .event-card > .event-content { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; justify-content: center; align-items: flex-start; padding: clamp(26px,3.5vw,42px); border: 1px solid transparent; border-radius: 70px 8px 70px 8px; background: linear-gradient(140deg,#fffdf8,#e7f0f6) padding-box,var(--gold-shine) border-box; }
#celebration .event-card:nth-child(even) > .venue-photo, #celebration .event-card:nth-child(even) > .venue-map-panel { grid-column: 2; }
#celebration .event-card:nth-child(even) > .event-content { grid-column: 1; border-radius: 8px 70px 8px 70px; }
#celebration .event-content h3 { min-height: 0; font-size: clamp(36px,4vw,52px); }
#celebration .venue-schedule { width: 100%; min-height: 0; margin: 0; padding: 22px 0; gap: 24px; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
#celebration .event-card > .venue-map-panel { grid-column: 1; grid-row: 2; width: 100%; margin: 0; overflow: hidden; border: 1px solid transparent; border-radius: 16px; background: linear-gradient(#fffdf8,#fffdf8) padding-box,var(--gold-shine) border-box; box-shadow: 0 5px 16px #263e5010; }
#celebration .event-card:nth-child(even) > .venue-map-panel { grid-column: 2; }
.venue-map-heading { display: flex; align-items: center; gap: 12px; padding: 11px 15px; background: linear-gradient(120deg,#edf5f9,#dce9f2); border-bottom: 1px solid var(--line); }
.venue-map-symbol { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border: 1px solid #c5a34b; border-radius: 50%; background: #fffdf8; color: var(--gold); font-size: 21px; }
.venue-map-label { font-size: 13px; font-weight: 700; line-height: 1.4; }
.venue-map-caption { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.venue-map-panel iframe { display: block; width: 100%; height: 165px; border: 0; }
.day-timeline h3 { display: flex; align-items: center; justify-content: center; gap: 9px; }
.timeline-icon { display: block; flex: 0 0 27px; width: 27px; height: 27px; color: #927124; }
@keyframes venue-photo-fade { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
#celebration .venue-photo.photo-arrived { animation: venue-photo-fade 1.1s ease-out both; }

/* WEDDING PARTY: sky-blue bridesmaids, warm ivory groomsmen. */
.party-section { background: transparent; }
.floral-scene:has(> .party-section) { background: var(--paper); padding-bottom: 0; }
.bridesmaids-group { background: linear-gradient(135deg,#edf5fa,#dce9f2); }
.groomsmen-group { background: linear-gradient(135deg,#fffdf8,#f1e9dc); border-top: 1px solid var(--line); }
.party-group > .section-wrap { max-width: 1440px; }
.groomsmen-group .party-portrait { background: linear-gradient(145deg,#f9f5ec,#ddd2bd); box-shadow: inset 0 0 0 7px #f7f2e9,inset 0 0 0 8px #d4af3766; }
.groomsmen-group img.party-portrait { background: #f7f2e9; }
.groomsmen-group .party-card-honor .party-portrait { box-shadow: 0 0 0 3px #fff8df,0 0 0 4px #d9b857,0 8px 20px #88691d29; }

/* COUNTDOWN: stronger gold with a restrained metallic highlight. */
.home-page .countdown-display strong { color: #89651c; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .home-page .countdown-display strong { background: linear-gradient(110deg,#73500f 0%,#a7791d 24%,#d9b443 39%,#b48725 48%,#76520e 65%,#bd902c 82%,#805b12 100%); background-clip: text; -webkit-background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 1px 0 #ffffff99); }
}
/* LOCATION PHOTO SLOTS: real photos can replace the Coming soon artwork. */
.place-photo { position: relative; overflow: hidden; margin: -30px -30px 24px; border-bottom: 1px solid var(--line); border-radius: 13px 13px 0 0; }
.place-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; }
.place-photo figcaption { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); padding: 6px 16px; border: 1px solid #c5a34b; border-radius: 20px; background: #fffdf8ed; font-size: 12px; white-space: nowrap; color: var(--gold); }
.place-card h3 { margin-top: 0; }

@media (max-width: 900px) {
  .story-perspectives { grid-template-columns: minmax(0,1fr); gap: 28px; max-width: 540px; margin: auto; }
  .story-side { padding: 12px 8px; }
  .story-side > p:not(.story-kicker) { max-width: 46ch; font-size: 16px; }
}
@media (max-width: 760px) {
  .page-title-frame { padding: 24px 16px 30px; }
  .page-title-frame h1, .page-title-frame h2 { font-size: clamp(52px,12vw,78px); }
  #celebration .event-grid { gap: 52px; margin-top: 42px; }
  #celebration .event-card { grid-template-columns: minmax(0,1fr); gap: 20px; }
  /* Requested mobile order for EACH venue: information, photograph, map. */
  #celebration .event-card > .event-content, #celebration .event-card:nth-child(even) > .event-content { grid-column: 1; grid-row: 1; padding: 30px 24px; border-radius: 35px 8px 35px 8px; }
  #celebration .event-card > .venue-photo, #celebration .event-card:nth-child(even) > .venue-photo { grid-column: 1; grid-row: 2; }
  #celebration .event-card > .venue-map-panel, #celebration .event-card:nth-child(even) > .venue-map-panel { grid-column: 1; grid-row: 3; }
  .day-timeline h3 { justify-content: flex-start; }
  .party-group > .section-wrap { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  #celebration .venue-photo.photo-arrived { animation: none; }
}
/* Show complete gallery photos at their natural proportions. */
.gallery-page .gallery-grid .gallery-tile img,
.gallery-page .gallery-grid .gallery-tile:nth-child(4n) img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}
/* Uniform gallery rows without cropping photos */
.gallery-page .gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

.gallery-page .gallery-grid .gallery-tile {
  margin: 0;
  min-width: 0;
}

.gallery-page .gallery-grid .gallery-tile img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

/* Two columns on phones */
@media (max-width: 760px) {
  .gallery-page .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}
/* Consistent gaps between photos without cropping */
.gallery-page .gallery-grid {
  display: block;
  column-count: 3;
  column-gap: 20px;
}

.gallery-page .gallery-grid .gallery-tile:nth-child(n) {
  display: inline-block;
  width: 100%;
  margin: 0 0 20px;
  vertical-align: top;
  break-inside: avoid;
}

.gallery-page .gallery-grid .gallery-tile:nth-child(n) img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

/* Two columns on phones */
@media (max-width: 760px) {
  .gallery-page .gallery-grid {
    column-count: 2;
    column-gap: 14px;
  }

  .gallery-page .gallery-grid .gallery-tile:nth-child(n) {
    margin-bottom: 14px;
  }
}
/* PAGE TITLES: softly fade in when the page opens */
@keyframes wedding-title-fade {
  from {
    opacity: 0;
    translate: 0 8px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

.page-title-frame h1,
.page-title-frame h2 {
  animation: wedding-title-fade 1s ease-out both;
}

.page-title-frame > p {
  animation: wedding-title-fade 1s ease-out .18s both;
}

/* HOME: introduce the announcement, names, and date gently */
.hero-announcement {
  animation: wedding-title-fade 1s ease-out .1s both;
}

.hero-content h1 {
  animation: wedding-title-fade 1.2s ease-out .25s both;
}

.hero-date,
.hero-place {
  animation: wedding-title-fade 1s ease-out .45s both;
}

/* SCROLL FADES: JavaScript adds these classes.
   Content stays visible if JavaScript is unavailable. */
.fade-in-ready {
  opacity: 0;
  translate: 0 14px;
  transition:
    opacity .8s ease,
    translate .8s ease;
  transition-delay: var(--fade-delay, 0ms);
}

.fade-in-ready.is-visible {
  opacity: 1;
  translate: 0 0;
}

/* Respect visitors who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .page-title-frame h1,
  .page-title-frame h2,
  .page-title-frame > p,
  .hero-announcement,
  .hero-content h1,
  .hero-date,
  .hero-place {
    animation: none;
  }

  .fade-in-ready,
  .fade-in-ready.is-visible {
    opacity: 1;
    translate: none;
    transition: none;
  }
}
/* =========================================================
   THE DAY — invitation-inspired redesign
   Uses the existing sky blue, ivory, gold, and font variables.
   ========================================================= */

.wedding-day .day-wrap {
  width: min(100%, 1180px);
  margin: auto;
  padding: 72px 40px;
}

.wedding-day .day-invitation {
  padding: 55px 24px;
  background: linear-gradient(135deg, #eaf2f7, #d7e6ef);
}

.wedding-day .day-invitation .page-title-frame {
  max-width: 850px;
  padding: 26px 24px 34px;
  box-shadow: 0 12px 35px rgba(38, 62, 80, .04);
}

.wedding-day .day-invitation h1 {
  font-size: clamp(82px, 9vw, 118px);
}

.wedding-day .day-label {
  margin: 0 auto 16px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.wedding-day .day-section-title {
  display: block;
  margin-bottom: 44px;
  text-align: center;
}

.wedding-day .day-section-title h2 {
  font-size: clamp(38px, 4vw, 54px);
  font-style: italic;
}

.wedding-day .day-ornament {
  display: block;
  margin-top: 20px;
  color: var(--gold);
  font-size: 18px;
}

/* Delicate timeline rather than boxed event cards */
.wedding-day .day-agenda {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.wedding-day .day-agenda li {
  position: relative;
  display: grid;
  grid-template-rows: 48px 35px 34px auto auto;
  align-content: start;
  justify-items: center;
  min-width: 0;
  text-align: center;
}

.wedding-day .day-agenda li::after {
  content: "";
  position: absolute;
  top: 100px;
  left: 50%;
  width: 100%;
  height: 1px;
  background: var(--gold-shine);
}

.wedding-day .day-agenda li:last-child::after {
  display: none;
}

.wedding-day .day-icon {
  width: 31px;
  height: 31px;
  color: #927124;
}

.wedding-day .day-agenda time {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--ink);
}

.wedding-day .day-agenda-dot {
  position: relative;
  z-index: 1;
  align-self: center;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold-shine);
  box-shadow: 0 0 0 5px var(--paper);
}

.wedding-day .day-agenda h3 {
  margin: 12px 8px 0;
  font-size: clamp(25px, 2.5vw, 32px);
  font-style: italic;
}

.wedding-day .day-agenda li > p {
  margin: 10px 14px 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted);
}

/* Venue chapters */
.wedding-day .day-venue {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  grid-template-areas: "details visual";
  align-items: center;
  gap: clamp(35px, 6vw, 90px);
}

.wedding-day .day-venue-reverse {
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  grid-template-areas: "visual details";
}

.wedding-day .day-venue-details {
  grid-area: details;
  display: block;
  min-width: 0;
  padding: 32px 0;
  border: 0;
  background: transparent;
}

.wedding-day .day-chapter {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
}

.wedding-day .day-chapter span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 12px;
  letter-spacing: 0;
}

.wedding-day .day-script {
  margin-bottom: 22px;
  font-family: "Pinyon Script", cursive;
  font-size: clamp(52px, 5.3vw, 74px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--gold);
}

.wedding-day .day-venue-name {
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.12;
}

.wedding-day .day-address {
  margin: 24px 0 30px;
  font-style: normal;
  font-size: 14px;
  line-height: 1.9;
  color: var(--muted);
}

.wedding-day .day-times {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 38px;
  margin: 0;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.wedding-day .day-times dt {
  margin-bottom: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.wedding-day .day-times dd {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 42px;
  line-height: 1.1;
}

.wedding-day .day-times dd span {
  font-family: var(--font-body);
  font-size: 13px;
}

.wedding-day .day-end-note {
  margin-top: 20px;
  font-size: 12px;
  color: var(--muted);
}

.wedding-day .day-venue-visual {
  grid-area: visual;
  min-width: 0;
}

.wedding-day .day-photo {
  margin: 0;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 24px;
  background:
    linear-gradient(var(--paper), var(--paper)) padding-box,
    var(--gold-shine) border-box;
  box-shadow: 0 12px 30px rgba(38, 62, 80, .07);
}

.wedding-day .day-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
}

/* Maps are quiet companions to the venue photographs */
.wedding-day .day-map {
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(#fffdf8, #fffdf8) padding-box,
    var(--gold-shine) border-box;
}

.wedding-day .day-map-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 13px 17px;
  border-bottom: 1px solid var(--line);
  background: #e7f0f6;
}

.wedding-day .day-map-heading p {
  font-family: var(--font-heading);
  font-size: 22px;
  font-style: italic;
}

.wedding-day .day-map-heading span {
  font-size: 10px;
  color: var(--muted);
}

.wedding-day .day-map iframe {
  display: block;
  width: 100%;
  height: 180px;
  border: 0;
}

.wedding-day .day-reception-band {
  background: linear-gradient(135deg, #edf4f8, #e2edf4);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.wedding-day .day-closing {
  padding: 55px 24px 65px;
  text-align: center;
}

.wedding-day .day-closing .day-ornament {
  margin: 0 0 18px;
}

.wedding-day .day-closing > p {
  margin: auto;
  font-family: var(--font-heading);
  font-size: clamp(26px, 3vw, 36px);
  font-style: italic;
}

.wedding-day .day-closing-names {
  display: block;
  margin-top: 18px;
  font-family: "Pinyon Script", cursive;
  font-size: 38px;
  color: var(--gold);
}

/* Mobile: information first, then photo, then map */
@media (max-width: 760px) {
  .wedding-day .day-wrap {
    padding: 48px 24px;
  }

  .wedding-day .day-invitation {
    padding: 38px 20px;
  }

  .wedding-day .day-invitation h1 {
    font-size: 84px;
  }

  .wedding-day .day-agenda {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 420px;
    margin: auto;
  }

  .wedding-day .day-agenda li {
    display: block;
    padding: 0 0 32px 56px;
    text-align: left;
  }

  .wedding-day .day-agenda li:last-child {
    padding-bottom: 0;
  }

  .wedding-day .day-agenda li::after {
    top: 22px;
    left: 15px;
    width: 1px;
    height: 100%;
  }

  .wedding-day .day-icon {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background: var(--paper);
  }

  .wedding-day .day-agenda-dot {
    display: none;
  }

  .wedding-day .day-agenda h3 {
    margin: 6px 0 0;
    font-size: 30px;
  }

  .wedding-day .day-agenda li > p {
    margin: 8px 0 0;
    font-size: 13px;
  }

  .wedding-day .day-venue,
  .wedding-day .day-venue-reverse {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "details"
      "visual";
    gap: 28px;
  }

  .wedding-day .day-venue-details {
    padding: 0;
  }

  .wedding-day .day-script {
    font-size: 60px;
  }

  .wedding-day .day-times {
    gap: 22px;
  }

  .wedding-day .day-times dd {
    font-size: 38px;
  }

  .wedding-day .day-map iframe {
    height: 165px;
  }
}
/* Reception: warm champagne gold, like the groomsmen section */
.wedding-day .day-reception-band {
  background: linear-gradient(135deg, #fffdf8, #f1e9dc);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Let The Day sit directly on the blue background */
.wedding-day .day-invitation .page-title-frame {
  padding: 12px 24px 20px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Timeline label occupies a small column on the left */
.wedding-day .day-schedule {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: 32px;
  padding-top: 44px;
  padding-bottom: 30px;
}

.wedding-day .day-schedule .day-section-title {
  margin: 0;
  text-align: center;
}

.wedding-day .day-schedule .day-section-title h2 {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  font-style: normal;
  line-height: 1.6;
  letter-spacing: 3px;
  color: var(--gold);
}

/* Remove the clipped bottom flowers and extra timeline spacing */
.wedding-day .day-timeline-frame {
  padding-bottom: 0;
}

.wedding-day .day-timeline-frame::after {
  display: none;
}

/* Bring the ceremony closer to the timeline */
.wedding-day .day-timeline-frame + .floral-scene .day-venue {
  padding-top: 36px;
}

/* Lora keeps the elegant serif aesthetic with clearer numerals */
.wedding-day .day-times dd {
  font-family: "Lora", Georgia, serif;
  font-size: clamp(32px, 3.5vw, 42px);
  font-weight: 400;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1.3;
  letter-spacing: -.5px;
}

.wedding-day .day-times dd span {
  margin-left: 4px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: .5px;
}

/* White lace-inspired photo frames.
   The repeating flower pattern is built into CSS;
   no additional image file is needed. */
.wedding-day .day-photo {
  --day-lace: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='white' stroke-width='.8'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Ccircle cx='17' cy='12' r='4'/%3E%3Ccircle cx='12' cy='17' r='4'/%3E%3Ccircle cx='7' cy='12' r='4'/%3E%3Cpath d='M0 12h3m18 0h3'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='1.3' fill='white'/%3E%3C/svg%3E");

  position: relative;
  isolation: isolate;
  padding: 22px;
  border: 1px solid #bda15a;
  border-radius: 26px;
  background: linear-gradient(
    135deg,
    #d9c594,
    #eee1bd 45%,
    #cbb27c
  );
  box-shadow: 0 12px 28px rgba(105, 81, 30, .1);
}

.wedding-day .day-photo::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 24px;
  pointer-events: none;
  background:
    var(--day-lace) center top / 24px 24px repeat-x,
    var(--day-lace) center bottom / 24px 24px repeat-x,
    var(--day-lace) left center / 24px 24px repeat-y,
    var(--day-lace) right center / 24px 24px repeat-y;
}

.wedding-day .day-photo img {
  position: relative;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 10px;
}

/* Mobile: timeline label above the vertical schedule */
@media (max-width: 760px) {
  .wedding-day .day-schedule {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding-top: 32px;
    padding-bottom: 24px;
  }

  .wedding-day .day-schedule .day-section-title {
    text-align: left;
  }

  .wedding-day .day-schedule .day-section-title h2 {
    font-size: 16px;
  }

  .wedding-day .day-timeline-frame + .floral-scene .day-venue {
    padding-top: 28px;
  }

  .wedding-day .day-photo {
    padding: 18px;
    border-radius: 22px;
  }

  .wedding-day .day-photo::before {
    border-radius: 20px;
    background-size: 20px 20px;
  }

  .wedding-day .day-times dd {
    font-size: 34px;
  }
}
/* TIMELINE: above the schedule, aligned with its left edge */
.wedding-day .day-schedule {
  display: block;
}

.wedding-day .day-schedule .day-section-title {
  margin: 0 0 30px;
  text-align: left;
}

.wedding-day .day-schedule .day-section-title h2 {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 3px;
}

.wedding-day .day-agenda {
  width: 100%;
  max-width: none;
}

/* Floral lace frame: replaces the previous small flower pattern */
.wedding-day .day-photo {
  position: relative;
  padding: 0;
  border: 34px solid transparent;
  border-image-source: url("./assets/lace-border.svg");
  border-image-slice: 40;
  border-image-width: 1;
  border-image-repeat: round;
  border-radius: 0;
  background: linear-gradient(135deg, #d7c397, #eee2c4, #cbb581);
  box-shadow: 0 10px 28px rgba(105, 81, 30, .08);
}

.wedding-day .day-photo::before,
.wedding-day .day-photo::after {
  content: none;
}

.wedding-day .day-photo img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 3px;
}

@media (max-width: 760px) {
  .wedding-day .day-schedule .day-section-title {
    margin-bottom: 26px;
  }

  .wedding-day .day-photo {
    border-width: 25px;
  }
}
/* White lace with no gold backing */
.wedding-day .day-photo {
  background: transparent;
  box-shadow: none;
}
/* Sky blue background behind the white lace */
body.wedding-day {
  background: #dce8f0;
}

/* Keep the venue sections consistent */
.wedding-day .floral-scene,
.wedding-day .day-reception-band {
  background: transparent;
}

/* Let the blue show through the lace */
.wedding-day .day-photo {
  background: transparent;
  box-shadow: none;
}
/* Wider bridal lace around the venue photos */
.wedding-day .day-photo {
  padding: 0;
  border: 42px solid transparent;
  border-image-source: url("./assets/lace-border.svg?v=2");
  border-image-slice: 40;
  border-image-width: 1;
  border-image-repeat: round;
  background: transparent;
  box-shadow: none;
}

.wedding-day .day-photo img {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 8px;
}

@media (max-width: 760px) {
  .wedding-day .day-photo {
    border-width: 30px;
  }
}
/* Matching bridal lace around the embedded maps */
.wedding-day .day-map {
  margin-top: 18px;
  padding: 0;
  border: 26px solid transparent;
  border-image: url("./assets/lace-border.svg?v=4") 40 / 1 round;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.wedding-day .day-map iframe {
  display: block;
  width: 100%;
  height: 180px;
  border: 0;
  border-radius: 8px;
}

@media (max-width: 760px) {
  .wedding-day .day-map {
    border-width: 20px;
  }

  .wedding-day .day-map iframe {
    height: 165px;
  }
}
/* Photo beside the venue details, with the map below the details */
.wedding-day .day-venue {
  display: grid;
  grid-template-columns: 1fr 1.12fr;
  grid-template-areas:
    "details visual"
    "map     visual";
  column-gap: clamp(32px, 5vw, 72px);
  row-gap: 24px;
  align-items: start;
}

/* Alternate the reception layout */
.wedding-day .day-venue.day-venue-reverse {
  grid-template-columns: 1.12fr 1fr;
  grid-template-areas:
    "visual details"
    "visual map";
}

.wedding-day .day-venue > .day-venue-details {
  grid-area: details;
  padding: 0;
}

.wedding-day .day-venue > .day-venue-visual {
  grid-area: visual;
  align-self: center;
  min-width: 0;
}

.wedding-day .day-venue .day-photo {
  margin: 0;
}

.wedding-day .day-venue > .day-map {
  grid-area: map;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
}

/* Mobile: information, photo, then map */
@media (max-width: 760px) {
  .wedding-day .day-venue,
  .wedding-day .day-venue.day-venue-reverse {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "details"
      "visual"
      "map";
    gap: 24px;
  }
}
/* Venue details beside the photo and map */
.wedding-day .day-venue {
  display: grid;
  grid-template-columns: 1fr 1.12fr;
  grid-template-areas: "details visual";
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.wedding-day .day-venue.day-venue-reverse {
  grid-template-columns: 1.12fr 1fr;
  grid-template-areas: "visual details";
}

.wedding-day .day-venue > .day-venue-details {
  grid-area: details;
  padding: 0;
}

.wedding-day .day-venue > .day-venue-visual {
  grid-area: visual;
  align-self: center;
  min-width: 0;
}

.wedding-day .day-photo {
  margin: 0;
}

/* Simple white map frame with a delicate gold outline */
.wedding-day .day-venue .day-map {
  display: block;
  width: calc(100% - 48px);
  max-width: 100%;
  box-sizing: border-box;
  margin: 20px auto 0;
  padding: 7px;

  border: 1px solid #c7ad68;
  border-image: none;
  border-radius: 16px;
  background: #fffdf9;
  overflow: hidden;

  box-shadow: 0 6px 18px rgba(38, 62, 80, 0.07);
}

.wedding-day .day-map::before,
.wedding-day .day-map::after {
  content: none;
}

.wedding-day .day-map iframe {
  display: block;
  width: 100%;
  height: 180px;
  border: 0;
  border-radius: 9px;
}

/* Mobile order: information, photo, map */
@media (max-width: 760px) {
  .wedding-day .day-venue,
  .wedding-day .day-venue.day-venue-reverse {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "details"
      "visual";
    gap: 28px;
  }

  .wedding-day .day-venue .day-map {
    width: calc(100% - 32px);
    margin-top: 16px;
    padding: 6px;
  }

  .wedding-day .day-map iframe {
    height: 165px;
  }
}
.wedding-day .day-venue-reverse .day-venue-name {
  margin-bottom: 8px;
}

.wedding-day .day-venue-reverse .day-address {
  margin-top: 0;
}
/* =====================================================
   THE DAY — COMPLETE PAGE STYLING
   Scoped to this page so other pages retain their styles.
   ===================================================== */

body.wedding-day {
  background: #dce8f0;
}

body.wedding-day main {
  --day-blue: #dce8f0;
  --day-ivory: #fcfaf5;
  --day-ink: #263e50;
  --day-gold: #896b20;
  --day-gold-line: #ccb777;
  color: var(--day-ink);
}

/* Section backgrounds and positioning */
body.wedding-day .day-scene {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0;
}

body.wedding-day .day-layout-width {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: min(100%, 1240px);
  margin: 0 auto;
  padding: 64px 40px;
}

body.wedding-day .day-title-section {
  background: linear-gradient(120deg, #edf3f6, #e3edf3);
}

body.wedding-day .day-timeline-section {
  background: var(--day-ivory);
  border-top: 1px solid var(--day-gold-line);
  border-bottom: 1px solid var(--day-gold-line);
}

body.wedding-day .day-ceremony-section {
  background: var(--day-blue);
}

body.wedding-day .day-reception-section {
  background: var(--day-ivory);
  border-top: 1px solid var(--day-gold-line);
  border-bottom: 1px solid var(--day-gold-line);
}

/* Title */
body.wedding-day .day-title-content {
  position: relative;
  z-index: 1;
  padding: 50px 24px 58px;
  text-align: center;
}

body.wedding-day .day-title-content h1 {
  margin: 0 0 12px;
  font-family: "Pinyon Script", cursive;
  font-size: clamp(76px, 9vw, 118px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--day-ink);
}

body.wedding-day .day-title-content p {
  margin: 0;
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.6;
}

/* Timeline: same horizontal design, now on ivory */
body.wedding-day .day-timeline-title {
  margin: 0 0 34px;
  text-align: left;
  font-family: "Manrope", Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 3px;
  color: var(--day-gold);
}

body.wedding-day .day-agenda {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
  list-style: none;
}

body.wedding-day .day-agenda li {
  position: relative;
  display: grid;
  grid-template-rows: 48px 35px 34px auto auto;
  justify-items: center;
  align-content: start;
  min-width: 0;
  padding: 0 12px;
  text-align: center;
}

body.wedding-day .day-agenda li::before {
  content: none;
}

body.wedding-day .day-agenda li::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 100px;
  left: 50%;
  width: 100%;
  height: 1px;
  background: var(--day-gold-line);
}

body.wedding-day .day-agenda li:last-child::after {
  content: none;
}

body.wedding-day .day-icon {
  position: static;
  display: block;
  width: 31px;
  height: 31px;
  margin: 0;
  color: var(--day-gold);
  background: transparent;
}

body.wedding-day .day-agenda li > time {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1px;
}

body.wedding-day .day-agenda-dot {
  position: relative;
  z-index: 1;
  display: block;
  align-self: center;
  box-sizing: content-box;
  width: 9px;
  height: 9px;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(120deg, #a67c25, #f1d778, #ad852c);
  box-shadow: 0 0 0 5px var(--day-ivory);
}

body.wedding-day .day-agenda h3 {
  margin: 12px 0 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(25px, 2.5vw, 32px);
  font-weight: 500;
  font-style: italic;
  line-height: 1.2;
}

body.wedding-day .day-agenda p {
  margin: 12px 0 0;
  font-family: "Manrope", Arial, sans-serif;
  font-size: 12px;
  line-height: 1.7;
  color: #405362;
}

/* Alternating venue layouts */
body.wedding-day .day-venue-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  grid-template-areas: "copy photo";
  align-items: center;
  gap: clamp(30px, 5vw, 70px);
}

body.wedding-day .day-venue-layout-reversed {
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  grid-template-areas: "photo copy";
}

body.wedding-day .day-venue-copy {
  grid-area: copy;
  min-width: 0;
}

/* Ivory ceremony card with a double gold outline */
body.wedding-day .day-ivory-card {
  box-sizing: border-box;
  padding: clamp(26px, 3vw, 40px);
  border: 1px solid #bea15d;
  border-radius: 18px;
  background: var(--day-ivory);
  box-shadow:
    inset 0 0 0 4px var(--day-ivory),
    inset 0 0 0 5px #e0d1aa;
}

body.wedding-day .day-script-heading {
  margin: 0 0 22px;
  font-family: "Pinyon Script", cursive;
  font-size: clamp(50px, 5vw, 72px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--day-gold);
}

body.wedding-day .day-location-name {
  margin: 0 0 10px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(34px, 4vw, 50px);
  font-weight: 500;
  line-height: 1.1;
}

body.wedding-day .day-printed-address {
  margin: 0 0 28px;
  padding: 0;
  font-family: "Manrope", Arial, sans-serif;
  font-size: 14px;
  font-style: normal;
  line-height: 1.9;
  color: #405362;
}

body.wedding-day .day-time-details {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 30px;
  margin: 0;
  padding: 22px 0;
  border-top: 1px solid var(--day-gold-line);
  border-bottom: 1px solid var(--day-gold-line);
}

body.wedding-day .day-time-details dt {
  margin: 0 0 10px;
  font-family: "Manrope", Arial, sans-serif;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 1px;
  text-transform: uppercase;
}

body.wedding-day .day-time-details dd {
  margin: 0;
  font-family: "Lora", Georgia, serif;
  font-size: clamp(32px, 3.5vw, 42px);
  font-weight: 400;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1.3;
}

body.wedding-day .day-time-details dd span {
  margin-left: 4px;
  font-family: "Manrope", Arial, sans-serif;
  font-size: 12px;
}

body.wedding-day .day-evening-note {
  margin: 18px 0 0;
  font-family: "Manrope", Arial, sans-serif;
  font-size: 12px;
  line-height: 1.8;
  color: #405362;
}

/* Existing bridal lace asset around both photographs */
body.wedding-day .day-lace-photo {
  grid-area: photo;
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 42px solid transparent;
  border-image: url("./assets/lace-border.svg?v=4") 40 / 1 round;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.wedding-day .day-lace-photo::before,
body.wedding-day .day-lace-photo::after {
  content: none;
}

body.wedding-day .day-lace-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 0;
  border-radius: 8px;
  background: transparent;
}

/* Florals tucked into the outer corners */
body.wedding-day .day-corner-floral {
  position: absolute;
  z-index: 0;
  display: block;
  width: clamp(220px, 28vw, 410px);
  height: auto;
  opacity: .45;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image:
    radial-gradient(ellipse at center, #000 40%, transparent 74%);
  mask-image:
    radial-gradient(ellipse at center, #000 40%, transparent 74%);
}

body.wedding-day .day-corner-top-left {
  top: -65px;
  left: -75px;
}

body.wedding-day .day-corner-top-right {
  top: -65px;
  right: -75px;
  transform: scaleX(-1);
}

body.wedding-day .day-corner-bottom-left {
  bottom: -60px;
  left: -80px;
  transform: rotate(12deg);
}

body.wedding-day .day-corner-bottom-right {
  bottom: -60px;
  right: -80px;
  transform: scaleX(-1) rotate(12deg);
}

/* Fade effects are enabled only when JavaScript is available. */
body.wedding-day [data-day-reveal].day-reveal-ready {
  opacity: 0;
  translate: 0 14px;
  transition: opacity .8s ease, translate .8s ease;
}

body.wedding-day [data-day-reveal].day-reveal-ready.day-revealed {
  opacity: 1;
  translate: 0 0;
}

/* Mobile layout */
@media (max-width: 760px) {
  body.wedding-day .day-layout-width {
    padding: 42px 24px;
  }

  body.wedding-day .day-title-content {
    padding: 38px 24px 44px;
  }

  body.wedding-day .day-venue-layout,
  body.wedding-day .day-venue-layout-reversed {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "copy"
      "photo";
    gap: 28px;
  }

  body.wedding-day .day-ivory-card {
    padding: 28px 24px;
  }

  body.wedding-day .day-lace-photo {
    border-width: 30px;
  }

  body.wedding-day .day-corner-floral {
    width: 230px;
    opacity: .25;
  }

  body.wedding-day .day-agenda {
    grid-template-columns: minmax(0, 1fr);
    max-width: 420px;
    margin: 0 auto;
  }

  body.wedding-day .day-agenda li {
    display: block;
    padding: 0 0 32px 56px;
    text-align: left;
  }

  body.wedding-day .day-agenda li:last-child {
    padding-bottom: 0;
  }

  body.wedding-day .day-agenda li::after {
    top: 22px;
    left: 15px;
    width: 1px;
    height: 100%;
  }

  body.wedding-day .day-icon {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    background: var(--day-ivory);
  }

  body.wedding-day .day-agenda-dot {
    display: none;
  }

  body.wedding-day .day-agenda h3 {
    margin-top: 6px;
    font-size: 30px;
  }

  body.wedding-day .day-agenda p {
    margin-top: 8px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.wedding-day [data-day-reveal].day-reveal-ready {
    opacity: 1;
    translate: none;
    transition: none;
  }
}
/* Soft shadow follows the lace edges */
body.wedding-day .day-lace-photo {
  filter: drop-shadow(0 3px 5px rgba(38, 62, 80, 0.22));
}
body.wedding-day .day-title-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

body.wedding-day .day-title-content > p {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  text-align: center;
}
/* =====================================================
   WEDDING PARTY — MATCH THE DAY PAGE
   ===================================================== */

/* Open title treatment with no white box */
body.wedding-party-page .page-heading {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 50px 24px 58px;
  background: linear-gradient(120deg, #edf3f6, #e3edf3);
}

body.wedding-party-page .page-title-frame {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1100px;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
}

body.wedding-party-page .page-title-frame::before,
body.wedding-party-page .page-title-frame::after {
  content: none;
}

body.wedding-party-page .page-title-frame h1 {
  margin: 0 0 12px;
  font-family: "Pinyon Script", cursive;
  font-size: clamp(64px, 8vw, 118px);
  font-weight: 400;
  line-height: 1.2;
  color: #263e50;
}

body.wedding-party-page .page-title-frame > p {
  width: 100%;
  max-width: none;
  margin: 0;
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.6;
  text-align: center;
}

/* Remove older florals from the outer wrapper */
body.wedding-party-page .floral-scene::before,
body.wedding-party-page .floral-scene::after {
  content: none;
}

body.wedding-party-page .floral-scene {
  padding-bottom: 0;
}

/* Place florals behind each group's content */
body.wedding-party-page .party-group {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

body.wedding-party-page .party-group > .section-wrap {
  position: relative;
  z-index: 1;
}

/* Matching size, opacity, and soft fade from The Day */
body.wedding-party-page .page-heading::before,
body.wedding-party-page .page-heading::after,
body.wedding-party-page .party-group::before,
body.wedding-party-page .party-group::after {
  content: "";
  position: absolute;
  z-index: 0;
  display: block;
  width: clamp(220px, 28vw, 410px);
  height: clamp(220px, 28vw, 410px);
  border: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .45;
  pointer-events: none;

  -webkit-mask-image:
    radial-gradient(ellipse at center, #000 40%, transparent 74%);
  mask-image:
    radial-gradient(ellipse at center, #000 40%, transparent 74%);
}

/* Title: florals in both upper corners */
body.wedding-party-page .page-heading::before {
  top: -65px;
  left: -75px;
  right: auto;
  bottom: auto;
  background-image: url("./assets/floral-bouquet.png");
  transform: none;
}

body.wedding-party-page .page-heading::after {
  top: -65px;
  right: -75px;
  left: auto;
  bottom: auto;
  background-image: url("./assets/floral-spray.png");
  transform: scaleX(-1);
}

/* Bridesmaids: upper left and lower right */
body.wedding-party-page .bridesmaids-group::before {
  top: -55px;
  left: -85px;
  background-image: url("./assets/floral-spray.png");
  transform: rotate(12deg);
}

body.wedding-party-page .bridesmaids-group::after {
  bottom: -60px;
  right: -80px;
  background-image: url("./assets/floral-bouquet.png");
  transform: scaleX(-1);
}

/* Groomsmen: upper right and lower left */
body.wedding-party-page .groomsmen-group::before {
  top: -55px;
  right: -85px;
  background-image: url("./assets/floral-bouquet.png");
  transform: scaleX(-1);
}

body.wedding-party-page .groomsmen-group::after {
  bottom: -60px;
  left: -80px;
  background-image: url("./assets/floral-spray.png");
  transform: rotate(12deg);
}

/* Softer, smaller florals on phones */
@media (max-width: 760px) {
  body.wedding-party-page .page-heading {
    padding: 38px 24px 44px;
  }

  body.wedding-party-page .page-heading::before,
  body.wedding-party-page .page-heading::after,
  body.wedding-party-page .party-group::before,
  body.wedding-party-page .party-group::after {
    width: 230px;
    height: 230px;
    opacity: .25;
  }
}
body.wedding-party-page .page-heading::before,
body.wedding-party-page .page-heading::after,
body.wedding-party-page .party-group::before,
body.wedding-party-page .party-group::after {
  opacity: .45 !important;
}

@media (max-width: 760px) {
  body.wedding-party-page .page-heading::before,
  body.wedding-party-page .page-heading::after,
  body.wedding-party-page .party-group::before,
  body.wedding-party-page .party-group::after {
    opacity: .25 !important;
  }
}
/* Match The Day's richer floral appearance */
body.wedding-party-page .page-heading::before,
body.wedding-party-page .page-heading::after,
body.wedding-party-page .party-group::before,
body.wedding-party-page .party-group::after {
  opacity: 1 !important;
  filter: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
@media (max-width: 760px) {
  body.wedding-day .day-reception-section .day-corner-top-left {
    top: auto;
    bottom: -30px;
    left: -45px;
    right: auto;
    transform: none;
  }

  body.wedding-day .day-reception-section .day-venue-layout {
    padding-bottom: 170px;
  }
}
@media (max-width: 760px) {

  /* RECEPTION: remove the existing corner flowers on mobile */
  body.wedding-day .day-reception-section > .day-corner-floral {
    display: none !important;
  }

  /* Undo the previous extra padding on the inner layout */
  body.wedding-day .day-reception-section .day-venue-layout {
    padding-bottom: 42px !important;
  }

  /* Reserve space below the photo for one floral arrangement */
  body.wedding-day .day-reception-section {
    position: relative;
    padding-bottom: 140px !important;
  }

  body.wedding-day .day-reception-section::after {
    content: "" !important;
    position: absolute;
    top: auto !important;
    bottom: 0 !important;
    left: -35px !important;
    right: auto !important;
    width: 190px;
    height: 150px;
    background: url("./assets/floral-bouquet.png")
      left bottom / contain no-repeat;
    opacity: 1;
    transform: none !important;
    pointer-events: none;
    z-index: 0;
  }

  /* TITLE FLORALS: smaller and farther out toward the edges */
  body.wedding-day .day-title-section > .day-corner-floral,
  body.wedding-party-page .page-heading::before,
  body.wedding-party-page .page-heading::after {
    width: 170px !important;
    height: 190px !important;
    object-fit: contain;
    top: -25px !important;
    bottom: auto !important;
  }

  body.wedding-day .day-title-section > .day-corner-top-left,
  body.wedding-party-page .page-heading::before {
    left: -65px !important;
    right: auto !important;
  }

  body.wedding-day .day-title-section > .day-corner-top-right,
  body.wedding-party-page .page-heading::after {
    right: -65px !important;
    left: auto !important;
  }

  /* Soft blue clearing behind the titles, without a bordered box */
  body.wedding-day .day-title-content,
  body.wedding-party-page .page-title-frame {
    position: relative;
    z-index: 2;
    background: radial-gradient(
      ellipse at center,
      rgba(237, 243, 246, .98) 0%,
      rgba(237, 243, 246, .90) 45%,
      rgba(237, 243, 246, 0) 75%
    ) !important;
  }

  /* Gentle light halo improves the cursive text's readability */
  body.wedding-day .day-title-content h1,
  body.wedding-party-page .page-title-frame h1 {
    color: #263e50;
    text-shadow:
      0 0 5px #edf3f6,
      0 0 12px #edf3f6;
  }

  body.wedding-day .day-title-content > p,
  body.wedding-party-page .page-title-frame > p {
    text-shadow: 0 0 6px #edf3f6;
  }
}