:root{
  --black:#08080A;
  --panel:#111114;
  --panel-2:#17171B;
  --line:#26241E;
  --line-lit:#3A3527;

  --gold-deep:#7A5314;
  --gold:#C9962C;
  --gold-lit:#F2D98B;
  --gold-pale:#FBF3D8;

  --text:#E9E6DF;
  --muted:#89857C;
  --green:#3FB07A;

  --metal:linear-gradient(135deg,#6B4712 0%,#C9962C 26%,#F7E9B8 48%,#C08C25 68%,#7A5314 100%);

  --s--1:.75rem;
  --s-0:.9375rem;
  --s-1:1.125rem;
  --s-2:1.5rem;
  --s-3:2.125rem;
  --s-4:3.5rem;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  background:var(--black);
  color:var(--text);
  font-family:'Barlow',system-ui,sans-serif;
  font-size:var(--s-0);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.display{font-family:'Chakra Petch',sans-serif;letter-spacing:.01em}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}

.wrap{max-width:1140px;margin:0 auto;padding:0 22px}

.gold-text{
  background:var(--metal);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}

/* chevron rule — the apex from the mark, used as the section divider */
.chev{
  display:block;width:100%;height:9px;margin:0;border:0;
  background:
    linear-gradient(135deg,transparent 49.6%,var(--gold-deep) 49.6% 50.4%,transparent 50.4%),
    linear-gradient(45deg,transparent 49.6%,var(--gold-deep) 49.6% 50.4%,transparent 50.4%);
  background-size:18px 9px;
  background-repeat:repeat-x;
  opacity:.55;
}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:20;
  background:rgba(8,8,10,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
header .wrap{display:flex;align-items:center;gap:26px;min-height:68px}

.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.brand svg{width:32px;height:32px;display:block}
.brand .name{
  font-family:'Chakra Petch',sans-serif;font-weight:700;
  font-size:var(--s-1);letter-spacing:.16em;text-transform:uppercase;
}

nav{display:flex;gap:4px;margin-left:auto}
nav a{
  color:var(--muted);text-decoration:none;font-size:var(--s--1);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;padding:9px 13px;border-radius:2px;
}
nav a:hover{color:var(--gold-lit)}
nav a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'Chakra Petch',sans-serif;font-weight:600;
  font-size:var(--s--1);letter-spacing:.1em;text-transform:uppercase;
  padding:11px 18px;border-radius:2px;text-decoration:none;cursor:pointer;
  border:1px solid var(--line-lit);background:transparent;color:var(--text);
}
.btn:hover{border-color:var(--gold);color:var(--gold-lit)}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.btn-gold{
  background:var(--metal);border:0;color:#1A1206;
  box-shadow:0 6px 22px -10px rgba(201,150,44,.8);
}
.btn-gold:hover{color:#1A1206;filter:brightness(1.08)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:74px 0 60px}
.hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(64% 78% at 50% -12%,rgba(201,150,44,.15),transparent 70%);
  pointer-events:none;
}
.hero .wrap{position:relative;text-align:center}

.mark{width:112px;height:112px;margin:0 auto 22px;display:block}
.mark .sheen{
  transform-origin:center;
  animation:sweep 6s ease-in-out infinite;
}
@keyframes sweep{
  0%,72%,100%{opacity:0}
  80%{opacity:.55}
  88%{opacity:0}
}

.hero h1{
  font-size:clamp(2.25rem,7vw,var(--s-4));font-weight:700;line-height:1;
  letter-spacing:.06em;text-transform:uppercase;
}
.hero .tagline{
  color:var(--muted);max-width:52ch;margin:16px auto 0;font-size:var(--s-1);
}
.hero .actions{display:flex;gap:12px;justify-content:center;margin-top:30px;flex-wrap:wrap}

/* ---------- server cards ---------- */
.servers{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:14px;margin-top:52px;text-align:left;
}
.server{
  background:var(--panel);border:1px solid var(--line);border-radius:3px;
  padding:20px 22px;position:relative;overflow:hidden;
}
.server.live{border-color:var(--line-lit)}
.server.live::after{
  content:'';position:absolute;left:0;top:0;width:2px;height:100%;background:var(--metal);
}
.server-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.server h3{font-size:var(--s-1);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.state{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.state .dot{width:7px;height:7px;border-radius:50%;background:var(--green)}
.state.soon .dot{background:var(--line-lit)}

.count{display:flex;align-items:baseline;gap:9px;margin-top:16px}
.count .n{font-family:'Chakra Petch',sans-serif;font-size:var(--s-3);font-weight:700;line-height:1}
.count .of{color:var(--muted);font-size:var(--s--1)}

.meter{height:4px;background:var(--panel-2);border-radius:99px;margin-top:12px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--metal);border-radius:99px}

.server p{color:var(--muted);font-size:var(--s--1);margin-top:14px;line-height:1.5}
.connect{
  display:inline-block;margin-top:14px;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:600;color:var(--gold);text-decoration:none;
}
.connect:hover{color:var(--gold-lit)}

/* ---------- sections ---------- */
section.block{padding:66px 0}
.head{margin-bottom:30px}
.eyebrow{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);font-weight:600;margin-bottom:9px;
}
.head h2{font-size:var(--s-3);font-weight:700;letter-spacing:.03em;text-transform:uppercase;line-height:1.1}
.head p{color:var(--muted);margin-top:10px;max-width:56ch}

.figures{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden;
}
.fig{background:var(--panel);padding:22px}
.fig .v{font-family:'Chakra Petch',sans-serif;font-size:var(--s-3);font-weight:700;line-height:1}
.fig .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:8px}

/* ---------- leaderboard ---------- */
table{width:100%;border-collapse:collapse;font-size:var(--s-0)}
thead th{
  text-align:left;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);font-weight:600;padding:0 14px 11px;border-bottom:1px solid var(--line);
}
tbody td{padding:14px;border-bottom:1px solid rgba(38,36,30,.7)}
tbody tr:hover{background:var(--panel)}
tbody tr.you{background:rgba(201,150,44,.07)}
tbody tr.you td{border-bottom-color:rgba(201,150,44,.24)}
.pos{width:56px;color:var(--muted)}
.pos.medal{font-weight:600}
.pos.medal-1{color:var(--gold-lit)}
.pos.medal-2{color:#C6C6C6}
.pos.medal-3{color:#B07A45}
.who{display:flex;align-items:center;gap:11px}
.who img{width:30px;height:30px;border-radius:2px;display:block}
.who .n{font-weight:600}
.who .h{font-size:11px;color:var(--muted)}
.num{text-align:right}
.badge{
  display:inline-block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;padding:3px 9px;border-radius:2px;
  border:1px solid var(--line-lit);color:var(--muted);
}
.badge.t3{border-color:var(--gold);color:var(--gold-lit)}
.badge.t2{border-color:#8A7A55;color:#CBBA8C}

/* ---------- tiers ---------- */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:14px}
.tier{
  background:var(--panel);border:1px solid var(--line);border-radius:3px;
  padding:26px 24px;display:flex;flex-direction:column;
}
.tier.feature{border-color:var(--gold);background:linear-gradient(180deg,rgba(201,150,44,.07),transparent 40%)}
.tier .tag{
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
  font-weight:600;margin-bottom:12px;min-height:15px;
}
.tier h3{font-size:var(--s-2);font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.price{display:flex;align-items:baseline;gap:6px;margin-top:12px}
.price .amt{font-family:'Chakra Petch',sans-serif;font-size:var(--s-2);font-weight:700}
.price .per{color:var(--muted);font-size:var(--s--1)}
.tier ul{list-style:none;margin:20px 0 26px;display:grid;gap:10px}
.tier li{font-size:var(--s--1);color:var(--muted);padding-left:20px;position:relative;line-height:1.45}
.tier li::before{
  content:'';position:absolute;left:0;top:.5em;width:8px;height:5px;
  background:
    linear-gradient(135deg,transparent 46%,var(--gold) 46% 54%,transparent 54%),
    linear-gradient(45deg,transparent 46%,var(--gold) 46% 54%,transparent 54%);
  background-size:8px 5px;
}
.tier .btn{margin-top:auto;justify-content:center}

.fineprint{color:var(--muted);font-size:var(--s--1);margin-top:22px;max-width:60ch}

footer{border-top:1px solid var(--line);padding:34px 0 60px;color:var(--muted);font-size:var(--s--1)}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer a{color:var(--muted)}
footer a:hover{color:var(--gold-lit)}

@media (max-width:760px){
  nav{display:none}
  section.block{padding:48px 0}
  .hero{padding:52px 0 44px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ---------- empty states ---------- */
/* Used everywhere a query returns nothing. The site never invents a number. */
.coming{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  color:var(--muted);font-size:.72em;letter-spacing:.14em;text-transform:uppercase;
}
.fig .v .coming{font-size:.5em}

.empty{
  border:1px dashed var(--line-lit);border-radius:3px;
  padding:38px 26px;text-align:center;background:var(--panel);
}
.empty .t{
  font-family:'Chakra Petch',sans-serif;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
  font-size:var(--s--1);
}
.empty p{color:var(--muted);font-size:var(--s--1);margin-top:9px;max-width:44ch;
  margin-left:auto;margin-right:auto;line-height:1.5}

.stale{
  font-size:11px;color:var(--muted);letter-spacing:.06em;
}

/* profile */
.profile-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.profile-head img{width:64px;height:64px;border-radius:3px;display:block}
.profile-head h1{font-size:var(--s-3);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.chars{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:26px}
.char{background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:20px 22px}
.char h3{font-size:var(--s-1);font-weight:700;letter-spacing:.04em}
.char .job{font-size:var(--s--1);color:var(--muted);margin-top:3px}
.char dl{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.char dt{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.char dd{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:var(--s-0);margin-top:2px}

.skills{display:grid;gap:12px;margin-top:14px}
.skillrow .st{display:flex;justify-content:space-between;font-size:var(--s--1);gap:12px}
.skillrow .st b{font-weight:600}
.skillrow .st span{color:var(--muted);font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px}
/* ---------- Discord role badges ----------
   Append this to public_html/assets/site.css
   The colour comes through as a --role custom property set inline, so
   each badge picks up its real Discord colour without inline styling
   the whole element. */

.roles{
  display:flex;flex-wrap:wrap;gap:7px;margin-top:10px;
}

.rolebadge{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11px;letter-spacing:.06em;font-weight:600;
  padding:4px 10px 4px 8px;border-radius:2px;
  background:var(--panel-2);border:1px solid var(--line);
  color:var(--muted);
  line-height:1.4;
}

.rolebadge i{
  width:8px;height:8px;border-radius:50%;flex:none;
  background:var(--muted);
}

/* Roles with a colour set in Discord */
.rolebadge.coloured{
  color:var(--role);
  border-color:color-mix(in srgb, var(--role) 40%, transparent);
  background:color-mix(in srgb, var(--role) 10%, var(--panel-2));
}
.rolebadge.coloured i{background:var(--role)}

/* color-mix is well supported now, but fall back cleanly if it isn't */
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .rolebadge.coloured{
    border-color:var(--line-lit);
    background:var(--panel-2);
  }
}

/* ---------- member directory ---------- */

.mfilters{
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:24px;
}
.mfilters input[type="search"],
.mfilters select{
  font-family:'Barlow',system-ui,sans-serif;font-size:var(--s--1);
  background:var(--panel);color:var(--text);
  border:1px solid var(--line);border-radius:2px;
  padding:10px 12px;min-width:150px;
}
.mfilters input[type="search"]{flex:1;min-width:190px}
.mfilters input:focus-visible,
.mfilters select:focus-visible{outline:2px solid var(--gold);outline-offset:-1px}
.mreset{
  font-size:var(--s--1);color:var(--muted);text-decoration:none;padding:0 6px;
}
.mreset:hover{color:var(--gold-lit)}

.members{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:12px;
}

.mcard{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--panel);border:1px solid var(--line);border-radius:3px;
  padding:16px;text-decoration:none;color:inherit;
  transition:border-color .15s ease, background .15s ease;
}
.mcard:hover{border-color:var(--line-lit);background:var(--panel-2)}
.mcard:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.mavatar{
  width:52px;height:52px;border-radius:3px;flex:none;display:block;
  border:1px solid var(--line-lit);
}

.mbody{min-width:0;flex:1}

.mname{
  font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:var(--s-0);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:1.3;
}
.mstaff{
  font-family:'Barlow',sans-serif;font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;
  color:var(--gold-lit);border:1px solid rgba(201,150,44,.4);
  padding:1px 6px;border-radius:2px;
}

.mtags{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.mcard .roles{margin-top:7px}
.mcard .rolebadge{font-size:10px;padding:3px 8px 3px 6px}

.mstats{
  display:flex;gap:12px;flex-wrap:wrap;
  font-size:11px;color:var(--muted);margin-top:10px;
}

.pager{
  display:flex;align-items:center;justify-content:center;gap:16px;
  margin-top:32px;font-size:var(--s--1);color:var(--muted);
}

.backlink{
  font-size:var(--s--1);color:var(--muted);text-decoration:none;
  letter-spacing:.04em;
}
.backlink:hover{color:var(--gold-lit)}

.muser{font-size:var(--s--1);color:var(--muted);margin-top:2px}