/* ==========================================================================
   ArtiSima – main stylesheet
   Desktop sizes are taken from the 2500px-wide Figma canvas and scaled with
   --k (1 design px → 1px at 2500px wide, never smaller than 0.5px).
   Mobile sizes (≤ 767px) follow the 390px Figma frames.
   ========================================================================== */

:root {
	--k: clamp(0.5px, calc(100vw / 2500), 1px);
	--pad: 12.44vw;                 /* 311 / 2500 – left edge of the content */
	--black: #000;
	--white: #fff;
	--blue: #4199ff;
	--sand: #bca893;
	--grey: #d9d9d9;
	--footer: #eee;
	--footer-bar: #d1d1d1;
	--font-sans: "Google Sans", "Google Sans Flex", "Product Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--font-title: "Loupot", "Kaushan Script", "Brush Script MT", cursive;
	--font-script: "Snell Roundhand Local", "Snell Roundhand", "Great Vibes", "Apple Chancery", cursive;
	--fs-body: max(16px, calc(22 * var(--k)));
	--fs-title: max(40px, calc(80 * var(--k)));
	--fs-button: max(16px, calc(24 * var(--k)));
	--track: 0.1em;
}

@media (max-width: 1100px) {
	:root { --pad: 40px; }
	.br-desktop { display: none; }
}

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

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

body {
	margin: 0;
	background: var(--white);
	color: var(--black);
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; }
img { display: block; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: inherit; }
button { font: inherit; color: inherit; }

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

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute; left: 12px; top: -60px; z-index: 1000;
	background: var(--black); color: var(--white);
	padding: 10px 16px; border-radius: 8px; text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ---------- Shared pieces ---------- */
.section-title {
	font-family: var(--font-title);
	font-weight: 700;
	font-size: var(--fs-title);
	line-height: 1.25;
	letter-spacing: 0.2em;
	padding-inline-start: 0.2em; /* balances the trailing letter-spacing when centered */
	text-transform: capitalize;
	text-align: center;
	margin: 0;
}
.section-title--white { color: var(--white); }
.section-title--sand  { color: var(--sand); }
.section-title--blue  { color: var(--blue); }

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: max(44px, calc(55 * var(--k)));
	padding: calc(12 * var(--k)) max(22px, calc(32 * var(--k))) calc(12 * var(--k)) max(23px, calc(33 * var(--k)));
	border-radius: max(10px, calc(15 * var(--k)));
	font-family: var(--font-sans);
	font-size: var(--fs-button);
	letter-spacing: var(--track);
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: transform .2s ease, opacity .2s ease, background-color .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--black { background: var(--black); color: var(--white); }
.btn--black:hover { background: #222; }
.btn--white { background: var(--white); color: var(--black); }

.pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: max(8px, calc(13 * var(--k))) max(18px, calc(32 * var(--k))) max(8px, calc(12 * var(--k))) max(18px, calc(33 * var(--k)));
	border-radius: 64px;
	background: var(--blue);
	color: var(--white);
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: max(14px, calc(24 * var(--k)));
	line-height: 1.25;
	white-space: nowrap;
}


/* ---------- Header ---------- */
.site-header {
	position: relative;
	z-index: 30;
	background: var(--white);
	height: max(72px, calc(109 * var(--k)));
}
.site-header__inner {
	position: relative;
	height: 100%;
	padding: 0 var(--pad);
	display: flex;
	align-items: center;
}
.site-logo { display: block; color: var(--black); line-height: 0; }
.site-logo__desktop svg,
.site-logo__desktop img { width: max(140px, calc(211 * var(--k))); height: auto; display: block; }
.site-logo__mobile { display: none; }

.site-nav {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.site-nav__list {
	display: flex;
	gap: max(28px, calc(49 * var(--k)));
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: max(15px, calc(18 * var(--k)));
	line-height: 1.3;
	white-space: nowrap;
}
.site-nav__list a {
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size .25s ease;
	padding-bottom: 2px;
}
.site-nav__list a:hover,
.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_item > a { background-size: 100% 1px; }

.menu-toggle {
	display: none;
	margin-left: auto;
	padding: 8px;
	margin-right: -8px;
	border: 0;
	background: none;
	cursor: pointer;
	line-height: 0;
}

/* Home: the menu floats over the hero, the big logo sits in the hero. */
.is-home .site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: transparent;
	height: auto;
}
.is-home .site-header .site-logo { visibility: hidden; }
.is-home .site-nav { top: calc(48 * var(--k)); transform: translateX(-50%); }

@media (max-width: 1100px) and (min-width: 768px) {
	.site-nav,
	.is-home .site-nav { position: static; transform: none; margin-left: auto; }
	.is-home .site-header__inner { padding-top: 24px; }
}

/* Mobile menu (overlay) */
.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: rgba(0, 0, 0, .9);
	color: var(--white);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	padding: 36px 20px 40px;
	opacity: 0;
	transition: opacity .25s ease;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu.is-open { opacity: 1; }
.mobile-menu__top { display: flex; align-items: center; justify-content: space-between; }
.mobile-menu__logo { color: var(--white); line-height: 0; }
.mobile-menu__logo svg, .mobile-menu__logo img { width: 172px; height: auto; }
.mobile-menu__logo img { filter: invert(1); }
.mobile-menu__close { border: 0; background: none; padding: 8px; margin-right: -8px; cursor: pointer; color: var(--white); line-height: 0; }
.mobile-menu__nav { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 0; }
.mobile-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 36px;
	font-size: 28px;
	line-height: 1.25;
}
.mobile-menu__list a { text-decoration: none; }
.mobile-menu__art { width: 154px; margin: 0 auto; opacity: .9; }
body.menu-open { overflow: hidden; }

/* ---------- Hero ---------- */
.hero {
	position: relative;
	aspect-ratio: 2500 / 1138;
	min-height: 360px;
	min-width: 0;
	width: 100%;
	overflow: hidden;
	background: #f4f4f4;
}
.hero__bg, .hero__bg img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.hero__bg img { object-fit: cover; object-position: center; }
.hero__content {
	position: absolute;
	left: var(--pad);
	top: 32.43%;
}
.hero__logo { color: var(--black); line-height: 0; }
.hero__logo svg, .hero__logo img { width: max(180px, calc(293 * var(--k))); height: auto; }
.hero__title {
	margin-top: max(20px, calc(48 * var(--k)));
	font-family: "Google Sans Flex", var(--font-sans);
	font-weight: 700;
	font-size: max(28px, calc(60 * var(--k)));
	line-height: 1.24;
	color: var(--black);
}

/* ---------- Home: about ---------- */
.home-about {
	background: var(--black);
	color: var(--white);
	padding: max(48px, calc(76 * var(--k))) var(--pad) max(72px, calc(119 * var(--k)));
	text-align: center;
}
.home-about__text {
	max-width: max(640px, calc(1324 * var(--k)));
	margin: max(32px, calc(75 * var(--k))) auto 0;
	letter-spacing: var(--track);
	line-height: 1.8;
}
.home-about__text p + p { margin-top: 1.8em; }

/* ---------- Art tiles & grids ---------- */
.art-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }

.art-tile {
	position: relative;
	display: block;
	color: inherit;
	text-decoration: none;
}
.art-tile__media {
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	background: #f2f2f2;
}
.art-tile__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s ease;
}
.art-tile__caption {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: max(4px, calc(10 * var(--k)));
	padding: 6%;
	background: rgba(0, 0, 0, .8);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	color: var(--white);
	text-align: center;
	opacity: 0;
	transition: opacity .35s ease;
}
.art-tile:hover .art-tile__caption,
.art-tile:focus-visible .art-tile__caption { opacity: 1; }
.art-tile:hover .art-tile__media img { transform: scale(1.03); }
.art-tile__name {
	font-family: var(--font-title);
	font-weight: 700;
	font-size: max(28px, calc(80 * var(--k)));
	line-height: 1.05;
	overflow-wrap: anywhere;   /* names are shown exactly as typed in the admin */
}
.art-tile__year {
	font-size: max(14px, calc(22 * var(--k)));
	line-height: 1.8;
}
.art-tile:focus-visible { outline-offset: -4px; outline-color: var(--white); }

/* ---------- Home: gallery ---------- */
.home-gallery { padding-top: max(28px, calc(34 * var(--k))); }
.home-gallery__wrap {
	position: relative;
	margin-top: max(20px, calc(38 * var(--k)));
	container-type: inline-size;
}
.home-gallery__button {
	position: absolute;
	left: 50%;
	bottom: 25cqw;           /* top edge of the last row */
	transform: translate(-50%, 50%);
	z-index: 2;
}
.home-gallery__button:hover { transform: translate(-50%, 50%) translateY(-1px); }
.home-gallery.is-single-row .home-gallery__wrap { padding-bottom: max(32px, calc(60 * var(--k))); text-align: center; }
.home-gallery.is-single-row .home-gallery__button {
	position: relative;
	left: auto;
	bottom: auto;
	transform: none;
	margin-top: max(24px, calc(40 * var(--k)));
}

/* ---------- Home: Sima's story ---------- */
.home-story { padding-top: max(36px, calc(48 * var(--k))); }
.home-story__box {
	position: relative;
	margin-top: max(24px, calc(47 * var(--k)));
	background: var(--blue);
	min-height: max(420px, calc(789 * var(--k)));
	overflow: hidden;
	isolation: isolate;
	display: flex;
	align-items: flex-start;
}
.home-story__image {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 62.04%;
	mix-blend-mode: overlay;
	pointer-events: none;
}
.home-story__image img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.home-story__content {
	position: relative;
	padding: max(56px, calc(235 * var(--k))) 20px max(56px, calc(112 * var(--k))) calc(var(--pad) + 2 * var(--k));
	width: calc(var(--pad) + max(380px, calc(701 * var(--k))) + 20px);
	color: var(--white);
}
.home-story__title-mobile { display: none; }
.home-story__text { letter-spacing: var(--track); line-height: 1.8; }
.home-story__text p + p { margin-top: 1.8em; }
.home-story .btn { margin-top: max(24px, calc(37 * var(--k))); font-family: "Google Sans Flex", var(--font-sans); }

/* ---------- Home: products ---------- */
.home-products { padding-top: max(40px, calc(70 * var(--k))); }
.products-grid {
	margin-top: max(28px, calc(59 * var(--k)));
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.product-tile {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1250 / 805;
	overflow: hidden;
	background: #f2f2f2;
	text-decoration: none;
}
.product-tile img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .8s ease;
}
a.product-tile:hover img { transform: scale(1.03); }
.product-tile .pill { position: relative; z-index: 1; }

/* ---------- Gallery page ---------- */
.gallery-page { padding-top: max(24px, calc(50 * var(--k))); }
.gallery-page__empty { padding: 80px var(--pad); text-align: center; }

@media (max-width: 1024px) and (min-width: 768px) {
	.art-grid--gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Touch screens (no hover): show the name under each artwork on the gallery page. */
@media (hover: none) and (min-width: 768px) {
	.art-grid--gallery { gap: 32px 20px; padding: 0 20px 40px; }
	.art-grid--gallery .art-tile__caption {
		position: static;
		opacity: 1;
		background: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		color: #020202;
		align-items: flex-start;
		text-align: left;
		padding: 10px 0 0;
		gap: 0;
	}
	.art-grid--gallery .art-tile__name { font-size: 28px; text-transform: lowercase; }
	.art-grid--gallery .art-tile__year { font-size: 14px; }
	.art-grid--home .art-tile__caption { display: none; }
}

/* ---------- Artwork page ---------- */
.artwork {
	display: flex;
	align-items: flex-start;
	gap: max(20px, calc(30 * var(--k)));
	padding: max(24px, calc(50 * var(--k))) var(--pad) max(40px, calc(50 * var(--k)));
}
.artwork__media { flex: 0 0 44.44vw; max-width: 1111px; }
.artwork__info {
	flex: 0 1 max(340px, calc(534 * var(--k)));
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: max(10px, calc(15 * var(--k)));
}
.artwork__quote {
	width: 137%;
	max-width: calc(100vw - var(--pad) - 44.44vw - 60px);
	font-family: var(--font-script);
	font-weight: 700;
	font-size: max(18px, calc(34 * var(--k)));
	line-height: 1.41;
	opacity: .2;
}
.artwork__title {
	font-family: var(--font-title);
	font-weight: 700;
	font-size: max(40px, calc(80 * var(--k)));
	line-height: 1.05;
	overflow-wrap: anywhere;   /* names are shown exactly as typed in the admin */
}
.artwork__year {
	font-family: "Google Sans Flex", var(--font-sans);
	font-weight: 500;
	font-size: max(15px, calc(22 * var(--k)));
	line-height: 1.8;
}
.artwork__description { letter-spacing: var(--track); line-height: 1.8; }
.artwork__description p + p { margin-top: 1em; }
.artwork__description:empty { display: none; }

.artwork__nav { display: flex; gap: max(20px, calc(36 * var(--k))); margin-top: max(4px, calc(0 * var(--k))); }
.artwork__nav-link {
	display: inline-flex;
	align-items: center;
	gap: max(8px, calc(12 * var(--k)));
	min-height: max(36px, calc(46 * var(--k)));
	padding: calc(10 * var(--k)) max(14px, calc(20 * var(--k))) calc(11 * var(--k)) max(10px, calc(12 * var(--k)));
	background: var(--grey);
	opacity: .5;
	font-size: max(15px, calc(20 * var(--k)));
	line-height: 1.25;
	text-decoration: none;
	transition: opacity .2s ease;
}
.artwork__nav-link--next { padding-left: max(10px, calc(12 * var(--k))); padding-right: max(10px, calc(12 * var(--k))); }
.artwork__nav-link:hover, .artwork__nav-link:focus-visible { opacity: 1; }
.artwork__nav-link .icon-arrow { width: max(18px, calc(24.64 * var(--k))); height: auto; flex: none; }

/* Slider */
.slider {
	position: relative;
	aspect-ratio: 1;
	background: var(--white);
	overflow: hidden;
	touch-action: pan-y;
	user-select: none;
}
.slider__track { position: absolute; inset: 0; }
.slider__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .45s ease, visibility .45s;
}
.slider__slide.is-active { opacity: 1; visibility: visible; }
.slider__slide img { width: 100%; height: 100%; object-fit: contain; transition: transform .25s ease; will-change: transform; }

/* Desktop: zoom into the artwork under the mouse */
@media (hover: hover) and (min-width: 901px) {
	.slider.is-zoomable { cursor: zoom-in; }
	.slider.is-zooming .slider__slide.is-active img { transform: scale(var(--zoom, 2.2)); transition: transform .12s ease-out; }
	.slider.is-zooming .slider__arrow { opacity: .6; }
	.slider.is-zooming .slider__arrow:hover { opacity: 1; }
}
.slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: max(36px, 6.48%);
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	padding: 0;
	background: rgba(255, 255, 255, .8);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	cursor: pointer;
	transition: background-color .2s ease;
}
.slider__arrow:hover { background: rgba(255, 255, 255, .95); }
.slider__arrow--prev { left: 4.5%; }
.slider__arrow--next { right: 4.5%; }
.slider__arrow .icon-arrow { width: max(16px, 34%); height: auto; }

/* ---------- Content pages (Sima's story, Contact) ---------- */
.content-page { padding: max(40px, calc(128 * var(--k))) var(--pad) max(48px, calc(60 * var(--k))); }
.entry-content { max-width: max(720px, calc(1359 * var(--k))); }
.entry-content > * { margin-top: 0; margin-bottom: 0; }
.entry-content > * + * { margin-top: max(18px, calc(27 * var(--k))); }
.entry-content > p + p { margin-top: 1.8em; }
.entry-content h1,
.entry-content h2,
.entry-content h3 {
	font-family: "Google Sans Flex", var(--font-sans);
	font-weight: 600;
	font-size: max(19px, calc(26 * var(--k)));
	line-height: 1.8;
	letter-spacing: var(--track);
}
.entry-content p,
.entry-content li { letter-spacing: var(--track); line-height: 1.8; }
.entry-content a { text-underline-offset: 3px; }
.entry-content figure { margin-left: 0; margin-right: 0; }
.entry-content .wp-block-image img { width: 100%; height: 100%; object-fit: cover; }
.entry-content .wp-block-image.is-portrait  { width: max(240px, calc(465 * var(--k))); aspect-ratio: 465 / 610; }
.entry-content .wp-block-image.is-wide      { width: max(450px, calc(872 * var(--k))); aspect-ratio: 872 / 610; }
.entry-content .wp-block-image.is-square    { width: max(315px, calc(610 * var(--k))); aspect-ratio: 1; }
.entry-content .wp-block-image.is-landscape { width: max(366px, calc(709 * var(--k))); aspect-ratio: 709 / 610; }
.entry-content .wp-block-image.is-portrait img,
.entry-content .wp-block-image.is-wide img,
.entry-content .wp-block-image.is-square img,
.entry-content .wp-block-image.is-landscape img { height: 100%; }

.entry-content .wp-block-columns.artisima-pair {
	display: flex;
	flex-wrap: nowrap !important;
	gap: max(20px, calc(40 * var(--k)));
	margin-bottom: 0;
	align-items: flex-start;
}
.entry-content .wp-block-columns.artisima-pair > .wp-block-column {
	flex: 0 0 auto !important;
	flex-basis: auto !important;
	width: auto;
	margin: 0;
}

/* ---------- Contact form ---------- */
.contact-form { margin-top: max(24px, calc(35 * var(--k))); max-width: max(480px, calc(758 * var(--k))); }
.entry-content > .contact-form { margin-top: max(24px, calc(35 * var(--k))); }
.contact-form .wpcf7 form { display: flex; flex-direction: column; gap: max(20px, calc(40 * var(--k))); }
.contact-form .cf-row { display: flex; gap: max(20px, calc(40 * var(--k))); }
.contact-form .cf-row .cf-field { flex: 1 1 0; min-width: 0; }
.contact-form .wpcf7-form-control-wrap { display: block; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
	display: block;
	width: 100%;
	height: max(52px, calc(72 * var(--k)));
	padding: 0 max(16px, calc(33 * var(--k)));
	border: 1px solid var(--black);
	border-radius: max(10px, calc(20 * var(--k)));
	background: var(--white);
	color: var(--black);
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	letter-spacing: var(--track);
	line-height: 1.8;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.contact-form textarea {
	height: max(220px, calc(323 * var(--k)));
	padding-top: max(10px, calc(15 * var(--k)));
	padding-bottom: max(10px, calc(15 * var(--k)));
	resize: vertical;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--black); opacity: 1; }
.contact-form input:focus,
.contact-form textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 2px rgba(65, 153, 255, .35); }
.contact-form .cf-submit { display: flex; align-items: center; gap: 12px; }
.contact-form input[type="submit"],
.contact-form .wpcf7-submit {
	width: max(220px, calc(359 * var(--k)));
	height: max(52px, calc(72 * var(--k)));
	border: 0;
	border-radius: max(10px, calc(20 * var(--k)));
	background: var(--blue);
	color: var(--white);
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	letter-spacing: var(--track);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color .2s ease;
}
.contact-form .wpcf7-submit:hover { background: #2f86ea; }
.contact-form .wpcf7-submit:disabled { opacity: .6; cursor: wait; }
.contact-form .wpcf7-not-valid { border-color: #d63638 !important; }
.contact-form .wpcf7-not-valid-tip { color: #d63638; font-size: 14px; letter-spacing: 0; margin-top: 6px; }
.contact-form .wpcf7 form .wpcf7-response-output {
	margin: 0;
	padding: 12px 18px;
	border-radius: max(10px, calc(20 * var(--k)));
	font-size: max(15px, calc(18 * var(--k)));
	letter-spacing: 0;
}
.contact-form .wpcf7 .wpcf7-spinner { margin: 0; }
.contact-form-missing { padding: 12px 16px; border: 1px dashed #d63638; border-radius: 10px; color: #d63638; }

/* ---------- Footer ---------- */
.site-footer { text-align: center; }
.site-footer__main {
	background: var(--footer);
	padding: max(64px, calc(110 * var(--k))) 20px max(56px, calc(79 * var(--k)));
}
.site-footer__logo { display: inline-block; color: var(--black); line-height: 0; }
.site-footer__logo svg, .site-footer__logo img { width: max(170px, calc(227 * var(--k))); height: auto; }
.site-footer__heading {
	margin-top: max(24px, calc(38 * var(--k)));
	font-weight: 700;
	font-size: max(18px, calc(22 * var(--k)));
	line-height: 1.8;
}
.site-footer__email { font-size: max(18px, calc(22 * var(--k))); line-height: 1.8; }
.site-footer__email a { text-decoration: none; }
.site-footer__email a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-footer__bar {
	background: var(--footer-bar);
	min-height: 68px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 20px;
	font-size: max(15px, calc(18 * var(--k)));
	line-height: 1.8;
}

/* ==========================================================================
   Artwork page – stacked layout for tablets and phones
   ========================================================================== */
@media (max-width: 900px) {
	.artwork {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		padding: 20px 20px 30px;
		max-width: 640px;
		margin: 0 auto;
	}
	.artwork__info { display: contents; }
	.artwork__title { order: 1; font-size: 42px; line-height: 1; }
	.artwork__year { order: 2; font-size: 14px; margin-top: -4px; }
	.artwork__quote { order: 3; width: auto; max-width: 291px; font-size: 16.26px; line-height: 20px; }
	.artwork__media { order: 4; flex: none; max-width: none; }
	.artwork__description { order: 5; font-size: 16px; }
	.artwork__nav { order: 6; justify-content: space-between; gap: 12px; }
	.artwork__nav-link { min-height: 33px; min-width: 110px; padding: 7px 14px 8px 9px; gap: 9px; font-size: 14.5px; }
	.artwork__nav-link--next { justify-content: flex-end; padding: 7px 9px 8px 14px; }
	.artwork__nav-link .icon-arrow { width: 18px; }
}

/* ==========================================================================
   Mobile (≤ 767px) – 390px Figma frames
   ========================================================================== */
@media (max-width: 767px) {
	:root { --pad: 20px; }

	.br-desktop { display: none; }

	/* Header */
	.site-header,
	.is-home .site-header {
		position: relative;
		height: auto;
		background: var(--white);
	}
	.site-header__inner,
	.is-home .site-header__inner { padding: 36px 20px 20px; align-items: center; }
	.is-home .site-header .site-logo { visibility: visible; }
	.site-logo__desktop { display: none; }
	.site-logo__mobile { display: block; }
	.site-logo__mobile svg, .site-logo__mobile img { width: 172px; height: auto; }
	.site-nav { display: none; }
	.menu-toggle { display: block; }

	/* Hero */
	.hero { aspect-ratio: 390 / 664; min-height: 0; margin-top: -20px; background: var(--white); }
	.hero__content { left: 20px; right: 20px; top: 20px; }
	.hero__logo { display: none; }
	.hero__title { margin-top: 0; font-size: clamp(30px, 10.16vw, 44px); line-height: 1.17; max-width: 360px; }

	/* Section titles */
	.section-title { font-size: 40px; letter-spacing: 8px; padding-inline-start: 0; text-align: left; }

	/* About */
	.home-about { padding: 50px 20px 43px; text-align: left; }
	.home-about__text { margin-top: 23px; font-size: 18px; letter-spacing: 1.8px; }

	/* Gallery (home) */
	.home-gallery { padding-top: 36px; }
	.home-gallery .section-title { padding: 0 20px; }
	.home-gallery__wrap { margin-top: 34px; padding-bottom: 20px; text-align: center; }
	.art-grid--home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.art-grid--home .art-tile__caption {
		/* names are not shown on the small home grid – kept for screen readers */
		position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); padding: 0; opacity: 1;
	}
	.home-gallery__button,
	.home-gallery.is-single-row .home-gallery__button {
		position: relative;
		left: auto;
		bottom: auto;
		transform: none;
		display: flex;
		width: calc(100% - 40px);
		margin: 20px 20px 0;
		min-height: 50px;
		font-size: 16px;
		letter-spacing: 1.6px;
		font-family: "Google Sans Flex", var(--font-sans);
	}
	.home-gallery__button:hover { transform: none; }
	.home-gallery.is-single-row .home-gallery__wrap { padding-bottom: 20px; }

	/* Story */
	.home-story { padding-top: 0; }
	.home-story__title-desktop { display: none; }
	.home-story__box {
		margin-top: 0;
		min-height: max(560px, 232.8vw);
		align-items: flex-end;
	}
	.home-story__image { width: 100%; left: 0; }
	.home-story__image img { object-position: 74% center; }
	.home-story__content { width: 100%; padding: 140px 20px 45px; }
	.home-story__title-mobile { display: block; margin-bottom: 18px; }
	.home-story__text { font-size: 16px; letter-spacing: 1.6px; }
	.home-story .btn { display: flex; width: 100%; margin-top: 35px; min-height: 55px; font-size: 16px; letter-spacing: 1.6px; }

	/* Products */
	.home-products { padding-top: 40px; }
	.home-products .section-title { padding: 0 20px; }
	.products-grid { margin-top: 35px; grid-template-columns: 1fr; gap: 2px; }
	.product-tile { aspect-ratio: 390 / 251; align-items: flex-start; justify-content: flex-start; padding: 20px; }
	.product-tile .pill { font-size: 12px; padding: 6.5px 16px 6px 16.5px; border-radius: 32px; }

	/* Gallery page */
	.gallery-page { padding: 41px 20px 40px; }
	.art-grid--gallery { grid-template-columns: 1fr; gap: 20px; padding: 0; }
	.art-grid--gallery .art-tile__caption {
		position: static;
		opacity: 1;
		background: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		color: #020202;
		align-items: flex-start;
		text-align: left;
		padding: 10px 0 0;
		gap: 0;
	}
	.art-grid--gallery .art-tile__name { font-size: 32px; line-height: 1.15; text-transform: lowercase; }
	.art-grid--gallery .art-tile__year { font-size: 14px; }
	.art-tile:hover .art-tile__media img { transform: none; }

	/* Content pages */
	.content-page { padding: 20px 20px 40px; }
	.entry-content { max-width: none; }
	.entry-content > * + * { margin-top: 27px; }
	.entry-content h1, .entry-content h2, .entry-content h3 { font-size: 22px; }
	.entry-content p, .entry-content li { font-size: 16px; letter-spacing: 1.6px; }
	.entry-content .wp-block-image.is-portrait,
	.entry-content .wp-block-image.is-wide,
	.entry-content .wp-block-image.is-square,
	.entry-content .wp-block-image.is-landscape { width: 100%; }
	.entry-content .wp-block-columns.artisima-pair { flex-direction: column; gap: 40px; }
	.entry-content .wp-block-columns.artisima-pair > .wp-block-column { width: 100%; }

	/* Contact form */
	.contact-form { max-width: none; }
	.contact-form .wpcf7 form { gap: 20px; }
	.contact-form .cf-row { flex-direction: column; gap: 20px; }
	.contact-form input[type="text"],
	.contact-form input[type="email"],
	.contact-form textarea { height: 50px; padding: 0 16px; border-radius: 10px; font-size: 16px; letter-spacing: 1.6px; }
	.contact-form textarea { height: 323px; padding-top: 12px; padding-bottom: 12px; }
	.contact-form .wpcf7-submit { width: 100%; height: 72px; border-radius: 10px; font-size: 22px; letter-spacing: 2.2px; }

	/* Footer */
	.site-footer__main { padding: 110px 20px 79px; }
	.site-footer__logo svg, .site-footer__logo img { width: 227px; }
	.site-footer__heading { margin-top: 38px; font-size: 22px; }
	.site-footer__email { font-size: 22px; }
	.site-footer__bar { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}