/* ============================================================
   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;
  white-space: nowrap;
  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,
.motion .topbar__link {
  animation: topbarInk 10s var(--ease-in-out) infinite;
}

.topbar__nav {
  display: flex;
  align-items: center;
  gap: clamp(.7rem, 2vw, 1.4rem);
}
.topbar__link {
  color: var(--ink);
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: .2rem;
  border-bottom: 1px solid transparent;
  transition: border-color var(--fast) var(--ease-quart), color var(--fast) var(--ease-quart);
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .topbar__link:hover { border-bottom-color: currentColor; }
}

.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.34) saturate(1.06) contrast(.97);
}
.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, .62) 0%, rgba(29, 24, 22, .34) 34%, rgba(29, 24, 22, .06) 62%, rgba(29, 24, 22, 0) 78%),
    linear-gradient(0deg, rgba(29, 24, 22, .34), rgba(29, 24, 22, 0) 38%);
}
.hero__inner { position: relative; z-index: 1; }
/* The original feathered pool of shade keeps the invitation readable while
   preserving the warm garden hue on the open side of the frame. */
.hero__inner::before {
  content: "";
  position: absolute;
  inset: -14% -30% -16% -34%;
  z-index: -1;
  background: radial-gradient(64% 62% at 34% 48%, rgba(26, 21, 19, .8), rgba(26, 21, 19, .54) 48%, rgba(26, 21, 19, 0) 76%);
  pointer-events: none;
}
.hero__inner > * { text-shadow: 0 1px 20px rgba(22, 18, 16, .6), 0 1px 3px rgba(22, 18, 16, .45); }

.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 i {
  font-style: normal;
  font-size: .82em;
  padding: 0 .06em;
  opacity: .92;
}
.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(2.9rem, 1.1rem + 7.4vw, 5.4rem);
  font-weight: 400;
  line-height: 1.04;
  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.05rem, .9rem + .75vw, 1.55rem);
  font-style: italic;
  letter-spacing: .03em;
  text-wrap: balance;
}
/* the dot between the two billings */
.lockup__word b {
  display: inline-block;
  padding: 0 .55em;
  color: var(--rose-soft);
  font-weight: 400;
  transform: translateY(-.08em);
}
.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; }

/* ============================================================
   EXPLORE FREDERICK
   Same materials as the invitation: paper ground, rose-gold ink,
   hairline rules. No new visual language, just new furniture.
   ============================================================ */

/* ---- compact page hero ---- */

.page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(20rem, 46svh, 30rem);
  padding: clamp(4rem, 12vh, 7rem) 0 clamp(2.5rem, 6vh, 4rem);
  overflow: hidden;
  color: var(--cream);
  background: var(--ground-deep);
}
.page-hero__photo {
  position: absolute;
  inset: 0;
  background: var(--ground-deep) center 55% / cover no-repeat;
  scale: 1.06;
  filter: brightness(1.16) saturate(1.04);
}
.motion .page-hero__photo { animation: kenburns 2.8s var(--ease-expo) both; }
.page-hero__veil {
  position: absolute;
  inset: -6rem;
  background:
    linear-gradient(100deg, rgba(29, 24, 22, .84) 0%, rgba(29, 24, 22, .58) 42%, rgba(29, 24, 22, .2) 74%),
    linear-gradient(0deg, rgba(29, 24, 22, .68), rgba(29, 24, 22, 0) 55%);
}
.page-hero__inner { position: relative; z-index: 1; }
.page-hero__inner > * { text-shadow: 0 1px 20px rgba(22, 18, 16, .6), 0 1px 3px rgba(22, 18, 16, .45); }
.page-hero__title {
  max-width: 20ch;
  font-family: var(--serif);
  font-size: clamp(2.2rem, 1.2rem + 3.8vw, 4rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--cream);
}
.page-hero__title em { font-style: italic; color: var(--rose-soft); }
.page-hero__sub {
  max-width: 46ch;
  margin: 1.1rem 0 0;
  color: rgba(253, 244, 238, .88);
  font-size: 1.05rem;
}

/* ---- sticky section index ---- */

.jump {
  position: sticky;
  z-index: calc(var(--z-sticky) - 1);
  top: 3.55rem;
  background: rgba(252, 247, 244, .94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.jump__inner {
  display: flex;
  gap: clamp(.9rem, 2.5vw, 1.9rem);
  width: var(--shell);
  margin-inline: auto;
  padding: .8rem 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.jump__inner::-webkit-scrollbar { display: none; }
.jump {
  -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
  mask-image: linear-gradient(90deg, #000 92%, transparent);
}
@media (min-width: 62rem) {
  .jump { -webkit-mask-image: none; mask-image: none; }
  .jump__inner { justify-content: space-between; }
}
.jump a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--ink-soft);
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: .15rem;
  border-bottom: 1px solid transparent;
  transition: color var(--fast) var(--ease-quart), border-color var(--fast) var(--ease-quart);
}
.jump a span { font-size: 1.1em; }
@media (hover: hover) and (pointer: fine) {
  .jump a:hover { color: var(--rose-ink); border-bottom-color: var(--rose); }
}

/* the sticky index sits under the bar, so anchors need more clearance here */
.guide[id],
.intro[id] { scroll-margin-top: 7.5rem; }

/* ---- intro ---- */

.intro {
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2rem, 5vw, 3.5rem);
  background: var(--paper);
}
.intro__inner { display: grid; gap: clamp(1.2rem, 3vw, 2rem); }
.intro__prose { max-width: 64ch; }
.intro__prose .pull {
  margin-top: 1.8rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

/* ---- guide sections ---- */

.guide {
  padding: clamp(2.75rem, 6vw, 4.5rem) 0;
  background: var(--paper);
  border-top: 1px solid var(--rule);
}
.guide--warm { background: var(--paper-warm); }

.guide__head { max-width: 60ch; margin-bottom: clamp(1.5rem, 3vw, 2.2rem); }
.guide__mark {
  margin: 0 0 .6rem;
  font-size: 1.6rem;
  line-height: 1;
}
.guide__lede {
  margin: .8rem 0 0;
  color: var(--ink-soft);
  font-size: 1rem;
}

/* Hairlines are drawn on the items themselves, not as grid gaps: a gap-based
   grid leaves phantom tiles wherever a row is short. */
.guide__list {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.guide__list li {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.guide__list a {
  display: block;
  height: 100%;
  padding: 1.15rem 1.35rem;
  color: var(--ink);
  text-decoration: none;
  transition: background var(--fast) var(--ease-quart);
}
.guide__list b {
  display: block;
  font-family: var(--serif);
  font-size: 1.32rem;
  font-weight: 500;
  line-height: 1.25;
}
.guide__list b i {
  font-style: italic;
  font-size: .78em;
  color: var(--rose-ink);
  white-space: nowrap;
}
.guide__list span {
  display: block;
  margin-top: .3rem;
  color: var(--ink-soft);
  font-size: .95rem;
  line-height: 1.55;
}
/* the arrow only appears on the link itself, so the row stays quiet */
.guide__list b::after {
  content: " →";
  color: var(--rose-ink);
  font-family: var(--sans);
  font-size: .74em;
  font-style: normal;
  opacity: 0;
  transition: opacity var(--fast) var(--ease-quart), letter-spacing var(--base) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .guide__list a:hover { background: var(--card); }
  .guide__list a:hover b::after { opacity: 1; letter-spacing: .18em; }
}
.guide__list a:focus-visible { background: var(--card); }
.guide__list a:focus-visible b::after { opacity: 1; }

/* a section whose content cannot exist yet */
.pending {
  margin-bottom: 1.6rem;
  padding: 1.15rem 1.35rem;
  border: 1px dashed var(--rose);
  border-radius: 2px;
  background: rgba(199, 138, 113, .07);
}
.pending p { margin: 0; color: var(--ink); font-size: .98rem; }
.pending b { font-weight: 400; color: var(--rose-ink); }

/* ---- slim closing band ---- */

.rsvp--slim { padding: clamp(3rem, 7vw, 5rem) 0; }
.rsvp--slim .rsvp__intro { margin-bottom: 0; }
.cta-row { margin-top: 1.8rem; }

/* ---------------- 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;
}

/* ---------------- legal page ---------------- */

.legal {
  padding: clamp(4rem, 9vw, 6.5rem) 0 clamp(3rem, 7vw, 5rem);
  background: var(--paper);
}
.legal__inner { max-width: 62ch; }
.legal .display { margin-bottom: .6rem; }
.legal__date {
  margin: 0 0 clamp(2rem, 4vw, 2.75rem);
  color: var(--ink-soft);
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.legal section { padding: 1.5rem 0; border-top: 1px solid var(--rule); }
.legal h2 {
  margin-bottom: .5rem;
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 500;
}
.legal p { margin: 0; color: var(--ink); }
.legal__back { margin-top: 2.5rem; }

/* ---------------- 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__nav {
  margin: 1.1rem 0 0;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.footer__nav a { color: var(--rose-soft); text-decoration: none; }
.footer__nav a:hover { color: var(--cream); text-decoration: underline; }
.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); }

/* when the fallback fires there is nobody watching, so do not animate */
.reveal-instant [data-reveal] { transition: none !important; }

.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; }
  .topbar { gap: .55rem; padding-inline: .9rem; }
  .brand { font-size: .82rem; letter-spacing: .02em; }
  .brand__age { font-size: 1.25em; }
  .topbar__nav { gap: .7rem; }
  .topbar__link { font-size: .58rem; letter-spacing: .1em; }
  .topbar .btn { min-height: 2.2rem; padding: .45rem .95rem; font-size: .58rem; letter-spacing: .12em; }
  .jump { top: 3.1rem; }
  .jump__inner { padding: .65rem 0; }
  .guide[id], .intro[id] { scroll-margin-top: 6.4rem; }
  .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, .28) 6%, rgba(29, 24, 22, .16) 50%, rgba(29, 24, 22, .32));
  }
  .hero__inner::before {
    inset: -18% -16% -8%;
    background: radial-gradient(80% 64% at 50% 46%, rgba(26, 21, 19, .76), rgba(26, 21, 19, .52) 54%, rgba(26, 21, 19, 0) 84%);
  }
  .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: 25rem) {
  .brand__age { display: none; }
}

@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; }
}