/* ==========================================================================
   Mosaic Gallery — front-end styles
   Every color, font and size comes from CSS variables set in the Customizer.
   ========================================================================== */

:root {
	--mg-bg: #f6f4f0;
	--mg-text: #161616;
	--mg-accent: #161616;
	--mg-accent-text: #fff;
	--mg-font-head: ui-serif, Georgia, serif;
	--mg-font-body: ui-sans-serif, system-ui, sans-serif;
	--mg-base: 16px;
	--mg-head-scale: 1;
	--mg-logo-h: 34px;
	--mg-btn-radius: 999px;
	--mg-lw: 1px;
	--mg-hb-bw: 1px;
	--mg-hb-r: 40px;
	--mg-hb-fs: 14px;
	--mg-hb-px: 19px;
	--mg-hb-py: 13px;
	--mg-fb-r: 40px;
	--mg-lb-backdrop: rgba(0, 0, 0, .5);
	--mg-cols-d: 4;
	--mg-cols-t: 3;
	--mg-cols-m: 2;
	--mg-gap: 14px;
	--mg-radius: 4px;

	--mg-muted: color-mix(in srgb, var(--mg-text) 58%, var(--mg-bg));
	--mg-line: color-mix(in srgb, var(--mg-text) 12%, var(--mg-bg));
	--mg-surface: color-mix(in srgb, var(--mg-text) 5%, var(--mg-bg));
	--mg-pad: clamp(20px, 4vw, 56px);
	--mg-max: 1680px;
	--mg-header-h: calc(var(--mg-logo-h) + 36px);
	--mg-ease: cubic-bezier(.22, .61, .36, 1);
	--mg-ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* Reset ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--mg-header-h) + 16px); }
body {
	margin: 0;
	background: var(--mg-bg);
	color: var(--mg-text);
	font-family: var(--mg-font-body);
	font-size: var(--mg-base);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	transition: background-color .4s var(--mg-ease), color .4s var(--mg-ease);
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
h1, h2, h3, h4 { font-family: var(--mg-font-head); font-weight: 400; line-height: 1.08; letter-spacing: -.015em; margin: 0 0 .5em; text-wrap: balance; }
p { margin: 0 0 1em; }
ul[role="list"] { list-style: none; margin: 0; padding: 0; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--mg-accent); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--mg-accent); color: var(--mg-accent-text); }

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px;
	overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important;
}
.skip-link:focus {
	clip: auto; clip-path: none; height: auto; width: auto; margin: 0; z-index: 1000;
	top: 12px; left: 12px; padding: 12px 18px; background: var(--mg-text); color: var(--mg-bg); border-radius: 6px; text-decoration: none;
}
.mg-main:focus { outline: none; }

.mg-container { width: 100%; max-width: var(--mg-max); margin-inline: auto; padding-inline: var(--mg-pad); }

/* Buttons --------------------------------------------------------------- */
.mg-btn {
	--_bg: var(--mg-accent);
	--_fg: var(--mg-accent-text);
	--_bd: var(--mg-accent);
	position: relative;
	display: inline-flex; align-items: center; justify-content: center; gap: .55em;
	min-height: 44px; padding: .7em 1.35em;
	border: 1px solid var(--_bd); border-radius: var(--mg-btn-radius);
	background: var(--_bg); color: var(--_fg);
	font-family: var(--mg-font-body); font-size: .875rem; font-weight: 500; letter-spacing: .01em; line-height: 1.1;
	text-decoration: none; white-space: nowrap; cursor: pointer; overflow: hidden; isolation: isolate;
	transition: color .35s var(--mg-ease), background-color .35s var(--mg-ease), border-color .35s var(--mg-ease), transform .35s var(--mg-ease), box-shadow .35s var(--mg-ease);
}
.mg-btn .mg-icon { width: 1.1em; height: 1.1em; flex: none; transition: transform .45s var(--mg-ease-out); }
.mg-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--_bg) 80%, #000); }
.mg-btn:hover .mg-icon { transform: translate(2px, -2px); }
.mg-btn:active { transform: translateY(0); }
.mg-btn--solid:hover { --_bg: color-mix(in srgb, var(--mg-accent) 86%, var(--mg-bg)); }
.mg-btn--outline { --_bg: transparent; --_fg: var(--mg-text); --_bd: var(--mg-line); }
.mg-btn--outline:hover { --_bd: var(--mg-text); box-shadow: none; }

/* Header button: Filled or Outline, every value from the Customizer (CSS variables) */
.mg-header__cta {
	--_bg: var(--mg-hb-bg, var(--mg-accent));
	--_fg: var(--mg-hb-fg, var(--mg-accent-text));
	--_bd: var(--mg-hb-bd, var(--mg-hb-bg, var(--mg-accent)));
	min-height: 0;
	padding: var(--mg-hb-py) var(--mg-hb-px);
	border-width: var(--mg-hb-bw);
	border-radius: var(--mg-hb-r);
	font-size: var(--mg-hb-fs);
}
.mg-header__cta:hover {
	--_bg: var(--mg-hb-bg-h, color-mix(in srgb, var(--mg-hb-bg, var(--mg-accent)) 86%, var(--mg-bg)));
	--_fg: var(--mg-hb-fg-h, var(--mg-hb-fg, var(--mg-accent-text)));
	--_bd: var(--mg-hb-bd-h, var(--mg-hb-bd, var(--mg-hb-bg-h, color-mix(in srgb, var(--mg-hb-bg, var(--mg-accent)) 86%, var(--mg-bg)))));
}
body.mg-hb-outline .mg-header__cta {
	--_bg: transparent;
	--_fg: var(--mg-hb-fg, var(--_hfg));
	--_bd: var(--mg-hb-bd, var(--_hfg));
	box-shadow: none;
}
body.mg-hb-outline .mg-header__cta:hover {
	--_bg: var(--mg-hb-bg-h, var(--mg-hb-bd, var(--_hfg)));
	--_fg: var(--mg-hb-fg-h, var(--mg-bg));
	--_bd: var(--mg-hb-bd-h, var(--mg-hb-bd, var(--_hfg)));
	box-shadow: none;
}

/* Buttons: "Remove fill on hover" / "Remove outline on hover" (Customizer → Header & header button, 1.3.3).
   Only the hover look changes; size and position never do. Keyboard focus keeps its ring. */
body.mg-hover-nofill .mg-btn:hover,
body.mg-hover-nofill .mg-header .mg-header__cta:hover {
	--_bg: transparent !important;
	--_fg: var(--mg-hb-fg-h, var(--_hfg, var(--mg-text))) !important;
	box-shadow: none;
}
body.mg-hover-nofill.mg-footer-btns .mg-footer__link:hover { background: transparent; }
body.mg-hover-nooutline .mg-btn:hover,
body.mg-hover-nooutline .mg-header .mg-header__cta:hover { --_bd: transparent !important; }
body.mg-hover-nooutline.mg-footer-btns .mg-footer__link:hover { border-color: transparent; }
.mg-btn:focus-visible, .mg-footer__link:focus-visible { outline: 2px solid var(--mg-accent); outline-offset: 3px; }
body.mg-header-dark .mg-header__cta:focus-visible { outline-color: currentColor; }

/* Header ---------------------------------------------------------------- */
.mg-header {
	--_hbg: color-mix(in srgb, var(--mg-bg) 82%, transparent);
	--_hfg: var(--mg-text);
	position: sticky; top: 0; z-index: 50;
	background: var(--_hbg);
	color: var(--_hfg);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	backdrop-filter: saturate(160%) blur(14px);
	border-bottom: var(--mg-lw) solid transparent;
	transition: border-color .4s var(--mg-ease), background-color .4s var(--mg-ease), box-shadow .4s var(--mg-ease);
}
.admin-bar .mg-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .mg-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .mg-header { top: 0; } }
.mg-header.is-scrolled, body.mg-hline-always .mg-header { border-bottom-color: var(--mg-hl, var(--mg-line)); }
.mg-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--mg-header-h); padding-block: 14px; }
/* 1.3.3: the scrolled state changes only the line colour; the header's height and the logo size stay fixed (no jump). */

body.mg-header-dark .mg-header { --_hbg: color-mix(in srgb, #0d0d0d 92%, transparent); --_hfg: #f3f1ec; }
body.mg-header-dark .mg-header.is-scrolled, body.mg-header-dark.mg-hline-always .mg-header { border-bottom-color: var(--mg-hl, rgba(255, 255, 255, .08)); }
body.mg-header-dark.mg-hb-filled .mg-header .mg-header__cta { --_bg: var(--mg-hb-bg, var(--mg-accent-text)); --_fg: var(--mg-hb-fg, var(--mg-accent)); --_bd: var(--mg-hb-bd, var(--mg-hb-bg, var(--mg-accent-text))); }
body.mg-header-dark.mg-hb-filled .mg-header .mg-header__cta:hover { --_bg: var(--mg-hb-bg-h, color-mix(in srgb, var(--mg-hb-bg, var(--mg-accent-text)) 88%, #000)); --_fg: var(--mg-hb-fg-h, var(--mg-hb-fg, var(--mg-accent))); --_bd: var(--mg-hb-bd-h, var(--mg-hb-bd, var(--mg-hb-bg-h, color-mix(in srgb, var(--mg-hb-bg, var(--mg-accent-text)) 88%, #000)))); }

.mg-logo { display: inline-flex; align-items: center; min-width: 0; text-decoration: none; color: inherit; }
.mg-logo__img { height: var(--mg-logo-h); width: auto; max-width: min(260px, 52vw); object-fit: contain; object-position: left center; transition: opacity .3s; }
.mg-logo__img--ondark { display: none; }
body.mg-header-dark .mg-logo--header .mg-logo__img--onlight:not(.mg-logo__img--only) { display: none; }
body.mg-header-dark .mg-logo--header .mg-logo__img--ondark { display: block; }
body.mg-header-dark .mg-logo--header .mg-logo__img--only,
.mg-logo__img--mono { filter: brightness(0) invert(1); }
.mg-logo__text { font-family: var(--mg-font-head); font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mg-header__cta { flex: none; }

/* Gallery (no heading, no text: header → mosaic → footer) ------------- */
.mg-gallery { padding-block: clamp(6px, 1.2vw, 20px) clamp(20px, 3vw, 48px); }

/* Mosaic ---------------------------------------------------------------- */
.mg-mosaic-wrap { container-type: inline-size; }

/* True masonry: every photo keeps its own shape (no crop, no bars).
   Without JS the browser's CSS columns place the tiles; mosaic.js then switches to
   .is-masonry and places each tile, in Reorder order, at the top of the shortest column. */
.mg-mosaic {
	--mg-cols: var(--mg-cols-d);
	column-count: var(--mg-cols);
	column-gap: var(--mg-gap);
	list-style: none; margin: 0; padding: 0;
}
@media (max-width: 1023px) { .mg-mosaic { --mg-cols: var(--mg-cols-t); } }
@media (max-width: 699px)  { .mg-mosaic { --mg-cols: var(--mg-cols-m); } }

.mg-tile {
	position: relative; margin: 0 0 var(--mg-gap); min-width: 0;
	aspect-ratio: var(--mg-ar, 1);
	break-inside: avoid; -webkit-column-break-inside: avoid;
}
.mg-mosaic.is-masonry { column-count: auto; columns: auto; position: relative; }
.mg-mosaic.is-masonry > .mg-tile { position: absolute; top: 0; left: 0; margin: 0; }

.mg-tile__link {
	position: absolute; inset: 0; display: block; overflow: hidden;
	container-type: inline-size; /* 1cqw = 1% of the photo's width (watermark preview overlay) */
	border-radius: var(--mg-radius);
	background: var(--mg-tone, var(--mg-surface));
	cursor: zoom-in; isolation: isolate;
	transform: translateZ(0);
}
/* The tile has the photo's exact aspect ratio, so the photo fills it whole: no object-fit, no crop. */
.mg-tile__img {
	display: block; width: 100%; height: 100%;
	opacity: 0; filter: blur(6px);
	transition: opacity .9s var(--mg-ease), filter .9s var(--mg-ease);
}
.mg-tile.is-loaded .mg-tile__img { opacity: 1; filter: none; }
/* A transparent layer above each photo: long-press / right-click "save image" hits this, not the image. */
.mg-tile__shield { position: absolute; inset: 0; z-index: 3; background: transparent; }

/* Watermark overlay — Customizer preview only (the live site serves burned-in files).
   Same geometry as the burner: sizes and offsets are % of the photo width (cqw). */
.mg-wm {
	position: absolute; z-index: 2; display: none; pointer-events: none;
	width: calc(var(--mg-wm-w, 15) * 1cqw);
	right: calc(var(--mg-wm-x, 3) * 1cqw); bottom: calc(var(--mg-wm-y, 3) * 1cqw);
	opacity: var(--mg-wm-op, .8);
	transform: rotate(var(--mg-wm-rot, 0deg));
}
.mg-wm img { display: block; width: 100%; height: auto; max-width: none; }
body.mg-wm-on .mg-wm { display: block; }
body.mg-wm-scope-lightbox .mg-tile .mg-wm { display: none; } /* "Lightbox only": overlay in the lightbox, not on tiles */
body.mg-wm-pos-bl .mg-wm { right: auto; left: calc(var(--mg-wm-x, 3) * 1cqw); }
body.mg-wm-pos-tr .mg-wm { bottom: auto; top: calc(var(--mg-wm-y, 3) * 1cqw); }
body.mg-wm-pos-tl .mg-wm { right: auto; bottom: auto; left: calc(var(--mg-wm-x, 3) * 1cqw); top: calc(var(--mg-wm-y, 3) * 1cqw); }
body.mg-wm-pos-c .mg-wm { right: auto; bottom: auto; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(var(--mg-wm-rot, 0deg)); }

/* Download / copy protection (Customizer → Image protection) */
body.mg-protect .mg-tile__img,
body.mg-protect .mg-lightbox__img,
body.mg-protect .mg-tile__link,
body.mg-protect .mg-lightbox__frame {
	-webkit-user-select: none; user-select: none;
	-webkit-touch-callout: none;
	-webkit-user-drag: none;
}
body.mg-protect .mg-tile__img, body.mg-protect .mg-lightbox__img { pointer-events: none; }
body:not(.mg-protect) .mg-tile__shield, body:not(.mg-protect) .mg-lightbox__shield { display: none; }

/* Screenshot deterrent: blur while the window is not focused / the tab is hidden */
html.mg-veiled .mg-tile__img,
html.mg-veiled .mg-lightbox__img,
html.mg-veiled .mg-wm { filter: blur(32px) saturate(.6) !important; transition: none !important; }
html.mg-veiled .mg-tile__link, html.mg-veiled .mg-lightbox__frame { overflow: hidden; }
.mg-tile.is-loaded .mg-tile__link { background: transparent; }
.mg-tile__link::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: #000; opacity: 0; transition: opacity .5s var(--mg-ease);
}
@media (hover: hover) {
	.mg-tile.is-loaded .mg-tile__link:hover::after { opacity: .08; }
	.mg-tile__link:hover { cursor: zoom-in; }
}

/* Load-in reveal */
.mg-js .mg-tile { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--mg-ease), transform 1s var(--mg-ease-out); transition-delay: var(--mg-delay, 0ms); }
.mg-js .mg-tile.is-in { opacity: 1; transform: none; }
.mg-tile[hidden] { display: none; }

/* Infinite scroll: the sentinel just below the mosaic triggers the next batch */
.mg-sentinel { display: flex; justify-content: center; gap: 6px; height: 1px; margin-top: 1px; overflow: visible; opacity: 0; transition: opacity .3s; }
.mg-sentinel.is-loading { height: auto; padding: clamp(24px, 4vw, 40px) 0 0; opacity: 1; }
.mg-sentinel.is-done { display: none; }
.mg-sentinel__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mg-muted); animation: mg-dot 1s var(--mg-ease) infinite; }
.mg-sentinel__dot:nth-child(2) { animation-delay: .15s; }
.mg-sentinel__dot:nth-child(3) { animation-delay: .3s; }
@keyframes mg-dot { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.mg-pages { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.mg-pages__link { min-width: 36px; padding: 6px 10px; border: 1px solid var(--mg-line); border-radius: var(--mg-btn-radius); text-align: center; color: inherit; text-decoration: none; font-size: .875rem; }
.mg-pages__link.is-current { background: var(--mg-text); color: var(--mg-bg); border-color: var(--mg-text); }

.mg-empty { padding: 64px 0; color: var(--mg-muted); text-align: center; }

/* Footer: one slim bar, the same height as the header ------------------ */
.mg-footer {
	--_fbg: var(--mg-footer-bg, var(--mg-bg));
	--_ffg: var(--mg-footer-text, var(--mg-text));
	--_muted: color-mix(in srgb, var(--_ffg) 58%, var(--_fbg));
	--_line: color-mix(in srgb, var(--_ffg) 14%, var(--_fbg));
	background: var(--_fbg); color: var(--_ffg);
	border-top: var(--mg-lw) solid var(--mg-fl, var(--_line));
	font-size: .8125rem; line-height: 1.3;
	transition: background-color .4s var(--mg-ease), color .4s var(--mg-ease);
}
body.mg-header-dark .mg-footer { --_fbg: var(--mg-footer-bg, #0d0d0d); --_ffg: var(--mg-footer-text, #f3f1ec); border-top-color: var(--mg-fl, rgba(255, 255, 255, .08)); }
.mg-footer a { color: inherit; text-decoration: none; }
.mg-footer__inner {
	display: flex; align-items: center; justify-content: space-between; gap: 10px 24px;
	min-height: var(--mg-header-h); padding-block: 14px;
}
.mg-footer__start, .mg-footer__end { display: flex; align-items: center; gap: 18px; min-width: 0; }
.mg-footer__end { gap: 20px; }
.mg-footer .mg-logo__img { height: calc(var(--mg-logo-h) * .72); max-width: 160px; }
.mg-footer .mg-logo__text { font-size: 1.05rem; }
.mg-footer__copy { margin: 0; font-size: .75rem; color: var(--mg-copy, var(--_muted)); white-space: nowrap; }
.mg-footer__copy a { color: inherit; }
.mg-footer__contact { display: flex; align-items: center; gap: 18px; white-space: nowrap; }
.mg-footer__link { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 1px; transition: background-size .45s var(--mg-ease-out); }
.mg-footer__link:hover { background-size: 100% 1px; }
.mg-footer-btns .mg-footer__contact { gap: 8px; }
.mg-footer-btns .mg-footer__link {
	display: inline-flex; align-items: center; height: 30px; padding: 0 12px;
	border: 1px solid var(--mg-fb-bd, var(--_line)); border-radius: var(--mg-fb-r);
	background: none; font-size: .75rem; font-weight: 500;
	transition: border-color .3s var(--mg-ease), background-color .3s var(--mg-ease);
}
.mg-footer-btns .mg-footer__link:hover { border-color: var(--mg-fb-bd-h, var(--_ffg)); background: color-mix(in srgb, var(--_ffg) 6%, transparent); }
.mg-footer__pin { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; opacity: .75; transition: opacity .3s var(--mg-ease), background-color .3s var(--mg-ease); }
.mg-footer__pin:hover { opacity: 1; background: var(--_line); }
.mg-footer__pin svg { width: 16px; height: 16px; }

/* Generic pages --------------------------------------------------------- */
.mg-prose { max-width: 760px; padding-block: clamp(40px, 7vw, 96px); }
.mg-prose > * + * { margin-top: 1.1em; }
.mg-prose img { border-radius: var(--mg-radius); }
.mg-prose a { color: var(--mg-accent); }
.mg-page-title { font-size: calc(clamp(2.4rem, 5.5vw, 4.5rem) * var(--mg-head-scale)); letter-spacing: -.03em; }
.mg-entry + .mg-entry { margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--mg-line); }
.mg-entry__title { font-size: 2rem; }
.mg-entry__title a { text-decoration: none; }

/* Lightbox -------------------------------------------------------------- */
.mg-lightbox {
	position: fixed; inset: 0; z-index: 1000;
	background: var(--mg-lb-backdrop); color: #f3f1ec;
	opacity: 0; visibility: hidden;
	transition: opacity .35s var(--mg-ease), visibility 0s linear .35s;
	touch-action: pan-y;
	--_pt: 68px; --_px: clamp(12px, 7vw, 96px); --_pb: 24px;
}
.mg-lightbox.has-caption { --_pb: 64px; }
.mg-lightbox.is-open { opacity: 1; visibility: visible; transition: opacity .35s var(--mg-ease), visibility 0s; }
/* The stage is the backdrop: a click or tap on it (outside the photo) closes the lightbox. */
.mg-lightbox__stage {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	padding: var(--_pt) var(--_px) var(--_pb);
	cursor: zoom-out;
}
/* The frame is sized by script to fit the whole photo inside the stage (contain, never cropped).
   The max-width / max-height below are the no-measure fallback. */
.mg-lightbox__frame {
	position: relative; flex: none; overflow: hidden;
	max-width: 100%; max-height: 100%;
	border-radius: var(--mg-radius);
	container-type: inline-size;
	box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7);
	opacity: 0; transform: scale(.97);
	transition: opacity .4s var(--mg-ease), transform .55s var(--mg-ease-out);
	cursor: default;
}
.mg-lightbox__frame.is-ready { opacity: 1; transform: none; }
.mg-lightbox.is-dragging .mg-lightbox__frame { transition: none; }
.mg-lightbox__img {
	display: block; width: 100%; height: 100%;
	max-width: calc(100vw - 2 * var(--_px)); max-height: calc(100vh - var(--_pt) - var(--_pb));
	max-height: calc(100dvh - var(--_pt) - var(--_pb));
	object-fit: contain;
	user-select: none; -webkit-user-drag: none;
}
.mg-lightbox__frame[style*="width"] .mg-lightbox__img { max-width: none; max-height: none; }
.mg-lightbox__shield { position: absolute; inset: 0; z-index: 3; }
.mg-lightbox__count {
	position: absolute; top: 18px; left: clamp(14px, 3vw, 28px); z-index: 4;
	padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, .45);
	font-size: .75rem; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .9);
}
.mg-lightbox__caption {
	position: absolute; left: 50%; bottom: 14px; z-index: 4; transform: translateX(-50%);
	max-width: min(720px, calc(100vw - 32px)); margin: 0; padding: 7px 16px; border-radius: 999px;
	background: rgba(0, 0, 0, .5); text-align: center; font-size: .875rem; line-height: 1.35; color: #f3f1ec;
}
.mg-lightbox__caption:empty { display: none; }
.mg-lightbox__btn {
	display: grid; place-items: center; width: 46px; height: 46px; padding: 0;
	border: 1px solid var(--mg-lb-btn-bd, rgba(255, 255, 255, .28)); border-radius: 50%;
	background: rgba(0, 0, 0, .5); color: #fff; cursor: pointer;
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	transition: background-color .3s var(--mg-ease), border-color .3s var(--mg-ease), transform .3s var(--mg-ease);
}
.mg-lightbox__btn:hover { background: rgba(0, 0, 0, .72); border-color: var(--mg-lb-btn-bd, rgba(255, 255, 255, .6)); }
.mg-lightbox__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.mg-lightbox__btn svg { width: 20px; height: 20px; }
.mg-lightbox__close { position: absolute; top: 12px; right: clamp(12px, 3vw, 24px); z-index: 5; width: 48px; height: 48px; }
.mg-lightbox__close svg { width: 22px; height: 22px; stroke-width: 2; }
.mg-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; }
.mg-lightbox__nav:hover { transform: translateY(-50%) scale(1.05); }
.mg-lightbox__prev { left: clamp(8px, 2vw, 28px); }
.mg-lightbox__next { right: clamp(8px, 2vw, 28px); }
.mg-lightbox__spinner { position: absolute; left: 50%; top: 50%; margin: -14px 0 0 -14px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .2); border-top-color: rgba(255, 255, 255, .85); animation: mg-spin .8s linear infinite; opacity: 0; transition: opacity .2s; pointer-events: none; }
.mg-lightbox.is-loading .mg-lightbox__spinner { opacity: 1; transition-delay: .25s; }
@keyframes mg-spin { to { transform: rotate(360deg); } }
/* Short screens (phones in landscape): slimmer margins so the photo gets the room */
@media (max-height: 520px) {
	.mg-lightbox { --_pt: 10px; --_pb: 10px; --_px: 64px; }
	.mg-lightbox.has-caption { --_pb: 44px; }
	.mg-lightbox__close { top: 8px; right: 8px; width: 42px; height: 42px; }
	.mg-lightbox__count { top: 12px; left: 10px; }
	.mg-lightbox__nav { width: 42px; height: 42px; }
	.mg-lightbox__caption { bottom: 6px; }
}
html.mg-locked, html.mg-locked body { overflow: hidden; }

/* Responsive ------------------------------------------------------------ */
@media (max-width: 1023px) {
	.mg-footer__start, .mg-footer__end, .mg-footer__contact { gap: 14px; }
}
@media (max-width: 699px) {
	:root { --mg-pad: 18px; }
	.mg-header__inner { padding-block: 10px; }
	.mg-header .mg-header__cta { padding: calc(var(--mg-hb-py) * .8) calc(var(--mg-hb-px) * .8); font-size: calc(var(--mg-hb-fs) * .93); }
	.mg-logo__img { max-width: 48vw; }
	/* Phone: two compact lines — logo + copyright, then phone · email. */
	.mg-footer__inner { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "logo copy" "end end"; align-items: center; gap: 6px 12px; padding-block: 10px 12px; min-height: 0; }
	.mg-footer__start { display: contents; }
	.mg-footer .mg-logo { grid-area: logo; }
	.mg-footer__copy { grid-area: copy; justify-self: end; white-space: normal; text-align: right; font-size: .6875rem; }
	.mg-footer__end { grid-area: end; gap: 8px; justify-content: space-between; min-width: 0; }
	.mg-footer__contact { gap: 6px 14px; flex-wrap: wrap; font-size: .75rem; min-width: 0; }
	.mg-footer-btns .mg-footer__link { height: 28px; padding: 0 10px; }
	.mg-footer__pin { width: 30px; height: 30px; }
	.mg-lightbox { --_px: 8px; --_pt: 70px; }
	.mg-lightbox.has-caption { --_pb: 70px; }
	.mg-lightbox__nav { display: none; }
}
@media (max-width: 699px) and (max-height: 520px) {
	.mg-lightbox { --_pt: 8px; --_px: 56px; }
}
@media (max-width: 360px) {
	.mg-header__cta .mg-icon { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
	.mg-js .mg-tile { opacity: 1; transform: none; }
}

/* Print: photos are hidden (screenshot / print deterrent) */
@media print {
	body.mg-guard .mg-mosaic, body.mg-guard .mg-lightbox, body.mg-protect .mg-mosaic, body.mg-protect .mg-lightbox { display: none !important; }
	.mg-header { position: static; }
}