/* =========================================================
   Taormina Wedding — Elegant Mediterranean
   ========================================================= */
:root {
  --cream: #fbf7f0;
  --cream-2: #f3ebdd;
  --ink: #2f4858;        /* deep sea slate */
  --ink-soft: #5b6f7b;
  --sea: #3b7a8c;        /* Ionian teal */
  --sea-deep: #2c5d6b;
  --terracotta: #c8693f; /* Sicilian terracotta */
  --terracotta-deep: #a9522e;
  --gold: #b8924a;
  --line: #e3d8c6;
  --shadow: 0 10px 30px rgba(47, 72, 88, 0.08);

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;

  --maxw: 1080px;
  --narrow: 680px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 300;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.12; margin: 0; }
a { color: var(--sea-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
p { margin: 0 0 1rem; }
strong { font-weight: 500; color: var(--ink); }

/* ---------- Header / nav ---------- */
/* Fixed and transparent over the hero; turns solid (cream) once scrolled, or
   starts solid on pages without a hero (.solid). */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.5rem 1.5rem;
  padding: 1.1rem clamp(1rem, 4vw, 3rem);
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  color: #fff; background: transparent; border-bottom: 1px solid transparent;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, padding 0.35s ease;
}
.site-header.scrolled, .site-header.solid {
  background: color-mix(in srgb, var(--cream) 92%, transparent);
  backdrop-filter: blur(10px);
  color: var(--ink);
  border-bottom-color: var(--line);
  padding-block: 0.85rem;
}
.brand { display: flex; align-items: center; line-height: 1; color: inherit; }
.brand:hover { text-decoration: none; }
.monogram { font-family: var(--serif); font-size: 1.6rem; letter-spacing: 0.06em; color: currentColor; }
.monogram .amp { font-size: 0.8em; padding: 0 0.06em; }
.site-nav { display: flex; align-items: center; gap: clamp(0.8rem, 2vw, 1.6rem); flex-wrap: wrap; }
.site-nav a { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: currentColor; opacity: 0.82; }
.site-nav a:hover { opacity: 1; text-decoration: none; }
.site-nav a.active { opacity: 1; }
.nav-cta { border: 1px solid rgba(255,255,255,0.7); color: #fff !important; padding: 0.45rem 1.1rem; border-radius: 999px; opacity: 1; }
.nav-cta:hover { background: #fff; color: var(--ink) !important; }
.site-header.scrolled .nav-cta, .site-header.solid .nav-cta { border-color: var(--terracotta); color: var(--terracotta-deep) !important; }
.site-header.scrolled .nav-cta:hover, .site-header.solid .nav-cta:hover { background: var(--terracotta); color: #fff !important; }

/* ---------- Layout primitives ---------- */
.site-main { min-height: 60vh; }
/* pages without a hero need clearance under the fixed header */
.site-main.has-fixed-header { padding-top: 4.7rem; }
/* keep anchored section headings clear of the fixed header */
section[id] { scroll-margin-top: 80px; }

/* ---------- Invite gate (/) ---------- */
.bare-body { min-height: 100svh; display: grid; place-items: center; background: var(--cream); }
.gate { width: 100%; max-width: 560px; padding: 2rem 1.5rem; text-align: center; }
.gate-eyebrow { text-transform: uppercase; letter-spacing: 0.24em; font-size: 0.72rem; color: var(--terracotta-deep); margin: 0 0 1.5rem; }
.gate-title { font-family: var(--serif); font-weight: 400; font-size: clamp(3rem, 10vw, 5.5rem); line-height: 0.95; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 1.5rem; }
.gate-title .amp { font-style: italic; font-size: 0.7em; padding: 0 0.06em; }
.gate-lede { color: var(--ink-soft); font-size: 1.05rem; margin: 0 auto 2rem; max-width: 26rem; }
.gate-form { display: flex; flex-direction: column; gap: 1rem; max-width: 360px; margin: 0 auto; }
.gate-form input { width: 100%; padding: 0.85rem 1rem; font-family: var(--sans); font-size: 1.05rem; text-align: center; letter-spacing: 0.02em; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.gate-form input:focus { outline: none; border-color: var(--sea); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sea) 18%, transparent); }
.gate-form .flash { margin-bottom: 0.5rem; }
.section { max-width: var(--maxw); margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 4vw, 2rem); }
.section-narrow { max-width: var(--narrow); margin-left: auto; margin-right: auto; }
.section-alt { background: var(--cream-2); max-width: none; }
.section-alt > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
/* RSVP band: section tint (matching "Why Taormina") full-width across the whole
   section, from the heading down to just below the submit button. */
.rsvp-section { background: var(--tint); }
.center { text-align: center; }
.muted { color: var(--ink-soft); }
.lede { font-size: 1.12rem; color: var(--ink-soft); }
/* Editable body copy uses the full Text color (Design → Text), so it stays
   readable and the host can change it. Dark sections override this below. */
.rich { color: var(--ink); }
.section-title { font-size: clamp(1.7rem, 4vw, 2.3rem); margin-bottom: 1.2rem; color: var(--ink); }

/* ---------- Italic ampersand in the couple's name ---------- */
.amp { font-style: italic; font-size: 0.86em; padding: 0 0.04em; }

/* ---------- Hero (full-bleed image) ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  text-align: center;
  color: #fff;
  background: var(--dark);
}
.hero-image {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%;
  animation: hero-in 1.7s cubic-bezier(0.2, 0.75, 0.25, 1) both;
}
.hero-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(20,16,14,0.34), rgba(20,16,14,0.04) 45%, rgba(20,16,14,0.62)),
    linear-gradient(to right, rgba(20,16,14,0.16), transparent 45%);
}
.hero-copy { position: relative; z-index: 2; padding: 5rem 1.5rem 3rem; text-shadow: 0 2px 24px rgba(0,0,0,0.28); }
.hero-eyebrow { letter-spacing: 0.28em; text-transform: uppercase; font-size: 0.74rem; font-weight: 500; color: rgba(255,255,255,0.9); margin-bottom: 1.4rem; }
.hero-name { font-family: var(--serif); font-weight: 400; font-size: clamp(3.4rem, 11vw, 9rem); line-height: 0.92; letter-spacing: -0.03em; color: #fff; }
.hero-name .amp { font-size: 0.56em; display: inline-block; transform: translateY(-0.06em); padding: 0 0.1em; }
.hero-date { font-family: var(--serif); font-size: clamp(1.15rem, 2.6vw, 1.7rem); font-style: italic; color: rgba(255,255,255,0.92); margin: 1.6rem 0 0; }
.hero-actions { margin-top: 2.4rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.hero .btn-ghost { border-color: rgba(255,255,255,0.7); color: #fff; }
.hero .btn-ghost:hover { background: #fff; color: var(--ink); }
.scroll-cue {
  position: absolute; z-index: 3; left: clamp(1.25rem, 4vw, 2rem); bottom: 1.8rem;
  display: flex; align-items: center; gap: 1rem; color: #fff;
  text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.66rem;
}
.scroll-cue:hover { text-decoration: none; }
.scroll-cue .cue-line { width: 54px; height: 1px; background: currentColor; }
@keyframes hero-in { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: scale(1); } }

/* ---------- Intro ---------- */
.kicker { text-transform: uppercase; letter-spacing: 0.24em; font-size: 0.72rem; font-weight: 500; color: var(--terracotta-deep); margin: 0 0 1.2rem; }
.intro { text-align: center; }
.intro .intro-copy { max-width: 42rem; margin: 0 auto; }
.ornament { margin: 2.4rem 0 1.6rem; color: var(--terracotta); font-size: 1.1rem; }
.venue-line { font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2.4rem); margin: 0; color: var(--ink); }
.city-line { text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.68rem; color: var(--ink-soft); margin: 0.4rem 0 0; }

/* ---------- Editorial photo strip ---------- */
.editorial-strip {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(240px, 0.7fr) minmax(0, 1.15fr);
  min-height: min(66vw, 880px);
  background: var(--dark); color: #fff;
}
.editorial-strip figure { margin: 0; overflow: hidden; }
.editorial-strip img { width: 100%; height: 100%; object-fit: cover; }
.portrait-card img { object-position: center 35%; }
.editorial-quote { display: flex; flex-direction: column; justify-content: center; text-align: center; padding: clamp(2rem, 5vw, 4.5rem); }
.editorial-quote p { font-family: var(--serif); font-size: clamp(1.7rem, 2.8vw, 3.1rem); line-height: 1.18; margin: 0; white-space: pre-line; }
.editorial-quote strong { margin-top: 1.4rem; font-weight: 500; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.22em; color: rgba(255,255,255,0.85); }

/* ---------- Story gallery (horizontal strip carousel) ---------- */
.story { border-top: 1px solid var(--line); overflow-x: clip; } /* contain rubber-band overshoot */
.story-heading { text-align: center; margin-bottom: 3.5rem; }
.strip-carousel { position: relative; }
.strip-track {
  display: flex; gap: clamp(0.6rem, 2vw, 1.2rem);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 0.4rem;
}
.strip-track::-webkit-scrollbar { display: none; }
.strip-track { cursor: grab; will-change: transform; }
.strip-track.dragging { cursor: grabbing; }
.strip-track.free { scroll-snap-type: none; scroll-behavior: auto; } /* JS drives momentum + bounce */
.strip-item {
  flex: 0 0 auto; width: min(260px, 72vw); margin: 0; scroll-snap-align: start;
}
.strip-item img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 4px; display: block; background: var(--cream-2);
  user-select: none; -webkit-user-drag: none;
}
/* Arrows page through the strip; always visible when there's more to scroll. */
.strip-carousel .gallery-nav { opacity: 1; }
.strip-carousel.no-scroll .gallery-nav, .strip-carousel.no-photo { display: none; }

/* ---------- Section heading + intro ---------- */
.section-heading { margin: 0 auto 2.5rem; max-width: 46rem; }
.intro-heading { font-size: clamp(2.6rem, 6vw, 5rem); margin-bottom: 1.5rem; white-space: pre-line; }

/* ---------- Why Taormina ---------- */
.taormina-section { background: var(--tint); }
.section-divider { display: flex; align-items: center; justify-content: center; gap: 1rem; max-width: 22rem; margin: 0 auto 2.5rem; color: var(--terracotta); }
.section-divider .line { flex: 1; height: 1px; background: var(--line); }
.section-divider .mark { font-size: 1rem; line-height: 1; }
.taormina-intro { margin: 0 auto; }
/* Full-bleed Taormina photo band under the intro: two rows of landscape +
   portrait, breaking out of the section's max-width/padding to span the whole
   viewport, edge to edge with square corners. Thin dark lines top and bottom
   frame the whole band. Within each row the height is fixed (equal heights) and
   flex-grow (set per-image to its aspect ratio by a small script, falling back
   to equal) drives the widths, so the two rows don't line up as an exact mirror. */
/* Four-photo collage: two rows of crossed orientation — row 1 portrait+landscape,
   row 2 landscape+portrait — with fixed, uneven column widths (30/70 and 65/35,
   see below), so the two rows' gutters land at different spots rather than a rigid
   2×2 grid. Gaps space the photos apart; thin dark lines frame the section top and
   bottom. The band breaks out to the viewport edges by cancelling the section
   padding (no 100vw, so the scrollbar can't cause horizontal scroll), then re-insets
   its own gutters. */
.taormina-photos {
  max-width: none;
  margin: 2.5rem calc(-1 * clamp(1rem, 4vw, 2rem));
  padding: clamp(1rem, 3vw, 2rem) clamp(1rem, 4vw, 2rem);
  border-top: 1px solid rgba(0, 0, 0, 0.6);
  border-bottom: 1px solid rgba(0, 0, 0, 0.6);
  display: flex; flex-direction: column;
  gap: clamp(0.6rem, 2vw, 1.4rem); /* space between the two rows */
}
.taormina-row {
  display: flex;
  gap: clamp(0.6rem, 2vw, 1.4rem); /* space between the two photos */
  height: clamp(200px, 30vw, 440px);
}
.taormina-row figure { flex: 1 1 0; min-width: 0; margin: 0; overflow: hidden; }
.taormina-row img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Fixed, uneven column widths (flex-grow ratios of the row's free space):
   row 1 = 30% / 70%, row 2 = 65% / 35%. */
.taormina-row:nth-child(1) figure:nth-child(1) { flex-grow: 30; }
.taormina-row:nth-child(1) figure:nth-child(2) { flex-grow: 70; }
.taormina-row:nth-child(2) figure:nth-child(1) { flex-grow: 65; }
.taormina-row:nth-child(2) figure:nth-child(2) { flex-grow: 35; }
@media (max-width: 640px) {
  .taormina-row { height: auto; flex-direction: column; }
  .taormina-row figure { flex: none; height: 56vw; }
}
.love-title { font-size: clamp(1.6rem, 3.5vw, 2.4rem); margin-bottom: 1.6rem; }
/* Horizontal slot ticker: each statement is its own fixed-width slot, sitting
   side by side. The track holds the slots twice and slides left by exactly half,
   so the loop is seamless. Soft fade at the left and right edges. */
.love-marquee {
  width: 100%; overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.love-track {
  display: flex; align-items: center; width: max-content; list-style: none; margin: 0; padding: 0;
  animation: love-scroll-x linear infinite;
}
.love-marquee:hover .love-track { animation-play-state: paused; }
.love-item {
  flex: none; display: flex; align-items: center; margin: 0; padding: 0.5rem 0;
}
.love-item > span {
  width: clamp(14rem, 22vw, 20rem); text-align: center;
  font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  color: var(--ink); line-height: 1.35;
}
.love-item::after { /* ✦ divider between slots */
  content: "✦"; margin: 0 clamp(1rem, 3vw, 2.4rem);
  color: var(--terracotta); font-size: 0.8rem;
}
@keyframes love-scroll-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .love-marquee { -webkit-mask-image: none; mask-image: none; }
  .love-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .love-track .love-item[aria-hidden="true"] { display: none; }
}

/* ---------- Countdown ---------- */
.countdown { background: var(--dark); color: #fff; text-align: center; padding: clamp(3.5rem, 8vw, 6rem) 1.5rem; }
.countdown .kicker { color: color-mix(in srgb, var(--terracotta) 45%, #fff); }
.countdown-grid { max-width: 820px; margin: 1.5rem auto 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,0.28); border-bottom: 1px solid rgba(255,255,255,0.28); }
.countdown-grid div { padding: clamp(1.6rem, 4vw, 2.4rem) 0.5rem; border-right: 1px solid rgba(255,255,255,0.28); }
.countdown-grid div:last-child { border-right: 0; }
.countdown-grid strong { display: block; color: #fff; font-family: var(--serif); font-weight: 400; line-height: 1; font-size: clamp(2.6rem, 6vw, 5.5rem); font-variant-numeric: tabular-nums; }
.countdown-grid span { display: block; margin-top: 0.6rem; text-transform: uppercase; letter-spacing: 0.17em; font-size: 0.62rem; opacity: 0.85; }
@media (max-width: 600px) {
  .countdown-grid { grid-template-columns: repeat(2, 1fr); }
  .countdown-grid div:nth-child(2) { border-right: 0; }
  .countdown-grid div:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,0.28); }
}

/* ---------- The Place ---------- */
.place { display: grid; grid-template-columns: 1.05fr 0.95fr; background: var(--dark); color: #fff; }
.place-image { min-height: 62vh; overflow: hidden; }
.place-image img { width: 100%; height: 100%; object-fit: cover; }
.place-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem, 5vw, 5rem); }
.place-copy .kicker { color: #d6b9a7; }
.place-copy .section-title { color: #fff; margin: 0 0 1.4rem; }
.place-copy .lede { color: rgba(255,255,255,0.8); }
.place-copy .lede a { color: #fff; }
.place-copy strong { color: #fff; }
.place-address { margin-top: 1.6rem; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.7rem; color: rgba(255,255,255,0.72); }
.place-address a { color: #fff; }

@media (max-width: 820px) {
  .editorial-strip { grid-template-columns: 1fr 1fr; }
  .editorial-quote { grid-column: 1 / -1; order: -1; min-height: 300px; }
  .place { grid-template-columns: 1fr; }
  .place-image { min-height: 54vh; }
}
@media (max-width: 600px) {
  .editorial-strip { display: block; }
  .editorial-strip figure { height: 92vw; }
  .hero-name .amp { display: block; margin: 0.04em auto; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; cursor: pointer; border: 1px solid transparent;
  font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.85rem 2rem; border-radius: 999px; transition: all 0.2s ease;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--terracotta); color: #fff; }
.btn-primary:hover { background: var(--terracotta-deep); color: #fff; }
.btn-ghost { background: transparent; border-color: var(--sea); color: var(--sea-deep); }
.btn-ghost:hover { background: var(--sea); color: #fff; }

/* ---------- Page headers ---------- */
.page-head { text-align: center; padding: clamp(2.5rem, 7vw, 4.5rem) 1.5rem 0; }
.page-title { font-size: clamp(2.2rem, 6vw, 3.4rem); color: var(--ink); }
.page-sub { letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.8rem; color: var(--terracotta-deep); margin-top: 0.8rem; }

/* ---------- Cards (weekend) ---------- */
.cards { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.8rem; box-shadow: var(--shadow); }
.card-title { font-size: 1.5rem; color: var(--ink); margin-bottom: 0.5rem; }
.card-meta { font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--terracotta-deep); margin: 0; }
.card-time { color: var(--ink-soft); margin-bottom: 0.8rem; }
.card-body { color: var(--ink-soft); margin: 0; }

/* ---------- Timeline ---------- */
.timeline { position: relative; padding-left: 1.5rem; }
.timeline::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.timeline-item { position: relative; padding: 0 0 2.4rem 1.8rem; }
.timeline-dot { position: absolute; left: -1.5rem; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--terracotta); border: 2px solid var(--cream); }
.timeline-day { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--terracotta-deep); margin: 0; }
.timeline-title { font-size: 1.7rem; color: var(--ink); margin: 0.2rem 0; }
.timeline-time { font-style: italic; font-family: var(--serif); font-size: 1.15rem; color: var(--sea); margin: 0; }
.timeline-where { font-size: 0.85rem; color: var(--ink-soft); margin: 0.2rem 0 0.6rem; }
.timeline-blurb { color: var(--ink-soft); margin: 0; }

/* ---------- Detail blocks ---------- */
.detail-block { margin-bottom: 2.5rem; }
.callout { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--sea); border-radius: 10px; padding: 1.2rem 1.5rem; box-shadow: var(--shadow); }
.callout p { margin: 0.3rem 0; }

/* ---------- Rooms ---------- */
.rooms-group { font-size: 1.5rem; color: var(--ink); margin: 2.4rem 0 1rem; text-align: center; }
.room-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.room-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.room-photo {
  position: relative; aspect-ratio: 4 / 3; background: var(--cream-2);
  background-image: linear-gradient(135deg, #cfe0e2 0%, #e7d8c4 55%, #e3b89e 100%);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.gallery-track { position: absolute; inset: 0; }
.room-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.4s ease; }
.room-photo img.is-active { opacity: 1; }
.room-photo-fallback { display: none; font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: rgba(47,72,88,0.7); padding: 0 1rem; text-align: center; }
.room-photo.no-photo .room-photo-fallback { display: block; }
.room-photo.no-photo .gallery-nav, .room-photo.no-photo .gallery-dots,
.room-photo.single .gallery-nav, .room-photo.single .gallery-dots { display: none; }

/* gallery controls */
.gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 34px; height: 34px; border: none; border-radius: 50%; cursor: pointer;
  background: rgba(251, 247, 240, 0.82); color: var(--ink); font-size: 1.3rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; padding: 0;
  opacity: 0; transition: opacity 0.2s ease, background 0.2s ease;
}
.gallery-nav.prev { left: 0.6rem; }
.gallery-nav.next { right: 0.6rem; }
.gallery-nav:hover { background: #fff; }
.room-card:hover .gallery-nav, .gallery-nav:focus-visible { opacity: 1; }
@media (hover: none) { .gallery-nav { opacity: 1; } }
.gallery-dots { position: absolute; bottom: 0.6rem; left: 0; right: 0; z-index: 2; display: flex; gap: 6px; justify-content: center; }
.gallery-dots .dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(251, 247, 240, 0.6); cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; }
.gallery-dots .dot.is-active { background: #fff; transform: scale(1.25); }
.room-body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.room-name { font-size: 1.3rem; color: var(--ink); margin-bottom: 0.7rem; }
.room-specs { list-style: none; padding: 0; margin: 0 0 1rem; }
.room-specs li { font-size: 0.86rem; color: var(--ink-soft); display: flex; gap: 0.55rem; align-items: baseline; padding: 0.12rem 0; }
.spec-ico { color: var(--terracotta); width: 1rem; flex: none; text-align: center; }
.room-price { margin-top: auto; padding-top: 0.9rem; border-top: 1px solid var(--line); display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.3rem; }
.room-price-night { font-family: var(--serif); font-size: 1.45rem; color: var(--sea-deep); font-variant-numeric: tabular-nums; }
.room-price-night small { font-family: var(--sans); font-size: 0.72rem; color: var(--ink-soft); letter-spacing: 0.05em; }
.room-price-total { font-size: 0.78rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.rooms-note { font-size: 0.85rem; color: var(--ink-soft); margin-top: 1.5rem; text-align: center; max-width: var(--narrow); margin-left: auto; margin-right: auto; }

/* ---------- Forms ---------- */
.form { margin-top: 2rem; }
.field { display: block; margin-bottom: 1.3rem; }
.field-label { display: block; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.45rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.75rem 0.9rem; font-family: var(--sans); font-size: 1rem; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--sea); box-shadow: 0 0 0 3px rgba(59,122,140,0.12); }
.field-row { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

/* Guest RSVP cards */
.guest-card { border: 1px solid var(--line); border-radius: 14px; padding: 1.5rem; margin-bottom: 1.5rem; background: #fff; box-shadow: var(--shadow); }
.guest-name { font-family: var(--serif); font-size: 1.5rem; color: var(--ink); padding: 0 0.5rem; }
.guest-card-title { font-family: var(--serif); font-size: 1.5rem; color: var(--ink); margin: 0 0 1.1rem; }
.rsvp-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 0.7rem 0; border-bottom: 1px dashed var(--line); }
.rsvp-event { display: flex; flex-direction: column; }
.rsvp-event-name { color: var(--ink); }
.rsvp-event-day { font-size: 0.78rem; color: var(--ink-soft); }
.toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.toggle-opt { position: relative; }
.toggle-opt input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-opt span { display: inline-block; padding: 0.45rem 0.95rem; font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); cursor: pointer; transition: all 0.15s ease; }
.toggle-opt:first-child span { border-right: 1px solid var(--line); }
.toggle-opt input:checked + span { background: var(--sea); color: #fff; }
.toggle-opt:has(input[value="no"]:checked) span { background: var(--terracotta); color: #fff; }
.guest-card .field { margin-top: 1rem; margin-bottom: 0; }

/* ---------- Per-person name fields (/a RSVP) ---------- */
.person-block { margin-top: 1.3rem; padding-top: 1.3rem; border-top: 1px dashed var(--line); }
.person-block:first-of-type { margin-top: 0.6rem; padding-top: 0; border-top: 0; }
.person-label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 0.7rem; }
.name-fields { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0.8rem; }
.name-fields .field { margin-bottom: 0; }
.nf-title { grid-column: span 2; }
.nf-first { grid-column: span 5; }
.nf-last { grid-column: span 3; }
.nf-suffix { grid-column: span 2; }
@media (max-width: 560px) {
  .name-fields { grid-template-columns: 1fr 1fr; }
  .nf-first, .nf-last { grid-column: 1 / -1; }
  .nf-title, .nf-suffix { grid-column: span 1; }
}

/* ---------- Attendance choices (/a) ---------- */
.attend-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; margin-top: 0.5rem; }
@media (max-width: 560px) { .attend-choices { grid-template-columns: 1fr; } }
.attend-opt { position: relative; cursor: pointer; }
.attend-opt input { position: absolute; opacity: 0; pointer-events: none; }
.attend-opt span {
  display: flex; flex-direction: column; gap: 0.2rem; height: 100%;
  padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 12px; background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.attend-opt span strong { font-weight: 500; color: var(--ink); }
.attend-opt span small { font-size: 0.8rem; color: var(--ink-soft); }
.attend-opt input:checked + span { border-color: var(--sea); box-shadow: 0 0 0 2px var(--sea) inset; background: color-mix(in srgb, var(--sea) 6%, #fff); }
.attend-opt input:focus-visible + span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sea) 35%, transparent); }
.addr-block[hidden] { display: none; }

/* ---------- Flash ---------- */
.flash { max-width: var(--narrow); margin: 1.5rem auto 0; padding: 0.9rem 1.2rem; border-radius: 10px; text-align: center; font-size: 0.95rem; }
.flash-success { background: #e8f1ee; color: #2c5d4a; border: 1px solid #bcdccb; }
.flash-error { background: #f7e7e0; color: #9a3b1f; border: 1px solid #e6c2b2; }

/* ---------- Invite QR ---------- */
.invite-qr { border: 1px solid var(--line); border-radius: 12px; padding: 0.6rem; background: #fff; box-shadow: var(--shadow); }
.invite-link { font-size: 0.85rem; word-break: break-all; margin-top: 1rem; }

/* ---------- Misc ---------- */
.error-detail { text-align: left; background: var(--cream-2); border: 1px solid var(--line); border-radius: 8px; padding: 1rem; overflow:auto; font-size: 0.8rem; }

/* ---------- Footer ---------- */
.site-footer { text-align: center; padding: 3rem 1.5rem; border-top: 1px solid var(--line); background: var(--cream-2); margin-top: 3rem; }
.footer-names { font-family: var(--serif); font-size: 1.8rem; color: var(--ink); margin: 0; }
.footer-meta { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin: 0.5rem 0 0; }
.footer-hashtag { color: var(--terracotta-deep); letter-spacing: 0.1em; margin-top: 0.5rem; }

/* ---------- Admin dashboard ---------- */
.admin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 560px) { .admin-stats { grid-template-columns: repeat(2, 1fr); } }
.stat { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.2rem; text-align: center; box-shadow: var(--shadow); }
.stat-num { display: block; font-family: var(--serif); font-size: 2.2rem; color: var(--ink); line-height: 1; }
.stat-label { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.admin-attending { font-size: 0.9rem; }

.admin-table-wrap { overflow-x: auto; max-width: var(--maxw); margin: 0 auto; }
.admin-table { width: 100%; border-collapse: collapse; background: #fff; font-size: 0.86rem; }
.admin-table th, .admin-table td { text-align: left; padding: 0.7rem 0.8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.admin-table th { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); background: var(--cream-2); }
.code { font-family: ui-monospace, Menlo, monospace; font-size: 0.8rem; background: var(--cream-2); padding: 0.1rem 0.4rem; border-radius: 5px; color: var(--sea-deep); }
.contact { color: var(--ink-soft); font-size: 0.82rem; }

.guest-rsvp { list-style: none; margin: 0; padding: 0; }
.guest-rsvp li { padding: 0.2rem 0; display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.g-name { font-weight: 400; min-width: 8rem; }
.pill { font-size: 0.68rem; letter-spacing: 0.04em; padding: 0.08rem 0.45rem; border-radius: 999px; border: 1px solid var(--line); }
.pill-yes { background: rgba(59,122,140,0.12); color: var(--sea-deep); border-color: rgba(59,122,140,0.3); }
.pill-no { background: rgba(200,105,63,0.1); color: var(--terracotta-deep); border-color: rgba(200,105,63,0.3); }
.pill-none { color: var(--ink-soft); }
.diet { font-size: 0.74rem; color: var(--ink-soft); }
.party-notes { font-style: italic; color: var(--ink-soft); font-size: 0.8rem; margin: 0.3rem 0 0; }

.badge { display: inline-block; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.12rem 0.5rem; border-radius: 999px; background: var(--cream-2); color: var(--ink-soft); margin-left: 0.4rem; }
.badge-yes { background: rgba(59,122,140,0.14); color: var(--sea-deep); }
.badge-wait { background: rgba(184,146,74,0.16); color: var(--gold); }
.badge-viewed { background: rgba(59,122,140,0.12); color: var(--sea-deep); text-transform: none; letter-spacing: 0; }
.badge-no { background: rgba(200,105,63,0.14); color: var(--terracotta-deep); }
.rsvp-pills { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; }
.party-guests { font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.2rem; }
.rsvp-guests { display: flex; flex-direction: column; gap: 0.5rem; }
.rsvp-guest-row { display: flex; flex-direction: column; gap: 0.25rem; }
.rsvp-guest-name { font-size: 0.78rem; color: var(--ink); }
.admin-links { white-space: nowrap; }
.admin-links a { display: inline-block; margin-right: 0.6rem; }
.link-btn { font: inherit; color: var(--sea); background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline; }
.link-btn:hover { text-decoration: none; }
.link-btn.copied { color: var(--terracotta); text-decoration: none; cursor: default; }
.backup-restore { display: flex; gap: 0.6rem; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 0.4rem; }
.backup-restore input[type="file"] { font-size: 0.82rem; max-width: 100%; }