/* ============================================================
   RESTRICTED · Sydney Showgrounds · Fri 25 September 2026
   Waiting-list sign-up — sydney.restrictedthereturn.com

   Layout is the fleet standard: ARTWORK LEFT, SIGN-UP BOX RIGHT once
   there is width for it, stacking to artwork-above / box-below on phones
   and portrait tablets. Supplied photography sits behind everything.

   The design idea: in the STACKED flow the panel's dark card fades up
   behind the foot of the artwork so poster and form read as one printed
   object rather than two blocks. Side by side there is nothing to weld,
   so that gradient is cancelled inside the two-column block — gotcha 17,
   a rule written for one flow leaking into the other.

   (Revision, 30 Jul: the first artwork ended in a white band reading
   "SIGN UP TO JOIN THE WAITING LIST", so the panel deliberately carried
   no heading — the poster had already said it. The replacement overlay
   drops that band, so the panel title now carries the call to action.)
   ============================================================ */

/* Archivo variable (SIL OFL). One file, two voices: the wdth axis gives
   the condensed uppercase used for labels/eyebrow/button — which rhymes
   with the poster's own lower band — and normal width for prose. */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2?v=20260730-5") format("woff2-variations"),
       url("../fonts/archivo-var.woff2?v=20260730-5") format("woff2");
  font-weight: 400 700;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Sampled from the supplied artwork and photography — not invented. */
  --vermilion:     #E13900;   /* the RESTRICTED wordmark, exact */
  --vermilion-hot: #FF4A10;   /* hover/active lift */
  --ink:           #0B0B0C;   /* page base */
  --paper:         #F2EFEA;   /* the artist's tee */
  --smoke:         #9C978F;   /* stone from the background photograph */
  --smoke-dim:     #6E6A65;

  --card:        rgba(9, 9, 10, 0.86);
  --field:       rgba(242, 239, 234, 0.05);
  --field-hover: rgba(242, 239, 234, 0.08);
  --rule:        rgba(242, 239, 234, 0.13);
  --rule-strong: rgba(242, 239, 234, 0.30);

  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --col:   clamp(300px, 94vw, 500px);   /* the single column width */
  --pad-x: clamp(16px, 4vw, 40px);
}

/* gotcha 16: html carries the base colour. If body gets an opaque
   background it paints OVER the fixed z-index:-1 .bg layer and the
   photography disappears. body stays transparent. */
html {
  background: var(--ink);
  -webkit-text-size-adjust: 100%;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: transparent;
  color: var(--paper);
  font-family: var(--sans);
  font-variation-settings: "wdth" 100;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

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

/* ============================================================
   BACKGROUND — client photography, fixed, with a scrim so the
   vermilion artwork and the form text always clear it.
   ============================================================ */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url("../images/bg-mobile.jpg?v=20260730-5");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 70% at 50% 26%, rgba(11, 11, 12, 0.22) 0%, rgba(11, 11, 12, 0.68) 62%, rgba(11, 11, 12, 0.9) 100%),
    linear-gradient(180deg, rgba(11, 11, 12, 0.72) 0%, rgba(11, 11, 12, 0.34) 30%, rgba(11, 11, 12, 0.82) 100%);
}
@media (min-width: 760px) {
  .bg { background-image: url("../images/bg-desktop.jpg?v=20260730-5"); }
}

/* ============================================================
   STAGE
   ============================================================ */
.stage {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: clamp(18px, 4vw, 44px) var(--pad-x) 0;
}

.hero {
  width: var(--col);
  display: flex;
  flex-direction: column;
  margin: 0 auto;              /* gotcha 10: auto at EVERY breakpoint */
  padding-bottom: clamp(30px, 6vw, 56px);
}

/* ---------- Poster ----------
   The card materialises under the artwork's lower third so the date/venue
   line and the partner logos land on the panel's field. That gradient is
   the weld — poster and form read as one object in the stacked flow. */
.poster {
  position: relative;
  margin: 0;
  background: linear-gradient(
    180deg,
    rgba(9, 9, 10, 0) 0%,
    rgba(9, 9, 10, 0) 62%,
    rgba(9, 9, 10, 0.44) 80%,
    var(--card) 93%
  );
}
.poster img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Sign-up panel ----------
   Class stays `.panel`: app.js roots itself on this selector and early
   returns if it is missing, which silently kills the whole form. */
.panel {
  isolation: isolate;          /* gotcha 5: keeps the flag dropdown clickable */
  margin: 0 auto;
  padding: 6px clamp(18px, 5vw, 30px) clamp(24px, 5vw, 32px);
  background: var(--card);
  border: 1px solid var(--rule);
  border-top: 0;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* Exactly one state wrapper visible at a time. Each carries its own full
   eyebrow + copy shape, or the idle content stays stacked underneath. */
.panel__idle,
.panel__success { display: none; }
.panel[data-form-state="idle"]    .panel__idle    { display: block; }
.panel[data-form-state="success"] .panel__success { display: block; }

.panel__eyebrow {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  font-variation-settings: "wdth" 76;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--vermilion);
}

/* The <em> is a forced second line, not emphasis — the type is identical,
   it only breaks the phrase. gotcha 8: never white-space:nowrap a display
   title; let it wrap and balance instead, or it reads as off-centre at the
   top of the clamp. */
.panel__title {
  margin: 0 0 12px;
  font-weight: 700;
  font-variation-settings: "wdth" 82;
  font-size: clamp(1.5rem, 4.6vw, 2rem);
  line-height: 1.02;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--paper);
}
.panel__title em {
  display: block;
  font-style: normal;
}

.panel__lede {
  margin: 0 0 20px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--smoke);
}
.panel__lede strong { color: var(--paper); font-weight: 600; }

/* ============================================================
   FORM
   ============================================================ */
.form { margin: 0; }
.form__row { margin: 0 0 14px; }

/* Spam trap. display:none ONLY — off-screen positioning gets autofilled
   by Chrome/Edge, which silently blocks genuine sign-ups. */
.form__honeypot { display: none !important; }

/* Labels stay for screen readers; placeholders carry the meaning visually. */
.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;
}

.form__input {
  width: 100%;
  padding: 14px 14px;
  font-family: var(--sans);
  font-size: 16px;             /* 16px min or iOS zooms the page on focus */
  line-height: 1.2;
  color: var(--paper);
  background: var(--field);
  border: 1px solid var(--rule);
  border-radius: 3px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.form__input::placeholder { color: var(--smoke-dim); }
.form__input:hover { background: var(--field-hover); }
.form__input:focus {
  outline: none;
  background: var(--field-hover);
  border-color: var(--vermilion);
  box-shadow: 0 0 0 3px rgba(225, 57, 0, 0.16);
}

/* ---------- Consent ---------- */
.form__row--check { margin: 18px 0; }
.form__check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  cursor: pointer;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--smoke);
}
.form__check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
  accent-color: var(--vermilion);
  cursor: pointer;
}
.form__check a { color: var(--paper); text-underline-offset: 2px; }
.form__check a:hover { color: var(--vermilion-hot); }

/* ---------- Button ----------
   gotcha 26: a long uppercase tracked label wraps on 320px phones. Shrink
   the type before it can wrap, never let it break or overflow. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 18px;
  font-family: var(--sans);
  font-weight: 700;
  font-variation-settings: "wdth" 80;
  font-size: clamp(0.8rem, 3.4vw, 0.95rem);
  letter-spacing: clamp(0.05em, 0.5vw, 0.14em);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 3px;
  transition: background 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
}
.btn--primary {
  color: var(--ink);
  background: var(--vermilion);
}
.btn--primary:hover:not(:disabled) { background: var(--vermilion-hot); }
.btn--primary:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.6; cursor: default; }
.btn__arrow { font-size: 1.05em; line-height: 1; }

/* ---------- Errors ---------- */
.form__error {
  margin: 7px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: #FF7A52;
}
.form__error--global { margin-top: 14px; text-align: center; }

/* ---------- Success ---------- */
.panel__success { padding-top: 4px; }
/* gotcha 7: scope state paragraph rules so they cannot out-specify the
   eyebrow, which is also a <p>. */
.panel__success p:not(.panel__eyebrow) {
  margin: 0 0 12px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--smoke);
}
.panel__success p:not(.panel__eyebrow) strong { color: var(--paper); font-weight: 600; }
.panel__success-note {
  padding: 11px 13px;
  border-left: 2px solid var(--vermilion);
  background: var(--field);
  color: var(--paper) !important;
}

/* ============================================================
   FOOTER — full width, edge to edge (basslayerz house design)
   ============================================================ */
.foot {
  flex-shrink: 0;
  width: 100%;
  margin: 0;
  padding: 18px var(--pad-x) 26px;
  background: rgba(6, 6, 7, 0.62);
  border-top: 1px solid var(--rule);
  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;
  letter-spacing: 0.02em;
  color: var(--smoke);
}
.foot__legal a { color: var(--smoke); 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;
  padding: 5px 11px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--smoke);
  text-decoration: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
}
.site-built a:hover { border-color: var(--vermilion); color: var(--paper); }
.site-built img { display: block; opacity: 0.9; }

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

/* ============================================================
   INTL-TEL-INPUT v25 — dropdown + search box
   Brief asked for this to be designed properly, and for NO full-screen
   takeover on mobile (useFullscreenPopup:false in app.js), so the panel
   is styled as an inline dropdown at every size.
   ============================================================ */
.iti { width: 100%; display: block; }
.iti__tel-input, .iti input[type="tel"] { width: 100%; }

/* gotcha 19: the hidden state lives in the vendor stylesheet. Until that
   loads, the whole country list paints open on first frame. */
.iti__dropdown-content.iti__hide { display: none !important; }

.iti--separate-dial-code .iti__selected-country,
.iti__selected-country {
  background: transparent;
  border-radius: 3px 0 0 3px;
}
.iti__selected-country:hover,
.iti__selected-country-primary:hover { background: var(--field-hover); }
.iti__selected-dial-code {
  color: var(--paper);
  font-size: 15px;
  font-variation-settings: "wdth" 88;
}
.iti__arrow { border-top-color: var(--smoke); }
.iti__arrow--up { border-bottom-color: var(--smoke); }

.iti__dropdown-content {
  background: #0E0E10;
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  box-shadow: 0 26px 58px rgba(0, 0, 0, 0.72);
  overflow: hidden;
}

/* Search box: vermilion caret + focus rule, so it reads as part of the
   same object as the form fields rather than vendor furniture. */
.iti__search-input {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--paper);
  caret-color: var(--vermilion);
  background: var(--field);
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
}
.iti__search-input::placeholder { color: var(--smoke-dim); }
.iti__search-input:focus {
  outline: none;
  background: var(--field-hover);
  border-bottom-color: var(--vermilion);
}

.iti__country-list {
  max-height: 244px;
  background: transparent;
  scrollbar-width: thin;
  scrollbar-color: var(--rule-strong) transparent;
}
.iti__country-list::-webkit-scrollbar { width: 8px; }
.iti__country-list::-webkit-scrollbar-track { background: transparent; }
.iti__country-list::-webkit-scrollbar-thumb {
  background: var(--rule-strong);
  border-radius: 999px;
}

.iti__country {
  padding: 9px 14px 9px 12px;
  font-size: 14px;
  color: var(--smoke);
  border-left: 2px solid transparent;
}
.iti__country.iti__highlight,
.iti__country:hover {
  background: var(--field-hover);
  border-left-color: var(--vermilion);
  color: var(--paper);
}
.iti__country-name { color: inherit; }
.iti__dial-code { color: var(--smoke-dim); }
.iti__divider { border-bottom-color: var(--rule); }

/* ============================================================
   PRIVACY PAGE
   ============================================================ */
.legal-wrap { background: var(--ink); }
.legal {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 52px) var(--pad-x) 70px;
}
.legal__back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 26px;
  padding: 7px 16px 7px 12px;
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  color: var(--paper);
  text-decoration: none;
  font-size: 12.5px;
}
.legal__back:hover { background: var(--field); border-color: var(--vermilion); }
.legal__back-arrow { display: flex; width: 15px; height: 15px; }
.legal__back-arrow svg { width: 100%; height: 100%; }
.legal h1 {
  margin: 0 0 8px;
  font-weight: 700;
  font-variation-settings: "wdth" 84;
  font-size: clamp(1.7rem, 5.4vw, 2.4rem);
  line-height: 1.06;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--paper);
}
.legal__sub {
  margin: 0 0 30px;
  font-size: 12px;
  font-variation-settings: "wdth" 78;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--vermilion);
}
.legal h2 {
  margin: 30px 0 10px;
  font-size: 12.5px;
  font-weight: 700;
  font-variation-settings: "wdth" 78;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
}
.legal p, .legal li {
  margin: 0 0 12px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--smoke);
}
.legal ul { margin: 0 0 14px; padding-left: 20px; }
.legal li { margin-bottom: 7px; }
.legal a { color: var(--paper); }
.legal a:hover { color: var(--vermilion-hot); }
.legal strong { color: var(--paper); }
.legal__meta {
  margin-top: 34px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-size: 12.5px;
  color: var(--smoke-dim);
}

/* ============================================================
   TWO COLUMNS — artwork left, sign-up box right

   gotcha 20: the threshold is an ASPECT RATIO plus a width, never width
   alone. Width alone leaves a gap at squarish window shapes (~570–900px)
   where neither the phone nor the desktop treatment applies. Two columns
   need poster(≈420) + gap(56) + panel(440) + page padding(80) ≈ 1000px of
   real width, so 980px with a 7/10 ratio floor is the honest threshold.
   ============================================================ */
@media (min-width: 980px) and (min-aspect-ratio: 7/10) {
  .stage { justify-content: center; }
  .hero {
    width: min(100%, 1080px);
    flex-direction: row;
    align-items: center;
    gap: clamp(36px, 4.4vw, 64px);
    margin: 0 auto;              /* gotcha 10: auto at EVERY breakpoint */
    padding-bottom: clamp(28px, 4vw, 48px);
  }
  .poster {
    flex: 1 1 47%;
    display: flex;
    justify-content: center;
    background: none;            /* weld is a stacked-flow idea only */
  }
  .poster img {
    width: auto;
    max-width: 100%;
    max-height: calc(100svh - 168px);
  }
  .panel {
    flex: 1 1 53%;
    max-width: 470px;
    padding: clamp(24px, 2.6vw, 32px) clamp(22px, 2.4vw, 32px) clamp(26px, 2.8vw, 34px);
    border-top: 1px solid var(--rule);
    border-radius: 4px;
  }
}

/* ============================================================
   LANDSCAPE PHONES (gotcha 27)
   A rotated phone is 844×390 / 667×375: wide enough to look like a
   desktop, but with no vertical room for a 0.72-ratio poster. It falls
   BELOW the 980px two-column threshold, so without this block it would
   get the stacked treatment and scroll badly. Side by side, artwork hard
   height-capped, tighter everything. Sits LAST so it wins at equal
   specificity against the desktop block above.
   ============================================================ */
@media (min-width: 640px) and (min-aspect-ratio: 7/10) and (max-height: 560px) {
  .stage { padding-top: 14px; justify-content: flex-start; }
  .hero {
    width: min(100%, 880px);
    flex-direction: row;
    align-items: start;          /* not stretch — the art must not grow */
    gap: clamp(18px, 3vw, 32px);
    padding-bottom: 18px;
    min-height: 0;
  }
  .poster {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    background: none;            /* no weld when they sit side by side */
  }
  .poster img {
    width: auto;
    max-width: 100%;
    max-height: calc(100svh - 96px);
  }
  .panel {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    padding: 16px clamp(16px, 2.4vw, 24px) 20px;
    border-top: 1px solid var(--rule);
    border-radius: 4px;
  }
  .panel__title { margin-bottom: 8px; font-size: clamp(1.25rem, 2.6vw, 1.55rem); }
  .panel__title em { display: inline; }   /* no room for a second line here */
  .panel__lede { margin-bottom: 14px; font-size: 13.5px; }
  .form__row { margin-bottom: 10px; }
  .form__input { padding: 11px 13px; }
  .form__row--check { margin: 13px 0; }
}

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

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