.community-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  padding: 16px 0;
}

.community-card {
  position: relative;
  background: var(--rsn-surface, #1C2333);
  border: 1px solid var(--rsn-border, rgba(255,255,255,.08));
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  outline: none;
  --c-accent: #3BC8C8;
}
.community-card:hover,
.community-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--c-accent);
  box-shadow:
    0 12px 28px rgba(0,0,0,.35),
    0 0 0 1px color-mix(in oklab, var(--c-accent) 60%, transparent),
    0 0 24px color-mix(in oklab, var(--c-accent) 25%, transparent);
}

.community-card-hero {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--c-accent) 18%, #000 82%),
    color-mix(in oklab, var(--c-accent) 5%, #000 95%));
  position: relative;
  overflow: hidden;
}
.community-card-hero img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .4s ease;
}
.community-card:hover .community-card-hero img { transform: scale(1.04); }

.community-card-hero--empty {
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.25); font-size: 40px;
}

.community-card-body {
  padding: 12px 14px 14px;
  position: relative;
}
.community-card-earmark {
  position: absolute;
  top: -14px; right: 14px;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--c-accent);
  color: #0A0C12;
  font-weight: 800; font-size: 12px;
  box-shadow:
    0 2px 6px rgba(0,0,0,.35),
    0 0 14px color-mix(in oklab, var(--c-accent) 50%, transparent);
}
.community-card-name {
  font-family: 'Poppins', sans-serif;
  font-weight: 700; font-size: 15px;
  color: var(--rsn-text, #f4f1ec);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.community-card-tagline {
  font-size: 12px; line-height: 1.45;
  color: var(--rsn-text-muted, #A098B0);
  margin-bottom: 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.community-card-tags {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.community-card-tag {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  color: var(--rsn-text-muted, #A098B0);
  border: 1px solid rgba(255,255,255,.06);
  text-transform: lowercase;
}

.community-detail {
  position: fixed; inset: 0;
  z-index: 9000;
  overflow-y: auto; overflow-x: hidden;
  background: var(--c-bg, #0A0A0F);
  color: var(--c-text, #F4F1EC);
  font-family: var(--c-font-body, 'Poppins'), system-ui, sans-serif;
  line-height: 1.6;

  animation: holo-rasterize 520ms cubic-bezier(.2,.9,.2,1) both;
  --c-holo: var(--c-primary, #3BC8C8);
}

.community-detail.community-detail--closing {
  animation: holo-derasterize 340ms cubic-bezier(.6,.0,.8,.1) both;
}

.community-detail::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
    transparent 0%,
    color-mix(in oklab, var(--c-holo) 16%, transparent) 48%,
    color-mix(in oklab, var(--c-holo) 55%, transparent) 50%,
    color-mix(in oklab, var(--c-holo) 16%, transparent) 52%,
    transparent 100%);
  height: 40%;
  z-index: 9999;
  animation: holo-scan 720ms cubic-bezier(.2,.7,.4,1) both;
  mix-blend-mode: screen;
}
.community-detail::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9998;
  background: repeating-linear-gradient(to bottom,
    rgba(255,255,255,.02) 0 1px, transparent 1px 3px);
  opacity: .0;
  animation: holo-crt-fade 800ms ease-out both;
  mix-blend-mode: overlay;
}
.community-detail[data-scanlines="1"]::after {
  animation-fill-mode: both;
  opacity: 1;
}

@keyframes holo-rasterize {
  0%   { opacity: 0; filter: hue-rotate(120deg) blur(6px) saturate(1.6); clip-path: inset(0 0 100% 0); }
  35%  { opacity: .7; filter: hue-rotate(45deg) blur(2px) saturate(1.3); clip-path: inset(0 0 40% 0); }
  70%  { opacity: .95; filter: hue-rotate(8deg) blur(.5px) saturate(1.1); clip-path: inset(0 0 0 0); }
  100% { opacity: 1; filter: none; clip-path: inset(0 0 0 0); }
}
@keyframes holo-derasterize {
  0%   { opacity: 1; filter: none; }
  60%  { opacity: .6; filter: hue-rotate(60deg) blur(1px) saturate(1.4); clip-path: inset(20% 0 20% 0); }
  100% { opacity: 0; filter: hue-rotate(180deg) blur(8px) saturate(2);    clip-path: inset(48% 0 48% 0); }
}
@keyframes holo-scan {
  from { transform: translateY(-60%); opacity: 0; }
  30%  { opacity: 1; }
  to   { transform: translateY(180%); opacity: 0; }
}
@keyframes holo-crt-fade {
  from { opacity: .6; }
  to   { opacity: 0; }
}

.holo-section {
  animation: holo-row-in 480ms cubic-bezier(.2,.9,.2,1) both;
  animation-delay: calc(60ms + var(--i, 0) * 55ms);
}
@keyframes holo-row-in {
  from { opacity: 0; transform: translateY(6px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0);   filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .community-detail,
  .community-detail::before,
  .community-detail::after,
  .community-detail .holo-section { animation: none !important; }
}

.community-back-btn {
  position: sticky; top: 16px; left: 16px;
  margin: 16px 0 0 16px; z-index: 10;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: color-mix(in oklab, var(--c-surface, #16121D) 70%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--c-border, rgba(255,255,255,.08));
  color: var(--c-text, #F4F1EC);
  border-radius: 999px;
  font-family: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.community-back-btn:hover {
  background: color-mix(in oklab, var(--c-primary, #3BC8C8) 18%, var(--c-surface, #16121D));
  border-color: var(--c-primary, #3BC8C8);
  transform: translateX(-2px);
}

.community-hero {
  position: relative;
  min-height: 54vh;
  overflow: hidden;
  margin-top: -50px;
}
.community-hero-img {
  position: absolute; inset: 0;
  z-index: 1;
}
.community-hero-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.community-hero-overlay {
  position: absolute; inset: 0;
  z-index: 2;
  background: linear-gradient(180deg,
    transparent 30%,
    color-mix(in oklab, var(--c-bg, #0A0A0F) 75%, transparent) 70%,
    var(--c-bg, #0A0A0F) 100%);
}
.community-hero-content {
  position: relative; z-index: 3;
  max-width: 1100px;
  margin: 0 auto;
  padding: 18vh 48px 40px;
}
.community-hero-logo {
  max-height: 80px; margin-bottom: 18px;
  display: block;
}
.community-hero-title {
  font-family: var(--c-font-heading, 'Poppins'), serif;
  font-size: clamp(44px, 8vw, 96px);
  line-height: 1;
  margin: 0 0 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--c-text, #F4F1EC);
  text-shadow: 0 4px 40px color-mix(in oklab, var(--c-bg, #000) 70%, transparent);
}
.community-hero-title--uppercase-tracked {
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
}
.community-hero-title--serif-bold {
  font-weight: 800; letter-spacing: -0.03em;
}
.community-hero-title--neon {
  color: var(--c-primary, #3BC8C8);
  text-shadow:
    0 0 4px var(--c-primary, #3BC8C8),
    0 0 20px color-mix(in oklab, var(--c-primary, #3BC8C8) 60%, transparent);
}
.community-hero-tagline {
  font-size: clamp(16px, 1.5vw, 22px);
  max-width: 640px;
  color: var(--c-muted, #A098B0);
  margin: 0;
}

.community-cta-row {
  max-width: 1100px; margin: 0 auto;
  padding: 24px 48px;
  display: flex; flex-wrap: wrap; gap: 10px;
  border-bottom: 1px solid var(--c-border, rgba(255,255,255,.08));
}
.community-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px;
  background: var(--c-primary, #3BC8C8);
  color: var(--c-on-primary, #0A0C12);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600; font-size: 14px;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  border: 1px solid color-mix(in oklab, var(--c-primary, #3BC8C8) 80%, #000);
}
.community-cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 8px 22px color-mix(in oklab, var(--c-primary, #3BC8C8) 40%, transparent);
}
.community-cta:nth-child(n+2) {
  background: transparent;
  color: var(--c-text, #F4F1EC);
  border-color: var(--c-border, rgba(255,255,255,.18));
}
.community-cta:nth-child(n+2):hover {
  border-color: var(--c-primary, #3BC8C8);
  color: var(--c-primary, #3BC8C8);
  box-shadow: none;
}

.community-body {
  max-width: 1100px; margin: 0 auto;
  padding: 32px 48px 80px;
}
.community-section {
  margin-bottom: 48px;
}
.community-section h2 {
  font-family: var(--c-font-heading, 'Poppins'), serif;
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
  color: var(--c-text, #F4F1EC);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--c-border, rgba(255,255,255,.08));
}
.community-prose p { margin: 0 0 14px; color: var(--c-text, #F4F1EC); opacity: .92; }
.community-prose a { color: var(--c-primary, #3BC8C8); }

.community-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.community-gallery-item {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--c-border, rgba(255,255,255,.08));
  background: var(--c-surface, #16121D);
}
.community-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

.community-schedule { list-style: none; padding: 0; margin: 0; }
.community-schedule-item {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--c-border, rgba(255,255,255,.06));
}
.community-schedule-when {
  color: var(--c-primary, #3BC8C8);
  font-weight: 600; font-variant-numeric: tabular-nums;
  font-size: 13px;
}
.community-schedule-title { font-weight: 600; }
.community-schedule-detail {
  display: block; grid-column: 2;
  color: var(--c-muted, #A098B0); font-size: 13px; margin-top: 4px;
}
.community-schedule-empty {
  color: var(--c-muted, #A098B0); font-style: italic; padding: 14px 0;
}

.community-embed {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--c-border, rgba(255,255,255,.08));
}
.community-embed iframe { width: 100%; height: 100%; border: 0; }

.community-footer {
  max-width: 1100px; margin: 0 auto;
  padding: 20px 48px 40px;
  border-top: 1px solid var(--c-border, rgba(255,255,255,.08));
  color: var(--c-muted, #A098B0);
  font-size: 12px;
}

.community-detail[data-corner-cuts="1"] .community-hero {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%);
}

body.community-detail-open { overflow: hidden; }

@media (max-width: 720px) {
  .community-hero-content { padding: 14vh 20px 28px; }
  .community-cta-row,
  .community-body,
  .community-footer { padding-left: 20px; padding-right: 20px; }
  .community-schedule-item { grid-template-columns: 1fr; }
}

body.xp-mode .community-detail,
body.xp-mode .community-detail::before,
body.xp-mode .community-detail::after,
body.xp-mode .community-detail .holo-section {
  animation: none !important;
  background-image: none !important;
  filter: none !important;
  clip-path: none !important;
}
body.xp-mode .community-detail {
  background: #ECE9D8;
  color: #000;
  font-family: 'Tahoma','MS Sans Serif',sans-serif !important;
  inset: 40px;
  border: 1px solid #0A246A;
  border-radius: 6px;
  box-shadow:
    0 0 0 1px #f6f6ee inset,
    0 10px 30px rgba(0,0,0,.45);
  overflow: hidden;
  display: flex; flex-direction: column;
}
body.xp-mode .community-detail::before {
  content: attr(data-community) ' · SwarmSearch Community';
  position: static !important;
  display: block;
  height: 26px !important;
  padding: 4px 10px; box-sizing: border-box;
  background: linear-gradient(180deg, #0C59D7 0%, #1E82E6 50%, #0C59D7 100%) !important;
  color: #fff !important; font-weight: 700;
  font-size: 12px; line-height: 18px;
  text-transform: uppercase;
  mix-blend-mode: normal !important;
}
body.xp-mode .community-back-btn {
  position: static; margin: 8px;
  background: #ECE9D8 !important;
  border: 1px solid #ACA899 !important;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #716F64;
  color: #000 !important; backdrop-filter: none;
  border-radius: 3px !important;
}
body.xp-mode .community-hero { min-height: auto; margin-top: 0; }
body.xp-mode .community-hero-img { position: relative; height: 200px; }
body.xp-mode .community-hero-overlay { display: none; }
body.xp-mode .community-hero-content { padding: 16px 20px; }
body.xp-mode .community-hero-title { color: #000 !important; text-shadow: none; font-size: 24px; }
body.xp-mode .community-hero-tagline { color: #333 !important; }
body.xp-mode .community-cta {
  background: #ECE9D8 !important;
  color: #000 !important;
  border: 1px solid #ACA899 !important;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #716F64;
  border-radius: 3px !important;
}