/* ─────────────────────────────────────────────────────────────
   Wedding site — colours and fonts are injected as CSS variables
   by assets/js/render.js (applyTheme). Edit those in the admin
   panel rather than here.
   ───────────────────────────────────────────────────────────── */

/* These are what the page paints with BEFORE applyTheme() runs, and it cannot
   run until the saved theme has come back from Supabase — a network round
   trip. They used to be the template's sage-and-cream, so every load started
   beige and only turned blue once that request landed. Mobile Safari samples
   the background for its toolbar and overscroll tint during that first paint,
   so the beige stuck at the top of the page. Seeded with the live palette
   (emblue) the first paint is already correct. Keep these in step with
   PALETTES.emblue in assets/js/data.js. */
:root {
  --bg: #edf4fd;
  --surface: #ffffff;
  --ink: #2a3a5c;
  --muted: #2a3a5c;
  --accent: #2a3a5c;
  --soft: #dbe8f8;
  --line: #c9daf0;
  --font-display: Georgia, serif;
  --font-body: system-ui, sans-serif;
  --radius: 4px;
  --wrap: 1080px;
  --pad: clamp(1.25rem, 5vw, 3rem);
}

*, *::before, *::after { box-sizing: border-box; }

/* Several components below set display:flex/grid, which would otherwise
   beat the browser default for [hidden]. */
[hidden] { display: none !important; }

/* Paint the root too, not just the body — this is the colour iOS shows in the
   overscroll area above the page when you rubber-band at the top. */
html { background: var(--bg); scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  line-height: 1.65;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.15; margin: 0; }

.wrap { width: min(var(--wrap), 100% - 2 * var(--pad)); margin-inline: auto; }
.muted { color: var(--muted); }
.small { font-size: 0.875rem; }
.center { text-align: center; }
.lede { font-size: 1.125rem; line-height: 1.75; margin: 0 0 1.5rem; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: #fff; padding: 0.75rem 1rem;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── buttons ─────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  padding: 0.7rem 1.4rem; border-radius: var(--radius);
  font: inherit; font-size: 0.9375rem; letter-spacing: 0.02em;
  text-decoration: none; cursor: pointer;
  transition: opacity 0.2s, transform 0.2s, background 0.2s;
}
.btn:hover { opacity: 0.88; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--outline:hover { border-color: var(--accent); color: var(--accent); }
.btn--ghost { background: transparent; color: inherit; border-color: transparent; padding: 0.5rem 0.75rem; }
.btn--ghost:hover { background: rgba(127, 127, 127, 0.14); opacity: 1; }
.btn--lg { padding: 0.9rem 2rem; font-size: 1rem; }
.btn--sm { padding: 0.45rem 0.9rem; font-size: 0.8125rem; }
.btn--block { width: 100%; }

.link {
  display: inline-block; margin-top: 0.75rem; color: var(--accent);
  text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px;
  font-size: 0.9375rem;
}
.linkbtn {
  background: none; border: 0; color: var(--muted); font: inherit;
  font-size: 0.8125rem; cursor: pointer; text-decoration: underline; padding: 0;
}
.linkbtn:hover { color: #b23c3c; }

/* ── nav ─────────────────────────────────────────────────── */

.nav {
  position: fixed; inset: 0 0 auto; z-index: 90;
  transition: background 0.3s, box-shadow 0.3s, padding 0.3s;
  padding: 0.5rem 0;
}
.nav.is-stuck {
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line);
}
.nav__inner {
  width: min(var(--wrap), 100% - 2 * var(--pad)); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 56px;
}
.nav__brand {
  font-family: var(--font-display); font-size: 1.25rem; letter-spacing: 0.08em;
  text-decoration: none; white-space: nowrap;
}
.nav__links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.nav__links a {
  text-decoration: none; font-size: 0.875rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); padding: 0.25rem 0;
  border-bottom: 1px solid transparent;
}
.nav__links a:hover { color: var(--ink); border-color: var(--accent); }

.nav__toggle {
  display: none; flex-direction: column; gap: 4px; justify-content: center;
  width: 40px; height: 40px; background: none; border: 0; cursor: pointer; padding: 8px;
}
.nav__toggle span { display: block; height: 1.5px; background: var(--ink); transition: transform 0.25s, opacity 0.2s; }

@media (max-width: 860px) {
  .nav__toggle { display: flex; }
  .nav.is-stuck, .nav { background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(10px); }
  .nav__links {
    position: absolute; inset: 100% 0 auto; flex-direction: column; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 0 var(--pad); max-height: 0; overflow: hidden; transition: max-height 0.3s, padding 0.3s;
  }
  body.nav-open .nav__links { max-height: 70vh; padding: 0.5rem var(--pad) 1.25rem; overflow-y: auto; }
  .nav__links a { padding: 0.75rem 0; border-bottom: 1px solid var(--line); width: 100%; }
  body.nav-open .nav__toggle span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  body.nav-open .nav__toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .nav__toggle span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
}

/* ── hero ────────────────────────────────────────────────── */

.hero {
  position: relative; text-align: center;
  display: grid; justify-items: center;
  padding: clamp(4rem, 9vh, 7rem) 0 clamp(2rem, 4vh, 3.5rem);
}
.hero__bg { position: absolute; inset: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.45)); }
.hero:not(.hero--image) .hero__scrim { display: none; }
.hero--image .hero__content { z-index: 2; color: #fff; text-shadow: 0 1px 24px rgba(0,0,0,0.35); }
.hero--image .hero__rule { background: rgba(255,255,255,0.6); }
.hero--image .btn--outline { color: #fff; border-color: rgba(255,255,255,0.6); }
.hero--image .btn--outline:hover { color: #fff; border-color: #fff; }

.hero__content {
  position: relative; max-width: 42rem;
  padding-left: var(--pad); padding-right: var(--pad);
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.hero__content.is-visible { opacity: 1; transform: none; }

.hero__overline {
  margin: 0 0 1.25rem; text-transform: uppercase;
  letter-spacing: 0.24em; font-size: 0.75rem;
}
.hero__names {
  font-family: var(--font-names, var(--font-display));
  font-size: calc(clamp(2.75rem, 9vw, 5.5rem) * var(--names-scale, 1));
  line-height: 1.05; margin: 0;
}
.hero__names--img { max-width: var(--names-size, 480px); margin-inline: auto; }
.hero__namesimg img { width: 100%; height: auto; mix-blend-mode: multiply; }
.hero--image .hero__namesimg img, body.is-dark .hero__namesimg img { mix-blend-mode: normal; }
body.is-editing .hero__names--img .editimg--empty { min-height: 90px; }
body.is-editing .hero__namesimg--slot { max-width: var(--names-size, 560px); margin: 0.75rem auto 0; }

/* Label empty artwork slots so it is obvious what they are for. */
body.is-editing .editimg--empty[data-hint] { position: relative; }
body.is-editing .editimg--empty[data-hint]::before {
  content: attr(data-hint);
  position: absolute; inset: 0.5rem 0.5rem auto; text-align: center;
  font-family: system-ui, sans-serif; font-size: 0.75rem; letter-spacing: 0.04em;
  color: var(--muted); opacity: 0.85; pointer-events: none;
}

.hero__rule { width: 64px; height: 1px; background: var(--line); margin: 1.75rem auto; }
.hero__date { margin: 0 0 0.35rem; font-size: 1.125rem; letter-spacing: 0.08em; }
.hero__location { margin: 0; letter-spacing: 0.06em; font-size: 0.9375rem; opacity: 0.9; }
.hero__actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin-top: 2.5rem; }

.countdown { display: flex; justify-content: center; gap: clamp(1rem, 5vw, 2.5rem); margin-top: 2.5rem; }
.countdown__unit { display: flex; flex-direction: column; gap: 0.25rem; }
.countdown__num { font-family: var(--font-display); font-size: clamp(1.5rem, 5vw, 2.25rem); line-height: 1; }
.countdown__label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.16em; opacity: 0.8; }
.countdown__done { font-family: var(--font-display); font-size: 1.5rem; }

/* ── sections ────────────────────────────────────────────── */

.section {
  position: relative;
  padding: clamp(4.5rem, 9vw, 7.5rem) 0;
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.section.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .section, .hero__content { opacity: 1; transform: none; transition: none; }
}
.section + .section { border-top: 0; }
.section + .section::before,
.section + .section::after { content: ""; position: absolute; left: 50%; }
.section + .section::before {
  top: 0; transform: translateX(-50%);
  width: min(64%, 460px); height: 1px; background: var(--line);
}
.section + .section::after {
  top: -4px; transform: translateX(-50%) rotate(45deg);
  width: 7px; height: 7px; background: var(--bg);
  border: 1px solid var(--line);
}
.section--accent { background: var(--soft); border-top: 0 !important; }
.section--narrow .wrap { width: min(720px, 100% - 2 * var(--pad)); }

.section__title {
  font-family: var(--font-title, var(--font-display));
  font-size: calc(clamp(1.875rem, 4.5vw, 2.75rem) * var(--title-scale, 1));
  text-align: center; margin-bottom: 0.75rem;
}
.section__intro { text-align: center; color: var(--muted); max-width: 46ch; margin: 0 auto 3rem; }
.section__title + .story, .section__title + .timeline, .section__title + .venues,
.section__title + .cards, .section__title + .faq, .section__title + .gallery { margin-top: 3rem; }

/* ── story ───────────────────────────────────────────────── */

.story { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.story--noimg { grid-template-columns: 1fr; max-width: 46rem; margin-inline: auto; text-align: center; }
.story__img img { border-radius: var(--radius); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
@media (max-width: 760px) { .story { grid-template-columns: 1fr; } }

.milestones { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 2rem; margin-top: 4rem; }
.milestone { position: relative; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.milestone__date { margin: 0 0 0.35rem; color: var(--accent); letter-spacing: 0.14em; font-size: 0.75rem; text-transform: uppercase; }
.milestone__title { font-size: 1.25rem; margin-bottom: 0.35rem; }
.milestone__text { margin: 0; color: var(--muted); font-size: 0.9375rem; }

/* ── timeline ────────────────────────────────────────────── */

.timeline { list-style: none; margin: 0 auto; padding: 0; max-width: 640px; }
.timeline__item {
  position: relative; display: grid; grid-template-columns: 110px 1fr; gap: 1.5rem;
  padding: 1.5rem 0; border-bottom: 1px solid var(--line);
}
.timeline__item:last-child { border-bottom: 0; }
.timeline__time {
  font-family: var(--font-display); font-size: 1.0625rem; color: var(--accent);
  padding-top: 0.15rem; white-space: nowrap;
}
.timeline__title { font-size: 1.25rem; }
.timeline__text { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.9375rem; }
@media (max-width: 560px) {
  .timeline__item { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* ── venues & cards ──────────────────────────────────────── */

.venues { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }
.venue {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.venue__img img { width: 100%; }
.venue__body { padding: 1.75rem; }
.venue__name { font-size: 1.5rem; margin-bottom: 0.5rem; }
.venue__where { margin: 0 0 0.25rem; font-size: 1.0625rem; }
.venue__time { margin: 0 0 0.75rem; color: var(--accent); letter-spacing: 0.06em; font-size: 0.9375rem; }
.venue__address, .venue__note { margin: 0 0 0.5rem; color: var(--muted); font-size: 0.9375rem; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
.cards--center { justify-content: center; }
.card {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.75rem;
}
.card--center { text-align: center; }
.card__title { font-size: 1.25rem; margin-bottom: 0.5rem; }
.card__text { margin: 0; color: var(--muted); font-size: 0.9375rem; }

.note {
  margin-top: 3rem; padding: 1.75rem; background: var(--soft);
  border-radius: var(--radius); text-align: center;
}
.note__title { font-size: 1.25rem; margin-bottom: 0.4rem; }
.note__text { margin: 0; color: var(--muted); }

/* ── faq ─────────────────────────────────────────────────── */

.faq { max-width: 720px; margin-inline: auto; }
.faq__item { position: relative; border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  background: none; border: 0; padding: 1.35rem 0; cursor: pointer;
  font: inherit; font-size: 1.0625rem; text-align: left; color: inherit;
}
.faq__chev { font-size: 1.25rem; color: var(--accent); transition: transform 0.25s; }
.faq__item.is-open .faq__chev { transform: rotate(45deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq__item.is-open .faq__a { max-height: 40rem; }
.faq__a p { margin: 0 0 1.35rem; color: var(--muted); }
body.is-editing .faq__a { max-height: none; }

/* ── gallery ─────────────────────────────────────────────── */

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.75rem; }
.gallery__cell { position: relative; margin: 0; }
.gallery__img img {
  aspect-ratio: 1; object-fit: cover; width: 100%;
  border-radius: var(--radius); cursor: zoom-in; transition: opacity 0.2s;
}
.gallery__img img:hover { opacity: 0.9; }
.gallery__caption { font-size: 0.8125rem; color: var(--muted); text-align: center; padding: 0.5rem 0.25rem 0; }
.gallery__caption:empty { display: none; }
body.is-editing .gallery__caption:empty { display: block; }

.lightbox {
  position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,0.9);
  display: grid; place-items: center; padding: 3rem 1rem;
}
.lightbox img { max-width: min(1100px, 92vw); max-height: 86vh; object-fit: contain; }
.lightbox__close, .lightbox__nav {
  position: absolute; background: none; border: 0; color: #fff;
  font-size: 2.5rem; line-height: 1; cursor: pointer; padding: 1rem; opacity: 0.7;
}
.lightbox__close:hover, .lightbox__nav:hover { opacity: 1; }
.lightbox__close { top: 0.5rem; right: 0.75rem; font-size: 2rem; }
.lightbox__nav--prev { left: 0; }
.lightbox__nav--next { right: 0; }

/* ── rsvp ────────────────────────────────────────────────── */

.rsvp__deadline {
  text-align: center; font-family: var(--font-display); font-size: 1.25rem;
  color: var(--accent); margin: 0 0 2.5rem;
}
.rsvpform { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.rsvpform > .btn { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 0.4rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field__label, .field legend {
  font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); padding: 0;
}
.field input, .field select, .field textarea,
.panel input[type="text"], .panel input[type="email"], .panel input[type="number"],
.panel input[type="datetime-local"], .panel textarea, .panel select {
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 0.7rem 0.85rem; width: 100%;
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); outline: none; }

.choices { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.choice { flex: 1 1 200px; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice label {
  display: block; text-align: center; padding: 0.85rem 1rem; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color 0.2s, background 0.2s;
}
.choice input:checked + label { border-color: var(--accent); background: var(--surface); box-shadow: inset 0 0 0 1px var(--accent); }
.choice input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }

.rsvp-extra { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.rsvp-thanks {
  text-align: center; font-family: var(--font-display); font-size: 1.375rem;
  line-height: 1.5; padding: 3rem 1rem; max-width: 34ch; margin-inline: auto;
}
.form-error {
  grid-column: 1 / -1; margin: 0; color: #b23c3c; font-size: 0.9375rem;
  background: rgba(178, 60, 60, 0.08); border-radius: var(--radius); padding: 0.6rem 0.85rem;
}
@media (max-width: 620px) {
  .rsvpform, .rsvp-extra { grid-template-columns: 1fr; }
}

/* ── footer ──────────────────────────────────────────────── */

.footer { text-align: center; padding: 3.5rem var(--pad); border-top: 1px solid var(--line); }
.footer__text { font-family: var(--font-display); font-size: 1.25rem; margin: 0 0 0.75rem; }
.footer__meta { margin: 0; font-size: 0.75rem; }
.footer__meta a { color: var(--muted); text-decoration: none; opacity: 0.6; }
.footer__meta a:hover { opacity: 1; }

/* ─────────────────────────────────────────────────────────
   Admin
   ───────────────────────────────────────────────────────── */

.adminbar {
  position: fixed; inset: auto 0 0; z-index: 120;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.6rem clamp(0.75rem, 3vw, 1.5rem);
  background: #1c1f26; color: #f2f2f0;
  font-family: system-ui, sans-serif; font-size: 0.875rem;
  box-shadow: 0 -2px 20px rgba(0,0,0,0.2);
}
.adminbar__left { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.adminbar__left span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adminbar__dot { width: 8px; height: 8px; border-radius: 50%; background: #6ec07c; flex: none; }
.adminbar__right { display: flex; gap: 0.35rem; flex-wrap: wrap; justify-content: flex-end; }
.adminbar .btn { font-family: inherit; }
.adminbar .btn--ghost { color: #f2f2f0; }
body.has-adminbar { padding-bottom: 60px; }

@media (max-width: 700px) {
  .adminbar { flex-direction: column; align-items: stretch; gap: 0.5rem; }
  .adminbar__right { justify-content: stretch; }
  .adminbar__right .btn { flex: 1; }
  body.has-adminbar { padding-bottom: 120px; }
}

/* inline editing */

body.is-editing [data-edit] {
  outline: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 3px; border-radius: 2px; min-width: 2rem; min-height: 1em;
  transition: background 0.15s;
}
body.is-editing [data-edit]:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
body.is-editing [data-edit]:focus { outline: 2px solid var(--accent); background: var(--surface); }
body.is-editing [data-edit].is-empty::before {
  content: attr(data-placeholder); color: var(--muted); opacity: 0.55; font-style: italic;
}
body.is-editing .hero--image [data-edit] { outline-color: rgba(255,255,255,0.7); }

.editimg { position: relative; }
.editimg--empty { display: none; }
body.is-editing .editimg--empty {
  display: block; min-height: 160px; border: 1px dashed var(--line);
  border-radius: var(--radius); background: color-mix(in srgb, var(--muted) 8%, transparent);
}
body.is-editing .hero__bg.editimg--empty { border: 0; background: none; min-height: 0; }

.imgbtn {
  position: absolute; inset: auto 0 0; z-index: 5;
  display: flex; gap: 0.35rem; justify-content: center; padding: 0.6rem;
}
.hero__bg .imgbtn { inset: 84px 0 auto; }
.imgbtn__b {
  font-family: system-ui, sans-serif; font-size: 0.8125rem;
  background: rgba(28,31,38,0.92); color: #fff; border: 0;
  padding: 0.5rem 0.9rem; border-radius: 999px; cursor: pointer;
}
.imgbtn__b:hover { background: #1c1f26; }
.imgbtn__b--danger:hover { background: #b23c3c; }

.itemtools {
  position: absolute; top: -12px; right: 0; z-index: 6;
  display: none; gap: 2px; background: #1c1f26; border-radius: 999px; padding: 3px;
}
body.is-editing [data-item]:hover > .itemtools,
body.is-editing [data-item]:focus-within > .itemtools { display: flex; }
.itemtools__btn {
  background: none; border: 0; color: #f2f2f0; cursor: pointer;
  width: 26px; height: 26px; border-radius: 50%; font-size: 0.8125rem; line-height: 1;
}
.itemtools__btn:hover { background: rgba(255,255,255,0.18); }
.itemtools__btn--danger:hover { background: #b23c3c; }

.addbtn {
  display: none; margin: 2rem auto 0;
  font-family: system-ui, sans-serif; font-size: 0.875rem;
  background: none; color: var(--accent); border: 1px dashed var(--accent);
  border-radius: var(--radius); padding: 0.6rem 1.25rem; cursor: pointer;
}
body.is-editing .addbtn { display: block; }
.addbtn:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* modal */

.modal {
  position: fixed; inset: 0; z-index: 200; background: rgba(20,20,24,0.55);
  display: grid; place-items: center; padding: 1.5rem;
  font-family: system-ui, sans-serif;
}
.modal__box {
  position: relative; background: var(--surface); color: var(--ink);
  border-radius: 8px; padding: 2rem; width: min(400px, 100%);
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.modal__box h2 { font-family: var(--font-display); font-size: 1.5rem; margin-bottom: 0.5rem; }
.modal__box p { margin: 0 0 1.5rem; font-size: 0.875rem; }
.modal__box label { display: block; margin-bottom: 1rem; font-size: 0.8125rem; color: var(--muted); }
.modal__box input {
  display: block; width: 100%; margin-top: 0.35rem; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.65rem 0.8rem;
}
.modal__box .form-error { margin-bottom: 1rem; }
.modal__close {
  position: absolute; top: 0.5rem; right: 0.75rem;
  background: none; border: 0; font-size: 1.75rem; line-height: 1; cursor: pointer; color: var(--muted);
}

/* panel */

.panel {
  position: fixed; inset: 0 0 0 auto; z-index: 110;
  width: min(640px, 100%); background: var(--surface); color: var(--ink);
  display: flex; flex-direction: column;
  box-shadow: -8px 0 40px rgba(0,0,0,0.18);
  font-family: system-ui, sans-serif; font-size: 0.9375rem;
}
.panel__head {
  display: flex; align-items: center; gap: 0.5rem;
  border-bottom: 1px solid var(--line); padding: 0.5rem 0.5rem 0 0.75rem; flex: none;
}
.panel__tabs { display: flex; gap: 0.25rem; overflow-x: auto; flex: 1; }
.panel__tab {
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 0.75rem 0.85rem; font: inherit; font-size: 0.875rem;
  color: var(--muted); cursor: pointer; white-space: nowrap;
}
.panel__tab.is-active { color: var(--ink); border-color: var(--accent); }
.panel__close { background: none; border: 0; font-size: 1.75rem; line-height: 1; cursor: pointer; color: var(--muted); padding: 0 0.5rem 0.5rem; }
.panel__body { overflow-y: auto; padding: 1.5rem; padding-bottom: 6rem; }
.panel__pane { display: none; }
.panel__pane.is-active { display: block; }
.panel__h { font-family: inherit; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin: 2rem 0 0.85rem; }
.panel__pane > .panel__h:first-child { margin-top: 0; }
.panel__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 2rem 0 0.85rem; }
.panel__row .panel__h { margin: 0; }
body.panel-open { overflow: hidden; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.stat { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; text-align: center; }
/* System font here on purpose — some display faces use old-style numerals,
   which make counts hard to read at a glance. */
.stat__n { display: block; font-family: system-ui, sans-serif; font-size: 1.75rem; font-weight: 500; line-height: 1; }
.stat__l { display: block; font-size: 0.75rem; color: var(--muted); margin-top: 0.35rem; }

.tally { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); }
.tally li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--line); }
.tally li:last-child { border-bottom: 0; }
.tally em { color: var(--muted); font-style: normal; text-align: right; }

.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.table th, .table td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 500; }
.table tr:last-child td { border-bottom: 0; }
.table .sub { display: block; color: var(--muted); font-size: 0.75rem; }
.wrap-cell { max-width: 18rem; }

.swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.6rem; }
.swatch { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.6rem; cursor: pointer; text-align: left; font: inherit; }
.swatch.is-active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.swatch__chips { display: flex; gap: 3px; margin-bottom: 0.45rem; }
.swatch__chips i { width: 100%; height: 22px; border-radius: 2px; border: 1px solid rgba(0,0,0,0.08); }
.swatch__label { font-size: 0.8125rem; color: var(--muted); }

.pickers { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.6rem; margin-bottom: 1rem; }
.picker { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--muted); }
.picker input[type="color"] { width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: none; cursor: pointer; flex: none; }

.fontlist { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.6rem; }
.fontopt { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.85rem; cursor: pointer; text-align: center; font: inherit; }
.fontopt.is-active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.fontopt__demo { display: block; font-size: 1.375rem; margin-bottom: 0.25rem; }
.fontopt__name { display: block; font-size: 0.75rem; color: var(--muted); }

.toggle { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0; cursor: pointer; }
.toggle input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.toggle--bare { padding: 0; }
.range { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; }
.range input[type="range"] { flex: 1; max-width: 220px; accent-color: var(--accent); }
.range input[type="number"] { width: 90px; }

.seclist { display: grid; gap: 0.4rem; }
.secrow { display: flex; align-items: center; gap: 0.6rem; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.5rem 0.6rem; }
.secrow input[type="text"] { flex: 1; }
.iconbtn { background: none; border: 1px solid var(--line); border-radius: var(--radius); width: 30px; height: 30px; cursor: pointer; color: var(--muted); flex: none; }
.iconbtn:hover { border-color: var(--accent); color: var(--accent); }

.taglist { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.85rem; }
.tag { display: flex; align-items: center; gap: 0.25rem; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.25rem 0.25rem 0.25rem 0.5rem; }
.tag input { border: 0 !important; background: none !important; padding: 0.2rem !important; width: 8rem !important; }
.tag__x { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 0.75rem; padding: 0.25rem; }
.tag__x:hover { color: #b23c3c; }

.sharebox { display: flex; gap: 0.5rem; }
.sharebox input { flex: 1; }

.warnbox { margin-top: 2rem; background: #fff5e0; border: 1px solid #e8d5a8; border-radius: var(--radius); padding: 1rem; color: #5c4a1f; }
.warnbox p { margin: 0.4rem 0 0; font-size: 0.875rem; line-height: 1.55; }

.toast {
  position: fixed; left: 50%; bottom: 5.5rem; transform: translateX(-50%); z-index: 400;
  background: #1c1f26; color: #f2f2f0; padding: 0.7rem 1.2rem; border-radius: 999px;
  font-family: system-ui, sans-serif; font-size: 0.875rem;
  box-shadow: 0 8px 30px rgba(0,0,0,0.25); max-width: calc(100vw - 2rem); text-align: center;
}
.toast--error { background: #b23c3c; }

@media print {
  .nav, .adminbar, .panel, .footer__meta, .addbtn, .itemtools, .imgbtn { display: none !important; }
  .section { opacity: 1; transform: none; page-break-inside: avoid; }
}

/* ── monogram & line-art illustrations ───────────────────── */

/* Both the monogram and the venue sketch are line art on white.
   multiply drops the white out so they sit on the page background
   instead of in a visible white box. */
.hero__monogram { margin: 0 auto 1.75rem; max-width: var(--monogram-size, 132px); }
.hero__monogram img { width: 100%; height: auto; mix-blend-mode: multiply; }
.hero--image .hero__monogram img { mix-blend-mode: normal; }

.illustration { margin: 0 auto 3.5rem; max-width: 900px; }
.illustration img { width: 100%; height: auto; mix-blend-mode: multiply; }

/* On a dark palette, multiply would render the line art as a black slab.
   applyTheme() sets .is-dark when the chosen background is dark. */
body.is-dark .hero__monogram img,
body.is-dark .illustration img { mix-blend-mode: normal; }

@media (max-width: 560px) {
  .hero__monogram { max-width: min(var(--monogram-size, 132px), 40vw); margin-bottom: 1.25rem; }
  .illustration { margin-bottom: 2.5rem; }
}

/* Editing affordances for the two new image slots */
body.is-editing .hero__monogram.editimg--empty { min-height: 96px; max-width: var(--monogram-size, 132px); }
body.is-editing .illustration.editimg--empty { min-height: 180px; }

/* ── optional links on cards ─────────────────────────────── */

.linkedit { display: none; flex-direction: column; gap: 0.4rem; margin-top: 0.9rem; }
body.is-editing .linkedit { display: flex; }
.linkedit input {
  font: inherit; font-size: 0.8125rem; width: 100%;
  color: var(--ink); background: var(--bg);
  border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 0.45rem 0.6rem;
}
.linkedit input:focus { border-style: solid; border-color: var(--accent); outline: none; }
.linkedit input::placeholder { color: var(--muted); opacity: 0.7; }

/* ── draft sections ──────────────────────────────────────── */

.section--draft { outline: 1px dashed #d9c48a; outline-offset: -10px; }
.draftwrap { text-align: center; margin-bottom: 1.5rem; }
.draftbadge {
  display: inline-block; padding: 0.3rem 0.85rem; border-radius: 999px;
  background: #fff5e0; color: #5c4a1f; border: 1px solid #e8d5a8;
  font-family: system-ui, sans-serif; font-size: 0.75rem; letter-spacing: 0.02em;
}
.nav__links a.is-draft::after {
  content: "•"; color: #c8a233; margin-left: 0.35rem; font-size: 1.1em; line-height: 0;
}

/* Section state control in the admin panel */
.secrow select { flex: none; width: auto; padding-block: 0.4rem; font-size: 0.8125rem; }
.secrow--draft { border-color: #e8d5a8; background: #fffdf6; }
.secrow--hidden { opacity: 0.55; }
.legend { list-style: none; margin: 0 0 1rem; padding: 0.85rem 1rem; background: var(--bg);
          border: 1px solid var(--line); border-radius: var(--radius); font-size: 0.8125rem; }
.legend li + li { margin-top: 0.4rem; }
.legend span { color: var(--muted); }

/* ── section management ──────────────────────────────────── */

.iconbtn--danger:hover { border-color: #b23c3c; color: #b23c3c; }
.sectag {
  font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line); border-radius: 999px;
  padding: 0.15rem 0.45rem; flex: none;
}
.addsec { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.addsec input { flex: 1 1 12rem; }
.addsec select { flex: 1 1 14rem; }

/* ── the cover tagline ───────────────────────────────────── */

.hero__tagline {
  font-family: var(--font-tagline, var(--font-display));
  font-size: calc(clamp(1.125rem, 2.4vw, 1.5rem) * var(--tagline-scale, 1));
  letter-spacing: 0.04em;
  margin: 0.9rem 0 0;
}
.hero__tagline:empty { display: none; }
body.is-editing .hero__tagline:empty { display: block; min-height: 1.4em; }

/* ── sections read as separate blocks ────────────────────── */

/* One background throughout — sections are separated by a drawn rule with a
   small diamond, rather than by changing colour. */
.section--band, .section--accent { background: transparent; }

/* Cards sit on whatever the section background is, always in surface colour. */
.card, .venue {
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(20, 30, 50, 0.04), 0 6px 18px rgba(20, 30, 50, 0.05);
}
.note { background: var(--surface); border: 1px solid var(--line); }

/* ── multi-line text areas ───────────────────────────────── */

.is-multiline { white-space: pre-line; }
.textbox {
  max-width: 46rem; margin-inline: auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.75rem 2rem;
}
body.is-editing .textbox { min-height: 6rem; }

/* ── card category label ─────────────────────────────────── */

.card__tag {
  margin: 0 0 0.45rem; font-size: 0.6875rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent);
}
.card__tag:empty { display: none; }
body.is-editing .card__tag:empty { display: block; min-height: 1em; }

/* ── address block on venue cards ────────────────────────── */

.addrbox {
  margin-top: 1.25rem; padding: 0.9rem 1rem;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
}

.addrbox__label {
  display: block; font-size: 0.625rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 0.3rem;
}
.addrbox__text { margin: 0; font-size: 0.9375rem; }
.addrbox .link { margin-top: 0.5rem; font-size: 0.875rem; }


/* ── the two notes under Details ─────────────────────────── */

.notes { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 3rem; }
.notes .note { margin-top: 0; }

/* ── a plain list of places, no boxes, no links ──────────── */

.plainlist { list-style: none; margin: 2.5rem auto 0; padding: 0; max-width: 40rem; }
.plainlist__row {
  position: relative; display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.25rem 0.9rem; padding: 0.9rem 0; border-bottom: 1px solid var(--line);
}
.plainlist__row:last-child { border-bottom: 0; }
.plainlist__name { font-family: var(--font-display); font-size: 1.25rem; }
.plainlist__note { color: var(--muted); font-size: 0.9375rem; }
.plainlist__note:empty { display: none; }
body.is-editing .plainlist__note:empty { display: inline; min-width: 8rem; }

/* ═════════ mockup design system ═════════════════════════════ */

/* Small letterspaced navy labels — the spine of the whole layout. */
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink); margin: 0 0 0.5rem; font-weight: 400;
}
h3.eyebrow { font-size: 0.6875rem; }

/* ── cover ───────────────────────────────────────────────── */

.hero__date { margin: 0 0 0.4rem; letter-spacing: 0.22em; }
.hero__location { margin: 0; letter-spacing: 0.02em; }
.hero__actions { margin-top: 1.6rem; }
.hero__deadline { margin: 1.1rem 0 0; letter-spacing: 0.2em; color: var(--muted); }
body.is-editing .hero__foot.editimg--empty { position: relative; min-height: 140px; }

/* ── the swash that closes each section ──────────────────── */

.flourish { margin: 3.5rem auto 0; width: 120px; color: var(--accent); opacity: 0.55; }
.flourish svg { width: 100%; height: auto; display: block; }
.section + .section::before, .section + .section::after { display: none; }

/* ── Details: illustration beside the words ──────────────── */

.venues { display: grid; gap: 2.5rem; grid-template-columns: 1fr; margin-top: 3rem; }
.venue {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start;
  background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible;
}
.venue__img img { width: 100%; height: auto; border-radius: var(--radius); }
.venue__body { padding: 0; }
.venue__where { font-size: 1.375rem; margin: 0 0 0.5rem; }
.venue__time, .venue__note { margin: 0 0 0.5rem; font-size: 0.9375rem; }
.venue__note { color: var(--muted); }
@media (max-width: 720px) { .venue { grid-template-columns: 1fr; } }

.notes { grid-template-columns: 1fr 1fr; gap: 2.5rem; margin-top: 3.5rem;
         border-top: 1px solid var(--line); padding-top: 2rem; }
.notes .note { background: transparent; border: 0; padding: 0; text-align: left; }
.notes .note__text { margin: 0; font-size: 0.9375rem; }
@media (max-width: 620px) { .notes { grid-template-columns: 1fr; gap: 1.75rem; } }

/* ── Travel: icon rows ───────────────────────────────────── */

.inforows { max-width: 40rem; margin: 3rem auto 0; }
.inforow {
  position: relative; display: grid; grid-template-columns: 2.5rem 1fr; gap: 1.25rem;
  padding: 1.75rem 0; border-bottom: 1px solid var(--line);
}
.inforow:last-child { border-bottom: 0; }
.inforow__icon { color: var(--accent); padding-top: 0.15rem; }
.icon { width: 26px; height: 26px; display: block; }
.inforow__text { margin: 0; font-size: 0.9375rem; }

/* ── Stay: plain rows, no pictures ───────────────────────── */

.stays { max-width: 40rem; margin: 2.5rem auto 0; }
.stay { position: relative; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.stay:last-child { border-bottom: 0; }
.stay__text { margin: 0; font-size: 0.9375rem; color: var(--muted); }
.stay .link { margin-top: 0.5rem; }

.mapimage { margin: 2.5rem auto 0; max-width: 900px; }
.mapimage img { width: 100%; height: auto; border-radius: var(--radius); }
.bigimage { margin: 1rem auto 0; max-width: 980px; }
.bigimage img { width: 100%; height: auto; border-radius: var(--radius); }
.bigimage__cap { margin-top: 1rem; }

/* ── Things to Do: grouped columns ───────────────────────── */

.listcols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; margin-top: 3rem; align-items: start; }
.listcol__head { margin-bottom: 0.5rem; color: var(--accent); }
.listcols .plainlist { margin: 0; max-width: none; }
.listcols .plainlist__row { display: block; padding: 0.75rem 0; border-bottom: 0; }
.listcols .plainlist__name { display: block; font-size: 1.0625rem; }
.listcols .plainlist__note { display: block; font-size: 0.875rem; }
@media (max-width: 800px) { .listcols { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 520px) { .listcols { grid-template-columns: 1fr; } }

/* ── closing panel ───────────────────────────────────────── */

.closing { position: relative; padding-bottom: 3.5rem; text-align: center; }
.closing__mono { max-width: 92px; margin: 2.5rem auto 0; }
.closing__mono img { width: 100%; height: auto; mix-blend-mode: multiply; }
.closing__big {
  font-family: var(--font-display); font-size: clamp(1.75rem, 4.2vw, 2.5rem);
  line-height: 1.35; margin: 0 auto 1.5rem; max-width: 22ch;
}
.closing__small { color: var(--muted); max-width: 34ch; margin: 0 auto; font-size: 0.9375rem; }
.closing__art { pointer-events: none; }
.closing__art img { width: 100%; height: auto; mix-blend-mode: multiply; }
body.is-editing .closing__art { pointer-events: auto; }
body.is-editing .closing__art.editimg--empty { min-height: 160px; }

.iconpick { font: inherit; font-size: 0.8125rem; padding: 0.35rem 0.5rem;
            border: 1px dashed var(--line); border-radius: var(--radius);
            background: var(--bg); color: var(--ink); }

/* ── framing controls on every picture ───────────────────── */

.imgctl { display: none; }
body.is-editing .imgctl {
  display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: center;
  margin-top: 0.5rem; padding: 0.6rem 0.75rem;
  background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius);
  font-family: system-ui, sans-serif;
}
.imgctl label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.6875rem;
                letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.imgctl select { font: inherit; font-size: 0.75rem; padding: 0.25rem 0.4rem;
                 border: 1px solid var(--line); border-radius: var(--radius);
                 background: var(--bg); color: var(--ink); }
.imgctl input[type="range"] { width: 108px; accent-color: var(--accent); }
.imgctl__reset { font: inherit; font-size: 0.6875rem; text-transform: uppercase;
                 letter-spacing: 0.08em; background: none; border: 1px solid var(--line);
                 border-radius: var(--radius); padding: 0.3rem 0.6rem; cursor: pointer;
                 color: var(--muted); }
.imgctl__reset:hover { border-color: var(--accent); color: var(--accent); }

/* A framed picture clips its image, so the buttons need to sit clear. */
body.is-editing .editimg { position: relative; }

/* ═════════ round 2 fixes ════════════════════════════════════ */

/* THE horizontal-scroll bug: these radios were picking up width:100% from the
   .field rule and, with no positioned ancestor, anchoring to the viewport. */
.choice { position: relative; }
.choice input {
  position: absolute; opacity: 0; pointer-events: none;
  width: 1px !important; height: 1px; margin: 0; padding: 0;
}
html, body { max-width: 100%; overflow-x: clip; }

/* Tighter rhythm between sections. */
.section { padding: clamp(3rem, 5.5vw, 4.5rem) 0; }
.section--wide .wrap { width: min(1240px, 100% - 2 * var(--pad)); }

/* Bigger section titles. */
.section__title {
  font-size: calc(clamp(2.5rem, 6vw, 4rem) * var(--title-scale, 1));
  margin-bottom: 1rem;
}

/* A plain hairline between sections. */
.flourish {
  margin: 3rem auto 0; width: min(300px, 60%); height: 1px;
  background: var(--line); display: block;
}
.flourish svg { display: none; }

/* The cover artwork is a scene the text sits inside: full width, anchored to
   the bottom of the cover, rising up behind the names with its sky dissolving
   into the page colour. */

.hero__foot {
  position: static; width: min(var(--wrap), 100% - 2 * var(--pad));
  height: auto; margin: 1rem auto 0;          /* sits just under the text */
  z-index: auto; pointer-events: auto; overflow: visible;
}
.hero__foot img { width: 100%; height: auto; }
body.is-editing .hero__foot { pointer-events: auto; z-index: 0; }

/* Artwork that closes a section (the mountains under Things to Do). */
.sectionfoot { width: min(var(--wrap), 100% - 2 * var(--pad)); margin: 2.5rem auto 0; }
body.is-editing .sectionfoot.editimg--empty { min-height: 150px; }

/* Things to Do — three columns, filling the width, like the mockup. */
.listcols { grid-template-columns: repeat(3, 1fr); gap: 3rem; margin-top: 2.5rem; }
.onecol { margin-top: 2rem; }
.listcol__head { margin-bottom: 0.85rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--line); }
.addbtn--col { display: none; margin: 1rem 0 0; padding: 0.4rem 0.8rem; font-size: 0.75rem; }
body.is-editing .addbtn--col { display: inline-block; }

/* Venue pictures fit their box rather than being cropped. */
/* No card behind the artwork — the watercolour blends straight onto the page,
   which is what "Drop background" is for. All three sit in the same 4:3 box so
   they stay a matched size regardless of their own proportions. */
.venue__img {
  background: transparent; border-radius: 14px; overflow: hidden;
  max-width: 340px; margin-inline: auto;
}
.venue__img img { border-radius: 14px; }
/* no fixed frame — each illustration keeps its own proportions */

.mapimage, .bigimage { margin-top: 2rem; }

/* Every piece of artwork sits at the same content width as the text.
   Pictures already inside .wrap just fill it; ones attached to the section
   itself need the same width calculation .wrap uses. */
.bigimage, .mapimage { width: 100%; max-width: none; margin-inline: auto; }
.closing__art, .sectionfoot {
  width: min(var(--wrap), 100% - 2 * var(--pad));
  max-width: none;
  margin-inline: auto;
}

/* Feathered edges, so a rectangular watercolour melts into the page rather
   than sitting in an obvious box. */
.editimg.is-soft img {
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0%, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right,  transparent 0%, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 9%, #000 91%, transparent 100%);
          mask-composite: intersect;
}

/* ═════════ typographic scale ════════════════════════════════
   Everything except the section headings was sitting at 15–17px,
   which is small for guests reading on a phone. Raised across the
   board; headings are unchanged.
   ──────────────────────────────────────────────────────────── */

body { font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); line-height: 1.7; }

/* small letterspaced labels */
.eyebrow, h3.eyebrow { font-size: 0.8125rem; letter-spacing: 0.16em; }
.listcol__head { font-size: 0.8125rem; }

/* cover */
.hero__date     { font-size: 0.9375rem; letter-spacing: 0.2em; }
.hero__location { font-size: 1.1875rem; }
.hero__deadline { font-size: 0.75rem; }
.hero__tagline  { margin-top: 1.1rem; }

/* body copy everywhere */
.section__intro,
.venue__time, .venue__note,
.addrbox__text,
.stay__text,
.inforow__text,
.card__text,
.closing__small,
.faq__a p,
.timeline__text,
.lede            { font-size: 1.0625rem; }

.venue__where    { font-size: 1.5rem; }
.faq__q          { font-size: 1.1875rem; }
.plainlist__name,
.listcols .plainlist__name { font-size: 1.1875rem; }
.plainlist__note,
.listcols .plainlist__note { font-size: 1rem; }
.link            { font-size: 1rem; }

/* the RSVP form */
.field__label, .field legend { font-size: 0.875rem; }
.field input, .field select, .field textarea { font-size: 1.0625rem; }
.rsvp__deadline  { font-size: 1.375rem; }
.rsvp-thanks     { font-size: 1.5rem; }
.btn             { font-size: 1rem; }
.btn--lg         { font-size: 1.0625rem; }

/* menu and footer */
.nav__links a    { font-size: 0.9375rem; }
.nav__brand      { font-size: 1.375rem; }
.footer__text    { font-size: 1.375rem; }

/* keep the editor chrome at its own size — it isn't part of the design */
.panel, .adminbar, .imgctl, .modal__box, .toast { font-size: 0.9375rem; }
.imgctl label { font-size: 0.6875rem; }

/* Artwork that should rise out of the page rather than start at a hard line —
   the castle at the foot of the cover. Combines with "Soften edges" if both
   are on, because the two masks intersect. */
.editimg.is-fadetop img {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.45) 14%, rgba(0,0,0,0.88) 32%, #000 48%);
          mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.45) 14%, rgba(0,0,0,0.88) 32%, #000 48%);
}
.editimg.is-fadetop.is-soft img {
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.35) 18%, #000 46%),
    linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.35) 18%, #000 46%),
    linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%);
          mask-composite: intersect;
}

/* The cover artwork sits tight under the text so it reads as one scene. */


/* "THE CEREMONY" / "THE RECEPTION" / "THE SUNDAY" — these were too quiet. */
.venue__body .eyebrow {
  font-size: 1rem; letter-spacing: 0.2em; color: var(--accent);
  margin-bottom: 0.65rem;
}


/* Push the cover text up so it sits over the sky rather than the buildings,
   and give the scene room to breathe underneath. */
/* Keep the cover text clear of the artwork band. */
/* On a short window, tighten the cover so nothing is clipped. */
/* On a short window, close the gaps — never shrink the monogram or the names. */
@media (max-height: 860px) {
  .hero__monogram { margin-bottom: 0.9rem; }
  .hero__rule { margin: 0.9rem auto; }
  .hero__actions { margin-top: 1.1rem; }
  .hero__deadline { margin-top: 0.8rem; }
}
/* The monogram must not multiply against the castle behind it. */
.hero__monogram img { mix-blend-mode: multiply; }
body.is-editing .hero__foot { pointer-events: auto; }


/* ═════════ no white flash behind artwork on scroll ══════════
   Sections fade in with `opacity: 0 -> 1`. Any opacity below 1 makes the
   section a stacking context, which isolates `mix-blend-mode: multiply` on
   the artwork inside it — so the white paper of the watercolours showed as a
   box for the length of the fade, then disappeared the moment opacity hit 1.
   Giving the wrapper the page colour means multiply has the same backdrop
   during the fade as it does afterwards. Visually identical, no flash.
   `is-blend` is set in Render.applyFit, so it follows the "Drop background"
   toggle rather than being hard-coded per image.
   ──────────────────────────────────────────────────────────── */

.editimg.is-blend { background: var(--bg); }
/* Over a cover photo the page colour would be an opaque patch, not a match. */
.hero--image .editimg.is-blend { background: transparent; }


/* ═════════ type scale, second pass ══════════════════════════
   Still too small on the page. Everything below moves up a step;
   the Pinyon section titles and the cover names are deliberately
   left exactly as they are.
   ──────────────────────────────────────────────────────────── */

body { font-size: clamp(1.1875rem, 1.075rem + 0.42vw, 1.375rem); line-height: 1.72; }

/* small letterspaced labels */
.eyebrow, h3.eyebrow { font-size: 0.875rem; letter-spacing: 0.17em; }
.listcol__head { font-size: 0.875rem; }
.venue__body .eyebrow { font-size: 1.0625rem; }

/* cover — names and tagline untouched */
.hero__date     { font-size: 1rem; letter-spacing: 0.2em; }
.hero__location { font-size: 1.3125rem; }
.hero__deadline { font-size: 0.8125rem; }

/* body copy everywhere */
.section__intro,
.venue__time, .venue__note,
.addrbox__text,
.stay__text,
.inforow__text,
.card__text,
.closing__small,
.faq__a p,
.timeline__text,
.lede            { font-size: 1.1875rem; }

.venue__where    { font-size: 1.75rem; }
.faq__q          { font-size: 1.3125rem; }
.plainlist__name,
.listcols .plainlist__name { font-size: 1.3125rem; }
.plainlist__note,
.listcols .plainlist__note { font-size: 1.0625rem; }
.link, .addrbox .link { font-size: 1.0625rem; }
.card__title     { font-size: 1.4375rem; }

/* the RSVP form */
.field__label, .field legend { font-size: 0.9375rem; }
.field input, .field select, .field textarea { font-size: 1.125rem; }


/* ═════════ Dress code & Gifts ═══════════════════════════════
   These two were the smallest text on the whole page: a 15px muted
   paragraph under an 11px label. They carry information guests
   actually act on, so they now read at full body weight with the
   same navy label treatment as "THE CEREMONY".
   ──────────────────────────────────────────────────────────── */

.notes { margin-top: 4rem; padding-top: 2.75rem; gap: 3rem; }
.notes .note .eyebrow,
.notes .note h3 {
  font-size: 1.0625rem; letter-spacing: 0.2em;
  color: var(--accent); margin-bottom: 0.85rem;
}
.notes .note__text {
  font-size: 1.1875rem; line-height: 1.7; color: var(--ink); max-width: 34rem;
}
@media (max-width: 620px) { .notes { gap: 2.25rem; } }


/* ═════════ navy blocks ══════════════════════════════════════
   Some sections carry navy instead of the pale blue page, so the
   page breaks into bands rather than reading as one wash of colour.
   Set per section in Settings → Sections; `section--navy` comes from
   the section's own `dark` flag in Render.all.

   The whole palette flips inside one of these: the ink becomes the
   pale blue, the "white" card becomes a lighter navy, and the rules
   and labels lift off it. Everything below is a variable override,
   so components keep using the same tokens and need no navy variants
   of their own.
   ──────────────────────────────────────────────────────────── */

.section--navy {
  --bg: #2a3a5c;
  --surface: #33456b;
  /* One ink here too — the pale blue. Labels, headings and body all match. */
  --ink: #edf4fd;
  --muted: #edf4fd;
  --accent: #edf4fd;
  --soft: #33456b;
  --line: #4a5e86;
  background: #2a3a5c;
  color: #edf4fd;
}
/* The band has to run the full width of the page, not just the text column. */
.section--navy .section__title,
.section--navy .eyebrow,
.section--navy h3 { color: var(--ink); }
.section--navy .listcol__head,
.section--navy .venue__body .eyebrow,
.section--navy .note .eyebrow,
.section--navy .note h3 { color: var(--accent); }
.section--navy a,
.section--navy .link { color: var(--ink); border-bottom-color: var(--accent); }
.section--navy .addrbox,
.section--navy .card,
.section--navy .stay__row { background: var(--surface); border-color: var(--line); }
/* The dividing flourish and rules are drawn in ink, so they need lifting. */
.section--navy .flourish { color: var(--accent); opacity: 0.75; }
.section--navy .section__intro { color: var(--muted); }

/* Two navy sections in a row would otherwise show the page's divider rule
   stranded between them. */
.section--navy + .section--navy::before,
.section--navy + .section--navy::after { display: none; }

/* Watercolours are multiplied onto the page colour, which turns them into mud
   on navy — so the blend is dropped and the artwork sits as it is. */
.section--navy .editimg.is-blend { background: transparent; mix-blend-mode: normal; }
.section--navy .editimg.is-blend img { mix-blend-mode: normal !important; }

/* The RSVP form inverts with the rest of it. */
.section--navy .field input,
.section--navy .field select,
.section--navy .field textarea {
  background: var(--surface); color: var(--ink); border-color: var(--line);
}
.section--navy .field input::placeholder,
.section--navy .field textarea::placeholder { color: var(--muted); opacity: 0.8; }
.section--navy .btn { background: var(--ink); color: #2a3a5c; border-color: var(--ink); }
.section--navy .btn--outline { background: transparent; color: var(--ink); border-color: var(--line); }


/* ═════════ venues with no picture ═══════════════════════════
   The venue row is image | text. With no picture there is no second
   column to balance, so it collapses to one centred column instead
   of hugging the empty half.
   ──────────────────────────────────────────────────────────── */

.venue--noimg { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.venue--noimg .venue__body { max-width: 34rem; width: 100%; }
.venue--noimg .addrbox { text-align: center; }
.venue--noimg .addrbox .link { display: inline-block; }
/* The empty upload slot still renders while editing so a picture can be put
   back; it must not open a gap for guests. */
.venue--noimg .venue__img { display: none; }
body.is-editing .venue--noimg .venue__img { display: block; margin: 0 auto 1.5rem; }


/* ═════════ Gifts on its own ═════════════════════════════════ */

.notes--single { grid-template-columns: 1fr; justify-items: center; }
.notes--single .note { text-align: center; }
.notes--single .note__text { margin-inline: auto; }


/* ═════════ Things to Do ═════════════════════════════════════
   The three-column rule further up this file sits AFTER the responsive
   ones, so it was winning at every width — on a phone the columns never
   collapsed, titles wrapped to three lines each and the third column ran
   off the edge. These rules come last, so they settle it.

   On a phone the columns become stacked groups: one heading, then its
   places as full-width rows, each on its own baseline with the note
   beneath it. One rhythm down the page instead of three ragged ones.
   ──────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .listcols { grid-template-columns: 1fr 1fr; gap: 2.25rem; }
}
@media (max-width: 600px) {
  .listcols { grid-template-columns: 1fr; gap: 0; margin-top: 2rem; }
  .listcol + .listcol { margin-top: 2.5rem; }
  .listcol__head {
    margin-bottom: 0; padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--line);
  }
  .listcols .plainlist__row {
    display: block; padding: 1rem 0 0.9rem;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  }
  .listcols .listcol:last-child .plainlist__row:last-child { border-bottom: 0; }
  .listcols .plainlist__name {
    display: block; font-size: 1.125rem; line-height: 1.35;
    text-wrap: balance;
  }
  .listcols .plainlist__note {
    display: block; margin-top: 0.2rem;
    font-size: 1rem; line-height: 1.5; color: var(--muted);
  }
  /* A section set wide for three columns should go back to the normal
     text measure once it is a single column. */
  .section--wide .wrap { max-width: var(--wrap); }
}


/* ═════════ the cover photo ══════════════════════════════════
   hero.topImage — a photo across the top of the cover, above the
   monogram. Distinct from hero.namesImage, which REPLACES the typed
   names: a photo dropped in there makes "Emma & Miles" vanish.
   ──────────────────────────────────────────────────────────── */

/* The sizing rules that used to live here are further down the file, with the
   split-cover block. This one carried a `max-height: 52vh` that the later rules
   never overrode — nothing below mentions max-height — so it went on squashing
   the photo from a distance. Deleted rather than overridden; a dead block that
   still wins is how the last two of these bugs happened. */
body.is-editing .hero__top.editimg--empty { min-height: 160px; margin-inline: auto; }


/* ═════════ the closing film ═════════════════════════════════
   Loops forever, silently. Sized like the artwork it sits beside so
   the section keeps its proportions whether there is a film or not.
   ──────────────────────────────────────────────────────────── */

.editvid { position: relative; }
.editvid--empty { display: none; }
body.is-editing .editvid--empty {
  position: relative;
  display: block; min-height: 180px; border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--muted) 8%, transparent);
}
body.is-editing .editvid--empty[data-hint]::before {
  content: attr(data-hint);
  position: absolute; inset: 0.75rem 0.75rem auto; text-align: center;
  font-family: system-ui, sans-serif; font-size: 0.75rem; letter-spacing: 0.04em;
  color: var(--muted); opacity: 0.85; pointer-events: none;
}
/* Sized by width, not capped by height. A phone clip is usually portrait, and
   capping the height while the width is held at the full column is precisely
   what squashes it — the same trap the cover photo fell into. Holding the
   width instead keeps whatever proportions the film actually has. */
.closing__film {
  width: min(420px, 100% - 2 * var(--pad));
  margin: 0 auto clamp(2rem, 5vh, 3.25rem);
  border-radius: var(--radius);
  overflow: hidden;
  line-height: 0;
}
.closing__film video { width: 100%; height: auto; display: block; }
@media (prefers-reduced-motion: reduce) { .closing__film video { display: none; } }


/* ═════════ one ink, everywhere ══════════════════════════════
   The palette now sets ink, muted and accent to the same blue, but a
   handful of rules named a colour directly rather than going through a
   token. Those are the ones that were still coming out near-black.
   ──────────────────────────────────────────────────────────── */

.section__title,
.venue__where,
.closing__big,
.faq__q,
.plainlist__name,
.card__title,
.note__title,
.hero__names,
.hero__tagline,
.hero__date,
.hero__location,
.hero__deadline { color: var(--ink); }

.venue__time,
.venue__note,
.section__intro,
.card__text,
.note__text,
.stay__text,
.inforow__text,
.plainlist__note,
.listcols .plainlist__note,
.addrbox__text,
.closing__small,
.faq__a p,
.muted { color: var(--ink); }

.eyebrow, h3.eyebrow,
.listcol__head,
.venue__body .eyebrow,
.addrbox__label { color: var(--ink); }


/* ═════════ Gifts keeps the pale page ════════════════════════
   Details is a navy block, but Gifts is not — it hangs off the section
   rather than the text column so it can carry a full-width pale band.
   The negative bottom margin cancels the section's own bottom padding,
   so the band runs cleanly to the edge of the section instead of
   leaving a navy strip beneath it.
   ──────────────────────────────────────────────────────────── */

:root { --section-pad: clamp(3rem, 5.5vw, 4.5rem); }
.section { padding-top: var(--section-pad); padding-bottom: var(--section-pad); }

/* margin is navy (it sits in the section), padding is pale (it sits in the
   band). Without the margin the colour changed flush against the last address
   box, which read as the box being cut in half. */
.giftsband { margin-top: var(--section-pad); padding-top: var(--section-pad); }
.giftsband .notes {
  margin-top: 0; border-top: 0; padding-top: 0;
}
.section--navy .giftsband {
  background: #edf4fd;
  --ink: #2a3a5c;
  --muted: #2a3a5c;
  --accent: #2a3a5c;
  --surface: #ffffff;
  --line: #c9daf0;
  color: #2a3a5c;
  margin-bottom: calc(-1 * var(--section-pad));
  padding-bottom: var(--section-pad);
}
/* The flourish is appended to the text column, so on a navy Details it would
   land on the navy strip below the band. The band itself is the divider. */
.section--navy .wrap > .flourish { display: none; }

.giftsband .section__title { margin-bottom: 1.25rem; }


/* ═════════ the cover photo, undistorted ═════════════════════
   The photo is portrait (2316 × 3088). Render.applyFit sets width:100%
   and height:auto inline, which is correct — the distortion came from a
   max-height capping the height while that inline width held the width
   at the full content measure, squashing a 3:4 picture into 16:9.

   No cap on the image at all now. The WRAPPER is what is sized: the full
   column on a phone, and held to a portrait-friendly width on desktop so
   it does not run 1400px tall. The picture keeps its own proportions at
   every width, and the Frame / Zoom controls are there for a crop.
   ──────────────────────────────────────────────────────────── */

/* Phone first: edge to edge, the whole photo, no crop. A 3:4 picture at the
   full width of the screen is already about two-thirds of the viewport, so it
   fills the page the way a cover should without losing anything out of frame.
   NB the height is left alone here — applyFit sets height:auto inline, and a
   max-height fighting that inline width is exactly what squashed it before. */
.hero__top {
  width: 100%;
  margin: 0 0 clamp(1.75rem, 4vh, 3rem);
  border-radius: 0;
  overflow: hidden;
}
.hero__top img { width: 100%; height: auto; display: block; }

/* Desktop: a split cover rather than a band. Stretching a 3:4 portrait across
   1700px of screen crops it to a face close-up — there is no slice of an
   upright photo that reads well that wide. Set beside the words instead, it
   keeps its own proportions, nothing is cut, and the page fills properly.

   Only two children are ever in this grid: the photo and the text. hero__bg,
   hero__scrim and hero__foot are all either absolutely positioned or empty
   (and empty slots are display:none for guests), so they take no cells. */
@media (min-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    align-items: center;
    justify-items: stretch;
    column-gap: clamp(2.5rem, 5vw, 5.5rem);
    padding: clamp(3rem, 7vh, 5.5rem) var(--pad);
    max-width: calc(var(--wrap) + 6rem);
    margin-inline: auto;
  }
  .hero__top {
    grid-column: 1; justify-self: end;
    width: min(100%, 520px); margin: 0;
    border-radius: var(--radius);
  }
  .hero__content {
    grid-column: 2; justify-self: start;
    max-width: 32rem; padding-inline: 0;
  }
}


/* ═════════ line art on a navy block ═════════════════════════
   The venue drawing is blue ink on white paper. Multiplied onto navy it
   turns to mud, so the blend is off there — which leaves the paper as a
   plain white rectangle. Matted and rounded it reads as a mounted print
   rather than a cut-out, which is the only honest option short of
   redrawing the artwork pale-on-navy.
   ──────────────────────────────────────────────────────────── */

/* Superseded: the artwork moved into the pale Gifts band, where its white
   paper blends away as it always did. Nothing on navy needs matting now. */
.giftsband .illustration { margin: 0 auto clamp(1.5rem, 4vw, 2.75rem); }


/* ═════════ the closing picture ══════════════════════════════
   Replaces the film, held to the same width it had. The photo is
   landscape where the clip was portrait, so it is shorter — the width
   is what keeps it in step with everything else on the page.

   No multiply here. That blend exists to drop the white paper off line
   art; run over a photograph it mixes the whole image into the page
   colour and washes it out.
   ──────────────────────────────────────────────────────────── */

.closing__art {
  width: min(420px, 100% - 2 * var(--pad));
  margin: 0 auto clamp(2rem, 5vh, 3.25rem);
  border-radius: var(--radius);
  overflow: hidden;
}
.closing__art img { width: 100%; height: auto; display: block; mix-blend-mode: normal; }


/* ═════════ empty slots must not hold space ══════════════════
   Editable text that is blank still gets its margins, so a cleared
   line silently pushes everything below it down. The RSVP heading
   sat 64px off "Kindly reply by…" and 48px of that was an empty
   intro paragraph; the cover had an empty overline doing the same
   between the photo and the names. They stay visible while editing,
   so there is still something to click into.
   ──────────────────────────────────────────────────────────── */

body:not(.is-editing) [data-edit].is-empty { display: none; }


/* ═════════ cover: photo closer to the names ═════════════════ */

.hero__top { margin-bottom: clamp(1rem, 2.5vh, 1.5rem); }


/* ═════════ everything centred ═══════════════════════════════
   Travel, Stay, FAQs and Things to Do were set left — fine on a wide
   screen, but on a phone they read as ragged columns against headings
   that are centred. Guest-facing text only: the edit-mode controls and
   the RSVP form fields keep their own alignment, since centred form
   labels and inputs are harder to use, not easier.
   ──────────────────────────────────────────────────────────── */

.inforow, .inforow__body, .inforow__text,
.inforow .eyebrow,
.stay, .stay__text, .stay .eyebrow,
.faq__a, .faq__a p,
.plainlist__row, .plainlist__name, .plainlist__note,
.listcol__head,
.bigimage__cap { text-align: center; }

/* The icon sits above its text rather than beside it, so the whole row
   can centre as one block. */
.inforow { grid-template-columns: 1fr; gap: 0.6rem; justify-items: center; }
.inforow__icon { padding-top: 0; }

/* The question keeps the +/- pinned right, so the text itself is centred
   in the space that is left rather than against the toggle. */
.faq__q { text-align: center; justify-content: center; gap: 0.75rem; position: relative; }
.faq__chev { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.faq__item.is-open .faq__chev { transform: translateY(-50%) rotate(45deg); }
.faq__q > span:first-child { flex: 0 1 auto; }

.stay .link, .inforow .link { display: inline-block; }


/* ═════════ the map ══════════════════════════════════════════
   No ruled line under it, less air around it on a phone, and the
   picture itself bigger — full width, since the margins were most of
   what was shrinking it.
   ──────────────────────────────────────────────────────────── */

.section--image .flourish { display: none; }
.section--image { padding-top: clamp(1.5rem, 4vw, 3rem); padding-bottom: clamp(1.5rem, 4vw, 3rem); }
.bigimage { margin-top: clamp(0.5rem, 2vw, 1.5rem); max-width: none; }

@media (max-width: 760px) {
  /* .wrap is sized with `width: min(--wrap, 100% - 2*--pad)`, not padding, so
     clearing max-width and padding does nothing — the width has to be set. */
  .section--image .wrap { width: 100%; max-width: none; padding-inline: 0; }
  .bigimage { width: 100%; }
  .bigimage img { border-radius: 0; }
  .section--image .section__title,
  .bigimage__cap { padding-inline: var(--pad); }
}


/* ═════════ the closing picture, full screen on a phone ══════
   Same treatment as the cover photo: edge to edge, nothing cropped,
   and sitting straight under the RSVP button with no band of empty
   page between them.
   ──────────────────────────────────────────────────────────── */

.closing { padding-top: 0; }

@media (max-width: 760px) {
  .closing__art, .closing__film {
    width: 100%;
    margin-inline: 0;
    border-radius: 0;
  }
}


/* The closing picture is its own divider — the section before it needs
   neither a ruled flourish nor bottom padding, which together were the
   gap left between the RSVP button and the photograph. */
.section:has(+ .closing) .flourish { display: none; }
.section:has(+ .closing) { padding-bottom: 0; }


/* A little air above the closing photograph — zero read as the button and the
   picture being stuck together rather than as a deliberate edge. */
.section:has(+ .closing) { padding-bottom: clamp(1.25rem, 3vw, 2rem); }


/* Travel sat 76px below its heading: a 48px margin on the list plus 28px of
   padding on the first row. Both trimmed; the rows keep their own rhythm. */
.inforows { margin-top: clamp(1rem, 2.5vw, 1.5rem); }
.inforow:first-child { padding-top: 0.85rem; }