/*
 * Three Decker
 *
 * Colour, type, and spacing tokens come from theme.json as
 * --wp--preset--* custom properties. This file maps them onto short
 * aliases and then styles the theme's own components.
 *
 * The look: flat full-bleed colour bands, heavy 3px ink rules, hard
 * offset shadows instead of soft ones, tight display type over a serif
 * reading face. Every text-on-colour pairing here clears WCAG AA — pink
 * is a fill behind dark text, never light text on a dark ground.
 */

/* ------------------------------------------------------------------ *
 * Tokens
 * ------------------------------------------------------------------ */

:root {
	--paper: var(--wp--preset--color--paper, #f7f6f3);
	--ink: var(--wp--preset--color--ink, #121212);
	--sun: var(--wp--preset--color--sun, #fadd1e);
	--flag: var(--wp--preset--color--flag, #f5329a);
	--flag-ink: var(--wp--preset--color--flag-ink, #b90967);
	--plum: var(--wp--preset--color--plum, #4a1130);

	--font-display: var(--wp--preset--font-family--display);
	--font-body: var(--wp--preset--font-family--body);
	--font-wordmark: var(--wp--preset--font-family--wordmark);

	--rule: 3px;
	--rule-thin: 2px;
	--shadow: 8px 8px 0 var(--ink);
	--shadow-sm: 4px 4px 0 var(--ink);

	--gutter: clamp(1.25rem, 5vw, 3rem);
	--wide: 78rem;
	--measure: 40rem;

	--band-y: clamp(3.5rem, 8vw, 6.5rem);
}

/* ------------------------------------------------------------------ *
 * Base
 * ------------------------------------------------------------------ */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;

	/* Keep the footer on the bottom edge on short pages. */
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

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

a {
	color: var(--flag-ink);
	text-underline-offset: 0.18em;
	text-decoration-thickness: from-font;
}

a:hover,
a:focus-visible {
	color: var(--ink);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.025em;
	margin: 0 0 0.5em;
	text-wrap: balance;
}

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

:focus-visible {
	outline: var(--rule) solid var(--flag-ink);
	outline-offset: 3px;
	border-radius: 1px;
}

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

.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--sun);
	color: var(--ink);
	border: var(--rule) solid var(--ink);
	font-family: var(--font-display);
	font-weight: 800;
	text-decoration: none;
}

.skip-link:focus {
	left: 1rem;
	top: 1rem;
}

/* ------------------------------------------------------------------ *
 * Layout primitives
 * ------------------------------------------------------------------ */

.site-main {
	display: block;
	flex: 1 0 auto;
}

.footer {
	flex-shrink: 0;
}

/* Default content rail for every page except the block-composed front. */
.site-main > *:not(.bands):not(.band):not(.issue):not(.alignfull) {
	max-width: var(--wide);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.band {
	padding-block: var(--band-y);
}

.band__inner {
	max-width: var(--wide);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/*
 * Band layout for the block-composed pages.
 *
 * Each band is an alignfull group, so the group itself runs edge to edge
 * and its children carry the reading width and the gutter. Core's
 * constrained layout would normally do this via root padding, but that
 * depends on the .wp-site-blocks wrapper only block themes emit.
 */
.bands > .wp-block-group > * {
	box-sizing: border-box;
	max-width: 46rem;
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.bands > .wp-block-group > .alignwide {
	max-width: var(--wide);
}

/* Blocks that manage their own inner width — the issue grid, the teasers. */
.bands > .wp-block-group > .alignfull {
	max-width: none;
	padding-inline: 0;
}

.band--paper { background: var(--paper); color: var(--ink); }
.band--sun   { background: var(--sun);   color: var(--ink); }
.band--flag  { background: var(--flag);  color: var(--ink); }

.band--ink {
	background: var(--ink);
	color: var(--paper);
}

.band--plum {
	background: var(--plum);
	color: var(--paper);
}

.band--ink a,
.band--plum a {
	color: var(--sun);
}

.band--ink a:hover,
.band--plum a:hover,
.band--ink a:focus-visible,
.band--plum a:focus-visible {
	color: var(--paper);
}

.band--ink :focus-visible,
.band--plum :focus-visible {
	outline-color: var(--sun);
}

/* Alternating bands need no gap between them. */
.bands > * {
	margin-block: 0;
}

/*
 * The reading column shares a left edge with the page title rather than
 * centring in the rail — the design's grammar is left-aligned display type
 * against full-bleed bands, and a centred column fights it.
 */
.prose {
	max-width: var(--measure);
	margin-inline: 0;
	padding-block: clamp(2rem, 5vw, 3.5rem);
}

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

.prose > .alignfull {
	max-width: none;
	margin-left: calc(50% - 50vw);
	width: 100vw;
}

.prose h2 {
	font-size: var(--wp--preset--font-size--x-large);
	margin-top: 1.8em;
}

.prose h3 {
	font-size: var(--wp--preset--font-size--large);
	margin-top: 1.6em;
}

.prose > *:first-child {
	margin-top: 0;
}

/*
 * Long-form reading pages — About, Masthead, Submit, and single blog posts
 * — carry prose as the point of the page rather than as a supporting note,
 * so they read larger and in a wider column than the default measure. Three
 * quarters of the rail on desktop, the full width once there is no room to
 * spare.
 */
.page-article .prose,
.post-article .prose,
.entry-page .prose {
	max-width: 75%;
	font-size: var(--wp--preset--font-size--large);
}

.page-article .prose h2,
.post-article .prose h2,
.entry-page .prose h2 {
	font-size: var(--wp--preset--font-size--xx-large);
}

.page-article .prose h3,
.post-article .prose h3,
.entry-page .prose h3 {
	font-size: var(--wp--preset--font-size--x-large);
}

/* Keep the quotation in step with the body it sits in. */
.page-article .prose .wp-block-quote,
.post-article .prose .wp-block-quote,
.entry-page .prose .wp-block-quote {
	font-size: var(--wp--preset--font-size--large);
}

/*
 * With body copy at the large size, a standfirst set to the same size stops
 * reading as an introduction. Lift it a step and let it run to the same
 * column width as the prose below it.
 */
.page-article .page-head__standfirst {
	max-width: 75%;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.35;
}

/*
 * A post's featured image and its related-issue card share the prose
 * column's edge and width, rather than centring on their own.
 */
.post-article__media,
.post-article .related-issue,
.post-article .post-nav,
.entry-page .author-note,
.entry-page .also-in {
	max-width: 75%;
	margin-inline: 0;
	padding-inline: 0;
}

@media (max-width: 46rem) {
	.page-article .prose,
	.page-article .page-head__standfirst,
	.post-article .prose,
	.post-article__media,
	.post-article .related-issue,
	.post-article .post-nav,
	.entry-page .prose,
	.entry-page .author-note,
	.entry-page .also-in {
		max-width: none;
	}
}

/* ------------------------------------------------------------------ *
 * Submissions banner
 * ------------------------------------------------------------------ */

.banner {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	align-items: baseline;
	justify-content: center;
	padding: 0.7rem var(--gutter);
	background: var(--flag);
	color: var(--ink);
	font-family: var(--font-display);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: -0.01em;
	text-decoration: none;
	border-bottom: var(--rule) solid var(--ink);
}

.banner:hover,
.banner:focus-visible {
	background: var(--sun);
	color: var(--ink);
}

.banner__cta {
	text-decoration: underline;
}

/* ------------------------------------------------------------------ *
 * Masthead
 * ------------------------------------------------------------------ */

.masthead {
	background: var(--plum);
	color: var(--paper);
	border-bottom: var(--rule) solid var(--ink);
}

.masthead__inner {
	max-width: var(--wide);
	margin-inline: auto;
	padding: 1rem var(--gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.wordmark,
.masthead .custom-logo-link {
	display: inline-block;
	text-decoration: none;
}

.wordmark {
	font-family: var(--font-wordmark);
	font-weight: 700;
	font-size: clamp(1.6rem, 4.5vw, 2.4rem);
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--paper);
}

.wordmark:hover,
.wordmark:focus-visible {
	color: var(--sun);
}

.masthead .custom-logo {
	max-height: 3rem;
	width: auto;
}

/* On a narrow screen a full-width wordmark pushes the menu button onto a
   second row; scale it back so brand and toggle share one line. */
@media (max-width: 32rem) {
	.masthead .custom-logo {
		max-height: 2.1rem;
	}
}

.nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(0.9rem, 2.5vw, 1.9rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav__list a {
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--paper);
	text-decoration: none;
	padding-block: 0.2rem;
	border-bottom: var(--rule-thin) solid transparent;
}

.nav__list a:hover,
.nav__list a:focus-visible {
	color: var(--sun);
	border-bottom-color: var(--sun);
}

.nav__list .current-menu-item > a,
.nav__list .current_page_item > a {
	border-bottom-color: var(--paper);
}

.nav__list .menu-item--open > a {
	color: var(--sun);
}

.nav__list .menu-item--open > a::after {
	content: "";
	display: inline-block;
	width: 0.45em;
	height: 0.45em;
	margin-left: 0.4em;
	border-radius: 50%;
	background: var(--flag);
	vertical-align: 0.15em;
}

/* Sub-menus */
.nav__list .sub-menu {
	position: absolute;
	z-index: 40;
	min-width: 12rem;
	margin: 0.4rem 0 0;
	padding: 0.6rem 0;
	list-style: none;
	background: var(--plum);
	border: var(--rule-thin) solid var(--ink);
	display: none;
}

.nav__list li {
	position: relative;
}

.nav__list li:hover > .sub-menu,
.nav__list li:focus-within > .sub-menu {
	display: block;
}

.nav__list .sub-menu a {
	display: block;
	padding: 0.4rem 1rem;
	border: 0;
}

/* Cart */
.cart-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--paper);
	text-decoration: none;
}

.cart-link:hover,
.cart-link:focus-visible {
	color: var(--sun);
}

.cart-link__count {
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: 800;
	line-height: 1;
	min-width: 1.35em;
	padding: 0.25em;
	text-align: center;
	background: var(--flag);
	color: var(--ink);
	border-radius: 999px;
}

.cart-link__count[data-empty] {
	background: transparent;
	color: inherit;
}

/* Mobile nav */
.nav-toggle {
	display: none;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: transparent;
	border: var(--rule-thin) solid var(--paper);
	color: var(--paper);
	cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	display: block;
	width: 1.25rem;
	height: 2px;
	margin-inline: auto;
	background: currentColor;
	transition: transform 0.18s ease, opacity 0.18s ease;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
	content: "";
	position: relative;
}

.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 4px; }

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

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
	transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
	transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 60rem) {
	.nav-toggle {
		display: block;
		order: 2;
	}

	.nav {
		order: 3;
		flex-basis: 100%;
		display: none;
	}

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

	.nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding-block: 0.5rem;
	}

	.nav__list > li {
		border-top: var(--rule-thin) solid rgb(255 255 255 / 0.18);
	}

	.nav__list a {
		display: block;
		padding: 0.7rem 0;
		border: 0;
	}

	.nav__list .sub-menu {
		position: static;
		display: block;
		background: transparent;
		border: 0;
		padding: 0 0 0.4rem 1rem;
	}
}

/* ------------------------------------------------------------------ *
 * Buttons
 * ------------------------------------------------------------------ */

.btn,
.wp-block-button__link,
.woo .button,
.woo button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.85rem 1.4rem;
	background: var(--flag);
	color: var(--ink);
	border: var(--rule) solid var(--ink);
	border-radius: 0;
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 800;
	letter-spacing: -0.005em;
	line-height: 1.1;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}

.btn:hover,
.btn:focus-visible,
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible,
.woo .button:hover,
.woo button[type="submit"]:hover {
	background: var(--sun);
	color: var(--ink);
	transform: translate(-2px, -2px);
	box-shadow: var(--shadow-sm);
}

.btn--sun {
	background: var(--sun);
	color: var(--ink);
}

.btn--ghost {
	background: transparent;
	color: var(--ink);
}

/*
 * Core's outline button style ships its own padding and a 2px border,
 * overriding the metrics theme.json sets for buttons. Left alone it renders
 * visibly shorter than the filled buttons sitting next to it in a row.
 */
.wp-block-button.is-style-outline > .wp-block-button__link {
	padding: 0.85rem 1.4rem;
	border: var(--rule) solid currentColor;
	background: transparent;
	color: var(--ink);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background: var(--sun);
	border-color: var(--ink);
	color: var(--ink);
}

.band--ink .wp-block-button.is-style-outline > .wp-block-button__link,
.band--plum .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--paper);
}

.band--ink .btn--ghost,
.band--plum .btn--ghost {
	color: var(--paper);
	border-color: var(--paper);
}

.band--ink .btn--ghost:hover,
.band--plum .btn--ghost:hover {
	background: var(--sun);
	color: var(--ink);
	border-color: var(--ink);
}

/*
 * Buy buttons sit on the yellow issue band, where the pink fill used
 * elsewhere would fight the ground. White reads as the resting state and
 * pink becomes the hover.
 */
.btn--buy {
	background: var(--paper);
	color: var(--ink);
}

.btn--buy:hover,
.btn--buy:focus-visible {
	background: var(--flag);
	color: var(--ink);
}

.btn--sm {
	padding: 0.55rem 0.9rem;
	border-width: var(--rule-thin);
	font-size: var(--wp--preset--font-size--x-small);
}

.btn__price {
	font-weight: 600;
	opacity: 0.85;
}

.btn__price .woocommerce-Price-amount {
	font-family: inherit;
}

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-block: 1.25rem 0;
}

/* ------------------------------------------------------------------ *
 * Shared type pieces
 * ------------------------------------------------------------------ */

.eyebrow {
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 0.6rem;
}

.band-heading {
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin-bottom: 1.8rem;
	padding-bottom: 0.7rem;
	border-bottom: var(--rule) solid currentColor;
}

.band-more {
	margin-top: 2rem;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.02em;
}

.page-head {
	padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem);
}

.page-head__title {
	font-size: var(--wp--preset--font-size--display);
	margin-bottom: 0.3em;
}

.page-head--entry .page-head__title {
	max-width: 22ch;
}

.page-head__standfirst {
	max-width: 48ch;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.45;
	margin-bottom: 0;
}

.page-head__meta,
.post-card__meta,
.teaser__meta,
.results__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 0.9rem;
	margin-bottom: 0.65rem;
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.page-head__kicker,
.post-card__kicker,
.teaser__kicker,
.results__type {
	padding: 0.2em 0.6em;
	background: var(--sun);
	color: var(--ink);
	border: var(--rule-thin) solid var(--ink);
	font-weight: 800;
	letter-spacing: 0.08em;
}

.empty {
	padding-block: 3rem;
	font-size: var(--wp--preset--font-size--large);
}

/* ------------------------------------------------------------------ *
 * Breadcrumbs
 * ------------------------------------------------------------------ */

.crumbs {
	max-width: var(--wide);
	margin-inline: auto;
	padding: 1.25rem var(--gutter) 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.crumbs a {
	color: inherit;
	text-decoration: none;
	border-bottom: var(--rule-thin) solid transparent;
}

.crumbs a:hover,
.crumbs a:focus-visible {
	border-bottom-color: currentColor;
}

.crumbs__sep {
	opacity: 0.45;
}

.crumbs__current {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 24ch;
	opacity: 0.7;
}

/* ------------------------------------------------------------------ *
 * Current issue hero
 * ------------------------------------------------------------------ */

.hero {
	background: var(--paper);
	color: var(--ink);
}

.hero__inner {
	max-width: var(--wide);
	margin-inline: auto;
	padding-inline: var(--gutter);
	display: grid;
	gap: clamp(1.75rem, 5vw, 3.5rem);
	align-items: center;
}

@media (min-width: 46rem) {
	.hero__inner {
		grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
	}
}

.hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

/* The badge carries its own bottom margin for stacked use; in this row it
   would drop the issue line off the baseline. */
.hero__meta .is-style-td-badge {
	margin-bottom: 0;
}

.hero__issue {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
}

.hero__quote {
	font-size: var(--wp--preset--font-size--display);
	margin-bottom: 0.4em;
}

.hero__poem {
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--large);
	font-style: italic;
	font-weight: 600;
	color: var(--flag-ink);
	margin-bottom: 0;
}

.hero .btn-row {
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.hero__cover img,
.hero__cover .cover-placeholder {
	width: 100%;
	border: var(--rule) solid var(--ink);
	box-shadow: var(--shadow);
}

.hero__cover a {
	display: block;
}

/* Editor-only hints from the block's render template. */
.block-note {
	margin-top: 0.75rem;
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.6;
}

/* ------------------------------------------------------------------ *
 * Covers and the issue grid
 * ------------------------------------------------------------------ */

.cover-placeholder {
	display: grid;
	place-items: center;
	aspect-ratio: 2 / 3;
	padding: 1rem;
	background: var(--plum);
	color: var(--paper);
	font-family: var(--font-display);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.15;
	text-align: center;
	letter-spacing: -0.02em;
}

.issue-grid {
	padding-block: var(--band-y);
}

.issue-grid__inner,
.post-teasers__inner {
	max-width: var(--wide);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.issue-grid__items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
	gap: clamp(1.5rem, 4vw, 3rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * The block sets --issue-cols from how many cards it is rendering, so a
 * short row fills the rail instead of leaving empty auto-fill tracks.
 * Cards stay capped so two issues do not blow up to half the page each.
 */
@media (min-width: 52rem) {
	.issue-grid__items[style*="--issue-cols"] {
		grid-template-columns: repeat(var(--issue-cols, 3), minmax(0, 1fr));
	}

	.issue-grid__items[style*="--issue-cols"] .issue-card {
		max-width: 22rem;
	}
}

/*
 * Featured variant: the newest issue gets its own full-width row with the
 * cover beside the title, and the rest run three-up underneath. Spanning
 * two grid rows instead would stretch the portrait cover to roughly twice
 * the height of the cards next to it.
 */
@media (min-width: 52rem) {
	.issue-grid--featured .issue-grid__items {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		align-items: start;
	}

	.issue-grid--featured .issue-card--lead {
		grid-column: 1 / -1;
		padding-bottom: clamp(1.5rem, 4vw, 2.75rem);
		margin-bottom: clamp(0.5rem, 2vw, 1rem);
		border-bottom: var(--rule) solid currentColor;
	}

	.issue-grid--featured .issue-card--lead .issue-card__link {
		display: grid;
		grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
		gap: clamp(1.5rem, 4vw, 3rem);
		align-items: center;
	}

	.issue-grid--featured .issue-card--lead .issue-card__meta {
		margin-top: 0;
	}
}

.issue-card {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	align-items: flex-start;
}

.issue-card__link {
	display: block;
	width: 100%;
	color: inherit;
	text-decoration: none;
}

.issue-card__cover {
	display: block;
	border: var(--rule) solid var(--ink);
	background: var(--paper);
	box-shadow: var(--shadow);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.issue-card__cover img,
.issue-card__cover .cover-placeholder {
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
}

.issue-card__link:hover .issue-card__cover,
.issue-card__link:focus-visible .issue-card__cover {
	transform: translate(-3px, -3px);
	box-shadow: 11px 11px 0 var(--ink);
}

.issue-card__meta {
	display: block;
	margin-top: 1rem;
}

.issue-card__title {
	display: block;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.1;
	letter-spacing: -0.025em;
}

.issue-card--lead .issue-card__title {
	font-size: var(--wp--preset--font-size--xx-large);
}

.issue-card__volume {
	display: block;
	margin-top: 0.2rem;
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.04em;
	opacity: 0.75;
}

.issue-grid__items--archive {
	padding-bottom: var(--band-y);
}

/* ------------------------------------------------------------------ *
 * Blog teasers and post cards
 * ------------------------------------------------------------------ */

.post-teasers {
	padding-block: var(--band-y);
}

.post-teasers__items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
	gap: clamp(1.5rem, 3.5vw, 2.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.teaser {
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
	background: var(--paper);
	color: var(--ink);
	border: var(--rule) solid var(--ink);
	box-shadow: var(--shadow-sm);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.teaser:hover,
.teaser:focus-within {
	transform: translate(-3px, -3px);
	box-shadow: 7px 7px 0 var(--ink);
}

.teaser a {
	color: var(--ink);
}

.teaser__title {
	font-size: var(--wp--preset--font-size--x-large);
	margin-bottom: 0.5rem;
}

.teaser__title a {
	text-decoration: none;
}

.teaser__title a:hover,
.teaser__title a:focus-visible {
	text-decoration: underline;
}

.teaser__excerpt {
	flex: 1;
}

.teaser__more {
	margin: 0.5rem 0 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--small);
}

/*
 * One post per row rather than a grid of cards, separated by a rule. Every
 * entry gets the same treatment — media left, text right.
 */
.post-list {
	display: flex;
	flex-direction: column;
	padding-block: 1rem clamp(2.5rem, 5vw, 3.5rem);
}

.post-card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
	border-bottom: var(--rule-thin) solid var(--ink);
}

.post-card:first-child {
	padding-top: 0;
}

@media (min-width: 46rem) {
	.post-card {
		flex-direction: row;
		align-items: start;
		gap: clamp(1.5rem, 4vw, 3rem);
	}

	.post-card__media {
		flex: 0 1 38%;
	}

	.post-card__body {
		flex: 1 1 auto;
	}

	/* Rows with no featured image should not leave a hole where it would be. */
	.post-card:has(.post-card__media) .post-card__body {
		flex: 1 1 62%;
	}
}

.post-card__media {
	display: block;
	border: var(--rule) solid var(--ink);
	box-shadow: var(--shadow-sm);
}

.post-card__media img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.post-card__title {
	font-size: var(--wp--preset--font-size--xx-large);
	margin-bottom: 0.4rem;
}

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

.post-card__title a:hover,
.post-card__title a:focus-visible {
	text-decoration: underline;
	text-decoration-color: var(--flag);
	text-decoration-thickness: 3px;
}

.post-card__more {
	margin: 0.4rem 0 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--small);
}

/* ------------------------------------------------------------------ *
 * Issue page
 * ------------------------------------------------------------------ */

.issue__hero {
	border-block: var(--rule) solid var(--ink);
	margin-top: 1.25rem;
	/* Tighter than a standard band — the cover already gives this section
	   plenty of height. */
	padding-block: clamp(2rem, 4vw, 3rem);
}

.issue__hero-inner,
.from-issue__inner {
	max-width: var(--wide);
	margin-inline: auto;
	padding-inline: var(--gutter);
	display: grid;
	gap: clamp(1.75rem, 5vw, 3.5rem);
	align-items: center;
}

@media (min-width: 46rem) {
	.issue__hero-inner {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	}

	.from-issue__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
	}
}

.issue__cover img,
.issue__cover .cover-placeholder,
.from-issue__cover img,
.from-issue__cover .cover-placeholder {
	width: 100%;
	border: var(--rule) solid var(--ink);
	box-shadow: var(--shadow);
}

.issue__title {
	font-size: var(--wp--preset--font-size--display);
	margin-bottom: 0.15em;
}

.issue__volume {
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	letter-spacing: -0.01em;
	margin-bottom: 1rem;
}

.issue__price {
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 800;
	letter-spacing: -0.03em;
	margin: 1.25rem 0 0;
}

.issue__note {
	margin-top: 0.9rem;
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.8;
}

.issue__contents,
.issue__related,
.also-in {
	max-width: var(--wide);
	margin-inline: auto;
	padding-block: clamp(2.25rem, 4vw, 3.25rem);
}

.issue__contents .band-heading,
.issue__related .band-heading,
.also-in .band-heading {
	margin-bottom: 1.1rem;
	padding-bottom: 0.55rem;
}

.name-run {
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.7;
	letter-spacing: -0.01em;
	max-width: 60ch;
	margin: 0;
}

/*
 * In the issue hero the run sits under the volume line as a subtitle, so it
 * reads smaller and tighter than the full-width band version.
 */
.name-run--hero {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.55;
	max-width: 52ch;
	margin-block: 0.75rem 0;
}

.name-run--hero .name-run__sep {
	margin-inline: 0.35em;
	color: var(--flag-ink);
}

.name-run__sep {
	margin-inline: 0.5em;
	color: var(--flag);
}

/* ------------------------------------------------------------------ *
 * Contents lists
 * ------------------------------------------------------------------ */

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

.contents-list__item {
	border-bottom: var(--rule-thin) solid currentColor;
}

.contents-list__link {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 1.5rem;
	padding: 0.8rem 0;
	color: inherit;
	text-decoration: none;
}

.contents-list__link:hover,
.contents-list__link:focus-visible {
	color: var(--flag-ink);
}

.contents-list__title {
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.15;
}

.contents-list__byline {
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.02em;
	opacity: 0.75;
	white-space: nowrap;
}

.contents-list__issue {
	display: block;
	padding-bottom: 1rem;
	margin-top: -0.6rem;
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.6;
}

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

.link-list li {
	padding: 0.5rem 0;
	border-bottom: var(--rule-thin) solid currentColor;
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 1rem;
	justify-content: space-between;
	align-items: baseline;
}

.link-list a {
	font-family: var(--font-display);
	font-weight: 600;
	text-decoration: none;
}

.link-list a:hover,
.link-list a:focus-visible {
	text-decoration: underline;
}

.link-list__meta {
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.6;
}

/* ------------------------------------------------------------------ *
 * Entry page
 * ------------------------------------------------------------------ */

.entry-page__byline {
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	letter-spacing: -0.01em;
	margin-bottom: 0;
}

.prose--verse .wp-block-verse,
.prose--verse pre {
	font-family: var(--font-body);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.7;
	white-space: pre-wrap;
	background: none;
	border: 0;
	padding: 0;
	margin-block: 2rem;
	overflow-wrap: break-word;
}

.author-note {
	max-width: var(--measure);
	margin: 0 auto clamp(2rem, 5vw, 3.5rem);
	padding: 1.5rem;
	border: var(--rule-thin) solid var(--ink);
	background: var(--paper);
	font-size: var(--wp--preset--font-size--small);
}

.author-note__label {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
}

.author-note p:last-child {
	margin-bottom: 0;
}

.from-issue {
	border-block: var(--rule) solid var(--ink);
	padding-block: var(--band-y);
}

.from-issue__title {
	font-size: var(--wp--preset--font-size--xx-large);
	margin-bottom: 0;
}

.from-issue__title a {
	color: inherit;
	text-decoration: none;
}

.from-issue__title a:hover,
.from-issue__title a:focus-visible {
	text-decoration: underline;
}

/* ------------------------------------------------------------------ *
 * Post page extras
 * ------------------------------------------------------------------ */

.post-article__media {
	max-width: var(--wide);
	margin: 0 auto;
	padding-inline: var(--gutter);
}

.post-article__media img {
	width: 100%;
	border: var(--rule) solid var(--ink);
	box-shadow: var(--shadow);
}

.related-issue {
	max-width: var(--measure);
	margin: 0 auto clamp(2rem, 5vw, 3rem);
	padding: 1.25rem;
	border: var(--rule) solid var(--ink);
	background: var(--sun);
}

.related-issue__label {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 0.75rem;
}

.related-issue__link {
	display: flex;
	align-items: center;
	gap: 1rem;
	color: var(--ink);
	font-family: var(--font-display);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: -0.02em;
	text-decoration: none;
}

.related-issue__cover {
	width: 4.5rem;
	flex: none;
	border: var(--rule-thin) solid var(--ink);
}

.post-nav {
	display: grid;
	gap: 1rem;
	max-width: var(--wide);
	margin-inline: auto;
	padding: 0 var(--gutter) clamp(3rem, 6vw, 4.5rem);
}

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

.post-nav__link {
	display: block;
	padding: 1.1rem 1.25rem;
	border: var(--rule-thin) solid var(--ink);
	color: var(--ink);
	text-decoration: none;
}

.post-nav__link:hover,
.post-nav__link:focus-visible {
	background: var(--sun);
}

.post-nav__link--next {
	text-align: right;
	grid-column: 2;
}

.post-nav__dir {
	display: block;
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.65;
	margin-bottom: 0.25rem;
}

.post-nav__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: -0.02em;
	line-height: 1.2;
}

/* ------------------------------------------------------------------ *
 * Search results
 * ------------------------------------------------------------------ */

.results {
	margin: 0;
	padding: 0 0 clamp(3rem, 6vw, 4.5rem);
	list-style: none;
}

.results__item {
	padding-block: 1.5rem;
	border-bottom: var(--rule-thin) solid var(--ink);
}

.results__title {
	font-size: var(--wp--preset--font-size--x-large);
	margin-bottom: 0.35rem;
}

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

.results__title a:hover,
.results__title a:focus-visible {
	text-decoration: underline;
	text-decoration-color: var(--flag);
	text-decoration-thickness: 3px;
}

.results__excerpt {
	margin-bottom: 0;
	max-width: 62ch;
}

/* ------------------------------------------------------------------ *
 * Search form
 * ------------------------------------------------------------------ */

.search-form {
	display: flex;
	gap: 0;
	max-width: 28rem;
	margin-block: 1.25rem;
}

.search-form__input {
	flex: 1;
	min-width: 0;
	padding: 0.7rem 0.9rem;
	background: var(--paper);
	color: var(--ink);
	border: var(--rule-thin) solid var(--ink);
	border-right: 0;
	border-radius: 0;
	font-family: var(--font-body);
	font-size: var(--wp--preset--font-size--small);
}

.search-form__submit {
	padding: 0.7rem 1rem;
	background: var(--flag);
	color: var(--ink);
	border: var(--rule-thin) solid var(--ink);
	border-radius: 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}

.search-form__submit:hover,
.search-form__submit:focus-visible {
	background: var(--sun);
}

/* ------------------------------------------------------------------ *
 * Pagination
 * ------------------------------------------------------------------ */

.pager {
	padding-block: 0 clamp(3rem, 6vw, 4.5rem);
}

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

.pager__item .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.6rem;
	padding: 0.5rem 0.7rem;
	border: var(--rule-thin) solid var(--ink);
	color: var(--ink);
	font-family: var(--font-display);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}

.pager__item .page-numbers:hover,
.pager__item .page-numbers:focus-visible {
	background: var(--sun);
}

.pager__item .page-numbers.current {
	background: var(--ink);
	color: var(--paper);
}

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

.footer {
	background: var(--ink);
	color: var(--paper);
	border-top: var(--rule) solid var(--ink);
	margin-top: clamp(3rem, 8vw, 6rem);
}

/*
 * Pages built from full-bleed bands already end on a block of colour, so
 * the breathing room above the footer would read as a stray strip of paper.
 */
.is-front .footer,
.is-journal .footer {
	margin-top: 0;
}

.footer a {
	color: var(--sun);
}

.footer a:hover,
.footer a:focus-visible {
	color: var(--paper);
}

.footer :focus-visible {
	outline-color: var(--sun);
}

.footer__inner {
	max-width: var(--wide);
	margin-inline: auto;
	padding: clamp(3rem, 7vw, 5rem) var(--gutter);
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
	grid-template-columns: 1fr;
}

@media (min-width: 60rem) {
	.footer__inner {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	}

	.footer__brand {
		max-width: 34rem;
	}
}

/* Search sits above the two menus and spans the width of both. */
.footer__aside {
	display: grid;
	gap: clamp(1.75rem, 4vw, 2.75rem);
	align-content: start;
}

.footer__menus {
	display: grid;
	gap: clamp(1.25rem, 4vw, 2.5rem);
	/* The link lists are short, so keep the two menus side by side even on
	   a narrow screen rather than doubling the footer's height. */
	grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr));
}

.footer__wcpa {
	display: inline-block;
	margin-block: 1.5rem 0.5rem;
}

.footer__wcpa img {
	width: 200px;
	max-width: 100%;
	height: auto;
	/* The mark is black artwork on transparent; knock it to white so it
	   reads on the dark footer. */
	filter: brightness(0) invert(1);
	opacity: 0.85;
	transition: opacity 0.15s ease;
}

.footer__wcpa:hover img,
.footer__wcpa:focus-visible img {
	opacity: 1;
}

.footer__wordmark {
	font-family: var(--font-wordmark);
	font-weight: 700;
	font-size: clamp(1.5rem, 3.5vw, 2rem);
	line-height: 1;
	margin-bottom: 1rem;
	color: var(--sun);
}

.footer__tagline {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.45;
	max-width: 40ch;
}

.footer__address,
.footer__email {
	font-size: var(--wp--preset--font-size--small);
	margin-bottom: 0.6rem;
}

.footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
}

.footer__heading {
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin-bottom: 1rem;
	padding-bottom: 0.6rem;
	border-bottom: var(--rule-thin) solid currentColor;
	color: var(--paper);
}

.footer__links {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.55rem;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
}

.footer__links a {
	text-decoration: none;
}

.footer__links a:hover,
.footer__links a:focus-visible {
	text-decoration: underline;
}

.footer__search .search-form {
	margin-block: 0;
	max-width: none;
}

.footer__search .search-form__input {
	background: var(--paper);
}

.footer__legal {
	border-top: var(--rule-thin) solid rgb(255 255 255 / 0.2);
}

.footer__legal p {
	max-width: var(--wide);
	margin-inline: auto;
	padding: 1.5rem var(--gutter);
	font-size: var(--wp--preset--font-size--x-small);
	opacity: 0.75;
	margin-bottom: 0;
}

/* ------------------------------------------------------------------ *
 * WooCommerce cart, checkout, account
 * ------------------------------------------------------------------ */

.woo table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 2rem;
}

.woo th,
.woo td {
	padding: 0.75rem;
	border-bottom: var(--rule-thin) solid var(--ink);
	text-align: left;
}

.woo th {
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.woo input[type="text"],
.woo input[type="email"],
.woo input[type="tel"],
.woo input[type="number"],
.woo input[type="password"],
.woo select,
.woo textarea {
	width: 100%;
	padding: 0.65rem 0.8rem;
	background: var(--paper);
	color: var(--ink);
	border: var(--rule-thin) solid var(--ink);
	border-radius: 0;
	font-family: var(--font-body);
	font-size: var(--wp--preset--font-size--small);
}

.woo .woocommerce-message,
.woo .woocommerce-info,
.woo .woocommerce-error {
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
	list-style: none;
	border: var(--rule-thin) solid var(--ink);
	background: var(--sun);
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.woo .woocommerce-error {
	background: var(--flag);
}

/* Woo drops these notices outside our wrapper on some screens. */
.woocommerce-notices-wrapper {
	max-width: var(--measure);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* ------------------------------------------------------------------ *
 * Block editor output on the front end
 * ------------------------------------------------------------------ */

.wp-block-group.alignfull {
	padding-inline: 0;
}

.wp-block-image img {
	border: var(--rule) solid var(--ink);
}

.wp-block-image.is-style-plain img {
	border: 0;
}

.wp-block-pullquote {
	padding: 0;
	border: 0;
	text-align: left;
}

.wp-block-pullquote blockquote {
	margin: 0;
}

.wp-block-quote {
	margin-inline: 0;
	padding-left: 1.25rem;
	border-left: var(--rule) solid var(--flag);
}

.wp-block-separator {
	border: 0;
	border-top: var(--rule) solid currentColor;
	opacity: 1;
	max-width: 100%;
}

.wp-block-buttons {
	gap: 0.75rem;
}

/* ------------------------------------------------------------------ *
 * Block styles
 * ------------------------------------------------------------------ */

.is-style-td-badge {
	display: inline-block;
	margin-bottom: 1rem;
	padding: 0.4em 0.9em;
	background: var(--sun);
	color: var(--ink);
	border: var(--rule) solid var(--ink);
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 800;
	letter-spacing: 0.14em;
	line-height: 1.2;
	text-transform: uppercase;
}

.is-style-td-eyebrow {
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 0.75rem;
}

.is-style-td-shadow img {
	border: var(--rule) solid var(--ink);
	box-shadow: var(--shadow);
}

.is-style-td-boxed {
	padding: clamp(1.5rem, 4vw, 2.5rem);
	border: var(--rule) solid var(--ink);
	box-shadow: var(--shadow-sm);
}

/* ------------------------------------------------------------------ *
 * Quotations
 * ------------------------------------------------------------------ */

.wp-block-quote cite {
	display: block;
	margin-top: 0.9rem;
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--x-small);
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.7;
}

.wp-block-quote p:last-of-type {
	margin-bottom: 0;
}

/* ------------------------------------------------------------------ *
 * Media & text — the masthead bios
 * ------------------------------------------------------------------ */

.wp-block-media-text__media img {
	border: var(--rule) solid var(--ink);
	box-shadow: var(--shadow-sm);
}

.wp-block-media-text__content p:last-child {
	margin-bottom: 0;
}

@media (max-width: 46rem) {
	.wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media {
		max-width: 12rem;
		margin-bottom: 1rem;
	}

	/* Core keeps its 8% column padding once stacked, which indents the bio
	   away from the photo above it. */
	.wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
		padding-inline: 0;
	}
}

/* ------------------------------------------------------------------ *
 * Flex groups
 * ------------------------------------------------------------------ */

/*
 * Paragraphs carry a bottom margin for stacked reading; inside a flex row
 * that margin drops the baseline of whatever sits beside them. The badge
 * style adds its own on top of that.
 */
.wp-block-group.is-layout-flex > p {
	margin-bottom: 0;
}