/*
 * Newsletter surfaces — Hey Master 1.0.32
 *
 * Deliberately a sheet of its own rather than more rules in extra.css. That
 * sheet is hand-mirrored into extra.min.css (this repo has no CSS build step)
 * and tests/extra-min-parity.php exists precisely because the drift between
 * the two is otherwise silent and total. A separate sheet has no mirror, so it
 * cannot drift — and the sites with features.newsletter off never download it
 * at all (inc/newsletter.php enqueues it only where a newsletter surface can
 * actually render).
 *
 * Covers: the footer / events / directory / archive module, the subscribe
 * page's additions, the sticky-bar / exit-intent prompt, the newsletter
 * archive, and (W5, 2026-09-11) the edition body on the "View online" page.
 */

/* ─── Shared module ──────────────────────────────────────────────────────── */

/* The OUTER element is the band: position, background, padding. The two-column
   layout lives on __inner and nowhere else — putting a grid on the outer as
   well would make the decorative __glow div a grid item and push the content
   into the second column. */
.hm-nl-module {
	position: relative;
	overflow: hidden;
	background: var(--black);
	color: #fff;
	border-radius: var(--radius-lg);
	padding: 34px 28px;
	margin: 40px 0;
}

@media (min-width: 900px) {
	.hm-nl-module {
		padding: 40px 44px;
	}
}

.hm-nl-module--footer {
	border-radius: 0;
	margin: 0;
	padding: 40px 24px;
	background: #141414;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

@media (min-width: 900px) {
	.hm-nl-module--footer {
		padding: 44px 32px;
	}
}

.hm-nl-module__glow {
	position: absolute;
	inset: auto auto -60% -10%;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(232, 52, 28, 0.35), transparent 65%);
	pointer-events: none;
}

.hm-nl-module__inner {
	position: relative;
	max-width: 1240px;
	margin: 0 auto;
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr;
	width: 100%;
}

@media (min-width: 900px) {
	.hm-nl-module__inner {
		grid-template-columns: 1.15fr 1fr;
		align-items: center;
		gap: 40px;
	}
}

.hm-nl-module__eyebrow {
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--red);
	margin-bottom: 8px;
}

.hm-nl-module__heading {
	font-family: var(--font-display);
	font-size: 34px;
	line-height: 1.02;
	letter-spacing: 0.02em;
	margin: 0 0 8px;
}

.hm-nl-module__heading em {
	font-family: var(--font-serif);
	font-style: italic;
	text-transform: none;
	letter-spacing: 0;
}

.hm-nl-module__desc {
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.66);
	margin: 0;
	max-width: 46ch;
}

.hm-nl-module__form-row {
	display: flex;
	gap: 8px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--radius-md);
	padding: 6px;
	transition: border-color 0.18s ease;
}

.hm-nl-module__form-row:focus-within {
	border-color: rgba(255, 255, 255, 0.4);
}

.hm-nl-module__input {
	flex: 1;
	min-width: 0;
	background: none;
	border: 0;
	outline: none;
	color: #fff;
	font-family: var(--font-body);
	font-size: 14px;
	padding: 10px 12px;
}

.hm-nl-module__input::placeholder {
	color: rgba(255, 255, 255, 0.28);
}

.hm-nl-module__btn {
	flex: 0 0 auto;
	background: #fff;
	color: var(--black);
	border: 0;
	border-radius: var(--radius-sm);
	cursor: pointer;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 700;
	padding: 11px 18px;
	transition: background 0.18s ease, color 0.18s ease;
}

.hm-nl-module__btn:hover {
	background: var(--red);
	color: #fff;
}

.hm-nl-module__note {
	font-family: var(--font-body);
	font-size: 11px;
	color: rgba(255, 255, 255, 0.38);
	margin: 10px 2px 0;
}

/* The module reuses the strip's error/done element names so one JS wiring in
   site.js covers every newsletter form on the site. */
.hm-nl-module .newsletter-strip__error {
	font-family: var(--font-body);
	font-size: 12px;
	color: #ff8f7d;
	margin: 10px 2px 0;
}

.hm-nl-module .newsletter-strip__done {
	font-family: var(--font-body);
	color: #fff;
}

.hm-nl-module .newsletter-strip__done-title {
	font-family: var(--font-display);
	font-size: 26px;
	letter-spacing: 0.02em;
}

.hm-nl-module .newsletter-strip__done-sub {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.62);
}

/* ─── Header utility link ────────────────────────────────────────────────── */

.tb-link--subscribe {
	color: var(--red);
	font-weight: 700;
}

/* ─── Subscribe page additions ───────────────────────────────────────────── */

.sub-hero__value {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 21px;
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.86);
	margin: 0 0 14px;
	max-width: 30ch;
}

.sub-hero__points {
	list-style: none;
	margin: 0 0 26px;
	padding: 0;
	display: grid;
	gap: 7px;
	max-width: 46ch;
}

.sub-hero__points li {
	position: relative;
	padding-left: 22px;
	font-family: var(--font-body);
	font-size: 14px;
	color: rgba(255, 255, 255, 0.62);
}

.sub-hero__points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--red);
}

.sub-hero__hood {
	display: block;
	margin: 14px 0 0;
	max-width: 580px;
}

.sub-hero__hood-label {
	display: block;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.5);
	margin-bottom: 6px;
}

.sub-hero__hood-label em {
	font-style: normal;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.32);
}

.sub-hero__hood-select {
	width: 100%;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--radius-md);
	color: #fff;
	font-family: var(--font-body);
	font-size: 14px;
	padding: 12px 14px;
}

.sub-hero__hood-select option {
	background: var(--black);
	color: #fff;
}

.sub-hero--outcome .sub-hero__title {
	max-width: 18ch;
}

.sub-outcome__form {
	margin: 6px 0 0;
}

/*
 * The confirm link with no extra tap (page-subscribe.php, site.js
 * `[data-hm-nl-auto]`). Two blocks share one grid cell so swapping between them
 * never moves the page:
 *   .sub-outcome__auto    "Confirming your subscription…"
 *   .sub-outcome__manual  the old prompt + "Confirm my subscription" button
 *
 * With no JavaScript the page is exactly what it was before: the status line is
 * display:none (it would be a lie there) and the button shows at once.
 *
 * With JavaScript switched on, the button is held back from the first paint, so
 * a reader is never shown a button that is about to go away. If site.js never
 * runs at all (blocked, failed to load), a pure-CSS timer puts the button back
 * after 8 s. site.js cancels that timer the moment it takes over (`is-auto`),
 * and shows the button itself (`is-manual`) when the automatic post cannot
 * happen. A browser that does not know `scripting` just shows the button until
 * site.js sets `is-auto`.
 */
.sub-outcome__auto {
	display: none;
}

.sub-outcome--auto {
	display: grid;
}

.sub-outcome--auto > .sub-outcome__auto,
.sub-outcome--auto > .sub-outcome__manual {
	grid-area: 1 / 1;
}

@media (scripting: enabled) {
	.sub-outcome--auto > .sub-outcome__auto {
		display: block;
		animation: hm-nl-auto-hide 0s linear 8s forwards;
	}

	.sub-outcome--auto > .sub-outcome__manual {
		visibility: hidden;
		animation: hm-nl-auto-show 0s linear 8s forwards;
	}
}

.sub-outcome--auto.is-auto > .sub-outcome__auto {
	display: block;
	visibility: visible;
	animation: none;
}

.sub-outcome--auto.is-auto > .sub-outcome__manual {
	visibility: hidden;
	animation: none;
}

.sub-outcome--auto.is-manual > .sub-outcome__auto {
	display: none;
	animation: none;
}

.sub-outcome--auto.is-manual > .sub-outcome__manual {
	visibility: visible;
	animation: none;
}

@keyframes hm-nl-auto-show {
	to { visibility: visible; }
}

@keyframes hm-nl-auto-hide {
	to { visibility: hidden; }
}

.sub-outcome__home {
	color: rgba(255, 255, 255, 0.55);
	text-decoration: none;
}

.sub-outcome__home:hover {
	color: #fff;
}

/* ─── Sticky bar / exit-intent prompt ────────────────────────────────────── */

.hm-nl-prompt {
	position: fixed;
	z-index: 9000;
	inset: auto 0 0 0;
	background: var(--black);
	color: #fff;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35);
	padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
	transform: translateY(110%);
	transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.hm-nl-prompt[hidden] {
	display: none !important;
}

.hm-nl-prompt.is-open {
	transform: translateY(0);
}

.hm-nl-prompt__scrim {
	position: fixed;
	inset: 0;
	z-index: 8999;
	background: rgba(0, 0, 0, 0.55);
	opacity: 0;
	transition: opacity 0.24s ease;
}

.hm-nl-prompt__scrim[hidden] {
	display: none !important;
}

.hm-nl-prompt__scrim.is-open {
	opacity: 1;
}

.hm-nl-prompt__inner {
	position: relative;
	max-width: 620px;
	margin: 0 auto;
	display: grid;
	gap: 10px;
}

.hm-nl-prompt__eyebrow {
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--red);
}

.hm-nl-prompt__heading {
	font-family: var(--font-display);
	font-size: 26px;
	line-height: 1.05;
	letter-spacing: 0.02em;
	margin: 0;
}

.hm-nl-prompt__desc {
	font-family: var(--font-body);
	font-size: 13px;
	color: rgba(255, 255, 255, 0.62);
	margin: 0;
}

.hm-nl-prompt__close {
	position: absolute;
	top: -4px;
	right: 0;
	background: none;
	border: 0;
	color: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	padding: 4px 6px;
}

.hm-nl-prompt__close:hover {
	color: #fff;
}

/* Desktop: the same element becomes a centred exit-intent card. */
@media (min-width: 900px) {
	.hm-nl-prompt {
		inset: 50% auto auto 50%;
		width: min(560px, calc(100vw - 48px));
		border: 1px solid rgba(255, 255, 255, 0.12);
		border-radius: var(--radius-lg);
		padding: 32px 34px;
		transform: translate(-50%, -46%) scale(0.98);
		opacity: 0;
		transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
	}

	.hm-nl-prompt.is-open {
		transform: translate(-50%, -50%) scale(1);
		opacity: 1;
	}

	.hm-nl-prompt__heading {
		font-size: 34px;
	}
}

/* An animation is a nicety; being able to dismiss the thing is not. Someone who
   asked for less motion still gets the prompt, it simply arrives already there. */
@media (prefers-reduced-motion: reduce) {
	.hm-nl-prompt,
	.hm-nl-prompt__scrim {
		transition: none;
	}

	.hm-nl-prompt {
		transform: none;
	}

	.hm-nl-prompt.is-open {
		transform: none;
	}

	@media (min-width: 900px) {
		.hm-nl-prompt {
			transform: translate(-50%, -50%);
			opacity: 1;
		}

		.hm-nl-prompt.is-open {
			transform: translate(-50%, -50%);
		}
	}
}

/* ─── Newsletter archive (CPT) ───────────────────────────────────────────── */

.hm-newsletter {
	max-width: 720px;
	margin: 0 auto;
	padding: 0 20px 64px;
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.62;
	color: var(--black);
}

.hm-newsletter__head {
	padding: 48px 0 28px;
	border-bottom: 1px solid var(--border);
	margin-bottom: 32px;
}

.hm-newsletter__eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--red);
	margin-bottom: 10px;
}

.hm-newsletter__title {
	font-family: var(--font-display);
	font-size: 46px;
	line-height: 1.02;
	letter-spacing: 0.02em;
	margin: 0 0 10px;
}

.hm-newsletter__date {
	font-size: 13px;
	color: var(--grey-text);
}

.hm-newsletter__body h2 {
	font-family: var(--font-display);
	font-size: 28px;
	letter-spacing: 0.02em;
	margin: 36px 0 10px;
}

.hm-newsletter__body h3 {
	font-family: var(--font-body);
	font-size: 19px;
	font-weight: 700;
	margin: 28px 0 6px;
}

.hm-newsletter__body p {
	margin: 0 0 18px;
}

.hm-newsletter__body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-md);
}

.hm-newsletter__body a {
	color: var(--red);
}

.hm-newsletter__body hr {
	border: 0;
	border-top: 1px solid var(--border);
	margin: 32px 0;
}

.hm-newsletter__sponsored {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--grey-text);
	border: 1px solid var(--border);
	border-radius: 999px;
	padding: 3px 9px;
	margin-bottom: 8px;
}

.hm-nl-archive {
	max-width: 820px;
	margin: 0 auto;
	padding: 0 20px 64px;
}

.hm-nl-archive__head {
	padding: 48px 0 24px;
}

.hm-nl-archive__title {
	font-family: var(--font-display);
	font-size: 52px;
	line-height: 1;
	letter-spacing: 0.02em;
	margin: 0 0 8px;
}

.hm-nl-archive__sub {
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--grey-text);
	margin: 0;
}

.hm-nl-archive__list {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	border-top: 1px solid var(--border);
}

.hm-nl-archive__item {
	border-bottom: 1px solid var(--border);
}

.hm-nl-archive__link {
	display: grid;
	gap: 4px;
	padding: 20px 0;
	text-decoration: none;
	color: inherit;
}

.hm-nl-archive__link:hover .hm-nl-archive__item-title {
	color: var(--red);
}

.hm-nl-archive__item-date {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--grey-text);
}

.hm-nl-archive__item-title {
	font-family: var(--font-display);
	font-size: 27px;
	line-height: 1.08;
	letter-spacing: 0.02em;
	transition: color 0.16s ease;
}

.hm-nl-archive__item-excerpt {
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--grey-text);
	margin: 2px 0 0;
}

.hm-nl-archive__empty {
	font-family: var(--font-body);
	color: var(--grey-text);
	padding: 32px 0;
}

/* ─── W5 edition body — "View online" (2026-09-11) ───────────────────────── */

/*
 * The web copy of an edition is the same product as the email (W5 "Magazine",
 * dark masthead band). The site's own header stands in for the band; below it
 * the page mirrors the email section for section: the editor's note in the
 * serif role with its sign-off, accent section bars, day headings, kicker +
 * title + meta + lead items, the quiet-week hero, one or two featured stories,
 * photo-left cards that stack on a phone, the bumper "+N more" link, "Worth a
 * revisit", the business slot with its pill, the submit box, and the footer.
 *
 * CLASS CONTRACT. PKULTRA's Views/NewsletterEditions/Web/_Weekend.cshtml emits
 * these and this sheet styles them; tests/newsletter-render.php section 10 pins
 * that every one of them appears in a selector here:
 *   .hm-newsletter · __note __signoff __ps · __section (--events --posts
 *   --revisit --submit) __heading · __day · __item (--hero) __kicker
 *   __item-title __meta __lead · __feature (--secondary) __feature-figure
 *   __feature-title __feature-body __readon · __cards __card __card-figure
 *   __card-body __card-title __card-lead · __more · __revisit · __business
 *   __label · __cta · __footer __legal · __ai
 * The element a class sits on is not part of the contract: __more, __readon
 * and __cta are styled whether the class is on the <a> or on its wrapper.
 *
 * EDITIONS PUBLISHED BEFORE W5 keep working. Their stored body uses __intro,
 * __items, __figure(--thumb), __blurb, __excerpt, __item--post and
 * __ai-disclosure; those are styled here in the same roles as their W5
 * counterparts, so an old edition reads as the same product too.
 *
 * COLOUR IS THE SITE'S OWN TOKENS ONLY. var(--red) is the accent (Londonly's
 * child theme repoints it to its canopy green), var(--black) the ink, and
 * var(--grey-bg) / var(--grey-text) / var(--border) the rest. No brand literal
 * appears in this block (section 10 checks: the only hex values allowed are
 * #fff and #000), so all 29 sites get their own palette with no per-site CSS.
 *
 * Tints and the darkened accent are color-mix(), and EVERY one is preceded by
 * a plain token declaration of the same property as the fallback for a browser
 * without color-mix(). That pair has to be written on the real property each
 * time: a custom property holding a color-mix() would not fall back, it would
 * go invalid at computed-value time. Section 10 checks this too.
 *
 * The accent is darkened (82% accent, 18% black) wherever it is SMALL TEXT, as
 * the email does, because the hey-master default red is under 4.5:1 on white.
 * Text set ON the accent (the section bars) is white at 22px bold, the
 * large-text size, where 3:1 is the bar and both palettes clear it.
 *
 * SPECIFICITY. Every rule is `.hm-newsletter .hm-newsletter__x` (0,2,0) or
 * more, so it beats the older `.hm-newsletter__body h2/h3/p/a/img` (0,1,1)
 * rules above, which the fragment's headings and paragraphs also match.
 */

/* The fragment carries its own .hm-newsletter root, and single-newsletter.php
   already wraps it in an <article class="hm-newsletter">. Without this reset
   the inner root repeats the 720px cap, the 20px gutters and the 64px foot. */
.hm-newsletter .hm-newsletter {
	max-width: none;
	margin: 0;
	padding: 0;
}

/* ── Editor's note (__intro = the pre-W5 intro, same role) ── */

.hm-newsletter .hm-newsletter__note,
.hm-newsletter .hm-newsletter__intro {
	font-family: var(--font-serif);
	font-size: 19px;
	line-height: 1.7;
	color: var(--black);
	margin: 0 0 8px;
}

.hm-newsletter .hm-newsletter__note p,
.hm-newsletter .hm-newsletter__intro p {
	margin: 0 0 20px;
}

/* The first paragraph is the hook, set larger like a magazine dek. */
.hm-newsletter .hm-newsletter__note > p:first-child,
.hm-newsletter .hm-newsletter__intro > p:first-child {
	font-size: 23px;
	line-height: 1.5;
}

.hm-newsletter .hm-newsletter__note a,
.hm-newsletter .hm-newsletter__intro a,
.hm-newsletter .hm-newsletter__ps a,
.hm-newsletter .hm-newsletter__lead a,
.hm-newsletter .hm-newsletter__feature-body a {
	color: var(--red);
	color: color-mix(in srgb, var(--red) 82%, #000);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.hm-newsletter .hm-newsletter__signoff {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 18px;
	line-height: 1.5;
	color: var(--black);
	margin: 2px 0 0;
}

.hm-newsletter .hm-newsletter__ps {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.65;
	color: var(--grey-text);
	margin: 22px 0 0;
}

.hm-newsletter .hm-newsletter__ps p {
	margin: 0;
}

/* ── Sections and their accent bars ── */

.hm-newsletter .hm-newsletter__section,
.hm-newsletter .hm-newsletter__section--events,
.hm-newsletter .hm-newsletter__section--posts,
.hm-newsletter .hm-newsletter__section--revisit {
	margin: 0 0 44px;
}

/* Full-width accent bar, white centred heading, as in the email. */
.hm-newsletter .hm-newsletter__heading {
	background: var(--red);
	color: #fff;
	font-family: var(--font-serif);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.01em;
	text-transform: none;
	text-align: center;
	border: 0;
	padding: 13px 24px;
	margin: 44px 0 34px;
}

/* Lists of items are layout, not bullets. */
.hm-newsletter .hm-newsletter__items,
.hm-newsletter .hm-newsletter__cards {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ── Day headings (events grouped by day) ── */

.hm-newsletter .hm-newsletter__day {
	font-family: var(--font-serif);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	color: var(--black);
	border-bottom: 2px solid var(--black);
	padding: 0 0 9px;
	margin: 8px 0 24px;
}

/* ── Items: kicker, title, meta, lead ── */

.hm-newsletter .hm-newsletter__item {
	margin: 0 0 38px;
}

.hm-newsletter .hm-newsletter__kicker {
	display: block;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--red);
	color: color-mix(in srgb, var(--red) 82%, #000);
	margin: 0 0 8px;
}

.hm-newsletter .hm-newsletter__item-title {
	font-family: var(--font-serif);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: 0;
	text-transform: none;
	color: var(--black);
	border: 0;
	padding: 0;
	margin: 0;
}

.hm-newsletter .hm-newsletter__item-title a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.hm-newsletter .hm-newsletter__item-title a:hover {
	color: var(--red);
}

/* "8:00 PM | VENUE | COST" — the when in bold ink, the rest in grey caps. */
.hm-newsletter .hm-newsletter__meta {
	font-family: var(--font-body);
	font-size: 13px;
	line-height: 1.55;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--grey-text);
	margin: 10px 0 0;
}

.hm-newsletter .hm-newsletter__meta strong,
.hm-newsletter .hm-newsletter__meta b {
	color: var(--black);
	font-weight: 800;
}

/* __blurb / __excerpt are the pre-W5 names for the same listing copy. */
.hm-newsletter .hm-newsletter__lead,
.hm-newsletter .hm-newsletter__blurb,
.hm-newsletter .hm-newsletter__excerpt {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.7;
	color: var(--black);
	color: color-mix(in srgb, var(--black) 80%, #fff);
	margin: 10px 0 0;
}

.hm-newsletter .hm-newsletter__lead p,
.hm-newsletter .hm-newsletter__blurb p {
	margin: 0 0 10px;
}

.hm-newsletter .hm-newsletter__lead p:last-child,
.hm-newsletter .hm-newsletter__blurb p:last-child {
	margin-bottom: 0;
}

/* Item photos (pre-W5 __figure as well). */
.hm-newsletter .hm-newsletter__figure,
.hm-newsletter .hm-newsletter__feature-figure,
.hm-newsletter .hm-newsletter__card-figure {
	margin: 0 0 16px;
}

.hm-newsletter .hm-newsletter__figure img,
.hm-newsletter .hm-newsletter__feature-figure img,
.hm-newsletter .hm-newsletter__card-figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
}

/* "AI-generated image" — rendered only when the source row is flagged. */
.hm-newsletter .hm-newsletter__ai {
	display: block;
	font-family: var(--font-body);
	font-size: 11px;
	line-height: 1.4;
	font-style: normal;
	color: var(--grey-text);
	padding: 5px 0 0;
	margin: 0;
}

/* ── The quiet-week hero: the one event, in a tinted panel ── */

.hm-newsletter .hm-newsletter__item--hero {
	background: var(--grey-bg);
	background: color-mix(in srgb, var(--red) 8%, #fff);
	border-top: 4px solid var(--red);
	padding: 28px 28px 22px;
	margin: 0 0 40px;
}

.hm-newsletter .hm-newsletter__item--hero .hm-newsletter__item-title {
	font-size: 30px;
}

.hm-newsletter .hm-newsletter__item--hero .hm-newsletter__lead {
	font-size: 17.5px;
}

/* ── Featured stories: an article opening, not a card ── */

.hm-newsletter .hm-newsletter__feature {
	margin: 0 0 48px;
}

.hm-newsletter .hm-newsletter__feature .hm-newsletter__feature-figure {
	margin-bottom: 20px;
}

.hm-newsletter .hm-newsletter__feature-title {
	font-family: var(--font-serif);
	font-size: clamp(25px, 3.6vw, 32px);
	font-weight: 700;
	line-height: 1.24;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--black);
	border: 0;
	padding: 0;
	margin: 0;
}

.hm-newsletter .hm-newsletter__feature-title a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

.hm-newsletter .hm-newsletter__feature-title a:hover {
	color: var(--red);
}

/* The written hook, in the editorial serif: serif means "a person wrote this",
   the sans of the cards and leads means "listing copy". */
.hm-newsletter .hm-newsletter__feature-body {
	font-family: var(--font-serif);
	font-size: 19px;
	line-height: 1.7;
	color: var(--black);
	margin: 18px 0 0;
}

.hm-newsletter .hm-newsletter__feature-body p {
	margin: 0 0 15px;
}

/* "Read the full story »" — the accent and the underline are the affordance. */
.hm-newsletter a.hm-newsletter__readon,
.hm-newsletter .hm-newsletter__readon a {
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--red);
	color: color-mix(in srgb, var(--red) 82%, #000);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hm-newsletter a.hm-newsletter__readon {
	display: inline-block;
	margin: 12px 0 0;
}

.hm-newsletter .hm-newsletter__readon:not(a) {
	margin: 12px 0 0;
}

/* The second feature steps down a size, after an accent "next story" mark. */
.hm-newsletter .hm-newsletter__feature--secondary {
	position: relative;
	border-top: 1px solid var(--border);
	padding-top: 26px;
}

.hm-newsletter .hm-newsletter__feature--secondary::before {
	content: "";
	position: absolute;
	top: -2px;
	left: 0;
	width: 56px;
	height: 3px;
	background: var(--red);
}

.hm-newsletter .hm-newsletter__feature--secondary .hm-newsletter__feature-figure {
	margin-bottom: 16px;
}

.hm-newsletter .hm-newsletter__feature--secondary .hm-newsletter__kicker {
	font-size: 11px;
	margin-bottom: 6px;
}

.hm-newsletter .hm-newsletter__feature--secondary .hm-newsletter__feature-title {
	font-size: clamp(20px, 2.8vw, 23px);
}

.hm-newsletter .hm-newsletter__feature--secondary .hm-newsletter__feature-body {
	font-size: 17px;
	margin-top: 14px;
}

/* ── Photo-left cards ("Also this week", "Worth a revisit") ──
   Flex rather than grid so a card with no photo needs no special case: the
   body simply takes the whole row. Stacks on a phone (media query below). */

.hm-newsletter .hm-newsletter__cards {
	display: grid;
	gap: 30px;
	margin: 0 0 10px;
}

.hm-newsletter .hm-newsletter__card {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	margin: 0;
}

.hm-newsletter .hm-newsletter__card .hm-newsletter__card-figure {
	flex: 0 0 44%;
	margin: 0;
}

.hm-newsletter .hm-newsletter__card-body {
	flex: 1 1 0;
	min-width: 0;
	padding-top: 2px;
}

.hm-newsletter .hm-newsletter__card-title {
	font-family: var(--font-serif);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
	color: var(--black);
	border: 0;
	padding: 0;
	margin: 0;
}

.hm-newsletter .hm-newsletter__card-title a {
	color: inherit;
	text-decoration: none;
}

.hm-newsletter .hm-newsletter__card-title a:hover {
	color: var(--red);
}

.hm-newsletter .hm-newsletter__card-lead {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.6;
	color: var(--black);
	color: color-mix(in srgb, var(--black) 80%, #fff);
	margin: 8px 0 0;
}

/* In a card the way in is the quiet grey "Read more »", not the feature's. */
.hm-newsletter .hm-newsletter__card a.hm-newsletter__readon,
.hm-newsletter .hm-newsletter__card .hm-newsletter__readon a {
	font-size: 14px;
	font-weight: 400;
	color: var(--grey-text);
	white-space: nowrap;
}

.hm-newsletter .hm-newsletter__card a.hm-newsletter__readon,
.hm-newsletter .hm-newsletter__card .hm-newsletter__readon:not(a) {
	margin-top: 6px;
}

/* Pre-W5 post items: thumbnail left where the browser can tell there is one
   (:has); stacked, exactly as before, where it cannot. */
.hm-newsletter .hm-newsletter__item--post:has(> .hm-newsletter__figure--thumb) {
	display: grid;
	grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
	column-gap: 20px;
	align-items: start;
}

.hm-newsletter .hm-newsletter__item--post > .hm-newsletter__figure--thumb {
	grid-row: 1 / span 4;
	margin: 0;
}

.hm-newsletter .hm-newsletter__item--post .hm-newsletter__item-title {
	font-size: 19px;
	line-height: 1.25;
}

.hm-newsletter .hm-newsletter__item--post .hm-newsletter__item-title a {
	text-decoration: none;
}

.hm-newsletter .hm-newsletter__item--post .hm-newsletter__excerpt {
	font-size: 15px;
	line-height: 1.6;
	margin-top: 8px;
}

/* ── Bumper weekends: "+N more on the events page »" ── */

.hm-newsletter a.hm-newsletter__more,
.hm-newsletter .hm-newsletter__more a {
	display: inline-block;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--black);
	border: 2px solid var(--black);
	border-radius: 3px;
	padding: 12px 24px;
	transition: background 0.18s ease, color 0.18s ease;
}

.hm-newsletter a.hm-newsletter__more:hover,
.hm-newsletter .hm-newsletter__more a:hover {
	background: var(--black);
	color: #fff;
}

/* Centred either way: a bare link as a shrink-wrapped block, a wrapper by
   its text alignment. */
.hm-newsletter a.hm-newsletter__more {
	display: table;
	margin: 0 auto 42px;
}

.hm-newsletter .hm-newsletter__more:not(a) {
	text-align: center;
	margin: 0 0 42px;
}

/* ── Worth a revisit ── */

.hm-newsletter .hm-newsletter__revisit {
	margin: 0 0 44px;
}

.hm-newsletter .hm-newsletter__revisit > .hm-newsletter__label {
	margin-bottom: 14px;
}

/* ── From a local business: an outlined card with its pill ── */

.hm-newsletter .hm-newsletter__business {
	background: #fff;
	border: 1px solid var(--border);
	border-color: var(--border);
	border-color: color-mix(in srgb, var(--red) 28%, #fff);
	border-radius: 6px;
	padding: 24px 26px;
	margin: 0 0 44px;
}

/* The pill. The wording is contract C13's and arrives in the markup. */
.hm-newsletter .hm-newsletter__label {
	display: inline-block;
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--red);
	color: color-mix(in srgb, var(--red) 82%, #000);
	background: var(--grey-bg);
	background: color-mix(in srgb, var(--red) 8%, #fff);
	border-radius: 3px;
	padding: 5px 10px;
	margin: 0 0 14px;
}

.hm-newsletter .hm-newsletter__business .hm-newsletter__item-title,
.hm-newsletter .hm-newsletter__business .hm-newsletter__card-title {
	font-size: 23px;
	line-height: 1.25;
	margin-top: 2px;
}

.hm-newsletter .hm-newsletter__business .hm-newsletter__item-title a {
	text-decoration: none;
}

/* ── "Got an event?" — a tinted box with an accent edge, not another bar ── */

.hm-newsletter .hm-newsletter__section--submit {
	background: var(--grey-bg);
	background: color-mix(in srgb, var(--red) 8%, #fff);
	border-left: 4px solid var(--red);
	padding: 24px 26px 26px;
	margin: 0 0 44px;
}

.hm-newsletter .hm-newsletter__section--submit .hm-newsletter__heading {
	background: none;
	color: var(--black);
	font-size: 24px;
	text-align: left;
	padding: 0;
	margin: 0 0 6px;
}

.hm-newsletter .hm-newsletter__section--submit p {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.65;
	color: var(--black);
	color: color-mix(in srgb, var(--black) 80%, #fff);
	margin: 0 0 18px;
}

/* The button (the submit CTA, and anywhere else a __cta stands alone). */
.hm-newsletter .hm-newsletter__cta a,
.hm-newsletter a.hm-newsletter__cta {
	display: inline-block;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	background: var(--black);
	border-radius: 3px;
	padding: 14px 26px;
	transition: background 0.18s ease;
}

.hm-newsletter .hm-newsletter__cta a:hover,
.hm-newsletter a.hm-newsletter__cta:hover {
	background: var(--red);
	color: #fff;
}

.hm-newsletter .hm-newsletter__section--submit .hm-newsletter__cta:not(a) {
	margin: 0;
}

/* Inside the business card the way in is a quiet "Details »", not a button. */
.hm-newsletter .hm-newsletter__business .hm-newsletter__cta a,
.hm-newsletter .hm-newsletter__business a.hm-newsletter__cta {
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: underline;
	color: var(--grey-text);
	background: none;
	padding: 0;
}

.hm-newsletter .hm-newsletter__business .hm-newsletter__cta:not(a) {
	margin: 12px 0 0;
}

/* ── Footer: small, grey, centred; every C13 line arrives in the markup ── */

.hm-newsletter .hm-newsletter__footer {
	border-top: 1px solid var(--border);
	margin: 44px 0 0;
	padding: 26px 0 0;
	font-family: var(--font-body);
	font-size: 12.5px;
	line-height: 1.65;
	text-align: center;
	color: var(--grey-text);
}

.hm-newsletter .hm-newsletter__footer p {
	margin: 0 0 8px;
}

.hm-newsletter .hm-newsletter__legal,
.hm-newsletter .hm-newsletter__ai-disclosure {
	font-size: 12px;
	color: var(--grey-text);
}

.hm-newsletter .hm-newsletter__footer a {
	color: var(--grey-text);
	text-decoration: underline;
}

/* On the web page the footer's "Get it by email" is a real call to action for
   a visitor, but a quiet one: an accent link, not a second button. */
.hm-newsletter .hm-newsletter__footer .hm-newsletter__cta a,
.hm-newsletter .hm-newsletter__footer a.hm-newsletter__cta {
	display: inline;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: underline;
	color: var(--red);
	color: color-mix(in srgb, var(--red) 82%, #000);
	background: none;
	padding: 0;
}

.hm-newsletter .hm-newsletter__footer .hm-newsletter__cta:not(a) {
	margin: 12px 0 0;
}

/* ── Phones ── */

@media (max-width: 599px) {
	.hm-newsletter .hm-newsletter__note > p:first-child,
	.hm-newsletter .hm-newsletter__intro > p:first-child {
		font-size: 20px;
	}

	.hm-newsletter .hm-newsletter__heading {
		font-size: 20px;
		padding: 11px 16px;
		margin: 36px 0 26px;
	}

	.hm-newsletter .hm-newsletter__item-title {
		font-size: 21px;
	}

	.hm-newsletter .hm-newsletter__item--hero {
		padding: 22px 18px 18px;
	}

	.hm-newsletter .hm-newsletter__item--hero .hm-newsletter__item-title {
		font-size: 25px;
	}

	.hm-newsletter .hm-newsletter__feature-body {
		font-size: 18px;
	}

	/* The photo-left card stacks: photo on top, full width, then the text. */
	.hm-newsletter .hm-newsletter__card {
		flex-direction: column;
		gap: 14px;
	}

	.hm-newsletter .hm-newsletter__card .hm-newsletter__card-figure {
		flex-basis: auto;
		width: 100%;
	}

	.hm-newsletter .hm-newsletter__item--post:has(> .hm-newsletter__figure--thumb) {
		display: block;
	}

	.hm-newsletter .hm-newsletter__item--post > .hm-newsletter__figure--thumb {
		margin: 0 0 14px;
	}

	.hm-newsletter .hm-newsletter__business,
	.hm-newsletter .hm-newsletter__section--submit {
		padding: 20px 18px 22px;
	}
}