/*
Theme Name: WP Analyze
Theme URI: https://wpanalyze.com
Author: WP Analyze
Author URI: https://wpanalyze.com
Description: The blog for WP Analyze. Carries the app's palette and navigation so a reader arriving from search lands somewhere recognisable, with an editorial post layout built for reading.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wp-analyze
Tags: blog, one-column
*/

/* ---------------------------------------------------------------------------
   Tokens — the app's design system, copied value for value from
   resources/css/theme.css so the blog and the product are literally the same
   colours and the same type scale, not an approximation of them.

   The app names these --ls-* privately and re-exports them as Tailwind
   utilities; here they keep the public names the templates use. Anything the
   app defines and the blog doesn't need (data states, brand presets) is left
   out, but nothing is redefined differently.
   --------------------------------------------------------------------------- */
:root {
	color-scheme: light;

	/* Neutral ramp: cool, not achromatic — hue 262, chroma rising with depth. */
	--canvas: oklch(98.4% 0.004 262);
	--surface: oklch(100% 0 0);
	--surface-raised: oklch(100% 0 0);
	--sunken: oklch(97% 0.006 262);

	--fg: oklch(21% 0.035 262);
	--fg-muted: oklch(54% 0.024 262);
	--fg-subtle: oklch(62% 0.022 262);

	--border: oklch(92% 0.007 262);
	--border-strong: oklch(66% 0.014 262);
	--ring: oklch(53% 0.1 190);

	/* Brand: teal. theme.css calls indigo the default, but app.blade.php and
	   useBrand.js both fall back to 'teal', so teal is what the site actually
	   serves — these are the [data-brand="teal"] values, copied exactly.
	   Primary = solid actions and active state. */
	--primary: oklch(52% 0.11 190);
	--primary-hover: oklch(46% 0.11 190);
	--primary-fg: oklch(100% 0 0);

	/* Accent = links, kickers, highlights — same family, a touch brighter. */
	--accent: oklch(52% 0.1 192);
	--accent-hover: oklch(46% 0.1 192);
	--accent-surface: oklch(96% 0.03 195);

	/* Two semantic colours: a comment held back, and a subscription taken. */
	--warning-fg: oklch(55% 0.12 66);
	--success-fg: oklch(51% 0.1 165);

	--shadow-card: 0 1px 2px 0 oklch(0% 0 0 / 0.05);
	--shadow-overlay: 0 10px 15px -3px oklch(0% 0 0 / 0.1), 0 4px 6px -4px oklch(0% 0 0 / 0.1);

	/* Three radii, same as the app: controls, surfaces, pills. */
	--radius-control: 6px;
	--radius-surface: 8px;
	--radius-pill: 9999px;

	/* Type scale, same steps and line heights as the app's --text-* tokens.
	   The app tops out at --text-display because a dashboard never needs more;
	   a blog does, so --text-headline continues the ladder in the same idiom:
	   bold, tight leading, -0.025em. */
	--text-caption: 0.75rem;
	--text-body: 0.875rem;
	--text-body-lg: 1rem;
	--text-section: 1.125rem;
	--text-title: 1.5rem;
	--text-display: 1.875rem;
	--text-headline: 2.25rem;

	/* The app's --text-* tokens carry a line height each; ours only carried a
	   size, so controls in the bar inherited the body's 1.7 and stood ~4px
	   taller than the same control in the app. Only the body step needs it —
	   caption text here sits in flow, where 1.7 reads better than a tight 1rem. */
	--leading-body: 1.25rem;

	--tracking-tight: -0.025em;   /* the app's tracking-tight, on every large heading */
	--tracking-wide: 0.025em;     /* the app's tracking-wide, on uppercase labels */
	--tracking-kicker: 0.2em;     /* the app's editorial eyebrow */

	--wrap: 44rem;      /* single-post reading measure — ~72 characters at 1rem */
	--wrap-wide: 78rem; /* the editorial grid */

	/* The sidebar column, shared by the list grid and the filter row above it so
	   the two cannot drift apart. */
	--side: 22rem;
	--layout-gap: 2.5rem;
}

/* The app flips on a .dark class set by its theme switch. The blog has no
   switch, so it follows the reader's system setting instead — same values. */
@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;

		--canvas: oklch(17.3% 0.022 262);
		--surface: oklch(21% 0.030 262);
		--surface-raised: oklch(24% 0.030 262);
		/* Lighter than --surface, not darker: "sunken" is a step of contrast
		   away from the surface, and in dark that step goes up. */
		--sunken: oklch(27% 0.032 262);

		--fg: oklch(98% 0.003 262);
		--fg-muted: oklch(71% 0.020 262);
		--fg-subtle: oklch(60% 0.020 262);

		--border: oklch(28% 0.020 262);
		--border-strong: oklch(51% 0.020 262);
		--ring: oklch(76% 0.1 192);

		--primary: oklch(58% 0.1 192);
		--primary-hover: oklch(64% 0.09 192);
		--primary-fg: oklch(100% 0 0);

		--accent: oklch(78% 0.1 192);
		--accent-hover: oklch(84% 0.09 192);
		--accent-surface: oklch(27% 0.05 192);

		--warning-fg: oklch(85% 0.1 85);
		--success-fg: oklch(80% 0.09 168);

		--shadow-card: 0 1px 2px 0 oklch(0% 0 0 / 0.2);
		--shadow-overlay: 0 10px 15px -3px oklch(0% 0 0 / 0.4);
	}
}

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

body {
	margin: 0;
	font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--fg);
	background: var(--canvas);
	-webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
img { max-width: 100%; height: auto; }

button:not(:disabled), [role='button']:not(:disabled), summary { cursor: pointer; }

/* Same focus treatment as the app, so keyboard users see one ring, not two. */
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* Muted, not subtle: placeholder text has to clear 4.5:1. */
::placeholder { color: var(--fg-muted); }

main { padding-bottom: 4rem; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }
.wrap-wide { max-width: var(--wrap-wide); margin: 0 auto; padding: 0 1.25rem; }

/* ---------------------------------------------------------------------------
   Header — the app's nav, so someone arriving from Google recognises where
   they are and is one click from the product.
   --------------------------------------------------------------------------- */
.site-header {
	/* bg-surface/90 + backdrop-blur, same as the app's topbar. */
	background: color-mix(in oklch, var(--surface) 90%, transparent);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--border);
	position: sticky;
	top: 0;
	z-index: 40;
}

.site-header .bar {
	display: flex;
	align-items: center;
	gap: 1rem;
	height: 4rem;
}

/* Equal basis on both flanks is what actually centres the nav — with the brand
   sized to its content the nav would only be centred in the leftover space. */
.bar-side { display: flex; flex: 1; align-items: center; min-width: 0; }
.bar-end { justify-content: flex-end; gap: 0.5rem; }

.brand { display: inline-flex; align-items: center; gap: 0.5rem; }
.brand img { width: 32px; height: 32px; border-radius: var(--radius-surface); display: block; }
.brand span { font-size: var(--text-body); font-weight: 600; color: var(--fg); }
.brand:hover { text-decoration: none; }

.nav { display: flex; flex: none; align-items: center; gap: 0.25rem; }

/* Muted by default, like the app's — not link-blue. */
.nav a {
	padding: 0.5rem 0.75rem;
	border-radius: var(--radius-control);
	font-size: var(--text-body);
	line-height: var(--leading-body);
	font-weight: 500;
	color: var(--fg-muted);
	transition: color 0.15s, background-color 0.15s;
}

.nav a:hover { color: var(--fg); background: var(--sunken); text-decoration: none; }
.nav a[aria-current] { color: var(--fg); font-weight: 600; }

/* Icon buttons — the search trigger and the auth pair. Square, ghost by
   default, filled for the primary action so Register still reads as the CTA
   without spelling itself out. Every one carries a title and an aria-label,
   because an icon on its own is a guess. */
.icon-btn {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 0;
	border-radius: var(--radius-control);
	background: transparent;
	color: var(--fg-muted);
	line-height: 0;
	cursor: pointer;
	transition: color 0.15s, background-color 0.15s;
}

.icon-btn svg { width: 1.125rem; height: 1.125rem; display: block; }
.icon-btn:hover { color: var(--fg); background: var(--sunken); text-decoration: none; }

.auth-link,
.auth-btn {
	flex: none;
	white-space: nowrap;
	padding: 0.5rem 0.75rem;
	border-radius: var(--radius-control);
	font-size: var(--text-body);
	line-height: var(--leading-body);
	font-weight: 500;
	transition: color 0.15s, background-color 0.15s;
}

.auth-link { color: var(--fg-muted); }
.auth-link:hover { color: var(--fg); text-decoration: none; }
.auth-btn { background: var(--primary); color: var(--primary-fg); }
.auth-btn:hover { background: var(--primary-hover); color: var(--primary-fg); text-decoration: none; }

/* ---------------------------------------------------------------------------
   Search dialog — the whole page, blurred, with one column of results.
   --------------------------------------------------------------------------- */
.search-dialog {
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--fg);
	overflow: hidden;
}

.search-dialog::backdrop {
	background: color-mix(in oklch, var(--canvas) 82%, transparent);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}

.search-panel {
	height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 2.5rem 1.25rem 4rem;
}

.search-head,
.search-input,
.search-results {
	width: 100%;
	max-width: 46rem;
	margin-inline: auto;
}

.search-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.search-label {
	margin: 0;
	font-size: var(--text-caption);
	font-weight: 500;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--fg-subtle);
}

.search-input {
	display: block;
	margin-top: 1.5rem;
	padding: 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: var(--text-headline);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: var(--tracking-tight);
	color: var(--fg);
}

.search-input:focus { outline: none; }
.search-input::placeholder { color: var(--fg-subtle); opacity: 1; }
.search-input::-webkit-search-cancel-button { display: none; }

.search-results { margin-top: 2rem; }

.search-hit { display: block; padding: 1.125rem 0; border-bottom: 1px solid var(--border); }
.search-hit:hover { text-decoration: none; }
.search-hit h2 { margin: 0.3125rem 0 0; font-size: var(--text-title); line-height: 1.25; font-weight: 700; letter-spacing: var(--tracking-tight); color: var(--fg); }
.search-hit:hover h2 { color: var(--accent); }

.search-meta { margin: 0; font-size: var(--text-caption); color: var(--fg-subtle); }

.search-cat {
	margin-right: 0.5rem;
	font-weight: 600;
	letter-spacing: var(--tracking-kicker);
	text-transform: uppercase;
	color: var(--accent);
}

.search-empty { margin: 0; padding: 1.125rem 0; color: var(--fg-muted); }
/* Scoped to the panel to outrank .more-btn's display:inline-block, which is
   defined later in this file — an inline-block ignores auto margins, so the
   button sat at the left edge instead of centring. width: fit-content because
   a plain display:block would stretch the pill across the whole panel. */
.search-panel .search-more { display: block; width: fit-content; margin: 2rem auto 0; }
.search-panel .search-more[hidden] { display: none; }

.nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	color: var(--fg-muted);
	border-radius: var(--radius-control);
	padding: 0.5rem;
	line-height: 0;
	cursor: pointer;
}

.nav-toggle:hover { background: var(--sunken); }
.nav-toggle svg { width: 1.25rem; height: 1.25rem; display: block; }
.nav-toggle .icon-close,
.nav-toggle.is-open .icon-menu { display: none; }
.nav-toggle.is-open .icon-close { display: block; }

/* ---------------------------------------------------------------------------
   Shared pieces
   --------------------------------------------------------------------------- */
/* The app has two uppercase idioms and uses them for different jobs: an
   editorial kicker (caption / 600 / 0.2em / accent) above a headline, and a
   structural label (caption / 500 / 0.025em / fg-subtle) over a panel or a
   table. A post's category is the first; "Trending now" is the second. */
.eyebrow {
	margin: 0;
	font-size: var(--text-caption);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--tracking-kicker);
	color: var(--accent);
}

.eyebrow a { color: inherit; }
.eyebrow a:hover { color: var(--accent-hover); text-decoration: none; }

.byline { margin: 0; display: flex; align-items: center; gap: 0.4rem; font-size: var(--text-caption); color: var(--fg-muted); }
.byline .who { font-weight: 600; color: var(--fg); }
.byline img { width: 22px; height: 22px; border-radius: var(--radius-pill); display: block; }
.byline .sep { color: var(--fg-subtle); }

.thumb { display: block; border-radius: var(--radius-surface); overflow: hidden; background: var(--sunken); }
.thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------------------
   Hero — one lead story, image left, words right
   --------------------------------------------------------------------------- */
.hero { padding: 2rem 0 0; display: grid; grid-template-columns: 0.85fr 1fr; gap: 2.5rem; align-items: center; }
.hero .thumb { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-surface); }


.hero .pick {
	position: absolute;
	top: 0.875rem;
	left: 0.875rem;
	background: var(--surface);
	color: var(--fg);
	font-size: var(--text-caption);
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	padding: 0.25rem 0.6rem;
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-card);
}

.hero h2 { margin: 0.625rem 0 0; font-size: var(--text-headline); line-height: 1.1; font-weight: 700; letter-spacing: var(--tracking-tight); }
.hero h2 a { color: var(--fg); }
.hero h2 a:hover { color: var(--accent); text-decoration: none; }
.hero .dek {
	margin: 0.875rem 0 0;
	color: var(--fg-muted);
	font-size: var(--text-body-lg);
	line-height: 1.6;
	max-width: 32rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.hero .byline { margin-top: 1rem; font-size: var(--text-body); }

/* ---------------------------------------------------------------------------
   Trending — three across
   --------------------------------------------------------------------------- */
.section-label { margin: 2.25rem 0 0.875rem; font-size: var(--text-caption); font-weight: 500; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-subtle); }

.trending { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }

.trending article {
	border: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	border-radius: var(--radius-surface);
	background: var(--surface);
	overflow: hidden;
	transition: border-color 0.15s;
}

.trending article:hover { border-color: color-mix(in oklch, var(--accent) 45%, var(--border)); }
.trending .thumb { flex: none; border-radius: 0; aspect-ratio: 2.4 / 1; }
.trending .body { display: flex; flex-direction: column; flex: 1; padding: 0.75rem 0.875rem 0.875rem; }
.trending h3 {
	margin: 0.3125rem 0 0;
	font-size: var(--text-body);
	line-height: 1.35;
	font-weight: 600;
	letter-spacing: var(--tracking-tight);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.trending h3 a { color: var(--fg); }
.trending h3 a:hover { color: var(--accent); text-decoration: none; }
.trending .byline { margin-top: auto; padding-top: 0.4375rem; font-size: var(--text-caption); }

/* ---------------------------------------------------------------------------
   Filter row
   --------------------------------------------------------------------------- */
.filters { margin: 2.25rem 0 1.25rem; display: grid; grid-template-columns: minmax(0, 1fr) var(--side); gap: var(--layout-gap); align-items: center; }

/* The arrows sit over the ends of the row, each on a fade of the page
   background, so pills slide out of view under them rather than stopping dead
   at a clipped edge. Both are tied to the same state as the arrow they belong
   to: no fade at an end you have already reached. */
.pills-wrap { position: relative; display: flex; align-items: center; min-width: 0; flex: 1 1 auto; }

.pills-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	background: var(--surface);
	color: var(--fg-muted);
	box-shadow: var(--shadow-card);
	cursor: pointer;
}

.pills-nav svg { width: 0.875rem; height: 0.875rem; display: block; }
.pills-nav:hover { color: var(--fg); border-color: var(--border-strong); }
.pills-nav[hidden] { display: none; }
.pills-nav.is-prev { left: 0; }
.pills-nav.is-next { right: 0; }

.pills-wrap.show-prev::before,
.pills-wrap.show-next::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 1;
	width: 3.5rem;
	pointer-events: none;
}

.pills-wrap.show-prev::before { left: 0; background: linear-gradient(to right, var(--canvas) 1.75rem, transparent); }
.pills-wrap.show-next::after { right: 0; background: linear-gradient(to left, var(--canvas) 1.75rem, transparent); }

.pills {
	display: flex;
	gap: 0.5rem;
	min-width: 0;
	width: 100%;
	scroll-padding: 0 2.5rem;
	overflow-x: auto;
	/* No scrollbar chrome: on a row this short it's louder than the pills.
	   Scrolls by wheel, trackpad, touch, and by tabbing to an off-screen pill. */
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 1px;
}

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

.pill {
	display: inline-block;
	flex: none;
	white-space: nowrap;
	padding: 0.35rem 0.8rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	background: var(--surface);
	font-size: var(--text-caption);
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--fg-muted);
}

.pill:hover { color: var(--fg); border-color: var(--border-strong); text-decoration: none; }
.pill.is-current { background: var(--fg); border-color: var(--fg); color: var(--canvas); }
.filters-right { display: flex; align-items: center; justify-content: space-between; gap: 0.875rem; }
.filters .count { font-size: var(--text-body); color: var(--fg-subtle); margin: 0; white-space: nowrap; }
.filters .sort { margin: 0; }

.filters .sort select {
	font: inherit;
	font-size: var(--text-body);
	color: var(--fg);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-control);
	padding: 0.35rem 2rem 0.35rem 0.9rem;
	cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2371717a' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 10px;
}

.filters .sort select:hover { border-color: var(--border-strong); }

/* The arrow is a background image, so it can't inherit currentColor — dark mode
   needs its own copy or it disappears into the surface. */
@media (prefers-color-scheme: dark) {
	.filters .sort select {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23a1a1aa' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
	}
}

/* ---------------------------------------------------------------------------
   The list + sidebar
   --------------------------------------------------------------------------- */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--side); gap: var(--layout-gap); align-items: start; }

.stream article { display: grid; grid-template-columns: minmax(0, 1fr) 13rem; gap: 2rem; align-items: center; padding: 1.375rem 0; border-bottom: 1px solid var(--border); }
.stream article:first-child { padding-top: 0; }
.stream article:last-of-type { border-bottom: 0; }
.stream h2 { margin: 0.4375rem 0 0; font-size: var(--text-title); line-height: 1.25; font-weight: 700; letter-spacing: var(--tracking-tight); }
.stream h2 a { color: var(--fg); }
.stream h2 a:hover { color: var(--accent); text-decoration: none; }
.stream .dek { margin: 0.5rem 0 0; color: var(--fg-muted); font-size: var(--text-body); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.stream .meta { margin: 0.625rem 0 0; font-size: var(--text-caption); color: var(--fg-subtle); }
.stream .thumb { aspect-ratio: 2 / 1; }

.side { display: grid; gap: 1.25rem; position: sticky; top: 5rem; }
.side .box { border: 1px solid var(--border); border-radius: var(--radius-surface); background: var(--surface); padding: 1.125rem 1.25rem 1.25rem; }
.side h2 { margin: 0 0 0.875rem; font-size: var(--text-caption); font-weight: 500; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-subtle); }
.tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.tags a {
	/* A deliberate step below --text-caption: these are a dense secondary index,
	   not labels you read one at a time. */
	font-size: 0.6875rem;
	color: var(--fg-muted);
	background: transparent;
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	padding: 0.2rem 0.55rem;
	line-height: 1.5;
}

.tags a:hover { border-color: var(--border-strong); }

.tags a:hover { color: var(--accent); text-decoration: none; }
/* Subscribe box — deliberately plain: a label, a field, a button. Anything
   more decorated than the two lists around it would read as an advert. */
.side .subscribe form { display: grid; gap: 0.5rem; }

.side .subscribe input {
	width: 100%;
	font: inherit;
	font-size: var(--text-body);
	line-height: var(--leading-body);
	color: var(--fg);
	background: var(--canvas);
	border: 1px solid var(--border);
	border-radius: var(--radius-control);
	padding: 0.5rem 0.625rem;
}

.side .subscribe input:hover { border-color: var(--border-strong); }
.side .subscribe input::placeholder { color: var(--fg-subtle); }

.side .subscribe button {
	font: inherit;
	font-size: var(--text-body);
	line-height: var(--leading-body);
	font-weight: 600;
	color: var(--primary-fg);
	background: var(--primary);
	border: 0;
	border-radius: var(--radius-control);
	padding: 0.5rem 0.75rem;
}

.side .subscribe button:hover { background: var(--primary-hover); }
.side .subscribe p { margin: 0.625rem 0 0; font-size: var(--text-caption); line-height: 1.5; color: var(--fg-subtle); }

/* The reply after submitting. Colour carries the outcome, but the wording says
   it too — a green line means nothing to a reader who cannot see the green. */
.side .subscribe .note { margin: 0 0 0.75rem; font-weight: 500; }
.side .subscribe .note.ok { color: var(--success-fg); }
.side .subscribe .note.error { color: var(--warning-fg); }

/* Label kept for screen readers; the placeholder carries it visually. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.side .recent { display: grid; gap: 0.875rem; }
.side .recent a { display: block; font-size: var(--text-body); font-weight: 600; line-height: 1.35; color: var(--fg); }
.side .recent a:hover { color: var(--accent); text-decoration: none; }
.side .recent span { display: block; margin-top: 0.15rem; font-size: var(--text-caption); color: var(--fg-subtle); font-weight: 400; }

/* ---------------------------------------------------------------------------
   Pagination, footer
   --------------------------------------------------------------------------- */
.load-more { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--border); text-align: center; }

.more-btn {
	display: inline-block;
	padding: 0.6rem 1.5rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	background: var(--surface);
	color: var(--fg);
	font-size: var(--text-body);
	font-weight: 600;
}

.more-btn:hover { border-color: var(--border-strong); text-decoration: none; }
.more-btn[aria-busy="true"] { opacity: 0.55; pointer-events: none; }
.load-more .count { margin: 0.75rem 0 0; font-size: var(--text-caption); color: var(--fg-subtle); }

.pagination { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--border); display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; font-size: var(--text-body); }
.pagination .page-numbers { padding: 0.35rem 0.7rem; border-radius: var(--radius-control); color: var(--fg-muted); }
.pagination .page-numbers:hover { background: var(--sunken); color: var(--fg); text-decoration: none; }
.pagination .page-numbers.current { background: var(--primary); color: var(--primary-fg); font-weight: 600; }

/* py-6, caption text, no copyright line — the app carries none, because the
   watermark below is the sign-off. */
.site-footer {
	padding: 1.5rem 0;
	background: var(--surface);
	border-top: 1px solid var(--border);
	font-size: var(--text-caption);
	color: var(--fg-muted);
}

/* Stacked first, side by side once there is room — the app's
   "flex-col ... sm:flex-row", at the same 40rem breakpoint. The links do not
   shrink, so without this the description was squeezed to one word per line. */
.site-footer .cols { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 1rem; }

@media (min-width: 40rem) {
	.site-footer .cols { flex-direction: row; }
}
.site-footer p { margin: 0; }
.site-footer .about { max-width: 42rem; }
.site-footer .legal { margin-top: 0.25rem; color: var(--fg-subtle); line-height: 1.6; }
.site-footer nav { display: flex; flex-shrink: 0; align-items: center; gap: 1rem; flex-wrap: wrap; }
.site-footer nav a { color: var(--fg-muted); }
.site-footer nav a:hover { color: var(--fg); text-decoration: none; }

/* ---------------------------------------------------------------------------
   Brand watermark — the app's, ported verbatim. A faint word across the full
   width, plus a bright copy masked to a circle that follows the pointer.
   --------------------------------------------------------------------------- */
.wm { position: relative; overflow: hidden; user-select: none; background: var(--surface); }

.wm-word {
	display: block;
	width: 100%;
	text-align: center;
	white-space: nowrap;
	font-weight: 800;
	font-size: 12.5vw;
	line-height: 0.9;
	letter-spacing: -0.045em;
	padding-bottom: 0.08em;
	background-image: linear-gradient(90deg, var(--primary), var(--accent), var(--primary));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.wm-base { opacity: 0.07; }

.wm-bright {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms ease;
	--wm-x: 50%;
	--wm-y: 50%;
	-webkit-mask-image: radial-gradient(circle 150px at var(--wm-x) var(--wm-y), #000 0%, transparent 62%);
	mask-image: radial-gradient(circle 150px at var(--wm-x) var(--wm-y), #000 0%, transparent 62%);
}

/* ---------------------------------------------------------------------------
   Small screens
   --------------------------------------------------------------------------- */
@media (max-width: 48rem) {
	.nav-toggle { display: flex; }
	.search-input { font-size: var(--text-title); }
	.search-panel { padding-top: 1.5rem; }

	/* Search, Register and the burger fit on a phone; adding "Log in" does
	   not. It is the least urgent of the three, so it is the one that goes. */
	.auth-link { display: none; }

	.nav {
		display: none;
		position: absolute;
		top: 4rem;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		/* An overlay panel, so it gets the app's raised surface and overlay
		   shadow rather than sitting flat against the page. */
		background: var(--surface-raised);
		border-bottom: 1px solid var(--border);
		box-shadow: var(--shadow-overlay);
		padding: 0.5rem 1.25rem 0.875rem;
	}

	.nav.open { display: flex; }
	.nav a { padding: 0.55rem 0.5rem; border-radius: var(--radius-control); }

	.hero { grid-template-columns: 1fr; gap: 1.25rem; padding-top: 1.5rem; }
	.hero h2 { font-size: var(--text-title); }
	.trending { grid-template-columns: 1fr; }

	/* Pills keep scrolling; the count and sort drop below them rather than
	   squeezing the row down to two visible pills. */
	.filters { grid-template-columns: 1fr; gap: 0.75rem; }

	.layout { grid-template-columns: 1fr; gap: 2rem; }
	.side { position: static; }
	.stream article { grid-template-columns: minmax(0, 1fr) 5.5rem; gap: 1rem; }
	.more-read .grid { grid-template-columns: 1fr; }
	.entry-title { font-size: var(--text-display); }
	.page-head h1 { font-size: var(--text-title); }
}

/* ---------------------------------------------------------------------------
   Single post — proportions taken from the reference: a light dek set apart by
   weight, a byline banded by rules top and bottom, and a body column set airier
   than the listings because this is the part people actually read.
   --------------------------------------------------------------------------- */
.entry { padding: 2.5rem 0 0; }

/* 404 and other standalone heads, on the same ladder as a post title. */
.page-head { padding: 3.5rem 0 1rem; }
.page-head h1 { margin: 0; font-size: var(--text-headline); line-height: 1.1; font-weight: 700; letter-spacing: var(--tracking-tight); }
.page-head p { margin: 0.75rem 0 0; color: var(--fg-muted); font-size: var(--text-body-lg); }

/* The app's strip: h-12, bordered below, sitting on the surface rather than
   the canvas so it reads as part of the header rather than part of the page. */
.crumbs { background: var(--surface); border-bottom: 1px solid var(--border); }

.crumbs nav {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	height: 3rem;
	font-size: var(--text-body);
}

.crumbs a { flex: none; color: var(--fg-muted); }
.crumbs a:hover { color: var(--fg); text-decoration: none; }
.crumbs .sep { flex: none; color: var(--fg-subtle); }

/* A long post title truncates rather than wrapping the band to two lines. */
.crumbs .current { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--fg); }

.entry-kicker {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
	margin: 0 0 1.25rem;
	font-size: var(--text-caption);
	font-weight: 600;
	letter-spacing: var(--tracking-kicker);
	text-transform: uppercase;
	color: var(--accent);
}

.entry-kicker a { color: inherit; }
.entry-kicker a:hover { color: var(--accent-hover); text-decoration: none; }
/* Only the category is the kicker. The date and reading time share the row but
   are metadata, so they take the structural-label treatment instead. */
.entry-kicker span { color: var(--fg-subtle); font-weight: 500; letter-spacing: var(--tracking-wide); }

.entry-title { margin: 0 0 0.75rem; font-size: var(--text-headline); line-height: 1.1; font-weight: 700; letter-spacing: var(--tracking-tight); text-wrap: balance; }

/* Weight 400, not 300 — only 400–700 of Instrument Sans is loaded, so 300
   was being faked by the browser. */
.entry-dek { margin: 0 0 1.75rem; font-size: var(--text-section); font-weight: 400; line-height: 1.6; color: var(--fg-muted); }

.author-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin: 0 0 2rem;
	padding: 1rem 0;
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}

.author-row .identity { display: flex; align-items: center; gap: 0.65rem; }
.author-row img { width: 40px; height: 40px; border-radius: var(--radius-pill); display: block; }
.author-row .name { font-size: var(--text-body); font-weight: 600; color: var(--fg); line-height: 1.3; }
.author-row .bio { font-size: var(--text-caption); color: var(--fg-subtle); line-height: 1.4; }

.entry-thumb { margin: 0 0 2rem; border-radius: var(--radius-surface); overflow: hidden; }
.entry-thumb img { display: block; width: 100%; }

.entry-content { font-size: var(--text-body-lg); line-height: 1.75; }
.entry-content > * + * { margin-top: 1.5rem; }
.entry-content h2 { font-size: var(--text-title); margin-top: 2.75rem; font-weight: 700; letter-spacing: var(--tracking-tight); line-height: 1.25; }
.entry-content h3 { font-size: var(--text-section); margin-top: 2.25rem; font-weight: 600; line-height: 1.35; }
.entry-content h4 { font-size: var(--text-body-lg); margin-top: 2rem; font-weight: 600; }
.entry-content ul, .entry-content ol { padding-left: 1.35rem; }
.entry-content li + li { margin-top: 0.5rem; }
.entry-content img { border-radius: var(--radius-surface); }

.entry-content blockquote {
	margin: 2rem 0;
	padding-left: 1.25rem;
	border-left: 3px solid var(--accent);
	color: var(--fg-muted);
	font-size: var(--text-body-lg);
	font-style: italic;
}

.entry-content blockquote p:first-child { margin-top: 0; }
.entry-content pre, .entry-content code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--text-body); }
.entry-content pre { background: var(--sunken); border: 1px solid var(--border); border-radius: var(--radius-surface); padding: 1rem 1.125rem; overflow-x: auto; line-height: 1.6; }
.entry-content :not(pre) > code { background: var(--sunken); border-radius: var(--radius-control); padding: 0.0625rem 0.25rem; font-size: 0.8125em; color: var(--fg); }
.entry-content table { width: 100%; border-collapse: collapse; font-size: var(--text-body); }
.entry-content th, .entry-content td { border-bottom: 1px solid var(--border); padding: 0.5rem 0.75rem; text-align: left; }

.tag-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 2rem; }
.tag-pills a { font-size: var(--text-caption); color: var(--fg-muted); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 0.25rem 0.65rem; }
.tag-pills a:hover { color: var(--accent); border-color: var(--border-strong); text-decoration: none; }

.cta { margin: 2.5rem 0 0; padding: 1.5rem; background: var(--accent-surface); border-radius: var(--radius-surface); }
.cta h2 { margin: 0; font-size: var(--text-section); font-weight: 600; }
.cta p { margin: 0.375rem 0 0; color: var(--fg-muted); font-size: var(--text-body); }

.btn { display: inline-block; margin-top: 1rem; padding: 0.5rem 0.75rem; border-radius: var(--radius-control); background: var(--primary); color: var(--primary-fg); font-size: var(--text-body); font-weight: 600; }
.btn:hover { background: var(--primary-hover); color: var(--primary-fg); text-decoration: none; }

.more-read { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.more-read h2 { margin: 0 0 1.25rem; font-size: var(--text-section); font-weight: 600; }
.more-read .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.more-read .thumb { aspect-ratio: 16 / 9; margin-bottom: 0.625rem; }
.more-read a.title { display: block; font-size: var(--text-body); font-weight: 600; line-height: 1.35; color: var(--fg); }
.more-read a.title:hover { color: var(--accent); text-decoration: none; }
.more-read span { display: block; margin-top: 0.25rem; font-size: var(--text-caption); color: var(--fg-subtle); }

/* ---------------------------------------------------------------------------
   Post content — every block and shortcode WordPress can emit.

   The reading column is deliberately narrow, so anything that wants to be wider
   has to break out of it. alignwide/alignfull do that with negative margins
   rather than by widening the container, which would ruin the measure for text.
   --------------------------------------------------------------------------- */
.entry-content > *:first-child { margin-top: 0; }

/* Floats and centring (classic editor, and core's align classes) */
.entry-content .alignleft { float: left; margin: 0.4rem 1.5rem 1rem 0; max-width: 50%; }
.entry-content .alignright { float: right; margin: 0.4rem 0 1rem 1.5rem; max-width: 50%; }
.entry-content .aligncenter { display: block; margin-left: auto; margin-right: auto; text-align: center; }
.entry-content::after { content: ""; display: table; clear: both; }

.entry-content .alignwide {
	width: calc(100% + 10rem);
	max-width: 100vw;
	margin-left: -5rem;
	margin-right: -5rem;
}

.entry-content .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	border-radius: 0;
}

.entry-content .alignfull img,
.entry-content .alignfull .wp-block-cover { border-radius: 0; }

/* Captions */
.entry-content figure { margin: 0; }
.entry-content .wp-caption { max-width: 100%; }

.entry-content figcaption,
.entry-content .wp-caption-text {
	margin-top: 0.5rem;
	font-size: var(--text-caption);
	line-height: 1.5;
	color: var(--fg-subtle);
	text-align: center;
}

/* Galleries — core block and the legacy shortcode */
.entry-content .wp-block-gallery { margin: 0; }

.entry-content .gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: 0.75rem;
	margin: 1.5rem 0;
}

.entry-content .gallery-item { margin: 0 !important; width: auto !important; }
.entry-content .gallery img { width: 100%; border-radius: var(--radius-surface); display: block; }
.entry-content .gallery .gallery-caption { font-size: var(--text-caption); color: var(--fg-subtle); }

/* Media: audio, video, embeds. Embeds get an aspect box so a slow iframe
   doesn't collapse the layout and then shove it down when it loads. */
.entry-content audio { width: 100%; display: block; }
.entry-content video { width: 100%; height: auto; border-radius: var(--radius-surface); display: block; }
.entry-content .wp-block-audio figcaption { text-align: left; }

.entry-content .wp-block-embed__wrapper { position: relative; }

.entry-content .wp-embed-aspect-16-9 .wp-block-embed__wrapper,
.entry-content .wp-embed-aspect-4-3 .wp-block-embed__wrapper { aspect-ratio: 16 / 9; }
.entry-content .wp-embed-aspect-4-3 .wp-block-embed__wrapper { aspect-ratio: 4 / 3; }

.entry-content .wp-block-embed iframe,
.entry-content .wp-block-embed__wrapper > iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: var(--radius-surface);
}

/* Twitter and other providers that size themselves shouldn't be forced. */
.entry-content .wp-block-embed:not([class*="wp-embed-aspect"]) .wp-block-embed__wrapper { aspect-ratio: auto; }
.entry-content .wp-block-embed:not([class*="wp-embed-aspect"]) iframe { position: static; height: auto; }

.entry-content iframe,
.entry-content object,
.entry-content embed { max-width: 100%; }

/* Cover, pullquote, separator, buttons */
.entry-content .wp-block-cover { border-radius: var(--radius-surface); overflow: hidden; }
.entry-content .wp-block-cover .wp-block-cover__inner-container { color: #fff; }

.entry-content .wp-block-pullquote {
	border-top: 2px solid var(--border);
	border-bottom: 2px solid var(--border);
	border-left: 0;
	padding: 1.5rem 0;
	text-align: center;
	font-size: var(--text-section);
}

.entry-content .wp-block-separator,
.entry-content hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem auto; }
.entry-content .wp-block-separator.is-style-dots { border: 0; }

.entry-content .wp-block-button__link,
.entry-content .wp-element-button {
	display: inline-block;
	background: var(--primary);
	color: var(--primary-fg);
	border-radius: var(--radius-control);
	padding: 0.5rem 1rem;
	font-size: var(--text-body);
	font-weight: 600;
	text-decoration: none;
}

.entry-content .is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--primary);
	border: 1px solid var(--primary);
}

/* Lists, definition lists, footnotes */
.entry-content dl dt { font-weight: 600; }
.entry-content dl dd { margin: 0 0 0.75rem; color: var(--fg-muted); }
.entry-content .wp-block-footnotes { font-size: var(--text-body); color: var(--fg-muted); }

/* File block and anything else that lands as a plain link row */
.entry-content .wp-block-file {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	background: var(--sunken);
	border-radius: var(--radius-surface);
	padding: 0.75rem 1rem;
	font-size: var(--text-body);
}

/* Tables that are wider than the measure scroll rather than overflow it. */
.entry-content .wp-block-table { overflow-x: auto; }
.entry-content .wp-block-table table { min-width: 32rem; }
.entry-content th { background: var(--sunken); font-weight: 600; }

/* ---------------------------------------------------------------------------
   Roundup posts — the classes app/Services/RoundupBlocks.php emits. Core ships
   the layout for columns, groups and buttons; this only paints them, in tokens,
   so the panels follow dark mode instead of carrying baked-in hex.
   --------------------------------------------------------------------------- */
.entry-content .wpa-lead {
	font-size: var(--text-section);
	line-height: 1.6;
	color: var(--fg-muted);
}

.entry-content .wpa-lead strong { color: var(--fg); }

/* Figures first, label under — the number is what the eye is hunting for. */
.entry-content .wpa-stats { gap: 1.25rem; margin-top: 1.5rem; }
.entry-content .wpa-stats .wp-block-column { min-width: 0; }

.entry-content .wpa-stat-value {
	margin: 0;
	font-size: var(--text-title);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: var(--tracking-tight);
	font-variant-numeric: tabular-nums;
	color: var(--fg);
}

.entry-content .wpa-stat-label {
	margin: 0.125rem 0 0;
	font-size: var(--text-caption);
	font-weight: 500;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--fg-subtle);
}

.entry-content .wpa-note {
	font-size: var(--text-body);
	line-height: 1.6;
	color: var(--fg-subtle);
}

/* Every column after the first holds a number, and numbers read right-aligned
   and tabular — otherwise the eye can't compare down the column. */
.entry-content .wpa-figures th:not(:first-child),
.entry-content .wpa-figures td:not(:first-child) {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Core's stripe colour is a baked light grey that turns to mud in dark mode. */
.entry-content .wp-block-table.is-style-stripes { border-bottom: 0; }
.entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: var(--sunken); }
.entry-content .wp-block-table.is-style-stripes th,
.entry-content .wp-block-table.is-style-stripes td { border-color: var(--border); }

.entry-content .wpa-notice,
.entry-content .wpa-cta {
	padding: 1.25rem 1.5rem;
	border-radius: var(--radius-surface);
}

.entry-content .wpa-notice { background: var(--sunken); border-left: 3px solid var(--accent); }
/* Outlined, not filled — the theme closes every post with a filled accent
   panel, and two solid blocks back to back read as one thing said twice. */
.entry-content .wpa-cta { background: var(--surface); border: 1px solid var(--border); }
.entry-content .wpa-cta > :first-child { margin-top: 0; }
.entry-content .wpa-cta h3 { margin-top: 0; font-size: var(--text-section); font-weight: 600; }
.entry-content .wpa-cta p { color: var(--fg-muted); font-size: var(--text-body); }

/* Sticky posts get a marker in listings. */
.stream article.sticky h2 a::before { content: "★ "; color: var(--accent); }

/* Very long unbroken strings (URLs in test data) must not widen the page. */
.entry-content { overflow-wrap: break-word; }
.entry-content pre { white-space: pre; }

/* ---------------------------------------------------------------------------
   Comments
   --------------------------------------------------------------------------- */
.comments h2 { margin: 0 0 1.5rem; font-size: var(--text-section); font-weight: 600; }
.comments ol { list-style: none; margin: 0; padding: 0; }
.comments li { margin: 0; }

/* Top-level comments are separated by a rule rather than boxed. A card per
   comment turns a thread into a stack of panels, and once replies nest the
   panels stair-step to the right until, at the fifth level WordPress allows,
   they run out of column. */
.comments > ol > li + li { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }

/* Replies hang off a thread line instead. One line, one indent per level, so
   depth reads as depth and nothing gets narrower than it can hold. */
.comments .children {
	margin-top: 1.25rem;
	padding-left: 1.125rem;
	border-left: 2px solid var(--border);
}

.comments .children > li + li { margin-top: 1.25rem; }

.comments .who { display: flex; align-items: center; gap: 0.5rem; font-size: var(--text-body); line-height: var(--leading-body); }
.comments .who img { width: 28px; height: 28px; border-radius: var(--radius-pill); }
.comments .who b { color: var(--fg); }
.comments .when { color: var(--fg-subtle); font-size: var(--text-caption); }
.comments .body { margin-top: 0.5rem; font-size: var(--text-body); line-height: 1.65; color: var(--fg-muted); }
.comments .body > :first-child { margin-top: 0; }
.comments .body > :last-child { margin-bottom: 0; }

/* Moderation is on, so an author sees their own comment held. Say so clearly —
   a comment that silently looks published is how people post it three times. */
.comments .pending {
	margin: 0 0 0.5rem;
	font-size: var(--text-caption);
	font-weight: 500;
	color: var(--warning-fg);
}

.comments .reply { margin-top: 0.5rem; font-size: var(--text-caption); }
.comments .reply a { color: var(--fg-muted); font-weight: 500; }
.comments .reply a:hover { color: var(--accent); text-decoration: none; }

.comment-respond { margin-top: 2rem; }
.comment-respond label { display: block; font-size: var(--text-body); color: var(--fg-muted); margin-bottom: 0.25rem; }

.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"],
.comment-respond textarea {
	width: 100%;
	font: inherit;
	font-size: var(--text-body);
	color: var(--fg);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-control);
	padding: 0.6rem 0.75rem;
	margin-bottom: 1rem;
}

.comment-respond textarea { min-height: 7rem; resize: vertical; }

/* The consent row is a checkbox and its label, so it reads as one sentence.
   The blanket "label { display: block }" above is right for the text fields —
   it puts each label over its input — and wrong here, where it pushed the
   sentence onto the line below its own tick box. */
.comment-respond .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.comment-respond .comment-form-cookies-consent label {
	display: inline;
	margin: 0;
	font-size: var(--text-body);
	line-height: 1.5;
}

.comment-respond input[type="checkbox"] {
	flex: none;
	width: auto;
	/* Optically level with the first line of the label rather than its box. */
	margin: 0.2rem 0 0;
	accent-color: var(--primary);
}
.comment-respond input:hover, .comment-respond textarea:hover { border-color: var(--border-strong); }

.comment-respond .submit {
	background: var(--primary);
	color: var(--primary-fg);
	border: 0;
	border-radius: var(--radius-control);
	padding: 0.55rem 1.1rem;
	font: inherit;
	font-size: var(--text-body);
	font-weight: 600;
	cursor: pointer;
}

.comment-respond .submit:hover { background: var(--primary-hover); }

@media (max-width: 48rem) {
	.entry-content .alignwide { width: 100%; margin-left: 0; margin-right: 0; }
	.entry-content .alignleft, .entry-content .alignright { float: none; margin: 1rem 0; max-width: 100%; }
}