/* ==========================================================================
   Homepage (front-page.html). Post rows are native Query Loops; this styles
   the featured rotator, card grids, explore, and subscribe. Colors + font
   families use theme.json tokens; block text sizing stays on the blocks.
   ========================================================================== */

/* ---- Featured "In This Issue" hero — green band + overlapping white card ---- */
.wulr-featured {
	position: relative;
	overflow: visible;
	--wulr-green-h: 132px;
}
.wulr-featured::before { /* dark-green band continuing from the header */
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: var(--wulr-green-h);
	background: var(--wp--preset--color--primary);
	z-index: 0;
}
.wulr-featured::after {
	/* Brand double-rule at the green edge; shows in the gutters beside the card.
	   Built as ONE element with a hard-stop gradient (rather than the two abspos
	   pseudo-elements used elsewhere) because ::before is already spent on the
	   green band above. Geometry comes from the shared rule tokens — see
	   global.css → brand double-rule mark. */
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(var(--wulr-green-h) + var(--wulr-rule-offset));
	height: var(--wulr-rule-span);
	background: linear-gradient(
		to bottom,
		var(--wp--preset--color--primary) 0,
		var(--wp--preset--color--primary) var(--wulr-rule-thick),
		transparent var(--wulr-rule-thick),
		transparent var(--wulr-rule-thin-start),
		var(--wp--preset--color--primary) var(--wulr-rule-thin-start),
		var(--wp--preset--color--primary) var(--wulr-rule-span)
	);
	z-index: 0;
}
.wulr-featured-card {
	position: relative;
	z-index: 1;
	max-width: 960px;
	/* Padding is a block attribute (36px / spacing|card-wide / 44px) so the
	   client can retune the card inset in the editor. */
	border-radius: 2px;
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.04),
		0 4px 12px rgba(0, 0, 0, 0.05),
		0 16px 40px rgba(0, 0, 0, 0.06),
		0 32px 80px rgba(0, 0, 0, 0.05);
}

/* Masthead row: Volume · crest · Issue */
.wulr-hero-masthead {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--body);
}
.wulr-hero-vol,
.wulr-hero-iss {
	color: inherit;
	text-decoration: none;
	font-size: 18px;
	padding-bottom: 4px;
	border-bottom: 1px solid currentColor;
	transition: color 0.15s, border-color 0.15s;
}
.wulr-hero-vol:hover,
.wulr-hero-iss:hover { color: var(--wp--preset--color--accent); }
.wulr-hero-crest {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%, -64px);
	/* Stack both shields in one grid cell so each keeps its own intrinsic
	   aspect ratio (width:auto derives from height) and both stay centered —
	   giving an even white keyline on all four sides. */
	display: grid;
	place-items: center;
}
.wulr-hero-crest .wulr-crest-bg,
.wulr-hero-crest .wulr-crest-fg {
	grid-area: 1 / 1;
	width: auto;
}
.wulr-hero-crest .wulr-crest-bg {
	height: 124px;
	color: var(--wp--preset--color--white);
	--shield-body: var(--wp--preset--color--white);
	z-index: 0;
}
.wulr-hero-crest .wulr-crest-fg {
	height: 96px;
	color: var(--wp--preset--color--accent);
	z-index: 1;
}
.wulr-featured-eyebrow { margin-top: 56px; }

/* Slides (rotator — progressive enhancement; no JS shows all stacked).
   Active slide is in flow (defines height); others are absolutely stacked and
   fade + drift in/out. JS locks the track to the tallest slide so it never
   jumps. */
.js .wulr-featured-track { position: relative; list-style: none; padding: 0; margin: 0; }
.js .wulr-featured-track > li {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.26s ease, transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.js .wulr-featured-track > li.is-active {
	position: relative;
	opacity: 1;
	pointer-events: auto;
	z-index: 1;
	transition: opacity 0.3s ease 0.24s, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) 0.24s;
}
/* Before home.js initializes (adds .is-ready + .is-active), keep the first slide
   in flow + visible so the hero has its height at first paint. Without this, all
   slides are absolute/opacity:0 → the track collapses to 0 and the Online section
   below jumps up into the hero, then snaps down when JS runs (a load flash). */
.js .wulr-featured-track:not(.is-ready) > li:first-child {
	position: relative;
	opacity: 1;
	pointer-events: auto;
}
.wulr-featured-slide { text-align: center; position: relative; }
/* Whole-slide link (wp-fse-theme accessibility.md — Variant 2): the card
   already has one native link (the post title), so stretch that anchor across
   the slide with ::after rather than injecting an overlay. One link per card;
   the title text is the accessible name. Secondary links (topic tags) sit
   above the overlay so they stay clickable. */
.wulr-featured-title a::after,
.wulr-card-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
/* Rotator component: the featured title size/weight is a fixed design value
   (not per-instance editor-tuned), so it is set here to match the comp. */
.wulr-featured-title {
	margin-top: 6px;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
	font-size: clamp(32px, 3.6vw, 50px);
}
/* Longer headlines step down so they don't overwhelm the card (JS adds the
   class per slide by title length — mirrors the comp). */
.wulr-featured-slide.is-long .wulr-featured-title { font-size: clamp(28px, 3vw, 42px); }
.wulr-featured-slide.is-xlong .wulr-featured-title { font-size: clamp(24px, 2.5vw, 34px); }
.wulr-featured-title a { color: var(--wp--preset--color--accent); text-decoration: none; }
.wulr-featured-title a:hover,
.wulr-featured-title a:focus-visible {
	color: var(--wp--preset--color--red-dk);
	text-decoration: underline;
	text-underline-offset: 5px;
}
.wulr-byline {
	font-family: var(--wp--preset--font-family--primary);
	font-style: italic;
	color: var(--wp--preset--color--stone);
}
.wulr-featured-slide .wulr-byline { font-size: 20px; }
.wulr-dek {
	color: var(--wp--preset--color--body);
	line-height: 1.5;
	max-width: 34em;
	margin-left: auto;
	margin-right: auto;
}
.wulr-topics {
	font-family: var(--wp--preset--font-family--sans);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--stone);
}
.wulr-topics a { color: var(--wp--preset--color--stone); text-decoration: none; }
.wulr-topics a:hover { color: var(--wp--preset--color--accent); }
/* Byline + type on one credit line below the excerpt: "Author · Article". */
.wulr-featured-meta {
	display: flex;
	justify-content: center;
	align-items: baseline;
	flex-wrap: wrap;
	/* Zero the inherited global block-gap; spacing comes from the bullet's
	   own 10px ::before margins so name → · → type stays tight + symmetric. */
	gap: 0;
}
.wulr-featured-type {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}
/* Bullet divider before the type (only renders when a type is present). */
.wulr-featured-meta .wulr-featured-type::before {
	content: "\00B7";
	margin: 0 10px;
	color: var(--wp--preset--color--stone);
}

/* Numbered pagination (centered, below) + arrows on the card edges */
.wulr-featured-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px 14px;
	margin-top: 26px;
}
.wulr-featured-number {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.08em;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--stone);
	background: none;
	border: 0;
	padding: 8px 4px;
	cursor: pointer;
	line-height: 1;
	border-bottom: 2px solid transparent;
	transition: color 0.15s, border-color 0.15s;
}
.wulr-featured-number:hover { color: var(--wp--preset--color--accent); }
.wulr-featured-playpause {
	width: 30px;
	height: 30px;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 999px;
	background: none;
	padding: 0;
	cursor: pointer;
	color: var(--wp--preset--color--accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-right: 10px;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.wulr-featured-arrow {
	position: absolute;
	top: 46%;
	width: 52px;
	height: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* stone (>=3:1) — carousel arrow boundary on the muted section; rule token was ~1.5:1 (1.4.11). */
	border: 1px solid var(--wp--preset--color--stone);
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--body);
	cursor: pointer;
	z-index: 5;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.wulr-featured-arrow svg { width: 22px; height: 22px; }
.wulr-featured-arrow.prev { left: -26px; }
.wulr-featured-arrow.next { right: -26px; }

@media (max-width: 640px) {
	.wulr-featured { --wulr-green-h: 120px; }
	/* No padding override here: the block attribute renders inline and would
	   win regardless. The narrow-screen inset now comes from the fluid
	   spacing|card-wide preset (28px at mobile widths). */
	/* Arrows drop from the card's mid-edges (where they overlapped the centered
	   hero text) to its bottom corners, flanking the numbered pagination row. */
	.wulr-featured-arrow {
		width: 38px;
		height: 38px;
		top: auto;
		bottom: 28px;
	}
	.wulr-featured-arrow svg { width: 18px; height: 18px; }
	.wulr-featured-arrow.prev { left: 12px; }
	.wulr-featured-arrow.next { right: 12px; }
	/* Keep the pagination row clear of the corner arrows. */
	.wulr-featured-numbers { padding-inline: 52px; }
	/* Hero excerpt: two lines max. */
	.wulr-featured-slide .wulr-dek .wp-block-post-excerpt__excerpt,
	.wulr-featured-slide .wulr-dek p {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	/* Smaller crest + masthead type so "Volume 103 · crest · Issue No. 04"
	   fits beside the crest instead of running behind it. */
	.wulr-hero-vol,
	.wulr-hero-iss { font-size: 12px; }
	.wulr-hero-crest { transform: translate(-50%, -56px); }
	.wulr-hero-crest .wulr-crest-bg { height: 92px; }
	.wulr-hero-crest .wulr-crest-fg { height: 70px; }
}
@media (min-width: 981px) {
	.wulr-featured { --wulr-green-h: 240px; }
}
@media (min-width: 1200px) {
	.wulr-featured-arrow.prev { left: -72px; }
	.wulr-featured-arrow.next { right: -72px; }
}

/* ---- Section heads ---- */
.wulr-section-head { align-items: baseline; }
/* Linked section title with trailing arrow — red, shifts to green on hover
   (matches comp "Online Edition →"). Arrow is a currentColor mask so it
   recolors with the link. */
.wulr-section-head h2 { margin: 0; }
/* Section title is a fixed component size (matches comp 34px), not editor-tuned. */
.wulr-section-title {
	font-size: clamp(26px, 3.2vw, 34px);
	line-height: 1;
	letter-spacing: -0.015em;
}
.wulr-section-title a {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
	transition: gap 0.15s, color 0.15s;
}
.wulr-section-title a:hover,
.wulr-section-title a:focus-visible { gap: 21px; color: var(--wp--preset--color--primary); }
.wulr-section-title a::after {
	content: "";
	width: 30px;
	height: 17px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 17'%3E%3Cpath d='M0 8.5h28M21.5 2 28 8.5 21.5 15' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 17'%3E%3Cpath d='M0 8.5h28M21.5 2 28 8.5 21.5 15' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.wulr-viewall a {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--body);
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--body);
	padding-bottom: 2px;
}

/* ---- Card rails (horizontal scroll, side-to-side) ---- */
.wulr-card-track {
	list-style: none;
	margin: 0;
	padding: 4px 0 22px;
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.wulr-card-track::-webkit-scrollbar { display: none; }
.wulr-card-track { align-items: stretch; }
.wulr-card-track > li {
	flex: 0 0 clamp(258px, 27vw, 326px);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
}
.wulr-card {
	position: relative;
	height: 100%;
	min-height: 19rem; /* ~304px floor so a card of all-short content never looks squat */
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--white);
	border-top: 3px solid var(--wp--preset--color--accent);
	border-radius: 2px;
	/* Padding is a block attribute (spacing|card preset, the same fluid
	   clamp) so it is editable per card group rather than locked in here. */
	transition: box-shadow 0.15s, transform 0.15s;
}
.wulr-card:hover { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08); transform: translateY(-2px); }
/* Whole-card link (wp-fse-theme accessibility.md — Variant 2): the card has one
   native link (the post title), so stretch that anchor over the card rather than
   injecting an overlay. Date + author are non-links, so no secondary links to lift.
   (Overlay ::after is consolidated with .wulr-featured-title a::after above.) */
/* Byline pinned to the card bottom on every card (client feedback 2026-07-20;
   Online previously top-aligned). The margin-top:auto pin collapses to zero
   when a long title fills the card, so the padding guarantees a minimum gap
   between title and author. */
/* color: byline a shade darker than the excerpt (dek is --stone) so the author
   name reads as the stronger element on the card. */
.wulr-card .wulr-byline { margin-top: auto; padding-top: 1.5rem; color: var(--wp--preset--color--ink-2); }
.wulr-card-meta {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	letter-spacing: 0.08rem;
	text-transform: uppercase;
	color: var(--wp--preset--color--stone);
	display: flex;
	gap: 10px;
	align-items: center;
}
/* Article type: red text at the same size + tracking as the rest of the meta
   row (the date), not a filled box. */
.wulr-card-type { color: var(--wp--preset--color--accent); }
/* The vol/issue label must never break mid-text (an orphaned "3" wrapping to
   its own line reads as mis-centered); if the row runs out of room the whole
   label wraps below the type label, flush left. */
.wulr-card-vol { white-space: nowrap; letter-spacing: 0.08rem; }
.wulr-card .wulr-card-meta { flex-wrap: wrap; }
/* Date + vol/iss are stone (gray) on every card variant, matching the byline;
   only the .wulr-card-type text is red. */
/* lint-allow: coincidental generic accent-link; not a shared component with .wulr-featured-title a */
.wulr-card-meta a { color: var(--wp--preset--color--accent); text-decoration: none; }
/* Card title is a fixed component size (comp: 22px base / 28px online), not editor-tuned. */
.wulr-card-title {
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.005em;
	font-size: clamp(20px, 2.2vw, 22px);
	margin-top: 1rem; /* more space below the meta eyebrow */
}
.wulr-card-title a {
	color: var(--wp--preset--color--body);
	text-decoration: none;
	transition: color 0.15s;
}
.wulr-card-title a:hover,
.wulr-card-title a:focus-visible { color: var(--wp--preset--color--accent); }
.wulr-card:hover .wulr-card-title a { color: var(--wp--preset--color--accent); }

/* Online Edition: wider cards (two full + a peek) with a 3-line dek — matches comp */
.wulr-online .wulr-card-track > li { flex: 0 0 clamp(300px, calc(50vw - 110px), 550px); }
/* Print Archive: three full cards with a peek of the fourth (the default rail is
   ~4-up). The rail bleeds right, so its visible span runs container-left →
   viewport edge = 50vw + 660px; a third of that (50vw/3 + 176px, after gaps +
   peek) yields 3 across with ~60px of the next card showing on desktop. */
.wulr-print .wulr-card-track > li { flex: 0 0 clamp(360px, calc(50vw / 3 + 176px), 520px); }
.wulr-online .wulr-card-title { font-size: clamp(24px, 2.6vw, 28px); }
/* Bleed the rail to the right viewport edge so cards run under the edge instead
   of stopping at the container gutter (left stays aligned to the container). */
.wulr-online .wulr-card-track,
.wulr-print .wulr-card-track {
	max-width: none; /* defeat post-template's max-width:100% so the rail can bleed past the container */
	padding-right: clamp(1.5rem, 4vw, 48px);
	margin-right: calc(50% - 50vw);
}
/* Card content is left-aligned; defeat the constrained layout's margin-inline:auto
   which was centering the short meta row / byline. */
.wulr-online .wulr-card > *,
.wulr-print .wulr-card > *,
.wulr-related .wulr-card > * { margin-inline: 0 !important; }
.wulr-card-dek {
	font-family: var(--wp--preset--font-family--primary);
	color: var(--wp--preset--color--stone);
	line-height: 1.6;
}
.wulr-card-dek .wp-block-post-excerpt__excerpt,
.wulr-card-dek p {
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Mobile rails: cards nearly fill the viewport — one card in view with a
   visible peek of the next (per client example). 100px = gutter (24) + peek
   (52) + rail gap (24) at small widths. */
@media (max-width: 640px) {
	.wulr-card-track > li,
	.wulr-online .wulr-card-track > li,
	.wulr-print .wulr-card-track > li { flex-basis: calc(100vw - 100px); }
}

/* Rail arrows moved to global.css → "Shared arrow control" — they're now used by
   these card rails AND the About timeline. Style them there, not here. */

/* ---- Explore (white section, shield watermark, underlined search, serif lists) ---- */
.wulr-explore { position: relative; overflow: hidden; }
/* Decorative shield, painted as the section's own background rather than an
   inline <svg> in the content (client, 2026-08-18: "it's silly that this
   background shield is html"). Masked so the mark still takes a theme colour
   token, exactly like the shared .wulr-has-shield::before in custom.css — the
   only reason it was ever markup was that an inline SVG can inherit
   `currentColor`, and a mask + background-color does the same job with nothing
   in the DOM. Decorative, so being a pseudo-element is also the correct
   accessibility answer: nothing for a screen reader to reach.

   Sits fully INSIDE the section (client, 2026-08-17): it used to bleed off the
   top-right and `.wulr-explore`'s `overflow: hidden` clipped it into a fragment.
   Keep both offsets >= 0 — any negative value re-crops it. aspect-ratio matches
   the asset's 332x378 viewBox, standing in for the old `height: auto`. */
.wulr-explore::before {
	content: "";
	position: absolute;
	top: 16px;
	right: clamp(8px, 1.25vw, 24px);
	width: clamp(220px, 24vw, 360px);
	aspect-ratio: 332 / 378;
	background-color: var(--wp--preset--color--muted);
	-webkit-mask: url(../images/shield-detail.svg) no-repeat center / contain;
	        mask: url(../images/shield-detail.svg) no-repeat center / contain;
	z-index: 0;
	pointer-events: none;
}
/* Column eyebrows: red, with breathing room before the link list below. */
.wulr-explore .wulr-eyebrow {
	color: var(--wp--preset--color--accent);
	margin-bottom: 20px;
}
/* "Explore" heading — fixed component size (comp 52px); color via textColor attr. */
.wulr-explore-title {
	font-size: clamp(34px, 5vw, 52px);
	line-height: 1;
	letter-spacing: -0.015em;
}

/* Search: icon + input on a 2px red underline, with a red pill button. */
.wulr-search-block .wp-block-search__inside-wrapper {
	border: 0;
	border-bottom: 2px solid var(--wp--preset--color--accent);
	border-radius: 0;
	background: transparent; /* let the shield watermark show through (WP defaults this white) */
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 0 0 14px;
}
.wulr-search-block .wp-block-search__inside-wrapper::before {
	content: "";
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	background-color: var(--wp--preset--color--accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat center / contain;
}
.wulr-search-block .wp-block-search__input {
	border: 0;
	background: none;
	padding: 4px 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(22px, 2.4vw, 30px);
	color: var(--wp--preset--color--body);
}
.wulr-search-block .wp-block-search__input::placeholder { color: var(--wp--preset--color--stone); }
.wulr-search-block .wp-block-search__button {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
	border: 0;
	border-radius: 999px;
	padding: 0 28px;
	height: 48px;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 800;
	letter-spacing: 0;
	text-transform: none;
	transition: background 0.15s;
}
.wulr-search-block .wp-block-search__button:hover { background: var(--wp--preset--color--primary); }

/* Browse + Popular Topics: serif link lists with soft bottom rules (Popular Topics = 2 cols). */
.wulr-browse-list,
.wulr-topic-list { list-style: none; margin: 0; padding: 0; }
.wulr-topic-list { column-count: 2; column-gap: 40px; }
.wulr-browse-list li,
.wulr-topic-list li { border-bottom: 1px solid var(--wp--preset--color--rule-soft); break-inside: avoid; }
.wulr-browse-list a,
.wulr-topic-list a {
	display: block;
	padding: 12px 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(17px, 1.5vw, 19px);
	color: var(--wp--preset--color--body);
	text-decoration: none;
	transition: color 0.12s, padding-left 0.12s;
}
.wulr-browse-list a:hover,
.wulr-topic-list a:hover { color: var(--wp--preset--color--accent); padding-left: 4px; }
/* When the Browse / Popular Topics columns stack (WP stacks columns below
   782px), open up the row gap — 24px desktop blockGap reads cramped stacked. */
@media (max-width: 781px) {
	.wulr-explore-grid { gap: 48px; }
}

/* ---- Subscribe (red band, 2-col: copy left / single-pill form right) ---- */
.wulr-subscribe .wulr-eyebrow { color: var(--wp--preset--color--white); }
.wulr-subscribe .wulr-dek {
	color: rgba(255, 255, 255, 0.85); /* >=4.5:1 on the red band (WCAG AA) */
}
/* Centred stack: let the browser even out the line lengths rather than us
   guessing a max-width that happens to rag well. Progressive — browsers
   without text-wrap just use the Max Width measure set on the blocks. */
.wulr-subscribe .wulr-subscribe-title,
.wulr-subscribe .wulr-dek {
	text-wrap: balance;
}

/* Heading is a fixed component size (comp 42px). */
.wulr-subscribe-title {
	font-size: clamp(28px, 4vw, 42px);
	line-height: 1.05;
}
/* Stacked: single-pill email row, then the edition checkboxes underneath. */
/* The print CTA reuses .wulr-hero-cta, whose border is rgba(255,255,255,.55).
   That clears 1.4.11 on the green heroes (5.28:1) but only reaches 2.76:1 on
   this accent-red band, and the button has no fill — the border IS its only
   boundary. Raised to .75 (4.15:1) here only, so the green hero CTAs the
   client already signed off on keep their exact weight. */
.wulr-subscribe .wulr-hero-cta .wp-block-button__link {
	border-color: rgba(255, 255, 255, 0.75);
}

/* PARKED 2026-08-18 — styles for the retired subscribe email pill (email input
   + Print/Online checkboxes + inline status). The markup no longer renders:
   the homepage band now uses a core/button, and the capture code sits in
   inc/parked/subscribe-email-capture.php. Kept intact because the client is
   deciding how print sign-ups will be taken and this comes back with them.
   The band's own live rules (.wulr-subscribe eyebrow/dek colour,
   .wulr-subscribe-title size, the CTA border) must stay. */
.wulr-subscribe-form {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	width: 100%;
	max-width: 520px;
}
/* Single-pill row: white outline pill, transparent input, white "Sign up" button. */
.wulr-subscribe-pill {
	display: flex;
	align-items: center;
	width: 100%;
	border: 1.5px solid var(--wp--preset--color--white);
	border-radius: 999px;
	overflow: hidden;
	background: transparent;
}
.wulr-subscribe-pill input {
	flex: 1 1 auto;
	min-width: 0;
	height: 56px;
	padding: 0 24px;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--primary);
	font-size: 16px;
}
.wulr-subscribe-pill input::placeholder { color: rgba(255, 255, 255, 0.85); } /* >=4.5:1 on the red band (WCAG AA) */
.wulr-subscribe-pill button {
	flex-shrink: 0;
	height: 56px;
	padding: 0 32px;
	border: 0;
	border-radius: 0;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 16px;
	font-weight: 800;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
.wulr-subscribe-pill button:hover,
.wulr-subscribe-pill button:focus-visible { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--white); }
.wulr-subscribe-pill button[disabled] { opacity: 0.85; cursor: default; }
/* Visible focus on the red band (WCAG 2.4.7): white halo round the pill + button state. */
.wulr-subscribe-pill:focus-within { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55); }
/* Edition checkboxes (Print / Online) — pre-checked, sit under the pill. */
.wulr-subscribe-editions {
	display: flex;
	gap: 24px;
	margin: 0;
	padding: 0;
	border: 0;
}
.wulr-subscribe-editions label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 15px;
	cursor: pointer;
}
/* Custom, lighter check: transparent box + thin white tick (not the heavy
   solid-fill browser default that accent-color produces). */
.wulr-subscribe-editions input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	margin: 0;
	border: 1.5px solid var(--wp--preset--color--white);
	border-radius: 3px;
	background: transparent;
	position: relative;
	cursor: pointer;
}
.wulr-subscribe-editions input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 5px;
	height: 10px;
	border: solid var(--wp--preset--color--white);
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(45deg);
}
.wulr-subscribe-editions input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 2px;
}
/* Inline AJAX status (validation errors) + thank-you message on the band. */
.wulr-subscribe-status { margin: 0; font-size: 14px; color: var(--wp--preset--color--white); }
.wulr-subscribe-status:empty { display: none; }
.wulr-subscribe-thanks {
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--primary);
	font-size: 18px;
	line-height: 1.5;
	max-width: 520px;
}
.wulr-subscribe-thanks .gform_confirmation_message,
.wulr-subscribe-thanks * { color: var(--wp--preset--color--white); }