/**
 * Meanwhile in Music — component styles.
 *
 * Ports the design system's component specs (components/*.jsx and
 * ui_kits/website/*.jsx) onto the markup WordPress actually renders:
 * block-theme chrome, post listings, the meanwhile-core review display,
 * Fluent Forms, The Events Calendar, and WooCommerce.
 *
 * House rules from the design system, applied throughout:
 *   · sharp corners (radius 0) and NO shadows — separation via hairlines + whitespace
 *   · square (1:1) media for covers, promo shots, product photos
 *   · buttons/tags: squared, uppercase, letter-spaced
 *   · motion: 120–340ms ease-out on hover/focus only
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. Global
   ═══════════════════════════════════════════════════════════════════════════ */

/* No elevation anywhere — the system is deliberately flat. */
.wp-block-post,
.wp-block-group,
.wp-block-image img,
.wp-block-post-featured-image img {
	box-shadow: none;
}

/* Focus indicator: keyboard only.
   Twenty Twenty-Five ships `:where(.wp-site-blocks :focus){outline-width:2px;
   outline-style:solid}` in its global styles. Because that targets plain
   `:focus`, every link drew a 2px box the moment it was clicked — album titles,
   product names, breadcrumbs, the lot. Restrict it to `:focus-visible`, which
   is what the ring is actually for: keyboard and other non-pointer focus keep
   the outline, a mouse click no longer draws one. Site-wide, so it also covers
   plugin markup (WooCommerce and The Events Calendar breadcrumbs). */
.wp-site-blocks :focus:not(:focus-visible) {
	outline: none;
}

/* Long-form prose is editorial serif; UI chrome stays Barlow. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > blockquote {
	font-family: var(--font-editorial);
	font-size: var(--text-md);
	line-height: var(--leading-relaxed);
}

/* Sticky footer: on short pages the footer must sit at the bottom of the
   viewport rather than leaving a bare strip of background beneath it.
   .wp-site-blocks becomes a flex column that fills the screen, and `main` takes
   up the slack. (Flex children stretch full-width by default, so alignwide /
   alignfull keep working.) */
html {
	background: var(--surface-page);
}

/* The element that owns the site footer becomes the full-height column.
   Usually that's .wp-site-blocks, but some templates nest one level deeper —
   WooCommerce's coming-soon page wraps header/content/footer in its own div and
   renders no <main> at all — so match whichever element holds the footer. */
.wp-site-blocks,
.wp-site-blocks > *:has(> footer.wp-block-template-part) {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* Account for the admin bar so logged-in views don't overflow by its height. */
.admin-bar .wp-site-blocks,
.admin-bar .wp-site-blocks > *:has(> footer.wp-block-template-part) {
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
}

/* Whatever sits between the header and footer absorbs the leftover height. */
.wp-site-blocks > main,
.wp-site-blocks > *:has(> footer.wp-block-template-part),
.wp-site-blocks > *:has(> footer.wp-block-template-part) > *:not(header):not(footer) {
	flex: 1 0 auto;
}

/* `main` is a direct child of .wp-site-blocks, so it inherits the root blockGap
   as a top margin on top of its own padding. The template padding is the single
   source of vertical rhythm — drop the extra margin. */
.wp-site-blocks > main,
.wp-site-blocks > main.wp-block-group {
	margin-top: 0;
	margin-bottom: 0;
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Same for the footer, so the gap above it is `main`'s padding and nothing else. */
.wp-site-blocks > footer.wp-block-template-part {
	margin-top: 0;
	margin-block-start: 0;
}

/* Full-bleed sections stacked inside `main` each carry their own vertical
   padding; the root blockGap added a further 24px between them, so the gap
   above a section heading was padding + gap rather than just padding. */
main > .wp-block-group.alignfull,
main > .entry-content.alignfull {
	margin-top: 0;
	margin-bottom: 0;
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Eyebrow / metadata treatment. */
.mwim-eyebrow {
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-widest);
	color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. Header — sticky, one step darker than the page, closed by a hairline
   ═══════════════════════════════════════════════════════════════════════════ */

.wp-site-blocks > header,
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--surface-header);
	border-bottom: 1px solid var(--border-strong);
}

/* Script wordmark in the header. */
.mwim-wordmark img,
.wp-block-site-logo img {
	display: block;
	height: 58px;
	width: auto;
	max-width: none;
	border-radius: 0;
}

/* Header row: logo pinned left, nav and cart grouped together on the right.
   The row is space-between, which spread three children evenly across the full
   width and left a wide gap between the nav and the cart icon. An auto margin
   on the logo does the same job without the spreading. */
header .wp-block-group.alignwide {
	justify-content: flex-start;
	gap: var(--space-5);
}

header .wp-block-group.alignwide > .wp-block-site-logo {
	margin-right: auto;
}

/* Once the nav collapses to a menu button the header becomes a three-up bar:
   menu left, wordmark centred, cart right. The outer two both take `flex: 1 1 0`
   so they claim equal width regardless of their differing icon sizes — that's
   what actually centres the wordmark, rather than space-between, which would
   only look centred if the icons happened to match. */
@media (max-width: 599px) {
	header .wp-block-group.alignwide {
		gap: var(--space-4);
	}

	header .wp-block-group.alignwide > .wp-block-navigation {
		order: 0;
		flex: 1 1 0;
		justify-content: flex-start;
	}

	header .wp-block-group.alignwide > .wp-block-site-logo {
		order: 1;
		flex: 0 0 auto;
		margin-right: 0;
	}

	header .wp-block-group.alignwide > .wc-block-mini-cart {
		order: 2;
		flex: 1 1 0;
		display: flex;
		justify-content: flex-end;
	}

	/* The menu opens as a left drawer rather than a full-screen sheet. Its ink
	   surface comes from the navigation block's own overlay colour attributes
	   (see parts/header.html) — core styles the default with
	   `.wp-block-navigation:not(.has-background) …`, which outranks a plain
	   class selector here, and setting the attributes both wins and keeps the
	   colour visible in the editor.
	   The overlay is content-box, so it needs border-box for the width to mean
	   the drawer's full width rather than width-plus-padding. */
	.wp-block-navigation__responsive-container.is-menu-open {
		right: auto;
		box-sizing: border-box;
		width: min(82vw, 340px);
		border-right: 1px solid rgba(250, 244, 230, .18);
		padding: var(--space-6);
	}

	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
		align-items: flex-start;
		justify-content: flex-start;
	}

	/* The nav block is set to justify right for the desktop header, which becomes
	   `align-items: flex-end` once the overlay stacks into a column — links would
	   hug the drawer's right edge. Reset it so they read from the left. */
	header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container,
	header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container.items-justified-right {
		align-items: flex-start;
		justify-content: flex-start;
		gap: var(--space-4);
	}

	/* Links reverse out of the ink drawer. These have to match the doubled-class
	   specificity the header's ink rule uses, or they inherit ink-on-ink and the
	   menu reads as empty. */
	header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content.wp-block-navigation-item__content {
		color: var(--paper-050);
		font-family: var(--font-ui);
		font-weight: 600;
		font-size: var(--text-md);
		text-transform: uppercase;
		letter-spacing: var(--tracking-wider);
	}

	/* Current page and hover both take gold — rust is too dark on ink. */
	header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
	header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content.wp-block-navigation-item__content[aria-current="page"],
	header .wp-block-navigation__responsive-container.is-menu-open
	.current-menu-item > .wp-block-navigation-item__content.wp-block-navigation-item__content,
	header .wp-block-navigation__responsive-container.is-menu-open
	.mwim-nav-current > .wp-block-navigation-item__content.wp-block-navigation-item__content {
		color: var(--gold-500);
	}

	.wp-block-navigation__responsive-container-close {
		color: var(--paper-050);
	}
}

/* Primary nav: uppercase, letter-spaced, ink → rust on hover/current. */
header .wp-block-navigation {
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
}

/* WordPress core sets `color: inherit` on nav links via a deliberately doubled
   class (.wp-block-navigation-item__content.wp-block-navigation-item__content,
   0-3-0), so brand colors must match that specificity to land. */
header .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--ink-900);
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-standard);
}

header .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
	color: var(--rust-700);
}

/* Current page — rust, per the design system's Header spec. `aria-current` is
   the reliable hook (WordPress sets it on page links); `.current-menu-item` and
   an href match cover custom links like /events/, which WordPress doesn't mark. */
header .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content[aria-current="page"],
header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content.wp-block-navigation-item__content,
header .wp-block-navigation .current_page_item > .wp-block-navigation-item__content.wp-block-navigation-item__content,
header .wp-block-navigation .mwim-nav-current > .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--rust-700);
}

/* Clicking a link shouldn't draw a focus box — keep it for keyboard users only.
   The wordmark is a link too, so it gets the same treatment: a mouse click on
   the logo left a box around it on the way back to the homepage. */
header .wp-block-navigation a:focus:not(:focus-visible),
footer .wp-block-navigation a:focus:not(:focus-visible),
.wp-block-navigation a:focus:not(:focus-visible),
.wp-block-site-logo a:focus:not(:focus-visible),
.wp-block-site-title a:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
	text-decoration: none;
}

header .wp-block-navigation a:focus-visible,
.wp-block-site-logo a:focus-visible {
	outline: 2px solid var(--rust-700);
	outline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. Footer — inverse ink surface
   ═══════════════════════════════════════════════════════════════════════════ */

.wp-site-blocks > footer,
footer.wp-block-template-part {
	background: var(--surface-inverse);
	color: var(--text-inverse);
}

footer.wp-block-template-part a,
.wp-site-blocks > footer a {
	color: var(--paper-050);
	transition: color var(--duration-fast) var(--ease-standard);
}

footer.wp-block-template-part a:hover,
.wp-site-blocks > footer a:hover {
	color: var(--gold-500);
}

footer .wp-block-navigation {
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
}

footer .wp-block-site-title a {
	color: var(--paper-050);
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. Buttons — squared, uppercase; hover is a solid color swap, never a bounce
   ═══════════════════════════════════════════════════════════════════════════ */

.wp-block-button__link,
.wp-element-button,
button.wp-element-button,
input[type="submit"],
.mwim-contact-card__button,
.mwim-coming-soon__button {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	border-radius: var(--radius-sm);
	border: 2px solid var(--ink-900);
	background: var(--ink-900);
	color: var(--paper-050);
	padding: 12px 26px;
	box-shadow: none;
	transition:
		background var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard);
}

.wp-block-button__link:hover,
.wp-element-button:hover,
input[type="submit"]:hover,
.mwim-contact-card__button:hover,
.mwim-coming-soon__button:hover {
	background: var(--rust-700);
	border-color: var(--rust-700);
	color: var(--paper-050);
}

/* Outline variant. */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--ink-900);
	border-color: var(--ink-900);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--ink-900);
	color: var(--paper-050);
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. Badges / tags — squared, small, uppercase
   ═══════════════════════════════════════════════════════════════════════════ */

.mwim-badge {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: var(--text-2xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
	padding: 5px 10px;
	border-radius: var(--radius-sm);
	background: var(--gold-300);
	color: var(--ink-900);
}

.mwim-badge--rust { background: var(--rust-500); color: var(--paper-050); }
.mwim-badge--maroon { background: var(--maroon-600); color: var(--paper-050); }
.mwim-badge--ink { background: var(--ink-900); color: var(--paper-050); }

/* Post category/tag chips rendered by core blocks. */
.wp-block-post-terms a {
	display: inline-block;
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: var(--text-2xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
	padding: 5px 10px;
	background: var(--gold-300);
	color: var(--ink-900);
	text-decoration: none;
}

.wp-block-post-terms a:hover {
	background: var(--gold-500);
	color: var(--ink-900);
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. Section headings — script title + uppercase subhead + 2px ink rule
   ═══════════════════════════════════════════════════════════════════════════ */

.mwim-section-heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-5);
	flex-wrap: wrap;
	padding-bottom: var(--space-4);
	border-bottom: 2px solid var(--ink-900);
	margin-bottom: var(--space-6);
}

.mwim-section-heading__script {
	font-family: var(--font-script);
	font-weight: 400;
	font-size: var(--text-3xl);
	color: var(--accent-primary);
	line-height: 1;
	margin: 0;
	letter-spacing: 0;
}

/* Available to screen readers and search engines, invisible on screen. */
.mwim-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Homepage hero mosaic — full-bleed and never cropped: it's a composed collage,
   so cropping would cut people out of it. Two crops of the artwork are supplied
   (16:9 landscape, 4:5 portrait) and swapped by a <picture> element keyed on
   viewport orientation, so the browser only fetches the one it uses. */
.mwim-hero-mosaic {
	display: block;
	margin: 0;
	line-height: 0;
}

.mwim-hero-mosaic img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
	box-shadow: none;
}

/* Alternating sunken section band — the design system's rhythm device: sections
   alternate between the paper page background and a sunken band closed by
   hairline rules top and bottom. */
.mwim-section-band {
	border-top: 1px solid var(--border-default);
	border-bottom: 1px solid var(--border-default);
}

.mwim-section-heading__subhead {
	font-family: var(--font-ui);
	text-transform: uppercase;
	letter-spacing: var(--tracking-widest);
	font-size: var(--text-xs);
	color: var(--text-muted);
	margin: 8px 0 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. Post listings — the editorial ReviewCard: full-bleed square cover,
      type directly beneath, no card chrome. Hover = 3% zoom + underline.
   ═══════════════════════════════════════════════════════════════════════════ */

.wp-block-post-template {
	gap: var(--space-7) var(--space-6);
}

/* Column ladder for the review grids. The block itself declares a fixed column
   count (4 on the homepage), and core only breaks that to a single column below
   600px — so between 600px and the container's full 1240px the covers shrink to
   postage stamps. Step down instead: 4 → 3 → 2, and let core's 600px rule (a
   quadrupled class, so it outranks these) take it to 1.
   Scoped to `.is-layout-grid` so the flow/flex listings are untouched. */
@media (max-width: 1023px) {
	.wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {
	.wp-block-post-template.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Pagination carries its own top gap, so no spacer is needed in the template —
   nothing is reserved when there's only one page of results. */
.wp-block-query-pagination {
	margin-top: var(--space-7);
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
}

.wp-block-post-template > li {
	background: transparent;
	border: 0;
	padding: 0;
	box-shadow: none;
}

/* Square, cropped cover art. */
.wp-block-post-template .wp-block-post-featured-image {
	aspect-ratio: 1 / 1 !important;
	overflow: hidden;
	margin-bottom: var(--space-3);
	background: var(--surface-sunken);
	border-radius: 0;
}

.wp-block-post-template .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
	transition: transform var(--duration-slow) var(--ease-out);
}

.wp-block-post-template .wp-block-post-featured-image:hover img {
	transform: scale(1.03);
}

/* Card title: condensed display, underline on hover. */
.wp-block-post-template .wp-block-post-title {
	font-family: var(--font-display);
	font-size: var(--text-md);
	font-weight: 400;
	letter-spacing: var(--tracking-wide);
	line-height: 1.1;
	margin: var(--space-2) 0 var(--space-1);
}

.wp-block-post-template .wp-block-post-title a {
	color: var(--text-body);
	text-decoration: none;
}

.wp-block-post-template .wp-block-post-title a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
	color: var(--text-body);
}

.wp-block-post-template .wp-block-post-date,
.wp-block-post-template .wp-block-post-author {
	font-family: var(--font-ui);
	font-size: var(--text-2xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
	color: var(--text-muted);
}

.wp-block-post-template .wp-block-post-excerpt {
	font-family: var(--font-editorial);
	font-size: var(--text-sm);
	color: var(--text-muted);
	line-height: var(--leading-normal);
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. Single review — matches the design system's ReviewPage spec
   ═══════════════════════════════════════════════════════════════════════════ */

/* Album cover: square, never cropped by a 3:2 template frame. */
.single .wp-block-post-featured-image {
	aspect-ratio: 1 / 1 !important;
	overflow: hidden;
	background: var(--surface-sunken);
}

.single .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

.single .wp-block-post-title {
	font-family: var(--font-display);
	font-size: var(--text-3xl);
	font-weight: 400;
	letter-spacing: var(--tracking-wide);
	line-height: 1.02;
}

/* ── The meanwhile-core review details block ──────────────────────────────── */

.mwim-review-details {
	margin: var(--space-7) 0 var(--space-6);
}

/* Meta line: hairline-ruled top and bottom, UI type. */
.mwim-review-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3) var(--space-5);
	list-style: none;
	padding: 14px 0;
	margin: 0 0 var(--space-7);
	border-top: 1px solid var(--border-default);
	border-bottom: 1px solid var(--border-default);
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	color: var(--text-body);
}

.mwim-review-meta li { margin: 0; }

.mwim-review-meta strong {
	font-weight: 600;
}

/* Promo gallery: 4-up square grid, 2px gutters (design system uses gap: 2). */
.mwim-review-gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2px;
	margin: 0 0 var(--space-7);
}

@media (min-width: 600px) {
	.mwim-review-gallery {
		grid-template-columns: repeat(4, 1fr);
	}
}

.mwim-review-gallery figure {
	margin: 0;
	background: var(--surface-sunken);
}

.mwim-review-gallery img.mwim-review-photo {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	height: auto;
	border-radius: 0;
}

/* "Follow the artist" — display heading + squared link chips. */
.mwim-review-links h2 {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: 400;
	letter-spacing: var(--tracking-wide);
	margin: 0 0 14px;
}

.mwim-review-links ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.mwim-review-links a {
	display: inline-block;
	font-family: var(--font-ui);
	font-size: var(--text-2xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	padding: 7px 14px;
	color: var(--ink-900);
	background: transparent;
	transition:
		background var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard);
}

.mwim-review-links a:hover,
.mwim-review-links a:focus-visible {
	background: var(--ink-900);
	border-color: var(--ink-900);
	color: var(--paper-050);
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. Forms — Fluent Forms + core, squared inputs on hairline outlines
   ═══════════════════════════════════════════════════════════════════════════ */

.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="url"],
.fluentform input[type="tel"],
.fluentform input[type="number"],
.fluentform input[type="date"],
.fluentform textarea,
.fluentform select,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
textarea,
select {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	color: var(--text-body);
	background: var(--surface-card);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	padding: 11px 14px;
	box-shadow: none;
	transition: border-color var(--duration-fast) var(--ease-standard);
}

.fluentform input:focus,
.fluentform textarea:focus,
.fluentform select:focus,
input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--ink-900);
}

/* Section breaks inside a form are subordinate to the form's own heading, so
   they take the eyebrow treatment (Barlow, uppercase, muted, hairline rule)
   rather than competing with the Bebas form title above them. */
.fluentform .ff-el-section-title,
.fluentform h3.ff-el-section-title,
.fluentform .ff-el-section-break .ff-el-section-title {
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--tracking-widest);
	color: var(--text-muted);
	margin: var(--space-6) 0 var(--space-3);
	padding-top: var(--space-4);
	border-top: 1px solid var(--border-default);
	line-height: 1.3;
}

/* The first section break sits directly under the form heading — no rule needed. */
.fluentform .ff-el-section-break:first-of-type .ff-el-section-title {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.fluentform label,
.fluentform .ff-el-input--label label {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	color: var(--text-body);
}

/* Fluent Forms emits a per-form generated stylesheet for the submit button
   (scoped by wrapper class), so !important is needed to reassert the brand. */
.fluentform .ff-btn-submit,
.fluentform button[type="submit"],
.fluentform .ff_btn_style {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	background: var(--ink-900) !important;
	background-color: var(--ink-900) !important;
	color: var(--paper-050) !important;
	border: 2px solid var(--ink-900) !important;
	border-radius: var(--radius-sm) !important;
	padding: 12px 26px;
	box-shadow: none !important;
	transition:
		background-color var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard);
}

.fluentform .ff-btn-submit:hover,
.fluentform button[type="submit"]:hover,
.fluentform .ff_btn_style:hover {
	background: var(--rust-700) !important;
	background-color: var(--rust-700) !important;
	border-color: var(--rust-700) !important;
	color: var(--paper-050) !important;
}

/* Required-field asterisk picks up the rust accent. */
.fluentform .ff-el-is-required.asterisk-right label:after,
.fluentform .ff-el-is-required.asterisk-left label:before {
	color: var(--rust-500);
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. WooCommerce — merch grid in the same editorial register
   ═══════════════════════════════════════════════════════════════════════════

   On a block theme WooCommerce renders the shop through its *block* templates
   (.wc-block-product-template / .wc-block-product), not the classic
   `ul.products li.product` markup — so the block selectors below do the real
   work. The classic selectors further down are kept as a fallback in case a
   classic template or shortcode is ever used. */

/* Grid rhythm matches the reviews grid. WooCommerce's own responsive rule uses
   a wide auto-fill minmax that collapses the shop to 2 very large columns even
   in the 1240px container, so set the track count explicitly. */
.wc-block-product-template {
	gap: var(--space-7) var(--space-6);

	/* Equal-height rows, so a wrapping title in one row doesn't make that row
	   taller than the next. Ignored when WooCommerce renders the flex variant. */
	grid-auto-rows: 1fr;
}

/* Two up on small screens, then honour whatever column count the block itself
   declares (`columns-N`) — the shop archive asks for 3, the homepage merch row
   asks for 4. */
.wc-block-product-template.wc-block-product-template__responsive {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 900px) {
	.wc-block-product-template__responsive.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wc-block-product-template__responsive.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.wc-block-product-template__responsive.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.wc-block-product-template__responsive.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.wc-block-product-template .wc-block-product {
	background: transparent;
	border: 0;
	padding: 0;
	box-shadow: none;
	text-align: left;

	/* Uniform card height across a row. Grid/flex items already stretch, so the
	   column just has to fill that height; the price then takes the slack with
	   an auto top margin (below), which lands every price and Add-to-cart on the
	   same baseline no matter how many lines the title runs to. */
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* Product photo: square, sharp, flat — 3% zoom on hover like the review cards. */
.wc-block-product-template .wc-block-components-product-image,
.wc-block-product-template .wp-block-woocommerce-product-image {
	margin-bottom: var(--space-3);
	overflow: hidden;
	background: var(--surface-card);
}

.wc-block-product-template .wc-block-components-product-image img,
.wc-block-product-template img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	border-radius: 0;
	box-shadow: none;
	transition: transform var(--duration-slow) var(--ease-out);
}

.wc-block-product-template .wc-block-product:hover img {
	transform: scale(1.03);
}

/* Title + price sit directly beneath the photo, left-aligned.
   WooCommerce's block template puts `has-medium-font-size` / `has-small-font-size`
   on these, and WordPress emits preset font-size classes with !important — so
   the brand sizes have to be marked too in order to land. */
.wc-block-product-template .wp-block-post-title,
.wc-block-product-template .wc-block-components-product-name {
	font-family: var(--font-display);
	font-size: var(--text-md) !important;
	font-weight: 400;
	letter-spacing: var(--tracking-wide);
	line-height: 1.15;
	text-align: left;
	margin: 0 0 var(--space-1);
}

.wc-block-product-template .wp-block-post-title a,
.wc-block-product-template .wc-block-components-product-name {
	color: var(--text-body);
	text-decoration: none;
}

.wc-block-product-template .wc-block-product:hover .wp-block-post-title a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wc-block-product-template .wp-block-woocommerce-product-price,
.wc-block-product-template .wc-block-components-product-price {
	font-family: var(--font-ui);
	font-size: var(--text-sm) !important;
	color: var(--text-muted);
	text-align: left;
	display: block;
	margin-bottom: var(--space-3);
}

/* Takes up whatever height a shorter title left over — see the card rule above. */
.wc-block-product-template .wp-block-woocommerce-product-price {
	margin-top: auto;
}

/* Add to cart. */
.wc-block-product-template .wc-block-components-product-button {
	text-align: left;
}

.wc-block-components-product-button .wc-block-components-product-button__button,
.wc-block-product-template .wp-block-button__link {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: var(--text-2xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
	background-color: var(--ink-900);
	color: var(--paper-050);
	border: 2px solid var(--ink-900);
	border-radius: var(--radius-sm);
	padding: 10px 20px;
	box-shadow: none;
	transition: background-color var(--duration-fast) var(--ease-standard);
}

.wc-block-components-product-button .wc-block-components-product-button__button:hover,
.wc-block-product-template .wp-block-button__link:hover {
	background-color: var(--rust-700);
	border-color: var(--rust-700);
	color: var(--paper-050);
}

/* WooCommerce's own block templates end flush with the last product — on a
   single product that's the "Related products" row, which then butts straight
   into the footer. The templates come from the plugin, so the breathing room is
   added here rather than by forking them. */
body.single-product main.wp-block-group,
body.post-type-archive-product main.wp-block-group,
body.tax-product_cat main.wp-block-group,
body.tax-product_tag main.wp-block-group {
	padding-bottom: var(--space-9);
}

/* Single product page. */
.wp-block-woocommerce-product-image-gallery img,
.woocommerce div.product div.images img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 0;
	box-shadow: none;
}

.woocommerce div.product .product_title {
	font-family: var(--font-display);
	font-weight: 400;
	letter-spacing: var(--tracking-wide);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--font-ui);
	color: var(--ink-900);
	font-weight: 600;
}

/* Header mini-cart — WooCommerce hooks this in once the store is live. Kept
   (a shop needs cart access) but toned to the header's ink-on-paper chrome. */
header .wc-block-mini-cart__button {
	color: var(--ink-900);
	padding: 0;
	background: transparent;
}

header .wc-block-mini-cart__button:hover {
	color: var(--rust-700);
	background: transparent;
}

header .wc-block-mini-cart__badge {
	font-family: var(--font-ui);
	font-size: var(--text-2xs);
	font-weight: 600;
	background: var(--ink-900);
	color: var(--paper-050);
	border-radius: var(--radius-pill);
}

.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 0;
	box-shadow: none;
	margin-bottom: var(--space-3);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-display);
	font-size: var(--text-md);
	font-weight: 400;
	letter-spacing: var(--tracking-wide);
	line-height: 1.1;
	color: var(--text-body);
	padding: 0;
}

.woocommerce ul.products li.product .price {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	color: var(--text-muted);
	font-weight: 500;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	background: var(--ink-900);
	color: var(--paper-050);
	border-radius: var(--radius-sm);
	padding: 12px 26px;
	box-shadow: none;
	transition: background var(--duration-fast) var(--ease-standard);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: var(--rust-700);
	color: var(--paper-050);
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. The Events Calendar — list & calendar views
   ═══════════════════════════════════════════════════════════════════════════

   TEC v2 views are driven by their own `--tec-*` custom properties, so the
   bulk of the brand work is remapping that variable layer onto our tokens
   rather than fighting hundreds of scoped selectors. Scoped to `.tribe-common`
   (TEC's outermost wrapper) so it reliably beats their `:root` defaults.
   Targeted rules below handle what variables don't reach — chiefly type roles
   (Bebas titles, Barlow chrome) and the flat, sharp-cornered card register. */

.tribe-common,
.tribe-events,
.tribe-events-view {
	/* Type */
	--tec-font-family-sans-serif: var(--font-ui);

	/* Text */
	--tec-color-text-primary: var(--ink-900);
	--tec-color-text-primary-light: var(--ink-500);
	--tec-color-text-secondary: var(--ink-500);
	--tec-color-text-secondary-event-date: var(--ink-500);
	--tec-color-text-events-title: var(--ink-900);
	--tec-color-text-event-title: var(--ink-900);
	--tec-color-text-event-date: var(--ink-500);
	--tec-color-text-disabled: var(--line-strong);

	/* Accents — rust for interactive (matches site link color), ink for UI */
	--tec-color-accent-primary: var(--rust-700);
	--tec-color-accent-primary-hover: var(--rust-500);
	--tec-color-accent-primary-active: var(--rust-700);
	--tec-color-accent-primary-background: var(--paper-100);
	--tec-color-accent-secondary: var(--ink-900);
	--tec-color-accent-secondary-hover: var(--ink-700);
	--tec-color-accent-secondary-active: var(--ink-900);
	--tec-color-accent-secondary-background: var(--paper-100);
	--tec-color-link-primary: var(--ink-900);
	--tec-color-link-accent: var(--rust-700);
	--tec-color-link-accent-hover: var(--gold-700);

	/* Surfaces. NOTE: --tec-color-background doubles as the contrast text color
	   on filled states (e.g. the selected day in the date picker), so it must be
	   a real color, not `transparent` — matching the page keeps views blending
	   in while overlays and reversed text still render. */
	--tec-color-background: var(--paper-050);
	--tec-color-background-secondary: var(--paper-100);
	--tec-color-background-secondary-hover: var(--paper-200);
	--tec-color-background-events: transparent;
	--tec-color-background-month-grid: transparent;
	--tec-color-background-messages: var(--paper-100);
	--tec-color-background-transparent: rgba(255, 253, 248, .6);

	/* Multi-day bars in the month grid — gold tints, not TEC's blue/grey. */
	--tec-color-background-primary-multiday: rgba(214, 164, 56, .3);
	--tec-color-background-primary-multiday-hover: rgba(214, 164, 56, .5);
	--tec-color-background-secondary-multiday: rgba(214, 164, 56, .3);
	--tec-color-background-secondary-multiday-hover: rgba(214, 164, 56, .5);
	--tec-color-accent-primary-week-event: rgba(214, 164, 56, .2);
	--tec-color-accent-primary-week-event-hover: rgba(214, 164, 56, .35);
	--tec-color-accent-primary-week-event-featured: rgba(214, 164, 56, .12);
	--tec-color-accent-primary-week-event-featured-hover: rgba(214, 164, 56, .25);

	/* Borders — hairline only */
	--tec-color-border-default: var(--line-soft);
	--tec-color-border-secondary: var(--line-soft);
	--tec-color-border-tertiary: var(--line-strong);
	--tec-color-border-hover: var(--ink-500);
	--tec-color-border-active: var(--ink-900);

	/* Icons */
	--tec-color-icon-primary: var(--ink-500);
	--tec-color-icon-primary-alt: var(--ink-500);
	--tec-color-icon-secondary: var(--line-strong);
	--tec-color-icon-active: var(--ink-900);
	--tec-color-icon-focus: var(--rust-700);
	--tec-color-icon-hover: var(--rust-700);
	--tec-color-event-icon: var(--ink-900);
	--tec-color-event-icon-hover: var(--rust-700);

	/* Shape + elevation — the system is flat and square */
	--tec-border-radius-default: 0;
	--tec-box-shadow-default: none;
	--tec-box-shadow-card: none;
	--tec-box-shadow-tooltip: none;
	--tec-box-shadow-multiday: none;
	--tec-form-box-shadow-default: none;
	--tec-outline-color-default: var(--ink-900);

	/* Motion — match the theme's ease-out timings */
	--tec-transition: all var(--duration-normal) var(--ease-out);
	--tec-transition-color: color var(--duration-fast) var(--ease-standard);
	--tec-transition-background-color: background-color var(--duration-fast) var(--ease-standard);
	--tec-transition-border-color: border-color var(--duration-fast) var(--ease-standard);
}

/* TEC's view container ships a generous 64px vertical padding intended for
   themes with no chrome around it. Our template already supplies the section
   rhythm, so trim it to avoid a double gap under the section heading. */
/* TEC sets the view container's padding and min-height twice: a base rule
   (0-2-0) and a wider-viewport rule keyed to a JS-applied breakpoint class,
   `.tribe-common--breakpoint-medium.tribe-events .tribe-events-l-container`
   (0-3-0, padding-top 96px / min-height 700px). Doubling up on the container's
   own two classes gives 0-4-0, which beats both at every breakpoint.
   · No top padding — the section heading's margin already separates the view.
   · No min-height — TEC reserves it as headroom for the date-picker dropdown,
     but that dropdown is position:absolute with no clipping ancestor, so it
     overlays fine and the reserved space just reads as a blank gap. */
.tribe-common.tribe-events .tribe-events-l-container.tribe-common-l-container,
.tribe-common .tribe-common-l-container {
	padding-top: 0;
	padding-bottom: var(--space-5);
	min-height: 0;
}

/* ── Type roles ──────────────────────────────────────────────────────────── */

/* Event titles: condensed display face, underline on hover (never a color pop). */
.tribe-events .tribe-events-calendar-list__event-title,
.tribe-events .tribe-events-calendar-day__event-title,
.tribe-events .tribe-events-calendar-month__calendar-event-title,
.tribe-events .tribe-events-calendar-month__multiday-event-bar-title,
.tribe-events .tribe-events-calendar-latest-past__event-title,
.tribe-events-single-event-title {
	font-family: var(--font-display);
	font-weight: 400;
	letter-spacing: var(--tracking-wide);
	line-height: 1.1;
}

.tribe-events .tribe-events-calendar-list__event-title-link,
.tribe-events .tribe-events-calendar-day__event-title-link,
.tribe-events .tribe-events-calendar-latest-past__event-title-link {
	color: var(--ink-900);
	text-decoration: none;
}

.tribe-events .tribe-events-calendar-list__event-title-link:hover,
.tribe-events .tribe-events-calendar-list__event-title-link:focus-visible,
.tribe-events .tribe-events-calendar-day__event-title-link:hover,
.tribe-events .tribe-events-calendar-latest-past__event-title-link:hover {
	color: var(--ink-900);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Date headers between list groups — uppercase eyebrow, hairline rule. */
.tribe-events .tribe-events-calendar-list__month-separator-text,
.tribe-events .tribe-events-calendar-latest-past__heading {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-widest);
	color: var(--text-muted);
}

.tribe-events .tribe-events-calendar-list__month-separator:after {
	background-color: var(--border-default);
}

/* Datetime / venue / cost metadata. */
.tribe-events .tribe-events-calendar-list__event-datetime,
.tribe-events .tribe-events-calendar-day__event-datetime,
.tribe-events .tribe-events-calendar-month__calendar-event-datetime,
.tribe-events .tribe-events-calendar-list__event-venue,
.tribe-events .tribe-events-calendar-day__event-venue {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	color: var(--text-muted);
}

.tribe-events .tribe-events-calendar-list__event-venue-title,
.tribe-events .tribe-events-calendar-day__event-venue-title {
	font-weight: 600;
	color: var(--ink-900);
}

/* Body copy in event descriptions stays editorial. */
.tribe-events .tribe-events-calendar-list__event-description p,
.tribe-events .tribe-events-calendar-day__event-description p,
.tribe-events-single .tribe-events-single-event-description p {
	font-family: var(--font-editorial);
	line-height: var(--leading-relaxed);
}

/* ── Date badge (the MAR / 16 / 2026 stack) ──────────────────────────────── */

.tribe-events .tribe-events-calendar-list__event-date-tag-weekday,
.tribe-events .tribe-events-calendar-latest-past__event-date-tag-weekday {
	font-family: var(--font-ui);
	font-size: var(--text-2xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
	color: var(--text-muted);
}

.tribe-events .tribe-events-calendar-list__event-date-tag-daynum,
.tribe-events .tribe-events-calendar-latest-past__event-date-tag-daynum {
	font-family: var(--font-display);
	font-weight: 400;
	color: var(--ink-900);
	letter-spacing: var(--tracking-wide);
}

/* ── Event bar: search + view selector ───────────────────────────────────── */

.tribe-events .tribe-events-c-events-bar,
.tribe-events .tribe-events-c-top-bar {
	font-family: var(--font-ui);
}

.tribe-events .tribe-events-c-events-bar__search-button,
.tribe-events .tribe-events-c-view-selector__button {
	border-radius: var(--radius-sm);
	box-shadow: none;
}

.tribe-events .tribe-events-c-view-selector__list-item-text {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
}

.tribe-events .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-text {
	color: var(--rust-700);
}

.tribe-events .tribe-events-c-events-bar--border,
.tribe-events .tribe-events-c-search__input-control-wrapper {
	border-color: var(--border-strong);
	border-radius: var(--radius-sm);
}

.tribe-events input[type="text"].tribe-events-c-search__input {
	font-family: var(--font-ui);
	border-radius: var(--radius-sm);
	box-shadow: none;
}

/* Top bar date nav ("Upcoming", prev/next). */
.tribe-events .tribe-events-c-top-bar__datepicker-button,
.tribe-events .tribe-events-c-top-bar__today-button {
	font-family: var(--font-ui);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
	font-size: var(--text-xs);
	border-radius: var(--radius-sm);
}

.tribe-events .tribe-events-c-top-bar__datepicker-desktop {
	font-family: var(--font-display);
	letter-spacing: var(--tracking-wide);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.tribe-events .tribe-common-c-btn,
.tribe-events button.tribe-common-c-btn,
.tribe-events a.tribe-common-c-btn {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	background-color: var(--ink-900);
	color: var(--paper-050);
	border-radius: var(--radius-sm);
	box-shadow: none;
	transition: background-color var(--duration-fast) var(--ease-standard);
}

.tribe-events .tribe-common-c-btn:hover,
.tribe-events .tribe-common-c-btn:focus-visible {
	background-color: var(--rust-700);
	color: var(--paper-050);
}

.tribe-events .tribe-common-c-btn-border,
.tribe-events .tribe-common-c-btn-border-small {
	font-family: var(--font-ui);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	border-radius: var(--radius-sm);
	border-color: var(--border-strong);
	color: var(--ink-900);
	box-shadow: none;
}

.tribe-events .tribe-common-c-btn-border:hover,
.tribe-events .tribe-common-c-btn-border-small:hover {
	border-color: var(--ink-900);
	background-color: var(--ink-900);
	color: var(--paper-050);
}

/* ── Month / calendar grid ───────────────────────────────────────────────── */

.tribe-events .tribe-events-calendar-month__header-column-title {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: var(--text-2xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-widest);
	color: var(--text-muted);
}

.tribe-events .tribe-events-calendar-month__day {
	border-color: var(--border-default);
}

.tribe-events .tribe-events-calendar-month__day-date,
.tribe-events .tribe-events-calendar-month__day-date-link {
	font-family: var(--font-display);
	font-weight: 400;
	letter-spacing: var(--tracking-wide);
	color: var(--ink-900);
}

.tribe-events .tribe-events-calendar-month__day-date-link:hover {
	color: var(--rust-700);
}

/* Today: a gold marker rather than TEC's blue. */
.tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date,
.tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date-link {
	color: var(--gold-700);
	font-weight: 400;
}

.tribe-events .tribe-events-calendar-month__day--current {
	background-color: rgba(214, 164, 56, .08);
}

.tribe-events .tribe-events-calendar-month__day--past .tribe-events-calendar-month__day-date {
	color: var(--text-muted);
}

/* Event chips inside day cells + multiday bars. */
.tribe-events .tribe-events-calendar-month__calendar-event {
	border-radius: var(--radius-sm);
}

.tribe-events .tribe-events-calendar-month__multiday-event-bar-inner {
	border-radius: var(--radius-sm);
	background-color: var(--paper-200);
}

.tribe-events .tribe-events-calendar-month__multiday-event--featured .tribe-events-calendar-month__multiday-event-bar-inner {
	background-color: var(--gold-300);
}

.tribe-events .tribe-events-calendar-month__calendar-event-tooltip,
.tribe-events .tribe-events-tooltip-theme {
	border-radius: var(--radius-sm);
	box-shadow: none;
	border: 1px solid var(--border-strong);
	background: var(--surface-card);
}

/* ── Date-picker dropdown ────────────────────────────────────────────────────
   This is an overlay floating above the calendar grid, so unlike the flat inline
   components it needs its own opaque surface. Uses paper-000 (one step lighter
   than the page) plus a strong hairline to separate it — still no shadow. */
.tribe-common .datepicker.datepicker-dropdown,
.tribe-events .datepicker.datepicker-dropdown,
.datepicker.datepicker-dropdown.dropdown-menu {
	background-color: var(--paper-000);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	box-shadow: none;
	z-index: 120;
	padding: var(--space-2);
}

/* Header row: month/year label and the prev/next arrows. */
.datepicker.datepicker-dropdown .datepicker-switch,
.datepicker.datepicker-dropdown th.datepicker-switch {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: var(--text-md);
	letter-spacing: var(--tracking-wide);
	color: var(--ink-900);
	background-color: transparent;
}

.datepicker.datepicker-dropdown .prev,
.datepicker.datepicker-dropdown .next,
.datepicker.datepicker-dropdown .dow {
	font-family: var(--font-ui);
	color: var(--ink-500);
	background-color: transparent;
}

.datepicker.datepicker-dropdown .dow {
	font-size: var(--text-2xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
}

/* Selectable cells. */
.datepicker.datepicker-dropdown .day,
.datepicker.datepicker-dropdown .month,
.datepicker.datepicker-dropdown .year,
.datepicker.datepicker-dropdown .decade,
.datepicker.datepicker-dropdown .century {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	color: var(--ink-900);
	background-color: transparent;
	border-radius: var(--radius-sm);
	transition: background-color var(--duration-fast) var(--ease-standard);
}

.datepicker.datepicker-dropdown .day.old,
.datepicker.datepicker-dropdown .day.new,
.datepicker.datepicker-dropdown .past,
.datepicker.datepicker-dropdown .disabled {
	color: var(--text-muted);
}

.datepicker.datepicker-dropdown .day:hover,
.datepicker.datepicker-dropdown .month:hover,
.datepicker.datepicker-dropdown .year:hover,
.datepicker.datepicker-dropdown .decade:hover,
.datepicker.datepicker-dropdown .century:hover,
.datepicker.datepicker-dropdown .prev:hover,
.datepicker.datepicker-dropdown .next:hover,
.datepicker.datepicker-dropdown .datepicker-switch:hover {
	background-color: var(--paper-100);
	color: var(--ink-900);
}

/* Selected / current — filled rust with readable reversed text. */
.datepicker.datepicker-dropdown .active,
.datepicker.datepicker-dropdown .active:hover,
.datepicker.datepicker-dropdown .focused,
.datepicker.datepicker-dropdown .day.active,
.datepicker.datepicker-dropdown .month.active,
.datepicker.datepicker-dropdown .year.active {
	background-color: var(--rust-700);
	color: var(--paper-050);
}

/* Today marker gets the gold accent, matching the month grid. */
.datepicker.datepicker-dropdown .today:not(.active) {
	background-color: var(--gold-300);
	color: var(--ink-900);
}

/* ── Poster thumbnails in the listings — sharp, flat, never cropped ─────────
   Show posters, not tiles: the artwork carries the event's identity and the set
   runs from 1:1 through 4:5 to 8.5x11, so they keep their own aspect ratio in a
   fixed-width column rather than being cropped square. */

/* The wrapper class is doubled to clear TEC's own
   `.tribe-common--breakpoint-medium.tribe-events .…-wrapper` (0-3-0), which sizes
   this column at 3/8 of their grid — around 400px, far too heavy for a list row.
   That breakpoint class is added by TEC's JS, so it isn't visible in a media
   query and only shows up once the page has run. */
.tribe-common.tribe-events .tribe-events-calendar-list__event-featured-image-wrapper.tribe-events-calendar-list__event-featured-image-wrapper,
.tribe-common.tribe-events .tribe-events-calendar-day__event-featured-image-wrapper.tribe-events-calendar-day__event-featured-image-wrapper,
.tribe-common.tribe-events .tribe-events-calendar-latest-past__event-featured-image-wrapper.tribe-events-calendar-latest-past__event-featured-image-wrapper {
	border-radius: 0;
	overflow: hidden;
	background: var(--surface-sunken);
	flex: 0 0 auto;
	width: 120px;
	align-self: flex-start;

	/* The column is a `tribe-common-g-col`, so TEC gives it 24px grid gutters at
	   0-4-0 — the same weight as the selector above, and its stylesheet loads
	   later. Rather than escalate, switch to content-box so the widths here mean
	   the poster's width and the gutters sit outside it. */
	box-sizing: content-box;
}

@media (min-width: 768px) {
	.tribe-common.tribe-events .tribe-events-calendar-list__event-featured-image-wrapper.tribe-events-calendar-list__event-featured-image-wrapper,
	.tribe-common.tribe-events .tribe-events-calendar-day__event-featured-image-wrapper.tribe-events-calendar-day__event-featured-image-wrapper,
	.tribe-common.tribe-events .tribe-events-calendar-latest-past__event-featured-image-wrapper.tribe-events-calendar-latest-past__event-featured-image-wrapper {
		width: 180px;
	}
}

/* No `aspect-ratio` here on purpose. WordPress emits width/height attributes on
   the poster, which give the element a UA default of `aspect-ratio: auto w / h` —
   declaring `aspect-ratio: auto` in CSS overrides that away, leaving the image
   with no intrinsic ratio and a box the browser sizes arbitrarily (it billowed
   to 1500px tall). Leaving the property alone keeps each poster's own shape. */
.tribe-events .tribe-events-calendar-list__event-featured-image,
.tribe-events .tribe-events-calendar-day__event-featured-image,
.tribe-events .tribe-events-calendar-latest-past__event-featured-image {
	width: 100%;
	height: auto;
	border-radius: 0;
	box-shadow: none;
	display: block;
	transition: transform var(--duration-slow) var(--ease-out);
}

.tribe-events .tribe-events-calendar-list__event-row:hover .tribe-events-calendar-list__event-featured-image,
.tribe-events .tribe-events-calendar-latest-past__event-row:hover .tribe-events-calendar-latest-past__event-featured-image {
	transform: scale(1.03);
}

/* ── Notices ("There are no upcoming events.") ───────────────────────────── */

.tribe-events .tribe-events-c-messages__message {
	font-family: var(--font-ui);
	border-radius: var(--radius-sm);
	background-color: var(--paper-100);
	color: var(--ink-900);
	border-left: 3px solid var(--gold-500);
	box-shadow: none;
}

/* ── Single event page ───────────────────────────────────────────────────── */

/* TEC's single-event wrapper adds its own vertical padding, and the block picks
   up the root blockGap as a top margin — both on top of our template's padding.
   The template is the single source of vertical rhythm here. */
.tec-block__single-event {
	margin-top: 0;
	margin-block-start: 0;
}

/* TEC styles this wrapper by id (#tribe-events-pg-template, 1-0-0), so a class
   selector can't reach its 40px/20px padding — match on the id. */
#tribe-events-pg-template,
.tribe-events-pg-template {
	padding-top: 0;
	padding-bottom: 0;
	max-width: none;
}

/* "« All Events" back link — tighten its generous default margins. */
.tribe-events-back,
.tribe-events-single .tribe-events-back {
	margin: 0 0 var(--space-5);
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
}

.tribe-events-back a {
	color: var(--ink-500);
	font-weight: 600;
}

.tribe-events-back a:hover {
	color: var(--rust-700);
}

/* Prev/next event nav: collapse entirely when there are no adjacent events
   (TEC still renders the wrapper and empty list items — ~89px of nothing).
   When it does have links, give it a hairline rule and tighter padding. */
#tribe-events-footer {
	padding-top: var(--space-5);
	padding-bottom: 0;
	margin-top: var(--space-5);
	border-top: 1px solid var(--border-default);
}

#tribe-events-footer:not(:has(a)) {
	display: none;
}

#tribe-events-footer .tribe-events-sub-nav {
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
}

.tribe-events-single .tribe-events-single-event-title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: var(--text-3xl);
	letter-spacing: var(--tracking-wide);
	line-height: 1.02;
}

.tribe-events-single .tribe-events-schedule {
	font-family: var(--font-ui);
	background: var(--surface-sunken);
	border-radius: var(--radius-sm);
	border-left: 3px solid var(--gold-500);
}

.tribe-events-single .tribe-events-event-meta {
	font-family: var(--font-ui);
	border-color: var(--border-default);
	background: transparent;
}

.tribe-events-single .tribe-events-event-meta .tribe-events-single-section-title {
	font-family: var(--font-display);
	font-weight: 400;
	letter-spacing: var(--tracking-wide);
}

/* ── Specificity escalation ──────────────────────────────────────────────────
   A handful of TEC rules are scoped tightly enough (or emitted late enough) to
   beat the selectors above. These use TEC's own compound wrapper
   (`.tribe-common.tribe-events`) to outrank them, with `!important` reserved
   for the button fills their inline-ish styles reassert. */

/* Primary action buttons ("Find Events") — ink, not TEC blue. */
.tribe-common.tribe-events .tribe-common-c-btn,
.tribe-common.tribe-events button.tribe-common-c-btn,
.tribe-common.tribe-events .tribe-events-c-search__button {
	background-color: var(--ink-900) !important;
	color: var(--paper-050) !important;
	border-radius: var(--radius-sm);
	box-shadow: none;
}

.tribe-common.tribe-events .tribe-common-c-btn:hover,
.tribe-common.tribe-events .tribe-common-c-btn:focus-visible,
.tribe-common.tribe-events .tribe-events-c-search__button:hover {
	background-color: var(--rust-700) !important;
	color: var(--paper-050) !important;
}

/* "Latest Past Events" reads as a content heading, not a tiny eyebrow. */
.tribe-common.tribe-events .tribe-events-calendar-latest-past__heading,
.tribe-common.tribe-events h2.tribe-events-calendar-latest-past__heading {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: var(--text-xl);
	text-transform: none;
	letter-spacing: var(--tracking-wide);
	color: var(--ink-900);
	line-height: 1.1;
}

/* Event titles — TEC's own type-scale classes (tribe-common-h6 /
   tribe-common-h4--min-medium) load after ours, so escalate here. */
.tribe-common.tribe-events .tribe-events-calendar-list__event-title,
.tribe-common.tribe-events .tribe-events-calendar-day__event-title,
.tribe-common.tribe-events .tribe-events-calendar-latest-past__event-title,
.tribe-common.tribe-events .tribe-events-calendar-month__calendar-event-title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: var(--text-lg);
	letter-spacing: var(--tracking-wide);
	line-height: 1.1;
}

.tribe-common.tribe-events .tribe-events-calendar-list__event-title-link,
.tribe-common.tribe-events .tribe-events-calendar-day__event-title-link,
.tribe-common.tribe-events .tribe-events-calendar-latest-past__event-title-link,
.tribe-common.tribe-events .tribe-events-calendar-month__calendar-event-title-link,
.tribe-common.tribe-events a.tribe-common-anchor-thin {
	color: var(--ink-900);
	text-decoration: none;
	box-shadow: none;
	border-bottom: 0;
}

.tribe-common.tribe-events .tribe-events-calendar-list__event-title-link:hover,
.tribe-common.tribe-events .tribe-events-calendar-latest-past__event-title-link:hover,
.tribe-common.tribe-events .tribe-events-calendar-month__calendar-event-title-link:hover,
.tribe-common.tribe-events a.tribe-common-anchor-thin:hover {
	color: var(--ink-900);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Month grid: day numerals in the display face. */
.tribe-common.tribe-events .tribe-events-calendar-month__day-date,
.tribe-common.tribe-events .tribe-events-calendar-month__day-date-link,
.tribe-common.tribe-events .tribe-events-calendar-month__day-date-daynum {
	font-family: var(--font-display);
	font-weight: 400;
	letter-spacing: var(--tracking-wide);
}

/* Month header row sits on the same hairline system. */
.tribe-common.tribe-events .tribe-events-calendar-month__header-row {
	border-bottom: 1px solid var(--border-strong);
}

/* Multi-day event bars (e.g. the SXSW run) — squared, flat, display type.
   Their fill comes from the --tec-color-*-multiday variables remapped above. */
.tribe-common.tribe-events .tribe-events-calendar-month__multiday-event-bar-inner {
	border-radius: var(--radius-sm);
	box-shadow: none;
}

.tribe-common.tribe-events .tribe-events-calendar-month__multiday-event-bar-title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: var(--text-sm);
	letter-spacing: var(--tracking-wide);
	color: var(--ink-900);
}

/* Single-day event chips inside a day cell. */
.tribe-common.tribe-events .tribe-events-calendar-month__calendar-event-title {
	font-family: var(--font-display);
	font-weight: 400;
	letter-spacing: var(--tracking-wide);
}

.tribe-common.tribe-events .tribe-events-calendar-month__calendar-event-datetime {
	font-family: var(--font-ui);
	font-size: var(--text-2xs);
	color: var(--text-muted);
}

/* Event promo gallery mirrors the review gallery. */
.mwim-event-gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2px;
	margin: var(--space-6) 0;
}

@media (min-width: 600px) {
	.mwim-event-gallery {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* No aspect-ratio here on purpose. These are lineup posters — the design shows
   them whole — and the images carry width/height attributes, from which the UA
   derives the right ratio on its own. Setting `aspect-ratio: auto` to undo a
   square crop is NOT equivalent: it replaces that UA-derived ratio rather than
   restoring it, and the tiles billow to ~1500px tall.
   `height: auto` is load-bearing: without it the height attribute maps to a
   definite height and the tiles render at full size. */
.mwim-event-gallery img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 0;
}

/* ── Single event: the show poster ────────────────────────────────────────────
   The Events Calendar renders the featured image at the top of the single event
   view. Posters are the artwork, so this frame never crops — it caps the width
   so a tall 8.5x11 flyer doesn't push the details below the fold. */

.tribe-events-single .tribe-events-event-image {
	margin: 0 0 var(--space-6);
	text-align: left;
}

.tribe-events-single .tribe-events-event-image img {
	display: block;
	width: auto;
	max-width: min(100%, 520px);
	height: auto;
	border-radius: 0;
	box-shadow: none;
	background: var(--surface-sunken);
}

/* Single event: RSVP / Tickets buttons, from meanwhile-core. Solid ink for the
   primary action, outline for the second, matching the site's button register.
   These sit between the poster and the description, and are absent entirely when
   the event carries no links. */

.mwim-event-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin: 0 0 var(--space-6);
}

.mwim-event-action {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	text-decoration: none;
	border-radius: var(--radius-sm);
	border: 2px solid var(--ink-900);
	padding: 12px 26px;
	box-shadow: none;
	transition:
		background var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard);
}

.mwim-event-action.is-primary {
	background: var(--ink-900);
	color: var(--paper-050);
}

.mwim-event-action.is-secondary {
	background: transparent;
	color: var(--ink-900);
}

.mwim-event-action.is-primary:hover,
.mwim-event-action.is-secondary:hover {
	background: var(--rust-700);
	border-color: var(--rust-700);
	color: var(--paper-050);
}

/* Promo photos use the `.mwim-event-gallery` grid defined in section 11 above. */

/* ═══════════════════════════════════════════════════════════════════════════
   12. Homepage Events section — [mwim_events] from meanwhile-core
   ═══════════════════════════════════════════════════════════════════════════

   Poster-forward cards on the same grid rhythm as the Reviews and Merch rows.
   Equal-height rows, and the body pinned beneath a poster that keeps its own
   aspect ratio, so a mixed set of 1:1 and 4:5 flyers still lines up. */

.mwim-events {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-7) var(--space-6);
	align-items: stretch;
}

@media (max-width: 1023px) {
	.mwim-events {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.mwim-events {
		grid-template-columns: 1fr;
	}
}

.mwim-event-card {
	display: flex;
	flex-direction: column;
	margin: 0;
}

/* Posters sit in a fixed-height window, uncropped and bottom-aligned, so the
   type beneath every card starts on the same line whatever the flyer's shape. */
.mwim-event-card__poster {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 340px;
	margin-bottom: var(--space-4);
	overflow: hidden;
	background: var(--surface-sunken);
	border-bottom: 2px solid var(--ink-900);
}

.mwim-event-card__poster-img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 100%;
	height: auto;
	border-radius: 0;
	box-shadow: none;
	transition: transform var(--duration-slow) var(--ease-out);
}

.mwim-event-card:hover .mwim-event-card__poster-img {
	transform: scale(1.03);
}

.mwim-event-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.mwim-event-card__date {
	font-family: var(--font-ui);
	font-size: var(--text-2xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
	color: var(--text-muted);
	margin: 0;
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex-wrap: wrap;
}

/* Every show on the site is history for now, so cards say so plainly rather
   than letting an "Events" heading imply something upcoming. */
.mwim-event-card__tag {
	font-weight: 600;
	color: var(--ink-900);
	background: var(--gold-300);
	padding: 2px 8px;
	border-radius: var(--radius-pill);
	letter-spacing: var(--tracking-wide);
}

.mwim-event-card__title {
	font-family: var(--font-display);
	font-size: var(--text-md);
	font-weight: 400;
	letter-spacing: var(--tracking-wide);
	line-height: 1.1;
	margin: 0;
}

.mwim-event-card__title a {
	color: var(--text-body);
	text-decoration: none;
}

.mwim-event-card__title a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mwim-event-card__venue {
	font-family: var(--font-editorial);
	font-size: var(--text-sm);
	color: var(--text-muted);
	margin: 0;
}

.mwim-events-empty {
	font-family: var(--font-editorial);
	color: var(--text-muted);
	margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   13. Homepage Instagram feed — [mwim_instagram] from meanwhile-core
   ═══════════════════════════════════════════════════════════════════════════

   Smash Balloon's own chrome (header, Load More, Follow button) is switched off
   in the shortcode; the section supplies its heading and follow button as blocks.
   What's left is the grid, retoned to the site's flat, square, sharp register.
   Selectors are scoped under `#sb_instagram` because the plugin styles itself by
   that id, and prefixed with `.mwim-instagram` where an id-level override is
   needed. */

.mwim-instagram #sb_instagram {
	padding: 0 !important;
	background: transparent;
	width: 100%;
}

/* Square, sharp tiles with hairline-thin gutters, matching the review gallery. */
.mwim-instagram #sb_instagram .sbi_photo_wrap,
.mwim-instagram #sb_instagram .sbi_photo {
	border-radius: 0;
	box-shadow: none;
	background-color: var(--surface-sunken);
}

.mwim-instagram #sb_instagram .sbi_photo img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	border-radius: 0;
	box-shadow: none;
	transition: transform var(--duration-slow) var(--ease-out);
}

/* The tile clips the 3% hover zoom. Pro renders the anchor as `.sbi_photo`
   directly (the free plugin wrapped it in `.sbi_photo_wrap`), so both are
   clipped — otherwise the scaled image spills over its neighbours. */
.mwim-instagram #sb_instagram .sbi_photo_wrap,
.mwim-instagram #sb_instagram .sbi_photo,
.mwim-instagram #sb_instagram .sbi_link_area {
	overflow: hidden;
}

.mwim-instagram #sb_instagram .sbi_item:hover .sbi_photo img,
.mwim-instagram #sb_instagram .sbi_item:hover img {
	transform: scale(1.03);
}

/* Pro's "regular" post style still prints the caption/likes block and the
   header, load-more and follow markup even with those switched off in the feed
   settings — the section supplies its own heading and Follow button, so keep
   them out regardless of what the plugin emits. */
.mwim-instagram #sb_instagram .sbi_info,
.mwim-instagram #sb_instagram .sb_instagram_header,
.mwim-instagram #sb_instagram #sbi_load {
	display: none;
}

/* Smash Balloon steps down at 640px and again at 480px, which leaves tablets
   showing six tiles barely 120px wide. Add a step in between, matching the
   ladder the review grid uses. The plugin sizes the grid at `#sb_instagram
   .sbi_col_6 #sbi_images` (2-1-0), so the wrapper class is needed to outrank it. */
@media (min-width: 641px) and (max-width: 1023px) {
	.mwim-instagram #sb_instagram.sbi_col_6 #sbi_images,
	.mwim-instagram #sb_instagram.sbi_col_5 #sbi_images {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Any plugin caption/meta that slips through takes the site's UI type. */
.mwim-instagram #sb_instagram .sbi_caption,
.mwim-instagram #sb_instagram .sbi_meta {
	font-family: var(--font-ui);
	font-size: var(--text-2xs);
	color: var(--text-muted);
}

/* Fallback "Load More" / "Follow" styling, in case the chrome is ever enabled. */
.mwim-instagram #sb_instagram #sbi_load .sbi_load_btn,
.mwim-instagram #sb_instagram .sbi_follow_btn a {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	border-radius: var(--radius-sm);
	background: var(--ink-900);
	color: var(--paper-050);
	box-shadow: none;
	padding: 12px 26px;
}

.mwim-instagram #sb_instagram #sbi_load .sbi_load_btn:hover,
.mwim-instagram #sb_instagram .sbi_follow_btn a:hover {
	background: var(--rust-700);
	color: var(--paper-050);
}

/* ═══════════════════════════════════════════════════════════════════════════
   14. Review list rows — the design system's ReviewListItem
   ═══════════════════════════════════════════════════════════════════════════

   The Reviews listing is an editorial list, not a grid of tiles: genre eyebrow
   and date, album title, artist, a snippet and a "Continue reading" link, with a
   square cover at the right. Each row carries a single top hairline and the
   container closes the list with a matching bottom border — the same pattern the
   events list uses. Rendered by [mwim_reviews] in meanwhile-core. */

.mwim-review-list {
	border-bottom: 1px solid var(--border-strong);
}

.mwim-review-row {
	display: flex;
	gap: var(--space-6);
	align-items: flex-start;
	text-decoration: none;
	color: var(--text-body);
	background: transparent;
	border-top: 1px solid var(--border-strong);
	padding: var(--space-5) var(--space-2);
	transition: background var(--duration-fast) var(--ease-standard);

	/* Anchor for the stretched album link below. */
	position: relative;
}

.mwim-review-row:hover {
	background: var(--surface-sunken);
	color: var(--text-body);
}

.mwim-review-row__body {
	flex: 1;
	min-width: 0;
}

/* Genre + date share a baseline-aligned line above the title. */
.mwim-review-row__meta {
	display: flex;
	align-items: baseline;
	gap: var(--space-4);
	flex-wrap: wrap;
}

.mwim-review-row__genre {
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: var(--text-2xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-widest);
	color: var(--rust-700);
}

.mwim-review-row__date {
	font-family: var(--font-ui);
	font-size: var(--text-2xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
	color: var(--text-muted);
}

.mwim-review-row__album {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: var(--text-xl);
	letter-spacing: var(--tracking-wide);
	line-height: 1.05;
	margin: 10px 0 0;
}

.mwim-review-row__album a {
	color: var(--text-body);
	text-decoration: none;
}

/* The album link is stretched across the whole row, so anywhere in the row is
   clickable — the design system's behaviour — while the link's accessible name
   stays just the album. */
.mwim-review-row__album a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.mwim-review-row:hover .mwim-review-row__album a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mwim-review-row__artist {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: var(--text-sm);
	color: var(--ink-700);
	margin: 4px 0 0;
}

.mwim-review-row__snippet {
	font-family: var(--font-editorial);
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
	color: var(--ink-900);
	margin: 12px 0 0;
	max-width: none;
	text-wrap: pretty;
}

/* The underline is drawn transparent so the row doesn't shift on hover. */
.mwim-review-row__cta {
	display: inline-block;
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: var(--text-2xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-widest);
	color: var(--rust-700);
	margin-top: var(--space-4);
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
}

.mwim-review-row:hover .mwim-review-row__cta {
	border-bottom-color: var(--rust-700);
}

.mwim-review-row__cover {
	width: 220px;
	flex-shrink: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border: 1px solid var(--border-strong);
	background: var(--surface-card);
	display: flex;
	align-items: center;
	justify-content: center;
}

.mwim-review-row__cover-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
	box-shadow: none;
	transition: transform var(--duration-slow) var(--ease-out);
}

.mwim-review-row:hover .mwim-review-row__cover-img {
	transform: scale(1.03);
}

.mwim-review-row__cover-empty {
	font-family: var(--font-ui);
	font-size: var(--text-2xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	color: var(--text-muted);
	text-align: center;
	padding: var(--space-2);
}

/* The design system specifies desktop only. On a phone the row stays
   horizontal — a smaller cover beside the type reads better than stacking, and
   keeps the list scannable. */
@media (max-width: 599px) {
	.mwim-review-row {
		gap: var(--space-4);
	}

	.mwim-review-row__cover {
		width: 120px;
	}

	.mwim-review-row__album {
		font-size: var(--text-lg);
	}
}

.mwim-reviews-empty {
	font-family: var(--font-editorial);
	color: var(--text-muted);
	margin: 0;
}

/* Genre archive pagination under the review list. */
.mwim-review-pagination {
	margin-top: var(--space-7);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: center;
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
}

.mwim-review-pagination .page-numbers {
	color: var(--text-muted);
	text-decoration: none;
	padding: 6px 10px;
	border: 1px solid transparent;
}

.mwim-review-pagination a.page-numbers:hover {
	color: var(--ink-900);
	border-color: var(--border-strong);
}

.mwim-review-pagination .page-numbers.current {
	color: var(--ink-900);
	border-color: var(--ink-900);
	font-weight: 600;
}

/* Linked Instagram handles inherit the body link colour but stay unobtrusive. */
a.mwim-ig-handle {
	color: var(--rust-700);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

a.mwim-ig-handle:hover {
	border-bottom-color: var(--rust-700);
}

/* Hide the "Written by … in …" byline on posts.
   It comes from Twenty Twenty-Five's `hidden-written-by` pattern inside the
   parent single template, so there is no markup of ours to remove — the group is
   matched by the author block it wraps. Most reviews carry no genre, so the line
   was reading "Written by Meanwhile in Music in Uncategorized". Deleting the rule
   brings it back. */
.wp-block-group:has(> .wp-block-post-author-name) {
	display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   15. Review page hero + promo photo lightbox
   ═══════════════════════════════════════════════════════════════════════════

   The design system's ReviewPage: album title and artist on the left with the
   date beneath, cover art on the right. The genre tag and "By …" byline the
   design shows are deliberately left out. */

.mwim-review-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: var(--space-7);
	align-items: start;
	padding-bottom: var(--space-6);
	border-bottom: 2px solid var(--ink-900);
	margin-bottom: var(--space-7);
}

@media (max-width: 781px) {
	.mwim-review-hero {
		grid-template-columns: 1fr;
		gap: var(--space-5);
	}

	/* Cover first on a phone — it is the thing you recognise. */
	.mwim-review-hero__cover { order: -1; }
}

/* The display size is tuned for a wide column; at phone widths a long artist
   name at 60px eats the screen. */
@media (max-width: 599px) {
	.mwim-review-hero__artist { font-size: var(--text-2xl); }
	.mwim-review-hero__album  { font-size: var(--text-lg); }
}

.mwim-review-hero__heading {
	margin: 0;
}

/* Artist is the headline; the album sits under it in italic serif. Both are
   inside the h1, so the announced heading is still artist + album. */
.mwim-review-hero__artist {
	display: block;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: var(--text-3xl);
	letter-spacing: var(--tracking-wide);
	line-height: 1.02;
	color: var(--text-body);
}

.mwim-review-hero__album {
	display: block;
	font-family: var(--font-editorial);
	font-style: italic;
	font-weight: 400;
	font-size: var(--text-xl);
	color: var(--ink-700);
	margin-top: var(--space-3);
	line-height: 1.15;
	letter-spacing: 0;
}

.mwim-review-hero__date {
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
	color: var(--text-muted);
	margin: var(--space-4) 0 0;
}

.mwim-review-hero__actions {
	margin: var(--space-5) 0 0;
}

.mwim-review-hero__ig {
	display: inline-block;
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: var(--text-2xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
	text-decoration: none;
	color: var(--ink-900);
	background: transparent;
	border: 2px solid var(--ink-900);
	border-radius: var(--radius-sm);
	padding: 10px 20px;
	transition:
		background var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard);
}

.mwim-review-hero__ig:hover {
	background: var(--rust-700);
	border-color: var(--rust-700);
	color: var(--paper-050);
}

.mwim-review-hero__cover {
	background: var(--surface-sunken);
	overflow: hidden;
}

.mwim-review-hero__cover-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 0;
	box-shadow: none;
}

/* The single template renders the hero, so the parent theme's own title and
   featured image would only repeat it. */
.single .mwim-review-hero + .entry-content > .wp-block-post-title,
.single .mwim-review-hero ~ .wp-block-post-featured-image {
	display: none;
}

/* ── Promo photo lightbox ─────────────────────────────────────────────────── */

/* The thumbnails become buttons so they are keyboard reachable; the button must
   not add any chrome of its own. */
.mwim-gallery-trigger {
	display: block;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	width: 100%;
	line-height: 0;
	border-radius: 0;
}

.mwim-gallery-trigger:focus-visible {
	outline: 2px solid var(--rust-700);
	outline-offset: 2px;
}

body.mwim-lightbox-open {
	overflow: hidden;
}

.mwim-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	padding: var(--space-6);
	background: rgba(28, 23, 18, .92);
}

.mwim-lightbox[hidden] {
	display: none;
}

.mwim-lightbox__figure {
	margin: 0;
	max-width: min(92vw, 1100px);
	max-height: 88vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
}

.mwim-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: 82vh;
	width: auto;
	height: auto;
	border-radius: 0;
	box-shadow: none;
	background: var(--ink-900);
}

.mwim-lightbox__caption {
	font-family: var(--font-ui);
	font-size: var(--text-2xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
	color: var(--paper-100);
}

.mwim-lightbox__close,
.mwim-lightbox__nav {
	background: transparent;
	border: 0;
	color: var(--paper-050);
	font-family: var(--font-ui);
	cursor: pointer;
	line-height: 1;
	padding: var(--space-3);
	border-radius: var(--radius-sm);
}

.mwim-lightbox__close {
	position: absolute;
	top: var(--space-4);
	right: var(--space-5);
	font-size: 32px;
}

.mwim-lightbox__nav {
	font-size: 44px;
	flex: 0 0 auto;
}

.mwim-lightbox__close:hover,
.mwim-lightbox__nav:hover {
	color: var(--gold-500);
}

.mwim-lightbox__close:focus-visible,
.mwim-lightbox__nav:focus-visible {
	outline: 2px solid var(--gold-500);
	outline-offset: 2px;
}

.mwim-lightbox__nav[hidden] {
	display: none;
}

@media (max-width: 599px) {
	.mwim-lightbox { padding: var(--space-4); gap: 0; }
	.mwim-lightbox__nav { font-size: 32px; padding: var(--space-2); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   16. Boxed cards, event rows, Load More, and the event page
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Merch cards: the design system's boxed MerchCard ──────────────────────
   Hairline frame, sharp-ish corners, square photo above a padded name/price
   row, lifting slightly on hover. Applies everywhere WooCommerce renders the
   product grid: homepage row, shop archive and Related Products. */

.wc-block-product-template .wc-block-product {
	background: var(--surface-card);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	transition:
		box-shadow var(--duration-fast) var(--ease-standard),
		transform var(--duration-fast) var(--ease-standard);
}

.wc-block-product-template .wc-block-product:hover {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-2px);
}

/* Photo sits flush to the frame with a hairline under it. */
.wc-block-product-template .wc-block-components-product-image,
.wc-block-product-template .wp-block-woocommerce-product-image {
	margin: 0 0 var(--space-4);
	border-bottom: 1px solid var(--border-default);
	background: var(--paper-000);
}

/* Everything below the photo gets the card's padding. */
.wc-block-product-template .wc-block-product > *:not(.wc-block-components-product-image):not(.wp-block-woocommerce-product-image) {
	padding-left: var(--space-4);
	padding-right: var(--space-4);
}

.wc-block-product-template .wc-block-product > *:last-child {
	padding-bottom: var(--space-4);
}

/* Price takes the design system's rust, and sits tight under the name. */
.wc-block-product-template .wp-block-woocommerce-product-price,
.wc-block-product-template .wc-block-components-product-price {
	color: var(--rust-700);
	font-weight: 700;
}

/* ── Event rows: the design system's EventCard ─────────────────────────────
   Boxed calendar chip at the left, title and venue in the middle, poster
   thumbnail at the right, on a hairline-ruled row. */

.mwim-events {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--border-strong);
}

.mwim-event-card {
	display: block;
	margin: 0;
}

.mwim-event-card__link {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	padding: var(--space-4) var(--space-2);
	border-top: 1px solid var(--border-strong);
	text-decoration: none;
	color: var(--text-body);
	background: transparent;
	transition: background var(--duration-fast) var(--ease-standard);
}

.mwim-event-card__link:hover {
	background: var(--surface-sunken);
	color: var(--text-body);
}

/* The boxed date chip. */
.mwim-event-card__date-chip {
	display: block;
	width: 78px;
	flex-shrink: 0;
	text-align: center;
	overflow: hidden;
	background: var(--surface-card);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
}

.mwim-event-card__month {
	display: block;
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: var(--text-2xs);
	letter-spacing: var(--tracking-wider);
	text-transform: uppercase;
	color: var(--rust-700);
	padding: 5px 0 3px;
}

.mwim-event-card__day {
	display: block;
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	line-height: .9;
	color: var(--ink-900);
	padding: 0 0 6px;
}

.mwim-event-card__weekday {
	display: block;
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: var(--text-2xs);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--text-muted);
	background: var(--surface-sunken);
	border-top: 1px solid var(--border-default);
	padding: 4px 0;
}

.mwim-event-card__body {
	display: block;
	flex: 1;
	min-width: 0;
}

.mwim-event-card__tag {
	display: inline-block;
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: var(--text-2xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	color: var(--ink-900);
	background: var(--gold-300);
	border-radius: var(--radius-pill);
	padding: 2px 8px;
	margin-bottom: 4px;
}

.mwim-event-card__title {
	display: block;
	font-family: var(--font-display);
	font-size: var(--text-lg);
	letter-spacing: var(--tracking-wide);
	line-height: 1.1;
	margin: 6px 0 2px;
}

.mwim-event-card__link:hover .mwim-event-card__title {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mwim-event-card__when,
.mwim-event-card__venue {
	display: block;
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	color: var(--text-muted);
}

.mwim-event-card__poster {
	display: block;
	width: 76px;
	height: 76px;
	flex-shrink: 0;
	overflow: hidden;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	background: var(--surface-sunken);
}

.mwim-event-card__poster-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
	box-shadow: none;
}

@media (max-width: 599px) {
	.mwim-event-card__link { gap: var(--space-4); }
	.mwim-event-card__poster { display: none; }
}

/* ── The Events Calendar list: same boxed date chip ────────────────────────
   TEC prints its own date tag; box it rather than rebuild the view. */

.tribe-events .tribe-events-calendar-list__event-date-tag,
.tribe-events .tribe-events-calendar-latest-past__event-date-tag {
	background: var(--surface-card);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	overflow: hidden;
	align-self: flex-start;
	padding: 6px 4px 8px;
	min-width: 78px;
	text-align: center;
}

.tribe-events .tribe-events-calendar-list__event-date-tag-weekday,
.tribe-events .tribe-events-calendar-latest-past__event-date-tag-weekday {
	color: var(--rust-700);
	font-weight: 700;
}

.tribe-events .tribe-events-calendar-list__event-date-tag-daynum,
.tribe-events .tribe-events-calendar-latest-past__event-date-tag-daynum {
	color: var(--ink-900);
}

/* ── Load More Reviews ─────────────────────────────────────────────────────── */

.mwim-review-more {
	margin-top: var(--space-7);
	display: flex;
	justify-content: center;
}

.mwim-review-more__button {
	display: inline-block;
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wide);
	text-decoration: none;
	color: var(--ink-900);
	background: transparent;
	border: 2px solid var(--ink-900);
	border-radius: var(--radius-sm);
	padding: 14px 34px;
	cursor: pointer;
	transition:
		background var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard);
}

.mwim-review-more__button:hover {
	background: var(--ink-900);
	color: var(--paper-050);
}

.mwim-review-more__button[aria-busy="true"] {
	opacity: .6;
	cursor: progress;
}

/* The single event page is laid out in section 18. */

/* ═══════════════════════════════════════════════════════════════════════════
   17. Mobile refinements
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 599px) {
	/* Review rows stack: cover above, then the type across the full width.
	   Side by side, the cover squeezed the text into a very narrow column. */
	.mwim-review-row {
		flex-direction: column;
		align-items: stretch;
	}

	.mwim-review-row__cover {
		order: -1;
		width: 160px;
		margin-bottom: var(--space-4);
	}

	.mwim-review-row__snippet {
		max-width: none;
	}

	/* One product per row — two made each card too cramped to read. This is the
	   layout the Related Products list already used. */
	.wc-block-product-template.wc-block-product-template__responsive,
	.wc-block-product-template.is-flex-container {
		grid-template-columns: 1fr;
	}

	.wc-block-product-template.is-flex-container > li {
		width: 100%;
	}
}

/* The shop archive title comes from WooCommerce rather than our section
   heading, so it arrives in the display face. Give it the script treatment the
   other page headings use.

   Scoped to the archive title only. Matching `.wp-block-post-title` on this page
   also caught every product card name — the cards render their name with that
   same block — which put Yellowtail on the merch titles. Script is for section
   headings alone. */
.woocommerce-products-header__title,
body.post-type-archive-product .wp-block-query-title,
body.woocommerce-shop .wp-block-query-title {
	font-family: var(--font-script);
	font-weight: 400;
	font-size: var(--text-3xl);
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	color: var(--accent-primary);
	margin: 0 0 var(--space-2);
}

/* Product card names: the design system's MerchCard uses the UI face at a
   readable size, not the condensed display face and never the script. */
.wc-block-product-template .wp-block-post-title,
.wc-block-product-template .wc-block-components-product-name {
	font-family: var(--font-ui) !important;
	font-weight: 600;
	font-size: var(--text-sm) !important;
	letter-spacing: 0;
	line-height: 1.35;
	text-transform: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   18. Events page (List / Calendar) and the single event page
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The design system's Badge ─────────────────────────────────────────────
   One squared gold chip, shared by the "Past" tag on listing rows and the
   "This event has passed" notice on a single event page — they say the same
   thing in two places and should look the same. */

.mwim-badge {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: var(--text-2xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
	padding: 5px 10px;
	border-radius: var(--radius-sm);
	background: var(--gold-300);
	color: var(--ink-900);
	border: none;
}

/* The card tag was a pill; the badge above supersedes it. Everything that made
   it a pill is reset here so the shared rule wins on both elements. */
.mwim-event-card__tag.mwim-badge {
	border-radius: var(--radius-sm);
	padding: 5px 10px;
	font-weight: 600;
	letter-spacing: var(--tracking-wider);
	margin-bottom: 0;
}

/* ── Events page toolbar + the segmented List/Calendar toggle ──────────────── */

.mwim-events-toolbar {
	display: flex;
	justify-content: flex-end;
	margin: 0 0 var(--space-5);
}

.mwim-segmented {
	display: inline-flex;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.mwim-segmented__option {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: var(--text-2xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
	padding: 9px 18px;
	cursor: pointer;
	border: none;
	background: transparent;
	color: var(--ink-900);
	transition: background var(--duration-fast) var(--ease-standard);
}

.mwim-segmented__option + .mwim-segmented__option {
	border-left: 1px solid var(--border-strong);
}

.mwim-segmented__option:hover {
	background: var(--surface-sunken);
}

.mwim-segmented__option.is-active {
	background: var(--ink-900);
	color: var(--paper-050);
}

/* ── Upcoming / Past sub-headings ─────────────────────────────────────────── */

.mwim-events-subhead {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: 400;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--ink-900);
	margin: 0 0 var(--space-4);
	padding-bottom: 10px;
	border-bottom: 2px solid var(--ink-900);
}

/* The second heading needs air above it; the list it follows already carries a
   hairline bottom rule. */
.mwim-events-panel .mwim-events + .mwim-events-subhead,
.mwim-events-panel .mwim-events-empty + .mwim-events-subhead {
	margin-top: var(--space-8);
}

.mwim-events-empty {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	color: var(--text-muted);
	margin: 0;
	padding: var(--space-5) var(--space-2);
	border-top: 1px solid var(--border-default);
	border-bottom: 1px solid var(--border-default);
}

/* ── The month calendar ───────────────────────────────────────────────────── */

.mwim-calendar__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-4);
}

.mwim-calendar__month {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--ink-900);
}

.mwim-calendar__nav {
	display: flex;
	gap: var(--space-2);
}

.mwim-calendar__nav-button {
	width: 32px;
	height: 32px;
	line-height: 1;
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--ink-900);
	background: transparent;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background var(--duration-fast) var(--ease-standard);
}

.mwim-calendar__nav-button:hover {
	background: var(--surface-sunken);
}

/* A hairline grid: the container draws top and left, each cell draws right and
   bottom, so interior rules never double up. */
.mwim-calendar__grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	border-top: 1px solid var(--border-strong);
	border-left: 1px solid var(--border-strong);
}

.mwim-calendar__dow {
	font-family: var(--font-ui);
	font-size: var(--text-2xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
	color: var(--text-muted);
	padding: 8px 10px;
	background: var(--surface-sunken);
	border-right: 1px solid var(--border-strong);
	border-bottom: 1px solid var(--border-strong);
}

.mwim-calendar__cell {
	min-height: 104px;
	padding: 6px 8px;
	background: var(--surface-card);
	border-right: 1px solid var(--border-strong);
	border-bottom: 1px solid var(--border-strong);
}

.mwim-calendar__cell.is-empty {
	background: var(--surface-sunken);
}

.mwim-calendar__daynum {
	font-family: var(--font-ui);
	font-size: var(--text-2xs);
	color: var(--text-muted);
	margin-bottom: 4px;
}

.mwim-calendar__event {
	display: block;
	margin-bottom: 4px;
	padding: 4px 6px;
	font-family: var(--font-ui);
	font-size: var(--text-2xs);
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
	background: var(--rust-500);
	color: var(--paper-050);
	/* Long bill names have to stay inside a seventh of the row. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mwim-calendar__event:hover {
	background: var(--rust-700);
	color: var(--paper-050);
}

.mwim-calendar__event.is-past {
	background: var(--denim-500);
}

.mwim-calendar__legend {
	display: flex;
	gap: var(--space-5);
	margin-top: var(--space-4);
	font-family: var(--font-ui);
	font-size: var(--text-2xs);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wider);
	color: var(--text-muted);
}

.mwim-calendar__legend-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.mwim-calendar__swatch {
	width: 10px;
	height: 10px;
	background: var(--rust-500);
}

.mwim-calendar__swatch.is-past {
	background: var(--denim-500);
}

@media (max-width: 599px) {
	/* Seven columns of readable text don't fit a phone. Keep the grid, drop the
	   entry titles to a colour block that still answers "is anything on?" */
	.mwim-calendar__cell { min-height: 62px; padding: 4px; }
	.mwim-calendar__dow { padding: 6px 4px; text-align: center; }
	.mwim-calendar__event {
		font-size: 0;
		padding: 0;
		height: 8px;
		margin-bottom: 3px;
	}
}

/* ── Single event page: the design system's EventPage ──────────────────────
   The Events Calendar nests the poster, description and meta inside
   `.tribe_events`, one level below the title and schedule. `display: contents`
   dissolves that wrapper so every part becomes a grid item of one shared
   two-column grid — the layout the design calls for, without forking a single
   TEC template. */

.tribe-events-single .tribe-events-back a,
.tribe-events-single .tribe-events-back a:visited {
	font-family: var(--font-ui);
	font-size: var(--text-2xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--tracking-widest);
	color: var(--rust-700);
	text-decoration: none;
}

.tribe-events-single .tribe-events-back a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mwim-event-notices {
	border: none;
	background: none;
	padding: 0;
	margin: 0 0 var(--space-3);
}

/* Hero title, schedule line and description, at the design's weights. */
.tribe-events-single .tribe-events-single-event-title {
	margin: 0;
	line-height: 1.02;
}

.tribe-events-single .tribe-events-schedule {
	font-family: var(--font-ui);
	font-size: var(--text-md);
	color: var(--text-muted);
	margin: 10px 0 0;
	background: none;
	padding: 0;
	border: none;
}

.tribe-events-single .tribe-events-schedule .tribe-events-cost {
	background: none;
	border: none;
	padding: 0;
	color: var(--rust-700);
	font-weight: 600;
}

.tribe-events-single .tribe-events-single-event-description {
	margin: var(--space-6) 0 0;
}

/* Section headings on the meta blocks — "Details", "Venue" — and on our own
   photo gallery, all as the design's rule-underlined block heads. */
.tribe-events-single .tribe-events-single-section-title,
.mwim-event-block-head {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: 400;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--ink-900);
	margin: 0 0 var(--space-4);
	padding-bottom: 10px;
	border-bottom: 1px solid var(--border-strong);
}

/* TEC sizes the meta groups for its own three-across layout (a fixed ~168px
   with a right gutter). In our two-column block they should simply fill. */
.tribe-events-single .tribe-events-meta-group {
	width: 100%;
	max-width: none;
	float: none;
	margin: 0;
	padding: 0;
}

/* The subscribe dropdown ships a hard-coded blue. */
.tribe-events-single .tribe-events-c-subscribe-dropdown__button-text,
.tribe-events-single .tribe-events-c-subscribe-dropdown__list-item-link {
	color: var(--ink-900);
}

/* Label/value pairs, stacked rather than TEC's inline run-on. */
.tribe-events-single .tribe-events-meta-list,
.tribe-events-single .tribe-events-event-meta ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-5);
}

.tribe-events-single .tribe-events-meta-item {
	margin: 0;
}

.tribe-events-single .tribe-events-meta-label {
	display: block;
	font-family: var(--font-ui);
	font-size: var(--text-2xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--tracking-widest);
	color: var(--text-muted);
	margin-bottom: 6px;
}

.tribe-events-single .tribe-events-meta-value,
.tribe-events-single .tribe-events-address,
.tribe-events-single .tribe-venue {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	font-style: normal;
	color: var(--ink-900);
	line-height: 1.45;
}

/* Two blocks side by side — "When" and "Where" — with the 2px rule that closes
   the hero above them. */
.tribe-events-single .tribe-events-event-meta {
	background: none;
	border: none;
	border-top: 2px solid var(--ink-900);
	margin: var(--space-7) 0 0;
	padding: var(--space-7) 0 0;
}

/* Our own additions to the page. */
.mwim-event-photos {
	margin-top: var(--space-8);
}

/* The design system's frame around each poster. `align-self: start` keeps a
   short poster from stretching to the height of the tallest in the row. */
.mwim-event-gallery img {
	border: 1px solid var(--border-strong);
	background: var(--surface-card);
	padding: 4px;
	box-sizing: border-box;
	align-self: start;
}

/* The gutter is the frame's job now, not a 2px hairline seam. */
.mwim-event-photos .mwim-event-gallery {
	gap: var(--space-4);
	margin: 0;
}

/* TEC's page wrapper adds 20px of its own padding on top of the theme's, so a
   single event sat inset from every other page. The theme's container already
   handles the gutter. */
#tribe-events-pg-template {
	padding-left: 0;
	padding-right: 0;
}

/* TEC prints the same previous/next navigation twice, above and below the
   event. The design has none at the top, and in a two-column hero it would sit
   between the schedule and the description. Keep the one at the foot. */
.tribe-events-single > #tribe-events-header {
	display: none;
}

@media (min-width: 782px) {
	.tribe-events-single {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 400px;
		column-gap: var(--space-8);
		align-items: start;
	}

	/* Dissolve TEC's post wrapper into the grid above. */
	.tribe-events-single > .tribe_events {
		display: contents;
	}

	/* Everything textual runs down the left column … */
	.tribe-events-single > *,
	.tribe-events-single > .tribe_events > * {
		grid-column: 1;
		min-width: 0;
	}

	/* … the back link takes the full first row, clear of the poster … */
	.tribe-events-single > .tribe-events-back {
		grid-column: 1 / -1;
		grid-row: 1;
		margin: 0 0 var(--space-5);
	}

	/* … the poster holds the right column for the whole hero. The generous row
	   span is a ceiling, not a count: it only has to outlast the left column. */
	.tribe-events-single > .tribe_events > .tribe-events-event-image {
		grid-column: 2;
		grid-row: 2 / span 40;
		margin: 0;
		align-self: start;
	}

	/* … and these run full width beneath both columns. Because column 2 is
	   occupied through the hero, they can only land below it. */
	.tribe-events-single > #tribe-events-footer,
	.tribe-events-single > .tribe_events > .tribe-events-event-meta,
	.tribe-events-single > .tribe_events > .mwim-event-photos {
		grid-column: 1 / -1;
	}

	/* Sequence every item explicitly. Two reasons: the gallery is emitted before
	   TEC's meta block but the design ends with the posters, and TEC already
	   assigns its own `order` values (image 1, description 1, meta 2) for the
	   flex layout we replaced — leaving any item unset would let those decide. */
	.tribe-events-single > .tribe-events-back { order: 1; }
	.tribe-events-single > .tribe-events-notices { order: 2; }
	.tribe-events-single > .tribe-events-single-event-title { order: 3; }
	.tribe-events-single > .tribe-events-schedule { order: 4; }
	.tribe-events-single > .tribe_events > .tribe-events-single-event-description { order: 5; }
	.tribe-events-single > .tribe_events > .mwim-event-actions { order: 6; }
	.tribe-events-single > .tribe_events > .tribe-events.tribe-common { order: 7; }
	.tribe-events-single > .tribe_events > .tribe-events-event-meta { order: 8; }
	.tribe-events-single > .tribe_events > .mwim-event-photos { order: 9; }
	.tribe-events-single > #tribe-events-footer { order: 10; }

	.tribe-events-single .tribe-events-event-meta {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-8);
	}
}

/* The poster keeps the design's hairline frame and inner mat. */
.tribe-events-single .tribe-events-event-image {
	border: 1px solid var(--border-strong);
	background: var(--surface-card);
	padding: 6px;
	/* The frame is a grid item in a fixed 400px track; without this its padding
	   and border push it 14px past the column. */
	box-sizing: border-box;
}

.tribe-events-single .tribe-events-event-image img {
	max-width: 100%;
	width: 100%;
	display: block;
}

/* ═══════════════════════════════════════════════════════════════════════════
   19. Contact — the chooser's topic cards and the three form pages
   ═══════════════════════════════════════════════════════════════════════════ */

.mwim-contact-lede {
	font-family: var(--font-editorial);
	font-size: var(--text-md);
	line-height: var(--leading-relaxed);
	color: var(--ink-900);
	max-width: 62ch;
	margin: 0 0 var(--space-7);
	text-wrap: pretty;
}

.mwim-contact-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-5);
}

/* A column, so the button can be pinned to the bottom however long the blurb
   runs — the three cards read as one row of equals. */
.mwim-contact-card {
	display: flex;
	flex-direction: column;
	background: var(--surface-card);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	padding: var(--space-6);
}

.mwim-contact-card__title {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: 400;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	line-height: 1.05;
	color: var(--ink-900);
	margin: 0;
}

.mwim-contact-card__blurb {
	font-family: var(--font-editorial);
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
	color: var(--ink-900);
	margin: var(--space-4) 0 var(--space-6);
	text-wrap: pretty;
}

.mwim-contact-card__action {
	margin-top: auto;
}

.mwim-contact-card__button {
	display: inline-block;
	text-decoration: none;
}

/* ── The three form pages ─────────────────────────────────────────────────── */

.mwim-form-back {
	margin: 0 0 var(--space-5);
}

.mwim-form-back a {
	font-family: var(--font-ui);
	font-size: var(--text-2xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--tracking-widest);
	color: var(--rust-700);
	text-decoration: none;
}

.mwim-form-back a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mwim-form-intro {
	font-family: var(--font-editorial);
	font-size: var(--text-md);
	line-height: var(--leading-relaxed);
	color: var(--ink-900);
	margin: 0;
	text-wrap: pretty;
}

/* The caveat on the submission form — a quiet aside, marked by a gold rule
   rather than shouted in a box. */
.mwim-form-note {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	color: var(--text-muted);
	margin: var(--space-4) 0 0;
	padding-left: var(--space-4);
	border-left: 3px solid var(--gold-500);
}

.mwim-form-card {
	background: var(--surface-card);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	padding: var(--space-6);
	margin-top: var(--space-7);
}

/* The page template constrains post content to the content width (760px), which
   is right for the form pages — one column of fields, and the same measure as
   the design's `--container-narrow`. The chooser is the exception: three cards
   need the wide width, and at 760px they sit orphaned in the middle of the page
   while the "Contact" heading above them runs the full width. `alignwide` can't
   do it from the inside, because the constraint is on the post-content block
   itself, so widen that block on this one page. */
.wp-block-post-content:has(> .mwim-contact-chooser) {
	max-width: var(--wp--style--global--wide-size);
}

@media (max-width: 899px) {
	.mwim-contact-cards {
		grid-template-columns: 1fr;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   20. Store coming-soon screen
   ═══════════════════════════════════════════════════════════════════════════ */

/* Shown over /shop/, the cart, the checkout and every product page while
   WooCommerce's Site Visibility is set to "Coming soon → store pages only".
   Nothing here is store-specific plumbing: it's the same editorial register as
   the rest of the site, so the shop reads as "not yet" rather than "broken". */

.mwim-coming-soon {
	max-width: 62ch;
	padding: var(--space-7) 0 var(--space-8);
}

.mwim-coming-soon__kicker {
	font-family: var(--font-ui);
	font-size: var(--text-2xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--tracking-widest);
	color: var(--rust-700);
	margin: 0 0 var(--space-4);
}

.mwim-coming-soon__lede {
	font-family: var(--font-editorial);
	font-size: var(--text-md);
	line-height: var(--leading-relaxed);
	color: var(--ink-900);
	margin: 0;
	text-wrap: pretty;
}

.mwim-coming-soon__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin-top: var(--space-7);
}

.mwim-coming-soon__button {
	display: inline-block;
	text-decoration: none;
}

/* The second action is the quieter of the two — the design's outline variant. */
.mwim-coming-soon__button.is-secondary {
	background: transparent;
	color: var(--ink-900);
	border-color: var(--ink-900);
}

.mwim-coming-soon__button.is-secondary:hover {
	background: var(--ink-900);
	color: var(--paper-050);
	border-color: var(--ink-900);
}