/*
Theme Name: Transgender Map
Theme URI: https://www.transgendermap.com/
Author: Andrea James
Author URI: https://www.transgendermap.com/about/
Description: The v2 field-guide theme for Transgender Map. A calm, high-contrast reading template built for people looking for practical answers, with light and dark schemes, self-hosted fonts, and no third-party requests.
Version: 2.0.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.1
Text Domain: transgender-map
Tags: accessibility-ready, custom-menu, translation-ready, block-styles, wide-blocks
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
	color-scheme: light;

	/* Surfaces, lightest to most recessed. */
	--tgm-paper: #f9f7fd;
	--tgm-paper-raised: #fdfcff;
	--tgm-paper-sunken: #f0ebf8;
	--tgm-paper-tint: #f4f0fb;
	--tgm-well: #eee6f8;

	/* Ink. */
	--tgm-ink: #1e1826;
	--tgm-ink-strong: #231d2c;
	--tgm-ink-body: #3b3448;
	--tgm-ink-muted: #564e68;
	--tgm-ink-soft: #675f7a;
	--tgm-ink-faint: #847d96;
	--tgm-ink-mono: #968ea8;

	/* Accent. */
	--tgm-accent: #5a2b86;
	--tgm-accent-link: #5c2f86;
	--tgm-accent-icon: #6b3a99;
	--tgm-accent-deep: #4a2270;
	--tgm-accent-contrast: #ffffff;
	--tgm-status: #4e8a5f;

	/* Lines. */
	--tgm-rule: #e5dfef;
	--tgm-rule-strong: #e3dcef;
	--tgm-rule-accent: #e0d6f0;
	--tgm-rule-hairline: #e2dbee;

	/* Type. */
	--tgm-serif: "Newsreader", Georgia, "Times New Roman", serif;
	--tgm-sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--tgm-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Measure and rhythm. */
	--tgm-shell: 1000px;
	--tgm-measure: 640px;
	--tgm-gutter: clamp(1.25rem, 4vw, 2.5rem);
	--tgm-radius: 10px;
	--tgm-radius-lg: 12px;
	--tgm-tap: 48px;

	--tgm-shadow-card: 0 22px 50px -30px rgba(48, 34, 70, 0.42);

	/* Height of the sticky header, for scroll offsets. */
	--tgm-header-h: 69px;
}

@media (max-width: 1023px) {
	:root {
		--tgm-header-h: 81px;
	}
}

@media (max-width: 420px) {
	:root {
		--tgm-header-h: 77px;
	}
}

/*
 * Dark mode is the same markup with one swapped palette, so it costs a media
 * query rather than a second template. Deep aubergine rather than pure black to
 * reduce halation on long reading; the accent lifts from #5A2B86 to #C9A8F0 so
 * link contrast stays above 7:1 both ways.
 */
@media (prefers-color-scheme: dark) {
	:root:not([data-tgm-scheme="light"]) {
		color-scheme: dark;

		--tgm-paper: #171320;
		--tgm-paper-raised: #1e1828;
		--tgm-paper-sunken: #1e1828;
		--tgm-paper-tint: #221b2e;
		--tgm-well: #2a2138;

		--tgm-ink: #f4f0fa;
		--tgm-ink-strong: #f6f2fb;
		--tgm-ink-body: #cec5dd;
		--tgm-ink-muted: #b0a5c2;
		--tgm-ink-soft: #a79cba;
		--tgm-ink-faint: #8b809e;
		--tgm-ink-mono: #8b809e;

		--tgm-accent: #c9a8f0;
		--tgm-accent-link: #c9a8f0;
		--tgm-accent-icon: #c9a8f0;
		--tgm-accent-deep: #c9a8f0;
		--tgm-accent-contrast: #241236;
		--tgm-status: #6cc088;

		--tgm-rule: #322a42;
		--tgm-rule-strong: #3d3450;
		--tgm-rule-accent: #3d3450;
		--tgm-rule-hairline: #3d3450;

		--tgm-shadow-card: 0 22px 50px -30px rgba(16, 10, 26, 0.6);
	}
}

/* Manual override. Mirrors the media query above, one direction each. */
:root[data-tgm-scheme="dark"] {
	color-scheme: dark;

	--tgm-paper: #171320;
	--tgm-paper-raised: #1e1828;
	--tgm-paper-sunken: #1e1828;
	--tgm-paper-tint: #221b2e;
	--tgm-well: #2a2138;

	--tgm-ink: #f4f0fa;
	--tgm-ink-strong: #f6f2fb;
	--tgm-ink-body: #cec5dd;
	--tgm-ink-muted: #b0a5c2;
	--tgm-ink-soft: #a79cba;
	--tgm-ink-faint: #8b809e;
	--tgm-ink-mono: #8b809e;

	--tgm-accent: #c9a8f0;
	--tgm-accent-link: #c9a8f0;
	--tgm-accent-icon: #c9a8f0;
	--tgm-accent-deep: #c9a8f0;
	--tgm-accent-contrast: #241236;
	--tgm-status: #6cc088;

	--tgm-rule: #322a42;
	--tgm-rule-strong: #3d3450;
	--tgm-rule-accent: #3d3450;
	--tgm-rule-hairline: #3d3450;

	--tgm-shadow-card: 0 22px 50px -30px rgba(16, 10, 26, 0.6);
}

/* ==========================================================================
   2. Base
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--tgm-paper);
	color: var(--tgm-ink-body);
	font-family: var(--tgm-sans);
	font-size: 19px;
	line-height: 1.62;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

@media (max-width: 782px) {
	body {
		font-size: 17px;
	}
}

h1,
h2,
h3,
h4 {
	font-family: var(--tgm-serif);
	font-weight: 500;
	color: var(--tgm-ink);
	letter-spacing: -0.015em;
	line-height: 1.2;
	text-wrap: balance;
}

p,
li {
	text-wrap: pretty;
}

a {
	color: var(--tgm-accent-link);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

a:hover {
	text-decoration-thickness: 2px;
}

strong,
b {
	font-weight: 700;
	color: var(--tgm-ink);
}

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

:focus-visible {
	outline: 3px solid var(--tgm-accent-icon);
	outline-offset: 2px;
	border-radius: 3px;
}

::selection {
	background: var(--tgm-well);
	color: var(--tgm-ink);
}

.tgm-skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 12px 20px;
	background: var(--tgm-accent);
	color: var(--tgm-accent-contrast);
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 var(--tgm-radius) 0;
}

.tgm-skip-link:focus {
	left: 0;
	top: 0;
}

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

.tgm-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	fill: currentColor;
	flex: 0 0 auto;
}

.tgm-shell {
	max-width: var(--tgm-shell);
	margin-inline: auto;
	padding-inline: var(--tgm-gutter);
}

.tgm-eyebrow {
	font-family: var(--tgm-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tgm-ink-mono);
}

/* ==========================================================================
   3. Header
   ========================================================================== */

/*
 * Sticky: pages here run long and the header carries the only way out —
 * search, translate, the menu. The offset variable keeps the "on this page"
 * rail and every heading anchor clear of it.
 */
.tgm-header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--tgm-paper);
	border-bottom: 1px solid var(--tgm-rule);
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

.tgm-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-block: 16px;
}

.tgm-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: inherit;
	flex: 0 0 auto;
}

.tgm-brand:hover {
	text-decoration: none;
}

.tgm-brand__mark {
	display: block;
	width: 36px;
	height: 36px;
	flex: 0 0 auto;
}

.tgm-brand__text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.tgm-brand__name {
	font-family: var(--tgm-serif);
	font-size: 22px;
	color: var(--tgm-ink-strong);
	letter-spacing: -0.01em;
}

.tgm-brand__by {
	font-size: 12px;
	color: var(--tgm-ink-faint);
	letter-spacing: 0.02em;
}

.tgm-nav {
	display: flex;
	align-items: center;
	gap: 22px;
}

.tgm-nav__list {
	display: flex;
	align-items: center;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tgm-nav__list a {
	color: var(--tgm-ink-body);
	font-size: 15px;
	text-decoration: none;
	white-space: nowrap;
}

.tgm-nav__list a:hover {
	text-decoration: underline;
	text-decoration-color: var(--tgm-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 7px;
}

.tgm-nav__list .current-menu-item > a,
.tgm-nav__list .current-menu-ancestor > a,
.tgm-nav__list .current-page-ancestor > a,
.tgm-nav__list .tgm-nav__item--current > a {
	color: var(--tgm-ink-strong);
	text-decoration: underline;
	text-decoration-color: var(--tgm-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 7px;
}

/* Only the top level shows in the desktop bar; children live in the menu panel. */
.tgm-nav__list .sub-menu {
	display: none;
}

.tgm-header__divider {
	width: 1px;
	height: 20px;
	background: var(--tgm-rule-hairline);
	flex: 0 0 auto;
}

.tgm-header__tools {
	display: flex;
	align-items: center;
	gap: 10px;
}

.tgm-tool {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--tgm-ink-soft);
	font-size: 15px;
	text-decoration: none;
	background: none;
	border: 0;
	padding: 0;
	font-family: inherit;
	cursor: pointer;
}

.tgm-tool:hover {
	color: var(--tgm-ink-strong);
}

.tgm-tool--round {
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	border: 1px solid var(--tgm-rule-strong);
	color: var(--tgm-ink-soft);
	font-size: 18px;
}

.tgm-tool--round:hover {
	border-color: var(--tgm-accent);
	color: var(--tgm-accent-icon);
}

.tgm-donate {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 15px;
	border-radius: 999px;
	background: var(--tgm-accent);
	color: var(--tgm-accent-contrast);
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.tgm-donate:hover {
	text-decoration: none;
	filter: brightness(1.08);
}

.tgm-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: var(--tgm-tap);
	height: var(--tgm-tap);
	border-radius: 999px;
	border: 0;
	background: var(--tgm-well);
	color: var(--tgm-accent-deep);
	font-size: 22px;
	cursor: pointer;
}

/* Scheme toggle shows whichever icon it will switch *to*. */
.tgm-scheme__to-dark {
	display: inline-block;
}

.tgm-scheme__to-light {
	display: none;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-tgm-scheme="light"]) .tgm-scheme__to-dark {
		display: none;
	}

	:root:not([data-tgm-scheme="light"]) .tgm-scheme__to-light {
		display: inline-block;
	}
}

:root[data-tgm-scheme="dark"] .tgm-scheme__to-dark {
	display: none;
}

:root[data-tgm-scheme="dark"] .tgm-scheme__to-light {
	display: inline-block;
}

:root[data-tgm-scheme="light"] .tgm-scheme__to-dark {
	display: inline-block;
}

:root[data-tgm-scheme="light"] .tgm-scheme__to-light {
	display: none;
}

/* ---- Search drawer ---- */

.tgm-search-drawer {
	display: none;
	border-top: 1px solid var(--tgm-rule);
	background: var(--tgm-paper-sunken);
	padding-block: 18px;
}

.tgm-search-drawer[data-open="true"] {
	display: block;
}

.tgm-search-form {
	display: flex;
	gap: 10px;
	align-items: center;
}

.tgm-search-field {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

.tgm-search-form input[type="search"] {
	width: 100%;
	min-height: var(--tgm-tap);
	padding: 0 16px;
	border: 1px solid var(--tgm-rule-strong);
	border-radius: 9px;
	background: var(--tgm-paper-raised);
	color: var(--tgm-ink);
	font-family: inherit;
	font-size: 17px;
}

/* ---- Typeahead ---- */

.tgm-suggest {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 40;
	margin: 0;
	padding: 6px;
	list-style: none;
	max-height: min(60vh, 420px);
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 1px solid var(--tgm-rule-strong);
	border-radius: var(--tgm-radius);
	background: var(--tgm-paper-raised);
	box-shadow: 0 18px 40px -22px rgba(48, 34, 70, 0.55);
}

.tgm-suggest[hidden] {
	display: none;
}

.tgm-suggest__item {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 12px;
	border-radius: 7px;
	font-size: 16px;
	line-height: 1.4;
	color: var(--tgm-ink-body);
	cursor: pointer;
}

.tgm-suggest__item.is-active,
.tgm-suggest__item:hover {
	background: var(--tgm-well);
	color: var(--tgm-ink);
}

.tgm-suggest__item--correction {
	border-top: 1px solid var(--tgm-rule);
	margin-top: 4px;
	padding-top: 12px;
	border-radius: 0 0 7px 7px;
	color: var(--tgm-ink-muted);
}

.tgm-suggest__item--correction strong {
	color: var(--tgm-accent-link);
}

.tgm-search-form button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: var(--tgm-tap);
	padding: 0 20px;
	border: 0;
	border-radius: 9px;
	background: var(--tgm-accent);
	color: var(--tgm-accent-contrast);
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}

/* ---- Translate drawer ---- */

.tgm-translate-drawer {
	display: none;
	border-top: 1px solid var(--tgm-rule);
	background: var(--tgm-paper-sunken);
	padding-block: 20px;
}

.tgm-translate-drawer[data-open="true"] {
	display: block;
}

.tgm-translate__inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.tgm-translate__text {
	max-width: 52ch;
}

.tgm-translate__text .tgm-eyebrow {
	margin: 0 0 6px;
}

.tgm-translate__note {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--tgm-ink-muted);
}

/*
 * Aligned to the top rather than the centre: Google stacks its attribution
 * under the select, so centring pushed the reset button down to sit level with
 * the small print instead of the control it belongs to. Both boxes start at the
 * same line and are the same height, so they read as a pair.
 */
.tgm-translate__control {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	flex-wrap: wrap;
}

.tgm-translate__reset {
	flex: 0 0 auto;
	font-size: 15px;
}

.tgm-translate__reset[hidden] {
	display: none;
}

/*
 * Google injects its own markup here. Suppress the banner frame it pins to the
 * top of the document — it shifts the whole page down and fights the sticky
 * header — and give the select the theme's own control styling.
 */
.goog-te-banner-frame,
.skiptranslate iframe {
	display: none !important;
}

body {
	top: 0 !important;
}

#google_translate_element .goog-te-gadget {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	font-family: var(--tgm-mono);
	font-size: 10.5px;
	line-height: 1.4;
	letter-spacing: 0.04em;
	color: var(--tgm-ink-faint);
}

/*
 * The select sizes itself to its widest option otherwise, which pushed the
 * chevron hard against the right edge of the control. Fix the width and leave
 * room for the arrow.
 */
#google_translate_element select {
	width: 100%;
	max-width: 260px;
	min-height: var(--tgm-tap);
	padding: 0 40px 0 14px;
	border: 1px solid var(--tgm-rule-strong);
	border-radius: 9px;
	background-color: var(--tgm-paper-raised);
	color: var(--tgm-ink);
	font-family: var(--tgm-sans);
	font-size: 16px;
	letter-spacing: normal;
	cursor: pointer;

	/* Own chevron, so it sits where the padding says it should. */
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%236b3a99'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 18px 18px;
}

:root[data-tgm-scheme="dark"] #google_translate_element select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23c9a8f0'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
	:root:not([data-tgm-scheme="light"]) #google_translate_element select {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23c9a8f0'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
	}
}

/* Google's attribution has to stay visible; just make it quiet. */
#google_translate_element .goog-logo-link,
#google_translate_element .goog-logo-link:link,
#google_translate_element .goog-logo-link:visited {
	color: var(--tgm-ink-faint);
	text-decoration: none;
	font-size: 10.5px;
	opacity: 0.75;
}

#google_translate_element img {
	vertical-align: middle;
}

/* ---- Mobile panel ---- */

.tgm-panel {
	display: none;
	border-top: 1px solid var(--tgm-rule);
	background: var(--tgm-paper);
	max-height: min(75vh, 640px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.tgm-panel[data-open="true"] {
	display: block;
}

.tgm-panel__list,
.tgm-panel__list .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tgm-panel__list a {
	display: flex;
	align-items: center;
	min-height: var(--tgm-tap);
	padding: 10px var(--tgm-gutter);
	border-bottom: 1px solid var(--tgm-rule);
	color: var(--tgm-ink-body);
	font-size: 17px;
	text-decoration: none;
}

.tgm-panel__list a:hover {
	background: var(--tgm-paper-sunken);
}

.tgm-panel__list .sub-menu a {
	padding-left: calc(var(--tgm-gutter) + 20px);
	font-size: 16px;
	color: var(--tgm-ink-muted);
}

.tgm-panel__list .sub-menu .sub-menu a {
	padding-left: calc(var(--tgm-gutter) + 40px);
	font-size: 15px;
}

.tgm-panel__list .current-menu-item > a,
.tgm-panel__list .current-page-ancestor > a {
	color: var(--tgm-accent-link);
	font-weight: 600;
	background: var(--tgm-paper-sunken);
}

/* Translate lives in the menu on a phone; the header bar has no room for a
   fifth target at 320px. */
.tgm-panel__action {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: var(--tgm-tap);
	padding: 10px var(--tgm-gutter);
	border: 0;
	border-bottom: 1px solid var(--tgm-rule);
	background: none;
	color: var(--tgm-ink-body);
	font-family: inherit;
	font-size: 17px;
	text-align: left;
	cursor: pointer;
}

.tgm-panel__action .tgm-icon {
	color: var(--tgm-accent-icon);
	font-size: 20px;
}

.tgm-panel__action:hover {
	background: var(--tgm-paper-sunken);
}

@media (max-width: 1023px) {
	.tgm-nav__list,
	.tgm-header__divider,
	.tgm-tool--search-label,
	.tgm-donate span {
		display: none;
	}

	.tgm-burger {
		display: inline-flex;
	}

	.tgm-donate {
		width: var(--tgm-tap);
		height: var(--tgm-tap);
		padding: 0;
		justify-content: center;
		background: none;
		color: var(--tgm-accent-icon);
		font-size: 21px;
	}

	.tgm-tool--round {
		width: var(--tgm-tap);
		height: var(--tgm-tap);
		border-color: transparent;
		font-size: 21px;
	}

	.tgm-tool--search {
		justify-content: center;
		width: var(--tgm-tap);
		height: var(--tgm-tap);
		font-size: 21px;
	}

	.tgm-header__tools {
		gap: 0;
	}

	.tgm-brand__by {
		display: none;
	}

	.tgm-brand__name {
		font-size: 18px;
	}

	.tgm-brand__mark {
		width: 30px;
		height: 30px;
	}

	/*
	 * The light/dark switch moves into the menu; search, translate, support and
	 * the menu stay in the bar. Five targets alongside the wordmark truncated it
	 * to "Transgender…", and translate is the one people go looking for.
	 */
	.tgm-tool--scheme {
		display: none;
	}

	.tgm-header__inner {
		gap: 10px;
	}

	.tgm-brand {
		flex: 1 1 auto;
		min-width: 0;
	}

	.tgm-brand__text {
		min-width: 0;
	}

	.tgm-brand__name {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tgm-nav {
		flex: 0 0 auto;
		gap: 0;
	}
}

/* Small phones: tighten the gutter and step the targets to 44px, still above
   the 44px minimum, so the wordmark keeps enough room to read. */
@media (max-width: 420px) {
	:root {
		--tgm-gutter: 16px;
		--tgm-tap: 44px;
	}

	.tgm-brand__mark {
		width: 26px;
		height: 26px;
	}

	.tgm-brand__name {
		font-size: 17px;
	}
}

/* At 320px the wordmark was still a dozen pixels short of fitting whole. */
@media (max-width: 360px) {
	.tgm-brand__mark {
		width: 24px;
		height: 24px;
	}

	.tgm-brand__name {
		font-size: 16px;
	}
}

/* ==========================================================================
   4. Breadcrumb
   ========================================================================== */

.tgm-breadcrumb {
	border-bottom: 1px solid var(--tgm-rule);
	background: var(--tgm-paper-sunken);
}

.tgm-breadcrumb__inner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 9px;
	padding-block: 11px;
	font-family: var(--tgm-mono);
	font-size: 11.5px;
	letter-spacing: 0.06em;
	color: var(--tgm-ink-soft);
}

.tgm-breadcrumb__inner a {
	color: inherit;
	text-decoration: none;
}

.tgm-breadcrumb__inner a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tgm-breadcrumb__sep {
	color: var(--tgm-ink-mono);
	opacity: 0.7;
}

.tgm-breadcrumb__current {
	color: var(--tgm-ink-mono);
}

/* ==========================================================================
   5. Homepage
   ========================================================================== */

.tgm-hero {
	padding-block: clamp(20px, 2.6vw, 32px) 8px;
}

.tgm-badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 6px 12px 6px 10px;
	border: 1px solid var(--tgm-rule-accent);
	border-radius: 999px;
	background: var(--tgm-paper-sunken);
	font-size: 13px;
	color: var(--tgm-ink-soft);
	/* Zero the top margin: this is a <p>, and the UA default was stacking on
	   top of the hero padding and opening a hole under the header. */
	margin: 0 0 26px;
}

.tgm-badge__dot {
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--tgm-status);
	flex: 0 0 auto;
}

.tgm-hero__title {
	margin: 0 0 22px;
	font-size: clamp(37px, 6vw, 60px);
	line-height: 1.06;
	letter-spacing: -0.022em;
}

.tgm-hero__lede {
	max-width: var(--tgm-measure);
	font-size: clamp(17px, 2.2vw, 19px);
	line-height: 1.62;
	color: var(--tgm-ink-body);
}

.tgm-hero__lede > * {
	margin: 0 0 18px;
}

.tgm-hero__lede > *:last-child {
	margin-bottom: 0;
}

/* ---- The four doors ---- */

.tgm-doors {
	padding-block: clamp(28px, 5vw, 44px) 0;
}

.tgm-doors__intro {
	margin: 0 0 22px;
	font-size: clamp(17px, 2.2vw, 19px);
	line-height: 1.6;
	color: var(--tgm-ink-body);
}

.tgm-doors__list {
	border-top: 1px solid var(--tgm-rule);
}

.tgm-door {
	display: grid;
	grid-template-columns: 62px 1fr 24px;
	align-items: center;
	gap: 22px;
	padding: 22px 6px;
	border-bottom: 1px solid var(--tgm-rule);
	text-decoration: none;
	color: inherit;
}

.tgm-door:hover {
	background: var(--tgm-paper-sunken);
	text-decoration: none;
}

.tgm-door__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	border-radius: 999px;
	background: var(--tgm-well);
	color: var(--tgm-accent-deep);
	font-size: 30px;
}

.tgm-door__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.tgm-door__title {
	font-family: var(--tgm-serif);
	font-size: clamp(21px, 3vw, 25px);
	color: var(--tgm-ink);
}

.tgm-door__desc {
	font-size: clamp(15px, 2vw, 17px);
	line-height: 1.45;
	color: var(--tgm-ink-muted);
}

.tgm-door__arrow {
	color: var(--tgm-accent-icon);
	font-size: 22px;
}

@media (max-width: 782px) {
	.tgm-door {
		grid-template-columns: 48px 1fr 18px;
		gap: 15px;
		padding: 16px 0;
	}

	.tgm-door__icon {
		width: 48px;
		height: 48px;
		font-size: 25px;
	}

	.tgm-door__arrow {
		font-size: 18px;
	}
}

.tgm-doors__outro {
	margin: 26px 0 0;
	font-size: clamp(15.5px, 2vw, 17px);
	line-height: 1.6;
	color: var(--tgm-ink-soft);
}

/* ---- Guidance row ---- */

.tgm-guidance {
	margin-top: clamp(32px, 5vw, 52px);
}

.tgm-guidance__box {
	border: 1px solid var(--tgm-rule);
	border-radius: var(--tgm-radius);
	background: var(--tgm-paper-raised);
	padding: 26px 28px;
}

.tgm-guidance__label {
	margin-bottom: 18px;
}

.tgm-guidance__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.tgm-chip {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 15px;
	border: 1px solid var(--tgm-rule-strong);
	border-radius: 999px;
	font-size: 16px;
	color: var(--tgm-ink-body);
	text-decoration: none;
}

.tgm-chip:hover {
	background: var(--tgm-paper-sunken);
	border-color: var(--tgm-accent);
	text-decoration: none;
}

.tgm-chip .tgm-icon {
	color: var(--tgm-accent-icon);
	font-size: 19px;
}

@media (max-width: 782px) {
	.tgm-guidance__box {
		border: 0;
		padding: 0;
		background: none;
	}

	.tgm-guidance__list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}

	.tgm-chip {
		min-height: var(--tgm-tap);
		padding: 0 14px;
		border-radius: var(--tgm-radius);
		font-size: 15.5px;
	}

	.tgm-chip:last-child:nth-child(odd) {
		grid-column: span 2;
	}
}

/* ==========================================================================
   6. Article / topic template
   ========================================================================== */

.tgm-layout {
	display: grid;
	grid-template-columns: 232px minmax(0, 1fr);
	max-width: var(--tgm-shell);
	margin-inline: auto;
	padding-inline: var(--tgm-gutter);
}

.tgm-layout--wide {
	grid-template-columns: minmax(0, 1fr);
}

.tgm-rail {
	padding: 44px 28px 44px 0;
	border-right: 1px solid var(--tgm-rule);
}

.tgm-rail__inner {
	position: sticky;
	top: calc(var(--tgm-header-h) + 24px);
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.tgm-toc {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

/* Long pages here run to twenty sections; let the rail scroll rather than push
   the review date and section link off screen. */
.tgm-rail .tgm-toc {
	max-height: calc(100vh - var(--tgm-header-h) - 260px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.tgm-toc a {
	padding: 7px 12px;
	border-radius: 7px;
	font-size: 14.5px;
	color: var(--tgm-ink-muted);
	text-decoration: none;
	line-height: 1.4;
}

.tgm-toc a:hover {
	background: var(--tgm-paper-sunken);
}

.tgm-toc a[aria-current="true"] {
	background: var(--tgm-well);
	font-weight: 600;
	color: var(--tgm-accent-deep);
}

.tgm-rail__meta {
	padding-top: 16px;
	border-top: 1px solid var(--tgm-rule);
	font-family: var(--tgm-mono);
	font-size: 11px;
	line-height: 1.7;
	color: var(--tgm-ink-faint);
}

.tgm-rail__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 13px;
	border: 1px solid var(--tgm-rule-strong);
	border-radius: 8px;
	background: var(--tgm-paper-raised);
	font-size: 14px;
	color: var(--tgm-ink-body);
	width: fit-content;
	text-decoration: none;
}

.tgm-rail__link:hover {
	border-color: var(--tgm-accent);
	text-decoration: none;
}

.tgm-rail__link .tgm-icon {
	color: var(--tgm-accent-icon);
	font-size: 16px;
}

.tgm-main {
	padding: 44px 0 56px 44px;
	min-width: 0;
}

.tgm-layout--wide .tgm-main {
	padding-left: 0;
}

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

.tgm-layout--wide .tgm-article {
	max-width: none;
}

.tgm-article__title {
	margin: 0 0 14px;
	font-size: clamp(33px, 5vw, 46px);
	line-height: 1.08;
	letter-spacing: -0.022em;
}

.tgm-article__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 14px;
	margin-bottom: 30px;
	font-family: var(--tgm-mono);
	font-size: 11.5px;
	letter-spacing: 0.06em;
	color: var(--tgm-ink-faint);
}

.tgm-article__meta a {
	color: inherit;
	text-decoration: none;
}

.tgm-article__meta a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tgm-article__meta-sep {
	color: var(--tgm-ink-mono);
	opacity: 0.6;
}

/* Collapsible TOC shown in place of the rail on narrow screens. */
.tgm-toc-toggle {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: var(--tgm-tap);
	padding: 0 16px;
	margin-bottom: 22px;
	border: 1px solid var(--tgm-rule-strong);
	border-radius: var(--tgm-radius);
	background: var(--tgm-paper-raised);
	color: var(--tgm-ink-body);
	font-family: inherit;
	font-size: 15px;
	cursor: pointer;
}

.tgm-toc-toggle .tgm-icon {
	color: var(--tgm-accent-icon);
	font-size: 18px;
	transition: transform 0.15s ease;
}

.tgm-toc-toggle[aria-expanded="true"] .tgm-icon {
	transform: rotate(180deg);
}

.tgm-toc-inline {
	display: none;
	margin: -8px 0 24px;
	padding: 4px 0 0;
}

.tgm-toc-inline[data-open="true"] {
	display: block;
}

/* ---- Content ---- */

.tgm-content {
	font-size: clamp(17px, 2.3vw, 18.5px);
	line-height: 1.68;
	color: var(--tgm-ink-body);
}

.tgm-content > *:first-child {
	margin-top: 0;
}

.tgm-content p {
	margin: 0 0 20px;
}

/* The first paragraph acts as a standfirst so a reader can decide in five
   seconds whether this is the page they need. */
.tgm-content > p:first-of-type {
	font-size: clamp(19px, 2.6vw, 21px);
	line-height: 1.55;
	color: var(--tgm-ink);
	margin-bottom: 22px;
}

/*
 * This site writes its sections as h3, so h3 carries the design's section
 * heading treatment — serif, 30px, generous space above. h2 sits one step
 * larger for the handful of pages that use both.
 */
.tgm-content h2 {
	margin: 38px 0 14px;
	font-size: clamp(27px, 4vw, 34px);
	line-height: 1.18;
	letter-spacing: -0.018em;
	scroll-margin-top: calc(var(--tgm-header-h) + 16px);
}

.tgm-content h3 {
	margin: 34px 0 14px;
	font-size: clamp(25px, 3.6vw, 30px);
	line-height: 1.2;
	letter-spacing: -0.015em;
	scroll-margin-top: calc(var(--tgm-header-h) + 16px);
}

.tgm-content h4 {
	margin: 26px 0 10px;
	font-size: clamp(19px, 2.6vw, 22px);
	scroll-margin-top: calc(var(--tgm-header-h) + 16px);
}

.tgm-content ul,
.tgm-content ol {
	margin: 0 0 20px;
	padding-left: 0;
	list-style: none;
}

.tgm-content ol {
	counter-reset: tgm-ol;
}

.tgm-content li {
	position: relative;
	padding-left: 31px;
	margin-bottom: 11px;
}

/* List items use a purple dot rather than a browser bullet, and wrap on the
   same indent. */
.tgm-content ul > li::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 0.62em;
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--tgm-accent-icon);
}

.tgm-content ol > li {
	counter-increment: tgm-ol;
}

.tgm-content ol > li::before {
	content: counter(tgm-ol) ".";
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--tgm-mono);
	font-size: 0.82em;
	color: var(--tgm-accent-icon);
	font-weight: 500;
}

.tgm-content li > ul,
.tgm-content li > ol {
	margin-top: 11px;
	margin-bottom: 0;
}

.tgm-content a {
	color: var(--tgm-accent-link);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tgm-content blockquote {
	margin: 26px 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var(--tgm-accent-icon);
	color: var(--tgm-ink-muted);
	font-style: italic;
}

.tgm-content blockquote p:last-child {
	margin-bottom: 0;
}

.tgm-content img {
	border-radius: var(--tgm-radius);
	height: auto;
}

.tgm-content figure {
	margin: 26px 0;
}

.tgm-content figcaption {
	margin-top: 10px;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--tgm-ink-faint);
}

.tgm-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 24px;
	font-size: 16px;
}

.tgm-content th,
.tgm-content td {
	padding: 11px 12px;
	border-bottom: 1px solid var(--tgm-rule);
	text-align: left;
	vertical-align: top;
}

.tgm-content th {
	font-family: var(--tgm-mono);
	font-size: 11.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tgm-ink-mono);
	font-weight: 500;
}

.tgm-content pre {
	overflow-x: auto;
	padding: 18px 20px;
	border-radius: var(--tgm-radius);
	background: var(--tgm-paper-tint);
	font-family: var(--tgm-mono);
	font-size: 14.5px;
	line-height: 1.6;
}

.tgm-content code {
	font-family: var(--tgm-mono);
	font-size: 0.88em;
}

/* Core's separator block is a short centred stub; overriding its margins alone
   left it as a ragged left-aligned dash, so reset the width too. */
.tgm-content hr,
.tgm-content .wp-block-separator {
	width: 100%;
	max-width: none;
	height: 0;
	margin: 34px 0;
	border: 0;
	border-top: 1px solid var(--tgm-rule);
	opacity: 1;
}

/* Wide tables and embeds must scroll inside their own box, never the page. */
.tgm-table-scroll {
	overflow-x: auto;
	margin-bottom: 24px;
}

.tgm-table-scroll table {
	margin-bottom: 0;
}

/* A callout for the one thing on the page a reader must not miss. Bordered and
   tinted rather than shouty, so it can be used more than once on long pages. */
.tgm-callout {
	border: 1px solid var(--tgm-rule-accent);
	border-radius: var(--tgm-radius);
	background: var(--tgm-paper-tint);
	padding: 22px 24px;
	margin: 0 0 22px;
}

.tgm-callout__label {
	font-family: var(--tgm-mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tgm-ink-soft);
	margin-bottom: 10px;
}

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

/* ---- Support prompt + related ---- */

.tgm-support {
	margin-top: 40px;
	padding: 20px 24px;
	border: 1px solid var(--tgm-rule-strong);
	border-radius: var(--tgm-radius);
	background: var(--tgm-paper-raised);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.tgm-support__ask {
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: 17px;
	color: var(--tgm-ink-body);
}

.tgm-support__ask .tgm-icon {
	color: var(--tgm-accent-icon);
	font-size: 20px;
}

.tgm-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: var(--tgm-tap);
	padding: 0 20px;
	border-radius: 9px;
	background: var(--tgm-accent);
	color: var(--tgm-accent-contrast);
	font-size: 15.5px;
	font-weight: 600;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	font-family: inherit;
}

.tgm-button:hover {
	text-decoration: none;
	filter: brightness(1.08);
}

.tgm-button--ghost {
	background: var(--tgm-paper-raised);
	color: var(--tgm-ink-body);
	border: 1px solid var(--tgm-rule-strong);
}

.tgm-button--ghost .tgm-icon {
	color: var(--tgm-accent-icon);
}

@media (max-width: 640px) {
	.tgm-support {
		flex-direction: column;
		align-items: stretch;
	}

	.tgm-support .tgm-button {
		width: 100%;
	}
}

.tgm-related {
	margin-top: 44px;
}

.tgm-related__label {
	margin-bottom: 14px;
}

.tgm-related__list {
	border-top: 1px solid var(--tgm-rule);
}

.tgm-related__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: var(--tgm-tap);
	padding: 15px 2px;
	border-bottom: 1px solid var(--tgm-rule);
	font-size: 17.5px;
	color: var(--tgm-ink-body);
	text-decoration: none;
}

.tgm-related__item:hover {
	color: var(--tgm-accent-link);
	text-decoration: none;
}

.tgm-related__item .tgm-icon {
	color: var(--tgm-accent-icon);
	font-size: 18px;
}

@media (max-width: 1023px) {
	.tgm-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.tgm-rail {
		display: none;
	}

	.tgm-main {
		padding: 28px 0 48px;
	}

	.tgm-toc-toggle {
		display: flex;
	}

	.tgm-article {
		max-width: none;
	}
}

/* ==========================================================================
   7. Section hub
   ========================================================================== */

.tgm-hub-head {
	background: var(--tgm-paper-sunken);
	border-bottom: 1px solid var(--tgm-rule);
}

.tgm-hub-head__inner {
	padding-block: clamp(32px, 5vw, 46px) clamp(28px, 4vw, 40px);
}

.tgm-hub-head__label {
	margin-bottom: 14px;
	color: var(--tgm-ink-soft);
}

.tgm-hub-head__title {
	margin: 0 0 16px;
	font-size: clamp(36px, 6vw, 52px);
	line-height: 1.06;
	letter-spacing: -0.022em;
}

.tgm-hub-head__intro {
	margin: 0;
	max-width: 620px;
	font-size: clamp(17px, 2.4vw, 20px);
	line-height: 1.6;
	color: var(--tgm-ink-body);
}

.tgm-hub-body {
	padding-block: clamp(28px, 4vw, 40px);
}

/* Two columns, as the design has it: four topic cards fill two clean rows and
   the directory spans the third. An auto-fit grid gave three columns and left
   an orphan gap next to the last topic. */
.tgm-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

@media (max-width: 720px) {
	.tgm-cards {
		grid-template-columns: 1fr;
	}
}

.tgm-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 26px;
	border: 1px solid var(--tgm-rule-strong);
	border-radius: var(--tgm-radius-lg);
	background: var(--tgm-paper-raised);
	color: inherit;
}

.tgm-card:hover,
.tgm-card:focus-within {
	border-color: var(--tgm-accent);
	background: var(--tgm-paper-tint);
}

.tgm-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 999px;
	background: var(--tgm-well);
	color: var(--tgm-accent-deep);
	font-size: 27px;
	flex: 0 0 auto;
}

.tgm-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.tgm-card__title {
	margin: 0;
	font-family: var(--tgm-serif);
	font-size: clamp(23px, 3vw, 27px);
	line-height: 1.2;
	color: var(--tgm-ink);
}

.tgm-card__link {
	color: inherit;
	text-decoration: none;
}

.tgm-card__link:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1.5px;
}

/* Stretch the title link over the whole card so the card is one big target,
   without nesting anchors inside an anchor. */
.tgm-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.tgm-card__desc {
	margin: 0;
	font-size: 16.5px;
	line-height: 1.55;
	color: var(--tgm-ink-muted);
}

/* Sub-links are what stop a hub being a dead end: a reader can jump two levels
   deep without loading the intermediate page. They must sit above the stretched
   title link to stay clickable. */
.tgm-card__links {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	padding: 4px 0 0;
	margin: 0;
	list-style: none;
	font-size: 15px;
}

.tgm-card__links a {
	color: var(--tgm-accent-link);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* An odd number of topic cards leaves a hole beside the last one — either at
   the end of the grid, or just above a full-width directory card. Let it take
   the whole row so the grid never reads as unfinished. */
.tgm-card:not(.tgm-card--wide):nth-child(odd):last-child,
.tgm-card:not(.tgm-card--wide):nth-child(odd):nth-last-child(2):has(+ .tgm-card--wide) {
	grid-column: 1 / -1;
}

/* A directory behaves differently from a topic, so it spans the full row. */
.tgm-card--wide {
	grid-column: 1 / -1;
	flex-direction: row;
	align-items: center;
	gap: 22px;
	padding: 24px 26px;
}

.tgm-card--wide .tgm-card__arrow {
	margin-left: auto;
	color: var(--tgm-accent-icon);
	font-size: 22px;
	flex: 0 0 auto;
}

@media (max-width: 560px) {
	.tgm-card--wide {
		flex-direction: column;
		align-items: flex-start;
	}

	.tgm-card--wide .tgm-card__arrow {
		margin-left: 0;
	}
}

/* A hub's own body copy, when it has any, sits under the cards on the article
   measure rather than the full hub width. */
.tgm-hub-note {
	max-width: var(--tgm-measure);
	margin-top: 40px;
}

.tgm-hub-note > p:first-of-type {
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.tgm-hub-cta {
	margin-top: 34px;
	padding: 26px 28px;
	border: 1px solid var(--tgm-rule-accent);
	border-radius: var(--tgm-radius-lg);
	background: var(--tgm-paper-tint);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 26px;
	flex-wrap: wrap;
}

.tgm-hub-cta__text {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.tgm-hub-cta__title {
	font-family: var(--tgm-serif);
	font-size: 24px;
	color: var(--tgm-ink);
}

.tgm-hub-cta__desc {
	font-size: 16.5px;
	color: var(--tgm-ink-muted);
}

.tgm-hub-cta__actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

/* ==========================================================================
   8. Lists (archive, search)
   ========================================================================== */

.tgm-list {
	border-top: 1px solid var(--tgm-rule);
	margin-top: 8px;
}

.tgm-list__item {
	padding: 22px 0;
	border-bottom: 1px solid var(--tgm-rule);
}

.tgm-list__title {
	margin: 0 0 6px;
	font-size: clamp(21px, 3vw, 25px);
	line-height: 1.25;
}

.tgm-list__title a {
	color: var(--tgm-ink);
	text-decoration: none;
}

.tgm-list__title a:hover {
	color: var(--tgm-accent-link);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.tgm-list__meta {
	font-family: var(--tgm-mono);
	font-size: 11.5px;
	letter-spacing: 0.06em;
	color: var(--tgm-ink-faint);
	margin-bottom: 8px;
}

.tgm-list__excerpt {
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--tgm-ink-muted);
}

.tgm-search-again {
	max-width: var(--tgm-measure);
	margin-bottom: 8px;
}

.tgm-search-notice {
	display: flex;
	align-items: center;
	gap: 11px;
	max-width: var(--tgm-measure);
	margin: 0 0 18px;
	padding: 14px 18px;
	border: 1px solid var(--tgm-rule-accent);
	border-radius: var(--tgm-radius);
	background: var(--tgm-paper-tint);
	font-size: 17px;
	line-height: 1.5;
	color: var(--tgm-ink-body);
}

.tgm-search-notice .tgm-icon {
	color: var(--tgm-accent-icon);
	font-size: 20px;
}

.tgm-search-notice strong {
	color: var(--tgm-ink);
}

.tgm-search-empty {
	max-width: var(--tgm-measure);
	margin: 8px 0 24px;
	font-size: 18px;
	line-height: 1.6;
	color: var(--tgm-ink-muted);
}

.tgm-did-you-mean {
	display: flex;
	align-items: center;
	gap: 11px;
	max-width: var(--tgm-measure);
	margin: 0 0 18px;
	padding: 14px 18px;
	border: 1px solid var(--tgm-rule-accent);
	border-radius: var(--tgm-radius);
	background: var(--tgm-paper-tint);
	font-size: 17px;
	color: var(--tgm-ink-body);
}

.tgm-did-you-mean .tgm-icon {
	color: var(--tgm-accent-icon);
	font-size: 20px;
}

.tgm-did-you-mean a {
	font-weight: 700;
	color: var(--tgm-accent-link);
}

.tgm-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 32px;
}

.tgm-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--tgm-tap);
	min-height: var(--tgm-tap);
	padding: 0 14px;
	border: 1px solid var(--tgm-rule-strong);
	border-radius: 9px;
	color: var(--tgm-ink-body);
	text-decoration: none;
	font-size: 16px;
}

.tgm-pagination .page-numbers:hover {
	border-color: var(--tgm-accent);
}

.tgm-pagination .page-numbers.current {
	background: var(--tgm-accent);
	border-color: var(--tgm-accent);
	color: var(--tgm-accent-contrast);
	font-weight: 600;
}

/* Children of a page, listed at the foot of a hub-less parent. */
.tgm-children {
	margin-top: 44px;
}

/* ==========================================================================
   9. Footer
   ========================================================================== */

.tgm-footer {
	margin-top: clamp(36px, 6vw, 54px);
	border-top: 1px solid var(--tgm-rule);
	background: var(--tgm-paper-sunken);
}

.tgm-footer__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	flex-wrap: wrap;
	padding-block: 30px;
}

.tgm-footer__ask {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 17px;
	color: var(--tgm-ink-body);
}

.tgm-footer__ask .tgm-icon {
	color: var(--tgm-accent-icon);
	font-size: 20px;
}

.tgm-footer__ask a {
	font-weight: 700;
	color: var(--tgm-accent-link);
}

.tgm-footer__meta {
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
	font-size: 13.5px;
	color: var(--tgm-ink-faint);
}

.tgm-footer__meta a {
	color: inherit;
	text-decoration: none;
}

.tgm-footer__meta a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 782px) {
	.tgm-footer__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.tgm-footer__meta {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		font-family: var(--tgm-mono);
		font-size: 11px;
		line-height: 1.7;
		letter-spacing: 0.04em;
	}
}

/* ==========================================================================
   10. 404 + empty states
   ========================================================================== */

.tgm-notice {
	padding-block: clamp(40px, 8vw, 80px);
	max-width: var(--tgm-measure);
}

.tgm-notice__title {
	margin: 0 0 16px;
	font-size: clamp(30px, 5vw, 44px);
	line-height: 1.1;
}

.tgm-notice__body {
	font-size: 18px;
	line-height: 1.65;
	color: var(--tgm-ink-muted);
}

.tgm-notice__actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 26px;
}

/* ==========================================================================
   11. Print
   ========================================================================== */

@media print {
	.tgm-header,
	.tgm-footer,
	.tgm-rail,
	.tgm-support,
	.tgm-related,
	.tgm-breadcrumb,
	.tgm-toc-toggle,
	.tgm-panel,
	.tgm-search-drawer {
		display: none !important;
	}

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

	.tgm-layout {
		grid-template-columns: 1fr;
	}

	.tgm-main {
		padding: 0;
	}

	.tgm-content a::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
		word-break: break-all;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}