/* ============================================================
   Parker & Jolan — bright floral (boho garden) theme
   Palette source: assets/images/inspiration/Theme/Pinterest_files/THEME.png
   ============================================================ */

:root {
  /* THEME.png palette */
  --copper: #ef5356;
  --copper-deep: #cf3e4d;
  --golden-hour: #f2af3f;
  --apricot: #fda170;
  --blush: #f2c1c1;
  --misty-blue: #c0cfe0;
  --moss: #9f985c;
  --moss-light: #c5c463;

  --color-bg: #fdf6ef;
  --color-surface: #ffffff;
  --color-text: #3d2b28;
  --color-text-soft: #7a625d;
  --color-primary: var(--copper);
  --color-secondary: var(--golden-hour);
  --color-accent: var(--misty-blue);
  --color-border: rgba(61, 43, 40, 0.12);

  --font-script: 'Caveat', cursive;
  --font-heading: 'Fraunces', serif;
  --font-body: 'Poppins', sans-serif;

  --container-width: 1100px;
  --space-sm: 0.75rem;
  --space-md: 1.5rem;
  --space-lg: 3rem;
  --space-xl: 6rem;

  --radius: 18px;
  --shadow-soft: 0 20px 45px -25px rgba(61, 43, 40, 0.32);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
}

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

a {
  color: inherit;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  margin: 0 0 var(--space-sm);
  font-weight: 600;
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

section {
  position: relative;
  padding: var(--space-xl) 0;
}

/* ---------- floral accents (original SVG illustrations, not Pinterest images) ---------- */

.floral-divider {
  display: flex;
  justify-content: center;
  margin: 0 0 var(--space-md);
}

.floral-divider svg {
  width: 130px;
  height: 30px;
}

.story__photo-wrap {
  position: relative;
}

/* scattered hand-drawn doodles — original SVGs echoing the doodle-covered
   inspiration invitation (tulips, sprigs, toasting glasses, daisies) */
.doodle {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.doodle--sprig  { width: 68px;  right: 4%;  top: 12%;    transform: rotate(16deg); }
.doodle--tulip  { width: 60px;  left: 4%;   top: 16%;    transform: rotate(-9deg); }
.doodle--daisy  { width: 76px;  right: 5%;  bottom: 10%; transform: rotate(12deg); }
.doodle--toast  { width: 92px;  left: 6%;   bottom: 16%; transform: rotate(-6deg); }

@media (max-width: 900px) {
  .doodle { display: none; }
}

.story__bloom {
  position: absolute;
  bottom: -36px;
  left: -36px;
  width: 150px;
  height: 150px;
  z-index: 0;
  filter: drop-shadow(0 10px 18px rgba(61, 43, 40, 0.18));
}

/* ---------- nav ---------- */

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(253, 246, 239, 0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow 0.3s ease;
}

.site-nav.is-scrolled {
  box-shadow: 0 8px 24px -18px rgba(61, 43, 40, 0.4);
}

.site-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
}

.site-nav__logo {
  font-family: var(--font-script);
  font-size: 1.8rem;
  color: var(--color-primary);
}

.site-nav__links {
  display: flex;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__links a {
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.25s ease, color 0.25s ease;
}

.site-nav__links a:hover {
  color: var(--color-primary);
  border-color: var(--color-secondary);
}

.site-nav__toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--color-primary);
}

@media (max-width: 720px) {
  .site-nav__toggle {
    display: block;
  }

  .site-nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-surface);
    flex-direction: column;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    border-bottom: 1px solid var(--color-border);
  }

  .site-nav__links.is-open {
    max-height: 400px;
  }

  .site-nav__links a {
    display: block;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--color-border);
  }
}

/* ---------- hero ---------- */

.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding-top: 4rem;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  /* photo is nearly white at the top — radial scrim keeps the title legible
     without flattening the whole image */
  background-image:
    radial-gradient(ellipse 78% 62% at 50% 54%, rgba(61, 43, 40, 0.5) 0%, rgba(61, 43, 40, 0.18) 60%, rgba(61, 43, 40, 0) 100%),
    linear-gradient(180deg, rgba(61, 43, 40, 0.16) 0%, rgba(61, 43, 40, 0.6) 100%),
    url('../assets/images/photos/proposal-12.jpeg');
  background-size: cover;
  background-position: center 22%;
}

/* wavy paper edge into the next section — pulled from the scalloped/wavy
   stationery in the inspiration board */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 46px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 46' preserveAspectRatio='none'%3E%3Cpath d='M0 26C150 46 350 4 600 24C850 44 1050 6 1200 26V46H0Z' fill='%23ffffff'/%3E%3C/svg%3E") bottom center / 100% 100% no-repeat;
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
  padding: var(--space-lg) var(--space-md);
}

.hero__eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 0.8rem;
  color: #fff;
  text-shadow: 0 2px 12px rgba(61, 43, 40, 0.5);
  margin-bottom: var(--space-sm);
  position: relative;
  display: inline-block;
  padding: 1em 2.2em;
}

/* hand-drawn hatched oval badge — from the "we're getting married!" frame
   on the inspiration invitation */
.hero__eyebrow-oval {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero__names {
  font-family: var(--font-script);
  font-size: clamp(4rem, 12vw, 8rem);
  line-height: 1;
  margin: 0;
  text-shadow: 0 8px 30px rgba(0,0,0,0.25);
}

.hero__names .amp {
  /* copper "ink" like the coral script on the inspiration invitations —
     apricot was too pale to read against the washed-out photo */
  color: var(--copper);
  padding: 0 0.1em;
  text-shadow: 0 0 22px rgba(253, 246, 239, 0.5), 0 8px 30px rgba(0, 0, 0, 0.35);
}

.hero__date {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  margin-top: var(--space-md);
  letter-spacing: 0.05em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}

.hero__scroll {
  position: absolute;
  bottom: 3.6rem; /* clear the white wave edge */
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 1.6rem;
  animation: bounce 2.2s infinite;
  opacity: 0.85;
  text-decoration: none;
  cursor: pointer;
}

.hero__scroll:hover {
  opacity: 1;
}

@keyframes bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 10px); }
}

/* ---------- countdown ---------- */

.countdown {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  flex-wrap: wrap;
}

.countdown__item {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: var(--radius);
  padding: var(--space-sm) var(--space-md);
  min-width: 84px;
  backdrop-filter: blur(4px);
}

.countdown__num {
  font-family: var(--font-heading);
  font-size: 2rem;
  display: block;
  font-weight: 700;
}

.countdown__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  opacity: 0.85;
}

/* ---------- section headings ---------- */

.section-heading {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-lg);
}

.section-heading__eyebrow {
  font-family: var(--font-script);
  font-size: 1.8rem;
  color: var(--color-primary);
  display: block;
  margin-bottom: var(--space-sm);
}

.section-heading h2 {
  font-size: clamp(2rem, 4vw, 2.8rem);
}

.section-heading p {
  color: var(--color-text-soft);
}

/* reveal-on-scroll targets */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- our story ---------- */

.story {
  background: var(--color-surface);
}

.story__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: center;
}

.story__photo {
  position: relative;
  z-index: 1;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transform: rotate(-2deg);
}

.story__text h3 {
  font-size: 1.6rem;
  color: var(--color-primary);
}

.story__text p {
  color: var(--color-text-soft);
}

@media (max-width: 800px) {
  .story__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- details / schedule ---------- */

.details {
  background: linear-gradient(180deg, var(--blush) 0%, rgba(242, 193, 193, 0.2) 100%);
}

.details__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
}

/* wavy-edged sign cards — from the wavy bar sign / scalloped stationery
   in the inspiration board. The whole card (fill + wavy stroke) is one SVG
   stretched to the card's box, so the edge is genuinely wavy. */
.detail-card {
  position: relative;
  z-index: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M10 6Q15 1 20 6T30 6T40 6T50 6T60 6T70 6T80 6T90 6Q94 6 94 10Q99 15 94 20T94 30T94 40T94 50T94 60T94 70T94 80T94 90Q94 94 90 94Q85 99 80 94T70 94T60 94T50 94T40 94T30 94T20 94T10 94Q6 94 6 90Q1 85 6 80T6 70T6 60T6 50T6 40T6 30T6 20T6 10Q6 6 10 6Z' fill='%23ffffff' stroke='%23ef5356' stroke-width='2.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  padding: var(--space-lg) 2rem;
  text-align: center;
  filter: drop-shadow(0 18px 28px rgba(61, 43, 40, 0.16));
  transition: transform 0.3s ease, filter 0.3s ease;
}

.detail-card:nth-child(2) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M10 6Q15 1 20 6T30 6T40 6T50 6T60 6T70 6T80 6T90 6Q94 6 94 10Q99 15 94 20T94 30T94 40T94 50T94 60T94 70T94 80T94 90Q94 94 90 94Q85 99 80 94T70 94T60 94T50 94T40 94T30 94T20 94T10 94Q6 94 6 90Q1 85 6 80T6 70T6 60T6 50T6 40T6 30T6 20T6 10Q6 6 10 6Z' fill='%23ffffff' stroke='%23f2af3f' stroke-width='2.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
.detail-card:nth-child(3) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M10 6Q15 1 20 6T30 6T40 6T50 6T60 6T70 6T80 6T90 6Q94 6 94 10Q99 15 94 20T94 30T94 40T94 50T94 60T94 70T94 80T94 90Q94 94 90 94Q85 99 80 94T70 94T60 94T50 94T40 94T30 94T20 94T10 94Q6 94 6 90Q1 85 6 80T6 70T6 60T6 50T6 40T6 30T6 20T6 10Q6 6 10 6Z' fill='%23ffffff' stroke='%23c0cfe0' stroke-width='2.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
.detail-card:nth-child(4) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M10 6Q15 1 20 6T30 6T40 6T50 6T60 6T70 6T80 6T90 6Q94 6 94 10Q99 15 94 20T94 30T94 40T94 50T94 60T94 70T94 80T94 90Q94 94 90 94Q85 99 80 94T70 94T60 94T50 94T40 94T30 94T20 94T10 94Q6 94 6 90Q1 85 6 80T6 70T6 60T6 50T6 40T6 30T6 20T6 10Q6 6 10 6Z' fill='%23ffffff' stroke='%239f985c' stroke-width='2.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }

.detail-card:hover {
  /* raise above sibling cards so the deepened shadow isn't clipped by the
     next card in the grid (was getting cut off on its right edge) */
  z-index: 1;
  transform: translateY(-6px);
  filter: drop-shadow(0 26px 36px rgba(61, 43, 40, 0.24));
}

.detail-card__icon {
  font-size: 2.2rem;
  margin-bottom: var(--space-sm);
}

.detail-card h3 {
  font-size: 1.3rem;
}

.detail-card p {
  color: var(--color-text-soft);
  margin: 0.25rem 0;
}

/* ---------- gallery ---------- */

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  grid-auto-flow: dense;
  gap: var(--space-sm);
}

.gallery__grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
  transition: transform 0.5s ease, filter 0.5s ease;
}

.gallery__item {
  overflow: hidden;
  border-radius: 14px;
}

.gallery__item:hover img {
  transform: scale(1.08);
}

.gallery__item--tall {
  grid-row: span 2;
}

@media (max-width: 900px) {
  .gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- RSVP / registry (Zola embeds) ---------- */

.embed-section {
  background: var(--color-surface);
}

.embed-card {
  background: linear-gradient(135deg, rgba(239, 83, 86, 0.07), rgba(192, 207, 224, 0.18));
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  padding: var(--space-lg);
  text-align: center;
  overflow: hidden;
}

/* Zola's widget replaces the fallback link with its own markup (often an
   iframe) that ignores our theme — clip it to the card's rounded shape and
   round the iframe itself so no sharp corners show through */
.embed-card iframe {
  border: none;
  border-radius: var(--radius);
  display: block;
  margin: 0 auto;
}

/* fallback link shown until (or in case) Zola's widget.js swaps it out */
.embed-card .zola-registry-embed {
  font-family: var(--font-body);
  color: var(--color-primary);
  font-size: 1rem;
}

.embed-card .btn {
  margin-top: var(--space-md);
}

.registry-cta {
  text-align: center;
  margin-top: var(--space-md);
}

.rsvp-cta {
  text-align: center;
}

/* golden wavy sign with copper border — from the "BAR / Margaritas" wavy
   sign in the inspiration board */
.rsvp-sign {
  display: inline-block;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M10 6Q15 1 20 6T30 6T40 6T50 6T60 6T70 6T80 6T90 6T100 6T110 6T120 6T130 6T140 6T150 6T160 6T170 6T180 6T190 6Q194 6 194 10Q199 15 194 20T194 30T194 40T194 50T194 60T194 70T194 80T194 90Q194 94 190 94Q185 99 180 94T170 94T160 94T150 94T140 94T130 94T120 94T110 94T100 94T90 94T80 94T70 94T60 94T50 94T40 94T30 94T20 94T10 94Q6 94 6 90Q1 85 6 80T6 70T6 60T6 50T6 40T6 30T6 20T6 10Q6 6 10 6Z' fill='%23f2af3f' stroke='%23ef5356' stroke-width='3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  padding: calc(var(--space-md) + 10px) calc(var(--space-lg) + 12px) calc(var(--space-md) + 16px);
  filter: drop-shadow(0 22px 34px rgba(61, 43, 40, 0.22));
}

.rsvp-sign__script {
  display: block;
  font-family: var(--font-script);
  font-size: 2.3rem;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 2px 10px rgba(207, 62, 77, 0.4);
  transform: rotate(-2deg);
  margin-bottom: var(--space-md);
}

#rsvp.embed-section {
  background-color: #fff;
  background-image: linear-gradient(180deg, rgba(192, 207, 224, 0.3) 0%, rgba(192, 207, 224, 0.05) 100%);
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

@media (max-width: 800px) {
  .two-col {
    grid-template-columns: 1fr;
  }
}

/* ---------- buttons ---------- */

.btn {
  position: relative;
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.85rem 2rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 12px 24px -12px rgba(239, 83, 86, 0.55);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border: none;
  cursor: pointer;
}

/* invisible hit-area buffer, larger than the hover lift's travel distance,
   so the button can't slip out from under the cursor near its edges and
   flicker between hover states */
.btn::after {
  content: "";
  position: absolute;
  inset: -10px;
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 28px -12px rgba(239, 83, 86, 0.65);
}

.btn--outline {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  box-shadow: none;
}

/* ---------- RSVP page ---------- */

.rsvp-page {
  min-height: 80vh;
  padding-top: calc(4rem + var(--space-xl));
}

.rsvp-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: var(--space-lg);
  max-width: 640px;
  margin: 0 auto;
}

.rsvp-label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--space-sm);
}

.rsvp-search input,
.rsvp-card input[type="text"],
.rsvp-card input[type="email"],
.rsvp-card input[type="password"] {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-size: 1rem;
  margin-bottom: var(--space-md);
}

.rsvp-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.rsvp-result {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 1.2rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.rsvp-result:hover {
  border-color: var(--color-primary);
  background: var(--blush);
}

.rsvp-result__party {
  color: var(--color-text-soft);
  font-size: 0.85rem;
}

.rsvp-hint {
  color: var(--color-text-soft);
  font-size: 0.9rem;
}

.alert-error {
  background: rgba(207, 62, 77, 0.08);
  border: 1px solid var(--copper-deep);
  color: var(--copper-deep);
  border-radius: var(--radius);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  font-size: 0.9rem;
  font-weight: 500;
}

.rsvp-back {
  background: none;
  border: none;
  color: var(--color-primary);
  cursor: pointer;
  font-family: var(--font-body);
  padding: 0;
  margin-bottom: var(--space-md);
}

.rsvp-party-name {
  font-family: var(--font-script);
  font-size: 2rem;
  color: var(--color-primary);
}

.rsvp-member {
  border-top: 1px solid var(--color-border);
  padding: var(--space-md) 0;
}

.rsvp-member__name {
  font-weight: 600;
  margin-bottom: var(--space-sm);
}

.rsvp-member__attending {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
  flex-wrap: wrap;
}

.rsvp-member__details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.rsvp-member__details label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: var(--color-text-soft);
}

.rsvp-member__details select,
.rsvp-member__details input {
  padding: 0.6rem 0.8rem;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  font-family: var(--font-body);
}

@media (max-width: 600px) {
  .rsvp-member__details {
    grid-template-columns: 1fr;
  }
}

/* ---------- admin dashboard ---------- */

.admin-page {
  padding-top: calc(4rem + var(--space-lg));
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.admin-stats .detail-card h3 {
  font-size: 2.2rem;
  color: var(--color-primary);
}

/* ---------- admin tabs ---------- */

.admin-tabs {
  display: flex;
  gap: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-lg);
}

.admin-tab {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-text-soft);
  padding: 0.75rem 0.25rem;
  margin-bottom: -1px;
  border-bottom: 3px solid transparent;
}

.admin-tab.is-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* ---------- charts ---------- */

.chart-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.chart-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: var(--space-md) var(--space-lg);
}

.chart-card h3 {
  font-size: 1.1rem;
  margin-bottom: var(--space-sm);
}

.chart-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.chart-card__body svg {
  overflow: visible;
}

.chart-meter__label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.6rem;
  fill: var(--color-text);
}

.chart-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  font-size: 0.85rem;
}

.chart-legend li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
}

.chart-legend__swatch {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  flex-shrink: 0;
}

.chart-legend__label {
  flex: 1;
  color: var(--color-text);
}

.chart-legend__value {
  color: var(--color-text-soft);
  font-variant-numeric: tabular-nums;
}

.chart-table-toggle {
  width: 100%;
  margin-top: var(--space-sm);
  font-size: 0.8rem;
}

.chart-table-toggle summary {
  cursor: pointer;
  color: var(--color-primary);
}

.chart-table-toggle table {
  margin-top: var(--space-sm);
  font-size: 0.8rem;
}

.admin-panel {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.admin-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.admin-inline-form {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  align-items: center;
}

.admin-inline-form input[type="text"],
.admin-inline-form select {
  padding: 0.6rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  font-family: var(--font-body);
}

.admin-filter-bar {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--space-md);
}

.admin-filter-bar input[type="search"],
.admin-filter-bar select {
  padding: 0.6rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  font-family: var(--font-body);
}

.admin-filter-bar input[type="search"] {
  min-width: 16rem;
}

.admin-filter-clear {
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-text-soft);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  cursor: pointer;
}

.admin-filter-clear:hover {
  border-color: var(--copper-deep);
  color: var(--copper-deep);
}

.admin-table-wrap {
  overflow-x: auto;
  margin-top: var(--space-md);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.admin-table th,
.admin-table td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  white-space: nowrap;
}

.admin-table select,
.admin-table input[type="text"] {
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  font-family: var(--font-body);
  width: 9rem;
}

.admin-table .field-party {
  width: 12rem;
}

.admin-table .field-extra {
  width: 12rem;
  font-family: monospace;
  font-size: 0.8rem;
}

.admin-table__id {
  font-family: monospace;
  font-size: 0.8rem;
  color: var(--color-text-soft);
  cursor: help;
}

.admin-delete {
  background: none;
  border: 1px solid var(--copper-deep);
  color: var(--copper-deep);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  cursor: pointer;
  font-size: 0.8rem;
}

/* ---------- footer ---------- */

.site-footer {
  position: relative;
  text-align: center;
  padding: var(--space-lg) var(--space-md);
  background: var(--color-text);
  color: #fff5e6;
}

/* wavy paper edge from the section above, flipped to curve into the footer.
   Scoped to the homepage footer (the only one with a floral divider) — on
   rsvp/admin the section above is cream, not white, and would show a seam. */
.site-footer:has(.floral-divider) {
  padding-top: calc(var(--space-lg) + 46px);
}

.site-footer:has(.floral-divider)::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 46px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 46' preserveAspectRatio='none'%3E%3Cpath d='M0 26C150 46 350 4 600 24C850 44 1050 6 1200 26V46H0Z' fill='%23ffffff'/%3E%3C/svg%3E") top center / 100% 100% no-repeat;
  transform: rotate(180deg);
  pointer-events: none;
}

.site-footer__names {
  font-family: var(--font-script);
  font-size: 2.2rem;
  color: var(--golden-hour);
}

.site-footer p {
  color: #f0dfd6;
  font-size: 0.9rem;
}