/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  --bg:          #080b18;
  --bg-surface:  #0d1124;
  --gold:        #d4a94a;
  --gold-light:  #f0ca7a;
  --white:       #f5f3ee;
  --text:        #ccc8be;
  --text-dim:    #6b6860;
  --yes-color:   #5db87a;
  --maybe-color: #c9a23b;
  --divider:     rgba(255,255,255,0.07);
  --radius-sm:   6px;
  --radius:      10px;
}

/* ── Material Symbols ────────────────────────────────────────────────────── */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  line-height: 1;
  user-select: none;
}

/* ── Stars ───────────────────────────────────────────────────────────────── */
.stars-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden; /* prevents stars from bleeding outside and causing h-scroll */
}

.star-field {
  position: absolute;
  inset: -20%;
  animation: drift linear infinite;
}

/* Programmatic star positions via box-shadow */
.sf1 {
  width: 1px; height: 1px;
  box-shadow:
    120px 80px rgba(255,255,255,.55),   210px 320px rgba(255,255,255,.4),
    450px 60px rgba(255,255,255,.6),    680px 200px rgba(255,255,255,.35),
    760px 440px rgba(255,255,255,.5),   90px 510px rgba(255,255,255,.45),
    330px 170px rgba(255,255,255,.3),   580px 95px rgba(255,255,255,.55),
    720px 310px rgba(255,255,255,.4),   155px 400px rgba(255,255,255,.35),
    495px 550px rgba(255,255,255,.5),   820px 130px rgba(255,255,255,.45),
    260px 480px rgba(255,255,255,.3),   640px 390px rgba(255,255,255,.55),
    380px 270px rgba(255,255,255,.4),   55px 620px rgba(255,255,255,.35),
    740px 590px rgba(255,255,255,.5),   410px 720px rgba(255,255,255,.45),
    180px 700px rgba(255,255,255,.3),   600px 660px rgba(255,255,255,.6);
  animation-duration: 160s;
  border-radius: 50%;
}

.sf2 {
  width: 1.5px; height: 1.5px;
  box-shadow:
    70px 140px rgba(255,255,255,.7),    300px 50px rgba(212,169,74,.6),
    540px 250px rgba(255,255,255,.65),  800px 80px rgba(255,255,255,.5),
    160px 560px rgba(212,169,74,.4),    670px 500px rgba(255,255,255,.7),
    390px 350px rgba(255,255,255,.55),  240px 230px rgba(255,255,255,.45);
  animation-duration: 100s;
  animation-direction: reverse;
  border-radius: 50%;
}

.sf3 {
  width: 2px; height: 2px;
  box-shadow:
    190px 110px rgba(255,255,255,.9),   560px 430px rgba(212,169,74,.85),
    710px 170px rgba(255,255,255,.8),   340px 600px rgba(196,181,253,.7);
  animation-duration: 200s;
  border-radius: 50%;
}

@keyframes drift {
  from { transform: translateY(0); }
  to   { transform: translateY(15%); }
}

/* ── Base ────────────────────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  overflow-x: hidden; /* belt-and-suspenders mobile fix */
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px 60px;
  gap: 0;
}

/* very subtle radial glow behind title */
.hero::before {
  content: '';
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 400px;
  background: radial-gradient(ellipse at center, rgba(212,169,74,.07) 0%, transparent 70%);
  pointer-events: none;
}

.pre-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 28px;
}

.site-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(4.5rem, 14vw, 9rem);
  font-weight: 600;
  line-height: 0.9;
  color: var(--white);
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}

.site-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--gold-light);
}

.tagline {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.2rem;
  color: var(--text-dim);
  margin-bottom: 40px;
  max-width: 340px;
}

/* ── Event meta ──────────────────────────────────────────────────────────── */
.event-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-bottom: 48px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.01em;
}

.meta-item .material-symbols-outlined {
  font-size: 17px;
  color: var(--gold);
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
}

.meta-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-dim);
  flex-shrink: 0;
}

/* ── RSVP trigger button ─────────────────────────────────────────────────── */
.rsvp-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 13px 32px;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.rsvp-trigger .material-symbols-outlined {
  font-size: 16px;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
  transition: transform 0.2s;
}

.rsvp-trigger:hover {
  background: var(--gold);
  color: var(--bg);
}

.rsvp-trigger:hover .material-symbols-outlined {
  transform: translateX(3px);
}

/* ── Main content ────────────────────────────────────────────────────────── */
.site-main {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 28px 80px;
}

.section {
  padding: 72px 0;
}

.section-divider {
  height: 1px;
  background: var(--divider);
}

.section-heading {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.section-sub {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-bottom: 32px;
}

/* ── Details ─────────────────────────────────────────────────────────────── */
.details-grid {
  display: flex;
  flex-direction: column;
  gap: 36px;
  margin-top: 36px;
}

.detail {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.detail-icon {
  font-size: 22px;
  color: var(--gold);
  font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24;
  flex-shrink: 0;
  margin-top: 2px;
}

.detail h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}

.detail ul {
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.detail li::before {
  content: '—';
  color: var(--text-dim);
  margin-right: 8px;
  font-size: 0.8em;
}

.detail li, .detail p {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text);
}

/* ── Guest list ──────────────────────────────────────────────────────────── */
.guest-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  min-height: 40px;
  align-items: flex-start;
}

.guest-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--divider);
  border-radius: 100px;
  padding: 5px 14px;
  font-size: 0.82rem;
  color: var(--text);
  letter-spacing: 0.01em;
  animation: fade-up 0.3s ease both;
}

.guest-chip.yes   { border-color: rgba(93,184,122,.25); }
.guest-chip.maybe { border-color: rgba(201,162,59,.25); }

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.yes   .status-dot { background: var(--yes-color); }
.maybe .status-dot { background: var(--maybe-color); }

.no-guests {
  font-size: 0.875rem;
  color: var(--text-dim);
  font-style: italic;
}

/* ── Calendar ────────────────────────────────────────────────────────────── */
.calendar-section .section-heading { margin-bottom: 24px; }

.cal-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.cal-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--divider);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
  letter-spacing: 0.01em;
}

.cal-link .material-symbols-outlined {
  font-size: 16px;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
}

.cal-link:hover {
  color: var(--gold-light);
  border-color: var(--gold);
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 20px 24px 32px;
  font-size: 0.75rem;
  color: var(--text-dim);
  border-top: 1px solid var(--divider);
}

/* ── Modal overlay ───────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(5, 7, 18, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 24px;
  overflow-y: auto;
  animation: overlay-in 0.2s ease;
}

/* .modal-overlay.hidden handled by global .hidden rule */

@keyframes overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Modal ───────────────────────────────────────────────────────────────── */
.modal {
  position: relative;
  background: #111527;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius);
  width: 100%;
  max-width: 440px;
  padding: 40px 36px 36px;
  margin: auto;
  animation: modal-in 0.25s ease;
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-dim);
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}

.modal-close:hover { color: var(--white); }

.modal-close .material-symbols-outlined {
  font-size: 20px;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20;
}

.modal-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 4px;
}

.modal-sub {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-bottom: 28px;
}

/* ── Form ────────────────────────────────────────────────────────────────── */
.field {
  margin-bottom: 22px;
}

label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.label-hint {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.72rem;
}

input[type="text"],
textarea {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  color: var(--white);
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s;
  -webkit-appearance: none;
}

input::placeholder, textarea::placeholder { color: rgba(255,255,255,0.2); }

input:focus, textarea:focus {
  border-color: rgba(212,169,74,0.5);
}

input.invalid { border-color: rgba(248,113,113,0.6); }

textarea { resize: vertical; min-height: 72px; }

/* Email split input */
.email-wrap {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 0.2s;
}

.email-wrap:focus-within { border-color: rgba(212,169,74,0.5); }
.email-wrap.invalid { border-color: rgba(248,113,113,0.6); }

.email-wrap input[type="text"] {
  border: none;
  background: transparent;
  border-radius: 0;
  flex: 1;
  min-width: 0;
}

.email-wrap input:focus { border: none; }

.email-domain {
  font-size: 0.82rem;
  color: var(--text-dim);
  padding: 10px 12px 10px 0;
  white-space: nowrap;
  flex-shrink: 0;
  user-select: none;
}

/* Attendance options */
.attend-options {
  display: flex;
  gap: 8px;
}

.attend-opt {
  flex: 1;
  cursor: pointer;
}

.attend-opt input[type="radio"] { display: none; }

.attend-opt span {
  display: block;
  text-align: center;
  padding: 9px 12px;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-dim);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
  text-transform: none;
}

.attend-opt:hover span {
  border-color: rgba(255,255,255,0.25);
  color: var(--white);
}

.attend-opt input:checked ~ span {
  color: var(--white);
  border-color: var(--gold);
  background: rgba(212,169,74,0.1);
}

/* Error */
.form-error {
  font-size: 0.8rem;
  color: #f87171;
  margin-bottom: 14px;
}

/* .form-error.hidden handled by global .hidden rule */

/* Submit button */
.btn-submit {
  width: 100%;
  background: var(--gold);
  border: none;
  color: #080b18;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 13px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}

.btn-submit:hover  { background: var(--gold-light); }
.btn-submit:active { transform: scale(0.99); }
.btn-submit:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* Text button */
.btn-text {
  background: none;
  border: none;
  color: var(--text-dim);
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top: 8px;
  transition: color 0.15s;
}

.btn-text:hover { color: var(--text); }

/* ── Confirm view ────────────────────────────────────────────────────────── */
#modal-confirm {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* #modal-confirm.hidden handled by global .hidden rule */

.confirm-msg {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--white);
  line-height: 1.2;
  margin-bottom: 6px;
}

.confirm-sub {
  font-size: 0.82rem;
  color: var(--text-dim);
  margin-bottom: 28px;
}

.confirm-cal {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--divider);
  margin-bottom: 20px;
}

/* ── Loading dots ────────────────────────────────────────────────────────── */
.loading-dots { display: flex; gap: 5px; align-items: center; padding: 4px 0; }
.loading-dots span {
  width: 5px; height: 5px;
  background: var(--text-dim);
  border-radius: 50%;
  animation: pulse 1.1s ease-in-out infinite;
}
.loading-dots span:nth-child(2) { animation-delay: .18s; }
.loading-dots span:nth-child(3) { animation-delay: .36s; }

@keyframes pulse {
  0%,100% { opacity: .25; transform: scale(.8); }
  50%      { opacity: 1;   transform: scale(1.1); }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Utility ─────────────────────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .modal { padding: 36px 24px 28px; }
  .site-main { padding: 0 20px 60px; }
  .hero { padding: 60px 20px 48px; }
  .event-meta { gap: 10px; }
  .meta-dot { display: none; }
}