/*
 * Avart Studios: the gallery wall from DESIGN 2.md.
 * White canvas, black as the only structural colour, bold Helvetica with
 * -0.02em tracking, a colossal wordmark as architecture, 15px gutters, no
 * shadows or gradients. Each piece wears a 1px hairline in its own dominant
 * colour. One owner-requested change: rounded corners on the artwork.
 */

:root {
	--av-black: #000;
	--av-white: #fff;
	--av-red: #f11216;
	--av-blue: #2e99c9;
	--av-gap: 15px;
	--av-radius: 18px;
	--av-section: 120px;
	--av-side: clamp(150px, 15vw, 240px);
}

body {
	margin: 0;
	background: var(--av-white);
	color: var(--av-black);
	-webkit-font-smoothing: antialiased;
}

.wp-site-blocks {
	padding: 0;
}

.wp-site-blocks > * + *,
.avart-main > * + * {
	margin-block-start: 0;
}

:focus-visible {
	outline: 2px solid var(--av-red);
	outline-offset: 3px;
}

/* Page frame: the wordmark owns a fixed left column; the wall fills the rest. */
.avart-page {
	display: grid;
	grid-template-columns: var(--av-side) minmax(0, 1fr);
	min-height: 100vh;
}

.avart-side {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
}

.avart-main {
	padding: var(--av-gap) var(--av-gap) 0 0;
	min-width: 0;
}

/* The wordmark: set vertically, filling the column top to bottom. */
.avart-mark {
	position: relative;
	height: 100%;
}

.avart-mark__word {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--av-black);
	text-decoration: none;
}

.avart-mark__word span {
	display: block;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	/* "AVART" runs about 3.45em long: fill the column's full height. */
	font-size: min(calc((100vh - 30px) / 3.45), calc(var(--av-side) * 1.3));
	font-weight: 700;
	line-height: 0.85;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

/* Bare typographic links: black text, a chromatic hairline beneath. */
.avart-nav {
	position: fixed;
	top: var(--av-gap);
	right: calc(var(--av-gap) * 2);
	z-index: 20;
	display: flex;
	gap: 18px;
	padding: 6px 10px;
	background: var(--av-white);
}

.avart-nav a,
.avart-link {
	color: var(--av-black);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.02em;
	text-decoration: none;
	border-bottom: 1px solid var(--av-red);
}

.avart-nav a:nth-child(2),
.avart-link--blue {
	border-bottom-color: var(--av-blue);
}

.avart-nav a:hover,
.avart-link:is(a):hover {
	border-bottom-width: 3px;
}

/* The wall: a masonry of untouched aspect ratios. */
.wp-block-gallery.avart-wall {
	display: block !important;
	columns: 3 280px;
	column-gap: var(--av-gap);
	margin: 0 !important;
}

.wp-block-gallery.avart-wall > .wp-block-image {
	display: block;
	width: 100% !important;
	margin: 0 0 var(--av-gap) !important;
	break-inside: avoid;
}

.wp-block-gallery.avart-wall.is-cropped .wp-block-image img,
.wp-block-gallery.avart-wall .wp-block-image img {
	width: 100%;
	height: auto !important;
	object-fit: contain !important;
	flex: none;
	/* WordPress 6.7 gives lazy images with sizes="auto" a 3000x1500
	   placeholder (contain-intrinsic-size); in a masonry that turns every
	   lazy tile into a 1500px box. The width/height attributes already
	   reserve the right space. */
	contain-intrinsic-size: none !important;
}

/* The chromatic hairline, in the piece's own colour, with rounded corners. */
.avart-tile {
	border: 1px solid var(--frame, #000);
	border-radius: var(--av-radius);
	overflow: hidden;
	background: var(--av-white);
}

.avart-tile img {
	display: block;
	border-radius: calc(var(--av-radius) - 1px);
}

@media (prefers-reduced-motion: no-preference) {
	.avart-tile img {
		transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.avart-tile:hover img {
		transform: scale(1.02);
	}
}

/* About: a short line of type at body size, the emblem beside it. */
.avart-about {
	display: grid;
	grid-template-columns: 160px minmax(0, 620px);
	gap: 30px;
	align-items: center;
	padding: var(--av-section) 0 calc(var(--av-section) / 2);
}

.avart-about__emblem {
	width: 160px;
	height: auto;
	border-radius: 50%;
}

.avart-about h2 {
	margin: 0 0 12px;
	font-size: clamp(2.5rem, 4vw, 4.5rem);
	line-height: 0.9;
}

.avart-about p {
	margin: 0 0 12px;
	font-size: 18px;
}

.avart-handles {
	line-height: 2;
}

/* Footer: one quiet line, never competing with the wordmark. */
.avart-foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px 24px;
	padding: 30px 0 var(--av-gap);
	font-size: 14px;
}

.avart-foot p {
	margin: 0;
}

.avart-foot nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
}

.avart-prose {
	padding-top: 80px;
	max-width: 760px;
}

/* Phones and tablets: the wordmark goes horizontal across the top. */
@media (max-width: 780px) {
	.avart-page {
		grid-template-columns: 1fr;
	}

	.avart-side {
		position: static;
		height: auto;
	}

	.avart-mark {
		height: auto;
		padding: 56px var(--av-gap) 0;
	}

	.avart-mark__word {
		position: static;
		display: block;
	}

	.avart-mark__word span {
		writing-mode: horizontal-tb;
		transform: none;
		font-size: 27vw;
		margin-left: -0.04em;
	}

	.avart-nav {
		position: absolute;
		top: 14px;
		right: var(--av-gap);
	}

	.avart-main {
		padding: var(--av-gap);
	}

	.wp-block-gallery.avart-wall {
		columns: 2 140px;
	}

	.avart-about {
		grid-template-columns: 1fr;
		padding-top: 60px;
	}
}