:root {
  --background: #3a3160;
  --foreground: #2f2a24;
  --accent: #065f46;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--background);
  background-image:
    linear-gradient(180deg, rgba(20, 30, 45, 0.15) 0%, rgba(20, 30, 45, 0.05) 40%, rgba(10, 15, 25, 0.35) 100%),
    url("images/glacier.jpg");
  background-size: cover, cover;
  background-position: center, center 55%;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
  color: var(--foreground);
  font-family: 'Inter', sans-serif;
  text-align: center;
  padding: 24px;
}

.card {
  max-width: 520px;
  width: 100%;
  background: rgba(250, 247, 242, 0.88);
  border-radius: 16px;
  padding: 40px 32px;
  box-shadow: 0 12px 40px rgba(20, 12, 40, 0.25);
  backdrop-filter: blur(2px);
}

/* Password gate: fail-closed by default (hidden real content, visible
   gate) so there's no flash of the real page before the unlock check
   in auth.js runs. body.unlocked is added once the right password has
   been entered (or was already entered earlier this browser session). */
#site-content {
  display: none;
}

body.unlocked #site-content {
  display: block;
}

body.unlocked #gate {
  display: none;
}

/* Short/landscape viewports (e.g. a phone turned sideways): the card is
   often taller than the screen. Top-align instead of centering so the
   overflow scrolls naturally instead of clipping off-screen, and trim
   the padding/spacing so there's less to scroll through. */
@media (max-height: 500px) {
  body {
    align-items: flex-start;
    background-attachment: scroll, scroll;
    padding: 16px;
  }

  .card {
    margin: 8px auto;
    padding: 24px 20px;
  }

  h1 {
    font-size: clamp(2rem, 6vw, 3rem);
  }

  .tagline {
    margin-top: 16px;
  }

  .divider {
    margin: 20px auto;
  }

  .video-wrap {
    margin-top: 20px;
  }
}

/* iOS Safari handles `background-attachment: fixed` poorly on any touch
   device; use normal scrolling backgrounds there regardless of height. */
@media (hover: none) and (pointer: coarse) {
  body {
    background-attachment: scroll, scroll;
  }
}

.eyebrow {
  margin: 0 0 12px;
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
}

h1 {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: clamp(2.75rem, 8vw, 4.5rem);
  line-height: 1.1;
}

.tagline {
  margin: 24px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: #57534e;
}

.divider {
  width: 48px;
  height: 1px;
  background: var(--accent);
  opacity: 0.4;
  margin: 32px auto;
}

.note {
  margin: 16px 0 0;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--accent);
  background: rgba(6, 95, 70, 0.08);
  border-radius: 8px;
}

.video-wrap {
  margin-top: 28px;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  box-shadow: 0 8px 24px rgba(6, 95, 70, 0.12);
}

.video-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* RSVP early callout block on the home page */
.rsvp-callout {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid rgba(6, 95, 70, 0.2);
}

.button {
  display: inline-block;
  margin-top: 16px;
  padding: 12px 32px;
  border-radius: 999px;
  background: var(--accent);
  color: #f4faf9;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.button:hover {
  background: #054a37;
}

.back-link {
  display: inline-block;
  margin-bottom: 20px;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: #57534e;
  text-decoration: none;
}

.back-link:hover {
  color: var(--accent);
}

/* Password gate: center the field under the welcome text instead of the
   left-aligned layout the full RSVP form uses. */
#gate .field {
  text-align: center;
}

#gate .field input {
  max-width: 240px;
  margin: 0 auto;
}

/* RSVP form */
.field {
  text-align: left;
  margin-top: 20px;
}

.field label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: #44403c;
  margin-bottom: 6px;
}

.field .hint {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.4;
  color: #78716c;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field textarea {
  width: 100%;
  padding: 10px 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--foreground);
  background: #ffffff;
  border: 1px solid #d6d3d1;
  border-radius: 8px;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.field textarea {
  resize: vertical;
  min-height: 90px;
}

.rsvp-choices {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.rsvp-choices input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.rsvp-choices label {
  flex: 1;
  margin: 0;
  padding: 12px 0;
  text-align: center;
  border: 1px solid #d6d3d1;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.rsvp-choices input[type="radio"]:checked + label {
  background: var(--accent);
  border-color: var(--accent);
  color: #f4faf9;
}

.submit-button {
  width: 100%;
  margin-top: 28px;
  padding: 14px;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: #f4faf9;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.submit-button:hover {
  background: #054a37;
}

.confirmation {
  margin-top: 20px;
  padding: 16px;
  border-radius: 8px;
  background: rgba(6, 95, 70, 0.1);
  color: var(--accent);
  font-size: 15px;
  display: none;
}

.confirmation.visible {
  display: block;
}

.confirmation.error {
  background: rgba(185, 28, 28, 0.1);
  color: #b91c1c;
}

form.submitted .field,
form.submitted .rsvp-choices,
form.submitted .submit-button {
  display: none;
}