/* The storefront homepage: a wedding stationery suite you can play with. Loaded after base.css. */
:root {
  --paper: oklch(0.983 0.009 70);
  --cream: oklch(0.958 0.02 68);
  --blush: oklch(0.93 0.035 18);
  --rose: oklch(0.85 0.07 14);
  --rose-deep: oklch(0.76 0.095 13);
  --wine: oklch(0.45 0.145 12);
  --wine-press: oklch(0.39 0.135 12);
  --ink: oklch(0.26 0.045 18);
  --ink-soft: oklch(0.45 0.04 18);
  --line: oklch(0.875 0.03 28);
  --sage: oklch(0.88 0.04 145);
  --sage-ink: oklch(0.42 0.06 150);

  /* base.css names its accent "blue"; on this page the accent is wine. */
  --blue: var(--wine);
  --blue-press: var(--wine-press);
  --mist: var(--cream);
  --haze: var(--blush);
  --sky: var(--rose);

  --display: 'Gloock', 'Iowan Old Style', 'Palatino Linotype', serif;
  --body: 'Figtree', 'Avenir Next', 'Segoe UI', sans-serif;
  --hand: 'Homemade Apple', 'Bradley Hand', cursive;
  --nav-h: 4.25rem;
}

.home { background: var(--paper); overflow-x: clip; }
.home .display { letter-spacing: -0.015em; }
.home .eyebrow { color: var(--wine); letter-spacing: 0.16em; }
.home .prose { color: var(--ink-soft); max-width: 52ch; }
.home .btn--big { min-height: 3.5rem; padding: 0 var(--space-xl); font-size: var(--step-0); letter-spacing: 0.01em; }
.home .btn:hover { background: var(--wine); border-color: var(--wine); }
.home section { scroll-margin-top: var(--nav-h); }
.note { font-family: var(--hand); font-size: 1.05rem; line-height: 1.5; color: var(--wine); letter-spacing: 0; }

.skip { position: fixed; top: var(--space-xs); left: var(--space-xs); z-index: 60; padding: var(--space-xs) var(--space-md); background: var(--ink); color: var(--paper); border-radius: 999px; transform: translateY(-200%); }
.skip:focus { transform: none; }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg);
  padding: 0 var(--gutter);
  transition: background-color 0.4s var(--out-quart), box-shadow 0.4s var(--out-quart);
}
.nav.is-stuck { background: oklch(0.983 0.009 70 / 0.94); box-shadow: 0 1px 0 var(--line); backdrop-filter: blur(8px); }
.nav__brand { display: flex; align-items: center; gap: var(--space-xs); text-decoration: none; }
.nav__logo { display: block; height: 2.2rem; width: auto; }
.nav__links { display: flex; align-items: center; gap: clamp(0.9rem, 2.2vw, 2rem); }
.nav__links a { font-size: var(--step--1); font-weight: 600; text-decoration: none; white-space: nowrap; }
.nav__links a:not(.nav__cta):hover { color: var(--wine); }
.nav__cta { padding: 0.6rem 1.15rem; border-radius: 999px; background: var(--ink); color: var(--paper); transition: background-color 0.25s var(--out-quart); }
.nav__cta:hover { background: var(--wine); }
@media (max-width: 46rem) { .nav__links a[href^='#'] { display: none; } }
@media (max-width: 26rem) { .nav__logo { height: 1.7rem; } }

/* ---------- hero ---------- */
.hero {
  position: relative; display: grid; gap: clamp(2.5rem, 6vw, 4rem); align-items: center;
  padding: calc(var(--nav-h) + clamp(1.5rem, 5vw, 4rem)) var(--gutter) clamp(4rem, 9vw, 8rem);
  background:
    radial-gradient(60rem 30rem at 85% 10%, oklch(0.93 0.035 18 / 0.9), transparent 70%),
    radial-gradient(40rem 28rem at 0% 100%, oklch(0.94 0.03 145 / 0.6), transparent 70%),
    var(--paper);
}
@media (min-width: 62rem) { .hero { grid-template-columns: 1fr 1fr; min-height: min(100svh, 62rem); } }
.hero__copy { display: grid; gap: var(--space-lg); justify-items: start; max-width: 38rem; }
.hero__title { font-size: clamp(3.1rem, 1.4rem + 6.2vw, 7rem); line-height: 0.95; letter-spacing: -0.03em; }
.hero__title em { display: block; font-style: normal; color: var(--wine); }
.hero__finally { position: relative; white-space: nowrap; }
/* A hand-drawn underline under "finally". */
.hero__finally::after {
  content: ''; position: absolute; left: -2%; right: -2%; bottom: -0.06em; height: 0.18em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9c38-6 80-8 120-5 26 2 50 4 74 1' fill='none' stroke='%23c76a7a' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--out) 1.6s;
}
.is-ready .hero__finally::after { clip-path: inset(0 0 0 0); }
.hero__lede { font-size: var(--step-1); line-height: 1.45; max-width: 36ch; color: var(--ink-soft); }

.names { display: grid; gap: var(--space-sm); width: 100%; margin-top: var(--space-xs); }
.names__label { font-size: var(--step--1); font-weight: 600; color: var(--ink-soft); }
.names__row { display: flex; align-items: baseline; gap: var(--space-sm); max-width: 30rem; }
.names__row label { flex: 1; min-width: 0; }
.names__row input {
  width: 100%; min-height: 3.25rem; padding: 0 0 var(--space-2xs);
  border: 0; border-bottom: 1.5px solid var(--ink-soft); background: transparent; border-radius: 0;
  font-family: var(--display); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); letter-spacing: -0.01em;
  transition: border-color 0.2s;
}
.names__row input::placeholder { color: oklch(0.7 0.03 18); }
.names__row input:focus-visible { outline: none; border-color: var(--wine); box-shadow: 0 1.5px 0 0 var(--wine); }
.names__amp { font-family: var(--display); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); color: var(--wine); }
.names__addr { font-size: var(--step--1); color: var(--ink-soft); overflow-wrap: anywhere; }
.names__addr strong { color: var(--ink); font-weight: 600; }
.names__go { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); margin-top: var(--space-sm); }

/* Load sequence for the copy. */
.js .hero__copy > * { opacity: 0; transform: translateY(1.25rem); transition: opacity 0.9s var(--out), transform 1.2s var(--out); }
.js .hero__copy > :nth-child(2) { transition-delay: 0.1s; }
.js .hero__copy > :nth-child(3) { transition-delay: 0.2s; }
.js .hero__copy > :nth-child(4) { transition-delay: 0.3s; }
.js .is-ready .hero__copy > * { opacity: 1; transform: none; }

/* ---------- the envelope (a Higgsfield film: it opens once, then your names appear on the card) ---------- */
.hero__stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-md); }
.envelope {
  --open: 0;
  position: relative; width: min(100%, 42rem); aspect-ratio: 1; container-type: inline-size;
  margin-block: -6% -10%;
}
/* The film's paper background melts into the page: multiply keeps the page's own blush and sage, and the edges feather out. */
.envelope__video, .envelope__still {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  mix-blend-mode: multiply;
  -webkit-mask: linear-gradient(to right, #0000, #000 14%, #000 86%, #0000), linear-gradient(to bottom, #0000, #000 9%, #000 86%, #0000);
  -webkit-mask-composite: source-in;
  mask: linear-gradient(to right, #0000, #000 14%, #000 86%, #0000), linear-gradient(to bottom, #0000, #000 9%, #000 86%, #0000);
  mask-composite: intersect;
}
.envelope__still { opacity: 0; }
.envelope.is-still .envelope__still { opacity: 1; }
/* The names sit on the blank card at the top of the opened envelope. */
.invite {
  position: absolute; left: 31.5%; right: 31.5%; top: 30.5%; height: 14.5%;
  display: grid; align-content: center; justify-items: center; gap: 0.9cqi; text-align: center;
  mix-blend-mode: multiply; pointer-events: none;
  opacity: var(--open); translate: 0 calc((1 - var(--open)) * 0.6rem); filter: blur(calc((1 - var(--open)) * 3px));
  transition: opacity 1.4s var(--out), translate 1.6s var(--out), filter 1.4s var(--out);
}
.invite__small { font-size: max(0.5rem, 1.35cqi); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); line-height: 1.4; }
.invite__names { font-size: calc(4.4cqi * var(--fit, 1)); line-height: 1.05; color: var(--ink); white-space: nowrap; max-width: 100%; }
.invite__amp { font-size: 0.7em; color: var(--wine); }
.invite__when { font-family: var(--hand); font-size: max(0.62rem, 1.7cqi); line-height: 1.6; color: var(--wine); }
.envelope.is-open { --open: 1; }
.invite__small, .invite__when { white-space: nowrap; }
/* On a phone the film runs wider than the screen (its edges are feathered), so the card is big enough to read. */
@media (max-width: 40rem) {
  .hero { overflow: clip; }
  .envelope { width: 150%; flex: none; margin-block: -14% -18%; }
  .invite__small { letter-spacing: 0.14em; }
}
.hero__note { display: flex; align-items: center; gap: var(--space-xs); align-self: flex-start; transform: rotate(-3deg); opacity: 0; transition: opacity 0.8s var(--out) 2.4s; }
.hero__note::before { content: ''; flex: none; width: 3rem; height: 2rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Cpath d='M52 3C46 22 30 33 8 33m0 0 9-7m-9 7 10 5' fill='none' stroke='%239b2f45' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.is-ready .hero__note { opacity: 1; }
@media (max-width: 61.99rem) { .hero__note { display: none; } }

/* ---------- personal invitations ---------- */
.guests {
  display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: center;
  padding: var(--section) var(--gutter);
  background: var(--cream);
}
@media (min-width: 58rem) { .guests { grid-template-columns: 6fr 5fr; } }
.guests__text { display: grid; gap: var(--space-md); justify-items: start; }
.guests h2, .rsvp h2, .more h2, .examples h2, .price h2 { font-size: var(--step-3); line-height: 1; max-width: 14ch; }
.guests__pick { margin-top: var(--space-lg); font-size: var(--step--1); font-weight: 600; color: var(--ink-soft); }
.places { display: flex; flex-wrap: wrap; gap: var(--space-md); }
/* Escort cards: tented place cards, the guest's name in ink. */
.place {
  position: relative; display: grid; gap: 0.1rem; justify-items: center; min-width: 8.5rem;
  padding: 1.1rem 1.1rem 0.8rem; border: 1px solid var(--line); border-radius: 0.3rem;
  background: url('/media/home/paper.jpg') center / 22rem auto, var(--paper); text-align: center;
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.7), 0 0.5rem 0 -0.25rem oklch(0.9 0.025 40), 0 0.7rem 1rem -0.6rem oklch(0.4 0.06 20 / 0.25), 0 1.6rem 1.6rem -1.2rem oklch(0.4 0.06 20 / 0.3);
  transition: transform 0.4s var(--out), border-color 0.25s, box-shadow 0.4s var(--out);
}
.place::before { content: ''; position: absolute; top: 0.45rem; left: 18%; right: 18%; border-top: 1px dashed var(--line); }
.place__name { font-family: var(--display); font-size: 1.2rem; line-height: 1.2; }
.place__table { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.place:hover { transform: translateY(-0.2rem) rotate(-1deg); }
.place[aria-pressed='true'] { border-color: var(--wine); box-shadow: 0 0 0 1px var(--wine), 0 0.9rem 1.4rem -0.7rem oklch(0.45 0.145 12 / 0.45); transform: translateY(-0.3rem); }
.place[aria-pressed='true'] .place__table { color: var(--wine); }

/* ---------- flat lays: Higgsfield photos shot from above, the live UI drawn onto their blank screen or card ---------- */
/* Each photo's background was colour-matched to its section, so feathering the edges makes it sit right on the page. */
.flatlay { position: relative; container-type: inline-size; }
.flatlay__photo {
  display: block; width: 100%; height: auto;
  -webkit-mask: linear-gradient(to right, #0000, #000 13%, #000 87%, #0000), linear-gradient(to bottom, #0000, #000 10%, #000 90%, #0000);
  -webkit-mask-composite: source-in;
  mask: linear-gradient(to right, #0000, #000 13%, #000 87%, #0000), linear-gradient(to bottom, #0000, #000 10%, #000 90%, #0000);
  mask-composite: intersect;
}
.flatlay picture { display: block; }
/* Loose eucalyptus and petals float above the page and drift at their own speed as you scroll, which gives the depth. */
.float { position: absolute; z-index: 3; pointer-events: none; height: auto; filter: drop-shadow(0 1.2rem 1rem oklch(0.35 0.06 30 / 0.22)); translate: 0 var(--drift, 0px); will-change: translate; }

.guests__phone { position: relative; display: grid; justify-items: center; perspective: 1600px; }
.flatlay--phone {
  width: min(100%, 46rem);
  /* It lies back on the table and sits up as it scrolls in. */
  transform: rotateX(calc(var(--tilt, 0) * 24deg)) rotateZ(calc(2deg - var(--tilt, 0) * 4deg)) scale(calc(1 - var(--tilt, 0) * 0.06));
  transform-origin: 50% 70%;
}
.float--sprig { width: clamp(7rem, 16vw, 12rem); left: -2%; top: 4%; rotate: -28deg; }
.float--petals { width: clamp(6rem, 13vw, 10rem); right: 0; bottom: 6%; rotate: 20deg; }
/* The blank screen in the photo: x 38.25%, y 12.18%, 33.5% wide, 62.39% tall, rounded like the glass. */
.phone__screen {
  position: absolute; left: 38.25%; top: 12.18%; width: 33.5%; height: 62.39%;
  border-radius: 3.75cqi; overflow: hidden;
  background: linear-gradient(to bottom, oklch(0.9 0.05 15), oklch(0.97 0.018 15) 50%, oklch(0.99 0.005 70));
  color: oklch(0.27 0.05 12);
  box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.08);
}
/* A soft glass sheen over the screen, so it reads as lit glass rather than a sticker. */
.phone__screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(125deg, oklch(1 0 0 / 0.22), transparent 38%, transparent 70%, oklch(1 0 0 / 0.08)); }
/* Everything on the screen is sized in em, and the screen is 17em wide, so the page scales with the photo like a real screenshot. */
.phone__ui { height: 100%; display: flex; flex-direction: column; gap: 0.75em; padding: 0.6em 1.15em 1.3em; font-size: calc(33.5cqi / 17); }
.phone__status { display: flex; justify-content: space-between; align-items: center; font-size: 0.72em; font-weight: 600; padding: 0 0.4em; }
.phone__bars { width: 2.6em; height: 0.8em; background: radial-gradient(circle, currentColor 0.18em, transparent 0.2em) 0 50% / 0.5em 100% repeat-x; opacity: 0.8; }
.phone__top { display: flex; justify-content: space-between; align-items: center; font-size: 0.72em; font-weight: 600; }
.phone__top .display { font-size: 1.5em; }
.phone__top span:last-child { padding: 0.3em 0.8em; border: 1px solid currentColor; border-radius: 999px; }
/* The guest's own photo in an arch, like the real invitation page. */
.phone__arch {
  position: relative; align-self: center; width: 62%; aspect-ratio: 4 / 4.8; flex: none;
  border-radius: 999px 999px 0.5em 0.5em; overflow: hidden; background: oklch(0.9 0.04 20);
  box-shadow: 0 0 0 0.25em oklch(0.99 0.005 70 / 0.7), 0 0.8em 1.6em -0.6em oklch(0.35 0.08 15 / 0.45);
}
.phone__arch img, .phone__arch video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.phone__arch img { transition: opacity 0.5s var(--out), scale 0.9s var(--out); }
.phone__arch video { opacity: 0; transition: opacity 0.6s var(--out); }
.phone__arch.is-live video { opacity: 1; }
.phone__eyebrow { margin-top: auto; font-size: 0.62em; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.phone__dear { font-size: 2.3em; line-height: 0.95; overflow-wrap: anywhere; }
.phone__note { font-size: 0.86em; line-height: 1.45; }
.phone__facts { display: flex; gap: 1.2em; margin: 0; padding-top: 0.7em; border-top: 1px solid oklch(0.27 0.05 12 / 0.15); }
.phone__facts dt { font-size: 0.58em; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; }
.phone__facts dd { margin: 0; font-size: 0.92em; font-weight: 600; font-variant-numeric: tabular-nums; }
.phone__btn { align-self: start; padding: 0.6em 1.1em; border-radius: 999px; background: oklch(0.3 0.06 12); color: var(--paper); font-size: 0.78em; font-weight: 600; }
.phone__ui > * { transition: opacity 0.35s var(--out), transform 0.5s var(--out); }
.phone__screen.is-swapping .phone__ui > :not(.phone__top, .phone__status) { opacity: 0; transform: translateY(0.5em); }
.phone__screen.is-swapping .phone__arch img { scale: 1.06; }
.guests__note { position: absolute; left: 0; top: 30%; transform: rotate(-6deg); max-width: 8rem; z-index: 4; }
@media (max-width: 75rem) { .guests__note { display: none; } }
@media (max-width: 40rem) {
  .guests { overflow: clip; }
  /* On a phone the photo runs wider than the screen (its edges are feathered) so the guest page is big enough to read. */
  .flatlay--phone { width: 160%; max-width: none; flex: none; margin-block: -6% -10%; translate: -6% 0; }
  /* The phone comes before the guest picker, so you can see the page change as you pick. */
  .guests__text { display: contents; }
  .guests__phone { order: 1; }
  .guests__pick, .places { order: 2; }
  .guests__pick { margin-top: 0; }
  .guests__phone { margin-bottom: -22%; }
  .guests__pick, .places { position: relative; z-index: 5; }
  /* One swipeable row of place cards, right under the phone. */
  .places { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: 0.4rem var(--gutter) 1.4rem; scrollbar-width: none; }
  .places::-webkit-scrollbar { display: none; }
  .place { flex: none; min-width: 8rem; scroll-snap-align: start; }
  .guests__phone { justify-items: center; }
}

/* ---------- RSVP ---------- */
.rsvp {
  display: grid; gap: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 5vw, 5rem); align-items: start;
  padding: var(--section) var(--gutter);
}
.rsvp__head { display: grid; gap: var(--space-md); }
@media (min-width: 60rem) {
  .rsvp { grid-template-columns: 5fr 6fr; }
  .rsvp__head { grid-column: 1 / -1; grid-template-columns: 5fr 6fr; column-gap: clamp(2rem, 5vw, 5rem); align-items: end; }
  .rsvp__head .eyebrow { grid-column: 1 / -1; }
}
.flatlay--card { width: min(100%, 36rem); justify-self: center; }
/* The blank card in the photo: x 16.07%, y 12.09%, 67.86% wide, 73.36% tall. The form is 24em wide on it. */
.reply {
  position: absolute; left: 16.07%; top: 12.09%; width: 67.86%; height: 73.36%;
  display: grid; align-content: center; gap: 0.95em; justify-items: center; text-align: center;
  padding: 1.6em 1.3em; font-size: calc(67.86cqi / 24);
}
.reply::before { content: ''; position: absolute; inset: 1.1em; border: 1px solid oklch(0.45 0.145 12 / 0.28); pointer-events: none; }
.reply__kindly { font-size: 2.3em; line-height: 1; }
.reply__by { margin-top: -0.7em; font-family: var(--hand); font-size: 0.95em; color: var(--wine); }
.reply fieldset { display: grid; gap: 0.4em; margin: 0; padding: 0; border: 0; width: 100%; justify-items: center; }
.reply legend { padding: 0; margin: 0 auto 0.4em; font-size: 0.68em; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
.reply__choice { display: flex !important; flex-wrap: wrap; justify-content: center; }
.reply input[type=radio] + span { white-space: nowrap; }
.reply__meal { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 0.4em !important; transition: opacity 0.3s; }
.reply__meal[disabled] { opacity: 0.35; }
.reply label:has(input[type=radio]) { position: relative; cursor: pointer; }
.reply input[type=radio] { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.reply input[type=radio] + span {
  display: inline-flex; align-items: center; gap: 0.45em; min-height: max(2.5em, 2.5rem); padding: 0 0.85em; font-size: 0.9em; background: oklch(1 0 0 / 0.35);
  border: 1px solid var(--line); border-radius: 999px; font-weight: 500; transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}
.reply__choice input + span { font-family: var(--display); font-size: 1.05em !important; font-weight: 400; }
.reply input[type=radio] + span::before { content: ''; width: 0.75em; height: 0.75em; border: 1px solid currentColor; border-radius: 50%; transition: background-color 0.25s, box-shadow 0.25s; }
.reply input[type=radio]:checked + span { border-color: var(--wine); color: var(--wine); background: oklch(0.45 0.145 12 / 0.06); }
.reply input[type=radio]:checked + span::before { background: var(--wine); box-shadow: inset 0 0 0 0.15rem var(--paper); }
.reply input[type=radio]:focus-visible + span { outline: 2px solid var(--wine); outline-offset: 3px; }
.reply__song { display: grid; gap: 0.2em; width: min(100%, 17em); text-align: left; }
.reply__song span { font-size: 0.68em; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); text-align: center; }
.reply__song input { min-height: max(2.4em, 2.5rem); font-size: 1em !important; border: 0; border-bottom: 1px solid var(--ink-soft); background: transparent; border-radius: 0; text-align: center; font-family: var(--hand); font-size: 1rem; }
.reply__song input:focus-visible { outline: none; border-color: var(--wine); box-shadow: 0 1px 0 0 var(--wine); }
.reply.is-sent { animation: sent 0.7s var(--out); }
@keyframes sent { 40% { translate: 0 -0.5rem; } }
.reply .btn { min-height: max(2.6em, 2.6rem); padding: 0 1.4em; font-size: 0.9em; }
@media (max-width: 40rem) {
  .rsvp { overflow: clip; }
  .flatlay--card { width: 150%; max-width: none; margin-inline: -25%; margin-block: -8% -10%; }
}

.tally-stage { position: relative; display: grid; gap: var(--space-sm); justify-items: center; }
.flatlay--tablet { width: min(100%, 44rem); }
.float--petal { width: clamp(5rem, 10vw, 8rem); right: 2%; top: -6%; rotate: -40deg; }
/* The tablet's blank screen: landscape x 14.4%, y 14.78%, 68.57% x 63.43%; on a phone the photo turns upright. The dashboard is 30em wide. */
.tally {
  position: absolute; left: 14.4%; top: 14.78%; width: 68.57%; height: 63.43%;
  display: grid; align-content: start; gap: 1.1em; padding: 0 1.4em 1.2em; overflow: hidden;
  border-radius: 1cqi; background: oklch(0.995 0.003 70); font-size: calc(68.57cqi / 30);
  box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.06);
}
.tally::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, oklch(1 0 0 / 0.35), transparent 35%); }
.tally__bar { display: flex; justify-content: space-between; align-items: center; margin: 0 -1.4em; padding: 0.7em 1.4em; border-bottom: 1px solid var(--line); background: var(--paper); }
.tally__bar .display { font-size: 1.15em; }
.tally__title { font-size: 0.62em; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
@media (max-width: 40rem) {
  .flatlay--tablet { width: 125%; max-width: none; margin-block: -6% -8%; }
  .tally { left: 21.94%; top: 14.4%; width: 63.28%; height: 68.57%; font-size: calc(63.28cqi / 19); }
}
.tally__counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8em; }
.tally__counts p { display: grid; gap: 0.15rem; }
.tally__counts strong { font-family: var(--display); font-weight: 400; font-size: 2.6em; line-height: 1; font-variant-numeric: tabular-nums; transition: color 0.4s; }
.tally__counts strong.is-bump { color: var(--wine); }
.tally__counts span { font-size: 0.72em; color: var(--ink-soft); }
.tally__meals { display: grid; gap: 0.55em; }
.tally__meals li { display: grid; grid-template-columns: 7em 1fr 2em; align-items: center; gap: 0.7em; font-size: 0.8em; }
.tally__meals b { height: 0.55em; border-radius: 999px; background: var(--rose); transform-origin: left; transform: scaleX(calc(var(--n) / 45)); transition: transform 0.8s var(--out), background-color 0.4s; }
.tally__meals li.is-bump b { background: var(--wine); }
.tally__meals em { font-style: normal; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.tally__songs { display: grid; gap: 0.35em; padding-top: 0.8em; border-top: 1px solid var(--line); font-size: 0.85em; }
.tally__songs > p { font-size: 0.72em; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
.tally__songs ol { display: grid; gap: 0.25em; }
.tally__songs li { font-weight: 500; }
.tally__songs li span { color: var(--ink-soft); font-weight: 400; }
.tally__songs li.is-new { animation: arrive 0.8s var(--out); color: var(--wine); }
@keyframes arrive { from { opacity: 0; transform: translateY(-0.5rem); } }
.tally__live { min-height: 1.5em; font-family: var(--hand); color: var(--wine); }
.tally__songs li:nth-child(n+3) { display: none; }
@media (max-width: 40rem) { .tally__songs li:nth-child(3) { display: list-item; } }

/* ---------- the day: scroll (or drag) the venue from afternoon to midnight ---------- */
.day { padding: 0 clamp(0rem, 2vw, 1.5rem); }
/* With motion allowed, the section is tall and the venue stays pinned while you scroll through it. */
.js .day__track { height: 260vh; }
.day__sky {
  --night: 0; --fg: var(--ink);
  position: relative; overflow: hidden; border-radius: clamp(0rem, 2vw, 1.75rem);
  background: oklch(0.3 0.05 260); color: var(--fg); transition: color 0.6s var(--out);
}
.js .day__sky { position: sticky; top: 0; height: 100svh; display: grid; align-items: center; }
.day__video, .day__night { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
/* Only shown when the film cannot be scrubbed: the night photo fades in over the afternoon poster. */
.day__night { z-index: 1; opacity: 0; }
.day.no-video .day__night { opacity: var(--night); }
.day.no-video .day__video { z-index: 0; }
.day__video { z-index: 0; }
/* A veil on the sky side keeps the words readable: paper-light by day, ink-dark by night. */
.day__shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.day__shade::before, .day__shade::after { content: ''; position: absolute; inset: 0; }
.day__shade::before { background: linear-gradient(to right, oklch(0.985 0.01 70 / 0.82), oklch(0.985 0.01 70 / 0.45) 45%, transparent 70%); opacity: calc(1 - var(--night)); }
.day__shade::after { background: linear-gradient(to right, oklch(0.16 0.04 265 / 0.72), oklch(0.16 0.04 265 / 0.3) 50%, transparent 75%); opacity: var(--night); }
@media (max-width: 40rem) {
  .day__shade::before { background: linear-gradient(to bottom, oklch(0.985 0.01 70 / 0.85), oklch(0.985 0.01 70 / 0.55) 70%, oklch(0.985 0.01 70 / 0.3)); }
  .day__shade::after { background: linear-gradient(to bottom, oklch(0.16 0.04 265 / 0.75), oklch(0.16 0.04 265 / 0.45) 70%, oklch(0.16 0.04 265 / 0.25)); }
}
.day__inner { position: relative; z-index: 3; display: grid; gap: var(--space-md); width: min(100%, 44rem); padding: clamp(4rem, 10vw, 7rem) var(--gutter) clamp(3rem, 7vw, 5rem); }
.js .day__inner { padding-block: calc(var(--nav-h) + 1rem) 2rem; }
.day .eyebrow { color: inherit; opacity: 0.8; }
.day__h { font-size: var(--step-3); line-height: 1; max-width: 13ch; }
.day__now { display: grid; gap: var(--space-2xs); margin-top: clamp(1.5rem, 5vh, 4rem); min-height: 9.5rem; }
.day__time { font-weight: 600; font-size: var(--step-1); font-variant-numeric: tabular-nums; }
.day__what { font-size: clamp(2.6rem, 1.6rem + 4vw, 5rem); }
.day__line { font-size: var(--step-1); opacity: 0.85; }
.day__slider { display: block; margin-top: var(--space-md); }
.day__slider input { width: 100%; height: 2.75rem; margin: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: grab; color: inherit; }
.day__slider input:active { cursor: grabbing; }
.day__slider input::-webkit-slider-runnable-track { height: 2px; background: currentColor; opacity: 0.6; }
.day__slider input::-moz-range-track { height: 2px; background: currentColor; opacity: 0.6; }
.day__slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 2.25rem; height: 2.25rem; margin-top: -1.06rem; border-radius: 50%; background: var(--paper); border: 2px solid var(--wine); box-shadow: 0 0.4rem 1rem oklch(0.2 0.05 15 / 0.3); }
.day__slider input::-moz-range-thumb { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--paper); border: 2px solid var(--wine); box-shadow: 0 0.4rem 1rem oklch(0.2 0.05 15 / 0.3); }
.day__slider input:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.day__ticks { display: flex; justify-content: space-between; font-size: var(--step--1); font-weight: 500; opacity: 0.8; }
.day__ticks li { width: 0; display: flex; justify-content: center; white-space: nowrap; }
.day__ticks li:first-child { justify-content: flex-start; }
.day__ticks li:last-child { justify-content: flex-end; }
@media (max-width: 40rem) { .day__ticks li:nth-child(even) { visibility: hidden; } }
.day__note { justify-self: end; color: inherit; transform: rotate(-3deg); opacity: 0.85; }

/* ---------- scrapbook ---------- */
.more { padding: var(--section) var(--gutter); }
.more__head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--space-lg); margin-bottom: clamp(3rem, 7vw, 5rem); }
.more__words { display: grid; gap: var(--space-md); }
/* A peony in an arched window; it blooms as you scroll it into view. */
.arch {
  width: clamp(7rem, 20vw, 15rem); aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: 999px 999px 0.4rem 0.4rem; background: var(--cream);
  box-shadow: 0 0 0 1px oklch(0.4 0.04 20 / 0.08), 0 1.6rem 2.6rem -1.4rem oklch(0.35 0.06 18 / 0.4);
}
@media (max-width: 40rem) {
  .more__head { grid-template-columns: 1fr; }
  .arch { order: -1; width: 6.5rem; }
}
.arch__video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; scale: 1.18; transform-origin: 50% 30%; }
/* Registered so the print's lift, lean and shadow animate smoothly. */
@property --lift { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --rx { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
@property --ry { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
/* The section is a linen tabletop; filmed leaf shadows drift across it, and it fades into the page at top and bottom. */
.more { position: relative; isolation: isolate; overflow: clip; }
.tabletop { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask: linear-gradient(to bottom, #0000, #000 14%, #000 86%, #0000); mask: linear-gradient(to bottom, #0000, #000 14%, #000 86%, #0000); }
.tabletop__light { width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; }
.float--more-sprig { width: clamp(7rem, 14vw, 12rem); left: -1.5rem; top: 38%; rotate: 32deg; }
.float--more-petals { width: clamp(6rem, 11vw, 9rem); right: 2%; bottom: 14%; rotate: -16deg; }
@media (max-width: 40rem) { .float--more-sprig { width: 5.5rem; left: -2.8rem; top: 30%; } .float--more-petals { width: 5rem; right: -2.2rem; bottom: 30%; } }

.book { display: grid; gap: clamp(3rem, 6vw, 4rem) clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); align-items: start; perspective: 1400px; }
/* Each screenshot is a print: cotton-paper border, a faint gloss on the photo, held down by real washi tape. */
.snap {
  --rx: 0deg; --ry: 0deg; --lift: 0;
  position: relative; display: grid; gap: var(--space-md); padding: 0.8rem 0.8rem 1.3rem;
  background: url('/media/home/paper.jpg') center / 24rem auto, oklch(0.995 0.004 70);
  rotate: var(--tilt, 0deg);
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(calc(var(--lift) * 18px));
  box-shadow:
    0 0 0 1px oklch(0.4 0.04 20 / 0.06),
    0 calc(0.5rem + var(--lift) * 1.2rem) calc(0.9rem + var(--lift) * 1.6rem) calc(-0.35rem - var(--lift) * 0.4rem) oklch(0.3 0.05 30 / calc(0.32 - var(--lift) * 0.08)),
    0 calc(1.6rem + var(--lift) * 2rem) calc(2.6rem + var(--lift) * 2rem) -1.2rem oklch(0.3 0.05 30 / 0.28);
  transition: transform 0.6s var(--out), box-shadow 0.6s var(--out), rotate 0.6s var(--out), --lift 0.6s var(--out), --rx 0.4s var(--out), --ry 0.4s var(--out);
}
.snap--a { --tilt: -2deg; }
.snap--b { --tilt: 1.6deg; margin-top: clamp(0rem, 4vw, 3rem); }
.snap--c { --tilt: -1deg; }
.snap__tape { position: absolute; z-index: 2; top: -1rem; left: 50%; width: clamp(7rem, 40%, 9.5rem); translate: -50% 0; rotate: -4deg; opacity: 0.93; mix-blend-mode: multiply; pointer-events: none; }
.snap--b .snap__tape { rotate: 5deg; left: 58%; }
.snap--c .snap__tape { rotate: -2deg; left: 40%; }
.snap__photo { position: relative; overflow: hidden; }
.snap__photo::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(125deg, oklch(1 0 0 / 0.28), transparent 32%, transparent 68%, oklch(1 0 0 / 0.08)); }
.snap img:not(.snap__tape) { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10.5; object-fit: cover; object-position: top left; }
.snap figcaption { display: grid; gap: var(--space-2xs); padding: 0 0.35rem; }
.snap figcaption .note { font-size: 1.15rem; }
.snap figcaption span:last-child { font-size: var(--step--1); color: var(--ink-soft); line-height: 1.5; }
/* Lifted: picked up off the table, it leans toward the pointer and its shadow spreads. */
.snap.is-lifted { --lift: 1; rotate: 0deg; }
/* Placing the prints: each drops onto the table from above, its shadow tightening as it lands. */
.js .snap[data-drop] { opacity: 0; --lift: 2.2; translate: 0 -2.4rem; scale: 1.06; transition: opacity 0.7s var(--out), translate 1.1s var(--out), scale 1.1s var(--out), transform 0.6s var(--out), box-shadow 1.1s var(--out), rotate 1.1s var(--out), --lift 1.1s var(--out), --rx 0.4s var(--out), --ry 0.4s var(--out); transition-delay: var(--drop-delay, 0s); }
.js .snap[data-drop]:not(.is-down) { rotate: calc(var(--tilt) * -2.5); }
.js .snap.is-down { opacity: 1; translate: 0 0; scale: 1; }
.js .snap.is-down:not(.is-lifted) { --lift: 0; }

/* Six kraft gift tags on twine, swaying a little. */
.extras { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-lg); margin-top: clamp(3.5rem, 7vw, 5.5rem); }
.extras li {
  --tw: clamp(16rem, 25vw, 20rem);
  position: relative; display: grid; align-items: center; width: var(--tw); aspect-ratio: 2.73; padding: 0 0.9rem 0 calc(var(--tw) * 0.36); box-sizing: border-box;
  background: url('/media/home/tag.png') center / 100% 100% no-repeat;
  font-family: var(--display); font-size: calc(var(--tw) * 0.068); line-height: 1.15; letter-spacing: -0.005em; color: oklch(0.22 0.04 40);
  filter: drop-shadow(0 0.7rem 0.6rem oklch(0.3 0.05 30 / 0.25));
  transform-origin: 30% 50%; rotate: var(--r, -2deg);
  animation: sway-tag 6s ease-in-out infinite alternate; animation-delay: var(--delay, 0s);
}
.extras li:nth-child(2n) { --r: 3deg; --delay: -2s; }
.extras li:nth-child(3n) { --r: -4deg; --delay: -4s; }
.extras li::before { content: none; }
@media (max-width: 40rem) {
  .extras { gap: 0.9rem 1rem; }
  .extras li { --tw: min(19rem, calc(100vw - 2 * var(--gutter) - 1.5rem)); }
  .extras li:nth-child(even) { margin-left: auto; }
  .extras { flex-direction: column; }
}
@keyframes sway-tag { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }
@media (prefers-reduced-motion: reduce) {
  .extras li { animation: none; }
  .js .snap[data-drop] { opacity: 1; translate: none; scale: none; --lift: 0; rotate: var(--tilt); }
}

/* ---------- examples ---------- */
.examples { padding: var(--section) var(--gutter); background: var(--blush); }
.examples__head { display: grid; gap: var(--space-md); margin-bottom: clamp(3rem, 7vw, 5rem); }
.code { padding: 0.1rem 0.5rem; border: 1px dashed var(--wine); border-radius: 0.3rem; color: var(--wine); font-weight: 700; letter-spacing: 0.06em; white-space: nowrap; }
/* The heading sits in a soft wash of blush so it reads cleanly over the linen. */
.examples__head { position: relative; grid-template-columns: 1fr; align-items: end; gap: var(--space-xl); }
@media (min-width: 52rem) { .examples__head { grid-template-columns: 1fr auto; } }
.examples__head::before { content: ''; position: absolute; z-index: 0; inset: -4rem -10rem -3rem calc(var(--gutter) * -1); pointer-events: none; background: radial-gradient(60% 75% at 30% 50%, oklch(0.93 0.035 18 / 0.85), oklch(0.93 0.035 18 / 0.5) 55%, transparent 80%); }
.examples__words { position: relative; z-index: 1; display: grid; gap: var(--space-md); }
.examples__words .prose { color: var(--ink); }
/* The demo code on a printed invitation card: cotton paper, a fine rule, the code pressed in like letterpress. */
.code-card {
  position: relative; z-index: 1; justify-self: start; display: grid; justify-items: center; gap: 0.35rem; min-width: 15rem;
  padding: 1.6rem 2rem 1.3rem; border: 0; border-radius: 0.15rem; cursor: pointer; text-align: center; color: var(--ink);
  background: url('/media/home/paper.jpg') center / 18rem auto, oklch(0.99 0.006 70);
  box-shadow: 0 0 0 1px oklch(0.4 0.04 20 / 0.06), 0 1.2rem 1.8rem -1rem oklch(0.3 0.06 15 / 0.45), 0 0.2rem 0.4rem oklch(0.3 0.06 15 / 0.1);
  rotate: 3deg; transition: rotate 0.6s var(--out), translate 0.6s var(--out), box-shadow 0.6s var(--out), opacity 0.7s var(--out), scale 0.25s var(--out);
}
.code-card::before { content: ''; position: absolute; inset: 0.45rem; border: 1px solid oklch(0.45 0.145 12 / 0.3); pointer-events: none; }
.code-card__tape { position: absolute; top: -0.9rem; left: 50%; width: 7.5rem; translate: -50% 0; rotate: -5deg; opacity: 0.93; mix-blend-mode: multiply; pointer-events: none; }
.code-card__eyebrow { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
/* Debossed: a light edge below and a dark edge above, as if pressed into the paper. */
.code-card__code { font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem); line-height: 1; letter-spacing: 0.04em; color: var(--wine); text-shadow: 0 1px 0 oklch(1 0 0 / 0.75), 0 -1px 0 oklch(0.3 0.08 12 / 0.25); }
.code-card__hint { font-size: 0.95rem; }
.code-card:hover { rotate: 0deg; translate: 0 -0.3rem; box-shadow: 0 0 0 1px oklch(0.4 0.04 20 / 0.06), 0 2rem 2.6rem -1.2rem oklch(0.3 0.06 15 / 0.5), 0 0.3rem 0.6rem oklch(0.3 0.06 15 / 0.1); }
.code-card:active { scale: 0.97; }
.code-card:focus-visible { outline: 2px solid var(--wine); outline-offset: 5px; }
.code-card.is-copied { animation: stamp 0.5s var(--out); }
@keyframes stamp { 30% { scale: 0.95; } }
/* It drops onto the table as the section scrolls in. */
.js .code-card:not(.is-down) { opacity: 0; translate: 0 -2.4rem; rotate: 12deg; }

/* The section is blush linen in window light (a Higgsfield photo, colour-matched to the section). */
.examples { position: relative; overflow: clip; background: url('/media/home/linen-blush.jpg') center / cover, var(--blush); }
.dates { display: grid; gap: clamp(2.5rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.5rem), 1fr)); perspective: 1600px; }
/* Each couple: a real phone showing their site, a printed name card tucked under it, and a sprig from their theme. */
.date {
  --rx: 0deg; --ry: 0deg; --lift: 0;
  position: relative; display: grid; justify-items: center; text-decoration: none; color: var(--ink);
  rotate: var(--tilt, 0deg);
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(calc(var(--lift) * 24px));
  transition: transform 0.6s var(--out), rotate 0.6s var(--out), --lift 0.6s var(--out), --rx 0.4s var(--out), --ry 0.4s var(--out);
}
.date:nth-child(4n + 1) { --tilt: -3deg; }
.date:nth-child(4n + 2) { --tilt: 2deg; }
.date:nth-child(4n + 3) { --tilt: -1.2deg; }
.date:nth-child(4n + 4) { --tilt: 3deg; }
.date:hover { --lift: 1; rotate: 0deg; }
.date__phone {
  position: relative; z-index: 1; width: min(84%, 15rem); container-type: inline-size;
  filter: drop-shadow(0 calc(0.9rem + var(--lift) * 1.2rem) calc(1rem + var(--lift) * 1.2rem) oklch(0.3 0.06 15 / calc(0.42 - var(--lift) * 0.1)));
  transition: filter 0.6s var(--out);
}
.date__frame { display: block; width: 100%; height: auto; }
/* The phone's glass: x 5.27%, y 2.06%, 89.46% wide, 95.88% tall in the photo. */
.date__screen, .date__glare { position: absolute; left: 5.27%; top: 2.06%; width: 89.46%; height: 95.88%; border-radius: 9cqi; }
.date__screen { object-fit: cover; object-position: 50% 0; }
.date__glare { --gx: 30%; pointer-events: none; background: linear-gradient(115deg, transparent calc(var(--gx) - 30%), oklch(1 0 0 / 0.32) calc(var(--gx) - 6%), oklch(1 0 0 / 0.06) calc(var(--gx) + 10%), transparent calc(var(--gx) + 30%)), linear-gradient(160deg, oklch(1 0 0 / 0.14), transparent 40%); transition: background-position 0.4s; }
/* A printed name card, tucked under the phone. */
.date__text {
  position: relative; z-index: 0; display: grid; gap: 0.25rem; width: 92%; margin-top: -2.2rem;
  /* The right-hand side of the card is kept for the sprig, so it can never sit on the names, at any width. */
  padding: 2.8rem var(--sprig-room) 1.1rem 1.1rem; --sprig-room: clamp(4.6rem, 32%, 6.5rem);
  background: url('/media/home/paper.jpg') center / 18rem auto, oklch(0.99 0.006 70);
  box-shadow: 0 0 0 1px oklch(0.4 0.04 20 / 0.06), 0 1rem 1.6rem -0.9rem oklch(0.3 0.06 15 / 0.4);
  rotate: calc(var(--tilt, 0deg) * -1.4);
}
.date__sprig {
  position: absolute; z-index: 1; right: -0.35rem; bottom: -0.2rem; width: calc(var(--sprig-room) + 0.8rem); height: auto; rotate: -14deg;
  pointer-events: none; filter: drop-shadow(0 0.6rem 0.5rem oklch(0.3 0.06 15 / 0.28));
}
.date__names { font-family: var(--display); font-size: 1.5rem; line-height: 1.05; color: var(--ink); }
.date__names em { font-style: normal; color: var(--blue); padding: 0 0.2em; }
.date__meta { font-size: var(--step--1); color: var(--ink-soft); }
.date__open { margin-top: 0.35rem; font-size: var(--step--1); font-weight: 600; color: var(--blue); }
.date__open::after { content: ' →'; display: inline-block; transition: transform 0.4s var(--out); }
.date:hover .date__open::after { transform: translateX(0.25rem); }
.date:focus-visible { outline: 2px solid var(--wine); outline-offset: 6px; }
/* Dealing: stacked in the middle of the table, then fanned out one after another. */
.js .date:not(.is-dealt) { translate: var(--dx, 0) calc(var(--dy, 0px) - 2.5rem); rotate: calc(var(--tilt) * 4); opacity: 0; --lift: 1.5; }
.js .date { transition: transform 0.6s var(--out), rotate 1.6s cubic-bezier(0.33, 1, 0.68, 1), translate 1.6s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.5s var(--out), --lift 1.6s cubic-bezier(0.33, 1, 0.68, 1), --rx 0.4s var(--out), --ry 0.4s var(--out); transition-delay: 0s, var(--deal-delay, 0s), var(--deal-delay, 0s), var(--deal-delay, 0s), 0s, 0s, 0s; }
@media (prefers-reduced-motion: reduce) { .js .date:not(.is-dealt) { translate: none; opacity: 1; } }

/* ---------- price ---------- */
.price {
  display: grid; gap: clamp(3rem, 7vw, 6rem); align-items: center;
  padding: var(--section) var(--gutter); overflow-x: clip;
}
@media (min-width: 56rem) { .price { grid-template-columns: 5fr 6fr; } }
/* The wax seal: a Higgsfield film pressed as you scroll it into view, with a postmark over the corner. */
.price__seal { position: relative; justify-self: center; width: min(100%, 26rem); }
.seal-card {
  aspect-ratio: 1; overflow: hidden; border-radius: 0.5rem; rotate: -3deg; background: var(--blush);
  box-shadow: 0 0 0 1px oklch(0.4 0.05 15 / 0.08), 0 1.8rem 3rem -1.2rem oklch(0.35 0.08 15 / 0.4);
}
.seal-card__video { width: 100%; height: 100%; object-fit: cover; scale: 1.06; }
.postmark { position: absolute; right: -6%; top: -10%; width: 42%; transform: rotate(12deg); fill: none; stroke: oklch(0.3 0.05 15 / 0.5); stroke-width: 1.4; pointer-events: none; }
@media (min-width: 56rem) { .postmark { right: -14%; } }
.postmark text { fill: oklch(0.3 0.05 15 / 0.55); stroke: none; font: 700 8.6px var(--body); letter-spacing: 1.2px; }
.price__n { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--space-md); }
.price__n .display { font-size: clamp(5rem, 3rem + 8vw, 9rem); line-height: 0.9; color: var(--wine); letter-spacing: -0.03em; }
.price__n .note { font-size: clamp(1.1rem, 0.9rem + 1vw, 1.6rem); rotate: -4deg; }
.price__text { display: grid; gap: var(--space-lg); justify-items: start; }
.steps { display: grid; gap: var(--space-md); max-width: 34rem; }
.steps li { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--space-md); align-items: start; padding-top: var(--space-md); border-top: 1px solid var(--line); color: var(--ink-soft); }
.steps b { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--blush); color: var(--wine); font-family: var(--display); font-weight: 400; font-size: 1.15rem; }
.steps strong { color: var(--ink); font-weight: 600; }

/* ---------- faq ---------- */
.faq { display: grid; gap: var(--space-xl); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); padding: var(--section) var(--gutter); align-items: start; background: var(--cream); }
.faq h2 { font-size: var(--step-3); }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); padding: var(--space-lg) 0; cursor: pointer; list-style: none; font-size: var(--step-1); font-weight: 500; line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; font-family: var(--display); font-size: 1.6rem; line-height: 1; color: var(--wine); transition: transform 0.5s var(--out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: var(--space-lg); color: var(--ink-soft); max-width: 58ch; }

/* ---------- footer ---------- */
.foot { display: grid; gap: var(--space-2xl); padding: clamp(4rem, 10vw, 7rem) var(--gutter) var(--space-xl); background: var(--ink); color: var(--paper); }
.foot__line { font-size: clamp(1.6rem, 1rem + 3vw, 3.2rem); color: var(--rose); line-height: 1.6; }
.foot__row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid oklch(0.98 0.01 70 / 0.2); }
.foot__brand { display: block; }
.foot__brand img { display: block; width: clamp(12rem, 30vw, 17rem); height: auto; }
.foot__links { display: flex; gap: var(--space-lg); font-size: var(--step--1); font-weight: 600; }
.foot__links a { text-decoration: none; }
.foot__links a:hover { color: var(--rose); }

@media (prefers-reduced-motion: reduce) {
  .js .hero__copy > * { opacity: 1; transform: none; }
  .hero__note { opacity: 1; }
  .invite { transition: none; }
  /* No pinning: the venue is a normal section and only the slider moves it. */
  .js .day__track { height: auto; }
  .js .day__sky { position: relative; height: auto; min-height: 36rem; }
}

/* ---------- the four plans ---------- */
.plans { position: relative; padding: var(--section) var(--gutter); background: url('/media/home/table.jpg') center / cover; }
.plans::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--paper), transparent 18%, transparent 82%, var(--paper)); pointer-events: none; }
.plans > * { position: relative; }
.plans__head { display: grid; gap: var(--space-md); margin-bottom: clamp(4rem, 8vw, 5.5rem); }
.plans__head h2 { font-size: var(--step-3); line-height: 1; }
.plans .plan-card { --blue: var(--wine); --mist: var(--blush); --ink: oklch(0.26 0.045 18); --ink-soft: oklch(0.45 0.04 18); }
.plans .plan-card__name { font-family: var(--display); }
.price__from { align-self: center; font-family: var(--hand); font-size: 1.3rem; color: var(--wine); }


/* The price section talks about paying once; the prices themselves live on the plan cards below. */
.price__note { font-size: clamp(1.3rem, 1rem + 1.2vw, 2rem); rotate: -3deg; justify-self: start; margin-bottom: -0.4rem; }
.foot__legal { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--line); font-size: 0.82rem; color: var(--ink-soft); }
.foot__legal a { color: inherit; text-decoration: none; }
.foot__legal a:hover { color: var(--wine); text-decoration: underline; }
.foot__legal span { margin-left: auto; }