/*	============================================================ */
/*	#region *** MUSEUM :: the exhibition */
/*	============================================================ */
	/* the exhibition :: a wall of framed prints with its wall label, the galleries as rooms, every photograph framed and hung with its label and its number,
	inscriptional capitals, a bronze plaque at the door */

	html[data-template="museum"] {
		--mu-wall:								rgb(244, 242, 238);
		--mu-frame:								rgb(28, 26, 24);
		--mu-mat:								rgb(250, 249, 246);
		--mu-bronze:							linear-gradient(135deg, rgb(150, 116, 64), rgb(102, 76, 38) 55%, rgb(132, 100, 52));
		--mu-hang:								0 22px 40px -22px rgba(30, 24, 16, 0.45);
	}

	html[data-template="museum"] h1,
	html[data-template="museum"] h2,
	html[data-template="museum"] h3 {
		font-weight:							400;
		letter-spacing:							0.06em;
	}

	/* the header :: the name over the word for the show, the pages along the wall between thin rules */
	html[data-template="museum"] .tpl__head--museum {
		position:								relative;
		max-width:								var(--ws-max);
		width:									100%;
		margin:									0 auto;
		padding:								30px var(--ws-gap) 22px;
		display:								flex;
		align-items:							flex-end;
		justify-content:						space-between;
		gap:									24px;

		border-bottom:							1px solid var(--ws-ink);
		background:								transparent;
	}

	html[data-template="museum"] .tpl__museumbrand {
		display:								flex;
		flex-direction:							column;
		gap:									4px;
	}

	html[data-template="museum"] .tpl__head--museum .ws__brandname {
		font-family:							var(--ws-ff-head);
		font-size:								clamp(22px, 2.4vw, 30px);
		font-weight:							400;
		letter-spacing:							0.16em;
		text-transform:							uppercase;
		white-space:							normal;
	}

	html[data-template="museum"] .tpl__show {
		color:									var(--ws-accent);
		font-size:								11px;
		font-weight:							700;
		letter-spacing:							0.34em;
		text-transform:							uppercase;
	}

	html[data-template="museum"] .tpl__head--museum .ws__nav {
		gap:									0;
	}

	html[data-template="museum"] .tpl__head--museum .ws__navlink {
		padding:								2px 16px;

		border:									none;
		border-left:							1px solid var(--ws-line);

		color:									var(--ws-soft);
		font-size:								12px;
		font-weight:							500;
		letter-spacing:							0.12em;
	}

	html[data-template="museum"] .tpl__head--museum .ws__navlink:first-child {
		border-left:							none;
	}

	html[data-template="museum"] .tpl__head--museum .ws__navlink.is-on {
		color:									var(--ws-ink);
		text-decoration:						underline;
		text-decoration-color:					var(--ws-accent);
		text-decoration-thickness:				2px;
		text-underline-offset:					8px;
	}

	/* the cover :: the gallery wall - a picture rail, up to three framed prints at eye level, the show's label beside them */
	html[data-template="museum"] .tpl__cover--wall {
		height:									auto;
		padding:								clamp(48px, 7vw, 110px) max(var(--ws-gap), calc((100% - var(--ws-max)) / 2 + var(--ws-gap))) clamp(40px, 6vw, 90px);
		display:								grid;
		grid-template-columns:					minmax(0, 1fr) minmax(200px, 270px);
		gap:									clamp(28px, 5vw, 72px);
		align-items:							center;

		border-bottom:							1px solid var(--ws-line);
		background:								var(--mu-wall);
	}

	html[data-template="museum"] .tpl__cover--wall::before {
		position:								absolute;
		top:									26px;
		right:									0;
		left:									0;
		height:									4px;

		border-bottom:							1px solid rgba(0, 0, 0, 0.12);
		background:								rgba(0, 0, 0, 0.05);

		content:								"";
	}

	html[data-template="museum"] .tpl__wall {
		display:								flex;
		align-items:							center;
		justify-content:						center;
		gap:									clamp(20px, 3.4vw, 54px);
	}

	html[data-template="museum"] .tpl__print {
		margin:									0;
		padding:								clamp(10px, 1.6vw, 24px);
		flex:									0 1 auto;

		border:									clamp(5px, 0.6vw, 9px) solid var(--mu-frame);
		background:								var(--mu-mat);
		box-shadow:								var(--mu-hang);
	}

	html[data-template="museum"] .tpl__print img {
		max-height:								min(46vh, 460px);
		width:									auto;
		max-width:								100%;
	}

	html[data-template="museum"] .tpl__wall--3 .tpl__print--1 img,
	html[data-template="museum"] .tpl__wall--3 .tpl__print--3 img {
		max-height:								min(30vh, 300px);
	}

	html[data-template="museum"] .tpl__wall--3 .tpl__print--2 {
		order:									0;
	}

	html[data-template="museum"] .tpl__wall--3 .tpl__print--1 {
		order:									-1;
	}

	html[data-template="museum"] .tpl__label {
		padding:								18px 20px;
		display:								flex;
		flex-direction:							column;
		gap:									10px;

		border-left:							3px solid var(--ws-accent);
		background:								rgb(255, 255, 255);
		box-shadow:								0 1px 2px rgba(0, 0, 0, 0.08);
	}

	html[data-template="museum"] .tpl__label .ws__herotitle {
		font-size:								clamp(20px, 1.8vw, 26px);
		letter-spacing:							0.08em;
		line-height:							1.2;
		text-transform:							uppercase;
	}

	html[data-template="museum"] .tpl__labelmeta {
		margin:									0;

		color:									var(--ws-soft);
		font-size:								13px;
		font-style:								italic;
	}

	html[data-template="museum"] .tpl__label .ws__heroline {
		margin:									0;
		padding-top:							10px;

		border-top:								1px solid var(--ws-line);

		color:									var(--ws-soft);
		font-size:								13px;
		line-height:							1.6;
	}

	html[data-template="museum"] .tpl__cover--wall:not(:has(.tpl__wall)) {
		grid-template-columns:					minmax(0, 520px);
		justify-content:						center;
	}

	/* the sections :: wall text - capitals, wide margins, a short bronze rule */
	html[data-template="museum"] .ws__section + .ws__section {
		border-top:								none;
	}

	html[data-template="museum"] .ws__title {
		font-size:								clamp(26px, 2.8vw, 38px);
		letter-spacing:							0.1em;
		text-transform:							uppercase;
	}

	html[data-template="museum"] .ws__sechead {
		padding-bottom:							12px;

		border-bottom:							1px solid var(--ws-ink);
	}

	html[data-template="museum"] .ws__sectitle {
		font-size:								18px;
		letter-spacing:							0.18em;
		text-transform:							uppercase;
	}

	html[data-template="museum"] .ws__kicker {
		color:									var(--ws-accent);
		letter-spacing:							0.3em;
	}

	html[data-template="museum"] .ws__more {
		border-bottom-color:					var(--ws-ink);

		color:									var(--ws-ink);
		letter-spacing:							0.16em;
	}

	html[data-template="museum"] .ws__words--centred .ws__sectitle::after {
		height:									2px;
		width:									48px;
		margin:									18px auto 0;
		display:								block;

		background:								var(--ws-accent);

		content:								"";
	}

	html[data-template="museum"] .ws__words--centred .ws__text {
		font-size:								calc(var(--ws-t-body) + 3px);
		line-height:							1.75;
	}

	html[data-template="museum"] .ws__btn {
		border-color:							var(--ws-ink);
		background:								var(--ws-ink);

		color:									var(--ws-bg);
		letter-spacing:							0.2em;
	}

	/* the gallery index :: each gallery a room of the show - its number, the doorway with its cover, the name and the works */
	html[data-template="museum"] .tpl__rooms {
		display:								grid;
		grid-template-columns:					repeat(auto-fill, minmax(240px, 1fr));
		gap:									clamp(28px, 4vw, 56px) clamp(20px, 3vw, 40px);
	}

	html[data-template="museum"] .tpl__room {
		display:								flex;
		flex-direction:							column;
		gap:									10px;
	}

	html[data-template="museum"] .tpl__roomno {
		color:									var(--ws-accent);
		font-size:								11px;
		font-weight:							700;
		letter-spacing:							0.3em;
		text-transform:							uppercase;
	}

	html[data-template="museum"] .tpl__door {
		aspect-ratio:							3 / 4;
		display:								block;
		overflow:								hidden;

		border:									14px solid var(--mu-wall);
		outline:								1px solid var(--ws-line);
		background:								var(--ws-card);
		box-shadow:								inset 0 0 0 1px rgba(0, 0, 0, 0.08);
	}

	html[data-template="museum"] .tpl__door img {
		height:									100%;
		width:									100%;

		object-fit:								cover;

		transition:								transform 0.6s;
	}

	html[data-template="museum"] .tpl__room:hover .tpl__door img {
		transform:								scale(1.04);
	}

	html[data-template="museum"] .tpl__roomname {
		font-family:							var(--ws-ff-head);
		font-size:								21px;
		letter-spacing:							0.08em;
		line-height:							1.2;
		text-transform:							uppercase;
	}

	html[data-template="museum"] .tpl__roomcount {
		color:									var(--ws-mute);
		font-size:								12px;
		font-style:								italic;
	}

	/* a gallery :: every photograph framed and hung, its wall label under it - the number, the title */
	html[data-template="museum"] .ws__gallery {
		counter-reset:							work;
	}

	html[data-template="museum"] .ws__item {
		border-radius:							0;
		background:								transparent;

		counter-increment:						work;
	}

	html[data-template="museum"] section[data-layout="large"] .ws__gallery {
		max-width:								1000px;
	}

	html[data-template="museum"] section[data-layout="large"] .ws__item {
		margin-bottom:							clamp(60px, 8vw, 120px);
		padding:								0;
		display:								grid;
		grid-template-columns:					minmax(0, 1fr) 220px;
		gap:									28px;
		align-items:							end;
		overflow:								visible;
	}

	html[data-template="museum"] section[data-layout="large"] .ws__item img {
		padding:								clamp(12px, 2vw, 30px);

		border:									clamp(6px, 0.7vw, 10px) solid var(--mu-frame);
		background:								var(--mu-mat);
		box-shadow:								var(--mu-hang);
	}

	html[data-template="museum"] section[data-layout="large"] .ws__item::before {
		grid-column:							2;
		grid-row:								1;
		align-self:								end;
		margin-bottom:							30px;

		content:								var(--tpl-no) " " counter(work);
		color:									var(--ws-accent);
		font-size:								11px;
		font-weight:							700;
		letter-spacing:							0.3em;
		text-transform:							uppercase;
	}

	html[data-template="museum"] section[data-layout="large"] .ws__item img,
	html[data-template="museum"] section[data-layout="large"] .ws__item .ws__medal {
		grid-column:							1;
		grid-row:								1;
	}

	html[data-template="museum"] section[data-layout="large"] .ws__itemcap {
		grid-column:							2;
		grid-row:								1;
		padding:								0 0 0 14px;
		display:								block;

		border-left:							2px solid var(--ws-ink);

		color:									var(--ws-ink);
		font-family:							var(--ws-ff-head);
		font-size:								16px;
		letter-spacing:							0.06em;
		text-align:								left;
	}

	html[data-template="museum"] section[data-layout="grid"] .ws__item,
	html[data-template="museum"] section[data-layout="masonry"] .ws__item,
	html[data-template="museum"] section[data-layout="columns"] .ws__item {
		padding:								8px;

		border:									5px solid var(--mu-frame);
		background:								var(--mu-mat);
	}

	/* about :: the artist's wall text and the portrait framed */
	html[data-template="museum"] .ws__portrait {
		padding:								14px;

		border:									7px solid var(--mu-frame);
		background:								var(--mu-mat);
		box-shadow:								var(--mu-hang);
	}

	html[data-template="museum"] .ws__badge {
		border-radius:							0;
		border-color:							var(--ws-ink);

		letter-spacing:							0.12em;
		text-transform:							uppercase;
	}

	html[data-template="museum"] .ws__badge--accent {
		border-color:							var(--ws-accent);
		background:								var(--ws-accent);

		color:									var(--ws-accent-ink);
	}

	html[data-template="museum"] .ws__stat {
		border-top:								1px solid var(--ws-ink);
		border-radius:							0;
		background:								transparent;
	}

	html[data-template="museum"] .ws__statnum {
		font-family:							var(--ws-ff-head);
		font-weight:							400;
	}

	/* the record :: the awards as wall labels */
	html[data-template="museum"] .ws__wallitem img {
		padding:								10px;

		border:									6px solid var(--mu-frame);
		background:								var(--mu-mat);
		box-shadow:								var(--mu-hang);
	}

	html[data-template="museum"] .ws__wallitem figcaption {
		margin-top:								14px;
		padding-left:							12px;
		display:								flex;
		flex-direction:							column;
		gap:									4px;

		border-left:							2px solid var(--ws-accent);
	}

	html[data-template="museum"] .ws__award {
		padding:								0;

		border-radius:							0;
		background:								none;

		color:									var(--ws-accent);
		font-weight:							700;
		letter-spacing:							0.14em;
	}

	html[data-template="museum"] .ws__row {
		border-bottom-color:					var(--ws-line);
	}

	html[data-template="museum"] .ws__inp {
		border-color:							var(--ws-ink);
		border-radius:							0;
		background:								rgb(255, 255, 255);
	}

	/* the foot :: the bronze plaque at the door - the name, the years, the line; the association under it */
	html[data-template="museum"] .tpl__foot--plaque {
		margin-top:								var(--ws-space);

		border-top:								1px solid var(--ws-ink);
	}

	html[data-template="museum"] .tpl__foot--plaque .ws__wrap {
		padding-top:							48px;
		padding-bottom:							48px;
		display:								flex;
		flex-direction:							column;
		align-items:							center;
		gap:									22px;
	}

	html[data-template="museum"] .tpl__plaque {
		min-width:								min(420px, 100%);
		padding:								22px 34px;
		display:								flex;
		flex-direction:							column;
		align-items:							center;
		gap:									6px;

		border:									1px solid rgb(80, 60, 30);
		border-radius:							3px;
		background:								var(--mu-bronze);
		box-shadow:								inset 0 1px 0 rgba(255, 236, 200, 0.4), inset 0 -2px 4px rgba(0, 0, 0, 0.25), 0 10px 22px -12px rgba(40, 28, 10, 0.6);

		color:									rgb(248, 232, 200);
		text-align:								center;
		text-shadow:							0 -1px 0 rgba(0, 0, 0, 0.45);
	}

	html[data-template="museum"] .tpl__plname {
		font-family:							var(--ws-ff-head);
		font-size:								20px;
		letter-spacing:							0.2em;
		text-transform:							uppercase;
	}

	html[data-template="museum"] .tpl__plyears {
		font-size:								12px;
		letter-spacing:							0.3em;
	}

	html[data-template="museum"] .tpl__plaque .tpl__foottext {
		opacity:								0.9;

		font-size:								12px;
		font-style:								italic;
	}

	@media all and (max-width: 960px) {
		html[data-template="museum"] .tpl__cover--wall {
			grid-template-columns:				minmax(0, 1fr);
		}

		html[data-template="museum"] .tpl__wall--3 .tpl__print--3 {
			display:							none;
		}
	}

	@media all and (max-width: 760px) {
		html[data-template="museum"] .tpl__head--museum {
			padding-top:						18px;
			padding-bottom:						14px;
			align-items:						center;
		}

		html[data-template="museum"] .tpl__head--museum .ws__navlink {
			padding:							12px 0;

			border-left:						none;
		}

		html[data-template="museum"] .tpl__wall--2 .tpl__print--2,
		html[data-template="museum"] .tpl__wall--3 .tpl__print--1 {
			display:							none;
		}

		html[data-template="museum"] section[data-layout="large"] .ws__item {
			grid-template-columns:				minmax(0, 1fr);
			gap:								14px;
		}

		html[data-template="museum"] section[data-layout="large"] .ws__item::before {
			grid-row:							2;
			grid-column:						1;
			margin:								0;
		}

		html[data-template="museum"] section[data-layout="large"] .ws__itemcap {
			grid-row:							3;
			grid-column:						1;
		}
	}

/*	============================================================ */
/*	#endregion END MUSEUM */
/*	============================================================ */