/* ============================================================
   ERIC PRYDZ - priority access sign-up
   ------------------------------------------------------------
   Direction: zero chroma. The press shot's own background is a
   true #000000, so the page background is too - the photograph
   has no visible edge anywhere and the face materialises out of
   the page rather than sitting in a frame. The two mid-greys
   below are sampled straight out of the artwork histogram.
   The accent is luminance, never hue.

   Signature: .brand__beam - one hairline that wipes open on
   load, the single moving element on the page.

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

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/Archivo-var.woff2?v=20260801-6") 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-6") 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-6") 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;               /* sampled from EP_2017_PRESS.jpg */
  --haze:  #B3B3B3;               /* sampled from EP_2017_PRESS.jpg */
  --light: #FFFFFF;
  --line:      rgba(255,255,255,.16);
  --line-input: rgba(255,255,255,.34);   /* 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;
}

.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--void);
  background-image: url("/assets/images/bg-mobile-sm.webp?v=20260801-6");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

/* Light falloff. In portrait the head is composited to sit complete inside
   the top ~38% of the frame, so this stays fully transparent across all of it
   and only ramps once the face has ended - nothing is cropped or veiled. Below
   43% it is flat #000, which is where every piece of type sits. Reads as the
   light falling away rather than as an overlay on the photograph. */
.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0)   0%,
    rgba(0,0,0,0)   30%,
    rgba(0,0,0,.55) 37%,
    #000            43%);
}

.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__portrait { 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 hairline wiping open beneath the wordmark. */
.brand__beam {
  display: block;
  width: min(78vw, 380px);
  height: 1px;
  margin: clamp(14px, 2.4vw, 20px) auto clamp(12px, 2vw, 16px);
  background: linear-gradient(90deg, rgba(255,255,255,.10), var(--light) 55%, rgba(255,255,255,.10));
  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; }
}

.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;
}
.brand__date {
  margin: .55em 0 0;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: clamp(.7rem, 2.6vw, .82rem);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--haze);
  text-wrap: balance;
}

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

.panel {
  position: relative;
  isolation: isolate;            /* keeps the iti dropdown above any panel frame */
  margin: 0 auto;                /* auto at EVERY breakpoint - never plain 0 */
  width: 100%;
  max-width: 440px;
  background: rgba(5,5,6,.80);
  border: 1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.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; }

.panel__eyebrow {
  margin: 0 0 .9em;
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--smoke);
}
.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 */
}
.panel__title em {
  font-style: normal;
  font-weight: 300;
  color: var(--smoke);
}
/* 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 var(--line);
  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;
}

/* The fields were a .16-alpha hairline on a near-black panel, so they barely
   read as fields at all. A .34 border plus a slightly lifted fill makes the
   input area obvious without breaking the monochrome system. */
.form__input {
  width: 100%;
  padding: .88rem .9rem;
  background: rgba(255,255,255,.055);
  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;
  -webkit-appearance: none;
  appearance: none;
}
.form__input::placeholder { color: #8E8E92; }
.form__input:hover { border-color: rgba(255,255,255,.5); }
.form__input:focus {
  outline: none;
  border-color: var(--light);
  background: rgba(255,255,255,.09);
}
.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.
   It was --smoke at .715rem, which measures 3.2:1 against the panel and fails
   WCAG AA (4.5:1) for text this size. --haze at .78rem measures 9.7:1. */
.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: #FFFFFF;
  cursor: pointer;
}

/* ============================================================
   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-mono);
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  /* shrink before it can ever wrap to two lines */
  white-space: nowrap;
  font-size: clamp(.66rem, 2.6vw, .76rem);
  letter-spacing: clamp(.08em, .5vw, .16em);
  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; }

.btn--primary { color: var(--void); }
.btn--primary::before { background: var(--light); }
.btn--primary:hover::before { background: var(--haze); }
.btn--primary:disabled { cursor: default; opacity: .55; }

/* The only action in the success state, and it was being missed as a ghost
   button. It gets the loudest treatment on the page: solid WhatsApp green,
   larger type and a bigger glyph. This is the single deliberate colour on an
   otherwise zero-chroma site, spent here because it is a recognised
   functional affordance and the visitor only ever reaches it once. */
.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; }
/* quiet lead-in so the button reads as the next step, not an afterthought */
.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(--smoke);
}

.form__resend {
  margin: 1rem 0 0;
  text-align: center;
  font-size: .74rem !important;
  color: var(--smoke);
}
.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; }
.iti__selected-country {
  background: transparent;
  border-right: 1px solid var(--line-input);
  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%;
  padding: .7rem .85rem;
  background: #000;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  color: var(--light);
  font-family: var(--font);
  font-size: .9rem;
}
.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;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
}
.site-built a:hover { border-color: var(--line); 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.
   ============================================================ */
/* --- portrait phones/tablets ---
   The content stack is taller than the viewport, and bottom-anchoring it put
   the wordmark and the venue/date lines straight across his eyes. Reserve a
   clean window for the portrait at the top instead, ramp to solid black
   before any type starts, and let the page scroll. The panel top and the
   first fields still land above the fold. */
@media (max-aspect-ratio: 7/10) {
  /* Flat black page, portrait as a real image in the flow with the wordmark
     tucked under its faded foot. A fixed background layer pinned the face to
     the viewport and let the panel slide across it; an inline image scrolls
     away with everything else and nothing ever overlaps his face. */
  .bg { display: none; }
  .stage { align-items: stretch; padding-top: clamp(14px, 4vw, 30px); }
  .stage__inner { justify-content: flex-start; }
  .brand__portrait {
    display: block;
    width: min(74vw, 300px);
    height: auto;              /* paired with width so the HTML attrs can't win */
    margin: 0 auto -34%;        /* wordmark tucks into the fade, reads as one lockup */
  }
}
@media (max-aspect-ratio: 7/10) and (min-width: 501px) {
  .bg { background-image: url("/assets/images/bg-mobile.webp?v=20260801-6"); }
}

/* --- two-column: real desktops and landscape tablets --- */
@media (min-width: 768px) and (min-aspect-ratio: 7/10) {
  .bg {
    background-image: url("/assets/images/bg-desktop-sm.webp?v=20260801-6");
    background-position: center center;
  }
  /* two-column: the content sits beside the face, not over it, so the falloff
     turns horizontal - solid black behind the type, clean photo on the far side */
  .bg::after {
    background: linear-gradient(90deg,
      #000            0%,
      rgba(0,0,0,.72) 30%,
      rgba(0,0,0,.25) 46%,
      rgba(0,0,0,0)   60%);
  }
  .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);
  }
  .brand  { grid-row: 1; text-align: left; }
  .signup { grid-row: 2; }

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

  .brand__lockup { width: min(100%, 440px); margin: 0; }
  .brand__beam   { width: min(100%, 440px); margin-left: 0; margin-right: 0; transform-origin: left; }
  .brand__place  { justify-content: flex-start; }
  .panel         { margin: 0; max-width: 440px; }
}

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

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

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