.home-community-card {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  min-width: 0;
  min-height: 350px;
  padding: 28px 24px 0;
  overflow: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 12%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 30%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 94%, #000), color-mix(in srgb, var(--panel-soft) 88%, #000));
  border: 1px solid color-mix(in srgb, var(--border) 78%, var(--gold));
  border-radius: 8px;
  box-shadow: var(--glow), 0 18px 38px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 235, 198, .08);
  text-align: center;
}

.home-community-card::before {
  position: absolute;
  inset: 5px;
  z-index: -1;
  content: "";
  pointer-events: none;
  border: 1px dashed color-mix(in srgb, var(--gold) 58%, transparent);
  border-radius: 6px;
}

.home-community-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  color: var(--gold);
  filter: drop-shadow(0 3px 8px color-mix(in srgb, var(--gold) 24%, transparent));
}

.home-community-card h2 {
  margin: 0;
  color: var(--text);
  font-family: var(--display-font);
  font-size: clamp(1.55rem, 2vw, 1.9rem);
  line-height: 1.05;
}

.home-community-card > strong {
  margin-top: 8px;
  color: var(--gold);
  font-family: var(--display-font);
  font-size: 1rem;
}

.home-community-divider {
  position: relative;
  display: block;
  width: min(82%, 220px);
  height: 1px;
  margin: 20px 0 18px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}

.home-community-divider::after {
  position: absolute;
  top: 0;
  left: 50%;
  width: 34px;
  height: 1px;
  content: "";
  background: var(--gold);
  transform: translateX(-50%);
}

.home-community-card p {
  z-index: 1;
  width: min(100%, 27ch);
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
  font-weight: 750;
  line-height: 1.55;
}

.home-community-art {
  align-self: end;
  width: min(72%, 210px);
  height: auto;
  margin-top: 16px;
  margin-bottom: 14px;
  opacity: .82;
  object-fit: contain;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .32));
}

.app-shell[data-theme="light"] .home-community-card,
.app-shell.shelf-visual-light .home-community-card {
  background:
    radial-gradient(circle at 50% 12%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 30%),
    linear-gradient(180deg, var(--panel), var(--panel-soft));
  box-shadow: var(--glow), 0 16px 34px rgba(92, 58, 28, .14), inset 0 1px rgba(255, 255, 255, .64);
}

/* Keep the desktop Community card level with the neighbouring dashboard
   content while Quick Actions keeps its natural height above it. */
@media (min-width: 1281px) {
  .app-shell.home-app-mode .home-dashboard-grid {
    align-items: stretch;
  }

  .app-shell.home-app-mode .home-dashboard-aside {
    grid-template-rows: auto auto auto minmax(0, 1fr);
    align-content: stretch;
    height: 100%;
  }

  .app-shell.home-app-mode .home-dashboard-aside > .home-community-card {
    min-height: 0;
    height: auto;
    align-self: start;
    box-sizing: border-box;
  }
}

@media (max-width: 760px) {
  .home-mobile-overview-stack .home-community-card {
    min-height: 330px;
    padding-inline: 20px;
  }

  .home-community-art {
    width: min(68%, 195px);
  }
}

/* Remove the space left below the raised Community illustration. */
@media (min-width: 1281px) {
  .home-dashboard-aside .home-community-art.cosy-artwork-adjusted { margin-bottom: -58px; }
}

/* Self-contained illustration: no blocked external SVG image reference. */
.home-community-card .home-community-art { content: url("./line-art/book-stack-plants-embedded-149.svg") !important; }