: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); }
/* Full-bleed cover layout (config artCover): the artwork covers the whole
   viewport behind everything; the form floats over it in a dark card above a
   bottom gradient. Mobile: card at the bottom. Desktop: card to the right,
   clear of the centred poster text. */
body.art-cover .stage__bg { background-size: cover; background-position: center; }
body.has-art.art-cover .stage__scrim {
  display: block;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.35) 65%, rgba(0,0,0,0.60) 100%);
}
body.art-cover .signup {
  background: rgba(9, 9, 11, 0.90);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  padding: 14px 14px 12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body.art-cover .form { gap: 8px; }

/* Art-cover MOBILE (paired with heroScroll): the untouched poster is the whole
   first screen, edge to edge, with a floating Sign up CTA over its foot; the
   form is the screen below (Mexico's slide-down pattern). Desktop instead
   shows the form beside the art with no CTA. */
@media (max-width: 699.98px) {
  body.art-cover.hero-scroll .content { padding: 0; }
  body.art-cover.hero-scroll #heroWrap { position: relative; }
  body.art-cover.hero-scroll .cta {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(26px + env(safe-area-inset-bottom));
    margin: 0;
    white-space: nowrap;
  }
  body.art-cover.hero-scroll .signup {
    margin: 20px auto calc(26px + env(safe-area-inset-bottom));
    width: min(400px, calc(100% - 32px));
  }
}
@media (min-width: 700px) {
  body.art-cover.hero-scroll #heroWrap { display: contents; }
  body.art-cover.hero-scroll .cta { display: none !important; }
}

/* 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;
}

/* Dark form card — used when the page background is a bright artwork colour
   (e.g. Mexico's green poster) so the form keeps its dark, readable styling. */
.has-card .signup {
  background: #0a0a0c;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 20px 16px calc(18px + env(safe-area-inset-bottom));
}

/* Hero-scroll layout (e.g. Mexico): the artwork fills the first screen, the CTA sits
   in its OWN band below the artwork (never over it), and the form is on the next
   screen. #heroWrap is transparent to layout for normal events (display:contents). */
#heroWrap { display: contents; }
body.hero-scroll #heroWrap { display: flex; flex-direction: column; align-items: center; height: 100svh; }
body.hero-scroll #artArea { flex: 1 1 auto; min-height: 0; align-self: stretch; width: 100%; }
body.hero-scroll .cta { margin: 12px 0 32px; }
body.hero-scroll .signup { scroll-margin-top: 14px; padding-top: 26px; padding-bottom: 44px; }

.cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: none;
  border-radius: 10px;
  background: #0a0a0c;
  color: #fff;
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-size: 14px;
  padding: 15px 30px;
  cursor: pointer;
  box-shadow: 0 8px 26px rgba(0,0,0,0.30);
  transition: transform 0.05s ease, opacity 0.15s ease;
}
.cta:hover { opacity: 0.92; }
.cta:active { transform: translateY(1px); }
.cta__arrow { font-size: 15px; line-height: 1; }

.form { display: flex; flex-direction: column; gap: 9px; }
#extraFields { display: flex; flex-direction: column; gap: 9px; }
#extraFields:empty { display: none; }
.form input[type="email"], .form input[type="tel"], .form input[type="text"] {
  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); }
  /* cover layout: form to the right, vertically centred, poster text stays clear */
  body.art-cover .content { flex-direction: row; align-items: center; justify-content: flex-end; }
  body.art-cover .signup { margin: 0 4vw 0 0; width: 380px; padding: 20px 18px 16px; }
}