/*
 * The Radio pages (Radio hub, How to listen, Download the app; #297), on tokens.css.
 *
 * Boards: RadioHub-Round2, HowToListen-Round2, DownloadApp-Round2. A section is a full-width band
 * (white, light grey, Dark Red or Yellow) holding a content-width column. The band class sets the
 * text colours, so contrast stays at 4.5:1 or better: Ink and Gray on white and grey (7.4:1 and up),
 * white on Dark Red (9:1), Ink and Dark Red on Yellow. No colour is set inline.
 */

.skdr-radio {
	font-family: var(--skdr-font);
	color: var(--skdr-gray);
}

.skdr-radio .skdr-radio-wrap {
	box-sizing: border-box;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

.skdr-radio .skdr-radio-top {
	padding-top: 24px;
	padding-bottom: 8px;
}

.skdr-radio .skdr-placed {
	display: block;
}

.skdr-radio .skdr-radio-sec {
	padding: 56px 0;
}

/* Two sections in the same band read as one band: one gap between them, not two */
.skdr-radio .skdr-band--white + .skdr-band--white,
.skdr-radio .skdr-band--grey + .skdr-band--grey,
.skdr-radio .skdr-band--darkred + .skdr-band--darkred,
.skdr-radio .skdr-band--yellow + .skdr-band--yellow {
	padding-top: 0;
}

/* Bands */
.skdr-radio .skdr-band--white {
	background: var(--skdr-white);
	color: var(--skdr-gray);
	--skdr-radio-h: var(--skdr-ink);
	--skdr-radio-btn-bg: var(--skdr-red);
	--skdr-radio-btn-fg: var(--skdr-white);
	--skdr-radio-btn-hover: var(--skdr-red-h);
}

.skdr-radio .skdr-band--grey {
	background: var(--skdr-band-grey);
	color: var(--skdr-gray);
	--skdr-radio-h: var(--skdr-ink);
	--skdr-radio-btn-bg: var(--skdr-red);
	--skdr-radio-btn-fg: var(--skdr-white);
	--skdr-radio-btn-hover: var(--skdr-red-h);
}

.skdr-radio .skdr-band--darkred {
	background: var(--skdr-dark);
	color: var(--skdr-white);
	--skdr-radio-h: var(--skdr-white);
	--skdr-radio-btn-bg: var(--skdr-white);
	--skdr-radio-btn-fg: var(--skdr-dark);
	--skdr-radio-btn-hover: var(--skdr-fill);
}

.skdr-radio .skdr-band--yellow {
	background: var(--skdr-yel);
	color: var(--skdr-ink);
	--skdr-radio-h: var(--skdr-on-yel);
	--skdr-radio-btn-bg: var(--skdr-dark);
	--skdr-radio-btn-fg: var(--skdr-white);
	--skdr-radio-btn-hover: var(--skdr-ink);
}

/* Heading, intro, paragraphs */
.skdr-radio .skdr-radio-head {
	margin: 0 0 24px;
}

.skdr-radio .skdr-radio-h {
	margin: 0;
	color: var(--skdr-radio-h);
	font-size: var(--skdr-fs-h2);
	line-height: var(--skdr-lh-h2);
	font-weight: var(--skdr-fw-bold);
}

.skdr-radio .skdr-radio-intro,
.skdr-radio .skdr-radio-p {
	max-width: 68ch;
	margin: 12px 0 0;
	color: inherit;
	font-size: var(--skdr-fs-body-l);
	line-height: var(--skdr-lh-body-l);
}

.skdr-radio .skdr-radio-head + .skdr-radio-p {
	margin-top: 0;
}

.skdr-radio .skdr-radio-p + .skdr-radio-p {
	margin-top: 16px;
}

/* Button: a pill, 44px tall, with a visible focus ring */
.skdr-radio .skdr-radio-cta {
	margin: 24px 0 0;
}

.skdr-radio a.skdr-radio-btn,
.skdr-radio a.skdr-radio-btn:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 44px;
	padding: 0 24px;
	border-radius: 999px;
	background: var(--skdr-radio-btn-bg);
	color: var(--skdr-radio-btn-fg);
	font-size: var(--skdr-fs-body);
	font-weight: var(--skdr-fw-bold);
	text-decoration: none;
}

.skdr-radio a.skdr-radio-btn:hover {
	background: var(--skdr-radio-btn-hover);
	color: var(--skdr-radio-btn-fg);
}

.skdr-radio a.skdr-radio-btn:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

.skdr-radio .skdr-radio-btn--chip {
	min-height: 44px;
	padding: 0 18px;
	border: 2px solid var(--skdr-radio-btn-bg);
	background: transparent;
	color: var(--skdr-radio-h);
}

.skdr-radio a.skdr-radio-btn--chip,
.skdr-radio a.skdr-radio-btn--chip:visited {
	background: transparent;
	color: var(--skdr-radio-h);
}

.skdr-radio a.skdr-radio-btn--chip:hover {
	background: var(--skdr-radio-btn-bg);
	color: var(--skdr-radio-btn-fg);
}

/* Buttons / links */
.skdr-radio .skdr-radio-links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.skdr-radio .skdr-radio-links li {
	margin: 0;
}

/* Image + text */
.skdr-radio .skdr-radio-split {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 40px;
	align-items: center;
}

.skdr-radio .skdr-radio-split--right {
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.skdr-radio .skdr-radio-split--right .skdr-radio-pic {
	order: 2;
}

.skdr-radio .skdr-radio-split--solo {
	grid-template-columns: minmax(0, 1fr);
}

.skdr-radio .skdr-radio-pic img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

/* Callout band */
.skdr-radio .skdr-radio-callout {
	text-align: center;
}

.skdr-radio .skdr-radio-callout .skdr-radio-intro {
	margin-right: auto;
	margin-left: auto;
}

@media (max-width: 760px) {
	.skdr-radio .skdr-radio-sec {
		padding: 40px 0;
	}

	.skdr-radio .skdr-radio-h {
		font-size: var(--skdr-fs-h2-phone);
		line-height: var(--skdr-lh-h2-phone);
	}

	.skdr-radio .skdr-radio-split,
	.skdr-radio .skdr-radio-split--right {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.skdr-radio .skdr-radio-split--right .skdr-radio-pic {
		order: 0;
	}
}

/*
 * The Radio hub (#300), board RadioHub-Round2. Small text is Dark Red, never Red, so it keeps
 * 4.5:1 on the light grey band too; the Yellow on Dark Red is 5.6:1.
 */

/* Links and buttons */
.skdr-radio .skdr-hub-more {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 44px;
	color: var(--skdr-dark);
	font-size: 14px;
	line-height: 22px;
	font-weight: var(--skdr-fw-semi, 600);
	text-decoration: none;
	white-space: nowrap;
}

.skdr-radio .skdr-hub-more:hover {
	color: var(--skdr-red);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.skdr-radio .skdr-hub-dl {
	color: var(--skdr-dark);
	text-decoration: none;
}

.skdr-radio .skdr-hub-dl:hover {
	color: var(--skdr-red);
	text-decoration: underline;
}

.skdr-radio .skdr-hub-btn,
.skdr-radio .skdr-hub-btn:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 44px;
	padding: 0 20px;
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px var(--skdr-dark);
	color: var(--skdr-dark);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.skdr-radio .skdr-hub-btn:hover {
	background: var(--skdr-dark);
	color: var(--skdr-white);
}

.skdr-radio .skdr-hub-more:focus-visible,
.skdr-radio .skdr-hub-btn:focus-visible,
.skdr-radio .skdr-hub-dl:focus-visible,
.skdr-radio .skdr-hub-way:focus-visible,
.skdr-radio .skdr-hub-tile:focus-visible,
.skdr-radio .skdr-hub-arr:focus-visible,
.skdr-radio .skdr-hub-rail:focus-visible {
	outline: 2px solid var(--skdr-white);
	box-shadow: 0 0 0 4px var(--skdr-red);
}

.skdr-radio .skdr-hub-acts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	margin-top: 20px;
}

.skdr-radio .skdr-hub-hint {
	margin: 8px 0 0;
	color: var(--skdr-muted);
	font-size: 14px;
	line-height: 22px;
}

.skdr-radio .skdr-hub-kick {
	margin: 0 0 8px;
	color: var(--skdr-dark);
	font-size: 12px;
	line-height: 18px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.skdr-radio .skdr-band--darkred .skdr-hub-kick {
	color: var(--skdr-yel);
}

/* 1 · On now */
.skdr-radio .skdr-hub-cap {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--skdr-dark);
	font-size: 12px;
	line-height: 18px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.skdr-radio .skdr-hub-cap--now::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--skdr-dark);
}

.skdr-radio .skdr-hub-big {
	max-width: 900px;
	margin: 8px 0 0;
	color: var(--skdr-ink);
	font-size: 36px;
	line-height: 44px;
	font-weight: 700;
}

.skdr-radio .skdr-hub-big a {
	color: inherit;
	text-decoration: none;
}

.skdr-radio .skdr-hub-big a:hover {
	color: var(--skdr-dark);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.skdr-radio .skdr-hub-by {
	max-width: 760px;
	margin: 8px 0 0;
	font-size: 17px;
	line-height: 28px;
}

/* 2 · Recently played + Coming up: equal rows, aligned footers */
.skdr-radio .skdr-hub-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0 48px;
	align-items: stretch;
}

.skdr-radio .skdr-hub-col {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.skdr-radio .skdr-hub-h3 {
	margin: 0 0 8px;
	color: var(--skdr-ink);
	font-size: 22px;
	line-height: 30px;
	font-weight: 700;
}

.skdr-radio .skdr-hub-list {
	flex: 1;
	margin: 0;
	padding: 0;
	list-style: none;
}

.skdr-radio .skdr-hub-list > li {
	display: flex;
	align-items: center;
	gap: 14px;
	box-sizing: border-box;
	min-height: 88px;
	padding: 12px 0;
	border-top: 1px solid var(--skdr-line);
}

.skdr-radio .skdr-hub-song__art {
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 4px;
	object-fit: cover;
}

.skdr-radio .skdr-hub-song__time {
	display: block;
	color: var(--skdr-gray);
	font-size: 13px;
	line-height: 20px;
	font-weight: 600;
	font-style: italic;
}

.skdr-radio .skdr-hub-song__t,
.skdr-radio .skdr-hub-song__a,
.skdr-radio .skdr-hub-sched__n,
.skdr-radio .skdr-hub-sched__w {
	margin: 0;
}

.skdr-radio .skdr-hub-song__t {
	color: var(--skdr-ink);
	font-size: 16px;
	line-height: 22px;
	font-weight: 700;
}

.skdr-radio .skdr-hub-song__a {
	font-size: 14px;
	line-height: 20px;
	font-style: italic;
}

.skdr-radio .skdr-hub-sched__n {
	font-size: 17px;
	line-height: 22px;
	font-weight: 600;
}

.skdr-radio .skdr-hub-sched__w {
	font-size: 14px;
	line-height: 20px;
}

.skdr-radio .skdr-hub-sched__w a {
	color: var(--skdr-dark);
	text-decoration: none;
}

.skdr-radio .skdr-hub-sched__w a:hover {
	text-decoration: underline;
}

.skdr-radio .skdr-hub-ft {
	margin: 0;
	padding-top: 4px;
	border-top: 1px solid var(--skdr-line);
}

.skdr-radio .skdr-hub-tz {
	grid-column: 1 / -1;
	margin-top: 12px;
	color: var(--skdr-muted);
	font-size: 14px;
	line-height: 22px;
}

/* 3 · Shows and presenters rail */
.skdr-radio .skdr-hub-hrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	min-height: 44px;
	margin: 0 0 24px;
}

.skdr-radio .skdr-hub-hrow .skdr-radio-head {
	margin: 0;
}

.skdr-radio .skdr-hub-hlinks {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 24px;
}

.skdr-radio .skdr-hub-arrs {
	display: flex;
	gap: 8px;
	margin-left: 8px;
}

.skdr-radio .skdr-hub-arrs[hidden] {
	display: none;
}

.skdr-radio .skdr-hub-arr {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--skdr-white);
	box-shadow: 0 0 0 1px var(--skdr-line);
	color: var(--skdr-ink);
	cursor: pointer;
}

.skdr-radio .skdr-hub-arr:hover {
	background: var(--skdr-fill);
}

.skdr-radio .skdr-hub-arr[aria-disabled="true"] {
	opacity: 0.4;
	cursor: default;
}

.skdr-radio .skdr-hub-arr--prev svg {
	transform: rotate(180deg);
}

.skdr-radio .skdr-hub-rail {
	display: flex;
	gap: 24px;
	margin: 0;
	padding: 0 0 8px;
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.skdr-radio .skdr-hub-rail::-webkit-scrollbar {
	display: none;
}

.skdr-radio .skdr-hub-ti {
	flex: 0 0 192px;
	scroll-snap-align: start;
}

.skdr-radio .skdr-hub-ti--p1 {
	flex-basis: 217px;
	padding-left: 24px;
	border-left: 1px solid var(--skdr-track);
}

.skdr-radio .skdr-hub-tile {
	display: block;
	border-radius: 8px;
	text-decoration: none;
}

.skdr-radio .skdr-hub-tile__img,
.skdr-radio .skdr-hub-tile .skdr-ph {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	object-fit: cover;
}

.skdr-radio .skdr-hub-tile--p {
	text-align: center;
}

.skdr-radio .skdr-hub-tile--p .skdr-hub-tile__img,
.skdr-radio .skdr-hub-tile--p .skdr-ph {
	border-radius: 50%;
}

.skdr-radio .skdr-hub-tn {
	display: -webkit-box;
	min-height: 48px;
	margin-top: 12px;
	overflow: hidden;
	color: var(--skdr-dark);
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.skdr-radio a.skdr-hub-tile:hover .skdr-hub-tn {
	color: var(--skdr-red);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.skdr-radio .skdr-hub-tm {
	display: block;
	margin-top: 2px;
	color: var(--skdr-gray);
	font-size: 14px;
	line-height: 22px;
}

/* 4 · How to listen, compact */
.skdr-radio .skdr-hub-ways {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0 40px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.skdr-radio .skdr-hub-way {
	display: block;
	box-sizing: border-box;
	min-height: 120px;
	padding: 20px 0 24px;
	border-top: 1px solid var(--skdr-line);
	color: var(--skdr-ink);
	text-decoration: none;
}

.skdr-radio .skdr-hub-way__i {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--skdr-tint);
	color: var(--skdr-dark);
}

.skdr-radio .skdr-hub-way__t {
	display: block;
	margin-top: 14px;
	color: var(--skdr-ink);
	font-size: 20px;
	line-height: 28px;
	font-weight: 700;
}

.skdr-radio .skdr-hub-way__l {
	display: block;
	margin-top: 6px;
	font-size: 15px;
	line-height: 24px;
}

.skdr-radio a.skdr-hub-way:hover .skdr-hub-way__t {
	color: var(--skdr-dark);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* 5 · Find your way around (Dark Red) */
.skdr-radio .skdr-hub-dir {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 48px;
	margin-top: 28px;
}

.skdr-radio .skdr-hub-dir ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.skdr-radio .skdr-hub-dir__k {
	margin: 0;
	padding-bottom: 10px;
	color: var(--skdr-yel);
	font-size: 12px;
	line-height: 18px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.skdr-radio .skdr-hub-dir a,
.skdr-radio .skdr-hub-dir__soon {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	box-sizing: border-box;
	min-height: 56px;
	padding: 8px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.35);
	color: var(--skdr-white);
	font-size: 19px;
	line-height: 26px;
	font-weight: 600;
	text-decoration: none;
}

.skdr-radio .skdr-hub-dir__soon {
	color: rgba(255, 255, 255, 0.85);
}

.skdr-radio .skdr-hub-dir a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.skdr-radio .skdr-hub-dir a svg {
	flex: none;
	color: var(--skdr-yel);
}

.skdr-radio .skdr-hub-dir a:focus-visible {
	outline: 2px solid var(--skdr-dark);
	box-shadow: 0 0 0 4px var(--skdr-white);
}

.skdr-radio .skdr-hub-dir small {
	margin-left: 8px;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--skdr-yel);
	color: var(--skdr-dark);
	font-size: 11px;
	line-height: 18px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: 2px;
}

/* 6 · App strip */
.skdr-radio .skdr-hub-app .skdr-app-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	min-height: 72px;
	padding: 0 16px;
	border-radius: 12px;
	background: var(--skdr-white);
	box-shadow: 0 0 0 1px var(--skdr-line);
}

.skdr-radio .skdr-hub-app .skdr-app-strip__icon {
	display: block;
	flex: none;
	width: 40px;
	height: 40px;
	overflow: hidden;
	border-radius: 9px;
}

.skdr-radio .skdr-hub-app .skdr-app-strip__icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.skdr-radio .skdr-hub-app .skdr-app-strip__title {
	flex: 1 1 200px;
	min-width: 0;
	margin: 0;
	color: var(--skdr-ink);
	font-weight: 700;
}

/* Phones: the board's 390 column */
@media (max-width: 760px) {
	.skdr-radio .skdr-hub-big {
		font-size: 26px;
		line-height: 32px;
	}

	.skdr-radio .skdr-hub-by {
		font-size: 15px;
		line-height: 24px;
	}

	.skdr-radio .skdr-hub-split {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.skdr-radio .skdr-hub-tz {
		margin-top: -12px;
	}

	.skdr-radio .skdr-hub-arrs {
		display: none;
	}

	.skdr-radio .skdr-hub-rail {
		gap: 16px;
		margin: 0 -24px;
		padding: 0 24px 8px;
		scroll-padding-inline: 24px;
	}

	.skdr-radio .skdr-hub-ti {
		flex-basis: 140px;
	}

	.skdr-radio .skdr-hub-ti--p1 {
		flex-basis: 157px;
		padding-left: 16px;
	}

	.skdr-radio .skdr-hub-tn {
		min-height: 66px;
		margin-top: 10px;
		font-size: 15px;
		line-height: 22px;
		-webkit-line-clamp: 3;
	}

	.skdr-radio .skdr-hub-tm {
		font-size: 13px;
		line-height: 20px;
	}

	.skdr-radio .skdr-hub-ways {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		margin-top: 12px;
	}

	.skdr-radio .skdr-hub-way {
		display: flex;
		align-items: flex-start;
		gap: 14px;
		min-height: 72px;
		padding: 14px 0 16px;
	}

	.skdr-radio .skdr-hub-way__i {
		flex: none;
		margin-top: 2px;
	}

	.skdr-radio .skdr-hub-way__t {
		margin-top: 0;
		font-size: 18px;
		line-height: 26px;
	}

	.skdr-radio .skdr-hub-way__l {
		margin-top: 2px;
		font-size: 14px;
		line-height: 22px;
	}

	.skdr-radio .skdr-hub-dir {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
		margin-top: 20px;
	}

	.skdr-radio .skdr-hub-dir a,
	.skdr-radio .skdr-hub-dir__soon {
		min-height: 52px;
		font-size: 17px;
		line-height: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.skdr-radio .skdr-hub-rail {
		scroll-behavior: auto;
	}
}

/*
 * How to listen (#298). Board: HowToListen-Round2. One row per way (.skdr-way): numbered kicker,
 * headline, line, then the type's own part, beside an optional image; Smart speakers is the compact
 * Yellow band (.skdr-ask); Also available on is text chips (.skdr-also).
 */
.skdr-radio .skdr-way {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 64px;
	align-items: center;
}

/*
 * The image side. Automatic alternates down the page, right then left (#333), whatever order the
 * sections are in: every second row that has an image, counting only those, puts it on the left.
 * A row's Image side option (#336) can fix it Left (--left) or Right (--right) instead. The Left
 * rules stay separate from the alternating ones: a browser without `nth-child(… of …)` drops those
 * (every automatic image then sits on the right) and must still apply Left. Phones stack text, then
 * the image.
 */
@media (min-width: 761px) {
	.skdr-radio .skdr-way--left {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}

	.skdr-radio .skdr-way--left .skdr-way__tx {
		order: 2;
	}

	.skdr-radio .skdr-radio-sec:nth-child(even of .skdr-radio-sec:has(.skdr-way__pic)) .skdr-way:not(.skdr-way--right) {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}

	.skdr-radio .skdr-radio-sec:nth-child(even of .skdr-radio-sec:has(.skdr-way__pic)) .skdr-way:not(.skdr-way--right) .skdr-way__tx {
		order: 2;
	}
}

.skdr-radio .skdr-way--solo {
	grid-template-columns: minmax(0, 1fr);
}

.skdr-radio .skdr-way__n {
	margin: 0;
	color: var(--skdr-red);
	font-size: 15px;
	line-height: 20px;
	font-weight: var(--skdr-fw-bold);
	letter-spacing: var(--skdr-ls-label);
	text-transform: uppercase;
}

/* Red on the light grey band is 4.47:1, under 4.5 for this 15px text: Dark Red there (8.0:1).
   The same for the "More about the app" hover. Review of #313, 27 Oct. */
.skdr-radio .skdr-band--grey .skdr-way__n,
.skdr-radio .skdr-band--grey a.skdr-way__more:hover {
	color: var(--skdr-dark);
}

.skdr-radio .skdr-way__h {
	margin: 10px 0 0;
	color: var(--skdr-ink);
	font-size: 40px;
	line-height: 48px;
	font-weight: var(--skdr-fw-bold);
	letter-spacing: -0.01em;
}

.skdr-radio .skdr-way__l {
	max-width: 560px;
	margin: 14px 0 0;
	font-size: var(--skdr-fs-body-l);
	line-height: 30px;
}

.skdr-radio .skdr-way__hint {
	margin: 10px 0 0;
	color: var(--skdr-muted);
	font-size: var(--skdr-fs-small);
	line-height: var(--skdr-lh-small);
}

.skdr-radio .skdr-way__acts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	margin-top: 28px;
}

.skdr-radio .skdr-way__hint {
	margin-top: 10px;
}

.skdr-radio a.skdr-way__more,
.skdr-radio a.skdr-way__more:visited {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: var(--skdr-tap);
	color: var(--skdr-dark);
	font-size: 15px;
	line-height: 22px;
	font-weight: var(--skdr-fw-semibold);
	text-decoration: none;
	white-space: nowrap;
}

.skdr-radio a.skdr-way__more:hover {
	color: var(--skdr-red);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.skdr-radio a.skdr-way__more:focus-visible,
.skdr-radio a.skdr-also__chip:focus-visible,
.skdr-radio .skdr-also__help a:focus-visible {
	outline: 3px solid var(--skdr-dark);
	outline-offset: 3px;
}

.skdr-radio .skdr-way__feat,
.skdr-radio .skdr-way__steps {
	margin: 0;
	padding: 0;
	list-style: none;
}

.skdr-radio .skdr-way__feat {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 28px;
	max-width: 600px;
	margin-top: 22px;
}

.skdr-radio .skdr-way__feat li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--skdr-ink);
	font-size: var(--skdr-fs-body);
	line-height: 24px;
	font-weight: var(--skdr-fw-medium);
}

.skdr-radio .skdr-way__feat svg {
	flex: none;
	margin-top: 2px;
	color: var(--skdr-red);
}

.skdr-radio .skdr-way__steps {
	max-width: 560px;
	margin-top: 24px;
}

.skdr-radio .skdr-way__steps li {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 64px;
	padding: 10px 0;
	border-top: 1px solid var(--skdr-line);
	color: var(--skdr-ink);
	font-size: 17px;
	line-height: 26px;
}

.skdr-radio .skdr-way__steps li:last-child {
	border-bottom: 1px solid var(--skdr-line);
}

.skdr-radio .skdr-way__steps i {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--skdr-yel);
	color: var(--skdr-on-yel);
	font-style: normal;
	font-size: 16px;
	font-weight: var(--skdr-fw-bold);
}

/* A tall image (a phone mockup) is held to the screenshot's height and centred, not stretched to the column (#336). */
.skdr-radio .skdr-way__pic {
	display: flex;
	justify-content: center;
}

.skdr-radio .skdr-way__pic img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 490px;
	border-radius: var(--skdr-r-panel);
}

.skdr-radio .skdr-way__pic--phone img {
	width: auto;
	max-width: 240px;
	max-height: 490px;
	border-radius: 0;
}

/* The row's Image size option: how tall the image may be (Medium is the rules above) */
.skdr-radio .skdr-way--img-small .skdr-way__pic img {
	max-width: 70%;
	max-height: 300px;
}

.skdr-radio .skdr-way--img-large .skdr-way__pic img {
	max-width: 100%;
	max-height: 640px;
}

/* While the player plays (#339), "Open player" and its note start where Listen live was (the header's are right-aligned) */
.skdr-radio .skdr-way__acts .skdr-listen-ctl {
	align-items: flex-start;
}

/*
 * This website's player drawing (#339; sketch press-play-5): the website greyed out, and the
 * pop-up player window, 9:16, rising out of the row's bottom edge as the phone does on Download
 * the app. The section gives up its bottom padding so the drawing stands on the edge, and the
 * drawing cuts off the foot of the window, which sits a quarter of its height below.
 */
.skdr-radio .skdr-radio-sec:has(.skdr-pop) {
	padding-bottom: 0;
}

.skdr-radio .skdr-way:has(.skdr-pop) .skdr-way__tx {
	align-self: center;
	padding-bottom: 56px;
}

.skdr-radio .skdr-way__pic--pop {
	display: block;
	align-self: end;
}

.skdr-radio .skdr-pop {
	position: relative;
	height: 420px;
	overflow: hidden;
}

.skdr-radio .skdr-pop__site {
	position: absolute;
	top: 0;
	left: 0;
	width: 76%;
	height: 58%;
	border: 2px solid var(--skdr-track);
	border-radius: 10px;
	background: var(--skdr-white);
	overflow: hidden;
}

.skdr-radio .skdr-pop__dots {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 24px;
	padding: 0 10px;
	border-bottom: 2px solid var(--skdr-line);
	background: var(--skdr-fill);
}

.skdr-radio .skdr-pop__dots i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--skdr-line);
}

.skdr-radio .skdr-pop__nav {
	display: block;
	height: 12px;
	background: var(--skdr-red);
}

.skdr-radio .skdr-pop__lines {
	display: block;
	padding: 4px 14px;
}

.skdr-radio .skdr-pop__lines i {
	display: block;
	height: 10px;
	margin-top: 10px;
	border-radius: 5px;
	background: var(--skdr-fill);
}

.skdr-radio .skdr-pop__lines i:nth-child(1) { width: 46%; }
.skdr-radio .skdr-pop__lines i:nth-child(2) { width: 82%; }
.skdr-radio .skdr-pop__lines i:nth-child(3) { width: 74%; }
.skdr-radio .skdr-pop__lines i:nth-child(4) { width: 60%; }
.skdr-radio .skdr-pop__lines i:nth-child(5) { width: 78%; }

.skdr-radio .skdr-pop__arrow {
	position: absolute;
	top: 64%;
	left: 6%;
	width: 28%;
	height: 16%;
	color: var(--skdr-dark);
}

.skdr-radio .skdr-pop__label {
	position: absolute;
	top: 84%;
	left: 0;
	color: var(--skdr-dark);
	font-size: 13px;
	font-weight: var(--skdr-fw-semibold);
	line-height: 18px;
}

.skdr-radio a.skdr-pop__win {
	position: absolute;
	right: 12px;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: 224px;
	aspect-ratio: 9 / 16;
	border: 2px solid var(--skdr-dark);
	border-radius: 14px;
	background: var(--skdr-dark);
	box-shadow: 0 14px 30px rgba(26, 26, 26, 0.18);
	color: var(--skdr-white);
	text-decoration: none;
	transform: translateY(26%);
	overflow: hidden;
}

.skdr-radio .skdr-pop__bar {
	display: flex;
	flex: none;
	align-items: center;
	gap: 5px;
	height: 28px;
	padding: 0 10px;
	background: var(--skdr-yel);
	color: var(--skdr-dark);
	font-size: 11px;
	font-weight: var(--skdr-fw-semibold);
	line-height: 1;
	white-space: nowrap;
}

.skdr-radio .skdr-pop__bar i {
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--skdr-dark);
	opacity: 0.35;
}

.skdr-radio .skdr-pop__bar span {
	margin-left: 3px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.skdr-radio .skdr-pop__body {
	display: flex;
	flex-direction: column;
	padding: 18px 16px 16px;
}

.skdr-radio .skdr-pop__k {
	color: var(--skdr-yel);
	font-size: 11px;
	font-weight: var(--skdr-fw-bold);
	line-height: 16px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.skdr-radio .skdr-pop__k [data-skdr-pill="open"]:not([hidden]) {
	display: inline-flex;
	align-items: flex-end;
	gap: 8px;
}

/* A still equaliser: nothing in the drawing moves */
.skdr-radio .skdr-pop__eq {
	display: inline-flex;
	align-items: flex-end;
	gap: 2px;
	height: 11px;
}

.skdr-radio .skdr-pop__eq b {
	width: 3px;
	height: 6px;
	background: currentColor;
}

.skdr-radio .skdr-pop__eq b:nth-child(2) {
	height: 11px;
}

.skdr-radio .skdr-pop__eq b:nth-child(3) {
	height: 8px;
}

/* A long title or artist is trimmed, so the show's line stays above the row's edge */
.skdr-radio .skdr-pop__big {
	display: -webkit-box;
	margin-top: 8px;
	overflow: hidden;
	font-size: 24px;
	font-weight: var(--skdr-fw-bold);
	line-height: 30px;
	letter-spacing: -0.01em;
	overflow-wrap: anywhere;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.skdr-radio .skdr-pop__sub {
	margin-top: 4px;
	overflow: hidden;
	color: rgba(255, 255, 255, 0.85);
	font-size: 14px;
	line-height: 20px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.skdr-radio .skdr-pop__foot {
	margin-top: 16px;
	padding-top: 10px;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	color: var(--skdr-yel);
	font-size: 13px;
	font-weight: var(--skdr-fw-semibold);
	line-height: 19px;
}

/* Smart speakers: the compact Yellow band, no icon (Kai, 27 Oct) */
.skdr-radio .skdr-radio-sec--listen_speakers {
	padding: 40px 0;
}

.skdr-radio .skdr-ask {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 40px;
	align-items: center;
	color: var(--skdr-on-yel);
}

.skdr-radio .skdr-band--yellow .skdr-way__n {
	color: var(--skdr-on-yel);
}

.skdr-radio .skdr-ask__h {
	margin: 6px 0 0;
	color: var(--skdr-on-yel);
	font-size: 32px;
	line-height: 40px;
	font-weight: var(--skdr-fw-bold);
}

.skdr-radio .skdr-ask__q {
	margin: 0;
	color: var(--skdr-on-yel);
	font-size: 36px;
	line-height: 44px;
	font-weight: var(--skdr-fw-bold);
}

.skdr-radio .skdr-ask__q + .skdr-ask__q {
	margin-top: 4px;
}

.skdr-radio .skdr-ask__l {
	margin: 4px 0 0;
	color: var(--skdr-on-yel);
	font-size: var(--skdr-fs-body);
	line-height: 24px;
	font-weight: var(--skdr-fw-semibold);
}

/* Also available on */
.skdr-radio .skdr-radio-sec--listen_also {
	padding: 48px 0 40px;
}

.skdr-radio .skdr-also__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
}

.skdr-radio .skdr-also__h {
	margin: 0;
	color: var(--skdr-ink);
	font-size: 22px;
	line-height: 30px;
	font-weight: var(--skdr-fw-bold);
}

.skdr-radio .skdr-also__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.skdr-radio a.skdr-also__chip,
.skdr-radio a.skdr-also__chip:visited {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	min-height: var(--skdr-tap);
	padding: 0 20px;
	border-radius: 22px;
	background: var(--skdr-white);
	box-shadow: inset 0 0 0 1px var(--skdr-dark);
	color: var(--skdr-dark);
	font-size: var(--skdr-fs-body);
	line-height: 22px;
	font-weight: var(--skdr-fw-semibold);
	text-decoration: none;
	white-space: nowrap;
}

.skdr-radio a.skdr-also__chip:hover {
	background: var(--skdr-dark);
	color: var(--skdr-white);
}

.skdr-radio .skdr-also__help {
	margin: 24px 0 0;
	font-size: 15px;
	line-height: 24px;
}

.skdr-radio .skdr-also__help a {
	color: var(--skdr-dark);
	font-weight: var(--skdr-fw-semibold);
}

@media (max-width: 760px) {
	.skdr-radio .skdr-way {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.skdr-radio .skdr-way__h {
		margin-top: 6px;
		font-size: 28px;
		line-height: 36px;
	}

	.skdr-radio .skdr-way__l {
		margin-top: 8px;
		font-size: var(--skdr-fs-body);
		line-height: var(--skdr-lh-body);
	}

	.skdr-radio .skdr-way__acts {
		margin-top: 20px;
	}

	.skdr-radio .skdr-way__feat {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
		margin-top: 16px;
	}

	.skdr-radio .skdr-way__steps li {
		min-height: 56px;
		font-size: 15px;
		line-height: 24px;
	}

	.skdr-radio .skdr-way__pic img {
		max-height: 360px;
	}

	.skdr-radio .skdr-way__pic--phone img {
		max-width: 150px;
		max-height: 280px;
	}

	.skdr-radio .skdr-way:has(.skdr-pop) .skdr-way__tx {
		padding-bottom: 0;
	}

	.skdr-radio .skdr-pop {
		height: 300px;
	}

	.skdr-radio .skdr-pop__site {
		width: 80%;
		height: 46%;
	}

	.skdr-radio .skdr-pop__arrow {
		top: 52%;
		left: 2%;
		width: 24%;
		height: 14%;
	}

	.skdr-radio .skdr-pop__label {
		top: 78%;
	}

	.skdr-radio a.skdr-pop__win {
		right: 4px;
		width: 176px;
		border-radius: 12px;
	}

	/* Room for the player's name in the narrow window */
	.skdr-radio .skdr-pop__bar i {
		display: none;
	}

	.skdr-radio .skdr-pop__body {
		padding: 14px 13px 13px;
	}

	.skdr-radio .skdr-pop__big {
		font-size: 19px;
		line-height: 25px;
		-webkit-line-clamp: 2;
	}

	.skdr-radio .skdr-pop__sub {
		font-size: 13px;
		line-height: 19px;
	}

	.skdr-radio .skdr-pop__foot {
		font-size: 12px;
		line-height: 17px;
	}

	.skdr-radio .skdr-way--img-small .skdr-way__pic img {
		max-height: 220px;
	}

	.skdr-radio .skdr-way--img-large .skdr-way__pic img {
		max-height: 440px;
	}

	.skdr-radio .skdr-radio-sec--listen_speakers {
		padding: 28px 0;
	}

	.skdr-radio .skdr-ask {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.skdr-radio .skdr-ask__h {
		font-size: 26px;
		line-height: 34px;
	}

	.skdr-radio .skdr-ask__q {
		font-size: 26px;
		line-height: 34px;
	}

	.skdr-radio .skdr-radio-sec--listen_also {
		padding: 32px 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.skdr-radio a.skdr-also__chip {
		transition: none;
	}
}