:root {
  --milk: #fbf6ee;
  --milk-deep: #f1e3d0;
  --paper: #fffaf3;
  --champagne: #e3c18a;
  --gold: #b6863f;
  --gold-soft: #cba768;
  --blush: #e7b9b6;
  --rose: #c98287;
  --sage: #929c85;
  --cocoa: #544337;
  --cocoa-soft: #79685c;
  --line: rgba(151, 111, 54, .24);
  --display: "Iowan Old Style", "Baskerville", "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--cocoa);
  background: var(--milk);
  font-family: var(--display);
  -webkit-font-smoothing: antialiased;
}
body.page-lock { overflow: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

.eyebrow {
  margin: 0;
  color: var(--gold);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .34em;
  line-height: 1.6;
  text-transform: uppercase;
}

.ampersand-char {
  display: inline-block;
  color: var(--gold);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: .36em;
  font-style: normal;
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1;
  text-shadow: none;
  transform: none;
}

.names {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cocoa);
  font-family: var(--display);
  font-weight: 400;
  line-height: .82;
  letter-spacing: 0;
}

/* Equal initial slots keep the ampersand on the shared centre line. */
.names > span {
  flex: 0 0 .75em;
  text-align: center;
}
.names > .ampersand-char { letter-spacing: 0; }

.opening {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,.98) 0 15%, rgba(255,252,249,.76) 30%, transparent 56%),
    radial-gradient(circle at 12% 88%, rgba(231,185,182,.2), transparent 27%),
    radial-gradient(circle at 90% 9%, rgba(231,185,182,.14), transparent 24%),
    linear-gradient(145deg, #fffaf4 0%, #f9eee3 58%, #f0ded0 100%);
  transition: opacity .85s ease, transform 1s cubic-bezier(.2,.72,.2,1), visibility 0s linear 1s;
}
.opening::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 13% 18%, rgba(182,134,63,.35) 0 1px, transparent 1.8px),
    radial-gradient(circle at 84% 22%, rgba(182,134,63,.3) 0 1.3px, transparent 2px),
    radial-gradient(circle at 18% 78%, rgba(182,134,63,.3) 0 1.2px, transparent 2px),
    radial-gradient(circle at 88% 74%, rgba(182,134,63,.28) 0 1px, transparent 1.8px);
}
.opening.is-open { visibility: hidden; opacity: 0; transform: scale(1.025); }
.opening.is-open .opening-content { opacity: 0; transform: translateY(-10px) scale(.97); }

.opening-frame {
  position: absolute;
  inset: clamp(12px, 2.2vw, 34px);
  border: 1px solid rgba(182,134,63,.24);
  border-radius: 360px 360px 24px 24px / 180px 180px 24px 24px;
  pointer-events: none;
}
.frame-corner { display: none; }
.frame-corner-tl { left: -1px; top: -1px; border-left: 2px solid var(--gold); border-top: 2px solid var(--gold); }
.frame-corner-tr { right: -1px; top: -1px; border-right: 2px solid var(--gold); border-top: 2px solid var(--gold); }
.frame-corner-bl { left: -1px; bottom: -1px; border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold); }
.frame-corner-br { right: -1px; bottom: -1px; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); }

.opening-orbit {
  display: none;
}
.orbit-one { width: min(66vw, 720px); height: min(66vw, 720px); left: -24vw; bottom: -42vw; }
.orbit-two { width: min(58vw, 620px); height: min(58vw, 620px); right: -22vw; top: -35vw; }

.opening-content {
  position: relative;
  z-index: 3;
  width: min(92vw, 680px);
  padding: 32px 24px 38px;
  text-align: center;
  transition: opacity .55s ease, transform .7s ease;
}

.floral-art {
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.floral-opening {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 0;
  width: min(1440px, 110vw);
  height: min(38svh, 365px);
  object-fit: contain;
  object-position: center bottom;
  opacity: .72;
  transform: translateX(-50%);
}
.floral-opening-side {
  position: absolute;
  z-index: 1;
  bottom: clamp(-190px, -9vw, -105px);
  width: clamp(250px, 21vw, 390px);
  height: auto;
  opacity: .5;
  filter: saturate(.86);
}
.floral-opening-bottom-left {
  left: clamp(-105px, -4vw, -46px);
  transform: rotate(-12deg);
}
.floral-opening-bottom-right {
  right: clamp(-105px, -4vw, -46px);
  transform: rotate(12deg) scaleX(-1);
}
.floral-opening-top {
  position: absolute;
  z-index: 1;
  top: clamp(-190px, -9vw, -110px);
  width: clamp(200px, 18vw, 330px);
  height: auto;
  opacity: .34;
  filter: saturate(.82);
}
.floral-opening-top-left {
  left: clamp(-120px, -5vw, -58px);
  transform: rotate(108deg);
}
.floral-opening-top-right {
  right: clamp(-120px, -5vw, -58px);
  transform: rotate(-108deg) scaleX(-1);
}
.opening-invite {
  margin: 6px auto 12px;
  color: #635247;
  font-size: clamp(11px, 1.25vw, 14px);
  font-weight: 600;
  letter-spacing: .27em;
  line-height: 1.7;
}
.opening-kicker { margin: 10px 0 0; }
.names-opening {
  gap: clamp(8px, 2.6vw, 24px);
  margin: 0 0 4px;
  font-size: clamp(82px, 14vw, 142px);
}
.names-opening .ampersand-char { margin: 0 -.02em; }
.opening-rule, .ornament {
  display: flex;
  width: min(190px, 52vw);
  margin: 18px auto;
  align-items: center;
  color: var(--gold);
}
.opening-rule::before, .opening-rule::after, .ornament::before, .ornament::after {
  content: "";
  height: 1px;
  flex: 1;
  background: currentColor;
  opacity: .42;
}
.opening-rule span, .ornament span {
  width: 8px;
  height: 8px;
  margin: 0 14px;
  border: 1px solid currentColor;
  transform: rotate(45deg);
}
.opening-date {
  margin: 0 0 10px;
  color: #8e692f;
  font-size: 14px;
  letter-spacing: .3em;
}
.opening-time {
  margin: 0 0 28px;
  color: #837267;
  font-size: 9px;
  letter-spacing: .24em;
}

.wedding-rings {
  position: relative;
  width: 78px;
  height: 52px;
  margin: 0 auto 14px;
}
.wedding-rings span {
  position: absolute;
  top: 10px;
  width: 39px;
  height: 39px;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
}
.wedding-rings span:first-child { left: 9px; transform: rotate(-7deg); }
.wedding-rings span:nth-child(2) { right: 9px; transform: rotate(7deg); }
.wedding-rings i {
  position: absolute;
  left: 50%;
  top: 1px;
  width: 9px;
  height: 9px;
  border: 1px solid var(--gold);
  background: var(--paper);
  box-shadow: 0 0 0 4px rgba(182,134,63,.08);
  transform: translateX(-50%) rotate(45deg);
}
.wedding-rings-small { transform: scale(.78); margin-bottom: 9px; }

.open-button {
  display: inline-flex;
  min-width: min(330px, 86vw);
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 26px;
  color: #fffaf1;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  background: linear-gradient(135deg, #cba45f, #aa7832);
  box-shadow: 0 18px 46px rgba(128,88,39,.19), inset 0 1px rgba(255,255,255,.38);
  font: 700 10px/1 var(--display);
  letter-spacing: .17em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
}
.open-button:hover { transform: translateY(-2px); box-shadow: 0 22px 52px rgba(128,88,39,.25); }
.open-button:active { transform: scale(.985); }
.open-button i { font-size: 18px; font-style: normal; font-weight: 400; }

.music-button {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  right: 18px;
  z-index: 900;
  display: none;
  width: 46px;
  height: 46px;
  place-items: center;
  color: #fffaf0;
  border: 1px solid rgba(255,255,255,.48);
  border-radius: 50%;
  background: rgba(174,132,66,.92);
  box-shadow: 0 10px 30px rgba(112,78,35,.18);
  backdrop-filter: blur(12px);
  cursor: pointer;
}
.music-button.visible { display: grid; }
.music-bars { display: flex; height: 16px; align-items: center; gap: 3px; }
.music-bars i { width: 2px; height: 12px; background: currentColor; animation: sound 1s ease-in-out infinite; }
.music-bars i:nth-child(2) { height: 16px; animation-delay: -.35s; }
.music-bars i:nth-child(3) { height: 8px; animation-delay: -.7s; }
.music-button.muted .music-bars i { height: 2px; animation: none; }
@keyframes sound { 0%,100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }

.petal-shower {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.opening-petals { z-index: 2; }
.hero-petals { z-index: 3; }
.petal-shower i {
  --drift: 70px;
  --scale: 1;
  position: absolute;
  top: -12%;
  width: 12px;
  height: 8px;
  border-radius: 85% 12% 85% 18%;
  background: linear-gradient(145deg, rgba(246,214,211,.9), rgba(201,130,135,.72));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
  opacity: 0;
  animation: petalFall 11s cubic-bezier(.26,.03,.28,1) infinite both;
}
.petal-shower i:nth-child(1) { left: 8%; --drift: 90px; animation-duration: 11.5s; animation-delay: -8.4s; }
.petal-shower i:nth-child(2) { left: 22%; --drift: -55px; --scale: .72; animation-duration: 13.2s; animation-delay: -2.1s; }
.petal-shower i:nth-child(3) { left: 39%; --drift: 82px; --scale: .88; animation-duration: 10.8s; animation-delay: -5.7s; }
.petal-shower i:nth-child(4) { left: 56%; --drift: -78px; --scale: .65; animation-duration: 12.6s; animation-delay: -10.1s; }
.petal-shower i:nth-child(5) { left: 70%; --drift: 58px; animation-duration: 13.8s; animation-delay: -6.3s; }
.petal-shower i:nth-child(6) { left: 84%; --drift: -86px; --scale: .78; animation-duration: 11.9s; animation-delay: -1.4s; }
.petal-shower i:nth-child(7) { left: 94%; --drift: -54px; --scale: .6; animation-duration: 14.4s; animation-delay: -9.2s; }
@keyframes petalFall {
  0% { opacity: 0; transform: translate3d(0,-8%,0) rotate(0deg) scale(var(--scale)); }
  10% { opacity: .56; }
  86% { opacity: .42; }
  100% { opacity: 0; transform: translate3d(var(--drift),112svh,0) rotate(560deg) scale(var(--scale)); }
}

.hero {
  position: relative;
  display: grid;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  padding: clamp(28px, 4vw, 58px);
  background:
    radial-gradient(circle at 50% 44%, rgba(255,255,255,.98) 0 10%, transparent 43%),
    radial-gradient(circle at 6% 88%, rgba(231,185,182,.16), transparent 27%),
    linear-gradient(180deg, #fbf7f1 0%, #f4e7dc 100%);
}
.hero-glow {
  position: absolute;
  z-index: 0;
  width: min(70vw, 900px);
  height: min(70vw, 900px);
  border: 1px solid rgba(182,134,63,.1);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(182,134,63,.025), 0 0 0 58px rgba(182,134,63,.018);
}
.hero-shell {
  position: relative;
  z-index: 2;
  display: grid;
  width: min(100%, 1180px);
  min-height: min(80svh, 780px);
  grid-template-columns: minmax(0, .8fr) minmax(0, 2fr) minmax(0, .8fr);
  align-items: center;
  padding: clamp(36px, 6vw, 82px);
  border: 1px solid rgba(182,134,63,.38);
  border-radius: 360px 360px 30px 30px / 290px 290px 30px 30px;
  background: rgba(255,250,243,.38);
  box-shadow: inset 0 0 0 12px rgba(255,255,255,.2), 0 30px 90px rgba(105,73,39,.06);
}
.floral-sprig { position: absolute; object-fit: contain; }
.floral-hero-left {
  z-index: 1;
  left: clamp(-74px, -4vw, -28px);
  bottom: -88px;
  width: clamp(205px, 23vw, 330px);
  opacity: .57;
  transform: rotate(-10deg);
}
.floral-hero-right {
  z-index: 1;
  right: clamp(-72px, -4vw, -28px);
  top: -102px;
  width: clamp(175px, 20vw, 285px);
  opacity: .38;
  transform: scaleX(-1) rotate(-12deg);
}
.hero-shell::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(182,134,63,.13);
  border-radius: inherit;
  pointer-events: none;
}
.hero-center { position: relative; z-index: 1; min-width: 0; text-align: center; }
.names-hero {
  gap: clamp(10px, 2.5vw, 28px);
  margin: 26px 0 18px;
  font-size: clamp(90px, 13vw, 160px);
}
.names-hero .ampersand-char { margin: 0 -.02em; }
.hero-side {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  min-height: 190px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--cocoa);
  text-align: center;
}
.hero-side-left { border-right: 1px solid var(--line); }
.hero-side-right { border-left: 1px solid var(--line); }
.hero-side small { color: var(--gold); font-size: 9px; font-weight: 700; letter-spacing: .28em; }
.hero-side strong { margin: 14px 0 8px; font-size: clamp(68px, 7vw, 98px); font-weight: 400; line-height: .86; }
.hero-side strong.hero-clock { font-size: clamp(38px, 4.2vw, 58px); letter-spacing: -.03em; }
.hero-side span { color: var(--cocoa-soft); font-size: 9px; letter-spacing: .22em; }
.scroll-cue {
  position: absolute;
  z-index: 2;
  bottom: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--cocoa-soft);
  text-decoration: none;
}
.scroll-cue > span { width: 1px; height: 26px; background: var(--gold); animation: scrollLine 1.8s ease-in-out infinite; transform-origin: top; }
.scroll-cue small { font-size: 8px; letter-spacing: .22em; }
@keyframes scrollLine { 0%,100% { transform: scaleY(.5); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }

.section-pad { padding: clamp(96px, 12vw, 160px) 22px; }
.section-inner { width: min(100%, 1120px); margin: 0 auto; text-align: center; }
.section-inner.narrow { max-width: 760px; }
.section-inner h2, .section-heading h2 {
  margin: 18px 0 0;
  color: var(--cocoa);
  font-size: clamp(42px, 6.7vw, 76px);
  font-weight: 400;
  letter-spacing: -.035em;
  line-height: 1.04;
}
.invitation {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 34%, rgba(228,194,139,.13), transparent 32%),
    radial-gradient(circle at 9% 84%, rgba(231,185,182,.14), transparent 27%),
    var(--paper);
}
.invitation::before, .invitation::after {
  display: none;
}
.invitation::before { left: -140px; top: -130px; }
.invitation::after { right: -150px; bottom: -160px; }
.invitation .section-inner { position: relative; z-index: 2; }
.floral-invitation-left {
  z-index: 1;
  left: -92px;
  bottom: -124px;
  width: clamp(220px, 25vw, 340px);
  opacity: .38;
  transform: rotate(13deg);
}
.floral-invitation-right {
  z-index: 1;
  right: -105px;
  top: -126px;
  width: clamp(190px, 22vw, 300px);
  opacity: .27;
  transform: scaleX(-1) rotate(9deg);
}
.ampersand-seal { display: block; margin: 0 auto 22px; font-size: 48px; transform: none; }
.lead {
  max-width: 680px;
  margin: 32px auto 0;
  color: #6e5e53;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.85;
}
.names-signature { gap: 5px; margin-top: 38px; font-size: 38px; }
.names-signature .ampersand-char { margin: 0 -.05em; font-size: .58em; }

.countdown-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 20%, rgba(231,185,182,.18), transparent 28%),
    linear-gradient(145deg, #ecdcc8 0%, #faf0e7 50%, #ead7c4 100%);
}
.countdown-section .section-inner { position: relative; z-index: 1; }
.countdown-section h2 { margin-top: 16px; }
.countdown-decor {
  display: none;
}
.countdown-decor::before, .countdown-decor::after {
  content: "";
  position: absolute;
  inset: 28px;
  border: 1px solid rgba(182,134,63,.09);
  border-radius: 50%;
}
.countdown-decor::after { inset: 58px; }
.countdown-decor-left { left: -280px; top: -250px; }
.countdown-decor-right { right: -280px; bottom: -250px; }
.countdown {
  display: grid;
  max-width: 900px;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 60px auto 0;
}
.countdown div {
  padding: 30px 12px 27px;
  border: 1px solid rgba(182,134,63,.25);
  border-radius: 100px 100px 18px 18px;
  background: rgba(255,250,243,.47);
  box-shadow: inset 0 1px rgba(255,255,255,.55);
}
.countdown strong {
  display: block;
  color: #91692f;
  font-size: clamp(42px, 7vw, 72px);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.countdown span {
  display: block;
  margin-top: 13px;
  color: var(--cocoa-soft);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.countdown-date { margin: 28px 0 0; color: var(--cocoa-soft); font-size: 9px; letter-spacing: .24em; }

.details {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 5% 9%, rgba(231,185,182,.13), transparent 24%),
    radial-gradient(circle at 96% 90%, rgba(228,194,139,.12), transparent 25%),
    var(--milk);
}
.section-heading { max-width: 790px; margin: 0 auto; }
.venues-grid { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 720px; margin: 40px auto 0; text-align: left; }
.venue-card {
  position: relative;
  padding: clamp(28px, 4vw, 48px);
  overflow: hidden;
  border: 1px solid rgba(182,134,63,.28);
  background: rgba(255,250,243,.78);
  box-shadow: 0 28px 70px rgba(104,73,39,.08);
}
.venue-card::before {
  content: "";
  position: absolute;
  right: -85px;
  top: -95px;
  width: 210px;
  height: 210px;
  border: 1px solid rgba(182,134,63,.13);
  border-radius: 50%;
  box-shadow: 0 0 0 18px rgba(182,134,63,.025);
}
.venue-title-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 0 28px;
}
.venue-label { margin: 0 0 7px; color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: .28em; }
.venue-card h3 { margin: 0; color: var(--cocoa); font-size: clamp(37px, 5vw, 58px); font-weight: 400; line-height: 1; }
.venue-address { margin: 9px 0 0; color: var(--cocoa-soft); font-size: 14px; }
.map-pin {
  position: relative;
  flex: 0 0 auto;
  width: 38px;
  height: 48px;
  border: 1.5px solid var(--gold);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}
.map-pin i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  transform: translate(-50%,-50%);
}
.map-preview {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
  border: 1px solid rgba(182,134,63,.25);
  background: var(--milk-deep);
}
.map-preview iframe { display: block; width: 100%; height: 100%; border: 0; filter: saturate(.72) sepia(.08) contrast(.96); }
.venue-card > a {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  padding: 17px 20px;
  color: #fffaf1;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 2px;
  background: linear-gradient(135deg, #bd914d, #a87835);
  box-shadow: 0 12px 26px rgba(126,86,39,.12);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .17em;
  text-decoration: none;
}
.venue-card > a i { font-size: 18px; font-style: normal; font-weight: 400; }

.footer {
  position: relative;
  display: flex;
  min-height: 74svh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.72), transparent 40%),
    linear-gradient(145deg, #ead8c8, #fbf4ee 58%, #efd8d2);
  text-align: center;
}
.footer::before {
  content: "";
  position: absolute;
  width: min(78vw, 680px);
  height: min(78vw, 680px);
  border: 1px solid rgba(182,134,63,.2);
  border-radius: 50%;
  box-shadow: 0 0 0 24px rgba(182,134,63,.035), 0 0 0 48px rgba(182,134,63,.022);
}
.floral-footer {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: -26px;
  width: min(1180px, 106vw);
  height: min(36svh, 340px);
  object-fit: contain;
  object-position: center bottom;
  opacity: .6;
  transform: translateX(-50%);
}
.footer-card { position: relative; z-index: 2; }
.names-footer { gap: 8px; margin: 26px 0 8px; font-size: clamp(82px, 15vw, 138px); }
.names-footer .ampersand-char { margin: 0 -.02em; }
.footer-date { margin: 0; color: #936d35; font-size: 12px; letter-spacing: .3em; }
.footer > small { position: absolute; z-index: 2; bottom: 24px; color: rgba(84,67,55,.45); font-size: 9px; letter-spacing: .28em; text-transform: uppercase; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 820px) {
  .hero { padding: 18px; }
  .hero-shell {
    min-height: calc(100svh - 36px);
    grid-template-areas: "center center" "left right";
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 1fr auto;
    padding: 60px 20px 54px;
    border-radius: 190px 190px 24px 24px / 150px 150px 24px 24px;
  }
  .hero-center { grid-area: center; align-self: center; }
  .hero-side-left { grid-area: left; border-right: 1px solid var(--line); border-top: 1px solid var(--line); }
  .hero-side-right { grid-area: right; border-left: 0; border-top: 1px solid var(--line); }
  .hero-side { min-height: 110px; }
  .hero-side strong { margin: 10px 0 5px; font-size: 48px; }
  .hero-side strong.hero-clock { font-size: 32px; }
}

@media (max-width: 600px) {
  .opening-frame {
    inset: 10px;
    border-radius: 170px 170px 18px 18px / 108px 108px 18px 18px;
  }
  .frame-corner { width: 28px; height: 28px; }
  .opening-content { width: 96vw; padding: 24px 16px 28px; }
  .floral-opening { bottom: 0; width: 128vw; height: 28svh; opacity: .64; }
  .floral-opening-side { bottom: -118px; width: 205px; opacity: .42; }
  .floral-opening-bottom-left { left: -82px; }
  .floral-opening-bottom-right { right: -82px; }
  .floral-opening-top { top: -112px; width: 170px; opacity: .27; }
  .floral-opening-top-left { left: -76px; }
  .floral-opening-top-right { right: -76px; }
  .wedding-rings { transform: scale(.88); margin-bottom: 4px; }
  .opening-invite { max-width: 320px; font-size: 10px; letter-spacing: .19em; }
  .opening-kicker { margin-top: 8px; }
  .names-opening { gap: 8px; margin: 0 0 4px; font-size: clamp(72px, 23vw, 96px); }
  .names-opening .ampersand-char { margin: 0 -.04em; }
  .opening-rule { margin: 12px auto; }
  .opening-date { font-size: 12px; }
  .opening-time { margin-bottom: 24px; font-size: 8px; }
  .open-button { min-width: min(305px, 86vw); padding: 17px 22px; }
  .hero-shell { padding-top: 50px; }
  .floral-hero-left { left: -78px; bottom: -64px; width: 225px; opacity: .47; }
  .floral-hero-right { right: -76px; top: -74px; width: 180px; opacity: .28; }
  .names-hero { gap: 7px; margin: 18px 0 15px; font-size: clamp(70px, 23vw, 96px); }
  .names-hero .ampersand-char { margin: 0 -.04em; }
  .section-pad { padding: 92px 18px; }
  .section-inner h2, .section-heading h2 { font-size: clamp(39px, 12vw, 56px); }
  .lead { font-size: 17px; line-height: 1.75; }
  .floral-invitation-left { left: -110px; bottom: -92px; width: 250px; opacity: .3; }
  .floral-invitation-right { display: none; }
  .countdown { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 44px; }
  .countdown div { padding: 26px 10px 23px; }
  .countdown strong { font-size: 45px; }
  .venues-grid { margin-top: 42px; }
  .venue-card { padding: 26px 20px; }
  .venue-card h3 { font-size: clamp(28px, 8vw, 44px); }
  .venue-title-row { gap: 17px; }
  .map-preview { height: 205px; }
  .names-footer { font-size: 78px; }
  .names-footer .ampersand-char { margin: 0 -.04em; }
  .floral-footer { bottom: -10px; width: 132vw; height: 28svh; opacity: .5; }
}

/* Mobile phones held horizontally need a compact, single-row hero. */
@media (max-width: 820px) and (max-height: 520px) and (orientation: landscape) {
  .opening-content { padding-top: 10px; padding-bottom: 14px; }
  .floral-opening { width: 112vw; height: 22svh; opacity: .46; }
  .floral-opening-top, .floral-opening-side { display: none; }
  .hero {
    min-height: 100svh;
    padding: 10px 10px 34px;
  }
  .hero-glow {
    width: min(62vw, 420px);
    height: min(62vw, 420px);
  }
  .hero-shell {
    width: min(100%, 760px);
    min-height: calc(100svh - 44px);
    grid-template-areas: "left center right";
    grid-template-columns: minmax(0, .865fr) minmax(0, 1.55fr) minmax(0, .865fr);
    grid-template-rows: 1fr;
    padding: 18px 20px;
    border-radius: 150px 150px 18px 18px / 100px 100px 18px 18px;
  }
  .hero-center { grid-area: center; }
  .hero-side-left {
    grid-area: left;
    border-top: 0;
    border-right: 1px solid var(--line);
  }
  .hero-side-right {
    grid-area: right;
    border-top: 0;
    border-left: 1px solid var(--line);
  }
  .hero-side { min-height: 104px; }
  .hero-side small { font-size: 7px; letter-spacing: .2em; }
  .hero-side strong { margin: 8px 0 4px; font-size: 44px; }
  .hero-side strong.hero-clock { font-size: 28px; }
  .hero-side span { font-size: 7px; letter-spacing: .16em; }
  .hero-center .wedding-rings { margin-bottom: 0; transform: scale(.68); }
  .hero-center .eyebrow { font-size: 7px; letter-spacing: .16em; }
  .floral-hero-left { left: -44px; bottom: -92px; width: 175px; opacity: .34; }
  .floral-hero-right { display: none; }
  .names-hero {
    gap: 6px;
    margin: 8px 0 0;
    font-size: clamp(56px, 12vw, 72px);
  }
  .scroll-cue {
    bottom: 6px;
    flex-direction: row;
    gap: 8px;
  }
  .scroll-cue > span { width: 18px; height: 1px; }
  .scroll-cue small { font-size: 7px; letter-spacing: .18em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .petal-shower { display: none; }
}

/* Map choices match the invitation palette. */
.guest-choice { position: relative; margin-top: 24px; text-align: left; }
.guest-choice summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 48px; padding: 15px 20px; border: 1px solid var(--gold);
  border-radius: 2px; color: #fffaf1;
  background: linear-gradient(135deg, #bd914d, #a87835);
  font-size: 14px; font-weight: 700; letter-spacing: .06em;
  cursor: pointer; list-style: none;
}
.guest-choice summary::-webkit-details-marker { display: none; }
.guest-choice summary span { font-size: 20px; transition: transform .2s; }
.guest-choice[open] summary span { transform: rotate(45deg); }
.guest-choice-options {
  display: grid; gap: 8px; padding: 10px;
  border: 1px solid var(--line); border-top: 0; background: var(--milk);
}
.guest-choice-options a {
  display: flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px; color: var(--cocoa);
  border: 1px solid var(--line); text-decoration: none;
  font-size: 14px; line-height: 1.4; text-align: center;
}
.guest-choice-options a:hover { background: var(--milk-deep); }
.guest-choice summary:focus-visible, .guest-choice-options a:focus-visible {
  outline: 2px solid var(--cocoa); outline-offset: 3px;
}

/* Keep the longer keepsake message readable on small screens. */
.hero-center .eyebrow { max-width: 24rem; margin-inline: auto; line-height: 1.7; text-wrap: balance; }
.countdown strong { font-variant-numeric: tabular-nums; }