/* ===========================================================
   Remedy — Guild Site Stylesheet
   =========================================================== */

:root {
  /* Palette — derived from the Remedy logomark (forest green / gold / lavender, warm dark-brown base) */
  --bg-void: #0c0a07;
  --bg-base: #13110c;
  --bg-panel: #1c1811;
  --bg-panel-raised: #251f16;
  --border-subtle: #3f3a32;
  --border-strong: rgba(255, 255, 255, 0.15);

  --text-primary: #f1ece1;
  --text-secondary: #b7ae9d;
  --text-muted: #7c7565;

  /* Primary interactive accent — forest green */
  --accent: #4c8a56;
  --accent-bright: #6bb374;
  --accent-dim: #2c4a31;

  /* Secondary accent — gold trim (headings, eyebrows, emphasis) */
  --accent-gold: #d4af6a;
  --accent-gold-bright: #e8c688;

  /* Tertiary accent — lavender flower (sparing decorative use) */
  --accent-purple: #b39ddb;

  /* Horde flavor accent — used only for faction-specific callouts, never as the primary UI color */
  --accent-horde: #d6455a;

  /* WoW class colors (official palette) — Classic's 9 playable classes only */
  --class-druid: #ff7c0a;
  --class-hunter: #aad372;
  --class-mage: #3fc7eb;
  --class-paladin: #f48cba;
  --class-priest: #ffffff;
  --class-rogue: #fff468;
  --class-shaman: #0070dd;
  --class-warlock: #8788ee;
  --class-warrior: #c69b6d;

  /* WoW item quality colors — used for guild rank tag borders */
  --quality-common: #ffffff;
  --quality-uncommon: #1eff00;
  --quality-rare: #0070dd;
  --quality-epic: #a335ee;
  --quality-legendary: #ff8000;

  /* Discord brand */
  --discord-blurple: #5865f2;
  --discord-blurple-hover: #4752c4;

  /* Twitch brand */
  --twitch-purple: #9146ff;

  --font-display: 'Cinzel', serif;
  --font-heading: 'Rajdhani', sans-serif;
  --font-body: 'Inter', sans-serif;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --container-width: 1240px;
}

/* ---------- Reset ---------- */
* , *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* flex column + centering lets the overview section's content settle
   vertically within the available space instead of hugging the top,
   moving it down and closer to the footer on tall viewports */
main { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; }
.site-footer { flex-shrink: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-heading); font-weight: 700; }
p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: 14px;
}

/* ---------- Background texture ---------- */
body {
  background-image:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(76, 138, 86, 0.14), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, rgba(212, 175, 106, 0.07), transparent 55%);
  background-attachment: fixed;
}

/* ---------- Icon utility (mask-based, recolorable) ---------- */
.icon {
  display: inline-block;
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  flex-shrink: 0;
}

.icon--discord        { -webkit-mask-image: url('../assets/icons/ui/discord.svg');        mask-image: url('../assets/icons/ui/discord.svg'); }
.icon--external-link  { -webkit-mask-image: url('../assets/icons/ui/external-link.svg');  mask-image: url('../assets/icons/ui/external-link.svg'); }
.icon--chat           { -webkit-mask-image: url('../assets/icons/ui/chat.svg');           mask-image: url('../assets/icons/ui/chat.svg'); }
.icon--axes           { -webkit-mask-image: url('../assets/icons/ui/axes.svg');           mask-image: url('../assets/icons/ui/axes.svg'); }

/* Class colors (WoW standard) */
.class-warrior { color: var(--class-warrior); }
.class-paladin { color: var(--class-paladin); }
.class-hunter  { color: var(--class-hunter); }
.class-rogue   { color: var(--class-rogue); }
.class-priest  { color: var(--class-priest); }
.class-shaman  { color: var(--class-shaman); }
.class-mage    { color: var(--class-mage); }
.class-warlock { color: var(--class-warlock); }
.class-druid   { color: var(--class-druid); }

/* =========================================================
   Header / Floating Nav
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Extra top padding gives the overlapping logo (.brand__logo) room to
     poke above the nav bar without being clipped by the viewport edge. */
  padding-top: 50px;
}
.nav-bar {
  max-width: var(--container-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 10px 20px;
  background: rgba(18, 13, 13, 0.5);
  border: 1px solid var(--border-subtle);
  border-radius: 0;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Logo — floats on top of the nav bar rather than sitting inside it:
   .brand__logo is taller than the bar's content row and pulled back in
   with negative vertical margins, so it overflows above and below.
   Nudged down slightly (translateY) so it pokes up a bit less than it
   pokes down. Once the page scrolls (.site-header.is-scrolled, toggled
   in js/main.js), it shrinks ~20% but keeps floating over the bar rather
   than being confined inside it. */
.brand {
  display: flex;
  align-items: center;
}
.brand__logo {
  display: block;
  height: 150px;
  width: auto;
  margin: -55px 0;
  transform: translateY(4px);
  transition: height 0.25s ease, margin 0.25s ease, transform 0.25s ease;
}
.site-header.is-scrolled .brand__logo {
  height: 120px;
  margin: -40px 0;
  transform: translateY(4px);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-links a {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 16px;
  border-radius: 0;
  color: var(--text-secondary);
  transition: color 0.15s ease, background 0.15s ease;
}
.nav-links a:hover { color: var(--text-primary); background: rgba(255,255,255,0.05); }
.nav-links a[aria-current="page"] { color: var(--text-primary); }
.nav-links a.nav-cta {
  background: var(--accent);
  color: #fff;
  margin-left: 8px;
}
.nav-links a.nav-cta:hover { background: var(--accent-bright); }

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 0;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text-primary);
  position: relative;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }

/* =========================================================
   Hero — single centered column
   ========================================================= */
/* Everything above the footer (nav + hero + recruitment/raid overview)
   fills the full viewport height on desktop, regardless of screen
   height (1080/1260/1440/etc) — the footer itself sits below the fold. */
.above-fold {
  display: flex;
  flex-direction: column;
}
@media (min-width: 961px) {
  .above-fold { min-height: 100vh; }
}
.hero-wrap {
  background-color: var(--bg-base);
  background-image:
    linear-gradient(180deg, rgba(19, 17, 12, 0.35) 0%, rgba(19, 17, 12, 0.8) 75%, var(--bg-base) 100%),
    url('../assets/img/hero_background.webp');
  /* Width-locked (not "cover") so the same crop/zoom shows regardless
     of how tall this box ends up — keeps the banner consistent across
     pages instead of cover's height-dependent zoom. */
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
}
@media (min-width: 961px) {
  /* Lets hero-wrap and main (below) share leftover viewport height equally,
     so the gap above the hero content matches the gap below the raid
     column — both grow from the same auto-sized base by the same amount. */
  .hero-wrap { flex: 1 0 auto; }
}
.hero-section {
  /* Asymmetric on purpose: shifts the hero copy down within its own
     box (paired with .overview-section's inverse padding below) so
     the hero and recruitment/raid blocks sit closer to the vertical
     center of the page as a pair rather than each independently. */
  padding: 160px 0 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.hero-copy h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.hero-copy p {
  font-size: 1.05rem;
  color: var(--text-secondary);
  max-width: 60ch;
  margin-bottom: 24px;
}
.hero-copy p strong {
  font-weight: 400;
  color: var(--accent-horde);
}
.cta-row {
  display: flex;
  justify-content: center;
}
.cta-row .btn { border-radius: 0; }
.cta-row .btn--primary { justify-content: center; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-bright); }
.btn--outline { border-color: var(--border-strong); color: var(--text-primary); }
.btn--outline:hover { border-color: var(--accent-bright); color: var(--accent-bright); }
.btn--ghost { color: var(--text-secondary); }
.btn--ghost:hover { color: var(--text-primary); }
.btn--discord { background: var(--discord-blurple); color: #fff; }
.btn--discord:hover { background: var(--discord-blurple-hover); }
.btn--discord .icon { width: 18px; height: 18px; }

/* =========================================================
   Overview — Recruitment (left) + Raid Progress (right)
   ========================================================= */
.overview-section {
  /* Inverse of .hero-section's padding — see comment there. */
  padding: 0 0 160px;
}
.overview-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: start;
}
.panel-title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 18px;
}

/* --- Recruitment: one rectangle per class ---
   To edit whether a spec is needed, change its data-needed="no" to "yes"
   (or back). The class rectangle itself dims to 75% automatically when
   none of its specs are needed — no extra step required. */
.class-recruit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.class-recruit-card--wide {
  grid-column: 1 / -1;
}
.class-recruit-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  /* 5 rows (4 gaps of 16px) sized to match the raid column's 3 rows
     (96px cards, 2 gaps of 16px): (3*96 + 2*16 - 4*16) / 5 = 51.2px */
  min-height: 51.2px;
  padding: 8px 16px;
  border: 1px solid var(--border-subtle);
  border-radius: 0;
  background-color: var(--bg-panel-raised);
  /* Class color accent — set via the matching utility class on this
     element (e.g. class="class-recruit-card class-warrior"), which sets
     `color`; the border picks it up through currentColor. */
  border-left: 4px solid currentColor;
  /* Active (at least one spec needed) = 100% opacity.
     Not active (nothing needed) = 80%. Set below, no hover state. */
  opacity: 1;
}
.class-recruit-card:not(:has(.spec-icon[data-needed="yes"])) {
  opacity: 0.8;
}
.class-recruit-card__name {
  font-family: var(--font-heading);
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-primary);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.class-recruit-card__specs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

/* Each spec icon: dim/greyed out by default, full opacity + green border
   once its data-needed attribute is set to "yes". */
.spec-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 0;
  border: 1px solid var(--border-subtle);
  background-color: var(--bg-panel);
  /* Placeholder — set per icon: style="--spec-icon: url('assets/img/specs/druid_balance.webp')" */
  background-image: var(--spec-icon, none);
  /* 120% zoom, centered — icon box size stays the same */
  background-size: 120% 120%;
  background-position: center;
  opacity: 0.5;
  filter: grayscale(1);
  transition: opacity 0.15s ease, filter 0.15s ease, border-color 0.15s ease;
}
.spec-icon[data-needed="yes"] {
  opacity: 1;
  filter: none;
  border-color: var(--accent-bright);
}

/* --- Raid Progress: one rectangle per raid --- */
.raid-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.raid-card {
  position: relative;
  isolation: isolate;
  padding: 16px;
  min-height: 96px;
  border: 1px solid var(--border-subtle);
  border-radius: 0;
  background-color: var(--bg-panel-raised);
  /* Background art — set --raid-bg per card (inline style):
     style="--raid-bg: url('assets/img/raids/onyxias-lair.webp')" */
  background-image: var(--raid-bg, none);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  /* Active (fully cleared) = 100% opacity. Not active (still in
     progress) = 80%. Toggle by changing data-cleared="no" to "yes". */
  opacity: 0.8;
}
.raid-card[data-cleared="yes"] {
  opacity: 1;
}
/* Legibility gradient over the background art */
.raid-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 10, 7, 0.2), rgba(12, 10, 7, 0.85));
  z-index: -1;
}
.raid-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.raid-card__name {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.raid-card__count {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.progress-bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.progress-bar__fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent-bright));
}

/* =========================================================
   Page Header (interior pages)
   ========================================================= */
.page-hero-wrap {
  background-color: var(--bg-base);
  /* Per-page image — set via inline style:
     style="--page-hero-bg: url('../assets/img/<page>_background.webp')" */
  background-image:
    linear-gradient(180deg, rgba(19, 17, 12, 0.35) 0%, rgba(19, 17, 12, 0.85) 75%, var(--bg-base) 100%),
    var(--page-hero-bg, none);
  /* Width-locked (not "cover") — see .hero-wrap comment. */
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
}
@media (min-width: 961px) {
  /* Gives the banner real height to display in — without this the box
     only hugs the nav + heading text (~250px) and the image never gets
     room to read as a full banner, no matter how it's sized. */
  .page-hero-wrap { min-height: 60vh; }
}
.page-hero {
  padding: 72px 0 40px;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  color: var(--text-primary);
  margin-bottom: 14px;
}
.page-hero p {
  color: var(--text-secondary);
  max-width: 60ch;
  margin: 0 auto;
}

/* =========================================================
   Philosophy Page
   ========================================================= */
.philosophy {
  padding: 20px 0 100px;
}
.philosophy .container {
  max-width: 780px;
}
.philosophy h2 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--accent-gold);
  margin: 48px 0 16px;
}
.philosophy h2:first-child { margin-top: 0; }
.philosophy p {
  color: var(--text-secondary);
  margin-bottom: 18px;
  font-size: 1.02rem;
}
.philosophy blockquote {
  position: relative;
  margin: 32px 0;
  padding: 20px 24px 20px 52px;
  border-left: 3px solid var(--accent-gold);
  background: var(--bg-panel);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-style: normal;
  color: var(--text-primary);
}
.philosophy blockquote::before {
  content: "\201C";
  position: absolute;
  top: 6px;
  left: 16px;
  font-family: Georgia, serif;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--accent-gold);
  opacity: 0.6;
}
.philosophy blockquote cite {
  display: block;
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-style: normal;
  color: var(--text-muted);
}
.policy-updated {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-bottom: 32px;
}

/* Section heading with an icon-in-a-box */
.philosophy-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 48px 0 16px;
}
.philosophy h2:first-of-type,
.philosophy-heading:first-child {
  margin-top: 0;
}
.philosophy-heading__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-size: 1.3rem;
  background: var(--bg-panel-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
.philosophy-heading h2 {
  margin: 0;
}

/* Highlighted words */
.philosophy mark {
  background: rgba(212, 175, 106, 0.18);
  color: var(--accent-gold-bright);
  padding: 1px 6px;
  border-radius: 2px;
  font-weight: 600;
}

/* Spoiler / details disclosure */
.philosophy details {
  margin: 24px 0;
  padding: 4px 20px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
.philosophy details[open] { padding-bottom: 16px; }
.philosophy details + details { margin-top: 12px; }
.philosophy summary {
  padding: 16px 0;
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent-gold-bright);
  cursor: pointer;
  list-style: none;
}
.philosophy summary::-webkit-details-marker { display: none; }
.philosophy summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 10px;
  color: var(--accent-gold);
  transition: transform 0.15s ease;
}
.philosophy details[open] summary::before { transform: rotate(90deg); }
.philosophy details p:last-child { margin-bottom: 0; }

/* Pros / cons */
.pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 24px 0;
}
.pros-cons__col {
  padding: 18px 20px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
.pros-cons__col--pros { border-left: 3px solid var(--accent-bright); }
.pros-cons__col--cons { border-left: 3px solid var(--accent-horde); }
.pros-cons__title {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.pros-cons__col--pros .pros-cons__title { color: var(--accent-bright); }
.pros-cons__col--cons .pros-cons__title { color: var(--accent-horde); }
.pros-cons__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pros-cons__col li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
  color: var(--text-secondary);
  font-size: 0.95rem;
}
.pros-cons__col li:last-child { margin-bottom: 0; }
.pros-cons__col--pros li::before {
  content: "+";
  position: absolute;
  left: 0;
  color: var(--accent-bright);
  font-weight: 700;
}
.pros-cons__col--cons li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--accent-horde);
  font-weight: 700;
}

/* Checklist */
.philosophy ul.checklist {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
.philosophy ul.checklist li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  color: var(--text-secondary);
}
.philosophy ul.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 10px;
  height: 10px;
  background: var(--accent-gold);
  transform: rotate(45deg);
}

@media (max-width: 640px) {
  .pros-cons { grid-template-columns: 1fr; }
}

/* =========================================================
   Members / Roster Page
   ========================================================= */
.roster {
  padding: 20px 0 100px;
}
.roster-filters-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 48px;
  margin-bottom: 36px;
}
.filter-group__label {
  display: block;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.roster-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.roster-filters button {
  padding: 8px 16px;
  border-radius: 0;
  border: 1px solid var(--border-subtle);
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.roster-filters button:hover { color: var(--text-primary); border-color: var(--border-strong); }
.roster-filters button.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Class filter — square icon buttons instead of text pills */
.roster-filters--icons button {
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.roster-filters--icons button.is-active {
  background: var(--bg-panel-raised);
  border-color: var(--accent-bright);
  color: var(--text-secondary);
}
/* SD / HD portrait switch: one bar, the green thumb slides left (SD) to
   right (HD). js/main.js flips aria-checked; the thumb and label colors
   follow it. Same square corners and 40px height as the class icons. */
.portrait-toggle {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 104px;
  height: 40px;
  border: 1px solid var(--border-subtle);
  border-radius: 0;
  background: var(--bg-panel-raised);
  transition: border-color 0.15s ease;
}
.portrait-toggle:hover { border-color: var(--border-strong); }
.portrait-toggle:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
}
.portrait-toggle__thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  background: var(--accent);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.portrait-toggle[aria-checked="true"] .portrait-toggle__thumb {
  transform: translateX(100%);
}
.portrait-toggle__option {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  transition: color 0.28s ease;
}
.portrait-toggle[aria-checked="false"] .portrait-toggle__option--sd,
.portrait-toggle[aria-checked="true"] .portrait-toggle__option--hd {
  color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .portrait-toggle__thumb,
  .portrait-toggle__option { transition: none; }
}

.filter-class-icon {
  width: 100%;
  height: 100%;
  /* Placeholder — set per button: style="--class-icon: url('assets/img/classes/icons/warrior.webp')" */
  background-color: var(--bg-panel-raised);
  background-image: var(--class-icon, none);
  background-size: 120% 120%;
  background-position: center;
}

@media (max-width: 700px) {
  .roster-filters-wrap { flex-direction: column; align-items: center; gap: 24px; }
}

/* Per-card color variables, driven by the two data attributes on each
   <article class="member-card">. Set once there; nothing else in the
   card's markup needs to repeat the class or rank. */
.member-card[data-class="druid"]   { --class-color: var(--class-druid); }
.member-card[data-class="hunter"]  { --class-color: var(--class-hunter); }
.member-card[data-class="mage"]    { --class-color: var(--class-mage); }
.member-card[data-class="paladin"] { --class-color: var(--class-paladin); }
.member-card[data-class="priest"]  { --class-color: var(--class-priest); }
.member-card[data-class="rogue"]   { --class-color: var(--class-rogue); }
.member-card[data-class="shaman"]  { --class-color: var(--class-shaman); }
.member-card[data-class="warlock"] { --class-color: var(--class-warlock); }
.member-card[data-class="warrior"] { --class-color: var(--class-warrior); }

.member-card[data-rank="guild-master"] { --rank-color: var(--quality-legendary); }
.member-card[data-rank="officer"]      { --rank-color: var(--quality-epic); }
.member-card[data-rank="raider"]       { --rank-color: var(--quality-rare); }
.member-card[data-rank="member"]       { --rank-color: var(--quality-uncommon); }

.member-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.member-card {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: 0;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.member-card:hover { border-color: var(--border-strong); transform: translateY(-3px); }

/* Country flag — same boxed treatment as the Philosophy page's section
   icons (raised panel, 1px border, rounded corners). The 24px flag sits
   inside the padding; set per member via --flag-img. */
.member-card__flag {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 36px;
  height: 36px;
  padding: 5px;
  background-color: var(--bg-panel-raised);
  background-image: var(--flag-img, none);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-origin: content-box;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

/* Twitch link — same boxed treatment as the flag, sitting just to its
   left (flag is 36px wide starting 22px from the edge, so this box's
   right edge lands 8px before the flag's left edge). Optional per
   member: set via --twitch-icon and a real href; the tooltip is just
   the href's title attribute. */
.member-card__twitch {
  position: absolute;
  top: 22px;
  right: 66px;
  width: 36px;
  height: 36px;
  padding: 5px;
  background-color: var(--bg-panel-raised);
  background-image: var(--twitch-icon, none);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-origin: content-box;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease;
}
.member-card__twitch:hover { border-color: var(--twitch-purple); }

.member-card__top {
  display: flex;
  align-items: center;
  gap: 14px;
}
.member-card__avatar {
  width: 56px;
  height: 56px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg-void);
  border: 2px solid currentColor;
  flex-shrink: 0;
  background-color: rgba(255,255,255,0.06);
  /* Race portrait — SD on top of HD (see the race rules below); the SD/HD
     toggle on Meet Us switches to HD only. */
  background-image: var(--race-sd, none), var(--race-hd, none);
  background-size: cover;
  background-position: center top;
}
/* Each avatar names its race once, e.g. data-race="tauren" (female races
   carry a "female" prefix). That becomes the SD portrait at
   assets/img/races/sd/<race>.webp (or .png) and the HD portrait at
   assets/img/races/<race>.webp. SD is the default and sits above HD, so a
   race with no SD file uploaded yet just shows its HD portrait.
   No data-race = plain color square. */
.member-card__avatar[data-race="dwarf"] { --race-hd: url('../assets/img/races/dwarf.webp'); --race-sd: url('../assets/img/races/sd/dwarf.webp'), url('../assets/img/races/sd/dwarf.png'); }
.member-card__avatar[data-race="gnome"] { --race-hd: url('../assets/img/races/gnome.webp'); --race-sd: url('../assets/img/races/sd/gnome.webp'), url('../assets/img/races/sd/gnome.png'); }
.member-card__avatar[data-race="human"] { --race-hd: url('../assets/img/races/human.webp'); --race-sd: url('../assets/img/races/sd/human.webp'), url('../assets/img/races/sd/human.png'); }
.member-card__avatar[data-race="nelf"] { --race-hd: url('../assets/img/races/nelf.webp'); --race-sd: url('../assets/img/races/sd/nelf.webp'), url('../assets/img/races/sd/nelf.png'); }
.member-card__avatar[data-race="orc"] { --race-hd: url('../assets/img/races/orc.webp'); --race-sd: url('../assets/img/races/sd/orc.webp'), url('../assets/img/races/sd/orc.png'); }
.member-card__avatar[data-race="skyborne"] { --race-hd: url('../assets/img/races/skyborne.webp'); --race-sd: url('../assets/img/races/sd/skyborne.webp'), url('../assets/img/races/sd/skyborne.png'); }
.member-card__avatar[data-race="tauren"] { --race-hd: url('../assets/img/races/tauren.webp'); --race-sd: url('../assets/img/races/sd/tauren.webp'), url('../assets/img/races/sd/tauren.png'); }
.member-card__avatar[data-race="troll"] { --race-hd: url('../assets/img/races/troll.webp'); --race-sd: url('../assets/img/races/sd/troll.webp'), url('../assets/img/races/sd/troll.png'); }
.member-card__avatar[data-race="undead"] { --race-hd: url('../assets/img/races/undead.webp'); --race-sd: url('../assets/img/races/sd/undead.webp'), url('../assets/img/races/sd/undead.png'); }
.member-card__avatar[data-race="femaledwarf"] { --race-hd: url('../assets/img/races/femaledwarf.webp'); --race-sd: url('../assets/img/races/sd/femaledwarf.webp'), url('../assets/img/races/sd/femaledwarf.png'); }
.member-card__avatar[data-race="femalegnome"] { --race-hd: url('../assets/img/races/femalegnome.webp'); --race-sd: url('../assets/img/races/sd/femalegnome.webp'), url('../assets/img/races/sd/femalegnome.png'); }
.member-card__avatar[data-race="femalehuman"] { --race-hd: url('../assets/img/races/femalehuman.webp'); --race-sd: url('../assets/img/races/sd/femalehuman.webp'), url('../assets/img/races/sd/femalehuman.png'); }
.member-card__avatar[data-race="femalenelf"] { --race-hd: url('../assets/img/races/femalenelf.webp'); --race-sd: url('../assets/img/races/sd/femalenelf.webp'), url('../assets/img/races/sd/femalenelf.png'); }
.member-card__avatar[data-race="femaleorc"] { --race-hd: url('../assets/img/races/femaleorc.webp'); --race-sd: url('../assets/img/races/sd/femaleorc.webp'), url('../assets/img/races/sd/femaleorc.png'); }
.member-card__avatar[data-race="femaleskyborne"] { --race-hd: url('../assets/img/races/femaleskyborne.webp'); --race-sd: url('../assets/img/races/sd/femaleskyborne.webp'), url('../assets/img/races/sd/femaleskyborne.png'); }
.member-card__avatar[data-race="femaletauren"] { --race-hd: url('../assets/img/races/femaletauren.webp'); --race-sd: url('../assets/img/races/sd/femaletauren.webp'), url('../assets/img/races/sd/femaletauren.png'); }
.member-card__avatar[data-race="femaletroll"] { --race-hd: url('../assets/img/races/femaletroll.webp'); --race-sd: url('../assets/img/races/sd/femaletroll.webp'), url('../assets/img/races/sd/femaletroll.png'); }
.member-card__avatar[data-race="femaleundead"] { --race-hd: url('../assets/img/races/femaleundead.webp'); --race-sd: url('../assets/img/races/sd/femaleundead.webp'), url('../assets/img/races/sd/femaleundead.png'); }
/* The toggle sets data-portraits="sd" | "hd" on .member-grid */
.member-grid[data-portraits="hd"] .member-card__avatar {
  background-image: var(--race-hd, none);
}
.member-card__id { min-width: 0; }
.member-card__name {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.member-card__class {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--class-color);
}

.member-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.member-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 0;
  background: rgba(255,255,255,0.06);
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.member-card__tag--role {
  color: var(--text-primary);
  border: 1px solid var(--class-color, var(--border-subtle));
}
/* Rank tag: text and border take the rank's item-quality color, fill is
   that same color at 18%. */
.member-card__tag--rank {
  color: var(--rank-color, var(--text-primary));
  border: 1px solid var(--rank-color, var(--border-subtle));
  background: color-mix(in srgb, var(--rank-color, #fff) 18%, transparent);
}
/* Role tag icon — the member's actual spec icon (120% zoom, same
   treatment as the recruitment page). Placeholder — set per member:
   style="--spec-icon: url('assets/img/specs/warrior_protection.webp')" */
.member-tag-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-color: var(--bg-panel-raised);
  background-image: var(--spec-icon, none);
  background-size: 120% 120%;
  background-position: center;
}

/* Divider above the bio (below the tags). The card's 14px flex gap sits
   above the line, the padding below it, so the spacing is even. */
.member-card__bio {
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.55;
}

/* Achievements row: divider above, pinned to the bottom of the card so
   the row lines up across cards of different bio lengths. Filled by
   js/main.js from the ids in data-achievements (data in js/achievements.js);
   hidden, divider included, when a member has none. */
.member-card__achievements {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
}
.member-card__achievements:empty { display: none; }
/* 24x24 on member cards (48x48 on the achievements page, see
   .achievement-icon--large). The icon is an SVG, so it scales cleanly;
   the frame is an outline drawn outside the box, so it costs no icon
   space. --achievement-icon is set by js/main.js from the achievement's
   id. On cards the icon is a link to its entry on achievements.html. */
.achievement-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  outline: 1px solid var(--border-subtle);
  background-color: var(--bg-panel-raised);
  background-image: var(--achievement-icon, none);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: outline-color 0.15s ease;
}
a.achievement-icon:hover,
a.achievement-icon:focus-visible {
  outline-color: var(--accent-gold);
}

/* =========================================================
   Achievements page (achievements.html)
   List is built by js/main.js from js/achievements.js.
   ========================================================= */
.achievements {
  padding: 20px 0 100px;
}
.achievement-group + .achievement-group {
  margin-top: 56px;
}
.achievement-group__title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--accent-gold);
  margin-bottom: 20px;
}
.achievement-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.achievement-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 18px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  scroll-margin-top: 140px;
}
/* Highlights the entry when linked to as achievements.html#<id>
   (class added by js/main.js) */
.achievement-item.is-highlighted {
  border-color: var(--accent-gold);
  background: var(--bg-panel-raised);
}
.achievement-icon--large {
  width: 48px;
  height: 48px;
}
.achievement-item__name {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}
.achievement-item__desc {
  margin-top: 4px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-muted);
}
@media (max-width: 760px) {
  .achievement-list { grid-template-columns: 1fr; }
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  margin-top: 40px;
}
.footer-inner {
  background: var(--bg-base);
  border-top: 1px solid var(--border-subtle);
  padding: 56px 0 24px;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(240px, auto) 1fr 1fr;
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border-subtle);
}
.footer-col__title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 16px;
}
.footer-brand__logo {
  display: block;
  height: 34px;
  width: auto;
}
.footer-brand p {
  margin-top: 14px;
  color: var(--text-muted);
  font-size: 0.9rem;
  max-width: 34ch;
}
.footer-tagline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-horde);
}
.footer-tagline__icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}

.footer-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  font-size: 0.92rem;
}
.footer-row + .footer-row { border-top: 1px solid var(--border-subtle); }
.footer-row__label { color: var(--text-secondary); }
.footer-row__value { font-weight: 600; color: var(--text-primary); }
.footer-row__value--gold { color: var(--accent-gold); }
.footer-row__value--horde { color: var(--accent-horde); }
.footer-row__value--positive { color: var(--accent-bright); }
.footer-note {
  margin-top: 12px;
  font-size: 0.8rem;
  color: var(--accent-bright);
  line-height: 1.5;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Each link bar has two images, both set per link via inline style:
     <a style="--link-bg: url('../assets/img/logos/<name>_background.webp')">
       <span class="footer-links__logo"
             style="--tool-logo: url('../assets/img/logos/<name>.webp')">
   --link-bg is the wide picture behind the whole bar (cover-fit); the dark
   gradient in ::before keeps the label readable and eases off on hover. */
.footer-links a {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  border-radius: 0;
  background-color: var(--bg-panel);
  background-image: var(--link-bg, none);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--border-subtle);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.footer-links a::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(12, 10, 7, 0.88) 0%, rgba(12, 10, 7, 0.5) 100%);
  transition: opacity 0.2s ease;
}
.footer-links a:hover { color: var(--text-primary); border-color: var(--border-strong); }
.footer-links a:hover::before { opacity: 0.6; }
.footer-links__label {
  flex: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

/* Icon tile (webp) — set per link via inline style:
   style="--tool-logo: url('../assets/img/logos/<name>.webp')"
   Box is 24x24px with a 1px border, so the icon shows in the 22x22 area
   inside it; background-size:contain so non-square icons never get
   cropped. */
.footer-links__logo {
  width: 24px;
  height: 24px;
  border-radius: 0;
  background-color: var(--bg-panel-raised);
  background-image: var(--tool-logo, none);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.footer-bottom {
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.footer-bottom-links {
  display: flex;
  gap: 20px;
}
.footer-bottom-links a { color: var(--text-muted); }
.footer-bottom-links a:hover { color: var(--text-secondary); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 960px) {
  .overview-grid { grid-template-columns: 1fr; }
  .member-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  /* Full-screen mobile menu. The overlay is position:fixed, which
     backdrop-filter on .nav-bar would otherwise trap inside the bar, so
     the blur is dropped while the menu is open (js/main.js sets
     html.nav-open, which also locks page scroll). */
  html.nav-open { overflow: hidden; }
  html.nav-open .nav-bar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav-links {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 120px 24px 48px;
    overflow-y: auto;
    background:
      radial-gradient(ellipse 120% 60% at 50% 0%, rgba(76, 138, 86, 0.16), transparent 70%),
      var(--bg-void);
  }
  .nav-links.is-open {
    display: flex;
    animation: navOverlayIn 0.22s ease both;
  }
  /* Exit: js/main.js adds .is-closing, waits out this animation, then
     removes .is-open (which is what finally sets display:none). */
  .nav-links.is-closing {
    animation: navOverlayOut 0.25s ease-out both;
  }
  /* Auto margins (rather than justify-content:center) keep the list
     centered when it fits, without clipping the top when it doesn't. */
  .nav-links li { width: 100%; display: flex; justify-content: center; }
  .nav-links li:first-child { margin-top: auto; }
  .nav-links li:last-child { margin-bottom: auto; }
  .nav-links a {
    width: auto;
    min-width: 240px;
    padding: 16px 28px;
    font-size: 1.35rem;
    letter-spacing: 0.14em;
    text-align: center;
  }
  .nav-links a[aria-current="page"] { color: var(--accent-gold-bright); }
  .nav-links a.nav-cta { margin: 22px 0 0; text-align: center; }
  .nav-links.is-open li { animation: navLinkIn 0.35s ease both; }
  .nav-links.is-open li:nth-child(1) { animation-delay: 0.05s; }
  .nav-links.is-open li:nth-child(2) { animation-delay: 0.1s; }
  .nav-links.is-open li:nth-child(3) { animation-delay: 0.15s; }
  .nav-links.is-open li:nth-child(4) { animation-delay: 0.2s; }

  /* Logo and toggle stay above the overlay; toggle morphs into an X.
     --brand-shift is set by js/main.js while the menu is open so the
     logo glides to the horizontal center of the screen. */
  .brand,
  .nav-toggle { position: relative; z-index: 2; }
  .brand {
    transform: translateX(var(--brand-shift, 0px));
    transition: transform 0.3s ease-out;
  }
  .nav-toggle { display: flex; }
  .nav-toggle[aria-expanded="true"] span { background: transparent; }
  .nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }
  .nav-bar { position: relative; }
  .brand__logo { height: 100px; margin: -37px 0; transform: translateY(4px); }
  .site-header.is-scrolled .brand__logo { height: 80px; margin: -20px 0; transform: translateY(4px); }

  .member-grid { grid-template-columns: 1fr; }
  .roster-filters { justify-content: center; overflow-x: auto; padding-bottom: 4px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 760px) and (max-height: 500px) {
  .nav-links { padding: 100px 24px 20px; gap: 2px; }
  .nav-links a { padding: 9px 28px; font-size: 1.1rem; }
  .nav-links a.nav-cta { margin-top: 12px; }
}

@keyframes navOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes navOverlayOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes navLinkIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-links.is-open,
  .nav-links.is-closing,
  .nav-links.is-open li { animation: none; }
  .brand { transition: none; }
}

@media (max-width: 420px) {
  .class-recruit-grid { grid-template-columns: 1fr; }
  .cta-row { width: 100%; }
  .cta-row .btn { width: 100%; justify-content: center; }
}