/* Macedonian Museum landing (/muzej/). Loaded only on that page. Dark, lit-hall look at the top; light reading sections below. */

.mm {
	--mm-red: var(--k-red, #a3121a);
	--mm-sun: var(--k-sun, #f2c14e);
	--mm-bg: var(--bg, #fbf8f3);
	--mm-ink: var(--ink, #1a1214);
	--mm-muted: var(--muted, #5a4e50);
	--mm-line: var(--line, #e5ddd2);
	--mm-soft: var(--soft, #f4efe8);
	--mm-card: #fff;
	--mm-night: #110c0b;
	--mm-night2: #1c1416;
	--mm-d-ink: #f3ece2;
	--mm-d-muted: #c9bcae;
	--mm-display: "Unbounded", var(--sans, system-ui), sans-serif;
	--mm-serif: var(--serif, "Literata", Georgia, serif);
	--mm-sans: var(--sans, "Geologica", system-ui, sans-serif);
	background: var(--mm-bg);
	color: var(--mm-ink);
	font-family: var(--mm-sans);
	overflow-x: clip;
	padding: 0 !important;
	max-width: none !important;
}
html[data-theme="dark"] .mm { --mm-bg: #120d0e; --mm-ink: #f4efe8; --mm-muted: #c3b9bb; --mm-line: rgba(255,255,255,.12); --mm-soft: #1c1617; --mm-card: #1c1617; --mm-red: #ff8a7a; }

html:not([data-mh-lang="en"]) .mm .mh-l-en,
html[data-mh-lang="en"] .mm .mh-l-mk { display: none !important; }

.mm *, .mm *::before, .mm *::after { box-sizing: border-box; }
.mm img, .mm video { max-width: 100%; display: block; }
.mm a { color: inherit; }
.mm :focus-visible { outline: 3px solid var(--mm-sun); outline-offset: 3px; border-radius: 6px; }
.mm-wrap { width: min(1240px, 100% - 32px); margin-inline: auto; }

/* ---------- hero ---------- */
.mm-hero { position: relative; min-height: min(92vh, 860px); display: grid; align-items: end; background: var(--mm-night); color: var(--mm-d-ink); isolation: isolate; }
.mm-hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.mm-hero-media video, .mm-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.mm-hero-media::after { content: ""; position: absolute; inset: 0; background:
	linear-gradient(90deg, rgba(17,12,11,.88) 0%, rgba(17,12,11,.55) 45%, rgba(17,12,11,.08) 75%),
	linear-gradient(0deg, rgba(17,12,11,.92) 0%, rgba(17,12,11,0) 42%); }
.mm-hero-body { padding: 140px 0 56px; }
.mm-eyebrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0; font: 600 13px/1.4 var(--mm-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--mm-sun); }
.mm-dev { padding: 4px 10px; border: 1px solid var(--mm-sun); border-radius: 999px; font-size: 11px; letter-spacing: .1em; }
.mm-h1 { margin: 16px 0 0; max-width: 15ch; font: 800 clamp(40px, 7vw, 96px)/.96 var(--mm-display); letter-spacing: -.025em; text-wrap: balance; }
.mm-lead { margin: 22px 0 0; max-width: 58ch; font: 400 clamp(17px, 1.6vw, 21px)/1.6 var(--mm-serif); color: var(--mm-d-muted); }
.mm-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.mm-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 999px; font: 700 16px var(--mm-sans); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .2s, background .2s; }
.mm-btn:hover { transform: translateY(-1px); }
.mm .mm-btn--sun { background: var(--mm-sun); color: #1b1310; }
.mm .mm-btn--ghost { border-color: rgba(243,236,226,.35); color: var(--mm-d-ink); background: rgba(17,12,11,.35); backdrop-filter: blur(6px); }
.mm .mm-btn--ink { background: var(--mm-ink); color: var(--mm-bg); }
.mm-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 48px 0 0; padding: 22px 0 0; list-style: none; border-top: 1px solid rgba(243,236,226,.18); max-width: 860px; }
.mm-facts li { display: grid; gap: 4px; color: var(--mm-d-muted); font-size: 14px; line-height: 1.45; }
.mm-facts b { font: 800 clamp(22px, 2.6vw, 32px)/1 var(--mm-display); color: var(--mm-d-ink); }

.mm-notice { background: var(--mm-red); color: #fff; }
.mm-notice p { margin: 0; padding: 14px 0; font-size: 15px; line-height: 1.55; }

/* ---------- sections ---------- */
.mm-sec { padding: clamp(56px, 8vw, 104px) 0; }
.mm-soft { background: var(--mm-soft); }
.mm-dark { background: var(--mm-night); color: var(--mm-d-ink); }
.mm-kicker { margin: 0; font: 600 13px/1.4 var(--mm-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--mm-red); }
.mm-dark .mm-kicker { color: var(--mm-sun); }
.mm-h2 { margin: 8px 0 0; font: 700 clamp(30px, 4vw, 52px)/1.06 var(--mm-serif); text-wrap: balance; }
.mm-sub { margin: 14px 0 0; max-width: 64ch; color: var(--mm-muted); font-size: 17px; line-height: 1.6; }
.mm-dark .mm-sub { color: var(--mm-d-muted); }

.mm-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.mm-shot { margin: 0; display: grid; gap: 10px; }
.mm-shot a { display: block; overflow: hidden; border-radius: 16px; background: var(--mm-night); aspect-ratio: 16 / 9; }
.mm-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.mm-shot a:hover img { transform: scale(1.04); }
.mm-shot figcaption { font-size: 14px; line-height: 1.5; color: var(--mm-muted); }
.mm-shot figcaption b { color: var(--mm-ink); }
.mm-shot--big { grid-column: span 2; grid-row: span 2; }
.mm-shot--big a { aspect-ratio: auto; height: 100%; min-height: 320px; }

.mm-how { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.mm-steps { list-style: none; counter-reset: s; margin: 28px 0 32px; padding: 0; display: grid; gap: 22px; }
.mm-steps li { counter-increment: s; display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; }
.mm-steps li::before { content: counter(s); grid-row: span 2; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(242,193,78,.14); color: var(--mm-sun); font: 800 18px var(--mm-display); }
.mm-steps h3 { margin: 4px 0 0; font: 700 21px/1.25 var(--mm-serif); }
.mm-steps p { margin: 6px 0 0; color: var(--mm-d-muted); font-size: 16px; line-height: 1.6; }
.mm-phone { margin: 0; justify-self: center; width: min(320px, 100%); }
.mm-phone video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 34px; border: 10px solid #000; box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.1); background: #000; }
.mm-phone figcaption { margin-top: 12px; text-align: center; font-size: 14px; color: var(--mm-d-muted); }

.mm-wings { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.mm-wing { display: grid; align-content: space-between; gap: 18px; min-height: 180px; padding: 18px; border-radius: 16px; border: 1px solid var(--mm-line); background: var(--mm-card); }
.mm-wing-n { font: 800 34px/1 var(--mm-display); color: var(--mm-red); }
.mm-wing-t { font: 700 17px/1.3 var(--mm-serif); }
.mm-wing-s { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mm-muted); }
.mm-wing--open { background: var(--mm-night); color: var(--mm-d-ink); border-color: var(--mm-sun); box-shadow: 0 16px 40px rgba(17,12,11,.25); }
.mm-wing--open .mm-wing-n, .mm-wing--open .mm-wing-s { color: var(--mm-sun); }
.mm-wing--next { border-color: var(--mm-red); }
.mm-wing--next .mm-wing-s { color: var(--mm-red); }

.mm-objs { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.mm-obj { padding: 20px; border-radius: 16px; background: var(--mm-card); border: 1px solid var(--mm-line); }
.mm-obj-k { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mm-red); }
.mm-obj h3 { margin: 6px 0 0; font: 700 22px/1.2 var(--mm-serif); }
.mm-obj p { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--mm-muted); }
.mm-obj .mm-obj-ai { font-size: 12px; font-style: italic; }

.mm-give-in { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: 40px; align-items: end; padding: clamp(28px, 4vw, 48px); border-radius: 24px; background: var(--mm-soft); border: 1px solid var(--mm-line); }
.mm-give-cta { display: grid; gap: 20px; justify-items: start; }
.mm-share p { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mm-muted); }
.mm-share { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mm-share p { flex-basis: 100%; }
.mm-share a, .mm-share button { min-height: 40px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--mm-line); background: var(--mm-card); color: var(--mm-ink); font: 600 14px var(--mm-sans); text-decoration: none; cursor: pointer; }

.mm-final { padding: clamp(56px, 8vw, 96px) 0; text-align: center; background:
	radial-gradient(60% 120% at 50% 0%, rgba(242,193,78,.18), rgba(242,193,78,0) 70%), var(--mm-night); }
.mm-final .mm-h2 { margin: 0 0 24px; font-family: var(--mm-display); font-weight: 800; }

@media (max-width: 1000px) {
	.mm-wings { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.mm-how, .mm-give-in { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
	.mm-hero { min-height: 88vh; }
	.mm-hero-media::after { background: linear-gradient(0deg, rgba(17,12,11,.95) 10%, rgba(17,12,11,.55) 55%, rgba(17,12,11,.15) 100%); }
	.mm-hero-body { padding: 110px 0 36px; }
	.mm-facts { grid-template-columns: 1fr; gap: 14px; margin-top: 32px; }
	.mm-facts li { grid-template-columns: 96px 1fr; align-items: baseline; }
	.mm-gallery { grid-template-columns: 1fr; }
	.mm-shot--big { grid-column: auto; grid-row: auto; }
	.mm-shot--big a { aspect-ratio: 16 / 9; min-height: 0; }
	.mm-wings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mm-wing { min-height: 140px; }
	.mm-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	.mm-btn, .mm-shot img { transition: none; }
}