/*
Theme Name:   GP Jungherr
Theme URI:    https://andreasjungherr.net
Description:  Child theme of GeneratePress for andreasjungherr.net. Goethe's and Itten's opposing colours on a cool neutral base, industrial typography (IBM Plex Sans, Plex Sans Condensed, Plex Serif), Tufte-style margin notes and small multiples.
Author:       Andreas Jungherr
Template:     generatepress
Version:      0.9.0
Text Domain:  gp-jungherr
*/

/* ================= Fonts (self-hosted, OFL) =================
   IBM Plex Sans (text, headings), IBM Plex Sans Condensed (labels, metadata, navigation; tabular figures),
   IBM Plex Serif (long reading: abstracts, flagship teasers). No monospace: Plex Mono / JetBrains Mono are
   now common in AI-generated and developer sites. */
@font-face { font-family: "IBM Plex Sans"; src: url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url(fonts/ibm-plex-sans-latin-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url(fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Condensed"; src: url(fonts/ibm-plex-sans-condensed-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Condensed"; src: url(fonts/ibm-plex-sans-condensed-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Condensed"; src: url(fonts/ibm-plex-sans-condensed-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Serif"; src: url(fonts/ibm-plex-serif-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Serif"; src: url(fonts/ibm-plex-serif-latin-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

/* ================= Tokens ================= */
:root {
	/* Colour (decided 2026-10-01). Rules: outputs/3.2-colour-principles.md; values and checks: 3.2-colour-schemes.md §7–9.
	   Lightness carries the sections, hue the research. The current focus takes the one colour field (indigo) and
	   transfer the accent band (amber), a pair of opposites; the four perspectives keep fixed hues, as marks only. */
	--aj-paper: #FFFFFF;
	--aj-paper-2: #DDDFE6;        /* light step (media band): cool grey with a trace of the field ("faint", 2026-10-02; was the tint #DADFEF) */
	--aj-ink: #121417;
	--aj-ink-soft: #4B5563;
	--aj-line: #D9DDE1;
	--aj-dark: #1C1F2A;           /* footer; rules on the amber band */
	--aj-on-dark: #F6F3EA;        /* type on the field and the footer (Andreas) */
	--aj-on-dark-soft: rgba(246, 243, 234, 0.85);
	--aj-on-dark-rule: rgba(246, 243, 234, 0.24);
	--aj-focus: #27305F;          /* the current focus: field, and its marks in mixed lists */
	--aj-focus-step: #404B7D;     /* lighter step of the field: the selected publications in the AI band (OKLCH L +0.10, same H and C; 2026-10-03) */
	--aj-accent: #E28A2B;         /* amber: the transfer band; "look here" marks, hover, focus */
	--aj-accent-text: #985601;
	--aj-accent-pale: #FFEAD9;
	--aj-on-accent-soft: #2E333A; /* secondary type on the amber band */
	/* The four perspectives: warm = power, cool = information; opposites arena ↔ governance, competition ↔ methods */
	--aj-arena: #559332;       --aj-arena-text: #3E731D;
	--aj-competition: #C13331; --aj-competition-text: #C13331;
	--aj-governance: #82296E;  --aj-governance-text: #82296E;
	--aj-methods: #026A76;     --aj-methods-text: #026A76;
	/* Legacy names, still used by the markup and the tools (tone classes, sparkline fills): aliases only */
	--aj-gruen: var(--aj-focus);         --aj-gruen-text: var(--aj-focus);
	--aj-blau: var(--aj-arena);          --aj-blau-text: var(--aj-arena-text);
	--aj-purpur: var(--aj-competition);  --aj-purpur-text: var(--aj-competition-text);
	--aj-gelbrot: var(--aj-governance);  --aj-gelbrot-text: var(--aj-governance-text);
	--aj-blaurot: var(--aj-methods);     --aj-blaurot-text: var(--aj-methods-text);
	--aj-gelb: var(--aj-accent);         --aj-gelb-text: var(--aj-accent-text);
	--aj-gruen-t: var(--aj-paper-2); --aj-blau-t: var(--aj-paper-2); --aj-purpur-t: var(--aj-paper-2);
	--aj-gelbrot-t: var(--aj-paper-2); --aj-blaurot-t: var(--aj-paper-2); --aj-gelb-t: var(--aj-accent-pale);
	--aj-link: var(--aj-ink);

	/* Typography: IBM Plex Sans + Plex Sans Condensed (labels/metadata) + Plex Serif */
	--aj-sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
	--aj-display: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
	--aj-mono: "IBM Plex Sans Condensed", "Arial Narrow", "Helvetica Neue", sans-serif; /* name kept for compatibility: the "technical" voice */
	--aj-serif: "IBM Plex Serif", Georgia, serif;
	--aj-display-weight: 500;
	--aj-display-tracking: -0.015em;

	/* Scale (5 sizes) and layout */
	--aj-s-1: 0.8125rem;   /* 13px meta */
	--aj-s0: 1.0625rem;    /* 17px body */
	--aj-s1: 1.3125rem;    /* 21px lede / h3 */
	--aj-s2: 1.75rem;      /* 28px h2 */
	--aj-s3: clamp(2rem, 4.2vw, 3.25rem); /* display */
	--aj-main: 42rem;
	--aj-margin: 15rem;
	--aj-gap: 3rem;
}


/* ================= Base ================= */
body {
	background: var(--aj-paper);
	color: var(--aj-ink);
	font-family: var(--aj-sans);
	font-size: var(--aj-s0);
	line-height: 1.55;
	font-feature-settings: "kern", "liga";
}
a { color: var(--aj-blau); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--aj-ink); }
a:focus-visible { outline: 2px solid var(--aj-blau); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--aj-display); color: var(--aj-ink); }
em { font-style: italic; }

/* GeneratePress frame: flat, no boxes */
.separate-containers .inside-article,
.one-container .site-content,
.inside-header, .site-footer .inside-site-info { background: transparent; }
.site-header { background: var(--aj-paper); border-bottom: 1px solid var(--aj-line); }
.main-title a, .site-title a { font-family: var(--aj-display); font-weight: 600; letter-spacing: -0.01em; color: var(--aj-ink); }
.main-navigation, .main-navigation ul ul { background: transparent; }
.main-navigation .main-nav ul li a { font-family: var(--aj-mono); font-size: var(--aj-s-1); letter-spacing: 0.02em; color: var(--aj-ink-soft); }
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li > a[aria-current="page"] { color: var(--aj-blau); }
.main-navigation .main-nav ul li[class*="current-menu-"] > a:not([aria-current="page"]),
.main-navigation .main-nav ul li[class*="current-menu-"]:hover > a:not([aria-current="page"]) { color: var(--aj-ink-soft); }
.site-footer { border-top: 1px solid var(--aj-line); font-family: var(--aj-mono); font-size: var(--aj-s-1); color: var(--aj-ink-soft); }

/* ================= Utilities ================= */
.aj-mono { font-family: var(--aj-mono); font-feature-settings: "tnum", "lnum"; letter-spacing: 0.01em; }
.aj-small { font-size: var(--aj-s-1); line-height: 1.5; color: var(--aj-ink-soft); }
.aj-kicker {
	display: block; font-family: var(--aj-mono); font-size: var(--aj-s-1);
	letter-spacing: 0.06em; text-transform: uppercase; color: var(--aj-ink-soft); margin-bottom: 0.5rem;
}
.aj-draft { font-family: var(--aj-mono); font-size: var(--aj-s-1); color: var(--aj-purpur); }

/* ================= Tufte grid: main column + margin notes ================= */
.aj-grid {
	display: grid;
	grid-template-columns: minmax(0, var(--aj-main)) var(--aj-margin);
	gap: var(--aj-gap);
	align-items: start;
}
.aj-margin { font-size: var(--aj-s-1); line-height: 1.5; color: var(--aj-ink-soft); padding-top: 0.35rem; }
.aj-margin p { margin: 0 0 0.75rem; }
.aj-section { padding: 3.5rem 0; border-top: 1px solid var(--aj-line); }
@media (max-width: 900px) {
	.aj-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
	.aj-margin { border-left: 2px solid var(--aj-line); padding-left: 0.75rem; }
}

/* ================= Hero ================= */
.aj-hero { padding: 4rem 0 3.5rem; }
.aj-display {
	font-size: var(--aj-s3); line-height: 1.12; font-weight: var(--aj-display-weight);
	letter-spacing: var(--aj-display-tracking); margin: 0 0 1.5rem; max-width: 20ch;
}
.aj-lede { font-size: var(--aj-s1); line-height: 1.5; color: var(--aj-ink); max-width: 36em; }

/* ================= Section heads ================= */
.aj-h2 {
	font-family: var(--aj-mono); font-size: var(--aj-s-1); font-weight: 500;
	letter-spacing: 0.08em; text-transform: uppercase; color: var(--aj-ink-soft); margin: 0 0 1.5rem;
}

/* ================= Research strands with sparklines ================= */
.aj-strands { list-style: none; margin: 0; padding: 0; }
.aj-strand {
	display: grid; grid-template-columns: minmax(0, 1fr) 13rem; gap: 1.5rem;
	padding: 1.1rem 0 1.1rem 1rem; border-top: 1px solid var(--aj-line);
	border-left: 3px solid var(--aj-strand);
}
.aj-strand:first-child { border-top: 0; }
.aj-strand h3 { font-size: var(--aj-s1); font-weight: 500; margin: 0 0 0.3rem; line-height: 1.3; }
.aj-strand p { margin: 0; color: var(--aj-ink-soft); }
.aj-strand .aj-kicker { color: var(--aj-strand); margin-bottom: 0.25rem; }
.aj-strand-data { display: flex; flex-direction: column; gap: 0.3rem; padding-top: 0.2rem; }
.aj-spark { width: 100%; height: auto; display: block; }
.aj-axis { stroke: var(--aj-line); stroke-width: 1; }
@media (max-width: 600px) { .aj-strand { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; } .aj-spark { max-width: 16rem; } }

/* ================= Flagship ================= */
.aj-flagship { border-left: 3px solid var(--aj-strand); padding-left: 1rem; }
.aj-flagship h3 { font-size: var(--aj-s2); font-weight: var(--aj-display-weight); line-height: 1.2; letter-spacing: var(--aj-display-tracking); margin: 0 0 0.75rem; }
.aj-flagship h3 a { color: var(--aj-ink); text-decoration: none; }
.aj-flagship h3 a:hover { color: var(--aj-strand); }
.aj-flagship p { font-family: var(--aj-serif); font-size: 1.125rem; line-height: 1.6; }
.aj-flagship p.aj-small { font-family: var(--aj-mono); font-size: var(--aj-s-1); }

/* ================= Advice & evidence ================= */
.aj-evidence { list-style: none; margin: 0; padding: 0; }
.aj-evidence li { display: grid; grid-template-columns: 17rem 1fr; gap: 1rem; padding: 0.7rem 0; border-top: 1px solid var(--aj-line); }
.aj-evidence li:first-child { border-top: 0; }
.aj-evidence strong { font-weight: 500; }
.aj-evidence span { color: var(--aj-ink-soft); }
@media (max-width: 600px) { .aj-evidence li { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; } }

/* ================= Media timeline ================= */
.aj-timeline { width: 100%; height: auto; display: block; margin-bottom: 1.25rem; }
.aj-timeline .aj-bar { fill: #9aa3ad; }
.aj-timeline .aj-bar-el { fill: var(--aj-ink); }
.aj-timeline .aj-phase { stroke: var(--aj-line); stroke-width: 1; }
.aj-lab { font-family: var(--aj-mono); font-size: 11px; fill: var(--aj-ink-soft); }
.aj-lab-strong { fill: var(--aj-ink); font-weight: 500; }
.aj-featured-in { font-size: var(--aj-s0); }
.aj-featured-in .aj-kicker { display: inline; margin-right: 0.75rem; }

/* ================= Lists (publications, media) ================= */
.aj-list-item { padding: 1rem 0; border-bottom: 1px solid var(--aj-line); }
.aj-meta { font-family: var(--aj-mono); font-size: var(--aj-s-1); color: var(--aj-ink-soft); }
.aj-chip { font-family: var(--aj-mono); font-size: var(--aj-s-1); color: var(--aj-strand, var(--aj-blau)); }

/* Guard against horizontal overflow on small screens */
.aj-main, .aj-margin, .aj-strand-text, .aj-strand-data { min-width: 0; }
.aj-display { overflow-wrap: break-word; hyphens: auto; }
svg.aj-timeline { max-width: 100%; }
svg.aj-spark { max-width: min(100%, 16rem); }

/* Anchor links to sections of the same page are never "current" */
.main-navigation .main-nav ul li[class*="current-menu-"] > a[href*="#"] { color: var(--aj-ink-soft); }
.main-navigation .main-nav ul li > a[href*="#"]:hover { color: var(--aj-blau); }

/* =====================================================================
   v0.4: coloured bands (Goethe tints), six-part homepage
   ===================================================================== */
:root {
	--aj-inner: 73.75rem; /* 1180px */
}
/* Tone helpers: each sets the accent (--aj-tone) and the tint (--aj-tint) */
.aj-tone-gruen   { --aj-tone: var(--aj-gruen);   --aj-tint: var(--aj-gruen-t); }
.aj-tone-blau    { --aj-tone: var(--aj-blau);    --aj-tint: var(--aj-blau-t); }
.aj-tone-purpur  { --aj-tone: var(--aj-purpur);  --aj-tint: var(--aj-purpur-t); }
.aj-tone-gelbrot { --aj-tone: var(--aj-gelbrot); --aj-tint: var(--aj-gelbrot-t); }
.aj-tone-blaurot { --aj-tone: var(--aj-blaurot); --aj-tint: var(--aj-blaurot-t); }
.aj-tone-gelb    { --aj-tone: #7a5c00;           --aj-tint: var(--aj-gelb-t); } /* dark ochre for text on yellow */

/* Full-bleed bands inside the page content */
.aj-band { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 4.5rem 0; }
.aj-band > .aj-inner { max-width: var(--aj-inner); margin: 0 auto; padding: 0 2.5rem; }
.aj-band[class*="aj-tone-"] { background: var(--aj-tint); }
.aj-band[class*="aj-tone-"] .aj-kicker { color: var(--aj-tone); }
.aj-band[class*="aj-tone-"] a { color: var(--aj-ink); text-decoration-color: var(--aj-tone); }
.aj-band[class*="aj-tone-"] a:hover { color: var(--aj-tone); }
.aj-band-grey { background: var(--aj-paper-2); }
.aj-band-ink { background: var(--aj-ink); color: #e8eaed; }
.aj-band-ink .aj-kicker, .aj-band-ink .aj-margin { color: #aab2bc; }
.aj-band-ink h2, .aj-band-ink strong { color: #fff; }
.aj-band-ink a { color: #fff; text-decoration-color: var(--aj-gelb); }
.entry-content > .aj-band:first-child { margin-top: -2.5rem; } /* close gap under header */
@media (max-width: 700px) { .aj-band { padding: 3rem 0; } .aj-band > .aj-inner { padding: 0 1.25rem; } }

.aj-h2x { font-size: var(--aj-s2); font-weight: 500; letter-spacing: var(--aj-display-tracking); line-height: 1.2; margin: 0 0 1rem; }

/* Hero with portrait */
.aj-band-hero { padding: 4rem 0 4.5rem; }
.aj-hero2 { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 3.5rem; align-items: end; }
.aj-portrait { margin: 0; }
.aj-portrait img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-bottom: 6px solid var(--aj-blau); }
.aj-portrait figcaption { margin-top: 0.5rem; }
.aj-hero-links { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.75rem; font-family: var(--aj-mono); font-size: 0.95rem; }
.aj-hero-links a { color: var(--aj-ink); text-decoration-color: var(--aj-blau); text-decoration-thickness: 2px; }
@media (max-width: 800px) {
	.aj-hero2 { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
	.aj-portrait { max-width: 14rem; order: -1; }
}

/* Lists of works */
.aj-works { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.aj-works li { padding: 0.6rem 0; border-top: 1px solid rgba(18, 20, 23, 0.12); }
.aj-works li:first-child { border-top: 0; }
.aj-works a { display: block; font-weight: 500; line-height: 1.35; }
.aj-works .aj-meta { display: block; margin-top: 0.15rem; }
.aj-works-lg a { font-size: var(--aj-s1); font-weight: 500; }
.aj-ahead { margin-top: 2rem; padding: 1rem 1.25rem; background: rgba(255, 255, 255, 0.65); border-left: 4px solid var(--aj-gelb); }
.aj-ahead .aj-works a { font-weight: 400; }

/* Four topic panels */
.aj-band-panels { padding-top: 3.5rem; }
.aj-panels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.aj-panel { background: var(--aj-tint); border-top: 5px solid var(--aj-tone); padding: 1.5rem 1.25rem 1.25rem; display: flex; flex-direction: column; }
.aj-panel .aj-kicker { color: var(--aj-tone); }
.aj-panel h3 { font-size: 1.25rem; font-weight: 500; line-height: 1.25; margin: 0 0 0.6rem; }
.aj-panel p { font-size: 0.975rem; color: var(--aj-ink-soft); margin: 0; }
.aj-panel a { color: var(--aj-ink); text-decoration-color: var(--aj-tone); }
.aj-panel a:hover { color: var(--aj-tone); }
.aj-panel .aj-works a { font-size: 0.975rem; }
.aj-panel-foot { margin-top: auto; padding-top: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.aj-more { font-family: var(--aj-mono); font-size: 0.9rem; }
.aj-more::after { content: " →"; }
@media (max-width: 1100px) { .aj-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .aj-panels { grid-template-columns: minmax(0, 1fr); } }

/* Institutions on ink */
.aj-inst { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.aj-inst li { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.5rem; padding: 1rem 0; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.aj-inst li:first-child { border-top: 0; }
.aj-inst strong { font-size: 1.35rem; font-weight: 500; line-height: 1.25; letter-spacing: -0.005em; }
.aj-inst span { color: #aab2bc; font-size: 0.95rem; }
@media (max-width: 700px) { .aj-inst li { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; } }

/* Media: typographic wordmark line + three featured pieces */
.aj-wordmarks { display: flex; flex-wrap: wrap; gap: 0.35rem 2rem; margin: 0.5rem 0 2.5rem; }
.aj-wordmarks span { font-family: var(--aj-display); font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-weight: 600; letter-spacing: -0.015em; color: var(--aj-ink); }
.aj-media3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.aj-media3 article { border-top: 3px solid var(--aj-ink); padding-top: 0.9rem; }
.aj-media3 h3 { font-size: 1.15rem; font-weight: 500; line-height: 1.3; margin: 0.35rem 0 0.5rem; }
.aj-media3 p { font-size: 0.95rem; color: var(--aj-ink-soft); margin: 0; }
.aj-more-row { margin: 2rem 0 0; }
@media (max-width: 800px) { .aj-media3 { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; } }

/* Home page: no top gap / title area from the theme */
.home .site-content .content-area .inside-article { padding-top: 0; padding-bottom: 0; }
.home .site-main { margin-bottom: 0; }

/* =====================================================================
   v0.5: roles in hero, horizontal institutions, calmer wordmarks
   ===================================================================== */
/* Positions: prominent, structured */
.aj-roles { margin: 1.75rem 0 0; display: grid; gap: 0.9rem; border-left: 4px solid var(--aj-blau); padding-left: 1.1rem; }
.aj-roles div { margin: 0; }
.aj-roles dt { font-size: 1.125rem; font-weight: 500; line-height: 1.35; color: var(--aj-ink); }
.aj-roles dd { margin: 0.1rem 0 0; font-family: var(--aj-mono); font-size: 0.95rem; color: var(--aj-ink-soft); }

/* Institutions: light band, three-column grid */
.aj-band-inst .aj-inst { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2rem; margin-top: 1rem; }
.aj-band-inst .aj-inst li { display: block; padding: 1.1rem 0 1.2rem; border-top: 3px solid var(--aj-blaurot); }
.aj-band-inst .aj-inst li:first-child { border-top: 3px solid var(--aj-blaurot); }
.aj-band-inst .aj-inst strong { display: block; font-size: 1.2rem; font-weight: 500; line-height: 1.25; color: var(--aj-ink); margin-bottom: 0.35rem; }
.aj-band-inst .aj-inst span { display: block; font-size: 0.95rem; line-height: 1.45; color: var(--aj-ink-soft); }
@media (max-width: 1000px) { .aj-band-inst .aj-inst { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .aj-band-inst .aj-inst { grid-template-columns: minmax(0, 1fr); } }

/* Teaching: plain white band with a hairline */
.aj-band-plain { background: var(--aj-paper); border-top: 1px solid var(--aj-line); }

/* Wordmarks: calmer, with vertical dividers */
.aj-wordmarks { gap: 0.5rem 0; align-items: baseline; }
.aj-wordmarks span { font-size: clamp(1.1rem, 1.8vw, 1.45rem); font-weight: 500; padding: 0 1.25rem; border-left: 1px solid rgba(18, 20, 23, 0.35); }
.aj-wordmarks span:first-child { padding-left: 0; border-left: 0; }
@media (max-width: 640px) { .aj-wordmarks span { padding: 0 0.75rem; } }

/* v0.5.1 tweaks */
.aj-hero2 { align-items: center; }
.aj-wordmarks { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.aj-wordmarks span { font-size: clamp(1rem, 1.55vw, 1.3rem); padding: 0 1rem; white-space: nowrap; }
@media (max-width: 900px) { .aj-wordmarks { flex-wrap: wrap; overflow: visible; } .aj-wordmarks span { border-left: 0; padding: 0 1.25rem 0 0; } .aj-wordmarks span:not(:last-child)::after { content: "·"; margin-left: 1.25rem; color: rgba(18,20,23,.45); } }
.aj-band-inst .aj-inst li, .aj-band-inst .aj-inst li:first-child { border-top: 2px solid var(--aj-ink); }

/* =====================================================================
   v0.6: tone helpers (the palette variants were removed on 2026-10-01)
   ===================================================================== */
/* Tone helpers, now with a separate text colour that meets 4.5:1 on its tint */
.aj-tone-gruen   { --aj-tone: var(--aj-gruen);   --aj-tint: var(--aj-gruen-t);   --aj-tone-text: var(--aj-gruen-text); }
.aj-tone-blau    { --aj-tone: var(--aj-blau);    --aj-tint: var(--aj-blau-t);    --aj-tone-text: var(--aj-blau-text); }
.aj-tone-purpur  { --aj-tone: var(--aj-purpur);  --aj-tint: var(--aj-purpur-t);  --aj-tone-text: var(--aj-purpur-text); }
.aj-tone-gelbrot { --aj-tone: var(--aj-gelbrot); --aj-tint: var(--aj-gelbrot-t); --aj-tone-text: var(--aj-gelbrot-text); }
.aj-tone-blaurot { --aj-tone: var(--aj-blaurot); --aj-tint: var(--aj-blaurot-t); --aj-tone-text: var(--aj-blaurot-text); }
/* The topics across the areas (2026-10-08): one step of the focus hue (OKLCH H 273; the focus itself is L 0.33). Marks
   L 0.55 C 0.10 (4.9 : 1 on white); text in the darker step L 0.45 (7.6 : 1 on white, 5.7 : 1 on the light step). Their pages
   open on the light step (#DDDFE6 = the focus hue at L 0.90). Andreas chose this, option b of three previews, 2026-10-08. */
.aj-tone-topic   { --aj-tone: #5E6DAC; --aj-tint: var(--aj-paper-2); --aj-tone-text: #43508C; }
.aj-band-topic.aj-topic-cross { background: var(--aj-paper-2); }
.aj-tone-gelb    { --aj-tone: var(--aj-gelb);    --aj-tint: var(--aj-gelb-t);    --aj-tone-text: var(--aj-gelb-text); }
.aj-band[class*="aj-tone-"] .aj-kicker, .aj-panel .aj-kicker { color: var(--aj-tone-text); }
.aj-band[class*="aj-tone-"] a:hover, .aj-panel a:hover { color: var(--aj-tone-text); }
a { color: var(--aj-link, var(--aj-blau-text)); }


/* Preview badge (local only; now used by ?teaching=) */
.aj-palette-badge { position: fixed; right: 1rem; bottom: 1rem; z-index: 999; background: var(--aj-ink); color: #fff; font-family: var(--aj-mono); font-size: 0.85rem; padding: 0.5rem 0.75rem; }
.aj-palette-badge a { color: #fff; margin-left: 0.6rem; }

/* =====================================================================
   v0.7 (Fable session, 2026-09-25): copy settled, accessibility fixes, labelled sparklines
   ===================================================================== */
/* Section headings that are styled like kickers (keeps the heading outline intact without adding height) */
h2.aj-h2-kicker { font-size: var(--aj-s-1); font-weight: 500; line-height: 1.4; margin: 0 0 1.25rem; }
.aj-band-panels h2.aj-h2-kicker { color: var(--aj-ink-soft); }

/* "Why it matters" lines: content, not metadata, so body type; the label is metadata */
.aj-why { margin: 0.9rem 0 0; color: var(--aj-ink); font-size: 0.975rem; line-height: 1.5; }
.aj-why-label { display: block; font-family: var(--aj-mono); font-size: var(--aj-s-1); letter-spacing: 0.06em; text-transform: uppercase; color: var(--aj-tone-text, var(--aj-ink-soft)); margin-bottom: 0.15rem; }
.aj-band-ai .aj-why { font-size: var(--aj-s0); max-width: 36em; margin-top: 1rem; }
/* The politics of AI (2026-10-02): what I study, set off from the lede as its own paragraph */
.aj-band-ai .aj-study { font-size: var(--aj-s0); line-height: 1.5; max-width: 36em; margin: 1rem 0 0; }
.aj-panel .aj-why { margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px solid rgba(18, 20, 23, 0.12); }
.aj-more::after { content: "\00a0→"; } /* non-breaking: the arrow never wraps alone */

/* Sparklines: visible label, year ticks, shared scale (drawn from the publications by jungherr-core/home.php since 2026-10-08; before by build/tools/sparklines.py) */
.aj-spark-label { display: block; margin-bottom: 0.2rem; }
.aj-panel-foot .aj-spark-label { margin-bottom: 0.1rem; }
.aj-tick { font-family: var(--aj-mono); font-size: 8px; fill: var(--aj-ink-soft); }
.aj-margin .aj-spark-label { margin: 0.25rem 0 0.2rem; }

/* Media band: link underlines in the dark ochre text colour (the yellow line was 2:1 on the tint) */
.aj-band.aj-tone-gelb a { text-decoration-color: var(--aj-tone-text); }

/* The recommended H1 has 21 words: a little more width keeps it to five lines at 1440 px */
.aj-display { max-width: 22ch; }

/* =====================================================================
   v0.8 (Fable session, 2026-09-25): critique taken up
   - one grid (main + margin) for the text sections; the topic panels become rows
   - findings shown under the flagship titles; quotes in the media pieces
   - one tinted band only (the current focus); colour elsewhere marks topics
   - no arrows on links; hero accents in ink so Blau means "public arena" only
   Reversal notes: rows take their tint again with `.aj-row { background: var(--aj-tint) }`;
   the media band takes its yellow again by adding the class `aj-tone-gelb` to the section.
   ===================================================================== */
:root { --aj-main: 40rem; --aj-margin: 20rem; --aj-gap: 3rem; }
.aj-band { padding: 3.5rem 0; }
.aj-band-hero { padding: 3.5rem 0 4rem; }
.aj-more::after { content: none; }

/* Hero: portrait column on the shared margin width; accents in ink; impact line */
.aj-hero2 { grid-template-columns: minmax(0, 1fr) var(--aj-margin); gap: var(--aj-gap); }
.aj-roles { border-left-color: var(--aj-ink); margin-top: 1.5rem; }
.aj-portrait img { border-bottom-color: var(--aj-ink); }
.aj-portrait figcaption a { color: var(--aj-ink-soft); }
.aj-impact { margin: 1.25rem 0 0; font-family: var(--aj-mono); font-size: var(--aj-s-1); color: var(--aj-ink-soft); line-height: 1.6; max-width: 40rem; }
.aj-impact em { font-style: italic; }
.aj-hero-links { margin-top: 1.5rem; }
.aj-hero-links a { text-decoration-color: var(--aj-ink); }

/* Findings under flagship titles */
.aj-finding { margin: 0.25rem 0 0.2rem; font-size: 0.95rem; line-height: 1.45; color: var(--aj-ink); }
.aj-works-lg .aj-finding { font-size: var(--aj-s0); }
.aj-findings li { padding: 0.8rem 0; }
.aj-findings .aj-meta { display: block; }

/* Inline kickers ("What's ahead", "Latest", "For journalists") */
.aj-kicker-inline { font-family: var(--aj-mono); font-size: var(--aj-s-1); letter-spacing: 0.06em; text-transform: uppercase; color: var(--aj-tone-text, var(--aj-ink-soft)); margin-right: 0.6rem; }
.aj-ahead-line { margin: 1.5rem 0 0; padding-left: 1rem; border-left: 4px solid var(--aj-gelb); font-size: var(--aj-s0); line-height: 1.5; max-width: 40rem; }
.aj-ahead-line .aj-kicker-inline { color: var(--aj-gelb-text); }
.aj-latest { padding-bottom: 0.75rem; border-bottom: 1px solid var(--aj-line); margin-bottom: 0.75rem !important; }

/* Rows: the four parts of the question, in the same grid as the text sections */
.aj-band-rows { padding-top: 3rem; }
.aj-rows { list-style: none; margin: 1rem 0 0; padding: 0; counter-reset: aj-row; }
.aj-row { counter-increment: aj-row; border-top: 1px solid var(--aj-line); padding: 1.75rem 0 1.75rem 1.25rem; border-left: 4px solid var(--aj-tone); margin-top: 1rem; }
.aj-row:first-child { margin-top: 0; }
.aj-row-title { font-size: 1.5rem; font-weight: 500; line-height: 1.2; letter-spacing: var(--aj-display-tracking); margin: 0; }
.aj-row-sub { font-family: var(--aj-mono); font-size: var(--aj-s-1); letter-spacing: 0.06em; text-transform: uppercase; color: var(--aj-tone-text); margin: 0.3rem 0 0.9rem; }
.aj-row-sub::before { content: counter(aj-row) " · "; color: var(--aj-ink-soft); }
.aj-row-desc { margin: 0; }
.aj-row .aj-why { margin: 0.9rem 0 0; }
.aj-row .aj-why-label { color: var(--aj-tone-text); }
.aj-row .aj-works { margin-top: 1rem; }
.aj-row .aj-works a { color: var(--aj-ink); text-decoration-color: var(--aj-tone); }
.aj-row .aj-works a:hover, .aj-row .aj-more:hover { color: var(--aj-tone-text); }
.aj-row .aj-more { color: var(--aj-ink); text-decoration-color: var(--aj-tone); }
.aj-row .aj-margin { padding-top: 0.6rem; }
.aj-row .aj-margin p { margin: 0 0 0.5rem; }
.aj-row .aj-spark-label { margin: 0 0 0.25rem; }
.aj-row .aj-spark { margin-bottom: 0.75rem; }
@media (max-width: 900px) {
	.aj-row .aj-margin { border-left: 0; padding-left: 0; margin-top: 1rem; }
	.aj-row { padding-left: 1rem; }
}

/* Institutions: one-line intro */
.aj-section-intro { color: var(--aj-ink-soft); margin: -0.25rem 0 0.5rem; max-width: 40rem; }

/* Media: white band, ink rules, quotes in Plex Serif */
.aj-band-media { border-top: 1px solid var(--aj-line); }
.aj-band-media .aj-wordmarks span { color: var(--aj-ink); }
.aj-quote { font-family: var(--aj-serif); font-size: 1.05rem; line-height: 1.5; color: var(--aj-ink); margin: 0.5rem 0 0.4rem; }
.aj-gloss { font-size: 0.9rem; line-height: 1.45; color: var(--aj-ink-soft); margin: 0; }
.aj-press { margin: 2.25rem 0 0; max-width: 42rem; font-size: var(--aj-s0); line-height: 1.5; }

/* Teaching: one paragraph */
.aj-band-teaching { padding: 2.5rem 0 3rem; }
.aj-band-teaching p { margin: 0; max-width: 40rem; }
.aj-band-teaching .aj-h2x { margin-bottom: 0.75rem; }

/* Rows, second pass: the flagship works sit in the margin as the evidence column; the main column carries the argument */
.aj-row .aj-margin .aj-works { margin: 0.25rem 0 0.75rem; }
.aj-row .aj-margin .aj-works li { padding: 0.55rem 0; }
.aj-row .aj-margin .aj-works a { font-size: 0.95rem; color: var(--aj-ink); }
.aj-row .aj-margin .aj-finding { font-size: 0.875rem; line-height: 1.45; color: var(--aj-ink); margin: 0.2rem 0 0.15rem; }
.aj-row .aj-spark { margin-bottom: 0.5rem; }
.aj-row { padding-top: 1.5rem; padding-bottom: 1.5rem; }

/* Rows, third pass: tighter vertical rhythm; wider margin column so the flagship works need fewer lines */
:root { --aj-margin: 22rem; }
.aj-band { padding: 3rem 0; }
.aj-band-hero { padding: 3rem 0 3.5rem; }
.aj-band-rows { padding-top: 2.5rem; }
.aj-band-rows .aj-h2x { margin-bottom: 0.5rem; }
.aj-row { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.aj-row .aj-margin .aj-works li { padding: 0.45rem 0; }
.aj-works-lg .aj-finding { font-size: 0.95rem; }
.aj-band-inst .aj-inst li { padding: 0.9rem 0 1rem; }
.aj-display { max-width: 25ch; }
.aj-lede { max-width: 40em; }
/* Hero must still stack on narrow screens (the v0.8 hero rule sits after the v0.5 breakpoint) */
@media (max-width: 800px) {
	.aj-hero2 { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}

/* Rows, fourth pass: the sparkline sits under the argument in the main column (data with the text); the margin holds the sources */
.aj-row .aj-main .aj-spark-label { margin: 1.1rem 0 0.25rem; }
.aj-row .aj-main .aj-spark { max-width: 16rem; margin-bottom: 0; }
.aj-row .aj-margin { padding-top: 0.35rem; }

/* v0.8.1: thesis line, team line, projects, publication counts, "Working with me", writing for the public */
.aj-thesis { font-family: var(--aj-serif); font-size: 1.3rem; line-height: 1.4; color: var(--aj-ink); margin: -0.5rem 0 1.25rem; max-width: 30em; }
.aj-team { margin: 1rem 0 0; max-width: 40em; }
.aj-projects { margin: 1.75rem 0 0; }
.aj-projects ul { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.aj-projects li { padding: 0.45rem 0; border-top: 1px solid rgba(18, 20, 23, 0.12); font-size: 0.95rem; line-height: 1.4; }
.aj-projects li:first-child { border-top: 0; }
.aj-projects strong { font-weight: 500; }
.aj-projects .aj-meta { display: block; }
.aj-rows-head { align-items: end; }
.aj-pubcounts { margin: 0 0 0.6rem; line-height: 1.5; }
.aj-pubcounts a { color: var(--aj-ink-soft); text-decoration-color: var(--aj-line); }
.aj-band-inst .aj-inst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .aj-band-inst .aj-inst { grid-template-columns: minmax(0, 1fr); } }
.aj-work-with { font-size: 0.95rem; color: var(--aj-ink); }
.aj-work-with h3 { font-size: 1.125rem; font-weight: 500; line-height: 1.3; margin: 0 0 0.5rem; }
.aj-work-with ul { list-style: none; margin: 0; padding: 0; }
.aj-work-with li { padding: 0.45rem 0; border-top: 1px solid var(--aj-line); line-height: 1.4; }
.aj-work-with p { margin: 0.75rem 0 0; }
.aj-band-public { border-top: 1px solid var(--aj-line); }
.aj-public li { padding: 0.55rem 0; }
.aj-public li > span:first-child { display: block; font-weight: 500; line-height: 1.35; }

/* v0.8.2 (2026-09-27): review points 1-7
   1 the thesis is the H1 (the old .aj-thesis line is gone); 2 the credentials line sits under the positions at body size;
   3 portrait top-aligned on desktop, after the text on phones; 6 row sentences without the "Why it matters" label */
.aj-hero2 { align-items: start; }
.aj-portrait { margin-top: 2.1rem; }
.aj-hero2 .aj-display { max-width: 22ch; }
.aj-impact { margin: 1.25rem 0 0; font-family: inherit; font-size: 1rem; line-height: 1.55; color: var(--aj-ink); max-width: 40em; text-wrap: pretty; }
.aj-team { margin-top: 0.75rem; color: var(--aj-ink-soft); }
@media (max-width: 800px) {
	.aj-portrait { order: 0; margin-top: 0.5rem; }
}
.aj-row .aj-why { margin-top: 0.75rem; color: var(--aj-ink-soft); }

/* =====================================================================
   v0.8.3 / v0.8.4 (2026-09-28): the publication record under the hero
   Drawn from the publications by aj_home_record() in jungherr-core/home.php (since 2026-10-08; before written by
   build/tools/sparklines.py from the BibTeX file). Ink only: on this page colour means topic,
   and the record is about genre. One figure (the total), one chart (publications per year), and the five type groups
   as a small table in the margin column, under the portrait (v0.8.4: Andreas dropped the per-group sparklines;
   he kept this layout over a one-line alternative, 2026-09-28).
   ===================================================================== */
.aj-band-record { margin-top: -1rem; padding: 0 0 2.75rem; }
.aj-record { display: grid; grid-template-columns: minmax(0, 1fr) var(--aj-margin); column-gap: var(--aj-gap); align-items: start; }
.aj-record-main, .aj-record-side { min-width: 0; border-top: 2px solid var(--aj-ink); padding-top: 0.7rem; }
.aj-record .aj-kicker { margin: 0 0 0.75rem; font-weight: 400; line-height: 1.3; }
.aj-record-fig { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 2.5rem; align-items: end; }
.aj-record-n { margin: 0; font-size: 4rem; font-weight: 500; line-height: 0.85; letter-spacing: -0.02em; font-feature-settings: "tnum", "lnum"; }
.aj-record-n a { color: var(--aj-ink); text-decoration: none; }
.aj-record-n a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.aj-record-sub { display: block; margin-top: 0.7rem; font-size: 0.95rem; font-weight: 400; line-height: 1.3; letter-spacing: 0; color: var(--aj-ink-soft); }
.aj-record-chart { margin: 0; }
.aj-record-chart figcaption { margin-bottom: 0.3rem; }
.aj-record-chart svg.aj-spark { max-width: min(100%, 33rem); } /* about its size on desktop; wider only adds ink */
.aj-spark-rec rect { fill: var(--aj-ink); }
.aj-spark-rec .aj-tick { font-size: 11px; }
.aj-record-types { list-style: none; margin: 0; padding: 0; }
.aj-record-types li { border-top: 1px solid var(--aj-line); }
.aj-record-types li:first-child { border-top: 0; }
.aj-record-types a { display: flex; align-items: baseline; gap: 1rem; padding: 0.3rem 0; color: var(--aj-ink); text-decoration: none; }
.aj-record-types li:first-child a { padding-top: 0; }
.aj-record-label { flex: 1; font-size: 0.95rem; line-height: 1.35; }
.aj-record-gloss { margin-left: 0.35rem; font-family: var(--aj-mono); font-size: var(--aj-s-1); color: var(--aj-ink-soft); }
.aj-record-count { min-width: 2ch; font-weight: 500; text-align: right; font-feature-settings: "tnum", "lnum"; }
.aj-record-types a:hover .aj-record-label { text-decoration: underline; }
.aj-record-ahead { margin: 0.5rem 0 0; }
/* below 1100 px the chart would shrink next to the table: the table moves under the chart */
@media (max-width: 1100px) {
	.aj-record { grid-template-columns: minmax(0, 1fr); row-gap: 1.25rem; }
	.aj-record-side { max-width: 30rem; border-top-width: 1px; border-top-color: var(--aj-line); }
}
/* phones: the number and its line side by side, the chart full width under them */
@media (max-width: 600px) {
	.aj-record-fig { grid-template-columns: minmax(0, 1fr); row-gap: 1rem; }
	.aj-record-n { font-size: 3rem; }
	.aj-record-sub { display: inline-block; margin: 0 0 0 0.75rem; font-size: 0.95rem; }
	.aj-record-side { max-width: none; }
	.aj-record-gloss { display: none; }
}

/* The books as flags on the record chart (Andreas chose labels over dots, 2026-09-28): ink like the bars;
   each links to the book (DOI), full title on hover. */
.aj-rec-book { text-decoration: none; }
.aj-rec-book line { stroke: var(--aj-ink); stroke-width: 1; }
.aj-rec-book text { font-family: var(--aj-mono); font-size: 11px; font-weight: 500; fill: var(--aj-ink); }
.aj-rec-book:hover text, .aj-rec-book:focus-visible text { text-decoration: underline; }
.aj-rec-book:focus-visible { outline: 2px solid var(--aj-ink); outline-offset: 2px; }

/* Hero motto (2026-09-28): Andreas's line from the current site replaces the "Political scientist" kicker.
   Serif italic, sentence case, soft ink: a personal aside in his own voice, not a label. */
.aj-motto { margin: 0 0 0.9rem; font-family: var(--aj-serif); font-style: italic; font-size: 1.0625rem; line-height: 1.4; color: var(--aj-ink-soft); }

/* =====================================================================
   v0.8.6 (2026-09-30): teaching (outputs/E5-teaching-analysis.md)
   Homepage band: lean (Andreas, 2026-09-30; previews list and record removed 2026-10-03).
   Teaching page (/teaching/, from build/tools/teaching.py):
   intro with the open lecture in the margin, courses by topic (chosen 2026-09-30), the full record collapsed.
   ===================================================================== */
.aj-band-teaching .aj-margin p { margin: 0 0 0.6rem; }
.aj-band-teaching .aj-margin .aj-kicker-inline { display: block; margin-bottom: 0.1rem; }

/* Teaching page: bands from the top, as on the homepage */
.aj-bands .site-content .content-area .inside-article { padding-top: 0; padding-bottom: 0; }
.aj-bands .site-main { margin-bottom: 0; }
.aj-h1-page { font-size: var(--aj-s3); font-weight: var(--aj-display-weight); letter-spacing: var(--aj-display-tracking); line-height: 1.12; margin: 0 0 1.25rem; }
.aj-band-teach-intro .aj-lede { margin: 0 0 1rem; }
.aj-band-teach-intro p { max-width: 40rem; }
@media (min-width: 901px) { .aj-band-teach-intro .aj-margin { padding-top: 2.4rem; } }
.aj-open { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.aj-open li { padding: 0.4rem 0; border-top: 1px solid var(--aj-line); }
.aj-open li:first-child { border-top: 0; }
.aj-open a { font-size: var(--aj-s0); font-weight: 500; color: var(--aj-ink); text-decoration-color: var(--aj-blau); }

/* Courses by topic: each topic a colour bar, as in "Writing for the public"; courses in two columns, filled row by row
   (2026-10-05; were newspaper columns, which read newest first down the left column, then the right) */
.aj-ctopics { display: grid; gap: 2.25rem; margin-top: 1.25rem; }
.aj-ctopic { border-left: 6px solid var(--aj-tone); padding-left: 1.1rem; }
.aj-ctopic-title { font-size: 1.5rem; font-weight: 500; line-height: 1.2; letter-spacing: var(--aj-display-tracking); color: var(--aj-tone-text); margin: 0; }
.aj-ctopic .aj-row-sub { margin: 0.3rem 0 0.5rem; }
.aj-ctopic .aj-row-sub::before { content: none; }
.aj-courses { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--aj-gap); }
.aj-courses li { padding: 0.55rem 0; border-top: 1px solid var(--aj-line); }
.aj-course-name { display: block; font-weight: 500; line-height: 1.35; }
.aj-courses .aj-meta { display: block; margin-top: 0.1rem; }
.aj-courses .aj-meta a { color: var(--aj-ink); text-decoration-color: var(--aj-tone); }
@media (max-width: 900px) { .aj-courses { grid-template-columns: minmax(0, 1fr); } }

/* Full record, collapsed */
.aj-band-record-all { padding-top: 0.5rem; border-top: 0; }
.aj-all summary { cursor: pointer; font-family: var(--aj-mono); font-size: 0.95rem; letter-spacing: 0.02em; color: var(--aj-ink); padding: 0.75rem 0; border-top: 1px solid var(--aj-line); border-bottom: 1px solid var(--aj-line); }
.aj-all h3 { font-size: 1.15rem; font-weight: 500; margin: 1.75rem 0 0.5rem; }
.aj-all h4 { font-size: 1rem; font-weight: 500; margin: 1.25rem 0 0.4rem; }
.aj-all-sems { list-style: none; margin: 0; padding: 0; }
.aj-all-sems > li { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; padding: 0.4rem 0; border-top: 1px solid var(--aj-line); font-size: 0.95rem; }
.aj-all-sem { font-family: var(--aj-mono); font-size: var(--aj-s-1); color: var(--aj-ink-soft); padding-top: 0.15rem; }
.aj-all-sems ul { list-style: none; margin: 0; padding: 0; }
.aj-all-sems ul li { margin: 0 0 0.2rem; }
.aj-all-sems .aj-meta { white-space: nowrap; }
@media (max-width: 700px) { .aj-all-sems > li { grid-template-columns: 1fr; gap: 0.1rem; } }

/* =====================================================================
   Colour (v0.9.0, decided 2026-10-01). Folds the colour layers of v0.6–v0.8 and the 2026-09-30/10-01 previews.
   Order of the bands: hero and record (white) · the current focus (indigo field) · four perspectives (white) ·
   advice and evidence (amber) · writing for the public (white) · media (light step) · teaching (white) · footer (dark).
   Amber only where it has a function (Andreas, 2026-10-01): the transfer band, "What's ahead", the four book markers,
   hover and focus. The body class aj-c is always set (functions.php); it keeps these rules above the layered base.
   ===================================================================== */

/* The current focus: the one colour field, light type */
body.aj-c .aj-band.aj-band-ai { background: var(--aj-focus); color: var(--aj-on-dark); }
body.aj-c .aj-band.aj-band-ai * { color: inherit; border-color: var(--aj-on-dark-rule); }
body.aj-c .aj-band.aj-band-ai :is(.aj-meta, .aj-kicker, .aj-kicker-inline, .aj-why-label) { color: var(--aj-on-dark-soft); }
body.aj-c .aj-band.aj-band-ai a { color: var(--aj-on-dark); text-decoration-color: rgba(246, 243, 234, 0.55); }
body.aj-c .aj-band.aj-band-ai a:hover { color: var(--aj-on-dark); text-decoration-color: var(--aj-on-dark); }
body.aj-c .aj-band.aj-band-ai .aj-spark rect { fill: var(--aj-on-dark); }
body.aj-c .aj-band.aj-band-ai .aj-axis { stroke: rgba(255, 255, 255, 0.5); }
body.aj-c .aj-band.aj-band-ai .aj-tick { fill: var(--aj-on-dark-soft); }
body.aj-c .aj-band.aj-band-ai .aj-ahead-line { border-left-color: var(--aj-accent); }

/* The four perspectives: a column in the perspective's hue, with the numeral */
body.aj-c .aj-row { position: relative; border-left: 0; padding-left: 5.5rem; }
body.aj-c .aj-row::before {
	content: counter(aj-row); position: absolute; left: 0; top: 0; bottom: 0; width: 4rem;
	background: var(--aj-tone); color: #fff; text-align: center;
	font-family: var(--aj-display); font-weight: 500; font-size: 2.75rem; line-height: 1; padding-top: 1.5rem;
}
body.aj-c .aj-row-sub::before { content: none; }
body.aj-c .aj-row-title { color: var(--aj-tone-text); }
@media (max-width: 900px) {
	body.aj-c .aj-row { padding-left: 3.75rem; }
	body.aj-c .aj-row::before { width: 2.75rem; font-size: 1.9rem; padding-top: 1.6rem; }
}

/* Advice and evidence (transfer): the amber band, ink type, dark rules */
body.aj-c .aj-band.aj-band-inst { background: var(--aj-accent); color: var(--aj-ink); }
body.aj-c .aj-band.aj-band-inst * { color: inherit; border-color: rgba(18, 20, 23, 0.18); }
body.aj-c .aj-band.aj-band-inst :is(.aj-meta, .aj-kicker, .aj-section-intro, .aj-inst span) { color: var(--aj-on-accent-soft); }
body.aj-c .aj-band.aj-band-inst .aj-inst strong { color: var(--aj-ink); }
body.aj-c .aj-band.aj-band-inst .aj-inst li { border-top: 3px solid var(--aj-dark); }
body.aj-c .aj-band.aj-band-inst a { color: var(--aj-ink); text-decoration-color: var(--aj-dark); }
body.aj-c .aj-band.aj-band-inst a:hover { color: var(--aj-ink); text-decoration-color: var(--aj-dark); text-decoration-thickness: 2px; }
body.aj-c .aj-band.aj-band-inst a:focus-visible { outline-color: var(--aj-ink); } /* the accent-text ring would vanish on amber */

/* Writing for the public: a bar in the colour of each piece's primary perspective (or the focus) */
body.aj-c .aj-public li { border-left: 6px solid var(--aj-tone, var(--aj-line)); padding-left: 0.9rem; }
body.aj-c .aj-public li a { color: var(--aj-ink); text-decoration-color: var(--aj-tone, var(--aj-line)); text-decoration-thickness: 2px; }
body.aj-c .aj-public li a:hover { color: var(--aj-tone-text, var(--aj-ink)); }
body.aj-c .aj-band-public { border-top: 0; }

/* In the media: the light step, ink type */
body.aj-c .aj-band.aj-band-media { background: var(--aj-paper-2); color: var(--aj-ink); }
body.aj-c .aj-band.aj-band-media * { color: inherit; }
body.aj-c .aj-band.aj-band-media :is(.aj-meta, .aj-kicker, .aj-kicker-inline, .aj-gloss, .aj-media3 p) { color: #2E333A; }
body.aj-c .aj-band.aj-band-media .aj-quote { color: var(--aj-ink); }
body.aj-c .aj-band.aj-band-media a { color: var(--aj-ink); text-decoration-color: rgba(18, 20, 23, 0.6); }
body.aj-c .aj-band.aj-band-media a:hover { text-decoration-color: var(--aj-ink); }

/* Footer: the dark band */
body.aj-c .site-footer,
body.aj-c .site-footer .site-info { background: var(--aj-dark); color: var(--aj-on-dark-soft); border-top: 0; }
body.aj-c .site-footer a { color: var(--aj-on-dark); text-decoration-color: rgba(246, 243, 234, 0.55); }
body.aj-c .site-footer .inside-site-info { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.aj-foot-line { display: block; } /* the footer's two lines: contact and profiles, then the legal pages (2026-10-07) */
.aj-foot-line + .aj-foot-line { margin-top: 0.4rem; }
.aj-foot-line a { white-space: nowrap; } /* "Google Scholar" stays on one line on phones */

/* Links and states: links in ink; the accent marks hover and focus */
body.aj-c a:hover { color: var(--aj-ink); text-decoration-color: var(--aj-accent); text-decoration-thickness: 2px; }
body.aj-c .main-navigation .main-nav ul li a:hover,
body.aj-c .main-navigation .main-nav ul li > a[aria-current="page"]:not([href*="#"]) { color: var(--aj-ink); } /* anchors on the home page are never "current" */
body.aj-c a:focus-visible { outline-color: var(--aj-accent-text); }
body.aj-c ::selection { background: var(--aj-accent-pale); }

/* Hero: structure in neutrals, no accent */
body.aj-c .aj-hero-links a { text-decoration-color: rgba(18, 20, 23, 0.5); }
body.aj-c .aj-portrait img { border-bottom: 0; }
body.aj-c .aj-roles { border-left-color: var(--aj-dark); }

/* The accent with a function: the four book markers on the record chart, the open-lecture links */
body.aj-c .aj-rec-book line { stroke: var(--aj-accent); stroke-width: 2; }
body.aj-c .aj-rec-book text { fill: var(--aj-accent-text); }
body.aj-c .aj-open a { text-decoration-color: var(--aj-accent); }

/* AI band margin in groups (2026-10-02): latest media, latest outreach, approach; then the book and the sparkline */
.aj-side-group { padding-bottom: 0.75rem; border-bottom: 1px solid var(--aj-line); margin-bottom: 0.75rem; }
.aj-side-group .aj-kicker-inline { display: block; margin-bottom: 0.2rem; }
.aj-side-group p { margin: 0 0 0.5rem; }
.aj-side-group p:last-child { margin-bottom: 0; }
.aj-margin .aj-spark-more { margin: 0.5rem 0 0; }

/* Selected journals under the publication record (2026-10-03): one heading "Selected journals" in the kicker style over two
   columns of four (one list on phones), set off from the chart by space alone; no column heads (Andreas) */
.aj-record-journals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; margin: 2.25rem 0 0; font-size: 0.95rem; line-height: 1.6; color: var(--aj-ink); }
.aj-record-jhead { grid-column: 1 / -1; font-family: var(--aj-mono); font-size: var(--aj-s-1); font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--aj-ink-soft); margin: 0 0 0.25rem; line-height: 1.4; }
.aj-record-journals ul { list-style: none; margin: 0; padding: 0; }
@media (max-width: 640px) { .aj-record-journals { grid-template-columns: minmax(0, 1fr); } }

/* Current projects in the AI band (2026-10-03, Andreas chose "years"): set off by an indent and a thin light rule (the neutral
   counterpart of the amber rule of "What's ahead"); the years in a column of their own, hairlines between the projects;
   main title bold, subtitle regular, funder and partners on their own line */
.aj-proj-years { margin: 2rem 0 0; padding-left: 1.25rem; border-left: 2px solid var(--aj-on-dark-rule); max-width: 40rem; }
.aj-proj-years .aj-kicker-inline { display: block; margin: 0 0 0.35rem; }
.aj-proj-years ul { list-style: none; margin: 0; padding: 0; }
.aj-proj-years li { position: relative; padding: 0.5rem 0 0.5rem 5rem; border: 0; font-size: 1rem; line-height: 1.4; }
.aj-proj-years li + li { border-top: 1px solid var(--aj-on-dark-rule); }
.aj-proj-years .aj-proj-title { margin: 0; }
.aj-proj-years .aj-proj-title strong { font-weight: 600; }
.aj-proj-years .aj-meta { display: block; margin: 0.15rem 0 0; }
.aj-proj-years .aj-proj-yrs { position: absolute; left: 0; top: 0.5rem; line-height: 1.4rem; font-variant-numeric: tabular-nums; }

/* The AI band in three parts (2026-10-03, Andreas chose "steps"): mission (with Latest media and Outreach), selected
   publications on the lighter step of the field (with the book, the sparkline and "All work on AI"), current projects
   (with Approach). Light type on the step 7.5 : 1, soft type 6.0 : 1, the amber rule of "What's ahead" 3.1 : 1. */
.aj-band.aj-ai-split { padding: 0; }
.aj-ai-part { padding: 2.75rem 0; }
.aj-ai-p1 { padding-top: 3.25rem; }
.aj-ai-p3 { padding-bottom: 3.5rem; }
.aj-ai-part > .aj-inner { max-width: var(--aj-inner); margin: 0 auto; padding: 0 2.5rem; }
@media (max-width: 700px) { .aj-ai-part > .aj-inner { padding: 0 1.25rem; } .aj-ai-part { padding: 2.25rem 0; } }
.aj-ai-kick { display: block; margin: 0 0 0.6rem; }
.aj-ai-split .aj-ai-p2 .aj-works-lg { margin-top: 0; }
.aj-ai-split .aj-ai-p3 .aj-proj-years { margin-top: 0; }
body.aj-c .aj-band.aj-band-ai .aj-ai-p2 { background: var(--aj-focus-step); }

/* Advice band margin (2026-10-03): "For institutions" as an inline kicker, like "For journalists" in the media band */
.aj-work-with .aj-kicker-inline { display: block; margin: 0 0 0.35rem; }
body.aj-c .aj-band.aj-band-inst .aj-kicker-inline { color: var(--aj-on-accent-soft); }

/* Writing for the public, margin (2026-10-03): inline kicker on its own line, as in the teaching band */
.aj-band-public .aj-margin .aj-kicker-inline { display: block; margin-bottom: 0.1rem; }

/* Teaching band, lean (2026-10-03): intro, paragraph, "All …" link, and margin groups, like the other bands */
.aj-band-teaching .aj-section-intro { margin: -0.25rem 0 0.75rem; }
.aj-band-teaching .aj-more-row { margin: 1.5rem 0 0; }
.aj-band-teaching .aj-main p + p:not(.aj-more-row) { margin-top: 0.75rem; }

/* =====================================================================
   Single publication (2026-10-05; single-publication.php). Layout "margin", chosen by Andreas from three previews:
   title block and abstract in the main column; topics, media coverage, and the APA citation in the margin.
   Topic hues as marks only (colour principles rule 17), each with its name (rule 15); links in ink.
   ===================================================================== */
.aj-band-pub { padding: 3rem 0 3.5rem; }
.aj-pub-title { font-size: clamp(1.75rem, 3.2vw, 2.4rem); font-weight: var(--aj-display-weight); letter-spacing: var(--aj-display-tracking); line-height: 1.15; margin: 0 0 1rem; overflow-wrap: break-word; hyphens: auto; text-wrap: balance; }
.aj-pub-sub { display: block; margin-top: 0.45rem; font-size: 0.62em; font-weight: 400; line-height: 1.3; letter-spacing: 0; color: var(--aj-ink-soft); text-wrap: pretty; }
.aj-pub-by { margin: 0 0 0.3rem; font-size: 1.125rem; line-height: 1.4; }
.aj-pub-venue { margin: 0; color: var(--aj-ink-soft); line-height: 1.45; }
.aj-pub-note { margin: 0.2rem 0 0; }
.aj-pub-links { display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem; margin: 1.1rem 0 0; font-family: var(--aj-mono); font-size: 0.95rem; }
.aj-pub-links a { color: var(--aj-ink); text-decoration-color: rgba(18, 20, 23, 0.5); overflow-wrap: anywhere; }
.aj-pub-abstract { margin-top: 2.25rem; }
.aj-pub-abstract .aj-kicker { margin: 0 0 0.6rem; font-weight: 400; line-height: 1.4; }
.aj-pub-abstract p { font-family: var(--aj-serif); font-size: 1.0625rem; line-height: 1.65; margin: 0 0 1rem; }
.aj-pub-abstract[lang="de"] p { hyphens: auto; } /* German compounds need it; English reads better unbroken */
.aj-band-pub .aj-more-row { margin: 2.25rem 0 0; }
.aj-band-pub .aj-margin .aj-side-group:last-child { border-bottom: 0; }
.aj-band-pub .aj-more { color: var(--aj-ink); }

/* Margin: topics with their hue, media coverage, citation */
.aj-pub-topics, .aj-pub-media { list-style: none; margin: 0; padding: 0; }
.aj-pub-topics li { border-left: 4px solid var(--aj-tone, var(--aj-line)); padding: 0.05rem 0 0.05rem 0.6rem; margin: 0 0 0.35rem; line-height: 1.4; }
.aj-pub-topics a { font-size: 0.95rem; color: var(--aj-ink); text-decoration-color: var(--aj-tone, var(--aj-line)); }
.aj-pub-media li { padding: 0.3rem 0; border-top: 1px solid var(--aj-line); line-height: 1.35; }
.aj-pub-media li:first-child { border-top: 0; padding-top: 0; }
.aj-pub-media a { color: var(--aj-ink); font-size: 0.95rem; }
.aj-pub-media .aj-meta { display: block; }
.aj-pub-cite { margin: 0; font-size: var(--aj-s-1); line-height: 1.55; color: var(--aj-ink); overflow-wrap: anywhere; }
.aj-pub-cite a { color: var(--aj-ink-soft); }
.aj-band-pub .aj-margin { padding-top: 2.1rem; } /* level with the title, below the kicker */
@media (max-width: 900px) { .aj-band-pub .aj-margin { padding-top: 0; margin-top: 1.5rem; } }


/* =====================================================================
   Publication list (2026-10-05; archive-publication.php). All works on one page, filtered by the address
   (?type=, ?topic=, ?language=). Layout chosen by Andreas from three previews: works by year with full entries;
   the filters in the margin, sticky on desktop, and as a bar under the heading on phones.
   ===================================================================== */
.aj-band-pubs { padding: 3rem 0 3.5rem; }
/* No counts under the page headings (Andreas, 2026-10-06): the status line shows only while a filter is set; without it
   the heading keeps the line's space, so the margin stays level with the lists */
.aj-band-pubs .aj-h1-page, .aj-band-projects .aj-h1-page { margin-bottom: calc(0.4rem + var(--aj-s-1) * 1.55 + 1.5rem); }
.aj-band-pubs .aj-h1-page:has(+ .aj-pl-count), .aj-band-projects .aj-h1-page:has(+ .aj-pl-count) { margin-bottom: 0.4rem; }
.aj-pl-count { margin: 0 0 1.5rem; }
.aj-pl-count a { color: var(--aj-ink); }

/* Filters: label and options in one line each, counts in soft type; the active option underlined in ink */
.aj-pl-filters { display: grid; gap: 0.45rem; margin: 0 0 2.25rem; padding: 0.8rem 0; border-top: 2px solid var(--aj-ink); border-bottom: 1px solid var(--aj-line); }
.aj-pl-facet { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: baseline; }
.aj-pl-flabel { font-family: var(--aj-mono); font-size: var(--aj-s-1); letter-spacing: 0.06em; text-transform: uppercase; color: var(--aj-ink-soft); }
.aj-pl-facet ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.15rem 1.1rem; }
.aj-pl-facet li { margin: 0; font-size: 0.95rem; line-height: 1.5; }
.aj-pl-facet a { color: var(--aj-ink); text-decoration: none; }
.aj-pl-facet a:hover { text-decoration: underline; }
.aj-pl-facet a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em; font-weight: 500; }
.aj-pl-facet li[class*="aj-tone-"] { border-left: 4px solid var(--aj-tone); padding-left: 0.4rem; }
.aj-pl-n { font-family: var(--aj-mono); font-size: var(--aj-s-1); color: var(--aj-ink-soft); font-feature-settings: "tnum", "lnum"; font-weight: 400; }
.aj-pl-none { color: var(--aj-ink-soft); opacity: 0.6; }
@media (max-width: 640px) { .aj-pl-facet { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; } }

/* Groups (years or types) and entries */
.aj-pl-group { margin: 0 0 2rem; }
.aj-pl-year { font-size: 1.25rem; font-weight: 500; line-height: 1.3; margin: 0 0 0.25rem; padding-top: 0.5rem; border-top: 2px solid var(--aj-ink); font-feature-settings: "tnum", "lnum"; }
.aj-pl-year .aj-pl-n { margin-left: 0.35rem; }
.aj-pl-list { list-style: none; margin: 0; padding: 0; }
.aj-pl-item { padding: 0.65rem 0; border-top: 1px solid var(--aj-line); }
.aj-pl-item:first-child { border-top: 0; }
.aj-pl-title { display: block; font-weight: 500; line-height: 1.35; color: var(--aj-ink); text-decoration: none; } /* a long list reads calmer without underlines */
.aj-pl-title:hover, .aj-pl-title:focus-visible { text-decoration-line: underline; }
.aj-pl-by { display: block; margin-top: 0.15rem; font-size: 0.95rem; line-height: 1.4; }
.aj-pl-item .aj-meta { display: block; margin-top: 0.1rem; line-height: 1.45; }

/* The filters in the margin, stacked and sticky; on phones and tablets a bar under the heading instead */
.aj-pl-side { position: sticky; top: 1.5rem; margin: 0; max-height: calc(100vh - 3rem); overflow-y: auto; } /* scrolls on its own when the filters outgrow a short screen (2026-10-05) */
.aj-pl-side .aj-pl-facet { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; margin-bottom: 0.6rem; }
.aj-pl-side .aj-pl-facet ul { display: block; }
.aj-pl-side .aj-pl-facet li { padding: 0.1rem 0; }
.aj-pl-side .aj-pl-facet li[class*="aj-tone-"] { margin: 0.15rem 0; padding-left: 0.5rem; }
.aj-pl-side .aj-pl-facet li.aj-pl-sub { padding-left: 0.9rem; } /* the finer types of "Other" (2026-10-07); inline on phones */
.admin-bar .aj-pl-side { top: calc(32px + 1.5rem); max-height: calc(100vh - 32px - 3rem); } /* clear of the admin bar when logged in */
.aj-band-pubs .aj-margin { padding-top: 6.75rem; align-self: stretch; } /* level with the first group; full height, so the filters can stick */
@media (min-width: 901px) { .aj-pl-top-narrow { display: none; } }
/* The narrow filter bar folded (2026-10-07; aj_filter_fold() in functions.php): the summary carries the bar's rules */
.aj-pl-fold { margin: 0 0 2.25rem; }
.aj-pl-fold summary { font-family: var(--aj-mono); font-size: 0.95rem; letter-spacing: 0.02em; cursor: pointer; padding: 0.6rem 0; border-top: 2px solid var(--aj-ink); border-bottom: 1px solid var(--aj-line); }
.aj-pl-fold .aj-pl-filters { border-top: 0; margin-top: 0; margin-bottom: 0; }
@media (max-width: 900px) { .aj-band-pubs .aj-margin { display: none; } }

/* =====================================================================
   Topic pages (2026-10-05; taxonomy-research_topic.php). The current focus opens on the indigo field, the four areas
   with their numeral column, as on the homepage; texts from the topic's fields. Layout "with media" (Andreas, 2026-10-05):
   recent publications; in the margin media coverage, projects (active, concluded), and courses ("Taught as").
   ===================================================================== */
.aj-band-topic { padding: 3rem 0 2.5rem; }
.aj-band-topic .aj-rows { margin: 0; }
.aj-band-topic .aj-row { border-top: 0; margin: 0; padding-top: 0.5rem; padding-bottom: 0.75rem; }
.aj-band-topic .aj-kicker { margin-bottom: 0.25rem; }
.aj-topic-title { font-size: var(--aj-s3); line-height: 1.12; margin: 0; }
.aj-band-topic .aj-row-sub { margin: 0.6rem 0 1.1rem; }
.aj-band-topic .aj-row-desc { font-size: var(--aj-s1); line-height: 1.5; color: var(--aj-ink); max-width: 40em; }
.aj-band-topic .aj-main > p:not([class]) { margin: 0.9rem 0 0; max-width: 40em; }
.aj-band-topic .aj-why { margin-top: 1rem; max-width: 40em; }
.aj-topic-margin { padding-top: 2.6rem; }
.aj-topic-margin .aj-spark-label { margin: 0 0 0.25rem; }
.aj-topic-margin .aj-spark-more { margin: 0.6rem 0 0; }
body.aj-c .aj-band-topic .aj-row.aj-row-plain { padding-left: 0; }
body.aj-c .aj-band-topic .aj-row.aj-row-plain::before { content: none; }
.aj-band-ai.aj-band-topic { padding: 3.25rem 0 3.5rem; }
.aj-band-ai.aj-band-topic .aj-topic-sub { margin: 0.4rem 0 1.25rem; }
.aj-band-ai.aj-band-topic .aj-lede { margin: 0; }
.aj-band-topic-sel { padding: 2.75rem 0 1rem; }
.aj-band-topic-sel .aj-works-lg { margin-top: 0.5rem; }
.aj-band-topic-sel .aj-works a { color: var(--aj-ink); text-decoration-color: var(--aj-tone, var(--aj-line)); }
.aj-band-topic-pubs { padding: 2rem 0 2.5rem; }
.aj-band-topic-pubs .aj-h2x .aj-pl-n { font-size: var(--aj-s-1); margin-left: 0.3rem; }
.aj-topic-media { padding-top: 3.4rem; }
.aj-topic-media .aj-spark-more { margin: 0.6rem 0 0; }
.aj-topic-nav { padding: 1.75rem 0 3rem; border-top: 1px solid var(--aj-line); }
.aj-topic-nav ul { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; margin: 0.4rem 0 0; }
.aj-topic-nav .aj-pub-topics li { margin: 0; }
.aj-topic-nav a[aria-current] { font-weight: 500; text-decoration-thickness: 2px; }
.aj-topic-nav ul + .aj-kicker-inline { display: block; margin-top: 1.1rem; } /* "Topics" under "Research" (2026-10-08) */
/* Homepage: the topics across the areas, one line under the four rows (2026-10-08) */
.aj-home-topics { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--aj-line); }
.aj-home-topics ul { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; margin: 0.4rem 0 0; }
.aj-home-topics .aj-pub-topics li { margin: 0; }
@media (max-width: 900px) { .aj-topic-margin, .aj-topic-media { padding-top: 0; } }

/* Topic margin: projects and courses under the media coverage */
.aj-topic-sublabel { margin: 0.5rem 0 0.2rem !important; font-family: var(--aj-mono); font-size: var(--aj-s-1); color: var(--aj-ink-soft); }
.aj-topic-projects li, .aj-topic-courses li { font-size: 0.9rem; line-height: 1.4; color: var(--aj-ink); }
.aj-proj-name strong { font-weight: 600; }
.aj-topic-courses .aj-course-name { display: block; }
.aj-topic-courses .aj-meta a { color: var(--aj-ink); }
.aj-topic-courses .aj-meta a { font-size: inherit; }

/* Projects page (page-projects.php): the band and the intro; the layout chosen on 2026-10-06 is in the last section */
.aj-band-projects { padding: 3rem 0 3.5rem; }
.aj-projects-intro { margin: 0 0 2rem; max-width: 40em; }
.aj-proj-topics { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; margin: 0.45rem 0 0 !important; }
.aj-proj-topics li { margin: 0 !important; }
.aj-proj-topics a { font-size: var(--aj-s-1) !important; }
.aj-nowrap { white-space: nowrap; }
/* Homepage AI band: "All projects" under the current projects (2026-10-05) */
.aj-proj-years .aj-proj-more { margin: 0.75rem 0 0; }

/* Media page (2026-10-05; page-media.php): like the publication list, with the "For journalists" text on top and
   "Selected" above the archive (Andreas chose preview b). */
.aj-media-press { margin: 0 0 1.75rem; max-width: 40em; }
.aj-media-press .aj-kicker-inline { display: block; margin-bottom: 0.2rem; }
.aj-media-press p { margin: 0 0 0.5rem; }
.aj-media-press a { color: var(--aj-ink); }
.aj-pl-nolink { color: var(--aj-ink); }
.aj-pl-item .aj-pl-by a { color: var(--aj-ink); }
.aj-band-media-page .aj-margin { padding-top: 0; }
/* "For journalists" as a box in the margin, above the filters (Andreas, 2026-10-05) */
.aj-media-press-box { margin: 0 0 1.25rem; padding: 0.9rem 1rem 0.6rem; background: var(--aj-paper-2); font-size: 0.95rem; line-height: 1.5; color: var(--aj-ink); }
.aj-media-press-box ul { margin: 0.2rem 0 0.4rem 1.1rem; padding: 0; }
.aj-media-press-box li { margin: 0 0 0.15rem; }
@media (min-width: 901px) { .aj-band-media-page .aj-margin { padding-top: 6.75rem; } .aj-band-media-page .aj-pl-side { margin-top: 0; } }

/* News page (2026-10-05; page-news.php): "Latest" across publications, media, talks, and posts; then all posts by year,
   filtered by category in the margin, like the other lists. */
/* The blog (/blog/, page-blog.php, 2026-10-05): all posts by year; in the margin the categories and an index of the years */
.aj-blog-intro { margin: 0 0 1.75rem; max-width: 40em; }
.aj-blog-years ul { columns: 3; column-gap: 0.75rem; }
.aj-pl-top-narrow .aj-blog-years ul { columns: auto; }

/* Posts (2026-10-05; single-post.php): the text in the main column, its images and embeds no wider than it */
.aj-band-post { padding: 3rem 0 3.5rem; }
.aj-post-body { margin-top: 1.5rem; }
.aj-post-body p, .aj-post-body li { line-height: 1.6; }
.aj-post-body img, .aj-post-body iframe, .aj-post-body figure, .aj-post-body .wp-block-embed { max-width: 100%; height: auto; }
.aj-post-body iframe { aspect-ratio: 16 / 9; width: 100%; height: auto; }
.aj-post-body a { color: var(--aj-ink); }
.aj-post-margin { padding-top: 2.1rem; }
.aj-post-margin p { margin: 0 0 0.4rem; }
.aj-post-margin .aj-more { color: var(--aj-ink); }
@media (max-width: 900px) { .aj-post-margin { padding-top: 0; margin-top: 1.5rem; } }
.aj-post-video { margin: 1.5rem 0; }
.aj-post-video iframe { display: block; border: 0; }
.aj-post-video figcaption { margin-top: 0.35rem; }

/* Talks page (draft 2026-10-05; archive-talk.php): like the other lists; "Upcoming" first */
.aj-band-talks .aj-pl-item .aj-meta a { color: var(--aj-ink); }
.aj-band-talks .aj-pl-item { scroll-margin-top: 1rem; } /* a link to one talk (/talks/#slug) lands just above it */
.admin-bar .aj-band-talks .aj-pl-item { scroll-margin-top: calc(32px + 1rem); }

/* Topic pages open on a field in the area's hue (Andreas, 2026-10-05): the AI band's light-type rules apply (class
   aj-band-ai), the background is set per area in the template; the numeral column keeps the mark hue. */
body.aj-c .aj-band.aj-topic-field { padding: 3.25rem 0 3rem; }
body.aj-c .aj-band.aj-topic-field .aj-row { border-top: 0; }
body.aj-c .aj-band.aj-topic-field .aj-row::before { color: #fff; }
body.aj-c .aj-band.aj-topic-field .aj-spark rect { fill: var(--aj-on-dark); }

/* The "Research" dropdown in the menu (2026-10-05, Andreas): each area and topic with its hue bar (menu-item classes
   aj-menu-area or aj-menu-topic, plus aj-tone-…, set in Appearance → Menus). Since 2026-10-08 (Andreas, option A) in two
   groups with labels, "Research areas" (the four) and "Topics" (AI first, then the three), side by side on desktop, with
   Projects and Books in a row below; stacked on phones. */
.main-navigation .main-nav ul ul { background: var(--aj-paper); border: 1px solid var(--aj-line); box-shadow: 0 4px 14px rgba(18, 20, 23, 0.08); }
.main-navigation .main-nav ul ul li:is(.aj-menu-area, .aj-menu-topic) > a { border-left: 4px solid var(--aj-tone); padding-left: 0.9rem; color: var(--aj-ink); font-size: 0.9rem; }
.main-navigation .main-nav ul ul li:is(.aj-menu-area, .aj-menu-topic) > a:hover { color: var(--aj-ink); text-decoration: underline; text-decoration-color: var(--aj-accent); }
.main-navigation .main-nav ul ul .aj-menu-label-text { display: block; padding: 0.75rem 20px 0.2rem calc(0.9rem + 4px); font-family: var(--aj-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--aj-ink-soft); }
@media (min-width: 769px) {
	.main-navigation .main-nav li.aj-menu-research > ul.sub-menu { display: grid; grid-template-columns: repeat(2, max-content); grid-auto-flow: row dense; width: max-content; }
	.main-navigation .main-nav li.aj-menu-research > ul.sub-menu > li { grid-column: 1; min-width: 13.5rem; }
	.main-navigation .main-nav li.aj-menu-research > ul.sub-menu > li:is(.aj-menu-label-topics, .aj-menu-topic) { grid-column: 2; }
	.main-navigation .main-nav li.aj-menu-research > ul.sub-menu > li.aj-menu-projects + li.aj-menu-projects { grid-column: 2; border-top: 1px solid var(--aj-line); margin-top: 0.25rem; } /* Books beside Projects: its own rule again (stacked, it has none) */
}
.site-header { position: relative; z-index: 50; } /* dropdowns open above the page content */

/* Homepage: "The politics of AI" and the four area titles link to their topic pages (Andreas, 2026-10-05);
   they look as before and underline in amber on hover */
.aj-head-link { color: inherit; text-decoration: none; }
body.aj-c .aj-head-link:hover, body.aj-c .aj-head-link:focus-visible { color: inherit; text-decoration: underline; text-decoration-color: var(--aj-accent); text-decoration-thickness: 2px; text-underline-offset: 0.15em; }

/* Press photos in the "For journalists" box: thumbnails in a row, the credit under each (Andreas, 2026-10-05) */
.aj-media-press ul.aj-press-photos { list-style: none; margin: 0.5rem 0 0.4rem; padding: 0; }
.aj-press-photo { color: var(--aj-ink); text-decoration: none; }
.aj-press-photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; background: var(--aj-paper); }
.aj-press-photo span { display: block; font-family: var(--aj-mono); font-size: 0.75rem; line-height: 1.3; color: var(--aj-ink-soft); }
.aj-press-photo:hover span { color: var(--aj-ink); text-decoration: underline; text-decoration-color: var(--aj-accent); }
.aj-press-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.aj-press-row li { margin: 0; }
.aj-press-row .aj-press-photo span { margin-top: 0.3rem; }

/* Header menu (2026-10-05): "you are here" in ink with a fine underline; Projects set off by a rule in the Research list;
   on phones 16 px text on white, tighter rows */
body.aj-c .main-navigation .main-nav > ul > li.aj-current > a { color: var(--aj-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.45em; text-decoration-color: var(--aj-ink); }
.main-navigation .main-nav ul ul li.aj-menu-projects { border-top: 1px solid var(--aj-line); margin-top: 0.25rem; }
.main-navigation .main-nav ul ul li.aj-menu-projects > a { color: var(--aj-ink); font-size: 0.9rem; padding-left: calc(0.9rem + 4px); }
.main-navigation .main-nav li.aj-menu-research > a { cursor: default; }
@media (max-width: 768px) {
	.main-navigation.toggled .main-nav ul, .main-navigation.toggled .main-nav ul ul { background: var(--aj-paper); }
	.main-navigation.toggled .main-nav ul li a { font-size: 1rem; line-height: 1.4; padding-top: 0.7rem; padding-bottom: 0.7rem; color: var(--aj-ink); }
	.main-navigation.toggled .main-nav ul ul li a { font-size: 0.95rem; padding-top: 0.55rem; padding-bottom: 0.55rem; }
	.main-navigation.toggled .main-nav > ul > li { border-bottom: 1px solid var(--aj-line); }
	.main-navigation.toggled .main-nav ul li .dropdown-menu-toggle { padding-top: 0; padding-bottom: 0; line-height: inherit; }
}

/* "Selected" on /talks/ (Andreas chose preview b, 2026-10-05): the host first, two columns; one column on phones */
.aj-sel-grid { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; }
.aj-sel-grid li { display: grid; gap: 0.2rem; align-content: start; padding: 0.8rem 0; border-top: 1px solid var(--aj-line); }
.aj-sel-grid .aj-kicker-inline { margin: 0; color: var(--aj-ink); }
.aj-sel-grid .aj-pl-title { font-weight: 500; line-height: 1.35; }
.aj-sel-grid .aj-meta a { color: var(--aj-ink); }
@media (max-width: 600px) { .aj-sel-grid { grid-template-columns: minmax(0, 1fr); } }

/* Teaching page drawn from the courses (page-teaching.php, 2026-10-05): heading like the other section pages, the intro
   in the main column, "For students" in the margin with this semester's courses; area headings link to the topic pages */
.aj-teach-intro { margin-top: 1.5rem; }
.aj-teach-intro p { max-width: 40rem; margin: 0 0 0.9rem; }
.aj-ctopic-title a { color: inherit; text-decoration: none; }
.aj-ctopic-title a:hover { text-decoration: underline; text-decoration-color: var(--aj-accent); text-decoration-thickness: 2px; }
.aj-sem-now-head { margin: 0 0 0.2rem; }
.aj-sem-now, .aj-media-press-box .aj-sem-now { list-style: none; margin: 0 0 0.8rem; padding: 0; }
.aj-sem-now li { padding: 0.3rem 0; border-top: 1px solid rgba(18, 20, 23, 0.12); }
.aj-sem-now .aj-meta { display: block; }

/* Projects page (page-projects.php; Andreas chose it from the preview ?proj=timeline, 2026-10-06): a timeline across the
   full width under the title (one bar per project in its main area's hue, today in amber), a years column for both groups,
   descriptions for the active projects, concluded projects compact, and in the margin, level with the lists, "Funded by"
   and the area filter. Labels sit at the bar's start, or end at its end in the timeline's right half. */
.aj-tl { max-width: calc(var(--aj-main) + var(--aj-gap) + var(--aj-margin)); margin: 0.5rem 0 2.5rem; } /* across the full width: main column, gap, and margin (Andreas, 2026-10-06) */
.aj-tl-plot { position: relative; padding: 1.4rem 0 1.5rem; }
.aj-tl-tick { position: absolute; top: 1.4rem; bottom: 0; width: 0; border-left: 1px solid var(--aj-line); }
.aj-tl-tick span { position: absolute; bottom: 0; left: 0.3rem; font-family: var(--aj-mono); font-size: var(--aj-s-1); line-height: 1; color: var(--aj-ink-soft); font-feature-settings: "tnum", "lnum"; }
.aj-tl-now { position: absolute; z-index: 2; top: 0; bottom: 1.5rem; width: 0; margin-left: -1px; border-left: 2px solid var(--aj-accent); }
.aj-tl-now span { position: absolute; top: 0; left: 0.3rem; font-family: var(--aj-mono); font-size: var(--aj-s-1); line-height: 1; color: var(--aj-accent-text); }
.aj-tl-rows { list-style: none; margin: 0; padding: 0; }
.aj-tl-row { margin: 0; padding: 0.25rem 0 0.3rem; }
.aj-tl-label { display: block; padding-left: calc(var(--s) * 100%); font-family: var(--aj-mono); font-size: var(--aj-s-1); line-height: 1.25; color: var(--aj-ink); text-decoration: none; }
.aj-tl-right .aj-tl-label { padding-left: 0; padding-right: calc((1 - var(--e)) * 100%); text-align: right; }
.aj-tl-label > span:first-child { position: relative; z-index: 3; background: var(--aj-paper); box-shadow: 0 0 0 2px var(--aj-paper); }
.aj-tl-label:hover > span:first-child, .aj-tl-label:focus-visible > span:first-child { text-decoration: underline; text-decoration-color: var(--aj-accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.aj-tl-bar { position: relative; z-index: 1; display: block; height: 0.4rem; margin: 0.2rem 0 0 calc(var(--s) * 100%); width: calc((var(--e) - var(--s)) * 100%); background: var(--aj-tone, var(--aj-ink-soft)); }
.aj-tl-dim .aj-tl-label { color: #A3A9B1; } /* outside the filtered area: grey, not transparent, so the lines stay behind the label */
.aj-tl-dim .aj-tl-bar { background: var(--aj-line); }
.aj-pj-list { list-style: none; margin: 0; padding: 0; }
.aj-pj { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); column-gap: 0.75rem; align-items: baseline; margin: 0; padding: 0.8rem 0; border-top: 1px solid var(--aj-line); line-height: 1.4; scroll-margin-top: 1rem; }
.aj-pj:first-child { border-top: 0; }
.admin-bar .aj-pj { scroll-margin-top: calc(32px + 1rem); }
.aj-pj:target { background: var(--aj-accent-pale); box-shadow: -0.75rem 0 0 var(--aj-accent-pale), 0.75rem 0 0 var(--aj-accent-pale); } /* the entry a timeline label leads to */
.aj-pj-yrs { white-space: nowrap; font-feature-settings: "tnum", "lnum"; }
.aj-pj-body { min-width: 0; }
.aj-pj-body .aj-proj-name { display: block; font-size: 1.0625rem; }
.aj-pj-body > .aj-meta { display: block; margin-top: 0.2rem; }
.aj-pj .aj-meta a { color: var(--aj-ink); }
.aj-pj-short { padding: 0.5rem 0; }
.aj-pj-short .aj-pj-body > .aj-meta { display: inline; margin: 0; }
.aj-pj-margin { padding-top: 0; } /* below the timeline, level with the lists (Andreas, 2026-10-06) */
.aj-pj-funders { border-bottom: 0; margin-bottom: 1.5rem; padding-top: 0.75rem; border-top: 2px solid var(--aj-ink); }
.aj-pj-desc { margin: 0.35rem 0 0.15rem; font-size: 0.95rem; line-height: 1.5; color: var(--aj-ink); }
.aj-pj-funders ul { list-style: none; margin: 0.25rem 0 0; padding: 0; }
.aj-pj-funders li { margin: 0; padding: 0.15rem 0; font-size: 0.95rem; line-height: 1.4; color: var(--aj-ink); }
.aj-pj-margin .aj-pl-side { position: static; max-height: none; }
@media (max-width: 900px) { .aj-pj-margin { padding-top: 0; } .aj-pj-margin .aj-pl-side { display: none; } }

/* Advice and evidence (2026-10-06): three featured engagements as a list (Andreas chose "list" from previews the same day:
   one rule over the list, hairlines between, the description at body size in ink); the rest in one line; the margin as one sentence */
.aj-band-inst .aj-inst-featured { grid-template-columns: minmax(0, 1fr); margin-top: 1.25rem; }
body.aj-c .aj-band.aj-band-inst .aj-inst-featured { border-top: 2px solid var(--aj-dark); }
body.aj-c .aj-band.aj-band-inst .aj-inst-featured li { padding: 0.8rem 0 0.9rem; border-top: 1px solid rgba(18, 20, 23, 0.18); }
body.aj-c .aj-band.aj-band-inst .aj-inst-featured li:first-child { border-top: 0; }
.aj-band-inst .aj-inst-featured strong { margin-bottom: 0.2rem; }
body.aj-c .aj-band.aj-band-inst .aj-inst-featured span.aj-meta { font-family: var(--aj-sans); font-size: 1rem; line-height: 1.5; color: var(--aj-ink); }
.aj-inst-also { margin: 0.1rem 0 0; padding-top: 0.9rem; border-top: 1px solid; font-size: 0.95rem; }
.aj-band-inst .aj-more-row { margin: 1.25rem 0 0; }
.aj-work-with .aj-kicker-inline + p { margin-top: 0; }

/* About page (2026-10-06, page-about.php): the bio beside the portrait and the contact box; the CV below as hairline lists */
.aj-band-about { padding: 3rem 0 3.5rem; }
.aj-about-bio p { max-width: 40rem; margin: 0 0 0.9rem; }
.aj-about-side { padding-top: 0.5rem; }
.aj-about-photo { margin: 0 0 1.5rem; max-width: 22rem; }
.aj-about-photo img { display: block; width: 100%; height: auto; }
.aj-about-photo figcaption { margin-top: 0.35rem; }
.aj-about-contact { scroll-margin-top: 1.5rem; }
.aj-about-contact p { margin: 0 0 0.6rem; }
@media (max-width: 900px) { .aj-about-side { padding-top: 1rem; } .aj-about-photo { max-width: 16rem; } }
.aj-band-cv { padding: 3rem 0 3.5rem; }
.aj-cv h2 { font-size: var(--aj-s2); font-weight: 500; letter-spacing: var(--aj-display-tracking); line-height: 1.2; margin: 0 0 0.5rem; }
.aj-cv h3 { font-family: var(--aj-mono); font-size: var(--aj-s-1); font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--aj-ink-soft); margin: 1.75rem 0 0.35rem; }
.aj-cv ul { list-style: none; margin: 0; padding: 0; max-width: 40rem; }
.aj-cv li { padding: 0.5rem 0; border-top: 1px solid var(--aj-line); line-height: 1.45; }
.aj-cv li:first-child { border-top: 0; }
/* Pages without a template of their own (page.php) and the 404 page (2026-10-07): the main column keeps the lines at
   40 rem; headings as in the CV, H2 for sections, H3 as labels */
.aj-band-page { padding: 3rem 0 3.5rem; }
.aj-page-body p, .aj-page-body li { line-height: 1.6; }
.aj-page-body h2 { font-size: var(--aj-s2); font-weight: 500; letter-spacing: var(--aj-display-tracking); line-height: 1.2; margin: 2.5rem 0 0.75rem; }
.aj-page-body h3 { font-family: var(--aj-mono); font-size: var(--aj-s-1); font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--aj-ink-soft); margin: 1.75rem 0 0.35rem; }
.aj-page-body > :first-child { margin-top: 0; }
/* Book covers (2026-10-07): in the margin of a book's page, above the topics */
.aj-pub-cover { margin: 0 0 1.5rem; }
.aj-pub-cover img { display: block; width: 100%; max-width: 12rem; height: auto; }
.aj-pl-with-cover { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: 1rem; align-items: start; } /* under "Books" on /publications/ */
.aj-pl-cover img { display: block; width: 100%; height: auto; }
/* "Books" under Research shares the Projects item's group below the rule (2026-10-07): one rule for both */
.main-navigation .main-nav ul ul li.aj-menu-projects + li.aj-menu-projects { border-top: 0; margin-top: 0; }
/* About page, short bio (2026-10-06): in the margin beside the CV, level with its heading; above the CV on phones */
.aj-band-cv .aj-about-side { padding-top: 0.25rem; }
.aj-about-short { scroll-margin-top: 1.5rem; }
.aj-about-short p { margin: 0 0 0.6rem; }
@media (max-width: 900px) { .aj-band-cv .aj-about-side { order: -1; padding-top: 0; margin-bottom: 1.5rem; } }

/* Language switch (German pages, 2026-10-08): the last item of the header menu, set off from the sections by a hairline
   ("Deutsch" on English pages, "English" on German ones); on phones a row of its own at the end of the open menu */
.main-navigation .main-nav > ul > li.aj-lang-switch { margin-left: 0.75rem; border-left: 1px solid var(--aj-line); }
.main-navigation .main-nav > ul > li.aj-lang-switch > a { padding-left: 1.25rem; }
@media (max-width: 768px) {
	.main-navigation.toggled .main-nav > ul > li.aj-lang-switch { margin-left: 0; border-left: 0; }
	.main-navigation.toggled .main-nav > ul > li.aj-lang-switch > a { padding-left: 20px; }
}
/* German pages: no automatic hyphenation in headings (long German words broke as „verän-dern“ in the hero, 2026-10-08) */
body.aj-de :is(h1, h2, h3) { hyphens: manual; -webkit-hyphens: manual; }