/* ==========================================================================
   Ekiti All Stars Concert — design system
   Palette:  adire indigo ground, aso-oke gold, stage-light fuchsia/violet.
   Devices:  ticket stub (perforation + notch), aso-oke stripe band.
   ========================================================================== */

:root{
  /* ground */
  --ink:#08060F;
  --deep:#100A22;
  --indigo:#180E36;
  --raise:#20143F;

  /* ink on ground */
  --chalk:#F4EFE6;
  --muted:rgba(244,239,230,.62);
  /* .58 keeps these small labels above the 4.5:1 contrast minimum */
  --faint:rgba(244,239,230,.58);
  --line:rgba(244,239,230,.13);
  --line-strong:rgba(244,239,230,.26);

  /* accents */
  --gold:#F5C451;
  --brass:#C98A2E;
  --fuchsia:#FF2E86;
  --violet:#7A2BFF;
  --live:#31D391;

  /* type */
  --ff-display:'Unbounded','Arial Black',system-ui,sans-serif;
  --ff-body:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;

  --fs-hero:clamp(2.6rem,7.6vw,6.9rem);
  --fs-mega:clamp(2.6rem,8vw,6rem);
  --fs-h2:clamp(2rem,4.6vw,3.5rem);
  --fs-h3:clamp(1.25rem,2vw,1.6rem);
  --fs-lg:1.0625rem;
  --fs-base:1rem;
  --fs-sm:.875rem;
  --fs-xs:.78rem;

  /* space + shape */
  --head-h:74px;
  --pad:clamp(20px,5vw,64px);
  --maxw:1440px;
  --gap:clamp(20px,3vw,36px);
  /* the run between sections; headings are large, so they need the room */
  --sec-y:clamp(104px,11vw,164px);
  /* the whole page is square-cornered */
  --r-sm:0;
  --r-md:0;
  --r-lg:0;

  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

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

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* a nav jump stops below the sticky header instead of under it */
:target,section[id],div[id]{scroll-margin-top:calc(var(--head-h) + 12px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--ink);
  color:var(--chalk);
  font-family:var(--ff-body);
  font-size:var(--fs-base);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}

h1,h2,h3,h4{font-family:var(--ff-display);font-weight:800;line-height:.94;letter-spacing:-.02em;margin:0}
p,figure{margin:0}

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

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--pad);top:12px;z-index:200;background:var(--gold);color:#1A1000;padding:10px 16px;border-radius:var(--r-sm);font-weight:700}

/* --------------------------------------------------------------------------
   Shared devices
   -------------------------------------------------------------------------- */

/* aso-oke stripe: woven gold / fuchsia / chalk bands — our only divider */
.stripe{
  height:7px;
  background:
    repeating-linear-gradient(90deg,
      var(--gold) 0 26px, transparent 26px 34px,
      var(--fuchsia) 34px 44px, transparent 44px 54px,
      var(--chalk) 54px 58px, transparent 58px 78px);
  opacity:.9;
}

/* image placeholder frame — drop an <img> inside and the label disappears */
.ph{
  position:relative;overflow:hidden;
  border-radius:var(--r-md);
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(255,46,134,.42), transparent 60%),
    radial-gradient(110% 100% at 100% 100%, rgba(122,43,255,.48), transparent 62%),
    linear-gradient(160deg,#1E1140,#0B0718 70%);
  border:1px solid var(--line);
  display:block;
}
.ph::before{
  content:"";position:absolute;inset:0;
  background-image:var(--grain);opacity:.22;mix-blend-mode:overlay;
}
.ph::after{
  content:attr(data-ph);
  position:absolute;left:14px;bottom:12px;right:14px;
  font-size:var(--fs-xs);letter-spacing:.02em;
  color:rgba(244,239,230,.66);
}
.ph:has(img)::after,.ph:has(img)::before{display:none}
.ph img{width:100%;height:100%;object-fit:cover}

.heading{max-width:22ch}
.lede{color:var(--muted);max-width:62ch;font-size:var(--fs-lg);line-height:1.65}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 26px;border-radius:0;border:1px solid transparent;
  font-weight:700;font-size:var(--fs-sm);letter-spacing:.01em;
  white-space:nowrap;                    /* a label on two lines is a bug */
  cursor:pointer;transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.btn-gold{background:var(--gold);color:#1B1200}
.btn-gold:hover{background:#FFD877}
.btn-line{border-color:var(--line-strong);color:var(--chalk)}
.btn-line:hover{border-color:var(--gold);color:var(--gold)}
.btn-sm{padding:11px 20px}

/* ticket-stub panel: dashed tear + punched notches */
.stub{
  position:relative;
  background:linear-gradient(150deg,var(--indigo),var(--deep));
  border:1px solid var(--line);
  border-radius:var(--r-md);
  isolation:isolate;
}
.stub--notch::before,.stub--notch::after{
  content:"";position:absolute;width:26px;height:26px;border-radius:50%;
  background:var(--ink);border:1px solid var(--line);
  top:50%;transform:translateY(-50%);
}
.stub--notch::before{left:-14px}
.stub--notch::after{right:-14px}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-head{
  position:sticky;top:0;z-index:60;
  background:rgba(8,6,15,.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease,background-color .25s ease;
}
.site-head.is-stuck{border-bottom-color:var(--line);background:rgba(8,6,15,.94)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:74px}

.mark{display:flex;align-items:center;gap:11px;padding-block:6px;font-family:var(--ff-display);font-weight:800;font-size:.95rem;letter-spacing:-.01em}
.mark-dot{
  width:26px;height:26px;border-radius:50%;flex:none;
  background:conic-gradient(from 210deg,var(--gold),var(--fuchsia),var(--violet),var(--gold));
}

.nav{display:flex;align-items:center;gap:30px}
.nav a{font-size:var(--fs-sm);color:var(--muted);transition:color .16s ease}
.nav a:hover{color:var(--chalk)}
.head-cta{display:flex;align-items:center;gap:14px}

.burger{
  display:none;width:44px;height:40px;background:none;border:1px solid var(--line-strong);
  border-radius:var(--r-sm);cursor:pointer;padding:0;place-items:center;
}
.burger i{display:block;width:18px;height:2px;background:var(--chalk);position:relative}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--chalk)}
.burger i::before{top:-6px}
.burger i::after{top:6px}

/* The drawer hangs off the bottom of the header rather than sitting in the
   flow, so opening it lays the panel over the page instead of pushing the
   hero down. It animates its own height open and closed. */
/* .site-head .drawer, not .drawer: the .glass rule further down sets
   position:relative and would otherwise win on source order, putting the
   panel back in the flow and pushing the hero down as it opens. */
.site-head .drawer{
  position:absolute;top:100%;left:0;right:0;z-index:5;
  /* nearly solid: .glass alone let the hero read straight through the menu */
  background:linear-gradient(180deg,rgba(14,9,30,.985),rgba(9,6,20,.99));
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
}
.drawer{
  border-top:1px solid var(--line);
  box-shadow:0 24px 40px -28px rgba(0,0,0,.95);
  display:grid;grid-template-rows:0fr;
  opacity:0;visibility:hidden;
  transition:grid-template-rows .32s cubic-bezier(.2,.7,.25,1),
             opacity .2s ease,
             visibility 0s linear .32s;
}
.drawer.is-open{
  grid-template-rows:1fr;opacity:1;visibility:visible;
  transition:grid-template-rows .32s cubic-bezier(.2,.7,.25,1),
             opacity .2s ease,
             visibility 0s;
}
/* the row that actually collapses; it must be allowed to go to zero */
.drawer > .wrap{min-height:0;overflow:hidden}
.drawer a{display:block;padding:15px 0;border-bottom:1px solid var(--line);font-family:var(--ff-display);font-weight:600}
.drawer a:last-child{border-bottom:0}
/* The ticket button lives in the panel below 1040px and in the bar above it.
   Scoped to .drawer .drawer-ticket so it outranks the .drawer a rule above. */
.drawer .drawer-ticket{display:none;margin:18px 0 26px;justify-content:center}
@media (max-width:1040px){
  .head-cta .head-ticket{display:none}
  .drawer .drawer-ticket{display:flex}
}

/* the bars fold into a cross while the panel is open */
.burger i,
.burger i::before,
.burger i::after{transition:transform .28s cubic-bezier(.2,.7,.25,1),opacity .18s ease}
.burger[aria-expanded="true"] i{background:transparent}
.burger[aria-expanded="true"] i::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] i::after{transform:translateY(-6px) rotate(-45deg)}

@media (prefers-reduced-motion:reduce){
  .drawer,.burger i,.burger i::before,.burger i::after{transition:none}
}

/* six nav items plus two buttons stop fitting well before 1024 */
@media (max-width:1040px){
  .nav{display:none}
  .head-cta .btn-line{display:none}
  .burger{display:grid}
}
@media (max-width:560px){
  :root{--head-h:64px}
  /* the full name is long; it has to give ground to the buttons beside it */
  .head-in .mark{font-size:.86rem;white-space:nowrap;gap:9px}
  .mark-dot{width:22px;height:22px}
  .head-in{height:64px;gap:10px}
  .head-cta{gap:8px}
  .head-cta .btn-gold{padding:10px 13px}
  /* the footer has the room to set it on two lines */
  .foot-cols .mark{white-space:normal}
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
/* The hero is sized to sit inside one screenful, under the sticky header,
   and its content is centred both ways. */
/* The lockup takes the middle of the screen and the event bar is pushed to
   the very bottom edge, so the bar reads as the floor of the hero. */
.hero{
  position:relative;overflow:hidden;
  min-height:calc(100svh - var(--head-h));
  display:flex;flex-direction:column;
  padding-block:clamp(24px,4vw,40px) 0;
}
.hero-in{display:flex;flex-direction:column;flex:1}
/* pushed down so the lockup sits a little above the event bar rather than
   floating in the middle of the screen */
.hero-type{margin-top:auto}
.eventbar{margin-top:clamp(28px,5vh,64px)}

/* the picture that sits UNDER the gradient — added by main.js once it loads */
.hero-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-position:center 22%;background-size:cover;background-repeat:no-repeat;
  opacity:0;transition:opacity 1.1s ease;
}
.hero-bg.is-on{opacity:.5}
/* one scrim, straight down the page, so the centred lockup stays readable */
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(70% 55% at 50% 45%, rgba(8,6,15,.72), transparent 78%),
    linear-gradient(180deg,rgba(8,6,15,.62),rgba(8,6,15,.30) 42%,var(--ink) 97%);
}
@media (max-width:1150px){.hero-bg.is-on{opacity:.34}}
@media (prefers-reduced-motion:reduce){.hero-bg{transition:none}}

.hero-glow{
  position:absolute;inset:-20% -10% auto -10%;height:120%;z-index:0;pointer-events:none;
  background:
    radial-gradient(45% 40% at 22% 12%, rgba(255,46,134,.34), transparent 70%),
    radial-gradient(40% 44% at 82% 4%, rgba(122,43,255,.40), transparent 70%),
    radial-gradient(60% 30% at 50% 74%, rgba(245,196,81,.14), transparent 72%);
}
.hero-in{position:relative;z-index:1}

.hero-type{position:relative;z-index:2;text-align:center;max-width:1000px;margin-inline:auto}

.hero-type h1{font-size:var(--fs-hero);letter-spacing:-.045em;text-transform:uppercase}
/* EKITI / ALL STARS / CONCERT — one word to a line, at every width */
.hero-type h1 .l1,
.hero-type h1 .l2,
.hero-type h1 .l3{display:block;white-space:nowrap}
.hero-type h1 .l2{
  color:transparent;
  -webkit-text-stroke:2px var(--gold);
  text-shadow:0 0 44px rgba(245,196,81,.32);
}
.hero-type h1 .l3{color:var(--gold)}
.hero-year{
  display:inline-block;font-family:var(--ff-display);font-weight:600;
  font-size:clamp(.8rem,1.4vw,1rem);color:var(--fuchsia);
  vertical-align:super;letter-spacing:.06em;
}

/* the host card, in the Awards and Party row */
.host{position:relative;display:flex;flex-direction:column;max-width:460px;width:100%}
.host-ph{position:relative;z-index:0;aspect-ratio:3/4;flex:1 1 auto}
.host-ph img{object-position:center 18%}
.host-cap{
  position:relative;z-index:1;margin-top:-1px;
  padding:16px 20px 18px;border:1px solid var(--line);border-top:0;
  background:linear-gradient(180deg,rgba(24,14,54,.92),rgba(11,7,24,.96));
}
.host-k{
  display:block;font-size:var(--fs-xs);letter-spacing:.10em;
  text-transform:uppercase;color:var(--faint);margin-bottom:5px;
}
/* Archivo carries a true italic; the display face would only be slanted */
.host-name,.host-inline{
  font-family:var(--ff-body);font-style:italic;font-weight:600;
  color:var(--gold);letter-spacing:-.005em;
}
.host-name{font-size:clamp(1.2rem,1.8vw,1.55rem);line-height:1.2;display:block}
.act .host-name{font-size:1.15rem;display:inline}
@media (max-width:940px){.host{margin-inline:auto}}

.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(20px,2.6vw,28px)}

/* countdown */
.count{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:clamp(22px,3vw,32px);max-width:640px;margin-inline:auto}
.count-cell{
  min-width:104px;flex:1 1 104px;padding:16px 18px 14px;
  background:linear-gradient(160deg,rgba(32,20,63,.9),rgba(16,10,34,.9));
  border:1px solid var(--line);border-radius:var(--r-md);
}
.count-num{font-family:var(--ff-display);font-weight:800;font-size:clamp(2rem,4.6vw,3.1rem);line-height:1;font-variant-numeric:tabular-nums}
.count-lab{font-size:var(--fs-xs);color:var(--faint);margin-top:6px}
@media (max-width:560px){
  .count{display:grid;grid-template-columns:1fr 1fr}
  .count-cell{min-width:0}
}
.count.is-done .count-num{color:var(--gold)}

/* event bar */

.eventbar-in{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  background:var(--deep);border:1px solid var(--line);border-bottom:0;overflow:hidden;
}
.eventbar-cell{padding:22px 24px;border-right:1px solid var(--line)}
.eventbar-cell:last-child{border-right:0}
.eventbar-k{font-size:var(--fs-xs);color:var(--faint);margin-bottom:6px}
.eventbar-v{font-family:var(--ff-display);font-weight:600;font-size:1rem;line-height:1.3}
@media (max-width:820px){
  .eventbar-in{grid-template-columns:1fr 1fr}
  .eventbar-cell:nth-child(2n){border-right:0}
  .eventbar-cell:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .eventbar-cell{padding:18px 18px}
  .eventbar-v{font-size:.92rem}
}

/* --------------------------------------------------------------------------
   Section rhythm
   -------------------------------------------------------------------------- */
.sec{padding-block:var(--sec-y);position:relative}
.sec-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:20px;margin-bottom:clamp(30px,4vw,52px)}
/* heading on its own line, then the copy with a way through beside it */
.sec-head--stack{display:block}
.sec-head--stack .heading{max-width:none;margin-bottom:18px}
.sec-head-body{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px}
.sec-head-body .lede{flex:1 1 460px}
.sec-head-body .btn{flex:none}
.sec-head h2,
.sec-title{font-size:var(--fs-h2);text-transform:uppercase}
/* headings outside a .sec-head still need the run to their own content */
.sec-title{margin-bottom:clamp(18px,2.4vw,24px)}
.sec-title em{font-style:normal;color:var(--gold)}
.sec-head h2 em{font-style:normal;color:var(--gold)}
.sec--alt{background:var(--deep)}
.sec--alt .stub--notch::before,.sec--alt .stub--notch::after{background:var(--deep)}

/* --------------------------------------------------------------------------
   Tickets
   -------------------------------------------------------------------------- */
/* Stacked down the page: the three tiers, the call to action, then the host. */
.tiers{display:flex;flex-direction:column;gap:12px}

.tier{
  display:grid;grid-template-columns:1fr auto;gap:6px 20px;
  align-items:center;align-content:center;   /* stay compact in a taller box */
  padding:20px 24px;border:1px solid var(--line);
  background:var(--deep);position:relative;overflow:hidden;
}
.sec--alt .tier{background:var(--indigo)}
.tier h3{grid-column:1;grid-row:1;font-size:1.05rem;font-weight:600}
.tier-note{grid-column:1;grid-row:2;font-size:var(--fs-sm);color:var(--muted)}
.tier-price{grid-column:2;grid-row:1 / 3;font-family:var(--ff-display);font-weight:800;font-size:1.5rem;color:var(--gold);white-space:nowrap}
.tier-price small{display:block;font-family:var(--ff-body);font-weight:500;font-size:var(--fs-xs);color:var(--faint);text-align:right;margin-top:4px}
@media (max-width:460px){
  .tier{grid-template-columns:1fr}
  .tier-price{grid-column:1;grid-row:auto;margin-top:10px}
  .tier-price small{text-align:left}
}
/* stacked, the tiers size to their own content again */

/* the stub is the page's standing call to action */
/* the call to action, sitting under the tiers as a full-width band */
.ticket-cta{
  margin-top:clamp(18px,2.4vw,28px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:clamp(20px,3vw,40px);padding:clamp(24px,3.2vw,38px);
}
.ticket-cta-copy{max-width:56ch}
.ticket-cta-kicker{
  font-family:var(--ff-display);font-weight:600;font-size:var(--fs-xs);
  letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;
}
.ticket-cta-title{font-size:clamp(1.6rem,3vw,2.3rem);text-transform:uppercase;margin-bottom:10px}
.ticket-cta-note{color:var(--muted);font-size:var(--fs-sm);line-height:1.6}
.ticket-cta-acts{display:flex;flex-wrap:wrap;gap:12px;flex:none}
@media (max-width:700px){
  .ticket-cta{flex-direction:column;align-items:stretch}
  .ticket-cta-acts{width:100%}
  .ticket-cta-acts .btn{flex:1 1 100%;justify-content:center}
}

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */
.about-grid{display:grid;grid-template-columns:1.15fr minmax(0,.85fr);gap:clamp(28px,5vw,64px);align-items:center;justify-items:center}
@media (max-width:940px){.about-grid{grid-template-columns:1fr}}
.about-copy p + p{margin-top:18px}
.about-stats{display:flex;flex-wrap:wrap;gap:32px;margin-top:34px}
.about-stat b{display:block;font-family:var(--ff-display);font-weight:800;font-size:1.9rem;color:var(--gold);line-height:1}
.about-stat span{font-size:var(--fs-sm);color:var(--muted)}
/* --------------------------------------------------------------------------
   Line-up
   -------------------------------------------------------------------------- */
/* A rail scrolls on its own and answers a drag or a swipe. It is a real
   scroll container so touch gets the browser's own momentum; the scrollbar is
   hidden because the movement already says it moves. */
.rail{
  overflow-x:auto;overflow-y:hidden;
  /* the page scrolls smoothly, a rail must not: it is nudged a fraction of a
     pixel per frame, and smooth behaviour would restart an animation on every
     write and leave the slower rails standing still */
  scroll-behavior:auto;
  scrollbar-width:none;-ms-overflow-style:none;
  /* not pan-x: that swallows the vertical swipe and the page will not
     scroll when a finger lands on a rail. auto lets the browser pick the
     axis from the gesture, so sideways drags the rail and up scrolls on. */
  touch-action:auto;overscroll-behavior-x:contain;
  padding-bottom:6px;
}
.rail::-webkit-scrollbar{display:none}
.rail.is-live{cursor:grab}
.rail.is-dragging{cursor:grabbing;user-select:none}
.rail.is-dragging *{pointer-events:none}
.rail-track{display:flex;width:max-content}

/* the trailing margin (rather than a gap) keeps the -50% loop exact */
.act{flex:0 0 clamp(210px,24vw,290px);margin-right:18px;scroll-snap-align:start}
.act .ph{aspect-ratio:4/5;margin-bottom:14px}
.act h3{font-size:1.15rem;font-weight:600}
.act p{font-size:var(--fs-sm);color:var(--muted);margin-top:4px}

/* --------------------------------------------------------------------------
   Marquee
   -------------------------------------------------------------------------- */
.marquee{
  padding-block:clamp(26px,4vw,44px);
  border-block:1px solid var(--line);background:var(--ink);
}
.marquee-word{
  font-family:var(--ff-display);font-weight:800;text-transform:uppercase;
  font-size:var(--fs-mega);letter-spacing:-.03em;
  padding-inline:28px;white-space:nowrap;flex:none;
}
.marquee-word:nth-child(even){color:transparent;-webkit-text-stroke:1.4px var(--fuchsia)}
@media (max-width:600px){.marquee-word{padding-inline:16px}}

/* --------------------------------------------------------------------------
   Highlights
   -------------------------------------------------------------------------- */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:860px){.cards3{grid-template-columns:1fr}}

/* music · comedy · awards · and lots more */
.cards4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1150px){.cards4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.cards4{grid-template-columns:1fr}}
.cards4 .card{min-height:250px}
.card{
  padding:28px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--deep);
  min-height:230px;display:flex;flex-direction:column;justify-content:space-between;
}
.sec--alt .card{background:var(--indigo)}
.card--lit{background:linear-gradient(150deg,var(--fuchsia),var(--violet));border-color:transparent}
.sec--alt .card--lit{background:linear-gradient(150deg,var(--fuchsia),var(--violet))}
.card--lit p{color:rgba(255,255,255,.86)}
.card h3{font-size:var(--fs-h3);margin-bottom:12px}
.card p{font-size:var(--fs-sm);color:var(--muted);line-height:1.6}
.card-glyph{width:34px;height:34px;margin-bottom:20px;stroke:var(--gold);fill:none;stroke-width:1.5}
.card--lit .card-glyph{stroke:#fff}

/* --------------------------------------------------------------------------
   Schedule
   -------------------------------------------------------------------------- */
.sched{display:grid;grid-template-columns:.85fr 1.4fr;gap:clamp(28px,5vw,60px);align-items:start}
@media (max-width:940px){.sched{grid-template-columns:1fr}}

/* one night, so one chip instead of day tabs */
.day-chip{
  display:inline-block;margin-bottom:26px;
  padding:11px 20px;border-radius:999px;
  background:var(--gold);color:#1B1200;
  font-size:var(--fs-sm);font-weight:700;
}
.slot{display:grid;grid-template-columns:104px 1fr;gap:20px;padding:20px 0;border-bottom:1px solid var(--line);align-items:baseline}
.slot:first-child{border-top:1px solid var(--line)}
.slot-time{font-family:var(--ff-display);font-weight:600;font-size:.95rem;color:var(--gold);font-variant-numeric:tabular-nums}
.slot-title{font-weight:600;font-size:1.05rem}
.slot-desc{font-size:var(--fs-sm);color:var(--muted);margin-top:4px}
@media (max-width:560px){.slot{grid-template-columns:1fr;gap:6px}}

/* --------------------------------------------------------------------------
   Partners
   -------------------------------------------------------------------------- */
.tier-label{
  font-family:var(--ff-display);font-weight:600;font-size:var(--fs-xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
  margin:0 0 14px;
}
.tier-label + .logos{margin-bottom:clamp(30px,4vw,46px)}

.logos{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);overflow:hidden}
@media (max-width:640px){.logos{grid-template-columns:1fr}}

/* the sponsor row is a rail, so its cells carry their own borders */
.rail--logos .rail-track{align-items:stretch}
.rail--logos .logo-cell{
  flex:0 0 clamp(200px,21vw,250px);
  margin-right:12px;border:1px solid var(--line);
}

.logo-cell{
  background:var(--deep);display:grid;place-items:center;padding:30px 18px;min-height:118px;
  font-family:var(--ff-display);font-weight:600;font-size:.86rem;line-height:1.35;
  color:var(--muted);text-align:center;letter-spacing:-.005em;
  transition:color .2s ease,background-color .2s ease;
}
.logo-cell:hover{color:var(--chalk)}
.sec--alt .logo-cell{background:var(--indigo)}

.logo-cell--head{
  min-height:168px;padding:36px 26px;
  font-size:clamp(1rem,1.8vw,1.45rem);font-weight:800;color:var(--gold);
  text-transform:uppercase;line-height:1.2;
  background:
    radial-gradient(120% 130% at 12% 0%, rgba(255,46,134,.20), transparent 62%),
    radial-gradient(120% 130% at 100% 100%, rgba(122,43,255,.26), transparent 64%),
    var(--indigo);
}
.sec--alt .logo-cell--head{
  background:
    radial-gradient(120% 130% at 12% 0%, rgba(255,46,134,.20), transparent 62%),
    radial-gradient(120% 130% at 100% 100%, rgba(122,43,255,.26), transparent 64%),
    var(--raise);
}
.logo-cell--head:hover{color:#FFD877}
.logo-cell--more{color:var(--faint);font-style:italic;font-weight:400;font-family:var(--ff-body)}

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */
/* four tiles across, all the same shape, so the row closes cleanly */
.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.gallery .ph{aspect-ratio:4/5;min-width:0}
@media (max-width:860px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.gallery .ph{aspect-ratio:1}}
.gallery-more{margin-top:clamp(22px,3vw,32px)}

/* the gallery page runs the same tiles, just more of them */
.gallery--page{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.gallery--page{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.gallery--page{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* the bill, laid out rather than railed, on the Carnival Edition page */
.bill-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media (max-width:1100px){.bill-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.bill-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bill-grid .act{flex:none;margin-right:0}

/* --------------------------------------------------------------------------
   Chapters page
   -------------------------------------------------------------------------- */
.nav a.is-here{color:var(--gold)}
.nav a.is-here::after{transform:scaleX(1)}

.page-hero{position:relative;overflow:hidden;padding-block:clamp(48px,7vw,100px) clamp(52px,7vw,92px)}
.crumb{font-size:var(--fs-sm);color:var(--faint);margin-bottom:clamp(16px,2.4vw,26px)}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--gold)}
.crumb span{margin-inline:8px}

.page-title{font-size:var(--fs-mega);letter-spacing:-.045em;text-transform:uppercase}
.page-title .l1{display:block}
.page-title .l3{display:block;color:var(--gold)}
.chapter-stats{display:flex;flex-wrap:wrap;gap:34px;margin-top:clamp(30px,4vw,44px)}

.chapters{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:none}
.chapter{
  display:grid;grid-template-columns:132px 1fr auto;gap:clamp(18px,3vw,34px);align-items:start;
  padding:26px 28px;background:var(--deep);
  border:1px solid var(--line);border-radius:var(--r-md);
  transition:border-color .25s ease,transform .35s cubic-bezier(.2,.7,.25,1);
}
.chapter:hover{border-color:var(--line-strong);transform:translateX(4px)}
.chapter--next{
  border-color:rgba(245,196,81,.44);
  background:
    radial-gradient(90% 160% at 0% 0%, rgba(245,196,81,.10), transparent 60%),
    linear-gradient(150deg,var(--indigo),var(--deep));
}

.chapter-no{
  display:flex;flex-direction:column;gap:2px;
  padding-right:clamp(14px,2vw,26px);border-right:1px solid var(--line);min-height:100%;
}
.chapter-no span{font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.chapter-no b{font-family:var(--ff-display);font-weight:800;font-size:clamp(2.1rem,4vw,3rem);line-height:1;color:var(--gold)}
.chapter--next .chapter-no b{color:var(--gold)}

/* nothing filled in yet — keep it to one quiet line */
.chapter--blank{padding:16px 28px;align-items:center;gap:clamp(14px,2.4vw,26px)}
.chapter--blank .chapter-no{align-items:baseline;flex-direction:row;gap:10px;min-height:0}
.chapter--blank .chapter-no b{font-size:1.5rem;color:var(--muted)}
.chapter--blank .chapter-body h3{margin-bottom:0}

.chapter-body h3{font-size:var(--fs-h3);font-weight:600;line-height:1.2;margin-bottom:10px}
.chapter-soon{font-family:var(--ff-body);font-weight:400;font-style:italic;font-size:1rem;color:var(--faint);letter-spacing:0}
.chapter-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--muted)}
.chapter-note{font-size:var(--fs-sm);color:var(--muted);margin-top:10px;max-width:62ch}

.chapter-tag{
  align-self:center;flex:none;padding:8px 16px;border-radius:999px;
  background:var(--gold);color:#1B1200;
  font-family:var(--ff-display);font-weight:600;font-size:var(--fs-xs);
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
}

@media (max-width:760px){
  .chapter{grid-template-columns:1fr;gap:14px;padding:22px}
  .chapter-no{
    flex-direction:row;align-items:baseline;gap:10px;
    border-right:0;border-bottom:1px solid var(--line);padding:0 0 12px;min-height:0;
  }
  .chapter-no b{font-size:1.9rem}
  .chapter-tag{align-self:start}
  .chapter:hover{transform:none}
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq-grid{display:grid;grid-template-columns:.8fr 1.3fr;gap:clamp(28px,5vw,60px);align-items:start}
@media (max-width:940px){.faq-grid{grid-template-columns:1fr}}
.qa{border-bottom:1px solid var(--line)}
.qa:first-child{border-top:1px solid var(--line)}
.qa-q{
  width:100%;display:flex;gap:20px;align-items:center;justify-content:space-between;
  padding:22px 0;background:none;border:0;cursor:pointer;text-align:left;
  font-weight:600;font-size:1.02rem;transition:color .16s ease;
}
.qa-q:hover{color:var(--gold)}
.qa-sign{flex:none;width:26px;height:26px;position:relative}
.qa-sign::before,.qa-sign::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;transition:transform .22s ease}
.qa-sign::before{width:13px;height:1.5px;transform:translate(-50%,-50%)}
.qa-sign::after{width:1.5px;height:13px;transform:translate(-50%,-50%)}
.qa.is-open .qa-sign::after{transform:translate(-50%,-50%) scaleY(0)}
.qa-a{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .36s cubic-bezier(.2,.7,.25,1)}
.qa.is-open .qa-a{grid-template-rows:1fr}
.qa-a p{min-height:0;padding:0 46px 24px 0;color:var(--muted);font-size:var(--fs-sm);line-height:1.68;max-width:66ch;
  opacity:0;transition:opacity .3s ease .04s}
.qa.is-open .qa-a p{opacity:1}
@media (prefers-reduced-motion:reduce){.qa-a,.qa-a p{transition:none}}

/* --------------------------------------------------------------------------
   CTA
   -------------------------------------------------------------------------- */
.cta{position:relative;overflow:hidden;background:linear-gradient(115deg,var(--fuchsia),#FF7A3C 52%,var(--gold))}
.cta-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:30px;padding-block:clamp(48px,7vw,84px)}
.cta h2{font-size:var(--fs-h2);text-transform:uppercase;color:#100617;max-width:16ch}
.cta p{color:rgba(16,6,23,.80);margin-top:14px;max-width:44ch;font-weight:500}
.cta .btn{background:#0B0518;color:var(--chalk)}
.cta .btn:hover{background:#1B0D2E}

/* --------------------------------------------------------------------------
   Venue
   -------------------------------------------------------------------------- */
.venue-map{
  position:relative;aspect-ratio:21/9;margin-bottom:18px;
  border:1px solid var(--line);overflow:hidden;background:var(--indigo);
}
.venue-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.venue-row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.venue-row p{font-size:var(--fs-sm);color:var(--muted)}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-foot{background:var(--deep);border-top:1px solid var(--line);padding-block:clamp(46px,6vw,72px) 30px}
.foot-cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px;margin-bottom:44px}
@media (max-width:860px){.foot-cols{grid-template-columns:1fr 1fr}}
.foot-cols h3{font-size:var(--fs-sm);font-weight:600;margin-bottom:16px}
.foot-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
/* padded out to a real tap target rather than a 15px line of text */
.foot-cols a{display:inline-block;padding-block:7px;font-size:var(--fs-sm);color:var(--muted)}
.foot-cols a:hover{color:var(--gold)}
.foot-blurb{font-size:var(--fs-sm);color:var(--muted);max-width:38ch;margin-top:16px}
.foot-base{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;padding-top:26px;border-top:1px solid var(--line);font-size:var(--fs-xs);color:var(--faint)}

/* --------------------------------------------------------------------------
   Hero load — one orchestrated sequence; nothing else animates on scroll
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  .rise{opacity:0;transform:translateY(22px);animation:rise .8s cubic-bezier(.2,.7,.25,1) forwards}
  .rise-1{animation-delay:.05s}
  .rise-2{animation-delay:.16s}
  .rise-3{animation-delay:.27s}
  .rise-4{animation-delay:.38s}
  .rise-5{animation-delay:.5s}
  @keyframes rise{to{opacity:1;transform:none}}
}


/* ==========================================================================
   Liquid glass
   One material, used only on surfaces that float above the page: the header,
   the countdown, the ticket stub, the highlight cards, the play button and the
   mobile drawer. Two spans are injected into each by main.js — a specular
   highlight that follows the pointer, and a refracted rim.
   ========================================================================== */

.glass{
  position:relative;
  background:linear-gradient(148deg,rgba(255,255,255,.10),rgba(255,255,255,.02) 44%,rgba(255,255,255,.06));
  backdrop-filter:blur(18px) saturate(170%);
  -webkit-backdrop-filter:blur(18px) saturate(170%);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.26),
    inset -1px -1px 2px rgba(255,255,255,.05),
    inset 0 -22px 34px -26px rgba(122,43,255,.6),
    0 22px 48px -30px rgba(0,0,0,.9);
}
.sec--alt .card.glass{background:linear-gradient(148deg,rgba(255,255,255,.10),rgba(255,255,255,.02) 44%,rgba(255,255,255,.06))}

/* the lead card keeps its stage colour, seen through the same material */
.card--lit.glass,
.sec--alt .card--lit.glass{
  background:linear-gradient(150deg,rgba(255,46,134,.62),rgba(122,43,255,.58));
  border-color:rgba(255,255,255,.22);
}

/* the light that slides across the surface */
.glass-sheen{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:radial-gradient(46% 62% at var(--mx,26%) var(--my,0%),
    rgba(255,255,255,.34),rgba(255,255,255,.07) 44%,transparent 72%);
  opacity:.55;
  transition:opacity .45s ease, background-position .2s ease;
}
.glass:hover > .glass-sheen{opacity:1}

/* the bent light caught on the edge */
.glass-rim{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;padding:1px;
  background:linear-gradient(125deg,rgba(255,255,255,.65),transparent 34%,transparent 66%,rgba(245,196,81,.45));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:.6;
}
.glass > *:not(.glass-sheen):not(.glass-rim){position:relative;z-index:1}

/* real refraction where the browser supports a backdrop displacement map */
@supports (backdrop-filter:url(#liquid)) or (-webkit-backdrop-filter:url(#liquid)){
  .glass{
    backdrop-filter:blur(14px) saturate(175%) url(#liquid);
    -webkit-backdrop-filter:blur(14px) saturate(175%) url(#liquid);
  }
}
.glass-defs{position:absolute;width:0;height:0;overflow:hidden}

/* the header is the one glass surface that is always on screen */
.site-head{
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  backdrop-filter:blur(16px) saturate(165%);
  -webkit-backdrop-filter:blur(16px) saturate(165%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  transition:background-color .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.site-head.is-stuck{
  background:linear-gradient(180deg,rgba(12,8,24,.82),rgba(8,6,15,.72));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 18px 40px -30px rgba(0,0,0,.95);
}

/* colour behind the glass, so there is something for it to bend */
.orb{position:absolute;border-radius:50%;filter:blur(100px);opacity:.42;pointer-events:none;z-index:0}
.orb--fuchsia{background:var(--fuchsia)}
.orb--violet{background:var(--violet)}
.orb--gold{background:var(--brass)}
.sec{overflow:hidden}
.sec > .wrap{position:relative;z-index:1}

/* ==========================================================================
   Motion
   ========================================================================== */

/* entrances: one short lift, staggered inside each group, run once */
/* Content lifts in as it reaches the fold and settles back out as it leaves,
   so arriving from the nav lands on movement rather than a finished page. */
.js .reveal{opacity:0;transform:translateY(16px)}
.reveal{
  transition:opacity .62s cubic-bezier(.2,.7,.25,1),transform .62s cubic-bezier(.2,.7,.25,1);
  transition-delay:calc(var(--i,0) * 65ms);
}
.reveal.is-in{opacity:1;transform:none}
/* going out is quicker and undelayed, or leaving a section feels sticky */
.js .reveal:not(.is-in){transition-duration:.34s;transition-delay:0s}

/* hover answers: nav, gallery, the gold button */
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.25,1);
}
.nav a{position:relative}
.nav a:hover::after{transform:scaleX(1)}

.gallery .ph{transition:transform .55s cubic-bezier(.2,.7,.25,1),filter .55s ease}
.gallery .ph:hover{transform:scale(1.035);filter:brightness(1.14) saturate(1.12);z-index:2}


.btn{position:relative;overflow:hidden;clip-path:inset(0)}
.btn-gold::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 32%,rgba(255,255,255,.55) 50%,transparent 68%);
  transform:translateX(-125%);transition:transform .75s cubic-bezier(.3,.7,.2,1);
}
.btn-gold:hover::after{transform:translateX(125%)}

.act .ph{transition:transform .5s cubic-bezier(.2,.7,.25,1)}
.act:hover .ph{transform:translateY(-6px)}

.tier{transition:border-color .25s ease,transform .35s cubic-bezier(.2,.7,.25,1)}
.tier:hover{border-color:var(--line-strong);transform:translateX(4px)}

/* ==========================================================================
   Reduced motion: keep the material, drop everything that moves on its own
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none}
  .reveal{transition:none}
  .glass-sheen{transition:none}
  .gallery .ph,.act .ph,.tier,.chapter,.btn-gold::after{transition:none}
  .gallery .ph:hover,.act:hover .ph,.tier:hover,.chapter:hover{transform:none}
}


/* ==========================================================================
   Tablet and phone
   The type scale is redefined at the root rather than component by component,
   so every heading, lede and label steps down together and the rhythm holds.
   ========================================================================== */

@media (max-width:1024px){
  :root{
    --fs-hero:clamp(2.3rem,8.4vw,4.6rem);
    --fs-mega:clamp(2rem,7vw,4rem);
    --fs-h2:clamp(1.7rem,4.6vw,2.7rem);
    --sec-y:clamp(92px,10vw,132px);
  }

}

@media (max-width:600px){
  :root{
    --fs-hero:clamp(1.75rem,9vw,2.6rem);
    --fs-mega:1.7rem;
    --fs-h2:clamp(1.5rem,6.6vw,2rem);
    --fs-h3:1.08rem;
    --fs-lg:.98rem;
    --fs-base:.95rem;
    --fs-sm:.84rem;
    --fs-xs:.72rem;
    --sec-y:100px;
    --gap:20px;
  }

  .btn{padding:13px 22px}
  .btn-sm{padding:10px 16px}

  /* hero */
  .hero{padding-block:20px}
  .count{gap:8px}
  .count-cell{padding:13px 14px 11px}
  .count-num{font-size:1.7rem}
  .hero-actions{gap:10px}
  .hero-actions .btn{flex:1 1 100%;justify-content:center}
  .host-ph{aspect-ratio:4/5}
  .host-cap{padding:13px 16px 15px}
  .eventbar-cell{padding:15px 14px}
  .eventbar-v{font-size:.86rem}

  /* sections */
  .sec-head{margin-bottom:26px;gap:14px}
  .lede{max-width:none}

  /* tickets */
  .tier{grid-template-columns:1fr;padding:17px 18px;gap:4px}
  .tier-price{grid-column:1;grid-row:auto;margin-top:8px;font-size:1.3rem}
  .tier-price small{text-align:left}

  /* about */
  .about-stats{gap:20px 26px;margin-top:26px}
  .about-stat b{font-size:1.5rem}

  /* the rails */
  .act{flex:0 0 62vw;margin-right:12px}
  .act h3{font-size:1.05rem}

  /* timeline */
  .day-chip{padding:9px 16px;margin-bottom:18px}
  .slot{padding:16px 0}

  /* partners */
  .logo-cell{padding:22px 12px;min-height:88px;font-size:.78rem}
  .logo-cell--head{min-height:112px;padding:26px 18px}

  /* gallery, questions, footer */
  .gallery{gap:8px}
  .qa-q{padding:18px 0;font-size:.96rem;gap:12px}
  .qa-a p{padding-right:24px}
  .foot-cols{gap:26px;margin-bottom:32px}
  .venue-row{gap:14px}
  .venue-row .btn{width:100%;justify-content:center}

  /* chapters page */
  .chapter-stats{gap:20px 26px}
  .chapter{padding:18px}
  .chapter--blank{padding:14px 18px}
}

/* the narrowest phones */
@media (max-width:380px){
  :root{--pad:14px}
  .act{flex:0 0 74vw}
  .count{grid-template-columns:1fr 1fr}
  /* the wordmark, the button and the burger all have to share ~290px here */
  .head-in{gap:8px}
  .head-in .mark{font-size:.78rem;gap:8px}
  .mark-dot{width:20px;height:20px}
  .head-cta{gap:6px}
  .head-cta .btn-gold{font-size:.70rem;padding:9px 10px}
  .burger{width:38px}
}

/* --------------------------------------------------------------------------
   Short screens
   A landscape phone or a small laptop has the width for the hero but not the
   height, so the lockup and the countdown step down rather than push the
   event bar off the bottom.
   -------------------------------------------------------------------------- */
@media (max-height:760px) and (min-width:601px){
  :root{--fs-hero:clamp(2.2rem,5.4vw,4.2rem)}
  .hero{padding-block:20px}
  .count{margin-top:18px}
  .count-cell{padding:12px 16px 10px}
  .count-num{font-size:clamp(1.6rem,3vw,2.2rem)}
  .hero-actions{margin-top:18px}
  .eventbar{margin-top:22px}
  .eventbar-cell{padding:14px 16px}
}
@media (max-height:640px) and (max-width:600px){
  :root{--fs-hero:clamp(1.6rem,7.4vw,2.2rem)}
  .count-num{font-size:1.4rem}
  .eventbar-cell{padding:12px 12px}
}
@media (max-width:700px){.venue-map{aspect-ratio:4/3}}