/*
Theme Name: Meklara Luxe
Theme URI: https://meklara.com
Author: Meklara
Description: An optional reference theme for the Meklara WordPress connector — a calm, editorial, image-led presentation layer for a brokerage website. The connector plugin does not depend on this theme; any block theme can replace it.
Version: 0.7.2
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: meklara-luxe
Tags: full-site-editing, block-patterns, real-estate, editorial
*/

/*
 * Block themes take their design tokens from theme.json. This file carries only
 * what theme.json cannot express: the handful of components the Meklara plugin
 * renders server-side, and the editorial details that make the site feel like a
 * brokerage rather than a plugin demo.
 *
 * ⛔ The plugin must never depend on a class defined here. These are styles for
 * markup the plugin emits, not behaviour the plugin needs.
 */

/* ── The navigation overlay ──────────────────────────────────────────────── */
/*
 * ⛔ THIS LIVES IN THE THEME, NOT THE PLUGIN.
 * It paints WordPress's own navigation block, which is the THEME's furniture.
 * The plugin must adapt to whatever theme a brokerage installs (Patrick,
 * 2026-09-22), so it may style its own sections and nothing else. When the
 * Meklara plugin runs on Kadence or Twenty Twenty-Five, that theme's menu stays
 * that theme's menu.
 */
/*
 * The menu is part of the site, not a browser artefact. Ink, not white; the
 * display face at a size worth tapping; and it arrives rather than appearing.
 */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--mk-charcoal) !important;
	color: #fff;
	padding: clamp(1.5rem, 6vw, 3rem) var(--mk-gutter);
	animation: mk-menu-in 260ms cubic-bezier(0.2, 0, 0, 1) both;
}
.wp-block-navigation__responsive-container.is-menu-open a { color: #fff; text-decoration: none; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--mk-display);
	font-size: clamp(1.6rem, 7vw, 2.4rem);
	line-height: 1.22;
	letter-spacing: -0.01em;
	padding-block: 0.35rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close { max-width: var(--mk-max); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { color: #fff; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { background: transparent; border: 0; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: 1.05rem; font-family: var(--mk-body); color: rgba(255,255,255,.75); }
@keyframes mk-menu-in {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation__responsive-container.is-menu-open { animation: none; }
}
/* A finger-sized control, whatever the viewport. */
@media (max-width: 900px) {
	.wp-block-navigation__responsive-container-open,
	.wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; display: grid; place-items: center; }
}

/* ── This theme's own voice ──────────────────────────────────────────────── */
/*
 * The Meklara plugin asks the ACTIVE THEME for its typography, palette and
 * measures before falling back to its own. That is what lets the connector sit
 * on Kadence or Twenty Twenty-Five without repainting them — and it means this
 * theme must state its voice, rather than relying on the plugin to carry it.
 */
:root {
	--meklara-display: "Newsreader", "Iowan Old Style", Georgia, serif;
	--meklara-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	/* Measured from the Mas Property build, 2026-09-22. */
	--meklara-ink: #182F3F;        /* navy text */
	--meklara-canvas: #F8F6F4;     /* warm paper band */
	--meklara-paper: #ffffff;
	--meklara-graphite: #0D1B24;   /* ink navy band */
	--meklara-muted: #6A7783;
	--meklara-rule: #E3DED8;
	--meklara-accent: #9A7B4F;
	--meklara-charcoal: #0D1B24;
	
	
	
}

/* ═══════════════════════════════════════════════════════════════════════════
 * THE MAS PROPERTY DESIGN SYSTEM — tokens
 *
 * One scale for type, one ladder for space, one set of ratios for photographs,
 * one restrained palette. Every component reads from here; no component is
 * allowed to invent a size. That is the whole point: a future page generated by
 * Meklara composes these primitives and needs nobody to redesign the site.
 *
 * Read with docs/implementation/maswp.md. The grammar is drawn from the
 * reference builds; the values are ours.
 * ═══════════════════════════════════════════════════════════════════════════ */
:root {
	/* ── Type. Fluid, so there are no breakpoint stacks for text. ───────── */
	--mas-face-display: var(--meklara-display);
	--mas-face-text: var(--meklara-body);

	--mas-type-display-xl: clamp(2.6rem, 6vw, 4.6rem);
	--mas-type-display-l: clamp(2.1rem, 4vw, 3.2rem);
	--mas-type-display-m: clamp(1.6rem, 2.6vw, 2.1rem);
	--mas-type-title: clamp(1.1rem, 1.6vw, 1.35rem);
	--mas-type-body-l: clamp(1.02rem, 1.2vw, 1.15rem);
	--mas-type-body: 1rem;
	--mas-type-meta: 0.85rem;
	--mas-type-label: 0.625rem;          /* 10px, the micro-label */

	--mas-leading-display: 1.02;
	--mas-leading-heading: 1.14;
	--mas-leading-text: 1.62;
	--mas-tracking-display: -0.018em;
	--mas-tracking-label: 0.16em;

	/* ── Space. One ladder; sections use the three band steps. ─────────── */
	--mas-sp-1: 0.25rem;
	--mas-sp-2: 0.5rem;
	--mas-sp-3: 0.75rem;
	--mas-sp-4: 1rem;
	--mas-sp-5: 1.5rem;
	--mas-sp-6: 2rem;
	--mas-sp-7: 3rem;
	--mas-band-tight: clamp(2.5rem, 5vw, 3.5rem);
	--mas-band: clamp(3.5rem, 7vw, 5rem);
	--mas-band-loose: clamp(4.5rem, 9vw, 7rem);

	/* ── Measure. Reading stays narrow; pictures take the width. ───────── */
	--mas-read: 68ch;
	--mas-wide: 1600px;
	--mas-gutter: clamp(1.25rem, 4vw, 3rem);

	/* ── Colour. Restrained: two grounds, one ink, one accent. ─────────── */
	--mas-ink: #0D1B24;
	--mas-ink-soft: #182F3F;
	--mas-text: #16232C;
	--mas-muted: #6A7783;
	--mas-rule: #E3DED8;
	--mas-paper: #FFFFFF;
	--mas-paper-warm: #F8F6F4;
	--mas-sand: #E1D5CC;
	--mas-accent: #9A7B4F;
	--mas-on-ink: rgba(255, 255, 255, 0.92);
	--mas-on-ink-muted: rgba(255, 255, 255, 0.64);

	/* ── Photographs. A ratio per kind, so cards cannot vary in height. ── */
	--mas-ratio-property: 3 / 2;
	--mas-ratio-development: 4 / 3;
	--mas-ratio-editorial: 16 / 10;
	--mas-ratio-portrait: 4 / 5;
	--mas-ratio-thumb: 1 / 1;

	/* ── Motion. Two curves and three durations, used everywhere. ──────── */
	--mas-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--mas-ease-out: cubic-bezier(0, 0, 0.2, 1);
	--mas-quick: 180ms;
	--mas-calm: 300ms;
	--mas-slow: 900ms;

	/* One shadow in the whole system, for the thing that floats on a photograph. */
	--mas-lift: 0 18px 50px rgba(13, 27, 36, 0.18);
}

/* The plugin's own bridge reads these, so its components inherit the system. */
:root {
	--meklara-max: var(--mas-wide);
	--meklara-read: var(--mas-read);
	--meklara-sect: var(--mas-band);
}

/* ── Bands ───────────────────────────────────────────────────────────────── */
/*
 * A band is the unit of the page: full width, one ground, one idea, one rhythm.
 * Three grounds and three rhythms is the whole vocabulary — enough for pacing
 * (large / quiet / dense / quiet / large) and few enough that a page cannot
 * become a wall of boxes.
 */
.mk-band { padding-block: var(--mas-band); }
.mk-band--tight { padding-block: var(--mas-band-tight); }
.mk-band--loose { padding-block: var(--mas-band-loose); }
.mk-band--ink,
.mk-market.alignfull,
.mk-close.alignfull {
	background: var(--mas-ink);
	color: var(--mas-on-ink);
	padding-block: var(--mas-band-tight);
}
.mk-band--paper { background: var(--mas-paper-warm); padding-block: var(--mas-band); }
.mk-band--white { background: var(--mas-paper); padding-block: var(--mas-band); }
.mk-band--sand { background: var(--mas-sand); }

/*
 * ⛔ BANDS MEET. WordPress puts one block gap between every top-level group, so
 * each full-width band was separated from the next by a 24px strip of paper —
 * invisible between two paper bands, and a bright line across the page between
 * a photograph and an ink band. Every band carries its own vertical padding, so
 * the gap between them is not spacing, it is a seam.
 */
main > .wp-block-group.alignfull + .wp-block-group.alignfull,
main > .wp-block-group.alignfull + .wp-block-group,
main > .wp-block-group + .wp-block-group.alignfull { margin-top: 0; }

/* 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 story page ──────────────────────────────────────────────────────
 * ⛔ NOT .mk-story: the connector already owns that class for a development
 * story card, and it is a two-column grid. Reusing the name laid this page's
 * sections out side by side, 800px off the screen.
 * ──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
 * A brokerage's own page about itself. Its prose is the tenant's and is not
 * touched here; what this does is give it a measure a person can read, let its
 * photographs take the width, and set its principles side by side.
 * ───────────────────────────────────────────────────────────────────────── */
.mk-about-open { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.mk-about-open .mk-h1 { margin: 0.35rem 0 0; }
.mk-about-body > * + * { margin-top: 1.25rem; }
/* Photographs escape the reading column to the page's wide measure. */
.mk-about-body .mk-about-pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(0.75rem, 1.5vw, 1.25rem);
	width: min(var(--mas-wide, 1600px), 100vw - 2 * var(--wp--style--root--padding-left, var(--mas-gutter)));
	max-width: none;
	margin-inline: calc(50% - min(var(--mas-wide, 1600px), 100vw - 2 * var(--wp--style--root--padding-left, var(--mas-gutter))) / 2);
	margin-block: clamp(2.5rem, 5vw, 4rem);
}
.mk-about-body .mk-about-pair figure { margin: 0; }
.mk-about-body .mk-about-pair img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
/* The principles, in the tenant's own words, read across rather than down. */
.mk-about-body .mk-principles {
	display: grid;
	/* The blocks arrive as heading, paragraph, heading, paragraph… Filling by
	   column keeps each heading above its own text; filling by row put the
	   first heading over the second one's prose. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: auto auto;
	grid-auto-flow: column;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	width: min(1200px, 100vw - 2 * var(--wp--style--root--padding-left, var(--mas-gutter)));
	max-width: none;
	margin-inline: calc(50% - min(1200px, 100vw - 2 * var(--wp--style--root--padding-left, var(--mas-gutter))) / 2);
	margin-block: clamp(2.5rem, 5vw, 3.5rem);
	padding-block: clamp(1.5rem, 3vw, 2rem);
	border-top: 1px solid var(--mas-rule);
	border-bottom: 1px solid var(--mas-rule);
}
.mk-about-body .mk-principles > * { margin: 0; }
.mk-about-body .mk-principles h2, .mk-about-body .mk-principles h3 {
	font-size: var(--mas-type-h4, 1.15rem); line-height: 1.2; margin: 0 0 0.5rem;
}
.mk-about-body .mk-principles p { font-size: 0.95rem; line-height: 1.6; }
.mk-about-close { margin-top: clamp(3rem, 6vw, 5rem); }

/* A lede is a sentence to read, not a band to fill. On the wide templates it
   was running the full 1344px, which is roughly 170 characters a line. */
/* !important because WordPress's constrained layout centres every child with
   margin-left/right: auto !important; a narrower lede would otherwise drift
   304px to the right of the h1 above it. */
.wp-block-post-content > .mk-lede { max-width: 46rem; margin-inline: 0 !important; }
@media (max-width: 860px) {
	.mk-about-body .mk-about-pair, .mk-about-body .mk-principles { grid-template-columns: minmax(0, 1fr); }
	.mk-about-body .mk-principles { grid-auto-flow: row; grid-template-rows: none; gap: 0.35rem 0; }
	.mk-about-body .mk-principles > h2, .mk-about-body .mk-principles > h3,
	.mk-about-body .mk-principles > h4, .mk-about-body .mk-principles > h5 { margin-top: 1.5rem; }
}

/* ── The micro-label ─────────────────────────────────────────────────────── */
/* It opens a band and names a card. One size, one tracking, everywhere. */
.mk-eyebrow {
	font-family: var(--mas-face-text);
	font-size: var(--mas-type-label);
	font-weight: 600;
	letter-spacing: var(--mas-tracking-label);
	text-transform: uppercase;
	color: var(--mas-muted);
}
.mk-band--ink .mk-eyebrow, .mk-market .mk-eyebrow, .mk-eyebrow--light { color: var(--mas-on-ink-muted); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
/* Square, micro-label, three variants. Geometry moves only on press. */
.mk-button, .wp-block-button__link, .mk-more--button {
	border-radius: 0;
	font-size: var(--mas-type-label);
	font-weight: 600;
	letter-spacing: var(--mas-tracking-label);
	text-transform: uppercase;
	padding: var(--mas-sp-4) var(--mas-sp-5);
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color var(--mas-calm) var(--mas-ease-out), border-color var(--mas-calm) var(--mas-ease-out), color var(--mas-calm) var(--mas-ease-out);
}
.mk-button:active, .wp-block-button__link:active { transform: scale(0.985); }

/* ── Headings ────────────────────────────────────────────────────────────── */
.mk-hero-heading.meklara-hero-heading {
	font-family: var(--mas-face-display);
	font-weight: 500;
	font-size: var(--mas-type-display-xl);
	line-height: var(--mas-leading-display);
	letter-spacing: var(--mas-tracking-display);
}
.mk-h2, .mk-market-heading, .mk-explore-heading, .mk-close-heading, .mk-team-heading,
.mk-locations-heading, .mk-devstrip-heading {
	font-family: var(--mas-face-display);
	font-weight: 500;
	font-size: var(--mas-type-display-m);
	line-height: var(--mas-leading-heading);
	letter-spacing: -0.008em;
}
.mk-sect-head .mk-h2 { font-size: var(--mas-type-display-l); }

/* ── Controls ────────────────────────────────────────────────────────────── */
/*
 * Patrick, 2026-09-22: "all dropdowns, boxes etc can be different but not
 * standard like we have now."
 *
 * A native <select> paints itself: system chrome, a system chevron, a system
 * focus ring, and a rounded rectangle nobody chose. Underneath it is still a
 * native select — which is what makes it work with a keyboard, with VoiceOver
 * and with the iOS wheel — but everything you can see is ours: the label above
 * it as a micro-label, the value set in the reading face, one hairline between
 * cells, and a chevron we draw.
 */
.meklara-field,
.mk-herobar .meklara-field {
	position: relative;
	display: grid;
	gap: 0.35rem;
	padding: 0.9rem 1.15rem;
	background: #fff;
	border: 0;
	border-right: 1px solid var(--meklara-rule);
	border-radius: 0;
}
.meklara-field:last-of-type { border-right: 0; }
.meklara-field > span,
.meklara-field > label,
.mk-herobar .meklara-field-label {
	font-size: var(--mas-type-label);
	font-weight: 600;
	letter-spacing: var(--mas-tracking-label);
	text-transform: uppercase;
	color: color-mix(in srgb, var(--meklara-ink) 55%, transparent);
}
.meklara-field select,
.meklara-field input,
.meklara-input,
.mk-herobar select,
.mk-herobar input {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0 1.6rem 0 0;
	margin: 0;
	width: 100%;
	font-family: var(--meklara-body);
	font-size: max(16px, 1rem);
	line-height: 1.3;
	color: var(--meklara-ink);
	box-shadow: none;
	cursor: pointer;
}
/* Our chevron, not the system's: a 1px stroke, sized to the type, never a glyph. */
.meklara-field:has(select)::after {
	content: "";
	position: absolute;
	right: 1.15rem;
	bottom: 1.35rem;
	width: 9px;
	height: 9px;
	border-right: 1px solid color-mix(in srgb, var(--meklara-ink) 55%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--meklara-ink) 55%, transparent);
	transform: rotate(45deg) translateY(-2px);
	pointer-events: none;
}
/* Focus is a line under the cell, in the accent — never a browser halo. */
.meklara-field select:focus-visible,
.meklara-field input:focus-visible,
.meklara-input:focus-visible {
	outline: none;
	box-shadow: 0 2px 0 0 var(--meklara-accent);
}
.meklara-field:focus-within { background: #fff; }

/*
 * THE BAR FLOATS. Patrick, 2026-09-22: "could this search bar be like floating
 * on top, looking more modern, slim… so that it sits 2 cm above and we see
 * little of the image also below".
 *
 * It was white, square and welded to the bottom edge of the photograph, which
 * is the one detail that makes a hero look like a template. Now it is lifted
 * off the edge (the connector owns that offset), narrower than the page,
 * rounded, and on glass so the photograph carries on behind it.
 *
 * ⛔ THE CELLS MUST BE TRANSPARENT. A white cell background inside a
 * translucent bar puts the opaque slab back one level down, and the glass does
 * nothing at all.
 */
.mk-herobar {
	background: rgba(255, 255, 255, 0.94);
	border: 0;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 24px 60px -26px rgba(8, 18, 26, 0.6), 0 2px 8px -4px rgba(8, 18, 26, 0.25);
}
@supports (backdrop-filter: blur(8px)) {
	.mk-herobar { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(20px) saturate(1.25); }
}
/* Slimmer, and see-through: 60px of bar instead of 71, with the hairline
   between cells drawn short so it reads as a divider and not as a frame. */
.mk-herobar .meklara-field {
	background: transparent;
	border-right: 0;
	padding: 0.6rem 1.1rem 0.65rem;
	gap: 0.1rem;
}
.mk-herobar .meklara-field:focus-within { background: rgba(255, 255, 255, 0.55); }
.mk-herobar-submit.mk-button,
.mk-button--primary,
.meklara-button--primary {
	background: var(--mas-ink);
	color: #fff;
	border: 0;
	border-radius: 0;
	font-size: var(--mas-type-label);
	font-weight: 600;
	letter-spacing: var(--mas-tracking-label);
	text-transform: uppercase;
	padding-inline: 2rem;
	transition: background-color var(--mas-calm) var(--mas-ease-out);
}
.mk-herobar-submit.mk-button:hover,
.mk-button--primary:hover { background: #16303f; }
.mk-herobar-submit.mk-button:active { transform: scale(0.985); }

/* Every other box: square, hairline, no system rounding. */
.meklara-card, .mk-dev-card, .mk-person-media, .meklara-panel, .meklara-box,
input[type="text"], input[type="email"], input[type="search"], input[type="tel"], textarea {
	border-radius: 0;
}
textarea, input[type="text"], input[type="email"], input[type="search"], input[type="tel"] {
	border: 1px solid var(--meklara-rule);
	background: #fff;
	padding: 0.95rem 1.1rem;
	font-size: max(16px, 1rem);
}
textarea:focus-visible, input:focus-visible { outline: none; border-color: var(--meklara-accent); }

/*
 * A page that opens on a photograph opens ON the photograph.
 *
 * The hero began 24px down the page, so a strip of warm paper sat above it and
 * the white wordmark straddled the seam (Patrick's iPhone, 2026-09-22). The
 * header is fixed and transparent over a hero; the hero itself must start at
 * the very top, and nothing above it may reserve space.
 */
body.mk-has-hero .mk-page,
body.mk-has-hero main.mk-page { padding-top: 0; margin-top: 0; }
body.mk-has-hero .mk-page > *:first-child { margin-top: 0; }
body.mk-has-hero .mk-hero.meklara-hero-panel { margin-top: 0; }

/*
 * The wordmark over a photograph is a mark, not a paragraph: theirs sits in a
 * hairline box at the top-left corner. Ours keeps the display face but takes
 * the same scale and the same corner, so the header reads as part of the
 * picture rather than as a strip laid over it.
 */
.mk-header--over:not(.is-scrolled) .mk-wordmark a {
	font-size: 1.15rem;
	line-height: 1.15;
	letter-spacing: 0.01em;
}
@media (max-width: 900px) {
	.mk-header { padding-block: 0.85rem; }
	.mk-header--over:not(.is-scrolled) .mk-wordmark a { font-size: 1.05rem; }
}

/* ── The property card, their shape ──────────────────────────────────────── */
.meklara-card { background: transparent; border: 0; }
.meklara-card-link { text-decoration: none; color: inherit; display: grid; gap: 0.75rem; }
.meklara-card-frame { aspect-ratio: var(--mas-ratio-editorial); overflow: hidden; background: var(--mas-paper-warm); }
.meklara-card-place { font-size: var(--mas-type-label); font-weight: 600; letter-spacing: var(--mas-tracking-label); text-transform: uppercase; color: color-mix(in srgb, var(--meklara-ink) 55%, transparent); }
.meklara-card-title { font-family: var(--meklara-display); font-weight: 500; font-size: var(--mas-type-title); line-height: 1.2; margin: 0.1rem 0 0; }
.meklara-card-price { font-size: var(--mas-type-body); font-weight: 500; }
/* The meta row: hairline-separated facts, the way a listing sheet sets them. */
.meklara-card-facts { display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: var(--mas-type-meta); color: color-mix(in srgb, var(--meklara-ink) 68%, transparent); }
.meklara-card-facts > span + span { padding-left: 0.75rem; border-left: 1px solid var(--meklara-rule); }

/* ── The numbered standard ───────────────────────────────────────────────── */
.mk-numbered { display: grid; gap: 0; }
.mk-numbered-item {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr);
	gap: 0 clamp(1rem, 2vw, 2rem);
	padding: clamp(1.25rem, 2.4vw, 1.75rem) 0;
	border-top: 1px solid var(--meklara-rule);
}
.mk-numbered-item:last-child { border-bottom: 1px solid var(--meklara-rule); }
.mk-numbered-figure {
	grid-row: span 2;
	margin: 0;
	font-family: var(--meklara-display);
	font-size: clamp(1.9rem, 3vw, 2.4rem);
	line-height: 1;
	color: color-mix(in srgb, var(--meklara-ink) 38%, transparent);
}
.mk-numbered-title { margin: 0 0 0.3rem; font-size: var(--mas-type-label); font-weight: 600; letter-spacing: var(--mas-tracking-label); text-transform: uppercase; }
.mk-numbered-text { margin: 0; font-size: 0.92rem; line-height: 1.6; color: color-mix(in srgb, var(--meklara-ink) 72%, transparent); }
.mk-standard { align-items: start; gap: clamp(2rem, 5vw, 5rem); }

/* A band's own heading block: label, then the line. */
.mk-sect-head { display: grid; gap: 0.6rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.mk-sect-head .mk-h2 { margin: 0; font-family: var(--meklara-display); font-weight: 500; font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.14; }

/* ── The header ──────────────────────────────────────────────────────────── */
/*
 * Light over a photograph, paper once you scroll, condensed while you read, and
 * out of the way when you scroll down — one gesture up brings it back. The
 * height is a token so the hero and the drawer can both reason about it.
 */
:root { --mas-header-h: 88px; --mas-header-h-condensed: 56px; }
@media (max-width: 900px) { :root { --mas-header-h: 68px; --mas-header-h-condensed: 52px; } }

.mk-header {
	/*
	 * FIXED, NOT STICKY. Sticky depends on every ancestor's overflow, and in a
	 * block theme the header sits inside a group: measured on /properties/ it
	 * scrolled away at -457px while the home page behaved. Fixed is the same
	 * behaviour everywhere, and the page reserves the height below.
	 */
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 120;
	display: flex;
	align-items: center;
	min-height: var(--mas-header-h);
	padding-block: 0;
	background: var(--mas-paper-warm);
	border-bottom: 1px solid transparent;
	transition:
		min-height 420ms var(--mas-ease),
		transform 320ms var(--mas-ease),
		background-color var(--mas-calm) var(--mas-ease-out),
		border-color var(--mas-calm) var(--mas-ease-out),
		color var(--mas-calm) var(--mas-ease-out);
}
.mk-header.is-scrolled { min-height: var(--mas-header-h-condensed); border-bottom-color: var(--mas-rule); }
/* Scrolling down: gone. Scrolling up: back, at the condensed height. */
.mk-header.is-away { transform: translateY(-101%); }

/* A page without a hero reserves the header's height; a hero page runs under it. */
body:not(.mk-has-hero) { padding-top: var(--mas-header-h); }

/* Over a hero the header is the photograph's own furniture until you scroll. */
.mk-header--over:not(.is-scrolled) {
	background: transparent;
	border-bottom-color: transparent;
	color: #fff;
}
.mk-header--over:not(.is-scrolled) .mk-wordmark a,
.mk-header--over:not(.is-scrolled) .mk-nav a,
.mk-header--over:not(.is-scrolled) .mk-header-link { color: #fff; }
/* A hairline of shade under the type, so white stays legible over a pale photograph. */
.mk-header--over:not(.is-scrolled)::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: calc(var(--mas-header-h) * 1.8);
	background: linear-gradient(to bottom, rgba(10, 21, 28, 0.42), rgba(10, 21, 28, 0));
	pointer-events: none;
	z-index: -1;
}

.mk-header .mk-wordmark a {
	font-family: var(--mas-face-display);
	font-size: clamp(1.05rem, 1.5vw, 1.35rem);
	font-weight: 500;
	letter-spacing: 0.005em;
	text-decoration: none;
}
.mk-nav a {
	font-family: var(--mas-face-text);
	font-size: var(--mas-type-meta);
	letter-spacing: 0.01em;
	text-decoration: none;
}
/* The one call to action in the header is a button, not another link. */
.mk-header-actions .mk-header-link {
	display: inline-flex;
	align-items: center;
	/* 44px, measured: it was 40 — four pixels short of what a thumb reliably hits. */
	min-height: 44px;
	padding: 0 var(--mas-sp-4);
	border: 1px solid currentColor;
	font-size: var(--mas-type-label);
	font-weight: 600;
	letter-spacing: var(--mas-tracking-label);
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color var(--mas-calm) var(--mas-ease-out), color var(--mas-calm) var(--mas-ease-out);
}
.mk-header-actions .mk-header-link:hover { background: var(--mas-ink); border-color: var(--mas-ink); color: #fff; }
.mk-header--over:not(.is-scrolled) .mk-header-actions .mk-header-link:hover { background: #fff; border-color: #fff; color: var(--mas-ink); }
/* The second action stays quiet: one button per header. */
.mk-header-actions .mk-header-link--quiet {
	border-color: transparent;
	padding-inline: var(--mas-sp-2);
	font-size: var(--mas-type-meta);
	font-weight: 400;
	letter-spacing: 0.01em;
	text-transform: none;
}
.mk-header-actions .mk-header-link--quiet:hover { background: transparent; color: inherit; text-decoration: underline; text-underline-offset: 0.35em; }
@media (max-width: 900px) {
	.mk-header-actions .mk-header-link--quiet { display: none; }
}

/* ── The tablet gap ──────────────────────────────────────────────────────── */
/*
 * MEASURED at 768: the desktop navigation overran its own row by 12–22px
 * because it only collapses at the block editor's "mobile" breakpoint. A
 * brokerage's visitors are on tablets too. The drawer takes over below 1024,
 * where the row genuinely stops fitting.
 */
@media (max-width: 1024px) {
	.mk-header .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
	.mk-header .wp-block-navigation__responsive-container-open { display: flex; }
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
/* Measured: 35×15 links. The words stay the same size; the hit area grows. */
.mk-footer a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.mk-footer-list li { margin: 0; }
.mk-footer-label {
	font-family: var(--mas-face-text);
	font-size: var(--mas-type-label);
	font-weight: 600;
	letter-spacing: var(--mas-tracking-label);
	text-transform: uppercase;
	color: var(--mas-muted);
	margin: 0 0 var(--mas-sp-2);
}
/* The legal row is small print, and small print may be small — but still tappable. */
.mk-footer-legal a { min-height: 44px; }