/* Codewalkers: park brochure grid.
   Black band, topic strip, modular grid, calm reading column. */

:root {
	--cw-black: var(--wp--preset--color--black, #000);
	--cw-ink: var(--wp--preset--color--ink, #141413);
	--cw-ink-2: var(--wp--preset--color--ink-2, #55554f);
	--cw-paper: var(--wp--preset--color--paper, #fff);
	--cw-panel: var(--wp--preset--color--panel, #f2f1ec);
	--cw-hairline: var(--wp--preset--color--hairline, #d9d8d2);
	--cw-on-black-2: #bdbdb6;
	--cw-sans: var(--wp--preset--font-family--archivo);
	--cw-serif: var(--wp--preset--font-family--literata);
	--cw-mono: var(--wp--preset--font-family--mono);
	--cw-gutter: clamp(1.25rem, 4vw, 3.5rem);
	--cw-wide: 83rem;
	--cw-col-gap: clamp(1rem, 2vw, 1.5rem);
	--cw-runhead-h: 4rem;
	--cw-focus: var(--cw-ink);

	/* Topic colour: strip ground and accents on paper; --topic-hi is the same hue lifted for use on black. */
	--topic: var(--wp--preset--color--graphite, #3a3a37);
	--topic-hi: #a3a39c;
}

.cw-topic-technology { --topic: var(--wp--preset--color--technology, #2b5170); --topic-hi: #7fb0d6; }
.cw-topic-genealogy { --topic: var(--wp--preset--color--genealogy, #6b4f3a); --topic-hi: #d0a27c; }
.cw-topic-life { --topic: var(--wp--preset--color--life, #2f5d50); --topic-hi: #79bfa8; }

/* ---------- Browser surfaces ---------- */

html {
	scrollbar-color: var(--cw-black) var(--cw-panel);
	scroll-padding-top: calc(var(--cw-runhead-h) + 1rem);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* Focus and anchors land below the sticky running head (and the admin bar when it's there). */
html:has(body.admin-bar) { scroll-padding-top: calc(var(--cw-runhead-h) + 1rem + var(--wp-admin--admin-bar--height, 32px)); }

body {
	background: var(--cw-paper);
	color: var(--cw-ink);
	caret-color: var(--topic);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection {
	background: var(--topic);
	color: var(--cw-paper);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--cw-focus);
	outline-offset: 3px;
	border-radius: 0;
}

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

body .skip-link.screen-reader-text:focus {
	top: 0.75rem;
	left: var(--cw-gutter);
	padding: 0.875rem 1.25rem;
	background: var(--cw-paper);
	color: var(--cw-black);
	font: 700 0.9375rem/1 var(--cw-sans);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
	outline: 3px solid var(--cw-paper);
	outline-offset: 3px;
}

/* Authored paragraphs end on a phrase, not a lone word. */
.cw-prose p,
.cw-recent__excerpt p,
.cw-row__excerpt p,
.cw-intro p,
.cw-empty p { text-wrap: pretty; }

.wp-site-blocks { padding: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.wp-site-blocks > .cw-main { flex: 1 0 auto; }
body.admin-bar .wp-site-blocks { min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 32px)); }
.wp-site-blocks > * { margin-block: 0; }
.cw-main { margin: 0; }
.cw-main > *,
.cw-lead > *,
.cw-archive > *,
.cw-search > *,
.cw-lead,
.cw-lead__item,
.cw-lead__item > li,
.cw-archive,
.cw-search { margin-block: 0; }

.cw-lead__item,
.cw-recent__list,
.cw-rows {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---------- Running head (header part) ---------- */

.cw-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--cw-black);
	color: var(--cw-paper);
	--cw-focus: var(--cw-paper);
}

body.admin-bar .cw-header { top: var(--wp-admin--admin-bar--height, 32px); }

.cw-runhead {
	min-height: var(--cw-runhead-h);
	padding: 0 var(--cw-gutter);
	gap: 1.5rem;
}

.cw-sitename,
.cw-sitename a {
	margin: 0;
	font: 800 1.125rem/1 var(--cw-sans);
	letter-spacing: -0.005em;
	color: var(--cw-paper);
	text-decoration: none;
}

.cw-sitename a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em; }

.cw-runhead__tools { gap: clamp(1rem, 2.5vw, 2rem); }

.cw-nav {
	font: 500 0.9375rem/1 var(--cw-sans);
	gap: clamp(1rem, 2.5vw, 1.875rem);
}

.cw-nav .wp-block-navigation-item__content {
	color: var(--cw-paper);
	text-decoration: none;
	padding-block: 0.5rem;
}

.cw-nav .wp-block-navigation-item__content:hover,
.cw-nav .current-menu-item > .wp-block-navigation-item__content {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.35em;
}

.cw-nav .wp-block-navigation__responsive-container-open,
.cw-nav .wp-block-navigation__responsive-container-close {
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	margin-right: -0.625rem;
	color: var(--cw-paper);
}

/* The overlay reads from the left gutter like every other column, and carries search. */
.cw-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--cw-gutter);
	text-align: left;
}

.cw-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.cw-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	--navigation-layout-justification-setting: flex-start;
	align-items: flex-start;
}

.cw-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-self: stretch; }

.cw-nav .cw-navsearch { display: none; }

.cw-nav .is-menu-open .cw-navsearch {
	display: block;
	align-self: stretch;
	width: 100%;
	margin-top: 1.5rem;
}

.cw-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 4rem;
}

.cw-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font: 800 2rem/1.1 var(--cw-sans);
	letter-spacing: -0.015em;
}

/* Header search: a word, not an icon, that opens a field on black. */
.cw-headsearch { position: relative; margin: 0; }
/* The field is positioned whether open or shut, so opening it never moves the nav. */
.cw-headsearch .wp-block-search__input {
	position: absolute;
	top: 50%;
	right: calc(100% + 0.75rem);
	z-index: 1;
	transform: translateY(-50%);
}
.cw-headsearch:not(.wp-block-search__searchfield-hidden) .wp-block-search__input { width: min(22rem, 60vw); }
.cw-headsearch .wp-block-search__inside-wrapper { border: 0; padding: 0; gap: 0.5rem; }
.cw-headsearch .wp-block-search__button {
	align-self: center;
	margin: 0;
	padding: 0.5rem 0;
	background: transparent;
	color: var(--cw-paper);
	border: 0;
	font: 500 0.9375rem/1 var(--cw-sans);
	cursor: pointer;
}
.cw-headsearch .wp-block-search__button:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.35em; }
.cw-headsearch.wp-block-search__searchfield-hidden .wp-block-search__input { width: 0; padding: 0; border: 0; }
.cw-headsearch .wp-block-search__input {
	min-height: 2.25rem;
	padding: 0.375rem 0.625rem;
	border: 2px solid var(--cw-paper);
	border-radius: 0;
	background: var(--cw-paper);
	color: var(--cw-ink);
	font: 400 0.9375rem/1.2 var(--cw-sans);
	--cw-focus: var(--cw-paper);
}

/* Signature: a reading hairline in the topic colour along the running head's foot. */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: scroll()) {
		.single .cw-header::after {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			height: 4px;
			background: var(--topic-hi);
			transform-origin: 0 50%;
			transform: scaleX(0);
			animation: cw-read linear both;
			animation-timeline: scroll(root block);
		}
	}
}

@keyframes cw-read {
	to { transform: scaleX(1); }
}

/* ---------- The band ---------- */

.cw-band {
	background: var(--cw-black);
	color: var(--cw-paper);
	padding: clamp(2.5rem, 6vw, 5.5rem) var(--cw-gutter) clamp(1.5rem, 2.4vw, 2rem);
	--cw-focus: var(--cw-paper);
}

.cw-band > * { max-width: var(--cw-wide); margin-inline: auto; }
.cw-band > * + * { margin-top: 1.25rem; }

.cw-band__title {
	margin-block: 0;
	font: 800 var(--wp--preset--font-size--band, clamp(2.25rem, 1.2rem + 3.4vw, 4.25rem))/1.02 var(--cw-sans);
	letter-spacing: -0.022em;
	text-wrap: balance;
	color: var(--cw-paper);
}

.cw-band--search .cw-band__title { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.5rem); }

.cw-band__title a {
	color: inherit;
	text-decoration: none;
}

.cw-band__title a:hover {
	text-decoration: underline;
	text-decoration-thickness: 0.06em;
	text-underline-offset: 0.12em;
}

.cw-band__title > *,
.cw-band__title { max-width: var(--cw-wide); }

.cw-intro p {
	margin: 0;
	max-width: 40rem;
	font: 400 1.125rem/1.5 var(--cw-serif);
	color: var(--cw-on-black-2);
}

/* Search lives in the band. */

.cw-bandsearch,
.cw-pagesearch { margin-top: 1.5rem; }

.cw-bandsearch .wp-block-search__inside-wrapper,
.cw-pagesearch .wp-block-search__inside-wrapper {
	max-width: 40rem;
	gap: 0;
}

.cw-bandsearch .wp-block-search__input,
.cw-pagesearch .wp-block-search__input {
	min-height: 3.25rem;
	padding: 0.75rem 1rem;
	border: 2px solid var(--cw-paper);
	border-radius: 0;
	background: var(--cw-paper);
	color: var(--cw-ink);
	font: 400 1.125rem/1.2 var(--cw-sans);
	--cw-focus: var(--topic-hi);
}

.cw-pagesearch .wp-block-search__input { --cw-focus: var(--cw-ink); }

.cw-pagesearch .wp-block-search__input { border-color: var(--cw-black); }

.cw-bandsearch .wp-block-search__input::placeholder,
.cw-pagesearch .wp-block-search__input::placeholder,
.cw-headsearch .wp-block-search__input::placeholder { color: var(--cw-ink-2); opacity: 1; }

.cw-bandsearch .wp-block-search__button,
.cw-pagesearch .wp-block-search__button {
	margin: 0;
	min-height: 3.25rem;
	padding: 0 1.5rem;
	border: 2px solid var(--cw-paper);
	border-radius: 0;
	background: var(--cw-black);
	color: var(--cw-paper);
	font: 700 1rem/1 var(--cw-sans);
	cursor: pointer;
}

.cw-pagesearch .wp-block-search__button { border-color: var(--cw-black); }

.cw-bandsearch .wp-block-search__button:hover,
.cw-pagesearch .wp-block-search__button:hover {
	background: var(--cw-paper);
	color: var(--cw-black);
}

.cw-pagesearch .wp-block-search__button:hover { background: var(--cw-panel); }

/* ---------- The topic strip ---------- */

.cw-strip {
	min-height: 2.75rem;
	padding: 0.75rem var(--cw-gutter);
	gap: 0.25rem 2.5rem;
	align-items: center;
	background: var(--topic);
	color: var(--cw-paper);
	font: 600 0.8125rem/1.3 var(--cw-sans);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
	--cw-focus: var(--cw-paper);
}

.cw-strip > * { margin: 0; }
.cw-strip a {
	position: relative;
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
	text-underline-offset: 0.3em;
}
/* Small type, full-height targets: the hit area fills the strip without moving the focus ring. */
.cw-strip a::after { content: ""; position: absolute; inset: -0.75rem -0.25rem; }
.cw-strip a:hover { text-decoration-thickness: 2px; text-decoration-color: currentColor; }
.cw-strip--quiet { min-height: 0.75rem; padding-block: 0; font-size: 0; }
.cw-strip--quiet > * { display: none; }

/* ---------- The module grid ---------- */

.cw-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--cw-col-gap);
	row-gap: 2rem;
	max-width: calc(var(--cw-wide) + 2 * var(--cw-gutter));
	margin-inline: auto;
	padding: clamp(2rem, 3.5vw, 2.75rem) var(--cw-gutter) clamp(3rem, 5vw, 4.5rem);
	box-sizing: border-box;
}

.cw-grid > * { margin: 0; min-width: 0; }
.cw-col-main { grid-column: 1 / span 7; }
.cw-col-aside { grid-column: 9 / span 4; align-self: start; }

.cw-panel--sticky {
	position: sticky;
	top: calc(var(--cw-runhead-h) + 1.5rem);
}

body.admin-bar .cw-panel--sticky { top: calc(var(--cw-runhead-h) + 1.5rem + var(--wp-admin--admin-bar--height, 32px)); }

/* ---------- Reading column ---------- */

.cw-prose {
	font-family: var(--cw-serif);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.65;
	color: var(--cw-ink);
	max-width: 60ch;
	hanging-punctuation: first;
}

.cw-prose > * { margin-block: 0 1.1em; }
.cw-prose > p:empty { display: none; }
.cw-prose { overflow-wrap: break-word; }
.cw-prose :not(pre) > code { overflow-wrap: anywhere; }

/* End mark: a small square in the topic colour closes the last paragraph of a post. */
.cw-grid--article .cw-prose > p:not(:empty):not(:has(~ p:not(:empty)))::after {
	content: "";
	display: inline-block;
	width: 0.55em;
	height: 0.55em;
	margin-left: 0.4em;
	background: var(--topic);
	vertical-align: baseline;
}
.cw-prose > *:last-child { margin-bottom: 0; }

.cw-prose a,
.cw-empty a {
	color: var(--cw-ink);
	text-decoration-line: underline;
	text-decoration-color: var(--topic);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	overflow-wrap: anywhere;
}

.cw-prose a:hover,
.cw-empty a:hover { text-decoration-thickness: 2px; }

.cw-prose :where(h2, h3, h4) {
	margin-block: 2em 0.5em;
	font-family: var(--cw-sans);
	font-weight: 800;
	line-height: 1.15;
	text-wrap: balance;
}

.cw-prose h2 { font-size: var(--wp--preset--font-size--large); }
.cw-prose h3 { font-size: 1.375rem; }
.cw-prose h4 { font-size: var(--wp--preset--font-size--body); }

.cw-prose :where(ul, ol) { padding-left: 1.25em; }
.cw-prose li + li { margin-top: 0.35em; }

.cw-prose blockquote,
.cw-prose .wp-block-quote {
	margin-inline: 0;
	padding: 0 0 0 1.5rem;
	border-left: 1px solid var(--cw-black);
	font-style: italic;
}

.cw-prose blockquote cite { display: block; margin-top: 0.5em; font: normal 600 0.8125rem/1.3 var(--cw-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--cw-ink-2); }

.cw-prose :where(code, kbd, samp) {
	font-family: var(--cw-mono);
	font-size: 0.86em;
}

.cw-prose :not(pre) > code {
	padding: 0.1em 0.3em;
	background: var(--cw-panel);
}

.cw-prose pre,
.cw-prose .wp-block-code {
	margin-inline: 0;
	padding: 1.25rem 1.5rem;
	overflow-x: auto;
	background: var(--cw-panel);
	border-top: 6px solid var(--cw-black);
	font-size: 0.9375rem;
	line-height: 1.55;
	tab-size: 4;
}

.cw-prose pre code { padding: 0; background: none; font-size: inherit; }

.cw-prose figure,
.cw-figure { margin-inline: 0; }
.cw-prose img,
.cw-figure img { display: block; max-width: 100%; height: auto; }
.cw-prose figcaption,
.cw-prose .wp-element-caption {
	margin-top: 0.6rem;
	font: 400 0.875rem/1.45 var(--cw-sans);
	color: var(--cw-ink-2);
}

.cw-figure { margin-bottom: 2rem; }

.cw-prose hr,
.cw-prose .wp-block-separator {
	margin-block: 2.5em;
	border: 0;
	border-top: 1px solid var(--cw-black);
	width: 100%;
}

.cw-prose table { width: 100%; border-collapse: collapse; font: 400 0.9375rem/1.4 var(--cw-sans); font-variant-numeric: tabular-nums; }
.cw-prose th { text-align: left; font-weight: 700; border-bottom: 2px solid var(--cw-black); padding: 0.5rem 0.75rem 0.5rem 0; }
.cw-prose td { border-bottom: 1px solid var(--cw-hairline); padding: 0.5rem 0.75rem 0.5rem 0; vertical-align: top; }

/* Home lede: the excerpt plus its continue link. */
.cw-lede .wp-block-post-excerpt__excerpt { margin: 0; }
.cw-lede__text > p { margin: 0 0 1.1em; }
.cw-lede__text > p:last-child { margin-bottom: 0; }
.cw-lede .wp-block-post-excerpt__more-text { margin: 1.25rem 0 0; }

.wp-block-post-excerpt__more-link {
	font: 700 0.9375rem/1 var(--cw-sans);
	color: var(--cw-ink);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.35em;
}

.wp-block-post-excerpt__more-link:hover { text-decoration-color: var(--topic); }

.wp-block-post-excerpt__more-link { position: relative; }
.wp-block-post-excerpt__more-link::after { content: ""; position: absolute; inset: -0.9375rem -0.375rem; }

/* ---------- Fact panel ---------- */

.cw-panel {
	background: var(--cw-panel);
	padding: 1.375rem 1.5rem 1.5rem;
	font: 400 0.875rem/1.5 var(--cw-sans);
	color: var(--cw-ink);
}

.cw-panel > * { margin-block: 0; }

.cw-panel__title {
	margin: 0 0 0.875rem;
	font: 800 0.8125rem/1.2 var(--cw-sans);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cw-facts {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 0.5rem 1.125rem;
	margin: 0;
}

.cw-fact { display: contents; }
.cw-fact:not(:has(.cw-fact__v)) { display: none; }
.cw-facts > .cw-fact,
.cw-fact > * { margin: 0; }
.cw-fact__k { color: var(--cw-ink-2); }
.cw-fact__sub { display: block; margin-top: 0.125rem; font-size: 0.8125rem; color: var(--cw-ink-2); }
/* A post with nothing to add beyond the strip gets no panel at all. */
.cw-panel--sticky:not(:has(.cw-fact__v)) { display: none; }
.cw-fact__v a { position: relative; }
.cw-fact__v a::after { content: ""; position: absolute; inset: -0.625rem -0.125rem; }
.cw-fact__v a { color: var(--cw-ink); text-decoration: underline; text-decoration-color: var(--topic); text-underline-offset: 0.2em; }
.cw-fact__v a:hover { text-decoration-thickness: 2px; }

/* Home: the panel introduces the writer, in the writer's voice. */
.cw-panel > .cw-panel__note {
	margin-bottom: 1.125rem;
	font: 400 1rem/1.55 var(--cw-serif);
	color: var(--cw-ink);
	text-wrap: pretty;
}

/* ---------- Sections and fold rules ---------- */

.cw-section {
	max-width: calc(var(--cw-wide) + 2 * var(--cw-gutter));
	margin-inline: auto;
	padding: 0 var(--cw-gutter) clamp(3rem, 5vw, 4.5rem);
	box-sizing: border-box;
}

.cw-section > *,
.cw-section .wp-block-query > * { margin-block: 0; }

.cw-section__title {
	margin: 0;
	padding-top: 1.125rem;
	border-top: 6px solid var(--cw-black);
	font: 800 1.5rem/1.15 var(--cw-sans);
	letter-spacing: -0.01em;
}

.cw-section--flush { padding-top: clamp(1.5rem, 3vw, 2.25rem); }

/* Further back: hide the section outright when there's nothing further back. */
.cw-section--further:not(:has(.cw-rows > li)) { display: none; }
.cw-section--recent:not(:has(.cw-recent__list > li)) { display: none; }

.cw-section .cw-recent__list { margin-top: 1.5rem; }
.cw-section .cw-rows { margin-top: 0.75rem; }
.cw-section--flush .cw-rows { margin-top: 0; }

/* Previously, on Codewalkers: three text panels across the fold. */
.cw-recent__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem var(--cw-col-gap);
	margin-top: 1.5rem;
}

.cw-recent__list > li { margin: 0; }
.cw-recent__list > li > * { margin-block: 0; }

.cw-meta {
	gap: 0.25rem 1rem;
	font: 600 0.75rem/1.3 var(--cw-sans);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--topic);
	font-variant-numeric: tabular-nums;
}

.cw-meta > * { margin: 0; }
.cw-recent__list .cw-meta { margin-top: 0.5rem !important; }
.cw-meta a,
.cw-row__topics a { position: relative; }
.cw-meta a::after,
.cw-row__topics a::after { content: ""; position: absolute; inset: -0.4375rem -0.125rem; }
/* Each category link resolves --topic from its own cw-topic-* class, so two-topic posts show both colours. */
.cw-meta a {
	color: var(--topic);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
	text-underline-offset: 0.25em;
}
.cw-meta a:hover { text-decoration-thickness: 2px; text-decoration-color: currentColor; }

.cw-recent__title {
	margin-top: 0 !important;
	font: 800 1.375rem/1.15 var(--cw-sans);
	letter-spacing: -0.012em;
	text-wrap: balance;
}

.cw-recent__title a,
.cw-row__title a { color: var(--cw-ink); text-decoration: none; }
.cw-recent__title a:hover,
.cw-row__title a:hover { text-decoration: underline; text-decoration-color: var(--topic); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }

.cw-recent__excerpt { margin-top: 0.625rem !important; }
.cw-recent__excerpt p,
.cw-row__excerpt p {
	margin: 0;
	font: 400 0.9375rem/1.55 var(--cw-serif);
	color: var(--cw-ink-2);
}

/* Rows: the archive index. Year, date, title, topics, time. */
.cw-rows {
	display: grid;
	grid-template-columns: 4.5rem 4.5rem minmax(0, 1fr) auto 6.5rem;
	column-gap: var(--cw-col-gap);
	margin-top: 1rem;
}

.cw-rows > li {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
	column-gap: var(--cw-col-gap);
	align-items: first baseline;
	margin: 0;
	padding: 0.875rem 0;
	border-top: 1px solid var(--cw-hairline);
}

.cw-section--flush .cw-rows { margin-top: 0; }
.cw-section--flush .cw-rows > li:first-child { border-top: 0; }

.cw-rows > li > * { margin: 0; }

.cw-year {
	font: 800 1rem/1.3 var(--cw-sans);
	font-variant-numeric: tabular-nums;
}

.cw-year.is-repeat { color: transparent; }

.cw-row__date,
.cw-row__topics,
.cw-row__time {
	font: 500 0.8125rem/1.3 var(--cw-sans);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--cw-ink-2);
	font-variant-numeric: tabular-nums;
}

.cw-row__time { text-align: right; }
.cw-row__topics a {
	color: var(--topic);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
	text-underline-offset: 0.25em;
}
.cw-row__topics a:hover { text-decoration-thickness: 2px; text-decoration-color: currentColor; }

/* Core makes post-title links inline-block, whose baseline is the last line; rows align on the first. */
.cw-row__title a { display: inline; }
.cw-rows > li { position: relative; }
.cw-row__title a::after { content: ""; position: absolute; inset: 0; }
.cw-rows > li .cw-row__topics a { z-index: 1; }
.cw-rows > li:hover .cw-row__title a { text-decoration: underline; text-decoration-color: var(--topic); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }

.cw-row__title {
	font: 700 1.1875rem/1.3 var(--cw-sans);
	letter-spacing: -0.005em;
	text-wrap: balance;
}

.cw-rows--results { grid-template-columns: 4.5rem 4.5rem minmax(0, 1fr) auto; }
.cw-rows--results .cw-row__excerpt { grid-column: 3 / span 1; margin-top: 0.375rem; }

/* Topic colour per row comes from its own post class. */
.cw-rows > li .cw-row__topics a { color: var(--topic); }

/* Keep reading: two whole-panel links after the post (key, title, topics and date, one sentence). */
.cw-adjacent {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--cw-col-gap);
	margin-top: 1.5rem !important;
}

.cw-adjacent__item {
	position: relative;
	margin: 0;
	padding: 1.25rem 1.5rem 1.5rem;
	background: var(--cw-panel);
}

.cw-adjacent__item:not(:has(a)) { display: none; }
/* No "Before this" (the oldest post): the remaining panel takes the row. */
.cw-adjacent:not(:has(> .cw-adjacent__item:first-child a)) > .cw-adjacent__item { grid-column: 1 / -1; }
.cw-adjacent__item > *,
.cw-adjacent__v > * { margin: 0; }

.cw-adjacent__link {
	display: block;
	color: var(--cw-ink);
	text-decoration: none;
}

/* The whole panel is the target; the focus ring still draws around the panel. */
.cw-adjacent__link::after { content: ""; position: absolute; inset: 0; }
.cw-adjacent__link:focus-visible { outline: none; }
.cw-adjacent__item:has(.cw-adjacent__link:focus-visible) { outline: 3px solid var(--cw-ink); outline-offset: 3px; }

.cw-adjacent__k {
	display: block;
	margin-bottom: 0.5rem;
	font: 800 0.8125rem/1.2 var(--cw-sans);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cw-ink-2);
}

.cw-adjacent__title {
	display: block;
	font: 800 1.375rem/1.2 var(--cw-sans);
	letter-spacing: -0.012em;
	text-wrap: balance;
}

.cw-adjacent__item:hover .cw-adjacent__title { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--topic); text-underline-offset: 0.2em; }

.cw-adjacent__meta,
.cw-meta-line {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	margin-top: 0.625rem !important;
	font: 600 0.75rem/1.3 var(--cw-sans);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
	color: var(--cw-ink-2);
}

.cw-adjacent__meta [class*="cw-topic-"] { color: var(--topic); }

.cw-adjacent__excerpt {
	margin-top: 0.625rem !important;
	max-width: 60ch;
	font: 400 0.9375rem/1.55 var(--cw-serif);
	color: var(--cw-ink-2);
	text-wrap: pretty;
}

.cw-adjacent__v--end .cw-adjacent__title { color: var(--cw-ink); }

/* More in {topic}: a short ruled list from the primary topic. */
.cw-more-in { margin-top: 2rem !important; font: 700 0.9375rem/1.4 var(--cw-sans); }
.cw-more-in > * { margin: 0; }
.cw-more-in__head { font: 800 1rem/1.3 var(--cw-sans); }
.cw-more-in__head a { color: var(--topic); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.cw-more-in__count {
	margin-left: 0.5rem;
	font: 600 0.75rem/1.3 var(--cw-sans);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cw-ink-2);
}

.cw-more-in__list { margin-top: 0.75rem !important; padding: 0; list-style: none; }
.cw-more-in__list li {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 1.5rem;
	padding: 0.75rem 0;
	border-top: 1px solid var(--cw-hairline);
}
.cw-more-in__list a { font: 700 1.0625rem/1.3 var(--cw-sans); color: var(--cw-ink); text-decoration: none; }
.cw-more-in__list a::after { content: ""; position: absolute; inset: 0; }
.cw-more-in__list li:hover a { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--topic); text-underline-offset: 0.2em; }
.cw-more-in__date {
	font: 500 0.8125rem/1.3 var(--cw-sans);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--cw-ink-2);
	font-variant-numeric: tabular-nums;
}

/* Archive foot: the other territories. */
.cw-elsewhere {
	margin-top: 2rem !important;
	padding-top: 1rem;
	border-top: 2px solid var(--cw-black);
	font: 700 0.9375rem/1.6 var(--cw-sans);
}
.cw-elsewhere a { position: relative; color: var(--topic); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.cw-elsewhere a::after { content: ""; position: absolute; inset: -0.625rem -0.25rem; }
.cw-elsewhere__count { margin-right: 0.75rem; font: 600 0.75rem/1 var(--cw-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--cw-ink-2); }

/* Pagination */
.cw-pager {
	margin-top: 1.5rem !important;
	padding-top: 1rem;
	border-top: 2px solid var(--cw-black);
	font: 700 0.9375rem/1 var(--cw-sans);
}

.cw-pager a { color: var(--cw-ink); text-decoration: none; padding: 0.5rem 0; }
.cw-pager a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.cw-pager .page-numbers { display: inline-block; min-width: 2rem; padding: 0.5rem; text-align: center; }
.cw-pager .page-numbers.current { background: var(--cw-black); color: var(--cw-paper); }

/* Empty states */
.cw-empty,
.cw-empty p {
	max-width: 40rem;
	font: 400 1.125rem/1.6 var(--cw-serif);
	color: var(--cw-ink);
}

.cw-empty p { margin: 0 0 0.75rem; }

/* ---------- Projects page ---------- */

.cw-section--projects { padding-top: clamp(0.5rem, 1.5vw, 1rem); }
.cw-projects > * { margin-block: 0; }

/* Each project is a ruled row on the module grid: name and domain in columns 1–4, the line in 5–11. */
.cw-project {
	position: relative;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--cw-col-gap);
	row-gap: 0.375rem;
	align-items: start;
	padding: 1.5rem 0 1.625rem;
	border-top: 1px solid var(--cw-hairline);
}

.cw-project:first-child { border-top: 0; }
.cw-project > * { margin: 0; min-width: 0; }

.cw-project__name {
	grid-column: 1 / span 4;
	font: 800 1.5rem/1.15 var(--cw-sans);
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.cw-project__url {
	grid-column: 1 / span 4;
	font: 500 0.9375rem/1.4 var(--cw-sans);
}

.cw-project__url a {
	color: var(--cw-ink-2);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--cw-hairline);
	text-underline-offset: 0.25em;
	overflow-wrap: anywhere;
}

/* The whole row opens the project; "On the blog" links sit above that target. */
.cw-project__url a::after { content: ""; position: absolute; inset: 0; }
.cw-project:hover .cw-project__name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.cw-project:hover .cw-project__url a { color: var(--cw-ink); text-decoration-color: currentColor; }

.cw-project__desc {
	grid-column: 5 / span 7;
	grid-row: 1 / span 2;
	max-width: 60ch;
	font: 400 1.0625rem/1.55 var(--cw-serif);
	text-wrap: pretty;
}

.cw-project__posts {
	grid-column: 5 / span 7;
	margin-top: 0.625rem !important;
	font: 700 0.875rem/1.6 var(--cw-sans);
}

.cw-project__posts-k {
	margin-right: 0.625rem;
	font: 600 0.75rem/1 var(--cw-sans);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cw-ink-2);
}

.cw-project__posts a {
	position: relative;
	z-index: 1;
	color: var(--cw-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

.cw-project__posts a:hover { text-decoration-thickness: 2px; }
.cw-project__sep { color: var(--cw-ink-2); }

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

.cw-comments::before {
	content: "";
	display: block;
	border-top: 6px solid var(--cw-black);
}

.cw-comments > * { margin-block: 0; max-width: 46rem; }

.cw-comments__title {
	margin-top: 1.125rem !important;
	font: 800 1.5rem/1.15 var(--cw-sans);
	letter-spacing: -0.01em;
}

.cw-comment-list,
.cw-comment-list ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cw-comment-list { margin-top: 0.75rem !important; }
.cw-comment-list li { margin: 0; }

.cw-comment {
	padding: 1.25rem 0 1.375rem;
	border-top: 1px solid var(--cw-hairline);
}

.cw-comment-list > li:first-child > .cw-comment { border-top: 0; }
.cw-comment > * { margin: 0; }

/* Replies step in behind a 1px rule, like a quotation. */
.cw-comment-list li > ol {
	margin-left: clamp(0.75rem, 2.5vw, 1.5rem);
	padding-left: clamp(1rem, 2.5vw, 1.5rem);
	border-left: 1px solid var(--cw-black);
}

.cw-comment-list li > ol .cw-comment { border-top: 0; padding-top: 0.5rem; }

.cw-comment__meta { gap: 0.25rem 1rem; align-items: baseline; }
.cw-comment__author { font: 700 1rem/1.3 var(--cw-sans); }

/* The writer's own replies say so, in the post's colour. */
.bypostauthor > .cw-comment .cw-comment__author::after {
	content: "Author";
	margin-left: 0.625rem;
	font: 600 0.6875rem/1 var(--cw-sans);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--topic);
}

.cw-comment__date {
	font: 500 0.8125rem/1.3 var(--cw-sans);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--cw-ink-2);
	font-variant-numeric: tabular-nums;
}

.cw-comment__body {
	margin-top: 0.5rem !important;
	max-width: 60ch;
	font: 400 1.0625rem/1.6 var(--cw-serif);
	overflow-wrap: break-word;
}

.cw-comment__body p { margin: 0 0 0.75em; text-wrap: pretty; }
.cw-comment__body p:last-child { margin-bottom: 0; }
.cw-comment__body a { color: var(--cw-ink); text-decoration-color: var(--topic); text-underline-offset: 0.2em; }

.cw-comment__reply { margin-top: 0.625rem !important; font: 700 0.875rem/1 var(--cw-sans); }
.cw-comment__reply a {
	position: relative;
	color: var(--cw-ink);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}
.cw-comment__reply a:hover { text-decoration-color: var(--topic); }
.cw-comment__reply a::after { content: ""; position: absolute; inset: -0.75rem -0.375rem; }

/* The form: square, black-ruled fields; the button is the system's primary. */
.cw-comments .cw-comment-form { margin-top: 2.25rem !important; }
.cw-comments > .cw-comment-form:first-child { margin-top: 1.125rem !important; }

.cw-comments .comment-reply-title {
	margin: 0 0 0.5rem;
	font: 800 1.25rem/1.2 var(--cw-sans);
	letter-spacing: -0.01em;
}

.cw-comments > .cw-comment-form:first-child .comment-reply-title { font-size: 1.5rem; }

.cw-comments .comment-reply-title small { margin-left: 1rem; font: 700 0.875rem/1 var(--cw-sans); }
.cw-comments .comment-reply-title small a { color: var(--cw-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }

.cw-comments .comment-notes,
.cw-comments .logged-in-as,
.cw-comments .must-log-in,
.cw-comments .no-comments {
	margin: 0 0 1.25rem;
	font: 400 0.9375rem/1.5 var(--cw-serif);
	color: var(--cw-ink-2);
}

.cw-comments .logged-in-as a { color: var(--cw-ink); }
.cw-comments .comment-form > p { margin: 0 0 1rem; }

.cw-comments .comment-form label {
	display: block;
	margin-bottom: 0.375rem;
	font: 600 0.8125rem/1.3 var(--cw-sans);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cw-comments .comment-form .required { color: var(--cw-ink-2); }

.cw-comments .comment-form textarea,
.cw-comments .comment-form input[type="text"],
.cw-comments .comment-form input[type="email"],
.cw-comments .comment-form input[type="url"] {
	display: block;
	width: 100%;
	min-height: 3.25rem;
	box-sizing: border-box;
	padding: 0.75rem 1rem;
	border: 2px solid var(--cw-black);
	border-radius: 0;
	background: var(--cw-paper);
	color: var(--cw-ink);
	font: 400 1.125rem/1.3 var(--cw-sans);
}

.cw-comments .comment-form textarea {
	min-height: 9rem;
	font: 400 1.0625rem/1.55 var(--cw-serif);
	resize: vertical;
}

.cw-comments .comment-form-cookies-consent {
	display: flex;
	gap: 0.625rem;
	align-items: baseline;
}

.cw-comments .comment-form-cookies-consent label {
	margin: 0;
	font: 400 0.875rem/1.45 var(--cw-sans);
	letter-spacing: 0;
	text-transform: none;
	color: var(--cw-ink-2);
}

.cw-comments .comment-form-cookies-consent input { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--cw-black); flex: none; transform: translateY(0.15em); }

.cw-comments .form-submit { margin-top: 1.5rem !important; }

.cw-comments .form-submit input[type="submit"] {
	min-height: 3.25rem;
	padding: 0 1.5rem;
	border: 2px solid var(--cw-black);
	border-radius: 0;
	background: var(--cw-black);
	color: var(--cw-paper);
	font: 700 1rem/1 var(--cw-sans);
	cursor: pointer;
}

.cw-comments .form-submit input[type="submit"]:hover { background: var(--cw-panel); color: var(--cw-black); }

/* ---------- Footer ---------- */

.cw-footer {
	background: var(--cw-black);
	color: var(--cw-paper);
	--cw-focus: var(--cw-paper);
}

.cw-footer__inner {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--cw-col-gap);
	row-gap: 2rem;
	max-width: calc(var(--cw-wide) + 2 * var(--cw-gutter));
	margin-inline: auto;
	padding: clamp(2.5rem, 5vw, 3.5rem) var(--cw-gutter) 2.5rem;
	box-sizing: border-box;
}

.cw-footer__inner > * { margin: 0; }
.cw-footer__id { grid-column: 1 / span 5; }
.cw-footer__id > * { margin: 0; }
.cw-footer__name,
.cw-footer__name a { font: 800 1.75rem/1 var(--cw-sans); letter-spacing: -0.015em; color: var(--cw-paper); text-decoration: none; }
.cw-footer__tagline { margin-top: 0.625rem !important; font: 400 1.0625rem/1.5 var(--cw-serif); color: var(--cw-on-black-2); }

.cw-footer__links {
	grid-column: 6 / span 7;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.75rem;
	align-content: start;
	justify-content: flex-end;
	font: 600 0.9375rem/1.2 var(--cw-sans);
}

.cw-footer__links p { margin: 0; }
.cw-footer__links a { color: var(--cw-paper); text-decoration: none; white-space: nowrap; }
.cw-footer__links a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }

.cw-footer__colophon {
	grid-column: 1 / -1;
	padding-top: 1.25rem;
	border-top: 1px solid #3d3d3a;
	font: 400 0.8125rem/1.5 var(--cw-sans);
	color: var(--cw-on-black-2);
}

/* ---------- Wider screens ---------- */

@media (min-width: 782px) {
	/* Recent panels share rows, so a two-line title doesn't stagger its neighbours' meta. */
	.cw-recent__list > li {
		display: grid;
		grid-row: span 3;
		grid-template-rows: subgrid;
		row-gap: 0;
		align-content: start;
	}

	/* On home the short ledger sits under the reading column (columns 1–8), not across the page. */
	.cw-section--further .cw-rows,
	.cw-section--further .cw-pager {
		max-width: calc((100% - 11 * var(--cw-col-gap)) * 8 / 12 + 7 * var(--cw-col-gap));
	}
}

/* ---------- Narrower screens ---------- */

@media (max-width: 1100px) {
	.cw-col-main { grid-column: 1 / span 8; }
	.cw-rows { display: block; }
	.cw-col-aside { grid-column: 9 / span 4; }
	.cw-rows > li {
		grid-template-columns: 4rem 4rem minmax(0, 1fr) auto;
		grid-template-areas: "year date title time" ". . topics topics";
		row-gap: 0.25rem;
	}
	.cw-rows > li .cw-year { grid-area: year; }
	.cw-rows > li .cw-row__date { grid-area: date; }
	.cw-rows > li .cw-row__title { grid-area: title; }
	.cw-rows > li .cw-row__time { grid-area: time; }
	.cw-rows > li .cw-row__topics { grid-area: topics; }
	.cw-rows--results > li {
		grid-template-columns: 4rem 4rem minmax(0, 1fr);
		grid-template-areas: "year date title" ". . topics" ". . excerpt";
	}
	.cw-rows--results .cw-row__excerpt { grid-area: excerpt; }
}

@media (max-width: 781px) {
	:root { --cw-runhead-h: 3.5rem; }

	.cw-grid { grid-template-columns: minmax(0, 1fr); row-gap: 1.75rem; }
	.cw-col-main,
	.cw-col-aside { grid-column: 1 / -1; }

	/* The fact panel becomes a compact row under the strip. */
	.cw-col-aside { order: -1; padding: 0.875rem 1rem; }
	/* On phones the strip already carries everything; the prose comes straight after it. */
	.cw-grid--article .cw-col-aside { display: none; }
	.cw-col-aside .cw-panel__title { display: none; }
	.cw-col-aside .cw-facts { display: flex; flex-wrap: wrap; gap: 0.375rem 1.25rem; }
	.cw-col-aside .cw-fact { display: flex; gap: 0.375rem; }

	/* Home's site panel follows the lede: the reader gets the post first, then who wrote it. */
	.cw-panel--site { order: 0; padding: 1.25rem 1.25rem 1.375rem; }
	.cw-panel--site .cw-panel__title { display: block; }
	.cw-panel--site .cw-facts { display: grid; }
	.cw-panel--site .cw-fact { display: contents; }

	.cw-recent__list { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.cw-recent__list > li { padding: 1.25rem 0; border-top: 1px solid var(--cw-hairline); }
	.cw-recent__list > li:first-child { border-top: 0; padding-top: 0.25rem; }

	.cw-rows > li {
		grid-template-columns: 2.75rem 4rem minmax(0, 1fr);
		grid-template-areas: "year date time" "title title title" "topics topics topics";
		column-gap: 0.625rem;
		row-gap: 0.375rem;
	}

	.cw-rows > li .cw-year { grid-area: year; font: 600 0.8125rem/1.3 var(--cw-sans); letter-spacing: 0.05em; }
	.cw-year.is-repeat { color: inherit; }
	.cw-rows > li .cw-row__date { grid-area: date; }
	.cw-rows > li .cw-row__time { grid-area: time; text-align: right; }
	.cw-rows > li .cw-row__title { grid-area: title; }
	.cw-rows--results > li {
		grid-template-columns: 2.75rem 4rem minmax(0, 1fr);
		grid-template-areas: "year date ." "title title title" "topics topics topics" "excerpt excerpt excerpt";
	}
	.cw-rows--results .cw-row__excerpt { grid-area: excerpt; margin-top: 0; }

	.cw-adjacent { grid-template-columns: minmax(0, 1fr); }

	.cw-project > * { grid-column: 1 / -1; grid-row: auto; }
	.cw-project__desc { margin-top: 0.5rem !important; }

	.cw-footer__id,
	.cw-footer__links { grid-column: 1 / -1; }
	.cw-footer__links { justify-content: flex-start; }

	.cw-bandsearch .wp-block-search__button,
	.cw-pagesearch .wp-block-search__button { padding: 0 1rem; }
}

@media (max-width: 599px) {
	.cw-headsearch { display: none; }

	/* Title-sized, not hero-sized: long titles must leave room for the opening lines. */
	.cw-band { padding-top: 1.75rem; }
	.cw-band__title { font-size: clamp(1.875rem, 1.2rem + 3.4vw, var(--wp--preset--font-size--band, 2.25rem)); line-height: 1.04; }
}
