@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Cinzel+Decorative:wght@400;700&family=Italiana&family=Manrope:wght@300;400;500;600;700;800&family=Great+Vibes&display=swap");

/* Visual system adapted from the supplied royal theme. Client content and interactions
   remain in the existing invitation. The rules near the end also cover dormant sections. */
:root {
  --maroon: #641520;
  --maroon-deep: #33080d;
  --vermilion: #9c2d2e;
  --ivory: #fbf1dc;
  --parchment: #ead8b5;
  --gold: #d3a43c;
  --gold-deep: #94651d;
  --emerald: #255447;
  --ink: #2f1714;
  --muted: #80685d;
  --font-display: "Cinzel Decorative", "Times New Roman", serif;
  --font-title: "Cinzel Decorative", "Times New Roman", serif;
  --font-names: "Italiana", Georgia, serif;
  --font-prose: "Cormorant Garamond", Georgia, serif;
  --font-body: "Manrope", Arial, sans-serif;
  --royal-shadow: 0 30px 80px rgba(51, 8, 13, .2);
}

html, body { background: var(--ivory); color: var(--ink); }
main { background: var(--ivory); }
.section-pad { padding: clamp(64px, 7vw, 100px) 0; overflow: hidden; }
.section-shell { position: relative; z-index: 1; }
.eyebrow {
  color: var(--gold-deep);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .25em;
}
.section-heading { margin-bottom: 48px; }
.section-heading h2,
.welcome-copy h2,
.palette-event h3,
.gift-copy h2,
.closing-section h2 {
  color: var(--maroon);
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 5vw, 3.2rem);
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: 1.12;
}
.ornament { width: 170px; gap: 14px; color: var(--vermilion); }
.ornament::before,
.ornament::after {
  width: 72px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.ornament::after { transform: rotate(180deg); }
.ornament i {
  flex: none;
  width: 8px;
  height: 8px;
  border: 0;
  background: var(--vermilion);
  transform: rotate(45deg);
}
.floral-divider { display: none; }

/* The opening uses the poster and film from royal-theme.zip. */
.hero { background: var(--maroon-deep); color: var(--ivory); }
.hero-video { object-position: center center; }
.hero-glow,
.hero.is-open .hero-glow { display: none !important; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: rgba(0, 0, 0, .35);
  opacity: 0;
}
.hero.is-open::before {
  animation: royal-hero-veil 1.35s ease var(--hero-reveal-start) both;
}
@keyframes royal-hero-veil {
  from { opacity: 0; }
  to { opacity: 1; }
}
.royal-jali {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: 18vw;
  min-width: 100px;
  opacity: .12;
  pointer-events: none;
  background:
    linear-gradient(45deg, transparent 44%, var(--gold) 45% 55%, transparent 56%) 0 0 / 34px 34px,
    linear-gradient(-45deg, transparent 44%, var(--gold) 45% 55%, transparent 56%) 0 0 / 34px 34px;
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
.royal-jali--left { left: 0; }
.royal-jali--right { right: 0; transform: scaleX(-1); }
.royal-hero-arch {
  position: absolute;
  z-index: 2;
  top: 6%;
  left: 50%;
  width: min(720px, 84vw);
  height: 88%;
  transform: translateX(-50%);
  border: 1px solid rgba(211,164,60,.45);
  border-radius: 48% 48% 18px 18px / 30% 30% 18px 18px;
  box-shadow: inset 0 0 0 8px rgba(211,164,60,.05);
  pointer-events: none;
}
.royal-hero-arch::before,
.royal-hero-arch::after {
  content: "";
  position: absolute;
  inset: 11px;
  border: 1px solid rgba(211,164,60,.2);
  border-radius: inherit;
}
.royal-hero-arch::after { inset: 22px; }
.royal-hero-arch i {
  position: absolute;
  top: -11px;
  left: 50%;
  width: 22px;
  height: 22px;
  transform: translateX(-50%) rotate(45deg);
  border: 1px solid rgba(211,164,60,.62);
  background: rgba(100,21,32,.45);
}
.hero.is-closed .royal-jali,
.hero.is-closed .royal-hero-arch { opacity: 0; }
.opening-mark { justify-content: flex-start; padding-top: clamp(96px, 12vh, 150px); }
.opening-title {
  color: var(--ivory);
  font-family: "Great Vibes", cursive;
  font-size: clamp(3.1rem, 8.5vw, 5.5rem);
  text-shadow: 0 3px 18px rgba(51,8,13,.9), 0 0 30px rgba(51,8,13,.8);
}
.opening-title::before {
  background: radial-gradient(ellipse, rgba(51,8,13,.65), rgba(51,8,13,.2) 55%, transparent 75%);
  opacity: .8;
}
/* The supplied poster already includes its own Tap to Open plaque. */
.opening-label, .opening-ripple { display: none; }
.music-toggle {
  background: rgba(51,8,13,.78);
  border: 1px solid rgba(211,164,60,.48);
  color: var(--ivory);
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}
.music-toggle:hover, .music-toggle:focus-visible {
  background: rgba(51,8,13,.92);
  border-color: var(--gold);
}
.hero-content,
.hero.is-open .hero-content {
  position: relative;
  z-index: 3;
  color: var(--ivory);
  text-shadow: 0 8px 34px rgba(0,0,0,.32);
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.45));
  width: min(650px, 72vw);
  max-width: none;
  padding: max(100px, env(safe-area-inset-top)) 0 max(118px, env(safe-area-inset-bottom));
}
.hero-welcome {
  color: var(--ivory);
  font-family: var(--font-prose);
  font-size: clamp(.95rem, 1.8vw, 1.15rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.35;
  margin-bottom: 18px;
  text-transform: none;
}
.couple-names [id$="Name"],
#brideName, #groomName,
.hero.is-open .couple-person [id$="Name"] {
  color: var(--gold);
  font-family: var(--font-names);
  font-size: clamp(2.5rem, 6.8vw, 4rem);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
  line-height: .98;
  white-space: nowrap;
}
.couple-names p {
  color: rgba(251,241,220,.8);
  font-size: .58rem;
  letter-spacing: .15em;
}
.couple-names small {
  color: rgba(251,241,220,.8);
  font-family: var(--font-body);
  font-size: clamp(.62rem, 1.5vw, .8rem);
  font-style: normal;
  font-weight: 600;
  letter-spacing: .09em;
  line-height: 1.5;
  text-transform: uppercase;
}
.name-ampersand,
.hero.is-open .name-ampersand {
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 400;
}
.hero-closing,
.hero-invitation {
  color: var(--ivory);
  font-family: var(--font-prose);
  font-size: clamp(.95rem, 1.8vw, 1.15rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.45;
  text-transform: none;
}
.hero-closing {
  font-size: clamp(.98rem, 1.8vw, 1.18rem);
  margin-top: clamp(6px, 4vh, 32px);
}
.hero .scroll-cue,
.hero.is-open .scroll-cue {
  color: var(--gold);
  margin-top: 34px;
}
.hero .scroll-cue i { background: linear-gradient(var(--gold), transparent); }

/* Welcome and scratch reveal. */
.welcome-section {
  min-height: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at center, rgba(211,164,60,.07), transparent 38%), var(--ivory);
}
.welcome-section::before,
.welcome-section::after {
  display: block;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(148,101,29,.15);
  border-radius: 50%;
  background: none;
}
.welcome-section::before { left: -190px; top: auto; bottom: -160px; }
.welcome-section::after { left: auto; right: -190px; top: -160px; bottom: auto; }
.welcome-shell { width: min(760px, calc(100% - 44px)); max-width: none; }
.welcome-copy h2 { margin: 0 0 28px; }
.welcome-copy .ornament { margin: 0 auto 36px; }
.welcome-copy p,
.chapter-copy {
  color: #70564d;
  font-family: var(--font-prose);
  font-size: clamp(1.35rem, 2.8vw, 1.9rem);
  font-style: normal;
  font-weight: 500;
  line-height: 1.55;
  max-width: 680px;
}
.welcome-copy .signature,
.signature, .closing-names {
  color: var(--gold-deep);
  font-family: var(--font-names);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-style: normal;
  font-weight: 400;
}
.signature span, .closing-names span {
  color: var(--maroon);
  font-family: var(--font-display);
  font-style: normal;
}
.scratch-section { background: var(--maroon-deep); color: var(--ivory); }
.scratch-section::before {
  background:
    radial-gradient(circle, transparent 45%, var(--gold) 46% 49%, transparent 50%) 0 0 / 42px 42px,
    radial-gradient(circle, transparent 45%, var(--gold) 46% 49%, transparent 50%) 21px 21px / 42px 42px;
  opacity: .09;
  mask-image: none;
}
.scratch-section .section-heading { margin-bottom: clamp(26px, 3vw, 36px); }
.scratch-section .section-heading h2 { color: var(--ivory); }
.scratch-section .eyebrow { color: var(--gold); }
.scratch-section .ornament::before,
.scratch-section .ornament::after { background: linear-gradient(90deg, transparent, var(--gold)); }
.scratch-section .ornament i { background: var(--gold); }
/* Royal scratch card: rounded gold edge with solid and dotted inset strokes. */
.scratch-wrap {
  position: relative;
  inset: auto;
  width: min(620px, 100%);
  height: auto;
  max-width: 620px;
  min-height: 0;
  aspect-ratio: 2.15;
  margin: 0 auto;
  overflow: hidden;
  border: 2px solid rgba(211, 164, 60, .7);
  border-radius: 22px;
  background: var(--parchment);
  box-shadow: 0 42px 96px rgba(0, 0, 0, .4);
  -webkit-clip-path: none;
  clip-path: none;
}
.scratch-wrap .date-reveal {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 30px 38px;
  background: radial-gradient(circle at 50% 0, #fff9ec, var(--parchment));
  color: var(--ink);
}
.scratch-wrap .date-reveal::before,
.scratch-wrap .date-reveal::after {
  content: "";
  display: block;
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(148, 101, 29, .45);
  border-radius: 14px;
  pointer-events: none;
}
.scratch-wrap .date-reveal::after {
  inset: 25px;
  border-style: dotted;
  border-color: rgba(156, 45, 46, .42);
}
.scratch-wrap .date-main,
.scratch-wrap .date-primary,
.scratch-wrap .date-year {
  color: var(--maroon);
  font-family: var(--font-display);
  font-weight: 400;
}
.scratch-wrap .date-day { color: var(--ink); }
.scratch-wrap .date-ceremony {
  color: var(--maroon);
  font-family: var(--font-prose);
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  font-weight: 700;
}
.scratch-wrap .scratch-canvas { inset: 0; width: 100%; height: 100%; }
.scratch-note { color: rgba(251,241,220,.7); font-family: var(--font-prose); }
.reveal-date-button { color: var(--gold); border-color: var(--gold); }
.reveal-date-button:hover { color: var(--maroon-deep); background: var(--gold); }

/* Countdown units copy the royal arched tiles. */
.countdown-section { background: var(--ivory); color: var(--ink); }
.countdown-section::before,
.countdown-section::after { display: none; }
.countdown-section .eyebrow { color: var(--gold-deep); }
.countdown-section .section-heading h2 { color: var(--maroon); }
.countdown-section .section-heading .ornament::before,
.countdown-section .section-heading .ornament::after { background: linear-gradient(90deg, transparent, var(--gold)); }
.countdown-section .section-heading .ornament i { background: var(--vermilion); border: 0; }
.countdown { max-width: 940px; gap: 18px; margin-top: 58px; }
.countdown > div {
  position: relative;
  display: grid;
  place-content: center;
  min-height: 172px;
  padding: 24px 12px;
  border: 1px solid rgba(148,101,29,.36);
  border-radius: 50% 50% 20px 20px / 32% 32% 20px 20px;
  background: rgba(234,216,181,.34);
}
.countdown > div::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px dotted rgba(156,45,46,.25);
  border-radius: inherit;
}
.countdown strong {
  color: var(--maroon);
  font-family: var(--font-names);
  font-size: clamp(2.65rem, 7vw, 4.4rem);
  font-weight: 400;
  letter-spacing: 0;
}
.countdown span {
  color: var(--gold-deep);
  font-size: .58rem;
  letter-spacing: .2em;
  opacity: 1;
}
.countdown-section .chapter-copy { color: var(--muted); }

/* Royal celebrations: identical ivory arches on the emerald field. */
.events-section {
  color: #fff8dc;
  background:
    radial-gradient(circle at 10% 15%, rgba(240,184,61,.34) 0 9%, transparent 9.5%),
    radial-gradient(circle at 89% 82%, rgba(184,63,106,.33) 0 12%, transparent 12.5%),
    linear-gradient(135deg, #123f30 0%, #1d5b43 52%, #174936 100%);
}
.events-section::before,
.events-section::after {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  border: 2px solid rgba(246,214,107,.22);
  transform: rotate(45deg);
  pointer-events: none;
}
.events-section::before { left: -150px; top: 45px; }
.events-section::after { right: -150px; bottom: 45px; }
.events-section .section-heading h2 { color: #fff8dc; }
.events-section .eyebrow { color: #f6d66b; }
.events-section .ornament i { background: #f6d66b; }
.california-events.event-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
  max-width: 1120px;
}
.california-events > article,
.california-events > article:nth-child(odd),
.california-events > article:nth-child(even) {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 58px 34px 46px;
  border: 2px solid #f0b83d;
  border-radius: 46% 46% 22px 22px / 18% 18% 22px 22px;
  background: radial-gradient(circle at 50% -12%, rgba(240,184,61,.38), transparent 42%), #fff8dc;
  box-shadow: 0 28px 70px rgba(5,31,22,.28);
  color: #2f3d28;
  overflow: hidden;
}
.california-events > article::before {
  display: block;
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px dotted rgba(184,63,106,.5);
  border-radius: inherit;
  pointer-events: none;
}
.california-events > article > .event-card__crest {
  position: relative;
  z-index: 1;
  display: block;
  color: #b83f6a;
  font-size: 28px;
  line-height: 1;
}
.california-events > article > h3 {
  color: #174936;
  font-family: var(--font-names);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1.12;
  margin: 18px 0 8px;
}
.california-events > article .event-date,
.california-events > article .event-time {
  color: #9b355c;
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.california-events > article p,
.california-events > article .event-address {
  color: #526149;
}
.california-events > article .event-address {
  margin-top: auto;
  padding-top: 18px;
  font-family: var(--font-prose);
  font-size: 1.15rem;
  line-height: 1.4;
}
.california-events > article .event-map-link {
  display: inline-flex;
  min-height: 48px;
  margin-top: 12px;
  padding: 10px 22px;
  border: 0;
  border-radius: 999px;
  background: #b83f6a;
  box-shadow: 0 12px 28px rgba(112,27,59,.22);
  color: #fff8dc;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-decoration: none;
}
.california-events > article .event-map-link:hover { color: #fff8dc; background: #9b355c; }
.california-events .timeline {
  position: relative;
  width: 100%;
  margin: 18px auto 12px;
  max-width: 320px;
  padding: 12px 18px 12px 40px;
  border: 1px solid rgba(240,184,61,.75);
  border-radius: 14px;
  background: linear-gradient(135deg, #174936, #1f5a43);
  box-shadow: inset 0 0 0 1px rgba(255,248,220,.08), 0 12px 24px rgba(5,31,22,.15);
}
.california-events .timeline::before {
  display: block;
  left: 24px;
  top: 23px;
  bottom: 23px;
  background: #f6d66b;
}
.california-events > article .timeline article {
  min-height: 0;
  padding: 9px 0;
  background: transparent;
  box-shadow: none;
  border: 0;
  overflow: visible;
}
.california-events > article .timeline article + article {
  border-top: 1px solid rgba(246,214,107,.25);
}
.california-events > article .timeline article::before {
  display: block;
  left: -16px;
  top: 21px;
  width: 8px;
  height: 8px;
  border: 2px solid #174936;
  border-radius: 50%;
  background: #f6d66b;
  transform: translate(-50%, -50%);
}
.california-events .timeline-index { display: none; }
.california-events > article .timeline article {
  display: block;
  text-align: left;
}
.california-events .timeline-content time {
  display: block;
  color: #f6d66b;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-align: left;
}
.california-events .timeline-content h3 {
  color: #fff8dc;
  font-family: var(--font-prose);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
}
.california-events > article .timeline::before { background: #f6d66b; }
.california-events > article .timeline time { color: #f6d66b; }
.california-events > article .timeline h3 { color: #fff8dc; }

/* Ceremony and reception have the royal dark venue stage. */
.program-section,
.reception-section { background: var(--maroon); color: var(--ivory); }
.program-section {
  background:
    radial-gradient(ellipse 60% 32% at 50% 10%, rgba(211,164,60,.15), transparent 78%),
    linear-gradient(155deg, #5a1420 0%, var(--maroon) 46%, #4c0e19 100%);
}
.program-section::before,
.program-section::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  width: clamp(76px, 17vw, 210px);
  pointer-events: none;
  opacity: .13;
  background:
    linear-gradient(45deg, transparent 44%, var(--gold) 45% 55%, transparent 56%) 0 0 / 34px 34px,
    linear-gradient(-45deg, transparent 44%, var(--gold) 45% 55%, transparent 56%) 0 0 / 34px 34px;
  -webkit-mask-image: linear-gradient(to right, #000, transparent);
  mask-image: linear-gradient(to right, #000, transparent);
}
.program-section::before { left: 0; }
.program-section::after { right: 0; transform: scaleX(-1); }
.reception-section {
  background:
    radial-gradient(ellipse 62% 42% at 50% 27%, rgba(211,164,60,.15), transparent 74%),
    linear-gradient(125deg, transparent 15%, rgba(211,164,60,.045) 31%, transparent 46%),
    linear-gradient(235deg, transparent 16%, rgba(211,164,60,.04) 33%, transparent 49%),
    radial-gradient(circle at 50% 100%, rgba(100,21,32,.26), transparent 66%),
    linear-gradient(160deg, #2b070c 0%, var(--maroon-deep) 48%, #220509 100%);
}
.reception-section::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    radial-gradient(circle at 10% 20%, rgba(211,164,60,.32) 0 1px, transparent 2px),
    radial-gradient(circle at 87% 15%, rgba(211,164,60,.3) 0 1px, transparent 2px),
    radial-gradient(circle at 6% 75%, rgba(211,164,60,.24) 0 1px, transparent 2px),
    radial-gradient(circle at 93% 72%, rgba(211,164,60,.27) 0 1px, transparent 2px);
  pointer-events: none;
}
.reception-section .venue-card {
  margin-bottom: 0;
  background: radial-gradient(circle at 50% 38%, rgba(211,164,60,.17), transparent 44%), #4b131c;
}
.wedding-feature .section-heading h2 { font-size: clamp(1.85rem, 5vw, 3.2rem); }
.program-section .section-heading h2,
.reception-section .section-heading h2 { color: var(--ivory); }
.program-section .eyebrow,
.reception-section .eyebrow { color: var(--gold); }
.program-section .ornament i,
.reception-section .ornament i { background: var(--gold); }
.program-section .ornament::before,
.program-section .ornament::after,
.reception-section .ornament::before,
.reception-section .ornament::after { background: linear-gradient(90deg, transparent, var(--gold)); }
.venue-card {
  min-height: 42vh;
  max-width: 980px;
  margin: 0 auto 70px;
  padding: clamp(70px, 9vw, 110px) 28px;
  border: 1px solid rgba(211,164,60,.45);
  border-radius: 48% 48% 18px 18px / 20% 20% 18px 18px;
  background: radial-gradient(circle at 50% 38%, rgba(211,164,60,.17), transparent 44%), var(--maroon-deep);
  color: var(--ivory);
  box-shadow: 0 30px 80px rgba(20,0,4,.25);
}
.venue-card::before {
  inset: 12px;
  border: 1px solid rgba(211,164,60,.24);
  border-radius: inherit;
  background: none;
}
.venue-divider { color: var(--gold); margin: 12px auto 26px; }
.venue-divider::before,
.venue-divider::after { background: rgba(211,164,60,.5); }
.venue-card .venue-name {
  color: var(--gold);
  font-family: var(--font-names);
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  font-weight: 400;
  line-height: 1.08;
}
.venue-card p {
  color: rgba(251,241,220,.75);
  font-family: var(--font-prose);
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  line-height: 1.4;
}
.venue-card .venue-time {
  color: var(--gold);
  border-color: rgba(211,164,60,.5);
  font-family: var(--font-body);
  font-size: .78rem;
}
.venue-map-button {
  min-height: 50px;
  border: 0;
  border-radius: 999px;
  background: var(--ivory);
  color: var(--maroon-deep);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .13em;
}
.venue-map-button:hover {
  background: var(--gold);
  color: var(--maroon-deep);
}
#programTimeline.timeline {
  width: min(720px, 100%);
  max-width: none;
  margin: 58px auto 0;
  text-align: left;
}
#programTimeline.timeline::before { display: none; }
#programTimeline.timeline article,
#programTimeline.timeline .ceremony-focus {
  position: relative;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 28px;
  min-height: 118px;
  margin: 0;
  padding: 0 0 30px;
  border: 0;
  background: none;
}
#programTimeline.timeline article:not(:last-child)::before {
  content: "";
  display: block;
  position: absolute;
  left: 43px;
  top: 54px;
  bottom: -4px;
  width: 1px;
  height: auto;
  border: 0;
  border-radius: 0;
  background: linear-gradient(var(--gold), rgba(211,164,60,.1));
  transform: none;
}
#programTimeline.timeline article:last-child::before { display: none; }
#programTimeline.timeline article:last-child { min-height: 0; padding-bottom: 0; }
#programTimeline .timeline-index {
  display: grid;
  place-items: center;
  align-self: start;
  width: 54px;
  height: 54px;
  margin: 0 auto;
  border: 0;
  border-radius: 0;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background: var(--maroon-deep);
  box-shadow: inset 0 0 0 1px var(--gold);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 400;
  z-index: 2;
}
#programTimeline .timeline-content { padding-top: 3px; }
#programTimeline time,
#programTimeline .ceremony-focus time {
  display: block;
  color: var(--gold);
  font-family: var(--font-body);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .22em;
  padding: 0;
  text-align: left;
}
#programTimeline h3,
#programTimeline .ceremony-focus h3 {
  color: var(--ivory);
  font-family: var(--font-names);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 400;
  line-height: 1.15;
  margin: 4px 0 2px;
}

/* Dress suggestions preserve the client's palettes, in the royal diamond treatment. */
.dress-section {
  background:
    radial-gradient(circle at 4% 8%, rgba(37,84,71,.12), transparent 28%),
    radial-gradient(circle at 96% 92%, rgba(211,164,60,.15), transparent 30%),
    repeating-linear-gradient(0deg, rgba(148,101,29,.025) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, rgba(148,101,29,.02) 0 1px, transparent 1px 8px),
    linear-gradient(155deg, #fff9eb 0%, var(--ivory) 48%, #f1e4c8 100%);
  color: var(--ink);
}
.dress-section::before,
.dress-section::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: clamp(140px, 23vw, 280px);
  aspect-ratio: 1;
  transform: rotate(45deg);
  border: 1px solid rgba(148,101,29,.2);
  box-shadow: inset 0 0 0 15px rgba(37,84,71,.025), 0 0 0 24px rgba(211,164,60,.045);
  pointer-events: none;
}
.dress-section::before { top: 9%; left: -8%; }
.dress-section::after { right: -8%; bottom: 8%; }
.dress-section .section-heading h2 { color: var(--maroon); white-space: pre-line; }
.palette-event {
  padding: 42px 0;
  border-bottom: 1px solid rgba(148,101,29,.35);
}
.palette-event h3 {
  color: var(--maroon);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}
.palette-event .palette { gap: 22px; margin-top: 35px; }
.swatch-item { width: 88px; }
.swatch-item i,
#dressPalettes .palette .swatch-item i {
  width: 56px;
  height: 56px;
  margin: 7px auto 25px !important;
  border: 0;
  transform: rotate(45deg);
  box-shadow: inset 0 0 0 5px rgba(255,255,255,.35), 0 8px 25px rgba(47,23,20,.12);
}
.swatch-item span { color: var(--muted); font-size: .68rem; line-height: 1.3; }
.dress-section .palette-note {
  color: var(--muted);
  font-size: clamp(1.15rem, 2.3vw, 1.5rem);
  margin-top: 36px;
  margin-bottom: 0;
}
.program-section.section-pad,
.dress-section.section-pad { padding-bottom: clamp(50px, 6vw, 76px); }

/* Closing chapter. */
.closing-section {
  min-height: 42svh;
  display: grid;
  place-items: center;
  padding: clamp(64px, 6vw, 82px) 22px;
  background:
    radial-gradient(circle at 50% 45%, rgba(120,48,49,.34), transparent 49%),
    radial-gradient(circle at 8% 0%, rgba(211,164,60,.08), transparent 34%),
    radial-gradient(circle at 92% 100%, rgba(211,164,60,.07), transparent 34%),
    linear-gradient(160deg, #3c0d14 0%, #29070d 62%, #190307 100%);
  color: var(--ivory);
}
.closing-section::before {
  display: block;
  position: absolute;
  width: min(900px, 120vw);
  height: auto;
  aspect-ratio: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(211,164,60,.19);
  border-radius: 50%;
  background: radial-gradient(circle,
    transparent 0 38%,
    rgba(211,164,60,.12) 38.15% 38.3%,
    transparent 38.45% 47%,
    rgba(211,164,60,.08) 47.15% 47.3%,
    transparent 47.45%);
  pointer-events: none;
}
.closing-section::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 24%, rgba(211,164,60,.35) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 18%, rgba(211,164,60,.29) 0 1px, transparent 2px),
    radial-gradient(circle at 21% 76%, rgba(211,164,60,.24) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 69%, rgba(211,164,60,.31) 0 1px, transparent 2px);
}
.closing-arch {
  max-width: 800px;
  padding: 0;
  border: 0;
  border-radius: 0;
}
.closing-arch::before { display: none; }
.closing-arch .closing-message,
.closing-arch > p {
  color: rgba(251,241,220,.75);
  font-family: var(--font-prose);
  font-size: clamp(1.25rem, 2.5vw, 1.65rem);
  font-style: normal;
  opacity: 1;
}
.closing-names {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4px, 1vw, 9px);
  color: var(--gold);
  font-size: clamp(2.5rem, 7vw, 4.3rem);
  line-height: 1.05;
}
.closing-names .closing-person {
  margin: 0;
  color: var(--gold);
  font-family: var(--font-names);
  font-size: 1em;
}
.closing-names .closing-ampersand {
  margin: 0;
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: .55em;
  line-height: 1;
}
.closing-arch small { color: var(--gold); font-weight: 700; }
.site-credit {
  background: #140204;
  border-top: 1px solid rgba(211,164,60,.22);
  color: var(--ivory);
}

/* Dormant gallery, gift, and RSVP styles follow the supplied royal theme too. */
.gallery-section { background: #e7d6b6; }
.gallery-section::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .08;
  background: repeating-linear-gradient(45deg, var(--maroon) 0 1px, transparent 1px 18px);
}
.gallery-section__arch,
.gallery-frame {
  border: 5px solid var(--gold);
  border-radius: 46% 46% 22px 22px / 19% 19% 22px 22px;
  background: var(--parchment);
  box-shadow: var(--royal-shadow);
}
.gallery-slide img { filter: none; }
.gallery-dots button { border: 0; background: rgba(100,21,32,.25); }
.gallery-dots button.is-active { width: 28px; border-radius: 999px; background: var(--maroon); }
.gifts-section { background: var(--maroon-deep); color: var(--ivory); }
.gifts-section::before {
  border: 1px solid rgba(211,164,60,.13);
  background: none;
  transform: rotate(45deg);
}
.gift-bloom { border-color: rgba(211,164,60,.55); color: var(--gold); }
.gift-copy h2 { color: var(--ivory); }
.gift-copy p { color: rgba(251,241,220,.74); font-family: var(--font-prose); }
.rsvp-section, .rsvp-contacts { background: var(--ivory); }
.rsvp-form {
  position: relative;
  padding: clamp(25px, 5vw, 50px);
  border: 1px solid rgba(148,101,29,.38);
  background: rgba(255,250,239,.78);
  box-shadow: var(--royal-shadow);
}
.rsvp-form::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px dotted rgba(156,45,46,.22);
  pointer-events: none;
}
.rsvp-form input,
.rsvp-form select,
.rsvp-form textarea {
  border-color: rgba(100,21,32,.28);
  background: transparent;
  color: var(--ink);
}
.rsvp-form input:focus,
.rsvp-form select:focus,
.rsvp-form textarea:focus {
  border-color: var(--gold-deep);
  box-shadow: 0 2px 0 var(--gold-deep);
}
.rsvp-contact {
  border: 1px solid rgba(148,101,29,.38);
  background: rgba(255,250,239,.72);
  color: var(--maroon);
  box-shadow: 0 16px 38px rgba(47,23,20,.08);
}
.primary-button {
  border-radius: 999px;
  background: var(--gold);
  color: var(--maroon-deep);
  font-weight: 800;
  letter-spacing: .13em;
}
.journey-section, .travel-section { background: var(--ivory); }
.transition-section { background: var(--maroon); color: var(--ivory); }

button:focus-visible,
a:focus-visible,
canvas:focus-visible,
.hero:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
  box-shadow: 0 0 0 6px var(--maroon-deep);
}

@media (max-width: 700px) {
  .section-pad { padding: 60px 0; }
  .section-shell { width: min(100% - 44px, 1120px); }
  .royal-jali { min-width: 0; width: 100px; opacity: .09; }
  .royal-hero-arch { width: 88vw; top: 7%; height: 86%; }
  .hero-content,
  .hero.is-open .hero-content { width: 76vw; }
  #brideName, #groomName,
  .couple-names [id$="Name"],
  .hero.is-open .couple-person [id$="Name"] {
    font-size: clamp(2rem, 9vw, 3.2rem);
  }
  .couple-names small { font-size: .64rem; }
  .hero-closing { font-size: clamp(.9rem, 3vw, 1.1rem); }
  .california-events.event-list { grid-template-columns: 1fr; max-width: 480px; }
  .california-events > article { padding: 54px 24px 36px; }
  .countdown { gap: 6px; }
  .countdown > div { min-height: 112px; padding: 18px 4px; }
  .countdown > div::before { inset: 5px; }
  .countdown strong { font-size: clamp(1.9rem, 9vw, 2.65rem); }
  .countdown span { font-size: .47rem; letter-spacing: .07em; }
  .swatch-item { width: 76px; }
  #programTimeline.timeline article,
  #programTimeline.timeline .ceremony-focus { grid-template-columns: 64px 1fr; gap: 18px; }
  #programTimeline.timeline article:not(:last-child)::before { left: 31px; }
  #programTimeline .timeline-index { width: 46px; height: 46px; }
}
@media (max-width: 600px) {
  #hero.is-open .hero-content {
    top: clamp(38px, 6vh, 55px);
    max-height: calc(100% - 28px);
    padding-top: max(env(safe-area-inset-top, 0px), 42px);
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 42px);
  }
  .scratch-wrap { aspect-ratio: 1.6; border-radius: 18px; }
  .scratch-wrap .date-reveal { padding: 16px 26px; }
  .program-section::before,
  .program-section::after { width: 62px; opacity: .09; }
  .dress-section::before,
  .dress-section::after { width: 150px; }
  .palette-event .palette { gap: 12px 8px; }
  .swatch-item { width: 68px; }
  .swatch-item i,
  #dressPalettes .palette .swatch-item i { width: 46px; height: 46px; margin-bottom: 20px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hero.is-open::before { animation: none; opacity: 1; }
}

.couple-names .gp-couple {
  margin-top: 5px;
}
}