/*
 * Arlene & Cory Wedding — Components
 * Consumes /src/styles/tokens.css. No layout/spacing magic numbers here —
 * everything references --wc-* tokens so the theme stays single-source.
 */

/* ── Reset (lightweight) ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--wc-text);
  background: var(--wc-ivory);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  word-wrap: break-word;
  -webkit-text-size-adjust: 100%;
}
img { max-width: 100%; height: auto; display: block; }
video, iframe, canvas, svg { max-width: 100%; }
table { max-width: 100%; }
a { color: var(--wc-link); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--wc-link-hover); text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0 0 1em; }
button { font: inherit; cursor: pointer; }

/* ── Layout primitives ────────────────────────────────────── */
.row.wide { width: 100%; max-width: var(--max-content); margin-inline: auto; padding-inline: 24px; }
.row.wide.wider { max-width: var(--max-content-wide); }
.row.wide.dashboard { max-width: var(--max-content-dashboard); }
.prose { max-width: var(--max-prose); margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
.col-12 { grid-column: span 12; }
.col-6  { grid-column: span 6; }
.col-4  { grid-column: span 4; }
.col-3  { grid-column: span 3; }
.col-8  { grid-column: span 8; }
@media (max-width: 1023px) {
  .col-12\@md { grid-column: span 12; }
  .col-6\@md  { grid-column: span 6; }
  .col-4\@md  { grid-column: span 4; }
}
@media (max-width: 600px) {
  .row.wide { padding-inline: 16px; }
  .grid { gap: 16px; }
  .grid > .col-4,
  .grid > .col-6,
  .grid > .col-3,
  .grid > .col-8,
  .grid > .col-6\@md,
  .grid > .col-4\@md,
  .grid > .col-12\@md { grid-column: span 12; }
}

/* Section backgrounds & rhythm */
section { padding-block: var(--space-section); }
section.compact { padding-block: calc(var(--space-section) * .6); }
/* View sections with a hero at the top don't need section padding - the
   hero and its inner sections handle their own spacing. */
section.view { padding-block: 0; }
@media (max-width: 767px) {
  section { padding-block: var(--space-section-sm); }
  section.view { padding-block: 0; }
}
.background-ivory     { background: var(--wc-ivory); }
.background-cream     { background: var(--wc-cream); }
.background-ink       { background: var(--wc-ink); color: var(--wc-text-on-dark); }

/* When a pseudo-theme background watermark is active, make section
   backgrounds semi-transparent so the watermark shows through. */
html[data-photos] .background-ivory { background: rgba(251, 250, 247, 0.82); }
html[data-photos] .background-cream { background: rgba(244, 239, 230, 0.82); }
html[data-photos] .background-ink  { background: rgba(20, 17, 13, 0.86); }
[data-theme="dark"][data-photos] .background-ivory { background: rgba(26, 24, 20, 0.82); }
[data-theme="dark"][data-photos] .background-cream { background: rgba(34, 31, 26, 0.82); }
[data-theme="dark"][data-photos] .background-ink  { background: rgba(20, 17, 13, 0.86); }
.background-ink a     { color: var(--wc-blush); }
.background-blush     { background: var(--wc-blush); color: #fff; }
.background-champagne { background: var(--wc-champagne); }
.text-ivory { color: var(--wc-text-on-dark); }
.text-cream { color: var(--wc-text-on-dark); opacity: 0.9; }

/* ── Headings / type ──────────────────────────────────────── */
.couple-names {
  font-family: var(--font-display);
  font-size: var(--fs-names);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
}
.couple-names .amp { color: var(--wc-blush-deep); font-style: italic; padding: 0 .15em; }
.h1, .hero-title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
}
.title, .section-title {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-align: center;
  margin-bottom: 1.2em;
}
.section-eyebrow {
  font-family: var(--font-body-medium);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--wc-sage-deep);
  text-align: center;
  display: block;
  margin-bottom: .5em;
}
.background-ink .section-eyebrow { color: var(--wc-blush); }
.card-title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: var(--lh-display);
}
.lead { font-family: var(--font-body-light); font-size: var(--fs-lg); }
.caption { font-size: var(--fs-caption); color: var(--wc-text-muted); }
.background-ink .caption { color: var(--wc-text-on-dark); opacity: 0.8; }
.center { text-align: center; }

/* Decorative monogram + divider */
.monogram {
  font-family: var(--font-display-script);
  font-size: var(--fs-monogram);
  letter-spacing: var(--tracking-monogram);
  line-height: 1;
  color: var(--wc-sage-deep);
}
.divider {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; margin: 1.5em auto;
}
@media (max-width: 600px) {
  .divider { gap: 10px; margin: 1em auto; }
  .divider::before, .divider::after { width: 50px; }
}
.divider::before, .divider::after {
  content: ""; height: 1px; width: 80px; background: var(--divider-color);
}
.divider .mark { color: var(--wc-blush-deep); font-family: var(--font-display-script); font-size: 28px; }

/* ── Buttons ──────────────────────────────────────────────── */
.wc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body-semibold);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: 0.01em;
  text-transform: none;
  padding: 12px 28px;
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  transition: all var(--dur) var(--ease);
  text-decoration: none;
  cursor: pointer;
}
@media (max-width: 600px) {
  .wc-btn { padding: 10px 20px; font-size: 15px; }
}
.wc-btn:hover { text-decoration: none; }
.wc-btn-primary    { background: var(--wc-sage); color: #fff; }
.wc-btn-primary:hover { background: var(--wc-sage-deep); color: #fff; }
.wc-btn-secondary  { background: transparent; color: var(--wc-sage-deep); border-color: var(--wc-sage-deep); }
.wc-btn-secondary:hover { background: var(--wc-sage); color: #fff; }
.wc-btn-ghost      { background: transparent; color: var(--wc-text); border-color: var(--wc-stone); }
.wc-btn-ghost:hover { border-color: var(--wc-sage); color: var(--wc-sage-deep); }
.wc-btn-blush      { background: var(--wc-blush); color: #fff; }
.wc-btn-blush:hover { background: var(--wc-blush-deep); color: #fff; }
.wc-btn-dark       { background: var(--wc-ink); color: var(--wc-ivory); }
.wc-btn-dark:hover { background: var(--wc-charcoal); color: var(--wc-ivory); }
.wc-btn-link        { background: transparent; color: var(--wc-link); padding: 4px 0; border-radius: 0; }
.wc-btn-link:hover  { text-decoration: underline; }
.wc-btn-rsvp-yes    { background: var(--wc-success); color: #fff; }
.wc-btn-rsvp-yes:hover { background: #4a6230; }
.wc-btn-rsvp-no     { background: transparent; color: var(--wc-error); border-color: var(--wc-error); }
.wc-btn-rsvp-no:hover { background: var(--wc-error); color: #fff; }
.wc-btn[aria-pressed="true"] { box-shadow: var(--sh-focus); }

.btn-row { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.landing-actions { padding-block: 16px 8px; }
.btn-row .wc-btn { width: min(280px, 100%); }
@media (min-width: 1024px) { .btn-row .wc-btn { width: 320px; } }
@media (max-width: 600px) {
  .btn-row { gap: 10px; }
  .btn-row .wc-btn { width: 100%; }
  .landing-actions { padding-block: 12px 4px; }
}

/* Hide the in-hero landing buttons on larger screens; they're redundant
   with the sticky header nav and most useful on mobile where the nav is
   collapsed. */
.landing-actions-mobile { display: none; }
@media (max-width: 768px) {
  .landing-actions-mobile { display: flex; }
}/* ── RSVP event toggles ──────────────────────────────────── */
.rsvp-events { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; }
.rsvp-event-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 16px;
  background: var(--input-bg);
  border: 1px solid var(--wc-linen);
  border-radius: var(--r-card);
}
.rsvp-event-name {
  font-family: var(--font-body-medium);
  font-size: var(--fs-body);
  color: var(--wc-text);
}
.rsvp-event-toggle { display: flex; gap: 8px; }
.rsvp-event-toggle .wc-btn {
  padding: 8px 20px;
  font-size: 13px;
  min-width: 64px;
}
@media (max-width: 600px) {
  .rsvp-event-row { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px; }
  .rsvp-event-name { text-align: center; font-size: 14px; }
  .rsvp-event-toggle { justify-content: center; }
  .rsvp-event-toggle .wc-btn { flex: 1; padding: 8px 12px; font-size: 13px; min-width: 0; }
  .rsvp-events { gap: 10px; }
}

/* ── RSVP status table ───────────────────────────────────── */
.rsvp-status-section {
  margin-top: 60px;
  padding: 24px 22px;
  background: #f4efe6;
  border: 1px solid #e3dccd;
  border-radius: 12px;
}

/* ── RSVP existing-response card ─────────────────────────── */
.rsvp-existing {
  margin-top: 28px;
  padding: 20px 24px;
  background: var(--wc-cream);
  border: 1px solid #e3dccd;
  border-radius: 10px;
}
.rsvp-existing-eyebrow {
  font-family: var(--font-body-medium);
  font-size: 12px;
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--wc-text-muted);
  margin: 0 0 10px;
}
.rsvp-existing-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: 14px;
}
.rsvp-existing-list li { line-height: 1.4; }
.rsvp-existing .hint { margin-top: 14px; margin-bottom: 0; }

.rsvp-table-wrap { max-width: 100%; overflow-x: auto; }
.rsvp-table-scroll { overflow-x: auto; }
.rsvp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-caption);
  min-width: 560px;
}
.rsvp-table th {
  font-family: var(--font-body-medium);
  font-size: 12px;
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--wc-text-muted);
  text-align: center;
  padding: 10px 8px;
  border-bottom: 2px solid var(--divider-color);
  white-space: nowrap;
}
.rsvp-table th:first-child { text-align: left; }
.rsvp-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--wc-linen);
  text-align: center;
  color: var(--wc-text);
}
.rsvp-table td:first-child { text-align: left; }
.rsvp-name-cell { font-family: var(--font-body-medium); }
.rsvp-extra-guests {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--wc-text-muted);
  margin-top: 2px;
  line-height: 1.4;
}
.rsvp-status-cell { font-size: 18px; }
.rsvp-num-cell { font-variant-numeric: tabular-nums; }
.rsvp-date-cell { color: var(--wc-text-muted); font-size: 12px; white-space: nowrap; }
.rsvp-yes { color: var(--wc-success); font-weight: bold; }
.rsvp-no { color: var(--wc-error); }
.rsvp-pending { color: var(--wc-text-muted); }
.rsvp-table tbody tr:hover { background: var(--wc-cream); }
.rsvp-table-couple .rsvp-group-row th {
  text-align: left;
  padding: 12px 8px 6px;
  font-family: var(--font-body-medium);
  font-size: 13px;
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--wc-text-muted);
  border-bottom: 2px solid var(--divider-color);
  background: transparent;
}
@media (max-width: 600px) {
  .rsvp-table { font-size: 11px; min-width: 320px; }
  .rsvp-table th, .rsvp-table td { padding: 6px 3px; }
  .rsvp-extra-guests { font-size: 10px; }
  .rsvp-status-section { margin-top: 32px; }
}

/* ── Admin guest list editor ─────────────────────────────── */
.rsvp-admin { margin-top: 20px; }
.rsvp-admin-gate {
  max-width: 420px;
  margin: 0 auto;
  padding: 28px 24px;
  background: var(--wc-cream);
  border: 1px solid #e3dccd;
  border-radius: 12px;
  text-align: center;
}
.rsvp-admin-gate .form { text-align: left; }
.rsvp-admin-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--wc-linen);
}
.admin-guest-group { margin-top: 24px; }
.admin-guest-group-title {
  font-family: var(--font-body-medium);
  font-size: 16px;
  margin: 0 0 12px;
}
.admin-guest-list { display: grid; gap: 12px; }
.admin-guest-row {
  display: grid;
  grid-template-columns: 2fr 2fr 1.4fr auto;
  gap: 12px;
  align-items: end;
  padding: 12px 14px;
  background: var(--wc-cream);
  border: 1px solid #e3dccd;
  border-radius: 8px;
}
.admin-guest-row .field { margin: 0; }
.admin-guest-row .field label {
  display: block;
  font-size: 11px;
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--wc-text-muted);
  margin-bottom: 4px;
}
.admin-guest-row input,
.admin-guest-row select { width: 100%; }
.admin-guest-remove-field { display: flex; align-items: flex-end; }
@media (max-width: 640px) {
  .admin-guest-row { grid-template-columns: 1fr; gap: 10px; }
  .rsvp-admin-header { flex-direction: column; }
}

/* ── Header & nav (sticky) ───────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--header-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--wc-linen);
  transition: box-shadow var(--dur) var(--ease);
}
.site-header.is-sticky { box-shadow: var(--sh-card); }
.site-header .row.wide {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 14px; gap: 16px;
}
.brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; }
.brand .monogram { font-size: 36px; }
.brand .names { font-family: var(--font-display); font-size: 20px; color: var(--wc-text); letter-spacing: var(--tracking-display); }
.brand .amp { color: var(--wc-blush-deep); font-style: italic; }

.nav { display: flex; gap: 4px; align-items: center; }
.nav a {
  font-family: var(--font-body-medium);
  font-size: 14px;
  color: var(--wc-text);
  padding: 8px 14px;
  border-radius: var(--r-pill);
  transition: all var(--dur) var(--ease);
  text-decoration: none;
  white-space: nowrap;
}
.nav a:hover { background: var(--wc-cream); color: var(--wc-sage-deep); text-decoration: none; }
.nav a.active { background: var(--wc-sage); color: #fff; }
.nav a.cta { background: var(--wc-blush); color: #fff; }
.nav a.cta:hover { background: var(--wc-blush-deep); }
.nav a.is-incomplete {
  background: var(--wc-warning);
  color: var(--wc-ink);
}
.nav a.is-incomplete:hover { background: #b88a2a; color: var(--wc-ink); }
/* When the incomplete page is also the active view, keep the active green
   background and signal incompleteness with an amber dot. */
.nav a.is-incomplete.active::after {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-left: 7px;
  border-radius: var(--r-circle);
  background: var(--wc-warning);
  vertical-align: middle;
  box-shadow: 0 0 0 2px rgba(47, 44, 38, .15);
}

.nav-signout {
  font-family: var(--font-body-medium);
  font-size: 13px;
  color: var(--wc-text-muted);
  background: transparent;
  border: 1px solid var(--wc-stone);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  margin-left: 6px;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.nav-signout:hover { color: var(--wc-sage-deep); border-color: var(--wc-sage); }
@media (max-width: 900px) {
  .nav-signout { margin-left: 0; margin-top: 8px; align-self: stretch; text-align: center; }
}

.nav-toggle { display: none; background: none; border: 0; font-size: 24px; color: var(--wc-text); padding: 6px; }
@media (max-width: 900px) {
  .site-header .row.wide { padding-block: 8px; gap: 8px; }
  .site-header { backdrop-filter: none; }
  .brand .names { display: none; }
  .brand .monogram { font-size: 28px; }
  .nav {
    position: fixed; top: 48px; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    background: var(--wc-ivory);
    padding: 12px 16px 20px;
    box-shadow: var(--sh-card);
    transform: translateY(-120%); opacity: 0; pointer-events: none;
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    z-index: var(--z-header);
  }
  .nav.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav a { padding: 12px 14px; font-size: 16px; }
  .nav-toggle { display: inline-flex; }
  .theme-toggle { align-self: center; margin-top: 8px; }
  .nav-signout { margin-left: 0; margin-top: 8px; align-self: stretch; text-align: center; }
}

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: min(86vh, 720px);
  padding-block: 0;
  overflow: hidden;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.hero.hero-compact {
  min-height: min(92vh, 860px);
}
@media (max-width: 768px) {
  .hero { min-height: 60vh; }
  .hero.hero-compact { min-height: 60vh; }
}
@media (max-width: 600px) {
  /* On narrow phones, keep the whole photo visible instead of cropping it. */
  .hero { background-size: contain; background-position: center top; }
}

.hero-caption {
  text-align: center;
  padding-block: 28px 36px;
}
.hero-caption .inner { max-width: 760px; margin: 0 auto; padding-inline: 24px; }
@media (max-width: 600px) {
  .hero-caption .inner { padding-inline: 16px; }
}
.hero-caption .couple-names { margin-bottom: 12px; }
.hero-caption .date {
  font-family: var(--font-body-medium);
  font-size: var(--fs-xl);
  letter-spacing: var(--tracking-caption);
  color: var(--wc-sage-deep);
  margin-bottom: 8px;
}
.hero-caption .locale { font-size: var(--fs-lg); color: var(--wc-text-muted); margin-bottom: 32px; }
@media (max-width: 600px) {
  .hero-caption .locale { margin-bottom: 20px; }
}

.countdown {
  display: flex; justify-content: center; gap: 24px; margin: 24px 0 32px;
  flex-wrap: wrap;
}
.countdown .unit {
  background: var(--countdown-bg);
  border: 1px solid var(--wc-linen);
  border-radius: var(--r-card);
  padding: 14px 18px; min-width: 76px;
  flex: 1 1 70px;
}
.countdown .num {
  font-family: var(--font-display); font-size: var(--fs-title); line-height: 1;
  color: var(--wc-sage-deep);
}
.countdown .lbl {
  font-family: var(--font-body-medium); font-size: 12px;
  letter-spacing: var(--tracking-caption); text-transform: uppercase;
  color: var(--wc-text-muted); margin-top: 4px;
}
@media (max-width: 600px) {
  .countdown { gap: 8px; margin: 16px 0 20px; }
  .countdown .unit { min-width: 0; padding: 8px 6px; flex: 1 1 0; }
  .countdown .num { font-size: 22px; }
  .countdown .lbl { font-size: 10px; }
}
@media (max-width: 340px) {
  .countdown .unit { flex-basis: calc(50% - 8px); }
}

/* ── Cards ───────────────────────────────────────────────── */
.card {
  background: var(--card-bg);
  border: 1px solid var(--wc-linen);
  border-radius: var(--r-card);
  padding: var(--space-card);
  box-shadow: var(--sh-card);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
@media (max-width: 600px) {
  .card { padding: 16px; }
}
.background-ink .card { background: rgba(237, 232, 223, .06); border-color: rgba(237, 232, 223, .12); color: var(--wc-text-on-dark); }
.card:hover { box-shadow: var(--sh-card-hover); transform: translateY(-2px); }
.card-stack { display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1023px) { .card-stack { grid-template-columns: 1fr; } }
.card-stack.two { grid-template-columns: repeat(2, 1fr); }
.card-stack.two.center-single { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
@media (max-width: 900px) { .card-stack.two { grid-template-columns: 1fr; } }
.card .icon { font-size: 28px; color: var(--wc-sage); margin-bottom: 12px; }
.card-title { margin-bottom: .35em; }
.card-meta { font-size: var(--fs-caption); color: var(--wc-text-muted); margin-bottom: 10px; }

/* ── Person / wedding party card ─────────────────────────── */
.person {
  text-align: center;
  background: var(--wc-ivory);
  border: 1px solid var(--wc-linen);
  border-radius: var(--r-panel);
  padding: 24px;
  box-shadow: var(--sh-card);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.person:hover { box-shadow: var(--sh-card-hover); transform: translateY(-3px); }
.person .photo {
  width: 120px; height: 120px; border-radius: var(--r-circle);
  background: var(--wc-cream); margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 36px; color: var(--wc-sage-deep);
  border: 2px solid var(--wc-blush);
  overflow: hidden;
}
.person .photo img { width: 100%; height: 100%; object-fit: cover; }
.person .role {
  font-family: var(--font-body-medium); font-size: 12px;
  letter-spacing: var(--tracking-caption); text-transform: uppercase;
  color: var(--wc-blush-deep); margin-bottom: 4px;
}
.person .name { font-family: var(--font-display); font-size: var(--fs-xl); margin-bottom: 8px; }
.person .bio { font-size: var(--fs-caption); color: var(--wc-text-muted); line-height: var(--lh-body); }

/* ── Timeline ────────────────────────────────────────────── */
.timeline { max-width: var(--max-prose); margin-inline: auto; position: relative; padding-left: 28px; }
.timeline::before {
  content: ""; position: absolute; left: 6px; top: 4px; bottom: 4px;
  width: 2px; background: var(--divider-color);
}
.timeline .item { position: relative; padding-bottom: 32px; }
.timeline .item:last-child { padding-bottom: 0; }
.timeline .item::before {
  content: ""; position: absolute; left: -28px; top: 4px;
  width: 14px; height: 14px; border-radius: var(--r-circle);
  background: var(--wc-sage); border: 3px solid var(--wc-ivory);
  box-shadow: 0 0 0 1px var(--wc-sage);
}
.timeline .time { font-family: var(--font-body-semibold); color: var(--wc-sage-deep); font-size: var(--fs-caption); letter-spacing: var(--tracking-caption); text-transform: uppercase; }
.timeline .what { font-family: var(--font-display); font-size: var(--fs-xl); margin: 2px 0 4px; }
.timeline .where { font-size: var(--fs-caption); color: var(--wc-text-muted); }

/* ── Forms / RSVP ─────────────────────────────────────────── */
.form { max-width: 640px; margin-inline: auto; }
.field { margin-bottom: var(--space-field-gap); }
.field label { display: block; font-family: var(--font-body-medium); font-size: var(--fs-caption); margin-bottom: 6px; color: var(--wc-text); }
.field label .req { color: var(--wc-blush-deep); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 16px;
  padding: 12px 14px; color: var(--wc-text);
  background: var(--input-bg);
  border: 1.5px solid var(--wc-stone);
  border-radius: var(--r-input);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  box-shadow: var(--sh-input);
}
@media (max-width: 600px) {
  .field input, .field select, .field textarea { padding: 10px 12px; }
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--wc-sage);
  box-shadow: var(--sh-focus);
}
.field textarea { min-height: 120px; resize: vertical; }
.field .hint { font-size: 12px; color: var(--wc-text-muted); margin-top: 4px; }
.form .actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; }
.form .actions .wc-btn { flex: 1 1 160px; max-width: 280px; }

/* ── FAQ accordion ───────────────────────────────────────── */
.faq { max-width: var(--max-prose); margin-inline: auto; }
.faq .item { border-bottom: 1px solid var(--wc-linen); }
.faq .item:first-child { border-top: 1px solid var(--wc-linen); }
.faq .q {
  width: 100%; text-align: left; background: none; border: 0; padding: 20px 0;
  font-family: var(--font-body-semibold); font-size: var(--fs-lg); color: var(--wc-text);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
@media (max-width: 600px) {
  .faq .q { padding: 14px 0; font-size: 15px; gap: 10px; }
}
.faq .q .chev { color: var(--wc-sage-deep); transition: transform var(--dur) var(--ease); }
.faq .item.is-open .q .chev { transform: rotate(180deg); }
.faq .a { max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease); }
.faq .item.is-open .a { max-height: 80vh; }
.faq .a .inner { padding: 0 0 20px; color: var(--wc-text-muted); line-height: var(--lh-body); }

/* ── Footer ──────────────────────────────────────────────── */
.site-footer { padding-block: 60px 40px; border-top: 1px solid var(--wc-linen); }
.site-footer .row.wide { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.site-footer .monogram { font-size: 56px; }
.site-footer .foot-names { font-family: var(--font-display); font-size: var(--fs-xl); }
.site-footer .foot-meta { font-size: var(--fs-caption); color: var(--wc-text-muted); }
.site-footer a { word-break: break-word; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .site-footer { padding-block: 32px 24px; }
  .site-footer .monogram { font-size: 40px; }
  .site-footer .row.wide { gap: 10px; }
}

/* ── SPA tab view ────────────────────────────────────────── */
.view { display: none; }
.view.is-active { display: block; animation: fade var(--dur-reveal) var(--ease); }
.view:focus { outline: none; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Utilities */
.d-none { display: none !important; }
.mt-lg { margin-top: 40px; }
@media (max-width: 600px) {
  .mt-lg { margin-top: 24px; }
}
.mb-0 { margin-bottom: 0; }

/* ── Sign-in gate ────────────────────────────────────────── */
/* While unauthenticated, hide the site chrome (header nav + footer) so only
   the gate view is visible. The gate view itself lives inside #app and is
   shown/hidden via .view.is-active as usual. */
body.is-gated .site-header,
body.is-gated .site-footer { display: none !important; }
body.is-gated { background: var(--wc-ivory); }

.gate {
  min-height: min(80vh, 640px);
  display: flex; align-items: center; justify-content: center;
  padding-block: 80px;
}
@media (max-width: 768px) {
  .gate { min-height: auto; padding-block: 40px; }
}
.gate-card {
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
  text-align: center;
  background: var(--wc-cream);
  border: 1px solid var(--wc-linen);
  border-radius: var(--r-panel);
  padding: 48px 32px;
  box-shadow: var(--sh-card);
}
@media (max-width: 600px) {
  .gate-card { padding: 28px 18px; border-radius: 12px; }
  .gate-card .monogram { font-size: 48px; }
}
.gate-card .monogram { font-size: 64px; display: block; margin-bottom: 8px; }
.gate-card .section-eyebrow { margin-bottom: 4px; }
.gate-card .title { margin-bottom: 8px; }
.gate-form { margin-top: 24px; text-align: left; }
.gate-form .field label { text-align: left; }

/* ── Markdown content (rendered) ──────────────────────────── */
.md-content.is-rendered { line-height: var(--lh-body); }
.md-content > :first-child { margin-top: 0; }
.md-content > :last-child { margin-bottom: 0; }
.md-content h2 {
  font-family: var(--font-body-semibold);
  font-size: var(--fs-lg);
  color: var(--wc-text);
  margin: 28px 0 8px;
}
.md-content h3 {
  font-family: var(--font-body-semibold);
  font-size: var(--fs-md);
  color: var(--wc-text);
  margin: 24px 0 6px;
}
.md-content p { margin: 0 0 14px; }
.md-content ul, .md-content ol { margin: 0 0 14px; padding-left: 1.4em; }
.md-content li { margin-bottom: 6px; }
@media (max-width: 600px) {
  .md-content ul, .md-content ol { padding-left: 1.2em; }
}
.md-content blockquote {
  margin: 0 0 14px;
  padding: 4px 14px;
  border-left: 3px solid var(--wc-blush);
  color: var(--wc-text-muted);
  font-style: italic;
}
.md-content hr { border: 0; border-top: 1px solid var(--wc-linen); margin: 24px 0; }
.md-content a { color: var(--wc-blush-deep); text-decoration: underline; }
.md-content code {
  background: var(--wc-cream);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.92em;
}
.md-content pre {
  background: var(--wc-cream);
  padding: 14px;
  border-radius: var(--r-panel);
  overflow-x: auto;
}
.md-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}
.md-content img { max-width: 100%; height: auto; }
.faq-md .faq { max-width: var(--max-prose); margin-inline: auto; }

/* ── Inline editing controls ─────────────────────────────── */
.md-content.is-editable { position: relative; }
.md-edit-bar {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.md-content.is-editable:hover .md-edit-bar,
.md-content.is-editing .md-edit-bar { opacity: 1; }
.md-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-family: var(--font-body-semibold);
  color: var(--wc-blush-deep);
  background: var(--wc-cream);
  border: 1px solid var(--wc-linen);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
}
.md-edit-btn:hover { background: var(--wc-blush); color: #fff; border-color: var(--wc-blush); }

.md-content.is-editing > *:not(.md-editor):not(.md-edit-controls) { display: none !important; }

.md-editor {
  width: 100%;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 14px;
  line-height: 1.6;
  color: var(--wc-text);
  background: var(--input-bg);
  border: 1px solid var(--wc-linen);
  border-radius: var(--r-panel);
  padding: 16px;
  resize: vertical;
  min-height: 220px;
}
.md-editor:focus {
  outline: 2px solid var(--wc-blush);
  border-color: var(--wc-blush);
}

.md-edit-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.md-save-status { font-size: 13px; color: var(--wc-text-muted); }
.md-save-status.is-busy { color: var(--wc-warning); }
.md-save-status.is-error { color: var(--wc-error); }
.gate-form .actions { justify-content: center; }

/* ── Theme toggle button ─────────────────────────────────── */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--wc-text);
  background: var(--wc-cream);
  border: 1px solid var(--wc-linen);
  border-radius: var(--r-pill);
  padding: 8px 12px;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.theme-toggle:hover { border-color: var(--wc-sage); color: var(--wc-sage-deep); }
.theme-toggle i { font-size: 16px; }

/* ── Dark theme component adjustments ────────────────────── */
[data-theme="dark"] .person { background: var(--card-bg); }
[data-theme="dark"] .md-content a { color: var(--wc-sage-tint); }
[data-theme="dark"] .md-content blockquote { border-left-color: var(--wc-sage); color: var(--wc-text-muted); }

/* ── Pseudo-theme photo injection ────────────────────────── */
/* Side photos are absolutely positioned out of flow so they never disturb
   page layout. They sit in the left/right margins of the content area at
   random vertical positions. Hidden on narrow screens where there's no
   margin space. */
.view.is-active { position: relative; }
.theme-photo {
  position: absolute;
  max-width: 220px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}
.theme-photo img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
}
.theme-photo .caption {
  font-size: var(--fs-caption);
  color: var(--wc-text-muted);
  text-align: center;
  margin-top: 6px;
  font-style: italic;
}
/* Ensure content sits above side photos */
.row.wide, .md-content, .prose { position: relative; z-index: 1; }
/* Only show side photos when there's enough margin space */
@media (max-width: 1100px) {
  .theme-photo { display: none; }
}

/* ── Background watermark photos (parallax) ──────────────── */
/* Fixed-position background layer behind all page content. Shows the
   entire image (contain, not cover) and scrolls with parallax since
   it's position:fixed relative to the viewport. Pointer-events: none
   so it never blocks interaction. */
.theme-photo-bg {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}
/* Ensure page content sits above the background layer, but don't clobber
   the header's own z-index (it needs to stay above main content so the
   mobile nav menu is visible when expanded). */
main, .site-footer { position: relative; z-index: 1; }
@media (max-width: 600px) {
  .theme-photo-bg { opacity: 0.2; }
}