/* Shared homepage foundation. Load before the platform stylesheet. */
:root{--bg:#0a0909;--paper:#121012;--card:#181518;--card2:#201b1e;--text:#f6efe8;--muted:#aaa0a0;--orange:#ff6425;--gold:#ffc46e;--pink:#e79b83;--line:#30282b;--green:#9bdd70;--scroll:0}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;overflow-x:hidden;position:relative}
.scrollGlow{position:absolute;left:0;right:0;top:0;height:100%;pointer-events:none;z-index:0;background:radial-gradient(ellipse 70% 18% at 50% 100%,rgba(255,74,12,.70),transparent 70%),radial-gradient(ellipse 55% 12% at 30% 88%,rgba(255,122,35,.32),transparent 72%),radial-gradient(ellipse 60% 14% at 72% 78%,rgba(255,72,12,.25),transparent 72%)}
.embers:before,.embers:after{content:"";position:fixed;width:5px;height:5px;border-radius:50%;background:var(--orange);box-shadow:110px 120px var(--gold),300px 420px var(--orange),560px 180px var(--gold),780px 560px var(--orange),1030px 130px var(--gold),1260px 470px var(--orange);animation:rise 13s linear infinite;z-index:2}
.embers:after{left:35%;animation-duration:18s}
@keyframes rise{from{transform:translateY(105vh);opacity:0}15%{opacity:1}to{transform:translate(90px,-120vh);opacity:0}}
header{position:fixed;top:0;left:0;right:0;height:70px;padding:0 6vw;display:flex;align-items:center;justify-content:space-between;background:#0a0909e8;border-bottom:1px solid var(--line);backdrop-filter:blur(12px);transition:box-shadow .3s,border-color .3s}
header.scrolled{box-shadow:0 8px 30px #0008;border-color:#ff642545}
.logo,header a{color:white;text-decoration:none}
.logo{font:800 23px "Barlow Condensed"}
.logo span,footer span span{color:var(--orange)}
nav{display:flex;gap:28px}
nav a{font:800 12px "Barlow Condensed";letter-spacing:.14em;color:#aaa;text-decoration:none;transition:color .2s,transform .2s}
nav a:hover{color:var(--gold);transform:translateY(-2px)}
.discord,.btn{background:var(--orange);color:#170b06!important;padding:12px 20px;font:900 13px "Barlow Condensed";letter-spacing:.08em;text-decoration:none;display:inline-block;box-shadow:4px 4px 0 #5d2714;transition:.2s}
.discord:hover,.btn:hover{transform:translate(-2px,-2px) rotate(-.5deg);box-shadow:7px 7px 0 #5d2714}
section{padding:110px 8vw;position:relative}
.eyebrow{font:900 12px "Barlow Condensed";letter-spacing:.19em}
.hero{padding-top:125px;align-items:center}
.heroText{position:relative;z-index:2}
.hero h1,h2{font:900 clamp(75px,11vw,145px) "Barlow Condensed";margin:28px 0 20px}
.hero h1 i,h2 i{color:transparent;-webkit-text-stroke:1px #eee}
.hero h2{line-height:1;margin:0 0 18px}
.hero p{max-width:650px;color:#aaa0a0;line-height:1.75}
.heroButtons{display:flex;margin-top:28px}
.ghost{text-decoration:none;font:800 13px "Barlow Condensed";letter-spacing:.08em;transition:.2s;cursor:pointer}
.ghost:hover{border-color:var(--orange);transform:translateY(-2px)}
.heroArt{position:absolute;z-index:1;pointer-events:none}
.phoenix{width:100%;height:100%;object-fit:contain;object-position:center;transform:translate3d(calc(var(--mx,0px)*.035),calc(var(--my,0px)*.025 + var(--phoenixShift,0px)),0) scale(var(--phoenixScale,1))}
.hero:hover .phoenix{filter:saturate(1.4) contrast(1.12) brightness(1) drop-shadow(0 0 55px #ff8b3c77);opacity:.9}
.phoenixHalo{position:absolute;inset:12% 10%;border-radius:50%}
@keyframes pulse{50%{transform:scale(1.06);opacity:.7}}
.heroSticker{position:absolute;right:12vw;top:28%;width:150px;height:150px;border-radius:50%;background:var(--orange);color:#1b0d08;display:flex;align-items:center;justify-content:center;flex-direction:column;transform:rotate(8deg);box-shadow:10px 10px 0 #4c2113;z-index:3;animation:stickerFloat 4s ease-in-out infinite}
.heroSticker span{font:900 14px "Barlow Condensed";letter-spacing:.12em;margin-top:5px}
@keyframes stickerFloat{50%{transform:rotate(4deg) translateY(-8px)}}
.about{background:transparent}
.intro,.sectionHead{display:grid;grid-template-columns:1fr 1fr;gap:8vw;margin-top:35px}
.copy{color:#aaa0a0;line-height:1.8;max-width:620px;align-self:center}
.lead{color:#e1d8d3}
.vibes{display:grid;grid-template-columns:repeat(4,1fr);margin-top:60px;border:1px solid var(--line)}
.vibes div{padding:27px 22px;border-right:1px solid var(--line)}
.vibes div:last-child{border:0}
.vibes span{font-size:25px;display:block;margin-bottom:15px}
.vibes strong{display:block;font:900 21px "Barlow Condensed";letter-spacing:.06em}
.vibes small{display:block;color:#81787c;margin-top:8px;line-height:1.5}
.eventsSection{background:transparent}
.stickyNote{align-self:center;background:var(--gold);color:#21140b;padding:22px 27px;transform:rotate(2deg);box-shadow:7px 7px 0 #392217;display:flex;flex-direction:column;animation:noteSway 5s ease-in-out infinite}
.stickyNote span{font:900 11px "Barlow Condensed";letter-spacing:.12em}
.stickyNote strong{font:900 44px "Barlow Condensed";line-height:1}
.stickyNote small{font-weight:700;margin-top:4px}
@keyframes noteSway{50%{transform:rotate(-1deg) translateY(-4px)}}
.eventCards{display:grid;gap:18px;margin-top:45px}
.eventCard{display:grid;gap:15px;align-items:center;background:var(--card);border:1px solid var(--line);padding:23px}
.eventNumber{font:900 12px "Barlow Condensed";color:#65595c}
.eventEmoji{font-size:29px}
.eventInfo>span{font:900 10px "Barlow Condensed";letter-spacing:.1em}
.eventInfo h3{font:900 28px "Barlow Condensed";margin:5px 0}
.eventInfo p{font-size:12px;line-height:1.55;margin:0}
.eventCard>b{font:900 27px "Barlow Condensed"}
.smallNote{color:#625a5d;font-size:11px;margin-top:14px}
.leadership{background:transparent}
.leaders{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:48px}
.leader{background:var(--card);border:1px solid var(--line);padding:24px 19px;min-height:170px}
.leader span{font:900 10px "Barlow Condensed";letter-spacing:.09em;color:#887b7f}
.leader h3{font:900 28px "Barlow Condensed";margin:20px 0 8px}
.leader p{font-size:11px;color:#82787b;line-height:1.55}
.rules{background:transparent}
.rules h2{margin-bottom:40px}
.ruleCards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ruleCards article{background:var(--card);padding:25px 21px;border:1px solid var(--line);min-height:190px}
.ruleCards span{color:var(--orange);font:900 11px "Barlow Condensed"}
.ruleCards strong{display:block;font:900 23px "Barlow Condensed";margin:18px 0 8px}
.ruleCards p{color:#8d8387;font-size:12px;line-height:1.65}
.ruleCards b{color:#d8c9c3}
.ruleBanner{margin-top:18px;padding:14px 16px;font:800 11px "Barlow Condensed";letter-spacing:.08em;line-height:1.7}
.ruleBanner b{color:var(--orange);margin:0 7px}
.recruit h2{font-size:clamp(65px,10vw,135px);margin-bottom:18px}
.recruit>p{max-width:650px;color:#aaa0a0;line-height:1.75;margin-bottom:30px}
footer{display:flex;justify-content:space-between;font:800 10px "Barlow Condensed";letter-spacing:.12em}
.interactive{--rx:0deg;--ry:0deg;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.interactive:hover{transform:perspective(700px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-5px);border-color:#ff642560;box-shadow:0 15px 35px #0005}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:1050px){
  .heroArt{right:-14vw;width:65vw;opacity:.7}
  .heroSticker{right:5vw;opacity:.85}
}
@media (max-width:800px){
  nav{display:none}
  .heroSticker{right:7vw;top:18%;width:105px;height:105px}
  .hero:after{right:-55vw;bottom:-20vw;width:115vw;height:115vw}
  .intro,.sectionHead,.eventCards{grid-template-columns:1fr}
  .vibes,.ruleCards{grid-template-columns:1fr 1fr}
  .stickyNote{width:max-content}
  footer{flex-direction:column}
}
@media (max-width:520px){
  .heroButtons{flex-direction:column;align-items:flex-start}
  .vibes div{border-right:0;border-bottom:1px solid var(--line)}
  .leader{min-height:auto}
}
.heroArt.noPhoenix{display:none}
@media (max-width:520px){
  .heroSticker{z-index:5}
}
@media (max-width:800px){
  body{transition:none;background:var(--bg)}
  .scrollGlow{display:block}
  header{background:#0a0909f5}
  header.scrolled{box-shadow:none}
  .phoenix{transition:none;transform:none}
  .phoenixHalo{filter:none;animation:none}
  .heroSticker{animation:none}
  .stickyNote{animation:none}
  .reveal{transition:opacity .35s ease,transform .35s ease}
  .interactive{transition:none}
}
@media (max-width:520px){
  .phoenix{filter:saturate(1.05) brightness(.9);mix-blend-mode:normal;opacity:.22}
  .heroSticker{box-shadow:5px 5px 0 #4c2113}
}
html,body{background:transparent!important}
body{min-height:100vh}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0}
.scrollGlow{display:none}
main{position:relative;z-index:1}
section{background:transparent!important;z-index:1}
header{z-index:5}
footer{position:relative;z-index:1;overflow:visible}
footer:before{content:"";position:absolute;left:0;right:0;bottom:-8px;height:230px;pointer-events:none;z-index:-1;background:
radial-gradient(ellipse 5% 92% at 4% 100%,rgba(255,86,12,.78),transparent 70%),
radial-gradient(ellipse 4% 68% at 11% 100%,rgba(255,163,48,.60),transparent 72%),
radial-gradient(ellipse 6% 100% at 19% 100%,rgba(255,68,8,.82),transparent 70%),
radial-gradient(ellipse 4% 74% at 28% 100%,rgba(255,145,32,.60),transparent 72%),
radial-gradient(ellipse 7% 96% at 38% 100%,rgba(255,76,9,.78),transparent 70%),
radial-gradient(ellipse 4% 70% at 47% 100%,rgba(255,168,42,.58),transparent 72%),
radial-gradient(ellipse 6% 102% at 57% 100%,rgba(255,65,7,.82),transparent 70%),
radial-gradient(ellipse 4% 72% at 67% 100%,rgba(255,150,34,.60),transparent 72%),
radial-gradient(ellipse 7% 94% at 77% 100%,rgba(255,70,8,.80),transparent 70%),
radial-gradient(ellipse 4% 70% at 87% 100%,rgba(255,160,38,.58),transparent 72%),
radial-gradient(ellipse 6% 92% at 96% 100%,rgba(255,76,9,.78),transparent 70%);filter:blur(7px);opacity:.78;transform-origin:bottom center;animation:flameFlicker 3s ease-in-out infinite alternate,flameDrift 7s ease-in-out infinite alternate}
footer:after{content:"";position:absolute;left:-2%;right:-2%;bottom:-5px;height:150px;pointer-events:none;z-index:-1;background:
radial-gradient(ellipse 3% 78% at 14% 100%,rgba(255,180,48,.34),transparent 72%),
radial-gradient(ellipse 4% 86% at 33% 100%,rgba(255,110,12,.34),transparent 70%),
radial-gradient(ellipse 3% 74% at 52% 100%,rgba(255,180,48,.30),transparent 72%),
radial-gradient(ellipse 4% 82% at 72% 100%,rgba(255,110,12,.32),transparent 70%),
radial-gradient(ellipse 3% 76% at 91% 100%,rgba(255,180,48,.30),transparent 72%);filter:blur(5px);opacity:.7;animation:flameDrift 5.5s ease-in-out infinite alternate-reverse}
@keyframes flameFlicker{0%{transform:scaleY(.9) translateX(-.8%);opacity:.68}50%{transform:scaleY(1.06) translateX(.8%);opacity:.84}100%{transform:scaleY(.94) translateX(-.5%);opacity:.72}}
@keyframes flameDrift{0%{transform:translateX(-1.2%)}50%{transform:translateX(1%)}100%{transform:translateX(-.6%)}}
.phoenix{mix-blend-mode:screen!important}
.phoenixHalo{background:radial-gradient(ellipse at center,rgba(255,91,22,.15),transparent 68%)!important;filter:blur(16px)!important;animation:pulse 5s ease-in-out infinite}
@media (max-width:800px){
  .heroSticker{z-index:5}
  .embers:before,.embers:after{width:3px;height:3px}
  footer:before{height:175px;filter:blur(6px)}
  footer:after{height:120px}
  header{backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media (max-width:520px){
  .heroSticker{top:15%;right:6vw}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}
html{background:#050506!important}
.logo,.hero h1,h2,.hero h2,nav a,.discord,.btn,.ghost,.eyebrow,
.heroSticker span,.vibes strong,.eventInfo>span,.eventInfo h3,.eventCard>b,
.leader span,.leader h3,.ruleCards span,.ruleCards strong,.ruleBanner,footer{font-family:"Rajdhani",sans-serif}
.logo{font-weight:700;letter-spacing:.11em}
nav a,.discord,.btn,.ghost,.eyebrow,.heroSticker span,.eventInfo>span,
.leader span,.ruleCards span,.ruleBanner,footer{font-weight:700}
.phoenix{opacity:.72!important;filter:saturate(1.28) contrast(1.08) brightness(.96) drop-shadow(0 0 32px rgba(255,80,15,.32))!important}
@media (max-width:800px){
  .phoenix{filter:saturate(1.2) contrast(1.04) brightness(.88) drop-shadow(0 0 28px rgba(255,80,15,.28))!important}
}
.hero h1,h2{font-family:"Playfair Display",Georgia,serif!important;font-weight:800;letter-spacing:-.045em;line-height:.84}
.hero h1 i,h2 i{font-family:"Playfair Display",Georgia,serif;font-style:italic}
.phoenix{transition:filter .35s ease,opacity .35s ease,transform .35s ease!important}
body.pageActive .phoenix{opacity:.94!important;filter:saturate(1.5) contrast(1.12) brightness(1.08) drop-shadow(0 0 48px rgba(255,90,20,.52)) drop-shadow(0 0 90px rgba(255,55,10,.22))!important;transform:scale(1.018)!important}
body.pageActive .phoenixHalo{opacity:1;transform:scale(1.08)}
@media (max-width:800px){
  body.pageActive .phoenix{opacity:.72!important;filter:saturate(1.35) contrast(1.08) brightness(1) drop-shadow(0 0 34px rgba(255,90,20,.42))!important}
}
body:after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;pointer-events:none;z-index:0;background:
    linear-gradient(90deg,
      rgba(255,55,8,.00) 0%,
      rgba(255,55,8,.10) 4%,
      rgba(255,82,12,.18) 9%,
      transparent 18%,
      transparent 82%,
      rgba(255,82,12,.18) 91%,
      rgba(255,55,8,.10) 96%,
      rgba(255,55,8,.00) 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,transparent 12%,rgba(0,0,0,.2) 38%,#000 100%);mask-image:linear-gradient(to bottom,transparent 0%,transparent 12%,rgba(0,0,0,.2) 38%,#000 100%)}
@media (max-width:800px){
  body:after{height:58%;background:
      linear-gradient(90deg,
        rgba(255,55,8,0) 0%,
        rgba(255,70,10,.08) 5%,
        rgba(255,82,12,.13) 11%,
        transparent 20%,
        transparent 80%,
        rgba(255,82,12,.13) 89%,
        rgba(255,70,10,.08) 95%,
        rgba(255,55,8,0) 100%)}
}
.hero h1,h2,.recruit h2{font-family:"Bebas Neue","Barlow Condensed",sans-serif!important;font-weight:400!important;letter-spacing:.015em!important;line-height:.86!important;color:#f4eee9!important;-webkit-text-stroke:0!important;text-shadow:0 0 18px rgba(255,72,15,.08)}
.rules h2,.about h2,.eventsSection h2,.leadership h2{font-family:"Bebas Neue","Barlow Condensed",sans-serif!important;font-weight:400!important}
.hero h1,h2,.recruit h2,
.hero h1 i,h2 i,.recruit h2 i,
.rules h2,.about h2,.eventsSection h2,.leadership h2{font-family:"Playfair Display",Georgia,serif!important;font-weight:800!important;font-style:normal!important;letter-spacing:-.045em!important;line-height:.84!important;color:transparent!important;-webkit-text-fill-color:transparent!important;-webkit-text-stroke:1px rgba(255,225,205,.58)!important;background:
    radial-gradient(circle at 18% 24%,#ffb04a 0 2%,transparent 4%),
    radial-gradient(circle at 73% 68%,#ff6a16 0 3%,transparent 5%),
    radial-gradient(circle at 43% 45%,#d94712 0 2%,transparent 5%),
    repeating-linear-gradient(112deg,rgba(255,119,24,.92) 0 3px,rgba(48,20,14,.98) 3px 9px,rgba(255,89,13,.78) 9px 12px,rgba(20,13,13,.98) 12px 19px),
    linear-gradient(180deg,#ff9a38 0%,#9e2e12 32%,#241719 72%,#08090a 100%);background-size:120px 120px,170px 170px,210px 210px,100% 100%,100% 100%;-webkit-background-clip:text!important;background-clip:text!important;text-shadow:0 0 16px rgba(255,70,15,.10)}
.hero h1,h2,.recruit h2,
.rules h2,.about h2,.eventsSection h2,.leadership h2{font-family:"Playfair Display",Georgia,serif!important;font-weight:800!important;font-style:normal!important;color:#f4efe9!important;-webkit-text-fill-color:#f4efe9!important;-webkit-text-stroke:0!important;letter-spacing:-.045em!important;line-height:.84!important;background:none!important;text-shadow:none!important}
.hero h1 i,h2 i,.recruit h2 i{background:
    radial-gradient(circle at 16% 28%,rgba(255,178,65,.95) 0 2%,transparent 5%),
    radial-gradient(circle at 72% 63%,rgba(255,79,14,.9) 0 3%,transparent 6%),
    repeating-linear-gradient(108deg,
      #171113 0 7px,
      #522016 7px 11px,
      #d44813 11px 14px,
      #241315 14px 22px,
      #ff7a1d 22px 24px,
      #351719 24px 31px);background-size:150px 150px,190px 190px,100% 100%;-webkit-background-clip:text!important;background-clip:text!important;text-shadow:0 0 14px rgba(255,65,12,.12)}
.hero h1,h2,.recruit h2,
.rules h2,.about h2,.eventsSection h2,.leadership h2,
.hero h1 i,h2 i,.recruit h2 i{font-optical-sizing:auto}
.hero h1,h2,.recruit h2,
.rules h2,.about h2,.eventsSection h2,.leadership h2,
.hero h1 i,h2 i,.recruit h2 i{font-family:"Russo One","Rajdhani",sans-serif!important;font-weight:400!important;font-style:normal!important;letter-spacing:.005em!important;line-height:.86!important;color:#f4efe9!important;-webkit-text-fill-color:#f4efe9!important;-webkit-text-stroke:0!important;background:none!important;text-shadow:0 0 18px rgba(255,72,15,.08)}
@media (max-width:800px){
  .logo img{max-height:52px}
}
@media (max-width:520px){
  .logo img{max-height:48px}
}
.displayFont{font-family:"Space Grotesk",sans-serif!important;color:#f4efe9!important;-webkit-text-fill-color:initial!important;-webkit-text-stroke:0!important;letter-spacing:0!important;line-height:.82!important}
.displayGlyph{width:auto;overflow:visible;color:inherit}
.displayFont i{color:inherit!important;font-style:normal!important}
.hero h1.displayFont{font-weight:400!important}
section h2.displayFont,.recruit h2.displayFont{font-weight:400!important}
.eventInfo h3.displayFont,.leader h3.displayFont,.ruleCards strong.displayFont{font-weight:400!important}
.logo{display:flex!important;align-items:center!important;width:min(205px,26vw)!important;height:58px!important;overflow:visible!important}
.logo img{display:block!important;width:100%!important;height:100%!important;max-height:none!important;object-fit:contain!important;object-position:left center!important}
.displayFont i{flex-wrap:nowrap!important}
@media (max-width:800px){
  .hero{padding-bottom:70px}
  .hero h1.displayFont i{font-size:.92em!important}
}
@media (max-width:520px){
  .hero h1.displayFont i{font-size:.9em!important}
  .heroArt{height:470px!important}
}
.displayFont i{display:block!important;white-space:normal!important}
.hero h1.displayFont{white-space:normal!important}
@media (max-width:800px){
  section h2.displayFont,.recruit h2.displayFont{letter-spacing:-.01em!important}
  .eventInfo h3.displayFont,.leader h3.displayFont,.ruleCards strong.displayFont{line-height:.92!important}
}
main,section,.heroText,.intro,.sectionHead,.copy,.eventCards,.eventCard,.eventInfo,.leaders,.leader,.ruleCards,.ruleCards article,.recruit{min-width:0}
.displayFont{max-width:100%;overflow:visible!important}
.displayGlyph{height:.68em!important;vertical-align:-.02em!important;flex:0 0 auto}
.hero h1.displayFont{font-size:clamp(72px,9.5vw,132px)!important;line-height:.82!important}
section h2.displayFont,.recruit h2.displayFont{font-size:clamp(62px,7.2vw,104px)!important;line-height:.88!important}
.eventInfo h3.displayFont,.leader h3.displayFont,.ruleCards strong.displayFont{font-size:clamp(25px,2.1vw,34px)!important;line-height:.95!important}
.hero h2{font-size:clamp(21px,2.2vw,30px)!important}
.hero p,.copy,.recruit>p{font-size:clamp(15px,1.25vw,18px);line-height:1.7}
.lead{font-size:clamp(18px,1.5vw,21px)!important;line-height:1.65!important}
.vibes strong{font-size:clamp(18px,1.5vw,21px)}
.eventInfo p,.leader p,.ruleCards p{font-size:13px;line-height:1.6}
.eventInfo,.leader,.ruleCards article{overflow:hidden}
.ruleBanner{font-size:11px}
footer{font-size:11px}
@media (max-width:1050px){
  section{padding-left:7vw;padding-right:7vw}
  .hero h1.displayFont{font-size:clamp(64px,11vw,108px)!important}
  section h2.displayFont,.recruit h2.displayFont{font-size:clamp(54px,8vw,82px)!important}
  .leaders{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:800px){
  .eventInfo h3.displayFont,.leader h3.displayFont,.ruleCards strong.displayFont{font-size:clamp(25px,7vw,34px)!important}
  .hero p,.copy,.recruit>p{font-size:15px!important;line-height:1.7!important}
  .eventInfo p,.leader p,.ruleCards p{font-size:13px}
  .intro,.sectionHead{gap:35px}
  .stickyNote{padding:18px 22px}
}
@media (max-width:520px){
  .hero{padding:128px 7vw 55px!important}
  .eventInfo h3.displayFont,.leader h3.displayFont,.ruleCards strong.displayFont{font-size:26px!important}
  .hero p,.copy,.recruit>p{font-size:15px!important}
  .lead{font-size:18px!important}
  .intro,.sectionHead{gap:28px}
  .vibes,.ruleCards,.leaders{grid-template-columns:1fr}
  .eventCard{grid-template-columns:26px 34px minmax(0,1fr);gap:10px}
  .eventEmoji{font-size:25px}
  .eventInfo>span{font-size:9px;letter-spacing:.07em}
  .eventInfo p{font-size:12px}
  .leader{padding:21px 17px}
  .ruleCards article{min-height:0}
  .ruleBanner{font-size:10px;line-height:1.6}
  .heroButtons{gap:10px}
}
@media (min-width:801px){
  header{height:78px;padding:0 5vw}
  .logo{width:min(220px,20vw)!important;height:62px!important}
  nav{gap:30px}
  .hero{min-height:100vh;padding:150px 7vw 100px}
  .heroText{max-width:760px}
  .hero h1.displayFont{font-size:clamp(82px,9vw,138px)!important;margin:28px 0 22px}
  .heroArt{right:-2vw!important;top:4%!important;width:min(58vw,820px)!important;height:94vh!important;opacity:.82!important}
  .hero h2{font-size:clamp(23px,2.2vw,32px)!important}
  .hero p{max-width:600px}
  section{padding:125px 7vw}
  .intro,.sectionHead{grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);gap:7vw}
  section h2.displayFont,.recruit h2.displayFont{font-size:clamp(66px,7vw,112px)!important}
  .eventCards{grid-template-columns:1fr 1fr}
  .leaders{grid-template-columns:repeat(5,minmax(0,1fr))}
  .ruleCards{grid-template-columns:repeat(4,minmax(0,1fr))}
  .vibes{grid-template-columns:repeat(4,minmax(0,1fr))}
  .eventCard{min-width:0}
  .eventInfo h3.displayFont,.leader h3.displayFont,.ruleCards strong.displayFont{font-size:clamp(25px,2vw,34px)!important}
  .recruit{padding-top:145px;padding-bottom:145px}
  footer{padding-left:7vw;padding-right:7vw}
}
@media (max-width:800px){
  header{height:68px!important;padding:0 6vw!important}
  .logo{width:170px!important;height:55px!important}
  .logo img{width:100%!important;height:55px!important;object-fit:contain!important}
  .hero{min-height:720px!important;padding:125px 7vw 60px!important;display:flex!important;align-items:flex-start!important}
  .heroText{width:100%!important;max-width:100%!important;padding-top:72px}
  .hero .eyebrow{font-size:11px!important;letter-spacing:.16em!important}
  .hero h1.displayFont{font-size:clamp(48px,12vw,64px)!important;line-height:.86!important;margin:20px 0 22px!important;max-width:100%!important}
  .hero h2{font-size:18px!important;line-height:1.15!important;margin-bottom:15px!important}
  .hero p{max-width:580px!important;font-size:15px!important;line-height:1.7!important}
  .heroArt{top:245px!important;right:-34vw!important;width:112vw!important;height:500px!important;opacity:.25!important;z-index:1!important}
  .phoenix{opacity:.32!important}
  .heroText{z-index:4!important}
  .heroSticker{display:none!important}
  .heroButtons{margin-top:24px!important;display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;align-items:center!important}
  section{padding:78px 7vw!important}
  .eyebrow{font-size:11px!important;letter-spacing:.17em!important}
  .intro,.sectionHead{display:block!important;margin-top:30px!important}
  section h2.displayFont,.recruit h2.displayFont{font-size:clamp(42px,10vw,56px)!important;line-height:.9!important;margin:0 0 30px!important}
  .copy{max-width:100%!important}
  .lead{font-size:18px!important;line-height:1.65!important}
  .copy p{font-size:15px!important;line-height:1.7!important}
  .vibes{display:grid!important;grid-template-columns:1fr 1fr!important;gap:0!important;margin-top:42px!important}
  .vibes div{padding:20px 16px!important;border-right:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important}
  .vibes div:nth-child(2n){border-right:0!important}
  .vibes div:nth-last-child(-n/**/+2){border-bottom:0!important}
  .vibes strong{font-size:17px!important}
  .vibes small{font-size:12px!important}
  .sectionHead .stickyNote{margin-top:28px!important;width:max-content!important;max-width:100%!important}
  .stickyNote strong{font-size:38px!important}
  .eventCards{display:grid!important;grid-template-columns:1fr!important;gap:14px!important;margin-top:32px!important}
  .eventCard{display:grid!important;grid-template-columns:26px 34px minmax(0,1fr)!important;gap:10px!important;padding:19px 16px!important}
  .eventInfo{min-width:0!important}
  .eventInfo>span{font-size:9px!important;letter-spacing:.06em!important}
  .eventInfo h3.displayFont{font-size:27px!important;line-height:.92!important;margin:7px 0 9px!important}
  .eventInfo p{font-size:12px!important;line-height:1.55!important}
  .eventCard>b{display:none!important}
  .smallNote{font-size:11px!important;line-height:1.55!important}
  .leaders{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;margin-top:36px!important}
  .leader{min-height:0!important;padding:21px 17px!important}
  .leader h3.displayFont{font-size:31px!important;line-height:.92!important;margin:15px 0 8px!important}
  .leader p{font-size:12px!important}
  .ruleCards{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important}
  .ruleCards article{min-height:0!important;padding:20px 16px!important}
  .ruleCards strong.displayFont{font-size:25px!important;line-height:.92!important;margin:14px 0 8px!important}
  .ruleCards p{font-size:12px!important;line-height:1.55!important}
  .ruleBanner{font-size:9px!important;line-height:1.7!important}
  .recruit h2.displayFont{margin-bottom:20px!important}
  .recruit>p{font-size:15px!important;line-height:1.7!important}
  footer{padding:24px 7vw!important;gap:8px!important;font-size:10px!important}
}
@media (max-width:520px){
  .logo{width:155px!important;height:52px!important}
  .logo img{height:52px!important}
  .hero{min-height:700px!important;padding-left:7vw!important;padding-right:7vw!important}
  .heroText{padding-top:62px}
  .hero h1.displayFont{font-size:clamp(43px,11.5vw,56px)!important;line-height:.88!important}
  .hero h2{font-size:17px!important}
  .heroButtons .btn,.heroButtons .ghost{font-size:12px!important;padding:11px 15px!important}
  .heroArt{top:255px!important;right:-40vw!important;width:120vw!important;opacity:.21!important}
  section{padding:70px 7vw!important}
  section h2.displayFont,.recruit h2.displayFont{font-size:clamp(38px,9.2vw,50px)!important}
  .vibes,.ruleCards{grid-template-columns:1fr!important}
  .vibes div,.vibes div:nth-child(2n){border-right:0!important;border-bottom:1px solid var(--line)!important}
  .vibes div:last-child{border-bottom:0!important}
  .ruleCards article{padding:19px 16px!important}
  .ruleCards strong.displayFont{font-size:25px!important}
}
html.device-phone body{overflow-x:hidden}
html.device-phone header{height:68px!important;padding:0 6vw!important}
html.device-phone nav{display:none!important}
html.device-phone .logo{width:170px!important;height:55px!important}
html.device-phone .hero{min-height:720px!important;padding:125px 7vw 60px!important;display:flex!important;align-items:flex-start!important}
html.device-phone .heroText{width:100%!important;max-width:100%!important;padding-top:72px;z-index:4!important}
html.device-phone .hero h1.displayFont{font-size:clamp(48px,12vw,64px)!important;line-height:.86!important;max-width:100%!important}
html.device-phone .heroArt{top:245px!important;right:-34vw!important;width:112vw!important;height:500px!important;opacity:.25!important;z-index:1!important}