/**
 * Blue Devil Radio Hub
 *
 * Everything is scoped under .bdrh and driven by variables, so the station
 * can restyle it from the theme without touching the plugin.
 */

.bdrh {
	--bdrh-ink: #101420;
	--bdrh-ink-2: #39415a;
	--bdrh-muted: #666f87;
	--bdrh-surface: #ffffff;
	--bdrh-surface-2: #eef0f6;
	--bdrh-rule: #dde1ec;
	--bdrh-accent: #2a4fc7;
	--bdrh-accent-soft: #e3e8fa;
	--bdrh-up: #1f6b4e;
	--bdrh-down: #bf3320;
	--bdrh-fun: #8a5a12;
	--bdrh-fun-soft: #f7eddb;
	--bdrh-band: #eef1f8;
	--bdrh-band-dark: #0d1220;
	--bdrh-content-width: 1140px;
	--bdrh-radius: 6px;
	--bdrh-gap: 18px;
	--bdrh-cols: 3;
	--bdrh-list-max: 760px;
	--bdrh-section-gap: 44px;

	color: var(--bdrh-ink);
	font-size: 16px;
	line-height: 1.5;
	box-sizing: border-box;

	/* Sections were butting into each other with nothing between them. */
	margin: 0 0 var(--bdrh-section-gap);

	/* An in-page anchor was landing past the heading, under the header. */
	scroll-margin-top: var(--bdrh-anchor-offset, 96px);

	/*
	 * Elementor containers are flex, so a widget shrinks to its own content
	 * unless told otherwise. That was making three boxes in one row come out
	 * three different widths depending on the longest track name in each.
	 */
	width: 100%;
	min-width: 0;
}

.bdrh:last-child {
	margin-bottom: 0;
}

.bdrh *,
.bdrh *::before,
.bdrh *::after {
	box-sizing: inherit;
}

.bdrh img {
	max-width: 100%;
	height: auto;
	display: block;
}

/*
 * Any link the plugin does not dress itself was picking up the theme's link
 * colour. :where() keeps this at the weight of .bdrh alone, so it beats the
 * theme's bare "a" rule while every component below still overrides it,
 * including the cards that deliberately inherit their text colour.
 */
.bdrh :where(a) {
	color: var(--bdrh-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.bdrh :where(a):hover,
.bdrh :where(a):focus-visible {
	color: var(--bdrh-accent);
	background-color: transparent;
}

.bdrh-title {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 20px;
	font-size: clamp(1.3rem, 2.2vw, 1.75rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: inherit;
}

/* A rule running out from the heading separates one row from the next. */
.bdrh-title::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--bdrh-rule);
}

.bdrh-chart__head .bdrh-title::after,
.bdrh-now .bdrh-title::after {
	display: none;
}

.bdrh-eyebrow {
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bdrh-muted);
	display: flex;
	align-items: center;
	gap: 7px;
}

.bdrh-empty,
.bdrh-note {
	margin: 0;
	padding: 14px 16px;
	background: var(--bdrh-surface-2);
	border-radius: var(--bdrh-radius);
	color: var(--bdrh-ink-2);
	font-size: 15px;
}

.bdrh-note {
	margin-bottom: 12px;
	padding: 9px 13px;
	font-size: 13.5px;
}

.bdrh-chart--compact .bdrh-note {
	margin-bottom: 10px;
	padding: 0;
	background: none;
	font-size: 12.5px;
	color: var(--bdrh-muted);
}

/* Three boxes side by side should start their lists at the same height. */
.bdrh-chart--compact .bdrh-chart__head {
	margin-bottom: 10px;
	padding-bottom: 10px;
	min-height: 44px;
	align-items: center;
}

.bdrh-chart--compact .bdrh-title {
	margin: 0;
}

/* Every box gets one explainer line's worth of space, filled or not. */
.bdrh-chart--compact .bdrh-sub {
	margin: 0 0 12px;
	min-height: 20px;
	font-size: 13.5px;
}

/* Artwork ---------------------------------------------------------------- */

.bdrh-art {
	width: 48px;
	height: 48px;
	border-radius: 3px;
	object-fit: cover;
	background: var(--bdrh-surface-2);
	flex: 0 0 auto;
}

.bdrh-art--lg {
	width: 132px;
	height: 132px;
	border-radius: var(--bdrh-radius);
}

.bdrh-art--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	color: var(--bdrh-muted);
	background: var(--bdrh-surface-2);
	font-size: 18px;
}

.bdrh-art--lg.bdrh-art--empty {
	font-size: 46px;
}

/* Now playing ------------------------------------------------------------ */

.bdrh-now__inner {
	position: relative;
	width: 100%;
}

.bdrh-now__card {
	display: flex;
	gap: var(--bdrh-gap);
	align-items: flex-start;
	padding: 18px;
	background: var(--bdrh-surface);
	border: 1px solid var(--bdrh-rule);
	border-radius: var(--bdrh-radius);
}

.bdrh-now__art {
	flex: 0 0 auto;
}

.bdrh-now__meta {
	min-width: 0;
	flex: 1 1 auto;
}

.bdrh-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--bdrh-down);
	flex: 0 0 auto;
}

.bdrh-now__track {
	margin: 0;
	font-size: 1.3em;
	font-weight: 700;
	line-height: 1.25;
	overflow-wrap: break-word;
}

.bdrh-now__artist {
	margin: 4px 0 0;
	font-size: 1.02em;
	color: var(--bdrh-ink-2);
	overflow-wrap: break-word;
}

.bdrh-now__artist:empty {
	display: none;
}

.bdrh-play {
	margin-top: 14px;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 18px 9px 14px;
	border: 0;
	border-radius: 999px;
	background: var(--bdrh-accent);
	color: #fff;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	line-height: 1;
}

.bdrh .bdrh-play {
	background-color: var(--bdrh-accent);
	color: #ffffff;
}

.bdrh .bdrh-play:hover,
.bdrh .bdrh-play:focus-visible,
.bdrh .bdrh-play:active {
	background-color: var(--bdrh-accent);
	color: #ffffff;
	opacity: 0.88;
}

.bdrh-play:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.bdrh-play__icon {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 0 6px 10px;
	border-color: transparent transparent transparent currentColor;
}

.bdrh-play[aria-pressed="true"] .bdrh-play__icon {
	width: 10px;
	height: 12px;
	border: 0;
	background: currentColor;
	-webkit-clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0);
	clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0);
}

.bdrh-play.is-loading {
	opacity: 0.7;
	cursor: progress;
}

.bdrh-recent--nested {
	margin-top: var(--bdrh-gap);
}

/* Hero ------------------------------------------------------------------- */

/*
 * The cover art of whatever is on becomes the backdrop, so the top of the
 * page repaints itself every three minutes on its own. The hero carries its
 * own dark palette so it reads correctly over any artwork.
 */
.bdrh-now--hero {
	--bdrh-ink: #ffffff;
	--bdrh-ink-2: rgba(255, 255, 255, 0.86);
	--bdrh-muted: rgba(255, 255, 255, 0.66);
	--bdrh-surface: rgba(255, 255, 255, 0.10);
	--bdrh-surface-2: rgba(255, 255, 255, 0.16);
	--bdrh-rule: rgba(255, 255, 255, 0.20);
	--bdrh-accent: #ffffff;

	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: 300px;
	padding: clamp(28px, 4.5vw, 60px);
	border-radius: var(--bdrh-radius);
	background: #0d1220;
}

.bdrh-hero__bg {
	position: absolute;
	inset: -12%;
	z-index: 0;
	background-size: cover;
	background-position: center;
	filter: blur(34px) saturate(1.6) brightness(1.15);
	transform: scale(1.18);
	opacity: 0.78;
}

.bdrh-hero__veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(100deg, rgba(8, 12, 24, 0.86) 0%, rgba(8, 12, 24, 0.62) 52%, rgba(8, 12, 24, 0.34) 100%);
}

.bdrh-now--hero .bdrh-now__inner {
	z-index: 2;
	max-width: 1080px;
	margin: 0 auto;
}

.bdrh-now--hero .bdrh-now__card {
	background: transparent;
	border: 0;
	padding: 0;
	align-items: center;
}

.bdrh-now--hero .bdrh-art--lg {
	width: clamp(128px, 16vw, 200px);
	height: clamp(128px, 16vw, 200px);
	border-radius: 8px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.bdrh-now--hero .bdrh-now__track {
	font-size: clamp(1.7em, 3.8vw, 2.9em);
	line-height: 1.1;
	letter-spacing: -0.015em;
}

.bdrh-now--hero .bdrh-now__artist {
	font-size: 1.1em;
}

.bdrh-now--hero .bdrh-play {
	background: #ffffff;
	color: #16305f;
}

.bdrh-hero__station {
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bdrh-ink-2);
}

.bdrh-hero__tagline {
	margin: 0 0 26px;
	font-size: 1.02em;
	color: var(--bdrh-muted);
	max-width: 52ch;
}

.bdrh-now--hero .bdrh-list {
	background: rgba(255, 255, 255, 0.07);
	border-color: rgba(255, 255, 255, 0.16);
}

/* Podcasts --------------------------------------------------------------- */

.bdrh-pods__grid {
	display: grid;
	grid-template-columns: repeat(var(--bdrh-cols), minmax(0, 1fr));
	gap: var(--bdrh-gap);
}

.bdrh-pod__link {
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-decoration: none;
	color: inherit;
}

.bdrh-pod__link:focus-visible {
	outline: 2px solid var(--bdrh-accent);
	outline-offset: 4px;
	border-radius: 2px;
}

.bdrh-pod__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	overflow: hidden;
	background: var(--bdrh-surface-2);
}

.bdrh-pod__art {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bdrh-pod__art.bdrh-art--empty {
	font-size: 46px;
}

.bdrh-pod__link:hover .bdrh-pod__show,
.bdrh-pod__link:focus-visible .bdrh-pod__show {
	color: var(--bdrh-accent);
}

.bdrh-pod__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.bdrh-pod__show {
	font-weight: 700;
	font-size: 1.02em;
	line-height: 1.3;
}

.bdrh-pod__title {
	font-size: 0.9em;
	line-height: 1.4;
	color: var(--bdrh-ink-2);
	max-height: calc(0.9em * 1.4 * 2);
	overflow: hidden;
}

.bdrh-pod__date {
	font-size: 0.78em;
	color: var(--bdrh-muted);
}

/* Lists ------------------------------------------------------------------ */

.bdrh-list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: var(--bdrh-list-max);
	border: 1px solid var(--bdrh-rule);
	border-radius: var(--bdrh-radius);
	background: var(--bdrh-surface);
	overflow: hidden;
}

.bdrh-list__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--bdrh-rule);
}

.bdrh-list__row:last-child {
	border-bottom: 0;
}

.bdrh-list__art {
	display: block;
	flex: 0 0 auto;
}

.bdrh-list__text {
	min-width: 0;
	flex: 1 1 auto;
	display: block;
}

.bdrh-list__track {
	display: block;
	font-weight: 600;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bdrh-list__artist {
	display: block;
	font-size: 0.9em;
	color: var(--bdrh-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bdrh-list__time {
	flex: 0 0 auto;
	font-size: 0.82em;
	font-variant-numeric: tabular-nums;
	color: var(--bdrh-muted);
	white-space: nowrap;
}

.bdrh-list__time--lead {
	width: 74px;
	font-weight: 600;
	color: var(--bdrh-ink-2);
}

/* Chart ------------------------------------------------------------------ */

.bdrh-chart__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	max-width: var(--bdrh-list-max);
	margin-bottom: 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--bdrh-rule);
}

.bdrh-chart__head .bdrh-title {
	margin: 0;
}

.bdrh-chart__head .bdrh-eyebrow {
	margin: 0;
}

.bdrh-chart__list,
.bdrh-artists__list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: var(--bdrh-list-max);
	counter-reset: none;
	border: 1px solid var(--bdrh-rule);
	border-radius: var(--bdrh-radius);
	background: var(--bdrh-surface);
	overflow: hidden;
}

.bdrh-chart__row,
.bdrh-artists__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--bdrh-rule);
}

.bdrh-chart__row:last-child,
.bdrh-artists__row:last-child {
	border-bottom: 0;
}

.bdrh-chart__rank {
	flex: 0 0 auto;
	width: 26px;
	text-align: right;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--bdrh-muted);
}

.bdrh-chart__art {
	display: block;
	flex: 0 0 auto;
}

.bdrh-chart__text {
	min-width: 0;
	flex: 1 1 auto;
	display: block;
}

.bdrh-chart__track {
	display: block;
	font-weight: 600;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bdrh-chart__artist {
	display: block;
	font-size: 0.9em;
	color: var(--bdrh-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bdrh-chart__plays {
	flex: 0 0 auto;
	min-width: 30px;
	text-align: right;
	font-size: 0.85em;
	font-variant-numeric: tabular-nums;
	color: var(--bdrh-muted);
}

.bdrh-move {
	flex: 0 0 auto;
	min-width: 48px;
	text-align: right;
	font-size: 0.78em;
	font-weight: 700;
	letter-spacing: 0.03em;
	font-variant-numeric: tabular-nums;
}

.bdrh-move--up {
	color: var(--bdrh-up);
}

.bdrh-move--down {
	color: var(--bdrh-down);
}

.bdrh-move--new {
	color: var(--bdrh-accent);
	text-transform: uppercase;
}

.bdrh-move--flat {
	color: var(--bdrh-muted);
}

.bdrh-artists__text {
	flex: 1 1 auto;
	min-width: 0;
	display: block;
}

.bdrh-artists__name {
	display: block;
	font-weight: 600;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bdrh-artists__row .bdrh-chart__art {
	display: block;
	flex: 0 0 auto;
}

.bdrh-artists__count {
	display: block;
	font-size: 0.9em;
	line-height: 1.3;
	color: var(--bdrh-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Rewind ----------------------------------------------------------------- */

.bdrh-rewind__form {
	display: flex;
	align-items: flex-end;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: var(--bdrh-gap);
}

.bdrh-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.bdrh-field__label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bdrh-muted);
}

.bdrh-field input,
.bdrh-field select {
	font: inherit;
	font-size: 15px;
	padding: 8px 10px;
	border: 1px solid var(--bdrh-rule);
	border-radius: var(--bdrh-radius);
	background: var(--bdrh-surface);
	color: var(--bdrh-ink);
	min-height: 40px;
}

.bdrh-button {
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	padding: 8px 18px;
	min-height: 40px;
	border: 0;
	border-radius: var(--bdrh-radius);
	background: var(--bdrh-accent);
	color: #fff;
	cursor: pointer;
}

.bdrh-button:hover,
.bdrh-button:focus-visible {
	filter: brightness(1.08);
}

.bdrh-button:focus-visible,
.bdrh-field input:focus-visible,
.bdrh-field select:focus-visible {
	outline: 2px solid var(--bdrh-accent);
	outline-offset: 2px;
}

/* News ------------------------------------------------------------------- */

.bdrh-news__grid {
	display: grid;
	grid-template-columns: repeat(var(--bdrh-cols), minmax(0, 1fr));
	gap: var(--bdrh-gap);
}

/* One or two stories beside an artist should not be stretched tall. */
.bdrh-artist__block .bdrh-news__grid {
	align-items: start;
}

.bdrh-artist__block .bdrh-card__time {
	margin-top: 6px;
}

/*
 * A wall of borrowed headlines all looks the same at a glance, which is what
 * made this page feel flat. Two things fix it without turning it into a
 * fairground: a rule along the top in the source's own colour, and a card
 * that answers the pointer.
 *
 * The colour comes from the same per-source hue the pictureless cards
 * already use for their gradient, so a source looks like itself whether or
 * not the story came with an image.
 */
.bdrh-card {
	position: relative;
	background: var(--bdrh-surface);
	border: 1px solid var(--bdrh-rule);
	border-radius: var(--bdrh-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.bdrh-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	z-index: 2;
	background: hsl(var(--bdrh-hue, 220) 58% 48%);
}

.bdrh-card:hover {
	transform: translateY(-3px);
	border-color: hsl(var(--bdrh-hue, 220) 58% 48%);
	box-shadow: 0 10px 24px rgba(16, 20, 32, 0.13);
}

.bdrh-card:hover .bdrh-card__media img {
	transform: scale(1.045);
}

@media (prefers-reduced-motion: reduce) {
	.bdrh-card,
	.bdrh-card__media img {
		transition: none;
	}

	.bdrh-card:hover {
		transform: none;
	}
}

.bdrh-card__link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
	text-decoration: none;
	color: inherit;
}

/* Sits below the card's own link, never inside it. */
.bdrh-card > .bdrh-rot {
	margin: 0 15px 14px;
}

.bdrh-card__link:hover .bdrh-card__title,
.bdrh-card__link:focus-visible .bdrh-card__title {
	color: var(--bdrh-accent);
}

/* A denser card, for pages that are wall to wall with them. */
.bdrh-news--small .bdrh-card__media {
	aspect-ratio: 16 / 10;
}

.bdrh-news--small .bdrh-card__body {
	gap: 6px;
	padding: 12px 13px 13px;
}

.bdrh-news--small .bdrh-card__title {
	font-size: 0.95em;
	line-height: 1.3;
}

/*
 * Capped by height rather than -webkit-line-clamp. A -webkit-box inside a
 * flex column resolves its height late, which left a gap under the title
 * until a repaint, and hovering the card was triggering that repaint.
 */
.bdrh-news--small .bdrh-card__excerpt {
	font-size: 0.84em;
	line-height: 1.42;
	max-height: calc(0.84em * 1.42 * 3);
	overflow: hidden;

	/* Cut off mid-word reads as broken. Faded, it reads as trimmed. */
	-webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}

.bdrh-news--small .bdrh-card__source {
	font-size: 9.5px;
	padding: 2px 6px;
}

.bdrh-news--small .bdrh-card__time {
	font-size: 0.72em;
}

.bdrh-news--small .bdrh-rot {
	font-size: 10px;
	padding: 2px 8px 2px 6px;
}

.bdrh-news--small .bdrh-card > .bdrh-rot,
.bdrh-news--small .bdrh-card .bdrh-rot {
	margin: 0 13px 12px;
}

/* The lead story stays larger, but not by as much. */
.bdrh-news--small.bdrh-news--lead .bdrh-card--lead .bdrh-card__title {
	font-size: 1.2em;
}

/* Marks a wire story as being about somebody the station actually plays. */
.bdrh-rot {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	padding: 3px 9px 3px 7px;
	border-radius: 999px;
	background: var(--bdrh-accent-soft);
	color: var(--bdrh-accent);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
}

.bdrh-rot .bdrh-dot {
	width: 6px;
	height: 6px;
	background: currentColor;
}

.bdrh-rot__note {
	font-weight: 600;
	opacity: 0.72;
}

.bdrh .bdrh-rot--link:hover,
.bdrh .bdrh-rot--link:focus-visible {
	background-color: var(--bdrh-accent);
	color: #ffffff;
}

.bdrh-card__source--local {
	background: var(--bdrh-surface-2);
	color: var(--bdrh-ink-2);
}

.bdrh-card__title {
	color: var(--bdrh-accent);
}

.bdrh-card__link:focus-visible {
	outline: 2px solid var(--bdrh-accent);
	outline-offset: -2px;
}

/*
 * The aspect-ratio box owns the height on its own and the picture is taken
 * out of flow inside it. Left in flow, height:100% resolved against a parent
 * that had not settled yet, so the card was mis-measured until something
 * forced a repaint, which is what hovering was doing.
 */
.bdrh-card__media {
	display: block;
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--bdrh-surface-2);
	overflow: hidden;
}

.bdrh-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 28%;
	transition: transform 0.45s ease;
}

/*
 * Some feeds ship stories with no picture. An empty slot looked broken next
 * to the ones that had art, so the outlet gets a plate of its own instead.
 */
.bdrh-card__media--none {
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		linear-gradient(140deg,
			hsl(var(--bdrh-hue, 220) 38% 30%) 0%,
			hsl(var(--bdrh-hue, 220) 44% 16%) 100%);
}

.bdrh-card__glyph {
	padding: 0 18px;
	font-size: clamp(13px, 1.6vw, 18px);
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.3;
	text-align: center;
	color: rgba(255, 255, 255, 0.92);
}

.bdrh-card__body {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 14px 15px 15px;
	flex: 1 1 auto;
}

.bdrh-card__source {
	display: inline-block;
	align-self: flex-start;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 3px 7px;
	border-radius: 2px;
	background: var(--bdrh-surface-2);
	color: var(--bdrh-muted);
}

.bdrh-card__source--ltu {
	background: var(--bdrh-accent-soft);
	color: var(--bdrh-accent);
}

.bdrh-card__source--fun {
	background: var(--bdrh-fun-soft);
	color: var(--bdrh-fun);
}

/* One big story leading a row of smaller ones. */
.bdrh-news--lead .bdrh-card--lead {
	grid-column: span 2;
	grid-row: span 2;
}

.bdrh-news--lead .bdrh-card--lead .bdrh-card__title {
	font-size: 1.45em;
	line-height: 1.22;
}

.bdrh-news--lead .bdrh-card--lead .bdrh-card__excerpt {
	font-size: 0.95em;
}

.bdrh-news--lead .bdrh-card--lead .bdrh-card__media {
	aspect-ratio: 16 / 10;
}

.bdrh-card__title {
	display: block;
	font-weight: 700;
	font-size: 1.02em;
	line-height: 1.32;
}

.bdrh-card__excerpt {
	display: block;
	font-size: 0.9em;
	line-height: 1.45;
	color: var(--bdrh-ink-2);
}

.bdrh-card__time {
	display: block;
	margin-top: auto;
	padding-top: 4px;
	font-size: 0.78em;
	color: var(--bdrh-muted);
}


/* Marquee ---------------------------------------------------------------- */

/*
 * The masthead. Its backdrop is a wall of covers the station has actually
 * been playing, so it is built from the rotation rather than stock photos,
 * and it looks different next week.
 */
.bdrh-marquee {
	--bdrh-ink: #ffffff;
	--bdrh-ink-2: rgba(255, 255, 255, 0.88);
	--bdrh-muted: rgba(255, 255, 255, 0.62);
	--bdrh-accent: #ffffff;

	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: center;
	padding: clamp(32px, 5vw, 76px) clamp(24px, 4vw, 64px);
	border-radius: var(--bdrh-radius);
	background: #070b16;
}

.bdrh-marquee--tall {
	min-height: 460px;
}

.bdrh-marquee--short {
	min-height: 300px;
}

.bdrh-marquee__tiles {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	grid-auto-rows: minmax(0, 1fr);
	filter: saturate(1.15);
}

.bdrh-marquee__tiles span {
	display: block;
	background-size: cover;
	background-position: center;
}

.bdrh-marquee__veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(90deg, rgba(5, 9, 20, 0.97) 0%, rgba(5, 9, 20, 0.88) 40%, rgba(5, 9, 20, 0.52) 100%),
		linear-gradient(180deg, rgba(5, 9, 20, 0.30) 0%, rgba(5, 9, 20, 0.72) 100%);
}

/* Dark on the right, artwork showing through on the left. */
.bdrh-marquee--veil-right .bdrh-marquee__veil {
	background:
		linear-gradient(270deg, rgba(5, 9, 20, 0.97) 0%, rgba(5, 9, 20, 0.88) 40%, rgba(5, 9, 20, 0.52) 100%),
		linear-gradient(180deg, rgba(5, 9, 20, 0.30) 0%, rgba(5, 9, 20, 0.72) 100%);
}

.bdrh-marquee__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
}

.bdrh-marquee__eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 18px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.78);
}

/* A short rule ahead of the station line, the way a slate carries one. */
.bdrh-marquee__eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 26px;
	height: 2px;
	background: var(--bdrh-marquee-accent, #7d9dff);
	border-radius: 2px;
}

.bdrh-marquee__name {
	margin: 0 0 16px;
	font-size: clamp(2.4rem, 6.4vw, 4.8rem);
	font-weight: 900;
	line-height: 0.95;
	letter-spacing: -0.035em;
	text-wrap: balance;

	/* White reads flat over artwork. A cool fall-off gives it some form. */
	color: #ffffff;
	text-shadow: 0 6px 38px rgba(0, 0, 0, 0.68);
}

/* Optional. Solid white is crisper over artwork; this is here if wanted. */
.bdrh-marquee__name--gradient {
	background: linear-gradient(178deg, #ffffff 40%, #cdd8f2 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: none;
	filter: drop-shadow(0 6px 34px rgba(0, 0, 0, 0.62));
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
	.bdrh-marquee__name--gradient {
		-webkit-text-fill-color: #ffffff;
	}
}

.bdrh-marquee__logo {
	margin: 0 0 18px;
}

.bdrh-marquee__logo img {
	max-width: 100%;
	height: auto;
	filter: drop-shadow(0 8px 30px rgba(0, 0, 0, 0.55));
}

.bdrh-marquee__tagline {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin: -2px 0 32px;
	font-size: clamp(1.12rem, 1.7vw, 1.5rem);
	font-weight: 300;
	line-height: 1.35;
	letter-spacing: 0.005em;
	color: rgba(255, 255, 255, 0.94);
	max-width: 44ch;
}

/* A slogan, not a caption. */
.bdrh-marquee__tagline--accent {
	color: var(--bdrh-marquee-accent, #7d9dff);
	font-weight: 400;
}

.bdrh-marquee__tagline--rule::before {
	content: "";
	flex: 0 0 auto;
	width: 26px;
	height: 2px;
	margin-top: 0.55em;
	background: var(--bdrh-marquee-accent, #7d9dff);
	border-radius: 2px;
}

.bdrh-marquee__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.bdrh .bdrh-play--lg {
	margin-top: 0;
	font-size: 17px;
	padding: 14px 28px 14px 22px;
	background-color: #ffffff;
	color: #12305f;
	opacity: 1;
}

.bdrh .bdrh-play--lg:hover,
.bdrh .bdrh-play--lg:focus-visible,
.bdrh .bdrh-play--lg:active {
	background-color: #e6ecfb;
	color: #12305f;
	opacity: 1;
}

/* Playing is a real state, not the same button with a different word. */
.bdrh .bdrh-play--lg[aria-pressed="true"] {
	background-color: #1a52c4;
	color: #ffffff;
}

.bdrh .bdrh-play--lg[aria-pressed="true"]:hover,
.bdrh .bdrh-play--lg[aria-pressed="true"]:focus-visible {
	background-color: #14429f;
	color: #ffffff;
}

.bdrh-ghost {
	display: inline-flex;
	align-items: center;
	padding: 13px 26px;
	border: 1px solid rgba(255, 255, 255, 0.38);
	border-radius: 999px;
	color: #ffffff;
	text-decoration: none;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
}

.bdrh-ghost:hover,
.bdrh-ghost:focus-visible {
	background: rgba(255, 255, 255, 0.14);
	color: #ffffff;
}

.bdrh-marquee__now {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 30px 0 0;
	font-size: 15px;
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
}

/* The lamp and its label are one unit, so they centre together. */
.bdrh-marquee__lamp {
	display: inline-flex;
	align-items: center;
	gap: 9px;
}

/*
 * Under the cover it is a caption, not a footnote. The lamp sits beside its
 * label, and the track and artist stack underneath.
 */
.bdrh-marquee__artcol .bdrh-marquee__now {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	margin: 0;
	max-width: 100%;
}

.bdrh-marquee__artcol .bdrh-marquee__nowtrack {
	margin-top: 2px;
	font-size: 1.15em;
	line-height: 1.25;
}

.bdrh-marquee__artcol .bdrh-marquee__nowartist {
	line-height: 1.3;
}

/* On its own line it does not need a separator in front of it. */
.bdrh-marquee__artcol .bdrh-marquee__nowartist:not(:empty)::before {
	content: none;
}

/* An on-air lamp should breathe the way one in a studio does. */
@keyframes bdrh-onair {
	0%,
	100% {
		opacity: 1;
		box-shadow: 0 0 0 4px rgba(224, 62, 45, 0.22);
	}
	50% {
		opacity: 0.45;
		box-shadow: 0 0 0 7px rgba(224, 62, 45, 0.06);
	}
}

.bdrh-marquee .bdrh-dot {
	animation: bdrh-onair 2.6s ease-in-out infinite;
}

.bdrh-marquee__label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bdrh-muted);
}

.bdrh-marquee__nowtrack {
	font-weight: 700;
}

.bdrh-marquee__nowartist {
	color: var(--bdrh-ink-2);
}

.bdrh-marquee__nowartist:not(:empty)::before {
	content: "/ ";
	color: var(--bdrh-muted);
}

/* Section extras --------------------------------------------------------- */

.bdrh-sub {
	margin: -4px 0 16px;
	max-width: 62ch;
	font-size: 15px;
	color: var(--bdrh-muted);
}

.bdrh-cta {
	margin: 20px 0 0;
}

.bdrh-cta__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bdrh-accent);
	text-decoration: none;
}

.bdrh-cta__link:hover,
.bdrh-cta__link:focus-visible {
	text-decoration: underline;
}

/* Compact, for three boxes side by side. */
.bdrh-chart--compact {
	--bdrh-list-max: none;

	/* Fill the column so three boxes side by side end at the same line. */
	display: flex;
	flex-direction: column;
	height: 100%;
}

.bdrh-chart--compact .bdrh-list,
.bdrh-chart--compact .bdrh-chart__list,
.bdrh-chart--compact .bdrh-artists__list {
	flex: 1 1 auto;
}

.bdrh-chart--compact .bdrh-title {
	font-size: 1.15rem;
}

/*
 * All three boxes carry the same row: art, two lines of text, optional tail.
 * Locking the height here is what makes ten rows in one box end level with
 * ten rows in the next.
 */
.bdrh-chart--compact .bdrh-chart__row,
.bdrh-chart--compact .bdrh-artists__row,
.bdrh-chart--compact .bdrh-list__row {
	padding: 9px 12px;
	gap: 10px;
	min-height: 58px;
	box-sizing: border-box;
}

.bdrh-chart--compact .bdrh-art {
	width: 36px;
	height: 36px;
}

.bdrh-chart--compact .bdrh-chart__plays {
	display: none;
}

.bdrh-chart--compact .bdrh-move {
	min-width: 38px;
	font-size: 0.72em;
}

/* Rewind, wide ----------------------------------------------------------- */

.bdrh-rewind--grid .bdrh-list {
	max-width: none;
	display: grid;
	grid-template-columns: repeat(var(--bdrh-cols, 3), minmax(0, 1fr));
	gap: 1px;
	background: var(--bdrh-rule);
	overflow: visible;
}

.bdrh-rewind--grid .bdrh-list__row {
	border-bottom: 0;
	background: var(--bdrh-surface);
}

.bdrh-rewind--grid .bdrh-rewind__form {
	max-width: none;
}

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

.bdrh-archive__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	padding: 16px;
	margin-bottom: 18px;
	background: var(--bdrh-surface-2);
	border-radius: var(--bdrh-radius);
}

.bdrh-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.bdrh-pill {
	display: inline-block;
	padding: 9px 15px;
	border: 1px solid var(--bdrh-rule);
	border-radius: 999px;
	background: var(--bdrh-surface);
	color: var(--bdrh-ink-2);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.1;
}

.bdrh-pill:hover,
.bdrh-pill:focus-visible {
	border-color: var(--bdrh-accent);
	color: var(--bdrh-accent);
}

.bdrh-pill.is-on {
	background: var(--bdrh-accent);
	border-color: var(--bdrh-accent);
	color: #ffffff;
}

.bdrh-pill__count {
	display: inline-block;
	margin-left: 7px;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--bdrh-surface-2);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	color: var(--bdrh-muted);
}

.bdrh-pill.is-on .bdrh-pill__count {
	background: rgba(255, 255, 255, 0.22);
	color: #ffffff;
}

.bdrh-field--grow {
	flex: 1 1 220px;
}

.bdrh-clear {
	align-self: center;
	font-size: 14px;
	color: var(--bdrh-muted);
}

.bdrh-archive__count {
	margin: 0 0 14px;
	font-size: 14px;
	color: var(--bdrh-muted);
}

.bdrh-pager {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 24px;
}

.bdrh-pager .page-numbers {
	display: inline-block;
	padding: 8px 14px;
	border: 1px solid var(--bdrh-rule);
	border-radius: var(--bdrh-radius);
	color: var(--bdrh-ink-2);
	text-decoration: none;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}

.bdrh-pager .page-numbers.current {
	background: var(--bdrh-accent);
	border-color: var(--bdrh-accent);
	color: #ffffff;
}

.bdrh-pager .page-numbers.dots {
	border-color: transparent;
}


/* Tones ------------------------------------------------------------------ */

/*
 * A page of white cards on a white background has nothing to break it up.
 * Alternate rows with a tinted or dark band.
 */
.bdrh--tint,
.bdrh--dark {
	padding: clamp(26px, 3vw, 46px);
	border-radius: var(--bdrh-radius);
}

.bdrh--tint {
	background: var(--bdrh-band);
}

.bdrh--dark {
	--bdrh-ink: #ffffff;
	--bdrh-ink-2: rgba(255, 255, 255, 0.86);
	--bdrh-muted: rgba(255, 255, 255, 0.62);
	--bdrh-surface: rgba(255, 255, 255, 0.06);
	--bdrh-surface-2: rgba(255, 255, 255, 0.13);
	--bdrh-rule: rgba(255, 255, 255, 0.17);
	--bdrh-accent: #9db4ff;
	--bdrh-accent-soft: rgba(157, 180, 255, 0.18);
	--bdrh-fun: #f0c987;
	--bdrh-fun-soft: rgba(240, 201, 135, 0.18);
	--bdrh-up: #6fd3a6;
	--bdrh-down: #ff8a72;

	background: var(--bdrh-band-dark);
	color: var(--bdrh-ink);
}

/*
 * A darker band for the time lookup. The marquee is a wall of covers; this
 * is a strip of tape, which suits a tool for scrubbing back through the day.
 */
.bdrh--deep {
	--bdrh-ink: #ffffff;
	--bdrh-ink-2: rgba(255, 255, 255, 0.86);
	--bdrh-muted: rgba(255, 255, 255, 0.58);
	--bdrh-surface: rgba(255, 255, 255, 0.055);
	--bdrh-surface-2: rgba(255, 255, 255, 0.12);
	--bdrh-rule: rgba(255, 255, 255, 0.14);
	--bdrh-accent: #8fb0ff;
	--bdrh-accent-soft: rgba(143, 176, 255, 0.18);

	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(28px, 3.4vw, 52px);
	border-radius: var(--bdrh-radius);
	color: var(--bdrh-ink);
	background:
		radial-gradient(120% 90% at 12% 0%, #1b2a52 0%, rgba(27, 42, 82, 0) 62%),
		linear-gradient(165deg, #101932 0%, #080c18 100%);
}

/* Timecode ticks along the top edge, like a scrubber. */
.bdrh--deep::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 26px;
	z-index: 0;
	pointer-events: none;
	background-image:
		repeating-linear-gradient(90deg,
			rgba(255, 255, 255, 0.30) 0 1px,
			rgba(255, 255, 255, 0) 1px 14px),
		repeating-linear-gradient(90deg,
			rgba(255, 255, 255, 0.55) 0 1.5px,
			rgba(255, 255, 255, 0) 1.5px 70px);
	background-size: 100% 9px, 100% 17px;
	background-position: 0 0, 0 0;
	background-repeat: repeat-x;
	opacity: 0.55;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

/* A slow sweep, the way a needle crosses a dial. */
.bdrh--deep::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(60% 120% at 88% 110%, rgba(143, 176, 255, 0.16) 0%, rgba(143, 176, 255, 0) 70%);
}

.bdrh--deep > * {
	position: relative;
	z-index: 1;
}

.bdrh--deep .bdrh-field input,
.bdrh--deep .bdrh-field select {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.2);
	color: #ffffff;
}

.bdrh--deep .bdrh-button {
	background: #ffffff;
	color: #12305f;
}

/* Marquee cover ---------------------------------------------------------- */

.bdrh-marquee__inner {
	display: flex;
	align-items: center;
	gap: clamp(24px, 4vw, 56px);
}

/* Cover on the left, words to the right of it. */
.bdrh-marquee__inner--art-left {
	flex-direction: row-reverse;
}

.bdrh-marquee__artcol {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
}

.bdrh-marquee__artcol--center {
	align-items: center;
}

.bdrh-marquee__artcol--center .bdrh-marquee__now {
	align-items: center;
	text-align: center;
}

/* The words needed more weight over a busy wall of covers. */
.bdrh-marquee__text {
	position: relative;
	text-shadow: 0 2px 26px rgba(0, 0, 0, 0.55);
}

.bdrh-marquee__text::before {
	content: "";
	position: absolute;
	inset: -12% -14%;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(70% 90% at 30% 50%, rgba(4, 7, 16, 0.82) 0%, rgba(4, 7, 16, 0.45) 55%, rgba(4, 7, 16, 0) 100%);
}

.bdrh-marquee__text {
	flex: 1 1 auto;
	min-width: 0;
}

.bdrh-marquee__cover {
	flex: 0 0 auto;
	position: relative;
	display: block;
	width: clamp(150px, 18vw, 250px);
	aspect-ratio: 1 / 1;
}

/*
 * The mosaic behind the cover is busy, so the sleeve needs its own pool of
 * dark to sit in or it reads as one more tile.
 */
.bdrh-marquee__cover::before {
	content: "";
	position: absolute;
	inset: -55% -60%;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(closest-side, rgba(4, 7, 16, 0.92) 0%, rgba(4, 7, 16, 0.55) 55%, rgba(4, 7, 16, 0) 100%);
}

/* A record sliding out of the sleeve. */
.bdrh-marquee__vinyl {
	position: absolute;
	top: 50%;
	right: -16%;
	transform: translateY(-50%);
	width: 88%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	z-index: 1;
	background:
		radial-gradient(circle at 50% 50%, #d8dbe4 0 5%, #14141a 5.5% 15%, rgba(0, 0, 0, 0) 15.5%),
		repeating-radial-gradient(circle at 50% 50%, #1b1b22 0 2px, #101014 2px 4px),
		#131318;
	box-shadow:
		0 20px 44px rgba(0, 0, 0, 0.6),
		inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.bdrh-marquee__sleeve {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
}

.bdrh-marquee__cover .bdrh-art--lg {
	width: 100%;
	height: 100%;
	border-radius: 10px;
	object-fit: cover;
	box-shadow:
		0 34px 70px rgba(0, 0, 0, 0.68),
		0 0 0 1px rgba(255, 255, 255, 0.16),
		0 0 70px rgba(255, 255, 255, 0.07);
}

/* The record turns while the stream is actually playing. */
@keyframes bdrh-spin {
	from {
		transform: translateY(-50%) rotate(0deg);
	}
	to {
		transform: translateY(-50%) rotate(360deg);
	}
}

.bdrh-now.is-playing .bdrh-marquee__vinyl {
	animation: bdrh-spin 3.4s linear infinite;
}

.bdrh-marquee__cover .bdrh-art--empty {
	background: linear-gradient(150deg, #21283c, #12172a);
	color: rgba(255, 255, 255, 0.42);
	font-size: clamp(48px, 7vw, 84px);
}

/*
 * The station's own image standing in for missing cover art. It is a logo,
 * not a cover, so it is fitted inside the tile rather than cropped to fill
 * it, and it sits on the tint so a transparent PNG still reads as a tile.
 */
.bdrh-art--fallback {
	object-fit: contain;
	background: var(--bdrh-surface-2);
	padding: 8%;
}

/* The full calendar ------------------------------------------------------- */

/*
 * Every control is a link carrying query arguments rather than a script, so
 * a month, a filter and a day all have a URL. Somebody pasting "the
 * volleyball page" into a group chat is the whole point.
 *
 * One colour per calendar, declared once and used by the filter pips, the
 * dots in the grid, the edge of every agenda row and the Next up card. That
 * is what makes the dots mean something: the pip sitting inside the filter
 * is the legend, so there is no key to read and nothing to remember.
 */
.bdrh-cal {
	--bdrh-src-library: var(--bdrh-up);
	--bdrh-src-ltu: var(--bdrh-accent);
	--bdrh-src-athletics: var(--bdrh-fun);

	/*
	 * How far down a fixed site header reaches. The sticky month and the
	 * jump-to-a-day anchors both clear it by this much, so a header of a
	 * different height only needs this one number changed:
	 *
	 *   .bdrh-cal { --bdrh-sticky-top: 140px; }
	 */
	--bdrh-sticky-top: 112px;
}

.bdrh-cal__filters {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

/*
 * Written with the wrapper in front on purpose. `.bdrh a:hover` is a class,
 * a pseudo-class and an element, which outranks a two-class selector, so a
 * plain `.bdrh-cal__filter.is-on` lost its background the moment the pointer
 * touched it and left white text on a white page.
 */
.bdrh .bdrh-cal__filter {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 15px;
	border-radius: 999px;
	border: 1px solid var(--bdrh-rule);
	background: var(--bdrh-surface);
	color: var(--bdrh-ink-2);
	font-size: 0.86em;
	font-weight: 700;
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.bdrh .bdrh-cal__filter.is-on {
	background: var(--bdrh-ink);
	border-color: var(--bdrh-ink);
	color: var(--bdrh-surface);
}

/*
 * The pip carries the colour, not the label. Colouring the text as well made
 * three differently coloured words in a row and read like a warning, and the
 * dot is the thing that has to match the grid anyway.
 */
.bdrh-cal__pip {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--bdrh-muted);
	flex: 0 0 auto;
}

.bdrh-cal__pip--library { background: var(--bdrh-src-library); }
.bdrh-cal__pip--ltu { background: var(--bdrh-src-ltu); }
.bdrh-cal__pip--athletics { background: var(--bdrh-src-athletics); }

.bdrh .bdrh-cal__filter:hover,
.bdrh .bdrh-cal__filter:focus-visible {
	border-color: var(--bdrh-accent);
	color: var(--bdrh-accent);
}

/* Next up ----------------------------------------------------------------- */

.bdrh .bdrh-cal__next {
	display: block;
	position: relative;
	overflow: hidden;
	margin-bottom: 22px;
	padding: 20px 24px 22px;
	border-radius: var(--bdrh-radius);
	background: var(--bdrh-band-dark);
	color: #fff;
	text-decoration: none;
	transition: transform 0.2s ease;
}

.bdrh .bdrh-cal__next:hover {
	background: var(--bdrh-band-dark);
	transform: translateY(-2px);
}

/* A band of the calendar's own colour down the edge, so the card says which
   calendar it came from before the badge does. */
.bdrh-cal__next::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 5px;
	background: var(--bdrh-accent);
}

.bdrh-cal__next--library::before { background: var(--bdrh-src-library); }
.bdrh-cal__next--ltu::before { background: var(--bdrh-src-ltu); }
.bdrh-cal__next--athletics::before { background: var(--bdrh-src-athletics); }

.bdrh-cal__nextlabel {
	display: block;
	margin-bottom: 6px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62);
}

.bdrh-cal__nexttitle {
	display: block;
	font-size: clamp(19px, 2.2vw, 26px);
	font-weight: 800;
	line-height: 1.25;
}

.bdrh-cal__nextmeta {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 8px;
	font-size: 0.9em;
	color: rgba(255, 255, 255, 0.78);
}

.bdrh-cal__nextmeta strong {
	color: #fff;
	font-weight: 700;
}

/* The two columns --------------------------------------------------------- */

.bdrh-cal__split {
	display: grid;
	grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
	gap: clamp(20px, 3vw, 40px);
	align-items: start;
}

.bdrh-cal__side {
	position: sticky;
	top: var(--bdrh-sticky-top);
}

.bdrh-cal__months {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}

.bdrh-cal__now {
	margin: 0;
	font-size: 1.18em;
	font-weight: 800;
	text-align: center;
	flex: 1 1 auto;
}

.bdrh .bdrh-cal__step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--bdrh-rule);
	background: var(--bdrh-surface);
	color: var(--bdrh-accent);
	font-size: 15px;
	text-decoration: none;
}

.bdrh .bdrh-cal__step:hover {
	background: var(--bdrh-accent-soft);
	border-color: var(--bdrh-accent);
}

.bdrh-cal__step.is-off {
	opacity: 0.25;
	color: var(--bdrh-muted);
}

.bdrh-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 3px;
}

.bdrh-cal__dow {
	padding: 4px 0 6px;
	text-align: center;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
	color: var(--bdrh-muted);
}

.bdrh-cal__cell {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	aspect-ratio: 1 / 1;
	padding: 5px 2px;
	border-radius: 9px;
	background: var(--bdrh-surface-2);
	text-decoration: none;
	color: inherit;
}

.bdrh-cal__cell--empty {
	background: transparent;
}

.bdrh-cal__cell.is-quiet {
	background: transparent;
}

.bdrh-cal__cell.is-quiet .bdrh-cal__daynum {
	color: var(--bdrh-muted);
	font-weight: 500;
}

/* The whole square is the target, not the number in it. */
.bdrh .bdrh-cal__cell.has-events {
	background: var(--bdrh-surface-2);
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.bdrh .bdrh-cal__cell.has-events:hover,
.bdrh .bdrh-cal__cell.has-events:focus-visible {
	background: var(--bdrh-accent-soft);
	transform: translateY(-1px);
}

.bdrh-cal__cell.is-today {
	outline: 2px solid var(--bdrh-accent);
	outline-offset: -2px;
}

.bdrh-cal__daynum {
	font-size: 0.9em;
	font-weight: 700;
	line-height: 1.3;
	color: var(--bdrh-ink);
}

.bdrh-cal__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	flex-wrap: wrap;
	min-height: 8px;
}

.bdrh-cal__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--bdrh-muted);
}

.bdrh-cal__dot--library { background: var(--bdrh-src-library); }
.bdrh-cal__dot--ltu { background: var(--bdrh-src-ltu); }
.bdrh-cal__dot--athletics { background: var(--bdrh-src-athletics); }

.bdrh-cal__plus {
	font-size: 9px;
	font-weight: 800;
	color: var(--bdrh-muted);
}

.bdrh-cal__hint {
	margin: 12px 0 0;
	font-size: 0.8em;
	text-align: center;
	color: var(--bdrh-muted);
}

/* The agenda -------------------------------------------------------------- */

.bdrh-cal__day {
	margin-bottom: 18px;
	scroll-margin-top: var(--bdrh-sticky-top);
}

.bdrh-cal__date {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 6px;
	padding-bottom: 7px;
	border-bottom: 1px solid var(--bdrh-rule);
}

.bdrh-cal__datenum {
	font-size: 1.5em;
	font-weight: 800;
	line-height: 1;
	color: var(--bdrh-ink);
}

.bdrh-cal__dateword {
	font-size: 0.9em;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bdrh-muted);
}

.bdrh-cal__date.is-today .bdrh-cal__datenum,
.bdrh-cal__date.is-today .bdrh-cal__dateword {
	color: var(--bdrh-accent);
}

.bdrh-cal__todaytag {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--bdrh-accent);
	color: #fff;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.1em;
}

.bdrh-cal__day .bdrh-events__list {
	border-top: 0;
}

/*
 * Under a date heading the chip on every row just says the same date over
 * and over, so it comes off and the time leads instead. That is what an
 * agenda is: a column of times against a column of things.
 */
.bdrh-cal__day .bdrh-event {
	border-bottom: 0;
	border-left: 3px solid var(--bdrh-rule);
	margin-bottom: 2px;
	border-radius: 0 7px 7px 0;
	background: var(--bdrh-surface-2);
}

.bdrh-cal__day .bdrh-event--library { border-left-color: var(--bdrh-src-library); }
.bdrh-cal__day .bdrh-event--ltu { border-left-color: var(--bdrh-src-ltu); }
.bdrh-cal__day .bdrh-event--athletics { border-left-color: var(--bdrh-src-athletics); }

.bdrh-cal__day .bdrh-event__date {
	display: none;
}

.bdrh-cal__day .bdrh-event__link {
	padding: 8px 13px;
	border-radius: 0 7px 7px 0;
}

.bdrh-cal__day .bdrh-event__when {
	order: -1;
	min-width: 76px;
	font-weight: 700;
	color: var(--bdrh-ink-2);
}

.bdrh-cal__day .bdrh-event__meta {
	gap: 10px;
}

/*
 * Given the room, a row is one line: time, what it is, whose calendar it is
 * and where. Stacked, each of these was two lines and most of a card tall,
 * which put a lot of air between a Saturday's six fixtures.
 *
 * display:contents on the meta lets its three children take their own
 * columns in this grid instead of sitting in a box of their own.
 */
@media (min-width: 1000px) {
	.bdrh-cal__day .bdrh-event__body {
		display: grid;
		grid-template-columns: 76px minmax(0, 1fr) auto minmax(0, 170px);
		align-items: center;
		column-gap: 14px;
		gap: 0 14px;
	}

	.bdrh-cal__day .bdrh-event__title {
		grid-column: 2;
		font-size: 0.96em;
	}

	.bdrh-cal__day .bdrh-event__meta {
		display: contents;
	}

	.bdrh-cal__day .bdrh-event__when {
		grid-column: 1;
		min-width: 0;
	}

	.bdrh-cal__day .bdrh-event__badge {
		grid-column: 3;
	}

	.bdrh-cal__day .bdrh-event__where {
		grid-column: 4;
		text-align: right;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.bdrh-cal__day .bdrh-event__link {
		padding: 7px 13px;
	}
}

/*
 * Between the two widths the venue is what gives, not the name of the thing.
 * It is on the event's own page, one click away.
 */
@media (min-width: 1000px) and (max-width: 1279px) {
	.bdrh-cal__day .bdrh-event__body {
		grid-template-columns: 72px minmax(0, 1fr) auto;
	}

	.bdrh-cal__day .bdrh-event__where {
		display: none;
	}
}

@media (max-width: 900px) {
	.bdrh-cal__split {
		grid-template-columns: minmax(0, 1fr);
	}

	.bdrh-cal__side {
		position: static;
		max-width: 420px;
	}
}

/* The magazine front ------------------------------------------------------ */

/*
 * Bands, each a different cut of the same wall. That is the whole point of
 * the shape: "the latest" says nothing when the band above it is also the
 * latest, so every band here is selected a different way and labelled with
 * what it actually is.
 */
.bdrh-band {
	margin-bottom: 34px;
}

.bdrh-band__head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 14px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--bdrh-ink);
}

.bdrh-band__title {
	margin: 0;
	font-size: 1em;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bdrh-ink);
}

.bdrh-band__note {
	font-size: 0.8em;
	color: var(--bdrh-muted);
}

.bdrh-band__grid {
	display: grid;
	grid-template-columns: repeat(var(--bdrh-cols), minmax(0, 1fr));
	gap: var(--bdrh-gap);
}

/* Lead and trending ------------------------------------------------------- */

/*
 * The reference does two things here that a flat bar does not. The heading
 * is a piece of artwork with the words over it, and the stories under it are
 * ordinary cards with the picture on top, not squeezed into rows.
 *
 * The artwork is drawn rather than shipped: a gradient in the station's blue
 * with the waveform from the logo traced across it. No image to upload, and
 * it recolours with the tone like everything else.
 */
.bdrh-front__banner {
	position: relative;
	overflow: hidden;
	margin: 0 0 14px;
	padding: 20px 22px;
	border-radius: var(--bdrh-radius);
	background:
		radial-gradient(120% 140% at 88% 12%, rgba(157, 180, 255, 0.30) 0%, rgba(157, 180, 255, 0) 60%),
		linear-gradient(120deg, #0d1220 0%, #16307a 58%, #2a4fc7 100%);
	color: #fff;
	line-height: 1.15;
}

/* The waveform, traced. */
.bdrh-front__banner::after {
	content: "";
	position: absolute;
	right: -10px;
	bottom: -6px;
	width: 190px;
	height: 64px;
	opacity: 0.4;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: right bottom;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 190 64'%3E%3Cpath d='M0 40h26l8-14 9 28 8-34 9 44 8-26 9 16 8-10 9 6h96' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.bdrh-front__bannerlead {
	position: relative;
	z-index: 1;
	display: block;
	font-size: 1.5em;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.bdrh-front__bannersub {
	position: relative;
	z-index: 1;
	display: block;
	margin-top: 2px;
	font-size: 0.82em;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
}

/*
 * The trending list. Same shape for every item: a thumbnail at a sensible
 * size with the headline beside it, no full-width pictures.
 *
 * The five rows share the lead's height between them, and the slack lands as
 * space above and below the contents of each rather than stretching
 * anything. The thumbnail keeps its fixed size, so nothing can distort: the
 * row simply gets taller and its contents sit in the middle of it.
 *
 * Two classes, because `.bdrh-tail` sets display:grid further down the file
 * and one class only ties with it. A tie goes to whichever comes last, so
 * this has to outrank it rather than merely disagree with it.
 */
.bdrh-tail.bdrh-front__list {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	border-top: 1px solid var(--bdrh-rule);
}

.bdrh-tail.bdrh-front__list .bdrh-tail__item {
	flex: 1 1 0;
	min-height: 0;
}

.bdrh-tail.bdrh-front__list .bdrh-tail__link {
	height: 100%;
	align-items: center;
}

.bdrh-tail.bdrh-front__list .bdrh-tail__media {
	width: 118px;
	height: 80px;
	border-radius: 7px;
}

.bdrh-tail.bdrh-front__list .bdrh-tail__link {
	gap: 16px;
	padding: 12px 4px;
}

.bdrh-tail.bdrh-front__list .bdrh-tail__title {
	font-size: 1em;
	line-height: 1.34;
	max-height: calc(1em * 1.34 * 3);
}

.bdrh-tail.bdrh-front__list .bdrh-tail__meta {
	gap: 9px;
	margin-top: 4px;
}

/* Around campus ----------------------------------------------------------- */

/*
 * The one band on the page that is actually about the university, so it is
 * set on its own ground rather than reading as more wire copy.
 */
/*
 * Full bleed, without having to be told how wide the page is.
 *
 * The negative margin widens the band to the window. The padding then puts
 * back exactly what the margin took: percentages resolve against the parent,
 * so 50vw - 50% is the overhang on one side whatever the container happens
 * to be. Guessing at a content width, as this did at first, made the band
 * narrower than everything above it on a page wider than the guess.
 */
.bdrh-band--campus {
	width: auto;
	max-width: none;
	margin-inline: calc(50% - 50vw);
	padding-block: 30px 34px;
	padding-inline: calc(50vw - 50%);
	background: var(--bdrh-band);
}

.bdrh-band--campus .bdrh-band__head {
	border-bottom-color: var(--bdrh-accent);
}

.bdrh-band--campus .bdrh-band__title {
	color: var(--bdrh-accent);
}

/* The calendar taking one card slot in that band. */
.bdrh-events-card--slot {
	grid-column: auto;
	grid-row: auto;
	padding: 15px 16px 8px;
}


.bdrh-front__top {
	display: grid;
	grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
	gap: clamp(20px, 3vw, 36px);
	margin-bottom: 34px;

	/* Stretch so the trending column has the lead's height to share out. */
	align-items: stretch;
}

.bdrh-front__trending {
	display: flex;
	flex-direction: column;
}

/* The pictures arrive at 16:9. Asking for anything else crops into them. */
.bdrh-card--big .bdrh-card__media {
	aspect-ratio: 16 / 9;
}

.bdrh-card--big .bdrh-card__title {
	font-size: 1.5em;
	line-height: 1.2;
}

.bdrh-card--big .bdrh-card__excerpt {
	font-size: 0.98em;
	max-height: none;
	-webkit-mask-image: none;
	mask-image: none;
}


@media (max-width: 1100px) {
	.bdrh-band__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 860px) {
	.bdrh-front__top {
		grid-template-columns: minmax(0, 1fr);
	}

	.bdrh-band__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.bdrh-band__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Main and rail ----------------------------------------------------------- */

/*
 * A rail beside the cards rather than a block dumped under them, which is
 * what every news site of this kind settles on: Pitchfork and Stereogum call
 * theirs The Latest, Billboard and Consequence Latest News, the Verge Most
 * Popular. Two things follow from that. The list is labelled, so it reads as
 * a section rather than leftovers, and it sits alongside the grid, so the
 * page has two columns of different weight instead of one that changes its
 * mind halfway down.
 *
 * The rail is also where the calendar and the advert belong. It is the one
 * column on the page drawn at roughly the width the standard ad units are.
 */
.bdrh-archive__split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 330px);
	gap: clamp(22px, 3vw, 40px);
	align-items: start;
}

.bdrh-archive__main {
	min-width: 0;
}

.bdrh-archive__rail {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.bdrh-rail__title {
	margin: 0;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--bdrh-ink);
	font-size: 0.95em;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bdrh-ink);
}

/* In the rail the calendar is simply the first module, not a grid cell. */
.bdrh-events-card--rail {
	grid-column: auto;
	grid-row: auto;
}

.bdrh-archive__rail .bdrh-rail__title + .bdrh-tail {
	margin-top: 10px;
}

@media (max-width: 1000px) {
	.bdrh-archive__split {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* The tail ---------------------------------------------------------------- */

/*
 * Cards for the first two rows, then lines. Not everything has to be a card:
 * the top of the wall is for browsing and the rest is for scanning, and the
 * change in shape says which is which without a heading having to.
 *
 * Roughly four times as many stories in the same height as cards would take.
 */
.bdrh-tail {
	list-style: none;
	margin: var(--bdrh-gap) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px var(--bdrh-gap);
}

.bdrh-tail__item {
	margin: 0;
	border-top: 1px solid var(--bdrh-rule);
}

.bdrh .bdrh-tail__link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 6px;
	color: inherit;
	text-decoration: none;
	border-radius: 8px;
	transition: background-color 0.15s ease;
}

.bdrh .bdrh-tail__link:hover {
	background: var(--bdrh-surface-2);
}

.bdrh-tail__media {
	flex: 0 0 auto;
	position: relative;
	width: 52px;
	height: 40px;
	border-radius: 5px;
	overflow: hidden;
	background: hsl(var(--bdrh-hue, 220) 38% 30%);
}

.bdrh-tail__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bdrh-tail__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.bdrh-tail__title {
	font-size: 0.92em;
	font-weight: 700;
	line-height: 1.35;
	color: var(--bdrh-accent);

	/* Two lines is plenty for a line in a list. */
	max-height: calc(0.92em * 1.35 * 2);
	overflow: hidden;
}

.bdrh-tail__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.76em;
	color: var(--bdrh-muted);
}

.bdrh-tail__source {
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: hsl(var(--bdrh-hue, 220) 45% 42%);
}

.bdrh-tail--rail {
	grid-template-columns: minmax(0, 1fr);
	margin-top: 0;
	gap: 0;
}

@media (max-width: 700px) {
	.bdrh-tail {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* The advert ------------------------------------------------------------- */

/*
 * Wearing the same card as the stories so it does not break the grid, and
 * labelled so nobody has to wonder. Nothing renders at all when the box is
 * empty, so the layout is never holding a space open for it.
 */
.bdrh-archive__rail .bdrh-card--ad {
	width: 100%;
	min-height: 0;
}

.bdrh-card--ad {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px;
	background: var(--bdrh-surface-2);
	border-style: dashed;
}

.bdrh-card--ad::before {
	display: none;
}

.bdrh-card--ad:hover {
	transform: none;
	box-shadow: none;
	border-color: var(--bdrh-rule);
}

.bdrh-card__adlabel {
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bdrh-muted);
}

.bdrh-card__adbody {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	flex: 1 1 auto;
	overflow: hidden;
}

.bdrh-card__adbody img,
.bdrh-card__adbody iframe {
	max-width: 100%;
	height: auto;
}

/* Programs ---------------------------------------------------------------- */

.bdrh-progs__intro {
	margin: 0 0 var(--bdrh-gap);
	max-width: 62ch;
	font-size: 1.02em;
	line-height: 1.55;
	color: var(--bdrh-ink-2);
}

.bdrh-progs__grid {
	display: grid;
	grid-template-columns: repeat(var(--bdrh-cols), minmax(0, 1fr));
	gap: var(--bdrh-gap);
}

.bdrh-prog {
	display: flex;
	background: var(--bdrh-surface);
	border: 1px solid var(--bdrh-rule);
	border-radius: var(--bdrh-radius);
	overflow: hidden;
}

.bdrh-prog__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	color: inherit;
	text-decoration: none;
}

.bdrh-prog__media {
	display: block;
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--bdrh-surface-2);
	overflow: hidden;
}

/*
 * Two classes deep on purpose. `.bdrh img` sets height:auto and is a class
 * plus an element, so it outranks a bare class here: a picture wider than
 * the box would sit short of the bottom of it, which is exactly what the
 * 2.17:1 program photo did.
 */
.bdrh-prog__media .bdrh-prog__art {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.bdrh-prog__link:hover .bdrh-prog__media .bdrh-prog__art {
	transform: scale(1.03);
}

.bdrh-prog__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 auto;
	padding: 16px 18px 18px;
}

.bdrh-prog__name {
	font-size: 1.12em;
	font-weight: 800;
	line-height: 1.25;
	color: var(--bdrh-ink);
}

.bdrh-prog__link:hover .bdrh-prog__name {
	color: var(--bdrh-accent);
}

.bdrh-prog__pitch {
	font-size: 0.93em;
	line-height: 1.5;
	color: var(--bdrh-ink-2);
}

.bdrh-prog__more {
	margin-top: auto;
	padding-top: 8px;
	font-size: 0.82em;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--bdrh-accent);
}

.bdrh-prog__link:focus-visible {
	outline: 2px solid var(--bdrh-accent);
	outline-offset: -2px;
}

@media (max-width: 900px) {
	.bdrh-progs__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.bdrh-progs__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Campus events ----------------------------------------------------------- */

/*
 * A calendar is read by scanning a column of dates, not by browsing pictures,
 * so this is a list and not a card grid. It is built to sit directly above a
 * row of story cards without competing with them.
 */

.bdrh-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.bdrh-events__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--bdrh-rule);
}

.bdrh-event {
	margin: 0;
	border-bottom: 1px solid var(--bdrh-rule);
}

.bdrh-event__link {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 11px 8px;
	text-decoration: none;
	color: inherit;
	border-radius: 8px;
}

.bdrh-event__link:hover {
	background: var(--bdrh-surface-2);
}

.bdrh-event__link:focus-visible {
	outline: 2px solid var(--bdrh-accent);
	outline-offset: -2px;
}

.bdrh-event__date {
	flex: 0 0 auto;
	width: 52px;
	padding: 6px 4px;
	text-align: center;
	line-height: 1.05;
	border-radius: 8px;
	background: var(--bdrh-accent-soft);
	color: var(--bdrh-accent);
}

.bdrh-event__month {
	display: block;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.bdrh-event__day {
	display: block;
	font-size: 19px;
	font-weight: 800;
}

.bdrh-event__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.bdrh-event__title {
	font-weight: 700;
	line-height: 1.35;
	color: var(--bdrh-ink);
}

.bdrh-event__link:hover .bdrh-event__title {
	color: var(--bdrh-accent);
}

.bdrh-event__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 0.82em;
	color: var(--bdrh-muted);
}

.bdrh-event__badge {
	display: inline-block;
	padding: 2px 6px;
	border-radius: 2px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background: var(--bdrh-surface-2);
	color: var(--bdrh-ink-2);
}

.bdrh-event__badge--ltu {
	background: var(--bdrh-accent-soft);
	color: var(--bdrh-accent);
}

.bdrh-event__badge--athletics {
	background: var(--bdrh-fun-soft);
	color: var(--bdrh-fun);
}

.bdrh-event__excerpt {
	margin-top: 2px;
	font-size: 0.86em;
	line-height: 1.45;
	color: var(--bdrh-ink-2);
}

@media (max-width: 600px) {
	.bdrh-event__link {
		align-items: flex-start;
		gap: 11px;
		padding: 11px 4px;
	}

	.bdrh-event__date {
		width: 46px;
	}
}

/*
 * The calendar sitting inside the news grid, in the first card slot.
 *
 * It carries its own dark palette rather than borrowing the section's, so it
 * reads as a different kind of thing from the stories around it at a glance,
 * before anybody has read a word of it. Placed explicitly rather than left to
 * the auto flow, so left and right both land where they are asked to instead
 * of depending on where the markup happens to sit.
 */
.bdrh-events-card {
	--bdrh-ink: #ffffff;
	--bdrh-ink-2: rgba(255, 255, 255, 0.86);
	--bdrh-muted: rgba(255, 255, 255, 0.60);
	--bdrh-surface-2: rgba(255, 255, 255, 0.13);
	--bdrh-rule: rgba(255, 255, 255, 0.16);
	--bdrh-accent: #9db4ff;
	--bdrh-accent-soft: rgba(157, 180, 255, 0.20);

	display: flex;
	flex-direction: column;
	padding: 16px 18px 10px;
	background: var(--bdrh-band-dark);
	border-radius: var(--bdrh-radius);
	color: var(--bdrh-ink);
}

.bdrh-news__grid--with-events .bdrh-events-card--left {
	grid-column: 1;
	grid-row: 1;
}

/*
 * On the news wall the cards are small, so one slot is too short to be worth
 * the space. Two rows deep puts it alongside the lead story rather than
 * under it, which is the shape of that corner of the page anyway.
 */
.bdrh-news__grid--with-events .bdrh-events-card--tall {
	grid-row: 1 / span 2;
}

.bdrh-news__grid--with-events .bdrh-events-card--right {
	grid-column: var(--bdrh-cols);
	grid-row: 1;
}

/*
 * The way through sits on the heading line rather than under the list. In a
 * card this size the foot of it is a long way from the thing somebody just
 * finished reading, and the list is already spreading to fill that height.
 */
.bdrh-events-card__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}

.bdrh .bdrh-events-card__all {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	flex: 0 0 auto;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--bdrh-accent);
	text-decoration: none;
	opacity: 0.85;
	transition: opacity 0.15s ease;
}

.bdrh .bdrh-events-card__all:hover,
.bdrh .bdrh-events-card__all:focus-visible {
	opacity: 1;
	text-decoration: underline;
}

.bdrh-icon--sm {
	display: block;
	flex: 0 0 auto;
}

.bdrh-events-card__title {
	margin: 0 0 6px;
	min-width: 0;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bdrh-accent);
}

/*
 * The panel draws its own edges, so the list does not need to draw them too.
 * The rows share out whatever height the row of story cards ends up being,
 * which keeps the panel looking filled rather than top-heavy with a slab of
 * empty dark under it.
 */
.bdrh-events-card .bdrh-events__list {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border-top: 0;
}

.bdrh-events-card .bdrh-event:last-child {
	border-bottom: 0;
}

/* Tighter than the standalone strip, to sit inside one card slot. */
.bdrh-events-card .bdrh-event__link {
	gap: 11px;
	padding: 9px 0;
}

.bdrh-events-card .bdrh-event__link:hover {
	background: transparent;
}

.bdrh-events-card .bdrh-event__date {
	width: 44px;
	padding: 5px 3px;
}

.bdrh-events-card .bdrh-event__day {
	font-size: 17px;
}

.bdrh-events-card .bdrh-event__title {
	font-size: 0.94em;
}

.bdrh-events-card .bdrh-event__link:hover .bdrh-event__title {
	color: var(--bdrh-accent);
}

@media (max-width: 900px) {
	/*
	 * Two columns is not enough to give the calendar one and still have the
	 * stories read as a row, so it goes back to being a band across the top.
	 */
	.bdrh-news__grid--with-events .bdrh-events-card--left,
	.bdrh-news__grid--with-events .bdrh-events-card--right {
		grid-column: 1 / -1;
		grid-row: auto;
	}
}

/* Podcast index ---------------------------------------------------------- */

.bdrh-shows__grid {
	display: grid;
	grid-template-columns: repeat(var(--bdrh-cols), minmax(0, 1fr));
	gap: var(--bdrh-gap);
}

.bdrh-show {
	display: flex;
	gap: 18px;
	padding: 20px;
	background: var(--bdrh-surface);
	border: 1px solid var(--bdrh-rule);
	border-radius: var(--bdrh-radius);
}

.bdrh-show__media {
	flex: 0 0 auto;
}

.bdrh-show__art {
	width: 132px;
	height: 132px;
	border-radius: 8px;
	object-fit: cover;
	background: var(--bdrh-surface-2);
	display: block;
}

.bdrh-show__art.bdrh-art--empty {
	font-size: 44px;
}

.bdrh-show__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bdrh-show__name {
	margin: 0;
	font-size: 1.2em;
	font-weight: 800;
	line-height: 1.2;
}

.bdrh-show__name a {
	color: inherit;
	text-decoration: none;
}

.bdrh-show__name a:hover,
.bdrh-show__name a:focus-visible {
	color: var(--bdrh-accent);
}

.bdrh-show__blurb {
	margin: 0;
	font-size: 0.94em;
	line-height: 1.5;
	color: var(--bdrh-ink-2);
}

/*
 * The newest episode sits in its own panel rather than running on from the
 * description, so the eye can tell the show apart from what is on it now.
 * Long episode titles are held to three lines, which keeps a row of cards level
 * with each other instead of one of them pushing its button down the page.
 */
.bdrh-show__latest {
	display: block;
	margin: 2px 0 0;
	padding: 11px 13px;
	background: var(--bdrh-surface-2);
	border-left: 3px solid var(--bdrh-accent);
	border-radius: 4px 10px 10px 4px;
	color: inherit;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.bdrh-show__latest:hover,
.bdrh-show__latest:focus-visible {
	background: var(--bdrh-accent-soft);
}

.bdrh-show__latest:hover .bdrh-show__episode,
.bdrh-show__latest:focus-visible .bdrh-show__episode {
	color: var(--bdrh-accent);
}

.bdrh-show__latest:focus-visible {
	outline: 2px solid var(--bdrh-accent);
	outline-offset: 2px;
}

.bdrh-show__label {
	display: block;
	margin-bottom: 4px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bdrh-accent);
}

/*
 * The panel stays a plain block on purpose. A -webkit-box inside a flex
 * column resolves its height late, which is what left a gap under the news
 * card excerpts until something forced a repaint. The max-height is the
 * belt to the line clamp's braces.
 */
.bdrh-show__episode {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-height: calc(0.92em * 1.4 * 3);
	font-size: 0.92em;
	font-weight: 600;
	line-height: 1.4;
	color: var(--bdrh-ink);
}

.bdrh-show__date {
	display: block;
	margin-top: 5px;
	font-size: 0.8em;
	line-height: 1.3;
	color: var(--bdrh-muted);
}

.bdrh-show__actions {
	margin: auto 0 0;
	padding-top: 10px;
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.bdrh-button--sm {
	font-size: 14px;
	padding: 8px 16px;
	min-height: 0;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}

.bdrh-textlink {
	font-size: 14px;
	color: var(--bdrh-muted);
}

.bdrh-iconlink {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	color: var(--bdrh-muted);
	transition: color 0.15s ease, background-color 0.15s ease;
}

.bdrh-iconlink:hover,
.bdrh-iconlink:focus-visible {
	color: #1db954;
	background: var(--bdrh-surface-2);
}

.bdrh-iconlink--instagram:hover,
.bdrh-iconlink--instagram:focus-visible {
	color: #c13584;
}

.bdrh-iconlink:focus-visible {
	outline: 2px solid var(--bdrh-accent);
	outline-offset: 2px;
}

.bdrh-icon {
	display: block;
}

/* Equal-column rows -------------------------------------------------------- */

/*
 * Owns its own grid, so three boxes come out the same width and the same
 * height no matter what the longest track name in each happens to be.
 */
.bdrh-row__grid {
	display: grid;
	grid-template-columns: repeat(var(--bdrh-cols, 3), minmax(0, 1fr));
	align-items: stretch;
	gap: var(--bdrh-gap, 22px);
}

.bdrh-row__grid > .bdrh {
	margin-bottom: 0;
	height: 100%;
}

@media (max-width: 900px) {
	.bdrh-row__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.bdrh-row__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

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

.bdrh-artistlink {
	color: inherit;
	text-decoration: none;
}

.bdrh-artistlink:hover,
.bdrh-artistlink:focus-visible {
	color: var(--bdrh-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

a.bdrh-dock__cover {
	transition: transform 0.15s ease;
}

a.bdrh-dock__cover:hover,
a.bdrh-dock__cover:focus-visible {
	transform: translateY(-2px);
}

a.bdrh-dock__cover:focus-visible {
	outline: 2px solid var(--bdrh-accent);
	outline-offset: 2px;
}

/* House promos ------------------------------------------------------------ */

.bdrh-promo {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bdrh-promo--center {
	align-items: center;
}

.bdrh-promo--left {
	align-items: flex-start;
}

.bdrh-promo--right {
	align-items: flex-end;
}

.bdrh-promo__label {
	margin: 0;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bdrh-muted);
}

.bdrh-promo__link {
	display: block;
	width: 100%;
	border-radius: var(--bdrh-radius);
	overflow: hidden;
	line-height: 0;
}

.bdrh-promo__link img {
	width: 100%;
	height: auto;
	display: block;
}

.bdrh-promo__link:focus-visible {
	outline: 2px solid var(--bdrh-accent);
	outline-offset: 3px;
}


/* Artist pages ----------------------------------------------------------- */

.bdrh-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.bdrh-artist {
	max-width: var(--bdrh-content-width, 1140px);
	margin-inline: auto;
	padding: clamp(24px, 3vw, 48px) 20px;
}

.bdrh-artist__head {
	display: flex;
	gap: clamp(20px, 3vw, 40px);
	align-items: center;
	padding-bottom: 28px;
	margin-bottom: 32px;
	border-bottom: 1px solid var(--bdrh-rule);
}

/*
 * With a real portrait the header becomes a banner, using the same idea as
 * the marquee: the picture blurred behind, the sharp copy in front.
 */
.bdrh-artist__head--photo {
	--bdrh-ink: #ffffff;
	--bdrh-ink-2: rgba(255, 255, 255, 0.88);
	--bdrh-muted: rgba(255, 255, 255, 0.66);
	--bdrh-accent: #b9cbff;
	--bdrh-accent-soft: rgba(185, 203, 255, 0.18);
	--bdrh-rule: rgba(255, 255, 255, 0.2);

	position: relative;
	isolation: isolate;
	overflow: hidden;
	border-bottom: 0;
	border-radius: var(--bdrh-radius);
	padding: clamp(24px, 3.4vw, 44px);
	margin-bottom: 40px;
	background: #0b1020;
	color: var(--bdrh-ink);
}

.bdrh-artist__bg {
	position: absolute;
	inset: -14%;
	z-index: 0;
	background-size: cover;
	background-position: center 28%;
	filter: blur(38px) saturate(1.4);
	transform: scale(1.2);
	opacity: 0.75;
}

.bdrh-artist__veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(90deg, rgba(6, 10, 22, 0.94) 0%, rgba(6, 10, 22, 0.78) 48%, rgba(6, 10, 22, 0.5) 100%);
}

.bdrh-artist__head--photo > .bdrh-artist__art,
.bdrh-artist__head--photo > .bdrh-artist__meta {
	position: relative;
	z-index: 2;
}

.bdrh-artist__head--photo .bdrh-artist__cover {
	box-shadow: 0 24px 56px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.16);
}

/* Biography ---------------------------------------------------------------- */

.bdrh-bio__text {
	margin: 0 0 10px;
	font-size: 1.08em;
	line-height: 1.6;
	color: var(--bdrh-ink-2);
}

.bdrh-bio__credit {
	margin: 0;
	font-size: 12.5px;
	color: var(--bdrh-muted);
}

.bdrh-bio__credit a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.bdrh-bio__credit a:hover,
.bdrh-bio__credit a:focus-visible {
	color: var(--bdrh-accent);
}

.bdrh-artist__cover {
	width: clamp(120px, 16vw, 200px);
	height: clamp(120px, 16vw, 200px);
	border-radius: 10px;
	object-fit: cover;
	background: var(--bdrh-surface-2);
	display: block;
}

.bdrh-artist__cover.bdrh-art--empty {
	font-size: 64px;
}

.bdrh-artist__meta {
	flex: 1 1 auto;
	min-width: 0;
}

.bdrh-artist__name {
	margin: 4px 0 18px;
	font-size: clamp(2rem, 4.6vw, 3.2rem);
	font-weight: 900;
	line-height: 1.02;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.bdrh-artist__what {
	margin: 6px 0 14px;
	font-size: 1.05em;
	font-weight: 400;
	color: var(--bdrh-ink-2);
}

.bdrh-artist__genres {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 18px;
}

.bdrh-tag {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--bdrh-accent-soft);
	color: var(--bdrh-accent);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* The supporting detail, set back so the numbers above carry the block. */
.bdrh-artist__facts {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 0;
	margin: 20px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--bdrh-muted);
}

.bdrh-artist__facts > span {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
}

.bdrh-artist__facts > span + span::before {
	content: "";
	display: inline-block;
	width: 3px;
	height: 3px;
	margin: 0 14px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.55;
	transform: translateY(-3px);
}

.bdrh-artist__facts a {
	color: var(--bdrh-ink-2);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.bdrh .bdrh-artist__facts a:hover,
.bdrh .bdrh-artist__facts a:focus-visible {
	color: var(--bdrh-accent);
	background-color: transparent;
}

.bdrh-tracklink {
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bdrh-muted);
	text-decoration: none;
	white-space: nowrap;
}

.bdrh-tracklink:hover,
.bdrh-tracklink:focus-visible {
	color: var(--bdrh-accent);
}

.bdrh-artist__stats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 14px clamp(26px, 3.6vw, 54px);
}

.bdrh-artist__stats li {
	flex: 0 0 auto;
}

.bdrh-artist__stats li {
	display: flex;
	flex-direction: column;
}

.bdrh-artist__stats b a {
	color: inherit;
	text-decoration: none;
	border-bottom: 2px solid var(--bdrh-accent);
}

.bdrh-artist__stats b {
	font-size: 1.7em;
	font-weight: 800;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.bdrh-artist__stats span {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--bdrh-muted);
	margin-top: 3px;
}

.bdrh-artist__block {
	margin-bottom: 40px;
}

/*
 * Two lists that each read fine at a narrow measure were each leaving half
 * the page empty. Side by side they fill it and stay just as readable.
 */
.bdrh-artist__pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: clamp(24px, 3vw, 44px);
	margin-bottom: 40px;
}

.bdrh-artist__pair .bdrh-artist__block {
	margin-bottom: 0;
	min-width: 0;
}

/* Inside a column the lists take the column, not a fixed measure. */
.bdrh-artist__pair .bdrh-chart__list,
.bdrh-artist__pair .bdrh-list {
	max-width: none;
}

/* Room is tighter in a half-width column, so the tail of each row shrinks. */
.bdrh-artist__pair .bdrh-chart__row {
	gap: 9px;
}

.bdrh-artist__pair .bdrh-tracklink {
	font-size: 10px;
}

.bdrh-artist__pair .bdrh-chart__plays {
	font-size: 0.78em;
}

@media (max-width: 860px) {
	.bdrh-artist__pair {
		grid-template-columns: minmax(0, 1fr);
	}

	.bdrh-artist__pair .bdrh-artist__block:first-child {
		margin-bottom: 8px;
	}
}

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

.bdrh-artist__related a {
	display: inline-block;
	padding: 9px 16px;
	border: 1px solid var(--bdrh-rule);
	border-radius: 999px;
	background: var(--bdrh-surface);
	color: var(--bdrh-ink-2);
	text-decoration: none;
	font-size: 15px;
	font-weight: 600;
}

.bdrh-artist__related a:hover,
.bdrh-artist__related a:focus-visible {
	border-color: var(--bdrh-accent);
	color: var(--bdrh-accent);
}

.bdrh-artist__back {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding-top: 24px;
	border-top: 1px solid var(--bdrh-rule);
	font-size: 15px;
	color: var(--bdrh-muted);
}

.bdrh .bdrh-artist__back a {
	color: var(--bdrh-accent);
	font-weight: 600;
	text-decoration: none;
}

.bdrh .bdrh-artist__back a:hover,
.bdrh .bdrh-artist__back a:focus-visible {
	color: var(--bdrh-accent);
	background-color: transparent;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Track previews ----------------------------------------------------------- */

.bdrh-preview {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--bdrh-rule);
	border-radius: 50%;
	background: var(--bdrh-surface);
	color: var(--bdrh-ink-2);
	cursor: pointer;
}

.bdrh-preview:hover,
.bdrh-preview:focus-visible {
	border-color: var(--bdrh-accent);
	color: var(--bdrh-accent);
}

.bdrh-preview:focus-visible {
	outline: 2px solid var(--bdrh-accent);
	outline-offset: 2px;
}

.bdrh-preview__icon {
	width: 0;
	height: 0;
	margin-left: 2px;
	border-style: solid;
	border-width: 5px 0 5px 8px;
	border-color: transparent transparent transparent currentColor;
}

.bdrh-preview[aria-pressed="true"] {
	border-color: var(--bdrh-accent);
	background: var(--bdrh-accent);
	color: #fff;
}

.bdrh-preview[aria-pressed="true"] .bdrh-preview__icon {
	width: 9px;
	height: 10px;
	margin-left: 0;
	border: 0;
	background: currentColor;
	-webkit-clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0);
	clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0);
}

/* Hour of day -------------------------------------------------------------- */

.bdrh-hours {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(24, minmax(0, 1fr));
	gap: 3px;
	align-items: end;
}

.bdrh-hours__item {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
	min-width: 0;
}

.bdrh-hours__item::before {
	content: "";
	order: -1;
	height: 64px;
	width: 0;
}

.bdrh-hours__bar {
	height: var(--bdrh-h, 2%);
	min-height: 3px;
	border-radius: 2px 2px 0 0;
	background: var(--bdrh-accent);
}

.bdrh-hours__bar.is-empty {
	background: var(--bdrh-rule);
}

.bdrh-hours__label {
	font-size: 10px;
	color: var(--bdrh-muted);
	white-space: nowrap;
}

/* Their biggest, elsewhere -------------------------------------------------- */

.bdrh-world {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	max-width: var(--bdrh-list-max);
	border: 1px solid var(--bdrh-rule);
	border-radius: var(--bdrh-radius);
	background: var(--bdrh-surface);
	overflow: hidden;
}

.bdrh-world__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 14px;
	border-bottom: 1px solid var(--bdrh-rule);
}

.bdrh-world__row:last-child {
	border-bottom: 0;
}

.bdrh-world__rank {
	flex: 0 0 auto;
	width: 22px;
	text-align: right;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--bdrh-muted);
}

.bdrh-world__title {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--bdrh-muted);
}

.bdrh-world__row.is-ours .bdrh-world__title {
	color: var(--bdrh-ink);
}

.bdrh-world__flag {
	flex: 0 0 auto;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--bdrh-muted);
	white-space: nowrap;
}

.bdrh-world__row.is-ours .bdrh-world__flag {
	color: var(--bdrh-up);
}

/* Close to this, not in rotation ------------------------------------------- */

.bdrh-suggest {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: var(--bdrh-gap);
}

.bdrh-suggest__item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.bdrh-suggest__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	overflow: hidden;
	background: var(--bdrh-surface-2);
}

.bdrh-suggest__art {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bdrh-suggest__art.bdrh-art--empty {
	font-size: 34px;
}

.bdrh-suggest__name {
	font-size: 0.92em;
	font-weight: 600;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Airplay by week ---------------------------------------------------------- */

.bdrh-weeks {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 10px;
	align-items: end;
}

.bdrh-weeks__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	min-width: 0;
}

.bdrh-weeks__bar {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	width: 100%;
	height: var(--bdrh-h, 4%);
	min-height: 5px;
	border-radius: 3px 3px 0 0;
	background: var(--bdrh-accent);
}

/* The column is the bar; this reserves the space it grows into. */
.bdrh-weeks__item::before {
	content: "";
	order: -1;
	flex: 0 0 auto;
	height: 96px;
	width: 0;
}

.bdrh-weeks__value {
	position: absolute;
	top: -20px;
	font-size: 12px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--bdrh-ink-2);
}

.bdrh-weeks__label {
	font-size: 11px;
	color: var(--bdrh-muted);
	white-space: nowrap;
}

.bdrh-weeks__rank {
	font-size: 11px;
	font-weight: 700;
	color: var(--bdrh-accent);
	font-variant-numeric: tabular-nums;
}

.bdrh-weeks__rank--off {
	color: var(--bdrh-rule-2, var(--bdrh-muted));
}

@media (max-width: 600px) {
	.bdrh-weeks__value {
		display: none;
	}
}

/* Artist index ----------------------------------------------------------- */

.bdrh-artistgrid__grid {
	display: grid;
	grid-template-columns: repeat(var(--bdrh-cols, 4), minmax(0, 1fr));
	gap: var(--bdrh-gap);
}

.bdrh-artistcard {
	display: flex;
	flex-direction: column;
	gap: 9px;
	text-decoration: none;
	color: inherit;
}

.bdrh-artistcard__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	overflow: hidden;
	background: var(--bdrh-surface-2);
}

.bdrh-artistcard__art {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bdrh-artistcard__art.bdrh-art--empty {
	font-size: 42px;
}

.bdrh-artistcard__name {
	font-weight: 700;
	line-height: 1.3;
}

.bdrh-artistcard:hover .bdrh-artistcard__name,
.bdrh-artistcard:focus-visible .bdrh-artistcard__name {
	color: var(--bdrh-accent);
}

.bdrh-artistcard__plays {
	font-size: 0.85em;
	color: var(--bdrh-muted);
}


/* Artists directory -------------------------------------------------------- */

.bdrh-directory__block {
	margin-bottom: 44px;
}

.bdrh-directory__block:last-child {
	margin-bottom: 0;
}

/* The handful that define the station's sound. */
.bdrh-topartists {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: var(--bdrh-gap);
	margin-top: 14px;
}

.bdrh-topartist {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 9px;
	text-decoration: none;
	color: inherit;
}

.bdrh-topartist__rank {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
	min-width: 26px;
	height: 26px;
	padding: 0 7px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: rgba(8, 12, 24, 0.82);
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.bdrh-topartist__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	overflow: hidden;
	background: var(--bdrh-surface-2);
}

.bdrh-topartist__art {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bdrh-topartist__art.bdrh-art--empty {
	font-size: 42px;
}

.bdrh-topartist__name {
	font-weight: 700;
	line-height: 1.3;
}

.bdrh-topartist:hover .bdrh-topartist__name,
.bdrh-topartist:focus-visible .bdrh-topartist__name {
	color: var(--bdrh-accent);
}

.bdrh-topartist__plays {
	font-size: 0.85em;
	color: var(--bdrh-muted);
}

/* Controls */
.bdrh-directory__bar {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 16px;
}

.bdrh-directory__count {
	margin: 0;
	font-size: 14px;
	color: var(--bdrh-muted);
}

.bdrh-directory__count [data-bdrh="artist-count"] {
	font-weight: 800;
	font-size: 1.25em;
	color: var(--bdrh-ink);
	font-variant-numeric: tabular-nums;
}

.bdrh-directory__countlabel {
	margin-left: 4px;
}

.bdrh-jump {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 10px 0 18px;
	border-bottom: 1px solid var(--bdrh-rule);
	margin-bottom: 20px;
}

.bdrh-jump__letter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 30px;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 700;
	color: var(--bdrh-ink-2);
	text-decoration: none;
}

.bdrh-jump__letter:hover,
.bdrh-jump__letter:focus-visible {
	background: var(--bdrh-accent);
	color: #fff;
}

/* The directory itself: text-led, because names are what people scan. */
.bdrh-letter {
	margin-bottom: 30px;
	scroll-margin-top: var(--bdrh-anchor-offset, 96px);
}

.bdrh-letter__head {
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--bdrh-ink);
	font-size: 1.1rem;
	font-weight: 900;
	letter-spacing: 0.04em;
}

.bdrh-letter__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 2px 18px;
}

.bdrh-artistrow a {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 7px 8px;
	border-radius: var(--bdrh-radius);
	text-decoration: none;
	color: inherit;
}

.bdrh-artistrow a:hover,
.bdrh-artistrow a:focus-visible {
	background: var(--bdrh-surface-2);
}

.bdrh-artistrow__media {
	flex: 0 0 auto;
	display: block;
	width: 38px;
	height: 38px;
	border-radius: 4px;
	overflow: hidden;
	background: var(--bdrh-surface-2);
}

.bdrh-artistrow__art {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	font-size: 15px;
}

.bdrh-artistrow__text {
	min-width: 0;
	display: block;
}

.bdrh-artistrow__name {
	display: block;
	font-weight: 600;
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bdrh-artistrow__meta {
	display: block;
	font-size: 0.82em;
	color: var(--bdrh-muted);
}

.bdrh-artistrow[hidden],
.bdrh-letter[hidden] {
	display: none;
}

@media (max-width: 600px) {
	.bdrh-letter__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.bdrh-topartists {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Sticky player bar ------------------------------------------------------- */

body.bdrh-has-dock {
	padding-bottom: 78px;
}

.bdrh-dock {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 9990;
	width: 100%;
	margin: 0;
	background: var(--bdrh-surface);
	border-top: 1px solid var(--bdrh-rule);
	box-shadow: 0 -8px 30px rgba(10, 16, 32, 0.14);
	transition: transform 0.28s ease, opacity 0.2s ease;
}

.bdrh-dock--bottom {
	bottom: 0;
	transform: translateY(110%);
}

.bdrh-dock--top {
	top: 0;
	border-top: 0;
	border-bottom: 1px solid var(--bdrh-rule);
	transform: translateY(-110%);
	box-shadow: 0 8px 30px rgba(10, 16, 32, 0.14);
}

.bdrh-dock.is-on {
	transform: translateY(0);
}

/* As the site's footer it never slides away. */
.bdrh-dock--always {
	transform: translateY(0);
}

/*
 * A page load kills the audio element. Where the browser refuses to pick the
 * stream back up on its own, the button says so rather than silently sitting
 * there looking stopped.
 */
body.bdrh-resumable .bdrh-play--round {
	box-shadow: 0 0 0 0 rgba(26, 82, 196, 0.5);
	animation: bdrh-nudge 2.2s ease-out infinite;
}

@keyframes bdrh-nudge {
	0% {
		box-shadow: 0 0 0 0 rgba(26, 82, 196, 0.45);
	}
	70% {
		box-shadow: 0 0 0 12px rgba(26, 82, 196, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(26, 82, 196, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.bdrh-resumable .bdrh-play--round {
		animation: none;
	}
}

.bdrh-dock__inner {
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: var(--bdrh-content-width, 1140px);
	margin-inline: auto;
	padding: 11px 20px;
}

.bdrh-dock__logo img {
	height: 38px;
	width: auto;
	display: block;
}

.bdrh-dock__art {
	flex: 0 0 auto;
	display: block;
}

.bdrh-dock .bdrh-art--lg {
	width: 46px;
	height: 46px;
	border-radius: 5px;
	box-shadow: none;
	font-size: 20px;
}

.bdrh-dock__meta {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.bdrh-dock__state {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bdrh-muted);
}

.bdrh-dock .bdrh-dot {
	width: 7px;
	height: 7px;
	animation: bdrh-onair 2.6s ease-in-out infinite;
}

.bdrh-dock__track {
	display: block;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 15px;
	line-height: 1.3;
}

.bdrh-dock__title {
	font-weight: 700;
}

.bdrh-dock__artist {
	color: var(--bdrh-muted);
}

.bdrh-dock__artist:not(:empty)::before {
	content: " / ";
	color: var(--bdrh-rule-2, var(--bdrh-muted));
}

.bdrh .bdrh-play--round {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	margin: 0;
	padding: 0;
	justify-content: center;
	gap: 0;
	border-radius: 50%;
}

.bdrh .bdrh-play--round .bdrh-play__icon {
	margin-left: 2px;
}

.bdrh .bdrh-play--round[aria-pressed="true"] .bdrh-play__icon {
	margin-left: 0;
}

.bdrh-dock__recent {
	flex: 0 0 auto;
	display: flex;
	gap: 6px;
}

.bdrh-dock__cover {
	display: block;
	width: 40px;
	height: 40px;
	border-radius: 4px;
	overflow: hidden;
	background: var(--bdrh-surface-2);
}

.bdrh-dock__coverart {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	font-size: 15px;
}

.bdrh-dock__all {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bdrh-accent);
	text-decoration: none;
	white-space: nowrap;
}

@media (max-width: 900px) {
	.bdrh-dock__recent,
	.bdrh-dock__logo {
		display: none;
	}
}

@media (max-width: 600px) {
	.bdrh-artist__head {
		flex-direction: column;
		align-items: flex-start;
	}

	.bdrh-artistgrid__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bdrh-dock__inner {
		gap: 12px;
		padding: 9px 14px;
	}

	.bdrh-dock__all {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bdrh-dock {
		transition: none;
	}
}

/* Hover lockdown ----------------------------------------------------------- */

/*
 * Themes style button and link hovers globally, and anything here that only
 * set a colour was inheriting whatever the theme fancied. Every interactive
 * element declares its own background at every state.
 */
.bdrh .bdrh-preview {
	background-color: var(--bdrh-surface);
	color: var(--bdrh-ink-2);
}

.bdrh .bdrh-preview:hover,
.bdrh .bdrh-preview:focus-visible,
.bdrh .bdrh-preview:active {
	background-color: var(--bdrh-surface-2);
	border-color: var(--bdrh-accent);
	color: var(--bdrh-accent);
}

.bdrh .bdrh-preview[aria-pressed="true"],
.bdrh .bdrh-preview[aria-pressed="true"]:hover,
.bdrh .bdrh-preview[aria-pressed="true"]:focus-visible {
	background-color: var(--bdrh-accent);
	border-color: var(--bdrh-accent);
	color: #ffffff;
}

.bdrh .bdrh-button {
	background-color: var(--bdrh-accent);
	color: #ffffff;
}

.bdrh .bdrh-button:hover,
.bdrh .bdrh-button:focus-visible,
.bdrh .bdrh-button:active {
	background-color: var(--bdrh-accent);
	color: #ffffff;
	opacity: 0.88;
	filter: none;
}

.bdrh .bdrh-pill {
	background-color: var(--bdrh-surface);
}

.bdrh .bdrh-pill:hover,
.bdrh .bdrh-pill:focus-visible {
	background-color: var(--bdrh-surface-2);
	border-color: var(--bdrh-accent);
	color: var(--bdrh-accent);
}

.bdrh .bdrh-pill.is-on,
.bdrh .bdrh-pill.is-on:hover,
.bdrh .bdrh-pill.is-on:focus-visible {
	background-color: var(--bdrh-accent);
	border-color: var(--bdrh-accent);
	color: #ffffff;
}

.bdrh .bdrh-artist__related a {
	background-color: var(--bdrh-surface);
}

.bdrh .bdrh-artist__related a:hover,
.bdrh .bdrh-artist__related a:focus-visible {
	background-color: var(--bdrh-surface-2);
	border-color: var(--bdrh-accent);
	color: var(--bdrh-accent);
}

.bdrh .bdrh-pager .page-numbers {
	background-color: var(--bdrh-surface);
}

.bdrh .bdrh-pager .page-numbers:hover,
.bdrh .bdrh-pager .page-numbers:focus-visible {
	background-color: var(--bdrh-surface-2);
	border-color: var(--bdrh-accent);
	color: var(--bdrh-accent);
}

.bdrh .bdrh-pager .page-numbers.current,
.bdrh .bdrh-pager .page-numbers.current:hover {
	background-color: var(--bdrh-accent);
	border-color: var(--bdrh-accent);
	color: #ffffff;
}

.bdrh .bdrh-ghost:hover,
.bdrh .bdrh-ghost:focus-visible {
	background-color: rgba(255, 255, 255, 0.14);
	color: #ffffff;
}

.bdrh .bdrh-jump__letter:hover,
.bdrh .bdrh-jump__letter:focus-visible {
	background-color: var(--bdrh-accent);
	color: #ffffff;
}

.bdrh .bdrh-iconlink:hover,
.bdrh .bdrh-iconlink:focus-visible {
	background-color: var(--bdrh-surface-2);
	color: #1db954;
}

/* Plain links inside plugin blocks keep the page background. */
.bdrh a:hover,
.bdrh a:focus-visible {
	background-color: transparent;
}

.bdrh .bdrh-artistrow a:hover,
.bdrh .bdrh-artistrow a:focus-visible {
	background-color: var(--bdrh-surface-2);
}

/* Full-bleed bands -------------------------------------------------------- */

/*
 * Runs the band out to the window edges while the content inside stays on
 * the same measure as every other section. Set --bdrh-content-width to
 * whatever your Elementor container is.
 */
.bdrh--bleed {
	/*
	 * This has to beat the width:100% set on .bdrh. A bled band widens by
	 * way of its negative margins, which only works from an auto width;
	 * pinned at 100% it just slides sideways instead of stretching.
	 */
	width: auto;
	max-width: none;
	margin-inline: calc(50% - 50vw);
	border-radius: 0;
	padding-inline: max(24px, calc((100vw - var(--bdrh-content-width, 1140px)) / 2));
}

.bdrh--bleed.bdrh--tint,
.bdrh--bleed.bdrh--dark,
.bdrh--bleed.bdrh--deep {
	padding-block: clamp(30px, 3.6vw, 56px);
}

@media (max-width: 600px) {
	.bdrh--bleed {
		padding-inline: 18px;
	}
}

/* Responsive ------------------------------------------------------------- */

@media (max-width: 900px) {
	.bdrh-news__grid,
	.bdrh-pods__grid,
	.bdrh-shows__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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

	.bdrh-marquee__cover {
		width: 150px;
	}

	.bdrh-marquee__tiles {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.bdrh-marquee--tall {
		min-height: 380px;
	}
}

@media (max-width: 600px) {
	.bdrh-news__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.bdrh-news--lead .bdrh-card--lead {
		grid-column: auto;
		grid-row: auto;
	}

	.bdrh-now__card {
		flex-direction: column;
	}

	.bdrh-now--hero {
		min-height: 0;
	}

	.bdrh-art--lg {
		width: 112px;
		height: 112px;
	}

	.bdrh-list__time--lead {
		width: 62px;
	}

	.bdrh-move {
		min-width: 40px;
	}

	.bdrh-marquee__tiles {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.bdrh-marquee--tall,
	.bdrh-marquee--short {
		min-height: 0;
	}

	.bdrh-marquee__actions .bdrh-play--lg,
	.bdrh-marquee__actions .bdrh-ghost {
		flex: 1 1 100%;
		justify-content: center;
	}

	.bdrh-archive__bar {
		flex-direction: column;
		align-items: stretch;
	}

	.bdrh-marquee__inner,
	.bdrh-marquee__inner--art-left {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}

	.bdrh-marquee__artcol {
		order: -1;
	}

	.bdrh-rewind--grid .bdrh-list {
		grid-template-columns: minmax(0, 1fr);
	}

	.bdrh-show {
		flex-direction: column;
	}

	.bdrh-show__art {
		width: 110px;
		height: 110px;
	}
}


/* New to the station ------------------------------------------------------- */

.bdrh-fresh__grid {
	display: grid;
	grid-template-columns: repeat(var(--bdrh-cols, 4), minmax(0, 1fr));
	gap: var(--bdrh-gap);
	margin-top: 4px;
}

.bdrh-fresh__item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	text-decoration: none;
	color: inherit;
}

.bdrh-fresh__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	overflow: hidden;
	background: var(--bdrh-surface-2);
}

.bdrh-fresh__art {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bdrh-fresh__art.bdrh-art--empty {
	font-size: 40px;
}

.bdrh-fresh__flag {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--bdrh-accent);
	color: #ffffff;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.bdrh-fresh__name {
	font-weight: 700;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

a.bdrh-fresh__item:hover .bdrh-fresh__name,
a.bdrh-fresh__item:focus-visible .bdrh-fresh__name {
	color: var(--bdrh-accent);
}

.bdrh-fresh__by {
	font-size: 0.88em;
	color: var(--bdrh-ink-2);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bdrh-fresh__when {
	font-size: 0.8em;
	color: var(--bdrh-muted);
}

@media (max-width: 600px) {
	.bdrh-fresh__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Touch ------------------------------------------------------------------- */

/*
 * Measured on a phone: a dozen controls came in under 32px, and the "Full
 * track" links were 15. Both platforms ask for 44. These grow the hit area
 * on touch pointers only, so the desktop layout is untouched.
 */
@media (pointer: coarse) {
	.bdrh .bdrh-preview {
		width: 42px;
		height: 42px;
	}

	.bdrh .bdrh-tracklink,
	.bdrh .bdrh-cta__link,
	.bdrh .bdrh-artist__facts a,
	.bdrh .bdrh-bio__credit a,
	.bdrh .bdrh-artist__back a,
	.bdrh .bdrh-dock__all {
		display: inline-block;
		padding-block: 12px;
	}

	.bdrh .bdrh-jump__letter {
		min-width: 42px;
		height: 42px;
	}

	.bdrh .bdrh-pill {
		padding: 12px 17px;
	}

	.bdrh .bdrh-artistrow a {
		padding: 11px 8px;
	}

	.bdrh .bdrh-artist__related a {
		padding: 12px 18px;
	}
}

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

@media (max-width: 600px) {
	/*
	 * The marquee was taking the whole first screen, so nobody knew there
	 * was a site under it. Tighter, with the two buttons sharing a row.
	 */
	.bdrh-marquee {
		padding: 26px 20px 28px;
	}

	.bdrh-marquee__inner,
	.bdrh-marquee__inner--art-left {
		gap: 18px;
	}

	.bdrh-marquee__cover {
		width: 128px;
	}

	.bdrh-marquee__name {
		font-size: clamp(2rem, 11vw, 2.6rem);
		margin-bottom: 10px;
	}

	.bdrh-marquee__eyebrow {
		margin-bottom: 10px;
	}

	.bdrh-marquee__tagline {
		margin-bottom: 20px;
		font-size: 1rem;
	}

	.bdrh-marquee__actions {
		gap: 10px;
	}

	/* Short labels do not each need their own row. */
	.bdrh-marquee__actions .bdrh-play--lg,
	.bdrh-marquee__actions .bdrh-ghost {
		flex: 1 1 auto;
		min-width: 0;
		justify-content: center;
		padding-left: 18px;
		padding-right: 18px;
		font-size: 16px;
	}

	.bdrh-marquee__now {
		margin-top: 20px;
	}

	/* The caption was centred while everything under it was not. */
	.bdrh-marquee__artcol,
	.bdrh-marquee__artcol--center {
		align-items: flex-start;
	}

	.bdrh-marquee__artcol--center .bdrh-marquee__now {
		align-items: flex-start;
		text-align: left;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bdrh *,
	.bdrh-marquee .bdrh-dot,
	.bdrh-now.is-playing .bdrh-marquee__vinyl {
		transition: none !important;
		animation: none !important;
	}
}