/**
 * Breach Watch — public board, in the Cleverer visual language.
 *
 * **Scope.** Every selector is a descendant of `.clvr-bw`. There is no bare element selector, no
 * `:root` custom property and no reset, because this stylesheet loads on a site whose theme this
 * plugin does not own — and a plugin that restyles `body`, `h2` or `a` on somebody else's site is a
 * bug wearing a design. Custom properties are declared on `.clvr-bw` for the same reason: a variable
 * on `:root` is a variable the whole page inherits.
 *
 * **Relationship to the Cleverer landing pages.** The tokens below — the palette, the radii, the
 * shadow pair, the container width, the breakpoints — are the values the Cleverer site already uses.
 * They are *translated* rather than imported: nothing here loads, extends or depends on `.clvr-lp`,
 * so the board is self-contained and a change to the landing-page stylesheet cannot silently restyle
 * a breach record. The landing pages' decorative parts are deliberately absent — the radial hero
 * glow, the icon tiles, the hover lift, the glass CTA card and the `!important` overrides. A breach
 * record is a factual document, and movement and glow are not facts.
 *
 * **What colour is allowed to do.** Nothing on its own. Every status, relationship and verification
 * level on this board is a word; the badge behind it is contrast, never the message
 * (CONTENT-STANDARD.md §6). There are no severity colours, no confidence bars and no charts.
 *
 * No gradients, no imagery, no icon font, no animation, no JavaScript, no external request.
 *
 * @package Cleverer\BreachWatch
 */

.clvr-bw {

	/* Palette — the Cleverer values. */
	--clvr-bw-surface: #ffffff;
	--clvr-bw-surface-2: #f7f9fc;
	--clvr-bw-text: #1d2433;
	--clvr-bw-navy: #0f1b3d;
	--clvr-bw-muted: #5f6b7a;
	--clvr-bw-line: #e7edf3;
	--clvr-bw-line-strong: #d6e2ec;
	--clvr-bw-accent: #1ba39c;
	--clvr-bw-accent-ink: #12736e;
	--clvr-bw-accent-soft: rgba( 27, 163, 156, 0.08 );

	/* Restrained shadows: a hairline for cards, a soft one for the panel that leads. */
	--clvr-bw-shadow-soft: 0 1px 3px rgba( 15, 27, 61, 0.04 );
	--clvr-bw-shadow: 0 4px 24px rgba( 15, 27, 61, 0.06 );

	--clvr-bw-radius-lg: 12px;
	--clvr-bw-radius-md: 10px;
	--clvr-bw-radius-sm: 8px;

	/* Layout. 1160 − (32 × 2) leaves 1096 for a 740/320 split and a 32px gap. */
	--clvr-bw-max: 1160px;
	--clvr-bw-pad: 32px;
	--clvr-bw-gap: 32px;

	/* Prose stays readable even where its section is wider than a column. */
	--clvr-bw-measure: 70ch;
}

.clvr-bw {
	background: var( --clvr-bw-surface );
	color: var( --clvr-bw-text );
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
}

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

/* Nothing on this board may push the viewport sideways. A long organisation name, a category, a
   source title or a bare URL wraps inside its own box instead. */
.clvr-bw p,
.clvr-bw li,
.clvr-bw dd,
.clvr-bw dt,
.clvr-bw h1,
.clvr-bw h2,
.clvr-bw h3,
.clvr-bw a {
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* ------------------------------------------------------------------- layout -- */

.clvr-bw__container {
	margin: 0 auto;
	max-width: var( --clvr-bw-max );
	padding: 0 var( --clvr-bw-pad );
	width: 100%;
}

.clvr-bw__layout {
	align-items: start;
	display: grid;

	/* Proportional rather than fixed, so the columns keep the 740/320 relationship at every width
	   the desktop breakpoint covers. `minmax( 0, … )` on both, because a grid child defaults to
	   `min-content` and one long token would otherwise widen the whole page. */
	gap: var( --clvr-bw-gap );
	grid-template-columns: minmax( 0, 740fr ) minmax( 0, 320fr );
	padding: 40px 0 56px;
}

.clvr-bw__main,
.clvr-bw__sidebar {
	min-width: 0;
}

.clvr-bw__sidebar {
	display: grid;
	gap: 16px;
	position: sticky;
	top: 24px;
}

.clvr-bw__prose {
	max-width: var( --clvr-bw-measure );
}

/* --------------------------------------------------------------- typography -- */

.clvr-bw h1,
.clvr-bw h2,
.clvr-bw h3 {
	color: var( --clvr-bw-navy );
	letter-spacing: -0.02em;
	margin: 0 0 12px;
}

.clvr-bw h1 {
	font-size: clamp( 26px, 3.5vw, 40px );
	letter-spacing: -0.025em;
	line-height: 1.1;
}

.clvr-bw h2 {
	font-size: 1.375rem;
	line-height: 1.25;
}

.clvr-bw h3 {
	font-size: 1rem;
	line-height: 1.4;
}

/* The supporting column's headings are `h2` — they are siblings of the factual column's sections,
   and skipping to `h4` to get a smaller size would break the outline for a screen reader in order
   to buy a font size. The size comes from the class instead. */
.clvr-bw__panel-title {
	color: var( --clvr-bw-muted );
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	margin: 0 0 12px;
	text-transform: uppercase;
}

.clvr-bw p {
	margin: 0 0 12px;
}

.clvr-bw ul,
.clvr-bw ol {
	margin: 0 0 12px;
	padding-left: 18px;
}

.clvr-bw li + li {
	margin-top: 6px;
}

.clvr-bw__eyebrow {
	color: var( --clvr-bw-accent-ink );
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	margin: 0 0 12px;
	text-transform: uppercase;
}

.clvr-bw__lead {
	color: var( --clvr-bw-muted );
	font-size: 1.0625rem;
	line-height: 1.7;
}

.clvr-bw__note {
	color: var( --clvr-bw-muted );
	font-size: 13px;
	line-height: 1.65;
	margin: 12px 0 0;
}

/* -------------------------------------------------------------------- links -- */

.clvr-bw a {
	color: var( --clvr-bw-accent-ink );
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

.clvr-bw a:hover {
	color: var( --clvr-bw-navy );
}

.clvr-bw a:focus-visible,
.clvr-bw__skip-link:focus,
.clvr-bw__wordmark:focus-visible,
.clvr-bw__back-link:focus-visible {
	border-radius: 2px;
	outline: 3px solid var( --clvr-bw-accent );
	outline-offset: 2px;
}

.clvr-bw__skip-link {
	background: var( --clvr-bw-surface );
	border-radius: var( --clvr-bw-radius-sm );
	color: var( --clvr-bw-accent-ink );
	left: -9999px;
	padding: 12px 16px;
	position: absolute;
	top: 0;
	z-index: 100;
}

.clvr-bw__skip-link:focus {
	left: 8px;
	top: 8px;
}

.clvr-bw__visually-hidden {
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* ------------------------------------------------------------------- header -- */

.clvr-bw__header {
	background: var( --clvr-bw-surface );
	border-bottom: 1px solid var( --clvr-bw-line );
}

.clvr-bw__header-inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	justify-content: space-between;
	min-height: 64px;
	padding-bottom: 12px;
	padding-top: 12px;
}

.clvr-bw__wordmark {
	color: var( --clvr-bw-navy );
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-decoration: none;
}

.clvr-bw__wordmark:hover {
	color: var( --clvr-bw-accent-ink );
}

.clvr-bw__header-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}

.clvr-bw__header-nav a {
	color: var( --clvr-bw-muted );
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.clvr-bw__header-nav a:hover {
	color: var( --clvr-bw-navy );
	text-decoration: underline;
}

/* ------------------------------------------------- contextual navigation -- */

/* The breadcrumb and the way back to the archive, both above the record.
 *
 * Restrained on purpose. The site's own header sits directly above these, and a reader arriving at a
 * breach record came for the record — so this is small type on the page background rather than a bar
 * of its own, and it scrolls away like any other content. Nothing here is sticky. */
.clvr-bw__breadcrumb {
	margin: 0 auto;
	max-width: var( --clvr-bw-max );
	padding: 24px var( --clvr-bw-pad ) 0;
}

.clvr-bw__breadcrumb-list {
	color: var( --clvr-bw-muted );
	display: flex;
	flex-wrap: wrap;
	font-size: 14px;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.clvr-bw__breadcrumb-list li {
	align-items: center;
	display: flex;
	gap: 8px;
}

/* The separator is generated rather than written into the markup, so it is never read aloud and
   never copied when a reader selects the trail. */
.clvr-bw__breadcrumb-list li + li::before {
	color: var( --clvr-bw-line-strong );
	content: "\203A";
}

.clvr-bw__breadcrumb-list a {
	color: var( --clvr-bw-muted );
	text-decoration: none;
}

.clvr-bw__breadcrumb-list a:hover,
.clvr-bw__breadcrumb-list a:focus-visible {
	color: var( --clvr-bw-accent-ink );
	text-decoration: underline;
}

.clvr-bw__breadcrumb-list [aria-current="page"] {
	color: var( --clvr-bw-text );
	font-weight: 600;
}

.clvr-bw__back-up {
	color: var( --clvr-bw-accent-ink );
	display: inline-block;
	font-size: 15px;
	font-weight: 600;
	margin: 0 auto;
	max-width: var( --clvr-bw-max );
	padding: 12px var( --clvr-bw-pad ) 0;
	text-decoration: none;
	width: 100%;
}

.clvr-bw__back-up:hover,
.clvr-bw__back-up:focus-visible {
	text-decoration: underline;
}

/* --------------------------------------------------------------------- hero -- */

.clvr-bw__hero {
	background: var( --clvr-bw-surface-2 );
	border-bottom: 1px solid var( --clvr-bw-line );
	padding: 48px 0 40px;
}

/* The Cleverer hero shape: the copy leads, a panel sits beside it. Here the panel is the
   deterministic factual summary rather than a marketing card, which is the one thing on the page a
   reader wants before anything else. */
.clvr-bw__hero-grid {
	align-items: center;
	display: grid;
	gap: 48px;
	grid-template-columns: minmax( 0, 1.08fr ) minmax( 0, 0.92fr );
}

.clvr-bw__hero-copy {
	min-width: 0;
}

.clvr-bw__hero-org {
	color: var( --clvr-bw-muted );
	font-size: 15px;
	font-weight: 600;
	margin: 0 0 6px;
}

.clvr-bw__hero-title {
	margin-bottom: 16px;
}

.clvr-bw__hero-summary {
	background: var( --clvr-bw-surface );
	border: 1px solid var( --clvr-bw-line );
	border-radius: var( --clvr-bw-radius-lg );
	box-shadow: var( --clvr-bw-shadow );
	min-width: 0;
	padding: 24px;
}

.clvr-bw__hero-summary p:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------------- badges -- */

.clvr-bw__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.clvr-bw__badges li + li {
	margin-top: 0;
}

/* A flex item will not shrink below its own min-content, so a long controlled term — "Verified from
   an official regulator or organisation notice" — widens the row, then the document, and the whole
   page scrolls sideways on a phone. `min-width: 0` lets the item shrink; `max-width: 100%` stops the
   badge itself outgrowing the row; the text inside then wraps to two lines, which is the correct
   outcome for a label whose whole job is to be readable. */
.clvr-bw__badges li,
.clvr-bw__pills li {
	min-width: 0;
}

.clvr-bw__badge {
	align-items: center;
	background: var( --clvr-bw-surface );
	border: 1px solid var( --clvr-bw-line-strong );
	border-radius: 999px;
	color: var( --clvr-bw-text );
	display: inline-flex;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	max-width: 100%;
	min-height: 28px;
	padding: 4px 12px;
}

.clvr-bw__badge--type {
	background: var( --clvr-bw-accent-soft );
	border-color: rgba( 27, 163, 156, 0.28 );
	color: var( --clvr-bw-accent-ink );
}

.clvr-bw__badge--level {
	background: var( --clvr-bw-surface-2 );
	color: var( --clvr-bw-muted );
}

/* ----------------------------------------------------------------- sections -- */

.clvr-bw__section {
	margin: 0 0 32px;
}

.clvr-bw__section:last-child {
	margin-bottom: 0;
}

.clvr-bw__section > h2 {
	border-bottom: 1px solid var( --clvr-bw-line );
	padding-bottom: 12px;
}

/* ------------------------------------------------------------------- panels -- */

.clvr-bw__panel,
.clvr-bw__card {
	background: var( --clvr-bw-surface );
	border: 1px solid var( --clvr-bw-line );
	border-radius: var( --clvr-bw-radius-lg );
	box-shadow: var( --clvr-bw-shadow-soft );
	min-width: 0;
	padding: 20px;
}

.clvr-bw__panel--soft {
	background: var( --clvr-bw-surface-2 );
	box-shadow: none;
}

.clvr-bw__panel > :last-child,
.clvr-bw__card > :last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------- definition lists -- */

.clvr-bw__facts {
	display: grid;
	gap: 0;
	grid-template-columns: minmax( 0, 200px ) minmax( 0, 1fr );
	margin: 0;
}

.clvr-bw__facts dt,
.clvr-bw__facts dd {
	border-top: 1px solid var( --clvr-bw-line );
	margin: 0;
	padding: 10px 0;
}

.clvr-bw__facts > dt:first-of-type,
.clvr-bw__facts > dt:first-of-type + dd {
	border-top: 0;
}

.clvr-bw__facts dt {
	color: var( --clvr-bw-muted );
	font-size: 0.9375rem;
	padding-right: 16px;
}

.clvr-bw__facts dd {
	font-variant-numeric: tabular-nums;
}

/* The compact form, used in the supporting column where there is no room for two columns. */
.clvr-bw__facts--stacked {
	grid-template-columns: minmax( 0, 1fr );
}

.clvr-bw__facts--stacked dt {
	border-top: 1px solid var( --clvr-bw-line );
	font-size: 0.8125rem;
	padding: 12px 0 0;
}

.clvr-bw__facts--stacked dd {
	border-top: 0;
	font-weight: 600;
	padding: 2px 0 12px;
}

.clvr-bw__facts--stacked > dt:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.clvr-bw__facts--stacked > dd:last-of-type {
	padding-bottom: 0;
}

/* -------------------------------------------------------------------- grids -- */

.clvr-bw__grid-2 {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}

/* ---------------------------------------------------------------- item list -- */

.clvr-bw__items {
	color: var( --clvr-bw-text );
	font-size: 0.9375rem;
	margin: 0;
	padding-left: 18px;
}

.clvr-bw__none {
	color: var( --clvr-bw-muted );
	font-size: 0.9375rem;
	margin: 0;
}

/* -------------------------------------------------------------------- pills -- */

.clvr-bw__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.clvr-bw__pills li + li {
	margin-top: 0;
}

.clvr-bw__pills li {
	background: var( --clvr-bw-surface-2 );
	border: 1px solid var( --clvr-bw-line );
	border-radius: var( --clvr-bw-radius-sm );
	font-size: 0.875rem;
	line-height: 1.4;
	padding: 6px 10px;
}

/* ------------------------------------------------------------------ sources -- */

.clvr-bw__sources {
	display: grid;
	gap: 16px;
}

.clvr-bw__sources + h3 {
	margin-top: 28px;
}

.clvr-bw__source {
	background: var( --clvr-bw-surface );
	border: 1px solid var( --clvr-bw-line );
	border-left: 3px solid var( --clvr-bw-accent );
	border-radius: var( --clvr-bw-radius-lg );
	box-shadow: var( --clvr-bw-shadow-soft );
	min-width: 0;
	padding: 20px;
}

.clvr-bw__source--secondary {
	border-left-color: var( --clvr-bw-line-strong );
}

.clvr-bw__source-relationship {
	background: var( --clvr-bw-surface-2 );
	border: 1px solid var( --clvr-bw-line );
	border-radius: var( --clvr-bw-radius-sm );
	color: var( --clvr-bw-muted );
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	margin: 0 0 10px;
	padding: 3px 8px;
	text-transform: uppercase;
}

.clvr-bw__source-title {
	color: var( --clvr-bw-navy );
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	margin: 0 0 8px;
}

.clvr-bw__source-meta {
	color: var( --clvr-bw-muted );
	display: flex;
	flex-wrap: wrap;
	font-size: 0.875rem;
	gap: 4px 20px;
	margin: 0 0 12px;
}

.clvr-bw__source-link {
	margin: 0;
}

.clvr-bw__source-link a {
	font-weight: 600;
}

/* --------------------------------------------------------------- commentary -- */

.clvr-bw__commentary {
	background: var( --clvr-bw-surface-2 );
	border-top: 1px solid var( --clvr-bw-line );
	padding: 48px 0;
}

.clvr-bw__commentary-inner {
	background: var( --clvr-bw-surface );
	border: 1px solid var( --clvr-bw-line );
	border-radius: var( --clvr-bw-radius-lg );
	box-shadow: var( --clvr-bw-shadow-soft );

	/* Centred in the band rather than aligned to the factual column. The commentary is the one
	   section that is not a claim about the incident, and sitting it on the page's own axis is what
	   says so — without a border treatment loud enough to read as a warning.

	   880px is the measure, and the only one: the eyebrow, the disclaimer, the rules between
	   sections, the headings and the paragraphs all run to the card's padding, so the line length is
	   the card's width less 28px each side. The two sections stay stacked, because they answer
	   different questions and reading them as a pair of columns would imply they are halves of one.
	   Below this width the rule does nothing — the card is already full-bleed in its container, so
	   tablet and mobile are untouched. */
	margin: 0 auto;
	max-width: 880px;
	padding: 32px 28px;
}

.clvr-bw__commentary-label {
	border-bottom: 1px solid var( --clvr-bw-line );
	color: var( --clvr-bw-muted );
	font-size: 13px;
	line-height: 1.65;
	margin: 0 0 24px;
	padding-bottom: 16px;
}

.clvr-bw__commentary-item + .clvr-bw__commentary-item {
	border-top: 1px solid var( --clvr-bw-line );
	margin-top: 28px;
	padding-top: 28px;
}

.clvr-bw__commentary-item h2 {
	font-size: 1.125rem;
}

/* The card is the measure. `.clvr-bw__commentary-inner` is already bounded at 880px, so a second
   `70ch` bound on the paragraphs inside it only opened a ragged 200px of unused space against the
   card's right edge — two nested limits where one was intended. The line length a reader gets is
   the card's width less its padding, which is what the card was sized for. */
.clvr-bw__commentary-item p {
	color: var( --clvr-bw-text );
	line-height: 1.75;
	max-width: 100%;
}

.clvr-bw__commentary-item p:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------------ archive -- */

.clvr-bw__list {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	padding: 40px 0 24px;
}

.clvr-bw__card-org {
	color: var( --clvr-bw-muted );
	font-size: 14px;
	font-weight: 600;
	margin: 0 0 6px;
}

.clvr-bw__card-title {
	font-size: 1.125rem;
	line-height: 1.35;
	margin: 0 0 12px;
}

.clvr-bw__card-title a {
	text-decoration: none;
}

.clvr-bw__card-title a:hover {
	text-decoration: underline;
}

.clvr-bw__card .clvr-bw__badges {
	margin-bottom: 16px;
}

.clvr-bw__card-more {
	margin: 16px 0 0;
}

.clvr-bw__card-more a {
	font-weight: 600;
}

.clvr-bw__empty {
	background: var( --clvr-bw-surface-2 );
	border: 1px solid var( --clvr-bw-line );
	border-radius: var( --clvr-bw-radius-lg );
	margin: 40px 0;
	max-width: 760px;
	padding: 40px 32px;
}

.clvr-bw__empty h2 {
	margin-bottom: 12px;
}

.clvr-bw__empty p {
	color: var( --clvr-bw-muted );
	margin-bottom: 0;
	max-width: var( --clvr-bw-measure );
}

.clvr-bw__pagination {
	border-top: 1px solid var( --clvr-bw-line );
	margin-top: 24px;
	padding: 20px 0 48px;
}

/* --------------------------------------------------------------- record nav -- */

.clvr-bw__record-nav {
	border-top: 1px solid var( --clvr-bw-line );
	padding: 24px 0 56px;
}

.clvr-bw__back-link {
	align-items: center;
	background: var( --clvr-bw-surface );
	border: 1px solid var( --clvr-bw-line-strong );
	border-radius: var( --clvr-bw-radius-sm );
	color: var( --clvr-bw-text );
	display: inline-flex;
	font-size: 15px;
	font-weight: 600;
	min-height: 44px;
	padding: 0 20px;
	text-decoration: none;
}

.clvr-bw__back-link:hover {
	background: var( --clvr-bw-surface-2 );
	border-color: var( --clvr-bw-accent );
	color: var( --clvr-bw-navy );
}

/* The one commercial sentence a record carries, and it is typeset as a sentence. Muted, at body
   size, under the navigation rather than beside it — a record is an intelligence document and the
   moment this reads as a call to action it is doing the wrong job. */
.clvr-bw__bridge {
	color: var( --clvr-bw-muted );
	font-size: 15px;
	margin: 16px 0 0;
	max-width: var( --clvr-bw-measure );
}

.clvr-bw__bridge a {
	color: var( --clvr-bw-accent-ink );
	text-decoration: underline;
}

.clvr-bw__bridge a:hover,
.clvr-bw__bridge a:focus-visible {
	color: var( --clvr-bw-navy );
}

/* --------------------------------------------------------------- responsive -- */

@media ( max-width: 1080px ) {

	.clvr-bw__layout {
		gap: 24px;
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 280px );
	}

	.clvr-bw__hero-grid {
		gap: 32px;
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	}

}

@media ( max-width: 820px ) {

	/* The supporting column stops being a column. It keeps its panels and moves above the factual
	   sections, because record type, incident type and verification level are the context a reader
	   needs before the detail rather than after it. */
	.clvr-bw__layout {
		grid-template-columns: minmax( 0, 1fr );
	}

	.clvr-bw__sidebar {
		grid-row: 1;
		grid-template-columns: minmax( 0, 1fr );
		position: static;
	}

	.clvr-bw__grid-2,
	.clvr-bw__list,
	.clvr-bw__hero-grid {
		grid-template-columns: minmax( 0, 1fr );
	}

	.clvr-bw__hero-grid {
		gap: 24px;
	}

	.clvr-bw__hero {
		padding: 36px 0 32px;
	}

	.clvr-bw__commentary {
		padding: 36px 0;
	}
}

@media ( max-width: 640px ) {

	.clvr-bw {
		--clvr-bw-pad: 18px;
	}

	.clvr-bw__facts {
		grid-template-columns: minmax( 0, 1fr );
	}

	.clvr-bw__facts dt {
		font-size: 0.8125rem;
		padding-bottom: 0;
	}

	.clvr-bw__facts dd {
		border-top: 0;
		font-weight: 600;
		padding-top: 2px;
	}

	.clvr-bw__hero-summary,
	.clvr-bw__commentary-inner {
		padding: 20px 18px;
	}

	.clvr-bw__source,
	.clvr-bw__panel,
	.clvr-bw__card {
		padding: 18px 16px;
	}

	.clvr-bw__source-meta {
		gap: 2px 0;
		flex-direction: column;
	}
}

/* -------------------------------------------------------------------- print -- */

@media print {

	.clvr-bw__header-nav,
	.clvr-bw__skip-link,
	.clvr-bw__record-nav {
		display: none;
	}

	.clvr-bw__layout {
		grid-template-columns: minmax( 0, 1fr );
	}

	.clvr-bw__hero,
	.clvr-bw__commentary {
		background: transparent;
	}

	.clvr-bw__panel,
	.clvr-bw__card,
	.clvr-bw__source,
	.clvr-bw__hero-summary,
	.clvr-bw__commentary-inner {
		box-shadow: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {

	.clvr-bw * {
		animation: none !important;
		transition: none !important;
	}
}