/* ═══════════════════════════════════════════════════════════
   MUSEUM — gedeelde zaalstijl voor home en Terrassen
   Het werk centraal, strak en zonder kader of schaduw.
   Groottes komen uit de schaal in chrome.css.
   ═══════════════════════════════════════════════════════════ */

.museum{
	--nav: var(--nav-h, 84px);
	background: var(--wall);
	color: var(--ink);
}
.museum a{ color: inherit; text-decoration: none; }
.museum h1, .museum h2, .museum p{ margin: 0; }
.museum i{ font-family: var(--serif); font-style: italic; }

/* tekstlink met pijl */
.m-arrow{
	display: inline-flex; align-items: baseline; gap: .5em;
	font-size: var(--fs-s); font-weight: 500;
	border-bottom: 1px solid var(--ink);
	padding-bottom: 2px;
}
.m-arrow::after{ content: '\2192'; transition: transform .3s ease; }
.m-arrow:hover::after{ transform: translateX(4px); }

/* titel van een tentoonstelling */
.m-artist{ font-size: var(--fs-m); margin-bottom: .6rem !important; }
.museum .m-title{ font-style: italic; margin-bottom: 1rem !important; }
.m-sub{ color: var(--muted); }

/* museumlabel */
.m-label{ max-width: 340px; }
.museum .m-label__title{
	font-style: italic;
	font-size: var(--fs-l) !important;
	margin-bottom: .5rem !important;
}
.m-label__meta{ color: var(--muted); }
.m-label__n{ font-size: var(--fs-s); color: var(--muted); margin-bottom: 1rem !important; font-variant-numeric: tabular-nums; }

/* schilderij aan de muur */
.m-painting{ display: block; }
.m-painting img{ display: block; width: auto; height: auto; max-width: 100%; }

/* sectie met kop */
.m-section{ padding: clamp(64px, 10vh, 120px) var(--gutter); }
.m-section__head{
	display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
	margin-bottom: clamp(32px, 5vh, 56px);
}

/* raster van werken */
.m-grid{
	display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: clamp(40px, 5vw, 72px) clamp(20px, 3vw, 40px);
	align-items: end;
}
.m-work{ display: flex; flex-direction: column; }
.m-work__img{
	display: flex; align-items: flex-end; justify-content: flex-start;
	aspect-ratio: 1; margin-bottom: 1rem;
}
.m-work__img img{ max-width: 100%; max-height: 100%; display: block; transition: opacity .3s ease; }
.m-work:hover .m-work__img img{ opacity: .85; }
.m-work__title{ font-family: var(--serif); font-style: italic; font-size: var(--fs-m); line-height: 1.3; }
.m-work__meta{ color: var(--muted); font-size: var(--fs-s); margin-top: .2rem; }

/* rustig binnenkomen */
.m-fade{ animation: m-fade 1.2s ease both; }
.m-fade--late{ animation-delay: .25s; }
@keyframes m-fade{ from{ opacity: 0; } }
@media (prefers-reduced-motion: reduce){ .m-fade{ animation: none; } }

@media (max-width: 900px){
	.m-section__head{ flex-direction: column; align-items: flex-start; }
}