/*
 * Giuseppe Maccario 2026 — main stylesheet.
 *
 * 1. Fonts
 * 2. Tokens (shared, light theme, dark theme)
 * 3. Base
 * 4. Typography
 * 5. Accessibility helpers
 * 6. Layout primitives
 * 7. Forms and buttons
 * 8. Article content (.gm-prose): core blocks
 * 9. Header
 * 10. Footer
 * 11. Templates (page headers, articles, lists, comments, search, 404)
 * 11b. Hero (point-field canvas)
 * 11c. Homepage sections
 * 12. Reduced motion
 *
 * Theme switching: light by default, dark when the visitor's system asks for it,
 * and <html data-theme="light|dark"> overrides both (set by the theme switcher, step 2.4b).
 */

/* 1. Fonts — self-hosted, latin subset, SIL Open Font License (see assets/fonts/LICENSE-*.txt)
   ========================================================================== */

@font-face {
	font-family: "Archivo";
	src: url("../fonts/archivo-wdth-normal.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "JetBrains Mono";
	src: url("../fonts/jetbrains-mono-wght-normal.woff2") format("woff2");
	font-weight: 100 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Source Serif 4";
	src: url("../fonts/source-serif-4-wght-normal.woff2") format("woff2");
	font-weight: 200 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Source Serif 4";
	src: url("../fonts/source-serif-4-wght-italic.woff2") format("woff2");
	font-weight: 200 900;
	font-style: italic;
	font-display: swap;
}

/* 2. Tokens
   ========================================================================== */

:root {
	/* Families */
	--gm-font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
	--gm-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	--gm-font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

	/* Fluid type scale: phone → wide desktop */
	--gm-step--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
	--gm-step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
	--gm-step-1: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
	--gm-step-2: clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem);
	--gm-step-3: clamp(1.75rem, 1.4rem + 1.8vw, 2.75rem);
	--gm-step-4: clamp(2.25rem, 1.6rem + 3.2vw, 4rem);
	--gm-step-5: clamp(2.75rem, 1.6rem + 5.8vw, 6rem);
	--gm-step-6: clamp(3.25rem, 1.5rem + 8.6vw, 8.25rem);

	/* Spacing */
	--gm-space-2xs: 0.25rem;
	--gm-space-xs: 0.5rem;
	--gm-space-s: 1rem;
	--gm-space-m: 1.5rem;
	--gm-space-l: 2.5rem;
	--gm-space-xl: 4rem;
	--gm-space-2xl: clamp(4rem, 3rem + 5vw, 7rem);
	--gm-space-3xl: clamp(5rem, 3rem + 8vw, 9rem);

	/* Layout */
	--gm-gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
	--gm-container: 85rem;
	--gm-measure: 68ch;
	--gm-wide: 64rem;
	--gm-radius: 2px;

	/* Motion */
	--gm-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--gm-duration: 0.2s;
}

/* Light theme (default) */
:root,
:root[data-theme="light"] {
	color-scheme: light;
	--gm-bg: #F5F6F3;
	--gm-panel: #ECEEF2;
	--gm-code-bg: #E9ECF1;
	--gm-fg: #0B1220;
	--gm-soft: #3A4457;
	--gm-dim: #566074;
	--gm-line: #D8DCE3;
	--gm-border-input: #7A8396;
	--gm-accent: #1F4FD8;
	--gm-error: #B42318;
	--gm-on-accent: #FFFFFF;
	--gm-marquee: #C9CFDA;
	/* For the hero canvas (rgb triplets, used with alpha) */
	--gm-dot-rgb: 11, 18, 32;
	--gm-accent-rgb: 31, 79, 216;
	--gm-hero-line-alpha: 0.3;
}

/* Dark theme: when the system asks for it, unless the visitor picked light */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--gm-bg: #070B14;
		--gm-panel: #0D1424;
		--gm-code-bg: #0F1729;
		--gm-fg: #E9EDF5;
		--gm-soft: #B7C0D1;
		--gm-dim: #8B95A8;
		--gm-line: #1A2336;
		--gm-border-input: #56627E;
		--gm-accent: #4C86FF;
		--gm-error: #FF8A80;
		--gm-on-accent: #070B14;
		--gm-marquee: #2A3550;
		--gm-dot-rgb: 233, 237, 245;
		--gm-accent-rgb: 76, 134, 255;
		--gm-hero-line-alpha: 0.24;
	}
}

/* Dark theme: picked explicitly by the visitor */
:root[data-theme="dark"] {
	color-scheme: dark;
	--gm-bg: #070B14;
	--gm-panel: #0D1424;
	--gm-code-bg: #0F1729;
	--gm-fg: #E9EDF5;
	--gm-soft: #B7C0D1;
	--gm-dim: #8B95A8;
	--gm-line: #1A2336;
	--gm-border-input: #56627E;
	--gm-accent: #4C86FF;
	--gm-error: #FF8A80;
	--gm-on-accent: #070B14;
	--gm-marquee: #2A3550;
	--gm-dot-rgb: 233, 237, 245;
	--gm-accent-rgb: 76, 134, 255;
	--gm-hero-line-alpha: 0.24;
}

/* 3. Base
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: 5rem;
}

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

body {
	margin: 0;
	min-height: 100vh;
	background-color: var(--gm-bg);
	color: var(--gm-fg);
	font-family: var(--gm-font-sans);
	font-size: var(--gm-step-0);
	line-height: 1.6;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transition: background-color 0.3s ease, color 0.3s ease;
}

img,
svg,
video,
canvas,
iframe {
	display: block;
	max-width: 100%;
}

img,
video {
	height: auto;
}

figure {
	margin: 0;
}

hr {
	height: 0;
	margin: var(--gm-space-l) 0;
	border: 0;
	border-top: 1px solid var(--gm-line);
}

::selection {
	background-color: var(--gm-accent);
	color: var(--gm-on-accent);
}

/* 4. Typography
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-family: var(--gm-font-sans);
	font-stretch: 108%;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

h1 { font-size: var(--gm-step-5); letter-spacing: -0.035em; }
h2 { font-size: var(--gm-step-3); }
h3 { font-size: var(--gm-step-2); line-height: 1.15; letter-spacing: -0.015em; }
h4 { font-size: var(--gm-step-1); line-height: 1.25; letter-spacing: -0.01em; }
h5,
h6 { font-size: var(--gm-step-0); line-height: 1.3; letter-spacing: 0; }

p {
	margin: 0;
	text-wrap: pretty;
}

a {
	color: var(--gm-accent);
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--gm-duration) ease, text-decoration-thickness var(--gm-duration) ease;
}

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

strong,
b {
	font-weight: 700;
}

small {
	font-size: var(--gm-step--1);
}

code,
kbd,
samp,
pre {
	font-family: var(--gm-font-mono);
	font-size: 0.875em;
	/* No programming ligatures: "->" must stay "->" in PHP code, not become an arrow */
	font-variant-ligatures: none;
	font-feature-settings: "liga" 0, "calt" 0;
}

kbd {
	padding: 0.1em 0.4em;
	border: 1px solid var(--gm-border-input);
	border-radius: var(--gm-radius);
}

/* Small mono label used across the site: section numbers, dates, metadata */
.gm-label {
	margin: 0;
	font-family: var(--gm-font-mono);
	font-size: var(--gm-step--1);
	font-weight: 400;
	letter-spacing: 0.02em;
	color: var(--gm-dim);
	text-transform: uppercase;
}

/* 5. Accessibility helpers
   ========================================================================== */

:focus {
	outline: none;
}

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

/* WordPress core class: visually hidden, still read by screen readers */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	z-index: 100000;
	top: var(--gm-space-xs);
	left: var(--gm-space-xs);
	width: auto;
	height: auto;
	padding: var(--gm-space-s) var(--gm-space-m);
	clip: auto;
	background-color: var(--gm-fg);
	color: var(--gm-bg);
	font-size: var(--gm-step-0);
	text-decoration: none;
}

.skip-link {
	position: absolute;
	z-index: 100000;
	top: var(--gm-space-xs);
	left: var(--gm-space-xs);
	padding: var(--gm-space-s) var(--gm-space-m);
	background-color: var(--gm-accent);
	color: var(--gm-on-accent);
	font-weight: 700;
	text-decoration: none;
	transform: translateY(-200%);
}

.skip-link:focus {
	transform: none;
}

/* 6. Layout primitives
   ========================================================================== */

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

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

/* Vertical rhythm for stacked content */
.gm-flow > * + * {
	margin-block-start: var(--gm-flow-space, 1em);
}

.gm-rule {
	border-top: 1px solid var(--gm-line);
}

/* 7. Forms and buttons
   ========================================================================== */

input,
textarea,
select,
button {
	font: inherit;
	color: inherit;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea,
select {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.625rem 0.875rem;
	border: 1px solid var(--gm-border-input);
	border-radius: var(--gm-radius);
	background-color: var(--gm-panel);
	color: var(--gm-fg);
}

textarea {
	min-height: 10rem;
	resize: vertical;
}

input::placeholder,
textarea::placeholder {
	color: var(--gm-dim);
	opacity: 1;
}

label {
	display: inline-block;
	margin-block-end: var(--gm-space-2xs);
	font-weight: 600;
}

/* Primary button: also used for core button blocks (section 8) */
.gm-button,
button[type="submit"],
input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--gm-space-xs);
	min-height: 3rem;
	padding: 0 1.5rem;
	border: 1px solid var(--gm-accent);
	border-radius: var(--gm-radius);
	background-color: var(--gm-accent);
	color: var(--gm-on-accent);
	font-family: var(--gm-font-sans);
	font-size: var(--gm-step-0);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--gm-duration) ease, color var(--gm-duration) ease, border-color var(--gm-duration) ease;
}

.gm-button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
	background-color: var(--gm-fg);
	border-color: var(--gm-fg);
	color: var(--gm-bg);
}

.gm-button--ghost {
	background-color: transparent;
	border-color: var(--gm-border-input);
	color: var(--gm-fg);
}

.gm-button--ghost:hover {
	background-color: transparent;
	border-color: var(--gm-fg);
	color: var(--gm-fg);
}

/* 8. Article content (.gm-prose): the_content() output and core blocks
   ========================================================================== */

.gm-prose {
	max-width: var(--gm-measure);
	font-family: var(--gm-font-serif);
	font-size: var(--gm-step-1);
	line-height: 1.7;
	overflow-wrap: break-word;
}

.gm-prose > * {
	margin-block: 0;
}

.gm-prose > * + * {
	margin-block-start: 1.25em;
}

/* Headings inside articles: sans, with more room above than below */
.gm-prose h2,
.gm-prose h3,
.gm-prose h4,
.gm-prose h5,
.gm-prose h6 {
	scroll-margin-top: 5rem;
}

.gm-prose > h2 { margin-block-start: 2.25em; font-size: var(--gm-step-3); }
.gm-prose > h3 { margin-block-start: 1.9em; font-size: var(--gm-step-2); }
.gm-prose > h4,
.gm-prose > h5,
.gm-prose > h6 { margin-block-start: 1.6em; }

.gm-prose > h2 + *,
.gm-prose > h3 + *,
.gm-prose > h4 + *,
.gm-prose > h5 + *,
.gm-prose > h6 + * {
	margin-block-start: 0.75em;
}

/* Lists */
.gm-prose ul,
.gm-prose ol {
	padding-inline-start: 1.4em;
}

.gm-prose li + li {
	margin-block-start: 0.4em;
}

.gm-prose li > ul,
.gm-prose li > ol {
	margin-block-start: 0.4em;
}

.gm-prose li::marker {
	color: var(--gm-dim);
}

/* Inline code */
.gm-prose :not(pre) > code {
	padding: 0.1em 0.35em;
	border-radius: var(--gm-radius);
	background-color: var(--gm-code-bg);
	font-size: 0.82em;
	overflow-wrap: anywhere;
}

/* Code and preformatted blocks */
.gm-prose pre,
.gm-prose .wp-block-code,
.gm-prose .wp-block-preformatted {
	padding: var(--gm-space-m);
	border: 1px solid var(--gm-line);
	border-radius: var(--gm-radius);
	background-color: var(--gm-code-bg);
	color: var(--gm-fg);
	font-family: var(--gm-font-mono);
	font-size: 0.8125em;
	line-height: 1.65;
	white-space: pre;
	overflow-x: auto;
	tab-size: 4;
}

.gm-prose pre code {
	padding: 0;
	background: none;
	font-size: inherit;
	/* Core sets pre-wrap on code blocks; keep lines intact and let the block scroll sideways instead */
	white-space: inherit;
	overflow-wrap: normal;
}

/* Verse keeps its line breaks but wraps */
.gm-prose .wp-block-verse {
	font-family: var(--gm-font-serif);
	font-size: 1em;
	white-space: pre-wrap;
}

/* Quotes */
.gm-prose blockquote,
.gm-prose .wp-block-quote {
	margin-inline: 0;
	padding-inline-start: var(--gm-space-m);
	border-inline-start: 3px solid var(--gm-accent);
	font-family: var(--gm-font-sans);
	font-size: var(--gm-step-2);
	font-weight: 600;
	font-stretch: 104%;
	line-height: 1.35;
}

.gm-prose blockquote > * + * {
	margin-block-start: 0.6em;
}

.gm-prose blockquote cite,
.gm-prose .wp-block-quote cite {
	display: block;
	font-family: var(--gm-font-mono);
	font-size: var(--gm-step--1);
	font-style: normal;
	font-weight: 400;
	color: var(--gm-dim);
}

/* Images, captions, galleries */
.gm-prose img {
	border-radius: var(--gm-radius);
}

.gm-prose figcaption,
.gm-prose .wp-element-caption,
.gm-prose .wp-caption-text {
	margin-block-start: var(--gm-space-xs);
	font-family: var(--gm-font-sans);
	font-size: var(--gm-step--1);
	line-height: 1.5;
	color: var(--gm-dim);
	text-align: start;
}

/* Gallery image captions sit on the image's own overlay: core styles them, keep them white */
.gm-prose .wp-block-gallery {
	gap: var(--gm-space-s);
}

.gm-prose .wp-block-gallery .wp-block-image figcaption {
	color: #FFFFFF;
}

/* Alignments: wide and full escape the reading column, left/right float on larger screens */
.gm-prose .alignwide,
.gm-prose .alignfull {
	position: relative;
	left: 50%;
	max-width: none;
	transform: translateX(-50%);
}

.gm-prose .alignwide {
	width: min(var(--gm-wide), 100vw - 2 * var(--gm-gutter));
}

.gm-prose .alignfull {
	width: 100vw;
}

.gm-prose .aligncenter {
	margin-inline: auto;
}

.gm-prose .aligncenter img {
	margin-inline: auto;
}

@media (min-width: 48rem) {
	.gm-prose .alignleft {
		float: left;
		max-width: 50%;
		margin: 0.3em var(--gm-space-m) var(--gm-space-s) 0;
	}

	.gm-prose .alignright {
		float: right;
		max-width: 50%;
		margin: 0.3em 0 var(--gm-space-s) var(--gm-space-m);
	}
}

.gm-prose::after {
	content: "";
	display: table;
	clear: both;
}

/* Separators */
.gm-prose hr,
.gm-prose .wp-block-separator {
	margin-block: 2.5em;
	border: 0;
	border-top: 1px solid var(--gm-line);
	opacity: 1;
}

.gm-prose .wp-block-separator.is-style-dots {
	border-top: 0;
	color: var(--gm-dim);
}

/* Buttons block */
.gm-prose .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gm-space-s);
}

.gm-prose .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-height: 3rem;
	padding: 0 1.5rem;
	border: 1px solid var(--gm-accent);
	border-radius: var(--gm-radius);
	background-color: var(--gm-accent);
	color: var(--gm-on-accent);
	font-family: var(--gm-font-sans);
	font-size: var(--gm-step-0);
	font-weight: 700;
	text-decoration: none;
}

.gm-prose .wp-block-button__link:hover {
	background-color: var(--gm-fg);
	border-color: var(--gm-fg);
	color: var(--gm-bg);
}

.gm-prose .is-style-outline .wp-block-button__link {
	background-color: transparent;
	border-color: var(--gm-border-input);
	color: var(--gm-fg);
}

/* Embeds keep their ratio (responsive-embeds support) and never overflow */
.gm-prose .wp-block-embed iframe,
.gm-prose iframe {
	width: 100%;
	border: 0;
}

/* Tables (none in current articles; kept for future ones) */
.gm-prose table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--gm-font-sans);
	font-size: 0.9em;
}

.gm-prose th,
.gm-prose td {
	padding: 0.6em 0.75em;
	border-bottom: 1px solid var(--gm-line);
	text-align: start;
	vertical-align: top;
}

.gm-prose th {
	font-weight: 700;
}

/* 9. Header
   ========================================================================== */

.gm-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	border-bottom: 1px solid var(--gm-line);
	background-color: var(--gm-bg);
	transition: background-color 0.3s ease;
}

/* Below 600px the admin bar scrolls away, so the header sticks to the very top */
@media (max-width: 600px) {
	.admin-bar .gm-header {
		top: 0;
	}
}

.gm-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gm-space-s);
	min-height: 4.25rem;
}

@media (min-width: 50rem) {
	.gm-header__inner {
		column-gap: var(--gm-space-l);
	}
}

.gm-wordmark {
	flex-shrink: 0;
	color: var(--gm-fg);
	font-size: 1.0625rem;
	font-stretch: 118%;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-decoration: none;
	text-transform: uppercase;
}

/* Narrow phones: a slightly smaller, less tracked wordmark so it fits next to the menu button */
@media (max-width: 26rem) {
	.gm-wordmark {
		font-size: 0.9375rem;
		font-stretch: 112%;
		letter-spacing: 0.01em;
	}
}

/* Smallest phones (320px): tighter still */
@media (max-width: 22rem) {
	.gm-wordmark {
		font-size: 0.875rem;
		font-stretch: 100%;
		letter-spacing: 0;
	}

	.gm-header__actions {
		gap: var(--gm-space-xs);
	}
}

.gm-wordmark:hover {
	color: var(--gm-accent);
}

/* Status line: desktop only */
.gm-hud {
	display: none;
	margin: 0;
	font-family: var(--gm-font-mono);
	font-size: 0.75rem;
	color: var(--gm-dim);
}

/* Only where there's room next to the full menu: clock and status from 1280px, coordinates from 1440px */
@media (min-width: 80rem) {
	.gm-hud {
		display: flex;
		flex-wrap: nowrap;
		gap: var(--gm-space-m);
		white-space: nowrap;
	}
}

.gm-hud__item--coords {
	display: none;
}

@media (min-width: 90rem) {
	.gm-hud__item--coords {
		display: inline;
	}
}

.gm-hud__item[hidden] {
	display: none;
}

.gm-hud__value {
	color: var(--gm-fg);
	font-variant-numeric: tabular-nums;
}

.gm-pulse {
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-inline-end: var(--gm-space-xs);
	border-radius: 50%;
	background-color: var(--gm-accent);
	vertical-align: 0.05em;
	animation: gm-pulse 2.4s ease-in-out infinite;
}

@keyframes gm-pulse {
	50% { opacity: 0.35; }
}

/* Right-hand side of the header: navigation, theme switch, mobile menu */
.gm-header__actions {
	display: flex;
	align-items: center;
	gap: var(--gm-space-s);
}

@media (min-width: 50rem) {
	.gm-header__actions {
		gap: var(--gm-space-m);
	}
}

/* Theme switch: shows the sun in dark mode (go light) and the moon in light mode (go dark) */
.gm-theme-toggle {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--gm-border-input);
	border-radius: 50%;
	background: transparent;
	color: var(--gm-fg);
	cursor: pointer;
	transition: border-color var(--gm-duration) ease, color var(--gm-duration) ease;
}

.gm-theme-toggle[hidden] {
	display: none;
}

.gm-theme-toggle:hover {
	border-color: var(--gm-fg);
	color: var(--gm-accent);
}

.gm-theme-toggle svg {
	transition: transform 0.4s var(--gm-ease);
}

.gm-theme-toggle:hover svg {
	transform: rotate(-20deg);
}

.gm-theme-toggle__sun,
.gm-theme-toggle[data-current="dark"] .gm-theme-toggle__moon {
	display: none;
}

.gm-theme-toggle[data-current="dark"] .gm-theme-toggle__sun {
	display: block;
}

/* Desktop navigation */
.gm-nav {
	display: none;
	align-items: center;
	gap: var(--gm-space-m);
}

@media (min-width: 50rem) {
	.gm-nav {
		display: flex;
	}
}

.gm-nav__list {
	display: flex;
	flex-wrap: nowrap;
	white-space: nowrap;
	gap: var(--gm-space-2xs) var(--gm-space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gm-nav__list a,
.gm-menu__list a {
	color: var(--gm-fg);
	font-weight: 500;
	text-decoration: none;
}

.gm-nav__list a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	font-size: 0.9375rem;
}

.gm-nav__list a:hover,
.gm-nav__list a[aria-current="page"],
.gm-nav__list .current-menu-item > a,
.gm-nav__list .current-menu-ancestor > a,
.gm-nav__list .current_page_parent > a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.45em;
}

.gm-lang {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	color: var(--gm-dim);
	font-family: var(--gm-font-mono);
	font-size: 0.8125rem;
	text-decoration: none;
}

.gm-lang:hover {
	color: var(--gm-fg);
}

/* Mobile navigation: a <details> disclosure, no JavaScript needed */
.gm-menu {
	position: static;
}

@media (min-width: 50rem) {
	.gm-menu {
		display: none;
	}
}

.gm-menu__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--gm-space-xs);
	min-height: 2.75rem;
	padding: 0 var(--gm-space-s);
	border: 1px solid var(--gm-border-input);
	border-radius: var(--gm-radius);
	font-weight: 600;
	list-style: none;
	cursor: pointer;
	user-select: none;
}

.gm-menu__toggle::-webkit-details-marker {
	display: none;
}

/* Narrow phones: icon-only menu button (the label stays available to screen readers) */
@media (max-width: 26rem) {
	.gm-menu__toggle {
		justify-content: center;
		width: 2.75rem;
		padding: 0;
	}

	.gm-menu__text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}
}

/* Two-line icon that becomes an × when open */
.gm-menu__icon {
	position: relative;
	width: 16px;
	height: 10px;
}

.gm-menu__icon::before,
.gm-menu__icon::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: currentColor;
	transition: transform var(--gm-duration) var(--gm-ease), top var(--gm-duration) var(--gm-ease);
}

.gm-menu__icon::before { top: 0; }
.gm-menu__icon::after { top: 8px; }

.gm-menu[open] .gm-menu__icon::before { top: 4px; transform: rotate(45deg); }
.gm-menu[open] .gm-menu__icon::after { top: 4px; transform: rotate(-45deg); }

.gm-menu__panel {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	padding: var(--gm-space-s) var(--gm-gutter) var(--gm-space-l);
	border-bottom: 1px solid var(--gm-line);
	background-color: var(--gm-bg);
}

.gm-menu__list {
	margin: 0 0 var(--gm-space-s);
	padding: 0;
	list-style: none;
}

.gm-menu__list a {
	display: flex;
	align-items: center;
	min-height: 3.25rem;
	border-bottom: 1px solid var(--gm-line);
	font-size: var(--gm-step-2);
	font-stretch: 108%;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.gm-menu__list a[aria-current="page"],
.gm-menu__list .current-menu-item > a,
.gm-menu__list .current-menu-ancestor > a,
.gm-menu__list .current_page_parent > a {
	color: var(--gm-accent);
}

/* 10. Footer
   ========================================================================== */

.gm-footer {
	margin-block-start: var(--gm-space-3xl);
	padding-block: var(--gm-space-2xl) var(--gm-space-l);
	border-top: 1px solid var(--gm-line);
}

.gm-footer__statement {
	max-width: 18ch;
	margin: 0 0 var(--gm-space-2xl);
	color: var(--gm-soft);
	font-size: var(--gm-step-4);
	font-stretch: 125%;
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.gm-footer__columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: var(--gm-space-l) var(--gm-space-xl);
	padding-block-end: var(--gm-space-xl);
}

.gm-footer__col > .gm-label {
	margin-block-end: var(--gm-space-s);
}

.gm-footer__portrait {
	width: 4rem;
	height: 4rem;
	margin-block-end: var(--gm-space-s);
}

.gm-footer__col p,
.gm-footer__list li {
	margin: 0;
	line-height: 1.5;
}

.gm-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gm-footer__list li + li {
	margin-block-start: var(--gm-space-xs);
}

.gm-footer__col a {
	color: var(--gm-fg);
}

.gm-footer__note {
	margin-block-start: var(--gm-space-xs) !important;
	color: var(--gm-dim);
	font-size: var(--gm-step--1);
}

.gm-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--gm-space-xs) var(--gm-space-l);
	padding-block-start: var(--gm-space-m);
	border-top: 1px solid var(--gm-line);
	color: var(--gm-dim);
	font-family: var(--gm-font-mono);
	font-size: var(--gm-step--1);
}

.gm-footer__bottom p {
	margin: 0;
}

/* Easter egg: the hint only shows on hover or keyboard focus */
.gm-footer__egg {
	color: var(--gm-dim);
	text-decoration: none;
}

.gm-footer__egg:hover,
.gm-footer__egg:focus-visible {
	color: var(--gm-accent);
}

.gm-footer__egg-hint {
	opacity: 0;
	transition: opacity var(--gm-duration) ease;
}

.gm-footer__egg:hover .gm-footer__egg-hint,
.gm-footer__egg:focus-visible .gm-footer__egg-hint {
	opacity: 1;
}

/* 11. Templates: page headers, articles, lists, comments, search, 404
   ========================================================================== */

main:focus {
	outline: none;
}

/* Reading column: articles and pages share one centred axis, so wide images line up */
.gm-column {
	max-width: 42rem;
	margin-inline: auto;
}

.gm-column--start {
	margin-inline: 0;
}

.gm-article .gm-prose {
	max-width: 42rem;
}

/* Page header (Writing, archives, search, 404) */
.gm-page-header {
	padding-block: var(--gm-space-2xl) var(--gm-space-xl);
}

.gm-page-header > .gm-label {
	margin-block-end: var(--gm-space-m);
}

.gm-page-header__title {
	max-width: 16ch;
	font-size: var(--gm-step-5);
}

.gm-page-header__intro {
	max-width: 40rem;
	margin-block-start: var(--gm-space-m);
	color: var(--gm-soft);
	font-size: var(--gm-step-1);
	line-height: 1.55;
}

.gm-page-header__intro > * + * {
	margin-block-start: 1em;
}

.gm-label a {
	color: inherit;
	text-decoration: none;
}

.gm-label a:hover {
	color: var(--gm-fg);
	text-decoration: underline;
}

/* Article header */
.gm-article__header {
	padding-block: var(--gm-space-2xl) var(--gm-space-l);
}

.gm-article__kicker {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem var(--gm-space-xs); /* row gap keeps wrapped category links 24px apart (touch targets) */
	margin-block-end: var(--gm-space-m);
}

.gm-article__title {
	font-size: var(--gm-step-4);
	line-height: 1.02;
}

.gm-article--page .gm-article__title {
	font-size: var(--gm-step-5);
}

.gm-article__meta {
	display: flex;
	align-items: center;
	gap: var(--gm-space-s);
	margin-block-start: var(--gm-space-m);
}

/* The text wraps as one block next to the portrait */
.gm-article__meta-text {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--gm-space-xs);
	min-width: 0;
}

.gm-article__meta .gm-portrait {
	width: 2.5rem;
	height: 2.5rem;
}

/* Portrait (gm_portrait): black and white, in colour on hover; round when small */
.gm-portrait {
	display: block;
	max-width: 100%;
	height: auto;
	background-color: var(--gm-panel);
	filter: grayscale(1) contrast(1.05);
	transition: filter 0.4s var(--gm-ease);
}

.gm-portrait:hover {
	filter: none;
}

.gm-portrait--small {
	flex: none;
	border-radius: 50%;
	box-shadow: 0 0 0 1px var(--gm-line);
}

.gm-portrait--large {
	width: 100%;
	max-width: 20rem;
	aspect-ratio: 1;
	border-radius: var(--gm-radius);
}

/* Featured image: as wide as the wide-block width, centred on the reading axis */
.gm-featured {
	max-width: var(--gm-wide);
	margin: 0 auto var(--gm-space-xl);
}

.gm-featured__image {
	margin-inline: auto;
	border-radius: var(--gm-radius);
}

.gm-featured__caption {
	max-width: 42rem;
	margin: var(--gm-space-xs) auto 0;
	color: var(--gm-dim);
	font-size: var(--gm-step--1);
}

/* Article footer: previous/next, comments */
.gm-article__footer {
	margin-block-start: var(--gm-space-2xl);
	padding-block-start: var(--gm-space-l);
	border-top: 1px solid var(--gm-line);
}

.post-navigation .nav-links {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--gm-space-m);
}

.post-navigation a {
	display: flex;
	flex-direction: column;
	gap: var(--gm-space-2xs);
	color: var(--gm-fg);
	text-decoration: none;
}

.post-navigation .nav-next {
	text-align: end;
}

.gm-post-nav__title {
	font-weight: 700;
	line-height: 1.3;
}

.post-navigation a:hover .gm-post-nav__title {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Article list, grouped by year */
.gm-post-list__year {
	display: grid;
	gap: var(--gm-space-s) var(--gm-space-xl);
	padding-block: var(--gm-space-l);
	border-top: 1px solid var(--gm-line);
}

@media (min-width: 60rem) {
	.gm-post-list__year {
		grid-template-columns: 8rem minmax(0, 1fr);
	}
}

.gm-post-list__year-title {
	color: var(--gm-dim);
	font-family: var(--gm-font-mono);
	font-size: var(--gm-step-0);
	font-stretch: normal;
	font-weight: 400;
	letter-spacing: 0;
}

.gm-post-list__items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gm-post-row + .gm-post-row {
	border-top: 1px solid var(--gm-line);
}

.gm-post-row__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gm-space-xs) var(--gm-space-l);
	padding-block: var(--gm-space-m);
}

@media (min-width: 40rem) {
	.gm-post-row__inner {
		grid-template-columns: 7rem minmax(0, 1fr) 6rem;
	}
}

.gm-post-row__date {
	padding-block-start: 0.35em;
}

.gm-post-row__featured {
	margin-block-end: var(--gm-space-2xs);
	color: var(--gm-accent);
}

.gm-post-row__featured::before {
	content: "★ ";
}

.gm-post-row__title {
	font-size: var(--gm-step-2);
	font-stretch: 104%;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

.gm-post-row__title a {
	color: var(--gm-fg);
	text-decoration: none;
}

.gm-post-row__title a:hover {
	color: var(--gm-accent);
}

.gm-post-row__excerpt {
	margin-block-start: var(--gm-space-xs);
	max-width: 60ch;
	color: var(--gm-soft);
	font-size: var(--gm-step-0);
	line-height: 1.55;
}

.gm-post-row__cats {
	margin-block-start: var(--gm-space-xs);
	text-transform: none;
}

.gm-post-row__thumb {
	display: none;
}

@media (min-width: 40rem) {
	.gm-post-row__thumb {
		display: block;
	}

	.gm-post-row__thumb img {
		width: 6rem;
		height: 6rem;
		object-fit: cover;
		border-radius: var(--gm-radius);
		filter: grayscale(1);
		opacity: 0.85;
		transition: filter var(--gm-duration) ease, opacity var(--gm-duration) ease;
	}

	.gm-post-row__inner:hover .gm-post-row__thumb img {
		filter: none;
		opacity: 1;
	}
}

/* Pagination (articles and comments) */
.pagination,
.comments-pagination {
	margin-block-start: var(--gm-space-l);
	font-family: var(--gm-font-mono);
	font-size: var(--gm-step--1);
}

.pagination .nav-links,
.comments-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gm-space-xs);
}

.pagination .page-numbers,
.comments-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 var(--gm-space-s);
	border: 1px solid var(--gm-line);
	border-radius: var(--gm-radius);
	color: var(--gm-fg);
	text-decoration: none;
}

.pagination .page-numbers.current,
.comments-pagination .page-numbers.current {
	border-color: var(--gm-fg);
	background-color: var(--gm-fg);
	color: var(--gm-bg);
}

.pagination a.page-numbers:hover,
.comments-pagination a.page-numbers:hover {
	border-color: var(--gm-fg);
}

/* Comments */
.gm-comments {
	margin-block-start: var(--gm-space-xl);
	/* Long URLs pasted into comments must wrap on phones */
	overflow-wrap: anywhere;
}

.gm-comments__title {
	font-size: var(--gm-step-2);
}

.gm-comments__list,
.gm-comments__list .children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gm-comments__list {
	margin-block-start: var(--gm-space-m);
}

.gm-comments__list .children {
	padding-inline-start: var(--gm-space-m);
	border-inline-start: 1px solid var(--gm-line);
}

.gm-comments__list .comment-body {
	padding-block: var(--gm-space-m);
	border-top: 1px solid var(--gm-line);
}

.gm-comments__list .comment-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gm-space-2xs) var(--gm-space-s);
	margin-block-end: var(--gm-space-xs);
	font-size: var(--gm-step--1);
}

.gm-comments__list .comment-author {
	display: flex;
	align-items: center;
	gap: var(--gm-space-xs);
	font-weight: 700;
}

.gm-comments__list .comment-author .says {
	display: none;
}

.gm-comments__list .avatar {
	border-radius: 50%;
}

.gm-comments__list .comment-metadata a {
	color: var(--gm-dim);
	font-family: var(--gm-font-mono);
	text-decoration: none;
}

.gm-comments__list .comment-content {
	color: var(--gm-soft);
	font-family: var(--gm-font-serif);
	line-height: 1.65;
}

.gm-comments__list .comment-content > * + * {
	margin-block-start: 0.8em;
}

.gm-comments__list .reply a,
.comment-reply-title small a {
	font-family: var(--gm-font-mono);
	font-size: var(--gm-step--1);
}

.gm-comments__list .bypostauthor > .comment-body .comment-author::after {
	content: "author";
	padding: 0.1em 0.45em;
	border: 1px solid var(--gm-accent);
	border-radius: var(--gm-radius);
	color: var(--gm-accent);
	font-family: var(--gm-font-mono);
	font-size: 0.7rem;
	font-weight: 400;
}

.gm-comments__empty,
.gm-comments__closed {
	margin-block-start: var(--gm-space-s);
	color: var(--gm-dim);
}

.gm-comment-form {
	display: grid;
	gap: var(--gm-space-m);
}

.comment-respond {
	margin-block-start: var(--gm-space-xl);
}

.gm-comment-form__title {
	font-size: var(--gm-step-2);
}

.gm-comment-form p {
	margin: 0;
}

.gm-comment-form .comment-notes,
.gm-comment-form .logged-in-as {
	color: var(--gm-dim);
	font-size: var(--gm-step--1);
}

.gm-comment-form .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: var(--gm-space-xs);
	font-size: var(--gm-step--1);
}

.gm-comment-form .comment-form-cookies-consent label {
	font-weight: 400;
}

.gm-comment-form input[type="checkbox"] {
	width: 1.125rem;
	height: 1.125rem;
	margin-block-start: 0.2em;
	accent-color: var(--gm-accent);
}

.gm-comment-form .required {
	color: var(--gm-accent);
}

/* Search */
.gm-search {
	max-width: 36rem;
}

.gm-search__label {
	display: block;
	margin-block-end: var(--gm-space-xs);
	font-weight: 400;
}

.gm-search__row {
	display: flex;
	gap: var(--gm-space-xs);
}

.gm-search__row input {
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * Dot text (assets/js/dots.js): short text in 3D points on a canvas. 404, Now (clock) and Contact (after sending).
 * The aspect ratio matches the text's width, so the box doesn't jump when the script draws.
 */
.gm-dots {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 1; /* 3 characters */
	touch-action: pan-y; /* a finger can scatter the points and still scroll the page */
	cursor: crosshair;
}

.gm-dots--clock {
	aspect-ratio: 3 / 1; /* HH:MM */
}

.gm-dots--wide {
	aspect-ratio: 4 / 1; /* 6 letters */
}

.gm-dots__figure {
	margin: 0;
}

.gm-dots__figure figcaption {
	text-align: center;
}

/* Page header with a dot-text canvas: beside the title from 60rem, under it on smaller screens */
.gm-page-header--dots {
	display: grid;
	gap: var(--gm-space-l);
	align-items: center;
}

@media (min-width: 60rem) {
	.gm-page-header--dots {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	}
}

.gm-contact__thanks {
	max-width: 28rem;
	margin-block-end: var(--gm-space-s);
}

@media (prefers-reduced-motion: reduce) {
	.gm-dots {
		cursor: default;
	}
}

/* 404 and empty states */


/* Text and actions, with the photo beside them from 60rem */
.gm-404__body {
	display: grid;
	gap: var(--gm-space-xl);
	align-items: start;
	padding-block-end: var(--gm-space-2xl);
}

.gm-404__main {
	max-width: 42rem;
}

/* Duotone, like the Souvenir photo: black and white under the accent blue, full colour on hover */
.gm-404__photo {
	position: relative;
	max-width: 26rem;
	margin: 0;
	border-radius: var(--gm-radius);
	overflow: hidden;
}

.gm-404__photo img {
	display: block;
	width: 100%;
	height: auto;
	filter: grayscale(1) contrast(1.1) brightness(1.05);
	transition: filter 0.6s var(--gm-ease);
}

.gm-404__photo::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	background: linear-gradient(160deg, rgba(var(--gm-accent-rgb), 0.85), rgba(7, 11, 20, 0.6));
	mix-blend-mode: screen;
	pointer-events: none;
	transition: opacity 0.6s var(--gm-ease);
}

.gm-404__photo:hover img {
	filter: none;
}

.gm-404__photo:hover::before {
	opacity: 0;
}

@media (min-width: 60rem) {
	.gm-404__body {
		grid-template-columns: minmax(0, 42rem) minmax(0, 26rem);
		justify-content: space-between;
	}
}

.gm-404__actions {
	display: grid;
	gap: var(--gm-space-l);
	margin-block-start: var(--gm-space-xl);
}

.gm-404__actions p {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gm-space-s);
}

.gm-empty {
	padding-block: var(--gm-space-l);
	border-top: 1px solid var(--gm-line);
	color: var(--gm-soft);
}

/*
 * Smart GEO GMap (plugin): its legend and map controls, and Google's info window, have their own white background,
 * so their text must stay dark in both themes (in dark mode it would inherit the light text colour: white on white).
 * Literal colours on purpose: the background they sit on is always white.
 */
.smart-geo-gmap-wrapper .control_border,
.smart-geo-gmap-wrapper #legend,
.smart-geo-gmap-wrapper #legend h3,
.smart-geo-gmap-wrapper .gm-style .gm-style-iw,
.smart-geo-gmap-wrapper .gm-style .gm-style-iw-d {
	color: #0B1220;
	color-scheme: light;
}

.smart-geo-gmap-wrapper .gm-style .gm-style-iw a {
	color: #1F4FD8;
}

/* Rate my Post (plugin): keep it quiet and on-theme */
.gm-prose .rmp-widgets-container,
.gm-prose .rmp-results-widget {
	font-family: var(--gm-font-sans);
	font-size: var(--gm-step--1);
	color: var(--gm-dim);
}

.gm-prose .rmp-widgets-container {
	margin-block-start: var(--gm-space-xl);
	padding: var(--gm-space-m);
	border: 1px solid var(--gm-line);
	border-radius: var(--gm-radius);
}

.gm-prose .rmp-heading {
	font-family: var(--gm-font-sans);
}

/* About page (page-about.php): title and portrait side by side, then the reading column */
.gm-about__header {
	display: grid;
	gap: var(--gm-space-l);
	align-items: end;
	max-width: var(--gm-wide);
	margin-inline: auto;
	padding-block: var(--gm-space-2xl) var(--gm-space-xl);
}

@media (min-width: 48rem) {
	.gm-about__header {
		grid-template-columns: minmax(0, 1fr) minmax(12rem, 20rem);
	}
}

.gm-about__heading > .gm-label {
	margin-block-end: var(--gm-space-m);
}

.gm-about__heading .gm-article__title {
	font-size: var(--gm-step-6);
}

.gm-about__portrait {
	width: min(100%, 20rem);
}

/* Phones: a smaller portrait, so the story starts on the first screen */
@media (max-width: 47.99rem) {
	.gm-about__header {
		gap: var(--gm-space-m);
		padding-block: var(--gm-space-xl) var(--gm-space-l);
	}

	.gm-about__portrait {
		order: -1;
		width: 7rem;
	}
}

.gm-prose > .gm-lede {
	color: var(--gm-fg);
	font-family: var(--gm-font-sans);
	font-size: var(--gm-step-2);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.01em;
}

/* Milestones: year in mono, then the line */
.gm-prose .gm-milestones {
	padding: 0;
	border-top: 1px solid var(--gm-line);
	list-style: none;
}

.gm-prose .gm-milestones li {
	display: grid;
	grid-template-columns: 4rem minmax(0, 1fr);
	gap: var(--gm-space-s);
	margin: 0;
	padding-block: var(--gm-space-xs);
	border-bottom: 1px solid var(--gm-line);
	font-family: var(--gm-font-sans);
	font-size: var(--gm-step-0);
}

.gm-prose .gm-milestones strong {
	color: var(--gm-accent);
	font-family: var(--gm-font-mono);
	font-size: var(--gm-step--1);
	font-weight: 400;
	line-height: 2;
}

/* Legacy page (page-legacy.php): group headings, then one entry per project with the years on the left */
.gm-legacy__entries {
	padding-block-end: var(--gm-space-2xl);
}

.gm-legacy__group {
	padding-block: var(--gm-space-xl) var(--gm-space-m);
	border-top: 1px solid var(--gm-line);
	font-size: var(--gm-step-3);
	font-stretch: 112%;
}

.gm-entry > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gm-space-xs) var(--gm-space-xl);
	padding-block: var(--gm-space-l);
	border-top: 1px solid var(--gm-line);
}

.gm-entry > .wp-block-group__inner-container > * {
	max-width: 40rem;
}

@media (min-width: 60rem) {
	.gm-entry > .wp-block-group__inner-container {
		grid-template-columns: 10rem minmax(0, 1fr);
	}

	.gm-entry > .wp-block-group__inner-container > * {
		grid-column: 2;
	}

	.gm-entry > .wp-block-group__inner-container > .gm-entry__years {
		grid-column: 1;
		grid-row: 1 / span 10;
		padding-block-start: 0.45em;
	}
}

.gm-entry__years {
	color: var(--gm-accent);
}

.gm-entry h3 {
	font-size: var(--gm-step-2);
	font-stretch: 108%;
}

.gm-entry__role {
	color: var(--gm-dim);
	font-family: var(--gm-font-mono);
	font-size: var(--gm-step--1);
}

.gm-entry p:not(.gm-label):not(.gm-entry__role):not(.gm-entry__link) {
	margin-block-start: var(--gm-space-xs);
	color: var(--gm-soft);
	line-height: 1.65;
}

.gm-entry__link {
	margin-block-start: var(--gm-space-xs);
	font-family: var(--gm-font-mono);
	font-size: var(--gm-step--1);
}

.gm-entry__link a {
	color: var(--gm-fg);
	text-underline-offset: 0.4em;
}

.gm-entry__link a::after {
	content: " ↗";
	color: var(--gm-accent);
}

.gm-entry__link a:hover {
	color: var(--gm-accent);
}

/* Contact page (page-contact.php): form and direct contacts side by side from 60rem */
.gm-contact__grid {
	display: grid;
	gap: var(--gm-space-xl);
	padding-block: var(--gm-space-xl) var(--gm-space-2xl);
	border-top: 1px solid var(--gm-line);
}

@media (min-width: 60rem) {
	.gm-contact__grid {
		grid-template-columns: minmax(0, 40rem) minmax(0, 1fr);
		column-gap: var(--gm-space-2xl);
	}
}

.gm-contact__form > .gm-label,
.gm-contact__direct > .gm-label {
	margin-block-end: var(--gm-space-m);
}

.gm-contact__form {
	scroll-margin-top: 5rem;
}

.gm-form {
	display: grid;
	gap: var(--gm-space-m);
}

.gm-form__row {
	display: grid;
	gap: var(--gm-space-m);
}

@media (min-width: 40rem) {
	.gm-form__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.gm-field {
	display: grid;
	gap: var(--gm-space-2xs);
	margin: 0;
}

.gm-field__optional {
	color: var(--gm-dim);
	font-weight: 400;
}

.gm-field [aria-invalid="true"] {
	border-color: var(--gm-error);
	box-shadow: inset 0 0 0 1px var(--gm-error);
}

.gm-field__error {
	color: var(--gm-error);
	font-size: var(--gm-step--1);
	font-weight: 600;
}

.gm-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gm-space-s) var(--gm-space-m);
	margin: 0;
}

.gm-form__note {
	flex: 1 1 16rem;
	color: var(--gm-dim);
	font-size: var(--gm-step--1);
}

/* Honeypot: off screen for people, still in the form for bots */
.gm-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.gm-notice {
	margin-block-end: var(--gm-space-m);
	padding: var(--gm-space-s) var(--gm-space-m);
	border: 1px solid var(--gm-line);
	border-inline-start: 3px solid var(--gm-accent);
	border-radius: var(--gm-radius);
	background-color: var(--gm-panel);
}

.gm-notice--error {
	border-inline-start-color: var(--gm-error);
}

.gm-notice:focus {
	outline: none;
}

.gm-contact__list {
	display: grid;
	gap: var(--gm-space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gm-contact__list li {
	display: grid;
	gap: var(--gm-space-2xs);
}

.gm-contact__list a {
	color: var(--gm-fg);
	font-size: var(--gm-step-1);
	overflow-wrap: anywhere;
}

.gm-contact__list a:hover {
	color: var(--gm-accent);
}

/* Now page (page-now.php): banner, then one section per h2 with the heading in a sticky left column */
.gm-now__banner {
	/* The banner is 900 px wide: never stretch it beyond that */
	max-width: 56.25rem;
	margin-block-end: var(--gm-space-xl);
}

.gm-now__banner > * {
	margin-inline: 0;
}

.gm-now__section {
	display: grid;
	gap: var(--gm-space-s);
	padding-block: var(--gm-space-xl);
	border-top: 1px solid var(--gm-line);
}

.gm-now__section:last-child {
	padding-block-end: var(--gm-space-2xl);
}

.gm-now__heading h2 {
	font-size: var(--gm-step-3);
	font-stretch: 108%;
}

@media (min-width: 60rem) {
	.gm-now__section {
		grid-template-columns: 18rem minmax(0, 1fr);
		column-gap: var(--gm-space-xl);
	}

	.gm-now__heading h2 {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + 5.5rem);
		font-size: var(--gm-step-2);
	}
}

.gm-now__body.gm-prose {
	max-width: 42rem;
}

.gm-now__body > :first-child {
	margin-block-start: 0;
}

/* Donate card on plugin pages (gm_donate_card): a quiet panel with an animated coffee cup */
.gm-donate {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--gm-space-m);
	max-width: 42rem;
	margin: var(--gm-space-xl) auto 0;
	padding: var(--gm-space-l) var(--gm-space-m);
	overflow: hidden;
	border: 1px solid var(--gm-line);
	border-radius: var(--gm-radius);
	background:
		radial-gradient(circle at 100% 0%, rgba(var(--gm-accent-rgb), 0.14), transparent 55%),
		var(--gm-panel);
}

/* Dotted grid in the corner: the same point field as the homepage hero, at rest */
.gm-donate::after {
	content: "";
	position: absolute;
	inset: 0 0 auto auto;
	width: 12rem;
	height: 8rem;
	background-image: radial-gradient(rgba(var(--gm-accent-rgb), 0.35) 1px, transparent 1.5px);
	background-size: 14px 14px;
	-webkit-mask-image: linear-gradient(225deg, #000 20%, transparent 75%);
	mask-image: linear-gradient(225deg, #000 20%, transparent 75%);
	pointer-events: none;
}

.gm-donate__icon {
	color: var(--gm-accent);
}

.gm-donate__steam {
	animation: gm-steam 2.8s ease-in-out infinite;
}

@keyframes gm-steam {
	0%, 100% { opacity: 0.25; transform: translateY(1px); }
	50% { opacity: 1; transform: translateY(-1px); }
}

.gm-donate__body {
	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--gm-space-xs);
}

.gm-donate__title {
	font-size: var(--gm-step-3);
	font-stretch: 108%;
}

.gm-donate__body > p:not(.gm-label):not(.gm-donate__actions) {
	max-width: 32rem;
	color: var(--gm-soft);
	line-height: 1.6;
}

.gm-donate__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--gm-space-s) var(--gm-space-m);
	margin-block-start: var(--gm-space-xs);
}

.gm-donate__more {
	color: var(--gm-fg);
	font-family: var(--gm-font-mono);
	font-size: var(--gm-step--1);
	text-underline-offset: 0.4em;
}

.gm-donate__more:hover {
	color: var(--gm-accent);
}

@media (max-width: 29.99rem) {
	.gm-donate {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Souvenir from Amsterdam: the photo in duotone (accent blue), in full colour on hover, focus or tap */
.gm-souvenir__photo {
	position: relative;
	max-width: 900px;
	margin: 0 0 var(--gm-space-xl);
	border-radius: var(--gm-radius);
	cursor: zoom-in;
}

.gm-souvenir__photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--gm-radius);
	filter: grayscale(1) contrast(1.1) brightness(1.05);
	transition: filter 0.6s var(--gm-ease);
}

/* The blue layer: blended over the black-and-white photo to tint it */
.gm-souvenir__photo::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0 0 auto;
	aspect-ratio: 900 / 675;
	border-radius: var(--gm-radius);
	background: linear-gradient(160deg, rgba(var(--gm-accent-rgb), 0.85), rgba(7, 11, 20, 0.6));
	mix-blend-mode: screen;
	pointer-events: none;
	transition: opacity 0.6s var(--gm-ease);
}

.gm-souvenir__photo:hover img,
.gm-souvenir__photo:focus-visible img,
.gm-souvenir__photo:active img {
	filter: none;
}

.gm-souvenir__photo:hover::before,
.gm-souvenir__photo:focus-visible::before,
.gm-souvenir__photo:active::before {
	opacity: 0;
}

.gm-souvenir__photo figcaption {
	margin-block-start: var(--gm-space-s);
	text-transform: none;
}

.gm-souvenir__body {
	max-width: 42rem;
	padding-block-end: var(--gm-space-2xl);
}

.gm-souvenir__body #foursquare-integration {
	margin-block-start: var(--gm-space-m);
}

/*
 * Lead Magnet Locker download boxes inside articles and pages (e.g. the free downloads in Churn PHP or the plugin's
 * own demo). The plugin paints them for a white page (#f9f9f9, inherited text colour), which is white on white in
 * dark mode: restyle them with the theme's tokens, like the CV block below.
 */
.gm-prose .lead-magnet-form {
	max-width: 32rem;
	margin: var(--gm-space-l) 0;
	padding: var(--gm-space-m);
	border: 1px solid var(--gm-line);
	border-inline-start: 3px solid var(--gm-accent);
	border-radius: var(--gm-radius);
	background-color: var(--gm-panel);
	color: var(--gm-fg);
}

.gm-prose .lead-magnet-form h3 {
	margin: 0 0 var(--gm-space-2xs);
	color: var(--gm-fg);
}

.gm-prose .lead-magnet-form > p {
	margin: 0;
	color: var(--gm-soft);
}

.gm-prose .lead-magnet-email-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gm-space-xs);
	margin-block-start: var(--gm-space-s);
}

.gm-prose .lead-magnet-form input[type="email"] {
	flex: 1 1 12rem;
	width: auto;
	min-height: 3rem;
	margin: 0;
	padding: 0.625rem 0.875rem;
	border: 1px solid var(--gm-border-input);
	border-radius: var(--gm-radius);
	background-color: var(--gm-bg);
	color: var(--gm-fg);
}

.gm-prose .lead-magnet-form button {
	flex: 0 0 auto;
	width: auto;
	min-height: 3rem;
	padding: 0 1.5rem;
	border: 1px solid var(--gm-accent);
	border-radius: var(--gm-radius);
	background-color: var(--gm-accent);
	color: var(--gm-on-accent);
	font-weight: 700;
}

.gm-prose .lead-magnet-form button:hover {
	border-color: var(--gm-fg);
	background-color: var(--gm-fg);
	color: var(--gm-bg);
}

.gm-prose .lead-magnet-message {
	margin: var(--gm-space-s) 0 0;
	padding: var(--gm-space-s);
	border: 1px solid var(--gm-line);
	border-radius: var(--gm-radius);
	background-color: var(--gm-bg);
	color: var(--gm-fg);
}

/* CV block (gm_cv_block): restyles the Lead Magnet Locker form to match the theme */
.gm-cv {
	display: grid;
	gap: var(--gm-space-s);
	margin-block: var(--gm-space-xl) var(--gm-space-2xl);
	padding: var(--gm-space-l) var(--gm-space-m);
	border: 1px solid var(--gm-line);
	border-inline-start: 3px solid var(--gm-accent);
	border-radius: var(--gm-radius);
	background-color: var(--gm-panel);
}

.gm-cv--aside {
	margin-block: var(--gm-space-xl) 0;
	padding: var(--gm-space-m);
}

.gm-cv .lead-magnet-form {
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.gm-cv .lead-magnet-form h3 {
	margin: 0 0 var(--gm-space-2xs);
	color: var(--gm-fg);
	font-size: var(--gm-step-2);
	font-stretch: 108%;
}

.gm-cv .lead-magnet-form > p {
	color: var(--gm-soft);
	line-height: 1.6;
}

.gm-cv .lead-magnet-email-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gm-space-xs);
	margin-block-start: var(--gm-space-s);
}

.gm-cv .lead-magnet-form input[type="email"] {
	flex: 1 1 14rem;
	width: auto;
	min-height: 3rem;
	margin: 0;
	padding: 0.625rem 0.875rem;
	border: 1px solid var(--gm-border-input);
	border-radius: var(--gm-radius);
	background-color: var(--gm-bg);
	color: var(--gm-fg);
}

.gm-cv .lead-magnet-form button {
	flex: 0 0 auto;
	width: auto;
	min-height: 3rem;
	padding: 0 1.5rem;
	border: 1px solid var(--gm-accent);
	border-radius: var(--gm-radius);
	background-color: var(--gm-accent);
	color: var(--gm-on-accent);
	font-weight: 700;
}

.gm-cv .lead-magnet-form button:hover {
	border-color: var(--gm-fg);
	background-color: var(--gm-fg);
	color: var(--gm-bg);
}

.gm-cv .lead-magnet-message {
	margin: var(--gm-space-s) 0 0;
	padding: var(--gm-space-s);
	border: 1px solid var(--gm-line);
	border-radius: var(--gm-radius);
	background-color: var(--gm-bg);
	color: var(--gm-fg);
}

.gm-cv .lead-magnet-message a {
	font-weight: 700;
}

.gm-cv .lead-magnet-error {
	border-color: var(--gm-error);
	color: var(--gm-error);
}

.gm-cv__alt {
	color: var(--gm-dim);
	font-size: var(--gm-step--1);
}

/* Topic links (gm_topic_links) on the Writing page and category archives */
.gm-topics {
	display: grid;
	gap: var(--gm-space-xs);
	margin-block-start: var(--gm-space-l);
}

.gm-topics__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gm-space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gm-topic {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	min-height: 2.5rem;
	padding: 0 0.875rem;
	border: 1px solid var(--gm-line);
	border-radius: 999px;
	color: var(--gm-fg);
	font-size: var(--gm-step--1);
	font-weight: 600;
	text-decoration: none;
	transition: border-color var(--gm-duration) ease, color var(--gm-duration) ease;
}

.gm-topic:hover {
	border-color: var(--gm-accent);
	color: var(--gm-accent);
}

.gm-topic[aria-current="page"] {
	border-color: var(--gm-accent);
	background-color: var(--gm-accent);
	color: var(--gm-on-accent);
}

.gm-topic__count {
	color: var(--gm-dim);
	font-family: var(--gm-font-mono);
	font-weight: 400;
}

.gm-topic[aria-current="page"] .gm-topic__count {
	color: inherit;
	opacity: 0.8;
}

.gm-topics__more summary {
	width: fit-content;
	color: var(--gm-dim);
	font-family: var(--gm-font-mono);
	font-size: var(--gm-step--1);
	cursor: pointer;
}

.gm-topics__more summary:hover {
	color: var(--gm-fg);
}

.gm-topics__more[open] summary {
	margin-block-end: var(--gm-space-xs);
}

/* Notes on older articles: the automatic age note (gm_age_note) and hand-written updates (.gm-update) */
.gm-age-note {
	display: flex;
	gap: 0.6em;
	align-items: baseline;
	padding: var(--gm-space-xs) var(--gm-space-s);
	border: 1px dashed var(--gm-border-input);
	border-radius: var(--gm-radius);
	color: var(--gm-dim);
	font-family: var(--gm-font-mono);
	font-size: var(--gm-step--1);
	line-height: 1.5;
}

.gm-age-note::before {
	content: "◷";
	color: var(--gm-accent);
}

.gm-prose .gm-update {
	padding: var(--gm-space-s) var(--gm-space-m);
	border: 1px solid var(--gm-line);
	border-inline-start: 3px solid var(--gm-accent);
	border-radius: var(--gm-radius);
	background-color: var(--gm-panel);
	font-family: var(--gm-font-sans);
	font-size: var(--gm-step-0);
	line-height: 1.6;
}

.gm-prose .gm-update strong {
	color: var(--gm-accent);
}

/* 11b. Hero: point-field canvas behind the opening text (assets/js/hero.js)
   ========================================================================== */

.gm-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(34rem, 100svh - 4.25rem, 52rem);
	overflow: hidden;
	border-bottom: 1px solid var(--gm-line);
}

.gm-hero__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.gm-hero__inner {
	position: relative;
	z-index: 1;
	padding-block: var(--gm-space-xl);
	/* Let the pointer reach the canvas everywhere except on links and buttons */
	pointer-events: none;
}

.gm-hero__inner a,
.gm-hero__inner button {
	pointer-events: auto;
}

.gm-hero__content {
	max-width: 62rem;
}

/* Boot line above the title: "> giuseppe_maccario --since …▌" */
.gm-hero__boot {
	margin-block-end: var(--gm-space-m);
	color: var(--gm-accent);
	font-family: var(--gm-font-mono);
	font-size: var(--gm-step--1);
}

.gm-cursor {
	animation: gm-blink 1.1s steps(1) infinite;
}

@keyframes gm-blink {
	50% { opacity: 0; }
}

/*
 * Hero content comes from the editor (front page, above the "More" block), so it is styled by element:
 * h1 = title, paragraphs = intro (two columns on wide screens), buttons block = actions.
 */
.gm-hero__content {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: var(--gm-space-xl);
}

.gm-hero__content > * {
	grid-column: 1 / -1;
}

.gm-hero__content > h1 {
	max-width: 15ch;
	/* Capped at 7rem so title, intro and actions fit above the fold on 1280×800 */
	font-size: clamp(3.25rem, 1.5rem + 6vw, 7rem);
	font-stretch: 112%;
	line-height: 0.92;
	letter-spacing: -0.035em;
}

.gm-hero__content > p:not(.gm-hero__boot) {
	max-width: 36rem;
	margin-block-start: 0.9em;
	color: var(--gm-soft);
	font-size: var(--gm-step-1);
	line-height: 1.6;
}

.gm-hero__content > h1 + p {
	margin-block-start: var(--gm-space-l);
}

/* Phones: tighter spacing, so the buttons stay on the first screen of a 390×844 phone */
@media (max-width: 39.99rem) {
	.gm-hero__inner {
		padding-block: var(--gm-space-l);
	}

	.gm-hero__boot {
		margin-block-end: var(--gm-space-s);
	}

	.gm-hero__content > h1 + p,
	.gm-hero__content > .wp-block-buttons {
		margin-block-start: var(--gm-space-m);
	}

	.gm-hero__content > p:not(.gm-hero__boot) {
		font-size: var(--gm-step-0);
	}

	/* A slightly smaller title (44–52px), so a 360×780 phone still shows the buttons; longer Italian titles too */
	.gm-hero__content > h1 {
		font-size: clamp(2.75rem, 1.25rem + 7vw, 3.25rem);
	}
}

@media (min-width: 64rem) {
	.gm-hero__content {
		grid-template-columns: repeat(2, minmax(0, 28rem));
	}

	/* Intro paragraphs side by side, like the columns of a page */
	.gm-hero__content > h1 ~ p {
		grid-column: auto;
		margin-block-start: var(--gm-space-l);
	}
}

.gm-hero__content > .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gm-space-s);
	margin-block-start: var(--gm-space-l);
}

.gm-hero .wp-block-button__link,
.gm-feature .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-height: 3rem;
	padding: 0 1.5rem;
	border: 1px solid var(--gm-accent);
	border-radius: var(--gm-radius);
	background-color: var(--gm-accent);
	color: var(--gm-on-accent);
	font-family: var(--gm-font-sans);
	font-size: var(--gm-step-0);
	font-weight: 700;
	text-decoration: none;
}

.gm-hero .wp-block-button__link:hover,
.gm-feature .wp-block-button__link:hover {
	background-color: var(--gm-fg);
	border-color: var(--gm-fg);
	color: var(--gm-bg);
}

/* Outline button: a solid background, so the points don't run through it */
.gm-hero .is-style-outline .wp-block-button__link,
.gm-feature .is-style-outline .wp-block-button__link {
	border-color: var(--gm-border-input);
	background-color: var(--gm-bg);
	color: var(--gm-fg);
}

.gm-hero .is-style-outline .wp-block-button__link:hover,
.gm-feature .is-style-outline .wp-block-button__link:hover {
	border-color: var(--gm-fg);
	background-color: var(--gm-bg);
	color: var(--gm-fg);
}

/* "scroll to bring order": only once the canvas runs, and only when motion is allowed */
.gm-hero__hint {
	position: absolute;
	z-index: 1;
	right: var(--gm-gutter);
	bottom: var(--gm-space-m);
	margin: 0;
	color: var(--gm-dim);
	font-family: var(--gm-font-mono);
	font-size: 0.75rem;
	opacity: 0;
	transition: opacity 0.6s ease;
}

.gm-hero.is-ready .gm-hero__hint {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.gm-hero__hint {
		display: none;
	}
}

/* 11c. Homepage sections (front-page.php): label column on the left, content on the right
   ========================================================================== */

.gm-home__sections,
.gm-sections {
	counter-reset: gm-section;
}

/* Inner pages (Work): a rule between the page header and the first section */
.gm-sections {
	border-top: 1px solid var(--gm-line);
}

.gm-feature {
	padding-block: var(--gm-space-2xl);
	counter-increment: gm-section;
	/* Jump links (#gopractice) land below the sticky header */
	scroll-margin-top: 4.25rem;
}

.gm-feature + .gm-feature {
	border-top: 1px solid var(--gm-line);
}

/* Group blocks render an inner container in classic themes; template sections use .gm-feature__inner */
.gm-feature > .wp-block-group__inner-container,
.gm-feature__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.gm-feature > .wp-block-group__inner-container > * + *,
.gm-feature__inner > * + * {
	margin-block-start: var(--gm-space-m);
}

/* Section number added by CSS, so editing or reordering sections never breaks the count */
.gm-feature > .wp-block-group__inner-container > .gm-label:first-child::before,
.gm-feature__inner > .gm-label:first-child::before {
	content: counter(gm-section, decimal-leading-zero) " — ";
	color: var(--gm-accent);
}

@media (min-width: 60rem) {
	.gm-feature > .wp-block-group__inner-container,
	.gm-feature__inner {
		grid-template-columns: 14rem minmax(0, 1fr);
		column-gap: var(--gm-space-xl);
	}

	.gm-feature > .wp-block-group__inner-container > *,
	.gm-feature__inner > * {
		grid-column: 2;
	}

	.gm-feature > .wp-block-group__inner-container > .gm-label:first-child,
	.gm-feature__inner > .gm-label:first-child {
		grid-column: 1;
		grid-row: 1 / span 20;
		align-self: start;
		margin-block-start: 0;
		padding-block-start: 0.6em;
	}

	/* The label is in its own column: the item after it starts at the top */
	.gm-feature > .wp-block-group__inner-container > .gm-label:first-child + *,
	.gm-feature__inner > .gm-label:first-child + * {
		margin-block-start: 0;
	}
}

.gm-feature h2 {
	font-size: var(--gm-step-4);
	font-stretch: 112%;
}

/* A section title that links to its own page (GoPractice → case study) */
.gm-feature h2 a {
	color: inherit;
	text-decoration: none;
}

.gm-feature h2 a::after {
	content: "→";
	margin-inline-start: 0.25em;
	color: var(--gm-accent);
	display: inline-block;
	transition: transform var(--gm-duration) var(--gm-ease);
}

.gm-feature h2 a:hover {
	color: var(--gm-accent);
}

.gm-feature h2 a:hover::after {
	transform: translateX(0.15em);
}

.gm-feature .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gm-space-s);
}

.gm-feature p:not(.gm-label) {
	max-width: 40rem;
	color: var(--gm-soft);
	font-size: var(--gm-step-0);
	line-height: 1.65;
}

.gm-feature .gm-lede {
	max-width: 36rem;
	color: var(--gm-fg);
	font-size: var(--gm-step-2);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.01em;
}

/* Key facts: label and value on one line, mono labels */
.gm-facts {
	display: grid;
	max-width: 40rem;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--gm-line);
	list-style: none;
}

.gm-facts li {
	display: grid;
	grid-template-columns: 7rem minmax(0, 1fr);
	gap: var(--gm-space-s);
	padding-block: var(--gm-space-xs);
	border-bottom: 1px solid var(--gm-line);
}

/* Inside article text (case studies): win over the .gm-prose list styles */
.gm-prose .gm-facts {
	padding: 0;
	list-style: none;
	font-family: var(--gm-font-sans);
	font-size: var(--gm-step-0);
}

.gm-prose .gm-facts li {
	margin: 0;
}

.gm-facts strong {
	color: var(--gm-dim);
	font-family: var(--gm-font-mono);
	font-size: var(--gm-step--1);
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1.9;
}

/* Projects: a plain list with an accent marker */
.gm-projects {
	max-width: 40rem;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--gm-soft);
	line-height: 1.6;
}

.gm-projects li {
	position: relative;
	padding-inline-start: 1.5rem;
}

.gm-projects li + li {
	margin-block-start: var(--gm-space-s);
}

.gm-projects li::before {
	content: "";
	position: absolute;
	top: 0.7em;
	left: 0;
	width: 0.5rem;
	height: 0.5rem;
	background-color: var(--gm-accent);
}

.gm-projects a {
	color: var(--gm-fg);
	font-weight: 700;
}

.gm-projects a:hover {
	color: var(--gm-accent);
}

/* Selected articles reuse the Writing list rows */
.gm-home__posts {
	border-top: 1px solid var(--gm-line);
	border-bottom: 1px solid var(--gm-line);
}

.gm-feature__more a,
.gm-home__more a {
	color: var(--gm-fg);
	font-family: var(--gm-font-mono);
	font-size: var(--gm-step--1);
	text-underline-offset: 0.4em;
}

.gm-feature__more a:hover,
.gm-home__more a:hover {
	color: var(--gm-accent);
}

/* About / Now */
.gm-next {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--gm-space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gm-next__link {
	display: grid;
	gap: var(--gm-space-xs);
	height: 100%;
	padding: var(--gm-space-m);
	border: 1px solid var(--gm-line);
	border-radius: var(--gm-radius);
	color: var(--gm-fg);
	text-decoration: none;
	transition: border-color var(--gm-duration) ease;
}

.gm-next__link:hover {
	border-color: var(--gm-accent);
}

.gm-next__title {
	font-size: var(--gm-step-3);
	font-stretch: 112%;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.025em;
}

.gm-next__link:hover .gm-next__title {
	color: var(--gm-accent);
}

.gm-next__text {
	color: var(--gm-soft);
}

/* 12. Reduced motion: no animation or transitions anywhere
   ========================================================================== */

@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;
	}
}