/* SSS27 brand skin. Fonts, palette and elements from the official
   Sun, Sand & Soul kit (Brand (SSS27)). Supplies every token the engine
   expects. Nothing structural lives here.

   The poster this is skinned from is a 70s beach print: teal sky, orange
   sunburst, cream lettering, a slate panel carrying the lineup. So the page
   stays light-on-dark like the engine assumes, but the dark is sea rather
   than night. */
@font-face{font-family:'Laguna';src:url(assets/laguna.woff2) format('woff2');font-display:block}
@font-face{font-family:'LagunaSerif';src:url(assets/lagunaserif.woff2) format('woff2');font-display:block}
@font-face{font-family:'Oldport';src:url(assets/oldport.woff2) format('woff2');font-display:block}
@font-face{font-family:'Pop';src:url(assets/pop.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Pop';src:url(assets/pop-bold.woff2) format('woff2');font-weight:700;font-display:swap}

:root{
  /* official palette, sampled from the kit's logos, backgrounds and shapes */
  --s-cream:#EDE1BD;  --s-amber:#F2A845; --s-orange:#E4611F; --s-coral:#F0836B;
  --s-red:#E24A34;    --s-teal:#1E9490;  --s-teal-lo:#12615F; --s-slate:#3A6474;
  --s-ink:#14403F;    --s-ink-deep:#0C2E2E;

  --c-bg:var(--s-ink); --c-bg-deep:var(--s-ink-deep); --c-card:#1E5150;
  --c-paper:var(--s-cream);
  --c-dim:rgba(237,225,189,.74); --c-dim2:rgba(237,225,189,.88);
  --c-line:rgba(237,225,189,.18); --c-line-strong:rgba(237,225,189,.30);
  --c-line-dash:rgba(237,225,189,.42);
  --c-scrim:rgba(12,46,46,.46); --c-scrim-deep:rgba(12,46,46,.66);
  --c-veil:rgba(10,38,38,.9); --c-fill:rgba(237,225,189,.12);

  /* Amber carries the labels because it is the only kit colour with real
     contrast on deep teal. Coral takes links so the two never read as one. */
  --c-accent:var(--s-coral); --c-accent-2:var(--s-amber);
  --c-good:var(--s-amber); --c-hot:var(--s-red);
  /* Text on the red and amber fills. Ink wins on both; cream fails on amber. */
  --c-on-accent:var(--s-ink);
  --c-hero-eyebrow:var(--s-cream);

  /* Sky down to sea, with the sunburst behind the logo. */
  --g-hero:linear-gradient(180deg,#2E8F8B 0%,#1E7377 24%,#1A5F62 46%,
    var(--s-slate) 74%,var(--s-ink) 100%);
  --g-board:linear-gradient(160deg,rgba(58,100,116,.55),rgba(30,148,144,.3));
  /* Lunatic Ball had one live tier, so every live card could be the loud one.
     Four live tiers here, and four orange slabs is a wall. Live cards take the
     poster's slate panel; the crew's own pick keeps the sunset gradient. */
  --g-price:linear-gradient(150deg,#35606B,#22585A);
  --g-price-pick:linear-gradient(150deg,var(--s-orange),var(--s-red));
  --g-unlocked:linear-gradient(120deg,rgba(30,148,144,.52),rgba(242,168,69,.36));
  --g-close:linear-gradient(120deg,rgba(226,74,52,.38),rgba(228,97,31,.46));
  --g-bar:linear-gradient(90deg,var(--s-teal),var(--s-amber),var(--s-orange));
  --g-lineup:linear-gradient(170deg,#10393A 0%,#1A4E50 45%,var(--s-slate) 100%);

  /* Laguna Tropic Serif carries the headings: it is the only kit display
     face with real lowercase, and half the headings on this page are
     sentence case. The Bold Era Sans is the poster's own headline face
     and keeps that job below, in caps, the only way the brand sets it. */
  --f-display:'LagunaSerif',Georgia,serif;
  --f-label:'Laguna',Impact,sans-serif;
  --f-script:'Oldport',cursive;
  --f-body:'Pop',system-ui,sans-serif;

  --r-card:18px; --r-pill:999px; --shadow-btn:0 6px 22px rgba(8,32,32,.45);
}

/* The Bold Era Sans is not used. It is the poster's headline face and it is
   the right face on a printed sheet, but on a phone it does not survive: the
   letterforms are so heavy that the counters close up, its zero is nearly a
   solid oval, and at every size we tried it read as shape rather than text.
   The kit's other two faces carry the whole page instead, which is why the
   font file is gone rather than merely unreferenced. */

/* The lineup, in the poster's condensed caps face. Same face as the date
   banner on the admat, and it is built for setting names in capitals. */
#lineup .night .acts{font-family:'Laguna',Impact,sans-serif;letter-spacing:.02em;
  line-height:1.22}

/* The hero ask is the largest line on the page and it sits on the busiest
   ground, so it takes the heading face rather than the display one. A lighter
   letterform also needs less protection: the hard ink offset stays because it
   is the poster's own way of setting type on sky, but the halo comes down. */
.ask{font-size:clamp(39px,9.8vw,62px)!important;letter-spacing:.01em;
  text-shadow:0 3px 0 var(--s-ink),0 0 14px rgba(12,46,46,.45)}
.hero .when{text-shadow:0 2px 0 var(--s-ink),0 0 16px rgba(12,46,46,.7)}
#lineup .night .acts{font-size:clamp(21px,4.9vw,29px)}
section h2{font-size:clamp(27px,5.8vw,40px)}

/* The hero. The poster's signature is a ray burst behind the mark, not a glow:
   the engine's two decorative layers are repainted as rays and a hard sun disc
   so the middle of the hero reads as sky rather than haze. */
.hero .stripes{top:0;height:74%;opacity:.5;
  background:repeating-conic-gradient(from 0deg at 50% 30%,
    var(--s-orange) 0deg 2.4deg,transparent 2.4deg 7.5deg);
  -webkit-mask-image:radial-gradient(circle at 50% 30%,#000 22%,rgba(0,0,0,.55) 46%,transparent 72%);
  mask-image:radial-gradient(circle at 50% 30%,#000 22%,rgba(0,0,0,.55) 46%,transparent 72%)}
.sun{display:none}

/* The one card the crew is actually buying. :has is how the pick is found,
   because the engine marks it with a child badge; where :has is missing the
   card simply stays slate like the others and the badge still names it. */
.pass.live:has(.ours){background:var(--g-price-pick)}
.pass.live:has(.ours) .amt .from{color:var(--c-paper)}

/* The qualifier inside an act line. Same face as the act, so it only needs
   to step down in size and colour to stop competing with the name. */
#lineup .night .acts .sub{font-size:.62em;letter-spacing:.08em}