/* css/gate.css — first-visit email gate (owner fix, 2026-10-02).
 * Shown purely by CSS, keyed off html.gate-pending — set synchronously by
 * the inline script in the page head (bin/build's HEAD_EXTRA) before paint,
 * so a returning visitor with a stored email never sees it flash. No JS =
 * no gate-pending class = overlay never shows (graceful degrade matches
 * the rest of this JS-heavy kit).
 */
#gate-overlay { display: none; }
html.gate-pending #gate-overlay {
  display: flex; align-items: center; justify-content: center;
  position: fixed; inset: 0; z-index: 9000; padding: 20px;
  background: var(--bg-base);
}
html.gate-pending body { overflow: hidden; }

.gate-card {
  width: 100%; max-width: 440px; padding: clamp(24px, 4vw, 40px);
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  font-family: var(--font-body);
}
.gate-card h2 {
  font-family: var(--font-facet); font-size: clamp(1.3rem, 1.1rem + 1vw, 1.6rem);
  margin: 6px 0 10px; color: var(--fg-base);
}
.gate-card > p { color: var(--fg-muted); font-size: .92rem; line-height: 1.55; margin: 0 0 18px; }

#gate-form { display: flex; flex-direction: column; gap: 10px; }
#gate-form label { font-family: var(--font-facet); font-size: .78rem; font-weight: 600; color: var(--fg-base); }
#gate-form input[type="email"] {
  font-family: var(--font-body); font-size: .95rem; padding: 11px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm, 8px);
  background: #fff; color: var(--fg-base);
}
#gate-form input[type="email"]:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }
.gate-consent { display: flex; align-items: flex-start; gap: 8px; font-size: .84rem; font-weight: 400; cursor: pointer; }
.gate-consent input { margin-top: 3px; }
.gate-note { font-size: .74rem; color: var(--fg-subtle); line-height: 1.5; margin: 0; }
.gate-error { color: var(--accent-deep, #b3261e); font-size: .82rem; margin: 0; }
.gate-error[hidden] { display: none; }
#gate-submit { align-self: center; margin-top: 4px; }