:root{
  --moonlight:#87C9EE;
  --rider:#1A96D3;
  --hollow:#000000;
  --iron:#222222;
  --headstone:#313131;
  --fog:#B5C7C7;
  --bone:#FFFFFF;
  --copper:#8B4A1E;
  --lantern:#C46A2A;
  --moss:#46603A;
  --sage:#8FA872;
  --body:#D2DADE;
  --muted:#8B979D;
  --line:#1C1E20;

  --display:"Big Shoulders Display",Impact,sans-serif;
  --text:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --gut:clamp(20px,5vw,64px);
  --max:1180px;
  --nav-h:98px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}
body{margin:0;background:var(--hollow);color:var(--body);font-family:var(--text);font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:var(--moonlight)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:760px}

h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:.94;margin:0;text-transform:uppercase;letter-spacing:.005em;color:var(--bone)}
h2{font-size:clamp(38px,6.4vw,66px)}
h3{font-size:clamp(22px,2.6vw,28px);color:var(--moonlight);letter-spacing:.02em}
p{margin:0 0 1.05em;max-width:66ch}
strong{color:var(--bone);font-weight:600}
section{padding:clamp(58px,8vw,104px) 0;border-top:1px solid var(--line);position:relative}
.lede{font-size:clamp(17px,1.9vw,19.5px);color:#C6CFD4;max-width:60ch}
.eyebrow{font-family:var(--text);font-size:12.5px;letter-spacing:.09em;color:var(--muted);text-transform:uppercase;margin:0 0 14px;font-weight:500}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-size:19px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:13px 26px 12px;border:0;cursor:pointer;text-decoration:none;transition:background .16s,color .16s}
.btn-primary{background:var(--copper);color:#fff}
.btn-primary:hover{background:var(--lantern)}
.btn-ghost{background:transparent;color:var(--moonlight);box-shadow:inset 0 0 0 1.5px var(--headstone)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--moonlight);color:var(--bone)}
.nose{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:9px solid currentColor;flex:none}

/* ---- nav ---- */
nav{position:sticky;top:0;z-index:60;background:#000;border-bottom:1px solid var(--line);height:var(--nav-h)}
nav .wrap{display:flex;align-items:center;gap:26px;height:100%}
.brandmark{display:flex;align-items:center;flex:none;text-decoration:none;line-height:0}
.brandmark i{color:var(--moonlight);display:block}
nav ul{list-style:none;display:flex;gap:22px;margin:0;padding:0;margin-left:auto;font-size:13.5px;letter-spacing:.04em}
nav ul a{color:var(--fog);text-decoration:none}
nav ul a:hover{color:var(--moonlight)}
nav .btn{font-size:16px;padding:9px 18px 8px;flex:none}

@media(max-width:880px){nav ul{display:none}nav .btn{margin-left:auto}}

/* ---- HERO PLACEHOLDER ---- */
#hero{
  position:relative;width:100%;border-top:none;padding:0;
  min-height:clamp(600px,calc(96vh - var(--nav-h)),950px);
  overflow:hidden;background:#000;
  isolation:isolate;
}
.plate,.plate>.drift,.fogband,.fogmask,.ember .orbit,.ember .orbit .lift{will-change:transform}

/* every plate is the full frame; depth drives how far it shifts */
.plate{
  position:absolute;inset:0;
  transform:translate3d(0,0,0);   /* JS writes this per-plate; see the parallax script */
}
.plate > .drift{position:absolute;inset:0;animation:drift var(--dur,18s) ease-in-out infinite alternate}
.plate img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  transform:scale(var(--s,1.1));
}
@keyframes drift{
  from{transform:translate3d(calc(var(--dx,6px) * -1), calc(var(--dy,5px) * -1),0) rotate(calc(var(--dr,0deg) * -1))}
  to  {transform:translate3d(var(--dx,6px), var(--dy,5px),0) rotate(var(--dr,0deg))}
}

/* ── fog bands ── */
.fogmask{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.fogmask.right{
  -webkit-mask-image:linear-gradient(90deg, transparent 26%, rgba(0,0,0,.55) 48%, #000 70%);
          mask-image:linear-gradient(90deg, transparent 26%, rgba(0,0,0,.55) 48%, #000 70%);
}
/* The band is one tile wider than the frame and slides by exactly one tile, so the
   loop is seamless while only ever moving a composited layer. */
.fogband{
  position:absolute;top:-12%;bottom:-12%;left:-12%;
  width:calc(124% + var(--tile,2200px));
  background-repeat:repeat;
  background-position:0 0;
  animation:fogpan var(--fdur,90s) linear infinite;
  opacity:var(--fop,.5);
  pointer-events:none;
}
.fogband.rev{animation-direction:reverse}
.fogband.right{
  -webkit-mask-image:linear-gradient(90deg, transparent 26%, rgba(0,0,0,.55) 48%, #000 70%);
          mask-image:linear-gradient(90deg, transparent 26%, rgba(0,0,0,.55) 48%, #000 70%);
}
@keyframes fogpan{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(var(--tile,2200px) * -1),0,0)}
}

/* ── firelight ── */
.ember{position:absolute;inset:0;pointer-events:none;z-index:8}
.ember .orbit{position:absolute;inset:0;animation:orbitX 31s ease-in-out infinite alternate}
.ember .orbit .lift{position:absolute;inset:0;animation:orbitY 19s ease-in-out infinite alternate}
.ember .core{
  position:absolute;left:73%;top:57%;
  width:min(980px,92%);aspect-ratio:1.28;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center,
    rgba(255,201,124,.70) 0%,
    rgba(234,145,60,.48) 24%,
    rgba(163,86,32,.24) 46%,
    rgba(104,50,18,.10) 66%,
    transparent 78%);
  animation:flicker 5.3s ease-in-out infinite;
}
.ember .halo{
  position:absolute;left:67%;top:53%;
  width:min(1520px,128%);aspect-ratio:1.18;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center, rgba(206,116,48,.26) 0%, rgba(150,80,32,.12) 40%, transparent 72%);
  animation:flicker 8.9s ease-in-out infinite reverse;
}
@keyframes orbitX{ from{transform:translateX(-7%)} to{transform:translateX(7%)} }
@keyframes orbitY{ from{transform:translateY(-3.4%) scale(.97)} to{transform:translateY(3.4%) scale(1.05)} }
@keyframes flicker{
  0%,100%{opacity:.80} 11%{opacity:1} 23%{opacity:.72}
  37%{opacity:.94} 46%{opacity:.68} 59%{opacity:1}
  71%{opacity:.77} 84%{opacity:.98} 92%{opacity:.74}
}

/* ── ink bleed ─ remove class="print" on #hero to revert ── */
.fx{display:none}
.print .fx{display:block}

.inkbleed{
  position:absolute;inset:-2%;pointer-events:none;z-index:10;
  background-size:cover;background-position:center;
  opacity:.94;
}

.ember.front{z-index:9;opacity:.5}
.ember.front .core{left:80%;top:54%;width:min(760px,74%)}
.ember.front .halo{display:none}

/* ── vignette ── */
.vignette{
  position:absolute;inset:0;z-index:9;pointer-events:none;
  opacity:.4;                       /* dialled back so the forest and true colour survive */
  background:
    radial-gradient(ellipse 78% 82% at 52% 48%, transparent 24%, rgba(0,0,0,.30) 55%, rgba(0,0,0,.72) 79%, #000 100%),
    linear-gradient(to bottom, rgba(0,0,0,.55) 0%, transparent 16%, transparent 74%, rgba(0,0,0,.9) 100%);
}
/* left scrim so the copy always clears the art */
.scrim{
  position:absolute;inset:0;z-index:11;pointer-events:none;
  background:linear-gradient(95deg, rgba(0,0,0,.84) 0%, rgba(0,0,0,.71) 17%, rgba(0,0,0,.47) 33%, rgba(0,0,0,.15) 51%, transparent 65%);
}
@media(max-width:820px){
  .scrim{background:linear-gradient(to bottom, rgba(0,0,0,.34) 0%, rgba(0,0,0,.44) 40%, rgba(0,0,0,.84) 78%, rgba(0,0,0,.95) 100%)}
}

/* ── copy ── */
.hcontent{
  position:relative;z-index:12;
  transform:translateZ(0);          /* isolate the copy from the animated layers */
  display:flex;align-items:center;
  min-height:clamp(600px,calc(96vh - var(--nav-h)),950px);
  padding:clamp(36px,6vh,72px) 0;
}
/* anchored to the left edge of the window, gutter scales with the viewport */
.hcontent .hwrap{width:100%;max-width:none;margin:0;padding:0 clamp(20px,4vw,72px)}
.hcontent .hcol{width:min(500px,100%);min-width:0}
.wordmark{
  width:min(360px,84%);height:auto;display:block;
  margin:0 0 clamp(20px,3vh,30px);
  filter:drop-shadow(0 6px 24px rgba(0,0,0,.9));
}
.heyebrow{font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:500;margin:0 0 18px;text-shadow:0 2px 8px rgba(0,0,0,.95)}
.hdate{
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(38px,5.2vw,66px);line-height:.88;color:var(--bone);
  letter-spacing:.01em;margin:0;
  text-shadow:0 2px 6px rgba(0,0,0,.95), 0 4px 34px rgba(0,0,0,.9);
}
.hdate b{display:block;color:var(--moonlight);font-weight:900}
.hvenue{
  margin:20px 0 0;font-size:15.5px;line-height:1.55;color:var(--fog);letter-spacing:.02em;text-shadow:0 2px 10px rgba(0,0,0,.95);
  padding-left:16px;border-left:2px solid var(--headstone);
}
.hblurb{margin:22px 0 0;font-size:16.5px;line-height:1.6;color:#C0C9CE;max-width:38ch;text-shadow:0 2px 10px rgba(0,0,0,.95)}
.hcta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.hmeta{
  display:flex;gap:22px;flex-wrap:wrap;margin-top:26px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.14);
}
.hmeta div b{display:block;font-family:var(--display);font-size:27px;font-weight:800;color:var(--moonlight);line-height:1}
.hmeta div span{display:block;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:5px}

@media(max-width:820px){
  .hcontent{align-items:flex-end;padding-bottom:clamp(34px,7vh,64px);min-height:clamp(600px,88vh,880px)}
  #hero{min-height:clamp(600px,88vh,880px)}
}
@media(max-height:660px){.wordmark{width:min(260px,70%);margin-bottom:16px}.hmeta{display:none}}
@media(prefers-reduced-motion:reduce){
  .plate>.drift,.fogband,.fogmask,.ember .orbit,.ember .orbit .lift,.ember .core,.ember .halo{animation:none!important}
  .plate{transform:none!important;transition:none!important}
}

/* ---- USA Lacrosse sanction strip ---- */
.sanction{background:#082158;border-top:1px solid #0D2E76;border-bottom:1px solid #04143A}
.sanction .wrap{display:flex;align-items:center;gap:clamp(16px,2.6vw,28px);padding-top:13px;padding-bottom:13px;flex-wrap:wrap}
.sanction img{height:46px;width:auto;flex:none;display:block}
.sanction p{margin:0;font-size:14.5px;line-height:1.5;max-width:none;color:#A9BDE2}
.sanction p b{color:#fff;font-weight:600}

/* ---- facts strip ---- */
.strip{background:#08090A;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;padding-top:0;padding-bottom:0}
.fact{padding:26px 0 28px}
.fact b{display:block;font-family:var(--display);font-size:clamp(28px,3.4vw,38px);font-weight:800;color:var(--moonlight);line-height:1;letter-spacing:.01em}
.fact span{display:block;font-size:12.5px;color:var(--muted);letter-spacing:.07em;text-transform:uppercase;margin-top:9px}

/* ---- split copy + media ---- */
.split{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,4vw,52px);align-items:start;margin-top:28px}
/* event: narrow the copy so it grows tall, narrow the video so it shrinks — the two meet in the middle */
#event .split{
  --eyeblock:34px;                       /* eyebrow line + its margin */
  --h2fs:clamp(38px,6.4vw,66px);
  grid-template-columns:minmax(0,540px) minmax(240px,308px);
  justify-content:space-between;
  gap:clamp(26px,5vw,72px);
  margin-top:0;
}
#event .split h2{margin-bottom:22px}
/* drop the video to the title's x-height: cap-height is ~.72em, x-height ~.72 of that */
#event .split .mcard{margin-top:calc(var(--eyeblock) + var(--h2fs) * 0.20)}
@media(max-width:880px){#event .split{grid-template-columns:1fr}#event .split .mcard{margin-top:0}}
.split > div:first-child > p:first-child{margin-top:0}
.split-r{grid-template-columns:1.35fr .65fr}
@media(max-width:880px){.split,.split-r{grid-template-columns:1fr}.split .mcard{max-width:400px}}
.split .mcard{border:1px solid var(--line);background:#0A0C0D}
.split .mcard .frame{position:relative;background:#000}
.split .mcard video,.split .mcard img{width:100%;display:block}


/* ---- age chart ---- */
.chart{margin-top:32px;border:1px solid var(--line);border-bottom:0}
.chead,.crow{display:grid;grid-template-columns:1.5fr 1fr 1.4fr .8fr .9fr;gap:16px;align-items:center;padding:15px clamp(14px,2vw,22px);border-bottom:1px solid var(--line)}
.chead{background:#08090A;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600}
.crow{background:#0A0C0D;text-decoration:none;transition:background .16s,box-shadow .16s}
.crow:hover,.crow:focus-visible{background:#12100C;box-shadow:inset 3px 0 0 var(--lantern)}
.c-yr{font-family:var(--display);font-size:23px;font-weight:800;color:var(--bone);text-transform:uppercase;line-height:1;letter-spacing:.01em}
.crow.small .c-yr{color:var(--sage)}
.crow:hover .c-yr{color:var(--lantern)}
.c-gr{font-size:14.5px;color:#C0C9CE}
.c-fm{font-size:13.5px;color:var(--muted)}
.c-pr{font-size:14.5px;color:#C0C9CE;font-variant-numeric:tabular-nums}
.c-go{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;color:#4E585D;text-align:right;transition:color .16s,transform .16s}
.crow:hover .c-go{color:var(--lantern);transform:translateX(3px)}
.cnote{display:flex;gap:10px;align-items:flex-start;margin-top:20px;font-size:13.5px;color:var(--muted);max-width:70ch}
.cnote .nose{margin-top:6px;color:var(--sage)}
@media(max-width:760px){
  .chead{display:none}
  .crow{grid-template-columns:1fr auto;gap:4px 14px;padding:16px}
  .c-yr{grid-column:1}.c-go{grid-column:2;grid-row:1}
  .c-gr,.c-fm,.c-pr{grid-column:1/-1;font-size:13px}
}

/* ---- divisions ---- */
.divgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px;margin-top:34px}
.div{
  display:block;position:relative;text-decoration:none;
  background:#0A0C0D;border:1px solid var(--line);padding:18px 16px 34px;
  transition:border-color .16s,background .16s,transform .16s;
}
.div::after{
  content:"Register ▸";position:absolute;left:16px;bottom:14px;
  font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;
  color:#4E585D;transition:color .16s,transform .16s;
}
.div:hover,.div:focus-visible{border-color:var(--lantern);background:#12100C;transform:translateY(-2px)}
.div:hover::after,.div:focus-visible::after{color:var(--lantern);transform:translateX(3px)}
.div:hover .yr{color:var(--lantern)}
.div.small:hover .yr{color:var(--lantern)}
.div .yr{font-family:var(--display);font-size:34px;font-weight:800;color:var(--bone);line-height:1;letter-spacing:.01em}
.div .fmt{font-size:12.5px;color:var(--sage);margin-top:8px;letter-spacing:.03em}
.div .price{font-size:13px;color:var(--muted);margin-top:3px}
.div.small{border-color:#2A3626;background:#0A0D08}
.div.small .yr{color:var(--sage)}
.pricebar{display:flex;flex-wrap:wrap;gap:0;margin-top:30px;border:1px solid var(--line)}
.pricebar div{flex:1 1 220px;padding:20px 22px 22px;border-right:1px solid var(--line)}
.pricebar div:last-child{border-right:0}
.pricebar b{font-family:var(--display);font-size:38px;font-weight:800;color:var(--bone);display:block;line-height:1}
.pricebar span{font-size:13.5px;color:var(--muted);display:block;margin-top:7px}

@media(max-width:820px){}
.mcard{border:1px solid var(--line);background:#0A0C0D}
.mcard .frame{position:relative;background:#000}
.mcard video,.mcard img{width:100%}
.sound{position:absolute;right:12px;bottom:12px;background:rgba(0,0,0,.72);color:var(--bone);border:1px solid #3A4144;font-family:var(--text);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;padding:7px 12px;cursor:pointer;font-weight:600}
.sound:hover{border-color:var(--moonlight);color:var(--moonlight)}

/* ---- clubs ---- */
.clubs{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(206px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);margin-top:32px;
}
.club{
  position:relative;isolation:isolate;overflow:hidden;
  background:#0A0C0D;padding:26px 18px 22px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;
  min-height:186px;
  transition:background .3s ease, box-shadow .3s ease, transform .3s ease;
}
/* the candle inside the lantern */
.club .lit{
  position:absolute;inset:0;z-index:-1;opacity:0;
  background:
    radial-gradient(ellipse 62% 52% at 50% 46%, rgba(255,178,74,.34) 0%, rgba(214,116,40,.17) 38%, transparent 70%),
    radial-gradient(ellipse 100% 80% at 50% 108%, rgba(139,74,30,.30) 0%, transparent 66%);
  transition:opacity .34s ease;
}
.club:hover,.club:focus-within{
  background:#120E09;transform:translateY(-3px);
  box-shadow:inset 0 0 0 1px rgba(196,106,42,.42), 0 14px 44px -10px rgba(196,106,42,.34);
}
.club:hover .lit,.club:focus-within .lit{opacity:1;animation:candle 3.1s ease-in-out infinite}
@keyframes candle{
  0%,100%{opacity:.84} 14%{opacity:1}   27%{opacity:.7}
  41%{opacity:.96}     56%{opacity:.76} 69%{opacity:1} 85%{opacity:.8}
}
.club img{
  width:150px;height:102px;object-fit:contain;display:block;
  filter:saturate(.9) brightness(.92);
  transition:filter .3s ease, transform .3s ease;
}
.club:hover img{
  filter:saturate(1.12) brightness(1.1) drop-shadow(0 0 20px rgba(255,170,60,.5));
  transform:scale(1.05);
}
.club b{
  font-family:var(--display);font-size:17px;font-weight:700;text-transform:uppercase;
  color:#8B979D;line-height:1.05;text-align:center;letter-spacing:.02em;
  transition:color .3s ease;
}
.club:hover b{color:var(--lantern)}
@media(prefers-reduced-motion:reduce){
  .club,.club img{transition:none}
  .club:hover{transform:none}
  .club:hover .lit{animation:none}
}

/* ---- schedule ---- */
.days{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(18px,2.5vw,30px);margin-top:32px}
.day{border-top:2px solid var(--headstone);padding-top:18px}
.day h4{font-size:26px;color:var(--moonlight);margin-bottom:4px}
.day .sub{font-size:13px;color:var(--muted);letter-spacing:.05em;margin-bottom:16px}
.day ul{list-style:none;margin:0;padding:0;font-size:15px}
.day li{display:grid;grid-template-columns:82px 1fr;gap:14px;padding:9px 0;border-bottom:1px solid var(--line)}
.day li em{font-style:normal;font-family:var(--display);font-size:17px;font-weight:700;color:var(--fog);letter-spacing:.02em}
.day li span{color:#A9B3B8}

/* ---- venue ---- */
.venue{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(22px,3.5vw,44px);margin-top:30px;align-items:center}
@media(max-width:800px){.venue{grid-template-columns:1fr}}
.aerial{margin:0;border:1px solid var(--line);background:#0A0C0D}
.aerial img{width:100%;display:block;filter:saturate(.72) contrast(1.06) brightness(.86)}
.aerial figcaption{display:flex;gap:9px;align-items:center;padding:13px 16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);letter-spacing:.03em}
.aerial figcaption .nose{color:var(--sage)}
.addr{font-family:var(--display);font-size:clamp(24px,3vw,32px);font-weight:700;color:var(--bone);line-height:1.1;letter-spacing:.02em;margin-bottom:10px}

/* ---- cta band ---- */
.band{background:linear-gradient(165deg, rgba(196,106,42,.10), rgba(8,10,11,.9) 55%, #000);border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center;position:relative;overflow:hidden}
.band .glow{position:absolute;left:50%;top:50%;width:min(640px,110vw);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(196,106,42,.34),rgba(139,74,30,.12) 42%,transparent 70%);pointer-events:none}
.band h2{position:relative}
.band p{margin-left:auto;margin-right:auto;position:relative}
.band .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:10px;position:relative}


/* ---- section grounds ─ Hollow-black lit by the accent colours ---- */
section{background-color:#000;background-repeat:no-repeat}

/* moonlight spilling in from off-frame */
#event{
  background-image:
    radial-gradient(88% 70% at 6% -8%, rgba(135,201,238,.26) 0%, rgba(26,150,211,.11) 38%, transparent 68%),
    radial-gradient(70% 60% at 96% 106%, rgba(26,150,211,.13) 0%, transparent 62%);
  background-size:100% 100%,100% 100%;
}

/* carved lines cutting in from the right, over a rider-blue floor */
#divisions{
  overflow:hidden;
  background-image:linear-gradient(180deg, rgba(58,86,112,.16) 0%, rgba(10,16,22,.94) 52%, #000 100%);
  background-size:100% 100%;
}

/* ---- divisions showpiece: spotlight, pumpkin skin, chrome badge ---- */
.dfx{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.dfx-skin{
  position:absolute;inset:-4%;
  background-size:cover;background-position:center;
  opacity:.11;filter:saturate(1.15) contrast(1.05);
}
.dfx-spot{
  position:absolute;top:-34%;left:-10%;width:66%;height:168%;
  background:radial-gradient(ellipse at center,
    rgba(198,222,240,.30) 0%, rgba(134,172,204,.17) 30%,
    rgba(58,86,112,.07) 54%, transparent 74%);
  animation:dsweep 27s cubic-bezier(.45,0,.55,1) infinite alternate;
}
@keyframes dsweep{from{transform:translateX(-12%) scale(.9)}to{transform:translateX(92%) scale(1.12)}}
.dfx-beam{
  position:absolute;left:52%;top:46%;width:200%;aspect-ratio:1;
  background:conic-gradient(from 0deg,
    transparent 0deg, rgba(159,216,238,.09) 10deg, rgba(198,222,240,.15) 20deg,
    rgba(159,216,238,.06) 30deg, transparent 44deg, transparent 360deg);
  -webkit-mask-image:radial-gradient(circle, #000 14%, rgba(0,0,0,.5) 42%, transparent 68%);
          mask-image:radial-gradient(circle, #000 14%, rgba(0,0,0,.5) 42%, transparent 68%);
  animation:dbeam 46s linear infinite;
}
@keyframes dbeam{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}

#divisions > .wrap{position:relative;z-index:1}
#divisions .split{grid-template-columns:minmax(0,1fr) minmax(270px,430px);gap:clamp(26px,4.5vw,60px);margin-top:0;align-items:center}
.dlogo{margin:0;position:relative;isolation:isolate}
.dlogo::before{
  content:"";position:absolute;inset:-16% -12%;z-index:-1;
  background:radial-gradient(ellipse at 56% 32%, rgba(159,216,238,.30) 0%, rgba(122,158,190,.12) 40%, transparent 68%);
  animation:dglow 5.6s ease-in-out infinite;
}
@keyframes dglow{0%,100%{opacity:.72;transform:scale(.97)}50%{opacity:1;transform:scale(1.04)}}
.dlogo img{
  width:100%;display:block;
  filter:drop-shadow(0 20px 44px rgba(0,0,0,.75)) drop-shadow(0 0 54px rgba(159,216,238,.26));
  animation:dfloat 9.5s ease-in-out infinite alternate;
}
@keyframes dfloat{from{transform:translateY(-8px)}to{transform:translateY(8px)}}
@media(max-width:880px){#divisions .split{grid-template-columns:1fr}.dlogo{max-width:400px;margin:0 auto}}

/* moss, matching the sage used on the small-sided rows */
#ages{
  background-image:
    radial-gradient(84% 68% at 92% -4%, rgba(143,168,114,.28) 0%, rgba(70,96,58,.13) 40%, transparent 70%),
    radial-gradient(60% 50% at 4% 104%, rgba(70,96,58,.16) 0%, transparent 62%);
  background-size:100% 100%,100% 100%;
}

/* the Sunset Session — lantern light low in the frame */
#schedule{
  background-image:
    radial-gradient(96% 72% at 50% 118%, rgba(196,106,42,.30) 0%, rgba(139,74,30,.13) 40%, transparent 72%),
    radial-gradient(56% 46% at 8% -6%, rgba(135,201,238,.13) 0%, transparent 62%);
  background-size:100% 100%,100% 100%;
}

/* cold light rising off the turf */
#venue{
  background-image:
    radial-gradient(104% 82% at 50% 116%, rgba(135,201,238,.24) 0%, rgba(26,150,211,.10) 42%, transparent 74%),
    radial-gradient(58% 52% at 96% 2%, rgba(70,96,58,.18) 0%, transparent 62%);
  background-size:100% 100%,100% 100%;
}

/* sage carve bleeding off the lower left, mirrored against divisions */
#clubs{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201400%20900%22%3E%3Cpath%20d%3D%22M210%2050%20H1190%20L700%20740%20Z%22%20fill%3D%22none%22%20stroke%3D%22%25238FA872%22%20stroke-opacity%3D%22.24%22%20stroke-width%3D%222.6%22%2F%3E%3Cpath%20d%3D%22M288%2050%20H1112%20L700%20656%20Z%22%20fill%3D%22none%22%20stroke%3D%22%25238FA872%22%20stroke-opacity%3D%22.19%22%20stroke-width%3D%222.6%22%2F%3E%3Cpath%20d%3D%22M366%2050%20H1034%20L700%20572%20Z%22%20fill%3D%22none%22%20stroke%3D%22%25238FA872%22%20stroke-opacity%3D%22.15%22%20stroke-width%3D%222.6%22%2F%3E%3Cpath%20d%3D%22M444%2050%20H956%20L700%20488%20Z%22%20fill%3D%22none%22%20stroke%3D%22%25238FA872%22%20stroke-opacity%3D%22.11%22%20stroke-width%3D%222.6%22%2F%3E%3Cpath%20d%3D%22M522%2050%20H878%20L700%20404%20Z%22%20fill%3D%22none%22%20stroke%3D%22%25238FA872%22%20stroke-opacity%3D%22.08%22%20stroke-width%3D%222.6%22%2F%3E%3Cpath%20d%3D%22M600%2050%20H800%20L700%20320%20Z%22%20fill%3D%22none%22%20stroke%3D%22%25238FA872%22%20stroke-opacity%3D%22.055%22%20stroke-width%3D%222.6%22%2F%3E%3C%2Fsvg%3E"),
    radial-gradient(76% 70% at 0% 86%, rgba(143,168,114,.20) 0%, transparent 62%),
    linear-gradient(180deg,#000 0%, rgba(8,11,9,.95) 55%, #000 100%);
  background-position:left -280px bottom -140px, center, center;
  background-size:1200px auto,100% 100%,100% 100%;
}

/* facts strip picks up a cold edge */
.strip{background:linear-gradient(180deg, rgba(135,201,238,.10) 0%, rgba(8,10,11,.96) 70%, #08090A 100%)}

/* ---- footer ---- */
footer{padding:clamp(46px,6vw,72px) 0 clamp(50px,7vw,78px);font-size:14px;color:#6E787E;border-top:1px solid var(--line)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:30px;margin-bottom:38px}
.fgrid h4{font-size:19px;color:var(--fog);margin-bottom:12px}
.fgrid ul{list-style:none;margin:0;padding:0;line-height:2}
.fgrid a{color:#8B979D;text-decoration:none}
.fgrid a:hover{color:var(--moonlight)}
.credit{border-top:1px solid var(--line);padding-top:26px;line-height:1.5}
.credit a{color:var(--fog);text-decoration:none;border-bottom:1px solid #333;font-weight:500}
.credit a:hover{color:var(--moonlight);border-color:var(--moonlight)}
.credit em{display:block;font-style:normal;font-size:12.5px;color:#5A6469;margin-top:3px}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.brandmark img{width:220px;height:auto;flex:none}
@media(max-width:600px){:root{--nav-h:84px}.brandmark img{width:168px}}
#hero .lockup{width:min(440px,82%);margin:0 auto}
.band .badge{width:min(300px,70%);margin:0 auto 24px;position:relative}
footer .flogo{width:186px;margin-bottom:22px}
a:focus-visible,button:focus-visible{outline:2px solid var(--moonlight);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ══════════ interior pages ══════════ */
.pagehead{
  position:relative;border-bottom:1px solid var(--line);
  padding:clamp(52px,8vw,104px) 0 clamp(32px,4.5vw,54px);
  background-color:#000;background-repeat:no-repeat;background-size:100% 100%;
  background-image:
    radial-gradient(84% 74% at 8% -10%, rgba(135,201,238,.24) 0%, rgba(26,150,211,.10) 38%, transparent 68%),
    radial-gradient(64% 56% at 96% 108%, rgba(196,106,42,.16) 0%, transparent 64%);
}
.pagehead h1{font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:.9;
  font-size:clamp(42px,7.4vw,80px);color:var(--bone);margin:0}
.crumb{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 16px}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--moonlight)}
.pagehead .lede{margin-top:20px}

.doc h3{margin-top:0}
.doc + .doc{margin-top:clamp(40px,5vw,64px)}
.doc ol,.doc ul{margin:18px 0 0;padding-left:0;list-style:none;counter-reset:step}
.doc ol li{
  counter-increment:step;position:relative;padding:12px 0 12px 52px;
  border-bottom:1px solid var(--line);font-size:15.5px;color:#C0C9CE;
}
.doc ol li::before{
  content:counter(step);position:absolute;left:0;top:11px;
  width:32px;text-align:center;
  font-family:var(--display);font-size:20px;font-weight:800;color:var(--moonlight);line-height:1.2;
}
.doc ul li{
  position:relative;padding:11px 0 11px 26px;border-bottom:1px solid var(--line);
  font-size:15.5px;color:#C0C9CE;
}
.doc ul li::before{
  content:"";position:absolute;left:2px;top:19px;
  width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:7px solid var(--sage);
}
.doc li b{color:var(--bone);font-weight:600}

.callout{
  border-left:3px solid var(--lantern);background:#100C08;
  padding:20px 22px;margin-top:26px;
}
.callout.cool{border-left-color:var(--moonlight);background:#080D10}
.callout h4{font-family:var(--display);font-size:21px;text-transform:uppercase;letter-spacing:.02em;
  color:var(--lantern);margin:0 0 9px}
.callout.cool h4{color:var(--moonlight)}
.callout p{margin:0;font-size:15px;color:#B3ADA6;max-width:70ch}
.callout.cool p{color:#AEBAC1}

.pagelinks{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:clamp(40px,5vw,64px)}
.pagelinks a{background:#0A0C0D;padding:22px 24px 24px;text-decoration:none;display:block;
  transition:background .2s,box-shadow .2s}
.pagelinks a:hover{background:#12100C;box-shadow:inset 3px 0 0 var(--lantern)}
.pagelinks b{display:block;font-family:var(--display);font-size:23px;font-weight:800;
  text-transform:uppercase;color:var(--bone);letter-spacing:.01em}
.pagelinks span{display:block;font-size:13.5px;color:var(--muted);margin-top:7px}
.pagelinks a:hover b{color:var(--lantern)}
nav ul a.on{color:var(--moonlight)}