/* =========================================================================
MENSCHGEIST · Editorial Design System
Drop-in Additional CSS for menschgeist.com
v1.0 — June 2026
Paste into: Appearance → Customize → Additional CSS
(or your child theme's style.css)
Scope: applies inside .entry-content + reusable .mg-* component classes.
========================================================================= */
/* ───────── 1. DESIGN TOKENS (scoped to .entry-content & .mg-block) ──── */
.entry-content,
.mg-block,
.mg-hero {
/* Type scale (fluid) */
--mg-text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
--mg-text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
--mg-text-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
--mg-text-md: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
--mg-text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.4rem);
--mg-text-xl: clamp(1.45rem, 1.2rem + 1.1vw, 2rem);
--mg-text-2xl: clamp(2rem, 1.4rem + 2.2vw, 3rem);
--mg-text-3xl: clamp(2.4rem, 1.4rem + 3.5vw, 4rem);
/* Spacing (4px base) */
--mg-s-1: 0.25rem;
--mg-s-2: 0.5rem;
--mg-s-3: 0.75rem;
--mg-s-4: 1rem;
--mg-s-5: 1.25rem;
--mg-s-6: 1.5rem;
--mg-s-8: 2rem;
--mg-s-10: 2.5rem;
--mg-s-12: 3rem;
--mg-s-16: 4rem;
--mg-s-20: 5rem;
/* Shape & motion */
--mg-radius-sm: 0.375rem;
--mg-radius-md: 0.625rem;
--mg-radius-lg: 0.9rem;
--mg-radius-xl: 1.25rem;
--mg-shadow-sm: 0 1px 2px oklch(0.2 0.01 80 / 0.06);
--mg-shadow-md: 0 6px 18px oklch(0.2 0.01 80 / 0.08);
--mg-shadow-lg: 0 16px 40px oklch(0.2 0.01 80 / 0.12);
--mg-transition: 200ms cubic-bezier(0.16, 1, 0.3, 1);
/* Reading column */
--mg-reading: 70ch;
/* Light palette (default) */
--mg-bg: #f7f6f2;
--mg-surface: #fbfaf6;
--mg-surface-2: #ffffff;
--mg-surface-offset: #f1eee8;
--mg-divider: #e3dfd8;
--mg-border: #d4d1ca;
--mg-text: #1f1d18;
--mg-text-muted: #6c6a64;
--mg-text-faint: #a8a59f;
--mg-text-inverse: #f9f8f4;
--mg-primary: #01696f;
--mg-primary-hover: #0c4e54;
--mg-primary-tint: #cedcd8;
--mg-primary-wash: #e7eeec;
--mg-warning: #964219;
--mg-warning-tint: #ddcfc6;
--mg-warning-wash: #f1e3d9;
--mg-gold: #d19900;
--mg-success: #437a22;
/* Fonts */
--mg-font-display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
--mg-font-body: 'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}
/* Dark mode — only when the site/theme sets it. Menschgeist's existing dark
toggle uses [data-theme="dark"] on , so this matches automatically. */
html[data-theme='dark'] .entry-content,
html[data-theme='dark'] .mg-block,
html[data-theme='dark'] .mg-hero,
html.dark .entry-content,
html.dark .mg-block,
html.dark .mg-hero {
--mg-bg: #15140f;
--mg-surface: #1c1b16;
--mg-surface-2: #221f1a;
--mg-surface-offset: #1a1914;
--mg-divider: #2e2c26;
--mg-border: #3c3a33;
--mg-text: #ece8de;
--mg-text-muted: #9a978d;
--mg-text-faint: #5e5b53;
--mg-text-inverse: #1a1914;
--mg-primary: #5fb3bc;
--mg-primary-hover: #7fc7cf;
--mg-primary-tint: #1d3b3e;
--mg-primary-wash: #182a2c;
--mg-warning: #d27a4e;
--mg-warning-tint: #3a261b;
--mg-warning-wash: #2b1c14;
--mg-gold: #e8af34;
--mg-success: #7caa55;
--mg-shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3);
--mg-shadow-md: 0 6px 18px oklch(0 0 0 / 0.4);
--mg-shadow-lg: 0 16px 40px oklch(0 0 0 / 0.5);
}
/* Load Instrument Serif + Inter (only here — your theme doesn't need to). */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&display=swap');
/* ───────── 2. BASE READING COLUMN ─────────────────────────────────────
Constrain post body to 70ch and apply editorial typography across ALL
posts automatically. Affects only WordPress's .entry-content wrapper. */
.entry-content {
max-width: var(--mg-reading);
margin-inline: auto;
padding-inline: var(--mg-s-6);
font-family: var(--mg-font-body);
font-size: var(--mg-text-md);
line-height: 1.78;
color: var(--mg-text);
}
/* Full-width blocks bust out of the reading column. WordPress core does this
via alignfull/alignwide — we just ensure our blocks honour the same. */
.entry-content > .alignfull,
.entry-content > .mg-fullbleed {
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
width: 100vw;
}
.entry-content > .alignwide,
.entry-content > .mg-wide {
max-width: min(1180px, 92vw);
margin-left: 50%;
transform: translateX(-50%);
width: min(1180px, 92vw);
}
/* Body paragraphs */
.entry-content > p,
.entry-content > ul,
.entry-content > ol {
margin-block: 0 var(--mg-s-5);
}
.entry-content p,
.entry-content li {
font-size: var(--mg-text-md);
line-height: 1.78;
color: var(--mg-text);
text-wrap: pretty;
}
.entry-content strong {
font-weight: 600;
color: var(--mg-text);
}
.entry-content a {
color: var(--mg-primary);
text-underline-offset: 3px;
transition: color var(--mg-transition);
}
.entry-content a:hover {
color: var(--mg-primary-hover);
}
/* Drop cap — opt in by adding .mg-dropcap to the FIRST */
.entry-content .mg-dropcap::first-letter {
font-family: var(--mg-font-display);
font-size: 3.6em;
line-height: 0.9;
float: left;
padding: 0.18em 0.12em 0 0;
color: var(--mg-primary);
font-weight: 400;
}
/* Headings — automatic on every post */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
color: var(--mg-text);
text-wrap: balance;
line-height: 1.15;
}
.entry-content h2 {
font-family: var(--mg-font-display);
font-weight: 400;
font-size: var(--mg-text-2xl);
margin-block: var(--mg-s-12) var(--mg-s-5);
letter-spacing: -0.005em;
}
.entry-content h3 {
font-family: var(--mg-font-body);
font-weight: 600;
font-size: var(--mg-text-lg);
margin-block: var(--mg-s-10) var(--mg-s-3);
padding-block-start: var(--mg-s-3);
border-block-start: 1px solid var(--mg-divider);
letter-spacing: -0.005em;
}
.entry-content h3.mg-no-rule {
border-block-start: none;
padding-block-start: 0;
}
.entry-content h4 {
font-family: var(--mg-font-body);
font-weight: 600;
font-size: 1.05rem;
margin-block: var(--mg-s-8) var(--mg-s-2);
}
/* Small all-caps tertiary heading */
.entry-content h4.mg-eyebrow,
.entry-content .mg-eyebrow {
color: var(--mg-primary);
font-size: var(--mg-text-xs) !important;
text-transform: uppercase;
letter-spacing: 0.16em;
font-weight: 600;
margin-block-start: var(--mg-s-6);
}
/* Default blockquote — automatic for every blockquote on every post */
.entry-content blockquote,
.entry-content .wp-block-quote {
margin: var(--mg-s-10) 0;
padding: var(--mg-s-6) var(--mg-s-6) var(--mg-s-5);
border-inline-start: 3px solid var(--mg-primary);
background: var(--mg-primary-wash);
border-radius: 0 var(--mg-radius-lg) var(--mg-radius-lg) 0;
position: relative;
}
.entry-content blockquote::before,
.entry-content .wp-block-quote::before {
content: '\201C';
position: absolute;
top: -0.15em;
left: 0.55rem;
font-family: var(--mg-font-display);
font-size: 4rem;
line-height: 1;
color: color-mix(in oklab, var(--mg-primary) 35%, transparent);
}
.entry-content blockquote p,
.entry-content .wp-block-quote p {
font-family: var(--mg-font-display);
font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.7rem);
line-height: 1.35;
color: var(--mg-text);
margin: 0 0 var(--mg-s-3);
font-style: normal;
max-width: none;
}
.entry-content blockquote cite,
.entry-content blockquote footer,
.entry-content .wp-block-quote cite {
font-family: var(--mg-font-body);
font-size: var(--mg-text-sm);
font-style: normal;
color: var(--mg-text-muted);
display: block;
}
.entry-content blockquote cite em,
.entry-content .wp-block-quote cite em {
font-style: italic;
}
/* Tables — automatic for every
in posts */
.entry-content figure.wp-block-table,
.entry-content .mg-table-wrap {
overflow-x: auto;
border: 1px solid var(--mg-divider);
border-radius: var(--mg-radius-lg);
background: var(--mg-surface-2);
margin: var(--mg-s-6) 0 var(--mg-s-8);
box-shadow: var(--mg-shadow-sm);
}
.entry-content table {
width: 100%;
border-collapse: collapse;
font-size: 0.95rem;
}
.entry-content table thead th,
.entry-content table tr:first-child th {
text-align: left;
font-weight: 600;
font-size: var(--mg-text-xs);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--mg-primary);
padding: var(--mg-s-4) var(--mg-s-5);
background: color-mix(in oklab, var(--mg-primary) 6%, var(--mg-surface-2));
border-bottom: 1px solid var(--mg-divider);
}
.entry-content table tbody th {
text-align: left;
font-weight: 600;
padding: var(--mg-s-4) var(--mg-s-5);
vertical-align: top;
white-space: nowrap;
background: color-mix(in oklab, var(--mg-primary) 3%, transparent);
}
.entry-content table tbody td {
padding: var(--mg-s-4) var(--mg-s-5);
border-top: 1px solid var(--mg-divider);
vertical-align: top;
line-height: 1.55;
}
.entry-content table tbody tr:nth-child(even) td,
.entry-content table tbody tr:nth-child(even) th {
background: color-mix(in oklab, var(--mg-text) 2.5%, transparent);
}
.entry-content table.mg-compact td,
.entry-content table.mg-compact th {
padding: var(--mg-s-3) var(--mg-s-4);
font-size: 0.92rem;
}
/* Lists */
.entry-content ul:not([class*='wp-block']),
.entry-content ol:not([class*='wp-block']) {
padding-inline-start: 0;
list-style: none;
margin-block: 0 var(--mg-s-6);
}
.entry-content ul:not([class*='wp-block']) li,
.entry-content ol:not([class*='wp-block']) li {
position: relative;
padding-inline-start: 2rem;
margin-block-end: var(--mg-s-3);
}
.entry-content ul:not([class*='wp-block']) li::before {
content: '';
position: absolute;
left: 0.5rem;
top: 0.85em;
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--mg-primary);
}
.entry-content ol:not([class*='wp-block']) {
counter-reset: mgol;
}
.entry-content ol:not([class*='wp-block']) li {
counter-increment: mgol;
}
.entry-content ol:not([class*='wp-block']) li::before {
content: counter(mgol, decimal-leading-zero);
position: absolute;
left: 0;
top: 0.05em;
font-family: var(--mg-font-display);
font