/*
Theme Name: Written By William
Theme URI: https://writtenbywilliam.com/
Author: Design Principles
Description: A dark, editorial portfolio theme for working journalists. Category-driven, click-to-open accessible navigation, mobile-first styling, and a dedicated "Thoughts and Advice from Will" section.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: written-by-william
Tags: portfolio, blog, dark, one-column, custom-menu, featured-images, accessibility-ready, translation-ready
*/

/* -------------------------------------------------------------------------
 * 1. Design tokens
 * ---------------------------------------------------------------------- */

:root {
	/* Surfaces */
	--wbw-bg: #0b0c0f;
	--wbw-bg-elev: #12141a;
	--wbw-bg-elev-2: #191d25;
	--wbw-line: #262b35;
	--wbw-line-strong: #39404e;

	/* Ink */
	--wbw-text: #f3f4f6;
	--wbw-text-muted: #aab1be;
	--wbw-text-dim: #8891a1;

	/* Accent */
	--wbw-accent: #e0b357;
	--wbw-accent-strong: #f3c977;
	--wbw-accent-ink: #0b0c0f;
	--wbw-accent-track: rgba(224, 179, 87, 0.22);
	--wbw-focus: #8ac7ff;

	/* Type */
	--wbw-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--wbw-font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
	--wbw-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	--wbw-step--1: clamp(0.82rem, 0.80rem + 0.10vw, 0.88rem);
	--wbw-step-0: clamp(1rem, 0.97rem + 0.15vw, 1.09rem);
	--wbw-step-1: clamp(1.19rem, 1.12rem + 0.34vw, 1.42rem);
	--wbw-step-2: clamp(1.41rem, 1.28rem + 0.65vw, 1.85rem);
	--wbw-step-3: clamp(1.67rem, 1.45rem + 1.10vw, 2.40rem);
	--wbw-step-4: clamp(1.99rem, 1.62rem + 1.83vw, 3.13rem);
	--wbw-step-5: clamp(2.36rem, 1.78rem + 2.90vw, 4.07rem);

	/* Space */
	--wbw-space-2xs: 0.375rem;
	--wbw-space-xs: 0.625rem;
	--wbw-space-s: 1rem;
	--wbw-space-m: 1.5rem;
	--wbw-space-l: 2.25rem;
	--wbw-space-xl: 3.5rem;
	--wbw-space-2xl: 5rem;

	/* Shell */
	--wbw-measure: 40rem;
	--wbw-container: 76rem;
	--wbw-gutter: 1.25rem;
	--wbw-radius: 4px;
	--wbw-radius-lg: 10px;
	--wbw-header-height: 4rem;

	--wbw-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.45);
	--wbw-transition: 180ms cubic-bezier(0.2, 0, 0.2, 1);
}

@media (min-width: 48em) {
	:root {
		--wbw-gutter: 2rem;
		--wbw-header-height: 4.75rem;
	}
}

/* -------------------------------------------------------------------------
 * 2. Base
 * ---------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--wbw-header-height) + 1rem);
}

body {
	margin: 0;
	background-color: var(--wbw-bg);
	color: var(--wbw-text);
	font-family: var(--wbw-font-body);
	font-size: var(--wbw-step-0);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}

body.wbw-nav-open {
	overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--wbw-space-s);
	font-family: var(--wbw-font-display);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

h1 { font-size: var(--wbw-step-4); }
h2 { font-size: var(--wbw-step-3); }
h3 { font-size: var(--wbw-step-2); }
h4 { font-size: var(--wbw-step-1); }
h5, h6 { font-size: var(--wbw-step-0); }

p, ul, ol, dl, blockquote, figure, pre, table {
	margin: 0 0 var(--wbw-space-m);
}

a {
	color: var(--wbw-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

a:hover,
a:focus-visible {
	color: var(--wbw-accent-strong);
}

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

figure img {
	border-radius: var(--wbw-radius);
}

blockquote {
	margin-inline: 0;
	padding-left: var(--wbw-space-m);
	border-left: 3px solid var(--wbw-accent);
	color: var(--wbw-text);
	font-family: var(--wbw-font-display);
	font-size: var(--wbw-step-1);
	font-style: italic;
	line-height: 1.45;
}

blockquote cite {
	display: block;
	margin-top: var(--wbw-space-xs);
	font-family: var(--wbw-font-body);
	font-size: var(--wbw-step--1);
	font-style: normal;
	color: var(--wbw-text-dim);
}

code, kbd, samp, pre {
	font-family: var(--wbw-font-mono);
	font-size: 0.9em;
}

code {
	padding: 0.15em 0.4em;
	background: var(--wbw-bg-elev-2);
	border-radius: var(--wbw-radius);
}

pre {
	padding: var(--wbw-space-s);
	background: var(--wbw-bg-elev-2);
	border: 1px solid var(--wbw-line);
	border-radius: var(--wbw-radius);
	overflow-x: auto;
}

hr {
	height: 1px;
	margin: var(--wbw-space-l) 0;
	border: 0;
	background: var(--wbw-line);
}

table {
	width: 100%;
	border-collapse: collapse;
}

th, td {
	padding: var(--wbw-space-xs) var(--wbw-space-s);
	border-bottom: 1px solid var(--wbw-line);
	text-align: left;
}

th {
	font-size: var(--wbw-step--1);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wbw-text-muted);
}

::selection {
	background: var(--wbw-accent);
	color: var(--wbw-accent-ink);
}

/* -------------------------------------------------------------------------
 * 3. Accessibility helpers
 * ---------------------------------------------------------------------- */

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

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.screen-reader-text:focus {
	background-color: var(--wbw-bg-elev-2);
	clip-path: none;
	color: var(--wbw-text);
	display: block;
	font-size: 1rem;
	font-weight: 600;
	height: auto;
	left: 1rem;
	line-height: normal;
	padding: 0.9rem 1.25rem;
	text-decoration: none;
	top: 1rem;
	width: auto;
	z-index: 100000;
	border-radius: var(--wbw-radius);
	box-shadow: var(--wbw-shadow);
}

.wbw-skip-link:focus {
	position: fixed;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* -------------------------------------------------------------------------
 * 4. Layout
 * ---------------------------------------------------------------------- */

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

.wbw-container--narrow {
	max-width: 48rem;
}

.wbw-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wbw-main {
	flex: 1 0 auto;
	padding-block: var(--wbw-space-l) var(--wbw-space-xl);
}

@media (min-width: 48em) {
	.wbw-main {
		padding-block: var(--wbw-space-xl) var(--wbw-space-2xl);
	}
}

/*
 * A hero opens flush against the masthead at every width: its own padding and
 * the glow behind it are the breathing room. Pages without one keep the gap.
 * The extra class outranks the rule above at every breakpoint, so no duplicate
 * media query is needed here.
 */
.wbw-has-hero .wbw-main {
	padding-block-start: 0;
}

/*
 * ...but the first section still needs air under the hero's divider. The base
 * rule zeroes that margin because main's padding normally provides the gap;
 * with a hero there is no padding, so the margin has to come back.
 */
.wbw-has-hero .wbw-section:first-child {
	margin-block-start: var(--wbw-space-xl);
}

@media (min-width: 48em) {
	.wbw-has-hero .wbw-section:first-child {
		margin-block-start: var(--wbw-space-2xl);
	}
}

.wbw-section {
	margin-block: var(--wbw-space-xl);
}

.wbw-section:first-child {
	margin-block-start: 0;
}

.wbw-section__head {
	display: flex;
	flex-direction: column;
	gap: var(--wbw-space-2xs);
	margin-bottom: var(--wbw-space-m);
	padding-bottom: var(--wbw-space-s);
	border-bottom: 1px solid var(--wbw-line);
}

.wbw-section__title {
	margin: 0;
	font-size: var(--wbw-step-2);
}

.wbw-section__desc {
	margin: 0;
	max-width: var(--wbw-measure);
	color: var(--wbw-text-muted);
	font-size: var(--wbw-step--1);
}

.wbw-section__link {
	font-size: var(--wbw-step--1);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	white-space: nowrap;
}

.wbw-section__link:hover,
.wbw-section__link:focus-visible {
	text-decoration: underline;
}

@media (min-width: 48em) {
	.wbw-section__head {
		flex-direction: row;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--wbw-space-m);
	}
}

.wbw-eyebrow {
	display: block;
	margin-bottom: var(--wbw-space-2xs);
	color: var(--wbw-accent);
	font-family: var(--wbw-font-body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
 * 5. Buttons and forms
 * ---------------------------------------------------------------------- */

.wbw-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0.7rem 1.35rem;
	border: 1px solid var(--wbw-accent);
	border-radius: 999px;
	background: var(--wbw-accent);
	color: var(--wbw-accent-ink);
	font-family: inherit;
	font-size: var(--wbw-step--1);
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--wbw-transition), border-color var(--wbw-transition), transform var(--wbw-transition);
}

.wbw-button:hover,
.wbw-button:focus-visible {
	background: var(--wbw-accent-strong);
	border-color: var(--wbw-accent-strong);
	color: var(--wbw-accent-ink);
	transform: translateY(-1px);
}

.wbw-button--ghost {
	background: transparent;
	border-color: var(--wbw-line-strong);
	color: var(--wbw-text);
}

.wbw-button--ghost:hover,
.wbw-button--ghost:focus-visible {
	background: var(--wbw-bg-elev-2);
	border-color: var(--wbw-accent);
	color: var(--wbw-text);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
select {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.65rem 0.9rem;
	background: var(--wbw-bg-elev-2);
	border: 1px solid var(--wbw-line-strong);
	border-radius: var(--wbw-radius);
	color: var(--wbw-text);
	font-family: inherit;
	font-size: var(--wbw-step-0);
}

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

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

label {
	display: block;
	margin-bottom: var(--wbw-space-2xs);
	color: var(--wbw-text-muted);
	font-size: var(--wbw-step--1);
	font-weight: 600;
}

.wbw-search-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wbw-space-xs);
}

.wbw-search-form__field {
	flex: 1 1 12rem;
}

.wbw-search-form label {
	margin: 0;
}

/* -------------------------------------------------------------------------
 * 6. Site header and navigation (mobile first)
 * ---------------------------------------------------------------------- */

.wbw-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(11, 12, 15, 0.92);
	border-bottom: 1px solid var(--wbw-line);
	backdrop-filter: saturate(150%) blur(12px);
}

.wbw-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wbw-space-s);
	min-height: var(--wbw-header-height);
}

.wbw-branding {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
}

.wbw-branding__title {
	margin: 0;
	font-size: var(--wbw-step-1);
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.wbw-branding__title a {
	color: var(--wbw-text);
	text-decoration: none;
}

.wbw-branding__title a:hover,
.wbw-branding__title a:focus-visible {
	color: var(--wbw-accent);
}

.wbw-branding__tagline {
	display: none;
	margin: 0;
	color: var(--wbw-text-dim);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.wbw-branding .custom-logo {
	width: auto;
	max-height: 2.5rem;
}

.wbw-header__actions {
	display: flex;
	align-items: center;
	gap: var(--wbw-space-2xs);
}

/* Icon buttons: menu + search toggles. */
.wbw-icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0.5rem 0.75rem;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--wbw-radius);
	color: var(--wbw-text);
	font-family: inherit;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--wbw-transition), border-color var(--wbw-transition);
}

.wbw-icon-button:hover,
.wbw-icon-button:focus-visible {
	background: var(--wbw-bg-elev-2);
	border-color: var(--wbw-line-strong);
}

.wbw-icon-button[aria-expanded="true"] {
	background: var(--wbw-bg-elev-2);
	border-color: var(--wbw-accent);
	color: var(--wbw-accent);
}

.wbw-icon-button svg {
	width: 1.25rem;
	height: 1.25rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.wbw-icon-button .wbw-icon-close,
.wbw-icon-button[aria-expanded="true"] .wbw-icon-open {
	display: none;
}

.wbw-icon-button[aria-expanded="true"] .wbw-icon-close {
	display: block;
}

/* Search panel */
.wbw-search-panel {
	display: none;
	padding-block: var(--wbw-space-s) var(--wbw-space-m);
	border-top: 1px solid var(--wbw-line);
}

.wbw-search-panel.is-open {
	display: block;
}

/* Primary navigation: mobile panel */
.wbw-primary-nav {
	display: none;
	padding-bottom: var(--wbw-space-m);
	border-top: 1px solid var(--wbw-line);
	max-height: calc(100vh - var(--wbw-header-height));
	overflow-y: auto;
	overscroll-behavior: contain;
}

.wbw-primary-nav.is-open {
	display: block;
}

.wbw-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wbw-menu > li {
	border-bottom: 1px solid var(--wbw-line);
}

.wbw-menu > li:last-child {
	border-bottom: 0;
}

.wbw-menu__item-wrap {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 0.25rem;
}

.wbw-menu a {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-height: 3rem;
	padding: 0.75rem 0.25rem;
	color: var(--wbw-text);
	font-size: var(--wbw-step-0);
	font-weight: 500;
	text-decoration: none;
}

.wbw-menu a:hover,
.wbw-menu a:focus-visible {
	color: var(--wbw-accent);
}

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

/* Submenu disclosure button (click to open, never hover). */
.wbw-submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 3rem;
	min-height: 3rem;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: var(--wbw-radius);
	color: var(--wbw-text-muted);
	cursor: pointer;
}

.wbw-submenu-toggle:hover,
.wbw-submenu-toggle:focus-visible {
	color: var(--wbw-accent);
	background: var(--wbw-bg-elev-2);
}

.wbw-submenu-toggle svg {
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform var(--wbw-transition);
}

.wbw-submenu-toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.wbw-submenu {
	display: none;
	margin: 0 0 var(--wbw-space-xs);
	padding: 0 0 0 var(--wbw-space-s);
	list-style: none;
	border-left: 2px solid var(--wbw-line-strong);
}

.wbw-submenu.is-open {
	display: block;
}

.wbw-submenu a {
	min-height: 2.75rem;
	color: var(--wbw-text-muted);
	font-size: var(--wbw-step--1);
}

.wbw-menu__count {
	margin-left: 0.5rem;
	color: var(--wbw-text-dim);
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
}

/* Desktop navigation */
@media (min-width: 62em) {
	.wbw-branding__tagline {
		display: block;
	}

	.wbw-header__bar {
		gap: var(--wbw-space-l);
	}

	.wbw-nav-toggle {
		display: none;
	}

	.wbw-primary-nav {
		display: block;
		flex: 1 1 auto;
		padding: 0;
		border-top: 0;
		max-height: none;
		overflow: visible;
	}

	.wbw-menu {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-end;
		gap: 0.25rem;
	}

	.wbw-menu > li {
		position: relative;
		border-bottom: 0;
	}

	.wbw-menu > li > .wbw-menu__item-wrap {
		gap: 0;
		border-radius: var(--wbw-radius);
	}

	.wbw-menu > li > .wbw-menu__item-wrap > a {
		min-height: 2.5rem;
		padding: 0.4rem 0.7rem;
		font-size: 0.95rem;
	}

	.wbw-menu > li > .wbw-menu__item-wrap > a::after {
		content: "";
		position: absolute;
		left: 0.7rem;
		right: 0.7rem;
		bottom: 0.15rem;
		height: 2px;
		background: var(--wbw-accent);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform var(--wbw-transition);
	}

	.wbw-menu > li:hover > .wbw-menu__item-wrap > a::after,
	.wbw-menu > li.current-menu-item > .wbw-menu__item-wrap > a::after,
	.wbw-menu > li.current-menu-ancestor > .wbw-menu__item-wrap > a::after {
		transform: scaleX(1);
	}

	.wbw-submenu-toggle {
		width: 2rem;
		min-height: 2.5rem;
	}

	.wbw-submenu {
		position: absolute;
		top: calc(100% + 0.35rem);
		left: 0;
		z-index: 60;
		min-width: 14rem;
		max-width: 20rem;
		margin: 0;
		padding: 0.35rem;
		background: var(--wbw-bg-elev);
		border: 1px solid var(--wbw-line-strong);
		border-radius: var(--wbw-radius-lg);
		box-shadow: var(--wbw-shadow);
	}

	.wbw-menu > li:last-child .wbw-submenu {
		left: auto;
		right: 0;
	}

	.wbw-submenu a {
		padding: 0.5rem 0.65rem;
		border-radius: var(--wbw-radius);
	}

	.wbw-submenu a:hover,
	.wbw-submenu a:focus-visible {
		background: var(--wbw-bg-elev-2);
		color: var(--wbw-accent);
	}
}

/* -------------------------------------------------------------------------
 * 7. Hero
 * ---------------------------------------------------------------------- */

.wbw-hero {
	position: relative;
	padding-block: var(--wbw-space-xl);
	border-bottom: 1px solid var(--wbw-line);
	overflow: hidden;
}

.wbw-hero__glow {
	position: absolute;
	inset: -30% -20% auto -20%;
	height: 26rem;
	background: radial-gradient(60% 60% at 50% 40%, rgba(224, 179, 87, 0.16), rgba(11, 12, 15, 0) 70%);
	pointer-events: none;
}

.wbw-hero__inner {
	position: relative;
	display: grid;
	gap: var(--wbw-space-l);
}

.wbw-hero__title {
	margin-bottom: var(--wbw-space-s);
	font-size: var(--wbw-step-5);
}

.wbw-hero__intro {
	max-width: var(--wbw-measure);
	color: var(--wbw-text-muted);
	font-size: var(--wbw-step-1);
	line-height: 1.5;
}

.wbw-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wbw-space-xs);
	margin-top: var(--wbw-space-m);
}

.wbw-hero__portrait {
	position: relative;
	max-width: 18rem;
	border-radius: var(--wbw-radius-lg);
	border: 1px solid var(--wbw-line-strong);
	overflow: hidden;
}

.wbw-hero__portrait img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

@media (min-width: 62em) {
	.wbw-hero {
		padding-block: var(--wbw-space-2xl);
	}

	.wbw-hero__inner {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
		align-items: center;
		gap: var(--wbw-space-xl);
	}

	.wbw-hero__portrait {
		max-width: none;
		justify-self: end;
	}
}

/* -------------------------------------------------------------------------
 * 8. Post cards
 * ---------------------------------------------------------------------- */

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

@media (min-width: 40em) {
	.wbw-grid--2,
	.wbw-grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 62em) {
	.wbw-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.wbw-grid {
		gap: var(--wbw-space-l);
	}
}

.wbw-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--wbw-bg-elev);
	border: 1px solid var(--wbw-line);
	border-radius: var(--wbw-radius-lg);
	overflow: hidden;
	transition: border-color var(--wbw-transition), transform var(--wbw-transition);
}

.wbw-card:hover,
.wbw-card:focus-within {
	border-color: var(--wbw-card-ink, var(--wbw-line-strong));
	transform: translateY(-4px);
}

.wbw-card__media {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--wbw-bg-elev-2);
	border-bottom: 1px solid var(--wbw-line);
}

/* The artwork zooms gently under the card's fixed frame on hover. */
.wbw-card__media > img,
.wbw-card__media > svg {
	transition: transform 520ms cubic-bezier(0.2, 0, 0.2, 1);
}

.wbw-card:hover .wbw-card__media > img,
.wbw-card:hover .wbw-card__media > svg,
.wbw-card:focus-within .wbw-card__media > img,
.wbw-card:focus-within .wbw-card__media > svg {
	transform: scale(1.045);
}

.wbw-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--wbw-space-xs);
	padding: var(--wbw-space-m);
}

.wbw-card__title {
	margin: 0;
	font-size: var(--wbw-step-1);
	line-height: 1.25;
}

.wbw-card__title a {
	color: var(--wbw-text);
	text-decoration: none;
}

/* Full-card hit area, keyboard focus still lands on the real link. */
.wbw-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.wbw-card {
	position: relative;
}

.wbw-card__title a:hover,
.wbw-card__title a:focus-visible {
	color: var(--wbw-accent);
}

/* Keyboard focus outlines the whole target, not just the headline text. */
.wbw-card:has( .wbw-card__title a:focus-visible ),
.wbw-thought:has( .wbw-thought__title a:focus-visible ) {
	outline: 3px solid var(--wbw-focus);
	outline-offset: 2px;
}

.wbw-card__excerpt {
	margin: 0;
	color: var(--wbw-text-muted);
	font-size: var(--wbw-step--1);
}

.wbw-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wbw-space-xs);
	margin-top: auto;
	padding-top: var(--wbw-space-xs);
}

/* "Read →" stays out of the way until the card is hovered or focused. */
.wbw-card__cue {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	flex: 0 0 auto;
	pointer-events: none;
	color: var(--wbw-card-ink, var(--wbw-accent));
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0;
	transform: translateX(-0.4rem);
	transition: opacity var(--wbw-transition), transform var(--wbw-transition);
}

.wbw-card:hover .wbw-card__cue,
.wbw-card:focus-within .wbw-card__cue {
	opacity: 1;
	transform: translateX(0);
}

.wbw-card__arrow {
	width: 1.05em;
	height: 1.05em;
	transition: transform var(--wbw-transition);
}

.wbw-card:hover .wbw-card__arrow,
.wbw-card:focus-within .wbw-card__arrow {
	transform: translateX(0.15rem);
}

@media (prefers-reduced-motion: reduce) {
	.wbw-card__cue {
		opacity: 1;
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * 9. Meta, chips, bylines
 * ---------------------------------------------------------------------- */

.wbw-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.75rem;
	margin: 0;
	color: var(--wbw-text-dim);
	font-size: 0.8rem;
	letter-spacing: 0.02em;
}

/*
 * A drawn dot, not a bullet character. As a background it sits outside the text
 * contrast rules that a decorative glyph gets judged by, and it can be given a
 * tone that is actually visible — the "•" it replaced measured 1.77:1.
 */
.wbw-meta__sep {
	width: 3px;
	height: 3px;
	flex: 0 0 auto;
	border-radius: 50%;
	background-color: var(--wbw-text-dim);
	align-self: center;
}

.wbw-meta a {
	color: var(--wbw-text-muted);
	text-decoration: none;
}

.wbw-meta a:hover,
.wbw-meta a:focus-visible {
	color: var(--wbw-accent);
	text-decoration: underline;
}

/*
 * Cards use one click model: a stretched link from the headline covering the
 * whole card (see .wbw-card__title a::after). Two rules keep it working —
 *   1. only genuinely interactive children may sit above the overlay, and they
 *      raise the ANCHOR, never its container, or the container's empty space
 *      becomes dead;
 *   2. decorative children never raise themselves — they use pointer-events:
 *      none and negative z-index so they paint under text without blocking.
 */
.wbw-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wbw-chip {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	min-height: 1.75rem;
	padding: 0.2rem 0.6rem;
	background: var(--wbw-bg-elev-2);
	border: 1px solid var(--wbw-line-strong);
	border-radius: 999px;
	color: var(--wbw-text-muted);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color var(--wbw-transition), border-color var(--wbw-transition),
		background-color var(--wbw-transition), transform var(--wbw-transition);
}

.wbw-chip:hover,
.wbw-chip:focus-visible {
	background-color: var(--wbw-card-ink, var(--wbw-accent));
	border-color: transparent;
	color: var(--wbw-accent-ink);
	transform: translateY(-1px);
}

.wbw-publication {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--wbw-accent);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
 * 10. Category tiles
 * ---------------------------------------------------------------------- */

.wbw-beats {
	display: grid;
	gap: var(--wbw-space-s);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 40em) {
	.wbw-beats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 62em) {
	.wbw-beats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/*
 * Beat tiles echo the card cover art rather than repeating a flat icon: the
 * motif is a large watermark bleeding off the corner, tinted with that beat's
 * colour, over a matching glow. Tokens come from the template per term.
 */
.wbw-beat {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.3rem;
	min-height: 9.5rem;
	height: 100%;
	padding: var(--wbw-space-m);
	overflow: hidden;
	background:
		radial-gradient(120% 120% at 100% 100%, var(--wbw-beat-glow, rgba(224, 179, 87, 0.12)), rgba(11, 12, 15, 0) 62%),
		linear-gradient(160deg, var(--wbw-beat-bg, var(--wbw-bg-elev)) 0%, var(--wbw-bg-elev-2) 100%);
	border: 1px solid var(--wbw-line);
	border-radius: var(--wbw-radius-lg);
	color: var(--wbw-text);
	text-decoration: none;
	transition: border-color var(--wbw-transition), transform var(--wbw-transition);
}

.wbw-beat:hover,
.wbw-beat:focus-visible {
	border-color: var(--wbw-beat-ink, var(--wbw-accent));
	color: var(--wbw-text);
	transform: translateY(-2px);
}

.wbw-beat__name {
	display: block;
	margin-bottom: 0.25rem;
	font-family: var(--wbw-font-display);
	font-size: var(--wbw-step-1);
	font-weight: 600;
}

.wbw-beat__count {
	display: block;
	color: var(--wbw-text-dim);
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
 * 11. Thoughts and Advice
 * ---------------------------------------------------------------------- */

.wbw-thoughts {
	position: relative;
	padding: var(--wbw-space-l) var(--wbw-gutter);
	background:
		radial-gradient(80% 120% at 0% 0%, rgba(224, 179, 87, 0.10), rgba(11, 12, 15, 0) 60%),
		var(--wbw-bg-elev);
	border: 1px solid var(--wbw-line);
	border-radius: var(--wbw-radius-lg);
}

@media (min-width: 62em) {
	.wbw-thoughts {
		padding: var(--wbw-space-xl);
	}
}

.wbw-thought {
	position: relative;
	/*
	 * The card must be its own stacking context, or the quote watermark at
	 * z-index -1 paints behind this card's background and disappears. It only
	 * showed on hover because the hover transform happened to create one.
	 * isolation does it without becoming a containing block, so the headline's
	 * stretched ::after still covers the whole card.
	 */
	isolation: isolate;
	display: flex;
	flex-direction: column;
	gap: var(--wbw-space-xs);
	height: 100%;
	padding: var(--wbw-space-m);
	background: var(--wbw-bg);
	border: 1px solid var(--wbw-line);
	border-radius: var(--wbw-radius-lg);
	transition: border-color var(--wbw-transition), transform var(--wbw-transition);
}

.wbw-thought:hover,
.wbw-thought:focus-within {
	border-color: var(--wbw-accent);
	transform: translateY(-2px);
}

/* The quote mark is a watermark bled off the top corner, not a leading glyph. */
.wbw-thought {
	overflow: hidden;
	padding-top: var(--wbw-space-l);
}

.wbw-thought__mark {
	position: absolute;
	z-index: -1;
	top: -0.35rem;
	right: -0.75rem;
	width: 42%;
	max-width: 8.5rem;
	height: auto;
	color: var(--wbw-accent);
	opacity: 0.16;
	pointer-events: none;
	transition: opacity var(--wbw-transition), transform var(--wbw-transition);
}

.wbw-thought:hover .wbw-thought__mark,
.wbw-thought:focus-within .wbw-thought__mark {
	opacity: 0.26;
	transform: translateY(-2px) scale(1.03);
}

/*
 * The content is deliberately NOT raised here. Giving .wbw-thought__title
 * position:relative made it the containing block for the headline link's
 * stretched ::after, which shrank the click area to the headline. The watermark
 * sits at z-index -1 instead, so it paints under the text without any of the
 * content needing a stacking context.
 */

.wbw-thought__title {
	margin: 0;
	font-size: var(--wbw-step-1);
	line-height: 1.25;
}

.wbw-thought__title a {
	color: var(--wbw-text);
	text-decoration: none;
}

.wbw-thought__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.wbw-thought__title a:hover,
.wbw-thought__title a:focus-visible {
	color: var(--wbw-accent);
}

.wbw-thought__excerpt {
	margin: 0;
	color: var(--wbw-text-muted);
	font-size: var(--wbw-step--1);
}

/* -------------------------------------------------------------------------
 * 12. Archive header
 * ---------------------------------------------------------------------- */

.wbw-page-header {
	margin-bottom: var(--wbw-space-l);
	padding-bottom: var(--wbw-space-m);
	border-bottom: 1px solid var(--wbw-line);
}

.wbw-page-header__title {
	margin-bottom: var(--wbw-space-xs);
	font-size: var(--wbw-step-4);
}

.wbw-page-header__desc {
	max-width: var(--wbw-measure);
	margin: 0;
	color: var(--wbw-text-muted);
	font-size: var(--wbw-step-1);
	line-height: 1.5;
}

.wbw-subcats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: var(--wbw-space-m) 0 0;
	padding: 0;
	list-style: none;
}

/* -------------------------------------------------------------------------
 * 13. Single post
 * ---------------------------------------------------------------------- */

.wbw-article__header {
	max-width: 46rem;
	margin-inline: auto;
	margin-bottom: var(--wbw-space-l);
	text-align: left;
}

.wbw-article__title {
	margin-bottom: var(--wbw-space-s);
	font-size: var(--wbw-step-4);
}

.wbw-article__standfirst {
	max-width: var(--wbw-measure);
	margin-bottom: var(--wbw-space-m);
	color: var(--wbw-text-muted);
	font-size: var(--wbw-step-1);
	line-height: 1.5;
}

.wbw-article__byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wbw-space-xs) var(--wbw-space-m);
	padding-top: var(--wbw-space-s);
	border-top: 1px solid var(--wbw-line);
}

.wbw-article__featured {
	margin: 0 0 var(--wbw-space-l);
}

.wbw-article__featured img {
	width: 100%;
	border-radius: var(--wbw-radius-lg);
}

.wbw-article__featured figcaption {
	margin-top: var(--wbw-space-2xs);
	color: var(--wbw-text-dim);
	font-size: 0.8rem;
}

.wbw-article__body {
	max-width: 46rem;
	margin-inline: auto;
	font-size: 1.075rem;
	line-height: 1.75;
}

.wbw-article__body > * {
	max-width: var(--wbw-measure);
	margin-inline: auto;
}

.wbw-article__body h2,
.wbw-article__body h3,
.wbw-article__body h4 {
	margin-top: var(--wbw-space-l);
}

.wbw-article__body > .alignwide,
.wbw-article__body > .alignfull,
.wbw-article__body > figure,
.wbw-article__body > .wp-block-image,
.wbw-article__body > .wp-block-gallery,
.wbw-article__body > .wp-block-embed {
	max-width: 100%;
}

.wbw-article__body a {
	text-decoration: underline;
}

.wbw-article__footer {
	max-width: 46rem;
	margin-inline: auto;
	margin-top: var(--wbw-space-l);
	padding-top: var(--wbw-space-m);
	border-top: 1px solid var(--wbw-line);
}

.wbw-article__source {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wbw-space-s);
	padding: var(--wbw-space-m);
	margin-bottom: var(--wbw-space-m);
	background: var(--wbw-bg-elev);
	border: 1px solid var(--wbw-line);
	border-radius: var(--wbw-radius-lg);
}

.wbw-article__source p {
	margin: 0;
	color: var(--wbw-text-muted);
	font-size: var(--wbw-step--1);
}

.wbw-author-card {
	display: flex;
	flex-direction: column;
	gap: var(--wbw-space-s);
	margin-top: var(--wbw-space-l);
	padding: var(--wbw-space-m);
	background: var(--wbw-bg-elev);
	border: 1px solid var(--wbw-line);
	border-radius: var(--wbw-radius-lg);
}

.wbw-author-card__avatar img {
	border-radius: 999px;
}

.wbw-author-card__name {
	margin: 0 0 0.25rem;
	font-size: var(--wbw-step-1);
}

.wbw-author-card__bio {
	margin: 0;
	color: var(--wbw-text-muted);
	font-size: var(--wbw-step--1);
}

@media (min-width: 40em) {
	.wbw-author-card {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--wbw-space-m);
	}

	.wbw-author-card__avatar {
		flex: 0 0 auto;
	}
}

/* Post to post navigation */
.wbw-post-nav {
	display: grid;
	gap: var(--wbw-space-s);
	margin-top: var(--wbw-space-xl);
	padding-top: var(--wbw-space-m);
	border-top: 1px solid var(--wbw-line);
}

@media (min-width: 40em) {
	.wbw-post-nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.wbw-post-nav__link {
	display: block;
	padding: var(--wbw-space-m);
	background: var(--wbw-bg-elev);
	border: 1px solid var(--wbw-line);
	border-radius: var(--wbw-radius-lg);
	color: var(--wbw-text);
	text-decoration: none;
	transition: border-color var(--wbw-transition);
}

.wbw-post-nav__link:hover,
.wbw-post-nav__link:focus-visible {
	border-color: var(--wbw-accent);
	color: var(--wbw-text);
}

.wbw-post-nav__link--next {
	text-align: right;
}

.wbw-post-nav__label {
	display: block;
	margin-bottom: 0.25rem;
	color: var(--wbw-accent);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.wbw-post-nav__title {
	font-family: var(--wbw-font-display);
	font-size: var(--wbw-step-0);
	font-weight: 600;
}

/* -------------------------------------------------------------------------
 * 14. Pagination
 * ---------------------------------------------------------------------- */

.wbw-pagination {
	margin-top: var(--wbw-space-xl);
	padding-top: var(--wbw-space-m);
	border-top: 1px solid var(--wbw-line);
}

.wbw-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
}

.wbw-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 0.75rem;
	background: var(--wbw-bg-elev);
	border: 1px solid var(--wbw-line);
	border-radius: var(--wbw-radius);
	color: var(--wbw-text-muted);
	font-size: var(--wbw-step--1);
	font-weight: 600;
	text-decoration: none;
}

.wbw-pagination .page-numbers:hover,
.wbw-pagination .page-numbers:focus-visible {
	border-color: var(--wbw-accent);
	color: var(--wbw-accent);
}

.wbw-pagination .page-numbers.current {
	background: var(--wbw-accent);
	border-color: var(--wbw-accent);
	color: var(--wbw-accent-ink);
}

.wbw-pagination .page-numbers.dots {
	background: transparent;
	border-color: transparent;
}

/* -------------------------------------------------------------------------
 * 15. Comments
 * ---------------------------------------------------------------------- */

.wbw-comments {
	max-width: 46rem;
	margin-inline: auto;
	margin-top: var(--wbw-space-xl);
	padding-top: var(--wbw-space-m);
	border-top: 1px solid var(--wbw-line);
}

.wbw-comments .comment-list {
	margin: 0 0 var(--wbw-space-l);
	padding: 0;
	list-style: none;
}

.wbw-comments .comment-list ol.children {
	margin: var(--wbw-space-s) 0 0 var(--wbw-space-s);
	padding-left: var(--wbw-space-s);
	list-style: none;
	border-left: 2px solid var(--wbw-line);
}

.wbw-comments .comment-body {
	padding: var(--wbw-space-m) 0;
	border-bottom: 1px solid var(--wbw-line);
}

.wbw-comments .comment-author img {
	display: inline-block;
	border-radius: 999px;
	vertical-align: middle;
	margin-right: 0.5rem;
}

.wbw-comments .comment-meta {
	color: var(--wbw-text-dim);
	font-size: 0.8rem;
}

.wbw-comment-form .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.wbw-comment-form .comment-form-cookies-consent input {
	width: auto;
	min-height: 0;
	margin-top: 0.35rem;
}

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

/* -------------------------------------------------------------------------
 * 16. Footer
 * ---------------------------------------------------------------------- */

.wbw-footer {
	margin-top: auto;
	padding-bottom: var(--wbw-space-xl);
	background: var(--wbw-bg-elev);
}

.wbw-footer .wbw-container {
	padding-top: var(--wbw-space-xl);
}

.wbw-footer__inner {
	display: grid;
	gap: var(--wbw-space-l);
}

.wbw-footer__intro {
	max-width: 44rem;
}

.wbw-footer__actions {
	margin: var(--wbw-space-m) 0 0;
}

.wbw-footer__connect .wbw-social {
	margin-top: 0;
}

/* Socials sit to the right of the contact line on wider screens. */
@media (min-width: 48em) {
	.wbw-footer__inner {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: start;
		gap: var(--wbw-space-xl);
	}

	.wbw-footer__connect {
		justify-self: end;
		text-align: right;
	}

	.wbw-footer__connect .wbw-social {
		justify-content: flex-end;
	}
}

.wbw-footer__title {
	margin-bottom: var(--wbw-space-2xs);
	font-size: var(--wbw-step-2);
}

.wbw-footer__text {
	max-width: var(--wbw-measure);
	margin: 0;
	color: var(--wbw-text-muted);
	font-size: var(--wbw-step--1);
}

.wbw-footer__nav-title {
	margin-bottom: var(--wbw-space-xs);
	color: var(--wbw-text-dim);
	font-family: var(--wbw-font-body);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.wbw-footer__list {
	display: grid;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wbw-footer__list a {
	display: inline-flex;
	align-items: center;
	min-height: 2rem;
	color: var(--wbw-text-muted);
	font-size: var(--wbw-step--1);
	text-decoration: none;
}

.wbw-footer__list a:hover,
.wbw-footer__list a:focus-visible {
	color: var(--wbw-accent);
	text-decoration: underline;
}

.wbw-social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: var(--wbw-space-m) 0 0;
	padding: 0;
	list-style: none;
}

.wbw-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	background: var(--wbw-bg-elev-2);
	border: 1px solid var(--wbw-line-strong);
	border-radius: 999px;
	color: var(--wbw-text-muted);
	transition: color var(--wbw-transition), border-color var(--wbw-transition),
		background-color var(--wbw-transition), transform var(--wbw-transition);
}

.wbw-social a:hover,
.wbw-social a:focus-visible {
	background-color: var(--wbw-accent);
	border-color: var(--wbw-accent);
	color: var(--wbw-accent-ink);
	transform: translateY(-2px);
}

.wbw-social svg {
	width: 1.15rem;
	height: 1.15rem;
	fill: currentColor;
}

.wbw-colophon {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wbw-space-xs) var(--wbw-space-m);
	align-items: center;
	justify-content: space-between;
	margin-top: var(--wbw-space-l);
	padding-top: var(--wbw-space-m);
	border-top: 1px solid var(--wbw-line);
	color: var(--wbw-text-dim);
	font-size: 0.8rem;
}

.wbw-colophon a {
	color: var(--wbw-text-muted);
	text-decoration: none;
}

.wbw-colophon a:hover,
.wbw-colophon a:focus-visible {
	color: var(--wbw-accent);
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * 17. Empty states and 404
 * ---------------------------------------------------------------------- */

.wbw-no-results {
	max-width: var(--wbw-measure);
	padding: var(--wbw-space-l);
	background: var(--wbw-bg-elev);
	border: 1px dashed var(--wbw-line-strong);
	border-radius: var(--wbw-radius-lg);
}

.wbw-no-results p {
	color: var(--wbw-text-muted);
}

.wbw-error-404 {
	max-width: 40rem;
	padding-block: var(--wbw-space-xl);
}

.wbw-error-404__code {
	display: block;
	color: var(--wbw-accent);
	font-family: var(--wbw-font-display);
	font-size: var(--wbw-step-5);
	line-height: 1;
}

/* -------------------------------------------------------------------------
 * 18. WordPress core classes
 * ---------------------------------------------------------------------- */

.alignleft {
	float: left;
	margin: 0 var(--wbw-space-m) var(--wbw-space-s) 0;
}

.alignright {
	float: right;
	margin: 0 0 var(--wbw-space-s) var(--wbw-space-m);
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

.alignwide,
.alignfull {
	max-width: 100%;
}

.wp-caption {
	max-width: 100%;
}

.wp-caption-text,
.wp-block-image figcaption,
.wp-element-caption {
	margin-top: var(--wbw-space-2xs);
	color: var(--wbw-text-dim);
	font-size: 0.8rem;
	text-align: left;
}

.sticky .wbw-card {
	border-color: var(--wbw-accent);
}

.wp-block-pullquote,
.wp-block-quote {
	border-left: 3px solid var(--wbw-accent);
}

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

.wp-block-button__link {
	background-color: var(--wbw-accent);
	color: var(--wbw-accent-ink);
	border-radius: 999px;
	font-weight: 600;
}

.wp-block-code {
	background: var(--wbw-bg-elev-2);
	border: 1px solid var(--wbw-line);
	border-radius: var(--wbw-radius);
	padding: var(--wbw-space-s);
}

/* Admin bar offset for the sticky header. */
.admin-bar .wbw-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .wbw-header {
		top: 46px;
	}
}

/* -------------------------------------------------------------------------
 * 19. Header layout wiring, progress bar, odds and ends
 * ---------------------------------------------------------------------- */

.wbw-header__bar {
	flex-wrap: wrap;
}

.wbw-branding {
	order: 1;
}

.wbw-header__actions {
	order: 2;
}

.wbw-primary-nav {
	order: 3;
	flex: 1 0 100%;
}

.wbw-header.is-scrolled {
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
	border-bottom-color: var(--wbw-line-strong);
}

@media (min-width: 62em) {
	.wbw-primary-nav {
		order: 2;
		flex: 1 1 auto;
	}

	.wbw-header__actions {
		order: 3;
	}
}

/*
 * Reading progress.
 *
 * Rather than a second gold line competing with the masthead rule, the rule
 * itself is the track: on an article it sits dimmed, and the bright fill sweeps
 * across it as the piece is read. `.is-reading` is added by navigation.js, so
 * the rule only ever dims when something is actually going to fill it.
 */
.wbw-header.is-reading .wbw-masthead-rule {
	border-top-color: var(--wbw-accent-track);
}

.wbw-progress__bar {
	display: block;
	position: absolute;
	top: -3px;
	left: 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(90deg, var(--wbw-accent), var(--wbw-accent-strong));
	transform: scaleX(0);
	transform-origin: left center;
	will-change: transform;
	pointer-events: none;
}

.wbw-header {
	position: sticky;
}

/* Generated cover art fills the card media box like a photograph would. */
.wbw-cover-art {
	width: 100%;
	aspect-ratio: 16 / 9;
	display: block;
}

.wbw-page-header__search {
	max-width: 32rem;
	margin-top: var(--wbw-space-m);
}

.wbw-error-404__actions {
	margin-top: var(--wbw-space-m);
}

.wbw-footer__widgets {
	margin-top: var(--wbw-space-l);
}

.wbw-footer__widgets .widget {
	margin-bottom: var(--wbw-space-m);
}

.wbw-page-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: var(--wbw-space-m);
	font-size: var(--wbw-step--1);
}

.wbw-page-links a {
	text-decoration: none;
}

.wbw-avatar {
	border-radius: 999px;
}

.wbw-article__footer .wbw-meta a {
	color: var(--wbw-text-muted);
}

/* The Thoughts panel inherits the grid but wants a little more air. */
.wbw-thoughts .wbw-grid {
	margin-top: var(--wbw-space-m);
}

/* Contact button spacing in the footer. */
.wbw-footer__cta {
	margin-top: var(--wbw-space-m);
}

/* Inline icons used outside the header icon buttons (e.g. "Read the original"). */
.wbw-icon {
	width: 1.15em;
	height: 1.15em;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* -------------------------------------------------------------------------
 * 20. Broadsheet furniture: masthead rules, dateline, drop caps, motifs
 * ---------------------------------------------------------------------- */

/* The thick-then-thin pair a newspaper runs under its masthead. */
.wbw-masthead-rule {
	position: relative;
	height: 4px;
	border-top: 3px solid var(--wbw-accent);
	border-bottom: 1px solid var(--wbw-line-strong);
	background: transparent;
	opacity: 0.9;
}

.wbw-dateline {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 0.4rem 0 0.55rem;
	border-top: 1px solid var(--wbw-line);
	color: var(--wbw-text-dim);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-align: center;
}

.wbw-dateline__dot {
	color: var(--wbw-accent);
	font-size: 0.5rem;
	letter-spacing: 0;
}

@media (min-width: 62em) {
	.wbw-dateline {
		display: flex;
	}
}

/* Motifs: line drawings that inherit their colour from the element. */
.wbw-motif {
	display: block;
	color: var(--wbw-accent);
	fill: none;
}

.wbw-beat {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	overflow: hidden;
}

.wbw-beat__motif {
	position: absolute;
	right: -10%;
	top: 50%;
	width: 62%;
	height: auto;
	margin: 0;
	transform: translateY(-46%);
	color: var(--wbw-beat-ink, var(--wbw-accent));
	opacity: 0.26;
	pointer-events: none;
	transition: opacity var(--wbw-transition), transform var(--wbw-transition);
}

.wbw-beat:hover .wbw-beat__motif,
.wbw-beat:focus-visible .wbw-beat__motif {
	opacity: 0.42;
	transform: translateY(-50%) rotate(-3deg);
}

/* Text rides above the watermark. */
.wbw-beat__name,
.wbw-beat__count {
	position: relative;
	z-index: 1;
}

.wbw-beat__name {
	color: var(--wbw-text);
}

.wbw-page-header__row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--wbw-space-m);
}

.wbw-page-header__motif {
	display: none;
	flex: 0 0 auto;
	color: var(--wbw-accent);
	opacity: 0.55;
}

@media (min-width: 48em) {
	.wbw-page-header__motif {
		display: block;
	}
}

/* Hero watermark when no portrait is set. */
.wbw-hero__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wbw-accent);
	opacity: 0.28;
}

.wbw-hero__motif {
	width: 100%;
	max-width: 26rem;
	height: auto;
}

@media (min-width: 62em) {
	.wbw-hero__mark {
		justify-self: end;
	}
}

/*
 * Drop cap on the opening paragraph.
 *
 * A drop cap sits FLUSH with the top of the first line — its cap-height aligned
 * with the first line's — and drops so its baseline rests on a lower line.
 *
 * The float version below is a hand-tuned approximation; `initial-letter` does it
 * properly, sizing and aligning the glyph against the real font metrics. Chrome
 * and Safari have it, Firefox does not, so the float is the fallback.
 */
.wbw-article__body--dropcap > p:first-of-type::first-letter {
	float: left;
	margin: 0.02em 0.16em 0 0;
	padding-right: 0.04em;
	color: var(--wbw-accent);
	font-family: var(--wbw-font-display);
	font-size: 3.4em;
	font-weight: 600;
	line-height: 0.78;
}

@supports (initial-letter: 2) or (-webkit-initial-letter: 2) {
	.wbw-article__body--dropcap > p:first-of-type::first-letter {
		float: none;
		margin: 0 0.55em 0 0;
		padding-right: 0;
		font-size: inherit;
		line-height: inherit;
		-webkit-initial-letter: 2;
		initial-letter: 2;
	}
}

/* Editorial detailing on the article. */
.wbw-article__standfirst {
	padding-left: var(--wbw-space-s);
	border-left: 3px solid var(--wbw-accent);
	font-family: var(--wbw-font-display);
	font-style: italic;
}

.wbw-article__title {
	text-wrap: balance;
}

.wbw-eyebrow {
	text-decoration: none;
}

a.wbw-eyebrow:hover,
a.wbw-eyebrow:focus-visible {
	color: var(--wbw-accent-strong);
	text-decoration: underline;
}

/* Section heads get a small ornament rule. */
.wbw-section__head {
	position: relative;
}

.wbw-section__head::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 4.5rem;
	height: 3px;
	background: var(--wbw-accent);
}

/*
 * The ornament draws left-to-right as its section arrives.
 *
 * Scoped to .wbw-motion — a class the motion layer adds to <html> only once it
 * has decided to run. Without JS, with reduced motion, or in a hidden tab the
 * rule is simply drawn at full width, never stuck at zero.
 */
.wbw-motion .wbw-section__head::after,
.wbw-motion .wbw-page-header::after {
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 760ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.wbw-motion .wbw-section__head.is-drawn::after,
.wbw-motion .wbw-page-header.is-drawn::after {
	transform: scaleX(1);
}

.wbw-page-header {
	position: relative;
}

.wbw-page-header::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 4.5rem;
	height: 3px;
	background: var(--wbw-accent);
}

/* Cover art sits behind a hairline frame so it reads as printed, not empty. */
.wbw-card__media {
	position: relative;
}

.wbw-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
	pointer-events: none;
}

/* One column edge: headline, standfirst, byline and body share a left margin. */
.wbw-article__header,
.wbw-article__body,
.wbw-article__footer,
.wbw-comments {
	max-width: var(--wbw-measure);
}

.wbw-article__body > * {
	max-width: 100%;
}

/* The lead image is allowed to break wider than the text column. */
.wbw-article__featured {
	max-width: 58rem;
	margin-inline: auto;
}