/* ------------------------------------------------------------------ type */
@font-face {
	font-family: "TeX Gyre Heros";
	src: url("../fonts/texgyreheros-regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "TeX Gyre Heros";
	src: url("../fonts/texgyreheros-bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ------------------------------------------------------------------ system: the whole of it */
:root {
	--font: "TeX Gyre Heros", "Helvetica Neue", Helvetica, Arial, sans-serif;

	--fs-title: 44px;   /* page titles, bold */
	--fs-head: 24px;    /* section headings, previous/next, wordmark, bold */
	--fs-body: 17px;    /* body, nav, captions, exhibition texts */
	--fs-small: 13px;   /* labels, dates, materials, footer, small links */

	--lh-title: 1.1;
	--lh-text: 1.5;
	--lh-long: 1.6;
	--tracking-title: -0.02em;

	--ink: #111111;
	--grey: #6B6B6B;
	--paper: #FFFFFF;
	--line: 1px solid var(--ink);

	--gutter-chrome: 48px;  /* header, footer */
	--gutter: 64px;         /* content */
	--narrow: 1120px;       /* = 160 px side padding at 1440 px */
	--col-gap: 24px;
	--section: 200px;
	--block: 64px;          /* gap inside a section */

	--ease: cubic-bezier(.2, .6, .2, 1);
}

@media (max-width: 1100px) {
	:root { --gutter-chrome: 32px; --gutter: 40px; --section: 140px; --block: 48px; }
}
@media (max-width: 760px) {
	:root { --gutter-chrome: 20px; --gutter: 20px; --col-gap: 16px; --section: 96px; --block: 40px; }
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: var(--lh-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-synthesis: none;   /* never fake an italic */
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
em, i, cite, address { font-style: normal; }
img { display: block; max-width: 100%; height: auto; }
strong, b { font-weight: 700; }

a { color: inherit; text-decoration: none; }

/* Links: underlined with a 1 px border */
.u, .prose a {
	border-bottom: 1px solid currentColor;
	transition: color .2s var(--ease), border-color .2s var(--ease);
}
.u:hover, .prose a:hover { color: var(--grey); }

:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip-link:focus {
	position: fixed; top: 8px; left: 8px; z-index: 10; width: auto; height: auto; clip: auto;
	background: var(--paper); padding: 8px 12px; border: var(--line);
}

/* type roles */
.t-title {
	font-size: var(--fs-title);
	font-weight: 700;
	line-height: var(--lh-title);
	letter-spacing: var(--tracking-title);
	overflow-wrap: break-word;
	hyphens: auto;
}
.t-head { font-size: var(--fs-head); font-weight: 700; line-height: var(--lh-title); letter-spacing: var(--tracking-title); }
.t-body { font-size: var(--fs-body); line-height: var(--lh-text); }
.t-small { font-size: var(--fs-small); line-height: var(--lh-text); }
.t-grey { color: var(--grey); }
.t-bold { font-weight: 700; }

/* ------------------------------------------------------------------ layout */
.wrap { padding-inline: var(--gutter); }
.wrap--narrow { padding-inline: max(var(--gutter), calc((100% - var(--narrow)) / 2)); }

.site-main { padding-top: 72px; padding-bottom: var(--section); }
.section { margin-top: var(--section); }
.section--first { margin-top: var(--block); }
.section-head {
	display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
	margin-bottom: 32px;
}
.section-head > * { flex-shrink: 0; }

.grid12 {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--col-gap);
}

.more { margin-top: 40px; }

/* ------------------------------------------------------------------ header */
.site-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 12px 40px;
	padding: 32px var(--gutter-chrome) 0;
	view-transition-name: site-header;
}
.site-header > * { flex-shrink: 0; }

.wordmark {
	font-size: var(--fs-head);
	font-weight: 700;
	line-height: var(--lh-title);
	letter-spacing: 0;
	text-transform: uppercase;   /* the only uppercase text */
}

.nav { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.nav > li { flex-shrink: 0; }
.nav a { border-bottom: 1px solid transparent; transition: border-color .2s var(--ease), color .2s var(--ease); }
.nav a:hover, .nav a[aria-current] { border-bottom-color: currentColor; }
.nav .is-muted a { color: var(--grey); }

/* Mobile menu: a text button, no box. Without JS the nav simply stays visible. */
.nav-toggle {
	display: none;
	border: 0; background: none; padding: 0; margin-left: auto;
	font: inherit; color: var(--ink); cursor: pointer;
	border-bottom: 1px solid transparent;
}
.nav-toggle:hover, .nav-toggle[aria-expanded="true"] { border-bottom-color: currentColor; }
@media (max-width: 760px) {
	.js .nav-toggle { display: block; }
	.js .site-nav { display: none; flex-basis: 100%; }
	.js .site-nav.is-open { display: block; }
	.js .site-nav .nav { flex-direction: column; gap: 10px; padding: 16px 0 8px; }
}

/* ------------------------------------------------------------------ footer */
.site-footer {
	border-top: var(--line);
	margin-inline: var(--gutter-chrome);
	padding: 40px 0 48px;
	font-size: var(--fs-small);
	line-height: var(--lh-text);
}
.footer-cols { display: flex; flex-wrap: wrap; gap: 32px 64px; }
.footer-cols > * { flex-shrink: 0; }
.footer-cols .wordmark { margin-right: auto; }
.footer-links li + li, .footer-links + .footer-links { margin-top: 2px; }
.footer-links a:hover, .legal-links a:hover { border-bottom: 1px solid currentColor; }

.newsletter { display: flex; flex-direction: column; gap: 8px; min-width: 240px; }
.newsletter-row { display: flex; gap: 16px; align-items: baseline; border-bottom: var(--line); }
.newsletter input {
	flex: 1; min-width: 0; border: 0; padding: 6px 0; background: none;
	font: inherit; color: var(--ink); border-radius: 0;
}
.newsletter input::placeholder { color: var(--grey); }
.newsletter input:focus { outline: none; }
.newsletter button {
	border: 0; background: none; padding: 0; font: inherit; color: var(--ink); cursor: pointer;
}
.newsletter button:hover { color: var(--grey); }
.newsletter-note { color: var(--grey); min-height: 1.5em; }

.footer-legal { margin-top: 48px; color: var(--grey); }
.legal-links { display: flex; flex-wrap: wrap; gap: 4px 0; }
.legal-links > li { flex-shrink: 0; }
.legal-links > li + li::before { content: "·"; padding: 0 12px; }

/* ------------------------------------------------------------------ images */
.media { position: relative; }
.media img { width: 100%; }

.media--contain { display: flex; justify-content: center; }
.media--contain img { width: auto; max-width: 100%; }

.ratio-3x2 { aspect-ratio: 3 / 2; overflow: hidden; background: #fff; }
.ratio-3x2 img { width: 100%; height: 100%; object-fit: cover; }

.caption { margin-top: 12px; }

/* fade-in on scroll: only once JS is running, never above the fold */
.js .reveal { opacity: 0; transition: opacity .9s var(--ease); }
.js .reveal.is-visible { opacity: 1; }

/* quiet hover on linked images */
a .ratio-3x2 img, a.work-image img { transition: opacity .3s var(--ease); }
a:hover .ratio-3x2 img, a.work-image:hover img { opacity: .88; }

/* ------------------------------------------------------------------ home: hero */
.hero-image {
	display: flex; justify-content: center;
}
.hero-image img {
	width: auto;
	max-width: 100%;
	max-height: min(760px, 66vh);   /* title stays above the fold on a laptop */
}
.hero-text { margin-top: 32px; }
.hero-text .t-title { margin-top: 6px; }
.hero-text .t-body { margin-top: 12px; }

/* home: upcoming */
.upcoming { align-items: end; row-gap: 24px; }
.upcoming-image { grid-column: 1 / span 7; }
.upcoming-text { grid-column: 9 / span 4; }
.upcoming-text .t-head { margin-top: 8px; }
.upcoming-text .t-body { margin-top: 16px; }
.upcoming-text .u { display: inline-block; margin-top: 24px; }

/* cards: exhibitions */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px var(--col-gap); }
.card .caption > span { display: block; }

/* ------------------------------------------------------------------ exhibition + artist + artwork pages */
.page-head .t-small { margin-bottom: 10px; }
.page-head .t-body { margin-top: 14px; }

.install { margin-top: var(--block); }
.install .caption { text-align: left; }
.install img { max-height: 92vh; width: auto; margin-inline: auto; }

.about { margin-top: var(--block); align-items: stretch; }
.facts { grid-column: 1 / span 3; align-self: start; }
.fact + .fact { margin-top: 20px; }
.fact dt { font-size: var(--fs-small); color: var(--grey); line-height: var(--lh-text); }
.fact dd { font-size: var(--fs-body); line-height: var(--lh-text); }

/* The text column is exactly as tall as the facts column:
   height 0 takes it out of the row-height calculation, min-height 100% stretches it back. */
.readmore {
	grid-column: 5 / span 7;
	max-width: 620px;
	display: flex;
	flex-direction: column;
}
.js .readmore.is-clamped { height: 0; min-height: 100%; }
.prose { font-size: var(--fs-body); line-height: var(--lh-long); }
.js .readmore.is-clamped .prose {
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}
.readmore-foot { flex-shrink: 0; padding-top: 8px; line-height: var(--lh-text); }
.readmore-toggle {
	border: 0; border-bottom: 1px solid currentColor; background: none; padding: 0;
	font: inherit; color: inherit; cursor: pointer;
}
.readmore-toggle:hover { color: var(--grey); }

/* Enquire: text button (JS only) + the enquiry form in place */
.enquire-toggle { display: none; border: 0; border-bottom: 1px solid currentColor; background: none; padding: 0;
	font: inherit; color: inherit; cursor: pointer; }
.js .enquire-toggle { display: inline; }
.enquire-toggle:hover { color: var(--grey); }
.enquire { margin-top: 24px; max-width: 620px; scroll-margin-top: 96px; }
.enquire[hidden] { display: none; }
.readmore:not(.is-clamped) .readmore-toggle, .readmore:not(.is-clamped) .readmore-sep { display: none; }
.install.section { margin-top: var(--section); }
.readmore:not(.is-clamped) .readmore-foot { padding-top: 24px; }

.prose p + p { margin-top: 1em; }

/* works */
.works { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px var(--col-gap); }
.work-image {
	display: flex; align-items: flex-end; justify-content: center;
	aspect-ratio: 4 / 5; background: #fff;
}
.work-image img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.work .caption { margin-top: 16px; }
.work .caption .t-small { margin-top: 2px; }
.work .caption .u { display: inline-block; margin-top: 8px; }

.pager {
	display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap);
	border-top: var(--line); padding-top: 24px;
}
.pager a { display: block; transition: color .2s var(--ease); }
.pager a:hover { color: var(--grey); }
.pager .next { text-align: right; }
.pager .t-head { display: block; margin-top: 6px; }

/* archives */
.year + .year { margin-top: 120px; }
.year .t-head { margin-bottom: 32px; }

.group-label { margin-bottom: 16px; }
.artist-list { columns: 3; column-gap: var(--col-gap); }
.artist-list li { break-inside: avoid; padding: 4px 0; }
.artist-list a { border-bottom: 1px solid transparent; transition: border-color .2s var(--ease); }
.artist-list a:hover { border-bottom-color: currentColor; }

/* artwork */
.artwork-images > * + * { margin-top: var(--block); }
.artwork-images img { max-height: 88vh; width: auto; margin-inline: auto; }
.col-text { grid-column: 5 / span 7; max-width: 620px; }
.price { font-size: var(--fs-body); }
.price-note { font-size: var(--fs-body); color: var(--grey); }
.price-note a { border-bottom: 1px solid currentColor; }
.col-text > .u { display: inline-block; margin-top: 16px; }
.credit { margin-top: 32px; }
.portrait:empty { display: none; }

.portrait { grid-column: 1 / span 3; }

/* generic pages */
.page-content { max-width: 620px; margin-top: var(--block); }
.page-content.prose { font-size: var(--fs-body); line-height: var(--lh-long); }
.page-content h2, .page-content h3 { font-size: var(--fs-head); line-height: var(--lh-title); margin: 1.6em 0 .6em; }
/* the few core blocks the kept pages use (no page builder) */
.page-content > * + * { margin-top: 1em; }
.page-content figure { margin-inline: 0; }
.page-content img { max-width: 100%; height: auto; display: block; }
.page-content figcaption { font-size: var(--fs-small); color: var(--grey); line-height: var(--lh-text); margin-top: 10px; }
.page-content ul, .page-content ol { padding-left: 1.2em; }
.page-content hr { border: 0; border-top: var(--line); margin: 2em 0; }
.page-content .wp-block-buttons { display: flex; flex-direction: column; gap: 10px; }
.page-content .wp-block-button__link {
	display: block; padding: 14px 16px; border: var(--line); border-radius: 0;
	background: none; color: var(--ink); text-align: center; text-decoration: none;
}
.page-content .wp-block-button__link:hover { background: var(--ink); color: #fff; }

/* ------------------------------------------------------------------ mobile: one column, facts above text */
@media (max-width: 900px) {
	.grid12 { display: block; }
	.upcoming-text, .readmore, .col-text { margin-top: 32px; }
	.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.artist-list { columns: 2; }
	.portrait { max-width: 320px; margin-bottom: 32px; }

	.js .readmore.is-clamped { height: auto; min-height: 0; }
	.js .readmore.is-clamped .prose { max-height: 22em; }
}
@media (max-width: 760px) {
	.site-main { padding-top: 48px; }
	.wrap--narrow, .wrap { padding-inline: var(--gutter); }
	.hero-image { margin-inline: calc(var(--gutter) * -1); }
	.install, .artwork-images { padding-inline: 0; }   /* full bleed: they carry .wrap themselves */
	.hero-image img, .install img, .artwork-images img { max-height: none; width: 100%; }
	.install .caption, .artwork-images .caption { padding-inline: var(--gutter); }
	.cards, .works { grid-template-columns: 1fr; gap: 48px; }
	.artist-list { columns: 1; }
	.section-head { flex-wrap: wrap; }
	.pager .t-head { font-size: var(--fs-body); }
}

/* ------------------------------------------------------------------ WooCommerce
   Its own cart/checkout block styles stay; only fonts and colours on top. Don't restyle the checkout (Germanized). */
.woocommerce, .woocommerce-page, .wc-block-components-form, .wc-block-cart, .wc-block-checkout,
.woocommerce input, .woocommerce select, .woocommerce textarea, .woocommerce button,
.wc-block-components-text-input input, .wc-block-components-button {
	font-family: var(--font);
}
.woocommerce, .woocommerce-page, .wc-block-cart, .wc-block-checkout { color: var(--ink); }
.woocommerce .price, .wc-block-components-product-price { color: var(--ink); }
.woocommerce del, .woocommerce .woocommerce-breadcrumb, .wc-block-components-product-metadata { color: var(--grey); }
.shop-content { margin-top: var(--block); }

/* ------------------------------------------------------------------ motion */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; animation-timing-function: var(--ease); }

@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
	.js .reveal { opacity: 1; }
}