/*
Theme Name: Star of the North Concert Band
Theme URI: https://starofthenorthband.org
Author: Modern Logic
Author URI: https://modernlogic.io
Description: Child theme of Twenty Twenty-Five for the Star of the North Concert Band website. Implements the "Organic, blue-shifted" design system: Carolina blue on a cool pale ground, Caprasimo display type, over-rounded surfaces.
Template: twentytwentyfive
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.2
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: star-of-the-north
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, wide-blocks, block-styles, style-variations
*/

/*
 * Design tokens live in theme.json (colors, type scale, spacing, radii) so the
 * Site Editor can see them. This file adds the plain `--color-*` aliases the
 * design handoff specifies, plus the component classes theme.json cannot express.
 *
 * Sections
 *   1. Tokens
 *   2. Base elements
 *   3. Utilities
 *   4. Buttons, tags, inputs
 *   5. Global chrome — header / footer
 *   6. Home
 *   7. Concerts
 *   8. The band
 *   9. Repertoire
 *  10. Members
 *  11. Join
 *  12. Responsive
 */

/* ─────────────────────────────────────────────────────────────────────────────
   1. Tokens
   ───────────────────────────────────────────────────────────────────────── */

:root {
	--color-bg: #eef4fa;
	--color-surface: #dde9f4;
	--color-text: #12212e;
	--color-accent: #2f92d6;
	--color-accent-2: #c9922f;
	--color-divider: color-mix(in srgb, #12212e 14%, transparent);

	--color-accent-100: #edf6fd;
	--color-accent-200: #d2e8fa;
	--color-accent-300: #a9d3f3;
	--color-accent-400: #71b7e9;
	--color-accent-500: #3f9ad6;
	--color-accent-600: #1f7cb8;
	--color-accent-700: #17608f;
	--color-accent-800: #124667;
	--color-accent-900: #0f2f43;

	--color-accent-2-100: #fdf3e0;
	--color-accent-2-200: #f8e4c1;
	--color-accent-2-300: #eecf9b;
	--color-accent-2-400: #dfb26c;
	--color-accent-2-500: #c9922f;
	--color-accent-2-600: #a67520;
	--color-accent-2-700: #805916;
	--color-accent-2-800: #5c400f;
	--color-accent-2-900: #3b290a;

	--color-neutral-100: #f6fafd;
	--color-neutral-200: #e7eef5;
	--color-neutral-300: #d2dde7;
	--color-neutral-400: #adbcc9;
	--color-neutral-500: #8b9baa;
	--color-neutral-600: #6c7c8b;
	--color-neutral-700: #4f5e6c;
	--color-neutral-800: #35424e;
	--color-neutral-900: #1e2933;

	--font-heading: "Caprasimo", system-ui, sans-serif;
	--font-body: "Figtree", system-ui, sans-serif;

	/*
	 * Two families, one weight scale. Caprasimo is reserved for major headlines and
	 * numerals; everything else — nav, buttons, card titles, tables — is Figtree at
	 * 400 body / 600 UI / 700 emphasis.
	 */
	--weight-ui: 600;
	--weight-strong: 700;

	/*
	 * Ink steps mixed toward the ground rather than set with opacity, so secondary
	 * copy stays properly dark instead of washing out on the pale blue.
	 */
	--ink-1: #12212e;                                     /* 13.9:1 on the ground */
	--ink-2: color-mix(in srgb, #12212e 90%, #eef4fa);    /* 11.2:1 — body copy    */
	--ink-3: color-mix(in srgb, #12212e 82%, #eef4fa);    /*  8.6:1 — secondary    */
	--ink-4: color-mix(in srgb, #12212e 68%, #eef4fa);    /*  5.4:1 — meta, labels */

	--space-1: 4.4px;
	--space-2: 8.8px;
	--space-3: 13.2px;
	--space-4: 17.6px;
	--space-6: 26.4px;
	--space-8: 35.2px;

	--radius-sm: 8px;
	--radius-md: 16px;
	--radius-lg: 28px;
	--radius-panel: 32px;
	--radius-hero: 36px;
	--radius-pill: 999px;

	--shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent);
	--shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent);
	--shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent);

	--icon-arrow-right: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272.75%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M4 12h14M12.5 6l6 6-6 6%27/%3E%3C/svg%3E');

	/* Page rail: 1180px total, 32px of it padding, 1116px of content. */
	--rail: 1180px;
	--rail-pad: 32px;
	--rail-content: 1116px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. Base elements
   ───────────────────────────────────────────────────────────────────────── */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Long prose sets better with pretty; display headings balance. */
p,
li {
	text-wrap: pretty;
}

h1,
h2 {
	text-wrap: balance;
}

figure {
	margin: 0;
}

img {
	display: block;
	max-width: 100%;
}

:focus {
	outline: none;
}

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

::selection {
	background: color-mix(in srgb, var(--color-accent) 30%, transparent);
}

[disabled],
.is-disabled {
	opacity: 0.45;
}

/* Parent theme sets link underline thickness with !important; keep the offset
   the design asks for. */
a {
	text-underline-offset: 0.1em;
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. Utilities
   ───────────────────────────────────────────────────────────────────────── */

/*
 * NOTE: no photo filter. The handoff specified a `.washed` wrap on every content
 * photograph — saturate(0.6) contrast(0.85) brightness(1.1) opacity(0.94) — which
 * the band rejected: it read as faded, and the opacity term mixed the page's pale
 * blue into the picture. Photographs render at full fidelity. Do not reintroduce.
 */

/* Rounded, clipped photo frame. Set a height with --frame-h. */
.frame {
	border-radius: var(--radius-panel);
	overflow: hidden;
	height: var(--frame-h, auto);
}

.frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rail {
	max-width: var(--rail);
	margin-inline: auto;
	padding-inline: var(--rail-pad);
}

/* First content section on a page sits 56px below the header. */
.rail--top {
	padding-top: 56px;
}

.kicker {
	font-size: 11px;
	font-weight: var(--weight-ui);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-accent-700);
	margin: 0;
}

/* Gold star from the logo mark, used as a quiet section signature. */
.kicker--star::before,
.section-head > h2::before {
	content: "";
	display: inline-block;
	width: 0.72em;
	height: 0.72em;
	margin-right: 0.5em;
	vertical-align: baseline;
	background: no-repeat center / contain
		url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M12 0 13.7 10.3 24 12 13.7 13.7 12 24 10.3 13.7 0 12 10.3 10.3Z%27 fill=%27%23c9922f%27/%3E%3C/svg%3E');
}

.section-head > h2::before {
	width: 0.3em;
	height: 0.3em;
	margin-right: 0.38em;
	vertical-align: 0.24em;
}

.lede {
	font-size: 18px;
	color: var(--ink-3);
	max-width: 60ch;
}

.meta {
	font-size: 13px;
	color: var(--ink-4);
}

.figcaption,
figcaption {
	font-size: 13px;
	color: var(--ink-4);
	margin-top: var(--space-2);
}

/* Gold hairline, borrowed from the logo's line work, to separate major sections. */
.rule-gold,
.wp-block-separator.rule-gold {
	height: 1px;
	border: 0;
	margin: 0;
	background: linear-gradient(
		90deg,
		transparent,
		color-mix(in srgb, var(--color-accent-2) 55%, transparent) 18%,
		color-mix(in srgb, var(--color-accent-2) 55%, transparent) 82%,
		transparent
	);
}

/* Section header: heading beside a ghost "see all" link. */
.section-head {
	display: flex;
	align-items: baseline;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 28px;
}

.section-head h2 {
	margin: 0;
}

/*
 * The arrow is drawn here rather than typed into the content: a literal → in post
 * content gets mangled to "?" somewhere in the save path, twice now. A masked SVG
 * in currentColor has no font or encoding dependency.
 */
.link-ghost {
	font-size: 15px;
	color: var(--color-accent-700);
	text-decoration: none;
}

.link-ghost::after {
	content: "";
	display: inline-block;
	width: 0.9em;
	height: 0.9em;
	margin-left: 0.4em;
	vertical-align: -0.1em;
	background-color: currentColor;
	-webkit-mask: var(--icon-arrow-right) no-repeat center / contain;
	mask: var(--icon-arrow-right) no-repeat center / contain;
}

.link-ghost:hover {
	text-decoration: underline;
}

.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 18px;
}

/* Two-column prose/photo split, centered. */
.split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 56px;
	align-items: center;
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. Buttons, tags, inputs
   ───────────────────────────────────────────────────────────────────────── */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 44px;
	padding: 12px 26px;
	font-family: var(--font-body);
	font-weight: var(--weight-ui);
	font-size: 15px;
	line-height: 1.2;
	color: var(--color-text);
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 120ms ease, color 120ms ease;
}

.btn-primary {
	background: var(--color-accent);
	color: #fff;
}

.btn-primary:hover {
	background: var(--color-accent-600);
	color: #fff;
}

.btn-primary:active {
	background: var(--color-accent-700);
}

.btn-secondary {
	border-color: var(--color-divider);
	color: var(--color-text);
}

.btn-secondary:hover {
	background: color-mix(in srgb, var(--color-text) 7%, transparent);
}

.btn-secondary:active {
	background: color-mix(in srgb, var(--color-text) 14%, transparent);
}

/* White button for use inside the dark accent-800 panels. */
.btn-inverse {
	background: #fff;
	color: var(--color-accent-800);
	padding: 14px 30px;
	font-size: 16px;
}

.btn-inverse:hover {
	background: var(--color-accent-100);
	color: var(--color-accent-800);
}

.btn-sm {
	padding: 9px 20px;
	font-size: 14px;
}

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.tag {
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	letter-spacing: 0.02em;
	padding: 5px 14px;
	border-radius: var(--radius-pill);
	background: var(--color-accent-100);
	color: var(--color-accent-800);
}

.tag-neutral {
	background: var(--color-neutral-100);
	color: var(--color-neutral-800);
	font-size: 13px;
	padding: 6px 14px;
}

.tag-accent-2 {
	background: var(--color-accent-2-100);
	color: var(--color-accent-2-800);
}

.input {
	width: 100%;
	min-height: 44px;
	padding: 8px 18px;
	font: inherit;
	font-size: 15px;
	color: var(--color-text);
	caret-color: var(--color-accent);
	background: var(--color-surface);
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-pill);
}

.input::placeholder {
	color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

.input:hover {
	border-color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

.input:focus-visible {
	border-color: var(--color-accent);
	outline-offset: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   5. Global chrome — header / footer
   ───────────────────────────────────────────────────────────────────────── */

.site-header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: color-mix(in srgb, var(--color-bg) 88%, transparent);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 20px;
	max-width: var(--rail);
	margin-inline: auto;
	padding: 7px var(--rail-pad);
}

.brand {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-right: auto;
	color: inherit;
	text-decoration: none;
}

/* Placeholder star mark — swap for the band logo when it is uploaded. */
.brand__mark {
	width: 40px;
	height: 40px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: var(--radius-pill);
	background: var(--color-accent);
	color: #fff;
	font-family: var(--font-heading);
	font-size: 19px;
	line-height: 1;
}

.brand__mark img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.brand__text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.brand__name {
	font-family: var(--font-heading);
	font-size: 19px;
}

.brand__tagline {
	font-size: 11px;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--ink-4);
}

.site-nav {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: 2px;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-nav__list li {
	position: relative;
}

/* Chevron on items that own a submenu. */
.site-nav__list .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 0.4em;
	height: 0.4em;
	margin-left: 0.5em;
	vertical-align: 0.15em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.6;
}

/* Submenu panel. Kept in flow but hidden, so focusing the parent link reveals it
   for keyboard users via :focus-within — no script needed. */
.site-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 30;
	min-width: 232px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 8px 0 0;
	padding: 10px;
	list-style: none;
	background: var(--color-surface);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 120ms ease, transform 120ms ease, visibility 120ms;
}

.site-nav__list > li:hover > .sub-menu,
.site-nav__list > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.site-nav__list .sub-menu a {
	display: block;
	white-space: nowrap;
}

/* Menu button — hidden until the nav collapses. */
.site-nav__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: var(--radius-pill);
	color: inherit;
	cursor: pointer;
}

.site-nav__toggle:hover {
	background: var(--color-accent-100);
}

.site-nav__toggle-bars,
.site-nav__toggle-bars::before,
.site-nav__toggle-bars::after {
	display: block;
	width: 20px;
	height: 1.5px;
	background: currentColor;
	border-radius: 2px;
}

.site-nav__toggle-bars::before,
.site-nav__toggle-bars::after {
	content: "";
	position: relative;
}

.site-nav__toggle-bars::before {
	top: -6px;
}

.site-nav__toggle-bars::after {
	top: 4.5px;
}

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

.site-nav a,
.site-header .wp-block-navigation-item__content {
	font-size: 14px;
	font-weight: var(--weight-ui);
	padding: 8px 12px;
	border-radius: var(--radius-pill);
	color: inherit;
	text-decoration: none;
	transition: background-color 120ms ease;
}

.site-nav a:hover,
.site-header .wp-block-navigation-item__content:hover {
	background: var(--color-accent-100);
	color: inherit;
}

.site-nav a[aria-current="page"],
.site-header .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
	color: var(--color-accent-700);
}

/* The header CTA keeps its pill even inside a nav block. */
.site-nav .btn {
	margin-left: 8px;
}

.site-footer {
	margin-top: 96px;
	border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
}

.site-footer__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	max-width: var(--rail);
	margin-inline: auto;
	padding: 44px var(--rail-pad);
}

.site-footer__about {
	margin-right: auto;
	max-width: 34ch;
}

.site-footer__about h2,
.site-footer__about p:first-child strong {
	font-family: var(--font-heading);
	font-size: 22px;
	font-weight: 400;
	margin: 0 0 var(--space-2);
}

.site-footer__about p {
	font-size: 14px;
	color: var(--ink-3);
	margin: 0;
}

.site-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.site-footer a {
	font-size: 14px;
	color: var(--ink-3);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--color-accent-700);
	text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────────────────────────
   6. Home
   ───────────────────────────────────────────────────────────────────────── */

/* Single column: the ensemble photograph runs full width below the copy rather
   than sitting beside it, so no one gets cropped out of the frame. */
.hero {
	display: block;
}

.hero h1 {
	line-height: 0.98;
	letter-spacing: -0.02em;
	text-wrap: balance;
	margin: 20px 0 22px;
}

.hero__lede {
	font-size: 19px;
	color: var(--ink-3);
	max-width: 58ch;
	margin: 0;
}

/*
 * The hero copy sits in a flow-layout group: a constrained layout would centre any
 * child narrower than the content width, which pulls a measured headline off the
 * rail. Inside a flow group, max-width simply sets the measure and the text stays
 * left-aligned.
 */
.hero__copy > *,
.page-intro > * {
	margin-inline: 0;
}

/* Actions and proof share one row so the hero stays compact and uses its width. */
.hero__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 28px;
	margin-top: 28px;
	padding-top: 22px;
	border-top: 1px solid var(--color-divider);
}

.hero__actions .wp-block-buttons {
	margin: 0;
}

.hero__actions .proof {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* Proof row — the stats sit directly under the copy they support, divided by
   hairlines rather than floating in their own column. */
.proof {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin-top: 32px;
	padding-top: 20px;
	border-top: 1px solid var(--color-divider);
}

.proof > .stat {
	padding-right: 26px;
	margin-right: 26px;
	border-right: 1px solid var(--color-divider);
}

.proof > .stat:last-child {
	padding-right: 0;
	margin-right: 0;
	border-right: 0;
}

/*
 * Donate: the one place the logo's gold acts as a second voice. Tinted rather than
 * solid gold — #c9922f cannot carry white text at an accessible contrast.
 */
.proof__action {
	margin: 0;
	padding-left: 4px;
}

.btn-donate .wp-block-button__link,
a.btn-donate {
	background: var(--color-accent-2-100);
	color: var(--color-accent-2-800);
	border: 1px solid color-mix(in srgb, var(--color-accent-2) 45%, transparent);
	padding: 11px 24px;
	font-size: 15px;
}

.btn-donate .wp-block-button__link:hover,
a.btn-donate:hover {
	background: var(--color-accent-2-200);
	color: var(--color-accent-2-900);
}

.stat__value {
	font-family: var(--font-heading);
	font-size: 34px;
	line-height: 1;
	color: var(--color-accent-700);
}

.stat__label {
	font-size: 13px;
	color: var(--ink-4);
	margin-top: 6px;
}

/*
 * The ensemble band: full width, natural aspect ratio, no cropping — every player
 * stays in frame. Capped in height so it does not become a billboard on very wide
 * displays; that cap trims the floor, never the musicians.
 */
.band-photo {
	margin: 0;
}

.band-photo img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 520px;
	object-fit: cover;
	object-position: center;
	/* Square at the viewport edges — theme.json rounds images by default. */
	border-radius: 0;
}

/* The next concert, given its own weight: date, place, blurb and a way in. */
.concert-feature {
	display: grid;
	grid-template-columns: 132px minmax(0, 1fr) auto;
	gap: 32px;
	align-items: center;
	padding: 32px 36px;
	background: var(--color-surface);
	border-radius: var(--radius-panel);
	box-shadow: var(--shadow-sm);
}

.concert-feature__date {
	text-align: center;
	padding-right: 24px;
	border-right: 1px solid var(--color-divider);
}

.concert-feature__month {
	display: block;
	font-size: 12px;
	font-weight: var(--weight-ui);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-4);
}

.concert-feature__day {
	display: block;
	font-family: var(--font-heading);
	font-size: 56px;
	line-height: 1.02;
	color: var(--color-accent-700);
}

.concert-feature__year {
	display: block;
	font-size: 12px;
	color: var(--ink-4);
}

.concert-feature__title {
	font-family: var(--font-heading);
	font-size: 30px;
	line-height: 1.12;
	margin: 6px 0 8px;
}

.concert-feature__where {
	font-size: 16px;
	font-weight: var(--weight-ui);
	color: var(--ink-2);
	margin: 0;
}

.concert-feature__time {
	font-size: 15px;
	color: var(--ink-3);
	margin: 2px 0 0;
}

.concert-feature__blurb {
	font-size: 15px;
	color: var(--ink-3);
	max-width: 60ch;
	margin: 12px 0 0;
}

.card-grid--after-feature {
	margin-top: 18px;
}

/* Concert cards for the dates after the next one. */
.concert-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px;
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	color: inherit;
	text-decoration: none;
}

.concert-card__when {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.concert-card__day {
	font-family: var(--font-heading);
	font-size: 30px;
	line-height: 1;
	color: var(--color-accent-700);
}

.concert-card__month {
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-4);
}

.concert-card__title {
	font-family: var(--font-body);
	font-weight: var(--weight-strong);
	font-size: 19px;
	line-height: 1.2;
	margin: 0;
}

.concert-card__time {
	font-size: 14px;
	color: var(--ink-3);
}

.concert-card__venue {
	font-size: 13px;
	color: var(--ink-4);
}

/* Dark join panel, used on the home page and the join page. */
.cta-panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 40px;
	align-items: center;
	padding: 56px;
	border-radius: var(--radius-hero);
	background: var(--color-accent-800);
	color: #fff;
}

.cta-panel h2 {
	font-size: 38px;
	margin: 0 0 var(--space-3);
	color: #fff;
}

.cta-panel p {
	font-size: 17px;
	opacity: 0.85;
	max-width: 52ch;
	margin: 0;
}

/* Narrow variant: the stacked panel in the join page's right column. */
.cta-panel--stack {
	grid-template-columns: minmax(0, 1fr);
	align-self: start;
	padding: 36px;
	border-radius: var(--radius-panel);
	gap: var(--space-3);
}

.cta-panel--stack h2 {
	font-size: 28px;
}

.cta-panel--stack p {
	font-size: 16px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   7. Concerts
   ───────────────────────────────────────────────────────────────────────── */

.event-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 40px;
}

.event-row {
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr) auto;
	gap: 28px;
	align-items: center;
	padding: 24px 30px;
	background: var(--color-surface);
	border-radius: var(--radius-lg);
}

.event-row__date {
	text-align: center;
	padding-right: 20px;
	border-right: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
}

.event-row__month {
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-4);
}

.event-row__day {
	font-family: var(--font-heading);
	font-size: 38px;
	line-height: 1.05;
	color: var(--color-accent-700);
}

.event-row__year {
	font-size: 12px;
	color: var(--ink-4);
}

.event-row__title {
	font-family: var(--font-body);
	font-weight: var(--weight-strong);
	font-size: 22px;
	line-height: 1.2;
	margin: 0 0 4px;
}

.event-row__venue {
	font-size: 14px;
	color: var(--ink-3);
}

.event-row__actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.empty-state {
	padding: 32px;
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	font-size: 16px;
	color: var(--ink-3);
}

/* "Listen back" recap cards. */
.recap-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 18px;
}

.recap-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 130px;
	padding: 24px;
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	color: inherit;
	text-decoration: none;
	transition: background-color 120ms ease;
}

.recap-card:hover {
	background: var(--color-accent-100);
}

.recap-card__title {
	font-family: var(--font-body);
	font-weight: var(--weight-strong);
	font-size: 19px;
	line-height: 1.2;
	margin: 0;
}

.recap-card__note {
	font-size: 14px;
	color: var(--ink-3);
	flex: 1;
}

/* ─────────────────────────────────────────────────────────────────────────────
   8. The band
   ───────────────────────────────────────────────────────────────────────── */

.director-card {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 36px;
	padding: 32px;
	background: var(--color-surface);
	border-radius: var(--radius-panel);
}

.director-card + .director-card {
	margin-top: 18px;
}

.director-card .frame {
	border-radius: 24px;
	--frame-h: 300px;
}

.director-card__name {
	font-family: var(--font-heading);
	font-size: 30px;
	line-height: 1.12;
	margin: var(--space-3) 0 var(--space-3);
}

.director-card__bio p {
	font-size: 16px;
	color: var(--ink-2);
}

.history-board {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 48px;
	margin-top: 64px;
}

.history-board p {
	font-size: 16px;
	color: var(--ink-2);
}

/* Board list — role at .6 opacity opposite the name. */
.board-list {
	margin: 0;
}

.board-list div,
.board-list .board-list__row {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding: 12px 0;
	border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
	font-size: 16px;
}

.board-list dt {
	color: var(--ink-4);
}

.board-list dd {
	margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   9. Repertoire
   ───────────────────────────────────────────────────────────────────────── */

.rep-controls {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin: 32px 0 24px;
}

.rep-controls .input {
	max-width: 320px;
}

.chip-group {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.chip {
	min-height: 32px;
	padding: 6px 14px;
	font: inherit;
	font-size: 13px;
	color: inherit;
	background: transparent;
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: background-color 120ms ease, color 120ms ease;
}

.chip:hover {
	background: color-mix(in srgb, var(--color-text) 7%, transparent);
}

.chip[aria-pressed="true"],
.chip.is-active {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: #fff;
}

.rep-count {
	margin-left: auto;
	font-size: 14px;
	color: var(--ink-4);
}

.rep-panel {
	background: var(--color-surface);
	border-radius: var(--radius-panel);
	padding: 12px 28px 20px;
	overflow: hidden;
}

.rep-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.rep-table th {
	text-align: left;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-4);
	padding: var(--space-2);
	border-bottom: 1px solid var(--color-divider);
}

.rep-table td {
	padding: var(--space-2);
	border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}

.rep-table tbody tr:hover {
	background: color-mix(in srgb, var(--color-text) 4%, transparent);
}

.rep-table .col-performed {
	text-align: right;
	white-space: nowrap;
}

.rep-footnote {
	margin-top: var(--space-4);
	font-size: 13px;
	color: var(--ink-4);
}

/* ─────────────────────────────────────────────────────────────────────────────
   10. Members
   ───────────────────────────────────────────────────────────────────────── */

.doc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 18px;
	margin-top: 40px;
}

.doc-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 170px;
	padding: 26px;
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	color: inherit;
	text-decoration: none;
	transition: background-color 120ms ease;
}

.doc-card:hover {
	background: var(--color-accent-100);
}

.doc-card__title {
	font-family: var(--font-body);
	font-weight: var(--weight-strong);
	font-size: 20px;
	line-height: 1.2;
	margin: 0;
}

.doc-card__note {
	font-size: 14px;
	color: var(--ink-3);
	flex: 1;
}

.doc-card__open {
	color: var(--color-accent-700);
	font-size: 14px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   11. Join
   ───────────────────────────────────────────────────────────────────────── */

.step-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin-top: 44px;
}

.step-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 32px;
	background: var(--color-surface);
	border-radius: var(--radius-panel);
}

.step-card__num {
	width: 52px;
	height: 52px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: var(--radius-pill);
	background: var(--color-accent);
	color: #fff;
	font-family: var(--font-heading);
	font-size: 22px;
	line-height: 1;
}

.step-card h3 {
	font-size: 24px;
	margin: 0;
}

.step-card p {
	font-size: 15px;
	color: var(--ink-3);
	margin: 0;
}

.join-detail {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 48px;
	margin-top: 56px;
}

.join-detail h2 {
	font-size: 30px;
}

.join-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-left: 22px;
	margin: 0;
	font-size: 16px;
	color: var(--ink-2);
}

.join-note {
	margin-top: var(--space-4);
	font-size: 15px;
	color: var(--ink-3);
}

/* ─────────────────────────────────────────────────────────────────────────────
   12. Core block bridge
   Maps the design components onto the markup core blocks actually emit.
   ───────────────────────────────────────────────────────────────────────── */

/* Section photograph beside prose. Framed high so faces survive the crop. */
.story-photo img {
	width: 100%;
	height: 400px;
	object-fit: cover;
	object-position: center 22%;
	border-radius: var(--radius-panel);
}

.wp-block-image figcaption {
	font-size: 13px;
	color: var(--ink-4);
	margin-top: 10px;
	text-align: left;
}

/* Secondary button — core's outline style, retuned to the design's border. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	border: 1px solid var(--color-divider);
	color: var(--color-text);
	transition: background-color 120ms ease;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--color-text) 7%, transparent);
	border-color: var(--color-divider);
	color: var(--color-text);
}

.wp-block-button.is-style-outline > .wp-block-button__link:active {
	background: color-mix(in srgb, var(--color-text) 14%, transparent);
}

/* Hero CTA hierarchy: the primary action carries weight, the secondary steps back
   to a quiet text action rather than competing as a second pill. */
.hero .wp-block-buttons > .wp-block-button:first-child .wp-block-button__link {
	padding: 15px 32px;
	font-size: 16px;
}

.hero .wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	border-color: transparent;
	padding-inline: 8px;
	color: var(--color-accent-700);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.hero .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: transparent;
	color: var(--color-accent-600);
}

/* Buttons inside the dark panels invert. */
.cta-panel .wp-block-button__link {
	background: #fff;
	color: var(--color-accent-800);
	padding: 14px 30px;
	font-size: 16px;
}

.cta-panel .wp-block-button__link:hover {
	background: var(--color-accent-100);
	color: var(--color-accent-800);
}

.cta-panel :where(h1, h2, h3, p) {
	color: #fff;
}

.cta-panel p {
	font-size: 17px;
	opacity: 0.85;
	max-width: 52ch;
	margin: 0;
}

/* Header: logo, nav pills, CTA. */
.site-header .wp-block-site-logo {
	margin-right: auto;
	line-height: 0;
}

/* Sized up so the mark carries the header rather than floating in it. The source
   is only 307×96, so 68px is about as large as it stays crisp — a larger PNG or an
   SVG would allow more. */
.site-header .wp-block-site-logo img {
	height: 68px;
	width: auto;
	max-width: none;
}

.site-header .wp-block-navigation {
	font-size: 14px;
}

.site-header .wp-block-navigation .wp-block-navigation-item__content {
	text-decoration: none;
}

.site-header .wp-block-navigation__responsive-container-open,
.site-header .wp-block-navigation__responsive-container-close {
	padding: 8px;
}

/* The header CTA keeps the pill fill at the smaller header size. */
.site-header__cta .wp-block-button__link {
	font-size: 14px;
}

/* Footer link columns. */
.site-footer__links {
	list-style: none;
	padding: 0;
}

.site-footer .wp-block-heading {
	font-size: 22px;
	margin: 0 0 var(--space-2);
}

/* Prose columns in the story section. */
.prose {
	font-size: 17px;
	color: var(--ink-2);
}

/* Ghost "Full calendar →" link sits on the heading baseline. */
.link-ghost-wrap {
	margin: 0;
}

/* WordPress emits `.tag` as a block-level paragraph; keep the pill shrink-wrapped. */
p.tag {
	width: fit-content;
	margin: 0;
}

/*
 * The handoff's 70px, which now fits: with the photograph moved below, the headline
 * owns the full rail. The measure is set just wide enough for the longer line so the
 * break reads as composed rather than as wrapping.
 */
.hero__title {
	font-size: clamp(38px, 5.2vw, 70px);
	line-height: 0.98;
	letter-spacing: -0.02em;
	max-width: 800px;
}

.stat__value + .stat__label {
	margin-top: 4px;
}

.stat p {
	margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   13. Responsive — designed at 1180px
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
	:root {
		--rail-pad: 24px;
	}

	.hero {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.cta-panel {
		padding: 40px;
	}
}

@media (max-width: 900px) {
	.split,
	.history-board,
	.join-detail,
	.step-grid,
	.cta-panel {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.story-photo img {
		height: 280px;
	}

	.cta-panel h2 {
		font-size: 30px;
	}

	.director-card {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.director-card .frame {
		--frame-h: 240px;
	}

	/* The next-concert feature drops its action below the copy. */
	.concert-feature {
		grid-template-columns: 96px minmax(0, 1fr);
		gap: 22px;
		padding: 26px 24px;
	}

	.concert-feature__date {
		padding-right: 18px;
	}

	.concert-feature__day {
		font-size: 44px;
	}

	.concert-feature__title {
		font-size: 26px;
	}

	.concert-feature__action {
		grid-column: 1 / -1;
	}

	/* Concert rows go two-row: date + title, then time and Details. */
	.event-row {
		grid-template-columns: 90px minmax(0, 1fr);
		gap: 20px;
		padding: 20px 22px;
	}

	.event-row__actions {
		grid-column: 1 / -1;
	}

	.rep-controls .input {
		max-width: none;
	}

	.rep-count {
		margin-left: 0;
	}

	.rep-panel {
		padding-inline: 18px;
	}

	.rep-table .col-arranger {
		display: none;
	}

	.site-footer {
		margin-top: 64px;
	}

	/* Nav collapses to a menu button; the logo and the CTA both stay. */
	.site-header__inner {
		gap: 12px;
		position: relative;
	}

	.site-nav__toggle {
		display: inline-flex;
	}

	.site-nav__list {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		padding: 12px var(--rail-pad) 18px;
		background: var(--color-bg);
		border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
		box-shadow: var(--shadow-md);
	}

	.site-nav[data-open="true"] .site-nav__list {
		display: flex;
	}

	/* Submenus sit inline in the open panel rather than as a floating dropdown. */
	.site-nav__list .sub-menu {
		position: static;
		min-width: 0;
		margin: 0;
		padding: 2px 0 2px 14px;
		background: transparent;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.site-nav__list .menu-item-has-children > a::after {
		display: none;
	}

	.site-header .wp-block-site-logo {
		flex: 0 0 auto;
		min-width: 0;
	}

	.site-header .wp-block-site-logo img {
		height: 44px;
	}
}

@media (max-width: 600px) {
	.site-header .wp-block-site-logo img {
		height: 38px;
	}

	.site-header__cta .wp-block-button__link {
		padding: 8px 14px;
		font-size: 13px;
	}

	.cta-panel {
		padding: 28px;
	}

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

	.event-row__date {
		display: flex;
		align-items: baseline;
		gap: 8px;
		text-align: left;
		padding-right: 0;
		border-right: 0;
	}

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

	.concert-feature__date {
		display: flex;
		align-items: baseline;
		gap: 8px;
		text-align: left;
		padding-right: 0;
		border-right: 0;
	}

	.concert-feature__day {
		font-size: 38px;
	}

	.proof > .stat {
		padding-right: 18px;
		margin-right: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
   14. The Events Calendar
   The plugin's List view, restyled to the concert cards used on the home page.
   Its stylesheets load after this one, so the token overrides sit on `html:root`
   (beating the plugin's `:root`) and structural rules carry two classes.
   ───────────────────────────────────────────────────────────────────────── */

html:root {
	--tec-color-text-primary: var(--ink-1);
	--tec-color-text-primary-light: var(--ink-3);
	--tec-color-text-secondary: var(--ink-3);
	--tec-color-text-event-title: var(--ink-1);
	--tec-color-text-event-date: var(--ink-3);
	--tec-color-link-primary: var(--ink-1);
	--tec-color-link-accent: var(--color-accent-700);
	--tec-color-link-accent-hover: var(--color-accent-600);
	--tec-color-accent-primary: var(--color-accent);
	--tec-color-accent-primary-hover: var(--color-accent-600);
	--tec-color-accent-primary-active: var(--color-accent-700);
	--tec-color-accent-secondary: var(--color-accent-700);
	/* `--tec-color-button-primary` is the fill; the label uses
	   `--tec-color-background`, so that one must stay opaque white. */
	--tec-color-button-primary: var(--color-accent);
	--tec-color-button-primary-hover: var(--color-accent-600);
	--tec-color-button-primary-active: var(--color-accent-700);
	--tec-color-background: #ffffff;
	--tec-color-background-events: transparent;
	/* The search bar has its own background/border tokens. */
	--tec-color-background-events-bar: transparent;
	--tec-color-border-events-bar: transparent;
	--tec-color-background-secondary: var(--color-surface);
	--tec-color-border-default: var(--color-divider);
	--tec-color-border-secondary: var(--color-divider);
	--tec-color-border-tertiary: var(--color-divider);
	--tec-color-icon-primary: var(--ink-3);
	--tec-color-icon-active: var(--color-accent-700);
	--tec-color-box-shadow: var(--shadow-sm);
}

/* The plugin ships its own sans stack. */
.tribe-common,
.tribe-common button,
.tribe-common input,
.tribe-common select,
.tribe-common h1,
.tribe-common h2,
.tribe-common h3,
.tribe-common h4,
.tribe-common h5,
.tribe-common h6 {
	font-family: var(--font-body);
}

/*
 * Keep the view inside the page rail and drop the plugin's own page furniture:
 * 96px of top padding, 160px of bottom padding and a 700px min-height, all of
 * which fight the site's spacing.
 */
/*
 * `!important` is deliberate here and below: the plugin's grid utilities
 * (`tribe-common-g-row`, `-g-col`) set equal-specificity padding and negative
 * margins from a stylesheet that loads after this one. Only layout properties are
 * forced — colour and type are handled by specificity above.
 */
.tribe-events.tribe-common .tribe-events-l-container {
	max-width: var(--rail-content);
	min-height: 0;
	padding-block: 0 24px;
	padding-inline: 0 !important;
}

/* — event rows become the home page's concert card — */
.tribe-events .tribe-events-calendar-list__event-row {
	display: grid;
	grid-template-columns: 132px minmax(0, 1fr);
	gap: 32px;
	align-items: center;
	margin: 0 0 14px !important;
	padding: 30px 36px;
	background: var(--color-surface);
	border-radius: var(--radius-panel);
	box-shadow: var(--shadow-sm);
}

.tribe-events .tribe-events-calendar-list__event-row::before,
.tribe-events .tribe-events-calendar-list__event-row::after {
	content: none;
}

/* Date block: weekday over the day numeral, with the divider rule. */
.tribe-events .tribe-events-calendar-list__event-date-tag {
	width: auto;
	max-width: none;
	padding: 0 24px 0 0 !important;
	text-align: center;
	border-right: 1px solid var(--color-divider);
}

.tribe-events .tribe-events-calendar-list__event-date-tag-weekday {
	display: block;
	font-size: 12px;
	font-weight: var(--weight-ui);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-4);
}

.tribe-events .tribe-events-calendar-list__event-date-tag-daynum,
.tribe-events .tribe-events-calendar-list__event-date-tag-daynum.tribe-common-h4--min-medium {
	display: block;
	margin: 0;
	font-family: var(--font-heading);
	font-size: 56px;
	font-weight: 400;
	line-height: 1.02;
	color: var(--color-accent-700);
}

.tribe-events .tribe-events-calendar-list__event-wrapper {
	width: auto;
	max-width: none;
	padding: 0 !important;
}

.tribe-events .tribe-events-calendar-list__event {
	display: block;
	margin: 0 !important;
}

.tribe-events .tribe-events-calendar-list__event-details {
	width: auto;
	max-width: none;
	padding: 0 !important;
}

/* Chained with the plugin's own typography classes to out-specify them. */
.tribe-events .tribe-events-calendar-list__event-title,
.tribe-events .tribe-events-calendar-list__event-title.tribe-common-h6,
.tribe-events .tribe-events-calendar-list__event-title.tribe-common-h4--min-medium {
	margin: 0 0 8px;
	font-family: var(--font-heading);
	font-size: 28px;
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: -0.015em;
}

.tribe-events .tribe-events-calendar-list__event-title-link {
	color: var(--ink-1);
	text-decoration: none;
}

.tribe-events .tribe-events-calendar-list__event-title-link:hover {
	color: var(--color-accent-700);
}

.tribe-events .tribe-events-calendar-list__event-venue {
	display: block;
	margin: 0;
	font-size: 16px;
	font-style: normal;
	color: var(--ink-2);
}

.tribe-events .tribe-events-calendar-list__event-venue-title {
	font-weight: var(--weight-ui);
}

.tribe-events .tribe-events-calendar-list__event-venue-address {
	color: var(--ink-4);
}

.tribe-events .tribe-events-calendar-list__event-datetime-wrapper {
	margin: 2px 0 0;
	font-size: 15px;
	color: var(--ink-3);
}

.tribe-events .tribe-events-calendar-list__event-description {
	margin: 12px 0 0;
	font-size: 15px;
	color: var(--ink-3);
	max-width: 62ch;
}

.tribe-events .tribe-events-calendar-list__event-description p:last-child {
	margin-bottom: 0;
}

/* Month heading, with the gold hairline used between home page sections. */
.tribe-events .tribe-events-calendar-list__month-separator {
	margin: 32px 0 18px;
	padding: 0;
	border: 0;
}

.tribe-events.tribe-common .tribe-events-calendar-list__month-separator::after {
	height: 1px;
	margin-left: 20px;
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--color-accent-2) 55%, transparent),
		transparent
	);
}

.tribe-events.tribe-common .tribe-events-calendar-list__month-separator-text,
.tribe-events .tribe-events-calendar-list__month-separator-text {
	display: inline-block;
	margin: 0;
	padding: 0;
	font-family: var(--font-heading);
	font-size: 24px;
	font-weight: 400;
	color: var(--ink-1);
	background: transparent;
}

/* — events bar: search field and controls in the site's own idiom — */
.tribe-events .tribe-events-c-events-bar {
	margin-bottom: 26px;
	background: transparent;
	border: 0;
}

.tribe-events.tribe-common .tribe-events-header {
	margin-inline: 0 !important;
	padding-inline: 0 !important;
}

.tribe-events .tribe-events-c-events-bar__search-container {
	background: transparent;
}

.tribe-events .tribe-events-c-search__input-control {
	background: transparent;
	border: 0;
}

.tribe-events.tribe-common .tribe-events-c-search__input,
.tribe-events.tribe-common input.tribe-events-c-search__input {
	min-height: 44px;
	padding: 8px 18px 8px 42px;
	font-size: 15px;
	color: var(--ink-1);
	background: var(--color-surface);
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-pill);
}

.tribe-events .tribe-events-c-search__input::placeholder {
	color: var(--ink-4);
}

.tribe-events .tribe-common-c-btn,
.tribe-events button.tribe-common-c-btn {
	min-height: 44px;
	padding: 11px 24px;
	font-family: var(--font-body);
	font-weight: var(--weight-ui);
	border-radius: var(--radius-pill);
}

/* Bordered buttons (Today, Subscribe) as the site's secondary pill. */
.tribe-events.tribe-common .tribe-common-c-btn-border,
.tribe-events.tribe-common a.tribe-common-c-btn-border,
.tribe-events.tribe-common .tribe-common-c-btn-border-small {
	min-height: 40px;
	padding: 8px 18px;
	font-family: var(--font-body);
	font-weight: var(--weight-ui);
	color: var(--ink-2);
	background: transparent;
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-pill);
}

.tribe-events.tribe-common .tribe-common-c-btn-border:hover,
.tribe-events.tribe-common a.tribe-common-c-btn-border:hover,
.tribe-events.tribe-common .tribe-common-c-btn-border-small:hover {
	color: var(--ink-1);
	background: color-mix(in srgb, var(--color-text) 7%, transparent);
	border-color: var(--color-divider);
}

/* Date navigation and the "Upcoming" label. */
.tribe-events .tribe-events-c-top-bar {
	margin-bottom: 26px;
}

.tribe-events.tribe-common .tribe-events-c-top-bar__datepicker-button {
	font-family: var(--font-heading);
	font-size: 24px;
	font-weight: 400;
	color: var(--ink-1);
}

/* View switcher (List / Month) as quiet pills. */
.tribe-events.tribe-common .tribe-events-c-view-selector__list-item-link {
	font-family: var(--font-body);
	font-weight: var(--weight-ui);
	color: var(--ink-3);
}

.tribe-events.tribe-common .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link {
	color: var(--color-accent-700);
}

/* Previous / Next Events. */
.tribe-events .tribe-events-c-nav {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--color-divider);
}

.tribe-events.tribe-common .tribe-events-c-nav__prev,
.tribe-events.tribe-common .tribe-events-c-nav__next {
	font-family: var(--font-body);
	font-weight: var(--weight-ui);
	color: var(--color-accent-700);
}

/*
 * The plugin orders the row's header time-first (order: 1/2/3). Re-order it to
 * match the home page's concert card: title, then place, then when.
 */
.tribe-events .tribe-events-calendar-list__event-header .tribe-events-calendar-list__event-title,
.tribe-events .tribe-events-calendar-list__event-header .tribe-events-calendar-list__event-title.tribe-common-h6 {
	order: 1;
}

.tribe-events.tribe-common .tribe-events-calendar-list__event-header .tribe-events-calendar-list__event-venue {
	order: 2;
	margin-top: 0;
}

.tribe-events.tribe-common .tribe-events-calendar-list__event-header .tribe-events-calendar-list__event-datetime-wrapper {
	order: 3;
}