.skip-link {
  position: absolute;
  z-index: 50;
  top: 8px;
  left: 8px;
  padding: .75rem 1rem;
  background: var(--green-dark);
  color: white;
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: .55rem max(1.5rem, calc((100vw - 1180px) / 2));
  border-bottom: 1px solid rgba(45, 70, 55, .12);
  background: rgba(250, 249, 245, .96);
  backdrop-filter: blur(12px);
}
.wordmark { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.wordmark__monogram {
  color: var(--wine);
  font: 1.3rem var(--serif);
  letter-spacing: -.13em;
}
.wordmark__monogram span { padding: 0 .1em; color: var(--green); font-style: italic; font-size: .8em; }
.wordmark__label { color: var(--muted); font: italic .88rem var(--serif); }
.main-nav { display: flex; align-items: center; gap: clamp(1.2rem, 2.5vw, 2.2rem); }
.main-nav a {
  color: #465349;
  font-size: .78rem;
  text-decoration: none;
  text-underline-offset: .3rem;
}
.main-nav a:hover, .main-nav a:focus-visible { color: var(--wine); text-decoration: underline; }
.main-nav .nav-rsvp { padding: .45rem .05rem; border-bottom: 1px solid var(--wine); color: var(--wine); }

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  min-height: min(790px, max(650px, calc(100svh - 72px)));
  overflow: hidden;
  background: var(--green-dark);
}
.hero__copy {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1180px;
  margin: auto auto 0;
  padding: clamp(3rem, 6vw, 5rem) 1.5rem clamp(2.8rem, 5vw, 4.2rem);
  text-align: center;
}
.eyebrow { margin: 0 0 1rem; color: #f0d3d7; font: italic 1rem var(--serif); }
.hero .eyebrow::before, .hero .eyebrow::after {
  display: inline-block;
  width: 1.25rem;
  height: 1px;
  margin: 0 .45rem .28rem;
  background: currentColor;
  content: "";
}
.hero h1 {
  display: grid;
  justify-items: center;
  margin: 0;
  color: var(--paper);
  font: 400 clamp(4.5rem, 9vw, 8.5rem)/.86 var(--serif);
  letter-spacing: -.075em;
  text-align: center;
  text-shadow: 0 3px 24px rgba(0, 0, 0, .2);
}
.hero__name { max-width: 100%; }
.ampersand { color: #e5b4bd; font-style: italic; }
.hero h1 .ampersand { margin: .1em 0 .06em; font-size: .4em; line-height: .65; }
.hero__intro {
  max-width: 410px;
  margin: 1.15rem auto 1.1rem;
  color: rgba(255, 255, 255, .92);
  font: 1.08rem/1.65 var(--serif);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .8rem 1.2rem;
  border: 1px solid var(--green);
  border-radius: 2px;
  background: var(--green);
  color: white;
  font-size: .79rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.button:hover { background: var(--wine); border-color: var(--wine); transform: translateY(-1px); }
.hero .button {
  border-color: rgba(255, 255, 255, .9);
  background: rgba(250, 249, 245, .95);
  color: var(--green-dark);
}
.hero .button:hover { border-color: white; background: white; color: var(--wine); }
.hero__date {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  margin: 1.1rem 0 0;
  color: rgba(255, 255, 255, .9);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.hero__date::before, .hero__date::after { width: 1rem; height: 1px; background: rgba(255, 255, 255, .55); content: ""; }
.hero__portrait {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  overflow: hidden;
}
.hero__portrait img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center 50%;
}
.hero__portrait::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 30, 22, .08) 24%, rgba(18, 30, 22, .16) 48%, rgba(18, 30, 22, .78) 100%);
  content: "";
  pointer-events: none;
}
.hero__portrait figcaption {
  position: absolute;
  z-index: 2;
  top: 1.2rem;
  right: 1.2rem;
  padding: .45rem .7rem;
  background: rgba(32, 55, 43, .72);
  color: white;
  font: italic .88rem var(--serif);
  backdrop-filter: blur(6px);
}
.countdown-band {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem 2rem;
  padding: 1.3rem max(1.5rem, calc((100vw - 1080px) / 2));
  border-bottom: 1px solid rgba(45, 70, 55, .12);
  background: var(--sage);
  color: var(--green-dark);
}
.countdown-band h2 { margin: 0; font: 400 clamp(1.35rem, 2.2vw, 1.8rem) var(--serif); }
.countdown { display: flex; align-items: baseline; justify-content: flex-end; gap: .55rem; }
.countdown__number {
  color: var(--green-dark);
  font: 400 clamp(2.6rem, 4.5vw, 3.7rem)/1 var(--serif);
  font-variant-numeric: tabular-nums;
}
.countdown__label { color: var(--wine); font: italic 1rem var(--serif); }

.section { padding: clamp(4.5rem, 7vw, 6.5rem) max(1.5rem, calc((100vw - 1080px) / 2)); }
.programme-section, .gallery-section { background: var(--paper); }
.programme-section {
  display: grid;
  grid-template-columns: minmax(230px, .75fr) minmax(0, 1.25fr);
  align-items: start;
  column-gap: clamp(2.5rem, 7vw, 6rem);
}
.section-heading { max-width: 680px; margin-bottom: 2rem; }
.section-heading h2, .rsvp-card h2 {
  margin: 0;
  color: var(--green);
  font: 400 clamp(2.55rem, 4.8vw, 4rem)/1.04 var(--serif);
  letter-spacing: -.055em;
}
.programme-section .section-heading { grid-column: 1; grid-row: 1; }
.programme-section .section-heading::before {
  display: block;
  margin-bottom: .7rem;
  color: var(--wine);
  content: "LE JOUR J";
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .17em;
}
.programme-list {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 720px;
  margin: 0;
  border-top: 1px solid var(--rule);
  grid-column: 2;
  grid-row: 1 / span 2;
}
.programme-item {
  display: grid;
  grid-template-columns: minmax(8.5rem, .5fr) 1fr;
  align-items: start;
  gap: 1.4rem;
  margin: 0;
  padding: 1.55rem .1rem;
  border-bottom: 1px solid var(--rule);
}
.programme-item__time { margin: .2rem 0 0; color: var(--wine); font: italic 1rem var(--serif); }
.programme-item h3 { margin: 0; color: var(--green); font: 400 clamp(1.5rem, 2.5vw, 2rem)/1.12 var(--serif); }
.programme-item__content > p { max-width: 520px; margin: .45rem 0 0; color: var(--muted); font-size: .88rem; line-height: 1.65; }
.programme-item__content .text-link { margin-top: .7rem; }
.text-link { color: var(--wine); font-size: .78rem; text-underline-offset: .25rem; }
.text-link:hover { text-decoration-thickness: 2px; }
.dress-note {
  display: block;
  margin: 1.7rem 0 0;
  padding: .3rem 0 .3rem 1rem;
  border-left: 2px solid var(--wine);
  grid-column: 1;
  grid-row: 2;
}
.dress-note p { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.65; }
.dress-note .dress-note__label { margin-bottom: .25rem; color: var(--wine); font: italic 1rem var(--serif); }

.section-heading--center { max-width: 710px; margin: 0 auto 2rem; text-align: center; }
.section-heading--center .eyebrow { margin-bottom: .6rem; }
.rsvp-section { padding: 0 max(1.5rem, calc((100vw - 1080px) / 2)); background: var(--wine); color: #fbf8f0; }
.rsvp-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  column-gap: clamp(2rem, 7vw, 6rem);
  width: 100%;
  margin: 0 auto;
  padding: clamp(3rem, 5.5vw, 5rem) 0;
  color: #fbf8f0;
}
.rsvp-card h2 { color: #fbf8f0; grid-column: 1; grid-row: 1; }
.rsvp-card__copy {
  max-width: 500px;
  margin: .85rem 0 0;
  color: #f1e4e2;
  font: 1.04rem/1.7 var(--serif);
  grid-column: 1;
  grid-row: 2;
}
.rsvp-card__copy strong { color: white; font-weight: 650; }
.rsvp-lookup-form {
  display: grid;
  gap: .65rem;
  margin-top: .1rem;
  grid-column: 2;
  grid-row: 1 / span 2;
}
.rsvp-code-field { display: grid; gap: .5rem; color: #fbf8f0; font-size: .82rem; font-weight: 600; }
.rsvp-code-field input {
  width: 100%;
  min-height: 52px;
  padding: .75rem .9rem;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 2px;
  background: rgba(255, 255, 255, .08);
  color: white;
  font: 600 1rem var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.rsvp-code-field input::placeholder { color: rgba(255, 255, 255, .65); }
.rsvp-code-field input:focus { outline: 2px solid #f0d3d7; outline-offset: 2px; }
.rsvp-code-help { margin: -.2rem 0 .2rem; color: #f1e4e2; font-size: .76rem; line-height: 1.5; }
.rsvp-status { min-height: 1.3em; margin: .2rem 0 0; color: #fbf8f0; font-size: .82rem; line-height: 1.55; }
.rsvp-status[data-error="true"] { color: #ffe0e2; }
.rsvp-response-panel {
  margin-top: 1.6rem;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(255, 255, 255, .32);
  grid-column: 2;
  grid-row: 3;
}
.rsvp-response-heading h3 { margin: 0; color: white; font: 400 1.55rem var(--serif); }
.rsvp-response-heading p { margin: .4rem 0 1rem; color: #f1e4e2; font-size: .82rem; line-height: 1.55; }
.rsvp-guest-list { display: grid; }
.rsvp-guest {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
  margin: 0;
  padding: .9rem 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .22);
}
.rsvp-guest legend { display: block; width: 42%; padding: 0; color: white; font: 400 1.05rem var(--serif); }
.rsvp-guest__choices { display: flex; flex-wrap: wrap; gap: .8rem 1.1rem; }
.rsvp-guest__choice { display: inline-flex; align-items: center; gap: .4rem; color: #f1e4e2; font-size: .8rem; cursor: pointer; }
.rsvp-guest__choice input { width: 1rem; height: 1rem; margin: 0; accent-color: #f0d3d7; }
.rsvp-lookup-form .button--light, .rsvp-response-panel .button--light {
  justify-self: start;
  margin-top: .45rem;
  border-color: #fbf8f0;
  background: #fbf8f0;
  color: var(--green-dark);
  grid-column: auto;
  grid-row: auto;
}
.rsvp-lookup-form .button--light:hover, .rsvp-response-panel .button--light:hover { border-color: white; background: white; color: var(--wine); }
.rsvp-lookup-form .button--light:disabled, .rsvp-response-panel .button--light:disabled { opacity: .6; cursor: wait; }
.rsvp-response-panel form { display: grid; gap: .45rem; }
.rsvp-wish {
  display: grid;
  gap: .45rem;
  margin-top: 1.8rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .32);
}
.rsvp-wish h3 { margin: 0; color: white; font: 400 1.55rem var(--serif); }
.rsvp-wish > p { margin: 0 0 .5rem; color: #f1e4e2; font-size: .82rem; line-height: 1.55; }
.rsvp-wish select, .rsvp-wish textarea {
  width: 100%;
  min-height: 48px;
  padding: .75rem .9rem;
  border: 1px solid rgba(255, 255, 255, .58);
  border-radius: 2px;
  background: rgba(255, 255, 255, .08);
  color: white;
  font: 400 .92rem/1.5 var(--sans);
}
.rsvp-wish select option { color: var(--ink); }
.rsvp-wish textarea { min-height: 112px; resize: vertical; }
.rsvp-wish select:focus, .rsvp-wish textarea:focus { outline: 2px solid #f0d3d7; outline-offset: 2px; }
.rsvp-wish textarea::placeholder { color: rgba(255, 255, 255, .68); }
.rsvp-anonymous-option { display: flex; align-items: center; gap: .55rem; margin-top: .35rem; color: #fbf8f0; font-size: .82rem; cursor: pointer; }
.rsvp-anonymous-option input { width: 1rem; height: 1rem; margin: 0; accent-color: #f0d3d7; }
.wishes-section { background: var(--sage); }
.wishes-section .section-heading { margin-bottom: 2rem; }
.wishes-section .section-heading > p:last-child { margin: .75rem auto 0; color: var(--muted); font-size: .92rem; }
.wishes-list {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  overflow: hidden;
}
.wishes-track { display: flex; width: 100%; }
.wishes-group {
  display: flex;
  flex: 0 0 auto;
  width: max-content;
  gap: 1rem;
  margin-inline: auto;
  padding-inline: .25rem;
}
.wish-note {
  flex: 0 0 min(340px, calc(100vw - 4.8rem));
  min-width: 0;
  padding: 1.35rem 1.45rem;
  border-top: 2px solid var(--wine);
  background: rgba(255, 254, 250, .78);
}
.wish-note h3 { margin: 0 0 .7rem; color: var(--green); font: 400 1.25rem var(--serif); }
.wish-note p { margin: 0; color: var(--ink); font: 1rem/1.7 var(--serif); white-space: pre-wrap; overflow-wrap: anywhere; }
.wish-note time { display: block; margin-top: .9rem; color: var(--muted); font-size: .72rem; }
.wishes-empty { margin: 0; color: var(--muted); font: italic 1.05rem/1.6 var(--serif); text-align: center; }
.wishes-list.is-ticker .wishes-track {
  width: max-content;
  animation: wishes-ticker var(--wishes-duration) linear infinite;
}
.wishes-list.is-ticker .wishes-group { margin: 0; }
.wishes-list.is-ticker:hover .wishes-track,
.wishes-list.is-ticker:focus-within .wishes-track { animation-play-state: paused; }
.wishes-list.is-static-overflow { overflow-x: auto; scroll-snap-type: x mandatory; }
.wishes-list.is-static-overflow .wishes-group { margin-inline: 0; }
.wishes-list.is-static-overflow .wish-note { scroll-snap-align: start; }
.wishes-list:focus-visible { outline: 2px solid var(--wine); outline-offset: 5px; }
@keyframes wishes-ticker {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
.button--light {
  justify-self: start;
  margin-top: 1.25rem;
  border-color: #fbf8f0;
  background: #fbf8f0;
  color: var(--green-dark);
}
.button--light:hover { border-color: white; background: white; color: var(--wine); }

.gallery-section { padding-block: clamp(4.5rem, 7vw, 6.5rem); background: var(--cream); }
.gallery-section .section-heading--center { margin-bottom: 2rem; }
.gallery-grid {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  align-items: end;
  max-width: 1080px;
  margin: 0 auto;
  gap: clamp(1rem, 2.5vw, 2.2rem);
}
.gallery-photo { margin: 0; }
.gallery-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 1.22;
  object-fit: cover;
  transition: transform .45s ease;
}
.gallery-photo--wide img { object-position: center 42%; }
.gallery-photo--tall { width: 90%; justify-self: end; }
.gallery-photo--tall img { aspect-ratio: .86; object-position: center 40%; }
.gallery-photo figcaption { margin-top: .65rem; color: var(--muted); font: italic .88rem var(--serif); }

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem max(1.5rem, calc((100vw - 1180px) / 2));
  background: var(--green-dark);
  color: #e7ece5;
}
.site-footer__brand { color: white; font: 1.3rem var(--serif); letter-spacing: -.1em; text-decoration: none; }
.site-footer__brand span { color: #d7b1b7; font-style: italic; font-size: .8em; }
.site-footer p { margin: 0; color: #dfe5dc; font: italic .9rem var(--serif); }

@media (max-width: 820px) {
  .site-header { min-height: 68px; padding-inline: 1.2rem; }
  .main-nav { gap: .9rem; }
  .main-nav a { font-size: .72rem; }
  .hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  min-height: min(790px, max(650px, calc(100svh - 72px)));
  overflow: hidden;
  background: var(--green-dark);
}
.hero__copy {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1180px;
  margin: auto auto 0;
  padding: clamp(3rem, 6vw, 5rem) 1.5rem clamp(2.8rem, 5vw, 4.2rem);
  text-align: center;
}
.eyebrow { margin: 0 0 1rem; color: #f0d3d7; font: italic 1rem var(--serif); }
.hero .eyebrow::before, .hero .eyebrow::after {
  display: inline-block;
  width: 1.25rem;
  height: 1px;
  margin: 0 .45rem .28rem;
  background: currentColor;
  content: "";
}
.hero h1 {
  display: grid;
  justify-items: center;
  margin: 0;
  color: var(--paper);
  font: 400 clamp(4.5rem, 9vw, 8.5rem)/.86 var(--serif);
  letter-spacing: -.075em;
  text-align: center;
  text-shadow: 0 3px 24px rgba(0, 0, 0, .2);
}
.hero__name { max-width: 100%; }
.ampersand { color: #e5b4bd; font-style: italic; }
.hero h1 .ampersand { margin: .1em 0 .06em; font-size: .4em; line-height: .65; }
.hero__intro {
  max-width: 410px;
  margin: 1.15rem auto 1.1rem;
  color: rgba(255, 255, 255, .92);
  font: 1.08rem/1.65 var(--serif);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .8rem 1.2rem;
  border: 1px solid var(--green);
  border-radius: 2px;
  background: var(--green);
  color: white;
  font-size: .79rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.button:hover { background: var(--wine); border-color: var(--wine); transform: translateY(-1px); }
.hero .button {
  border-color: rgba(255, 255, 255, .9);
  background: rgba(250, 249, 245, .95);
  color: var(--green-dark);
}
.hero .button:hover { border-color: white; background: white; color: var(--wine); }
.hero__date {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  margin: 1.1rem 0 0;
  color: rgba(255, 255, 255, .9);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.hero__date::before, .hero__date::after { width: 1rem; height: 1px; background: rgba(255, 255, 255, .55); content: ""; }
.hero__portrait {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  overflow: hidden;
}
.hero__portrait img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center 50%;
}
.hero__portrait::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 30, 22, .08) 24%, rgba(18, 30, 22, .16) 48%, rgba(18, 30, 22, .78) 100%);
  content: "";
  pointer-events: none;
}
.hero__portrait figcaption {
  position: absolute;
  z-index: 2;
  top: 1.2rem;
  right: 1.2rem;
  padding: .45rem .7rem;
  background: rgba(32, 55, 43, .72);
  color: white;
  font: italic .88rem var(--serif);
  backdrop-filter: blur(6px);
}
.countdown-band { padding: 1.1rem 1.2rem; }
  .countdown-band h2 { max-width: 180px; font-size: 1.25rem; line-height: 1.2; }
  .countdown__number { font-size: 2.55rem; }
  .countdown__label { font-size: .9rem; }
  .section { padding: 3.8rem 1.2rem; }
  .programme-section { display: block; }
  .programme-section .section-heading { margin-bottom: 1.6rem; }
  .section-heading h2, .rsvp-card h2 { font-size: clamp(2.35rem, 10vw, 3.1rem); }
  .programme-item { grid-template-columns: 1fr; gap: .45rem; padding: 1.2rem .1rem; }
  .programme-item__time { font-size: .9rem; }
  .programme-item h3 { font-size: 1.65rem; }
  .dress-note { margin-top: 1.3rem; }
  .rsvp-section { padding-inline: 1.2rem; }
  .rsvp-card { display: block; padding: 3.2rem 0; }
  .rsvp-card__copy { margin-top: .8rem; font-size: 1rem; }
  .rsvp-lookup-form { margin-top: 1.3rem; }
  .rsvp-response-panel { margin-top: 1.4rem; }
  .rsvp-wish { margin-top: 1.4rem; }
  .rsvp-guest { align-items: flex-start; flex-direction: column; gap: .55rem; }
  .rsvp-guest legend { width: 100%; }
  .rsvp-lookup-form .button--light, .rsvp-response-panel .button--light { width: 100%; margin-top: .55rem; }
  .gallery-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .gallery-photo img { aspect-ratio: 1.18; }
  .gallery-photo--tall { width: 88%; }
  .gallery-photo--tall img { aspect-ratio: 1; }
  .site-footer { padding: 1.1rem 1rem; }
}