/* ============================================================
   USTAD RAHAT FATEH ALI KHAN + SHAHZAMAN ALI KHAN
   "Once Upon a Time..."  -  The O2, London  -  Sun 18 April 2027
   Priority-access sign-up.  rahatlive.co.uk

   Visual language taken from the client's layered artwork: warm
   near-black and gold. Every
   colour below is sampled from the supplied PNGs, not guessed.

   The poster is the hero and stays sharp. The page behind it is
   the SAME scene rendered out of focus, so no crop decision is
   ever needed and nothing competes with the artwork.

   The artwork carries the whole message - title, artists, venue,
   date and sponsors are all baked into the client's poster - so the
   page around it stays deliberately quiet: one opaque panel, one
   gold hairline, and no marks of our own under the print.
   ============================================================ */

/* Marcellus (OFL): Trajan-descended inscriptional roman. Rhymes with the
   engraved gold capitals of the RAHAT lockup without imitating them. */
@font-face {
  font-family: "Marcellus";
  src: url("/assets/fonts/Marcellus-400.woff2?v=20260814-2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
/* Archivo (OFL): one variable file covers the whole body/UI range. */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/Archivo-var.woff2?v=20260814-2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* --- sampled from the artwork --- */
  --ink:        #0F0702;   /* the poster's dominant black - warm, never neutral */
  --ember:      #241206;   /* panel ground: the bronze between the black and the cloth */
  --zari:       #CB9951;   /* primary gold, sampled from the stage flare */
  --zari-hi:    #F0C98A;   /* highlight gold */
  --zari-deep:  #8B662F;   /* recessed gold - hairlines, unaccented beats */
  --parchment:  #F4E9D8;   /* body ink - warm cream, not white */
  --muted:      rgba(244, 233, 216, 0.66);
  --err:        #E8907F;

  /* Opaque on purpose. A translucent field would make the Chrome autofill
     box-shadow a compositing guess; this way it is simply this hex. */
  --field:      #2E1D11;
  --line:       rgba(203, 153, 81, 0.30);

  --font:       "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-disp:  "Marcellus", "Hoefler Text", Georgia, serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--parchment);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* html carries the base colour; body stays transparent so it can never paint
   over the z-index:-1 background layer. */
html { background: var(--ink); }
body {
  position: relative;
  background: transparent;
  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; }

/* ============================================================
   BACKGROUND - the poster's own scene, out of focus
   ============================================================ */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("/assets/images/bg-mobile.webp?v=20260814-2") center center / cover no-repeat,
              var(--ink);
}
/* Settles the blur toward black at the edges so the type always has ground
   under it, whatever the viewport crop happens to expose. */
.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 42%, rgba(15, 7, 2, 0.12) 0%, rgba(15, 7, 2, 0.62) 58%, rgba(15, 7, 2, 0.92) 100%),
    linear-gradient(180deg, rgba(15, 7, 2, 0.55) 0%, rgba(15, 7, 2, 0.25) 30%, rgba(15, 7, 2, 0.78) 100%);
}
@media (max-aspect-ratio: 7/10) and (max-width: 500px) {
  .bg { background-image: url("/assets/images/bg-mobile-sm.webp?v=20260814-2"); }
}
@media (min-aspect-ratio: 7/10) {
  .bg { background-image: url("/assets/images/bg-desktop.webp?v=20260814-2"); }
}
@media (min-aspect-ratio: 7/10) and (max-width: 1500px) {
  .bg { background-image: url("/assets/images/bg-desktop-sm.webp?v=20260814-2"); }
}

/* ============================================================
   SHEET / STAGE
   ============================================================ */
.sheet {
  position: relative;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}
.stage { flex: 1 0 auto; display: flex; flex-direction: column; width: 100%; }
.stage__inner {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 54px) clamp(16px, 5vw, 56px);
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 4vw, 44px);
}

/* ============================================================
   ART COLUMN - the client poster, presented as a printed object
   ============================================================ */
.art { text-align: center; }
.art__poster {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  margin: 0 auto;
  /* one hairline of gold thread around the print, and the weight of the
     board it is printed on. No radius - the poster is not a card. */
  box-shadow:
    0 0 0 1px rgba(203, 153, 81, 0.34),
    0 26px 60px -18px rgba(0, 0, 0, 0.85);
}

/* ============================================================
   PANEL - an opaque block of ember with a zari hairline.
   Deliberately not frosted glass: the artwork's material is gold
   thread on cloth, and an opaque ground makes the Chrome autofill
   colour exact rather than a compositing guess.
   ============================================================ */
.panel {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  background: var(--ember);
  box-shadow:
    inset 0 0 0 1px var(--line),
    0 30px 70px -24px rgba(0, 0, 0, 0.9);
}
.panel__inner {
  position: relative;
  z-index: 1;
  padding: clamp(24px, 3.6vw, 38px) clamp(20px, 3.2vw, 34px) clamp(26px, 3.6vw, 36px);
}

/* --- state machine: 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 type --- */
.panel__eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 15px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--zari);
}
.panel__eyebrow-hair {
  flex: 0 0 auto;
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, rgba(203, 153, 81, 0), var(--zari));
}
.panel__title {
  margin: 0 0 13px;
  font-family: var(--font-disp);
  font-size: clamp(30px, 4.2vw, 42px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: 0.004em;
  text-wrap: balance;
}
.panel__title em {
  font-style: normal;               /* the gold IS the emphasis */
  color: var(--zari);
}
/* Class-based only. A state-scoped element rule (.panel__success p {...})
   would out-specify .panel__eyebrow and silently restyle it. */
.panel__lede {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 15px;
}
.panel__lede strong { color: var(--parchment); font-weight: 600; }
.panel__lede em { font-style: italic; color: var(--parchment); }
.panel__success-note {
  margin: 0 0 12px;
  color: var(--zari);
  font-size: 15px;
}

/* ============================================================
   FORM
   ============================================================ */
.form { margin: 0; }
.form__row { margin: 0 0 15px; }
.form__label {
  display: block;
  margin: 0 0 6px;
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--zari-deep);
}
.form__input {
  display: block;
  width: 100%;
  padding: 13px 14px;
  background: var(--field);
  border: 1px solid rgba(244, 233, 216, 0.16);
  border-radius: 0;
  color: var(--parchment);
  font-family: var(--font);
  font-size: 16px;                  /* >=16px stops iOS zoom-on-focus */
  line-height: 1.3;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form__input::placeholder { color: rgba(244, 233, 216, 0.46); }
.form__input:focus {
  outline: none;
  border-color: var(--zari);
  box-shadow: inset 0 0 0 1px rgba(203, 153, 81, 0.4);
}

/* MANDATORY (build-contract): Chrome paints autofilled fields pale lavender
   and ignores `background` on :-webkit-autofill. The only reliable override
   is a huge inset box-shadow, and its colour must be the flattened OPAQUE
   equivalent of the field. Ours is opaque already, so it is var(--field)
   exactly. The 9999s transition stops the lavender flashing in first. */
.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) inset !important;
          box-shadow: 0 0 0 1000px var(--field) inset !important;
  -webkit-text-fill-color: var(--parchment) !important;
  caret-color: var(--parchment);
  transition: background-color 9999s ease-in-out 0s;
}

.form__row--check { margin-top: 18px; }
.form__check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.form__check input {
  flex: 0 0 auto;
  width: 17px; height: 17px;
  margin: 2px 0 0;
  accent-color: var(--zari);
  cursor: pointer;
}
.form__check a { color: var(--zari); text-decoration: underline; text-underline-offset: 2px; }
.form__check a:hover { color: var(--zari-hi); }

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

/* --- buttons --- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 20px 0 0;
  padding: 15px 18px;
  border: 0;
  border-radius: 0;
  font-family: var(--font);
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.btn--primary {
  background: var(--zari);
  color: #1A0E05;
  /* shrink type before it can wrap - never let a CTA break to two lines */
  white-space: nowrap;
  font-size: clamp(0.82rem, 3.3vw, 1rem);
  letter-spacing: clamp(0.08em, 0.5vw, 0.18em);
  text-transform: uppercase;
}
.btn--primary:hover:not(:disabled) { background: var(--zari-hi); }
.btn--primary:disabled { opacity: 0.6; cursor: wait; }

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

.iti__selected-country { background: transparent; color: var(--parchment); }
.iti__selected-country:hover { background: rgba(203, 153, 81, 0.09); }
.iti__selected-dial-code { color: var(--muted); font-size: 15px; }
.iti__arrow { border-top-color: var(--zari); }
.iti__arrow--up { border-bottom-color: var(--zari); }

.iti__dropdown-content {
  background: #1B0E05;
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--parchment);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.72);
  overflow: hidden;
}
/* The search box. NOTE the horizontal padding: the vendor reserves 30px left
   and 28px right for the absolutely-positioned magnifier and clear button.
   A `padding` SHORTHAND wipes that reservation and drops the magnifier on top
   of the word "Search" (client-reported on djagonline.com, 2026-08-03), so the
   vertical value is set while the horizontal reservation is kept. */
.iti__search-input {
  width: 100%;
  padding: 11px 30px 11px 32px;
  background: var(--field);
  border: none;
  border-bottom: 1px solid var(--line);
  color: var(--parchment);
  font-family: var(--font);
  font-size: 15px;
}
.iti__search-input::placeholder { color: rgba(244, 233, 216, 0.46); }
.iti__search-input:focus { outline: none; border-bottom-color: var(--zari); }
.iti__search-icon { color: var(--zari-deep); }

.iti__country-list { background: transparent; scrollbar-color: var(--zari-deep) #1B0E05; }
.iti__country { padding: 9px 14px; font-size: 14.5px; }
.iti__country.iti__highlight { background: rgba(203, 153, 81, 0.18); }
.iti__country:hover { background: rgba(203, 153, 81, 0.1); }
.iti__dial-code { color: var(--muted); }
.iti--inline-dropdown .iti__dropdown-content { z-index: 50; }
/* The hidden state must not wait on the vendor stylesheet, or the country list
   flashes open on first paint. */
.iti__dropdown-content.iti__hide { display: none !important; }

/* ============================================================
   FOOTER - basslayerz pattern, full width
   ============================================================ */
.foot {
  flex-shrink: 0;
  width: 100%;
  margin: 0;
  padding: 16px clamp(16px, 4vw, 40px) 20px;
  border-top: 1px solid rgba(203, 153, 81, 0.2);
  background: rgba(9, 5, 2, 0.72);
  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: var(--muted); letter-spacing: 0.02em; }
.foot__legal a { color: var(--muted); text-decoration: none; }
.foot__legal a:hover { color: var(--zari); }
.site-built { margin: 0; }
.site-built a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-decoration: none;
  padding: 5px 11px;
  border: 1px solid rgba(244, 233, 216, 0.16);
  border-radius: 999px;
}
.site-built a:hover { border-color: var(--zari); color: var(--parchment); }
.site-built img { display: block; opacity: 0.9; }
@media (max-width: 640px) {
  .foot { justify-content: center; text-align: center; }
  .foot__left { justify-content: center; }
}

/* ============================================================
   LAYOUT - artwork left, sign-up right.
   Aspect-ratio thresholds, not width alone: width-only breakpoints
   leave gaps at squarish window shapes where neither treatment applies.
   ============================================================ */
@media (min-width: 860px) and (min-aspect-ratio: 7/10) {
  .stage__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.94fr);
    align-items: center;
    gap: clamp(32px, 5vw, 76px);
  }
  .art { text-align: left; }
  .art__poster { margin: 0; max-width: min(42vw, 520px); }
  /* margin-left stays auto - never margin:0, which is what left-shifts the
     panel at a single breakpoint */
  .panel { margin-left: auto; margin-right: 0; }
}

/* Portrait tablets: single column, scaled up */
@media (min-width: 768px) and (max-aspect-ratio: 7/10) {
  .art__poster { max-width: 480px; }
  .panel { max-width: 560px; }
}

/* Phones: panel runs the full frame width */
@media (max-width: 767px) {
  .stage__inner { padding-left: 14px; padding-right: 14px; }
  .panel { max-width: none; }
  .art__poster { max-width: min(84vw, 400px); }
}

/* Landscape phones are a first-class layout, not an afterthought: a rotated
   phone satisfies the desktop width/aspect conditions but has almost no
   height. 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__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(16px, 3vw, 30px);
    padding: 14px clamp(14px, 3vw, 28px);
    min-height: 0;
  }
  .art { text-align: left; align-self: center; }
  .art__poster {
    margin: 0;
    width: auto;
    max-width: 100%;
    max-height: calc(100svh - 108px);
    object-fit: contain;
  }
  .panel__inner { padding: 13px 15px 15px; }
  .panel__title { font-size: clamp(18px, 2.5vw, 24px); margin-bottom: 6px; }
  .panel__lede { margin-bottom: 10px; font-size: 12.5px; }
  .panel__eyebrow { margin-bottom: 8px; font-size: 9.5px; letter-spacing: 0.2em; }
  .panel__eyebrow-hair { width: 18px; }
  .form__row { margin-bottom: 8px; }
  .form__label { font-size: 9.5px; margin-bottom: 3px; }
  .form__input { padding: 9px 12px; }
  .form__check { font-size: 11.5px; line-height: 1.4; }
  .form__row--check { margin-top: 9px; }
  .btn { margin-top: 10px; padding: 10px 14px; }
  .foot { padding: 8px 20px 10px; }
}

/* ============================================================
   MOTION - one orchestrated page-load reveal, nothing else.
   ============================================================ */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.art    { animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
.signup { animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.14s both; }

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

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

/* ============================================================
   LEGAL / PRIVACY
   A long document, so it inverts: a sheet of warm paper laid on
   the dark hall. Reading a policy this long in light-on-dark is
   punishing, and the gold has to darken to stay legible on it -
   var(--zari) is only 2.1:1 on paper, var(--zari-ink) is 5.4:1.
   ============================================================ */
:root {
  --paper:     #F3EAD9;
  --paper-ink: #2A1608;
  --sepia:     #5A4630;
  --zari-ink:  #7A5826;
  --paper-line: rgba(122, 88, 38, 0.24);
}

.legal-wrap { padding: clamp(20px, 5vw, 56px) clamp(14px, 4vw, 40px); }
.legal {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 52px) clamp(20px, 4.5vw, 56px) clamp(30px, 5vw, 56px);
  background: var(--paper);
  color: var(--paper-ink);
  box-shadow:
    0 0 0 1px rgba(203, 153, 81, 0.34),
    0 30px 70px -22px rgba(0, 0, 0, 0.8);
}
.legal__back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 26px;
  padding: 7px 14px 7px 10px;
  border: 1px solid var(--paper-line);
  border-radius: 999px;
  text-decoration: none;
  color: var(--sepia);
  transition: border-color 0.16s ease, color 0.16s ease;
}
.legal__back:hover { border-color: var(--zari-ink); color: var(--paper-ink); }
.legal__back-arrow {
  display: grid;
  place-items: center;
  width: 21px; height: 21px;
  border-radius: 50%;
  background: var(--zari-ink);
  color: var(--paper);
  transition: transform 0.16s ease;
}
.legal__back:hover .legal__back-arrow { transform: translateX(-3px); }
.legal__back-arrow svg { width: 13px; height: 13px; display: block; }
.legal__back-label { display: flex; flex-direction: column; line-height: 1.15; }
.legal__back-text {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.legal__back-brand {
  font-family: var(--font-disp);
  font-size: 14px;
  letter-spacing: 0.03em;
  color: var(--paper-ink);
}
.legal h1 {
  margin: 0 0 26px;
  font-family: var(--font-disp);
  font-weight: 400;
  font-size: clamp(1.85rem, 4.6vw, 2.5rem);
  line-height: 1.14;
  text-wrap: balance;
}
.legal h2 {
  margin: 34px 0 10px;
  padding-top: 16px;
  border-top: 1px solid var(--paper-line);
  font-family: var(--font);
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--zari-ink);
}
.legal h3 {
  margin: 24px 0 8px;
  font-family: var(--font-disp);
  font-weight: 400;
  font-size: 1.2rem;
}
.legal h4 {
  margin: 18px 0 6px;
  font-family: var(--font);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sepia);
}
.legal p, .legal li { font-size: 15px; line-height: 1.68; color: var(--sepia); margin: 0 0 0.85rem; }
.legal ul { padding-left: 1.15rem; margin: 0.5rem 0 1rem; }
.legal li { margin-bottom: 0.45rem; }
.legal li::marker { color: var(--zari-ink); }
.legal a:not(.legal__back) {
  color: var(--paper-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(122, 88, 38, 0.7);
}
.legal a:not(.legal__back):hover { color: var(--zari-ink); text-decoration-color: var(--zari-ink); }
.legal strong { color: var(--paper-ink); font-weight: 700; }
.legal__meta {
  margin-top: 30px;
  padding-top: 16px;
  border-top: 1px solid var(--paper-line);
  font-family: var(--font);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sepia);
}
.legal .controller {
  margin: 14px 0 0;
  padding: 16px 18px;
  border-left: 3px solid var(--zari-ink);
  background: rgba(122, 88, 38, 0.07);
}
.legal .controller p:last-child { margin-bottom: 0; }