/* ==========================================================================
   Customer Matters Weekly — issue and library pages
   File:     mu-plugins/acxpa-customer-matters/cmw.css
   Version:  1.4.0  (2 Nov 2026: stories as cards, section headings)
   Depends:  acxpa-ds-tokens (enqueued as a dependency, so tokens load first)

   Every colour, size, space and radius is a token. No hex, no rgb(), no
   var() fallbacks. The site root is 62.5% (1rem = 10px); layout widths below
   are written in rem against that root, type sizes always use tokens.

   SURFACES — each section of an issue has its own ground so the page never
   reads as one teal block: Teal 700 masthead, Gold Tint briefing, Cloud,
   Sand, Harbour Tint, Clay Tint, Teal 50, and a Teal 800 footer. No two dark
   panels touch.

   Text on tinted grounds is Ink or the matching -deep colour, and never Gold
   Deep on Gold Tint (R-B22). Measured pairs are noted where they are chosen.
   Scoped under .cmw for one class of specificity over the theme.
   ========================================================================== */

.cmw {
	/* Same 1280px content width as the rest of the site (Kleo .container, .tcv-shell). */
	--cmw-issue-width: 128rem;
	--cmw-wide-width: 128rem;

	background: var(--acxpa-ds-bg-subtle);
	color: var(--acxpa-ds-text);
	font-family: var(--acxpa-ds-font);
	font-size: var(--acxpa-ds-text-body);
	line-height: var(--acxpa-ds-leading-body);
	padding-bottom: var(--acxpa-ds-space-3xl);
}

.cmw :is(h1, h2, h3, p, li, a, span, b, strong, input, button, label) {
	font-family: var(--acxpa-ds-font);
}

.cmw-shell {
	max-width: var(--cmw-issue-width);
	margin-inline: auto;
	padding-inline: var(--acxpa-ds-space-md);
}

.cmw-shell--wide {
	max-width: var(--cmw-wide-width);
}

/* --------------------------------------------------------------------------
   Shared primitives
   -------------------------------------------------------------------------- */

.cmw-label {
	font-size: var(--acxpa-ds-text-eyebrow);
	line-height: var(--acxpa-ds-leading-eyebrow);
	letter-spacing: var(--acxpa-ds-tracking-eyebrow);
	text-transform: uppercase;
	font-weight: 700;
	color: var(--acxpa-ds-teal-600); /* 7.26:1 on white */
	margin: 0 0 var(--acxpa-ds-space-sm);
}

.cmw-btn,
.cmw .cmw-btn {
	display: inline-block;
	font-size: var(--acxpa-ds-text-small);
	font-weight: 700;
	line-height: var(--acxpa-ds-leading-snug);
	text-decoration: none;
	border: 2px solid transparent;
	border-radius: var(--acxpa-ds-radius-sm);
	padding: var(--acxpa-ds-space-sm) var(--acxpa-ds-space-lg);
	cursor: pointer;
}

.cmw .cmw-btn--gold {
	background: var(--acxpa-ds-gold);
	color: var(--acxpa-ds-ink); /* 8.49:1 */
}

.cmw .cmw-btn--teal {
	background: var(--acxpa-ds-teal-700);
	color: var(--acxpa-ds-white); /* 9.16:1 */
}

.cmw .cmw-btn--outline {
	background: var(--acxpa-ds-white);
	color: var(--acxpa-ds-teal-700);
	border-color: var(--acxpa-ds-teal-700);
}

/* The one hover, site-wide (R-E1): Gold Deep with white, 4.99:1. */
.cmw .cmw-btn:hover,
.cmw .cmw-btn:focus-visible {
	background: var(--acxpa-ds-gold-deep);
	border-color: var(--acxpa-ds-gold-deep);
	color: var(--acxpa-ds-white);
}

.cmw a:focus-visible,
.cmw button:focus-visible,
.cmw input:focus-visible {
	outline: 3px solid var(--acxpa-ds-focus);
	outline-offset: 2px;
}

.cmw .cmw-textlink {
	font-size: var(--acxpa-ds-text-small);
	font-weight: 600;
	color: var(--acxpa-ds-link);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cmw-gate__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--acxpa-ds-space-md) var(--acxpa-ds-space-lg);
	margin: var(--acxpa-ds-space-md) 0 0;
}

.cmw-pill {
	display: inline-block;
	font-size: var(--acxpa-ds-text-caption);
	font-weight: 700;
	border-radius: var(--acxpa-ds-radius-pill);
	padding: var(--acxpa-ds-space-2xs) var(--acxpa-ds-space-sm);
	margin: var(--acxpa-ds-space-xs) 0 0;
}

.cmw-pill--gold {
	background: var(--acxpa-ds-gold-tint);
	color: var(--acxpa-ds-ink); /* 13.50:1 — never Gold Deep on Gold Tint */
}

/* --------------------------------------------------------------------------
   Single issue
   -------------------------------------------------------------------------- */

.cmw-crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--acxpa-ds-space-xs);
	font-size: var(--acxpa-ds-text-small);
	color: var(--acxpa-ds-text-muted);
	padding: var(--acxpa-ds-space-xl) 0 var(--acxpa-ds-space-md);
}

.cmw .cmw-crumbs a {
	color: var(--acxpa-ds-link);
	font-weight: 600;
}

.cmw-issue {
	background: var(--acxpa-ds-white);
	border-radius: var(--acxpa-ds-radius-md);
	box-shadow: var(--acxpa-ds-shadow-md);
	overflow: hidden;
}

.cmw-issue > *,
.cmw-body > * {
	padding: var(--acxpa-ds-space-xl) var(--acxpa-ds-space-xl);
}

.cmw-body {
	padding: 0;
}

/* Masthead — Teal 700. White 9.16:1, Teal 200 5.53:1, Gold 4.92:1. */
.cmw-mast {
	background: var(--acxpa-ds-teal-700);
	color: var(--acxpa-ds-text-on-dark);
	position: relative;
}

.cmw-mast::after {
	content: "";
	display: block;
	width: 5.6rem;
	height: 4px;
	border-radius: 2px;
	background: var(--acxpa-ds-gold);
	margin-top: var(--acxpa-ds-space-lg);
}

.cmw-mast__brand {
	font-size: var(--acxpa-ds-text-eyebrow);
	letter-spacing: var(--acxpa-ds-tracking-eyebrow);
	text-transform: uppercase;
	font-weight: 700;
	color: var(--acxpa-ds-gold);
	margin: 0 0 var(--acxpa-ds-space-xs);
}

.cmw .cmw-mast__title {
	font-size: var(--acxpa-ds-text-h2);
	line-height: var(--acxpa-ds-leading-tight);
	font-weight: 800;
	color: var(--acxpa-ds-text-on-dark);
	margin: 0 0 var(--acxpa-ds-space-sm);
	text-wrap: balance;
}

.cmw-mast__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--acxpa-ds-space-2xs) var(--acxpa-ds-space-lg);
	font-size: var(--acxpa-ds-text-small);
	color: var(--acxpa-ds-text-muted-on-dark);
	margin: 0;
}

.cmw-edition {
	position: absolute;
	top: var(--acxpa-ds-space-xl);
	right: var(--acxpa-ds-space-xl);
	margin: 0;
	font-size: var(--acxpa-ds-text-caption);
	font-weight: 700;
	letter-spacing: var(--acxpa-ds-tracking-eyebrow);
	text-transform: uppercase;
	background: var(--acxpa-ds-gold);
	color: var(--acxpa-ds-ink);
	border-radius: var(--acxpa-ds-radius-pill);
	padding: var(--acxpa-ds-space-2xs) var(--acxpa-ds-space-sm);
}

/* Intro */
/* Full width, per ACXPA page rules for intros. */
.cmw-intro {
	font-size: var(--acxpa-ds-text-lead);
	line-height: var(--acxpa-ds-leading-snug);
	padding-bottom: var(--acxpa-ds-space-md);
}

.cmw-intro p {
	font-size: inherit;
	margin: 0 0 var(--acxpa-ds-space-sm);
}

/* Sections */
.cmw-sec {
	border-top: 1px solid var(--acxpa-ds-teal-100);
}

.cmw .cmw-sec h2 {
	font-size: var(--acxpa-ds-text-h3);
	line-height: var(--acxpa-ds-leading-snug);
	font-weight: 800;
	color: var(--acxpa-ds-ink);
	margin: 0 0 var(--acxpa-ds-space-md);
	text-wrap: balance;
}

.cmw-sec--tech      { background: var(--acxpa-ds-cloud); }
.cmw-sec--strategy  { background: var(--acxpa-ds-sand); }
.cmw-sec--reg       { background: var(--acxpa-ds-harbour-tint); }
.cmw-sec--lighter   { background: var(--acxpa-ds-clay-tint); }
.cmw-sec--worth     { background: var(--acxpa-ds-teal-50); }
.cmw-sec--sixty     { background: var(--acxpa-ds-gold-tint); border-top: 0; }

.cmw-sec--strategy .cmw-label { color: var(--acxpa-ds-gold-deep); }   /* 4.67:1 on Sand */
.cmw-sec--reg .cmw-label      { color: var(--acxpa-ds-harbour-deep); } /* 10.72:1 on Harbour Tint */
.cmw-sec--lighter .cmw-label  { color: var(--acxpa-ds-clay-deep); }   /* 5.95:1 on Clay Tint */
.cmw-sec--worth .cmw-label    { color: var(--acxpa-ds-teal-700); }    /* 8.40:1 on Teal 50 */
.cmw-sec--sixty .cmw-label    { color: var(--acxpa-ds-ink); }         /* R-B22 */

/* Story sections open with a real heading, not a small eyebrow, so each
   one is easy to find when scanning. The 60 seconds and New from ACXPA
   sections keep the eyebrow, because they have their own h2. */
.cmw-sec:has(.cmw-stories) > .cmw-label {
	font-size: var(--acxpa-ds-text-h3);
	line-height: var(--acxpa-ds-leading-snug);
	letter-spacing: 0;
	text-transform: none;
	font-weight: 800;
	margin: 0 0 var(--acxpa-ds-space-lg);
	display: flex;
	align-items: center;
	gap: var(--acxpa-ds-space-sm);
}

.cmw-sec:has(.cmw-stories) > .cmw-label::before {
	content: "";
	flex: none;
	width: 4px;
	height: 1.1em;
	border-radius: 2px;
	background: currentColor;
}

.cmw-badge {
	display: inline-block;
	vertical-align: middle;
	margin-left: var(--acxpa-ds-space-xs);
	font-size: var(--acxpa-ds-text-caption);
	letter-spacing: 0.08em;
	background: var(--acxpa-ds-gold);
	color: var(--acxpa-ds-ink);
	border-radius: var(--acxpa-ds-radius-pill);
	padding: 0 var(--acxpa-ds-space-xs);
}

/* The week in 60 seconds */
.cmw-themes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--acxpa-ds-space-md);
	/* Three across at full width, stacking as the screen narrows. */
	grid-template-columns: repeat(auto-fit, minmax(min(28rem, 100%), 1fr));
}

.cmw-themes li {
	background: var(--acxpa-ds-white);
	border-radius: var(--acxpa-ds-radius-md);
	padding: var(--acxpa-ds-space-md) var(--acxpa-ds-space-lg);
	margin: 0;
}

.cmw .cmw-themes h3 {
	font-size: var(--acxpa-ds-text-h4);
	line-height: var(--acxpa-ds-leading-snug);
	font-weight: 700;
	color: var(--acxpa-ds-ink);
	margin: 0 0 var(--acxpa-ds-space-2xs);
}

.cmw-themes p {
	font-size: var(--acxpa-ds-text-small);
	margin: 0 0 var(--acxpa-ds-space-xs);
}

.cmw-themes p:last-child {
	margin-bottom: 0;
	font-weight: 600;
}

/* Stories — each one is a white card on its section's ground, so a section
   reads as a set of separate stories rather than one block of text. Body copy
   is full body size; the "So what" is its own tinted box. */
.cmw-stories {
	display: grid;
	gap: var(--acxpa-ds-space-lg);
	/* Two stories per row at full width; a lone story spans the row. */
	grid-template-columns: repeat(auto-fit, minmax(min(44rem, 100%), 1fr));
}

.cmw-story {
	display: flex;
	flex-direction: column;
	gap: var(--acxpa-ds-space-sm);
	background: var(--acxpa-ds-white);
	border: 1px solid var(--acxpa-ds-teal-100);
	border-radius: var(--acxpa-ds-radius-md);
	box-shadow: var(--acxpa-ds-shadow-md);
	padding: var(--acxpa-ds-space-lg) var(--acxpa-ds-space-xl) var(--acxpa-ds-space-xl);
}

.cmw-story > * {
	margin: 0;
}

/* Readable line length even when a story spans the full width. */
.cmw-story > p {
	max-width: var(--acxpa-ds-measure);
}

/* A section with one story: the "So what" sits beside the story instead of
   under it, so the full-width card doesn't leave half the row empty. */
@media (min-width: 900px) {
	.cmw-story:only-child:has(> .cmw-sowhat) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(28rem, 38rem);
		column-gap: var(--acxpa-ds-space-2xl);
		align-content: start;
	}

	.cmw-story:only-child:has(> .cmw-sowhat) > * {
		grid-column: 1;
	}

	.cmw-story:only-child:has(> .cmw-sowhat) > .cmw-read {
		justify-self: start;
		margin-top: var(--acxpa-ds-space-2xs);
	}

	.cmw-story:only-child > .cmw-sowhat {
		grid-column: 2;
		grid-row: 2 / span 5;
		align-self: start;
	}
}

/* Source line: Slate on the white card (4.98:1). */
.cmw-src {
	font-size: var(--acxpa-ds-text-caption);
	color: var(--acxpa-ds-text-muted);
	letter-spacing: 0.02em;
}

.cmw-src b {
	font-weight: 700;
	color: var(--acxpa-ds-ink);
}

.cmw .cmw-story__title {
	font-size: var(--acxpa-ds-text-h3);
	line-height: var(--acxpa-ds-leading-snug);
	font-weight: 700;
	margin: 0 0 var(--acxpa-ds-space-2xs);
	text-wrap: balance;
}

.cmw .cmw-story__title a {
	color: var(--acxpa-ds-ink);
	text-decoration: none;
}

.cmw .cmw-story__title a:hover {
	color: var(--acxpa-ds-teal-700);
	text-decoration: underline;
}

.cmw-story p {
	font-size: var(--acxpa-ds-text-body);
	line-height: var(--acxpa-ds-leading-body);
}

/* Ink on Gold Tint, never Gold Deep on Gold Tint (R-B22). */
.cmw .cmw-sowhat {
	background: var(--acxpa-ds-gold-tint);
	border-left: 4px solid var(--acxpa-ds-gold);
	border-radius: var(--acxpa-ds-radius-sm);
	padding: var(--acxpa-ds-space-sm) var(--acxpa-ds-space-md);
	color: var(--acxpa-ds-ink);
}

.cmw .cmw-flag {
	font-size: var(--acxpa-ds-text-small);
	font-style: italic;
	color: var(--acxpa-ds-text-muted);
}

/* Pinned to the foot of the card, so side-by-side cards line up. */
.cmw .cmw-read {
	align-self: flex-start;
	margin-top: auto;
	font-size: var(--acxpa-ds-text-small);
	font-weight: 600;
	color: var(--acxpa-ds-teal-700);
	background: var(--acxpa-ds-white);
	border: 1px solid var(--acxpa-ds-border-strong);
	border-radius: var(--acxpa-ds-radius-sm);
	padding: var(--acxpa-ds-space-xs) var(--acxpa-ds-space-md);
	text-decoration: none;
}

.cmw .cmw-read:hover {
	background: var(--acxpa-ds-gold-deep);
	border-color: var(--acxpa-ds-gold-deep);
	color: var(--acxpa-ds-white);
}

/* New from ACXPA */
.cmw-slots {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	gap: var(--acxpa-ds-space-md);
}

.cmw-slot {
	border: 1px solid var(--acxpa-ds-teal-100);
	border-top: 4px solid var(--acxpa-ds-teal-600);
	border-radius: var(--acxpa-ds-radius-md);
	padding: var(--acxpa-ds-space-md);
	font-size: var(--acxpa-ds-text-small);
}

.cmw-slot p {
	margin: 0 0 var(--acxpa-ds-space-xs);
	font-size: inherit;
}

.cmw .cmw-slot a {
	color: var(--acxpa-ds-link);
	font-weight: 600;
}

/* Member teaser, subscribe and community panels */
.cmw-teaser {
	background: var(--acxpa-ds-gold-tint);
	border-top: 1px solid var(--acxpa-ds-gold);
	border-bottom: 1px solid var(--acxpa-ds-gold);
}

.cmw-teaser__label {
	font-size: var(--acxpa-ds-text-eyebrow);
	letter-spacing: var(--acxpa-ds-tracking-eyebrow);
	text-transform: uppercase;
	font-weight: 700;
	color: var(--acxpa-ds-ink); /* R-B22 */
	margin: 0 0 var(--acxpa-ds-space-2xs);
}

.cmw .cmw-teaser__title,
.cmw .cmw-subscribe__title {
	font-size: var(--acxpa-ds-text-h3);
	line-height: var(--acxpa-ds-leading-snug);
	font-weight: 800;
	color: var(--acxpa-ds-ink);
	margin: 0 0 var(--acxpa-ds-space-sm);
	text-wrap: balance;
}

.cmw-teaser p,
.cmw-subscribe p {
	font-size: var(--acxpa-ds-text-body);
	margin: 0 0 var(--acxpa-ds-space-xs);
}

/* Locked visitor view: one choice, two cards (the archive's tier cards). */
.cmw-choose {
	background: var(--acxpa-ds-white);
	border-top: 1px solid var(--acxpa-ds-teal-100);
}

.cmw .cmw-choose__title {
	font-size: var(--acxpa-ds-text-h3);
	line-height: var(--acxpa-ds-leading-snug);
	font-weight: 800;
	color: var(--acxpa-ds-ink);
	margin: 0 0 var(--acxpa-ds-space-xs);
}

.cmw .cmw-choose__note {
	font-size: var(--acxpa-ds-text-body);
	margin: 0 0 var(--acxpa-ds-space-lg);
}

.cmw .cmw-choose .cmw-choose__note .cmw-textlink {
	margin-left: var(--acxpa-ds-space-xs);
}

.cmw-subscribe {
	background: var(--acxpa-ds-sand);
	border-top: 1px solid var(--acxpa-ds-stone);
}

.cmw-heads__list {
	margin: 0;
	padding-left: var(--acxpa-ds-space-lg);
	display: grid;
	gap: var(--acxpa-ds-space-sm);
}

.cmw-heads__list li {
	font-size: var(--acxpa-ds-text-body);
	margin: 0;
}

.cmw-heads__title {
	font-weight: 600;
}

.cmw-heads__src {
	display: block;
	font-size: var(--acxpa-ds-text-caption);
	color: var(--acxpa-ds-text-muted); /* Slate on white 5.18:1 */
}

/* Footer — Teal 800. Teal 200 7.45:1. */
.cmw-foot {
	background: var(--acxpa-ds-teal-800);
	color: var(--acxpa-ds-text-muted-on-dark);
	font-size: var(--acxpa-ds-text-caption);
}

.cmw-foot p {
	font-size: inherit;
	margin: 0 0 var(--acxpa-ds-space-2xs);
	color: inherit;
}

.cmw-foot strong {
	color: var(--acxpa-ds-text-on-dark);
}

/* Previous / next */
.cmw-pager {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--acxpa-ds-space-md);
	margin-top: var(--acxpa-ds-space-xl);
}

.cmw .cmw-pager__link {
	display: grid;
	gap: var(--acxpa-ds-space-2xs);
	font-size: var(--acxpa-ds-text-small);
	font-weight: 600;
	color: var(--acxpa-ds-ink);
	text-decoration: none;
	background: var(--acxpa-ds-white);
	border-radius: var(--acxpa-ds-radius-md);
	padding: var(--acxpa-ds-space-md);
	box-shadow: var(--acxpa-ds-shadow-sm);
}

.cmw .cmw-pager__link span {
	font-size: var(--acxpa-ds-text-caption);
	color: var(--acxpa-ds-link);
}

.cmw-pager__link--next {
	grid-column: 3;
	text-align: right;
}

.cmw .cmw-pager__all {
	grid-column: 2;
	font-size: var(--acxpa-ds-text-small);
	font-weight: 700;
	color: var(--acxpa-ds-link);
}

/* --------------------------------------------------------------------------
   Library (archive)
   -------------------------------------------------------------------------- */

/* Hero — LIGHT on purpose. The site header directly above is dark teal, and
   two dark panels must never touch. Teal 50 ground: Ink 14.51:1, Teal 700
   8.40:1, Teal 600 6.66:1. Gold rule separates it from
   the Cloud list below. */
.cmw-hero {
	background: var(--acxpa-ds-teal-50);
	color: var(--acxpa-ds-ink);
	border-bottom: 4px solid var(--acxpa-ds-gold);
	padding: var(--acxpa-ds-space-3xl) 0 var(--acxpa-ds-space-2xl);
}

.cmw-hero__eyebrow {
	font-size: var(--acxpa-ds-text-eyebrow);
	letter-spacing: var(--acxpa-ds-tracking-eyebrow);
	text-transform: uppercase;
	font-weight: 700;
	color: var(--acxpa-ds-teal-600);
	margin: 0 0 var(--acxpa-ds-space-sm);
}

.cmw .cmw-hero__title {
	font-size: var(--acxpa-ds-text-h1);
	line-height: var(--acxpa-ds-leading-tight);
	font-weight: 800;
	color: var(--acxpa-ds-ink);
	margin: 0 0 var(--acxpa-ds-space-md);
	text-wrap: balance;
}

.cmw-hero__lead {
	font-size: var(--acxpa-ds-text-lead);
	line-height: var(--acxpa-ds-leading-snug);
	color: var(--acxpa-ds-teal-700);
	margin: 0 0 var(--acxpa-ds-space-xs);
}

.cmw-search {
	margin-top: var(--acxpa-ds-space-xl);
	padding-top: var(--acxpa-ds-space-lg);
	border-top: 1px solid var(--acxpa-ds-teal-200);
}

.cmw-hero__note {
	font-size: var(--acxpa-ds-text-body);
	color: var(--acxpa-ds-ink);
	margin: var(--acxpa-ds-space-lg) 0 0;
}

.cmw-search__label {
	display: block;
	font-size: var(--acxpa-ds-text-small);
	font-weight: 700;
	color: var(--acxpa-ds-ink);
	margin-bottom: var(--acxpa-ds-space-xs);
}

.cmw-search__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--acxpa-ds-space-sm);
}

.cmw .cmw-search__input {
	flex: 1 1 28rem;
	min-width: 0;
	font-size: var(--acxpa-ds-text-body);
	color: var(--acxpa-ds-ink);
	background: var(--acxpa-ds-white);
	border: 2px solid var(--acxpa-ds-border-strong);
	border-radius: var(--acxpa-ds-radius-sm);
	padding: var(--acxpa-ds-space-sm) var(--acxpa-ds-space-md);
	height: auto;
	margin: 0;
}

/* Subscriber upgrade band — Gold Tint, Ink text (R-B22). */
.cmw-upgrade {
	background: var(--acxpa-ds-gold-tint);
	padding: var(--acxpa-ds-space-xl) 0;
}

.cmw-upgrade__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--acxpa-ds-space-lg);
}

.cmw .cmw-upgrade__title {
	font-size: var(--acxpa-ds-text-h3);
	line-height: var(--acxpa-ds-leading-snug);
	font-weight: 800;
	color: var(--acxpa-ds-ink);
	margin: 0 0 var(--acxpa-ds-space-xs);
}

.cmw-upgrade p {
	font-size: var(--acxpa-ds-text-body);
	margin: 0;
}

/* Hero: text on the left, the latest issue on the right, so the 1280px
   width is used by content. Stacks below 980px. */
.cmw-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 42rem);
	gap: var(--acxpa-ds-space-2xl);
	align-items: center;
}

/* "Every issue covers": 2x2 tick list under the hero lead. */
.cmw-covers {
	list-style: none;
	margin: var(--acxpa-ds-space-lg) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr));
	gap: var(--acxpa-ds-space-sm) var(--acxpa-ds-space-lg);
}

.cmw .cmw-covers li {
	position: relative;
	padding-left: var(--acxpa-ds-space-lg);
	font-size: var(--acxpa-ds-text-small);
	line-height: var(--acxpa-ds-leading-snug);
	color: var(--acxpa-ds-ink);
	margin: 0;
}

.cmw-covers li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
	color: var(--acxpa-ds-teal-600); /* 6.66:1 on Teal 50 */
}

.cmw-covers strong {
	font-weight: 700;
}

.cmw-latest {
	background: var(--acxpa-ds-white);
	border-top: 4px solid var(--acxpa-ds-gold);
	border-radius: var(--acxpa-ds-radius-md);
	box-shadow: var(--acxpa-ds-shadow-md);
	padding: var(--acxpa-ds-space-lg);
}

.cmw .cmw-latest p {
	margin: 0 0 var(--acxpa-ds-space-xs);
}

.cmw .cmw-latest__eyebrow {
	font-size: var(--acxpa-ds-text-eyebrow);
	letter-spacing: var(--acxpa-ds-tracking-eyebrow);
	text-transform: uppercase;
	font-weight: 700;
	color: var(--acxpa-ds-gold-deep); /* 4.99:1 on White */
}

.cmw .cmw-latest__title {
	font-size: var(--acxpa-ds-text-h4);
	line-height: var(--acxpa-ds-leading-snug);
	font-weight: 800;
	margin: 0 0 var(--acxpa-ds-space-md);
}

.cmw .cmw-latest__title a {
	color: var(--acxpa-ds-ink);
	text-decoration: none;
}

.cmw .cmw-latest__title a:hover {
	color: var(--acxpa-ds-teal-700);
	text-decoration: underline;
}

.cmw .cmw-latest__in {
	font-size: var(--acxpa-ds-text-caption);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--acxpa-ds-tracking-eyebrow);
	color: var(--acxpa-ds-teal-600);
}

.cmw-latest__heads {
	margin: 0 0 var(--acxpa-ds-space-xs);
	padding-left: var(--acxpa-ds-space-md);
}

.cmw .cmw-latest__heads li {
	font-size: var(--acxpa-ds-text-small);
	line-height: var(--acxpa-ds-leading-snug);
	margin: 0 0 var(--acxpa-ds-space-xs);
}

.cmw .cmw-latest__more {
	font-size: var(--acxpa-ds-text-small);
	color: var(--acxpa-ds-text-muted); /* Slate on White 5.18:1 */
	margin-bottom: var(--acxpa-ds-space-md);
}

.cmw .cmw-latest .cmw-btn {
	margin-top: var(--acxpa-ds-space-xs);
}

@media (max-width: 980px) {
	.cmw-hero__grid {
		grid-template-columns: 1fr;
	}
}

/* Visitor-only "how you can read it" strip. Three surfaces, light to dark,
   so the member edition reads as the step up. Teal 900 card: White 15.49:1,
   Gold heading 8.32:1, Teal 200 label 9.35:1. Gold Tint card: Ink 13.50:1
   (R-B22). Cloud card: Ink, Teal 600 label 6.74:1. */
.cmw-tiers {
	background: var(--acxpa-ds-white);
	padding: var(--acxpa-ds-space-2xl) 0 var(--acxpa-ds-space-xl);
}

.cmw .cmw-tiers__title {
	font-size: var(--acxpa-ds-text-h3);
	line-height: var(--acxpa-ds-leading-snug);
	font-weight: 800;
	color: var(--acxpa-ds-ink);
	margin: 0 0 var(--acxpa-ds-space-xs);
}

.cmw-tiers__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
	gap: var(--acxpa-ds-space-md);
}

.cmw-tier {
	border-radius: var(--acxpa-ds-radius-md);
	padding: var(--acxpa-ds-space-lg);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.cmw-tier p {
	font-size: var(--acxpa-ds-text-small);
	margin: 0 0 var(--acxpa-ds-space-sm);
}

.cmw .cmw-tier .cmw-tier__label {
	font-size: var(--acxpa-ds-text-eyebrow);
	letter-spacing: var(--acxpa-ds-tracking-eyebrow);
	text-transform: uppercase;
	font-weight: 700;
	margin: 0 0 var(--acxpa-ds-space-2xs);
}

.cmw .cmw-tier .cmw-tier__name {
	font-size: var(--acxpa-ds-text-h4);
	line-height: var(--acxpa-ds-leading-snug);
	font-weight: 700;
	margin: 0 0 var(--acxpa-ds-space-xs);
}

.cmw-tier--open {
	background: var(--acxpa-ds-cloud);
	color: var(--acxpa-ds-ink);
}

.cmw-tier--open .cmw-tier__label {
	color: var(--acxpa-ds-teal-600);
}

.cmw-tier--sub {
	background: var(--acxpa-ds-gold-tint);
	color: var(--acxpa-ds-ink);
}

.cmw-tier--member {
	background: var(--acxpa-ds-teal-900);
	color: var(--acxpa-ds-text-on-dark);
}

.cmw-tier--member .cmw-tier__label {
	color: var(--acxpa-ds-text-muted-on-dark);
}

.cmw .cmw-tier--member .cmw-tier__name {
	color: var(--acxpa-ds-gold);
}

.cmw .cmw-tier .cmw-btn {
	margin-top: auto;
}

.cmw .cmw-btn--light {
	background: var(--acxpa-ds-white);
	color: var(--acxpa-ds-teal-700);
}

/* Issue list — rows, not a wall of tiles. */
.cmw-list-wrap {
	padding-top: var(--acxpa-ds-space-2xl);
}

.cmw-results {
	font-size: var(--acxpa-ds-text-body);
	margin: 0 0 var(--acxpa-ds-space-lg);
}

.cmw-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--acxpa-ds-space-md);
}

.cmw-row {
	display: grid;
	grid-template-columns: 16rem 1fr;
	gap: var(--acxpa-ds-space-lg);
	background: var(--acxpa-ds-white);
	border-radius: var(--acxpa-ds-radius-md);
	border-left: 4px solid var(--acxpa-ds-gold);
	box-shadow: var(--acxpa-ds-shadow-sm);
	padding: var(--acxpa-ds-space-lg);
	margin: 0;
}

.cmw-row__meta {
	display: grid;
	align-content: start;
	gap: var(--acxpa-ds-space-2xs);
}

.cmw-row__num {
	font-size: var(--acxpa-ds-text-eyebrow);
	letter-spacing: var(--acxpa-ds-tracking-eyebrow);
	text-transform: uppercase;
	font-weight: 700;
	color: var(--acxpa-ds-teal-600);
}

.cmw-row__date {
	font-size: var(--acxpa-ds-text-small);
	color: var(--acxpa-ds-text-muted);
}

.cmw .cmw-row__title {
	font-size: var(--acxpa-ds-text-h4);
	line-height: var(--acxpa-ds-leading-snug);
	font-weight: 700;
	margin: 0 0 var(--acxpa-ds-space-xs);
}

.cmw .cmw-row__title a {
	color: var(--acxpa-ds-ink);
	text-decoration: none;
}

.cmw .cmw-row__title a:hover {
	color: var(--acxpa-ds-teal-700);
	text-decoration: underline;
}

.cmw-row__excerpt {
	font-size: var(--acxpa-ds-text-small);
	margin: 0;
}

/* Read button + availability pill on one line, wrapping on narrow screens. */
.cmw-row__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--acxpa-ds-space-sm) var(--acxpa-ds-space-md);
	margin-top: var(--acxpa-ds-space-md);
}

.cmw-row__actions .cmw-pill {
	margin: 0;
}

.cmw .cmw-btn--sm {
	font-size: var(--acxpa-ds-text-small);
	padding: var(--acxpa-ds-space-xs) var(--acxpa-ds-space-md);
}

.cmw-empty {
	font-size: var(--acxpa-ds-text-body);
}

.cmw .cmw-pagination {
	margin-top: var(--acxpa-ds-space-xl);
	font-size: var(--acxpa-ds-text-small);
}

.cmw .cmw-pagination .page-numbers {
	display: inline-block;
	padding: var(--acxpa-ds-space-2xs) var(--acxpa-ds-space-sm);
	color: var(--acxpa-ds-link);
	font-weight: 600;
}

.cmw .cmw-pagination .page-numbers.current {
	background: var(--acxpa-ds-teal-700);
	color: var(--acxpa-ds-white);
	border-radius: var(--acxpa-ds-radius-sm);
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
	.cmw-issue > *,
	.cmw-body > * {
		padding: var(--acxpa-ds-space-lg) var(--acxpa-ds-space-md);
	}

	.cmw-story {
		padding: var(--acxpa-ds-space-md) var(--acxpa-ds-space-md) var(--acxpa-ds-space-lg);
	}

	.cmw-edition {
		position: static;
		display: inline-block;
		margin-top: var(--acxpa-ds-space-sm);
	}

	.cmw-row {
		grid-template-columns: 1fr;
		gap: var(--acxpa-ds-space-xs);
	}

	.cmw-pager {
		grid-template-columns: 1fr;
	}

	.cmw-pager__link--next,
	.cmw .cmw-pager__all {
		grid-column: auto;
		text-align: left;
	}
}

/* --------------------------------------------------------------------------
   Suggest a story (manage.php section B). Harbour Tint ground, so it never
   sits Sand-on-Sand under the visitor subscribe panel. Copy left, form right.
   -------------------------------------------------------------------------- */
.cmw-suggest {
	background: var(--acxpa-ds-harbour-tint);
	border-top: 1px solid var(--acxpa-ds-teal-100);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(32rem, 100%), 1fr));
	gap: var(--acxpa-ds-space-lg) var(--acxpa-ds-space-2xl);
	align-items: start;
}

.cmw-suggest-wrap .cmw-suggest {
	border-radius: var(--acxpa-ds-radius-md);
	padding: var(--acxpa-ds-space-xl);
	margin-top: var(--acxpa-ds-space-xl);
}

.cmw-suggest .cmw-label {
	color: var(--acxpa-ds-harbour-deep); /* 10.72:1 on Harbour Tint */
}

.cmw .cmw-suggest__title {
	font-size: var(--acxpa-ds-text-h3);
	line-height: var(--acxpa-ds-leading-snug);
	font-weight: 800;
	color: var(--acxpa-ds-ink);
	margin: 0 0 var(--acxpa-ds-space-sm);
}

.cmw-suggest__copy p {
	font-size: var(--acxpa-ds-text-body);
	margin: 0 0 var(--acxpa-ds-space-xs);
}

/* One column here; ticks in Harbour Deep on Harbour Tint. */
.cmw-suggest .cmw-suggest__list {
	grid-template-columns: 1fr;
	margin-top: var(--acxpa-ds-space-md);
}

.cmw .cmw-suggest__list li {
	font-size: var(--acxpa-ds-text-body);
}

.cmw-suggest__list li::before {
	color: var(--acxpa-ds-harbour-deep);
}

.cmw-suggest__form {
	background: var(--acxpa-ds-white);
	border-radius: var(--acxpa-ds-radius-md);
	box-shadow: var(--acxpa-ds-shadow-md);
	padding: var(--acxpa-ds-space-lg);
	display: flex;
	flex-direction: column;
	gap: var(--acxpa-ds-space-xs);
}

.cmw-suggest__form p {
	font-size: var(--acxpa-ds-text-body);
	margin: 0;
}

.cmw .cmw-suggest__label {
	font-size: var(--acxpa-ds-text-small);
	font-weight: 700;
	color: var(--acxpa-ds-ink);
	margin-top: var(--acxpa-ds-space-xs);
}

.cmw-suggest__label span {
	font-weight: 400;
	color: var(--acxpa-ds-text-muted);
}

.cmw .cmw-suggest__input {
	width: 100%;
	box-sizing: border-box;
	font-size: var(--acxpa-ds-text-body);
	border: 1px solid var(--acxpa-ds-border-strong);
	border-radius: var(--acxpa-ds-radius-sm);
	padding: var(--acxpa-ds-space-xs) var(--acxpa-ds-space-sm);
	background: var(--acxpa-ds-white);
	color: var(--acxpa-ds-ink);
	margin: 0;
}

.cmw .cmw-suggest__check {
	display: flex;
	gap: var(--acxpa-ds-space-xs);
	align-items: flex-start;
	font-size: var(--acxpa-ds-text-small);
	color: var(--acxpa-ds-ink);
	margin: var(--acxpa-ds-space-xs) 0;
}

.cmw-suggest__check input {
	margin-top: 0.3em;
}

.cmw .cmw-suggest__form .cmw-btn {
	align-self: flex-start;
}

.cmw .cmw-suggest__thanks {
	font-size: var(--acxpa-ds-text-h4);
	font-weight: 700;
}

.cmw .cmw-suggest__err {
	color: var(--acxpa-ds-error-deep);
	font-weight: 600;
}

/* Credit line under a suggested story: "Suggested by Jane Smith, Acme". */
.cmw .cmw-credit {
	font-size: var(--acxpa-ds-text-small);
	color: var(--acxpa-ds-text-muted);
}

/* Admin "preview as" bar (manage.php section E), editors only. */
.cmw-previewbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--acxpa-ds-space-xs) var(--acxpa-ds-space-sm);
	background: var(--acxpa-ds-ink);
	color: var(--acxpa-ds-text-on-dark);
	font-size: var(--acxpa-ds-text-small);
	padding: var(--acxpa-ds-space-xs) var(--acxpa-ds-space-md);
	justify-content: center;
}

.cmw .cmw-previewbar a {
	color: var(--acxpa-ds-text-on-dark);
	border: 1px solid var(--acxpa-ds-text-muted-on-dark);
	border-radius: var(--acxpa-ds-radius-pill);
	padding: 0 var(--acxpa-ds-space-sm);
	text-decoration: none;
}

.cmw .cmw-previewbar a[aria-current="true"] {
	background: var(--acxpa-ds-gold);
	border-color: var(--acxpa-ds-gold);
	color: var(--acxpa-ds-ink);
}