/*
 * CultureBots components.
 *
 * Tokens (colours, fonts, sizes) come from theme.json as --wp--preset--*
 * variables; nothing here hard-codes a colour that has a token. Every class
 * is either a registered block style (.is-style-cb-*) or a cb- class set in a
 * pattern or template, so an editor never needs to type one.
 *
 * Sections: 1 base · 2 frame and sections · 3 labels and status ·
 * 4 corner brackets · 5 records and entries · 6 terminal and citation ·
 * 7 lists: ticks, timeline, numbered · 8 plate and zoom · 9 field ·
 * 10 header and footer · 11 states · 12 notes · 13 preferences · 14 form
 */

:root {
	--cb-ground: var(--wp--preset--color--base);
	--cb-ink: var(--wp--preset--color--contrast);
	--cb-signal: var(--wp--preset--color--accent-1);
	--cb-signal-bar: var(--wp--preset--color--accent-2);
	--cb-signal-ground: var(--wp--preset--color--accent-3);
	--cb-muted: var(--wp--preset--color--accent-4);
	--cb-surface: var(--wp--preset--color--accent-5);
	--cb-rule: var(--wp--preset--color--accent-6);
	--cb-inset: var(--wp--preset--color--inset);
	--cb-secondary: var(--wp--preset--color--secondary);
	--cb-mono: var(--wp--preset--font-family--mono);
	--cb-serif: var(--wp--preset--font-family--serif);
	--cb-label: var(--wp--preset--font-size--x-small);
	--cb-bracket: var(--wp--custom--bracket--size, 9px);
	--cb-bracket-grey: #4a4a48;
	color-scheme: dark;
}

/* Light is the default. Dark (the theme.json palette above) applies only when
   a visitor picks it on the header pill, which sets data-theme="dark" on
   <html> (culturebots.js). Without JavaScript the site is light. Every colour
   is a preset variable, so swapping their values here restyles the whole
   site. All text pairs pass WCAG AA on every light surface. */
:root:not([data-theme="dark"]) {
	--wp--preset--color--base: #faf9f6;
	--wp--preset--color--contrast: #161514;
	--wp--preset--color--accent-1: #c41d03;
	--wp--preset--color--accent-2: #d82701;
	--wp--preset--color--accent-3: #fbe6e1;
	--wp--preset--color--accent-4: #625f5a;
	--wp--preset--color--accent-5: #f2f0eb;
	--wp--preset--color--accent-6: #d6d2ca;
	--wp--preset--color--inset: #eae7e1;
	--wp--preset--color--secondary: #4b4945;
	--cb-bracket-grey: #a39e95;
	color-scheme: light;
}


/* 1 · Base ---------------------------------------------------------------- */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-variant-numeric: tabular-nums;
}

::selection {
	background: var(--cb-signal-ground);
	color: var(--cb-ink);
}

a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}

a:hover {
	text-decoration-color: currentColor;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--cb-signal);
	outline-offset: 3px;
}

/* Long-form reading: news posts, abstracts. The serif, a comfortable measure. */
.cb-prose,
.cb-prose p {
	font-family: var(--cb-serif);
	font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem);
	line-height: 1.68;
	font-optical-sizing: auto;
}

.cb-prose {
	max-width: var(--wp--custom--measure--reading, 66ch);
}

.cb-prose :where(h2, h3, h4) {
	font-family: var(--wp--preset--font-family--grotesk);
	margin-block-start: 2em;
}

.cb-serif {
	font-family: var(--cb-serif);
}

.cb-mono {
	font-family: var(--cb-mono);
}

.cb-secondary {
	color: var(--cb-secondary);
}

/* 2 · Frame and sections ---------------------------------------------------- */

/* Header, main and footer meet edge to edge, so the frame lines run unbroken. */
.wp-site-blocks > * {
	margin-block: 0;
}

.cb-frame .wp-block-post-content > .cb-section:first-child,
.cb-frame > .cb-section:first-child,
.cb-footer .cb-frame > .cb-section:first-child {
	border-top: 0;
}

/* The framed column: hairlines down both sides of the content, as in
   PhantomMesh. Dropped on phones, where the frame would only cost width. */
.cb-frame {
	max-width: calc(var(--wp--style--global--wide-size) + 2 * var(--wp--preset--spacing--50));
	margin-inline: auto;
	border-inline: 1px solid var(--cb-rule);
}

.cb-section {
	border-top: 1px solid var(--cb-rule);
	padding-block: clamp(2.5rem, 2rem + 4vw, 6rem);
	padding-inline: var(--wp--preset--spacing--50);
}

.cb-section--tight {
	padding-block: clamp(1.75rem, 1.5rem + 2vw, 3rem);
}

@media (max-width: 781px) {
	.cb-frame {
		border-inline: 0;
	}
}

.is-style-cb-panel {
	background: var(--cb-surface);
	border: 1px solid var(--cb-rule);
	padding: var(--wp--preset--spacing--40);
}

/* An eyebrow heading: the small mono line above a section title. */
.wp-block-heading.is-style-cb-eyebrow {
	font-family: var(--cb-mono);
	font-size: var(--cb-label);
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cb-secondary);
	line-height: 1.4;
}

/* 3 · Labels and status ----------------------------------------------------- */

/* Kind labels. The stored text is plain words ("Book chapter"); capitals and
   brackets are presentation, and the brackets carry empty alternative text so
   screen readers say "Book chapter", not "left bracket book chapter". */
.is-style-cb-label,
.is-style-cb-label-neutral,
.cb-label,
.is-style-cb-labels a,
.is-style-cb-labels .wp-block-post-terms__separator + a {
	display: inline-block;
	width: fit-content;
	margin: 0;
	padding: 0.2em 0.55em;
	font-family: var(--cb-mono);
	font-size: var(--cb-label);
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	background: var(--cb-signal-ground);
	color: var(--cb-signal);
}

.is-style-cb-label-neutral,
.cb-label--neutral,
.is-style-cb-labels a {
	background: var(--cb-rule);
	color: var(--cb-ink);
}

.is-style-cb-label::before,
.is-style-cb-label-neutral::before,
.cb-label::before,
.is-style-cb-labels a::before {
	content: "[";
	content: "[" / "";
}

.is-style-cb-label::after,
.is-style-cb-label-neutral::after,
.cb-label::after,
.is-style-cb-labels a::after {
	content: "]";
	content: "]" / "";
}

.is-style-cb-labels .wp-block-post-terms__separator {
	display: none;
}

.is-style-cb-labels {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.is-style-cb-labels a:hover {
	color: var(--cb-ink);
	text-decoration: underline;
}

/* Call status. The word carries the state ("Open", "Closing soon", "Closed");
   colour only reinforces it. Red is reserved for what is open now. */
.cb-status {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	width: fit-content;
	margin: 0;
	padding: 0.3em 0.65em;
	font-family: var(--cb-mono);
	font-size: var(--cb-label);
	letter-spacing: 0.04em;
	line-height: 1.4;
	border: 1px solid var(--cb-rule);
	color: var(--cb-secondary);
}

.cb-status::before {
	content: "";
	width: 0.55em;
	height: 0.55em;
	flex: none;
	border: 1px solid currentColor;
}

.cb-status--open,
.cb-status--closing {
	background: var(--cb-signal-ground);
	border-color: var(--cb-signal-bar);
	color: var(--cb-signal);
}

.cb-status--open::before,
.cb-status--closing::before {
	background: currentColor;
}

.cb-status--closing {
	font-weight: 600;
	border-left-width: 4px;
}

.cb-status--closed,
.cb-status--past {
	color: var(--cb-muted);
}

.cb-status--announced {
	border-style: dashed;
}

/* Red means "now": the signal colour marks open calls, deadlines and actions.
   Everything else is ink and grey. */
.cb-signal {
	color: var(--cb-signal);
}

.cb-signal-underline {
	text-decoration: underline;
	text-decoration-color: var(--cb-signal-bar);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.16em;
}

/* 4 · Corner brackets ------------------------------------------------------- */

/* Eight 1px gradients, no pseudo-elements, so they combine with anything.
   Set --cb-b to change the bracket colour. */
.cb-brackets,
.wp-block-button.is-style-cb-bracket > .wp-block-button__link,
.wp-block-group.is-style-cb-bracket,
.wp-block-group.is-style-cb-terminal,
.wp-block-image.is-style-cb-plate {
	--cb-b: var(--cb-signal-bar);
	background-image:
		linear-gradient(var(--cb-b), var(--cb-b)), linear-gradient(var(--cb-b), var(--cb-b)),
		linear-gradient(var(--cb-b), var(--cb-b)), linear-gradient(var(--cb-b), var(--cb-b)),
		linear-gradient(var(--cb-b), var(--cb-b)), linear-gradient(var(--cb-b), var(--cb-b)),
		linear-gradient(var(--cb-b), var(--cb-b)), linear-gradient(var(--cb-b), var(--cb-b));
	background-position:
		top left, top left, top right, top right,
		bottom left, bottom left, bottom right, bottom right;
	background-size:
		var(--cb-bracket) 1px, 1px var(--cb-bracket), var(--cb-bracket) 1px, 1px var(--cb-bracket),
		var(--cb-bracket) 1px, 1px var(--cb-bracket), var(--cb-bracket) 1px, 1px var(--cb-bracket);
	background-repeat: no-repeat;
}

.wp-block-button.is-style-cb-bracket > .wp-block-button__link::before {
	content: "> ";
	content: "> " / "";
}

.wp-block-button.is-style-cb-ghost > .wp-block-button__link {
	background: transparent;
	color: var(--cb-ink);
	box-shadow: inset 0 0 0 1px var(--cb-rule);
}

.wp-block-button.is-style-cb-ghost > .wp-block-button__link:hover {
	box-shadow: inset 0 0 0 1px var(--cb-secondary);
}

.wp-block-button.is-style-cb-light > .wp-block-button__link {
	background: var(--cb-ink);
	color: var(--cb-ground);
}

.wp-block-button.is-style-cb-light > .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--cb-ink) 85%, var(--cb-ground));
}

/* Light mode: the main button hovers to solid red with paper text (4.7 : 1);
   theme.json's dark hover colours would read as a dark block on paper. */
:root:not([data-theme="dark"]) :where(.wp-element-button, .wp-block-button__link):hover,
:root:not([data-theme="dark"]) :where(.wp-element-button, .wp-block-button__link):focus {
	background-color: var(--cb-signal-bar);
	color: var(--cb-ground);
}



/* 5 · Records and entries --------------------------------------------------- */

/* A record card: the PhantomMesh pricing card, reused for a publication or an
   event. Header strip inset, a hairline, then the content. */
.wp-block-group.is-style-cb-record,
.wp-block-group.is-style-cb-featured {
	background: var(--cb-surface);
	border: 1px solid var(--cb-rule);
	padding: var(--wp--preset--spacing--40);
}

.wp-block-group.is-style-cb-featured {
	border-top: 3px solid var(--cb-signal-bar);
}

.is-style-cb-record > :where(.wp-block-heading),
.is-style-cb-featured > :where(.wp-block-heading),
.cb-entry :where(.wp-block-heading) {
	margin: 0;
}

/* Card titles: one step down from h3, so a 125-character title stays a block,
   not a column. An h2 card (one directly under the page's h1, as on About)
   looks the same: the level follows the outline, the size does not. */
:where(.is-style-cb-record, .is-style-cb-featured) > :is(h2, h3).wp-block-heading:not([class*="-font-size"]) {
	font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
	line-height: 1.3;
	letter-spacing: -0.005em;
}

.is-style-cb-record .wp-block-heading a,
.is-style-cb-featured .wp-block-heading a,
.cb-entry .wp-block-heading a {
	text-decoration: none;
}

.is-style-cb-record .wp-block-heading a:hover,
.is-style-cb-featured .wp-block-heading a:hover,
.cb-entry .wp-block-heading a:hover {
	text-decoration: underline;
}

/* The metadata line: venue, year, pages, as a code comment. */
.is-style-cb-meta,
.cb-meta {
	font-family: var(--cb-mono);
	font-size: var(--cb-label);
	line-height: 1.55;
	color: var(--cb-muted);
}

.is-style-cb-meta::before,
.cb-meta::before {
	content: "// ";
	content: "// " / "";
}

.cb-authors {
	color: var(--cb-secondary);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

/* The bibliographic line sits close under the title or authors it belongs to. */
.cb-authors + .is-style-cb-meta,
.cb-authors + .cb-meta,
.wp-block-heading + .is-style-cb-meta {
	margin-block-start: 0.5rem;
}

/* A bibliography entry in a list: the cite key and pages in a left column,
   the record on the right. Dense, scannable, aligned figures. */
.cb-entry {
	display: grid;
	grid-template-columns: minmax(9rem, 13rem) 1fr;
	gap: 0.25rem 2rem;
	padding-block: 1.25rem;
	border-top: 1px solid var(--cb-rule);
}

.cb-entry > * {
	margin: 0;
}

.cb-entry__key {
	font-family: var(--cb-mono);
	font-size: var(--cb-label);
	color: var(--cb-muted);
	line-height: 1.55;
	overflow-wrap: anywhere;
}

.cb-entry__key strong {
	display: block;
	color: var(--cb-secondary);
	font-weight: 400;
}

.cb-entry__body {
	display: grid;
	gap: 0.35rem;
}

.cb-entry .wp-block-heading {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	letter-spacing: -0.005em;
	line-height: 1.35;
	/* A 153-character title stays three lines on a desktop list, not five. */
	max-width: 62ch;
}

@media (max-width: 781px) {
	.cb-entry {
		grid-template-columns: 1fr;
	}
}

/* Kind filter: plain links, one kind at a time. */
.cb-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--cb-mono);
	font-size: var(--cb-label);
}

.cb-filter a {
	display: inline-block;
	padding: 0.4em 0.75em;
	border: 1px solid var(--cb-rule);
	color: var(--cb-secondary);
	text-decoration: none;
}

.cb-filter a:hover {
	color: var(--cb-ink);
	border-color: var(--cb-secondary);
}

.cb-filter a[aria-current="page"] {
	color: var(--cb-ink);
	border-color: var(--cb-ink);
}

.cb-filter .cb-count {
	color: var(--cb-muted);
	margin-left: 0.4em;
}

/* 6 · Terminal and citation ------------------------------------------------- */

.wp-block-group.is-style-cb-terminal {
	--cb-b: var(--cb-bracket-grey);
	position: relative;
	background-color: var(--cb-inset);
	padding: var(--wp--preset--spacing--40);
	font-family: var(--cb-mono);
}

.wp-block-group.is-style-cb-terminal > * {
	margin-block: 0;
}

.wp-block-group.is-style-cb-terminal > * + * {
	margin-block-start: 0.75rem;
}

.is-style-cb-prompt {
	font-family: var(--cb-mono);
	font-size: var(--cb-label);
	color: var(--cb-muted);
	margin: 0;
}

.is-style-cb-prompt::before {
	content: "$ ";
	content: "$ " / "";
	color: var(--cb-signal);
}

/* Citations scroll inside their own box, never the page. */
.cb-cite__text,
.is-style-cb-terminal .wp-block-code {
	font-family: var(--cb-mono);
	font-size: var(--cb-label);
	line-height: 1.7;
	/* Wrapped, not scrolled: a scroll box with no focusable content cannot be
	   scrolled from the keyboard in Safari. Line breaks are kept. */
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	color: var(--cb-ink);
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	tab-size: 2;
}

.cb-cite {
	position: relative;
}

.cb-copy {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	padding: 0.35em 0.7em;
	font-family: var(--cb-mono);
	font-size: var(--cb-label);
	color: var(--cb-secondary);
	background: var(--cb-surface);
	border: 1px solid var(--cb-rule);
	cursor: pointer;
}

.cb-copy:hover {
	color: var(--cb-ink);
	border-color: var(--cb-secondary);
}

.cb-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* 7 · Lists: ticks, timeline, numbered --------------------------------------- */

.wp-block-list.is-style-cb-ticks {
	list-style: none;
	padding-left: 0;
}

.wp-block-list.is-style-cb-ticks li {
	position: relative;
	padding-left: 2rem;
	margin-block: 0.6rem;
}

.wp-block-list.is-style-cb-ticks li::before {
	content: "✓";
	content: "✓" / "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 1.15rem;
	height: 1.15rem;
	display: grid;
	place-items: center;
	font-size: 0.7rem;
	color: var(--cb-signal);
	background: var(--cb-signal-ground);
	box-shadow: inset 0 0 0 1px var(--cb-signal-bar);
}

/* Timeline of editions. A horizontal strip on wide screens, scrolling inside
   itself if it must; a vertical list on phones. */
.wp-block-list.is-style-cb-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
	row-gap: 2rem;
	border-top: 1px solid var(--cb-rule);
}

.wp-block-list.is-style-cb-timeline > li {
	position: relative;
	padding: 1.5rem 1.25rem 0.5rem 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--cb-secondary);
	line-height: 1.45;
}

.wp-block-list.is-style-cb-timeline > li::before {
	content: "";
	position: absolute;
	top: -5px;
	left: 0;
	width: 9px;
	height: 9px;
	background: var(--cb-ground);
	box-shadow: inset 0 0 0 1px var(--cb-secondary);
}

.wp-block-list.is-style-cb-timeline > li > strong:first-child {
	display: block;
	margin-bottom: 0.35rem;
	font-family: var(--cb-mono);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	color: var(--cb-ink);
	letter-spacing: -0.02em;
}

/* The last edition is the next one: announced, in signal red. */
.wp-block-list.is-style-cb-timeline > li:last-child::before {
	background: var(--cb-signal-bar);
	box-shadow: none;
}

.wp-block-list.is-style-cb-timeline > li:last-child > strong:first-child {
	color: var(--cb-signal);
}

@media (max-width: 781px) {
	.wp-block-list.is-style-cb-timeline {
		grid-template-columns: 1fr;
		row-gap: 0;
		grid-auto-flow: row;
		border-top: 0;
		border-left: 1px solid var(--cb-rule);
		padding-left: 1.25rem;
	}

	.wp-block-list.is-style-cb-timeline > li {
		padding: 0 0 1.5rem;
	}

	.wp-block-list.is-style-cb-timeline > li::before {
		top: 0.45rem;
		left: calc(-1.25rem - 5px);
	}
}

/* Numbered questions: [01] in a bracketed box, as PhantomMesh's FAQ. */
:where(.wp-block-group, .entry-content, .wp-block-post-content):has(> .wp-block-details.is-style-cb-numbered) {
	counter-reset: cb-q;
}

.wp-block-details.is-style-cb-numbered {
	counter-increment: cb-q;
	background: var(--cb-surface);
	border: 1px solid var(--cb-rule);
	padding: 0;
	margin-block: 0.75rem;
}

.wp-block-details.is-style-cb-numbered:first-of-type,
.wp-block-details.is-style-cb-numbered[open] {
	border-top-color: var(--cb-signal-bar);
}

.wp-block-details.is-style-cb-numbered > summary {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.1rem 1.25rem;
	cursor: pointer;
	font-weight: 500;
	list-style: none;
}

.wp-block-details.is-style-cb-numbered > summary::-webkit-details-marker {
	display: none;
}

.wp-block-details.is-style-cb-numbered > summary::before {
	content: counter(cb-q, decimal-leading-zero);
	content: counter(cb-q, decimal-leading-zero) / "";
	--cb-b: var(--cb-signal-bar);
	--cb-bracket: 6px;
	flex: none;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	font-family: var(--cb-mono);
	font-size: var(--cb-label);
	font-weight: 400;
	color: var(--cb-signal);
	background-color: var(--cb-signal-ground);
	background-image:
		linear-gradient(var(--cb-b), var(--cb-b)), linear-gradient(var(--cb-b), var(--cb-b)),
		linear-gradient(var(--cb-b), var(--cb-b)), linear-gradient(var(--cb-b), var(--cb-b)),
		linear-gradient(var(--cb-b), var(--cb-b)), linear-gradient(var(--cb-b), var(--cb-b)),
		linear-gradient(var(--cb-b), var(--cb-b)), linear-gradient(var(--cb-b), var(--cb-b));
	background-position:
		top left, top left, top right, top right,
		bottom left, bottom left, bottom right, bottom right;
	background-size:
		var(--cb-bracket) 1px, 1px var(--cb-bracket), var(--cb-bracket) 1px, 1px var(--cb-bracket),
		var(--cb-bracket) 1px, 1px var(--cb-bracket), var(--cb-bracket) 1px, 1px var(--cb-bracket);
	background-repeat: no-repeat;
}

.wp-block-details.is-style-cb-numbered > summary::after {
	content: "+";
	content: "+" / "";
	margin-left: auto;
	font-family: var(--cb-mono);
	color: var(--cb-muted);
}

.wp-block-details.is-style-cb-numbered[open] > summary::after {
	content: "−";
	content: "−" / "";
}

.wp-block-details.is-style-cb-numbered > :not(summary) {
	margin: 0;
	padding: 0 1.25rem 1.25rem calc(3rem + 1.25rem);
	color: var(--cb-secondary);
}

/* 8 · Plate and zoom ------------------------------------------------------- */

/* A poster is a plate: the image untouched, a frame around it. */
.wp-block-image.is-style-cb-plate {
	background-color: var(--cb-inset);
	padding: clamp(0.75rem, 0.5rem + 1.5vw, 1.75rem);
}

.wp-block-image.is-style-cb-plate img {
	display: block;
	width: 100%;
	height: auto;
	box-shadow: 0 0 0 1px var(--cb-rule);
}

.wp-block-image.is-style-cb-plate a {
	cursor: zoom-in;
}

.wp-block-image.is-style-cb-plate figcaption {
	margin: 0.9rem 0 0;
	text-align: left;
	color: var(--cb-muted);
}

.cb-zoom {
	width: 100vw;
	height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--cb-ground);
	color: var(--cb-ink);
}

.cb-zoom::backdrop {
	background: rgb(0 0 0 / 0.8);
}

.cb-zoom[open] {
	display: grid;
	grid-template-rows: auto 1fr;
}

.cb-zoom__bar {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--cb-rule);
	font-family: var(--cb-mono);
	font-size: var(--cb-label);
	color: var(--cb-muted);
}

.cb-zoom__bar button {
	padding: 0.4em 0.8em;
	font: inherit;
	color: var(--cb-ink);
	background: var(--cb-surface);
	border: 1px solid var(--cb-rule);
	cursor: pointer;
}

.cb-zoom__bar button:first-of-type {
	margin-left: auto;
}

/* "Actual size" keeps its label; the pressed state shows it is on. */
.cb-zoom__bar button[aria-pressed="true"] {
	background: var(--cb-ink);
	color: var(--cb-ground);
	border-color: var(--cb-ink);
}

.cb-zoom__stage {
	overflow: auto;
	display: grid;
	place-items: center;
	cursor: grab;
	/* Touch keeps native panning and pinch-zoom; mouse and pen drag to pan. */
	touch-action: pan-x pan-y pinch-zoom;
	outline-offset: -3px;
}

.cb-zoom__stage.is-dragging {
	cursor: grabbing;
}

.cb-zoom__stage img {
	max-width: 100%;
	max-height: calc(100dvh - 4rem);
	user-select: none;
	-webkit-user-drag: none;
}

.cb-zoom.is-actual .cb-zoom__stage {
	place-items: start;
}

.cb-zoom.is-actual .cb-zoom__stage img {
	max-width: none;
	max-height: none;
}

/* 9 · Character field ------------------------------------------------------ */

/* The canvas is added by culturebots.js. Without JavaScript the section is
   plain ground; nothing depends on it. It fades out behind the text. */
.cb-field {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.cb-field > .cb-field__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	pointer-events: none;
	/* Kept off the text: the field lives to the right of a left-set headline. */
	-webkit-mask-image: linear-gradient(100deg, transparent 0%, transparent 46%, rgb(0 0 0 / 0.55) 62%, #000 82%);
	mask-image: linear-gradient(100deg, transparent 0%, transparent 46%, rgb(0 0 0 / 0.55) 62%, #000 82%);
}

/* Phones: the text takes the full width, so the field gets its own band
   under it instead of sitting beside it. */
@media (max-width: 781px) {
	.cb-field:not(.cb-field--band) {
		--cb-field-crest: 0.9;
		padding-bottom: 9rem;
	}

	.cb-field > .cb-field__canvas {
		-webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent calc(100% - 10rem), #000 calc(100% - 5rem));
		mask-image: linear-gradient(to bottom, transparent 0, transparent calc(100% - 10rem), #000 calc(100% - 5rem));
	}
}

.cb-field--band > .cb-field__canvas {
	/* Text sits at the left edge and the form at the right: the field shows between them. */
	-webkit-mask-image: linear-gradient(to right, transparent 0, transparent 28%, #000 42%, #000 58%, transparent 72%);
	mask-image: linear-gradient(to right, transparent 0, transparent 28%, #000 42%, #000 58%, transparent 72%);
}

/* 10 · Header and footer --------------------------------------------------- */

.cb-header {
	border-bottom: 1px solid var(--cb-rule);
}

.cb-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--cb-mono);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--cb-signal);
	text-decoration: none;
	white-space: nowrap;
}

.cb-brand:hover {
	color: var(--cb-signal);
	text-decoration: none;
}

/* 11 × 7 grid at 2px a cell. */
.cb-brand svg {
	width: 22px;
	height: 14px;
	flex: none;
}

.cb-brand__sub {
	color: var(--cb-muted);
	font-weight: 400;
}

.cb-header .wp-block-navigation .current-menu-item > a,
.cb-header .wp-block-navigation a[aria-current="page"] {
	color: var(--cb-ink);
	text-decoration: underline;
	text-decoration-color: var(--cb-signal-bar);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.5em;
}

.cb-footer {
	border-top: 1px solid var(--cb-rule);
	font-size: var(--wp--preset--font-size--small);
}

.cb-footer a:not(.cb-brand) {
	color: var(--cb-secondary);
	text-decoration: none;
}

.cb-footer a:not(.cb-brand):hover {
	color: var(--cb-ink);
	text-decoration: underline;
}

.cb-footer .cb-footer__list {
	color: var(--cb-secondary);
	list-style: none;
	padding: 0;
	margin: 0;
	font-family: var(--cb-mono);
	font-size: var(--cb-label);
	line-height: 2.1;
}

.cb-footer__base {
	border-top: 1px solid var(--cb-rule);
	font-family: var(--cb-mono);
	font-size: var(--cb-label);
	color: var(--cb-muted);
}

/* 11 · States -------------------------------------------------------------- */

/* An empty list is designed copy, not a blank region. */
.cb-empty {
	border: 1px dashed var(--cb-rule);
	padding: var(--wp--preset--spacing--40);
	font-family: var(--cb-mono);
	font-size: var(--wp--preset--font-size--small);
	color: var(--cb-secondary);
}

.cb-empty > * {
	margin-block: 0;
}

.cb-empty > * + * {
	margin-block-start: 0.75rem;
}

/* 12 · Notes ---------------------------------------------------------------- */

/* A small mono aside, as under a transcribed poster. */
.cb-note {
	font-family: var(--cb-mono);
	font-size: var(--cb-label);
	color: var(--cb-muted);
	border-left: 2px solid var(--cb-rule);
	padding-left: 0.9rem;
}

/* 13 · Preferences ----------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

/* Windows high contrast: gradients and backgrounds vanish, so give labels,
   brackets and panels real borders. */
@media (forced-colors: active) {
	.is-style-cb-label,
	.is-style-cb-label-neutral,
	.cb-status,
	.cb-brackets,
	.wp-block-button.is-style-cb-bracket > .wp-block-button__link,
	.wp-block-group.is-style-cb-bracket,
	.wp-block-group.is-style-cb-terminal,
	.wp-block-image.is-style-cb-plate,
	.wp-block-group.is-style-cb-record,
	.wp-block-group.is-style-cb-featured,
	.wp-block-button.is-style-cb-ghost > .wp-block-button__link,
	.wp-block-button.is-style-cb-light > .wp-block-button__link {
		border: 1px solid ButtonText;
	}
}

/* The one red word in a headline, underlined, as PhantomMesh's second line. */
.wp-block-heading mark.has-inline-color {
	text-decoration: underline;
	text-decoration-color: var(--cb-signal-bar);
	text-decoration-thickness: 0.06em;
	text-underline-offset: 0.12em;
}

/* Part headings between entries in a volume list. */
.cb-entry + .wp-block-heading.is-style-cb-eyebrow {
	margin-block-start: 2.5rem;
	padding-bottom: 0.25rem;
}

/* Dates inside a terminal box: label left, date right, no grid lines. */
.is-style-cb-terminal .wp-block-table {
	margin: 0;
}

.is-style-cb-terminal .wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.is-style-cb-terminal .wp-block-table td {
	border: 0;
	border-top: 1px solid var(--cb-rule);
	padding: 0.55rem 0;
	vertical-align: top;
}

.is-style-cb-terminal .wp-block-table tr:first-child td {
	border-top: 0;
}

.is-style-cb-terminal .wp-block-table td:first-child {
	color: var(--cb-muted);
	padding-right: 1rem;
}

.is-style-cb-terminal .wp-block-table td:last-child {
	text-align: right;
	white-space: nowrap;
}

/* Verbatim text inside prompts and citations keeps the surrounding type. */
.is-style-cb-prompt code,
.cb-cite__text code,
.cb-empty code {
	font: inherit;
	color: inherit;
	background: none;
	padding: 0;
	border: 0;
}

.cb-narrow {
	max-width: 52rem;
}

.cb-filter {
	margin-block-start: 1.75rem;
}

.cb-entry + .cb-entry {
	margin-block-start: 0;
}

/* Subscribe: one button, at the right-hand end of the strip. */
.cb-subscribe {
	flex: none;
	margin: 0;
}

/* Phones: the header keeps the glyph, the name and the menu; the sign-up
   lives in the footer. The copy button drops below the citation. */
@media (max-width: 600px) {
	.cb-header .wp-block-buttons.cb-header__cta {
		display: none;
	}

	/* The sign-up strip stays plain on phones: nothing behind the field. */
	.cb-field--band > .cb-field__canvas {
		display: none;
	}

	.cb-copy {
		position: static;
		margin-top: 1rem;
	}
}

/* 14 · Real templates --------------------------------------------------------- */

.cb-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
	gap: 1rem;
}

.cb-label-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.cb-label-row > * {
	margin: 0;
}

.cb-related > * + * {
	margin-block-start: 3rem;
}

.cb-entries {
	margin-block-start: 1rem;
}

.cb-entry__key code {
	font: inherit;
	color: var(--cb-secondary);
	background: none;
	padding: 0;
}

.cb-entry .wp-block-post-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	letter-spacing: -0.005em;
	line-height: 1.35;
	max-width: 62ch;
}

.cb-entry .wp-block-post-title a {
	text-decoration: none;
}

.cb-entry .wp-block-post-title a:hover {
	text-decoration: underline;
}

.cb-entry .wp-block-post-date.cb-entry__key {
	font-family: var(--cb-mono);
	font-size: var(--cb-label);
	color: var(--cb-muted);
}

.cb-entry .wp-block-post-excerpt,
.cb-entry .wp-block-post-excerpt__excerpt {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
}

.wp-block-post-template > .wp-block-post + .wp-block-post .cb-entry,
.wp-block-post-template > .wp-block-post:first-child .cb-entry {
	margin: 0;
}

/* In a list of publications, each volume heads its chapters (the import dates
   them so they follow it): a red rule above it, a larger title. */
.wp-block-post.cb_publication_kind-volume .cb-entry {
	border-top: 2px solid var(--cb-signal-bar);
	margin-block-start: 2.5rem;
	padding-block-start: 1.5rem;
}

.wp-block-post-template > .wp-block-post.cb_publication_kind-volume:first-child .cb-entry {
	margin-block-start: 0;
}

.wp-block-post.cb_publication_kind-volume .wp-block-post-title {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
}

/* Page bodies: top-level text reads as prose, in the serif. */
.cb-page > p,
.cb-page > ul,
.cb-page > ol {
	font-family: var(--cb-serif);
	font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem);
	line-height: 1.68;
	max-width: var(--wp--custom--measure--reading, 66ch);
}

.cb-page > :is(h2, h3) {
	margin-block-start: 2.5rem;
}

/* Poster plates in a grid. */
.cb-plate-card .cb-plate-thumb {
	margin: 0;
	background: var(--cb-inset);
	box-shadow: 0 0 0 1px var(--cb-rule);
}

.cb-plate-card .cb-plate-thumb img {
	object-position: top;
}

.cb-plate-card .cb-plate-title {
	margin: 0.75rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.4;
}

.cb-plate-card .cb-plate-title a {
	text-decoration: none;
}

.cb-plate-card .cb-plate-title a:hover {
	text-decoration: underline;
}

/* Search. */
.cb-search .wp-block-search__inside-wrapper {
	border: 0;
	padding: 0;
	gap: 0.5rem;
	max-width: 36rem;
}

.cb-search .wp-block-search__input {
	padding: 0.75rem 1rem;
	font-family: var(--cb-mono);
	font-size: var(--wp--preset--font-size--small);
	color: var(--cb-ink);
	background: var(--cb-surface);
	border: 1px solid var(--cb-rule);
	border-radius: 0;
}

.cb-search .wp-block-search__button {
	margin: 0;
	padding: 0.75rem 1.1rem;
	font-family: var(--cb-mono);
	font-size: var(--wp--preset--font-size--small);
	color: var(--cb-ground);
	background: var(--cb-ink);
	border: 0;
	border-radius: 0;
}

/* Pagination, featured images, deadlines. */
.wp-block-query-pagination {
	margin-block-start: 2rem;
	font-family: var(--cb-mono);
	font-size: var(--wp--preset--font-size--small);
}

.cb-feature img {
	box-shadow: 0 0 0 1px var(--cb-rule);
}

.cb-deadlines {
	font-family: var(--cb-mono);
	font-size: var(--wp--preset--font-size--small);
	color: var(--cb-ink);
}

/* Inside an entry, the fields sit close: WordPress's flow gap is for sections. */
.cb-entry__body > *,
.cb-entry__key > * {
	margin: 0;
}

.cb-entry__key > p:first-child {
	color: var(--cb-secondary);
}

/* The headline in a field stays clear of it: the field shows from 46% across. */
@media (min-width: 782px) {
	.cb-field:not(.cb-field--band) > .wp-block-heading {
		max-width: 52%;
	}
}

/* Pause control for the character field (added by culturebots.js). */
.cb-field__toggle {
	position: absolute;
	right: var(--wp--preset--spacing--50);
	bottom: 1rem;
	z-index: 1;
	padding: 0.35em 0.7em;
	font-family: var(--cb-mono);
	font-size: var(--cb-label);
	color: var(--cb-secondary);
	background: var(--cb-ground);
	border: 1px solid var(--cb-rule);
	cursor: pointer;
}

.cb-field__toggle:hover {
	color: var(--cb-ink);
	border-color: var(--cb-secondary);
}

/* The label stays "Pause animation"; paused shows as pressed, not as a new name. */
.cb-field__toggle[aria-pressed="true"] {
	background: var(--cb-ink);
	color: var(--cb-ground);
	border-color: var(--cb-ink);
}

@media (max-width: 600px) {
	.cb-field--band > .cb-field__toggle {
		display: none;
	}
}

/* No overlay menu, so no label may break: "Events & Calls" would. */
.cb-header .wp-block-navigation-item__label,
.cb-header__cta .wp-block-button__link {
	white-space: nowrap;
}

/* One row needs about 1120px with Contact (about 1030px before it, 30 October
   2026). Below that, the sections (and Subscribe, where it shows) take a
   second row. */
@media (max-width: 1179px) {
	.cb-header .cb-frame {
		flex-wrap: wrap !important;
		row-gap: 0.75rem;
	}

	.cb-header .cb-frame > .wp-block-group {
		flex-basis: 100%;
		flex-wrap: wrap !important;
		justify-content: space-between !important;
		row-gap: 0.75rem;
	}
}

/* Phones: the four sections fill the row, and go two by two where one row of
   them does not fit. */
@media (max-width: 600px) {
	.cb-header .wp-block-navigation {
		width: 100%;
	}

	.cb-header .wp-block-navigation__container {
		justify-content: space-between;
		width: 100%;
		gap: 0.75rem !important;
	}
}

@media (max-width: 479px) {
	.cb-header .wp-block-navigation__container {
		display: grid !important;
		grid-template-columns: auto auto;
		row-gap: 0.5rem !important;
	}
}

/* A record's affiliations, under its authors; ORCID links in the author line. */
.cb-affiliations {
	margin-block-start: 0.4rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--cb-muted);
}

.cb-authors + .cb-affiliations + .is-style-cb-meta {
	margin-block-start: 0.5rem;
}

.cb-authors a {
	color: inherit;
	text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}

.cb-authors a:hover {
	color: var(--cb-ink);
}

/* The transcription note under a poster. */
.cb-transcribed {
	margin-block-start: 1rem;
	max-width: 62ch;
}

/* The colour-scheme pill (added to the header by culturebots.js; without
   JavaScript the site is light and there is no pill). */
.cb-theme {
	display: inline-flex;
	flex: none;
	padding: 3px;
	border: 1px solid var(--cb-rule);
	border-radius: 999px;
	background: var(--cb-surface);
	font-family: var(--cb-mono);
	font-size: var(--cb-label);
	line-height: 1;
}

.cb-theme button {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.45em 0.8em;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--cb-muted);
	font: inherit;
	cursor: pointer;
}

.cb-theme button:hover {
	color: var(--cb-ink);
}

.cb-theme button[aria-pressed="true"] {
	background: var(--cb-ink);
	color: var(--cb-ground);
}

.cb-theme button::before {
	content: "";
	width: 0.6em;
	height: 0.6em;
	border-radius: 50%;
	border: 1px solid currentColor;
}

.cb-theme button[data-theme-choice="dark"]::before {
	background: currentColor;
}

/* Header row: brand, sections, then the pill. */
.cb-header .cb-frame {
	justify-content: flex-start !important;
	gap: 1.5rem;
}

.cb-header .cb-frame > .wp-block-group {
	margin-left: auto;
}

.cb-header .cb-theme-slot {
	order: 3;
	display: flex;
}

@media (max-width: 1079px) {
	.cb-header .cb-theme-slot {
		order: 1;
		margin-left: auto;
	}

	.cb-header .cb-frame > .wp-block-group {
		order: 2;
		margin-left: 0;
	}
}

@media (max-width: 600px) {
	.cb-header .cb-frame {
		column-gap: 0.75rem;
	}

	.cb-theme {
		padding: 2px;
	}

	.cb-theme button {
		padding: 0.4em 0.55em;
		gap: 0.3em;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.cb-theme button {
		transition: background-color 0.15s, color 0.15s;
	}
}

/* 404: the drawing robot, then ways back in. */
.cb-404__head {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
}

.cb-404__head > * {
	margin: 0;
}

.cb-404__text > * + * {
	margin-block-start: 1rem;
}

/* The drawing robot. The static picture is the last frame; it moves only where
   motion is welcome and motion paths are supported, and stops inside five
   seconds. Units inside the SVG are its own. */
.cb-404__scene svg {
	display: block;
	width: clamp(11rem, 7rem + 16vw, 18rem);
	height: auto;
	overflow: visible;
}

.cb-404__page {
	fill: var(--cb-surface);
	stroke: var(--cb-rule);
}

.cb-404__folio {
	font-family: var(--cb-mono);
	font-size: 6px;
	letter-spacing: 0.1em;
	fill: var(--cb-secondary);
}

.cb-404__ink,
.cb-404__wheel {
	fill: var(--cb-ink);
}

.cb-404__shell {
	fill: var(--cb-signal);
}

.cb-404__pen {
	fill: var(--cb-ground);
}

.cb-404__bumper {
	fill: none;
	stroke: var(--cb-ground);
	stroke-linecap: round;
}

@media (prefers-reduced-motion: no-preference) {
	@supports (offset-path: path("M0 0")) {
		.cb-404__turtle {
			transform: none;
			offset-path: var(--cb-route);
			offset-rotate: auto;
			animation: cb-404-drive var(--cb-drive) linear 0.4s both;
		}

		/* On the inner group, so it turns about the turtle, not the page. */
		.cb-404__body {
			animation: cb-404-wiggle 0.6s ease-in-out calc(var(--cb-drive) + 0.6s) both;
		}

		.cb-404__ink {
			animation: cb-404-ink 1ms calc(var(--t) + 0.4s) both;
		}

		@keyframes cb-404-drive {
			from { offset-distance: 0%; }
			to { offset-distance: 100%; }
		}

		@keyframes cb-404-wiggle {
			0%, 100% { rotate: 0deg; }
			30% { rotate: -20deg; }
			70% { rotate: 20deg; }
		}

		@keyframes cb-404-ink {
			from { opacity: 0; }
		}
	}
}

.is-style-cb-prompt code {
	overflow-wrap: anywhere;
}

.cb-404__search .wp-block-search__label {
	font-family: var(--cb-mono);
	font-size: var(--cb-label);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--cb-secondary);
}

@media (max-width: 600px) {
	.cb-404__head {
		grid-template-columns: 1fr;
	}
}

/* Cards in a grid: no flow-layout margins, so every card starts level. */
.cb-cards > * {
	margin-block: 0 !important;
}

/* 14 · Form ------------------------------------------------------------------ */

/* The contact form (culturebots-core, blocks/contact-form). A bibliography
   entry whose body is a form: the key column says what it is, the fields take
   option C's treatment from the launch list: mono uppercase labels, flat
   fields on the surface colour, the bracketed button. The theme had no form
   styling before this; Twenty Twenty-Five's inputs would look foreign here. */
.cb-form {
	margin-block-start: 2rem;
	padding-block: 2rem;
	border-bottom: 1px solid var(--cb-rule);
}

.cb-form__fields {
	gap: 1.25rem;
	max-width: 40rem;
}

.cb-form__field {
	display: grid;
	gap: 0.4rem;
}

.cb-form__field label {
	font-family: var(--cb-mono);
	font-size: var(--cb-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cb-secondary);
	line-height: 1.4;
}

/* border-box: without it the padding pushes the fields past the column,
   off the right of a phone screen. */
.cb-form input:not([type="hidden"]),
.cb-form textarea {
	box-sizing: border-box;
	inline-size: 100%;
	margin: 0;
	padding: 0.65rem 0.8rem;
	font: inherit;
	line-height: 1.5;
	color: var(--cb-ink);
	background: var(--cb-surface);
	border: 1px solid var(--cb-rule);
	border-radius: 0;
	box-shadow: none;
	appearance: none;
}

.cb-form textarea {
	min-height: 11rem;
	resize: vertical;
}

/* Hover darkens the hairline, as on the kind filter (section 5). */
.cb-form input:not([type="hidden"]):hover,
.cb-form textarea:hover {
	border-color: var(--cb-secondary);
}

/* The focus ring is the site's (section 1); the border joins in. */
.cb-form input:focus-visible,
.cb-form textarea:focus-visible {
	border-color: var(--cb-signal-bar);
}

/* The honeypot: present for a bot, out of reach for a person and a screen reader. */
.cb-form__hp {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* The bot check runs out of sight unless Cloudflare wants a click. Until then
   its box is empty and out of the grid, so it adds no gap; the plugin's
   view.js adds is-shown just before a challenge appears. */
.cb-form .cf-turnstile:not(.is-shown) {
	position: absolute;
}

/* The outcome. Empty until there is one; red for an error, red ground for "sent". */
.cb-form__notice {
	margin: 0;
	font-family: var(--cb-mono);
	font-size: var(--cb-label);
	line-height: 1.5;
}

.cb-form__notice:empty {
	display: none;
}

.cb-form__notice[data-state="ok"] {
	padding: 0.6rem 0.8rem;
	color: var(--cb-ink);
	background: var(--cb-signal-ground);
	border-left: 2px solid var(--cb-signal-bar);
}

.cb-form__notice[data-state="error"] {
	color: var(--cb-signal);
}

.cb-form__actions {
	margin: 0;
}

/* What the details are for and how long they are kept: the key column's
   voice, under the button. */
.cb-form__note {
	margin: 0;
	font-family: var(--cb-mono);
	font-size: var(--cb-label);
	line-height: 1.55;
	color: var(--cb-muted);
}

.cb-form__note a {
	color: var(--cb-secondary);
}

/* The button is the theme's bracketed one; a <button>, not a block, so the
   prefix is set here. */
.cb-form__submit {
	cursor: pointer;
}

.cb-form__submit::before {
	content: "> ";
	content: "> " / "";
}

.cb-form__submit:disabled {
	cursor: wait;
	opacity: 0.6;
}

@media (max-width: 781px) {
	.cb-form {
		margin-block-start: 1.5rem;
	}

	.cb-form .cb-entry__key {
		margin-block-end: 0.5rem;
	}
}