/* ==========================================================================
   Kayden & Dan — design system
   Summer garden: cream, sage, deep green, gold, blush.
   ========================================================================== */

:root {
  --cream: #FBF7EF;
  --sage: #A3B18A;
  --deep-green: #587152;
  --gold: #C9A227;
  --blush: #E8B4B8;
  --ink: #2F3E2E;

  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-script: 'Great Vibes', cursive;
  --font-body: 'Jost', 'Segoe UI', sans-serif;

  --maxw: 1100px;
  --radius: 18px;
  --shadow-soft: 0 6px 24px rgba(58, 90, 64, 0.08);
  --nav-h: 64px;
  --sage-line: rgba(163, 177, 138, 0.45);
}

/* ---- Page backgrounds (admin-swappable, per page or site-wide) ------------ */

/* Garden floral — the default: blossom tile over soft colour washes. */
.bg-garden {
background-color: var(--cream);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cg opacity='.34'%3E%3Cg fill='%23E9739A'%3E%3Ccircle cx='70' cy='68' r='12'/%3E%3Ccircle cx='83' cy='81' r='12'/%3E%3Ccircle cx='70' cy='94' r='12'/%3E%3Ccircle cx='57' cy='81' r='12'/%3E%3C/g%3E%3Ccircle cx='70' cy='81' r='7' fill='%23F5C542'/%3E%3Cg fill='%23F5C542'%3E%3Ccircle cx='262' cy='52' r='10'/%3E%3Ccircle cx='273' cy='63' r='10'/%3E%3Ccircle cx='262' cy='74' r='10'/%3E%3Ccircle cx='251' cy='63' r='10'/%3E%3C/g%3E%3Ccircle cx='262' cy='63' r='6' fill='%23F28C28'/%3E%3Cg fill='%23A97BC7'%3E%3Ccircle cx='330' cy='236' r='12'/%3E%3Ccircle cx='343' cy='249' r='12'/%3E%3Ccircle cx='330' cy='262' r='12'/%3E%3Ccircle cx='317' cy='249' r='12'/%3E%3C/g%3E%3Ccircle cx='330' cy='249' r='7' fill='%23F5C542'/%3E%3Cg fill='%23F28C28'%3E%3Ccircle cx='138' cy='292' r='11'/%3E%3Ccircle cx='150' cy='304' r='11'/%3E%3Ccircle cx='138' cy='316' r='11'/%3E%3Ccircle cx='126' cy='304' r='11'/%3E%3C/g%3E%3Ccircle cx='138' cy='304' r='6' fill='%23FBF7EF'/%3E%3Cg fill='%23A3B18A'%3E%3Cellipse cx='205' cy='170' rx='9' ry='19' transform='rotate(35 205 170)'/%3E%3Cellipse cx='60' cy='250' rx='8' ry='17' transform='rotate(-25 60 250)'/%3E%3Cellipse cx='340' cy='120' rx='8' ry='17' transform='rotate(15 340 120)'/%3E%3Cellipse cx='215' cy='355' rx='8' ry='17' transform='rotate(-40 215 355)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(38% 26% at 88% 4%, rgba(233, 115, 154, 0.30), transparent 70%),
    radial-gradient(34% 24% at 10% 8%, rgba(169, 123, 199, 0.26), transparent 70%),
    radial-gradient(40% 26% at 92% 62%, rgba(245, 197, 66, 0.30), transparent 72%),
    radial-gradient(36% 24% at 6% 74%, rgba(242, 140, 40, 0.26), transparent 72%),
    radial-gradient(45% 30% at 50% 34%, rgba(251, 247, 239, 0.75), transparent 76%),
    linear-gradient(170deg, #FBF7EF 0%, #FDF4EA 38%, #F8F3E6 68%, #EFF2E2 100%);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 400px 400px, auto, auto, auto, auto, auto, auto;
  background-attachment: scroll;
}

/* Soft wash — the same colours, no blossoms. */
.bg-wash {
  background-image:
    radial-gradient(38% 26% at 88% 4%, rgba(233, 115, 154, 0.30), transparent 70%),
    radial-gradient(34% 24% at 10% 8%, rgba(169, 123, 199, 0.26), transparent 70%),
    radial-gradient(40% 26% at 92% 62%, rgba(245, 197, 66, 0.30), transparent 72%),
    radial-gradient(36% 24% at 6% 74%, rgba(242, 140, 40, 0.26), transparent 72%),
    linear-gradient(170deg, #FBF7EF 0%, #FDF4EA 38%, #F8F3E6 68%, #EFF2E2 100%);
  background-repeat: no-repeat;
}

/* Sage garden — quieter greens, no brights. */
.bg-sage {
  background-image:
    radial-gradient(42% 30% at 88% 6%, rgba(163, 177, 138, 0.34), transparent 72%),
    radial-gradient(38% 26% at 8% 78%, rgba(163, 177, 138, 0.26), transparent 72%),
    linear-gradient(170deg, #FBF7EF 0%, #F6F4E8 55%, #EDF1E1 100%);
  background-repeat: no-repeat;
}

/* Plain cream — no pattern at all. */
.bg-cream { background-image: none; }

/* Custom image — the URL is set inline by base.html. */
.bg-custom {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  background-attachment: scroll;
}

/* ---- Reset & base ------------------------------------------------------ */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;

  background-color: var(--cream);
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--deep-green);
  line-height: 1.15;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.4rem, 7vw, 3.6rem); }
h2 { font-size: clamp(1.9rem, 5.5vw, 2.7rem); }
h3 { font-size: clamp(1.3rem, 4vw, 1.6rem); }

p { margin: 0 0 1em; }

a { color: var(--deep-green); }

::selection { background: var(--sage); color: #fff; }

[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--deep-green);
  color: var(--cream);
  padding: 10px 18px;
  border-radius: 0 0 10px 0;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---- Layout helpers ---------------------------------------------------- */

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.section { padding: clamp(48px, 8vw, 84px) 0; }
.center { text-align: center; }

.script { font-family: var(--font-script); font-weight: 400; }

.eyebrow {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--deep-green);
  margin: 0 0 10px;
}
.eyebrow::before, .eyebrow::after {
  content: "\00B7";
  color: var(--gold);
  margin: 0 0.7em;
}

/* ---- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-block;
  padding: 0.85em 2.1em;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s, transform 0.15s;
}
.btn:active { transform: scale(0.97); }

.btn-primary { background: var(--deep-green); color: var(--cream); }
.btn-primary:hover { background: var(--gold); color: var(--ink); }

.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--deep-green); color: var(--cream); }

.btn-outline { border-color: var(--deep-green); color: var(--deep-green); background: transparent; }
.btn-outline:hover { background: var(--deep-green); color: var(--cream); }

.btn-lg { font-size: 0.95rem; padding: 1em 2.6em; }

/* ---- Navigation --------------------------------------------------------- */

.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(163, 177, 138, 0.25);
}
/* Blur lives on a pseudo-element: backdrop-filter on .site-nav itself would make
   it the containing block for the fixed mobile overlay, shrinking it to the bar. */
.site-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(251, 247, 239, 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.nav-inner {
  position: relative; /* anchors the centered page title */
  max-width: var(--maxw);
  margin: 0 auto;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.nav-brand {
  font-size: 1.7rem;
  color: var(--deep-green);
  text-decoration: none;
  line-height: 1;
}

/* Current page name — stays in the fixed bar as you scroll. Hidden on wide
   screens, where the full nav already underlines the active tab. */
.nav-page-title {
  display: none;
  /* centered on the bar itself, independent of the brand/hamburger widths */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 190px);
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--deep-green);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 920px) {
  .nav-page-title { display: block; }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 22px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a:not(.btn) {
  display: inline-block;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--deep-green);
  text-decoration: none;
  padding: 6px 2px;
  position: relative;
}
.nav-links a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s;
}
.nav-links a:not(.btn):hover::after,
.nav-links a.active::after { transform: scaleX(1); }

.btn-nav { padding: 0.5em 1.4em; font-size: 0.74rem; }

.nav-toggle { display: none; }

@media (max-width: 1100px) {
  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    background: none;
    border: 0;
    padding: 12px 8px;
    cursor: pointer;
    z-index: 120;
  }
  .nav-toggle span {
    display: block;
    width: 26px;
    height: 2px;
    background: var(--deep-green);
    transition: transform 0.3s;
  }
  body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }

  .nav-menu {
    position: fixed;
    inset: 0;
    z-index: 110;
    background: var(--cream);
    display: flex;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
  }
  body.nav-open .nav-menu { opacity: 1; visibility: visible; }
  body.nav-open { overflow: hidden; }

  /* margin:auto centers the list when it fits and lets it scroll when it doesn't */
  .nav-links {
    flex-direction: column;
    gap: 22px;
    text-align: center;
    margin: auto;
    padding: calc(var(--nav-h) + 16px) 20px 44px;
  }
  .nav-links a:not(.btn) { font-size: 1.05rem; }
  .nav-rsvp { margin-top: 10px; }
  .nav-rsvp .btn-nav { font-size: 0.9rem; padding: 0.8em 2.4em; }
}

/* ---- Flash messages ----------------------------------------------------- */

.flash-wrap {
  position: fixed;
  top: calc(var(--nav-h) + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 150;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(92vw, 480px);
}
.flash {
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid var(--sage-line);
  background: #fffdf7;
  box-shadow: var(--shadow-soft);
  font-size: 0.95rem;
}
.flash--success { border-color: var(--sage); background: #f2f5ea; }
.flash--error { border-color: var(--blush); background: #fbeeef; }

/* ---- Footer -------------------------------------------------------------- */

.site-footer {
  background: var(--deep-green);
  color: var(--cream);
  text-align: center;
  padding: 44px 20px 40px;
  margin-top: 40px;
}
.footer-script { font-size: 2.1rem; color: var(--gold); line-height: 1.2; }
.site-footer p {
  margin: 10px 0 0;
  font-size: 0.82rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  /* No uppercase transform — the hashtag's capitalization is the joke. */
  opacity: 0.85;
}

/* ---- Botanical divider ---------------------------------------------------- */

.divider { display: flex; justify-content: center; padding: clamp(8px, 2vw, 18px) 0; }
.divider .botanical { width: min(240px, 56vw); height: auto; color: var(--sage); }

/* ---- Hero ------------------------------------------------------------------ */

.hero {
  position: relative;
  min-height: min(82svh, 760px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: calc(var(--nav-h) + 34px) 20px 34px;
}

.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(47, 62, 46, 0.35), rgba(47, 62, 46, 0.55));
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.hero-names {
  font-size: clamp(3.4rem, 12vw, 6.5rem);
  color: var(--deep-green);
  line-height: 1.15;
  margin: 0;
}
.hero-date {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(0.72rem, 2.4vw, 1rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
  max-width: 36em;
}
.hero--video .hero-names,
.hero--video .hero-date { color: var(--cream); }

.hero-content .btn { margin-top: 8px; }

/* Hero photo — sized so the RSVP button still clears the fold on a phone */
.hero-photo {
  width: min(300px, 58vw);
  max-height: 42svh;
  padding: 10px;
  background: rgba(253, 251, 245, 0.9);
  border: 1px solid var(--sage-line);
  border-radius: 20px;
  box-shadow: 0 10px 34px rgba(58, 90, 64, 0.16);
  overflow: hidden;
}
.hero-photo img {
  width: 100%;
  max-height: calc(42svh - 20px);
  object-fit: cover;
  border-radius: 13px;
}
.hero--video .hero-photo { background: rgba(251, 247, 239, 0.16); border-color: rgba(251, 247, 239, 0.4); }

/* Venue address on the home page */
.venue-line {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(0.86rem, 2.4vw, 1.05rem);
  letter-spacing: 0.1em;
  color: var(--deep-green);
  margin: 34px auto 0;
  max-width: 40ch;
}

/* The garden backdrop now lives on <body> and covers the whole page, so the
   hero itself stays transparent — no per-section break, no moving pieces. */

/* ---- Countdown --------------------------------------------------------------- */

.count-grid {
  display: flex;
  justify-content: center;
  gap: clamp(26px, 7vw, 70px);
  margin-top: 20px;
}
.count-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.count-num {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(2.8rem, 9vw, 4.4rem);
  color: var(--deep-green);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.count-label {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.75;
}
.count-married { font-size: clamp(2.2rem, 7vw, 3.2rem); color: var(--deep-green); margin: 16px 0 0; }
#countdown.is-past { display: none; }

/* ---- Cards --------------------------------------------------------------------- */

.card {
  background: #fffdf7;
  border: 1px solid var(--sage-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 28px 24px;
}

/* ---- Home: welcome ---------------------------------------------------------------- */

.welcome-grid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
}
.framed {
  background: #fffdf7;
  border: 1px solid var(--sage-line);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow-soft);
  transform: rotate(-1.4deg);
}
.framed img { border-radius: calc(var(--radius) - 8px); }
.welcome-text p { max-width: 52ch; font-weight: 300; font-size: 1.03rem; }

/* Welcome copy with no photo beside it — centered and comfortably narrow */
.welcome-text--solo { max-width: 60ch; margin: 0 auto; }
.welcome-text--solo p { max-width: none; font-size: 1.08rem; }

@media (max-width: 760px) {
  .welcome-grid { grid-template-columns: 1fr; }
  .framed { transform: none; max-width: 420px; margin: 0 auto; }
  .welcome-text { text-align: center; }
  .welcome-text p { margin-left: auto; margin-right: auto; }
}

/* ---- Home: event snapshot ------------------------------------------------------------ */

.snapshot-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin: 34px 0 8px;
}
.snapshot-card h3 { margin: 0 0 2px; }
.snapshot-time {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--deep-green);
  letter-spacing: 0.06em;
  margin: 0 0 10px;
}
.snapshot-time::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  background: var(--gold);
  margin: 10px auto 0;
  border-radius: 2px;
}
.snapshot-note { font-size: 0.93rem; font-weight: 300; margin: 0; }

@media (max-width: 780px) {
  .snapshot-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
}

.cta-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 38px;
}

/* ---- Sub-page header + stubs ------------------------------------------------------------ */

.page-head {
  text-align: center;
  padding: calc(var(--nav-h) + clamp(44px, 9vw, 76px)) 20px 8px;
  max-width: 820px;
  margin: 0 auto;
}
.page-head h1 { margin: 6px 0 14px; }
.page-intro {
  font-weight: 300;
  font-size: 1.05rem;
  max-width: 56ch;
  margin: 0 auto;
}
.stub-note { opacity: 0.55; font-style: italic; padding: 24px 0 56px; margin: 0; }

/* ---- Shared page components (Phase 2) ------------------------------------------------------ */

.section-sm { padding: clamp(28px, 5vw, 52px) 0; }

/* Photos: masonry gallery */

.gallery { columns: 4 210px; column-gap: 14px; }
.gallery-item {
  display: block;
  width: 100%;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  break-inside: avoid;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.gallery-item img { width: 100%; transition: transform 0.35s ease; }
.gallery-item:hover img { transform: scale(1.03); }

/* Photos: lightbox */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(47, 62, 46, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px;
}
.lb-img {
  max-width: min(1100px, 92vw);
  max-height: 82vh;
  width: auto;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.lb-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: none;
  border: 0;
  color: var(--cream);
  font-size: 2.4rem;
  line-height: 1;
  padding: 10px;
  cursor: pointer;
}
.lb-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: rgba(251, 247, 239, 0.14);
  color: var(--cream);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.25s;
}
.lb-arrow:hover { background: rgba(251, 247, 239, 0.3); }
.lb-prev { left: 14px; }
.lb-next { right: 14px; }
body.lb-open { overflow: hidden; }

@media (max-width: 600px) {
  .lightbox { padding: 64px 8px; }
  .lb-arrow { width: 44px; height: 44px; }
}

/* Dress code: swatches, notes, pill links */

.swatch-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin: 28px 0 12px;
}
.swatch { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.swatch-dot {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 1px solid var(--sage-line);
  box-shadow: var(--shadow-soft);
}
.swatch-name {
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.swatch-skip {
  font-style: italic;
  opacity: 0.75;
  max-width: 46ch;
  margin: 14px auto 0;
}

.notes-card { max-width: 760px; margin: 0 auto; }
.notes-card h2 { font-size: 1.5rem; }
.notes-list { margin: 0; padding-left: 1.2em; }
.notes-list li { margin-bottom: 0.6em; font-weight: 300; }
.notes-list li::marker { color: var(--gold); }

.pill-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 20px; }
.pill-link {
  display: inline-block;
  padding: 0.6em 1.5em;
  border: 1.5px solid var(--sage);
  border-radius: 999px;
  color: var(--deep-green);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  transition: border-color 0.25s, background-color 0.25s;
}
.pill-link:hover { border-color: var(--gold); background: rgba(201, 162, 39, 0.08); }

/* Travel: flight search links */
.flight-link {
  display: inline-block;
  margin-top: auto;
  padding: 0.5em 1.2em;
  border: 1.5px solid var(--sage);
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--deep-green);
  text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s;
}
.flight-link:hover { border-color: var(--gold); background: rgba(201, 162, 39, 0.1); }
.flight-note {
  font-size: 0.86rem;
  opacity: 0.72;
  max-width: 52ch;
  margin: 18px auto 0;
}
.snapshot-grid .card { display: flex; flex-direction: column; }

/* Travel: parking callout, hotel cards, map card */

.callout {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 28px;
  padding: 20px 24px;
  background: rgba(201, 162, 39, 0.1);
  border: 1px solid rgba(201, 162, 39, 0.4);
  border-left: 5px solid var(--gold);
  border-radius: 12px;
}
.callout p { margin: 0; font-weight: 500; color: var(--deep-green); font-size: 1.05rem; }
.callout-icon { font-size: 1.4rem; line-height: 1.3; }

.hotel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 26px;
  margin-top: 30px;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
.hotel-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.hotel-body { padding: 24px; display: flex; flex-direction: column; align-items: flex-start; flex: 1; }
.hotel-meta { font-size: 0.9rem; opacity: 0.75; margin-bottom: 0.4em; }
.hotel-codes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  font-size: 0.88rem;
  margin-bottom: 18px;
}
.hotel-body .btn { margin-top: auto; }

.map-card { max-width: 640px; margin: 0 auto; }
.map-card h2 { font-size: 1.5rem; }
.map-card .btn { margin-top: 6px; }

/* Things to do: card grid + tags + crosslink banner */

.ttd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.ttd-card { display: flex; flex-direction: column; align-items: flex-start; }

/* Photo across the top of a place card — bleeds to the card edges */
.card.ttd-card, .card.spot-card { padding: 0; overflow: hidden; }
.ttd-card > :not(.spot-photo), .spot-card > :not(.spot-photo) {
  padding-left: 22px;
  padding-right: 22px;
  width: 100%;
}
.ttd-card > .ttd-top, .spot-card > .spot-top { padding-top: 18px; }
.ttd-card > .ttd-link, .spot-card > .spot-foot { padding-bottom: 20px; }
.spot-photo {
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: rgba(163, 177, 138, 0.18);
  border-bottom: 1px solid var(--sage-line);
}
.spot-photo img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}
.card.ttd-card, .card.spot-card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.card.ttd-card:hover, .card.spot-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(58, 90, 64, 0.14);
}
.card.ttd-card:hover .spot-photo img,
.card.spot-card:hover .spot-photo img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .card.ttd-card:hover, .card.spot-card:hover { transform: none; }
  .card.ttd-card:hover .spot-photo img,
  .card.spot-card:hover .spot-photo img { transform: none; }
}
.ttd-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}
.ttd-top h3 { font-size: 1.3rem; margin-bottom: 0.35em; }
.ttd-card .snapshot-note { flex: 1; }
.ttd-link { font-weight: 500; font-size: 0.9rem; }

.tag {
  flex-shrink: 0;
  padding: 0.3em 0.9em;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--deep-green);
  background: rgba(163, 177, 138, 0.25);
}
.tag-history { background: rgba(163, 177, 138, 0.28); }
.tag-eat-drink { background: rgba(201, 162, 39, 0.2); }
.tag-outdoors { background: rgba(58, 90, 64, 0.14); }
.tag-spooky { background: rgba(232, 180, 184, 0.4); }
.tag-tours { background: color-mix(in srgb, var(--bloom-purple) 26%, transparent); }
.tag-family { background: color-mix(in srgb, var(--bloom-orange) 24%, transparent); }

.crosslink-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 28px;
  background: var(--deep-green);
  border-radius: var(--radius);
  padding: 30px 34px;
  text-align: center;
}
.crosslink-text {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--cream);
  margin: 0;
}

/* Registry: fund cards */

.fund-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
  max-width: 980px;
  margin: 0 auto;
}
.fund-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.fund-body {
  padding: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
}
.fund-body h2 { font-size: 1.7rem; }
.fund-handles { font-size: 0.9rem; opacity: 0.75; margin-bottom: 0.8em; }
.fund-body .btn { margin-top: auto; }
.fund-progress { width: 100%; margin-bottom: 1em; }
.fund-progress-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(163, 177, 138, 0.3);
  overflow: hidden;
}
.fund-progress-fill { height: 100%; border-radius: 999px; background: var(--gold); }
.fund-progress-label { font-size: 0.8rem; opacity: 0.7; }

@media (max-width: 760px) {
  .fund-grid { grid-template-columns: 1fr; max-width: 460px; }
}

/* Q + A — plain question/answer blocks (no accordion, always visible) */

.qa-wrap {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.qa-item { padding: 22px 24px; }
.qa-q {
  margin: 0 0 6px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--deep-green);
}
.qa-a { margin: 0; font-weight: 300; }
.qa-item .pill-link { margin-top: 10px; }

/* ---- RSVP (Phase 3) ------------------------------------------------------------------------ */

.rsvp-card { max-width: 560px; margin: 0 auto; }
.rsvp-deadline { margin-top: 4px; font-size: 0.95rem; }
.rsvp-closed-emoji { font-size: 2.2rem; margin: 0 0 4px; }

.field-label {
  display: block;
  font-weight: 500;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  margin: 0 0 6px;
  color: var(--deep-green);
}
.field-input {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--sage-line);
  border-radius: 12px;
  background: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
}
.field-input:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
textarea.field-input { resize: vertical; }

.rsvp-find-btn { display: block; width: 100%; margin-top: 18px; }

/* Honeypot — parked far off-screen, never display:none (bots skip that) */
.hp { position: absolute; left: -9999px; top: -9999px; height: 1px; overflow: hidden; }

.form-error {
  background: #fbeeef;
  border: 1px solid var(--blush);
  border-left: 5px solid var(--blush);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 18px;
}
.form-error p { margin: 0 0 4px; }
.form-error ul { margin: 0; padding-left: 1.2em; }

.rsvp-form { max-width: 640px; margin: 0 auto; }
.guest-card { margin-bottom: 18px; }
.guest-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.guest-head h3 { margin: 0; }
.kid-chip {
  padding: 0.25em 0.8em;
  border-radius: 999px;
  background: rgba(232, 180, 184, 0.4);
  color: var(--deep-green);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Accepts / Declines segmented control */
.seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 8px;
  border: 1.5px solid var(--sage-line);
  border-radius: 14px;
  font-weight: 500;
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--deep-green);
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.seg label:hover { border-color: var(--sage); }
.seg input:checked + label {
  background: var(--deep-green);
  border-color: var(--deep-green);
  color: var(--cream);
}
.seg input:focus-visible + label { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Entrée pills */
.entree-wrap { border: 0; padding: 0; margin: 0 0 16px; }
.entree-wrap legend { padding: 0; }
.entree-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.entree-pills input { position: absolute; opacity: 0; pointer-events: none; }
.pill-label {
  padding: 0.55em 1.3em;
  border: 1.5px solid var(--sage-line);
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--deep-green);
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.pill-label:hover { border-color: var(--gold); }
.entree-pills input:checked + .pill-label {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}
.entree-pills input:focus-visible + .pill-label { outline: 3px solid var(--gold); outline-offset: 2px; }

.kids-note { font-size: 0.92rem; font-weight: 300; margin: 0 0 12px; }
.kids-or {
  font-size: 0.8rem;
  font-style: italic;
  opacity: 0.7;
  margin: 12px 0 8px;
}
.diet-wrap { margin-top: 2px; }
.diet-detail { margin-top: 12px; }

/* Compact Yes/No for the dietary question */
.seg-sm { grid-template-columns: repeat(2, minmax(0, 110px)); gap: 8px; margin-bottom: 0; }
.seg-sm label { padding: 8px 6px; font-size: 0.88rem; }

.entree-label {
  width: 100%;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
}
.entree-chip--kid { background: rgba(232, 180, 184, 0.35); }
.diet-list { margin: 0; padding-left: 1.2em; }
.diet-list li { margin-bottom: 0.45em; font-size: 0.95rem; }
.diet-list li::marker { color: var(--gold); }

.party-extras-card { margin-bottom: 22px; }
.party-extras-card h3 { margin-bottom: 14px; }
.extras-grid { display: flex; flex-direction: column; gap: 16px; }

.rsvp-submit-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.rsvp-back-link { font-size: 0.9rem; }

/* Confirmation recap */
.recap-list { list-style: none; margin: 0; padding: 0; }
.recap-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(163, 177, 138, 0.25);
}
.recap-row:last-child { border-bottom: 0; }
.recap-name { font-family: var(--font-heading); font-weight: 600; font-size: 1.12rem; color: var(--deep-green); }
.recap-name .kid-chip { margin-left: 6px; }
.recap-detail { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
.recap-chip {
  padding: 0.25em 0.9em;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.recap-yes { background: rgba(163, 177, 138, 0.3); color: var(--deep-green); }
.recap-no { background: rgba(47, 62, 46, 0.08); color: var(--ink); }
.recap-pending { background: rgba(201, 162, 39, 0.16); color: var(--ink); }
.recap-sub { font-size: 0.85rem; opacity: 0.8; }
.recap-diet { font-style: italic; }
.recap-meta {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(163, 177, 138, 0.25);
  font-size: 0.92rem;
}
.recap-meta p { margin: 0 0 6px; }
.rsvp-edit-line { margin-top: 22px; font-size: 0.92rem; opacity: 0.85; }

/* ---- Admin (Phase 4) ------------------------------------------------------------------------ */

.admin-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.admin-pass-label { margin-top: 14px; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.stat-card { text-align: center; padding: 20px 10px; }
.stat-num {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 1.1;
  color: var(--deep-green);
}
.stat-label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.75;
}
.stat-yes .stat-num { color: var(--gold); }
.stat-wait .stat-num { opacity: 0.55; }

.rate-card { margin-bottom: 20px; }
.rate-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.entree-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.entree-chip {
  padding: 0.35em 0.9em;
  border: 1px solid var(--sage-line);
  border-radius: 999px;
  font-size: 0.82rem;
  background: rgba(163, 177, 138, 0.12);
}

.admin-controls {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.admin-search { max-width: 340px; }
.admin-pending-toggle { display: flex; align-items: center; gap: 8px; font-size: 0.92rem; cursor: pointer; }
.admin-pending-toggle input { width: 17px; height: 17px; accent-color: var(--deep-green); }

.table-wrap { padding: 0; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.data-table th {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: left;
  color: var(--deep-green);
  padding: 14px 14px 10px;
  border-bottom: 2px solid var(--sage-line);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.data-table th[aria-sort="ascending"]::after { content: " ↑"; color: var(--gold); }
.data-table th[aria-sort="descending"]::after { content: " ↓"; color: var(--gold); }
.data-table td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(163, 177, 138, 0.2);
  vertical-align: top;
}
.data-table tbody tr:hover { background: rgba(163, 177, 138, 0.08); }
.cell-muted { color: var(--ink); opacity: 0.7; font-weight: 300; }
.cell-note { max-width: 260px; }
.admin-count-line { margin-top: 10px; font-size: 0.85rem; opacity: 0.65; text-align: right; }

/* ---- Olde City map + story (Phase 5) --------------------------------------------------------- */

/* Uploaded map image with percentage-positioned pins */
.pinmap-wrap {
  position: relative;
  margin: 26px auto 0;
  max-width: 1000px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--sage-line);
  box-shadow: var(--shadow-soft);
  background: #efeadb;
}
.pinmap-img { display: block; width: 100%; height: auto; }
.pinmap-pins { position: absolute; inset: 0; }
.pinmap-placing { cursor: crosshair; }
.pinmap-placing .pinmap-img { outline: 3px dashed var(--gold); outline-offset: -3px; }

.pinmap-admin {
  display: none;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 14px;
}
body.ae-on .pinmap-admin { display: flex; }
.pinmap-hint { font-size: 0.85rem; opacity: 0.7; }

.pin-tray {
  display: none;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  margin: 14px auto 0;
  padding: 14px 18px;
  max-width: 700px;
  border: 2px dashed var(--sage);
  border-radius: 14px;
  text-align: center;
}
body.ae-on .pin-tray { display: flex; }
.pin-tray span { font-size: 0.84rem; opacity: 0.7; }
.pin-tray-list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pin-tray-item {
  border: 1.5px solid var(--sage-line);
  background: #fff;
  border-radius: 999px;
  padding: 5px 14px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--deep-green);
  cursor: pointer;
}
.pin-tray-item:hover { border-color: var(--gold); background: rgba(201, 162, 39, 0.08); }

.pin-photo-btn {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 4;
  border: 0;
  border-radius: 999px;
  background: rgba(47, 62, 46, 0.72);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 0.8rem;
  padding: 6px 12px;
  cursor: pointer;
}

/* Gold teardrop pins with a soft pulsing ring */
.pin {
  position: absolute;
  transform: translate(-50%, -100%);
  width: 26px;
  height: 34px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
body.ae-on .pin { cursor: grab; }
.pin:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; border-radius: 6px; }
.pin-drop {
  position: absolute;
  bottom: 3px;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  background: var(--gold);
  border: 2px solid #fffdf7;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 3px 10px rgba(47, 62, 46, 0.35);
}
.pin-ring {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  opacity: 0;
  animation: pin-pulse 2.6s ease-out infinite;
}
@keyframes pin-pulse {
  0%   { transform: scale(0.5); opacity: 0.7; }
  70%  { transform: scale(2.1); opacity: 0; }
  100% { transform: scale(2.1); opacity: 0; }
}
.pin-label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: rgba(251, 247, 239, 0.94);
  border: 1px solid var(--sage-line);
  border-radius: 999px;
  padding: 0.2em 0.75em;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--deep-green);
  box-shadow: var(--shadow-soft);
}

/* The venue gets the big pin */
.pin--venue .pin-drop {
  width: 36px;
  height: 36px;
  background: var(--deep-green);
  border-color: var(--gold);
}
.pin--venue .pin-ring {
  border-color: var(--gold);
  border-width: 3px;
  animation-duration: 2s;
}
.pin--venue { width: 34px; height: 42px; }
.pin--venue .pin-drop { width: 32px; height: 32px; margin-left: -16px; }
.pin--venue .pin-label {
  font-size: 0.78rem;
  font-weight: 500;
  border-color: var(--gold);
}

/* Labels crowd a phone-sized map — the venue keeps its chip, the rest
   surface their names in the story card. */
@media (max-width: 620px) {
  .pin:not(.pin--venue) .pin-label { display: none; }
  .pin { width: 22px; height: 30px; }
  .pin-drop { width: 20px; height: 20px; margin-left: -10px; }
}

/* Story modal — centered card on desktop, full sheet on mobile */
.story {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: rgba(47, 62, 46, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.story-card {
  position: relative;
  width: min(420px, 94vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: #fffdf7;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}
.story-media {
  position: relative;
  flex: 0 1 auto;
  height: min(52vh, 480px);
  min-height: 220px;
  background: #2f3e2e;
}
.story-media video,
.story-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.story-text { padding: 18px 22px 22px; overflow-y: auto; }
.story-name { font-size: 1.45rem; margin: 0 0 2px; }
.story-caption {
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--gold);
  font-size: 1.02rem;
  margin: 0 0 8px;
}
.story-blurb { font-weight: 300; font-size: 0.97rem; margin: 0; }

.story-close,
.story-unmute {
  position: absolute;
  z-index: 3;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(47, 62, 46, 0.55);
  color: var(--cream);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.story-close { top: 10px; right: 10px; font-size: 1.5rem; }
.story-unmute { bottom: 12px; right: 12px; }
.story-count {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  background: rgba(47, 62, 46, 0.55);
  color: var(--cream);
  border-radius: 999px;
  padding: 0.25em 0.85em;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
}
.story-arrow {
  position: absolute;
  z-index: 3;
  top: calc(min(52vh, 480px) / 2);
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(251, 247, 239, 0.22);
  color: var(--cream);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s;
}
.story-arrow:hover { background: rgba(251, 247, 239, 0.45); }
.story-prev { left: 10px; }
.story-next { right: 10px; }
body.story-open { overflow: hidden; }

@media (max-width: 600px) {
  .story { padding: 0; }
  .story-card {
    width: 100vw;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
  }
  .story-media { flex: 1 1 auto; height: auto; min-height: 0; }
  .story-text { padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
  .story-arrow { top: 45%; }
}

/* ---- Admin CMS (bar, tabs, editor, media, guests) ------------------------------------------- */

.footer-admin { margin-top: 14px !important; }
.footer-admin a {
  color: var(--cream);
  opacity: 0.45;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
}
.footer-admin a:hover { opacity: 0.9; text-decoration: underline; }

.admin-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.4vw, 22px);
  padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
  background: var(--deep-green);
  font-size: 0.8rem;
  overflow-x: auto;
  white-space: nowrap;
}
.admin-bar-label { color: var(--gold); font-weight: 500; letter-spacing: 0.08em; }
.admin-bar a {
  color: var(--cream);
  text-decoration: none;
  letter-spacing: 0.06em;
}
.admin-bar a:hover { color: var(--gold); }
.admin-bar-logout { display: inline; }
.admin-bar-logout button {
  background: none;
  border: 0;
  color: var(--blush);
  font: inherit;
  letter-spacing: 0.06em;
  cursor: pointer;
  padding: 0;
}
body.has-admin-bar { padding-bottom: 52px; }

.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 6px;
  max-width: var(--maxw);
  margin: 8px auto 0;
  padding: 0 20px;
}
.admin-tabs a {
  padding: 0.45em 1.1em;
  border: 1.5px solid var(--sage-line);
  border-radius: 999px;
  text-decoration: none;
  color: var(--deep-green);
  font-size: 0.85rem;
  font-weight: 500;
}
.admin-tabs a.active { background: var(--deep-green); border-color: var(--deep-green); color: var(--cream); }
.admin-tabs a:hover:not(.active) { border-color: var(--gold); }
.admin-tab-logout { margin-left: 8px; }
.admin-tab-logout button {
  background: none;
  border: 0;
  color: var(--ink);
  opacity: 0.6;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  text-decoration: underline;
}

/* Structure-driven editor */
.admin-editor form { max-width: 860px; margin: 0 auto; }
.ed-section { padding: 0; margin-bottom: 14px; overflow: hidden; }
.ed-section > summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 22px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--deep-green);
}
.ed-section > summary::-webkit-details-marker { display: none; }
.ed-section > summary::after { content: "›"; float: right; color: var(--gold); transition: transform 0.25s; }
.ed-section[open] > summary::after { transform: rotate(90deg); }
.ed-section-body { padding: 4px 22px 20px; }
.ed-section--open .ed-section-body { padding-top: 20px; }

.ed-group {
  border: 1px solid var(--sage-line);
  border-radius: 12px;
  padding: 14px 16px 10px;
  margin: 0 0 14px;
}
.ed-group legend {
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--deep-green);
  padding: 0 6px;
}
.ed-field { margin-bottom: 12px; }
.ed-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink);
  opacity: 0.8;
  margin-bottom: 4px;
}
.ed-num { max-width: 180px; }
.ed-bool { max-width: 140px; }
.ed-color-wrap { display: inline-flex; align-items: center; gap: 10px; }
.ed-color { width: 52px; height: 34px; border: 1px solid var(--sage-line); border-radius: 8px; padding: 2px; background: #fff; cursor: pointer; }

.ed-item {
  position: relative;
  border: 1px dashed var(--sage-line);
  border-radius: 12px;
  padding: 14px 16px 6px;
  margin-bottom: 12px;
  background: rgba(163, 177, 138, 0.05);
}
.ed-item-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.ed-item-n {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--deep-green);
  opacity: 0.6;
}
.ed-remove {
  background: none;
  border: 0;
  color: #a5484f;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  padding: 2px 4px;
}
.ed-remove:hover { text-decoration: underline; }
.ed-add { cursor: pointer; background: none; font: inherit; }
.ed-save-bar {
  position: sticky;
  bottom: calc(52px + 10px);
  display: flex;
  justify-content: center;
  gap: 14px;
  padding: 10px 0;
}
.ed-save-bar .btn { box-shadow: 0 10px 30px rgba(47, 62, 46, 0.25); }

/* Design page */
.design-form { max-width: 720px; margin: 0 auto; }
.design-card { margin-bottom: 16px; }
.design-swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.design-swatch {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--sage-line);
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 0.9rem;
}
.design-swatch input[type="color"] {
  width: 46px; height: 34px;
  border: 1px solid var(--sage-line);
  border-radius: 8px;
  padding: 2px;
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
}
.design-fonts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.design-actions { position: static; }

/* Media page */
.media-card { margin-bottom: 16px; }
.media-count { font-size: 0.85rem; font-weight: 400; opacity: 0.65; }
.media-note { font-size: 0.9rem; opacity: 0.75; margin-top: -4px; }
.media-upload-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0; }
.media-upload-row .field-input[type="file"] { width: auto; flex: 1 1 220px; padding: 8px 10px; font-size: 0.85rem; }
.btn-sm-pad { padding: 0.55em 1.4em; font-size: 0.76rem; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; margin-top: 14px; }
.media-thumb { position: relative; margin: 0; }
.media-thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 1px solid var(--sage-line); }
.media-thumb figcaption {
  font-size: 0.68rem;
  opacity: 0.6;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.media-delete {
  position: absolute;
  top: 6px; right: 6px;
  width: 26px; height: 26px;
  border: 0;
  border-radius: 50%;
  background: rgba(47, 62, 46, 0.65);
  color: var(--cream);
  cursor: pointer;
  font-size: 0.8rem;
}
.media-delete:hover { background: #a5484f; }
.slot-list { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.slot-row {
  display: flex;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--sage-line);
  border-radius: 12px;
  padding: 10px 14px;
}
.slot-thumb { width: 74px; height: 56px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.slot-info { flex: 1; min-width: 0; font-size: 0.92rem; }
.slot-video-status { font-size: 1.3rem; width: 40px; text-align: center; opacity: 0.4; flex-shrink: 0; }
.slot-video-status.on { opacity: 1; }

/* Guests page */
.guests-add-card { margin-bottom: 16px; }
.guests-inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.guests-inline-form .field-input { width: auto; flex: 1 1 180px; padding: 9px 12px; font-size: 0.92rem; }
.guests-num { flex: 0 0 76px !important; }
.guest-kid-label { display: flex; align-items: center; gap: 5px; font-size: 0.85rem; }
.guest-kid-label input { width: 16px; height: 16px; accent-color: var(--deep-green); }
.party-card { margin-bottom: 14px; }
.party-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.party-head h3 { margin: 0; }
.guest-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(163, 177, 138, 0.2);
}
.guest-edit-form { flex: 1 1 380px; }
.guest-add-form { margin-top: 12px; }

/* ---- Dress code layout ---------------------------------------------------------------------- */

.dress-grid {
  display: grid;
  grid-template-columns: 4fr 6fr;
  gap: clamp(30px, 5vw, 64px);
  align-items: center;
}
.dress-photo { max-width: 400px; justify-self: end; transform: rotate(-1.2deg); }
.dress-copy p {
  font-size: 1.06rem;
  font-weight: 300;
  line-height: 1.9;
  max-width: 54ch;
  margin-bottom: 1.5em;
  white-space: pre-line; /* the "simply inspiration" note is written on two lines */
}
.dress-copy p:last-child { margin-bottom: 0; }

@media (max-width: 780px) {
  .dress-grid { grid-template-columns: 1fr; }
  .dress-photo { max-width: 340px; margin: 0 auto; justify-self: center; transform: none; }
  .dress-copy { text-align: center; }
  .dress-copy p { margin-left: auto; margin-right: auto; }
}

/* Inspiration photos — a single centered row across the bottom of the page */
.inspo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin: 30px auto 8px;
  max-width: 960px;
}
@media (max-width: 700px) {
  .inspo-grid { grid-template-columns: 1fr; max-width: 420px; gap: 18px; }
}
.inspo-item {
  margin: 0;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: #fffdf7;
  border: 1px solid var(--sage-line);
}
.inspo-item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.inspo-item figcaption {
  padding: 8px 10px;
  font-size: 0.82rem;
  color: var(--deep-green);
}
.inspo-links-heading { margin-top: 34px; font-size: 1.25rem; }
.pill-link-wrap { display: inline-block; position: relative; }

/* ---- Travel: other stay options -------------------------------------------------------------- */

.stay-sub { margin-top: 46px; font-size: 1.35rem; }
.stay-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  max-width: 860px;
  margin: 18px auto 0;
}
.stay-card { display: flex; flex-direction: column; align-items: flex-start; }
.stay-card .snapshot-note { flex: 1; }
.stay-card .btn { margin-top: 8px; }

/* ---- Our Story ------------------------------------------------------------------------------ */

.story-copy { max-width: 66ch; margin: 0 auto; }
.story-para {
  font-size: 1.08rem;
  font-weight: 300;
  line-height: 1.85;
  margin-bottom: 1.3em;
  white-space: pre-line;
}
.story-para:first-letter { /* a small editorial flourish on the opening line */
  font-family: var(--font-heading);
  font-weight: 700;
}

/* ---- Wedding party -------------------------------------------------------------------------- */

.party-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 24px;
  margin-top: 26px;
}
.party-card { text-align: center; display: flex; flex-direction: column; align-items: center; }
.party-photo {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--cream);
  box-shadow: 0 6px 20px rgba(58, 90, 64, 0.16);
  margin-bottom: 14px;
}
.party-card h3 { margin-bottom: 2px; }
.party-role {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.7em;
}
.party-card .snapshot-note { font-size: 0.92rem; }

@media (max-width: 480px) {
  .party-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .party-card { padding: 18px 12px; }
  .party-photo { width: 110px; height: 110px; }
}

/* ---- Events timeline ------------------------------------------------------------------------ */

.timeline { max-width: 780px; margin: 0 auto; position: relative; }
.tl-row {
  display: grid;
  grid-template-columns: 150px 26px 1fr;
  align-items: start;
  gap: 0 6px;
}
.tl-when { text-align: right; padding-top: 22px; }
.tl-date {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  color: var(--deep-green);
  line-height: 1.3;
}
.tl-time { display: block; font-size: 0.85rem; opacity: 0.75; }
.tl-dot { position: relative; align-self: stretch; }
.tl-dot::before { /* connecting line */
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: -22px;
  width: 2px;
  margin-left: -1px;
  background: var(--sage-line);
}
.tl-row:last-child .tl-dot::before { bottom: 50%; }
.tl-dot::after { /* the marker */
  content: "";
  position: absolute;
  left: 50%;
  top: 28px;
  width: 13px;
  height: 13px;
  margin-left: -6.5px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--cream);
  box-shadow: 0 0 0 1px var(--sage-line);
}
.tl-card { margin-bottom: 22px; display: flex; flex-direction: column; align-items: flex-start; }
.tl-card h3 { margin-bottom: 2px; }
.tl-where {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--deep-green);
  opacity: 0.85;
  margin-bottom: 0.6em;
}
.tl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.tl-chip {
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  background: rgba(163, 177, 138, 0.24);
  color: var(--deep-green);
  border-radius: 999px;
  padding: 0.28em 0.85em;
}
.btn-sm { font-size: 0.72rem; padding: 0.5em 1.4em; }

@media (max-width: 620px) {
  .tl-row { grid-template-columns: 20px 1fr; gap: 0 12px; }
  .tl-when {
    grid-column: 2;
    text-align: left;
    padding-top: 0;
    margin-bottom: 6px;
    display: flex;
    gap: 10px;
    align-items: baseline;
  }
  .tl-dot { grid-row: 1 / span 2; grid-column: 1; }
  .tl-dot::after { top: 6px; }
  .tl-card { grid-column: 2; }
}

/* ---- Restaurants & bars --------------------------------------------------------------------- */

.spot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 18px;
  margin-top: 26px;
}
.spot-card { display: flex; flex-direction: column; }
.spot-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.spot-top h3 { font-size: 1.15rem; margin-bottom: 0.3em; }
.price-chip {
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--gold);
  letter-spacing: 0.04em;
}
.spot-card .snapshot-note { flex: 1; font-size: 0.92rem; }
.spot-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.spot-note-chip {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(232, 180, 184, 0.4);
  color: var(--deep-green);
  border-radius: 999px;
  padding: 0.25em 0.8em;
}

/* ===== ADMIN EDIT MODE ===== */
/* Everything here is admin-only chrome except the .ae-font/.ae-size/.ae-color
   overrides, which style guest-visible text via the _styles map. */

.ae-toggle {
  background: none;
  border: 1.5px solid rgba(251, 247, 239, 0.55);
  border-radius: 999px;
  color: var(--cream);
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  padding: 3px 12px;
  cursor: pointer;
}
.ae-toggle--on { background: var(--gold); border-color: var(--gold); color: var(--ink); font-weight: 500; }

/* Hover/tap affordances — outline + pencil never shift layout */
body.ae-on .ae-editable {
  position: relative;
  outline: 1px dashed rgba(201, 162, 39, 0.5);
  outline-offset: 3px;
  cursor: pointer;
  border-radius: 2px;
}
body.ae-on .ae-editable:hover { outline: 1.5px solid var(--gold); background: rgba(201, 162, 39, 0.07); }
body.ae-on .ae-editable::after {
  content: "✎";
  position: absolute;
  top: -0.7em;
  right: -1.15em;
  font-size: 11px;
  line-height: 1;
  color: var(--gold);
  opacity: 0.5;
  pointer-events: none;
}
body.ae-on .ae-editable:hover::after { opacity: 1; }

.ae-editing,
body.ae-on .ae-editable.ae-editing {
  outline: 2px solid var(--gold);
  background: rgba(201, 162, 39, 0.08);
  min-width: 1.5em;
  min-height: 1em;
  display: inline-block;
}
.ae-editing::after { display: none !important; }

.ae-saved { animation: ae-pulse 0.9s ease-out; }
@keyframes ae-pulse {
  0% { box-shadow: 0 0 0 3px rgba(58, 90, 64, 0.75); }
  100% { box-shadow: 0 0 0 6px rgba(58, 90, 64, 0); }
}

.ae-bar {
  position: fixed;
  z-index: 400;
  display: flex;
  gap: 4px;
  background: var(--deep-green);
  border-radius: 10px;
  padding: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.ae-bar button,
.ae-pop-row button {
  background: none;
  border: 0;
  color: var(--cream);
  font: inherit;
  font-size: 0.9rem;
  padding: 4px 10px;
  border-radius: 7px;
  cursor: pointer;
}
.ae-bar button:hover, .ae-pop-row button:hover { background: rgba(251, 247, 239, 0.18); }
.ae-bar .ae-bar-save, .ae-pop-row .ae-bar-save { color: #9fe0a8; font-weight: 700; }
.ae-bar .ae-bar-cancel, .ae-pop-row .ae-bar-cancel { color: var(--blush); }

.ae-pop {
  position: fixed;
  z-index: 400;
  background: #fffdf7;
  border: 1px solid var(--sage);
  border-radius: 12px;
  box-shadow: 0 16px 44px rgba(47, 62, 46, 0.35);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ae-pop textarea {
  width: 100%;
  border: 1.5px solid var(--sage-line);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  resize: vertical;
}
.ae-pop-row { display: flex; justify-content: flex-end; gap: 6px; background: var(--deep-green); margin: 0 -10px -10px; padding: 6px 10px; border-radius: 0 0 11px 11px; }

.ae-toast {
  position: fixed;
  bottom: 68px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  background: var(--deep-green);
  color: var(--cream);
  padding: 0.6em 1.3em;
  border-radius: 999px;
  font-size: 0.88rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  max-width: 90vw;
}
.ae-toast--err { background: #a5484f; }

/* Image replacement */
.ae-imgwrap { position: relative; display: block; }
.ae-imgoverlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(47, 62, 46, 0.55);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  border-radius: inherit;
  opacity: 0.25;
  transition: opacity 0.2s;
  pointer-events: none;
}
body.ae-on .ae-imgoverlay { display: flex; }
body.ae-on .ae-imgwrap { cursor: pointer; outline: 2px dashed rgba(201, 162, 39, 0.6); outline-offset: 3px; }
body.ae-on .ae-imgwrap:hover .ae-imgoverlay,
body.ae-on .ae-imgwrap.ae-dragover .ae-imgoverlay { opacity: 1; }
.ae-imgwrap.ae-dragover { outline: 3px solid var(--gold) !important; }

.ae-dropzone {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: 2px dashed var(--sage);
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 16px;
  color: var(--deep-green);
  cursor: pointer;
  text-align: center;
}
body.ae-on .ae-dropzone { display: flex; }
.ae-dropzone span { font-size: 0.85rem; opacity: 0.7; }
.ae-dropzone:hover, .ae-dropzone.ae-dragover { border-color: var(--gold); background: rgba(201, 162, 39, 0.06); }

.ae-gallery-del {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: none;
  border: 0;
  border-radius: 50%;
  background: rgba(47, 62, 46, 0.7);
  color: var(--cream);
  font-size: 0.9rem;
  cursor: pointer;
}
body.ae-on .ae-gallery-del { display: block; }
.ae-gallery-del:hover { background: #a5484f; }
body.ae-on .gallery-item { position: relative; }

.ae-gallery-nav {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  display: none;
  gap: 3px;
  background: rgba(47, 62, 46, 0.72);
  border-radius: 8px;
  padding: 3px;
}
body.ae-on .ae-gallery-nav { display: inline-flex; }
.ae-gallery-nav button {
  border: 0;
  background: none;
  color: var(--cream);
  font-size: 0.85rem;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 5px;
  cursor: pointer;
}
.ae-gallery-nav button:hover { background: rgba(251, 247, 239, 0.22); }

/* Background picker */
.ae-bgpanel {
  position: fixed;
  right: 14px;
  bottom: 62px;
  z-index: 420;
  width: min(300px, 92vw);
  background: #fffdf7;
  border: 1px solid var(--sage);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(47, 62, 46, 0.35);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ae-bg-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--deep-green);
}
.ae-bg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ae-bg-swatch {
  border: 1.5px solid var(--sage-line);
  border-radius: 10px;
  background: #fff;
  padding: 6px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  text-align: center;
}
.ae-bg-swatch:hover { border-color: var(--gold); }
.ae-bg-swatch--on { border-color: var(--deep-green); border-width: 2px; }
/* the preview inherits each preset's own background-image via body.bg-* rules */
.ae-bg-prev {
  display: block;
  width: 100%;
  height: 44px;
  border-radius: 6px;
  border: 1px solid var(--sage-line);
  background-color: var(--cream);
  /* shrink the blossom tile so a whole motif is visible in the swatch */
  background-size: 110px 110px, cover, cover, cover, cover, cover, cover;
}
.ae-bg-scope {
  border: 1px solid var(--sage-line);
  border-radius: 10px;
  padding: 8px 10px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ae-bg-scope legend {
  padding: 0 4px;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--deep-green);
}
.ae-bg-scope label { display: flex; align-items: center; gap: 7px; font-size: 0.86rem; cursor: pointer; }

/* Style popover (⚙): three constrained controls + reset */
.ae-style {
  position: fixed;
  z-index: 410;
  background: #fffdf7;
  border: 1px solid var(--sage);
  border-radius: 12px;
  box-shadow: 0 16px 44px rgba(47, 62, 46, 0.35);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(92vw, 330px);
}
.ae-style-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.ae-style-lab {
  width: 42px;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--deep-green);
  opacity: 0.8;
}
.ae-chip {
  border: 1.5px solid var(--sage-line);
  background: #fff;
  border-radius: 999px;
  padding: 3px 10px;
  font-family: var(--font-body);
  font-size: 0.76rem;
  color: var(--ink);
  cursor: pointer;
}
.ae-chip:hover { border-color: var(--gold); }
.ae-chip--on { background: var(--deep-green); border-color: var(--deep-green); color: var(--cream); }
.ae-chip--dot {
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
}
.ae-chip--dot.ae-chip--on { outline: 2px solid var(--deep-green); outline-offset: 2px; }
.ae-style-reset { justify-content: flex-end; border-top: 1px solid var(--sage-line); padding-top: 8px; }

/* List add/remove/reorder controls */
.ae-list-add {
  display: none;
  margin: 14px auto 0;
  border: 2px dashed var(--sage);
  background: none;
  border-radius: 999px;
  padding: 8px 22px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--deep-green);
  cursor: pointer;
}
body.ae-on .ae-list-add { display: block; }
.ae-list-add:hover { border-color: var(--gold); background: rgba(201, 162, 39, 0.06); }

.ae-has-tools { position: relative; }
.ae-item-tools {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  display: none;
  gap: 3px;
  background: var(--deep-green);
  border-radius: 8px;
  padding: 3px;
}
body.ae-on .ae-item-tools { display: inline-flex; }
.ae-item-tools button {
  border: 0;
  background: none;
  color: var(--cream);
  font-size: 0.8rem;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 5px;
  cursor: pointer;
}
.ae-item-tools button:hover { background: rgba(251, 247, 239, 0.2); }
.ae-item-tools button[data-act="remove"] { color: var(--blush); }

/* Empty just-added values still need a click target */
body.ae-on .ae-editable:empty {
  display: inline-block;
  min-width: 3.5em;
  min-height: 1em;
}
body.ae-on .ae-editable:empty::before { content: "(edit)"; opacity: 0.4; font-size: 0.8em; }

/* Guest-visible per-element style overrides (stored in content._styles) */
.ae-font-heading { font-family: var(--font-heading); }
.ae-font-script { font-family: var(--font-script); }
.ae-font-body { font-family: var(--font-body); }
.ae-size-s { font-size: 0.85em; }
.ae-size-m { font-size: 1em; }
.ae-size-l { font-size: 1.25em; }
.ae-size-xl { font-size: 1.6em; }
.ae-color-cream { color: var(--cream); }
.ae-color-sage { color: var(--sage); }
.ae-color-deep-green { color: var(--deep-green); }
.ae-color-gold { color: var(--gold); }
.ae-color-blush { color: var(--blush); }
.ae-color-ink { color: var(--ink); }
.ae-color-bloom-pink { color: var(--bloom-pink); }
.ae-color-bloom-purple { color: var(--bloom-purple); }
.ae-color-bloom-orange { color: var(--bloom-orange); }
.ae-color-bloom-yellow { color: var(--bloom-yellow); }

/* ---- Registry: gift ideas ------------------------------------------------------ */

.gift-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 28px;
}
.gift-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.gift-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.gift-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; gap: 4px; }
.gift-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.gift-top h3 { margin: 0; font-size: 1.25rem; }
.gift-price {
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--gold);
  font-size: 1.05rem;
}
.gift-url-admin {
  font-size: 0.78rem;
  opacity: 0.7;
  margin: 0;
  word-break: break-all;
}
.gift-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: auto; padding-top: 10px; }
.gift-badge {
  align-self: flex-start;
  margin-top: auto;
  padding: 0.4em 1em;
  border-radius: 999px;
  background: rgba(163, 177, 138, 0.3);
  color: var(--deep-green);
  font-size: 0.85rem;
  font-weight: 500;
}
/* Purchased gifts stay visible but clearly taken */
.gift-purchased { opacity: 0.55; filter: grayscale(0.5); }
body.ae-on .gift-purchased { opacity: 1; filter: none; } /* admins see them full-strength to edit */

.ship-card {
  max-width: 520px;
  margin: 34px auto 0;
  text-align: center;
}
.ship-card h3 { margin-bottom: 4px; }
.ship-address {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--deep-green);
  white-space: pre-line;
  margin: 8px 0 14px;
}

/* ---- Video in a photo slot ---------------------------------------------------- */
/* Clips are interchangeable with photos, so they inherit each slot's shaping. */
.spot-photo video, .inspo-item video, .gallery-item video,
.hero-photo video, .framed video, .fund-card > video, .party-photo,
video.hotel-img {
  display: block;
  width: 100%;
}
.spot-photo video { aspect-ratio: 16 / 10; object-fit: cover; }
.inspo-item video { aspect-ratio: 4 / 5; object-fit: cover; }
.gallery-item video { height: auto; }
.hero-photo video { max-height: calc(42svh - 20px); object-fit: cover; border-radius: 13px; }
.framed video { border-radius: calc(var(--radius) - 8px); }
video.party-photo { aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; }
video.hotel-img, .fund-card > video { aspect-ratio: 3 / 2; object-fit: cover; }
.lb-video {
  max-width: min(1100px, 92vw);
  max-height: 82vh;
  background: #000;
  border-radius: 8px;
}

/* ---- Scroll motion ------------------------------------------------------------------------ */

html.js .fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
html.js .fade-up.in-view { opacity: 1; transform: none; }

/* ---- Reduced motion ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html.js .fade-up { opacity: 1; transform: none; }
}