/*
Theme Name: EducationSpot
Theme URI: https://educationspot.net
Author: SitePlot Media
Description: Custom theme for EducationSpot.net. Two-zone architecture: entity-driven paying-for-college guides and concept-driven K-12 parent guidance, under one /guides/ namespace with legacy root posts preserved.
Version: 1.7.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: educationspot
*/

/* ==========================================================================
   DESIGN SYSTEM

   CreditAndFund made FICO score bands its signature device. FinTechPlot made
   a three-segment coverage mark, and reserved every scrap of colour for
   verification state.

   Neither is right here, for a specific reason: FinTechPlot could reserve
   colour for state because 100% of that site is data. Half of this site —
   the whole K-12 zone — has no figures in it at all, and would render
   colourless and unfinished under that rule. So this site gets a real brand
   colour, and the signature device earns its own restrained pair.

   THE DEVICE is the cohort mark: a rule divided in two, one side filled.
   It exists because on 1 July 2026 the federal student aid system forked,
   and the answer to most money questions on this site now depends on when
   you borrowed. One grammar, two readings — which side of the split a
   figure sits on, and, at rest in the masthead, the split itself.

   The pair is deliberately NOT green/red or good/bad. Neither cohort is
   better than the other; they are different rulebooks. So the device reads
   now/then: the current rules in the brand teal, the earlier rules in a
   muted archival brown. Filled versus hollow carries applicability. Hue
   carries nothing but time.
   ========================================================================== */

/* ==========================================================================
   FONTS

   Self-hosted. Three variable families, woff2 only, all swap so text is
   readable before the font lands — this site's readers are frequently on
   phones in poor coverage and a blocking font request is a blank article.

   The stack degrades honestly: if the files are absent the fallbacks are
   Georgia and the system sans, both of which the layout was checked against.
   ========================================================================== */

@font-face {
	font-family: "Newsreader";
	src: url("assets/fonts/display-var.woff2") format("woff2-variations");
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Source Sans 3";
	src: url("assets/fonts/body-var.woff2") format("woff2-variations");
	font-weight: 200 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Source Code Pro";
	src: url("assets/fonts/figure-var.woff2") format("woff2-variations");
	font-weight: 200 900;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Surface */
	--paper:        #FBFAF8;
	--paper-sunk:   #F4F1EC;
	--paper-raised: #FFFFFF;

	/* Ink — warm near-black, not the blue-black of the fintech build */
	--ink:          #1A1D21;
	--ink-muted:    #5E5B56;
	--ink-faint:    #8A857D;

	/* Brand */
	--accent:       #175A63;
	--accent-deep:  #0E3F46;
	--accent-wash:  #E8F0F0;

	/* The cohort pair. now = current rules, then = superseded rules. */
	--cohort-now:   #175A63;
	--cohort-then:  #8A7E6D;
	--cohort-track: #DFD9CF;

	/* Structure */
	--rule:         #E3DFD8;
	--rule-strong:  #C9C2B6;

	/* One gutter, one .wrap. Carried over from CAF, where a second spacing
	   scale was the root cause of body text touching the screen edge on
	   mobile more than once. */
	--gutter: 20px;
	--measure: 68ch;
	--wrap: 1180px;

	--font-display: "Newsreader", Georgia, "Times New Roman", serif;
	--font-body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--font-figure: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, monospace;

	--radius: 3px;
	--shadow: 0 1px 2px rgba(26, 29, 33, .06), 0 4px 12px rgba(26, 29, 33, .04);
}

@media (min-width: 640px)  { :root { --gutter: 32px; } }
@media (min-width: 1024px) { :root { --gutter: 40px; } }

/* ==========================================================================
   RESET
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ==========================================================================
   LAYOUT

   Every horizontal boundary in the site comes from .wrap. If text ever
   touches the edge of a phone screen, the bug is here and nowhere else.
   ========================================================================== */

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.wrap--narrow { max-width: 820px; }

.measure { max-width: var(--measure); }

.stack > * + * { margin-block-start: 1.1em; }
.stack--loose > * + * { margin-block-start: 1.8em; }

/* ==========================================================================
   TYPE
   ========================================================================== */

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: -.011em;
	margin: 0 0 .5em;
	text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem); }
h2 { font-size: clamp(1.45rem, 1.2rem + 1.1vw, 1.95rem); margin-top: 2em; }
h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.35rem); margin-top: 1.6em; }
h4 { font-size: 1.05rem; margin-top: 1.4em; }

p { margin: 0 0 1.1em; }

a { color: var(--accent); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-deep); }

.lede {
	font-size: clamp(1.1rem, 1.03rem + .35vw, 1.28rem);
	line-height: 1.55;
	color: var(--ink-muted);
}

.eyebrow {
	font-family: var(--font-figure);
	font-size: .72rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin: 0 0 .6em;
}

/* Every figure and every date on this site is monospaced with tabular
   numerals, so a column of amounts lines up and a stale date is noticeable
   rather than buried in prose. */
.es-figure, time, .tabular {
	font-family: var(--font-figure);
	font-variant-numeric: tabular-nums lining-nums;
	font-size: .95em;
}

/* ==========================================================================
   THE COHORT MARK

   Two segments. The one that applies is filled; the other is a hollow
   track. In the masthead it sits at rest with neither side asserted, which
   is the site's thesis in one glyph: the answer depends on when.
   ========================================================================== */

.cohort-mark {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	vertical-align: baseline;
}

.cohort-mark__seg {
	display: block;
	width: 15px;
	height: 4px;
	border-radius: 1px;
	background: var(--cohort-track);
}

.cohort-mark__seg--now  { background: var(--cohort-now); }
.cohort-mark__seg--then { background: var(--cohort-then); }

.cohort-mark--sm .cohort-mark__seg { width: 11px; height: 3px; }
.cohort-mark--lg .cohort-mark__seg { width: 22px; height: 5px; }

/* At rest: the brand mark. Neither side claimed. */
.cohort-mark--rest .cohort-mark__seg:first-child { background: var(--cohort-then); opacity: .5; }
.cohort-mark--rest .cohort-mark__seg:last-child  { background: var(--cohort-now); }

.cohort-label {
	font-family: var(--font-figure);
	font-size: .72rem;
	letter-spacing: .04em;
	color: var(--ink-muted);
}

/* ==========================================================================
   THE SPLIT TABLE

   Where a figure forks, both answers appear together. A reader must be able
   to find their own row without reading the prose around it — this block is
   the one thing on the site that has to work when quoted out of context by
   an answer engine.
   ========================================================================== */

.es-split {
	margin: 2em 0;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background: var(--paper-raised);
	overflow: hidden;
}

.es-split__table { width: 100%; border-collapse: collapse; }

.es-split__caption {
	caption-side: top;
	text-align: left;
	padding: .85em 1.1em;
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 600;
	background: var(--paper-sunk);
	border-bottom: 1px solid var(--rule);
}

.es-split__table th,
.es-split__table td { padding: .85em 1.1em; text-align: left; vertical-align: top; }

.es-split__table thead th {
	font-family: var(--font-figure);
	font-size: .7rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-faint);
	font-weight: 400;
	border-bottom: 1px solid var(--rule);
}

.es-split__table tbody th {
	font-weight: 400;
	font-size: .95rem;
	color: var(--ink-muted);
	width: 55%;
	border-inline-start: 3px solid var(--cohort-then);
}

.es-split__table tbody tr:last-child th { border-inline-start-color: var(--cohort-now); }

.es-split__table tbody td { font-weight: 600; }

.es-split__table tbody tr + tr th,
.es-split__table tbody tr + tr td { border-top: 1px solid var(--rule); }

.es-split__note {
	display: block;
	margin-top: .35em;
	font-size: .82rem;
	color: var(--ink-faint);
	line-height: 1.45;
}

.es-split__provenance {
	margin: 0;
	padding: .7em 1.1em;
	font-size: .8rem;
	color: var(--ink-faint);
	background: var(--paper-sunk);
	border-top: 1px solid var(--rule);
}

/* Single fact */
.es-fact {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .5em .9em;
	margin: 1.5em 0;
	padding: .9em 1.1em;
	background: var(--paper-raised);
	border: 1px solid var(--rule);
	border-inline-start: 3px solid var(--accent);
	border-radius: var(--radius);
}

.es-fact__label { font-size: .88rem; color: var(--ink-muted); }
.es-fact__value { font-size: 1.15rem; font-weight: 600; color: var(--ink); }
.es-fact__cohort {
	font-family: var(--font-figure);
	font-size: .72rem;
	padding: .1em .5em;
	border-radius: 2px;
	background: var(--accent-wash);
	color: var(--accent-deep);
}
.es-fact__checked { font-size: .75rem; color: var(--ink-faint); margin-inline-start: auto; }

/* Sources */
.es-sources { margin: 3em 0 0; padding-top: 1.5em; border-top: 1px solid var(--rule); }
.es-sources h2 { font-size: 1.1rem; margin-top: 0; }
.es-sources ul { margin: 0; padding: 0; list-style: none; }
.es-sources li { padding: .5em 0; font-size: .9rem; border-bottom: 1px solid var(--rule); }
.es-sources__tier {
	font-family: var(--font-figure);
	font-size: .68rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	padding: .1em .45em;
	border-radius: 2px;
	background: var(--paper-sunk);
	color: var(--ink-faint);
}
.es-sources__tier--federal { background: var(--accent-wash); color: var(--accent-deep); }

/* ==========================================================================
   MASTHEAD AND NAVIGATION

   Exactly one <nav>. Built from <details>/<summary> so it works with no
   JavaScript at all: a mega menu at 1024px and up, an accordion drawer
   below. JS is enhancement only — it closes open panels on outside click
   and nothing more. The mobile toggle failing to load has broken enough
   previous builds that it is no longer allowed to be JS-dependent.
   ========================================================================== */

.masthead {
	background: var(--paper-raised);
	border-bottom: 1px solid var(--rule);
	position: sticky;
	top: 0;
	z-index: 50;
}

.masthead__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 66px;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	font-family: var(--font-display);
	font-size: 1.22rem;
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
	letter-spacing: -.015em;
}
.brand:hover { color: var(--ink); }

.nav { display: flex; }
.nav__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }

.nav__panel > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .4rem;
	padding: .85rem 0;
	cursor: pointer;
	font-weight: 600;
	list-style: none;
	border-bottom: 1px solid var(--rule);
}
.nav__panel > summary::-webkit-details-marker { display: none; }
.nav__panel > summary::after {
	content: "";
	width: 8px; height: 8px;
	border-right: 1.5px solid var(--ink-faint);
	border-bottom: 1.5px solid var(--ink-faint);
	transform: rotate(45deg);
	transition: transform .15s ease;
}
.nav__panel[open] > summary::after { transform: rotate(-135deg); }

.nav__zone {
	font-family: var(--font-figure);
	font-size: .68rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-faint);
	padding: 1.2rem 0 .4rem;
}

.nav__sub { margin: 0; padding: .3rem 0 .9rem; list-style: none; }
.nav__sub a { display: block; padding: .42rem 0; color: var(--ink-muted); text-decoration: none; font-size: .95rem; }
.nav__sub a:hover { color: var(--accent); }

/* Drawer below 1024 */
@media (max-width: 1023px) {
	.nav {
		display: none;
		position: absolute;
		inset-inline: 0;
		top: 100%;
		background: var(--paper-raised);
		border-bottom: 1px solid var(--rule);
		max-height: calc(100vh - 66px);
		overflow-y: auto;
		padding: 0 var(--gutter) 1.5rem;
		box-shadow: var(--shadow);
	}
	.nav-toggle:checked ~ .nav { display: block; }
	.nav__list { width: 100%; }
}

/* Mega menu at 1024 and up */
@media (min-width: 1024px) {
	.nav-toggle, .nav-toggle-label { display: none; }

	/* Both zones sit on ONE row. Previously each zone rendered its own row
	   with an uppercase heading above it, which stacked two navigation bars
	   in the header and — with full hub names like "Learning & Academic
	   Support" — wrapped items onto three lines. inc/copy.php supplies short
	   labels; this puts them in a single line and lets it wrap cleanly rather
	   than jumble if a label is ever added. */
	.nav { flex-wrap: wrap; align-items: center; gap: 0 .1rem; }
	.nav__zone { display: none; }
	.nav__list { flex-direction: row; gap: .1rem; flex-wrap: wrap; }

	/* A label never breaks mid-item. Better to wrap the whole row. */
	.nav__panel > summary { white-space: nowrap; }
	.nav__panel { position: static; }
	.nav__panel > summary { padding: .5rem .62rem; border-bottom: 0; border-radius: var(--radius); font-size: .92rem; }
	.nav__panel > summary:hover { background: var(--paper-sunk); }
	.nav__panel[open] > summary { background: var(--accent-wash); color: var(--accent-deep); }
	.nav__mega {
		position: absolute;
		inset-inline: 0;
		top: 100%;
		background: var(--paper-raised);
		border-block: 1px solid var(--rule);
		box-shadow: var(--shadow);
		padding: 1.8rem 0 2rem;
	}
	.nav__mega-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
		gap: 1.4rem 2rem;
	}
	.nav__sub { padding: 0; }
}

.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-toggle-label {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .55rem .8rem;
	cursor: pointer;
	border: 1px solid var(--rule-strong);
	border-radius: var(--radius);
	font-size: .9rem;
	font-weight: 600;
}
.nav-toggle:focus-visible ~ .masthead__bar .nav-toggle-label { outline: 2px solid var(--accent); }

/* ==========================================================================
   HUB AND PILLAR PAGES

   A section index that only lists its children is thin no matter how many
   children it has. Every one of these blocks exists to give the page
   something to say to a reader who never clicks through.
   ========================================================================== */

.section-head { padding: 2.6rem 0 1.8rem; border-bottom: 1px solid var(--rule); }

.entity-def {
	margin: 2rem 0;
	padding: 1.2rem 1.4rem;
	background: var(--paper-sunk);
	border-inline-start: 3px solid var(--accent);
	border-radius: var(--radius);
	font-size: 1.02rem;
}

.short-answer {
	margin: 2rem 0;
	padding: 1.2rem 1.4rem;
	background: var(--accent-wash);
	border-radius: var(--radius);
	font-size: 1.08rem;
	line-height: 1.55;
}

.concepts { display: grid; gap: 1.2rem; margin: 2rem 0; }
@media (min-width: 720px) { .concepts { grid-template-columns: 1fr 1fr; } }
.concept { padding: 1.1rem 1.2rem; background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--radius); }
.concept h3 { margin: 0 0 .4em; font-size: 1.02rem; }
.concept p { margin: 0; font-size: .94rem; color: var(--ink-muted); }

.card-grid { display: grid; gap: 1rem; margin: 1.6rem 0; }
@media (min-width: 640px)  { .card-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }

.card {
	display: block;
	padding: 1.1rem 1.2rem;
	background: var(--paper-raised);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	text-decoration: none;
	color: var(--ink);
	transition: border-color .12s ease;
}
.card:hover { border-color: var(--accent); color: var(--ink); }
.card__title { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; margin: 0 0 .35em; }
.card__meta { font-family: var(--font-figure); font-size: .72rem; color: var(--ink-faint); }

/* ==========================================================================
   ARTICLE
   ========================================================================== */

.article { padding: 2.4rem 0 3rem; }

.article__body { max-width: var(--measure); }
.article__body > * { margin-inline: 0; }

.article__body ul, .article__body ol { padding-inline-start: 1.3em; }
.article__body li { margin-bottom: .45em; }

.article__body table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.8em 0;
	font-size: .95rem;
	display: block;
	overflow-x: auto;
}
.article__body th, .article__body td { padding: .6em .8em; border: 1px solid var(--rule); text-align: left; }
.article__body thead th { background: var(--paper-sunk); font-weight: 600; }

.article__body blockquote {
	margin: 1.8em 0;
	padding-inline-start: 1.1em;
	border-inline-start: 3px solid var(--rule-strong);
	color: var(--ink-muted);
}

.byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .9rem;
	padding: 1rem 0;
	border-block: 1px solid var(--rule);
	font-size: .9rem;
	color: var(--ink-muted);
}
.byline a { font-weight: 600; }

.takeaways {
	margin: 2.2em 0;
	padding: 1.2rem 1.4rem;
	background: var(--paper-sunk);
	border-radius: var(--radius);
}
.takeaways h2 { margin: 0 0 .6em; font-size: 1.05rem; }
.takeaways ul { margin: 0; padding-inline-start: 1.1em; }

.faq { margin: 2.6em 0 0; }
.faq__item { border-bottom: 1px solid var(--rule); padding: .9em 0; }
.faq__item h3 { margin: 0 0 .4em; font-size: 1rem; }
.faq__item p { margin: 0; color: var(--ink-muted); }

.toc {
	margin: 1.8em 0;
	padding: 1rem 1.2rem;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	font-size: .93rem;
}
.toc h2 { margin: 0 0 .5em; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; font-family: var(--font-figure); color: var(--ink-faint); }
.toc ol { margin: 0; padding-inline-start: 1.2em; }
.toc a { color: var(--ink-muted); text-decoration: none; }
.toc a:hover { color: var(--accent); }

/* Legacy posts carry a quiet marker: they predate the current structure and
   sit at the site root rather than under /guides/. */
.legacy-note {
	margin: 1.5em 0;
	padding: .7em 1rem;
	font-size: .85rem;
	color: var(--ink-faint);
	background: var(--paper-sunk);
	border-radius: var(--radius);
}

/* Share */
.share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin: 1.6em 0;
	padding: .6em 0;
	border-block: 1px solid var(--rule);
}
.share__label {
	font-family: var(--font-figure);
	font-size: .7rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-inline-end: .3rem;
}
.share__link {
	padding: .3em .7em;
	border: 1px solid var(--rule-strong);
	border-radius: var(--radius);
	font-size: .82rem;
	text-decoration: none;
	color: var(--ink-muted);
}
.share__link:hover { border-color: var(--accent); color: var(--accent); }

/* ==========================================================================
   FORMS, CONSENT, CAPTURE
   ========================================================================== */

.es-form { margin: 2em 0; }
.es-form__row { display: flex; flex-direction: column; gap: .35em; margin-bottom: 1.1em; }
.es-form label { font-size: .9rem; font-weight: 600; }
.es-form input, .es-form select, .es-form textarea {
	padding: .6em .75em;
	border: 1px solid var(--rule-strong);
	border-radius: var(--radius);
	background: var(--paper-raised);
	font-size: 1rem;
	width: 100%;
}
.es-form textarea { resize: vertical; min-height: 9em; }

/* Consent. Accept and decline are the same size and the same weight: a
   decline button styled as an afterthought is not a choice. */
.es-consent {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 90;
	background: var(--ink);
	color: #E6E3DE;
	padding: 1rem 0;
	box-shadow: 0 -2px 16px rgba(26,29,33,.18);
}
.es-consent__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.es-consent__text { flex: 1 1 320px; margin: 0; font-size: .88rem; line-height: 1.5; }
.es-consent__text a { color: #FFF; }
.es-consent__actions { display: flex; gap: .6rem; }
.es-consent__actions .button { background: var(--paper); color: var(--ink); }
.es-consent__actions .button:hover { background: #FFF; color: var(--ink); }

/* Questionnaire */
.es-quiz {
	position: fixed;
	inset: 0;
	z-index: 95;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	pointer-events: none;
	padding: var(--gutter);
}
.es-quiz[hidden] { display: none; }
.es-quiz__card {
	pointer-events: auto;
	position: relative;
	width: 100%;
	max-width: 520px;
	background: var(--paper-raised);
	border: 1px solid var(--rule-strong);
	border-radius: 6px;
	box-shadow: 0 8px 40px rgba(26,29,33,.2);
	padding: 1.4rem 1.5rem 1.2rem;
}
@media (min-width: 720px) { .es-quiz { align-items: center; } }
.es-quiz__card h2 { margin-top: 0; font-size: 1.2rem; }
.es-quiz__card p { font-size: .92rem; color: var(--ink-muted); }
.es-quiz__close {
	position: absolute; top: .5rem; inset-inline-end: .7rem;
	background: none; border: 0; font-size: 1.5rem; line-height: 1;
	color: var(--ink-faint); cursor: pointer;
}
.es-quiz__options { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.es-quiz__options .button { width: 100%; text-align: left; font-weight: 400; font-size: .92rem; }
.es-quiz__form { display: flex; flex-wrap: wrap; gap: .5rem; }
.es-quiz__form input[type="email"] {
	flex: 1 1 200px; padding: .6em .75em;
	border: 1px solid var(--rule-strong); border-radius: var(--radius);
}
.es-quiz__skip {
	background: none; border: 0; padding: 0;
	color: var(--ink-faint); font-size: .85rem;
	text-decoration: underline; cursor: pointer;
}

.es-capture {
	margin: 2.5em 0;
	padding: 1.3rem 1.5rem;
	background: var(--paper-sunk);
	border-radius: var(--radius);
}
.es-capture h2 { margin-top: 0; font-size: 1.1rem; }
.es-capture form { display: flex; flex-wrap: wrap; gap: .5rem; }
.es-capture input[type="email"] {
	flex: 1 1 220px; padding: .6em .75em;
	border: 1px solid var(--rule-strong); border-radius: var(--radius);
	background: var(--paper-raised);
}

/* ==========================================================================
   TOOLS, GLOSSARY, BODY IMAGERY
   ========================================================================== */

.es-tool {
	margin: 2em 0;
	padding: 1.4rem 1.5rem;
	background: var(--paper-raised);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
}
.es-tool__grid { display: grid; gap: 1rem; }
@media (min-width: 620px) { .es-tool__grid { grid-template-columns: 1fr 1fr; } }
.es-tool label { display: flex; flex-direction: column; gap: .3em; font-size: .9rem; font-weight: 600; }
.es-tool input[type="number"] {
	padding: .55em .7em;
	border: 1px solid var(--rule-strong);
	border-radius: var(--radius);
	font-family: var(--font-figure);
	font-variant-numeric: tabular-nums;
}
.es-tool__options { display: grid; gap: .5rem; margin-top: .8rem; }
@media (min-width: 620px) { .es-tool__options { grid-template-columns: 1fr 1fr; } }
.es-tool__options .button { width: 100%; text-align: left; font-weight: 400; }
.es-tool__result {
	margin-top: 1.2rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--rule);
}
.es-tool__result p { margin: 0 0 .6em; }
.es-tool__result strong { font-family: var(--font-figure); font-variant-numeric: tabular-nums; }
.es-tool__out h3 { margin-top: 0; }

.es-glossary { margin: 0 0 2em; }
.es-glossary dt { font-weight: 600; font-family: var(--font-display); font-size: 1.05rem; margin-top: 1.2em; }
.es-glossary dd { margin: .3em 0 0; color: var(--ink-muted); }
.es-glossary__cohort {
	margin: .5em 0 0;
	padding-inline-start: .8em;
	border-inline-start: 3px solid var(--cohort-then);
	font-size: .88rem;
}
.es-glossary__jump { margin: 1.5em 0; font-family: var(--font-figure); font-size: .85rem; }
.es-glossary__jump a { display: inline-block; padding: .15em .45em; text-decoration: none; }

.es-body-image {
	margin: 1.8em 0;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	width: 100%;
	height: auto;
}

/* Admin calendar */
.es-cal__grid { table-layout: fixed; }
.es-cal__day { vertical-align: top; height: 90px; padding: 4px; }
.es-cal__num { font-family: var(--font-figure); font-size: .7rem; color: var(--ink-faint); }
.es-cal__day ul { margin: 2px 0 0; padding: 0; list-style: none; font-size: .68rem; }
.es-cal__item { padding: 1px 3px; margin-bottom: 1px; border-radius: 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.es-cal__item--scheduled { background: var(--accent-wash); }
.es-cal__item--generated { background: var(--paper-sunk); }
.es-cal__item--held { background: #F3EDE4; color: var(--cohort-then); }
.es-cal__more { color: var(--ink-faint); }

/* ==========================================================================
   BREADCRUMBS, PAGINATION, FOOTER
   ========================================================================== */

.crumbs { padding: 1rem 0 0; font-size: .85rem; color: var(--ink-faint); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .4em; margin: 0; padding: 0; list-style: none; }
.crumbs li + li::before { content: "/"; margin-inline-end: .4em; color: var(--rule-strong); }
.crumbs a { color: var(--ink-muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }

.site-footer {
	margin-top: 4rem;
	padding: 2.5rem 0 3rem;
	background: var(--ink);
	color: #C9C6C0;
	font-size: .92rem;
}
.site-footer a { color: #FFF; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer h2 { color: #FFF; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; font-family: var(--font-figure); font-weight: 400; margin: 0 0 .8em; }
.footer__grid { display: grid; gap: 2rem; }
@media (min-width: 720px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer__grid ul { margin: 0; padding: 0; list-style: none; }
.footer__grid li { padding: .25em 0; }
.footer__legal { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.14); font-size: .82rem; color: #8F8C86; }

/* ==========================================================================
   UTILITY
   ========================================================================== */

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute;
	inset-inline-start: -9999px;
	top: 0;
	z-index: 100;
	padding: .7em 1.2em;
	background: var(--accent);
	color: #FFF;
}
.skip-link:focus { inset-inline-start: 0; }

:where(a, button, summary, input, [tabindex]):focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 2px;
}

.button {
	display: inline-block;
	padding: .7em 1.3em;
	background: var(--accent);
	color: #FFF;
	border: 0;
	border-radius: var(--radius);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}
.button:hover { background: var(--accent-deep); color: #FFF; }
.button--ghost { background: transparent; color: var(--accent); border: 1px solid var(--rule-strong); }

@media print {
	.masthead, .site-footer, .toc, .share { display: none; }
	body { background: #FFF; }
}


/* The 1024-1180 shrink rule that used to live here is gone: it existed to
   squeeze eight nav items into a narrow desktop, and the nav is now two. */

/* ==========================================================================
   HOME + NAV, second pass.

   The first version failed three ways that only showed up on a real screen:
   the wordmark wrapped to two lines, eight nav items wrapped to two rows, and
   the page was one continuous white sheet with ~150px of dead space standing
   in for a section break. The nav is fixed structurally (two zones, not eight
   hubs — see inc/nav.php); the rest is here.

   Restraint note: the accent does real work in exactly ONE place, the fork.
   Everywhere else it is reserved for links and focus. A teal wash on the hub
   cards as well would have made the page louder without making it clearer.
   ========================================================================== */

/* --- wordmark: never breaks --------------------------------------------- */
.brand { white-space: nowrap; flex: 0 0 auto; }
.brand span { white-space: nowrap; }

/* --- nav: two items, so it fits at any width ---------------------------- */
@media (min-width: 1024px) {
	.nav { flex-wrap: nowrap; }
	.nav__list { flex-wrap: nowrap; gap: .15rem; }
	.nav__panel > summary { white-space: nowrap; padding: .55rem .9rem; font-size: .95rem; }

	.nav__aside { display: flex; align-items: center; margin-inline-start: .4rem; }
	.nav__aside a {
		display: inline-block; padding: .55rem .9rem;
		font-size: .95rem; font-weight: 600; color: var(--ink-muted); text-decoration: none;
	}
	.nav__aside a:hover { color: var(--accent); }

	/* Five hubs across inside one zone panel. */
	.nav__mega-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.5rem 1.75rem; }
	.nav__col { min-width: 0; }
	.nav__hub {
		display: block; font-weight: 700; font-size: .95rem;
		color: var(--ink); text-decoration: none; padding-block-end: .5rem;
		border-bottom: 1px solid var(--rule); margin-block-end: .55rem;
	}
	.nav__hub:hover { color: var(--accent); }
}
@media (max-width: 1023px) {
	.nav__hub { display: block; font-weight: 700; padding: .7rem 0 .35rem; color: var(--ink); text-decoration: none; }
	.nav__aside a { display: block; padding: .8rem 0; font-weight: 600; color: var(--ink); text-decoration: none; }
}

/* --- bands: each section gets its own ground ---------------------------- */
.band { padding-block: 3.25rem; }
.band--hero { padding-block: 4rem 2.5rem; }
.band--plain { background: var(--paper); }
.band--sunk  { background: var(--paper-sunk, #F2EFE9); border-block: 1px solid var(--rule); }

.hero__title { max-width: 18ch; margin-block-end: 1.1rem; }
.hero__lede { font-size: 1.16rem; line-height: 1.6; color: var(--ink-muted); max-width: 54ch; margin: 0; }

.band__title { margin-block-end: 1.6rem; }

.eyebrow {
	font-family: var(--font-figure);
	font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
	color: var(--accent-deep, var(--accent)); margin: 0 0 .5rem;
}

/* --- THE FORK: the one place the accent is allowed to be loud ----------- */
.band--fork {
	background: var(--accent-wash, #E3EDEE);
	border-block: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.fork__q { margin: 0 0 .5rem; }
.fork__sub { color: var(--ink-muted); max-width: 62ch; margin: 0 0 2rem; }

.fork { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
.fork__side { padding: 1.5rem 1.75rem; background: var(--paper); }
.fork__side--then { border-radius: var(--radius) 0 0 var(--radius); }
.fork__side--now  { border-radius: 0 var(--radius) var(--radius) 0; box-shadow: inset 3px 0 0 var(--accent); }

/* The cohort mark at scale: a rule divided in two, one side filled. Filled is
   the side that applies. Hue carries time only — never good or bad. */
.fork__mark { display: flex; gap: 4px; margin-block-end: 1rem; }
.fork__mark i { display: block; width: 34px; height: 6px; border-radius: 3px; background: var(--cohort-then, #8A7E6D); }
.fork__mark i:last-child { background: color-mix(in srgb, var(--cohort-then, #8A7E6D) 25%, transparent); }
.fork__mark--now i { background: color-mix(in srgb, var(--accent) 25%, transparent); }
.fork__mark--now i:last-child { background: var(--accent); }

.fork__when { font-weight: 700; margin: 0 0 .8rem; font-size: 1.02rem; }
.fork__list { margin: 0; padding: 0; list-style: none; }
.fork__list li {
	position: relative; padding-inline-start: 1.1rem; padding-block: .3rem;
	color: var(--ink-muted); font-size: .95rem;
}
.fork__list li::before {
	content: ""; position: absolute; inset-inline-start: 0; top: .78em;
	width: 5px; height: 5px; border-radius: 50%; background: var(--ink-faint);
}
.fork__cta { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.2rem; margin-block-start: 1.75rem; }
.fork__note { color: var(--ink-muted); font-size: .9rem; }

@media (max-width: 720px) {
	.fork { grid-template-columns: 1fr; }
	.fork__side--then { border-radius: var(--radius) var(--radius) 0 0; }
	.fork__side--now  { border-radius: 0 0 var(--radius) var(--radius); box-shadow: inset 0 3px 0 var(--accent); }
}

/* --- hub cards: weight without noise ------------------------------------ */
.hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 1rem; }

.hub {
	position: relative; display: flex; flex-direction: column;
	padding: 1.4rem 1.4rem 1.25rem;
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	text-decoration: none;
	transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
/* The rule fills on hover — the same divided-rule idea as the cohort mark,
   used here as an affordance rather than as data. */
.hub__rule {
	display: block; width: 30px; height: 4px; border-radius: 2px;
	background: var(--rule-strong); margin-block-end: .95rem;
	transition: width .18s ease, background-color .18s ease;
}
.hub:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--rule)); transform: translateY(-2px); box-shadow: var(--shadow); }
.hub:hover .hub__rule { width: 52px; background: var(--accent); }

.hub__title { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; margin: 0 0 .5rem; color: var(--ink); }
.hub__blurb { margin: 0 0 1.1rem; color: var(--ink-muted); font-size: .93rem; line-height: 1.55; }
.hub__go {
	margin-block-start: auto;
	font-family: var(--font-figure); font-size: .72rem;
	letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
}
.hub__go::after { content: " →"; }

@media (prefers-reduced-motion: reduce) {
	.hub, .hub__rule { transition: none; }
	.hub:hover { transform: none; }
}

/* ==========================================================================
   HERO SPLIT, FIGURES PANEL AND ICONS.

   The hero previously put its copy in a narrow column on a full-width band,
   which left the right-hand half empty. It now carries the one thing this
   site has that its competitors do not: current federal figures with the date
   each was checked. Those come from the data layer, not the template, so an
   unsettled figure cannot appear here.
   ========================================================================== */

.hero { display: grid; gap: 2rem; align-items: start; }
.hero--split { grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 3rem; }
.hero__copy { min-width: 0; }
.hero__title { max-width: 16ch; margin-block-end: 1.1rem; }
.hero--split .hero__title { max-width: none; }
.hero__lede { font-size: 1.14rem; line-height: 1.6; color: var(--ink-muted); max-width: 48ch; margin: 0; }

/* The figures panel. Quiet by design — it is evidence, not a headline. */
.figures {
	border: 1px solid var(--rule);
	border-radius: var(--radius);
	background: var(--paper-raised, var(--paper));
	padding: 1.25rem 1.35rem 1.1rem;
}
.figures__head {
	font-family: var(--font-figure);
	font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
	color: var(--ink-faint); margin: 0 0 .9rem;
}
.figures__list { margin: 0; }
.figures__row {
	display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
	padding-block: .62rem; border-top: 1px solid var(--rule);
}
.figures__row:first-child { border-top: 0; padding-block-start: 0; }
.figures__row dt { color: var(--ink-muted); font-size: .9rem; }
.figures__row dd { margin: 0; text-align: right; }
.figures__value { display: block; font-weight: 600; font-size: 1.06rem; color: var(--ink); }
.figures__on {
	display: block; font-family: var(--font-figure);
	font-size: .68rem; color: var(--ink-faint); margin-block-start: .1rem;
}

@media (max-width: 900px) {
	.hero--split { grid-template-columns: 1fr; gap: 2rem; }
	.hero__lede { max-width: 54ch; }
}

/* --- icons -------------------------------------------------------------- */
.es-icon { display: block; }

.hub__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 10px;
	background: var(--paper-sunk, #F2EFE9);
	color: var(--ink-muted);
	margin-block-end: 1rem;
	transition: background-color .16s ease, color .16s ease;
}
.hub:hover .hub__icon { background: var(--accent-wash, #E3EDEE); color: var(--accent); }

.section-head__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 54px; height: 54px; border-radius: 12px;
	background: var(--accent-wash, #E3EDEE);
	color: var(--accent);
	margin-block-end: 1rem;
}

@media (prefers-reduced-motion: reduce) { .hub__icon { transition: none; } }

/* A split figure in the panel says which cohort it belongs to. Same rule as
   [es_fact] inside an article: one side of a split, unlabelled, is wrong. */
.figures__cohort {
	display: block; font-family: var(--font-figure);
	font-size: .68rem; color: var(--cohort-then, #8A7E6D); margin-block-start: .12rem;
}

/* --- the head term carries the one piece of colour above the fold -------- */
.hero__title .accent { color: var(--accent); }

/* --- editor-only explanation when the figures panel has nothing to show --- */
.figures--empty { border-style: dashed; background: transparent; }
.figures__why { margin: 0 0 .9rem; font-size: .9rem; line-height: 1.55; color: var(--ink-muted); }

/* --- pillar cards: a glyph, a depth rule and a real number --------------- */
.card--pillar { display: flex; flex-direction: column; }
.card__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; border-radius: 9px;
	background: var(--paper-sunk, #F2EFE9);
	color: var(--ink-faint);
	margin-block-end: .85rem;
	transition: background-color .16s ease, color .16s ease;
}
.card--pillar:hover .card__icon { background: var(--accent-wash, #E3EDEE); color: var(--accent); }

/* The divided rule again, this time filled in proportion to how many articles
   the pillar holds against the deepest in the section. Encodes something true
   rather than decorating: it shows which sections are substantial. */
.card__depth {
	display: block; height: 4px; border-radius: 2px;
	background: var(--rule); margin-block: auto .55rem; overflow: hidden;
}
.card__depth-fill {
	display: block; height: 100%; border-radius: 2px;
	background: var(--rule-strong);
	transition: background-color .16s ease;
}
.card--pillar:hover .card__depth-fill { background: var(--accent); }

.card--pillar .card__meta {
	margin: 0; font-family: var(--font-figure);
	font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
	color: var(--ink-faint);
}
.card--pillar .card__meta .es-figure { color: var(--ink-muted); font-size: .85rem; }

@media (prefers-reduced-motion: reduce) {
	.card__icon, .card__depth-fill { transition: none; }
}

/* --- generated in-body figures ------------------------------------------ */
.es-figure-img {
	display: block; width: 100%; height: auto;
	margin-block: 2.25rem;
	border: 1px solid var(--rule);
	border-radius: var(--radius);
}

/* ==========================================================================
   HEADER, SECOND PASS.

   The bar was 66px with a 1.22rem wordmark, which read as a thin strip above
   a very large H1 — the wordmark looked incidental rather than like the name
   of the site. Raised deliberately WITHOUT touching the H1: more height, a
   larger mark and wordmark, and search occupying the space the two-panel nav
   freed up.
   ========================================================================== */

.masthead__bar { min-height: 88px; gap: 1.25rem; }

.brand { font-size: 1.55rem; gap: .7rem; letter-spacing: -.02em; }
.brand svg, .brand .es-brand-mark { width: 40px; height: 40px; }

@media (max-width: 1023px) {
	.masthead__bar { min-height: 74px; }
	.brand { font-size: 1.3rem; }
	.brand svg, .brand .es-brand-mark { width: 32px; height: 32px; }
}

/* --- header search ------------------------------------------------------- */
.hsearch {
	display: none; align-items: center; gap: .5rem;
	flex: 0 1 260px; margin-inline-start: auto;
	padding: .48rem .75rem;
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: 999px;
	transition: border-color .15s ease;
}
.hsearch:focus-within { border-color: var(--accent); }
.hsearch__icon { width: 17px; height: 17px; color: var(--ink-faint); flex: 0 0 auto; }
.hsearch__field {
	border: 0; background: none; outline: none;
	font: inherit; font-size: .92rem; color: var(--ink);
	width: 100%; min-width: 0;
}
.hsearch__field::placeholder { color: var(--ink-faint); }

/* Only where there is genuinely room. Below this the nav drawer carries it. */
@media (min-width: 1180px) { .hsearch { display: flex; } }

/* --- footer social ------------------------------------------------------- */
.social {
	display: flex; flex-wrap: wrap; gap: .5rem;
	list-style: none; margin: 1.1rem 0 0; padding: 0;
}
.social a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 10px;
	background: var(--paper-sunk, #F2EFE9);
	color: var(--ink-muted);
	transition: background-color .16s ease, color .16s ease;
}
.social a:hover { background: var(--accent-wash, #E3EDEE); color: var(--accent); }
.social__icon { display: block; }

@media (prefers-reduced-motion: reduce) { .social a { transition: none; } }

/* --- a band that needs a standfirst under its heading -------------------- */
.band__lede {
	margin: -.9rem 0 1.6rem; max-width: 58ch;
	color: var(--ink-muted); font-size: 1.02rem; line-height: 1.6;
}

/* ==========================================================================
   QUIZ — anchored LEFT, not centred.

   A centred card is a modal: it sits over the article and the only thing to
   do is deal with it. Anchored to the bottom-left it reads as an offer beside
   the page rather than a gate in front of it, and the reader can carry on.
   ========================================================================== */

.es-quiz { justify-content: flex-start; align-items: flex-end; }
@media (min-width: 720px) {
	.es-quiz { align-items: flex-end; }              /* was: centred */
	.es-quiz__card { max-width: 430px; margin-inline-start: 0; }
}

.es-quiz__progress {
	font-family: var(--font-figure);
	font-size: .68rem; letter-spacing: .09em; text-transform: uppercase;
	color: var(--accent); margin: 0 0 .5rem;
}
.es-quiz__select {
	width: 100%; padding: .6rem .7rem; font: inherit; font-size: .95rem;
	border: 1px solid var(--rule-strong); border-radius: var(--radius);
	background: var(--paper); color: var(--ink);
}
.es-quiz__skipwrap {
	margin: 1rem 0 0; padding-block-start: .8rem;
	border-top: 1px solid var(--rule);
}
.es-quiz__skip {
	background: none; border: 0; padding: 0; cursor: pointer;
	font: inherit; font-size: .86rem; color: var(--ink-faint);
	text-decoration: underline; text-underline-offset: 3px;
}
.es-quiz__skip:hover { color: var(--ink-muted); }

/* ==========================================================================
   THE BRAND MARK, ANIMATED.

   The mark is two segments — the cohort device at rest, neither side claimed.
   So the animation is the thing the mark already means: the pair RESOLVING,
   the earlier segment drawing first and the current one following.

   Targets .cohort-mark__seg, which is what es_get_cohort_mark() actually
   outputs. My first version animated `.brand svg rect` — markup that exists in
   the favicon and in a preview file and NOWHERE in the header, so it would
   have done precisely nothing while looking correct in the stylesheet.

   Runs ONCE on load, not on a loop. A permanently moving logo in a sticky
   header is a distraction on every scroll, and this site's whole argument is
   that it is calm and careful.
   ========================================================================== */

@keyframes es-mark-draw {
	from { transform: scaleX(0); opacity: 0; }
	to   { transform: scaleX(1); opacity: 1; }
}

.brand .cohort-mark__seg {
	transform-origin: left center;
	animation: es-mark-draw .5s cubic-bezier(.22,.61,.36,1) both;
}
.brand .cohort-mark__seg:first-child { animation-delay: .08s; }
.brand .cohort-mark__seg:last-child  { animation-delay: .26s; }

/* Hover: the muted earlier segment fills, which is the mark saying the one
   thing it exists to say. Only where there is a pointer to hover with. */
@media (hover: hover) {
	.brand .cohort-mark__seg { transition: opacity .22s ease, background-color .22s ease; }
	.brand:hover .cohort-mark--rest .cohort-mark__seg:first-child { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.brand .cohort-mark__seg { animation: none; transition: none; }
}

/* ==========================================================================
   CONCEPT BLOCKS.

   Was: a bordered box with a heading and a paragraph, which is plain text in
   a rectangle. The marker carries POSITION rather than identity — these are
   parallel foundations, so a unique glyph each would be decoration and the hub
   glyph repeated would only restate the page header. Their order is the one
   thing about them that is actually true, and the heading already says
   "first".
   ========================================================================== */

.concept {
	position: relative;
	padding: 1.35rem 1.3rem 1.25rem;
	transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

/* The number, in the figure face like every other number on the site. */
.concept__n {
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 8px;
	background: var(--accent-wash, #E3EDEE);
	color: var(--accent);
	font-family: var(--font-figure);
	font-size: .82rem; font-weight: 500;
	margin-block-end: .85rem;
}

/* The same divided-rule affordance the hub cards use: it fills on hover. */
.concept__rule {
	display: block; width: 26px; height: 3px; border-radius: 2px;
	background: var(--rule-strong);
	margin-block-end: .8rem;
	transition: width .18s ease, background-color .18s ease;
}

.concept:hover {
	border-color: color-mix(in srgb, var(--accent) 40%, var(--rule));
	box-shadow: var(--shadow);
}
.concept:hover .concept__rule { width: 46px; background: var(--accent); }

.concept h3 { margin: 0 0 .45em; font-size: 1.04rem; }

@media (prefers-reduced-motion: reduce) {
	.concept, .concept__rule { transition: none; }
}

/* --- section-page blocks that were missing entirely -------------------- */
.scope {
	padding-inline-start: 1rem;
	border-inline-start: 3px solid var(--rule-strong);
	color: var(--ink-muted); font-size: .98rem;
}

.mistakes { display: grid; gap: 1rem; margin: 1.4rem 0 2rem; }
@media (min-width: 860px) { .mistakes { grid-template-columns: 1fr 1fr; } }
.mistake {
	padding: 1.15rem 1.25rem;
	background: var(--paper-raised);
	border: 1px solid var(--rule);
	border-inline-start: 3px solid var(--cohort-then);
	border-radius: var(--radius);
}
.mistake h3 { margin: 0 0 .5em; font-size: 1rem; }
.mistake p { margin: 0 0 .5em; font-size: .93rem; color: var(--ink-muted); }
.mistake__fix { color: var(--ink) !important; }

.next-step {
	margin: 2.5rem 0 1rem; padding: 1.4rem 1.5rem;
	background: var(--paper-sunk, #F2EFE9);
	border-radius: var(--radius);
}
.next-step h2 { margin: .2rem 0 .5em; font-size: 1.25rem; }
.next-step p { color: var(--ink-muted); max-width: 60ch; }

/* --- who stands behind a section, and what is on it --------------------- */
.section-by {
	display: flex; align-items: center; gap: .8rem;
	margin: 1.2rem 0 1.6rem; padding-block: .9rem;
	border-block: 1px solid var(--rule);
}
.section-by__face { border-radius: 50%; flex: 0 0 auto; }
.section-by__who { margin: 0; font-size: .96rem; }
.section-by__who a { color: var(--ink); }
.section-by__verify {
	margin-inline-start: .5rem; font-size: .82rem;
	color: var(--accent) !important; white-space: nowrap;
}
.section-by__meta { margin: .15rem 0 0; font-size: .84rem; color: var(--ink-faint); }
.section-by__meta a { color: var(--ink-faint); }

.toc {
	margin: 1.6rem 0 2rem; padding: 1.1rem 1.3rem;
	background: var(--paper-sunk, #F2EFE9);
	border-radius: var(--radius);
	max-width: 46ch;
}
.toc__h {
	margin: 0 0 .5rem; font-family: var(--font-figure);
	font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
	color: var(--ink-faint);
}
.toc ol { margin: 0; padding-inline-start: 1.2rem; }
.toc li { margin-block: .28rem; font-size: .95rem; }
.toc a { color: var(--ink); text-decoration-color: var(--rule-strong); }
.toc a:hover { color: var(--accent); }