/* =============================================================
   homechurch — Main stylesheet
   Hearth & manuscript · long-form theology · printed-book feel
   v1.2 — sticky chrome, persistent Top anchor, reading progress
   ============================================================= */


/* --- Reset & base -------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	scroll-behavior: smooth;
	/* Sticky header offset for any anchor / fragment jump (#main, #section, etc.)
	   so the target heading lands below the chrome instead of behind it. */
	scroll-padding-top: var(--sticky-offset);
}

body {
	margin: 0;
	background: var(--c-parchment);
	color: var(--c-ink);
	font-family: var(--ff-body);
	font-size: var(--fs-body);
	line-height: var(--lh-relaxed);
	font-feature-settings: "kern", "liga", "onum";
}

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

a {
	color: var(--c-rust-deep);
	text-decoration: underline;
	text-decoration-thickness: 0.5px;
	text-underline-offset: 0.2em;
	text-decoration-color: var(--c-rule);
	transition: text-decoration-color var(--t-base);
}
a:hover { text-decoration-color: var(--c-rust-deep); }

::selection { background: var(--c-rust); color: var(--c-parchment); }


/* --- Utility ------------------------------------------------- */

.visually-hidden {
	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; left: -9999px; top: 0;
	background: var(--c-ink); color: var(--c-parchment);
	padding: var(--sp-3) var(--sp-5);
	z-index: var(--z-skiplink);
	text-decoration: none;
}
/* Reveal the skip-link ONLY on real keyboard focus, never on programmatic
   .focus() calls — guarantees mouse users will never see it flash up. */
.skip-link:focus-visible { left: var(--sp-3); top: var(--sp-3); }

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

.eyebrow {
	display: inline-block;
	font-family: var(--ff-eyebrow);
	font-size: var(--fs-eyebrow);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--c-rust);
}


/* =============================================================
   Topbar (optional thin dark strip)
   ============================================================= */

.topbar {
	background: var(--c-ink);
	color: var(--c-parchment-soft);
	font-size: var(--fs-caption);
	padding: var(--sp-2) 0;
}


/* =============================================================
   Site header — sticky on every viewport (v1.2)
   ============================================================= */

.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	background: var(--c-parchment);
	border-bottom: 1px solid var(--c-rule);
	transition: box-shadow var(--t-base);
}

.site-header.is-stuck {
	box-shadow: 0 2px 18px rgba(42, 31, 24, 0.08);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--sp-6);
	min-height: 64px;
	padding-top: var(--sp-3);
	padding-bottom: var(--sp-3);
}

.site-header__drawer-toggle {
	display: none;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 10px;
	margin-left: calc(var(--sp-3) * -1);
	min-width: 44px;
	min-height: 44px;
}

.site-header__drawer-icon {
	display: inline-block;
	width: 22px;
	height: 14px;
	position: relative;
}
.site-header__drawer-icon span {
	display: block;
	height: 1.5px;
	background: var(--c-ink);
	border-radius: 1px;
	position: absolute;
	left: 0; right: 0;
	transition: transform var(--t-base), opacity var(--t-base), top var(--t-base);
}
.site-header__drawer-icon span:nth-child(1) { top: 0; }
.site-header__drawer-icon span:nth-child(2) { top: 6px; }
.site-header__drawer-icon span:nth-child(3) { top: 12px; }

.site-header__drawer-toggle[aria-expanded="true"] .site-header__drawer-icon span:nth-child(1) {
	top: 6px; transform: rotate(45deg);
}
.site-header__drawer-toggle[aria-expanded="true"] .site-header__drawer-icon span:nth-child(2) {
	opacity: 0;
}
.site-header__drawer-toggle[aria-expanded="true"] .site-header__drawer-icon span:nth-child(3) {
	top: 6px; transform: rotate(-45deg);
}

.site-header__brand {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	text-decoration: none;
	color: var(--c-ink);
	line-height: 1;
	margin-right: auto;
	min-width: 0;            /* let flexbox shrink the brand on narrow screens */
	overflow: hidden;        /* clip rather than overflow if it's still too tight */
}
.site-header__brand:hover { text-decoration: none; }

/* Fallback when no logo — preserves the previous "title above tagline"
   layout. With a logo the brand becomes a row, and the text-stack does
   its own column flex internally. */
.site-header__brand.no-logo { flex-direction: column; align-items: flex-start; gap: var(--sp-1); }

.site-header__logo {
	display: block;
	height: 42px;
	width: auto;
	max-width: 120px;    /* accommodate wordmark proportions (was 64px) */
	flex-shrink: 0;      /* keep the logo at its intrinsic size even when title shrinks */
}

.site-header__text {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	min-width: 0;
	overflow: hidden;
}

.site-header__title {
	font-family: var(--ff-display);
	/* Fluid: 18.4px on a 380px-wide phone, 24px on tablet/desktop+ */
	font-size: clamp(1.15rem, 4vw, 1.5rem);
	font-weight: 500;
	letter-spacing: var(--ls-display);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.site-header__tagline {
	font-style: italic;
	font-size: var(--fs-caption);
	color: var(--c-ink-faint);
	line-height: 1;
}

.site-topnav ul {
	list-style: none;
	display: flex;
	gap: var(--sp-5);
	padding: 0; margin: 0;
}
.site-topnav a {
	font-family: var(--ff-display);
	font-size: 1.0625rem;
	color: var(--c-ink);
	text-decoration: none;
	padding: 6px 2px;
	border-bottom: 1px solid transparent;
	transition: color var(--t-fast), border-color var(--t-fast);
}
.site-topnav a:hover,
.site-topnav .current > a,
.site-topnav .active > a {
	color: var(--c-rust-deep);
	border-bottom-color: var(--c-rust);
}

.site-search {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 8px;
	background: var(--c-parchment-soft);
	border: 1px solid var(--c-rule);
	border-radius: var(--r-pill);
	min-width: 220px;
	transition: border-color var(--t-base);
}
.site-search:focus-within { border-color: var(--c-rust); }

.site-search__icon {
	display: flex; align-items: center; justify-content: center;
	background: transparent;
	border: 0;
	color: var(--c-rust);
	cursor: pointer;
	padding: 4px;
}

.site-search input[type="search"] {
	flex: 1;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: var(--fs-meta);
	color: var(--c-ink);
	outline: none;
	min-width: 0;
}


/* =============================================================
   Breadcrumbs
   ============================================================= */

.breadcrumbs-wrap {
	background: var(--c-parchment-soft);
	border-bottom: 1px solid var(--c-rule-soft);
	padding: var(--sp-3) 0;
	font-size: var(--fs-meta);
}

.breadcrumbs-wrap ul,
.breadcrumbs-wrap ol {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 0;
	align-items: center;
}

.breadcrumbs-wrap li {
	display: inline-flex;
	align-items: center;
}
.breadcrumbs-wrap li + li::before {
	content: "/";
	color: var(--c-rule);
	margin: 0 var(--sp-2);
}
.breadcrumbs-wrap a {
	color: var(--c-ink-faint);
	text-decoration: none;
}
.breadcrumbs-wrap a:hover { color: var(--c-rust-deep); }


/* =============================================================
   Body grid: rail + main
   ============================================================= */

.site-body {
	padding-top: var(--sp-7);
	padding-bottom: var(--sp-9);
}

.site-body.has-rail {
	display: grid;
	grid-template-columns: var(--w-rail) minmax(0, 1fr);
	gap: var(--w-rail-gap);
}

.site-main {
	min-width: 0;
}

/* The component output is wrapped in .site-main__inner as a structural
   hook for future use, but it carries no width constraint — list-view
   descriptions and other view chrome flow at the full main-column width.
   The reading-column constraint is applied to specific inner containers
   below (see "List/blog view item containers"). */
.site-main__inner {
	width: 100%;
}

/* =============================================================
   List/blog/featured view — constrain only the article-list
   inner container to the reading column. Leaves the category
   H1, description, and any modules above the items at the full
   main-column width.

   Class names verified against Joomla 4-6 core source:
   components/com_content/tmpl/category/default_articles.php
   ============================================================= */
.com-content-category__articles,   /* list view: <form> wrapping filter + pagination + table */
.com-content-category__table,      /* list view: the table itself (alt target) */
.com-content-category__items,      /* blog view: items wrapper */
/* Legacy markup fallbacks (older Joomla, custom overrides) */
table.category,
.items-leading,
.items-row {
	max-width: var(--w-content-eff, var(--w-content));
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}


/* =============================================================
   Rail — persistent left sidebar (desktop)
   ============================================================= */

/* Desktop: hide the rail entirely when site-body has no rail content.
   On mobile, .rail becomes a drawer regardless (see media query below). */
.site-body:not(.has-rail) .rail { display: none; }

/* Top-nav mirror: only shown inside the mobile drawer, never on desktop */
.rail__topnav-mirror { display: none; }

.rail {
	position: sticky;
	top: calc(var(--header-height) + var(--sp-5));
	align-self: start;
	max-height: calc(100vh - var(--header-height) - var(--sp-7));
	overflow-y: auto;
	padding-right: var(--sp-3);
	scrollbar-width: thin;
}

.rail__close {
	display: none;
}

.rail__toc {
	margin-bottom: var(--sp-6);
	padding-bottom: var(--sp-5);
	border-bottom: 1px solid var(--c-rule);
}

.rail__toc-heading {
	font-family: var(--ff-eyebrow);
	font-size: var(--fs-eyebrow);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--c-rust);
	margin: 0 0 var(--sp-3);
}

.rail__toc ul,
.rail__menu ul {
	list-style: none;
	padding: 0; margin: 0;
}

.rail__toc li,
.rail__menu li { margin: 0; }

.rail__toc a {
	display: block;
	padding: 6px 0 6px var(--sp-3);
	border-left: 2px solid transparent;
	color: var(--c-ink-soft);
	text-decoration: none;
	font-size: var(--fs-meta);
	line-height: var(--lh-snug);
	transition: color var(--t-fast), border-color var(--t-fast);
}
.rail__toc a:hover { color: var(--c-rust-deep); border-left-color: var(--c-rule); }
.rail__toc a.is-active {
	color: var(--c-rust-deep);
	border-left-color: var(--c-rust);
	font-weight: 500;
}

/* "Top" entry styling — small caps, with up-tick glyph */
.rail__toc a.toc__top,
.article__toc-mobile-list a.toc__top {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-variant: small-caps;
	letter-spacing: 0.5px;
}
.rail__toc a.toc__top::before,
.article__toc-mobile-list a.toc__top::before {
	content: "";
	display: inline-block;
	width: 0; height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-bottom: 5px solid currentColor;
}

.rail__menu {
	font-size: var(--fs-meta);
}

.rail__menu .moduletitle,
.rail h3.moduletitle {
	font-family: var(--ff-eyebrow);
	font-size: var(--fs-eyebrow);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--c-rust);
	margin: 0 0 var(--sp-3);
	font-weight: 500;
}

.rail__menu a {
	display: block;
	padding: var(--sp-2) 0 var(--sp-2) var(--sp-3);
	border-left: 2px solid transparent;
	color: var(--c-ink);
	text-decoration: none;
	line-height: var(--lh-snug);
	transition: color var(--t-fast), border-color var(--t-fast);
}
.rail__menu a:hover { color: var(--c-rust-deep); border-left-color: var(--c-rule); }
.rail__menu .is-current > a,
.rail__menu .current > a,
.rail__menu .active > a {
	color: var(--c-rust-deep);
	border-left-color: var(--c-rust);
	font-weight: 500;
}

/* Defensive: hide Joomla's collapse toggler if menu module uses that layout */
.rail .navbar-toggler { display: none !important; }
.rail .collapse,
.rail .navbar-collapse { display: block !important; height: auto !important; }


/* =============================================================
   Drawer (mobile rail)
   ============================================================= */

.drawer-backdrop {
	position: fixed; inset: 0;
	background: rgba(42, 31, 24, 0.4);
	opacity: 0;
	visibility: hidden;
	z-index: var(--z-backdrop);
	transition: opacity var(--t-base);
}
body.drawer-open .drawer-backdrop {
	opacity: 1;
	visibility: visible;
}


/* =============================================================
   Article page
   ============================================================= */

/* =============================================================
   Article page
   ============================================================= */

/* Container fills the main column so the article's outer edges
   align with the category description above it on list pages.
   The reading-width constraint moves to .article__body (the
   actual prose) further down so long-line readability is kept. */
.article {
	width: 100%;
}

.article__header {
	text-align: center;
	margin-bottom: var(--sp-6);
}

.article__eyebrow { margin-bottom: var(--sp-3); }

.article__title {
	font-family: var(--ff-display);
	font-size: var(--fs-h1);
	font-weight: 500;
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-display);
	margin: 0 0 var(--sp-4);
	color: var(--c-ink);
}

.article__lead {
	font-family: var(--ff-display);
	font-style: italic;
	font-size: var(--fs-lead);
	line-height: var(--lh-snug);
	color: var(--c-ink-faint);
	margin: 0 0 var(--sp-5);
}

.article__ornament { margin: var(--sp-4) auto 0; }

.article__featured-image { margin: var(--sp-6) 0; }
.article__featured-image img {
	width: 100%;
	border: 1px solid var(--c-rule);
}
.article__featured-image figcaption {
	margin-top: var(--sp-2);
	font-size: var(--fs-caption);
	color: var(--c-rust-soft);
	font-style: italic;
	text-align: center;
}

/* Body prose
   ----------
   No width constraint — prose fills the main column at the same
   width as the title and hero image above, matching the category
   description's flow on list pages. The reading-width parameter
   is now effectively a no-op for articles (kept in the param list
   for future use or partial re-application). */
.article__body > * { margin-left: 0; margin-right: 0; }

.article__body h2,
.article__body h3 {
	font-family: var(--ff-display);
	font-weight: 500;
	color: var(--c-ink);
	scroll-margin-top: var(--sticky-offset);
}
.article__body h2 {
	font-size: var(--fs-h2);
	line-height: var(--lh-tight);
	margin: var(--sp-8) 0 var(--sp-3);
}
.article__body h3 {
	font-size: var(--fs-h3);
	line-height: var(--lh-snug);
	margin: var(--sp-6) 0 var(--sp-2);
}

.article__body > p:first-of-type::first-letter {
	font-family: var(--ff-display);
	font-size: 4.25rem;
	line-height: 0.95;
	float: left;
	margin: 0.15em var(--sp-3) 0 0;
	color: var(--c-rust-deep);
	font-weight: 500;
}

.article__body blockquote,
.article__body blockquote.scripture {
	margin: var(--sp-6) calc(var(--sp-5) * -1);
	padding: var(--sp-5) var(--sp-7) var(--sp-4) var(--sp-8);
	background: var(--c-parchment-soft);
	border-left: 3px solid var(--c-rust);
	font-style: italic;
	position: relative;
}
.article__body blockquote::before {
	content: "\201C";
	font-family: var(--ff-display);
	font-size: 4rem;
	line-height: 0;
	color: var(--c-rust);
	opacity: 0.32;
	position: absolute;
	left: var(--sp-4);
	top: var(--sp-7);
}

.golden-thought {
	margin: var(--sp-6) 0;
	padding: var(--sp-5) var(--sp-6);
	background: var(--c-parchment-deep);
	border-radius: var(--r-sm);
	text-align: center;
}


/* =============================================================
   Mobile "On this page" sticky bar (v1.2)
   ============================================================= */

.article__toc-mobile { display: none; }


/* =============================================================
   Foundations panel (dark CTA on home page)
   ============================================================= */

.foundations-panel {
	background: var(--c-foundations-bg);
	color: var(--c-foundations-fg);
	padding: var(--sp-8) var(--sp-7);
	margin: var(--sp-8) 0;
	text-align: center;
	border-radius: var(--r-sm);
}

.foundations-panel__eyebrow {
	display: inline-block;
	font-family: var(--ff-eyebrow);
	font-size: var(--fs-eyebrow);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--c-foundations-accent);
	margin-bottom: var(--sp-3);
}

.foundations-panel__title {
	font-family: var(--ff-display);
	font-size: var(--fs-h2);
	font-weight: 500;
	line-height: var(--lh-tight);
	color: var(--c-parchment);
	margin: 0 0 var(--sp-4);
}

.foundations-panel__text {
	max-width: 560px;
	margin: 0 auto var(--sp-5);
}

.foundations-panel__cta {
	display: inline-block;
	border: 1px solid var(--c-foundations-accent);
	color: var(--c-foundations-accent);
	padding: var(--sp-3) var(--sp-6);
	font-family: var(--ff-eyebrow);
	font-size: var(--fs-eyebrow);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	text-decoration: none;
	transition: background var(--t-base), color var(--t-base);
}
.foundations-panel__cta:hover {
	background: var(--c-foundations-accent);
	color: var(--c-foundations-bg);
}


/* =============================================================
   Where-to-begin cards (home page module convention)
   ============================================================= */

.where-to-begin { margin: 0 0 var(--sp-7); }
.where-to-begin__heading { text-align: center; margin-bottom: var(--sp-5); }
.where-to-begin__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-5);
}
.where-to-begin__card {
	display: block;
	border-top: 1px solid var(--c-rule);
	padding-top: var(--sp-3);
	text-decoration: none;
	color: inherit;
	transition: transform var(--t-base);
}
.where-to-begin__card:hover { transform: translateY(-1px); text-decoration: none; }
.where-to-begin__label {
	display: block;
	font-family: var(--ff-eyebrow);
	font-size: var(--fs-eyebrow);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--c-rust);
	margin-bottom: var(--sp-2);
}
.where-to-begin__title {
	display: block;
	font-family: var(--ff-display);
	font-size: var(--fs-h4);
	font-weight: 500;
	color: var(--c-ink);
	line-height: var(--lh-snug);
}


/* =============================================================
   Below / related cards
   ============================================================= */

.related { padding: var(--sp-8) 0; border-top: 1px solid var(--c-rule); margin-top: var(--sp-8); }
.related__heading { text-align: center; margin-bottom: var(--sp-6); }
.ornament-rule { display: block; margin: var(--sp-3) auto 0; color: var(--c-rust); width: 220px; height: 20px; }

.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--sp-6);
	margin: var(--sp-6) 0;
}


/* =============================================================
   Footer
   ============================================================= */

.site-footer {
	background: var(--c-ink);
	color: var(--c-foundations-fg);
	padding: var(--sp-8) 0 var(--sp-5);
	margin-top: var(--sp-9);
}
.site-footer a { color: var(--c-foundations-accent); }

.site-footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--sp-6);
	padding-bottom: var(--sp-6);
	border-bottom: 1px solid rgba(255,255,255,0.08);
}

.site-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--sp-4);
	padding-top: var(--sp-5);
	font-size: var(--fs-caption);
}

.site-footer__copyright { color: var(--c-foundations-fg); }


/* =============================================================
   Mobile (<= 900px) — drawer, sticky "On this page" bar
   ============================================================= */

@media (max-width: 900px) {

	:root { --toc-bar-height: 52px; }

	/* Header reveals hamburger, hides desktop nav */
	.site-header__drawer-toggle { display: inline-flex; align-items: center; justify-content: center; }
	.site-topnav { display: none; }
	.site-search { max-width: 200px; min-width: 0; }

	/* Tighter gap on mobile so the brand has more room to breathe */
	.site-header__inner { gap: var(--sp-3); }

	/* Body becomes single column */
	.site-body.has-rail { grid-template-columns: 1fr; gap: 0; }

	/* On mobile, the drawer is always available — even if the body
	   wasn't marked .has-rail, the rail still needs to render as a
	   slide-in drawer so the user can reach the top-nav mirror. */
	.site-body:not(.has-rail) .rail { display: block; }

	/* Rail becomes a slide-in drawer */
	.rail {
		position: fixed;
		top: 0;
		left: 0;
		width: min(86vw, 340px);
		height: 100vh;
		max-height: none;
		background: var(--c-parchment);
		border-right: 1px solid var(--c-rule);
		padding: var(--sp-5) var(--sp-5) var(--sp-7);
		z-index: var(--z-drawer);
		transform: translateX(-100%);
		transition: transform var(--t-base);
		overflow-y: auto;
	}
	.rail.is-open { transform: translateX(0); box-shadow: 4px 0 24px rgba(42,31,24,0.18); }

	.rail__close {
		display: inline-flex;
		align-items: center; justify-content: center;
		background: transparent;
		border: 0;
		padding: 8px;
		margin: 0 0 var(--sp-4) calc(var(--sp-3) * -1);
		color: var(--c-ink);
		cursor: pointer;
		min-width: 44px;
		min-height: 44px;
	}

	/* Top-nav mirror inside the drawer — vertical list, generous tap targets */
	.rail__topnav-mirror {
		display: block;
		margin-bottom: var(--sp-5);
		padding-bottom: var(--sp-4);
		border-bottom: 1px solid var(--c-rule);
	}
	.rail__topnav-mirror ul {
		list-style: none;
		margin: 0;
		padding: 0;
		display: block;
		gap: 0;
	}
	.rail__topnav-mirror li {
		display: block;
		margin: 0;
	}
	.rail__topnav-mirror a {
		display: block;
		padding: var(--sp-3) 0;
		font-family: var(--ff-display);
		font-size: var(--fs-h4);
		font-weight: 500;
		color: var(--c-ink);
		text-decoration: none;
		border-bottom: 1px solid var(--c-rule-soft);
		min-height: 44px;
		line-height: 1.4;
	}
	.rail__topnav-mirror li:last-child a { border-bottom: 0; }
	.rail__topnav-mirror a:hover,
	.rail__topnav-mirror .current > a,
	.rail__topnav-mirror .active > a {
		color: var(--c-rust-deep);
	}

	body.drawer-open { overflow: hidden; }

	/* The mobile sticky "On this page" bar */
	.article__toc-mobile {
		display: block;
		position: sticky;
		top: var(--header-height);
		z-index: var(--z-rail-bar);
		background: var(--c-parchment);
		border-bottom: 1px solid var(--c-rule);
		margin: 0 calc(var(--sp-5) * -1) var(--sp-5);
	}

	.article__toc-mobile-bar {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		min-height: var(--toc-bar-height);
		padding: 0 var(--sp-4);
	}

	.article__toc-mobile-toggle {
		justify-self: start;
		display: inline-flex;
		align-items: center;
		gap: var(--sp-2);
		padding: 8px 10px 8px 0;
		background: transparent;
		border: 0;
		color: var(--c-ink);
		font: inherit;
		font-size: var(--fs-meta);
		cursor: pointer;
		min-height: 44px;
		min-width: 44px;
	}

	.article__toc-mobile-toggle .label {
		font-family: var(--ff-eyebrow);
		font-size: var(--fs-eyebrow);
		letter-spacing: var(--ls-eyebrow);
		text-transform: uppercase;
		color: var(--c-rust);
	}

	.article__toc-mobile-toggle .count {
		font-size: var(--fs-eyebrow);
		color: var(--c-ink-faint);
	}

	.article__toc-mobile-toggle .chevron {
		color: var(--c-rust);
		transition: transform var(--t-base);
	}
	.article__toc-mobile-toggle[aria-expanded="true"] .chevron {
		transform: rotate(180deg);
	}

	/* Centred Top pill */
	.article__toc-mobile-top {
		justify-self: center;
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 8px 14px;
		min-height: 36px;
		background: transparent;
		border: 1.5px solid var(--c-rust);
		border-radius: var(--r-pill);
		color: var(--c-rust);
		font-family: var(--ff-eyebrow);
		font-size: var(--fs-eyebrow);
		font-weight: 500;
		letter-spacing: var(--ls-eyebrow);
		text-transform: uppercase;
		cursor: pointer;
		transition: background var(--t-base), color var(--t-base), opacity var(--t-base);
	}

	.article__toc-mobile-top:hover,
	.article__toc-mobile-top:focus-visible {
		background: var(--c-rust);
		color: var(--c-parchment);
		outline: none;
	}

	/* Top button only meaningful once user has scrolled */
	.article__toc-mobile-top {
		opacity: 0.5;
		pointer-events: none;
	}
	.article__toc-mobile.is-scrolled .article__toc-mobile-top {
		opacity: 1;
		pointer-events: auto;
	}

	/* Right slot — reading progress indicator */
	.article__toc-mobile-progress {
		justify-self: end;
		display: inline-flex;
		align-items: baseline;
		gap: 4px;
		padding: 8px 0;
		font-family: var(--ff-eyebrow);
		font-size: var(--fs-eyebrow);
		letter-spacing: var(--ls-eyebrow);
		text-transform: uppercase;
		color: var(--c-ink-faint);
		min-width: 44px;
		justify-content: flex-end;
	}

	.article__toc-mobile-progress .pct {
		font-family: var(--ff-display);
		font-size: 0.95rem;
		font-variant-numeric: tabular-nums;
		letter-spacing: 0;
		color: var(--c-ink);
		font-weight: 500;
		line-height: 1;
	}

	.article__toc-mobile-progress .sym {
		font-size: 0.7rem;
		color: var(--c-rust);
		line-height: 1;
	}

	/* Hairline progress bar across the bottom of the mobile bar */
	.article__toc-mobile-rule {
		height: 2px;
		background: transparent;
		position: relative;
		overflow: hidden;
	}
	.article__toc-mobile-rule::before {
		content: "";
		position: absolute;
		inset: 0 auto 0 0;
		width: var(--progress, 0%);
		background: var(--c-rust);
		transition: width var(--t-fast);
	}

	/* Expanded list dropdown */
	.article__toc-mobile-list {
		list-style: none;
		margin: 0;
		padding: var(--sp-2) var(--sp-4) var(--sp-4);
		border-top: 1px solid var(--c-rule-soft);
		max-height: 50vh;
		overflow-y: auto;
	}
	.article__toc-mobile-list li { margin: 0; }
	.article__toc-mobile-list a {
		display: block;
		padding: 10px 4px;
		color: var(--c-ink);
		text-decoration: none;
		border-bottom: 1px solid var(--c-rule-soft);
		font-size: var(--fs-meta);
	}
	.article__toc-mobile-list a.is-active {
		color: var(--c-rust-deep);
		font-weight: 500;
	}
	.article__toc-mobile-list li:last-child a { border-bottom: 0; }

	.rail__toc { display: none; }
}

@media (max-width: 480px) {
	.site-search input[type="search"] { display: none; }
	.site-search { min-width: 0; padding: 6px; }

	/* Shrink the logo on small phones to give the title more breathing room.
	   With the wordmark aspect ratio (~2.29:1), 32px height = ~73px wide. */
	.site-header__logo { height: 32px; max-width: 80px; }
	.site-header__brand { gap: var(--sp-2); }

	/* Tighten the mobile TOC bar */
	.article__toc-mobile-toggle .label { display: none; }
	.article__toc-mobile-top { padding: 6px 10px; font-size: 0.625rem; }
	.article__toc-mobile-progress { font-size: 0.625rem; }
}


/* =============================================================
   Print
   ============================================================= */

@media print {
	body { background: white; color: black; }
	.site-header, .site-footer, .site-topnav,
	.breadcrumbs-wrap, .related, .below-content,
	.rail, .above-content, .article__toc-mobile,
	.drawer-backdrop { display: none; }
	.site-body.has-rail { grid-template-columns: 1fr; }
	.article { max-width: none; }
	a { color: black; text-decoration: underline; }
}