/* ==========================================================================
   LearnerPod design system v2.0.1 "Daylight"
   Documented in DESIGN.md. Colours come from brand/tokens/colours.json.
   One stylesheet, no JavaScript, one self-hosted font file.
   ========================================================================== */

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('fonts/Inter-Variable.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
	/* Brand core: straight from the mark */
	--lp-primary: #0E7C8B;        /* badge teal: shapes, fills, focus */
	--lp-primary-dark: #0A6472;   /* wordmark lower line: link text, hover */
	--lp-primary-deep: #08525E;   /* pressed, dark grounds */
	--lp-primary-on-dark: #5CC9D8;/* teal that survives on #17212B (8.38:1) */
	--lp-ink: #17212B;            /* the pod */
	--lp-plate: #F5F7FA;
	--lp-ground: #DCE2E8;
	--lp-rule: #CBD4DE;

	/* Neutral scale: same blue-grey axis as the mark */
	--lp-n-0: #FFFFFF;
	--lp-n-50: #F5F7FA;
	--lp-n-100: #ECF0F4;
	--lp-n-200: #DCE2E8;
	--lp-n-300: #CBD4DE;
	--lp-n-400: #A7B4C0;  /* non-text only */
	--lp-n-500: #7E8D9C;  /* non-text only */
	--lp-n-600: #5C6B7A;  /* large text only */
	--lp-n-700: #4A5A69;  /* muted body text: 7.10:1 on white */
	--lp-n-800: #2C3945;
	--lp-n-900: #17212B;

	/* Status: never signalled by colour alone */
	--lp-success: #1B6B3A;
	--lp-success-bg: #EAF3ED;
	--lp-warning: #8A5300;
	--lp-warning-bg: #FBF2E4;
	--lp-danger: #B3261E;
	--lp-danger-bg: #FBEBEA;

	/* Semantic aliases used across components */
	--lp-text: var(--lp-ink);
	--lp-text-muted: var(--lp-n-700);
	--lp-bg: var(--lp-n-0);
	--lp-bg-light: var(--lp-plate);
	--lp-link: var(--lp-primary-dark);
	--lp-link-hover: var(--lp-primary-deep);
	--lp-border: var(--lp-rule);

	/* Type */
	--lp-font: 'Inter', -apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--lp-fs-xs: 0.8125rem;
	--lp-fs-sm: 0.875rem;
	--lp-fs-base: clamp(1.0625rem, 0.99rem + 0.30vw, 1.125rem);
	--lp-fs-lg: clamp(1.1875rem, 1.08rem + 0.42vw, 1.3125rem);
	--lp-fs-h4: clamp(1.125rem, 1.03rem + 0.42vw, 1.25rem);
	--lp-fs-h3: clamp(1.3125rem, 1.17rem + 0.63vw, 1.5rem);
	--lp-fs-h2: clamp(1.625rem, 1.36rem + 1.25vw, 2rem);
	--lp-fs-h1: clamp(2rem, 1.51rem + 2.50vw, 2.75rem);
	--lp-fs-hero: clamp(2.25rem, 1.53rem + 3.75vw, 3.5rem);
	--lp-lh-body: 1.65;
	--lp-lh-tight: 1.15;
	--lp-tracking: -0.012em; /* the wordmark's own tracking */

	/* Spacing: 4px base */
	--lp-s-1: 4px;
	--lp-s-2: 8px;
	--lp-s-3: 12px;
	--lp-s-4: 16px;
	--lp-s-5: 24px;
	--lp-s-6: 32px;
	--lp-s-7: 48px;
	--lp-s-8: 64px;
	--lp-s-9: 96px;
	--lp-s-10: 128px;
	--lp-section-y: clamp(48px, 8vw, 96px);

	/* Layout */
	--lp-container: 1200px;
	/* In rem, not ch. A ch-based measure resolves against each element's own
	 * font-size, so every heading and every larger paragraph gets a different
	 * pixel width and, once centred, a different left edge. 48rem is the
	 * previous 68ch at body size, so the column width is unchanged. */
	--lp-measure: 48rem;
	--lp-measure-wide: 1200px;
	--lp-gutter: clamp(16px, 5vw, 32px);

	/* Surface */
	--lp-radius-sm: 6px;
	--lp-radius: 10px;
	--lp-radius-lg: 16px;
	--lp-radius-pill: 999px;
	--lp-shadow-sm: 0 1px 2px rgba(23, 33, 43, 0.06);
	--lp-shadow: 0 6px 20px rgba(23, 33, 43, 0.10);
	--lp-transition: 150ms ease;

	/* Logo: the mark's own colours, kept separate from UI tokens */
	--lp-logo-ink: #17212B;
	--lp-logo-badge: #0E7C8B;
	--lp-logo-plate: #F5F7FA;
	--lp-logo-rule: #CBD4DE;
}

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

body,
input,
button,
select,
textarea {
	font-family: var(--lp-font);
}

body {
	color: var(--lp-text);
	font-size: var(--lp-fs-base);
	line-height: var(--lp-lh-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--lp-font);
	font-weight: 700;
	color: var(--lp-ink);
	letter-spacing: var(--lp-tracking);
}

h1 { font-size: var(--lp-fs-h1); line-height: var(--lp-lh-tight); text-wrap: balance; }
h2 { font-size: var(--lp-fs-h2); line-height: 1.25; margin-top: var(--lp-s-7); text-wrap: balance; }
h3 { font-size: var(--lp-fs-h3); line-height: 1.3;  margin-top: var(--lp-s-6); }
h4 { font-size: var(--lp-fs-h4); line-height: 1.35; margin-top: var(--lp-s-5); }

p { text-wrap: pretty; }

a {
	color: var(--lp-link);
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

a:hover,
a:focus-visible {
	color: var(--lp-link-hover);
	text-decoration-thickness: 2px;
}

/* Focus is restyled, never removed. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.lp-btn:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 3px solid var(--lp-primary);
	outline-offset: 2px;
	border-radius: var(--lp-radius-sm);
}

::selection {
	background: var(--lp-primary);
	color: #FFFFFF;
}

hr,
.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--lp-rule);
	margin-block: var(--lp-s-7);
}

img { max-width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   3. Measure: article text sits at ~68ch, wide things opt out
   -------------------------------------------------------------------------- */

/* ONE COLUMN, ONE LEFT EDGE.
 *
 * Every direct child of .entry-content shares the same measure and the same centre
 * axis. The universal selector is deliberate: it means a block type nobody has
 * thought of yet still lands in the column instead of escaping it.
 *
 * The measure must be in rem, never ch. `ch` resolves against each element's own
 * font-size, so a single "68ch" produced a different pixel width on every block:
 * h2 came out 1200px, h3 1079px, .lp-answer 887px, body copy 770px. The theme
 * centres each block, so five widths became five left edges and the article read
 * as a staircase. Keep this in rem and the column holds whatever the font sizes do.
 */
.entry-content > * {
	box-sizing: border-box;
	max-width: var(--lp-measure);
	margin-inline: auto;
}

/* Without border-box the measure applies to the content box, so a list adds its
 * 40px bullet indent and a callout adds its padding and left rule on top of the
 * column. Both then hang past the text edge by exactly their padding. */
.entry-content > *,
.entry-content > *::before,
.entry-content > *::after {
	box-sizing: border-box;
}

/* Deliberate break-outs. Wider, but centred on the same axis, so their edges stay
 * symmetrical about the text column rather than drifting. */
.entry-content > .lp-full,
.entry-content > .lp-hero,
.entry-content > .lp-cta,
.entry-content > .lp-cards,
.entry-content > .lp-table-wrap,
.entry-content > .wp-block-table,
.entry-content > .wp-block-image,
.entry-content > .alignwide,
.entry-content > .alignfull {
	max-width: var(--lp-measure-wide);
	margin-inline: auto;
}

/* Figures carry a browser default margin-inline of 40px, which would knock them
 * off the shared axis even once the widths agree. */
.entry-content > figure {
	margin-inline: auto;
}

.lp-lead,
.entry-content > .lp-lead {
	font-size: var(--lp-fs-lg);
	line-height: 1.55;
	color: var(--lp-n-700);
}

/* The answer-first sentence under a question heading. AEO's unit of content.
 * It is set larger than body copy, but it must not be set narrower: a different
 * width here is what put the answer sentence on its own left edge. */
.lp-answer {
	font-size: var(--lp-fs-lg);
	line-height: 1.55;
	color: var(--lp-ink);
}

.lp-meta {
	font-size: var(--lp-fs-xs);
	color: var(--lp-n-700);
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */

.lp-btn,
.entry-content .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--lp-s-2);
	min-height: 44px;
	padding: var(--lp-s-3) var(--lp-s-5);
	border: 2px solid var(--lp-primary);
	border-radius: var(--lp-radius);
	background: var(--lp-primary);
	color: #FFFFFF;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--lp-transition), border-color var(--lp-transition);
}

.lp-btn:hover,
.lp-btn:focus-visible,
.entry-content .wp-block-button__link:hover,
.entry-content .wp-block-button__link:focus-visible {
	background: var(--lp-primary-dark);
	border-color: var(--lp-primary-dark);
	color: #FFFFFF;
}

.lp-btn:active,
.entry-content .wp-block-button__link:active {
	background: var(--lp-primary-deep);
	border-color: var(--lp-primary-deep);
}

.lp-btn--secondary,
.entry-content .is-style-outline .wp-block-button__link {
	background: transparent;
	border-color: var(--lp-primary-dark);
	color: var(--lp-primary-dark);
}

.lp-btn--secondary:hover,
.lp-btn--secondary:focus-visible,
.entry-content .is-style-outline .wp-block-button__link:hover {
	background: var(--lp-primary-dark);
	border-color: var(--lp-primary-dark);
	color: #FFFFFF;
}

.lp-btn--ghost,
.entry-content .wp-block-button.lp-btn--ghost .wp-block-button__link {
	background: transparent;
	border-color: transparent;
	color: var(--lp-primary-dark);
	padding-inline: var(--lp-s-2);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.lp-btn--ghost:hover,
.lp-btn--ghost:focus-visible {
	background: transparent;
	border-color: transparent;
	color: var(--lp-primary-deep);
}

/* The core-button selectors above are (0,2,0), so the variants have to match
   that weight or Gutenberg's own markup wins. */
.lp-btn--on-dark,
.entry-content .wp-block-button.lp-btn--on-dark .wp-block-button__link,
.entry-content .lp-cta .wp-block-button__link {
	background: #FFFFFF;
	border-color: #FFFFFF;
	color: var(--lp-primary-dark);
}

.lp-btn--on-dark:hover,
.lp-btn--on-dark:focus-visible,
.entry-content .wp-block-button.lp-btn--on-dark .wp-block-button__link:hover,
.entry-content .wp-block-button.lp-btn--on-dark .wp-block-button__link:focus-visible,
.entry-content .lp-cta .wp-block-button__link:hover,
.entry-content .lp-cta .wp-block-button__link:focus-visible {
	background: var(--lp-plate);
	border-color: var(--lp-plate);
	color: var(--lp-primary-deep);
}

/* Focus ring needs to be visible against the ink band, not the teal one. */
.entry-content .lp-cta .wp-block-button__link:focus-visible,
.lp-cta .lp-btn:focus-visible {
	outline-color: var(--lp-primary-on-dark);
}

.lp-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lp-s-3);
	margin-top: var(--lp-s-5);
}

/* --------------------------------------------------------------------------
   5. Hero band
   -------------------------------------------------------------------------- */

.lp-hero {
	background: var(--lp-plate);
	border: 1px solid var(--lp-rule);
	border-radius: var(--lp-radius-lg);
	padding: var(--lp-section-y) var(--lp-gutter);
	margin-bottom: var(--lp-s-7);
}

.lp-hero__eyebrow {
	display: inline-block;
	margin: 0 0 var(--lp-s-3);
	padding: var(--lp-s-1) var(--lp-s-3);
	border-radius: var(--lp-radius-pill);
	background: var(--lp-ground);
	color: var(--lp-primary-deep);
	font-size: var(--lp-fs-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.lp-hero h1,
.lp-hero__title {
	font-size: var(--lp-fs-hero);
	line-height: 1.08;
	margin: 0 0 var(--lp-s-4);
	max-width: 20ch;
}

.lp-hero__sub {
	font-size: var(--lp-fs-lg);
	line-height: 1.5;
	color: var(--lp-n-700);
	max-width: 56ch;
	margin: 0;
}

/* --------------------------------------------------------------------------
   6. Cards
   -------------------------------------------------------------------------- */

.lp-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--lp-s-5);
	margin-block: var(--lp-s-6);
	padding: 0;
	list-style: none;
}

.lp-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--lp-s-2);
	padding: var(--lp-s-5);
	background: var(--lp-n-0);
	border: 1px solid var(--lp-rule);
	border-radius: var(--lp-radius);
	box-shadow: var(--lp-shadow-sm);
	transition: border-color var(--lp-transition), box-shadow var(--lp-transition);
}

.lp-card:hover {
	border-color: var(--lp-primary);
	box-shadow: var(--lp-shadow);
}

.lp-card__title {
	margin: 0;
	font-size: var(--lp-fs-h4);
	line-height: 1.3;
}

.lp-card__title a { text-decoration: none; }
.lp-card__title a:hover { text-decoration: underline; }

/* Whole card clickable, accessible name stays on the anchor. */
.lp-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--lp-radius);
}

.lp-card p { margin: 0; }

.lp-card__meta {
	font-size: var(--lp-fs-xs);
	color: var(--lp-n-700);
}

/* --------------------------------------------------------------------------
   7. Callouts, key facts, blockquote
   -------------------------------------------------------------------------- */

.lp-callout {
	margin-block: var(--lp-s-6);
	padding: var(--lp-s-5);
	background: var(--lp-ground);
	border-left: 4px solid var(--lp-primary);
	border-radius: 0 var(--lp-radius) var(--lp-radius) 0;
	max-width: var(--lp-measure);
}

.lp-callout > :first-child { margin-top: 0; }
.lp-callout > :last-child { margin-bottom: 0; }

.lp-callout__label {
	display: block;
	margin-bottom: var(--lp-s-2);
	font-size: var(--lp-fs-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--lp-primary-deep);
}

.lp-callout--tip {
	background: var(--lp-plate);
	border-left-color: var(--lp-primary);
}

.lp-callout--warning {
	background: var(--lp-warning-bg);
	border-left-color: var(--lp-warning);
}
.lp-callout--warning .lp-callout__label { color: var(--lp-warning); }

.lp-callout--success {
	background: var(--lp-success-bg);
	border-left-color: var(--lp-success);
}
.lp-callout--success .lp-callout__label { color: var(--lp-success); }

.lp-callout--danger {
	background: var(--lp-danger-bg);
	border-left-color: var(--lp-danger);
}
.lp-callout--danger .lp-callout__label { color: var(--lp-danger); }

/* Key facts: a scannable fact block an answer engine can lift. */
.lp-callout--key-facts {
	background: var(--lp-plate);
	border: 1px solid var(--lp-rule);
	border-left: 4px solid var(--lp-primary);
	border-radius: 0 var(--lp-radius) var(--lp-radius) 0;
}

.lp-facts {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--lp-s-3);
	margin: 0;
}

@media (min-width: 48em) {
	.lp-facts {
		grid-template-columns: minmax(140px, 1fr) 2fr;
		gap: var(--lp-s-3) var(--lp-s-5);
		align-items: baseline;
	}
}

.lp-facts dt {
	margin: 0;
	font-size: var(--lp-fs-sm);
	font-weight: 600;
	color: var(--lp-n-700);
}

.lp-facts dd {
	margin: 0;
	font-weight: 600;
	color: var(--lp-ink);
	font-variant-numeric: tabular-nums;
}

blockquote,
.wp-block-quote {
	margin-block: var(--lp-s-6);
	padding-left: var(--lp-s-5);
	border-left: 3px solid var(--lp-primary);
	font-size: var(--lp-fs-lg);
	line-height: 1.5;
	color: var(--lp-ink);
	max-width: var(--lp-measure);
	font-style: normal;
}

blockquote cite,
.wp-block-quote cite {
	display: block;
	margin-top: var(--lp-s-3);
	font-size: var(--lp-fs-sm);
	font-style: normal;
	color: var(--lp-n-700);
}

/* --------------------------------------------------------------------------
   8. Tables: built for test-centre and cost data
   -------------------------------------------------------------------------- */

.lp-table-wrap,
.entry-content .wp-block-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-block: var(--lp-s-6);
}

.lp-table,
.entry-content .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--lp-fs-sm);
	font-variant-numeric: tabular-nums;
	background: var(--lp-n-0);
}

.lp-table caption,
.entry-content .wp-block-table figcaption {
	caption-side: top;
	margin-bottom: var(--lp-s-3);
	text-align: left;
	font-size: var(--lp-fs-sm);
	color: var(--lp-n-700);
}

.lp-table th,
.lp-table td,
.entry-content .wp-block-table th,
.entry-content .wp-block-table td {
	padding: var(--lp-s-3) var(--lp-s-4);
	border: 1px solid var(--lp-rule);
	text-align: left;
	vertical-align: top;
}

.lp-table thead th,
.entry-content .wp-block-table thead th {
	background: var(--lp-ground);
	color: var(--lp-ink);
	font-weight: 600;
}

.lp-table tbody tr:nth-child(even),
.entry-content .wp-block-table tbody tr:nth-child(even) {
	background: var(--lp-n-100);
}

@media (min-width: 48em) {
	.lp-table--sticky thead th {
		position: sticky;
		top: 0;
		z-index: 1;
	}
}

/* --------------------------------------------------------------------------
   9. CTA band
   -------------------------------------------------------------------------- */

.lp-cta {
	margin-block: var(--lp-s-8);
	padding: var(--lp-section-y) var(--lp-gutter);
	background: var(--lp-ink);
	border-radius: var(--lp-radius-lg);
	text-align: center;
}

.lp-cta h2,
.lp-cta__title {
	margin: 0 0 var(--lp-s-3);
	color: #FFFFFF;
}

.lp-cta p {
	margin: 0 auto;
	max-width: 52ch;
	color: var(--lp-plate);
}

.lp-cta a:not(.lp-btn) {
	color: var(--lp-primary-on-dark);
}

.lp-cta .lp-btn-row {
	justify-content: center;
}

/* --------------------------------------------------------------------------
   10. Header
   -------------------------------------------------------------------------- */

.site-branding img,
.site-branding .custom-logo {
	max-height: 56px;
	width: auto;
	height: auto;
}

/* The logo already contains the wordmark, so the text title beside it is
   duplication. Only hidden when an image logo is actually present, the
   lp-has-logo class is added by the mu-plugin. */
.lp-has-logo .site-branding .site-title {
	display: none;
}

@media (max-width: 782px) {
	.site-branding img,
	.site-branding .custom-logo {
		max-height: 44px;
	}
}

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */

.lp-footer-brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--lp-s-3);
	padding: var(--lp-s-7) var(--lp-gutter) var(--lp-s-6);
	border-top: 1px solid var(--lp-logo-rule);
	text-align: center;
}

.lp-footer-brand__link {
	display: inline-block;
	line-height: 0;
}

.lp-footer-brand__link img {
	width: auto;
	height: 52px;
	max-width: 100%;
}

.lp-footer-brand__tagline {
	margin: 0;
	max-width: 46ch;
	font-size: var(--lp-fs-sm);
	line-height: 1.6;
	color: var(--lp-n-700);
}

@media (max-width: 782px) {
	.lp-footer-brand {
		padding: var(--lp-s-6) var(--lp-gutter) var(--lp-s-5);
	}

	.lp-footer-brand__link img {
		height: 44px;
	}
}

/* --------------------------------------------------------------------------
   12. Motion
   -------------------------------------------------------------------------- */

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

/* ==========================================================================
   Category grid
   Used by the "Browse by topic" hub page. Each tile is a whole-card link:
   the anchor sits on the title and its ::after covers the card, so the
   accessible name stays the category name rather than the whole blurb.
   ========================================================================== */

.lp-cat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 1.25rem;
	margin: 2rem 0;
	padding: 0;
	list-style: none;
}

.lp-cat-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.5rem 1.25rem 1.25rem;
	background: var(--lp-n-0);
	border: 1px solid var(--lp-rule);
	border-radius: 12px;
	transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.lp-cat-card:hover,
.lp-cat-card:focus-within {
	border-color: var(--lp-primary);
	box-shadow: 0 6px 20px rgba(23, 33, 43, 0.09);
	transform: translateY(-2px);
}

/* The icon plate. Echoes the number-plate shape in the logo. */
.lp-cat-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 10px;
	background: var(--lp-plate);
	border: 1px solid var(--lp-rule);
	color: var(--lp-primary);
	flex: none;
}

.lp-cat-card:hover .lp-cat-card__icon,
.lp-cat-card:focus-within .lp-cat-card__icon {
	background: var(--lp-primary);
	border-color: var(--lp-primary);
	color: var(--lp-n-0);
}

.lp-cat-card__icon svg {
	width: 1.75rem;
	height: 1.75rem;
	display: block;
}

.lp-cat-card__title {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.3;
	font-weight: 650;
	color: var(--lp-ink);
}

.lp-cat-card__title a {
	color: inherit;
	text-decoration: none;
}

/* Stretch the link over the card so the whole tile is clickable. */
.lp-cat-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.lp-cat-card__title a:hover {
	color: var(--lp-link);
	text-decoration: underline;
}

.lp-cat-card__title a:focus-visible {
	outline: none;
}

.lp-cat-card:focus-within {
	outline: 3px solid var(--lp-primary);
	outline-offset: 2px;
}

.lp-cat-card p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--lp-text-muted);
}

.lp-cat-card__count {
	margin-top: auto;
	padding-top: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--lp-n-700);
}

@media (prefers-reduced-motion: reduce) {
	.lp-cat-card { transition: none; }
	.lp-cat-card:hover { transform: none; }
}


/* --------------------------------------------------------------------------
   Previous / Next article
   Sits at the foot of every post, following the curated reading order in
   content/reading-order.json rather than publish date. Obeys the one-column
   rule: same measure, same axis, border-box, so it lines up with the prose.
   -------------------------------------------------------------------------- */

.lp-prevnext {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--lp-s-3);
	margin-block: var(--lp-s-7) var(--lp-s-5);
	padding-top: var(--lp-s-5);
	border-top: 1px solid var(--lp-n-200, #CBD4DE);
}

.lp-prevnext__link {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: var(--lp-s-4);
	border: 1px solid var(--lp-n-200, #CBD4DE);
	border-radius: var(--lp-radius-md, 10px);
	text-decoration: none;
	color: inherit;
	background: var(--lp-surface, #F5F7FA);
	transition: border-color .15s ease, background-color .15s ease;
}

/* A lone Next link must not stretch across both columns. */
.lp-prevnext__link--next:only-child {
	grid-column: 2;
}

.lp-prevnext__link:hover,
.lp-prevnext__link:focus-visible {
	border-color: var(--lp-accent, #0E7C8B);
	background: #FFFFFF;
}

.lp-prevnext__label {
	font-size: var(--lp-fs-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--lp-accent, #0E7C8B);
}

.lp-prevnext__link--next {
	text-align: right;
}

.lp-prevnext__title {
	font-size: var(--lp-fs-base);
	font-weight: 600;
	line-height: 1.35;
	color: var(--lp-ink, #17212B);
}

/* Two cards side by side stop being readable well before phone width. */
@media (max-width: 640px) {
	.lp-prevnext { grid-template-columns: 1fr; }
	.lp-prevnext__link--next,
	.lp-prevnext__link--next:only-child { text-align: left; grid-column: 1; }
}