feat: Newsreader serif typography + Agiliton brand colors

- Add Newsreader font (darioamodei.com-inspired literary serif)
- Warm light background (#fafaf9) with Agiliton lime/emerald accents
- 20px body text, 32px line-height for research publication feel
- Sans-serif UI elements (nav, tags, TOC) for contrast
- 800px max content width for focused reading
- Status badges updated to green palette

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

assets/css/custom.css

@@ -0,0 +1,164 @@
+/* Internet for Kids — Newsreader typography (darioamodei.com-inspired)
+   Warm, literary, research-publication feel */
+
+:root {
+  --ifk-font: 'Newsreader', 'Times New Roman', serif;
+  --ifk-text: #1c1917;
+  --ifk-bg: #fafaf9;
+  --ifk-accent: #4d7c0f;
+  --ifk-accent-hover: #3f6212;
+  --ifk-secondary: #059669;
+}
+
+/* Global background */
+body {
+  background-color: var(--ifk-bg) !important;
+  color: var(--ifk-text) !important;
+}
+
+/* Override Congo's dark bg classes */
+.bg-neutral {
+  background-color: var(--ifk-bg) !important;
+}
+
+/* All text in Newsreader */
+body, p, li, td, th, blockquote, figcaption {
+  font-family: var(--ifk-font) !important;
+  font-size: 20px;
+  line-height: 32px;
+  color: var(--ifk-text);
+}
+
+/* Headings */
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--ifk-font) !important;
+  color: var(--ifk-text);
+  font-weight: 600;
+}
+
+h1, .article-title {
+  font-size: 2rem;
+  line-height: 1.15;
+  font-weight: 600;
+  margin-bottom: 1.5rem;
+}
+
+h2 {
+  font-size: 1.5rem;
+  line-height: 1.3;
+  margin-top: 2.5rem;
+  margin-bottom: 1rem;
+}
+
+h3 {
+  font-size: 1.25rem;
+  line-height: 1.35;
+  margin-top: 2rem;
+}
+
+/* Article content — constrain width for readability */
+article .prose,
+article .content,
+.article-content {
+  max-width: 800px;
+}
+
+/* Paragraphs */
+article p {
+  margin-bottom: 1.5rem;
+}
+
+/* Links — subtle, Amodei-style */
+article a {
+  color: var(--ifk-accent);
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 2px;
+}
+
+article a:hover {
+  color: var(--ifk-accent-hover);
+  text-decoration-thickness: 2px;
+}
+
+/* Blockquotes — elegant left-border */
+blockquote {
+  font-family: var(--ifk-font) !important;
+  font-style: italic;
+  font-size: 20px;
+  line-height: 32px;
+  border-left: 3px solid var(--ifk-secondary);
+  padding-left: 1.5rem;
+  margin: 2rem 0;
+  color: var(--ifk-text);
+  opacity: 0.85;
+}
+
+/* Navigation — keep sans-serif for UI elements */
+nav, nav a, nav span,
+header, header a,
+footer, footer a, footer span,
+.breadcrumbs, .taxonomy-list,
+.article-meta, .post-meta,
+time, .reading-time {
+  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif !important;
+  font-size: 0.875rem;
+}
+
+/* Header title */
+header a[href="/"] span,
+header a[rel="me"] {
+  font-family: var(--ifk-font) !important;
+  font-size: 1.1rem;
+  font-weight: 500;
+}
+
+/* Tags/categories — small sans pills */
+.taxonomy-term, [href*="/tags/"], [href*="/categories/"] {
+  font-family: system-ui, -apple-system, sans-serif !important;
+  font-size: 0.75rem !important;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* Table of contents — smaller sans */
+#TableOfContents, #TableOfContents a {
+  font-family: system-ui, -apple-system, sans-serif !important;
+  font-size: 0.85rem !important;
+  line-height: 1.6;
+}
+
+/* Homepage recent articles */
+.summary {
+  font-family: var(--ifk-font) !important;
+  font-size: 18px;
+  line-height: 28px;
+}
+
+/* Data tables in articles — keep readable */
+.csm-table, .csm-table td, .csm-table th {
+  font-family: var(--ifk-font) !important;
+  font-size: 16px;
+  line-height: 1.5;
+}
+
+/* Stats banner — override with sans for numbers */
+.ifk-stat-num {
+  font-family: var(--ifk-font) !important;
+}
+
+.ifk-stat-label {
+  font-family: system-ui, -apple-system, sans-serif !important;
+}
+
+/* Chart labels keep sans */
+.ifk-chart-card h4 {
+  font-family: system-ui, -apple-system, sans-serif !important;
+}
+
+/* Smooth dark mode override (if ever enabled) */
+/* Status badges keep their blue palette */
+.csm-enforced { background: var(--ifk-accent) !important; }
+.csm-passed { background: var(--ifk-secondary) !important; }
+.csm-progress { background: #86efac !important; color: #14532d !important; }
+.csm-guidelines { background: #d1fae5 !important; color: #065f46 !important; }

layouts/partials/extend-head.html

@@ -1,3 +1,8 @@
+{{/* Newsreader serif font (Dario Amodei-inspired typography) */}}
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,500&display=swap" rel="stylesheet">
+
 {{/* Structured data for SEO + AI search */}}
 {{ partial "structured-data.html" . }}