/* gate.css — pantalla que se muestra al entrar SIN invitación (sin ?i=...).
   Queda solo el fondo beige, los pétalos y este cartel: ni sobre, ni música,
   ni secciones (main.js los descarta antes de cargarlos). */

/* Arranca oculto de verdad: si no, `.gate { display:grid }` le gana al atributo
   `hidden` y el cartel pestañea antes de que el JS decida sobre/cartel. Con esto
   la pantalla queda limpia hasta que main.js decide. */
.gate[hidden] { display: none; }

.gate {
  position: relative;
  z-index: 1;                  /* por delante de los pétalos (z-index 0) */
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--sp-6) var(--sp-5);
}

.gate__card {
  width: min(100%, 26rem);
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-5) var(--sp-7);
  text-align: center;
  background: var(--nude-50);
  border: 1px solid var(--gold-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.gate__monogram { width: 9rem; height: auto; }

.gate__names { font-size: clamp(2rem, 1.5rem + 2.4vw, 2.8rem); }

.gate__text {
  font-family: var(--font-display);
  font-size: var(--fs-floor);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gold-dark);
  line-height: 1.5;
}

.gate__hint {
  font-size: var(--fs-floor);
  font-style: italic;
  color: var(--ink-soft);
  max-width: 26ch;
}