/* =========================================================================
   Anton Calmis — main stylesheet
   Minimal / gallery-white. Palatino throughout; italic for navigation.
   ========================================================================= */

/* ---- Design tokens --------------------------------------------------- */
:root {
	--color-bg: #ffffff;
	--color-ink: #161616;
	--color-muted: #6b6b6b;
	--color-line: #e6e6e6;
	--color-accent: #0000ff; /* electric blue — link interaction colour */

	--font-serif: "Palatino Linotype", "Palatino LT STD", Palatino, "Book Antiqua", Georgia, serif;

	--space-1: 0.5rem;
	--space-2: 1rem;
	--space-3: 1.5rem;
	--space-4: 2.5rem;
	--space-5: 4rem;
	--space-6: 6rem;

	--maxw: 1600px;
	--maxw-text: 42rem;

	--transition: 280ms ease;
}

/* ---- Page navigation ------------------------------------------------ *
 * Cross-document View Transitions are intentionally OFF for now. Their timing
 * over the dev tunnel was unreliable and fought the mobile-menu cover. Menu
 * navigation uses a plain white cover (see the mobile menu section) that simply
 * holds until the next page paints — deterministic and flicker-free. We can
 * reintroduce View Transitions (scoped with view-transition types) at launch.
 * --------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent; /* no grey flash on tap (mobile) */
}

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-ink);
	font-family: var(--font-serif);
	font-size: 1.0625rem;
	line-height: 1.6;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	/* Sticky-footer column: the copyright always sits at the bottom of the
	   viewport, even when a page's content is short. */
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
}

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

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

/* Show the focus ring only for keyboard users — not after a mouse/touch tap.
   (Keyboard navigation still gets a visible outline via :focus-visible.) */
:focus:not(:focus-visible) {
	outline: none;
}

/* The mobile menu container receives focus when it opens (for a11y); it's not
   interactive itself, so it should never show a ring. */
.site-nav:focus {
	outline: none;
}

h1, h2, h3 {
	font-weight: 400;
	line-height: 1.2;
	margin: 0 0 var(--space-2);
}

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

.skip-link:focus {
	position: fixed;
	top: var(--space-1);
	left: var(--space-1);
	z-index: 1000;
	clip: auto;
	width: auto;
	height: auto;
	padding: var(--space-1) var(--space-2);
	background: var(--color-ink);
	color: var(--color-bg);
}

/* ---- Layout containers ---------------------------------------------- *
 * Content is anchored flush-left to the SAME left edge as the header (8px on
 * desktop, var(--space-2) on mobile) and never centred. Whatever room is left
 * over collects as whitespace on the right — the minimal, white-space-heavy,
 * flush-left grotesque feeling. Generous top/bottom padding adds vertical air.
 * --------------------------------------------------------------------- */
.container {
	width: 100%;
	max-width: var(--maxw);
	margin-inline: 0; /* flush left — not centred */
	padding-inline: 16px; /* 16px left/right everywhere, matching header + footer */
	padding-block: var(--space-5);
}

.container--text {
	max-width: var(--maxw-text);
}

.container--centered {
	text-align: center;
}

/* ---- Header & navigation -------------------------------------------- */
.site-header {
	padding: 10px 16px; /* 10px top/bottom, 16px left/right everywhere */
	position: sticky;
	top: 0;
	z-index: 100;
	background: transparent;
}

/* Distribute the name + every menu item evenly across the full width.
   display:contents on the nav/list lets each <li> become a direct flex item
   of the header row, so space-between spaces them all evenly edge-to-edge. */
.site-header__inner {
	max-width: none; /* full-bleed header so the 8px side gutters reach the edges */
	margin-inline: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2); /* minimum gap if items wrap on small screens */
	flex-wrap: wrap;
}

.site-nav,
.site-nav__list {
	display: contents;
}

/* The mobile toggle is hidden on desktop (shown in the mobile media query). */
.nav-toggle {
	display: none;
}

/* The name and the nav items share one treatment: italic, pure black,
   24px (1.5rem), line-height 120%. */
.site-title,
.site-nav__list a,
.site-nav__list .page_item a {
	font-style: italic;
	font-size: 1.5rem;
	line-height: 1.2;
	color: #000;
}

.site-title {
	margin: 0;
}

/* The <ul>/<nav> are display:contents, so reset the <li> directly. */
.site-nav__list li,
.site-nav__list .page_item {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---- Link & button interaction ------------------------------------- *
 * Minimal, underline-free: every link AND button — the name, nav items,
 * body links, the lightbox Close, the email/Instagram links, the Inquire
 * button — turns electric blue on interaction (hover, press, or tap), on
 * both desktop and mobile. Nothing is ever underlined. No per-page
 * persistent colour. On touch, JS adds .is-selected to the tapped nav link
 * so the blue holds through the page load.
 * --------------------------------------------------------------------- */
a,
button {
	text-decoration: none;
	transition: color var(--transition);
}

a:hover,
a:active,
button:hover,
button:active,
.site-nav__list a.is-selected {
	color: var(--color-accent);
	text-decoration: none;
}

/* ---- Desktop nav: active page + hover-to-focus dimming -------------- *
 * Desktop only (mobile uses the overlay menu below, untouched):
 *   1. The CURRENT page's nav item stays electric blue, so you always know
 *      where you are.
 *   2. Hovering any header item — the site NAME or a nav item — fades all the
 *      OTHER items (name + nav) to half opacity (0.5), so the hovered one steps
 *      forward. The .is-hovering class is toggled by JS (initHeaderHover) only
 *      while a real item is hovered. We avoid CSS :has() here because Safari
 *      doesn't reliably re-evaluate it across the nav's display:contents
 *      boundary. Adjust the 0.5 to taste — higher = subtler, lower = stronger.
 * --------------------------------------------------------------------- */
@media (min-width: 700px) {
	.site-title a,
	.site-nav__list a {
		transition: color var(--transition), opacity var(--transition);
	}

	/* Current page — persistent blue. WordPress adds these classes to the menu
	   item (or page-list item) matching the page you're on, including a CPT
	   archive's parent item. */
	.site-nav__list .current-menu-item > a,
	.site-nav__list .current-menu-ancestor > a,
	.site-nav__list .current-menu-parent > a,
	.site-nav__list .current_page_item > a,
	.site-nav__list .current_page_parent > a {
		color: var(--color-accent);
	}

	.site-header__inner.is-hovering .site-title:not(:hover) a,
	.site-header__inner.is-hovering .site-nav__list li:not(:hover) a {
		opacity: 0.5;
		/* While another item is hovered, the active page item drops its
		   persistent blue and reads as black like the rest — only the hovered
		   item stands out. The blue returns when the pointer leaves. */
		color: #000;
	}
}

/* ---- Mobile menu (full-screen overlay) ------------------------------ *
 * Below 700px the inline nav is replaced by a "Menu" text toggle that opens a
 * full-screen white overlay with the items stacked. The header stays on top
 * (z-index 100 > overlay 90) so the name + "Close" remain visible.
 * --------------------------------------------------------------------- */
@media (max-width: 699px) {

	.nav-toggle {
		display: inline-flex;
		align-items: center;
		appearance: none;
		background: none;
		border: 0;
		padding: 0;
		cursor: pointer;
		font-family: var(--font-serif);
		font-style: italic;
		font-size: 1.5rem;
		line-height: 1.2;
		color: #000;
	}

	/* Keep the name + toggle above the overlay (same stacking context as the
	   overlay, which lives inside the header), so they stay visible when open. */
	.site-title,
	.nav-toggle {
		position: relative;
		z-index: 100;
	}

	/* Overlay container — a fast "fog" fade. Only opacity animates (GPU-cheap),
	   so it's instant with no layout/paint lag; visibility flips with no delay
	   on open and after the fade on close. */
	.site-nav {
		display: flex;
		flex-direction: column;
		position: fixed;
		inset: 0;
		z-index: 90;
		background: var(--color-bg);
		padding: 72px var(--space-2) var(--space-3);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		will-change: opacity;
		transition: opacity 110ms ease-out, visibility 0s linear 110ms;
	}

	.site-nav.is-open {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition: opacity 110ms ease-out, visibility 0s;
	}

.site-nav__list {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
		width: 100%;
		margin: 0;
		padding: 0;
	}

	/* Every item — including the current page — is the same size/weight/style;
	   only the colour differs for the active one. */
	.site-nav__list a,
	.site-nav__list .current-menu-item > a,
	.site-nav__list .current_page_item > a {
		font-size: 2rem; /* larger, easy tap targets */
		font-style: italic;
		font-weight: 400;
		line-height: 1.3;
	}

	/* Tap colour change is instant on mobile — no fade to lag behind the page
	   load (the 280ms hover fade is desktop-only nicety). */
	.site-title a,
	.site-nav__list a {
		transition: none;
	}

	/* Prevent the page behind the overlay from scrolling while it's open. */
	body.menu-open {
		overflow: hidden;
	}
}

/* ---- Main / footer -------------------------------------------------- */
.site-main {
	display: block;
	/* Grow to fill the space so the footer is pushed to the bottom edge. */
	flex: 1 0 auto;
}

/* Footer matches the homepage copyright exactly: same top/bottom + left
   padding, left-aligned, transparent. The sticky-footer column above keeps
   it pinned to the bottom of the viewport on every page. */
.site-footer {
	margin-top: 0;
	padding: 10px 16px; /* 10px top/bottom, 16px left/right everywhere */
	color: var(--color-muted);
	font-size: 0.95rem;
}

.site-footer__inner {
	max-width: none;
	margin-inline: 0;
	display: flex;
	justify-content: flex-start;
	gap: var(--space-2);
	flex-wrap: wrap;
}

.site-footer__copy {
	margin: 0; /* no default <p> margin, so footer padding is exactly the header's */
	font-size: 0.5rem; /* 8px */
}

/* ---- Home: locked full-viewport, no scroll -------------------------- *
 * The homepage fills exactly one screen with no scrolling. The body becomes
 * a flex column (sticky header on top, hero filling the middle, copyright
 * pinned bottom-left) and clips any overflow.
 * --------------------------------------------------------------------- */
body.home-locked {
	height: 100dvh;
	overflow: hidden;
}

/* The hero image fills the ENTIRE viewport (behind everything). */
body.home-locked .site-main {
	position: fixed;
	inset: 0;
	z-index: 0;
}

/* The header floats on top of the image (it's already transparent). */
body.home-locked .site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
}

.home-hero {
	height: 100%;
	padding: 0; /* full-bleed — the image reaches the screen edges */
}

.home-hero__link {
	display: block;
	width: 100%;
	height: 100%;
}

.home-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;       /* fill the whole area edge-to-edge */
	object-position: center; /* centred (crops to fit) */
}

/* On the locked homepage the footer floats ON TOP of the full-bleed image,
   so it switches from the in-flow sticky position to fixed. Padding and
   left-alignment are already inherited from the base .site-footer rules. */
body.home-locked .site-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 100;
}

/* ---- Archive headers ------------------------------------------------ */
.archive-header {
	padding: var(--space-2) 0 var(--space-4);
}

.archive-title,
.page-title {
	font-style: italic;
	font-size: 1.5rem;
	margin: 0;
}

/* ---- Work grid (2-col desktop / 1-col mobile) ----------------------- */
.work-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5) var(--space-4);
}

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

.work-card__figure {
	margin: 0;
}

.work-card__image {
	width: 100%;
	height: auto;
}

.work-card__caption {
	margin-top: var(--space-1);
	font-size: 0.95rem;
	line-height: 1.4;
}

.work-card__title {
	font-style: italic;
}

.work-card__meta {
	color: var(--color-muted);
}

.work-card__title::after {
	content: ", ";
}

/* ---- Single work ("lightbox" view) ---------------------------------- */
/* A full-screen overlay. The work's images fill the ENTIRE height of the
   page and sit in one row; if their combined width exceeds the viewport the
   row scrolls horizontally. The Close link is pinned to the EXACT spot the
   header's last item occupies — Contact on desktop, Menu on mobile
   (top: 10px / right: 16px). Images run full-bleed behind the Close and the
   bottom info bar. */
body.single-work {
	overflow: hidden; /* the gallery scrolls, not the page */
}

.work-single {
	position: fixed;
	inset: 0;
	z-index: 200; /* above the sticky header (z-index 100) */
	background: var(--color-bg);
	overflow: hidden;
	margin: 0;
	max-width: none;
}

.work-single__close,
.exhibition-single .work-single__close {
	position: fixed;
	top: 10px;
	right: 16px;
	z-index: 210; /* above the images, which run full-bleed under it */
	margin: 0;
	font-style: italic;
	font-size: 1.5rem;
	line-height: 1.2;
	color: #000;
}

/* ---- Work gallery (full-height row, scroll if it overflows) --------- *
 * Every image (the full work image + each detail/installation shot) is shown
 * at full opacity and ALWAYS at full viewport height, side by side with 16px
 * gaps. The row is centred when it fits; when it's wider than the viewport it
 * scrolls horizontally (safe center keeps the start reachable). Click to zoom. */
.work-gallery {
	height: 100%;
	display: flex;
	align-items: stretch;
	justify-content: safe center;
	gap: 16px;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* Firefox — hide the scrollbar */
}

.work-gallery::-webkit-scrollbar {
	display: none; /* WebKit — hide the scrollbar */
}

.work-gallery__image {
	flex: 0 0 auto;
	display: block;
	height: 100%; /* always full viewport height */
	width: auto; /* width follows the image's aspect ratio */
	max-width: none;
}

/* ---- Bottom info bar (over the images) ------------------------------ *
 * Metadata (left) + Inquire (right), at the same size as the Close link. A
 * white gradient (opaque at the bottom, fading out ~48px up) keeps them
 * readable over the artwork behind. */
.work-single__bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 210;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3);
	padding: 8px 16px 10px;
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--color-ink);
	background-image: linear-gradient(to top, var(--color-bg), rgba(255, 255, 255, 0));
	background-repeat: no-repeat;
	background-position: bottom;
	background-size: 100% 48px;
	pointer-events: none; /* let drags / zoom-clicks reach the images behind */
}

.work-single__bar .inquire-button {
	pointer-events: auto; /* but the Inquire button stays clickable */
	flex: 0 0 auto;
	font-size: inherit;
	margin-top: 0;
}

/* "Not available" — shown in the Inquire button's spot for sold works. Same
   size/position as the button, but muted and non-interactive (just a label). */
.work-unavailable {
	flex: 0 0 auto;
	font-size: inherit;
	font-style: italic;
	color: var(--color-muted);
}

.work-single__line {
	margin: 0;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.work-single__title {
	font-style: italic;
}

/* ---- Generic link lists --------------------------------------------- */
.link-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

/* ---- Inquire button + dialog ---------------------------------------- */
.inquire-button {
	appearance: none;
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 1.0625rem;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--color-ink);
	padding: 0 0 2px;
	margin-top: var(--space-3);
	cursor: pointer;
	color: var(--color-ink);
}

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

.inquire-dialog {
	border: 1px solid var(--color-line);
	padding: 0;
	max-width: 32rem;
	width: calc(100% - 2rem);
	color: var(--color-ink);
	background: var(--color-bg);
}

.inquire-dialog::backdrop {
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(2px);
}

.inquire-dialog__body {
	padding: var(--space-4);
}

.inquire-dialog__title {
	font-style: italic;
	font-size: 1.3rem;
}

.inquire-dialog__work {
	color: var(--color-muted);
	font-style: italic;
	margin-top: 0;
}

.inquire-dialog__close-form {
	margin: 0;
	text-align: right;
}

.inquire-dialog__close {
	appearance: none;
	background: none;
	border: 0;
	/* Match the header nav items: same italic 1.5rem treatment, and the same
	   10px/16px gutter the header gives its items from the edge. */
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 1.5rem;
	line-height: 1.2;
	padding: 10px 16px;
	cursor: pointer;
	color: #000;
}

/* The dialog auto-focuses the × on open (showModal), leaving a focus ring on it.
   Suppress that ring — the button still works, and Esc / click-outside also
   close the dialog, so nothing is lost. It still turns blue on hover/active. */
.inquire-dialog__close:focus,
.inquire-dialog__close:focus-visible {
	outline: none;
}

/* ---- Built-in inquiry form ------------------------------------------ *
 * Shown when no Contact Form 7 shortcode is set. Minimal, underline-only
 * fields to match the gallery aesthetic. Submits via inc/inquiry.php. */
.inquire-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-top: var(--space-2);
}

.inquire-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin: 0;
}

.inquire-form__field label {
	font-style: italic;
	font-size: 0.9rem;
	color: var(--color-muted);
}

.inquire-form input[type="text"],
.inquire-form input[type="email"],
.inquire-form textarea {
	font-family: var(--font-serif);
	font-size: 1.0625rem;
	color: var(--color-ink);
	background: var(--color-bg);
	border: 0;
	border-bottom: 1px solid var(--color-line);
	padding: 0.4rem 0;
	width: 100%;
}

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

.inquire-form textarea {
	resize: vertical;
	min-height: 5rem;
}

/* Honeypot — removed visually but kept in the DOM for bots to trip on. */
.inquire-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.inquire-form__submit {
	align-self: flex-end;
	appearance: none;
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 1.0625rem;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--color-ink);
	padding: 0 0 2px;
	margin-top: var(--space-1);
	cursor: pointer;
	color: var(--color-ink);
}

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

.inquire-form__submit:disabled {
	opacity: 0.5;
	cursor: default;
}

.inquire-form__status:empty {
	display: none;
}

.inquire-form__status {
	margin: 0;
	font-style: italic;
	color: var(--color-muted);
}

/* ---- Exhibitions list + hover preview ------------------------------- */
.exhibition-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.exhibition-list__link {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-1) var(--space-3);
	padding: var(--space-2) 0;
	border-bottom: 1px solid var(--color-line);
}

.exhibition-list__name {
	font-style: italic;
	font-size: 1.25rem;
}

.exhibition-list__venue,
.exhibition-list__dates {
	color: var(--color-muted);
	font-size: 0.95rem;
}

.exhibition-list__dates {
	margin-left: auto;
}

/* Floating hover preview — desktop only, positioned by JS. */
.exhibition-preview {
	position: fixed;
	top: 0;
	left: 0;
	width: 300px;
	max-width: 32vw;
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, -50%);
	transition: opacity 160ms ease;
	z-index: 50;
}

.exhibition-preview.is-visible {
	opacity: 1;
}

.exhibition-preview__image {
	width: 100%;
	height: auto;
	box-shadow: 0 6px 30px rgba(0, 0, 0, 0.12);
}

@media (hover: none), (max-width: 760px) {
	/* No floating preview on touch / small screens. */
	.exhibition-preview {
		display: none;
	}
}

/* ---- Single exhibition + install grid ------------------------------- */
.exhibition-single {
	padding: var(--space-2) var(--space-4) var(--space-5);
	max-width: var(--maxw);
	margin-inline: auto;
}

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

.exhibition-single__title {
	font-style: italic;
	font-size: 1.6rem;
}

.exhibition-single__venue,
.exhibition-single__dates {
	color: var(--color-muted);
	margin: 0;
}

.install-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4) var(--space-3);
}

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

.install-grid__item {
	margin: 0;
}

/* ---- Biography + CV ------------------------------------------------- */
.biography__portrait {
	margin: 0 0 var(--space-4);
}

.biography__portrait-image {
	width: 100%;
	height: auto;
}

.biography__text {
	margin-bottom: var(--space-5);
	font-size: 1.125rem;
}

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

.cv__heading {
	font-style: italic;
	font-size: 1.1rem;
	padding-bottom: var(--space-1);
	border-bottom: 1px solid var(--color-line);
}

.cv__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cv__entry {
	display: flex;
	gap: var(--space-2);
	padding: 0.2rem 0;
}

.cv__year {
	flex: 0 0 4rem;
	color: var(--color-muted);
}

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

/* ---- Contact -------------------------------------------------------- */
.contact__media {
	margin: 0 0 var(--space-4);
}

.contact__image {
	width: 100%;
	height: auto;
}

.contact__email {
	font-size: 1.25rem;
	font-style: italic;
}

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

/* ---- Misc ----------------------------------------------------------- */
.empty-state {
	color: var(--color-muted);
	font-style: italic;
	padding: var(--space-4) 0;
}

.pagination {
	margin: var(--space-5) 0;
	display: flex;
	gap: var(--space-2);
	justify-content: center;
}