/* ══════════════════════════════════════════════════════════════════════
   Section 1 — copied exactly from the template's page (the <style>
   block inside Katlego & Makgotso.dc.html's <helmet>). This is the
   wedding's own accent override on top of the Classical design system
   (design-system.css): merlot instead of the system's default gold,
   Lora as the body font, and the focus/selection colors to match.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --color-accent: #7c2d3c;
  --color-accent-100: #f6eaec;
  --color-accent-200: #e9ccd2;
  --color-accent-300: #d4a0aa;
  --color-accent-400: #b9737f;
  --color-accent-500: #9c4a58;
  --color-accent-600: #6e2634;
  --color-accent-700: #5f1f2b;
  --color-accent-800: #45161f;
  --color-accent-900: #2c0f15;
}
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: "Lora", Georgia, serif; -webkit-font-smoothing: antialiased; }
a { color: #7c2d3c; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #5f1f2b; }
* { box-sizing: border-box; }
input, button, select, textarea { font: inherit; }
:focus-visible { outline: 2px solid #7c2d3c; outline-offset: 2px; }
::selection { background: #e9ccd2; }
img { max-width: 100%; }

/* ══════════════════════════════════════════════════════════════════════
   Section 2 — the template's own page layout, copied as-is: the sticky
   header/nav, the footer, and the "plate" photo treatment used for every
   photograph on the site (matted, grayscale, matches Katlego & Makgotso.dc.html).
   ══════════════════════════════════════════════════════════════════════ */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }

.site-header { position: sticky; top: 0; z-index: 20; background: var(--color-bg); border-bottom: 1px solid var(--color-divider); }
.header-inner { max-width: 1120px; margin: 0 auto; padding: 14px 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: baseline; gap: 14px; text-decoration: none; }
.brand-mark { position: relative; padding-left: 0.30em; font-family: var(--font-heading); font-weight: 400; font-size: 34px; line-height: 1; color: var(--color-accent); }
.brand-mark .m { display: inline-block; }
.brand-mark .k { position: absolute; left: 0; top: 0; }
.brand-mark .k-outline { -webkit-text-stroke: 4px var(--color-bg); }
.brand-date { font-family: var(--font-body); font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--color-neutral-700); }
.site-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.site-nav a { background: none; border: none; padding: 8px 12px; cursor: pointer; font-family: var(--font-body); font-size: 11px; letter-spacing: 0.20em; text-transform: uppercase; color: var(--color-text); position: relative; text-decoration: none; }
.site-nav a:hover { color: var(--color-accent); }
.site-nav a.is-active { color: var(--color-accent); }
.site-nav a.is-active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 1px; background: var(--color-accent); }

.site-footer { border-top: 1px solid var(--color-divider); }
.footer-inner { max-width: 1120px; margin: 0 auto; padding: 36px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer-url { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--color-neutral-700); }

.plate { border: 6px solid var(--color-surface); outline: 1px solid var(--color-divider); filter: grayscale(1) contrast(1.06); overflow: hidden; }
.plate img { width: 100%; height: 100%; object-fit: cover; }
.plate-placeholder { display: flex; align-items: center; justify-content: center; min-height: 220px; height: 100%; background: var(--color-neutral-200); color: var(--color-neutral-700); font-family: var(--font-body); font-size: 13px; text-align: center; padding: 24px; }

.section { max-width: 1120px; margin: 0 auto; }
.section-divider { border-top: 1px solid var(--color-divider); }
.center { text-align: center; }
.kicker { margin: 0; font-family: var(--font-body); font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--color-accent); }

/* The wedding's own outlined button style — used throughout the template
   (RSVP's "Send reply", "Change my reply", the home page CTAs) instead of
   the design system's plain .btn, which reads differently (see readme.md
   vs. this page's actual inline styles: 11px caps, wide letter-spacing). */
.mk-btn { display: inline-block; background: none; border: 1px solid var(--color-accent); border-radius: var(--radius-md); padding: 14px 30px; cursor: pointer; font-family: var(--font-body); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-accent); text-decoration: none; text-align: center; }
.mk-btn:hover { background: var(--color-accent-100); }
.mk-btn-quiet { border-color: var(--color-divider); color: var(--color-text); }
.mk-btn-quiet:hover { border-color: var(--color-accent); color: var(--color-accent); background: none; }

.form-card { border: 1px solid var(--color-divider); border-radius: var(--radius-md); padding: 48px 44px; }
.field-label { display: block; margin-bottom: 12px; font-family: var(--font-body); font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--color-neutral-700); }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 34px; }
.textarea { width: 100%; background: none; border: 1px solid var(--color-divider); border-radius: var(--radius-md); padding: 12px; font-family: var(--font-body); font-size: 15px; color: var(--color-text); resize: vertical; }

.party-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.party-tile { display: block; text-align: left; background: none; border: 1px solid var(--color-divider); border-radius: var(--radius-md); padding: 18px 20px; text-decoration: none; color: inherit; position: relative; }
.party-tile:hover { border-color: var(--color-accent); }
.party-tile .name { display: block; font-family: var(--font-heading); font-size: 24px; line-height: 1.2; color: var(--color-text); }
.party-tile .role { display: block; margin-top: 6px; font-family: var(--font-body); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-neutral-700); }

/* The RSVP "which answer" tiles — same tile/underline-bar pattern as the
   bridal-party grid above, exactly as drawn in the template's RSVP mock. */
.choice { position: relative; text-align: left; background: none; border: 1px solid var(--color-divider); border-radius: var(--radius-md); padding: 22px 24px; cursor: pointer; width: 100%; }
.choice:hover { border-color: var(--color-accent); }
.choice .title { display: block; font-family: var(--font-heading); font-size: 26px; }
.choice .sub { display: block; margin-top: 6px; font-family: var(--font-body); font-size: 14px; color: var(--color-neutral-700); }
.choice.is-checked { border-color: var(--color-accent); }
.choice.is-checked::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 2px; background: var(--color-accent); border-radius: var(--radius-md) 0 0 var(--radius-md); }
.field-value-static { font-family: var(--font-heading); font-size: 28px; color: var(--color-text); }
.num-input { width: 120px; background: none; border: none; border-bottom: 1px solid var(--color-divider); border-radius: 0; padding: 10px 2px; font-family: var(--font-heading); font-size: 28px; font-variant-numeric: tabular-nums; color: var(--color-text); }
.num-input:focus-visible { border-bottom-color: var(--color-accent); outline: none; }
.thanks-card { border: 1px solid var(--color-accent); border-radius: var(--radius-md); padding: 64px 48px; text-align: center; }

/* ══════════════════════════════════════════════════════════════════════
   Section 3 — site-specific additions the template didn't define, for
   pages the template never included (the admin area, and the real
   token-based RSVP). Built from the same tokens as everything above, and
   from the design system's own .card/.table/.tag/.btn/.field/.input
   components (see design-system.css + readme.md) rather than one-off
   styles, so the admin area still reads as part of the same system.
   ══════════════════════════════════════════════════════════════════════ */
.admin-body { background: var(--color-neutral-100); }
.admin-wrap { max-width: 1200px; margin: 0 auto; padding: 32px 24px 80px; }
.admin-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; border-bottom: 1px solid var(--color-divider); background: var(--color-bg); flex-wrap: wrap; }
.admin-topbar .brand-mark { font-size: 26px; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); margin: var(--space-6) 0; }
.stat-row .card-title { font-family: var(--font-heading); font-size: 34px; }
.table-wrap { border: 1px solid var(--color-divider); border-radius: var(--radius-md); overflow-x: auto; background: var(--color-bg); }
.table { min-width: 780px; }
.link-copy { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; }
.link-copy .input { width: 210px; font-size: 12px; background: var(--color-neutral-100); }
.login-wrap { max-width: 380px; margin: 12vh auto 0; padding: 0 24px; }
.notice { padding: 14px 18px; border-radius: var(--radius-md); font-size: 14px; margin-bottom: var(--space-4); }
.notice-error { background: var(--color-accent-100); color: var(--color-accent-800); border: 1px solid var(--color-accent-300); }
.notice-ok { background: #eaf3ea; color: #1e4620; border: 1px solid #bfe0c0; }
.checkbox-row { display: flex; align-items: center; gap: 8px; }
.muted { color: var(--color-neutral-700); }
.small { font-size: 12px; }