/* ==========================================================================
   AVAVA Station — the design's pieces made of WordPress blocks
   A paragraph, a separator, an image or a button block stands where the HTML template has a
   span, a rule, a logo or a button; these rules give the block the template's look. Loaded on
   the site and in the editor's canvas alike, so both look the same.
   ========================================================================== */

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

/* The top line: the dot before the studio line is drawn, not read out. */
:is(.avava-legacy, .editor-styles-wrapper) .hd-top > .hd-after-dot::before {
	content: "·" / "";
	margin-right: clamp(12px, 1.6vw, 28px);
	color: var(--i28);
}

/* The rule under it is a Separator block. */
:is(.avava-legacy, .editor-styles-wrapper) hr.hd-rule {
	margin: 0;
	border: 0;
}

/* The logo: two Image blocks (dark and light) inside the design's .logo. */
:is(.avava-legacy, .editor-styles-wrapper) .logo .wp-block-image {
	margin: 0;
}

:is(.avava-legacy, .editor-styles-wrapper) .logo .wp-block-image a {
	display: block;
}

/* The colour switch and Listen Live are Button blocks: their wrapper wears the design's look and the
   button inside covers it, so the whole pill is the button. */
:is(.avava-legacy, .editor-styles-wrapper) .hd-main > .wp-block-buttons {
	display: contents;
}

:is(.avava-legacy, .editor-styles-wrapper) .wp-block-button:is(.theme, .btn-live, .cn-copy) {
	position: relative;
}

/* WordPress lines Button blocks up as inline boxes with no margin; these two keep the design's. */
:is(.avava-legacy, .editor-styles-wrapper) .hd-main .wp-block-buttons > .wp-block-button.theme {
	display: grid;
	margin-left: clamp(6px, .8vw, 14px);
}

:is(.avava-legacy, .editor-styles-wrapper) .wp-block-buttons > .wp-block-button.btn-live {
	display: flex;
}

:is(.avava-legacy, .editor-styles-wrapper) .hd-main .wp-block-buttons > .wp-block-button.btn-live {
	margin-left: clamp(8px, 1vw, 18px);
}

:is(.avava-legacy, .editor-styles-wrapper) .wp-block-button:is(.theme, .btn-live, .cn-copy) > .wp-block-button__link {
	all: unset;
	cursor: pointer;
}

:is(.avava-legacy, .editor-styles-wrapper) .wp-block-button:is(.theme, .btn-live, .cn-copy) > .wp-block-button__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

:is(.avava-legacy, .editor-styles-wrapper) .wp-block-button:is(.theme, .btn-live, .cn-copy):has(> .wp-block-button__link:focus-visible) {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

/* The colour switch shows a sun (light) or a moon (dark) drawn before its words, which stay for
   screen readers. */
:is(.avava-legacy, .editor-styles-wrapper) .wp-block-button.theme > .wp-block-button__link {
	font-size: 0;
}

:is(.avava-legacy, .editor-styles-wrapper) .wp-block-button.theme > .wp-block-button__link::before {
	content: "";
	display: block;
	width: 19px;
	height: 19px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.2' fill='%23000' stroke='none'/%3E%3Cpath d='M12 2.6v2.6M12 18.8v2.6M2.6 12h2.6M18.8 12h2.6M5.4 5.4l1.9 1.9M16.7 16.7l1.9 1.9M18.6 5.4l-1.9 1.9M7.3 16.7l-1.9 1.9'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.2' fill='%23000' stroke='none'/%3E%3Cpath d='M12 2.6v2.6M12 18.8v2.6M2.6 12h2.6M18.8 12h2.6M5.4 5.4l1.9 1.9M16.7 16.7l1.9 1.9M18.6 5.4l-1.9 1.9M7.3 16.7l-1.9 1.9'/%3E%3C/svg%3E") center / contain no-repeat;
}

:root[data-theme="dark"] :is(.avava-legacy, .editor-styles-wrapper) .wp-block-button.theme > .wp-block-button__link::before {
	width: 18px;
	height: 18px;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M20.4 14.3A8.6 8.6 0 0 1 9.7 3.6a8.6 8.6 0 1 0 10.7 10.7z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M20.4 14.3A8.6 8.6 0 0 1 9.7 3.6a8.6 8.6 0 1 0 10.7 10.7z'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   The footer
   -------------------------------------------------------------------------- */

/* The sheet's link columns are Navigation blocks, set as the design's plain column of links. */
:is(.avava-legacy, .editor-styles-wrapper) .sheet-col .wp-block-navigation {
	font: 400 12px / normal 'DM Mono', monospace;
	letter-spacing: .1em;
	text-transform: uppercase;
}

:is(.avava-legacy, .editor-styles-wrapper) .sheet-col .wp-block-navigation .wp-block-navigation__container {
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
}

:is(.avava-legacy, .editor-styles-wrapper) .sheet-col .wp-block-navigation-item a,
:is(.avava-legacy, .editor-styles-wrapper) .sheet-col .wp-block-navigation-item.current-menu-item > a {
	display: block;
	padding: 0;
	border: 0;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: rgba(255, 255, 255, .68);
}

:is(.avava-legacy, .editor-styles-wrapper) .sheet-col .wp-block-navigation-item a:hover {
	color: var(--accent-text);
}

/* The bottom line: the dots between its links are drawn, not read out. */
:is(.avava-legacy, .editor-styles-wrapper) .foot-bottom > :has(+ .foot-link)::after {
	content: "·" / "";
	margin-left: 14px;
	letter-spacing: 0;
	color: var(--i28);
}

/* --------------------------------------------------------------------------
   Separators and images that stand for the design's rules and pictures
   -------------------------------------------------------------------------- */

/* A Separator block keeps only the design's own look: no browser margin, border or colour. */
:is(.avava-legacy, .editor-styles-wrapper) hr.wp-block-separator:is(.hero-seam, .band-needle) {
	margin: 0;
	border: 0;
}

/* (The design gives Separator blocks width: auto; these two keep their own.) */
:is(.avava-legacy, .editor-styles-wrapper) hr.wp-block-separator.hero-seam {
	width: 1px;
}

:is(.avava-legacy, .editor-styles-wrapper) hr.wp-block-separator.band-needle {
	width: 2px;
}

:is(.avava-legacy, .editor-styles-wrapper) hr.wp-block-separator.divider {
	border: 0;
}

/* --------------------------------------------------------------------------
   Home: the hero
   -------------------------------------------------------------------------- */

/* The hero's picture (light and dark) is a pair of Image blocks filling the hero. */
:is(.avava-legacy, .editor-styles-wrapper) .wp-block-image.hero-art {
	margin: 0;
}

:is(.avava-legacy, .editor-styles-wrapper) .wp-block-image.hero-art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   Pieces every page of the design repeats
   -------------------------------------------------------------------------- */

/* The breadcrumbs are one paragraph inside the design's nav: its links and slashes keep their gap. */
:is(.avava-legacy, .editor-styles-wrapper) .crumbs > p {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* The dial under a page's title: its rule is a Separator block (the script draws the ticks). */
:is(.avava-legacy, .editor-styles-wrapper) .pg-scale > hr.wp-block-separator.line {
	margin: 0;
	border: 0;
}

/* A photo in the design's frame: the Image block fills it; the corner marks are drawn here. */
:is(.avava-legacy, .editor-styles-wrapper) .frame > .wp-block-image {
	margin: 0;
}

:is(.avava-legacy, .editor-styles-wrapper) .frame::before {
	content: "";
	position: absolute;
	inset: 10px;
	z-index: 1;
	pointer-events: none;
	--c: var(--i35);
	background:
		linear-gradient(var(--c), var(--c)) left top / 14px 1px no-repeat,
		linear-gradient(var(--c), var(--c)) left top / 1px 14px no-repeat,
		linear-gradient(var(--c), var(--c)) right top / 14px 1px no-repeat,
		linear-gradient(var(--c), var(--c)) right top / 1px 14px no-repeat,
		linear-gradient(var(--c), var(--c)) left bottom / 14px 1px no-repeat,
		linear-gradient(var(--c), var(--c)) left bottom / 1px 14px no-repeat,
		linear-gradient(var(--c), var(--c)) right bottom / 14px 1px no-repeat,
		linear-gradient(var(--c), var(--c)) right bottom / 1px 14px no-repeat;
}

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */

/* The gear cards: their number and foot are paragraphs now, kept at the line height they had. */
:is(.avava-legacy, .editor-styles-wrapper) .gear p:is(.no, .f) {
	line-height: normal;
}

/* The gear in use carries the design's pulsing dot at the end of its first row. */
:is(.avava-legacy, .editor-styles-wrapper) .gear--on > .row::after {
	content: "";
	display: inline-block;
	flex: none;
	width: 6px;
	height: 6px;
	margin-left: auto;
	border-radius: 50%;
	background: var(--accent);
	animation: avpulse 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	:is(.avava-legacy, .editor-styles-wrapper) .gear--on > .row::after {
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

/* "Copy the line" is a Button block, laid out in the description box as the design's button. */
:is(.avava-legacy, .editor-styles-wrapper) .cn-desc > .wp-block-buttons {
	display: contents;
}

/* --------------------------------------------------------------------------
   A journal entry
   -------------------------------------------------------------------------- */

/* The timeline's rail (its line and dot) is drawn by the step itself, in the grid's rail column. */
:is(.avava-legacy, .editor-styles-wrapper) .bp-node::before,
:is(.avava-legacy, .editor-styles-wrapper) .bp-node::after {
	content: "";
	grid-column: 2;
	grid-row: 1;
	justify-self: center;
}

/* The line: from 8px below the step's top to the next step. */
:is(.avava-legacy, .editor-styles-wrapper) .bp-node::before {
	align-self: stretch;
	width: 2px;
	margin: 8px 0 -22px;
	background: var(--i22);
}

:is(.avava-legacy, .editor-styles-wrapper) .bp-node--on::before {
	background: var(--accent);
}

:is(.avava-legacy, .editor-styles-wrapper) .bp-node--last::before {
	align-self: start;
	height: 22px;
	margin-bottom: 0;
}

/* The dot, over the line. */
:is(.avava-legacy, .editor-styles-wrapper) .bp-node::after {
	align-self: start;
	position: relative;
	width: 10px;
	height: 10px;
	margin-top: 5px;
	border-radius: 50%;
	background: var(--i55);
}

:is(.avava-legacy, .editor-styles-wrapper) .bp-node--on::after {
	width: 12px;
	height: 12px;
	margin-top: 4px;
	background: var(--accent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
}

@media (max-width: 760px) {
	:is(.avava-legacy, .editor-styles-wrapper) .bp-node::before,
	:is(.avava-legacy, .editor-styles-wrapper) .bp-node::after {
		grid-column: 1;
		grid-row: 2;
	}
}

/* A post's date and author: the dot between them is drawn, not read out. */
:is(.avava-legacy, .editor-styles-wrapper) .entry-meta > .wp-block-post-date:not(:last-child)::after {
	content: "·" / "";
	margin-left: 10px;
}

/* The follow buttons are links now (to the station's accounts), drawn as the design's buttons. */
:is(.avava-legacy, .editor-styles-wrapper) a.cn-follow {
	display: inline-block;
}

/* About: the support tiers are links to Donate (sum and plan picked), drawn as the design's buttons. */
:is(.avava-legacy, .editor-styles-wrapper) .tier > a {
	padding: 13px 18px;
	font-family: var(--wp--preset--font-family--dm-mono);
	font-size: 12px;
	letter-spacing: .16em;
	white-space: nowrap;
	text-align: center;
}

/* (The picked tier, .ct-btn, keeps the design's filled look.) */
:is(.avava-legacy, .editor-styles-wrapper) .tier > a:not(.ct-btn) {
	border: 1px solid var(--i28);
	color: var(--ink);
}

:is(.avava-legacy, .editor-styles-wrapper) .tier > a:not(.ct-btn):hover {
	border-color: var(--accent);
	color: var(--accent-text);
}

/* --------------------------------------------------------------------------
   Readable text (WCAG AA, 4.5:1): the places a text token alone does not reach —
   text on a lighter cell, on the accent fill, dimmed by opacity, or on a part that keeps one
   scheme whatever the page's (the footer's log sheet and the tuner are always dark, the hosts'
   polaroids always light).
   -------------------------------------------------------------------------- */
.avava-legacy .sheet {
	--accent-text: var(--accent-glow);
}

.avava-legacy :is(.host-slot, .host-meta) {
	--accent-text: var(--accent-deep);
}

.avava-legacy .floating-player-card :is(.live-status, .player-now-playing, .rtp-vu-eq-toggle-link, .eq-status-indicator .status-text, .eq-status-indicator[aria-pressed] .status-text) {
	color: var(--accent-glow);
}

/* Counts and stamps dimmed with opacity: drawn at full strength, their colour already quieter. */
.avava-legacy :is(.dj-chip, .gs-city, .wg-chip, .pa-chip) .c,
.avava-legacy .xp-past .y,
.avava-legacy .sf-up > span,
.avava-legacy .stamp .no,
.avava-legacy .pv-stamp-d,
.avava-legacy .ad-stamp .mono:last-child {
	opacity: 1;
}

/* Text on the accent fill is plain white (4.5:1 on the brand colour; translucent white is not). */
.avava-legacy :is(.note-card .lbl, .note-card .date),
.avava-legacy .ch.is-on :is(.ch-freq .fm, .ch-now .lbl, .ch-foot .genre, .ch-foot .lis, .ch-host),
.avava-legacy :is(.wg-b.is-live .wg-ct .mono, .wg-b.is-live .serif, .sw-b.is-on .sw-ct .mono, .sw-b.is-on .serif),
.avava-legacy .dn-day.is-on .mono {
	color: #fff;
}

/* Dark scheme: the week's and the days' cells are a step lighter than the page (the picked or live
   cell, filled with the accent, keeps its white). */
:root[data-theme="dark"] .avava-legacy :is(.wg-b:not(.is-live) .wg-ct .mono, .sw-b:not(.is-on) .sw-ct, .sw-b:not(.is-on) .sw-ct .mono, .dn-day:not(.is-open) .mono, .td-bar.is-past .mono, .td-gl .mono) {
	color: rgba(255, 255, 255, .6);
}

:root[data-theme="dark"] .avava-legacy .na-blk:not(.is-on) .mono {
	color: rgba(255, 255, 255, .72);
}

/* A day open for a night on Donate is filled with the accent: its number is white. */
.avava-legacy .dn-day.is-open .mono {
	color: #fff;
}

/* Dark scheme: a picked chip or cell sits on an accent tint, a step lighter: its accent text too. */
:root[data-theme="dark"] .avava-legacy :is(.ps-chip.is-on, .pa-chip.is-on, .sw-chip.is-on, .wg-chip.is-on, .cl-chip.is-on, .sf-up.is-on, .sp-arrows .is-on, .td-bar.is-live, .pv-cell--on, .tm-cell--on) {
	--accent-text: var(--accent-soft);
}

/* The map's foot is always dark. */
.avava-legacy .cn-map-f {
	--accent-text: var(--accent-glow);
}

.avava-legacy :is(.ar-th, .pa-th) button > span {
	opacity: 1;
}

/* DJs: the part of a set on air is filled with the accent; its name in the bar is white (the
   design's rule for the row's last label painted it in the accent too, invisible on the fill). */
.avava-legacy .bt-parts li.is-on .bar .mono:last-child {
	color: #fff;
}

:root[data-theme="dark"] .avava-legacy .al-chap .abar .mono {
	color: #fff;
}

/* --------------------------------------------------------------------------
   The tuner card's controls show where the keyboard is (the card's own style takes the outline away
   for the mouse; :focus-visible brings it back only for the keyboard).
   -------------------------------------------------------------------------- */
.avava-legacy .floating-player-card :is(button, input, [role="button"], [role="slider"], a):focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   The Search block (search results, 404, any page it is put on): the design's field — the words on
   a line, the label in mono, the ember button — in both schemes.
   -------------------------------------------------------------------------- */
.avava-legacy .wp-block-search__label {
	display: block;
	margin-bottom: 10px;
	font: 400 12px / 1.4 var(--wp--preset--font-family--dm-mono);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--t55);
}

.avava-legacy .wp-block-search__inside-wrapper {
	gap: 16px;
	padding: 0;
	border: 0;
}

.avava-legacy .wp-block-search__input {
	min-width: 0;
	padding: 12px 0;
	border: 0;
	border-bottom: 2px solid var(--ink);
	border-radius: 0;
	background: transparent;
	color: var(--ink);
	font: 400 clamp(18px, 1.6vw, 22px) / 1.2 var(--wp--preset--font-family--archivo);
}

.avava-legacy .wp-block-search__input::placeholder {
	color: var(--t45);
}

.avava-legacy .wp-block-search__input:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 4px;
}

.avava-legacy .wp-block-search__button {
	margin: 0;
	padding: 13px 22px;
	border: 0;
	border-radius: 0;
	background: var(--accent);
	color: #fff;
	font: 400 12px / 1 var(--wp--preset--font-family--dm-mono);
	letter-spacing: .2em;
	text-transform: uppercase;
	white-space: nowrap;
}

.avava-legacy .wp-block-search__button:hover {
	background: var(--accent-hot);
}

:root:not([data-theme="dark"]) .avava-legacy .wp-block-search__button:hover {
	background: var(--ink);
}

.avava-legacy .wp-block-search__button:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   The footer's social links: the core Social Icons block worn as the design's mono words
   (the labels show, the icons and the block's own chips step aside).
   -------------------------------------------------------------------------- */
:is(.avava-legacy, .editor-styles-wrapper) .sheet-social.wp-block-social-links {
	gap: 12px;
	margin: 0;
	padding: 4px 0 0;
	font-size: inherit;
}

:is(.avava-legacy, .editor-styles-wrapper) .sheet-social .wp-social-link {
	margin: 0;
	padding: 0;
	font-size: 12px;
	line-height: normal;
	border-radius: 0;
	background: none;
	color: inherit;
	transition: none;
}

:is(.avava-legacy, .editor-styles-wrapper) .sheet-social .wp-social-link:hover {
	transform: none;
}

:is(.avava-legacy, .editor-styles-wrapper) .sheet-social.wp-block-social-links .wp-social-link .wp-block-social-link-anchor {
	padding: 0;
	font: 400 12px / normal 'DM Mono', monospace;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
	display: inline;
}

:is(.avava-legacy, .editor-styles-wrapper) .sheet-social.wp-block-social-links .wp-social-link .wp-block-social-link-anchor:hover {
	color: var(--accent-text);
}

:is(.avava-legacy, .editor-styles-wrapper) .sheet-social .wp-block-social-link-anchor svg {
	display: none;
}

:is(.avava-legacy, .editor-styles-wrapper) .sheet-social.wp-block-social-links .wp-social-link .wp-block-social-link-label {
	margin: 0;
	font: inherit;
}

/* --------------------------------------------------------------------------
   Without the companion plugin the header's top line is the site's tagline, and the footer's
   columns are the site's pages, its latest posts and its name: the same look, core blocks.
   -------------------------------------------------------------------------- */
:is(.avava-legacy, .editor-styles-wrapper) .hd-top .hd-tagline {
	margin: 0;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}

:is(.avava-legacy, .editor-styles-wrapper) .sheet-col .sheet-latest {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font: 400 12px / normal 'DM Mono', monospace;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin: 0;
	padding: 0;
	list-style: none;
}

:is(.avava-legacy, .editor-styles-wrapper) .sheet-col .sheet-latest li {
	margin: 0;
}

:is(.avava-legacy, .editor-styles-wrapper) .sheet-col .sheet-latest a {
	display: block;
	padding: 0;
	color: rgba(255, 255, 255, .68);
	text-decoration: none;
}

:is(.avava-legacy, .editor-styles-wrapper) .sheet-col .sheet-latest a:hover {
	color: var(--accent-text);
}

:is(.avava-legacy, .editor-styles-wrapper) .sheet-col--studio .sheet-site {
	margin: 0 0 10px;
}

:is(.avava-legacy, .editor-styles-wrapper) .sheet-col--studio .wp-block-site-tagline {
	margin: 0 0 18px;
}

/* --------------------------------------------------------------------------
   The header's Site Logo block. The design's mark keeps its drawn size (.logo img); a logo set in
   the editor keeps its own proportions at the mark's height.
   -------------------------------------------------------------------------- */
:is(.avava-legacy, .editor-styles-wrapper) .logo .wp-block-site-logo {
	margin: 0;
	line-height: 0;
}

:is(.avava-legacy, .editor-styles-wrapper) .logo .wp-block-site-logo:not(.is-design-logo) img {
	width: auto;
	max-width: min(320px, 46vw);
	height: 60px;
	object-fit: contain;
}

@media (min-width: 1101px) and (max-width: 2000px) {
	:is(.avava-legacy, .editor-styles-wrapper) .logo .wp-block-site-logo:not(.is-design-logo) img {
		height: 50px;
	}
}

@media (max-width: 760px) {
	:is(.avava-legacy, .editor-styles-wrapper) .logo .wp-block-site-logo:not(.is-design-logo) img {
		height: 42px;
	}
}

/* --------------------------------------------------------------------------
   A journal entry: the post's title is the page's h1 (in the entry's head); the big words in the
   intro above it are the entry's headline, drawn as the design's page title.
   -------------------------------------------------------------------------- */
:is(.avava-legacy, .editor-styles-wrapper) .pg-title .pg-h {
	margin: 0;
	font: 700 clamp(34px, 5.4vw, 96px) / .92 var(--wp--preset--font-family--bricolage);
	letter-spacing: -.045em;
	text-transform: uppercase;
}

@media (min-width: 1101px) and (max-width: 2000px) {
	:is(.avava-legacy, .editor-styles-wrapper) .pg-title .pg-h {
		font-size: clamp(34px, 3.9vw, 72px);
	}
}

/* --------------------------------------------------------------------------
   Less motion when the visitor asks for it: every animation and transition of the design ends at
   once, in its final state (the rules above switch off the looping ones one by one).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.avava-legacy *,
	.avava-legacy *::before,
	.avava-legacy *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* The curtain with the site's own logo in place of the design's mark. */
.avava-legacy .pre .pre-logo {
	display: block;
	width: auto;
	max-width: min(281px, 70vw);
	height: 70px;
	object-fit: contain;
}

/* --------------------------------------------------------------------------
   Small text on the ember fill, readable at 4.5:1: the hour on air of a station's band, the "now"
   flag of the schedule's day, the stamp of a perk that is reached (on its dark plate).
   -------------------------------------------------------------------------- */
:is(.avava-legacy, .editor-styles-wrapper) .sd-band .hb--on .mono {
	color: #000;
}

:root[data-theme="dark"] :is(.avava-legacy, .editor-styles-wrapper) .sd-band .hb--on {
	background: var(--accent-deep);
}

:root[data-theme="dark"] :is(.avava-legacy, .editor-styles-wrapper) .sd-band .hb--on .mono {
	color: #f5f4f1;
}

:is(.avava-legacy, .editor-styles-wrapper) .td-nowt,
:is(.avava-legacy, .editor-styles-wrapper) .td-bar.is-live .td-nowt {
	background: var(--accent-deep);
	color: #fff;
}

:is(.avava-legacy, .editor-styles-wrapper) .dn-perk--on .dn-stamp--bl {
	color: var(--accent-glow);
}