/*	============================================================ */
/*	#region *** MONOLITH :: one huge block */
/*	============================================================ */
	/* one huge block :: a dock at the foot of the screen, one photograph filling it with the name carved across its edge, the galleries as panels sliding
	sideways, one photograph to a screen, the name again across the whole width at the foot */

	html[data-template="monolith"] {
		--mo-dock:								60px;
		--mo-carve:								clamp(64px, 14vw, 250px);
	}

	html[data-template="monolith"] body {
		padding-bottom:							var(--mo-dock);
	}

	html[data-template="monolith"] h1,
	html[data-template="monolith"] h2,
	html[data-template="monolith"] h3 {
		font-weight:							400;
		letter-spacing:							0.01em;
		text-transform:							uppercase;
	}

	/* the header :: a dock fixed at the foot of the screen - the name at its left, the pages numbered at its right */
	html[data-template="monolith"] .tpl__head--dock {
		position:								fixed;
		top:									auto;
		right:									0;
		bottom:									0;
		left:									0;
		z-index:								30;
		height:									var(--mo-dock);
		padding:								0 clamp(16px, 2.4vw, 32px);
		display:								flex;
		align-items:							center;
		justify-content:						space-between;
		gap:									20px;

		border-top:								1px solid var(--ws-line);
		border-bottom:							none;
		background:								rgba(18, 18, 18, 0.9);
		backdrop-filter:						blur(10px);
		-webkit-backdrop-filter:				blur(10px);
	}

	html[data-template="monolith"] .tpl__head--dock .ws__brandname {
		font-family:							var(--ws-ff-head);
		font-size:								20px;
		font-weight:							400;
		letter-spacing:							0.06em;
		text-transform:							uppercase;
	}

	html[data-template="monolith"] .tpl__head--dock .ws__logo {
		height:									34px;
	}

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

	html[data-template="monolith"] .tpl__head--dock .ws__navlink {
		padding:								0 14px;
		display:								inline-flex;
		align-items:							baseline;
		gap:									6px;

		border:									none;

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

	html[data-template="monolith"] .tpl__head--dock .tpl__no {
		font-size:								10px;
	}

	html[data-template="monolith"] .tpl__head--dock .ws__navlink:hover,
	html[data-template="monolith"] .tpl__head--dock .ws__navlink.is-on {
		color:									var(--ws-ink);
	}

	html[data-template="monolith"] .tpl__head--dock .ws__burger {
		height:									auto;
		width:									auto;
		padding:								6px 0;
		gap:									8px;

		border:									none;
	}

	html[data-template="monolith"] .tpl__menuword {
		font-size:								12px;
		font-weight:							600;
		letter-spacing:							0.16em;
		text-transform:							uppercase;
	}

	/* the cover :: one photograph filling the screen, the name carved across its lower edge, half on it and half on the page */
	html[data-template="monolith"] .tpl__cover--carved {
		height:									calc(100vh - var(--mo-dock) - var(--mo-carve) * 0.55);
		height:									calc(100svh - var(--mo-dock) - var(--mo-carve) * 0.55);
		min-height:								460px;
		margin-bottom:							calc(var(--mo-carve) * 0.5);
		overflow:								visible;

		background:								var(--ws-card);
	}

	html[data-template="monolith"] .tpl__cover--carved .ws__heroimg {
		filter:									contrast(1.06);
	}

	/* the carved name :: its last line half below the photograph whatever the lines it takes, the line above it on the photograph */
	html[data-template="monolith"] .tpl__carve {
		position:								absolute;
		right:									0;
		bottom:									calc(var(--mo-carve) * -0.42);
		left:									0;
		padding:								0 clamp(12px, 2vw, 28px);
		display:								flex;
		flex-direction:							column-reverse;
	}

	html[data-template="monolith"] .tpl__carve .ws__herotitle {
		font-size:								var(--mo-carve);
		letter-spacing:							-0.01em;
		line-height:							0.82;
		overflow-wrap:							anywhere;
	}

	html[data-template="monolith"] .tpl__carve .ws__heroline {
		max-width:								520px;
		margin:									0 0 18px;
		opacity:								1;

		color:									rgb(255, 255, 255);
		font-size:								14px;
		letter-spacing:							0.04em;
		text-shadow:							0 1px 10px rgba(0, 0, 0, 0.6);
	}

	html[data-template="monolith"] .tpl__cover--carved.is-bare {
		height:									auto;
		min-height:								0;
		margin-bottom:							0;
		padding:								18vh 0 0;

		background:								transparent;
	}

	html[data-template="monolith"] .tpl__cover--carved.is-bare .tpl__carve {
		position:								static;

		transform:								none;
	}

	/* the sections :: black, heavy, wide */
	html[data-template="monolith"] .ws__section + .ws__section {
		border-top:								none;
	}

	html[data-template="monolith"] .ws__title {
		font-size:								clamp(48px, 7vw, 110px);
		line-height:							0.9;
	}

	html[data-template="monolith"] .ws__sectitle {
		font-size:								clamp(30px, 4vw, 60px);
		line-height:							0.95;
	}

	html[data-template="monolith"] .ws__kicker {
		color:									var(--ws-mute);
		font-weight:							600;
		letter-spacing:							0.2em;
	}

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

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

	html[data-template="monolith"] .ws__lead {
		max-width:								860px;

		color:									var(--ws-ink);
		font-size:								clamp(20px, 2.2vw, 30px);
		line-height:							1.35;
	}

	html[data-template="monolith"] .ws__btn {
		padding:								16px 30px;

		border-color:							var(--ws-ink);
		background:								var(--ws-ink);

		color:									var(--ws-bg);
		font-size:								13px;
		letter-spacing:							0.14em;
	}

	/* the gallery index :: the galleries as large panels on a strip sliding sideways, each its number of the whole */
	html[data-template="monolith"] .tpl__carousel {
		margin:									0 calc(var(--ws-gap) * -1);
		padding:								0 var(--ws-gap) 16px;
		display:								flex;
		gap:									14px;
		overflow-x:								auto;
		scroll-snap-type:						x mandatory;
		scrollbar-width:						thin;
	}

	html[data-template="monolith"] .tpl__panel {
		position:								relative;
		height:									min(72vh, 680px);
		flex:									0 0 min(72vw, 520px);
		scroll-snap-align:						start;
		overflow:								hidden;

		background:								var(--ws-card);
	}

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

		object-fit:								cover;

		transition:								transform 0.8s;
	}

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

	html[data-template="monolith"] .tpl__panelno {
		position:								absolute;
		top:									16px;
		left:									18px;

		color:									rgb(255, 255, 255);
		font-size:								12px;
		font-weight:							600;
		letter-spacing:							0.16em;
		text-shadow:							0 1px 8px rgba(0, 0, 0, 0.5);
	}

	html[data-template="monolith"] .tpl__panelname {
		position:								absolute;
		right:									0;
		bottom:									0;
		left:									0;
		padding:								60px 18px 16px;

		background:								linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);

		color:									rgb(255, 255, 255);
		font-family:							var(--ws-ff-head);
		font-size:								clamp(28px, 3vw, 46px);
		line-height:							0.95;
		text-transform:							uppercase;
	}

	/* a gallery :: one photograph to a screen */
	html[data-template="monolith"] .ws__item {
		border-radius:							0;
		background:								transparent;
	}

	html[data-template="monolith"] section[data-layout="large"] .ws__gallery {
		max-width:								none;
	}

	html[data-template="monolith"] section[data-layout="large"] .ws__item {
		min-height:								calc(100vh - var(--mo-dock) - 40px);
		margin-bottom:							40px;
		display:								flex;
		flex-direction:							column;
		align-items:							center;
		justify-content:						center;
		gap:									16px;
	}

	html[data-template="monolith"] section[data-layout="large"] .ws__itemcap {
		padding:								0;

		color:									var(--ws-ink);
		font-family:							var(--ws-ff-head);
		font-size:								clamp(22px, 2.4vw, 34px);
		letter-spacing:							0.04em;
		text-transform:							uppercase;
	}

	html[data-template="monolith"] section[data-layout="large"] .ws__item img {
		max-height:								calc(100vh - var(--mo-dock) - 80px);
		width:									auto;
		max-width:								100%;
	}

	/* about, the record, contact :: heavy numbers, plain rows */
	html[data-template="monolith"] .ws__portrait {
		border-radius:							0;
		filter:									grayscale(1) contrast(1.1);
	}

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

		text-transform:							uppercase;
	}

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

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

	html[data-template="monolith"] .ws__stat {
		padding:								0;

		background:								none;
	}

	html[data-template="monolith"] .ws__statnum {
		font-family:							var(--ws-ff-head);
		font-size:								clamp(56px, 7vw, 120px);
		font-weight:							400;
		line-height:							0.9;
	}

	html[data-template="monolith"] .ws__statbar--large .ws__statnum {
		font-size:								clamp(70px, 10vw, 170px);
	}

	html[data-template="monolith"] .ws__award {
		border-radius:							0;
		background:								var(--ws-ink);

		color:									var(--ws-bg);
	}

	html[data-template="monolith"] .ws__inp {
		border-color:							var(--ws-line);
		border-radius:							0;
		background:								var(--ws-card);
	}

	/* the foot :: the name across the whole width */
	html[data-template="monolith"] .tpl__foot--bigname {
		margin-top:								var(--ws-space);
		overflow:								hidden;

		border-top:								none;
	}

	html[data-template="monolith"] .tpl__bigname {
		padding:								0 clamp(8px, 1vw, 16px);

		color:									var(--ws-ink);
		font-family:							var(--ws-ff-head);
		font-size:								13.4vw;
		line-height:							0.82;
		text-transform:							uppercase;
		white-space:							nowrap;
	}

	html[data-template="monolith"] .tpl__foot--bigname .ws__wrap {
		padding-top:							22px;
		padding-bottom:							26px;
		display:								flex;
		flex-wrap:								wrap;
		align-items:							center;
		justify-content:						space-between;
		gap:									12px 24px;

		color:									var(--ws-mute);
		font-size:								12px;
	}

	@media all and (max-width: 760px) {
		html[data-template="monolith"] .tpl__head--dock .ws__nav {
			top:								auto;
			bottom:								100%;

			border-top:							1px solid var(--ws-line);
			border-bottom:						none;
			background:							var(--ws-bg);
		}

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

		html[data-template="monolith"] .tpl__head--dock .ws__burger svg {
			display:							none;
		}
	}

/*	============================================================ */
/*	#endregion END MONOLITH */
/*	============================================================ */