@font-face {
	font-family: 'Oxygen';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/assets/fonts/oxygen-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Oxygen';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/assets/fonts/oxygen-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Oxygen';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('/assets/fonts/oxygen-700-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Oxygen';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('/assets/fonts/oxygen-700-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	--primary-link-colour: #f77d65;

	/* Light is the base. The dark blocks below redefine only what changes. */
	--ground: #e8e8e8;
	--ground-image: radial-gradient(circle at 50% 40%, #f4f4f4 0%, #dcdcdc 55%, #e8e8e8 100%);
	--sheet-shadow: 0 2px 18px rgba(0, 0, 0, 0.09);
	--quote-ground: #dddddd;
	--sheet: #ffffff;
	--ink: #1c1c1c;
	--ink-body: #333333;
	--ink-quiet: #767676;
	--on-ground: #333333;
	--on-ground-strong: #1c1c1c;
	--panel-muted: #f5f5f5;
	--rule: #e6e6e6;
	--widget-bg: #1c1c1c;
	--widget-image: linear-gradient(160deg, #333333 0%, #161616 60%);
	--widget-ink: rgba(255, 255, 255, 0.82);
	--widget-rule: rgba(255, 255, 255, 0.14);
	--nav-bar: #f2f2f2;
	--nav-bar-hover: #e9e9e9;
	--link-hover: #000000;

	--colour-mid: #444444;

	--shell-max: 1290px;
	--aside-width: 300px;
	--content-max: 72ch;
	--panel-radius: 10px;
	--widget-radius: 14px;
	--panel-pad: clamp(1.5rem, 4vw, 3.9rem);

	--font-body: 'Oxygen', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	color-scheme: light;
}

/*
 * Dark is defined once and applied twice: for a device set to dark that
 * has not been overridden, and for an explicit choice from the toggle.
 */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) {
		--ground: #2b2b2b;
		--ground-image: radial-gradient(circle at 50% 40%, #3d3d3d 0%, #202020 55%, #3a3a3a 100%);
		--sheet-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
		--quote-ground: #262626;
		--sheet: #1e1e1e;
		--ink: #f2f2f2;
		--ink-body: #cfcfcf;
		--ink-quiet: #9a9a9a;
		--on-ground: rgba(255, 255, 255, 0.72);
		--on-ground-strong: #ffffff;
		--panel-muted: #262626;
		--rule: #383838;
		--widget-bg: #111111;
		--widget-image: linear-gradient(160deg, #2a2a2a 0%, #111111 60%);
		--widget-ink: rgba(255, 255, 255, 0.82);
		--widget-rule: rgba(255, 255, 255, 0.14);
		--nav-bar: #232323;
		--nav-bar-hover: #2b2b2b;
		--link-hover: #ffffff;
		--colour-mid: #bbbbbb;

		color-scheme: dark;
	}
}

:root[data-theme='dark'] {
	--ground: #2b2b2b;
	--ground-image: radial-gradient(circle at 50% 40%, #3d3d3d 0%, #202020 55%, #3a3a3a 100%);
	--sheet-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
	--quote-ground: #262626;
	--sheet: #1e1e1e;
	--ink: #f2f2f2;
	--ink-body: #cfcfcf;
	--ink-quiet: #9a9a9a;
	--on-ground: rgba(255, 255, 255, 0.72);
	--on-ground-strong: #ffffff;
	--panel-muted: #262626;
	--rule: #383838;
	--widget-bg: #111111;
	--widget-image: linear-gradient(160deg, #2a2a2a 0%, #111111 60%);
	--widget-ink: rgba(255, 255, 255, 0.82);
	--widget-rule: rgba(255, 255, 255, 0.14);
	--nav-bar: #232323;
	--nav-bar-hover: #2b2b2b;
	--link-hover: #ffffff;
	--colour-mid: #bbbbbb;

	color-scheme: dark;
}

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

body {
	margin: 0;
	background-color: var(--ground);
	background-image: var(--ground-image);
	background-attachment: fixed;
	color: var(--ink-body);
	font: 400 1.0625rem/1.9 var(--font-body);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: var(--primary-link-colour);
	transition: color 0.4s ease;
}

a:hover {
	color: var(--link-hover);
}

::selection {
	background-color: var(--primary-link-colour);
	color: #ffffff;
}

h1,
h2,
h3,
h4 {
	line-height: 1.22;
	font-weight: 700;
	color: var(--ink);
	margin: 0 0 0.5em;
}

p,
ul,
ol,
blockquote,
figure {
	margin: 0 0 1.5em;
}

blockquote {
	border-left: 3px solid var(--primary-link-colour);
	margin-left: 0;
	padding: 0.2em 0 0.2em 1.25em;
	color: var(--colour-mid);
}

code,
pre {
	font-family: Consolas, Monaco, "Courier New", monospace;
	font-size: 0.9em;
}

pre {
	background: var(--panel-muted);
	padding: 1em 1.25em;
	overflow-x: auto;
	border-radius: 6px;
}

mark {
	background-color: #dddddd;
	color: #333333;
	font-style: normal;
	padding: 2px 10px 5px;
}

hr {
	border: 0;
	border-top: 1px solid var(--rule);
	margin: 2.5rem 0;
}

.shell {
	width: min(100% - 2.5rem, var(--shell-max));
	margin-inline: auto;
}

.skip-link {
	position: absolute;
	left: -9999px;
}

.skip-link:focus {
	left: 1rem;
	top: 1rem;
	background: var(--sheet);
	color: var(--ink);
	padding: 0.6rem 1rem;
	z-index: 10;
}

/* --- Shell -------------------------------------------------------- */

.layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--aside-width);
	gap: 1.9rem;
	align-items: start;
	padding: 2.75rem 0 3.5rem;
}

.layout--full {
	grid-template-columns: minmax(0, 1fr);
	max-width: 1010px;
	margin-inline: auto;
}

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

/* A white sheet of paper on the dark ground. */
.panel {
	background: var(--sheet);
	border-radius: var(--panel-radius);
	overflow: hidden;
}

.panel__inner {
	padding: var(--panel-pad);
}

.panel + .panel {
	margin-top: 1.9rem;
}

/* --- Site header and footer --------------------------------------- */

.site-header {
	padding: 1.4rem 0;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
}

.site-title {
	margin: 0;
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--on-ground-strong);
}

.site-title a {
	color: var(--on-ground-strong);
	text-decoration: none;
}

.nav {
	display: flex;
	flex-wrap: wrap;
	gap: 1.4rem;
	font-size: 0.92rem;
}

.nav a {
	color: var(--on-ground);
	text-decoration: none;
}

.site-title a:hover,
.nav a:hover {
	color: var(--primary-link-colour);
}

.site-footer {
	border-top: 1px solid var(--widget-rule);
	padding: 3rem 0 2.5rem;
	text-align: center;
	font-size: 0.9rem;
	color: var(--ink-quiet);
}

.site-footer__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2.2rem;
	margin-bottom: 1.9rem;
}

.site-footer__nav a {
	color: var(--on-ground);
	text-decoration: none;
}

.site-footer__nav a:hover {
	color: var(--primary-link-colour);
}

.site-footer__legal {
	margin: 0;
}

/* --- Post and page ------------------------------------------------ */

.post-image {
	margin: 0;
}

.post-image img {
	width: 100%;
	display: block;
}

.post-title {
	font-size: clamp(1.9rem, 1.1rem + 2.6vw, 2.9rem);
	margin-bottom: 0.55em;
}

.page .post-title {
	text-align: center;
	margin-bottom: 1.4em;
}

.byline {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}

.post-meta {
	color: var(--ink-quiet);
	font-size: 0.95rem;
}

.post-meta a {
	color: var(--ink-quiet);
	text-decoration: none;
}

.post-meta a:hover {
	color: var(--primary-link-colour);
}

.post-content {
	max-width: var(--content-max);
}

.post-content :is(h2, h3, h4) {
	margin-top: 1.9em;
}

.post-content h2 {
	font-size: 1.65rem;
}

.post-content h3 {
	font-size: 1.3rem;
}

.post-content figure {
	margin-inline: 0;
}

.post-content figcaption {
	color: var(--ink-quiet);
	font-size: 0.85rem;
	text-align: center;
	margin-top: 0.5rem;
}

.post-foot {
	max-width: var(--content-max);
	margin-top: 3rem;
	font-size: 0.98rem;
	color: var(--ink-body);
}

.post-foot a {
	text-decoration: none;
}

/* --- Share icons ------------------------------------------------- */

.share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	max-width: var(--content-max);
	margin-top: 2rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--rule);
}

.share__label {
	color: var(--ink-quiet);
	font-size: 0.85rem;
	margin-right: 0.4rem;
}

.share__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	border: 1px solid var(--rule);
	border-radius: 50%;
	background: transparent;
	color: var(--ink-body);
	cursor: pointer;
	padding: 0;
	font: inherit;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.share__link:hover,
.share__link:focus-visible {
	color: var(--primary-link-colour);
	border-color: var(--primary-link-colour);
}

/* Print keeps the site name, the post title and the post content, marked
   .print-keep in the template, and nothing else. Only on pages that mark
   something, so any other page prints as it always has. */
.print-site {
	display: none;
}

@media print {
	body:has(.print-keep) :not(.print-keep, .print-keep *, :has(.print-keep)) {
		display: none !important;
	}

	body:has(.print-keep),
	body:has(.print-keep) :has(.print-keep),
	body:has(.print-keep) .print-keep {
		position: static !important;
		float: none !important;
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		background: none !important;
		transform: none !important;
		opacity: 1 !important;
		overflow: visible !important;
		color: #000000 !important;
	}

	body:has(.print-keep) .print-site {
		display: block !important;
		font-size: 10pt;
		margin-bottom: 0.5em !important;
	}

	body:has(.print-keep) h1.print-keep {
		margin-bottom: 1em !important;
	}
}

/* --- Related posts ------------------------------------------------ */

.related {
	margin-top: 1.9rem;
}

.related__title {
	font-weight: 400;
	font-size: 1.9rem;
	margin: 0 0 1.2rem;
}

/* --- Journal entries (Live Blogging pages with no site override) -- */

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

.journal-list__item {
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--rule);
}

.journal-list__item:last-child {
	border-bottom: 0;
}

.journal-list__item .post-meta {
	margin: 0 0 0.3rem;
}

/* --- Previous and next -------------------------------------------- */

.post-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--widget-rule);
	border-radius: var(--panel-radius);
	overflow: hidden;
	margin-top: 1.9rem;
	font-size: 0.95rem;
}

.post-nav a {
	background: var(--nav-bar);
	padding: 1.1rem 1.5rem;
	text-decoration: none;
	display: block;
}

.post-nav a:hover {
	background: var(--nav-bar-hover);
	color: var(--primary-link-colour);
}

.post-nav__label {
	display: block;
	color: var(--ink-quiet);
	font-size: 0.85rem;
	margin-bottom: 0.2rem;
}

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

@media (max-width: 40rem) {
	.post-nav {
		grid-template-columns: minmax(0, 1fr);
	}

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

/* --- Comments ------------------------------------------------------ */

.comments {
	margin-top: 3rem;
}

.comments__title {
	font-size: 1.3rem;
	margin-bottom: 1.6rem;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var(--rule);
}

.comment-list {
	list-style: none;
	margin: 0 0 2.4rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

.comment-list--nested {
	margin: 1.1rem 0 0;
	padding-left: clamp(1.1rem, 4vw, 2.1rem);
	border-left: 2px solid var(--rule);
}

/* A sheet of its own, the same language as .panel and .card. */
.comment {
	background: var(--sheet);
	border-radius: var(--panel-radius);
	box-shadow: var(--sheet-shadow);
	padding: 1.3rem 1.5rem;
}

.comment-list--nested .comment {
	background: var(--panel-muted);
	box-shadow: none;
}

.comment__meta {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin-bottom: 0.7rem;
}

.comment__avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: block;
	box-shadow: 0 0 0 3px var(--panel-muted);
}

.comment__author {
	font-weight: 700;
	color: var(--ink);
}

.comment__date {
	color: var(--ink-quiet);
	font-size: 0.85rem;
}

.comment__date::before {
	content: '\00b7';
	margin-right: 0.8rem;
}

.comment__body {
	margin-bottom: 0.7rem;
	color: var(--ink-body);
}

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

.comment__reply {
	background: none;
	border: 1px solid var(--rule);
	border-radius: 999px;
	padding: 0.3rem 0.95rem;
	font: inherit;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--ink-quiet);
	cursor: pointer;
	transition: border-color 0.3s ease, color 0.3s ease;
}

.comment__reply:hover {
	border-color: var(--primary-link-colour);
	color: var(--primary-link-colour);
}

.comment-form {
	background: var(--panel-muted);
	border-radius: var(--panel-radius);
	padding: var(--panel-pad);
}

/* A reply form clones from <template> and sits inside the thread, indented
   the same as the comment it answers, rather than the page sending the
   reader down to the one form at the bottom. */
.comment-reply {
	list-style: none;
}

.comment-form--reply {
	padding: 1.1rem 1.3rem;
}

.comment-form__actions {
	display: flex;
	align-items: center;
	gap: 1.2rem;
}

.comment-form--reply .comment-form__status {
	display: block;
	margin: 0.7rem 0 0;
}

.comment-form__cancel {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: 0.85rem;
	color: var(--ink-quiet);
	text-decoration: underline;
	cursor: pointer;
}

.comment-form__cancel:hover {
	color: var(--primary-link-colour);
}

.comment-form label {
	display: block;
	font-size: 0.9rem;
	color: var(--ink-quiet);
	margin-bottom: 1.1rem;
}

.comment-form label span {
	font-weight: 400;
}

.comment-form input,
.comment-form textarea {
	display: block;
	width: 100%;
	margin-top: 0.4rem;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--rule);
	border-radius: 6px;
	background: var(--sheet);
	color: var(--ink-body);
	font: inherit;
}

.comment-form input:focus,
.comment-form textarea:focus {
	outline: 2px solid var(--primary-link-colour);
	outline-offset: 1px;
}

.comment-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1.4rem;
}

@media (max-width: 40rem) {
	.comment-form__row {
		grid-template-columns: 1fr;
	}
}

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

.comment-form__submit {
	border: 0;
	cursor: pointer;
}

.comment-form__status {
	display: inline-block;
	margin: 0.9rem 0 0 1rem;
	font-size: 0.9rem;
	color: var(--ink-quiet);
}

/* --- Listings ----------------------------------------------------- */

.archive-head {
	background: var(--panel-muted);
	border-radius: var(--panel-radius);
	padding: 2rem 2.2rem 1.6rem;
	margin-bottom: 1.9rem;
}

.archive-head h1 {
	font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.3rem);
	margin-bottom: 0.4em;
}

.archive-head p {
	margin: 0;
	color: var(--ink-body);
}

.card-deck {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
	gap: 1.9rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.card {
	display: flex;
	flex-direction: column;
	background: var(--sheet);
	border-radius: var(--panel-radius);
	overflow: hidden;
	height: 100%;
}

.card-img-top {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--panel-muted);
}

.card-img-top img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.card-body {
	padding: 1.6rem 1.9rem 2rem;
	flex: 1 1 auto;
}

.kicker {
	display: inline-block;
	color: var(--primary-link-colour);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	margin-bottom: 0.7rem;
}

.card-title {
	font-size: 1.42rem;
	line-height: 1.25;
	margin: 0 0 0.7rem;
}

.card-title a {
	color: var(--ink);
	text-decoration: none;
}

.card-title a:hover {
	color: var(--primary-link-colour);
}

.card-text {
	margin: 0;
	color: var(--ink-body);
	font-size: 0.98rem;
	line-height: 1.7;
}

/* --- Sidebar ------------------------------------------------------ */

.widget {
	background: var(--widget-bg);
	background-image: var(--widget-image);
	border-radius: var(--widget-radius);
	padding: 1.6rem 1.7rem 1.2rem;
	margin-bottom: 1.9rem;
	color: var(--widget-ink);
}

.widget__title {
	color: #ffffff;
	font-weight: 400;
	font-size: 1.9rem;
	margin: 0 0 0.9rem;
}

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

.widget li {
	border-bottom: 1px solid var(--widget-rule);
}

.widget li:last-child {
	border-bottom: 0;
}

.widget a {
	display: block;
	color: var(--widget-ink);
	text-decoration: none;
	padding: 0.62rem 0;
	font-size: 0.95rem;
	line-height: 1.45;
}

.widget a:hover {
	color: var(--primary-link-colour);
}

/* Widgets from wp-admin can hold prose; only list links are rows. */
.widget--cms p a {
	display: inline;
	padding: 0;
	font-size: inherit;
	text-decoration: underline;
}

.widget--cms p {
	margin: 0 0 0.9rem;
}

/* --- Navigation dropdown ------------------------------------------ */

.nav__group {
	position: relative;
	display: inline-block;
}

.nav__drop {
	position: absolute;
	left: 0;
	top: 100%;
	min-width: 12rem;
	background: var(--widget-bg);
	background-image: var(--widget-image);
	border-radius: 8px;
	padding: 0.4rem 0;
	display: none;
	z-index: 20;
}

.nav__group:hover .nav__drop,
.nav__group:focus-within .nav__drop {
	display: block;
}

.nav__drop a {
	display: block;
	padding: 0.5rem 1rem;
	color: var(--widget-ink);
	white-space: nowrap;
}

/* --- Theme toggle -------------------------------------------------- */

.theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	padding: 0;
	background: none;
	border: 1px solid currentColor;
	border-radius: 50%;
	color: var(--on-ground);
	cursor: pointer;
	font: inherit;
	font-size: 1.3rem;
	line-height: 1;
}

.theme-toggle:hover {
	color: var(--primary-link-colour);
}

.theme-toggle:focus-visible,
.nav-toggle:focus-visible {
	outline: 2px solid var(--primary-link-colour);
	outline-offset: 2px;
}

.theme-toggle__on,
.theme-toggle__off {
	display: none;
}

:root[data-theme='dark'] .theme-toggle__off,
:root[data-theme='light'] .theme-toggle__on {
	display: inline;
}

:root:not([data-theme]) .theme-toggle__on {
	display: inline;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) .theme-toggle__on {
		display: none;
	}

	:root:not([data-theme]) .theme-toggle__off {
		display: inline;
	}
}

.site-header__right {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.4rem;
}

/* --- Block editor content ----------------------------------------- */

/*
 * A page composed in the block editor. Blocks sit at the reading measure
 * by default; wide and full width blocks break out, which is what makes a
 * cover block fill the window.
 */
.entry > * {
	max-width: var(--content-max);
	margin-inline: auto;
}

.entry > .alignwide {
	max-width: var(--wide-max);
}

.entry > .alignfull {
	max-width: none;
	width: 100%;
	margin-inline: 0;
}

.entry > .alignfull:first-child {
	margin-top: 0;
}

/* Inside the sheet the measure is set by the sheet, not by each block. */
.post-content > .alignwide,
.post-content > .alignfull {
	max-width: none;
	width: 100%;
}

.wp-block-cover,
.wp-block-cover-image {
	color: #ffffff;
}

.wp-block-cover :is(h1, h2, h3, h4) {
	color: inherit;
}

.wp-block-button__link {
	background-color: var(--primary-link-colour);
	border-radius: 4px;
	color: #ffffff;
	font-weight: 700;
	padding: 0.85em 2em;
	text-decoration: none;
}

.wp-block-button__link:hover {
	background-color: var(--ink);
	color: #ffffff;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: none;
	border: 1px solid currentColor;
	color: inherit;
}

.wp-block-quote,
.wp-block-pullquote {
	color: var(--ink-body);
}

.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--rule);
}

.wp-block-image figcaption,
.wp-block-gallery figcaption {
	color: var(--ink-quiet);
	font-size: 0.85rem;
}

/* Core prints its own gaps; these only cover the space between blocks. */
.entry > * + * {
	margin-top: var(--wp--style--block-gap, 1.75rem);
}

/* --- Small screen menu -------------------------------------------- */

.nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	padding: 0;
	background: none;
	border: 1px solid currentColor;
	border-radius: 50%;
	color: var(--on-ground);
	cursor: pointer;
	font: inherit;
	line-height: 1;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	background: currentColor;
	display: block;
	height: 3px;
	width: 22px;
	border-radius: 2px;
}

.nav-toggle__bars {
	position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
	content: '';
	position: absolute;
}

.nav-toggle__bars::before {
	top: -7px;
}

.nav-toggle__bars::after {
	top: 7px;
}

/* The hamburger becomes an X while the menu is open, reacting to the same
   aria-expanded the toggle script already sets - no extra class needed.
   The middle bar fades out; the other two meet in the middle and rotate. */
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	transition: transform 0.25s ease, opacity 0.25s ease, top 0.25s ease, background-color 0.25s ease;
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bars {
	background: transparent;
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bars::before {
	top: 0;
	transform: rotate(45deg);
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bars::after {
	top: 0;
	transform: rotate(-45deg);
}

@media (max-width: 62rem) {
	.nav-toggle {
		display: inline-flex;
		position: relative;
		z-index: 201;
	}

	.site-header__inner {
		flex-wrap: wrap;
	}

	/* Closed by default; open is a full-height panel over everything else,
	   not a strip that pushes the page down. */
	.site-header__right {
		display: none;
	}

	.site-header__right.is-open {
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: fixed;
		inset: 0;
		background: var(--sheet);
		padding: 6rem 2rem 3rem;
		z-index: 200;
		overflow-y: auto;
		gap: 0;
	}

	.nav {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.25rem;
	}

	.nav a {
		display: block;
		padding: 0.4rem 0;
		font-size: 2rem;
		font-weight: 700;
		color: var(--ink);
	}

	.nav__group {
		display: block;
	}

	.nav__drop {
		display: block;
		position: static;
		background: none;
		padding: 0 0 0 1rem;
	}

	.nav__drop a {
		font-size: 1.15rem;
		font-weight: 400;
		color: var(--ink);
	}

	.theme-toggle {
		margin-top: 2rem;
		align-self: flex-start;
		color: var(--ink);
		border-color: var(--rule);
	}
}

/* --- Light mode needs the sheet to lift off the ground -------------- */

.panel,
.card,
.archive-head {
	box-shadow: var(--sheet-shadow);
}

.post-nav {
	box-shadow: var(--sheet-shadow);
}

/* ================================================================== */
/* Landing sections                                                   */
/* ================================================================== */

/*
 * These dress core blocks rather than replacing them, so an editor keeps
 * every control they already know. Structure lives here; a site adds its
 * own flourishes on top.
 */

/* --- Hero ---------------------------------------------------------- */

.wp-block-cover.is-style-landing-hero {
	min-height: min(800px, 100svh);
	padding: 0 1.5rem;
}

.is-style-landing-hero .wp-block-cover__inner-container {
	max-width: 62rem;
	text-align: center;
}

.is-style-landing-hero :is(h1, h2) {
	color: #ffffff;
	font-family: var(--font-body, inherit);
	font-size: clamp(2.4rem, 1.4rem + 3.6vw, 5rem);
	font-weight: 400;
	letter-spacing: 2px;
	margin: 0 0 0.3em;
}

.is-style-landing-hero p {
	font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
	letter-spacing: 2px;
	margin-bottom: 2.2rem;
	opacity: 0.9;
}

/* --- Image band ---------------------------------------------------- */

.wp-block-cover.is-style-landing-band {
	background-attachment: fixed;
	min-height: 650px;
	padding: 3rem 1.5rem;
}

.is-style-landing-band .wp-block-cover__inner-container {
	max-width: 46rem;
	text-align: center;
}

.is-style-landing-band :is(h1, h2, h3) {
	color: #ffffff;
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem);
	margin: 0 0 0.6em;
}

/* --- Quote strip --------------------------------------------------- */

.wp-block-group.is-style-landing-quote {
	background-color: var(--quote-ground);
	padding: 3.5rem 1.5rem;
	text-align: center;
}

.is-style-landing-quote :is(h1, h2, h3, p) {
	font-size: clamp(1.3rem, 1rem + 1.4vw, 2.2rem);
	font-weight: 700;
	margin: 0;
}

/* --- Plain section ------------------------------------------------- */

.wp-block-group.is-style-landing-section {
	background-color: var(--sheet);
	padding: clamp(3rem, 7vw, 5rem) 1.5rem;
	text-align: center;
}

.is-style-landing-section > :is(h1, h2) {
	font-size: clamp(1.7rem, 1.2rem + 2vw, 3rem);
	margin-bottom: 0.6em;
}

.is-style-landing-section > p {
	color: var(--ink-quiet);
	font-size: 1.2rem;
	letter-spacing: 2px;
	margin: 0 auto 3rem;
	max-width: 42rem;
}

/* --- Feature cards ------------------------------------------------- */

.wp-block-columns.is-style-landing-cards {
	gap: 1.9rem;
	margin-inline: auto;
	max-width: var(--wide-max);
}

.wp-block-cover.is-style-landing-feature {
	align-items: flex-end;
	justify-content: flex-start;
	min-height: 350px;
	overflow: hidden;
	padding: 0;
	transition: 800ms;
}

/* The picture lifts a little as the panel opens over it. */
.is-style-landing-feature .wp-block-cover__image-background {
	transition: transform 800ms;
}

.is-style-landing-feature:hover .wp-block-cover__image-background {
	transform: scale(1.08);
}

.is-style-landing-feature .wp-block-cover__inner-container {
	height: 35px;
	overflow: hidden;
	transition: 800ms;
	width: 100%;
}

.is-style-landing-feature:hover .wp-block-cover__inner-container {
	height: 170px;
}

.is-style-landing-feature :is(h2, h3, h4) {
	background-color: #000000;
	color: #ffffff;
	font-family: var(--font-body, inherit);
	font-size: 0.9rem;
	height: 35px;
	letter-spacing: 2px;
	line-height: 26px;
	margin: 0;
	overflow: hidden;
	padding: 5px 15px 0;
	text-align: left;
	text-overflow: ellipsis;
	text-transform: uppercase;
	transition: 800ms;
	white-space: nowrap;
}

.is-style-landing-feature:hover :is(h2, h3, h4) {
	background-color: var(--primary-link-colour);
}

.is-style-landing-feature p {
	font-size: 0.85rem;
	letter-spacing: 1px;
	line-height: 1.65;
	margin: 0.7rem 0 0;
	padding: 0 15px;
	text-align: left;
}

/* --- Stay in touch -------------------------------------------------- */

.wp-block-cover.is-style-landing-connect {
	background-attachment: fixed;
	min-height: 420px;
	padding: 3rem 1.5rem 4rem;
}

.is-style-landing-connect .wp-block-cover__inner-container {
	text-align: center;
}

.is-style-landing-connect :is(h1, h2, h3) {
	color: #ffffff;
	font-size: clamp(2rem, 1.4rem + 3vw, 4rem);
	margin: 1rem 0 2.5rem;
}

.is-style-landing-connect .wp-block-social-links {
	gap: 2rem;
	justify-content: center;
}

.is-style-landing-connect .wp-social-link {
	background-color: rgba(255, 255, 255, 0.08);
	border: 1px solid #ffffff;
	border-radius: 50%;
	height: 84px;
	transition: 800ms;
	width: 84px;
}

.is-style-landing-connect .wp-social-link:hover {
	background-color: rgba(255, 255, 255, 0.4);
	transform: rotate(720deg) scale(0.8);
}

.is-style-landing-connect .wp-social-link svg {
	height: 32px;
	width: 32px;
}

/* Fixed backgrounds misbehave on phones, and 650px is most of a screen. */
@media (max-width: 62rem) {
	.wp-block-cover.is-style-landing-band,
	.wp-block-cover.is-style-landing-connect {
		background-attachment: scroll;
	}

	.wp-block-cover.is-style-landing-band {
		min-height: 480px;
	}

	/* No hover on a touch screen, so the panel stays open. */
	.is-style-landing-feature .wp-block-cover__inner-container {
		height: auto;
		min-height: 35px;
	}
}

/* ================================================================== */
/* Pixels Photography                                                  */
/* ================================================================== */

:root {
	--primary-link-colour: #bb2020;
	--link-hover: #bb2020;
	--ground: #ffffff;
	--ground-image: none;
	--pixels-header-h: 88px;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) {
		--ground: #3a3a3a;
		--ground-image: radial-gradient(circle at 50% 40%, #5a5a5a 0%, #333333 55%, #3a3a3a 100%);
	}
}

:root[data-theme='dark'] {
	--ground: #3a3a3a;
	--ground-image: radial-gradient(circle at 50% 40%, #5a5a5a 0%, #333333 55%, #3a3a3a 100%);
}

/* --- Header: fixed and transparent, so a landing page's cover photo
   runs up to the top of the viewport behind it -------------------- */

.pixels-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: transparent;
	padding: 0.7rem 0;
	transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

/* Once scrolled past the top, the header stops floating over anything and
   reads better as its own solid panel. */
.pixels-header.is-scrolled {
	background: var(--sheet);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

/* The white brand text over a landing page's cover only works while the
   header is transparent; once it's a solid sheet it needs the ordinary
   ground-based colour back, same as everywhere else. */
body.is-landing-page .pixels-header.is-scrolled .pixels-logo a,
body.is-landing-page .pixels-header.is-scrolled .pixels-tagline {
	color: var(--on-ground-strong);
	text-shadow: none;
}

body.is-landing-page .pixels-header.is-scrolled .pixels-tagline {
	color: var(--on-ground);
}

.pixels-brand {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.pixels-logo a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--on-ground-strong);
	text-decoration: none;
	font-size: 1.3rem;
	font-weight: 700;
}

.pixels-logo__icon {
	display: block;
}

.pixels-tagline {
	margin: 0;
	color: var(--on-ground);
	font-size: 0.68rem;
	opacity: 0.85;
}

/* On a landing page the header floats transparently over a cover photo of
   unknown brightness, so the brand text can't rely on the ground colour -
   it needs to read against a photo either way. */
body.is-landing-page .pixels-logo a,
body.is-landing-page .pixels-tagline {
	color: #ffffff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

/*
 * Every link is its own solid pill, since the bar itself is transparent and
 * needs to stay readable over a cover photo, plain ground or dark mode
 * alike. Solid rather than translucent: a translucent pill picks up
 * whatever's behind it and ends up a different shade in each place, which
 * is why they read unevenly. The dropdown trigger gets a small caret so it
 * reads as a group rather than a plain link.
 *
 * Desktop only: below the nav-toggle breakpoint, the menu is the shared
 * network's full-height panel instead (big, left-aligned, plain text), not
 * a stack of pills - this is what pixels' own pill styling would otherwise
 * override.
 */
@media (min-width: 62.0625rem) {
	/*
	 * The shared nav is a flex row with the default align-items: stretch, so
	 * the dropdown trigger - wrapped in an extra .nav__group span the plain
	 * links don't have - stretched to a different height than its siblings.
	 * Centring the row's items instead sizes each to its own content.
	 */
	.pixels-header .nav {
		align-items: center;
	}

	.pixels-header .nav a {
		display: inline-flex;
		align-items: center;
		background: #666666;
		color: #ffffff;
		padding: 0.4rem 1rem;
		border-radius: 999px;
		text-decoration: none;
	}

	.pixels-header .nav a:hover {
		background: var(--primary-link-colour);
	}

	.pixels-header .nav__group > a::after {
		content: '\25be';
		margin-left: 0.4rem;
		font-size: 0.7em;
	}
}

.pixels-header .nav-toggle {
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.6);
	background: #666666;
}

/* A small round icon, not another pill in the row - it isn't a nav item. */
.pixels-header .theme-toggle {
	border: 0;
	background: #666666;
	color: #ffffff;
}

.pixels-header .theme-toggle:hover {
	background: var(--primary-link-colour);
}

/* A fixed header takes nothing out of the document flow, so an ordinary
   page needs the space put back; a landing page's cover is meant to sit
   behind the header instead, so it's the one template left alone. */
body.is-inner-page #main {
	padding-top: var(--pixels-header-h);
}

/*
 * --- Footer: double border, links divided by a rule, the source theme's
 * tree illustration sitting behind the links on the right -------------
 *
 * Same reasoning as the notebook texture above: the tree lives on a
 * ::before so dark mode can invert just the illustration, leaving the
 * footer's links and copyright text alone.
 */

.site-footer {
	position: relative;
	border-top: 3px double var(--rule);
	min-height: 104px;
}

.site-footer::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url('/assets/img/content-box-bottom.gif') no-repeat right top;
	pointer-events: none;
}

.site-footer > .shell {
	position: relative;
	z-index: 1;
}

/* A purpose-made dark version rather than an inverted light one: same tree,
   composited onto the site's own dark ground colour. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) .site-footer::before {
		background-image: url('/assets/img/content-box-bottom-dark.png');
	}
}

:root[data-theme='dark'] .site-footer::before {
	background-image: url('/assets/img/content-box-bottom-dark.png');
}

.site-footer__nav a {
	padding: 0 0.9rem;
	border-right: 1px solid var(--rule);
}

.site-footer__nav a:last-child {
	border-right: 0;
}

/*
 * --- Notebook-paper texture on article cards and content -------------
 *
 * Ruled lines and a margin line, drawn with gradients rather than a raster
 * image: crisp at any zoom, and since the lines are var(--rule) they follow
 * light/dark mode on their own, no invert filter needed. The texture sits
 * on a ::before rather than directly on the panel's own background, so it
 * stays behind the real content instead of drawing over it.
 */

.panel,
.card {
	position: relative;
	background-color: var(--sheet);
}

/*
 * Two thin lines with a gap between, echoing border: double, same as the
 * rule under the post header - a gradient can't use border-style itself.
 * Both gradients already cover the full box edge to edge, so they cross at
 * every ruled line; the margin line is listed first (the top layer) and
 * fully opaque so it reads as one continuous stripe running over the ruled
 * lines, rather than blending into a faint smudge at each crossing.
 */
.panel::before,
.card::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, transparent 0 36px, #bf4a4a 36px 37px, transparent 37px 40px, #bf4a4a 40px 41px, transparent 41px),
		repeating-linear-gradient(to bottom, transparent 0 27px, var(--rule) 27px 28px);
	pointer-events: none;
}

.panel > *,
.card > * {
	position: relative;
	z-index: 1;
}

/* panel__inner's own padding (--panel-pad) shrinks to 1.5rem/24px on a
   narrow screen, less than the margin line's 41px, so the line was running
   through wrapped text there. 3rem clears it at any width. */
.panel__inner {
	padding-left: max(var(--panel-pad), 3rem);
}

/* The card's own padding (1.9rem, from the shared base) is narrower than
   the margin line's 39px offset, so text was starting just to the left of
   it rather than clearing it. The panel's own padding is already generous
   enough not to need this. */
.card-body {
	padding-left: 3rem;
}

/* The same margin-line colour and weight, as a divider under the title and
   byline - a horizontal rule in the same hand as the vertical one. */
/*
 * Bled out to the panel's own edges with a negative margin, then padded
 * back in by the same amount - the border-bottom this creates spans the
 * panel's full width and reaches the margin line, rather than stopping at
 * panel__inner's narrower, already-padded content column. The title and
 * byline text land in exactly the same place either way.
 */
.post-head {
	border-bottom: 4px double rgba(191, 74, 74, 0.5);
	margin: 0 calc(-1 * var(--panel-pad)) 1.5rem calc(-1 * max(var(--panel-pad), 3rem));
	padding: 0 var(--panel-pad) 1.5rem max(var(--panel-pad), 3rem);
}

/* --- Featured image as a polaroid taped onto the page, single posts
   for now (not pages) - a thick white frame, a slight tilt and a soft
   shadow, rather than the shared full-bleed banner treatment. */
.is-single:not(.page) .post-image {
	width: 75%;
	margin: 0.5rem auto 2rem;
	padding: 14px 14px 44px;
	background: #ffffff;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
	transform: rotate(-3deg);
}

.is-single:not(.page) .post-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* --- Same two touches on the article cards: the thumbnail as a small
   polaroid, and the title's rule bled out to meet the margin line, same
   technique as the single post's - card-body's own padding (1.9rem, 3rem
   on the left) undone by a matching negative margin. */
.card-img-top {
	width: 85%;
	aspect-ratio: 4 / 3;
	margin: 1.4rem auto 0.5rem;
	padding: 10px 10px 26px;
	background: #ffffff;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
	transform: rotate(-2deg);
}

.card-title {
	margin: 0 -1.9rem 1rem -3rem;
	padding: 0 1.9rem 1rem 3rem;
	border-bottom: 4px double rgba(191, 74, 74, 0.5);
}