/* ============================================================
   ERIC PRYDZ - ARENA MK - 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 laser-lit room, not the
   monochrome press shot. Its own background is still a true
   #000000, so the page background is too and the poster has no
   visible edge. The greens below are sampled straight out of
   the client's ARENA-MK lockup and the laser cores in the art.

   Restraint: the artwork carries the colour. The interface does
   not. Green appears in exactly two places - the signature beam
   and the client's own venue lockup - and every other surface
   stays on the monochrome scale the pair was signed off on.

   Signature: .brand__beam. It was a white hairline; it is now a
   green laser with a bloom, which is the one gesture tying the
   form column to the artwork beside it. 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: --laser is the exact green of the dot in the
     client's ARENA-MK lockup, --beam is the laser core in the key art.
     6.6:1 and 11.7:1 on black respectively. --laser is NOT safe under white
     text (3.2:1); anything sitting on it takes --void. */
  --laser: #21A632;
  --beam:  #64D88B;
  --line:      rgba(255,255,255,.16);
  --line-input: rgba(100,216,139,.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-1");
  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(100,216,139,0), var(--beam) 55%, rgba(100,216,139,0));
  box-shadow: 0 0 14px rgba(100,216,139,.55), 0 0 34px rgba(33,166,50,.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; }
}

/* The venue is the client's own lockup, carrying the green dot device, so it
   ships as artwork rather than being reset in type. */
.brand__venue {
  display: block;
  width: min(58vw, 260px);
  height: auto;
  margin: 0 auto clamp(12px, 2vw, 16px);
}

.brand__place {
  margin: 0;
  font-family: var(--font-disp);
  font-weight: 800;
  font-size: clamp(.95rem, 3.4vw, 1.3rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--light);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7em;
  text-wrap: balance;
}
/* The times sit in their own span so that when the line cannot hold, it breaks
   at the separator - "Friday 16 October 2026" / "15.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; }
}
/* Archivo, not Martian Mono - the last mono element in the brand column, and
   it read as a different system next to the wordmark (client, 2026-08-04).
   Proportional type is also far more compact than the mono was at .2em, so the
   desktop tracking override that stopped this wrapping at 440px is no longer
   needed and has gone with it. */
.brand__date {
  margin: .5em 0 0;
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: clamp(.8rem, 2.9vw, 1rem);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--haze);
  text-wrap: balance;
}

/* ============================================================
   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). Held at .78 so it bills the show without
   competing with the button above it. */
.signup__promoters {
  display: block;
  width: 148px;
  height: auto;
  opacity: .78;
  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 green wash falling from the top edge, the frame is a green
   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;
  background:
    radial-gradient(130% 76% at 50% 0%, rgba(33,166,50,.17), rgba(33,166,50,0) 64%),
    rgba(3,8,5,.84);
  border: 1px solid rgba(100,216,139,.30);
  box-shadow: 0 26px 64px rgba(0,0,0,.62);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
/* The laser across the top edge. Sits above .panel__inner deliberately - it is
   a 2px band in the panel's own padding, so it never crosses any content. */
.panel::before {
  content: "";
  position: absolute;
  left: -1px; right: -1px; top: -1px;
  height: 2px;
  z-index: 2;
  background: linear-gradient(90deg,
    rgba(100,216,139,0), var(--beam) 50%, rgba(100,216,139,0));
  box-shadow: 0 0 12px rgba(100,216,139,.60), 0 0 30px rgba(33,166,50,.34);
}
.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. --beam is the artwork's own laser colour and
   reads 11.7:1 on the panel. */
.panel__eyebrow {
  margin: 0 0 .9em;
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--beam);
}
.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(100,216,139,.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 laser green. Kept at .40 alpha, which
   measures 5.2:1 against the panel - comfortably over the 3:1 WCAG 1.4.11 floor
   for a control boundary, and the fields still read unmistakably as fields. */
.form__input {
  width: 100%;
  padding: .88rem .9rem;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line-input);
  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-color: rgba(100,216,139,.62); }
.form__input:focus {
  outline: none;
  border-color: var(--beam);
  background: rgba(33,166,50,.10);
  box-shadow: 0 0 0 1px rgba(100,216,139,.32), 0 0 18px rgba(33,166,50,.20);
}
/* 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(--laser);
  cursor: pointer;
}

/* Billing small print, under the promoter logos (client, 2026-08-04). --haze,
   not --smoke: it is small, and --smoke measures 3.2:1 which fails AA. */
.signup__note {
  margin: .8rem 0 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: .58rem;
  line-height: 1.5;
  letter-spacing: .14em;
  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;
  /* Archivo, not Martian Mono. The mono was carried over from the press-shot
     build; against this wordmark it read as a different design system
     (client, 2026-08-04). Matches the Birmingham button. */
  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 green. 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 two greens are never on
   screen together. Text is --void, not white: white on --laser measures 3.2:1
   and fails AA, black on it measures 6.6:1 and passes. */
.btn--primary { color: var(--void); }
.btn--primary::before { background: var(--laser); }
.btn--primary:hover::before { background: var(--beam); }
.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 --laser: 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  { width: min(74%, 300px); margin-left: auto; margin-right: auto; }
  .brand__place  { justify-content: center; }
  .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-1"); }
}

/* --- 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  { width: min(66%, 200px); margin-bottom: 8px; }
  .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; }
}