/**
 * 8BitClub Museum — design system runtime.
 *
 * Tokens live in style.css (:root). This file implements the system:
 * quiet neutral canvas, one dominant accent, hairline structure,
 * generous whitespace, restrained motion.
 */

/* =========================================================
   1. RESET & BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--ebcm-header-h) + var(--ebcm-s5));
	-moz-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--ebcm-canvas);
	color: var(--ebcm-ink-2);
	font-family: var(--ebcm-font-sans);
	font-size: var(--ebcm-fs-base);
	line-height: var(--ebcm-lh-body);
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "kern" 1, "liga" 1;
	overflow-x: hidden;
	accent-color: var(--ebcm-blue);
}

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
ul, ol { padding-inline-start: 1.2em; }
p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

hr {
	border: 0;
	border-top: 1px solid var(--ebcm-line);
	margin-block: var(--ebcm-s7);
}

::selection { background: var(--ebcm-blue); color: #fff; }

/* Consistent, visible focus everywhere */
:focus-visible {
	outline: 2px solid var(--ebcm-blue);
	outline-offset: 3px;
	border-radius: 4px;
}

/* =========================================================
   2. TYPOGRAPHY
   ========================================================= */
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em;
	color: var(--ebcm-ink);
	font-weight: 650;
	line-height: var(--ebcm-lh-snug);
	letter-spacing: var(--ebcm-track-tight);
	text-wrap: balance;
}
h1 { font-size: var(--ebcm-fs-3xl); line-height: var(--ebcm-lh-tight); }
h2 { font-size: var(--ebcm-fs-2xl); }
h3 { font-size: var(--ebcm-fs-lg); letter-spacing: -0.015em; }
h4 { font-size: var(--ebcm-fs-md); letter-spacing: -0.01em; }
h5, h6 { font-size: var(--ebcm-fs-sm); letter-spacing: 0; }

a {
	color: var(--ebcm-blue-ink);
	text-decoration: none;
	transition: color var(--ebcm-t-fast) var(--ebcm-ease);
}
a:hover { color: var(--ebcm-blue-deep); }

strong, b { font-weight: 650; color: var(--ebcm-ink); }
small { font-size: var(--ebcm-fs-sm); }

/* Mono "eyebrow" label — the system's signature small-caps device */
.ebcm-section__eyebrow,
.ebcm-page-header__eyebrow,
.ebcm-footer__tagline,
.ebcm-navlbl,
.footer__heading {
	font-family: var(--ebcm-font-mono);
	font-size: var(--ebcm-fs-xs);
	font-weight: 500;
	letter-spacing: var(--ebcm-track-wide);
	text-transform: uppercase;
	font-feature-settings: "tnum" 1;
}

.ebcm-section__eyebrow,
.ebcm-page-header__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	margin: 0 0 var(--ebcm-s3);
	color: var(--ebcm-muted);
}
.ebcm-section__eyebrow::before,
.ebcm-page-header__eyebrow::before {
	content: "";
	inline-size: 18px;
	block-size: 2px;
	border-radius: 2px;
	background: var(--ebcm-blue);
	flex: 0 0 auto;
}

/* =========================================================
   3. ACCESSIBILITY UTILITIES
   ========================================================= */
.screen-reader-text {
	position: absolute !important;
	inline-size: 1px; block-size: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden; word-wrap: normal !important;
	clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
}

.skip-link {
	position: absolute;
	inset-inline-start: -9999px;
	inset-block-start: 0;
	z-index: 100000;
	background: var(--ebcm-ink);
	color: #fff;
	padding: 0.8rem 1.25rem;
	font-size: var(--ebcm-fs-sm);
	font-weight: 600;
	border-end-end-radius: var(--ebcm-r-sm);
}
.skip-link:focus { inset-inline-start: 0; color: #fff; }

/* =========================================================
   4. LAYOUT PRIMITIVES
   ========================================================= */
.ebcm-site { display: flow-root; }

.ebcm-container {
	inline-size: 100%;
	max-inline-size: var(--ebcm-wrap);
	margin-inline: auto;
	padding-inline: var(--ebcm-gutter);
}

.ebcm-main { display: block; min-block-size: 50vh; }

.ebcm-section { padding-block: var(--ebcm-section-y); }
.ebcm-section--band {
	background: var(--ebcm-band);
	border-block: 1px solid var(--ebcm-line);
}

.ebcm-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--ebcm-s5);
	margin-bottom: var(--ebcm-s7);
	flex-wrap: wrap;
}
.ebcm-section__title { font-size: var(--ebcm-fs-2xl); margin: 0; }

.ebcm-section__more {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: var(--ebcm-fs-sm);
	font-weight: 600;
	color: var(--ebcm-ink);
	white-space: nowrap;
	padding-bottom: 2px;
	border-bottom: 1px solid var(--ebcm-line-2);
	transition: color var(--ebcm-t-fast) var(--ebcm-ease), border-color var(--ebcm-t-fast) var(--ebcm-ease);
}
.ebcm-section__more:hover { color: var(--ebcm-blue-ink); border-color: currentColor; }

/* Content + sidebar */
.ebcm-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 306px;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
	margin-block: var(--ebcm-s7) var(--ebcm-s10);
}
.ebcm-layout__main { min-inline-size: 0; }
.ebcm-page { margin-block: var(--ebcm-s6) var(--ebcm-s10); }

/* =========================================================
   5. HEADER & NAVIGATION
   ========================================================= */
.ebcm-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--ebcm-dark) 88%, transparent);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid var(--ebcm-line-on-dark);
	transition: box-shadow var(--ebcm-t) var(--ebcm-ease), background var(--ebcm-t) var(--ebcm-ease);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
	.ebcm-header { background: rgba(11, 12, 14, 0.92); }
}
.ebcm-header.is-scrolled {
	background: rgba(11, 12, 14, 0.96);
	box-shadow: 0 1px 0 var(--ebcm-line-on-dark), 0 12px 32px rgba(0, 0, 0, 0.28);
}

.ebcm-header__inner {
	display: flex;
	align-items: center;
	gap: var(--ebcm-s5);
	max-inline-size: var(--ebcm-wrap-wide);
	margin-inline: auto;
	padding: 0.7rem var(--ebcm-gutter);
	min-block-size: var(--ebcm-header-h);
}

/* Branding */
.ebcm-branding { display: flex; align-items: center; flex: 0 0 auto; }
.ebcm-branding .custom-logo-link { display: inline-flex; }
.ebcm-branding img { max-block-size: 44px; inline-size: auto; }

.ebcm-wordmark {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	color: var(--ebcm-on-dark);
}
.ebcm-wordmark:hover { color: #fff; }
.ebcm-wordmark__mark {
	font-family: var(--ebcm-font-mono);
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: -0.04em;
	line-height: 1;
	background: #fff;
	padding: 0.34rem 0.42rem;
	border-radius: var(--ebcm-r-sm);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16);
	transition: transform var(--ebcm-t) var(--ebcm-ease);
}
.ebcm-wordmark:hover .ebcm-wordmark__mark { transform: translateY(-1px); }

/* Admin-selected Custom Logo. Occupies the same slot as the built-in mark:
   capped on both axes so an oversized upload cannot stretch the header, and
   contained so the image is never distorted whatever its aspect ratio. */
.ebcm-wordmark__logo {
	display: block;
	inline-size: auto;
	block-size: auto;
	max-block-size: 44px;
	max-inline-size: 200px;
	object-fit: contain;
	object-position: left center;
	transition: transform var(--ebcm-t) var(--ebcm-ease);
}
.ebcm-wordmark:hover .ebcm-wordmark__logo { transform: translateY(-1px); }
.ebcm-wordmark__text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	font-weight: 650;
	font-size: 1.02rem;
	letter-spacing: -0.015em;
	line-height: 1.05;
}
.ebcm-header .ebcm-tagline {
	font-family: var(--ebcm-font-mono);
	font-weight: 400;
	font-size: 0.6rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ebcm-on-dark-3);
}

/* Primary nav */
.ebcm-nav { margin-inline-start: auto; }
.ebcm-menu {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 0.1rem;
	margin: 0;
	padding: 0;
}
.ebcm-menu li { position: relative; }

.ebcm-menu .menu-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.55rem 0.8rem;
	color: var(--ebcm-on-dark-2);
	font-size: 0.945rem;
	font-weight: 500;
	letter-spacing: -0.005em;
	border-radius: var(--ebcm-r-sm);
	transition: color var(--ebcm-t-fast) var(--ebcm-ease), background var(--ebcm-t-fast) var(--ebcm-ease);
}
.ebcm-menu .menu-link:hover,
.ebcm-menu .menu-link:focus-visible {
	color: #fff;
	background: rgba(255, 255, 255, 0.07);
}

/* Positional RGB accent cycle.
   The indicator colour is derived from each item's position in the
   menu, not from its label: 1st red, 2nd green, 3rd blue, then the
   sequence repeats. A menu item added later automatically picks up
   the next colour with no further configuration. Uses the brand
   values already defined in style.css. */
.ebcm-menu > li:nth-child(3n + 1) { --ebcm-nav-accent: var(--ebcm-red); }
.ebcm-menu > li:nth-child(3n + 2) { --ebcm-nav-accent: var(--ebcm-green); }
.ebcm-menu > li:nth-child(3n + 3) { --ebcm-nav-accent: var(--ebcm-blue); }

/* Animated hover indicator — the bar is revealed only while the item is
   hovered or keyboard-focused, never for the current page. */
.ebcm-menu > li > .menu-link::after {
	content: "";
	position: absolute;
	inset-inline: 0.8rem;
	inset-block-end: 0.28rem;
	block-size: 2px;
	border-radius: 2px;
	background: var(--ebcm-nav-accent, var(--ebcm-blue));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--ebcm-t) var(--ebcm-ease);
}
.ebcm-menu > .current-menu-item > .menu-link,
.ebcm-menu > .current-menu-ancestor > .menu-link { color: #fff; }
.ebcm-menu > li > .menu-link:hover::after,
.ebcm-menu > li > .menu-link:focus-visible::after { transform: scaleX(1); }

.ebcm-ext-icon { font-size: 0.78em; opacity: 0.6; }

/* Dropdowns */
.ebcm-menu .sub-menu {
	list-style: none;
	position: absolute;
	inset-block-start: calc(100% + 6px);
	inset-inline-start: 0;
	min-inline-size: 232px;
	margin: 0;
	padding: 0.4rem;
	background: var(--ebcm-surface);
	border: 1px solid var(--ebcm-line);
	border-radius: var(--ebcm-r);
	box-shadow: var(--ebcm-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity var(--ebcm-t) var(--ebcm-ease), transform var(--ebcm-t) var(--ebcm-ease), visibility var(--ebcm-t);
	z-index: 30;
}
.ebcm-menu li:hover > .sub-menu,
.ebcm-menu li:focus-within > .sub-menu,
.ebcm-menu li.submenu-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.ebcm-menu .sub-menu .menu-link {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	inline-size: 100%;
	color: var(--ebcm-ink-2);
	font-size: 0.92rem;
	padding: 0.5rem 0.65rem;
}
.ebcm-menu .sub-menu .menu-link:hover {
	background: var(--ebcm-band);
	color: var(--ebcm-blue-ink);
}
/* Dropdown entries run their own positional RGB sequence, counted inside the
   sub-menu: 1st red, 2nd green, 3rd blue, repeating. Nothing is tied to a
   label, so a third entry added later picks up blue by itself. */
.ebcm-menu .sub-menu > li:nth-child(3n + 1) { --ebcm-nav-accent: var(--ebcm-red); }
.ebcm-menu .sub-menu > li:nth-child(3n + 2) { --ebcm-nav-accent: var(--ebcm-green); }
.ebcm-menu .sub-menu > li:nth-child(3n)     { --ebcm-nav-accent: var(--ebcm-blue); }

/* A small dash to the left of the label, vertically centred on it. It is a
   flex item with a fixed basis so it can neither shrink nor stretch, and it
   is drawn on the link itself — hover backgrounds sit behind it and the
   current-page state never touches its colour. */
.ebcm-menu .sub-menu .menu-link::before {
	content: "";
	display: block;
	flex: 0 0 12px;
	inline-size: 12px;
	width: 12px;
	block-size: 2px;
	height: 2px;
	border-radius: 2px;
	background-color: var(--ebcm-nav-accent, var(--ebcm-blue));
}

.submenu-toggle {
	display: none;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	padding: 0.35rem;
	border-radius: var(--ebcm-r-sm);
}
.submenu-toggle__icon::before {
	content: "";
	display: block;
	inline-size: 7px; block-size: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--ebcm-t) var(--ebcm-ease);
}
.submenu-open > .submenu-toggle .submenu-toggle__icon::before { transform: rotate(-135deg); }

/* Dropdown chevron shown beside a top-level parent's label. Sits inside the
   link's existing flex row and gap, so the bar's height and alignment are
   unchanged; it only rotates, never reflows. */
.ebcm-caret {
	inline-size: 6px;
	block-size: 6px;
	margin-inline-start: 0.1em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-1px) rotate(45deg);
	transition: transform var(--ebcm-t) var(--ebcm-ease);
	opacity: 0.75;
}
.ebcm-menu > li:hover > .menu-link .ebcm-caret,
.ebcm-menu > li:focus-within > .menu-link .ebcm-caret,
.ebcm-menu > li.submenu-open > .menu-link .ebcm-caret {
	transform: translateY(1px) rotate(-135deg);
	opacity: 1;
}

/* Keep a dropdown inside the viewport when its parent sits near the right
   edge of the bar: the last two items open right-aligned instead. */
.ebcm-menu > li:nth-last-child(-n + 2) > .sub-menu {
	inset-inline-start: auto;
	inset-inline-end: 0;
}

.ebcm-header__actions { flex: 0 0 auto; }

/* Mobile toggle */
.ebcm-menu-toggle {
	display: none;
	margin-inline-start: auto;
	background: transparent;
	border: 1px solid var(--ebcm-line-on-dark-2);
	border-radius: var(--ebcm-r-sm);
	padding: 0.55rem 0.6rem;
	cursor: pointer;
	transition: background var(--ebcm-t-fast) var(--ebcm-ease), border-color var(--ebcm-t-fast) var(--ebcm-ease);
}
.ebcm-menu-toggle:hover { background: rgba(255, 255, 255, 0.08); }
.ebcm-menu-toggle__bars { display: flex; flex-direction: column; gap: 4px; inline-size: 20px; }
.ebcm-menu-toggle__bars span {
	block-size: 1.5px;
	background: #fff;
	border-radius: 2px;
	transition: transform var(--ebcm-t) var(--ebcm-ease), opacity var(--ebcm-t-fast) var(--ebcm-ease);
}
.ebcm-menu-toggle[aria-expanded="true"] .ebcm-menu-toggle__bars span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.ebcm-menu-toggle[aria-expanded="true"] .ebcm-menu-toggle__bars span:nth-child(2) { opacity: 0; }
.ebcm-menu-toggle[aria-expanded="true"] .ebcm-menu-toggle__bars span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* =========================================================
   6. BUTTONS
   ========================================================= */
.ebcm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.005em;
	padding: 0.78rem 1.35rem;
	border: 1px solid var(--ebcm-ink);
	border-radius: var(--ebcm-r-sm);
	background: var(--ebcm-ink);
	color: #fff;
	cursor: pointer;
	text-align: center;
	white-space: nowrap;
	transition: background var(--ebcm-t-fast) var(--ebcm-ease), border-color var(--ebcm-t-fast) var(--ebcm-ease),
		color var(--ebcm-t-fast) var(--ebcm-ease), transform var(--ebcm-t-fast) var(--ebcm-ease),
		box-shadow var(--ebcm-t) var(--ebcm-ease);
}
.ebcm-btn:hover {
	background: var(--ebcm-blue-ink);
	border-color: var(--ebcm-blue-ink);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--ebcm-shadow);
}
.ebcm-btn:active { transform: translateY(0); box-shadow: var(--ebcm-shadow-xs); }
.ebcm-btn[disabled] { opacity: 0.55; pointer-events: none; }

/* Primary action — the single strong brand colour */
.ebcm-btn--red { background: var(--ebcm-red); border-color: var(--ebcm-red); color: #fff; }
.ebcm-btn--red:hover { background: var(--ebcm-red-ink); border-color: var(--ebcm-red-ink); }

/* Quiet outline (on light) */
.ebcm-btn--outline {
	background: transparent;
	color: var(--ebcm-ink);
	border-color: var(--ebcm-line-2);
}
.ebcm-btn--outline:hover {
	background: var(--ebcm-ink);
	border-color: var(--ebcm-ink);
	color: #fff;
}

/* Header CTA — outline that fills, reads premium on dark */
.ebcm-btn--collection {
	background: transparent;
	color: var(--ebcm-on-dark);
	border-color: var(--ebcm-line-on-dark-2);
	box-shadow: none;
}
.ebcm-btn--collection:hover {
	background: #fff;
	border-color: #fff;
	color: var(--ebcm-ink);
	box-shadow: none;
}

/* On dark sections (hero/CTA), the default btn inverts to light */
.ebcm-hero .ebcm-btn--outline,
.ebcm-cta .ebcm-btn--outline {
	color: var(--ebcm-on-dark);
	border-color: var(--ebcm-line-on-dark-2);
}
.ebcm-hero .ebcm-btn--outline:hover,
.ebcm-cta .ebcm-btn--outline:hover {
	background: #fff;
	border-color: #fff;
	color: var(--ebcm-ink);
}
.ebcm-hero .ebcm-btn:not(.ebcm-btn--outline):not(.ebcm-btn--red) {
	background: #fff;
	border-color: #fff;
	color: var(--ebcm-ink);
}
.ebcm-hero .ebcm-btn:not(.ebcm-btn--outline):not(.ebcm-btn--red):hover {
	background: var(--ebcm-blue);
	border-color: var(--ebcm-blue);
	color: #fff;
}

.ebcm-btn--lg { font-size: 1rem; padding: 0.95rem 1.65rem; }
.ebcm-btn--sm { font-size: 0.875rem; padding: 0.58rem 1rem; }
.ebcm-btn--block { display: flex; inline-size: 100%; }

/* Inline "read more" affordance with nudging arrow */
.ebcm-card__link,
.ebcm-post-card__link,
.ebcm-row__link {
	margin-block-start: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: var(--ebcm-fs-sm);
	font-weight: 600;
	color: var(--ebcm-ink);
	transition: color var(--ebcm-t-fast) var(--ebcm-ease), gap var(--ebcm-t-fast) var(--ebcm-ease);
}
.ebcm-card__link span,
.ebcm-post-card__link span,
.ebcm-row__link span,
.ebcm-section__more span,
.ebcm-btn span[aria-hidden] { transition: transform var(--ebcm-t) var(--ebcm-ease); }
.ebcm-card__link:hover,
.ebcm-post-card__link:hover,
.ebcm-row__link:hover { color: var(--ebcm-blue-ink); }
.ebcm-card__link:hover span,
.ebcm-post-card__link:hover span,
.ebcm-row__link:hover span,
.ebcm-section__more:hover span { transform: translateX(3px); }

/* =========================================================
   7. FORMS
   ========================================================= */
input[type="text"], input[type="email"], input[type="url"], input[type="search"],
input[type="tel"], input[type="number"], input[type="password"], textarea, select {
	inline-size: 100%;
	font-family: inherit;
	font-size: 0.95rem;
	color: var(--ebcm-ink);
	background: var(--ebcm-surface);
	border: 1px solid var(--ebcm-line-2);
	border-radius: var(--ebcm-r-sm);
	padding: 0.62rem 0.8rem;
	transition: border-color var(--ebcm-t-fast) var(--ebcm-ease), box-shadow var(--ebcm-t-fast) var(--ebcm-ease);
	-webkit-appearance: none;
	appearance: none;
}
textarea { min-block-size: 140px; resize: vertical; }
select {
	background-image: linear-gradient(45deg, transparent 50%, var(--ebcm-muted) 50%), linear-gradient(135deg, var(--ebcm-muted) 50%, transparent 50%);
	background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-inline-end: 2rem;
	cursor: pointer;
}
input:focus, textarea:focus, select:focus {
	outline: none;
	border-color: var(--ebcm-blue);
	box-shadow: 0 0 0 3px rgba(43, 57, 212, 0.16); /* fallback */
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ebcm-blue) 16%, transparent);
}
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; }
::placeholder { color: var(--ebcm-faint); opacity: 1; }
label { display: block; font-size: var(--ebcm-fs-sm); font-weight: 600; color: var(--ebcm-ink); }

/* Search form */
.ebcm-searchform { display: flex; gap: var(--ebcm-s2); }
.ebcm-searchform__input { flex: 1; }
.ebcm-searchform__submit {
	flex: 0 0 auto;
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	padding: 0.62rem 1.1rem;
	border: 1px solid var(--ebcm-ink);
	border-radius: var(--ebcm-r-sm);
	background: var(--ebcm-ink);
	color: #fff;
	cursor: pointer;
	transition: background var(--ebcm-t-fast) var(--ebcm-ease), border-color var(--ebcm-t-fast) var(--ebcm-ease);
}
.ebcm-searchform__submit:hover { background: var(--ebcm-blue-ink); border-color: var(--ebcm-blue-ink); }

/* =========================================================
   8. CHIPS & BADGES
   ========================================================= */
.ebcm-chips { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; }
.ebcm-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	padding: 0.24rem 0.62rem;
	border: 1px solid var(--ebcm-line);
	border-radius: var(--ebcm-r-pill);
	background: var(--ebcm-surface);
	color: var(--ebcm-ink-2);
	transition: border-color var(--ebcm-t-fast) var(--ebcm-ease), color var(--ebcm-t-fast) var(--ebcm-ease), background var(--ebcm-t-fast) var(--ebcm-ease);
}
.ebcm-chip:hover { border-color: var(--ebcm-line-3); color: var(--ebcm-ink); }
.ebcm-chip--brand { color: var(--ebcm-blue-ink); background: var(--ebcm-blue-050); border-color: transparent; }
.ebcm-chip--brand:hover { color: var(--ebcm-blue-deep); }
.ebcm-chip--cat { background: var(--ebcm-band); border-color: transparent; }
.ebcm-chip--era { font-family: var(--ebcm-font-mono); font-weight: 500; font-feature-settings: "tnum" 1; }
/* Status: colour + a dot, so meaning is never carried by colour alone */
.ebcm-chip--status { color: var(--ebcm-green-ink); background: var(--ebcm-green-050); border-color: transparent; }
.ebcm-chip--status::before {
	content: "";
	inline-size: 6px; block-size: 6px;
	border-radius: 50%;
	background: currentColor;
	flex: 0 0 auto;
}

/* =========================================================
   9. CARDS — exhibit grid, post card, list row
   ========================================================= */
.ebcm-results--grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
	gap: clamp(1rem, 2vw, 1.75rem);
}
.ebcm-post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: clamp(1rem, 2vw, 1.75rem);
}

.ebcm-card, .ebcm-post-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--ebcm-surface);
	border: 1px solid var(--ebcm-line);
	border-radius: var(--ebcm-r);
	overflow: hidden;
	transition: transform var(--ebcm-t) var(--ebcm-ease), box-shadow var(--ebcm-t) var(--ebcm-ease), border-color var(--ebcm-t) var(--ebcm-ease);
}
.ebcm-card:hover, .ebcm-post-card:hover {
	transform: translateY(-3px);
	border-color: var(--ebcm-line-2);
	box-shadow: var(--ebcm-shadow);
}

.ebcm-card__media, .ebcm-post-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--ebcm-band-2);
	overflow: hidden;
}
.ebcm-card__media img, .ebcm-post-card__media img {
	inline-size: 100%; block-size: 100%;
	object-fit: cover;
	transition: transform var(--ebcm-t-slow) var(--ebcm-ease);
}
.ebcm-card:hover .ebcm-card__media img,
.ebcm-post-card:hover .ebcm-post-card__media img { transform: scale(1.035); }

/* Placeholder art shouldn't be cropped like a photo */
.ebcm-placeholder-img { object-fit: contain !important; padding: 12%; opacity: 0.5; }

.ebcm-card__cat {
	position: absolute;
	inset-block-start: 0.7rem;
	inset-inline-start: 0.7rem;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	padding: 0.22rem 0.55rem;
	border-radius: var(--ebcm-r-pill);
	background: rgba(11, 12, 14, 0.84); /* fallback: must stay opaque enough for white text */
	background: color-mix(in srgb, var(--ebcm-dark) 82%, transparent);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff;
}

.ebcm-card__body, .ebcm-post-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	flex: 1;
	padding: 1.1rem 1.15rem 1.25rem;
}

.ebcm-card__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ebcm-s3);
	margin: 0;
	font-size: var(--ebcm-fs-xs);
	color: var(--ebcm-muted);
}
.ebcm-card__brand {
	font-weight: 650;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--ebcm-blue-ink);
}
.ebcm-card__year { font-family: var(--ebcm-font-mono); font-feature-settings: "tnum" 1; }

.ebcm-card__title, .ebcm-post-card__title {
	font-size: var(--ebcm-fs-md);
	line-height: 1.3;
	margin: 0;
}
.ebcm-card__title a, .ebcm-post-card__title a {
	color: var(--ebcm-ink);
	transition: color var(--ebcm-t-fast) var(--ebcm-ease);
}
.ebcm-card:hover .ebcm-card__title a,
.ebcm-post-card:hover .ebcm-post-card__title a { color: var(--ebcm-blue-ink); }

.ebcm-card__excerpt, .ebcm-post-card__excerpt {
	font-size: var(--ebcm-fs-sm);
	line-height: 1.6;
	color: var(--ebcm-muted);
	margin: 0;
}
.ebcm-post-card__excerpt p { margin: 0; }

.ebcm-post-card__meta {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
	font-size: var(--ebcm-fs-xs);
	color: var(--ebcm-muted);
}
.ebcm-meta__item { display: inline-flex; align-items: center; gap: 0.35em; }
.ebcm-meta__date time { color: inherit; font-family: var(--ebcm-font-mono); font-feature-settings: "tnum" 1; }
.ebcm-meta__author a { color: var(--ebcm-ink-2); font-weight: 600; }

/* List / row view */
.ebcm-results--list { display: flex; flex-direction: column; gap: var(--ebcm-s4); }
.ebcm-row {
	display: grid;
	grid-template-columns: 232px minmax(0, 1fr);
	gap: 0;
	background: var(--ebcm-surface);
	border: 1px solid var(--ebcm-line);
	border-radius: var(--ebcm-r);
	overflow: hidden;
	transition: border-color var(--ebcm-t) var(--ebcm-ease), box-shadow var(--ebcm-t) var(--ebcm-ease);
}
.ebcm-row:hover { border-color: var(--ebcm-line-2); box-shadow: var(--ebcm-shadow-sm); }
.ebcm-row__media { display: block; background: var(--ebcm-band-2); overflow: hidden; }
.ebcm-row__media img { inline-size: 100%; block-size: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform var(--ebcm-t-slow) var(--ebcm-ease); }
.ebcm-row:hover .ebcm-row__media img { transform: scale(1.03); }
.ebcm-row__body { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.2rem 1.35rem; }
.ebcm-row__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--ebcm-s4); flex-wrap: wrap; }
.ebcm-row__title { font-size: var(--ebcm-fs-lg); margin: 0; }
.ebcm-row__title a { color: var(--ebcm-ink); }
.ebcm-row__title a:hover { color: var(--ebcm-blue-ink); }
.ebcm-row__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
	margin: 0;
	font-size: var(--ebcm-fs-xs);
	color: var(--ebcm-muted);
}
.ebcm-row__meta span:not(:last-child)::after { content: "·"; margin-inline-start: 0.55rem; color: var(--ebcm-line-3); }
.ebcm-row__excerpt { font-size: var(--ebcm-fs-sm); color: var(--ebcm-muted); margin: 0; }
.ebcm-row__specs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
	gap: 0.3rem 1.25rem;
	margin: 0.35rem 0 0;
	padding-block-start: 0.7rem;
	border-block-start: 1px solid var(--ebcm-line);
	font-size: var(--ebcm-fs-xs);
}
.ebcm-row__specs > div { display: flex; gap: 0.45em; min-inline-size: 0; }
.ebcm-row__specs dt { margin: 0; color: var(--ebcm-faint); white-space: nowrap; }
.ebcm-row__specs dd { margin: 0; font-family: var(--ebcm-font-mono); font-weight: 500; color: var(--ebcm-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =========================================================
   10. COLLECTION CONTROLS
   ========================================================= */
.ebcm-filters {
	display: flex;
	flex-direction: column;
	gap: var(--ebcm-s4);
	background: var(--ebcm-surface);
	border: 1px solid var(--ebcm-line);
	border-radius: var(--ebcm-r);
	padding: 1.15rem 1.25rem;
	margin-bottom: var(--ebcm-s6);
	box-shadow: var(--ebcm-shadow-xs);
}
.ebcm-filters__search { display: block; }
.ebcm-filters__row { display: flex; flex-wrap: wrap; gap: var(--ebcm-s3); align-items: end; }
.ebcm-field { display: flex; flex-direction: column; gap: 0.3rem; min-inline-size: 0; }
.ebcm-field > span {
	font-family: var(--ebcm-font-mono);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ebcm-faint);
}
.ebcm-field select { min-inline-size: 148px; }
.ebcm-field--search { flex: 1; }
.ebcm-field--search input { font-size: 1rem; padding-block: 0.72rem; }
.ebcm-filters__row .ebcm-btn { align-self: end; }

.ebcm-filters__bar {
	display: flex;
	align-items: center;
	gap: var(--ebcm-s4);
	flex-wrap: wrap;
	padding-block-start: var(--ebcm-s4);
	border-block-start: 1px solid var(--ebcm-line);
}
.ebcm-filters__count {
	margin: 0;
	font-family: var(--ebcm-font-mono);
	font-size: var(--ebcm-fs-xs);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ebcm-ink);
	font-feature-settings: "tnum" 1;
}
.ebcm-filters__clear {
	font-size: var(--ebcm-fs-sm);
	font-weight: 600;
	color: var(--ebcm-muted);
	border-bottom: 1px solid transparent;
	transition: color var(--ebcm-t-fast) var(--ebcm-ease), border-color var(--ebcm-t-fast) var(--ebcm-ease);
}
.ebcm-filters__clear:hover { color: var(--ebcm-red-ink); border-color: currentColor; }

.ebcm-viewtoggle {
	margin-inline-start: auto;
	display: inline-flex;
	gap: 2px;
	padding: 2px;
	background: var(--ebcm-band);
	border: 1px solid var(--ebcm-line);
	border-radius: var(--ebcm-r-sm);
}
.ebcm-viewtoggle__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 34px; block-size: 28px;
	border-radius: 6px;
	font-size: 0.9rem;
	line-height: 1;
	color: var(--ebcm-muted);
	transition: background var(--ebcm-t-fast) var(--ebcm-ease), color var(--ebcm-t-fast) var(--ebcm-ease), box-shadow var(--ebcm-t-fast) var(--ebcm-ease);
}
.ebcm-viewtoggle__btn:hover { color: var(--ebcm-ink); }
.ebcm-viewtoggle__btn.is-active {
	background: var(--ebcm-surface);
	color: var(--ebcm-ink);
	box-shadow: var(--ebcm-shadow-xs);
}

.ebcm-results[aria-busy="true"] { opacity: 0.55; transition: opacity var(--ebcm-t) var(--ebcm-ease); }
.ebcm-loadmore-wrap { text-align: center; margin-block: var(--ebcm-s7); }

/* Empty states */
.ebcm-empty, .ebcm-none {
	text-align: center;
	padding: clamp(2.5rem, 7vw, 4.5rem) var(--ebcm-s5);
	background: var(--ebcm-surface);
	border: 1px dashed var(--ebcm-line-2);
	border-radius: var(--ebcm-r);
}
.ebcm-empty__title, .ebcm-none__title { font-size: var(--ebcm-fs-lg); margin: 0 0 0.4rem; }
.ebcm-empty p, .ebcm-none p { color: var(--ebcm-muted); margin-bottom: var(--ebcm-s5); }
.ebcm-none .ebcm-searchform { max-inline-size: 400px; margin-inline: auto; }

/* Pagination */
.ebcm-pagination { margin-block: var(--ebcm-s8); }
.ebcm-pagination ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; margin: 0; padding: 0; }
.ebcm-pagination a, .ebcm-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 40px; block-size: 40px;
	padding-inline: 0.7rem;
	font-size: var(--ebcm-fs-sm);
	font-weight: 600;
	font-feature-settings: "tnum" 1;
	color: var(--ebcm-ink-2);
	background: var(--ebcm-surface);
	border: 1px solid var(--ebcm-line);
	border-radius: var(--ebcm-r-sm);
	transition: border-color var(--ebcm-t-fast) var(--ebcm-ease), color var(--ebcm-t-fast) var(--ebcm-ease), background var(--ebcm-t-fast) var(--ebcm-ease);
}
.ebcm-pagination a:hover { border-color: var(--ebcm-line-3); color: var(--ebcm-ink); }
.ebcm-pagination .current { background: var(--ebcm-ink); border-color: var(--ebcm-ink); color: #fff; }
.ebcm-pagination .dots { border-color: transparent; background: transparent; }

/* =========================================================
   11. HERO & FRONT SECTIONS
   ========================================================= */
.ebcm-hero {
	position: relative;
	isolation: isolate;
	background: var(--ebcm-dark);
	color: var(--ebcm-on-dark-2);
	overflow: hidden;
}
/* Very faint structure + a single soft accent glow */
.ebcm-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(120% 90% at 20% 0%, #000 25%, transparent 75%);
	mask-image: radial-gradient(120% 90% at 20% 0%, #000 25%, transparent 75%);
}
.ebcm-hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	inline-size: 620px; block-size: 620px;
	inset-block-start: -300px;
	inset-inline-end: -180px;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--ebcm-blue) 26%, transparent) 0%, transparent 68%);
	pointer-events: none;
}
.ebcm-hero__inner {
	position: relative;
	max-inline-size: var(--ebcm-wrap);
	margin-inline: auto;
	padding: clamp(3.5rem, 8vw, 7rem) var(--ebcm-gutter);
	display: grid;
	grid-template-columns: 1.02fr 0.98fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}
.ebcm-hero__eyebrow { margin: 0 0 var(--ebcm-s5); }
.ebcm-hero .ebcm-tagline {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-family: var(--ebcm-font-mono);
	font-size: var(--ebcm-fs-xs);
	font-weight: 500;
	letter-spacing: var(--ebcm-track-wide);
	text-transform: uppercase;
	color: var(--ebcm-on-dark-2);
}
.ebcm-hero .ebcm-tagline::before {
	content: "";
	inline-size: 6px; block-size: 6px;
	border-radius: 50%;
	background: var(--ebcm-green);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ebcm-green) 22%, transparent);
	flex: 0 0 auto;
}
.ebcm-hero__title {
	font-size: var(--ebcm-fs-4xl);
	line-height: var(--ebcm-lh-tight);
	letter-spacing: -0.03em;
	color: #fff;
	margin: 0 0 var(--ebcm-s5);
	max-inline-size: 18ch;
}
.ebcm-hero__text {
	font-size: var(--ebcm-fs-md);
	line-height: 1.62;
	color: var(--ebcm-on-dark-2);
	max-inline-size: 46ch;
	margin: 0 0 var(--ebcm-s7);
}
.ebcm-hero__actions { display: flex; flex-wrap: wrap; gap: var(--ebcm-s3); }
.ebcm-hero__media { position: relative; }
.ebcm-hero__media img, .ebcm-hero__placeholder img {
	inline-size: 100%;
	border-radius: var(--ebcm-r-lg);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, var(--ebcm-shadow-lg);
}
.ebcm-hero__placeholder img { background: var(--ebcm-dark-2); opacity: 0.75; }

/* Intro / services — quiet editorial blocks */
.ebcm-intro__inner, .ebcm-services__inner { max-inline-size: var(--ebcm-measure); }
.ebcm-intro__text, .ebcm-services__text {
	font-size: var(--ebcm-fs-md);
	line-height: 1.66;
	color: var(--ebcm-ink-2);
	margin-bottom: var(--ebcm-s6);
}
.ebcm-intro .ebcm-section__title, .ebcm-services .ebcm-section__title { margin-bottom: var(--ebcm-s4); }

/* Category tiles */
.ebcm-cats__grid {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
	gap: var(--ebcm-s3);
}
.ebcm-cat-tile {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	block-size: 100%;
	padding: 1.15rem 1.15rem 1.05rem;
	background: var(--ebcm-surface);
	border: 1px solid var(--ebcm-line);
	border-radius: var(--ebcm-r);
	transition: transform var(--ebcm-t) var(--ebcm-ease), box-shadow var(--ebcm-t) var(--ebcm-ease), border-color var(--ebcm-t) var(--ebcm-ease);
}
.ebcm-cat-tile:hover {
	transform: translateY(-2px);
	border-color: var(--ebcm-line-2);
	box-shadow: var(--ebcm-shadow-sm);
}
.ebcm-cat-tile__name {
	font-size: 1rem;
	font-weight: 650;
	letter-spacing: -0.012em;
	color: var(--ebcm-ink);
}
.ebcm-cat-tile:hover .ebcm-cat-tile__name { color: var(--ebcm-blue-ink); }
.ebcm-cat-tile__count {
	font-family: var(--ebcm-font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	color: var(--ebcm-faint);
	font-feature-settings: "tnum" 1;
}

/* CTA band */
.ebcm-cta {
	position: relative;
	isolation: isolate;
	background: var(--ebcm-dark);
	color: var(--ebcm-on-dark-2);
	overflow: hidden;
	border-block: 0;
}
.ebcm-cta::after {
	content: "";
	position: absolute;
	z-index: -1;
	inline-size: 520px; block-size: 520px;
	inset-block-end: -320px;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--ebcm-red) 20%, transparent) 0%, transparent 68%);
	pointer-events: none;
}
.ebcm-cta__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ebcm-s6);
	text-align: center;
}
.ebcm-cta__title {
	font-size: var(--ebcm-fs-2xl);
	line-height: 1.18;
	color: #fff;
	margin: 0;
	max-inline-size: 32ch;
}

/* =========================================================
   12. PAGE HEADERS & BREADCRUMBS
   ========================================================= */
.ebcm-page-header {
	margin-block: var(--ebcm-s6) var(--ebcm-s7);
	padding-block-end: var(--ebcm-s5);
	border-block-end: 1px solid var(--ebcm-line);
}
.ebcm-page-header__title { font-size: var(--ebcm-fs-3xl); margin: 0 0 0.35rem; max-inline-size: 24ch; }
.ebcm-page-header__title span { color: var(--ebcm-blue-ink); }
.ebcm-page-header__desc { max-inline-size: var(--ebcm-measure); color: var(--ebcm-muted); font-size: var(--ebcm-fs-md); margin: 0; }
.ebcm-page-header .ebcm-searchform { max-inline-size: 460px; margin-block-start: var(--ebcm-s5); }

.ebcm-breadcrumbs { margin-block: var(--ebcm-s5) 0; font-size: var(--ebcm-fs-xs); }
.ebcm-breadcrumbs ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin: 0; padding: 0;
	color: var(--ebcm-faint);
	font-family: var(--ebcm-font-mono);
	letter-spacing: 0.02em;
}
.ebcm-breadcrumbs a { color: var(--ebcm-muted); }
.ebcm-breadcrumbs a:hover { color: var(--ebcm-blue-ink); }
.ebcm-breadcrumbs li:not(:last-child)::after { content: "/"; margin-inline-start: 0.4rem; color: var(--ebcm-line-3); }
.ebcm-breadcrumbs [aria-current="page"] { color: var(--ebcm-ink-2); }

/* =========================================================
   13. PROSE (block editor content)
   ========================================================= */
.ebcm-prose {
	font-size: var(--ebcm-fs-md);
	line-height: 1.72;
	color: var(--ebcm-ink-2);
}
.ebcm-prose > * { max-inline-size: var(--ebcm-measure); }
.ebcm-prose > .alignwide, .ebcm-prose > .alignfull,
.ebcm-prose > figure, .ebcm-prose > .wp-block-image,
.ebcm-prose > .wp-block-gallery, .ebcm-prose > .wp-block-table { max-inline-size: 100%; }
.ebcm-prose h2 { font-size: var(--ebcm-fs-xl); margin-block: 2em 0.6em; }
.ebcm-prose h3 { font-size: var(--ebcm-fs-lg); margin-block: 1.7em 0.5em; }
.ebcm-prose h4 { margin-block: 1.5em 0.4em; }
.ebcm-prose ul, .ebcm-prose ol { margin-block: 0 1.2em; }
.ebcm-prose li + li { margin-block-start: 0.3em; }
.ebcm-prose img, .ebcm-prose figure { border-radius: var(--ebcm-r); }
.ebcm-prose figcaption {
	font-size: var(--ebcm-fs-sm);
	color: var(--ebcm-muted);
	text-align: start;
	margin-block-start: 0.6rem;
}
/* Animated underline on prose links */
.ebcm-prose a:not(.ebcm-btn) {
	color: var(--ebcm-blue-ink);
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 100% 1px;
	padding-block-end: 1px;
	transition: background-size var(--ebcm-t) var(--ebcm-ease), color var(--ebcm-t-fast) var(--ebcm-ease);
}
.ebcm-prose a:not(.ebcm-btn):hover { background-size: 0% 1px; color: var(--ebcm-ink); }
.ebcm-prose blockquote {
	margin: var(--ebcm-s6) 0;
	padding: 0.25rem 0 0.25rem 1.35rem;
	border-inline-start: 2px solid var(--ebcm-blue);
	font-size: var(--ebcm-fs-lg);
	line-height: 1.5;
	letter-spacing: -0.012em;
	color: var(--ebcm-ink);
}
.ebcm-prose blockquote cite { display: block; margin-block-start: 0.6rem; font-size: var(--ebcm-fs-sm); font-style: normal; color: var(--ebcm-muted); }
.ebcm-prose pre {
	background: var(--ebcm-dark);
	color: #e8eaed;
	font-family: var(--ebcm-font-mono);
	font-size: 0.875rem;
	line-height: 1.6;
	padding: 1.1rem 1.25rem;
	border-radius: var(--ebcm-r);
	overflow-x: auto;
	tab-size: 2;
}
.ebcm-prose code { font-family: var(--ebcm-font-mono); font-size: 0.9em; }
.ebcm-prose :not(pre) > code {
	background: var(--ebcm-band);
	border: 1px solid var(--ebcm-line);
	padding: 0.1em 0.36em;
	border-radius: 5px;
	color: var(--ebcm-ink);
}
.ebcm-prose table { border-collapse: collapse; inline-size: 100%; font-size: var(--ebcm-fs-sm); }
.ebcm-prose th, .ebcm-prose td { border-block-end: 1px solid var(--ebcm-line); padding: 0.7rem 0.8rem; text-align: start; }
.ebcm-prose th { font-weight: 650; color: var(--ebcm-ink); background: var(--ebcm-band); }
.ebcm-page-links { margin-block-start: var(--ebcm-s6); font-size: var(--ebcm-fs-sm); font-weight: 600; }

/* =========================================================
   14. ARTICLE (blog single / page)
   ========================================================= */
.ebcm-article { margin-block: var(--ebcm-s6) var(--ebcm-s7); }
.ebcm-article--page { max-inline-size: 880px; }
.ebcm-article__header { margin-bottom: var(--ebcm-s6); }
.ebcm-article__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.65rem;
	margin-bottom: var(--ebcm-s4);
	font-size: var(--ebcm-fs-xs);
	color: var(--ebcm-muted);
}
.ebcm-article__title { font-size: var(--ebcm-fs-3xl); margin: 0; max-inline-size: 28ch; }
.ebcm-article__figure {
	margin: 0 0 var(--ebcm-s7);
	border-radius: var(--ebcm-r-lg);
	overflow: hidden;
	background: var(--ebcm-band-2);
}
.ebcm-article__figure img { inline-size: 100%; }
.ebcm-article__footer { margin-block-start: var(--ebcm-s7); padding-block-start: var(--ebcm-s5); border-block-start: 1px solid var(--ebcm-line); }
.ebcm-entry-terms { font-size: var(--ebcm-fs-sm); color: var(--ebcm-muted); margin: 0 0 0.4rem; }
.ebcm-entry-terms span { font-weight: 650; color: var(--ebcm-ink); }

/* Prev / next */
.ebcm-postnav, .ebcm-exhibit__nav {
	display: flex;
	justify-content: space-between;
	gap: var(--ebcm-s5);
	margin-block-start: var(--ebcm-s8);
	padding-block-start: var(--ebcm-s5);
	border-block-start: 1px solid var(--ebcm-line);
}
.ebcm-postnav__next, .ebcm-exhibit__next { margin-inline-start: auto; text-align: end; }
.ebcm-postnav a, .ebcm-exhibit__nav a {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	max-inline-size: 22rem;
}
.ebcm-navlbl { color: var(--ebcm-faint); }
.ebcm-navttl {
	font-size: var(--ebcm-fs-md);
	font-weight: 650;
	letter-spacing: -0.015em;
	color: var(--ebcm-ink);
	transition: color var(--ebcm-t-fast) var(--ebcm-ease);
}
.ebcm-postnav a:hover .ebcm-navttl, .ebcm-exhibit__nav a:hover .ebcm-navttl { color: var(--ebcm-blue-ink); }

.ebcm-related { margin-block: var(--ebcm-s9); }
.ebcm-related__title { font-size: var(--ebcm-fs-xl); margin-bottom: var(--ebcm-s6); }

/* =========================================================
   15. SINGLE EXHIBIT
   ========================================================= */
.ebcm-exhibit { margin-block: var(--ebcm-s6) var(--ebcm-s9); }
.ebcm-exhibit__header {
	display: grid;
	grid-template-columns: 1fr 1.06fr;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	align-items: center;
	margin-bottom: var(--ebcm-s9);
}
.ebcm-exhibit__intro .ebcm-chips { margin-bottom: var(--ebcm-s4); }
.ebcm-exhibit__title {
	font-size: var(--ebcm-fs-3xl);
	line-height: var(--ebcm-lh-tight);
	letter-spacing: -0.028em;
	margin: 0 0 0.5rem;
}
.ebcm-exhibit__subtitle {
	font-family: var(--ebcm-font-mono);
	font-size: var(--ebcm-fs-sm);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ebcm-blue-ink);
	margin: 0 0 var(--ebcm-s4);
}
.ebcm-exhibit__lead {
	font-size: var(--ebcm-fs-md);
	line-height: 1.62;
	color: var(--ebcm-muted);
	max-inline-size: 46ch;
	margin: 0;
}
.ebcm-exhibit__figure {
	margin: 0;
	border-radius: var(--ebcm-r-lg);
	overflow: hidden;
	background: var(--ebcm-band-2);
	box-shadow: var(--ebcm-shadow);
}
/* The figure keeps the 16:9 footprint the layout was built around, while the
   photograph itself is contained rather than cropped — any aspect ratio is
   shown whole and undistorted, letterboxed against the figure's own band. */
.ebcm-exhibit__figure a { display: block; }
.ebcm-exhibit__figure img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	aspect-ratio: 16 / 9;
	object-fit: contain;
	transition: transform var(--ebcm-t-slow) var(--ebcm-ease);
}
.ebcm-exhibit__figure a:hover img { transform: scale(1.02); }

.ebcm-exhibit__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}
.ebcm-exhibit__history h2, .ebcm-exhibit__extra h2 { font-size: var(--ebcm-fs-xl); margin-block-start: 0; }
.ebcm-exhibit__extra { margin-block-start: var(--ebcm-s9); padding-block-start: var(--ebcm-s6); border-block-start: 1px solid var(--ebcm-line); }
.ebcm-exhibit__extra h3 { font-size: var(--ebcm-fs-md); margin-block: var(--ebcm-s6) var(--ebcm-s3); }
.ebcm-exhibit__aside {
	position: sticky;
	inset-block-start: calc(var(--ebcm-header-h) + var(--ebcm-s5));
	display: flex;
	flex-direction: column;
	gap: var(--ebcm-s4);
}

/* Specifications panel */
.ebcm-specs {
	background: var(--ebcm-surface);
	border: 1px solid var(--ebcm-line);
	border-radius: var(--ebcm-r);
	padding: 1.25rem 1.35rem;
	box-shadow: var(--ebcm-shadow-xs);
}
.ebcm-specs__title {
	font-family: var(--ebcm-font-mono);
	font-size: var(--ebcm-fs-xs);
	font-weight: 500;
	letter-spacing: var(--ebcm-track-wide);
	text-transform: uppercase;
	color: var(--ebcm-muted);
	margin: 0 0 var(--ebcm-s4);
	padding-block-end: var(--ebcm-s3);
	border-block-end: 1px solid var(--ebcm-line);
}
.ebcm-specs__list { margin: 0; }
.ebcm-specs__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ebcm-s4);
	padding-block: 0.55rem;
	border-block-end: 1px solid var(--ebcm-line);
}
.ebcm-specs__row:last-child { border-block-end: 0; padding-block-end: 0; }
.ebcm-specs__row dt { margin: 0; font-size: var(--ebcm-fs-sm); color: var(--ebcm-muted); }
.ebcm-specs__row dd {
	margin: 0;
	font-family: var(--ebcm-font-mono);
	font-size: 0.83rem;
	font-weight: 500;
	color: var(--ebcm-ink);
	text-align: end;
	font-feature-settings: "tnum" 1;
}

/* Gallery */
.ebcm-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
	gap: var(--ebcm-s2);
	margin-block: var(--ebcm-s7);
}
.ebcm-gallery__item {
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--ebcm-r-sm);
	border: 1px solid var(--ebcm-line);
	background: var(--ebcm-band-2);
	transition: border-color var(--ebcm-t-fast) var(--ebcm-ease), box-shadow var(--ebcm-t) var(--ebcm-ease);
}
.ebcm-gallery__item img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--ebcm-t-slow) var(--ebcm-ease); }
.ebcm-gallery__item:hover { border-color: var(--ebcm-line-3); box-shadow: var(--ebcm-shadow-sm); }
.ebcm-gallery__item:hover img { transform: scale(1.05); }

.ebcm-refs { list-style: none; padding: 0; margin: 0; }
.ebcm-refs li { padding-block: 0.35rem; }
.ebcm-refs li + li { border-block-start: 1px solid var(--ebcm-line); }

/* =========================================================
   16. SIDEBAR & WIDGETS
   ========================================================= */
.ebcm-sidebar { display: flex; flex-direction: column; gap: var(--ebcm-s5); }
.widget {
	background: var(--ebcm-surface);
	border: 1px solid var(--ebcm-line);
	border-radius: var(--ebcm-r);
	padding: 1.15rem 1.25rem;
}
.widget__title {
	font-family: var(--ebcm-font-mono);
	font-size: var(--ebcm-fs-xs);
	font-weight: 500;
	letter-spacing: var(--ebcm-track-wide);
	text-transform: uppercase;
	color: var(--ebcm-muted);
	margin: 0 0 var(--ebcm-s3);
	padding-block-end: var(--ebcm-s3);
	border-block-end: 1px solid var(--ebcm-line);
}
.widget ul { list-style: none; padding: 0; margin: 0; font-size: var(--ebcm-fs-sm); }
.widget li { padding-block: 0.45rem; }
.widget li + li { border-block-start: 1px solid var(--ebcm-line); }
.widget a { color: var(--ebcm-ink-2); }
.widget a:hover { color: var(--ebcm-blue-ink); }
.widget select { font-size: var(--ebcm-fs-sm); }

/* =========================================================
   17. COMMENTS
   ========================================================= */
.ebcm-comments { margin-block-start: var(--ebcm-s9); padding-block-start: var(--ebcm-s7); border-block-start: 1px solid var(--ebcm-line); }
.ebcm-comments__title, .ebcm-comments__reply { font-size: var(--ebcm-fs-xl); margin-bottom: var(--ebcm-s5); }
.ebcm-comment-list, .ebcm-comment-list ol { list-style: none; padding: 0; margin: 0; }
.ebcm-comment-list .children { padding-inline-start: clamp(1rem, 4vw, 2.5rem); }
.ebcm-comment-list .comment-body { padding-block: var(--ebcm-s5); border-block-end: 1px solid var(--ebcm-line); }
.ebcm-comment-list .comment-author img { border-radius: 50%; }
.ebcm-comments__closed { color: var(--ebcm-muted); font-size: var(--ebcm-fs-sm); }
.comment-form { display: grid; gap: var(--ebcm-s4); max-inline-size: 680px; }
.comment-form p { margin: 0; }

/* =========================================================
   18. 404
   ========================================================= */
.ebcm-404 { max-inline-size: 620px; margin-inline: auto; padding-block: clamp(3.5rem, 10vw, 7rem); text-align: center; }
.ebcm-404__code {
	font-family: var(--ebcm-font-mono);
	font-weight: 700;
	font-size: clamp(3.5rem, 13vw, 7rem);
	line-height: 1;
	letter-spacing: -0.04em;
	margin: 0 0 var(--ebcm-s5);
}
.ebcm-404__title { font-size: var(--ebcm-fs-2xl); margin: 0 0 0.5rem; }
.ebcm-404__text { color: var(--ebcm-muted); margin: 0 auto var(--ebcm-s6); max-inline-size: 44ch; }
.ebcm-404__search { max-inline-size: 400px; margin-inline: auto; margin-block-end: var(--ebcm-s6); }
.ebcm-404__actions { display: flex; gap: var(--ebcm-s3); justify-content: center; flex-wrap: wrap; }

/* =========================================================
   19. FOOTER
   ========================================================= */
.ebcm-footer {
	background: var(--ebcm-dark);
	color: var(--ebcm-on-dark-3);
	margin-block-start: var(--ebcm-s10);
	font-size: var(--ebcm-fs-sm);
}
.ebcm-footer a { color: var(--ebcm-on-dark-2); }
.ebcm-footer a:hover { color: #fff; }
.ebcm-footer__top {
	max-inline-size: var(--ebcm-wrap);
	margin-inline: auto;
	padding: clamp(2.75rem, 6vw, 4.5rem) var(--ebcm-gutter);
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
}
.ebcm-footer__wordmark {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	color: #fff;
	font-size: 1.02rem;
	font-weight: 650;
	letter-spacing: -0.015em;
}
.ebcm-footer__mark {
	font-family: var(--ebcm-font-mono);
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: -0.04em;
	background: #fff;
	padding: 0.28rem 0.38rem;
	border-radius: 6px;
}
.ebcm-footer__tagline { color: var(--ebcm-on-dark-3); margin: var(--ebcm-s4) 0 var(--ebcm-s3); }
.ebcm-footer__desc { max-inline-size: 46ch; line-height: 1.62; margin: 0; }
.footer__heading { color: #fff; margin: 0 0 var(--ebcm-s4); }
.ebcm-footer__widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
.ebcm-footer__widgets .widget { background: transparent; border: 0; padding: 0; }
.ebcm-footer__widgets .widget__title {
	color: #fff;
	border-block-end-color: var(--ebcm-line-on-dark);
}
.ebcm-footer__widgets .widget li + li { border-block-start-color: var(--ebcm-line-on-dark); }
.ebcm-footer__widgets .widget a { color: var(--ebcm-on-dark-2); }
.ebcm-footer__menu, .ebcm-footer__nav ul { list-style: none; padding: 0; margin: 0; }
.ebcm-footer__menu li, .ebcm-footer__nav li { padding-block: 0.3rem; }

/* Social row with animated underline */
.ebcm-social { list-style: none; display: flex; flex-wrap: wrap; gap: var(--ebcm-s4); padding: 0; margin: var(--ebcm-s6) 0 0; }
.ebcm-social a {
	font-weight: 600;
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0% 1px;
	padding-block-end: 2px;
	transition: background-size var(--ebcm-t) var(--ebcm-ease), color var(--ebcm-t-fast) var(--ebcm-ease);
}
.ebcm-social a:hover { background-size: 100% 1px; }

.ebcm-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ebcm-s4);
	flex-wrap: wrap;
	max-inline-size: var(--ebcm-wrap);
	margin-inline: auto;
	padding: var(--ebcm-s5) var(--ebcm-gutter);
	border-block-start: 1px solid var(--ebcm-line-on-dark);
}
.ebcm-copyright { margin: 0; font-size: var(--ebcm-fs-xs); color: var(--ebcm-on-dark-3); }
.ebcm-to-top {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 38px; block-size: 38px;
	background: transparent;
	border: 1px solid var(--ebcm-line-on-dark-2);
	border-radius: var(--ebcm-r-sm);
	color: #fff;
	font-size: 0.95rem;
	cursor: pointer;
	transition: background var(--ebcm-t-fast) var(--ebcm-ease), border-color var(--ebcm-t-fast) var(--ebcm-ease), transform var(--ebcm-t) var(--ebcm-ease);
}
.ebcm-to-top:hover { background: #fff; border-color: #fff; color: var(--ebcm-ink); transform: translateY(-2px); }

/* =========================================================
   20. LIGHTBOX (JS-injected markup)
   ========================================================= */
.ebcm-lightbox { background: rgba(8, 9, 11, 0.94) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ebcm-lightbox img { box-shadow: var(--ebcm-shadow-lg); border-radius: var(--ebcm-r) !important; }
.ebcm-lightbox button { border-radius: var(--ebcm-r-sm) !important; transition: background var(--ebcm-t-fast) var(--ebcm-ease); }

/* =========================================================
   21. RESPONSIVE
   ========================================================= */
@media (max-width: 1080px) {
	.ebcm-layout { grid-template-columns: minmax(0, 1fr); }
	.ebcm-sidebar { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
	.ebcm-exhibit__grid { grid-template-columns: minmax(0, 1fr); }
	.ebcm-exhibit__aside { position: static; }
	.ebcm-specs__row dd { text-align: start; }
	.ebcm-footer__top { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
	.ebcm-hero__inner { grid-template-columns: 1fr; }
	.ebcm-hero__media { order: -1; max-inline-size: 560px; }
	.ebcm-hero__title { max-inline-size: 24ch; }
	.ebcm-exhibit__header { grid-template-columns: 1fr; gap: var(--ebcm-s6); margin-bottom: var(--ebcm-s7); }
	.ebcm-exhibit__figure { order: -1; }
}

/* Mobile navigation */
@media (max-width: 860px) {
	.ebcm-header { position: sticky; }
	.ebcm-menu-toggle { display: inline-flex; order: 3; }
	.ebcm-wordmark__logo { max-block-size: 38px; max-inline-size: 150px; }
	.ebcm-header__actions { display: none; }
	.ebcm-nav {
		order: 4;
		position: absolute;
		inset-inline: 0;
		inset-block-start: 100%;
		margin: 0;
		background: var(--ebcm-dark);
		border-block-end: 1px solid var(--ebcm-line-on-dark);
		max-block-size: 0;
		overflow: hidden;
		transition: max-block-size var(--ebcm-t-slow) var(--ebcm-ease);
	}
	.ebcm-nav.is-open { max-block-size: min(78vh, 620px); overflow-y: auto; overscroll-behavior: contain; }
	.ebcm-menu { flex-direction: column; align-items: stretch; gap: 0; padding: var(--ebcm-s2) var(--ebcm-gutter) var(--ebcm-s5); }
	.ebcm-menu > li { border-block-end: 1px solid var(--ebcm-line-on-dark); }
	.ebcm-menu > li:last-child { border-block-end: 0; }
	.ebcm-menu .menu-link { justify-content: space-between; padding: 0.95rem 0.25rem; font-size: 1.02rem; border-radius: 0; }
	.ebcm-menu > li > .menu-link::after { display: none; }
	.ebcm-menu > .current-menu-item > .menu-link { color: #fff; box-shadow: inset 2px 0 0 var(--ebcm-nav-accent, var(--ebcm-blue)); padding-inline-start: 0.75rem; }
	/* The .submenu-toggle button owns the arrow on touch, so the decorative
	   chevron inside the link is hidden to avoid showing two. */
	.ebcm-caret { display: none; }
	.submenu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		inset-block-start: 0;
		inset-inline-end: 0;
		min-inline-size: 48px;
		min-block-size: 48px;
		padding: 0;
	}
	/* An open parent keeps its positional RGB bar visible on the left. */
	.ebcm-menu > li.submenu-open > .menu-link {
		color: #fff;
		box-shadow: inset 2px 0 0 var(--ebcm-nav-accent, var(--ebcm-blue));
		padding-inline-start: 0.75rem;
	}
	.ebcm-menu .sub-menu .menu-link { min-block-size: 44px; }
	/* Keep the label clear of the absolutely positioned toggle button. */
	.ebcm-menu > .menu-item-has-children > .menu-link { padding-inline-end: 52px; }
	.ebcm-menu .sub-menu {
		position: static;
		display: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		min-inline-size: 0;
		background: transparent;
		border: 0;
		box-shadow: none;
		padding: 0 0 var(--ebcm-s3) var(--ebcm-s4);
	}
	.ebcm-menu li.submenu-open > .sub-menu { display: block; }
	.ebcm-menu .sub-menu .menu-link { color: var(--ebcm-on-dark-3); font-size: 0.95rem; padding-block: 0.6rem; }
	.ebcm-menu .sub-menu .menu-link:hover { background: transparent; color: #fff; }
}

@media (max-width: 760px) {
	:root { --ebcm-header-h: 60px; }
	.ebcm-row { grid-template-columns: 168px minmax(0, 1fr); }
	.ebcm-row__body { padding: 1rem 1.1rem; }
	.ebcm-row__specs { grid-template-columns: 1fr 1fr; }
	.ebcm-viewtoggle { margin-inline-start: 0; }
	.ebcm-filters__bar { gap: var(--ebcm-s3); }
}

@media (max-width: 560px) {
	.ebcm-row { grid-template-columns: 1fr; }
	.ebcm-row__media img { aspect-ratio: 16 / 9; }
	.ebcm-row__specs { grid-template-columns: 1fr; }
	.ebcm-filters { padding: 1rem; }
	.ebcm-filters__row { flex-direction: column; align-items: stretch; }
	.ebcm-field select, .ebcm-field input { min-inline-size: 0; inline-size: 100%; }
	.ebcm-filters__row .ebcm-btn { inline-size: 100%; }
	.ebcm-hero__actions .ebcm-btn,
	.ebcm-404__actions .ebcm-btn,
	.ebcm-cta__inner .ebcm-btn { inline-size: 100%; }
	.ebcm-postnav, .ebcm-exhibit__nav { flex-direction: column; }
	.ebcm-postnav__next, .ebcm-exhibit__next { margin-inline-start: 0; text-align: start; }
	.ebcm-results--grid { grid-template-columns: 1fr; }
	.ebcm-post-grid { grid-template-columns: 1fr; }
	.ebcm-section__head { align-items: flex-start; }
}

/* =========================================================
   22. MOTION PREFERENCES & PRINT
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.ebcm-card:hover, .ebcm-post-card:hover, .ebcm-cat-tile:hover,
	.ebcm-btn:hover, .ebcm-to-top:hover { transform: none; }
	.ebcm-card:hover .ebcm-card__media img,
	.ebcm-post-card:hover .ebcm-post-card__media img,
	.ebcm-row:hover .ebcm-row__media img,
	.ebcm-gallery__item:hover img { transform: none; }
}

@media print {
	.ebcm-header, .ebcm-footer, .ebcm-filters, .ebcm-viewtoggle,
	.ebcm-pagination, .ebcm-loadmore-wrap, .ebcm-to-top, .skip-link { display: none !important; }
	body { background: #fff; color: #000; font-size: 11pt; }
	.ebcm-card, .ebcm-row, .widget, .ebcm-specs { border-color: #ccc; box-shadow: none; }
}