:root {
    --cn-navy: #1a2b3c;
    --cn-gold: #9b7a16;
    --cn-white: #fff;
    --cn-border: #e2e8f0;
    --cn-muted: #64748b;
}

.cn-grid { display: grid; gap: 1.5rem; }
.cn-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cn-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cn-grid-1 { grid-template-columns: minmax(0, 1fr); }
.cn-card { background: var(--cn-white); border: 1px solid var(--cn-border); border-radius: .35rem; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s ease, transform .2s ease; }
.cn-card:hover { box-shadow: 0 .4rem 1.5rem rgba(15, 23, 42, .1); transform: translateY(-2px); }
.cn-card:focus-within { outline: 3px solid rgba(155, 122, 22, .35); outline-offset: 2px; }
.cn-card-thumb { display: block; }
.cn-card-thumb img { width: 100%; height: 11.25rem; object-fit: cover; display: block; }
.cn-card-body { padding: 1.125rem; flex: 1; display: flex; flex-direction: column; }
.cn-hood-pill, .cn-hood-tag { width: fit-content; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--cn-navy); color: var(--cn-white); padding: .2rem .55rem; border-radius: .15rem; }
.cn-hood-pill { margin-bottom: .65rem; }
.cn-card-title { font-size: 1.05rem; font-weight: 700; line-height: 1.4; margin: 0 0 .65rem; }
.cn-card-title a { color: var(--cn-navy); text-decoration: none; }
.cn-card-title a:hover { color: var(--cn-gold); text-decoration: underline; }
.cn-card-excerpt { font-size: .9rem; color: var(--cn-muted); line-height: 1.6; margin: 0 0 .75rem; }
.cn-card-meta { display: flex; flex-wrap: wrap; gap: .65rem; font-size: .78rem; color: var(--cn-muted); border-top: 1px solid var(--cn-border); padding-top: .65rem; margin-top: auto; }
.cn-source-credit { font-size: .88rem; color: var(--cn-muted); border-top: 1px solid var(--cn-border); padding-top: .75rem; margin-top: 1.5rem; }
.cn-meta-badge { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.cn-source-tag { font-size: .75rem; font-weight: 600; color: var(--cn-muted); }
.cn-no-posts { color: var(--cn-muted); font-style: italic; }
.cn-admin-table { max-width: 900px; margin: 1rem 0 1.5rem; }
.cn-fetch-form { margin: 1.5rem 0 1rem; }

@media (max-width: 782px) {
    .cn-grid-3, .cn-grid-2 { grid-template-columns: 1fr; }
    .cn-card:hover { transform: none; }
}