/*	============================================================ */
/*	#region *** VELLUM :: translucent layers */
/*	============================================================ */
	/* translucent layers :: frosted glass over the photographs - the pages in a frosted pill floating over the page, the cover's words on a frosted card
	and the works on a frosted chip, the galleries as tall strips that open when pointed with frosted labels, a frosted bar over soft blots at the foot */

	html[data-template="vellum"] {
		--vl-frost:								rgba(18, 24, 38, 0.28);
		--vl-edge:								rgba(255, 255, 255, 0.55);
		--vl-blur:								blur(18px) saturate(1.4);
		--vl-ink:								rgb(18, 24, 38);
		--vl-blobs:								radial-gradient(circle at 18% 30%, color-mix(in srgb, var(--ws-accent) 55%, transparent), transparent 42%), radial-gradient(circle at 78% 64%, rgba(64, 196, 190, 0.5), transparent 46%), radial-gradient(circle at 52% 110%, rgba(255, 170, 120, 0.45), transparent 48%);
	}

	html[data-template="vellum"] h1,
	html[data-template="vellum"] h2,
	html[data-template="vellum"] h3 {
		font-weight:							600;
		letter-spacing:							-0.02em;
	}

	/* the header :: a frosted pill floating at the top, the name and the pages in it */
	html[data-template="vellum"] .tpl__head--frostpill {
		position:								sticky;
		top:									14px;
		z-index:								30;
		height:									0;
		padding:								0 var(--ws-gap);
		display:								flex;
		justify-content:						center;

		border:									none;
		background:								transparent;
	}

	html[data-template="vellum"] .tpl__pill {
		max-width:								100%;
		height:									52px;
		padding:								0 8px 0 22px;
		display:								flex;
		align-items:							center;
		gap:									18px;

		border:									1px solid var(--vl-edge);
		border-radius:							999px;
		background:								rgba(255, 255, 255, 0.55);
		box-shadow:								0 10px 30px -14px rgba(18, 24, 38, 0.45);
		-webkit-backdrop-filter:				var(--vl-blur);
		backdrop-filter:						var(--vl-blur);
	}

	html[data-template="vellum"] .tpl__head--frostpill .ws__brandname {
		color:									var(--vl-ink);
		font-family:							var(--ws-ff-head);
		font-size:								15px;
		font-weight:							600;
		letter-spacing:							-0.01em;
	}

	html[data-template="vellum"] .tpl__head--frostpill .ws__nav {
		gap:									2px;
	}

	html[data-template="vellum"] .tpl__head--frostpill .ws__navlink {
		padding:								8px 14px;

		border:									none;
		border-radius:							999px;

		color:									rgba(18, 24, 38, 0.7);
		font-size:								13px;
		font-weight:							500;
		letter-spacing:							0;
		text-transform:							none;
	}

	html[data-template="vellum"] .tpl__head--frostpill .ws__navlink.is-on,
	html[data-template="vellum"] .tpl__head--frostpill .ws__navlink:hover {
		background:								rgba(255, 255, 255, 0.75);

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

	html[data-template="vellum"] .tpl__head--frostpill .ws__burger {
		border:									none;
		border-radius:							999px;

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

	html[data-template="vellum"] .ws__main {
		padding-top:							80px;
	}

	html[data-template="vellum"] .ws__main:has(> .tpl__cover--frosted:first-child) {
		padding-top:							0;
	}

	/* the cover :: the photograph from edge to edge, the title and the line on a frosted card, the works counted on a frosted chip */
	html[data-template="vellum"] .tpl__cover--frosted {
		height:									min(94vh, 960px);
		padding:								0 var(--ws-gap) clamp(28px, 6vh, 64px);
		align-items:							flex-end;

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

	html[data-template="vellum"] .tpl__frostcard {
		position:								relative;
		max-width:								620px;
		padding:								clamp(22px, 3vw, 36px);

		border:									1px solid var(--vl-edge);
		border-radius:							28px;
		background:								var(--vl-frost);
		box-shadow:								0 20px 50px -24px rgba(0, 0, 0, 0.45);
		-webkit-backdrop-filter:				var(--vl-blur);
		backdrop-filter:						var(--vl-blur);

		color:									rgb(255, 255, 255);
	}

	html[data-template="vellum"] .tpl__frostcard .ws__herotitle {
		font-size:								clamp(34px, 4.6vw, 64px);
		line-height:							1.02;
		text-shadow:							0 1px 20px rgba(0, 0, 0, 0.25);
	}

	html[data-template="vellum"] .tpl__frostcard .ws__heroline {
		margin-top:								14px;
		opacity:								0.95;

		font-size:								16px;
	}

	html[data-template="vellum"] .tpl__frostchip {
		position:								absolute;
		top:									90px;
		right:									var(--ws-gap);
		padding:								10px 18px;

		border:									1px solid var(--vl-edge);
		border-radius:							999px;
		background:								var(--vl-frost);
		-webkit-backdrop-filter:				var(--vl-blur);
		backdrop-filter:						var(--vl-blur);

		color:									rgb(255, 255, 255);
		font-size:								13px;
		font-weight:							600;
	}

	html[data-template="vellum"] .tpl__blobs {
		position:								absolute;
		inset:									0;

		background:								var(--vl-blobs), var(--ws-card);
	}

	html[data-template="vellum"] .tpl__cover--frosted.is-bare {
		height:									min(70vh, 640px);
	}

	html[data-template="vellum"] .tpl__cover--frosted.is-bare .tpl__frostcard {
		color:									var(--vl-ink);
	}

	/* the sections :: soft, rounded, a frosted panel behind the quotes */
	html[data-template="vellum"] .ws__section + .ws__section {
		border-top:								none;
	}

	html[data-template="vellum"] .ws__sectitle {
		font-size:								clamp(26px, 2.8vw, 38px);
	}

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

	html[data-template="vellum"] .ws__more {
		padding:								6px 14px;

		border:									1px solid color-mix(in srgb, var(--ws-accent) 40%, transparent);
		border-radius:							999px;

		letter-spacing:							0.04em;
	}

	html[data-template="vellum"] .ws__btn {
		border:									none;
		border-radius:							999px;
		background:								var(--ws-accent);

		color:									var(--ws-accent-ink);
		letter-spacing:							0.02em;
		text-transform:							none;
	}

	/* the gallery index :: tall strips side by side, the one pointed opening wide, a frosted label on each */
	html[data-template="vellum"] .tpl__accordion {
		height:									clamp(380px, 56vh, 560px);
		display:								flex;
		gap:									10px;
	}

	html[data-template="vellum"] .tpl__fold {
		position:								relative;
		min-width:								0;
		display:								block;
		flex:									1 1 0;
		overflow:								hidden;

		border-radius:							24px;
		background:								var(--ws-card);

		transition:								flex-grow 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
	}

	html[data-template="vellum"] .tpl__fold:hover,
	html[data-template="vellum"] .tpl__fold:focus-visible {
		flex-grow:								3.2;
	}

	html[data-template="vellum"] .tpl__foldimg {
		position:								absolute;
		inset:									0;
		height:									100%;
		width:									100%;

		object-fit:								cover;

		transition:								transform 0.8s;
	}

	html[data-template="vellum"] .tpl__fold:hover .tpl__foldimg {
		transform:								scale(1.04);
	}

	html[data-template="vellum"] .tpl__foldlabel {
		position:								absolute;
		right:									10px;
		bottom:									10px;
		left:									10px;
		padding:								12px 14px;
		display:								flex;
		flex-direction:							column;
		gap:									2px;
		overflow:								hidden;

		border:									1px solid var(--vl-edge);
		border-radius:							16px;
		background:								var(--vl-frost);
		-webkit-backdrop-filter:				var(--vl-blur);
		backdrop-filter:						var(--vl-blur);

		color:									rgb(255, 255, 255);
	}

	html[data-template="vellum"] .tpl__foldlabel b {
		overflow:								hidden;

		font-family:							var(--ws-ff-head);
		font-size:								16px;
		font-weight:							600;
		text-overflow:							ellipsis;
		white-space:							nowrap;
	}

	html[data-template="vellum"] .tpl__foldlabel i {
		opacity:								0.9;

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

	/* a gallery :: rounded photographs, the captions on frosted labels */
	html[data-template="vellum"] .ws__item {
		position:								relative;
		overflow:								hidden;

		border-radius:							18px;
	}

	html[data-template="vellum"] .ws__itemcap {
		position:								absolute;
		right:									8px;
		bottom:									8px;
		left:									8px;
		padding:								8px 12px;

		border-radius:							12px;
		background:								var(--vl-frost);
		-webkit-backdrop-filter:				var(--vl-blur);
		backdrop-filter:						var(--vl-blur);

		color:									rgb(255, 255, 255);
		font-size:								13px;
	}

	/* about, the record, contact :: frosted cards over soft blots */
	html[data-template="vellum"] .ws__portrait {
		border-radius:							28px;
	}

	html[data-template="vellum"] .ws__badge {
		border:									1px solid color-mix(in srgb, var(--ws-accent) 35%, transparent);
		border-radius:							999px;
		background:								color-mix(in srgb, var(--ws-accent) 8%, transparent);
	}

	html[data-template="vellum"] .ws__stat {
		border:									1px solid color-mix(in srgb, var(--ws-accent) 22%, transparent);
		border-radius:							22px;
		background:								rgba(255, 255, 255, 0.6);
	}

	html[data-template="vellum"] .ws__award {
		border-radius:							999px;
		background:								var(--ws-accent);
	}

	html[data-template="vellum"] .ws__inp {
		border:									1px solid color-mix(in srgb, var(--ws-accent) 25%, transparent);
		border-radius:							14px;
		background:								rgba(255, 255, 255, 0.7);
	}

	/* the foot :: a frosted bar over soft blots of colour */
	html[data-template="vellum"] .tpl__foot--frostbar {
		position:								relative;
		margin-top:								var(--ws-space);
		overflow:								hidden;

		border-top:								none;
	}

	html[data-template="vellum"] .tpl__foot--frostbar .tpl__blobs {
		background:								var(--vl-blobs), var(--ws-bg);
	}

	html[data-template="vellum"] .tpl__foot--frostbar .ws__wrap {
		position:								relative;
		margin-top:								40px;
		margin-bottom:							40px;
		padding-top:							22px;
		padding-bottom:							22px;
		display:								flex;
		flex-wrap:								wrap;
		align-items:							center;
		justify-content:						space-between;
		gap:									10px 24px;

		border:									1px solid var(--vl-edge);
		border-radius:							26px;
		background:								rgba(255, 255, 255, 0.4);
		-webkit-backdrop-filter:				var(--vl-blur);
		backdrop-filter:						var(--vl-blur);

		color:									var(--vl-ink);
		font-size:								13px;
	}

	html[data-template="vellum"] .tpl__frostname {
		font-family:							var(--ws-ff-head);
		font-size:								18px;
		font-weight:							600;
	}

	@media all and (max-width: 760px) {
		html[data-template="vellum"] .tpl__pill {
			width:								100%;
			justify-content:					space-between;
		}

		html[data-template="vellum"] .tpl__head--frostpill .ws__nav {
			top:								60px;

			border:								1px solid var(--vl-edge);
			border-radius:						22px;
			background:							rgba(255, 255, 255, 0.85);
			-webkit-backdrop-filter:			var(--vl-blur);
			backdrop-filter:					var(--vl-blur);
		}

		html[data-template="vellum"] .tpl__head--frostpill .ws__navlink {
			padding:							12px 16px;
		}

		html[data-template="vellum"] .tpl__frostchip {
			top:								80px;
		}

		html[data-template="vellum"] .tpl__accordion {
			height:								auto;
			flex-direction:						column;
		}

		html[data-template="vellum"] .tpl__fold {
			height:								180px;
			flex:								none;
		}
	}

/*	============================================================ */
/*	#endregion END VELLUM */
/*	============================================================ */