@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=Cormorant+SC:wght@300;400;500&display=swap');

:root {
  --gold:          #C9A96E;
  --gold-light:    #DBBF88;
  --gold-dark:     #A07840;
  --gold-deep:     #7A5B28;
  --gold-pale:     rgba(201, 169, 110, 0.12);
  --gold-border:   rgba(201, 169, 110, 0.50);
  --forest:        #2D5A3C;
  --forest-pale:   rgba(45, 90, 60, 0.08);
  --text-dark:     #1E1610;
  --text-mid:      #5A3D2B;
  --text-light:    #9A7B60;
  --card-frosted:  rgba(255, 253, 250, 0.91);
  --card-white:    rgba(255, 255, 255, 0.98);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

/* Fixed full-viewport background — guaranteed to cover pixel 0,0 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-color: #D8E0D0;
  background-image:
    linear-gradient(rgba(242, 237, 226, 0.28), rgba(242, 237, 226, 0.28)),
    url('venue.jpg');
  background-size: cover;
  background-position: center top;
  z-index: -1;
}

body {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  min-height: 100vh;
  color: var(--text-dark);
}

/* ─── Hero ─────────────────────────────────── */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
}

.hero-inner {
  background: var(--card-frosted);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--gold-border);
  border-radius: 3px;
  padding-top: 48px;
  padding-bottom: 56px;
  padding-left: 68px;
  padding-right: 68px;
  max-width: 560px;
  width: 100%;
  text-align: center;
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.22),
    0 2px 0 rgba(201, 169, 110, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.20);
  /* Corner accent marks */
  background-image:
    linear-gradient(var(--gold-border), var(--gold-border)),
    linear-gradient(var(--gold-border), var(--gold-border)),
    linear-gradient(var(--gold-border), var(--gold-border)),
    linear-gradient(var(--gold-border), var(--gold-border)),
    linear-gradient(var(--gold-border), var(--gold-border)),
    linear-gradient(var(--gold-border), var(--gold-border)),
    linear-gradient(var(--gold-border), var(--gold-border)),
    linear-gradient(var(--gold-border), var(--gold-border));
  background-size:
    18px 1px, 18px 1px, 18px 1px, 18px 1px,
    1px 18px, 1px 18px, 1px 18px, 1px 18px;
  background-position:
    top 8px left 8px,    top 8px right 8px,
    bottom 8px left 8px, bottom 8px right 8px,
    top 8px left 8px,    top 8px right 8px,
    bottom 8px left 8px, bottom 8px right 8px;
  background-repeat: no-repeat;
  background-color: var(--card-frosted);
}

/* ─── Monogram ──────────────────────────────── */
.monogram {
  width: 100px;
  height: 100px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 2px 12px rgba(160, 120, 64, 0.28));
}

.hero-rule {
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
  border: none;
  margin: 8px 0 26px;
  opacity: 0.55;
}

.hero-eyebrow {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-style: italic;
  font-size: 1.25rem;
  letter-spacing: 0.5px;
  color: var(--text-mid);
  margin-bottom: 16px;
  line-height: 1.6;
}

.hero-names {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(2.5rem, 8vw, 4.4rem);
  color: var(--text-dark);
  line-height: 1.08;
  margin-bottom: 24px;
  letter-spacing: -0.5px;
}

.hero-meta {
  font-family: 'Cormorant SC', Georgia, serif;
  font-weight: 300;
  font-size: 0.92rem;
  color: var(--text-mid);
  line-height: 2.1;
  letter-spacing: 1px;
}

.scroll-hint {
  display: block;
  margin-top: 30px;
  color: var(--gold-dark);
  font-family: 'Cormorant SC', Georgia, serif;
  font-size: 0.68rem;
  letter-spacing: 3.5px;
  opacity: 0.60;
  animation: bob 2.4s ease-in-out infinite;
}

.hero-weekend-link {
  display: block;
  margin-top: 16px;
  font-family: 'Cormorant SC', Georgia, serif;
  font-size: 0.72rem;
  letter-spacing: 2px;
  color: var(--gold-dark);
  text-decoration: none;
  opacity: 0.75;
  transition: opacity 0.2s, color 0.2s;
}

.hero-weekend-link:hover {
  opacity: 1;
  color: var(--gold-deep);
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(5px); }
}

/* ─── Dividers ──────────────────────────────── */
.divider {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 320px;
  margin: 58px auto 50px;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  opacity: 0.50;
}

.divider::before { background: linear-gradient(to right, transparent, var(--gold)); }
.divider::after  { background: linear-gradient(to left,  transparent, var(--gold)); }

.divider-ornament {
  color: var(--gold);
  font-size: 0.65rem;
  letter-spacing: 5px;
  flex-shrink: 0;
}

/* ─── Content Cards ─────────────────────────── */
main { padding: 0 24px 80px; }

.section-card {
  max-width: 600px;
  margin: 0 auto;
  padding: 52px 56px;
  background: var(--card-white);
  border-radius: 3px;
  border: 1px solid var(--gold-border);
  box-shadow:
    0 24px 72px rgba(0, 0, 0, 0.18),
    0 2px 0 rgba(201, 169, 110, 0.15);
  position: relative;
  /* Corner accent marks */
  background-image:
    linear-gradient(var(--gold-border), var(--gold-border)),
    linear-gradient(var(--gold-border), var(--gold-border)),
    linear-gradient(var(--gold-border), var(--gold-border)),
    linear-gradient(var(--gold-border), var(--gold-border)),
    linear-gradient(var(--gold-border), var(--gold-border)),
    linear-gradient(var(--gold-border), var(--gold-border)),
    linear-gradient(var(--gold-border), var(--gold-border)),
    linear-gradient(var(--gold-border), var(--gold-border));
  background-size:
    16px 1px, 16px 1px, 16px 1px, 16px 1px,
    1px 16px, 1px 16px, 1px 16px, 1px 16px;
  background-position:
    top 8px left 8px,    top 8px right 8px,
    bottom 8px left 8px, bottom 8px right 8px,
    top 8px left 8px,    top 8px right 8px,
    bottom 8px left 8px, bottom 8px right 8px;
  background-repeat: no-repeat;
  background-color: var(--card-white);
}

/* Faint monogram watermark in card corner */
.section-card::after {
  content: '';
  position: absolute;
  bottom: 20px;
  right: 24px;
  width: 60px;
  height: 60px;
  background: url('initials-transparent.png') center/contain no-repeat;
  opacity: 0.06;
  pointer-events: none;
}

.section-title {
  font-family: 'Cormorant SC', Georgia, serif;
  font-weight: 400;
  font-size: 1.65rem;
  letter-spacing: 5px;
  text-align: center;
  color: var(--text-dark);
  margin-bottom: 0;
}

.section-title::after {
  content: '';
  display: block;
  width: 44px;
  height: 1px;
  background: var(--gold);
  margin: 13px auto 0;
  opacity: 0.65;
}

.section-subtitle {
  text-align: center;
  font-style: italic;
  font-weight: 300;
  color: var(--text-light);
  margin-top: 16px;
  margin-bottom: 38px;
  font-size: 1rem;
}

/* ─── Form ──────────────────────────────────── */
.form-group { margin-bottom: 24px; }

label {
  display: block;
  font-family: 'Cormorant SC', Georgia, serif;
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 2.5px;
  color: var(--text-mid);
  margin-bottom: 8px;
}

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid rgba(201, 169, 110, 0.38);
  border-radius: 2px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: 1.08rem;
  color: var(--text-dark);
  background: rgba(255, 253, 248, 0.75);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  outline: none;
}

input:focus, textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-pale);
  background: white;
}

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

/* ─── Food Options ──────────────────────────── */
.food-options { display: flex; flex-direction: column; gap: 8px; }

.food-option {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid rgba(201, 169, 110, 0.28);
  border-radius: 2px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  background: rgba(255, 253, 248, 0.45);
}

.food-option:has(input:checked) {
  border-color: var(--gold);
  background: var(--gold-pale);
}

.food-option input[type="radio"] {
  accent-color: var(--gold-dark);
  width: 15px;
  height: 15px;
  margin-top: 4px;
  flex-shrink: 0;
  cursor: pointer;
}

.food-option-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: 1.02rem;
  color: var(--text-dark);
  display: block;
}

.food-option-desc {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-style: italic;
  font-size: 0.9rem;
  color: var(--text-light);
  margin-top: 2px;
  display: block;
}

/* ─── Button ────────────────────────────────── */
.btn-submit {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-dark) 100%);
  color: white;
  border: none;
  border-radius: 2px;
  font-family: 'Cormorant SC', Georgia, serif;
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 5px;
  cursor: pointer;
  margin-top: 12px;
  transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.btn-submit:hover {
  opacity: 0.90;
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(160, 120, 64, 0.38);
}

.btn-submit:active  { transform: translateY(0); }
.btn-submit:disabled { opacity: 0.50; cursor: not-allowed; transform: none; }

.btn-add-person {
  width: 100%;
  padding: 12px;
  background: transparent;
  color: var(--gold-dark);
  border: 1px solid var(--gold-light);
  border-radius: 2px;
  font-family: 'Cormorant SC', Georgia, serif;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 4px;
  cursor: pointer;
  margin-top: 4px;
  margin-bottom: 8px;
  transition: background 0.2s, color 0.2s;
}
.btn-add-person:hover { background: var(--gold-light); color: white; }

.person-block {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  margin-top: 24px;
}
.person-block:first-child { border-top: none; padding-top: 0; margin-top: 0; }

.person-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.person-block-label {
  font-family: 'Cormorant SC', Georgia, serif;
  font-size: 0.82rem;
  letter-spacing: 3px;
  color: var(--text-mid);
}
.btn-remove-person {
  background: none;
  border: none;
  color: var(--text-light);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.82rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.btn-remove-person:hover { color: var(--text-mid); }

/* ─── Messages ──────────────────────────────── */
.form-error {
  display: none;
  background: #FEF2F2;
  color: #A83229;
  border: 1px solid rgba(200, 80, 70, 0.25);
  border-radius: 2px;
  padding: 10px 16px;
  font-size: 1rem;
  margin-bottom: 18px;
  font-style: italic;
}
.form-error.visible { display: block; }

.success-state { display: none; text-align: center; padding: 28px 10px; }
.success-state.visible { display: block; }

.success-monogram {
  width: 84px;
  height: 84px;
  object-fit: contain;
  display: block;
  margin: 0 auto 22px;
}

.success-state h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-style: italic;
  font-size: 2rem;
  color: var(--text-dark);
  margin-bottom: 12px;
}

.success-state p {
  font-style: italic;
  font-weight: 300;
  color: var(--text-mid);
  font-size: 1.05rem;
  line-height: 1.8;
}

.btn-reset {
  display: inline-block;
  margin-top: 24px;
  padding: 12px 24px;
  background: transparent;
  color: var(--gold-dark);
  border: 1px solid rgba(201, 169, 110, 0.5);
  border-radius: 2px;
  font-family: 'Cormorant SC', Georgia, serif;
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 3px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.btn-reset:hover {
  background: rgba(201, 169, 110, 0.08);
  border-color: var(--gold);
  color: var(--gold-dark);
}

/* ─── Travel ────────────────────────────────── */
.travel-list { display: flex; flex-direction: column; }

.travel-item {
  display: flex;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(201, 169, 110, 0.18);
}
.travel-item:last-child  { border-bottom: none; padding-bottom: 0; }
.travel-item:first-child { padding-top: 0; }

.travel-icon { font-size: 1.3rem; flex-shrink: 0; width: 28px; text-align: center; margin-top: 3px; }

.travel-label {
  font-family: 'Cormorant SC', Georgia, serif;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 2.5px;
  color: var(--gold-dark);
  margin-bottom: 6px;
}

.travel-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  color: var(--text-mid);
  line-height: 1.85;
  font-size: 1rem;
}

/* ─── Footer ────────────────────────────────── */
footer {
  text-align: center;
  padding: 32px 24px 48px;
  background: rgba(255, 253, 248, 0.70);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-style: italic;
  color: var(--text-mid);
  font-size: 1.05rem;
  line-height: 1.9;
  border-top: 1px solid var(--gold-border);
}

/* ─── Responsive ────────────────────────────── */
@media (max-width: 600px) {
  .hero-inner    { padding: 40px 28px; }
  .section-card  { padding: 36px 28px; }
  main           { padding: 0 16px 60px; }
  .hero-names    { font-size: 2.5rem; }
}