/* ============================================================
   Hedex presents Nu Era USA Tour - hedexna.com
   Tour sign-up, Sep 2026 - Jan 2027. Controller: Sell Out Events Ltd.

   DIRECTION
   The poster is a CRT on-screen menu: NTSC / PAL / ON / OFF chips,
   "SELECT", "SET: ENTER", a date list set in a VCR display face,
   everything burnt orange on tube black. So the sign-up panel is the
   menu the poster promises. The shows are menu rows you move through
   and pick; a picked row flips to inverse video, exactly like the
   poster's "ON" chip. That picker is the one loud element. Everything
   around it stays quiet.

   COLOUR - literal pixels sampled from the supplied poster:
     #140F0F  tube black        (dominant #101010 / #201010 cells)
     #3C231D  rust ground       (lower background)
     #D0C3B5  phosphor cream    (the poster type, top 1% luminance)
     #E05A36  ember             (the iris)
   Ember on tube measures 5.1:1 and tube on ember the same, so it can
   carry the CTA and the picked-row cursor. Cream on tube is 10.9:1.

   TYPE - VT323 (OFL) is a VCR/terminal face close to the poster's date
   list and carries the menu chrome: titles, show rows, the button.
   Archivo carries reading copy, because a pixel face at 15px is hard
   work for anything longer than a line.
   ============================================================ */

@font-face {
  font-family: "VT323";
  src: url("/assets/fonts/VT323.woff2?v=20260929-1") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/Archivo-var.woff2?v=20260929-1") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --tube:       #140F0F;   /* page ground */
  --tube-2:     #1C1514;   /* panel base */
  --field:      #231A18;   /* form field - OPAQUE on purpose, see autofill note */
  --rust:       #3C231D;
  --cream:      #D0C3B5;   /* phosphor type */
  --cream-dim:  #A39486;   /* secondary copy, 6.4:1 on tube-2 */
  --ember:      #E05A36;   /* accent + CTA */
  --ember-hi:   #EE6C47;
  --line:       rgba(208,195,181,.18);
  --line-2:     rgba(208,195,181,.34);
  --danger:     #F08A6C;

  --display: "VT323", "Courier New", monospace;
  --body:    "Archivo", "Helvetica Neue", Arial, sans-serif;

  --maxw: 1180px;
  --panel-w: 470px;
}

*, *::before, *::after { box-sizing: border-box; }

/* `hidden` is only display:none in the UA stylesheet, so ANY author rule that
   sets display beats it. Keep this ABOVE everything that sets display. */
[hidden] { display: none !important; }

/* Ground colour lives on html, NOT body: an opaque body paints over .bg. */
html {
  -webkit-text-size-adjust: 100%;
  background: var(--tube);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  font-family: var(--body);
  color: var(--cream-dim);
  background: transparent;
  display: flex;
  flex-direction: column;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- ground: the poster blown up, blurred and sunk, raster on top.
   Chosen by aspect ratio, not width alone, so squarish windows never fall
   between the phone and desktop plates. The head preloads mirror these. */
.bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-color: var(--tube);
  background-image: url("/assets/images/bg-mobile-sm.webp?v=20260929-1");
  background-position: center;
  background-size: cover;
}
@media (max-aspect-ratio: 7/10) and (min-width: 501px) {
  .bg { background-image: url("/assets/images/bg-mobile.webp?v=20260929-1"); }
}
@media (min-aspect-ratio: 7/10) {
  .bg { background-image: url("/assets/images/bg-desktop-sm.webp?v=20260929-1"); }
}
@media (min-aspect-ratio: 7/10) and (min-width: 1501px) {
  .bg { background-image: url("/assets/images/bg-desktop.webp?v=20260929-1"); }
}

/* ============================================================
   STAGE
   ============================================================ */
.stage {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;                 /* auto at EVERY breakpoint - never plain 0 */
  padding: clamp(18px, 4vw, 48px) clamp(16px, 4vw, 40px);
  display: flex;
  align-items: center;
}
.stage__inner {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 4vw, 56px);
  align-items: center;
}

/* ---------- the poster ---------- */
.bill { justify-self: center; width: 100%; max-width: 480px; }
.bill__h1 { margin: 0; line-height: 0; }
.bill__poster {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  box-shadow:
    0 0 0 1px rgba(208,195,181,.12),
    0 40px 90px -36px rgba(0,0,0,.95),
    0 0 120px -30px rgba(224,90,54,.35);   /* the poster's own glow, spilling */
}

/* ============================================================
   SIGNUP PANEL
   ============================================================ */
.signup { justify-self: center; width: 100%; max-width: var(--panel-w); }
.panel {
  width: 100%;
  position: relative;
  isolation: isolate;             /* keeps the country dropdown above the raster */
  background: rgba(28,21,20,.94);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 34px 80px -34px rgba(0,0,0,.95);
  overflow: visible;
}
/* CRT raster over the panel: behind the content (z-index 0 vs 1), and never
   catching a click, so it cannot cover the flag dropdown (gotcha 5). */
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: repeating-linear-gradient(180deg,
    rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.16) 3px);
}
.panel__inner { position: relative; z-index: 1; padding: clamp(22px, 3vw, 32px); }

/* --- state machine (app.js flips data-form-state on .panel) --- */
.panel__state { display: none; }
.panel[data-form-state="idle"]    .panel__idle    { display: block; }
.panel[data-form-state="otp"]     .panel__otp     { display: block; }
.panel[data-form-state="success"] .panel__success { display: block; }

/* ============================================================
   PANEL COPY
   ============================================================ */
.panel__title {
  margin: 0 0 10px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.3rem, 6vw, 2.9rem);
  line-height: .9;
  text-transform: uppercase;
  color: var(--cream);
  text-wrap: balance;
}
/* House pattern: the second line carries the accent. <em> keeps the emphasis
   in the markup; reset from italic because the face has none. */
.panel__title em { font-style: normal; color: var(--ember); }
.panel__lede {
  margin: 0 0 10px;
  font-size: 15px;
  color: var(--cream-dim);
  max-width: 46ch;
}
.panel__lede--last { margin-bottom: 18px; }
.panel__lede strong { color: var(--cream); font-weight: 600; }
.panel__success-note { margin: 0 0 12px; color: var(--ember-hi); font-size: 14.5px; }

/* ============================================================
   SHOWS - the signature. A menu of rows; picking one flips it to
   inverse video and brings up the ember cursor.
   ============================================================ */
.shows {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  min-width: 0;                   /* fieldsets default to min-content width */
}
/* A <legend> ignores normal block flow; float + width makes it a real block. */
.shows__legend {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 21px;
  line-height: 1;
  color: var(--cream);
  text-transform: uppercase;
}
.shows__list {
  clear: both;
  border-top: 1px solid var(--line);
}
.show {
  position: relative;
  display: grid;
  grid-template-columns: 4.1em minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 10px;
  padding: 4px 10px 3px 24px;
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  font-size: 20px;
  line-height: 1.15;
  color: var(--cream);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .12s steps(2), color .12s steps(2);
}
/* The checkbox stays in the accessibility tree and in tab order: it is only
   visually clipped, never display:none, so keyboard and screen readers work. */
.show input {
  position: absolute;
  width: 1px; height: 1px;
  margin: 0; padding: 0;
  opacity: 0;
  pointer-events: none;
}
.show__date  { white-space: nowrap; text-transform: uppercase; }   /* CRM label is "10 Oct"; the poster sets 10 OCT. Display only - the posted value is untouched. */
.show__city  { text-transform: uppercase; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.show__venue {
  font-family: var(--body);
  font-size: 12px;
  color: var(--cream-dim);
  white-space: nowrap;
  max-width: 11.5em;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* the cursor: a CSS triangle (VT323 has no glyph for it) */
.show::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 50%;
  margin-top: -5px;
  border-style: solid;
  border-width: 5px 0 5px 7px;
  border-color: transparent transparent transparent var(--ember);
  opacity: 0;
}
.show:hover { background: rgba(208,195,181,.07); }
.show:hover::before { opacity: .55; }
/* picked = inverse video */
.show:has(input:checked) { background: var(--cream); color: var(--tube); }
.show:has(input:checked) .show__venue { color: #5A4A40; }
.show:has(input:checked)::before { opacity: 1; border-left-color: var(--ember); }
.show:has(input:focus-visible) { outline: 2px solid var(--ember); outline-offset: -2px; }
/* Fallback for browsers without :has() - app.js-free, the checkbox itself
   is still usable there because it is focusable; just less decorated. */
@supports not selector(:has(*)) {
  .show input { position: static; width: auto; height: auto; opacity: 1; pointer-events: auto; accent-color: var(--ember); }
  .show { grid-template-columns: auto 4.1em minmax(0, 1fr) auto; }
}
.shows.is-invalid .shows__list { border-top-color: var(--danger); }

/* ============================================================
   FORM
   ============================================================ */
.form__row { margin: 0 0 12px; }
/* labels stay for screen readers; placeholders carry the meaning visually */
.form__label {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.form__input {
  width: 100%;
  padding: 13px 14px;
  font-family: var(--body);
  font-size: 16px;                /* 16px minimum or iOS zooms the page on focus */
  color: var(--cream);
  background: var(--field);       /* OPAQUE - see the autofill rule below */
  border: 1px solid var(--line-2);
  border-radius: 3px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.form__input::placeholder { color: #85776B; }
.form__input:focus {
  outline: none;
  border-color: var(--ember);
  box-shadow: 0 0 0 3px rgba(224,90,54,.2);
}
.form__input--otp {
  font-family: var(--display);
  font-size: 30px;
  letter-spacing: .42em;
  text-align: center;
  text-indent: .42em;
}

/* Chrome paints autofilled inputs pale lavender and IGNORES background on
   :-webkit-autofill - a huge inset box-shadow is the only reliable override.
   The field is opaque, so its flattened colour is simply --field. Keep it
   opaque, or this value must be recomputed by compositing the stack. */
.form__input:-webkit-autofill,
.form__input:-webkit-autofill:hover,
.form__input:-webkit-autofill:focus,
.form__input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--field) inset !important;
          box-shadow: 0 0 0 1000px var(--field) inset !important;
  -webkit-text-fill-color: var(--cream) !important;
  caret-color: var(--cream);
  transition: background-color 9999s ease-in-out 0s;
}

.form__error { margin: 7px 0 0; font-size: 13px; color: var(--danger); }
.form__error--global { margin-top: 14px; }

/* Honeypot. display:none ONLY - off-screen positioning stays an autofill
   target in Chrome/Edge, which fills it and silently blocks real signups. */
.hp-row { display: none !important; }

.form__row--check { margin: 16px 0 18px; }
.form__check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--cream-dim);
  cursor: pointer;
}
.form__check input {
  flex: 0 0 auto;
  width: 17px; height: 17px;
  margin: 1px 0 0;
  accent-color: var(--ember);
  cursor: pointer;
}
.form__check a { color: var(--cream); text-decoration: underline; text-underline-offset: 2px; }
.form__check a:hover { color: var(--ember-hi); }

.form__resend { margin: 14px 0 0; font-size: 13px; color: var(--cream-dim); text-align: center; }
.form__resend-btn {
  font: inherit;
  color: var(--ember-hi);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.form__resend-btn:disabled { color: var(--cream-dim); cursor: default; text-decoration: none; }

/* ---------- button ---------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 11px 18px 10px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 27px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  transition: transform .12s ease, background-color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: default; }
/* Tube-black type on ember: 5.1:1. Cream would be 2.1:1. */
.btn--primary { color: var(--tube); background: var(--ember); }
.btn--primary:hover:not(:disabled) { background: var(--ember-hi); }

/* ============================================================
   intl-tel-input v25
   ============================================================ */
.iti { width: 100%; display: block; }
/* app.js re-measures and sets padding-left inline; sane default before it
   runs. Anything >= 80px breaks 320-390px viewports. */
.iti input.form__input { padding-left: calc(52px + 0.7rem); }
.iti__country-container { z-index: 3; }
.iti--inline-dropdown .iti__dropdown-content { z-index: 50; }
/* Until the vendor stylesheet loads the list + search box flash open. */
.iti__dropdown-content.iti__hide { display: none !important; }
.iti__dropdown-content {
  background: var(--tube-2);
  border: 1px solid var(--line-2);
  border-radius: 3px;
  box-shadow: 0 26px 56px -18px rgba(0,0,0,.95);
  overflow: hidden;
}
.iti__search-input {
  /* Keep the vendor's horizontal padding reservation (icon left, clear
     button right). A padding shorthand that drops them puts the magnifier on
     top of the placeholder. */
  padding: 10px 30px 10px 32px;
  width: 100%;
  font-family: var(--body);
  font-size: 14px;
  color: var(--cream);
  background: var(--field);
  border: 0;
  border-bottom: 1px solid var(--line-2);
}
.iti__search-input::placeholder { color: #85776B; }
.iti__search-input:focus { outline: none; background: #2A201D; }
.iti__country-list { background: var(--tube-2); max-height: 240px; }
.iti__country { padding: 9px 12px; font-family: var(--body); font-size: 14px; color: var(--cream); }
.iti__country:hover,
.iti__country.iti__highlight { background: rgba(224,90,54,.18); }
.iti__dial-code { color: var(--cream-dim); }
.iti__country-name { color: var(--cream); }
.iti__selected-country { border-radius: 3px 0 0 3px; }
.iti__selected-country:hover,
.iti__selected-country-primary:hover { background: rgba(208,195,181,.08); }
.iti__selected-dial-code { color: var(--cream); font-family: var(--body); font-size: 15px; }
.iti__arrow { border-top-color: var(--cream-dim); }
.iti__arrow--up { border-bottom-color: var(--cream-dim); }

/* ============================================================
   FOOTER - fleet band, credit in a pill (basslayerz pattern)
   ============================================================ */
.foot {
  flex-shrink: 0;
  width: 100%;
  margin: 0;
  padding: 16px clamp(16px, 4vw, 40px) 22px;
  background: rgba(20,15,15,.72);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.foot__left { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.foot__legal { margin: 0; font-size: 12px; color: var(--cream-dim); letter-spacing: .02em; }
.foot__legal a { color: var(--cream-dim); text-decoration: none; }
.foot__legal a:hover { color: var(--ember-hi); }
.site-built { margin: 0; }
.site-built a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--cream-dim);
  text-decoration: none;
  padding: 5px 11px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
}
.site-built a:hover { border-color: var(--ember); color: var(--cream); }
.site-built img { display: block; opacity: .9; }

/* ============================================================
   RESPONSIVE - aspect-ratio thresholds, not width alone
   ============================================================ */

/* two column: poster left, panel right. The panel track is DEFINITE, never
   auto, so the fr track has something to distribute from. */
@media (min-width: 900px) and (min-aspect-ratio: 7/10) {
  .stage__inner {
    grid-template-columns: minmax(0, 1fr) var(--panel-w);
    gap: clamp(32px, 4.5vw, 64px);
    align-items: center;
  }
  .stage { padding-top: clamp(18px, 3vw, 32px); padding-bottom: clamp(18px, 3vw, 32px); }
  .bill { justify-self: end; max-width: 560px; }
  /* Height-capped so the 4:5 sheet never sets the page height. max-width is
     load-bearing: without it a tall window lets the poster run under the
     panel (gotcha 38). */
  .bill__poster { width: auto; max-width: 100%; max-height: calc(100svh - 150px); margin-left: auto; }
  .signup { justify-self: start; }
}

@media (max-width: 899px) {
  .foot { justify-content: center; text-align: center; }
  .foot__left { justify-content: center; }
}

/* Phones: stack the footer rather than relying on the row wrapping. */
@media (max-width: 480px) {
  .foot { flex-direction: column; align-items: center; gap: 10px; padding-bottom: 20px; }
  .foot__left { flex-direction: column; align-items: center; gap: 10px; }
  /* hold the poster back so the picker starts near the fold */
  .bill { max-width: 78vw; }
  .stage__inner { gap: 20px; }
  .panel__inner { padding: 20px 16px; }
  .show { font-size: 19px; padding-left: 22px; padding-right: 8px; column-gap: 8px; grid-template-columns: 3.9em minmax(0, 1fr) auto; }
  .show::before { left: 8px; }
  .show__venue { max-width: 8.5em; }
}
@media (max-width: 360px) {
  .show__venue { display: none; }
}

/* --- landscape phones are a first-class layout ---
   844x390, 932x430, 667x375: desktop-ish width, almost no height. Poster
   height-capped in a narrow column, tighter panel. AFTER the desktop block
   so it wins at equal specificity. */
@media (min-width: 640px) and (min-aspect-ratio: 7/10) and (max-height: 520px) {
  .stage { padding: 12px clamp(12px, 3vw, 24px); align-items: flex-start; }
  .stage__inner {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
    align-items: start;
  }
  .bill { justify-self: center; max-width: none; min-height: 0; position: sticky; top: 12px; }
  .bill__poster { width: auto; max-width: 100%; max-height: calc(100svh - 24px); margin: 0; }
  .signup { justify-self: stretch; max-width: none; min-height: 0; }
  .panel__inner { padding: 14px 16px; }
  .panel__title { font-size: 1.9rem; margin-bottom: 6px; }
  .panel__lede { font-size: 13px; margin-bottom: 6px; }
  .panel__lede--last { margin-bottom: 10px; }
  .shows { margin-bottom: 12px; }
  .shows__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .show { font-size: 18px; padding-top: 3px; padding-bottom: 2px; }
  .show__venue { display: none; }
  .form__row { margin-bottom: 9px; }
  .form__input { padding: 10px 13px; }
  .form__row--check { margin: 10px 0 12px; }
  .btn { padding: 9px 16px 8px; font-size: 24px; }
  .iti__country-list { max-height: 150px; }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}