/* ==========================================================================
   MUIC — Melbourne University Indian Club
   Built by Alaris (alaris.studio)
   Vanilla CSS · mobile-first · no frameworks
   ========================================================================== */

/* ---------- Fonts (self-hosted) ---------- */
@font-face{
  font-family:'Anton';
  src:url('../fonts/Anton-Regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Instrument Serif';
  src:url('../fonts/InstrumentSerif-Regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Instrument Serif';
  src:url('../fonts/InstrumentSerif-Italic.woff2') format('woff2');
  font-weight:400;font-style:italic;font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  --ink:#0B0B0C;
  --ink-2:#121215;
  --ink-3:#1A1A1E;
  --cream:#F2EDE3;
  --cream-2:#E8E1D1;
  --blue:#1E97B9;        /* peacock teal */
  --blue-deep:#0E76A4;   /* brand solid */
  --blue-bright:#5BC4E4; /* accent on dark */
  --gold:#D9A441;

  --t-ondark:#F2EDE3;
  --t-ondark-mut:rgba(242,237,227,.62);
  --t-onlight:#101012;
  --t-onlight-mut:rgba(16,16,18,.62);

  --line-dark:rgba(242,237,227,.16);
  --line-light:rgba(16,16,18,.16);

  --font-display:'Anton',Impact,'Arial Narrow',sans-serif;
  --font-serif:'Instrument Serif',Georgia,serif;
  --font-body:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  --pad-x:clamp(20px,5vw,72px);
  --pad-y:clamp(80px,12vw,150px);
  --nav-h:72px;
  --ease-out:cubic-bezier(.22,1,.36,1);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--ink);
  color:var(--t-ondark);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
}
body.nav-open{overflow:hidden}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
::selection{background:var(--blue-deep);color:#fff}

a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--blue-bright);outline-offset:3px;border-radius:2px;
}
.chapter--light a:focus-visible,.chapter--light button:focus-visible,
.chapter--light input:focus-visible,.chapter--light select:focus-visible,
.chapter--light textarea:focus-visible{outline-color:var(--blue-deep)}

.skip-link{
  position:fixed;top:-60px;left:16px;z-index:300;
  background:var(--blue-deep);color:#fff;
  padding:12px 20px;font-size:14px;letter-spacing:.04em;
  transition:top .2s var(--ease-out);
}
.skip-link:focus{top:12px}

/* ---------- Type ---------- */
.h-display{
  font-family:var(--font-display);
  font-weight:400;
  text-transform:uppercase;
  line-height:.92;
  letter-spacing:.005em;
}
.h-xl{font-size:clamp(44px,8.5vw,118px)}
.h-lg{font-size:clamp(36px,6vw,84px)}
.h-md{font-size:clamp(27px,4vw,52px)}
.h-sm{font-size:clamp(21px,2.6vw,30px)}

.serif-line{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(21px,3.2vw,40px);
  line-height:1.25;
  letter-spacing:.005em;
}
.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--blue-bright);
  display:block;
  margin-bottom:22px;
}
.chapter--light .eyebrow{color:var(--blue-deep)}
.lede{font-size:clamp(17px,1.6vw,20px);line-height:1.65;max-width:62ch}
.mut{color:var(--t-ondark-mut)}
.chapter--light .mut{color:var(--t-onlight-mut)}
.accent{color:var(--blue-bright)}
.chapter--light .accent{color:var(--blue-deep)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:14px 30px;
  font-family:var(--font-mono);font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;
  border:1px solid transparent;
  transition:background-color .25s var(--ease-out),color .25s var(--ease-out),border-color .25s var(--ease-out),transform .25s var(--ease-out);
  cursor:pointer;touch-action:manipulation;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--blue{background:var(--blue-deep);color:#fff}
.btn--blue:hover{background:var(--blue)}
.btn--ghost{border-color:var(--line-dark);color:var(--t-ondark)}
.btn--ghost:hover{border-color:var(--t-ondark)}
.chapter--light .btn--ghost{border-color:var(--line-light);color:var(--t-onlight)}
.chapter--light .btn--ghost:hover{border-color:var(--t-onlight)}
.btn--cream{background:var(--cream);color:var(--ink)}
.btn--cream:hover{background:#fff}
.btn--ink{background:var(--ink);color:var(--cream)}
.btn--ink:hover{background:#000}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}

.link-arrow{
  font-family:var(--font-mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;
  border-bottom:1px solid currentColor;padding:10px 2px;
}
.link-arrow::after{content:'\2192';transition:transform .25s var(--ease-out)}
.link-arrow:hover::after{transform:translateX(6px)}

/* ---------- Nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad-x);
  transition:background-color .3s var(--ease-out),box-shadow .3s var(--ease-out),transform .35s var(--ease-out);
}
.nav.scrolled{
  background:rgba(11,11,12,.88);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 1px 0 var(--line-dark);
}
.nav.hidden{transform:translateY(-100%)}
.nav-brand{display:flex;align-items:center;gap:12px;min-height:44px}
.nav-brand img{height:30px;width:auto}
.nav-brand span{
  font-family:var(--font-display);font-size:22px;letter-spacing:.06em;color:var(--t-ondark);
}
.nav-links{display:none;align-items:center;gap:34px}
.nav-links a{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--t-ondark-mut);padding:14px 2px;transition:color .2s;
}
.nav-links a:hover{color:var(--t-ondark)}
.nav-links a[aria-current="page"]{color:var(--blue-bright)}
.nav-cta{display:none}
.nav-cta .btn{min-height:44px;padding:10px 22px}

.nav-burger{
  width:48px;height:48px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;
  margin-right:-8px;
}
.nav-burger span{
  width:26px;height:2px;background:var(--t-ondark);
  transition:transform .3s var(--ease-out),opacity .2s;
}
body.nav-open .nav-burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
body.nav-open .nav-burger span:nth-child(2){opacity:0}
body.nav-open .nav-burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

.nav-overlay{
  position:fixed;inset:0;z-index:90;
  background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;
  padding:100px var(--pad-x) 48px;
  opacity:0;visibility:hidden;
  transition:opacity .35s var(--ease-out),visibility 0s .35s;
}
body.nav-open .nav-overlay{opacity:1;visibility:visible;transition:opacity .35s var(--ease-out)}
.nav-overlay a.ov-link{
  font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(40px,9vw,72px);line-height:1.12;
  color:var(--t-ondark);display:block;padding:6px 0;
  transform:translateY(24px);opacity:0;
  transition:transform .5s var(--ease-out),opacity .5s var(--ease-out),color .2s;
}
.nav-overlay a.ov-link:hover{color:var(--blue-bright)}
.nav-overlay a.ov-link[aria-current="page"]{color:var(--blue-bright)}
body.nav-open .nav-overlay a.ov-link{transform:translateY(0);opacity:1}
.nav-overlay a.ov-link:nth-child(2){transition-delay:.05s}
.nav-overlay a.ov-link:nth-child(3){transition-delay:.1s}
.nav-overlay a.ov-link:nth-child(4){transition-delay:.15s}
.nav-overlay a.ov-link:nth-child(5){transition-delay:.2s}
.ov-foot{
  margin-top:auto;display:flex;flex-wrap:wrap;gap:18px 32px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--t-ondark-mut);
}
.ov-foot a{padding:12px 0;min-height:44px;display:inline-flex;align-items:center}
.ov-foot a:hover{color:var(--t-ondark)}

@media (min-width:920px){
  .nav-links{display:flex}
  .nav-cta{display:block}
  .nav-burger,.nav-overlay{display:none}
}

/* ---------- Hero (home) ---------- */
body.page-home .nav{
  opacity:0;
  pointer-events:none;
  background:transparent;
  box-shadow:none;
  transition:opacity .35s var(--ease-out),background-color .3s var(--ease-out),box-shadow .3s var(--ease-out),transform .35s var(--ease-out);
}
body.page-home.hero-nav-active .nav{
  opacity:1;
  pointer-events:auto;
}

.hero--muic{
  position:relative;
  min-height:100svh;
  background:#000;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
  padding:calc(var(--nav-h) + 14px) clamp(14px,1.7vw,34px) 22px;
}
.hero-stage{
  position:relative;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
}

/* --- Wordmark: video plays through tight, full-bleed MUIC letterforms.
       Mask viewBox is cropped to the letters (1619x390) so the type renders
       edge-to-edge like the brand reference — no dead space, no ghost. --- */
.hero-wordmark{
  --hero-mask:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201619%20390%27%3E%3Cpath%20fill%3D%27white%27%20d%3D%27M0%200H166L300%20132L430%200H583V390H438L437%20203L299%20341L159%20202L158%20390H0Z%27%2F%3E%3Cpath%20fill%3D%27white%27%20d%3D%27M605%200H745V263L747%20265H907L909%20263V0H1049V320L980%20390H676L605%20318Z%27%2F%3E%3Cpath%20fill%3D%27white%27%20d%3D%27M1072%200H1207V390H1072Z%27%2F%3E%3Cpath%20fill%3D%27white%27%20d%3D%27M1230%2071L1305%200H1618V122H1367L1365%20124V263L1367%20265H1618L1619%20390H1302L1230%20319Z%27%2F%3E%3C%2Fsvg%3E");
  position:relative;
  width:100%;
  max-width:1920px;
  aspect-ratio:1619 / 390;
  max-height:min(58svh,560px);
  z-index:2;
  opacity:1;
  transition:opacity .55s linear;
}
body.intro-running .hero-wordmark{opacity:0;transition:none}

.hero-wordmark-glow,
.hero-wordmark-video,
.hero-wordmark-fallback{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.hero-wordmark-glow,
.hero-wordmark-video{
  -webkit-mask-image:var(--hero-mask);
  mask-image:var(--hero-mask);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
  opacity:0;
}
.hero.mask-ready .hero-wordmark-video{opacity:1}
.hero.mask-ready .hero-wordmark-glow{opacity:.55}
.hero-wordmark-glow{
  background:#fff;
  filter:blur(3px);
  transform:scale(1.005);
}
.hero-wordmark-fallback{
  opacity:0;
  object-fit:contain;
}
.hero.mask-fallback .hero-wordmark-fallback{opacity:1}
.hero.mask-fallback .hero-wordmark-video,
.hero.mask-fallback .hero-wordmark-glow{display:none}
.hero-wordmark-video{
  overflow:hidden;
  background:#000;
}
.hero-wordmark-video::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 30%,rgba(255,255,255,.07));
  pointer-events:none;
}
.hero-wordmark video,
.hero-wordmark .hero-poster{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}

/* --- Intro overlay: morphing shapes -> MUIC (built by JS, none with JS off) --- */
.intro{
  position:fixed;
  inset:0;
  z-index:400;
  background:#000;
  cursor:pointer;
}
.intro.intro--clear{
  background:transparent;
  pointer-events:none;
}
.intro-wipe{
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:0;
  background:var(--cream);
  will-change:height,transform;
}
.intro-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
body.intro-running{overflow:hidden}
body.intro-running .hero-bottom{opacity:0;transform:translateY(16px);transition:none}
.hero-bottom{
  position:relative;
  z-index:4;
  margin-top:clamp(10px,4vw,28px);
  transition:opacity .55s var(--ease-out) .12s,transform .55s var(--ease-out) .12s;
}
.hero-bottom-bar{
  width:100%;
  height:clamp(20px,2.2vw,28px);
  background:#fff;
}
.hero-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:14px 28px;
  padding-top:14px;
}
.hero-links a{
  font-family:var(--font-mono);
  font-size:clamp(11px,1vw,13px);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.92);
  min-height:44px;
  display:inline-flex;
  align-items:center;
  position:relative;
}
.hero-links a::after{
  content:'';
  position:absolute;
  left:0;
  bottom:8px;
  width:100%;
  height:1px;
  background:rgba(255,255,255,.92);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .28s var(--ease-out);
}
.hero-links a:hover::after,
.hero-links a[aria-current="page"]::after{transform:scaleX(1)}
.hero-links a[aria-current="page"]{color:#fff}

@media (max-width:919px){
  .hero--muic{padding-top:calc(var(--nav-h) + 6px)}
  .hero-loader{--bar-w:clamp(30px,6.1vw,56px);--bar-h:clamp(132px,28vw,224px);--core-size:clamp(72px,13vw,102px)}
  .hero-wordmark{width:100%;max-height:min(34svh, 420px);min-height:160px}
  .hero[data-state="bars"] .loader-piece--1{left:31%}
  .hero[data-state="bars"] .loader-piece--2{left:43.5%}
  .hero[data-state="bars"] .loader-piece--3{left:56%}
  .hero[data-state="bars"] .loader-piece--4{left:68.5%}
  .hero[data-state="black-square-right"] .loader-core{left:72%}
  .hero-links{justify-content:center;gap:8px 18px;padding-top:12px}
}
@media (max-width:640px){
  .hero--muic{padding-left:20px;padding-right:20px;padding-bottom:16px}
  .hero-loader{--bar-w:clamp(26px,7vw,42px);--bar-h:clamp(98px,24vw,168px);--core-size:clamp(64px,16vw,88px)}
  .hero-wordmark{max-height:min(28svh, 260px);min-height:128px}
  .hero-bottom-bar{height:16px}
  .hero-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 18px}
  .hero-links a{justify-content:center}
  .hero-links a:last-child{grid-column:1 / -1}
}

/* ---------- Chapters ---------- */
.chapter{padding:var(--pad-y) var(--pad-x);position:relative}
.chapter--dark{background:var(--ink);color:var(--t-ondark)}
.chapter--light{background:var(--cream);color:var(--t-onlight)}
.chapter--blue{background:var(--blue-deep);color:#fff}
.wrap{max-width:1380px;margin:0 auto}
.wrap--narrow{max-width:880px;margin:0 auto}

.chapter-head{margin-bottom:clamp(42px,6vw,80px);max-width:1380px;margin-left:auto;margin-right:auto}
.chapter-head .h-display{max-width:18ch}
.chapter-head .lede{margin-top:24px}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}
.rv-d2{transition-delay:.16s}
.rv-d3{transition-delay:.24s}

/* ---------- Culture section ---------- */
.culture-grid{
  display:grid;gap:18px;
  grid-template-columns:1fr;
}
.culture-grid figure{position:relative;overflow:hidden;background:var(--cream-2)}
.culture-grid img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out)}
.culture-grid figure:hover img{transform:scale(1.035)}
.culture-grid figcaption{
  position:absolute;left:14px;bottom:12px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:rgba(11,11,12,.55);padding:6px 10px;
}
.cg-a{aspect-ratio:16/10}
.cg-b,.cg-c{aspect-ratio:4/3}
@media (min-width:860px){
  .culture-grid{grid-template-columns:1.6fr 1fr;grid-template-rows:auto auto}
  .cg-a{grid-row:1/3;aspect-ratio:auto;min-height:560px}
}

/* ---------- Events preview cards ---------- */
.event-cats{display:grid;gap:18px;grid-template-columns:1fr}
.cat-card{
  position:relative;overflow:hidden;background:var(--ink-2);
  aspect-ratio:4/5;
  display:flex;align-items:flex-end;
  border:1px solid var(--line-dark);
}
.cat-card img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.78;transition:transform .9s var(--ease-out),opacity .5s;
}
.cat-card:hover img{transform:scale(1.045);opacity:.92}
.cat-card .cc-body{
  position:relative;z-index:2;width:100%;
  padding:26px 22px;
  background:linear-gradient(to top,rgba(11,11,12,.92),rgba(11,11,12,0));
}
.cat-card .cc-kind{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue-bright);
}
.cat-card h3{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:clamp(26px,2.6vw,38px);margin-top:8px}
.cat-card p{color:var(--t-ondark-mut);font-size:15px;margin-top:8px;max-width:34ch}
@media (min-width:860px){.event-cats{grid-template-columns:repeat(3,1fr)}}

/* ---------- Numbers ---------- */
.numbers{position:relative}
.numbers-bg{
  position:absolute;inset:0;
  background:url('../images/numbers-texture.jpg') center/cover no-repeat;
  opacity:.16;
}
.numbers .wrap{position:relative;z-index:2}
.stat-grid{
  display:grid;gap:0;border-top:1px solid var(--line-dark);
  grid-template-columns:1fr;
}
.stat{
  padding:34px 6px 30px;
  border-bottom:1px solid var(--line-dark);
}
.stat .num{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(52px,7.5vw,104px);line-height:1;
  color:var(--t-ondark);
}
.stat .num .unit{color:var(--blue-bright)}
.stat .lbl{
  margin-top:10px;font-family:var(--font-mono);font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--t-ondark-mut);
}
@media (min-width:680px){
  .stat-grid{grid-template-columns:repeat(2,1fr);column-gap:48px}
}
@media (min-width:1080px){
  .stat-grid{grid-template-columns:repeat(3,1fr)}
}

/* ---------- Charity ---------- */
.charity-grid{display:grid;gap:clamp(28px,5vw,72px);grid-template-columns:1fr;align-items:start}
.charity-figure{position:relative;overflow:hidden}
.charity-figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
.charity-amount{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(58px,9vw,128px);line-height:.95;text-transform:uppercase;
}
.charity-amount em{font-style:normal;color:var(--blue-deep)}
.cause-list{margin-top:30px;border-top:1px solid var(--line-light)}
.cause-list li{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:15px 2px;border-bottom:1px solid var(--line-light);
  font-size:clamp(16px,1.5vw,19px);
}
.cause-list .where{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-onlight-mut);text-align:right;flex-shrink:0}
@media (min-width:920px){.charity-grid{grid-template-columns:1.05fr 1fr}}

/* ---------- Sponsor preview band ---------- */
.spband{
  position:relative;overflow:hidden;
  padding:calc(var(--pad-y) * 1.05) var(--pad-x);
}
.spband-bg{position:absolute;inset:0}
.spband-bg img{width:100%;height:100%;object-fit:cover}
.spband-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to right,rgba(11,11,12,.93) 0%,rgba(11,11,12,.72) 55%,rgba(11,11,12,.4) 100%);
}
.spband .wrap{position:relative;z-index:2}
.sp-points{margin-top:26px;display:grid;gap:0;max-width:560px;border-top:1px solid var(--line-dark)}
.sp-points li{
  padding:14px 2px;border-bottom:1px solid var(--line-dark);
  display:flex;gap:14px;align-items:baseline;font-size:16px;color:var(--t-ondark-mut);
}
.sp-points li::before{content:'\2192';color:var(--blue-bright);font-family:var(--font-mono)}

/* ---------- Presidents ---------- */
.pres-grid{display:grid;gap:18px;grid-template-columns:1fr}
.pres-card{
  border:1px solid var(--line-light);
  padding:26px;display:flex;flex-direction:column;gap:18px;background:#fff2;
}
.pres-photo{
  aspect-ratio:4/5;background:var(--cream-2);
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
}
.pres-photo img{width:84px;opacity:.5}
.pres-photo .ph-note{
  position:absolute;bottom:12px;left:0;right:0;text-align:center;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--t-onlight-mut);
}
.pres-card h3{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:26px}
.pres-card .role{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-deep);margin-top:6px}
@media (min-width:680px){.pres-grid{grid-template-columns:1fr 1fr;max-width:880px}}

/* ---------- Collage (floating, desktop) ---------- */
.collage-sec{overflow:hidden}
.collage-stage{position:relative;height:min(86vh,820px);display:none}
.fl{
  position:absolute;overflow:hidden;background:var(--ink-2);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.fl img{width:100%;height:100%;object-fit:cover;transition:opacity .6s var(--ease-out)}
.fl.swap img{opacity:0}
.fl{animation:drift var(--dur,14s) ease-in-out var(--del,0s) infinite alternate}
@keyframes drift{
  from{transform:translate3d(0,0,0) rotate(var(--r0,0deg))}
  to{transform:translate3d(var(--dx,0px),var(--dy,-18px),0) rotate(var(--r1,0deg))}
}
.fl-1{width:17%;left:2%;top:6%;--dx:10px;--dy:-22px;--r0:-2.4deg;--r1:-1deg;--dur:15s}
.fl-2{width:13%;left:22%;top:0%;--dx:-8px;--dy:-16px;--r0:1.6deg;--r1:3deg;--dur:13s;--del:-4s}
.fl-3{width:19%;left:38%;top:9%;--dx:12px;--dy:-26px;--r0:-1.2deg;--r1:.6deg;--dur:17s;--del:-7s}
.fl-4{width:14%;left:61%;top:2%;--dx:-10px;--dy:-20px;--r0:2.2deg;--r1:.4deg;--dur:14s;--del:-2s}
.fl-5{width:18%;left:79%;top:10%;--dx:8px;--dy:-24px;--r0:-2deg;--r1:-.4deg;--dur:16s;--del:-9s}
.fl-6{width:15%;left:6%;top:46%;--dx:-9px;--dy:-18px;--r0:1.4deg;--r1:2.8deg;--dur:15s;--del:-5s}
.fl-7{width:20%;left:27%;top:52%;--dx:11px;--dy:-22px;--r0:-1.8deg;--r1:0deg;--dur:18s;--del:-3s}
.fl-8{width:13%;left:52%;top:44%;--dx:-7px;--dy:-15px;--r0:2.6deg;--r1:1deg;--dur:13s;--del:-8s}
.fl-9{width:18%;left:69%;top:55%;--dx:9px;--dy:-24px;--r0:-1deg;--r1:-2.6deg;--dur:16s;--del:-6s}
.fl-10{width:12%;left:90%;top:48%;--dx:-6px;--dy:-14px;--r0:1.8deg;--r1:.2deg;--dur:12s;--del:-1s}
.fl-3,.fl-7{z-index:2}
.fl-aspect-l{aspect-ratio:3/2}
.fl-aspect-p{aspect-ratio:4/5}

/* mobile marquee strips */
.marquee{overflow:hidden;display:grid;gap:14px}
.mq-row{display:flex;gap:14px;width:max-content;animation:mq 46s linear infinite}
.mq-row--rev{animation-direction:reverse;animation-duration:54s}
.mq-row img{
  height:clamp(170px,26vw,260px);width:auto;flex-shrink:0;
  background:var(--ink-2);
}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (min-width:980px){
  .collage-stage{display:block}
  .collage-sec .marquee{display:none}
}

/* ---------- Instagram / social proof ---------- */
.ig-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:26px;margin-bottom:clamp(36px,5vw,64px)}
.ig-stats{display:flex;gap:clamp(22px,4vw,56px);flex-wrap:wrap}
.ig-stat .num{font-family:var(--font-display);font-size:clamp(30px,3.4vw,48px);line-height:1;color:var(--t-ondark)}
.ig-stat .lbl{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--t-ondark-mut);margin-top:6px}
.ig-embed-slot{margin:34px auto 0;max-width:540px}
.ig-embed-slot:empty{display:none}

/* ---------- Final CTA (blue slab) ---------- */
.final-cta{
  position:relative;overflow:hidden;text-align:left;
  padding:calc(var(--pad-y) * 1.1) var(--pad-x);
}
.final-cta .peacock-wm{
  position:absolute;right:-4%;bottom:-12%;height:120%;width:auto;opacity:.1;pointer-events:none;
}
.final-cta .wrap{position:relative;z-index:2}
.final-cta .h-display{max-width:14ch}
.final-cta .btn--cream:hover{background:#fff}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{
  position:relative;
  padding:calc(var(--nav-h) + clamp(70px,10vw,130px)) var(--pad-x) clamp(56px,8vw,100px);
  overflow:hidden;
}
.page-hero--img{min-height:78svh;display:flex;align-items:flex-end}
.page-hero--img .ph-bg{position:absolute;inset:0}
.page-hero--img .ph-bg img{width:100%;height:100%;object-fit:cover}
.page-hero--img .ph-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(11,11,12,.94) 4%,rgba(11,11,12,.45) 50%,rgba(11,11,12,.62) 100%);
}
.page-hero .wrap{position:relative;z-index:2}
.page-hero .lede{margin-top:22px}

/* ---------- Sponsors page ---------- */
.reach-band{border-top:1px solid var(--line-dark)}
.why-grid{display:grid;gap:18px;grid-template-columns:1fr}
.why-card{border:1px solid var(--line-dark);padding:28px 24px;background:var(--ink-2)}
.why-card .wc-i{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;color:var(--blue-bright);text-transform:uppercase}
.why-card h3{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:24px;margin-top:12px}
.why-card p{color:var(--t-ondark-mut);font-size:15px;margin-top:10px}
@media (min-width:680px){.why-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1080px){.why-grid{grid-template-columns:repeat(3,1fr)}}
.why-photos{display:grid;gap:18px;grid-template-columns:repeat(3,1fr);margin-top:48px}
.why-photos img{width:100%;aspect-ratio:4/3;object-fit:cover}
@media (max-width:679px){.why-photos{grid-template-columns:1fr}}

/* ball feature */
.ball-feature{position:relative;overflow:hidden}
.ball-hero-img{position:relative}
.ball-hero-img img{width:100%;aspect-ratio:16/8;object-fit:cover;min-height:320px}
.ball-hero-img::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(11,11,12,.85),transparent 55%)}
.ball-overlay{
  position:absolute;left:var(--pad-x);bottom:clamp(22px,4vw,44px);right:var(--pad-x);z-index:2;
}
.ball-meta{display:flex;flex-wrap:wrap;gap:14px 36px;margin-top:14px;font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.ball-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.ball-strip img{width:100%;aspect-ratio:4/3;object-fit:cover}
@media (max-width:679px){.ball-strip{grid-template-columns:1fr 1fr}.ball-strip img:nth-child(3){display:none}}

/* tiers */
.tier-grid{display:grid;gap:18px;grid-template-columns:1fr}
.tier{
  border:1px solid var(--line-dark);background:var(--ink-2);
  padding:30px 26px;display:flex;flex-direction:column;
}
.tier--gold{border-color:rgba(217,164,65,.55)}
.tier-kind{font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.tier--gold .tier-kind{color:var(--gold)}
.tier--silver .tier-kind{color:#C9CDD4}
.tier--bronze .tier-kind{color:#C98D5E}
.tier-price{font-family:var(--font-display);font-size:clamp(44px,5vw,62px);line-height:1;margin-top:14px}
.tier-list{margin-top:22px;border-top:1px solid var(--line-dark);flex:1}
.tier-list li{
  padding:12px 0;border-bottom:1px solid var(--line-dark);
  font-size:14.5px;color:var(--t-ondark-mut);display:flex;gap:10px;
}
.tier-list li::before{content:'+';color:var(--blue-bright);font-family:var(--font-mono);flex-shrink:0}
.tier .btn{margin-top:24px;width:100%}
.tier-note{margin-top:18px;font-size:13px;color:var(--t-ondark-mut)}
@media (min-width:920px){
  .tier-grid{grid-template-columns:repeat(3,1fr);align-items:stretch}
  .tier--gold{transform:scale(1.02)}
}

/* sponsor logos placeholder */
.logo-row{
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:38px;
}
.logo-slot{
  border:1px dashed var(--line-dark);min-height:96px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--t-ondark-mut);
}
@media (min-width:780px){.logo-row{grid-template-columns:repeat(4,1fr)}}

/* ---------- Forms ---------- */
.form-grid{display:grid;gap:20px;grid-template-columns:1fr}
@media (min-width:680px){
  .form-grid{grid-template-columns:1fr 1fr}
  .form-grid .full{grid-column:1/-1}
}
.field label{
  display:block;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:10px;
  color:var(--t-ondark-mut);
}
.field input,.field select,.field textarea{
  width:100%;min-height:52px;
  background:transparent;border:1px solid var(--line-dark);
  color:var(--t-ondark);padding:14px 16px;font:inherit;font-size:16px;
  border-radius:0;-webkit-appearance:none;appearance:none;
  transition:border-color .25s;
}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue-bright);outline:none}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23F2EDE3' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;
  padding-right:42px;
}
.field select option{background:var(--ink-2);color:var(--t-ondark)}
.chapter--light .field label{color:var(--t-onlight-mut)}
.chapter--light .field input,.chapter--light .field select,.chapter--light .field textarea{
  border-color:var(--line-light);color:var(--t-onlight);
}
.chapter--light .field input:focus,.chapter--light .field select:focus,.chapter--light .field textarea:focus{border-color:var(--blue-deep)}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{
  margin-top:18px;font-size:15px;display:none;padding:14px 16px;border:1px solid var(--line-dark);
}
.form-msg.show{display:block}
.form-msg.ok{border-color:var(--blue-bright);color:var(--blue-bright)}
.form-msg.err{border-color:#E0654F;color:#E0654F}
.form-note{margin-top:14px;font-size:13px;color:var(--t-ondark-mut)}

/* ---------- Upcoming events ---------- */
.up-grid{display:grid;gap:18px;grid-template-columns:1fr}
.up-card{
  border:1px solid var(--line-dark);background:var(--ink-2);
  padding:clamp(26px,4vw,44px);
  display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden;
}
.up-card .date{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-bright);
}
.up-card h3{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:clamp(38px,5.5vw,72px);line-height:1}
.up-card .kind{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--t-ondark-mut)}
.up-card p{color:var(--t-ondark-mut);max-width:52ch;margin-top:8px}
.up-card .btn{align-self:flex-start;margin-top:20px}
@media (min-width:920px){.up-grid{grid-template-columns:1fr 1fr}}

/* category galleries (meet page) */
.catg{margin-top:clamp(40px,6vw,70px)}
.catg h3{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:clamp(26px,3.4vw,44px)}
.catg .catg-sub{color:var(--t-ondark-mut);margin-top:8px;max-width:60ch}
.catg-grid{display:grid;gap:14px;grid-template-columns:repeat(2,1fr);margin-top:22px}
.catg-grid img{width:100%;aspect-ratio:4/3;object-fit:cover}
@media (min-width:860px){.catg-grid{grid-template-columns:repeat(4,1fr)}}

/* values */
.values-list{border-top:1px solid var(--line-light);counter-reset:val}
.values-list li{
  border-bottom:1px solid var(--line-light);
  padding:clamp(22px,3.4vw,34px) 2px;
  display:grid;gap:6px 28px;grid-template-columns:1fr;
}
.values-list .v-name{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:clamp(28px,4vw,52px);line-height:1}
.values-list .v-desc{color:var(--t-onlight-mut);max-width:56ch;align-self:center}
@media (min-width:860px){.values-list li{grid-template-columns:minmax(280px,420px) 1fr}}

/* steps */
.steps{counter-reset:step;display:grid;gap:18px;grid-template-columns:1fr}
.step{border:1px solid var(--line-light);padding:28px 24px;background:#fff3}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;color:var(--blue-deep);
}
.step h3{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:22px;margin-top:12px}
.step p{color:var(--t-onlight-mut);font-size:15px;margin-top:10px}
@media (min-width:860px){.steps{grid-template-columns:repeat(3,1fr)}}

/* contact options */
.contact-list{border-top:1px solid var(--line-dark)}
.contact-list li{border-bottom:1px solid var(--line-dark)}
.contact-list a,.contact-list .cl-static{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 24px;
  padding:clamp(20px,3vw,30px) 2px;min-height:44px;
}
.contact-list .cl-k{font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--t-ondark-mut)}
.contact-list .cl-v{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:clamp(19px,3.2vw,34px);line-height:1.1;word-break:break-word}
.contact-list a:hover .cl-v{color:var(--blue-bright)}

/* ---------- Footer ---------- */
.footer{
  background:var(--ink);color:var(--t-ondark);
  padding:clamp(64px,9vw,110px) var(--pad-x) 36px;
  border-top:1px solid var(--line-dark);
  overflow:hidden;
}
.foot-grid{
  display:grid;gap:42px;grid-template-columns:1fr;max-width:1380px;margin:0 auto;
}
.foot-brand img{height:54px}
.foot-brand p{margin-top:18px;color:var(--t-ondark-mut);max-width:34ch;font-size:15px}
.foot-col h4{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--t-ondark-mut);margin-bottom:16px;font-weight:400;
}
.foot-col a{
  display:inline-flex;align-items:center;min-height:38px;padding:2px 0;
  font-size:15px;color:var(--t-ondark);transition:color .2s;
}
.foot-col li + li{margin-top:2px}
.foot-col a:hover{color:var(--blue-bright)}
@media (min-width:860px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.foot-mark{
  margin:clamp(48px,7vw,90px) auto 0;max-width:1380px;
}
.foot-mark svg{width:100%;height:auto;display:block}
.foot-mark .fm-text{fill:var(--ink-3);transition:fill .4s}
.foot-mark:hover .fm-text{fill:#202026}
.foot-base{
  max-width:1380px;margin:28px auto 0;padding-top:22px;border-top:1px solid var(--line-dark);
  display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;
  font-size:13px;color:var(--t-ondark-mut);
}
.foot-base a{color:var(--t-ondark-mut);text-decoration:underline;text-underline-offset:3px}
.foot-base a:hover{color:var(--t-ondark)}

/* ---------- Utilities ---------- */
.mt-1{margin-top:14px}.mt-2{margin-top:26px}.mt-3{margin-top:40px}.mt-4{margin-top:64px}
.hide{display:none!important}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rv,.hero-copy .hc,.hero-corner,.hero-scroll{opacity:1!important;transform:none!important}
  .fl{animation:none!important}
  .mq-row{animation:none!important}
  .marquee{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .mq-row{width:auto}
}

/* ---------- Anchor offset for fixed nav ---------- */
[id]{scroll-margin-top:calc(var(--nav-h) + 16px)}
.pt-0{padding-top:0!important}
.u{text-decoration:underline;text-underline-offset:3px}
.hero-letters video{filter:saturate(1.12) brightness(1.06)}
.why-grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){.why-grid--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.why-grid--4{grid-template-columns:1fr}}

/* ---------- Full-bleed video band (Relapse) ---------- */
.vid-band{
  position:relative;
  height:78svh;min-height:440px;max-height:860px;
  overflow:hidden;
  background:var(--ink);
}
.vid-band video,.vid-band .vb-poster{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  filter:saturate(1.1);
}
.vid-band::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,11,12,.46) 0%,rgba(11,11,12,0) 34%,rgba(11,11,12,0) 52%,rgba(11,11,12,.82) 100%);
  pointer-events:none;
}
.vb-overlay{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:0 var(--pad-x) clamp(28px,5vh,54px);
  max-width:1380px;margin:0 auto;
}
.vb-overlay .h-display{color:var(--t-ondark)}
.vb-overlay p{margin-top:14px;max-width:54ch;color:var(--t-ondark-mut)}
@media (max-width:680px){.vid-band{height:64svh;min-height:380px}}

/* ---------- Legal pages (privacy / terms / disclaimer) ---------- */
.legal-body{max-width:760px}
.legal-updated{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--t-ondark-mut);
  margin-bottom:36px;
}
.legal-body h2{
  font-family:var(--font-display);
  font-size:clamp(19px,2.3vw,25px);
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--t-ondark);
  margin:44px 0 12px;
}
.legal-body h2:first-of-type{margin-top:0}
.legal-body p{color:var(--t-ondark-mut);font-size:15.5px;margin:0 0 14px}
.legal-body ul{list-style:disc;padding-left:20px;margin:0 0 16px}
.legal-body li{color:var(--t-ondark-mut);font-size:15.5px;margin:6px 0}
.legal-body a{color:var(--blue-bright);text-decoration:underline;text-underline-offset:3px}
.legal-body a:hover{color:#fff}

/* ---------- Footer legal links ---------- */
.foot-legal{
  display:flex;
  flex-wrap:wrap;
  gap:6px 24px;
  max-width:1380px;
  margin:30px auto 0;
}
.foot-legal a{
  font-size:13px;
  color:var(--t-ondark-mut);
  text-decoration:underline;
  text-underline-offset:3px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
}
.foot-legal a:hover{color:var(--t-ondark)}