/* Editorial save-the-date: a cream page, one oversized statement per screen, fine painted
   botanicals in purple and green, and small tracked labels pinned to the corners.
   The full site (story, day, travel, registry, questions, RSVP) uses the same palette below the opening. */
:root {
  --paper: #f3f0e9;   /* page */
  --stone: #e9e4da;   /* ground behind cards */
  --card: #fbf9f4;    /* invitation and reply cards */
  --ink: #1e1a22;     /* text */
  --muted: #6e6873;
  --plum: #4d2a5e;    /* purple accent */
  --violet: #7a5a92;
  --lilac: #cdb9da;
  --moss: #2d4a39;    /* green, the statement color */
  --sage: #8a9d86;
  --rule: #d8d2c6;
  --on-plum: #f3ecf5;
  --night: #231a2a;   /* lightbox and photo captions */
  --on-night: #f1ebe4;

  /* older names still used by the section styles */
  --wine: var(--plum);
  --on-wine: var(--on-plum);
  --blush: var(--lilac);
  --gold: var(--sage);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .4 0 0 0 0 .35 0 0 0 .9 -.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --display: "Cormorant Garamond", "Cormorant", "Hoefler Text", "Iowan Old Style", Georgia, serif;
  --text: "Cormorant Garamond", "Cormorant", "Garamond", "Iowan Old Style", Georgia, serif;
  --label: "Inter", system-ui, -apple-system, "Helvetica Neue", sans-serif;

  --edge: clamp(18px, 3.2vw, 44px);
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --nav-h: 64px;

  color-scheme: light;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 0;
  scroll-snap-type: y proximity;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 19px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}
/* paper grain over the whole page */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background-image: var(--grain); opacity: 0.16; mix-blend-mode: multiply;
}
.prose p, .faq details p, .row p, .milestones p { font-variant-numeric: oldstyle-nums; hanging-punctuation: first; }

h1, h2 { font-family: var(--display); font-weight: 400; font-feature-settings: "kern" 1, "liga" 1; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 1.5px solid var(--plum); outline-offset: 4px; }

/* Small tracked label, used for every caption and eyebrow */
.sc {
  font-family: var(--label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.7rem;
  font-variant-caps: normal;
}

.text-link {
  color: var(--plum);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: color-mix(in srgb, var(--plum) 35%, transparent);
}
.text-link:hover { text-decoration-color: var(--plum); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 0.95rem 2.1rem 1rem;
  font-family: var(--label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.7rem;
  text-decoration: none;
  border: 1px solid var(--plum);
  color: var(--plum);
  transition: background .2s, color .2s, border-color .2s;
}
.btn:hover { background: var(--plum); color: var(--on-plum); }
.btn-solid { background: var(--plum); color: var(--on-plum); }
.btn-solid:hover { background: var(--moss); border-color: var(--moss); }
.btn-light { border-color: var(--on-plum); color: var(--on-plum); background: transparent; }
.btn-light:hover { background: var(--on-plum); color: var(--plum); }

/* ---------- Corner chrome: monogram top left, counter top right, place and cue at the bottom ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  padding-top: calc(env(safe-area-inset-top, 0px) + 18px);
  padding-left: max(var(--edge), env(safe-area-inset-left, 0px));
  padding-right: max(var(--edge), env(safe-area-inset-right, 0px));
  display: flex; align-items: flex-start; justify-content: space-between;
  color: var(--ink);
  pointer-events: none;
}
.nav > * { pointer-events: auto; }

.monogram {
  font-family: var(--display);
 
  text-decoration: none;
  color: inherit;
  line-height: 1;
}
.nav .monogram {
  display: flex; flex-direction: column; align-items: center; gap: 0.12rem;
  font-size: 1.2rem; letter-spacing: 0.04em;
}
.nav .monogram i { font-style: italic; color: var(--plum); font-size: 0.86em; }

.chrome {
  position: fixed; inset: 0; z-index: 40; pointer-events: none;
  font-family: var(--label); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.6rem;
  /* white in difference mode reads dark on the cream pages and light over the photo pages */
  color: #fff;
  mix-blend-mode: difference;
  transition: opacity .5s;
}
.nav { color: #fff; mix-blend-mode: difference; }
.nav .monogram i, .chrome .counter i { color: #fff; }
.nav:has(.nav-links.open) { mix-blend-mode: normal; color: var(--ink); }
.nav:has(.nav-links.open) .monogram i { color: var(--plum); }
.chrome .cue i { background: rgba(255, 255, 255, 0.35); }
.chrome .cue i::after { background: #fff; }
body.past .chrome { opacity: 0; }
.chrome .cue { transition: opacity .5s; }
body.at-end .chrome .cue { opacity: 0; }
.chrome .counter {
  position: absolute; top: calc(18px + env(safe-area-inset-top, 0px)); right: max(var(--edge), env(safe-area-inset-right, 0px));
  display: flex; flex-direction: column; align-items: center; gap: 0.12rem;
  font-family: var(--display);
  font-size: 1.2rem; letter-spacing: 0.04em; text-transform: none;
  font-variant-numeric: lining-nums tabular-nums; line-height: 1;
}
.chrome .counter i { font-style: normal; color: var(--plum); font-size: 0.8em; }
.chrome .locale {
  position: absolute; left: max(var(--edge), env(safe-area-inset-left, 0px)); bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  writing-mode: vertical-rl; transform: rotate(180deg);
  white-space: nowrap;
}
.chrome .cue {
  position: absolute; right: max(var(--edge), env(safe-area-inset-right, 0px)); bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 0.8rem;
}
.chrome .cue i { display: block; width: 48px; height: 1px; background: color-mix(in srgb, var(--ink) 28%, transparent); position: relative; overflow: hidden; }
.chrome .cue i::after {
  content: ""; position: absolute; inset: 0; background: var(--plum);
  transform: translateX(-100%); animation: cue 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes cue { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }

/* Full-site section links: a vertical rail on the left */
.nav-links {
  position: fixed; left: max(var(--edge), env(safe-area-inset-left, 0px)); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
}
.nav-links a {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--label); font-weight: 500; text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.6rem;
  text-decoration: none; color: var(--ink); opacity: 0.85;
  transition: color .2s, opacity .2s;
}
.nav-links a:hover { color: var(--plum); opacity: 1; }
.nav-links .nav-rsvp { color: var(--plum); opacity: 1; border-right: 1px solid var(--plum); padding-right: 0.45rem; }
/* The rail sits where the place label would go, and stays readable over the purple RSVP band */
body:not(.save-the-date) .chrome .locale { display: none; }
@media (min-width: 981px) {
  .nav-links { mix-blend-mode: difference; }
  .nav-links a, .nav-links .nav-rsvp { color: #fff; text-shadow: none; border-color: #fff; }
  .nav-links a:hover { color: var(--lilac); }
}

.nav-toggle {
  display: none;
  background: none; border: 0; padding: 6px 0; cursor: pointer;
  font-family: var(--label); font-weight: 500; text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.62rem; color: inherit;
}

/* ---------- Opening pages ---------- */
.panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 24px) clamp(56px, 9vw, 120px) calc(96px + env(safe-area-inset-bottom, 0px));
  scroll-snap-align: start;
}
#hero-art, #close-art, #hero-petals { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#hero-art, #close-art { z-index: -3; animation: sway 12s ease-in-out infinite alternate; }
/* the opening's flowers are painted while the page waits for its fonts, then fade up with the names */
#hero-art { transition: opacity 1.8s ease, translate 2.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
html:not(.ready) #hero-art { opacity: 0; translate: 0 14px; }
#hero-petals { z-index: -1; opacity: 0; transition: opacity 2.4s ease; }
#hero-petals.on { opacity: 1; }
/* corner labels and the monogram fade in with the opening instead of appearing ahead of it */
.nav { transition: opacity 1s ease .3s; }
html:not(.ready) .nav, html:not(.ready) .chrome { opacity: 0; }
@keyframes sway { from { transform: scale(1) rotate(0deg); } to { transform: scale(1.014) rotate(0.3deg); } }
/* a pool of paper behind the names keeps them clear of the flowers */
.panel-first::before, .panel-last::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(ellipse 48% 38% at 50% 50%, rgba(243, 240, 233, 0.94), rgba(243, 240, 233, 0) 100%);
}
.panel-inner { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; max-width: 66rem; }
.eyebrow { color: var(--plum); }
.statement {
  font-family: var(--display);
  font-weight: 500;
  font-feature-settings: "kern" 1, "liga" 1, "dlig" 1;
  font-size: clamp(3.9rem, 12.8vw, 11.8rem);
  line-height: 0.92;
  letter-spacing: -0.012em;
  color: var(--moss);
  text-wrap: balance;
}
/* the ampersand gets Cormorant's swash italic, a shade lighter and a touch larger */
.statement em { font-style: italic; font-weight: 400; font-size: 1.06em; color: var(--plum); padding: 0 0.04em; }
.statement .dot { font-style: normal; color: var(--plum); }
.lede {
  font-size: clamp(1.5rem, 2.5vw, 1.95rem);
  font-weight: 400;
  font-style: italic;
  font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "onum" 1;
  letter-spacing: 0.01em;
  line-height: 1.4;
  color: var(--ink);
  text-wrap: balance;
}
.eyebrow { font-size: 0.66rem; letter-spacing: 0.3em; }
.lede .sep { color: var(--plum); font-style: normal; padding: 0 0.55em; }
.count { color: var(--moss); margin-top: 0.3rem; font-variant-numeric: lining-nums tabular-nums; }
.closing-mark {
  font-family: var(--display); font-weight: 500;
  font-size: 2.8rem; line-height: 1; margin-top: 1.2rem; letter-spacing: 0.08em;
}
.closing-mark i { font-style: italic; font-weight: 400; color: var(--plum); padding: 0 0.12em; }

/* Each page's content rises in the first time it scrolls into view */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.2s cubic-bezier(0.2, 0.7, 0.2, 1), transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 150ms);
}
/* "ready" lands on <html> once the fonts and the couple photo are in (script.js, pageReady) */
.ready .panel.in .reveal { opacity: 1; transform: none; }

/* ---------- Invitation card (full site) ---------- */
.invitation {
  position: relative;
  isolation: isolate;
  background: var(--stone);
  padding-block: 104px 136px;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
  display: flex; justify-content: center;
}
.invite {
  position: relative;
  width: 100%;
  max-width: 620px;
  background: var(--card);
  border: 1px solid var(--rule);
  outline: 1px solid var(--rule);
  outline-offset: -14px;
  padding: clamp(3rem, 8vw, 4.75rem) clamp(1.75rem, 7vw, 4rem);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 1.6rem;
  box-shadow: 0 1px 2px rgba(30, 26, 34, 0.05), 0 30px 60px -40px rgba(30, 26, 34, 0.35);
}
.invite .sc { color: var(--muted); }
.names {
  display: flex; flex-direction: column; align-items: center;
  font-size: clamp(3.4rem, 11vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--moss);
}
.names .amp { font-style: italic; color: var(--plum); font-size: 0.55em; line-height: 1.1; margin: 0.05em 0; }
.request { font-style: italic; color: var(--muted); font-size: 1.1rem; line-height: 1.55; }
.when { font-size: 1.15rem; line-height: 1.6; }
.where { line-height: 1.6; }
.where .sc { font-size: 0.8rem; color: var(--plum); }
.follow { font-style: italic; color: var(--muted); }

.card-art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.invite > :not(.card-art):not(.seal) { position: relative; z-index: 1; }

/* Wax seal pressed over the bottom edge of the card */
.seal {
  position: absolute; left: 50%; bottom: -46px; z-index: 2;
  width: 92px; height: 92px; margin-left: -46px;
  border-radius: 49% 51% 47% 53% / 52% 48% 52% 48%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.22), transparent 38%),
    radial-gradient(circle at 50% 50%, #6b3d7e 0%, #4d2a5e 52%, #321a40 100%);
  box-shadow:
    0 3px 6px rgba(30, 26, 34, 0.28),
    0 12px 24px -10px rgba(30, 26, 34, 0.45),
    inset 0 -3px 6px rgba(0, 0, 0, 0.25),
    inset 0 2px 3px rgba(255, 255, 255, 0.18);
  display: grid; place-items: center;
}
.seal::before {
  content: ""; position: absolute; inset: 11px; border-radius: 50%;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.14);
}
.seal span {
  font-family: var(--display); font-style: italic; font-size: 1.45rem; letter-spacing: 0.02em;
  color: #3b1e4a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.22), 0 -1px 0 rgba(0, 0, 0, 0.35);
}

/* ---------- Sections ---------- */
.section { padding-block: 88px 0; }
.section:last-of-type { padding-bottom: 96px; }
.wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 1.5rem clamp(2rem, 6vw, 5rem);
}
.wrap > h2 {
  font-style: italic;
  font-size: clamp(2.1rem, 4.5vw, 2.8rem);
  line-height: 1.1;
  padding-top: 1.75rem;
  border-top: 1px solid var(--ink);
  align-self: start;
  color: var(--moss);
}
.body {
  min-width: 0;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
  max-width: 38rem;
}

.prose { display: flex; flex-direction: column; gap: 1.1rem; }
.dropcap::first-letter {
  float: left;
  font-family: var(--display);
  font-size: 4.1em;
  line-height: 0.82;
  padding: 0.06em 0.1em 0 0;
  color: var(--plum);
}
.signature { font-family: var(--display); font-style: italic; font-size: 1.5rem; color: var(--plum); margin-top: 0.4rem; }

.milestones {
  list-style: none; margin: 1.6rem 0 0; padding: 1.75rem 0 0;
  border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 2.5rem;
}
.milestones li { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.milestones .year {
  font-family: var(--display); font-size: 2.5rem; line-height: 1;
  color: var(--plum); font-variant-numeric: lining-nums; margin-bottom: 0.35rem;
}
.milestones h3 { font-family: var(--text); font-weight: 500; font-size: 1.2rem; margin: 0; }
.milestones p { color: var(--muted); }
@media (max-width: 720px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 10px; }
  .shot, .shot:nth-child(5n + 2), .shot:nth-child(5n + 5) { grid-column: span 1; grid-row: span 1; }
  .shot:nth-child(5n + 1) { grid-column: span 2; grid-row: span 2; }
  .shot:nth-child(5n + 2) { grid-row: span 2; }
  .shot:nth-child(5n + 5) { grid-column: span 2; }
  .lightbox { grid-template-columns: minmax(0, 1fr); }
  .lightbox .lb-prev, .lightbox .lb-next { display: none; }
}
@media (max-width: 560px) { .milestones { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; } }

.date-line { color: var(--muted); margin-bottom: 0.5rem; }

/* Rows: time or label on the left, detail on the right */
.rows { list-style: none; margin: 0; padding: 0; }
.row {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 1.5rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--rule);
}
.row:last-child { border-bottom: 0; }
.row > :first-child { color: var(--plum); padding-top: 0.15rem; font-variant-numeric: lining-nums tabular-nums; }
.row dt.sc { padding-top: 0.45rem; }
.row dd { margin: 0; }
.row dd, .row > div { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.row-title { font-size: 1.3rem; line-height: 1.3; }
.row .place { font-style: italic; }
.row .muted, .muted { color: var(--muted); }

.note {
  margin-top: 1.25rem;
  padding: 1.25rem 1.4rem;
  background: var(--stone);
  display: flex; flex-direction: column; gap: 0.2rem;
}
.note .sc { color: var(--plum); }

.registry {
  list-style: none; margin: 0.4rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.8rem 2rem;
}
.registry a { font-family: var(--label); font-weight: 500; text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.7rem; }

/* RSVP: the one dark band */
.rsvp {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 96px;
  background: var(--plum);
  color: var(--on-plum);
  padding-block: 96px;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
  text-align: center;
}
#rsvp-art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.rsvp-inner { max-width: 36rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.rsvp-inner > .sc { opacity: 0.75; }
.rsvp h2 { font-style: italic; font-size: clamp(3rem, 9vw, 4.75rem); line-height: 1; }
.rsvp .btn { margin-top: 0.6rem; }
.rsvp .small { font-size: 1rem; opacity: 0.85; margin-top: 0.6rem; }
.email { user-select: all; border-bottom: 1px solid color-mix(in srgb, var(--on-plum) 40%, transparent); }

/* Reply card: printed response card set on the purple band */
.reply-card {
  width: 100%;
  max-width: 34rem;
  margin-top: 1.4rem;
  background: var(--card);
  color: var(--ink);
  text-align: left;
  border: 1px solid var(--rule);
  outline: 1px solid var(--rule);
  outline-offset: -10px;
  padding: clamp(2rem, 6vw, 2.75rem) clamp(1.5rem, 6vw, 2.75rem);
  display: flex; flex-direction: column; gap: 1.3rem;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55);
}
.reply-head { text-align: center; color: var(--plum); opacity: 1 !important; }
.field { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.field .sc, .choice legend { color: var(--muted); font-size: 0.62rem; opacity: 1 !important; }
.field input, .field textarea {
  font: inherit; font-size: 1.15rem; color: var(--ink);
  background: transparent;
  border: 0; border-bottom: 1px solid var(--rule); border-radius: 0;
  padding: 0.35rem 0 0.4rem;
  width: 100%;
  resize: vertical;
  transition: border-color .2s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 0.6; font-style: italic; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--plum); }
.choice { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.choice legend { padding: 0; margin-bottom: 0.4rem; }
.option { display: flex; align-items: center; gap: 0.8rem; cursor: pointer; font-size: 1.2rem; font-style: italic; }
.option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.option .box {
  flex: none; width: 18px; height: 18px; border: 1px solid var(--ink);
  display: grid; place-items: center;
}
.option .box::after {
  content: ""; width: 10px; height: 10px; background: var(--plum);
  transform: scale(0); transition: transform .18s ease;
}
.option input:checked + .box::after { transform: scale(1); }
.option input:focus-visible + .box { outline: 1.5px solid var(--plum); outline-offset: 3px; }
.if-yes { display: flex; flex-direction: column; gap: 1.3rem; }
.if-yes[hidden] { display: none; }
.field-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; }
.stepper { display: flex; align-items: center; border: 1px solid var(--rule); }
.stepper button {
  font: inherit; font-size: 1.2rem; line-height: 1; color: var(--plum);
  background: none; border: 0; width: 2.4rem; height: 2.4rem; cursor: pointer;
}
.stepper button:hover { background: var(--stone); }
.stepper output { min-width: 2rem; text-align: center; font-size: 1.15rem; font-variant-numeric: lining-nums tabular-nums; }
.form-msg { color: var(--plum); font-style: italic; }
.reply-card .btn { align-self: center; margin-top: 0.4rem; }
.reply-card .btn:disabled { opacity: 0.6; cursor: wait; }
.reply-done { text-align: center; align-items: center; }
.done-title { font-family: var(--display); font-style: italic; font-size: 1.7rem; line-height: 1.25; text-wrap: balance; }
.done-body { color: var(--muted); }
.link-button {
  font: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--plum); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}

/* Owner-only list of replies */
.responses { max-width: 40rem; }
.tally { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; text-align: center; border-block: 1px solid var(--rule); padding-block: 1rem; }
.tally strong { display: block; font-family: var(--display); font-weight: 400; font-size: 2.2rem; line-height: 1.1; color: var(--plum); font-variant-numeric: lining-nums tabular-nums; }
.tally .sc { color: var(--muted); font-size: 0.58rem; }
.reply-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.reply-list li { padding-block: 0.9rem; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 0.2rem; }
.reply-list li:last-child { border-bottom: 0; }
.reply-list .empty { color: var(--muted); font-style: italic; text-align: center; }
.reply-name { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 1.2rem; }
.reply-detail { color: var(--muted); font-size: 1rem; overflow-wrap: anywhere; }
.reply-detail .sc { color: var(--ink); font-size: 0.58rem; }
.pill { flex: none; font-family: var(--label); font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.6rem; padding: 0.25rem 0.6rem; border: 1px solid currentColor; }
.pill.yes { color: var(--moss); }
.pill.no { color: var(--muted); }

/* Moments gallery */
.gallery {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: clamp(110px, 13vw, 180px);
  gap: 14px;
  margin-top: 1.5rem;
}
.shot { position: relative; margin: 0; overflow: hidden; grid-column: span 2; grid-row: span 2; background: var(--stone); }
.shot:nth-child(5n + 1) { grid-row: span 3; }
.shot:nth-child(5n + 2) { grid-column: span 4; }
.shot:nth-child(5n + 5) { grid-row: span 1; }
.shot button { all: unset; display: block; width: 100%; height: 100%; cursor: zoom-in; }
.shot button:focus-visible { outline: 2px solid var(--plum); outline-offset: -6px; }
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
.shot:hover img { transform: scale(1.035); }
.shot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.5rem 1rem 0.8rem;
  color: var(--on-night); font-size: 0.6rem;
  background: linear-gradient(transparent, rgba(35, 26, 42, 0.6));
  pointer-events: none;
}
.shot.placeholder { background: var(--card); border: 1px solid var(--rule); outline: 1px solid var(--rule); outline-offset: -8px; }
.shot.placeholder figcaption { background: none; color: var(--muted); text-align: center; }
.ph-art { position: absolute; inset: 0; width: 100%; height: 100%; }

.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(28, 20, 34, 0.94);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem;
  padding: calc(56px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
.lightbox figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.8rem; min-width: 0; }
.lightbox img { max-width: 100%; max-height: 78vh; object-fit: contain; }
.lightbox figcaption { color: var(--on-night); font-style: italic; }
.lightbox button {
  font: inherit; color: var(--on-night); background: none; border: 0; cursor: pointer;
  font-size: 1.6rem; padding: 0.5rem;
}
.lightbox .lb-close {
  position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px));
  font-family: var(--label); font-weight: 500; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.22em;
}

/* FAQ */
.faq details { border-bottom: 1px solid var(--rule); }
.faq details:first-child summary { padding-top: 0; }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 1.1rem 2.25rem 1.1rem 0; position: relative;
  font-size: 1.25rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after {
  content: ""; position: absolute; right: 4px; top: 50%;
  width: 13px; height: 1px; background: var(--plum);
  transition: transform .2s;
}
.faq details:first-child summary::before, .faq details:first-child summary::after { top: calc(50% - 0.55rem); }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq details p { color: var(--muted); padding-bottom: 1.2rem; }

/* Footer */
.footer {
  text-align: center;
  padding-block: 64px;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
  background: var(--stone);
  display: flex; flex-direction: column; gap: 0.5rem; align-items: center;
}
#footer-art { width: min(280px, 80%); height: 70px; }
.footer-line { font-family: var(--display); font-style: italic; font-size: 1.5rem; color: var(--moss); text-wrap: balance; }
.footer .monogram { font-size: 2.2rem; color: var(--ink); margin-top: 0.6rem; }
.footer .monogram i { font-style: italic; color: var(--plum); }
.footer .sc { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; scroll-snap-type: none; }
  * { transition: none !important; }
  .chrome .cue i::after { animation: none; transform: none; }
  .reveal { opacity: 1; transform: none; }
  #hero-art, #close-art { animation: none; }
}

/* ---------- Narrow screens ---------- */
@media (max-width: 980px) {
  .nav-toggle { display: block; margin-right: 3.2rem; }
  .nav-links {
    position: fixed; left: 0; right: 0;
    top: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
    transform: none;
    flex-direction: column; gap: 0;
    background: var(--paper);
    max-height: 0; overflow: hidden;
    transition: max-height .35s ease;
  }
  .nav-links.open { max-height: 480px; border-bottom: 1px solid var(--rule); }
  .nav-links a { writing-mode: horizontal-tb; transform: none; padding: 0.9rem; width: 100%; text-align: center; color: var(--ink); }
  .nav-links .nav-rsvp { border-right: 0; padding-right: 0; color: var(--plum); }
  .nav:has(.nav-links.open) { background: var(--paper); box-shadow: 0 1px 0 var(--rule); }
}

@media (max-width: 640px) {
  .panel { padding-left: 28px; padding-right: 28px; }
  .statement { font-size: clamp(3.1rem, 15vw, 5rem); }
  .lede .sep { display: block; height: 0; overflow: hidden; padding: 0; }
  .chrome { font-size: 0.55rem; letter-spacing: 0.18em; }
  .chrome .cue span { display: none; }
  .chrome .cue i { width: 36px; }
}

@media (max-width: 720px) {
  .wrap { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .wrap > h2 { border-top: 1px solid var(--ink); }
  .body { border-top: 0; padding-top: 1.25rem; }
  .section { padding-top: 64px; }
  .rsvp { margin-top: 72px; padding-block: 72px 170px; }
  .row { grid-template-columns: 5rem minmax(0, 1fr); gap: 1rem; }
  .invite { gap: 1.35rem; }
}

/* ---------- Photo pages ---------- */
.panel-photo { color: var(--on-night); }
.panel-photo .bg {
  position: absolute; left: 0; right: 0; top: -7%; height: 114%;
  width: 100%; object-fit: cover; z-index: -2; will-change: transform;
}
.panel-photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 50% 55%, rgba(24, 16, 30, 0.45), rgba(24, 16, 30, 0) 100%),
    linear-gradient(180deg, rgba(24, 16, 30, 0.5), rgba(24, 16, 30, 0.2) 40%, rgba(24, 16, 30, 0.62));
}
.panel-photo .statement { color: #fff; text-shadow: 0 2px 28px rgba(0, 0, 0, 0.35); }
.panel-photo .statement .dot, .panel-photo .statement em, .panel-photo .eyebrow { color: var(--lilac); }
.panel-photo .lede { color: var(--on-night); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.4); }
.panel-photo .text-link { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.45); }
.panel-photo .text-link:hover { text-decoration-color: #fff; }
.credit {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  font-family: var(--label); font-weight: 500; font-size: 0.52rem; letter-spacing: 0.2em; text-transform: uppercase;
  white-space: nowrap; opacity: 0.7;
}
.panel-collage .credit { color: var(--muted); }

/* Collage page: one tall photo beside two stacked ones */
.panel-collage { padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 40px); padding-bottom: 72px; }
.panel-collage .panel-inner { width: 100%; max-width: 72rem; gap: 1.2rem; }
.panel-collage .statement { font-size: clamp(2.8rem, 7.5vw, 6.5rem); }
.collage {
  display: grid; grid-template-columns: 1.05fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px;
  width: 100%; height: clamp(300px, 50vh, 600px); margin-top: 0.6rem;
}
.collage figure { margin: 0; position: relative; overflow: hidden; background: var(--stone); }
.collage figure:first-child { grid-row: 1 / 3; }
.collage figure:first-child img { object-position: center 30%; }
.collage img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.06); transition: transform 1.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.panel.in .collage img { transform: none; }
.collage figcaption {
  position: absolute; left: 14px; bottom: 12px; color: #fff;
  font-family: var(--label); font-weight: 500; font-size: 0.55rem; letter-spacing: 0.2em; text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.65);
}
@media (max-width: 640px) {
  .collage { grid-template-columns: 1fr 1fr; height: clamp(280px, 44vh, 460px); gap: 8px; }
  .panel-collage .statement { font-size: clamp(2.6rem, 12vw, 4rem); }
  .credit { font-size: 0.48rem; }
}

/* Opening page: a framed photo of the two of them sits among the painted botanicals.
   Above the names on phones, beside them on wide screens. The mat carries the tilt so the
   reveal transition on the figure is left alone. */
.panel-first .panel-inner { gap: 1.25rem; }
.hero-photo {
  margin: 0; position: relative;
  height: clamp(220px, 38svh, 400px); aspect-ratio: 3 / 4; max-width: 100%;
}
.hero-photo .mat {
  width: 100%; height: 100%; padding: 10px; background: #fff;
  box-shadow: 0 30px 60px -28px rgba(30, 26, 34, 0.5), 0 0 0 1px rgba(30, 26, 34, 0.06);
  transform: rotate(-1.5deg);
}
/* The frame matches the photo's own 3:4, so faces, her hand on his chest and the ring all stay
   in view; the slight downward bias only matters if a browser rounds the box to a crop. */
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; display: block; }
/* The photo eases in: the frame drifts in with the names, then the picture
   develops inside it like a print. clip-path keeps the starting blur inside the photo's own edge. */
.hero-photo.reveal {
  transform: translateY(36px) scale(0.97);
  transition: opacity 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) .1s, transform 1.5s cubic-bezier(0.2, 0.7, 0.2, 1) .1s;
}
.hero-photo img {
  opacity: 0; filter: blur(10px) saturate(0.5) brightness(1.12); clip-path: inset(0);
  transition: opacity 1.6s ease .35s, filter 1.9s ease .35s;
}
.ready .panel.in .hero-photo img { opacity: 1; filter: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-photo img { opacity: 1; filter: none; }
}
.panel-first .statement { font-size: clamp(3rem, 10vw, 7.5rem); }
@media (min-width: 900px) {
  .panel-first .panel-inner {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: start;
    column-gap: clamp(40px, 5vw, 88px); row-gap: 1.5rem;
    text-align: left; width: 100%; max-width: 80rem;
  }
  .panel-first .panel-inner > * { grid-column: 2; }
  .panel-first .hero-photo { grid-column: 1; grid-row: 1 / 4; height: min(64svh, 42vw); justify-self: end; }
  .panel-first .statement { font-size: clamp(3.5rem, 7.4vw, 9rem); }
}

/* Band page: the group portrait fills the screen and the words sit low, under the faces */
.panel-band { align-items: end; padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
.panel-band .bg { object-position: center 28%; }
.panel-band::before {
  background: linear-gradient(180deg, rgba(24, 16, 30, 0.3), rgba(24, 16, 30, 0.08) 30%, rgba(24, 16, 30, 0.72) 68%, rgba(24, 16, 30, 0.9));
}
.panel-band .statement { font-size: clamp(3rem, 8.5vw, 8rem); }
/* On phones a full-screen crop would cut people off, so the portrait becomes a framed photo above the words */
@media (max-width: 640px) {
  .panel-band { color: var(--ink); align-items: center; align-content: center; padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 36px); padding-bottom: 80px; row-gap: 1.6rem; }
  .panel-band::before { display: none; }
  .panel-band .bg {
    position: static; order: -1; width: 100%; height: auto; aspect-ratio: 3 / 2;
    object-position: center; transform: none !important;
    box-shadow: 0 24px 50px -30px rgba(30, 26, 34, 0.5);
  }
  .panel-band .statement { color: var(--moss); text-shadow: none; font-size: clamp(2.8rem, 13vw, 4.2rem); }
  .panel-band .statement .dot, .panel-band .eyebrow { color: var(--plum); }
  .panel-band .lede { color: var(--ink); text-shadow: none; }
  .panel-band .credit { color: var(--muted); }
}

/* Save-the-date mode (saveTheDate in script.js): only the opening pages show.
   .only-full elements appear on the full site; .only-std elements only on the save-the-date. */
body:not(.save-the-date) .only-std,
body.save-the-date .only-full,
body.save-the-date .nav-links,
body.save-the-date .nav-toggle,
body.save-the-date #story,
body.save-the-date #moments,
body.save-the-date #day,
body.save-the-date #travel,
body.save-the-date #registry,
body.save-the-date #rsvp,
body.save-the-date #faq { display: none !important; }