/* ===== Yellow House email opt-in gate ===== */
@font-face { font-family: 'Picnic Club'; src: url('fonts/ThePicnicClub-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Picnic Club Script'; src: url('fonts/ThePicnicClub-Script.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

html:not(.yh-open) body { overflow: hidden; }
html:not(.yh-open) .dashboard { filter: blur(6px); pointer-events: none; user-select: none; }
html.yh-open .yh-gate { display: none; }

.yh-gate {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
  background:
    radial-gradient(ellipse at 80% 10%, rgba(232,255,0,0.14), transparent 50%),
    radial-gradient(ellipse at 5% 90%, rgba(232,255,0,0.06), transparent 55%),
    rgba(0,0,0,0.86);
  overflow-y: auto;
  -webkit-font-smoothing: antialiased;
}
.yh-gate[hidden] { display: none; }

.yh-gate-card {
  width: 100%; max-width: 520px; margin: auto;
  background: #0a0a0a; color: #fff;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 36px 36px 30px;
  box-shadow: 0 0 0 1px rgba(232,255,0,0.08), 0 0 40px rgba(232,255,0,0.12), 0 40px 120px rgba(0,0,0,0.8);
  font-family: 'Barlow', Helvetica, Arial, sans-serif;
}
.yh-gate-logo { height: 34px; width: auto; display: block; margin-bottom: 22px; }
.yh-gate-tape {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'News Cycle', 'Barlow', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase; color: #e8ff00;
  border: 1px solid rgba(232,255,0,0.35); border-radius: 999px; padding: 7px 14px; margin-bottom: 18px;
}
.yh-gate-tape::before { content: ""; width: 6px; height: 6px; background: #e8ff00; border-radius: 50%; }
.yh-gate-title { font-family: 'Picnic Club', 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 42px; line-height: 0.95; margin: 0 0 6px; color: #fff; }
.yh-gate-title .script { font-family: 'Picnic Club Script', 'Playfair Display', Georgia, serif; font-weight: 400; display: block; color: #e8ff00; font-size: 1.05em; line-height: 1.05; margin-top: -0.05em; }
.yh-gate-sub { font-size: 15.5px; line-height: 1.6; color: rgba(255,255,255,0.62); margin: 14px 0 24px; }
.yh-gate-sub strong { color: #fff; font-weight: 600; }

.yh-gate-form { display: grid; gap: 12px; }
.yh-gate-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.yh-gate-form label { display: grid; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.yh-gate-form input[type="text"], .yh-gate-form input[type="email"] {
  width: 100%; box-sizing: border-box; font: 500 16px/1.2 'Barlow', sans-serif; color: #fff;
  background: #121212; border: 1px solid rgba(255,255,255,0.14); border-radius: 4px; padding: 13px 14px; outline: none;
  transition: border-color 0.2s;
}
.yh-gate-form input:focus { border-color: #e8ff00; }
.yh-gate-form input[aria-invalid="true"] { border-color: #ff6b6b; }
.yh-gate-form input::placeholder { color: rgba(255,255,255,0.28); }
.yh-gate-form .yh-gate-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.62); text-transform: none; letter-spacing: 0; font-weight: 400; margin-top: 4px; }
.yh-gate-consent input { margin: 3px 0 0; accent-color: #e8ff00; flex: none; }
.yh-gate-btn {
  margin-top: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  background: #e8ff00; color: #000; border: none; border-radius: 4px; cursor: pointer;
  font-family: 'Barlow', sans-serif; font-weight: 800; font-size: 14px; letter-spacing: 2.2px; text-transform: uppercase;
  padding: 17px 28px; transition: gap 0.3s ease, transform 0.2s ease, opacity 0.2s;
}
.yh-gate-btn::after { content: "→"; font-size: 16px; }
.yh-gate-btn:hover { gap: 18px; transform: translateY(-1px); }
.yh-gate-btn:disabled { opacity: 0.6; cursor: default; }
.yh-gate-msg { min-height: 18px; font-size: 13px; color: #ff6b6b; margin: 0; }
.yh-gate-foot { margin: 18px 0 0; font-size: 12px; line-height: 1.6; color: rgba(255,255,255,0.38); }
.yh-gate-foot a { color: rgba(255,255,255,0.6); }
.yh-gate-hp { position: absolute; left: -9999px; }

@media (max-width: 560px) {
  .yh-gate { align-items: flex-start; padding: 16px 12px 32px; }
  .yh-gate-card { padding: 28px 22px 24px; }
  .yh-gate-title { font-size: 34px; }
  .yh-gate-row { grid-template-columns: 1fr; }
}