/*
 * Monte Baunk — Site Engine
 *
 * A dark room. Facts are set in typewriter mono so they read as true;
 * everything around them is grain, smoke and colour borrowed from the work.
 * Colour is never declared by the interface — each artwork lends its own
 * dominant hue to the chrome while you are looking at it, via --accent.
 */

/* Chrome auto-darkens light backgrounds on pages it thinks have no dark
   theme, which turned the light sections mid-grey. Declaring the scheme stops
   it. Tokens live on :root as well as .mb because the header, menu and music
   player are rendered outside the .mb wrapper — when they were scoped to .mb
   alone, every var() in the header resolved to nothing and the menu had no
   background at all. */
:root { color-scheme: dark; }

:root, .mb {
	/* Monte's working palette, exactly as he uses it in the artwork. Every
	   accent on this site is one of these six chromatics — an artwork's
	   dominant colour is sampled and then snapped to the nearest of them, so
	   the interface can never drift off-brand. */
	--void:   #0E0E10;
	--room:   #202124;
	--smoke:  #38363C;
	--line:   rgba(155, 155, 155, .22);
	--ash:    #9B9B9B;
	--chalk:  #F2F2F3;
	--paper:  #F2F2F3;

	--violet: #A405FD;
	--pink:   #FF0168;
	--orange: #FFA700;
	--cyan:   #05B1FF;
	--mint:   #00EBA2;
	--blue:   #0024FF;

	--accent: #05B1FF;

	--serif: "Playfair Display", "Bodoni Moda", Didot, "Times New Roman", serif;
	--mono:  ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;
	--sans:  system-ui, -apple-system, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
	--hand:  "Bradley Hand", "Segoe Print", "Comic Sans MS", var(--sans);

	--wrap: 1680px;
	--gut: clamp(20px, 5vw, 72px);
	--grain: .04;

}

.mb {
	background: var(--void);
	color: var(--chalk);
	font-family: var(--sans);
	font-size: clamp(16px, 1.05vw, 18px);
	line-height: 1.6;
	position: relative;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}
body.mb-doc { background: var(--void); color: var(--chalk); font-family: var(--sans); margin: 0; }
:where(body.mb-doc, .mb-head, .mb-menu, .mb-music) :where(a) { color: inherit; text-decoration: none; }
.mb-head *, .mb-menu *, .mb-music * { box-sizing: border-box; }
.mb-head :focus-visible, .mb-menu :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.mb *, .mb *::before, .mb *::after { box-sizing: border-box; }

/* Reset whatever the theme is doing to the page around us.
   These are wrapped in :where() so they carry zero specificity — a plain
   element reset must never outrank a component rule. Getting this wrong is
   what sized the header logo at its natural 768px and turned the header into
   a full-screen blurred sheet over the site. */
:where(body.mb-takeover) { background: #0E0E10; margin: 0; }
:where(body.mb-takeover) :where(.mb) { margin: 0; padding: 0; }
:where(body.mb-takeover) :where(img) { max-width: 100%; height: auto; }

/* The grain. One tiled SVG, fixed, never interactive. Every surface on this
   site is slightly dirty — that is what keeps it from looking like a default
   dark theme. */
.mb::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9;
	pointer-events: none;
	opacity: var(--grain);
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.mb-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.mb-center { text-align: center; }

.mb-mono {
	font-family: var(--mono);
	font-size: clamp(10px, .72vw, 12px);
	letter-spacing: .13em;
	text-transform: uppercase;
	line-height: 1.5;
}

.mb-hand { font-family: var(--hand); letter-spacing: 0; text-transform: none; }
.mb-dim { color: var(--ash); }

:where(.mb) :where(a) { color: inherit; text-decoration: none; }
.mb a:hover { text-decoration: none; }

.mb :focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

.mb-skip {
	position: absolute; left: -9999px; top: 0; z-index: 200;
	background: var(--chalk); color: var(--void); padding: 12px 18px;
	font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
}
.mb-skip:focus { left: 12px; top: 12px; }

.mb-h1 {
	font-family: var(--serif); font-weight: 900;
	font-size: clamp(46px, 9vw, 150px);
	line-height: .88; letter-spacing: -.02em; margin: .1em 0 .3em;
}
.mb-h2 {
	font-family: var(--serif); font-weight: 900;
	font-size: clamp(34px, 6vw, 96px);
	line-height: .92; letter-spacing: -.02em; margin: 0 0 .4em;
}
.mb-h3 {
	font-family: var(--serif); font-weight: 700;
	font-size: clamp(24px, 2.6vw, 40px);
	line-height: 1.05; letter-spacing: -.01em; margin: 0 0 .8em;
}
.mb-lead { font-size: clamp(18px, 1.5vw, 24px); line-height: 1.5; max-width: 34em; color: #C9C9CC; }
.mb p { margin: 0 0 1em; }
.mb-rule { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }

.mb-sec-head { margin-bottom: clamp(28px, 4vw, 60px); }

/* --------------------------------------------------------------- buttons */

.mb .mb-btn, .mb a.mb-btn, .mb button.mb-btn {
	display: inline-block;
	font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
	padding: 17px 30px;
	background: var(--chalk); color: var(--void);
	border: 1px solid var(--chalk); border-radius: 0; cursor: pointer;
	transition: background .25s, color .25s, border-color .25s;
}
.mb .mb-btn:hover, .mb a.mb-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.mb .mb-btn--ghost, .mb a.mb-btn--ghost { background: transparent; color: var(--chalk); }
.mb .mb-btn--ghost:hover, .mb a.mb-btn--ghost:hover { background: var(--chalk); color: var(--void); border-color: var(--chalk); }
.mb .mb-btn--dark, .mb a.mb-btn--dark { background: var(--void); color: var(--paper); border-color: var(--void); }
.mb .mb-btn--dark:hover, .mb a.mb-btn--dark:hover { background: var(--accent); border-color: var(--accent); }
.mb .mb-btn--buy, .mb a.mb-btn--buy { background: var(--pink); border-color: var(--pink); color: #fff; }
.mb .mb-btn--buy:hover, .mb a.mb-btn--buy:hover { background: #fff; border-color: #fff; color: var(--pink); }
.mb .mb-btn--sm { padding: 11px 18px; font-size: 11px; }

/* Inverted sections: the hard flip from black to light that gives the page
   its pulse. Sections separate by surface change, never by a divider. */
.mb-invert { background: var(--paper); color: var(--void); }
.mb-invert .mb-dim { color: #6f6f74; }
.mb-invert .mb-lead { color: #2c2c30; }

/* ---------------------------------------------------------------- header */

.mb-head {
	position: fixed; inset: 0 0 auto 0; z-index: 60;
	background: linear-gradient(180deg, rgba(14,14,16,.96), rgba(14,14,16,.75) 72%, transparent);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid transparent;
	transition: background .3s, border-color .3s;
}
.mb-head.is-stuck { background: rgba(14,14,16,.97); border-bottom-color: var(--line); }

.mb-head-in {
	max-width: var(--wrap); margin: 0 auto;
	padding: 12px var(--gut);
	display: flex; align-items: center; gap: clamp(16px, 3vw, 40px);
	min-height: 68px;
}

body.admin-bar .mb-head { top: 32px; }
body.admin-bar .mb-menu { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .mb-head { top: 46px; }
	body.admin-bar .mb-menu { top: 46px; }
}

.mb-head-mark { display: block; flex: none; line-height: 0; }

/* The height has to win against the global img reset, or the logo renders at
   its natural size — which turned the header into a full-screen blurred sheet
   sitting over the whole site. */
.mb-head .mb-logo-img,
.mb-foot-logo .mb-logo-img,
.mb-logo-img {
	display: block;
	width: auto; max-width: none;
	object-fit: contain;
}
.mb-head .mb-logo-img { height: clamp(30px, 3vw, 42px); max-height: 42px; }
.mb-foot-logo .mb-logo-img { height: clamp(52px, 6vw, 84px); max-height: 84px; }

.mb-logo-type {
	font-family: var(--serif); font-weight: 900; color: var(--chalk);
	font-size: clamp(13px, 1.2vw, 18px); line-height: .92; letter-spacing: .04em; display: block;
}
.mb-foot-logo .mb-logo-type { font-size: clamp(30px, 5vw, 58px); }

.mb-head-links { display: flex; gap: clamp(16px, 2vw, 30px); margin-left: auto; align-items: center; }
.mb-head-links a { color: var(--ash); white-space: nowrap; transition: color .2s; }
.mb-head-links a:hover { color: var(--chalk); }
@media (max-width: 1000px) { .mb-head-links { display: none; } }

.mb-burger {
	display: flex; align-items: center; gap: 10px;
	background: none; border: 1px solid var(--line); color: var(--chalk);
	padding: 9px 14px; cursor: pointer; margin-left: auto;
	transition: background .2s, color .2s, border-color .2s;
}
@media (min-width: 1001px) { .mb-burger { display: none; } }
.mb-burger:hover { background: var(--chalk); color: var(--void); border-color: var(--chalk); }
.mb-burger-bars { display: grid; gap: 4px; width: 17px; }
.mb-burger-bars span { display: block; height: 1.5px; background: currentColor; transition: transform .3s; }
.mb-burger[aria-expanded="true"] .mb-burger-bars span:first-child { transform: translateY(2.75px) rotate(45deg); }
.mb-burger[aria-expanded="true"] .mb-burger-bars span:last-child { transform: translateY(-2.75px) rotate(-45deg); }

/* ------------------------------------------------------------------ menu
   A compact panel, not a full-screen wall of display type. On desktop the
   navigation already sits in the header, so this only exists below 1000px. */

.mb-menu {
	position: fixed; inset: 0; z-index: 65;
	background: rgba(10, 10, 12, .74);
	opacity: 0; transition: opacity .28s ease;
}
.mb-menu[hidden] { display: none; }
.mb-menu.is-open { opacity: 1; }

.mb-menu-inner {
	position: absolute; top: 0; right: 0; bottom: 0;
	width: min(400px, 88vw);
	background: var(--room);
	border-left: 1px solid var(--line);
	padding: clamp(78px, 11vh, 120px) clamp(22px, 5vw, 40px) 30px;
	display: flex; flex-direction: column; justify-content: space-between;
	transform: translateX(100%);
	transition: transform .38s cubic-bezier(.16,1,.3,1);
	overflow-y: auto;
}
.mb-menu.is-open .mb-menu-inner { transform: none; }

.mb-menu-list { list-style: none; margin: 0; padding: 0; }
.mb-menu-list li { border-bottom: 1px solid var(--line); }
.mb-menu-list li:first-child { border-top: 1px solid var(--line); }
.mb-menu-list a {
	display: flex; align-items: baseline; gap: 14px;
	padding: 17px 2px;
	font-family: var(--serif); font-weight: 700;
	font-size: clamp(21px, 4.2vw, 28px); line-height: 1.12; letter-spacing: -.01em;
	transform: none;
	transition: color .2s, padding-left .25s;
}
.mb-menu-list a:hover { color: var(--accent); padding-left: 10px; }
.mb-menu-no { color: var(--ash); font-size: 11px; flex: none; }

.mb-menu-foot { display: flex; flex-direction: column; gap: 9px; margin-top: 36px; color: var(--ash); }
.mb-menu-foot a:hover { color: var(--chalk); }

.mb-menu-x {
	position: absolute; top: 20px; right: clamp(22px, 5vw, 40px);
	background: none; border: 0; color: var(--ash); cursor: pointer;
	font-size: 26px; line-height: 1; padding: 6px;
}
.mb-menu-x:hover { color: var(--chalk); }

/* --------------------------------------------------------------- wordmark
   The letters are individually positioned so the mark can rearrange itself
   into MOUNTEBANK — the same ten letters the name was made from. */

.mb-wordmark {
	background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
	font-family: var(--serif); font-weight: 900;
	display: inline-flex; line-height: .86; letter-spacing: .01em;
}
.mb-wm-l { display: inline-block; transition: transform .7s cubic-bezier(.7,0,.2,1), color .4s; }
.mb-wm-sp { display: inline-block; width: .28em; }
.mb-wordmark:hover .mb-wm-l { color: var(--accent); }
.mb-wordmark.is-scrambling .mb-wm-l { transform: translateY(calc(var(--dy, 0) * 1px)) translateX(calc(var(--dx, 0) * 1px)); }

.mb-hero-wm { font-size: clamp(42px, 11.5vw, 190px); text-shadow: 0 4px 60px rgba(14,14,16,.8); }
.mb-foot-logo { display: block; }
.mb-foot-logo .mb-logo-img { height: clamp(52px, 6vw, 88px); max-height: 88px; }
.mb-foot-logo .mb-logo-type { font-size: clamp(30px, 5vw, 62px); }
.mb-intro-wm { font-size: clamp(34px, 9vw, 150px); color: #fff; }

/* --------------------------------------------------------------- etymology */

.mb-etym {
	position: fixed; inset: 0; z-index: 120;
	background: rgba(14,14,16, .93);
	display: grid; place-items: center; padding: var(--gut);
	opacity: 0; transition: opacity .3s;
	overflow-y: auto;
}
.mb-etym[hidden] { display: none; }
.mb-etym.is-open { opacity: 1; }
.mb-etym-card {
	background: var(--room); border: 1px solid var(--line);
	max-width: 640px; padding: clamp(26px, 4vw, 54px); position: relative;
	transform: translateY(14px); transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.mb-etym.is-open .mb-etym-card { transform: none; }
.mb-etym-x { position: absolute; top: 10px; right: 14px; background: none; border: 0; color: var(--ash); font-size: 30px; line-height: 1; cursor: pointer; }
.mb-etym-word { font-family: var(--serif); font-weight: 900; font-size: clamp(32px, 5.5vw, 64px); line-height: 1; margin: .2em 0 .1em; letter-spacing: -.01em; }
.mb-etym-phon { margin-bottom: 1.6em; }
.mb-etym-def { font-size: 17px; line-height: 1.6; }
.mb-etym-root { color: var(--ash); font-size: 16px; }

/* ------------------------------------------------------------------- hero */

.mb-hero { position: relative; min-height: 100svh; display: grid; align-items: center; overflow: hidden; }
.mb-hero-bg { position: absolute; inset: 0; }

/* When no flat artwork file exists yet, the hero becomes a wall of work
   rather than one framed mockup stretched across the screen. */
.mb-hero-wall {
	position: absolute; inset: -2%;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 1fr;
	gap: 6px;
	transform: rotate(-2deg) scale(1.12);
}
.mb-hero-tile { display: block; overflow: hidden; background: var(--room); }
.mb-hero-tile img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	filter: saturate(1.05) brightness(.82);
}
@media (max-width: 900px) {
	.mb-hero-wall { grid-template-columns: repeat(3, 1fr); transform: rotate(-2deg) scale(1.18); }
	.mb-hero-tile:nth-child(n+10) { display: none; }
}
.mb-hero.is-wall .mb-hero-scrim {
	background:
		linear-gradient(180deg, rgba(14,14,16,.9) 0%, rgba(14,14,16,.62) 30%, rgba(14,14,16,.72) 60%, rgba(14,14,16,.97) 100%),
		radial-gradient(95% 70% at 28% 52%, rgba(14,14,16,.9) 0%, rgba(14,14,16,.45) 55%, rgba(14,14,16,.2) 100%);
}
.mb-hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mb-hero-scrim {
	position: absolute; inset: 0;
	background:
		linear-gradient(180deg, rgba(14,14,16,.85) 0%, rgba(14,14,16,.35) 26%, rgba(14,14,16,.35) 46%, rgba(14,14,16,.96) 100%),
		radial-gradient(110% 70% at 30% 55%, rgba(14,14,16,.72) 0%, rgba(14,14,16,.25) 55%, transparent 100%),
		/* tighter plate directly behind the type — one overall wash is never
		   enough to hold a headline on work this loud */
		radial-gradient(58% 78% at 26% 52%, rgba(14,14,16,.86) 0%, transparent 72%);
}
.mb-hero-inner { position: relative; z-index: 2; }
.mb-hero-inner { position: relative; z-index: 2; padding: 0 var(--gut); max-width: var(--wrap); margin: 0 auto; width: 100%; }
.mb-hero-line { font-size: clamp(17px, 1.7vw, 24px); margin: .8em 0 0; max-width: 20em; color: #DCDCDE; text-shadow: 0 1px 24px rgba(14,14,16,.9); }

.mb-hero-meta {
	position: absolute; left: var(--gut); right: var(--gut); bottom: clamp(20px, 3vw, 40px); z-index: 2;
	display: flex; gap: 28px; color: rgba(242,242,243,.55);
	border-top: 1px solid rgba(242,242,243,.16); padding-top: 14px;
}
.mb-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2.2em; }

/* On a phone the text block is full width, so the plate behind it was
   swallowing the artwork. Ease it off and let the bottom wash do the work. */
@media (max-width: 760px) {
	.mb-hero-scrim {
		background: linear-gradient(180deg, rgba(14,14,16,.72) 0%, rgba(14,14,16,.15) 22%, rgba(14,14,16,.55) 58%, rgba(14,14,16,.95) 100%);
	}
		.mb-hero-caption { right: var(--gut); }
	.mb-hero-line { max-width: none; }
}

/* ------------------------------------------------------------------- hook */

.mb-hook { padding: clamp(70px, 11vw, 190px) 0; }
.mb-hook-h { font-family: var(--serif); font-weight: 900; font-size: clamp(30px, 5.2vw, 84px); line-height: 1.02; letter-spacing: -.025em; margin: 0 0 .8em; text-wrap: balance; }
/* A grid, not CSS columns — columns let the two paragraphs start at
   different heights, which reads as an accident. */
.mb-hook-body { max-width: 52em; font-size: clamp(15px, 1.05vw, 17px); line-height: 1.65; display: grid; gap: 24px 56px; }
.mb-hook-body p { margin: 0; }
@media (min-width: 900px) { .mb-hook-body { grid-template-columns: 1fr 1fr; align-items: start; } }

/* --------------------------------------------------------------- the name */

.mb-name { padding: clamp(64px, 8vw, 130px) 0 clamp(50px, 6vw, 90px); border-top: 1px solid var(--line); }
.mb-name-h {
	font-family: var(--serif); font-weight: 900;
	font-size: clamp(28px, 4.6vw, 74px); line-height: 1.02; letter-spacing: -.02em;
	margin: .3em 0 1em;
}
.mb-etymcard {
	margin: 0; padding: clamp(22px, 3vw, 40px);
	border: 1px solid var(--line); background: var(--room);
	max-width: 780px;
}
.mb-etymcard figcaption { margin-bottom: 18px; }
.mb-name-wm { font-size: clamp(26px, 4vw, 58px); margin-bottom: 20px; }
.mb-etymcard-def { font-size: 16px; color: #B4B4B8; max-width: 46em; }
.mb-etymcard-def strong { color: var(--chalk); }
.mb-etymcard .mb-btn { margin-top: 8px; }
.mb-name-cols { display: grid; gap: 26px; max-width: 62em; margin-bottom: 34px; }
@media (min-width: 860px) { .mb-name-cols { grid-template-columns: repeat(3, 1fr); } }
.mb-name-cols p { margin: 0; color: #B4B4B8; }

/* --------------------------------------------------------------- fullbleed */

.mb-bleed { position: relative; }
.mb-bleed-link { display: block; position: relative; }
.mb-bleed img { display: block; width: 100%; height: 100svh; object-fit: cover; }
.mb-bleed-cap {
	position: absolute; left: var(--gut); bottom: clamp(18px, 2.6vw, 38px);
	color: rgba(255,255,255,.82); text-shadow: 0 1px 20px rgba(0,0,0,.7);
}
.mb-bleed::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(14,14,16,.55), transparent 30%, transparent 60%, rgba(14,14,16,.75));
}

/* ------------------------------------------------------------------- rail */

.mb-rail-sec { padding: clamp(50px, 6vw, 90px) 0 clamp(70px, 10vw, 160px); }
.mb-rail { position: relative; margin-top: 66px; }
.mb-rail-track {
	display: flex; gap: clamp(16px, 2vw, 34px);
	overflow-x: auto; scroll-snap-type: x mandatory;
	padding: 0 var(--gut) 20px;
	scrollbar-width: none;
}
.mb-rail-track::-webkit-scrollbar { display: none; }
.mb-rail-item { flex: 0 0 auto; width: min(78vw, 380px); scroll-snap-align: start; }
.mb-rail-item.is-big { width: min(88vw, 520px); }
/* Parked above the rail rather than floating over it — sitting mid-card they
   landed on top of the artwork titles. */
.mb-rail-nav {
	position: absolute; top: -66px; z-index: 4;
	width: 46px; height: 46px;
	background: transparent; border: 1px solid var(--line); color: var(--chalk);
	cursor: pointer; font-size: 16px;
	transition: background .2s, color .2s, border-color .2s, opacity .2s;
}
.mb-rail-nav:hover { background: var(--chalk); border-color: var(--chalk); color: var(--void); }
.mb-rail-nav[disabled] { opacity: .22; cursor: default; }
.mb-rail-prev { right: calc(var(--gut) + 50px); }
.mb-rail-next { right: var(--gut); }
@media (max-width: 760px) { .mb-rail-nav { display: none; } }
@media (max-width: 760px) { .mb-rail-nav { display: none; } }

/* ------------------------------------------------------------------- card */

.mb-card { position: relative; }
/* The numeral is anchored to the bottom of the image, not the bottom of the
   whole card — otherwise it lands on top of the title and specs. */
.mb-card-top { display: block; position: relative; }
.mb-card-link { display: block; }
.mb-card-media {
	display: block; position: relative; overflow: hidden;
	aspect-ratio: var(--ratio, 1.5); background: var(--smoke);
}
.mb-card-media img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .8s cubic-bezier(.16,1,.3,1), filter .5s;
}
.mb-card:hover .mb-card-media img { transform: scale(1.045); }
.mb-card.is-sold .mb-card-media img { filter: grayscale(1) brightness(.62); }
.mb-card.is-sold:hover .mb-card-media img { filter: grayscale(.4) brightness(.8); }

/* The catalogue numeral is the loudest thing on the card and it straddles the
   image edge in the work's own colour. On the old site it was 12px grey. */
.mb-card-no {
	position: absolute; left: 10px; bottom: 6px; z-index: 2;
	font-family: var(--mono); font-weight: 500;
	font-size: 11px; letter-spacing: .14em;
	color: var(--void); background: var(--accent);
	padding: 5px 9px;
	pointer-events: none;
}
.mb-card-body { display: block; padding: 18px 0 0 0; }
.mb-card-title { display: block; font-family: var(--serif); font-weight: 700; font-size: clamp(21px, 1.9vw, 30px); line-height: 1.1; }
.mb-card-specs { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--ash); margin-top: 9px; }
.mb-card-status { margin-top: 9px; color: var(--mint); }
.mb-card-status.is-sold { color: var(--ash); }
.mb-advisory {
	position: absolute; inset: auto 10px 10px 10px; z-index: 3;
	background: rgba(14,14,16,.82); border: 1px solid var(--line);
	padding: 7px 9px; color: #FF6FA5; font-size: 9px;
}

/* ---------------------------------------------------------------- process */

.mb-process { padding: clamp(70px, 10vw, 170px) 0; border-top: 1px solid var(--line); }
.mb-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(34px, 4vw, 60px); }
@media (min-width: 900px) { .mb-steps { grid-template-columns: repeat(3, 1fr); } }
.mb-step { border-top: 1px solid var(--line); padding-top: 22px; }
.mb-step-no { display: block; color: var(--accent); margin-bottom: 22px; }
.mb-step-t { font-family: var(--serif); font-weight: 900; font-size: clamp(28px, 3.4vw, 52px); line-height: 1; margin: 0 0 .45em; letter-spacing: -.01em; }
.mb-step-b { color: #B4B4B8; margin: 0; }
.mb-steps--wide { margin-bottom: clamp(50px, 7vw, 110px); }

/* ------------------------------------------------------------ credibility */

.mb-cred { padding: clamp(70px, 10vw, 170px) 0; border-top: 1px solid var(--line); }
.mb-cred-grid { display: grid; gap: clamp(20px, 2.4vw, 40px); }
@media (min-width: 860px) { .mb-cred-grid { grid-template-columns: repeat(3, 1fr); } }
.mb-cred-card { background: var(--room); border: 1px solid var(--line); }
.mb-cred-media { aspect-ratio: 4/3; overflow: hidden; background: var(--smoke); }
.mb-cred-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.16,1,.3,1); }
.mb-cred-card:hover .mb-cred-media img { transform: scale(1.05); }
.mb-cred-t { margin: 24px 24px 10px; color: var(--accent); font-family: var(--mono); font-size: 11px; letter-spacing: .13em; font-weight: 400; }
.mb-cred-b { margin: 0 24px 26px; color: #B4B4B8; font-size: 16px; }

/* ------------------------------------------------- commission CTA / teaser */

.mb-commcta { padding: clamp(70px, 11vw, 180px) 0; }
.mb-commcta .mb-h2 { max-width: 12em; }
.mb-commcta .mb-lead { margin-bottom: 2.2em; }
.mb-roomteaser { padding: clamp(60px, 9vw, 150px) 0; border-top: 1px solid var(--line); text-align: center; }
.mb-roomteaser .mb-lead { margin: 0 auto 2.4em; }

/* ---------------------------------------------------------------- gallery */

.mb-gal { padding: clamp(110px, 14vw, 190px) 0 clamp(60px, 8vw, 120px); }
.mb-gal-head { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; justify-content: space-between; }
.mb-viewswitch { display: flex; border: 1px solid var(--line); }
.mb-viewswitch button {
	background: none; border: 0; color: var(--ash); cursor: pointer;
	padding: 13px 20px; font-family: var(--mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
	transition: background .2s, color .2s;
}
.mb-viewswitch button.is-on { background: var(--chalk); color: var(--void); }

.mb-filtertoggle {
	display: none; background: none; border: 1px solid var(--line); color: var(--chalk);
	padding: 12px 18px; cursor: pointer; margin: 26px 0 0;
}
.mb-filtertoggle[aria-expanded="true"] { background: var(--chalk); color: var(--void); }
.mb-filters { display: flex; flex-direction: column; gap: 14px; margin: clamp(30px, 4vw, 54px) 0 18px; }

/* On a phone the filter block was eating the whole first screen before any
   artwork appeared, so it collapses behind a single control. */
@media (max-width: 760px) {
	.mb-filtertoggle { display: inline-block; }
	.mb-filters { display: none; margin-top: 18px; }
	.mb-filters.is-open { display: flex; }
	.mb-filter > .mb-mono:first-child { width: 100%; }
	.mb-gal-head { flex-direction: column; align-items: flex-start; }
}
.mb-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mb-filter > .mb-mono:first-child { width: 74px; flex: none; }
.mb-chip {
	background: none; border: 1px solid var(--line); color: var(--ash);
	padding: 8px 13px; cursor: pointer;
	font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
	transition: background .2s, color .2s, border-color .2s;
}
.mb-chip:hover { color: var(--chalk); border-color: var(--chalk); }
.mb-chip.is-on { background: var(--chalk); border-color: var(--chalk); color: var(--void); }
.mb-gal-count { margin: 0 0 8px; }

/* Justified rows.
   Rows are laid out by script from each image's true aspect ratio, so every
   artwork keeps its own proportions, nothing is cropped and nothing is padded
   out with dead space. Before the script runs this is a plain flexible grid,
   so the page is never broken with JS off. */
.mb-justified { padding: 0 var(--gut); display: flex; flex-wrap: wrap; gap: 12px; }
.mb-jitem { margin: 0; position: relative; flex: 1 1 300px; }
.mb-justified.is-laid .mb-jitem { flex: none; }
.mb-jitem a { display: block; position: relative; height: 100%; }
.mb-jitem img { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--smoke); }
.mb-jitem.is-sold img { filter: grayscale(1) brightness(.6); transition: filter .5s; }
.mb-jitem.is-sold:hover img { filter: grayscale(.35) brightness(.85); }
.mb-jitem.is-hidden { display: none; }

.mb-jcap {
	position: absolute; inset: auto 0 0 0; padding: 46px 16px 14px;
	background: linear-gradient(transparent, rgba(14,14,16,.9));
	opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s;
	display: grid; gap: 2px;
}
.mb-jitem:hover .mb-jcap, .mb-jitem a:focus-visible .mb-jcap { opacity: 1; transform: none; }
.mb-jcap-no { color: var(--accent); }
.mb-jcap-t { font-family: var(--serif); font-weight: 700; font-size: 20px; line-height: 1.1; }
.mb-jcap-s { color: rgba(242,242,243,.6); }
.mb-empty { padding: 60px 0; color: var(--ash); font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase; font-size: 12px; }

/* ------------------------------------------------------------------- room
   A corridor built from CSS 3D. Real perspective, GPU-composited, no WebGL
   and no library. Movement is on a rail — forward and back — which is what
   makes it reliable on a phone. The light pooling on each wall is painted,
   not calculated; CSS cannot light a scene. */

.mb-room {
	position: relative;
	height: 100vh;      /* fallback first — svh is ignored by older engines */
	height: 100svh;
	min-height: 620px;
	overflow: hidden;
	background: radial-gradient(90% 60% at 50% 45%, #212124 0%, #0A0A0C 70%);
}
.mb-room[hidden] { display: none; }

/* Entering the room takes over the screen — otherwise it sits in the middle
   of a scrolling page and never feels like a place. */
.mb-room.is-live { position: fixed; inset: 0; z-index: 90; height: 100vh; height: 100dvh; }
body.mb-inroom { overflow: hidden; }
.mb-room-exit {
	position: absolute; right: var(--gut); top: calc(var(--gut) * -1 + 12px);
	background: rgba(14,14,16,.8); border: 1px solid var(--line); color: var(--chalk);
	padding: 12px 16px; cursor: pointer; backdrop-filter: blur(8px);
}
.mb-room-exit:hover { background: var(--chalk); color: var(--void); border-color: var(--chalk); }
.mb-room-stage { position: absolute; inset: 0; perspective: 1050px; perspective-origin: 50% 48%; cursor: grab; }
.mb-room-stage:active { cursor: grabbing; }
.mb-room-world {
	position: absolute; inset: 0;
	transform-style: preserve-3d;
	transform: translateZ(var(--cam, 0px)) rotateY(var(--yaw, 0deg));
	will-change: transform;
}
.mb-room-world > * { position: absolute; transform-style: flat; }

.mb-room-floor, .mb-room-ceil {
	left: 50%; top: 50%;
	width: 660px; margin-left: -330px;
	height: calc(var(--len) * 2); margin-top: calc(var(--len) * -1);
	background:
		linear-gradient(180deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.15) 42%, rgba(0,0,0,.9) 100%),
		repeating-linear-gradient(90deg, #1B1B1E 0 130px, #1F1F22 130px 260px);
}
.mb-room-floor { transform: rotateX(90deg) translateZ(-330px); }
.mb-room-ceil  { transform: rotateX(-90deg) translateZ(-330px); }

.mb-room-wall {
	left: 50%; top: 50%;
	height: 660px; margin-top: -330px;
	width: calc(var(--len) * 2); margin-left: calc(var(--len) * -1);
	background: linear-gradient(180deg, #141416 0%, #2B2B30 42%, #0C0C0E 100%);
}
.mb-room-wall--l { transform: rotateY(90deg) translateZ(-340px); }
.mb-room-wall--r { transform: rotateY(-90deg) translateZ(-340px); }

.mb-room-end {
	left: 50%; top: 50%; width: 660px; height: 660px; margin: -330px 0 0 -330px;
	transform: translateZ(calc(var(--z) * -1));
	background: radial-gradient(70% 70% at 50% 40%, #26262A, #0A0A0C 75%);
}

/* Pieces you have already walked past are culled by script rather than left
   to smear across the edges of the frame. */
.mb-room-piece.is-behind { opacity: 0; pointer-events: none; }
.mb-room-piece {
	left: 50%; top: 50%;
	width: var(--w); height: var(--h);
	margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
	cursor: pointer;
	/* Lit by distance from script, so work further down the room is still
	   readable instead of a grey rectangle you cannot make out. */
	filter: brightness(var(--lit, .8));
	transition: filter .35s ease, opacity .3s ease;
}
.mb-room-piece.is-behind { opacity: 0; pointer-events: none; }

/* Toed in toward the middle of the room rather than flat on the wall, so you
   can read them while walking instead of only from the corner of your eye. */
.mb-room-piece--l { transform: translateX(-268px) translateZ(calc(var(--z) * -1)) rotateY(64deg); }
.mb-room-piece--r { transform: translateX(268px)  translateZ(calc(var(--z) * -1)) rotateY(-64deg); }
.mb-room-piece.is-focus { --lit: 1.28; }

.mb-room-frame {
	width: 100%; height: 100%;
	border: 8px solid #0C0C0E;
	box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 40px 90px rgba(0,0,0,.85);
	background: #0C0C0E;
}
.mb-room-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mb-room-label { position: absolute; left: 2px; bottom: -30px; color: var(--accent); opacity: .85; }
.mb-room-pool {
	position: absolute; left: -40%; top: -46%; width: 180%; height: 190%;
	pointer-events: none; z-index: -1;
	background: radial-gradient(ellipse at 50% 28%, rgba(255,255,255,.20), transparent 62%);
}

.mb-room-hud { position: absolute; inset: 0; padding: var(--gut); pointer-events: none; z-index: 5; }
.mb-room-hud > *:not(.mb-room-exit) { position: absolute; }
.mb-room-info { left: var(--gut); right: auto; bottom: calc(var(--gut) + 30px); max-width: 300px; transition: left .35s ease, right .35s ease; }
.mb-room-info.is-right { left: auto; right: var(--gut); }
@media (max-width: 720px) { .mb-room-info.is-right { left: var(--gut); right: var(--gut); } }
.mb-room-exit { top: var(--gut); }
.mb-room-hud > * { pointer-events: auto; }
.mb-room-hint { top: var(--gut); left: 50%; transform: translateX(-50%); white-space: nowrap; opacity: .55; }
.mb-room-info {
	max-width: 340px; background: rgba(14,14,16,.82); border: 1px solid var(--line);
	padding: 20px; backdrop-filter: blur(8px);
}
.mb-room-info h3 { font-family: var(--serif); font-weight: 700; font-size: 26px; line-height: 1.05; margin: 6px 0 8px; }
.mb-room-info .mb-mono { color: var(--ash); }
.mb-room-info .mb-btn { margin-top: 14px; }
.mb-room-ctrl { position: absolute; right: var(--gut); bottom: var(--gut); display: flex; gap: 8px; align-items: center; }
.mb-room-btn {
	min-width: 52px; height: 52px; padding: 0 14px;
	border: 1px solid var(--line); background: rgba(32,33,36,.85);
	color: var(--chalk); cursor: pointer; font-size: 17px; backdrop-filter: blur(6px);
	font-family: var(--mono); letter-spacing: .1em;
}
.mb-room-btn--look { font-size: 11px; }
.mb-room-btn:hover { background: var(--accent); border-color: var(--accent); }
.mb-room-progress { position: absolute; left: var(--gut); right: var(--gut); bottom: 0; height: 2px; background: rgba(242,242,243,.12); }
.mb-room-progress span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }

@media (max-width: 720px) {
	.mb-room-info { max-width: none; right: var(--gut); }
	.mb-room-hint { font-size: 9px; }
	.mb-room-exit { padding: 10px 12px; }
}

/* --------------------------------------------------------- single artwork */

.mb-art { padding: clamp(96px, 10vw, 130px) 0 0; }
.mb-art-stage, .mb-art-label { padding: 0 var(--gut); }
@media (min-width: 1000px) {
	.mb-art { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(340px, .85fr); gap: clamp(30px, 4vw, 70px); max-width: var(--wrap); margin: 0 auto; align-items: start; }
	.mb-art-stage { padding-right: 0; }
	/* Sticky, but never taller than the screen — otherwise the buy button sits
	   below the fold with no way to scroll to it. */
	.mb-art-label {
		position: sticky; top: 104px; padding-left: 0;
		max-height: calc(100vh - 130px); overflow-y: auto;
		overscroll-behavior: contain; scrollbar-width: thin;
	}
	.mb-art-more { grid-column: 1 / -1; }
}

/* The loupe. A magnifier that shows the actual paint and marker texture at
   3.2x — the one thing a flat JPEG of this work cannot do. */
.mb-loupe { margin: 0; position: relative; cursor: zoom-in; background: var(--smoke); overflow: hidden; }
.mb-loupe img { display: block; width: 100%; height: auto; }
.mb-loupe-lens {
	position: absolute; width: 260px; height: 260px; border-radius: 50%;
	border: 1px solid var(--accent);
	box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.6);
	background-repeat: no-repeat; pointer-events: none;
	opacity: 0; transform: scale(.85); transition: opacity .22s, transform .22s;
	left: 0; top: 0; will-change: transform;
}
.mb-loupe.is-on .mb-loupe-lens { opacity: 1; transform: scale(1); }
.mb-loupe-hint {
	position: absolute; left: 14px; bottom: 14px;
	background: rgba(14,14,16,.75); padding: 8px 11px; color: var(--chalk);
	transition: opacity .25s;
}
.mb-loupe.is-on .mb-loupe-hint { opacity: 0; }
@media (max-width: 900px) { .mb-loupe-lens { width: 180px; height: 180px; } }

.mb-art-alt { margin-top: 20px; }
.mb-art-alt img { display: block; width: 100%; margin-top: 10px; }
.mb-art-head { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; }
.mb-art-no { color: var(--accent); }
.mb-art-title { font-family: var(--serif); font-weight: 900; font-size: clamp(32px, 4vw, 62px); line-height: .98; letter-spacing: -.02em; margin: 0 0 .35em; }
.mb-art-status { color: var(--mint); margin: 0; padding-left: 14px; border-left: 1px solid var(--line); }
.mb-art-status.is-sold { color: var(--ash); }
.mb-art-specs { margin: 0 0 2em; border-top: 1px solid var(--line); }
.mb-art-specs > div { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.mb-art-specs dt { color: var(--ash); margin: 0; }
.mb-art-specs dd { margin: 0; text-align: right; }
.mb-art-notes { color: #B4B4B8; font-size: 15px; margin-bottom: 2em; }
.mb-art-notes p { margin: 0 0 .4em; }
.mb-art-advisory { color: #FF6FA5; border: 1px solid rgba(255,1,104,.35); padding: 11px 13px; margin-bottom: 2em; }
.mb-art-gone { font-family: var(--serif); font-size: 21px; color: var(--ash); }
.mb-art-actions .mb-btn { margin-bottom: 12px; }
.mb-art-more { padding: clamp(70px, 9vw, 130px) 0 0; position: relative; z-index: 2; background: var(--void); }

/* ------------------------------------------------------------ commissions */

.mb-comm { padding: clamp(110px, 14vw, 180px) 0 clamp(60px, 8vw, 120px); }
.mb-comm-lead { margin-bottom: clamp(40px, 5vw, 80px); }
.mb-comm-hero { margin: 0 0 clamp(40px, 6vw, 90px); }
.mb-comm-hero img { display: block; width: 100%; height: min(62svh, 620px); object-fit: cover; }
.mb-comm-two { display: grid; gap: clamp(36px, 5vw, 80px); margin-bottom: clamp(50px, 7vw, 110px); }
@media (min-width: 900px) { .mb-comm-two { grid-template-columns: 1fr 1.15fr; } }
.mb-list, .mb-numlist { margin: 0; padding: 0; list-style: none; }
.mb-list li { padding: 14px 0; border-bottom: 1px solid var(--line); color: #B4B4B8; }
.mb-numlist li { display: grid; grid-template-columns: 44px 1fr; gap: 10px; padding: 16px 0; border-bottom: 1px solid var(--line); color: #B4B4B8; }
.mb-numlist .mb-mono { color: var(--accent); padding-top: 4px; }
.mb-numlist strong { color: var(--chalk); font-weight: 600; }

/* ------------------------------------------------------------------ forms */

.mb-form { max-width: 780px; margin-top: 30px; }
.mb-form-grid { display: grid; gap: 18px; margin-bottom: 26px; }
@media (min-width: 720px) { .mb-form-grid { grid-template-columns: 1fr 1fr; } .mb-field--wide { grid-column: 1 / -1; } }
.mb-field { display: grid; gap: 7px; margin: 0; }
.mb-field label { color: var(--ash); }
.mb-form input[type="text"], .mb-form input[type="email"], .mb-form textarea, .mb-form input[type="file"] {
	background: var(--room); border: 1px solid var(--line); color: var(--chalk);
	padding: 14px 15px; font: inherit; font-size: 16px; border-radius: 0; width: 100%;
}
.mb-form input:focus, .mb-form textarea:focus { border-color: var(--accent); outline: none; }
.mb-form textarea { resize: vertical; }
.mb-hp { position: absolute !important; left: -9999px !important; }
.mb-notice { background: rgba(0,235,162,.1); border: 1px solid rgba(0,235,162,.45); color: var(--mint); padding: 15px 17px; }

/* --------------------------------------------------------------- contact */

.mb-contact, .mb-qs, .mb-lf { padding: clamp(110px, 14vw, 180px) 0 clamp(60px, 8vw, 120px); }
.mb-contact-grid { display: grid; gap: clamp(36px, 5vw, 80px); margin-top: clamp(36px, 5vw, 70px); }
@media (min-width: 900px) { .mb-contact-grid { grid-template-columns: 1.3fr .8fr; } }
.mb-contact-big { font-family: var(--serif); font-size: clamp(20px, 2vw, 30px); line-height: 1.2; margin: 6px 0 34px; }
.mb-contact-big a:hover { color: var(--accent); }
.mb-contact-side .mb-dim { display: block; font-size: 15px; }

/* ------------------------------------------------------------------- FAQ */

.mb-faq { max-width: 62em; border-top: 1px solid var(--line); }
.mb-faq-item { border-bottom: 1px solid var(--line); }
.mb-faq-item summary {
	cursor: pointer; list-style: none; padding: 26px 0;
	font-family: var(--serif); font-size: clamp(19px, 1.9vw, 28px); line-height: 1.25;
	display: grid; grid-template-columns: 54px 1fr; gap: 10px; align-items: baseline;
	transition: color .2s;
}
.mb-faq-item summary::-webkit-details-marker { display: none; }
.mb-faq-item summary:hover { color: var(--accent); }
.mb-faq-item summary .mb-mono { color: var(--accent); }
.mb-faq-item p { color: #B4B4B8; margin: 0 0 26px; padding-left: 64px; max-width: 46em; }
@media (max-width: 640px) { .mb-faq-item p { padding-left: 0; } }

/* ------------------------------------------------------------ lost & found */

.mb-drawer { margin: clamp(40px, 5vw, 70px) 0; }
.mb-drawer-box {
	display: flex; flex-direction: column; align-items: center; gap: 14px;
	background: none; border: 0; cursor: pointer; color: var(--chalk); margin: 0 auto;
}
.mb-drawer-lid {
	width: clamp(170px, 22vw, 260px); height: clamp(104px, 13vw, 158px);
	background: linear-gradient(158deg, #FF0168 0%, #A405FD 55%, #0024FF 100%);
	border: 1px solid rgba(242,242,243,.25);
	box-shadow: inset 0 -18px 40px rgba(0,0,0,.45), 0 24px 50px rgba(0,0,0,.6);
	transition: transform .5s cubic-bezier(.16,1,.3,1);
	position: relative; overflow: hidden;
}
/* A striker strip, so it reads as a matchbox rather than a grey rectangle. */
.mb-drawer-lid::before {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26%;
	background: repeating-linear-gradient(45deg, #14141a 0 3px, #26262e 3px 6px);
	border-top: 1px solid rgba(0,0,0,.5);
}
.mb-drawer-lid::after {
	content: "STRIKE"; position: absolute; inset: 0; bottom: 26%;
	display: grid; place-items: center;
	font-family: var(--mono); font-size: 12px; letter-spacing: .28em;
	color: rgba(14,14,16,.72);
}
.mb-drawer-box:hover .mb-drawer-lid { transform: translateY(-4px); }
.mb-drawer-box[aria-expanded="true"] .mb-drawer-lid { transform: translateY(-16px) rotateX(38deg); }
.mb-drawer-panel { margin-top: clamp(30px, 4vw, 60px); }

.mb-finds { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: clamp(20px, 3vw, 44px); }
.mb-find {
	margin: 0; background: var(--paper); color: var(--void); padding: 12px 12px 16px;
	transform: rotate(var(--tilt)); position: relative;
	box-shadow: 0 18px 40px rgba(0,0,0,.5);
	transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.mb-find:hover { transform: rotate(0deg) translateY(-5px); }
.mb-find img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.mb-find figcaption { display: grid; gap: 3px; margin-top: 10px; }
.mb-find-t { font-family: var(--serif); font-weight: 700; font-size: 17px; }
.mb-find figcaption .mb-dim { color: #6F6F74; }
.mb-find .mb-hand { font-size: 16px; color: #4A4A50; }
.mb-find-pin { position: absolute; top: -7px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--pink); box-shadow: 0 2px 6px rgba(0,0,0,.6); }
.mb-foundform { margin-top: clamp(50px, 7vw, 110px); border-top: 1px solid var(--line); padding-top: clamp(34px, 4vw, 60px); }

/* ------------------------------------------------------------------ music */

.mb-music { position: fixed; left: clamp(12px, 2vw, 26px); bottom: clamp(12px, 2vw, 26px); z-index: 70; width: min(360px, calc(100vw - 24px)); }
.mb-music-tab {
	display: flex; align-items: center; gap: 11px; width: 100%;
	background: rgba(32,33,36,.92); border: 1px solid var(--line); color: var(--chalk);
	padding: 13px 16px; cursor: pointer; backdrop-filter: blur(10px);
	transition: border-color .2s;
}
.mb-music-tab:hover { border-color: var(--accent); }
.mb-eq { display: flex; align-items: flex-end; gap: 2px; height: 13px; }
.mb-eq i { width: 2px; background: var(--accent); height: 40%; animation: mb-eq 1.1s ease-in-out infinite; }
.mb-eq i:nth-child(2) { animation-delay: .18s; }
.mb-eq i:nth-child(3) { animation-delay: .36s; }
.mb-eq i:nth-child(4) { animation-delay: .54s; }
@keyframes mb-eq { 0%,100% { height: 25%; } 50% { height: 100%; } }
.mb-music-panel { background: rgba(32,33,36,.97); border: 1px solid var(--line); border-top: 0; padding: 15px; backdrop-filter: blur(10px); }
.mb-music-frame iframe { width: 100%; height: 175px; border: 0; display: block; margin: 10px 0; background: transparent; }
.mb-music-note { margin: 0; }
@media (max-width: 620px) { .mb-music { width: calc(100vw - 24px); } }

/* ----------------------------------------------------------------- footer */

.mb-foot { border-top: 1px solid var(--line); padding: clamp(60px, 8vw, 130px) var(--gut) 40px; max-width: var(--wrap); margin: 0 auto; }
.mb-foot-top { display: grid; gap: 30px; margin-bottom: clamp(44px, 6vw, 80px); }
@media (min-width: 900px) { .mb-foot-top { grid-template-columns: 1.1fr 1fr; align-items: end; } }
.mb-foot-note { color: var(--ash); max-width: 34em; font-size: 15px; }
.mb-foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 26px; padding-bottom: 40px; border-bottom: 1px solid var(--line); }
.mb-foot-grid p { margin: 0 0 5px; }
.mb-foot-grid a:hover { color: var(--accent); }
.mb-motion-toggle { background: none; border: 0; color: var(--chalk); cursor: pointer; padding: 0; text-align: left; }
.mb-motion-toggle:hover { color: var(--accent); }
.mb-foot-nav { display: flex; flex-wrap: wrap; gap: 18px; padding: 26px 0; }
.mb-foot-nav a:hover { color: var(--accent); }
.mb-foot-legal { margin: 0; }
.mb-secret { cursor: default; }

/* ------------------------------------------------------------------ intro
   The contact sheet. Strips slide in, frames light up out of order like a
   sheet being checked, the wordmark develops, then the site is simply there.
   Everything behind this is already rendered — if the script never runs, the
   overlay never appears. */

.mb-intro {
	position: fixed; inset: 0; z-index: 300; background: #0A0A0C;
	display: grid; place-items: center; overflow: hidden;
}
.mb-intro[hidden] { display: none; }
.mb-intro.is-out { opacity: 0; transition: opacity .5s ease .1s; pointer-events: none; }

.mb-intro-tear {
	position: absolute; inset: 0; background: #0A0A0C; z-index: 4;
	clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
	transform: translateY(0);
	animation: mb-tear-up .9s cubic-bezier(.7,0,.2,1) forwards;
}
.mb-intro-tear::after {
	content: ""; position: absolute; inset: 0; background: #0A0A0C;
	clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
	animation: mb-tear-down .9s cubic-bezier(.7,0,.2,1) forwards;
}
@keyframes mb-tear-up { to { transform: translateY(-52%); } }
@keyframes mb-tear-down { to { transform: translateY(52%); } }

.mb-intro-strips { position: absolute; inset: -8% -14%; display: grid; align-content: center; gap: clamp(8px, 1.4vw, 22px); transform: rotate(-6deg); }
.mb-intro-strip { background: #141416; padding: 5px 0; display: grid; gap: 4px; opacity: 0; }
.mb-intro-strip--0 { animation: mb-slide-l .95s cubic-bezier(.16,1,.3,1) .35s forwards; }
.mb-intro-strip--1 { animation: mb-slide-r 1.05s cubic-bezier(.16,1,.3,1) .45s forwards; }
.mb-intro-strip--2 { animation: mb-slide-l 1.15s cubic-bezier(.16,1,.3,1) .55s forwards; }
@keyframes mb-slide-l { from { opacity: 0; transform: translateX(-16%); } to { opacity: 1; transform: none; } }
@keyframes mb-slide-r { from { opacity: 0; transform: translateX(16%); } to { opacity: 1; transform: none; } }

.mb-intro-sprockets { height: 12px; background-image: radial-gradient(#0A0A0C 38%, transparent 39%); background-size: 26px 12px; background-repeat: repeat-x; opacity: .9; }
.mb-intro-frames { display: flex; gap: 4px; }
.mb-intro-frame { position: relative; flex: 0 0 auto; width: clamp(130px, 15vw, 240px); aspect-ratio: 3/2; overflow: hidden; background: #141416; }
.mb-intro-frame img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.42) saturate(.55); }
.mb-intro-frame.is-lit img { filter: brightness(1.05) saturate(1.2); transition: filter .12s; }
.mb-intro-fnum { position: absolute; left: 5px; top: 4px; font-family: var(--mono); font-size: 7px; letter-spacing: .09em; color: rgba(255,167,0,.85); }

.mb-intro-mark { position: relative; z-index: 5; text-align: center; opacity: 0; }
.mb-intro.is-marking .mb-intro-mark { animation: mb-develop .9s ease forwards; }
@keyframes mb-develop {
	from { opacity: 0; filter: blur(14px) contrast(.4); transform: scale(1.03); }
	to   { opacity: 1; filter: none; transform: none; }
}
.mb-intro-skip { position: absolute; right: 18px; bottom: 18px; z-index: 6; background: none; border: 0; color: rgba(242,242,243,.6); cursor: pointer; padding: 10px; }
.mb-intro-skip:hover { color: #fff; }

.mb-intro.is-flash { animation: mb-flash .45s ease; }
@keyframes mb-flash { 0% { filter: none; } 30% { filter: brightness(1.7) contrast(1.15); } 100% { filter: none; } }

/* --------------------------------------------------------------- reveals */

.mb [data-mb-reveal] { opacity: 0; transform: translateY(24px); }
.mb [data-mb-reveal].is-in { opacity: 1; transform: none; transition: opacity .75s ease, transform .75s cubic-bezier(.16,1,.3,1); }

/* ------------------------------------------------------- reduced motion
   Honoured from the OS setting and from the footer toggle. Content-revealing
   interactions — the loupe, the room, the drawer — keep working; only the
   decorative movement stops. */

@media (prefers-reduced-motion: reduce) {
	.mb *, .mb *::before, .mb *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	.mb [data-mb-reveal] { opacity: 1; transform: none; }
	.mb-intro-strip { opacity: 1; }
	.mb-intro-mark { opacity: 1; }
	.mb-intro-frame img { filter: brightness(1) saturate(1); }
}

body.mb-reduce .mb *, body.mb-reduce .mb *::before, body.mb-reduce .mb *::after {
	animation-duration: .01ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: .01ms !important;
}
body.mb-reduce .mb [data-mb-reveal] { opacity: 1; transform: none; }
body.mb-reduce .mb-eq i { animation: none; height: 60%; }

/* --------------------------------------------------------------- printing */

@media print {
	.mb-head, .mb-menu, .mb-music, .mb-intro, .mb-room, .mb-rail-nav { display: none !important; }
	.mb { background: #fff; color: #000; }
}