/* ==========================================================================
   Colitco theme — foundation
   Design tokens ported from the React prototype (Colitco Navy + Teal).
   ========================================================================== */

:root {
	--radius: 0.7rem;

	--background: oklch(0.982 0.004 230);
	--foreground: oklch(0.245 0.035 248);
	--card: oklch(1 0 0);
	--card-foreground: oklch(0.245 0.035 248);
	--popover: oklch(1 0 0);
	--popover-foreground: oklch(0.245 0.035 248);
	--primary: oklch(0.205 0.04 245);
	--primary-foreground: oklch(0.99 0 0);
	--secondary: oklch(0.965 0.006 235);
	--secondary-foreground: oklch(0.44 0.035 245);
	--muted: oklch(0.965 0.006 235);
	--muted-foreground: oklch(0.55 0.035 245);
	--accent: oklch(0.58 0.105 192);
	--accent-foreground: oklch(0.99 0 0);
	--destructive: oklch(0.577 0.245 27);
	--destructive-foreground: oklch(0.99 0 0);
	--border: oklch(0.925 0.012 235);
	--input: oklch(0.925 0.012 235);
	--ring: oklch(0.58 0.105 192);
	--positive: oklch(0.63 0.19 145);
	--negative: oklch(0.58 0.22 27);
	--premium: oklch(0.73 0.14 78);

	--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-editorial: "DM Serif Display", Georgia, "Times New Roman", serif;

	--shell-max: 1440px;
	--shell-gutter: 1rem;
}

/* Fallback for browsers without oklch() support. */
@supports not (color: oklch(0 0 0)) {
	:root {
		--background: #f7f9fb;
		--foreground: #1f2b3a;
		--card: #ffffff;
		--card-foreground: #1f2b3a;
		--popover: #ffffff;
		--popover-foreground: #1f2b3a;
		--primary: #16212f;
		--primary-foreground: #fcfcfc;
		--secondary: #f1f4f7;
		--secondary-foreground: #5b6b7d;
		--muted: #f1f4f7;
		--muted-foreground: #74838f;
		--accent: #2f8f9d;
		--accent-foreground: #fcfcfc;
		--destructive: #d93025;
		--border: #e3e8ee;
		--input: #e3e8ee;
		--ring: #2f8f9d;
		--positive: #1a8f4c;
		--negative: #d33a2c;
		--premium: #c89a3c;
	}
}

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

*,
*::before,
*::after {
	box-sizing: border-box;
	border-color: var(--border);
}

html {
	max-width: 100%;
	overflow-x: hidden;
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	max-width: 100%;
	overflow-x: hidden;
	background: var(--background);
	color: var(--foreground);
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0;
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: inherit;
	cursor: pointer;
	text-decoration: none;
}

a:hover {
	color: var(--accent);
}

button {
	cursor: pointer;
	font: inherit;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-weight: 700;
	line-height: 1.2;
}

p {
	margin: 0;
}

ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

:focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: 2px;
}

:where(table) {
	border-collapse: collapse;
	width: 100%;
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.shell {
	width: min(calc(100% - 2rem), var(--shell-max));
	margin-inline: auto;
}

.panel {
	min-width: 0;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--card);
	box-shadow: 0 2px 10px color-mix(in oklab, var(--primary) 3%, transparent);
}

.section-label {
	font-size: 0.68rem;
	line-height: 1rem;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--foreground);
	margin: 0;
}

.eyebrow {
	display: inline-block;
	font-size: 0.65rem;
	line-height: 1rem;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--accent);
}

.font-editorial {
	font-family: var(--font-editorial);
	font-weight: 400;
}

.tabular {
	font-variant-numeric: tabular-nums;
}

.no-scrollbar {
	scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
	display: none;
}

.screen-reader-text,
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -100%;
	left: 1rem;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--primary);
	color: var(--primary-foreground);
	border-radius: var(--radius);
	font-size: 0.8rem;
	font-weight: 600;
}

.skip-link:focus {
	top: 1rem;
	color: var(--primary-foreground);
}

.text-positive { color: var(--positive); }
.text-negative { color: var(--negative); }
.text-muted    { color: var(--muted-foreground); }
.text-accent   { color: var(--accent); }

.stack > * + * {
	margin-top: var(--stack-gap, 2rem);
}

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

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0 1rem;
	border: 1px solid transparent;
	border-radius: calc(var(--radius) - 2px);
	background: var(--primary);
	color: var(--primary-foreground);
	font-size: 0.8125rem;
	font-weight: 600;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn:hover {
	background: color-mix(in oklab, var(--primary) 90%, white);
	color: var(--primary-foreground);
}

.btn--outline {
	background: transparent;
	border-color: var(--border);
	color: var(--foreground);
}

.btn--outline:hover {
	background: var(--secondary);
	border-color: var(--accent);
	color: var(--accent);
}

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

.btn--ghost:hover {
	background: var(--secondary);
	color: var(--accent);
}

.btn--accent {
	background: var(--accent);
	color: var(--accent-foreground);
}

.btn--accent:hover {
	background: color-mix(in oklab, var(--accent) 90%, black);
	color: var(--accent-foreground);
}

.btn--icon {
	width: 2.75rem;
	min-height: 2.75rem;
	padding: 0;
}

.btn--sm {
	min-height: 2.25rem;
	padding: 0 0.75rem;
	font-size: 0.75rem;
}

.btn .icon {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
select {
	width: 100%;
	min-height: 2.75rem;
	padding: 0 0.75rem;
	border: 1px solid var(--input);
	border-radius: calc(var(--radius) - 2px);
	background: var(--card);
	color: var(--foreground);
	font: inherit;
	font-size: 0.875rem;
}

textarea {
	padding: 0.75rem;
	min-height: 8rem;
	resize: vertical;
}

input::placeholder,
textarea::placeholder {
	color: var(--muted-foreground);
}

label {
	font-size: 0.75rem;
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Market ticker
   -------------------------------------------------------------------------- */

.ticker {
	border-bottom: 1px solid var(--border);
	background: var(--background);
}

.ticker__inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 1.5rem;
	height: 2.25rem;
}

.ticker__quotes {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 1.5rem;
	min-width: 0;
	overflow-x: auto;
}

@media (min-width: 768px) {
	.ticker__quotes {
		justify-content: flex-end;
	}
}

.ticker__quote {
	display: flex;
	flex-shrink: 0;
	align-items: baseline;
	gap: 0.375rem;
	padding: 0.125rem 0.25rem;
	border-radius: 0.25rem;
	font-size: 0.625rem;
	transition: background-color 0.15s ease;
}

.ticker__quote:hover {
	background: var(--secondary);
	color: inherit;
}

.ticker__quote + .ticker__quote::before {
	content: "";
	margin-right: 1rem;
	height: 0.75rem;
	width: 1px;
	background: var(--border);
}

.ticker__quote b {
	font-weight: 700;
}

/* Edition selector */

.edition {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.6875rem;
	font-weight: 600;
}

.edition__divider {
	height: 1rem;
	width: 1px;
	background: var(--border);
}

.edition__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	min-height: 2.25rem;
	padding: 0 0.25rem;
	border: 0;
	background: none;
	color: inherit;
	border-radius: calc(var(--radius) - 4px);
	transition: color 0.15s ease;
}

.edition__btn:hover,
.edition__btn[aria-pressed="true"] {
	color: var(--accent);
}

.edition__mark {
	display: grid;
	place-items: center;
	height: 1.25rem;
	min-width: 1.25rem;
	padding: 0 0.25rem;
	border: 1px solid var(--border);
	border-radius: 0.25rem;
	font-size: 0.5rem;
	font-weight: 800;
	color: var(--muted-foreground);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
	border-bottom: 1px solid var(--border);
	background: var(--card);
}

.site-header__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.75rem;
	height: 5rem;
}

@media (min-width: 1280px) {
	.site-header__inner {
		grid-template-columns: 240px minmax(0, 1fr) auto;
	}
}

.brand {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 0.625rem;
}

.brand__mark {
	position: relative;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 999px;
	background: var(--primary);
	color: var(--primary-foreground);
	font-size: 1.125rem;
	font-weight: 700;
}

.brand__mark::after {
	content: "";
	position: absolute;
	right: 0;
	width: 1rem;
	height: 1rem;
	background: var(--card);
}

.brand__name {
	display: block;
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1;
	color: var(--primary);
}

.brand__tagline {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.5625rem;
	font-weight: 600;
	color: var(--muted-foreground);
}

.brand__logo img {
	max-height: 48px;
	width: auto;
}

.primary-nav {
	display: none;
	min-width: 0;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	margin-inline: auto;
}

@media (min-width: 1280px) {
	.primary-nav {
		display: flex;
	}
}

.primary-nav a,
.primary-nav .more__trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 1.75rem 0;
	border-bottom: 2px solid transparent;
	background: none;
	border-left: 0;
	border-right: 0;
	border-top: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--foreground);
	transition: color 0.15s ease, border-color 0.15s ease;
}

.primary-nav a:hover,
.primary-nav .more__trigger:hover,
.primary-nav .more__trigger[aria-expanded="true"] {
	color: var(--accent);
}

.primary-nav .current-menu-item > a,
.primary-nav .current-menu-ancestor > a {
	border-bottom-color: var(--accent);
	color: var(--accent);
}

.more {
	position: relative;
}

.more__panel {
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 50;
	display: none;
	min-width: 11rem;
	padding: 0.375rem;
	border: 1px solid var(--border);
	border-radius: calc(var(--radius) - 2px);
	background: var(--popover);
	box-shadow: 0 8px 24px color-mix(in oklab, var(--primary) 10%, transparent);
}

.more__panel[data-open="true"] {
	display: block;
}

.more__panel a {
	display: block;
	padding: 0.5rem 0.625rem;
	border: 0;
	border-radius: calc(var(--radius) - 4px);
	font-size: 0.8125rem;
	font-weight: 600;
}

.more__panel a:hover {
	background: var(--secondary);
}

.header-actions {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: flex-end;
	gap: 0.25rem;
}

.header-actions .btn--subscribe {
	display: none;
}

@media (min-width: 1280px) {
	.header-actions .btn--subscribe {
		display: inline-flex;
	}
}

.header-actions .btn--account {
	display: none;
}

@media (min-width: 640px) {
	.header-actions .btn--account {
		display: inline-flex;
	}
}

.nav-toggle {
	display: inline-flex;
}

@media (min-width: 1280px) {
	.nav-toggle {
		display: none;
	}
}

/* Mobile drawer */

.drawer {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: none;
}

.drawer[data-open="true"] {
	display: block;
}

.drawer__backdrop {
	position: absolute;
	inset: 0;
	background: color-mix(in oklab, var(--primary) 45%, transparent);
}

.drawer__panel {
	position: absolute;
	inset-block: 0;
	right: 0;
	width: min(20rem, 100%);
	padding: 1.5rem;
	overflow-y: auto;
	background: var(--card);
	border-left: 1px solid var(--border);
}

.drawer__nav {
	display: flex;
	flex-direction: column;
	margin-top: 2.5rem;
}

.drawer__nav a {
	padding: 1rem 0;
	border-bottom: 1px solid var(--border);
	font-size: 1rem;
	font-weight: 600;
}

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

.site-footer {
	margin-top: 3rem;
	border-top: 1px solid var(--border);
	background: var(--primary);
	color: var(--primary-foreground);
}

.site-footer a:hover {
	color: var(--primary-foreground);
}

.site-footer__top {
	display: grid;
	gap: 2rem;
	padding-block: 2.5rem;
}

@media (min-width: 640px) {
	.site-footer__top {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.site-footer__top {
		grid-template-columns: 1.5fr repeat(4, 1fr);
	}
}

.site-footer .brand__name,
.site-footer .brand__tagline {
	color: var(--primary-foreground);
}

.site-footer .brand__mark {
	background: var(--primary-foreground);
	color: var(--primary);
}

.site-footer .brand__mark::after {
	background: var(--primary);
}

.social {
	display: flex;
	gap: 0.5rem;
	margin-top: 1.25rem;
}

.social a {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid color-mix(in oklab, var(--primary-foreground) 20%, transparent);
	border-radius: calc(var(--radius) - 2px);
	transition: border-color 0.15s ease;
}

.social a:hover {
	border-color: color-mix(in oklab, var(--primary-foreground) 50%, transparent);
}

.social .icon {
	width: 1rem;
	height: 1rem;
}

.footer-group h2 {
	margin-bottom: 0.75rem;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.025em;
}

.footer-group li + li {
	margin-top: 0.5rem;
}

.footer-group a {
	font-size: 0.75rem;
	color: color-mix(in oklab, var(--primary-foreground) 70%, transparent);
	transition: color 0.15s ease;
}

.site-footer__bottom {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding-block: 1.25rem;
	border-top: 1px solid color-mix(in oklab, var(--primary-foreground) 15%, transparent);
	font-size: 0.6875rem;
	color: color-mix(in oklab, var(--primary-foreground) 70%, transparent);
}

@media (min-width: 640px) {
	.site-footer__bottom {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.legal-links ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
}

.legal-links a {
	transition: color 0.15s ease;
}

/* Footer menus come from wp_nav_menu, so target the generated list. */
.footer-group ul {
	display: block;
}

/* --------------------------------------------------------------------------
   Page chrome
   -------------------------------------------------------------------------- */

.breadcrumbs {
	margin-bottom: 1rem;
}

.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.6875rem;
	color: var(--muted-foreground);
}

.breadcrumbs li {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.breadcrumbs [aria-current="page"] {
	color: var(--foreground);
}

.page-header {
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--border);
}

.page-header__row {
	display: grid;
	gap: 1rem;
}

@media (min-width: 768px) {
	.page-header__row {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: end;
	}
}

.page-header h1 {
	margin-top: 0.5rem;
	font-family: var(--font-editorial);
	font-weight: 400;
	font-size: clamp(2.125rem, 1.6rem + 2vw, 2.625rem);
	line-height: 1.1;
	color: var(--primary);
}

.page-header__description {
	margin-top: 0.75rem;
	max-width: 68ch;
	font-size: 0.875rem;
	line-height: 1.5rem;
	color: var(--secondary-foreground);
}

.page-header__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.section-shell {
	min-width: 0;
}

.section-shell__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--border);
}

.section-shell__action {
	flex-shrink: 0;
	font-size: 0.625rem;
	font-weight: 600;
	color: var(--muted-foreground);
}

.section-shell__body {
	margin-top: 1.25rem;
	min-width: 0;
}

/* --------------------------------------------------------------------------
   States
   -------------------------------------------------------------------------- */

.empty-state {
	display: grid;
	place-items: center;
	padding: 3.5rem 1.5rem;
	text-align: center;
}

.empty-state__title {
	margin-top: 0.75rem;
	font-size: 0.875rem;
	font-weight: 700;
}

.empty-state__detail {
	margin-top: 0.25rem;
	max-width: 46ch;
	font-size: 0.75rem;
	color: var(--muted-foreground);
}

.empty-state__action {
	margin-top: 1.25rem;
}

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

.pagination {
	margin-top: 2rem;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.375rem;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	min-height: 2.5rem;
	padding: 0 0.5rem;
	border: 1px solid var(--border);
	border-radius: calc(var(--radius) - 2px);
	font-size: 0.75rem;
	font-weight: 600;
}

.pagination .page-numbers.current {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--primary-foreground);
}

.pagination .page-numbers:hover:not(.current) {
	border-color: var(--accent);
	color: var(--accent);
}

/* --------------------------------------------------------------------------
   Editorial article body
   -------------------------------------------------------------------------- */

.entry-content {
	max-width: 72ch;
	font-size: 1rem;
	line-height: 1.75;
}

.entry-content > * + * {
	margin-top: 1.25rem;
}

.entry-content h2 {
	margin-top: 2.25rem;
	font-family: var(--font-editorial);
	font-weight: 400;
	font-size: 1.75rem;
	line-height: 1.2;
	color: var(--primary);
}

.entry-content h3 {
	margin-top: 1.75rem;
	font-size: 1.125rem;
	font-weight: 700;
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.25rem;
	list-style: disc;
}

.entry-content ol {
	list-style: decimal;
}

.entry-content li + li {
	margin-top: 0.5rem;
}

.entry-content a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.entry-content blockquote {
	margin: 2rem 0;
	padding-left: 1.25rem;
	border-left: 3px solid var(--accent);
	font-family: var(--font-editorial);
	font-size: 1.25rem;
	line-height: 1.4;
}

.entry-content figure {
	margin: 2rem 0;
}

.entry-content figcaption {
	margin-top: 0.5rem;
	font-size: 0.75rem;
	color: var(--muted-foreground);
}

.entry-content img {
	border-radius: calc(var(--radius) - 2px);
}

/* --------------------------------------------------------------------------
   Layout helpers used by templates
   -------------------------------------------------------------------------- */

.layout-with-rail {
	display: grid;
	gap: 2.5rem;
}

@media (min-width: 1024px) {
	.layout-with-rail {
		grid-template-columns: minmax(0, 1fr) 320px;
	}
}

.rail {
	min-width: 0;
}

.rail > * + * {
	margin-top: 1.5rem;
}

.page-body {
	padding-block: 1.5rem;
}

@media (min-width: 1024px) {
	.page-body {
		padding-block: 2.5rem;
	}
}

.page-body > * + * {
	margin-top: 2.5rem;
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

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

/* --------------------------------------------------------------------------
   Story cards
   -------------------------------------------------------------------------- */

.story-grid {
	display: grid;
	gap: 1.75rem;
	align-items: stretch;
}

@media (min-width: 640px) {
	.story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
	.story-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.story-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.story-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	height: 100%;
	overflow: hidden;
}

.story-card__overlay,
.story-row__overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.story-card__image {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: calc(var(--radius) - 2px);
}

.story-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding-top: 1rem;
}

.story-card__title {
	margin-top: 0.25rem;
	font-family: var(--font-editorial);
	font-weight: 400;
	font-size: 1.375rem;
	line-height: 1.16;
	transition: color 0.15s ease;
}

.story-card--lg .story-card__title {
	font-size: 1.875rem;
}

.story-card:hover .story-card__title,
.story-row:hover .story-row__title {
	color: var(--accent);
}

.story-card__summary,
.story-row__summary {
	margin-top: 0.5rem;
	font-size: 0.8125rem;
	line-height: 1.25rem;
	color: var(--secondary-foreground);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.story-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: auto;
	padding-top: 1rem;
}

.story-row {
	position: relative;
	display: grid;
	gap: 1rem;
	min-width: 0;
	padding-block: 1.5rem;
	border-bottom: 1px solid var(--border);
}

.story-row:first-child { padding-top: 0; }

@media (min-width: 640px) {
	.story-row { grid-template-columns: 220px minmax(0, 1fr); }
}

.story-row__image {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: calc(var(--radius) - 2px);
}

.story-row__image--empty {
	display: block;
	background: var(--secondary);
}

.story-row__title {
	margin-top: 0.25rem;
	font-family: var(--font-editorial);
	font-weight: 400;
	font-size: 1.375rem;
	line-height: 1.18;
	transition: color 0.15s ease;
}

.story-row__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 0.75rem;
}

.article-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.5rem;
	font-size: 0.6875rem;
	color: var(--muted-foreground);
}

/* Bookmark button sits above the card overlay. */
.bookmark {
	position: relative;
	z-index: 10;
}

.bookmark__on { display: none; }
.bookmark.is-saved { color: var(--accent); }
.bookmark.is-saved .bookmark__off { display: none; }
.bookmark.is-saved .bookmark__on { display: block; }

/* --------------------------------------------------------------------------
   Single article
   -------------------------------------------------------------------------- */

.article-header {
	max-width: 80ch;
}

.article-header__title {
	margin-top: 0.75rem;
	font-family: var(--font-editorial);
	font-weight: 400;
	font-size: clamp(2.125rem, 1.4rem + 3vw, 3.25rem);
	line-height: 1.08;
	color: var(--primary);
}

.article-header__standfirst {
	margin-top: 1rem;
	font-size: 1rem;
	line-height: 1.75;
	color: var(--secondary-foreground);
}

.article-header__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.5rem;
	padding-block: 1rem;
	border-block: 1px solid var(--border);
}

.article-header__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.6875rem;
	color: var(--muted-foreground);
}

.share-row {
	display: flex;
	align-items: center;
	gap: 0.125rem;
}

.article-lead {
	margin: 1.75rem 0 0;
}

.article-lead img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--radius);
}

.article-lead figcaption {
	margin-top: 0.5rem;
	font-size: 0.75rem;
	color: var(--muted-foreground);
}

.author-card {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
}

.author-card__avatar {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 999px;
	background: var(--primary);
	color: var(--primary-foreground);
	font-size: 0.6875rem;
	font-weight: 700;
}

.author-card--lg .author-card__avatar {
	width: 3.5rem;
	height: 3.5rem;
	font-size: 1rem;
}

.author-card__name {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	transition: color 0.15s ease;
}

.author-card:hover .author-card__name { color: var(--accent); }

.author-card__role {
	display: block;
	font-size: 0.6875rem;
	color: var(--muted-foreground);
}

.topic-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 2rem;
}

.topic-chip {
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
	padding: 0 0.75rem;
	border: 1px solid var(--border);
	border-radius: calc(var(--radius) - 2px);
	font-size: 0.6875rem;
	font-weight: 600;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.topic-chip:hover {
	border-color: var(--accent);
	color: var(--accent);
}

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

.search-form {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.5rem;
	min-width: 0;
}

.search-form__icon {
	position: absolute;
	left: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	color: var(--muted-foreground);
}

.search-form__icon .icon {
	width: 1rem;
	height: 1rem;
}

.search-form__input {
	padding-left: 2.25rem;
	height: 3.5rem;
	font-size: 1rem;
}

.search-form__submit {
	height: 3.5rem;
}

/* --------------------------------------------------------------------------
   Icon sizing
   -------------------------------------------------------------------------- */

.icon {
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
}

.icon--xs {
	width: 0.75rem;
	height: 0.75rem;
}

/* --------------------------------------------------------------------------
   Charts
   -------------------------------------------------------------------------- */

.chart-card__canvas {
	position: relative;
	height: 320px;
}

.spark {
	position: relative;
	width: 88px;
	height: 32px;
}

/* --------------------------------------------------------------------------
   Menu lists
   wp_nav_menu wraps items in <ul>, so the flex layout has to live there
   rather than on the <nav>.
   -------------------------------------------------------------------------- */

.primary-nav ul {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
}

.primary-nav li {
	display: flex;
	align-items: center;
}

.more__panel ul {
	display: block;
}

.drawer__nav ul {
	display: flex;
	flex-direction: column;
}

.drawer__nav li {
	display: block;
}

/* Developer credit, shown only when switched on in the Customizer. */
.site-credit {
	margin-left: 0.75rem;
	opacity: 0.85;
}

.site-credit a {
	text-decoration: underline;
	text-underline-offset: 2px;
}