/* ============================================================
   BORN ON ROAD - LONDON
   Monochrome teaser. Standalone stylesheet: this page shares NO
   design with the green build (style.css), only the JS contract
   in app.js, so the class names for the form and the terminal are
   the same on purpose. Do not merge the two stylesheets.

   ⚠️ Served publicly. The event name, venue, date and show times
   are EMBARGOED - keep them out of these comments too.

   Direction: a print proof. Jungle and soundsystem culture lived on
   photocopied flyers and stark 12" labels, so the page is set as
   something printed rather than something lit: crop marks around the
   column, a fine paper grain over the black, one monospace doing
   every job. The logo is the only display form on the page.
   ============================================================ */

:root {
  --ink:          #080808;   /* not pure black: grain needs something to sit on */
  --paper:        #FFFFFF;
  --paper-dim:    rgba(255, 255, 255, 0.62);   /* 7.8:1 */
  --paper-quiet:  rgba(255, 255, 255, 0.46);   /* 4.3:1, placeholders only */
  --line:         rgba(255, 255, 255, 0.16);
  --line-strong:  rgba(255, 255, 255, 0.42);
  --field:        rgba(255, 255, 255, 0.045);
  /* Flattened opaque equivalent of --field over --ink. Chrome's autofill
     override cannot be semi-transparent, so it needs this exact value or
     autofilled rows stop matching the empty ones. */
  --field-flat:   #131313;

  --mono: "Azeret Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { background: var(--ink); }
body {
  margin: 0;
  padding: 0;
  background: transparent;      /* never opaque: it would paint over .grain */
  color: var(--paper);
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.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; }

/* Paper grain. Generated in the stylesheet rather than shipped as an image:
   it is a few hundred bytes and never has to be cache-busted. Low enough that
   it reads as texture on the black, not as noise over the type. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   THE SLIP - one centred column, everything in it
   ============================================================ */
.stage {
  position: relative;
  z-index: 1;                  /* clears the grain */
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(46px, 9vh, 92px) 20px clamp(34px, 6vh, 56px);
}
.slip {
  position: relative;
  width: 100%;
  max-width: 420px;
  text-align: center;
}
/* Crop marks: four hairline Ls, drawn as eight gradients on ONE pseudo
   element so the corners cost no extra markup. Sits outside the column, so
   it must not intercept clicks on the form inside it. */
.slip::before {
  content: "";
  position: absolute;
  inset: clamp(-26px, -3vw, -18px);
  pointer-events: none;
  background:
    linear-gradient(var(--line), var(--line)) left  top    / 1px 15px no-repeat,
    linear-gradient(var(--line), var(--line)) left  top    / 15px 1px no-repeat,
    linear-gradient(var(--line), var(--line)) right top    / 1px 15px no-repeat,
    linear-gradient(var(--line), var(--line)) right top    / 15px 1px no-repeat,
    linear-gradient(var(--line), var(--line)) left  bottom / 1px 15px no-repeat,
    linear-gradient(var(--line), var(--line)) left  bottom / 15px 1px no-repeat,
    linear-gradient(var(--line), var(--line)) right bottom / 1px 15px no-repeat,
    linear-gradient(var(--line), var(--line)) right bottom / 15px 1px no-repeat;
}

/* --- logo --------------------------------------------------- */
.mark {
  display: block;
  /* Source is 467px wide; held well under that so it stays crisp on 2x. */
  width: min(72vw, 268px);
  height: auto;
  margin: 0 auto;
}

/* ============================================================
   TERMINAL - the four lines, printed one character at a time.
   Centred: because every character keeps its box while hidden, the
   line is laid out at final width from the first frame, so letters
   appear left to right inside an already-centred box. Nothing slides.
   ============================================================ */
.term {
  margin: clamp(26px, 5vh, 40px) 0 0;
}
.term__line {
  margin: 0 0 clamp(7px, 1.1vh, 11px);
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(13px, 3.6vw, 17px);
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
  white-space: nowrap;
}
.term__line:last-child { margin-bottom: 0; }
.term__line--cta { color: var(--paper-dim); }

/* Characters hide with `visibility`, never `display`: the block is laid out
   at full size on the first frame, so revealing a character can never reflow
   it or make the centred lines jump. */
.term__ch { visibility: hidden; }
.term__ch.is-on { visibility: visible; }

/* Block cursor. Left and right margins cancel to zero net width, so moving it
   between characters never shifts the hidden ones after it. */
.term__caret {
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  margin-left: 0.1em;
  margin-right: -0.65em;
  vertical-align: -0.18em;
  background: var(--paper);
  animation: caretblink 1.05s steps(1) infinite;
}
@keyframes caretblink { 50% { opacity: 0; } }

/* --- rule + lede -------------------------------------------- */
.rule {
  width: 46px;
  height: 1px;
  margin: clamp(24px, 4.4vh, 34px) auto clamp(20px, 3.6vh, 28px);
  background: var(--line-strong);
}
.lede {
  margin: 0 auto clamp(24px, 4vh, 32px);
  max-width: 34em;
  font-size: clamp(12.5px, 3.1vw, 13.5px);
  line-height: 1.75;
  letter-spacing: 0.02em;
  color: var(--paper-dim);
}

/* ============================================================
   FORM - underline fields on a faint tint. No boxes: the page is a
   printed slip, and boxes would make it a web form sitting on one.
   ============================================================ */
.panel__state { display: none; }
.panel[data-form-state="idle"]    .panel__idle    { display: block; }
.panel[data-form-state="success"] .panel__success { display: block; }

.form { margin: 0; }
.form__row { margin: 0 0 14px; }

.form__input {
  display: block;
  width: 100%;
  padding: 13px 12px;
  background: var(--field);
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  color: var(--paper);
  font-family: var(--mono);
  font-size: 16px;              /* >=16px stops iOS zoom-on-focus */
  letter-spacing: 0.02em;
  line-height: 1.3;
  transition: background-color 0.16s ease, box-shadow 0.16s ease;
}
.form__input::placeholder {
  color: var(--paper-quiet);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 12.5px;
}
/* The rule thickens with an inset shadow, NOT border-bottom-width: changing a
   border width on focus reflows the field by a pixel and the form twitches as
   you tab through it. */
.form__input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.075);
  box-shadow: inset 0 -2px 0 0 var(--paper);
}
/* Chrome paints autofilled fields pale lavender, which on a monochrome page is
   the single most damaging thing that can happen to it. :-webkit-autofill
   ignores background/background-color, so the only reliable override is a huge
   inset shadow, and it has to be the FLATTENED opaque colour of the field over
   the ground - not the field's own rgba - or autofilled rows will not match the
   empty ones beside them. The bottom rule is re-declared here because this rule
   is !important and box-shadow is a single property. */
.form__input:-webkit-autofill,
.form__input:-webkit-autofill:hover,
.form__input:-webkit-autofill:focus,
.form__input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--field-flat) inset,
                      inset 0 -1px 0 0 var(--line-strong) !important;
          box-shadow: 0 0 0 1000px var(--field-flat) inset,
                      inset 0 -1px 0 0 var(--line-strong) !important;
  -webkit-text-fill-color: var(--paper) !important;
  caret-color: var(--paper);
  transition: background-color 9999s ease-in-out 0s;
}
.form__input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--field-flat) inset,
                      inset 0 -2px 0 0 var(--paper) !important;
          box-shadow: 0 0 0 1000px var(--field-flat) inset,
                      inset 0 -2px 0 0 var(--paper) !important;
}

/* --- consent ------------------------------------------------- */
.form__row--check { margin: 20px 0 0; }
.form__check {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  cursor: pointer;
  text-align: left;
  color: var(--paper-dim);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.01em;
}
/* The OS checkbox is the one control that would drag colour onto a page that
   has none, so it is drawn here. Background-image tick, not ::before, which
   is unreliable on checkboxes across engines. */
.form__check input {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  width: 16px; height: 16px;
  margin: 2px 0 0;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--field);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.form__check input:hover { border-color: var(--paper); }
.form__check input:checked {
  border-color: var(--paper);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.7 6.3l2.9 2.9 5.7-6.4' fill='none' stroke='%23080808' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px 11px no-repeat,
    var(--paper);
}
.form__check a { color: var(--paper); text-underline-offset: 3px; }

/* --- errors: weight and a marker, never colour --------------- */
.form__error {
  margin: 7px 0 0;
  text-align: left;
  color: var(--paper);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.5;
}
.form__error::before { content: "! "; }
.form__error--global { margin-top: 14px; text-align: center; }

/* --- button --------------------------------------------------- */
.btn {
  display: block;
  width: 100%;
  margin: 22px 0 0;
  padding: 16px 18px;
  border: 0;
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);            /* 20:1 */
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(0.78rem, 3.2vw, 0.9rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;          /* shrink type before it can ever wrap */
  cursor: pointer;
  transition: box-shadow 0.18s ease, transform 0.12s ease, opacity 0.15s ease;
}
.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
}
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.btn:disabled { opacity: 0.5; cursor: wait; transform: none; box-shadow: none; }

/* --- success state -------------------------------------------- */
.panel__success .done {
  margin: 0 0 10px;
  font-size: clamp(14px, 4vw, 17px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.panel__success-note { margin: 0 0 10px; color: var(--paper); font-size: 12.5px; }

/* ============================================================
   intl-tel-input - monochrome, styled searchable dropdown
   ============================================================ */
.iti { width: 100%; display: block; }
.iti input.form__input { padding-left: calc(52px + 0.7rem); } /* repadPhone() re-measures */

.iti__selected-country { background: transparent; color: var(--paper); }
.iti__selected-country:hover { background: rgba(255, 255, 255, 0.07); }
.iti__selected-dial-code { color: var(--paper-dim); font-size: 15px; }
.iti__arrow { border-top-color: var(--paper-dim); }
.iti__arrow--up { border-bottom-color: var(--paper-dim); }

.iti__dropdown-content {
  background: #101010;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  color: var(--paper);
  text-align: left;
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.8);
}
/* Vertical padding only: the horizontal values are the vendor's reservation
   for the absolutely positioned search icon (left) and clear button (right).
   A padding SHORTHAND here drops the magnifier on top of the placeholder. */
.iti__search-input {
  padding: 11px 30px 11px 32px;
  background: rgba(255, 255, 255, 0.05);
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 14px;
}
.iti__search-input::placeholder { color: var(--paper-quiet); }
.iti__search-input:focus { outline: none; border-bottom-color: var(--paper); }
.iti__country-list { background: transparent; }
.iti__country { padding: 9px 13px; font-size: 13px; }
.iti__country.iti__highlight { background: rgba(255, 255, 255, 0.14); }
.iti__country:hover { background: rgba(255, 255, 255, 0.09); }
.iti__dial-code { color: var(--paper-dim); }
.iti--inline-dropdown .iti__dropdown-content { z-index: 50; }
/* hidden state must not wait on the vendor stylesheet, or the country list
   flashes open (search box and all) on first paint */
.iti__dropdown-content.iti__hide { display: none !important; }

/* ============================================================
   FOOTER
   ============================================================ */
/* basslayerz pattern, kept across the fleet: full width, rule on top, legal +
   build credit left, privacy right, centred below 640px. Only the palette
   changes on this page. */
.foot {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 100%;
  margin: 0;
  padding: 16px clamp(16px, 4vw, 40px) 20px;
  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: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-quiet);
}
.foot__legal a { color: var(--paper-quiet); text-decoration: none; }
.foot__legal a:hover { color: var(--paper); }
.site-built { margin: 0; }
.site-built a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper-quiet);
  text-decoration: none;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.site-built a:hover { border-color: var(--paper); color: var(--paper); }
/* the Furiosa mark is full colour; grayscale keeps the page monochrome */
.site-built img { display: block; opacity: 0.6; filter: grayscale(1); }
.site-built a:hover img { opacity: 0.95; }
@media (max-width: 640px) {
  .foot { justify-content: center; text-align: center; }
  .foot__left { justify-content: center; }
}

/* ============================================================
   SHORT VIEWPORTS - landscape phones are a first-class layout.
   A rotated phone has almost no height, so the column tightens
   rather than scrolling the button off the bottom.
   ============================================================ */
@media (max-height: 560px) {
  .stage { padding-top: 22px; padding-bottom: 16px; align-items: flex-start; }
  .mark { width: min(46vw, 200px); }
  .term { margin-top: 16px; }
  .term__line { font-size: clamp(11px, 2.2vw, 13px); margin-bottom: 5px; }
  .rule { margin: 14px auto 12px; }
  .lede { margin-bottom: 16px; line-height: 1.6; }
  .form__row { margin-bottom: 10px; }
  .form__input { padding: 10px 12px; }
  .form__row--check { margin-top: 13px; }
  .btn { margin-top: 14px; padding: 12px 16px; }
  .foot { padding: 10px 20px 12px; }
}

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

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