/*
 * Meklara connector presentation.
 *
 * The plugin must look deliberate in ANY theme and must never require one, so
 * every value here comes from a `--meklara-*` custom property with a real
 * fallback. A theme dresses the connector by declaring those properties — it
 * does not override selectors, and the plugin never reads a theme's class
 * names. That is the whole contract.
 *
 * Defaults are declared with :where() so a single `:root` rule in a theme wins
 * without anyone counting specificity.
 */

/*
 * ⛔ THESE DEFAULTS MUST NOT PRE-EMPT THE HOST THEME.
 *
 * They used to be flat literals, which broke the very chain above them: the
 * --mk-* tokens ask for --meklara-* first, and because the plugin always set
 * --meklara-*, the theme's own presets were NEVER consulted. Measured on
 * Twenty Twenty-Five, 2026-09-22: our widths adapted (1340px, its wideSize) but
 * the display face stayed OUR serif and the ink stayed OUR grey, on a theme
 * that publishes both.
 *
 * So each default now asks the active theme first and keeps our value last. A
 * site owner (or our own theme) can still override any of them outright, which
 * is what the --meklara-* layer is for.
 */
:where(:root) {
	--meklara-canvas: var(--wp--preset--color--base, #fbfaf8);
	--meklara-paper: var(--wp--preset--color--base, #ffffff);
	--meklara-graphite: var(--wp--preset--color--contrast, #1c1c1a);
	--meklara-ink: var(--wp--preset--color--contrast, #32322f);
	--meklara-muted: #6e6e68;
	--meklara-rule: #e3e0da;
	--meklara-sand: #f1eee8;
	/* Read by --mk-charcoal below; it was the one --meklara-* the plugin
	   consumed without ever defaulting. */
	--meklara-charcoal: var(--wp--preset--color--contrast, #161615);
	--meklara-accent: var(--wp--preset--color--accent, var(--wp--preset--color--accent-1, #8a7a5c));

	/*
	 * On a FOREIGN theme the last fallback is `inherit`, not a serif of ours.
	 * Twenty Twenty-Five publishes no `heading` family, so a literal here meant
	 * our serif landed on a Manrope site and looked like a plugin that had not
	 * been configured. Inheriting means the section headings are set in whatever
	 * the theme sets headings in, which is the point.
	 */
	--meklara-display: var(--wp--preset--font-family--heading, var(--wp--preset--font-family--display, inherit));
	--meklara-body: var(--wp--preset--font-family--body, inherit);

	--meklara-radius: 0px;
	--meklara-gap: 2rem;
	/*
	 * A card is a PHOTOGRAPH with a few facts under it, so the card decides how
	 * wide the picture is. 300px gave four columns of 308px on a 1440 screen —
	 * a thumbnail grid, the look Patrick called "a WordPress site". 420px gives
	 * three columns of ~500px on the wide measure, two on a tablet and one on a
	 * phone, with no breakpoint doing the arithmetic.
	 */
	--meklara-card-min: 420px;
	--meklara-ratio: 3 / 2;
	--meklara-ease: 220ms cubic-bezier(0.2, 0, 0, 1);
}

/* ── Collection ──────────────────────────────────────────────────────────── */

.meklara-collection {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--meklara-card-min), 1fr));
	gap: var(--meklara-gap);
	margin: 0 0 var(--meklara-gap);
	padding: 0;
	list-style: none;
}

.meklara-card {
	position: relative;
	background: var(--meklara-paper);
	border-radius: var(--meklara-radius);
}

.meklara-card-link {
	display: grid;
	gap: 1rem;
	text-decoration: none;
	color: inherit;
	height: 100%;
	align-content: start;
}

/*
 * The frame owns the aspect ratio, not the image. Reserving the box before the
 * image arrives is what keeps a 12-card grid from reflowing as it loads, and
 * it is the difference between a measured CLS of ~0 and a visibly janky page.
 */
.meklara-card-frame {
	display: block;
	position: relative;
	aspect-ratio: var(--meklara-ratio);
	overflow: hidden;
	background: var(--meklara-sand);
	border-radius: var(--meklara-radius);
}

.meklara-card-image,
.meklara-card-noimage {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--meklara-ease);
}

.meklara-card-link:hover .meklara-card-image {
	transform: scale(1.025);
}

@media (prefers-reduced-motion: reduce) {
	.meklara-card-image { transition: none; }
	.meklara-card-link:hover .meklara-card-image { transform: none; }
}

.meklara-card-body {
	display: grid;
	gap: 0.35rem;
}

.meklara-card-place {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--meklara-muted);
}

.meklara-card-title {
	font-family: var(--meklara-display);
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1.3;
	margin: 0;
	color: var(--meklara-graphite);
}

.meklara-card-price {
	font-size: 1rem;
	color: var(--meklara-graphite);
	letter-spacing: 0.01em;
}

.meklara-card-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1rem;
	font-size: 0.8125rem;
	color: var(--meklara-muted);
	margin-top: 0.15rem;
}

.meklara-card-facts span + span {
	position: relative;
	padding-left: 1rem;
}

.meklara-card-facts span + span::before {
	content: "·";
	position: absolute;
	left: 0;
	color: var(--meklara-rule);
}

/* The archive fact line a classic/other theme renders through the excerpt. */
.meklara-card-meta {
	margin: 0.35rem 0 0;
	font-size: 0.875rem;
	color: var(--meklara-muted);
}

/* ── Count, pagination, empty ────────────────────────────────────────────── */

.meklara-count {
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--meklara-muted);
	margin: 0 0 1.25rem;
}

.meklara-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem;
	margin: var(--meklara-gap) 0;
	border-top: 1px solid var(--meklara-rule);
	padding-top: 1.25rem;
}

.meklara-page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	padding: 0.55rem 0.7rem;
	font-size: 0.875rem;
	text-decoration: none;
	color: var(--meklara-ink);
	border: 1px solid transparent;
	border-radius: var(--meklara-radius);
}

.meklara-page:hover { border-color: var(--meklara-rule); }
.meklara-page.is-current { border-color: var(--meklara-graphite); color: var(--meklara-graphite); }
.meklara-page--gap { min-width: 1.5rem; color: var(--meklara-muted); }
.meklara-page--prev { margin-right: auto; }
.meklara-page--next { margin-left: auto; }

.meklara-empty {
	border: 1px solid var(--meklara-rule);
	padding: clamp(1.5rem, 5vw, 3rem);
	text-align: center;
	background: var(--meklara-paper);
}

.meklara-empty-heading {
	font-family: var(--meklara-display);
	font-size: 1.3rem;
	margin: 0;
	color: var(--meklara-graphite);
}

.meklara-empty-hint {
	margin: 0.5rem 0 1.25rem;
	color: var(--meklara-muted);
	font-size: 0.9375rem;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.meklara-button,
.meklara-search button,
.meklara-enquiry-form button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.85rem 1.75rem;
	font: inherit;
	font-size: 0.875rem;
	letter-spacing: 0.04em;
	border: 1px solid var(--meklara-graphite);
	border-radius: var(--meklara-radius);
	background: var(--meklara-graphite);
	color: var(--meklara-paper);
	text-decoration: none;
	cursor: pointer;
	transition: background var(--meklara-ease), color var(--meklara-ease);
}

.meklara-button:hover,
.meklara-search button:hover,
.meklara-enquiry-form button:hover {
	background: var(--meklara-accent);
	border-color: var(--meklara-accent);
	color: var(--meklara-paper);
}

.meklara-button--quiet {
	background: transparent;
	color: var(--meklara-graphite);
}

/* ── Search and sort ─────────────────────────────────────────────────────── */

.meklara-search {
	background: var(--meklara-paper);
	border: 1px solid var(--meklara-rule);
	padding: 1.25rem;
	margin: 0 0 var(--meklara-gap);
	display: grid;
	gap: 1rem;
}

.meklara-search-fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 1rem;
}

.meklara-field {
	display: grid;
	gap: 0.35rem;
	min-width: 0;
}

.meklara-field-label {
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--meklara-muted);
}

.meklara-field select,
.meklara-field input {
	font: inherit;
	font-size: 0.9375rem;
	width: 100%;
	min-width: 0;
	padding: 0.7rem 0.75rem;
	border: 1px solid var(--meklara-rule);
	border-radius: var(--meklara-radius);
	background: var(--meklara-canvas);
	color: var(--meklara-ink);
}

.meklara-field select:focus-visible,
.meklara-field input:focus-visible,
.meklara-card-link:focus-visible,
.meklara-page:focus-visible,
.meklara-button:focus-visible {
	outline: 2px solid var(--meklara-accent);
	outline-offset: 2px;
}

.meklara-search-actions {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
}

.meklara-search-reset {
	font-size: 0.875rem;
	color: var(--meklara-muted);
}

.meklara-sort {
	display: flex;
	align-items: end;
	gap: 0.75rem;
	margin: 0 0 1rem;
}

.meklara-sort .meklara-field { min-width: 210px; }

.meklara-sort-apply {
	font: inherit;
	font-size: 0.8125rem;
	padding: 0.7rem 1rem;
	background: transparent;
	border: 1px solid var(--meklara-rule);
	border-radius: var(--meklara-radius);
	color: var(--meklara-ink);
	cursor: pointer;
}

/* ── Detail ──────────────────────────────────────────────────────────────── */

.meklara-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 0.5rem;
	margin: 0 0 var(--meklara-gap);
}

.meklara-hero {
	grid-column: 1 / -1;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--meklara-radius);
	background: var(--meklara-sand);
}

.meklara-thumb {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--meklara-radius);
	background: var(--meklara-sand);
}

.meklara-facts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 1.5rem 2rem;
	margin: 0 0 var(--meklara-gap);
	padding: 1.5rem 0;
	border-top: 1px solid var(--meklara-rule);
	border-bottom: 1px solid var(--meklara-rule);
}

.meklara-fact dt {
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--meklara-muted);
	margin: 0;
}

.meklara-fact dd {
	margin: 0.3rem 0 0;
	font-size: 1.125rem;
	font-family: var(--meklara-display);
	color: var(--meklara-graphite);
}

.meklara-configurations table,
.meklara-parties table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.meklara-configurations th,
.meklara-configurations td,
.meklara-parties th,
.meklara-parties td {
	text-align: left;
	padding: 0.7rem 0.75rem 0.7rem 0;
	border-bottom: 1px solid var(--meklara-rule);
}

.meklara-configurations th,
.meklara-parties th {
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--meklara-muted);
	font-weight: 500;
}

/* ── Enquiry ─────────────────────────────────────────────────────────────── */

.meklara-enquiry {
	background: var(--meklara-sand);
	padding: clamp(1.5rem, 5vw, 3rem);
	margin: var(--meklara-gap) 0 0;
	border-radius: var(--meklara-radius);
}

.meklara-enquiry > h2,
.meklara-enquiry > h3 {
	font-family: var(--meklara-display);
	font-weight: 400;
	margin: 0 0 1.25rem;
	color: var(--meklara-graphite);
}

.meklara-enquiry-form {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.meklara-enquiry-form label {
	display: grid;
	gap: 0.35rem;
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--meklara-muted);
}

.meklara-enquiry-form input,
.meklara-enquiry-form select,
.meklara-enquiry-form textarea {
	font: inherit;
	font-size: 0.9375rem;
	text-transform: none;
	letter-spacing: normal;
	color: var(--meklara-ink);
	padding: 0.7rem 0.75rem;
	border: 1px solid var(--meklara-rule);
	border-radius: var(--meklara-radius);
	background: var(--meklara-paper);
	width: 100%;
	min-width: 0;
}

.meklara-enquiry-form textarea { min-height: 7rem; resize: vertical; }

/* ⛔ A NATIVE SELECT IGNORES ITS HEIGHT IN SAFARI. With the default menulist
   appearance WebKit draws the control at its own size, so min-height did
   nothing and the filters stayed 24px tall on a phone. Taking the appearance
   off makes the box ours — and it makes the enquiry select match the search
   select, which is the one form language the spec asks for. */
.meklara-enquiry-form select {
	appearance: none; -webkit-appearance: none; border-radius: 0;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%236F6B63' stroke-width='1.3'/></svg>");
	background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2rem;
}

/* A grouped form: a stack of named groups, each its own small grid.
   The float on the legend is the old fix for a legend inside a grid fieldset,
   which several engines refuse to lay out as a normal child. */
.meklara-enquiry-form--grouped { grid-template-columns: minmax(0, 1fr); gap: clamp(1.25rem, 2.5vw, 1.75rem); }
.mk-fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.mk-fieldset legend { float: left; width: 100%; padding: 0.85rem 0 0; margin-bottom: 0.9rem; border-top: 1px solid var(--mk-rule); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--meklara-muted); }
.mk-fieldset::after { content: ""; display: table; clear: both; }

.meklara-enquiry-form .meklara-field--wide,
.meklara-consent,
.meklara-enquiry-form button { grid-column: 1 / -1; }

.meklara-enquiry-intro {
	margin: -0.75rem 0 1.5rem;
	max-width: 56ch;
	color: var(--meklara-muted);
	font-size: 0.9375rem;
}

.meklara-consent {
	display: flex;
	align-items: start;
	gap: 0.6rem;
	font-size: 0.8125rem;
	text-transform: none;
	letter-spacing: normal;
	color: var(--meklara-ink);
	line-height: 1.5;
}

.meklara-enquiry-form button { justify-self: start; }

/* The honeypot must be reachable by nothing and visible to no one — including
   a screen reader, which would otherwise read out a field a person must skip. */
.meklara-website-field {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.meklara-enquiry-ok {
	border-left: 3px solid var(--meklara-accent);
	padding: 1rem 1.25rem;
	background: var(--meklara-paper);
}

.meklara-error {
	border-left: 3px solid #a4443a;
	padding: 1rem 1.25rem;
	background: var(--meklara-paper);
	color: var(--meklara-ink);
}

/* ── Narrow ──────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
	:where(:root) { --meklara-gap: 1.5rem; --meklara-card-min: min(100%, 320px); }
	.meklara-search { padding: 1rem; }
	.meklara-sort { flex-wrap: wrap; }
	.meklara-sort .meklara-field { min-width: 0; flex: 1 1 60%; }
	.meklara-page--prev, .meklara-page--next { margin: 0; }
}

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

.meklara-hero-panel {
	position: relative;
	display: grid;
	align-content: end;
	min-height: clamp(460px, 74vh, 800px);
	padding: clamp(1.5rem, 5vw, 4rem);
	isolation: isolate;
	background: var(--meklara-sand);
	color: var(--meklara-ink);
}

.meklara-hero-media {
	position: absolute;
	inset: 0;
	z-index: -2;
	display: block;
	overflow: hidden;
}

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

/*
 * A scrim, not a tint. Type over a photograph has to stay legible whatever the
 * photograph is, and a full-surface darkening flattens the image; a gradient
 * weighted to the bottom keeps the picture and still gives the text a floor.
 */
.meklara-hero-panel.has-image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to bottom,
		rgba(18, 18, 16, 0.42) 0%,
		rgba(18, 18, 16, 0.12) 38%,
		rgba(18, 18, 16, 0.68) 100%
	);
}

.meklara-hero-panel.has-image { color: #fff; }
.meklara-hero-panel.has-image .meklara-hero-heading,
.meklara-hero-panel.has-image .meklara-hero-lede { color: #fff; }

.meklara-hero-inner {
	position: relative;
	width: 100%;
	max-width: var(--mk-max);
	margin-inline: auto;
}

.meklara-hero-heading {
	font-family: var(--meklara-display);
	font-weight: 400;
	font-size: clamp(2.25rem, 6vw, 4rem);
	line-height: 1.06;
	letter-spacing: -0.015em;
	margin: 0 0 0.75rem;
	max-width: 18ch;
	color: var(--meklara-graphite);
	text-wrap: balance;
}

.meklara-hero-lede {
	font-size: clamp(1rem, 1.8vw, 1.25rem);
	line-height: 1.5;
	max-width: 46ch;
	margin: 0 0 1.75rem;
}

/* On the hero the search sits on glass rather than on paper, so the photograph
   stays visible behind it instead of being cut in half by a white slab. */
.meklara-hero-panel .meklara-search {
	margin: 0;
	background: rgba(255, 255, 255, 0.92);
	border-color: transparent;
	color: var(--meklara-ink);
	max-width: var(--mk-max);
}

@supports (backdrop-filter: blur(6px)) {
	.meklara-hero-panel .meklara-search {
		background: rgba(255, 255, 255, 0.78);
		backdrop-filter: blur(10px) saturate(1.1);
	}
}

.meklara-hero-panel .meklara-field-label { color: var(--meklara-muted); }

.meklara-hero-credit {
	position: relative;
	margin: 1rem 0 0;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	max-width: var(--mk-max);
	margin-inline: auto;
	width: 100%;
}

.meklara-hero-credit a { color: inherit; opacity: 0.78; text-decoration: none; }
.meklara-hero-credit a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 0.3em; }

/* ── Section heading used by curated collections ─────────────────────────── */

.meklara-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin: 0 0 1.5rem;
}

/* ── Listing detail ──────────────────────────────────────────────────────── */

.meklara-listing,
.meklara-development { display: block; }

.meklara-stage {
	margin: 0 0 0.75rem;
	background: var(--meklara-sand);
}

.meklara-stage .meklara-hero {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
	border-radius: var(--meklara-radius);
}

/*
 * The rest of the photographs stay in the HTML but out of the way. <details>
 * rather than a script, so a crawler, a text browser and a printed page all
 * still contain every image.
 */
.meklara-more-photos { margin: 0 0 var(--meklara-gap); }

.meklara-more-photos > summary {
	cursor: pointer;
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 0;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--meklara-muted);
}

.meklara-more-photos > summary::-webkit-details-marker { display: none; }
.meklara-more-photos > summary::after { content: "+"; font-size: 1rem; line-height: 1; }
.meklara-more-photos[open] > summary::after { content: "–"; }
.meklara-more-photos > summary:hover { color: var(--meklara-graphite); }

.meklara-headline {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding: 0 0 1.25rem;
}

.meklara-headline-price {
	margin: 0;
	font-family: var(--meklara-display);
	font-size: clamp(1.5rem, 3vw, 2rem);
	color: var(--meklara-graphite);
	line-height: 1.1;
}

.meklara-headline-ref {
	margin: 0;
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--meklara-muted);
}

/* The consent line is a label too, so it must out-specify the grid rule the
   other labels use — otherwise the checkbox stacks above its own sentence. */
.meklara-enquiry-form label.meklara-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
}

.meklara-enquiry-form label.meklara-consent input {
	width: auto;
	min-width: 0;
	margin-top: 0.15rem;
	flex: 0 0 auto;
	padding: 0;
}

/* Label text lives in a <span> so the control beneath it keeps normal casing
   and normal letter-spacing whatever the label does. */
.meklara-enquiry-form > label > span {
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--meklara-muted);
}

.meklara-enquiry-form label.meklara-consent > span {
	font-size: 0.8125rem;
	text-transform: none;
	letter-spacing: normal;
	color: var(--meklara-ink);
	line-height: 1.5;
}

/* ── Area map ────────────────────────────────────────────────────────────── */

.meklara-map {
	margin: 0 0 var(--meklara-gap);
}

.meklara-map-canvas {
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #f4eee1;
	border-radius: var(--meklara-radius);
	overflow: hidden;
}

/* Leaflet sets its own font; keep the map's labels in the page's voice. */
.meklara-map-canvas .leaflet-container { font: inherit; }

.meklara-map-canvas .area-map-label {
	background: transparent;
	border: 0;
	box-shadow: none;
	color: #4f3f2b;
	font-family: var(--meklara-display);
	font-size: 1rem;
	letter-spacing: 0.04em;
	text-shadow: 0 0 6px #f4eee1, 0 0 12px #f4eee1;
}

.meklara-map-canvas .area-map-label::before { display: none; }

.meklara-map figcaption {
	margin-top: 0.6rem;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--meklara-muted);
}

/* No archive installed: the caption stands alone rather than a grey rectangle
   pretending to be a map. */
.meklara-map--absent figcaption {
	margin: 0;
	padding: 1rem 0;
	border-top: 1px solid var(--meklara-rule);
	border-bottom: 1px solid var(--meklara-rule);
}

.meklara-area-facts {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding: 1.25rem 0;
	border-top: 1px solid var(--meklara-rule);
	border-bottom: 1px solid var(--meklara-rule);
	margin: 0 0 var(--meklara-gap);
}

.meklara-area-facts .meklara-count,
.meklara-area-facts p { margin: 0; }

.meklara-areas .meklara-card-title { font-size: 1.35rem; }

/* On a phone the hero was 60% search form: five stacked fields pushed the
   photograph and the headline off the first screen. Two columns halves it
   without hiding a filter behind a disclosure a visitor has to discover. */
@media (max-width: 600px) {
	.meklara-search-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.meklara-search-fields > .meklara-field:first-child { grid-column: 1 / -1; }
	.meklara-hero-panel { min-height: 0; padding-block: clamp(2rem, 12vw, 4rem); }
	.meklara-hero-panel .meklara-search { padding: 0.9rem; }
	.meklara-field select,
	.meklara-field input { padding: 0.6rem 0.5rem; font-size: 0.875rem; }
}

/* ── Search ─────────────────────────────────────────────────────────────── */

/* The hero search: one input, sized so it reads as the primary action on the
   page rather than a utility tucked under the headline. */
.meklara-herosearch {
	display: flex;
	gap: 0.5rem;
	max-width: 44rem;
	margin-top: 1.5rem;
}

.meklara-herosearch-field {
	flex: 1 1 auto;
	min-width: 0;
}

.meklara-herosearch input[type="search"] {
	width: 100%;
	padding: 0.95rem 1.1rem;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.94);
	font-size: 1rem;
	color: #241f18;
	-webkit-appearance: none;
	appearance: none;
}

.meklara-herosearch input[type="search"]:focus-visible {
	outline: 2px solid #c9a86a;
	outline-offset: 1px;
}

.meklara-herosearch .meklara-button {
	flex: 0 0 auto;
	padding-inline: 1.5rem;
}

.meklara-herosearch-hint {
	max-width: 44rem;
	margin-top: 0.6rem;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.85);
}

.meklara-herosearch-hint a {
	color: inherit;
	text-decoration: underline;
}

/* Active filters. Each chip is a link that removes ONLY itself. */
.meklara-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 0.75rem;
}

.meklara-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.3rem 0.7rem;
	border: 1px solid #d7cdbb;
	border-radius: 999px;
	background: #fdfbf7;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: #3a332a;
	text-decoration: none;
}

.meklara-chip:hover,
.meklara-chip:focus-visible {
	border-color: #a8864f;
	background: #f5efe4;
}

.meklara-chip-x {
	font-size: 1rem;
	line-height: 1;
	color: #8a7f6d;
}

.meklara-chip--clear {
	border-style: dashed;
	color: #6d6455;
}

/* Said when a typed phrase could not be read. Deliberately NOT styled as an
   error: nothing went wrong, we simply cannot answer that question here. */
.meklara-notice--search {
	padding: 1rem 1.15rem;
	border: 1px solid #d7cdbb;
	border-left: 3px solid #a8864f;
	border-radius: 4px;
	background: #fdfbf7;
}

.meklara-notice-title {
	margin: 0 0 0.35rem;
	font-weight: 600;
}

.meklara-notice--search p {
	margin: 0 0 0.5rem;
	font-size: 0.9375rem;
}

.meklara-notice--search p:last-child {
	margin-bottom: 0;
}

@media (max-width: 640px) {
	.meklara-herosearch {
		flex-direction: column;
	}

	.meklara-herosearch .meklara-button {
		width: 100%;
	}
}

/* A chip is a tap target before it is a label: 32px is the floor at which a
   thumb hits the one it aimed at. Measured at 390px, where two chips were
   28px and sat a few pixels apart. */
.meklara-chip {
	min-height: 32px;
}

/* The free-text field earns more room than a select, and on one line at
   phone width it would otherwise be squeezed to nothing by four neighbours. */
.meklara-field--q {
	flex: 1 1 16rem;
	min-width: 12rem;
}

.meklara-field--q input[type="search"] {
	width: 100%;
	-webkit-appearance: none;
	appearance: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Editorial layer (mk-*)

   Photography → type → whitespace → a thin rule → the next thing.
   Almost no boxes. Black or white controls. One serif, one sans. Bronze only
   for eyebrows, superscripts and hairlines — never for a button.
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * ⛔ THE PLUGIN IS A GUEST IN SOMEBODY ELSE'S THEME.
 *
 * Patrick, 2026-09-22: "the WordPress plugin that we have, it must adapt to any
 * theme people install." So every token below is resolved in this order:
 *
 *   1. what the site owner set for THIS plugin      (--meklara-*)
 *   2. what the ACTIVE THEME publishes via theme.json (--wp--preset--*, --wp--style--global--*)
 *   3. our own value, last, as a fallback
 *
 * On a block theme with a theme.json — Twenty Twenty-Five, Kadence, Blocksy,
 * anything modern — our sections pick up that theme's typography, palette and
 * measures, and look like they belong. On a classic theme with no presets, the
 * fallbacks keep them legible. Nothing here paints the theme's own furniture:
 * the header, the navigation and the footer belong to the theme, and the one
 * place we styled a core navigation overlay now lives in OUR theme instead.
 */
:root {
	--mk-accent: var(--meklara-accent, var(--wp--preset--color--accent, var(--wp--preset--color--primary, #9A7B4F)));
	--mk-charcoal: var(--meklara-charcoal, var(--wp--preset--color--contrast, #161615));
	--mk-canvas: var(--meklara-canvas, var(--wp--preset--color--base, #F7F5F1));
	--mk-ink: var(--meklara-ink, var(--wp--preset--color--contrast, #2E2D2A));
	--mk-muted: var(--meklara-muted, #6F6B63);
	--mk-rule: var(--meklara-rule, #E4E0D8);
	--mk-display: var(--meklara-display, var(--wp--preset--font-family--display, var(--wp--preset--font-family--heading, "Newsreader", "Iowan Old Style", Georgia, serif)));
	--mk-body: var(--meklara-body, var(--wp--preset--font-family--body, var(--wp--preset--font-family--system-font, inherit)));
	/*
	 * THE GUTTER IS THE HOST THEME'S, WHEN THE HOST THEME HAS ONE.
	 * Ours was 4vw and this theme's root padding is 5vw, so between 768px and
	 * 1200px everything the connector bled full width sat 7px to the left of
	 * everything the theme laid out. A block theme that opts into root-padding
	 * aware alignments publishes the value; we follow it, and fall back to our
	 * own only when there is nothing to follow.
	 */
	--mk-gutter: var(--meklara-gutter, clamp(1.25rem, 4vw, 3rem));
	/* Consumed in three places and never declared until now: a var() with no
	   fallback and no declaration resolves to nothing, so those three rules did
	   nothing at all. */
	--mk-sand: var(--meklara-sand, #f1eee8);
	/*
	 * THE WIDE MEASURE. Patrick, 2026-09-22: "nice wide images, so that it does
	 * not look like a WordPress site". A 1280px column with white either side is
	 * the tell; the reference sites run their photographs to 1600–1760px and let
	 * the reading column stay narrow underneath. Text keeps its own measure
	 * (--mk-read); only pictures and the structures around them take the width.
	 */
	/* The theme's own wide measure decides how wide a band is, when it has one. */
	--mk-max: var(--meklara-max, var(--wp--style--global--wide-size, 1600px));
	--mk-read: var(--meklara-read, var(--wp--style--global--content-size, 760px));
	/* The section measure the whole site already used as a literal 760px, named
	   once so a chapter column and a section cannot drift apart. */
	--mk-measure: var(--meklara-measure, 760px);
	--mk-sect: var(--meklara-sect, clamp(4rem, 8vw, 6.5rem));
}

/* WordPress declares the root padding on BODY, so this is where the connector
   can see it. Same cascade, one level down: a theme without root-padding aware
   alignments simply keeps our own gutter. */
body { --mk-gutter: var(--meklara-gutter, var(--wp--style--root--padding-left, clamp(1.25rem, 4vw, 3rem))); }

/* Every mk-* box measures its padding inside its width. Without this a
   100vw band with a gutter is 100vw + two gutters, and the page scrolls
   sideways by exactly that — 96px at 1440, 40px on a phone. */
[class^="mk-"], [class*=" mk-"], .meklara-hero-panel, .meklara-map, .meklara-sources,
.meklara-enquiry, .meklara-enquiry input, .meklara-enquiry textarea, .meklara-enquiry select, .meklara-search input, .meklara-search select { box-sizing: border-box; max-width: 100%; }

/* ── Type ────────────────────────────────────────────────────────────────── */
.mk-eyebrow {
	font-family: var(--mk-body);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mk-accent);
	margin: 0 0 1rem;
}
.mk-eyebrow--light { color: rgba(255, 255, 255, 0.72); }
.mk-h1, .mk-h2 {
	font-family: var(--mk-display);
	font-weight: 500;
	color: var(--mk-charcoal);
	margin: 0;
	text-wrap: balance;
}
.mk-h1 { font-size: clamp(2.75rem, 5.6vw, 4.75rem); line-height: 1.02; letter-spacing: -0.012em; }
.mk-h2 { font-size: clamp(2.1rem, 3.6vw, 3.25rem); line-height: 1.06; letter-spacing: -0.008em; max-width: 22ch; }
.mk-lede {
	font-family: var(--mk-body);
	font-size: clamp(1.02rem, 1.3vw, 1.15rem);
	line-height: 1.6;
	color: var(--mk-ink);
	max-width: 56ch;
	margin: 1.25rem 0 0;
}
.mk-muted { color: var(--mk-muted); }
.mk-place { margin: 0.35rem 0 0; font-size: 0.92rem; color: var(--mk-muted); }
.mk-index { font-family: var(--mk-body); font-size: 0.78rem; letter-spacing: 0.08em; color: var(--mk-muted); margin: 0; font-variant-numeric: tabular-nums; }

/* One arrow-link style for every call to action that is not a form submit. */
.mk-more {
	display: inline-flex;
	align-items: baseline;
	gap: 0.45rem;
	font-family: var(--mk-body);
	font-size: 0.92rem;
	font-weight: 500;
	color: var(--mk-charcoal);
	text-decoration: none;
	padding-bottom: 0.15rem;
	border-bottom: 1px solid var(--mk-rule);
	transition: border-color .25s ease, gap .25s ease;
}
.mk-more:hover, .mk-more:focus-visible { border-bottom-color: var(--mk-charcoal); gap: 0.7rem; }
.mk-more--light { color: #fff; border-bottom-color: rgba(255,255,255,.35); }
.mk-more--light:hover { border-bottom-color: #fff; }
.mk-more--lg { font-size: 1.05rem; }
p.mk-more { margin: 0; display: inline-flex; }
p.mk-more a { color: inherit; text-decoration: none; }

.mk-page { overflow-x: clip; }
.mk-page--pad { padding-top: clamp(6rem, 12vw, 9rem); }
.mk-sect { padding-top: var(--mk-sect); }
.mk-sect-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.mk-title-block { margin-bottom: clamp(3rem, 6vw, 5rem); }

/* Buttons: black on paper, white on charcoal. Small, precise, no radius. */
.mk-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.9rem 1.5rem;
	font-family: var(--mk-body);
	font-size: 0.88rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-decoration: none;
	border: 1px solid var(--mk-charcoal);
	background: var(--mk-charcoal);
	color: #fff;
	border-radius: 0;
	cursor: pointer;
	transition: background-color .2s, color .2s;
}
.mk-button:hover { background: #2b2b29; color: #fff; }
.mk-button--accent, .mk-button--dark { background: var(--mk-charcoal); color: #fff; border-color: var(--mk-charcoal); }
.mk-button--light { background: #fff; color: var(--mk-charcoal); border-color: #fff; }
.mk-button--sm { padding: 0.55rem 1rem; font-size: 0.8rem; }

/* ── Header: slim, calm; transparent over a hero ─────────────────────────── */
.mk-header {
	position: sticky;
	top: 0;
	z-index: 40;
	padding: 1.1rem var(--mk-gutter);
	background: var(--mk-canvas);
	border-bottom: 1px solid var(--mk-rule);
	transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.mk-header-row { gap: 2.5rem; }
.mk-header .mk-wordmark, .mk-header .mk-wordmark a { font-family: var(--mk-display); font-size: 1.55rem; font-weight: 500; line-height: 1; letter-spacing: -0.01em; }
.mk-wordmark a { text-decoration: none; color: var(--mk-charcoal); }
.mk-nav .wp-block-navigation-item a { font-family: var(--mk-body); font-size: 0.88rem; font-weight: 400; text-decoration: none; color: var(--mk-ink); padding: 0.35rem 0; border-bottom: 0; }
.mk-nav .wp-block-navigation-item a:hover, .mk-nav .wp-block-navigation-item a:focus-visible, .mk-nav .current-menu-item > a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.45em; text-decoration-color: currentColor; }
.mk-header-actions { gap: 1.5rem; }
.mk-header-actions p { margin: 0; }
.mk-header-link { font-family: var(--mk-body); font-size: 0.88rem; font-weight: 500; color: var(--mk-charcoal); border-bottom: 0; padding-bottom: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.4em; text-decoration-color: var(--mk-charcoal); }
.mk-header-link:hover { text-decoration-color: var(--mk-muted); }
.mk-header-link--quiet { font-weight: 400; text-decoration: none; color: var(--mk-muted); }
.mk-header-link--quiet:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.4em; }
/* Over a photograph: no ground, white type. Back to paper once scrolled. */
.mk-header--over:not(.is-scrolled) { position: fixed; left: 0; right: 0; background: transparent; border-bottom-color: transparent; }
.mk-header--over:not(.is-scrolled) .mk-wordmark a,
.mk-header--over:not(.is-scrolled) .mk-nav .wp-block-navigation-item a,
.mk-header--over:not(.is-scrolled) .mk-header-link,
/* Guarded by OUR theme's header class: on any other theme this rule never matches. */
.mk-header--over:not(.is-scrolled) .wp-block-navigation__responsive-container-open { color: #fff; }
.mk-header--over:not(.is-scrolled) .mk-header-link { text-decoration-color: rgba(255,255,255,.55); }
.mk-header--over:not(.is-scrolled) .mk-header-link--quiet { color: rgba(255,255,255,.8); }
.mk-header--over.is-scrolled { position: fixed; left: 0; right: 0; }
body.mk-has-hero .mk-header + main { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .mk-header { transition: none; } }

/* ── Hero: the photograph, low-left type, a slim bar on the edge ─────────── */
.mk-hero.meklara-hero-panel {
	position: relative;
	/* Full screen. The welcome is the photograph; anything else on the first
	   screen is a distraction from the one thing a visitor came to look at. */
	min-height: 100svh;
	padding: 0;
	display: grid;
	grid-template-rows: 1fr auto;
	background: var(--mk-charcoal);
	isolation: isolate;
}
.mk-hero .meklara-hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.mk-hero .meklara-hero-image { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A moving frame is the same box as a still one; nothing else changes. */
.mk-hero .mk-hero-video { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--mk-charcoal); }
/*
 * The moving welcome. Frames are stacked, only one is opaque, and the one on
 * screen drifts slowly closer — the impression of film, from still photographs
 * the site already publishes. The crossfade is longer than the drift is fast:
 * a hero that moves quickly reads as an advertisement, not as a window.
 */
.mk-hero-frame {
	position: absolute;
	inset: 0;
	display: block;
	/* The first frame is opaque by its own class; without the script the rest
	   simply stack, and the top one is a perfectly good hero. */
	opacity: 0;
	/* The reference's own crossfade, measured: 880ms on this curve. */
	transition: opacity 900ms cubic-bezier(0.20, 0.85, 0.20, 1);
	will-change: opacity;
}
.mk-hero-frame.is-active { opacity: 1; }
/*
 * THE CAMERA MOVES, AND NOT ALWAYS THE SAME WAY.
 *
 * Patrick, 2026-09-22, watching the reference: "vantera is actually panning in
 * to images left, sometimes right, sometimes forward". One zoom direction on
 * every frame reads as a screensaver; a different move per photograph reads as
 * footage. Five moves, assigned by position, so the sequence never repeats a
 * direction twice running: push in, drift left, drift right, rise, and a slow
 * pull back.
 *
 * Each runs for 11s — longer than the 7s a frame is on screen — so a move is
 * never seen to finish and snap.
 */
/*
 * THE MOVE IS A CAMERA MOVE, NOT A NUDGE.
 *
 * Patrick, 2026-09-22: "have the hero images really pan around, like a movie.
 * Not just a few mm." The previous version moved 9–11px and grew from 1.02 to
 * 1.042 — about 2% of the frame over thirteen seconds, which on a phone is
 * literally a few millimetres and reads as a rendering artefact.
 *
 * The distances are PERCENTAGES, so the move is the same fraction of the
 * picture on a 390px phone and a 1440px desktop; pixels would have made the
 * phone almost still.
 *
 * ⛔ THE TRANSLATION MUST STAY INSIDE THE OVERSCAN, or an edge of the photograph
 * swings into view and the hero shows background. A scale of S leaves (S-1)/2
 * of the frame hidden on each side, and because the translate is written inside
 * the scale it is multiplied by S on screen: the limit is x × S ≤ (S-1)/2.
 * At S = 1.18 that allows 7.6%; every move below asks for at most 7%.
 *
 * Each move runs 16s against a 13s dwell, so a frame is replaced before its
 * move can finish and snap. Linear, because a camera on a dolly does not ease
 * in the middle of a shot. Five directions, assigned by position, each starting
 * at a different point so no two frames drift together.
 */
/* will-change only on the frame being shown: promoting all four photographs at
   once costs a compositor layer per full-screen image, which is real memory on
   a phone. The crossfade needs two at a time and gets them. */
.mk-hero--cycling .mk-hero-frame .meklara-hero-image { transform: scale(1.06); }
.mk-hero--cycling .mk-hero-frame.is-active .meklara-hero-image { animation: mk-pan-push 16s linear both; animation-delay: -3s; transform-origin: 50% 58%; will-change: transform; }
/* The order matters: this hero has FOUR photographs, and with the pull-back
   assigned to the fifth position nobody would ever have seen it. Push, left,
   pull, right, rise — four frames already show four different moves. */
.mk-hero--cycling .mk-hero-frame:nth-child(5n + 2).is-active .meklara-hero-image { animation-name: mk-pan-left; animation-delay: -1s; transform-origin: 50% 50%; }
.mk-hero--cycling .mk-hero-frame:nth-child(5n + 3).is-active .meklara-hero-image { animation-name: mk-pan-pull; animation-delay: -2s; transform-origin: 48% 45%; }
.mk-hero--cycling .mk-hero-frame:nth-child(5n + 4).is-active .meklara-hero-image { animation-name: mk-pan-right; animation-delay: -2.5s; transform-origin: 50% 50%; }
.mk-hero--cycling .mk-hero-frame:nth-child(5n + 5).is-active .meklara-hero-image { animation-name: mk-pan-rise; animation-delay: -0.5s; transform-origin: 50% 50%; }

/* A slow dolly in: 4% to 22% of the frame. */
@keyframes mk-pan-push { from { transform: scale(1.04); } to { transform: scale(1.22); } }
/* Across the picture, right to left: 14% of the width travelled, and a lift. */
@keyframes mk-pan-left {
	from { transform: scale(1.18) translate3d(7%, -1.5%, 0); }
	to   { transform: scale(1.18) translate3d(-7%, 1.5%, 0); }
}
/* And the other way, with a slow descent. */
@keyframes mk-pan-right {
	from { transform: scale(1.18) translate3d(-7%, 1.5%, 0); }
	to   { transform: scale(1.18) translate3d(7%, -1.5%, 0); }
}
/* A crane up the face of the picture, closing slightly as it rises. */
/* Starts at 1.17, not 1.14: at 1.14 the rise left six pixels of picture above
   the frame, and six pixels is not a margin, it is a rounding error away from
   a bare edge. */
@keyframes mk-pan-rise {
	from { transform: scale(1.17) translate3d(-2%, 6.5%, 0); }
	to   { transform: scale(1.25) translate3d(2%, -5.5%, 0); }
}
/* And a pull back, the shot that lets a room become a building. */
/*
 * ⛔ A PULL-BACK RUNS OUT OF PICTURE. Ending at scale 1.04 while still offset
 * 2.5% left six pixels of frame with no photograph over it — the coverage check
 * caught it the moment the move was reordered into a position this hero
 * actually reaches. The rule: the offset times the scale must stay under
 * (scale - 1) / 2, so a move that ends small must also end near the centre.
 */
@keyframes mk-pan-pull {
	from { transform: scale(1.26) translate3d(2.5%, 1%, 0); }
	to   { transform: scale(1.08) translate3d(-1.2%, -0.5%, 0); }
}

/*
 * THE FOLD IS AN INVITATION.
 * The reference makes its hero exactly 40px taller than the viewport (72px on a
 * wide screen), so a strip of the next section is always cut off at the bottom
 * and the page asks to be scrolled. Measured: 884px hero in an 844px window.
 */
.mk-hero.meklara-hero-panel { min-height: calc(100svh + 40px); }
@media (min-width: 1025px) { .mk-hero.meklara-hero-panel { min-height: calc(100svh + 72px); } }

/*
 * A photograph arrives rather than appearing.
 * 620ms on the reference's curve, from a hair of scale. It runs on load, not on
 * scroll: there is NO scroll-reveal on the reference site — 518 of 518
 * below-the-fold elements sit at their final state there — and a page that
 * animates as you scroll past it feels busier, not richer.
 */
/*
 * ⛔ GATED ON .mk-js. A stylesheet may hide something only when something else
 * exists to show it again. This rule once ran on pages where the script was not
 * enqueued and left twelve property photographs invisible.
 */
.mk-js .mk-flag-image, .mk-js .mk-story-image, .mk-js .mk-cat-image, .mk-js .mk-dest-image,
.mk-js .mk-mag-image, .mk-js .mk-dev-card-image, .mk-js .meklara-card-image, .mk-js .mk-person-image {
	opacity: 0;
	transform: scale(1.006);
	transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1), transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mk-is-loaded.mk-flag-image, .mk-is-loaded.mk-story-image, .mk-is-loaded.mk-cat-image,
.mk-is-loaded.mk-dest-image, .mk-is-loaded.mk-mag-image, .mk-is-loaded.mk-dev-card-image,
.mk-is-loaded.meklara-card-image, .mk-is-loaded.mk-person-image { opacity: 1; transform: none; }
/* No script, no fade: a page with JavaScript off shows its photographs. */
.no-js .mk-flag-image, .no-js .mk-story-image, .no-js .mk-cat-image, .no-js .mk-dest-image,
.no-js .mk-mag-image, .no-js .mk-dev-card-image, .no-js .meklara-card-image, .no-js .mk-person-image { opacity: 1; transform: none; }

/*
 * Hover, measured: the photograph scales to 1.025 over 1200ms and dims by 1.5%,
 * while the text and the arrow answer in 300ms. Four clocks, nothing above 2.5%.
 * Touch screens get none of it — there is no hover to answer.
 */
@media (hover: hover) {
	.mk-flag-media img, .mk-story-media img, .mk-cat-media img, .mk-dest-media img,
	.mk-mag-media img, .mk-dev-card-media img, .meklara-card-media img {
		transition: transform 1200ms cubic-bezier(0, 0, 0.2, 1), filter 1200ms cubic-bezier(0, 0, 0.2, 1),
			opacity 620ms cubic-bezier(0.22, 1, 0.36, 1);
	}
	a:hover > .mk-flag-media img, a:hover > .mk-story-media img, a:hover > .mk-cat-media img,
	.mk-dest:hover .mk-dest-media img, .mk-mag-item:hover .mk-mag-media img,
	.mk-dev-card:hover .mk-dev-card-media img, .meklara-card:hover .meklara-card-media img,
	.mk-flag:hover .mk-flag-media img, .mk-story:hover .mk-story-media img {
		transform: scale(1.025);
		filter: brightness(0.985);
	}
}
@media (prefers-reduced-motion: reduce) {
	.mk-flag-image, .mk-story-image, .mk-cat-image, .mk-dest-image, .mk-mag-image,
	.mk-dev-card-image, .meklara-card-image, .mk-person-image { opacity: 1; transform: none; transition: none; }
}
@media (prefers-reduced-motion: reduce) {
	/* Asked for less motion: the first photograph, held. No fade, no camera. */
	.mk-hero-frame { transition: none; }
	.mk-hero--cycling .mk-hero-frame .meklara-hero-image,
	.mk-hero--cycling .mk-hero-frame.is-active .meklara-hero-image { transform: none; transition: none; animation: none; }
}
/*
 * THE SCRIM IS A CONTRACT, NOT A TASTE.
 * White type must stay readable over ANY photograph the brokerage publishes — a
 * pale concrete wall as readily as a dusk sky. The old gradient cleared to 5%
 * across the middle, which is exactly where the headline sits on a phone
 * (Patrick's iPhone, 2026-09-22: the headline vanished into a white wall). It is
 * weighted to the bottom, where the copy is, and never fully clears.
 */
.mk-hero.has-image::after {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(to bottom, rgba(10,10,9,.42) 0%, rgba(10,10,9,.12) 26%, rgba(10,10,9,.30) 52%, rgba(10,10,9,.78) 100%);
}
@media (max-width: 900px) {
	/* One column of copy over the whole picture: the floor has to come further up. */
	.mk-hero.has-image::after {
		background: linear-gradient(to bottom, rgba(10,10,9,.52) 0%, rgba(10,10,9,.24) 18%, rgba(10,10,9,.56) 46%, rgba(10,10,9,.86) 100%);
	}
}
.mk-hero-inner { width: 100%; max-width: var(--mk-max); margin-inline: auto; padding: clamp(7rem, 16vh, 11rem) var(--mk-gutter) clamp(2rem, 4vh, 3rem); display: grid; align-content: end; gap: 1.5rem; }
.mk-hero-copy { max-width: 960px; }
.mk-hero-heading.meklara-hero-heading {
	font-family: var(--mk-display);
	font-weight: 500;
	font-size: clamp(3rem, 6.6vw, 5.8rem);
	line-height: 0.98;
	letter-spacing: -0.015em;
	color: #fff;
	margin: 0 0 1.25rem;
	max-width: none;
	text-wrap: balance;
}
.mk-hero-lede.meklara-hero-lede { font-family: var(--mk-body); font-size: clamp(1.02rem, 1.4vw, 1.25rem); line-height: 1.5; color: rgba(255,255,255,.9); max-width: 34ch; margin: 0 0 1.5rem; }
.mk-hero-cta { margin: 0; }
.mk-hero-credit.meklara-hero-credit {
	margin: 0;
	font-size: 0.62rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255,255,255,.52);
	/* One line, whatever the photograph is called. A credit that wraps to two
	   lines over the picture competes with the headline it belongs under. */
	max-width: min(52ch, 100%);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mk-hero-credit a { color: inherit; text-decoration: none; }
/*
 * THE BAR FLOATS ON THE PHOTOGRAPH.
 *
 * Patrick, 2026-09-22: "could this search bar be like floating on top… so that
 * it sits 2 cm above and we see little of the image also below". It used to be
 * the hero's bottom edge — a white slab welded to the top of the next section,
 * which is what makes a page look like a template.
 *
 * So: lifted about two centimetres off the bottom (7vh, which is 76px on a
 * 1080px screen and never less than 24px on a short one), narrower than the
 * page so photograph shows on both sides, rounded, and on glass so the picture
 * carries on behind it.
 */
.mk-hero-bar {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: calc(1140px + 2 * var(--mk-gutter));
	/* About two centimetres on a laptop: 8vh is 72px at 900 and 86px at 1080. */
	margin: 0 auto clamp(1.5rem, 8vh, 5.5rem);
	padding: 0 var(--mk-gutter);
}
.mk-herobar {
	display: flex;
	align-items: stretch;
	background: rgba(255, 255, 255, 0.94);
	border-radius: 14px;
	/* The children's corners are clipped by the container, so the button needs
	   no radius of its own and never disagrees with it. */
	overflow: hidden;
	padding: 0;
	max-width: none;
	border: 0;
	box-shadow: 0 20px 50px -22px rgba(8, 18, 26, 0.55), 0 1px 0 rgba(255, 255, 255, 0.4) inset;
}
@supports (backdrop-filter: blur(8px)) {
	.mk-herobar { background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(18px) saturate(1.2); }
}
.mk-herobar-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); flex: 1 1 auto; min-width: 0; }
/* Slimmer: the label is a whisper above the value, and the pair is 60px tall
   rather than 74. A hairline that stops short of the edges reads lighter than
   a full-height rule. */
.mk-herobar .meklara-field { position: relative; padding: 0.7rem 1.15rem 0.75rem; display: grid; gap: 0.1rem; align-content: center; }
.mk-herobar .meklara-field + .meklara-field::before,
.mk-herobar-fields + .mk-herobar-submit::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: var(--mk-rule); }
.mk-herobar .meklara-field-label { font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mk-muted); }
.mk-herobar select {
	appearance: none; -webkit-appearance: none;
	border: 0; background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%236F6B63' stroke-width='1.3'/></svg>") no-repeat right center;
	padding: 0.05rem 1.1rem 0.05rem 0; font-family: var(--mk-body); font-size: 0.95rem; color: var(--mk-charcoal); width: 100%;
}
.mk-herobar select:focus-visible { outline: 1px solid var(--mk-charcoal); outline-offset: 3px; }
.mk-herobar-submit.mk-button {
	flex: 0 0 auto; margin: 0; border-radius: 0; padding-inline: 1.75rem;
	font-size: 0.72rem; letter-spacing: 0.14em;
}
.mk-herobar-links { display: none; }
/* On a phone the bar is a stacked card 215px tall; it does not also need
   three centimetres of photograph under it. */
@media (max-width: 860px) { .mk-hero-bar { margin-bottom: clamp(1rem, 3.5vh, 2rem); } }

/* ── Data lines: one quiet sentence of numbers ───────────────────────────── */
.mk-dataline {
	display: flex; flex-wrap: wrap;
	gap: 0.5rem 0;
	margin: 1rem 0 0; padding: 0;
	font-family: var(--mk-body);
}
.mk-dataline-cell { display: inline-flex; align-items: baseline; gap: 0.4rem; padding-right: 1.4rem; margin-right: 1.4rem; border-right: 1px solid var(--mk-rule); }
.mk-dataline-cell:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.mk-dataline-cell dd { margin: 0; font-size: 1rem; color: var(--mk-charcoal); font-variant-numeric: tabular-nums; }
.mk-dataline-cell dt { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mk-muted); }
.mk-dataline--lg .mk-dataline-cell dd { font-family: var(--mk-display); font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 500; line-height: 1; }
.mk-dataline--lg .mk-dataline-cell { padding-right: 2rem; margin-right: 2rem; }
p.mk-dataline { display: block; font-size: 0.95rem; color: var(--mk-ink); }

/* ── The flagship ────────────────────────────────────────────────────────── */
.mk-selected { display: grid; gap: var(--mk-sect); }
.mk-flag { display: grid; gap: 1.1rem; }
.mk-flag-head { display: flex; justify-content: space-between; align-items: baseline; }
.mk-flag-head .mk-eyebrow { margin: 0; }
.mk-flag-media { display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--mk-charcoal); }
.mk-flag-image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.2,.6,.2,1); }
.mk-flag:hover .mk-flag-image { transform: scale(1.02); }
.mk-flag-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.5rem clamp(2rem, 5vw, 5rem); align-items: start; padding-top: 0.25rem; }
.mk-flag-title h3 { font-family: var(--mk-display); font-weight: 500; font-size: clamp(2.25rem, 4vw, 3.5rem); line-height: 1; letter-spacing: -0.012em; margin: 0; }
.mk-flag-title h3 a, .mk-story-title a, .mk-cat-title a { color: var(--mk-charcoal); text-decoration: none; }
.mk-flag-title h3 a:hover, .mk-story-title a:hover, .mk-cat-title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.12em; }
.mk-flag-facts .mk-dataline { margin-top: 0; }
.mk-flag-summary, .mk-story-summary, .mk-cat-summary { margin: 1.25rem 0 1.25rem; font-size: 1.02rem; line-height: 1.6; color: var(--mk-ink); max-width: 52ch; }

/* ── Stories: image one side, a narrow column the other ──────────────────── */
.mk-story { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; }
.mk-story--flip .mk-story-media { order: 2; }
.mk-story-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--mk-charcoal); }
.mk-story-image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.2,.6,.2,1); }
.mk-story:hover .mk-story-image { transform: scale(1.02); }
.mk-story-body { display: grid; gap: 0.25rem; padding-bottom: 0.5rem; }
.mk-story-title { font-family: var(--mk-display); font-weight: 500; font-size: clamp(1.9rem, 3vw, 2.75rem); line-height: 1.02; letter-spacing: -0.01em; margin: 0.5rem 0 0; }

/* ── Catalogue: numbered entries, alternating ────────────────────────────── */
.mk-cat { display: grid; gap: var(--mk-sect); }
.mk-cat-item { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1rem clamp(2rem, 5vw, 5rem); align-items: end; position: relative; }
.mk-cat-item--flip .mk-cat-media { order: 2; }
.mk-cat-index { grid-column: 1 / -1; font-size: 0.85rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--mk-rule); margin-bottom: 0.5rem; }
.mk-cat-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--mk-charcoal); }
.mk-cat-image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.2,.6,.2,1); }
.mk-cat-item:hover .mk-cat-image { transform: scale(1.02); }
.mk-cat-body { display: grid; gap: 0.25rem; padding-bottom: 0.25rem; }
.mk-cat-title { font-family: var(--mk-display); font-weight: 500; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.02; letter-spacing: -0.01em; margin: 0; }
.mk-demo-record { font-size: 0.82rem; color: #7A3E3E; margin: 0.5rem 0 0; }

/* Grid card, kept flat for editors who place it */
.mk-dev-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mk-dev-card { display: grid; gap: 0.9rem; }
.mk-dev-card-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--mk-charcoal); }
.mk-dev-card-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-dev-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.mk-dev-card-title { font-family: var(--mk-display); font-weight: 500; font-size: 1.6rem; line-height: 1.05; margin: 0; }
.mk-dev-card-title a { color: var(--mk-charcoal); text-decoration: none; }
.mk-dev-card-place { margin: 0; font-size: 0.88rem; color: var(--mk-muted); }
.mk-pill { font-family: var(--mk-body); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mk-muted); white-space: nowrap; }

/* ── Development detail: a paced narrative ───────────────────────────────── */
.mk-detail { max-width: var(--mk-max); margin-inline: auto; }
.mk-detail-stage { margin: 0 calc(50% - 50vw); width: 100vw; max-width: 100vw; height: min(88vh, 900px); overflow: hidden; background: var(--mk-charcoal); }
.mk-detail-stage-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-detail-stage, .mk-stage { position: relative; }
.mk-detail-stage::after, .mk-stage::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 34%; background: linear-gradient(to bottom, rgba(10,10,9,.45), rgba(10,10,9,0)); pointer-events: none; }
.mk-detail-head { max-width: 920px; padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem); }
.mk-detail-title { font-family: var(--mk-display); font-weight: 500; font-size: clamp(3rem, 6vw, 5.5rem); line-height: 0.98; letter-spacing: -0.015em; margin: 0.5rem 0 1.75rem; }
.mk-source-line { margin: 0.9rem 0 0; font-size: 0.78rem; color: var(--mk-muted); }
.mk-detail-overview { max-width: 640px; font-size: clamp(1.1rem, 1.4vw, 1.25rem); line-height: 1.65; color: var(--mk-ink); }
.mk-detail-overview > p:first-child { margin-top: 0; }
.mk-detail-wide { margin: var(--mk-sect) calc(50% - 50vw) 0; width: 100vw; max-width: 100vw; height: min(70vh, 720px); overflow: hidden; }
.mk-detail-wide-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-detail-wide--short { height: min(56vh, 560px); }
.mk-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: var(--mk-sect) calc(50% - 50vw) 0; width: 100vw; max-width: 100vw; }
.mk-pair-item { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--mk-charcoal); }
.mk-pair-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-dev-tail .mk-section, .mk-section { max-width: var(--mk-measure); margin: var(--mk-sect) 0 0; }
.mk-section h2 { font-family: var(--mk-display); font-weight: 500; font-size: clamp(1.9rem, 3vw, 2.75rem); line-height: 1.05; letter-spacing: -0.008em; margin: 0 0 1.5rem; }
.mk-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 3rem; margin: 0; }
.mk-fact dt { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mk-muted); }
.mk-fact dd { margin: 0.25rem 0 0; font-size: 1.1rem; }
.mk-amenities { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 3rem; }
.mk-amenities li { break-inside: avoid; padding: 0.6rem 0; border-bottom: 1px solid var(--mk-rule); font-size: 0.98rem; }
.mk-stages { list-style: none; margin: 0; padding: 0; }
.mk-stages li { display: grid; grid-template-columns: 5rem 1fr; gap: 1.5rem; padding: 0.85rem 0; border-bottom: 1px solid var(--mk-rule); align-items: baseline; }
.mk-stage-pct { font-family: var(--mk-display); font-size: 1.6rem; font-weight: 500; line-height: 1; }
.mk-docs { list-style: none; margin: 0 0 0.75rem; padding: 0; }
.mk-docs li { padding: 0.6rem 0; border-bottom: 1px solid var(--mk-rule); }
.mk-doc-kind { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mk-muted); margin-right: 0.6rem; }
.mk-area-cta p { font-size: 1.05rem; line-height: 1.6; }
.mk-dev-enquire .meklara-enquiry, .mk-dev-enquire .meklara-enquiry-form, .mk-listing-tail .meklara-enquiry, .mk-listing-tail .meklara-enquiry-form,
.mk-dev-enquire form, .mk-listing-tail form { background: transparent; border: 0; padding: 0; box-shadow: none; }
.mk-dev-enquire .meklara-enquiry h2, .mk-dev-enquire .meklara-enquiry h3 { font-family: var(--mk-display); font-weight: 500; }
.mk-detail .meklara-map, .mk-section .meklara-map { margin: 0 calc(50% - 50vw); width: 100vw; max-width: 100vw; }
.mk-section .meklara-map-canvas { min-height: min(60vh, 560px); }
.mk-section .meklara-map figcaption { max-width: var(--mk-max); margin-inline: auto; padding: 0.75rem var(--mk-gutter) 0; }
.mk-band { margin: var(--mk-sect) calc(50% - 50vw) 0; width: 100vw; max-width: 100vw; background: var(--mk-charcoal); color: #fff; padding: clamp(4rem, 8vw, 7rem) var(--mk-gutter); }
.mk-band .mk-section { margin: 0 auto; max-width: var(--mk-max); }
.mk-band .mk-eyebrow { color: rgba(255,255,255,.65); }
.mk-band-inner { max-width: var(--mk-max); margin-inline: auto; }
.mk-band .mk-chap-mark { border-top-color: rgba(255,255,255,.22); }
.mk-band .mk-chap-name { color: rgba(255,255,255,.62); }
.mk-band .mk-chap-no { color: #D8B98A; }
.mk-band h2, .mk-band .mk-investor-sub, .mk-band .meklara-metric-value, .mk-band .mk-risks { color: #fff; }
.mk-band .meklara-metric-label, .mk-band .mk-risks li, .mk-band .mk-investor-note, .mk-band .meklara-legend { color: rgba(255,255,255,.78); }
.mk-band .meklara-cite a, .mk-band .meklara-legend sup { color: #D8B98A; }
.mk-band .mk-risks li::marker { color: rgba(255,255,255,.4); }

/* ──────────────────────────────────────────────────────────────────────────
 * THE DETAIL'S CHAPTERS
 *
 * A GROUND is a full-bleed colour; a CHAPTER is a numeral in the margin with
 * the section beside it. Both belong to the plugin, because a connector cannot
 * borrow the host theme's band classes and must look composed under any theme.
 *
 * The bleed works from here and not from inside a section: calc(50% - 50vw)
 * resolves against the element's own containing block, so the same declaration
 * inside a 760px column lands 292px off the left of the screen.
 * ────────────────────────────────────────────────────────────────────────── */
.mk-ground { margin: 0 calc(50% - 50vw); width: 100vw; max-width: 100vw; padding-block: clamp(3.5rem, 7vw, 6rem); }
.mk-ground--paper { background: var(--mk-canvas); }
.mk-ground--white { background: var(--meklara-paper, #fff); }
.mk-ground-inner { max-width: var(--mk-max); margin-inline: auto; padding-inline: var(--mk-gutter); }
/* What follows a ground brings its own air; the ground already paid for it. */
.mk-ground + .mk-strip, .mk-ground + .mk-pair, .mk-ground + .mk-detail-wide,
.mk-ground + .mk-band, .mk-ground + .mk-detail-map, .mk-ground + .mk-ground { margin-top: 0; }

.mk-chap { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, var(--mk-measure)); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.mk-chap + .mk-chap { margin-top: clamp(3rem, 6vw, 5rem); }
.mk-chap-mark { display: flex; flex-direction: column; gap: 0.4rem; margin: 0; padding-top: 0.9rem; border-top: 1px solid var(--mk-rule); }
.mk-chap-no { font-family: var(--mk-display); font-size: 1rem; letter-spacing: 0.02em; color: var(--mk-accent); }
.mk-chap-name { font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mk-muted); }
.mk-chap-mark--row { flex-direction: row; align-items: baseline; gap: 0.9rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.mk-area-cta { border-top: 1px solid var(--mk-rule); padding-top: 1.5rem; }
.mk-area-cta h3 { font-family: var(--mk-display); font-weight: 500; font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.15; margin: 0 0 0.5rem; }
.mk-chap-body > .mk-section { max-width: none; margin-top: 0; }
.mk-chap-body > .mk-section + .mk-section { margin-top: clamp(2rem, 4vw, 3rem); }
.mk-chap--row { display: block; }
.mk-chap--row .mk-chap-mark { border-top: 1px solid var(--mk-rule); padding-top: 0.9rem; }
.mk-ground--flow .mk-chap { max-width: var(--mk-measure); margin-inline: auto; }
@media (max-width: 860px) {
	.mk-chap { grid-template-columns: 1fr; gap: 0.9rem; }
	.mk-chap-mark { flex-direction: row; align-items: baseline; gap: 0.75rem; }
}

/* The map at the width of the page, lifted out of the reading column. */
.mk-detail-map { margin: 0 calc(50% - 50vw); width: 100vw; max-width: 100vw; }
.mk-detail .mk-detail-map .meklara-map { margin: 0; width: 100%; max-width: 100%; }
.mk-detail-map .meklara-map-canvas { min-height: min(60vh, 560px); }
.mk-detail-map .meklara-map figcaption { max-width: var(--mk-max); margin-inline: auto; padding: 0.75rem var(--mk-gutter) 0; }

/* Progressive disclosure for the secondary matter inside a chapter. */
.mk-disclose { border-top: 1px solid var(--mk-rule); margin-top: 1.75rem; }
.mk-disclose-summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.95rem 0; cursor: pointer; list-style: none; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mk-muted); }
.mk-disclose-summary::-webkit-details-marker { display: none; }
.mk-disclose-summary:hover { color: var(--mk-ink); }
.mk-disclose-mark { font-size: 1.2rem; line-height: 1; color: var(--mk-accent); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.mk-disclose[open] .mk-disclose-mark { transform: rotate(45deg); }
.mk-disclose-body { padding-bottom: 0.75rem; }
@media (prefers-reduced-motion: reduce) { .mk-disclose-mark { transition: none; } }

/* ── Metrics as research figures ─────────────────────────────────────────── */
.mk-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 2rem clamp(1.5rem, 3vw, 3rem); margin: 1.5rem 0 1rem; }
.meklara-metric { display: grid; gap: 0.35rem; align-content: start; min-width: 0; }
/* A figure wraps at a space or after an en dash, never inside a number:
   "€2,450,00 / 0" is not a smaller font, it is a different amount. */
.meklara-metric-value { font-family: var(--mk-display); font-weight: 500; font-size: clamp(2rem, 3vw, 2.9rem); line-height: 0.95; letter-spacing: -0.01em; color: var(--mk-charcoal); font-variant-numeric: tabular-nums; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.meklara-metric-label { font-family: var(--mk-body); font-size: 0.85rem; line-height: 1.4; color: var(--mk-muted); max-width: 20ch; }
.meklara-cite { font-family: var(--mk-body); font-size: 0.42em; font-weight: 400; vertical-align: super; margin-left: 0.2em; letter-spacing: 0; }
.meklara-cite a { color: var(--mk-accent); text-decoration: none; }
.meklara-cite a:hover { text-decoration: underline; }
.meklara-legend { margin: 1.25rem 0 0; font-family: var(--mk-body); font-size: 0.78rem; color: var(--mk-muted); display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; }
.meklara-legend sup { color: var(--mk-accent); font-size: 0.85em; margin-right: 0.15em; }
.meklara-legend-sep { color: var(--mk-rule); }
.mk-investor-sub { font-family: var(--mk-body); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mk-muted); margin: 2.5rem 0 0.25rem; }
.mk-risks { margin: 0.75rem 0 0; padding: 0 0 0 1.1rem; display: grid; gap: 0.5rem; font-size: 0.98rem; line-height: 1.6; max-width: 60ch; }
.mk-investor-note { font-size: 0.82rem; margin-top: 1.5rem; max-width: 60ch; }
.mk-demo-tag { display: none; }

/* Sources & methodology: numbered, quiet, credible. */
.meklara-sources { max-width: 920px; margin: var(--mk-sect) 0 0; padding-top: 1.5rem; border-top: 1px solid var(--mk-rule); }
.meklara-sources-heading { font-family: var(--mk-body); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mk-muted); margin: 0 0 1rem; }
.meklara-sources-demo { font-size: 0.85rem; color: var(--mk-ink); margin: 0 0 1.25rem; max-width: 62ch; }
.meklara-sources-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.meklara-source { display: grid; grid-template-columns: 2.5rem 1fr; gap: 0.75rem; font-size: 0.84rem; line-height: 1.55; }
.meklara-source-n { font-family: var(--mk-body); color: var(--mk-accent); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.meklara-source-body p { margin: 0; }
.meklara-source-title strong { font-weight: 500; color: var(--mk-charcoal); }
.meklara-source-publisher, .meklara-source-meta { color: var(--mk-muted); }
.meklara-source-method { color: var(--mk-ink); margin-top: 0.15rem !important; }

/* ── Market intelligence: a page of research ─────────────────────────────── */
.mk-market { background: var(--mk-charcoal); color: #fff; margin-top: var(--mk-sect); }
.mk-market-inner { max-width: var(--mk-max); margin-inline: auto; padding: clamp(4rem, 8vw, 7rem) var(--mk-gutter); }
.mk-market-rule { display: flex; justify-content: space-between; padding-bottom: 1.25rem; border-bottom: 1px solid rgba(255,255,255,.18); }
.mk-market-rule .mk-eyebrow { margin: 0; }
.mk-market-rule--foot { border-bottom: 0; border-top: 1px solid rgba(255,255,255,.18); padding: 1.25rem 0 0; margin-top: clamp(2rem, 4vw, 3rem); }
.mk-market-heading { font-family: var(--mk-display); font-weight: 500; font-size: clamp(2.6rem, 5.4vw, 5rem); line-height: 1; letter-spacing: -0.012em; margin: clamp(2rem, 4vw, 3rem) 0 clamp(2rem, 4vw, 3rem); color: #fff; max-width: 18ch; }
.mk-metrics--dark .meklara-metric-value { color: #fff; }
.mk-metrics--dark .meklara-metric-label { color: rgba(255,255,255,.72); }
.mk-metrics--dark .meklara-cite a, .mk-market .meklara-legend sup { color: #D8B98A; }
.mk-market .meklara-legend { color: rgba(255,255,255,.7); margin: 0; }
.mk-metrics--editorial { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), max-content)); gap: 2rem clamp(3rem, 6vw, 5rem); margin: 0 0 clamp(2rem, 4vw, 3rem); }
.mk-metrics--editorial .meklara-metric-value { font-size: clamp(3rem, 5.6vw, 5.25rem); }
.mk-market-text { font-family: var(--mk-body); font-size: 1.05rem; line-height: 1.65; color: rgba(255,255,255,.85); max-width: 54ch; margin: 0 0 1.5rem; }

/* ── Explore: one large map, destinations as entries ─────────────────────── */
.mk-explore { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.mk-explore-heading { font-family: var(--mk-display); font-weight: 500; font-size: clamp(2.4rem, 4.4vw, 4rem); line-height: 1.02; letter-spacing: -0.01em; margin: 0; }
.mk-explore-map .meklara-map { margin: 0 calc(50% - 50vw); width: 100vw; max-width: 100vw; }
.mk-explore-map .meklara-map-canvas { min-height: min(72vh, 640px); }
.mk-explore-map .meklara-map figcaption { max-width: var(--mk-max); margin-inline: auto; padding: 0.75rem var(--mk-gutter) 0; }
.mk-dests { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem clamp(2rem, 4vw, 4rem); }
.mk-dest { display: grid; gap: 0.5rem; padding-top: 1.25rem; border-top: 1px solid var(--mk-rule); }
.mk-dest-name { font-family: var(--mk-display); font-weight: 500; font-size: clamp(1.6rem, 2.2vw, 2rem); line-height: 1.05; margin: 0; }
.mk-dest-name a { color: var(--mk-charcoal); text-decoration: none; }
.mk-dest-name a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.12em; }
.mk-dest-text { margin: 0; font-size: 0.98rem; line-height: 1.55; color: var(--mk-ink); }
.mk-dest-facts { margin: 0; font-size: 0.8rem; color: var(--mk-muted); }

/* ── Insights: a magazine ────────────────────────────────────────────────── */
.mk-mag { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 4rem); }
.mk-mag-item { display: grid; gap: 1rem; align-content: start; padding-top: 1.25rem; border-top: 1px solid var(--mk-rule); }
.mk-mag-item--lead { grid-column: 1 / -1; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 4vw, 4rem); align-items: end; border-top: 0; padding-top: 0; }
.mk-mag-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--mk-charcoal); }
.mk-mag-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-mag-body { display: grid; gap: 0.6rem; }
.mk-mag-meta { margin: 0; font-family: var(--mk-body); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mk-muted); }
.mk-mag-title { font-family: var(--mk-display); font-weight: 500; font-size: clamp(1.6rem, 2.4vw, 2.25rem); line-height: 1.05; margin: 0; }
.mk-mag-item--lead .mk-mag-title { font-size: clamp(2.2rem, 3.6vw, 3.25rem); }
.mk-mag-title a { color: var(--mk-charcoal); text-decoration: none; }
.mk-mag-title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.12em; }
.mk-mag-deck { margin: 0; font-size: 0.98rem; line-height: 1.55; color: var(--mk-ink); max-width: 46ch; }

/* A heading that only assistive technology reads. An archive that jumps from
   its h1 straight to the h3 on a card leaves a hole in the ladder. */
.mk-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ── The whole card is the target ─────────────────────────────────────────
 * A headline link is between 17px and 36px tall on a phone, and it was the
 * only thing on these cards a thumb could press. The title's link is
 * stretched over its card: same destination, same one accessible name, and
 * the target becomes the card. The media link and the Read link point at the
 * same page, so nothing is lost behind it.
 * ───────────────────────────────────────────────────────────────────────── */
.mk-mag-item, .mk-dev-card { position: relative; }
.mk-mag-title a::after, .mk-dev-card-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.mk-mag-item .mk-more, .mk-dev-card .mk-more { position: relative; z-index: 2; }

/* ── The guide hub ────────────────────────────────────────────────────────
 * One guide, in chapters, built from the guides it introduces. The steps are
 * each guide's own headings and the figures are its own list items, so this
 * stylesheet only has to make them readable.
 * ───────────────────────────────────────────────────────────────────────── */
.mk-guide-contents { max-width: var(--mk-measure); margin: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(2rem, 4vw, 3rem); }
/* On a wide template the contents sit under the rail's column, with the
   chapter bodies, so the page has one left edge and not two. */
.mk-guide-contents--rail { margin-left: calc(9rem + clamp(1.5rem, 4vw, 4rem)); }
@media (max-width: 860px) { .mk-guide-contents--rail { margin-left: 0; } }
.mk-guide-toc { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.mk-guide-toc a { display: flex; gap: 1rem; align-items: baseline; min-height: 44px; padding: 0.7rem 0; border-top: 1px solid var(--mk-rule); text-decoration: none; color: var(--mk-charcoal); font-family: var(--mk-display); font-size: clamp(1.05rem, 1.4vw, 1.3rem); }
.mk-guide-toc li:last-child a { border-bottom: 1px solid var(--mk-rule); }
.mk-guide-toc a:hover { color: var(--mk-accent); }
.mk-guide-toc-no { font-family: var(--mk-body); font-size: 0.78rem; letter-spacing: 0.08em; color: var(--mk-accent); }
.mk-guide-sect h2 a { color: inherit; text-decoration: none; }
.mk-guide-sect h2 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.12em; }
.mk-guide-deck { font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.6; margin: 0 0 clamp(1.5rem, 3vw, 2rem); }
.mk-guide-steps { counter-reset: mkstep; list-style: none; margin: 0 0 clamp(1.5rem, 3vw, 2rem); padding: 0; }
.mk-guide-steps li { counter-increment: mkstep; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0.75rem; padding: 0.8rem 0; border-top: 1px solid var(--mk-rule); line-height: 1.4; }
.mk-guide-steps li:last-child { border-bottom: 1px solid var(--mk-rule); }
.mk-guide-steps li::before { content: counter( mkstep, decimal-leading-zero ); font-family: var(--mk-display); font-size: 0.9rem; color: var(--mk-accent); }
/* A rule, not a filled box: the callout sits on two different grounds. */
.mk-guide-facts { list-style: none; margin: 0 0 0.75rem; padding: 0.35rem 0 0.35rem 1.35rem; border-left: 2px solid var(--mk-accent); display: grid; gap: 0.55rem; }
.mk-guide-facts li { font-size: 0.95rem; line-height: 1.45; }
.mk-guide-facts-note { margin: 0 0 clamp(1.5rem, 3vw, 2rem); font-size: 0.72rem; letter-spacing: 0.05em; color: var(--mk-muted); }

/* ── The publication index ────────────────────────────────────────────────
 * Three weights: one lead, two seconds, then the run of the archive. The
 * subjects and the pager are links, so a page of 258 articles can be shared
 * and crawled, and works with scripting off.
 * ───────────────────────────────────────────────────────────────────────── */
.mk-mag-cats { display: flex; flex-wrap: wrap; gap: 0 clamp(1.25rem, 2.5vw, 2.25rem); border-bottom: 1px solid var(--mk-rule); margin-bottom: clamp(2rem, 4vw, 3rem); }
.mk-mag-cat { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; padding: 0 0 0.75rem; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mk-muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.mk-mag-cat:hover { color: var(--mk-ink); }
.mk-mag-cat.is-current { color: var(--mk-ink); border-bottom-color: var(--mk-accent); }
.mk-mag-cat-count { font-size: 0.68rem; letter-spacing: 0.04em; color: var(--mk-muted); }

.mk-mag-item--second { grid-template-columns: minmax(0, 1fr); }
.mk-mag-item--second .mk-mag-title { font-size: clamp(1.4rem, 2vw, 1.85rem); }
.mk-mag-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 3.5vw, 3rem) clamp(1.5rem, 3vw, 2.5rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.mk-mag-grid .mk-mag-item { padding-top: 1rem; }
.mk-mag-item--small .mk-mag-media { aspect-ratio: 4 / 3; }
.mk-mag-item--small .mk-mag-title { font-size: clamp(1.05rem, 1.35vw, 1.28rem); line-height: 1.15; }
/* No photograph to show: the headline takes the room the picture would have. */
.mk-mag-item--text .mk-mag-title { font-size: clamp(1.3rem, 1.8vw, 1.6rem); }
.mk-mag-item--text .mk-mag-body { border-left: 2px solid var(--mk-accent); padding-left: 1rem; }

.mk-pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 1.25rem; border-top: 1px solid var(--mk-rule); }
.mk-pager-link { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--mk-charcoal); }
.mk-pager-link:hover { color: var(--mk-accent); }
.mk-pager-link.is-off { color: var(--mk-rule); }
.mk-pager-where { margin: 0; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mk-muted); text-align: center; }
@media (max-width: 900px) { .mk-mag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
	.mk-mag-grid { grid-template-columns: minmax(0, 1fr); }
	.mk-pager { flex-direction: column; align-items: stretch; text-align: center; gap: 0.25rem; }
}
.mk-article .mk-article-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.mk-article .mk-mag-meta { gap: 0.6rem; }
.mk-article .mk-mag-meta a { color: inherit; text-decoration: none; }
.mk-article-image { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.mk-article-image img { width: 100%; height: auto; display: block; }
.mk-prose { font-size: clamp(1.05rem, 1.3vw, 1.15rem); line-height: 1.7; }
.mk-prose h2 { font-family: var(--mk-display); font-weight: 500; font-size: clamp(1.8rem, 2.6vw, 2.4rem); line-height: 1.1; margin: 2.5rem 0 0.75rem; }

/* ── The close ───────────────────────────────────────────────────────────── */
.mk-close { margin-top: var(--mk-sect); padding: clamp(5rem, 10vw, 9rem) var(--mk-gutter); }
.mk-close--dark { background: var(--mk-charcoal); color: #fff; }
.mk-close-inner { max-width: var(--mk-max); margin-inline: auto; display: grid; gap: 1.5rem; }
.mk-close-heading { font-family: var(--mk-display); font-weight: 500; font-size: clamp(2.6rem, 5.4vw, 5rem); line-height: 1; letter-spacing: -0.012em; margin: 0; max-width: 16ch; }
.mk-close--dark .mk-close-heading { color: #fff; }
.mk-close-text { font-family: var(--mk-body); font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.6; max-width: 46ch; margin: 0; }
.mk-close--dark .mk-close-text { color: rgba(255,255,255,.82); }
.mk-close p:last-child { margin: 0.5rem 0 0; }

/* ── Compare table: hairlines only ───────────────────────────────────────── */
.mk-compare-wrap { overflow-x: auto; margin-top: 2rem; }
.mk-compare { width: 100%; border-collapse: collapse; font-size: 0.94rem; min-width: 640px; }
.mk-compare th, .mk-compare td { text-align: left; padding: 0.9rem 1.25rem 0.9rem 0; border-bottom: 1px solid var(--mk-rule); vertical-align: top; }
.mk-compare thead th { font-family: var(--mk-display); font-weight: 500; font-size: 1.35rem; line-height: 1.1; }
.mk-compare thead th a { color: var(--mk-charcoal); text-decoration: none; }
.mk-compare tbody th { font-family: var(--mk-body); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mk-muted); font-weight: 500; width: 11rem; }

/* ── Footer: large wordmark, compact columns ────────────────────────────── */
.mk-footer { margin-top: 0; padding: clamp(4rem, 8vw, 7rem) var(--mk-gutter) 2rem; background: var(--mk-canvas); border-top: 1px solid var(--mk-rule); }
.mk-footer .mk-footer-wordmark, .mk-footer .mk-footer-wordmark a { font-family: var(--mk-display); font-weight: 500; font-size: clamp(3rem, 8vw, 7rem); line-height: 0.9; letter-spacing: -0.02em; }
.mk-footer .mk-footer-wordmark { margin: 0 0 clamp(2.5rem, 5vw, 4rem); }
.mk-footer-wordmark a { text-decoration: none; color: var(--mk-charcoal); }
.mk-footer-grid { gap: 2.5rem clamp(2rem, 5vw, 5rem); padding-top: 1.5rem; border-top: 1px solid var(--mk-rule); }
.mk-footer-col { min-width: 10rem; }
.mk-footer-col--note { max-width: 30ch; }
.mk-footer-label { margin: 0 0 0.9rem; font-family: var(--mk-body); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mk-muted); }
.mk-footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.mk-footer-list a { font-family: var(--mk-body); font-size: 0.95rem; color: var(--mk-charcoal); text-decoration: none; }
.mk-footer-list a:hover { text-decoration: underline; }
.mk-footer-note { margin: 0 0 0.5rem; font-size: 0.85rem; line-height: 1.55; color: var(--mk-ink); }
.mk-footer-demo { color: var(--mk-muted); }
.mk-footer-legal { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.25rem; border-top: 1px solid var(--mk-rule); font-size: 0.78rem; color: var(--mk-muted); gap: 1rem; }
.mk-footer-legal p { margin: 0; }
.mk-footer-legal a { color: inherit; text-decoration: none; }

/* ── Property detail: photograph first, then a line of facts ─────────────── */
.mk-stage { margin: 0 calc(50% - 50vw); width: 100vw; max-width: 100vw; height: min(84vh, 860px); overflow: hidden; background: var(--mk-charcoal); }
.mk-stage-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-listing-head { max-width: 920px; padding: clamp(3rem, 6vw, 5rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.mk-listing-place { margin: 0; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mk-accent); }
.mk-listing-title { font-family: var(--mk-display); font-weight: 500; font-size: clamp(2.6rem, 5vw, 4.5rem); line-height: 1; letter-spacing: -0.012em; margin: 0.75rem 0 1rem; }
.mk-listing-price { font-family: var(--mk-display); font-weight: 500; font-size: clamp(1.75rem, 2.6vw, 2.4rem); margin: 0 0 1rem; font-variant-numeric: tabular-nums; }
.mk-listing .mk-pair { margin-top: clamp(2rem, 4vw, 3rem); }
.mk-more-photos { margin-top: 1.5rem; }
.mk-more-photos summary { cursor: pointer; font-size: 0.9rem; color: var(--mk-ink); padding: 0.75rem 0; border-bottom: 1px solid var(--mk-rule); list-style: none; }
.mk-more-photos summary::-webkit-details-marker { display: none; }
.mk-more-photos summary::after { content: "  +"; color: var(--mk-muted); }
.mk-more-photos[open] summary::after { content: "  −"; }
.mk-photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-top: 1rem; }
.mk-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.mk-listing-tail { max-width: 760px; margin-top: var(--mk-sect); }

/* ── Properties archive: a thin toolbar, flat cards ──────────────────────── */
.meklara-search { background: transparent; border: 0; padding: 0; }
.meklara-search-fields { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--mk-rule); }
.meklara-field-label { font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mk-muted); }
.meklara-search select, .meklara-search input[type="text"] {
	appearance: none; -webkit-appearance: none;
	border: 0; border-bottom: 1px solid var(--mk-rule); border-radius: 0; background: transparent;
	padding: 0.5rem 0; font-family: var(--mk-body); font-size: 1rem; color: var(--mk-charcoal); width: 100%;
}
.meklara-search select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%236F6B63' stroke-width='1.3'/></svg>"); background-repeat: no-repeat; background-position: right center; padding-right: 1.2rem; }
.meklara-search select:focus-visible, .meklara-search input:focus-visible { outline: 0; border-bottom-color: var(--mk-charcoal); }
.meklara-search-actions { display: flex; align-items: center; gap: 1.5rem; margin-top: 1.25rem; }
.meklara-search .meklara-button { background: var(--mk-charcoal); color: #fff; border: 0; border-radius: 0; padding: 0.85rem 1.5rem; font-family: var(--mk-body); font-size: 0.88rem; font-weight: 500; }
.meklara-search-reset { font-size: 0.85rem; color: var(--mk-muted); text-decoration: none; border-bottom: 1px solid var(--mk-rule); }
.meklara-count { font-family: var(--mk-body); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mk-muted); }
.meklara-chips { margin: 1.5rem 0 0.75rem; gap: 0.5rem; }
.meklara-chip { border-radius: 0; background: transparent; border: 1px solid var(--mk-rule); font-family: var(--mk-body); }
.meklara-chip:hover { border-color: var(--mk-charcoal); background: transparent; }
.meklara-sort select { border: 0; border-bottom: 1px solid var(--mk-rule); background: transparent; border-radius: 0; font-family: var(--mk-body); }
.meklara-sort-apply { background: transparent; border: 1px solid var(--mk-rule); border-radius: 0; padding: 0.5rem 0.9rem; font-size: 0.8rem; font-family: var(--mk-body); }
.meklara-card { background: transparent; border: 0; box-shadow: none; }
.meklara-card-frame { border-radius: 0; background: var(--mk-charcoal); }
.meklara-card-body { gap: 0.3rem; padding-top: 0.25rem; }
.meklara-card-place { font-size: 0.68rem; letter-spacing: 0.14em; color: var(--mk-muted); }
.meklara-card-title { font-family: var(--mk-display); font-weight: 500; font-size: 1.5rem; line-height: 1.05; }
.meklara-card-price { font-family: var(--mk-body); font-size: 1rem; font-variant-numeric: tabular-nums; }
.meklara-card-facts { font-size: 0.8rem; }
.meklara-empty { border: 0; background: transparent; padding: 2rem 0; border-top: 1px solid var(--mk-rule); }

/* Guides and other pages that still use the boxed area-market section */
.mk-areamarket { max-width: none; }

/* ── Responsive art direction ────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.mk-market--photo .mk-market-inner { grid-template-columns: minmax(0, 1fr); padding-left: var(--mk-gutter); padding-right: var(--mk-gutter); }
	.mk-market--photo .mk-market-media { order: 0; margin: 0 calc(-1 * var(--mk-gutter)); }
	.mk-market--photo .mk-market-image { min-height: 0; height: min(52vh, 480px); }
	.mk-market--photo .mk-market-copy { padding-top: clamp(2.5rem, 5vw, 4rem); }
	.mk-story-detail { width: min(50%, 280px); }
	.mk-flag-body, .mk-story, .mk-cat-item { grid-template-columns: minmax(0, 1fr); }
	.mk-story--flip .mk-story-media, .mk-cat-item--flip .mk-cat-media { order: 0; }
	.mk-dests { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mk-mag-item--lead { grid-template-columns: minmax(0, 1fr); }
	.mk-dev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.meklara-search-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mk-header-actions { display: none; }
}
@media (max-width: 768px) {
	/* The phone is the main screen (Joakim, 2026-09-22), so the welcome fills it there too. */
	.mk-hero.meklara-hero-panel { min-height: 100svh; }
	.mk-herobar { flex-direction: column; }
	.mk-herobar-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/*
	 * Two columns and two rows. The line BETWEEN the rows is drawn once, across
	 * the whole block, because a per-cell rule inset from each cell's own edges
	 * leaves a gap in the middle and reads as two broken stubs. The line between
	 * the columns stays per-cell, where it belongs.
	 *
	 * Three class names deep on purpose: the theme's own cell rule is two deep
	 * and loads after this file, so anything shallower loses the padding.
	 */
	.mk-herobar .mk-herobar-fields .meklara-field { padding: 0.8rem 1rem; }
	.mk-herobar-fields {
		background-image: linear-gradient(var(--mk-rule), var(--mk-rule));
		background-size: calc(100% - 2rem) 1px;
		background-position: 1rem 50%;
		background-repeat: no-repeat;
	}
	.mk-herobar .meklara-field + .meklara-field::before { display: none; }
	.mk-herobar .meklara-field:nth-child(even)::before {
		display: block; content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 1px; background: var(--mk-rule);
	}
	.mk-herobar-submit.mk-button { width: 100%; min-height: 52px; }
	.mk-detail-stage, .mk-stage { height: min(62vh, 560px); }
	.mk-detail-wide { height: min(48vh, 420px); }
	.mk-mag { grid-template-columns: minmax(0, 1fr); }
	.mk-dests { grid-template-columns: minmax(0, 1fr); }
	.mk-facts { grid-template-columns: minmax(0, 1fr); }
	.mk-amenities { columns: 1; }
	.mk-pair { grid-template-columns: minmax(0, 1fr); }
	.mk-strip { grid-template-columns: minmax(0, 1fr); }
	.mk-strip-item { aspect-ratio: 4 / 3; }
	.mk-story-detail { display: none; }
	.meklara-source-credits { columns: 1; }
	.mk-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.meklara-search-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mk-dev-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
	.mk-hero-heading.meklara-hero-heading { font-size: clamp(2rem, 8.6vw, 2.9rem); }
	/*
	 * "new-development" and "Sotogrande" are wider than a 353px measure at
	 * display size. Hyphenation is the typographic answer; a word running off
	 * its own column, which is the default, is not.
	 */
	.mk-h1, .mk-h2, .mk-hero-heading.meklara-hero-heading, .mk-market-heading,
	.mk-close-heading, .mk-explore-heading, .mk-team-heading, .mk-mag-title,
	.mk-dest-name, .mk-cat-title, .mk-story-title { hyphens: auto; overflow-wrap: break-word; }
	.mk-hero-inner { padding-top: 6rem; }
	.mk-dataline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1rem; }
	.mk-dataline-cell { border-right: 0; padding-right: 0; margin-right: 0; flex-direction: column; align-items: flex-start; gap: 0.1rem; }
	.mk-dataline--lg .mk-dataline-cell dd { font-size: 1.6rem; }
	.mk-metrics, .mk-metrics--editorial { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
	.meklara-metric-value { font-size: 1.7rem; }
	.mk-metrics--editorial .meklara-metric-value { font-size: 2.4rem; }
	.mk-market-heading, .mk-close-heading { font-size: clamp(2.2rem, 11vw, 2.8rem); }
	.mk-explore-map .meklara-map-canvas { min-height: 360px; }
	.mk-footer-wordmark { font-size: clamp(2.4rem, 13vw, 3.2rem); }
	.mk-market-rule { flex-direction: column; gap: 0.25rem; }
}

/* ── Photographic pass (2026-09-21) ──────────────────────────────────────── */
/* Numerals: Newsreader's figures must read as data beside Inter's. */
.mk-page, .mk-header, .mk-footer, .meklara-sources { font-variant-numeric: lining-nums; }
.mk-dataline--lg .mk-dataline-cell dd, .meklara-metric-value, .mk-stage-pct { font-variant-numeric: lining-nums tabular-nums; }
.mk-h1, .mk-h2, .mk-hero-heading.meklara-hero-heading, .mk-flag-title h3, .mk-story-title, .mk-cat-title, .mk-market-heading, .mk-close-heading, .mk-explore-heading, .mk-detail-title, .mk-mag-title, .mk-dest-name { font-optical-sizing: auto; }
.mk-hero-heading.meklara-hero-heading { letter-spacing: -0.02em; }
.mk-market-heading, .mk-close-heading { letter-spacing: -0.02em; }

/*
 * The research band as a spread: figures left, a photograph bleeding right.
 *
 * ⛔ A DESKTOP LAYOUT, AND NOW IT SAYS SO. This was the default, with the
 * stacking override further UP the file, so the later rule won at every width
 * and a phone got the desktop split: a 142px ribbon of photograph 1,375px tall
 * beside crushed type (Patrick's iPhone, 2026-09-22). Written as min-width, the
 * phone keeps the stacked layout however the file is later reordered.
 */
@media (min-width: 1025px) {
	.mk-market--photo .mk-market-inner {
		max-width: none;
		display: grid;
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: clamp(2rem, 5vw, 5rem);
		align-items: stretch;
		padding: 0 0 0 max(var(--mk-gutter), calc((100vw - var(--mk-max)) / 2 + var(--mk-gutter)));
	}
	.mk-market--photo .mk-market-copy { padding: clamp(4rem, 8vw, 7rem) 0; min-width: 0; }
	.mk-market--photo .mk-market-media { order: 2; margin: 0; min-width: 0; }
	.mk-market--photo .mk-market-image { width: 100%; height: 100%; min-height: 560px; object-fit: cover; display: block; }
	.mk-market--photo .mk-market-heading { max-width: 14ch; }
}
/* Below that: photograph full-bleed across the band, then the copy under it. */
@media (max-width: 1024px) {
	.mk-market--photo .mk-market-inner { max-width: none; display: block; }
	.mk-market--photo .mk-market-media { margin: 0 calc(-1 * var(--mk-gutter)); }
	.mk-market--photo .mk-market-image { width: 100%; height: min(46vh, 380px); object-fit: cover; display: block; }
	.mk-market--photo .mk-market-copy { padding-top: clamp(2.5rem, 5vw, 4rem); }
}

/* Destinations: a photograph, then the name, then a line or two. */
.mk-dests { gap: 3rem clamp(1.5rem, 3vw, 3rem); }
.mk-dest { border-top: 0; padding-top: 0; gap: 0.6rem; align-content: start; }
.mk-dest-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--mk-charcoal); margin-bottom: 0.65rem; }
.mk-dest-image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.2,.6,.2,1); }
.mk-dest:hover .mk-dest-image { transform: scale(1.02); }
.mk-dest-name { font-size: clamp(1.5rem, 2vw, 1.85rem); }

/* Stories: a small second photograph under the column of type. */
.mk-story-body { align-content: end; }
.mk-story-detail { display: block; width: min(62%, 320px); aspect-ratio: 4 / 3; overflow: hidden; margin-top: 2rem; background: var(--mk-charcoal); }
.mk-story-detail-image { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Detail page: a strip of three portrait crops between the sections. */
.mk-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: var(--mk-sect) calc(50% - 50vw) 0; width: 100vw; max-width: 100vw; }
.mk-strip-item { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--mk-charcoal); }
.mk-strip-image { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The coast map: our serif names, a hairline ring per town. */
.meklara-map--coast .meklara-map-canvas { min-height: min(72vh, 640px); background: #ece7dc; }
.meklara-map--coast .area-map-label { font-family: var(--mk-display); font-size: 1.05rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: #2a2724; background: transparent; border: 0; box-shadow: none; text-shadow: 0 0 6px #ece7dc, 0 0 2px #ece7dc; }
.meklara-map--coast .area-map-label::before { display: none; }
.meklara-map--coast .leaflet-control-attribution { background: rgba(236,231,220,.8); color: #6f6b63; font-family: var(--mk-body); font-size: 0.62rem; }

/* Sources: photograph credits under the imagery entry. */
.meklara-source-credits { margin: 0.5rem 0 0; padding-left: 1rem; font-size: 0.8rem; line-height: 1.5; color: var(--mk-muted); columns: 2; column-gap: 2rem; }
.meklara-source-credits li { break-inside: avoid; margin: 0 0 0.2rem; }
.meklara-source-credits a { color: inherit; }

/* Magazine: the lead story's photograph is the wide one; the rest 4:3. */
.mk-mag-item:not(.mk-mag-item--lead) .mk-mag-media { aspect-ratio: 4 / 3; }

/* ── Private selection (/p/<secret>) ─────────────────────────────────────── */
.mk-sel { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.mk-sel-head { display: grid; gap: 1rem; max-width: 60rem; }
.mk-sel-head .mk-h1 { max-width: 20ch; }
.mk-sel-advisor { display: flex; align-items: center; gap: 0.9rem; margin-top: 0.5rem; }
.mk-sel-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; display: block; }
.mk-sel-advisor-name { margin: 0; font-family: var(--mk-display); font-size: 1.25rem; font-weight: 500; line-height: 1.1; }
.mk-sel-advisor-title { margin: 0.15rem 0 0; font-size: 0.85rem; color: var(--mk-muted); }
.mk-sel-count { margin: 0.5rem 0 0; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mk-muted); }
.mk-sel-list { display: grid; gap: clamp(3rem, 6vw, 5rem); }
.mk-sel-item { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1rem clamp(2rem, 5vw, 5rem); align-items: end; }
.mk-sel-item--flip .mk-sel-media { order: 2; }
.mk-sel-item .mk-index { grid-column: 1 / -1; padding-bottom: 0.75rem; border-bottom: 1px solid var(--mk-rule); }
.mk-sel-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--mk-charcoal); }
.mk-sel-image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.2,.6,.2,1); }
.mk-sel-item:hover .mk-sel-image { transform: scale(1.02); }
.mk-sel-body { display: grid; gap: 0.6rem; }
.mk-sel-title { font-family: var(--mk-display); font-weight: 500; font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.02; letter-spacing: -0.01em; margin: 0; }
.mk-sel-title a { color: var(--mk-charcoal); text-decoration: none; }
.mk-sel-title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.12em; }
.mk-sel-price { margin: 0; font-family: var(--mk-display); font-size: 1.5rem; font-weight: 500; font-variant-numeric: lining-nums tabular-nums; }
.mk-sel-price--lg { font-size: clamp(1.8rem, 2.6vw, 2.4rem); }
.mk-sel-reasons { list-style: none; margin: 0.25rem 0 0; padding: 0; display: grid; gap: 0.35rem; font-size: 0.95rem; }
.mk-sel-reasons li { padding-left: 1rem; position: relative; }
.mk-sel-reasons li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.4rem; height: 1px; background: var(--mk-accent); }
.mk-sel-reason-dim { color: var(--mk-muted); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; margin-right: 0.35rem; }
.mk-sel-avail { margin: 0; font-size: 0.82rem; color: var(--mk-muted); }
.mk-sel-avail-warn { color: #7A3E3E; }
.mk-sel-react { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.5rem 0 0.25rem; }
.mk-sel-react form { margin: 0; }
.mk-sel-react-btn { font-family: var(--mk-body); font-size: 0.85rem; padding: 0.55rem 0.95rem; border: 1px solid var(--mk-rule); background: transparent; color: var(--mk-charcoal); border-radius: 999px; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.mk-sel-react-btn:hover { border-color: var(--mk-charcoal); }
.mk-sel-react-btn.is-chosen { background: var(--mk-charcoal); color: #fff; border-color: var(--mk-charcoal); }
.mk-sel-react-btn[disabled] { opacity: 0.6; }
.mk-sel-react-note { flex-basis: 100%; margin: 0.25rem 0 0; font-size: 0.85rem; color: var(--mk-muted); }
.mk-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.mk-sel-notice { margin: 0; padding: 1rem 1.25rem; background: var(--mk-sand, #EFEBE3); font-size: 0.95rem; border-left: 2px solid var(--mk-charcoal); }
.mk-sel-notice--error { border-left-color: #7A3E3E; }
.mk-sel-expiry { max-width: 64ch; margin: 0; font-size: 0.85rem; line-height: 1.6; color: var(--mk-muted); padding-top: 1.5rem; border-top: 1px solid var(--mk-rule); }
.mk-sel-call { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--mk-rule); }
.mk-sel-call h2 { font-family: var(--mk-display); font-weight: 500; font-size: clamp(1.8rem, 2.8vw, 2.4rem); line-height: 1.05; margin: 0 0 0.75rem; }
.mk-sel-call p { margin: 0; max-width: 40ch; line-height: 1.6; }
.mk-sel-form { display: grid; gap: 0.9rem; margin: 0; }
.mk-sel-form h4 { font-family: var(--mk-display); font-weight: 500; font-size: 1.35rem; margin: 1.5rem 0 0; }
.mk-sel-form label { display: grid; gap: 0.35rem; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mk-muted); }
.mk-sel-form input, .mk-sel-form textarea { font-family: var(--mk-body); font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--mk-charcoal); padding: 0.7rem 0.85rem; border: 1px solid var(--mk-rule); background: #fff; width: 100%; }
.mk-sel-form textarea { min-height: 5.5rem; resize: vertical; }
.mk-sel-form .mk-button { justify-self: start; }
.mk-sel-form-note { margin: 0; font-size: 0.8rem; color: var(--mk-muted); }
.mk-sel-back { margin: 0; }
.mk-sel-position { margin: 0; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mk-muted); }
.mk-sel-stage { margin: 0 calc(50% - 50vw); width: 100vw; max-width: 100vw; height: min(70vh, 720px); overflow: hidden; background: var(--mk-charcoal); }
.mk-sel-stage-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-sel-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.mk-sel-gallery-item { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--mk-charcoal); }
.mk-sel-gallery-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-sel-columns { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.mk-sel-main .mk-section:first-child { margin-top: 0; }
.mk-sel-aside { position: sticky; top: 6rem; display: grid; gap: 0.75rem; padding: 1.5rem; background: var(--mk-sand, #EFEBE3); }
.mk-sel-aside-h { font-family: var(--mk-display); font-weight: 500; font-size: 1.5rem; margin: 0; }
.mk-sel-hint { margin: 0; font-size: 0.9rem; color: var(--mk-muted); }
.mk-sel--invalid { padding-top: clamp(2rem, 6vw, 5rem); gap: 1.25rem; max-width: 52rem; }

/* The access form on /private/ */
.mk-access { display: grid; gap: 0.75rem; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--mk-sand, #EFEBE3); margin: 1.5rem 0; }
.mk-access-heading { font-family: var(--mk-display); font-weight: 500; font-size: clamp(1.6rem, 2.4vw, 2.1rem); margin: 0; }
.mk-access-text { margin: 0; max-width: 56ch; line-height: 1.55; }
.mk-access-label { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mk-muted); }
.mk-access-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.mk-access-input { flex: 1 1 280px; font-family: var(--mk-body); font-size: 1rem; padding: 0.75rem 0.9rem; border: 1px solid var(--mk-rule); background: #fff; color: var(--mk-charcoal); }
.mk-access-error { margin: 0; font-size: 0.9rem; color: #7A3E3E; }

@media (max-width: 1024px) {
	.mk-sel-item, .mk-sel-columns, .mk-sel-call { grid-template-columns: minmax(0, 1fr); }
	.mk-sel-item--flip .mk-sel-media { order: 0; }
	.mk-sel-aside { position: static; }
}
@media (max-width: 768px) {
	.mk-sel-stage { height: min(52vh, 460px); }
	.mk-sel-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── The people ──────────────────────────────────────────────────────────── */

.mk-team { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.mk-team-heading {
	font-family: var(--mk-display);
	font-weight: 500;
	font-size: clamp(2.2rem, 4vw, 3.4rem);
	line-height: 1.04;
	letter-spacing: -0.01em;
	margin: 0;
	max-width: 22ch;
}
/*
 * Four across on the wide measure, two on a tablet, one on a phone — the grid
 * decides, because a person is a portrait and a portrait squeezed into a
 * quarter of a phone screen is a thumbnail of a face.
 */
.mk-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: clamp(1.75rem, 3vw, 2.5rem); }
.mk-person { display: grid; gap: 1rem; align-content: start; }
.mk-person-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--mk-canvas); }
.mk-person-image { width: 100%; height: 100%; object-fit: cover; display: block; }
/*
 * No photograph is an ordinary state, and it should not SHOUT. A black tile per
 * person reads as five holes in the page; paper with a rule and the initials in
 * ink reads as a portrait that has not been taken yet.
 */
.mk-person--initials .mk-person-media { display: grid; place-items: center; background: var(--mk-canvas); border: 1px solid var(--mk-rule); }
.mk-person-mark { font-family: var(--mk-display); font-size: clamp(2.5rem, 5vw, 3.6rem); letter-spacing: 0.02em; color: var(--mk-muted); }
.mk-person-body { display: grid; gap: 0.3rem; }
.mk-person-name { font-family: var(--mk-display); font-weight: 500; font-size: 1.28rem; line-height: 1.2; margin: 0; }
.mk-person-role { margin: 0; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mk-muted); }
.mk-person-langs { margin: 0.25rem 0 0; font-size: 0.9rem; color: var(--mk-muted); }
.mk-person-reach { margin: 0.45rem 0 0; font-size: 0.9rem; }
.mk-person-reach a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--mk-rule); }
.mk-person-reach a:hover { border-bottom-color: currentColor; }

/* ── The phone is the main screen ────────────────────────────────────────── */
/*
 * Joakim, 2026-09-22: "everyone uses only mobile"; Patrick, on the reference
 * site: "dropdowns even on mobile worked, not some white page".
 *
 * Three things were wrong and none of them was decoration. A 29px select and a
 * 17px link are below the 44px a finger actually hits. WordPress's navigation
 * overlay is an undesigned white sheet in the middle of a dark editorial site.
 * And nothing on the page acknowledged a tap.
 */
@media (max-width: 900px) {
	/* 44px minimum on anything a finger is meant to hit. */
	.meklara-field select,
	.meklara-field input,
	.mk-herobar select,
	.mk-herobar input { min-height: 44px; font-size: 1rem; }
	.mk-header a,
	.mk-header-actions a { display: inline-flex; align-items: center; min-height: 44px; }
	/* A 16px field never triggers Safari's zoom-on-focus; a 14px one always does. */
	.meklara-field select, .meklara-field input, .mk-herobar select, .mk-herobar input, .meklara-input { font-size: max(16px, 1rem); }
}



/* ── Arriving ────────────────────────────────────────────────────────────── */
/*
 * Measured on masproperty.vantera.io, 2026-09-22, and matched here: a block
 * rises 28px and fades over 0.9s on cubic-bezier(0.22, 1, 0.36, 1); its
 * photograph comes from 70% opacity and 1.08 scale over 1.1s and 1.4s. Items
 * inside one section are staggered by about 220ms.
 *
 * ⛔ Their own catalogue site has NO scroll reveal at all (518 of 518
 * below-the-fold elements sit at their final state). So this is deliberately
 * small: section-level only, once per element, never on a card grid where forty
 * things would pop one after another.
 */
.mk-js .mk-reveal { opacity: 0; transform: translateY(28px); }
.mk-reveal.is-revealed {
	opacity: 1;
	transform: none;
	transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1), transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mk-reveal:nth-of-type(2).is-revealed { transition-delay: 220ms; }
.mk-reveal:nth-of-type(3).is-revealed { transition-delay: 440ms; }
.mk-reveal:nth-of-type(n + 4).is-revealed { transition-delay: 560ms; }
.mk-js .mk-reveal img { opacity: 0.7; transform: scale(1.08); }
.mk-reveal.is-revealed img {
	opacity: 1;
	transform: none;
	transition: opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1), transform 1400ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* No script, no observer, no reveal: the page is simply there. */
.no-js .mk-reveal, .no-js .mk-reveal img { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.mk-reveal, .mk-reveal img, .mk-reveal.is-revealed, .mk-reveal.is-revealed img {
		opacity: 1; transform: none; transition: none;
	}
}

/* ── Card discipline ─────────────────────────────────────────────────────── */
/*
 * MEASURED, 2026-09-22: insight cards varied by 294px in one row and
 * development entries by 202px on a phone. A grid whose cards are all different
 * heights reads as a page that was generated, not composed.
 *
 * The photograph already has a fixed ratio; what varies is prose. So prose gets
 * a bounded block: two lines for a title, three for a deck. Nothing is
 * truncated in the data — only in the card, which is a summary by definition.
 */
.mk-clamp-2, .mk-mag-item:not(.mk-mag-item--lead) .mk-mag-title, .mk-cat-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}
.mk-clamp-3, .mk-mag-item:not(.mk-mag-item--lead) .mk-mag-deck, .mk-cat-text, .mk-cat-summary {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}
/* Every card in a row starts at the same line and fills the same height. */
.mk-mag { align-items: stretch; }
.mk-mag-item:not(.mk-mag-item--lead) { align-content: start; }
.mk-cat-item { align-items: start; }

/* ── Touch targets ───────────────────────────────────────────────────────── */
/*
 * Measured: pagination digits at 7×14 and footer links at 35×15. A link a
 * finger cannot hit is not a link. The text stays the size it should be; the
 * hit area grows around it.
 */
.meklara-page, .page-numbers, .wp-block-query-pagination-numbers a, .wp-block-query-pagination-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	text-decoration: none;
}
.wp-block-query-pagination-next, .wp-block-query-pagination-previous { display: inline-flex; align-items: center; min-height: 44px; }

/* ── Filters: a bar above 900px, a sheet below ───────────────────────────── */
.meklara-filters-open,
.meklara-filters-close,
.meklara-search-head { display: none; }

@media (min-width: 901px) {
	/* The desktop bar is what it always was; the drawer markup is inert here. */
	.meklara-search { display: block; }
}

@media (max-width: 900px) {
	.meklara-filters-open {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		min-height: 44px;
		padding: 0 1.1rem;
		border: 1px solid var(--mk-rule);
		background: #fff;
		color: inherit;
		font-family: inherit;
		font-size: 0.625rem;
		font-weight: 600;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		cursor: pointer;
	}
	.meklara-filters-count {
		display: inline-grid;
		place-items: center;
		min-width: 20px;
		height: 20px;
		padding: 0 6px;
		background: var(--mk-charcoal);
		color: #fff;
		font-size: 0.7rem;
		letter-spacing: 0;
	}
	/* The sheet: off-screen until asked for, then the bottom two-thirds. */
	.meklara-search {
		position: fixed;
		inset: auto 0 0 0;
		z-index: 200;
		max-height: 86dvh;
		overflow-y: auto;
		transform: translateY(101%);
		transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
		background: #fff;
		box-shadow: 0 -24px 60px rgba(13, 27, 36, 0.28);
		padding: 0 1.25rem 1.5rem;
	}
	.meklara-search.is-open { transform: translateY(0); }
	.meklara-search-head {
		position: sticky;
		top: 0;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 1rem 0 0.75rem;
		background: #fff;
		border-bottom: 1px solid var(--mk-rule);
	}
	.meklara-search-title { margin: 0; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
	.meklara-filters-close {
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		margin-right: -0.5rem;
		border: 0;
		background: transparent;
		font-size: 1.6rem;
		line-height: 1;
		cursor: pointer;
	}
	.meklara-search-fields { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.meklara-search-actions { position: sticky; bottom: 0; background: #fff; padding-top: 1rem; }
	.meklara-search-actions .meklara-button { width: 100%; min-height: 48px; }
	@media (prefers-reduced-motion: reduce) {
		.meklara-search { transition: none; }
	}
}

/* ── The gallery ─────────────────────────────────────────────────────────── */
/*
 * The photographs ARE the property page. One large frame, a rail of the next
 * few underneath, and a count that opens the rest. The rail is native
 * scroll-snap: it swipes on a phone and scrolls on a desktop with no script.
 */
.mk-gallery { display: grid; gap: 0.5rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.mk-gallery-stage { margin: 0; }
.mk-gallery-open, .mk-gallery-thumb {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: var(--mk-charcoal);
	cursor: zoom-in;
	overflow: hidden;
}
.mk-gallery-open { aspect-ratio: 3 / 2; }
.mk-gallery-image, .mk-gallery-thumb-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-gallery-rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 44%;
	gap: 0.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}
.mk-gallery-rail::-webkit-scrollbar { display: none; }
.mk-gallery-thumb { aspect-ratio: 3 / 2; scroll-snap-align: start; }
@media (min-width: 901px) {
	.mk-gallery-rail { grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; overflow: visible; }
}
.mk-gallery-count { margin: 0.25rem 0 0; }

/* The lightbox: one photograph, black, and the way out always visible. */
.mk-lightbox {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: none;
	place-items: center;
	background: rgba(8, 14, 18, 0.96);
	padding: clamp(1rem, 4vw, 3rem);
}
.mk-lightbox.is-open { display: grid; }
.mk-lightbox-figure { margin: 0; max-width: min(96vw, 1600px); max-height: 82dvh; }
.mk-lightbox-image { max-width: 100%; max-height: 82dvh; object-fit: contain; display: block; }
.mk-lightbox-close, .mk-lightbox-prev, .mk-lightbox-next {
	position: absolute;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
}
.mk-lightbox-close { top: 0.5rem; right: 0.5rem; }
.mk-lightbox-prev { left: 0.25rem; top: 50%; transform: translateY(-50%); }
.mk-lightbox-next { right: 0.25rem; top: 50%; transform: translateY(-50%); }
.mk-lightbox-counter {
	position: absolute;
	bottom: 1rem;
	margin: 0;
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.625rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* ── The property page's own chapters ────────────────────────────────────── */
.mk-listing-head { display: grid; gap: 0.35rem; max-width: 62ch; }
.mk-listing-title { font-family: var(--mk-display); font-weight: 500; font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.06; letter-spacing: -0.012em; margin: 0.1rem 0 0; }
.mk-listing-price { font-size: clamp(1.1rem, 1.6vw, 1.4rem); font-weight: 500; margin: 0.15rem 0 0.35rem; }
/* A fact strip: each fact in its own cell, so a missing one leaves no orphan. */
.mk-factstrip { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; list-style: none; margin: 0.35rem 0 0; padding: 0; }
.mk-factstrip li { font-size: 0.9rem; color: var(--mk-muted); }
.mk-factstrip li + li { padding-left: 1rem; border-left: 1px solid var(--mk-rule); }
.mk-listing-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.25rem 0 0; }
.mk-button--solid { background: var(--mk-charcoal); color: #fff; border: 1px solid var(--mk-charcoal); text-decoration: none; }
.mk-button--line { background: transparent; color: inherit; border: 1px solid currentColor; text-decoration: none; }
.mk-button--solid:hover { background: #16303f; border-color: #16303f; }
.mk-related .meklara-collection { margin-top: 1.5rem; }
.mk-enquiry-band { scroll-margin-top: 6rem; }

@media (prefers-reduced-motion: reduce) {
	.mk-gallery-rail { scroll-behavior: auto; }
}

/* ── The advisory band ───────────────────────────────────────────────────── */
/*
 * One conversation, four pages. A photograph across the top so the page is not
 * a form on paper, then what this conversation is beside the form itself.
 */
.mk-advisory { background: var(--mk-canvas); }
.mk-advisory-media { margin: 0; }
.mk-advisory-image { width: 100%; height: min(42vh, 380px); object-fit: cover; display: block; }
.mk-advisory-inner {
	max-width: var(--mk-max);
	margin-inline: auto;
	padding: clamp(2.5rem, 5vw, 4rem) var(--mk-gutter);
	display: grid;
	gap: clamp(2rem, 4vw, 4rem);
}
@media (min-width: 901px) {
	/* Copy narrow, form wide: a form is the work, the copy is the welcome. */
	.mk-advisory-inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
}
.mk-advisory-copy { display: grid; gap: 0.75rem; align-content: start; }
.mk-advisory-heading { margin: 0; }
.mk-advisory-text { margin: 0; max-width: 42ch; line-height: 1.62; }
.mk-advisory-contact { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.35rem; font-size: 0.92rem; }
.mk-advisory-contact a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--mk-rule); }
.mk-advisory-contact a:hover { border-bottom-color: currentColor; }

/* ── Reachable with a thumb ───────────────────────────────────────────────
 * Measured at 390px: the search selects were 24px tall and the phone and
 * email links 19px. A filter and a telephone number are the two things a
 * visitor on a phone actually presses.
 * ───────────────────────────────────────────────────────────────────────── */
@media (pointer: coarse), (max-width: 860px) {
	.meklara-search select, .meklara-search input[type="text"],
	.meklara-enquiry-form select, .meklara-enquiry-form input, .meklara-enquiry-form button { min-height: 44px; }
	.mk-advisory-contact a { display: inline-flex; align-items: center; min-height: 44px; }
	.mk-advisory-contact { gap: 0; }
}
.mk-advisory-form .meklara-enquiry { background: #fff; padding: clamp(1.5rem, 3vw, 2.25rem); }
.mk-advisory-form .meklara-enquiry h2 { margin-top: 0; }

/* ── Provenance ──────────────────────────────────────────────────────────── */
/*
 * The evidence is the product's advantage and stays complete; what changes is
 * how loudly it speaks on a customer page. Collapsed it is one quiet line; open
 * it is the full list, with its anchors intact so a footnote still lands.
 */
.mk-provenance { border-top: 1px solid var(--mk-rule); padding-top: var(--mk-sect); }
.mk-provenance-details { border: 0; }
/* A fictional source, marked where its title is, not three lines below it. */
.meklara-source-demo { display: inline-block; margin-left: 0.4rem; padding: 0.1rem 0.45rem; border: 1px solid var(--mk-rule); border-radius: 2px; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mk-muted); vertical-align: 0.1em; }
.meklara-source-publisher { font-style: normal; }
.mk-provenance-summary {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mk-muted);
	cursor: pointer;
	list-style: none;
}
.mk-provenance-summary::-webkit-details-marker { display: none; }
.mk-provenance-summary:hover { color: var(--mk-ink); }
.mk-provenance-mark { font-size: 0.95rem; letter-spacing: 0; }
.mk-provenance-body { padding-top: 1rem; }
/* A demo warning is a disclosure, not a detail: it shows whether or not the
   list is open. */
.meklara-sources-demo { margin: 0 0 0.75rem; font-size: 0.85rem; color: #7A3E3E; }

/* ── Destinations ────────────────────────────────────────────────────────── */
/*
 * The first few places are destinations, not entries in a directory: a tall
 * photograph with the name on it. Everything after them stays the compact grid,
 * so the page has a hierarchy instead of 24 identical tiles.
 */
.mk-destinations { display: grid; gap: clamp(0.75rem, 1.5vw, 1rem); margin-bottom: var(--mk-sect); }
@media (min-width: 700px) { .mk-destinations { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); } }
.mk-destination { position: relative; display: block; overflow: hidden; text-decoration: none; color: #fff; }
.mk-destination-media { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--mk-charcoal); }
@media (min-width: 1025px) { .mk-destination-media { aspect-ratio: 3 / 4; } }
.mk-destination-image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1200ms cubic-bezier(0, 0, 0.2, 1); }
@media (hover: hover) { .mk-destination:hover .mk-destination-image { transform: scale(1.03); } }
.mk-destination-body {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	display: grid;
	gap: 0.2rem;
	padding: clamp(1rem, 2vw, 1.5rem);
	background: linear-gradient(to top, rgba(10, 21, 28, 0.86), rgba(10, 21, 28, 0.32) 55%, rgba(10, 21, 28, 0));
}
.mk-destination-name { font-family: var(--mk-display); font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.1; }
.mk-destination-count { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.76); }

/* ═══════════════════════════════════════════════════════════════════════════
 * ⛔ THESE BELONG TO THE PLUGIN, BECAUSE THE PLUGIN EMITS THEM.
 *
 * They were written into the THEME while the bands were being designed, so
 * `meklara/locations` and `meklara/development-strip` rendered completely
 * unstyled on any other theme — two of our own blocks, broken by our own
 * boundary. A component's styles live wherever its markup is produced.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── The Locations band ──────────────────────────────────────────────────── */
.mk-locations { background: var(--mk-charcoal); color: #fff; }
.mk-locations-inner {
	max-width: var(--mk-max);
	margin-inline: auto;
	padding: clamp(3rem, 6vw, 3.5rem) var(--mk-gutter);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 1025px) {
	/* Heading left, photographs right — the shape they use. */
	.mk-locations-inner { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); align-items: start; gap: clamp(2rem, 4vw, 4rem); }
}
.mk-locations-heading {
	font-family: var(--mk-display);
	font-weight: 500;
	font-size: clamp(1.7rem, 2.4vw, 2.1rem);
	line-height: 1.12;
	margin: 0;
	color: #fff;
}
.mk-locations-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(0.75rem, 1.4vw, 1rem); }
.mk-location { position: relative; display: block; overflow: hidden; text-decoration: none; color: #fff; }
.mk-location-media { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #0a151c; }
@media (min-width: 700px) { .mk-location-media { aspect-ratio: 4 / 5; } }
.mk-location-image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1200ms cubic-bezier(0, 0, 0.2, 1); }
@media (hover: hover) { .mk-location:hover .mk-location-image { transform: scale(1.03); } }
/* The label sits ON the photograph, over a floor dark enough to read against. */
.mk-location-body {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	display: grid;
	gap: 0.15rem;
	padding: clamp(1rem, 2vw, 1.4rem);
	background: linear-gradient(to top, rgba(10, 21, 28, 0.86) 0%, rgba(10, 21, 28, 0.38) 55%, rgba(10, 21, 28, 0) 100%);
}
.mk-location-name { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.mk-location-country { font-size: 0.82rem; color: rgba(255, 255, 255, 0.72); }
.mk-location-go { margin-top: 0.5rem; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.88); }

/* ── The developments strip ──────────────────────────────────────────────── */
.mk-devstrip { background: var(--mk-charcoal); color: #fff; }
.mk-devstrip-inner {
	max-width: var(--mk-max);
	margin-inline: auto;
	padding: clamp(3rem, 6vw, 3.5rem) var(--mk-gutter);
	display: grid;
	gap: clamp(1.75rem, 3vw, 2.5rem);
}
@media (min-width: 1025px) {
	.mk-devstrip-inner { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 4vw, 3.5rem); }
}
.mk-devstrip-heading { font-family: var(--mk-display); font-weight: 500; font-size: clamp(1.7rem, 2.4vw, 2.1rem); line-height: 1.14; margin: 0.6rem 0 0.9rem; color: #fff; max-width: 14ch; }
.mk-devstrip-text { font-size: 0.92rem; line-height: 1.6; color: rgba(255, 255, 255, 0.76); margin: 0 0 1.5rem; max-width: 34ch; }
/* On a phone the tiles are a rail you swipe, not a grid you scroll past. */
.mk-devstrip-tiles {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 62%;
	gap: 0.6rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	margin-inline: calc(-1 * var(--mk-gutter));
	padding-inline: var(--mk-gutter);
}
.mk-devstrip-tiles::-webkit-scrollbar { display: none; }
@media (min-width: 1025px) {
	.mk-devstrip-tiles { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); overflow: visible; margin-inline: 0; padding-inline: 0; }
}
.mk-devtile { position: relative; display: block; scroll-snap-align: start; overflow: hidden; text-decoration: none; color: #fff; }
.mk-devtile-media { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #0a151c; }
.mk-devtile-image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1200ms cubic-bezier(0, 0, 0.2, 1); }
@media (hover: hover) { .mk-devtile:hover .mk-devtile-image { transform: scale(1.03); } }
.mk-devtile-body {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	display: grid;
	gap: 0.2rem;
	padding: clamp(0.9rem, 1.6vw, 1.2rem);
	background: linear-gradient(to top, rgba(10, 21, 28, 0.88) 0%, rgba(10, 21, 28, 0.36) 60%, rgba(10, 21, 28, 0) 100%);
}
.mk-devtile-place { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.mk-devtile-name { font-family: var(--mk-display); font-size: 1.15rem; line-height: 1.18; }
.mk-devtile-from { font-size: 0.82rem; color: rgba(255, 255, 255, 0.82); }

/* A ghost button for an ink band: hairline, square, micro-label. */
.mk-button--ghost {
	display: inline-block;
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: #fff;
	text-decoration: none;
	padding: 1rem 1.6rem;
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	transition: background-color 300ms cubic-bezier(0, 0, 0.2, 1), border-color 300ms cubic-bezier(0, 0, 0.2, 1);
}
.mk-button--ghost:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.72); }

/* ── The destination page ────────────────────────────────────────────────── */
/*
 * A reading column inside a wide band: the prose on an area page is writing,
 * and writing wants 68 characters, not 1,600 pixels.
 */
.mk-read { max-width: var(--mk-read); }
.mk-read > * + * { margin-top: 1rem; }
.mk-destination-page .mk-read p { font-size: 1.02rem; line-height: 1.68; }

/* ── Long-form reading ───────────────────────────────────────────────────── */
/*
 * An article is writing. The measure, the rhythm between paragraphs and the
 * size of a heading inside the prose are the whole design; everything else is
 * the frame around it.
 */
.mk-prose > * + * { margin-top: 1.15rem; }
.mk-prose p { font-size: 1.05rem; line-height: 1.72; }
.mk-prose h2 { font-family: var(--mk-display); font-weight: 500; font-size: clamp(1.5rem, 2.4vw, 1.9rem); line-height: 1.2; margin-top: 2.5rem; }
.mk-prose h3 { font-family: var(--mk-display); font-weight: 500; font-size: 1.25rem; line-height: 1.25; margin-top: 2rem; }
.mk-prose ul, .mk-prose ol { padding-left: 1.2rem; }
.mk-prose li + li { margin-top: 0.4rem; }
.mk-prose blockquote {
	margin: 2rem 0;
	padding-left: 1.25rem;
	border-left: 2px solid var(--mk-rule);
	font-family: var(--mk-display);
	font-size: 1.2rem;
	line-height: 1.45;
}
.mk-prose figure, .mk-prose img { margin-block: 2rem; }
.mk-article-head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.mk-article-title { max-width: 20ch; }
.mk-article-deck { max-width: 54ch; font-size: 1.12rem; line-height: 1.55; color: var(--mk-muted); }
.mk-article-image { margin-block: clamp(1.5rem, 3vw, 2.5rem); }

/*
 * A "Read →" in a card is a link a finger aims at. Measured at 27px tall on a
 * phone; the words stay the same size and the hit area grows around them.
 */
@media (max-width: 900px) {
	.mk-more, .mk-mag-more, .mk-cat-body .mk-more, .meklara-card-link .mk-more {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}

/* ── The developments catalogue ──────────────────────────────────────────── */
/*
 * Stage tabs are LINKS: a real URL per stage, shareable, crawlable, and working
 * with JavaScript off. The count beside each one is the honest number of
 * projects at that stage, and a stage with none is not offered at all.
 */
.mk-devcat { display: grid; gap: var(--mk-sect); }
.mk-devcat-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var(--mk-rule);
}
.mk-devcat-tab {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 44px;
	padding: 0 0.9rem;
	border: 1px solid var(--mk-rule);
	color: inherit;
	text-decoration: none;
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	transition: background-color 300ms cubic-bezier(0, 0, 0.2, 1), border-color 300ms cubic-bezier(0, 0, 0.2, 1), color 300ms cubic-bezier(0, 0, 0.2, 1);
}
.mk-devcat-tab:hover { border-color: var(--mk-charcoal); }
.mk-devcat-tab.is-current { background: var(--mk-charcoal); border-color: var(--mk-charcoal); color: #fff; }
.mk-devcat-count { font-size: 0.7rem; letter-spacing: 0; opacity: 0.7; }
.mk-devcat-count-line { margin: -0.75rem 0 0; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mk-muted); }
/* Three across on a wide screen, two on a tablet, one on a phone — the grid
   decides, so a project never becomes a thumbnail. */
.mk-dev-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }