/**
 * Listicle presentation.
 *
 * Entries sit in rounded cards on a pale fill, with the rank numeral in the
 * left margin. Every value resolves from a theme.json token, so a style
 * variation can recolour or re-form the list without touching this file.
 */

.boi-listicle {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--listicle--card--gap, 1.5rem);
}

.boi-entry {
	display: grid;
	grid-template-columns: var(--wp--custom--listicle--rank--size, 3.25rem) 1fr;
	gap: var(--wp--custom--listicle--card--gap, 1.5rem);
	align-items: start;
	padding: var(--wp--custom--listicle--card--padding, 1.5rem);
	background: var(--wp--custom--listicle--card--background, transparent);
	border: var(--wp--custom--listicle--card--border, 1px solid rgba(0, 0, 0, 0.1));
	border-radius: var(--wp--custom--listicle--card--radius, 10px);
}

/* The numeral reads as a display figure, aligned to the title baseline. */
/* With rank badges switched off there is no rank column, so the body must
   not fall into the narrow first one. */
.boi-entry:not(:has(> .boi-entry__rank)) {
	grid-template-columns: 1fr;
}

.boi-entry__rank {
	display: block;
	inline-size: var(--wp--custom--listicle--rank--size, 3.25rem);
	background: var(--wp--custom--listicle--rank--background, transparent);
	color: var(--wp--custom--listicle--rank--foreground, currentColor);
	font-family: var(--wp--preset--font-family--platypi, inherit);
	font-size: var(--wp--custom--listicle--rank--font-size, 2rem);
	font-weight: 700;
	font-variant-numeric: lining-nums tabular-nums;
	line-height: 1.15;
	letter-spacing: -0.03em;
}

.boi-entry__body {
	min-inline-size: 0;
}

.boi-entry__media {
	margin: 0 0 1.25rem;
}

.boi-entry__media img {
	inline-size: 100%;
	block-size: auto;
	border-radius: var(--wp--custom--radius--sm, 6px);
}

.boi-entry__title {
	margin: 0 0 0.75rem;
	text-wrap: balance;
}

.boi-entry__claim {
	margin: 0 0 1.25rem;
	padding: 0.875rem 1rem;
	background: var(--wp--preset--color--base, transparent);
	border-inline-start: 3px solid var(--wp--custom--listicle--quote--accent, currentColor);
	border-radius: var(--wp--custom--radius--sm, 6px);
}

.boi-entry__claim-label {
	margin: 0 0 0.25rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--custom--listicle--vote--muted, inherit);
}

.boi-entry__claim-text {
	margin: 0;
	font-style: italic;
	line-height: 1.5;
}

.boi-entry__claim-source {
	display: block;
	margin-block-start: 0.5rem;
	font-size: 0.875rem;
	font-style: normal;
	color: var(--wp--custom--listicle--vote--muted, inherit);
}

/* Jump list. Anchors the entry titles for readers and for list-format results. */
.boi-jump {
	margin-block-end: var(--wp--preset--spacing--50, 2.5rem);
	padding: var(--wp--preset--spacing--40, 1.5rem);
	background: var(--wp--custom--listicle--card--background, transparent);
	border-radius: var(--wp--custom--radius--md, 10px);
}

.boi-jump__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.5rem;
}

.boi-jump__item a {
	display: grid;
	grid-template-columns: 2rem 1fr;
	gap: 0.75rem;
	align-items: baseline;
	text-decoration: none;
	color: inherit;
}

.boi-jump__item a:hover {
	text-decoration: underline;
}

.boi-jump__rank {
	font-family: var(--wp--preset--font-family--platypi, inherit);
	font-variant-numeric: lining-nums tabular-nums;
	font-weight: 700;
	color: var(--wp--custom--listicle--rank--foreground, currentColor);
}

.boi-entry__cta {
	margin-block-start: 1.25rem;
}

.boi-entry__link {
	font-weight: 600;
}

/* Wide content inside an entry scrolls in its own box, so the page body
   never scrolls sideways on a narrow screen. */
.boi-entry__content table,
.boi-entry__content pre {
	display: block;
	max-inline-size: 100%;
	overflow-x: auto;
}

.boi-entry__title,
.boi-jump__item a {
	overflow-wrap: break-word;
}

/* Tablet. The numeral column narrows before it is dropped. */
@media (max-width: 781px) {
	.boi-entry {
		grid-template-columns: 2.5rem 1fr;
		gap: 1.25rem;
		padding: 1.25rem;
	}

	.boi-entry__rank {
		inline-size: 2.5rem;
		font-size: 1.6rem;
	}

	.boi-jump {
		padding: 1.25rem;
	}
}

/* Phone. The numeral moves above the title and shrinks to a label, so it
   stays visible while the reader is inside a long entry. */
@media (max-width: 600px) {
	.boi-listicle {
		gap: 1rem;
	}

	.boi-entry {
		grid-template-columns: 1fr;
		gap: 0.5rem;
		padding: 1.125rem;
	}

	.boi-entry__rank {
		inline-size: auto;
		font-size: 1.25rem;
		line-height: 1;
	}

	.boi-entry__claim {
		padding: 0.75rem 0.875rem;
	}

	.boi-jump {
		padding: 1.125rem;
	}

	.boi-jump__item a {
		grid-template-columns: 1.5rem 1fr;
		gap: 0.5rem;
	}

	.boi-brand__mark {
		inline-size: 1.75rem;
		block-size: 1.75rem;
	}
}

/* Section cards on the front page. */
.boi-sections {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.boi-sections__item {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.25rem;
	background: var(--wp--preset--color--accent-3, transparent);
	border: 1px solid var(--wp--preset--color--accent-6, currentColor);
	border-radius: var(--wp--custom--radius--md, 10px);
	transition: border-color 0.15s ease;
}

.boi-sections__item:hover {
	border-color: var(--wp--preset--color--accent-1, currentColor);
}

.boi-sections__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.75rem;
	text-decoration: none;
	color: inherit;
}

.boi-sections__name {
	font-family: var(--wp--preset--font-family--platypi, inherit);
	font-size: 1.25rem;
	font-weight: 600;
}

.boi-sections__count {
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--accent-5, inherit);
	white-space: nowrap;
}

.boi-sections__desc {
	margin: 0;
	font-size: 0.93rem;
	color: var(--wp--preset--color--accent-5, inherit);
}

.boi-sections__latest {
	margin: 0.25rem 0 0;
	padding-block-start: 0.6rem;
	border-block-start: 1px solid var(--wp--preset--color--accent-6, currentColor);
	font-size: 0.88rem;
}

.boi-sections__latest span {
	color: var(--wp--preset--color--accent-5, inherit);
}

.boi-sections__latest a {
	color: inherit;
	text-decoration: none;
	font-weight: 600;
}

.boi-sections__latest a:hover {
	text-decoration: underline;
}

.boi-sections__latest.is-empty {
	color: var(--wp--preset--color--accent-5, inherit);
	font-style: italic;
}

/* Previous and next links under a post. */
.boi-postnav {
	gap: 1rem;
	padding-block-start: 1.25rem;
	border-block-start: 1px solid var(--wp--preset--color--accent-6, currentColor);
}

.boi-postnav a {
	text-decoration: none;
	font-weight: 600;
}

.boi-postnav a:hover {
	text-decoration: underline;
}

.boi-brand__name,
.boi-brand__name a {
	font-family: var(--wp--preset--font-family--vollkorn, Georgia, serif);
	font-weight: 800;
	font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem);
	letter-spacing: -0.035em;
	text-transform: lowercase;
	line-height: 1;
}

@media (max-width: 600px) {
	.boi-brand__name,
	.boi-brand__name a {
		font-size: 1.25rem;
	}
}

/* Query grids. Core renders each result as a list item with no styling of its
   own, so the cards on the front page, the archives and the index are built
   here rather than repeated in every template. */
.wp-block-post-template.is-layout-grid {
	gap: var(--wp--preset--spacing--40, 1.5rem);
}

.wp-block-post-template.is-layout-grid > li {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	padding: 1.1rem;
	background: var(--wp--preset--color--accent-3, transparent);
	border: 1px solid var(--wp--preset--color--accent-6, currentColor);
	border-radius: var(--wp--custom--radius--md, 10px);
}

.wp-block-post-template.is-layout-grid > li .wp-block-post-title {
	font-size: 1.15rem;
}

.boi-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 10;
	margin-block-end: 0.35rem;
	background: var(--wp--preset--color--base, #fff);
	border: 1px solid var(--wp--preset--color--accent-6, currentColor);
	border-radius: var(--wp--custom--radius--sm, 6px);
	color: var(--wp--preset--color--contrast, currentColor);
}

.boi-placeholder svg {
	inline-size: 3rem;
	block-size: 3rem;
	opacity: 0.55;
}

.wp-block-post-template.is-layout-grid > li .wp-block-post-title {
	margin: 0;
	text-wrap: balance;
}

.wp-block-post-template.is-layout-grid > li .wp-block-post-title a {
	text-decoration: none;
	color: inherit;
}

.wp-block-post-template.is-layout-grid > li .wp-block-post-title a:hover {
	color: var(--wp--preset--color--accent-1, currentColor);
}

.wp-block-post-template.is-layout-grid > li .wp-block-post-excerpt {
	margin: 0;
	font-size: 0.92rem;
	color: var(--wp--preset--color--accent-5, inherit);
}

.wp-block-post-template.is-layout-grid > li .wp-block-post-excerpt__more-text {
	margin-block-start: 0.35rem;
}

.wp-block-post-template.is-layout-grid > li .wp-block-post-terms {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-5, inherit);
}

.wp-block-post-template.is-layout-grid > li .wp-block-post-terms a {
	text-decoration: none;
	color: inherit;
}

/* A post with no featured image keeps its place in the grid. */
.wp-block-post-template.is-layout-grid > li .wp-block-post-featured-image {
	margin-block-end: 0.35rem;
}

.wp-block-post-template.is-layout-grid > li .wp-block-post-featured-image img {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--md, 10px);
}

/* Header and footer bands. */
.boi-header .wp-block-navigation,
.boi-footer .wp-block-navigation {
	--boi-nav-hover: rgba(255, 255, 255, 0.14);
	--boi-nav-border: rgba(255, 255, 255, 0.28);
	--boi-nav-current: rgba(255, 255, 255, 0.22);
}

.boi-header .boi-brand__name a,
.boi-footer a {
	text-decoration: none;
}

.boi-header .wp-block-group {
	gap: 1rem;
}

/* Breadcrumbs. */
.boi-breadcrumbs {
	margin-block-end: 1rem;
	font-size: 0.82rem;
	color: var(--wp--preset--color--accent-5, inherit);
}

.boi-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.boi-breadcrumbs li + li::before {
	content: "/";
	margin-inline-end: 0.35rem;
	opacity: 0.5;
}

.boi-breadcrumbs a {
	color: inherit;
	text-decoration: none;
}

.boi-breadcrumbs a:hover {
	text-decoration: underline;
}

.boi-breadcrumbs [aria-current="page"] {
	color: var(--wp--preset--color--contrast, inherit);
}

/* Eyebrow headings on the front page. */
.boi-eyebrow {
	font-family: var(--wp--preset--font-family--ysabeau-office, inherit);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-5, inherit);
	margin: 0 0 1rem;
}

/* Header: the tools cluster sits right and wraps as a unit. */
.boi-header__tools {
	gap: 0.75rem;
	margin-inline-start: auto;
}

/* Header controls. The search icon and the appearance toggle share one
   height, one border and the fill language of the navigation pills, so the
   set reads as one on the navy band. The search box itself opens in an
   overlay styled in header-search.css. */
.boi-header {
	--boi-control-h: 2.25rem;
	--boi-control-border: rgba(255, 255, 255, 0.28);
	--boi-control-border-strong: rgba(255, 255, 255, 0.6);
	--boi-control-fill: rgba(255, 255, 255, 0.08);
	--boi-control-fill-strong: rgba(255, 255, 255, 0.18);
}

/* The toggle, matched to the search field. */
.boi-header .boi-appearance__frame {
	inline-size: 4.5rem;
	block-size: var(--boi-control-h);
	background: var(--boi-control-fill);
	border: 1px solid var(--boi-control-border);
	transition: border-color 0.15s ease;
}

.boi-header .boi-appearance__frame:hover {
	border-color: var(--boi-control-border-strong);
}

.boi-header .boi-appearance__frame:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px rgba(63, 169, 245, 0.55);
}

.boi-header .boi-appearance__block {
	inset-block: 3px;
	inset-inline-start: 3px;
	inline-size: calc(50% - 3px);
	background: var(--boi-control-fill-strong);
	border: 1px solid var(--boi-control-border-strong);
	border-radius: 999px;
}

.boi-header .boi-appearance__cell {
	color: #fff;
	opacity: 0.5;
}

:root[data-theme="light"] .boi-header .boi-appearance__cell.is-light,
:root[data-theme="dark"] .boi-header .boi-appearance__cell.is-dark {
	color: #fff;
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.boi-header .boi-appearance__frame {
		transition: none;
	}
}

.boi-footer__nav .wp-block-navigation-item__content {
	padding-inline: 0;
}

.boi-footer__nav .wp-block-navigation-item__content:hover {
	background: transparent;
	border-color: transparent;
	text-decoration: underline;
}

/* Featured lead on the front page. */
.boi-lead {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 2rem;
	align-items: center;
	padding: 1.5rem;
	background: var(--wp--preset--color--accent-3, transparent);
	border: 1px solid var(--wp--preset--color--accent-6, currentColor);
	border-radius: var(--wp--custom--radius--lg, 16px);
}

.boi-lead__media img,
.boi-lead__media .boi-placeholder {
	inline-size: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--md, 10px);
	margin: 0;
}

.boi-lead__kicker {
	display: inline-block;
	margin-block-end: 0.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--accent-1, inherit);
}

.boi-lead__title {
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	margin: 0 0 0.75rem;
	text-wrap: balance;
}

.boi-lead__title a {
	color: inherit;
	text-decoration: none;
}

.boi-lead__excerpt {
	margin: 0 0 1.25rem;
	color: var(--wp--preset--color--accent-5, inherit);
}

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

.boi-lead__cta {
	display: inline-block;
	padding: 0.55rem 1.1rem;
	background: var(--wp--preset--color--accent-1, currentColor);
	color: var(--wp--preset--color--base, #fff);
	border-radius: var(--wp--custom--radius--pill, 999px);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9rem;
}

/* Reading time, share, author, related. */
.boi-reading-time {
	font-size: 0.85rem;
	color: var(--wp--preset--color--accent-5, inherit);
}

.boi-reading-time::before {
	content: "·";
	margin-inline-end: 0.5rem;
}

.boi-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin-block-start: 2rem;
	padding-block-start: 1.25rem;
	border-block-start: 1px solid var(--wp--preset--color--accent-6, currentColor);
}

.boi-share__label {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-5, inherit);
	margin-inline-end: 0.4rem;
}

.boi-share__link {
	padding: 0.3rem 0.8rem;
	font-size: 0.85rem;
	text-decoration: none;
	color: inherit;
	background: var(--wp--preset--color--accent-3, transparent);
	border: 1px solid var(--wp--preset--color--accent-6, currentColor);
	border-radius: var(--wp--custom--radius--pill, 999px);
}

.boi-share__link:hover {
	border-color: var(--wp--preset--color--accent-1, currentColor);
}

.boi-author {
	display: grid;
	grid-template-columns: 4.5rem 1fr;
	gap: 1.25rem;
	align-items: start;
	margin-block-start: 2rem;
	padding: 1.25rem;
	background: var(--wp--preset--color--accent-3, transparent);
	border-radius: var(--wp--custom--radius--md, 10px);
}

.boi-author__avatar img {
	inline-size: 4.5rem;
	block-size: 4.5rem;
	border-radius: 50%;
}

.boi-author__label {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-5, inherit);
}

.boi-author__name {
	margin: 0.15rem 0 0.4rem;
	font-family: var(--wp--preset--font-family--platypi, inherit);
	font-size: 1.15rem;
	font-weight: 600;
}

.boi-author__name a {
	color: inherit;
	text-decoration: none;
}

.boi-author__bio {
	margin: 0;
	font-size: 0.95rem;
	color: var(--wp--preset--color--accent-5, inherit);
}

.boi-related {
	margin-block-start: 3rem;
}

.boi-related__heading {
	font-size: 0.78rem;
	font-family: var(--wp--preset--font-family--ysabeau-office, inherit);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-5, inherit);
	margin: 0 0 1rem;
}

.boi-related__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.boi-related__item {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.9rem;
	background: var(--wp--preset--color--accent-3, transparent);
	border: 1px solid var(--wp--preset--color--accent-6, currentColor);
	border-radius: var(--wp--custom--radius--md, 10px);
}

.boi-related__item img,
.boi-related__item .boi-placeholder {
	inline-size: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--sm, 6px);
	margin: 0;
}

.boi-related__link {
	font-family: var(--wp--preset--font-family--platypi, inherit);
	font-weight: 600;
	color: inherit;
	text-decoration: none;
	text-wrap: balance;
}

@media (max-width: 781px) {
	.boi-lead {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	/* On small screens the search icon stays. The tools row may wrap: the links
	   take a row of their own while they are shown as links, and the icon
	   shares the row with the toggle (and, below 600px, with the menu button
	   WordPress swaps in for the links). */
	.boi-header .boi-header__tools {
		inline-size: 100%;
		flex-wrap: wrap !important;
		gap: 0.6rem 0.5rem;
	}

	.boi-header .boi-header__tools .wp-block-navigation {
		order: 1;
		flex: 1 1 100%;
		min-inline-size: 0;
	}

	.boi-header .boi-header__tools .wp-block-navigation__container {
		justify-content: flex-start;
	}

	.boi-header .boi-header__tools .boi-appearance {
		order: 3;
		flex: 0 0 auto;
	}
}

/* Between 600 and 781px the links are shown as links but six will not fit
   one line. They stay on a single row that scrolls sideways, with a fade at
   the right edge to show that more follow, so the header stays three rows
   deep and no link sits alone on a line of its own. */
@media (min-width: 600px) and (max-width: 781px) {
	.boi-header .boi-header__tools .wp-block-navigation__container {
		flex-wrap: nowrap !important;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
		padding-inline-end: 2rem;
	}

	.boi-header .boi-header__tools .wp-block-navigation__container::-webkit-scrollbar {
		display: none;
	}

	.boi-header .boi-header__tools .wp-block-navigation-item {
		flex: 0 0 auto;
	}
}

/* Below 600px WordPress replaces the links with a menu button, which sits
   on the same row as the search and the toggle. */
@media (max-width: 599px) {
	.boi-header .boi-header__tools .wp-block-navigation {
		flex: 0 0 auto;
	}
}

@media (max-width: 600px) {
	.boi-author {
		grid-template-columns: 3.5rem 1fr;
		gap: 0.9rem;
	}

	.boi-author__avatar img {
		inline-size: 3.5rem;
		block-size: 3.5rem;
	}
}

/* Mission band. */
.boi-mission {
	margin-block-start: var(--wp--preset--spacing--60, 4rem);
	padding: clamp(2rem, 5vw, 3.5rem);
	background: var(--wp--preset--color--contrast, #0D2B4E);
	color: var(--wp--preset--color--base, #fff);
	border-radius: var(--wp--custom--radius--lg, 16px);
}

.boi-mission__inner {
	max-inline-size: 44rem;
}

.boi-mission__label {
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-2, #E8B33C);
}

.boi-mission__title {
	margin: 0 0 1rem;
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	color: inherit;
	text-wrap: balance;
}

.boi-mission__text {
	margin: 0 0 1.5rem;
	font-size: 1.05rem;
	line-height: 1.5;
	opacity: 0.88;
}

.boi-mission__cta {
	display: inline-block;
	padding: 0.55rem 1.1rem;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: var(--wp--custom--radius--pill, 999px);
	color: inherit;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9rem;
}

.boi-mission__cta:hover {
	background: rgba(255, 255, 255, 0.12);
}

/* Reflections strip. */
.boi-strip {
	margin-block-start: var(--wp--preset--spacing--60, 4rem);
}

.boi-strip__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
}

.boi-strip__more {
	font-size: 0.88rem;
	font-weight: 600;
	text-decoration: none;
}

.boi-strip__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.boi-strip__item a {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1.1rem 1.25rem;
	border-inline-start: 3px solid var(--wp--preset--color--accent-2, currentColor);
	background: var(--wp--preset--color--accent-3, transparent);
	border-radius: var(--wp--custom--radius--md, 10px);
	color: inherit;
	text-decoration: none;
}

.boi-strip__title {
	font-family: var(--wp--preset--font-family--platypi, inherit);
	font-size: 1.1rem;
	font-weight: 600;
	text-wrap: balance;
}

.boi-strip__date {
	font-size: 0.82rem;
	color: var(--wp--preset--color--accent-5, inherit);
}

/* Follow module. */
.boi-follow {
	margin-block-start: var(--wp--preset--spacing--60, 4rem);
	padding-block-start: var(--wp--preset--spacing--50, 2.5rem);
	border-block-start: 1px solid var(--wp--preset--color--accent-6, currentColor);
}

.boi-follow__text {
	margin: 0 0 1rem;
	color: var(--wp--preset--color--accent-5, inherit);
}

.boi-follow__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.boi-follow__link {
	padding: 0.45rem 1rem;
	text-decoration: none;
	color: inherit;
	font-weight: 600;
	font-size: 0.9rem;
	background: var(--wp--preset--color--accent-3, transparent);
	border: 1px solid var(--wp--preset--color--accent-6, currentColor);
	border-radius: var(--wp--custom--radius--pill, 999px);
}

.boi-follow__link:hover {
	border-color: var(--wp--preset--color--accent-1, currentColor);
}

/* Brand lockup. The mark inherits the surrounding colour, so it reverses
   cleanly on the navy band. Restored after the rule was cut in 1.21. */
.boi-brand {
	gap: 0.7rem;
	align-items: center;
}

.boi-brand__mark {
	display: block;
	inline-size: 2.125rem;
	block-size: 2.125rem;
	flex: 0 0 auto;
	color: currentColor;
}

.boi-brand__mark svg {
	inline-size: 100%;
	block-size: 100%;
	display: block;
}

/* Contact form. */
.boi-contact__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0 0 1rem;
}

.boi-contact__field label {
	font-size: 0.85rem;
	font-weight: 600;
}

.boi-contact__field input,
.boi-contact__field textarea {
	font: inherit;
	padding: 0.65rem 0.9rem;
	color: inherit;
	background: var(--wp--preset--color--base, #fff);
	border: 1px solid var(--wp--preset--color--accent-6, currentColor);
	border-radius: var(--wp--custom--radius--sm, 6px);
}

.boi-contact__field input:focus,
.boi-contact__field textarea:focus {
	outline: 2px solid var(--wp--preset--color--accent-1, currentColor);
	outline-offset: 1px;
}

.boi-contact__trap {
	position: absolute;
	left: -9999px;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
}

.boi-contact__button {
	font: inherit;
	font-weight: 600;
	padding: 0.65rem 1.4rem;
	color: var(--wp--preset--color--base, #fff);
	background: var(--wp--preset--color--accent-1, currentColor);
	border: 0;
	border-radius: var(--wp--custom--radius--pill, 999px);
	cursor: pointer;
}

.boi-contact__notice {
	padding: 0.8rem 1rem;
	border-radius: var(--wp--custom--radius--sm, 6px);
	margin-block-end: 1.25rem;
}

.boi-contact__notice.is-success {
	background: var(--wp--preset--color--accent-3, transparent);
	border: 1px solid var(--wp--preset--color--accent-1, currentColor);
}

.boi-contact__notice.is-error {
	background: var(--wp--preset--color--accent-3, transparent);
	border: 1px solid var(--wp--preset--color--accent-2, currentColor);
}

/* ------------------------------------------------------------------
   Responsive pass for every module added since the first breakpoints.
   Steps: 1024px (small laptop / tablet landscape), 781px (tablet portrait),
   600px (phone). Grids reflow on their own; these rules handle the header
   cluster, padding, type, and anything that would otherwise crowd.
   ------------------------------------------------------------------ */

/* Nothing may push the page sideways. */
html,
body {
	overflow-x: clip;
}

img,
svg,
video {
	max-inline-size: 100%;
	block-size: auto;
}

/* Tablet landscape: the tools cluster takes its own row under the brand,
   so seven pills, search and the toggle never fight the wordmark. */
/* Up to 1300px the header takes two rows: the wordmark, then the links,
   search and toggle on a row of their own. Six section links, the search and
   the toggle need about 1,200px beside the wordmark, so on common laptop
   widths a single row would wrap by accident. */
@media (max-width: 1300px) {
	.boi-header__tools {
		flex-basis: 100%;
		flex-wrap: wrap !important;
		row-gap: 0.6rem;
		margin-inline-start: 0;
		justify-content: space-between;
	}

	.boi-header__tools .wp-block-navigation {
		flex: 1 1 auto;
	}
}

@media (max-width: 1024px) {
	.boi-lead {
		gap: 1.5rem;
	}
}

/* Tablet portrait. */
@media (max-width: 781px) {
	.boi-lead,
	.boi-mission,
	.boi-related__item,
	.boi-sections__item,
	.boi-author,
	.boi-result {
		padding: 1.25rem;
	}

	.boi-mission__title {
		font-size: 1.5rem;
	}

	.boi-mission__text {
		font-size: 1rem;
	}

	.boi-strip__list,
	.boi-related__list,
	.boi-sections {
		gap: 0.75rem;
	}

	.boi-footer .wp-block-group.alignwide.is-layout-grid {
		gap: 1.5rem;
	}

	.boi-breadcrumbs {
		font-size: 0.78rem;
	}
}

/* Phone. */
@media (max-width: 600px) {
	.boi-lead {
		padding: 1rem;
		border-radius: var(--wp--custom--radius--md, 10px);
	}

	.boi-lead__title {
		font-size: 1.35rem;
	}

	.boi-lead__cta,
	.boi-mission__cta,
	.boi-contact__button {
		display: block;
		text-align: center;
	}

	.boi-mission {
		padding: 1.5rem 1.25rem;
		border-radius: var(--wp--custom--radius--md, 10px);
	}

	.boi-strip__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.25rem;
	}

	.boi-sections__name {
		font-size: 1.1rem;
	}

	.boi-share {
		gap: 0.35rem;
	}

	.boi-share__link,
	.boi-follow__link {
		font-size: 0.82rem;
		padding: 0.35rem 0.7rem;
	}

	.boi-related__list {
		grid-template-columns: 1fr;
	}

	.boi-contact__field input,
	.boi-contact__field textarea {
		font-size: 16px; /* prevents iOS zoom on focus */
	}

	.boi-footer .wp-block-group.alignwide.is-layout-grid {
		grid-template-columns: 1fr;
	}

	.boi-eyebrow {
		font-size: 0.75rem;
	}

	/* The breadcrumb trail truncates the current title so it never wraps
	   to three lines on a narrow screen. */
	.boi-breadcrumbs [aria-current="page"] {
		max-inline-size: 60vw;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

/* Entries with an image alternate sides on wide screens, after the Wuffes
   reference: image left, then right, then left. Text-only entries are
   unaffected. */
@media (min-width: 900px) {
	.boi-listicle .boi-entry:has(.boi-entry__media) .boi-entry__body {
		display: grid;
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		column-gap: 1.75rem;
		align-items: start;
	}

	.boi-listicle .boi-entry:has(.boi-entry__media) .boi-entry__media {
		grid-row: 1 / span 6;
		margin: 0;
	}

	.boi-listicle .boi-entry:has(.boi-entry__media):nth-child(even of .boi-entry:has(.boi-entry__media)) .boi-entry__body {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	}

	.boi-listicle .boi-entry:has(.boi-entry__media):nth-child(even of .boi-entry:has(.boi-entry__media)) .boi-entry__media {
		grid-column: 2;
	}
}

/* Image credit beneath a featured image, and the full credits list. */
.boi-credit {
	margin: 0.5rem auto 0 !important;
	max-inline-size: var(--wp--style--global--wide-size, 76rem);
	font-size: 0.75rem;
	color: var(--wp--preset--color--accent-5, inherit);
	text-align: end;
}

.boi-credit a {
	color: inherit;
}

.boi-credits {
	display: grid;
	gap: 0.5rem;
	padding-inline-start: 1.1rem;
	font-size: 0.9rem;
}

/* Featured images on articles keep a consistent frame. */
.single .wp-block-post-featured-image img {
	max-block-size: 34rem;
	object-fit: cover;
	inline-size: 100%;
}

/* Footer lockup: the mark sits beside the wordmark at a size matched to the
   smaller footer title. Colours are fixed to white, since the footer band is
   always navy. */
.boi-brand--footer {
	gap: 0.6rem;
	margin-block-end: 0.5rem;
}

.boi-brand--footer .boi-brand__mark {
	inline-size: 1.75rem;
	block-size: 1.75rem;
}

.boi-brand--footer .boi-brand__name,
.boi-brand--footer .boi-brand__name a {
	font-size: 1.3rem;
	line-height: 1;
	margin: 0;
}

/* Questions answered page. */
.boi-qnav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 2.5rem;
	padding: 0;
	list-style: none;
}

.boi-qnav a {
	display: inline-block;
	padding: 0.35rem 0.85rem;
	font-size: 0.88rem;
	font-weight: 600;
	text-decoration: none;
	color: inherit;
	background: var(--wp--preset--color--accent-3, transparent);
	border: 1px solid var(--wp--preset--color--accent-6, currentColor);
	border-radius: var(--wp--custom--radius--pill, 999px);
}

.boi-qnav a:hover {
	border-color: var(--wp--preset--color--accent-1, currentColor);
}

.boi-qgroup {
	margin-block-end: 3rem;
	scroll-margin-block-start: 5rem;
}

.boi-qgroup__title {
	font-size: 1.4rem;
	margin: 0 0 1rem;
	padding-block-end: 0.5rem;
	border-block-end: 1px solid var(--wp--preset--color--accent-6, currentColor);
}

.boi-objections--list {
	grid-template-columns: 1fr;
	max-inline-size: none;
}

.boi-objection {
	scroll-margin-block-start: 5rem;
}

.boi-objection:target {
	border-color: var(--wp--preset--color--accent-2, #E8B33C);
}

/* The panel at the head of an article. */
.boi-answers {
	margin-block: 0 2rem;
	padding: 1.1rem 1.25rem;
	background: var(--wp--preset--color--accent-3, transparent);
	border-inline-start: 3px solid var(--wp--preset--color--accent-2, #E8B33C);
	border-radius: var(--wp--custom--radius--sm, 6px);
}

.boi-answers__label {
	margin: 0 0 0.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-5, inherit);
}

.boi-answers ul {
	margin: 0 0 0.75rem;
	padding-inline-start: 1.1rem;
	display: grid;
	gap: 0.3rem;
	font-family: var(--wp--preset--font-family--platypi, inherit);
	font-weight: 600;
}

.boi-answers__more {
	font-size: 0.85rem;
	font-weight: 600;
}

/* Read next: the card at the foot of every article in the reading order. */
.boi-next {
	margin-block: 2.5rem 1.5rem;
	padding: 1.4rem 1.5rem;
	background: #0D2B4E;
	color: #EAF2FB;
	border-radius: var(--wp--custom--radius--md, 10px);
}

:root[data-theme="dark"] .boi-next {
	background: #06182C;
}

.boi-next__label {
	margin: 0 0 0.4rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-2, #E8B33C);
}

.boi-next__title {
	display: block;
	font-family: var(--wp--preset--font-family--platypi, serif);
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
	text-decoration: none;
	text-wrap: balance;
}

.boi-next__title:hover {
	text-decoration: underline;
}

.boi-next__title::after {
	content: " \2192";
	color: var(--wp--preset--color--accent-2, #E8B33C);
}

.boi-next__part {
	margin: 0.5rem 0 0;
	font-size: 0.82rem;
	color: #9DB3C9;
}

/* Footer notice: the bottom line of every page. */
.boi-notice {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.75rem 2rem;
	inline-size: 100%;
	font-size: 0.8rem;
	color: #9DB3C9;
}

.boi-notice__text {
	margin: 0;
	max-inline-size: 48rem;
}

.boi-notice a {
	color: #EAF2FB;
}

.boi-notice__top {
	white-space: nowrap;
	font-weight: 600;
	text-decoration: none;
}

.boi-notice__top::after {
	content: " \2191";
	color: var(--wp--preset--color--accent-2, #E8B33C);
}

html {
	scroll-behavior: smooth;
}

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

@media (max-width: 600px) {
	.boi-notice {
		flex-direction: column;
	}
}

/* Icons from the Minimalist Social & Platform Icons Pack, inlined with
   currentColor so they follow the surrounding text in either appearance. */
.boi-icon {
	display: block;
	flex: 0 0 auto;
	inline-size: 1.1em;
	block-size: 1.1em;
}

/* Share: round icon buttons. */
.boi-share {
	align-items: center;
}

.boi-share__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	padding: 0 !important;
	font-size: 1.05rem;
	border-radius: 50% !important;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.boi-share__link:hover,
.boi-share__link:focus-visible {
	background: var(--wp--preset--color--contrast, #0D2B4E);
	border-color: var(--wp--preset--color--contrast, #0D2B4E);
	color: var(--wp--preset--color--base, #fff);
}

/* Follow: pills with an icon and a name. */
.boi-follow__link {
	display: inline-flex !important;
	align-items: center;
	gap: 0.5rem;
}

.boi-follow__link .boi-icon {
	inline-size: 1.05em;
	block-size: 1.05em;
}

/* Footer: a row of plain icons beneath the tagline. The selector carries
   the element and the list items are reset, so no general list or layout
   rule from WordPress, a plugin or the parent theme can stack the icons. */
ul.boi-social {
	display: flex !important;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	max-inline-size: none;
	margin: 1rem 0 0 !important;
	padding: 0;
	list-style: none;
}

ul.boi-social > li {
	display: block;
	margin: 0;
	padding: 0;
}

ul.boi-social > li::marker {
	content: none;
}

.boi-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	font-size: 1.05rem;
	color: #EAF2FB;
	border: 1px solid #2A4A70;
	border-radius: 50%;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.boi-social__link:hover,
.boi-social__link:focus-visible {
	background: #fff;
	border-color: #fff;
	color: #0D2B4E;
}

@media (prefers-reduced-motion: reduce) {
	.boi-share__link,
	.boi-social__link {
		transition: none;
	}
}

/* Footer bar: the site's standing pages in one horizontal row, separated by
   thin dots, above the notice. It wraps on narrow screens. */
.boi-footer__bar .wp-block-navigation__container {
	gap: 0.35rem 0;
	row-gap: 0.35rem;
}

.boi-footer__bar .wp-block-navigation-item + .wp-block-navigation-item::before {
	content: "\00B7";
	margin-inline: 0.7rem;
	color: #5C7A9C;
}

.boi-footer__bar .wp-block-navigation-item__content {
	padding: 0;
	text-decoration: none;
}

.boi-footer__bar .wp-block-navigation-item__content:hover,
.boi-footer__bar .wp-block-navigation-item__content:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.boi-footer__bottom > .boi-notice {
	inline-size: 100%;
}

/* Touch targets. On phones every link and control a reader taps is at least
   24px tall, the WCAG 2.2 minimum, and the main ones reach 40px or more.
   Padding does the work, so the text and the layout stay as they were. */
@media (max-width: 781px) {
	.boi-breadcrumbs a,
	.wp-block-post-terms a {
		display: inline-block;
		padding-block: 0.4rem;
	}

	.boi-footer__nav .wp-block-navigation-item__content,
	.boi-footer__bar .wp-block-navigation-item__content {
		display: inline-block;
		padding-block: 0.35rem !important;
	}

	.boi-parts a {
		padding-block: 0.3rem;
	}

	.boi-next__title {
		padding-block: 0.2rem;
	}

	.boi-notice__top {
		display: inline-block;
		padding-block: 0.4rem;
	}

	.boi-sections__latest a,
	.boi-objection__answer a,
	.boi-result__entries a,
	.boi-lead__kicker,
	.boi-postnav a {
		display: inline-block;
		padding-block: 0.3rem;
	}
}

.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 2.5rem;
	min-block-size: 2.5rem;
	padding-inline: 0.5rem;
	border-radius: var(--wp--custom--radius--sm, 6px);
}

.wp-block-query-pagination .page-numbers.current {
	background: var(--wp--preset--color--accent-3, transparent);
	font-weight: 700;
}

.comment-form-cookies-consent input[type="checkbox"],
.comment-form input[type="checkbox"] {
	flex: 0 0 auto; /* its row is a flex container, which was squeezing it */
	inline-size: 1.5rem;
	block-size: 1.5rem;
	margin-inline-end: 0.5rem;
	vertical-align: middle;
}