.server-page {
  --server-accent: var(--toxic);
  --server-accent-bright: var(--toxic-bright);
  --server-rgb: 152,203,28;
}
.server-page.theme-ark { --server-accent: var(--cyan); --server-accent-bright: var(--cyan-bright); --server-rgb: 49,197,238; }
.server-page.theme-ats { --server-accent: var(--amber); --server-accent-bright: var(--amber-bright); --server-rgb: 228,115,24; }
.server-page .brand-copy small { color: var(--server-accent); }
.server-page .primary-nav > a:not(.discord-nav)::after { background: var(--server-accent-bright); box-shadow: 0 0 14px rgba(var(--server-rgb),.55); }
.server-page .eyebrow { color: var(--server-accent-bright); }

.server-hero {
  position: relative;
  min-height: 720px;
  margin-top: var(--header-h);
  display: grid;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: #050604;
}
.server-hero-media { position: absolute; inset: 0; }
.server-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.server-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4,5,4,.96), rgba(4,5,4,.72) 46%, rgba(4,5,4,.18) 78%, rgba(4,5,4,.5)),
    linear-gradient(180deg, rgba(0,0,0,.2), transparent 30%, rgba(0,0,0,.76));
}
.theme-ark .server-hero::after { background: linear-gradient(90deg, rgba(2,8,12,.96), rgba(2,8,12,.68) 48%, rgba(2,8,12,.16) 78%, rgba(2,8,12,.42)), linear-gradient(180deg, rgba(0,0,0,.2), transparent 30%, rgba(0,0,0,.8)); }
.theme-ats .server-hero::after { background: linear-gradient(90deg, rgba(8,5,2,.96), rgba(8,5,2,.72) 46%, rgba(8,5,2,.12) 78%, rgba(8,5,2,.35)), linear-gradient(180deg, rgba(0,0,0,.2), transparent 30%, rgba(0,0,0,.76)); }
.server-hero-shell {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 80px), var(--max));
  margin-inline: auto;
  padding-block: 90px;
}
.server-hero-copy { width: min(770px, 62vw); }
.server-breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; color: #8e877c; font-size: .73rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.server-breadcrumbs a:hover { color: var(--server-accent-bright); }
.server-hero h1 {
  margin: 0;
  display: grid;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  line-height: .88;
  text-transform: uppercase;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.65));
}
.server-hero h1 span { color: var(--bone); font-size: clamp(4rem,8vw,8rem); letter-spacing: .015em; text-shadow: 0 3px 0 #655a48,0 7px 0 #28231d; }
.server-hero h1 em { margin-top: 13px; color: var(--server-accent-bright); font-style: normal; font-size: clamp(2rem,4.5vw,4.4rem); letter-spacing: .06em; text-shadow: 0 4px 0 rgba(0,0,0,.55),0 0 28px rgba(var(--server-rgb),.28); }
.server-hero-lede { max-width: 690px; margin: 25px 0 0; color: #c4bbac; font-size: clamp(1.05rem,1.6vw,1.28rem); line-height: 1.65; }
.server-hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 31px; }
.server-page .button-accent { --accent: var(--server-accent); --accent-bright: var(--server-accent-bright); }
.server-statusbar { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); max-width: 780px; margin-top: 40px; border-block: 1px solid var(--line); }
.server-statusbar div { display: grid; padding: 16px 18px; border-right: 1px solid var(--line); }
.server-statusbar div:first-child { padding-left: 0; }
.server-statusbar div:last-child { border-right: 0; }
.server-statusbar strong { color: var(--bone); font-size: 1.08rem; text-transform: uppercase; }
.server-statusbar span { color: var(--muted); font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

.server-intro { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(330px,.55fr); gap: clamp(40px,7vw,100px); align-items: center; }
.server-intro h2, .server-section h2, .server-cta h2 {
  margin: 0;
  color: var(--bone);
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(3rem,5vw,5.3rem);
  line-height: .94;
  text-transform: uppercase;
}
.server-intro h2 em, .server-section h2 em { color: var(--server-accent); font-style: normal; }
.server-intro-copy > p:last-child { margin: 22px 0 0; color: var(--muted); font-size: 1.08rem; line-height: 1.75; }
.server-logo-card {
  position: relative;
  padding: 11px;
  border: 1px solid rgba(224,212,191,.22);
  background: linear-gradient(145deg,rgba(224,212,191,.18),rgba(var(--server-rgb),.12));
  box-shadow: var(--shadow),0 0 70px rgba(var(--server-rgb),.08);
  clip-path: polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
}
.server-logo-card img { width: 100%; height: auto; }
.server-logo-card::after { content: ""; position: absolute; inset: 11px; border: 1px solid rgba(255,255,255,.1); pointer-events: none; }

.server-section { border-top: 1px solid var(--line); }
.server-section-heading { max-width: 830px; margin-bottom: 42px; }
.server-section-heading > p:last-child { margin: 18px 0 0; color: var(--muted); font-size: 1.06rem; }
.info-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.info-card {
  position: relative;
  min-height: 215px;
  padding: 28px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(145deg,rgba(22,24,19,.93),rgba(7,8,6,.96));
  transition: transform .22s ease,border-color .22s ease;
}
.info-card::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: var(--server-accent); transform: scaleX(.2); transform-origin: left; transition: transform .24s ease; }
.info-card:hover { transform: translateY(-5px); border-color: rgba(var(--server-rgb),.5); }
.info-card:hover::after { transform: scaleX(1); }
.info-card b { display: inline-grid; place-items: center; min-width: 48px; height: 48px; padding-inline: 8px; border: 1px solid rgba(var(--server-rgb),.48); color: var(--server-accent-bright); background: rgba(var(--server-rgb),.08); font-size: .72rem; letter-spacing: .1em; }
.info-card h3 { margin: 19px 0 9px; color: var(--bone); font-size: 1.16rem; letter-spacing: .04em; text-transform: uppercase; }
.info-card p { margin: 0; color: var(--muted); }

.detail-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
  box-shadow: var(--shadow);
}
.detail-item { min-height: 136px; padding: 26px; background: rgba(9,10,8,.96); }
.detail-item span { color: var(--server-accent-bright); font-size: .68rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.detail-item strong { display: block; margin-top: 9px; color: var(--bone); font-size: 1.16rem; }
.detail-item p { margin: 7px 0 0; color: var(--muted); }

.media-feature {
  display: grid;
  grid-template-columns: minmax(0,.75fr) minmax(0,1fr);
  gap: clamp(38px,6vw,86px);
  align-items: center;
}
.media-feature.is-reversed { grid-template-columns: minmax(0,1fr) minmax(0,.75fr); }
.media-feature.is-reversed .media-art { order: 2; }
.media-art { position: relative; padding: 10px; border: 1px solid var(--line); background: rgba(var(--server-rgb),.07); box-shadow: var(--shadow); }
.media-art img { width: 100%; height: auto; }
.media-copy h2 { font-size: clamp(3rem,5vw,5rem); }
.media-copy > p:not(.eyebrow) { color: var(--muted); font-size: 1.06rem; line-height: 1.72; }
.inline-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.inline-tags span { padding: 8px 10px; border: 1px solid rgba(var(--server-rgb),.38); color: #c8c0b3; background: rgba(var(--server-rgb),.07); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.server-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 44px;
  border-top: 1px solid var(--line);
}
.server-cta > div { max-width: 760px; }
.server-cta p:last-child { margin: 15px 0 0; color: var(--muted); font-size: 1.07rem; }
.server-cta .button { min-width: 310px; min-height: 74px; }

.notice-box { padding: 20px 22px; border-left: 3px solid var(--server-accent); color: #c7beb0; background: rgba(var(--server-rgb),.07); }
.notice-box strong { color: var(--server-accent-bright); }

@media (max-width: 1000px) {
  .server-hero { min-height: 680px; }
  .server-hero-copy { width: min(720px,72vw); }
  .server-intro { grid-template-columns: 1fr; }
  .server-logo-card { width: min(520px,100%); margin-inline: auto; }
  .info-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .media-feature,.media-feature.is-reversed { grid-template-columns: 1fr; }
  .media-feature.is-reversed .media-art { order: 0; }
}

@media (max-width: 840px) {
  .server-hero { min-height: 720px; }
  .server-hero::after,.theme-ark .server-hero::after,.theme-ats .server-hero::after { background: linear-gradient(180deg,rgba(3,4,3,.2),rgba(3,4,3,.28) 30%,rgba(3,4,3,.94) 70%,rgba(3,4,3,.99)); }
  .server-hero-shell { width: min(calc(100% - 42px),var(--max)); align-self: end; padding: 170px 0 80px; }
  .server-hero-copy { width: 100%; }
  .server-statusbar { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .server-statusbar div:nth-child(2) { border-right: 0; }
  .server-statusbar div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .server-cta { align-items: flex-start; flex-direction: column; }
  .server-cta .button { width: 100%; min-width: 0; }
}

@media (max-width: 620px) {
  .server-hero { min-height: 680px; }
  .server-hero-shell { width: min(calc(100% - 28px),var(--max)); padding-bottom: 64px; }
  .server-hero h1 span { font-size: clamp(3.2rem,16vw,5rem); }
  .server-hero h1 em { font-size: clamp(1.8rem,10vw,3rem); }
  .server-statusbar { margin-top: 30px; }
  .server-statusbar div { padding: 13px 12px; }
  .info-grid { grid-template-columns: 1fr; }
  .detail-panel { grid-template-columns: 1fr; }
}