/* Shared by every page: the name + email gate, the blink, locked states. */

html.is-member .guest-only { display: none !important; }
html:not(.is-member) .member-only { display: none !important; }

/* The form */
.gate {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: 16px;
  border: 1px solid transparent;
  text-align: center;
}
.gate-label {
  display: block;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: clamp(0.7rem, 2vw, 0.82rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(229,210,177,0.55);
  margin-bottom: 20px;
}
.gate-form { display: flex; flex-direction: column; gap: 10px; }
.gate-field { border: 1px solid rgba(229,210,177,0.35); display: flex; }
.gate-field input {
  flex: 1; min-width: 0;
  background: transparent; border: none; outline: none; border-radius: 0;
  color: #E5D2B1;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: clamp(1rem, 3vw, 1.15rem);
  padding: 15px 18px;
}
.gate-field input::placeholder { color: rgba(229,210,177,0.4); font-style: italic; }
.gate-field input:focus-visible { outline: 1px solid #E5D2B1; outline-offset: -2px; }
.gate-btn {
  background: #E5D2B1; color: #36101F;
  border: none; border-radius: 0; cursor: pointer;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: clamp(0.68rem, 2vw, 0.78rem);
  font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 0 clamp(18px, 4vw, 30px);
  white-space: nowrap;
}
.gate-btn:hover { opacity: 0.85; }
.gate-btn:disabled { opacity: 0.45; cursor: default; }
.gate-btn:focus-visible { outline: 1px solid #E5D2B1; outline-offset: 3px; }
.gate-btn.block { width: 100%; padding: 16px 18px; }
.gate-calm {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(0.92rem, 2.3vw, 1rem);
  line-height: 1.5;
  color: rgba(229,210,177,0.55);
  margin-top: 12px;
}
.gate-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.gate-msg {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(0.98rem, 2.5vw, 1.1rem);
  color: #E5D2B1;
  margin-top: 14px;
  min-height: 1.4em;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The blink when someone clicks something locked */
@keyframes plotBlink {
  0%, 50%, 100% { border-color: transparent; background-color: rgba(229,210,177,0); }
  25%, 75% { border-color: #E5D2B1; background-color: rgba(229,210,177,0.10); }
}
.gate.blink { animation: plotBlink 1.1s ease-in-out 2; }
@media (prefers-reduced-motion: reduce) { .gate.blink { animation: none; border-color: #E5D2B1; } }

/* Locked look */
.lock-note {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(229,210,177,0.45);
}
.lock-icon { width: 12px; height: 12px; flex: 0 0 auto; }
html.is-member .lock-note, html.is-member .lock-icon { display: none; }

/* Spotify player */
.player-frame { display: block; width: 100%; border: 0; border-radius: 12px; }

/* Privacy and Terms links at the bottom of every page */
.site-legal { display: flex; justify-content: center; gap: 26px; padding: 40px 24px 48px; }
.site-legal a { font-family: 'Hanken Grotesk', sans-serif; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(229,210,177,0.55); text-decoration: none; }
.site-legal a:hover { color: #E5D2B1; }
.site-legal a:focus-visible { outline: 1px solid #E5D2B1; outline-offset: 3px; }