/*
Theme Name: Sartre's Conception of Freedom
Theme URI: https://sartresconceptionoffreedom.com/
Author: Doxprint LLC
Author URI: https://sartresconceptionoffreedom.com/
Description: A custom WordPress theme for Sartre's Conception of Freedom: Consciousness, the Practico-Inert, and Distributive Answerability, second edition, revised and expanded, by Sharam Kohan. Vanilla CSS, a single JavaScript module, no build step and no framework dependencies.
Version: 1.4.1
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: scfreedom
Tags: custom-theme, one-column, block-styles, translation-ready, accessibility-ready
*/

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,600;1,8..60,400&family=Inter:wght@400;500;600;700&display=swap');

/* ── Custom properties ───────────────────────────────────────────── */

:root {
	/* Ground */
	--paper:             #F7F4EF;
	--paper-warm:        #EFEAE1;
	--paper-card:        #FFFFFF;
	--rule:              #DCD6CB;
	--rule-strong:       #C4BCAE;

	/* Ink */
	--ink:               #111111;
	--ink-soft:          #1C1C1C;
	--graphite:          #26282B;
	--slate:             #5C6268;
	--slate-light:       #656A6F;  /* Corrected from #868C93: see the contrast note below */

	/* Accent */
	--vermillion:        #B2290D;
	--vermillion-deep:   #8E1F09;
	--vermillion-bright: #D14A2C;
	--vermillion-link:   #E2694A;
	--vermillion-tint:   #F3E5E1;

	/* Contrast note, measured against this palette:
	   --vermillion on --paper 5.95:1, on --paper-warm 5.45:1, on --paper-card 6.53:1.
	   --vermillion on --ink is 2.89:1 and must never carry text on an ink ground;
	   use --vermillion-link (5.71:1 on ink) for small text and links, and reserve
	   --vermillion-bright (4.25:1 on ink) for rules and large display type only.
	   --slate-light was specified as #868C93, which measures 3.09:1 on --paper and
	   therefore fails AA for the small metadata type that uses it. It is set here to
	   #656A6F: 4.98:1 on --paper, 4.56:1 on --paper-warm, 5.46:1 on --paper-card. */

	/* Type on ink grounds */
	--on-ink-heading:    #F7F4EF;
	--on-ink-body:       #CFC9C0;
	--on-ink-muted:      #9A948B;

	/* Type families */
	--font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--font-body:    'Source Serif 4', Georgia, 'Times New Roman', serif;
	--font-ui:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

	/* Measure and layout */
	--max-w:          1180px;
	--measure:        68ch;
	--section-pad:    6.5rem 2rem;
	--section-pad-sm: 3.5rem 1.5rem;
	--radius:         0;
	--radius-input:   2px;
	--transition:     260ms cubic-bezier(0.4, 0, 0.2, 1);
	--rule-weight:    1px;
	--rule-accent-w:  3px;

	/* Chrome */
	--nav-h:          92px;
	--logo-w:         296px;
	--shadow-card:    0 1px 2px rgba(17, 17, 17, 0.04), 0 8px 24px rgba(17, 17, 17, 0.06);
	--shadow-jacket:  0 18px 48px rgba(17, 17, 17, 0.18), 0 2px 8px rgba(17, 17, 17, 0.10);
}

/* ── Reset and base ──────────────────────────────────────────────── */

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

html {
	font-size: 18px;
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.75;
	color: var(--graphite);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--vermillion);
	text-decoration: none;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	transition: color var(--transition);
}

a:hover,
a:focus-visible {
	color: var(--vermillion-deep);
	text-decoration: underline;
}

:focus-visible {
	outline: 2px solid var(--vermillion);
	outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.6em;
	color: var(--ink);
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: -0.012em;
}

h1, h2, h3 {
	font-family: var(--font-display);
}

h4, h5, h6 {
	font-family: var(--font-ui);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0;
}

h1 { font-size: clamp(2.3rem, 5vw, 3.8rem); }
h2 { font-size: clamp(1.85rem, 3.4vw, 2.6rem); }
h3 { font-size: clamp(1.32rem, 2.2vw, 1.65rem); }
h4 { font-size: 1.06rem; }
h5 { font-size: 0.96rem; }
h6 { font-size: 0.88rem; }

p {
	margin: 0 0 1.35em;
}

ul, ol {
	margin: 0 0 1.35em;
	padding-left: 1.35em;
}

li {
	margin-bottom: 0.5em;
}

blockquote {
	margin: 0;
}

cite {
	font-style: italic;
}

hr {
	height: 0;
	margin: 3rem 0;
	border: 0;
	border-top: var(--rule-weight) solid var(--rule);
}

code, pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.88em;
}

::selection {
	color: var(--paper);
	background: var(--vermillion);
}

/* ── Utilities ───────────────────────────────────────────────────── */

.container {
	width: 100%;
	max-width: var(--max-w);
	margin: 0 auto;
}

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

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

.skip-link {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 2000;
	display: inline-block;
	padding: 0.75rem 1.25rem;
	font-family: var(--font-ui);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--paper);
	background: var(--ink);
	transition: top var(--transition);
}

.skip-link:focus {
	top: 1rem;
	color: var(--paper);
	text-decoration: none;
}

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* ── Sections ────────────────────────────────────────────────────── */

.section {
	padding: var(--section-pad);
	background: var(--paper);
}

.section--warm {
	background: var(--paper-warm);
}

.section--ink {
	color: var(--on-ink-body);
	background: var(--ink);
}

.section--ink h1,
.section--ink h2,
.section--ink h3,
.section--ink h4 {
	color: var(--on-ink-heading);
}

.section--ink a {
	color: var(--vermillion-link);
}

.section--ink a:hover,
.section--ink a:focus-visible {
	color: var(--on-ink-heading);
}

.section--ink .section-label {
	color: var(--vermillion-link);
}

.section--ink .rule-accent {
	background: var(--vermillion-bright);
}

.section--tight {
	padding-top: 3.5rem;
	padding-bottom: 3.5rem;
}

.section-label {
	display: block;
	margin-bottom: 0.9rem;
	font-family: var(--font-ui);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--vermillion);
}

.rule-accent {
	display: block;
	width: 64px;
	height: var(--rule-accent-w);
	margin: 1.4rem 0 2rem;
	background: var(--vermillion);
}

.rule-accent--center {
	margin-left: auto;
	margin-right: auto;
}

.section__intro {
	max-width: var(--measure);
	font-size: 1.06rem;
	color: var(--slate);
}

.section--ink .section__intro {
	color: var(--on-ink-body);
}

/* ── Prose ───────────────────────────────────────────────────────── */

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

.prose > :last-child {
	margin-bottom: 0;
}

.prose h2 {
	margin-top: 2.6rem;
}

.prose h3 {
	margin-top: 2.2rem;
	font-family: var(--font-display);
	font-size: 1.32rem;
}

.prose--reading {
	max-width: var(--measure);
	font-size: 1.06rem;
	line-height: 1.85;
}

.prose--reading p {
	margin-bottom: 1.5em;
}

.prose--reading h2 {
	margin-top: 3.4rem;
	font-size: clamp(1.5rem, 2.6vw, 1.9rem);
}

.prose--reading h3 {
	margin-top: 2.8rem;
	font-family: var(--font-ui);
	font-size: 0.86rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--vermillion);
}

.prose--reading .drop-first::first-letter {
	float: left;
	margin: 0.08em 0.09em 0 0;
	font-family: var(--font-display);
	font-size: 3.5em;
	font-weight: 600;
	line-height: 0.82;
	color: var(--ink);
}

/* ── Buttons ─────────────────────────────────────────────────────── */

.btn {
	display: inline-block;
	padding: 0.85rem 1.7rem;
	font-family: var(--font-ui);
	font-size: 0.86rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.045em;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	border: var(--rule-weight) solid transparent;
	border-radius: var(--radius);
	transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.btn:hover,
.btn:focus-visible {
	text-decoration: none;
}

.btn--vermillion {
	color: var(--paper);
	background: var(--vermillion);
	border-color: var(--vermillion);
}

.btn--vermillion:hover,
.btn--vermillion:focus-visible {
	color: var(--paper);
	background: var(--vermillion-deep);
	border-color: var(--vermillion-deep);
}

.btn--outline {
	color: var(--ink);
	background: transparent;
	border-color: var(--ink);
}

.btn--outline:hover,
.btn--outline:focus-visible {
	color: var(--paper);
	background: var(--ink);
	border-color: var(--ink);
}

.section--ink .btn--outline,
.hero .btn--outline {
	color: var(--on-ink-heading);
	border-color: var(--on-ink-muted);
}

.section--ink .btn--outline:hover,
.section--ink .btn--outline:focus-visible,
.hero .btn--outline:hover,
.hero .btn--outline:focus-visible {
	color: var(--ink);
	background: var(--on-ink-heading);
	border-color: var(--on-ink-heading);
}

.btn--ghost {
	padding-left: 0;
	padding-right: 0;
	color: var(--vermillion);
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
	color: var(--vermillion-deep);
	border-bottom-color: var(--vermillion);
}

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	align-items: center;
	margin-top: 2rem;
}

/* ── Navigation ──────────────────────────────────────────────────── */

.nav {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: var(--paper);
	border-bottom: var(--rule-weight) solid transparent;
	transition: border-color var(--transition), box-shadow var(--transition);
}

.nav.scrolled {
	border-bottom-color: var(--rule);
	box-shadow: 0 1px 12px rgba(17, 17, 17, 0.05);
}

.nav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.75rem;
	width: 100%;
	max-width: var(--max-w);
	min-height: var(--nav-h);
	margin: 0 auto;
	padding: 0.9rem 2rem;
}

.nav__brand {
	display: block;
	flex-shrink: 0;
	line-height: 0;
}

.nav__brand:focus-visible {
	outline-offset: 6px;
}

.nav__logo--full {
	width: var(--logo-w);
	height: auto;
}

.nav__logo--mark {
	display: none;
	width: 52px;
	height: 52px;
}

.nav__links {
	display: flex;
	flex-wrap: nowrap;
	gap: 1.35rem;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav__links li {
	margin: 0;
}

.nav__links a {
	display: inline-block;
	padding: 0.3rem 0;
	font-family: var(--font-ui);
	font-size: 0.77rem;
	white-space: nowrap;
	font-weight: 500;
	letter-spacing: 0.055em;
	text-transform: uppercase;
	color: var(--graphite);
	border-bottom: 2px solid transparent;
	transition: color var(--transition), border-color var(--transition);
}

.nav__links a:hover,
.nav__links a:focus-visible,
.nav__links .is-current > a,
.nav__links .current-menu-item > a,
.nav__links .current_page_item > a {
	color: var(--vermillion);
	text-decoration: none;
	border-bottom-color: var(--vermillion);
}

.nav__hamburger {
	display: none;
	flex-direction: column;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 10px 8px;
	cursor: pointer;
	background: transparent;
	border: 0;
}

.nav__hamburger span {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--ink);
	transition: transform var(--transition), opacity var(--transition);
}

.nav__hamburger[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.nav__hamburger[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.nav__hamburger[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.nav__mobile {
	display: none;
	padding: 1rem 2rem 2.5rem;
	background: var(--paper);
	border-top: var(--rule-weight) solid var(--rule);
}

.nav__mobile.open {
	display: block;
}

.nav__mobile ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav__mobile li {
	margin: 0;
	border-bottom: var(--rule-weight) solid var(--rule);
}

.nav__mobile a {
	display: block;
	padding: 0.95rem 0;
	font-family: var(--font-ui);
	font-size: 0.92rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--graphite);
}

.nav__mobile a:hover,
.nav__mobile a:focus-visible {
	color: var(--vermillion);
	text-decoration: none;
}

/* ── Hero ────────────────────────────────────────────────────────── */

.hero {
	padding: 7rem 2rem 6rem;
	color: var(--on-ink-body);
	background: var(--ink);
}

.hero__inner {
	display: grid;
	grid-template-columns: 1.25fr 0.75fr;
	gap: 4.5rem;
	align-items: center;
	width: 100%;
	max-width: var(--max-w);
	margin: 0 auto;
}

.hero__content {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 700ms ease, transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hero__content.is-loaded {
	opacity: 1;
	transform: none;
}

.hero__eyebrow {
	display: block;
	margin-bottom: 1.6rem;
	font-family: var(--font-ui);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--vermillion-link);
}

.hero__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(2.6rem, 5.4vw, 4.1rem);
	font-weight: 600;
	line-height: 1.06;
	color: var(--on-ink-heading);
}

.hero__subtitle {
	max-width: 30ch;
	margin: 1.5rem 0 0;
	font-family: var(--font-body);
	font-size: clamp(1.06rem, 1.7vw, 1.3rem);
	font-weight: 400;
	line-height: 1.45;
	color: var(--on-ink-body);
}

.hero__rule {
	display: block;
	width: 64px;
	height: var(--rule-accent-w);
	margin: 2rem 0;
	background: var(--vermillion-bright);
}

.hero__line {
	max-width: 46ch;
	margin: 0;
	font-family: var(--font-body);
	font-size: 1.06rem;
	font-style: italic;
	line-height: 1.7;
	color: var(--on-ink-body);
}

.hero__edition {
	margin-top: 2.2rem;
	font-family: var(--font-ui);
	font-size: 0.76rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--on-ink-muted);
}

.hero__jacket {
	justify-self: center;
}

.hero__jacket img {
	width: 100%;
	max-width: 330px;
	box-shadow: var(--shadow-jacket);
}

/* ── Page header ─────────────────────────────────────────────────── */

.page-header {
	padding: 4.5rem 2rem 3rem;
	background: var(--paper);
	border-bottom: var(--rule-weight) solid var(--rule);
}

.page-header__inner {
	width: 100%;
	max-width: var(--max-w);
	margin: 0 auto;
}

/* Where the body below runs at the reading width, the heading must share its
   left edge. Without this the heading sits at the 1180px margin while the
   prose starts 180px further in, and the page reads as half empty. */
.page-header--narrow .page-header__inner {
	max-width: 820px;
}

.page-header__title {
	max-width: 22ch;
	margin: 0;
}

.page-header__standfirst {
	max-width: var(--measure);
	margin: 1.6rem 0 0;
	font-size: 1.1rem;
	line-height: 1.7;
	color: var(--slate);
}

/* ── Cards and grids ─────────────────────────────────────────────── */

.grid {
	display: grid;
	gap: 2rem;
}

.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--sidebar { grid-template-columns: 1.5fr 1fr; gap: 4rem; }
.grid--jacket { grid-template-columns: 0.85fr 1.15fr; gap: 4rem; align-items: start; }

.card {
	padding: 2rem;
	background: var(--paper-card);
	border: var(--rule-weight) solid var(--rule);
	border-radius: var(--radius);
	transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.card:hover {
	border-color: var(--rule-strong);
	box-shadow: var(--shadow-card);
}

.card__title {
	margin: 0 0 0.7rem;
	font-family: var(--font-display);
	font-size: 1.24rem;
}

.card__title a {
	color: var(--ink);
}

.card__title a:hover,
.card__title a:focus-visible {
	color: var(--vermillion);
	text-decoration: none;
}

.card__meta {
	margin: 0 0 0.9rem;
	font-family: var(--font-ui);
	font-size: 0.76rem;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--slate-light);
}

.card__excerpt {
	margin: 0 0 1.2rem;
	font-size: 0.96rem;
	color: var(--slate);
}

.card__thumb {
	margin: -2rem -2rem 1.6rem;
	overflow: hidden;
}

.card__thumb img {
	width: 100%;
	height: auto;
	transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover .card__thumb img {
	transform: scale(1.03);
}

/* ── Pull quote ──────────────────────────────────────────────────── */

.pullquote {
	max-width: 46ch;
	margin: 3rem 0;
	padding-left: 2rem;
	border-left: var(--rule-accent-w) solid var(--vermillion);
}

.pullquote blockquote {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.32rem, 2.4vw, 1.7rem);
	font-weight: 400;
	font-style: italic;
	line-height: 1.42;
	color: var(--ink);
}

.pullquote figcaption {
	margin-top: 1.2rem;
	font-family: var(--font-ui);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	color: var(--slate);
}

.section--ink .pullquote {
	border-left-color: var(--vermillion-bright);
}

.section--ink .pullquote blockquote {
	color: var(--on-ink-heading);
}

.section--ink .pullquote figcaption {
	color: var(--on-ink-muted);
}

.pullquote--center {
	max-width: 34ch;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	text-align: center;
	border-left: 0;
}

.pullquote--center blockquote {
	font-size: clamp(1.5rem, 3.2vw, 2.15rem);
}

.pullquote--center::before {
	content: '';
	display: block;
	width: 64px;
	height: var(--rule-accent-w);
	margin: 0 auto 2.2rem;
	background: var(--vermillion-bright);
}

/* ── Citation block ──────────────────────────────────────────────── */

.citation {
	max-width: var(--measure);
	margin: 0;
	font-family: var(--font-ui);
	font-size: 0.86rem;
	line-height: 1.65;
	color: var(--slate);
}

.citation cite {
	font-style: italic;
}

.citation-box {
	padding: 1.6rem 1.8rem;
	background: var(--vermillion-tint);
	border-left: var(--rule-accent-w) solid var(--vermillion);
}

.copy-citation {
	margin-top: 1.1rem;
}

/* ── Tables ──────────────────────────────────────────────────────── */

.table-wrap {
	overflow-x: auto;
	margin: 2.5rem 0;
}

.data-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--font-ui);
	font-size: 0.95rem;
}

.data-table caption {
	margin-bottom: 1rem;
	font-size: 0.82rem;
	font-style: italic;
	text-align: left;
	color: var(--slate);
}

.data-table th {
	padding: 0.9rem 1.25rem;
	font-size: 0.78rem;
	font-weight: 600;
	text-align: left;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--vermillion);
	background: var(--paper-warm);
	border-bottom: 2px solid var(--vermillion);
}

.data-table td {
	padding: 0.95rem 1.25rem;
	color: var(--graphite);
	border-bottom: var(--rule-weight) solid var(--rule);
	vertical-align: top;
}

.data-table th[scope="row"] {
	background: transparent;
	border-bottom: var(--rule-weight) solid var(--rule);
	color: var(--ink);
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.95rem;
	font-weight: 600;
}

.data-table tbody tr:hover {
	background: var(--vermillion-tint);
}

.section--warm .data-table th {
	background: var(--paper-card);
}

/* ── Accordion, used by the chapter browser ──────────────────────── */

.accordion {
	border-top: var(--rule-weight) solid var(--rule);
}

.accordion-item {
	border-bottom: var(--rule-weight) solid var(--rule);
}

.accordion-header {
	display: flex;
	gap: 1.5rem;
	align-items: baseline;
	justify-content: space-between;
	width: 100%;
	padding: 1.5rem 0;
	font-family: var(--font-display);
	font-size: clamp(1.05rem, 1.9vw, 1.28rem);
	font-weight: 500;
	line-height: 1.35;
	text-align: left;
	color: var(--ink);
	cursor: pointer;
	background: transparent;
	border: 0;
	transition: color var(--transition);
}

.accordion-header:hover {
	color: var(--vermillion);
}

.accordion-header__label {
	display: block;
	margin-bottom: 0.45rem;
	font-family: var(--font-ui);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--vermillion);
}

.accordion-header__icon {
	position: relative;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-top: 0.35rem;
}

.accordion-header__icon::before,
.accordion-header__icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 16px;
	height: 2px;
	background: var(--vermillion);
	transition: transform var(--transition);
}

.accordion-header__icon::after {
	transform: rotate(90deg);
}

.accordion-header[aria-expanded="true"] .accordion-header__icon::after {
	transform: rotate(0deg);
}

.accordion-body {
	overflow: hidden;
	max-height: 0;
	transition: max-height 380ms cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-body__inner {
	padding: 0 0 1.9rem;
}

.chapter__precis {
	max-width: var(--measure);
	margin: 0 0 1.6rem;
	padding-left: 1.25rem;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--graphite);
	border-left: 2px solid var(--vermillion);
}

.chapter__sections {
	max-width: var(--measure);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: scf-section;
}

.chapter__sections li {
	display: flex;
	gap: 1rem;
	margin-bottom: 0.65rem;
	font-size: 0.98rem;
	color: var(--slate);
}

.chapter__sections li::before {
	counter-increment: scf-section;
	content: counter(scf-section, upper-roman) '.';
	flex-shrink: 0;
	min-width: 3ch;
	font-family: var(--font-ui);
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.9;
	color: var(--vermillion);
}

/* Front matter and end matter are not numbered divisions of the book, so the
   Roman numeral counter is suppressed for them entirely. */
.chapter__sections--plain li {
	display: block;
}

.chapter__sections--plain li::before {
	counter-increment: none;
	content: none;
}

/* ── Concept cards and filter ────────────────────────────────────── */

.concept-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0 0 2.8rem;
	padding: 0;
	list-style: none;
}

.concept-filter li {
	margin: 0;
}

.concept-filter button {
	padding: 0.55rem 1.1rem;
	font-family: var(--font-ui);
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--slate);
	cursor: pointer;
	background: transparent;
	border: var(--rule-weight) solid var(--rule-strong);
	border-radius: var(--radius);
	transition: color var(--transition), background-color var(--transition), border-color var(--transition);
}

.concept-filter button:hover {
	color: var(--vermillion);
	border-color: var(--vermillion);
}

.concept-filter button[aria-pressed="true"] {
	color: var(--paper);
	background: var(--vermillion);
	border-color: var(--vermillion);
}

.concept-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 1.6rem;
}

.concept-card {
	display: flex;
	flex-direction: column;
	padding: 1.7rem 1.8rem;
	background: var(--paper-card);
	border: var(--rule-weight) solid var(--rule);
	border-top: var(--rule-accent-w) solid var(--vermillion);
	transition: box-shadow var(--transition), border-color var(--transition);
}

.concept-card:hover {
	box-shadow: var(--shadow-card);
}

.concept-card.is-hidden {
	display: none;
}

.concept-card__term {
	margin: 0 0 0.75rem;
	font-family: var(--font-display);
	font-size: 1.18rem;
	font-weight: 600;
}

.concept-card__gloss {
	flex: 1 1 auto;
	margin: 0 0 1.1rem;
	font-size: 0.95rem;
	line-height: 1.65;
	color: var(--graphite);
}

.concept-card__locus {
	margin: 0;
	font-family: var(--font-ui);
	font-size: 0.74rem;
	font-weight: 500;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--slate-light);
}

/* The locus links into the contents page, which opens the named chapter on
   arrival. Keep the link the colour of the surrounding label so the card
   does not read as a row of buttons; the underline carries the affordance. */
.concept-card__locus a {
	color: var(--slate);
	text-decoration: none;
	border-bottom: var(--rule-weight) solid var(--rule-strong);
}

.concept-card__locus a:hover,
.concept-card__locus a:focus {
	color: var(--vermillion);
	border-bottom-color: var(--vermillion);
}

/* Background reading. An outside reference work, never the source of the
   gloss above it, which is written from the book. */
.concept-card__see {
	margin: 0.65rem 0 0;
	font-family: var(--font-ui);
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--slate);
}

.concept-card__see a {
	color: var(--vermillion);
}

.concept-empty {
	margin: 0;
	font-style: italic;
	color: var(--slate);
}

/* ── Reading progress ────────────────────────────────────────────── */

.reading-progress {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1100;
	width: 100%;
	height: 2px;
	background: transparent;
	pointer-events: none;
}

.reading-progress__bar {
	width: 0;
	height: 100%;
	background: var(--vermillion);
	transform-origin: left center;
	transition: width 90ms linear;
}

/* ── Forms ───────────────────────────────────────────────────────── */

.form {
	max-width: 660px;
}

.form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.4rem;
}

.form-group {
	display: flex;
	flex-direction: column;
	margin-bottom: 1.4rem;
}

.form-group--full {
	grid-column: 1 / -1;
}

.form-label {
	margin-bottom: 0.45rem;
	font-family: var(--font-ui);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--graphite);
}

.form-label .required {
	color: var(--vermillion);
}

.form-hint {
	margin: 0.4rem 0 0;
	font-family: var(--font-ui);
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--slate);
}

.form-input,
.form-select,
.form-textarea {
	width: 100%;
	padding: 0.75rem 0.9rem;
	font-family: var(--font-ui);
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--graphite);
	background: var(--paper-card);
	border: var(--rule-weight) solid var(--rule-strong);
	border-radius: var(--radius-input);
	transition: border-color var(--transition), box-shadow var(--transition);
}

.form-textarea {
	min-height: 170px;
	font-family: var(--font-body);
	font-size: 1rem;
	resize: vertical;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
	border-color: var(--vermillion);
	outline: 2px solid var(--vermillion);
	outline-offset: 2px;
}

.form-input[aria-invalid="true"],
.form-select[aria-invalid="true"],
.form-textarea[aria-invalid="true"] {
	border-color: var(--vermillion);
	background: var(--vermillion-tint);
}

.form-error {
	margin: 0.4rem 0 0;
	font-family: var(--font-ui);
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--vermillion-deep);
}

.form-error:empty {
	display: none;
}

.form-consent {
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
	margin-bottom: 1.6rem;
	font-family: var(--font-ui);
	font-size: 0.84rem;
	line-height: 1.6;
	color: var(--slate);
}

.form-consent input[type="checkbox"] {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 0.15rem;
	accent-color: var(--vermillion);
}

.form-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form-submit[disabled] {
	cursor: progress;
	opacity: 0.6;
}

.form-feedback {
	margin: 1.6rem 0 0;
	padding: 1rem 1.2rem;
	font-family: var(--font-ui);
	font-size: 0.9rem;
	line-height: 1.6;
	border-left: var(--rule-accent-w) solid var(--rule-strong);
}

.form-feedback:empty {
	display: none;
}

.form-feedback--success {
	color: var(--graphite);
	background: var(--paper-warm);
	border-left-color: var(--vermillion);
}

.form-feedback--error {
	color: var(--vermillion-deep);
	background: var(--vermillion-tint);
	border-left-color: var(--vermillion-deep);
}

/* ── Newsletter ──────────────────────────────────────────────────── */

.newsletter {
	padding: 3.5rem 2.5rem;
	background: var(--paper-warm);
	border-top: var(--rule-accent-w) solid var(--vermillion);
}

.newsletter__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: center;
	max-width: var(--max-w);
	margin: 0 auto;
}

.newsletter-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
}

.newsletter-form .form-input {
	flex: 1 1 240px;
}

/* ── Two-register diagram ────────────────────────────────────────── */

.diagram {
	max-width: 860px;
	margin: 3rem auto;
}

.diagram svg {
	width: 100%;
	height: auto;
}

.diagram figcaption {
	margin-top: 1.2rem;
	font-family: var(--font-ui);
	font-size: 0.82rem;
	line-height: 1.6;
	color: var(--slate);
}

/* ── Bibliographic block ─────────────────────────────────────────── */

.biblio {
	margin: 0;
	font-family: var(--font-ui);
	font-size: 0.9rem;
}

.biblio div {
	display: grid;
	grid-template-columns: 12rem 1fr;
	gap: 1rem;
	padding: 0.7rem 0;
	border-bottom: var(--rule-weight) solid var(--rule);
}

.biblio dt {
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--slate-light);
}

.biblio dd {
	margin: 0;
	color: var(--graphite);
}

/* ── Reference list ──────────────────────────────────────────────── */

.reference-list {
	max-width: var(--measure);
	margin: 0;
	padding: 0;
	list-style: none;
}

.reference-list li {
	margin: 0;
	padding: 0.95rem 0 0.95rem 2.2rem;
	font-size: 0.95rem;
	line-height: 1.65;
	text-indent: -2.2rem;
	color: var(--graphite);
	border-bottom: var(--rule-weight) solid var(--rule);
}

.reference-list li:hover {
	background: var(--vermillion-tint);
}

/* The resolved identifier that closes an entry. Set smaller than the entry
   itself so the citation, not the link, remains the object of attention. */
.ref-doi {
	display: inline-block;
	margin-left: 0.15rem;
	font-family: var(--font-ui);
	font-size: 0.82rem;
	letter-spacing: 0.01em;
	white-space: nowrap;
	color: var(--vermillion);
	text-decoration: none;
	border-bottom: var(--rule-weight) solid var(--rule-strong);
}

.ref-doi:hover,
.ref-doi:focus {
	color: var(--vermillion-deep);
	border-bottom-color: var(--vermillion-deep);
}

/* ── Author card ─────────────────────────────────────────────────── */

.author-card {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 2.5rem;
	align-items: start;
}

.author-card__portrait img {
	width: 100%;
	border: var(--rule-weight) solid var(--rule-strong);
}

.author-card__name {
	margin: 0 0 0.4rem;
	font-family: var(--font-display);
	font-size: 1.5rem;
}

/* ── Notes archive ───────────────────────────────────────────────── */

.note-header {
	max-width: var(--measure);
	margin-bottom: 2.5rem;
}

.note-meta {
	margin: 0 0 1rem;
	font-family: var(--font-ui);
	font-size: 0.76rem;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--slate-light);
}

.note-meta a {
	color: var(--vermillion);
}

.category-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0 0 3rem;
	padding: 0;
	list-style: none;
}

.category-filter li {
	margin: 0;
}

.category-filter a {
	display: inline-block;
	padding: 0.5rem 1rem;
	font-family: var(--font-ui);
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--slate);
	border: var(--rule-weight) solid var(--rule-strong);
}

.category-filter a:hover,
.category-filter a:focus-visible,
.category-filter .is-current a {
	color: var(--paper);
	text-decoration: none;
	background: var(--vermillion);
	border-color: var(--vermillion);
}

.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 3.5rem;
	font-family: var(--font-ui);
	font-size: 0.84rem;
}

.pagination .page-numbers {
	display: inline-block;
	min-width: 42px;
	padding: 0.55rem 0.7rem;
	text-align: center;
	color: var(--graphite);
	border: var(--rule-weight) solid var(--rule-strong);
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
	color: var(--paper);
	text-decoration: none;
	background: var(--vermillion);
	border-color: var(--vermillion);
}

/* ── Related notes ───────────────────────────────────────────────── */

.related {
	max-width: var(--measure);
	margin-top: 4rem;
	padding: 2rem 2.2rem 2.2rem;
	background: var(--paper-warm);
	border-left: var(--rule-accent-w) solid var(--vermillion);
}

.related__title {
	margin: 0 0 0.6rem;
	font-family: var(--font-ui);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--vermillion);
}

.related__list {
	margin: 1.4rem 0 0;
	padding: 0;
	list-style: none;
}

.related__list li + li {
	margin-top: 1.1rem;
	padding-top: 1.1rem;
	border-top: var(--rule-weight) solid var(--rule);
}

.related__list a {
	font-family: var(--font-display);
	font-size: 1.06rem;
	line-height: 1.35;
	color: var(--ink);
	text-decoration: none;
	border-bottom: var(--rule-weight) solid var(--rule-strong);
}

.related__list a:hover,
.related__list a:focus {
	color: var(--vermillion);
	border-bottom-color: var(--vermillion);
}

.related__gloss {
	display: block;
	margin-top: 0.4rem;
	font-family: var(--font-ui);
	font-size: 0.85rem;
	line-height: 1.55;
	color: var(--slate);
}

@media (max-width: 600px) {

	.related {
		padding: 1.5rem 1.4rem 1.6rem;
	}
}

.post-nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem;
	margin-top: 4rem;
	padding-top: 2.5rem;
	border-top: var(--rule-weight) solid var(--rule);
}

.post-nav__label {
	display: block;
	margin-bottom: 0.5rem;
	font-family: var(--font-ui);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--slate-light);
}

.post-nav__next {
	text-align: right;
}

/* ── Search form ─────────────────────────────────────────────────── */

.search-form {
	display: flex;
	gap: 0.7rem;
	max-width: 520px;
	margin: 2rem 0;
}

.search-form .form-input {
	flex: 1 1 auto;
}

/* ── Reveal animation ────────────────────────────────────────────── */

/* The hidden state is applied only when JavaScript is running, because it is
   JavaScript that removes it again. The .scf-js class is written onto <html>
   by an inline snippet printed early in wp_head; if that snippet never runs,
   or if a caching plugin breaks the script that reveals these elements, the
   content stays visible instead of disappearing. A reader must never lose a
   page of the book to a failed animation. */
.scf-js .reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 520ms ease, transform 520ms cubic-bezier(0.4, 0, 0.2, 1);
}

.scf-js .reveal.visible {
	opacity: 1;
	transform: none;
}

/* ── Footer ──────────────────────────────────────────────────────── */

.footer {
	padding: 4.5rem 2rem 2.5rem;
	color: var(--on-ink-body);
	background: var(--ink);
}

.footer a {
	color: var(--on-ink-body);
}

.footer a:hover,
.footer a:focus-visible {
	color: var(--vermillion-link);
	text-decoration: none;
}

.footer__inner {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr;
	gap: 3.5rem;
	max-width: var(--max-w);
	margin: 0 auto;
}

.footer__mark {
	width: 68px;
	height: 68px;
	margin-bottom: 1.4rem;
	background: var(--on-ink-heading);
	padding: 6px;
}

.footer__blurb {
	max-width: 38ch;
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.7;
	color: var(--on-ink-muted);
}

.footer__heading {
	margin: 0 0 1.2rem;
	font-family: var(--font-ui);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--vermillion-link);
}

.footer__links {
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--font-ui);
	font-size: 0.88rem;
}

.footer__links li {
	margin-bottom: 0.65rem;
}

.footer__bottom {
	max-width: var(--max-w);
	margin: 3.5rem auto 0;
	padding-top: 2rem;
	border-top: var(--rule-weight) solid rgba(247, 244, 239, 0.16);
	font-family: var(--font-ui);
	font-size: 0.78rem;
	line-height: 1.75;
	color: var(--on-ink-muted);
}

.footer__bottom p {
	max-width: 76ch;
	margin: 0 0 0.7rem;
}

.footer__bottom p:last-child {
	margin-bottom: 0;
}

/* ── 404 and empty states ────────────────────────────────────────── */

.empty-state {
	max-width: var(--measure);
	padding: 5rem 0;
}

/* ── Responsive: 1180px ──────────────────────────────────────────── */

@media (max-width: 1180px) {
	:root {
		--logo-w: 250px;
	}

	.nav__inner {
		gap: 1.25rem;
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}

	.nav__links {
		gap: 1.05rem;
	}

	.nav__links a {
		font-size: 0.73rem;
		letter-spacing: 0.04em;
	}
}

/* ── Responsive: 900px ───────────────────────────────────────────── */

@media (max-width: 900px) {
	.nav__inner {
		padding: 0.75rem 1.5rem;
	}

	.nav__logo--full {
		width: 260px;
	}

	.nav__desktop {
		display: none;
	}

	.nav__links {
		display: none;
	}

	.nav__hamburger {
		display: flex;
	}

	.hero {
		padding: 4.5rem 1.5rem 4rem;
	}

	.hero__inner {
		grid-template-columns: 1fr;
		gap: 3rem;
	}

	.hero__jacket {
		order: -1;
	}

	.hero__jacket img {
		max-width: 240px;
	}

	.grid--2,
	.grid--3,
	.grid--sidebar,
	.grid--jacket,
	.newsletter__inner,
	.footer__inner,
	.form-grid,
	.post-nav {
		grid-template-columns: 1fr;
		gap: 2.2rem;
	}

	.author-card {
		grid-template-columns: 1fr;
		gap: 1.8rem;
	}

	.author-card__portrait img {
		max-width: 200px;
	}

	.post-nav__next {
		text-align: left;
	}

	.biblio div {
		grid-template-columns: 1fr;
		gap: 0.2rem;
	}
}

/* ── Responsive: 600px ───────────────────────────────────────────── */

@media (max-width: 600px) {
	html {
		font-size: 17px;
	}

	.section,
	.page-header,
	.newsletter,
	.footer {
		padding: var(--section-pad-sm);
	}

	.hero {
		padding: 3rem 1.5rem 3.5rem;
	}

	.nav__inner {
		padding: 0.7rem 1.25rem;
	}

	.nav__logo--full {
		display: none;
	}

	.nav__logo--mark {
		display: block;
	}

	.nav__mobile {
		padding: 1rem 1.25rem 2rem;
	}

	.btn-row {
		flex-direction: column;
		align-items: stretch;
	}

	.btn-row .btn {
		width: 100%;
	}

	.card__thumb {
		margin: -2rem -2rem 1.4rem;
	}

	.pullquote {
		padding-left: 1.25rem;
	}

	.newsletter-form {
		flex-direction: column;
	}

	.newsletter-form .btn {
		width: 100%;
	}

	/* A two-column comparison collapses illegibly at this width, so the
	   table becomes a stack of labelled cards. */
	.data-table--stacked thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
	}

	.data-table--stacked,
	.data-table--stacked tbody,
	.data-table--stacked tr,
	.data-table--stacked td,
	.data-table--stacked th {
		display: block;
		width: 100%;
	}

	.data-table--stacked tr {
		margin-bottom: 1.6rem;
		background: var(--paper-card);
		border: var(--rule-weight) solid var(--rule);
	}

	.data-table--stacked tr:hover {
		background: var(--paper-card);
	}

	.data-table--stacked td,
	.data-table--stacked th[scope="row"] {
		padding: 1rem 1.1rem;
		border-bottom: var(--rule-weight) solid var(--rule);
	}

	.data-table--stacked tr > *:last-child {
		border-bottom: 0;
	}

	.data-table--stacked td::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 0.4rem;
		font-size: 0.7rem;
		font-weight: 600;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--vermillion);
	}

	.data-table--stacked th[scope="row"] {
		background: var(--paper-warm);
	}

	.concept-grid {
		grid-template-columns: 1fr;
	}
}

/* ── Reduced motion ──────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.reveal,
	.hero__content {
		opacity: 1;
		transform: none;
	}

	.accordion-body {
		transition: none;
	}

	.card:hover .card__thumb img {
		transform: none;
	}
}

/* ── Print ───────────────────────────────────────────────────────── */

@media print {
	.nav,
	.footer,
	.newsletter,
	.reading-progress,
	.btn-row,
	.concept-filter {
		display: none !important;
	}

	body {
		color: #000;
		background: #fff;
		font-size: 11pt;
	}

	.section {
		padding: 0;
		background: #fff;
	}

	.section--ink {
		color: #000;
		background: #fff;
	}

	.section--ink h1,
	.section--ink h2 {
		color: #000;
	}

	.accordion-body {
		max-height: none;
	}
}