/* ============================================================
   ERIC PRYDZ - GASWRX BIRMINGHAM - venue announce
   ------------------------------------------------------------
   Standalone sheet for venue.html. style.css is left untouched
   so the live index.html keeps rendering exactly as signed off
   until the cutover swaps the two HTML files.

   Direction: the announce artwork is a duotone laser room, red
   and cyan. This is NOT the MK announce recoloured - MK is a
   green room and the two sites deliberately do not share a
   palette. Its background is a near-true black (#000009), so
   the page background is #000000 and the poster has no visible
   edge. Both accents are sampled from the client's own layers.

   Restraint: the artwork carries the colour. The interface
   spends it in three places only - the signature beam, the
   venue line, and the submit button - and everything else stays
   on the monochrome scale the pair was signed off on.

   Signature: .brand__beam. On the MK site it is a single green
   laser; here it runs red into cyan, which is the wordmark's
   own gradient restated as one hairline. Still the only moving
   element on the page.

   Both sites in this pair use the same orientation (client,
   2026-08-01): sign-up on the left, artwork on the right.
   ============================================================ */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/Archivo-var.woff2?v=20260801-9") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Martian Mono";
  src: url("/assets/fonts/martian-mono-latin-400.woff2?v=20260801-9") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Martian Mono";
  src: url("/assets/fonts/martian-mono-latin-700.woff2?v=20260801-9") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --void:  #000000;               /* matches the artwork's own black exactly */
  --ash:   #0B0B0C;
  --smoke: #5F5F5F;               /* decorative type only - 3.2:1, fails AA as body text */
  --haze:  #B3B3B3;               /* 9.7:1 on these surfaces - body, legal and form text */
  --light: #FFFFFF;
  /* Sampled, not invented: --ember is the exact red of the date on the
     client's lockup, --ice is the cyan of the promoter mark beside it.
     --ember was the artwork's #FE5932 until the client asked for a truer red
     (2026-08-04); #EF6F6C is theirs. It measures 4.6:1 on black and --ice
     measures 17:1. 4.6:1 clears WCAG AA for normal text, but only just - so if
     this red is ever darkened further, re-check the submit button and the date
     line, which are the two places it carries small text. */
  --ember: #EF6F6C;
  --ice:   #B5F2F6;
  --line:      rgba(255,255,255,.16);
  --line-input: rgba(181,242,246,.40);   /* form fields need to read as fields */
  --line-soft: rgba(255,255,255,.08);
  --font:      "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-disp: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

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

/* html carries the base colour; body stays transparent so it can never
   paint over the z-index:-1 background layer (ab-birmingham launch bug) */
html { background: var(--void); }
body {
  margin: 0;
  background: transparent;
  color: var(--haze);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The background layer only ever serves LANDSCAPE-ish viewports now. Every
   portrait-ish shape hides it and uses the inline poster instead (see the
   poster block at the bottom), so this rule and its ::after can both assume a
   wide frame - which is why the falloff here is horizontal, not vertical. */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--void);
  background-image: url("/assets/images/venue-bg-desktop-sm.webp?v=20260804-7");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* The artwork asset is already black across its left ~44% and feathered from
   there, so this only has to guarantee contrast when `cover` crops that black
   away on a narrow-but-landscape frame. Solid behind the type, clean art on
   the far side. */
.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    #000            0%,
    rgba(0,0,0,.72) 30%,
    rgba(0,0,0,.25) 46%,
    rgba(0,0,0,0)   60%);
}

/* NO animated laser overlay. A pair of sweeping conic-gradient laser fans was
   built here on 2026-08-04 and removed the same day (client): the artwork
   already carries its own beams, and a second moving set added far too much on
   top of it - two fans crossing read as wireframe mesh rather than light. If
   this is ever revisited, the constraint is that the key art is already busy;
   anything added has to be quieter than the beams that are baked in. */

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Honeypot: display:none only. Off-screen positioning gets autofilled by
   Chrome/Edge, which silently blocks real signups. */
.hp-row { display: none !important; }

.sheet {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}
.stage {
  flex: 1 0 auto;
  display: flex;
  padding: clamp(26px, 5vw, 56px) clamp(18px, 5vw, 56px) clamp(20px, 3vw, 36px);
}
.stage__inner {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(20px, 4vw, 34px);
}

/* ============================================================
   BRAND
   ============================================================ */
.brand { text-align: center; }
.brand__poster { display: none; }

.brand__lockup {
  display: block;
  width: min(78vw, 380px);
  height: auto;                /* always paired with width - HTML attrs would win otherwise */
  margin: 0 auto;
}

/* The signature: a single laser wiping open beneath the wordmark. Two pixels
   rather than one so the bloom has something to bloom off; the glow is the
   only place the interface borrows the artwork's light. */
.brand__beam {
  display: block;
  width: min(78vw, 380px);
  height: 2px;
  margin: clamp(14px, 2.4vw, 20px) auto clamp(14px, 2.2vw, 18px);
  background: linear-gradient(90deg,
    rgba(239,111,108,0), var(--ember) 27%, var(--ice) 73%, rgba(181,242,246,0));
  box-shadow: 0 0 14px rgba(181,242,246,.45), 0 0 34px rgba(239,111,108,.34);
  transform-origin: center;
  animation: beam 1.15s cubic-bezier(.22,1,.36,1) .2s both;
}
@keyframes beam {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* Re-derived from the artwork, 2026-08-04 (client: it "doesn't seem to match
   the design of the artwork"). The poster speaks ONE voice - a heavy geometric
   sans, all caps, set TIGHT - and puts GASWRX and BIRMINGHAM side by side, red
   against white. The previous treatment was MK's: widely tracked, with the date
   in a monospace face. Nothing on this poster is monospaced and nothing on it
   is loosely tracked, so both are gone from the brand column. */
/* Venue, city and date all take the wordmark's gradient rather than flat fills
   (client, 2026-08-04). The gradient is painted on the CONTAINER and clipped to
   the text, so the sweep runs continuously across "GASWRX BIRMINGHAM" as one
   line instead of restarting on each word. `color` is set first as the fallback
   for anything without background-clip:text - it inherits the cyan end, which
   is the readable one at 17:1.
   NOTE background-IMAGE, not the `background` shorthand: the shorthand resets
   background-clip to border-box, which silently undid the clip below and made
   the date paint as a solid gradient bar with invisible text on it. */
.brand__where {
  /* display:block, NOT flex. Safari clips -webkit-background-clip:text to
     nothing on a flex container, so the whole line rendered invisible on iOS
     while Chrome was fine (client, 2026-08-04: "venue is missing on mobile").
     text-align on the element itself also beats the `text-align: left` that
     .brand inherits on desktop, so this stays centred at every width. */
  display: block;
  text-align: center;
  margin: 0 0 .3em;
  font-family: var(--font-disp);
  font-weight: 800;
  font-size: clamp(1.2rem, 4.6vw, 1.78rem);
  line-height: 1.05;
  letter-spacing: -.005em;      /* the poster's lettering is tight, not tracked */
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--ice);
  background-image: linear-gradient(95deg, var(--ember) 4%, #F2A08F 34%, var(--ice) 72%);
}
.brand__venue, .brand__place { color: inherit; }
.brand__venue { margin-right: .5em; }   /* was the flex gap */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .brand__where, .brand__date {
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
  }
}
/* The times sit in their own span so that when the line cannot hold, it breaks
   at the separator - "Friday 16 October 2026" / "17.00-00.00" - instead of
   wrapping mid-date and stranding the year on its own line, which is what
   `text-wrap: balance` did on narrow viewports. */
.brand__times { white-space: nowrap; }
@media (max-width: 540px) {
  .brand__sep   { display: none; }
  .brand__times { display: block; margin-top: .12em; }
}
/* The poster sets its date big, heavy and red, with the times smaller beneath
   in the same red. Matching that, rather than the grey mono line MK uses. */
.brand__date {
  margin: .45em 0 0;
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: clamp(.82rem, 3vw, 1.02rem);
  letter-spacing: .01em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--ice);
  background-image: linear-gradient(95deg, var(--ember) 6%, #F2A08F 40%, var(--ice) 78%);
}
/* no opacity on these - it would sit between the clipped background and the
   glyphs and grey the gradient out. Weight carries the hierarchy instead. */
.brand__sep   { font-weight: 400; }
.brand__times { font-weight: 600; }

/* ============================================================
   PANEL
   ============================================================ */
.signup { display: block; }

/* Promoter billing sits directly under the sign-up box, the way it sits under
   the lockup on the artwork (client, 2026-08-04 - it was in the footer and
   read as small print there).
   NO opacity. MK holds its white logos at .78 so they do not compete with the
   button, but these are a specified colour (#48F5F9, client) and any opacity
   over black renders them as a duller, darker cyan - which read as simply the
   wrong colour. If they ever need toning down, change the fill in the PNG so
   the colour stays truthful. */
.signup__promoters {
  display: block;
  width: 148px;
  height: auto;
  margin: clamp(18px, 3vw, 26px) auto 0;
}

/* The panel was a neutral black-and-grey card carried over from the monochrome
   press-shot build, and against this artwork it read as a component borrowed
   from another site (client, 2026-08-04). It now belongs to the room: the fill
   carries a faint red wash falling from the top edge, the frame is a cyan
   hairline rather than a white one, and the top edge is a laser - the same
   gesture as .brand__beam, so the signature appears exactly twice on the page
   and ties the two columns together. */
.panel {
  position: relative;
  isolation: isolate;            /* keeps the iti dropdown above any panel frame */
  /* z-index is REQUIRED, not decoration. The promoter lockup is a later sibling
     inside .signup, and a static image painted after this element's stacking
     context - so with z-index:auto the logos showed straight through the open
     country dropdown. Lifting the panel puts the dropdown above them. */
  z-index: 2;
  margin: 0 auto;                /* auto at EVERY breakpoint - never plain 0 */
  width: 100%;
  max-width: 440px;
  /* The wash comes from the lower centre, where the artwork's lasers converge
     and go hottest - not from the top edge as on MK, whose glow is overhead. */
  background:
    radial-gradient(120% 90% at 50% 118%, rgba(239,111,108,.20), rgba(239,111,108,0) 62%),
    rgba(4,6,10,.86);
  border: 1px solid rgba(255,255,255,.17);
  box-shadow: 0 26px 64px rgba(0,0,0,.62);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
/* Corner brackets, not a uniform hairline. The artwork's whole structural
   motif is open angular outline shapes - a red one on the left of the frame and
   a cyan one on the right - so the panel is framed the same way and in the same
   two colours, rather than boxed in a single even border. Client, 2026-08-04:
   the box "doesn't match the design". They sit in the panel's own padding and
   never cross content. */
.panel::before,
.panel::after {
  content: "";
  position: absolute;
  width: clamp(30px, 11%, 50px);
  height: clamp(30px, 11%, 50px);
  z-index: 2;
  pointer-events: none;
}
.panel::before {
  left: -1px; top: -1px;
  border-left: 2px solid var(--ember);
  border-top:  2px solid var(--ember);
  box-shadow: -7px -7px 22px -6px rgba(239,111,108,.55);
}
.panel::after {
  right: -1px; bottom: -1px;
  border-right:  2px solid var(--ice);
  border-bottom: 2px solid var(--ice);
  box-shadow: 7px 7px 22px -6px rgba(181,242,246,.5);
}
.panel__inner { padding: clamp(20px, 4.4vw, 30px); }
.panel > * { position: relative; z-index: 1; }

.panel__state { display: none; }
.panel[data-form-state="idle"]    .panel__idle,
.panel[data-form-state="otp"]     .panel__otp,
.panel[data-form-state="success"] .panel__success { display: block; }

/* Was --smoke, which is the "black and grey" the client objected to and also
   measures 3.2:1 at this size. --ice is the artwork's own cyan and reads
   17:1 on the panel. */
.panel__eyebrow {
  margin: 0 0 .9em;
  font-family: var(--font-disp);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ice);
}
.panel__title {
  margin: 0 0 .5em;
  font-family: var(--font-disp);
  font-weight: 800;
  font-size: clamp(1.7rem, 6vw, 2.3rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--light);
  text-wrap: balance;            /* never white-space:nowrap - it reads as off-centre */
}
/* The second line separates on WEIGHT, not on a grey. Dropping it to --smoke
   was what made the headline read as black-and-grey rather than lit. */
.panel__title em {
  font-style: normal;
  font-weight: 300;
  color: var(--light);
}
/* scoped so state-level p rules can't out-specific the eyebrow */
.panel__idle p:not(.panel__eyebrow),
.panel__otp p:not(.panel__eyebrow),
.panel__success p:not(.panel__eyebrow) {
  font-size: .875rem;
  line-height: 1.6;
}
.panel__lede { margin: 0 0 1.5em; color: var(--haze); }
.panel__lede strong { color: var(--light); font-weight: 600; }
.panel__success-note {
  margin: 0 0 1em;
  color: var(--light);
  border-left: 1px solid rgba(181,242,246,.5);
  padding-left: .9em;
}

/* ============================================================
   FORM
   ============================================================ */
.form__row { margin-bottom: 1.05rem; }

/* sr-only, never display:none - the placeholder carries the meaning
   visually but screen readers still need the label */
.form__label {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Field borders moved off white onto the artwork's cyan. Kept at .40 alpha,
   which measures 6:1 against the panel - well over the 3:1 WCAG 1.4.11 floor
   for a control boundary, and the fields still read unmistakably as fields. */
/* The field border is the wordmark's own gradient, run around the box: red at
   the left edge, cyan at the right, sweeping across the top and bottom rules.
   An earlier version put a single heavy red bar on the left only, which read as
   an error state rather than a device (client, 2026-08-04) - this is the same
   two colours but symmetrical, and it is the one gesture the whole page already
   repeats in the wordmark and the beam. The box is kept rather than reduced to
   an underline: these fields were once too faint to read as fields on this
   pair, and that is not worth repeating. */
.form__input {
  width: 100%;
  padding: .88rem .9rem;
  background: rgba(255,255,255,.045);
  border: 1px solid transparent;
  border-image: linear-gradient(90deg, rgba(239,111,108,.80), rgba(181,242,246,.80)) 1;
  border-radius: 0;
  color: var(--light);
  font-family: var(--font);
  font-size: 1rem;              /* >=16px stops iOS zoom-on-focus */
  line-height: 1.3;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
  -webkit-appearance: none;
  appearance: none;
}
.form__input::placeholder { color: #8E8E92; }   /* 5.7:1 - do not darken */
.form__input:hover {
  border-image: linear-gradient(90deg, var(--ember), var(--ice)) 1;
}
.form__input:focus {
  outline: none;
  border-image: linear-gradient(90deg, var(--ember), var(--ice)) 1;
  background: rgba(181,242,246,.07);
  box-shadow: 0 0 0 1px rgba(181,242,246,.30), 0 0 20px rgba(181,242,246,.15);
}
/* Chrome paints autofilled inputs pale lavender, which blows a hole in a black
   form (client screenshot, 2026-08-01). The background cannot be set directly
   on an autofilled field; the supported workaround is a huge inset box-shadow,
   with -webkit-text-fill-color to carry the text colour. The absurd transition
   delay stops the lavender flashing in before the shadow paints. */
.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 #121213 inset !important;
          box-shadow: 0 0 0 1000px #121213 inset !important;
  -webkit-text-fill-color: var(--light) !important;
  caret-color: var(--light);
  transition: background-color 9999s ease-in-out 0s;
}

.form__input--otp {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  letter-spacing: .42em;
  text-align: center;
  padding-left: .9rem;
}

.form__error {
  margin: .45rem 0 0;
  font-size: .74rem !important;
  line-height: 1.45 !important;
  color: #E8E8E8;
  border-left: 1px solid #8A8A8A;
  padding-left: .6em;
}
.form__error--global { margin-top: 1rem; }

.form__row--check { margin: 1.15rem 0 1.4rem; }
.form__check {
  display: flex;
  align-items: flex-start;
  gap: .7em;
  cursor: pointer;
}
/* Consent text carries a legal obligation, so it has to be genuinely readable.
   --haze at .78rem measures 9.7:1. Do not re-darken to --smoke. */
.form__check span {
  font-size: .78rem !important;
  line-height: 1.55 !important;
  color: var(--haze);
}
.form__check a { color: var(--light); text-decoration: underline; text-underline-offset: 2px; }
.form__check a:hover { text-decoration-thickness: 2px; }
.form__check input[type="checkbox"] {
  flex: none;
  width: 17px; height: 17px;
  margin: 1px 0 0;
  accent-color: var(--ember);
  cursor: pointer;
}

/* Billing small print, under the promoter logos (client, 2026-08-04). Set in
   the display face like everything else on this build - nothing on the poster
   is monospaced. --haze, not --smoke: --smoke measures 3.2:1 and fails AA. */
.signup__note {
  margin: .8rem 0 0;
  text-align: center;
  font-family: var(--font-disp);
  font-size: .62rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--haze);
}

/* ============================================================
   BUTTONS
   The single echo of the wordmark's diagonal shear cuts. The
   shear lives on a pseudo-element, not the button box, so the
   focus outline is never clipped.
   ============================================================ */
.btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  width: 100%;
  padding: .92rem 1.1rem;
  border: 0;
  background: transparent;
  border-radius: 0;
  cursor: pointer;
  font-family: var(--font-disp);
  font-weight: 800;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  /* shrink before it can ever wrap to two lines */
  white-space: nowrap;
  font-size: clamp(.78rem, 2.9vw, .92rem);
  letter-spacing: .06em;
  transition: opacity .18s ease;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 100%, 0 100%);
  transition: background-color .18s ease;
}
.btn__text, .btn__icon { position: relative; z-index: 1; }
.btn__icon { width: 17px; height: 17px; flex: none; }

/* Takes the artwork's red. It never appears beside the WhatsApp button - the
   submit lives in the idle/OTP states and WhatsApp only in success, and the
   panel shows exactly one state at a time - so the red and the WhatsApp green
   are never on screen together. Text is --void, not white: white on --ember measures 3.1:1
   and fails AA, black on it measures 6.7:1 and passes. */
.btn--primary { color: var(--void); }
.btn--primary::before { background: var(--ember); }
.btn--primary:hover::before { background: var(--ice); }
.btn--primary:disabled { cursor: default; opacity: .55; }

/* The only action in the success state, and it was being missed as a ghost
   button (client, 2026-08-01). Solid WhatsApp green, larger type, bigger
   glyph. Deliberately WhatsApp's own green and not --ember: it is a platform
   affordance, not a brand accent, and it should read as the app it opens. */
.btn--whatsapp {
  color: #05261A;
  margin-top: 1.1rem;
  padding: 1.15rem 1.1rem;
  font-size: clamp(.74rem, 3vw, .86rem);
}
.btn--whatsapp::before { background: #25D366; }
.btn--whatsapp:hover::before { background: #1FBA59; }
.btn--whatsapp .btn__icon { width: 23px; height: 23px; }
.panel__success .btn--whatsapp + .panel__wa-note,
.panel__wa-note {
  margin: .6rem 0 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: .58rem !important;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--haze);
}

.form__resend {
  margin: 1rem 0 0;
  text-align: center;
  font-size: .74rem !important;
  color: var(--haze);
}
.form__resend-btn {
  background: none; border: 0; padding: 0;
  color: var(--light);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.form__resend-btn:disabled { color: var(--smoke); cursor: default; text-decoration: none; }

/* ============================================================
   intl-tel-input
   ============================================================ */
/* the hidden state lives in the vendor sheet; without this the whole
   country list flashes open on first paint */
.iti__dropdown-content.iti__hide { display: none !important; }

.iti { width: 100%; display: block; }
.iti__country-container { padding: 1px; }
/* No divider between the dial code and the number: the vendor ships border:0
   here, so this stays borderless on purpose. Client asked for the line after
   +44 to go (2026-08-01). Do not reinstate a border-right. */
.iti__selected-country {
  background: transparent;
  border: 0;
  border-radius: 0;
}
.iti__selected-country:hover, .iti__selected-country-primary:hover { background: rgba(255,255,255,.06); }
.iti__selected-dial-code { color: var(--haze); font-size: .9rem; }
.iti__arrow { border-top-color: var(--smoke); }
.iti__arrow--up { border-bottom-color: var(--smoke); }

.iti__dropdown-content {
  background: #08080A;
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: 0 18px 44px rgba(0,0,0,.85);
  overflow: hidden;
}
/* the search box, styled to match the form fields rather than the vendor default */
.iti__search-input {
  width: 100%;
  /* 2rem (32px) sides, NOT the .85rem used on the other fields. The vendor
     reserves padding-left:30px for the magnifier - a 14px SVG absolutely
     positioned at left:8px, so it occupies 8-22px - and padding-right:28px for
     the clear button (24px wide at right:4px, so 4-28px). Dropping to .85rem
     put the placeholder straight under the magnifier. Any `padding` shorthand
     here has to keep clearing both; this is a recurring trap on this engine. */
  padding: .7rem 2rem;
  background: #000;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  color: var(--light);
  font-family: var(--font);
  font-size: .9rem;
}
/* the vendor's hover is rgba(0,0,0,.05), which is invisible on a black box */
.iti__search-clear:focus-visible,
.iti__search-clear:hover { background: rgba(255,255,255,.11); }
.iti__search-input::placeholder { color: #4A4A4C; }
.iti__search-input:focus { outline: none; background: #050506; }

.iti__country-list { max-height: 240px; scrollbar-width: thin; }
.iti__country {
  padding: .5rem .85rem;
  color: var(--haze);
  font-size: .875rem;
}
.iti__country.iti__highlight, .iti__country:hover { background: rgba(255,255,255,.09); color: var(--light); }
.iti__country-name { color: inherit; }
.iti__dial-code { color: var(--smoke); }
.iti__no-country-selected, .iti__country-list .iti__no-results {
  padding: .7rem .85rem; color: var(--smoke); font-size: .85rem;
}

/* ============================================================
   FOOTER - full width, basslayerz pattern
   ============================================================ */
.foot {
  flex-shrink: 0;
  width: 100%;
  margin: 0;
  padding: 18px clamp(16px, 4vw, 40px) 26px;
  background: rgba(0,0,0,.62);
  border-top: 1px solid var(--line-soft);
  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; }
/* was --smoke at 12px, which measures 3.2:1 on the footer and fails WCAG AA */
.foot__legal { margin: 0; font-size: 12.5px; color: var(--haze); letter-spacing: .02em; }
.foot__legal a { color: var(--haze); text-decoration: underline; text-underline-offset: 2px; }
.foot__legal a:hover { color: var(--light); }
.site-built { margin: 0; }
.site-built a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--haze);
  text-decoration: none;
  padding: 5px 11px;
  /* --line-soft is rgba(255,255,255,.08) - about 1.1:1 against the footer, so
     the pill had no visible outline at all (client, 2026-08-04). .30 measures
     ~3.3:1 and clears the WCAG 1.4.11 floor for a UI boundary. */
  border: 1px solid rgba(255,255,255,.30);
  border-radius: 999px;
}
.site-built a:hover { border-color: rgba(255,255,255,.62); color: var(--light); }

/* Stacked footer: without this the flex row wraps and the privacy link is left
   over on its own, reading as misaligned. Centring everything is the basslayerz
   behaviour this footer was copied from. */
@media (max-width: 879px) {
  .foot { justify-content: center; text-align: center; gap: 12px; }
  .foot__left { justify-content: center; width: 100%; }
}

/* ============================================================
   RESPONSIVE
   Aspect-ratio thresholds, not device widths - width-only
   breakpoints leave gaps at squarish window shapes.
   ============================================================ */
/* --- POSTER MODE: every portrait-ish viewport ---
   Covers true portrait phones (<=7/10) AND the squarish shapes between 7/10
   and 1/1 on narrow screens - small tablets in portrait, resized desktop
   windows - which the aspect-only threshold used to drop through to a
   landscape background. The content stack is taller than the viewport, so the
   artwork is a real image in the flow: it scrolls away with the content and
   nothing ever overlaps the face. A fixed layer pinned the face to the
   viewport and let the panel slide across it. */
@media (max-aspect-ratio: 7/10),
       (max-width: 767px) and (max-aspect-ratio: 1/1) {
  .bg { display: none; }
  .stage { align-items: stretch; padding-top: clamp(14px, 4vw, 30px); }
  .stage__inner { justify-content: flex-start; }
  /* Stays an unpositioned inline image on purpose. Wrapping it in a positioned
     container (tried 2026-08-04 for a laser overlay) makes it paint AFTER the
     wordmark, and its opaque black foot then covers the wordmark that the
     negative margin pulls up into it. */
  .brand__poster {
    display: block;
    width: min(80vw, 330px);
    height: auto;              /* paired with width so the HTML attrs can't win */
    margin: 0 auto -22%;       /* wordmark tucks into the fade, reads as one lockup */
  }
}

/* --- two-column: real desktops and landscape tablets --- */
@media (min-width: 768px) and (min-aspect-ratio: 7/10) {
  .stage { align-items: center; }
  .stage__inner {
    display: grid;
    grid-template-columns: minmax(0, 470px) minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: clamp(28px, 6vw, 90px);
    row-gap: clamp(20px, 3vw, 30px);
  }
  /* Capped to the panel's 440px rather than left loose in the 470px column, so
     "centred" below means centred under the wordmark - not centred in the
     column, which lands 15px off it and reads as a mistake. */
  .brand  { grid-row: 1; text-align: left; max-width: 440px; }
  /* capped to the panel width for the same reason as .brand - so the promoter
     lockup's auto margins centre it under the panel, not in the 470px column */
  .signup { grid-row: 2; max-width: 440px; }

  .brand, .signup { grid-column: 1; }

  .brand__lockup { width: 100%; margin: 0; }
  .brand__beam   { width: 100%; margin-left: 0; margin-right: 0; transform-origin: left; }
  /* Wordmark and beam stay full-bleed across the 440; the venue lockup, city
     and date line centre under them (client, 2026-08-04). */
  .brand__venue  { text-align: center; }
  .brand__place  { justify-content: center; }
  /* Tracking eases off from .2em so the whole line holds at 440px. At .2em it
     wrapped, and `text-wrap: balance` split it as "SATURDAY 24 OCTOBER /
     2026 . 14.00-23.00" - breaking the date away from its year. */
  .brand__date   { text-align: center; }
  .panel         { margin: 0; max-width: 440px; }
  /* centred under the sign-up box (client, 2026-08-04). No override needed -
     the base rule's `auto` side margins do it, now that .signup is capped to
     the panel's own width. */
}

@media (min-width: 1501px) and (min-aspect-ratio: 7/10) {
  .bg { background-image: url("/assets/images/venue-bg-desktop.webp?v=20260804-7"); }
}

/* --- landscape phones: wide enough for the two-column rules above but
   almost no height. Placed AFTER them so it wins at equal specificity. --- */
@media (min-width: 640px) and (min-aspect-ratio: 7/10) and (max-height: 520px) {
  .stage {
    align-items: start;
    padding: 16px clamp(14px, 3vw, 28px) 12px;
  }
  .stage__inner {
    display: grid;
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: start;
    column-gap: clamp(18px, 4vw, 40px);
    row-gap: 12px;
    min-height: 0;
  }

  .brand__lockup { width: min(100%, 300px); }
  .brand__beam   { width: min(100%, 300px); margin: 9px 0 8px; }
  .brand__venue  { font-size: 1.05rem; margin-bottom: 4px; }
  .brand__place  { font-size: .92rem; letter-spacing: .12em; }
  .brand__date   { font-size: .6rem; margin-top: .35em; }

  .panel { max-width: 380px; }
  .panel__inner { padding: 15px 17px; }
  .panel__eyebrow { margin-bottom: .5em; font-size: .55rem; }
  .panel__title   { font-size: 1.3rem; margin-bottom: .35em; }
  .panel__lede    { margin-bottom: .9em; font-size: .78rem !important; line-height: 1.45 !important; }
  .form__row      { margin-bottom: .6rem; }
  .form__input    { padding: .6rem .8rem; }
  .form__row--check { margin: .7rem 0 .8rem; }
  .btn { padding: .68rem 1rem; }
  .foot { padding: 10px clamp(14px, 3vw, 28px) 12px; }
  .signup__promoters { width: 118px; margin-top: 12px; }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.iti__selected-country:focus-visible {
  outline: 2px solid var(--light);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .brand__beam { animation: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  html { scroll-behavior: auto; }
}