/* Maxim — the CSS theme.json cannot express: the masonry columns, the sticky
   header, the eight tile shapes, the reveal, and the form. Every number here is
   the number in Maxim.dc.html; colour, type and spacing still come from
   theme.json presets. */

:root {
	--mx-cols: 4;
	--mx-cols-tablet: 2;
	--mx-cols-mobile: 1;
	--mx-colwidth: 270px;
	--mx-gutter: 32px;
	--mx-gutter-y: 38px;
	--mx-rule: 2px;
	--mx-reveal-ms: 550ms;
	--mx-logo-h: 28px;
	--mx-tile-ratio: auto;
	--mx-variance: 40;
	--mx-header-h: 70px;
	--mx-wide: 1320px;
	--mx-text: 820px;
	--mx-fs: 1;
	--mx-hs: 1;
	--mx-hw: 800;
	--mx-gutterpage: clamp(16px, 4vw, 32px);
	--mx-wide-box: calc(var(--mx-wide) + 2 * var(--mx-gutterpage));
	--mx-text-box: calc(var(--mx-text) + 2 * var(--mx-gutterpage));

	--mx-ink: var(--wp--preset--color--contrast);
	--mx-ground: var(--wp--preset--color--base);
	--mx-surface: var(--wp--preset--color--surface);
	--mx-accent: var(--wp--preset--color--accent);
	--mx-accent-deep: var(--wp--preset--color--accent-deep);
	--mx-divider: var(--wp--preset--color--divider);

	--mx-muted-40: color-mix(in srgb, var(--mx-ink) 40%, transparent);
	--mx-muted-50: color-mix(in srgb, var(--mx-ink) 50%, transparent);
	--mx-muted-55: color-mix(in srgb, var(--mx-ink) 55%, transparent);
	--mx-muted-62: color-mix(in srgb, var(--mx-ink) 62%, transparent);
	--mx-muted-70: color-mix(in srgb, var(--mx-ink) 70%, transparent);
	--mx-muted-72: color-mix(in srgb, var(--mx-ink) 72%, transparent);
}

/* Dark mode is a visitor preference, stored locally. It never changes the
   palette a client picked — it inverts the ground and the ink around it. */
.mx-dark {
	--wp--preset--color--base: #1b1a19;
	--wp--preset--color--contrast: #f4f2f1;
	--wp--preset--color--surface: #2d2b2b;
	--wp--preset--color--divider: color-mix(in srgb, #f4f2f1 32%, transparent);
	--wp--preset--color--accent-deep: #ff8b78;
	color-scheme: dark;
}

.mx-dark .grayscale,
.mx-dark .grayscale img { filter: grayscale(1) contrast(1.02) brightness(0.92); }

/* Accent as text or as a rule on the dark ground: the lifted tint, never the
   raw accent. The filter bar's items carry the mockup's inline colour, hence
   the !important. */
.mx-dark .mx-filter__item.is-active {
	color: var(--color-accent-700) !important;
	border-bottom-color: var(--color-accent-700) !important;
}
.mx-dark .mx-nav .current-menu-item > .wp-block-navigation-item__content,
.mx-dark .mx-nav .current_page_item > .wp-block-navigation-item__content,
.mx-dark .mx-nav__mega.is-open > .wp-block-navigation-item__content,
.mx-dark .mx-jump__item.is-active {
	color: var(--color-accent-700);
	border-bottom-color: var(--color-accent-700);
}
.mx-dark .mx-header__cta .wp-block-button__link,
.mx-dark .mx-header__cta .wp-element-button { border-color: var(--color-accent-600); }

/* Whatever stands on the accent — the hero poster, quote tiles, the video
   badge, primary buttons — writes its text as var(--color-bg), the paper.
   In dark mode the paper is near-black, and near-black on navy is nothing.
   Inside those grounds the paper stays paper. */
.mx-dark [style*="background:var(--color-accent)"],
.mx-dark .btn-primary,
.mx-dark .mx-top,
.mx-dark .mx-btn--primary,
.mx-dark .mx-searchform .wp-block-search__button {
	--color-bg: #f4f2f1;
	--mx-ground: #f4f2f1;
}
.mx-dark .wp-element-button:not(.is-style-outline) { --wp--preset--color--base: #f4f2f1; }

/* The design system's own base. Without the border-box reset every padded
   box in the theme measures differently from the mockup. */
*,
*::before,
*::after { box-sizing: border-box; }

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

body { line-height: 1.55; }
p { margin: 0 0 12px; }
figure { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { text-underline-offset: 3px; }
.grayscale img, img.grayscale { filter: grayscale(1) contrast(1.08); }

:focus { outline: none; }
::selection { background: color-mix(in srgb, var(--mx-accent) 30%, transparent); }

figcaption {
	font-size: 11px;
	margin-top: 4px;
	color: var(--mx-muted-55);
}

.mx-muted { color: var(--mx-muted-70); }

/* The constrained <main> is a layout container only — it adds no space of its
   own, so a full-bleed hero sits flush under the header. */
.mx-main { margin-block-start: 0; }
.mx-main > :first-child { margin-block-start: 0; }

/* ── Buttons: the design system's .btn, to the pixel ─────────────────── */

.mx-btn,
.wp-element-button,
.wp-block-button__link,
.mx-pagination a,
.mx-searchform .wp-block-search__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 14px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 14px;
	line-height: 1.2;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	border: 1px solid transparent;
	border-radius: 0;
	cursor: pointer;
	transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.mx-btn--primary,
.mx-searchform .wp-block-search__button {
	background: var(--mx-accent);
	color: var(--mx-ground);
}
.mx-btn--primary:hover,
.mx-searchform .wp-block-search__button:hover { background: var(--mx-accent-deep); color: var(--mx-ground); }
.mx-btn--secondary,
.mx-pagination a {
	border-color: var(--mx-divider);
	color: var(--mx-ink);
	background: transparent;
}
.mx-btn--secondary:hover,
.mx-pagination a:hover { background: color-mix(in srgb, var(--mx-ink) 7%, transparent); color: var(--mx-ink); }
.mx-btn--ghost { color: var(--mx-accent); padding-inline: 4px; border-color: transparent; background: transparent; }
.mx-btn--ghost:hover { background: color-mix(in srgb, var(--mx-accent) 10%, transparent); color: var(--mx-accent); }
.mx-btn--block { width: 100%; justify-content: flex-start; text-align: left; margin-top: 8px; }
.mx-btn.is-disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Skip link, progress rule, back to top ───────────────────────────── */

.skip-link.screen-reader-text:focus {
	left: 8px;
	top: 8px;
	z-index: 99;
	background: var(--mx-accent);
	color: var(--mx-ground);
	padding: 10px 16px;
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: 0;
	box-shadow: none;
}

/* The reading-progress line rides the sticky bar's bottom edge, over its
   2px rule, and follows it when the bar condenses. */
.mx-progress {
	position: fixed;
	left: 0;
	top: calc(var(--mx-header-h, 70px) - 4px);
	z-index: 61;
	height: 4px;
	width: 0;
	background: var(--mx-progress, #ec3013);
	transition: width 0.1s linear, top 0.18s ease;
	pointer-events: none;
}
/* Red beside the navy — the pairing the original design ran on. On the dark
   bar the coral tint, which reads there. */
.mx-dark .mx-progress { background: var(--mx-progress-dark, #f48b7b); }

.mx-top {
	position: fixed;
	right: clamp(14px, 3vw, 28px);
	bottom: clamp(14px, 3vw, 28px);
	z-index: 70;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	cursor: pointer;
	background: var(--mx-accent);
	color: var(--mx-ground);
	box-shadow: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
	animation: mx-up 0.3s ease both;
	transition: background 0.18s ease, transform 0.18s ease;
}
.mx-top:hover { background: var(--mx-accent-deep); }
.mx-top:active { transform: translateY(1px); }

/* ── Header — bar edge to edge, content on the 1320px box ───────────── */

/* Core wraps the part in <header class="wp-block-template-part">, exactly as
   tall as the bar — a sticky element inside it has nowhere to stick. The
   wrapper dissolves; the bar sticks against the whole page. */
.wp-block-template-part:has(> .mx-header) { display: contents; }

/* Logged in: the admin bar is fixed at the top, so the sticky bar (and the
   progress line it makes room for) start under it. */
body.admin-bar .mx-header { top: 35px; }
@media (max-width: 782px) {
	body.admin-bar .mx-header { top: 49px; }
}

.mx-header {
	position: sticky;
	top: 3px;
	z-index: 60;
	gap: 20px;
	align-items: center;
	transition: padding 0.18s ease, box-shadow 0.18s ease;
}
.mx-header.is-condensed {
	padding-top: 7px !important;
	padding-bottom: 7px !important;
	box-shadow: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
}

.mx-header__brand { gap: 10px; align-items: center; flex: 0 0 auto; }
.mx-header__brand .wp-block-site-title,
.mx-header__wordmark { margin: 0; }
.mx-header__wordmark a {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(20px, 3vw, 26px);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--mx-ink);
	text-decoration: none;
	transition: font-size 0.18s ease;
}
.mx-header.is-condensed .mx-header__wordmark a { font-size: 19px; }
.mx-header__logo img { height: var(--mx-logo-h); width: auto; }
.mx-header.is-condensed .mx-header__logo img { height: calc(var(--mx-logo-h) * 0.66); }

.mx-header__actions {
	gap: clamp(14px, 2.2vw, 26px);
	align-items: center;
	flex: 0 1 auto;
	min-width: 0;
}

.mx-nav { gap: clamp(14px, 2.2vw, 26px); }
.mx-nav .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--heading);
	color: var(--mx-ink);
	text-decoration: none;
	padding: 6px 0;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}
.mx-nav .wp-block-navigation-item__content:hover { border-bottom-color: var(--mx-divider); }
.mx-nav .current-menu-item > .wp-block-navigation-item__content,
.mx-nav .current_page_item > .wp-block-navigation-item__content {
	color: var(--mx-accent);
	border-bottom-color: var(--mx-accent);
}

/* Square icon buttons: search, the theme switch, the menu toggle. */
.mx-iconbtn,
.mx-search .wp-block-search__button,
.mx-nav .wp-block-navigation__responsive-container-open {
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: transparent;
	border: var(--mx-rule) solid var(--mx-divider);
	color: var(--mx-ink);
	cursor: pointer;
	transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}
.mx-iconbtn,
.mx-search .wp-block-search__button { display: inline-flex; }
.mx-iconbtn:hover,
.mx-search .wp-block-search__button:hover,
.mx-nav .wp-block-navigation__responsive-container-open:hover {
	border-color: var(--mx-accent);
	color: var(--mx-accent);
	background: transparent;
}
.mx-search .wp-block-search__button svg { fill: currentColor; }
.mx-search .wp-block-search__inside-wrapper { border: 0; }
.mx-search .wp-block-search__input {
	border: var(--mx-rule) solid var(--mx-divider);
	background: var(--mx-surface);
	color: var(--mx-ink);
	min-height: 40px;
	padding: 6px 10px;
}

.mx-themetoggle__sun { display: none; }
.mx-dark .mx-themetoggle__moon { display: none; }
.mx-dark .mx-themetoggle__sun { display: block; }

.mx-header__cta { margin: 0; }
/* Traženo: dugme u headeru iste visine kao ikone pretrage i tamnog režima. */
.mx-header .mx-header__cta .wp-block-button__link,
.mx-header .mx-header__cta .wp-element-button {
	min-height: 40px;
	height: 40px;
	padding-top: 0;
	padding-bottom: 0;
	align-items: center;
	white-space: nowrap;
}

/* The Babolat logo is three times as wide as the mockup's wordmark, so the
   full bar needs ~1000px. Just above that it tightens; below it folds into
   the drawer (the mockup folds at 860). */
@media (max-width: 1100px) {
	.mx-header__logo img { height: calc(var(--mx-logo-h) * 0.8); }
	.mx-header__actions, .mx-nav { gap: 14px; }
}
.mx-header__cta .wp-block-button__link { transition: transform 0.18s ease, background 0.18s ease; }
.mx-header__cta .wp-block-button__link:active { transform: translateY(1px); }

/* The drawer breakpoint is 1000px, not core's 600px. */
@media (min-width: 600px) and (max-width: 1000px) {
	.mx-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
	.mx-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: inline-flex; }
}
/* Under the drawer breakpoint the design folds everything into the menu:
   brand and burger, nothing else.
   Core prints its block-layout CSS inline after this file, so these need one
   class more than .wp-container-core-buttons-is-layout-* to win. */
@media (max-width: 1000px) {
	.mx-header .mx-header__cta,
	.mx-header .mx-search,
	.mx-header .mx-themetoggle { display: none; }
	/* The mockup hides .mx-nav here and shows its own .mx-burger. In the theme
	   the burger lives inside the navigation block, so the block stays and only
	   its links fold away until the drawer opens. */
	.mx-header .mx-nav { display: flex !important; }
	.mx-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
	.mx-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: inline-flex; }
}

/* The CTA that lives inside the menu shows only when the drawer is open. */
.mx-nav .mx-nav__cta { display: none; }
.mx-nav .is-menu-open .mx-nav__cta { display: block; width: 100%; margin-top: 16px; }
.mx-nav .is-menu-open .mx-nav__cta .wp-block-button,
.mx-nav .is-menu-open .mx-nav__cta .wp-block-button__link { width: 100%; justify-content: flex-start; }

/* The drawer, as the mockup draws it: paper ground, the links stacked full
   width on 2px rules, the button under them. Core would inherit the desktop
   "right" justification into the overlay; here everything stretches. */
.mx-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--mx-ground);
	color: var(--mx-ink);
	padding: 16px var(--mx-gutterpage) 32px;
}
.mx-nav .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 52px; }
.mx-nav .is-menu-open .wp-block-navigation__responsive-container-content,
.mx-nav .is-menu-open .wp-block-navigation__container {
	align-items: stretch !important;
	justify-content: flex-start !important;
	width: 100%;
}
.mx-nav .is-menu-open .wp-block-navigation-item { width: 100%; }
.mx-nav .is-menu-open .wp-block-navigation-item__content { justify-content: space-between; }
.mx-nav .wp-block-navigation__responsive-container-close {
	width: 40px;
	height: 40px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: var(--mx-rule) solid var(--mx-divider);
	color: var(--mx-ink);
	background: transparent;
}
.mx-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 15px;
	letter-spacing: 0.06em;
	padding: 14px 0;
	min-height: 44px;
	display: flex;
	align-items: center;
	border-bottom: var(--mx-rule) solid var(--mx-divider);
	width: 100%;
}

/* ── Hero ────────────────────────────────────────────────────────────── */

.mx-hero__title { max-width: 15ch; text-wrap: balance; }
.mx-hero__kicker { opacity: 0.9; }
.mx-hero__lede { max-width: 46ch; }

.mx-hero__foot {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(20px, 3vw, 40px);
	align-items: start;
	border-top-color: color-mix(in srgb, var(--mx-ground) 45%, transparent);
}
.mx-hero__stats { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 56px); align-items: flex-start; }
.mx-hero .mx-stat__label { opacity: 0.85; color: inherit; }

/* ── Category filter bar ─────────────────────────────────────────────── */

/* The pattern's bar wrapper, as the mockup's (03): sticky under the header,
   gutter, 2px rule. The block version carries the same inline. */
.mx-filterwrap {
	position: relative;
	padding: 0 var(--mx-gutterpage);
	border-bottom: var(--mx-rule) solid var(--mx-divider);
	background: var(--mx-ground);
	transition: top 0.18s ease;
}

.mx-filter {
	position: sticky;
	top: var(--mx-header-h);
	z-index: 55;
	background: var(--mx-ground);
	border-bottom: var(--mx-rule) solid var(--mx-divider);
	padding-inline: var(--mx-gutterpage);
	transition: top 0.18s ease;
}
.mx-filter__inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
}
.mx-filter__item {
	padding: 14px 18px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--mx-ink);
	white-space: nowrap;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}
.mx-filter__item:first-child { padding-left: 0; }
.mx-filter__item:hover { color: var(--mx-accent-deep); }
.mx-filter__item.is-active {
	color: var(--mx-accent);
	border-bottom: 2px solid currentColor;
	margin-bottom: calc(var(--mx-rule) * -1);
}

/* ── Masonry ─────────────────────────────────────────────────────────── */

.mx-feed { padding-top: 36px; }

.mx-masonry {
	columns: var(--mx-colwidth) var(--mx-grid-cols, var(--mx-cols));
	column-gap: var(--mx-gutter);
	list-style: none;
	padding: 0;
	margin: 0 auto 20px;
	max-width: var(--mx-wide);
	display: block;
}
.mx-masonry > li,
.mx-masonry > .mx-masonry__item {
	break-inside: avoid;
	margin: 0 0 var(--mx-gutter-y);
	display: block;
}
/* Height variance, Mixed ratio only: 0 flattens every photograph to one height. */
.mx-ratio-mixed .mx-tile__image img { max-height: calc(160px + var(--mx-variance) * 7px); object-fit: cover; }
h1, h2, h3 { font-weight: var(--mx-hw); }

.mx-tile { display: block; }
.mx-tile__media { position: relative; margin-bottom: 12px; }
.mx-tile__media:empty { display: none; }
.mx-tile__image { margin: 0; overflow: hidden; }
.mx-tile__image img { display: block; width: 100%; }
.mx-ratio-3-2 .mx-tile__image img { aspect-ratio: 3 / 2; object-fit: cover; }
.mx-ratio-4-5 .mx-tile__image img { aspect-ratio: 4 / 5; object-fit: cover; }
.mx-ratio-1-1 .mx-tile__image img { aspect-ratio: 1 / 1; object-fit: cover; }

.mx-edge-inset .mx-tile__image { padding: 12px; background: var(--mx-surface); }

.mx-hover-zoom .mx-tile__image img { transition: transform 0.5s cubic-bezier(0.2, 0.75, 0.25, 1); }
.mx-hover-zoom .mx-tile:hover .mx-tile__image img { transform: scale(1.045); }

.mx-tile__title {
	margin: 0 0 9px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 22px;
	line-height: 1.15;
	letter-spacing: -0.015em;
	text-wrap: pretty;
}
.mx-tile__title a { text-decoration: none; color: inherit; transition: color 0.2s ease; }
.mx-tile:hover .mx-tile__title a { color: var(--mx-accent-deep); }

.mx-tile__excerpt {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--mx-muted-70);
}
.mx-tile__excerpt p { margin: 0; }

.mx-tile__foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	border-top: var(--mx-rule) solid var(--mx-divider);
	padding-top: 11px;
}
.mx-tile__more,
.mx-tile__foot .wp-block-read-more {
	position: relative;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--mx-ink);
}
.mx-hover-underline .mx-tile__foot .wp-block-read-more::after,
.mx-hover-underline .mx-tile__more::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -4px;
	height: 2px;
	background: var(--mx-accent);
	transition: right 0.28s cubic-bezier(0.2, 0.75, 0.25, 1);
}
.mx-hover-underline .mx-tile:hover .mx-tile__foot .wp-block-read-more::after,
.mx-hover-underline .mx-tile:hover .mx-tile__more::after { right: 0; }

.mx-postmeta {
	gap: 7px;
	align-items: center;
	margin-bottom: 8px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 11px;
}
.mx-postmeta > * { margin: 0; }
.mx-postmeta a { text-decoration: none; }
.mx-postmeta .wp-block-post-date,
.mx-postmeta .mx-readtime { color: var(--mx-muted-55); }
.mx-postmeta .wp-block-post-terms a { color: var(--mx-accent-deep); }
.mx-postmeta > * + *::before {
	content: "/";
	margin-right: 7px;
	color: var(--mx-muted-40);
}
/* Date and reading time belong together: "14 March 2026 · 6 min". */
.mx-postmeta > .mx-readtime::before { content: "·"; }

.mx-kicker {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--mx-accent-deep);
	margin: 0 0 14px;
}
body:not(.mx-accent-kickers) .mx-kicker { color: var(--mx-muted-62); }
.has-accent-background-color .mx-kicker { color: inherit; opacity: 0.9; }

/* ── Share — only on the standard photo-and-text tile ────────────────── */

.mx-share {
	display: flex;
	gap: 9px;
	align-items: center;
	color: var(--mx-muted-50);
}
.mx-tile:not(.mx-tile--post) .mx-share { display: none; }
.mx-share__btn {
	display: flex;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: inherit;
	transition: color 0.16s ease;
}
.mx-share__btn:hover { color: var(--mx-accent); }
.mx-share__done {
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mx-accent-deep);
}

/* ── Tile variants ───────────────────────────────────────────────────── */

.mx-badge {
	position: absolute;
	left: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 13px;
	background: var(--mx-accent);
	color: var(--mx-ground);
	pointer-events: none;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.mx-badge svg { display: block; }

/* Quote — accent */
.mx-tile--quote {
	background: var(--mx-accent);
	color: var(--mx-ground);
	padding: 26px;
}
.mx-tile--quote a { color: inherit; }
.mx-tile--quote .mx-kicker { color: inherit; opacity: 0.9; margin-bottom: 18px; }

/* Quote — surface */
.mx-tile--quote-light { background: var(--mx-surface); padding: 26px; }
.mx-tile--quote-light .mx-kicker { margin-bottom: 18px; }

.mx-tile__quote {
	margin: 0 0 18px;
	padding: 0;
	border: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 25px;
	line-height: 1.12;
	letter-spacing: -0.02em;
}
.mx-tile--quote-light .mx-tile__quote { font-size: 23px; line-height: 1.14; margin-bottom: 16px; }
.mx-tile__cite {
	margin: 0;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.mx-tile--quote-light .mx-tile__cite { color: var(--mx-muted-55); }

.mx-tile--quote .mx-postmeta,
.mx-tile--quote .mx-tile__title,
.mx-tile--quote .mx-tile__excerpt,
.mx-tile--quote .mx-tile__foot,
.mx-tile--quote-light .mx-postmeta,
.mx-tile--quote-light .mx-tile__title,
.mx-tile--quote-light .mx-tile__excerpt,
.mx-tile--quote-light .mx-tile__foot,
.mx-tile--photo .mx-postmeta,
.mx-tile--photo .mx-tile__title,
.mx-tile--photo .mx-tile__excerpt,
.mx-tile--photo .mx-tile__foot,
.mx-tile--result .mx-postmeta,
.mx-tile--result .mx-tile__excerpt,
.mx-tile--result .mx-tile__foot,
.mx-tile--video .mx-tile__excerpt { display: none; }

/* Photo — the picture and its caption, nothing else */
.mx-tile--photo .mx-tile__media { margin-bottom: 0; }
.mx-tile__caption {
	margin: 10px 0 0;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mx-muted-55);
}

/* Match result */
.mx-tile--result { background: var(--mx-surface); padding: 24px; }
.mx-tile--result .mx-kicker { margin-bottom: 14px; }
.mx-tile--result .mx-tile__title { font-size: 20px !important; margin: 0 0 16px; }
.mx-tile--result .mx-result__table { font-size: 14px; }
.mx-tile--result .mx-result__meta { margin-top: 14px; }

/* Interview and support are bordered boxes */
.mx-tile--interview,
.mx-tile--cta { border: var(--mx-rule) solid var(--mx-divider); padding: 24px; }
.mx-tile--interview .mx-tile__media,
.mx-tile--interview .mx-postmeta,
.mx-tile--cta .mx-postmeta { display: none; }
.mx-tile--interview .mx-tile__title { margin: 0 0 12px; }
.mx-tile--cta .mx-kicker { margin-bottom: 14px; }
.mx-tile--cta .mx-tile__title { margin: 0 0 12px; font-size: 21px; line-height: 1.15; }
.mx-tile--cta .mx-tile__excerpt { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--mx-muted-72); }

/* Feature the newest post / Editorial mix: the first tile runs the full width
   of the grid, photograph left and text right, on a rule of its own. */
.mx-grid-editorial-mix .mx-masonry > :first-child,
.mx-feature-first .mx-masonry > :first-child {
	column-span: all;
	border-bottom: var(--mx-rule) solid var(--mx-divider);
	padding-bottom: var(--mx-gutter-y);
}
.mx-grid-editorial-mix .mx-masonry > :first-child .mx-tile:has(> .mx-tile__media),
.mx-feature-first .mx-masonry > :first-child .mx-tile:has(> .mx-tile__media) {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 0 var(--mx-gutter);
	align-items: start;
}
.mx-grid-editorial-mix .mx-masonry > :first-child .mx-tile:has(> .mx-tile__media) > .mx-tile__media,
.mx-feature-first .mx-masonry > :first-child .mx-tile:has(> .mx-tile__media) > .mx-tile__media { grid-row: span 6; margin-bottom: 0 !important; }
.mx-grid-editorial-mix .mx-masonry > :first-child .mx-tile:has(> .mx-tile__media) > .mx-tile__media img,
.mx-feature-first .mx-masonry > :first-child .mx-tile:has(> .mx-tile__media) > .mx-tile__media img { max-height: 480px; object-fit: cover; }
.mx-grid-editorial-mix .mx-masonry > :first-child .mx-tile:has(> .mx-tile__media) h3,
.mx-feature-first .mx-masonry > :first-child .mx-tile:has(> .mx-tile__media) h3 { font-size: calc(30px * var(--mx-fs)) !important; }

/* Even grid: every tile the same box. */
.mx-grid-even-grid .mx-masonry {
	columns: auto;
	display: grid;
	grid-template-columns: repeat(var(--mx-grid-cols, var(--mx-cols)), minmax(0, 1fr));
	gap: var(--mx-gutter-y) var(--mx-gutter);
}
.mx-grid-even-grid .mx-masonry > li,
.mx-grid-even-grid .mx-masonry > .mx-masonry__item { margin: 0; display: flex; }
.mx-grid-even-grid .mx-masonry > .mx-masonry__item > .mx-tile { flex: 1 1 auto; box-sizing: border-box; }
.mx-grid-even-grid .mx-masonry > :first-child { column-span: none; border-bottom: 0; padding-bottom: 0; }
.mx-grid-even-grid.mx-feature-first .mx-masonry > :first-child { grid-column: span 2; }
.mx-grid-even-grid .mx-tile__image img { aspect-ratio: 3 / 2; object-fit: cover; }

@media (max-width: 1024px) {
	.mx-masonry { column-width: auto; column-count: min(var(--mx-grid-cols, var(--mx-cols)), var(--mx-cols-tablet)); }
	.mx-grid-even-grid .mx-masonry { grid-template-columns: repeat(min(var(--mx-grid-cols, var(--mx-cols)), var(--mx-cols-tablet)), minmax(0, 1fr)); }
	.mx-grid-editorial-mix .mx-masonry > :first-child .mx-tile:has(> .mx-tile__media),
	.mx-feature-first .mx-masonry > :first-child .mx-tile:has(> .mx-tile__media) { grid-template-columns: minmax(0, 1fr); }
	.mx-grid-editorial-mix .mx-masonry > :first-child .mx-tile:has(> .mx-tile__media) > .mx-tile__media,
	.mx-feature-first .mx-masonry > :first-child .mx-tile:has(> .mx-tile__media) > .mx-tile__media { grid-row: auto; margin-bottom: 12px !important; }
}
@media (max-width: 640px) {
	.mx-masonry { column-count: min(var(--mx-grid-cols, var(--mx-cols)), var(--mx-cols-mobile)); }
	.mx-grid-even-grid .mx-masonry { grid-template-columns: repeat(min(var(--mx-grid-cols, var(--mx-cols)), var(--mx-cols-mobile)), minmax(0, 1fr)); }
	.mx-grid-even-grid.mx-feature-first .mx-masonry > :first-child { grid-column: auto; }
	/* The category bar becomes one scrolling strip instead of three wrapped rows. */
	.mx-filterbar { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	.mx-filterbar::-webkit-scrollbar { display: none; }
	.mx-filterbar .mx-filter__item { white-space: nowrap; flex: none; }
}

/* ── Feed footer: Older posts + the counter ──────────────────────────── */

.mx-feedfoot { gap: 14px; align-items: center; }
.mx-pagination { gap: 14px; align-items: center; margin: 0; }
.mx-pagination .wp-block-query-pagination-numbers { display: flex; gap: 6px; align-items: center; }
.mx-pagination .page-numbers.current {
	background: var(--mx-accent);
	color: var(--mx-ground);
	border: 1px solid var(--mx-accent);
	padding: 8px 14px;
	font-weight: 800;
	font-size: 14px;
}
.mx-feedstatus {
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mx-muted-55);
}

/* ── Single post ─────────────────────────────────────────────────────── */

.mx-single .mx-postmeta { margin-bottom: 18px; letter-spacing: 0.12em; }
.mx-lede { margin: 0; color: color-mix(in srgb, var(--mx-ink) 75%, transparent); }

.mx-hero-image .wp-block-post-featured-image { margin: 0; }
.mx-hero-image img {
	width: 100%;
	height: min(52vw, 520px);
	object-fit: cover;
	display: block;
}
.mx-figcaption {
	margin: 9px 0 0;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mx-muted-55);
}

.mx-prose { font-size: 17px; line-height: 1.68; }
.mx-prose p { margin: 0 0 20px; }
.mx-prose h2 { margin: 36px 0 14px; font-size: 27px; }

.mx-pull p { margin: 0; }
.mx-pull cite { display: block; margin-top: 12px; font-size: 12px; font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; }

.mx-qa__item:last-child { border-bottom: var(--mx-rule) solid var(--mx-divider); }
.mx-qa__q { margin: 0 0 8px; font-size: 17px; }
.mx-qa__a { margin: 0; font-size: 16px; }

.mx-videoblock .mx-kicker,
.mx-galleryblock .mx-kicker { margin-bottom: 12px; }
.mx-gallery { gap: 2px !important; }
.mx-gallery .wp-block-image img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }

.mx-postfoot__row { gap: 18px; align-items: center; }
.mx-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.mx-tags a {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	font-size: 11px;
	letter-spacing: 0.02em;
	text-decoration: none;
	border: 1px solid var(--mx-accent);
	color: var(--mx-accent);
}

.mx-prevnext { gap: 0; align-items: stretch; }
.mx-prevnext .post-navigation-link-previous,
.mx-prevnext .post-navigation-link-next {
	flex: 1 1 260px;
	padding: 22px 22px 22px 0;
}
.mx-prevnext .post-navigation-link-next {
	padding: 22px 0 22px 22px;
	border-left: var(--mx-rule) solid var(--mx-divider);
	text-align: left;
}
.mx-prevnext a { text-decoration: none; color: var(--mx-ink); }
.mx-prevnext .post-navigation-link__label {
	display: block;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mx-accent-deep);
	margin-bottom: 9px;
}
/* Core prints the title as a bare <a> after the label (no __title span). */
.mx-prevnext .post-navigation-link__title,
.mx-prevnext .wp-block-post-navigation-link > a {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 18px;
	line-height: 1.2;
}
/* No tags on the post: the share icons still sit on the right, as drawn. */
.mx-postfoot__row .mx-share { margin-left: auto; }
.mx-postfoot__row .mx-share::before {
	content: "Share";
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--mx-ink) 55%, transparent);
	margin-right: 4px;
}

/* ── Tables — About, Support, Contact ────────────────────────────────── */

.mx-table table,
.wp-block-table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.mx-table td,
.mx-table th,
.wp-block-table td,
.wp-block-table th {
	padding: 8px 0;
	border: 0;
	border-bottom: 1px solid var(--mx-divider);
	text-align: left;
}
.mx-table tr td:first-child,
.mx-table tr th:first-child { width: 42%; }
.mx-table--figures tr td:first-child { width: 58%; }
.mx-table--figures td:last-child { text-align: right; font-weight: 800; }
.mx-table--contact th { font-weight: 400; width: 38%; color: var(--mx-ink); }

/* ── Stats ───────────────────────────────────────────────────────────── */

.mx-stat__value {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
}
.mx-stat__label { margin: 8px 0 0; color: var(--mx-muted-62); }

.mx-stats .wp-block-column { padding: 20px; }
.mx-stats .wp-block-column:first-child { padding-left: 0; }
.mx-stats .wp-block-column + .wp-block-column { border-left: var(--mx-rule) solid var(--mx-divider); }
.mx-stats .mx-stat__value { font-size: 42px; color: var(--mx-accent); }
.mx-stats .mx-stat__label { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 9px; }

/* ── Support ─────────────────────────────────────────────────────────── */

.mx-support__buttons { display: flex; flex-direction: column; }
.mx-support__note { margin: 20px 0 0; font-size: 12px; line-height: 1.5; color: var(--mx-muted-55); }

/* ── Contact form ────────────────────────────────────────────────────── */

.mx-form { display: flex; flex-direction: column; gap: 16px; }
.mx-form__pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.mx-form .mx-field { padding: 0; border: 0; margin: 0; }
.mx-form .mx-field > label,
.mx-form legend {
	display: block;
	font-size: 12px;
	margin-bottom: 5px;
	padding: 0;
	color: var(--mx-muted-70);
}
.mx-form fieldset { border: 0; padding: 0; margin: 0; }

.mx-input {
	width: 100%;
	min-height: 36px;
	padding: 6px 10px;
	font: inherit;
	font-size: 14px;
	color: var(--mx-ink);
	caret-color: var(--mx-accent);
	background: var(--mx-surface);
	border: 1px solid var(--mx-divider);
	transition: border-color 0.16s ease, background 0.16s ease;
}
.mx-input:hover { border-color: color-mix(in srgb, var(--mx-ink) 45%, transparent); }
.mx-input:focus-visible { border-color: var(--mx-accent); outline-offset: 0; }
textarea.mx-input { min-height: 90px; resize: vertical; }

.mx-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--mx-divider); max-width: 100%; margin-top: 2px; }
.mx-seg__opt {
	display: inline-flex;
	align-items: center;
	padding: 7px 12px;
	font-size: 13px;
	cursor: pointer;
}
.mx-seg__opt + .mx-seg__opt { border-left: 1px solid var(--mx-divider); }
.mx-seg__opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.mx-seg__opt:has(input:checked) { background: var(--mx-accent); color: var(--mx-ground); }
.mx-seg__opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--mx-ink) 7%, transparent); }
.mx-seg__opt:has(input:focus-visible) { outline: 2px solid var(--mx-accent); outline-offset: -2px; }

.mx-form__error { margin: 0; font-size: 13px; line-height: 1.5; color: var(--mx-accent-deep); }
.mx-form--sent .mx-form__title {
	margin: 0 0 12px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 24px;
	line-height: 1.15;
}
.mx-form--sent .mx-form__lede { margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: var(--mx-muted-70); }

/* ── Match result block ──────────────────────────────────────────────── */

.mx-result { margin: var(--wp--preset--spacing--60) 0; padding: 24px; background: var(--mx-surface); }
.mx-result__kicker {
	margin: 0 0 14px;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mx-accent-deep);
}
.mx-result__title { margin: 0 0 16px; font-size: 20px; line-height: 1.15; }
.mx-result__table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 15px; }
.mx-result__table th,
.mx-result__table td {
	padding: 8px 0;
	border-bottom: 1px solid var(--mx-divider);
	font-weight: 400;
}
.mx-result__table th { text-align: left; }
.mx-result__table td { text-align: right; font-variant-numeric: tabular-nums; }
.mx-result__row th { font-weight: 800; }
.mx-result__meta { margin: 14px 0 0; font-size: 13px; color: color-mix(in srgb, var(--mx-ink) 65%, transparent); }

/* ── Search and 404 ──────────────────────────────────────────────────── */

.mx-split { gap: 0 !important; }
.mx-searchpanel .wp-block-search__inside-wrapper { gap: 10px; border: 0; flex-wrap: wrap; }
.mx-searchform .wp-block-search__input {
	border: 1px solid var(--mx-divider);
	background: var(--mx-ground);
	color: var(--mx-ink);
	min-height: 36px;
	padding: 6px 10px;
	flex: 1;
	min-width: 180px;
}
.mx-result-row .wp-block-post-title { margin: 0; }
.mx-result-row .wp-block-post-title a {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 18px;
	line-height: 1.2;
	color: var(--mx-ink);
	text-decoration: none;
}
.mx-result-row:hover .wp-block-post-title a { color: var(--mx-accent-deep); }

/* ── Feed foot: status left, pages centred, the category link right ──── */

.mx-feedfoot__lead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mx-feedfoot__aside { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-left: auto; }
.mx-feedfoot__aside:empty,
.mx-feedfoot__aside:not(:has(:not([hidden]))) { display: none; }

.mx-pages { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; margin-inline: auto; }
.mx-pages__nums { display: flex; align-items: center; gap: 4px; }
.mx-pages__item,
.mx-pages__gap {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.08em;
	min-width: 36px;
	height: 36px;
	padding: 0 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--mx-ink);
	text-decoration: none;
	border: 2px solid transparent;
	transition: border-color 0.16s ease, color 0.16s ease;
}
.mx-pages__gap { min-width: 20px; padding: 0; color: var(--mx-muted-55); }
.mx-pages__item:hover { border-color: var(--mx-divider); }
.mx-pages__item.is-active { color: var(--mx-accent); border-color: var(--mx-accent); }
.mx-pages__arrow {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mx-ink);
	text-decoration: none;
	padding: 8px 0;
	white-space: nowrap;
	transition: color 0.16s ease;
}
.mx-pages__arrow:hover { color: var(--mx-accent-deep); }
.mx-pages__arrow.is-off { color: var(--mx-muted-55); cursor: default; }
.mx-dark .mx-pages__item.is-active { color: var(--color-accent-700); border-color: var(--color-accent-700); }

@media (max-width: 760px) {
	.mx-feedfoot { flex-direction: column; align-items: stretch !important; }
	.mx-feedfoot__aside { margin-left: 0; }
	.mx-pages { justify-content: space-between; margin-inline: 0; }
}

/* ── Footer — three rows on the 1320px box ───────────────────────────── */

.mx-footer { --mx-footer-muted: var(--mx-muted-62); }
.mx-footer .mx-footer__row { max-width: var(--mx-wide); margin-inline: auto; }
.mx-footer .mx-footer__row + .mx-footer__row { margin-block-start: 0; }
/* The part's shortcode blocks arrive wrapped in a <p>; no gap of their own. */
.mx-footer__row > p { margin: 0; }

/* Row 1: the mark and the tagline on the left, the statement and the button
   on the right, both feet on the same baseline. */
.mx-footer__top {
	display: flex;
	align-items: flex-end;
	gap: 32px clamp(40px, 6vw, 88px);
	padding: clamp(40px, 5vw, 56px) 0 clamp(32px, 4vw, 44px);
}
.mx-footer__brandcol { flex: 0 0 auto; }
/* The statement follows the mark; the button takes the far end of the row. */
.mx-footer__say {
	flex: 1 1 auto;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px 40px;
	min-width: 0;
}
.mx-footer__brand {
	display: inline-block;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 24px;
	letter-spacing: -0.02em;
	text-decoration: none;
	color: var(--mx-ink);
}
.mx-footer__brand--logo { line-height: 0; }
.mx-footer__logo { display: block; height: calc(var(--mx-logo-h) * 1.1); width: auto; max-width: 260px; }
.mx-footer__tagline { margin: 16px 0 0; font-size: 13px; line-height: 1.6; color: var(--mx-footer-muted); max-width: 32ch; }
.mx-footer__statement {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: clamp(22px, 2.6vw, 34px);
	line-height: 1.08;
	letter-spacing: -0.02em;
	flex: 1 1 auto;
	min-width: 0;
	text-wrap: pretty;
}
.mx-footer__say .btn { flex: 0 0 auto; }
.mx-footer__say .btn { margin: 0; }

/* Row 2: the widget columns, as the mockup draws them — kicker, links, 9px apart. */
.mx-footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 32px;
	padding: 32px 0 40px;
	border-top: var(--mx-rule) solid var(--mx-divider);
}
.mx-footer__kicker {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mx-muted-55);
	margin: 0 0 14px;
}
.mx-footer__list,
.mx-footer__list ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.mx-footer__list li { margin: 0; }
.mx-footer__list a,
.mx-social a {
	font-size: 14px;
	color: var(--mx-ink);
	text-decoration: none;
	transition: color 0.16s ease;
}
.mx-footer__list a:hover,
.mx-social a:hover { color: var(--mx-accent-deep); }
.mx-footer__text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--mx-footer-muted); max-width: 32ch; }
.mx-social { display: flex; flex-direction: column; gap: 9px; }
.mx-social a { display: inline-flex; align-items: center; gap: 9px; }
.mx-social svg { flex: 0 0 auto; color: var(--mx-muted-55); transition: color 0.16s ease; }
.mx-social a:hover svg { color: var(--mx-accent-deep); }

/* Row 3: the bottom line. */
.mx-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px 24px;
	flex-wrap: wrap;
	padding: 18px 0 22px;
	border-top: var(--mx-rule) solid var(--mx-divider);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mx-muted-55);
}
.mx-footer__totop {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	color: var(--mx-ink);
	text-decoration: none;
	transition: color 0.16s ease;
}
.mx-footer__totop:hover { color: var(--mx-accent-deep); }

@media (max-width: 900px) {
	.mx-footer__say { flex-wrap: wrap; }
}
@media (max-width: 760px) {
	.mx-footer__top { flex-direction: column; align-items: flex-start; }
	.mx-footer__say { width: 100%; }
	.mx-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
	.mx-footer__cols { grid-template-columns: minmax(0, 1fr); }
}

/* ── Reveal and skeleton ─────────────────────────────────────────────── */

@keyframes mx-up {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: none; }
}
@keyframes mx-clip {
	from { opacity: 0; clip-path: inset(0 0 22% 0); }
	to { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes mx-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes mx-shimmer {
	from { background-position: -180% 0; }
	to { background-position: 180% 0; }
}

/* Armed by script only — without JS the tiles are simply visible. */
.mx-reveal.is-armed { opacity: 0; }
.mx-reveal.is-in {
	animation-duration: var(--mx-reveal-ms);
	animation-timing-function: cubic-bezier(0.2, 0.75, 0.25, 1);
	animation-fill-mode: both;
	animation-name: mx-up;
}
.mx-motion-clip .mx-reveal.is-in { animation-name: mx-clip; }
.mx-motion-fade-only .mx-reveal.is-in { animation-name: mx-fade; }

.mx-skeleton__tile {
	break-inside: avoid;
	margin: 0 0 var(--mx-gutter-y);
	display: block;
	list-style: none;
}
.mx-skeleton__bar {
	background: linear-gradient(100deg,
		var(--mx-surface) 30%,
		color-mix(in srgb, var(--mx-ink) 12%, var(--mx-surface)) 50%,
		var(--mx-surface) 70%);
	background-size: 220% 100%;
	animation: mx-shimmer 1.5s linear infinite;
	margin-bottom: 10px;
}

/* ── Small screens ───────────────────────────────────────────────────── */

@media (max-width: 720px) {
	h1 { letter-spacing: -0.02em; }
	.wp-element-button, .wp-block-button__link, .mx-btn, .mx-pagination a { min-height: 44px; }
	.mx-nav a { min-height: 44px; display: inline-flex; align-items: center; }
	.mx-stats .wp-block-column,
	.mx-stats .wp-block-column:first-child { padding: 20px 0; }
	.mx-stats .wp-block-column + .wp-block-column {
		border-left: 0;
		border-top: var(--mx-rule) solid var(--mx-divider);
	}
	.mx-prevnext .post-navigation-link-previous,
	.mx-prevnext .post-navigation-link-next { padding: 22px 0; border-left: 0; }
	.mx-prevnext .post-navigation-link-next { border-top: var(--mx-rule) solid var(--mx-divider); }
	.mx-searchpanel { border-left: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
	.mx-reveal, .mx-reveal.is-armed, .mx-reveal.is-in { opacity: 1; animation: none; }
	.mx-hover-zoom .mx-tile:hover .mx-tile__image img { transform: none; }
	.mx-header, .mx-progress, .mx-top, .mx-filter { transition: none; }
	.mx-skeleton__bar { animation: none; }
	html { scroll-behavior: auto !important; }
}

/* A display rule beats the UA's [hidden], so say it here. */
[hidden] { display: none !important; }

/* Focus is never the browser default. */
:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 2px solid var(--mx-accent);
	outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════════
   Sekcijski blokovi — jedan blok po ekranu iz Maxim.dc.html.
   Sve mere su iz makete; boje i tipografija i dalje iz theme.json.
   ═════════════════════════════════════════════════════════════════════ */

/* The design stacks its sections flush: no block gap between them. Core
   prints .is-layout-flow > * + * inline after this file, so this needs one
   more element to win. */
main.mx-main--home > *,
main.mx-main--home > * + * { margin-block-start: 0; margin-block-end: 0; }

.mx-hero,
.mx-feedsection,
.mx-postdemo,
.mx-catdemo,
.mx-about,
.mx-support-section,
.mx-contact,
.mx-split { display: block; width: 100%; }

.mx-feedsection,
.mx-postdemo,
.mx-catdemo,
.mx-about,
.mx-support-section,
.mx-contact { border-bottom: var(--mx-rule) solid var(--mx-divider); }

/* ── Hero ────────────────────────────────────────────────────────────── */

.mx-hero {
	background: var(--mx-accent);
	color: var(--mx-ground);
	border-bottom: var(--mx-rule) solid var(--mx-divider);
	padding: clamp(44px, 7vw, 88px) var(--mx-gutterpage) clamp(36px, 5vw, 64px);
}
.mx-hero__inner { max-width: var(--mx-wide); margin: 0 auto; }
.mx-hero__kicker {
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin: 0 0 clamp(18px, 3vw, 30px);
	opacity: 0.9;
}
.mx-hero__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: clamp(46px, 10vw, 132px);
	line-height: 0.94;
	letter-spacing: -0.04em;
	margin: 0 0 clamp(20px, 3vw, 32px);
	max-width: 15ch;
	text-wrap: balance;
}
.mx-hero__foot {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(20px, 3vw, 40px);
	align-items: start;
	border-top: 2px solid color-mix(in srgb, var(--mx-ground) 45%, transparent);
	padding-top: clamp(18px, 2.5vw, 28px);
}
.mx-hero__lede {
	font-size: clamp(15px, 1.4vw, 18px);
	line-height: 1.5;
	margin: 0;
	max-width: 46ch;
}
.mx-hero .mx-stat__value { font-size: clamp(28px, 3vw, 40px); }
.mx-hero .mx-stat__label {
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.85;
	color: inherit;
}

.mx-hero--support { padding: 56px var(--mx-gutterpage); }
.mx-hero__title--support {
	font-size: clamp(36px, 6vw, 76px);
	line-height: 1;
	letter-spacing: -0.03em;
	max-width: 20ch;
	margin-bottom: 24px;
}
.mx-hero__lede--support { font-size: 18px; max-width: 54ch; }

/* ── Feed sekcija ────────────────────────────────────────────────────── */

.mx-feedsection .mx-filterwrap { border-bottom: 0; }
.mx-feedsection .mx-feed {
	max-width: var(--mx-wide-box);
	margin: 0 auto;
	padding: 36px var(--mx-gutterpage) 0;
}
.mx-masonry__item { break-inside: avoid; margin: 0 0 var(--mx-gutter-y); display: block; }
.mx-feedsection .mx-masonry,
.mx-catdemo .mx-masonry { margin-bottom: 0; }
.mx-feedsection .mx-feedfoot {
	border-top: var(--mx-rule) solid var(--mx-divider);
	padding: 22px 0 56px;
	display: flex;
	gap: 14px;
	align-items: center;
	flex-wrap: wrap;
}

/* ── Post — prikaz šablona ───────────────────────────────────────────── */

.mx-postdemo__head { max-width: var(--mx-text-box); margin: 0 auto; padding: 48px var(--mx-gutterpage) 28px; }
.mx-postdemo__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: clamp(30px, 4.6vw, 54px);
	line-height: 1.05;
	letter-spacing: -0.025em;
	margin: 0 0 22px;
	text-wrap: balance;
}
.mx-postdemo__head .mx-lede { font-size: 19px; line-height: 1.5; }
.mx-postdemo__hero { max-width: var(--mx-wide-box); margin: 0 auto; padding: 0 var(--mx-gutterpage) 36px; }
.mx-postdemo__body,
.mx-postdemo__qa { max-width: var(--mx-text-box); margin: 0 auto; padding: 0 var(--mx-gutterpage); }
.mx-postdemo__qa { padding-bottom: 36px; }
.mx-postdemo__body .mx-pull {
	margin: 34px 0;
	padding: 26px 0;
	border-top: var(--mx-rule) solid var(--mx-divider);
	border-bottom: var(--mx-rule) solid var(--mx-divider);
}
.mx-postdemo__body .mx-pull p {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: clamp(23px, 3.4vw, 33px);
	line-height: 1.14;
	letter-spacing: -0.02em;
}
.mx-postdemo__result { max-width: var(--mx-text-box); margin: 0 auto; padding: 0 var(--mx-gutterpage) 36px; }
.mx-postdemo__result .mx-result { margin: 0; }
.mx-postdemo__video,
.mx-postdemo__gallery { max-width: var(--mx-wide-box); margin: 0 auto; padding: 0 var(--mx-gutterpage) 40px; }
.mx-postdemo__gallery { padding-bottom: 44px; }
.mx-videoframe { position: relative; }
.mx-badge--top { top: 0; bottom: auto; padding: 11px 17px; font-size: 12px; }
.mx-gallery3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2px; }
.mx-gallery3 figure { margin: 0; }
.mx-gallery3 img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.mx-postdemo__foot { max-width: var(--mx-text-box); margin: 0 auto; padding: 0 var(--mx-gutterpage) 40px; }
.mx-postdemo__foot .mx-postfoot__row {
	border-top: var(--mx-rule) solid var(--mx-divider);
	border-bottom: var(--mx-rule) solid var(--mx-divider);
	padding: 18px 0;
	display: flex;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
}
.mx-tag {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	font-size: 11px;
	letter-spacing: 0.02em;
	border: 1px solid var(--mx-accent);
	color: var(--mx-accent);
}
.mx-tag--filled { background: #fff2ef; border-color: transparent; color: #7c1405; }
.mx-share--static { gap: 13px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.mx-postdemo__nav { max-width: var(--mx-wide-box); margin: 0 auto; padding: 0 var(--mx-gutterpage) 56px; }
.mx-postdemo__nav .mx-prevnext {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	border-top: var(--mx-rule) solid var(--mx-divider);
}
.mx-prevnext__link { padding: 22px 22px 22px 0; text-decoration: none; color: var(--mx-ink); display: block; }
.mx-prevnext__link--next { padding: 22px 0 22px 22px; border-left: var(--mx-rule) solid var(--mx-divider); }
.mx-prevnext__label {
	display: block;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mx-accent-deep);
	margin-bottom: 9px;
}
.mx-prevnext__title {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 18px;
	line-height: 1.2;
}

/* ── About ───────────────────────────────────────────────────────────── */

.mx-about__head { max-width: var(--mx-wide-box); margin: 0 auto; padding: 48px var(--mx-gutterpage) 0; }
.mx-about__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: clamp(34px, 5.6vw, 66px);
	line-height: 1.02;
	letter-spacing: -0.03em;
	margin: 0 0 36px;
	max-width: 22ch;
	text-wrap: balance;
}
.mx-about__grid {
	max-width: var(--mx-wide-box);
	margin: 0 auto;
	padding: 0 var(--mx-gutterpage) 48px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 36px;
	align-items: start;
}
.mx-about__text { font-size: 17px; line-height: 1.68; }
.mx-about__text p { margin: 0 0 18px; }
.mx-about__season { max-width: var(--mx-wide-box); margin: 0 auto; padding: 0 var(--mx-gutterpage) 56px; }
.mx-about__seasontitle {
	font-size: 29px;
	margin: 0 0 24px;
	padding-top: 28px;
	border-top: var(--mx-rule) solid var(--mx-divider);
}
.mx-stats--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; }
.mx-stats--grid .mx-stat { padding: 20px; }
.mx-stats--grid .mx-stat:first-child { padding-left: 0; }
.mx-stats--grid .mx-stat + .mx-stat { border-left: var(--mx-rule) solid var(--mx-divider); }
.mx-stats--grid .mx-stat__value { font-size: 42px; color: var(--mx-accent); }
.mx-stats--grid .mx-stat__label { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 9px; }

/* ── Support ─────────────────────────────────────────────────────────── */

.mx-support__grid {
	max-width: var(--mx-wide-box);
	margin: 0 auto;
	padding: 48px var(--mx-gutterpage) 56px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 40px;
	align-items: start;
}
.mx-support__heading { font-size: 28px; margin: 0 0 18px; }
.mx-support { border: var(--mx-rule) solid var(--mx-divider); padding: 28px; }
.mx-support__title { font-size: 24px; line-height: 1.15; margin: 0 0 14px; }
.mx-support__text { font-size: 15px; line-height: 1.6; margin: 0 0 22px; color: var(--mx-muted-70); }
.mx-support__report { font-size: 14px; line-height: 1.6; margin: 18px 0 0; color: color-mix(in srgb, var(--mx-ink) 68%, transparent); }
.mx-support__photo { min-height: 280px; }

/* ── Kontakt ─────────────────────────────────────────────────────────── */

.mx-contact__grid {
	max-width: var(--mx-wide-box);
	margin: 0 auto;
	padding: 48px var(--mx-gutterpage) 56px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 44px;
	align-items: start;
}
.mx-contact__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: clamp(32px, 5vw, 58px);
	line-height: 1.02;
	letter-spacing: -0.03em;
	margin: 0 0 22px;
	max-width: 18ch;
	text-wrap: balance;
}
.mx-contact__lede { font-size: 17px; line-height: 1.6; margin: 0 0 28px; color: var(--mx-muted-72); }
.mx-contact .mx-formwrap { border: var(--mx-rule) solid var(--mx-divider); padding: 28px; }

/* ── 404 i pretraga ──────────────────────────────────────────────────── */

.mx-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0; }
.mx-split__left { padding: 48px var(--mx-gutterpage); }
.mx-split__right {
	padding: 48px var(--mx-gutterpage);
	border-left: var(--mx-rule) solid var(--mx-divider);
	background: var(--mx-surface);
}
.mx-split__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: clamp(44px, 7vw, 86px);
	line-height: 0.98;
	letter-spacing: -0.04em;
	margin: 0 0 20px;
}
.mx-split__text { font-size: 17px; line-height: 1.6; margin: 0 0 26px; max-width: 38ch; color: var(--mx-muted-72); }
.mx-searchrow { display: flex; gap: 10px; margin-bottom: 26px; flex-wrap: wrap; }
.mx-searchrow .mx-input { flex: 1; min-width: 180px; max-width: none; background: var(--mx-ground); }
.mx-result-row { border-top: var(--mx-rule) solid var(--mx-divider); padding: 16px 0; }
.mx-result-row__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 18px;
	line-height: 1.2;
	color: var(--mx-ink);
	text-decoration: none;
}
.mx-result-row__title:hover { color: var(--mx-accent-deep); }

/* ── Drop-zone mesta dok ne stignu fotografije ───────────────────────── */

.mx-slot { background: var(--mx-surface); width: 100%; }
.mx-slot--3x4 { aspect-ratio: 3 / 4; }
.mx-slot--4x5 { aspect-ratio: 4 / 5; }

@media (max-width: 720px) {
	.mx-split__right { border-left: 0; border-top: var(--mx-rule) solid var(--mx-divider); }
	.mx-prevnext__link,
	.mx-prevnext__link--next { padding: 22px 0; border-left: 0; }
	.mx-prevnext__link--next { border-top: var(--mx-rule) solid var(--mx-divider); }
	.mx-stats--grid .mx-stat,
	.mx-stats--grid .mx-stat:first-child { padding: 20px 0; }
	.mx-stats--grid .mx-stat + .mx-stat { border-left: 0; border-top: var(--mx-rule) solid var(--mx-divider); }
}

/* ── Arhiva (ekran 03) ───────────────────────────────────────────────────
   Maketa ovde ne koristi pločice sa varijantama: svaka je ista — slika,
   datum, naslov, linija i akcija. Tri kolone, bez „All“ u traci. */

.mx-archive {
	max-width: var(--mx-wide-box);
	margin: 0 auto;
	padding: 36px var(--mx-gutterpage) 56px;
}
.mx-masonry--archive {
	columns: 290px 3;
	column-gap: var(--mx-gutter);
}

.mx-atile { display: block; }
.mx-atile__image { margin: 0 0 12px; overflow: hidden; }
.mx-atile__image img { display: block; width: 100%; }
.mx-hover-zoom .mx-atile__image img { transition: transform 0.5s cubic-bezier(0.2, 0.75, 0.25, 1); }
.mx-hover-zoom .mx-atile:hover .mx-atile__image img { transform: scale(1.045); }

.mx-atile__date {
	margin: 0 0 8px;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mx-muted-55);
}
.mx-atile__title {
	margin: 0 0 12px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 22px;
	line-height: 1.15;
	letter-spacing: -0.015em;
	text-wrap: pretty;
}
.mx-atile__title a { text-decoration: none; color: inherit; transition: color 0.2s ease; }
.mx-atile:hover .mx-atile__title a { color: var(--mx-accent-deep); }

.mx-atile__foot .wp-block-read-more {
	position: relative;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--mx-ink);
}
.mx-hover-underline .mx-atile__foot .wp-block-read-more::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -4px;
	height: 2px;
	background: var(--mx-accent);
	transition: right 0.28s cubic-bezier(0.2, 0.75, 0.25, 1);
}
.mx-hover-underline .mx-atile:hover .mx-atile__foot .wp-block-read-more::after { right: 0; }

/* Zaglavlje arhive: naslov levo, opis desno, oba poravnata po dnu. */
.mx-catdemo__head {
	padding: 44px var(--mx-gutterpage) 28px;
	border-bottom: var(--mx-rule) solid var(--mx-divider);
}
.mx-catdemo__headrow {
	max-width: var(--mx-wide);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 32px;
	align-items: end;
}
.mx-catdemo__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: clamp(40px, 7vw, 84px);
	line-height: 0.98;
	letter-spacing: -0.03em;
}
.mx-catdemo__blurb {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--mx-muted-72);
	max-width: 44ch;
}

@media (max-width: 1024px) {
	.mx-masonry--archive { columns: 290px 2; }
}
@media (max-width: 640px) {
	.mx-masonry--archive { columns: 1; }
}

/* ── Mega meni — kategorije ─────────────────────────────────────────── */

.mx-header { position: sticky; }
/* Absolutely positioned, so the wrapper is not a third flex child pushing the
   actions off the right edge; the panel hangs from the header's bottom rule. */
.mx-megawrap { position: absolute; left: 0; right: 0; bottom: -2px; height: 0; width: auto; overflow: visible; margin: 0; padding: 0; }
.mx-nav__mega > .wp-block-navigation-item__content::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-3px) rotate(45deg);
	transition: transform .18s ease;
}
.mx-nav__mega.is-open > .wp-block-navigation-item__content::after { transform: translateY(0) rotate(-135deg); }
.mx-mega { animation: mxDrawer .22s ease both; }
.mx-nav__mega.is-open > .wp-block-navigation-item__content { color: var(--mx-accent); border-bottom-color: var(--mx-accent); }

/* Cards: the photograph is grey until the pointer arrives, then colour and a
   slow zoom — the tiles' own hover. The name gets the accent and a 2px line
   that draws in from the left, like a tile's action. */
.mx-mega__card { animation: mx-up .3s cubic-bezier(.2,.75,.25,1) both; animation-delay: calc(var(--i, 0) * 35ms); }
.mx-mega__photo img { transition: transform .5s cubic-bezier(.2,.75,.25,1); }
.mx-mega__photo { transition: filter .35s ease, border-color .2s ease; }
.mx-mega__card:hover .mx-mega__photo { filter: none; border-color: var(--color-accent); }
.mx-mega__card:hover .mx-mega__photo img { transform: scale(1.045); }
.mx-mega__name { transition: color .2s ease; }
.mx-mega__name::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 0;
	height: 2px;
	background: var(--color-accent);
	transition: right .28s cubic-bezier(.2,.75,.25,1);
}
.mx-mega__card:hover .mx-mega__name,
.mx-mega__card:focus-visible .mx-mega__name { color: var(--color-accent-700); }
.mx-mega__card:hover .mx-mega__name::after,
.mx-mega__card:focus-visible .mx-mega__name::after { right: 0; }
.mx-mega__title { transition: color .2s ease; }
.mx-mega__post:hover .mx-mega__title,
.mx-mega__post:focus-visible .mx-mega__title { color: var(--color-accent-700); }
.mx-mega__post:first-of-type { border-top: 0 !important; }
.mx-mega__card:focus-visible,
.mx-mega__post:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }

@media (max-width: 1000px) {
	.mx-megawrap { display: none; }
	.mx-nav__mega > .wp-block-navigation-item__content::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.mx-mega, .mx-mega__card { animation: none; }
	.mx-mega__photo, .mx-mega__photo img, .mx-mega__name::after { transition: none; }
	.mx-mega__card:hover .mx-mega__photo img { transform: none; }
}

/* ── Kategorije — police (stranica Categories) ──────────────────────── */

/* The jump bar's items are the mockup's filter items, moved from inline style
   to a class so the scroll-spy can switch the active one. */
.mx-jump__item {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 14px 18px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	color: var(--color-text);
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	transition: color .16s ease, border-color .16s ease;
}
.mx-jump__item.is-first { padding-left: 0; }
.mx-jump__item:hover { color: var(--color-accent-700); }
.mx-jump__item.is-active { color: var(--color-accent); border-bottom-color: var(--color-accent); }
/* Direct #shelf-… loads: the JS scroll-padding covers the header, this the bar. */
.mx-shelf { scroll-margin-top: 40px; }
.mx-shelf__title { transition: color .2s ease; }
.mx-shelf__title:hover { color: var(--color-accent-700); }
.mx-shelf__all { transition: color .16s ease, border-color .16s ease; }
.mx-shelf__all:hover { color: var(--color-accent-700); border-bottom-color: var(--color-accent) !important; }
.mx-shelf .mx-masonry__item { break-inside: avoid; margin: 0 0 var(--mx-gutter-y); display: block; }
@media (max-width: 640px) {
	.mx-jump { overflow-x: auto; scrollbar-width: none; }
	.mx-jump > div { flex-wrap: nowrap !important; }
}

/* ── The two other families the Typography setting offers ─────────────── */
@font-face {
	font-family: "Archivo Narrow";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/archivo-narrow-400-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Archivo Narrow";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/archivo-narrow-400-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Archivo Narrow";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/archivo-narrow-600-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Archivo Narrow";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/archivo-narrow-600-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Archivo Narrow";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/archivo-narrow-700-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Archivo Narrow";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/archivo-narrow-700-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Archivo Black";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/archivo-black-400-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Archivo Black";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/archivo-black-400-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}