/* ============================================================
   PAMELA AT FIFTY - single-page invitation
   Blush paper carries the reading; deep rose photo bands frame
   it; rose gold is the ink. Self-contained: index.html loads
   only this file.
   ============================================================ */

:root {
  --paper: #fcf7f4;
  --paper-warm: #f7eae3;
  --card: #fffdfb;
  --ink: #2a2320;
  --ink-soft: #6a5a53;
  --rule: #ebd8cc;
  /* the dark bands are a warm charcoal, not plum - rose gold only reads as
     metal against a neutral ground */
  --ground: #2f2724;
  --ground-deep: #1d1816;

  /* the metal itself: copper shadow → rose mid → pale highlight */
  --rg-deep: #a9634b;
  --rose: #c78a71;
  --rose-fill: #dfa98f;
  --rose-fill-hi: #ecc0a9;
  --rose-ink: #9a5540;    /* rose-gold text on paper */
  --rose-soft: #f0c7b2;   /* rose-gold text on the dark bands */
  --cream: #fdf4ee;

  /* the sheen - used on metal surfaces, never as decoration */
  /* no stop darker than #cf9174: ink text must clear 4.5:1 anywhere on the fill */
  --metal: linear-gradient(118deg, #f9e0d1 0%, #ecbba2 18%, #d69c82 38%, #f5d4c0 56%, #cf9174 76%, #f7e0d2 100%);
  --metal-line: linear-gradient(90deg, #b8765c, #f0c7b2 45%, #c78a71 70%, rgba(240, 199, 178, .08));
  /* on a dark photograph the metal must be highlight-dominant or it reads as mud */
  --metal-light: linear-gradient(115deg, #f9d6c0 0%, #e5a382 20%, #c9795a 38%, #f7d2b8 54%, #d98d6b 74%, #f6cdb4 90%, #e8ab89 100%);
  --error: #9c3a2e;

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Jost", "Segoe UI", Helvetica, Arial, sans-serif;
  --script: "Great Vibes", "Cormorant Garamond", cursive;

  --shell: min(68rem, calc(100% - 2.5rem));
  --band: clamp(3.75rem, 8vw, 7rem);
  /* motion system - one set of curves and durations for the whole page */
  --ease: cubic-bezier(.22, 1, .36, 1);          /* out-quint, the default */
  --ease-expo: cubic-bezier(.16, 1, .3, 1);      /* confident, for reveals */
  --ease-quart: cubic-bezier(.25, 1, .5, 1);     /* soft, for hovers */
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);  /* on-screen movement */
  --press: 140ms;
  --fast: 200ms;
  --base: 280ms;
  --slow: 480ms;
  --reveal: 760ms;

  --z-sticky: 40;
  --z-skip: 90;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-kerning: normal;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.7;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
p { text-wrap: pretty; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.1;
  text-wrap: balance;
}

a { color: var(--rose-ink); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--rose);
  outline-offset: 3px;
}

::selection { background: rgba(199, 138, 113, .24); }

.skip-link {
  position: fixed;
  z-index: var(--z-skip);
  top: .75rem;
  left: .75rem;
  padding: .75rem 1.15rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--rose);
  border-radius: 2px;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ---------------- primitives ---------------- */

.shell { width: var(--shell); margin-inline: auto; }

/* the sticky bar must never cover an anchored heading */
:target,
section[id],
header[id] { scroll-margin-top: 4.5rem; }

.display {
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.2rem);
  letter-spacing: -.01em;
}
.display em { font-style: italic; color: var(--rose-ink); }
.on-dark .display,
.display--light { color: var(--cream); }
.display--light em { color: var(--rose-soft); }

.kicker {
  margin: 0 0 1.15rem;
  color: var(--rose-ink);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .28em;
  line-height: 1.5;
  text-transform: uppercase;
}
.kicker--light { color: #f7d9ce; }

.prose { max-width: 62ch; color: var(--ink); }
.prose .display { margin-bottom: 1.15rem; }
.prose p + p { margin-top: 1.05rem; }
.prose p { margin: 0; }

.rule-line {
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--rule);
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.1rem;
  padding: .8rem 1.9rem;
  overflow: hidden;
  border: 1px solid rgba(169, 99, 75, .55);
  border-radius: 2px;
  color: var(--ink);
  background: var(--metal);
  background-size: 180% 100%;
  background-position: 30% 0;
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--base) var(--ease-quart),
    color var(--base) var(--ease-quart),
    border-color var(--base) var(--ease-quart),
    transform var(--press) var(--ease),
    box-shadow var(--base) var(--ease-quart);
}
/* a warm highlight that follows the cursor; js/one.js feeds --px */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(9rem circle at var(--px, 50%) 50%, rgba(255, 253, 249, .38), transparent 70%);
  opacity: 0;
  transition: opacity var(--base) var(--ease-quart);
  pointer-events: none;
}
.btn > * { position: relative; z-index: 1; }
.btn:active { transform: scale(.975); }
.btn[disabled] { opacity: .8; cursor: progress; transform: none; box-shadow: none; }

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    color: var(--ink);
    background-position: 70% 0;
    border-color: var(--rg-deep);
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -16px rgba(42, 36, 32, .7);
  }
  .btn:hover::after { opacity: 1; }
  .btn:active { transform: scale(.975); }
}

.btn--outline {
  color: var(--cream);
  background: rgba(29, 24, 22, .42);
  border-color: rgba(253, 244, 238, .55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.btn--outline::after { background: radial-gradient(9rem circle at var(--px, 50%) 50%, rgba(253, 244, 238, .22), transparent 70%); }
@media (hover: hover) and (pointer: fine) {
  .btn--outline:hover {
    color: var(--ground-deep);
    background: var(--cream);
    border-color: var(--cream);
    box-shadow: none;
  }
}

/* the submit button while the reply is in flight */
#rsvpSubmit[disabled] { background: linear-gradient(100deg, var(--rose-fill) 30%, #f6d8c8 50%, var(--rose-fill) 70%) 0 0 / 300% 100%; }
.motion #rsvpSubmit[disabled] { animation: sending 1.4s linear infinite; }
@keyframes sending { from { background-position: 120% 0; } to { background-position: -20% 0; } }

.btn--full { width: 100%; margin-top: 1.9rem; }

/* ---------------- sticky bar ---------------- */

/* the bar is a slightly deeper band of rose gold; the button turns dark against it */
.topbar {
  position: sticky;
  z-index: var(--z-sticky);
  isolation: isolate;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .88rem clamp(1rem, 4vw, 2.5rem);
  color: var(--ink);
  background: linear-gradient(118deg, #edc2ad 0%, #dca087 22%, #c98469 43%, #e3ad94 63%, #bd745c 82%, #e8b8a1 100%);
  background-size: 160% 100%;
  background-position: 20% 0;
  border-bottom: 1px solid rgba(128, 70, 53, .5);
  box-shadow: 0 1px 0 rgba(255, 238, 229, .28);
  transition:
    padding var(--slow) var(--ease),
    background-position 700ms var(--ease),
    box-shadow var(--slow) var(--ease),
    border-color var(--slow) var(--ease),
    backdrop-filter var(--slow) var(--ease);
  will-change: padding, background-position, box-shadow;
}

.topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #26191b;
  opacity: 0;
  pointer-events: none;
}

.motion .topbar::before {
  animation: topbarTone 10s var(--ease-in-out) infinite;
}

.topbar.is-scrolled {
  padding-block: .73rem;
  background-position: 72% 0;
  border-bottom-color: rgba(112, 58, 43, .58);
  box-shadow: 0 12px 30px -18px rgba(22, 18, 16, .88);
  backdrop-filter: saturate(1.08) blur(10px);
  -webkit-backdrop-filter: saturate(1.08) blur(10px);
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(.95rem, .85rem + .4vw, 1.15rem);
  font-weight: 500;
  letter-spacing: .04em;
  text-decoration: none;
}
.brand:hover { color: var(--ground-deep); }
.brand__name { letter-spacing: .06em; }
.brand__age {
  /* copper on the metal bar fails contrast; ink at a larger size and heavier
     weight separates the numeral without losing legibility */
  color: var(--ink);
  font-size: 1.4em;
  font-weight: 600;
  line-height: 1;
}

.motion .topbar .brand,
.motion .topbar .brand__age {
  animation: topbarInk 10s var(--ease-in-out) infinite;
}

.topbar .btn {
  min-height: 2.4rem;
  padding: .5rem 1.35rem;
  color: var(--cream);
  background: var(--ground-deep);
  border-color: var(--ground-deep);
  font-size: .66rem;
  letter-spacing: .18em;
}
.motion .topbar .btn {
  animation: topbarButton 10s var(--ease-in-out) infinite;
}
.topbar .btn::after { background: radial-gradient(9rem circle at var(--px, 50%) 50%, rgba(240, 199, 178, .3), transparent 70%); }
@media (hover: hover) and (pointer: fine) {
  .topbar .btn:hover {
    color: var(--cream);
    background: var(--ground);
    border-color: var(--ground);
    box-shadow: 0 10px 22px -14px rgba(29, 24, 22, .9);
  }
}

@keyframes topbarTone {
  0%, 40% { opacity: 0; }
  50%, 90% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes topbarInk {
  0%, 40%, 100% { color: var(--ink); }
  50%, 90% { color: var(--cream); }
}

@keyframes topbarButton {
  0%, 40%, 100% {
    color: var(--cream);
    background: var(--ground-deep);
    border-color: var(--ground-deep);
  }
  50%, 90% {
    color: var(--ink);
    background: #e9b49c;
    border-color: #e9b49c;
  }
}

/* ---------------- hero ---------------- */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: calc(100svh - 4.16rem);
  padding: clamp(4rem, 12vh, 8rem) 0 clamp(3rem, 8vh, 5rem);
  overflow: hidden;
  color: var(--cream);
  background: var(--ground-deep);
}
.hero__photo {
  position: absolute;
  inset: 0;
  background: var(--ground-deep) center 40% / cover no-repeat;
  scale: 1.06;
  /* the photograph is lit, not tinted - the candlelight carries the page */
  filter: brightness(1.18) saturate(1.04) contrast(.98);
}
.motion .hero__photo { animation: kenburns 2.8s var(--ease-expo) both; }
/* Only enough shading to hold the type, feathered so the garden stays bright.
   Everything to the right of the copy is left untouched. */
.hero__veil {
  position: absolute;
  inset: -6rem;
  background:
    linear-gradient(100deg, rgba(29, 24, 22, .24) 0%, rgba(29, 24, 22, .1) 38%, rgba(29, 24, 22, 0) 68%),
    linear-gradient(0deg, rgba(29, 24, 22, .12), rgba(29, 24, 22, 0) 34%);
}
.hero__inner { position: relative; z-index: 1; }
/* A restrained pool of shade sits behind the invitation only. It gives the
   pale lettering contrast without dimming the garden across the full frame. */
.hero__inner::before {
  content: "";
  position: absolute;
  inset: -10% -18% -12% -22%;
  z-index: -1;
  background: radial-gradient(
    62% 70% at 30% 48%,
    rgba(24, 17, 16, .46) 0%,
    rgba(24, 17, 16, .28) 46%,
    rgba(24, 17, 16, .08) 70%,
    transparent 88%
  );
  pointer-events: none;
}
.hero__inner > * { text-shadow: 0 2px 14px rgba(18, 12, 11, .56), 0 1px 3px rgba(18, 12, 11, .68); }

.hero__for {
  display: inline-block;
  margin: 0 0 1.1rem;
  padding: .4rem .9rem;
  border: 1px solid rgba(240, 199, 178, .5);
  border-radius: 999px;
  color: var(--rose-soft);
  font-size: .68rem;
  letter-spacing: .24em;
  text-transform: uppercase;
}

/* Her name is the headline: the script sets it at invitation scale, and
   "at fifty · 50" sits underneath as the subordinate line. */
.lockup {
  margin: clamp(.6rem, 2vw, 1.4rem) 0 clamp(1.2rem, 3vw, 1.9rem);
  font-weight: 400;
}
.lockup__name {
  display: block;
  /* Great Vibes carries a wide left side bearing on the P; this pulls the
     glyph back so the name, the kicker above and the 50 below share one
     optical left edge. */
  margin-left: -.055em;
  margin-bottom: -.04em;
  color: var(--cream);
  font-family: var(--script);
  font-size: clamp(4.4rem, 1.8rem + 11vw, 7rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: .01em;
}
.lockup__fifty {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.9rem);
}
.lockup__rule {
  flex: 0 0 auto;
  width: clamp(2.5rem, 7vw, 5.5rem);
  height: 1px;
  background: linear-gradient(90deg, rgba(240, 199, 178, .06), #f0c7b2 55%, #d99f83);
  transform-origin: left center;
}
.lockup__word {
  color: var(--cream);
  font-family: var(--serif);
  font-size: clamp(1.25rem, .95rem + 1.1vw, 1.9rem);
  font-style: italic;
  letter-spacing: .03em;
  white-space: nowrap;
}
.lockup__num {
  /* Metal on a dark photograph reads by being LUMINOUS, not by being a
     gradient - a clipped ramp dips into its dark stops and turns to mud.
     Solid rose gold plus a warm glow is the honest treatment. */
  color: #f3b593;
  text-shadow: 0 0 26px rgba(226, 150, 112, .45), 0 3px 16px rgba(22, 18, 16, .55);
  font-family: var(--serif);
  font-size: clamp(3.4rem, 1.6rem + 6.4vw, 5.2rem);
  font-weight: 500;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  line-height: .88;
  letter-spacing: -.02em;
}

.hero__tagline {
  max-width: 20ch;
  margin: 0;
  color: var(--cream);
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.3rem);
  line-height: 1.2;
}
.hero__tagline em { font-style: italic; color: var(--rose-soft); }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.6rem;
  margin: clamp(1.4rem, 3vw, 2rem) 0 clamp(1.6rem, 3vw, 2.2rem);
  padding: 0;
  color: #fdf5f1;
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  list-style: none;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------------- countdown (inside the hero, above the fold) ---------------- */

.clock {
  display: flex;
  align-items: flex-start;
  gap: clamp(.7rem, 2.2vw, 1.9rem);
  margin: 0 0 clamp(1.5rem, 3vw, 2.1rem);
  padding: clamp(.9rem, 2vw, 1.15rem) clamp(1rem, 2.5vw, 1.6rem);
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(240, 199, 178, .3);
  border-radius: 3px;
  background: rgba(29, 24, 22, .34);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.clock__unit { min-width: clamp(2.9rem, 7vw, 4rem); text-align: center; }
.clock__unit b {
  display: block;
  color: var(--cream);
  font-family: var(--serif);
  font-size: clamp(1.9rem, 1rem + 2.6vw, 2.9rem);
  font-weight: 500;
  /* lining figures sit on one baseline; old-style figures bounce, which reads
     as a broken font in a clock */
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  line-height: .95;
  letter-spacing: -.02em;
}
.clock__unit span {
  display: block;
  margin-top: .45rem;
  color: rgba(253, 244, 238, .72);
  font-size: .55rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.clock__sep {
  align-self: stretch;
  width: 1px;
  margin-bottom: 1.1rem;
  background: linear-gradient(180deg, rgba(240, 199, 178, .05), rgba(240, 199, 178, .4), rgba(240, 199, 178, .05));
}
.clock__note {
  margin: -.6rem 0 1.4rem;
  color: var(--rose-soft);
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}
/* the seconds place breathes once per tick - driven from js/one.js */

/* ---------------- "more to follow" strip ---------------- */

.more {
  padding: clamp(1.5rem, 3.5vw, 2.4rem) 0;
  color: var(--cream);
  background: var(--ground);
}
.more__inner {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .85rem;
  max-width: 64ch;
  margin-inline: auto;
  font-size: 1rem;
  line-height: 1.7;
  text-align: center;
}
.more__inner b { color: var(--rose-soft); font-weight: 400; }
.more__mark { flex: none; color: var(--rose-soft); font-size: 1.05rem; line-height: 1.6; }

/* ---------------- invitation band ---------------- */

.invite {
  padding: var(--band) 0;
  background: var(--paper);
}
.invite__inner {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: start;
}

/* The date set like the face of a card. It opens with the same hairline and
   the same top padding as the first ledger row, so both columns start on one
   line. Lining figures keep the numeral off the month below it. */
.date-block {
  position: relative;
  padding-top: 1.15rem;
  border-top: 1px solid var(--rule);
}
.date-block h2 { margin: 0; }
.date-block__day {
  display: block;
  margin-bottom: .9rem;
  color: var(--rose-ink);
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .3em;
  line-height: 1;
  text-transform: uppercase;
}
.date-block__num {
  display: block;
  font-family: var(--serif);
  font-size: clamp(4.4rem, 2rem + 9vw, 7rem);
  font-weight: 500;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  line-height: 1;
  letter-spacing: -.03em;
}
.date-block__month {
  display: block;
  margin-top: .45rem;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.1rem);
  font-weight: 500;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  line-height: 1.15;
  letter-spacing: .01em;
}
.date-block__month em { font-style: italic; color: var(--rose-ink); }
.date-block__note {
  margin: 1.4rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: .95rem;
}
.date-block__cal { margin: 1.3rem 0 0; }

.ledger { margin: 0; }
.ledger__row {
  display: grid;
  gap: .25rem 2rem;
  grid-template-columns: minmax(7rem, .34fr) minmax(0, 1fr);
  padding: 1.15rem 0;
  border-top: 1px solid var(--rule);
}
.ledger__row:last-child { border-bottom: 1px solid var(--rule); }
.ledger dt {
  color: var(--rose-ink);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  line-height: 2.2;
}
.ledger dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.35;
}
.ledger dd small {
  display: block;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: .92rem;
  font-weight: 300;
  line-height: 1.6;
}

.ledger__foot { margin: 1.4rem 0 0; }
.link-more {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--rose-ink);
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--rose);
  padding-bottom: .3rem;
  transition: color var(--fast) var(--ease-quart), border-color var(--fast) var(--ease-quart);
}
.link-more::after {
  content: "→";
  transition: transform var(--base) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .link-more:hover { color: var(--ink); border-color: var(--ink); }
  .link-more:hover::after { transform: translateX(.35rem); }
}

/* ---------------- story band ---------------- */

.story {
  padding: var(--band) 0;
  background: var(--paper-warm);
  border-block: 1px solid var(--rule);
}
.story__inner {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
}
.story__figure { margin: 0; overflow: hidden; border-radius: 2px; }
.story__figure img {
  width: 100%;
  height: clamp(18rem, 34vw, 26rem);
  object-fit: cover;
  box-shadow: 0 26px 50px -30px rgba(42, 36, 32, .7);
  transition: transform var(--slow) var(--ease-quart);
}
@media (hover: hover) and (pointer: fine) {
  .story__figure:hover img { transform: scale(1.03); }
}
.pull {
  margin: 1.8rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  color: var(--rose-ink);
  font-family: var(--serif);
  font-size: clamp(1.3rem, 1rem + .9vw, 1.7rem);
  font-style: italic;
  line-height: 1.35;
  max-width: 30ch;
}

/* ---------------- rsvp band ---------------- */

.rsvp {
  position: relative;
  padding: var(--band) 0 clamp(3.5rem, 7vw, 6rem);
  overflow: hidden;
  background: var(--ground);
}
.rsvp__photo {
  position: absolute;
  inset: 0;
  background: var(--ground) center / cover no-repeat;
  opacity: .5;
}
/* the veil overscans so a scaled or rounded photo edge can never show a bright rim */
.rsvp__veil {
  position: absolute;
  inset: -6rem;
  background: linear-gradient(180deg, rgba(29, 24, 22, .82), rgba(47, 39, 36, .92));
}
.rsvp__inner { position: relative; z-index: 1; }

.rsvp__intro {
  max-width: 34rem;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  color: rgba(253, 244, 238, .86);
  text-align: center;
}
.rsvp__intro p { margin: 1rem auto 0; max-width: 44ch; }

.card {
  width: min(44rem, 100%);
  margin-inline: auto;
  padding: clamp(1.6rem, 4.5vw, 3.25rem);
  background: var(--card);
  border: 1px solid var(--rose);
  border-radius: 2px;
  box-shadow: 0 40px 80px -40px rgba(29, 24, 22, .9);
}

form { margin: 0; }

.fieldset {
  margin: 0 0 2rem;
  padding: 0;
  border: 0;
}
.fieldset:last-of-type { margin-bottom: 0; }
.fieldset__legend {
  display: block;
  width: 100%;
  padding: 0 0 .7rem;
  margin: 0 0 1.4rem;
  border-bottom: 1px solid var(--rule);
  color: var(--rose-ink);
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
}
/* seats: a stepper, because a select alone invites mis-taps on a phone */
.stepper {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) 3rem;
  align-items: stretch;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--paper);
  overflow: hidden;
  transition: border-color var(--fast) var(--ease-quart), box-shadow var(--fast) var(--ease-quart);
}
.stepper:focus-within { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(199, 138, 113, .18); }
.stepper select {
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
  text-align: center;
  text-align-last: center;
  padding-right: .9rem !important;
  background-image: none !important;
}
.stepper__btn {
  border: 0;
  border-inline: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  transition: background var(--fast) var(--ease-quart), color var(--fast) var(--ease-quart);
}
.stepper__btn:first-child { border-inline-start: 0; }
.stepper__btn:last-child { border-inline-end: 0; }
.stepper__btn:active { background: rgba(199, 138, 113, .18); }
.stepper__btn[disabled] { opacity: .35; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .stepper__btn:hover:not([disabled]) { background: rgba(199, 138, 113, .12); color: var(--ink); }
}

.field { margin-bottom: 1.3rem; }
.fieldset > .field:last-child,
#attendingFields > .field-row:last-child .field { margin-bottom: 0; }
.field label,
.field .field__legend {
  display: block;
  margin-bottom: .45rem;
  color: var(--ink-soft);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  padding: .8rem .9rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 300;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease), background var(--fast) var(--ease);
}
.field textarea { min-height: 6rem; resize: vertical; }
.field select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--rose-ink) 50%), linear-gradient(135deg, var(--rose-ink) 50%, transparent 50%);
  background-position: calc(100% - 1.2rem) 1.25rem, calc(100% - .9rem) 1.25rem;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-soft); opacity: 1; }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: #dcc3bb; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  background: var(--card);
  border-color: var(--rose);
  box-shadow: 0 0 0 3px rgba(199, 138, 113, .18);
  outline: none;
}
/* the label leans in with its field */
.field:focus-within label { color: var(--rose-ink); }
.field label { transition: color var(--fast) var(--ease-quart); }

.field [aria-invalid="true"] { border-color: var(--error); }
.motion .field [aria-invalid="true"] { animation: nudge 420ms var(--ease-in-out) both; }
@keyframes nudge {
  0%, 100% { transform: translate3d(0, 0, 0); }
  22% { transform: translate3d(-5px, 0, 0); }
  46% { transform: translate3d(4px, 0, 0); }
  72% { transform: translate3d(-2px, 0, 0); }
}
.field input:disabled,
.field select:disabled,
.field textarea:disabled {
  color: var(--ink-soft);
  background: #f4eae5;
  border-style: dashed;
  cursor: not-allowed;
}

/* subordinate to the consent checkbox above it: indented, not full width */
.field--nested {
  max-width: 20rem;
  margin-left: 1.85rem;
}

.field-row {
  display: grid;
  gap: 0 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
}

.field-error {
  margin: .45rem 0 0;
  color: var(--error);
  font-size: .88rem;
  font-weight: 400;
}

.choice { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.choice__opt { cursor: pointer; }
.choice__opt input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.choice__opt span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 3.1rem;
  padding: .7rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink-soft);
  background: var(--paper);
  font-size: .78rem;
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
  transition:
    color var(--fast) var(--ease-quart),
    background var(--fast) var(--ease-quart),
    border-color var(--fast) var(--ease-quart),
    box-shadow var(--fast) var(--ease-quart),
    transform var(--press) var(--ease);
}
/* a mark that grows into place - never from nothing */
.choice__opt span::before {
  content: "✦";
  display: inline-block;
  width: 0;
  margin-left: -.55rem;
  color: var(--rose);
  font-size: .9em;
  opacity: 0;
  transform: scale(.7);
  transition:
    opacity var(--fast) var(--ease),
    transform var(--base) var(--ease),
    width var(--base) var(--ease),
    margin var(--base) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .choice__opt:hover span { border-color: var(--rose); color: var(--ink); }
}
.choice__opt:active span { transform: scale(.985); }
.choice__opt input:checked + span {
  color: var(--ink);
  background: rgba(199, 138, 113, .16);
  border-color: var(--rose);
  box-shadow: inset 0 0 0 1px var(--rose);
}
.choice__opt input:checked + span::before {
  width: 1em;
  margin-left: 0;
  opacity: 1;
  transform: none;
}
.choice__opt input:focus-visible + span { outline: 3px solid var(--rose); outline-offset: 3px; }

/* main.js dims this block to 0.4 when a guest declines; the disabled field
   styling already carries that signal, so keep the labels readable instead. */
#attendingFields { opacity: 1 !important; }

.check-row {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin-bottom: 1rem;
  color: var(--ink);
  font-size: .95rem;
  line-height: 1.55;
  cursor: pointer;
}
.check-row input {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .22rem;
  accent-color: var(--rose);
}
.check-row span { max-width: 58ch; }

.motion .form-alert:not([hidden]) { animation: alertIn var(--base) var(--ease) both; }
@keyframes alertIn {
  from { opacity: 0; transform: translate3d(0, -6px, 0); }
  to { opacity: 1; transform: none; }
}
.form-alert {
  margin: 1.2rem 0 0;
  padding: .85rem 1rem;
  color: var(--error);
  background: #fbeeea;
  border: 1px solid rgba(156, 58, 46, .4);
  border-radius: 2px;
  font-size: .95rem;
}

.form-note {
  margin: 1.1rem 0 0;
  color: var(--ink-soft);
  font-size: .88rem;
  text-align: center;
}

.done { text-align: center; }
/* the reply landing is the one rare, high-emotion moment on the page */
.motion #rsvpDone:not([hidden]) { animation: doneIn var(--slow) var(--ease-expo) both; }
.motion #rsvpDone:not([hidden]) > * { animation: rise var(--slow) var(--ease-expo) both; }
.motion #rsvpDone:not([hidden]) > :nth-child(1) { animation: seal 720ms var(--ease-expo) both; }
.motion #rsvpDone:not([hidden]) > :nth-child(2) { animation-delay: .12s; }
.motion #rsvpDone:not([hidden]) > :nth-child(3) { animation-delay: .18s; }
.motion #rsvpDone:not([hidden]) > :nth-child(4) { animation-delay: .24s; }
.motion #rsvpDone:not([hidden]) > :nth-child(5) { animation-delay: .32s; }

@keyframes doneIn {
  from { opacity: 0; transform: scale(.97); }
  to { opacity: 1; transform: none; }
}
@keyframes seal {
  from { opacity: 0; transform: scale(.6) rotate(-25deg); }
  to { opacity: 1; transform: none; }
}

.done__mark {
  margin-bottom: .8rem;
  color: var(--rose);
  font-size: 2rem;
  line-height: 1;
}
.done p { margin: 1rem auto 0; max-width: 46ch; color: var(--ink); }
.done__sign {
  margin-top: 1.5rem;
  color: var(--rose-ink);
  font-family: var(--script);
  font-size: 1.6rem;
}

/* ---------------- footer ---------------- */

.footer {
  padding: clamp(2.75rem, 6vw, 4rem) 1.25rem clamp(2.25rem, 4vw, 3rem);
  color: var(--cream);
  background: var(--ground-deep);
  text-align: center;
}
.footer__mark {
  color: var(--rose-soft);
  font-family: var(--serif);
  font-size: 1.35rem;
  letter-spacing: .12em;
}
.footer__mark i { color: var(--mint); font-style: normal; }
.footer__name {
  margin: .7rem 0 .25rem;
  font-family: var(--serif);
  font-size: 1.4rem;
}
.footer__line { margin: 0; color: rgba(253, 244, 238, .74); font-size: .9rem; }
.footer__tiny {
  margin: 1.5rem 0 0;
  color: rgba(253, 244, 238, .6);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.footer a { color: var(--rose-soft); }
.footer a:hover { color: var(--cream); }

/* ============================================================
   MOTION
   Everything below is additive. Nothing is hidden unless
   html.motion is set (inline head script, JS on, reduced motion
   off), so the page always renders complete without it.
   ============================================================ */

/* ---- the hero curtain: one orchestrated entrance, ~1.5s ---- */

.motion .rise { animation: rise var(--reveal) var(--ease-expo) both; }
.motion .rise--1 { animation-delay: .10s; }
.motion .rise--2 { animation-delay: .22s; }
.motion .rise--3 { animation-delay: .30s; }
.motion .rise--4 { animation-delay: .60s; }
.motion .rise--5 { animation-delay: .70s; }
.motion .rise--6 { animation-delay: .86s; }
.motion .rise--7 { animation-delay: .96s; }

/* the numerals carry the moment: they arrive from further away,
   out of focus, and settle */
.motion .lift { animation: lift 1.15s var(--ease-expo) both; }
.motion .lift--1 { animation-delay: .34s; }
.motion .lift--2 { animation-delay: .46s; }

/* the hairline draws itself toward the numeral */
.motion .rise.lockup__rule { animation-name: draw; }

.hero__tagline .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero__tagline .line__in { display: block; }

@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes draw {
  from { opacity: 0; transform: scaleX(0); }
  to { opacity: 1; transform: none; }
}
@keyframes lift {
  from { opacity: 0; transform: translate3d(0, 34px, 0); filter: blur(9px); }
  60% { filter: blur(0); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
/* `scale` and `translate` are animated as independent properties so the
   entrance zoom and the scroll-linked drift can run on the same layer
   without one overriding the other's transform. */
@keyframes kenburns {
  from { scale: 1.16; }
  to { scale: 1.06; }
}

/* ---- scroll reveals (js/one.js adds .is-revealed) ---- */

.motion [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity var(--reveal) var(--ease-expo) calc(var(--i, 0) * 70ms),
    transform var(--reveal) var(--ease-expo) calc(var(--i, 0) * 70ms);
}
.motion [data-reveal="wipe"] {
  transform: none;
  clip-path: inset(0 0 22% 0);
  transition:
    opacity var(--slow) var(--ease-expo),
    clip-path 1s var(--ease-expo);
}
.motion [data-reveal="card"] { transform: translate3d(0, 30px, 0) scale(.985); }

.motion [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}

/* ---- scroll-driven atmosphere, where the browser can do it for free ---- */

@supports (animation-timeline: view()) {
  .motion .hero__photo {
    animation: kenburns 2.8s var(--ease-expo) both, drift linear;
    animation-timeline: auto, view();
    animation-range: normal, entry 0% exit 100%;
  }
  .motion .rsvp__photo {
    scale: 1.06;
    animation: drift linear;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
  .motion .story__figure img {
    scale: 1.06;
    animation: creep linear;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
  .motion .topbar {
    animation: barSettle linear both;
    animation-timeline: scroll();
    animation-range: 0 240px;
  }
  @keyframes drift {
    from { translate: 0 -2.4%; }
    to { translate: 0 2.4%; }
  }
  @keyframes creep {
    from { translate: 0 1.6%; }
    to { translate: 0 -1.6%; }
  }
  @keyframes barSettle {
    from { box-shadow: 0 0 0 rgba(22, 18, 16, 0); }
    to { box-shadow: 0 12px 30px -18px rgba(22, 18, 16, .9); }
  }
}

/* ---- reduced motion: gentler, not dead ----
   Position changes and the hero curtain go; colour, opacity and
   focus feedback stay, because they carry meaning. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__photo,
  .rise,
  .lift { animation: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .btn:hover,
  .btn:active,
  .story__figure:hover img { transform: none !important; }
  #rsvpDone:not([hidden]) { animation: fadeOnly 240ms var(--ease-quart) both; }
  @keyframes fadeOnly { from { opacity: 0; } to { opacity: 1; } }
}

/* ---------------- responsive ---------------- */

@media (max-width: 60rem) {
  .invite__inner,
  .story__inner { grid-template-columns: minmax(0, 1fr); }
  .story__figure { order: 2; }
}

@media (max-width: 40rem) {
  body { font-size: 1rem; }
  .hero { align-items: center; min-height: calc(100svh - 4.16rem); padding-block: clamp(3rem, 12vh, 5rem) clamp(2.5rem, 8vh, 4rem); }
  .lockup__fifty { gap: .9rem; }
  .hero__meta { gap: .2rem 1.1rem; font-size: .72rem; }
  /* on a phone the copy spans the frame, so the shade pool is centred and
     the base scrim stays very light - the garden still reads as lit */
  .hero__veil {
    background: linear-gradient(180deg, rgba(29, 24, 22, .12) 6%, rgba(29, 24, 22, .04) 50%, rgba(29, 24, 22, .16));
  }
  .hero__inner::before {
    inset: -12% -10% -8%;
    background: radial-gradient(
      78% 68% at 50% 46%,
      rgba(24, 17, 16, .38) 0%,
      rgba(24, 17, 16, .2) 54%,
      transparent 88%
    );
  }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .ledger__row { grid-template-columns: minmax(0, 1fr); }
  .ledger dt { line-height: 1.6; }
  .card { border-radius: 0; }
}

@media (max-width: 22.5rem) {
  .lockup__name { font-size: 3.6rem; }
  .lockup__num { font-size: 3rem; }
}

@media print {
  .topbar, .hero__actions, .btn { display: none; }
  body { background: #fff; color: #000; }
}