/* Real people and work take the foreground; the pixel kampung remains the setting. */
.s-community { padding: 100px 24px 90px; }
.community-showcase { max-width: 1180px; margin: auto; pointer-events: auto; }
.community-heading { margin-bottom: 28px; text-shadow: 0 2px 4px var(--bg), 0 0 20px var(--bg); }
.community-kicker { margin: 0 0 16px; color: var(--mint); text-transform: uppercase; letter-spacing: .14em; font: 700 12px/1.4 var(--f-mono); }
.community-heading h2 { color: var(--mint); font: 600 clamp(30px, 4vw, 52px)/1.1 var(--f-pixel); margin: 0 0 16px; max-width: 100%; }
.community-intro { margin: 0; color: var(--paper-2); font-size: 16px; }
.community-stories { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 18px; }
.community-card { background: #0d1b13; border: 1px solid #48644e; display: flex; flex-direction: column; min-width: 0; box-shadow: 5px 5px 0 #050d09; transition: transform .2s, border-color .2s; }
.community-card:hover { transform: translateY(-4px); border-color: var(--mint); }
.community-photo { display: block; height: 160px; overflow: hidden; background: #132019; }
.community-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: scale .35s; }
.community-photo:hover img { scale: 1.035; }
.community-card-copy { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.community-label { margin: 0 0 12px; color: var(--green); font: 700 11px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; }
.community-person { display: flex; align-items: center; gap: 8px; font: 12px/1.5 var(--f-mono); color: #b5c6b9; margin: 0 0 10px; }
.community-person img { width: 26px; height: 26px; object-fit: cover; border-radius: 50%; }
.community-card h3 { margin: 0 0 10px; font: 600 21px/1.25 var(--f-body); }
.community-card h3 a { text-decoration: none; }
.community-card h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.community-card-copy > p:not([class]) { margin: 0 0 18px; color: #c9d6cc; font-size: 14px; }
.community-action { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; color: var(--mint); font: 600 17px/1.3 var(--f-pixel); text-underline-offset: 6px; margin-top: auto; align-self: flex-start; }
.community-story { background: #13261c; }
.community-story > .community-label { padding: 20px 20px 0; margin: 0; }
.community-quote { padding: 0 20px 4px; }
.quote-mark { display: block; color: var(--green); font: 60px/.9 var(--f-pixel); margin-top: 20px; }
.community-quote blockquote { margin: 0; font: 500 18px/1.5 var(--f-body); color: var(--paper); }
.community-story .community-card-copy { justify-content: flex-end; }
.community-story h3 { font-size: 16px; font-weight: 500; }
.community-finder { margin-top: 36px; border-top: 1px solid #58735f; padding-top: 24px; display: grid; grid-template-columns: 1fr auto; gap: 18px 28px; }
.community-finder-heading h3 { margin: 0 0 6px; font: 600 26px/1.2 var(--f-pixel); color: var(--mint); }
.community-finder-heading p { margin: 0; font-size: 14px; color: var(--paper-2); text-shadow: 0 2px 3px var(--bg); }
.community-interests { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.community-interests button { min-height: 44px; padding: 10px 16px; background: #0a1610; border: 1px solid #597761; color: var(--mint); cursor: pointer; font: 600 16px/1.2 var(--f-pixel); }
.community-interests button[aria-selected=true] { background: var(--mint); color: var(--ink); border-color: var(--mint); }
.community-guild { grid-column: 1/-1; display: flex; align-items: center; gap: 20px; padding: 18px 20px; background: #0d1b13; border-left: 3px solid var(--green); min-height: 112px; }
.community-guild-art { width: 72px; height: 72px; object-fit: contain; flex: none; }
.community-guild-copy { flex: 1; }
.community-guild h3 { margin: 0 0 5px; font-size: 18px; }
.community-guild p { margin: 0; color: #c9d6cc; font-size: 14px; max-width: 65ch; }
.community-guild .community-action { align-self: center; margin-top: 0; white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 900px) {
  .community-stories { grid-template-columns: 1fr 1fr; }
  .community-story { grid-column: 1/-1; display: grid; grid-template-columns: 1.5fr 1fr; }
  .community-story > .community-label { grid-column: 1/-1; }
  .community-story .community-card-copy { padding-top: 20px; }
  .community-quote { padding-bottom: 24px; }
  .community-finder { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .s-community { padding: 100px 16px 64px; }
  .community-heading h2 { font-size: 34px; }
  .community-intro { font-size: 14px; max-width: 33ch; }
  .community-stories { grid-template-columns: 1fr; gap: 18px; }
  .community-card-copy { padding: 18px; }
  .community-story { display: flex; grid-column: auto; }
  .community-quote { padding-bottom: 0; }
  .community-quote blockquote { font-size: 20px; }
  .community-interests { gap: 6px; }
  .community-interests button { padding-inline: 12px; font-size: 15px; }
  .community-guild { flex-wrap: wrap; gap: 12px; padding: 16px; }
  .community-guild-art { width: 52px; height: 52px; }
  .community-guild-copy { flex-basis: calc(100% - 64px); }
  .community-guild .community-action { margin-left: 64px; }
}

#world, #player { opacity: var(--community-scenery-opacity, 1); }
body.community-reading #player { visibility: hidden; }
.community-person a { text-decoration: none; }
.community-person a:hover { color: var(--mint); text-decoration: underline; text-underline-offset: 4px; }