:root {
  --blush: #F9DDE0; /* Page background, rose-petal paper */
  --blush-deep: #F4CDD3; /* Alternate band, deeper blush */
  --paper: #FFF6F5; /* Invitation card and form card */
  --ink: #3A1724; /* Main text, deep berry */
  --muted: #6E4351; /* Secondary text, dusky rose (AA on blush) */
  --sage: #C27A8C; /* Botanical line work in dusty rose, decorative only */
  --sage-ink: #8C2F4C; /* Rose-berry for text and links (AA on blush) */
  --sage-dark: #5E1F33; /* Venue band background, deep wine rose */
  --gold: #B06A63; /* Rose-gold rules and borders, decorative only */
  --gold-ink: #84453A; /* Rose-gold for small text (AA on blush) */
  --envelope: #F0BCC5; /* Envelope paper */
  --envelope-dark: #E2A2AF; /* Envelope inside and flap shadow */
  --seal: #9E2747; /* Wax seal */
  --line: #E9B8C2; /* Hairline dividers */
  --font-display: 'Italiana', 'Didot', 'Bodoni 72', Georgia, serif; /* Display serif */
  --font-body: 'Jost', 'Futura', 'Avenir Next', system-ui, sans-serif; /* Body sans */
  --gutter: clamp(1rem, 4vw, 3.5rem); /* Page side margin */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 1rem; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--blush);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--font-body);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
/* Fine paper grain over the whole page */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .33;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .2 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='URL(%23n)'/%3E%3C/svg%3E");
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ol, figure { margin: 0; }
ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
::selection { background: var(--sage-dark); color: var(--blush); }
:focus-visible { outline: 2px solid var(--sage-ink); outline-offset: 4px; border-radius: 2px; }
.venue :focus-visible { outline-color: #F7C6D0; }
.footer :focus-visible { outline-color: #F7C6D0; }
h1, h2 { font-family: var(--font-display); font-weight: 400; line-height: .92; letter-spacing: -.01em; }
h2 { font-size: clamp(3rem, 12vw, 7.2rem); }
h2 em, .venue-top em { font-style: normal; color: var(--sage-ink); }
h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.75rem; line-height: 1.1; }
.eyebrow, .section-label, .header-date, .stay-meta, .scene-caption, .hero-dateline, .story-art-caption, .venue-art-note, .form-heading, .footer-bottom {
  font: 500 .72rem/1.5 var(--font-body);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.skip-link {
  position: absolute; left: 1rem; top: 1rem; z-index: 100;
  padding: .75rem 1.1rem; background: var(--ink); color: var(--blush);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.text-link {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .35rem 0; border: 0; background: none; cursor: pointer;
  font: 500 .78rem/1.4 var(--font-body); letter-spacing: .16em; text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  transition: gap .3s ease, color .3s ease;
}
.text-link:hover { gap: 1rem; color: var(--sage-ink); }
.light-link:hover { color: var(--blush); }

/* Header */
.header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem var(--gutter);
  border-bottom: 1px solid var(--line);
}
.monogram {
  font: 400 1.9rem/1 var(--font-display);
  letter-spacing: .02em;
}
.monogram span { color: var(--gold); margin: 0 .08em; font-size: .8em; }
.header nav { display: flex; gap: clamp(.9rem, 3vw, 2.4rem); font: 500 .8rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.header nav a { padding: .6rem 0; position: relative; }
.header nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: .3rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.header nav a:hover::after { transform: scaleX(1); }
.header nav a:not(.nav-rsvp) { display: none; }
.nav-rsvp { color: var(--sage-ink); }
.header nav .nav-rsvp { padding: .6rem 1rem; border: 1px solid var(--gold-ink); color: var(--ink); }
.header-date { display: none; color: var(--muted); font-size: .8rem; }

/* Hero */
.hero {
  position: relative;
  display: grid;
  gap: 1.5rem;
  padding: clamp(2rem, 6vw, 4.5rem) var(--gutter) 0;
  overflow: clip;
}
.hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 1.6rem; }
.hero .eyebrow { color: var(--gold-ink); display: flex; align-items: center; gap: .6rem; }
.tiny-star { color: var(--gold); font-size: .9rem; letter-spacing: 0; }
.hero h1 { font-size: clamp(4.4rem, 24vw, 14rem); line-height: .8; margin-left: -.04em; }
.hero h1 > span { display: block; }
.name-second { padding-left: .55em; }
.amp { color: var(--gold); font-size: .62em; margin-right: .08em; vertical-align: .14em; }
.hero-bottom { display: flex; flex-direction: column; gap: 1.2rem; align-items: flex-start; }
.hero-bottom p { font: 400 1.35rem/1.35 var(--font-display); max-width: 18ch; }

.invitation-scene {
  position: relative;
  width: min(86%, 30rem);
  margin-inline: auto;
  padding-top: 1rem;
}
.hero-botanical {
  position: absolute;
  width: 74%;
  height: auto;
  right: -22%;
  top: -4%;
  opacity: .75;
  transform: rotate(14deg);
  pointer-events: none;
}
.scene-caption { position: relative; text-align: center; color: var(--gold-ink); margin-bottom: .5rem; }
.scene-caption::before, .scene-caption::after { content: ''; display: inline-block; width: 1.8rem; height: 1px; background: var(--gold); vertical-align: middle; margin: 0 .7rem; }

/* Envelope: final (open) state is the default so the card is readable without JS */
.envelope {
  position: relative;
  width: 100%;
  aspect-ratio: 10 / 7;
  margin-top: 56%;
  container-type: inline-size;
  perspective: 1600px;
}
.envelope-back {
  position: absolute; inset: 0; z-index: 1;
  background:
    repeating-linear-gradient(135deg, transparent 0 9px, rgba(194, 122, 140, .2) 9px 10px),
    linear-gradient(var(--envelope-dark), var(--envelope));
  border-radius: 3px;
  box-shadow: 0 1.8rem 3rem -1.6rem rgba(94, 31, 51, .45), 0 2px 4px rgba(94, 31, 51, .12);
}
.envelope-front {
  position: absolute; inset: 0; z-index: 3;
  clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(to top right, transparent calc(50% - .5px), rgba(140, 47, 76, .18) 50%, transparent calc(50% + .5px)) left bottom / 50% 100% no-repeat,
    linear-gradient(to top left, transparent calc(50% - .5px), rgba(140, 47, 76, .18) 50%, transparent calc(50% + .5px)) right bottom / 50% 100% no-repeat,
    linear-gradient(170deg, var(--blush-deep), var(--envelope));
  border-radius: 3px;
}
.envelope-flap {
  position: absolute; left: 0; top: 0; width: 100%; height: 58%; z-index: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(var(--envelope), var(--envelope-dark));
  transform-origin: 50% 0;
  transform: rotateX(180deg);
  transition: transform .6s cubic-bezier(.5, 0, .2, 1), z-index 0s .3s;
}
.wax-seal {
  position: absolute; z-index: 5; left: 50%; top: 58%;
  width: 17cqi; height: 17cqi; margin: -8.5cqi 0 0 -8.5cqi;
  display: grid; place-items: center;
  border-radius: 48% 52% 50% 46%;
  background: radial-gradient(circle at 35% 30%, #C9506F, var(--seal) 55%, #6B1530);
  box-shadow: 0 0 0 .6cqi rgba(158, 39, 71, .35), 0 .8cqi 1.4cqi rgba(60, 12, 28, .35);
  color: #FAD6DF;
  font: 400 6.5cqi/1 var(--font-display);
  letter-spacing: .04em;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .3s ease, transform .3s ease;
}
.invitation-card {
  position: absolute; z-index: 6;
  left: 10%; width: 80%;
  top: calc(50% - 52.5cqi);
  aspect-ratio: 80 / 105;
  transform: translateY(-32%);
  filter: drop-shadow(0 1.4cqi 2cqi rgba(94, 31, 51, .22));
}
.card-border {
  position: relative;
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3.2cqi;
  padding: 9cqi 7cqi;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 255, 255, .9), transparent 60%),
    var(--paper);
  clip-path: polygon(0.0% 0.32%,2.5% 0.39%,5.0% 0.65%,7.5% 0.33%,10.0% 0.36%,12.5% 0.41%,15.0% 0.13%,17.5% 0.36%,20.0% 0.44%,22.5% 0.56%,25.0% 0.07%,27.5% 0.21%,30.0% 0.06%,32.5% 0.57%,35.0% 0.49%,37.5% 0.03%,40.0% 0.69%,42.5% 0.68%,45.0% 0.46%,47.5% 0.43%,50.0% 0.11%,52.5% 0.01%,55.0% 0.37%,57.5% 0.04%,60.0% 0.13%,62.5% 0.17%,65.0% 0.02%,67.5% 0.32%,70.0% 0.31%,72.5% 0.59%,75.0% 0.36%,77.5% 0.45%,80.0% 0.35%,82.5% 0.46%,85.0% 0.32%,87.5% 0.19%,90.0% 0.70%,92.5% 0.70%,95.0% 0.59%,97.5% 0.50%,99.8% 0.00%,99.9% 2.50%,99.8% 5.00%,100.0% 7.50%,99.6% 10.00%,99.8% 12.50%,99.5% 15.00%,99.8% 17.50%,99.5% 20.00%,99.5% 22.50%,100.0% 25.00%,99.9% 27.50%,99.5% 30.00%,99.7% 32.50%,99.5% 35.00%,99.8% 37.50%,100.0% 40.00%,99.6% 42.50%,99.6% 45.00%,99.8% 47.50%,100.0% 50.00%,99.8% 52.50%,99.5% 55.00%,99.6% 57.50%,99.9% 60.00%,99.9% 62.50%,99.9% 65.00%,100.0% 67.50%,99.6% 70.00%,99.9% 72.50%,99.7% 75.00%,99.7% 77.50%,99.9% 80.00%,99.6% 82.50%,99.9% 85.00%,99.6% 87.50%,99.9% 90.00%,99.8% 92.50%,99.9% 95.00%,99.8% 97.50%,100.0% 99.32%,97.5% 99.44%,95.0% 99.79%,92.5% 99.38%,90.0% 99.85%,87.5% 99.72%,85.0% 99.40%,82.5% 99.55%,80.0% 99.93%,77.5% 99.31%,75.0% 99.85%,72.5% 99.82%,70.0% 99.46%,67.5% 99.77%,65.0% 99.79%,62.5% 99.95%,60.0% 99.94%,57.5% 99.59%,55.0% 99.83%,52.5% 99.58%,50.0% 99.74%,47.5% 99.68%,45.0% 99.33%,42.5% 99.66%,40.0% 99.60%,37.5% 99.39%,35.0% 99.87%,32.5% 99.89%,30.0% 99.36%,27.5% 99.43%,25.0% 99.83%,22.5% 99.87%,20.0% 99.48%,17.5% 99.34%,15.0% 99.86%,12.5% 99.33%,10.0% 99.38%,7.5% 99.58%,5.0% 99.70%,2.5% 99.93%,0.0% 100.00%,0.5% 97.50%,0.1% 95.00%,0.4% 92.50%,0.1% 90.00%,0.5% 87.50%,0.3% 85.00%,0.2% 82.50%,0.1% 80.00%,0.4% 77.50%,0.0% 75.00%,0.1% 72.50%,0.3% 70.00%,0.5% 67.50%,0.3% 65.00%,0.2% 62.50%,0.5% 60.00%,0.1% 57.50%,0.0% 55.00%,0.2% 52.50%,0.2% 50.00%,0.0% 47.50%,0.1% 45.00%,0.2% 42.50%,0.3% 40.00%,0.1% 37.50%,0.2% 35.00%,0.5% 32.50%,0.5% 30.00%,0.4% 27.50%,0.4% 25.00%,0.3% 22.50%,0.1% 20.00%,0.0% 17.50%,0.0% 15.00%,0.5% 12.50%,0.4% 10.00%,0.5% 7.50%,0.0% 5.00%,0.4% 2.50%);
}
.card-border::before {
  content: '';
  position: absolute; inset: 3.6cqi;
  border: 1px solid var(--gold);
  outline: 1px solid rgba(196, 137, 122, .45);
  outline-offset: -1.6cqi;
  pointer-events: none;
}
.card-sprig {
  position: absolute; width: 12cqi; height: auto; left: 50%; bottom: -1.5cqi;
  transform: translateX(-50%) rotate(-90deg);
  opacity: .6;
}
.card-border .eyebrow { font-size: max(11px, 2.3cqi); letter-spacing: .26em; color: var(--gold-ink); }
.invite-names {
  font: 400 8.6cqi/1.02 var(--font-display);
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .8), 0 -1px 0 rgba(58, 23, 36, .08);
}
.invite-names span { color: var(--gold); font-size: .7em; }
.invite-text { font: 400 max(12px, 2.9cqi)/1.5 var(--font-body); color: var(--muted); }
.invite-date {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 3cqi;
  font: 500 max(11px, 2.2cqi)/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase;
  color: var(--sage-ink);
}
.invite-date span { border-block: 1px solid var(--line); padding: 1.4cqi 0; }
.invite-date strong { font: 400 11cqi/1 var(--font-display); color: var(--ink); }
.invite-place { font: 400 max(11px, 2.6cqi)/1.6 var(--font-body); color: var(--muted); padding-bottom: 4cqi; }

/* JS enhanced: start sealed, then open */
.js .envelope:not(.is-open) .envelope-flap { transform: rotateX(0); z-index: 4; transition: transform .6s cubic-bezier(.5, 0, .2, 1) .9s, z-index 0s 1.2s; }
.js .envelope:not(.is-open) .wax-seal { opacity: 1; transform: none; transition: opacity .4s ease 1.3s, transform .4s ease 1.3s; }
.js .envelope:not(.is-open) .invitation-card { transform: translateY(0) scale(.6); z-index: 2; }
/* First paint: already sealed, no transitions, so guests see the seal before it opens */
.js .envelope.is-sealed *, .js .envelope.is-sealed { transition: none !important; }
@media (prefers-reduced-motion: no-preference) {
  .js .envelope.is-open .invitation-card { animation: card-out 1.6s cubic-bezier(.45, 0, .2, 1) .4s both; }
  .js .envelope.is-closing .invitation-card { animation: card-in 1.1s cubic-bezier(.45, 0, .2, 1) both; }
}
@keyframes card-out {
  0% { transform: translateY(0) scale(.6); z-index: 2; }
  48% { transform: translateY(-70%) scale(.64); z-index: 2; }
  50% { z-index: 6; }
  100% { transform: translateY(-32%) scale(1); z-index: 6; }
}
@keyframes card-in {
  0% { transform: translateY(-32%) scale(1); z-index: 6; }
  50% { z-index: 6; }
  52% { transform: translateY(-70%) scale(.64); z-index: 2; }
  100% { transform: translateY(0) scale(.6); z-index: 2; }
}
.envelope-control {
  display: flex; margin: 1.6rem auto 0; color: var(--sage-ink);
}
.envelope-control[hidden] { display: none; }
.envelope-note { text-align: center; color: var(--muted); margin-top: 1rem; }

.hero-dateline {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.2rem;
  margin-inline: calc(var(--gutter) * -1);
  padding: 1.1rem var(--gutter);
  border-block: 1px solid var(--line);
  color: var(--muted); text-align: center;
}
.dateline-star { color: var(--gold); }

/* Shared section rhythm */
.section-pad { padding: clamp(4.5rem, 12vw, 10rem) var(--gutter); position: relative; }
.section-label {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-bottom: 1rem; margin-bottom: clamp(2.5rem, 7vw, 5.5rem);
  border-bottom: 1px solid var(--line); color: var(--gold-ink);
}
.section-label { align-items: baseline; }
.section-label span:last-child { text-align: right; margin-left: auto; }
/* Phones: keep each label to one line; the right-hand note repeats facts shown in the section */
@media (max-width: 639px) { .section-label { justify-content: flex-start; } .section-label > span:nth-child(3) { display: none; } }
/* Roman numerals in Italiana mark each section, like an order of service */
.section-label .numeral { font: 400 clamp(2.2rem, 6vw, 3.2rem)/.8 var(--font-display); letter-spacing: .02em; text-transform: none; color: var(--gold-ink); min-width: 2.4ch; }
.venue .section-label .numeral { color: #F6C9D1; }

/* Story */
.story-grid { display: grid; gap: 3.5rem; }
.story-art { position: relative; justify-self: center; width: min(100%, 24rem); }
.story-arch {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 50% 50% 0 0 / 38% 38% 0 0;
  background: radial-gradient(120% 80% at 50% 100%, #F6C6CF, var(--paper) 70%);
  border: 1px solid var(--gold);
  overflow: hidden;
  display: grid; place-items: center;
}
.story-arch::before {
  content: ''; position: absolute; inset: .7rem;
  border: 1px solid rgba(196, 137, 122, .5);
  border-radius: inherit;
}
.story-arch img { position: absolute; width: 78%; height: auto; bottom: -24%; left: 11%; opacity: .9; }
.arch-inscription {
  position: relative; z-index: 1; margin-top: -62%;
  font: 400 clamp(2rem, 8vw, 2.8rem)/1 var(--font-display); text-align: center; color: var(--ink);
  padding: .6rem 1rem;
}
.story-art-caption { display: block; text-align: center; margin-top: 1.2rem; color: var(--muted); }
.story-copy { display: grid; gap: 1.4rem; max-width: 34rem; }
.story-copy h2 { margin-bottom: 1rem; }
.story-copy p { color: var(--muted); font-size: 1.06rem; }
.story-copy .story-signoff { color: var(--ink); font: 400 1.6rem/1.3 var(--font-display); }
.signature { font: 400 2.4rem/1 var(--font-display); color: var(--sage-ink); transform: rotate(-4deg); transform-origin: left; display: inline-block; }

/* Venue band */
.venue { background: var(--sage-dark); color: var(--blush); overflow: clip; }
.venue .section-label { border-color: rgba(249, 221, 224, .25); color: #F6C9D1; }
.venue-top { display: grid; gap: 1.5rem; }
.venue-top em { color: #F6C9D1; }
.venue-top p { color: #F3DCE1; font: 400 1.3rem/1.4 var(--font-display); }
.venue-art { position: relative; margin: clamp(2.5rem, 7vw, 5rem) 0; }
.glasshouse { width: 100%; height: auto; stroke: #F5D3DA; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.glasshouse .building-ground { stroke: #F6C9D1; }
.glasshouse .building-detail { stroke: #D99AAA; stroke-width: 1; }
.js .glasshouse path { stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .js .venue-art.is-pending .glasshouse path { stroke-dashoffset: 1; }
  .js .venue-art .glasshouse path { transition: stroke-dashoffset 2.6s cubic-bezier(.4, 0, .2, 1); }
  .js .venue-art .glasshouse path:nth-child(2) { transition-delay: .3s; }
  .js .venue-art .glasshouse path:nth-child(3) { transition-delay: .7s; }
  .js .venue-art .glasshouse path:nth-child(4) { transition-delay: 1s; }
  .js .venue-art .glasshouse path:nth-child(5) { transition-delay: 1.3s; }
}
.venue-art-note { position: absolute; right: 0; top: 0; color: #F6C9D1; text-align: right; }
.venue-bottom { display: grid; gap: 1.8rem; padding-top: 2rem; border-top: 1px solid rgba(249, 221, 224, .25); }
.venue-bottom h3 { font-size: 2.2rem; margin-bottom: .4rem; }
.venue-bottom p { color: #F3DCE1; }
.venue-bottom .text-link { justify-self: start; color: #F6C9D1; }

/* Schedule */
.schedule-grid { display: grid; gap: 3rem; }
.schedule-intro { display: grid; gap: 1.5rem; align-content: start; }
.schedule-intro p { color: var(--muted); }
.schedule-flower svg { width: 7rem; height: auto; stroke: var(--sage); stroke-width: 1.4; }
.timeline { border-top: 1px solid var(--ink); counter-reset: t; }
.timeline li {
  display: grid; grid-template-columns: 6.8rem 1fr; gap: .4rem 1.2rem;
  padding: 1.6rem 0; border-bottom: 1px solid var(--line);
  position: relative;
}
.timeline .time { font: 400 1.9rem/1 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.timeline .time small { font: 500 .75rem/1 var(--font-body); letter-spacing: .16em; color: var(--gold-ink); }
.timeline h3 { margin-bottom: .35rem; padding-right: 2.2rem; }
.timeline p { color: var(--muted); max-width: 36ch; }
.timeline-number { position: absolute; right: 0; top: 1.5rem; font: 400 1.6rem/1 var(--font-display); letter-spacing: .04em; color: var(--gold-ink); }
.timeline li::before {
  content: ''; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--sage-ink);
  transition: width .6s ease;
}
.timeline li:hover::before { width: 100%; }

/* Travel */
.travel { background: var(--blush-deep); }
.travel-head { display: grid; gap: 1.5rem; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.travel-head p { color: var(--muted); }
.stay-list { display: grid; gap: 1.2rem; }
.stay-list article {
  display: grid; gap: 1.2rem; align-content: space-between;
  padding: 1.8rem; background: var(--paper);
  border: 1px solid var(--line);
  position: relative;
}
.stay-list article::after { content: ''; position: absolute; inset: .5rem; border: 1px solid rgba(196, 137, 122, .35); pointer-events: none; }
.stay-number { font: 400 4.5rem/.8 var(--font-display); color: var(--gold-ink); }
.stay-list h3 { font-size: 2rem; margin-bottom: .4rem; }
.stay-list p { color: var(--muted); }
.stay-meta { display: block; margin-top: 1rem; color: var(--sage-ink); font-variant-numeric: tabular-nums; }
.stay-list .text-link { justify-self: start; position: relative; z-index: 1; }
.travel-directions { display: grid; gap: 1.8rem; margin-top: clamp(3rem, 7vw, 5rem); padding-top: 2rem; border-top: 1px solid var(--ink); }
.direction-icon { font: 400 3.5rem/1 var(--font-display); color: var(--sage-ink); }
.travel-directions h3 { margin-bottom: .4rem; }
.travel-directions p { color: var(--muted); }

/* Notes / FAQ */
.notes-grid { display: grid; gap: 3rem; }
.notes-grid > div:first-child { display: grid; gap: 1.5rem; align-content: start; }
.notes-grid > div:first-child p { color: var(--muted); }
.notes-grid a { color: var(--sage-ink); border-bottom: 1px solid currentColor; overflow-wrap: anywhere; }
.little-heart { font: 400 4rem/1 var(--font-display); color: var(--gold); }
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.4rem 0; cursor: pointer; list-style: none;
  font: 400 clamp(1.4rem, 4.5vw, 2rem)/1.15 var(--font-display);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary span { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 1px solid var(--gold); border-radius: 50%; font: 300 1.2rem/1 var(--font-body); color: var(--gold-ink); transition: transform .35s ease, background .35s ease; }
.faq details[open] summary span { transform: rotate(45deg); background: var(--paper); }
.faq summary:hover { color: var(--sage-ink); }
.faq details p { padding: 0 3.4rem 1.6rem 0; color: var(--muted); }

/* RSVP */
.rsvp { overflow: clip; }
.rsvp-grid { display: grid; gap: 3rem; }
.rsvp-intro { position: relative; display: grid; gap: 1.4rem; align-content: start; }
.rsvp-intro .eyebrow { color: var(--gold-ink); }
.rsvp-intro h2 { font-size: clamp(3.6rem, 16vw, 9rem); }
.rsvp-intro > p:last-of-type { color: var(--muted); font: 400 1.35rem/1.4 var(--font-display); }
.rsvp-intro img { width: 9rem; height: auto; opacity: .8; transform: rotate(-12deg); }
.rsvp-card {
  position: relative;
  background: var(--paper);
  padding: clamp(1.6rem, 5vw, 3.4rem);
  box-shadow: 0 2rem 3rem -2rem rgba(94, 31, 51, .35);
  clip-path: polygon(0.0% 0.32%,2.5% 0.39%,5.0% 0.65%,7.5% 0.33%,10.0% 0.36%,12.5% 0.41%,15.0% 0.13%,17.5% 0.36%,20.0% 0.44%,22.5% 0.56%,25.0% 0.07%,27.5% 0.21%,30.0% 0.06%,32.5% 0.57%,35.0% 0.49%,37.5% 0.03%,40.0% 0.69%,42.5% 0.68%,45.0% 0.46%,47.5% 0.43%,50.0% 0.11%,52.5% 0.01%,55.0% 0.37%,57.5% 0.04%,60.0% 0.13%,62.5% 0.17%,65.0% 0.02%,67.5% 0.32%,70.0% 0.31%,72.5% 0.59%,75.0% 0.36%,77.5% 0.45%,80.0% 0.35%,82.5% 0.46%,85.0% 0.32%,87.5% 0.19%,90.0% 0.70%,92.5% 0.70%,95.0% 0.59%,97.5% 0.50%,99.8% 0.00%,99.9% 2.50%,99.8% 5.00%,100.0% 7.50%,99.6% 10.00%,99.8% 12.50%,99.5% 15.00%,99.8% 17.50%,99.5% 20.00%,99.5% 22.50%,100.0% 25.00%,99.9% 27.50%,99.5% 30.00%,99.7% 32.50%,99.5% 35.00%,99.8% 37.50%,100.0% 40.00%,99.6% 42.50%,99.6% 45.00%,99.8% 47.50%,100.0% 50.00%,99.8% 52.50%,99.5% 55.00%,99.6% 57.50%,99.9% 60.00%,99.9% 62.50%,99.9% 65.00%,100.0% 67.50%,99.6% 70.00%,99.9% 72.50%,99.7% 75.00%,99.7% 77.50%,99.9% 80.00%,99.6% 82.50%,99.9% 85.00%,99.6% 87.50%,99.9% 90.00%,99.8% 92.50%,99.9% 95.00%,99.8% 97.50%,100.0% 99.32%,97.5% 99.44%,95.0% 99.79%,92.5% 99.38%,90.0% 99.85%,87.5% 99.72%,85.0% 99.40%,82.5% 99.55%,80.0% 99.93%,77.5% 99.31%,75.0% 99.85%,72.5% 99.82%,70.0% 99.46%,67.5% 99.77%,65.0% 99.79%,62.5% 99.95%,60.0% 99.94%,57.5% 99.59%,55.0% 99.83%,52.5% 99.58%,50.0% 99.74%,47.5% 99.68%,45.0% 99.33%,42.5% 99.66%,40.0% 99.60%,37.5% 99.39%,35.0% 99.87%,32.5% 99.89%,30.0% 99.36%,27.5% 99.43%,25.0% 99.83%,22.5% 99.87%,20.0% 99.48%,17.5% 99.34%,15.0% 99.86%,12.5% 99.33%,10.0% 99.38%,7.5% 99.58%,5.0% 99.70%,2.5% 99.93%,0.0% 100.00%,0.5% 97.50%,0.1% 95.00%,0.4% 92.50%,0.1% 90.00%,0.5% 87.50%,0.3% 85.00%,0.2% 82.50%,0.1% 80.00%,0.4% 77.50%,0.0% 75.00%,0.1% 72.50%,0.3% 70.00%,0.5% 67.50%,0.3% 65.00%,0.2% 62.50%,0.5% 60.00%,0.1% 57.50%,0.0% 55.00%,0.2% 52.50%,0.2% 50.00%,0.0% 47.50%,0.1% 45.00%,0.2% 42.50%,0.3% 40.00%,0.1% 37.50%,0.2% 35.00%,0.5% 32.50%,0.5% 30.00%,0.4% 27.50%,0.4% 25.00%,0.3% 22.50%,0.1% 20.00%,0.0% 17.50%,0.0% 15.00%,0.5% 12.50%,0.4% 10.00%,0.5% 7.50%,0.0% 5.00%,0.4% 2.50%);
}
.rsvp-card::before { content: ''; position: absolute; inset: .8rem; border: 1px solid rgba(196, 137, 122, .55); pointer-events: none; }
form { position: relative; display: grid; gap: 1.6rem; }
.form-heading { color: var(--gold-ink); text-align: center; }
.form-fields { display: grid; gap: 1.6rem; }
label { display: grid; gap: .5rem; font: 500 .74rem/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.optional { color: var(--muted); letter-spacing: .06em; text-transform: none; font-weight: 400; }
input[type="text"], input[type="email"], textarea {
  width: 100%;
  border: 0; border-bottom: 1px solid #B98A96; border-radius: 0;
  background: transparent; padding: .55rem 0;
  font: 400 1.35rem/1.3 var(--font-display); letter-spacing: 0; text-transform: none;
  transition: border-color .3s ease;
}
textarea { resize: vertical; min-height: 3.5rem; }
input::placeholder, textarea::placeholder { color: #8F6672; }
input:focus-visible, textarea:focus-visible { outline: none; border-bottom: 2px solid var(--sage-ink); }
fieldset { border: 0; padding: 0; margin: 0; }
legend { padding: 0; margin-bottom: .8rem; font: 500 .74rem/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.attendance-options { display: grid; gap: .7rem; }
.attendance-options label { position: relative; cursor: pointer; }
.attendance-options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.attendance-options span {
  display: flex; align-items: center; gap: .8rem;
  padding: .9rem 1rem; border: 1px solid var(--line);
  font: 400 1.25rem/1.2 var(--font-display); letter-spacing: 0; text-transform: none;
  transition: border-color .25s ease, background .25s ease;
}
.attendance-options span::before { content: ''; width: .9rem; height: .9rem; border-radius: 50%; border: 1px solid var(--gold-ink); flex: none; transition: box-shadow .25s ease, background .25s ease; }
.attendance-options input:checked + span { border-color: var(--sage-ink); background: #FBE3E7; }
.attendance-options input:checked + span::before { background: var(--sage-ink); box-shadow: inset 0 0 0 3px var(--paper); border-color: var(--sage-ink); }
.attendance-options input:focus-visible + span { outline: 2px solid var(--sage-ink); outline-offset: 3px; }
.submit-button {
  justify-self: stretch;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.15rem 1.4rem; border: 0; cursor: pointer;
  background: var(--sage-dark); color: var(--blush);
  font: 500 .8rem/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase;
  transition: background .3s ease, padding .3s ease;
}
.submit-button:hover { background: var(--ink); padding-inline: 1.8rem; }
/* RSVP fallback: a printed reply card with an email button until a form plugin fills the slot */
.rsvp-reply { position: relative; display: grid; gap: 1.4rem; text-align: center; padding: 1.2rem .4rem; }
.reply-by { margin-top: -1rem; font: 400 1.5rem/1.2 var(--font-display); color: var(--sage-ink); }
.reply-lines { display: grid; gap: 1rem; justify-content: center; justify-items: start; padding: 1.4rem 0; border-block: 1px solid var(--line); }
.reply-line { display: flex; align-items: flex-end; gap: .4rem; width: min(100%, 16rem); min-width: 13rem; font: 400 1.9rem/1 var(--font-display); color: var(--ink); }
.reply-line::after { content: ''; flex: 1; border-bottom: 1px solid #B98A96; margin-bottom: .3rem; }
.reply-choice { display: flex; align-items: center; gap: .7rem; font: 400 1.35rem/1.2 var(--font-display); color: var(--muted); }
.reply-ring { width: .85rem; height: .85rem; border: 1px solid var(--gold-ink); border-radius: 50%; }
.rsvp-reply .submit-button { text-align: left; }
.rsvp-reply .reply-alternative { max-width: 32ch; margin-inline: auto; }
.reply-alternative, .nojs-note { font-size: .9375rem; color: var(--muted); text-align: center; }
.reply-alternative a { color: var(--sage-ink); border-bottom: 1px solid currentColor; }
.thank-you { position: relative; display: grid; justify-items: center; gap: 1.1rem; text-align: center; padding: 3rem 0; }
.thank-you[hidden] { display: none; }
.thank-you > span:first-child { font: 400 4.5rem/1 var(--font-display); color: var(--seal); }
.thank-you .eyebrow { color: var(--gold-ink); }
.thank-you h3 { font-size: clamp(2.6rem, 9vw, 4rem); line-height: 1; }
.thank-you p:not(.eyebrow) { color: var(--muted); max-width: 30ch; }

/* Footer */
.footer { background: var(--ink); color: var(--blush); padding: clamp(3rem, 8vw, 5rem) var(--gutter) 1.5rem; overflow: clip; }
.footer-top { display: grid; gap: 1.5rem; justify-items: start; }
.footer .monogram span { color: var(--gold); }
.footer-top p { font: 400 1.6rem/1.2 var(--font-display); color: #F5DCE2; }
.footer-top .text-link:hover { color: #F6C9D1; }
.footer-names {
  margin: clamp(2.5rem, 7vw, 4rem) 0 1.5rem;
  font: 400 clamp(3.2rem, 14.6vw, 16rem)/.85 var(--font-display);
  letter-spacing: -.02em; white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px #E39AAB;
}
.footer-bottom { display: flex; flex-wrap: wrap; gap: .6rem 2rem; justify-content: space-between; padding-top: 1.2rem; border-top: 1px solid rgba(249, 221, 224, .2); color: #E2C2CB; }
.footer-bottom a:hover { color: var(--blush); }

/* Reveal on scroll */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(1.6rem); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
  .js .reveal.is-visible { opacity: 1; transform: none; }
  .hero h1 > span { animation: rise 1.2s cubic-bezier(.2, .7, .2, 1) both; }
  .hero h1 > span + span { animation-delay: .15s; }
  @keyframes rise { from { opacity: 0; transform: translateY(.25em); } }
}

/* Tablet and up */
@media (min-width: 640px) {
  .header nav a:not(.nav-rsvp) { display: inline; }
  .stay-list { grid-template-columns: 1fr 1fr; }
  .travel-directions { grid-template-columns: auto 1fr 1fr 1fr; }
  .form-fields { grid-template-columns: 1fr 1fr; }
  .attendance-options { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: auto 1fr auto; align-items: center; gap: 3rem; }
}

/* Desktop */
@media (min-width: 1000px) {
  .header-date { display: block; }
  .hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; column-gap: clamp(2rem, 5vw, 6rem); min-height: calc(100svh - 4.5rem); padding-top: 3rem; }
  .hero h1 { font-size: clamp(6rem, 12.4vw, 15rem); }
  .hero-copy { gap: 2.4rem; }
  .invitation-scene { width: 100%; max-width: 32rem; margin-top: -2rem; }
  .hero-dateline { justify-content: space-between; align-self: end; }
  h2 { font-size: clamp(4rem, 6.4vw, 7.2rem); }
  .story-grid { grid-template-columns: 5fr 6fr; align-items: center; gap: clamp(3rem, 8vw, 9rem); }
  .story-art { width: 100%; max-width: 30rem; }
  .venue-top { grid-template-columns: 1.4fr 1fr; align-items: end; }
  .venue-bottom { grid-template-columns: 1fr 1fr auto; align-items: end; }
  .schedule-grid { grid-template-columns: 5fr 7fr; gap: clamp(3rem, 8vw, 9rem); }
  .schedule-intro { position: sticky; top: 3rem; }
  .schedule-flower svg { width: 11rem; }
  .timeline li { grid-template-columns: 9rem 1fr 3rem; padding: 2.2rem 0; }
  .timeline .time { font-size: 2.6rem; }
  .timeline h3 { font-size: 2.2rem; }
  .timeline-number { position: static; text-align: right; padding-top: .5rem; }
  .travel-head { grid-template-columns: 1.4fr 1fr; align-items: end; }
  .stay-list article { grid-template-columns: auto 1fr auto; align-items: end; gap: 2.5rem; padding: 2.6rem; }
  .stay-list { grid-template-columns: 1fr; }
  .notes-grid { grid-template-columns: 5fr 7fr; gap: clamp(3rem, 8vw, 9rem); }
  .notes-grid > div:first-child { position: sticky; top: 3rem; }
  .rsvp-grid { grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(3rem, 7vw, 8rem); }
  .rsvp-intro img { position: absolute; right: 8%; bottom: -10rem; width: 11rem; }
}

@media (min-width: 1500px) {
  .hero, .section-pad > *, .header, .footer > * { max-width: 1680px; margin-inline: auto; }
  .hero-dateline { margin-inline: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0s !important; transition-delay: 0s !important; }
}
form[hidden] { display: none; }