/* ==========================================================================
   MELLIVORA — main stylesheet
   Values are taken directly from Figma (file V2CKfgNBKHbFQE4c0O1G14):
   404page (1440x1135) and "404 сторінка" (402x874).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
	/* Colours — Figma styles "mellivora main" / "mellivora white" */
	--mv-ink: #121214;
	--mv-paper: #fbf5f3;
	--mv-accent: rgba(180, 177, 210, 0.5);

	/* Typography */
	--mv-font: "Raleway", "Helvetica Neue", Arial, sans-serif;
	--mv-track: 0.08em; /* Figma letterSpacing = 8% */
	--mv-leading: 1.172; /* Raleway "auto" line height, measured off this file */

	/* Fluid type — interpolated between the 402px and 1440px frames */
	--mv-size-title: clamp(22px, 1.66px + 6.551vw, 96px);   /* 28 -> 96 */
	--mv-size-404: clamp(60px, 55.86px + 5.01vw, 128px);    /* 76 -> 128 */
	--mv-size-button: clamp(11px, 10.45px + 0.3854vw, 16px);/* 12 -> 16 */

	/* Fluid vertical rhythm of the 404 block */
	--mv-gap-title-404: clamp(1.5px, 63.43px - 4.301vw, 46.15px);
	--mv-gap-404-button: clamp(51px, 90.47px - 2.741vw, 79.45px);

	/* Compact-header scale factor (1 = exact 402px mockup) */
	--mv-k: 1;
}

@media (min-width: 600px) {
	:root { --mv-k: 1.5; }
}

@media (min-width: 900px) {
	:root { --mv-k: 1.9; }
}

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

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

body {
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	background: var(--mv-paper);
	color: var(--mv-ink);
	font-family: var(--mv-font);
	font-weight: 400;
	line-height: var(--mv-leading);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
svg { max-width: 100%; }

a {
	color: inherit;
	text-decoration: none;
	transition: opacity 0.18s ease;
}

a:hover { opacity: 0.6; }

a:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 3px;
	opacity: 1;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

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

.skip-link {
	position: absolute;
	top: -100%;
	left: 0;
	z-index: 100;
	padding: 12px 20px;
	background: var(--mv-ink);
	color: var(--mv-paper);
	font-size: 14px;
	letter-spacing: var(--mv-track);
	text-transform: uppercase;
}

.skip-link:focus { top: 0; }

/* --------------------------------------------------------------------------
   3. Header — desktop (Figma node 247:1976, 1440x102)
   Stroke is INSIDE in Figma, so padding is 27/53 + 1px border = 28/54.
   -------------------------------------------------------------------------- */
.site-header {
	position: relative;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 27px 53px;
	background: var(--mv-paper);
	border: 1px solid var(--mv-ink);
}

.site-header__logo {
	flex: 0 0 auto;
	display: block;
	line-height: 0;
}

.site-header__logo img,
.site-header__logo svg {
	display: block;
	width: 184.497px;
	height: 46px;
	color: var(--mv-ink);
}

/* Primary navigation */
.nav-primary > ul {
	display: flex;
	align-items: center;
	gap: 24px;
}

.nav-primary a {
	display: block;
	/* Figma pads each label by ~12% of its own width; 10px is the mean. */
	padding: 0 10px;
	font-size: 16px;
	font-weight: 300;
	line-height: 19px;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
}

.nav-primary .current-menu-item > a { opacity: 0.55; }

/* Utilities cluster: search, cart, language */
.site-header__utils {
	flex: 0 0 auto;
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

.site-header__utils a,
.site-header__utils button {
	display: flex;
	align-items: flex-start;
	line-height: 0;
	color: var(--mv-ink);
}

/* The compact frame uses its own, simplified icon artwork. */
.site-header__icon-lg { display: block; line-height: 0; }
.site-header__icon-sm { display: none; line-height: 0; }

.site-header__icon--search .site-header__icon-lg svg {
	width: 24px;
	height: 24px;
}

.site-header__icon--cart .site-header__icon-lg svg {
	width: 27.888px;
	height: 24px;
}

.site-header__lang {
	padding: 0 4px;
	font-size: 16px;
	font-weight: 300;
	line-height: 23px;
	letter-spacing: 0;
	text-transform: uppercase;
}

/* Burger — desktop only hides it */
.site-header__burger { display: none; }

/* --------------------------------------------------------------------------
   4. Header — compact (Figma node 356:7429, 402x54)
   Scaled by --mv-k so it is pixel-exact at 402px and grows on tablets.
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {

	.site-header {
		padding: calc(14px * var(--mv-k)) calc(34px * var(--mv-k));
		gap: calc(12px * var(--mv-k));
	}

	.site-header__logo img,
	.site-header__logo svg {
		width: calc(96.378px * var(--mv-k));
		height: calc(24px * var(--mv-k));
	}

	.nav-primary { display: none; }

	.site-header__utils {
		align-items: center;
		gap: calc(12px * var(--mv-k));
	}

	.site-header__utils a,
	.site-header__utils button {
		align-items: center;
		position: relative;
	}

	/* The mockup draws 8-9px controls. Keep that artwork, but stretch the
	   hit area to the full gap plus 44px of height so it is tappable.
	   See the notes file: the icon size itself is worth revisiting. */
	.site-header__utils > *::after {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		width: calc(100% + 12px * var(--mv-k));
		height: 44px;
		transform: translate(-50%, -50%);
	}

	.site-header__icon-lg { display: none; }
	.site-header__icon-sm { display: block; }

	.site-header__icon--search .site-header__icon-sm svg {
		width: calc(8px * var(--mv-k));
		height: calc(8px * var(--mv-k));
	}

	.site-header__icon--cart .site-header__icon-sm svg {
		width: calc(9px * var(--mv-k));
		height: calc(9px * var(--mv-k));
	}

	.site-header__lang {
		padding: 0;
		font-size: calc(8px * var(--mv-k));
		line-height: 1;
	}

	.site-header__burger {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: calc(12px * var(--mv-k));
		height: calc(9px * var(--mv-k));
	}

	.site-header__burger .bar {
		display: block;
		width: 100%;
		/* Figma stroke is 0.5px; never let it round away to nothing. */
		height: max(1px, calc(0.5px * var(--mv-k)));
		background: var(--mv-ink);
		border-radius: 1px;
		transition: transform 0.22s ease, opacity 0.18s ease;
	}

	.site-header__burger[aria-expanded="true"] .bar:nth-child(1) {
		transform: translateY(calc(4px * var(--mv-k))) rotate(45deg);
	}

	.site-header__burger[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }

	.site-header__burger[aria-expanded="true"] .bar:nth-child(3) {
		transform: translateY(calc(-4px * var(--mv-k))) rotate(-45deg);
	}

	/* The mobile panel itself lives in section 15. */
}

/* --------------------------------------------------------------------------
   5. 404 page (Figma nodes 247:1975 / 356:7428)
   -------------------------------------------------------------------------- */
.site-main {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	/* 119px desktop / 118px mobile from the header edge — identical enough. */
	padding: 118px 20px 99px;
}

.error-404__title {
	margin: 0;
	max-width: 1132px;
	font-size: var(--mv-size-title);
	font-weight: 100;
	line-height: var(--mv-leading);
	letter-spacing: var(--mv-track);
	text-transform: uppercase;
}

.error-404__code {
	margin: var(--mv-gap-title-404) 0 0;
	font-size: var(--mv-size-404);
	font-weight: 400;
	line-height: var(--mv-leading);
	letter-spacing: 0;
}

.error-404__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: var(--mv-gap-404-button);
	padding: 0 clamp(18px, 12.3px + 1.09vw, 28px);
	height: clamp(24px, 23.9px + 0.77vw, 35px);
	background: var(--mv-accent);
	font-size: var(--mv-size-button);
	font-weight: 500;
	letter-spacing: var(--mv-track);
	text-transform: uppercase;
	white-space: nowrap;
}

.error-404__button:hover {
	opacity: 1;
	background: rgba(180, 177, 210, 0.75);
}

/* --------------------------------------------------------------------------
   5b. Home page (Figma node 247:1827 / 353:6175)
   -------------------------------------------------------------------------- */
.site-main--home {
	align-items: stretch;
	text-align: left;
	/* 87px below the paragraph at 1440, 146px at 402. */
	padding: 0 0 clamp(87px, 168.85px - 5.684vw, 146px);
}

/* Hero slider ------------------------------------------------------------- */
.hero-slider {
	position: relative;
	touch-action: pan-y;
}

.hero-slider__viewport {
	overflow: hidden;
	aspect-ratio: 12 / 5; /* 1440 x 600 */
}

.hero-slider__track {
	display: flex;
	height: 100%;
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

.hero-slider__slide {
	flex: 0 0 100%;
	height: 100%;
	min-width: 0;
}

.hero-slider__link {
	display: block;
	height: 100%;
}

.hero-slider__link:hover { opacity: 1; }

.hero-slider__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	-webkit-user-drag: none;
	user-select: none;
}

/* Dots — Figma 247:1831..1834: 8px squares, 8px apart, top one active. */
.hero-slider__dots {
	position: absolute;
	right: 18px;
	bottom: 22px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hero-slider__dot {
	width: 8px;
	height: 8px;
	background: #696969;
	transition: background 0.2s ease;
}

.hero-slider__dot.is-active { background: #f3f3f3; }

.hero-slider__dot:hover { background: #bcbcbc; }

/* The squares are 8px; give them a real hit area without moving them. */
.hero-slider__dot {
	position: relative;
}

.hero-slider__dot::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 32px;
	height: 16px;
	transform: translate(-50%, -50%);
}

/* Intro paragraph --------------------------------------------------------- */
.home-intro {
	/* 67px under the hero at 1440, 28px at 402. */
	padding: clamp(28px, 12.9px + 3.757vw, 67px) 8.5% 0;
}

.home-intro__text {
	margin: 0;
	max-width: 997px;
	font-size: clamp(16px, 8.25px + 1.9268vw, 36px);
	font-weight: 400;
	line-height: var(--mv-leading);
	text-transform: uppercase;
}

.home-body {
	margin-top: 48px;
}

/* Coloured runs inside the intro ------------------------------------------ */
.text-grad {
	background-image: linear-gradient(90deg, #ff3538 0%, #c76e00 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.text-grad--alt {
	background-image: linear-gradient(90deg, #ff383c 0%, #d47f07 100%);
}

.text-muted { color: #9a9ab5; }

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
	.text-grad {
		color: #ff3538;
		-webkit-text-fill-color: currentColor;
	}
	.text-grad--alt { color: #ff383c; }
}

@media (max-width: 1199px) {

	/* Between the two frames the hero has no defined shape — 16/9 bridges
	   the 2.4:1 desktop crop and the portrait phone crop. */
	.hero-slider__viewport { aspect-ratio: 16 / 9; }
}

@media (max-width: 767px) {

	.hero-slider__viewport {
		aspect-ratio: 402 / 532;
		max-height: 70svh;
	}

	/* The 402px frame shows no dots. Delete this rule to keep them. */
	.hero-slider__dots { display: none; }
}

@media (min-width: 1200px) {

	.home-intro__text { letter-spacing: -0.01em; } /* Figma: -1% */
}

@media (prefers-reduced-motion: reduce) {

	.hero-slider__track { transition: none; }
}

/* --------------------------------------------------------------------------
   6. Footer (Figma node 337:3900 / 356:7485)
   -------------------------------------------------------------------------- */
.site-footer {
	flex: 0 0 auto;
	background: var(--mv-paper);
}

.site-footer__logo {
	display: block;
	width: 100%;
	color: var(--mv-ink);
	/* Nudged 3px down; the negative bottom margin keeps the dark bar put,
	   so the overlap grows by the same 3px. */
	margin-top: 3px;
	/* Figma overlaps the wordmark 2px into the dark bar at 1440 (= 0.14%). */
	margin-bottom: calc(-0.14% - 3px);
}

/* The exported SVG carries width="1440", which capped it on wider screens.
   Overriding here makes it span the viewport at any width. */
.site-footer__logo svg {
	display: block;
	width: 100%;
	height: auto;
}

.footer-bar {
	background: var(--mv-ink);
	color: var(--mv-paper);
}

.footer-bar__inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
	padding: 40px 8.61% 43px 7.36%; /* 124px / 106px at 1440 */
}

.footer-cols {
	display: flex;
	gap: 50px;
}

.footer-col {
	display: flex;
	flex-direction: column;
}

.footer-col a {
	font-size: 16px;
	font-weight: 400;
	line-height: 21px;
	letter-spacing: 0;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Desktop column order in Figma: main / shop / directors / projects */
.footer-cols > :nth-child(1) { order: 1; }
.footer-cols > :nth-child(2) { order: 3; }
.footer-cols > :nth-child(3) { order: 4; }
.footer-cols > :nth-child(4) { order: 2; }

.footer-meta {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 0 0 auto;
}

.footer-meta__copy {
	margin: 0;
	font-size: 12px;
	line-height: 14px;
	text-transform: uppercase;
}

.footer-social {
	display: flex;
	line-height: 0;
	color: var(--mv-paper);
}

.footer-social svg {
	width: 142.264px;
	height: 11.922px;
}

@media (max-width: 1199px) {

	.footer-bar__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding: 23px 12.94% 24px 13.18%; /* 52px / 53px at 402 */
	}

	.footer-cols {
		width: 100%;
		justify-content: space-between;
		/* At 402px, space-between resolves to exactly the 43px of the frame. */
		gap: calc(12px * var(--mv-k));
	}

	/* Mobile order in Figma: main / directors / projects / shop */
	.footer-cols > :nth-child(1),
	.footer-cols > :nth-child(2),
	.footer-cols > :nth-child(3),
	.footer-cols > :nth-child(4) { order: 0; }

	.footer-col { gap: calc(4px * var(--mv-k)); }

	.footer-col a {
		font-size: calc(8px * var(--mv-k));
		line-height: 1; /* 8px box + 4px gap = the 12px rhythm in Figma */
	}

	.footer-meta { gap: calc(4px * var(--mv-k)); }

	.footer-meta__copy {
		font-size: calc(8px * var(--mv-k));
		line-height: 1.15;
	}

	.footer-social svg {
		width: calc(102.857px * var(--mv-k));
		height: calc(8px * var(--mv-k));
	}
}

/* --------------------------------------------------------------------------
   7. Minimal fallback page (index.php)
   -------------------------------------------------------------------------- */
.page-basic {
	width: min(1132px, 86%);
	margin: 0 auto;
	text-align: left;
}

.page-basic h1,
.page-basic h2 {
	font-weight: 100;
	letter-spacing: var(--mv-track);
	text-transform: uppercase;
}

.page-basic p { line-height: 1.6; }

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

/* --------------------------------------------------------------------------
   9. Shared building blocks for the news / search templates
   -------------------------------------------------------------------------- */

/* Two readability floors. Both are deliberate departures from the Figma
   values — see README. Raise or lower them here in one place. */
:root {
	--mv-body-min: 14px;   /* Figma sets mobile body copy at 9px */
	--mv-search-min: 16px; /* Figma sets the mobile search input at 6.72px */
}

/* 122px margins at 1440, 33px at 402 — the same 8.5% on both frames. */
.mv-shell {
	width: min(1196px, 83%);
	margin-inline: auto;
}

.site-main--plain {
	align-items: stretch;
	text-align: left;
	padding: 0 0 clamp(60px, 26.6px + 2.32vw, 94px);
}

.section-heading {
	margin: 0;
	font-size: clamp(12px, 8.51px + 0.8671vw, 21px); /* 12 -> 21 */
	font-weight: 500;
	line-height: var(--mv-leading);
	letter-spacing: var(--mv-track);
	text-transform: uppercase;
}

.section-rule {
	margin: 8px 0 0;
	border: 0;
	border-top: 1px solid var(--mv-ink);
}

/* Body copy — Figma: 16px at 1440, 9px at 402 (floored, see above). */
.mv-prose {
	font-size: clamp(var(--mv-body-min), 13.225px + 0.1927vw, 16px);
	font-weight: 300;
	line-height: var(--mv-leading);
	text-align: justify;
	text-wrap: pretty;
	hyphens: auto;
}

.mv-prose p { margin: 0 0 1.2em; }
.mv-prose p:last-child { margin-bottom: 0; }

.mv-prose a { text-decoration: underline; text-underline-offset: 3px; }

.mv-prose h2,
.mv-prose h3 {
	margin: 1.6em 0 0.6em;
	font-weight: 500;
	letter-spacing: var(--mv-track);
	text-transform: uppercase;
}

.mv-prose h2 { font-size: 1.3em; }
.mv-prose h3 { font-size: 1.1em; }

.mv-prose img { height: auto; }

/* --------------------------------------------------------------------------
   10. Post card (news grid, search results, related posts)
   The three Figma variants are one component at 100% / 64% / 68%.
   -------------------------------------------------------------------------- */
.post-card {
	--cs: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.post-card__media {
	display: block;
	aspect-ratio: 538 / 225;
	overflow: hidden;
	background: rgba(18, 18, 20, 0.06);
}

.post-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.post-card:hover .post-card__media img { transform: scale(1.03); }

.post-card__media:hover { opacity: 1; }

.post-card__title {
	margin: calc(8px * var(--cs)) 0 0;
	font-size: calc(16px * var(--cs));
	font-weight: 500;
	line-height: var(--mv-leading);
	letter-spacing: var(--mv-track);
	text-transform: uppercase;
}

.post-card__title a:hover { opacity: 0.6; }

.post-card__foot {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: calc(27px * var(--cs));
	margin-top: calc(8px * var(--cs));
}

.post-card__excerpt {
	margin: 0;
	min-width: 0;
	font-size: calc(16px * var(--cs));
	font-weight: 300;
	line-height: var(--mv-leading);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.post-card__more {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(100px * var(--cs));
	height: calc(37px * var(--cs));
	font-size: calc(16px * var(--cs));
	font-weight: 300;
	line-height: 1;
	color: var(--mv-ink);
	background: transparent;
	border: max(1px, calc(1px * var(--cs))) solid var(--mv-ink);
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.post-card__more:hover,
.post-card__more:focus-visible {
	opacity: 1;
	color: var(--mv-paper);
	background: #9a9ab5;
	border-color: #9a9ab5;
}

/* --------------------------------------------------------------------------
   11. News index (Figma node 305:1068)
   -------------------------------------------------------------------------- */
.news-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 10.01%; /* 119.75px of 1196 */
	row-gap: 30px;
	padding-top: 18px;
}

.news-empty {
	padding-top: 60px;
	font-weight: 300;
}

.mv-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 56px;
	font-size: 16px;
	font-weight: 300;
	letter-spacing: var(--mv-track);
	text-transform: uppercase;
}

.mv-pagination .current {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* --------------------------------------------------------------------------
   12. Search (Figma nodes 299:1036, 337:3503, 395:2470)
   -------------------------------------------------------------------------- */
.search-page {
	position: relative;
	overflow: hidden;
}

/* Radial glow rising from the bottom of the screen. */
.search-glow {
	position: absolute;
	left: 50%;
	bottom: 0;
	z-index: 0;
	width: min(1024px, 195vw);
	aspect-ratio: 1;
	transform: translate(-50%, 50%);
	border-radius: 50%;
	background: radial-gradient(circle, #9a9ab5 12%, var(--mv-paper) 100%);
	pointer-events: none;
}

.search-page > *:not(.search-glow) {
	position: relative;
	z-index: 1;
}

.search-page__inner {
	/* 128px below the header at 1440, 31px at 402. */
	padding-top: clamp(31px, 9.345vw - 6.6px, 128px);
}

.search-pill {
	display: flex;
	align-items: center;
	gap: 24px;
	width: min(800px, 83%);
	height: 64px;
	margin-inline: auto;
	padding: 0 32px 0 59px;
	border-radius: 999px;
	background: rgba(154, 154, 181, 0.5);
}

.search-pill__icon {
	flex: 0 0 auto;
	display: flex;
	color: var(--mv-ink);
}

.search-pill__icon svg {
	width: 18px;
	height: 18px;
}

.search-pill__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: none;
	outline: none;
	font-family: var(--mv-font);
	font-size: 16px;
	font-weight: 300;
	letter-spacing: var(--mv-track);
	color: var(--mv-ink);
}

.search-pill__input::placeholder {
	color: var(--mv-ink);
	opacity: 0.5;
}

.search-pill__submit { display: none; }

.search-block {
	/* 113px under the pill at 1440, 24px at 402. */
	margin-top: clamp(24px, 8.574vw - 10.5px, 113px);
}

.search-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	margin-top: 24px;
	font-size: clamp(11px, 8.06px + 0.1927vw, 16px);
	font-weight: 300;
	letter-spacing: var(--mv-track);
}

.search-chips a { opacity: 0.5; }
.search-chips a:hover { opacity: 0.9; }

.search-grid {
	/* NB: do not name this .search-results — WordPress puts that exact class
	   on <body> for a search with hits, so the rule would land on the body
	   and lay the header, main and footer out as three grid columns. */
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6.84%; /* 81.77px of 1196 */
	margin-top: 40px;
}

.search-grid .post-card { --cs: 0.64; }

.search-none {
	margin-top: 32px;
	font-weight: 300;
}

/* Recent searches sits above the suggestions when localStorage has any. */
.search-recent:not([hidden]) + .search-suggested { margin-top: 48px; }

/* --------------------------------------------------------------------------
   13. Single post (Figma nodes 337:1159, 395:2577)
   -------------------------------------------------------------------------- */
.post-hero {
	position: relative;
	aspect-ratio: 12 / 5; /* identical on both frames */
	overflow: hidden;
	background: var(--mv-ink);
}

.post-hero img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.post-hero__title {
	position: absolute;
	left: 8.2%;
	bottom: clamp(10.2px, 1.907vw + 2.5px, 30px);
	margin: 0;
	max-width: 75.3%;
	color: var(--mv-paper);
	font-size: clamp(16px, 4.625vw - 2.6px, 64px);
	font-weight: 400;
	line-height: var(--mv-leading);
	letter-spacing: 0;
	text-transform: uppercase;
	text-shadow: 0 1px 24px rgba(18, 18, 20, 0.45);
}

/* No hero image: keep the title in flow instead of over nothing. */
.post-title--plain {
	margin: 48px 0 0;
	font-size: clamp(22px, 4.625vw - 2.6px, 64px);
	font-weight: 400;
	line-height: var(--mv-leading);
	text-transform: uppercase;
}

.post-lead {
	margin-top: clamp(24px, 1.93vw + 16.2px, 44px);
}

.post-body { margin-top: clamp(24px, 24px + 0vw, 24px); }

.post-aside {
	float: right;
	width: 28.7%;   /* 343 of 1196 */
	margin: 0 0 24px 5.94%; /* 71px gutter */
}

.post-aside img {
	display: block;
	width: 100%;
	height: auto;
}

.post-aside figcaption {
	margin-top: 8px;
	font-size: 12px;
	font-weight: 300;
	font-style: italic;
	line-height: var(--mv-leading);
}

.post-related {
	clear: both;
	margin-top: clamp(42px, 5.2vw - 18.9px, 96px);
}

.post-related__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 3.68%; /* 44px of 1196 */
	margin-top: 50px;
}

.post-related .post-card { --cs: 0.68; }

/* --------------------------------------------------------------------------
   14. Compact layout for sections 9-13
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {

	.news-grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 36px;
		padding-top: 24px;
	}

	.search-pill {
		height: 44px;
		gap: 12px;
		padding: 0 20px;
	}

	.search-pill__icon svg {
		width: 14px;
		height: 14px;
	}

	.search-pill__input { font-size: var(--mv-search-min); }

	.search-chips { gap: 20px; }

	/* The 402px frame lays results out as image-left rows. */
	.search-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.search-grid .post-card {
		--cs: 0.8;
		display: grid;
		grid-template-columns: 125fr 203fr;
		column-gap: 8px;
		align-items: center;
	}

	.search-grid .post-card__media {
		aspect-ratio: 125 / 52;
		grid-row: span 2;
	}

	.search-grid .post-card__title { margin-top: 0; }

	.post-aside {
		float: none;
		width: 100%;
		margin: 24px 0;
	}

	.post-related__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
		margin-top: 28px;
	}

	.post-related .post-card { --cs: 0.8; }
}

/* --------------------------------------------------------------------------
   15. Mobile menu panel — Figma 337:4098 (collapsed) and 353:6070 (submenu)
   -------------------------------------------------------------------------- */

/* Base rule, deliberately OUTSIDE any media query: without it the panel has
   no display value on desktop and renders as a bare list under the header. */
.nav-mobile { display: none; }

.site-top {
	position: relative;
	z-index: 40;
}

@media (max-width: 1199px) {

	.nav-mobile {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		padding: 21px 0;
		/* Figma fill: #989E68 at 50% over whatever is behind it. */
		background: rgba(152, 158, 104, 0.5);
		color: var(--mv-paper);
		backdrop-filter: blur(2px);
	}

	.nav-mobile.is-open { display: block; }

	.nav-mobile .menu > li {
		position: relative;
		border-bottom: max(0.5px, 0.5px) solid var(--mv-paper);
	}

	.nav-mobile .menu > li:last-child { border-bottom: 0; }

	.nav-mobile .menu > li > a {
		display: block;
		padding: 12px 62px 12px 31px;
		font-size: 16px;
		font-weight: 300;
		line-height: var(--mv-leading);
		letter-spacing: 0;
		text-transform: uppercase;
	}

	.nav-mobile__toggle {
		position: absolute;
		top: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 62px;
		height: 43px;
		color: var(--mv-paper);
		font-size: 16px;
		font-weight: 300;
		line-height: 1;
	}

	.nav-mobile__toggle::before {
		content: "›";
		display: block;
		transition: transform 0.2s ease;
	}

	.nav-mobile .menu > li.is-open > .nav-mobile__toggle::before {
		transform: rotate(90deg);
	}

	.nav-mobile .sub-menu {
		display: none;
		padding: 8px 31px 3px;
	}

	.nav-mobile .menu > li.is-open > .sub-menu { display: block; }

	.nav-mobile .sub-menu li + li { margin-top: 4px; }

	.nav-mobile .sub-menu a {
		display: block;
		font-size: 12px;
		font-weight: 300;
		line-height: var(--mv-leading);
		text-transform: lowercase;
	}
}

/* --------------------------------------------------------------------------
   16. Directors — Figma 247:2464 / 395:2199 (index) and
       247:2553 / 376:3198 (single)
   -------------------------------------------------------------------------- */
.directors-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 6.6%;  /* 79px of 1196 */
	row-gap: 78px;
	padding-top: 39px;
}

.director-card {
	--dcs: 1;
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--mv-paper);
	border: max(1px, calc(1px * var(--dcs))) solid var(--mv-ink);
}

.director-card__face {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* One link covering the whole card, so the hover panel never blocks a click. */
.director-card__name a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}

.director-card__hover {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	padding: calc(28px * var(--dcs)) calc(22px * var(--dcs));
	background: #9a9ab5;
	color: var(--mv-paper);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s;
	pointer-events: none;
}

.director-card:focus-within .director-card__hover {
	opacity: 1;
	visibility: visible;
}

/* Hover-only content is useless on touch, where the card simply opens. */
@media (hover: hover) {
	.director-card:hover .director-card__hover {
		opacity: 1;
		visibility: visible;
	}
}

.director-card__hover-name {
	margin: 0;
	font-size: calc(16px * var(--dcs));
	font-weight: 400;
	line-height: var(--mv-leading);
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

.director-card__hover-rule {
	flex: 0 0 auto;
	margin: calc(22px * var(--dcs)) 0;
	border: 0;
	border-top: 1px solid rgba(251, 245, 243, 0.55);
}

.director-card__hover-bio {
	margin: 0;
	font-size: clamp(11px, 10.2px + 0.06vw, 12px);
	font-weight: 300;
	line-height: var(--mv-leading);
	text-align: justify;
	display: -webkit-box;
	-webkit-line-clamp: 14;
	line-clamp: 14;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.director-card__hover-projects {
	margin: 0;
	font-size: clamp(11px, 10.2px + 0.06vw, 12px);
	font-weight: 300;
	line-height: var(--mv-leading);
	text-transform: uppercase;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.director-card__media {
	position: relative;
	margin-top: calc(16px * var(--dcs));
	aspect-ratio: 346 / 200;
	overflow: hidden;
	background: rgba(18, 18, 20, 0.06);
}

.director-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.director-card__badge {
	position: absolute;
	left: 0;
	top: calc(24px * var(--dcs));
	display: flex;
	align-items: center;
	height: calc(24px * var(--dcs));
	padding: 0 calc(14px * var(--dcs));
	background: #9a9ab5;
	color: var(--mv-paper);
	font-size: clamp(10px, 9.2px + 0.06vw, 12px);
	font-weight: 300;
	line-height: 1;
}

.director-card__body {
	padding: calc(8px * var(--dcs)) calc(14px * var(--dcs)) calc(18px * var(--dcs));
}

.director-card__name {
	margin: 0;
	/* Two lines are reserved so the rule below lines up across the grid. */
	min-height: calc(2em * var(--mv-leading));
	font-size: calc(24px * var(--dcs));
	font-weight: 400;
	line-height: var(--mv-leading);
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

.director-card__rule {
	margin: calc(16px * var(--dcs)) 0 0;
	border: 0;
	border-top: max(1px, calc(1px * var(--dcs))) solid var(--mv-ink);
}

.director-card__bio {
	margin: calc(16px * var(--dcs)) 0 0;
	font-size: clamp(11px, 10.2px + 0.06vw, 12px); /* Figma: 12 / 9.16 */
	font-weight: 300;
	line-height: var(--mv-leading);
	text-align: justify;
	display: -webkit-box;
	-webkit-line-clamp: 7;
	line-clamp: 7;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* --- single director --------------------------------------------------- */
.director-hero {
	position: relative;
	overflow: hidden;
	padding: 119px 0 190px;
	/* Shows through wherever the contained backdrop does not reach. */
	background: var(--mv-ink);
}

.director-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	/* `cover` on a portrait source stretched it into a smear: the hero is
	   ~3:1 on a wide monitor while the photo is ~4:5, so cover kept only a
	   thin horizontal band and scaled it enormously. `contain` keeps the
	   whole frame; the 80px blur hides the edges against the dark base. */
	object-fit: contain;
	object-position: center;
	filter: blur(80px);
}

.director-hero__bg-fallback {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--mv-ink);
	opacity: 0.12;
}

.director-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 400fr 465fr;
	column-gap: 7.5%;
	width: min(935px, 78%);
	margin-inline: auto;
}

.director-hero__text { min-width: 0; }

.director-portrait {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--mv-paper);
}

.director-portrait img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Foreground portrait is monochrome; the blurred backdrop keeps its
	   colour, which is why they can share one source image. */
	filter: grayscale(1);
}

.director-name {
	margin: 0;
	padding: 4px 7px;
	background: var(--mv-paper);
	color: var(--mv-ink);
	font-size: clamp(22px, 1.66px + 3.11vw, 48px);
	font-weight: 400;
	line-height: var(--mv-leading);
	letter-spacing: var(--mv-track);
	text-transform: uppercase;
}

.director-bio {
	margin-top: 29px;
	padding: 12px 11px;
	background: var(--mv-paper);
	color: var(--mv-ink);
}

.director-badge {
	display: inline-flex;
	align-items: center;
	height: 23px;
	margin-top: 30px;
	padding: 0 10px;
	background: #9a9ab5;
	color: var(--mv-paper);
	font-size: clamp(11px, 9.06px + 0.19vw, 16px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: var(--mv-track);
	text-transform: uppercase;
}

.director-projects {
	margin: 8px 0 0;
	color: var(--mv-paper);
	font-size: clamp(10px, 7.68px + 0.42vw, 16px);
	font-weight: 300;
	line-height: var(--mv-leading);
}

.director-credit {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 20px;
	color: var(--mv-paper);
}

.director-credit img {
	display: block;
	width: 50px;
	height: 28px;
	object-fit: contain;
}

.director-credit span {
	font-size: clamp(12px, 9.06px + 0.83vw, 21px);
	font-weight: 500;
	letter-spacing: var(--mv-track);
	text-transform: uppercase;
}

/* Film list — the "картка фільму" component is the post card without media. */
.director-films {
	margin-top: 64px;
}

.film-list {
	display: flex;
	flex-direction: column;
	gap: 36px;
	width: min(538px, 100%);
}

.film-row .post-card__title { margin-top: 0; }

@media (max-width: 1199px) {

	.directors-grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 14px;
		padding-top: 24px;
		width: min(264px, 100%);
		margin-inline: auto;
	}

	.director-card { --dcs: 0.763; }

	.director-hero {
		padding: 28px 0 40px;
	}

	.director-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0;
		width: min(336px, 84%);
	}

	.director-portrait { aspect-ratio: 336 / 195; }

	.director-name {
		order: -1;
		margin-bottom: 8px;
	}

	.director-bio {
		margin-top: 0;
		border: 1px solid var(--mv-ink);
		padding: 21px 21px 24px;
	}

	.director-badge { margin-top: 12px; }

	.director-films { margin-top: 36px; }

	.film-list { gap: 24px; }
}

/* Editor-only hint shown where a menu has not been assigned yet. */
.mv-menu-hint {
	margin: 0;
	font-size: 12px;
	font-weight: 300;
	letter-spacing: var(--mv-track);
	text-transform: uppercase;
	opacity: 0.6;
}

.mv-menu-hint a { text-decoration: underline; }

.film-row { --cs: 1; }

@media (max-width: 1199px) {
	.film-row { --cs: 0.7; }
}

.directors-intro {
	padding-top: 39px;
}

.directors-intro + .directors-grid {
	padding-top: 30px;
}

/* Language switch that lands on the home page because the current view has
   no translation yet. Present, but visibly weaker. */
.site-header__lang.is-untranslated { opacity: 0.45; }