/* =========================================================
   Raahe.co
   Palette + type are taken straight from the brand guide.
   The one idea running through the page: an open mic runs to
   a running order, and each section is a slot in the night
   with its own stage-light "gel" colour.
   ========================================================= */

:root{
  /* Brand */
  --pink:    #F04E98;
  --grey:    #212121;
  --paper:   #F4F5F5;
  --violet:  #7D55C7;
  --mindaro: #D4EB8E;
  --orange:  #FF6A13;

  /* Derived surfaces */
  --ink:     #0E0E0E;
  --ink-2:   #161616;
  --line:    rgba(244,245,245,.13);
  --muted:   rgba(244,245,245,.62);

  /* The current stage light. Swapped per section by JS. */
  --gel: var(--pink);

  /* Layout */
  --gut: clamp(20px, 5vw, 84px);
  --max: 1680px;
  --nav-h: 90px;

  /* Type */
  --display: "League Spartan", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease: cubic-bezier(.22,1,.36,1);
}

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

html{
  overflow-x:clip;
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(16px, .55vw + 14px, 19px);
  line-height:1.55;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

body.is-locked{ overflow:hidden; }
button, a, select, input{ -webkit-tap-highlight-color:transparent; }

img{ max-width:100%; display:block; }
a{ color:inherit; }

::selection{ background:var(--pink); color:#fff; }

.mono{
  font-family:var(--mono);
  font-size:clamp(10px,.35vw + 9px,12px);
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:400;
}

.skip-link{
  position:fixed; left:-999px; top:8px; z-index:999;
  background:var(--pink); color:#fff; padding:10px 16px; border-radius:6px;
  text-decoration:none; font-weight:600;
}
.skip-link:focus{ left:8px; }

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

/* ---------------------------------------------------------
   Atmosphere: film grain + a stage light that follows you
   --------------------------------------------------------- */
.grain{
  position:fixed; inset:-50%;
  z-index:60; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-2%)}
  80%{transform:translate(3%,1%)}
}

.spotlight{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,30%),
             color-mix(in srgb, var(--gel) 22%, transparent), transparent 70%);
  opacity:.55;
  transition:background-color .6s linear;
}

/* ---------------------------------------------------------
   Load sequence
   --------------------------------------------------------- */
.loader{
  position:fixed; inset:0; z-index:200;
  background:var(--ink);
  display:grid; place-items:center;
  transition:transform 1s var(--ease), opacity .4s ease .6s;
}
.loader.is-done{ transform:translateY(-101%); }
.loader__inner{ display:flex; align-items:baseline; gap:18px; }
.loader__label{ color:var(--pink); }
.loader__count{
  font-size:clamp(56px,12vw,140px);
  font-weight:800; line-height:1; letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
}
.loader__bar{
  position:absolute; left:var(--gut); right:var(--gut); bottom:12%;
  height:2px; background:var(--line);
}
.loader__bar i{ display:block; height:100%; width:0; background:var(--pink); }

/* ---------------------------------------------------------
   Nav
   --------------------------------------------------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:80;
  height:var(--nav-h);
  display:flex; align-items:center; gap:24px;
  padding:0 var(--gut);
  transition:transform .5s var(--ease), background .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(14,14,14,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.nav.is-hidden{ transform:translateY(-102%); }

.nav__brand{
  display:flex; align-items:center; gap:13px;
  text-decoration:none; margin-right:auto;
}
.nav__mark{ width:48px; height:auto; }
.nav__word{
  font-weight:700; font-size:26px; letter-spacing:-.03em;
}

.nav__links{ display:flex; gap:28px; }
.nav__links a{
  text-decoration:none; font-size:17px; font-weight:500;
  color:var(--muted); position:relative; padding:4px 0;
  transition:color .25s ease;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--gel); transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav__links a:hover{ color:var(--paper); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }

.nav__burger{
  display:none; width:44px; height:44px; border:0; background:none;
  cursor:pointer; padding:0; place-items:center;
}
.nav__burger i{
  display:block; width:24px; height:2px; background:var(--paper); margin:4px auto;
  transition:transform .35s var(--ease), opacity .2s ease;
}
.nav__burger[aria-expanded="true"] i:first-child{ transform:translateY(3px) rotate(45deg); }
.nav__burger[aria-expanded="true"] i:last-child{ transform:translateY(-3px) rotate(-45deg); }

.menu{
  position:fixed; inset:0; z-index:75;
  background:var(--ink);
  padding:calc(var(--nav-h) + 32px) var(--gut) 40px;
  display:flex; flex-direction:column; gap:6px;
}
.menu[hidden]{ display:none; }
.menu a{
  text-decoration:none; font-size:clamp(30px,8vw,44px); font-weight:700;
  letter-spacing:-.03em; line-height:1.25;
  display:flex; align-items:baseline; gap:14px;
  opacity:0; transform:translateY(20px);
  animation:menuIn .5s var(--ease) forwards;
}
.menu a:nth-child(1){animation-delay:.04s}
.menu a:nth-child(2){animation-delay:.08s}
.menu a:nth-child(3){animation-delay:.12s}
.menu a:nth-child(4){animation-delay:.16s}
.menu a:nth-child(5){animation-delay:.20s}
.menu a:nth-child(6){animation-delay:.24s}
.menu a:nth-child(7){animation-delay:.28s}
.menu a span{ color:var(--pink); }
@keyframes menuIn{ to{opacity:1; transform:none} }
.menu__cta{
  margin-top:auto; background:var(--pink); color:#fff;
  border-radius:100px; justify-content:center; padding:16px;
  font-size:20px !important;
}

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */
.btn{
  --bg:var(--pink); --fg:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 30px; border-radius:100px;
  background:var(--bg); color:var(--fg);
  text-decoration:none; border:1px solid transparent;
  font-weight:600; font-size:16px; letter-spacing:-.01em;
  cursor:pointer; position:relative; overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s ease, background .3s ease, color .3s ease;
  will-change:transform;
}
.btn span{ position:relative; z-index:1; }
.btn--pink:hover{ box-shadow:0 0 0 6px color-mix(in srgb, var(--pink) 20%, transparent); }
.btn--ghost{ --bg:transparent; --fg:var(--paper); border-color:var(--line); }
.btn--ghost:hover{ --bg:var(--paper); --fg:var(--ink); border-color:var(--paper); }
.btn--dark{ --bg:var(--ink); --fg:var(--paper); }
.btn--dark:hover{ box-shadow:0 10px 30px rgba(0,0,0,.3); }
.btn--wide{ width:100%; padding:19px 30px; font-size:18px; }
.nav__cta{ padding:14px 28px; font-size:17px; }

/* ---------------------------------------------------------
   Running order rail
   --------------------------------------------------------- */
.rail{
  position:fixed; right:calc(var(--gut) * .5); top:50%; transform:translateY(-50%);
  z-index:70; display:flex; flex-direction:column; gap:12px;
  align-items:flex-end; pointer-events:none;
}
.rail__now{
  writing-mode:vertical-rl;
  color:var(--gel); letter-spacing:.2em; margin-bottom:10px;
  transition:color .5s ease;
}
.rail__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.rail__list li{ display:flex; justify-content:flex-end; }
.rail__tick{
  display:block; height:1px; width:16px; background:rgba(244,245,245,.3);
  transition:width .4s var(--ease), background .4s ease;
}
.rail__list li.is-on .rail__tick{ width:34px; background:var(--gel); }

/* ---------------------------------------------------------
   Shared section furniture
   --------------------------------------------------------- */
.slot{
  position:relative; z-index:2;
  max-width:var(--max); margin:0 auto;
  padding:clamp(46px,5.6vh,76px) var(--gut);
}
.slot__head{ margin-bottom:clamp(44px,3.8vw,72px); }

/* Heading on the left, the paragraph beside it, so wide screens do not
   leave half the row empty and the section does not grow taller than it needs. */
.slot__head--split{
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(24px,4vw,72px); align-items:end;
}
.slot__head--split .slot__lede{ margin:0 0 .4em; max-width:none; }
.slot__head--split .h2{ font-size:clamp(34px,4.9vw,70px); }
.slot__lede{
  max-width:60ch; margin:22px 0 0; color:var(--muted); font-size:1.02em;
}

.eyebrow{ color:var(--gel); margin:0 0 22px; }

.h2, .statement, .hero__head, .encore__title{
  font-weight:800; letter-spacing:-.035em; line-height:.92;
  margin:0;
}
.h2{ font-size:clamp(38px,6.4vw,90px); }
.statement{ font-size:clamp(26px,3.8vw,55px); line-height:1.06; max-width:34ch; }
.h2 em, .statement em, .hero__head em, .encore__title em{
  font-style:normal; color:var(--gel);
}

/* line-by-line masked reveal */
.line{ display:block; overflow:hidden; padding-bottom:.3em; margin-bottom:-.22em; }
.line > span{
  display:block;
  transform:translateY(110%);
  transition:transform 1s var(--ease);
}
.is-in .line > span{ transform:none; }
.is-in .line:nth-child(2) > span{ transition-delay:.08s; }
.is-in .line:nth-child(3) > span{ transition-delay:.16s; }
.is-in .line:nth-child(4) > span{ transition-delay:.24s; }

/* generic reveal */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .9s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

/* ---------------------------------------------------------
   00 · Hero
   --------------------------------------------------------- */
.hero{
  position:relative; z-index:2;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:calc(var(--nav-h) + 40px) var(--gut) clamp(48px,7vh,90px);
  max-width:var(--max); margin:0 auto;
  overflow:hidden;
}
.hero__grid{ position:relative; z-index:3; }

.hero__head{
  font-size:clamp(37px,7.4vw,116px);
  line-height:.88;
  margin:0 0 clamp(28px,5vh,54px);
  max-width:16ch;
}

.hero__actions{ display:flex; gap:12px; flex-wrap:wrap; }

.hero__stage{
  position:absolute; z-index:1; inset:0; pointer-events:none;
}
.stage__glow{
  position:absolute; right:-8%; top:-14%; width:70vw; height:70vw; max-width:900px; max-height:900px;
  background:radial-gradient(circle, color-mix(in srgb, var(--pink) 40%, transparent), transparent 62%);
  filter:blur(30px); opacity:.5;
  animation:breathe 9s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.12)} }

.galaxy{
  position:absolute; right:-1%; top:57%; transform:translateY(-50%);
  width:min(42vw,500px); aspect-ratio:1;
}
.galaxy svg{ width:100%; height:100%; overflow:visible; }
.galaxy g{ transform-box:view-box; transform-origin:200px 200px; }

@keyframes spin{ to{ transform:rotate(360deg) } }
@keyframes spinBack{ to{ transform:rotate(-360deg) } }
@keyframes ping{
  0%{ transform:scale(1); opacity:.55 }
  100%{ transform:scale(2.5); opacity:0 }
}
@keyframes twinkle{
  0%,100%{ opacity:.15 } 50%{ opacity:.9 }
}

.orb--a{ animation:spin 60s linear infinite; }
.orb--b{ animation:spinBack 38s linear infinite; }
.orb--c{ animation:spin 22s linear infinite; }
.vinyl{ animation:spin 14s linear infinite; }
.waves circle{
  transform-box:view-box; transform-origin:200px 200px;
  animation:ping 4.8s ease-out infinite; animation-delay:var(--d);
}
.stars circle{ animation:twinkle 3.4s ease-in-out infinite; animation-delay:var(--d); }
.card__art svg{ animation:spin 40s linear infinite; }

@keyframes cue{ 0%,100%{transform:scaleY(.4); opacity:.4} 50%{transform:scaleY(1); opacity:1} }

/* ---------------------------------------------------------
   Marquees
   --------------------------------------------------------- */
.ticker{
  position:relative; z-index:3;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden; padding:18px 0;
  width:100vw; margin-left:calc(50% - 50vw); margin-right:0;
}
.ticker__track{
  display:flex; align-items:center; gap:34px; width:max-content;
  will-change:transform;
}
.ticker__track span{
  font-size:clamp(22px,3.4vw,48px); font-weight:700; letter-spacing:-.03em;
  white-space:nowrap; text-transform:uppercase;
}
.ticker__track i{ color:var(--gel); font-style:normal; font-size:clamp(14px,1.6vw,24px); }

.ticker--sm{ border:0; padding:0; }
.ticker--sm .ticker__track{ gap:26px; }
.ticker--sm .ticker__track span{
  font-size:clamp(18px,2.4vw,34px); font-weight:600; color:var(--muted);
  text-transform:none; letter-spacing:-.02em;
}
.ticker--sm .ticker__track i{ color:var(--gel); }


/* ---------------------------------------------------------
   01 · About us - copy beside the Instagram film
   --------------------------------------------------------- */
.about{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,4vw,72px); align-items:stretch;
  margin-bottom:clamp(40px,4.6vw,68px);
}
.about__copy{ display:flex; flex-direction:column; }
.about__copy .about__lede:last-child{ margin-bottom:0; }

/* Native video, so it plays on the page with no Instagram chrome around it */
.film{
  position:relative; border-radius:20px; overflow:hidden;
  background:
    radial-gradient(120% 120% at 30% 15%, color-mix(in srgb, var(--pink) 45%, transparent), transparent 62%),
    linear-gradient(160deg, var(--ink-2), #2a2a2a);
  border:1px solid var(--line);
  min-height:clamp(380px,52vh,620px);
}
.film video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
}
.film__sound{
  position:absolute; left:14px; bottom:14px; z-index:2;
  border:1px solid rgba(244,245,245,.3); background:rgba(14,14,14,.6);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  color:var(--paper); border-radius:100px; padding:8px 16px; cursor:pointer;
  transition:background .3s ease, border-color .3s ease;
}
.film__sound:hover{ background:var(--pink); border-color:var(--pink); }
.about__lede{ margin:24px 0 0; color:var(--muted); max-width:none; }
.about .statement{
  margin-bottom:8px;
  font-size:clamp(22px,2.85vw,41px); max-width:none;
}

/* Instagram embeds sit in a frame so the white card reads as a deliberate
   poster on the dark page rather than a hole in it. */
.ig{
  margin:0; background:#fff;
  border:1px solid var(--line); border-radius:18px;
  overflow:hidden; position:relative;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.ig iframe{ display:block; width:100%; height:100%; border:0; }
.ig--reel{ aspect-ratio:400/620; max-width:420px; }
.ig--wide{ aspect-ratio:400/560; max-width:440px; margin-top:clamp(28px,4vw,44px); }
.ig figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:10px 14px; background:var(--ink); color:rgba(244,245,245,.55);
  border-top:1px solid var(--line);
}
.ig--reel iframe{ height:calc(100% - 34px); }

.ig-row{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(18px,2.4vw,32px);
  margin-top:clamp(48px,7vw,90px);
}
.ig-row .ig{ aspect-ratio:400/540; }

.sub{
  font-size:clamp(20px,2.2vw,30px); font-weight:700; letter-spacing:-.03em;
  margin:clamp(28px,3.4vw,46px) 0 clamp(18px,2vw,28px);
}
/* ---------------------------------------------------------
   01 · About us + what we do
   --------------------------------------------------------- */
.cards{ display:flex; flex-direction:column; gap:clamp(14px,1.8vw,26px); }
.card{
  position:sticky;
  top:calc(var(--nav-h) + 20px + var(--i) * 16px);
  background:#191919;
  border:1px solid rgba(244,245,245,.16);
  border-radius:22px;
  padding:clamp(26px,3.2vw,46px);
  display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr);
  gap:clamp(24px,4vw,60px); align-items:center;
  min-height:clamp(210px,28vh,300px);
  overflow:hidden;
  box-shadow:0 -20px 60px rgba(0,0,0,.45);
}
.card__idx{ color:var(--gel); }
.card__title{
  margin:16px 0 16px;
  font-size:clamp(26px,3.4vw,50px); font-weight:800;
  letter-spacing:-.035em; line-height:1.02;
}
.card__body p{ margin:0; color:var(--muted); max-width:62ch; }
.card__art{ justify-self:center; width:min(190px,100%); }
.card__art svg{ width:100%; height:auto; }

/* ---------------------------------------------------------
   02 · What we've done so far
   --------------------------------------------------------- */
.scores{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(24px,3vw,48px);
  margin-bottom:clamp(38px,4.6vw,66px);
}
.score__num{
  display:block; font-size:clamp(50px,7.5vw,120px); font-weight:900;
  line-height:.85; letter-spacing:-.05em; color:var(--paper);
  font-variant-numeric:tabular-nums;
}
.score p{ margin:18px 0 0; color:var(--muted); font-size:.95em; max-width:26ch; }
.score{
  border-top:2px solid color-mix(in srgb, var(--gel) 55%, transparent);
  padding-top:22px;
}
.score:nth-child(even) .score__num{ color:var(--gel); }
.score:nth-child(even) p{ color:rgba(244,245,245,.72); }

.trusted__label{ color:var(--gel); margin:0 0 22px; }
.trusted .ticker{ margin:0; }

/* ---------------------------------------------------------
   03 · Open mic
   --------------------------------------------------------- */
.strip{ overflow:hidden; margin:clamp(24px,2.8vw,42px) calc(var(--gut) * -1); }
.strip--tall{ margin-bottom:clamp(32px,3.8vw,54px); }
.strip__track{ display:flex; gap:14px; width:max-content; will-change:transform; }
.shot{
  margin:0; position:relative;
  width:clamp(215px,22vw,320px); aspect-ratio:4/5;
  border-radius:16px; overflow:hidden;
  background:
    radial-gradient(120% 120% at 20% 10%, color-mix(in srgb, var(--gel) 55%, transparent), transparent 60%),
    linear-gradient(140deg, var(--ink-2), #2a2a2a);
  border:1px solid var(--line);
  display:grid; place-items:end start;
}
.shot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.shot figcaption{
  position:relative; z-index:1; padding:12px 14px;
  color:var(--paper); mix-blend-mode:difference;
}

.facts{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(16px,2vw,30px);
}
.facts li{ border-top:1px solid var(--line); padding-top:22px; }
.facts b{
  display:block; font-size:clamp(30px,3.6vw,58px); font-weight:800;
  line-height:.9; letter-spacing:-.045em; color:var(--gel);
  font-variant-numeric:tabular-nums;
}
.facts span{ display:block; margin-top:14px; color:var(--muted); font-size:.88em; line-height:1.4; }

/* The flagship event gets the one solid pink card on the page. */
.tickets{
  margin-top:clamp(28px,3.4vw,48px);
  display:flex; align-items:center; justify-content:space-between; gap:clamp(24px,4vw,48px);
  flex-wrap:wrap;
  padding:clamp(28px,4vw,48px);
  border:0;
  border-radius:24px;
  background:
    radial-gradient(120% 190% at 100% 0%, #FF7CB6, transparent 62%),
    var(--pink);
  color:var(--ink);
  box-shadow:0 24px 70px color-mix(in srgb, var(--pink) 26%, transparent);
}
.tickets__copy .mono{ color:rgba(14,14,14,.6); margin:0 0 12px; }
.tickets h3{
  margin:0; font-size:clamp(26px,3.2vw,44px); font-weight:800;
  letter-spacing:-.035em; line-height:1.02; color:var(--ink);
}
.tickets__where{
  margin:12px 0 0; font-weight:700; color:var(--ink);
  font-size:clamp(16px,1.35vw,20px); letter-spacing:-.01em;
}
.tickets__sub{ margin:12px 0 0; color:rgba(14,14,14,.72); max-width:56ch; font-weight:500; }

/* ---------------------------------------------------------
   05 · Volunteer
   --------------------------------------------------------- */
.slot--volunteer{ padding-top:clamp(34px,4vh,58px); padding-bottom:clamp(34px,4vh,58px); }
.volunteer{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(28px,5vw,72px); align-items:center;
  padding:clamp(30px,4vw,56px);
  border:1px solid color-mix(in srgb, var(--gel) 40%, transparent);
  border-radius:22px;
  background:
    radial-gradient(80% 200% at 0% 0%, color-mix(in srgb, var(--gel) 14%, transparent), transparent 70%),
    var(--ink-2);
}
.volunteer .h2{ font-size:clamp(30px,4vw,58px); }
.volunteer__side p{ margin:0 0 28px; color:var(--muted); max-width:none; }

/* ---------------------------------------------------------
   04 · Selected artists
   --------------------------------------------------------- */
.program__list{
  list-style:none; margin:0 0 clamp(28px,3.4vw,40px); padding:0;
  max-width:1240px;
}
.program__list li{
  display:grid; grid-template-columns:minmax(140px,.24fr) minmax(0,1fr);
  gap:clamp(16px,2vw,36px);
  padding:22px 0; border-top:1px solid var(--line);
}
.program__list li:last-child{ border-bottom:1px solid var(--line); }
.program__list span{ color:var(--gel); padding-top:.35em; }
.program__list p{ margin:0; color:var(--muted); font-size:.97em; }
.program__actions{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }

/* ---------------------------------------------------------
   05 · Two ways in
   --------------------------------------------------------- */
.panels{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.4vw,32px); }
.panel{
  border-radius:24px; padding:clamp(30px,4vw,58px);
  color:var(--ink); display:flex; flex-direction:column; align-items:flex-start;
  min-height:clamp(320px,45vh,460px);
  position:relative; overflow:hidden;
}
.panel--mindaro{ background:var(--mindaro); }
.panel--orange{ background:var(--orange); }
.panel__tag{ color:rgba(14,14,14,.6); }
.panel h3{
  margin:16px 0 16px; font-size:clamp(28px,3.1vw,46px);
  font-weight:800; letter-spacing:-.035em; line-height:.98;
}
.panel p{ margin:0 0 auto; max-width:54ch; color:rgba(14,14,14,.78); font-weight:500; }
.panel .btn{ margin-top:32px; }

/* ---------------------------------------------------------
   06 · Our team
   --------------------------------------------------------- */
.crew{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(18px,2.4vw,32px); }
.member{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(20px,2.4vw,32px);
  align-items:center;
  background:var(--ink-2); border:1px solid var(--line);
  border-radius:22px; padding:clamp(22px,2.8vw,40px);
}
.member__photo{
  width:clamp(112px,12vw,164px); aspect-ratio:1; border-radius:50%;
  overflow:hidden; flex:none; position:relative;
  background:
    radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--pink) 60%, transparent), transparent 62%),
    linear-gradient(160deg, var(--ink-2), #2c2c2c);
  border:1px solid var(--line);
}
.member__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1); transition:filter .5s ease, transform .8s var(--ease); }
.member:hover .member__photo img{ filter:none; transform:scale(1.06); }
.member h3{ margin:0 0 6px; font-size:clamp(24px,2.6vw,38px); font-weight:800; letter-spacing:-.035em; }
.member__meta .mono{ color:var(--gel); margin:0 0 16px; }
.member__links{ display:flex; gap:16px; }
.member__links a{
  text-decoration:none; font-size:14px; color:var(--muted);
  border-bottom:1px solid var(--line); padding-bottom:2px; transition:color .3s, border-color .3s;
}
.member__links a:hover{ color:var(--paper); border-color:var(--paper); }

/* ---------------------------------------------------------
   Encore + footer
   --------------------------------------------------------- */
.encore{
  position:relative; z-index:2;
  max-width:var(--max); margin:0 auto;
  padding:clamp(46px,5.6vh,76px) var(--gut) 36px;
}
.encore__top{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(32px,5vw,80px); align-items:end;
  margin-bottom:clamp(44px,5vw,72px);
}
.encore__title{ font-size:clamp(50px,8.4vw,138px); line-height:.86; }
.encore__lede{ margin:24px 0 0; font-size:clamp(17px,1.5vw,22px); color:var(--muted); max-width:40ch; }

.signup{ max-width:none; margin-bottom:0; }
.signup__row{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-bottom:18px; }
.field{ display:flex; flex-direction:column; gap:9px; }
.field span{ color:rgba(244,245,245,.45); }
.field input, .field select{
  appearance:none; -webkit-appearance:none;
  background:var(--ink-2); border:1px solid var(--line); border-radius:12px;
  padding:15px 17px; color:var(--paper);
  font-family:var(--display); font-size:17px; font-weight:500;
  transition:border-color .3s ease, background .3s ease;
}
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--paper) 50%),linear-gradient(135deg,var(--paper) 50%,transparent 50%);
  background-position:calc(100% - 22px) 24px, calc(100% - 16px) 24px;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
}
.field input::placeholder{ color:rgba(244,245,245,.28); }
.field input:focus, .field select:focus{ border-color:var(--gel); outline:none; background:#1c1c1c; }
.field input:invalid:not(:placeholder-shown){ border-color:var(--orange); }
.signup .btn{ margin-top:8px; }
.signup__note{ margin:16px 0 0; color:var(--mindaro); min-height:1.2em; }

.footer{
  display:grid; grid-template-columns:2fr repeat(3,1fr);
  gap:clamp(28px,4vw,60px);
  border-top:1px solid var(--line); padding-top:36px;
}
.footer__logo{ width:88px; height:auto; margin-bottom:20px; }
.footer__word{ font-size:clamp(34px,5vw,64px); font-weight:800; letter-spacing:-.04em; display:block; }
.footer__brand .mono{ color:rgba(244,245,245,.4); margin:10px 0 0; }
.footer__col{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.footer__col .mono{ color:rgba(244,245,245,.4); margin:0 0 6px; }
.footer__col a{
  text-decoration:none; font-weight:500; color:var(--muted);
  transition:color .3s ease;
}
.footer__col a:hover{ color:var(--gel); }
.footer__legal{
  grid-column:1/-1; color:rgba(244,245,245,.3);
  margin:clamp(28px,3.6vw,48px) 0 0; padding-top:20px; border-top:1px solid var(--line);
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width:1180px){
  .scores{ grid-template-columns:repeat(2,1fr); }
  .facts{ grid-template-columns:repeat(3,1fr); }
  .rail{ display:none; }
}

@media (max-width:900px){
  :root{ --nav-h:72px; }
  .nav__mark{ width:40px; }
  .nav__word{ font-size:22px; }
  .nav__links{ display:none; }
  .nav__cta{ display:none; }
  .nav__burger{ display:grid; }
  .volunteer{ grid-template-columns:1fr; }
  .slot__head--split{ grid-template-columns:1fr; align-items:start; }
  .slot__head--split .slot__lede{ margin:22px 0 0; }
  .encore__top{ grid-template-columns:1fr; align-items:start; }
  .crew{ grid-template-columns:1fr; }
  .tickets{ flex-direction:column; align-items:flex-start; }
  .panels{ grid-template-columns:1fr; }
  .card{ grid-template-columns:1fr; text-align:left; top:calc(var(--nav-h) + 14px); }
  .about{ grid-template-columns:1fr; }
  .ig--reel, .ig--wide{ max-width:100%; }
  .card__art{ display:none; }
  .footer{ grid-template-columns:1fr 1fr; }
  .signup__row{ grid-template-columns:1fr; }
  /* Hero on a phone: art up top, words centred, no dead space above the fold */
  .hero{ justify-content:flex-end; min-height:86svh; padding-bottom:clamp(34px,5vh,56px); }
  .galaxy{
    width:min(70vw,330px); top:7%; right:-12%; bottom:auto;
    transform:none; opacity:.42;
  }
  .stage__glow{ width:110vw; height:110vw; right:-34%; top:-10%; opacity:.42; }
  .hero__head{ max-width:none; }
  .film{ min-height:clamp(340px,60vw,520px); }
  .about{ align-items:start; }
  .tickets .btn, .volunteer__side .btn, .program__actions .btn{ width:100%; }
  .member{ align-items:start; }
}

@media (max-width:620px){
  .scores{ grid-template-columns:1fr; }
  .facts{ grid-template-columns:1fr; }
  .footer{ grid-template-columns:1.5fr .95fr .9fr; gap:28px 10px; }
  .footer__brand{ grid-column:1 / -1; }
  .footer__logo{ width:46px; margin-bottom:12px; }
  .footer__word{ font-size:clamp(30px,10vw,44px); }
  .footer__col{ gap:8px; }
  .footer__col .mono{ font-size:9.5px; letter-spacing:.1em; margin-bottom:2px; }
  .footer__col a{ font-size:12.5px; overflow-wrap:anywhere; }
  .hero__actions .btn{ width:100%; }
  .program__list li{ grid-template-columns:1fr; gap:8px; }
}

@media (min-width:901px){
  }


/* ---------------------------------------------------------
   Phones only: the record becomes a backdrop and the words
   take the middle of the screen. Desktop is untouched.
   --------------------------------------------------------- *//* The open mic is the flagship, so on desktop it gets the loudest
   heading on the page and a wider share of the row. */
@media (min-width:769px){
  .slot--openmic .slot__head--split{
    grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
    align-items:end;
  }
  .slot--openmic .slot__head--split .h2{
    font-size:clamp(58px,9.4vw,168px);
    line-height:.84;
    letter-spacing:-.045em;
  }
}

/* Open mic is the flagship, so it gets the biggest heading on the page. */
@media (min-width:769px){
  .slot--openmic .slot__head--split{
    grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);
  }
  .slot--openmic .slot__head--split .h2{
    font-size:clamp(54px,8.6vw,150px); line-height:.88; letter-spacing:-.045em;
  }
}

/* ---------------------------------------------------------
   Phones. Everything below only applies at 768px and under,
   desktop is untouched.
   --------------------------------------------------------- */
@media (max-width:768px){
  :root{ --band-h:56px; }

  /* --- Hero --- */
  .hero{
    justify-content:center; text-align:center;
    /* the hero and the discipline bar together make exactly one screen,
       so the bar is the last thing visible before you scroll.
       svh is the height with the browser bars showing, so it always fits. */
    min-height:calc(100vh - var(--band-h));
    min-height:calc(100svh - var(--band-h));
    /* tighter side margins buy real estate for the headline */
    padding-left:14px; padding-right:14px;
    padding-bottom:clamp(20px,3vh,36px);
  }
  .hero__grid{ display:flex; flex-direction:column; align-items:center; width:100%; }
  .hero .eyebrow{ margin-bottom:20px; font-size:11px; letter-spacing:.08em; }

  /* the discipline bar. Fixed height so the maths above is exact. */
  .hero + .ticker{
    height:var(--band-h); padding:0;
    display:flex; align-items:center;
  }
  .hero + .ticker .ticker__track span{ font-size:21px; line-height:1.1; }
  .hero + .ticker .ticker__track i{ font-size:13px; }
  .hero__head{
    max-width:none; margin-bottom:clamp(30px,5.4vh,46px);
    /* 10vw is the largest that still keeps "deserves a stage." on one line */
    font-size:clamp(30px,10vw,48px); line-height:1; letter-spacing:-.06em;
  }
  .hero__actions{ width:100%; flex-direction:column; align-items:center; gap:11px; }
  .hero__actions .btn{
    width:auto; min-width:min(350px,90%);
    padding:16px 28px; font-size:16.5px;
  }

  /* the record sits behind the words as a backdrop */
  .galaxy{
    width:min(124vw,540px); top:50%; left:50%; right:auto; bottom:auto;
    transform:translate(-50%,-50%); opacity:.16;
  }
  .stage__glow{
    width:150vw; height:150vw; left:-25vw; right:auto; top:50%; margin-top:-75vw;
    animation:none; opacity:.34; filter:blur(40px);
  }
  /* no cursor to follow, so it just reads as a stray tint */
  .spotlight{ display:none; }

  /* --- Headings reflow ---
     They carry hard line breaks that suit a wide screen. On a phone those
     leave short ragged lines, so let the text run on and fill the column. */
  .h2 .line, .statement .line, .encore__title .line{
    display:inline; overflow:visible; padding:0; margin:0;
  }
  .h2 .line > span, .statement .line > span, .encore__title .line > span{
    display:inline; transform:none; transition:none;
  }
  /* The hero keeps its three written lines. It is sized above so that
     "deserves a stage." fits on one line at every phone width. */
  .hero__head .line{ overflow:visible; }
  .hero__head .line > span{ transform:none; transition:none; }
  .hero__head, .h2, .statement, .encore__title{
    opacity:0; transform:translateY(16px);
    transition:opacity .7s ease, transform .8s var(--ease);
  }
  .hero__head.is-in, .h2.is-in,
  .statement.is-in, .encore__title.is-in{ opacity:1; transform:none; }

  /* --- Type scale --- */
  .h2, .slot__head--split .h2{ font-size:clamp(34px,9.8vw,56px); line-height:.96; }
  .statement, .about .statement{ font-size:clamp(27px,7.6vw,42px); line-height:1.08; }
  .encore__title{ font-size:clamp(34px,9.9vw,50px); line-height:1; }
  .sub{ font-size:clamp(21px,6vw,28px); }
  .card__title{ font-size:clamp(25px,7.2vw,36px); }
  .panel h3{ font-size:clamp(29px,8.4vw,42px); }
  .volunteer .h2, .tickets h3{ font-size:clamp(28px,8vw,40px); }

  /* --- Spacing --- */
  .slot{ padding:38px var(--gut); }
  .encore{ padding:38px var(--gut) 28px; }
  .slot--volunteer{ padding-top:28px; padding-bottom:28px; }
  .slot__head{ margin-bottom:22px; }
  .slot__head--split .slot__lede{ margin:14px 0 0; }
  .about{ margin-bottom:30px; }
  .scores{ margin-bottom:30px; gap:24px; }
  .strip{ margin-top:22px; }
  .strip--tall{ margin-bottom:26px; }
  .sub{ margin:26px 0 16px; }
  .tickets{ margin-top:26px; }
  .cards{ gap:12px; }
  .encore__top{ margin-bottom:30px; }
  .program__list{ margin-bottom:22px; }
  .footer{ padding-top:28px; }
  .footer__legal{ margin-top:26px; }
}

/* ---------------------------------------------------------
   Reduced motion - keep everything, drop the movement
   --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .line > span{ transform:none; }
  .spotlight, .grain{ display:none; }
  .card{ position:relative; top:auto; }
}