/* ============================================================
   idd.gg — redesign 2026
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Newsreader:ital,wght@0,400;0,600;1,400;1,600&display=swap');

/* === TOKENS === */
:root {
  --bg:        #0E1413;
  --bg-2:      #141B1A;
  --surface:   #18211F;
  --surface-2: #1F2A28;
  --line:      #2A3735;
  --line-2:    #3D4F4C;
  --ink:       #E8EDEC;
  --ink-2:     #B7C2C0;
  --ink-3:     #7C8C89;
  --teal:      #5EE6D6;
  --teal-deep: #2BB6A6;
  --teal-ink:  #06302C;
  --warm:      #F2C079;
  --warm-deep: #C98E3F;
  --rose:      #F08A8A;
  --violet:    #B79CF0;
  --live:      #FF5C5C;

  --serif: 'Newsreader', ui-serif, Georgia, serif;
  --sans:  'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  --b:     1.5px solid var(--ink);
  --b-dim: 1.5px solid var(--line-2);

  --nav-h: 62px;
}

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg) !important;
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  line-height: 1.5;
}

/* override old stylesheet heading font if both loaded */
h1, h2, h3, h4, h5, h6 { font-family: var(--sans); }

a { color: inherit; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; letter-spacing: -0.02em; }
p { margin: 0; }
img { display: block; max-width: 100%; }
ul { list-style: none; margin: 0; padding: 0; }

/* === ACCESSIBILITY === */
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  background: var(--ink);
  color: var(--bg);
  font-weight: 700;
  padding: 0.75rem 1.5rem;
  z-index: 1000;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
}

/* === LAYOUT === */
.w {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}

/* === TYPE UTILITIES === */
.mono   { font-family: var(--mono); }
.serif  { font-family: var(--serif); }
.italic { font-style: italic; }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
}
.eyebrow--teal { color: var(--teal); }
.eyebrow--warm { color: var(--warm); }
.eyebrow--ink  { color: var(--ink); }

/* === STRUCTURAL === */
.rule       { height: 1.5px; background: var(--ink); width: 100%; }
.rule--dim  { background: var(--line-2); }

.halftone {
  background-image: radial-gradient(var(--line-2) 1px, transparent 1px);
  background-size: 6px 6px;
}

/* === LIVE DOT === */
.dot-live {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--live);
  animation: pulse 1.6s infinite;
  flex-shrink: 0;
  vertical-align: middle;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  height: var(--nav-h);
  border-bottom: var(--b);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav__brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.nav__logo-img { height: 26px; width: auto; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav__link {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 10px;
  color: var(--ink-2);
  text-decoration: none;
  border: 1.5px solid transparent;
  white-space: nowrap;
  transition: color 0.1s;
}
.nav__link:hover { color: var(--ink); }
.nav__link.is-active {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--surface);
}

.nav__cta {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 12px;
  border: 1.5px solid var(--ink);
  color: var(--bg);
  text-decoration: none;
  margin-left: 8px;
  white-space: nowrap;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.nav__cta:hover {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--teal-ink);
}

.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav__hamburger-bar {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.2s, opacity 0.2s;
}

/* ============================================================
   MASTHEAD STRIP
   ============================================================ */
.masthead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 40px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1.5px solid var(--line);
  background: var(--bg-2);
  gap: 16px;
}

.masthead__right {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  padding: 12px 20px;
  border: 1.5px solid var(--ink);
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  position: relative;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); color: var(--bg); }

.btn--teal { background: var(--teal); border-color: var(--teal); color: var(--teal-ink); }
.btn--teal:hover  { box-shadow: 4px 4px 0 var(--teal); color: var(--teal-ink); }

.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { box-shadow: 4px 4px 0 var(--ink); color: var(--ink); }

.btn--warm { background: var(--warm); border-color: var(--warm); color: #2A1A05; }
.btn--warm:hover { box-shadow: 4px 4px 0 var(--warm); color: #2A1A05; }

.btn--sm { font-size: 12px; padding: 9px 14px; }
.btn .arrow { font-family: var(--mono); }

/* ============================================================
   CARD
   ============================================================ */
.card {
  background: var(--surface);
  border: 1.5px solid var(--line-2);
  position: relative;
}
.card--ink  { border-color: var(--ink); }
.card--teal { border-color: var(--teal); }
.card--warm { border-color: var(--warm); }

/* ============================================================
   TAG
   ============================================================ */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 7px;
  border: 1.5px solid var(--line-2);
  color: var(--ink-2);
}
.tag--teal   { border-color: var(--teal);   color: var(--teal); }
.tag--warm   { border-color: var(--warm);   color: var(--warm); }
.tag--rose   { border-color: var(--rose);   color: var(--rose); }
.tag--violet { border-color: var(--violet); color: var(--violet); }
.tag--live   { border-color: var(--live);   color: var(--live); }
.tag--dot::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}

/* ============================================================
   AVATAR
   ============================================================ */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--ink);
  flex-shrink: 0;
}

/* ============================================================
   STAMP
   ============================================================ */
.stamp {
  display: inline-block;
  border: 2px solid currentColor;
  padding: 5px 10px;
  font-family: var(--mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  transform: rotate(-6deg);
}

/* ============================================================
   PAGE HEADER (interior pages)
   ============================================================ */
.page-header {
  padding: 48px 40px 40px;
  border-bottom: var(--b);
}
.page-header__eyebrow { margin-bottom: 10px; }
.page-header__h1 {
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-top: 6px;
}
.page-header__desc {
  font-size: 15.5px;
  color: var(--ink-2);
  margin-top: 12px;
  max-width: 600px;
  line-height: 1.55;
}

/* ============================================================
   PAGE SECTIONS (interior pages)
   ============================================================ */
.page-section {
  padding: 40px 40px;
}
.page-section + .page-section {
  border-top: 1.5px solid var(--line);
}
.page-section--alt {
  background: var(--bg-2);
  border-top: var(--b);
  border-bottom: var(--b);
}

.section-title {
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

/* ============================================================
   ETHOS / ABOUT BLOCK (community page)
   ============================================================ */
.ethos-block {
  padding: 48px 40px;
  border-bottom: var(--b);
}
.ethos-block__grid {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 40px;
  align-items: start;
}
.ethos-block__text {
  font-family: var(--serif);
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.6;
  color: var(--ink-2);
}
.ethos-block__text p + p { margin-top: 1em; }
.ethos-block__text strong { color: var(--ink); font-style: normal; }

/* ============================================================
   FILTER TABS (live page)
   ============================================================ */
.filter-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.filter-tab {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 12px;
  border: 1.5px solid var(--line-2);
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  transition: border-color 0.1s, color 0.1s, background 0.1s;
}
.filter-tab:hover { border-color: var(--ink-2); color: var(--ink-2); }
.filter-tab.active {
  border-color: var(--ink);
  background: var(--surface);
  color: var(--ink);
}

/* ============================================================
   SUPPORT PAGE
   ============================================================ */
.support-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 8px;
}

.support-tier {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.support-tier__name {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.support-tier__price {
  font-size: clamp(44px, 5vw, 60px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}
.support-tier__period {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 4px;
  margin-bottom: 20px;
}
.support-tier__rule {
  height: 1.5px;
  background: var(--line-2);
  margin-bottom: 20px;
}
.support-tier__perks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  margin-bottom: 24px;
}
.support-tier__perk {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.4;
}
.support-tier__perk--inherited { color: var(--ink-3); }
.support-tier__perk strong { color: var(--ink); }
.support-tier__check {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--teal);
}
.support-tier__badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 7px;
  background: var(--teal);
  color: var(--teal-ink);
  font-weight: 700;
  margin-bottom: 10px;
  align-self: flex-start;
}

.support-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  margin-top: 24px;
  padding: 14px 16px;
  border: var(--b-dim);
}
.support-notice a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.support-notice a:hover { color: var(--teal); }

.support-alert {
  padding: 14px 20px;
  border: 1.5px solid var(--line-2);
  font-size: 14px;
  margin-bottom: 28px;
  line-height: 1.5;
}
.support-alert-success { border-color: var(--teal); color: var(--teal); background: rgba(94,230,214,0.05); }
.support-alert-cancel  { border-color: var(--line-2); color: var(--ink-2); }
.support-alert-error   { border-color: var(--rose); color: var(--rose); background: rgba(240,138,138,0.05); }

/* Discord modal (support page) */
.discord-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.7);
  align-items: center;
  justify-content: center;
}
.discord-modal-overlay.open { display: flex; }
.discord-modal {
  background: var(--bg-2);
  border: var(--b);
  padding: 28px;
  max-width: 400px;
  width: 90%;
}
.discord-modal h2 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.discord-modal p {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.5;
  margin-bottom: 16px;
}
.discord-modal label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.discord-modal input {
  width: 100%;
  background: var(--surface);
  border: var(--b-dim);
  padding: 10px 12px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  outline: none;
  margin-bottom: 16px;
}
.discord-modal input:focus { border-color: var(--ink); }
.discord-modal__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

@media (max-width: 768px) {
  .page-header  { padding: 32px 20px; }
  .page-section { padding: 28px 20px; }
  .ethos-block  { padding: 32px 20px; }
  .ethos-block__grid { grid-template-columns: 1fr; gap: 16px; }
  .support-grid { grid-template-columns: 1fr; max-width: 400px; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  padding: 56px 40px 40px;
}

.hero__grid {
  display: block;
}

.hero__h1 {
  font-size: clamp(60px, 7.5vw, 108px);
  line-height: 0.93;
  letter-spacing: -0.04em;
  font-weight: 700;
  margin-top: 16px;
}
.hero__h1 u {
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
}

.hero__ctas {
  display: flex;
  gap: 12px;
  margin-top: 32px;
  align-items: center;
  flex-wrap: wrap;
}

.hero__or {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  margin-left: 4px;
}
.hero__or a { color: var(--ink-2); text-decoration: none; }
.hero__or a:hover { color: var(--ink); }

.hero__sub {
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.55;
  margin-top: 18px;
  max-width: 560px;
}

/* Pull quote */
.hero__quote {
  padding: 24px;
  transform: rotate(1.5deg);
}
.hero__quote .eyebrow { margin-bottom: 12px; }
.hero__quote-text {
  font-size: 19px;
  line-height: 1.35;
  color: var(--ink);
  margin-bottom: 14px;
}
.hero__quote-attr {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero__quote-attr .mono {
  font-size: 11px;
  color: var(--ink-2);
  letter-spacing: 0.05em;
}

/* Feature band */
.hero__band {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: var(--b);
  border-bottom: var(--b);
}

.hero__band-item {
  padding: 18px 24px;
  border-right: 1.5px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero__band-item:last-child { border-right: none; }

.hero__band-name {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}

.hero__band-sub {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ============================================================
   THREE TRIBES
   ============================================================ */
.tribes { padding: 40px 40px; }

.section-head { margin-bottom: 24px; }
.section-h2 {
  font-size: clamp(36px, 4vw, 54px);
  letter-spacing: -0.04em;
  margin-top: 6px;
}

.tribes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: var(--b);
}

.tribe {
  padding: 28px;
  border-right: var(--b);
  position: relative;
}
.tribe:last-child { border-right: none; }
.tribe--alt { background: var(--bg-2); }

.tribe__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.tribe__tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tribe__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.tribe__name {
  font-size: clamp(30px, 3.2vw, 42px);
  letter-spacing: -0.04em;
  font-weight: 700;
  margin-bottom: 8px;
}
.tribe__lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15.5px;
  color: var(--ink-2);
  line-height: 1.45;
  margin-bottom: 12px;
}
.tribe__body {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.55;
  margin-bottom: 20px;
}
.tribe__tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto {
  padding: 40px 40px;
  background: var(--bg-2);
  border-top: var(--b);
  border-bottom: var(--b);
}

.manifesto__grid {
  display: grid;
  grid-template-columns: 140px 1fr 200px;
  gap: 40px;
  align-items: start;
}

.manifesto__text {
  font-family: var(--serif);
  font-size: clamp(22px, 2.8vw, 34px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.manifesto__text em { font-style: italic; }
.manifesto__accent { color: var(--teal); }

.manifesto__link {
  display: inline-block;
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.manifesto__halftone {
  height: 200px;
  border: var(--b-dim);
}

/* ============================================================
   CHOOSE YOUR SPACE
   ============================================================ */
.spaces { padding: 56px 40px 40px; }

.spaces__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.space-card {
  padding: 32px;
  display: flex;
  flex-direction: column;
  min-height: 360px;
}

.space-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.space-card__url {
  font-family: var(--mono);
  font-size: 10px;
  text-decoration: none;
}
.space-card__url:hover { text-decoration: underline; text-underline-offset: 3px; }

.space-card__title {
  font-size: clamp(44px, 5vw, 62px);
  letter-spacing: -0.04em;
  margin-top: 12px;
}

.space-card__desc {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.4;
  color: var(--ink);
  margin-top: 6px;
  margin-bottom: 14px;
  max-width: 440px;
  flex: 1;
}

.space-card__list {
  border: var(--b-dim);
}
.space-card__row {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1.5px solid var(--line);
  align-items: center;
  font-size: 13px;
}
.space-card__row:last-child { border-bottom: none; }
.space-card__row-cat {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
}
.space-card__row-meta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  text-align: right;
  white-space: nowrap;
}

.space-card__cta { margin-top: 20px; }

/* ============================================================
   BROOK
   ============================================================ */
.brook {
  padding: 60px 40px;
  background: var(--bg);
  border-top: var(--b);
  border-bottom: var(--b);
  position: relative;
  overflow: hidden;
}

.brook__dots {
  position: absolute;
  inset: 0;
  opacity: 0.45;
  background-image: radial-gradient(circle at 1px 1px, var(--line-2) 1px, transparent 1px);
  background-size: 14px 14px;
  pointer-events: none;
}

.brook__inner {
  position: relative;
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 56px;
  align-items: center;
}

/* Brook portrait */
.brook__portrait { position: relative; }

.brook__card {
  padding: 22px;
  background: var(--bg-2);
}

.brook__mascot {
  background: var(--warm);
  padding: 20px;
  display: flex;
  justify-content: center;
  border: var(--b);
  margin-top: 12px;
}

.brook__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 10px;
}
.brook__stat-label { color: var(--ink-3); margin-bottom: 2px; }
.brook__stat-value { font-weight: 700; font-size: 11px; }

.brook__stamp {
  position: absolute;
  top: -12px;
  right: -14px;
  color: var(--teal);
  background: var(--bg);
}

/* Full-width brook body (no portrait) */
.brook__body {
  position: relative;
  max-width: 800px;
}

/* Brook copy */
.brook__h2 {
  font-size: clamp(64px, 7.5vw, 108px);
  letter-spacing: -0.05em;
  line-height: 0.93;
  margin-top: 8px;
  font-weight: 700;
}
.brook__desc {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.4;
  color: var(--ink);
  margin-top: 14px;
  max-width: 580px;
}

.brook__features {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: var(--b);
  max-width: 640px;
}
.brook__feat {
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border-right: var(--b);
  border-bottom: var(--b);
}
.brook__feat:nth-child(2n)   { border-right: none; }
.brook__feat:nth-child(n+3)  { border-bottom: none; }

.brook__feat-icon { font-size: 17px; flex-shrink: 0; margin-top: 1px; }
.brook__feat-name {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink);
  letter-spacing: 0.04em;
}
.brook__feat-sub {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  margin-top: 2px;
}

.brook__ctas { display: flex; gap: 12px; margin-top: 22px; }

/* ============================================================
   CTA STRIP
   ============================================================ */
.cta-strip { padding: 64px 40px; }

.cta-strip__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
}

.cta-strip__h2 {
  font-size: clamp(48px, 6.5vw, 84px);
  letter-spacing: -0.05em;
  line-height: 0.96;
  font-weight: 700;
}

.cta-strip__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 240px;
}

.cta-strip__note {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  text-align: center;
  margin-top: 4px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  border-top: var(--b);
  padding: 36px 40px 20px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
  background: var(--bg-2);
}

.footer__big {
  font-size: clamp(52px, 6vw, 80px);
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 0.9;
  color: var(--ink);
}

.footer__tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-2);
  max-width: 280px;
  margin-top: 10px;
  line-height: 1.4;
}

.footer__btns {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.footer__col-title {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  margin-bottom: 12px;
  font-weight: 500;
}

.footer__link {
  display: block;
  color: var(--ink-2);
  font-size: 13.5px;
  text-decoration: none;
  padding: 3px 0;
}
.footer__link:hover { color: var(--teal); }

.footer__bottom {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1.5px solid var(--line);
  padding-top: 16px;
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.05em;
}
.footer__bottom a { color: var(--ink-3); text-decoration: none; }
.footer__bottom a:hover { color: var(--teal); }

/* ============================================================
   GAME SERVERS
   ============================================================ */
.servers {
  padding: 40px 40px;
  border-top: var(--b);
}

.servers__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
  margin-top: 0;
}

.server-card {
  padding: 24px;
  background: var(--surface);
}

.server-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
}

.server-card__name {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.server-card__meta {
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.05em;
}

.server-card__desc {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
  margin-bottom: 14px;
}

.server-card__instructions {
  border-top: var(--b-dim);
  padding-top: 12px;
  margin-top: 4px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.server-card__step {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.4;
}

.server-card__step-num {
  font-size: 10px;
  color: var(--ink-3);
  background: var(--surface-2);
  border: var(--b-dim);
  padding: 1px 6px;
  flex-shrink: 0;
  letter-spacing: 0.05em;
}

.server-card__cta { margin-top: 4px; }

.servers__note {
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  margin-top: 20px;
}
.servers__note a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.servers__note a:hover { color: var(--teal); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .manifesto__grid   { grid-template-columns: 100px 1fr; }
  .manifesto__halftone { display: none; }
  .brook__inner      { grid-template-columns: 1fr; }
  .brook__portrait   { display: none; }
  .cta-strip__inner  { grid-template-columns: 1fr; }
  .cta-strip__actions { flex-direction: row; min-width: 0; }
  .footer            { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .nav { padding: 0 20px; }
  .nav__links  { display: none; }
  .nav__hamburger { display: flex; }

  .nav__links.open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: var(--b);
    padding: 12px 20px 16px;
    gap: 2px;
    z-index: 99;
  }
  .nav__links.open .nav__link {
    width: 100%;
    font-size: 12px;
    padding: 10px 8px;
    border-color: transparent;
  }
  .nav__links.open .nav__cta {
    margin-left: 0;
    margin-top: 8px;
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .masthead { display: none; }

  .hero        { padding: 32px 20px 28px; }
  .tribes      { padding: 32px 20px; }
  .manifesto   { padding: 32px 20px; }
  .spaces      { padding: 32px 20px; }
  .brook       { padding: 32px 20px; }
  .servers     { padding: 32px 20px; }
  .cta-strip   { padding: 40px 20px; }
  .footer      { padding: 28px 20px 16px; grid-template-columns: 1fr 1fr; }
  .servers__list { grid-template-columns: 1fr; }

  .tribes__grid    { grid-template-columns: 1fr; }
  .tribe           { border-right: none; border-bottom: var(--b); }
  .tribe:last-child { border-bottom: none; }

  .spaces__grid { grid-template-columns: 1fr; }

  .manifesto__grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .hero__band    { display: none; }
  .hero__ctas    { flex-direction: column; align-items: flex-start; }
  .hero__or      { margin-left: 0; }
  .cta-strip__actions { flex-direction: column; }
  .footer        { grid-template-columns: 1fr; }
  .footer__big   { font-size: 56px; }
  .brook__features { grid-template-columns: 1fr; }
  .brook__feat   { border-right: none; border-bottom: var(--b); }
  .brook__feat:nth-child(2n) { border-right: none; }
  .brook__feat:nth-child(n+3) { border-bottom: var(--b); }
  .brook__feat:last-child { border-bottom: none; }
}

/* ============================================================
   FIX: VISITED LINK COLORS
   ============================================================ */
.btn:visited         { color: var(--bg); }
.btn--teal:visited   { color: var(--teal-ink); }
.btn--ghost:visited  { color: var(--ink); }
.btn--warm:visited   { color: #2A1A05; }
.nav__cta:visited    { color: var(--bg); }
.footer__link:visited { color: var(--ink-2); }

/* ============================================================
   SKELETON / LOADING PLACEHOLDERS
   ============================================================ */
.loading-placeholder { pointer-events: none; }

@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.skeleton-img,
.skeleton-text-lg,
.skeleton-text-sm,
.skeleton-title {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite;
}

.skeleton-img     { width: 72px; height: 72px; display: block; margin: 0 auto 10px; }
.skeleton-text-lg { height: 13px; width: 70%; margin: 0 auto 8px; }
.skeleton-text-sm { height: 10px; width: 50%; margin: 0 auto; }
.skeleton-title   { height: 17px; width: 60%; margin-bottom: 10px; }
.skeleton-item    { height: 50px; background: var(--surface); border-bottom: 1.5px solid var(--line); }

/* ============================================================
   LIVE DOT (shared between multiple pages)
   ============================================================ */
.live-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--line-2);
  flex-shrink: 0;
  vertical-align: middle;
}
.live-dot.live-dot-online,
.live-dot-online { background: var(--live); animation: pulse 1.6s infinite; }

/* ============================================================
   COMMUNITY PAGE — MEMBERS SLIDER
   ============================================================ */
.members-slider-container {
  position: relative;
  overflow: hidden;
  border: var(--b);
}
.members-slider-wrapper { overflow: hidden; }
.members-slider         { overflow: hidden; }

.members-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.member-card {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: 200px 1fr 180px;
  min-height: 200px;
  background: var(--surface);
}

.member-card-left {
  padding: 28px 24px;
  border-right: 1.5px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
.member-avatar {
  width: 80px; height: 80px;
  border: 1.5px solid var(--line-2);
  object-fit: cover;
  display: block;
  margin-bottom: 2px;
}
.member-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.member-title {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--teal);
}
.member-card-separator { display: none; }

.member-card-center {
  padding: 28px 24px;
  border-right: 1.5px solid var(--line);
  display: flex;
  align-items: flex-start;
}
.member-description {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
}

.member-card-right {
  padding: 24px;
  display: flex;
  align-items: flex-start;
}
.member-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.member-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  background: none;
  border: var(--b-dim);
  padding: 7px 10px;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.1s, border-color 0.1s;
  width: 100%;
}
.member-link:hover        { color: var(--ink); border-color: var(--ink); }
.member-link.twitch:hover { color: #9146ff; border-color: #9146ff; }
.member-link.youtube:hover{ color: #FF0000; border-color: #FF0000; }
.member-link.kick:hover   { color: #53fc18; border-color: #53fc18; }
.icon-sm { width: 14px; height: 14px; flex-shrink: 0; }

/* Slider nav arrows */
.slider-arrow-left,
.slider-arrow-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: var(--bg);
  border: var(--b);
  color: var(--ink);
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 18px;
  font-family: var(--mono);
  line-height: 1;
  transition: background 0.1s;
}
.slider-arrow-left  { left: 8px; }
.slider-arrow-right { right: 8px; }
.slider-arrow-left:hover,
.slider-arrow-right:hover { background: var(--surface); }
.slider-arrow-left:disabled,
.slider-arrow-right:disabled { opacity: 0.3; cursor: default; }

/* ============================================================
   COMMUNITY PAGE — UPDATES + SIDEBAR LAYOUT
   ============================================================ */
.community-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
  align-items: start;
}
.community-main { min-width: 0; }

.community-updates-list {
  display: flex;
  flex-direction: column;
}
.community-update {
  padding: 24px;
  border: var(--b-dim);
  margin-bottom: -1.5px;
  background: var(--bg);
  position: relative;
  z-index: 0;
}
.community-update:hover { z-index: 1; border-color: var(--ink-2); }

.community-update-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.community-update-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  flex: 1;
}
.community-update-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.community-update-category,
.community-update-date {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.community-update-pinned {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 2px 6px;
  background: var(--teal);
  color: var(--teal-ink);
  font-weight: 700;
}
.community-update-content {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.6;
}
.community-update-content p { margin-bottom: 8px; }
.community-update-content p:last-child { margin-bottom: 0; }
.community-update-list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.community-update-list li::before {
  content: '—';
  color: var(--ink-3);
  margin-right: 8px;
  font-family: var(--mono);
}
.community-update-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.community-update-tag {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.05em;
}

/* Sidebar */
.community-sidebar {
  display: flex;
  flex-direction: column;
  border: var(--b-dim);
}
.sidebar-section { border-bottom: var(--b-dim); }
.sidebar-section:last-child { border-bottom: none; }
.sidebar-section-title {
  padding: 10px 14px;
  border-bottom: var(--b-dim);
  background: var(--surface);
}
.sidebar-section-title > span {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  font-weight: 500;
  display: block;
}
.sidebar-section-content { padding: 12px 14px; }

/* Game servers sidebar */
.game-servers-list { display: flex; flex-direction: column; }
.game-server {
  padding: 10px 0;
  cursor: pointer;
  border-bottom: 1.5px solid var(--line);
}
.game-server:last-child { border-bottom: none; padding-bottom: 0; }
.game-server:hover .game-server-name { color: var(--teal); }
.game-server-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}
.game-server-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  transition: color 0.1s;
}
.game-server-status {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 4px;
}
.game-server-status.online  { color: var(--teal); }
.game-server-status.offline { color: var(--ink-3); }
.game-server-status-indicator { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.game-server-basic-info {
  display: flex;
  gap: 8px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}
.game-server-click-hint {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--line-2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Other servers sidebar */
.other-servers-list { display: flex; flex-direction: column; }
.other-server {
  padding: 10px 0;
  border-bottom: 1.5px solid var(--line);
}
.other-server:last-child { border-bottom: none; padding-bottom: 0; }
.other-server-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}
.other-server-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.other-server-info  { font-size: 12px; color: var(--ink-2); margin-bottom: 2px; }
.other-server-connection { font-family: var(--mono); font-size: 10px; color: var(--ink-3); }
.other-server-address { letter-spacing: 0.03em; }

/* Events calendar */
.sidebar-calendar-container { width: 100%; }
.sidebar-calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.sidebar-calendar-month-year {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink);
}
.sidebar-calendar-nav { display: flex; gap: 2px; }
.sidebar-calendar-nav-btn {
  background: none;
  border: var(--b-dim);
  color: var(--ink-2);
  font-size: 12px;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-family: var(--mono);
  line-height: 1;
  transition: border-color 0.1s, color 0.1s;
}
.sidebar-calendar-nav-btn:hover { border-color: var(--ink); color: var(--ink); }
.sidebar-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 2px;
}
.sidebar-calendar-weekday {
  font-family: var(--mono);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  text-align: center;
  padding: 2px 0;
}
.sidebar-calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}
.sidebar-calendar-day {
  font-family: var(--mono);
  font-size: 10px;
  text-align: center;
  padding: 4px 2px;
  cursor: pointer;
  color: var(--ink-2);
  line-height: 1.4;
  transition: background 0.1s, color 0.1s;
}
.sidebar-calendar-day:hover              { background: var(--surface); color: var(--ink); }
.sidebar-calendar-day.other-month       { color: var(--line-2); cursor: default; }
.sidebar-calendar-day.other-month:hover { background: none; color: var(--line-2); }
.sidebar-calendar-day.today             { border: 1px solid var(--teal); color: var(--teal); }
.sidebar-calendar-day.has-event::after {
  content: '';
  display: block;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--teal);
  margin: 1px auto 0;
}
.sidebar-calendar-day.selected { background: var(--surface-2); color: var(--ink); }
.sidebar-calendar-day.today.selected { border-color: var(--teal); }
.sidebar-selected-date-events {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sidebar-date-event {
  padding: 10px 12px;
  border: var(--b-dim);
  background: var(--bg);
}
.sidebar-date-event.has-link  { cursor: pointer; }
.sidebar-date-event.has-link:hover { border-color: var(--ink-2); }
.sidebar-date-event.ongoing   { border-color: var(--live); }
.sidebar-date-event-ongoing {
  font-family: var(--mono);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--live);
  margin-bottom: 4px;
  display: block;
}
.sidebar-date-event-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 4px;
}
.sidebar-date-event-time {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.03em;
  margin-top: 2px;
}
.sidebar-date-event-description,
.sidebar-date-event-organizer,
.sidebar-date-event-location {
  font-size: 12px;
  color: var(--ink-2);
  margin-top: 2px;
}
.sidebar-date-event-link {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal);
  margin-top: 5px;
  display: block;
}

/* ============================================================
   MEMBERS GRID PAGE
   ============================================================ */
.members-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0;
}
.member-grid-card {
  background: transparent;
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 7px;
  cursor: pointer;
  position: relative;
  transition: background 0.1s;
}
.member-grid-card:hover { background: var(--surface-2); }
.member-grid-avatar {
  width: 72px; height: 72px;
  object-fit: cover;
  border: 1.5px solid var(--line-2);
  display: block;
}
.member-grid-name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-top: 2px;
}
.member-grid-role {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.member-grid-role--founder  { color: var(--warm); }
.member-grid-role--admin    { color: var(--teal); }
.member-grid-role--supermod { color: var(--violet); }
.member-grid-role--mod      { color: var(--rose); }
.member-grid-bio-preview {
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.member-grid-platforms {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2px;
}
.member-grid-platform-btn {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: none;
  border: var(--b-dim);
  color: var(--ink-3);
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  transition: color 0.1s, border-color 0.1s;
}
.member-grid-platform-btn:hover { color: var(--ink); border-color: var(--ink); }
.member-grid-platform-icon,
.member-grid-social-icon { width: 13px; height: 13px; display: block; }
.member-grid-live-badge {
  position: absolute;
  top: 10px; right: 10px;
  font-family: var(--mono);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--live);
  border: 1px solid var(--live);
  padding: 2px 5px;
  display: flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}

/* Member modal */
.member-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(14, 20, 19, 0.88);
  align-items: center;
  justify-content: center;
}
.member-modal-overlay.open { display: flex; }
.member-modal-panel {
  background: var(--bg-2);
  border: var(--b);
  padding: 28px;
  max-width: 480px;
  width: 92%;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}
.member-modal-close {
  position: absolute;
  top: 14px; right: 14px;
  background: none;
  border: var(--b-dim);
  color: var(--ink-2);
  font-size: 18px;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  line-height: 1;
  transition: border-color 0.1s, color 0.1s;
}
.member-modal-close:hover { border-color: var(--ink); color: var(--ink); }
.member-modal-header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
  padding-right: 32px;
}
.member-modal-avatar {
  width: 72px; height: 72px;
  object-fit: cover;
  border: 1.5px solid var(--line-2);
  flex-shrink: 0;
}
.member-modal-meta { flex: 1; min-width: 0; }
.member-modal-role {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.member-modal-role--founder  { color: var(--warm); }
.member-modal-role--admin    { color: var(--teal); }
.member-modal-role--supermod { color: var(--violet); }
.member-modal-role--mod      { color: var(--rose); }
.member-modal-name {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0;
}
.member-modal-live-badge {
  font-family: var(--mono);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--live);
  border: 1px solid var(--live);
  padding: 2px 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  margin-top: 6px;
}
.member-modal-bio {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.55;
  margin-bottom: 20px;
}
.member-modal-socials { display: flex; gap: 6px; flex-wrap: wrap; }
.member-grid-social-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 7px 10px;
  border: var(--b-dim);
  color: var(--ink-2);
  text-decoration: none;
  background: none;
  cursor: pointer;
  transition: color 0.1s, border-color 0.1s;
}
.member-grid-social-link:hover { color: var(--ink); border-color: var(--ink); }

/* ============================================================
   LIVE PAGE
   ============================================================ */
.streamer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: var(--b);
}
.streamer-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 20px;
  border-bottom: 1.5px solid var(--line);
  gap: 16px;
  transition: background 0.1s;
}
.streamer-item:last-child     { border-bottom: none; }
.streamer-item.hidden         { display: none !important; }
.streamer-item.filtering      { opacity: 0.5; }
.streamer-item:hover          { background: var(--surface); }
.streamer-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  letter-spacing: -0.01em;
}
.streamer-name.live { color: var(--ink); font-weight: 600; }
.platform-icons-row { display: flex; gap: 4px; align-items: center; }
.platform-icon-link {
  color: var(--ink-3);
  opacity: 0.5;
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: opacity 0.1s, color 0.1s;
}
.platform-icon-link:hover             { opacity: 1; color: var(--ink); }
.platform-icon-link.live              { opacity: 1; }
.platform-icon-link.platform-twitch.live  { color: #9146ff; }
.platform-icon-link.platform-youtube.live { color: #FF0000; }
.platform-icon-link.platform-kick.live    { color: #53fc18; }
.group-pill {
  font-family: var(--mono);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 2px 6px;
  border: var(--b-dim);
  color: var(--ink-3);
  white-space: nowrap;
}
.category-pill {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  border: var(--b-dim);
  padding: 2px 6px;
  white-space: nowrap;
}
.multi-streaming-badge {
  font-family: var(--mono);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--teal);
  border: 1px solid var(--teal);
  padding: 2px 6px;
}

/* Flex utilities (live.js-generated HTML uses these) */
.flex          { display: flex; }
.items-center  { align-items: center; }
.gap-1         { gap: 4px; }
.gap-2         { gap: 8px; }
.gap-3         { gap: 12px; }
.min-w-0       { min-width: 0; }
.flex-1        { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }

/* ============================================================
   DIRECTORY PAGE
   ============================================================ */
.directory-search-wrap { margin-bottom: 8px; }
.directory-search {
  width: 100%;
  background: var(--surface);
  border: var(--b);
  padding: 12px 16px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  outline: none;
  margin-bottom: 16px;
  box-sizing: border-box;
  transition: border-color 0.1s;
}
.directory-search:focus       { border-color: var(--teal); }
.directory-search::placeholder { color: var(--ink-3); }
.directory-filters  { margin-bottom: 16px; }
.directory-filter-group { margin-bottom: 12px; }
.directory-filter-label {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  display: block;
  margin-bottom: 6px;
}
.directory-filter-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.directory-filter-tag {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 9px;
  border: var(--b-dim);
  background: none;
  color: var(--ink-3);
  cursor: pointer;
  transition: color 0.1s, border-color 0.1s, background 0.1s;
}
.directory-filter-tag:hover  { color: var(--ink-2); border-color: var(--ink-2); }
.directory-filter-tag.active {
  border-color: var(--teal);
  color: var(--teal);
  background: rgba(94, 230, 214, 0.06);
}
.directory-results-count {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.directory-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.directory-card {
  background: var(--surface);
  border: var(--b-dim);
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: 280px 1fr;
  transition: border-color 0.1s;
}
.directory-card:hover { border-color: var(--ink-2); }
.directory-card-sidebar {
  padding: 24px;
  border-right: var(--b-dim);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.directory-sidebar-header {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.directory-avatar {
  width: 56px; height: 56px;
  object-fit: cover;
  border: 1.5px solid var(--line-2);
  flex-shrink: 0;
}
.directory-card-name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.directory-card-description {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
}
.directory-tags-section  { display: flex; flex-direction: column; gap: 6px; }
.directory-section-label {
  font-family: var(--mono);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}
.directory-tags-wrapper { display: flex; gap: 4px; flex-wrap: wrap; }
.directory-role-tag {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 7px;
  border-color: var(--teal);
  border: 1px solid var(--teal);
  color: var(--teal);
}
.directory-industry-tag {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 7px;
  border: 1px solid var(--violet);
  color: var(--violet);
}
.directory-card-links {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 8px;
}
.directory-card-link {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border: var(--b-dim);
  color: var(--ink-3);
  text-decoration: none;
  background: none;
  cursor: pointer;
  transition: color 0.1s, border-color 0.1s;
  padding: 0;
}
.directory-card-link:hover         { color: var(--ink); border-color: var(--ink); }
.directory-card-link svg           { width: 13px; height: 13px; }
.directory-card-link.twitch:hover  { color: #9146ff; border-color: #9146ff; }
.directory-card-link.youtube:hover { color: #FF0000; border-color: #FF0000; }
.directory-card-link.kick:hover    { color: #53fc18; border-color: #53fc18; }
.directory-card-link.discord:hover { color: #5865f2; border-color: #5865f2; }
.directory-card-link.instagram:hover { color: #E1306C; border-color: #E1306C; }
.directory-card-main { overflow: hidden; }
.directory-slider-container { position: relative; overflow: hidden; height: 100%; min-height: 240px; }
.slider-track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.slider-track::-webkit-scrollbar { display: none; }
.slider-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  overflow: hidden;
}
.slider-slide img   { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-container    { width: 100%; height: 100%; min-height: 280px; }
.video-container iframe { width: 100%; height: 100%; border: 0; display: block; }
.audio-embed        { width: 100%; }
.bandcamp-wrap      { width: 100%; max-width: 700px; margin: 0 auto; }
.slider-nav {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  z-index: 2;
}
.slider-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  cursor: pointer;
  transition: background 0.1s;
}
.slider-dot.active { background: var(--ink); }
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(14,20,19,0.7);
  border: var(--b-dim);
  color: var(--ink);
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 14px;
  z-index: 2;
  transition: background 0.1s;
}
.slider-arrow:hover { background: var(--bg); }
.slider-prev { left: 6px; }
.slider-next { right: 6px; }

/* swiss-col / swiss-grid utilities (directory inline JS) */
.swiss-col-12 { width: 100%; }
.swiss-grid   { display: flex; flex-direction: column; }
.mt-8         { margin-top: 32px; }

/* ============================================================
   SCROLL REVEAL (community.js / directory.js animation hook)
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.revealed { opacity: 1; transform: translateY(0); }

/* ============================================================
   SERVER DETAIL MODAL (community.js — game server details)
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(14, 20, 19, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-content-wrapper {
  background: var(--bg-2);
  border: var(--b);
  padding: 28px;
  max-width: 520px;
  width: 92%;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
}
.server-detail-content { color: var(--ink); font-size: 14px; line-height: 1.6; }
.server-detail-content h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 12px; }
.server-detail-content p { color: var(--ink-2); margin-bottom: 8px; }
.server-detail-content ol, .server-detail-content ul { color: var(--ink-2); padding-left: 18px; }
.server-detail-content li { margin-bottom: 4px; }
.server-detail-content code { font-family: var(--mono); font-size: 12px; background: var(--surface-2); padding: 2px 6px; }

/* ============================================================
   GAME SERVERS PAGE
   ============================================================ */
.game-servers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 0;
  border-top: var(--b);
  border-left: var(--b);
}
.gs-card {
  background: var(--surface);
  border-right: var(--b);
  border-bottom: var(--b);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
  transition: background 0.1s;
}
.gs-card:hover { background: var(--surface-2); }
.gs-card.offline { opacity: 0.6; cursor: default; }
.gs-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.gs-card-name {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.gs-card-game {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-2);
  margin: 0;
}
.gs-card-status {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.gs-card-status.online  { color: var(--teal); }
.gs-card-status.offline { color: var(--ink-3); }
.gs-status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.gs-players {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.gs-players-bar {
  height: 3px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.gs-players-bar-fill {
  position: absolute;
  inset: 0;
  background: var(--teal);
  transition: width 0.3s;
}
.gs-desc {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
}
.gs-type-tag {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 7px;
  border: var(--b-dim);
  color: var(--ink-3);
  display: inline-block;
  align-self: flex-start;
}
.gs-join-btn {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 10px 16px;
  background: none;
  border: var(--b);
  color: var(--teal);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.1s, color 0.1s;
  margin-top: auto;
}
.gs-join-btn:hover { background: rgba(94,230,214,0.08); }
.gs-copy-ip {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  background: var(--surface-2);
  border: var(--b-dim);
  padding: 8px 12px;
  cursor: pointer;
  transition: border-color 0.1s, color 0.1s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.gs-copy-ip:hover { border-color: var(--ink-2); color: var(--ink-2); }
.gs-connect-row { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.gs-no-servers {
  padding: 60px 40px;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  border: var(--b-dim);
}

/* ============================================================
   RESPONSIVE — NEW COMPONENTS
   ============================================================ */
@media (max-width: 1024px) {
  .community-layout  { grid-template-columns: 1fr 280px; }
  .member-card       { grid-template-columns: 160px 1fr; }
  .member-card-right { grid-column: 1 / -1; border-top: 1.5px solid var(--line); border-right: none; }
}
@media (max-width: 900px) {
  .community-layout      { grid-template-columns: 1fr; }
  .directory-card        { grid-template-columns: 1fr; }
  .directory-card-sidebar { border-right: none; border-bottom: var(--b-dim); }
}
@media (max-width: 768px) {
  .member-card       { grid-template-columns: 1fr; }
  .member-card-left  { border-right: none; border-bottom: 1.5px solid var(--line); padding: 20px; }
  .member-card-center{ border-right: none; border-bottom: 1.5px solid var(--line); }
  .member-card-right { grid-column: auto; border-top: none; }
  .members-grid      { grid-template-columns: repeat(2, 1fr); }
  .streamer-item     { padding: 10px 16px; }
}
@media (max-width: 480px) {
  .members-grid      { grid-template-columns: repeat(2, 1fr); }
  .group-pill        { display: none; }
}