*,*::before,*::after{box-sizing:border-box}
html{color-scheme:dark}
body{
margin:0;
background:#120d0d;
color:#d8cfc4;
font:1rem/1.6 Georgia,serif;
overflow-x:hidden;
}
main{max-width:56rem;margin:0 auto;padding:2rem 1rem 4rem}
header{display:flex;justify-content:center}
.logo{
width:min(70vw,26rem);
height:auto;
display:block;
-webkit-mask-image:radial-gradient(ellipse at center,#000 64%,rgba(0,0,0,.96) 70%,rgba(0,0,0,.72) 82%,rgba(0,0,0,.18) 96%,transparent 100%);
mask-image:radial-gradient(ellipse at center,#000 64%,rgba(0,0,0,.96) 70%,rgba(0,0,0,.72) 82%,rgba(0,0,0,.18) 96%,transparent 100%);
}
section{max-width:38rem;margin:2.5rem auto 0}
p{margin:.6em 0}
.guildname{color:#ec190e;font-style:italic;letter-spacing:.02em}
.links{display:flex;justify-content:center;gap:2em;margin-top:2rem;flex-wrap:wrap}
.links a{display:inline-flex;align-items:center;gap:.5em;color:#e0a458;text-decoration:none;transition:color .2s}
.links a:hover{color:#f0c078}
.links img{border-radius:3px}
.gallery{margin-top:3.5rem}
.gallery h2{text-align:center;font-size:1.6rem;letter-spacing:.08em;text-transform:uppercase;color:#ec190e;margin:0 0 1.2rem;font-weight:normal}
.gallery h2::after{content:"";display:block;width:3rem;height:1px;background:rgba(236,25,14,.4);margin:.5rem auto 0}
.gallery h3{font-size:1.1rem;letter-spacing:.05em;color:#ec190e;margin:2.2rem 0 .8rem;font-weight:normal;text-align:center}
.cutting-edge h3 span,.achievements h3 span{color:#8a7f72;font-size:.9em}
.achievements h3:first-of-type{margin-top:0}
.videos{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:1rem}
.videos iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.pyro{margin:3.5rem auto 0;max-width:38rem}
.pyro video{width:100%;height:auto;display:block}
.shots{display:grid;gap:1rem;grid-template-columns:1fr 1fr;margin-top:1rem}
.shots a{display:block;transition:transform .2s,box-shadow .2s;grid-column:1/-1}
.shots a:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.4)}
.shots img{width:100%;height:auto;display:block}
#roster{max-width:none;margin-top:3.5rem}
#roster h2{margin:0 0 1.2rem}
#roster-toggle{
  display:block;width:100%;background:none;border:0;padding:0;
  font:inherit;font-size:1.6rem;letter-spacing:.08em;text-transform:uppercase;
  color:#ec190e;cursor:pointer;text-align:center;font-weight:normal
}
#roster-toggle .caret{display:inline-block;margin-left:.35em;font-size:.65em;color:#8a7f72}
#roster-toggle .caret::before{content:"▴"}
#roster-toggle[aria-expanded="false"] .caret::before{content:"▾"}
#roster-toggle::after{content:"";display:block;width:3rem;height:1px;background:rgba(236,25,14,.4);margin:.5rem auto 0}
#roster-toggle:hover .caret{color:#e0a458}
#roster-status{text-align:center;color:#8a7f72}
#roster-wrap{overflow-x:auto;margin-top:1rem}
#roster-table{width:100%;max-width:60rem;margin:0 auto;border-collapse:collapse;font-size:.95rem}
#roster-table th{
  text-align:left;font-weight:normal;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  color:#8a7f72;padding:.6rem .8rem;border-bottom:1px solid rgba(236,25,14,.35);
  cursor:pointer;user-select:none;white-space:nowrap;transition:color .15s
}
#roster-table th:hover{color:#e0a458}
#roster-table th.sorted{color:#e0a458}
#roster-table th.sorted[data-dir="asc"]::after{content:" ▲";font-size:.8em}
#roster-table th.sorted[data-dir="desc"]::after{content:" ▼";font-size:.8em}
#roster-table th:not(.col-name),#roster-table td:not(.col-name){text-align:center}
#roster-table tbody td{padding:.55rem .8rem;border-bottom:1px solid rgba(216,207,196,.08)}
.roster-row{cursor:pointer;transition:background .15s}
.roster-row:hover,.roster-row:focus-visible{background:rgba(236,25,14,.06);outline:none}
.roster-row .chevron{display:inline-block;width:1em;color:#8a7f72;transition:transform .15s;font-size:.8em}
.roster-row.open .chevron{transform:rotate(90deg)}
.roster-row .cname{font-weight:bold}
.roster-row .cclass{color:#8a7f72;font-size:.85em;margin-left:.5em}
.role{white-space:nowrap;font-size:.9em}
.role-tank{color:#7fb3d5}
.role-heal{color:#7fd58a}
.role-melee,.role-ranged{color:#ec190e}
.roster-detail>td{padding:0 .8rem 2rem 2.4rem!important;background:rgba(255,255,255,.02);border-bottom:1px solid rgba(236,25,14,.2)!important}
.d-wrap{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2rem 2.4rem;padding:1.25rem 0 .25rem;max-width:none
}
.d-sec h4{
  margin:0 0 .9rem;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:#e0a458;font-weight:normal;
  padding-bottom:.5rem;border-bottom:1px solid rgba(224,164,88,.15);
  display:flex;align-items:baseline;justify-content:space-between;gap:1em
}
.d-sec .d-count{color:#8a7f72;font-size:.9em;letter-spacing:.05em}
.d-row{
  display:grid;grid-template-columns:11rem 1fr;gap:2rem;
  padding:.4rem 0;font-size:.92rem;align-items:baseline
}
.d-row+.d-row{border-top:1px dotted rgba(216,207,196,.07)}
.d-k{color:#8a7f72;font-size:.85em;letter-spacing:.02em}
.d-v{color:#d8cfc4}
.d-pct{color:#8a7f72;font-size:.88em}
.d-empty{color:#8a7f72;font-style:italic;font-size:.9rem;padding:.4rem 0}
.d-mplus-list{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));
  column-gap:2.4rem;padding:.2rem 0
}
.d-mplus-item{display:flex;gap:.9rem;padding:.32rem 0;font-size:.92rem;align-items:baseline;border-bottom:1px dotted rgba(216,207,196,.07)}
.d-mplus-item .d-key-lv{color:#e0a458;min-width:2.2em;font-variant-numeric:tabular-nums}
.d-mplus-item .d-key-name{color:#d8cfc4}
@media (max-width:40rem){
.videos{grid-template-columns:1fr}
.shots{grid-template-columns:1fr}
.links{gap:1em}
.links a{justify-content:center}
.d-wrap{grid-template-columns:1fr;gap:2rem}
.d-row{grid-template-columns:1fr;gap:.2rem;padding:.55rem 0}
.d-mplus-list{grid-template-columns:1fr}
.roster-detail>td{padding-left:1rem!important;padding-right:.6rem!important}
}