:root {
  --ivory: #f1ece3;
  --ivory-soft: #faf7f1;
  --paper: #f5f0e8;
  --charcoal: #191714;
  --bronze: #9a7147;
  --bronze-light: #c2a078;
  --oak: #574637;
  --smoke: #6f685f;
  --line: rgba(25, 23, 20, .16);
  --serif: "Playfair Display", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
  --shadow: 0 28px 74px rgba(20, 17, 13, .14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--charcoal);
  background: var(--ivory-soft);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
.section-shell { width: min(1180px, calc(100% - 64px)); margin: 0 auto; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 100; transform: translateY(-160%); background: white; padding: 10px 14px; }
.skip-link:focus { transform: translateY(0); }

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  color: var(--ivory-soft);
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.02); animation: heroZoom 14s ease-out both; }
.hero__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,16,13,.43) 0%, rgba(18,16,13,.10) 42%, rgba(18,16,13,.58) 100%); }
.hero__grain { position: absolute; inset: 0; opacity: .08; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
.hero__header, .hero__content, .hero__scroll { position: relative; z-index: 2; }
.hero__header { display: flex; justify-content: space-between; align-items: center; padding: 34px clamp(24px, 5vw, 76px); border-bottom: 1px solid rgba(255,255,255,.24); }
.wordmark { font-family: var(--serif); font-size: clamp(1.5rem, 2.2vw, 2.4rem); font-weight: 500; letter-spacing: .01em; }
.hero__header--right { justify-content: flex-end; }
.eyebrow, .kicker { font-size: .68rem; text-transform: uppercase; letter-spacing: .25em; font-weight: 500; }
.hero__content { width: min(900px, calc(100% - 48px)); margin: auto; text-align: center; padding: 7vh 0 10vh; }
.hero__name { margin: 0 0 18px; font-size: clamp(.8rem, 1vw, 1rem); text-transform: uppercase; letter-spacing: .32em; }
h1, h2 { font-family: var(--serif); font-weight: 500; line-height: 1.05; }
.hero h1 { margin: 0; font-size: clamp(2.4rem, 5.4vw, 5.3rem); letter-spacing: -.045em; }
.hero__details { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 32px 0 38px; font-size: .72rem; text-transform: uppercase; letter-spacing: .2em; }
.hero__dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .65; }
.hero__scroll { align-self: end; justify-self: center; display: grid; justify-items: center; gap: 8px; margin-bottom: 28px; color: rgba(255,255,255,.8); text-decoration: none; font-size: .56rem; text-transform: uppercase; letter-spacing: .2em; }
.hero__scroll i { display: block; width: 1px; height: 42px; background: rgba(255,255,255,.78); animation: scrollPulse 2s ease-in-out infinite; }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 30px; border: 1px solid transparent; background: transparent; text-decoration: none; text-transform: uppercase; letter-spacing: .18em; font-size: .64rem; cursor: pointer; transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease; }
.button:hover { transform: translateY(-1px); }
.button--light { border-color: rgba(255,255,255,.72); color: white; background: rgba(0,0,0,.08); }
.button--light:hover { background: white; color: var(--charcoal); }
.button--bronze { width: 100%; background: var(--bronze); color: white; }
.button--submit { min-height: 68px; flex-direction: column; gap: 4px; padding: 10px 24px; text-transform: none; }
.button__primary { font-family: var(--serif); font-size: 1.08rem; font-weight: 500; line-height: 1; letter-spacing: .03em; }
.button__deadline { font-family: var(--sans); font-size: .58rem; font-weight: 500; line-height: 1.2; letter-spacing: .18em; text-transform: uppercase; opacity: .8; }
.button--bronze:hover { background: var(--oak); }

.kicker { margin: 0; color: var(--bronze); }
.kicker--light { color: var(--bronze-light); }
.save-rsvp { padding: clamp(86px, 9vw, 136px) 0 clamp(100px, 11vw, 154px); background: var(--ivory-soft); }
.save-rsvp__heading { margin-bottom: clamp(38px, 4vw, 58px); text-align: center; }
.save-rsvp__grid { display: grid; grid-template-columns: minmax(0, 44fr) minmax(430px, 56fr); gap: clamp(44px, 6vw, 92px); align-items: center; }
.save-date-art { margin: 0; width: 100%; }
.save-date-art img { width: 100%; height: auto; box-shadow: var(--shadow); }
.rsvp-panel { display: flex; flex-direction: column; justify-content: center; }
.rsvp-panel__intro { margin-bottom: 28px; }
.rsvp-panel__intro h2 { margin: 12px 0 10px; font-size: clamp(2.2rem, 4vw, 4.1rem); line-height: 1; letter-spacing: -.04em; }
.rsvp-panel__intro p:last-child { margin: 0; color: var(--smoke); font-size: .9rem; }
.rsvp-form { padding: clamp(30px, 3.8vw, 50px); background: var(--paper); box-shadow: 0 22px 60px rgba(20,17,13,.08); border-radius: 2px; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 24px; }
.field { margin-bottom: 22px; }
.field label, .attendance legend { display: block; margin-bottom: 7px; font-size: .6rem; text-transform: uppercase; letter-spacing: .15em; font-weight: 500; }
.field input, .field select, .field textarea { width: 100%; border: 0; border-bottom: 1px solid #b9afa4; border-radius: 0; background: transparent; color: var(--charcoal); padding: 11px 2px; outline: 0; transition: border-color .2s ease; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--bronze); }
.field textarea { resize: vertical; }
.attendance { margin: 0 0 24px; padding: 0; border: 0; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; }
.choice span { display: flex; min-height: 48px; align-items: center; justify-content: center; border: 1px solid #c7bdb1; font-size: .72rem; transition: .2s ease; }
.choice input:checked + span { background: var(--charcoal); color: white; border-color: var(--charcoal); }
.choice input:focus-visible + span { outline: 2px solid var(--bronze); outline-offset: 2px; }
.field__error { display: none; margin-top: 6px; color: #8a3f31; font-size: .66rem; }
.field.is-invalid .field__error, .attendance.is-invalid .attendance__error { display: block; }
.field.is-invalid input, .field.is-invalid select { border-color: #8a3f31; }
.field--hidden { display: none; }
.field--hidden.is-visible { display: block; }
.honeypot { position: absolute; left: -9999px; }
.form-status { min-height: 22px; margin: 12px 0 0; font-size: .72rem; }

.countdown-section { padding: clamp(98px, 10vw, 152px) 0; background: var(--charcoal); color: var(--ivory-soft); }
.countdown-heading { text-align: center; margin-bottom: clamp(36px, 5vw, 64px); }
.countdown-heading h2 { margin: 12px 0 0; font-size: clamp(2.6rem, 5vw, 5rem); letter-spacing: -.045em; }
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,.2); border-bottom: 1px solid rgba(255,255,255,.2); }
.countdown__item { padding: 34px 12px 29px; text-align: center; border-right: 1px solid rgba(255,255,255,.2); }
.countdown__item:last-child { border-right: 0; }
.countdown__item strong { display: block; font-family: var(--serif); font-size: clamp(2.6rem, 6vw, 5.2rem); font-weight: 500; line-height: 1; }
.countdown__item span { display: block; margin-top: 12px; color: rgba(255,255,255,.56); font-size: .62rem; text-transform: uppercase; letter-spacing: .2em; }

.closing-note { padding: clamp(72px, 9vw, 118px) 28px; background: var(--ivory); text-align: center; }
.closing-note p { max-width: 520px; margin: 0 auto; font-family: var(--serif); font-size: clamp(1rem, 1.65vw, 1.5rem); line-height: 1.45; letter-spacing: -.01em; color: #4f4942; }
.site-footer { display: flex; justify-content: space-between; padding: 28px clamp(24px, 5vw, 76px); background: #11100e; color: rgba(255,255,255,.56); font-size: .64rem; text-transform: uppercase; letter-spacing: .18em; }

.reveal { opacity: 0; transform: translateY(12px); animation: reveal .9s ease .2s forwards; }
.reveal--delay-1 { animation-delay: .42s; }
.reveal-on-scroll { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.reveal-on-scroll.is-visible { opacity: 1; transform: none; }
@keyframes reveal { to { opacity: 1; transform: none; } }
@keyframes heroZoom { from { transform: scale(1.08); } to { transform: scale(1.02); } }
@keyframes scrollPulse { 0%,100% { opacity: .35; transform: scaleY(.6); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }

@media (max-width: 980px) {
  .save-rsvp__grid { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; }
  .save-date-art { width: min(620px, 100%); margin: 0 auto; }
  .rsvp-panel { width: 100%; }
}
@media (max-width: 700px) {
  .hero__header { padding-top: 24px; padding-bottom: 24px; }
  .wordmark { font-size: 1.45rem; }
  .eyebrow { font-size: .6rem; letter-spacing: .2em; }
  .hero__details { flex-direction: column; gap: 7px; }
  .hero__dot { display: none; }
}
@media (max-width: 620px) {
  .section-shell { width: min(100% - 30px, 1180px); }
  .hero h1 { font-size: clamp(2.5rem, 10vw, 3.6rem); }
  .hero__name { letter-spacing: .23em; }
  .save-rsvp { padding-top: 72px; }
  .save-rsvp__heading { margin-bottom: 32px; }
  .rsvp-form { padding: 28px 20px; }
  .form-grid { grid-template-columns: 1fr; }
  .countdown__item { padding: 24px 4px 20px; }
  .countdown__item strong { font-size: clamp(2rem, 12vw, 3.2rem); }
  .countdown__item span { font-size: .5rem; letter-spacing: .11em; }
  .closing-note p br { display: none; }
  .site-footer { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.thank-you-page { background: var(--charcoal); }
.thank-you { min-height: 100svh; position: relative; display: grid; place-items: center; padding: 24px; overflow: hidden; }
.thank-you__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.thank-you__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,13,11,.82), rgba(15,13,11,.32)); }
.thank-you__card { position: relative; z-index: 1; width: min(620px, 100%); padding: clamp(38px, 7vw, 80px); background: rgba(247,243,235,.95); box-shadow: var(--shadow); }
.thank-you-wordmark { margin: 0; color: var(--bronze); font-family: var(--serif); font-size: 1.7rem; line-height: 1; }
.thank-you__card h1 { margin: 24px 0 18px; font-family: var(--serif); font-size: clamp(3rem, 7vw, 6rem); font-weight: 500; line-height: 1; }
.thank-you__card > p:not(.thank-you-wordmark):not(.kicker) { max-width: 460px; color: #5f594f; margin-bottom: 34px; }

/* In-page RSVP confirmation */
body.overlay-open { overflow: hidden; }
.submission-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  padding: 24px;
  visibility: hidden;
  opacity: 0;
  transition: opacity .45s ease, visibility .45s ease;
}
.submission-overlay.is-visible { visibility: visible; opacity: 1; }
.submission-overlay__backdrop {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(24, 21, 17, .40), rgba(24, 21, 17, .40)),
    url("../images/save-the-date.png") center / cover no-repeat;
  filter: blur(8px) saturate(.75);
  transform: scale(1.04);
}
.submission-overlay__backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(245, 240, 232, .76);
  backdrop-filter: blur(4px);
}
.submission-overlay__panel {
  position: relative;
  z-index: 1;
  width: min(620px, 100%);
  padding: clamp(42px, 7vw, 82px);
  background: rgba(250, 247, 241, .96);
  box-shadow: 0 34px 90px rgba(20, 17, 13, .22);
  text-align: center;
  transform: translateY(18px) scale(.985);
  opacity: 0;
  transition: transform .55s cubic-bezier(.22,.75,.2,1), opacity .45s ease;
}
.submission-overlay.is-visible .submission-overlay__panel { transform: none; opacity: 1; }
.submission-overlay__panel h2 {
  margin: 16px 0 24px;
  font-size: clamp(3.4rem, 8vw, 6.8rem);
  letter-spacing: -.05em;
}
.submission-overlay__panel > p:not(.kicker) {
  margin: 0 auto 8px;
  max-width: 470px;
  color: #5b554d;
  font-size: .94rem;
}
.submission-overlay__panel .submission-overlay__note {
  margin-top: 26px;
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.5;
}
.submission-overlay__button { width: auto; min-width: 240px; margin-top: 34px; }
.button:disabled { cursor: wait; opacity: .68; transform: none; }

@media (max-width: 620px) {
  .submission-overlay { padding: 14px; }
  .submission-overlay__panel { padding: 44px 24px; }
  .submission-overlay__button { width: 100%; min-width: 0; }
}