.cf-comm-shell { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.cf-comm-hero { margin-bottom: 1.5rem; }
.cf-comm-hero h1 { font-family: 'Fredoka One', cursive; font-size: 2.25rem; color: #1e293b; margin: 0 0 0.35rem; }
.cf-comm-hero h1 span { color: #0ea5e9; }
.cf-comm-hero p { font-weight: 700; color: #64748b; margin: 0; }
.cf-comm-layout { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .cf-comm-layout { grid-template-columns: 1fr 300px; } }
.cf-comm-card {
  background: #fff; border: 3px solid #e2e8f0; border-bottom: 6px solid #cbd5e1;
  border-radius: 24px; padding: 1.25rem 1.5rem; margin-bottom: 1rem;
}
.cf-comm-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.cf-comm-meta time { font-size: 0.7rem; font-weight: 800; color: #94a3b8; }
.cf-comm-tag { font-size: 0.65rem; font-weight: 900; padding: 0.2rem 0.6rem; border-radius: 999px; text-transform: uppercase; }
.cf-comm-tag-sky { background: #e0f2fe; color: #0369a1; }
.cf-comm-tag-emerald { background: #d1fae5; color: #047857; }
.cf-comm-tag-amber { background: #fef3c7; color: #b45309; }
.cf-comm-tag-violet { background: #ede9fe; color: #6d28d9; }
.cf-comm-card h2 { font-family: 'Fredoka One', cursive; font-size: 1.25rem; color: #1e293b; margin: 0 0 0.5rem; }
.cf-comm-card p { font-size: 0.9rem; font-weight: 600; color: #64748b; margin: 0; line-height: 1.5; }