/*
Theme Name: Omega7Red
Theme URI: https://omega7red.com/
Author: Dr. Warthan
Description: The Magnanimous Dr. Warthan's Steampunk Formulae. A responsive leather-and-parchment theme built around the original 2009 Omega7Red header artwork: brass goggles, the blood-red 7, and the flourish set, rebuilt at high resolution.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: omega7red
*/

/* ==========================================================================
   Fonts (self-hosted, SIL OFL / Apache 2.0)
   ========================================================================== */

@font-face { font-family: "Vollkorn"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("assets/fonts/vollkorn-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Vollkorn"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("assets/fonts/vollkorn-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Vollkorn"; font-style: italic; font-weight: 400 900; font-display: swap; src: url("assets/fonts/vollkorn-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Vollkorn"; font-style: italic; font-weight: 400 900; font-display: swap; src: url("assets/fonts/vollkorn-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Rye"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/rye-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Rye"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/rye-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Special Elite"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/special-elite-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Special Elite"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/special-elite-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ==========================================================================
   Tokens
   ========================================================================== */

:root {
	--font-text: "Vollkorn", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
	--font-display: "Rye", "Vollkorn", Georgia, serif;
	--font-label: "Special Elite", "Courier New", Courier, monospace;

	/* leather: the default, and what the header and footer always wear */
	--leather-bg: #14100b;
	--leather-bar: #181209;
	--leather-surface: #211a12;
	--leather-surface-2: #2b2217;
	--leather-line: #4b3c29;
	--leather-ink: #ece2cb;
	--leather-ink-soft: #c9baa0;
	--leather-ink-faint: #a39377;
	--leather-brass: #d3ae66;
	--leather-red: #ee6154;

	--bg: var(--leather-bg);
	--surface: var(--leather-surface);
	--surface-2: var(--leather-surface-2);
	--line: var(--leather-line);
	--ink: var(--leather-ink);
	--ink-soft: var(--leather-ink-soft);
	--ink-faint: var(--leather-ink-faint);
	--brass: var(--leather-brass);
	--red: var(--leather-red);
	--red-deep: #9c1c1e;
	--on-red: #fbf3e0;
	--media-bg: #0d0906; --media-cap: #b9a98a; --media-cap-link: #d9caa8; --mark-7: #7a1c1e; --tall-dim: .42;
	--field: #17110b;
	--field-inset: inset 0 1px 2px rgb(0 0 0 / .55);
	--cap: #d2453b;
	--shadow: 0 1px 2px rgb(0 0 0 / .5), 0 12px 30px -12px rgb(0 0 0 / .7);
	--noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .92  0 0 0 0 .78  0 0 0 .06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");

	--genre-steampunk: #d3ae66;
	--genre-dieselpunk: #9aa574;
	--genre-atomicpunk: #74b5aa;
	--genre-clockpunk: #d18a55;
	--genre-cyberpunk: #c887b2;
	--genre-failpunk: #d0574b;

	--gutter: clamp(1rem, 4vw, 2.5rem);
	--wrap: 75rem;
	--measure: 44rem;
	--radius: 3px;
	--bar-h: 3.75rem;

	color-scheme: dark;
}

:root[data-theme="parchment"] {
	--bg: #e8dec4;
	--surface: #f5eeda;
	--surface-2: #ece2c9;
	--line: #c8b78f;
	--ink: #281e15;
	--ink-soft: #4d3f2b;
	--ink-faint: #6b5b41;
	--brass: #6b4f12;
	--red: #a11d1d;
	--media-bg: #ded0b0; --media-cap: #5a4a30; --media-cap-link: #6b1a1a; --mark-7: #8e2723; --tall-dim: 1.12;
	--field: #fdfaf1;
	--field-inset: inset 0 1px 3px rgb(60 40 10 / .18);
	--cap: #9c1c1e;
	--shadow: 0 1px 2px rgb(60 40 10 / .18), 0 14px 30px -14px rgb(60 40 10 / .35);
	--noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .25  0 0 0 0 .17  0 0 0 0 .08  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");

	--genre-steampunk: #6b4f12;
	--genre-dieselpunk: #4e582a;
	--genre-atomicpunk: #0e5f59;
	--genre-clockpunk: #84451a;
	--genre-cyberpunk: #9c2a80;
	--genre-failpunk: #a11d1d;

	color-scheme: light;
}

/* The bar, hero and footer stay leather in both schemes: they are the book's cover. */
.site-header,
.site-footer {
	--bg: var(--leather-bg);
	--surface: var(--leather-surface);
	--surface-2: var(--leather-surface-2);
	--line: var(--leather-line);
	--ink: var(--leather-ink);
	--ink-soft: var(--leather-ink-soft);
	--ink-faint: var(--leather-ink-faint);
	--brass: var(--leather-brass);
	--red: var(--leather-red);
	/* every scheme-dependent token must be pinned here, or parchment values leak onto leather */
	--field: #17110b;
	--field-inset: inset 0 1px 2px rgb(0 0 0 / .55);
	--media-bg: #0d0906; --media-cap: #b9a98a; --media-cap-link: #d9caa8; --mark-7: #7a1c1e; --tall-dim: .42;
	--cap: #d2453b;
	--shadow: 0 1px 2px rgb(0 0 0 / .5), 0 12px 30px -12px rgb(0 0 0 / .7);
	color: var(--ink);
	color-scheme: dark;
}

/* ==========================================================================
   Base
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--bar-h) + 1rem);
}

body {
	margin: 0;
	background-color: var(--bg);
	background-image: radial-gradient(ellipse 90% 40rem at 50% -8rem, color-mix(in srgb, var(--brass) 9%, transparent), transparent 70%), var(--noise);
	color: var(--ink);
	font-family: var(--font-text);
	font-size: 1.125rem;
	line-height: 1.68;
	font-variant-numeric: lining-nums proportional-nums;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}

@media (min-width: 48em) {
	body { font-size: 1.1875rem; }
}

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

a {
	color: var(--red);
	text-decoration-thickness: .06em;
	text-underline-offset: .18em;
	transition: color .15s ease;
}
a:hover { color: var(--brass); }

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

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-text);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -.006em;
	margin: 2.2em 0 .6em;
	text-wrap: balance;
}

p { margin: 0 0 1.35em; }

hr {
	border: 0;
	height: auto;
	aspect-ratio: 680 / 192;
	margin: 2.75rem auto;
	max-width: 13rem;
	background: var(--brass);
	-webkit-mask: url("assets/img/orn-swash.webp") center / contain no-repeat;
	mask: url("assets/img/orn-swash.webp") center / contain no-repeat;
	opacity: .85;
}

::selection { background: var(--red-deep); color: var(--on-red); }

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

.skip-link {
	position: absolute; left: 1rem; top: -5rem; z-index: 100;
	background: var(--red-deep); color: var(--on-red);
	padding: .7rem 1.1rem; font-family: var(--font-label); text-decoration: none;
	border-radius: var(--radius);
}
.skip-link:focus { top: 1rem; color: var(--on-red); }
#main:focus { outline: none; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2 * var(--gutter), var(--measure)); margin-inline: auto; }

.label,
.kicker,
.section-label,
.entry-date,
.card__meta,
.entry-byline,
.count {
	font-family: var(--font-label);
	font-size: .78rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	font-variant-numeric: lining-nums;
}

/* ==========================================================================
   Buttons and form controls
   ========================================================================== */

.button,
button.button,
input[type="submit"] {
	display: inline-flex; align-items: center; gap: .5em;
	font-family: var(--font-label);
	font-size: .84rem; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2;
	color: var(--on-red); background: var(--red-deep);
	border: 1px solid color-mix(in srgb, var(--red-deep) 60%, #ff8a7a);
	border-radius: var(--radius);
	padding: .85em 1.35em .72em;
	text-decoration: none; cursor: pointer; max-width: 100%; white-space: normal;
	box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), 0 2px 0 rgb(0 0 0 / .35);
	transition: background-color .15s ease, transform .15s ease;
}
.button:hover, input[type="submit"]:hover { background: #b52426; color: var(--on-red); }
.button:active, input[type="submit"]:active { transform: translateY(1px); }

input[type="text"], input[type="email"], input[type="url"], input[type="search"], input[type="password"], textarea {
	width: 100%;
	font: inherit; font-size: 1rem; color: var(--ink);
	background: var(--field); box-shadow: var(--field-inset);
	border: 1px solid var(--line); border-radius: var(--radius);
	padding: .65em .8em;
}
input:focus-visible, textarea:focus-visible { outline-offset: 1px; border-color: var(--brass); }
::placeholder { color: var(--ink-faint); opacity: 1; }

.search-form { display: flex; position: relative; max-width: 26rem; }
.search-form .search-field { padding-right: 2.9rem; font-family: var(--font-label); font-size: .88rem; letter-spacing: .02em; }
.search-form .search-submit {
	position: absolute; inset: 0 0 0 auto; width: 2.75rem;
	display: grid; place-items: center;
	background: none; border: 0; color: var(--brass); cursor: pointer; border-radius: var(--radius);
}
.search-form .search-submit:hover { color: var(--red); }

/* ==========================================================================
   Header bar
   ========================================================================== */

.site-header { position: sticky; top: 0; z-index: 50; }

.bar {
	position: relative;
	background: var(--leather-bar);
	border-bottom: 1px solid #3a2d1d;
	color: var(--leather-ink);
	transition: box-shadow .2s ease;
}
.bar.is-stuck { box-shadow: 0 8px 24px -10px rgb(0 0 0 / .8); }
.bar::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
	background: #3a2d1d; opacity: .55; pointer-events: none;
}

.bar__inner {
	width: min(100% - 2 * var(--gutter), 90rem); margin-inline: auto;
	min-height: var(--bar-h);
	display: flex; align-items: center; gap: clamp(.75rem, 2vw, 2rem);
}

.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; flex: none; padding-block: .35rem; }
.brand__seven { height: 2.5rem; width: auto; filter: drop-shadow(0 1px 1px rgb(0 0 0 / .7)); }
.brand__word { height: 1.55rem; width: auto; }
.brand:hover .brand__seven { filter: drop-shadow(0 0 10px rgb(238 97 84 / .55)); }

.site-nav { margin-left: auto; display: flex; align-items: center; gap: 1.25rem; }
.site-nav .menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .1rem 1.35rem; }
.site-nav .menu a {
	display: block; padding: .5rem 0 .3rem;
	font-family: var(--font-label); font-size: .82rem; letter-spacing: .09em; text-transform: uppercase;
	color: var(--leather-ink-soft); text-decoration: none;
	border-bottom: 2px solid transparent;
}
.site-nav .menu a:hover { color: var(--leather-ink); border-bottom-color: var(--leather-brass); }
.site-nav .menu .current-menu-item > a,
.site-nav .menu .current_page_item > a { color: var(--leather-brass); border-bottom-color: var(--leather-red); }
.site-nav .menu .sub-menu, .site-nav .menu .children { display: none; }
.site-nav .menu { flex-wrap: nowrap; white-space: nowrap; }

/* desktop: search is an icon that drops a panel below the bar */
.site-nav__search {
	position: absolute; top: calc(100% + 1px); right: var(--gutter); z-index: 2;
	width: min(24rem, 100vw - 2 * var(--gutter));
	padding: .9rem; display: none;
	background: var(--leather-bar); border: 1px solid #4b3c29; border-top: 0; border-radius: 0 0 var(--radius) var(--radius);
	box-shadow: 0 18px 30px -10px rgb(0 0 0 / .8);
}
.site-nav__search.is-open { display: block; }
.site-nav__genres, .site-nav__rule { display: none; }
.site-nav__search .search-form { max-width: none; }
.site-nav__search .search-field { background: rgb(255 255 255 / .05); }

.scheme-toggle, .nav-toggle, .search-toggle {
	flex: none; display: inline-grid; place-items: center;
	background: none; color: var(--leather-brass); cursor: pointer;
	border: 1px solid #4b3c29; border-radius: 999px;
	min-width: 2.75rem; min-height: 2.75rem;
}
.scheme-toggle:hover, .nav-toggle:hover, .search-toggle:hover, .search-toggle[aria-expanded="true"] { border-color: var(--leather-brass); color: var(--leather-ink); }
.scheme-toggle .icon--sun { display: block; }
.scheme-toggle .icon--moon { display: none; }
:root[data-theme="parchment"] .scheme-toggle .icon--sun { display: none; }
:root[data-theme="parchment"] .scheme-toggle .icon--moon { display: block; }

.nav-toggle { display: none; border-radius: var(--radius); padding-inline: .8rem; grid-auto-flow: column; gap: .55rem; margin-left: auto; }
.nav-toggle__label { font-family: var(--font-label); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; padding-top: .15em; }
.nav-toggle__bars { display: grid; gap: 4px; width: 1.15rem; }
.nav-toggle__bars span { height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 68.74em) {
	.nav-toggle { display: inline-grid; }
	.site-nav {
		position: absolute; left: 0; right: 0; top: 100%;
		display: none; flex-direction: column; align-items: stretch; gap: 1rem;
		margin: 0; padding: 1rem var(--gutter) 1.5rem;
		background: var(--leather-bar);
		border-bottom: 1px solid #3a2d1d;
		box-shadow: 0 24px 40px -12px rgb(0 0 0 / .85);
		max-height: calc(100dvh - var(--bar-h)); overflow-y: auto;
	}
	.site-nav.is-open { display: flex; }
	.site-nav .menu { flex-direction: column; gap: 0; }
	.site-nav .menu a { padding: .95rem .25rem .8rem; font-size: .95rem; border-bottom: 1px solid #33281a; }
	.site-nav .menu a:hover { border-bottom-color: #33281a; }
	.site-nav .menu { flex-wrap: wrap; white-space: normal; }
	.search-toggle { display: none; }
	.site-nav__search { position: static; display: block; width: auto; padding: 0; background: none; border: 0; box-shadow: none; }
	.site-nav__search .search-field { padding-block: .75em; }
	.site-nav__genres { display: flex; flex-wrap: wrap; gap: .5rem; padding: .25rem 0 0; }
	.site-nav__genres .chip { color: var(--leather-ink-soft); border-color: #4b3c29; background: rgb(255 255 255 / .03); }
	.site-nav__rule { display: block; position: relative; height: 1px; margin: .9rem 12% .35rem; background: linear-gradient(90deg, transparent, var(--leather-brass) 30%, var(--leather-brass) 70%, transparent); opacity: .7; }
	.site-nav__rule::after { content: ""; position: absolute; left: 50%; top: 50%; width: .5rem; height: .5rem; margin: -.25rem 0 0 -.25rem; rotate: 45deg; background: var(--leather-bar); border: 1px solid var(--leather-brass); }

	/* modal-ish drawer: dim and freeze the page behind it */
	body.nav-open { overflow: hidden; }
	body.nav-open .bar::before {
		content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 100vh; height: 100dvh;
		background: rgb(6 4 2 / .72);
	}
	.site-nav { z-index: 1; }
}

/* The same squeeze happens on a wide phone with large text, which a viewport query cannot see:
   the bar measures itself in its own ems. (.bar is already the drawer's containing block.) */
.bar { container: bar / inline-size; }
@container bar (max-width: 23.75rem) {
	.bar__inner { gap: .5rem; }
	.brand { gap: .45rem; }
	.brand__seven { height: 2.2rem; }
	.brand__word { height: 1.3rem; }
	.nav-toggle { padding-inline: .7rem; }
	.nav-toggle__label { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; }
}
@container bar (max-width: 18rem) {
	.brand__word { display: none; }
}

/* very small phones: the word Menu goes, the bars stay (fallback for browsers without container queries) */
@media (max-width: 23.75em) {
	.bar__inner { gap: .5rem; }
	.brand { gap: .45rem; }
	.brand__seven { height: 2.2rem; }
	.brand__word { height: 1.3rem; }
	.nav-toggle { padding-inline: .7rem; }
	.nav-toggle__label { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
	background: #0b0805;
	border-bottom: 1px solid #3a2d1d;
	box-shadow: inset 0 -30px 60px -30px rgb(0 0 0 / .9);
}
.hero picture { display: block; }
/* mount the plate only when the mat either side is wide enough to read as a mat; a 24px sliver looks like a bug */
@media (min-width: 84em) {
	.hero picture { max-width: 72rem; margin-inline: auto; box-shadow: 0 0 0 1px #3a2d1d, 0 0 70px 10px rgb(0 0 0 / .65); }
}
.hero__img { display: block; width: 100%; height: auto; aspect-ratio: 2400 / 632; }
@media (max-width: 640px) { .hero__img { aspect-ratio: 1080 / 700; } }
@media (max-height: 30em) and (orientation: landscape) {
	/* a rotated phone: keep the whole lockup but stop it filling the screen */
	.hero__img { width: min(100%, calc(38vh * 2400 / 632)); margin-inline: auto; }
	@media (max-width: 640px) { .hero__img { width: min(100%, calc(38vh * 1080 / 700)); } }
}

/* ==========================================================================
   Genre strip
   ========================================================================== */

.genre-strip {
	border-bottom: 1px solid var(--line);
	background: color-mix(in srgb, var(--surface) 55%, transparent);
}
.genre-strip ul {
	list-style: none; margin: 0 auto; padding: .8rem var(--gutter);
	max-width: var(--wrap);
	display: flex; gap: .5rem; justify-content: safe center;
	overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 1.25rem, #000 calc(100% - 2.75rem), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 1.25rem, #000 calc(100% - 2.75rem), transparent);
}
.genre-strip ul::-webkit-scrollbar { display: none; }
/* ten chips need about 80em; below that one scrolling row beats a 9+1 wrap */
@media (min-width: 80em) {
	.genre-strip ul { flex-wrap: wrap; justify-content: center; overflow: visible; -webkit-mask-image: none; mask-image: none; }
}
.genre-strip li { flex: none; scroll-snap-align: center; }
@media (max-height: 30em) and (orientation: landscape) { .genre-strip ul { padding-block: .45rem; } }

.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }

.chip {
	--dot: var(--ink-faint);
	display: inline-flex; align-items: center; gap: .5em;
	font-family: var(--font-label); font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; line-height: 1;
	color: var(--ink-soft); text-decoration: none;
	padding: .62em .95em .5em;
	border: 1px solid var(--line); border-radius: 999px;
	background: color-mix(in srgb, var(--surface) 80%, transparent);
	transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.chip::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--dot); flex: none; margin-top: -.12em; }
.chip:hover { color: var(--ink); border-color: var(--dot); }
.chip:not([class*="genre-steampunk"]):not([class*="genre-dieselpunk"]):not([class*="genre-atomicpunk"]):not([class*="genre-clockpunk"]):not([class*="genre-cyberpunk"]):not([class*="genre-failpunk"])::before { display: none; }
.chip[aria-current="page"] { color: var(--ink); background: color-mix(in srgb, var(--dot) 22%, var(--surface)); border-color: var(--dot); box-shadow: inset 0 -2px 0 var(--dot); }
.chip--sm { font-size: .75rem; padding: .5em .8em .4em; }
.chip.genre-steampunk { --dot: var(--genre-steampunk); }
.chip.genre-dieselpunk { --dot: var(--genre-dieselpunk); }
.chip.genre-atomicpunk { --dot: var(--genre-atomicpunk); }
.chip.genre-clockpunk { --dot: var(--genre-clockpunk); }
.chip.genre-cyberpunk { --dot: var(--genre-cyberpunk); }
.chip.genre-failpunk { --dot: var(--genre-failpunk); }

/* ==========================================================================
   Ornaments
   ========================================================================== */

.ornament { position: relative; margin: clamp(2.5rem, 6vw, 4rem) auto; background: var(--brass); opacity: .9; }
.ornament--wings { width: min(72%, 23rem); aspect-ratio: 760 / 185; -webkit-mask: url("assets/img/orn-wings.webp") center / contain no-repeat; mask: url("assets/img/orn-wings.webp") center / contain no-repeat; }
.ornament--leaf { width: min(62%, 16rem); aspect-ratio: 680 / 255; -webkit-mask: url("assets/img/orn-leaf.webp") center / contain no-repeat; mask: url("assets/img/orn-leaf.webp") center / contain no-repeat; }
.ornament--cartouche { width: min(88%, 28rem); aspect-ratio: 940 / 99; background: none; opacity: 1; }
.ornament--cartouche::before {
	content: ""; position: absolute; inset: 0; background: var(--brass); opacity: .9;
	-webkit-mask: url("assets/img/orn-cartouche.webp") center / contain no-repeat; mask: url("assets/img/orn-cartouche.webp") center / contain no-repeat;
}
.ornament--cartouche span {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%);
	font-family: var(--font-display); font-size: clamp(1rem, 2.6vw, 1.35rem); line-height: 1; color: var(--red);
}

.section-label { display: flex; align-items: center; gap: 1rem; color: var(--brass); margin: 0 0 1.5rem; }
.section-label::before, .section-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line)); }
.section-label::after { background: linear-gradient(270deg, transparent, var(--line)); }

/* ==========================================================================
   Index: lead post and card grid
   ========================================================================== */

.site-main { display: block; padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 7vw, 5rem); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20.5rem), 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
/* auto-fill keeps empty tracks, so one result sat beside two thirds of a blank row */
.grid:has(> :last-child:nth-child(1)) { grid-template-columns: minmax(min(100%, 20.5rem), 26rem); justify-content: center; }
@media (min-width: 46em) {
	.grid:has(> :last-child:nth-child(2)) { grid-template-columns: repeat(2, minmax(min(100%, 20.5rem), 26rem)); justify-content: center; }
}

.card {
	position: relative; display: flex; flex-direction: column;
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
	box-shadow: var(--shadow); overflow: hidden;
	transition: transform .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-3px); border-color: var(--brass); }
.card:focus-within { border-color: var(--brass); }

.card__media { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--media-bg); overflow: hidden; border-bottom: 1px solid var(--line); }
.card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .card__media img { transform: scale(1.035); }
/* portrait and square art (covers, posters) is shown whole rather than sliced */
.card__media--tall { background: var(--media-bg); }
.card__media--tall::before {
	content: ""; position: absolute; inset: -14%;
	background: var(--card-backdrop, none) center / cover no-repeat;
	filter: blur(20px) brightness(var(--tall-dim)) saturate(1.15);
}
.card__media--tall img { position: relative; object-fit: contain; padding: .55rem; filter: drop-shadow(0 4px 14px rgb(0 0 0 / .6)); }

.card__body { display: flex; flex-direction: column; flex: 1; gap: .7rem; padding: 1.15rem 1.25rem 1.4rem; }
.card__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem; color: var(--ink-faint); }
.card__meta .chips { position: relative; z-index: 2; }
.card__title { margin: 0; font-size: 1.42rem; font-weight: 750; line-height: 1.16; min-block-size: 2.32em; }
.card--lead .card__title { min-block-size: 0; }
/* 4. a single-column grid has no neighbour to align titles with */
@media (max-width: 40em) { .card__title { min-block-size: 0; } }
@media (max-width: 40em) {
	.card__media--tall::before { display: none; }
	.card__media--tall img { object-fit: cover; object-position: 50% 12%; padding: 0; filter: none; }
}
.card__title a { color: var(--ink); text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card:hover .card__title a { color: var(--brass); }
.card__excerpt { margin: 0; color: var(--ink-soft); font-size: .98rem; line-height: 1.58; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.card__media--mark { display: grid; place-items: center; background: var(--media-bg) var(--noise); }
.card__mark {
	display: block; height: 46%; aspect-ratio: 119 / 200; background: var(--mark-7); transition: background-color .3s ease;
	-webkit-mask: url("assets/img/seven.webp") center / contain no-repeat; mask: url("assets/img/seven.webp") center / contain no-repeat;
}
.card:hover .card__mark { background: color-mix(in srgb, var(--mark-7) 65%, var(--brass)); }
@media (forced-colors: active) { .card__mark { background: CanvasText; } }

.card--lead {
	box-shadow: var(--shadow), 0 0 0 5px var(--bg), 0 0 0 6px var(--line);
	margin: 6px;
}
.card--lead .card__title { font-size: clamp(1.7rem, 1.25rem + 1.6vw, 2.4rem); font-weight: 800; line-height: 1.08; }
.card--lead .card__excerpt { font-size: 1.08rem; -webkit-line-clamp: 5; line-clamp: 5; }
.card--lead .card__body { gap: 1rem; padding: clamp(1.25rem, 3vw, 2.25rem); justify-content: center; }
.card--lead .button { align-self: flex-start; position: relative; z-index: 2; margin-top: .35rem; }
.card--lead .card__title a::after { display: none; }
.card--lead:hover { transform: none; }

@media (min-width: 56.25em) {
	.card--lead { flex-direction: row; }
	.card--lead .card__media { flex: 1.35; aspect-ratio: auto; min-height: 24rem; border-bottom: 0; border-right: 1px solid var(--line); }
	.card--lead .card__body { flex: 1; }
}

/* ==========================================================================
   Archive headers, pagination, 404
   ========================================================================== */

.archive-head { text-align: center; margin: 0 auto clamp(2rem, 5vw, 3.25rem); max-width: 46rem; }
.kicker { color: var(--brass); margin: 0 0 .6rem; }
.archive-title {
	font-family: var(--font-display); font-weight: 400; letter-spacing: .01em;
	font-size: clamp(2rem, 1.2rem + 3.4vw, 3.5rem); line-height: 1.08;
	margin: 0; color: var(--ink);
	text-shadow: 0 2px 0 rgb(0 0 0 / .35);
}
:root[data-theme="parchment"] .archive-title { text-shadow: none; }
.archive-title--query { font-family: var(--font-text); font-weight: 700; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); line-height: 1.25; overflow-wrap: anywhere; text-shadow: none; }
.notfound--empty + .section-label { margin-top: clamp(2.5rem, 6vw, 4rem); }
.archive-desc { color: var(--ink-soft); margin-top: 1rem; }
.archive-count { font-family: var(--font-label); font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); margin: 1rem 0 0; }
.archive-search { display: flex; justify-content: center; margin-top: 1.5rem; }
.archive-search .search-form { width: 100%; }

.pagination, .comments-pagination { margin-top: clamp(2.5rem, 6vw, 4rem); }
.nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.page-numbers {
	display: inline-grid; place-items: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0 .9rem;
	font-family: var(--font-label); font-size: .84rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
	color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
a.page-numbers:hover { color: var(--ink); border-color: var(--brass); }
.page-numbers.current { background: var(--red-deep); border-color: var(--red-deep); color: var(--on-red); }
.page-numbers.dots { background: none; border-color: transparent; }

.notfound { text-align: center; max-width: 40rem; margin-inline: auto; }
.notfound__code { font-family: var(--font-display); font-size: clamp(5rem, 22vw, 11rem); line-height: .9; margin: 0 0 1rem; color: var(--brass); text-shadow: 0 4px 0 rgb(0 0 0 / .4); }
.notfound__code span { color: #b32226; }
.notfound__lede { color: var(--ink-soft); margin-top: 1.25rem; }
.notfound--empty { margin-top: 1rem; }
.notfound--empty .archive-title { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); }

/* ==========================================================================
   Single entries
   ========================================================================== */

.entry { width: min(100% - 2 * var(--gutter), var(--measure)); margin-inline: auto; }

.entry-header { text-align: center; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.entry-header__meta { display: flex; justify-content: center; margin-bottom: 1.1rem; }
.entry-title {
	font-size: clamp(2.1rem, 1.35rem + 3.3vw, 3.6rem); font-weight: 800; line-height: 1.04; letter-spacing: -.015em;
	margin: 0;
}
.entry--page .entry-title { font-family: var(--font-display); font-weight: 400; letter-spacing: .01em; line-height: 1.1; }
.entry-byline { color: var(--ink-faint); margin: 1.1rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .3rem .7rem; }
.entry-byline a { color: inherit; }
.entry-byline a:hover { color: var(--brass); }
.entry-header::after {
	content: ""; display: block; width: min(60%, 13.5rem); aspect-ratio: 680 / 192; margin: 1.5rem auto 0;
	background: var(--brass); opacity: .85;
	-webkit-mask: url("assets/img/orn-swash.webp") center / contain no-repeat; mask: url("assets/img/orn-swash.webp") center / contain no-repeat;
}

.entry-content > * { margin-block: 0 1.35em; }
.entry-content > :last-child { margin-bottom: 0; }
.entry-content h2 { font-size: 1.75rem; margin-top: 2.1em; }
.entry-content h3 { font-size: 1.4rem; margin-top: 1.9em; }
.entry-content h4 { font-size: 1.15rem; margin-top: 1.7em; font-family: var(--font-label); letter-spacing: .06em; text-transform: uppercase; font-weight: 400; color: var(--brass); }
.entry-content strong { font-weight: 750; color: color-mix(in srgb, var(--ink) 92%, var(--brass)); }
.entry-content ul, .entry-content ol { padding-left: 1.4em; }
.entry-content li { margin-bottom: .45em; }
.entry-content li::marker { color: var(--brass); }

.single .entry-content > p:first-of-type::first-letter {
	font-family: var(--font-display); font-weight: 400;
	float: left; font-size: 3.05em; line-height: .9; padding: .07em .12em 0 0;
	color: var(--cap);
}
@media (max-width: 34em) {
	.single .entry-content > p:first-of-type::first-letter { font-size: 2.45em; }
}

.entry-content figure { margin-inline: 0; }
.entry-content figure.wp-block-image,
.entry-content .wp-caption { margin-block: 0 1.9em; text-align: center; max-width: 100%; }
.entry-content figure.wp-block-image:not(.alignleft):not(.alignright) {
	background: var(--media-bg); padding: clamp(1.1rem, 5vw, 1.75rem);
	border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.entry-content figure.wp-block-image:not(.alignleft):not(.alignright) img { box-shadow: 0 2px 14px rgb(0 0 0 / .5), 0 0 0 1px rgb(0 0 0 / .35); border-radius: 2px; }
:root[data-theme="parchment"] .entry-content figure.wp-block-image:not(.alignleft):not(.alignright) img { box-shadow: 0 1px 10px rgb(40 26 8 / .28), 0 0 0 1px rgb(40 26 8 / .22); }
.entry-content figure.wp-block-image:not(.alignleft):not(.alignright) figcaption { color: var(--media-cap); margin-top: .85rem; }
.entry-content figure.wp-block-image:not(.alignleft):not(.alignright) figcaption a { color: var(--media-cap-link); }
.entry-content .wp-caption img,
.entry-content figure.alignleft img,
.entry-content figure.alignright img,
.entry-content > p > img,
.entry-content > p > a > img {
	border: 1px solid var(--line); background: var(--surface-2); padding: 5px; border-radius: var(--radius);
	box-shadow: var(--shadow);
}
/* The daily pipeline writes inline sizing on its hero images. Let them use the
   column, and show the June-July 2026 batch whole instead of centre-cropped. */
.entry-content .wp-block-image img[style*="max-height"] { max-height: min(27rem, 58vh) !important; }
.entry-content .wp-block-image img[style*="object-fit"] {
	object-fit: contain !important; width: auto !important; max-width: 100% !important; height: auto !important;
	display: block; margin-inline: auto;
}

/* --w/--h are written by o7r_reserve_image_box(): natural size, capped by the column and the max height */
.entry-content .wp-block-image img[style*="--w:"] {
	width: min(100%, calc(var(--w) * 1px), calc(min(27rem, 58vh) * var(--w) / var(--h))) !important;
	height: auto !important; max-height: none !important; aspect-ratio: var(--w) / var(--h);
}

figcaption, .wp-caption-text, .wp-element-caption {
	font-family: var(--font-label); font-size: .78rem; letter-spacing: .04em; line-height: 1.5;
	color: var(--ink-faint); text-align: center; margin-top: .8rem;
}
figcaption a { color: var(--ink-soft); }

.entry-content blockquote {
	margin-inline: 0; padding: 1.1rem 1.4rem 1.1rem 1.6rem;
	border-left: 3px solid var(--brass);
	background: color-mix(in srgb, var(--surface) 75%, transparent);
	font-style: italic; color: var(--ink-soft);
	border-radius: 0 var(--radius) var(--radius) 0;
}
.entry-content blockquote > :last-child { margin-bottom: 0; }
.entry-content blockquote cite { display: block; margin-top: .6rem; font-style: normal; font-family: var(--font-label); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }

.entry-content pre, .entry-content code { font-family: var(--font-label); font-size: .9em; }
.entry-content pre { overflow-x: auto; padding: 1rem 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.entry-content table { width: 100%; border-collapse: collapse; font-size: .95rem; display: block; overflow-x: auto; }
.entry-content th, .entry-content td { border: 1px solid var(--line); padding: .5rem .7rem; text-align: left; }
.entry-content th { font-family: var(--font-label); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brass); }

.entry-content iframe { display: block; border: 0; }
.entry-content > iframe[src*="youtube"], .entry-content > p > iframe[src*="youtube"],
.entry-content > iframe[src*="vimeo"], .entry-content > p > iframe[src*="vimeo"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.wp-block-embed { margin-block: 0 1.9em; }
.wp-block-embed__wrapper { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #000; }
.wp-block-embed iframe { border-radius: 0; }
.wp-block-embed__wrapper > iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.yt-facade { position: relative; display: block; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.wp-block-embed__wrapper > .yt-facade { position: absolute; inset: 0; aspect-ratio: auto; }
.yt-facade img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: opacity .2s ease, transform .4s ease; }
.yt-facade:hover img, .yt-facade:focus-visible img { opacity: 1; transform: scale(1.015); }
.yt-facade__play {
	position: absolute; left: 50%; top: 50%; width: 4.5rem; height: 3.15rem; margin: -1.575rem 0 0 -2.25rem;
	border-radius: .75rem; background: rgb(23 17 11 / .82); border: 1px solid var(--leather-brass, #c9a15a);
	box-shadow: 0 6px 24px rgb(0 0 0 / .6); transition: background .2s ease;
}
.yt-facade__play::after {
	content: ""; position: absolute; left: 50%; top: 50%; margin: -.7rem 0 0 -.4rem;
	border-style: solid; border-width: .7rem 0 .7rem 1.15rem; border-color: transparent transparent transparent #f3e7cf;
}
.yt-facade:hover .yt-facade__play, .yt-facade:focus-visible .yt-facade__play { background: #a3241f; }
.entry-content object, .entry-content embed { max-width: 100%; }

.aligncenter { display: block; margin-inline: auto; }
.alignwide { width: min(100vw - 2 * var(--gutter), 60rem); max-width: none; margin-inline: calc(50% - min(50vw - var(--gutter), 30rem)); }
.alignfull { width: 100vw; max-width: none; margin-inline: calc(50% - 50vw); }
@media (min-width: 37.5em) {
	.alignleft { float: left; margin: .3rem 1.6rem 1rem 0; max-width: 50%; }
	.alignright { float: right; margin: .3rem 0 1rem 1.6rem; max-width: 50%; }
}
.entry-content::after { content: ""; display: table; clear: both; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .75rem; }
.gallery-item { margin: 0; }
.gallery img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius); }

.page-links { font-family: var(--font-label); font-size: .84rem; letter-spacing: .08em; text-transform: uppercase; display: flex; gap: .75rem; margin-top: 2rem; }

.entry-footer { margin-top: clamp(2rem, 5vw, 3rem); }
.entry-footer .ornament { margin-block: 0 2rem; }
.entry-tags, .share { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: baseline; gap: .5rem .9rem; margin-bottom: 1.1rem; }
@media (max-width: 30em) { .entry-tags, .share { grid-template-columns: minmax(0, 1fr); } }
.entry-tags .label, .share .label { color: var(--brass); flex: none; }
.entry-tags ul, .share ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem .5rem; }
.entry-tags a, .share a, .share button {
	font-family: var(--font-label); font-size: .78rem; letter-spacing: .05em; line-height: 1;
	color: var(--ink-soft); text-decoration: none; cursor: pointer;
	display: inline-block; padding: .55em .75em .42em;
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
/* after the shared rule above: its `border` shorthand would otherwise reset the style */
.share a, .share button { background: transparent; border-style: dashed; }
.share a:hover, .share button:hover { background: var(--surface); border-style: solid; }
.entry-tags a::before { content: "#"; color: var(--ink-faint); margin-right: .1em; }
.entry-tags a:hover, .share a:hover, .share button:hover { color: var(--ink); border-color: var(--brass); }
.entry-tags .more { font-family: var(--font-label); font-size: .74rem; letter-spacing: .06em; color: var(--ink-faint); }

.post-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(2.5rem, 6vw, 4rem); }
.post-nav__link {
	display: flex; flex-direction: column; gap: .45rem; padding: 1.1rem 1.25rem;
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
	text-decoration: none; color: var(--ink);
	transition: border-color .15s ease, transform .15s ease;
}
.post-nav__link:hover { border-color: var(--brass); color: var(--ink); transform: translateY(-2px); }
.post-nav__link .label { color: var(--brass); }
.post-nav__link .title { font-weight: 700; line-height: 1.22; font-size: 1.05rem; }
.post-nav__link--next { text-align: right; grid-column: 2; }
.post-nav__link--prev .label::before { content: "\2190\00a0"; }
.post-nav__link--next .label::after { content: "\00a0\2192"; }
@media (max-width: 34em) {
	.post-nav { grid-template-columns: minmax(0, 1fr); }
	.post-nav__link--next { grid-column: 1; text-align: left; }
	.post-nav__link--next .label::after { content: none; }
	.post-nav__link--next .label::before { content: "\2192\00a0"; }
	.post-nav > span:empty { display: none; }
}

/* ==========================================================================
   Comments
   ========================================================================== */

.comments { margin-top: clamp(3rem, 7vw, 5rem); }
.comments__title, .comment-reply-title {
	font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); letter-spacing: .01em;
	margin: 0 0 1.5rem; text-align: center;
}
.comment-reply-title small { display: block; margin-top: .6rem; font-family: var(--font-label); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }

.comment-list, .comment-list .children { list-style: none; margin: 0; padding: 0; }
.comment-list .children { margin: 1rem 0 0 clamp(.75rem, 3vw, 2rem); padding-left: clamp(.75rem, 3vw, 1.5rem); border-left: 1px solid var(--line); }
.comment-list > li { margin-bottom: 1.25rem; }
.comment-list .children > li { margin-bottom: 1rem; }

.comment-body { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem 1rem; }
.bypostauthor > .comment-body { box-shadow: inset 4px 0 0 var(--red-deep); }
.comment-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; margin-bottom: .75rem; }
.comment-author { display: flex; align-items: center; gap: .7rem; font-weight: 700; }
.comment-author .avatar { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 2px solid var(--brass); background: var(--surface-2); filter: sepia(.85) saturate(.55) hue-rotate(-12deg) brightness(.95); }
.comment-author .fn { font-style: normal; min-width: 0; overflow-wrap: anywhere; }
.comment-author .fn a { color: var(--ink); text-decoration: none; }
.comment-author .says { display: none; }
.bypostauthor > .comment-body .fn::after {
	content: "The Doctor"; margin-left: .6rem; vertical-align: .15em;
	font-family: var(--font-label); font-size: .75rem; font-weight: 400; letter-spacing: .08em; text-transform: uppercase;
	color: var(--on-red); background: var(--red-deep); padding: .3em .55em .18em; border-radius: 2px;
}
.comment-metadata { font-family: var(--font-label); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; }
.comment-metadata a { color: var(--ink-faint); text-decoration: none; }
.comment-metadata a:hover { color: var(--brass); }
.comment-metadata .edit-link { margin-left: .6rem; }
.comment-content { font-size: 1.02rem; }
.comment-content > :last-child { margin-bottom: .6rem; }
.comment-awaiting-moderation { display: block; font-family: var(--font-label); font-size: .78rem; color: var(--brass); }
.reply { text-align: right; }
.comment-reply-link { font-family: var(--font-label); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.comments__closed { text-align: center; color: var(--ink-faint); font-family: var(--font-label); font-size: .84rem; letter-spacing: .06em; }

.comment-respond { margin-top: 2.5rem; padding: clamp(1.25rem, 3vw, 2rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.comment-list .comment-respond { margin-top: 1rem; }
.comment-form p { margin-bottom: 1rem; }
.comment-form label { display: block; font-family: var(--font-label); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .35rem; }
.comment-form .comment-notes, .comment-form .logged-in-as { font-size: .92rem; color: var(--ink-faint); }
.comment-form .required { color: var(--red); }
.comment-form-cookies-consent { display: flex; gap: .6rem; align-items: flex-start; }
.comment-form-cookies-consent label { text-transform: none; letter-spacing: 0; font-family: var(--font-text); font-size: .92rem; margin: 0; }
.comment-form-cookies-consent input { margin-top: .35rem; accent-color: var(--red-deep); }
.comment-form .form-submit { margin-bottom: 0; }
@media (min-width: 40em) {
	.comment-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
	.comment-form > * { grid-column: 1 / -1; }
	.comment-form .comment-form-author { grid-column: 1; }
	.comment-form .comment-form-email { grid-column: 2; }
}

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

.site-footer {
	background-color: #100c08;
	background-image: radial-gradient(ellipse 80% 30rem at 50% 0, rgb(211 174 102 / .07), transparent 70%), var(--noise);
	border-top: 1px solid #3a2d1d;
	padding-bottom: 2.5rem;
	font-size: 1rem;
}
.site-footer { padding-top: 2.5rem; }
.site-footer .ornament--wings { margin: 0 auto 2.25rem; background: var(--leather-brass); }
.site-footer a { color: var(--leather-ink-soft); text-decoration: none; }
.site-footer a:hover { color: var(--leather-brass); text-decoration: underline; }

.footer-grid { display: grid; gap: 2.25rem clamp(1.5rem, 4vw, 3rem); grid-template-columns: minmax(0, 1fr); margin-top: .5rem; }
.footer-col { min-width: 0; }
@media (min-width: 40em) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68em) { .footer-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1.5fr); align-items: start; } }
@media (max-width: 39.99em) {
	/* one stack; each link list runs in two columns while they are at least 7rem wide (large text drops to one),
	   so a 6-link list beside an 18-link list no longer leaves a hole */
	.footer-grid { grid-template-columns: minmax(0, 1fr); }
	.footer-grid .plain-list { columns: 2 7rem; column-gap: 1.75rem; }
	.footer-grid .plain-list li { break-inside: avoid; }
	.footer-grid .plain-list--cols li:nth-child(n + 13) { display: none; }
	/* on a phone the archive is seven year links, not twenty-seven month links */
	/* .footer-grid prefix: these must outrank the base .year-list rules that follow this block */
	.footer-grid .year-list { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
	.footer-grid .year-list > li { display: flex; align-items: baseline; gap: .45rem; border: 0; padding: 0; }
	.footer-grid .year-list .months { display: none; }
}

.footer-title { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; letter-spacing: .02em; color: var(--leather-brass); margin: 0 0 1rem; overflow-wrap: anywhere; }
@media (min-width: 68em) { .footer-title { font-size: clamp(1.05rem, 1.45vw, 1.3rem); white-space: nowrap; } }
.footer-col p { color: var(--leather-ink-soft); font-size: .98rem; line-height: 1.6; }
.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list li { padding: .32rem 0; border-bottom: 1px dotted #3a2d1d; display: flex; justify-content: space-between; gap: .75rem; align-items: baseline; }
.plain-list a { min-width: 0; overflow-wrap: anywhere; }
.plain-list--cols { columns: 2 7rem; column-gap: 1.75rem; }
.plain-list--cols li { break-inside: avoid; }
.count { color: var(--leather-ink-faint); font-size: .75rem; }

.year-list { list-style: none; margin: 0; padding: 0; }
.year-list > li { display: grid; grid-template-columns: 3.4rem 1.9rem minmax(0, 1fr); align-items: baseline; gap: .2rem .6rem; padding: .4rem 0; border-bottom: 1px dotted #3a2d1d; }
.year-list .year { font-family: var(--font-display); font-size: 1.12rem; color: var(--leather-ink); }
.year-list .months { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .1rem .15rem; }
.year-list .months a { font-family: var(--font-label); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; padding: .45rem .35rem .3rem; display: inline-block; }

.footer-widgets { margin-bottom: 2.5rem; display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.widget-title { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; color: var(--leather-brass); margin: 0 0 .8rem; }

.colophon { text-align: center; margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: 2rem; border-top: 1px solid #3a2d1d; }
.colophon__sig { width: min(70%, 17rem); height: auto; opacity: .88; }
.colophon__motto { font-style: italic; color: var(--leather-ink-soft); margin: .9rem 0 .5rem; }
.colophon__legal { font-family: var(--font-label); font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; color: var(--leather-ink-faint); margin: 0; }
.colophon__legal a { margin-left: .5rem; }

/* ==========================================================================
   Touch: every control gets a 44px target without changing how it looks
   ========================================================================== */

@media (pointer: coarse) {
	.chip { position: relative; min-height: 2.35rem; padding-inline: 1.05em; }
	.chip--sm { min-height: 2rem; }
	.chip::after { content: ""; position: absolute; inset: -.45rem -.15rem; }
	.chip--sm::after { inset: -.6rem -.15rem; }
	.entry-tags a, .share a, .share button { display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: 1em; }
	.button, input[type="submit"] { min-height: 2.75rem; }
	.plain-list li { padding: 0; }
	.plain-list a { display: flex; align-items: center; min-height: 2.75rem; flex: 1; }
	/* anything under 16px makes iOS Safari zoom the page on focus */
	input[type="text"], input[type="email"], input[type="url"], input[type="search"], input[type="password"], textarea, .search-form .search-field { font-size: max(1rem, 16px); }
	.year-list .year { display: inline-block; padding: .55rem 0; }
	.year-list .months a { padding: .85rem .5rem .7rem; }
	.comment-reply-link, .comment-metadata a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .2rem; }
	.colophon__legal a { display: inline-block; padding: .8rem .4rem; }
	.entry-byline a { display: inline-flex; align-items: center; min-height: 2.75rem; }
}

/* ==========================================================================
   Forced colours (Windows High Contrast): masked ornaments would paint as
   canvas-on-canvas, so they become plain system-coloured shapes or step aside.
   ========================================================================== */

@media (forced-colors: active) {
	.ornament, .ornament--cartouche::before, .entry-header::after { forced-color-adjust: none; background: CanvasText; opacity: 1; }
	.ornament--cartouche { background: none; }
	.ornament--cartouche span { color: CanvasText; }
	hr { forced-color-adjust: none; background: CanvasText; -webkit-mask: none; mask: none; height: 1px; max-width: none; }
	.chip::before { forced-color-adjust: none; background: CanvasText; }
	.button, input[type="submit"], .page-numbers.current { border: 1px solid ButtonText; }
	.card, .comment-body, .comment-respond, .post-nav__link { border-color: CanvasText; }
}

/* ==========================================================================
   Motion, print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
	.card:hover, .post-nav__link:hover { transform: none; }
	.card:hover .card__media img { transform: none; }
}

@media print {
	:root { --bg: #fff; --surface: #fff; --ink: #000; --ink-soft: #222; --ink-faint: #444; --line: #bbb; --red: #000; --brass: #000; }
	body { background: #fff; font-size: 11.5pt; }
	.bar, .hero, .genre-strip, .site-footer, .post-nav, .share, .comment-respond, .ornament, .entry-header::after { display: none !important; }
	.entry { width: 100%; }
	a { text-decoration: underline; }
	.entry-content img { box-shadow: none; }
}