/* ==========================================================================
   Bumu Art Gallery — theme

   An editorial museum design: one opening image, a serif statement set large
   in sentence case, and generous white space. Interface text is a neutral
   sans so the serif stays reserved for voice.

   Everything hangs off the tokens in base.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */

.wrap {
	width: 100%;
	max-width: calc(var(--wrap) + (var(--gutter) * 2));
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.section {
	padding: 52px 0;
}

@media (min-width: 64em) {
	.section { padding: 72px 0; }
}

/* Artworks collection and records. */
.artworks-archive__head { padding: calc(var(--header-h, 110px) + 42px) 0 clamp(55px, 7vw, 88px); border-bottom: 1px solid var(--ink); }
.artworks-archive__head-grid { display: grid; gap: 22px; align-items: end; }
.artworks-archive__head h1 { margin: 0; font-family: var(--serif); font-size: clamp(4.8rem, 9vw, 9rem); font-weight: 400; line-height: .76; letter-spacing: -.06em; }
.artworks-archive__head-grid > p:last-child { max-width: 32ch; margin: 0; line-height: 1.6; }
.artworks-archive__body,
.related-artworks { padding: clamp(48px, 6vw, 82px) 0; }
.related-artworks { border-top: 1px solid var(--rule); }
.related-artworks__head { display: flex; justify-content: space-between; gap: 24px; align-items: baseline; padding-bottom: 18px; margin-bottom: 36px; border-bottom: 1px solid var(--ink); }
.artwork-grid { display: grid; gap: 52px 24px; }
.artwork-card,
.artwork-card > a { height: 100%; }
.artwork-card > a { display: flex; flex-direction: column; }
.artwork-card__image { position: relative; overflow: hidden; aspect-ratio: 1 / 1; margin-bottom: 16px; background: var(--paper-alt); }
.artwork-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s ease; }
.artwork-card:hover img { transform: scale(1.02); }
.artwork-card__tag {
	position: absolute;
	top: 12px;
	right: 12px;
	padding: 5px 9px;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	font-family: var(--header-sans);
	font-size: .64rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink);
	border: 1px solid rgba(0, 0, 0, 0.08);
	transition: background .2s ease, color .2s ease, border-color .2s ease;
	z-index: 1;
}
.artwork-card:hover .artwork-card__tag {
	background: var(--ink);
	color: #fff;
	border-color: var(--ink);
}
.artwork-card p { margin: 0 0 9px; font-family: var(--header-sans); font-size: .66rem; letter-spacing: .09em; text-transform: uppercase; color: var(--soft); }
.artwork-card h2,
.artwork-card h3 {
	margin: 0 0 13px;
	font-family: var(--serif);
	font-size: clamp(2rem, 3vw, 3.2rem);
	font-weight: 400;
	line-height: .95;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}
.artwork-card__foot {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin-top: auto;
}
.artwork-card__price {
	font-family: var(--header-sans);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--soft);
}
.artwork-detail__hero { padding: calc(var(--header-h, 110px) + 24px) 0 clamp(48px, 6vw, 76px); }
.artwork-detail__utility { display: flex; justify-content: space-between; gap: 24px; padding-bottom: 22px; border-bottom: 1px solid var(--ink); font-family: var(--header-sans); font-size: .67rem; letter-spacing: .1em; text-transform: uppercase; }
.artwork-detail__grid { display: grid; gap: 38px; align-items: center; padding-top: 34px; }
.artwork-detail__image { margin: 0; }
.artwork-detail__image { display: grid; place-items: center; padding: clamp(20px, 3vw, 46px); background: var(--paper-alt); }
.artwork-detail__image > a { position: relative; display: grid; place-items: center; width: 100%; }
.artwork-detail__image img { display: block; width: auto; max-width: 100%; height: auto; max-height: min(68vh, 650px); object-fit: contain; }
.artwork-detail__image > a > span { position: absolute; right: 12px; bottom: 12px; padding: 8px 11px; background: rgba(255,255,255,.94); font-family: var(--header-sans); font-size: .63rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.artwork-detail__image figcaption { margin-top: 11px; font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
.artwork-detail__summary h1 { max-width: 12ch; margin: 14px 0 18px; font-family: var(--serif); font-size: clamp(3.2rem, 5vw, 5.2rem); font-weight: 400; line-height: .94; letter-spacing: -.045em; }
.artwork-detail__artist { margin: 0 0 22px; font-family: var(--serif); font-size: 1.55rem; }
.artwork-detail__price-badge {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 22px;
	padding: 8px 14px;
	background: var(--paper-alt);
	border-left: 2px solid var(--accent);
}
.artwork-detail__price-label {
	font-family: var(--header-sans);
	font-size: .66rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--soft);
}
.artwork-detail__price-value {
	font-family: var(--header-sans);
	font-size: .95rem;
	font-weight: 600;
	color: var(--ink);
}
.artwork-detail__summary > p:last-child { max-width: 34ch; line-height: 1.65; }
.artwork-detail__record { padding: clamp(46px, 6vw, 78px) 0; border-top: 1px solid var(--rule); }
.artwork-detail__record-grid { display: grid; gap: 54px; }
.artwork-detail__record dl { margin: 0; border-top: 1px solid var(--ink); }
.artwork-detail__record dl > div { display: grid; grid-template-columns: 110px 1fr; gap: 22px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.artwork-detail__record dt { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
.artwork-detail__record dd { margin: 0; }
.artwork-lightbox { width: 100vw; max-width: none; height: 100vh; max-height: none; padding: 0; border: 0; background: #111; color: #fff; }
.artwork-lightbox::backdrop { background: rgba(0,0,0,.88); }
.artwork-lightbox__close { position: fixed; top: 22px; right: 24px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; color: #fff; }
.artwork-lightbox__close:hover { background: #fff; color: #111; }
.artwork-lightbox__stage { display: grid; place-items: center; width: 100%; min-height: 100%; padding: 70px 30px 38px; }
.artwork-lightbox__stage img { display: block; max-width: 94vw; max-height: 84vh; width: auto; height: auto; object-fit: contain; }
.artwork-lightbox__stage p { align-self: end; margin: 16px 0 0; font-family: var(--header-sans); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.68); }
@media (min-width: 48em) { .artwork-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) {
	.artworks-archive__head-grid { grid-template-columns: 2fr 7fr 3fr; }
	.artworks-archive__head h1 { grid-column: 2; }
	.artwork-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.artwork-detail__grid { grid-template-columns: minmax(0, 6fr) minmax(320px, 5fr); gap: 6vw; }
	.artwork-detail__record-grid { grid-template-columns: 4fr 7fr 1fr; }
}

.section--alt { background: var(--paper-alt); }
.section--ink { background: var(--ink); color: rgba(255, 255, 255, 0.78); }

.rule {
	height: 1px;
	margin: 0;
	border: 0;
	background: var(--rule);
}

/* --------------------------------------------------------------------------
   Type

   Display is a high-contrast serif in sentence case — the single biggest
   departure from the uppercase geometric idiom, and what makes the page read
   as a museum rather than a portal.
   -------------------------------------------------------------------------- */

.display,
.h2,
.h3 {
	font-family: var(--serif);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.015em;
	color: var(--ink);
}

.display { font-size: clamp(2.25rem, 4.6vw, 4.25rem); }
.h2 { font-size: clamp(1.75rem, 3vw, 2.75rem); }
.h3 { font-size: clamp(1.125rem, 1.5vw, 1.4375rem); line-height: 1.2; }

.eyebrow {
	font-family: var(--sans);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--soft);
}

.lede {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--body);
}

@media (min-width: 64em) {
	.lede { font-size: 1.1875rem; }
}

.body { font-size: 0.9375rem; line-height: 1.65; color: var(--body); }

.section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 36px;
}

.section-head__intro { margin-top: 10px; max-width: 48em; }

/* --------------------------------------------------------------------------
   Buttons and pills
   -------------------------------------------------------------------------- */

.btn {
	display: inline-block;
	padding: 14px 26px;
	border: 1px solid var(--ink);
	font-family: var(--sans);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1;
	color: var(--ink);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.18s, color 0.18s, border-color 0.18s;
}

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

.btn--accent:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

.btn--outline { background: transparent; }
.btn--outline:hover { background: var(--ink); color: #fff; }
.btn--inverse { border-color: rgba(255,255,255,.75); color: #fff; }
.btn--inverse:hover { background: #fff; border-color: #fff; color: var(--ink); }

.pill {
	display: inline-block;
	padding: 7px 14px;
	border: 1px solid var(--mark, currentColor);
	color: var(--mark, inherit);
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	transition: background-color 0.18s, color 0.18s;
}

.pill:hover {
	background: var(--mark, var(--ink));
	color: var(--mark-contrast, #fff);
}

.pill--accent {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

.pill--accent:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }

.more {
	display: inline-block;
	font-family: var(--sans);
	font-size: 0.9375rem;
	color: var(--ink);
	border-bottom: 1px solid var(--ink);
	padding-bottom: 2px;
	transition: color 0.18s, border-color 0.18s;
}

.more:hover { color: var(--accent); border-color: var(--accent); }

/* --------------------------------------------------------------------------
   Masthead

   A single row for wordmark, navigation and utilities. Over the opening image
   on the front page, on paper everywhere else.
   -------------------------------------------------------------------------- */

/* The header is sticky everywhere. On the front page it starts transparent
   over the opening image and is pulled out of flow by a negative margin, so
   the image still begins at the top of the page.

   It turns solid — white ground, red wordmark, ink marks — in three cases:
   hovering the masthead, focusing into it by keyboard, and scrolling away
   from the top. `.is-solid` is set by main.js for that last one. */

.site-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--paper);
	border-bottom: 1px solid var(--rule);
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

.site-header--overlay {
	background: transparent;
	border-bottom-color: transparent;
	margin-bottom: calc(var(--header-h, 110px) * -1);
}

.site-header--overlay.is-solid,
.site-header--overlay:hover,
.site-header--overlay:focus-within {
	background: var(--paper);
	border-bottom-color: var(--rule);
}

/* Two locals carry the whole colour flip: --mark for interface marks and
   --wordmark for the logotype, which is red on paper and white on artwork. */
.masthead {
	--mark: var(--ink);
	--mark-contrast: #fff;
	--wordmark: var(--accent);

	--logo-h: 34px;

	/* The drawer is a child of .site-header, so the header's own z-index does
	   not separate them — the masthead has to outrank it from inside that
	   stacking context, or the open panel buries the burger that closes it. */
	position: relative;
	z-index: 60;

	display: flex;
	align-items: center;
	gap: clamp(14px, 1.6vw, 28px);
	width: 100%;
	max-width: calc(var(--wrap) + (var(--gutter) * 2));
	margin: 0 auto;
	padding: 11px var(--gutter);
	color: var(--mark);
	font-family: var(--header-sans);
	transition: color 0.25s ease;
}

.site-header--overlay .masthead {
	--mark: #fff;
	--mark-contrast: var(--ink);
	--wordmark: #fff;
}

.site-header--overlay.is-solid .masthead,
.site-header--overlay:hover .masthead,
.site-header--overlay:focus-within .masthead {
	--mark: var(--ink);
	--mark-contrast: #fff;
	--wordmark: var(--accent);
}

.masthead__logo {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
}

/* The logo file is 337x183; without a height cap it alone made the masthead
   over 200px tall. */
.masthead__logo-img {
	width: auto;
	height: var(--logo-h);
	max-height: var(--logo-h);
	object-fit: contain;
	transition: filter .25s ease;
}

@media (min-width: 64em) { .masthead { --logo-h: 44px; } }

/* A single-colour logotype cannot inherit --wordmark, so it is inverted for
   the transparent state over the opening image and restored with the flip. */
.site-header--overlay .masthead__logo-img { filter: brightness(0) invert(1); }

.site-header--overlay.is-solid .masthead__logo-img,
.site-header--overlay:hover .masthead__logo-img,
.site-header--overlay:focus-within .masthead__logo-img { filter: none; }

.wordmark {
	display: block;
	color: var(--wordmark);
	transition: color 0.25s ease;
	font-family: var(--serif);
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 0.94;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.wordmark__line { display: block; }

/* The second line is letterspaced to the width of the first, which is the
   trick that makes a two-line wordmark read as a mark rather than a heading. */
.wordmark__line--wide { font-size: 0.6875rem; letter-spacing: 0.22em; }

@media (min-width: 64em) {
	.wordmark { font-size: 2rem; }
	.wordmark__line--wide { font-size: 0.8125rem; letter-spacing: 0.24em; }
}

.masthead__utility {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 10px;
}

.masthead__utility .language-switch { margin-right: 6px; font-size: 0.8125rem; }

/* Eight nav items plus three pills do not fit a 1440px row; the secondary
   calls to action appear only once there is width for them. */
@media (max-width: 81.24em) {
	.masthead__utility .pill:not(.pill--accent) { display: none; }
}

@media (max-width: 73.74em) {
	.masthead__utility .language-switch { display: none; }
}

.masthead__bar {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	align-items: center;
	gap: 18px;
}

.masthead__nav { flex: 1; display: none; }

@media (min-width: 64em) { .masthead__nav { display: block; } }

/* Below the nav breakpoint there is no flexible child left to push the
   controls over, so the bar aligns them itself. */
@media (max-width: 63.99em) {
	.masthead__bar { justify-content: flex-end; }
}

.masthead__menu { display: flex; align-items: center; gap: clamp(15px, 1.55vw, 26px); }
.masthead__menu > li { position: relative; }

.masthead__menu > li > a {
	display: block;
	padding: 8px 0;
	font-family: var(--header-sans);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	transition: opacity 0.18s;
}

.masthead__menu > li > a:hover { opacity: 0.65; }

.masthead__menu .sub-menu {
	position: absolute;
	top: 100%;
	left: -18px;
	z-index: 5;
	min-width: 232px;
	padding: 10px 0;
	background: var(--paper);
	border: 1px solid var(--rule);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}

.masthead__menu > li:hover .sub-menu,
.masthead__menu > li:focus-within .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.masthead__menu .sub-menu a {
	display: block;
	padding: 9px 18px;
	font-size: 0.9375rem;
	font-family: var(--header-sans);
	color: var(--body);
	white-space: nowrap;
}

.masthead__utility,
.nav-drawer,
.search-overlay { font-family: var(--header-sans); }

.masthead__menu .sub-menu a:hover { background: var(--paper-alt); color: var(--ink); }

.masthead__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: inherit;
	margin-left: 0;
}

.masthead__icon svg { width: 17px; height: 17px; fill: currentColor; }
.masthead__icon:hover { opacity: 0.65; }

.masthead__burger { position: relative; width: 24px; height: 16px; color: inherit; }

@media (min-width: 64em) { .masthead__burger { display: none; } }

.masthead__burger span,
.masthead__burger::before,
.masthead__burger::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	transition: transform 0.25s, opacity 0.2s;
}

.masthead__burger::before { top: 0; }
.masthead__burger span { top: 7px; }
.masthead__burger::after { top: 14px; }

.masthead__burger[aria-expanded="true"] span { opacity: 0; }
.masthead__burger[aria-expanded="true"]::before { transform: translateY(7px) rotate(45deg); }
.masthead__burger[aria-expanded="true"]::after { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Opening image and statement
   -------------------------------------------------------------------------- */

.stage {
	position: relative;
	background: var(--ink);
	height: 62vh;
	min-height: 380px;
}

@media (min-width: 64em) {
	.stage { height: 72vh; max-height: 760px; }
}

.stage__media { position: absolute; inset: 0; overflow: hidden; }

/* Elementor's frontend stylesheet declares `.elementor img { height: auto }`
   and loads after the theme at identical specificity, so it wins — collapsing
   any image meant to cover a fixed box. On a narrow screen that left the hero
   photograph 260px tall inside a 560px stage, with black beneath it. The extra
   class here out-ranks it. */
.stage .stage__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Only enough scrim to keep the masthead legible over any photograph. */
.stage__media::after {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 220px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
}

.stage__slides,
.stage__slide { position: absolute; inset: 0; }

.stage__slide {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.9s ease, visibility 0.9s ease;
}

.stage__slide.is-active { z-index: 1; opacity: 1; visibility: visible; }

.stage__slide .stage__media::after {
	height: 100%;
	background: linear-gradient(90deg, rgba(12, 12, 12, 0.62) 0%, rgba(12, 12, 12, 0.18) 52%, rgba(12, 12, 12, 0.08) 100%);
}

.stage__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	height: 100%;
	/* Was a flat 150px, sized for a masthead that is no longer 110px tall. */
	padding-top: calc(var(--header-h, 66px) + 58px);
	padding-bottom: 88px;
	color: #fff;
}

.stage__kicker {
	margin: 0 0 12px;
	font-family: var(--sans);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.stage__title {
	max-width: 12ch;
	margin: 0 0 28px;
	font-family: var(--serif);
	font-size: clamp(3rem, 7vw, 7.5rem);
	font-weight: 400;
	line-height: 0.88;
	letter-spacing: -0.035em;
}

.stage__cta { color: #fff; border: 1px solid rgba(255, 255, 255, 0.8); }
.stage__cta:hover { color: var(--ink); background: #fff; }

.stage__controls {
	position: absolute;
	right: 0;
	bottom: 30px;
	left: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	color: #fff;
}

.stage__arrow {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(255, 255, 255, 0.65);
	border-radius: 50%;
	font-size: 1.1rem;
}

.stage__arrow:hover { color: var(--ink); background: #fff; }
.stage__dots { display: flex; gap: 7px; margin: 0 3px; }
.stage__dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.45); }
.stage__dot.is-active { background: #fff; transform: scale(1.35); }

@media (max-width: 47.99em) {
	.stage__content { padding-bottom: 96px; }
	.stage__title { font-size: clamp(2.9rem, 14vw, 5rem); }
	.stage__controls { justify-content: flex-start; bottom: 26px; }
}

.statement { padding: 52px 0 0; }

.statement__grid {
	display: grid;
	gap: 28px;
	align-items: end;
	padding-bottom: 44px;
	border-bottom: 1px solid var(--rule);
}

@media (min-width: 64em) {
	.statement { padding-top: 72px; }
	.statement__grid { grid-template-columns: 1fr auto; gap: 48px; padding-bottom: 56px; }
}

.statement__title { max-width: 18ch; }

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

/* Editorial bridge: concise premise followed by three clear ways in. */
.curatorial-intro { padding: clamp(52px, 6vw, 86px) 0 0; background: var(--paper); }
.curatorial-intro__top { display: grid; gap: 28px; align-items: start; }
.curatorial-intro__index { margin: 0; font-family: var(--header-sans); font-size: .7rem; letter-spacing: .14em; color: var(--accent); }
.curatorial-intro__lead .eyebrow { margin-bottom: 18px; }
.curatorial-intro__lead h2 { max-width: 9ch; margin: 0; font-family: var(--serif); font-size: clamp(4rem, 9vw, 9.25rem); font-weight: 400; line-height: .82; letter-spacing: -.055em; color: var(--ink); }
.curatorial-intro__note { max-width: 31ch; margin: 0; padding-top: 4px; font-size: 1rem; line-height: 1.65; color: var(--body); }

.curatorial-intro__paths { display: grid; margin-top: clamp(42px, 6vw, 76px); border-top: 1px solid var(--ink); }
.curatorial-intro__paths a { display: grid; grid-template-columns: 34px 1fr auto; gap: 18px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--rule); transition: color .2s, padding-left .2s; }
.curatorial-intro__paths a:hover { padding-left: 8px; color: var(--accent); }
.curatorial-intro__paths span { font-family: var(--header-sans); font-size: .66rem; letter-spacing: .1em; color: var(--soft); }
.curatorial-intro__paths strong { font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 3.2rem); font-weight: 400; line-height: 1; }
.curatorial-intro__paths i { font-family: var(--header-sans); font-size: 1.15rem; font-style: normal; transition: transform .2s; }
.curatorial-intro__paths a:hover i { transform: translate(3px, -3px); }

@media (min-width: 64em) {
	.curatorial-intro__top { grid-template-columns: 1fr 7fr 3fr; gap: 3vw; }
	.curatorial-intro__note { margin-top: 4.2rem; }
	.curatorial-intro__paths { grid-template-columns: repeat(3, 1fr); }
	.curatorial-intro__paths a { padding: 28px 22px 28px 0; border-right: 1px solid var(--rule); }
	.curatorial-intro__paths a + a { padding-left: 24px; }
	.curatorial-intro__paths a:hover { padding-left: 8px; }
	.curatorial-intro__paths a + a:hover { padding-left: 32px; }
}

/* Curated homepage: composed pages rather than interchangeable card grids. */
.editorial-exhibitions,
.artist-index,
.showcase-wall { padding: clamp(56px, 7vw, 100px) 0; }

.editorial-heading {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: end;
	gap: 12px 30px;
	margin-bottom: clamp(34px, 4vw, 58px);
}

.editorial-heading .eyebrow { grid-column: 1 / -1; }
.editorial-heading h2 { margin: 0; font-family: var(--serif); font-size: clamp(4rem, 9vw, 9rem); font-weight: 400; line-height: 0.78; letter-spacing: -0.055em; }

.exhibition-lead { display: grid; gap: 34px; align-items: end; }
.exhibition-lead__image { display: block; min-height: 440px; overflow: hidden; background: var(--paper-alt); }
.exhibition-lead__image img { width: 100%; height: min(68vw, 780px); object-fit: cover; transition: transform 0.8s cubic-bezier(.2,.7,.2,1); }
.exhibition-lead__image:hover img { transform: scale(1.015); }
.exhibition-lead__copy { max-width: 32rem; padding-bottom: 4px; }
.exhibition-lead__copy h3 { margin: 14px 0 22px; font-family: var(--serif); font-size: clamp(3rem, 5vw, 5.5rem); font-weight: 400; line-height: 0.9; letter-spacing: -0.04em; }
.exhibition-lead__copy > p:not(.eyebrow) { max-width: 38ch; margin-bottom: 26px; line-height: 1.65; color: var(--body); }

.exhibition-list { margin-top: clamp(46px, 6vw, 82px); border-top: 1px solid var(--ink); }
.exhibition-list__item { display: grid; grid-template-columns: 42px 1fr auto; gap: 18px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--rule); }
.exhibition-list__number,
.exhibition-list__date { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.exhibition-list__title { font-family: var(--serif); font-size: clamp(1.8rem, 3.2vw, 3.4rem); line-height: 1; }
.exhibition-list__arrow { display: none; font-size: 1.5rem; transition: transform 0.2s; }
.exhibition-list__item:hover .exhibition-list__arrow { transform: translate(3px, -3px); }

.artist-index { background: #171816; color: #f1efe9; }
.artist-index__layout { display: grid; gap: 52px; }
.artist-index__visual { position: relative; align-self: start; }
.artist-index__portraits { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #262724; }
.artist-index__portrait { position: absolute; inset: 0; opacity: 0; transform: scale(1.025); transition: opacity .45s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.artist-index__portrait.is-active { z-index: 1; opacity: 1; transform: scale(1); }
.artist-index__portrait img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.65) contrast(1.03); }
.artist-index__caption { display: flex; justify-content: space-between; gap: 20px; margin-top: 14px; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.11em; color: rgba(255,255,255,.58); }
.editorial-heading--compact { display: block; margin-bottom: 34px; }
.editorial-heading--compact h2 { margin-top: 18px; color: #f1efe9; }
.artist-index__list { margin: 0 0 34px; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.45); }
.artist-index__list a { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: baseline; padding: 23px 0; border-bottom: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.58); transition: color .25s, padding-left .25s; }
.artist-index__list a.is-active,
.artist-index__list a:hover,
.artist-index__list a:focus-visible { color: #fff; padding-left: 8px; }
.artist-index__number { font-size: 0.68rem; color: rgba(255,255,255,.48); }
.artist-index__name { font-family: var(--serif); font-size: clamp(2rem, 4.3vw, 4.5rem); line-height: 0.9; }
.artist-index__discipline { display: none; color: rgba(255,255,255,.58); font-size: .78rem; }
.artist-index__cue { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .25s; }
.artist-index__list a:hover .artist-index__cue,
.artist-index__list a:focus-visible .artist-index__cue,
.artist-index__list a.is-active .artist-index__cue { opacity: 1; transform: translateX(0); }
.artist-index .more { color: #f1efe9; }

.showcase-wall { overflow: hidden; }
.showcase-wall__grid { display: grid; gap: 60px 24px; }
.showcase-piece a { display: block; }
.showcase-piece__image { overflow: hidden; background: var(--paper-alt); }
.showcase-piece__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.showcase-piece:hover img { transform: scale(1.02); }
.showcase-piece__meta { margin: 14px 0 8px; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.showcase-piece h3 { max-width: 20ch; margin: 0; font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 3.2rem); font-weight: 400; line-height: 1; letter-spacing: -.025em; }
.showcase-piece--1 .showcase-piece__image { aspect-ratio: 4 / 5; }
.showcase-piece--2 .showcase-piece__image { aspect-ratio: 5 / 4; }
.showcase-piece--3 .showcase-piece__image { aspect-ratio: 1 / 1; }
.showcase-piece--4 .showcase-piece__image { aspect-ratio: 3 / 4; }

@media (min-width: 64em) {
	.exhibition-lead { grid-template-columns: minmax(0, 8fr) minmax(280px, 4fr); gap: 7vw; }
	.exhibition-lead__image img { height: min(55vw, 760px); }
	.exhibition-list__item { grid-template-columns: 60px minmax(0, 1fr) 220px 30px; padding: 30px 0; }
	.exhibition-list__arrow { display: block; }
	.artist-index__layout { grid-template-columns: minmax(300px, 4fr) minmax(0, 8fr); gap: 9vw; }
	.artist-index__visual { position: sticky; top: calc(var(--header-h) + 32px); }
	.artist-index__list a { grid-template-columns: 50px minmax(0, 1fr) 190px 72px; }
	.artist-index__discipline { display: block; }
	.showcase-wall__grid { grid-template-columns: repeat(12, 1fr); gap: 9vw 24px; align-items: start; }
	.showcase-piece--1 { grid-column: 1 / span 7; }
	.showcase-piece--2 { grid-column: 9 / span 4; margin-top: 18vw; }
	.showcase-piece--3 { grid-column: 2 / span 4; }
	.showcase-piece--4 { grid-column: 7 / span 6; margin-top: -5vw; }
}

@media (max-width: 47.99em) {
	.editorial-heading { grid-template-columns: 1fr; }
	.editorial-heading .more { margin-top: 8px; }
	.editorial-heading h2 { font-size: clamp(4rem, 22vw, 6rem); }
	.exhibition-list__date { grid-column: 2; }
}

/* --------------------------------------------------------------------------
   Cards — white, bordered, with a coloured rule on hover
   -------------------------------------------------------------------------- */

.cards {
	display: grid;
	gap: 24px;
	grid-template-columns: 1fr;
}

@media (min-width: 35em) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (min-width: 64em) {
	.cards[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cards[data-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.card {
	display: flex;
	flex-direction: column;
	background: var(--paper);
	border: 1px solid var(--rule);
	transition: box-shadow 0.2s, transform 0.2s;
}

.card:hover {
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
	transform: translateY(-3px);
}

.card__link { display: flex; flex-direction: column; height: 100%; }

.card__media { position: relative; overflow: hidden; }

.card__media img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.card:hover .card__media img { transform: scale(1.05); }

/* Category flag, as the reference uses over card imagery. */
.card__flag {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 7px 14px;
	background: var(--accent);
	color: #fff;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.card__body { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 26px; }
.card__meta { margin-bottom: 8px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); }
.card__title {
	margin-bottom: 10px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}
.card__text { margin-bottom: 18px; }
.card__cue { margin-top: auto; }

/* Carousel variant — horizontal scroll with outline arrows. */
.rail { position: relative; }

.rail__track {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
}

.rail__track::-webkit-scrollbar { display: none; }

.rail__track > .card { flex: 0 0 82%; }

@media (min-width: 48em) { .rail__track > .card { flex-basis: 46%; } }
@media (min-width: 64em) { .rail__track > .card { flex-basis: 31%; } }
@media (min-width: 87.5em) { .rail__track > .card { flex-basis: 23.5%; } }

.rail__nav { display: flex; gap: 10px; }

/* --------------------------------------------------------------------------
   Journal tiles — labelled images, two up
   -------------------------------------------------------------------------- */

.tiles { display: grid; gap: 20px; grid-template-columns: 1fr; }

@media (min-width: 48em) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tile { position: relative; display: block; overflow: hidden; min-height: 210px; }

.tile img { width: 100%; height: 100%; min-height: 210px; object-fit: cover; transition: transform 0.5s ease; }
.tile:hover img { transform: scale(1.06); }

.tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.05));
}

.tile__label {
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 22px;
	z-index: 1;
	color: #fff;
}

.tile__kicker { display: block; margin-bottom: 6px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; opacity: 0.85; }

/* --------------------------------------------------------------------------
   Feature split
   -------------------------------------------------------------------------- */

.split { display: grid; grid-template-columns: 1fr; }

@media (min-width: 64em) {
	.split { grid-template-columns: 1fr 1fr; }
	.split--reversed .split__media { order: 2; }
}

.split__media { position: relative; overflow: hidden; min-height: 300px; }
.split__media img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; }

.split__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 92px;
	height: 92px;
	border: 3px solid #fff;
	border-radius: 50%;
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	pointer-events: none;
}

.split__body { display: flex; align-items: center; padding: 48px var(--gutter); }

@media (min-width: 64em) { .split__body { padding: 72px 6vw; } }

.split__body-inner { max-width: 34em; }
.split__body .h2 { margin-bottom: 16px; }
.split__body .lede { margin-bottom: 26px; }

/* --------------------------------------------------------------------------
   Newsletter
   -------------------------------------------------------------------------- */

.signup__inner { display: grid; gap: 26px; align-items: center; grid-template-columns: 1fr; }

@media (min-width: 64em) { .signup__inner { grid-template-columns: 1.1fr 1fr; gap: 56px; } }

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

.signup__form input[type="email"] {
	flex: 1 1 240px;
	padding: 15px 16px;
	border: 2px solid #fff;
	background: transparent;
	color: #fff;
	font-family: var(--sans);
	font-size: 0.9375rem;
	outline: none;
}

.signup__form input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.7); }

.signup__form input[type="submit"] {
	flex: 0 0 auto;
	padding: 15px 30px;
	border: 2px solid var(--accent);
	background: var(--accent);
	color: #fff;
	font-family: var(--sans);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s;
}

.signup__form input[type="submit"]:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

/* --------------------------------------------------------------------------
   Article templates — pages, single exhibitions, archives
   -------------------------------------------------------------------------- */

.entry__head { padding-bottom: 0; }

.entry__media { margin-top: 32px; }
.entry__media img { width: 100%; height: auto; }

.entry__hero { position: relative; background: var(--ink); }

.entry__hero-media { position: absolute; inset: 0; overflow: hidden; }
.entry__hero-media img { width: 100%; height: 100%; object-fit: cover; }

.entry__hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.3) 55%, rgba(0, 0, 0, 0.05) 100%);
}

.entry__hero-body {
	position: relative;
	z-index: 1;
	padding: 120px 0 64px;
	color: #fff;
}

@media (min-width: 64em) {
	.entry__hero-body { padding: 200px 0 80px; }
}

.entry__hero-body .display,
.entry__hero-body .eyebrow { color: #fff; }
.entry__hero-body .lede { max-width: 46ch; color: rgba(255, 255, 255, 0.9); }

/* Exhibition and artist detail pages. */
.detail-hero { padding: calc(var(--header-h, 110px) + 38px) 0 clamp(48px, 6vw, 78px); background: var(--paper-alt); }
.detail-hero__grid { display: grid; gap: 48px; align-items: center; }
.detail-hero__copy h1,
.artist-profile-hero__copy h1 { margin: 20px 0 30px; font-family: var(--serif); font-size: clamp(4.2rem, 10vw, 10.5rem); font-weight: 400; line-height: .78; letter-spacing: -.06em; }
.detail-hero__intro { max-width: 38ch; margin: 0; font-size: clamp(1.15rem, 1.8vw, 1.5rem); line-height: 1.5; }
.detail-hero__image { display: flex; justify-content: center; align-items: center; }
.detail-hero__image img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 76vh;
	box-shadow: 0 22px 44px -22px rgba(0, 0, 0, 0.45);
}
.detail-meta { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
.detail-meta__grid { display: grid; gap: 24px; padding-top: 24px; padding-bottom: 24px; align-items: center; }
.detail-meta__grid div { display: grid; gap: 5px; }
.detail-meta__grid span { font-family: var(--header-sans); font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.detail-meta__grid strong { font-family: var(--serif); font-size: 1.45rem; font-weight: 400; }
.detail-content__grid { display: grid; gap: 36px; }
.detail-content__prose { max-width: 760px; }
.detail-content__prose > p:first-child { font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.8rem); line-height: 1.2; }
.detail-next { display: grid; gap: 18px; padding-top: 42px; padding-bottom: 80px; border-top: 1px solid var(--ink); }
.detail-next a { max-width: 18ch; font-family: var(--serif); font-size: clamp(2.2rem, 5vw, 5rem); line-height: .95; }
.detail-next a span { display: block; margin-bottom: 10px; font-family: var(--header-sans); font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }

.artist-profile-hero { padding: clamp(120px, 14vw, 210px) 0 clamp(70px, 9vw, 130px); background: #171816; color: #f1efe9; }
.artist-profile-hero__grid { display: grid; gap: 52px; align-items: end; }
.artist-profile-hero__copy > p:not(.eyebrow) { max-width: 34ch; margin: 0 0 32px; color: rgba(255,255,255,.7); line-height: 1.65; }
.artist-profile-hero__copy .more { color: #fff; }
.artist-profile-hero__image img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: saturate(.75); }
.artist-profile-hero__image figcaption { margin-top: 12px; font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); }

/* Artist profile: identity first, biography second. */
.artist-detail__hero { padding: calc(var(--header-h, 110px) + 28px) 0 clamp(54px, 6vw, 82px); background: var(--paper); }
.artist-detail__utility { display: flex; justify-content: space-between; gap: 24px; padding-bottom: 22px; border-bottom: 1px solid var(--ink); font-family: var(--header-sans); font-size: .67rem; letter-spacing: .11em; text-transform: uppercase; }
.artist-detail__utility a:hover { color: var(--accent); }
.artist-detail__hero-grid { display: grid; gap: 42px; align-items: center; padding-top: clamp(42px, 6vw, 70px); }
.artist-detail__summary h1 { max-width: 12ch; margin: 16px 0 24px; font-family: var(--serif); font-size: clamp(3.5rem, 6.5vw, 6.8rem); font-weight: 400; line-height: .88; letter-spacing: -.05em; }
.artist-detail__summary > p:not(.eyebrow) { max-width: 34ch; margin: 0 0 26px; font-size: 1rem; line-height: 1.65; color: var(--body); text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; }
.artist-detail__portrait { margin: 0; }
.artist-detail__portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.artist-detail__portrait figcaption { margin-top: 12px; font-family: var(--header-sans); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.artist-detail__introduction { position: relative; max-width: 32rem; padding-top: 22px; border-top: 1px solid var(--ink); }
.artist-detail__mark { display: none; }
.artist-detail__introduction p { margin: 0 0 28px; font-family: var(--serif); font-size: clamp(1.55rem, 2.4vw, 2.35rem); line-height: 1.2; letter-spacing: -.018em; }

.artist-detail__practice { padding: clamp(44px, 5vw, 68px) 0; border-top: 1px solid var(--rule); background: var(--paper); color: var(--body); }
.artist-detail__practice-grid { display: grid; gap: 48px; }
.artist-detail__practice-label { display: flex; justify-content: space-between; gap: 20px; align-items: start; }
.artist-detail__practice-label span { font-family: var(--header-sans); font-size: .68rem; letter-spacing: .12em; color: var(--accent); }
.artist-detail__prose { color: var(--body); }
.artist-detail__prose p { text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; }
.artist-detail__prose > p:first-child { margin-top: 0; font-family: var(--serif); font-size: clamp(1.6rem, 2.8vw, 2.65rem); line-height: 1.2; color: var(--ink); text-align: justify; text-justify: inter-word; }
.artist-detail__prose h2,
.artist-detail__prose h3 { color: var(--ink); }

.artist-detail__navigation { background: var(--paper); color: var(--ink); }
.artist-detail__navigation-grid { display: grid; border-top: 1px solid var(--ink); }
.artist-detail__navigation-grid > div { min-height: 120px; padding: 28px 0 42px; }
.artist-detail__navigation-grid > div + div { border-top: 1px solid var(--rule); text-align: right; }
.artist-detail__navigation a { display: inline-block; max-width: 18ch; font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 3rem); line-height: 1; }
.artist-detail__navigation a span { display: block; margin-bottom: 12px; font-family: var(--header-sans); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.artist-detail__navigation a:hover { color: var(--accent); }

/* Showcase detail: the work leads, the interface stays quiet. */
.showcase-detail__hero { padding: calc(var(--header-h, 110px) + 24px) 0 clamp(44px, 5vw, 68px); }
.showcase-detail__utility { display: flex; justify-content: space-between; gap: 24px; padding-bottom: 22px; border-bottom: 1px solid var(--ink); font-family: var(--header-sans); font-size: .67rem; letter-spacing: .11em; text-transform: uppercase; }
.showcase-detail__utility a:hover { color: var(--accent); }
.showcase-detail__grid { display: grid; gap: 38px; align-items: end; padding-top: clamp(32px, 4vw, 48px); }
.showcase-detail__image { margin: 0; }
.showcase-detail__image img { width: 100%; max-height: 780px; object-fit: cover; }
.showcase-detail__image figcaption { margin-top: 12px; font-family: var(--header-sans); font-size: .64rem; letter-spacing: .11em; text-transform: uppercase; color: var(--soft); }
.showcase-detail__summary h1 { max-width: 12ch; margin: 16px 0 24px; font-family: var(--serif); font-size: clamp(3.5rem, 6vw, 6.5rem); font-weight: 400; line-height: .9; letter-spacing: -.05em; }
.showcase-detail__summary > p:not(.eyebrow) { max-width: 34ch; margin: 0 0 27px; line-height: 1.65; color: var(--body); }
.showcase-detail__story { padding: clamp(46px, 6vw, 76px) 0; border-top: 1px solid var(--rule); }
.showcase-detail__story-grid { display: grid; gap: 42px; }
.showcase-detail__story aside { display: flex; justify-content: space-between; align-items: start; }
.showcase-detail__story aside span { font-family: var(--header-sans); font-size: .68rem; letter-spacing: .12em; color: var(--accent); }
.showcase-detail__prose > p:first-child { margin-top: 0; font-family: var(--serif); font-size: clamp(1.6rem, 2.8vw, 2.7rem); line-height: 1.2; color: var(--ink); }
.showcase-detail__prose > p:not(:first-child) {
	text-align: justify;
	text-justify: inter-word;
	hyphens: auto;
}
.showcase-detail__navigation-grid { display: grid; border-top: 1px solid var(--ink); }
.showcase-detail__navigation-grid > div { min-height: 120px; padding: 28px 0 42px; }
.showcase-detail__navigation-grid > div + div { border-top: 1px solid var(--rule); text-align: right; }
.showcase-detail__navigation a { display: inline-block; max-width: 19ch; font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 3rem); line-height: 1; }
.showcase-detail__navigation a span { display: block; margin-bottom: 12px; font-family: var(--header-sans); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.showcase-detail__navigation a:hover { color: var(--accent); }

/* Events. */
.events-preview,
.events-archive__body { padding: clamp(48px, 6vw, 84px) 0; }
.events-preview { background: var(--accent-tint); }
.events-archive__head { padding: calc(var(--header-h, 110px) + 42px) 0 clamp(52px, 6vw, 78px); border-bottom: 1px solid var(--ink); }
.events-archive__head-grid { display: grid; gap: 22px; align-items: end; }
.events-archive__head h1 { margin: 0; font-family: var(--serif); font-size: clamp(4.5rem, 8vw, 8rem); font-weight: 400; line-height: .78; letter-spacing: -.055em; }
.events-archive__introduction > p { max-width: 34ch; margin: 0 0 28px; line-height: 1.6; color: var(--body); }
.events-archive__head nav { display: flex; gap: 26px; }
.events-archive__head nav a { padding-bottom: 8px; border-bottom: 2px solid transparent; font-family: var(--header-sans); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.events-archive__head nav a.is-active { border-color: var(--accent); color: var(--accent); }
.events-archive__list-head { display: flex; justify-content: space-between; gap: 24px; align-items: baseline; padding-bottom: 18px; margin-bottom: 36px; border-bottom: 1px solid var(--ink); }
.events-archive__list-head span { font-family: var(--header-sans); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
.event-grid { display: grid; align-items: stretch; gap: 54px 24px; }
.event-card,
.event-card > a { height: 100%; }
.event-card > a { display: flex; flex-direction: column; }
.event-card__image { overflow: hidden; aspect-ratio: 1 / 1; margin-bottom: 17px; }
.event-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s ease; }
.event-card:hover img { transform: scale(1.02); }
.event-card__date { margin: 0 0 10px; font-family: var(--header-sans); font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); }
.event-card h2,
.event-card h3 {
	margin: 0 0 12px;
	font-family: var(--serif);
	font-size: clamp(2.1rem, 3vw, 3.2rem);
	font-weight: 400;
	line-height: .95;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}
.event-card a > p:not(.event-card__date) { margin: 0 0 18px; color: var(--body); line-height: 1.55; }
.event-card .more { margin-top: auto; align-self: flex-start; }
.event-signup { padding: clamp(52px, 6vw, 82px) 0; background: #171816; color: #fff; }
.event-signup__grid { display: grid; gap: 48px; }
.event-signup h2 { max-width: 12ch; margin: 16px 0 0; font-family: var(--serif); font-size: clamp(3rem, 6vw, 6rem); font-weight: 400; line-height: .9; }
.event-subscribe label { display: block; margin-bottom: 8px; font-family: var(--header-sans); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.event-subscribe__row { display: flex; gap: 10px; }
.event-subscribe__row input { min-width: 0; flex: 1; padding: 13px 14px; border: 1px solid currentColor; background: transparent; color: inherit; }
.event-subscribe__choices { display: grid; gap: 10px; margin-top: 16px; }
.event-subscribe__choices label { display: flex; gap: 9px; align-items: center; margin: 0; letter-spacing: 0; text-transform: none; }
.event-subscribe__trap { position: absolute !important; left: -9999px !important; }
.event-subscribe__notice { padding: 10px 12px; margin-bottom: 16px; background: var(--accent-tint); color: var(--ink); }
.event-detail__hero { padding: calc(var(--header-h, 110px) + 28px) 0 70px; }
.event-detail__utility { display: flex; justify-content: space-between; padding-bottom: 22px; border-bottom: 1px solid var(--ink); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; }
.event-detail__grid { display: grid; gap: 42px; align-items: end; padding-top: 52px; }
.event-detail__copy h1 { margin: 16px 0 26px; font-family: var(--serif); font-size: clamp(3.8rem, 7vw, 7rem); font-weight: 400; line-height: .86; letter-spacing: -.05em; }
.event-detail__copy > p:not(.eyebrow) { max-width: 35ch; line-height: 1.65; }
.event-detail__image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.event-detail__meta { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
.event-detail__meta > .wrap { display: grid; gap: 24px; padding-top: 24px; padding-bottom: 24px; align-items: center; }
.event-detail__meta div div { display: grid; gap: 5px; }
.event-detail__meta span { font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
.event-detail__meta strong { font-family: var(--serif); font-size: 1.35rem; font-weight: 400; }
.event-detail__body { padding: clamp(46px, 6vw, 76px) 0; }
.event-detail__body-grid { display: grid; gap: 60px; }
.event-detail__body aside { padding: 30px; background: var(--accent-tint); }
.event-detail__body aside h2 { margin: 0 0 12px; font-family: var(--serif); font-size: 2.5rem; font-weight: 400; }

@media (min-width: 48em) { .event-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) {
	.events-archive__head-grid { grid-template-columns: 2fr 6fr 4fr; }
	.events-archive__head h1 { grid-column: 2; }
	.events-archive__introduction { grid-column: 3; }
	.event-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.event-signup__grid { grid-template-columns: 7fr 5fr; align-items: end; }
	.event-detail__grid { grid-template-columns: 5fr 7fr; gap: 8vw; }
	.event-detail__meta > .wrap { grid-template-columns: 1fr 1fr auto; }
	.event-detail__body-grid { grid-template-columns: minmax(0, 8fr) minmax(320px, 4fr); }
}

/* Artist archive: a paced, asymmetric roster. */
.artist-archive__body { padding-top: clamp(70px, 10vw, 140px); padding-bottom: clamp(90px, 12vw, 170px); }
.artist-archive__grid { display: grid; gap: 72px 28px; }
.artist-archive__image { overflow: hidden; margin-bottom: 18px; }
.artist-archive__image img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: saturate(.78); transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .4s; }
.artist-archive__item:hover img { transform: scale(1.018); filter: saturate(1); }
.artist-archive__item h2 { margin: 9px 0 12px; font-family: var(--serif); font-size: clamp(2.5rem, 4.4vw, 4.8rem); font-weight: 400; line-height: .9; letter-spacing: -.04em; }
.artist-archive__item a > p:last-child { max-width: 34ch; margin: 0; color: var(--body); line-height: 1.55; }


.artist-feature { padding: clamp(70px, 10vw, 150px) 0; background: var(--paper-alt); }
.artist-feature__grid { display: grid; gap: 44px; align-items: end; }
.artist-feature__image { display: block; overflow: hidden; }
.artist-feature__image img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; filter: saturate(.75); transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .4s; }
.artist-feature__image:hover img { transform: scale(1.015); filter: saturate(1); }
.artist-feature__copy h2 { margin: 18px 0 26px; font-family: var(--serif); font-size: clamp(4rem, 8vw, 8.5rem); font-weight: 400; line-height: .8; letter-spacing: -.055em; }
.artist-feature__copy > p:not(.eyebrow) { max-width: 35ch; margin-bottom: 30px; font-size: 1.05rem; line-height: 1.65; }


.artist-roster { padding: clamp(44px, 5vw, 68px) 0 clamp(62px, 8vw, 104px); }
.artist-roster__head { display: flex; justify-content: space-between; gap: 24px; align-items: baseline; padding-bottom: 20px; border-bottom: 1px solid var(--ink); }
.artist-roster__head p { margin: 0; }
.artist-roster__head > p:last-child { font-size: .78rem; color: var(--soft); }
.artist-roster__grid { display: grid; align-items: stretch; gap: 56px 24px; padding-top: 42px; }
.artist-roster__item,
.artist-roster__item > a { height: 100%; }
.artist-roster__item > a { display: flex; flex-direction: column; }
.artist-roster__image { position: relative; overflow: hidden; background: var(--paper-alt); }
.artist-roster__image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.25), transparent 28%, transparent 75%, rgba(0,0,0,.08)); pointer-events: none; }
.artist-roster__image { aspect-ratio: 1 / 1; }
.artist-roster__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .75s cubic-bezier(.2,.7,.2,1); }
.artist-roster__item:hover img { transform: scale(1.022); }
.artist-roster__meta { position: absolute; inset: 18px 18px auto; z-index: 1; display: flex; justify-content: space-between; font-family: var(--header-sans); font-size: .66rem; letter-spacing: .12em; color: #fff; }
.artist-roster__meta i { display: grid; place-items: center; width: 38px; height: 38px; margin-top: -8px; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; font-style: normal; font-size: .9rem; transition: transform .2s, color .2s, background .2s; }
.artist-roster__item:hover .artist-roster__meta i { transform: translate(2px, -2px); background: #fff; color: var(--accent); }
.artist-roster__item h2 {
	margin: 18px 0 9px;
	font-family: var(--serif);
	font-size: clamp(2.25rem, 3.2vw, 3.5rem);
	font-weight: 400;
	line-height: .92;
	letter-spacing: -.04em;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}
.artist-roster__item a > p { max-width: 30ch; margin: 0; font-size: .82rem; line-height: 1.5; color: var(--soft); }
.artist-roster__empty { max-width: 46rem; padding: clamp(70px, 10vw, 130px) 0; }
.artist-roster__empty h2 { margin: 0 0 18px; font-family: var(--serif); font-size: clamp(3rem, 7vw, 7rem); font-weight: 400; line-height: .85; }
.artist-roster__empty p { margin-bottom: 26px; color: var(--body); }

@media (min-width: 64em) {
	.detail-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(360px, 5fr); gap: 7vw; }
	.detail-meta__grid { grid-template-columns: 1fr 1fr auto; }
	.detail-content__grid { grid-template-columns: 3fr 8fr 1fr; }
	.detail-content__prose { grid-column: 2; }
	.artist-profile-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(360px, 5fr); gap: 9vw; }
	.artist-detail__hero-grid { grid-template-columns: minmax(0, 5fr) minmax(360px, 4fr); gap: 8vw; }
	.artist-detail__portrait img { aspect-ratio: 4 / 5; max-height: 680px; }
	.artist-detail__practice-grid { grid-template-columns: 3fr 8fr 1fr; }
	.artist-detail__prose { grid-column: 2; }
	.artist-detail__navigation-grid { grid-template-columns: 1fr 1fr; }
	.artist-detail__navigation-grid > div { padding-right: 40px; }
	.artist-detail__navigation-grid > div + div { padding-right: 0; padding-left: 40px; border-top: 0; border-left: 1px solid var(--rule); }
	.showcase-detail__grid { grid-template-columns: minmax(0, 7fr) minmax(320px, 4fr); gap: 8vw; }
	.showcase-detail__story-grid { grid-template-columns: 3fr 8fr 1fr; }
	.showcase-detail__prose { grid-column: 2; }
	.showcase-detail__navigation-grid { grid-template-columns: 1fr 1fr; }
	.showcase-detail__navigation-grid > div { padding-right: 40px; }
	.showcase-detail__navigation-grid > div + div { padding-right: 0; padding-left: 40px; border-top: 0; border-left: 1px solid var(--rule); }
				.artist-feature__grid { grid-template-columns: minmax(0, 7fr) minmax(320px, 5fr); gap: 8vw; }
	.artist-feature__image img { aspect-ratio: 7 / 6; }
			.artist-roster__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.artist-roster__item:nth-child(3n+2) { margin-top: 0; }
	.artist-archive__grid { grid-template-columns: repeat(12, 1fr); }
	.artist-archive__item:nth-child(4n+1) { grid-column: 1 / span 5; }
	.artist-archive__item:nth-child(4n+2) { grid-column: 8 / span 4; margin-top: 12vw; }
	.artist-archive__item:nth-child(4n+3) { grid-column: 2 / span 4; }
	.artist-archive__item:nth-child(4n+4) { grid-column: 7 / span 6; margin-top: -5vw; }
}

@media (max-width: 63.99em) {
	.artist-archive__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.artist-roster__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 35em) {
	.artist-archive__grid { grid-template-columns: 1fr; }
	.artist-roster__grid { grid-template-columns: 1fr; }
}

/* Long-form copy. */
.prose { max-width: 68ch; font-size: 1.0625rem; line-height: 1.75; }
.prose > * + * { margin-top: 1.2em; }

.prose h2,
.prose h3 {
	margin-top: 1.8em;
	font-weight: 700;
	line-height: 1.15;
	color: var(--ink);
	text-transform: uppercase;
}

.prose h2 { font-size: 1.75rem; }
.prose h3 { font-size: 1.25rem; }

.prose a { color: var(--accent); text-decoration: underline; }
.prose ul { list-style: disc; padding-left: 1.3em; }
.prose ol { list-style: decimal; padding-left: 1.3em; }
.prose img { width: 100%; height: auto; }

.prose blockquote {
	margin-left: 0;
	padding-left: 24px;
	border-left: 4px solid var(--accent);
	font-family: var(--serif);
	font-size: 1.25rem;
	font-style: italic;
}

.pagination { margin-top: 48px; }

.pagination .page-numbers {
	display: inline-block;
	min-width: 42px;
	padding: 10px 12px;
	border: 1px solid var(--rule);
	margin-right: 6px;
	font-size: 0.875rem;
	font-weight: 600;
	text-align: center;
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

.pagination .screen-reader-text { position: absolute; clip-path: inset(50%); }

/* --------------------------------------------------------------------------
   Footer

   A dark band over a dimmed photograph: the newsletter card breaks the top
   edge, then socials, logo with the main rooms and details, small print.
   -------------------------------------------------------------------------- */

/* The footer's top margin is breathing room for pages that end on paper. When
   the closing section is tinted, that margin shows as a white sliver between
   two coloured blocks — so it collapses and the bands meet.
   If :has() is unavailable the whole list is dropped and the margin simply
   stays, which is the old behaviour rather than a broken layout. */
.site-main:has(> .section--alt:last-child) + .site-footer,
.site-main:has(> .j-related:last-child) + .site-footer,
.site-main:has(> :last-child > .section--alt:last-child) + .site-footer,
.site-main:has(> :last-child > .j-related:last-child) + .site-footer {
	margin-top: 0;
}

.site-footer {
	--f-rule: rgba(255, 255, 255, .16);
	--f-text: rgba(255, 255, 255, .82);
	position: relative;
	margin-top: clamp(96px, 11vw, 140px);
	background: #111214;
	color: var(--f-text);
	font-family: var(--header-sans);
	font-size: .95rem;
	line-height: 1.5;
}

/* The gallery, in black and white, barely there. */
.footer-photo {
	position: absolute;
	inset: 0;
	background: center / cover no-repeat;
	filter: grayscale(1);
	opacity: .13;
	pointer-events: none;
}

.site-footer .wrap { position: relative; }
.site-footer a { color: inherit; transition: color .2s, opacity .2s; }
.site-footer a:hover { color: #fff; }

/* Social row and newsletter card ---------------------------------------- */

.footer-top {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 32px 48px;
}

.footer-follow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 28px;
	padding-top: clamp(40px, 5vw, 60px);
	order: 1;
}

.footer-follow__label {
	font-size: clamp(1.4rem, 2.2vw, 1.75rem);
	letter-spacing: -.01em;
	color: #fff;
}

.site-footer .footer__social-icons { display: flex; align-items: center; gap: 26px; }
.site-footer .footer__social-icons a { display: inline-flex; color: #fff; }
.site-footer .footer__social-icons a:hover { opacity: .65; }
.site-footer .footer__social-icons svg { width: 21px; height: 21px; fill: currentColor; }

.footer-signup {
	order: 2;
	flex: 0 1 560px;
	margin-top: calc(-1 * clamp(56px, 6vw, 64px));
	padding: clamp(26px, 3vw, 38px) clamp(24px, 3.4vw, 44px);
	background: #fff;
	color: var(--ink);
	box-shadow: 0 18px 50px rgba(0, 0, 0, .12);
}

.footer-signup label {
	display: block;
	margin-bottom: 14px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.footer-signup__row { display: flex; align-items: center; gap: 22px; }

.footer-signup input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 10px 2px;
	border: 0;
	border-bottom: 1px solid var(--ink);
	background: transparent;
	color: var(--ink);
	font-family: var(--serif);
	font-size: 1.2rem;
	font-style: italic;
}

.footer-signup input::placeholder { color: var(--soft); }
.footer-signup input:focus { outline: none; border-bottom-color: var(--accent); }

.footer-signup button {
	flex: 0 0 auto;
	padding: 15px 30px;
	border: 1px solid var(--accent);
	background: transparent;
	color: var(--accent);
	font-family: var(--header-sans);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	transition: background .2s, color .2s;
}

.footer-signup button:hover { background: var(--accent); color: #fff; }

.footer-signup__status { margin: 12px 0 0; font-size: .85rem; color: var(--accent); }
.footer-signup__status--invalid,
.footer-signup__status--error { color: #b3261e; }

/* Logo, rooms, details --------------------------------------------------- */

.footer-main {
	display: grid;
	gap: 28px 64px;
	padding: clamp(40px, 5vw, 56px) 0 clamp(44px, 5vw, 64px);
}

@media (min-width: 64em) {
	.footer-main { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
}

.footer-logo { display: inline-block; color: #fff; font-family: var(--serif); font-size: 1.8rem; }

/* The logo is dark ink on transparent; on the dark band it is shown in white. */
.footer-logo img { display: block; width: auto; height: 74px; filter: brightness(0) invert(1); }

.footer-info { max-width: 760px; }

.footer-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--f-rule);
}

.footer-nav a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 4px 0;
	font-size: .9rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #fff;
}

.footer-nav a:hover { opacity: .7; }
.footer-nav svg { width: 17px; height: 17px; }

.footer-nav a + a::before,
.footer-contact li + li::before,
.footer-base__links li + li::before {
	content: '';
	display: inline-block;
	width: 1px;
	height: 18px;
	margin: 0 24px;
	background: var(--f-rule);
	vertical-align: middle;
}

.footer-nav a + a::before { margin: 0 24px 0 0; }
.footer-nav a + a { padding-left: 0; }
.footer-nav a + a { margin-left: 24px; }

.footer-contact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	row-gap: 12px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

/* The address takes its own line, so the row beneath starts without a rule. */
.footer-contact__address { flex-basis: 100%; }
.footer-contact .footer-contact__address + li::before { display: none; }

.footer-status::after {
	content: '';
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-left: 9px;
	border-radius: 50%;
	background: #7ba36c;
	vertical-align: 1px;
}

.footer-status--closed::after { background: rgba(255, 255, 255, .35); }

/* Small print ------------------------------------------------------------ */

.footer-base {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 32px;
	padding: 24px 0;
	border-top: 1px solid var(--f-rule);
	font-size: .85rem;
}

.footer-base__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	row-gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-base__links li + li::before { height: 14px; margin: 0 18px; }
.footer-base__credit { font-size: .8rem; color: rgba(255, 255, 255, .5); }

.footer-base__top {
	display: inline-grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin-left: auto;
	border-radius: 50%;
	background: #fff;
	color: var(--accent) !important;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
	transition: transform .2s;
}

.footer-base__top:hover { transform: translateY(-3px); }
.footer-base__top svg { width: 20px; height: 20px; }

@media (max-width: 47.99em) {
	.footer-signup { order: 0; flex: 1 1 100%; }
	.footer-follow { padding-top: 0; }
	.footer-signup__row { flex-direction: column; align-items: stretch; }

	/* Stacked lists drop their dividers rather than leave one dangling. */
	.footer-nav { flex-direction: column; align-items: flex-start; gap: 10px; }
	.footer-nav a + a { margin-left: 0; }
	.footer-contact,
	.footer-base__links { flex-direction: column; align-items: flex-start; gap: 8px; }
	.footer-nav a + a::before,
	.footer-contact li + li::before,
	.footer-base__links li + li::before { display: none; }
}

/* --------------------------------------------------------------------------
   Mobile drawer

   Sits BELOW the masthead in stacking order so the burger stays reachable and
   can act as the close control — a full-screen panel over the header would
   leave a touch device with no way out.
   -------------------------------------------------------------------------- */

.nav-drawer {
	position: fixed;
	inset: 0;
	z-index: 50;
	display: flex;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--paper);
	transform: translateX(100%);
	visibility: hidden;
	transition: transform .32s cubic-bezier(.4, 0, .2, 1), visibility .32s;
	-webkit-overflow-scrolling: touch;
}

.nav-drawer.is-open { transform: translateX(0); visibility: visible; }

@media (min-width: 64em) { .nav-drawer { display: none; } }

.nav-drawer__inner {
	display: flex;
	flex-direction: column;
	gap: 26px;
	width: 100%;
	padding: calc(var(--header-h, 66px) + 22px) var(--gutter) 34px;
}

/* Search ----------------------------------------------------------------- */

.nav-drawer__search {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--ink);
}

.nav-drawer__search input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	font-size: 1rem;
	color: var(--ink);
}

.nav-drawer__search input:focus { outline: none; }
.nav-drawer__search input::placeholder { color: var(--soft); }
.nav-drawer__search button { display: grid; place-items: center; color: var(--ink); }
.nav-drawer__search svg { width: 18px; height: 18px; fill: currentColor; }

/* Navigation ------------------------------------------------------------- */

.nav-drawer__menu > li { border-bottom: 1px solid var(--rule); }

.nav-drawer__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* The accordion wrapper means the link is no longer a direct child of the
   list item, so both shapes have to be matched. */
.nav-drawer__menu > li > a,
.nav-drawer__row > a {
	display: block;
	flex: 1 1 auto;
	padding: 14px 0;
	font-family: var(--header-sans);
	font-size: 1.15rem;
	font-weight: 500;
	line-height: 1.25;
	color: var(--ink);
}

/* Expand control, added by main.js only where a submenu exists. */
.nav-drawer__expand {
	flex: 0 0 44px;
	display: grid;
	place-items: center;
	align-self: stretch;
	color: var(--soft);
	transition: color .2s;
}

.nav-drawer__expand::before {
	content: "";
	width: 9px;
	height: 9px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

.nav-drawer__expand[aria-expanded="true"] { color: var(--accent); }
.nav-drawer__expand[aria-expanded="true"]::before { transform: translateY(2px) rotate(-135deg); }

/* Collapsed submenus animate on grid rows, so no height has to be measured. */
.nav-drawer__menu .sub-menu {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .3s cubic-bezier(.4, 0, .2, 1);
}

.nav-drawer__menu li.is-expanded > .sub-menu { grid-template-rows: 1fr; }

.nav-drawer__menu .sub-menu > * { overflow: hidden; min-height: 0; }

.nav-drawer__menu .sub-menu a {
	display: block;
	padding: 9px 0 9px 16px;
	font-size: .95rem;
	color: var(--body);
}

.nav-drawer__menu .sub-menu li:last-child a { padding-bottom: 18px; }
.nav-drawer__menu a span { display: none; }

/* Foot ------------------------------------------------------------------- */

.nav-drawer__foot { margin-top: auto; padding-top: 8px; }

.nav-drawer__cta { display: block; text-align: center; }

.nav-drawer__hours {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 22px 0 0;
	font-family: var(--header-sans);
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink);
}

.nav-drawer__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #4f8a3d;
	box-shadow: 0 0 0 3px rgba(79, 138, 61, .18);
}

.nav-drawer__hours.is-closed { color: var(--soft); }
.nav-drawer__hours.is-closed .nav-drawer__dot { background: var(--rule); box-shadow: none; }

.nav-drawer__contact { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 12px; font-size: .9rem; }
.nav-drawer__contact a { color: var(--body); border-bottom: 1px solid var(--rule); }

.nav-drawer__secondary { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--rule); }

.nav-drawer__secondary a {
	display: inline-block;
	margin-right: 18px;
	padding: 5px 0;
	font-size: .82rem;
	color: var(--soft);
}

.nav-drawer__secondary a span { display: none; }

/* While the drawer is open the masthead must read against paper even on the
   pages where it is normally transparent over an image. */
body.drawer-open .site-header--overlay {
	background: var(--paper);
	border-bottom-color: var(--rule);
}

body.drawer-open .site-header--overlay .masthead {
	--mark: var(--ink);
	--mark-contrast: #fff;
	--wordmark: var(--accent);
}

body.drawer-open .site-header--overlay .masthead__logo-img { filter: none; }

/* --------------------------------------------------------------------------
   Search overlay
   -------------------------------------------------------------------------- */

.search-overlay {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: flex;
	align-items: center;
	background: var(--paper);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s, visibility 0.25s;
}

.search-overlay.is-open { opacity: 1; visibility: visible; }

.search-overlay__close {
	position: absolute;
	top: 28px;
	right: var(--gutter);
	color: var(--ink);
	transition: color 0.2s;
}

.search-overlay__close svg { width: 20px; height: 20px; fill: currentColor; }
.search-overlay__close:hover { color: var(--accent); }
.search-overlay__title {
	margin-bottom: 22px;
	font-family: var(--serif);
	font-size: clamp(1.75rem, 3vw, 2.75rem);
	font-weight: 400;
	color: var(--ink);
}
.search-overlay__form { display: flex; flex-wrap: wrap; gap: 12px; max-width: 760px; }

.search-overlay__form input[type="search"] {
	flex: 1 1 260px;
	padding: 15px 0;
	border: 0;
	border-bottom: 2px solid var(--ink);
	background: transparent;
	font-family: var(--sans);
	font-size: 1.25rem;
	outline: none;
}

.search-overlay__form input[type="submit"] {
	flex: 0 0 auto;
	padding: 15px 30px;
	border: 2px solid var(--accent);
	background: var(--accent);
	color: #fff;
	font-family: var(--sans);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   Opening hours disclosure
   -------------------------------------------------------------------------- */

.open-hours { position: relative; }

.open-hours__trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.9375rem;
	color: var(--ink);
}

.open-hours__trigger::after {
	content: "";
	width: 6px;
	height: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.2s;
}

.open-hours.is-open .open-hours__trigger::after { transform: rotate(225deg) translate(-2px, -2px); }

.open-hours__dropdown {
	position: absolute;
	top: calc(100% + 12px);
	left: 0;
	z-index: 10;
	min-width: 280px;
	padding: 16px 20px;
	background: var(--paper);
	border: 1px solid var(--rule);
	box-shadow: 0 16px 34px rgba(0, 0, 0, 0.14);
}

.open-hours__row {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	padding: 7px 0;
	border-bottom: 1px solid var(--rule);
	font-size: 0.875rem;
}

.open-hours__row:last-child { border-bottom: 0; }
.open-hours__row.is-today { font-weight: 700; color: var(--ink); }

/* --------------------------------------------------------------------------
   Language switch
   -------------------------------------------------------------------------- */

.language-switch { display: flex; align-items: center; gap: 10px; }
.language-switch__lang { opacity: 0.75; transition: opacity 0.2s; }
.language-switch__lang.active { opacity: 1; text-decoration: underline; }
.language-switch__lang:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   Minimal homepage
   -------------------------------------------------------------------------- */

.home .stage {
	height: 72vh;
	min-height: 560px;
	max-height: 760px;
}

.home .stage__slide .stage__media::after {
	background: linear-gradient(90deg, rgba(10,10,10,.68) 0%, rgba(10,10,10,.24) 52%, rgba(10,10,10,.08) 100%);
}

.home .stage__title {
	max-width: 10ch;
	font-size: clamp(3.5rem, 6.5vw, 6.6rem);
	letter-spacing: -.045em;
	text-wrap: balance;
}

.home .stage__meta {
	display: flex;
	align-items: center;
	gap: 18px;
	width: min(500px, calc(100vw - (var(--gutter) * 2)));
	margin-bottom: 16px;
}

.home .stage__meta::after {
	content: "";
	order: 2;
	flex: 1;
	height: 1px;
	background: rgba(255,255,255,.45);
}

.home .stage__meta .stage__kicker { margin: 0; }
.home .stage__meta > span {
	order: 3;
	font-family: var(--header-sans);
	font-size: .64rem;
	letter-spacing: .1em;
	color: rgba(255,255,255,.72);
}

.home .stage__cta {
	padding: 12px 20px;
	font-family: var(--header-sans);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.home .stage__controls { bottom: 27px; }
.home .stage__arrow { width: 36px; height: 36px; }

.mh-label {
	margin: 0 0 13px;
	font-family: var(--header-sans);
	font-size: .67rem;
	font-weight: 600;
	letter-spacing: .13em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--soft);
}

.mh-text-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--header-sans);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.mh-text-link span { transition: transform .2s ease; }
.mh-text-link:hover { color: var(--accent); }
.mh-text-link:hover span { transform: translateX(4px); }

.mh-hero {
	position: relative;
	min-height: min(74vh, 720px);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: #252525;
	color: #fff;
}

.mh-hero__image,
.mh-hero__image::after {
	position: absolute;
	inset: 0;
}

.mh-hero__image::after {
	content: "";
	background: linear-gradient(90deg, rgba(8,8,8,.7) 0%, rgba(8,8,8,.32) 48%, rgba(8,8,8,.08) 78%), linear-gradient(0deg, rgba(8,8,8,.28), transparent 45%);
}

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

.mh-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-top: calc(var(--header-height) + 60px);
	padding-bottom: clamp(44px, 6vw, 76px);
}

.mh-hero__copy { max-width: 620px; }
.mh-hero .mh-label { color: rgba(255,255,255,.75); }

.mh-hero h1 {
	max-width: 9ch;
	margin: 0 0 20px;
	font-family: var(--serif);
	font-size: clamp(3.65rem, 7.4vw, 7rem);
	font-weight: 400;
	letter-spacing: -.045em;
	line-height: .88;
}

.mh-hero__copy > p:not(.mh-label) {
	max-width: 42ch;
	margin: 0 0 25px;
	font-size: clamp(.95rem, 1.2vw, 1.08rem);
	line-height: 1.55;
	color: rgba(255,255,255,.86);
}

.mh-hero .mh-text-link { color: #fff; }
.mh-hero .mh-text-link:hover { color: #fff; }
.mh-hero--plain { background: var(--accent); }

.mh-directory { border-bottom: 1px solid var(--rule); background: var(--paper); }
.mh-directory__inner { display: grid; grid-template-columns: repeat(var(--directory-count, 4), minmax(0, 1fr)); }
.mh-directory a {
	padding: 19px 18px;
	border-right: 1px solid var(--rule);
	font-family: var(--header-sans);
	font-size: .73rem;
	font-weight: 550;
	letter-spacing: .06em;
	text-align: center;
	text-transform: uppercase;
}
.mh-directory a:first-child { border-left: 1px solid var(--rule); }
.mh-directory a:hover { color: var(--accent); background: var(--accent-tint); }

.mh-gallery-intro {
	padding: clamp(58px, 6vw, 86px) 0;
	border-bottom: 1px solid var(--rule);
	background: var(--paper-alt);
}

.mh-gallery-intro__inner {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: clamp(22px, 2.5vw, 40px);
	align-items: start;
}

.mh-gallery-intro__label {
	grid-column: span 2;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 9px 0 0;
	font-family: var(--header-sans);
	font-size: .67rem;
	font-weight: 600;
	letter-spacing: .13em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--accent);
}

.mh-gallery-intro__label::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent);
}

.mh-gallery-intro__statement { grid-column: span 6; }
.mh-gallery-intro__statement h2 {
	max-width: 12ch;
	margin: 0;
	font-family: var(--serif);
	font-size: clamp(3.25rem, 5.3vw, 5.5rem);
	font-weight: 400;
	letter-spacing: -.035em;
	line-height: .92;
	color: var(--ink);
	text-wrap: balance;
}

.mh-gallery-intro__content {
	grid-column: span 4;
	align-self: end;
	max-width: 39ch;
}

.mh-gallery-intro__copy {
	font-size: .98rem;
	line-height: 1.65;
	color: var(--body);
}

.mh-gallery-intro__copy > :first-child { margin-top: 0; }
.mh-gallery-intro__copy > :last-child { margin-bottom: 0; }

.mh-gallery-intro__cta {
	display: inline-flex;
	align-items: center;
	gap: 28px;
	margin-top: 26px;
	padding: 12px 15px;
	border: 1px solid var(--accent);
	font-family: var(--header-sans);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .09em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--accent);
	transition: background .2s ease, color .2s ease;
}

.mh-gallery-intro__cta span { transition: transform .2s ease; }
.mh-gallery-intro__cta:hover { background: var(--accent); color: #fff; }
.mh-gallery-intro__cta:hover span { transform: translate(3px, -3px); }

.mh-section { padding: clamp(54px, 6vw, 82px) 0; background: var(--paper); }
.mh-section + .mh-section { border-top: 1px solid var(--rule); }
.mh-section--soft { background: var(--paper-alt); }

.mh-section-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 30px;
	margin-bottom: clamp(29px, 3.5vw, 44px);
	padding-bottom: 20px;
	border-bottom: 1px solid var(--ink);
}

.mh-section-head h2 {
	margin: 0;
	font-family: var(--serif);
	font-size: clamp(2.75rem, 5vw, 4.6rem);
	font-weight: 400;
	letter-spacing: -.035em;
	line-height: .9;
	color: var(--ink);
}

.mh-card-grid { display: grid; gap: 28px 20px; }
.mh-card-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mh-card-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.mh-card {
	position: relative;
	min-width: 0;
	background: var(--paper);
	border: 1px solid var(--rule);
	transition: border-color .25s ease, transform .25s ease;
}

.mh-card::after {
	content: "";
	position: absolute;
	right: -1px;
	bottom: -1px;
	left: -1px;
	height: 3px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .35s cubic-bezier(.2,.7,.2,1);
}

.mh-card > a {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.mh-card:hover {
	border-color: #b9bfd0;
	transform: translateY(-3px);
}

.mh-card:hover::after { transform: scaleX(1); }

.mh-card__image {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #e9e8e5;
}

.mh-card__image:empty::after {
	content: "Bumu";
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-family: var(--serif);
	font-size: 2rem;
	color: var(--soft);
}

.mh-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity .25s ease, transform .5s cubic-bezier(.2,.7,.2,1);
}

/* Elementor's global image rule uses height:auto; keep editorial crops uniform. */
.elementor .mh-card__image img { height: 100%; }

.mh-card a:hover .mh-card__image img { opacity: .92; transform: scale(1.018); }

.mh-card__body {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 190px;
	padding: 18px 58px 20px 19px;
	border-top: 1px solid var(--rule);
}

.mh-card__topline {
	display: flex;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 14px;
}

.mh-card__topline > span {
	font-family: var(--header-sans);
	font-size: .63rem;
	letter-spacing: .1em;
	color: var(--soft);
}

.mh-card__meta {
	margin: 0;
	font-family: var(--header-sans);
	font-size: .65rem;
	letter-spacing: .09em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--soft);
}

.mh-card h3 {
	margin: 0 0 12px;
	font-family: var(--serif);
	font-size: clamp(1.75rem, 2.4vw, 2.55rem);
	font-weight: 400;
	letter-spacing: -.025em;
	line-height: 1;
	color: var(--ink);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

.mh-card a:hover h3 { color: var(--accent); }
.mh-card__excerpt {
	max-width: 35ch;
	margin: auto 0 0;
	font-size: .8rem;
	line-height: 1.5;
	color: var(--soft);
}

.mh-card__arrow {
	position: absolute;
	right: 18px;
	bottom: 19px;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border: 1px solid var(--rule);
	border-radius: 50%;
	font-family: var(--header-sans);
	font-size: .75rem;
	transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.mh-card a:hover .mh-card__arrow {
	border-color: var(--accent);
	background: var(--accent);
	color: #fff;
}

.mh-artist-card {
	border: 0;
	background: transparent;
}

.mh-artist-card::after { display: none; }
.mh-artist-card:hover {
	border-color: transparent;
	transform: none;
}

.mh-artist-card .mh-card__image { aspect-ratio: 4 / 5; }
.mh-artist-card--square .mh-card__image { aspect-ratio: 1 / 1; }

.mh-artist-card__body {
	min-height: 148px;
	padding: 17px 42px 18px 0;
	border-top: 0;
	border-bottom: 1px solid var(--ink);
}

.mh-artist-card .mh-card__meta {
	margin-bottom: 11px;
	color: var(--accent);
}

.mh-artist-card h3 {
	max-width: 12ch;
	margin-bottom: 0;
	font-size: clamp(1.75rem, 2.3vw, 2.35rem);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

.mh-artist-card .mh-card__excerpt {
	max-width: 28ch;
	margin: 11px 0 0;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-size: .82rem;
}

.mh-artist-card .mh-card__arrow {
	top: 17px;
	right: 0;
	bottom: auto;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 0;
	font-size: 1rem;
	transition: color .2s ease, transform .2s ease;
}

.mh-artist-card a:hover .mh-card__arrow {
	border-color: transparent;
	background: transparent;
	color: var(--accent);
	transform: translate(3px, -3px);
}

.mh-card-grid--showcases {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 2.1vw, 32px);
	align-items: stretch;
}

.mh-showcase-card {
	border: 0;
	background: transparent;
}

.mh-showcase-card::after { display: none; }
.mh-showcase-card:hover {
	border-color: transparent;
	transform: none;
}

.mh-showcase-card .mh-card__image {
	aspect-ratio: 4 / 3;
	background: #e5e4e0;
}

.mh-showcase-card .mh-card__image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 56%, rgba(10,10,10,.18));
	pointer-events: none;
}

.mh-showcase-card__type {
	position: absolute;
	z-index: 1;
	top: 14px;
	font-family: var(--header-sans);
	font-size: .62rem;
	letter-spacing: .11em;
	line-height: 1;
	text-transform: uppercase;
	transition: background .22s ease, color .22s ease, border-color .22s ease;
}

.mh-showcase-card__type {
	left: 14px;
	padding: 9px 11px 8px;
	background: rgba(255,255,255,.92);
	backdrop-filter: blur(8px);
	color: var(--ink);
}

.mh-showcase-card__body {
	min-height: 176px;
	padding: 18px 42px 20px 0;
	border-top: 0;
	border-bottom: 1px solid var(--ink);
}

.mh-showcase-card h3 {
	max-width: 15ch;
	margin-bottom: 0;
	font-size: clamp(1.85rem, 2.45vw, 2.6rem);
	line-height: .98;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

.mh-showcase-card .mh-card__excerpt {
	max-width: 34ch;
	margin: 14px 0 0;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-size: .81rem;
}

.mh-showcase-card .mh-card__arrow {
	top: 19px;
	right: 0;
	bottom: auto;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 0;
	font-size: 1rem;
	transition: color .2s ease, transform .2s ease;
}

.mh-showcase-card a:hover .mh-card__arrow {
	border-color: transparent;
	background: transparent;
	color: var(--accent);
	transform: translate(3px, -3px);
}

.mh-events { background: var(--paper); }
.mh-event-list { border-top: 1px solid var(--ink); }
.mh-event {
	display: grid;
	grid-template-columns: minmax(170px, 2fr) minmax(0, 8fr) 32px;
	gap: 24px;
	align-items: center;
	padding: 20px 0;
	border-bottom: 1px solid var(--rule);
}

.mh-event__date {
	font-family: var(--header-sans);
	font-size: .68rem;
	letter-spacing: .07em;
	line-height: 1.45;
	text-transform: uppercase;
	color: var(--soft);
}

.mh-event strong {
	font-family: var(--serif);
	font-size: clamp(1.55rem, 2.5vw, 2.45rem);
	font-weight: 400;
	line-height: 1;
	color: var(--ink);
}

.mh-event__arrow { font-size: 1.1rem; text-align: right; }
.mh-event:hover strong,
.mh-event:hover .mh-event__arrow { color: var(--accent); }

@media (max-width: 63.99em) {
	.mh-gallery-intro__label { grid-column: span 3; }
	.mh-gallery-intro__statement { grid-column: span 9; }
	.mh-gallery-intro__content { grid-column: 4 / -1; }
	.mh-card-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mh-card-grid--showcases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mh-card-grid--showcases .mh-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (min-width: 48em) and (max-width: 63.99em) {
	.mh-card-grid--editorial,
	.mh-card-grid--gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mh-card-grid--editorial .mh-card--3,
	.mh-card-grid--gallery .mh-card--3 { grid-column: 1 / -1; }
}

@media (min-width: 64em) {
	.mh-card-grid--editorial,
	.mh-card-grid--gallery {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		align-items: start;
		gap: 24px;
	}

	.mh-card-grid--editorial .mh-card--1 { grid-column: span 6; }
	.mh-card-grid--editorial .mh-card--2,
	.mh-card-grid--editorial .mh-card--3 { grid-column: span 3; }
	.mh-card-grid--editorial .mh-card--1 .mh-card__image { aspect-ratio: 16 / 10; }
	.mh-card-grid--editorial .mh-card--2 .mh-card__image,
	.mh-card-grid--editorial .mh-card--3 .mh-card__image { aspect-ratio: 3 / 4; }

	.mh-card-grid--gallery .mh-card--1 { grid-column: span 5; }
	.mh-card-grid--gallery .mh-card--2 { grid-column: span 3; margin-top: 62px; }
	.mh-card-grid--gallery .mh-card--3 { grid-column: span 4; }
	.mh-card-grid--gallery .mh-card--1 .mh-card__image { aspect-ratio: 5 / 4; }
	.mh-card-grid--gallery .mh-card--2 .mh-card__image { aspect-ratio: 3 / 4; }
	.mh-card-grid--gallery .mh-card--3 .mh-card__image { aspect-ratio: 1 / 1; }
}

@media (max-width: 47.99em) {
	/* Height is deliberately not set here. The Hero Slider widget exposes its
	   own responsive Height control, whose generated rule
	   (.elementor-N .elementor-element-X .stage) out-ranks anything this file
	   can say — so a height here only fights it invisibly. */
	.home .stage__title { font-size: clamp(2.7rem, 12.5vw, 4.4rem); }
	.home .stage__content { padding-top: calc(var(--header-h, 66px) + 24px); padding-bottom: 84px; }

	/* The left-to-right scrim suits a wide frame with the type held left. On a
	   phone the type spans the width and sits low, so the shading follows it
	   down instead — with enough at the top to keep the masthead legible. */
	.home .stage__slide .stage__media::after {
		background: linear-gradient(
			to top,
			rgba(10, 10, 10, .84) 0%,
			rgba(10, 10, 10, .54) 36%,
			rgba(10, 10, 10, .12) 68%,
			rgba(10, 10, 10, .36) 100%
		);
	}
	.mh-hero { min-height: 590px; }
	.mh-hero__image::after { background: linear-gradient(0deg, rgba(8,8,8,.78), rgba(8,8,8,.12) 80%); }
	.mh-hero__inner { padding-bottom: 42px; }
	.mh-hero h1 { font-size: clamp(3.4rem, 16vw, 5.2rem); }
	.mh-directory__inner { grid-template-columns: repeat(2, 1fr); }
	.mh-directory a:nth-child(2) { border-right: 0; }
	.mh-directory a:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
	.mh-directory a:first-child,
	.mh-directory a:nth-child(3) { border-left: 0; }
	.mh-gallery-intro { padding: 48px 0; }
	.mh-gallery-intro__inner { grid-template-columns: 1fr; gap: 24px; }
	.mh-gallery-intro__label,
	.mh-gallery-intro__statement,
	.mh-gallery-intro__content { grid-column: auto; }
	.mh-gallery-intro__label { margin-top: 0; }
	.mh-gallery-intro__statement h2 { font-size: clamp(3rem, 13vw, 4.6rem); }
	.mh-section { padding: 48px 0; }
	.mh-section-head { align-items: flex-start; flex-direction: column; gap: 18px; }
	/* Portrait cards read well at half width, so artists stay two-up rather
	   than becoming one long column. */
	.mh-card-grid--three,
	.mh-card-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 16px; }

	.mh-card-grid--editorial,
	.mh-card-grid--gallery,
	.mh-card-grid--showcases { grid-template-columns: 1fr; gap: 36px; }

	/* A trailing odd card is left at half width on purpose: stretching a
	   portrait across the full row would blow one artist up out of all
	   proportion to the rest. */

	/* Half-width cards need the display type brought down; the artist card
	   titles it with a bare <h3>, not a .mh-card__title. */
	.mh-card-grid--three .mh-artist-card h3,
	.mh-card-grid--four .mh-artist-card h3 {
		max-width: none;
		font-size: 1.15rem;
		line-height: 1.2;
	}

	.mh-card-grid--three .mh-artist-card .mh-card__meta,
	.mh-card-grid--four .mh-artist-card .mh-card__meta { font-size: .58rem; margin-bottom: 8px; }

	/* Two clamped lines of biography say nothing useful at this width. */
	.mh-card-grid--three .mh-artist-card .mh-card__excerpt,
	.mh-card-grid--four .mh-artist-card .mh-card__excerpt { display: none; }

	.mh-card-grid--three .mh-artist-card .mh-card__arrow,
	.mh-card-grid--four .mh-artist-card .mh-card__arrow { top: 14px; width: 20px; height: 20px; }
	.mh-card-grid--showcases .mh-card:last-child:nth-child(odd) { grid-column: auto; }
	.mh-card__image { aspect-ratio: 4 / 3; }
	.mh-artist-card .mh-card__image { aspect-ratio: 4 / 5; }
	.mh-artist-card--square .mh-card__image { aspect-ratio: 1 / 1; }
	.mh-card__body { min-height: 170px; }
	.mh-artist-card__body { min-height: 148px; }

	.mh-card-grid--three .mh-artist-card__body,
	.mh-card-grid--four .mh-artist-card__body { min-height: 0; padding: 13px 26px 14px 0; }
	.mh-showcase-card__body { min-height: 160px; }
	.mh-event { grid-template-columns: 1fr 24px; gap: 8px 18px; padding: 18px 0; }
	.mh-event__date { grid-column: 1 / -1; }
	.mh-event strong { font-size: 1.75rem; }
}

/* ==========================================================================
   About Us Page Styles (Museum-Grade Bespoke Editorial System)
   ========================================================================== */
.about-page { background: var(--paper); color: var(--body); }

/* Masthead & Dossier */
.about-hero-section { padding: calc(var(--header-h, 110px) + 32px) 0 clamp(64px, 8vw, 110px); background: var(--paper); border-bottom: 1px solid var(--ink); }
.about-meta-strip { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--rule); margin-bottom: 36px; font-family: var(--header-sans); font-size: .67rem; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.about-meta-tag { color: var(--accent); font-weight: 600; }
.about-meta-status { color: #198754; font-weight: 600; }
.about-masthead__title { font-family: var(--serif); font-size: clamp(3.4rem, 7vw, 7.6rem); font-weight: 400; line-height: .9; letter-spacing: -.045em; color: var(--ink); margin: 0 0 clamp(42px, 6vw, 72px); max-width: 22ch; }

.about-dossier-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(36px, 6vw, 88px); align-items: start; margin-bottom: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); border-bottom: 1px solid var(--rule); }
.about-dropcap { float: left; font-family: var(--serif); font-size: clamp(4.4rem, 6vw, 5.8rem); line-height: .8; padding-right: 14px; padding-top: 4px; color: var(--ink); }
.about-dossier-lede { font-size: clamp(1.2rem, 1.8vw, 1.42rem); line-height: 1.65; color: var(--body); margin: 0; text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; }
.about-ledger { display: flex; flex-direction: column; border-top: 1px solid var(--ink); }
.about-ledger__row { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.about-ledger__row span { font-family: var(--header-sans); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.about-ledger__row strong { font-family: var(--header-sans); font-size: .78rem; letter-spacing: .04em; color: var(--ink); text-align: right; }

.about-diptych { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(24px, 4vw, 54px); align-items: end; }
.about-diptych__item { margin: 0; display: flex; flex-direction: column; }
.about-diptych__img-wrap { overflow: hidden; background: var(--paper-alt); border: 1px solid var(--rule); position: relative; }
.about-diptych__item--primary .about-diptych__img-wrap { aspect-ratio: 16 / 10; }
.about-diptych__item--secondary .about-diptych__img-wrap { aspect-ratio: 4 / 5; }
/* Two class levels so this beats Elementor's own `.elementor img{height:auto}`,
   which has equal specificity to a bare `.about-diptych img`. */
.about-diptych__img-wrap img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	/* Elementor resolves img height to auto, which over-constrains the
	   inset on a replaced element and lets it fall back to its intrinsic
	   ratio. Pinning both ends clamps it to exactly the frame, so object-fit
	   does the cropping rather than overflow. */
	min-height: 100%;
	max-height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.about-diptych__img-wrap:hover img { transform: scale(1.03); }
.about-diptych figcaption { margin-top: 14px; display: flex; gap: 14px; font-family: var(--header-sans); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); line-height: 1.45; }
.about-fig-num { color: var(--accent); font-weight: 700; flex-shrink: 0; }

/* Manifesto Section */
.about-manifesto-section { padding: clamp(70px, 9vw, 120px) 0; background: var(--paper-alt); border-bottom: 1px solid var(--ink); }
.about-eyebrow { font-family: var(--header-sans); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: 20px; }
.about-manifesto__quote { margin: 0 0 clamp(48px, 6vw, 72px); font-family: var(--serif); font-size: clamp(1.8rem, 3.2vw, 3.2rem); font-weight: 400; line-height: 1.2; letter-spacing: -.025em; color: var(--ink); max-width: 32ch; font-style: italic; border-left: 2px solid var(--ink); padding-left: clamp(20px, 3vw, 40px); }
.about-manifesto__columns { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 84px); padding-top: clamp(36px, 5vw, 60px); border-top: 1px solid var(--rule); }
.about-manifesto__col h3 { font-family: var(--serif); font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-weight: 400; line-height: 1.15; color: var(--ink); margin-bottom: 18px; }
.about-manifesto__col p { font-size: 1.05rem; line-height: 1.75; color: var(--body); margin-bottom: 18px; text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; }

/* Curatorial Domains */
.about-mediums-section-wrap { padding: clamp(70px, 9vw, 120px) 0; background: var(--paper); border-bottom: 1px solid var(--rule); }
.about-section-header { margin-bottom: clamp(40px, 5vw, 64px); }
.about-section-header h2 { font-family: var(--serif); font-size: clamp(2.4rem, 4.4vw, 4.4rem); font-weight: 400; line-height: 1; letter-spacing: -.035em; color: var(--ink); margin: 0; }
.about-mediums-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.about-medium-card { background: var(--paper); padding: clamp(36px, 4vw, 54px); display: flex; flex-direction: column; transition: background .3s ease; }
.about-medium-card:hover { background: var(--paper-alt); }
.about-medium-card__header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 24px; }
.about-medium-card__num { font-family: var(--serif); font-size: 1.8rem; font-style: italic; color: var(--accent); }
.about-medium-card__kicker { font-family: var(--header-sans); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.about-medium-card h3 { font-family: var(--serif); font-size: clamp(1.6rem, 2.2vw, 2.2rem); font-weight: 400; line-height: 1.15; color: var(--ink); margin-bottom: 10px; }
.about-medium-card__tagline { font-family: var(--header-sans); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
.about-medium-card__body { font-size: .98rem; line-height: 1.7; color: var(--body); margin: 0; text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; }

/* Chronology & Timeline */
.about-timeline-section-wrap { padding: clamp(70px, 9vw, 120px) 0; background: var(--paper-alt); border-bottom: 1px solid var(--rule); }
.about-timeline-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; border-top: 1px solid var(--ink); padding-top: 36px; }
.about-timeline-node { display: flex; flex-direction: column; border-left: 1px solid var(--rule); padding-left: 20px; }
.about-timeline-node--current { border-left-color: var(--accent); }
.about-timeline-year { font-family: var(--serif); font-size: clamp(2rem, 2.8vw, 3rem); line-height: 1; color: var(--ink); margin-bottom: 16px; }
.about-timeline-node--current .about-timeline-year { color: var(--accent); }
.about-timeline-content h4 { font-family: var(--header-sans); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin-bottom: 10px; }
.about-timeline-content p { font-size: .88rem; line-height: 1.6; color: var(--body); margin: 0; }

/* Spatial Compound */
.about-spaces-section-wrap { padding: clamp(70px, 9vw, 120px) 0; background: var(--paper); border-bottom: 1px solid var(--rule); }
.about-spaces-triptych { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3.5vw, 42px); }
.about-space-card { display: flex; flex-direction: column; }
.about-space-card__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-alt); border: 1px solid var(--rule); margin-bottom: 20px; }
.about-space-card .about-space-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.about-space-card:hover .about-space-card__img img { transform: scale(1.04); }
.about-space-card__badge { position: absolute; left: 14px; bottom: 14px; background: rgba(255,255,255,.94); padding: 6px 10px; font-family: var(--header-sans); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); font-weight: 600; }
.about-space-card__text h4 { font-family: var(--serif); font-size: 1.55rem; color: var(--ink); margin-bottom: 10px; }
.about-space-card__text p { font-size: .94rem; line-height: 1.65; color: var(--body); margin: 0; text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; }

/* Artist & Curatorial Roster */
.about-roster-section-wrap { padding: clamp(70px, 9vw, 120px) 0; background: var(--paper-alt); border-bottom: 1px solid var(--rule); }
.about-roster-table { display: flex; flex-direction: column; border-top: 1px solid var(--ink); }
.about-roster-row { display: grid; grid-template-columns: 240px 1fr 180px 40px; gap: 24px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--rule); color: var(--body); text-decoration: none; transition: background .2s ease, padding-left .2s ease; }
.about-roster-row:hover { background: rgba(0,0,0,.02); padding-left: 12px; color: var(--ink); }
.about-roster-name { font-family: var(--serif); font-size: 1.45rem; color: var(--ink); }
.about-roster-discipline { font-family: var(--sans); font-size: .92rem; color: var(--body); }
.about-roster-location { font-family: var(--header-sans); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.about-roster-arrow { font-family: var(--serif); font-size: 1.4rem; color: var(--accent); text-align: right; }

/* Visitor Concierge */
.about-concierge-section-wrap { padding: clamp(70px, 9vw, 130px) 0; background: var(--paper); }
.about-concierge { background: var(--paper-alt); border: 1px solid var(--ink); padding: clamp(36px, 5vw, 68px); }
.about-concierge__head { margin-bottom: 42px; border-bottom: 1px solid var(--rule); padding-bottom: 32px; }
.about-concierge__head h2 { font-family: var(--serif); font-size: clamp(2.4rem, 4vw, 3.8rem); font-weight: 400; line-height: 1; letter-spacing: -.03em; color: var(--ink); margin: 0 0 14px; }
.about-concierge__lede { font-size: 1.1rem; line-height: 1.6; color: var(--body); margin: 0; }
.about-concierge__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 48px); }
.about-concierge__box { display: flex; flex-direction: column; }
.about-concierge__kicker { font-family: var(--header-sans); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; font-weight: 600; }
.about-concierge__box strong { font-family: var(--serif); font-size: 1.4rem; color: var(--ink); margin-bottom: 8px; }
.about-concierge__box p { font-size: .95rem; line-height: 1.65; color: var(--body); margin: 0; }
.about-concierge__box a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.about-concierge__box a:hover { color: var(--accent); }

/* Responsive Media Queries */
@media (max-width: 1024px) {
	.about-timeline-grid { grid-template-columns: repeat(2, 1fr); }
	.about-spaces-triptych { grid-template-columns: 1fr; }
	.about-roster-row { grid-template-columns: 180px 1fr 40px; }
	.about-roster-location { display: none; }
}

@media (max-width: 768px) {
	.about-dossier-grid,
	.about-manifesto__columns,
	.about-diptych,
	.about-mediums-grid,
	.about-concierge__grid { grid-template-columns: 1fr; }
	.about-meta-strip { flex-direction: column; align-items: flex-start; gap: 8px; }
	.about-timeline-grid { grid-template-columns: 1fr; }
	.about-roster-row { grid-template-columns: 1fr 30px; }
	.about-roster-discipline { display: none; }
}



/* --------------------------------------------------------------------------
   Artworks widget

   The base .artwork-grid runs 1 → 2 → 4 columns. These modifiers let the
   Elementor widget choose three-up, and set the image proportion per
   instance. "Natural" drops the fixed ratio so mixed media keeps its own
   shape, with a cap so a tall work cannot dominate the row.
   -------------------------------------------------------------------------- */

@media (min-width: 64em) {
	.artwork-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.artwork-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.artwork-grid--portrait .artwork-card__image { aspect-ratio: 4 / 5; }
.artwork-grid--square .artwork-card__image { aspect-ratio: 1 / 1; }

.artwork-grid--natural .artwork-card__image {
	aspect-ratio: auto;
	max-height: 460px;
}

.artwork-grid--natural .artwork-card__image img {
	height: auto;
	max-height: 460px;
	object-fit: contain;
	object-position: center bottom;
}

.artwork-card__medium {
	margin-top: 4px;
	color: var(--soft);
	font-size: 0.85rem;
	font-style: italic;
}

/* --------------------------------------------------------------------------
   Salon hang

   Works keep their real proportions and are scaled to a shared visual height,
   so a wide canvas simply takes more wall than a narrow one — the opposite of
   a uniform grid, and how a wall is actually hung. The default alignment is
   the museum convention: centres on one line, not tops or bottoms.
   -------------------------------------------------------------------------- */

/* The wall itself is top-aligned so every label starts on the same line. The
   hanging line is set inside each image box instead, which is what keeps the
   artworks themselves aligned regardless of how long their labels run. */
.artwork-wall {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	/* Left-aligned, not centred: centring looks right on a full row but
	   strands a trailing work alone in the middle of the wall. */
	justify-content: flex-start;
	gap: 64px 52px;
}

.artwork-wall .artwork-card {
	flex: 0 1 auto;
	max-width: 100%;
	height: auto;
}

.artwork-wall .artwork-card > a {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* Fixed height, shrink-wrapped width — so the box hugs the artwork and the
   label sits directly beneath its left edge. */
.artwork-wall .artwork-card__image {
	display: flex;
	justify-content: flex-start;
	aspect-ratio: auto;
	height: var(--hang, 300px);
	width: fit-content;
	margin-bottom: 18px;
	background: none;
	overflow: visible;
}

.artwork-wall--center .artwork-card__image { align-items: center; }
.artwork-wall--baseline .artwork-card__image { align-items: flex-end; }
.artwork-wall--top .artwork-card__image { align-items: flex-start; }

.artwork-wall .artwork-card__image img {
	height: 100%;
	width: auto;
	max-width: min(46vw, 620px);
	object-fit: contain;
	/* A soft cast shadow so each work reads as an object on a wall. */
	box-shadow: 0 22px 38px -18px rgba(0, 0, 0, 0.45);
	transition: transform .65s ease, box-shadow .45s ease;
}

.artwork-wall .artwork-card:hover img {
	transform: translateY(-4px);
	box-shadow: 0 30px 52px -20px rgba(0, 0, 0, 0.5);
}

.artwork-wall .artwork-label { max-width: 30ch; }

@media (max-width: 47.99em) {
	.artwork-wall { gap: 40px 20px; }

	/* One work per row, sized to the column at its own proportions. The fixed
	   hang height letterboxed everything into a tall box on a phone, leaving
	   the work small and the price badge floating clear of it. */
	.artwork-wall .artwork-card { flex: 1 1 100%; }

	.artwork-wall .artwork-card__image {
		height: auto;
		width: fit-content;
		max-width: 100%;
		margin-bottom: 14px;
	}

	.artwork-wall .artwork-card__image img {
		width: auto;
		height: auto;
		max-width: 100%;
		/* Keeps a tall portrait from running past a screenful. */
		max-height: 68vh;
		box-shadow: 0 14px 26px -14px rgba(0, 0, 0, .42);
	}

	.artwork-wall .artwork-label { max-width: none; }
}

/* --------------------------------------------------------------------------
   Feature — one work leads, the rest support it
   -------------------------------------------------------------------------- */

.artwork-feature { display: grid; gap: 40px; align-items: start; }

@media (min-width: 64em) {
	.artwork-feature { grid-template-columns: 1.35fr 1fr; gap: 56px; }
	.artwork-feature__rest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
}

.artwork-feature__lead .artwork-card__image,
.artwork-feature__rest .artwork-card__image { aspect-ratio: auto; background: none; }

.artwork-feature .artwork-card__image img {
	width: 100%;
	height: auto;
	object-fit: contain;
	box-shadow: 0 22px 38px -18px rgba(0, 0, 0, 0.42);
}

/* --------------------------------------------------------------------------
   Wall label

   Museum convention: artist, then the title in italic, then year, medium and
   dimensions set smaller and quieter beneath.
   -------------------------------------------------------------------------- */

.artwork-label {
	display: block;
	max-width: 34ch;
	font-size: 0.82rem;
	line-height: 1.55;
	color: var(--soft);
}

.artwork-label__artist {
	display: block;
	color: var(--ink);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	margin-bottom: 5px;
}

.artwork-label__title {
	font-family: var(--serif);
	font-size: 1.08rem;
	font-style: italic;
	color: var(--ink);
}

.artwork-label__year { font-family: var(--serif); font-size: 1.08rem; color: var(--ink); }

.artwork-label__detail { display: block; margin-top: 5px; }

.artwork-label__price {
	display: block;
	margin-top: 8px;
	color: var(--ink);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
}


/* --------------------------------------------------------------------------
   Artist archive

   Everything hangs off one left edge — strip, title and introduction — rather
   than the three orphaned elements the previous layout produced. The A–Z runs
   as a single quiet row on paper instead of a tinted slab.
   -------------------------------------------------------------------------- */

.artist-archive__head {
	padding: calc(var(--header-h, 110px) + 46px) 0 clamp(34px, 4vw, 52px);
	background: var(--paper);
}

.artist-archive__strip {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	padding-bottom: clamp(28px, 4vw, 48px);
	border-bottom: 1px solid var(--rule);
	font-family: var(--header-sans);
	font-size: .68rem;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--soft);
}

.artist-archive__strip span:first-child { color: var(--accent); font-weight: 600; }

.artist-archive__masthead {
	display: grid;
	gap: 20px;
	align-items: end;
	padding-top: clamp(26px, 3.5vw, 44px);
}

@media (min-width: 62em) {
	.artist-archive__masthead { grid-template-columns: 1fr auto; gap: 6vw; }
}

.artist-archive__head h1 {
	margin: 0;
	font-family: var(--serif);
	font-size: clamp(4.4rem, 11vw, 11rem);
	font-weight: 400;
	line-height: .78;
	letter-spacing: -.055em;
}

.artist-archive__introduction {
	max-width: 30ch;
	margin: 0;
	padding-bottom: .6em;
	line-height: 1.6;
	color: var(--body);
}

/* Filters ------------------------------------------------------------------ */

.artist-filters {
	border-top: 1px solid var(--ink);
	border-bottom: 1px solid var(--rule);
	background: var(--paper);
}

.artist-filters > .wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 32px;
	padding-top: 18px;
	padding-bottom: 18px;
}

.artist-filters__alphabet {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
	margin-right: auto;
}

.artist-filters__alphabet a,
.artist-filters__alphabet span {
	display: grid;
	place-items: center;
	min-width: 27px;
	height: 27px;
	padding: 0 4px;
	font-family: var(--header-sans);
	font-size: .7rem;
	letter-spacing: .04em;
	border-radius: 3px;
	transition: color .18s, background .18s;
}

.artist-filters__alphabet a { color: var(--ink); }
.artist-filters__alphabet a:hover { background: var(--paper-alt); }

.artist-filters__alphabet a.is-active {
	background: var(--ink);
	color: var(--paper);
}

.artist-filters__all {
	min-width: 44px !important;
	letter-spacing: .1em !important;
	text-transform: uppercase;
}

/* Letters with no artists behind them stay visible but inert. */
.artist-filters__alphabet .is-empty {
	color: var(--rule);
	cursor: default;
	user-select: none;
}

.artist-filters__search {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 200px;
	padding-bottom: 3px;
	border-bottom: 1px solid var(--rule);
	transition: border-color .2s;
}

.artist-filters__search:focus-within { border-bottom-color: var(--ink); }

.artist-filters__search input {
	min-width: 0;
	flex: 1;
	padding: 5px 0;
	border: 0;
	background: transparent;
	font-family: var(--header-sans);
	font-size: .85rem;
	outline: none;
}

.artist-filters__search button {
	padding: 4px 2px;
	color: var(--soft);
	font-size: .95rem;
	line-height: 1;
	transition: color .18s;
}

.artist-filters__search button:hover { color: var(--accent); }

.artist-filters__status {
	flex-basis: 100%;
	margin: 0;
	font-family: var(--header-sans);
	font-size: .72rem;
	letter-spacing: .06em;
	color: var(--soft);
}

.artist-filters__status a {
	margin-left: 12px;
	color: var(--accent);
	border-bottom: 1px solid currentColor;
}

/* --------------------------------------------------------------------------
   Page masthead

   Title and lede share a baseline so a text-only page opens with the same
   weight as the About and Artists mastheads, rather than a small heading over
   a column of prose stranded beside empty space.
   -------------------------------------------------------------------------- */

.entry__eyebrow { margin-bottom: clamp(22px, 3vw, 34px); }
.entry__eyebrow a { color: var(--accent); }
.entry__eyebrow a:hover { border-bottom: 1px solid currentColor; }

.entry__masthead {
	display: grid;
	gap: 20px;
	align-items: end;
	padding-bottom: clamp(28px, 3.5vw, 46px);
	border-bottom: 1px solid var(--rule);
}

@media (min-width: 62em) {
	.entry__masthead { grid-template-columns: 1fr minmax(300px, 34%); gap: 6vw; }
}

.entry__masthead .display { margin: 0; }

.entry__lede {
	margin: 0;
	padding-bottom: .5em;
	font-size: clamp(1.05rem, 1.5vw, 1.28rem);
	line-height: 1.55;
	color: var(--body);
}

/* Long-form body ----------------------------------------------------------- */

.prose h2:first-child { margin-top: 0; }

.prose blockquote {
	max-width: none;
	margin: 1.8em 0;
	padding: 0 0 0 clamp(20px, 3vw, 38px);
	border-left: 2px solid var(--accent);
	font-family: var(--serif);
	font-size: clamp(1.3rem, 2.1vw, 1.85rem);
	font-style: italic;
	line-height: 1.32;
	color: var(--ink);
}

.prose blockquote p { margin: 0; }

/* --------------------------------------------------------------------------
   Image-first page hero

   Three arrangements from one widget. Split keeps an upright photograph whole
   beside the title; stage and overlay crop a wide one to a set height, with a
   steerable focal point so the subject stays in frame.
   -------------------------------------------------------------------------- */

.page-hero { position: relative; }

.page-hero__media { overflow: hidden; background: var(--paper-alt); }
.page-hero__media img { display: block; width: 100%; }

.page-hero__inner {
	width: 100%;
	max-width: calc(var(--wrap) + (var(--gutter) * 2));
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.page-hero__eyebrow { margin-bottom: 18px; }
.page-hero__eyebrow a { color: var(--accent); }
.page-hero__eyebrow a:hover { border-bottom: 1px solid currentColor; }

.page-hero__title { margin: 0; }

.page-hero__lede {
	max-width: 34ch;
	margin: 22px 0 0;
	font-size: clamp(1.05rem, 1.5vw, 1.28rem);
	line-height: 1.55;
	color: var(--body);
}

.page-hero__caption {
	max-width: calc(var(--wrap) + (var(--gutter) * 2));
	margin: 14px auto 0;
	padding: 0 var(--gutter);
	font-family: var(--header-sans);
	font-size: .68rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--soft);
}

/* Split — the photograph keeps its own proportions. */
.page-hero--split {
	display: grid;
	gap: 32px;
	align-items: center;
	width: 100%;
	max-width: calc(var(--wrap) + (var(--gutter) * 2));
	margin: 0 auto;
	padding: calc(var(--header-h, 110px) + 42px) var(--gutter) clamp(40px, 5vw, 70px);
}

@media (min-width: 62em) {
	.page-hero--split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 6vw; }
	.page-hero--split.page-hero--reversed .page-hero__media { order: 2; }
}

.page-hero--split .page-hero__media img { height: auto; }
.page-hero--split .page-hero__inner { max-width: none; margin: 0; padding: 0; }

/* Stage — full width, title beneath. */
.page-hero--stage .page-hero__media { height: var(--hero-h, 62vh); }

.page-hero--stage .page-hero__media img {
	height: 100%;
	min-height: 100%;
	max-height: 100%;
	object-fit: cover;
	object-position: var(--hero-focal, center);
}

.page-hero--stage .page-hero__body { padding: clamp(34px, 4vw, 56px) 0 clamp(30px, 4vw, 48px); }

.page-hero--stage .page-hero__inner {
	display: grid;
	gap: 18px;
	align-items: end;
	padding-bottom: clamp(26px, 3vw, 42px);
	border-bottom: 1px solid var(--rule);
}

@media (min-width: 62em) {
	.page-hero--stage .page-hero__inner { grid-template-columns: 1fr minmax(300px, 34%); gap: 6vw; }
	.page-hero--stage .page-hero__lede { padding-bottom: .5em; }
}

/* Overlay — title sits on the photograph. */
.page-hero--overlay { display: grid; }
.page-hero--overlay .page-hero__media,
.page-hero--overlay .page-hero__body { grid-area: 1 / 1; }

.page-hero--overlay .page-hero__media { height: var(--hero-h, 62vh); }

.page-hero--overlay .page-hero__media img {
	height: 100%;
	min-height: 100%;
	max-height: 100%;
	object-fit: cover;
	object-position: var(--hero-focal, center);
}

.page-hero--overlay .page-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, .12) 55%, rgba(0, 0, 0, .3));
}

.page-hero--overlay .page-hero__body {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	padding-bottom: clamp(38px, 5vw, 70px);
	color: #fff;
}

.page-hero--overlay .page-hero__title,
.page-hero--overlay .page-hero__eyebrow { color: #fff; }
.page-hero--overlay .page-hero__lede { color: rgba(255, 255, 255, .9); }

/* Prose widget: reading width by default, full container when chosen. */
.prose--wide { max-width: none; }

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */

.error404__grid { display: grid; gap: clamp(40px, 6vw, 76px); }

@media (min-width: 62em) {
	.error404__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}

.error404__search .h3,
.error404__shows .h3 { margin: 0 0 20px; }

.error404__form {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--ink);
	margin-bottom: 30px;
}

.error404__form input {
	flex: 1;
	min-width: 0;
	padding: 10px 0;
	border: 0;
	background: transparent;
	font-family: var(--header-sans);
	font-size: 1rem;
	outline: none;
}

.error404__form button {
	padding: 10px 0;
	font-family: var(--header-sans);
	font-size: .72rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--accent);
}

.error404__links { display: flex; flex-wrap: wrap; gap: 10px 26px; }

.error404__links a {
	font-family: var(--header-sans);
	font-size: .82rem;
	letter-spacing: .04em;
	border-bottom: 1px solid var(--rule);
	padding-bottom: 3px;
	transition: border-color .2s, color .2s;
}

.error404__links a:hover { color: var(--accent); border-color: var(--accent); }

.error404__list li + li { margin-top: 18px; }

.error404__list a {
	display: grid;
	grid-template-columns: 84px 1fr;
	gap: 18px;
	align-items: center;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--rule);
}

.error404__thumb { overflow: hidden; background: var(--paper-alt); }

.error404__thumb img {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	transition: transform .5s ease;
}

.error404__list a:hover img { transform: scale(1.04); }

.error404__dates {
	display: block;
	margin-bottom: 5px;
	font-family: var(--header-sans);
	font-size: .66rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--soft);
}

.error404__title { font-family: var(--serif); font-size: 1.16rem; line-height: 1.2; color: var(--ink); }

/* --------------------------------------------------------------------------
   Search results
   -------------------------------------------------------------------------- */

.search-results__form {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 3px;
	border-bottom: 1px solid var(--ink);
}

.search-results__form input {
	flex: 1;
	min-width: 0;
	padding: 7px 0;
	border: 0;
	background: transparent;
	font-family: var(--header-sans);
	font-size: .95rem;
	outline: none;
}

.search-results__form button { padding: 5px 2px; color: var(--accent); font-size: 1rem; line-height: 1; }

.search-results__count {
	margin: 12px 0 0;
	font-family: var(--header-sans);
	font-size: .72rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--soft);
}

.search-filters { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }

.search-filters__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 6px;
	padding-top: 16px;
	padding-bottom: 16px;
}

.search-filters__nav a {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	padding: 7px 14px;
	border-radius: 3px;
	font-family: var(--header-sans);
	font-size: .78rem;
	transition: background .18s, color .18s;
}

.search-filters__nav a:hover { background: var(--paper-alt); }
.search-filters__nav a.is-active { background: var(--ink); color: var(--paper); }
.search-filters__nav a span { font-size: .68rem; opacity: .6; }

.search-results__list { display: grid; gap: 0; }

.search-result { border-bottom: 1px solid var(--rule); }
.search-result:first-child { border-top: 1px solid var(--rule); }

.search-result__link {
	display: grid;
	gap: 24px;
	align-items: start;
	padding: 26px 0;
	transition: background .2s;
}

@media (min-width: 48em) {
	.search-result__link { grid-template-columns: 110px minmax(0, 1fr); }
	.search-result__link:not(:has(.search-result__thumb)) { grid-template-columns: 110px minmax(0, 1fr); }
	.search-result__link:not(:has(.search-result__thumb)) .search-result__body { grid-column: 2; }
}

.search-result__thumb { overflow: hidden; background: var(--paper-alt); }

.search-result__thumb img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .5s ease;
}

.search-result:hover img { transform: scale(1.04); }

.search-result__type {
	display: block;
	margin-bottom: 7px;
	font-family: var(--header-sans);
	font-size: .64rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--accent);
}

.search-result__title {
	display: block;
	margin-bottom: 8px;
	font-family: var(--serif);
	font-size: clamp(1.3rem, 2.1vw, 1.75rem);
	line-height: 1.15;
	color: var(--ink);
	transition: color .2s;
}

.search-result:hover .search-result__title { color: var(--accent); }

.search-result__excerpt { display: block; max-width: 62ch; color: var(--body); line-height: 1.6; }

.search-results__empty { padding: 20px 0 0; }

/* --------------------------------------------------------------------------
   Shop

   Products are objects, so each sits whole on a tinted panel rather than being
   cropped to a common rectangle — a book, a cloth panel and a tote are not the
   same shape and should not pretend to be.
   -------------------------------------------------------------------------- */

/* WooCommerce puts a clearfix ::before/::after on the list. In CSS Grid a
   pseudo-element is a grid item, so those two were consuming cells and
   pushing every product one place along. */
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none !important; display: none !important; }

.woocommerce .site-main { background: var(--paper); }

/* Header ------------------------------------------------------------------- */

.woocommerce-products-header {
	max-width: calc(var(--wrap) + (var(--gutter) * 2));
	margin: 0 auto;
	padding: calc(var(--header-h, 110px) + 52px) var(--gutter) 0;
}

.woocommerce-products-header__title {
	margin: 0;
	font-family: var(--serif);
	font-size: clamp(3.6rem, 9vw, 8rem);
	font-weight: 400;
	line-height: .82;
	letter-spacing: -.05em;
	color: var(--ink);
}

.shop-intro {
	display: grid;
	gap: 26px;
	max-width: calc(var(--wrap) + (var(--gutter) * 2));
	margin: 0 auto;
	padding: clamp(26px, 3vw, 40px) var(--gutter) 0;
}

.shop-intro__lede {
	max-width: 46ch;
	margin: 0;
	font-size: clamp(1.02rem, 1.4vw, 1.2rem);
	line-height: 1.6;
	color: var(--body);
}

.shop-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 6px;
	padding-top: clamp(20px, 2.5vw, 30px);
	border-top: 1px solid var(--rule);
}

.shop-cats a {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	padding: 8px 15px;
	border-radius: 3px;
	font-family: var(--header-sans);
	font-size: .78rem;
	letter-spacing: .02em;
	color: var(--ink);
	transition: background .18s, color .18s;
}

.shop-cats a:hover { background: var(--paper-alt); }
.shop-cats a.is-active { background: var(--ink); color: var(--paper); }
.shop-cats a span { font-size: .68rem; opacity: .55; }

/* Grid --------------------------------------------------------------------- */

.woocommerce ul.products {
	display: grid;
	gap: 60px 34px;
	max-width: calc(var(--wrap) + (var(--gutter) * 2));
	margin: 0 auto clamp(80px, 10vw, 130px);
	padding: clamp(34px, 4vw, 54px) var(--gutter) 0;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	list-style: none;
}

@media (min-width: 35em) { .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62em) { .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	padding: 0;
	float: none !important;
	clear: none !important;
	text-align: left;
}

.woocommerce ul.products li.product::before,
.woocommerce ul.products li.product::after { content: none; }

/* The panel: a consistent field, with the product shown whole inside it. */
.woocommerce ul.products li.product > a:first-of-type,
.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
	display: block;
}

.woocommerce ul.products li.product img,
.woocommerce ul.products li.product .shop-blank {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	margin: 0 0 22px;
	padding: clamp(20px, 3vw, 40px);
	background: var(--paper-alt);
	object-fit: contain;
	transition: background .3s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}

.woocommerce ul.products li.product:hover img { transform: scale(1.015); }

/* Stand-in for a product still awaiting photography. */
.shop-blank { position: relative; flex-direction: column; gap: 14px; }

.shop-blank__mark {
	font-family: var(--serif);
	font-size: clamp(3rem, 6vw, 5rem);
	line-height: 1;
	color: var(--rule);
}

.shop-blank__note {
	font-family: var(--header-sans);
	font-size: .62rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--soft);
}

.shop-card__cat {
	margin: 0 0 8px;
	font-family: var(--header-sans);
	font-size: .64rem;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--accent);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding: 0 !important;
	margin: 0 0 10px;
	font-family: var(--serif);
	font-size: clamp(1.2rem, 1.7vw, 1.5rem);
	font-weight: 400;
	line-height: 1.18;
	color: var(--ink);
	transition: color .2s;
}

.woocommerce ul.products li.product:hover .woocommerce-loop-product__title { color: var(--accent); }

.woocommerce ul.products li.product .price {
	display: block;
	margin: 0 0 18px;
	font-family: var(--header-sans);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--body);
}

.woocommerce ul.products li.product .price del { opacity: .45; margin-right: 6px; font-weight: 400; }
.woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--accent); }

.woocommerce ul.products li.product .button {
	display: inline-block;
	margin: 0;
	padding: 0 0 3px;
	border: 0;
	border-bottom: 1px solid var(--ink);
	border-radius: 0;
	background: transparent;
	color: var(--ink);
	font-family: var(--header-sans);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .11em;
	text-transform: uppercase;
	transition: color .2s, border-color .2s;
}

.woocommerce ul.products li.product .button:hover { color: var(--accent); border-color: var(--accent); }
.woocommerce ul.products li.product .added_to_cart { display: none; }

/* Buttons elsewhere -------------------------------------------------------- */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce button.button.alt {
	padding: 14px 26px;
	border: 1px solid var(--ink);
	border-radius: 0;
	background: transparent;
	color: var(--ink);
	font-family: var(--header-sans);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .11em;
	text-transform: uppercase;
	transition: background .2s, color .2s, border-color .2s;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover { background: var(--ink); color: var(--paper); }

.woocommerce button.button.alt,
.woocommerce a.button.alt {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }

/* Single product ----------------------------------------------------------- */

.woocommerce div.product {
	display: grid;
	gap: clamp(34px, 5vw, 70px);
	max-width: calc(var(--wrap) + (var(--gutter) * 2));
	margin: 0 auto;
	padding: calc(var(--header-h, 110px) + 52px) var(--gutter) clamp(80px, 10vw, 130px);
}

@media (min-width: 62em) {
	.woocommerce div.product { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; }
	.woocommerce div.product .woocommerce-tabs,
	.woocommerce div.product .related { grid-column: 1 / -1; }
}

.woocommerce div.product div.images { margin: 0; }

.woocommerce div.product div.images img {
	width: 100%;
	height: auto;
	padding: clamp(24px, 4vw, 54px);
	background: var(--paper-alt);
}

.woocommerce div.product .product_title {
	margin: 0 0 16px;
	font-family: var(--serif);
	font-size: clamp(2.1rem, 3.6vw, 3.2rem);
	font-weight: 400;
	line-height: 1.06;
	letter-spacing: -.03em;
	color: var(--ink);
}

.woocommerce div.product p.price {
	margin: 0 0 26px;
	font-family: var(--header-sans);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--ink);
}

.woocommerce div.product .woocommerce-product-details__short-description {
	max-width: 44ch;
	margin-bottom: 30px;
	font-size: 1.05rem;
	line-height: 1.65;
	color: var(--body);
}

.woocommerce div.product form.cart { display: flex; gap: 10px; margin: 0 0 30px; }

.woocommerce div.product form.cart div.quantity { margin: 0; }

.woocommerce div.product form.cart .qty {
	width: 74px;
	padding: 13px 10px;
	border: 1px solid var(--rule);
	background: var(--paper);
	font-family: var(--header-sans);
}

.woocommerce div.product .product_meta {
	padding-top: 22px;
	border-top: 1px solid var(--rule);
	font-family: var(--header-sans);
	font-size: .74rem;
	letter-spacing: .04em;
	color: var(--soft);
}

.woocommerce div.product .product_meta > span { display: block; margin-bottom: 6px; }

.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin: 0 0 26px;
	border-bottom: 1px solid var(--rule);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0 28px 0 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	padding: 12px 0;
	font-family: var(--header-sans);
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--soft);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--ink);
	box-shadow: inset 0 -2px 0 var(--accent);
}

.woocommerce div.product .woocommerce-tabs .panel {
	max-width: 66ch;
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--body);
}

.woocommerce div.product .woocommerce-tabs .panel h2 { display: none; }
.woocommerce div.product .woocommerce-tabs .panel ul { list-style: disc; padding-left: 1.3em; }
.woocommerce div.product .woocommerce-tabs .panel > * + * { margin-top: 1.1em; }

.woocommerce .related > h2 {
	margin: 0 0 6px;
	font-family: var(--serif);
	font-size: clamp(1.7rem, 2.6vw, 2.3rem);
	font-weight: 400;
	color: var(--ink);
}

.woocommerce .related ul.products { padding-left: 0; padding-right: 0; margin-bottom: 0; }

/* Notices ------------------------------------------------------------------ */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	max-width: calc(var(--wrap) + (var(--gutter) * 2));
	margin: 0 auto 20px;
	border-top-color: var(--accent);
	background: var(--paper-alt);
	font-family: var(--header-sans);
	font-size: .88rem;
}

.woocommerce-message::before,
.woocommerce-info::before { color: var(--accent); }

/* --------------------------------------------------------------------------
   Cart, checkout and account

   These are block-rendered by WooCommerce (React, `wc-block-*` markup), so the
   classic `.woocommerce` selectors do not reach them. They are interfaces
   rather than articles, so they sit outside the reading measure.
   -------------------------------------------------------------------------- */

.commerce { max-width: none; }

.section--commerce { padding-top: clamp(20px, 3vw, 36px); }

/* Blocks are authored alignwide/alignfull; keep them inside the container. */
.commerce .alignwide,
.commerce .alignfull { width: 100%; max-width: none; margin-left: 0; margin-right: 0; }

/* Headings ---------------------------------------------------------------- */

.commerce .wc-block-components-title,
.commerce .wp-block-heading {
	font-family: var(--serif) !important;
	font-weight: 400 !important;
	letter-spacing: -.01em;
	color: var(--ink);
	text-transform: none !important;
}

.commerce .wc-block-cart__empty-cart__title { font-size: clamp(1.8rem, 3vw, 2.6rem) !important; }

.commerce .wc-block-components-checkout-step__title {
	font-family: var(--serif) !important;
	font-size: clamp(1.15rem, 1.7vw, 1.45rem) !important;
	font-weight: 400 !important;
	color: var(--ink);
}

.commerce .wc-block-components-checkout-step__description { color: var(--soft); }

/* Layout ------------------------------------------------------------------ */

.commerce .wc-block-cart,
.commerce .wc-block-checkout { margin: 0; }

.commerce .wc-block-cart__sidebar,
.commerce .wc-block-checkout__sidebar {
	background: var(--paper-alt);
	padding: clamp(22px, 3vw, 34px);
}

.commerce .wc-block-components-sidebar-layout .wc-block-components-main { padding-right: clamp(0px, 3vw, 46px); }

/* Line items -------------------------------------------------------------- */

.commerce .wc-block-cart-items__header {
	font-family: var(--header-sans);
	font-size: .66rem;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--soft);
	border-bottom: 1px solid var(--ink);
}

.commerce .wc-block-cart-items__row { border-bottom: 1px solid var(--rule); }

.commerce .wc-block-cart-item__image img {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: contain;
	padding: 8px;
	background: var(--paper-alt);
}

.commerce .wc-block-components-product-name {
	font-family: var(--serif);
	font-size: 1.12rem;
	font-weight: 400;
	color: var(--ink);
	text-decoration: none;
}

.commerce .wc-block-components-product-name:hover { color: var(--accent); }

.commerce .wc-block-components-product-metadata { color: var(--soft); font-size: .85rem; }

.commerce .wc-block-components-formatted-money-amount,
.commerce .wc-block-components-product-price {
	font-family: var(--header-sans);
	font-weight: 600;
	color: var(--ink);
}

/* Quantity ---------------------------------------------------------------- */

.commerce .wc-block-components-quantity-selector {
	border: 1px solid var(--rule);
	border-radius: 0;
	background: var(--paper);
}

.commerce .wc-block-components-quantity-selector::after { display: none; }

.commerce .wc-block-components-quantity-selector__input,
.commerce .wc-block-components-quantity-selector__button {
	font-family: var(--header-sans);
	color: var(--ink);
	background: transparent;
}

.commerce .wc-block-components-quantity-selector__button:hover { color: var(--accent); }

/* Totals ------------------------------------------------------------------ */

.commerce .wc-block-components-totals-item {
	font-family: var(--header-sans);
	font-size: .9rem;
	color: var(--body);
}

.commerce .wc-block-components-totals-item__label { color: var(--body); }

.commerce .wc-block-components-totals-footer-item {
	border-top: 1px solid var(--ink);
	font-size: 1.05rem;
	color: var(--ink);
}

.commerce .wc-block-components-totals-wrapper { border-top-color: var(--rule); }

/* Buttons ----------------------------------------------------------------- */

.commerce .wc-block-components-button:not(.is-link) {
	border-radius: 0;
	background: var(--accent);
	border: 1px solid var(--accent);
	color: #fff;
	font-family: var(--header-sans);
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: .11em;
	text-transform: uppercase;
	min-height: 52px;
	transition: background .2s, border-color .2s;
}

.commerce .wc-block-components-button:not(.is-link):hover {
	background: var(--accent-dark);
	border-color: var(--accent-dark);
}

.commerce .wc-block-components-button.is-link {
	color: var(--accent);
	font-family: var(--header-sans);
	font-size: .8rem;
}

.commerce .wc-block-cart__submit-button,
.commerce .wc-block-components-checkout-place-order-button { width: 100%; }

/* Form fields ------------------------------------------------------------- */

.commerce .wc-block-components-text-input input[type="text"],
.commerce .wc-block-components-text-input input[type="email"],
.commerce .wc-block-components-text-input input[type="tel"],
.commerce .wc-block-components-text-input input[type="number"],
.commerce .wc-block-components-combobox-control input,
.commerce .wc-block-components-textarea {
	border: 1px solid var(--rule);
	border-radius: 0;
	background: var(--paper);
	font-family: var(--header-sans);
	color: var(--ink);
}

.commerce .wc-block-components-text-input.is-active input:focus,
.commerce .wc-block-components-textarea:focus {
	border-color: var(--ink);
	box-shadow: none;
	outline: none;
}

.commerce .wc-block-components-text-input label { font-family: var(--header-sans); color: var(--soft); }

.commerce .wc-block-components-checkout-step { border-bottom: 1px solid var(--rule); }

/* Panels and notices ------------------------------------------------------ */

.commerce .wc-block-components-panel__button { font-family: var(--header-sans); color: var(--ink); }

.commerce .wc-block-components-notice-banner {
	border-radius: 0;
	font-family: var(--header-sans);
}

.commerce .wc-block-components-notice-banner.is-info { border-color: var(--accent); }

/* Radio / payment options ------------------------------------------------- */

.commerce .wc-block-components-radio-control__option { font-family: var(--header-sans); }

.commerce .wc-block-components-radio-control-accordion-option,
.commerce .wc-block-components-radio-control__option {
	border-color: var(--rule);
	border-radius: 0;
}

/* Account (classic shortcode) --------------------------------------------- */

.commerce .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; }

.commerce .woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--rule);
}

.commerce .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 12px 0;
	font-family: var(--header-sans);
	font-size: .85rem;
	color: var(--body);
}

.commerce .woocommerce-MyAccount-navigation li.is-active a,
.commerce .woocommerce-MyAccount-navigation li a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   Showcases — two-card layout

   With only a pair to show, half the width each reads better than two thirds
   of a three-column grid. The extra room buys a wider image and larger type.
   -------------------------------------------------------------------------- */

.mh-card-grid--showcases-pair {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 44px);
}

/* Wider frame, since each card now has room for one. */
.mh-card-grid--showcases-pair .mh-showcase-card .mh-card__image { aspect-ratio: 3 / 2; }

.mh-card-grid--showcases-pair .mh-showcase-card h3 {
	font-size: clamp(1.5rem, 2.4vw, 2.2rem);
	line-height: 1.1;
}

.mh-card-grid--showcases-pair .mh-showcase-card .mh-card__excerpt {
	max-width: 42ch;
	font-size: 1rem;
	line-height: 1.6;
}

.mh-card-grid--showcases-pair .mh-showcase-card__body { min-height: 0; padding-top: 22px; }

/* The odd-one-out rule from the three-column grid must not apply here, or a
   single showcase would stretch the full width. */
.mh-card-grid--showcases-pair .mh-card:last-child:nth-child(odd) { grid-column: auto; }

@media (max-width: 47.99em) {
	.mh-card-grid--showcases-pair { grid-template-columns: 1fr; gap: 34px; }
	.mh-card-grid--showcases-pair .mh-showcase-card .mh-card__image { aspect-ratio: 4 / 3; }
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact__grid { display: grid; gap: clamp(44px, 6vw, 84px); }

@media (min-width: 62em) {
	.contact__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
}

.contact__form-col .h3 { margin: 0 0 26px; }

.contact__field { display: grid; gap: 8px; margin: 0 0 20px; }

.contact__field label {
	font-family: var(--header-sans);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--soft);
}

.contact__field input,
.contact__field textarea {
	width: 100%;
	padding: 13px 14px;
	border: 1px solid var(--rule);
	border-radius: 0;
	background: var(--paper);
	font-family: var(--header-sans);
	font-size: 1rem;
	color: var(--ink);
	transition: border-color .2s;
}

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

.contact__field textarea { resize: vertical; min-height: 150px; }

/* Hidden from people, left reachable for bots. */
.contact__honey {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.contact__notice {
	margin: 0 0 24px;
	padding: 14px 16px;
	border-left: 3px solid var(--accent);
	background: var(--paper-alt);
	font-family: var(--header-sans);
	font-size: .9rem;
	line-height: 1.5;
}

.contact__notice--error { border-left-color: #b3261e; }

.contact__block + .contact__block { margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--rule); }

.contact__kicker {
	margin: 0 0 14px;
	font-family: var(--header-sans);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--accent);
}

.contact__address { margin: 0 0 8px; font-size: 1.02rem; line-height: 1.6; color: var(--ink); }

.contact__coords {
	margin: 0 0 14px;
	font-family: var(--header-sans);
	font-size: .78rem;
	letter-spacing: .04em;
	color: var(--soft);
}

.contact__hours { margin: 0; }

.contact__hours li {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding: 8px 0;
	border-bottom: 1px solid var(--rule);
	font-size: .92rem;
	color: var(--body);
}

.contact__hours li:last-child { border-bottom: 0; }
.contact__hours li.is-today { font-weight: 600; color: var(--ink); }

.contact__details a { color: var(--ink); border-bottom: 1px solid var(--rule); transition: color .2s, border-color .2s; }
.contact__details a:hover { color: var(--accent); border-color: var(--accent); }
.contact__details .more { border-bottom: 0; }

/* --------------------------------------------------------------------------
   Contact — Elementor widget layer
   Additions for the widget-built contact page: the paired name/email row,
   the submit block, and the select that replaced the free-text subject.
   -------------------------------------------------------------------------- */

.contact__intro {
	max-width: 46ch;
	margin: 0 0 30px;
	font-size: 1.05rem;
	line-height: 1.65;
	color: var(--body);
}

.contact__row { display: grid; gap: 0 20px; }

@media (min-width: 40em) {
	.contact__row { grid-template-columns: 1fr 1fr; }
}

.contact__field select {
	width: 100%;
	padding: 13px 40px 13px 14px;
	border: 1px solid var(--rule);
	border-radius: 0;
	background-color: var(--paper);
	/* Chevron drawn inline so the control matches the inputs on every platform. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234a4a4a' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	font-family: var(--header-sans);
	font-size: 1rem;
	color: var(--ink);
	appearance: none;
	transition: border-color .2s;
}

.contact__field select:focus { border-color: var(--ink); outline: none; }

.contact__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 26px;
	margin-top: 10px;
}

.contact__footnote {
	flex: 1 1 240px;
	margin: 0;
	font-size: .82rem;
	line-height: 1.5;
	color: var(--soft);
}

/* Widgets carry their own column width, since each sits in its own Elementor
   container rather than inside .contact__grid. */
.contact__form-col,
.contact__details { min-width: 0; }

/* --------------------------------------------------------------------------
   Venue map
   -------------------------------------------------------------------------- */

.bumu-map { --map-h: 520px; }

.bumu-map__caption {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px 40px;
	margin: 0 0 30px;
}

.bumu-map__caption-text { max-width: 54ch; }

.bumu-map__eyebrow {
	margin: 0 0 12px;
	font-family: var(--header-sans);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--accent);
}

.bumu-map__heading {
	margin: 0 0 14px;
	font-family: var(--serif);
	font-size: clamp(1.7rem, 3.4vw, 2.6rem);
	font-weight: 400;
	line-height: 1.12;
	color: var(--ink);
}

.bumu-map__address {
	margin: 0 0 10px;
	font-size: 1.02rem;
	line-height: 1.6;
	color: var(--ink);
}

.bumu-map__note {
	margin: 0;
	font-size: .92rem;
	line-height: 1.6;
	color: var(--soft);
}

.bumu-map__directions { flex: 0 0 auto; }

.bumu-map__frame {
	position: relative;
	height: var(--map-h);
	overflow: hidden;
	background: var(--paper-alt);
	border: 1px solid var(--rule);
}

.bumu-map__frame iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	filter: var(--map-filter, none);
	transition: filter .5s ease;
}

/* A gallery site reads better with the map desaturated, but a visitor trying to
   navigate needs the real thing — so full colour returns on interaction. */
.bumu-map--muted  { --map-filter: saturate(.62) contrast(1.04); }
.bumu-map--mono   { --map-filter: grayscale(1) contrast(1.06); }

.bumu-map--muted .bumu-map__frame:hover iframe,
.bumu-map--mono  .bumu-map__frame:hover iframe,
.bumu-map--muted .bumu-map__frame:focus-within iframe,
.bumu-map--mono  .bumu-map__frame:focus-within iframe { filter: none; }

.bumu-map--bleed .bumu-map__frame {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	border-left: 0;
	border-right: 0;
}

.bumu-map__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	height: 100%;
	padding: 30px;
	text-align: center;
}

.bumu-map__placeholder p { margin: 0; max-width: 40ch; color: var(--ink); }

.bumu-map__privacy { font-size: .8rem; color: var(--soft); }

.bumu-map__credit {
	margin: 10px 0 0;
	font-family: var(--header-sans);
	font-size: .72rem;
	letter-spacing: .03em;
	color: var(--soft);
}

.bumu-map__credit a { border-bottom: 1px solid var(--rule); }
.bumu-map__credit a:hover { color: var(--accent); border-color: var(--accent); }

@media (max-width: 47.99em) {
	.bumu-map__caption { margin-bottom: 24px; }
	.bumu-map__directions { width: 100%; text-align: center; }
	/* Touch has no hover, so the desaturation would be permanent there. */
	.bumu-map--muted, .bumu-map--mono { --map-filter: none; }
}

/* --------------------------------------------------------------------------
   Journal

   Blog index, archives and the entry itself. The newest piece leads at full
   width; everything after it sits in a plain three-up grid.
   -------------------------------------------------------------------------- */

/* Category filter ------------------------------------------------------- */

.j-filter { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }

.j-filter ul {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 26px;
	padding: 14px 0;
}

.j-filter a {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	font-family: var(--header-sans);
	font-size: .78rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--soft);
	transition: color .2s;
}

.j-filter a span { font-size: .68rem; color: var(--rule); }
.j-filter a:hover { color: var(--ink); }
.j-filter a.is-current { color: var(--accent); }
.j-filter a.is-current span { color: var(--accent); }

/* Lead entry ------------------------------------------------------------- */

.j-lead {
	display: grid;
	gap: 28px 5vw;
	padding-bottom: clamp(38px, 5vw, 58px);
	margin-bottom: clamp(38px, 5vw, 58px);
	border-bottom: 1px solid var(--rule);
}

@media (min-width: 56em) {
	.j-lead { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
}

.j-lead__media {
	display: block;
	overflow: hidden;
	background: var(--paper-alt);
	aspect-ratio: 16 / 10;
}

.j-lead__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}

.j-lead:hover .j-lead__media img { transform: scale(1.03); }

.j-lead__title {
	margin: 0 0 16px;
	font-family: var(--serif);
	font-size: clamp(1.9rem, 4vw, 3rem);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -.015em;
	color: var(--ink);
}

.j-lead__title a:hover { color: var(--accent); }

.j-lead__excerpt {
	margin: 0 0 20px;
	max-width: 52ch;
	font-size: 1.02rem;
	line-height: 1.65;
}

/* Shared meta line ------------------------------------------------------- */

.j-lead__meta,
.j-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	margin: 0 0 14px;
	font-family: var(--header-sans);
	font-size: .7rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--soft);
}

.j-card__cat { color: var(--accent); }

/* Grid ------------------------------------------------------------------- */

.j-grid { display: grid; gap: clamp(30px, 3.5vw, 46px) 2.5vw; grid-template-columns: 1fr; }

@media (min-width: 40em) { .j-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .j-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.j-card__link { display: block; }

.j-card__media {
	position: relative;
	display: grid;
	place-items: center;
	overflow: hidden;
	margin-bottom: 18px;
	background: var(--paper-alt);
	aspect-ratio: 4 / 3;
}

.j-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}

.j-card__link:hover .j-card__media img { transform: scale(1.04); }

/* Stands in for a missing featured image without shipping a grey box. */
.j-card__placeholder {
	padding: 0 20px;
	font-family: var(--serif);
	font-size: 1.1rem;
	text-align: center;
	color: var(--rule);
}

.j-card__title {
	margin: 0 0 10px;
	font-family: var(--serif);
	font-size: 1.3rem;
	font-weight: 400;
	line-height: 1.22;
	color: var(--ink);
}

.j-card__link:hover .j-card__title { color: var(--accent); }

.j-card__excerpt { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--body); }

/* Entry — image-first hero ------------------------------------------------ */

.j-hero { position: relative; }

.j-hero--image {
	display: flex;
	align-items: flex-end;
	min-height: clamp(380px, 62vh, 660px);
	/* .site-header--overlay already pulls the next element up by its own
	   height, so the hero only has to clear it with padding. */
	padding: calc(var(--header-h, 66px) + 40px) 0 clamp(34px, 5vw, 60px);
	overflow: hidden;
	background: var(--ink);
}

.j-hero__media { position: absolute; inset: 0; }

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

/* Scrim only where the type sits, so the photograph stays readable as an
   image rather than being flattened under a wash. */
.j-hero--image .j-hero__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(12, 13, 18, .84) 0%, rgba(12, 13, 18, .46) 34%, rgba(12, 13, 18, .06) 64%, rgba(12, 13, 18, .40) 100%);
}

.j-hero__inner { position: relative; z-index: 1; width: 100%; }
.j-hero--image .j-hero__inner { color: #fff; }

.j-hero--plain {
	padding: clamp(44px, 6vw, 84px) 0 clamp(26px, 3vw, 40px);
	border-bottom: 1px solid var(--rule);
}

.j-hero__eyebrow {
	margin: 0 0 clamp(14px, 2vw, 22px);
	font-family: var(--header-sans);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.j-hero--image .j-hero__eyebrow a { color: rgba(255, 255, 255, .88); }
.j-hero--image .j-hero__eyebrow a:hover { color: #fff; }
.j-hero--plain .j-hero__eyebrow a { color: var(--accent); }

.j-hero__title {
	max-width: 17ch;
	margin: 0;
	font-family: var(--serif);
	font-size: clamp(2.3rem, 6.2vw, 5rem);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -.02em;
	text-wrap: balance;
}

.j-hero--plain .j-hero__title { color: var(--ink); }

.j-hero__caption {
	margin: 12px 0 0;
	font-size: .78rem;
	color: var(--soft);
}

.j-hero__caption .wrap { display: block; }

/* Body — reading column beside a sticky rail ------------------------------ */

.j-entry__body { padding: clamp(44px, 6vw, 78px) 0 clamp(48px, 6vw, 84px); }

.j-entry__grid { display: grid; gap: 36px 6vw; }

@media (min-width: 62em) {
	.j-entry__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); }
}

.j-rail { font-family: var(--header-sans); }

@media (min-width: 62em) {
	.j-rail__inner { position: sticky; top: calc(var(--header-h, 66px) + 34px); }
}

/* On narrow screens the rail becomes a compact two-up strip above the text
   rather than a tall stack the reader has to scroll past. */
.j-rail__inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 24px;
	padding-bottom: 26px;
	border-bottom: 1px solid var(--rule);
}

@media (min-width: 62em) {
	.j-rail__inner { grid-template-columns: 1fr; gap: 26px; padding-bottom: 0; border-bottom: 0; }
}

.j-rail__label {
	margin: 0 0 6px;
	font-size: .64rem;
	font-weight: 600;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--soft);
}

.j-rail__block p { margin: 0; font-size: .88rem; color: var(--ink); }

.j-rail__share { display: flex; flex-wrap: wrap; gap: 6px 14px; }

.j-rail__share a {
	font-size: .82rem;
	color: var(--body);
	border-bottom: 1px solid var(--rule);
	transition: color .2s, border-color .2s;
}

.j-rail__share a:hover { color: var(--accent); border-color: var(--accent); }

/* Reading column ---------------------------------------------------------- */

.j-standfirst {
	max-width: 34ch;
	margin: 0 0 clamp(28px, 3.5vw, 42px);
	font-family: var(--serif);
	font-size: clamp(1.35rem, 2.3vw, 1.85rem);
	line-height: 1.34;
	color: var(--ink);
}

.j-prose { max-width: 66ch; font-size: 1.09rem; line-height: 1.78; }

/* The site sets uppercase sans subheads; inside a long read that shouts, so
   the journal uses quiet serif ones instead. */
.j-prose h2,
.j-prose h3 {
	font-family: var(--serif);
	font-weight: 400;
	letter-spacing: -.01em;
	text-transform: none;
	color: var(--ink);
}

.j-prose h2 { margin-top: 2em; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.2; }
.j-prose h3 { margin-top: 1.7em; font-size: 1.3rem; }

/* A slightly larger opening paragraph carries the eye in from the standfirst. */
.j-prose > p:first-of-type { font-size: 1.16rem; line-height: 1.7; color: var(--ink); }

.j-prose a { text-decoration: none; border-bottom: 1px solid var(--accent); }
.j-prose a:hover { background: var(--accent-tint); }

/* Figures may break the measure and run wider than the text. */
.j-prose figure { max-width: none; width: min(100%, 46rem); margin-top: 2.2em; }
.j-prose figure img { width: 100%; }

.j-prose figcaption { margin-top: 10px; font-size: .8rem; line-height: 1.5; color: var(--soft); }

.j-entry__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-width: 66ch;
	margin: clamp(34px, 4vw, 48px) 0 0;
	padding-top: 24px;
	border-top: 1px solid var(--rule);
}

.j-entry__tags a {
	display: inline-block;
	padding: 5px 12px;
	border: 1px solid var(--rule);
	border-radius: 100px;
	font-family: var(--header-sans);
	font-size: .74rem;
	color: var(--soft);
	transition: border-color .2s, color .2s;
}

.j-entry__tags a:hover { border-color: var(--ink); color: var(--ink); }

/* Previous / next --------------------------------------------------------- */

.j-pn { border-top: 1px solid var(--rule); }

.j-pn__grid { display: grid; gap: 0; }

@media (min-width: 48em) {
	.j-pn__grid { grid-template-columns: 1fr 1fr; }
	.j-pn__link + .j-pn__link { border-left: 1px solid var(--rule); }
	.j-pn__link--next { padding-left: clamp(24px, 3vw, 44px); }
}

.j-pn__link { display: block; padding: clamp(26px, 3vw, 40px) 0; }
.j-pn__link + .j-pn__link { border-top: 1px solid var(--rule); }

@media (min-width: 48em) {
	.j-pn__link + .j-pn__link { border-top: 0; }
}

.j-pn__dir {
	display: block;
	margin-bottom: 16px;
	font-family: var(--header-sans);
	font-size: .66rem;
	font-weight: 600;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--soft);
}

.j-pn__row { display: flex; align-items: center; gap: 18px; }

.j-pn__thumb { flex: 0 0 84px; }

.j-pn__thumb img {
	width: 84px;
	height: 64px;
	object-fit: cover;
}

.j-pn__title {
	font-family: var(--serif);
	font-size: clamp(1.1rem, 1.7vw, 1.4rem);
	line-height: 1.22;
	color: var(--ink);
	transition: color .2s;
}

.j-pn__link:hover .j-pn__title { color: var(--accent); }

.j-related { background: var(--paper-alt); }