/* =========================================================================
   Tilsitt theme — styles
   -------------------------------------------------------------------------
   Sober black & white, serif headings, generous white space.
   Plain CSS with custom properties: change the tokens, the site follows.

   One file per section, loaded in the order listed in inc/assets.php:
     01-tokens, 02-base, 03-layout, 04-header, 05-footer, 06-components,
     07-gallery/* (grids, cards, artist showroom and biography, artwork page,
     inquiry form, lightbox, events), 08-pages/* (home, slideshow, generic
     pages, contact, editor blocks).
   ========================================================================= */

/* =========================================================================
   1. Tokens
   ========================================================================= */

/* Instrument Sans (SIL Open Font License, assets/fonts/OFL.txt), hosted with
   the theme: no request to Google. Variable fonts, weights 400 to 700; the
   latin-ext files are only downloaded for characters outside basic Latin. */
@font-face {
	font-family: "Instrument Sans";
	font-style: normal;
	font-weight: 400 700;
	font-stretch: 75% 100%;
	font-display: swap;
	src: url("https://tilsittgallery.com/wp-content/themes/tilsitt/assets/css/../fonts/instrument-sans-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Instrument Sans";
	font-style: normal;
	font-weight: 400 700;
	font-stretch: 75% 100%;
	font-display: swap;
	src: url("https://tilsittgallery.com/wp-content/themes/tilsitt/assets/css/../fonts/instrument-sans-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Instrument Sans";
	font-style: italic;
	font-weight: 400 700;
	font-stretch: 75% 100%;
	font-display: swap;
	src: url("https://tilsittgallery.com/wp-content/themes/tilsitt/assets/css/../fonts/instrument-sans-italic-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Instrument Sans";
	font-style: italic;
	font-weight: 400 700;
	font-stretch: 75% 100%;
	font-display: swap;
	src: url("https://tilsittgallery.com/wp-content/themes/tilsitt/assets/css/../fonts/instrument-sans-italic-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* Colours */
	--ink:   #111;
	--paper: #fff;
	--stone: #f3f1ec;
	--line:  #e4e1da;
	--mute:  #6b6b6b;

	/* Fonts */
	--font-serif: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; /* headings: same face as the text */
	--font-sans:  "Instrument Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

	/* Type scale */
	--size-xs: 0.75rem;
	--size-s:  0.875rem;
	--size-m:  1.0625rem;
	--size-l:  1.5rem;
	--size-xl: clamp(2rem, 4vw, 3rem);

	/* Spacing scale */
	--space-1: 0.5rem;
	--space-2: 1rem;
	--space-3: 1.5rem;
	--space-4: 2.5rem;
	--space-5: 4rem;
	--space-6: 6rem;

	/* Layout */
	--container: 1280px;
	--narrow:    720px;
	--gutter:    clamp(1rem, 4vw, 3rem);
	--header-h:  5.5rem;

	--accent: #0177a9;
	--accent-dark: #0a3c51;
	--klein: #002fa7; /* International Klein Blue */
	--klein-dark: #001d6b; /* hover */
}

/* =========================================================================
   2. Reset & base elements
   ========================================================================= */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* anchor links ("See more") glide instead of jumping */
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Column layout: the content grows, so the footer stays at the bottom of short pages */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font: var(--size-m)/1.6 var(--font-sans);
	-webkit-font-smoothing: antialiased;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Headings */
h1,
h2,
h3,
h4 {
	margin: 0 0 var(--space-2);
	font-family: var(--font-serif);
	font-weight: 400;
	line-height: 1.15;
}

h1 {
	font-size: var(--size-xl);
}

h2 {
	font-size: var(--size-l);
}

h3 {
	font-size: 1.25rem;
}

/* Text & links */
p {
	margin: 0 0 var(--space-2);
}

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

a:hover {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

button {
	font: inherit;
}

figure {
	margin: 0;
}

ul.menu,
ul.social {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Accessibility */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.skip-link {
	position: absolute;
	top: 0;
	left: -999px;
	z-index: 100;
	padding: var(--space-1) var(--space-2);
	background: var(--ink);
	color: var(--paper);
}

.skip-link:focus {
	left: var(--space-2);
}

/* =========================================================================
   3. Layout helpers
   ========================================================================= */

.container {
	max-width: var(--container);
	margin: 0 auto;
	padding: var(--space-4) var(--gutter) var(--space-5);
}

/* Text pages: reading width, but aligned on the same left edge as every
   other page (the logo), not centred */
.container--narrow > * {
	max-width: var(--narrow);
}

.site-content {
	flex: 1 0 auto;
}

/* Section title under a thin rule (events, biography, category);
   same look as .section-head on the home page */
.section-title {
	margin: var(--space-5) 0 var(--space-3);
	padding-top: var(--space-3);
	font-size: var(--size-l);
	border-top: 1px solid var(--line);
}

.section-more {
	margin-top: var(--space-4);
}

/* Section heading with a "see all" link on the right (home) */
.section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-1) var(--space-3);
	margin-bottom: var(--space-3);
	padding-top: var(--space-3);
	border-top: 1px solid var(--line);
}

.section-head__title {
	margin: 0;
	font-size: var(--size-l);
}

.muted {
	color: var(--mute);
}

.breadcrumb {
	margin-bottom: var(--space-3);
	font-size: var(--size-s);
	color: var(--mute);
}

.page__header {
	margin-bottom: var(--space-4);
}

.page__title {
	margin: 0;
}

/* Category description under the title */
.page__intro {
	max-width: var(--narrow);
	margin: var(--space-2) 0 0;
	color: var(--mute);
}

/* Secondary links in a row (404) */
.page__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-4);
	margin-top: var(--space-3);
}

/* "49 available works" under a list title (/artworks/, categories) */
.page__count {
	margin: var(--space-1) 0 0;
	font-size: var(--size-s);
	color: var(--mute);
}

/* "Clear" after the search results count (archive-artwork.php) */
.page__count-link {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Category filters above an artwork list (tilsitt-gallery/artwork-filters.php).
   Same animated underline as the navigation; on small screens the row
   scrolls sideways instead of wrapping onto several lines. The search field
   ends the row, on the right. */
.filters {
	display: flex;
	align-items: flex-start;
	gap: var(--space-1) var(--space-4);
	margin: 0 0 var(--space-4);
	border-bottom: 1px solid var(--line);
}

.filters__nav {
	flex: 1 1 auto;
	min-width: 0;
}

.filters__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-3);
	margin: 0;
	padding: 0 0 var(--space-2);
	list-style: none;
}

.filters__link {
	display: inline-block;
	padding-bottom: 0.3em;
	font-size: var(--size-s);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--mute);
	background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
	transition: background-size 0.35s ease, color 0.2s;
}

.filters__link:hover,
.filters__link:focus-visible {
	color: var(--ink);
	text-decoration: none;
	background-size: 100% 1px;
}

.filters__link.is-active {
	color: var(--ink);
	background-size: 100% 1px;
}

/* "+ n More / − Less": folds the categories that do not fit (filters.js, desktop) */
.filters.is-collapsed .filters__item--extra {
	display: none;
}

.filters__toggle {
	padding: 0 0 0.3em;
	font: inherit;
	font-size: var(--size-s);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--ink);
	background: none;
	border: 0;
	cursor: pointer;
}

.filters__toggle:hover {
	color: var(--mute);
}

.filters__toggle[hidden] {
	display: none;
}

.filters__count {
	margin-left: 0.2em;
	font-size: 0.75em;
	letter-spacing: 0;
	color: var(--mute);
}

@media (max-width: 639px) {
	.filters__list {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

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

/* Artwork search (tilsitt-gallery/artwork-search.php): no box, a thin
   magnifier and the filters' animated underline. It widens on focus, inside
   a fixed space, so the categories next to it do not move. */
.search {
	display: flex;
	flex: 0 0 auto;
	justify-content: flex-end;
	align-items: center;
	gap: 0.5em;
	width: 15rem;
	margin-left: auto;
	padding-top: 0.2em; /* same baseline as the category links */
	padding-bottom: var(--space-2);
	color: var(--mute);
}

.search:focus-within {
	color: var(--ink);
}

.search__icon {
	flex: 0 0 auto;
}

.search__input {
	width: 8rem;
	margin: 0;
	padding: 0 0 0.3em;
	font: inherit;
	font-size: var(--size-s);
	letter-spacing: 0.02em;
	color: var(--ink);
	background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
	border: 0;
	border-radius: 0;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	transition: width 0.35s ease, background-size 0.35s ease;
}

.search__input::placeholder {
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mute);
	opacity: 1;
}

.search__input:hover,
.search__input:focus,
.search__input:not(:placeholder-shown) {
	background-size: 100% 1px;
}

.search__input:focus,
.search__input:not(:placeholder-shown) {
	width: 13rem;
}

.search__input::-webkit-search-cancel-button,
.search__input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

@media (max-width: 639px) {
	.filters {
		flex-direction: column-reverse;
		align-items: stretch;
		gap: var(--space-1);
	}

	.search {
		width: auto;
		margin-left: 0;
		padding-top: 0;
		padding-bottom: 0;
	}

	.search__input,
	.search__input:focus,
	.search__input:not(:placeholder-shown) {
		flex: 1 1 auto;
		width: auto;
		font-size: var(--size-m); /* 16px or more: iOS does not zoom the page on focus */
	}
}

@media (prefers-reduced-motion: reduce) {
	.filters__link,
	.search__input {
		transition: none;
	}
}

/* Page numbers under a list (the_posts_pagination) */
.pagination {
	margin-top: var(--space-5);
	padding-top: var(--space-3);
	border-top: 1px solid var(--line);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1) var(--space-2);
	font-size: var(--size-s);
	letter-spacing: 0.04em;
}

.pagination .page-numbers {
	padding-bottom: 0.2em;
	color: var(--mute);
}

.pagination a.page-numbers:hover {
	color: var(--ink);
	text-decoration: none;
}

.pagination .page-numbers.current {
	color: var(--ink);
	border-bottom: 1px solid currentColor;
}

.pagination .next {
	margin-left: auto;
}

/* =========================================================================
   4. Header & navigation
   ========================================================================= */

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

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--paper);
	border-bottom: 1px solid var(--line);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	max-width: var(--container);
	height: var(--header-h);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

/* --- Brand (logo or site name) ------------------------------------------ */

.site-brand .custom-logo-link {
	display: block;
	line-height: 0;
}

/* Wide logo (≈10.5:1): set by height, width follows */
.site-brand img {
	width: auto;
	height: 1.375rem; /* ≈ 230 px wide */
}

@media (max-width: 860px) {
	.site-brand img {
		height: 1.125rem; /* ≈ 190 px wide, leaves room for the burger */
	}
}

.site-brand__text {
	font-family: var(--font-serif);
	font-size: 1.5rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* --- Primary menu (desktop) --------------------------------------------- */

/* Items aligned on the text baseline, so that the language button lines up
   with the links even though its box is not the same height */
.site-nav .menu {
	display: flex;
	align-items: baseline;
	gap: var(--space-3);
}

.site-nav .menu > li {
	position: relative;
}

.site-nav a {
	font-size: var(--size-s);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Animated underline: a 1px line drawn left to right on hover.
   The language switcher (.site-lang) is excluded. */
.site-nav .menu > li:not(.site-lang) > a {
	padding-bottom: 0.3em;
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
	transition: background-size 0.35s ease;
}

.site-nav .menu > li:not(.site-lang) > a:hover,
.site-nav .menu > li:not(.site-lang) > a:focus-visible {
	text-decoration: none; /* cancels the global a:hover underline */
	background-size: 100% 1px;
}

/* Current page: line always visible (as specific as the rule above) */
.site-nav .menu > li.current-menu-item:not(.site-lang) > a,
.site-nav .menu > li.current-menu-ancestor:not(.site-lang) > a {
	background-size: 100% 1px;
}

/* No animation for visitors who disable motion in their system settings */
@media (prefers-reduced-motion: reduce) {
	.site-nav .menu > li > a {
		transition: none;
	}
}

/* Dropdown sub-menus */
.site-nav .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 12rem;
	margin: 0;
	padding: var(--space-1) 0;
	list-style: none;
	background: var(--paper);
	border: 1px solid var(--line);
}

.site-nav .sub-menu a {
	display: block;
	padding: var(--space-1) var(--space-2);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.site-nav li:hover > .sub-menu,
.site-nav li:focus-within > .sub-menu {
	display: block;
}

/* --- Language switcher (GTranslate) --------------------------------------
   Last item of the primary menu, injected in functions.php. */

/* The item keeps the menu's font size so that its text sits on the same
   baseline as the other links; the small size is set on its contents. */
.site-lang {
	position: relative;
}

/* "EN ▾": same look and animated underline as the menu links */
.site-lang__toggle {
	display: inline-flex;
	align-items: baseline;
	gap: 0.45em;
	padding: 0;
	font: inherit;
	font-size: var(--size-s);
	font-weight: 600;
	line-height: normal; /* box hugs the text, like an inline link */
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink);
	background: none;
	border: 0;
	cursor: pointer;
}

/* The underline is drawn under the code only, exactly like the links */
.site-lang__code {
	padding-bottom: 0.3em;
	background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
	transition: background-size 0.35s ease;
}

.site-lang__toggle:hover .site-lang__code,
.site-lang__toggle:focus-visible .site-lang__code,
.site-lang.is-open .site-lang__code {
	background-size: 100% 1px;
}

.site-lang__toggle[hidden] {
	display: none;
}

/* Thin chevron, turns up when the list is open */
.site-lang__arrow {
	width: 0.4em;
	height: 0.4em;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
	transition: transform 0.2s ease;
}

.site-lang.is-open .site-lang__arrow {
	transform: translateY(0.1em) rotate(225deg);
}

/* Dropdown list, like the sub-menus */
.site-lang__list {
	display: none;
	position: absolute;
	top: calc(100% + var(--space-1));
	right: 0;
	z-index: 20;
	min-width: 11rem;
	margin: 0;
	padding: var(--space-1) 0;
	font-size: var(--size-s);
	list-style: none;
	background: var(--paper);
	border: 1px solid var(--line);
}

.site-lang.is-open .site-lang__list {
	display: block;
}

.site-lang__option {
	display: block;
	width: 100%;
	padding: 0.4rem var(--space-2);
	font: inherit;
	text-align: left;
	color: var(--mute);
	background: none;
	border: 0;
	cursor: pointer;
}

.site-lang__option:hover,
.site-lang__option:focus-visible {
	color: var(--ink);
	background: var(--stone);
}

.site-lang__option.is-active {
	color: var(--ink);
}

.site-lang__option.is-active::after {
	content: " ✓";
}

/* GTranslate's own select: only shown if main.js could not take over */
.site-lang.is-ready .site-lang__widget {
	display: none;
}

.site-lang select {
	padding: 0.25rem 0.5rem;
	font: inherit;
	font-size: var(--size-s);
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--line);
	cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
	.site-lang__code,
	.site-lang__arrow {
		transition: none;
	}
}

/* --- Burger button (mobile) --------------------------------------------- */

/* 44 px square: comfortable touch target */
.nav-toggle {
	display: none;
	position: relative;
	width: 2.75rem;
	height: 2.75rem;
	margin-right: -0.625rem; /* bars aligned with the page edge */
	border: 0;
	background: none;
	cursor: pointer;
}

.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
	content: "";
	position: absolute;
	left: 0.625rem;
	width: 1.5rem;
	height: 1.5px;
	background: var(--ink);
	transition: transform 0.2s, background 0.2s;
}

.nav-toggle__bar {
	top: 50%;
}

/* The outer bars are positioned inside the middle one: no extra offset */
.nav-toggle__bar::before,
.nav-toggle__bar::after {
	left: 0;
}

.nav-toggle__bar::before {
	top: -0.4rem;
}

.nav-toggle__bar::after {
	top: 0.4rem;
}

/* Burger → cross when the menu is open */
.nav-open .nav-toggle__bar {
	background: transparent;
}

.nav-open .nav-toggle__bar::before {
	transform: translateY(0.4rem) rotate(45deg);
}

.nav-open .nav-toggle__bar::after {
	transform: translateY(-0.4rem) rotate(-45deg);
}

/* --- Mobile menu (full-screen panel) ------------------------------------ */

@media (max-width: 860px) {
	.nav-toggle {
		display: block;
	}

	/* Panel hung under the header (not at a fixed distance from the top of
	   the screen), so it never covers the logo or the burger, even when the
	   WordPress admin bar pushes the header down. Fades and slides in. */
	.site-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		height: calc(100vh - var(--header-h));
		height: calc(100dvh - var(--header-h));
		padding: var(--space-4) var(--gutter) var(--space-5);
		overflow: auto;
		visibility: hidden;
		opacity: 0;
		transform: translateY(-0.5rem);
		background: var(--paper);
		transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
	}

	.nav-open .site-nav {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: opacity 0.25s ease, transform 0.25s ease;
	}

	.nav-open {
		overflow: hidden;
		/* lock page scroll behind the panel */
	}

	.site-nav .menu {
		flex-direction: column;
		align-items: center;
		gap: var(--space-2);
	}

	/* Same type as on desktop (sans, uppercase, spaced), one step larger
	   for the finger. */
	.site-nav a {
		font-size: var(--size-m);
	}

	.site-nav .sub-menu {
		display: block;
		position: static;
		padding: 0 0 0 var(--space-2);
		border: 0;
	}

	.site-nav .sub-menu a {
		padding: var(--space-1) 0;
		font-size: var(--size-m);
	}

	.site-lang {
		margin-top: var(--space-4);
	}

	/* Mobile menu: all languages listed directly, no dropdown */
	.site-lang.is-ready .site-lang__toggle {
		display: none;
	}

	.site-lang.is-ready .site-lang__list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--space-1) var(--space-3);
		position: static;
		min-width: 0;
		padding: 0;
		background: none;
		border: 0;
	}

	.site-lang__option {
		padding: 0;
		font-size: var(--size-m);
	}

	.site-lang__option:hover,
	.site-lang__option:focus-visible {
		background: none;
	}
}

@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
	.site-nav,
	.nav-open .site-nav {
		transform: none;
		transition: none;
	}
}

/* =========================================================================
   5. Footer
   ========================================================================= */

/* Compact: small type and tight spacing, the page content stays the focus */
.site-footer {
	font-size: var(--size-xs);
	line-height: 1.5;
	background: var(--stone);
	border-top: 1px solid var(--line);
}

.site-footer__inner {
	max-width: var(--container);
	margin: 0 auto;
	padding: var(--space-2) var(--gutter);
}

/* Top row: identity left, social icons right */
.site-footer__top {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-1) var(--space-4);
	padding-bottom: var(--space-1);
}

/* Gallery name: same sans-serif and grey as the rest of the footer, only
   slightly bolder, so it stays discreet */
.site-footer__brand {
	margin: 0 0 0.125rem;
	font-weight: 600;
	color: var(--mute);
}

.site-footer__text {
	margin: 0;
	color: var(--mute);
}

.site-footer__address {
	color: inherit;
}

.site-footer__address:hover {
	color: var(--ink);
}

/* Bottom row, under a thin rule: legal left, footer menu right */
.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-1) var(--space-4);
	padding-top: var(--space-1);
	border-top: 1px solid var(--line);
	color: var(--mute);
}

/* © year + Livro de Reclamações */
.site-footer__legal {
	margin: 0;
}

.site-footer__legal a {
	color: inherit;
}

.menu--footer {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.menu--footer a {
	color: inherit;
}

.site-footer__legal a:hover,
.menu--footer a:hover {
	color: var(--ink);
}

/* --- Social icons ------------------------------------------------------- */

.footer-social-icons {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0;
	padding: 0.25rem 0 0;
	list-style: none;
}

.footer-social-icons a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	opacity: 0.8;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.footer-social-icons a:hover {
	opacity: 1;
	transform: translateY(-2px);
}

.footer-social-icons img,
.footer-social-icons svg {
	display: block;
	width: 16px;
	height: 16px;
}

/* =========================================================================
   6. Components
   ========================================================================= */

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

.button,
.tg-button {
	display: inline-block;
	padding: 0.75rem 1.75rem;
	font-size: var(--size-s);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--paper);
	background: var(--ink);
	border: 1px solid var(--ink);
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}

.button:hover,
.tg-button:hover {
	color: var(--ink);
	background: var(--paper);
	text-decoration: none;
}

.tg-button:disabled {
	opacity: 0.5;
	cursor: default;
}

/* Soft variant: accent colour, for a secondary action next to a main button */
.button--soft {
	color: var(--paper);
	background: var(--accent);
	border-color: var(--accent);
}

.button--soft:hover {
	color: var(--paper);
	background: var(--accent-dark);
	border-color: var(--accent-dark);
}

/* Klein variant: International Klein Blue, for the main call to action
   (inquiry); darkens on hover */
.button--klein {
	color: var(--paper);
	background: var(--klein);
	border-color: var(--klein);
}

.button--klein:hover {
	color: var(--paper);
	background: var(--klein-dark);
	border-color: var(--klein-dark);
}

/* Ghost variant: outlined, fills on hover */
.button--ghost {
	color: var(--ink);
	background: transparent;
}

.button--ghost:hover {
	color: var(--paper);
	background: var(--ink);
}

/* --- Text link (small, always underlined) ------------------------------- */

.text-link {
	font-size: var(--size-s);
	letter-spacing: 0.04em;
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* --- Prose (content written in the editor) ------------------------------ */

.prose > * + * {
	margin-top: var(--space-2);
}

.prose h2,
.prose h3 {
	margin-top: var(--space-4);
}

.prose img {
	margin: var(--space-3) 0;
}

.prose .wp-block-image figcaption {
	font-size: var(--size-s);
	color: var(--mute);
	text-align: center;
}

.prose a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* "Lead" paragraph style, offered in the editor sidebar */
.is-style-lead {
	font-family: var(--font-serif);
	font-size: var(--size-l);
	line-height: 1.3;
}

/* -------------------------------------------------------------------------
   7.1 Grids
   ------------------------------------------------------------------------- */

.tg-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
	gap: var(--space-4) var(--space-3);
}

.tg-grid--artists {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}

/* Small screens: 2 artists per row, like the works */
@media (max-width: 639px) {
	.tg-grid--artists {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-3) var(--space-2);
	}
}

/* Artwork grids: 1 / 2 / 3 per row, larger cards
   (artist page, home, /artworks/, categories) */
.tg-grid--artworks {
	grid-template-columns: 1fr;
	gap: var(--space-5) var(--space-4);
}

@media (min-width: 640px) {
	.tg-grid--artworks {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1000px) {
	.tg-grid--artworks {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Justified rows (artist page, home): same height per row, images never cropped.
   main.js balances the rows and sets each card's width ([data-justified]).
   Without JavaScript: each card starts at the target row height (width =
   ratio x height), as many as fit go on a row, then they grow in proportion
   to their ratio. --row-height must be in rem (read by main.js). */
.tg-grid--justified {
	--row-height: 11rem;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3) var(--space-2);
}

/* Filler: the last row keeps the target height instead of being stretched */
.tg-grid--justified::after {
	content: "";
	flex: 999 1 0;
}

@media (min-width: 640px) {
	.tg-grid--justified {
		--row-height: 15rem;
		gap: var(--space-4) var(--space-3);
	}
}

@media (min-width: 1000px) {
	.tg-grid--justified {
		--row-height: 20rem;
	}
}

/* -------------------------------------------------------------------------
   7.2 Cards
   ------------------------------------------------------------------------- */

.tg-card__link {
	display: block;
}

.tg-card__link:hover {
	text-decoration: none;
}

/* Media */
.tg-card__media {
	aspect-ratio: 4 / 5;
	margin-bottom: var(--space-2);
	overflow: hidden;
	background: var(--stone);
}

.tg-card__media--artwork {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	padding: var(--space-2);
}

.tg-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.tg-card__image--contain {
	object-fit: contain;
}

.tg-card__image--empty {
	width: 100%;
	height: 100%;
}

.tg-card__link:hover .tg-card__image {
	transform: scale(1.03);
}

/* Text */
/* Underline drawn left to right on hover, like the navigation links.
   Inline, so the line follows the text (line by line on long titles). */
.tg-card__title {
	display: inline;
	margin: 0;
	padding-bottom: 0.1em;
	font-family: var(--font-serif);
	font-size: 1.25rem;
	background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
	transition: background-size 0.35s ease;
}

.tg-card__link:hover .tg-card__title,
.tg-card__link:focus-visible .tg-card__title {
	background-size: 100% 1px;
}

@media (prefers-reduced-motion: reduce) {
	.tg-card__title {
		transition: none;
	}
}

.tg-card__year {
	color: var(--mute);
}

.tg-card__artist {
	margin: 0 0 0.15rem;
	font-size: var(--size-s);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.tg-card__meta,
.tg-card__count {
	margin: 0.15rem 0 0;
	font-size: var(--size-s);
	color: var(--mute);
}

/* "Price on request" */
.tg-card__price {
	margin: var(--space-1) 0 0;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Artwork card variant: bigger image padding and title */
.tg-card--artwork .tg-card__media {
	margin-bottom: var(--space-3);
	padding: var(--space-3);
}

.tg-card--artwork .tg-card__title {
	font-size: 1.5rem;
}

.tg-card--artwork .tg-card__artist,
.tg-card--artwork .tg-card__meta {
	font-size: 0.95rem;
}

/* Justified variant: row item, image at its real shape, no frame */
/* Never narrower than 8rem (MIN_WIDTH in justified-rows.js), so the text
   fits; the image of a narrow work keeps its width (--image-width, set by
   the script) and the card is widened around it. */
.tg-card--justified {
	flex: var(--ratio, 1) 1 calc(var(--ratio, 1) * var(--row-height));
	min-width: 8rem;
	max-width: calc(var(--ratio, 1) * var(--row-height) * 1.5);
	/* no-JS: a card alone on its row is not blown up */
}

.tg-card--justified .tg-card__media {
	display: block;
	aspect-ratio: auto;
	margin-bottom: var(--space-2);
	padding: 0;
	background: none;
}

.tg-card--justified .tg-card__image {
	display: block;
	width: 100%;
	max-width: var(--image-width, 100%);
	height: auto;
}

.tg-card--justified .tg-card__link:hover .tg-card__image {
	transform: scale(1.02);
}

/* No image yet: a plain stone square */
.tg-card--justified .tg-card__image--empty {
	aspect-ratio: 1;
	background: var(--stone);
}

.tg-card--justified .tg-card__artist {
	margin-bottom: 0.25rem;
	font-size: 0.8rem;
	color: var(--mute);
}

.tg-card--justified .tg-card__title {
	font-size: 1.25rem;
	line-height: 1.3;
}

.tg-card--justified .tg-card__meta {
	font-size: var(--size-s);
}

@media (max-width: 639px) {
	.tg-card--justified .tg-card__title {
		font-size: 1.0625rem;
	}
}

/* -------------------------------------------------------------------------
   7.3 Artist showroom (single-artist.php)
   Works first, minimal header.
   ------------------------------------------------------------------------- */

.showroom__header {
	max-width: 46rem;
	margin-bottom: var(--space-4);
}

.showroom__name {
	margin-bottom: var(--space-1);
}

.showroom__meta {
	margin-bottom: 0.25rem;
	font-size: var(--size-s);
	letter-spacing: 0.04em;
	color: var(--mute);
}

/* "6 available works" */
.showroom__count {
	margin-bottom: var(--space-2);
	font-size: var(--size-s);
	color: var(--mute);
}

/* Bottom block with the ghost button (also used on the biography page) */
.showroom__footer {
	margin-top: var(--space-6);
	padding-top: var(--space-4);
	text-align: center;
	border-top: 1px solid var(--line);
}

/* -------------------------------------------------------------------------
   7.4 Artist biography (single-artist-biography.php)
   Editorial layout: image + text, then exhibitions and awards.
   ------------------------------------------------------------------------- */

/* --- Title -------------------------------------------------------------- */

.biography__header {
	margin-bottom: var(--space-5);
}

.biography__title {
	margin-bottom: var(--space-1);
}

.biography__title-sub {
	display: block;
	margin-top: var(--space-1);
	font-size: var(--size-l);
	color: var(--mute);
}

/* --- Intro: studio image + biography text ------------------------------- */

.biography__intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: var(--space-4) var(--space-5);
}

@media (min-width: 900px) {
	.biography__intro {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	}

	.biography__image {
		position: sticky;
		top: calc(var(--header-h) + var(--space-3));
	}
}

.biography__image img {
	width: 100%;
	height: auto;
}

.biography__text {
	max-width: 40rem;
	font-size: 1.125rem;
	line-height: 1.75;
}

/* No image: the text takes the full width */
.biography__intro--text-only {
	grid-template-columns: minmax(0, 1fr) !important;
}

.biography__intro--text-only .biography__text {
	max-width: 46rem;
}

/* --- Exhibitions & awards ----------------------------------------------- */

.biography__section {
	margin-top: var(--space-5);
}

/* Solo / Group side by side on desktop */
.biography__cv {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-4) var(--space-5);
}

@media (min-width: 900px) {
	.biography__cv {
		grid-template-columns: 1fr 1fr;
	}
}

.biography__label {
	margin-bottom: var(--space-2);
	font-family: var(--font-sans);
	font-size: var(--size-s);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mute);
}

/* --- CV list (year | text) ---------------------------------------------- */

.cv-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line);
}

.cv-list li {
	display: grid;
	grid-template-columns: 6rem minmax(0, 1fr);
	gap: var(--space-2);
	padding: 0.65rem 0;
	border-bottom: 1px solid var(--line);
}

.cv-list__year {
	font-variant-numeric: tabular-nums;
	color: var(--mute);
}

/* -------------------------------------------------------------------------
   7.5 Artwork page (single-artwork.php)
   ------------------------------------------------------------------------- */

/* --- Layout: video or image left, details right ------------------------- */

/* Both columns are sticky: the shorter one waits while the longer one scrolls,
   and both end on the same line, right before "More views". The media is
   capped to the screen height so that it always fits while it sticks. */
.artwork {
	--artwork-sticky-top: calc(var(--header-h) + var(--space-3));
	--artwork-media-max: calc(100vh - var(--artwork-sticky-top) - var(--space-3));
}

@supports (height: 100svh) {
	.artwork {
		--artwork-media-max: calc(100svh - var(--artwork-sticky-top) - var(--space-3));
	}
}

.artwork__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: var(--space-4);
}

@media (min-width: 900px) {
	.artwork__layout {
		grid-template-columns: minmax(0, 3fr) minmax(18rem, 2fr);
	}

	.artwork__media,
	.artwork__details {
		position: sticky;
		top: var(--artwork-sticky-top);
	}
}

/* --- Images ------------------------------------------------------------- */

.tg-artwork-figure {
	margin-bottom: var(--space-2);
	background: var(--stone);
}

.tg-artwork-figure--empty {
	aspect-ratio: 1;
}

.tg-artwork-image {
	width: 100%;
	cursor: zoom-in;
}

/* Main media frame (video, or the main image when there is no video): the
   width of its column and, on desktop, the full available screen height
   (4:5 on small screens). The main image or the video poster is shown
   whole, centred and scaled down to fit ("contain"), on the stone
   background; the video, once it plays, fills the frame. */
.artwork__media {
	--artwork-frame-height: auto;
}

.artwork__media .tg-artwork-figure,
.artwork__media .tg-video {
	position: relative;
	width: 100%;
	height: var(--artwork-frame-height);
	aspect-ratio: 4 / 5;
	margin: 0;
	overflow: hidden;
	background: var(--stone);
}

/* Desktop: the frame fits the screen from the first view, where it starts
   below the header, the page padding and the breadcrumb (≈ 3rem), so that
   the video controls at its bottom are visible without scrolling */
@media (min-width: 900px) {
	.artwork__media {
		--artwork-frame-height: calc(100vh - var(--header-h) - var(--space-4) - 3rem - var(--space-3));
	}

	@supports (height: 100svh) {
		.artwork__media {
			--artwork-frame-height: calc(100svh - var(--header-h) - var(--space-4) - 3rem - var(--space-3));
		}
	}

	.artwork__media .tg-artwork-figure,
	.artwork__media .tg-video {
		aspect-ratio: auto;
	}
}

.artwork__media .tg-artwork-figure a {
	display: block;
	height: 100%;
}

.artwork__media .tg-artwork-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Video poster: same as the main image, before playing and when paused */
.artwork__media .tg-video__image {
	object-fit: contain;
}

.artwork__media .tg-player__paused {
	background: var(--stone);
}

/* Once the video plays (gallery.js), it fills the same frame, cropped, with
   the gallery's own controls (.tg-player). If the YouTube API fails, the
   fallback is YouTube's own player, shown whole (.is-native). */
.artwork__media .tg-video:is(.is-custom, .is-native) {
	background: var(--ink);
}

/* Fallback: YouTube's own player, whole video, its own controls */
.artwork__media .tg-video.is-native .tg-video__frame {
	position: absolute;
	inset: 0;
}

/* Custom player: once the video has started (.is-started, video.js), the
   iframe is enlarged to cover the frame (container units = the frame's
   size) and centred, keeping the video's ratio. It is also taller than the
   video by --yt-band at the top and the bottom: YouTube fills these bands
   with black and shows its own title there, outside the frame. */
.artwork__media .tg-video.is-custom {
	--yt-band: 5rem;
	container-type: size;
}

/* Until then it has the frame's size, under the poster: Safari does not
   start a player that is mostly outside the screen. */
.tg-video__player iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.tg-video.is-started .tg-video__player iframe {
	top: 50%;
	left: 50%;
	width: max(100cqw, 100cqh * 16 / 9);
	height: calc(max(100cqh, 100cqw * 9 / 16) + var(--yt-band) * 2);
	transform: translate(-50%, -50%);
}

.tg-video--vertical.is-started .tg-video__player iframe {
	width: max(100cqw, 100cqh * 9 / 16);
	height: calc(max(100cqh, 100cqw * 16 / 9) + var(--yt-band) * 2);
}

.tg-video.is-custom:not(.is-started) .tg-player__paused {
	display: flex;
}

/* While it starts, the play button turns into a thin loading ring, the
   same size and in the same place */
.tg-video.is-custom:not(.is-started) .tg-player__paused .tg-video__play {
	border-color: color-mix(in srgb, var(--paper) 35%, transparent);
	background: transparent;
	filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ink) 35%, transparent));
}

.tg-video.is-custom:not(.is-started) .tg-player__paused .tg-video__play::after {
	inset: -1px;
	border: 1px solid transparent;
	border-top-color: var(--paper);
	border-radius: 50%;
	transform: none;
	animation: tg-video-loading 1.1s linear infinite;
}

@keyframes tg-video-loading {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tg-video.is-custom:not(.is-started) .tg-player__paused .tg-video__play::after {
		animation-duration: 2.4s;
	}
}

/* The poster as before the click (whole, not cropped), so the image does
   not jump while the video starts */
.artwork__media .tg-video.is-custom:not(.is-started) .tg-player__paused .tg-video__image {
	object-fit: contain;
}

/* Safari refused to start the video (video.js): YouTube's own play button
   shows through and takes the click, which always starts it */
.tg-video.is-blocked .tg-player__surface,
.tg-video.is-custom.is-ready.is-blocked .tg-player__paused {
	display: none;
}

/* Fullscreen: the whole video, still with the gallery's controls (the
   title bands stay outside the screen) */
.tg-video.is-custom:fullscreen .tg-video__player iframe {
	top: calc(var(--yt-band) * -1);
	left: 0;
	width: 100%;
	height: calc(100% + var(--yt-band) * 2);
	transform: none;
}

/* Paused or ended: the poster covers YouTube's pause screen */
.tg-player__paused {
	display: none;
	position: absolute;
	inset: 0;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.tg-video.is-ready:not(.is-playing) .tg-player__paused {
	display: flex;
}

.tg-player__paused .tg-video__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Transparent layer over the video: a click plays or pauses, and the
   pointer is tracked to show or hide the controls */
.tg-player__surface {
	position: absolute;
	inset: 0;
	cursor: pointer;
}

.tg-video.is-idle .tg-player__surface {
	cursor: none;
}

/* Controls bar, at the bottom of the frame on a dark gradient */
.tg-player {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-4) var(--space-3) var(--space-2);
	color: var(--paper);
	background: linear-gradient(transparent, color-mix(in srgb, var(--ink) 75%, transparent));
	opacity: 0;
	transition: opacity 0.3s ease;
}

.tg-video.is-ready .tg-player {
	opacity: 1;
}

.tg-video.is-ready.is-idle:not(:focus-within) .tg-player {
	opacity: 0;
}

.tg-player__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	font-size: var(--size-s);
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

.tg-player__speed {
	font-variant-numeric: tabular-nums;
}

.tg-player__time {
	flex: none;
	font-size: var(--size-s);
	font-variant-numeric: tabular-nums;
}

.tg-player__progress {
	flex: 1;
	min-width: 3rem;
	accent-color: var(--paper);
	cursor: pointer;
}

.tg-player__volume {
	flex: none;
	width: 5rem;
	accent-color: var(--paper);
	cursor: pointer;
}

/* Small screens: the volume follows the phone's buttons */
@media (max-width: 600px) {
	.tg-player {
		gap: var(--space-1);
		padding: var(--space-3) var(--space-2) var(--space-1);
	}

	.tg-player__volume,
	.tg-player__time {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tg-player {
		transition: none;
	}
}

/* --- Details ------------------------------------------------------------ */

.artwork__artist {
	margin: 0;
	font-size: var(--size-s);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.artwork__title {
	margin: var(--space-1) 0 var(--space-3);
}

/* Specs table (year, technique, dimensions…) */
.tg-specs {
	margin: 0 0 var(--space-3);
	padding: 0;
	border-top: 1px solid var(--line);
}

.tg-specs__row {
	display: flex;
	gap: var(--space-2);
	padding: var(--space-1) 0;
	font-size: var(--size-s);
	border-bottom: 1px solid var(--line);
}

.tg-specs dt {
	flex: 0 0 7rem;
	color: var(--mute);
}

.tg-specs dd {
	margin: 0;
}

/* Inquiry button, after the description and above "See more" */
.artwork__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	margin: var(--space-4) 0 0;
}

/* Long description folded by main.js, with a fade at the bottom */
.artwork__description.is-collapsed {
	max-height: 12rem;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
	mask-image: linear-gradient(to bottom, #000 55%, transparent);
}

/* "Show all / Show less": plain underlined text button */
.artwork__description-toggle {
	display: block;
	margin-top: var(--space-1);
	padding: 0;
	font: inherit;
	font-size: var(--size-s);
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	background: none;
	border: 0;
	cursor: pointer;
}

.artwork__description-toggle:hover {
	color: var(--mute);
}

.artwork__description-toggle[hidden] {
	display: none;
}

/* "See more — n views" link, at the end of the details column */
.artwork__more {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	margin-top: var(--space-3);
	padding-bottom: 0.25rem;
	font-size: var(--size-s);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
	border-bottom: 1px solid currentColor;
	transition: color 0.2s;
}

.artwork__more:hover {
	color: var(--accent-dark);
	text-decoration: none;
}

.artwork__more-arrow {
	transition: transform 0.2s ease;
}

.artwork__more:hover .artwork__more-arrow {
	transform: translateY(0.2rem);
}

@media (prefers-reduced-motion: reduce) {
	.artwork__more-arrow {
		transition: none;
	}
}

/* --- More views: rows of 2 images, same height, real shape -------------- */

.artwork-views {
	margin-top: var(--space-5);
	padding-top: var(--space-4);
	border-top: 1px solid var(--line);
	scroll-margin-top: calc(var(--header-h) + var(--space-2));
	/* not hidden under the sticky header */
}

.artwork-views__title {
	margin-bottom: var(--space-3);
	font-family: var(--font-sans);
	font-size: var(--size-s);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mute);
}

.artwork-views__grid {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

/* Each item grows in proportion to its ratio (width / height, set inline by
   the template), so both images of a row end up exactly the same height. */
.artwork-views__row {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
}

@media (min-width: 700px) {
	.artwork-views__grid,
	.artwork-views__row {
		gap: var(--space-3);
	}
}

.artwork-views__item {
	flex: var(--ratio, 1) 1 0%;
	min-width: 0;
	margin: 0;
}

/* Last image alone on its row: half width, not stretched across the page */
.artwork-views__row--single .artwork-views__item {
	flex: 0 1 50%;
}

.artwork-views__item a {
	display: block;
	overflow: hidden;
	cursor: zoom-in;
}

.artwork-views__image {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.3s ease;
}

.artwork-views__item a:hover .artwork-views__image {
	transform: scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
	.artwork-views__image {
		transition: none;
	}
}

/* --- Video (YouTube, click-to-load) ------------------------------------- */

.tg-video {
	position: relative;
	aspect-ratio: 16 / 9;
	margin: 0 0 var(--space-2);
	background: var(--stone);
}

/* YouTube Shorts */
.tg-video--vertical {
	aspect-ratio: 9 / 16;
}

.tg-video__poster {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	width: 100%;
	height: 100%;
	font-size: var(--size-s);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink);
}

.tg-video__poster:hover {
	text-decoration: none;
}

/* Poster: the main image of the artwork, behind the play button */
.tg-video__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Thin circle with a play triangle */
.tg-video__play {
	position: relative;
	width: 4rem;
	height: 4rem;
	border: 1px solid var(--ink);
	border-radius: 50%;
	background: var(--paper);
	transition: background 0.2s;
}

/* On a paper background, so it stays readable over the poster. Placed
   under the play button, so that the button itself is in the centre of the
   frame, where the loading ring appears. */
.tg-video__label {
	position: absolute;
	top: calc(50% + 2rem + var(--space-2));
	left: 50%;
	padding: 0.25rem var(--space-1);
	white-space: nowrap;
	background: var(--paper);
	transform: translateX(-50%);
}

.tg-video__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 0.55rem 0 0.55rem 0.9rem;
	border-color: transparent transparent transparent var(--ink);
	transition: border-color 0.2s;
}

.tg-video__poster:hover .tg-video__play {
	background: var(--ink);
}

.tg-video__poster:hover .tg-video__play::after {
	border-left-color: var(--paper);
}

.tg-video__frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* -------------------------------------------------------------------------
   7.6 Inquiry form
   ------------------------------------------------------------------------- */

.tg-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 var(--space-2);
}

.tg-form__field {
	margin: 0 0 var(--space-2);
}

.tg-form__field label {
	display: block;
	margin-bottom: 0.25rem;
	font-size: var(--size-s);
	color: var(--mute);
}

.tg-form__field input:not([type="checkbox"]),
.tg-form__field textarea {
	width: 100%;
	padding: 0.65rem 0.75rem;
	font: inherit;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 0;
}

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

/* GDPR consent checkbox */
.tg-form__field--consent label {
	display: flex;
	align-items: flex-start;
	gap: var(--space-1);
	color: var(--ink);
}

/* Link to the privacy policy page, under the consent box */
.tg-form__privacy {
	display: inline-block;
	margin: 0.25rem 0 0 calc(var(--space-1) + 1em);
	font-size: var(--size-s);
	color: var(--mute);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Honeypot (anti-spam): hidden from humans */
.tg-form__hp {
	position: absolute;
	left: -9999px;
}

.tg-form__actions {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

/* Send button: International Klein Blue, like the button that opens the
   form (.button--klein); the plugin's markup is left as is */
.tg-form__actions .tg-button {
	color: var(--paper);
	background: var(--klein);
	border-color: var(--klein);
}

.tg-form__actions .tg-button:hover {
	color: var(--paper);
	background: var(--klein-dark);
	border-color: var(--klein-dark);
}

.tg-form__status {
	font-size: var(--size-s);
	color: var(--mute);
}

/* Success / error message */
.tg-form__notice {
	margin-bottom: var(--space-2);
	padding: var(--space-2);
	background: var(--stone);
	border-left: 2px solid var(--ink);
}

.tg-form__notice p {
	margin: 0;
}

/* --- Dialog window (single-artwork.php) --------------------------------- */

.inquiry-dialog {
	width: min(40rem, calc(100vw - 2 * var(--gutter)));
	max-height: calc(100vh - 2 * var(--space-4));
	padding: var(--space-4);
	color: var(--ink);
	background: var(--paper);
	border: 0;
	overflow: auto;
}

.inquiry-dialog::backdrop {
	background: rgba(17, 17, 17, 0.6);
}

/* Page behind the window does not scroll */
body.dialog-open {
	overflow: hidden;
}

.inquiry-dialog__close {
	position: absolute;
	top: var(--space-1);
	right: var(--space-1);
	width: 2.75rem;
	height: 2.75rem;
	font-size: 1.75rem;
	line-height: 1;
	color: var(--ink);
	background: transparent;
	border: 0;
	cursor: pointer;
}

.inquiry-dialog__header {
	margin-bottom: var(--space-3);
	padding-right: var(--space-4);
	/* room for the close button */
}

.inquiry-dialog__title {
	margin-bottom: var(--space-1);
}

.inquiry-dialog__work {
	margin-bottom: var(--space-1);
	font-family: var(--font-serif);
	font-size: 1.125rem;
}

.inquiry-dialog .muted {
	font-size: var(--size-s);
}

/* Small screens: the window takes the whole screen */
@media (max-width: 600px) {
	.inquiry-dialog {
		width: 100vw;
		max-width: 100vw;
		height: 100%;
		max-height: 100%;
		margin: 0;
		padding: var(--space-4) var(--gutter);
	}

	.tg-form__row {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
   7.7 Lightbox (artwork zoom)
   ------------------------------------------------------------------------- */

.tg-lightbox {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9999;
	align-items: center;
	justify-content: center;
	background: rgba(17, 17, 17, 0.95);
	cursor: zoom-out;
}

.tg-lightbox.is-open {
	display: flex;
}

.tg-lightbox img {
	max-width: 86vw;
	max-height: 86vh;
	object-fit: contain;
	opacity: 0;
	transition: opacity 0.2s ease;
}

/* Shown only once loaded (class set by gallery.js) */
.tg-lightbox img.is-loaded {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.tg-lightbox img {
		transition: none;
	}
}

.tg-lightbox__close {
	position: absolute;
	top: var(--space-2);
	right: var(--space-2);
	width: 2.75rem;
	height: 2.75rem;
	font-size: 2rem;
	line-height: 1;
	color: var(--paper);
	background: transparent;
	border: 0;
	cursor: pointer;
}

/* Previous / next: thin chevrons on the sides, only for a series */
.tg-lightbox__nav {
	display: none;
	position: absolute;
	top: 50%;
	width: 3rem;
	height: 4rem;
	margin-top: -2rem;
	color: var(--paper);
	background: none;
	border: 0;
	cursor: pointer;
	opacity: 0.7;
	transition: opacity 0.2s;
}

.tg-lightbox.has-series .tg-lightbox__nav {
	display: block;
}

.tg-lightbox__nav:hover,
.tg-lightbox__nav:focus-visible {
	opacity: 1;
}

.tg-lightbox__nav::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1rem;
	height: 1rem;
	border-top: 1px solid currentColor;
	border-left: 1px solid currentColor;
}

.tg-lightbox__nav--prev {
	left: var(--space-1);
}

.tg-lightbox__nav--prev::before {
	transform: translate(-25%, -50%) rotate(-45deg);
}

.tg-lightbox__nav--next {
	right: var(--space-1);
}

.tg-lightbox__nav--next::before {
	transform: translate(-75%, -50%) rotate(135deg);
}

/* "3 / 9" */
.tg-lightbox__count {
	position: absolute;
	bottom: var(--space-2);
	left: 0;
	right: 0;
	margin: 0;
	font-size: var(--size-s);
	letter-spacing: 0.08em;
	text-align: center;
	color: var(--paper);
	opacity: 0.7;
}

/* Small screens: swipe instead of arrows */
@media (max-width: 600px) {
	.tg-lightbox.has-series .tg-lightbox__nav {
		display: none;
	}
}

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

/* -------------------------------------------------------------------------
   7.8 Events timeline (archive-event.php)
   ------------------------------------------------------------------------- */

/* Each group (Upcoming, then each year) is a split row: the heading stays
   in view in the left column while its events scroll on the right. */
.timeline-group {
	padding-top: var(--space-3);
	border-top: 1px solid var(--line);
}

.timeline-group + .timeline-group {
	margin-top: var(--space-4);
}

.timeline-group__heading {
	margin: 0;
	font-size: var(--size-xl);
	line-height: 1;
}

.tg-event {
	padding: 0 0 var(--space-4);
}

.tg-event + .tg-event {
	padding-top: var(--space-4);
	border-top: 1px solid var(--line);
}

.tg-event__when {
	margin-bottom: var(--space-1);
	font-size: var(--size-s);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mute);
}

.tg-event--upcoming .tg-event__when {
	color: var(--accent);
}

.tg-event__title {
	margin: 0 0 var(--space-1);
	font-size: var(--size-l);
}

/* Event without a place: same space between title and text */
.tg-event__title + .tg-event__content {
	margin-top: var(--space-2);
}

.tg-event__place {
	margin: 0 0 var(--space-2);
	font-size: var(--size-s);
	color: var(--mute);
}

.tg-event__image {
	margin: var(--space-3) 0;
}

/* Event with a featured image (tilsitt-gallery/event-item.php): a portrait
   thumbnail beside the title and text; above them on small screens */
.tg-event--with-image .tg-event__layout {
	display: grid;
	grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
	align-items: start;
	gap: var(--space-3);
}

.tg-event__thumb {
	margin: 0;
}

.tg-event__thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	background: var(--stone);
}

@media (max-width: 599px) {
	.tg-event--with-image .tg-event__layout {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-2);
	}

	.tg-event__thumb {
		max-width: 16rem;
	}
}

/* Additional views of an exhibition: one row across the whole width of the
   event, under the image and the text, scrolling sideways (snap to each
   image). strip.js adds the arrows when the row overflows. Each image is
   enlarged in the lightbox. */
.tg-event__strip {
	position: relative;
	margin-top: var(--space-3);
}

.tg-event--with-image .tg-event__strip {
	grid-column: 1 / -1;
	margin-top: 0;
}

.tg-event__views {
	display: flex;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.tg-event__views::-webkit-scrollbar {
	display: none;
}

/* Six images in view (four on small screens) */
.tg-event__views li {
	flex: 0 0 calc((100% - 5 * var(--space-1)) / 6);
	scroll-snap-align: start;
}

@media (max-width: 599px) {
	.tg-event__views li {
		flex-basis: calc((100% - 3 * var(--space-1)) / 4);
	}
}

.tg-event__views a {
	display: block;
	cursor: zoom-in;
}

.tg-event__views img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	background: var(--stone);
	transition: opacity 0.2s ease;
}

.tg-event__views a:hover img {
	opacity: 0.8;
}

.tg-event__views a:focus-visible,
.tg-event__thumb a:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: -2px;
}

.tg-event__thumb a {
	display: block;
	cursor: zoom-in;
}

/* Arrows (strip.js): round buttons on the edges, hidden at each end */
.tg-strip__arrow {
	position: absolute;
	top: 50%;
	z-index: 1;
	width: 2.5rem;
	height: 2.5rem;
	margin-top: -1.25rem;
	padding: 0;
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 50%;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.tg-strip__arrow[hidden] {
	display: none;
}

.tg-strip__arrow:hover,
.tg-strip__arrow:focus-visible {
	border-color: var(--ink);
}

.tg-strip__arrow::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.55rem;
	height: 0.55rem;
	border-top: 1px solid currentColor;
	border-left: 1px solid currentColor;
}

.tg-strip__arrow--prev {
	left: calc(-1 * var(--space-2));
}

.tg-strip__arrow--prev::before {
	transform: translate(-25%, -50%) rotate(-45deg);
}

.tg-strip__arrow--next {
	right: calc(-1 * var(--space-2));
}

.tg-strip__arrow--next::before {
	transform: translate(-75%, -50%) rotate(135deg);
}

@media (max-width: 599px) {
	.tg-strip__arrow--prev {
		left: var(--space-1);
	}

	.tg-strip__arrow--next {
		right: var(--space-1);
	}
}

.tg-event__content ul {
	padding-left: 1.2em;
}

.tg-event__content h3 {
	margin: var(--space-3) 0 var(--space-1);
	font-size: 1.1rem;
}

/* -------------------------------------------------------------------------
   8.1 Home (front-page.php)
   ------------------------------------------------------------------------- */

.home-hero {
	padding-top: var(--space-5);
	padding-bottom: var(--space-4);
}

.home-hero__text {
	max-width: 46rem;
}

.home-hero h1 {
	margin-bottom: var(--space-3);
	font-size: clamp(2.25rem, 5vw, 4rem);
}

.home-featured,
.home-artists {
	padding-top: 0;
	padding-bottom: 0;
}

.home-artists {
	margin-bottom: var(--space-5);
}

.home-featured {
	padding-bottom: var(--space-5);
}

/* -------------------------------------------------------------------------
   8.2 Home slideshow
   Full screen under the header, stays in place (sticky) while .home-body,
   which has a white background, scrolls up over it. Images cross-fade.
   ------------------------------------------------------------------------- */

.hero-slider {
	position: sticky;
	top: var(--header-h);
	height: calc(100vh - var(--header-h));
	height: calc(100svh - var(--header-h));
	/* mobile: ignores the URL bar */
	overflow: hidden;
	background: var(--ink);
}

.hero-slider__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1.2s ease;
}

.hero-slider__slide.is-active {
	opacity: 1;
}

/* Content that scrolls over the slideshow */
.home-body {
	position: relative;
	z-index: 1;
	background: var(--paper);
}

/* -------------------------------------------------------------------------
   Exhibitions on view (front-page.php, tilsitt-gallery/home-exhibition.php)
   The images are slides of the sticky .hero-slider, darkened so white text
   stays readable on any photo. The texts sit in .hero-exhibitions, pulled
   up over the images, and scroll away with the page; only the active one
   takes clicks.
   ------------------------------------------------------------------------- */

.hero-slider__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-slider--exhibitions::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(color-mix(in srgb, var(--ink) 40%, transparent), color-mix(in srgb, var(--ink) 60%, transparent));
}

.hero-exhibitions {
	position: relative;
	z-index: 1;
	display: grid;
	height: calc(100vh - var(--header-h));
	height: calc(100svh - var(--header-h));
	margin-top: calc(var(--header-h) - 100vh);
	margin-top: calc(var(--header-h) - 100svh);
	color: var(--paper);
}

.hero-exhibitions__slide {
	grid-area: 1 / 1;
	align-self: center;
	justify-self: center;
	max-width: 56rem;
	padding: var(--space-5) var(--gutter);
	text-align: center;
	text-wrap: balance;
	opacity: 0;
	pointer-events: none;
	transition: opacity 1.2s ease;
}

.hero-exhibitions__slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

.hero-exhibitions__slide p {
	margin: 0;
}

.hero-exhibition__status {
	margin-bottom: var(--space-3) !important;
	font-size: var(--size-s);
	letter-spacing: 0.04em;
}

.hero-exhibition__name {
	margin: 0;
	font-size: clamp(2.75rem, 8vw, 6.5rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--paper);
}

.hero-exhibition__title {
	margin-top: var(--space-2) !important;
	font-size: clamp(1.75rem, 4.5vw, 3.75rem);
	font-style: italic;
	line-height: 1.1;
}

.hero-exhibition__dates {
	margin-top: var(--space-4) !important;
	font-size: var(--size-m);
}

.hero-exhibition__place {
	margin-top: 0.25rem !important;
	font-size: var(--size-s);
	opacity: 0.85;
}

/* Bottom line: progress (left), link to all exhibitions (centre), next
   exhibition (right, only with several on view) */
.hero-exhibitions__foot {
	grid-area: 1 / 1;
	align-self: end;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--space-2);
	padding: 0 var(--gutter) var(--space-4);
}

.hero-exhibitions__more {
	grid-column: 2;
	padding-bottom: 2px;
	border-bottom: 1px solid currentColor;
	font-size: var(--size-s);
	letter-spacing: 0.04em;
	color: var(--paper);
	text-decoration: none;
	white-space: nowrap;
}

.hero-exhibitions__more:hover,
.hero-exhibitions__more:focus-visible {
	border-bottom-width: 2px;
}

.hero-exhibitions__more:focus-visible,
.hero-exhibitions__next:focus-visible {
	outline: 2px solid var(--paper);
	outline-offset: 4px;
}

/* One hairline per image of the exhibition shown: seen, filling, to come */
.hero-exhibitions__progress {
	grid-column: 1;
	justify-self: start;
	display: flex;
	gap: 0.3rem;
	width: min(7rem, 100%);
}

.hero-exhibitions__progress i {
	position: relative;
	flex: 1;
	height: 1px;
	overflow: hidden;
	background: color-mix(in srgb, var(--paper) 25%, transparent);
}

.hero-exhibitions__progress i::after {
	content: "";
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--paper) 80%, transparent);
	transform: scaleX(0);
	transform-origin: left;
}

.hero-exhibitions__progress i.is-done::after {
	transform: scaleX(1);
}

.hero-exhibitions__progress i.is-running::after {
	animation: hero-progress 6s linear forwards;
}

@keyframes hero-progress {
	to {
		transform: scaleX(1);
	}
}

.hero-exhibitions__next {
	grid-column: 3;
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0;
	font: inherit;
	font-size: var(--size-s);
	text-align: right;
	color: var(--paper);
	background: none;
	border: 0;
	cursor: pointer;
}

.hero-exhibitions__next[hidden] {
	display: none;
}

.hero-exhibitions__next small {
	display: block;
	font-size: var(--size-xs);
	letter-spacing: 0.04em;
	opacity: 0.7;
}

.hero-exhibitions__next-arrow {
	position: relative;
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid color-mix(in srgb, var(--paper) 60%, transparent);
	border-radius: 50%;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.hero-exhibitions__next:hover .hero-exhibitions__next-arrow,
.hero-exhibitions__next:focus-visible .hero-exhibitions__next-arrow {
	border-color: var(--paper);
	background: color-mix(in srgb, var(--paper) 12%, transparent);
}

.hero-exhibitions__next-arrow::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.6rem;
	height: 0.6rem;
	border-top: 1px solid currentColor;
	border-left: 1px solid currentColor;
	transform: translate(-75%, -50%) rotate(135deg);
}

@media (max-width: 599px) {
	.hero-exhibitions__foot {
		grid-template-columns: 1fr auto;
		row-gap: var(--space-3);
	}

	.hero-exhibitions__progress {
		grid-column: 1 / -1;
		grid-row: 1;
		width: 100%;
	}

	.hero-exhibitions__more {
		grid-column: 1;
		grid-row: 2;
		justify-self: start;
	}

	.hero-exhibitions__next {
		grid-column: 2;
		grid-row: 2;
	}

	.hero-exhibitions__next-label {
		display: none;
	}
}

/* Motion: each image zooms slowly while shown (every other one zooms out),
   and the images recede (grow, darken) as the page scrolls; slideshow.js
   sets --hero-depth from 0 to 1. Off for visitors who ask for less motion. */
.hero-slider--exhibitions .hero-slider__slide {
	transform: scale(calc(1 + var(--hero-depth, 0) * 0.12));
	filter: brightness(calc(1 - var(--hero-depth, 0) * 0.45));
	transform-origin: 50% 40%;
}

.hero-slider--exhibitions .hero-slider__slide.is-active .hero-slider__image {
	animation: hero-zoom 7.5s linear both;
}

.hero-slider--exhibitions .hero-slider__slide:nth-child(even).is-active .hero-slider__image {
	animation-name: hero-zoom-out;
}

@keyframes hero-zoom {
	from {
		transform: scale(1) translate(0, 0);
	}
	to {
		transform: scale(1.07) translate(-1.2%, -0.8%);
	}
}

@keyframes hero-zoom-out {
	from {
		transform: scale(1.07) translate(1%, 0.6%);
	}
	to {
		transform: scale(1) translate(0, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-slider--exhibitions .hero-slider__slide {
		transform: none;
		filter: none;
	}

	.hero-slider--exhibitions .hero-slider__slide.is-active .hero-slider__image {
		animation: none;
	}

	.hero-exhibitions__progress i.is-running::after {
		animation: none;
		transform: scaleX(1);
	}
}

/* -------------------------------------------------------------------------
   8.3 Generic pages & lists
   ------------------------------------------------------------------------- */

/* Search results / fallback list (index.php) */
.entry {
	padding: var(--space-3) 0;
	border-bottom: 1px solid var(--line);
}

/* --- Split layout (page.php, archive-event.php) ------------------------ */

/* Like the artwork page: a left column that stays in view (title, lead,
   image, link; or a year on the events page) while the content on the right
   scrolls. Both columns share the same proportions on every page. */
.split {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-3) var(--space-5);
}

.split__lead {
	margin-top: var(--space-2);
}

.split__lead p {
	margin: 0;
}

.split__image {
	margin-top: var(--space-3);
}

.split__image img {
	width: 100%;
}

.split__link {
	margin: var(--space-3) 0 0;
}

.split .split__main > :first-child {
	margin-top: 0;
}

@media (min-width: 900px) {
	.split {
		grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
	}

	.split__sticky {
		position: sticky;
		top: calc(var(--header-h) + var(--space-3));
		display: block;
	}

	/* The page title of the events page sits alone in the left column */
	.page__header.split > .page__title {
		grid-column: 1;
	}

	/* Text pages: the content starts level with the page title, with a thin
	   vertical rule halfway between the two columns */
	.page.split .split__main {
		position: relative;
		padding-top: 0.6rem;
	}

	.page.split .split__main::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: calc(var(--space-5) / -2);
		border-left: 1px solid var(--line);
	}


	/* Narrower column: the coloured group stays on one column (wins over the
	   two-column rule of 8.5) */
	.split .split__main .wp-block-group.has-background {
		column-count: 1;
	}
}

/* -------------------------------------------------------------------------
   8.4 Contact (page-contact.php)
   ------------------------------------------------------------------------- */

.contact__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: var(--space-4) var(--space-5);
}

@media (min-width: 900px) {
	.contact__layout {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		/* info | map */
	}
}

.contact__info h2 {
	margin-top: 0;
	font-size: var(--size-l);
}

.contact__info h2 ~ h2 {
	margin-top: var(--space-4);
}

/* Map frame: the placeholder, then the Google map once the visitor consents */
.contact__map-frame {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--stone);
}

.contact__map-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.contact__map-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	height: 100%;
	padding: var(--space-3);
	text-align: center;
	font-size: var(--size-s);
	color: var(--mute);
}

.contact__map-placeholder p {
	margin: 0;
	max-width: 28ch;
}

.contact__map-link {
	margin-top: var(--space-1);
	font-size: var(--size-s);
}

/* -------------------------------------------------------------------------
   8.5 Editor blocks inside pages (.prose)
   Columns, coloured groups, quotes, buttons and separators added by the
   owner in the block editor (Advisory, About…).
   ------------------------------------------------------------------------- */

/* --- Columns (image + text) --------------------------------------------- */

.prose .wp-block-columns {
	gap: var(--space-4);
	margin: var(--space-5) 0;
}

.prose .wp-block-column > :first-child {
	margin-top: 0;
}

.prose .wp-block-column .wp-block-image,
.prose .wp-block-column img {
	margin: 0;
}

/* --- Group with a background colour (e.g. Stone) ------------------------ */

.prose .wp-block-group.has-background {
	margin: var(--space-5) 0;
	padding: var(--space-4) var(--space-4) var(--space-3);
}

.prose .wp-block-group.has-background > :first-child {
	margin-top: 0;
}

.prose .wp-block-group h3 {
	margin-top: var(--space-3);
	margin-bottom: var(--space-1);
}

/* Column left empty (e.g. an Image block with no file chosen yet, which
   WordPress does not output): hide it, the other column then takes the whole
   width (its inline flex-basis needs !important) */
.prose .wp-block-column:empty {
	display: none;
}

.prose .wp-block-columns:has(> .wp-block-column:empty) > .wp-block-column {
	flex-basis: 100% !important;
}

/* Coloured group with several sub-sections (e.g. "Our advisory services"):
   two columns on wide screens, the h2 across both. WordPress caps and
   centres the children of a "constrained" group (with !important), undone
   here so they fill their column. */
@media (min-width: 900px) {
	.prose .wp-block-group.has-background {
		column-count: 2;
		column-gap: var(--space-5);
	}

	.prose .wp-block-group.has-background > * {
		max-width: none;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.prose .wp-block-group.has-background > h2 {
		column-span: all;
		margin-bottom: var(--space-2);
	}

	.prose .wp-block-group.has-background > h3 {
		break-after: avoid;
	}

	.prose .wp-block-group.has-background > p {
		break-inside: avoid;
	}

	.prose .wp-block-group.has-background > h3:first-of-type {
		margin-top: 0;
	}
}

/* --- Quote (press quote, testimonial) ----------------------------------- */

.prose .wp-block-quote {
	margin: var(--space-5) 0;
	padding: 0 0 0 var(--space-3);
	font-family: var(--font-serif);
	font-size: var(--size-l);
	line-height: 1.35;
	border-left: 1px solid var(--ink);
}

.prose .wp-block-quote p {
	margin: 0;
}

.prose .wp-block-quote cite {
	display: block;
	margin-top: var(--space-2);
	font-family: var(--font-sans);
	font-size: var(--size-s);
	font-style: normal;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mute);
}

/* --- Separator ---------------------------------------------------------- */

.prose .wp-block-separator {
	margin: var(--space-5) 0;
	border: 0;
	border-top: 1px solid var(--line);
}

/* --- Buttons: same look as .button / .button--ghost --------------------- */

.prose .wp-block-buttons {
	gap: var(--space-2);
	margin-top: var(--space-3);
}

.prose .wp-block-buttons .wp-block-button > .wp-block-button__link {
	display: inline-block;
	padding: 0.75rem 1.75rem;
	font-size: var(--size-s);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--paper);
	background: var(--ink);
	border: 1px solid var(--ink);
	border-radius: 0;
	transition: background 0.2s, color 0.2s;
}

.prose .wp-block-buttons .wp-block-button > .wp-block-button__link:hover {
	color: var(--ink);
	background: var(--paper);
}

/* "Outline" style in the editor sidebar = ghost button */
.prose .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--ink);
	background: transparent;
}

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

/* --- Inline contact icon (e.g. WhatsApp before a phone number) ---------- */

/* Reset the .prose image margins so the icon sits on the text line */
.prose .contact-icon img {
	display: inline-block;
	width: 1.1em;
	height: 1.1em;
	margin: 0 0.15em 0 0;
	vertical-align: -0.2em;
	transition: opacity 0.25s ease;
}

.prose .contact-icon:hover img {
	opacity: 0.6;
}