@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Barlow+Condensed:wght@500;600;700;800;900&family=Bebas+Neue&family=Rajdhani:wght@400;500;600;700&family=Russo+One&family=Space+Grotesk:wght@400;500;600;700&display=swap');
: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;background:#090708;color:var(--text);font-family:"Space Grotesk",sans-serif;overflow-x:hidden;position:relative;}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:linear-gradient(180deg,#080708 0%,#0b0809 13%,#12090a 32%,#1b0a0a 53%,#2b0b08 72%,#4a1008 88%,#7d1b08 100%);}
.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);z-index:5;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";letter-spacing:.07em}.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;border-top:1px solid var(--line);position:relative;z-index:1}.eyebrow{color:var(--orange);font:900 12px "Barlow Condensed";letter-spacing:.19em}
.hero{min-height:100vh;padding-top:125px;display:flex;align-items:center;position:relative;overflow:hidden}.heroText{max-width:820px;position:relative;z-index:2}.hero h1,h2{font:900 clamp(75px,11vw,145px) "Barlow Condensed";line-height:.77;letter-spacing:-.04em;margin:28px 0 20px}.hero h1 i,h2 i{font-style:normal;color:transparent;-webkit-text-stroke:1px #eee}.hero h2{font-size:clamp(20px,2.5vw,31px);line-height:1;letter-spacing:.08em;color:var(--gold);margin:0 0 18px}.hero p{max-width:650px;color:#aaa0a0;line-height:1.75}.heroButtons{display:flex;gap:12px;margin-top:28px}.ghost{color:#eee;text-decoration:none;border:1px solid var(--line);background:transparent;padding:11px 18px;font:800 13px "Barlow Condensed";letter-spacing:.08em;transition:.2s;cursor:pointer}.ghost:hover{border-color:var(--orange);transform:translateY(-2px)}
.heroArt{position:absolute;right:-3vw;top:5%;width:min(53vw,760px);height:92vh;z-index:1;pointer-events:none}.phoenix{width:100%;height:100%;object-fit:contain;object-position:center;mix-blend-mode:screen;filter:saturate(1.18) contrast(1.08) brightness(.88) drop-shadow(0 0 35px #ff642555);opacity:.78;transform:translate3d(calc(var(--mx,0px)*.035),calc(var(--my,0px)*.025 + var(--phoenixShift,0px)),0) scale(var(--phoenixScale,1));transition:filter .4s,opacity .4s}.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%;background:radial-gradient(circle,#ff8b3c20,transparent 58%);filter:blur(12px);animation:pulse 4s ease-in-out infinite}
@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{font-size:20px;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;grid-template-columns:1fr 1fr;gap:18px;margin-top:45px}.eventCard{display:grid;grid-template-columns:38px 45px 1fr auto;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;color:var(--orange)}.eventInfo h3{font:900 28px "Barlow Condensed";margin:5px 0}.eventInfo p{color:#8f8589;font-size:12px;line-height:1.55;margin:0}.eventCard>b{font:900 27px "Barlow Condensed";color:#5f5357}.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.boss{background:linear-gradient(145deg,#241914,#171316);border-top:4px solid var(--orange)}.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;background:#0d0b0d;border:1px dashed #5a4648;color:#918488;font:800 11px "Barlow Condensed";letter-spacing:.08em;line-height:1.7}.ruleBanner b{color:var(--orange);margin:0 7px}
.recruit{background:transparent}.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{padding:28px 8vw;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:#5f5659;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}.leaders{grid-template-columns:repeat(2,1fr)}} 
@media(max-width:800px){nav{display:none}.hero{padding:120px 7vw 75px}.heroArt{right:-28vw;top:8%;width:100vw;height:82vh;opacity:.48}.heroText{max-width:650px}.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}.leaders{grid-template-columns:1fr 1fr}.stickyNote{width:max-content}.eventCard{grid-template-columns:30px 40px 1fr}.eventCard>b{display:none}footer{flex-direction:column;gap:10px}}
@media(max-width:520px){.heroArt{right:-42vw;width:125vw;opacity:.34}.heroSticker{top:15%;right:6vw}.heroButtons{flex-direction:column;align-items:flex-start}.vibes,.ruleCards,.leaders{grid-template-columns:1fr}.vibes div{border-right:0;border-bottom:1px solid var(--line)}.vibes div:last-child{border-bottom:0}.leader{min-height:auto}.eventCard{grid-template-columns:28px 35px 1fr}section{padding:90px 7vw}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* Mobile-safe hero art: never leave a broken-image box dominating the page. */
.heroArt.noPhoenix{display:none}
@media(max-width:800px){.heroArt{top:18%;height:58vh;width:90vw;right:-22vw;opacity:.34}.heroText{z-index:4}.heroSticker{z-index:5}}
@media(max-width:520px){.heroArt{top:22%;height:52vh;width:105vw;right:-30vw;opacity:.25}.heroSticker{z-index:5}}

/* Performance tuning for phones and tablets. Keep the visual style, remove GPU-heavy effects. */
@media(max-width:800px){
 body{transition:none;background:var(--bg)}
 .scrollGlow{display:block}
 header{backdrop-filter:none;-webkit-backdrop-filter:none;background:#0a0909f5}
 header.scrolled{box-shadow:none}
 .phoenix{filter:saturate(1.1) contrast(1.03) brightness(.9);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}
}


/* Lightweight continuous background */
html,body{background:transparent!important}
body{min-height:100vh}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:linear-gradient(180deg,#050506 0%,#080708 24%,#0d0809 48%,#150908 70%,#210a08 86%,#300d08 100%)}
.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}

/* Actual bottom-of-page fire: narrow flame shapes, gently drifting */
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%)}}

/* Blend phoenix artwork into the atmosphere */
.heroArt{-webkit-mask-image:radial-gradient(ellipse 68% 62% at 52% 48%,#000 35%,rgba(0,0,0,.92) 52%,rgba(0,0,0,.58) 68%,transparent 88%);mask-image:radial-gradient(ellipse 68% 62% at 52% 48%,#000 35%,rgba(0,0,0,.92) 52%,rgba(0,0,0,.58) 68%,transparent 88%)}
.phoenix{mix-blend-mode:screen!important;opacity:.62!important;filter:saturate(1.2) brightness(.78) drop-shadow(0 0 24px rgba(255,80,15,.25))!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){
 .heroArt{top:18%;height:58vh;width:90vw;right:-22vw;opacity:.34}
 .heroText{z-index:4}.heroSticker{z-index:5}
 .phoenix{opacity:.34!important;filter:saturate(1.1) brightness(.72) drop-shadow(0 0 18px rgba(255,80,15,.20))!important}
 .embers:before,.embers:after{width:3px;height:3px;left:12%;top:100vh}.embers:after{left:38%;top:100vh}
 footer:before{height:175px;filter:blur(6px)}
 footer:after{height:120px}
 header{backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media(max-width:520px){
 .heroArt{top:22%;height:52vh;width:105vw;right:-30vw;opacity:.25}
 .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}
}


/* Mobile overscroll fallback: never expose a white document background */
html{background:#050506!important}
body{background:#050506!important}

/* RF Online-inspired typography: tall, technical and lighter than the previous block font */
.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}
.hero h1,h2{font-weight:700;letter-spacing:-.035em;line-height:.82}
.hero h2{font-weight:600;letter-spacing:.10em}
.eventInfo h3,.leader h3,.ruleCards strong{font-weight:700}


/* Hero cleanup and stronger phoenix presence */
.heroArt{opacity:.92}
.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){.heroArt{opacity:.62}.phoenix{opacity:.58!important;filter:saturate(1.2) contrast(1.04) brightness(.88) drop-shadow(0 0 28px rgba(255,80,15,.28))!important}}

/* Serif display typography for major headers */
.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}
.hero h2{font-family:"Rajdhani",sans-serif!important;font-weight:600}


/* Phoenix reacts to page interaction */
.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;
  }
}


/* Warm edge glow that intensifies toward the footer */
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%);
  }
}


/* FROM THE ASHES display lettering — tall, condensed, heavy */
.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);
}
.hero h1 i,h2 i,.recruit h2 i{
  font-family:"Bebas Neue","Barlow Condensed",sans-serif!important;
  font-style:normal!important;
  color:#f4eee9!important;
  -webkit-text-stroke:0!important;
}
.rules h2,.about h2,.eventsSection h2,.leadership h2{
  font-family:"Bebas Neue","Barlow Condensed",sans-serif!important;
  font-weight:400!important;
}


/* Molten cracked texture inside the serif display letters */
.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 i,h2 i,.recruit h2 i{
  font-style:italic!important;
}


/* Header correction: preserve white words, texture only the former clear/outlined words */
.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{
  font-family:"Playfair Display",Georgia,serif!important;
  font-weight:800!important;
  font-style:italic!important;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  -webkit-text-stroke:1px rgba(255,235,220,.68)!important;
  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);
}


/* Closer match to the reference: high-contrast Bodoni/Didot-style serif */
.hero h1,h2,.recruit h2,
.rules h2,.about h2,.eventsSection h2,.leadership h2,
.hero h1 i,h2 i,.recruit h2 i{
  font-family:"Bodoni Moda","Didot","Bodoni MT",serif!important;
  font-optical-sizing:auto;
  font-weight:700!important;
  letter-spacing:-.055em!important;
  line-height:.78!important;
}
.hero h1 i,h2 i,.recruit h2 i{
  font-weight:700!important;
  font-style:italic!important;
}


/* Final retro-sci-fi display type: angular, compact, and logo-adjacent */
.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);
}
.hero h1 i,h2 i,.recruit h2 i{
  font-style:normal!important;
}


/* Guild crest in the site header */
.logo{display:flex;align-items:center;width:min(190px,24vw);height:56px;overflow:visible}
.logo img{display:block;width:100%;height:auto;max-height:56px;object-fit:contain;object-position:left center}
@media(max-width:800px){.logo{width:155px;height:52px}.logo img{max-height:52px}}
@media(max-width:520px){.logo{width:138px;height:48px}.logo img{max-height:48px}}


/* Exact custom display lettering reconstructed from the earlier approved font specimen */
.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{
  display:inline-block;
  height:1em;
  width:auto;
  overflow:visible;
  vertical-align:-.08em;
  color:inherit;
}
.displayFont i{color:inherit!important;font-style:normal!important}
.hero h1.displayFont{font-size:clamp(62px,10vw,142px);font-weight:400!important}
section h2.displayFont,.recruit h2.displayFont{font-size:clamp(58px,8.8vw,128px);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;mix-blend-mode:screen;filter:drop-shadow(0 0 8px rgba(255,90,20,.22))}
@media(max-width:800px){
  .logo{width:168px!important;height:54px!important}
  .hero h1.displayFont{font-size:clamp(52px,13vw,92px)}
  section h2.displayFont,.recruit h2.displayFont{font-size:clamp(50px,11vw,82px)}
}
@media(max-width:520px){
  .logo{width:145px!important;height:50px!important}
  .hero h1.displayFont{font-size:clamp(44px,14vw,70px)}
  section h2.displayFont,.recruit h2.displayFont{font-size:clamp(42px,12vw,66px)}
}


/* Final mobile hero cleanup */
.displayFont i{white-space:nowrap!important;display:inline-flex!important;flex-wrap:nowrap!important}
.hero h1.displayFont{white-space:nowrap!important}
@media(max-width:800px){
  .hero{min-height:760px;align-items:flex-start;padding-top:145px;padding-bottom:70px}
  .heroText{width:100%;max-width:none}
  .hero h1.displayFont{font-size:clamp(48px,14.5vw,76px)!important;line-height:.82!important;margin:22px 0 22px!important}
  .hero h1.displayFont i{font-size:.92em!important}
  .hero h2{font-size:20px!important;margin-bottom:16px!important}
  .hero p{font-size:15px!important;line-height:1.65!important;max-width:560px}
  .heroArt{top:250px!important;right:-32vw!important;width:108vw!important;height:510px!important;opacity:.28!important;z-index:1!important}
  .heroText{z-index:3}
  .logo{width:180px!important;height:58px!important}
  .logo img{height:58px!important}
}
@media(max-width:520px){
  .hero{min-height:760px;padding:135px 7vw 60px!important}
  .hero h1.displayFont{font-size:clamp(47px,14.2vw,64px)!important}
  .hero h1.displayFont i{font-size:.9em!important}
  .heroArt{top:275px!important;right:-40vw!important;width:118vw!important;height:470px!important;opacity:.22!important}
  .logo{width:170px!important;height:56px!important}
  .logo img{height:56px!important}
}


/* Legibility pass: keep the custom angular alphabet, but size it like display type rather than a full-width logo */
.displayFont{max-width:100%;overflow:visible!important}
.displayFont i{display:block!important;white-space:normal!important}
.hero h1.displayFont{white-space:normal!important}
@media(max-width:800px){
  .hero h1.displayFont{font-size:clamp(42px,12vw,62px)!important;line-height:.88!important}
  section h2.displayFont,.recruit h2.displayFont{font-size:clamp(38px,10vw,58px)!important;line-height:.9!important}
  .eventInfo h3.displayFont,.leader h3.displayFont,.ruleCards strong.displayFont{font-size:clamp(28px,8vw,42px)!important}
}
@media(max-width:520px){
  .hero h1.displayFont{font-size:clamp(40px,11.5vw,52px)!important}
  section h2.displayFont,.recruit h2.displayFont{font-size:clamp(36px,9.5vw,50px)!important}
  .eventInfo h3.displayFont,.leader h3.displayFont,.ruleCards strong.displayFont{font-size:clamp(26px,7.5vw,36px)!important}
}


/* Final sizing correction: the custom display alphabet is intentionally compact */
@media(max-width:800px){
  section h2.displayFont,.recruit h2.displayFont{
    font-size:40px!important;
    line-height:.9!important;
    letter-spacing:-.01em!important;
  }
  .eventInfo h3.displayFont,.leader h3.displayFont,.ruleCards strong.displayFont{
    font-size:28px!important;
    line-height:.92!important;
  }
}
@media(max-width:520px){
  section h2.displayFont,.recruit h2.displayFont{
    font-size:36px!important;
  }
  .eventInfo h3.displayFont,.leader h3.displayFont,.ruleCards strong.displayFont{
    font-size:26px!important;
  }
}


/* Full-page typography and overflow polish */
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){
  section{padding:82px 7vw}
  .hero{min-height:760px;padding:135px 7vw 65px!important}
  .heroText{width:100%;max-width:620px}
  .hero h1.displayFont{font-size:clamp(52px,13vw,76px)!important;line-height:.84!important}
  section h2.displayFont,.recruit h2.displayFont{font-size:clamp(48px,10.5vw,68px)!important;line-height:.9!important}
  .eventInfo h3.displayFont,.leader h3.displayFont,.ruleCards strong.displayFont{font-size:clamp(25px,7vw,34px)!important}
  .hero h2{font-size:20px!important;line-height:1.15!important}
  .hero p,.copy,.recruit>p{font-size:15px!important;line-height:1.7!important}
  .lead{font-size:19px!important}
  .vibes strong{font-size:19px}
  .eventInfo p,.leader p,.ruleCards p{font-size:13px}
  .intro,.sectionHead{gap:35px}
  .eventCards{gap:14px}
  .eventCard{padding:20px 17px}
  .stickyNote{padding:18px 22px}
  .stickyNote strong{font-size:38px}
  .ruleCards{gap:12px}
}
@media(max-width:520px){
  section{padding:76px 7vw}
  .hero{min-height:720px;padding:128px 7vw 55px!important}
  .hero h1.displayFont{font-size:clamp(46px,12vw,60px)!important}
  section h2.displayFont,.recruit h2.displayFont{font-size:clamp(40px,9.5vw,54px)!important}
  .eventInfo h3.displayFont,.leader h3.displayFont,.ruleCards strong.displayFont{font-size:26px!important}
  .hero h2{font-size:18px!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{padding:21px 18px;min-height:0}
  .ruleBanner{font-size:10px;line-height:1.6}
  .heroButtons{gap:10px}
}


/* =========================================================
   DEVICE-SPECIFIC LAYOUTS
   Desktop and phone are intentionally different compositions.
   ========================================================= */

/* ---------- DESKTOP / COMPUTER ---------- */
@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}
}

/* ---------- PHONE ---------- */
@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;
  }
  header .discord{
    padding:12px 17px!important;
    font-size:12px!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;
  }
}

/* ---------- SMALL PHONE ---------- */
@media(max-width:520px){
  header .discord{
    padding:11px 14px!important;
  }
  .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}
}


/* Device class overrides: handles mobile browsers reporting desktop-width viewports */
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}
html.device-phone section{padding:78px 7vw!important}
html.device-phone .intro,html.device-phone .sectionHead{display:block!important}
html.device-phone section h2.displayFont,html.device-phone .recruit h2.displayFont{font-size:clamp(42px,10vw,56px)!important;line-height:.9!important}
html.device-phone .eventCards,html.device-phone .leaders{display:grid!important;grid-template-columns:1fr!important;gap:14px!important}
html.device-phone .ruleCards{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important}
html.device-phone .eventCard{display:grid!important;grid-template-columns:26px 34px minmax(0,1fr)!important;gap:10px!important}
html.device-phone .leaders{gap:12px!important}
html.device-phone .leader{min-height:0!important;padding:21px 17px!important}
html.device-phone .vibes{display:grid!important;grid-template-columns:1fr 1fr!important}
html.device-phone .eventInfo h3.displayFont{font-size:27px!important}
html.device-phone .leader h3.displayFont{font-size:31px!important}
html.device-phone .ruleCards strong.displayFont{font-size:25px!important}
@media(max-width:520px){
 html.device-phone .logo{width:155px!important;height:52px!important}
 html.device-phone .hero{min-height:700px!important}
 html.device-phone .heroText{padding-top:62px}
 html.device-phone .hero h1.displayFont{font-size:clamp(43px,11.5vw,56px)!important}
 html.device-phone section{padding:70px 7vw!important}
 html.device-phone section h2.displayFont,html.device-phone .recruit h2.displayFont{font-size:clamp(38px,9.2vw,50px)!important}
 html.device-phone .vibes,html.device-phone .ruleCards{grid-template-columns:1fr!important}
}

/* =========================================================
   FINAL SERIF TYPOGRAPHY
   Clean, readable serif display with off-white + orange accents.
   ========================================================= */
body{font-family:"Space Grotesk",sans-serif!important;color:#f3eee8!important}
.hero h1,h2,.recruit h2,.rules h2,.about h2,.eventsSection h2,.leadership h2{
  font-family:"Bodoni Moda","Playfair Display",Georgia,serif!important;
  font-weight:600!important;
  font-style:normal!important;
  letter-spacing:-.035em!important;
  line-height:.9!important;
  color:#f3eee8!important;
  -webkit-text-fill-color:#f3eee8!important;
  -webkit-text-stroke:0!important;
  background:none!important;
  text-shadow:0 0 20px rgba(255,92,24,.08);
}
.hero h1 i,h2 i,.recruit h2 i{
  font-family:"Bodoni Moda","Playfair Display",Georgia,serif!important;
  font-style:italic!important;
  font-weight:600!important;
  color:#ff6a28!important;
  -webkit-text-fill-color:#ff6a28!important;
  -webkit-text-stroke:0!important;
}
.hero h1{font-size:clamp(70px,9vw,132px)!important;line-height:.84!important}
section h2,.recruit h2{font-size:clamp(56px,7vw,104px)!important;line-height:.88!important}
.hero h2{
  font-family:"Rajdhani",sans-serif!important;
  color:#ffc46e!important;
  font-weight:600!important;
  letter-spacing:.1em!important;
}
.eventInfo h3,.leader h3,.ruleCards strong{
  font-family:"Bodoni Moda","Playfair Display",Georgia,serif!important;
  font-weight:600!important;
  color:#f3eee8!important;
  line-height:1!important;
}
.logo img{
  mix-blend-mode:normal!important;
  filter:drop-shadow(0 0 8px rgba(255,106,40,.20))!important;
}
.displayGlyph{display:none!important}

@media(max-width:800px){
  .hero h1{font-size:clamp(48px,13vw,70px)!important;line-height:.88!important}
  section h2,.recruit h2{font-size:clamp(42px,10vw,58px)!important;line-height:.92!important}
  .eventInfo h3,.leader h3,.ruleCards strong{font-size:clamp(24px,7vw,32px)!important}
}
@media(max-width:520px){
  .hero h1{font-size:clamp(44px,12vw,58px)!important}
  section h2,.recruit h2{font-size:clamp(38px,9vw,50px)!important}
  .eventInfo h3,.leader h3,.ruleCards strong{font-size:25px!important}
}


/* Leadership rank crowns */
.leaderRole{display:flex!important;align-items:center!important;gap:7px!important;min-height:25px}
.rankCrown{display:inline-block!important;width:22px!important;height:18px!important;object-fit:contain!important;object-position:center!important;flex:0 0 22px!important;vertical-align:middle!important;filter:drop-shadow(0 0 4px rgba(255,120,30,.25))}
.gmCrown{filter:drop-shadow(0 0 5px rgba(255,168,42,.38))!important}
.viceCrown{filter:drop-shadow(0 0 5px rgba(70,165,255,.32))!important}
.leader:hover .gmCrown{filter:drop-shadow(0 0 8px rgba(255,168,42,.65))!important}
.leader:hover .viceCrown{filter:drop-shadow(0 0 8px rgba(70,165,255,.58))!important}
@media(max-width:520px){
  .leaderRole{gap:6px!important}
  .rankCrown{width:20px!important;height:17px!important;flex-basis:20px!important}
}


/* Roster + signup */
.rosterSection,.signupSection{background:transparent}
.rosterHead,.signupHead{align-items:start}
.rosterIntro,.signupIntro{align-self:center;max-width:620px;color:#aaa0a0;line-height:1.75}
.rosterIntro p,.signupIntro>p{margin:0 0 18px}
.rosterCount{font:700 11px "Rajdhani",sans-serif;letter-spacing:.14em;color:var(--orange)}
.rosterList{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:45px}
.rosterMember{background:var(--card);border:1px solid var(--line);padding:20px 18px;min-height:105px;position:relative}
.rosterMember:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--orange);opacity:.7}
.rosterMemberName{font:800 24px "Playfair Display",Georgia,serif;color:var(--text);margin:0 0 6px}
.rosterMemberDiscord{font:600 11px "Rajdhani",sans-serif;letter-spacing:.08em;color:#80777a}
.rosterEmpty{grid-column:1/-1;border:1px dashed #5a4648;padding:28px;color:#81777a;font:700 12px "Rajdhani",sans-serif;letter-spacing:.1em;text-align:center}
.signupForm{display:grid;gap:13px}
.signupForm label{display:grid;gap:6px;color:#d8cfca;font:700 11px "Rajdhani",sans-serif;letter-spacing:.11em}
.signupForm label span{color:#776d70;font-weight:500}
.signupForm input{width:100%;padding:13px 14px;border:1px solid var(--line);background:#0d0b0d;color:var(--text);font:500 14px "Space Grotesk",sans-serif;outline:none}
.signupForm input:focus{border-color:#ff6425aa;box-shadow:0 0 0 2px #ff64251c}
.signupForm button{justify-self:start;border:0;cursor:pointer;margin-top:4px}
.formStatus{min-height:18px;margin:0;color:var(--gold);font-size:12px}
.formStatus.error{color:#ff8d7b}
.formStatus.success{color:#b9e890}
@media(max-width:1050px){.rosterList{grid-template-columns:repeat(3,1fr)}}
@media(max-width:800px){.rosterList{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.rosterList{grid-template-columns:1fr}.rosterMember{min-height:auto}}

.accountLinks{display:flex;align-items:center;gap:14px;margin-left:auto}.accountLinks a{color:#d8cfca;text-decoration:none;font:700 11px "Rajdhani",sans-serif;letter-spacing:.1em}.accountLinks a:first-child{color:var(--gold)}.accountLinks a:hover{color:var(--orange)}@media(max-width:800px){.accountLinks{gap:8px}.accountLinks a{font-size:10px}}


/* Mobile header: compact account links with breathing room before Discord */
@media(max-width:800px){
  header .accountLinks{
    gap:7px!important;
    margin-left:auto!important;
    margin-right:12px!important;
  }
  header .accountLinks a{
    font-size:9px!important;
    letter-spacing:.09em!important;
    white-space:nowrap!important;
  }
  header .discord{
    margin-left:0!important;
    padding:11px 14px!important;
    font-size:11px!important;
    white-space:nowrap!important;
  }
}
@media(max-width:520px){
  header .accountLinks{
    gap:6px!important;
    margin-right:10px!important;
  }
  header .accountLinks a{
    font-size:8.5px!important;
    letter-spacing:.08em!important;
  }
  header .discord{
    padding:10px 12px!important;
    font-size:10px!important;
  }
}


.accountLinks .signedInIdentity{color:var(--gold);font-weight:800}.headerLogout{border:0;background:none;color:#d8cfca;padding:0;font:700 11px "Rajdhani",sans-serif;letter-spacing:.1em;cursor:pointer}.headerLogout:hover{color:var(--orange)}
@media(max-width:800px){header .accountLinks{gap:8px!important}.accountLinks .signedInIdentity{max-width:150px;overflow:hidden;text-overflow:ellipsis}.headerLogout{font-size:9px;letter-spacing:.08em;white-space:nowrap}}
@media(max-width:520px){.accountLinks .signedInIdentity{max-width:105px}.headerLogout{font-size:8.5px}}


/* Signed-in account menu */
.accountLinks{position:relative;display:flex;align-items:center;justify-content:flex-end;min-width:0}
.accountSignedOut{display:flex;align-items:center;gap:14px}.accountSignedOut[hidden]{display:none!important}
.accountMenu{position:relative}
.accountMenuTrigger{display:flex;align-items:center;gap:7px;border:0;background:none;color:var(--gold);padding:8px 0;font:800 11px "Rajdhani",sans-serif;letter-spacing:.09em;cursor:pointer;text-transform:uppercase}
.accountMenuTrigger:hover{color:#fff}
.accountMenuChevron{font-size:15px;line-height:.6;color:var(--orange);transition:transform .2s}
.accountMenuTrigger[aria-expanded="true"] .accountMenuChevron{transform:rotate(180deg)}
.accountDropdown{position:absolute;right:0;top:calc(100% + 9px);min-width:145px;background:#100d0f;border:1px solid #3b2b2e;box-shadow:0 18px 45px #000b;padding:6px;display:grid;z-index:20}
.accountDropdown[hidden],.accountMenu[hidden]{display:none!important}
.accountDropdown a,.accountDropdown button{display:block;width:100%;border:0;background:none;color:#d8cfca;padding:10px 11px;text-align:left;text-decoration:none;font:800 11px "Rajdhani",sans-serif;letter-spacing:.09em;cursor:pointer}
.accountDropdown a:hover,.accountDropdown button:hover{background:#21191c;color:var(--gold)}
.accountDropdown button{border-top:1px solid #30282b;margin-top:3px}
@media(max-width:800px){
 header .accountLinks{min-width:0}
 .accountSignedOut{gap:8px}
 .accountMenuTrigger{font-size:10px}
 .accountDropdown{right:-4px}
}
@media(max-width:520px){
 .accountMenuTrigger{font-size:9px;max-width:120px}
 .accountMenuTrigger #accountMenuName{max-width:85px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}


/* Phoenix portal masthead + volcanic Discord buttons */
.adminHeader{
  height:118px!important;
  padding:0 6vw!important;
  background:
    linear-gradient(180deg,rgba(5,5,6,.40),rgba(5,5,6,.88)),
    url("phoenix.jpeg") center 44%/cover no-repeat!important;
  border-bottom:1px solid #ff64255c!important;
  box-shadow:0 10px 35px #0009;
  overflow:hidden;
}
.adminHeader:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.60),transparent 42%,rgba(0,0,0,.30));
}
.adminHeader .logo,.adminHeaderRight{position:relative;z-index:2}
.adminHeader .logo{display:flex;align-items:center}
.adminHeader .logo img{
  display:block;width:min(350px,28vw);height:auto;max-height:82px;object-fit:contain;
  filter:drop-shadow(0 3px 9px #000) drop-shadow(0 0 10px #ff642533);
}
.discordAuthBtn{
  position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:16px!important;
  overflow:hidden!important;
  min-height:72px!important;
  color:#f8f1eb!important;
  background:
    linear-gradient(90deg,rgba(7,6,7,.86),rgba(20,10,7,.48),rgba(7,6,7,.86)),
    url("phoenix.jpeg") center bottom/cover no-repeat!important;
  border:1px solid #ff64256b!important;
  box-shadow:6px 6px 0 #3b1b10, inset 0 0 30px #ff642518!important;
  text-shadow:0 2px 4px #000;
}
.discordAuthBtn:before{
  content:"";width:58px;height:58px;flex:0 0 58px;
  background:
    linear-gradient(145deg,rgba(255,132,42,.22),rgba(0,0,0,.18)),
    url("phoenix.jpeg") center bottom/cover no-repeat;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20.222 0c1.406 0 2.54 1.137 2.607 2.475V24l-2.677-2.273-1.47-1.338-1.604-1.398.67 2.205H3.71c-1.402 0-2.54-1.065-2.54-2.476V2.48C1.17 1.142 2.31.003 3.715.003h16.5L20.222 0zm-6.118 5.683h-.03l-.202.2c2.073.6 3.076 1.537 3.076 1.537-1.336-.668-2.54-1.002-3.744-1.137-.87-.135-1.74-.064-2.475 0h-.2c-.47 0-1.47.2-2.81.735-.467.203-.735.336-.735.336s1.002-1.002 3.21-1.537l-.135-.135s-1.672-.064-3.477 1.27c0 0-1.805 3.144-1.805 7.02 0 0 1 1.74 3.743 1.806 0 0 .4-.533.805-1.002-1.54-.468-2.14-1.404-2.14-1.404s.134.066.335.2h.06c.03 0 .044.015.06.03v.006c.016.016.03.03.06.03.33.136.66.27.93.4.466.202 1.065.403 1.8.536.93.135 1.996.2 3.21 0 .6-.135 1.2-.267 1.8-.535.39-.2.87-.4 1.397-.737 0 0-.6.936-2.205 1.404.33.466.795 1 .795 1 2.744-.06 3.81-1.8 3.87-1.726 0-3.87-1.815-7.02-1.815-7.02-1.635-1.214-3.165-1.26-3.435-1.26l.056-.02zm.168 4.413c.703 0 1.27.6 1.27 1.335 0 .74-.57 1.34-1.27 1.34-.7 0-1.27-.6-1.27-1.334.002-.74.573-1.338 1.27-1.338zm-4.543 0c.7 0 1.266.6 1.266 1.335 0 .74-.57 1.34-1.27 1.34-.7 0-1.27-.6-1.27-1.334 0-.74.57-1.338 1.27-1.338z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20.222 0c1.406 0 2.54 1.137 2.607 2.475V24l-2.677-2.273-1.47-1.338-1.604-1.398.67 2.205H3.71c-1.402 0-2.54-1.065-2.54-2.476V2.48C1.17 1.142 2.31.003 3.715.003h16.5L20.222 0zm-6.118 5.683h-.03l-.202.2c2.073.6 3.076 1.537 3.076 1.537-1.336-.668-2.54-1.002-3.744-1.137-.87-.135-1.74-.064-2.475 0h-.2c-.47 0-1.47.2-2.81.735-.467.203-.735.336-.735.336s1.002-1.002 3.21-1.537l-.135-.135s-1.672-.064-3.477 1.27c0 0-1.805 3.144-1.805 7.02 0 0 1 1.74 3.743 1.806 0 0 .4-.533.805-1.002-1.54-.468-2.14-1.404-2.14-1.404s.134.066.335.2h.06c.03 0 .044.015.06.03v.006c.016.016.03.03.06.03.33.136.66.27.93.4.466.202 1.065.403 1.8.536.93.135 1.996.2 3.21 0 .6-.135 1.2-.267 1.8-.535.39-.2.87-.4 1.397-.737 0 0-.6.936-2.205 1.404.33.466.795 1 .795 1 2.744-.06 3.81-1.8 3.87-1.726 0-3.87-1.815-7.02-1.815-7.02-1.635-1.214-3.165-1.26-3.435-1.26l.056-.02zm.168 4.413c.703 0 1.27.6 1.27 1.335 0 .74-.57 1.34-1.27 1.34-.7 0-1.27-.6-1.27-1.334.002-.74.573-1.338 1.27-1.338zm-4.543 0c.7 0 1.266.6 1.266 1.335 0 .74-.57 1.34-1.27 1.34-.7 0-1.27-.6-1.27-1.334 0-.74.57-1.338 1.27-1.338z'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 0 7px #ff6425aa);
}
.discordAuthBtn:hover{
  background:
    linear-gradient(90deg,rgba(7,6,7,.70),rgba(30,12,6,.30),rgba(7,6,7,.70)),
    url("phoenix.jpeg") center bottom/cover no-repeat!important;
  border-color:#ff9b58!important;
  box-shadow:8px 8px 0 #3b1b10,0 0 28px #ff642544,inset 0 0 34px #ff642522!important;
}
@media(max-width:800px){
 .adminHeader{height:88px!important;padding:0 6vw!important;background-position:66% 44%!important}
 .adminHeader .logo img{width:min(220px,48vw);max-height:60px}
 .discordAuthBtn{min-height:62px!important;gap:11px!important}
 .discordAuthBtn:before{width:48px;height:48px;flex-basis:48px}
}


/* Final portal header correction */
.adminHeader{
  height:82px!important;
  min-height:82px!important;
  overflow:visible!important;
  z-index:50!important;
  background-position:center 48%!important;
  background-size:cover!important;
}
.adminHeader:after{z-index:0!important;pointer-events:none!important}
.adminHeader .logo,.adminHeaderRight{position:relative;z-index:3!important}
.adminHeaderRight{position:relative;z-index:10!important}
.adminAccountMenu,.adminAccountDropdown{z-index:20!important}
.adminAccountDropdown{position:absolute!important}
@media(max-width:800px){
  .adminHeader{height:76px!important;min-height:76px!important;background-position:center 48%!important}
}