/*
Theme Name: Opal Press
Author: Black Opal
Description: A quiet, fast and accessible block theme for editorial and affiliate content sites. Muted palettes, light display type, hairline rules and soft "double bezel" cards. One theme, eight style variations (choose one in Appearance > Editor > Styles). Styles the Opal Engine components: key takeaways, verdict box, pros and cons, callouts, numbered steps, checklists with stamps, data strips, ranked entries, comparison matrix, FAQ, sources, route boards, disclosure and "how this was made" lines, and ad slots with reserved height. Core blocks only; the only script is the core navigation overlay on phones.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.2.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: opal-press
Tags: blog, news, one-column, wide-blocks, block-patterns, block-styles, full-site-editing, style-variations, editor-style, custom-colors, translation-ready
*/

/*
 * Every colour here comes from a preset (--wp--preset--color--*) or a
 * derived token in theme.json settings.custom (--wp--custom--*), so each
 * style variation recolours everything. Variation signature CSS lives in
 * each styles/<site>.json "styles.css" string (sources: tools/variation-css/).
 *
 * Icons are SVG masks: the SVG only supplies a shape, the colour is
 * currentColor.
 */

/* ==========================================================================
   1. Base
   ========================================================================== */

body {
	--opal-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	--opal-icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E");
	--opal-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	--opal-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
	--opal-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E");
	--opal-icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

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

@media (prefers-reduced-motion: no-preference) {
	html:focus-within {
		scroll-behavior: smooth;
	}
}

.wp-site-blocks {
	overflow-x: clip;
}

img,
svg,
video,
canvas,
iframe,
embed,
object {
	max-width: 100%;
}

img,
video {
	height: auto;
}

::selection {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 18%, transparent);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 1.5px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 4px;
}

.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 1.5px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 999px;
}

:is(h1, h2, h3) {
	text-wrap: balance;
}

:is(h1, h2, h3, h4, .wp-block-post-title, .wp-block-site-tagline, .wp-block-query-title) em {
	color: var(--wp--preset--color--accent);
	font-style: italic;
	font-weight: inherit;
}

code,
kbd,
samp,
pre {
	font-family: var(--wp--preset--font-family--mono);
}

pre,
.wp-block-code,
.wp-block-preformatted {
	max-width: 100%;
	overflow-x: auto;
}

:where(p, li, td, th, figcaption) > code {
	padding: 0.12em 0.4em;
	border-radius: 6px;
	background: var(--wp--preset--color--sunk);
	font-size: 0.86em;
}

hr.wp-block-separator {
	border-top-width: 1px;
}

/* Eyebrow above a section heading: hairline, then small spaced capitals. */
p.opal-eyebrow,
.wp-block-site-title.opal-eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--custom--label--font);
	font-size: var(--wp--custom--label--size);
	font-style: normal;
	font-weight: var(--wp--custom--label--weight);
	letter-spacing: var(--wp--custom--label--tracking);
	line-height: 1.4;
	text-transform: uppercase;
}

p.opal-eyebrow::before,
.wp-block-site-title.opal-eyebrow::before {
	content: "";
	flex: none;
	width: 28px;
	height: 1px;
	background: currentColor;
	opacity: 0.6;
}

p.opal-lede {
	max-width: 46ch;
	color: var(--wp--custom--ink-soft);
	font-size: clamp(1.09375rem, 1rem + 0.35vw, 1.1875rem);
	font-weight: 300;
	line-height: 1.65;
}

/* ==========================================================================
   2. Buttons: pill, contrast fill, trailing arrow in its own circle
   ========================================================================== */

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 48px;
	box-sizing: border-box;
	text-align: left;
	white-space: nowrap;
}

.wp-block-button__link::before {
	content: "";
	flex: none;
	order: 2;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: color-mix(in srgb, currentColor 12%, transparent);
}

.wp-block-button__link::after {
	content: "";
	flex: none;
	order: 3;
	width: 15px;
	height: 15px;
	margin: 0 11.5px 0 -38.5px;
	background: currentColor;
	-webkit-mask: var(--opal-icon-arrow) center / contain no-repeat;
	mask: var(--opal-icon-arrow) center / contain no-repeat;
}

.wp-block-button__link.opal-aff::after {
	-webkit-mask-image: var(--opal-icon-external);
	mask-image: var(--opal-icon-external);
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	padding: 5px 5px 5px 22px;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	box-shadow: inset 0 0 0 1px var(--wp--custom--line-strong);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 3%, transparent);
	color: var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-outline > .wp-block-button__link::before {
	background: color-mix(in srgb, currentColor 6%, transparent);
}

/* Small chips: no arrow. */
.opal-chips .wp-block-button__link {
	min-height: 44px;
	padding: 10px 16px;
	font-size: 0.84375rem;
}

.opal-chips .wp-block-button__link::before,
.opal-chips .wp-block-button__link::after {
	display: none;
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-button__link {
		transition: background-color 0.7s var(--wp--custom--ease), transform 0.7s var(--wp--custom--ease);
	}

	.wp-block-button__link::before,
	.wp-block-button__link::after {
		transition: transform 0.8s var(--wp--custom--ease);
	}

	.wp-block-button__link:hover::before,
	.wp-block-button__link:hover::after {
		transform: translateX(3px);
	}

	.wp-block-button__link:active {
		transform: scale(0.985);
	}
}

/* ==========================================================================
   3. Reading
   ========================================================================== */

.wp-block-post-content {
	overflow-wrap: break-word;
}

.wp-block-post-content a:where(:not(.wp-element-button)) {
	overflow-wrap: anywhere;
	text-decoration-line: underline;
	text-decoration-color: var(--wp--custom--line-strong);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.wp-block-post-content a:where(:not(.wp-element-button)):hover {
	text-decoration-color: currentColor;
}

.wp-block-post-content > h2 {
	margin-block-start: var(--wp--preset--spacing--70);
}

.wp-block-post-content > h3 {
	margin-block-start: var(--wp--preset--spacing--60);
}

.wp-block-post-content > :is(h2, h3, h4) + * {
	margin-block-start: 1.1rem;
}

.wp-block-post-content > :is(
	.opal-takeaways,
	.opal-verdict,
	.opal-proscons,
	.opal-callout,
	.opal-steps,
	.opal-checklist,
	.opal-datastrip,
	.opal-own-cta,
	.opal-ranked,
	.wp-block-table,
	.opal-ad
) {
	margin-block-start: var(--wp--preset--spacing--50);
	margin-block-end: var(--wp--preset--spacing--50);
}

.wp-block-post-content > .opal-ranked + .opal-ranked {
	margin-block-start: calc(var(--wp--preset--spacing--40) + 8px);
}

/* Tables: a rounded surface with hairline rows. */

.wp-block-table {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--xl);
	background: var(--wp--preset--color--surface);
}

.wp-block-table table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 0.90625rem;
	font-variant-numeric: tabular-nums;
}

.wp-block-table thead,
.wp-block-table tfoot {
	border: 0;
}

.wp-block-table th,
.wp-block-table td {
	border: 0;
	text-align: left;
}

.wp-block-table th {
	padding: 18px 18px 14px;
	border-bottom: 1px solid var(--wp--custom--line-strong);
	background: transparent;
	color: var(--wp--preset--color--muted);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	vertical-align: bottom;
	white-space: nowrap;
}

.wp-block-table td {
	padding: 16px 18px;
	border-bottom: 1px solid var(--wp--preset--color--line);
	color: var(--wp--custom--ink-soft);
	vertical-align: middle;
}

.wp-block-table tbody tr:last-child td {
	border-bottom: 0;
}

.wp-block-table figcaption {
	margin: 0;
	padding: 12px 18px 16px;
	border-top: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	text-align: left;
}

/* ==========================================================================
   4. Shared component parts
   ========================================================================== */

p.opal-label {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--custom--label--font);
	font-size: var(--wp--custom--label--size);
	font-style: normal;
	font-weight: var(--wp--custom--label--weight);
	letter-spacing: 0.18em;
	line-height: 1.4;
	text-transform: uppercase;
}

p.opal-label + * {
	margin-block-start: 0.75rem;
}

p.opal-source {
	margin-block-start: 0.6rem;
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	line-height: 1.5;
}

.wp-block-table + p.opal-source {
	margin-block-start: 0.6rem;
}

a.opal-aff:not(.wp-element-button)::after {
	content: "\2197";
	content: "\2197" / "";
	display: inline-block;
	margin-left: 0.15em;
	font-size: 0.85em;
	text-decoration: none;
}

a.opal-own:not(.wp-element-button) {
	text-decoration-line: underline;
	text-decoration-style: dotted;
}

/* Disclosure: small muted line with an info icon. */
p.opal-disclosure {
	position: relative;
	max-width: 80ch;
	padding-left: 29px;
	color: var(--wp--preset--color--muted);
	font-size: 0.84375rem;
	line-height: 1.6;
}

p.opal-disclosure::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 17px;
	height: 17px;
	background: currentColor;
	-webkit-mask: var(--opal-icon-info) center / contain no-repeat;
	mask: var(--opal-icon-info) center / contain no-repeat;
}

p.opal-disclosure a,
p.opal-made a {
	color: var(--wp--custom--ink-soft);
}

p.opal-made {
	margin-block-start: var(--wp--preset--spacing--60);
	padding-block-start: 1.25rem;
	border-top: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--muted);
	font-size: 0.84375rem;
	line-height: 1.6;
}

/* Ad slot: space is reserved so the page never shifts when an ad loads. */
.opal-ad {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 280px;
	max-width: 100%;
	margin-block: var(--wp--preset--spacing--50);
	overflow: hidden;
	border-radius: var(--wp--custom--radius--xl);
	background: var(--wp--preset--color--sunk);
}

.opal-ad > * {
	max-width: 100%;
}

@media (min-width: 48em) {
	.opal-ad {
		min-height: 250px;
	}
}

/* Double bezel: a hairline shell 8px outside the card, drawn with spread
   shadows so a single element is enough. Leave room for the rings. */
.wp-block-group.opal-verdict,
.wp-block-group.opal-ranked,
.wp-block-group.opal-own-cta,
.wp-block-group.opal-card,
.wp-block-group.opal-leaderboard,
.wp-block-group.opal-panel {
	border-radius: var(--wp--custom--radius--l);
	background: var(--wp--preset--color--surface);
	box-shadow: var(--wp--custom--bezel), var(--wp--custom--shadow);
}

/* ==========================================================================
   5. Engine components
   ========================================================================== */

/* Key takeaways ------------------------------------------------------------ */

.wp-block-group.opal-takeaways {
	padding: clamp(1.5rem, 1.1rem + 1.4vw, 1.875rem) clamp(1.375rem, 1rem + 1.6vw, 2.125rem);
	border-radius: var(--wp--custom--radius--xl);
	background: var(--wp--preset--color--sunk);
}

.opal-takeaways > p.opal-label {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.375rem;
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.01em;
	text-transform: none;
}

.opal-takeaways :is(ul, ol) {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.opal-takeaways li {
	position: relative;
	padding-left: 22px;
	color: var(--wp--custom--ink-soft);
}

.opal-takeaways li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}

.opal-takeaways a,
.opal-callout a {
	color: var(--wp--preset--color--contrast);
}

/* Verdict box -------------------------------------------------------------- */

.wp-block-group.opal-verdict {
	padding: clamp(1.625rem, 1.2rem + 1.6vw, 2.125rem) clamp(1.375rem, 0.9rem + 2vw, 2.25rem) clamp(1.5rem, 1.1rem + 1.4vw, 1.875rem);
}

.wp-block-group.opal-verdict:has(> .opal-verdict__score) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	column-gap: var(--wp--preset--spacing--50);
}

.wp-block-group.opal-verdict > * {
	grid-column: 1;
	max-width: none;
	margin-inline: 0 !important;
	margin-block: 0;
	color: var(--wp--custom--ink-soft);
}

.wp-block-group.opal-verdict > * + * {
	margin-block-start: 0.75rem;
}

.wp-block-group.opal-verdict > p.opal-label {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--wp--preset--color--good);
}

.wp-block-group.opal-verdict > p.opal-label::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.wp-block-group.opal-verdict > p.opal-verdict__name {
	margin-block-start: 0.9rem;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 1.5rem + 1.8vw, 2.875rem);
	font-weight: 400;
	letter-spacing: -0.025em;
	line-height: 1;
}

p.opal-verdict__name strong {
	font-weight: inherit;
}

.wp-block-group.opal-verdict > .opal-verdict__score {
	grid-column: 2;
	grid-row: 1 / span 3;
	align-self: center;
	margin: 0 !important;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--mono);
	font-size: clamp(2rem, 1.6rem + 1.4vw, 2.5rem);
	font-variant-numeric: tabular-nums;
	font-weight: 400;
	letter-spacing: -0.03em;
	line-height: 1;
	text-align: right;
	white-space: nowrap;
}

p.opal-verdict__score span,
p.opal-ranked__score span {
	margin-left: 2px;
	color: var(--wp--preset--color--muted);
	font-size: 0.36em;
	letter-spacing: 0;
}

.opal-verdict :is(ul, ol) {
	display: grid;
	gap: 10px;
	padding: 0;
	list-style: none;
}

.opal-verdict li {
	position: relative;
	padding-left: 30px;
}

.opal-verdict li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 18px;
	height: 18px;
	background: var(--wp--preset--color--good);
	-webkit-mask: var(--opal-icon-check) center / contain no-repeat;
	mask: var(--opal-icon-check) center / contain no-repeat;
}

.wp-block-group.opal-verdict > .wp-block-buttons {
	grid-column: 1 / -1;
	margin-block-start: 1.75rem;
	padding-block-start: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--line);
}

/* Pros and cons: two lists split by a hairline. ---------------------------- */

.wp-block-columns.opal-proscons {
	gap: 28px;
	padding-block-start: 22px;
	border-top: 1px solid var(--wp--preset--color--line);
}

.opal-proscons > .wp-block-column > p.opal-label {
	margin-block-end: 10px;
}

.opal-pros :is(ul, ol),
.opal-cons :is(ul, ol) {
	display: grid;
	gap: 9px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.opal-pros li,
.opal-cons li {
	position: relative;
	padding-left: 26px;
	color: var(--wp--custom--ink-soft);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.opal-pros li::before,
.opal-cons li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 16px;
	height: 16px;
	-webkit-mask: var(--opal-icon-check) center / contain no-repeat;
	mask: var(--opal-icon-check) center / contain no-repeat;
}

.opal-pros li::before {
	background: var(--wp--preset--color--good);
}

.opal-cons li::before {
	background: var(--wp--preset--color--muted);
	-webkit-mask-image: var(--opal-icon-minus);
	mask-image: var(--opal-icon-minus);
}

/* Callouts ----------------------------------------------------------------- */

.opal-callout {
	--opal-callout: var(--wp--preset--color--accent);
}

.opal-callout--tip {
	--opal-callout: var(--wp--preset--color--good);
}

.opal-callout--warning {
	--opal-callout: var(--wp--preset--color--warn);
}

.opal-callout--note {
	--opal-callout: var(--wp--custom--wash-ink);
}

.wp-block-group.opal-callout {
	padding: clamp(1.375rem, 1rem + 1.4vw, 1.75rem) clamp(1.375rem, 1rem + 1.6vw, 2.125rem);
	border-radius: var(--wp--custom--radius--xl);
	background: var(--wp--preset--color--surface);
	background: color-mix(in srgb, var(--opal-callout) 7%, var(--wp--preset--color--surface));
	color: var(--wp--custom--ink-soft);
}

.opal-callout > p.opal-label {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--opal-callout);
}

.opal-callout > p.opal-label::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

/* Numbered steps: italic display numerals, hairline rows. ------------------ */

ol.opal-steps {
	margin-left: 0;
	padding: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	counter-reset: opal-step;
	list-style: none;
}

ol.opal-steps > li {
	position: relative;
	margin: 0;
	padding: 26px 0 26px 64px;
	border-top: 1px solid var(--wp--preset--color--line);
	color: var(--wp--custom--ink-soft);
	counter-increment: opal-step;
}

ol.opal-steps > li::before {
	content: counter(opal-step);
	position: absolute;
	left: 0;
	top: 24px;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.875rem;
	font-style: italic;
	font-weight: 300;
	line-height: 1;
}

ol.opal-steps > li > strong:first-child {
	display: block;
	margin-bottom: 6px;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
	font-weight: 400;
	letter-spacing: -0.015em;
	line-height: 1.2;
}

ol.opal-steps > li.is-done::before {
	color: var(--wp--preset--color--good);
}

ol.opal-steps > li.is-current {
	color: var(--wp--preset--color--contrast);
}

@media (max-width: 39.99em) {
	ol.opal-steps > li {
		padding-left: 46px;
	}
}

/* Checklist with stamps ---------------------------------------------------- */

.wp-block-list.opal-checklist {
	margin-left: 0;
	padding: 4px 22px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--xl);
	background: var(--wp--preset--color--surface);
	list-style: none;
}

.opal-checklist > li {
	position: relative;
	margin: 0;
	padding: 16px 0 16px 34px;
	border-top: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--contrast);
}

.opal-checklist > li:first-child {
	border-top: 0;
}

.opal-checklist > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 20px;
	top: calc(16px + 0.5lh - 9px);
	width: 18px;
	height: 18px;
	border-radius: 6px;
	box-shadow: inset 0 0 0 1px var(--wp--custom--line-strong);
}

.opal-checklist > li::after {
	content: "";
	display: table;
	clear: both;
}

.opal-stamp {
	display: inline-block;
	padding: 0.2em 0.8em;
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px currentColor;
	color: var(--wp--preset--color--warn);
	font-family: var(--wp--custom--label--font);
	font-size: 0.65625rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1.6;
	text-transform: uppercase;
	white-space: nowrap;
}

.opal-checklist .opal-stamp {
	float: right;
	margin: 0.2em 0 0 0.75rem;
}

/* Data strip: large light figures between hairlines. ----------------------- */

ul.opal-datastrip__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--wp--custom--line-strong);
	list-style: none;
}

ul.opal-datastrip__list > li {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	gap: 8px;
	margin: 0;
	padding: 20px 0;
}

ul.opal-datastrip__list > li + li {
	border-top: 1px solid var(--wp--preset--color--line);
}

@media (min-width: 40em) {
	ul.opal-datastrip__list {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
	}

	ul.opal-datastrip__list > li {
		padding: 22px 22px 4px 0;
	}

	ul.opal-datastrip__list > li + li {
		padding-left: 22px;
		border-top: 0;
		border-left: 1px solid var(--wp--preset--color--line);
	}
}

.opal-datastrip__label {
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	line-height: 1.4;
}

.opal-datastrip__value {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 1.55rem + 1.8vw, 2.625rem);
	font-variant-numeric: tabular-nums;
	font-weight: 300;
	letter-spacing: -0.02em;
	line-height: 1;
}

.opal-datastrip > p.opal-source {
	margin-block-start: 14px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.71875rem;
}

/* Our own product: accent-2 wash inside the bezel. ------------------------- */

.wp-block-group.opal-own-cta {
	padding: clamp(1.5rem, 1.1rem + 1.4vw, 1.75rem) clamp(1.375rem, 1rem + 1.6vw, 2rem);
	background: var(--wp--custom--wash);
	color: var(--wp--custom--ink-soft);
}

.wp-block-group.opal-own-cta > * + * {
	margin-block-start: 0.5rem;
}

.wp-block-group.opal-own-cta > .wp-block-buttons {
	margin-block-start: 1.25rem;
}

p.opal-own-tag {
	margin: 0;
	color: var(--wp--custom--wash-ink);
	font-family: var(--wp--custom--label--font);
	font-size: 0.65625rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	line-height: 1.5;
	text-transform: uppercase;
}

p.opal-own-cta__title {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.4375rem, 1.25rem + 0.7vw, 1.625rem);
	font-weight: 400;
	letter-spacing: -0.015em;
	line-height: 1.15;
}

p.opal-own-cta__title strong {
	font-weight: inherit;
}

/* Ranked entry ------------------------------------------------------------- */

.wp-block-group.opal-ranked {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	align-items: start;
	column-gap: 20px;
	padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem) clamp(1.375rem, 0.9rem + 2vw, 2.25rem) clamp(1.375rem, 1rem + 1.4vw, 1.875rem);
}

.wp-block-group.opal-ranked:has(> .opal-ranked__score) {
	grid-template-columns: 64px minmax(0, 1fr) auto;
}

.wp-block-group.opal-ranked > * {
	grid-column: 1 / -1;
	max-width: none;
	margin-inline: 0 !important;
	margin-block: 0;
	color: var(--wp--custom--ink-soft);
}

.wp-block-group.opal-ranked > :not(.opal-ranked__rank, .opal-ranked__name, .opal-ranked__best, .opal-ranked__score) {
	margin-block-start: 1.25rem;
}

.wp-block-group.opal-ranked > .opal-ranked__rank {
	grid-column: 1;
	grid-row: 1 / span 2;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.875rem, 2.3rem + 2.2vw, 4rem);
	font-style: italic;
	font-variant-numeric: lining-nums;
	font-weight: 300;
	line-height: 0.8;
}

/* The first ranked entry in a run gets the accent numeral. */
.opal-ranked:not(.opal-ranked ~ .opal-ranked) > .opal-ranked__rank {
	color: var(--wp--preset--color--accent);
}

.wp-block-group.opal-ranked > .opal-ranked__best {
	grid-column: 2;
	grid-row: 1;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--custom--label--font);
	font-size: 0.6875rem;
	font-weight: var(--wp--custom--label--weight);
	letter-spacing: 0.16em;
	line-height: 1.5;
	text-transform: uppercase;
}

.wp-block-group.opal-ranked > .opal-ranked__name {
	grid-column: 2;
	grid-row: 2;
	margin-block-start: 8px;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.625rem, 1.3rem + 1.3vw, 2.125rem);
	font-weight: 400;
	letter-spacing: -0.022em;
	line-height: 1.05;
}

.wp-block-group.opal-ranked > .opal-ranked__score {
	grid-column: 3;
	grid-row: 1 / span 2;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--mono);
	font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);
	font-variant-numeric: tabular-nums;
	font-weight: 400;
	letter-spacing: -0.03em;
	line-height: 1;
	text-align: right;
	white-space: nowrap;
}

.wp-block-group.opal-ranked .wp-block-columns.opal-proscons {
	margin-block-start: 1.5rem;
}

.wp-block-group.opal-ranked > .wp-block-buttons {
	margin-block-start: 1.5rem;
}

@media (min-width: 40em) {
	.wp-block-group.opal-ranked > :not(.opal-ranked__rank, .opal-ranked__name, .opal-ranked__best, .opal-ranked__score) {
		grid-column: 2 / -1;
	}
}

@media (max-width: 39.99em) {
	.wp-block-group.opal-ranked,
	.wp-block-group.opal-ranked:has(> .opal-ranked__score) {
		grid-template-columns: 44px minmax(0, 1fr);
		column-gap: 14px;
	}

	.wp-block-group.opal-ranked > .opal-ranked__rank {
		grid-row: 1 / span 3;
	}

	.wp-block-group.opal-ranked > .opal-ranked__score {
		grid-column: 2;
		grid-row: 3;
		margin-block-start: 10px;
		text-align: left;
	}
}

/* Comparison matrix (core/table style "opal-matrix") ------------------------ */

.is-style-opal-matrix table {
	min-width: 100%;
	table-layout: auto;
}

.is-style-opal-matrix :is(th, td):not(:first-child) {
	text-align: center;
	white-space: nowrap;
}

.is-style-opal-matrix td:first-child {
	min-width: 9rem;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.1875rem;
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

.is-style-opal-matrix :is(th, td):first-child {
	position: sticky;
	left: 0;
	z-index: 1;
	background: var(--wp--preset--color--surface);
}

.is-style-opal-matrix .opal-yes,
.wp-block-table .opal-yes {
	color: var(--wp--preset--color--good);
}

.is-style-opal-matrix .opal-no,
.wp-block-table .opal-no {
	color: var(--wp--custom--no-mark);
}

/* FAQ (core/details) ------------------------------------------------------- */

details.opal-faq {
	padding: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

:not(details.opal-faq) + details.opal-faq {
	border-top: 1px solid var(--wp--custom--line-strong);
}

.wp-block-post-content > details.opal-faq + details.opal-faq {
	margin-block-start: 0;
}

details.opal-faq > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 44px;
	padding: 22px 0;
	cursor: pointer;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem);
	font-weight: 400;
	letter-spacing: -0.012em;
	line-height: 1.3;
	list-style: none;
}

details.opal-faq > summary::-webkit-details-marker {
	display: none;
}

details.opal-faq > summary::after {
	content: "";
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background:
		linear-gradient(currentColor, currentColor) center / 13px 1.2px no-repeat,
		linear-gradient(currentColor, currentColor) center / 1.2px 13px no-repeat;
	box-shadow: inset 0 0 0 1px var(--wp--custom--line-strong);
	color: var(--wp--custom--ink-soft);
}

details.opal-faq[open] > summary::after {
	transform: rotate(45deg);
}

details.opal-faq > :not(summary) {
	max-width: 62ch;
	margin-block-start: 0;
	margin-block-end: 26px;
	color: var(--wp--custom--ink-soft);
}

details.opal-faq > :not(summary) + :not(summary) {
	margin-block-start: -0.75rem;
}

@media (prefers-reduced-motion: no-preference) {
	details.opal-faq > summary::after {
		transition: transform 0.7s var(--wp--custom--ease);
	}
}

/* Sources ------------------------------------------------------------------ */

.wp-block-list.opal-sources {
	margin-left: 0;
	padding: 0;
	border-top: 1px solid var(--wp--preset--color--line);
	color: var(--wp--custom--ink-soft);
	counter-reset: opal-src;
	font-size: 0.90625rem;
	line-height: 1.55;
	list-style: none;
}

.opal-sources > li {
	position: relative;
	margin: 0;
	padding: 14px 0 14px 40px;
	border-bottom: 1px solid var(--wp--preset--color--line);
	counter-increment: opal-src;
}

.opal-sources > li::before {
	content: counter(opal-src, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 16px;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
}

.opal-sources a {
	overflow-wrap: anywhere;
}

/* Route card --------------------------------------------------------------- */

.wp-block-group.opal-route {
	display: grid;
	row-gap: 0.25rem;
	padding: 18px 22px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--l);
	background: var(--wp--preset--color--surface);
}

.wp-block-group.opal-route > * {
	max-width: none;
	margin-inline: 0 !important;
	margin-block: 0;
}

p.opal-route__codes {
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.2;
	white-space: nowrap;
}

p.opal-route__name {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: 400;
	letter-spacing: -0.012em;
	line-height: 1.25;
}

.wp-block-group.opal-route > :not(.opal-route__codes, .opal-route__name) {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
}

@media (min-width: 40em) {
	.wp-block-group.opal-route {
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		column-gap: 28px;
	}

	.wp-block-group.opal-route > * {
		grid-column: 2;
	}

	.wp-block-group.opal-route > .opal-route__codes {
		grid-column: 1;
		grid-row: 1 / span 3;
	}
}

.wp-block-post-content > .opal-route + .opal-route {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* ==========================================================================
   6. Pattern building blocks
   ========================================================================== */

/* Leaderboard card (homepage hero) */
.wp-block-group.opal-leaderboard {
	padding: 30px 30px 18px;
}

.wp-block-group.opal-leaderboard > * {
	margin-block: 0;
}

.opal-leaderboard__head {
	align-items: baseline !important;
	padding-bottom: 12px;
}

p.opal-leaderboard__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	font-weight: 400;
	letter-spacing: -0.015em;
}

p.opal-leaderboard__tag {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.65625rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.wp-block-group.opal-leaderboard__row {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 18px;
	padding: 18px 2px;
	border-top: 1px solid var(--wp--preset--color--line);
}

.wp-block-group.opal-leaderboard__row > * {
	margin: 0 !important;
}

p.opal-leaderboard__rank {
	grid-row: 1 / span 2;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--display);
	font-size: 2.125rem;
	font-style: italic;
	font-weight: 300;
	line-height: 0.8;
}

.opal-leaderboard__row.is-top p.opal-leaderboard__rank {
	color: var(--wp--preset--color--accent);
}

p.opal-leaderboard__name {
	grid-column: 2;
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

p.opal-leaderboard__best {
	grid-column: 2;
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
}

p.opal-leaderboard__score {
	grid-column: 3;
	grid-row: 1 / span 2;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1.25rem;
	letter-spacing: -0.02em;
	text-align: right;
}

/* Five thin bars, drawn without markup. */
p.opal-leaderboard__score::after {
	content: "";
	display: block;
	width: 118px;
	height: 3px;
	margin: 9px 0 0 auto;
	background: repeating-linear-gradient(90deg, var(--wp--custom--track) 0 calc(20% - 3px), transparent calc(20% - 3px) 20%);
}

.opal-leaderboard__row.is-top p.opal-leaderboard__score::after {
	background: repeating-linear-gradient(90deg, var(--wp--preset--color--accent) 0 calc(20% - 3px), transparent calc(20% - 3px) 20%);
}

.opal-leaderboard__row:not(.is-top) p.opal-leaderboard__score::after {
	background:
		repeating-linear-gradient(90deg, var(--wp--custom--accent-soft) 0 calc(20% - 3px), transparent calc(20% - 3px) 20%) 0 0 / 74% 100% no-repeat,
		repeating-linear-gradient(90deg, var(--wp--custom--track) 0 calc(20% - 3px), transparent calc(20% - 3px) 20%);
}

p.opal-leaderboard__score span {
	margin-left: 2px;
	color: var(--wp--preset--color--muted);
	font-size: 0.55em;
}

.wp-block-group.opal-leaderboard__foot {
	padding-top: 14px;
	border-top: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--muted);
	font-size: 0.78125rem;
}

.opal-leaderboard__foot p:first-child {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.65625rem;
	letter-spacing: 0.04em;
}

.opal-leaderboard__foot a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	color: var(--wp--preset--color--contrast);
	font-size: 0.84375rem;
	text-decoration: none;
}

.opal-leaderboard__foot a::after {
	content: "";
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: var(--opal-icon-arrow) center / contain no-repeat;
	mask: var(--opal-icon-arrow) center / contain no-repeat;
}

@media (max-width: 39.99em) {
	.wp-block-group.opal-leaderboard {
		padding: 22px 18px 14px;
	}

	p.opal-leaderboard__score::after {
		width: 80px;
	}
}

/* Trust lines: hairline above, check icons. */
.wp-block-list.opal-trust {
	display: grid;
	gap: 12px;
	margin-left: 0;
	padding: 28px 0 0;
	border-top: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	list-style: none;
}

.opal-trust > li {
	position: relative;
	margin: 0;
	padding-left: 29px;
}

.opal-trust > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 17px;
	height: 17px;
	background: var(--wp--preset--color--good);
	-webkit-mask: var(--opal-icon-check) center / contain no-repeat;
	mask: var(--opal-icon-check) center / contain no-repeat;
}

/* Route board: routes stacked as one board */
.wp-block-group.opal-board {
	padding: 6px 22px;
	border-radius: var(--wp--custom--radius--l);
	background: var(--wp--preset--color--surface);
	box-shadow: var(--wp--custom--bezel), var(--wp--custom--shadow);
}

.wp-block-group.opal-board > .opal-route {
	margin: 0 !important;
	padding-inline: 0;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--line);
	border-radius: 0;
	background: transparent;
}

.wp-block-group.opal-board > .opal-route:first-child {
	border-top: 0;
}

/* Guide links with a hairline */
.wp-block-group.opal-guide-links > * {
	padding-top: 14px;
	border-top: 1px solid var(--wp--custom--line-strong);
	color: var(--wp--custom--ink-soft);
	font-size: 0.875rem;
}

/* Lookbook item with a 2:3 frame */
.wp-block-group.opal-look {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.wp-block-group.opal-look > * {
	margin: 0 !important;
}

.wp-block-group.opal-look__media {
	position: relative;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--m);
	background: linear-gradient(165deg, color-mix(in srgb, var(--wp--preset--color--accent-2) 30%, var(--wp--preset--color--sunk)) 0%, color-mix(in srgb, var(--wp--preset--color--accent) 35%, var(--wp--preset--color--sunk)) 100%);
}

.opal-look:nth-child(4n+2) .opal-look__media {
	background: linear-gradient(165deg, color-mix(in srgb, var(--wp--preset--color--accent) 30%, var(--wp--preset--color--sunk)), var(--wp--preset--color--sunk));
}

.opal-look:nth-child(4n+3) .opal-look__media {
	background: linear-gradient(165deg, color-mix(in srgb, var(--wp--preset--color--good) 30%, var(--wp--preset--color--sunk)), color-mix(in srgb, var(--wp--preset--color--accent-2) 22%, var(--wp--preset--color--sunk)));
}

.opal-look:nth-child(4n+4) .opal-look__media {
	background: linear-gradient(165deg, color-mix(in srgb, var(--wp--preset--color--accent-2) 40%, var(--wp--preset--color--sunk)), var(--wp--preset--color--sunk));
}

.opal-look__media > .wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
}

.opal-look__media > .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wp-block-group.opal-look > p {
	color: var(--wp--custom--ink-soft);
	font-size: 0.875rem;
}

/* A single tall frame beside a hero headline stays a sensible height. */
.wp-block-column > .wp-block-group.opal-look__media {
	max-width: 26rem;
	margin-inline-start: auto;
	border-radius: var(--wp--custom--radius--xl);
}

/* Side panel with label/value rows (price index) */
.wp-block-group.opal-index {
	padding: clamp(1.5rem, 1.1rem + 1.4vw, 1.875rem);
	border-radius: var(--wp--custom--radius--l);
}

.wp-block-group.opal-index > * + * {
	margin-block-start: 0.75rem;
}

ul.opal-index__list {
	margin: 0;
	padding: 0;
	font-size: 0.875rem;
	list-style: none;
}

ul.opal-index__list > li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	padding: 0.6rem 0;
	border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

ul.opal-index__list > li > span:last-child {
	font-family: var(--wp--preset--font-family--mono);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Postcard hero */
.wp-block-group.opal-postcard {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 18rem;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--xl);
	background:
		linear-gradient(180deg, transparent 20%, color-mix(in srgb, var(--wp--preset--color--contrast) 82%, transparent) 100%),
		linear-gradient(160deg, color-mix(in srgb, var(--wp--preset--color--accent) 45%, var(--wp--preset--color--base)) 0%, var(--wp--preset--color--accent) 100%);
	color: var(--wp--preset--color--surface);
}

.wp-block-group.opal-postcard > * {
	margin-block: 0;
	color: inherit;
}

.wp-block-group.opal-postcard > * + * {
	margin-block-start: 0.6rem;
}

.wp-block-group.opal-postcard :is(p.opal-label, p.opal-eyebrow, h1 em, h2 em) {
	color: inherit;
}

/* Panel card beside heroes */
.wp-block-group.opal-panel {
	padding: clamp(1.5rem, 1.1rem + 1.4vw, 1.875rem);
}

.wp-block-group.opal-panel > * + * {
	margin-block-start: 0.75rem;
}

/* ==========================================================================
   7. Colour bands (dark bands use the muted contrast colour, never black)
   ========================================================================== */

:is(.has-accent-background-color, .has-contrast-background-color, .has-accent-2-background-color) :is(a:not(.wp-element-button), p.opal-label, p.opal-eyebrow, p.opal-lede, p.opal-source, .wp-block-site-title.opal-eyebrow, h1 em, h2 em, h3 em) {
	color: inherit;
}

.wp-block-group.opal-band,
.wp-block-group.opal-brief {
	border-radius: var(--wp--custom--radius--xl);
}

:is(.has-accent-background-color, .has-contrast-background-color, .has-accent-2-background-color) .wp-block-button__link:not(.has-background) {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
}

:is(.has-accent-background-color, .has-contrast-background-color, .has-accent-2-background-color) :focus-visible {
	outline-color: currentColor;
}

/* ==========================================================================
   8. Site chrome
   ========================================================================== */

/* Header: a floating pill inside the content width. */

.wp-block-group.opal-navbar {
	gap: 6px;
	min-height: 58px;
	padding: 7px 7px 7px 22px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--surface) 80%, transparent);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--line), 0 20px 50px -36px color-mix(in srgb, var(--wp--preset--color--contrast) 30%, transparent);
}

.opal-navbar > .wp-block-site-title {
	margin: 0 auto 0 0;
	white-space: nowrap;
}

.opal-navbar .wp-block-navigation {
	color: var(--wp--custom--ink-soft);
	font-size: 0.875rem;
}

.opal-navbar .wp-block-navigation .wp-block-navigation-item__content {
	padding: 12px 14px;
	border-radius: 999px;
}

.opal-navbar .wp-block-navigation .wp-block-navigation-item__content:hover {
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 4%, transparent);
	color: var(--wp--preset--color--contrast);
}

.opal-navbar .wp-block-navigation :is(.current-menu-item, .current_page_item) > a,
.opal-navbar .wp-block-navigation a[aria-current="page"] {
	color: var(--wp--preset--color--contrast);
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--wp--custom--ink-soft);
}

.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--40);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding: 6px 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.875rem;
	font-weight: 300;
	letter-spacing: -0.02em;
}

/* Header search: a quiet pill. */
.wp-block-search.opal-header-search .wp-block-search__inside-wrapper {
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 4%, transparent);
}

.wp-block-search.opal-header-search .wp-block-search__inside-wrapper:focus-within {
	box-shadow: inset 0 0 0 1px var(--wp--custom--line-strong);
}

.wp-block-search.opal-header-search .wp-block-search__inside-wrapper .wp-block-search__input {
	width: 8.5rem;
	min-width: 0;
	min-height: 44px;
	padding: 0 4px 0 16px;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font-size: 0.875rem;
}

.wp-block-search.opal-header-search .wp-block-search__inside-wrapper .wp-block-search__input:focus {
	outline: 0;
}

.wp-block-search.opal-header-search .wp-block-search__button {
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--wp--custom--ink-soft);
}

.wp-block-search .wp-block-search__button svg {
	fill: currentColor;
}

.opal-header-cta .wp-block-button__link {
	min-height: 44px;
	padding-left: 18px;
}

.opal-header-cta .wp-block-button__link::before {
	width: 34px;
	height: 34px;
}

.opal-header-cta .wp-block-button__link::after {
	margin: 0 9.5px 0 -36.5px;
}

@media (max-width: 1079.98px) {
	.opal-header-cta {
		display: none !important;
	}
}

@media (max-width: 781.98px) {
	.opal-header-search {
		display: none !important;
	}
}

@media (max-width: 599.98px) {
	.wp-block-group.opal-navbar {
		padding-left: 18px;
	}
}

/* Generic search form (search template, 404, footer) */
.wp-block-search:not(.opal-header-search) .wp-block-search__inside-wrapper {
	gap: 8px;
	padding: 5px;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	box-shadow: inset 0 0 0 1px var(--wp--custom--line-strong);
}

.wp-block-search:not(.opal-header-search) .wp-block-search__input {
	min-width: 0;
	min-height: 44px;
	padding: 0 16px;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--contrast);
}

.wp-block-search:not(.opal-header-search) .wp-block-search__input:focus {
	outline: 0;
}

.wp-block-search:not(.opal-header-search) .wp-block-search__inside-wrapper:focus-within {
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--accent);
}

.wp-block-search:not(.opal-header-search) .wp-block-search__button {
	min-height: 44px;
	margin: 0;
	padding: 0 18px;
}

/* Footer */

.opal-site-footer {
	margin-block-start: var(--wp--preset--spacing--80);
	border-top: 1px solid var(--wp--preset--color--line);
}

.opal-site-footer .wp-block-site-tagline {
	max-width: 34ch;
	margin-block-start: 1rem;
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
	line-height: 1.65;
}

p.opal-foot-heading {
	margin: 0 0 12px;
	color: var(--wp--preset--color--muted);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.opal-site-footer .wp-block-navigation {
	color: var(--wp--custom--ink-soft);
	font-size: 0.9375rem;
}

.opal-site-footer .wp-block-navigation .wp-block-navigation-item__content {
	padding: 7px 0;
}

.opal-site-footer .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--contrast);
}

.wp-block-site-title.opal-wordmark {
	margin-block-start: var(--wp--preset--spacing--70);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(64px, 11.8vw, 170px);
	font-weight: 300;
	letter-spacing: -0.035em;
	line-height: 0.9;
	overflow-wrap: break-word;
}

@media (min-width: 1100px) {
	.wp-block-site-title.opal-wordmark {
		white-space: nowrap;
	}
}

.wp-block-group.opal-fine {
	margin-block-start: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
}

.opal-fine a {
	color: inherit;
}

p.opal-copyright {
	color: var(--wp--preset--color--muted);
}

/* Home */

.wp-block-group.opal-home-hero {
	padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
}

.wp-block-site-tagline.opal-display {
	margin-block-start: 1.75rem;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--huge);
	font-weight: var(--opal-display-weight, 300);
	letter-spacing: -0.028em;
	line-height: 1.03;
	text-wrap: balance;
}

.opal-home-hero p.opal-lede {
	margin-block-start: 2rem;
}

.opal-home-hero .wp-block-buttons {
	margin-block-start: 2.5rem;
}

h2.opal-section-title {
	margin-block-start: 1.25rem;
}

/* Post cards */

.wp-block-group.opal-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: visible;
}

.wp-block-group.opal-card > * {
	margin: 0 !important;
}

.opal-card .wp-block-post-featured-image {
	overflow: hidden;
	margin: 9px 9px 0 !important;
	border-radius: var(--opal-card-img-radius, 17px);
	background: var(--wp--preset--color--sunk);
}

.opal-card .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	aspect-ratio: var(--wp--custom--card--ratio, 16 / 9);
	object-fit: cover;
}

.wp-block-group.opal-card:not(:has(.wp-block-post-featured-image))::before {
	content: "";
	display: block;
	aspect-ratio: var(--wp--custom--card--ratio, 16 / 9);
	margin: 9px 9px 0;
	border-radius: var(--opal-card-img-radius, 17px);
	background: linear-gradient(160deg, color-mix(in srgb, var(--wp--preset--color--accent) 14%, var(--wp--preset--color--sunk)), var(--wp--preset--color--sunk));
}

.wp-block-group.opal-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 12px;
	padding: 24px 28px 26px;
}

.wp-block-group.opal-card__body > * {
	margin: 0 !important;
}

.wp-block-post-terms.opal-kicker {
	position: relative;
	z-index: 1;
	color: var(--wp--preset--color--muted);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.wp-block-post-terms.opal-kicker a {
	color: inherit;
}

.opal-card .wp-block-post-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.6875rem);
	font-weight: 400;
	letter-spacing: -0.018em;
	line-height: 1.15;
}

/* The title link covers the whole card. */
.opal-card .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.opal-card .wp-block-post-excerpt {
	color: var(--wp--custom--ink-soft);
	font-size: 0.96875rem;
	line-height: 1.6;
}

.opal-card .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.wp-block-post-date.opal-card__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto !important;
	padding-top: 14px;
	color: var(--wp--preset--color--muted);
}

.wp-block-post-date.opal-card__meta time {
	margin-right: auto;
}

.wp-block-post-date.opal-card__meta::before {
	content: "";
	flex: none;
	order: 2;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px var(--wp--custom--line-strong);
}

.wp-block-post-date.opal-card__meta::after {
	content: "";
	flex: none;
	order: 3;
	width: 14px;
	height: 14px;
	margin: 0 11px 0 -37px;
	background: var(--wp--custom--ink-soft);
	-webkit-mask: var(--opal-icon-arrow) center / contain no-repeat;
	mask: var(--opal-icon-arrow) center / contain no-repeat;
}

.wp-block-group.opal-card:focus-within {
	box-shadow: 0 0 0 7px color-mix(in srgb, var(--wp--preset--color--accent) 10%, transparent), 0 0 0 8.5px var(--wp--preset--color--accent), var(--wp--custom--shadow);
}

.opal-card .wp-block-post-title a:focus-visible {
	outline: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-group.opal-card {
		transition: transform 0.9s var(--wp--custom--ease), box-shadow 0.9s var(--wp--custom--ease);
	}

	.wp-block-post-date.opal-card__meta::before,
	.wp-block-post-date.opal-card__meta::after {
		transition: transform 0.8s var(--wp--custom--ease), background-color 0.8s var(--wp--custom--ease);
	}

	.wp-block-group.opal-card:hover {
		transform: translateY(-3px);
		box-shadow: var(--wp--custom--bezel), var(--wp--custom--shadow-hover);
	}

	.opal-card:hover .wp-block-post-date.opal-card__meta::before,
	.opal-card:hover .wp-block-post-date.opal-card__meta::after {
		transform: translateX(3px);
	}
}

.opal-card:hover .wp-block-post-date.opal-card__meta::before {
	background: var(--wp--preset--color--contrast);
}

.opal-card:hover .wp-block-post-date.opal-card__meta::after {
	background: var(--wp--preset--color--surface);
}

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

/* Feature card: image beside the text on wide screens. */
.opal-card--feature .wp-block-post-title {
	font-size: clamp(1.875rem, 1.4rem + 1.8vw, 2.5rem);
	font-weight: 300;
	letter-spacing: -0.025em;
	line-height: 1.08;
}

.opal-card--feature .wp-block-post-featured-image img {
	aspect-ratio: 16 / 10.4;
}

@media (min-width: 782px) {
	.wp-block-group.opal-card--feature {
		display: grid;
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		align-items: stretch;
	}

	.opal-card--feature .wp-block-post-featured-image {
		margin: 9px !important;
	}

	.opal-card--feature .wp-block-post-featured-image img {
		height: 100%;
	}

	.opal-card--feature .wp-block-group.opal-card__body {
		justify-content: center;
		padding: 36px 40px 36px 28px;
	}
}

/* Topics: a hairline list */
.wp-block-categories.opal-topic-list {
	display: grid;
	column-gap: 64px;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	list-style: none;
}

@media (min-width: 782px) {
	.wp-block-categories.opal-topic-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.wp-block-categories.opal-topic-list li {
	margin: 0;
	border-top: 1px solid var(--wp--preset--color--line);
}

.wp-block-categories.opal-topic-list .children {
	display: none;
}

.wp-block-categories.opal-topic-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	min-height: 44px;
	padding: 20px 0;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.4375rem);
	font-weight: 300;
	letter-spacing: -0.015em;
	text-decoration: none;
}

.wp-block-categories.opal-topic-list a::after {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background: var(--wp--preset--color--muted);
	-webkit-mask: var(--opal-icon-arrow) center / contain no-repeat;
	mask: var(--opal-icon-arrow) center / contain no-repeat;
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-categories.opal-topic-list a {
		transition: transform 0.8s var(--wp--custom--ease);
	}

	.wp-block-categories.opal-topic-list a:hover {
		transform: translateX(6px);
	}
}

/* Tag pills */
.wp-block-post-terms.opal-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.wp-block-post-terms.opal-tags a {
	display: inline-block;
	padding: 8px 14px;
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px var(--wp--custom--line-strong);
	color: var(--wp--custom--ink-soft);
	font-size: 0.8125rem;
	line-height: 1.3;
	text-decoration: none;
}

.wp-block-post-terms.opal-tags a:hover {
	color: var(--wp--preset--color--contrast);
}

.wp-block-post-terms.opal-tags .wp-block-post-terms__separator {
	display: none;
}

/* Single post and page */

.wp-block-group.opal-crumbs {
	gap: 10px;
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
}

.opal-crumbs .wp-block-site-title {
	font-family: inherit;
	font-size: inherit;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.opal-crumbs .wp-block-site-title::before,
.opal-crumbs .wp-block-site-title::after,
.opal-crumbs .wp-block-site-title a::before,
.opal-crumbs .wp-block-site-title a::after {
	content: none;
}

.opal-crumbs a,
.opal-crumbs .wp-block-site-title a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.opal-crumbs a:hover {
	color: var(--wp--preset--color--contrast);
}

.opal-crumbs .wp-block-post-terms::before {
	content: "/";
	content: "/" / "";
	margin-right: 10px;
	opacity: 0.5;
}

.wp-block-post-title.opal-article-title,
.wp-block-query-title {
	max-width: 17ch;
	margin-block-start: 1.75rem;
	font-weight: var(--opal-display-weight, 300);
}

.wp-block-post-excerpt.opal-dek {
	max-width: 54ch;
	margin-block-start: 1.75rem;
	color: var(--wp--custom--ink-soft);
	font-size: clamp(1.125rem, 1.02rem + 0.45vw, 1.25rem);
	font-weight: 300;
	line-height: 1.6;
}

.wp-block-post-excerpt.opal-dek .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.wp-block-group.opal-byline-row {
	gap: 14px 28px;
	margin-block-start: 2.5rem;
	padding-top: 26px;
	border-top: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
}

.opal-byline-row .wp-block-post-author {
	align-items: center;
}

.opal-byline-row .wp-block-post-author__avatar {
	margin-right: 12px;
}

.opal-byline-row .wp-block-post-author__avatar img,
.opal-author-box .wp-block-avatar img {
	border-radius: 50%;
}

.opal-byline-row .wp-block-post-author__byline {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
}

.opal-byline-row .wp-block-post-author__name {
	margin: 0;
	color: var(--wp--preset--color--contrast);
	font-size: 0.90625rem;
	font-weight: 500;
}

.opal-byline-row .wp-block-post-date {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.opal-byline-row .wp-block-post-date::before {
	content: "";
	flex: none;
	width: 15px;
	height: 15px;
	background: currentColor;
	-webkit-mask: var(--opal-icon-clock) center / contain no-repeat;
	mask: var(--opal-icon-clock) center / contain no-repeat;
}

.opal-updated__label {
	margin-right: 0.25em;
}

.wp-block-post-featured-image.opal-single-image {
	overflow: hidden;
	border-radius: var(--wp--custom--radius--xl);
	background: var(--wp--preset--color--sunk);
}

/* The cover is shown whole (16:9, the shape it is made in), so a head is never cut off; if a different shape is uploaded,
   the crop keeps the top of the picture, where faces are. */
.wp-block-post-featured-image.opal-single-image img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: 50% 22%;
}

@media (max-width: 719.98px) {
	.wp-block-post-featured-image.opal-single-image {
		border-radius: var(--wp--custom--radius--l);
	}
}

.wp-block-group.opal-author-box {
	gap: 20px;
	margin-block-start: var(--wp--preset--spacing--60);
	padding: 30px 0;
	border-top: 1px solid var(--wp--custom--line-strong);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.opal-author-box .wp-block-post-author-name {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	font-weight: 400;
	letter-spacing: -0.012em;
}

.opal-author-box .wp-block-post-author-name a {
	color: inherit;
	text-decoration: none;
}

.opal-author-box .wp-block-post-author-name a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.opal-author-box .wp-block-post-author-biography {
	margin-block-start: 0.5rem;
	color: var(--wp--custom--ink-soft);
	font-size: 0.96875rem;
	line-height: 1.65;
}

/* Related posts: a hairline three-column list */
.wp-block-query.opal-related .wp-block-post-template {
	gap: 0;
	margin-block-start: 2.25rem;
	border-top: 1px solid var(--wp--custom--line-strong);
}

.wp-block-query.opal-related .wp-block-post {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 26px 0 30px;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.wp-block-query.opal-related .wp-block-post > * {
	margin: 0;
}

.wp-block-query.opal-related .wp-block-post-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5625rem);
	font-weight: 400;
	letter-spacing: -0.015em;
	line-height: 1.2;
}

.wp-block-query.opal-related .wp-block-post-title a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

@media (min-width: 782px) {
	.wp-block-query.opal-related .wp-block-post {
		padding-right: 32px;
	}

	.wp-block-query.opal-related .wp-block-post + .wp-block-post {
		padding-left: 32px;
		border-left: 1px solid var(--wp--preset--color--line);
	}
}

.wp-block-query.opal-related:not(:has(.wp-block-post)) {
	display: none;
}

/* Article rail (wide screens): a contents list, a card from the publisher and related guides sit beside the text and
   follow the reader down the page. Under 1100px the rail is not shown: the text takes the page and "More guides" follows it. */
.opal-rail {
	display: none;
}

.wp-block-post-content h2[id] {
	scroll-margin-top: 28px;
}

@media (min-width: 1100px) {
	.opal-article-shell {
		display: grid;
		grid-template-columns: minmax(0, 760px) minmax(250px, 300px);
		column-gap: clamp(40px, 5vw, 72px);
		align-items: stretch;
	}

	.opal-article-shell > * {
		margin-block: 0;
	}

	/* The rail is as tall as the article, so the first block can follow the reader down while the related guides wait at the end. */
	.opal-rail {
		display: flex;
		flex-direction: column;
		gap: 40px;
		justify-content: space-between;
	}

	.opal-rail > * {
		margin: 0;
	}

	.opal-rail .opal-rail__inner {
		position: sticky;
		top: 28px;
		display: grid;
		gap: 28px;
		padding-block-start: 0.5rem;
	}

	.opal-rail .opal-rail__inner > * {
		margin: 0;
	}
}

.opal-toc ul {
	max-height: 44vh;
	margin: 0.75rem 0 0;
	padding: 0;
	border-inline-start: 1px solid var(--wp--preset--color--line);
	list-style: none;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

.opal-toc li {
	margin: 0;
	padding: 0;
}

.opal-toc a {
	display: block;
	margin-inline-start: -1px;
	padding: 0.4rem 0 0.4rem 0.9rem;
	border-inline-start: 1px solid transparent;
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	line-height: 1.35;
	text-decoration: none;
}

.opal-toc a:hover,
.opal-toc a:focus-visible {
	border-inline-start-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

.opal-rail-promo {
	padding: 20px 20px 22px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--xl);
	background: var(--wp--preset--color--surface);
}

.opal-rail-promo:empty {
	display: none;
}

.opal-rail-promo > * {
	margin: 0;
}

.opal-rail-promo > * + * {
	margin-block-start: 0.6rem;
}

.opal-rail-promo h3 {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.375rem;
	font-weight: 400;
	letter-spacing: -0.015em;
	line-height: 1.2;
}

.opal-rail-promo p:not(.opal-label) {
	color: var(--wp--custom--ink-soft);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.opal-rail-promo .wp-block-button__link {
	padding: 0.6rem 1.1rem;
	font-size: 0.875rem;
}

.wp-block-query.opal-related--rail .wp-block-post-template {
	margin-block-start: 0.5rem;
	border-top: 0;
}

.wp-block-query.opal-related.opal-related--rail .wp-block-post,
.wp-block-query.opal-related.opal-related--rail .wp-block-post + .wp-block-post {
	gap: 4px;
	padding: 12px 0;
	border-left: 0;
}

.wp-block-query.opal-related.opal-related--rail .wp-block-post-title {
	font-size: 1.0625rem;
	line-height: 1.3;
}

.wp-block-query.opal-related--rail .wp-block-post-date {
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
}

/* Archive heading */
.wp-block-term-description {
	max-width: 54ch;
	color: var(--wp--custom--ink-soft);
	font-weight: 300;
}

/* Pagination */
.wp-block-query-pagination {
	gap: 8px;
	margin-block-start: var(--wp--preset--spacing--60);
	font-size: 0.875rem;
}

.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-width: 44px;
	min-height: 44px;
	padding: 0 16px;
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px var(--wp--custom--line-strong);
	color: var(--wp--custom--ink-soft);
	text-decoration: none;
}

.wp-block-query-pagination .page-numbers.current {
	background: var(--wp--preset--color--contrast);
	box-shadow: none;
	color: var(--wp--preset--color--surface);
}

.wp-block-query-pagination .page-numbers.dots {
	box-shadow: none;
}

/* ==========================================================================
   8b. Front page: ticker, hero layouts, lead story, numbered list, chips
   Markup comes from tools/home.mjs. Each variation sets the tokens below
   and picks a hero layout class (opal-hero--stack, split, cover, arch,
   postcard, brutal). Sections with no posts yet hide themselves.
   ========================================================================== */

/* Defaults on :root so a variation's own tokens (on html body) always win, whatever the load order. */
:root {
	--opal-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--opal-card-img-radius: max(0px, calc(var(--wp--custom--radius--l) - 6px));
	--opal-hero-size: var(--wp--preset--font-size--huge);
	--opal-hero-measure: 15ch;
	--opal-hero-focus: 50% 50%;
	--opal-mark-bg: transparent;
	--opal-mark-h: 0.3em;
	--opal-mark-pos: 0 90%;
	--opal-badge-bg: color-mix(in srgb, var(--wp--preset--color--accent) 11%, transparent);
	--opal-badge-ink: var(--wp--preset--color--accent);
	--opal-badge-radius: 999px;
	--opal-num-color: var(--wp--preset--color--accent);
	--opal-ticker-bg: var(--wp--preset--color--contrast);
	--opal-ticker-ink: var(--wp--preset--color--base);
	--opal-ticker-label-bg: var(--wp--preset--color--accent);
	--opal-ticker-label-ink: var(--wp--preset--color--accent-contrast);
	--opal-cover-ink: var(--wp--preset--color--base);
	--opal-cover-shade: color-mix(in srgb, var(--wp--preset--color--contrast) 88%, transparent);
	--opal-chip-radius: 999px;
}

/* Sections that have nothing to show yet */
.opal-home .opal-ticker:not(:has(.wp-block-post)),
.opal-home .opal-front:not(:has(.wp-block-post)),
.opal-home .opal-list:not(:has(.wp-block-post)),
.opal-home .opal-latest:not(:has(.wp-block-post)),
.opal-home .opal-topics:not(:has(.cat-item a)) {
	display: none;
}

/* Ticker: the newest titles running in a band under the header. */

.wp-block-group.opal-ticker {
	display: flex;
	align-items: stretch;
	min-height: 46px;
	overflow: hidden;
	background: var(--opal-ticker-bg);
	color: var(--opal-ticker-ink);
	font-size: 0.875rem;
}

.opal-home > .opal-ticker:first-child {
	margin-block-start: var(--wp--preset--spacing--30);
}

p.opal-ticker__label {
	position: relative;
	z-index: 1;
	display: flex;
	flex: none;
	align-items: center;
	gap: 9px;
	margin: 0;
	padding: 0 20px 0 max(18px, var(--wp--style--root--padding-left));
	background: var(--opal-ticker-label-bg);
	color: var(--opal-ticker-label-ink);
	font-family: var(--wp--custom--label--font);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

p.opal-ticker__label::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

.opal-ticker .wp-block-query.opal-ticker__run {
	flex: 1;
	min-width: 0;
	margin: 0;
	overflow: hidden;
}

.opal-ticker .wp-block-post-template {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	width: max-content;
	min-height: 46px;
	margin: 0;
	padding: 0 0 0 1.5rem;
}

.opal-ticker .wp-block-post {
	display: flex;
	align-items: center;
	margin: 0;
	white-space: nowrap;
}

.opal-ticker .wp-block-post + .wp-block-post::before {
	content: "/";
	content: "/" / "";
	margin: 0 1.25rem;
	opacity: 0.45;
}

.opal-ticker .wp-block-post-title {
	margin: 0;
	color: inherit;
	font-family: var(--wp--preset--font-family--body);
	font-size: inherit;
	font-style: normal;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.2;
	text-transform: none;
}

.opal-ticker .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.opal-ticker .wp-block-post-title a:hover,
.opal-ticker .wp-block-post-title a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
	.opal-ticker .wp-block-post-template {
		padding-left: 100%;
		animation: opal-marquee var(--opal-ticker-speed, 48s) linear infinite;
	}

	.opal-ticker:is(:hover, :focus-within) .wp-block-post-template {
		animation-play-state: paused;
	}

	p.opal-ticker__label::before {
		animation: opal-pulse 2.4s var(--opal-ease-out) infinite;
	}
}

@media (prefers-reduced-motion: reduce) {
	.opal-ticker .wp-block-query.opal-ticker__run {
		overflow-x: auto;
	}
}

/* Hero: shared parts */

.opal-home .wp-block-group.opal-home-hero {
	position: relative;
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
}

.opal-home .opal-ticker + .opal-home-hero {
	margin-block-start: 0;
}

.wp-block-group.opal-home-hero__copy > * {
	margin-block: 0;
}

.opal-home-hero__copy > .opal-hero-title,
.opal-home-hero__copy > .opal-display {
	margin-block-start: 1.25rem;
}

.opal-home-hero__copy > p.opal-lede {
	margin-block-start: 1.5rem;
}

.opal-home-hero__copy > .wp-block-buttons {
	margin-block-start: 2.25rem;
}

h1.opal-hero-title,
.opal-home-hero .wp-block-site-tagline.opal-display {
	max-width: var(--opal-hero-measure);
	font-size: var(--opal-hero-size);
	text-wrap: balance;
}

.opal-home-hero .wp-block-site-tagline.opal-display {
	font-weight: var(--opal-display-weight, inherit);
}

figure.opal-home-image {
	position: relative;
	margin: 0;
}

figure.opal-home-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--xl);
	object-fit: cover;
	object-position: var(--opal-hero-focus);
}

figure.opal-home-image figcaption {
	margin: 0;
}

/* Highlighter: <mark class="opal-mark"> in a headline */
mark.opal-mark {
	padding: 0 0.04em;
	margin: 0 -0.04em;
	background-color: transparent;
	background-image: linear-gradient(var(--opal-mark-bg), var(--opal-mark-bg));
	background-position: var(--opal-mark-pos);
	background-repeat: no-repeat;
	background-size: 100% var(--opal-mark-h);
	color: var(--opal-mark-ink, inherit);
	font-style: var(--opal-mark-style, inherit);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* Stack: copy, then a wide image */
.opal-hero--stack .opal-home-image {
	margin-block-start: var(--wp--preset--spacing--60);
}

.opal-hero--stack .opal-home-image img {
	aspect-ratio: 12 / 5;
}

/* Side-by-side layouts on wide screens */
@media (min-width: 900px) {
	.opal-home .wp-block-group.opal-home-hero.has-image:is(.opal-hero--split, .opal-hero--arch, .opal-hero--postcard, .opal-hero--brutal) {
		display: grid;
		grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
		align-items: center;
		column-gap: clamp(36px, 5vw, 88px);
	}

	.opal-home-hero.has-image:is(.opal-hero--split, .opal-hero--arch, .opal-hero--postcard, .opal-hero--brutal) > * {
		margin: 0;
	}
}

@media (max-width: 899.98px) {
	.opal-home-hero.has-image:not(.opal-hero--stack, .opal-hero--cover) .opal-home-image {
		margin-block-start: var(--wp--preset--spacing--60);
	}
}

.opal-hero--split .opal-home-image img {
	aspect-ratio: 1 / 1;
	border-radius: var(--wp--custom--radius--xl);
}

/* Arch: a tall window with a round top and a fine frame */
.opal-hero--arch .opal-home-image {
	width: min(100%, 470px);
	justify-self: center;
}

.opal-hero--arch .opal-home-image img {
	aspect-ratio: 4 / 5;
	border-radius: 50% 50% var(--wp--custom--radius--s) var(--wp--custom--radius--s) / 40% 40% var(--wp--custom--radius--s) var(--wp--custom--radius--s);
	outline: 1px solid var(--wp--preset--color--pop, var(--wp--preset--color--accent-2));
	outline-offset: 12px;
}

/* Postcard: framed, a little tilted, with a handwritten note */
.opal-hero--postcard .opal-home-image {
	padding: 12px 12px 44px;
	background: var(--wp--preset--color--surface);
	box-shadow: 0 2px 3px color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent), 0 34px 60px -36px color-mix(in srgb, var(--wp--preset--color--contrast) 45%, transparent);
	transform: rotate(-2.2deg);
}

.opal-hero--postcard .opal-home-image img {
	aspect-ratio: 5 / 4;
	border-radius: 2px;
}

.opal-hero--postcard .opal-home-image figcaption {
	position: absolute;
	right: 22px;
	bottom: 6px;
	color: var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--hand, var(--wp--preset--font-family--display));
	font-size: 1.625rem;
	line-height: 1.2;
	transform: rotate(-1.5deg);
}

/* Brutal: a hard-edged box with an offset shadow and a sticker */
.opal-hero--brutal .opal-home-image img {
	aspect-ratio: 4 / 3.4;
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	box-shadow: 12px 12px 0 var(--wp--preset--color--contrast);
}

.opal-hero--brutal .opal-home-image figcaption {
	position: absolute;
	top: -16px;
	left: -10px;
	padding: 8px 14px;
	border: 2px solid var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--pop, var(--wp--preset--color--accent));
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.9375rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	transform: rotate(-3deg);
}

/* Split and arch captions: a small tag on the image */
:is(.opal-hero--split, .opal-hero--stack) .opal-home-image figcaption {
	position: absolute;
	left: 18px;
	bottom: 18px;
	padding: 9px 14px;
	border-radius: var(--opal-badge-radius);
	background: var(--wp--preset--color--pop, var(--wp--preset--color--surface));
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--custom--label--font);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.opal-hero--arch .opal-home-image figcaption {
	margin-top: 26px;
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	letter-spacing: 0.16em;
	text-align: center;
	text-transform: uppercase;
}

/* Cover: the image fills the hero and the copy sits on it */
.opal-home .wp-block-group.opal-hero--cover {
	display: grid;
	align-items: end;
	min-height: clamp(560px, 86vh, 900px);
	padding: 0;
	overflow: hidden;
	isolation: isolate;
	color: var(--opal-cover-ink);
}

.opal-home .wp-block-group.opal-hero--cover:not(.has-image) {
	min-height: 0;
	color: inherit;
}

.opal-hero--cover .opal-home-image {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}

.opal-hero--cover .opal-home-image img {
	width: 100%;
	height: 100%;
	border-radius: 0;
}

.opal-hero--cover .opal-home-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, var(--opal-cover-shade) 0%, color-mix(in srgb, var(--opal-cover-shade) 72%, transparent) 34%, transparent 72%),
		linear-gradient(90deg, color-mix(in srgb, var(--opal-cover-shade) 70%, transparent) 0%, transparent 62%);
}

.opal-hero--cover .opal-home-image figcaption {
	display: none;
}

/* On phones the copy fills most of the picture: shade more of it. */
@media (max-width: 899.98px) {
	.opal-hero--cover .opal-home-image::after {
		background: linear-gradient(to top, var(--opal-cover-shade) 0%, color-mix(in srgb, var(--opal-cover-shade) 82%, transparent) 50%, color-mix(in srgb, var(--opal-cover-shade) 35%, transparent) 100%);
	}
}

.opal-hero--cover .wp-block-group.opal-home-hero__copy {
	width: min(100% - var(--wp--style--root--padding-left) - var(--wp--style--root--padding-right), var(--wp--style--global--wide-size));
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--80) clamp(48px, 9vh, 104px);
}

.opal-hero--cover.has-image :is(h1.opal-hero-title, .opal-display, p.opal-lede, .wp-block-site-title.opal-eyebrow) {
	color: var(--opal-cover-ink);
}

.opal-hero--cover.has-image p.opal-lede {
	color: color-mix(in srgb, var(--opal-cover-ink) 86%, transparent);
}

.opal-hero--cover.has-image .is-style-outline > .wp-block-button__link {
	color: var(--opal-cover-ink);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--opal-cover-ink) 55%, transparent);
}

.opal-hero--cover.has-image .is-style-outline > .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--opal-cover-ink) 12%, transparent);
	color: var(--opal-cover-ink);
}

/* Front: the lead story beside a numbered list */

@media (min-width: 1000px) {
	.opal-home .wp-block-group.opal-front {
		display: grid;
		grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
		align-items: start;
		column-gap: clamp(32px, 4vw, 64px);
	}

	.opal-home .opal-front > * {
		margin: 0;
	}
}

@media (max-width: 999.98px) {
	.opal-home .opal-front > .opal-list {
		margin-block-start: var(--wp--preset--spacing--60);
	}
}

/* Card titles follow the variation's headline weight. */
.opal-card .wp-block-post-title,
.opal-card--lead .wp-block-post-title {
	font-weight: var(--opal-title-weight, 400);
}

.opal-card--lead .wp-block-post-featured-image img {
	aspect-ratio: 16 / 10;
}

.opal-card--lead .wp-block-post-title {
	font-size: clamp(1.75rem, 1.25rem + 1.6vw, 2.5rem);
	line-height: 1.04;
}

.opal-card--lead .wp-block-post-excerpt {
	font-size: 1.0625rem;
}

/* Overlay lead: the title sits on the picture */
.opal-front--overlay .opal-card--lead {
	overflow: hidden;
	background: var(--wp--preset--color--contrast);
}

.opal-front--overlay .opal-card--lead .wp-block-post-featured-image {
	margin: 0 !important;
	border-radius: 0;
}

.opal-front--overlay .opal-card--lead .wp-block-post-featured-image img {
	aspect-ratio: 4 / 3;
}

.opal-front--overlay .opal-card--lead .wp-block-group.opal-card__body {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 34% 32px 30px;
	background: linear-gradient(to top, var(--opal-cover-shade) 0%, color-mix(in srgb, var(--opal-cover-shade) 70%, transparent) 55%, transparent 100%);
	color: var(--opal-cover-ink);
	pointer-events: none;
}

.opal-front--overlay .opal-card--lead :is(.wp-block-post-title, .wp-block-post-title a, .wp-block-post-excerpt, .opal-card__meta) {
	color: var(--opal-cover-ink);
}

.opal-front--overlay .opal-card--lead .opal-card__body a {
	pointer-events: auto;
}

.opal-front--overlay .opal-card--lead .wp-block-post-date.opal-card__meta::before {
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--opal-cover-ink) 50%, transparent);
}

.opal-front--overlay .opal-card--lead .wp-block-post-date.opal-card__meta::after {
	background: var(--opal-cover-ink);
}

/* Numbered list */
.wp-block-post-template.opal-numbered {
	counter-reset: opal-rank;
	display: flex;
	flex-direction: column;
	margin: 1.25rem 0 0;
	padding: 0;
	border-top: 1px solid var(--wp--custom--line-strong);
}

.opal-numbered > .wp-block-post {
	position: relative;
	counter-increment: opal-rank;
	display: grid;
	grid-template-columns: 3.4rem minmax(0, 1fr);
	column-gap: 14px;
	row-gap: 6px;
	margin: 0;
	padding: 20px 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.opal-numbered > .wp-block-post::before {
	content: counter(opal-rank);
	grid-row: 1 / span 3;
	color: var(--opal-num-color);
	font-family: var(--wp--preset--font-family--display);
	font-size: 2.75rem;
	font-variant-numeric: lining-nums tabular-nums;
	font-weight: var(--opal-num-weight, 700);
	letter-spacing: -0.04em;
	line-height: 0.92;
}

.opal-numbered > .wp-block-post > * {
	grid-column: 2;
	margin: 0;
}

.opal-numbered .wp-block-post-title {
	font-size: clamp(1.125rem, 1rem + 0.45vw, 1.3125rem);
	line-height: 1.24;
}

.opal-numbered .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
}

.opal-numbered .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.wp-block-post-date.opal-list__meta {
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
}

/* Category badges on the front page */
.opal-home .wp-block-post-terms.opal-kicker {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
}

.opal-home .wp-block-post-terms.opal-kicker a {
	display: inline-block;
	padding: 5px 10px 4px;
	border-radius: var(--opal-badge-radius);
	background: var(--opal-badge-bg);
	color: var(--opal-badge-ink);
	text-decoration: none;
}

.opal-home .opal-numbered .wp-block-post-terms.opal-kicker a {
	position: relative;
	z-index: 1;
	padding: 0;
	background: none;
}

/* Card titles: an underline that draws in on hover */
.opal-card .wp-block-post-title a,
.opal-numbered .wp-block-post-title a {
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0% 0.075em;
	text-decoration: none;
}

.opal-card:is(:hover, :focus-within) .wp-block-post-title a,
.opal-numbered > .wp-block-post:is(:hover, :focus-within) .wp-block-post-title a {
	background-size: 100% 0.075em;
}

/* Topic chips */
.wp-block-categories.opal-topic-list.opal-topic-list--chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	border-bottom: 0;
}

.wp-block-categories.opal-topic-list--chips li {
	border-top: 0;
}

.wp-block-categories.opal-topic-list--chips a {
	gap: 12px;
	padding: 12px 18px 12px 20px;
	border-radius: var(--opal-chip-radius);
	box-shadow: inset 0 0 0 1px var(--wp--custom--line-strong);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.96875rem;
	font-weight: 500;
	letter-spacing: 0;
}

.wp-block-categories.opal-topic-list--chips a::after {
	width: 14px;
	height: 14px;
	background: currentColor;
}

.wp-block-categories.opal-topic-list--chips a:hover,
.wp-block-categories.opal-topic-list--chips a:focus-visible {
	background: var(--wp--preset--color--contrast);
	box-shadow: none;
	color: var(--wp--preset--color--base);
	transform: none;
}

/* Motion: entrance, highlighter, image zoom, scroll reveal */
@media (prefers-reduced-motion: no-preference) {
	.opal-home-hero__copy > * {
		animation: opal-enter 0.9s var(--opal-ease-out) both;
	}

	.opal-home-hero__copy > :nth-child(2) {
		animation-delay: 0.08s;
	}

	.opal-home-hero__copy > :nth-child(3) {
		animation-delay: 0.16s;
	}

	.opal-home-hero__copy > :nth-child(4) {
		animation-delay: 0.24s;
	}

	/* The headline and the picture are the largest paints: they move in but never start invisible. */
	.opal-home-hero__copy > .opal-hero-title {
		animation-name: opal-lift;
	}

	.opal-home-hero:not(.opal-hero--cover) .opal-home-image {
		animation: opal-lift-image 1.1s 0.12s var(--opal-ease-out) both;
	}

	.opal-hero--cover .opal-home-image img {
		animation: opal-settle 2.8s var(--opal-ease-out) both;
	}

	.opal-home-hero mark.opal-mark {
		animation: opal-mark-in 1.1s 0.6s var(--opal-ease-out) both;
	}

	.opal-card .wp-block-post-featured-image img {
		transition: transform 1.2s var(--opal-ease-out);
	}

	.opal-card:is(:hover, :focus-within) .wp-block-post-featured-image img {
		transform: scale(1.045);
	}

	.opal-card .wp-block-post-title a,
	.opal-numbered .wp-block-post-title a {
		transition: background-size 0.6s var(--opal-ease-out);
	}

	.opal-numbered > .wp-block-post::before {
		transition: transform 0.6s var(--opal-ease-out);
	}

	.opal-numbered > .wp-block-post:hover::before {
		transform: translateX(4px);
	}

	.wp-block-categories.opal-topic-list--chips a {
		transition: background-color 0.4s var(--opal-ease-out), color 0.4s var(--opal-ease-out);
	}

	@supports (animation-timeline: view()) {
		.opal-home :is(.opal-lead .wp-block-post, .opal-numbered > .wp-block-post, .opal-latest .wp-block-post, .opal-topics) {
			animation: opal-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 70%;
		}
	}
}

@keyframes opal-marquee {
	to {
		transform: translateX(-100%);
	}
}

@keyframes opal-pulse {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.35;
	}
}

@keyframes opal-enter {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
}

@keyframes opal-lift {
	from {
		transform: translateY(16px);
	}
}

@keyframes opal-lift-image {
	from {
		transform: translateY(28px);
	}
}

@keyframes opal-settle {
	from {
		transform: scale(1.08);
	}
}

@keyframes opal-mark-in {
	from {
		background-size: 0% var(--opal-mark-h);
	}
}

@keyframes opal-rise {
	from {
		opacity: 0;
		transform: translateY(36px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   9. Motion and print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

@media print {
	.opal-ad,
	.opal-header-search,
	.opal-header-cta,
	.wp-block-query.opal-related {
		display: none !important;
	}
}