/*
Theme Name: Radio Content Lab
Theme URI: https://radiocontentlab.com
Description: Marketing site, signup and blog theme for Radio Content Lab. Classic editor and classic widgets only; page layouts are built with the Skyrocket Radio Page Builder. Supplies the Bootstrap-shaped grid the builder needs, and the typography and colour that contentlab-billing's portal.css deliberately leaves to the theme.
Version: 0.2.0
Requires at least: 6.0
Requires PHP: 8.0
Author: Radio Content Lab
Text Domain: radio-content-lab
Tags: classic, business, one-column, right-sidebar, custom-logo, custom-menu
*/

/* ===================================================================
   1. TOKENS

   Red, black and white, matching the logo. Every colour below comes from
   a token, so light, dark and the OS-default state each resolve as a set.
   =================================================================== */

:root {
	--rcl-ground:      #FFFFFF;
	--rcl-ground-2:    #F4F4F5;
	--rcl-ground-3:    #EAEAEC;
	--rcl-card:        #FFFFFF;
	--rcl-ink:         #0E0E11;
	--rcl-ink-2:       #4A4A52;
	--rcl-ink-3:       #66666E;
	--rcl-line:        #E4E4E7;
	--rcl-line-strong: #CFCFD4;

	--rcl-band:        #0B0B0D;
	--rcl-band-2:      #16161A;
	--rcl-band-3:      #202025;
	--rcl-band-ink:    #FFFFFF;
	--rcl-band-ink-2:  #B4B4BC;
	--rcl-band-line:   #2A2A30;

	--rcl-red:         #C8262A;
	--rcl-red-deep:    #9C1B1F;
	--rcl-red-ink:     #C8262A;
	--rcl-red-soft:    #FBECEC;
	--rcl-on-red:      #FFFFFF;

	--rcl-good:        #157A34;
	--rcl-warn:        #8F5F00;
	--rcl-bad:         #B32D2E;
	--rcl-field:       #FFFFFF;

	--rcl-shadow-sm:   0 1px 2px rgba(14,14,17,.06), 0 4px 14px -6px rgba(14,14,17,.12);
	--rcl-shadow:      0 2px 4px rgba(14,14,17,.04), 0 24px 48px -24px rgba(14,14,17,.28);
	--rcl-shadow-lg:   0 40px 80px -32px rgba(14,14,17,.45);

	--rcl-logo-ink:    #111313;
	--rcl-logo-accent: #C12826;

	--rcl-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--rcl-text:    "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;

	--rcl-r-sm:   12px;
	--rcl-r:      20px;
	--rcl-r-lg:   28px;
	--rcl-r-xl:   36px;

	--rcl-shell:  1300px;
	--rcl-wide:   1600px;
	--rcl-gutter: clamp(16px, 3vw, 48px);
	--rcl-measure: 38rem;

	/* The builder computes full-bleed rows as 100vw minus this. */
	--srb-content-offset: 0px;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--rcl-ground:      #0E0E11;
		--rcl-ground-2:    #141418;
		--rcl-ground-3:    #1C1C21;
		--rcl-card:        #17171C;
		--rcl-ink:         #F4F4F5;
		--rcl-ink-2:       #C2C2C9;
		--rcl-ink-3:       #9A9AA3;
		--rcl-line:        #26262C;
		--rcl-line-strong: #3A3A42;
		--rcl-band:        #050506;
		--rcl-band-2:      #121215;
		--rcl-band-3:      #1B1B20;
		--rcl-band-line:   #24242A;
		--rcl-red:         #D3282D;
		--rcl-red-ink:     #F0585C;
		--rcl-red-soft:    #2A1416;
		--rcl-good:        #4ADE80;
		--rcl-warn:        #E3B341;
		--rcl-bad:         #F26F6F;
		--rcl-field:       #17171C;
		--rcl-shadow-sm:   0 1px 2px rgba(0,0,0,.4), 0 4px 14px -6px rgba(0,0,0,.6);
		--rcl-shadow:      0 2px 4px rgba(0,0,0,.3), 0 24px 48px -24px rgba(0,0,0,.8);
		--rcl-shadow-lg:   0 40px 80px -32px rgba(0,0,0,.9);
		--rcl-logo-ink:    #F4F4F5;
		--rcl-logo-accent: #EF5A5D;
	}
}

:root[data-theme="dark"] {
	--rcl-ground:      #0E0E11;
	--rcl-ground-2:    #141418;
	--rcl-ground-3:    #1C1C21;
	--rcl-card:        #17171C;
	--rcl-ink:         #F4F4F5;
	--rcl-ink-2:       #C2C2C9;
	--rcl-ink-3:       #9A9AA3;
	--rcl-line:        #26262C;
	--rcl-line-strong: #3A3A42;
	--rcl-band:        #050506;
	--rcl-band-2:      #121215;
	--rcl-band-3:      #1B1B20;
	--rcl-band-line:   #24242A;
	--rcl-red:         #D3282D;
	--rcl-red-ink:     #F0585C;
	--rcl-red-soft:    #2A1416;
	--rcl-good:        #4ADE80;
	--rcl-warn:        #E3B341;
	--rcl-bad:         #F26F6F;
	--rcl-field:       #17171C;
	--rcl-shadow-sm:   0 1px 2px rgba(0,0,0,.4), 0 4px 14px -6px rgba(0,0,0,.6);
	--rcl-shadow:      0 2px 4px rgba(0,0,0,.3), 0 24px 48px -24px rgba(0,0,0,.8);
	--rcl-shadow-lg:   0 40px 80px -32px rgba(0,0,0,.9);
	--rcl-logo-ink:    #F4F4F5;
	--rcl-logo-accent: #EF5A5D;
}


/* ===================================================================
   2. BASE
   =================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; }

body {
	margin: 0;
	background: var(--rcl-ground);
	color: var(--rcl-ink-2);
	font-family: var(--rcl-text);
	font-size: 1.0625rem;
	line-height: 1.7;
	overflow-x: hidden;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	/* Radios, checkboxes and range inputs in brand red, not browser blue. */
	accent-color: var(--rcl-red);
}

img, svg, video, iframe { max-width: 100%; }
img, video { height: auto; }

a { color: var(--rcl-red-ink); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--rcl-red-ink); outline-offset: 3px; }

hr { border: 0; border-top: 1px solid var(--rcl-line); margin: 3rem 0; }

code, kbd, pre, samp { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .875em; }
pre {
	background: var(--rcl-ground-2);
	border: 1px solid var(--rcl-line);
	border-radius: var(--rcl-r-sm);
	padding: 1rem 1.2rem;
	overflow-x: auto;
}

blockquote {
	margin: 2.5rem 0;
	padding: 1.5rem 1.75rem;
	border-left: 4px solid var(--rcl-red);
	background: var(--rcl-ground-2);
	border-radius: 0 var(--rcl-r) var(--rcl-r) 0;
	color: var(--rcl-ink);
	font-family: var(--rcl-display);
	font-weight: 600;
	font-size: 1.375rem;
	line-height: 1.4;
}
blockquote p:last-child { margin-bottom: 0; }

table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--rcl-line); }
th { font-family: var(--rcl-display); font-weight: 700; color: var(--rcl-ink); }

.screen-reader-text {
	position: absolute !important;
	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;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: .75rem;
	z-index: 300;
	background: var(--rcl-red);
	color: var(--rcl-on-red);
	font-family: var(--rcl-display);
	font-weight: 700;
	padding: .85rem 1.3rem;
	border-radius: 999px;
	text-decoration: none;
}
.skip-link:focus { left: .75rem; }


/* ===================================================================
   3. TYPOGRAPHY
   =================================================================== */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--rcl-display);
	font-weight: 800;
	color: var(--rcl-ink);
	letter-spacing: -.025em;
	line-height: 1.08;
	margin: 0 0 .6em;
	text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 5.2vw, 4.4rem); letter-spacing: -.035em; line-height: 1.02; }
h2 { font-size: clamp(2.1rem, 3.9vw, 3.5rem); letter-spacing: -.032em; line-height: 1.04; }
h3 { font-size: clamp(1.3rem, 1.7vw, 1.5rem); font-weight: 700; letter-spacing: -.018em; line-height: 1.2; }
h4 { font-size: 1.2rem; font-weight: 700; letter-spacing: -.012em; }
h5, h6 { font-size: 1rem; font-weight: 700; letter-spacing: 0; }

p { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 700; color: var(--rcl-ink); }
ul, ol { margin: 0 0 1.15rem; padding-left: 1.3rem; }
li { margin-bottom: .4rem; }

/* The home hero headline, a step above h1. */
.rcl-display {
	font-size: clamp(2.9rem, 6.6vw, 4.5rem);
	line-height: .96;
	letter-spacing: -.045em;
}

/* One word of a headline in red. Never the whole headline. */
.rcl-hit { color: var(--rcl-red-ink); }
.band-dark .rcl-hit, .rcl-hero .rcl-hit { color: #FF4F55; }

.rcl-lede {
	font-size: clamp(1.125rem, 1.4vw, 1.3rem);
	line-height: 1.6;
	color: var(--rcl-ink-2);
	max-width: var(--rcl-measure);
}

.rcl-center { text-align: center; }
.rcl-center .rcl-lede, .rcl-center p { margin-left: auto; margin-right: auto; }
.rcl-center .rcl-btn-row { justify-content: center; }
.rcl-measure { max-width: var(--rcl-measure); }

/* --- eyebrow labels --------------------------------------------------
   Short labels above a heading, with a red dot. A <p> where it is only a
   label; .rcl-eyebrow-head where it is a real heading at the right level. */
.rcl-eyebrow,
.rcl-eyebrow-head {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	font-family: var(--rcl-display);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--rcl-ink);
	margin: 0 0 1.1rem;
}
.rcl-eyebrow::before,
.rcl-eyebrow-head::before {
	content: "";
	width: .5rem;
	height: .5rem;
	border-radius: 50%;
	background: var(--rcl-red);
	flex: none;
}
.rcl-eyebrow-accent { color: var(--rcl-red-ink); }

/* On dark grounds the label sits in a pill. */
.band-dark .rcl-eyebrow,
.band-dark .rcl-eyebrow-head,
.rcl-hero .rcl-eyebrow {
	color: var(--rcl-band-ink);
	padding: .5rem .95rem .5rem .8rem;
	border: 1px solid var(--rcl-band-line);
	border-radius: 999px;
	background: rgba(255,255,255,.04);
}
.band-dark .rcl-eyebrow-accent { color: var(--rcl-band-ink); }

@media (max-width: 479px) {
	.rcl-eyebrow, .rcl-eyebrow-head { font-size: .72rem; letter-spacing: .06em; }
}

/* Small label that is a real heading inside an aside card. */
.rcl-label {
	font-family: var(--rcl-display);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--rcl-ink-3);
	margin: 0 0 .8rem;
}
.band-dark .rcl-label { color: var(--rcl-band-ink-2); }


/* ===================================================================
   4. LAYOUT
   =================================================================== */

.rcl-shell {
	max-width: var(--rcl-shell);
	margin: 0 auto;
	padding: 0 15px;
}

/* Header, ticker and footer run edge to edge on every page. */
.rcl-wide {
	max-width: var(--rcl-wide);
	margin: 0 auto;
	padding: 0 var(--rcl-gutter);
}

.rcl-main { display: block; }

.rcl-prose { max-width: var(--rcl-measure); }
.rcl-prose > h2 { margin-top: 2.8rem; font-size: clamp(1.7rem, 2.6vw, 2.2rem); }
.rcl-prose > h3 { margin-top: 2.2rem; }
.rcl-prose > h2:first-child, .rcl-prose > h3:first-child { margin-top: 0; }
.rcl-prose img { border-radius: var(--rcl-r); }
.rcl-prose figure { margin: 2.25rem 0; }
.rcl-prose figcaption { font-size: .875rem; color: var(--rcl-ink-3); margin-top: .7rem; }

/* Lists inside page content get a red check-dot instead of a bullet. */
.srb-text ul,
.rcl-prose > ul { list-style: none; padding-left: 0; }
.srb-text ul > li,
.rcl-prose > ul > li { position: relative; padding-left: 1.75rem; margin-bottom: .6rem; }
.srb-text ul > li::before,
.rcl-prose > ul > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .45em;
	width: 1.05rem;
	height: 1.05rem;
	border-radius: 50%;
	background: var(--rcl-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / 70% no-repeat;
}


/* ===================================================================
   5. SECTIONS

   Classes an editor types into a builder row's "CSS Classes" field.
   =================================================================== */

.band-pad    { padding-top: clamp(4rem, 8vw, 7.5rem);  padding-bottom: clamp(4rem, 8vw, 7.5rem); }
.band-pad-lg { padding-top: clamp(5rem, 10vw, 9.5rem); padding-bottom: clamp(5rem, 10vw, 9.5rem); }
.band-pad-sm { padding-top: clamp(2.5rem, 5vw, 4rem);  padding-bottom: clamp(2.5rem, 5vw, 4rem); }

.band-tint { background: var(--rcl-ground-2); }

/* Dark sections carry a red glow so black reads as depth, not as a hole. */
.band-dark {
	background:
		radial-gradient(60rem 40rem at 85% -10%, rgba(200,38,42,.30), transparent 60%),
		radial-gradient(40rem 30rem at 0% 110%, rgba(200,38,42,.14), transparent 60%),
		var(--rcl-band);
	color: var(--rcl-band-ink-2);
}
.band-dark h1, .band-dark h2, .band-dark h3,
.band-dark h4, .band-dark h5, .band-dark strong { color: var(--rcl-band-ink); }
.band-dark p, .band-dark li { color: var(--rcl-band-ink-2); }
.band-dark a:not(.rcl-btn) { color: #FF7377; }
.band-dark hr { border-top-color: var(--rcl-band-line); }

.band-red {
	background:
		radial-gradient(50rem 30rem at 100% 0%, rgba(255,255,255,.14), transparent 60%),
		var(--rcl-red);
	color: rgba(255,255,255,.88);
}
.band-red h1, .band-red h2, .band-red h3, .band-red strong { color: #FFFFFF; }
.band-red p, .band-red li { color: rgba(255,255,255,.9); }
.band-red .rcl-eyebrow { color: #fff; }
.band-red .rcl-eyebrow::before { background: #fff; }


/* srb-frontend.min.css gives every row a 15px bottom margin. Coloured
   sections set their own spacing. */
.srb-row.band-dark, .srb-row.band-tint, .srb-row.band-red,
.srb-row.band-flush, .srb-row.rcl-hero { margin-bottom: 0; }

/* A coloured section's last block should not carry the builder's trailing
   margin, or the padding looks lopsided. */
.srb-row .srb-column-inner > .srb-block:last-child { margin-bottom: 0; }

/* Two padded light sections in a row would stack their padding. */
.srb-row.band-pad:not(.band-dark):not(.band-tint):not(.band-red)
	+ .srb-row.band-pad:not(.band-dark):not(.band-tint):not(.band-red) { padding-top: 0; }

/* Space between wrapped rows of cards. */
.rcl-cards > .container > .row,
.rcl-cards > .container-fluid > .row { row-gap: 30px; }

/* Columns that stack below the builder's breakpoint need a vertical gap. */
@media (max-width: 767px) {
	.srb-row .row > [class*="col-md-"] + [class*="col-md-"] { margin-top: 2.25rem; }
	.rcl-cards .row > [class*="col-md-"] + [class*="col-md-"] { margin-top: 0; }
}

/* The articles row: heading left, button right, aligned to the baseline. */
.rcl-head-row > .container > .row,
.rcl-head-row > .container-fluid > .row { align-items: flex-end; }
.rcl-head-row h2 { margin-bottom: 0; }
.rcl-head-row .rcl-posts { margin-top: 1.5rem; }

/* Vertically centre the columns of a split section. */
.rcl-split > .container > .row,
.rcl-split > .container-fluid > .row { align-items: center; }

/* Sections run edge to edge with square corners. A page that ends on a
   coloured section meets the footer with no gap; one that ends on plain
   white gets breathing room above the footer instead. */
.rcl-main:has(> .srb-row:is(.band-dark, .band-red, .band-tint, .rcl-hero):last-child) + .rcl-footer { margin-top: 0; }

/* A button row that sits at the right of a section head on wide screens. */
@media (min-width: 768px) {
	.rcl-align-end { justify-content: flex-end; }
	.rcl-section-head + .rcl-btn-row, .rcl-btn-row.rcl-align-end { margin-top: 0; }
}

/* Section heading block above a grid. */
.rcl-section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.rcl-section-head h2 { max-width: 20ch; }
.rcl-center.rcl-section-head h2, .rcl-section-head.rcl-center h2 { margin-left: auto; margin-right: auto; }


/* ===================================================================
   6. BUTTONS

   Pills. The primary carries a white arrow chip.
   =================================================================== */

.rcl-btn,
.rcl-btn:visited {
	display: inline-flex;
	align-items: center;
	gap: .85rem;
	font-family: var(--rcl-display);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	letter-spacing: -.005em;
	padding: .95rem 1.6rem;
	border-radius: 999px;
	border: 1.5px solid transparent;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.rcl-btn-primary,
.rcl-btn-primary:visited {
	background: var(--rcl-red);
	border-color: var(--rcl-red);
	color: var(--rcl-on-red);
	padding: .55rem .55rem .55rem 1.5rem;
}
.rcl-btn-primary::after {
	content: "";
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	flex: none;
	background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8262A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 55% no-repeat;
	transition: transform .2s ease;
}
.rcl-btn-primary:hover,
.rcl-btn-primary:focus-visible {
	background: var(--rcl-red-deep);
	border-color: var(--rcl-red-deep);
	color: #FFFFFF;
}
.rcl-btn-primary:hover::after { transform: translateX(3px); }

.rcl-btn-ghost,
.rcl-btn-ghost:visited {
	background: transparent;
	border-color: var(--rcl-line-strong);
	color: var(--rcl-ink);
}
.rcl-btn-ghost:hover { border-color: var(--rcl-ink); background: var(--rcl-ground-2); }

.band-dark .rcl-btn-ghost,
.band-dark .rcl-btn-ghost:visited,
.rcl-hero .rcl-btn-ghost,
.rcl-hero .rcl-btn-ghost:visited {
	border-color: rgba(255,255,255,.28);
	color: #FFFFFF;
}
.band-dark .rcl-btn-ghost:hover,
.rcl-hero .rcl-btn-ghost:hover { border-color: #FFFFFF; background: rgba(255,255,255,.06); }

/* On a red section the primary turns black so it is still the loudest thing. */
.band-red .rcl-btn-primary,
.band-red .rcl-btn-primary:visited { background: #0B0B0D; border-color: #0B0B0D; color: #fff; }
.band-red .rcl-btn-primary:hover { background: #000; border-color: #000; }
.band-red .rcl-btn-ghost,
.band-red .rcl-btn-ghost:visited { border-color: rgba(255,255,255,.55); color: #fff; }
.band-red .rcl-btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }

.rcl-btn-link {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-family: var(--rcl-display);
	font-weight: 700;
	color: var(--rcl-ink);
	text-decoration: none;
	border-bottom: 2px solid var(--rcl-red);
	padding-bottom: .15rem;
}
.rcl-btn-link:hover { color: var(--rcl-red-ink); }
.band-dark .rcl-btn-link { color: #fff; }

.rcl-btn-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .9rem 1rem;
	margin-top: 2rem;
}

/* Small "trust line" under hero buttons. */
.rcl-trust {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem 1.4rem;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
	font-size: .9375rem;
	font-weight: 600;
}
.srb-text .rcl-trust > li,
.rcl-trust li { display: inline-flex; align-items: center; gap: .5rem; margin: 0; padding: 0; }
.srb-text .rcl-trust > li::before,
.rcl-trust li::before { display: none; }
.rcl-trust svg { color: var(--rcl-red-ink); flex: none; }
.rcl-hero .rcl-trust, .band-dark .rcl-trust { color: rgba(255,255,255,.82); }
.rcl-hero .rcl-trust svg, .band-dark .rcl-trust svg { color: #FF4F55; }


/* ===================================================================
   7. FORMS
   =================================================================== */

input[type="text"], input[type="email"], input[type="url"],
input[type="password"], input[type="search"], input[type="tel"],
input[type="number"], input[type="date"], textarea, select {
	width: 100%;
	font: inherit;
	font-size: 1rem;
	color: var(--rcl-ink);
	background: var(--rcl-field);
	border: 1.5px solid var(--rcl-line-strong);
	border-radius: var(--rcl-r-sm);
	padding: .85rem 1rem;
	transition: border-color .16s ease;
}
input:focus, textarea:focus, select:focus { border-color: var(--rcl-red-ink); }
input:focus-visible, textarea:focus-visible, select:focus-visible {
	border-color: var(--rcl-red-ink);
	outline: 2px solid var(--rcl-red-ink);
	outline-offset: 1px;
}
textarea { min-height: 10rem; resize: vertical; }
label { font-family: var(--rcl-display); font-weight: 700; font-size: .9375rem; color: var(--rcl-ink); }
::placeholder { color: var(--rcl-ink-3); opacity: 1; }

input[type="submit"], button[type="submit"]:not(.rcl-btn) {
	width: auto;
	font-family: var(--rcl-display);
	font-weight: 700;
	font-size: 1rem;
	background: var(--rcl-red);
	border: 1.5px solid var(--rcl-red);
	color: var(--rcl-on-red);
	border-radius: 999px;
	padding: .9rem 1.6rem;
	cursor: pointer;
}
input[type="submit"]:hover, button[type="submit"]:not(.rcl-btn):hover {
	background: var(--rcl-red-deep); border-color: var(--rcl-red-deep);
}

.rcl-form { max-width: 38rem; }
.rcl-field { margin: 0 0 1.25rem; }
.rcl-field label { display: block; margin-bottom: .45rem; }
.rcl-hint { display: block; font-size: .875rem; color: var(--rcl-ink-3); margin-top: .4rem; }

/* Spam trap: off-screen rather than display:none, because some bots skip
   fields their headless browser reports as hidden. */
.rcl-nope { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.rcl-notice {
	border: 1px solid var(--rcl-line);
	border-left-width: 4px;
	border-radius: var(--rcl-r-sm);
	background: var(--rcl-ground-2);
	padding: 1rem 1.25rem;
	margin: 0 0 1.75rem;
	max-width: 38rem;
	font-size: .9375rem;
}
.rcl-notice p { margin: 0; }
.rcl-notice-good { border-left-color: var(--rcl-good); }
.rcl-notice-bad  { border-left-color: var(--rcl-bad); }

/* -------------------------------------------------------------------
   Forms plugin (srr-forms)

   The theme opts in to the plugin's dark mode in inc/setup.php
   (add_theme_support( 'srr-forms-dark-mode' )). The plugin decides light
   or dark per form in the browser by looking at the background behind it,
   so a form gets .srrf-scheme-dark in three cases:
     · the visitor's system is in dark mode,
     · the site is switched with [data-theme="dark"],
     · the form sits in a .band-dark section (dark even in light mode).
   Here we only map the plugin's style variables onto the theme tokens so
   forms look like the rest of the site in all three. No layout changes.
   Selectors start with `html` because the plugin's stylesheet loads after
   this one and would otherwise win every tie.
   ------------------------------------------------------------------- */

html .srrf-wrap {
	--srrf-radius:       var(--rcl-r-sm);
	--srrf-border:       var(--rcl-line-strong);
	--srrf-border-focus: var(--rcl-red-ink);
	--srrf-accent:       var(--rcl-red);
	--srrf-accent-ink:   var(--rcl-on-red);
	--srrf-error:        var(--rcl-bad);
	--srrf-error-bg:     var(--rcl-red-soft);
	--srrf-muted:        var(--rcl-ink-3);
	font-family: var(--rcl-text);
}
html .srrf-wrap .srrf-label,
html .srrf-wrap .srrf-section-title,
html .srrf-wrap .srrf-progress-label { font-family: var(--rcl-display); font-weight: 700; }
html .srrf-wrap .srrf-label { font-size: .9375rem; color: var(--rcl-ink); }
html .srrf-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html .srrf-wrap select,
html .srrf-wrap textarea { border-width: 1.5px; font-size: 1rem; }
html .srrf-wrap .srrf-btn { border-radius: 999px; font-family: var(--rcl-display); font-weight: 700; }
html .srrf-wrap .srrf-btn--prev { border-width: 1.5px; }
html .srrf-wrap .srrf-choice input { accent-color: var(--rcl-red); }

/* Dark: the band tokens are the theme's light-on-dark palette, and they hold
   in light mode (dark bands) and dark mode alike. */
html .srrf-wrap.srrf-scheme-dark {
	--srrf-field-bg:     rgba(255, 255, 255, .06);
	--srrf-field-ink:    var(--rcl-band-ink);
	--srrf-border:       rgba(255, 255, 255, .22);
	--srrf-border-focus: #FF7377;
	--srrf-muted:        var(--rcl-band-ink-2);
	--srrf-error:        #F26F6F;
	--srrf-error-bg:     rgba(242, 111, 111, .12);
	color: var(--rcl-band-ink-2);
}
html .srrf-wrap.srrf-scheme-dark .srrf-label,
html .srrf-wrap.srrf-scheme-dark .srrf-choice label,
html .srrf-wrap.srrf-scheme-dark .srrf-section-title,
html .srrf-wrap.srrf-scheme-dark .srrf-title { color: var(--rcl-band-ink) !important; }
html .srrf-wrap.srrf-scheme-dark .srrf-req { color: #FF7377; }
html .srrf-wrap.srrf-scheme-dark a { color: #FF7377; }


/* ===================================================================
   8. SITE HEADER

   Full width on every page. Opens tall enough for the mascot to read and
   shrinks once the page moves.
   =================================================================== */

.rcl-header {
	--rcl-logo-h: 5.25rem;
	--rcl-header-h: 7.25rem;

	position: sticky;
	top: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--rcl-ground) 92%, transparent);
	backdrop-filter: saturate(160%) blur(14px);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid var(--rcl-line);
	transition: background-color .2s ease, box-shadow .2s ease;
}
.rcl-header.is-scrolled {
	--rcl-logo-h: 3rem;
	--rcl-header-h: 4.5rem;
	box-shadow: 0 10px 30px -20px rgba(0,0,0,.35);
}

.rcl-header-inner {
	display: flex;
	align-items: center;
	gap: 2rem;
	min-height: var(--rcl-header-h);
	transition: min-height .22s ease;
}

/* --- logo --- */
.rcl-brand { display: flex; align-items: center; flex: none; }
.rcl-brand a { display: inline-flex; align-items: center; text-decoration: none; }
.rcl-brand .custom-logo { display: block; max-height: var(--rcl-logo-h, 2.75rem); width: auto; }

/* Badge and wordmark are separate assets. --rcl-badge-scale is the one dial:
   at 1 this reproduces the supplied artwork exactly; above 1 the badge holds
   the full height and the wordmark steps down. */
.rcl-logo-wrap {
	--rcl-badge-scale: 1.28;
	display: flex;
	align-items: center;
	gap: calc(var(--rcl-logo-h, 3rem) * .042);
	height: var(--rcl-logo-h, 3rem);
	transition: height .22s ease;
}
.rcl-logo-wrap .rcl-logo-badge-img { display: block; height: 100%; width: auto; max-width: none; }
.rcl-logo-wrap svg.rcl-logo {
	display: block;
	height: calc(var(--rcl-logo-h, 3rem) * .802 / var(--rcl-badge-scale));
	width: auto;
	max-width: none;
	transition: height .22s ease;
}

.rcl-wordmark {
	font-family: var(--rcl-display);
	font-style: italic;
	font-weight: 800;
	font-size: 1.375rem;
	line-height: .95;
	letter-spacing: -.03em;
	text-transform: uppercase;
	color: var(--rcl-ink);
	white-space: nowrap;
}
.rcl-wordmark .wm-2 { color: var(--rcl-red-ink); }

/* --- primary nav --- */
.rcl-nav { margin-left: auto; }
.rcl-nav ul {
	list-style: none;
	display: flex;
	align-items: center;
	gap: .25rem;
	margin: 0;
	padding: 0;
}
.rcl-nav li { margin: 0; position: relative; }
.rcl-nav a {
	display: inline-block;
	font-family: var(--rcl-display);
	font-weight: 600;
	font-size: 1rem;
	color: var(--rcl-ink);
	text-decoration: none;
	padding: .55rem .9rem;
	border-radius: 999px;
	transition: background-color .15s ease, color .15s ease;
}
.rcl-nav a:hover { background: var(--rcl-ground-2); }
.rcl-nav .current-menu-item > a,
.rcl-nav .current_page_item > a,
.rcl-nav .current-menu-ancestor > a { color: var(--rcl-red-ink); background: var(--rcl-red-soft); }

.rcl-nav ul ul {
	display: none;
	position: absolute;
	top: calc(100% + .4rem);
	left: 0;
	min-width: 13rem;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	background: var(--rcl-card);
	border: 1px solid var(--rcl-line);
	border-radius: var(--rcl-r-sm);
	padding: .5rem;
	box-shadow: var(--rcl-shadow);
}
.rcl-nav li:hover > ul,
.rcl-nav li:focus-within > ul { display: flex; }
.rcl-nav ul ul a { display: block; border-radius: 8px; }

.rcl-header-actions { display: flex; align-items: center; gap: .75rem; flex: none; }
.rcl-header-cta.rcl-btn-primary { padding-top: .45rem; padding-bottom: .45rem; font-size: .9375rem; }
.rcl-header-cta.rcl-btn-primary::after { width: 2rem; height: 2rem; }

/* --- colour-scheme rocker --- */
.rcl-rocker {
	display: inline-flex;
	border: 1px solid var(--rcl-ink-3);
	border-radius: 999px;
	overflow: hidden;
	background: var(--rcl-ground-2);
	padding: 3px;
	gap: 2px;
}
.rcl-rocker button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.1rem;
	height: 2.1rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--rcl-ink-3);
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease;
}
.rcl-rocker button svg { display: block; }
.rcl-rocker button[aria-pressed="true"] { background: var(--rcl-ink); color: var(--rcl-ground); }
.rcl-rocker button:hover:not([aria-pressed="true"]) { color: var(--rcl-ink); }

/* --- mobile navigation button --- */
.rcl-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.85rem;
	height: 2.85rem;
	padding: 0;
	background: transparent;
	border: 1.5px solid var(--rcl-ink-3);
	border-radius: 999px;
	color: var(--rcl-ink);
	cursor: pointer;
	transition: border-color .18s ease, background-color .18s ease;
}
.rcl-nav-toggle:hover { border-color: var(--rcl-ink); }
.rcl-nav-toggle[aria-expanded="true"] { background: var(--rcl-ink); border-color: var(--rcl-ink); color: var(--rcl-ground); }

.rcl-burger { display: block; position: relative; width: 1.125rem; height: .75rem; }
.rcl-burger span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
	transition: transform .2s ease, opacity .15s ease, top .2s ease;
}
.rcl-burger span:nth-child(1) { top: 0; }
.rcl-burger span:nth-child(2) { top: calc(50% - 1px); }
.rcl-burger span:nth-child(3) { top: calc(100% - 2px); }
.rcl-nav-toggle[aria-expanded="true"] .rcl-burger span:nth-child(1) { top: calc(50% - 1px); transform: rotate(45deg); }
.rcl-nav-toggle[aria-expanded="true"] .rcl-burger span:nth-child(2) { opacity: 0; }
.rcl-nav-toggle[aria-expanded="true"] .rcl-burger span:nth-child(3) { top: calc(50% - 1px); transform: rotate(-45deg); }

@media (max-width: 1199px) {
	.rcl-header-cta { display: none; }
}

@media (max-width: 1023px) {
	.rcl-nav-toggle { display: inline-flex; }
	.rcl-header-actions { margin-left: auto; }
	.rcl-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--rcl-ground);
		border-bottom: 1px solid var(--rcl-line);
		box-shadow: var(--rcl-shadow);
		padding: 1rem var(--rcl-gutter) 1.75rem;
		max-height: calc(100vh - var(--rcl-header-h));
		overflow-y: auto;
	}
	.rcl-nav.is-open { display: block; }
	.rcl-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
	.rcl-nav li { border-bottom: 1px solid var(--rcl-line); }
	.rcl-nav a { display: block; padding: 1rem .25rem; font-size: 1.125rem; border-radius: 0; background: none !important; }
	.rcl-nav .current-menu-item > a { color: var(--rcl-red-ink); }
	.rcl-nav ul ul { display: flex; position: static; border: 0; box-shadow: none; padding: 0 0 .5rem 1rem; background: transparent; }
}

@media (max-width: 767px) {
	.rcl-header { --rcl-logo-h: 4rem; --rcl-header-h: 5.5rem; }
	.rcl-header.is-scrolled { --rcl-logo-h: 2.75rem; --rcl-header-h: 4rem; }
	.rcl-header-inner { gap: .6rem; }
	.rcl-header-actions { gap: .5rem; }
	.rcl-rocker button { width: 1.9rem; height: 1.9rem; }
	.rcl-nav-toggle { width: 2.6rem; height: 2.6rem; }
}
@media (max-width: 359px) {
	.rcl-header { --rcl-logo-h: 3.25rem; --rcl-header-h: 4.6rem; }
	.rcl-rocker button { width: 1.75rem; }
}


/* ===================================================================
   9. TICKER

   Red strip under the header, fed by the "Ticker strip" widget area so it
   can become an affiliate logo strip without touching code. Pauses on
   hover and focus, has its own pause control (WCAG 2.2.2), and stands
   still for anyone who has asked for reduced motion.
   =================================================================== */

.rcl-ticker {
	position: relative;
	background: var(--rcl-red);
	color: #FFFFFF;
	overflow: hidden;
	border-bottom: 1px solid rgba(0,0,0,.15);
}
.rcl-ticker-viewport {
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.rcl-ticker-track {
	display: flex;
	width: max-content;
	animation: rcl-ticker var(--rcl-ticker-duration, 48s) linear infinite;
}
.rcl-ticker:hover .rcl-ticker-track,
.rcl-ticker:focus-within .rcl-ticker-track,
.rcl-ticker.is-paused .rcl-ticker-track { animation-play-state: paused; }

.rcl-ticker-list {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}
.rcl-ticker-item {
	display: flex;
	align-items: center;
	gap: 2.25rem;
	margin: 0;
	padding: 1.15rem 0 1.15rem 2.25rem;
	font-family: var(--rcl-display);
	font-weight: 800;
	font-size: clamp(1.05rem, 1.6vw, 1.4rem);
	letter-spacing: -.01em;
	white-space: nowrap;
}
.rcl-ticker-item::before {
	content: "";
	width: 1.35rem;
	height: 1.35rem;
	flex: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 3h5M10.5 3v6L5 18.5A1.6 1.6 0 0 0 6.4 21h11.2a1.6 1.6 0 0 0 1.4-2.5L13.5 9V3'/%3E%3Cpath d='M7.5 15h9'/%3E%3C/svg%3E") center / contain no-repeat;
	opacity: .75;
}
/* Widget wrappers carry no layout of their own inside the strip. */
.rcl-ticker-item .textwidget,
.rcl-ticker-item .custom-html-widget { display: contents; }
.rcl-ticker-item p { margin: 0; color: inherit; }
.rcl-ticker-item a { color: inherit; text-decoration: none; }
.rcl-ticker-item img { display: block; height: 2rem; width: auto; filter: brightness(0) invert(1); }

.rcl-ticker-pause {
	position: absolute;
	right: .6rem;
	box-shadow: -1.5rem 0 1.25rem .5rem var(--rcl-red);
	top: 50%;
	transform: translateY(-50%);
	width: 2.1rem;
	height: 2.1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0,0,0,.28);
	color: #FFFFFF;
	cursor: pointer;
}
.rcl-ticker-pause:hover { background: rgba(0,0,0,.45); }
.rcl-ticker-pause .is-play { display: none; }
.rcl-ticker.is-paused .rcl-ticker-pause .is-play { display: block; }
.rcl-ticker.is-paused .rcl-ticker-pause .is-pause { display: none; }

@keyframes rcl-ticker {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.rcl-ticker-track { animation: none; }
	.rcl-ticker-viewport { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
	.rcl-ticker-list[aria-hidden="true"], .rcl-ticker-pause { display: none; }
}


/* ===================================================================
   10. HOME HERO
   =================================================================== */

.rcl-hero {
	position: relative;
	background:
		radial-gradient(70rem 50rem at 80% 10%, rgba(200,38,42,.42), transparent 58%),
		radial-gradient(50rem 40rem at -10% 100%, rgba(200,38,42,.18), transparent 60%),
		var(--rcl-band);
	color: rgba(255,255,255,.8);
	padding-top: clamp(4.5rem, 9vw, 8rem);
	padding-bottom: clamp(4.5rem, 9vw, 8rem);
	overflow: hidden;
}
/* A faint grid gives the dark ground some texture without a photograph. */
.rcl-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(70% 70% at 70% 40%, #000, transparent 75%);
	-webkit-mask-image: radial-gradient(70% 70% at 70% 40%, #000, transparent 75%);
	pointer-events: none;
}
.rcl-hero > .container, .rcl-hero > .container-fluid { position: relative; z-index: 1; }
.rcl-hero h1, .rcl-hero h2 { color: #FFFFFF; }
.rcl-hero p { color: rgba(255,255,255,.8); }
.rcl-hero .rcl-lede { color: rgba(255,255,255,.8); font-size: clamp(1.15rem, 1.5vw, 1.35rem); }

/* --- the hero visual: mascot, broadcast rings and posts arriving --- */
.rcl-hv {
	position: relative;
	aspect-ratio: 1 / 1;
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
}
.rcl-hv-rings {
	position: absolute;
	inset: -6%;
	border-radius: 50%;
	background:
		radial-gradient(circle, transparent 47%, rgba(255,255,255,.07) 47.3%, transparent 47.8%),
		radial-gradient(circle, transparent 57%, rgba(255,255,255,.055) 57.3%, transparent 57.8%),
		radial-gradient(circle, transparent 67%, rgba(255,255,255,.04) 67.3%, transparent 67.8%);
}
.rcl-hv-glow {
	position: absolute;
	inset: 12%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(226,54,59,.55), rgba(200,38,42,0) 68%);
	filter: blur(10px);
}
.rcl-hv-mascot {
	position: absolute;
	inset: 13%;
	display: grid;
	place-items: center;
}
.rcl-hv-mascot img {
	width: 100%;
	height: auto;
	filter: drop-shadow(0 30px 50px rgba(0,0,0,.55));
}

/* Notification cards: what a station manager sees happen. */
.rcl-float {
	position: absolute;
	display: flex;
	align-items: center;
	gap: .8rem;
	padding: .85rem 1.1rem .85rem .85rem;
	background: #FFFFFF;
	color: #0E0E11;
	border-radius: 16px;
	box-shadow: 0 24px 50px -18px rgba(0,0,0,.6);
	max-width: 17.5rem;
}
.rcl-float-icon {
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 12px;
	display: grid;
	place-items: center;
	flex: none;
	background: #FBECEC;
	color: #C8262A;
}
.rcl-float-title {
	display: block;
	font-family: var(--rcl-display);
	font-weight: 700;
	font-size: .9375rem;
	line-height: 1.25;
	color: #0E0E11;
}
.rcl-float-meta {
	display: flex;
	align-items: center;
	gap: .35rem;
	font-size: .78rem;
	font-weight: 600;
	color: #5A5A62;
	line-height: 1.3;
	margin-top: .15rem;
}
.rcl-float-meta::before {
	content: "";
	width: .45rem;
	height: .45rem;
	border-radius: 50%;
	background: #22A355;
}
.rcl-float-1 { top: 12%;  left: -6%; }
.rcl-float-2 { top: 66%; right: -8%; }
.rcl-float-3 { bottom: 9%; left: 2%; }

/* The spinning ring of text, the one ambient motion on the page. */
.rcl-hv-spin {
	position: absolute;
	right: 2%;
	top: 10%;
	width: 8.5rem;
	height: 8.5rem;
	border-radius: 50%;
	background: var(--rcl-red);
	display: grid;
	place-items: center;
	box-shadow: 0 20px 40px -18px rgba(0,0,0,.6);
}
.rcl-hv-spin svg.ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: rcl-spin 22s linear infinite; }
.rcl-hv-spin text {
	font-family: var(--rcl-display);
	font-weight: 700;
	font-size: 10px;
	text-transform: uppercase;
	fill: #FFFFFF;
}
.rcl-hv-spin .core {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: #FFFFFF;
	color: var(--rcl-red);
	display: grid;
	place-items: center;
}
@keyframes rcl-spin { to { transform: rotate(360deg); } }

@media (max-width: 991px) {
	.rcl-hv { max-width: 520px; margin-top: 3rem; }
	.rcl-float { max-width: 15rem; padding: .7rem .9rem .7rem .7rem; }
	.rcl-float-1 { left: 0; }
	.rcl-float-2 { right: 0; }
	.rcl-hv-spin { width: 6.5rem; height: 6.5rem; }
	.rcl-hv-spin .core { width: 2.4rem; height: 2.4rem; }
}
@media (max-width: 479px) {
	.rcl-float-3 { display: none; }
	.rcl-float { max-width: 13rem; }
	.rcl-float-title { font-size: .85rem; }
}


/* ===================================================================
   11. SUBPAGE HERO
   =================================================================== */

.rcl-page-hero {
	padding-top: clamp(3.5rem, 7vw, 6rem);
	padding-bottom: clamp(3.5rem, 7vw, 6rem);
}
.rcl-page-hero h1 { color: #fff; max-width: 15ch; }
.rcl-page-hero .rcl-lede { color: rgba(255,255,255,.8); }

/* Non-builder pages (sign in, account, articles) get the same treatment
   from the theme's own header block. */
.rcl-page-head {
	padding: clamp(3rem, 6vw, 5rem) 0;
	background:
		radial-gradient(50rem 30rem at 90% -20%, rgba(200,38,42,.35), transparent 60%),
		var(--rcl-band);
	color: rgba(255,255,255,.8);
}
.rcl-page-head h1 { color: #fff; margin: 0; max-width: 18ch; }
.rcl-page-head .rcl-lede, .rcl-page-head .rcl-lede p { color: rgba(255,255,255,.8); margin-top: 1.1rem; }
.rcl-page-head .rcl-eyebrow { color: #fff; padding: .45rem .9rem .45rem .75rem; border: 1px solid var(--rcl-band-line); border-radius: 999px; background: rgba(255,255,255,.04); }
.rcl-page-body { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.rcl-has-builder .rcl-page-head { display: none; }


/* Article meta and the search box on the dark header. */
.rcl-page-head .rcl-meta { color: rgba(255,255,255,.72); }
.rcl-page-head .rcl-meta .sep { color: rgba(255,255,255,.4); }
.rcl-page-head .rcl-cat { background: rgba(255,255,255,.1); color: #fff; }
.rcl-head-search { max-width: 28rem; margin-top: 1.75rem; }
.rcl-entry-head h1 { max-width: 24ch; }

/* The portal shortcodes set their own widths; the prose measure stands down. */
.rcl-portal .rcl-prose { max-width: none; }


/* ===================================================================
   12. CARDS, ICONS AND THE BENTO GRID
   =================================================================== */

/* .rcl-card goes on a builder column ("CSS Classes" on the column), which
   puts it on .srb-column-inner, so cards in a row share a height. */
.rcl-card {
	--rcl-card-pad: clamp(1.6rem, 2.4vw, 2.25rem);
	position: relative;
	background: var(--rcl-card);
	border: 1px solid var(--rcl-line);
	border-radius: var(--rcl-r);
	padding: var(--rcl-card-pad);
	box-shadow: var(--rcl-shadow-sm);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.rcl-card-hover:hover { transform: translateY(-4px); box-shadow: var(--rcl-shadow); }
.rcl-card h3 { margin-bottom: .55rem; }
.rcl-card p { font-size: 1rem; }

.band-dark .rcl-card,
.rcl-card-dark {
	background: var(--rcl-band-2);
	border-color: var(--rcl-band-line);
	box-shadow: none;
}
.rcl-card-dark h3, .band-dark .rcl-card h3 { color: #fff; }
.rcl-card-dark p, .band-dark .rcl-card p { color: var(--rcl-band-ink-2); }

.rcl-card.rcl-card-red,
.band-dark .rcl-card.rcl-card-red {
	background:
		radial-gradient(28rem 18rem at 110% -10%, rgba(255,255,255,.22), transparent 60%),
		var(--rcl-red);
	border-color: transparent;
	color: rgba(255,255,255,.9);
	box-shadow: 0 30px 60px -30px rgba(200,38,42,.7);
}
/* Spelled out against .band-dark .rcl-card (0,2,1), which would otherwise
   turn red-card copy grey and fail contrast. */
.rcl-card.rcl-card-red h3, .band-dark .rcl-card.rcl-card-red h3,
.rcl-card-red .rcl-big { color: #fff; }
.rcl-card.rcl-card-red p, .band-dark .rcl-card.rcl-card-red p { color: #fff; }
.rcl-card-red a:not(.rcl-btn), .band-dark .rcl-card-red a:not(.rcl-btn) { color: #fff; }
.rcl-card-red .rcl-btn-link { border-bottom-color: #fff; }
.rcl-card-red .rcl-art { margin-top: 1.5rem; }

.rcl-card.rcl-card-tint { background: var(--rcl-ground-2); box-shadow: none; }

/* Big figure on a card, for a number that is a fact, never a vanity stat. */
.rcl-big {
	display: block;
	font-family: var(--rcl-display);
	font-weight: 800;
	font-size: clamp(3.5rem, 7vw, 5.5rem);
	line-height: .9;
	letter-spacing: -.05em;
	color: var(--rcl-ink);
	margin-bottom: 1rem;
}

/* Icon chips. */
.rcl-ichip {
	display: inline-grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 16px;
	background: var(--rcl-red-soft);
	color: var(--rcl-red-ink);
	margin-bottom: 1.5rem;
}
.rcl-ichip svg { width: 1.65rem; height: 1.65rem; }
.band-dark .rcl-ichip,
.rcl-card-dark .rcl-ichip { background: rgba(255,255,255,.06); color: #FF5A5F; border: 1px solid var(--rcl-band-line); }
.rcl-card-red .rcl-ichip { background: rgba(255,255,255,.16); color: #fff; }

.rcl-icon { display: inline-block; vertical-align: middle; flex: none; }

/* Step number on a card. */
.rcl-step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--rcl-display);
	font-weight: 800;
	font-size: .875rem;
	letter-spacing: .04em;
	color: var(--rcl-red-ink);
	border: 1.5px solid currentColor;
	border-radius: 999px;
	padding: .25rem .75rem;
	margin-bottom: 1.25rem;
}
.band-dark .rcl-step { color: #FF5A5F; }
/* Beside an icon chip, the step sits in the card's top-right corner. */
.rcl-card .rcl-ichip + .rcl-step {
	position: absolute;
	top: calc(var(--rcl-card-pad) + .85rem);
	right: var(--rcl-card-pad);
	margin: 0;
}

/* Feature row: icon beside text, used inside split sections. */
.rcl-feature {
	display: flex;
	gap: 1.1rem;
	align-items: flex-start;
	padding: 1.4rem 0;
	border-top: 1px solid var(--rcl-line);
}
.rcl-feature:first-of-type { border-top: 0; padding-top: .25rem; }
.rcl-feature .rcl-ichip { width: 3rem; height: 3rem; margin: 0; border-radius: 14px; flex: none; }
.rcl-feature .rcl-ichip svg { width: 1.4rem; height: 1.4rem; }
.rcl-feature h3 { font-size: 1.15rem; margin: .1rem 0 .3rem; }
.rcl-feature p { font-size: .975rem; margin: 0; }
.band-dark .rcl-feature { border-top-color: var(--rcl-band-line); }

/* Tag cloud: the kinds of post, scattered like stickers on a bench. */
.rcl-tags-cloud {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .7rem .6rem;
	padding: 1rem 0 .5rem;
}
.rcl-tags-cloud span {
	display: inline-block;
	font-family: var(--rcl-display);
	font-weight: 700;
	font-size: .95rem;
	padding: .6rem 1.1rem;
	border-radius: 999px;
	background: var(--rcl-ink);
	color: var(--rcl-ground);
	box-shadow: var(--rcl-shadow-sm);
}
.rcl-tags-cloud span:nth-child(3n+1) { background: var(--rcl-red); color: #fff; transform: rotate(-6deg); }
.rcl-tags-cloud span:nth-child(3n+2) { transform: rotate(4deg); }
.rcl-tags-cloud span:nth-child(3n)   { background: var(--rcl-card); color: var(--rcl-ink); border: 1.5px solid var(--rcl-line-strong); transform: rotate(-2deg); }

/* --- art slots ------------------------------------------------------- */
.rcl-art {
	position: relative;
	display: block;
	width: 100%;
	border-radius: var(--rcl-r-lg);
	overflow: hidden;
	isolation: isolate;
}
.rcl-art > img.rcl-art-img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* The interim mascot tile shown until the commissioned image arrives. */
.rcl-art-tile {
	background:
		radial-gradient(circle at 50% 45%, rgba(226,54,59,.6), transparent 60%),
		var(--rcl-band);
	display: grid;
	place-items: center;
}
.rcl-art-tile.is-red { background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.25), transparent 55%), var(--rcl-red); }
.rcl-art-tile.is-light { background: radial-gradient(circle at 50% 45%, rgba(200,38,42,.18), transparent 62%), var(--rcl-ground-2); }
.rcl-art-tile::before {
	content: "";
	position: absolute;
	inset: -10%;
	background:
		radial-gradient(circle, transparent 38%, rgba(255,255,255,.08) 38.3%, transparent 38.9%),
		radial-gradient(circle, transparent 50%, rgba(255,255,255,.06) 50.3%, transparent 50.9%),
		radial-gradient(circle, transparent 62%, rgba(255,255,255,.045) 62.3%, transparent 62.9%);
	z-index: -1;
}
.rcl-art-tile.is-light::before {
	background:
		radial-gradient(circle, transparent 38%, rgba(14,14,17,.07) 38.3%, transparent 38.9%),
		radial-gradient(circle, transparent 50%, rgba(14,14,17,.05) 50.3%, transparent 50.9%);
}
.rcl-art-tile img.rcl-art-badge {
	width: 62%;
	height: auto;
	filter: drop-shadow(0 24px 40px rgba(0,0,0,.45));
}
.rcl-art-caption {
	position: absolute;
	left: 1.1rem;
	right: 1.1rem;
	bottom: 1.1rem;
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: .85rem 1rem;
	border-radius: 14px;
	background: rgba(255,255,255,.94);
	color: #0E0E11;
	font-family: var(--rcl-display);
	font-weight: 700;
	font-size: .95rem;
	line-height: 1.3;
	box-shadow: 0 18px 40px -20px rgba(0,0,0,.6);
}
.rcl-art-caption svg { color: #C8262A; flex: none; }

/* No ground of its own: for mascot art sitting on an already-dark section. */
.rcl-art-tile.is-clear { background: none; overflow: visible; }
.rcl-art-tile.is-clear::before { inset: -4%; }
.rcl-art-tile.is-clear img.rcl-art-badge { width: 82%; }

/* Editors see what the slot is waiting for. Visitors never do. */
.rcl-art-brief {
	position: absolute;
	top: .8rem;
	left: .8rem;
	z-index: 2;
	max-width: calc(100% - 1.6rem);
	font-size: .8125rem;
	line-height: 1.45;
	color: #0E0E11;
}
.rcl-art-brief summary {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	cursor: pointer;
	list-style: none;
	font-family: var(--rcl-display);
	font-weight: 700;
	font-size: .75rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	background: #FFD54A;
	color: #0E0E11;
	padding: .35rem .7rem;
	border-radius: 999px;
}
.rcl-art-brief summary::-webkit-details-marker { display: none; }
.rcl-art-brief[open] > div {
	margin-top: .5rem;
	background: #FFFBEA;
	border: 1px solid #F0D772;
	border-radius: 12px;
	padding: .8rem .9rem;
	box-shadow: 0 10px 30px -12px rgba(0,0,0,.4);
}
.rcl-art-brief code { background: rgba(0,0,0,.06); padding: .05rem .3rem; border-radius: 4px; }

/* The brief panel is always dark text on cream, wherever the slot sits. The
   section rules it has to beat go as high as
   `.band-dark .rcl-card.rcl-card-red p` (0,3,1), so this is written at
   (0,3,3) rather than leaning on !important. */
figure.rcl-art .rcl-art-brief[open] > div p,
figure.rcl-art .rcl-art-brief[open] > div strong,
figure.rcl-art .rcl-art-brief[open] > div em,
figure.rcl-art .rcl-art-brief[open] > div code {
	color: #0E0E11;
	font-size: .8125rem;
	line-height: 1.5;
	margin: 0 0 .5rem;
}
figure.rcl-art .rcl-art-brief[open] > div p:last-child { margin-bottom: 0; }


/* ===================================================================
   13. PRODUCT MOCKS

   Drawn in HTML rather than shipped as screenshots, so they stay sharp,
   follow the colour scheme and can be read by a screen reader.
   =================================================================== */

.rcl-mock {
	border-radius: var(--rcl-r);
	background: var(--rcl-card);
	border: 1px solid var(--rcl-line);
	box-shadow: var(--rcl-shadow-lg);
	overflow: hidden;
	font-size: .9375rem;
	color: var(--rcl-ink-2);
}
.rcl-mock-bar {
	display: flex;
	align-items: center;
	gap: .45rem;
	padding: .8rem 1rem;
	background: var(--rcl-ground-2);
	border-bottom: 1px solid var(--rcl-line);
}
.rcl-mock-bar i { width: .7rem; height: .7rem; border-radius: 50%; background: var(--rcl-line-strong); display: block; }
.rcl-mock-bar i:first-child { background: #FF5F57; }
.rcl-mock-bar i:nth-child(2) { background: #FEBC2E; }
.rcl-mock-bar i:nth-child(3) { background: #28C840; }
.rcl-mock-url {
	margin-left: .8rem;
	flex: 1;
	background: var(--rcl-card);
	border: 1px solid var(--rcl-line);
	border-radius: 999px;
	padding: .3rem .9rem;
	font-size: .8rem;
	color: var(--rcl-ink-3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.rcl-mock-body { padding: 1.25rem 1.25rem 1.5rem; }
.rcl-mock h3 { font-size: 1.15rem; margin: 0 0 .9rem; }

/* WordPress "Pending" list. */
.rcl-mock-tabs { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .85rem; margin-bottom: 1rem; color: var(--rcl-ink-3); }
.rcl-mock-tabs b { color: var(--rcl-ink); }
.rcl-mock-row {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 1rem;
	padding: .9rem 0;
	border-top: 1px solid var(--rcl-line);
}
.rcl-mock-row strong { display: block; font-family: var(--rcl-display); font-size: .98rem; line-height: 1.3; color: var(--rcl-ink); }
.rcl-mock-row span { font-size: .8rem; color: var(--rcl-ink-3); }
.rcl-mock-pill {
	display: inline-block;
	font-family: var(--rcl-display);
	font-weight: 700;
	font-size: .8rem;
	padding: .45rem .9rem;
	border-radius: 999px;
	background: var(--rcl-red);
	color: #fff;
	white-space: nowrap;
}
.rcl-mock-pill.is-quiet { background: var(--rcl-ground-2); color: var(--rcl-ink-2); border: 1px solid var(--rcl-line); }
.rcl-mock-row .rcl-mock-pill { font-size: .8rem; color: #fff; }
.rcl-mock-row .rcl-mock-pill.is-quiet { color: var(--rcl-ink-2); }

/* The stale station website. */
.rcl-stale-hero {
	padding: 1.25rem;
	background: linear-gradient(135deg, #2b2b31, #17171b);
	color: #fff;
	font-family: var(--rcl-display);
	font-weight: 800;
	font-size: 1.2rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.rcl-stale-hero small { font-family: var(--rcl-text); font-weight: 600; font-size: .75rem; opacity: .7; }
.rcl-stale-post {
	display: grid;
	grid-template-columns: 4.5rem 1fr;
	gap: .9rem;
	align-items: center;
	padding: .8rem 0;
	border-top: 1px solid var(--rcl-line);
}
/* The neglect shows in the faded thumbnails, never in text someone has to
   read: dimming the whole row put the dates below 4.5:1. */
.rcl-stale-post .rcl-stale-thumb { opacity: .55; }
.rcl-stale-post:first-of-type { border-top: 0; }
.rcl-stale-thumb { aspect-ratio: 4/3; border-radius: 8px; background: var(--rcl-ground-3); }
.rcl-stale-post strong { display: block; font-family: var(--rcl-display); font-size: .92rem; color: var(--rcl-ink); line-height: 1.3; }
.rcl-stale-post span { font-size: .78rem; color: var(--rcl-ink-3); }
.rcl-stale-flag {
	position: absolute;
	right: -1rem;
	bottom: 2.5rem;
	transform: rotate(4deg);
	background: var(--rcl-red);
	color: #fff;
	font-family: var(--rcl-display);
	font-weight: 800;
	font-size: 1.05rem;
	line-height: 1.2;
	padding: 1rem 1.2rem;
	border-radius: 14px;
	box-shadow: 0 24px 40px -18px rgba(200,38,42,.7);
	max-width: 13rem;
}
.rcl-stale-flag small { display: block; font-family: var(--rcl-text); font-weight: 600; font-size: .78rem; opacity: .9; margin-top: .2rem; }
.rcl-mock-wrap { position: relative; }
@media (max-width: 767px) { .rcl-stale-flag { right: .5rem; bottom: -1rem; } }


/* ===================================================================
   14. ARTICLE CARDS
   =================================================================== */

.rcl-posts { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 640px) { .rcl-posts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .rcl-posts { grid-template-columns: repeat(3, 1fr); } }
.rcl-archive-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
	gap: 2.5rem 2rem;
}

.rcl-card-post {
	display: flex;
	flex-direction: column;
	background: var(--rcl-card);
	border: 1px solid var(--rcl-line);
	border-radius: var(--rcl-r);
	overflow: hidden;
	box-shadow: var(--rcl-shadow-sm);
	transition: transform .25s ease, box-shadow .25s ease;
}
.rcl-card-post:hover { transform: translateY(-4px); box-shadow: var(--rcl-shadow); }
.rcl-card-post .rcl-card-media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--rcl-ground-3);
}
.rcl-card-post .rcl-card-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}
.rcl-card-post:hover .rcl-card-media img { transform: scale(1.04); }
.rcl-card-body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem 1.6rem 1.75rem; }
.rcl-card-post h2, .rcl-card-post h3 {
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.25;
	margin: 0 0 .65rem;
}
.rcl-card-post h2 a, .rcl-card-post h3 a { color: var(--rcl-ink); text-decoration: none; }
.rcl-card-post h2 a:hover, .rcl-card-post h3 a:hover { color: var(--rcl-red-ink); }
/* The title link covers the card, so the whole card is one target. */
.rcl-card-post h2 a::after, .rcl-card-post h3 a::after { content: ""; position: absolute; inset: 0; }
.rcl-card-post { position: relative; }
.rcl-card-post p { font-size: .975rem; color: var(--rcl-ink-2); margin: 0 0 1.25rem; }
.rcl-card-more {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-family: var(--rcl-display);
	font-weight: 700;
	font-size: .9375rem;
	color: var(--rcl-red-ink);
}

.rcl-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .7rem;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--rcl-ink-3);
	margin: 0 0 .8rem;
}
.rcl-meta a { color: var(--rcl-red-ink); text-decoration: none; position: relative; z-index: 1; }
.rcl-meta .sep { color: var(--rcl-line-strong); }
.rcl-cat {
	display: inline-block;
	font-family: var(--rcl-display);
	font-weight: 700;
	font-size: .75rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: .3rem .7rem;
	border-radius: 999px;
	background: var(--rcl-red-soft);
	color: var(--rcl-red-ink);
	text-decoration: none;
}

/* --- single article --- */
.rcl-single { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4rem; }
@media (min-width: 1024px) {
	.rcl-has-sidebar .rcl-single,
	.rcl-has-sidebar .rcl-archive-wrap { grid-template-columns: minmax(0, 1fr) 20rem; gap: 4rem; }
}
.rcl-archive-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4rem; }

.rcl-entry-head h1 { max-width: 22ch; }
.rcl-featured {
	margin: 0 0 3rem;
	border-radius: var(--rcl-r-lg);
	overflow: hidden;
	box-shadow: var(--rcl-shadow);
}
.rcl-featured img { display: block; width: 100%; }
.rcl-entry-footer { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rcl-line); }

.rcl-tags a {
	display: inline-block;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--rcl-ink-2);
	border: 1px solid var(--rcl-line);
	border-radius: 999px;
	padding: .35rem .8rem;
	margin: 0 .35rem .4rem 0;
	text-decoration: none;
}
.rcl-tags a:hover { border-color: var(--rcl-red-ink); color: var(--rcl-red-ink); }

.rcl-pagination { margin-top: 3.5rem; }
.rcl-pagination .nav-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.rcl-pagination .page-numbers {
	min-width: 2.75rem;
	text-align: center;
	font-family: var(--rcl-display);
	font-weight: 700;
	color: var(--rcl-ink);
	border: 1.5px solid var(--rcl-line);
	border-radius: 999px;
	padding: .55rem 1rem;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}
.rcl-pagination .page-numbers:hover { border-color: var(--rcl-ink); }
.rcl-pagination .page-numbers.current { background: var(--rcl-red); border-color: var(--rcl-red); color: #fff; }

.rcl-post-nav {
	display: grid;
	gap: 1.25rem;
	margin-top: 3rem;
}
@media (min-width: 768px) { .rcl-post-nav { grid-template-columns: 1fr 1fr; } }
.rcl-post-nav a {
	display: block;
	padding: 1.25rem 1.4rem;
	border: 1px solid var(--rcl-line);
	border-radius: var(--rcl-r);
	text-decoration: none;
	color: var(--rcl-ink);
	transition: border-color .2s ease;
}
.rcl-post-nav a:hover { border-color: var(--rcl-red-ink); }
.rcl-post-nav .label { display: block; font-size: .8125rem; font-weight: 700; color: var(--rcl-ink-3); margin-bottom: .35rem; }
.rcl-post-nav .title { font-family: var(--rcl-display); font-weight: 700; font-size: 1.05rem; line-height: 1.3; }
.rcl-post-nav .to-next { text-align: right; }


/* ===================================================================
   15. COMMENTS
   =================================================================== */

.rcl-comments { margin-top: 4rem; padding-top: 2.5rem; border-top: 1px solid var(--rcl-line); max-width: var(--rcl-measure); }
.rcl-comments-title { font-size: clamp(1.6rem, 2.4vw, 2rem); margin: 0 0 1.75rem; }
.rcl-comments form .rcl-comments-title { margin-top: 3rem; }
.rcl-comment-list, .rcl-comment-list .children { list-style: none; padding: 0; margin: 0; }
.rcl-comment-list .children { padding-left: 1.5rem; border-left: 2px solid var(--rcl-line); margin-top: 1.5rem; }
.rcl-comment-list li.comment, .rcl-comment-list li.pingback { margin: 0 0 1.75rem; padding: 0 0 1.75rem; border-bottom: 1px solid var(--rcl-line); }
.rcl-comment-list .children li:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.rcl-comment-list .comment-author { display: flex; align-items: center; gap: .6rem; font-family: var(--rcl-display); font-weight: 700; color: var(--rcl-ink); }
.rcl-comment-list .comment-author img { border-radius: 50%; }
.rcl-comment-list .comment-author .says { display: none; }
.rcl-comment-list .comment-metadata { font-size: .8125rem; color: var(--rcl-ink-3); margin: .4rem 0 .8rem; }
.rcl-comment-list .comment-metadata a { color: var(--rcl-ink-3); text-decoration: none; }
.rcl-comment-list .reply { margin-top: .6rem; font-family: var(--rcl-display); font-weight: 700; font-size: .875rem; }
.rcl-comment-notes, .rcl-comments .comment-notes, .comment-form-cookies-consent label { font-size: .875rem; color: var(--rcl-ink-3); }
.rcl-comments .comment-form p { margin-bottom: 1.1rem; }
.rcl-comments .comment-form label { display: block; margin-bottom: .35rem; }
.rcl-comments-closed { font-size: .9375rem; color: var(--rcl-ink-3); }


/* ===================================================================
   16. WIDGETS
   =================================================================== */

.rcl-sidebar .widget {
	margin-bottom: 2rem;
	padding: 1.75rem;
	background: var(--rcl-ground-2);
	border-radius: var(--rcl-r);
}
.rcl-sidebar .widget:last-child { margin-bottom: 0; }
.widget-title, .widgettitle {
	font-size: 1.15rem;
	font-weight: 800;
	letter-spacing: -.015em;
	margin: 0 0 1rem;
	color: var(--rcl-ink);
}
.rcl-sidebar ul { list-style: none; padding: 0; margin: 0; }
.rcl-sidebar li { margin: 0; padding: .6rem 0; border-bottom: 1px solid var(--rcl-line); font-size: .9375rem; }
.rcl-sidebar li:last-child { border-bottom: 0; }
.rcl-sidebar a:not(.rcl-btn) { color: var(--rcl-ink); text-decoration: none; }
.rcl-sidebar a:not(.rcl-btn):hover { color: var(--rcl-red-ink); }


/* ===================================================================
   17. FOOTER

   Full width, black in both colour schemes.
   =================================================================== */

.rcl-footer {
	--rcl-logo-ink: #FFFFFF;
	--rcl-logo-accent: #EF5A5D;
	background:
		radial-gradient(60rem 30rem at 100% 0%, rgba(200,38,42,.22), transparent 60%),
		#08080A;
	color: #B4B4BC;
	margin-top: clamp(4rem, 8vw, 7rem);
}
.rcl-footer a:not(.rcl-btn) { color: #E6E6EA; text-decoration: none; }
.rcl-footer a:not(.rcl-btn):hover { color: #FF6D72; }

.rcl-footer-top {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr);
	gap: 3rem 4rem;
	padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(3rem, 5vw, 4rem);
	border-bottom: 1px solid #222228;
}
.rcl-footer-brand .rcl-logo-wrap { --rcl-logo-h: 5rem; }
.rcl-footer-brand p { margin: 1.5rem 0 1.75rem; max-width: 26rem; font-size: 1.05rem; color: #C4C4CB; }

.rcl-footer-widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: 2.5rem;
}
.rcl-footer .widget-title, .rcl-footer .widgettitle {
	color: #FFFFFF;
	font-size: 1.05rem;
	margin-bottom: 1.1rem;
}
.rcl-footer-widgets ul { list-style: none; padding: 0; margin: 0; }
.rcl-footer-widgets li { padding: .35rem 0; margin: 0; font-size: .975rem; }
.rcl-footer-widgets p { font-size: .975rem; }

.rcl-colophon {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	align-items: center;
	justify-content: space-between;
	padding: 1.75rem 0 2rem;
	font-size: .875rem;
	color: #9A9AA3;
}
/* A link inside a sentence of grey text: the colour difference alone is
   under 3:1, so it carries an underline as well (WCAG 1.4.1). */
.rcl-footer .rcl-copyright a { text-decoration: underline; text-underline-offset: .2em; }

.rcl-footer-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 0; padding: 0; }
.rcl-footer-nav li { margin: 0; }
.rcl-footer-nav a { font-size: .875rem; }

@media (max-width: 991px) {
	.rcl-footer-top { grid-template-columns: 1fr; }
}


/* ===================================================================
   18. WORDPRESS CORE CLASSES
   =================================================================== */

.alignleft  { float: left;  margin: .4rem 1.75rem 1.25rem 0; }
.alignright { float: right; margin: .4rem 0 1.25rem 1.75rem; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignnone { margin: 1.25rem 0; }
.wp-caption { max-width: 100%; margin-bottom: 1.5rem; }
.wp-caption-text { font-size: .875rem; color: var(--rcl-ink-3); margin-top: .5rem; }
.clearfix::after { content: ""; display: table; clear: both; }


/* ===================================================================
   19. MOTION
   =================================================================== */

.rcl-switching *, .rcl-switching *::before, .rcl-switching *::after { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}