/* Hard Dance Summer Sessions.

   Standalone brand: this sheet deliberately shares nothing with mock.css. HDSS
   is a party System 6 presents, not a System 6 section, and inheriting the
   estate's violet-and-magenta night palette would have made it look like one.
   The colours below are sampled off the lineup artwork rather than chosen, so
   the site and the flyer cannot drift apart.

   Nothing here is inline. hdss.system6.com.au falls under the estate's
   "Subdomains (Strict)" Transform Rule, which ships script-src 'self' with no
   'unsafe-inline', so a single style= attribute or inline <script> would be
   dropped on the floor by the browser in production and nowhere else. */

:root{
  /* water and sky */
  --sea-deep:#062a38;
  --sea:#08394a;
  --sea-mid:#0b5a72;
  /* the HDSS wordmark's own ramp, left to right */
  --aqua:#11c7e3;
  --blue:#546ee7;
  --violet:#c16efa;
  --pink:#fb005c;
  --flamingo:#f54aca;
  --orange:#f96d00;
  --amber:#f9b124;
  --sun:#ffe28a;
  --warm:#ffbf7d;

  --ink:#ffffff;
  --dim:rgba(220,240,250,.66);
  --faint:rgba(220,240,250,.40);
  --line:rgba(140,205,225,.20);

  --wrap:1120px;
  --pad:clamp(18px,4vw,40px);
  --sans:'Barlow Condensed',system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:'Anton','Barlow Condensed',system-ui,sans-serif;
  --mono:'DM Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--sea-deep);
  color:var(--ink);
  font:400 17px/1.55 var(--sans);
  letter-spacing:.01em;
  overflow-x:hidden;
}

a{color:var(--aqua);text-decoration:none}
a:hover{color:var(--sun)}
img{max-width:100%;display:block}

:focus-visible{outline:2px solid var(--sun);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}

.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:60;background:var(--sun);color:#0a2030;padding:10px 16px;font-weight:700}

/* ---- shared type ------------------------------------------------------- */

.kicker{
  font:500 13px/1 var(--mono);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--faint);
}

h2.sec{
  font:400 clamp(34px,6.5vw,64px)/.94 var(--display);
  text-transform:uppercase;
  letter-spacing:.005em;
  margin:0 0 6px;
}

/* The wordmark ramp as text fill. Used on one or two words a page, never on a
   paragraph: at body size the middle of the ramp drops under 3:1 against the
   background and the word stops being readable. */
.ramp{
  background:linear-gradient(100deg,var(--aqua),var(--blue) 22%,var(--flamingo) 46%,var(--pink) 60%,var(--orange) 78%,var(--sun));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---- hero -------------------------------------------------------------- */

.hero{
  position:relative;
  /* Plain vh first as the fallback, svh second for browsers that have it.
     Same two-line pattern www uses. */
  min-height:min(100vh,940px);
  min-height:min(100svh,940px);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  isolation:isolate;
  padding-block:clamp(70px,12vh,130px) clamp(34px,7vh,74px);
  /* The canvas draws the sun, sea and palms; this is the sky behind them, and
     it has to exist in CSS as well so the hero is never a black box in the
     moment before the script runs or if it never does. */
  background:
    radial-gradient(112% 58% at 50% 60%, rgba(249,109,0,.24) 0%, rgba(251,0,92,.09) 30%, rgba(0,0,0,0) 62%),
    linear-gradient(180deg,#04202c 0%,#07354a 30%,#0a5169 54%,#0d6e88 78%,#11809c 100%);
}

.hero-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:-1;
}

.hero .wrap{position:relative;width:100%;z-index:1}

/* A scrim under the billing. On a phone the sun is nearly the width of the
   frame and "Hard Dance" lands in white directly on the orange bands, where a
   text-shadow alone does not carry it.

   It hangs off .hero and runs edge to edge rather than off .wrap: sized to the
   text block it had two vertical edges where the gradient stopped, and against
   a flat sea those read as a rectangle drawn over the picture. Full bleed, it
   is just the bottom of the frame getting darker. z-index 0 puts it above the
   canvas at -1 and below .wrap at 1. */
.hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:64%;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(4,20,30,0) 0%,rgba(4,20,30,.30) 34%,rgba(4,20,30,.56) 72%,rgba(4,20,30,.62) 100%);
}

.presents{display:flex;align-items:center;gap:14px;margin-bottom:clamp(16px,3vh,30px)}
/* The lockup is a link home to system6.com.au. The anchor sits inside the flex
   row as its own item and must not add a baseline gap, hence display:block on
   it as well as on the image. */
.presents a{display:block;line-height:0;transition:opacity .14s ease,filter .14s ease}
.presents a:hover{opacity:1;filter:drop-shadow(0 0 14px rgba(255,226,138,.45))}
.presents img{width:clamp(112px,17vw,168px);height:auto;opacity:.94}
.presents span{
  font:500 11px/1 var(--mono);
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--faint);
  padding-top:3px;
}

.title{
  margin:0;
  font:400 clamp(46px,11.4vw,146px)/.83 var(--display);
  text-transform:uppercase;
  letter-spacing:-.005em;
  /* The flyer's type is white with a soft drop shadow over a bright photo. Over
     the canvas the same job is done by a dark halo: it keeps the headline
     readable where the sun sits directly behind it without putting a box on it. */
  text-shadow:0 2px 30px rgba(4,20,30,.80),0 2px 8px rgba(4,20,30,.62),0 1px 2px rgba(4,20,30,.5);
}
.title .l2{display:block;color:var(--sun)}

.when{
  margin:clamp(16px,3vh,26px) 0 0;
  font:600 clamp(17px,2.9vw,27px)/1.25 var(--sans);
  letter-spacing:.11em;
  text-transform:uppercase;
}
.when b{font-weight:700;color:var(--sun)}
.when i{font-style:normal;color:var(--faint);padding-inline:6px}

.tagline{
  margin:10px 0 0;
  max-width:52ch;
  color:var(--dim);
  font-size:clamp(15px,2vw,19px);
}

/* ---- buttons ----------------------------------------------------------- */

.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,4vh,34px)}

.btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:14px 26px;
  font:700 15px/1 var(--sans);
  letter-spacing:.16em;
  text-transform:uppercase;
  border:1px solid transparent;
  border-radius:2px;
  cursor:pointer;
  transition:transform .14s ease,box-shadow .14s ease,background-color .14s ease,color .14s ease;
}
.btn:hover{transform:translateY(-2px)}

.btn-go{
  background:linear-gradient(96deg,var(--pink),var(--orange) 62%,var(--amber));
  color:#170208;
  box-shadow:0 6px 26px rgba(251,0,92,.34);
}
.btn-go:hover{color:#170208;box-shadow:0 10px 34px rgba(251,0,92,.46)}

.btn-ghost{border-color:rgba(17,199,227,.5);color:var(--aqua);background:rgba(6,42,56,.42)}
.btn-ghost:hover{border-color:var(--sun);color:var(--sun);background:rgba(6,42,56,.7)}

/* Tickets are not on sale yet. Rendered as a real disabled control rather than
   a link to nowhere, so a keyboard or screen-reader visitor is told the same
   thing a sighted one is instead of tabbing onto a dead anchor. */
.btn[aria-disabled="true"]{
  background:none;
  border-color:var(--line);
  color:var(--faint);
  box-shadow:none;
  cursor:default;
}
.btn[aria-disabled="true"]:hover{transform:none;color:var(--faint)}

/* ---- countdown --------------------------------------------------------- */

.count{
  /* It is a <section>, so it was taking the generic section padding on top of
     its own wrap padding. That double gap is most of what read as the big
     empty band under the hero. */
  padding-block:0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(11,90,114,.30),rgba(6,42,56,.30));
}
.count .wrap{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:clamp(18px,5vw,54px);
  padding-block:clamp(16px,2.8vh,26px);
}
.unit{text-align:center;min-width:64px}
.unit b{
  display:block;
  font:400 clamp(30px,6vw,52px)/1 var(--display);
  color:var(--sun);
  font-variant-numeric:tabular-nums;
}
.unit span{font:500 11px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--faint)}
.count .done{font:400 clamp(22px,4vw,34px)/1 var(--display);text-transform:uppercase;color:var(--sun)}

/* ---- sections ---------------------------------------------------------- */

section{padding-block:clamp(38px,5.5vh,68px)}
.sec-head{margin-bottom:clamp(18px,3vh,30px)}
.sec-head p{margin:8px 0 0;color:var(--dim);max-width:56ch}

/* ---- lineup ------------------------------------------------------------ */

.bill{display:grid;gap:clamp(14px,2.4vw,22px);grid-template-columns:repeat(3,1fr)}

.act{
  padding:clamp(20px,3vw,30px) clamp(16px,2.4vw,26px);
  border:1px solid var(--line);
  border-top:3px solid var(--acc,var(--aqua));
  background:linear-gradient(180deg,rgba(11,90,114,.22),rgba(6,42,56,0));
}
.act .label{
  font:500 12px/1 var(--mono);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--acc,var(--aqua));
}
.act h3{
  margin:9px 0 0;
  font:400 clamp(26px,4.4vw,46px)/.95 var(--display);
  text-transform:uppercase;
}
.act p{margin:8px 0 0;color:var(--dim);font-size:15px}

.act-amber{--acc:var(--flamingo)}
.act-robbie{--acc:var(--aqua)}
.act-brisk{--acc:var(--amber)}

.support{
  margin-top:clamp(14px,2.2vw,20px);
  padding:clamp(16px,2.4vw,24px);
  border:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:10px 18px;
}
.support .kicker{width:100%;margin-bottom:2px}
.support li{
  list-style:none;
  font:400 clamp(20px,3.2vw,30px)/1 var(--display);
  text-transform:uppercase;
  color:var(--ink);
}
.support ul{display:contents;margin:0;padding:0}
.support a{color:inherit;border-bottom:2px solid var(--aqua);padding-bottom:1px}
.support a:hover{color:var(--sun);border-color:var(--sun)}

/* ---- gallery ----------------------------------------------------------- */

.shots{display:grid;gap:clamp(14px,2.4vw,22px);grid-template-columns:repeat(3,1fr);align-items:start;margin-top:clamp(16px,2.6vh,26px)}
.shots figure{margin:0;border:1px solid var(--line);background:var(--sea)}
.shots img{width:100%;height:auto}
.shots figcaption{padding:11px 14px;font:500 12px/1.4 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}

/* Ray's closing line for the lineup section. Wider measure than .sec-head p
   because it is a statement rather than a lead-in. */
.closer{
  margin:clamp(18px,3vh,28px) 0 0;
  max-width:64ch;
  font:400 clamp(17px,2.2vw,21px)/1.5 var(--sans);
  color:var(--dim);
}
.closer b{color:var(--sun);font-weight:700;letter-spacing:.05em}

/* ---- info grid --------------------------------------------------------- */

.info{display:grid;gap:clamp(14px,2.4vw,22px);grid-template-columns:repeat(3,1fr)}
.info div{padding:clamp(18px,2.6vw,26px);border:1px solid var(--line);background:linear-gradient(180deg,rgba(11,90,114,.18),rgba(6,42,56,0))}
.info dt{font:500 12px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
.info dd{margin:10px 0 0;font:600 clamp(19px,2.6vw,25px)/1.2 var(--sans);letter-spacing:.04em}
.info dd small{display:block;margin-top:6px;font:400 15px/1.5 var(--sans);letter-spacing:0;color:var(--dim)}

/* ---- A-List ------------------------------------------------------------ */

.alist{
  border:1px solid var(--line);
  background:
    radial-gradient(90% 130% at 82% 8%, rgba(245,74,202,.16), rgba(0,0,0,0) 62%),
    linear-gradient(180deg,rgba(11,90,114,.30),rgba(6,42,56,.10));
  padding:clamp(24px,3.6vw,40px);
}
.alist h2{margin:0}
.alist p{margin:12px 0 0;color:var(--dim);max-width:52ch}

/* ---- footer ------------------------------------------------------------ */

footer{border-top:1px solid var(--line);padding-block:clamp(26px,4vh,40px);background:#041e29}
.foot{display:flex;flex-wrap:wrap;gap:24px 40px;justify-content:space-between;align-items:flex-start}

/* Logo, label and icons stack in one column, left-aligned to each other. The
   icons used to be text links in the nav on the right; Ray wanted www's icon
   treatment and wanted it under the logo rather than beside it. */
.foot-brand{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.foot img{width:132px;height:auto;opacity:.85}
.foot .lbl{
  margin:0;
  font:500 11px/1 var(--mono);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--faint);
}

/* Lifted from www's .socials, retinted to this palette. The per-network hover
   colours are the brands' own and are kept as they are: they are the thing that
   makes the row read as social icons rather than as buttons. */
.socials{display:flex;flex-wrap:wrap;gap:9px}
.socials a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border:2px solid rgba(160,215,235,.30);
  color:var(--dim);
  transition:color .25s,border-color .25s,box-shadow .3s,transform .25s;
}
.socials a:hover{transform:translateY(-2px)}
.socials a[data-net="instagram"]:hover{color:#e1306c;border-color:#e1306c;box-shadow:0 0 22px rgba(225,48,108,.5)}
.socials a[data-net="facebook"]:hover{color:#1877f2;border-color:#1877f2;box-shadow:0 0 22px rgba(24,119,242,.5)}
.socials a[data-net="youtube"]:hover{color:#ff0000;border-color:#ff0000;box-shadow:0 0 22px rgba(255,0,0,.5)}
.socials a[data-net="tiktok"]:hover{color:#25f4ee;border-color:#25f4ee;box-shadow:0 0 22px rgba(37,244,238,.5)}
.socials a[data-net="mixcloud"]:hover{color:#5000ff;border-color:#7a3cff;box-shadow:0 0 22px rgba(80,0,255,.55)}
.socials svg{width:19px;height:19px;display:block}

.foot nav{display:flex;flex-direction:column;gap:9px}
.foot nav a{font:500 13px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.foot nav a:hover{color:var(--sun)}
.legal{width:100%;margin:8px 0 0;color:var(--faint);font-size:14px}

/* ---- responsive -------------------------------------------------------- */

@media (max-width:860px){
  .bill,.shots,.info{grid-template-columns:1fr 1fr}
}

@media (max-width:560px){
  .bill,.shots,.info{grid-template-columns:1fr}
  .cta .btn{flex:1 1 100%;justify-content:center}
}

/* Phones get no viewport-height hero at all, which is the conclusion www
   already reached and this file ignored.

   It was min-height:min(100svh,820px) with the content bottom-aligned. Chrome
   on Android grows and shrinks the visual viewport as its toolbar hides and
   shows, so svh changes mid-scroll, the hero resizes, hero.js re-runs its whole
   layout off the new getBoundingClientRect, and bottom-aligned content is
   shoved every time. Brave does not collapse its toolbar the same way and
   desktop mode has no toolbar, which is exactly why it looked fine in both.

   Sized to its content instead: the height is the padding plus the billing, it
   does not depend on the viewport, and nothing reflows while scrolling. The
   canvas still fills whatever that comes to, because the scene is drawn in
   fractions of its own height rather than in pixels. */
@media (max-width:48rem){
  .hero{
    min-height:auto;
    justify-content:flex-start;
    padding-block:4.5rem 4rem;
  }
}

/* The canvas already calms itself rather than switching off (see js/hero.js).
   This is only for the CSS-side transitions, which have no reason to run. */
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .btn:hover{transform:none}
}