/* ── Humanité-inspired design system ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Overpass:wght@300;400;700&display=swap');

:root {
  --c-red: #f13c47;
  --c-purple: #280036;
  --c-green: #00ff7f;
  --c-bg: #ffffff;
  --c-bg-alt: #ebf2f2;
  --c-text: #280036;
  --c-text-light: #5a5066;
  --c-text-muted: #8a8295;
  --c-border: #e0dce4;
  --c-gold: #ffd600;
  --font-headline: 'Overpass', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-ui: 'Overpass', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-body); background: var(--c-bg); color: var(--c-text); line-height: 1.7; font-size: 16px; }
.container { max-width: 860px; margin: 0 auto; padding: 2rem 1.5rem; }

/* ── Navigation ── */
nav { background: #fff; padding: 0.6rem 0; margin-bottom: 0; border-bottom: 1px solid var(--c-border); }
nav .container { display: flex; gap: 1.5rem; align-items: center; padding-top: 0; padding-bottom: 0; }
nav a { color: var(--c-purple); text-decoration: none; font-family: var(--font-ui); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.01em; }
nav a:hover { color: var(--c-red); }
.nav-logo { display: flex; align-items: center; flex-shrink: 0; margin-right: auto; }
.nav-logo:hover { opacity: 0.85; }
.nav-logo-img { width: 15vw; max-width: 140px; min-width: 80px; height: auto; display: block; }
.nav-link { padding: 0.3rem 0.75rem; border-radius: 4px; transition: background 0.15s, color 0.15s; }
.nav-link:hover { background: var(--c-bg-alt); color: var(--c-red); text-decoration: none; }

/* ── Typography ── */
h1 { font-family: var(--font-headline); font-size: 2.2rem; font-weight: 700; color: var(--c-purple); margin-bottom: 0.5rem; line-height: 1.2; }
h2 { font-family: var(--font-headline); font-size: 1.4rem; font-weight: 700; margin: 1.8rem 0 0.75rem; color: var(--c-purple); line-height: 1.25; }
p { margin-bottom: 1rem; font-weight: 400; }
a { color: var(--c-red); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Badge ── */
.badge { display: inline-block; padding: 0.15rem 0.7rem; border-radius: 3px; font-size: 0.75rem; font-family: var(--font-ui); font-weight: 700; color: #fff; margin-left: 0.5rem; vertical-align: middle; text-transform: uppercase; letter-spacing: 0.03em; }

/* ── Summary block ── */
.summary { font-size: 1.05rem; color: var(--c-text-light); margin-bottom: 1.5rem; padding: 1.25rem 1.5rem; background: var(--c-bg-alt); border-radius: 5px; border-left: 4px solid var(--c-red); font-family: var(--font-ui); font-weight: 300; line-height: 1.6; }

/* ── Content sections ── */
.section { background: var(--c-bg); padding: 1.5rem 0; border-bottom: 1px solid var(--c-border); margin-bottom: 0; }
.section:last-of-type { border-bottom: none; }
.section h2 { margin-top: 0; }
.section p { color: var(--c-text-light); font-family: var(--font-ui); font-weight: 300; line-height: 1.6; }

/* ── Related ── */
.related { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 2px solid var(--c-purple); }
.related h2 { color: var(--c-purple); }
.related ul { list-style: none; padding: 0; }
.related li { padding: 0.5rem 0; border-bottom: 1px solid var(--c-border); font-family: var(--font-ui); font-weight: 300; font-size: 0.95rem; }
.related li:last-child { border-bottom: none; }
.related li a { font-weight: 700; color: var(--c-red); }
.related li em { color: var(--c-text-muted); }
.related-count { font-size: 0.85rem; color: var(--c-text-muted); font-weight: 400; }
.related-more { font-size: 0.85rem; color: var(--c-text-muted); font-style: italic; margin-top: 0.75rem; }

/* ── Source article cards ── */
.source-cards { margin: 1.5rem 0 2rem; }
.source-cards-title { font-family: var(--font-headline); font-size: 1.1rem; font-weight: 700; color: var(--c-purple); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }
.source-icon { color: var(--c-red); flex-shrink: 0; }
.source-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.85rem; }
.source-card { display: flex; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 6px; overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s; }
.source-card:hover { box-shadow: 0 4px 16px rgba(40,0,54,0.1); border-color: var(--c-red); transform: translateY(-1px); text-decoration: none; }
.source-card-img { width: 100px; min-height: 80px; flex-shrink: 0; overflow: hidden; background: var(--c-bg-alt); display: flex; align-items: center; justify-content: center; }
.source-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.source-card-img--empty { color: var(--c-border); }
.source-card-img--empty svg { opacity: 0.5; }
.source-card-body { padding: 0.65rem 0.85rem; display: flex; flex-direction: column; justify-content: center; gap: 0.25rem; min-width: 0; flex: 1; }
.source-card-title { font-family: var(--font-ui); font-weight: 700; font-size: 0.88rem; color: var(--c-purple); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.source-card:hover .source-card-title { color: var(--c-red); }
.source-card-date { font-size: 0.75rem; color: var(--c-text-muted); font-family: var(--font-ui); font-weight: 400; display: flex; align-items: center; gap: 0.3rem; }
.source-card-date svg { color: var(--c-text-muted); flex-shrink: 0; }
.source-card-domain { font-size: 0.7rem; color: var(--c-text-muted); font-family: var(--font-ui); font-weight: 300; display: flex; align-items: center; gap: 0.25rem; opacity: 0.7; }
.source-card-domain svg { flex-shrink: 0; }

@media (max-width: 600px) { .source-cards-grid { grid-template-columns: 1fr; } .source-card-img { width: 80px; min-height: 64px; } }

/* ── Entity list ── */
.entity-list { list-style: none; padding: 0; }
.entity-list li { padding: 0.75rem 0; border-bottom: 1px solid var(--c-border); }
.entity-list li:last-child { border-bottom: none; }
.entity-list li a { font-family: var(--font-ui); font-weight: 700; color: var(--c-purple); }
.entity-list li a:hover { color: var(--c-red); }
.entity-list .entity-summary { color: var(--c-text-muted); font-size: 0.9rem; font-family: var(--font-ui); font-weight: 300; }

/* ── Stats ── */
.stats { display: flex; gap: 1.5rem; margin: 1.5rem 0 2rem; flex-wrap: wrap; }
.stat { background: var(--c-bg-alt); padding: 1rem 1.5rem; border-radius: 5px; text-align: center; flex: 1; min-width: 120px; }
.stat .number { font-size: 2rem; font-family: var(--font-headline); font-weight: 700; color: var(--c-red); }
.stat .label { font-size: 0.8rem; font-family: var(--font-ui); font-weight: 700; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }

/* ── Category cards (index page) ── */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.cat-card { display: block; background: var(--c-bg); border-radius: 5px; padding: 1.25rem; box-shadow: 0 1px 4px rgba(40,0,54,0.06); text-decoration: none; color: inherit; transition: box-shadow 0.2s, transform 0.15s; border-left: 4px solid var(--c-red); }
.cat-card:hover { box-shadow: 0 4px 12px rgba(40,0,54,0.12); transform: translateY(-2px); text-decoration: none; }
.cat-card-title { font-size: 1.15rem; font-weight: 700; font-family: var(--font-headline); color: var(--c-purple); margin-bottom: 0.3rem; }
.cat-card-count { font-size: 0.8rem; color: var(--c-red); font-weight: 600; font-family: var(--font-ui); margin-bottom: 0.5rem; }
.cat-card-desc { font-size: 0.85rem; color: var(--c-text-muted); font-family: var(--font-ui); font-weight: 300; line-height: 1.5; }

/* ── Category page members ── */
.type-group { margin-bottom: 2rem; }
.category-desc { color: var(--c-text-light); font-size: 0.95rem; font-family: var(--font-ui); font-weight: 300; margin-bottom: 0.75rem; line-height: 1.5; }
.category-members { list-style: none; padding: 0; margin-top: 0.5rem; }
.category-members li { display: inline-block; margin: 0.25rem; }
.category-members li a { display: inline-block; padding: 0.3rem 0.8rem; background: var(--c-bg-alt); border-radius: 3px; font-size: 0.9rem; font-family: var(--font-ui); font-weight: 700; color: var(--c-purple); }
.category-members li a:hover { background: var(--c-red); color: #fff; }

/* ── Breadcrumb ── */
.breadcrumb { background: #fff; margin: 0 -1.5rem 1.25rem; padding: 0.65rem 1.5rem; font-size: 0.85rem; font-family: var(--font-ui); font-weight: 400; color: var(--c-text-muted); border-bottom: 1px solid var(--c-border); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0; }
.breadcrumb li::after { content: "›"; margin: 0 0.4rem; color: var(--c-border); }
.breadcrumb li:last-child::after { content: ""; }
.breadcrumb li:last-child { color: var(--c-purple); font-weight: 700; }
.breadcrumb a { color: var(--c-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--c-red); text-decoration: underline; }

/* ── Alphabetical type browse ── */
.alpha-type-dot { display: inline-block; width: 16px; height: 16px; border-radius: 50%; vertical-align: middle; margin-right: 0.3rem; }
.alpha-total { font-size: 1rem; font-weight: 400; color: var(--c-text-muted); }

.alpha-nav { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 1.25rem 0 2rem; padding: 1rem; background: var(--c-bg-alt); border-radius: 6px; }
.alpha-letter { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; padding: 0.35rem 0.55rem; border-radius: 5px; font-family: var(--font-headline); font-weight: 700; font-size: 1rem; color: var(--c-purple); text-decoration: none; transition: background 0.15s, color 0.15s; min-width: 38px; text-align: center; }
a.alpha-letter:hover { background: var(--c-red); color: #fff; text-decoration: none; }
a.alpha-letter:hover .alpha-letter-count { color: rgba(255,255,255,0.8); }
.alpha-letter--empty { color: var(--c-border); cursor: default; }
.alpha-letter-count { font-size: 0.6rem; font-weight: 400; color: var(--c-text-muted); line-height: 1; }

.alpha-section { margin-bottom: 2rem; }
.alpha-section-letter { font-family: var(--font-headline); font-size: 1.6rem; font-weight: 700; color: var(--c-purple); margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--c-purple); }
.alpha-section-letter a { color: var(--c-purple); text-decoration: none; }
.alpha-section-letter a:hover { color: var(--c-red); }
.alpha-section-count { font-size: 0.9rem; font-weight: 400; color: var(--c-text-muted); }

.alpha-entity-list { list-style: none; padding: 0; }
.alpha-entity { padding: 0.65rem 0; border-bottom: 1px solid var(--c-border); }
.alpha-entity:last-child { border-bottom: none; }
.alpha-entity-name { font-family: var(--font-ui); font-weight: 700; color: var(--c-purple); font-size: 1rem; }
.alpha-entity-name:hover { color: var(--c-red); }
.alpha-entity-summary { font-size: 0.85rem; color: var(--c-text-muted); font-family: var(--font-ui); font-weight: 300; margin-top: 0.15rem; line-height: 1.45; }

.alpha-see-all { display: inline-block; margin-top: 0.5rem; font-size: 0.9rem; font-family: var(--font-ui); font-weight: 700; color: var(--c-red); text-decoration: none; }
.alpha-see-all:hover { text-decoration: underline; }

.alpha-prev-next { display: flex; justify-content: space-between; align-items: center; margin: 1rem 0; padding: 0.75rem 0; border-bottom: 1px solid var(--c-border); }
.alpha-pn-link { font-family: var(--font-ui); font-weight: 700; font-size: 0.9rem; color: var(--c-purple); text-decoration: none; padding: 0.3rem 0.75rem; border-radius: 4px; }
.alpha-pn-link:hover { background: var(--c-bg-alt); color: var(--c-red); text-decoration: none; }
.alpha-pn-up { color: var(--c-text-muted); }

@media (max-width: 600px) { .alpha-nav { gap: 0.2rem; padding: 0.5rem; } .alpha-letter { min-width: 30px; padding: 0.25rem 0.35rem; font-size: 0.9rem; } }

/* ── Accessibility ── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ── Semantic sections ── */
main { min-height: calc(100vh - 60px); }
article { margin-bottom: 1rem; }
header { margin-bottom: 0.5rem; }

@media (max-width: 600px) { .container { padding: 1rem; } .stats { flex-direction: column; } }