:root{
  /* Summer Jam 2026 - matched to summerjam.com.au (Oct 2026): one red on
     black, AT Roadmann display, DM Mono labels and buttons, DM Sans text */
  --red:#FF421D;
  --hot:var(--red);
  --gold:var(--red);
  --paper:#FFFFFF;
  --ink:#050505; --ink2:#0A0A0A;   /* the card: a shade off the page's black, so the frame reads without a border */ --line:#2B2B2B; --mute:#9A9A9A;
  --r:8px;
  /* the Roadmann files are the website's own subset (letters, digits, basic
     punctuation); anything else - ? & / ( ) - falls through to the next face */
  --display:"AT Roadmann","Arial Narrow",Impact,sans-serif;
  --wide:"AT Roadmann Expanded","Arial Black",Arial,sans-serif;
  --body:"DM Sans",system-ui,-apple-system,sans-serif;
  --mono:"DM Mono",ui-monospace,Menlo,monospace;
}
@font-face{font-family:"AT Roadmann";font-weight:400;font-style:normal;font-display:swap;
  src:url(fonts/AT-Roadmann-Regular.woff2) format("woff2"),url(fonts/AT-Roadmann-Regular.woff) format("woff")}
@font-face{font-family:"AT Roadmann Expanded";font-weight:400;font-style:normal;font-display:swap;
  src:url(fonts/AT-Roadmann-Expanded400.woff2) format("woff2"),url(fonts/AT-Roadmann-Expanded400.woff) format("woff")}
.disp{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:0}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
button,input,textarea,select{font-family:var(--body)}
/* ---------------------------------------------------------------------------
   ON A PHONE THE PAGE SCROLLS. LIKE EVERY OTHER PAGE.

   This used to be a position:fixed shell over a zero-height body, so the page
   itself could never scroll. Chrome on iOS lays its web view out under its own
   toolbar and corrects that placement on the page's scroll events - which a
   page that cannot scroll never sends. Opened from Gmail, the whole page sat
   112px too high (the toolbar's height) until a tab switch forced Chrome to
   lay itself out again. Safari was fine; desktop was fine; nothing in the DOM
   could see it. Eight rounds of resizing, reflowing and nudging did nothing,
   because the page was never wrong, only where Chrome put it.

   So: an ordinary document. The active card sits in normal flow and is at
   least a screen tall; a long card makes the page taller and the page scrolls.
   The other cards are absolute, on top, only while they fade. Nothing is
   fixed, nothing measures the viewport except the one min-height every mobile
   page uses. The desktop breakpoint below puts the framed, centred card back,
   where the cards scroll inside a fixed 700px frame as before.
   --------------------------------------------------------------------------- */
body{
  background:var(--ink);color:var(--paper);
  font:400 16px/1.5 var(--body);
}
/* overflow:clip, not hidden: the cards waiting offstage sit 28px lower than
   the page (their entry transform), and a transform counts towards scrollable
   overflow - so without this the page was 23px taller than the screen and
   scrolled by that much for no reason. clip cuts them off without turning #app
   into a scroll container, which hidden would. */
#app{position:relative;min-height:100vh;min-height:100svh;background:var(--ink);overflow:clip}



/* progress */
#bar{position:absolute;inset:0 0 auto 0;height:3px;background:#232327;
  z-index:40;opacity:0;transition:opacity .3s ease}
#bar.show{opacity:1}
#bar>i{display:block;height:100%;width:0;
  background:var(--red);
  transition:width .45s cubic-bezier(.4,0,.2,1)}

/* back */
#back{position:absolute;top:18px;left:16px;z-index:40;width:38px;height:38px;
  border:1.5px solid rgba(255,66,29,.45);border-radius:50%;background:rgba(0,0,0,.35);color:var(--red);
  font-size:17px;cursor:pointer;display:none;backdrop-filter:blur(8px)}
#back:hover{border-color:var(--red)}

/* Inactive cards are absolute and stacked over the active one so they can
   cross-fade; the active card is the one in normal flow, and it is what gives
   the page its height. */
.card{position:absolute;top:0;left:0;right:0;min-height:100%;
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:76px 28px 40px;      /* 76: the back button is 18px down and 38px tall, plus a gap */
  opacity:0;visibility:hidden;
  transform:translateY(28px) scale(.985);
  transition:opacity .42s ease,transform .42s cubic-bezier(.2,.7,.3,1),visibility .42s}
.card.on{position:relative;min-height:100vh;min-height:100svh;
  opacity:1;visibility:visible;transform:none}
.card.out{transform:translateY(-24px) scale(.985)}
.inner{position:relative;z-index:2;width:100%;margin:auto 0}   /* centred when it fits, scrolls when it doesn't */

/* media cards */
.bg{position:absolute;top:0;left:0;right:0;height:46%;background-size:cover;
  background-position:50% 45%;filter:saturate(1.06) contrast(1.03)}
.scrim{position:absolute;top:0;left:0;right:0;height:56%;
  background:linear-gradient(180deg,rgba(5,5,5,.18) 0%,rgba(5,5,5,.05) 34%,
    rgba(5,5,5,.72) 72%,var(--ink) 100%)}
.intro,.done{justify-content:flex-end;padding-bottom:40px}
.intro .inner,.done .inner{margin:auto 0 0}

.mark{width:62px;color:var(--paper);margin-bottom:22px}
.mark svg,.mark img{width:100%;height:auto;display:block}
.kicker{font:400 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--red);margin-bottom:12px}
.hero{font:400 clamp(70px,21vw,104px)/.85 var(--display);
  letter-spacing:0;text-transform:uppercase;color:var(--red);margin-bottom:20px}
.hero .out{display:block;font-family:var(--wide);font-size:.56em;line-height:.95;margin-top:.1em}
.lede{color:#E6E6E6;font-size:15.5px;max-width:34ch;margin-bottom:22px}
.lede b{color:var(--paper);font-weight:600}

.facts{list-style:none;border-top:1px solid var(--line);margin-bottom:26px;
  display:grid;grid-template-columns:max-content 1fr}
.facts li{grid-column:1/-1;display:grid;column-gap:14px;
  grid-template-columns:62px 1fr;grid-template-columns:subgrid;
  padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px;font-weight:500}
.facts span{color:var(--red);font:400 11.5px/1.6 var(--mono);
  letter-spacing:.06em;text-transform:uppercase;padding-top:1px}
.facts a{color:var(--paper);text-decoration:underline;text-underline-offset:3px;
  transition:color .18s ease;justify-self:start}
.facts a:hover{color:var(--red)}

/* questions */
.qn{font:400 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--red);margin-bottom:16px}
.qn em{color:rgba(255,255,255,.7);font-style:normal}
.q{font:400 clamp(40px,11vw,52px)/.9 var(--display);
  text-transform:uppercase;letter-spacing:0;color:var(--red);margin-bottom:14px}
.hint{color:var(--mute);font-size:14px;margin-bottom:24px;max-width:75%}
.q + .btn, .hint + .field, .q + .field, .q + .opts, .hint + .opts,
.q + .consents, .hint + .consents{margin-top:26px}

.field{width:100%;background:#000;border:1.5px solid var(--red);border-radius:var(--r);
  color:var(--paper);font:500 19px/1.4 var(--body);padding:12px 14px;outline:0;
  transition:border-color .2s,box-shadow .2s}
.field::placeholder{color:#5A5A5A}
.field:focus{box-shadow:0 0 0 3px rgba(255,66,29,.3)}
.area{padding:14px;font-size:16px;resize:none;line-height:1.55}

/* Date of birth: three boxes, not a calendar. Sized by content so it is
   obvious at a glance that there are three of them and which is the year,
   and laid out with flex so a 320px screen still fits all three on one line.
   16px on the inputs is not a taste decision - anything smaller makes iOS
   zoom the page when the field is tapped, and the card never zooms back. */
.dob{display:flex;gap:14px;align-items:flex-end}
.dpart{display:flex;flex-direction:column;gap:6px;flex:0 0 auto}
.dpart span{font:400 12px/1 var(--mono);letter-spacing:.06em;
  text-transform:uppercase;color:var(--red)}
.dpart .field{width:3.4em;text-align:center;font-size:21px;padding:10px 4px}
.dpart:last-child .field{width:5.6em}
@media(max-width:360px){
  .dob{gap:10px}
  .dpart .field{width:3em;font-size:19px}
  .dpart:last-child .field{width:5em}
}

.opts{display:flex;flex-direction:column;gap:9px}
.opts.grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.opt{text-align:left;background:rgba(0,0,0,.3);border:1.5px solid rgba(255,66,29,.45);color:var(--paper);
  border-radius:var(--r);padding:15px 16px;font:500 15px/1.35 var(--body);cursor:pointer;
  transition:all .16s ease}
.opt:hover{border-color:var(--red);transform:translateY(-1px)}
.opt.sel{background:var(--red);border-color:var(--red);color:#000;font-weight:600}

.consents{display:flex;flex-direction:column;gap:11px}
.cx{position:relative;display:grid;grid-template-columns:22px 1fr;gap:12px;
  align-items:start;background:rgba(0,0,0,.3);border:1.5px solid rgba(255,66,29,.45);
  border-radius:var(--r);padding:14px;cursor:pointer;transition:border-color .16s}
.cx:hover{border-color:var(--red)}
.cx input{position:absolute;opacity:0;pointer-events:none}
.cx span{width:22px;height:22px;border:2px solid var(--red);border-radius:3px;
  display:grid;place-items:center;transition:all .16s;grid-row:span 2}
.cx span::after{content:"✓";font-size:13px;color:#000;opacity:0;font-weight:700}
.cx input:checked ~ span{background:var(--hot);border-color:var(--hot)}
.cx input:checked ~ span::after{opacity:1}
.cx b{font:600 14px var(--body);display:block}
.cx i{font-style:normal;color:var(--mute);font-size:12.5px;display:block;margin-top:2px}
/* The terms link inside a consent box's small print. Underlined so it reads as
   a link at 12.5px, where colour alone is too quiet. No JS needed to stop it
   toggling the checkbox it sits inside: a label's activation behaviour does
   nothing for clicks on interactive descendants, and an <a href> is one. */
.cx i a.tc{color:var(--hot);text-decoration:underline;text-underline-offset:2px;
  transition:color .18s ease}
.cx i a.tc:hover,.cx i a.tc:focus-visible{color:#fff}
.cx.req b::after{content:"Required";display:inline-block;white-space:nowrap;
  margin-left:8px;padding:2px 6px;border-radius:4px;background:rgba(255,66,29,.16);
  font:400 9.5px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--red);
  vertical-align:2px}

.btn{margin-top:30px;width:100%;border:1.5px solid transparent;border-radius:250px;padding:16px 22px;
  font:400 15px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.02em;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:9px;
  transition:transform .14s,background-color .16s,color .16s,border-color .16s}
.btn i{font-style:normal;transition:transform .2s}
.btn:hover i{transform:translateX(4px)}
.btn:active{transform:scale(.985)}
.primary{background:var(--red);border-color:var(--red);color:#000}
@media (hover:hover) and (pointer:fine){
  .primary:hover{background:transparent;color:var(--red)}
}
.ghost{background:transparent;border:1.5px solid rgba(255,66,29,.45);color:var(--red);
  font-size:13.5px;padding:13px}

.present{margin-top:20px;font:400 11.5px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--mute);text-align:left}
.present b{color:var(--paper);font-weight:600;letter-spacing:.1em}

.tick{width:62px;height:62px;border-radius:50%;background:var(--red);color:#000;
  display:grid;place-items:center;font-size:31px;font-weight:700;margin-bottom:24px}
.big{font:400 clamp(48px,13vw,64px)/.88 var(--display);
  text-transform:uppercase;letter-spacing:0;color:var(--red);margin-bottom:16px}

.err{margin-top:14px;color:#fff;font-size:13.5px;font-weight:500;
  display:flex;align-items:center;gap:7px}
.err::before{content:"!";flex:0 0 17px;height:17px;border-radius:50%;
  background:var(--red);color:#000;font-size:11px;font-weight:700;
  display:grid;place-items:center}
.err.plain::before{content:none}   /* the invite-only notice: no "!" badge */
/* Block, not flex. iOS auto-detects an email address in text and wraps it in
   its own <a>; inside a flex container that link becomes a flex item and the
   text either side becomes two more, so "...team at | info@summerjam.com.au |
   and we'll sort it." laid out as three narrow columns on the phone and read
   fine on every desktop, which detects nothing. The flex is only here to sit
   the "!" badge beside the text, and .plain has no badge, so it buys nothing.
   Any notice that might contain an address or a phone number wants this. */
.err.plain{display:block;max-width:46ch;line-height:1.55}   /* wider than the lede, still clear of the card edge */
.err.plain a{color:inherit}   /* iOS colours its own link blue otherwise */
.err.good{color:var(--red)}   /* friendly notices (already registered), not errors */
.err[hidden]{display:none}
.optional{margin-left:10px;padding:2px 7px;border-radius:4px;
  background:rgba(255,255,255,.08);color:var(--mute);font:400 9.5px/1.4 var(--mono);
  letter-spacing:.06em;text-transform:uppercase}
.btn.skip{margin-top:10px;background:transparent;border:0;color:var(--mute);
  font-size:13px;font-weight:500;text-decoration:underline;text-underline-offset:3px}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-7px)} 40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)} 80%{transform:translateX(2px)}
}
.card.shake .inner{animation:shake .38s cubic-bezier(.36,.07,.19,.97)}

/* desktop: proper wide layout, content left / image right */
@media(min-width:900px){
  /* the framed card, centred on a black page; the cards scroll inside it.
     The page itself never scrolls here - overflow:hidden, as it always was on
     the desktop - so no window size or zoom level can put a scrollbar on it. */
  html,body{height:100%;overflow:hidden}
  body{display:grid;place-items:center;background:#000}
  #app{min-height:0;width:min(1080px,94vw);height:min(760px,92vh);height:min(760px,92svh);
    overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.7);border-radius:22px}
  .card,.card.on{position:absolute;inset:0;min-height:0;
    overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
    scrollbar-width:none;              /* scrolls by wheel or trackpad when a window is */
    padding:64px 68px 52px;justify-content:center}   /* too short, without a bar down the frame */
  .card::-webkit-scrollbar{display:none}
  .inner{max-width:620px;margin:0 auto}
  .intro .inner,.done .inner{margin:0;max-width:470px}
  .bg{top:0;left:auto;right:0;width:50%;height:100%}
  .scrim{top:0;left:0;right:0;width:100%;height:100%;
    background:linear-gradient(90deg,var(--ink) 0%,var(--ink) 42%,
      rgba(5,5,5,.80) 55%,rgba(5,5,5,.15) 80%,rgba(5,5,5,0) 100%)}
  .hero{font-size:100px}
  .q{font-size:60px}
  .big{font-size:72px}
  .opts.grid{grid-template-columns:repeat(3,1fr)}
  .btn{width:auto;min-width:240px;padding:17px 34px}
}

/* screen-reader-only live region for step announcements */
.sr-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* preview mode banner */
.preview-banner{position:fixed;top:0;left:0;right:0;z-index:50;background:var(--red);color:#000;font:400 12px/1.4 var(--mono);letter-spacing:.04em;text-transform:uppercase;text-align:center;padding:8px 14px;
  transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.preview-banner.away{transform:translateY(-110%)}   /* gone once the questions start; back on the front page */
/* intro: primary CTA + optional schedule link side by side */
.cta-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.cta-row .btn{margin:0;width:auto;flex:1 1 auto}
.btn.ghost{background:transparent;border:1.5px solid var(--red);color:var(--red)}
.btn.ghost:hover{background:var(--red);color:#000}

/* the "Other" write-in under an option list */
.other-wrap { margin-top: 14px; }


/* ---------------------------------------------------------------- consent */
/* which boxes have to be ticked, and which one you actually missed */
.cx.is-missing{border-color:var(--red);background:rgba(255,66,29,.1)}
.cx.is-missing span{border-color:var(--red)}

/* --------------------------------------------------- small screens, short screens */
/* A question with a lot of options used to run past the bottom of a small
   phone: the card clipped, so Continue could not be reached. The card scrolls
   now, and everything tightens up so most cards still fit without scrolling. */
@media (max-height:740px){
  .card{padding:72px 24px 28px}    /* the top stays clear of the back button */
  .q{font-size:clamp(34px,9vw,42px)}
  .hint{font-size:13px;margin-bottom:16px}
  .q + .btn,.hint + .field,.q + .field,.q + .opts,.hint + .opts,
  .q + .consents,.hint + .consents{margin-top:16px}
  .opts{gap:7px}
  .opts.grid{gap:7px}
  .opt{padding:12px 14px;font-size:14px}
  .cx{padding:12px 14px}
  .cx i{font-size:12px}
  .btn{padding:14px 22px;font-size:15px}
  .field{font-size:16px;padding:10px 6px}    /* 16px keeps iOS from zooming */
  .hint{max-width:100%}                      /* on a phone, use the width */
  .mark{width:52px;margin-bottom:14px}
  .hero{font-size:clamp(52px,16vw,68px)}
  .facts li{padding:9px 0}
}
@media (max-height:620px){
  .card{padding:64px 22px 22px}
  .q{font-size:clamp(30px,8vw,36px)}
  .opt{padding:10px 12px;font-size:13.5px}
  .cx{padding:10px 12px}
  .consents{gap:7px}
}
@media (max-width:360px){
  .card{padding-left:20px;padding-right:20px}
  .opts.grid{grid-template-columns:1fr}     /* two columns is too tight to tap */
}

@media (max-width:520px){
  .hint{max-width:100%}
}