html:not([data-guest-access="granted"]) body > :not(.guest-gate) {
  visibility: hidden;
}

[data-guest-content][hidden] {
  display: none !important;
}

.guest-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  overflow-y: auto;
  padding: 2rem 1.25rem;
  color: #1a422d;
  background:
    radial-gradient(circle at 80% 15%, rgba(200, 223, 216, .7), transparent 35%),
    linear-gradient(145deg, #f6f3f2, #f7e1c9);
  font-family: "Figtree", sans-serif;
}

.guest-gate__panel {
  width: min(100%, 34rem);
  padding: clamp(2.25rem, 7vw, 4.5rem);
  text-align: center;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 24px 80px rgba(26, 66, 45, .09);
  backdrop-filter: blur(18px);
}

.guest-gate__monogram,
.guest-gate h1 {
  font-family: "Playfair Display", serif;
}

.guest-gate__monogram {
  margin: 0 0 2.5rem;
  font-size: 1.5rem;
  font-style: italic;
}

.guest-gate__eyebrow,
.guest-gate label {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.guest-gate__eyebrow { margin: 0 0 1rem; color: #4f7a6d; }
.guest-gate h1 { margin: 0; font-size: clamp(2.4rem, 8vw, 4rem); font-weight: 400; line-height: 1.05; }
.guest-gate__intro { margin: 1.5rem auto 2.5rem; max-width: 25rem; color: #3e4840; line-height: 1.65; }
.guest-gate__form { text-align: left; }
.guest-gate label { display: block; margin-bottom: .65rem; }
.guest-gate input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(26, 66, 45, .25);
  border-radius: 0;
  padding: .85rem .15rem;
  color: #1a1c1a;
  background: transparent;
  font: inherit;
  outline: none;
}
.guest-gate input:focus { border-bottom-color: #1a422d; }
.guest-gate input[aria-invalid="true"] { border-bottom-color: #ba1a1a; }
.guest-gate__error { min-height: 2.7rem; margin: .75rem 0; color: #93000a; font-size: .82rem; line-height: 1.4; }
.guest-gate button {
  width: 100%;
  border: 0;
  padding: 1rem 1.5rem;
  color: #fff;
  background: linear-gradient(135deg, #1a422d, #2e5c40);
  font: 600 .7rem "Figtree", sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
}
.guest-gate button:hover { background: #2e5c40; }
.guest-gate__help { margin: 1.5rem 0 0; color: #3e4840; font-size: .78rem; }

@media (prefers-reduced-motion: reduce) {
  .guest-gate *, .guest-gate *::before, .guest-gate *::after { scroll-behavior: auto !important; transition: none !important; }
}