:root {
  --base: #000000;
  --surface: rgba(18, 18, 22, 0.72);
  --surface-solid: #111114;
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.22);
  --text: #f4f4f5;
  --muted: #a1a1aa;
  --faint: #71717a;
  --accent: #e2483d;        /* set per event via JS */
  --ok: #34d399;
  --danger: #f87171;
  --radius: 12px;
}

* { box-sizing: border-box; }
/* the hidden attribute must always win, even over display:flex etc. */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--base);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
a { color: inherit; }

/* Stage / hero background */
.stage {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
}
.stage__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(140% 120% at 50% 120%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 55%),
    var(--base);
  background-size: cover;
  background-position: center;
}
.stage__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,5,6,0.35) 0%, rgba(5,5,6,0.65) 45%, rgba(5,5,6,0.92) 100%);
}

/* When artwork is present: it fills the flexible area above the form, contained
   (never cropped). The art is dark on black, so letterboxing is invisible and the
   form sits cleanly below it. Drop the scrim and the redundant "presents" line. */
/* Artwork (cropped tight to its content) fills the area above the form. */
body.has-art .stage__bg { background: #000; }
body.has-art .stage__scrim { display: none; }
body.has-art .topbar { display: none; }
body.has-art .hero { display: none; }
#artArea {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
body.has-art #artArea { background-image: var(--art-mobile); }
/* subtle grain */
.stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Content column — top bar, flexible middle, compact sign up pinned bottom */
.content {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: 22px 18px calc(22px + env(safe-area-inset-bottom));
}
.topbar { text-align: center; }
.topbar__pre {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.spacer { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; }

/* Fallback hero — only visible until the artwork is dropped in */
.hero { text-align: center; }
.stage__bg.has-image ~ .content .hero { display: none; }
.hero__title {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 13vw, 68px);
  line-height: 0.95;
  letter-spacing: 0.01em;
  margin: 0;
  text-transform: uppercase;
}
.hero__tagline { margin: 12px 0 0; color: var(--muted); font-size: 15px; }

/* Compact sign up at the bottom */
.signup {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  text-align: center;
}
.signup__head {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-weight: 600;
  font-size: 16px;
  margin: 0 0 4px;
}
.signup__dates {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: pre-line;
}

.form { display: flex; flex-direction: column; gap: 9px; }
.form input[type="email"], .form input[type="tel"] {
  width: 100%;
  background: rgba(255,255,255,0.96);
  border: 1px solid transparent;
  border-radius: 8px;
  color: #111;
  font-size: 16px; /* 16px avoids iOS zoom on focus */
  padding: 11px 13px;
  transition: box-shadow 0.15s ease;
}
.form input::placeholder { color: #6b7280; }
.form input:focus {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent);
}
.form input.invalid { box-shadow: 0 0 0 2px var(--danger); }

.check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 11.5px;
  line-height: 1.45;
  text-align: left;
  color: var(--muted);
  cursor: pointer;
  margin: 2px 0;
}
.check input {
  appearance: none; -webkit-appearance: none;
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin-top: 1px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: #0c0c0f;
  cursor: pointer;
  position: relative;
}
.check input:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.check input:checked::after {
  content: ""; position: absolute; left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.check a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }

.btn {
  margin-top: 2px;
  width: 100%;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-weight: 600;
  letter-spacing: 0.12em;
  font-size: 13px;
  padding: 13px 16px;
  cursor: pointer;
  transition: transform 0.05s ease, opacity 0.15s ease;
}
.btn:hover { opacity: 0.9; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.55; cursor: default; }

.form__error {
  margin: 2px 0 0; font-size: 13px; color: var(--danger);
}
.form__preview {
  margin: 2px 0 0; font-size: 12px; color: var(--faint);
}
.fineprint {
  margin: 12px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--faint); text-align: center;
}
.fineprint a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }

/* honeypot */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Turnstile widget — only shown when configured */
.turnstile:empty { display: none; }
.turnstile { min-height: 0; }

/* Success — replaces the whole form */
.done { text-align: center; padding: 22px 4px; }
.done__title {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-weight: 700; font-size: 28px; margin: 0; letter-spacing: 0.01em;
}
.done__msg { color: var(--muted); margin: 10px 0 0; font-size: 15px; }

.form__error { text-align: center; }

@media (min-width: 700px) {
  .content { padding: 26px 22px calc(30px + env(safe-area-inset-bottom)); }
  .signup { max-width: 380px; }
  body.has-art #artArea { background-image: var(--art-desktop); }
}