/* =========================================================================
   A·M·C - Grassroots Energy  ·  signup landing
   Direction: grassroots UK club world. Tiled backstage wall under cool strip
   light, polaroid artwork. Palette pulled from the artwork itself: cool
   off-white + seafoam/teal from the fridge (#a1c8be / #7fa197 / #27586d).
   Anton display + Spline Sans Mono door-list utility + Helvetica body.
   ========================================================================= */

:root{
  --ink:#0d100f;          /* cool near-black */
  --char:#131716;         /* form scrim base */
  --field:#161b1a;        /* cool charcoal input fill */
  --cream:#eef1ec;        /* cool off-white type */
  --muted:#9aa6a0;        /* cool grey-green */
  --faint:#69736d;        /* tertiary */
  --accent:#86cabb;       /* seafoam teal (fridge body) */
  --accent-hi:#bfe6db;    /* pale mint glow */
  --accent-deep:#2f6f7c;  /* deep teal (fridge shadow) */
  --accent-rgb:134,202,187;
  --line:rgba(238,241,236,.12);
  --line-2:rgba(238,241,236,.22);

  --display:'Anton',Impact,'Haettenschweiler','Arial Narrow Bold',sans-serif;
  --mono:'Spline Sans Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --sans:'Helvetica Neue',Helvetica,Arial,'Nimbus Sans','Liberation Sans',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
  background:var(--ink);color:var(--cream);
  font-family:var(--sans);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit}
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}

/* ---------- Background: tiled wall + scrims (fixed) ---------- */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-color:#0e1110;
  background-image:url('/assets/images/bg-mobile.jpg?v=20260618-2');
  background-image:image-set(url('/assets/images/bg-mobile.webp?v=20260618-2') type('image/webp'),
                             url('/assets/images/bg-mobile.jpg?v=20260618-2') type('image/jpeg'));
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
/* darken + cool vignette so type stays crisp over the tiles */
.bg::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(130% 90% at 50% 4%, rgba(var(--accent-rgb),.09), transparent 44%),
    linear-gradient(180deg, rgba(8,11,10,.56) 0%, rgba(8,11,10,.74) 46%, rgba(7,10,9,.90) 100%),
    radial-gradient(120% 100% at 50% 50%, transparent 40%, rgba(6,9,8,.66) 100%);
}
main{position:relative;z-index:2}
footer{position:relative;z-index:1}

/* ---------- The room: art left / sign-up right ---------- */
.room{flex:1 0 auto;display:grid;grid-template-columns:1fr;align-items:stretch}

/* ---------- Artwork ---------- */
.art{display:flex;align-items:flex-end;justify-content:center;padding:18px 18px 0;min-width:0}
.art__img{width:auto;max-width:94%;max-height:58vh;
  -webkit-mask-image:linear-gradient(to bottom,#000 98%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 98%,transparent 100%);
}

/* ---------- Sign-up column ---------- */
.signup{position:relative;display:flex;align-items:center;justify-content:center;
  padding:14px clamp(20px,5vw,40px) 40px;isolation:isolate;min-width:0}
/* cool strip-light wash behind the headline, echoing the fluorescent over the tiles */
.bulb{position:absolute;z-index:0;top:5%;left:50%;width:min(580px,88%);height:360px;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgba(var(--accent-rgb),.16), rgba(var(--accent-rgb),.05) 46%, transparent 72%);
  filter:blur(8px);animation:breathe 8s ease-in-out infinite}

.panel{position:relative;z-index:1;width:100%;max-width:444px;text-align:left}

/* kicker (mono, brand line) */
.kicker{margin:0 0 16px;font-family:var(--mono);font-weight:500;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent)}

/* eyebrow with hairlines */
.eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 14px;
  font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--muted)}
.eyebrow span{flex:0 0 26px;height:1px;background:linear-gradient(90deg,var(--accent),transparent)}
.eyebrow span:last-child{background:linear-gradient(270deg,var(--accent),transparent)}

/* headline (Anton) */
.headline{margin:0 0 16px;font-family:var(--display);font-weight:400;
  font-size:clamp(46px,8.4vw,82px);line-height:.92;letter-spacing:.005em;
  text-transform:uppercase;color:var(--cream)}
.headline em{font-style:normal;color:var(--accent)}

.lede{margin:0 0 26px;max-width:38ch;color:var(--muted);font-size:15px;line-height:1.62}

/* ---------- Presale countdown ---------- */
.presale{margin:0 0 26px}
.presale__eyebrow{margin:0 0 10px;font-family:var(--mono);font-weight:600;font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.countdown{display:flex;gap:8px;margin:0 0 12px}
.cd__cell{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:11px 6px;border-radius:11px;background:var(--field);border:1px solid var(--line-2)}
.cd__num{font-family:var(--display);font-weight:400;font-size:clamp(26px,5vw,34px);
  line-height:1;color:var(--cream);font-variant-numeric:tabular-nums}
.cd__lbl{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted)}
.presale__note{margin:0;font-family:var(--mono);font-size:11.5px;line-height:1.55;
  letter-spacing:.02em;color:var(--muted)}
.presale.is-live .cd__cell{border-color:rgba(var(--accent-rgb),.5)}
.presale__live{margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(22px,4.4vw,30px);text-transform:uppercase;color:var(--accent)}

/* ---------- Form ---------- */
.form{display:grid;gap:13px}
.field{position:relative}
.form__input{width:100%;height:54px;padding:0 16px;border-radius:11px;
  background:var(--field);border:1px solid var(--line-2);color:var(--cream);
  font-family:var(--sans);font-size:16px;line-height:1.2;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
  appearance:none;-webkit-appearance:none}
.form__input::placeholder{color:var(--faint)}
.form__input:hover{border-color:rgba(238,241,236,.34)}
.form__input:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.2)}
.form__input[aria-invalid="true"]{border-color:#e0683c;box-shadow:0 0 0 3px rgba(224,104,60,.16)}

/* ---------- Date multi-select dropdown ---------- */
.msel{position:relative}
.msel__toggle{width:100%;height:54px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--field);border:1px solid var(--line-2);border-radius:11px;padding:0 16px;cursor:pointer;
  color:var(--cream);font-family:var(--sans);font-size:16px;text-align:left;
  transition:border-color .16s ease,box-shadow .16s ease}
.msel__toggle:hover{border-color:rgba(238,241,236,.34)}
.msel__toggle:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.2)}
.msel.is-open .msel__toggle{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.2)}
.msel.is-invalid .msel__toggle{border-color:#e0683c;box-shadow:0 0 0 3px rgba(224,104,60,.16)}
.msel__summary{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msel__summary.is-placeholder{color:var(--faint)}
.msel__arrow{flex:0 0 auto;width:9px;height:9px;border-right:2px solid var(--accent);
  border-bottom:2px solid var(--accent);transform:rotate(45deg);transition:transform .2s ease;margin-bottom:3px}
.msel.is-open .msel__arrow{transform:rotate(-135deg);margin-bottom:-3px}
.msel__menu{position:absolute;left:0;right:0;top:calc(100% + 7px);z-index:30;
  max-height:288px;overflow-y:auto;background:#101413;
  border:1px solid var(--accent);border-radius:12px;box-shadow:0 22px 46px rgba(0,0,0,.62);padding:6px}
.msel__menu::-webkit-scrollbar{width:10px}
.msel__menu::-webkit-scrollbar-thumb{background:rgba(var(--accent-rgb),.3);border-radius:8px;border:3px solid #101413}
.msel__opt{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:8px;cursor:pointer}
.msel__opt:hover{background:rgba(var(--accent-rgb),.12)}
.msel__opt input{width:18px;height:18px;flex:0 0 18px;accent-color:var(--accent);margin:0;cursor:pointer}
.msel__opt-face{font-family:var(--sans);color:var(--cream);font-size:14px;letter-spacing:.01em}
.msel__opt-face b{font-family:var(--mono);color:var(--accent);font-weight:600;font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;margin-right:9px}

/* consent */
.consent{display:flex;align-items:flex-start;gap:11px;margin:4px 0 6px;cursor:pointer;
  font-size:12.5px;line-height:1.5;color:var(--muted)}
.consent input{position:absolute;opacity:0;width:1px;height:1px}
.consent__box{flex:0 0 auto;width:19px;height:19px;margin-top:1px;border-radius:5px;
  border:1px solid var(--line-2);background:var(--field);position:relative;transition:.15s}
.consent input:checked + .consent__box{background:var(--accent);border-color:var(--accent)}
.consent input:checked + .consent__box::after{content:"";position:absolute;left:6px;top:2px;
  width:5px;height:10px;border:solid #0e2622;border-width:0 2px 2px 0;transform:rotate(43deg)}
.consent input:focus-visible + .consent__box{box-shadow:0 0 0 3px rgba(var(--accent-rgb),.34)}
.consent a{color:var(--cream);text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:var(--accent)}
.consent a:hover{color:var(--accent)}

/* button */
.btn{margin-top:6px;width:100%;height:56px;border:0;border-radius:11px;cursor:pointer;
  background:linear-gradient(180deg,var(--accent-hi),var(--accent));color:#0c2420;
  font-family:var(--display);font-weight:400;font-size:21px;letter-spacing:.04em;
  text-transform:uppercase;
  box-shadow:0 10px 26px -8px rgba(var(--accent-rgb),.5), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .12s ease,box-shadow .18s ease,filter .18s ease}
.btn .btn__face{display:block;line-height:56px}
.btn:hover{transform:translateY(-1px);filter:brightness(1.05);
  box-shadow:0 14px 32px -8px rgba(var(--accent-rgb),.62), inset 0 1px 0 rgba(255,255,255,.45)}
.btn:active{transform:translateY(0)}
.btn:disabled{cursor:default;filter:saturate(.6) brightness(.9);transform:none}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ink),0 0 0 5px var(--accent)}

.form__err{margin:2px 2px 0;color:#e8896a;font-size:12px;font-family:var(--mono);letter-spacing:.02em}

/* ---------- Success state ---------- */
.panel--done{animation:reveal .5s ease both}
.done-tip{margin:18px 0 0;padding:14px 16px;border-radius:11px;
  background:rgba(var(--accent-rgb),.08);border:1px solid rgba(var(--accent-rgb),.26);
  color:var(--cream);font-size:13.5px;line-height:1.55}
.done-tip strong{color:var(--accent)}

/* ---------- Footer (crossy / restricted style) ---------- */
.foot{flex-shrink:0;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  width:100%;margin:0;padding:14px clamp(18px,4vw,44px) 16px;border-top:1px solid var(--line);
  font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(238,241,236,.74)}
.foot a{color:rgba(238,241,236,.85);text-decoration:none}
.foot a:hover{color:var(--accent)}
.foot__left{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.foot__legal{margin:0}
.site-built{margin:0}
.site-built a{display:inline-flex;align-items:center;gap:.45rem;padding:.35rem .8rem;
  font-weight:600;font-size:10px;letter-spacing:.06em;color:rgba(238,241,236,.85);
  background:rgba(8,11,10,.55);border:1px solid var(--line-2);border-radius:999px;transition:border-color .15s}
.site-built a:hover{border-color:var(--accent);color:#fff}
.site-built img{display:inline-block;height:14px;width:auto;opacity:.95;filter:grayscale(1) brightness(2.4);vertical-align:middle}

/* ---------- Animations ---------- */
@keyframes breathe{0%,100%{opacity:.82}50%{opacity:1}}
@keyframes reveal{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.panel#panel-idle{animation:rise .55s ease both}

/* ---------- intl-tel-input (v19.5.7, separate dial code) ---------- */
.iti{width:100%}
.iti--separate-dial-code .iti__selected-flag{background:rgba(255,255,255,.03);border-radius:11px 0 0 11px}
.iti input.form__input,.iti input[type=tel].form__input{padding-left:calc(52px + .6rem)}
.iti--separate-dial-code input.form__input{padding-left:calc(88px + .4rem)}
.iti__country-list{background:#101413;border:1px solid var(--line-2);color:var(--cream);font-family:var(--sans)}
.iti__country.iti__highlight{background:rgba(var(--accent-rgb),.18)}
.iti__dial-code{color:var(--muted)}
.iti__selected-dial-code{color:var(--cream)}

/* ---------- Desktop: two columns ---------- */
@media (min-width:980px){
  .bg{background-image:url('/assets/images/bg-desktop.jpg?v=20260618-2');
    background-image:image-set(url('/assets/images/bg-desktop.webp?v=20260618-2') type('image/webp'),
                               url('/assets/images/bg-desktop.jpg?v=20260618-2') type('image/jpeg'))}
  .room{grid-template-columns:1.02fr 1fr;gap:clamp(28px,4vw,72px);
    max-width:1240px;margin:0 auto;align-items:center}
  .art{align-items:center;justify-content:flex-end;padding:36px 0}
  .art__img{max-height:82vh}
  .signup{justify-content:flex-start;padding:36px 0}
  .panel{margin:0}
}

/* tablet / mobile: stack, centered */
@media (max-width:979px){
  .art{padding:22px 16px 4px}
  .art__img{max-width:90%;max-height:74vh}
  .panel{margin:0 auto;text-align:center}
  .eyebrow{justify-content:center}
  .lede{margin-left:auto;margin-right:auto}
  .form,.consent{text-align:left}
}
@media (max-width:680px){
  .foot{flex-direction:column;align-items:center;text-align:center;gap:12px;padding:16px 18px 24px}
  .foot__left{flex-direction:column;align-items:center;gap:10px}
}

/* ---------- Presale / tickets page (presale.html) ---------- */
.tickets-page .room{align-items:start}
.shows{display:grid;gap:9px;margin:24px 0 0}
.show{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:12px;
  background:var(--field);border:1px solid var(--line-2);transition:border-color .15s ease}
.show:hover{border-color:rgba(var(--accent-rgb),.42)}
.show__meta{flex:1 1 auto;min-width:0}
.show__date{display:block;font-family:var(--mono);font-weight:600;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 3px}
.show__place{display:block;font-family:var(--sans);font-size:14.5px;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.show__city{font-weight:600;color:var(--cream)}
.show__venue{color:var(--muted)}
.ticket-btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  height:40px;padding:0 16px;border-radius:9px;cursor:pointer;
  background:linear-gradient(180deg,var(--accent-hi),var(--accent));color:#0c2420;
  font-family:var(--display);font-weight:400;font-size:14px;letter-spacing:.05em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;
  box-shadow:0 8px 20px -8px rgba(var(--accent-rgb),.5), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .12s ease,filter .18s ease,box-shadow .18s ease}
.ticket-btn:hover{transform:translateY(-1px);filter:brightness(1.05);
  box-shadow:0 12px 26px -8px rgba(var(--accent-rgb),.6), inset 0 1px 0 rgba(255,255,255,.45)}
.ticket-btn:active{transform:translateY(0)}
.ticket-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ink),0 0 0 5px var(--accent)}

@media (min-width:980px){
  /* keep the artwork in view while the date list scrolls */
  .tickets-page .art{position:sticky;top:0;height:100vh;height:100dvh;align-items:center;padding:0}
  .tickets-page .signup{align-items:flex-start}
}
@media (max-width:979px){
  .tickets-page .panel{text-align:left}
  .tickets-page .eyebrow{justify-content:flex-start}
  .tickets-page .lede{margin-left:0;margin-right:0}
  .shows{margin-top:18px}
}
@media (max-width:420px){
  .show{flex-direction:column;align-items:stretch;gap:10px}
  .show__place{white-space:normal}
  .ticket-btn{width:100%}
}

/* primary button rendered as a link (tickets CTA on the signup success screen) */
a.btn{display:block;text-decoration:none}
.panel--done .btn{margin-top:18px}

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