/* ═══════════════════════════════════════════════════════════════════
   community.css — Community & Service (jade)
   One family, three pages: Gracious Professionalism 给, Pudong
   Children's Congress 人, Academic Monitor 听. The bones are the same;
   each hero carries its own character, floating in the ink behind it.
   ═════════════════════════════════════════════════════════════════ */

/* ── hero ─────────────────────────────────────────────────────────── */
/* the title always fits its longest line ("Professionalism." is the long one) */
.phero-title {
  --title-em: 4.6;
  font-size: min(var(--step-5), calc(min(100vw - 2 * var(--mx), var(--maxw)) / var(--title-em)));
}
[data-page="cc3"] .phero-title { --title-em: 7; }

/* the character: brushed in the page's own light, drifting in the ink */
.phero-glyph {
  /* solid jade, faded toward its foot by a mask so it sinks into the ink */
  -webkit-mask-image: linear-gradient(172deg, #000 12%, rgba(0, 0, 0, 0.22) 78%);
  mask-image: linear-gradient(172deg, #000 12%, rgba(0, 0, 0, 0.22) 78%);
  opacity: 0.17;
  animation: glyph-rise 2.6s var(--ease) 0.15s both, glyph-drift 18s ease-in-out 2.8s infinite alternate;
}
[data-theme="light"] .phero-glyph { opacity: 0.14; }
@keyframes glyph-rise { from { opacity: 0; transform: translateY(-50%) scale(0.97); filter: blur(14px); } }
@keyframes glyph-drift { to { transform: translateY(-61%) rotate(-1.2deg); } }

/* ── chapters ─────────────────────────────────────────────────────── */
/* a thread of light hangs under each sticky chapter title */
.cc-chapter .chapter-head::after {
  content: ''; width: 1px; height: clamp(72px, 12vh, 150px); margin-left: 2px;
  background: linear-gradient(var(--accent), transparent); opacity: 0.55;
}
@media (max-width: 900px) { .cc-chapter .chapter-head::after { display: none; } }

.cc-body { max-width: 66ch; }
/* the quote is the chapter's point: set large, lit at its edge */
.cc-body > .body-quote {
  margin-block: 0.5em;
  padding-left: 0.85em; border-left: 0;
  font-size: clamp(24px, 1.05rem + 1.35vw, 40px); line-height: 1.24;
  color: color-mix(in srgb, var(--accent) 28%, var(--text));
}
.cc-body > .body-quote::before {
  content: ''; position: absolute; left: 0; top: 0.16em; bottom: 0.16em; width: 2px; border-radius: 2px;
  background: var(--accent);
}
html[lang="zh-CN"] .cc-body > .body-quote { line-height: 1.5; }
html[lang="zh-CN"] .cc-body .body-text { line-height: 1.95; }

/* ── what was shared: three worlds, one habit (Gracious Professionalism) ── */
.contrib { margin-top: clamp(56px, 7vw, 104px); }
.contrib-card {
  gap: 16px; overflow: hidden;
  border-radius: 0;
  background:
    radial-gradient(120% 70% at 100% 0%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 62%),
    var(--bg-raise);
}
.contrib-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
/* a lit edge in the colour of the world it came from */
.contrib-card::after {
  content: ''; position: absolute; top: 0; left: 28px; right: 28px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
 opacity: 0.85;
}
.contrib-top { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.contrib-icon {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  border-radius: 0; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);

}
.contrib-icon svg { width: 22px; height: 22px; }
html[lang="zh-CN"] .contrib-title { letter-spacing: 0; line-height: 1.3; }