/**
 * Railway District directory and organization pages.
 *
 * Colours come from the NectarBlocks global palette custom properties, so a
 * palette change in the editor flows through here without touching this file.
 * Typography is inherited via the theme's `nectar-font-*` classes rather than
 * declared, for the same reason.
 *
 * Corner radius is 0 throughout, deliberately. If the ~6px radius is ever
 * adopted, it is one value here plus the theme's `button-styling` setting.
 */

:root {
	--rd-radius: 0;
	--rd-line: rgba(0, 0, 0, 0.12);
	--rd-muted: #4a4844;
}

/* Room before the footer. The templates end flush against the global footer
   band otherwise, which reads as the page having been cut off.
   
   The doubled class is load-bearing. The theme ships
   `@media (min-width: 1025px) { .container { padding-bottom: 0 } }`, and our
   wrapper carries `container` too — same specificity, theme wins on order, so a
   plain `.rd-wrap` silently lost on desktop and held on mobile. `.rd-wrap.rd-wrap`
   outspecifies it without reaching for !important. */
/* padding-BOTTOM only, never the shorthand. `padding: 0 0 120px` also sets left
   and right to 0, and once the doubled class started winning the cascade that
   quietly stripped the theme container's horizontal padding off every page —
   text ran to the edge of the browser and the side panel overflowed. */
.rd-wrap.rd-wrap { padding-bottom: 120px; }
@media (max-width: 690px) { .rd-wrap.rd-wrap { padding-bottom: 88px; } }

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

.rd-hero { padding: 72px 0 40px; }
.rd-label {
	color: var(--accentPrimary, #ff3600);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.78rem;
	margin: 0 0 10px;
}
.rd-hero h1 { margin: 0 0 14px; }
.rd-hero p { max-width: 620px; margin: 0; color: var(--rd-muted); }

/* ------------------------------------------------------------- filters */

.rd-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0 0 32px;
	border-bottom: 1px solid var(--rd-line);
	margin-bottom: 40px;
}
.rd-filters a {
	display: inline-block;
	padding: 8px 14px;
	border: 1px solid var(--rd-line);
	border-radius: var(--rd-radius);
	font-size: 0.85rem;
	text-decoration: none;
	color: var(--dark, #000);
	line-height: 1.2;
}
.rd-filters a:hover { border-color: var(--dark, #000); }
.rd-filters a[aria-current="page"] {
	background: var(--dark, #000);
	border-color: var(--dark, #000);
	color: var(--light, #fff);
}

/* --------------------------------------------------------------- grid */

.rd-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}
@media (max-width: 999px) { .rd-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 690px)  { .rd-grid { grid-template-columns: 1fr; } }

.rd-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	border: 1px solid var(--rd-line);
	border-radius: var(--rd-radius);
	padding: 24px;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease;
}
.rd-card:hover { border-color: var(--dark, #000); }

/* Logos vary wildly in aspect ratio, so cap the box and letterbox inside it
   rather than trusting the artwork to behave. */
.rd-card__logo {
	height: 64px;
	display: flex;
	align-items: center;
}
.rd-card__logo img {
	max-height: 64px;
	max-width: 160px;
	width: auto;
	height: auto;
	object-fit: contain;
}
/* No logo: an initial tile, so the grid does not develop holes. */
.rd-card__initial {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--accentLight, #e8e6e0);
	color: var(--dark, #000);
	font-size: 1.4rem;
}
.rd-card__name { margin: 0; }
.rd-card__meta { font-size: 0.8rem; color: var(--rd-muted); margin: 0; }
.rd-card__excerpt { margin: 0; font-size: 0.92rem; color: var(--rd-muted); }

.rd-empty {
	padding: 56px 0;
	color: var(--rd-muted);
	border-top: 1px solid var(--rd-line);
}

/* ------------------------------------------------------ single columns */

.rd-cols {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 56px;
	align-items: start;
	padding-bottom: 60px;
}
@media (max-width: 860px) {
	.rd-cols { grid-template-columns: 1fr; gap: 40px; }
	/* Where and when they are open, before what is on. Someone reading this on a
	   phone is often standing outside deciding whether to walk in, and the
	   address should not be below two lists of events. */
	.rd-cols .rd-side { order: -1; }
}

.rd-panel {
	background: var(--accentLight, #e8e6e0);
	padding: 28px;
	border-radius: var(--rd-radius);
}
.rd-panel h2 { margin: 0 0 16px; }
.rd-dl { margin: 0; }
.rd-dl dt {
	color: var(--accentPrimary, #ff3600);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.72rem;
	margin: 16px 0 3px;
}
.rd-dl dt:first-child { margin-top: 0; }
.rd-dl dd { margin: 0; }
.rd-dl a { color: var(--accentDark, #dc2e00); }

.rd-btn {
	display: inline-block;
	background: var(--accentDark, #dc2e00);
	color: var(--light, #fff);
	padding: 13px 22px;
	border-radius: var(--rd-radius);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.78rem;
	text-decoration: none;
	margin-top: 20px;
}
.rd-btn:hover { background: #b82600; color: var(--light, #fff); }

/* ------------------------------------------------------------- listing */

.rd-section { margin-top: 56px; }
.rd-section > h2 { margin: 0 0 6px; }
.rd-section__note { color: var(--rd-muted); margin: 0 0 20px; font-size: 0.92rem; }

.rd-list { border-top: 1px solid var(--rd-line); }
.rd-item {
	display: grid;
	grid-template-columns: 120px 72px 1fr;
	gap: 20px;
	padding: 16px 0;
	border-bottom: 1px solid var(--rd-line);
	align-items: baseline;
}
@media (max-width: 560px) {
	.rd-item { grid-template-columns: 72px 1fr; gap: 4px 12px; }
	.rd-item__when { grid-column: 1 / -1; }
}
.rd-item__when {
	color: var(--accentPrimary, #ff3600);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.74rem;
}
.rd-item__title { margin: 0; }
.rd-item__title a { color: inherit; text-decoration: none; }
.rd-item__title a:hover { text-decoration: underline; }
.rd-item__sub { margin: 2px 0 0; font-size: 0.88rem; color: var(--rd-muted); }

/* Regulars sit at lower visual weight than one-off events, which is the whole
   reason they are allowed on the calendar at all. */
.rd-item--regular .rd-item__title { font-weight: 400; }
.rd-item--regular .rd-item__when { color: var(--rd-muted); }

/* Pagination only appears past 48 organizations; keep it quiet but styled. */
.rd-wrap .nav-links {
	display: flex;
	gap: 8px;
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--rd-line);
}
.rd-wrap .nav-links .page-numbers {
	padding: 8px 13px;
	border: 1px solid var(--rd-line);
	border-radius: var(--rd-radius);
	text-decoration: none;
	color: var(--dark, #000);
	font-size: 0.85rem;
}
.rd-wrap .nav-links .page-numbers.current {
	background: var(--dark, #000);
	border-color: var(--dark, #000);
	color: var(--light, #fff);
}

/* =====================================================================
   Events — the day stream
   ===================================================================== */

/* The one thing on today. Brand red with BLACK display type: at this size it
   is large text, where 5.78:1 passes comfortably. Buttons inside it still use
   white-on-deep-red, because a button label is small text. */
/* Was a solid brand-red band across the page, which reads as an alert rather
   than a highlight: red at that size is the colour of something being wrong.
   The warm neutral with a red eyebrow says "look here" without saying "stop". */
.rd-next {
	background: var(--accentLight, #e8e6e0);
	border-left: 4px solid var(--accentPrimary, #ff3600);
	padding: 28px 32px;
	margin-bottom: 40px;
}
@media (max-width: 690px) { .rd-next { padding: 22px 20px; } }
.rd-next__eyebrow {
	color: var(--accentDark, #dc2e00);
	margin: 0 0 8px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.75rem;
	color: var(--dark, #000);
}
.rd-next__title { margin: 0 0 8px; color: var(--dark, #000); max-width: 22ch; }
.rd-next__title a { color: inherit; text-decoration: none; }
.rd-next__title a:hover { text-decoration: underline; }
.rd-next__meta { margin: 0; color: var(--dark, #000); }

/* ------------------------------------------------------------- filters */

.rd-filters-bar {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--rd-line);
	margin-bottom: 8px;
}
.rd-search { display: flex; gap: 8px; max-width: 460px; }
.rd-search input[type="search"] {
	flex: 1;
	padding: 11px 14px;
	border: 1px solid var(--rd-line);
	border-radius: var(--rd-radius);
	font-size: 0.92rem;
	background: #fff;
}
.rd-search button {
	padding: 11px 18px;
	border: 1px solid var(--dark, #000);
	background: var(--dark, #000);
	color: var(--light, #fff);
	border-radius: var(--rd-radius);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	cursor: pointer;
}

/* .rd-toggle / .rd-toggles: single definition lives with the filter bar below. */
.rd-count { margin-left: auto; font-size: 0.82rem; color: var(--rd-muted); }

/* -------------------------------------------------------------- stream */

.rd-day { padding: 22px 0 4px; }
.rd-day__head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0 0 4px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--dark, #000);
}
.rd-day__head span:first-child { margin: 0; }
.rd-day__date {
	color: var(--accentPrimary, #ff3600);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.78rem;
}

.rd-ev {
	display: grid;
	grid-template-columns: 110px 72px 1fr auto;
	gap: 20px;
	align-items: baseline;
	padding: 18px 0;
	border-bottom: 1px solid var(--rd-line);
}
@media (max-width: 640px) {
	.rd-ev { grid-template-columns: 72px 1fr; gap: 6px 12px; }
	.rd-ev__when { grid-column: 1 / -1; }
	.rd-ev__cta  { grid-column: 2; margin-top: 8px; }
}

/* --------------------------------------------------------- the logo slot
 *
 * A fixed column that stays even when empty, because a list where some rows
 * are indented and some are not is harder to scan than one with a few gaps.
 * `align-self: start` rather than the row's baseline: an image has no
 * baseline, and letting it sit on one drops it below the title it belongs to.
 */
.rd-ev__logo,
.rd-item__logo {
	width: 72px;
	align-self: start;
}
/* 72 wide by 40 tall, not a 44px square.
 *
 * These logos are two different shapes: round marks (OKLA, the Chamber) and long
 * wordmarks (Spaceship Earth is 3.5:1, Common Roots nearly 8:1). A square slot
 * serves the round ones and shrinks the wordmarks to an illegible sliver. A wide
 * slot with a height cap lets each hit whichever limit it reaches first.
 *
 * Never use the `thumbnail` size here: WordPress hard-crops it to 150x150, which
 * turned "SPACESHIP EARTH COFFEE CO." into "SHIP / FFEE C" on the live page. */
.rd-ev__logo img,
.rd-item__logo img {
	display: block;
	max-width: 100%;
	max-height: 40px;
	width: auto;
	height: auto;
	object-fit: contain;
	object-position: left center;
}
/* Regulars sit at lower weight, and their logo should not shout either. */
.rd-ev--regular .rd-ev__logo img { opacity: 0.55; }
.rd-ev__when {
	color: var(--accentPrimary, #ff3600);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.76rem;
	white-space: nowrap;
}
.rd-ev__title { margin: 0; }
.rd-ev__title a { color: inherit; text-decoration: none; }
.rd-ev__title a:hover { text-decoration: underline; }
.rd-ev__meta { margin: 3px 0 0; font-size: 0.86rem; color: var(--rd-muted); }

/* Regulars are present but quiet. This is the entire reason they are allowed
   on the calendar: a week with three concerts and eight weekly things has to
   still read as "three concerts". */
.rd-ev--regular { padding: 11px 0; }
.rd-ev--regular .rd-ev__when { color: var(--rd-muted); }
.rd-ev--regular .rd-ev__title { font-size: 0.95rem; font-weight: 400; color: var(--rd-muted); }
.rd-ev--regular .rd-ev__meta { font-size: 0.8rem; }
.rd-ev__weekly {
	display: inline-block;
	margin-right: 6px;
	font-size: 0.66rem;
	letter-spacing: 0.1em;
	color: var(--rd-muted);
}

/* A festival is one card, never forty rows. */
.rd-ev--festival {
	background: var(--dark, #000);
	color: var(--light, #fff);
	padding: 24px;
	border-bottom: 0;
	margin: 8px 0;
}
.rd-ev--festival .rd-ev__when { color: var(--accentPrimary, #ff3600); }
.rd-ev--festival .rd-ev__title a,
.rd-ev--festival .rd-ev__title { color: var(--light, #fff); }
.rd-ev--festival .rd-ev__meta { color: rgba(255, 255, 255, 0.75); }

.rd-btn--small { margin-top: 0; padding: 9px 15px; font-size: 0.72rem; }
.rd-btn--onred { background: var(--dark, #000); color: var(--light, #fff); }
.rd-btn--onred:hover { background: #222; color: var(--light, #fff); }

.rd-none { padding: 64px 0; border-top: 1px solid var(--rd-line); }
.rd-none p { color: var(--rd-muted); max-width: 46ch; }

.rd-truncated {
	margin: 24px 0 0;
	padding: 12px 16px;
	background: var(--accentLight, #e8e6e0);
	font-size: 0.86rem;
	color: var(--rd-muted);
}

/* ------------------------------------------------------------ event page */

.rd-back { margin: 24px 0 0; font-size: 0.85rem; }
.rd-back a { color: var(--accentDark, #dc2e00); text-decoration: none; }
.rd-back a:hover { text-decoration: underline; }

.rd-hero--event { padding-top: 24px; }
.rd-event-when { margin: 0 0 4px; font-size: 1.05rem; }
.rd-event-org { margin: 0 0 20px; color: var(--rd-muted); }
.rd-event-org a { color: var(--accentDark, #dc2e00); }
.rd-past-note { margin: 0; color: var(--rd-muted); font-style: italic; }

/* ------------------------------------------------------- the top of an event
 *
 * Details on the left, the picture on the right, and the details vertically
 * centred against it.
 *
 * What gets shared for an event is nearly always a flyer, and a flyer is
 * portrait. Run full width it towers over the page and shoves the actual
 * details below the fold. Beside them it reads as what it is, and the same
 * column works for a wide photo without either being cropped, which is the
 * point: we cannot police what people send.
 */
.rd-eventtop { margin-bottom: 56px; }

@media (min-width: 861px) {
	.rd-eventtop.has-flyer {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 56px;
		align-items: center;
	}
	.rd-eventtop.has-flyer .rd-hero--event { padding: 8px 8px 8px 0; }
	.rd-eventtop.has-flyer .rd-flyer { margin: 0; }
}

/* The flyer keeps whatever ratio the participant made it in. Cropping someone's
   poster to fit a grid is how you lose the information printed on it.
   
   The band stays everywhere EXCEPT inside .rd-eventtop. It exists to stop a
   portrait flyer floating in the middle of a full-width row, which is still what
   happens on a district-event page — dropping it there left the Christmas Parade
   poster hanging in white space. In a column of its own it has nothing to float
   in, so the box is what would be doing nothing. */
.rd-flyer { margin: 0 0 48px; background: var(--accentLight, #e8e6e0); padding: 24px; text-align: center; }
.rd-eventtop .rd-flyer { background: none; padding: 0; }
.rd-flyer img {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	max-height: 620px;
	width: auto;
	height: auto;
}

/* Stacked, the picture needs an edge of its own or it bleeds into the page. */
@media (max-width: 860px) {
	.rd-flyer img {
		max-height: 70vh;
		box-shadow: 0 2px 18px rgba(0, 0, 0, 0.16);
	}
}

.rd-fest-note { margin: 24px 0 0; padding: 12px 16px; background: var(--accentLight, #e8e6e0); font-size: 0.9rem; }
.rd-panel--quiet { background: transparent; border: 1px solid var(--rd-line); margin-top: 20px; }
.rd-panel--quiet p { margin: 0 0 4px; }

/* The home page's live upcoming-events list. Wider time column than the calendar's,
   because this one prints the weekday, date AND time in one cell. */
.rd-upcoming { border-top: 1px solid var(--rd-line); }
.rd-upcoming .rd-item { grid-template-columns: 175px 1fr; }
@media (max-width: 560px) { .rd-upcoming .rd-item { grid-template-columns: 1fr; } }
.rd-upcoming .rd-item--regular .rd-item__title { font-weight: 400; color: var(--rd-muted); font-size: 0.95rem; }
.rd-upcoming .rd-item--regular .rd-item__when { color: var(--rd-muted); }

/* =====================================================================
   Representative area — front-end, never wp-admin
   ===================================================================== */

.rd-fe { max-width: 720px; }
.rd-fe__org { padding: 0 0 40px; border-bottom: 1px solid var(--rd-line); margin-bottom: 40px; }
.rd-fe__org:last-of-type { border-bottom: 0; }
.rd-fe__sub { margin: 28px 0 8px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accentPrimary, #ff3600); }
.rd-fe__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 12px 0 0; }
.rd-fe__small { font-size: 0.85rem; color: var(--rd-muted); margin: 10px 0 0; }

.rd-note { padding: 12px 16px; margin: 0 0 24px; font-size: 0.92rem; }
.rd-note--good { background: var(--accentLight, #e8e6e0); }
.rd-note--bad { background: #fbe9e7; border-left: 3px solid var(--accentDark, #dc2e00); }

/* A status word carries more than a colour would, so it is spelled out. */
.rd-status { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; }
.rd-status--pending { color: #8a6d00; }
.rd-status--publish { color: #1a7f37; }
.rd-status--draft { color: var(--rd-muted); }

.rd-btn--ghost {
	background: transparent;
	color: var(--dark, #000);
	border: 1px solid var(--rd-line);
}
.rd-btn--ghost:hover { background: transparent; border-color: var(--dark, #000); color: var(--dark, #000); }

/* ------------------------------------------------------------- forms */

.rd-form { margin-top: 8px; }
.rd-form label { display: block; margin: 0 0 18px; font-size: 0.9rem; }
.rd-form input[type="text"], .rd-form input[type="url"], .rd-form input[type="email"],
.rd-form input[type="tel"], .rd-form input[type="datetime-local"], .rd-form input[type="password"],
.rd-form select, .rd-form textarea, .rd-fe .login-username input, .rd-fe .login-password input {
	display: block;
	width: 100%;
	margin-top: 5px;
	padding: 11px 13px;
	border: 1px solid var(--rd-line);
	border-radius: var(--rd-radius);
	font-size: 1rem;
	font-family: inherit;
	background: #fff;
}
.rd-form input:focus, .rd-form textarea:focus, .rd-form select:focus {
	outline: 2px solid var(--accentDark, #dc2e00);
	outline-offset: 1px;
}
.rd-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .rd-form__row { grid-template-columns: 1fr; gap: 0; } }

.rd-form__checks { border: 1px solid var(--rd-line); padding: 14px 16px; margin: 0 0 18px; }
.rd-form__checks legend { padding: 0 6px; font-size: 0.85rem; color: var(--rd-muted); }
.rd-check { display: inline-flex; align-items: center; gap: 7px; margin: 0 16px 6px 0 !important; font-size: 0.9rem; }
.rd-check input { width: auto !important; margin: 0 !important; display: inline-block !important; }

.rd-form button { border: 0; cursor: pointer; font-family: inherit; }
.rd-fe .login-submit input { border: 0; cursor: pointer; }

/* ------------------------------------------------------- festival + map */

.rd-festival { padding: 8px 0 0; }
.rd-festival > h2 { margin: 0 0 20px; }

.rd-map--public {
	position: relative;
	margin: 0 0 36px;
	border: 1px solid var(--rd-line);
	border-radius: var(--rd-radius);
	background: var(--accentLight, #e8e6e0);
}
.rd-map__canvas { height: 420px; }
@media (max-width: 690px) { .rd-map__canvas { height: 320px; } }

/* Until the script says otherwise the canvas is an empty box, so keep it out of
   the flow entirely. A grey rectangle where a map failed reads as broken; no
   rectangle at all just reads as a list, which is what the page still is. */
.rd-map--public:not(.is-live) { border: 0; background: none; }
.rd-map--public:not(.is-live) .rd-map__canvas { display: none; }
.rd-map__fallback {
	margin: 0;
	padding: 10px 14px;
	font-size: 0.86rem;
	color: var(--rd-muted);
	border-top: 1px solid var(--rd-line);
}
.rd-map--public:not(.is-live) .rd-map__fallback { display: none; }

.rd-map__hint { display: none; }
.rd-map--public.needs-tap .rd-map__hint {
	display: block;
	position: absolute;
	z-index: 500;
	left: 12px;
	bottom: 58px;
	margin: 0;
	padding: 6px 10px;
	background: rgba(29, 35, 39, 0.86);
	color: #fff;
	font-size: 0.78rem;
	pointer-events: none;
}

/* Doubled up with .leaflet-marker-icon on purpose. Leaflet's stylesheet loads
   after this one and sets `.leaflet-marker-icon { display: block }` at the same
   specificity, which silently wins and drops the number into the top-left corner
   of the circle instead of centering it. */
.rd-pin.leaflet-marker-icon {
	display: grid;
	box-sizing: border-box;
	place-items: center;
	background: var(--accentDark, #dc2e00);
	color: #fff;
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1;
}
.rd-pin__n { display: block; }

.rd-pop__title { display: block; margin-bottom: 3px; }
.rd-pop__line,
.rd-pop__addr { display: block; color: var(--rd-muted); }
.rd-pop__links { display: block; margin-top: 6px; }
.rd-pop__links a { margin-right: 10px; color: var(--accentDark, #dc2e00); }

.rd-roster { list-style: none; margin: 0; padding: 0; }
.rd-roster__item { list-style: none; }
.rd-roster__item {
	display: flex;
	gap: 14px;
	padding: 18px 0;
	border-top: 1px solid var(--rd-line);
}
.rd-roster__item:last-child { border-bottom: 1px solid var(--rd-line); }
.rd-roster__n {
	flex: 0 0 30px;
	height: 30px;
	cursor: default;
	display: grid;
	place-items: center;
	background: var(--accentDark, #dc2e00);
	color: #fff;
	border-radius: 50%;
	font-size: 0.85rem;
	font-weight: 700;
	text-decoration: none;
}
.rd-roster__n[role="button"] { cursor: pointer; }
.rd-roster__n[role="button"]:hover,
.rd-roster__n[role="button"]:focus-visible { background: var(--accentPrimary, #ff3600); }
.rd-roster__item.no-pin { padding-left: 44px; }
.rd-roster__body { flex: 1; }
.rd-roster__title { margin: 0 0 4px; }
.rd-roster__title a { color: inherit; text-decoration: none; }
.rd-roster__title a:hover { color: var(--accentPrimary, #ff3600); }
.rd-roster__line { margin: 0 0 6px; }
.rd-roster__events { margin: 6px 0; padding-left: 18px; }
.rd-roster__time { color: var(--rd-muted); }
.rd-roster__addr { margin: 4px 0 0; font-size: 0.9rem; color: var(--rd-muted); }
.rd-roster__addr a { margin-left: 8px; color: var(--accentDark, #dc2e00); }

/* ------------------------------------------------------ festival callout */

/* A festival is an umbrella over the whole district, so it gets a band of its
   own above the stream rather than competing as one more row in it. */
.rd-fests { display: grid; gap: 12px; margin: 24px 0 8px; }
.rd-fest {
	display: grid;
	gap: 4px;
	padding: 24px 28px;
	border: 2px solid var(--dark, #000);
	border-radius: var(--rd-radius);
	text-decoration: none;
	color: inherit;
	transition: background 0.15s ease, color 0.15s ease;
}
/* SUPERSEDED 2026-09-22 (turn-3). These assumed a DARK hover ground, which no
   longer exists — .rd-fest hovers as a soft white card now. Left live, they
   paint white text onto a white card: the turn-3 block happened to override
   the label/meta/go selectors and MISSED `.is-past:hover .rd-fest__title`, so
   every title in "They come round every year" vanished on hover. Neutralised
   at source rather than layering a fourth override, because the next person to
   miss one gets the same invisible bug. */
/*
.rd-fest:hover { background: var(--dark, #000); color: var(--light, #fff); }
.rd-fest:hover .rd-fest__label,
.rd-fest:hover .rd-fest__meta,
.rd-fest:hover .rd-fest__go { color: var(--light, #fff); }
*/

/* On now: brand red band with black display type. At h3 size this is large
   text, where 5.78:1 passes; the small print inside stays black for the same
   reason the buttons elsewhere use white-on-deep-red. */
.rd-fest.is-now {
	background: var(--accentPrimary, #ff3600);
	border-color: var(--accentPrimary, #ff3600);
	color: var(--dark, #000);
}
/* SUPERSEDED (turn-3): is-now hovers as a red-TINT card, not a solid red slab. */
/*
.rd-fest.is-now:hover { background: var(--accentDark, #dc2e00); border-color: var(--accentDark, #dc2e00); color: var(--light, #fff); }
*/
.rd-fest.is-now .rd-fest__label,
.rd-fest.is-now .rd-fest__meta,
.rd-fest.is-now .rd-fest__go { color: var(--dark, #000); }
/* SUPERSEDED (turn-3). */
/*
.rd-fest.is-now:hover .rd-fest__label,
.rd-fest.is-now:hover .rd-fest__meta,
.rd-fest.is-now:hover .rd-fest__go { color: var(--light, #fff); }
*/

.rd-fest__label {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.74rem;
	color: var(--accentPrimary, #ff3600);
}
.rd-fest__title { display: block; }
.rd-fest__meta { font-size: 0.92rem; color: var(--rd-muted); }
/* Not uppercase. This is a whole sentence ("What it is, and when it comes back"),
   and letterspaced caps belong on data — a status, a code, a count — not on prose.
   Set as a sentence it is also simply easier to read at this size. */
.rd-fest__go {
	margin-top: 6px;
	font-size: 0.88rem;
	letter-spacing: 0;
	text-decoration: underline;
}

.rd-fest__excerpt { font-size: 0.95rem; margin-top: 4px; }

/* Already happened: still a real link, just not competing with what is next. */
.rd-fest.is-past { border-color: var(--rd-line); }
.rd-fest.is-past .rd-fest__title { color: var(--rd-muted); }
/* SUPERSEDED (turn-3) — THIS was the disappearing-title bug. */
/*
.rd-fest.is-past:hover .rd-fest__title { color: var(--light, #fff); }
*/

/* --------------------------------------------------------- subscribe form */

.rd-subscribe { max-width: 620px; }
.rd-subscribe .rd-form label { display: block; margin: 0 0 16px; }
.rd-subscribe input[type="email"],
.rd-subscribe input[type="text"],
.rd-subscribe input[type="tel"],
.rd-subscribe select {
	display: block;
	width: 100%;
	margin-top: 5px;
	padding: 11px 14px;
	border: 1px solid var(--rd-line);
	border-radius: var(--rd-radius);
	font-size: 1rem;
	background: #fff;
}
.rd-choices {
	border: 1px solid var(--rd-line);
	border-radius: var(--rd-radius);
	padding: 18px 20px;
	margin: 0 0 20px;
}
.rd-choices legend { padding: 0 8px; font-weight: 600; }
.rd-choices__hint { margin: 0 0 12px; font-size: 0.88rem; color: var(--rd-muted); }
/* Consent is its own decision, so it gets its own box rather than sitting in
   the run of ordinary fields where it reads as one more detail. */
.rd-choices--sms { background: var(--accentLight, #e8e6e0); }
.rd-check {
	display: flex !important;
	gap: 9px;
	align-items: flex-start;
	margin: 0 0 8px !important;
	font-weight: 400;
	line-height: 1.4;
}
.rd-check input { margin-top: 3px; flex: 0 0 auto; }
.rd-fineprint { font-size: 0.85rem; color: var(--rd-muted); }
.rd-btn--quiet {
	background: none;
	color: var(--rd-muted);
	border: 1px solid var(--rd-line);
	margin-left: 8px;
}
.rd-btn--quiet:hover { background: none; color: var(--dark, #000); border-color: var(--dark, #000); }
.rd-note { padding: 12px 16px; border-radius: var(--rd-radius); margin: 0 0 20px; }
.rd-note--good { background: var(--accentLight, #e8e6e0); }
.rd-note--bad { background: #fcf0ec; border-left: 3px solid var(--accentDark, #dc2e00); }

/* The theme uppercases label text. That is fine on a one-word field name and
   wrong on a sentence: the SMS consent line is a disclosure someone has to
   actually read before agreeing, and all-caps measurably slows reading. Same
   for the checkbox lists, which are proper nouns. */
.rd-subscribe .rd-check,
.rd-subscribe .rd-choices legend,
.rd-subscribe .rd-choices__hint,
.rd-subscribe .rd-fineprint,
.rd-subscribe .rd-note {
	text-transform: none;
	letter-spacing: normal;
}
.rd-subscribe .rd-choices--sms .rd-check { font-size: 0.9rem; }

/* ------------------------------------------------------------- month grid */

 /* The design is a phone screen. Left to fill a desktop container the cells
   become 170px squares holding one small number, which reads as an empty
   calendar rather than a quiet month. Cap it and the proportions hold. */
.rd-month { margin: 8px 0 0; max-width: 760px; }
.rd-month__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 18px;
}
.rd-month__head h2 { margin: 0; }
.rd-month__nav {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--accentDark, #dc2e00);
	text-decoration: none;
	white-space: nowrap;
}
.rd-month__nav:hover { text-decoration: underline; }

/* minmax(0,1fr), not 1fr. A plain 1fr floors at the cell's content width, so on
   a narrow phone the seven columns refuse to shrink, the block grows wider than
   the viewport and Saturday ends up off screen. */
.rd-month__dow,
.rd-month__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.rd-month__dow {
	margin-bottom: 6px;
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--rd-muted);
	text-align: center;
}

/* Named .rd-cell, not .rd-day. The stream already had a .rd-day for "one day of
   the list" and these rules load later, so every day section in the list view was
   inheriting aspect-ratio:1, centered flex and a grey background from the month
   grid. That is what turned the stream into a column of 344px grey blocks with
   the headings floating in the middle of them. */
.rd-cell {
	aspect-ratio: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	background: var(--accentLight, #e8e6e0);
	color: var(--dark, #000);
	text-decoration: none;
	font-size: 0.95rem;
	border: 1px solid transparent;
}
.rd-cell:hover { border-color: var(--dark, #000); color: var(--dark, #000); }
/* Days from the months either side keep the rows square without pretending to
   be part of this month. */
.rd-cell.is-outside { background: none; color: #b5b3ad; }
.rd-cell.is-empty { background: none; border-color: var(--rd-line); }
.rd-cell.is-today { font-weight: 700; box-shadow: inset 0 0 0 1px var(--dark, #000); }
.rd-cell.is-selected {
	background: var(--dark, #000);
	border-color: var(--dark, #000);
	color: var(--light, #fff);
}
.rd-cell__n { line-height: 1; }
/* Reserved whether or not there are dots, so day numbers stay on one baseline
   across the grid instead of jumping by a few pixels. */
.rd-cell__dots { display: flex; gap: 3px; height: 4px; align-items: center; }

.rd-dot { width: 4px; height: 4px; border-radius: 50%; display: inline-block; }
.rd-dot--event { background: var(--accentPrimary, #ff3600); }
.rd-dot--festival { background: var(--dark, #000); }
.rd-dot--regular { background: #b5b3ad; }
.rd-cell.is-selected .rd-dot--festival { background: var(--light, #fff); }

.rd-month__key {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	padding-top: 14px;
	font-size: 0.72rem;
	color: var(--rd-muted);
}
.rd-month__key span { display: flex; gap: 6px; align-items: center; }

.rd-month__day {
	background: var(--accentLight, #e8e6e0);
	padding: 28px;
	margin-top: 28px;
}
.rd-month__day > h3 { margin: 0 0 18px; }
.rd-month__empty { margin: 0; color: var(--rd-muted); }
/* The day panel reuses the stream's rows, so it needs the stream's rules for
   them rather than a second set that drifts. */
.rd-month__day .rd-ev:first-child { border-top: 1px solid var(--rd-line); }

@media (max-width: 560px) {
	.rd-month__day { padding: 20px 16px; }
	.rd-cell { font-size: 0.8rem; }
	.rd-month__dow { font-size: 0.55rem; }
	.rd-month__dow,
	.rd-month__grid { gap: 2px; }
	/* The month name and both jump links do not fit on one line at this width,
	   and refusing to wrap was what pushed the grid past the screen edge. */
	.rd-month__head { flex-wrap: wrap; row-gap: 6px; }
	.rd-month__head h2 { order: -1; flex: 1 0 100%; font-size: 1.5rem; }
	.rd-month__nav { flex: 1; }
	.rd-month__nav:last-child { text-align: right; }
}

/* --------------------------------------------------------------- follow */

.rd-btn--follow { white-space: normal; text-align: center; }


/* --------------------------------------------------------- district map */

.rd-districtmap { margin: 8px 0 0; }
.rd-districtmap .rd-map--public { margin-bottom: 28px; }
.rd-districtmap .rd-map__canvas { height: 460px; }
@media (max-width: 690px) { .rd-districtmap .rd-map__canvas { height: 340px; } }
/* The rows under each pin are the stream's own rows, so they need its border
   rather than a second treatment that drifts out of step with it. */
.rd-districtmap .rd-roster__item .rd-ev { border-bottom: 1px solid var(--rd-line); }
.rd-districtmap .rd-roster__item .rd-ev:last-child { border-bottom: 0; }
.rd-roster__more { margin: 10px 0 0; font-size: 0.88rem; }
.rd-roster__more a { color: var(--accentDark, #dc2e00); }

/* A shut business. Loud enough that nobody drives over, not so loud that the
   page reads as an error. */
.rd-closed {
	background: var(--accentPrimary, #ff3600);
	color: var(--dark, #000);
	padding: 14px 18px;
	margin: 16px 0 0;
	max-width: 620px;
}
.rd-ev__summary { margin: 4px 0 0; font-size: 0.9rem; color: var(--rd-muted); }

/* ==================================================================
   Filter bar, rebuilt for a thumb
   ================================================================== */

.rd-filters-bar {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--rd-line);
	margin-bottom: 8px;
}

/* The view is a mode, not a filter, so it gets the one control that looks
   like a mode: a segmented switch, full width, three equal thumb targets. */
.rd-seg {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border: 1px solid var(--dark, #000);
	border-radius: var(--rd-radius);
	overflow: hidden;
	max-width: 420px;
}
.rd-seg a {
	padding: 12px 8px;
	text-align: center;
	text-decoration: none;
	color: var(--dark, #000);
	font-size: 0.85rem;
	border-right: 1px solid var(--dark, #000);
}
.rd-seg a:last-child { border-right: 0; }
.rd-seg a[aria-current="true"] { background: var(--dark, #000); color: var(--light, #fff); }

/* One line that scrolls, rather than four buttons wrapping onto three rows and
   pushing the actual events off the bottom of a phone. */

/* Everything else folds away. Server-rendered `open` when something is actually
   filtering, so an unfiltered page is tidy and a filtered one never hides why
   the results look short. */

/* Switches that look pressable. They were plain underlined text, which read as
   a caption rather than a control. */

.rd-filters-bar .rd-count {
	margin: 0;
	font-size: 0.8rem;
	color: var(--rd-muted);
}

@media (max-width: 690px) {
	.rd-seg { max-width: none; }
	.rd-hero { padding: 40px 0 24px; }
}

/* The theme's display line-height is set for one-line headings. At phone width
   "Everything happening downtown" wraps to three lines and the gaps between
   them read as three separate headings. */
.rd-hero h1{ line-height: 1.06; }
@media (max-width: 690px) {
	.rd-hero h1 { line-height: 1.02; letter-spacing: -0.01em; }
}

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

/* Full width of the column, and never cropped or squashed.
 *
 * Two treatments, chosen in PHP from the image's own dimensions, because CSS
 * cannot branch on them. Setting width:100% and max-height together looks like
 * it should work and instead forces both axes, which stretched a 1.78 photo to
 * 1.95 on desktop. No object-fit anywhere: cover crops, contain adds bars, and
 * both overrule the merchant's choice of picture.
 */
.rd-orghero { margin: 0 0 4px; }
.rd-orghero img { display: block; margin: 0 auto; }

/* Landscape and square-ish: fill the column, height follows. */
.rd-orghero.is-wide img {
	width: 100%;
	height: auto;
}

/* Taller than it is wide: held to a height and centered, so it stays a picture
   on a page rather than a page-length picture. */
.rd-orghero.is-upright img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 72vh;
}

/* An identity mark, not a second headline. */

@media (max-width: 690px) {
	.rd-hero--afterphoto { padding-top: 20px; }
	
}

/* A date and a title cannot answer "would I want to go". The kind of thing it
   is, what it costs and a line about it can. */
.rd-item__summary {
	margin: 4px 0 0;
	font-size: 0.9rem;
	color: var(--rd-muted);
	max-width: 60ch;
}
/* "SAT 29 AUG · 8:00 PM" was wrapping onto two lines in a 120px column. */
.rd-item { grid-template-columns: 155px 72px 1fr; }
@media (max-width: 560px) { .rd-item { grid-template-columns: 72px 1fr; } }

/* ------------------------------------------------- the identity mark */

/* A logo sitting on the edge of the photo, the way a profile picture does.
   It is a mark, not a headline: the h1 underneath already says the name. */
.rd-orghero { position: relative; }
.rd-orghero.has-mark { margin-bottom: 0; }

.rd-mark {
	display: grid;
	place-items: center;
	width: 132px;
	height: 132px;
	padding: 18px;
	border-radius: 50%;
	background: var(--light, #fff);
	box-shadow: 0 0 0 1px var(--rd-line);
	box-sizing: border-box;
}
/* Overlapping the picture, centered on its lower edge. */
.rd-orghero.has-mark .rd-mark {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 50%);
}
/* Contain, always. A logo is the one image nobody will forgive you for cropping. */
.rd-mark img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
/* No photo to hang off, so it just sits above the name. */
.rd-mark--alone { margin: 0 0 18px; }

/* Room for the half of the circle that hangs below the picture. */
.rd-hero--undermark { padding-top: 84px; }

@media (max-width: 690px) {
	.rd-mark { width: 104px; height: 104px; padding: 14px; }
	.rd-hero--undermark { padding-top: 66px; }
}

/* ------------------------------------------------- past-year photos */

.rd-gallery-strip { margin: 40px 0 0; }
.rd-gallery-strip > h2 { margin: 0 0 18px; }

/*
 * Justified rows, not a grid. A grid of equal columns forces every photo into
 * the same width, so one upright shot sets a row height the landscape ones then
 * float inside. Fixing the HEIGHT and letting width follow gives even rows with
 * every aspect ratio left exactly as it was taken, which is the same promise the
 * organisation hero makes.
 */
.rd-gallery-strip__items {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.rd-gallery-strip figure {
	margin: 0;
	min-width: 0;
}
.rd-gallery-strip img {
	display: block;
	height: 240px;
	width: auto;
	max-width: 100%;
	border-radius: 2px;
}

@media (max-width: 690px) {
	.rd-gallery-strip img { height: 160px; }
}

/* ---------------------------------------------------------------------------
 * Logo wall — [rd_organizations]
 *
 * Built from the directory, so a closure removes a logo from the home page
 * without anyone remembering the home page exists. Logos are wildly different
 * shapes (round marks, long wordmarks), so each sits in a fixed box and is
 * scaled with object-fit: contain — which fits rather than crops.
 * ------------------------------------------------------------------------ */
.rd-logowall {
	display: grid;
	grid-template-columns: repeat(var(--rd-logowall-cols, 5), 1fr);
	gap: 32px 40px;
	list-style: none;
	/* The hand-built rows this replaced carried the section's bottom padding.
	   Without it the wall sits flush against the footer band. */
	margin: 0 0 96px;
	padding: 0;
}
/* The theme declares `li { list-style-type: disc }` on the element itself, which
   outspecifies `list-style: none` on the parent list. Every list in this file has
   to kill the marker on the ITEM, not the container. */
.rd-logowall__item {
	margin: 0;
	display: block;
	list-style: none;
}
.rd-logowall__link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 96px;
	text-decoration: none;
	transition: opacity 0.15s ease;
}
.rd-logowall__link:hover,
.rd-logowall__link:focus-visible { opacity: 0.62; }
.rd-logowall__img {
	max-width: 100%;
	max-height: 96px;
	width: auto;
	height: auto;
	object-fit: contain;
}
/* No logo yet: an initial plus the name, so the wall never shows a gap. */
.rd-logowall__initial {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-right: 10px;
	border: 1px solid var(--rd-line, #d9d6cf);
	border-radius: 50%;
	font-family: var(--nectar-h3-font-family, inherit);
	font-size: 1.3rem;
	line-height: 1;
	color: var(--rd-muted, #6b6b6b);
}
.rd-logowall__name {
	font-size: 0.9rem;
	line-height: 1.3;
	color: var(--rd-ink, inherit);
}

@media (max-width: 999px) {
	.rd-logowall { grid-template-columns: repeat(4, 1fr); gap: 24px 28px; }
}
@media (max-width: 690px) {
	.rd-logowall { grid-template-columns: repeat(2, 1fr); gap: 20px 24px; margin-bottom: 64px; }
	.rd-logowall__link { min-height: 72px; }
	.rd-logowall__img { max-height: 72px; }
}

/* ------------------------------------------------- district event editions */

.rd-hero__host { color: var(--rd-muted); margin: 6px 0 0; font-size: 0.95rem; }

.rd-invite {
	margin-top: 56px;
	padding: 32px;
	background: var(--accentLight, #e8e6e0);
	border-left: 4px solid var(--accentPrimary, #ff3600);
}
.rd-invite h2 { margin: 0 0 8px; }
.rd-invite p { margin: 0; max-width: 56ch; color: var(--rd-muted); }

.rd-editions__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rd-line); }
.rd-editions__list li {
	list-style: none;
	display: flex;
	gap: 16px;
	align-items: baseline;
	padding: 14px 0;
	border-bottom: 1px solid var(--rd-line);
}
.rd-editions__count { color: var(--rd-muted); font-size: 0.88rem; }

/* =====================================================================
   Browse pills — the discovery layer
   =====================================================================
 *
 * Adam, 2026-08-13: the old bar was "on brand but not very ready for popular
 * use". It was correct and joyless — square buttons in two rows, and the filter
 * a browsing visitor actually wants (live music? food? something for the kids?)
 * hidden behind a "Search and filters" disclosure.
 *
 * These are round on purpose, and they are the ONLY round thing on the site.
 * Radius 0 is the house rule everywhere else and stays that way. A pill reads as
 * "tap me, change what you see" in a way a square button does not, because every
 * consumer app has taught people that. Spending the exception here, on the one
 * control meant to invite play, is the point — if pills spread to cards and
 * buttons the signal is gone.
 */
.rd-browse {
	display: flex;
	gap: 8px;
	/* One line that scrolls sideways. Wrapping category pills onto three rows
	   turns a browse control into a wall. */
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: 2px;
	-webkit-overflow-scrolling: touch;
}
.rd-browse::-webkit-scrollbar { display: none; }

.rd-browse a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: 0 0 auto;
	padding: 9px 16px;
	border: 1px solid var(--rd-line);
	border-radius: 999px;
	text-decoration: none;
	color: var(--dark, #000);
	font-size: 0.9rem;
	line-height: 1.15;
	white-space: nowrap;
	transition: border-color 0.12s ease, background 0.12s ease;
}
.rd-browse a:hover { border-color: var(--dark, #000); }

/* Selected is the deep red, not the brand orange: white on #dc2e00 is 4.74:1
   and passes at this size, white on #ff3600 is 3.63:1 and does not. */
.rd-browse a[aria-current="true"] {
	background: var(--accentDark, #dc2e00);
	border-color: var(--accentDark, #dc2e00);
	color: var(--light, #fff);
}

/* The emoji is doing an icon's job, so it needs an icon's size — at body size it
   reads as punctuation. Line-height 1 stops it pushing the pill taller than the
   text-only ones sitting beside it. */
.rd-browse__emoji { font-size: 1.05rem; line-height: 1; }

/* "All" is a reset, not a category, so it sits quieter until it is the active one. */
.rd-browse__all { color: var(--rd-muted); }

/* .rd-browse mobile sizing moved below its base rule — see the filter bar. */

/* The time strip becomes pills too, so the bar reads as one system. */

/* The view switcher joins the same family. It was the one square control left,
   sitting directly above a row of round pills and reading as a leftover. Still a
   segmented control, not a pill row — switching view is a different act from
   filtering, and the shared shape should not flatten that distinction. */
.rd-seg {
	border-radius: 999px;
	max-width: 360px;
}
/* .rd-seg a sizing is set once with the filter bar, plus one mobile override. */

/* A scroll hint. Cut-off pills on a phone look like a layout bug unless the edge
   says "there is more this way", and a browse row nobody scrolls is a browse row
   that only ever shows its first three options. */
.rd-browse {
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
	mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
}
/* No fade once everything already fits — a permanent fade on a short row just
   dims the last pill for no reason. */
@media (min-width: 900px) {
	.rd-browse { -webkit-mask-image: none; mask-image: none; }
}

/* =====================================================================
   Filter bar, flattened  (2026-08-13)
   ===================================================================== */

.rd-filters-bar { gap: 10px; }

/* Search and view on one line. Search takes the room because it is the control
   people reach for; the view switcher is a mode, and modes sit still. */
.rd-bar__top {
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
}
.rd-bar__top .rd-search { flex: 1 1 260px; max-width: 420px; margin: 0; }
.rd-bar__top .rd-seg { flex: 0 0 auto; margin-left: auto; }

.rd-search input[type="search"] { border-radius: 999px; padding: 8px 16px; }
/* The theme ships `body[data-form-b-style="regular"] button[type="submit"]` at
   specificity 0-2-2, which beats `.rd-search button` at 0-1-1 and painted this
   the brand orange. Same shape as the container-padding bug: the theme wins a
   tie you did not know you were in. 0-2-3 here, so order cannot decide it.
   Quiet on purpose — the input is the invitation, the button is just the verb. */
.rd-filters-bar form.rd-search button[type="submit"] {
	border-radius: 999px;
	padding: 8px 15px;
	font-size: 0.82rem;
	letter-spacing: 0.04em;
	text-transform: none;
	background: none;
	color: var(--dark, #000);
	border: 1px solid var(--rd-line);
}
.rd-filters-bar form.rd-search button[type="submit"]:hover {
	background: var(--dark, #000);
	color: var(--light, #fff);
	border-color: var(--dark, #000);
}

/* Tighter pills. The first pass was 9/16 and read as a row of buttons; at 6/13
   the row scans as one object, which is what a browse control should be. */
.rd-browse { gap: 6px; }
.rd-browse a {
	padding: 6px 13px;
	font-size: 0.86rem;
	gap: 6px;
}
/* Immediately after its base rule, never before it. A media query carries no
   extra specificity, so a base rule further down the file wins at every width
   and the mobile sizing silently never applies. */
@media (max-width: 690px) {
	.rd-browse a { padding: 7px 14px; font-size: 0.88rem; }
}
.rd-browse__emoji { font-size: 0.98rem; }

/* The when row is the same component, one step quieter, so two pill rows do not
   compete for the same attention. */
.rd-browse--when a { font-size: 0.84rem; }
.rd-browse--when a[aria-current="true"] {
	background: var(--dark, #000);
	border-color: var(--dark, #000);
}

.rd-seg { max-width: 300px; }
.rd-seg a { padding: 7px 6px; font-size: 0.8rem; }

/* Switches and the count share a line: the toggles ask "is there still enough
   here?" and the number beside them answers it. */
.rd-bar__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 2px;
}
.rd-bar__foot .rd-count { margin: 0; }
.rd-toggles { gap: 8px; }

/* A switch is not a filter pill: outlined and quiet when off, filled when on, so
   a glance tells you which narrowing is actually applied. */
.rd-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	/* Every property stated, including the ones that look like defaults. Two
	   earlier generations of this rule set a red background, and the third only
	   set the text colour — which rendered red on red and made the active switch
	   an unreadable blob. A component defined in one place has to say everything
	   it means. */
	background: none;
	border: 1px dashed var(--rd-line);
	border-radius: 999px;
	font-size: 0.8rem;
	line-height: 1.2;
	text-decoration: none;
	color: var(--rd-muted);
}
.rd-toggle:hover { border-color: var(--dark, #000); color: var(--dark, #000); }
.rd-toggle::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	border: 1px solid currentColor;
}
.rd-toggle.is-on {
	border-style: solid;
	border-color: var(--accentDark, #dc2e00);
	color: var(--accentDark, #dc2e00);
}
.rd-toggle.is-on::before { background: var(--accentDark, #dc2e00); border-color: var(--accentDark, #dc2e00); }
.rd-toggle--clear { border-style: none; text-decoration: underline; }
.rd-toggle--clear::before { display: none; }

@media (max-width: 690px) {
	.rd-bar__top .rd-seg { margin-left: 0; width: 100%; max-width: none; }
	.rd-seg a { padding: 9px 6px; font-size: 0.84rem; }
	.rd-bar__foot { align-items: flex-start; }
}

/* ------------------------------------------------------------------ *
 * Next district event — [rd_next_district_event]
 *
 * Namespaced rd-upnext, NOT rd-next. `.rd-next` is already the "On today"
 * panel in archive-rd_event.php; sharing the namespace meant these rules
 * silently restyled that component's eyebrow and title on the events archive.
 *
 * The panel treatment below is a deliberate copy of that component rather than
 * an accident of the collision: warm neutral with a red eyebrow reads as "look
 * here" without reading as "stop", which is the same job this block does.
 * ------------------------------------------------------------------ */
.rd-upnext {
	background: var(--accentLight, #e8e6e0);
	border-left: 4px solid var(--accentPrimary, #ff3600);
	padding: 28px 32px;
	margin-bottom: 40px;
}
@media (max-width: 690px) {
	.rd-upnext { padding: 22px 20px; }
}

.rd-upnext__heading { margin: 0 0 28px; }

.rd-upnext__item + .rd-upnext__item { margin-top: 56px; }
@media (max-width: 860px) {
	.rd-upnext__item + .rd-upnext__item { margin-top: 40px; }
}

.rd-upnext__eyebrow {
	margin: 0 0 8px;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--accentDark, #dc2e00);
}
.rd-upnext__title { margin: 0 0 6px; color: var(--dark, #000); }
.rd-upnext__title a { color: inherit; text-decoration: none; }
.rd-upnext__title a:hover { text-decoration: underline; }
.rd-upnext__when { margin: 0 0 12px; }
.rd-upnext__excerpt { margin: 0 0 24px; max-width: 62ch; }
.rd-upnext__item .rd-btn { margin: 0; }

/* ------------------------------------------------------------------ *
 * District-event card media (archive-rd_festival.php)
 *
 * `has-media` is added only when an image resolved, so a card without one
 * keeps the full measure instead of leaving an empty column — same rule as
 * .rd-eventtop on the single event page.
 *
 * Column assignment is explicit rather than a row span. `grid-row: 1 / -1`
 * looks right and is not: -1 names the last EXPLICIT line, and this grid has
 * no explicit rows, so the span collapsed to row 1 and the date and link fell
 * into column 1 underneath the image.
 * ------------------------------------------------------------------ */
.rd-fest.has-media {
	grid-template-columns: 216px 1fr;
	column-gap: 28px;
	align-items: start;
}
/* span, so the image does not set the height of row 1 and strand the title
   above a gap. A count rather than -1: -1 names the last EXPLICIT line and
   this grid has none, which is the bug this replaces. The card has at most
   five text children, so 6 always covers it, and align-self keeps the image
   at its natural height at the top of the span. */
.rd-fest.has-media > .rd-fest__media { grid-column: 1; grid-row: 1 / span 6; align-self: start; }
.rd-fest.has-media > :not(.rd-fest__media) { grid-column: 2; }

@media (max-width: 680px) {
	.rd-fest.has-media { grid-template-columns: 1fr; row-gap: 14px; }
	.rd-fest.has-media > .rd-fest__media,
	.rd-fest.has-media > :not(.rd-fest__media) { grid-column: 1; }
}

.rd-fest__media {
	display: block;
	overflow: hidden;
	background: var(--accentLight, #e8e6e0);
	aspect-ratio: 4 / 3;
	max-width: 100%;
}
@media (max-width: 680px) {
	.rd-fest__media { aspect-ratio: 16 / 9; }
}

.rd-fest__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	max-width: 100%;
}

/* ==================================================================== *
 * TURN 2 — lighter, card-based, red as accent
 *
 * Implements the 2026-09-22 handoff for the calendar stream. Appended
 * deliberately: these override the earlier .rd-ev rules above rather than
 * replacing them, so a revert is a delete of this block.
 *
 * The brief: no black or red grounds, one warm off-white page, soft cards
 * with rounded corners, category icons, and red reserved for labels, times,
 * the active state and a single button per screen.
 * ==================================================================== */
/* Promoted from `.rd-wrap` to `:root` on 2026-09-22. Scoped to the wrapper,
   these tokens existed only inside the plugin's own templates, so the
   NectarBlocks homepage could not reach them and its cards silently fell back
   to the pre-redesign values — square corners and the old palette — while
   /events/ was rounded and soft. Anything that should look like the calendar
   now can. */
:root {
	--page: #faf8f5;
	--surface: #ffffff;
	--tint: #f6f2ec;
	--tintWarm: #f4f0ea;
	--redTint: #ffeee8;
	--redTintBorder: #ffc9b8;
	--cardline: #ece6dd;
	--lineAlt: #e7e1d8;
	--hair: #f1ece4;
	--inkT: #1a1714;
	--bodyT: #4a443d;
	--mutedT: #7c746a;
	--faintT: #9a9189;
	--iconT: #8b8279;

	--r-card: 16px;
	--r-cardSm: 14px;
	--r-thumb: 11px;
	--sh-card: 0 1px 2px rgba(28,25,23,.04), 0 10px 24px rgba(28,25,23,.06);
}

.rd-i { flex: none; display: block; }

/* ---- the stream ---- */
.rd-day__items { display: flex; flex-direction: column; gap: 12px; }

/* ---- event card ---- */
.rd-wrap .rd-ev {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 14px;
	align-items: start;
	padding: 14px;
	background: var(--surface);
	border: 1px solid var(--cardline);
	border-radius: var(--r-card);
	box-shadow: var(--sh-card);
	transition: border-color .15s ease, box-shadow .2s ease, transform .2s ease;
}
.rd-wrap .rd-ev:hover { border-color: #e0d9cf; box-shadow: 0 2px 4px rgba(28,25,23,.05), 0 14px 32px rgba(28,25,23,.08); }
.rd-wrap .rd-ev:active { transform: translateY(1px); }

/* The leading tile. Square, so a portrait flyer and a landscape photo both
   behave, and a tinted category well when there is no picture at all. */
.rd-ev__tile {
	width: 96px; height: 96px;
	border-radius: var(--r-thumb);
	background: var(--tint);
	display: flex; flex-direction: column;
	align-items: center; justify-content: center; gap: 6px;
	color: var(--accentDark, #dc2e00);
	overflow: hidden;
}
.rd-ev__tile.has-image { background: var(--hair); }
.rd-ev__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-ev__tilecat {
	font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
	color: var(--faintT); font-family: var(--body-font-family, inherit);
}

.rd-ev__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.rd-wrap .rd-ev__when {
	display: flex; align-items: center; gap: 5px; margin: 0;
	font-size: 12px; font-weight: 600; letter-spacing: .06em;
	color: var(--accentDark, #dc2e00);
}

.rd-wrap .rd-ev__title {
	margin: 0; font-size: 19px; line-height: 1.27; font-weight: 400;
	color: var(--inkT); text-wrap: pretty;
}
.rd-wrap .rd-ev__title a { color: inherit; text-decoration: none; }
.rd-wrap .rd-ev__title a:hover { text-decoration: underline; }

.rd-ev__org {
	display: flex; align-items: center; gap: 8px; margin: 0;
	font-size: 13px; color: var(--bodyT);
}
.rd-ev__avatar {
	width: 20px; height: 20px; border-radius: 999px; overflow: hidden; flex: none;
	background: var(--tint); color: #6b635a;
	display: flex; align-items: center; justify-content: center;
	font-size: 10px; font-weight: 600;
}
.rd-ev__avatar img { width: 100%; height: 100%; object-fit: contain; display: block; }

.rd-ev__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; }
.rd-chip {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 5px 10px; border-radius: 999px;
	background: var(--tint); color: #6b635a;
	font-size: 11px; line-height: 1;
}
.rd-chip.is-red { background: var(--redTint); color: var(--accentDark, #dc2e00); }

.rd-wrap .rd-ev__summary { margin: 2px 0 0; font-size: 13px; color: var(--mutedT); }

/* ---- weekly regular: flat, quieter, no shadow. That flatness is the
       hierarchy — it is how a standing thing reads as lower weight. ---- */
.rd-wrap .rd-ev--regular {
	grid-template-columns: 34px 1fr;
	gap: 12px;
	align-items: center;
	padding: 11px 14px;
	background: var(--tintWarm);
	border: 1px solid #eae4db;
	border-radius: var(--r-cardSm);
	box-shadow: none;
}
.rd-wrap .rd-ev--regular:hover { border-color: #e0d9cf; box-shadow: none; }
.rd-ev--regular .rd-ev__tile {
	width: 34px; height: 34px; border-radius: 999px;
	background: var(--surface); color: var(--iconT);
}
.rd-wrap .rd-ev--regular .rd-ev__title { font-size: 14px; color: #3a342d; }
.rd-wrap .rd-ev--regular .rd-ev__when { color: var(--iconT); font-weight: 500; letter-spacing: 0; }
.rd-ev--regular .rd-ev__org { font-size: 12px; color: var(--iconT); }
.rd-ev--regular .rd-ev__avatar { display: none; }
.rd-ev--regular .rd-chip { background: transparent; color: var(--iconT); padding: 0; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }

/* ---- district event keeps its weight, but loses the black ground ---- */
.rd-wrap .rd-ev--festival {
	background: var(--surface);
	border: 1px solid var(--lineAlt);
	border-radius: 18px;
	box-shadow: 0 2px 4px rgba(28,25,23,.05), 0 14px 32px rgba(28,25,23,.08);
}
.rd-wrap .rd-ev--festival .rd-ev__title,
.rd-wrap .rd-ev--festival .rd-ev__title a { color: var(--inkT); font-size: 25px; line-height: 1.15; }
.rd-wrap .rd-ev--festival .rd-ev__when { color: var(--accentDark, #dc2e00); }
.rd-ev--festival .rd-ev__tile { background: var(--redTint); }
.rd-ev--festival .rd-chip { background: var(--redTint); color: var(--accentDark, #dc2e00); }

@media (max-width: 420px) {
	.rd-wrap .rd-ev { grid-template-columns: 78px 1fr; gap: 12px; }
	.rd-ev__tile { width: 78px; height: 78px; }
	.rd-wrap .rd-ev__title { font-size: 17px; }
}

/* ---- turn 2: filter rails, day headings, in-card button ---- */

/* The rails scroll rather than wrap, so a long taxonomy never pushes the
   stream down the page. Scrollbar hidden; the overflow is the affordance. */
.rd-wrap .rd-browse {
	display: flex; gap: 8px; flex-wrap: nowrap;
	overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
	padding-bottom: 2px;
}
.rd-wrap .rd-browse::-webkit-scrollbar { display: none; }
.rd-wrap .rd-browse > a {
	display: inline-flex; align-items: center; gap: 6px; flex: none;
	padding: 9px 14px; border-radius: 999px;
	background: var(--surface); border: 1px solid var(--lineAlt);
	color: var(--bodyT); font-size: 13px; line-height: 1; text-decoration: none;
	box-shadow: 0 1px 2px rgba(28,25,23,.04);
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.rd-wrap .rd-browse > a .rd-i { color: var(--iconT); }

/* Date window is single-select, so its active state is the dark one. Category
   is multi-select and uses the red tint, which reads as "added" not "only". */
.rd-wrap .rd-browse--when > a[aria-current] {
	background: var(--inkT); border-color: var(--inkT); color: #fff;
	box-shadow: 0 4px 12px rgba(28,25,23,.18);
}
.rd-wrap .rd-browse--when > a[aria-current] .rd-i { color: #fff; }
.rd-wrap .rd-browse:not(.rd-browse--when) > a[aria-current] {
	background: var(--redTint); border-color: var(--redTintBorder);
	color: var(--accentDark, #dc2e00);
}
.rd-wrap .rd-browse:not(.rd-browse--when) > a[aria-current] .rd-i { color: var(--accentDark, #dc2e00); }

/* Day heading: the rule fills the gap between the day and its count, so the
   count reads as belonging to that day rather than floating. */
.rd-wrap .rd-day__head {
	display: flex; align-items: baseline; gap: 12px;
	margin: 18px 0 12px; border: 0; padding: 0;
}
.rd-wrap .rd-day__head > span:first-child {
	font-size: 17px; font-weight: 400; color: var(--inkT); flex: none;
}
.rd-wrap .rd-day__head::after {
	content: ""; flex: 1 1 auto; height: 1px; background: var(--lineAlt); order: 1;
}
.rd-wrap .rd-day__date {
	order: 2; flex: none; font-size: 11px; letter-spacing: .06em;
	color: var(--faintT); text-transform: uppercase;
}

/* One primary action per card, as a pill. Black on #ff3600 is 5.78:1; white on
   it fails, which is why the resting label is black and hover inverts. */
.rd-wrap .rd-ev .rd-btn {
	display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
	margin-top: 4px; padding: 9px 16px; border-radius: 999px;
	background: var(--accentPrimary, #ff3600); color: #000;
	font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
	border: 0; text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
.rd-wrap .rd-ev .rd-btn:hover { background: var(--accentDark, #dc2e00); color: #fff; }

/* ======================================================================
   District-event cards  [rd_district_events]
   ----------------------------------------------------------------------
   Deliberately NOT scoped to .rd-wrap. These render inside NectarBlocks
   pages (the homepage), which never pass through the plugin's templates,
   so a .rd-wrap scope would silently style nothing there.

   One feature card then a 3-up grid. The asymmetry carries meaning:
   festival_index() sorts happening-now first, then soonest, so the large
   card is always the one worth looking at. It is the single place this
   block spends boldness — everything else stays flat, square and quiet,
   which is the district's house style (radius 0 everywhere; the category
   pills remain the only rounded thing on the site).
   ====================================================================== */

.rd-dx {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.rd-dx__card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	background: var(--light, #fff);
	border: 1px solid var(--rd-line, rgba(0, 0, 0, 0.12));
	border-radius: var(--rd-radius, 0);
	overflow: hidden;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.rd-dx__card:hover {
	border-color: var(--dark, #000);
	box-shadow: 0 2px 4px rgba(28, 25, 23, .05), 0 14px 32px rgba(28, 25, 23, .08);
}
.rd-dx__card:active { transform: translateY(1px); }
.rd-dx__card:focus-visible {
	outline: 2px solid var(--accentPrimary, #ff3600);
	outline-offset: 2px;
}

/* The feature card spans the full row and runs image-beside-text. `1 / -1`
   is safe here because the grid has explicit COLUMNS; the collapse trap is
   grid-ROW spanning against implicit rows. */
.rd-dx__card--lead {
	grid-column: 1 / -1;
	flex-direction: row;
	align-items: stretch;
}
.rd-dx__card--lead .rd-dx__media { flex: 0 0 58%; }
.rd-dx__card--lead .rd-dx__body {
	flex: 1 1 auto;
	align-self: center;
	padding: 40px;
}
.rd-dx__card--lead .rd-dx__title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.rd-dx__card--lead .rd-dx__excerpt { font-size: 1rem; max-width: 46ch; }

/* ---------------------------------------------------------- media slot */

.rd-dx__media {
	display: block;
	position: relative;
	background: #efece7;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}
.rd-dx__card--lead .rd-dx__media { aspect-ratio: auto; min-height: 340px; }

.rd-dx__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.2, .6, .2, 1);
}
.rd-dx__card:hover .rd-dx__img { transform: scale(1.03); }

/* No photograph yet: a typographic panel carrying WHEN the thing happens.
   It is content, not a placeholder, so it never reads as a missing image.
   Cards swap themselves to photographs as imagery lands, with no markup
   change. */
/* MEASURED, not guessed: the band these cards sit on computes to
   rgb(232,230,224). The panel was originally that same value, so every
   art-less card read as an empty grey box rather than a designed tile.
   It now takes the site's own --dark (#000, the footer band's colour), which
   makes the fallback unmistakably deliberate and gives the grid a rhythm of
   photograph / black tile instead of photograph / hole. */
.rd-dx__panel {
	display: flex;
	align-items: flex-end;
	width: 100%;
	height: 100%;
	padding: 24px;
	background: var(--dark, #000);
	border-bottom: 3px solid var(--accentPrimary, #ff3600);
}
.rd-dx__panel-when {
	font-family: "Montagu Slab", Georgia, serif;
	font-size: clamp(1.15rem, 1.6vw, 1.5rem);
	font-weight: 400;
	line-height: 1.2;
	color: var(--light, #fff);
	text-wrap: balance;
}
.rd-dx__card--lead .rd-dx__panel { padding: 40px; }
.rd-dx__card--lead .rd-dx__panel-when { font-size: clamp(1.6rem, 2.8vw, 2.4rem); }

/* ---------------------------------------------------------------- body */

.rd-dx__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px;
}
.rd-dx__when {
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--accentDark, #dc2e00);
	font-variant-numeric: tabular-nums;
}
/* Montagu Slab is the site's display face (measured off the live headings).
   These titles are spans inside the card link, so they inherit the body face
   unless told otherwise, which left them visibly out of step with every other
   heading on the page. */
.rd-dx__title {
	font-family: "Montagu Slab", Georgia, serif;
	font-weight: 500;
	font-size: 1.2rem;
	line-height: 1.2;
	text-wrap: balance;
}
.rd-dx__excerpt {
	font-size: .92rem;
	line-height: 1.5;
	color: var(--rd-muted, #4a4844);
}

/* -------------------------------------------------------- narrower */

@media (max-width: 999px) {
	.rd-dx { grid-template-columns: repeat(2, 1fr); }
	.rd-dx__card--lead { flex-direction: column; }
	.rd-dx__card--lead .rd-dx__media { flex: none; min-height: 0; aspect-ratio: 3 / 2; }
	.rd-dx__card--lead .rd-dx__body { padding: 24px; align-self: stretch; }
}
@media (max-width: 690px) {
	.rd-dx { grid-template-columns: 1fr; gap: 20px; }
	.rd-dx__card--lead .rd-dx__body { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.rd-dx__card, .rd-dx__img { transition: none; }
	.rd-dx__card:hover .rd-dx__img { transform: none; }
}

/* ======================================================================
   Turn-3 corrections, 2026-09-22
   Appended deliberately, same as the turn-2 block: a revert is a delete.
   ====================================================================== */

/* ---- 1. the in-card button was rendering as an orange circle ----------
   The turn-2 layer redefines .rd-ev as a `96px 1fr` grid, but the only rule
   .rd-ev__cta ever had lived inside @media (max-width: 640px). Above that
   width it auto-placed into column ONE — the 96px tile column — so a pill
   with border-radius 999px became a ~96px circle with its label wrapped over
   three lines. It needs the content column at every width, not just on a
   phone. */
.rd-wrap .rd-ev__cta {
	grid-column: 2;
	margin-top: 8px;
}

/* ---- 2. organisation logos ---------------------------------------------
   A 20px circle with object-fit:contain is an AVATAR treatment, and these are
   not avatars. Most district members have a horizontal wordmark, so "Spaceship
   Earth Coffee Co." was being letterboxed into a 20px round hole and rendered
   unreadable. A logo keeps its own aspect ratio: cap the height, let the width
   follow, and cap that too so a long wordmark cannot shove the name out of the
   row. The circle survives only where it is genuinely right — the initial-letter
   fallback for a member with no logo at all. */
.rd-wrap .rd-ev__avatar.has-logo {
	width: auto;
	height: 22px;
	max-width: 88px;
	border-radius: 0;
	background: none;
	overflow: visible;
}
.rd-wrap .rd-ev__avatar.has-logo img {
	width: auto;
	height: 100%;
	max-width: 88px;
	object-fit: contain;
	object-position: left center;
}

/* ---- 3. district-event cards onto the calendar's own tokens ------------
   These were written against the pre-redesign tokens (--rd-radius: 0 and the
   old palette), so the homepage showed hard square cards while /events/ showed
   soft rounded ones. Same system now. */
.rd-dx__card {
	background: var(--surface, #fff);
	border-color: var(--cardline, #ece6dd);
	border-radius: var(--r-card, 16px);
	box-shadow: var(--sh-card, 0 1px 2px rgba(28, 25, 23, .04), 0 10px 24px rgba(28, 25, 23, .06));
}
.rd-dx__card:hover {
	border-color: var(--lineAlt, #e7e1d8);
	box-shadow: 0 2px 4px rgba(28, 25, 23, .05), 0 18px 40px rgba(28, 25, 23, .10);
}
.rd-dx__title { color: var(--inkT, #1a1714); }
.rd-dx__excerpt { color: var(--mutedT, #7c746a); }
.rd-dx__when { color: var(--accentDark, #dc2e00); }
.rd-dx__media { background: var(--tint, #f6f2ec); }

/* ---- 4. the district-event rows on /events/ and /district-events/ ------
   .rd-fest predates the redesign and still inverted to a BLACK ground on
   hover, which the turn-2 brief rules out ("no black or red grounds"). It sat
   next to the new soft cards looking like a different website. */
.rd-wrap .rd-fest {
	border: 1px solid var(--cardline, #ece6dd);
	border-radius: var(--r-cardSm, 14px);
	background: var(--surface, #fff);
	box-shadow: var(--sh-card, 0 1px 2px rgba(28, 25, 23, .04), 0 10px 24px rgba(28, 25, 23, .06));
	color: var(--inkT, #1a1714);
	transition: border-color .18s ease, box-shadow .18s ease;
}
.rd-wrap .rd-fest:hover {
	background: var(--surface, #fff);
	color: var(--inkT, #1a1714);
	border-color: var(--lineAlt, #e7e1d8);
	box-shadow: 0 2px 4px rgba(28, 25, 23, .05), 0 18px 40px rgba(28, 25, 23, .10);
}
.rd-wrap .rd-fest:hover .rd-fest__label,
.rd-wrap .rd-fest:hover .rd-fest__meta,
.rd-wrap .rd-fest:hover .rd-fest__go { color: inherit; }
.rd-wrap .rd-fest__meta { color: var(--mutedT, #7c746a); }
.rd-wrap .rd-fest__excerpt { color: var(--bodyT, #4a443d); }
.rd-wrap .rd-fest__go { color: var(--accentDark, #dc2e00); }

/* "Happening now" keeps its emphasis, but as a red-tinted card rather than a
   solid red slab — red stays reserved for labels, times and one button. */
.rd-wrap .rd-fest.is-now {
	background: var(--redTint, #ffeee8);
	border-color: var(--redTintBorder, #ffc9b8);
	color: var(--inkT, #1a1714);
}
.rd-wrap .rd-fest.is-now:hover {
	background: var(--redTint, #ffeee8);
	border-color: var(--accentPrimary, #ff3600);
	color: var(--inkT, #1a1714);
}
.rd-wrap .rd-fest.is-now .rd-fest__label { color: var(--accentDark, #dc2e00); }
.rd-wrap .rd-fest.is-now .rd-fest__meta,
.rd-wrap .rd-fest.is-now .rd-fest__go { color: var(--bodyT, #4a443d); }

/* ---- 5. district-event rows: the same fallback as the homepage cards ----
   The media slot is now always rendered. Where there is no photograph it
   carries the event's typical-when on the site's --dark, matching
   .rd-dx__panel exactly so /district-events/, /events/ and the homepage all
   show one component rather than three interpretations of it. */
.rd-wrap .rd-fest__panel {
	display: flex;
	align-items: flex-end;
	width: 100%;
	height: 100%;
	padding: 18px;
	background: var(--dark, #000);
	border-bottom: 3px solid var(--accentPrimary, #ff3600);
	box-sizing: border-box;
}
.rd-wrap .rd-fest__panel-when {
	font-family: "Montagu Slab", Georgia, serif;
	font-size: clamp(1rem, 1.3vw, 1.2rem);
	font-weight: 400;
	line-height: 1.2;
	color: var(--light, #fff);
	text-wrap: balance;
}
/* The media slot rounds with the card it sits inside. */
.rd-wrap .rd-fest__media {
	border-radius: var(--r-thumb, 11px);
	overflow: hidden;
	background: var(--tint, #f6f2ec);
}

/* ======================================================================
   Turn-4, 2026-09-22 — the rest of the site
   ----------------------------------------------------------------------
   Turn-2 restyled the calendar, turn-3 the district-event cards. Everything
   else (directory, the three single views, the account screens) still ran on
   the pre-redesign primitives, so the site changed character depending on
   which page you were on. This moves the remaining shared components onto the
   same tokens. Appended as its own block: a revert is a delete.

   The `rd-*` component rules here are deliberately UNSCOPED. The plugin
   renders through at least three contexts — `.rd-wrap` (its own templates),
   `.rd-fe` (shortcodes on NectarBlocks pages: sign-in, dashboard, forms) and
   no wrapper at all (the subscribe form, which is plain `.rd-form`). Every
   ancestor scope I tried skipped one of them, which is the same trap that
   kept the redesign off the homepage. These class names are already
   plugin-namespaced, so the scope was buying nothing. Only the WordPress-core
   class names (`.button-primary`, `#wp-submit`) keep an ancestor, because
   those genuinely could collide.
   ====================================================================== */

/* ---- buttons ----------------------------------------------------------
   Only the in-card button was restyled in turn-2, so every other button on
   the site was still the old square red slab. Black on #ff3600 measures
   5.78:1 and white on it fails, which is why the resting label is black and
   hover inverts — same rule as the card button. */
/* The doubled class is load-bearing, same as `.rd-wrap.rd-wrap` above. The
   theme ships `button[type="submit"], input[type="submit"] { border-radius: 2px }`,
   which is specificity (0,1,1) and outranks a single class — so on the
   subscribe form's <button type="submit"> the pill silently lost while it held
   on every <a class="rd-btn">. `.rd-btn.rd-btn` is (0,2,0) and wins without
   reaching for !important. */
.rd-btn.rd-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 11px 20px;
	border-radius: 999px;
	background: var(--accentPrimary, #ff3600);
	color: #000;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	border: 0;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
.rd-btn.rd-btn:hover { background: var(--accentDark, #dc2e00); color: #fff; }
/* On a red ground the fill has to go dark instead, or it vanishes. */
.rd-btn--onred.rd-btn--onred { background: var(--inkT, #1a1714); color: #fff; }
.rd-btn--onred.rd-btn--onred:hover { background: #000; color: #fff; }

/* ---- directory cards --------------------------------------------------- */
.rd-card {
	background: var(--surface, #fff);
	border: 1px solid var(--cardline, #ece6dd);
	border-radius: var(--r-card, 16px);
	box-shadow: var(--sh-card, 0 1px 2px rgba(28, 25, 23, .04), 0 10px 24px rgba(28, 25, 23, .06));
	transition: border-color .18s ease, box-shadow .18s ease;
}
.rd-card:hover {
	border-color: var(--lineAlt, #e7e1d8);
	box-shadow: 0 2px 4px rgba(28, 25, 23, .05), 0 18px 40px rgba(28, 25, 23, .10);
}
.rd-card__name { color: var(--inkT, #1a1714); }
.rd-card__meta { color: var(--mutedT, #7c746a); }
.rd-card__excerpt { color: var(--bodyT, #4a443d); }

/* ---- directory filters ------------------------------------------------
   Same chip as the calendar's browse rails. This rail is single-select, so it
   takes the DARK active state that .rd-browse--when uses, not the red tint —
   red there means "added to a multi-select", which would be a lie here. */
.rd-filters { border-bottom-color: var(--lineAlt, #e7e1d8); }
.rd-filters a {
	display: inline-flex;
	align-items: center;
	padding: 9px 14px;
	border-radius: 999px;
	background: var(--surface, #fff);
	border: 1px solid var(--lineAlt, #e7e1d8);
	color: var(--bodyT, #4a443d);
	font-size: 13px;
	line-height: 1;
	box-shadow: 0 1px 2px rgba(28, 25, 23, .04);
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.rd-filters a:hover { border-color: var(--mutedT, #7c746a); }
.rd-filters a[aria-current="page"] {
	background: var(--inkT, #1a1714);
	border-color: var(--inkT, #1a1714);
	color: #fff;
	box-shadow: 0 4px 12px rgba(28, 25, 23, .18);
}

/* ---- side panels on the single views ----------------------------------
   Was a flat khaki slab with square corners, which now reads as the only
   un-redesigned thing on the page. */
.rd-panel {
	background: var(--surface, #fff);
	border: 1px solid var(--cardline, #ece6dd);
	border-radius: var(--r-card, 16px);
	box-shadow: var(--sh-card, 0 1px 2px rgba(28, 25, 23, .04), 0 10px 24px rgba(28, 25, 23, .06));
}
.rd-panel--quiet {
	background: var(--tint, #f6f2ec);
	border-color: var(--lineAlt, #e7e1d8);
	box-shadow: none;
}

/* ---- the identity mark on a member page -------------------------------
   Kept as a mark, but squared off. A circle wastes its corners on a
   horizontal wordmark, and most district members have one — the same reason
   the event-row avatar lost its circle in turn-3. A rounded square of the
   same bounding box gives the logo noticeably more usable width, and matches
   the card language now used everywhere else. */
.rd-mark {
	border-radius: var(--r-card, 16px);
	box-shadow: 0 0 0 1px var(--cardline, #ece6dd), var(--sh-card, 0 1px 2px rgba(28, 25, 23, .04), 0 10px 24px rgba(28, 25, 23, .06));
}

/* ---- map and lists ---------------------------------------------------- */
.rd-map--public.is-live {
	border-radius: var(--r-card, 16px);
	overflow: hidden;
	border-color: var(--cardline, #ece6dd);
}
.rd-item { border-bottom-color: var(--hair, #f1ece4); }
.rd-item__summary { color: var(--mutedT, #7c746a); }
.rd-list { border-top-color: var(--hair, #f1ece4); }
.rd-section { border-top-color: var(--lineAlt, #e7e1d8); }

/* ---- the "also at" / "coming up here" lists ----------------------------
   .rd-item was declared `155px 72px 1fr`, a three-column grid — but BOTH
   templates that use it render only two children (the date, then a div
   holding the title and sub). So the content div always landed in the 72px
   middle column and the 1fr column sat empty, which is why event titles
   broke one word per line ("Story / Time", "Mahjong / Open / Play"). Two
   children, two columns. */
.rd-item { grid-template-columns: 155px 1fr; }
@media (max-width: 560px) {
	/* 72px could not hold "Wed 23 Sep · 10:00 am" either, so stack instead. */
	.rd-item { grid-template-columns: 1fr; gap: 4px; }
}

/* ---- WordPress's own login submit -------------------------------------
   wp_login_form() emits input.button.button-primary, which never picks up
   .rd-btn. Matched here so the one button on the sign-in page is the same
   object as every other button on the site. */
:is(.rd-wrap, .rd-fe, .rd-form) .button-primary,
:is(.rd-wrap, .rd-fe, .rd-form) #wp-submit {
	display: inline-flex;
	align-items: center;
	padding: 11px 20px;
	border-radius: 999px;
	background: var(--accentPrimary, #ff3600);
	color: #000;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	border: 0;
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
:is(.rd-wrap, .rd-fe, .rd-form) .button-primary:hover,
:is(.rd-wrap, .rd-fe, .rd-form) #wp-submit:hover { background: var(--accentDark, #dc2e00); color: #fff; }

/* ---- subscribe form ---------------------------------------------------
   Renders with no plugin wrapper at all, so it had been missed by every
   scoped rule. Square fieldsets and square inputs next to pill buttons. */
.rd-choices {
	border: 1px solid var(--cardline, #ece6dd);
	border-radius: var(--r-card, 16px);
	background: var(--surface, #fff);
}
.rd-form input[type="email"],
.rd-form input[type="text"],
.rd-form input[type="tel"],
.rd-fe input[type="email"],
.rd-fe input[type="text"],
.rd-fe input[type="tel"],
.rd-fe input[type="url"],
.rd-fe textarea {
	border-radius: 10px;
	border: 1px solid var(--lineAlt, #e7e1d8);
	background: var(--surface, #fff);
}
.rd-form input:focus-visible,
.rd-fe input:focus-visible,
.rd-fe textarea:focus-visible {
	outline: 2px solid var(--accentPrimary, #ff3600);
	outline-offset: 1px;
	border-color: var(--accentPrimary, #ff3600);
}

/* ---- district-event hero: standfirst vs dateline -----------------------
   These two paragraphs were both 16px in the same colour with zero margin, so
   they rendered as one continuous block of text with a 0.0px gap between them
   — which is why the Crazy Days intro read as two sentences run together.
   They do different jobs, so they now look different: the standfirst is the
   lead, the dateline is metadata under it. */
/* Doubled again: `.rd-hero p { margin: 0; color: var(--rd-muted) }` sits higher
   up this same file at (0,1,1) and beat these single classes, so the sizes
   applied while the colours and margins silently did not — the two lines still
   touched at a 0.0px gap. Third time this file has needed the trick; it is the
   house pattern here. */
.rd-hero__standfirst.rd-hero__standfirst {
	font-size: 1.15rem;
	line-height: 1.5;
	color: var(--inkT, #1a1714);
	max-width: 58ch;
	margin: 14px 0 0;
	text-wrap: pretty;
}
.rd-hero__when.rd-hero__when {
	font-size: .95rem;
	line-height: 1.5;
	color: var(--mutedT, #7c746a);
	max-width: 58ch;
	margin: 12px 0 0;
}
.rd-hero__host.rd-hero__host {
	font-size: .95rem;
	color: var(--mutedT, #7c746a);
	margin: 4px 0 0;
}

/* ======================================================================
   District-event lede — flyer beside the details
   ----------------------------------------------------------------------
   Was title-then-full-width-flyer stacked, which pushed the date and every
   action below a tall image on every screen. Two columns on desktop; the
   media stays FIRST in source order so it leads on a phone, where stacking
   is what was wanted anyway.
   ====================================================================== */

.rd-lede { margin: 0 0 8px; }

@media (min-width: 900px) {
	.rd-lede.has-media {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 48px;
		align-items: center;
	}
}

.rd-lede__media {
	margin: 0;
	border-radius: var(--r-card, 16px);
	overflow: hidden;
	background: var(--tint, #f6f2ec);
}
.rd-lede__media img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

/* The header is a grid child here, so its own top padding would push it out
   of vertical centre against the flyer. */
.rd-lede__meta.rd-lede__meta { padding-top: 0; }

/* ---- actions --------------------------------------------------------
   One filled button and one quiet one. Two filled buttons side by side
   would give a visitor no steer about which to press. */
.rd-lede__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 22px;
}
.rd-btn--quiet.rd-btn--quiet {
	background: var(--surface, #fff);
	color: var(--inkT, #1a1714);
	border: 1px solid var(--lineAlt, #e7e1d8);
	box-shadow: 0 1px 2px rgba(28, 25, 23, .04);
}
.rd-btn--quiet.rd-btn--quiet:hover {
	background: var(--tint, #f6f2ec);
	color: var(--inkT, #1a1714);
	border-color: var(--mutedT, #7c746a);
}
.rd-lede__actions .rd-i { flex: none; }

/* The two action buttons jump to targets further down the page. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Anchored targets clear the sticky header instead of hiding under it. */
#rd-more, [id^="gform_wrapper_"] { scroll-margin-top: 96px; }

/* ---- breadcrumb spacing ----------------------------------------------
   Sat flush against the lede, so the back link read as part of the card
   rather than as navigation above it. */
.rd-back.rd-back { margin: 0 0 28px; }

/* ---- filled button: white label --------------------------------------
   Adam's call. White on --accentPrimary (#ff3600) measures 3.62:1, which
   fails AA for a label at this size, so the FILL moves one shade to
   --accentDark (#dc2e00) where white measures 4.72:1 and passes. Hover
   goes darker still (#b82600, 6.31:1). The brand pair is unchanged; only
   which of the two reds carries a solid label. */
.rd-btn.rd-btn {
	background: var(--accentDark, #dc2e00);
	color: #fff;
}
.rd-btn.rd-btn:hover { background: #b82600; color: #fff; }
.rd-btn.rd-btn .rd-i { color: currentColor; }

/* Re-assert the quiet variant AFTER the filled rule above. Both are (0,2,0),
   so source order decides, and appending the filled rule had turned the
   secondary action into a second solid red button — leaving a visitor no
   steer about which of the two to press. */
.rd-btn--quiet.rd-btn--quiet {
	background: var(--surface, #fff);
	color: var(--inkT, #1a1714);
	border: 1px solid var(--lineAlt, #e7e1d8);
	box-shadow: 0 1px 2px rgba(28, 25, 23, .04);
}
.rd-btn--quiet.rd-btn--quiet:hover {
	background: var(--tint, #f6f2ec);
	color: var(--inkT, #1a1714);
	border-color: var(--mutedT, #7c746a);
}

/* ---- Add to calendar: pick a destination -----------------------------
   Built on <details> so it opens on click and closes on Escape without any
   JavaScript. The summary IS the button, so it keeps .rd-btn's treatment. */
.rd-cal { position: relative; }
.rd-cal > summary.rd-btn {
	cursor: pointer;
	list-style: none;
	user-select: none;
}
.rd-cal > summary.rd-btn::-webkit-details-marker { display: none; }
.rd-cal > summary.rd-btn::marker { content: ""; }
.rd-cal > summary.rd-btn::after {
	content: "";
	width: 6px; height: 6px;
	margin-left: 2px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .15s ease;
}
.rd-cal[open] > summary.rd-btn::after { transform: translateY(1px) rotate(225deg); }
.rd-cal > summary.rd-btn:focus-visible {
	outline: 2px solid var(--accentPrimary, #ff3600);
	outline-offset: 2px;
}

.rd-cal__menu {
	position: absolute;
	z-index: 20;
	top: calc(100% + 6px);
	left: 0;
	min-width: 210px;
	display: flex;
	flex-direction: column;
	padding: 6px;
	background: var(--surface, #fff);
	border: 1px solid var(--cardline, #ece6dd);
	border-radius: var(--r-cardSm, 14px);
	box-shadow: 0 2px 4px rgba(28, 25, 23, .05), 0 18px 40px rgba(28, 25, 23, .12);
}
.rd-cal__opt {
	padding: 10px 12px;
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.2;
	color: var(--inkT, #1a1714);
	text-decoration: none;
}
.rd-cal__opt:hover { background: var(--tint, #f6f2ec); color: var(--inkT, #1a1714); }
.rd-cal__opt:focus-visible {
	outline: 2px solid var(--accentPrimary, #ff3600);
	outline-offset: -2px;
}

/* On a phone the popover can run off the right edge of a narrow column. */
@media (max-width: 480px) {
	.rd-cal { position: static; }
	.rd-cal__menu { position: static; min-width: 0; margin-top: 8px; }
}

/* ---- in-card action: outlined ----------------------------------------
   Adam's call: red border, white ground, red label. Uses --accentDark
   (#dc2e00) rather than --accentPrimary (#ff3600) for both border and text,
   because #ff3600 on white measures 3.62:1 and fails AA at this size, while
   #dc2e00 on white is 4.72:1 and passes. Hover fills to the same red with a
   white label (4.72:1 the other way round), so the pair stays legible in
   both states.

   Outlining the CARD action also restores a hierarchy that had been flat:
   the one solid button on a page is now the primary action in the lede. */
.rd-wrap .rd-ev .rd-btn,
.rd-wrap .rd-ev .rd-btn.rd-btn {
	background: var(--surface, #fff);
	color: var(--accentDark, #dc2e00);
	border: 1px solid var(--accentDark, #dc2e00);
}
.rd-wrap .rd-ev .rd-btn:hover,
.rd-wrap .rd-ev .rd-btn.rd-btn:hover {
	background: var(--accentDark, #dc2e00);
	color: #fff;
	border-color: var(--accentDark, #dc2e00);
}

/* ---- org mark under the tile ------------------------------------------
   Moved out of the body, where it sat inline before the organization name.
   It keeps its own aspect ratio (never a circle, never a square crop) and
   is capped to the tile's width so a long wordmark cannot widen the column. */
.rd-wrap .rd-ev__tilelogo {
	display: block;
	margin-top: 8px;
	max-width: 100%;
	text-align: center;
}
.rd-wrap .rd-ev__tilelogo img {
	display: inline-block;
	width: auto;
	height: 16px;
	max-width: 100%;
	object-fit: contain;
}
.rd-wrap .rd-ev--regular .rd-ev__tilelogo img { height: 13px; }

/* The tile column is a stack now (picture, then mark), not a single box. */
.rd-wrap .rd-ev > .rd-ev__tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: auto;
	background: none;
	border: 0;
	padding: 0;
}
.rd-wrap .rd-ev > .rd-ev__tile > img,
.rd-wrap .rd-ev > .rd-ev__tile > .rd-i,
.rd-wrap .rd-ev > .rd-ev__tile > .rd-ev__tilecat { flex: none; }

/* ---- "This week" on the home page -------------------------------------
   Built on the calendar's stream, not a grid of its own. A 3-up grid read
   badly: the card carries a TIME but not a day, so three side by side left a
   visitor with no idea when any of them was. Day headings answer that, and
   they only work down a single column. */
.rd-upcoming.rd-wrap.rd-wrap {
	/* the archive's bottom gutter is for a page end, not an embedded section */
	padding-bottom: 0;
	/* it is inside a NectarBlocks row that already has side padding */
	padding-left: 0;
	padding-right: 0;
}
.rd-upcoming .rd-day:first-child .rd-day__head { margin-top: 0; }

/* Long single words (venue names, band names) must never break out of a narrow
   grid cell. Fits today at 3-up; this is the guard for the ones that will not. */
.rd-wrap .rd-ev__title { overflow-wrap: anywhere; }

/* ======================================================================
   Turn-5, 2026-09-22 — the reading column, and the card's third column
   ====================================================================== */

/* A measured column. Everything the plugin renders is a list of short rows
   read top to bottom, and at full desktop width a 1400px row puts the date at
   one end of the screen and the action at the other.

   max-width only — the horizontal PADDING stays with the theme container.
   Setting `padding` shorthand here once stripped it site-wide and ran text to
   the edge of the browser, which is why this touches margin and width alone. */
/* Scoped to the STREAMS, not every template. 800px is a reading measure and
   suits a list of short rows read top to bottom; the directory is a browse
   grid and the single member/festival pages are two-column, and all three are
   better with the room. */
.rd-wrap--stream.rd-wrap {
	margin-left: auto;
	margin-right: auto;
}

/* ---- the action moves to a third column on desktop --------------------
   Was stacked under the body, which on a wide row left a lot of air between
   the title and the one thing to press. */
@media (min-width: 720px) {
	.rd-wrap .rd-ev {
		grid-template-columns: 96px minmax(0, 1fr) auto;
		align-items: center;
	}
	.rd-wrap .rd-ev > .rd-ev__tile { align-self: start; }
	.rd-wrap .rd-ev__body { grid-column: 2; }
	.rd-wrap .rd-ev__cta {
		grid-column: 3;
		grid-row: 1;
		margin-top: 0;
		justify-self: end;
	}
	/* The button was align-self:flex-start from the stacked layout, which in a
	   centred third column pushed it back up to the top edge. */
	.rd-wrap .rd-ev .rd-btn { align-self: center; }
}

/* The measured column must still have a gutter. Adding max-width above meant
   the wrapper no longer inherited a usable one from the theme container at
   phone widths, and cards ran 0 to 375 — edge to edge.

   LONGHAND, never the `padding` shorthand: this file has already been bitten
   once by `padding: 0 0 120px` silently zeroing the sides. */
.rd-wrap.rd-wrap {
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
}
@media (min-width: 720px) {
	.rd-wrap.rd-wrap { padding-left: 24px; padding-right: 24px; }
}
/* 800px of CONTENT, not 800px including the gutter. */
.rd-wrap--stream.rd-wrap { max-width: calc(800px + 48px); }

/* The embedded home-page stream sits in a NectarBlocks row that already has
   side padding, so it keeps none of its own.

   No 800px cap here, unlike the /events/ stream. That measure exists to keep a
   line of prose readable, and this section has no prose: it is day headings and
   cards whose content sits in fixed left and right columns, so the extra width
   goes to the event title rather than stretching a paragraph. Letting it fill
   the row also lines its edges up with the "Coming up" cards directly above,
   which were never capped. */
.rd-upcoming.rd-wrap.rd-wrap { padding-left: 0; padding-right: 0; max-width: none; }

/* ---- org page details --------------------------------------------------
   The hero photo was the only square-cornered picture left on a site where
   every other image sits in a rounded card. */
.rd-orghero,
.rd-orghero img {
	border-radius: var(--r-card, 16px);
}
.rd-orghero { overflow: hidden; }
/* The mark overlaps the photo's lower edge, so the figure cannot clip it. */
.rd-orghero.has-mark { overflow: visible; }
.rd-orghero.has-mark img { border-radius: var(--r-card, 16px); }

/* The follow button inherited the body's line-height, which left the label
   sitting low in the pill instead of centred. */
.rd-side .rd-btn { line-height: 1; }

/* ---- "Coming up" onto the card language -------------------------------
   Was a flat khaki band with a red rule down its left edge — a treatment
   copied from the "On today" panel before the rest of the site moved to soft
   white cards. Next to the stream below it, it read as a different website.

   Each entry is now its own card, matching .rd-ev: surface ground, --cardline
   border, --r-card corners, the shared shadow. The heading sits outside them
   rather than inside a band, the same way "Today" sits above its day's cards. */
.rd-upnext.rd-upnext {
	background: none;
	border-left: 0;
	padding: 0;
	margin-bottom: 40px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.rd-upnext .rd-upnext__heading { margin: 0 0 4px; }

.rd-upnext .rd-upnext__item {
	margin: 0;
	padding: 20px;
	background: var(--surface, #fff);
	border: 1px solid var(--cardline, #ece6dd);
	border-radius: var(--r-card, 16px);
	box-shadow: var(--sh-card, 0 1px 2px rgba(28, 25, 23, .04), 0 10px 24px rgba(28, 25, 23, .06));
}
/* the old sibling spacing is replaced by the flex gap above */
.rd-upnext .rd-upnext__item + .rd-upnext__item { margin-top: 0; }

.rd-upnext .rd-upnext__title { color: var(--inkT, #1a1714); }
.rd-upnext .rd-upnext__when { color: var(--mutedT, #7c746a); margin: 0 0 10px; }
.rd-upnext .rd-upnext__excerpt { color: var(--bodyT, #4a443d); margin: 0 0 18px; }

/* ---- "About the series" ------------------------------------------------
   The evergreen description, after this edition's copy has taken the body.
   Set quieter than the body: somebody who arrived for a specific date has
   already got what they came for further up the page. */
.rd-series { margin-top: 48px; }
.rd-series__body { color: var(--bodyT, #4a443d); }
.rd-series__body > :first-child { margin-top: 0; }
.rd-series__body > :last-child { margin-bottom: 0; }

/* ---- the last two khaki bands onto the card language -------------------
   `.rd-next` (the "On today" panel) and `.rd-invite` (the recruiting ask) are
   the two remaining places using the band-with-a-red-rule treatment that
   `.rd-upnext` was copied from. With everything else now soft rounded cards,
   these were the last things on the site reading as a different design.

   They keep the warm tint — they ARE meant to sit forward of the page — but
   take the card's border, radius and shadow instead of a slab and a rule. */
.rd-next.rd-next,
.rd-invite.rd-invite {
	background: var(--tint, #f6f2ec);
	border: 1px solid var(--lineAlt, #e7e1d8);
	border-left-width: 1px;
	border-radius: var(--r-card, 16px);
	box-shadow: var(--sh-card, 0 1px 2px rgba(28, 25, 23, .04), 0 10px 24px rgba(28, 25, 23, .06));
}
.rd-invite.rd-invite { padding: 24px 26px; }
@media (max-width: 690px) {
	.rd-next.rd-next, .rd-invite.rd-invite { padding: 20px; }
}

/* ---- prose rhythm ------------------------------------------------------
   Two measured problems. The lede sat 8px off the copy below it, so the
   picture and the body read as one run rather than a header and its content.
   And .rd-prose paragraphs carried a 24px bottom margin against a 22.4px
   line-height — more than a full blank line between every sentence, which on
   the short paragraphs these pages are made of looked like a list of
   fragments rather than prose.

   Applied to .rd-prose itself, so it reaches #rd-more, .rd-series__body and
   anywhere else the class is used, rather than one page's copy. */
.rd-lede { margin-bottom: 40px; }
@media (max-width: 690px) { .rd-lede { margin-bottom: 28px; } }

.rd-prose p { margin-bottom: 14px; }
.rd-prose p:last-child { margin-bottom: 0; }
.rd-prose > :first-child { margin-top: 0; }
.rd-prose h2,
.rd-prose h3 { margin-top: 28px; }
.rd-prose h2:first-child,
.rd-prose h3:first-child { margin-top: 0; }

/* ---- "Coming up" on the homepage, with artwork -------------------------
   The item was text-only while every other card on the site leads with a
   picture, so the homepage's most prominent slot was its plainest. Same grid
   as .rd-fest.has-media on the district-events archive, deliberately: these
   two show the same events and had no business looking different.

   Column assignment is explicit and the span is a COUNT, not -1. `grid-row:
   1 / -1` names the last EXPLICIT line, and this grid declares no rows, so it
   collapses to row 1 and drops the date under the image. Same trap as the
   archive, same fix. */
.rd-upnext .rd-upnext__item.has-media {
	display: grid;
	grid-template-columns: 216px 1fr;
	column-gap: 28px;
	align-items: start;
}
.rd-upnext .rd-upnext__item.has-media > .rd-upnext__media {
	grid-column: 1;
	grid-row: 1 / span 6;
	align-self: start;
}
.rd-upnext .rd-upnext__item.has-media > :not(.rd-upnext__media) { grid-column: 2; }

.rd-upnext__media {
	display: block;
	overflow: hidden;
	background: var(--accentLight, #e8e6e0);
	border-radius: calc(var(--r-card, 16px) - 6px);
	aspect-ratio: 4 / 3;
	max-width: 100%;
}
.rd-upnext__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	max-width: 100%;
}

@media (max-width: 680px) {
	.rd-upnext .rd-upnext__item.has-media { grid-template-columns: 1fr; row-gap: 14px; }
	.rd-upnext .rd-upnext__item.has-media > .rd-upnext__media,
	.rd-upnext .rd-upnext__item.has-media > :not(.rd-upnext__media) { grid-column: 1; }
	.rd-upnext__media { aspect-ratio: 16 / 9; }
}

/* The button is a direct child, so the grid stretches it across the whole
   text column. Every other child SHOULD fill that width; a pill must not. */
.rd-upnext .rd-upnext__item.has-media > .rd-btn { justify-self: start; }

/* ---- Buttons sit on one line, tightly -----------------------------------
   Every button label is short and single-line by design, so inherited body
   leading (1.87 on .rd-btn, 1.67 on the segmented control) was padding the box
   from the inside and making a pill taller than its own padding asked for.
   Height comes from padding here, never from leading.

   Doubled class on .rd-btn on purpose: the theme's `button[type="submit"]` is
   (0,1,1) and beats any single class, so a submit-button variant would keep the
   theme's leading otherwise. Same reason the Gravity Forms selectors below carry
   the wrapper.

   NOTE: this is right for one line and wrong for two. A label long enough to
   wrap gets its lines touching. Nothing on the site wraps today except the
   "Hear when the next one is announced" button at phone width, which is why
   that one keeps a little leading just below. */
.rd-btn.rd-btn,
.rd-seg a,
.rd-browse a,
.nectar-blocks-button__inner {
	line-height: 1;
}

/* Our own submit buttons need more than a doubled class. The parent theme's
   winning selector is
     body[data-form-b-style="regular"] .container-wrap button[type="submit"]:not(.search-widget-btn)
   which is (0,4,2), because :not() contributes its argument's class. Matching
   its .container-wrap scope and doubling ours reaches (0,4,2) too and then
   loses on load order, so these double the class AND keep the element count up.

   GRAVITY FORMS BUTTONS ARE NOT HERE. rd.css is enqueued lazily, only on pages
   rendering Railway District content, so a rule for a GF submit would miss
   /business-information/ entirely while looking correct in this file. They live
   in the happynectar child theme's style.css, which loads on every page. */
.container-wrap .rd-filters-bar.rd-filters-bar form.rd-search button[type="submit"],
.container-wrap .rd-form.rd-form button[type="submit"] {
	line-height: 1;
}

/* The one exception, and it is a real one: this label runs to two lines on a
   phone, and at line-height 1 the two lines touch. CSS cannot ask whether text
   wrapped, so the button carries the class rather than the stylesheet guessing. */
.rd-btn.rd-btn--wrap {
	line-height: 1.2;
}