/* ============================================================
   East End Dubs · NX Newcastle

   Direction taken from the poster's own grammar rather than its
   colours alone. The artwork encodes billing through FILL vs
   OUTLINE: EAST END DUBS sits in a solid ink box, KITTY HALL and
   + MORE TBA in outlined boxes butted against each other. Filled
   means "the name that sells the ticket". That rule runs the
   whole page:

     · the panel header is a billing block — a solid acid bar for
       the venue, outlined boxes butted beneath it for everything
       secondary, growing exactly as the poster's does
     · the submit button is filled at rest and INVERTS to outline
       on hover — the hierarchy rule made interactive
     · a focused field promotes its own label from ghost outline
       to solid acid chip

   Consequences of taking the poster seriously: no border-radius,
   no gradients, no glow anywhere. The source is hard-edged flat
   colour, so the page is too. Grain sits at .11 — roughly 3x a
   normal dither pass — because the artwork genuinely is that
   noisy, and a clean surface next to it looks like a mistake.

   Type: Instrument Sans (display) is a neo-grotesque in the
   poster lettering's own genre; body is the system Helvetica
   stack, which is that genre exactly and costs nothing.

   Palette sampled from the supplied PNGs.
   ============================================================ */

:root {
  --acid:     #DFDC3C;   /* the poster field — the accent */
  --acid-hi:  #EFEC63;   /* lifted, for the active press state */
  --acid-lo:  #9C9930;   /* where grain darkens the field: muted meta text */
  --ink:      #14120C;   /* page base — warm near-black, not blue-black */
  --ink-2:    #1D1A11;   /* panel */
  --ink-3:    #262215;   /* field wells */
  --line:     #433D20;   /* hairline, olive so it stays in the family */
  --bone:     #EFEDE0;   /* body copy on ink */
  --danger:   #FF8B6E;
  --whatsapp: #25D366;

  --display: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body:    "Helvetica Neue", Helvetica, Arial, sans-serif;

  --maxw: 1180px;
}

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

/* Base colour lives on html, NOT body: an opaque body background paints
   over the z-index:-2 .bg layer and the artwork disappears. */
html {
  -webkit-text-size-adjust: 100%;
  background: var(--ink);
}

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

/* ---------- background: the poster, blurred into an olive-ink field ---------- */
.bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-color: var(--ink);
  background-image: url("/assets/images/bg-mobile.jpg?v=20260731-1");
  background-image: image-set(
    url("/assets/images/bg-mobile.webp?v=20260731-1") type("image/webp"),
    url("/assets/images/bg-mobile.jpg?v=20260731-1")  type("image/jpeg"));
  background-position: center;
  background-size: cover;
}
@media (min-width: 880px) {
  .bg {
    background-image: url("/assets/images/bg-desktop.jpg?v=20260731-1");
    background-image: image-set(
      url("/assets/images/bg-desktop.webp?v=20260731-1") type("image/webp"),
      url("/assets/images/bg-desktop.jpg?v=20260731-1")  type("image/jpeg"));
  }
}
/* Heavier scrim than a client-supplied background would get: this one is
   derived from the poster, so it is atmosphere, not artwork. It has to sit
   well behind acid type without turning grey — hence an ink wash rather
   than black. */
.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(20,18,12,.62) 0%,
    rgba(20,18,12,.80) 52%,
    rgba(20,18,12,.93) 100%);
}

/* ---------- grain ----------
   The poster is heavily grained; matching it is the point, so this sits
   far higher than the usual dither pass. */
.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .11;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   STAGE LAYOUT
   ============================================================ */
.stage {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(20px, 4vw, 56px) clamp(16px, 4vw, 40px);
  display: flex;
  align-items: center;
}
.stage__inner {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 52px);
  align-items: center;
}

/* ---------- the poster ----------
   Square, hard shadow, no frame: the artwork already has its own edge. */
.poster {
  justify-self: center;
  width: 100%;
  max-width: 600px;
}
.poster__frame {
  position: relative;
  box-shadow: 0 18px 44px -14px rgba(0,0,0,.85);
  animation: posterIn .8s cubic-bezier(.16,.84,.36,1) both;
}
.poster img {
  display: block;
  width: 100%;
  height: auto;
}
@keyframes posterIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   SIGNUP PANEL
   ============================================================ */
.panel {
  justify-self: center;
  width: 100%;
  max-width: 520px;
  position: relative;
  isolation: isolate;                 /* keeps the flag dropdown clickable */
  background: rgba(29,26,17,.94);
  border: 1px solid var(--line);
  box-shadow: 0 30px 64px -28px rgba(0,0,0,.9);
  animation: panelIn .8s .1s cubic-bezier(.16,.84,.36,1) both;
  overflow: visible;
}
/* the acid edge — a printed rule, not a gradient bar */
.panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--acid);
  z-index: 0;
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.panel__inner { position: relative; z-index: 1; padding: clamp(26px, 3.4vw, 40px); }

/* --- 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="success"] .panel__success { display: block; }

/* ============================================================
   THE BILLING BLOCK — the poster's fill/outline rule
   A solid acid bar for the fact that sells (the venue), outlined
   boxes butted under it for everything secondary. On the teaser
   there is only the bar; on the announce build the date box
   appears beneath it, so the block grows exactly the way the
   poster's billing does.
   ============================================================ */
.billing { margin: 0 0 18px; }
.billing__row { display: block; }

.billing__bar {
  display: inline-block;
  margin: 0;
  padding: 7px 12px 6px;
  background: var(--acid);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(13px, 3.2vw, 15px);
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.1;
}

/* Butted against the bar above, sharing its edge — the way KITTY HALL
   sits under EAST END DUBS on the poster. */
.billing__box {
  display: inline-block;
  margin: -1px 0 0;
  padding: 5px 11px 4px;
  border: 1px solid var(--acid);
  color: var(--acid);
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(11.5px, 2.9vw, 13px);
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.15;
}

/* ---------- title ---------- */
.panel__title {
  margin: 0 0 14px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 5.6vw, 2.65rem);
  line-height: 1.0;
  letter-spacing: -.03em;
  color: var(--bone);
  text-wrap: balance;
}

/* visually hidden but kept for screen readers + SEO */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.panel__lede {
  margin: 0 0 10px;
  font-size: 15.5px;
  color: #C9C5B0;
  max-width: 46ch;
}
.panel__lede--last { margin-bottom: 24px; }
.panel__lede strong { color: var(--bone); font-weight: 700; }
.panel__success-note {
  margin: 0 0 12px;
  color: var(--acid);
  font-size: 15px;
}

/* ============================================================
   PRESALE COUNTDOWN (announce build)
   Additive: no-ops on any page without #countdown, so the teaser
   index.html is unaffected while it serves off these same files.

   Four wells butted into a single strip with collapsed borders —
   no dots, no colons. The poster's boxes touch; so do these.
   ============================================================ */
.countdown { margin: 0 0 24px; }
.countdown__label {
  margin: 0 0 9px;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--acid);
}
.countdown__clock {
  display: flex;
  align-items: stretch;
}
.cdseg {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 11px 4px 9px;
  background: var(--ink-3);
  border: 1px solid var(--line);
  margin-left: -1px;          /* collapse the shared edge into one strip */
}
.cdseg:first-child { margin-left: 0; }
.cdseg b {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.5rem, 5vw, 1.95rem);
  line-height: 1;
  color: var(--acid);
  font-variant-numeric: tabular-nums;   /* stops the row jittering each tick */
}
.cdseg i {
  font-style: normal;
  font-family: var(--display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--acid-lo);
}

/* At zero: the strip becomes a filled bar. Primary information is filled —
   the same rule the billing block runs on. */
.countdown__live {
  display: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--acid);
  padding: 12px 16px;
  text-align: center;
}
.countdown.is-live .countdown__clock { display: none; }
.countdown.is-live .countdown__label { display: none; }
.countdown.is-live .countdown__live  { display: block; }

@media (max-width: 380px) {
  .cdseg { padding: 9px 2px 8px; }
  .cdseg i { font-size: 8px; letter-spacing: .1em; }
}

/* ============================================================
   FORM
   ============================================================ */
.form__row { position: relative; margin: 0 0 16px; }
/* the focused row must sit above later rows so the country dropdown
   is not painted over by the consent block or the submit button */
.form__row:focus-within { z-index: 20; }

/* --- THE LABEL CHIP ---
   At rest a ghost outline; on focus it fills acid. The same fill/outline
   promotion the poster uses, applied to whichever field you are in. */
.form__label {
  display: inline-block;
  margin: 0 0 7px;
  padding: 3px 8px 2px;
  border: 1px solid var(--line);
  background: transparent;
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--acid-lo);
  transition: background-color .12s linear, color .12s linear, border-color .12s linear;
}
.form__row:focus-within .form__label {
  background: var(--acid);
  border-color: var(--acid);
  color: var(--ink);
}

.form__input {
  width: 100%;
  font-family: var(--body);
  font-size: 16px;             /* >=16px stops iOS zoom-on-focus */
  color: var(--bone);
  background: var(--ink-3);
  border: 1px solid var(--line);
  padding: 13px 14px;
  transition: border-color .12s linear;
}
.form__input::placeholder { color: #948D6E; }
.form__input:focus {
  outline: none;
  border-color: var(--acid);
}
.form__input[aria-invalid="true"] { border-color: var(--danger); }

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

/* ---------- honeypot (spam trap) ----------
   display:none, NOT left:-9999px: off-screen honeypots get autofilled by
   Chrome/Edge and silently block real signups. */
.hp-row { display: none !important; }

/* ---------- consent ---------- */
.form__row--check { margin-top: 4px; }
.form__check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0 0 22px;
  cursor: pointer;
  font-size: 13px;
  color: #B7B39D;
  line-height: 1.55;
}
.form__check input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--acid);
  cursor: pointer;
}
.form__check a { color: var(--acid); text-underline-offset: 2px; }

/* ---------- submit: filled at rest, inverts on hover ----------
   The one flourish on the page. Filled = primary, so the button starts
   filled; hovering flips it to the outlined state and back, which is the
   poster's own billing rule played as an interaction. */
.btn-signup {
  display: block;
  width: 100%;
  cursor: pointer;
  color: var(--ink);
  background: var(--acid);
  border: 1px solid var(--acid);
  padding: 0;
  transition: background-color .09s linear, color .09s linear;
}
.btn-signup .btn__text {
  display: block;
  padding: 15px 18px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.18rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.btn-signup:hover:not(:disabled) {
  background: transparent;
  color: var(--acid);
}
.btn-signup:active:not(:disabled) { background: var(--acid-hi); color: var(--ink); }
.btn-signup:disabled {
  background: transparent;
  border-color: var(--line);
  color: var(--acid-lo);
  cursor: default;
}

/* ---------- success state ---------- */
.panel__success { text-align: left; }
.panel__success .panel__lede { margin-bottom: 16px; }

/* The WhatsApp incentive: a rule in the group's own green ties the line to
   the button under it, so the "30 minutes early" hook reads as one unit
   with the CTA rather than as more body copy. */
.wa-hook {
  margin: 0 0 12px;
  padding-left: 12px;
  border-left: 3px solid var(--whatsapp);
  font-size: 14px;
  line-height: 1.5;
  color: var(--bone);
}
.wa-hook strong { color: var(--whatsapp); font-weight: 700; white-space: nowrap; }

.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--whatsapp);
  color: #06130a;
  text-decoration: none;
  text-align: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .02em;
  padding: 13px 20px;
  border: 1px solid var(--whatsapp);
  transition: background-color .09s linear, color .09s linear;
}
.btn-whatsapp:hover { background: transparent; color: var(--whatsapp); }
.btn-whatsapp svg { flex: 0 0 auto; }

/* ============================================================
   intl-tel-input (v25) — squared dark theme + searchable dropdown
   ============================================================ */
.iti { width: 100%; display: block; }
.iti input.form__input { padding-left: calc(52px + 0.7rem); } /* re-measured by repadPhone() */
.iti__selected-country {
  background: #1B1810;
  border-radius: 0;
  color: var(--bone);
}
.iti__selected-country:hover,
.iti__selected-country-primary:hover { background: #2C2717; }
.iti--separate-dial-code .iti__selected-dial-code { color: var(--bone); }
.iti__selected-dial-code { color: #C9C5B0; font-size: 15px; }
.iti__arrow { border-top-color: var(--acid); }
.iti__arrow--up { border-bottom-color: var(--acid); }
.iti__dropdown-content {
  background: var(--ink-2);
  border: 1px solid var(--acid);
  border-radius: 0;
  box-shadow: 0 26px 54px -16px rgba(0,0,0,.92);
  color: var(--bone);
  overflow: hidden;
}
.iti__search-input {
  width: 100%;
  background: var(--ink-3);
  color: var(--bone);
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 12px 14px;
  font-family: var(--body);
  font-size: 15px;
}
.iti__search-input::placeholder { color: #948D6E; }
.iti__search-input:focus { outline: none; box-shadow: inset 0 -2px 0 var(--acid); }
.iti__search-icon { display: none; }              /* remove magnifying-glass icon */
.iti__search-input { padding-left: 14px; }        /* reclaim the space it left */
.iti__country-list { background: var(--ink-2); }
.iti__country { color: var(--bone); padding: 9px 12px; }
.iti__country:hover,
.iti__country.iti__highlight { background: var(--acid); color: var(--ink); }
.iti__country:hover .iti__country-name,
.iti__country.iti__highlight .iti__country-name,
.iti__country:hover .iti__dial-code,
.iti__country.iti__highlight .iti__dial-code { color: var(--ink); }
.iti__dial-code { color: var(--acid-lo); }
.iti__country-name { color: var(--bone); }
/* the dropdown must sit above the panel */
.iti--inline-dropdown .iti__dropdown-content { z-index: 50; }
/* Hidden state must not depend on the vendor stylesheet having loaded */
.iti__dropdown-content.iti__hide { display: none !important; }

/* ============================================================
   FOOTER (full width, basslayerz design)
   ============================================================ */
.foot {
  flex-shrink: 0;
  width: 100%;
  margin: 0;
  padding: 18px clamp(16px, 4vw, 40px) 26px;
  background: rgba(20,18,12,.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: #A7A28A; letter-spacing: .02em; }
.foot__legal a { color: #A7A28A; text-decoration: none; }
.foot__legal a:hover { color: var(--acid); }
.site-built { margin: 0; }
.site-built a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  letter-spacing: .04em;
  color: #A7A28A;
  text-decoration: none;
  padding: 5px 11px;
  border: 1px solid var(--line);
}
.site-built a:hover { border-color: var(--acid); color: var(--bone); }
.site-built img { display: block; opacity: .9; }

/* ============================================================
   RESPONSIVE — two columns on wider screens
   ============================================================ */
@media (min-width: 880px) {
  .stage__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
  }
  .poster { justify-self: end; max-width: 540px; }
  .panel  { justify-self: start; }
  .foot { justify-content: space-between; }
}

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

/* very narrow screens: keep the title off two awkward lines */
@media (max-width: 360px) {
  .panel__title { font-size: 1.75rem; }
}

/* ============================================================
   PHONE LANDSCAPE / SHORT VIEWPORTS
   A sideways phone is only ~360-430px tall, and several of them
   (667x375, 844x390) sit BELOW the 880px two-column breakpoint,
   so they would get the stacked layout: poster filling the screen
   and the form pushed under the fold. Force the split here and
   size the poster off the viewport HEIGHT instead of its width,
   then compress the panel so the billing block through Sign Up
   clears the fold. Placed after the desktop block so it wins at
   equal specificity.
   ============================================================ */
@media (orientation: landscape) and (max-height: 540px) {
  .stage { padding: 10px clamp(14px, 3vw, 28px); align-items: center; }
  .stage__inner {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: clamp(16px, 3vw, 32px);
    align-items: center;
  }

  /* width:auto + max-height lets the browser scale the poster
     proportionally to whichever constraint bites first */
  .poster { justify-self: end; width: auto; max-width: none; }
  .poster img {
    width: auto;
    height: auto;
    max-width: 38vw;
    max-height: calc(100svh - 96px);
  }

  .panel { justify-self: start; max-width: 560px; }
  .panel__inner { padding: 12px 16px; }

  .billing { margin-bottom: 8px; }
  .billing__bar { padding: 5px 10px 4px; font-size: 12px; }
  .billing__box { padding: 4px 9px 3px; font-size: 10.5px; }
  .panel__title { margin-bottom: 6px; font-size: 1.3rem; }
  .panel__lede { margin-bottom: 5px; font-size: 12px; max-width: none; }
  .panel__lede--last { margin-bottom: 9px; }

  /* the countdown is four more blocks between the lede and the first
     field — compress it hard or Sign Up drops below a 375px-tall fold */
  .countdown { margin-bottom: 12px; }
  .countdown__label { margin-bottom: 6px; font-size: 9.5px; letter-spacing: .14em; }
  .cdseg { padding: 6px 3px 5px; gap: 3px; }
  .cdseg b { font-size: 1.15rem; }
  .cdseg i { font-size: 8px; letter-spacing: .1em; }
  .countdown__live { padding: 9px 14px; font-size: .92rem; }

  .form__row { margin-bottom: 8px; }
  .form__label { margin-bottom: 3px; padding: 2px 7px 1px; font-size: 9.5px; }
  .form__input { padding: 9px 12px; }   /* font-size stays 16px: iOS zoom-on-focus guard */
  .form__check { margin-bottom: 9px; gap: 8px; font-size: 11px; line-height: 1.4; }
  .form__check input { width: 16px; height: 16px; }
  .btn-signup .btn__text { padding: 9px 14px; font-size: .95rem; }

  /* success state has to clear the fold too */
  .panel__success-note { margin-bottom: 8px; font-size: 13px; }
  .wa-hook { margin-bottom: 9px; padding-left: 10px; font-size: 12px; }
  .btn-whatsapp { padding: 10px 16px; font-size: 14px; }

  .foot { padding: 10px clamp(14px, 3vw, 28px) 12px; }
}

/* Smallest landscape phones (667x375, 736x414). The panel is narrower here,
   so the consent paragraph wraps to three lines and pushes Sign Up under the
   fold even after the block above. Give the panel more width by shrinking the
   poster, and tighten type one more notch. Input font-size stays 16px - the
   iOS zoom-on-focus guard is not negotiable. */
@media (orientation: landscape) and (max-height: 420px) and (max-width: 740px) {
  .poster img { max-width: 32vw; }
  .billing { margin-bottom: 6px; }
  .billing__bar { padding: 4px 9px 3px; font-size: 11px; }
  .panel__title { margin-bottom: 5px; font-size: 1.15rem; }
  .panel__lede { margin-bottom: 4px; font-size: 11px; }
  .panel__lede--last { margin-bottom: 7px; }
  .form__row { margin-bottom: 6px; }
  .form__input { padding: 7px 10px; }
  .form__check { margin-bottom: 7px; gap: 7px; font-size: 10px; line-height: 1.35; }
  .form__check input { width: 14px; height: 14px; }
  .btn-signup .btn__text { padding: 8px 12px; font-size: .88rem; }
}

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

@media (prefers-reduced-motion: reduce) {
  .poster__frame, .panel { animation: none; }
  .btn-signup, .btn-whatsapp, .form__label, .form__input { transition: none; }
  * { scroll-behavior: auto; }
}