/* ============================================================
   TELETECH AUSTRALIA 2026 - blk.
   Melbourne / Sydney / Brisbane - priority access signup.

   Colour comes straight off the poster: a deep blue sky with crisp
   WHITE type. White is the accent - there is no warm accent colour in
   this design. (The subject's hair is warm, but that is photographic,
   not a brand colour.)

   Type is the poster's own pairing: an industrial grotesque against a
   fine roman serif ("blk.", the act names). The poster's three-up date
   row becomes the show picker.
   ============================================================ */

/* ---------- Fonts ----------
   Sorts Mill Goudy is the artwork's own serif and is SIL OFL, so we host
   it. The artwork's grotesque is Fann Grotesque Pro (Colophon Foundry,
   all rights reserved) plus Benzin Bold - neither is licensed to us for
   web serving, so Archivo stands in until the client confirms a licence. */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/Archivo-var.woff2?v=20260817-4") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sorts Mill Goudy";
  src: url("/assets/fonts/SortsMillGoudy-Regular.woff2?v=20260817-4") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink:      #0C2136;   /* deepest navy - page base */
  --navy:     #143B5C;
  --azure:    #206295;   /* artwork mid sky */
  --sky:      #4A79A3;
  --sky-pale: #8FB2D0;
  --cloud:    #D9E4EE;   /* body text on blue */
  --white:    #FFFFFF;   /* the accent */

  --line:     rgba(217, 228, 238, .22);
  --line-lit: rgba(217, 228, 238, .42);
  --panel-bg: rgba(16, 42, 66, .72);
  --field-bg: rgba(255, 255, 255, .10);
  --field-bg-hi: rgba(255, 255, 255, .16);
  /* Flattened opaque equivalent of field-over-panel-over-background.
     Chrome's :-webkit-autofill ignores background/background-color, so an
     inset box-shadow is the only override - and a shadow cannot be
     translucent, hence the pre-flattened value. */
  --field-flat: #354B5F;
  /* Errors only. Deliberately not a brand accent - the palette is blue
     and white, this exists purely to be distinguishable from it. */
  --alert: #FFB9AE;

  --font-ui: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Sorts Mill Goudy", Georgia, "Times New Roman", serif;

  --gutter: clamp(16px, 4vw, 40px);
}

/* html carries the base colour; body stays transparent so it cannot paint
   over the fixed .bg layer sitting at z-index:-1 */
html {
  background: var(--ink);
  -webkit-text-size-adjust: 100%;
}
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: transparent;
  color: var(--cloud);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }

.sr-only {
  position: absolute !important;
  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 and Edge, which silently blocks real signups. */
.hp-row { display: none !important; }

/* ---------- Background ---------- */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url("/assets/images/bg-mobile.jpg?v=20260817-4");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Light hand: enough depth for white type to hold, without draining the
   sky back to the near-black this design started as and should not be. */
.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 78% at 50% 0%, rgba(56, 118, 174, .28) 0%, transparent 62%),
    linear-gradient(180deg, rgba(12, 33, 54, .18) 0%, rgba(12, 33, 54, .52) 100%);
}
@media (min-aspect-ratio: 7/10) {
  .bg { background-image: url("/assets/images/bg-desktop.jpg?v=20260817-4"); }
}

/* ---------- Sheet / stage ---------- */
.sheet {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}
.stage {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vw, 48px) var(--gutter);
}
.stage__inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(24px, 4vw, 40px);
}

/* ---------- Artwork ---------- */
.art {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}
.art__img {
  width: 100%;
  height: auto;
  border-radius: 3px;
  border: 1px solid var(--line);
  box-shadow: 0 24px 70px rgba(6, 20, 36, .5);
}

/* ---------- Panel ---------- */
.signup {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}
.panel {
  /* isolate so no stacking context inside can rise above the country
     dropdown and make the flag list unclickable */
  isolation: isolate;
  position: relative;
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 0 24px 70px rgba(6, 20, 36, .45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.panel__inner { padding: clamp(22px, 4.4vw, 34px); }

/* exactly one state visible */
.panel__state { display: none; }
.panel[data-form-state="idle"]    .panel__idle    { display: block; }
.panel[data-form-state="success"] .panel__success { display: block; }

.panel__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sky-pale);
}
.panel__eyebrow-hair {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-lit));
}
.panel__eyebrow-hair:first-child {
  flex: 0 0 18px;
  background: var(--line-lit);
}

/* The poster's own move: a bold grotesque line, then the quiet roman
   serif line - TELETECH AUSTRALIA over "blk." */
/* Set uppercase, which is also how the poster sets its serif (the act names
   run TDJ / JOKESONYOU / EVA CHARLEY in caps). Caps are wider than mixed
   case, so the size clamp is a step lower here to keep the longest line
   ("THROUGH THE DOOR.") on one line inside the panel. */
.panel__title {
  margin: 0 0 12px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(1.6rem, 5.4vw, 2.15rem);
  line-height: 1.06;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--white);
  text-wrap: balance;
}
.panel__title em {
  display: block;
  font-family: var(--font-display);
  font-style: normal;      /* the artwork's serif is roman, not italic */
  font-weight: 400;
  /* Stepped down from the grotesque line above it. Serif caps set much wider
     than the same size in mixed case, and at the title size "THROUGH THE
     DOOR." broke across two lines mid-phrase. */
  font-size: clamp(1.2rem, 4.1vw, 1.7rem);
  line-height: 1.12;
  /* caps need air; the negative tracking that suits lowercase closes them up */
  letter-spacing: .02em;
  color: var(--sky-pale);
}
.panel__lede {
  margin: 0 0 22px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--cloud);
}
.panel__lede strong { color: var(--white); font-weight: 600; }
.panel__success-note {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-left: 2px solid var(--white);
  background: rgba(255, 255, 255, .10);
  font-size: 14px;
  color: var(--white);
}

/* ---------- The show picker: the poster's date row ----------
   date / venue / city, hairline-separated, the same hierarchy the artwork
   sets across the top of the poster. Multi-select: people can register for
   more than one night, so these are checkboxes with an explicit box. */
.dates {
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--line);
}
.dates__legend {
  padding: 0;
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sky-pale);
}
.dates__hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: rgba(217, 228, 238, .72);
}
.date {
  display: block;
  position: relative;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.date input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
  pointer-events: none;
}
.date__face {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "box when  city"
    "box venue city";
  align-items: baseline;
  gap: 1px 12px;
  padding: 12px 14px 12px 14px;
  border-left: 2px solid transparent;
  transition: background-color .18s ease, border-color .18s ease;
}
/* Explicit box, because multi-select has to look multi-select */
.date__box {
  grid-area: box;
  align-self: center;
  width: 18px; height: 18px;
  border: 1.5px solid var(--line-lit);
  border-radius: 2px;
  position: relative;
  flex: 0 0 auto;
  transition: background-color .18s ease, border-color .18s ease;
}
.date__box::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid var(--ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(.6);
  opacity: 0;
  transition: opacity .15s ease, transform .15s ease;
}
/* All three tiers set uppercase, matching the panel title. */
.date__when {
  grid-area: when;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sky-pale);
  font-variant-numeric: tabular-nums;
}
.date__venue {
  grid-area: venue;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;   /* caps close up under negative tracking */
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.25;
}
.date__city {
  grid-area: city;
  align-self: center;
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: .03em;   /* serif caps need the most air of the three */
  text-transform: uppercase;
  color: var(--sky-pale);
  white-space: nowrap;
}
.date:hover .date__face { background: rgba(255, 255, 255, .06); }
.date:hover .date__box  { border-color: var(--white); }
.date input:checked + .date__face {
  background: rgba(255, 255, 255, .12);
  border-left-color: var(--white);
}
.date input:checked + .date__face .date__box {
  background: var(--white);
  border-color: var(--white);
}
.date input:checked + .date__face .date__box::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}
.date input:checked + .date__face .date__city { color: var(--white); }
.date input:focus-visible + .date__face {
  outline: 2px solid var(--white);
  outline-offset: -2px;
}

/* ---------- Form ---------- */
.form__row { margin: 0 0 14px; }
/* labels are sr-only, never display:none - placeholders carry the meaning
   visually, the label stays for screen readers */
.form__label {
  position: absolute !important;
  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: 13px 14px;
  background: var(--field-bg);
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.3;
  transition: border-color .18s ease, background-color .18s ease;
}
.form__input::placeholder { color: rgba(217, 228, 238, .58); }
.form__input:hover { background: var(--field-bg-hi); }
.form__input:focus {
  outline: none;
  border-color: var(--white);
  background: var(--field-bg-hi);
}

/* Chrome paints autofilled inputs pale lavender and ignores
   background/background-color on :-webkit-autofill. An inset box-shadow is
   the only reliable override, and it must be the flattened OPAQUE colour of
   the field's rendered stack or it will not match the empty fields beside
   it. The 9999s transition stops Chrome flashing lavender before it 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 var(--field-flat) inset !important;
          box-shadow: 0 0 0 1000px var(--field-flat) inset !important;
  -webkit-text-fill-color: var(--white) !important;
  caret-color: var(--white);
  transition: background-color 9999s ease-in-out 0s;
}

.form__error {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--alert);
}
.form__error--global { margin-top: 12px; }

.form__row--check { margin: 18px 0 20px; }
.form__check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(217, 228, 238, .9);
  cursor: pointer;
}
.form__check input {
  flex: 0 0 auto;
  width: 17px; height: 17px;
  margin: 1px 0 0;
  accent-color: var(--white);
  cursor: pointer;
}
.form__check a { color: var(--white); text-underline-offset: 2px; }
.form__check a:hover { color: var(--sky-pale); }

/* ---------- Button ----------
   White on blue, the poster's own contrast. */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 18px;
  border: 0;
  border-radius: 2px;
  font-family: var(--font-ui);
  font-size: clamp(.8rem, 3.4vw, .95rem);
  font-weight: 700;
  letter-spacing: clamp(.06em, .5vw, .14em);
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;      /* shrink type before it can wrap to two lines */
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
}
.btn--primary {
  background: var(--white);
  color: var(--ink);
}
.btn--primary:hover:not(:disabled) { background: var(--cloud); }
.btn--primary:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: default; }

/* ---------- intl-tel-input ---------- */
/* The hidden state lives in the vendor stylesheet; until it loads the whole
   country list would flash open on first paint. */
.iti__dropdown-content.iti__hide { display: none !important; }
.iti { width: 100%; display: block; }
.iti input.form__input {
  /* app.js re-measures the flag chip and overrides this inline; the static
     value only has to be sane before that lands */
  padding-left: calc(52px + .7rem);
}
.iti__country-container { z-index: 3; }
.iti__selected-country {
  background: transparent;
  border-radius: 2px 0 0 2px;
}
.iti__selected-country:hover { background: rgba(255, 255, 255, .10); }
.iti__selected-dial-code { color: var(--cloud); font-size: 14px; }
.iti__dropdown-content {
  background: #12314C;
  border: 1px solid var(--line-lit);
  border-radius: 3px;
  box-shadow: 0 18px 44px rgba(6, 20, 36, .55);
  color: var(--cloud);
}
/* The vendor reserves padding-left:30px / padding-right:28px on the search
   input to clear its absolutely positioned magnifier and clear button. A
   padding SHORTHAND wipes that reservation and the icon lands on top of the
   word "Search" - so set the vertical padding but keep the horizontal. */
.iti__search-input {
  padding: 10px 30px 10px 32px;
  background: rgba(255, 255, 255, .08);
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 14px;
}
.iti__search-input::placeholder { color: rgba(217, 228, 238, .6); }
.iti__search-input:focus { outline: none; background: rgba(255, 255, 255, .13); }
.iti__country-list { scrollbar-width: thin; }
.iti__country {
  padding: 9px 12px;
  font-size: 14px;
  color: var(--cloud);
}
.iti__country.iti__highlight,
.iti__country:hover { background: rgba(255, 255, 255, .16); color: var(--white); }
.iti__country-name { color: inherit; }
.iti__dial-code { color: var(--sky-pale); }
.iti__divider { border-bottom: 1px solid var(--line); }

/* ---------- Footer (full width, basslayerz shape) ---------- */
.foot {
  flex-shrink: 0;
  width: 100%;
  margin: 0;
  padding: 18px var(--gutter) 26px;
  background: rgba(9, 26, 44, .62);
  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: rgba(217, 228, 238, .78);
  letter-spacing: .02em;
}
.foot__legal a { color: inherit; text-decoration: none; }
.foot__legal a:hover { color: var(--white); text-decoration: underline; }
.site-built { margin: 0; font-size: 12px; }
.site-built a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(217, 228, 238, .64);
  text-decoration: none;
}
.site-built a:hover { color: var(--white); }
.site-built img { display: inline-block; opacity: .85; }

/* ============================================================
   LAYOUT BREAKPOINTS

   Aspect-ratio thresholds rather than width alone: width-only
   breakpoints leave gaps at squarish window shapes (~570-900px)
   where neither the phone nor the desktop treatment applies.
   ============================================================ */

/* Two-column: artwork left, form right */
@media (min-width: 900px) and (min-aspect-ratio: 7/10) {
  .stage__inner {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(28px, 4vw, 56px);
  }
  .art {
    flex: 1 1 46%;
    max-width: 520px;
    margin: 0;
  }
  .art__img { max-height: calc(100svh - 150px); width: auto; margin-left: auto; }
  .signup {
    flex: 1 1 46%;
    max-width: 470px;
    margin: 0;
  }
}

@media (min-width: 1200px) and (min-aspect-ratio: 7/10) {
  .art__img { max-height: calc(100svh - 170px); }
}

/* Landscape phones are a first-class layout, not an afterthought: a rotated
   phone (844x390, 932x430, 667x375) satisfies the width/aspect conditions
   above but has almost no height, so the desktop grid renders cramped.
   Placed AFTER the desktop blocks so it wins at equal specificity. */
@media (min-width: 640px) and (min-aspect-ratio: 7/10) and (max-height: 520px) {
  .stage {
    padding: 14px var(--gutter);
    align-items: flex-start;
  }
  .stage__inner {
    flex-direction: row;
    align-items: start;
    gap: 20px;
    min-height: 0;
  }
  .art {
    flex: 0 0 auto;
    max-width: none;
    margin: 0;
  }
  .art__img {
    max-height: calc(100svh - 40px);
    width: auto;
    margin: 0;
  }
  .signup { flex: 1 1 auto; max-width: 420px; }
  .panel__inner { padding: 16px 18px; }
  .panel__title { font-size: 1.35rem; margin-bottom: 8px; }
  .panel__lede { font-size: 13px; margin-bottom: 14px; }
  .panel__eyebrow { margin-bottom: 10px; font-size: 10px; }
  .dates { margin-bottom: 14px; }
  .date__face { padding: 8px 12px; }
  .date__venue { font-size: 14px; }
  .date__city { font-size: 15px; }
  .form__row { margin-bottom: 10px; }
  .form__input { padding: 10px 12px; font-size: 14px; }
  .form__row--check { margin: 12px 0 14px; }
  .btn { padding: 12px 16px; }
}

/* Narrow phones */
@media (max-width: 400px) {
  .panel__inner { padding: 20px 18px; }
  .date__face {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "box when"
      "box venue"
      "box city";
    gap: 0 12px;
  }
  .date__city { align-self: start; font-size: 16px; }
}

/* ---------- Accessibility ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.iti__selected-country:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}