/* Community cards — real photo header (16:9), the person the site was built for, a quiet way to be in touch.
   LinkedIn-calm: round avatar overlapping the photo edge, name + role, two-line tagline. One file for /, /communities, /directory. */
.cx{display:flex;flex-direction:column;background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.18s;min-width:0}
.cx:hover{box-shadow:var(--shadow)}
.cx-media{position:relative;display:block;aspect-ratio:16/9;background:var(--paper-3);overflow:hidden}
.cx-media img{width:100%;height:100%;object-fit:cover;display:block}
.cx-media::after{content:"";position:absolute;inset:auto 0 0 0;height:36%;background:linear-gradient(to top,rgba(0,0,0,.28),transparent);pointer-events:none}
.cx-media .st{position:absolute;top:10px;left:10px;z-index:1}
.cx-body{position:relative;display:flex;flex-direction:column;flex:1;padding:0 18px 16px}
.cx-who{display:flex;align-items:flex-start;gap:12px;margin-top:-26px}
.cx-av{flex:none;width:58px;height:58px;border-radius:50%;border:3px solid var(--cream);background:var(--c,var(--green));color:#fff;display:grid;place-items:center;font:600 1.1rem/1 var(--font);letter-spacing:.02em;overflow:hidden;position:relative;z-index:1}
.cx-av img{width:100%;height:100%;object-fit:cover}
.cx-person{padding-top:30px;min-width:0}.cx-person b{display:block;font-size:.92rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cx-person small{display:block;font-size:.76rem;color:var(--muted)}
.cx h3{margin:12px 0 4px;font-size:1.12rem}
.cx h3 a{color:inherit}
.cx-tag{margin:0;font-size:.9rem;line-height:1.45;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cx-meta{font-size:.76rem;color:var(--muted);margin-top:6px}
.cx-foot{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:12px;flex-wrap:wrap}
.cx-link{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-weight:700;font-size:.88rem;color:var(--green)}
.cx-link:hover{text-decoration:underline;text-underline-offset:3px}
.cx-link.sec{color:var(--ink-2);font-weight:600}
:root[data-theme="dark"] .cx-link{color:var(--gold)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .cx-link{color:var(--gold)}}
:root[data-theme="dark"] .cx-link.sec{color:var(--ink-2)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .cx-link.sec{color:var(--ink-2)}}
.cx-credit{font-size:.78rem;color:var(--muted);margin-top:12px}.cx-credit a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
/* owner rows on /directory */
.own{display:flex;gap:14px;align-items:center;background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;min-width:0}
.own .cx-av{width:52px;height:52px;border:0;font-size:1rem}
.own .ph{flex:none;width:76px;height:52px;border-radius:10px;overflow:hidden;background:var(--paper-3)}.own .ph img{width:100%;height:100%;object-fit:cover}
.own .tx{min-width:0;flex:1}.own .tx b{display:block;color:var(--ink)}.own .tx small{display:block;color:var(--muted);font-size:.8rem;line-height:1.35}
.own .tx .cx-link{min-height:36px;padding:0}
@media(max-width:640px){.own .ph{display:none}}