:root{
  --void:#0B0705;
  --ember-panel:#150D08;
  --ember:#B3241B;
  --fire:#E8641C;
  --gold:#C9A24B;
  --smoke:#8A8378;
  --parch:#E9DEC7;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--void);
  color:var(--parch);
  font-family:'Crimson Text', serif;
  overflow-x:hidden;
  min-height:100vh;
  display:flex; flex-direction:column;
}
::selection{background:var(--ember); color:var(--parch);}

/* ambient ember particles */
.embers{position:fixed; inset:0; pointer-events:none; z-index:1; overflow:hidden;}
.ember-dot{
  position:absolute; bottom:-10px; width:3px; height:3px; border-radius:50%;
  background:var(--fire); box-shadow:0 0 6px 2px var(--fire);
  animation:rise linear infinite;
  opacity:0.7;
}
@keyframes rise{
  0%{transform:translateY(0) translateX(0); opacity:0;}
  10%{opacity:0.8;}
  100%{transform:translateY(-110vh) translateX(20px); opacity:0;}
}

/* NAV */
nav{
  position:sticky; top:0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 6vw;
  background:rgba(11,7,5,0.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(201,162,75,0.2);
}
.brand{
  font-family:'Cinzel Decorative', serif;
  font-size:1.3rem;
  letter-spacing:2px;
  color:var(--gold);
  text-shadow:0 0 12px rgba(232,100,28,0.4);
  text-decoration:none;
}
.brand span{color:var(--ember);}
.navlinks{display:flex; gap:2.2rem; font-family:'Cinzel',serif; font-size:0.72rem; letter-spacing:2px; text-transform:uppercase;}
.navlinks a{color:var(--smoke); text-decoration:none; position:relative; transition:color .3s; padding-bottom:4px;}
.navlinks a:hover, .navlinks a.active{color:var(--fire);}
.navlinks a.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px;
  background:linear-gradient(90deg,var(--ember),var(--fire));
}
.menu-toggle{display:none; color:var(--gold); font-size:1.4rem; background:none; border:none; cursor:pointer;}

@media(max-width:780px){
  .navlinks{
    position:fixed; top:64px; left:0; right:0; z-index:49;
    flex-direction:column; gap:0; background:rgba(11,7,5,0.97);
    border-bottom:1px solid rgba(201,162,75,0.2);
    max-height:0; overflow:hidden; transition:max-height .35s ease;
  }
  .navlinks.open{max-height:300px;}
  .navlinks a{padding:1.1rem 6vw; border-bottom:1px solid rgba(201,162,75,0.08);}
  .navlinks a.active::after{display:none;}
  .navlinks a.active{color:var(--fire); background:rgba(179,36,27,0.08);}
  .menu-toggle{display:block;}
}

/* PAGE HERO (smaller, for inner pages) */
.page-hero{
  position:relative; padding:8vh 6vw 5vh; text-align:center;
  background:
    radial-gradient(ellipse 60% 60% at 50% 0%, rgba(179,36,27,0.25), transparent 70%),
    var(--void);
}
.eyebrow{
  font-family:'JetBrains Mono',monospace; font-size:0.7rem; letter-spacing:4px;
  color:var(--smoke); text-transform:uppercase; margin-bottom:1.2rem;
  display:flex; align-items:center; gap:10px; justify-content:center;
}
.eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--fire); box-shadow:0 0 8px var(--fire); animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:0.3;}}
.page-hero h1{
  font-family:'Cinzel Decorative', serif;
  font-size:clamp(2.2rem, 6vw, 3.8rem);
  font-weight:900;
  background:linear-gradient(180deg, var(--gold) 0%, var(--fire) 55%, var(--ember) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  letter-spacing:1px;
}
.page-hero .sub{
  font-family:'Crimson Text',serif; font-style:italic; font-size:1.1rem;
  color:var(--smoke); margin-top:1rem; max-width:560px; margin-left:auto; margin-right:auto;
}

/* HOME HERO (full) */
.hero{
  position:relative; min-height:92vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:6vh 6vw;
  background:
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(179,36,27,0.35), transparent 70%),
    radial-gradient(ellipse 40% 30% at 50% 15%, rgba(232,100,28,0.18), transparent 70%),
    var(--void);
  overflow:hidden;
}
.hero h1{
  font-family:'Cinzel Decorative', serif;
  font-size:clamp(2.8rem, 9vw, 6.5rem);
  font-weight:900;
  line-height:0.95;
  background:linear-gradient(180deg, var(--gold) 0%, var(--fire) 55%, var(--ember) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 60px rgba(232,100,28,0.3);
  letter-spacing:2px;
}
.hero .sub{
  font-family:'Crimson Text',serif; font-style:italic; font-size:1.3rem;
  color:var(--parch); opacity:0.85; margin-top:1.4rem; max-width:520px;
}
.hero .tagline{
  font-family:'Cinzel',serif; font-size:0.85rem; letter-spacing:5px; text-transform:uppercase;
  color:var(--ember); margin-top:2rem;
}

/* PORTAL ARCH — signature element */
.portal-wrap{margin-top:3.5rem; display:flex; justify-content:center;}
.portal{width:180px; height:230px; position:relative;}
.portal svg{width:100%; height:100%; filter:drop-shadow(0 0 25px rgba(232,100,28,0.5));}
.portal.small{width:90px; height:115px; margin:0 auto 1.5rem;}

.cta-row{display:flex; gap:1rem; margin-top:2.8rem; flex-wrap:wrap; justify-content:center;}
.btn{
  font-family:'Cinzel',serif; font-size:0.75rem; letter-spacing:2px; text-transform:uppercase;
  padding:14px 30px; text-decoration:none; border-radius:2px; transition:all .3s;
  display:inline-block; border:none; cursor:pointer;
}
.btn-primary{
  background:linear-gradient(135deg,var(--ember),var(--fire));
  color:var(--void); font-weight:700; box-shadow:0 4px 20px rgba(179,36,27,0.4);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 8px 30px rgba(232,100,28,0.6);}
.btn-ghost{
  border:1px solid rgba(201,162,75,0.4); color:var(--gold); background:none;
}
.btn-ghost:hover{border-color:var(--gold); background:rgba(201,162,75,0.08);}

/* SECTION DIVIDER */
.divider{
  display:flex; align-items:center; gap:16px; margin:0 auto; max-width:400px; padding:4rem 6vw 2rem;
}
.divider .line{flex:1; height:1px; background:linear-gradient(90deg,transparent,rgba(201,162,75,0.5),transparent);}
.divider .glyph{color:var(--gold); font-size:1.2rem;}

main{flex:1;}
section{position:relative; z-index:2; padding:2rem 6vw 6rem;}
.section-head{text-align:center; max-width:640px; margin:0 auto 3.5rem;}
.section-head .eyebrow{justify-content:center;}
.section-head h2{
  font-family:'Cinzel',serif; font-size:clamp(1.8rem,4vw,2.6rem); color:var(--parch); font-weight:700; letter-spacing:1px;
}
.section-head p{color:var(--smoke); margin-top:1rem; font-size:1.05rem; line-height:1.6;}

/* INTRO TEXT BLOCK */
.intro{max-width:720px; margin:0 auto; text-align:center; line-height:1.8; font-size:1.15rem; color:#cfc4ad;}
.intro strong{color:var(--fire); font-weight:600;}

/* COMMANDMENTS ACCORDION */
.commandments{max-width:780px; margin:0 auto; display:flex; flex-direction:column; gap:1px;}
.cmd{
  border:1px solid rgba(201,162,75,0.15); background:linear-gradient(180deg, rgba(21,13,8,0.6), rgba(11,7,5,0.6));
  margin-top:-1px; cursor:pointer; transition:background .3s;
}
.cmd:hover{background:rgba(179,36,27,0.08);}
.cmd-head{
  display:flex; align-items:center; gap:1.4rem; padding:1.3rem 1.5rem;
}
.cmd-num{
  font-family:'Cinzel Decorative',serif; font-size:1.4rem; color:var(--ember);
  min-width:2.4rem; text-align:center; opacity:0.85;
}
.cmd-title{
  font-family:'Cinzel',serif; font-size:0.95rem; letter-spacing:0.5px; color:var(--parch); flex:1;
}
.cmd-icon{color:var(--gold); font-size:0.8rem; transition:transform .3s;}
.cmd.open .cmd-icon{transform:rotate(45deg);}
.cmd-body{
  max-height:0; overflow:hidden; transition:max-height .4s ease, padding .4s ease;
  padding:0 1.5rem 0 4.2rem; color:var(--smoke); font-style:italic; line-height:1.7;
}
.cmd.open .cmd-body{max-height:120px; padding-bottom:1.4rem;}

/* CREDO */
.credo{
  max-width:600px; margin:5rem auto 0; text-align:center; padding:3rem 2rem;
  border-top:1px solid rgba(201,162,75,0.2); border-bottom:1px solid rgba(201,162,75,0.2);
  position:relative;
}
.credo .mark{font-family:'Cinzel Decorative',serif; font-size:2rem; color:var(--ember); display:block; margin-bottom:1rem;}
.credo p{font-style:italic; font-size:1.2rem; line-height:1.7; color:var(--parch);}
.credo cite{display:block; margin-top:1.2rem; font-family:'Cinzel',serif; font-style:normal; font-size:0.7rem; letter-spacing:3px; color:var(--smoke); text-transform:uppercase;}

/* CARDS (team) */
.card-grid{
  max-width:1000px; margin:0 auto; display:grid; gap:1.6rem;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
}
.card{
  border:1px solid rgba(201,162,75,0.15);
  background:linear-gradient(180deg, rgba(21,13,8,0.7), rgba(11,7,5,0.7));
  padding:2rem 1.6rem; text-align:center; transition:transform .3s, border-color .3s;
}
.card:hover{transform:translateY(-4px); border-color:rgba(232,100,28,0.4);}
.card .avatar{
  width:64px; height:64px; margin:0 auto 1.2rem; border-radius:50%;
  background:linear-gradient(135deg,var(--ember),var(--fire));
  display:flex; align-items:center; justify-content:center;
  font-family:'Cinzel Decorative',serif; font-size:1.4rem; color:var(--void); font-weight:900;
  overflow:hidden;
}
.card .avatar img{
  width:100%; height:100%; object-fit:cover; border-radius:50%;
  display:block;
}
.card .nick{font-family:'Cinzel',serif; font-size:1.05rem; color:var(--parch); letter-spacing:0.5px;}
.card .role{
  font-family:'JetBrains Mono',monospace; font-size:0.68rem; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--fire); margin-top:0.4rem;
}
.card .since{font-size:0.8rem; color:var(--smoke); margin-top:0.8rem; font-family:'JetBrains Mono',monospace;}
.card .bio{margin-top:1rem; font-style:italic; font-size:0.95rem; color:#cfc4ad; line-height:1.6;}

/* STAT CARDS */
.stat-grid{
  max-width:1000px; margin:0 auto; display:grid; gap:1.4rem;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
}
.stat-card{
  border:1px solid rgba(201,162,75,0.15);
  background:linear-gradient(180deg, rgba(21,13,8,0.7), rgba(11,7,5,0.7));
  padding:1.8rem; text-align:center;
}
.stat-card .num{
  font-family:'Cinzel Decorative',serif; font-size:2.4rem; font-weight:900;
  background:linear-gradient(180deg,var(--gold),var(--fire));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat-card .label{
  font-family:'JetBrains Mono',monospace; font-size:0.7rem; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--smoke); margin-top:0.6rem;
}

.placeholder-panel{
  max-width:900px; margin:0 auto; border:1px dashed rgba(201,162,75,0.3);
  padding:3rem 2rem; text-align:center; background:rgba(21,13,8,0.4);
}
.placeholder-panel .glyph{font-size:1.8rem; color:var(--gold); margin-bottom:1rem; display:block;}
.placeholder-panel h3{font-family:'Cinzel',serif; color:var(--parch); font-size:1.2rem; letter-spacing:1px; margin-bottom:0.8rem;}
.placeholder-panel p{color:var(--smoke); line-height:1.7; max-width:500px; margin:0 auto;}

/* RADIO / CHAT LAYOUT */
.split-panel{
  max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1.3fr 1fr; gap:1.6rem;
}
@media(max-width:900px){ .split-panel{grid-template-columns:1fr;} }
.panel-box{
  border:1px solid rgba(201,162,75,0.15); background:rgba(21,13,8,0.5);
  min-height:420px; display:flex; flex-direction:column;
}
.panel-box .panel-title{
  padding:1rem 1.4rem; border-bottom:1px solid rgba(201,162,75,0.15);
  font-family:'Cinzel',serif; font-size:0.8rem; letter-spacing:2px; text-transform:uppercase; color:var(--gold);
  display:flex; align-items:center; gap:10px;
}
.panel-box .panel-title .dot{width:6px; height:6px; border-radius:50%; background:var(--fire); box-shadow:0 0 8px var(--fire);}
.panel-box .panel-body{flex:1; display:flex; align-items:center; justify-content:center; padding:2rem; text-align:center; color:var(--smoke); font-style:italic;}

footer{
  text-align:center; padding:3rem 6vw; border-top:1px solid rgba(201,162,75,0.15);
  color:var(--smoke); font-family:'JetBrains Mono',monospace; font-size:0.75rem; letter-spacing:1px;
}
footer .server{color:var(--fire); margin-top:0.6rem; display:block;}

@media(max-width:640px){
  .cmd-title{font-size:0.85rem;}
}