/*	============================================================ */
/*	#region *** LEGEND */
/*	============================================================ */
/*		@ October 2026 :: the stylesheet of every member website at /website/<slug>/ */
/*		@ self-contained on purpose :: a member's site is not the IAAP interface, it wears the member's design */
/*		@ the <html> carries the site's choices :: data-nav, data-treat, data-corners, data-scale, data-tone, data-protect, data-reveal */
/*		@ a section carries its own :: data-type, data-layout (a gallery's grid, the galleries' tiles), data-sid, and its tone as ws__tone--<tone> */
/*		@ and its style :: ws__padt-- / ws__padb--<s|m|l|xl>, a band's ws__wrap--<text|wide|full> and ws__band--photo (--ws-bgimg, --ws-shade), data-show */
/*		@ the builder's canvas :: html[data-builder], the rest in canvas.css */
/*		@ the palette and the fonts arrive as css variables on <html> :: --ws-bg, --ws-card, --ws-ink, --ws-soft, --ws-mute, --ws-line, --ws-accent, --ws-accent-ink, --ws-ff-head, --ws-ff-body */
/*		@ regions :: tokens · base · head and nav · hero · sections · tiles · gallery · treatments · about · awards · journal · contact · foot · phone */
/*	============================================================ */
/*	#endregion END LEGEND */
/*	============================================================ */


/*	============================================================ */
/*	#region *** TOKENS */
/*	============================================================ */
	@font-face {
		font-family:							"MiSans";
		font-weight:							400;
		font-style:								normal;
		src:									url("/fonts/misans/MiSansLatin-Normal.woff2") format("woff2"), url("/fonts/misans/MiSansLatin-Normal.woff") format("woff");
		font-display:							swap;
		unicode-range:							U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+FEFF, U+FFFD;
	}

	@font-face {
		font-family:							"MiSans";
		font-weight:							600;
		font-style:								normal;
		src:									url("/fonts/misans/MiSansLatin-Semibold.woff2") format("woff2"), url("/fonts/misans/MiSansLatin-Semibold.woff") format("woff");
		font-display:							swap;
		unicode-range:							U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+FEFF, U+FFFD;
	}

	:root {
		--ws-ff-head:							"MiSans", "Trebuchet MS", Tahoma, Arial, sans-serif;
		--ws-ff-body:							"MiSans", "Trebuchet MS", Tahoma, Arial, sans-serif;
		--ws-bg:								#ffffff;
		--ws-card:								#f5f5f5;
		--ws-ink:								#191919;
		--ws-soft:								#505050;
		--ws-mute:								#828282;
		--ws-line:								#e6e6e6;
		--ws-accent:							#3c698c;
		--ws-accent-ink:						#ffffff;
		--ws-overlay:							rgba(0, 0, 0, 0.45);
		--ws-shadow:							0 10px 30px rgba(0, 0, 0, 0.14);
		--ws-radius:							0px;
		--ws-side:								260px;
		--ws-max:								1320px;
		--ws-gap:								24px;
		--ws-t-hero:							clamp(32px, 5vw, 60px);
		--ws-t-title:							30px;
		--ws-t-section:							22px;
		--ws-t-body:							15px;
		--ws-t-small:							12px;
		--ws-space:								48px;
		--ws-head-h:							72px;

		color-scheme:							light;
	}

	html[data-tone="dark"] {
		--ws-overlay:							rgba(0, 0, 0, 0.55);
		--ws-shadow:							0 10px 30px rgba(0, 0, 0, 0.5);

		color-scheme:							dark;
	}

	html[data-corners="round"] {
		--ws-radius:							10px;
	}

	html[data-corners="pill"] {
		--ws-radius:							22px;
	}

	html[data-scale="sm"] {
		--ws-t-hero:							clamp(26px, 4vw, 44px);
		--ws-t-title:							24px;
		--ws-t-section:							18px;
		--ws-t-body:							14px;
		--ws-t-small:							11px;
		--ws-space:								36px;
	}

	html[data-scale="lg"] {
		--ws-t-hero:							clamp(40px, 7vw, 88px);
		--ws-t-title:							40px;
		--ws-t-section:							28px;
		--ws-t-body:							16px;
		--ws-t-small:							12px;
		--ws-space:								64px;
	}

	html[data-scale="xl"] {
		--ws-t-hero:							clamp(48px, 10vw, 128px);
		--ws-t-title:							56px;
		--ws-t-section:							36px;
		--ws-t-body:							17px;
		--ws-t-small:							13px;
		--ws-space:								80px;
	}
/*	============================================================ */
/*	#endregion END TOKENS */
/*	============================================================ */


/*	============================================================ */
/*	#region *** BASE */
/*	============================================================ */
	* {
		box-sizing:								border-box;
	}

	html, body {
		margin:									0;
		padding:								0;
	}

	body {
		min-height:								100vh;
		display:								flex;
		flex-direction:							column;

		background:								var(--ws-bg);

		color:									var(--ws-ink);
		font-family:							var(--ws-ff-body);
		font-size:								var(--ws-t-body);
		line-height:							1.65;
		-webkit-font-smoothing:					antialiased;
	}

	a {
		color:									inherit;
		text-decoration:						none;
	}

	img {
		max-width:								100%;
		display:								block;
	}

	html[data-protect] img {
		-webkit-user-drag:						none;
		-webkit-touch-callout:					none;

		user-select:							none;
	}

	h1, h2, h3 {
		margin:									0;

		font-family:							var(--ws-ff-head);
		font-weight:							600;
		line-height:							1.15;
	}

	.ws__wrap {
		width:									100%;
		max-width:								var(--ws-max);
		margin:									0 auto;
		padding:								0 var(--ws-gap);
	}

	.ws__main {
		width:									100%;
		flex:									1;
	}

	.ws__title {
		margin:									0 0 6px;

		font-size:								var(--ws-t-title);
		line-height:							1.15;
		letter-spacing:							-0.01em;
	}

	.ws__lead {
		max-width:								720px;
		margin:									0 0 28px;

		color:									var(--ws-soft);
		font-size:								calc(var(--ws-t-body) + 1px);
	}

	.ws__text {
		max-width:								720px;

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

	.ws__text p {
		margin:									0 0 1em;
	}

	.ws__kicker {
		margin:									0 0 10px;
		display:								block;

		color:									var(--ws-accent);
		font-size:								var(--ws-t-small);
		font-weight:							600;
		letter-spacing:							0.14em;
		text-transform:							uppercase;
	}

	.ws__more {
		margin-top:								18px;
		display:								inline-flex;
		gap:									6px;
		align-items:							center;

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

		color:									var(--ws-accent);
		font-size:								calc(var(--ws-t-small) + 1px);
		font-weight:							600;
		letter-spacing:							0.04em;
		text-transform:							uppercase;
	}

	.ws__empty {
		padding:								60px 0;

		color:									var(--ws-mute);
		text-align:								center;
	}

	.ws__btn {
		padding:								12px 24px;
		display:								inline-flex;
		align-items:							center;
		justify-content:						center;
		cursor:									pointer;

		border:									1px solid var(--ws-accent);
		border-radius:							var(--ws-radius);
		background:								var(--ws-accent);

		color:									var(--ws-accent-ink);
		font-family:							inherit;
		font-size:								var(--ws-t-small);
		font-weight:							600;
		letter-spacing:							0.1em;
		text-transform:							uppercase;

		transition:								opacity 0.15s;
	}

	.ws__btn:disabled {
		opacity:								0.5;
		cursor:									default;
	}

	/* a section with its own CSS :: nothing it draws reaches past its own box - the menu, the foot and the other sections stay as the design draws them
	   (its rules are read inside it, website/functions.php wsSectionCss) */
	[data-css] {
		contain:								paint;
	}

	/* an embed :: a service's frame at its ratio or its height, the width of its column (a phone's whole width); the heading and the words above it or
	   beside it, the link under it; the frame's ground stands while the service loads */
	.ws__embed {
		display:								grid;
		grid-template-columns:					minmax(0, 1fr);
		gap:									24px;
	}

	.ws__embed--beside {
		grid-template-columns:					minmax(0, 1fr) minmax(0, 2fr);
		gap:									48px;
		align-items:							start;
	}

	.ws__embedwords .ws__sectitle {
		margin:									0 0 16px;
	}

	.ws__embedframe {
		position:								relative;
		overflow:								hidden;

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

	.ws__embedframe--r169 {
		aspect-ratio:							16 / 9;
	}

	.ws__embedframe--r43 {
		aspect-ratio:							4 / 3;
	}

	.ws__embedframe--r11 {
		max-width:								720px;
		aspect-ratio:							1 / 1;
	}

	.ws__embedframe--h {
		height:									var(--emb-h, 480px);
	}

	.ws__embedframe iframe {
		height:									100%;
		width:									100%;
		position:								absolute;
		inset:									0;

		border:									0;
	}

	.ws__embedlink {
		margin:									12px 0 0;

		color:									var(--ws-mute);
		font-size:								var(--ws-t-small);
		letter-spacing:							0.04em;
	}

	.ws__embedlink a {
		color:									inherit;
		text-decoration:						underline;
		text-underline-offset:					3px;
	}

	@media all and (max-width: 760px) {
		.ws__embed--beside {
			grid-template-columns:				minmax(0, 1fr);
			gap:								24px;
		}
	}

	/* the scroll reveal :: a block fades up once it comes into view, after its own delay (--ws-delay), no movement when the visitor asked for none; a
	   section with a motion of its own (data-motion) reveals even when the site's reveal is off */
	html[data-reveal] .ws__reveal,
	.ws__reveal[data-motion] {
		opacity:								0;

		transition:								opacity 0.7s ease, transform 0.7s ease;
		transition-delay:						var(--ws-delay, 0s);
		transform:								translateY(18px);
	}

	/* a section's own motion :: rising from further below, in from the left or the right (the page never scrolls sideways for it), or growing into place */
	html .ws__reveal[data-motion="up"] {
		transform:								translateY(48px);
	}

	html .ws__reveal[data-motion="left"] {
		transform:								translateX(-40px);
	}

	html .ws__reveal[data-motion="right"] {
		transform:								translateX(40px);
	}

	html .ws__reveal[data-motion="zoom"] {
		transform:								scale(0.94);
	}

	.ws__main:has(.ws__reveal[data-motion="left"], .ws__reveal[data-motion="right"]) {
		overflow-x:								clip;
	}

	html[data-reveal] .ws__reveal.is-in,
	.ws__reveal[data-motion].is-in {
		opacity:								1;

		transform:								none;
	}

	@media (prefers-reduced-motion: reduce) {
		html[data-reveal] .ws__reveal,
		html .ws__reveal[data-motion] {
			opacity:							1;

			transition:							none;
			transform:							none;
		}
	}
/*	============================================================ */
/*	#endregion END BASE */
/*	============================================================ */


/*	============================================================ */
/*	#region *** HEAD AND NAV */
/*	============================================================ */
	.ws__head {
		position:								sticky;
		top:									0;
		z-index:								20;

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

	.ws__headrow {
		min-height:								var(--ws-head-h);
		display:								flex;
		gap:									24px;
		align-items:							center;
		justify-content:						space-between;
	}

	.ws__brand {
		min-width:								0;
		display:								flex;
		flex-direction:							column;
	}

	.ws__brandname {
		overflow:								hidden;

		font-family:							var(--ws-ff-head);
		font-size:								calc(var(--ws-t-body) + 5px);
		font-weight:							600;
		letter-spacing:							0.02em;
		text-overflow:							ellipsis;
		white-space:							nowrap;
	}

	.ws__brandline {
		color:									var(--ws-mute);
		font-size:								var(--ws-t-small);
		letter-spacing:							0.08em;
		text-transform:							uppercase;
	}

	.ws__logo {
		height:									44px;
		width:									auto;
	}

	.ws__nav {
		display:								flex;
		gap:									4px;
		align-items:							center;
	}

	.ws__navlink {
		padding:								8px 12px;

		border-bottom:							2px solid transparent;

		color:									var(--ws-soft);
		font-size:								var(--ws-t-small);
		font-weight:							600;
		letter-spacing:							0.1em;
		text-transform:							uppercase;
		white-space:							nowrap;

		transition:								color 0.15s, border-color 0.15s;
	}

	.ws__navlink:hover {
		color:									var(--ws-ink);
	}

	.ws__navlink.is-on {
		border-bottom-color:					var(--ws-accent);

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

	.ws__burger {
		height:									40px;
		width:									40px;
		padding:								0;
		display:								none;
		align-items:							center;
		justify-content:						center;
		cursor:									pointer;

		border:									1px solid var(--ws-line);
		border-radius:							var(--ws-radius);
		background:								transparent;

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

	.ws__burger svg {
		height:									20px;
		width:									20px;

		fill:									currentColor;
	}

	/* center :: the brand over the pages, both centred */
	html[data-nav="center"] .ws__headrow {
		padding:								18px 0 10px;
		flex-direction:							column;
		gap:									10px;
	}

	html[data-nav="center"] .ws__brand {
		align-items:							center;

		text-align:								center;
	}

	/* split :: half the pages at the left, the brand in the middle, the rest at the right */
	html[data-nav="split"] .ws__headrow {
		display:								grid;
		grid-template-columns:					1fr auto 1fr;
	}

	html[data-nav="split"] .ws__brand {
		align-items:							center;

		text-align:								center;
	}

	html[data-nav="split"] .ws__nav--l {
		justify-content:						flex-start;
	}

	html[data-nav="split"] .ws__nav--r {
		justify-content:						flex-end;
	}

	/* minimal :: only the brand and a button, the pages as a full-screen sheet */
	html[data-nav="minimal"] .ws__burger {
		display:								inline-flex;
	}

	html[data-nav="minimal"] .ws__nav {
		position:								fixed;
		z-index:								30;
		display:								none;
		flex-direction:							column;
		gap:									8px;
		align-items:							center;
		justify-content:						center;

		background:								var(--ws-bg);
		inset:									0;
	}

	html[data-nav="minimal"] body.is-nav .ws__nav {
		display:								flex;
	}

	html[data-nav="minimal"] .ws__navlink {
		padding:								10px 0;

		font-family:							var(--ws-ff-head);
		font-size:								var(--ws-t-section);
		letter-spacing:							0.04em;
		text-transform:							none;
	}

	html[data-nav="minimal"] body.is-nav .ws__burger {
		position:								fixed;
		top:									16px;
		right:									var(--ws-gap);
		z-index:								31;
	}

	/* bottom :: the pages in a bar fixed at the foot of the screen, the brand alone in the head */
	html[data-nav="bottom"] .ws__nav {
		position:								fixed;
		right:									0;
		bottom:									0;
		left:									0;
		z-index:								20;
		padding:								6px var(--ws-gap);
		gap:									0;
		justify-content:						center;

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

	html[data-nav="bottom"] body {
		padding-bottom:							52px;
	}

	/* float :: the head sits over the top of the page in white, and turns solid once the page scrolls */
	html[data-nav="float"] .ws__head {
		position:								fixed;
		right:									0;
		left:									0;

		border-bottom-color:					transparent;
		background:								transparent;

		transition:								background 0.3s, border-color 0.3s;
	}

	html[data-nav="float"] .ws__head:not(.is-scrolled) .ws__brandname,
	html[data-nav="float"] .ws__head:not(.is-scrolled) .ws__brandline,
	html[data-nav="float"] .ws__head:not(.is-scrolled) .ws__navlink,
	html[data-nav="float"] .ws__head:not(.is-scrolled) .ws__burger {
		color:									rgb(255, 255, 255);
		text-shadow:							0 1px 8px rgba(0, 0, 0, 0.35);
	}

	html[data-nav="float"] .ws__head.is-scrolled,
	html[data-nav="float"] .ws__head.is-plain {
		border-bottom-color:					var(--ws-line);
		background:								var(--ws-bg);
	}

	html[data-nav="float"] .ws__head.is-plain {
		position:								sticky;
	}

	/* the rails :: the brand and the pages stacked beside the content on a wide screen */
	@media all and (min-width: 961px) {
		html[data-nav="left"] body,
		html[data-nav="right"] body {
			display:							grid;
			grid-template-columns:				var(--ws-side) minmax(0, 1fr);
			grid-template-rows:					auto 1fr auto;
		}

		html[data-nav="right"] body {
			grid-template-columns:				minmax(0, 1fr) var(--ws-side);
		}

		html[data-nav="left"] .ws__head,
		html[data-nav="right"] .ws__head {
			height:								100vh;

			border-right:						1px solid var(--ws-line);
			border-bottom:						none;
			grid-row:							1 / 4;
		}

		html[data-nav="right"] .ws__head {
			grid-column:						2;

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

		html[data-nav="left"] .ws__headrow,
		html[data-nav="right"] .ws__headrow {
			height:								auto;
			padding:							40px 28px;
			flex-direction:						column;
			gap:								40px;
			align-items:						flex-start;
		}

		html[data-nav="left"] .ws__headrow.ws__wrap,
		html[data-nav="right"] .ws__headrow.ws__wrap {
			max-width:							none;
		}

		html[data-nav="left"] .ws__nav,
		html[data-nav="right"] .ws__nav {
			flex-direction:						column;
			align-items:						flex-start;
		}

		html[data-nav="left"] .ws__navlink,
		html[data-nav="right"] .ws__navlink {
			padding:							6px 0;
		}

		html[data-nav="left"] .ws__main,
		html[data-nav="left"] .ws__foot {
			grid-column:						2;
		}

		html[data-nav="right"] .ws__main,
		html[data-nav="right"] .ws__foot {
			grid-column:						1;
		}

		html[data-nav="right"] .ws__main {
			grid-row:							1 / 3;
		}
	}
/*	============================================================ */
/*	#endregion END HEAD AND NAV */
/*	============================================================ */


/*	============================================================ */
/*	#region *** HERO */
/*	============================================================ */
	.ws__hero {
		height:									min(58vh, 560px);
		position:								relative;
		display:								flex;
		align-items:							flex-end;
		overflow:								hidden;

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

	.ws__hero--full {
		height:									min(92vh, 900px);
	}

	.ws__heroimg {
		height:									100%;
		width:									100%;
		position:								absolute;
		inset:									0;

		object-fit:								cover;
	}

	.ws__heroveil {
		position:								absolute;
		inset:									0;

		background:								linear-gradient(to top, var(--ws-overlay), transparent 60%);
	}

	.ws__herotext {
		position:								relative;
		padding:								40px var(--ws-gap);

		color:									rgb(255, 255, 255);
		text-shadow:							0 1px 12px rgba(0, 0, 0, 0.35);
	}

	.ws__hero--plain .ws__herotext {
		color:									var(--ws-ink);
		text-shadow:							none;
	}

	.ws__herotitle {
		margin:									0;

		font-size:								var(--ws-t-hero);
		line-height:							1.05;
		letter-spacing:							-0.015em;
	}

	.ws__heroline {
		max-width:								720px;
		margin:									12px 0 0;
		opacity:								0.92;

		font-size:								clamp(14px, 1.6vw, 19px);
	}

	.ws__hero--center {
		align-items:							center;
	}

	.ws__hero--center .ws__herotext {
		width:									100%;

		text-align:								center;
	}

	.ws__hero--center .ws__heroline {
		margin-right:							auto;
		margin-left:							auto;
	}

	/* type :: the name alone, as big as the design wants, no photograph */
	.ws__hero--type {
		height:									auto;
		min-height:								min(50vh, 480px);
		align-items:							center;

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

	.ws__hero--type.ws__hero--full {
		min-height:								min(88vh, 860px);
	}

	.ws__hero--type .ws__herotext {
		padding:								var(--ws-space) var(--ws-gap);
	}

	.ws__hero--type .ws__herotitle {
		font-size:								calc(var(--ws-t-hero) * 1.25);
		letter-spacing:							-0.03em;
	}

	/* split :: the words on one side, the photograph on the other */
	.ws__hero--split {
		height:									auto;
		min-height:								min(60vh, 600px);
		display:								grid;
		grid-template-columns:					minmax(0, 1fr) minmax(0, 1fr);
		align-items:							stretch;

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

	.ws__hero--split.ws__hero--full {
		min-height:								min(90vh, 880px);
	}

	.ws__hero--split .ws__herotext {
		padding:								var(--ws-space) var(--ws-gap);
		align-self:								center;

		color:									var(--ws-ink);
		text-shadow:							none;
	}

	.ws__hero--split .ws__heroimg {
		min-height:								320px;
		position:								relative;
		grid-column:							2;
	}

	.ws__hero--split .ws__heroveil {
		display:								none;
	}

	/* framed :: the photograph contained in a wide margin, the words under it */
	.ws__hero--framed {
		height:									auto;
		flex-direction:							column;
		align-items:							stretch;

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

	.ws__hero--framed .ws__heroimg {
		height:									min(60vh, 620px);
		width:									auto;
		max-width:								calc(100% - 2 * var(--ws-gap));
		position:								relative;
		margin:									var(--ws-space) auto 0;

		object-fit:								contain;
	}

	.ws__hero--framed.ws__hero--full .ws__heroimg {
		height:									min(80vh, 820px);
	}

	.ws__hero--framed .ws__heroveil {
		display:								none;
	}

	.ws__hero--framed .ws__herotext {
		padding:								24px var(--ws-gap) 0;

		color:									var(--ws-ink);
		text-shadow:							none;
	}

	/* kenburns :: the photograph drifts slowly in */
	.ws__hero--kenburns .ws__heroimg {
		animation:								ws-kenburns 24s ease-out forwards;
	}

	@keyframes ws-kenburns {
		from {
			transform:							scale(1);
		}

		to {
			transform:							scale(1.12);
		}
	}

	/* panorama :: a short wide band */
	.ws__hero--panorama {
		height:									min(34vh, 360px);
	}

	.ws__hero--panorama.ws__hero--full {
		height:									min(46vh, 480px);
	}

	/* slideshow :: the photographs cross-fade, one every few seconds */
	.ws__hero--slideshow .ws__heroimg {
		opacity:								0;

		transition:								opacity 1.4s ease;
	}

	.ws__hero--slideshow .ws__heroimg.is-on {
		opacity:								1;
	}

	/* collage :: three to five photographs in a mosaic */
	.ws__hero--collage {
		height:									auto;
		padding:								8px;
		display:								grid;
		grid-template-columns:					2fr 1fr 1fr;
		grid-template-rows:						minmax(180px, 32vh) minmax(180px, 32vh);
		gap:									8px;

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

	.ws__hero--collage .ws__heroimg {
		height:									100%;
		position:								relative;

		border-radius:							var(--ws-radius);
	}

	.ws__hero--collage .ws__heroimg:first-of-type {
		grid-row:								1 / 3;
	}

	.ws__hero--collage .ws__heroveil {
		display:								none;
	}

	.ws__hero--collage .ws__herotext {
		grid-column:							1 / -1;

		padding:								18px var(--ws-gap) 10px;

		color:									var(--ws-ink);
		text-shadow:							none;
	}

	/* strip :: a film strip of photographs scrolling sideways */
	.ws__hero--strip {
		height:									auto;
		flex-direction:							column;
		align-items:							stretch;

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

	.ws__strip {
		padding:								var(--ws-gap) var(--ws-gap) 0;
		display:								flex;
		gap:									10px;
		overflow-x:								auto;
		scroll-snap-type:						x mandatory;
		scrollbar-width:						none;
	}

	.ws__strip::-webkit-scrollbar {
		display:								none;
	}

	.ws__strip img {
		height:									min(52vh, 520px);
		width:									auto;
		flex:									0 0 auto;
		scroll-snap-align:						start;

		border-radius:							var(--ws-radius);
	}

	.ws__hero--full .ws__strip img {
		height:									min(72vh, 760px);
	}

	.ws__hero--strip .ws__herotext {
		padding:								18px var(--ws-gap) 0;

		color:									var(--ws-ink);
		text-shadow:							none;
	}

	/* stack :: a few photographs thrown on the table */
	.ws__hero--stack {
		height:									auto;
		min-height:								min(60vh, 600px);
		padding:								var(--ws-space) var(--ws-gap);
		flex-direction:							column;
		align-items:							center;
		justify-content:						center;

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

	.ws__stack {
		height:									min(44vh, 420px);
		width:									min(100%, 720px);
		position:								relative;
	}

	.ws__stack img {
		height:									100%;
		width:									60%;
		position:								absolute;
		top:									0;
		left:									20%;
		padding:								10px 10px 36px;

		background:								rgb(255, 255, 255);
		object-fit:								cover;
		box-shadow:								var(--ws-shadow);
	}

	.ws__stack img:nth-child(1) {
		transform:								rotate(-7deg) translateX(-12%);
	}

	.ws__stack img:nth-child(2) {
		transform:								rotate(5deg) translateX(14%);
	}

	.ws__stack img:nth-child(3) {
		transform:								rotate(-1deg);
	}

	.ws__hero--stack .ws__herotext {
		padding:								28px 0 0;

		color:									var(--ws-ink);
		text-align:								center;
		text-shadow:							none;
	}

	/* circle :: the portrait in a circle, the name beside it */
	.ws__hero--circle {
		height:									auto;
		min-height:								min(50vh, 480px);
		align-items:							center;

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

	.ws__hero--circle .ws__wrap {
		padding-top:							var(--ws-space);
		padding-bottom:							var(--ws-space);
		display:								flex;
		flex-wrap:								wrap;
		gap:									40px;
		align-items:							center;
	}

	.ws__hero--circle.ws__hero--center .ws__wrap {
		flex-direction:							column;

		text-align:								center;
	}

	.ws__hero--circle .ws__heroimg {
		height:									min(32vw, 260px);
		width:									min(32vw, 260px);
		position:								relative;
		flex:									0 0 auto;

		border-radius:							50%;
	}

	.ws__hero--circle .ws__herotext {
		padding:								0;

		color:									var(--ws-ink);
		text-shadow:							none;
	}
/*	============================================================ */
/*	#endregion END HERO */
/*	============================================================ */


/*	============================================================ */
/*	#region *** SECTIONS AND TILES */
/*	============================================================ */
	.ws__section {
		padding:								var(--ws-space) 0;
	}

	.ws__section + .ws__section {
		border-top:								1px solid var(--ws-line);
	}

	.ws__sechead {
		margin-bottom:							22px;
		display:								flex;
		gap:									16px;
		align-items:							baseline;
		justify-content:						space-between;
	}

	.ws__sectitle {
		margin:									0;

		font-size:								var(--ws-t-section);
	}

	/* a quote :: the member's words, large and centred */
	.ws__quote {
		max-width:								860px;
		margin:									0 auto;

		text-align:								center;
	}

	.ws__quotetext {
		font-family:							var(--ws-ff-head);
		font-size:								calc(var(--ws-t-section) + 4px);
		line-height:							1.4;
	}

	.ws__quoteby {
		margin-top:								14px;

		color:									var(--ws-mute);
		font-size:								var(--ws-t-small);
		letter-spacing:							0.1em;
		text-transform:							uppercase;
	}

	/* the stats bar :: four numbers side by side */
	.ws__statbar {
		display:								grid;
		grid-template-columns:					repeat(auto-fit, minmax(140px, 1fr));
		gap:									12px;
	}

	/* the contact teaser :: a line and the button */
	.ws__teaser {
		display:								flex;
		flex-wrap:								wrap;
		gap:									16px 32px;
		align-items:							center;
		justify-content:						space-between;
	}

	/* the tiles of the portfolio */
	.ws__tiles {
		display:								grid;
		grid-template-columns:					repeat(auto-fill, minmax(280px, 1fr));
		gap:									var(--ws-gap);
	}

	.ws__tile {
		position:								relative;
		display:								block;
	}

	.ws__tileimg {
		aspect-ratio:							4 / 3;

		width:									100%;
		overflow:								hidden;

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

	.ws__tileimg img {
		height:									100%;
		width:									100%;

		object-fit:								cover;

		transition:								transform 0.5s;
	}

	.ws__tile:hover .ws__tileimg img {
		transform:								scale(1.03);
	}

	.ws__tilename {
		margin:									12px 0 0;

		font-family:							var(--ws-ff-head);
		font-size:								calc(var(--ws-t-body) + 1px);
		font-weight:							600;
	}

	.ws__tilecount {
		color:									var(--ws-mute);
		font-size:								var(--ws-t-small);
		letter-spacing:							0.06em;
		text-transform:							uppercase;
	}

	.ws__tilelock {
		margin-left:							6px;
		display:								inline-block;
		opacity:								0.7;
	}

	/* overlay :: the name over the photograph */
	section[data-layout="overlay"] .ws__tilename,
	section[data-layout="overlay"] .ws__tilecount {
		position:								absolute;
		left:									18px;
		margin:									0;

		color:									rgb(255, 255, 255);
		text-shadow:							0 1px 10px rgba(0, 0, 0, 0.4);
	}

	section[data-layout="overlay"] .ws__tilename {
		bottom:									34px;
	}

	section[data-layout="overlay"] .ws__tilecount {
		bottom:									16px;
	}

	section[data-layout="overlay"] .ws__tileimg::after {
		content:								"";
		position:								absolute;
		inset:									0;

		background:								linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 55%);
	}

	section[data-layout="overlay"] .ws__tileimg {
		position:								relative;
	}

	/* hover :: the name appears on a hover, under the photograph on a touch screen */
	@media (hover: hover) {
		section[data-layout="hover"] .ws__tilename,
		section[data-layout="hover"] .ws__tilecount {
			position:							absolute;
			right:								0;
			left:								0;
			margin:								0;
			opacity:							0;

			color:								rgb(255, 255, 255);
			text-align:							center;
			text-shadow:						0 1px 10px rgba(0, 0, 0, 0.4);

			transition:							opacity 0.25s;
		}

		section[data-layout="hover"] .ws__tilename {
			top:								calc(50% - 16px);
		}

		section[data-layout="hover"] .ws__tilecount {
			top:								calc(50% + 12px);
		}

		section[data-layout="hover"] .ws__tile:hover .ws__tilename,
		section[data-layout="hover"] .ws__tile:hover .ws__tilecount {
			opacity:							1;
		}

		section[data-layout="hover"] .ws__tile:hover .ws__tileimg img {
			filter:								brightness(0.65);
		}
	}

	/* list :: a row per gallery with a small picture */
	section[data-layout="list"] .ws__tiles {
		grid-template-columns:					1fr;
		gap:									0;
	}

	section[data-layout="list"] .ws__tile {
		padding:								16px 0;
		display:								grid;
		grid-template-columns:					120px minmax(0, 1fr) auto;
		gap:									20px;
		align-items:							center;

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

	section[data-layout="list"] .ws__tileimg {
		aspect-ratio:							3 / 2;
	}

	section[data-layout="list"] .ws__tilename {
		margin:									0;

		font-size:								var(--ws-t-section);
	}

	/* stack :: large covers one under the other with big names */
	section[data-layout="stack"] .ws__tiles {
		grid-template-columns:					1fr;
		gap:									var(--ws-space);
	}

	section[data-layout="stack"] .ws__tileimg {
		aspect-ratio:							21 / 9;
	}

	section[data-layout="stack"] .ws__tilename {
		font-size:								var(--ws-t-title);
	}

	/* square and circle covers */
	section[data-layout="square"] .ws__tiles {
		grid-template-columns:					repeat(auto-fill, minmax(220px, 1fr));
	}

	section[data-layout="square"] .ws__tileimg {
		aspect-ratio:							1;
	}

	section[data-layout="circle"] .ws__tiles {
		grid-template-columns:					repeat(auto-fill, minmax(220px, 1fr));

		text-align:								center;
	}

	section[data-layout="circle"] .ws__tileimg {
		aspect-ratio:							1;

		border-radius:							50%;
	}

	/* text :: the names alone, big, the cover shown on a hover beside the pointer's row */
	section[data-layout="text"] .ws__tiles {
		grid-template-columns:					1fr;
		gap:									0;
	}

	section[data-layout="text"] .ws__tile {
		padding:								18px 0;
		display:								flex;
		gap:									16px;
		align-items:							baseline;
		justify-content:						space-between;

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

	section[data-layout="text"] .ws__tileimg {
		display:								none;
	}

	section[data-layout="text"] .ws__tilename {
		margin:									0;

		font-size:								var(--ws-t-title);
		font-weight:							400;
	}

	@media (hover: hover) {
		section[data-layout="text"] .ws__tileimg {
			height:								220px;
			width:								300px;
			position:							fixed;
			right:								6vw;
			bottom:								8vh;
			z-index:							5;
			display:							block;
			opacity:							0;
			pointer-events:						none;

			box-shadow:							var(--ws-shadow);

			transition:							opacity 0.25s;
			aspect-ratio:						auto;
		}

		section[data-layout="text"] .ws__tile:hover .ws__tileimg {
			opacity:							1;
		}
	}
/*	============================================================ */
/*	#endregion END SECTIONS AND TILES */
/*	============================================================ */


/*	============================================================ */
/*	#region *** GALLERY */
/*	============================================================ */
	.ws__gallery {
		columns:								3;
		column-gap:								16px;
	}

	.ws__item {
		margin:									0 0 16px;
		display:								block;
		overflow:								hidden;
		break-inside:							avoid;

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

	.ws__item img {
		width:									100%;
	}

	.ws__itemcap {
		display:								none;
	}

	/* grid :: equal squares */
	section[data-layout="grid"] .ws__gallery {
		columns:								auto;

		display:								grid;
		grid-template-columns:					repeat(auto-fill, minmax(260px, 1fr));
		gap:									16px;
	}

	section[data-layout="grid"] .ws__item {
		aspect-ratio:							1;

		margin:									0;
	}

	section[data-layout="grid"] .ws__item img {
		height:									100%;

		object-fit:								cover;
	}

	/* large :: one under the other */
	section[data-layout="large"] .ws__gallery {
		max-width:								1100px;
		margin:									0 auto;
		columns:								auto;
	}

	section[data-layout="large"] .ws__item {
		margin:									0 0 40px;
	}

	section[data-layout="large"] .ws__itemcap {
		padding:								12px 0 0;
		display:								block;

		color:									var(--ws-mute);
		font-size:								var(--ws-t-small);
		text-align:								center;
	}

	/* columns :: two wide columns */
	section[data-layout="columns"] .ws__gallery {
		columns:								2;
		column-gap:								24px;
	}

	section[data-layout="columns"] .ws__item {
		margin-bottom:							24px;
	}

	/* justified :: rows of equal height, site.js sets each item's share of its row */
	section[data-layout="justified"] .ws__gallery {
		columns:								auto;

		display:								flex;
		flex-wrap:								wrap;
		gap:									10px;
	}

	section[data-layout="justified"] .ws__item {
		height:									280px;
		margin:									0;
		flex:									1 1 300px;
	}

	section[data-layout="justified"] .ws__item img {
		height:									100%;
		width:									100%;

		object-fit:								cover;
	}

	/* strip :: one row that scrolls sideways */
	section[data-layout="strip"] .ws__gallery {
		padding-bottom:							12px;
		display:								flex;
		gap:									12px;
		overflow-x:								auto;
		columns:								auto;
		scroll-snap-type:						x mandatory;
		scrollbar-width:						none;
	}

	section[data-layout="strip"] .ws__gallery::-webkit-scrollbar {
		display:								none;
	}

	section[data-layout="strip"] .ws__item {
		height:									min(64vh, 640px);
		margin:									0;
		flex:									0 0 auto;
		scroll-snap-align:						start;
	}

	section[data-layout="strip"] .ws__item img {
		height:									100%;
		width:									auto;
	}

	/* mosaic :: a bento pattern, every fifth photograph twice as wide, every seventh twice as tall */
	section[data-layout="mosaic"] .ws__gallery {
		columns:								auto;

		display:								grid;
		grid-template-columns:					repeat(auto-fill, minmax(200px, 1fr));
		grid-auto-rows:							200px;
		grid-auto-flow:							dense;
		gap:									10px;
	}

	section[data-layout="mosaic"] .ws__item {
		margin:									0;
	}

	section[data-layout="mosaic"] .ws__item img {
		height:									100%;

		object-fit:								cover;
	}

	section[data-layout="mosaic"] .ws__item:nth-child(5n + 1) {
		grid-column:							span 2;
	}

	section[data-layout="mosaic"] .ws__item:nth-child(7n + 3) {
		grid-row:								span 2;
	}

	/* cards :: photographs on cards with their names, each a little turned */
	section[data-layout="cards"] .ws__gallery {
		columns:								auto;

		display:								grid;
		grid-template-columns:					repeat(auto-fill, minmax(240px, 1fr));
		gap:									28px;
	}

	section[data-layout="cards"] .ws__item {
		margin:									0;
		padding:								10px 10px 14px;

		background:								rgb(255, 255, 255);
		box-shadow:								var(--ws-shadow);

		transition:								transform 0.25s;
		transform:								rotate(-1.5deg);
	}

	section[data-layout="cards"] .ws__item:nth-child(even) {
		transform:								rotate(1.5deg);
	}

	section[data-layout="cards"] .ws__item:hover {
		z-index:								2;

		transform:								rotate(0) scale(1.03);
	}

	section[data-layout="cards"] .ws__item img {
		aspect-ratio:							1;

		object-fit:								cover;
	}

	section[data-layout="cards"] .ws__itemcap {
		padding:								10px 2px 0;
		display:								block;

		color:									rgb(60, 60, 60);
		font-family:							var(--ws-ff-head);
		font-size:								var(--ws-t-small);
		text-align:								center;
	}

	/* contact :: a contact sheet, dark frames with their numbers */
	section[data-layout="contact"] .ws__gallery {
		padding:								18px;
		display:								grid;
		grid-template-columns:					repeat(auto-fill, minmax(180px, 1fr));
		gap:									6px;

		background:								rgb(20, 20, 20);
		columns:								auto;
	}

	section[data-layout="contact"] .ws__item {
		position:								relative;
		margin:									0;
		aspect-ratio:							3 / 2;

		border:									1px solid rgb(60, 60, 60);
		border-radius:							0;
		background:								rgb(28, 28, 28);
	}

	section[data-layout="contact"] .ws__item img {
		height:									100%;

		object-fit:								contain;
	}

	section[data-layout="contact"] .ws__item::after {
		content:								attr(data-n);
		position:								absolute;
		right:									6px;
		bottom:									4px;

		color:									rgb(220, 170, 60);
		font-family:							"Courier New", monospace;
		font-size:								11px;
	}

	/* slideshow :: one photograph at a time, the rest as a row of thumbs */
	section[data-layout="slideshow"] .ws__gallery {
		columns:								auto;

		display:								flex;
		gap:									8px;
		overflow-x:								auto;
		scrollbar-width:						none;
	}

	section[data-layout="slideshow"] .ws__gallery::-webkit-scrollbar {
		display:								none;
	}

	section[data-layout="slideshow"] .ws__item {
		height:									84px;
		margin:									0;
		flex:									0 0 auto;
		opacity:								0.55;

		transition:								opacity 0.2s;
	}

	section[data-layout="slideshow"] .ws__item.is-on,
	section[data-layout="slideshow"] .ws__item:hover {
		opacity:								1;
	}

	section[data-layout="slideshow"] .ws__item img {
		height:									100%;
		width:									auto;
	}

	.ws__stage {
		max-height:								78vh;
		margin-bottom:							14px;
		display:								none;
		align-items:							center;
		justify-content:						center;

		border-radius:							var(--ws-radius);
		background:								var(--ws-card);
		aspect-ratio:							3 / 2;
	}

	section[data-layout="slideshow"] .ws__stage {
		display:								flex;
	}

	.ws__stage img {
		max-height:								100%;
		max-width:								100%;
		cursor:									zoom-in;
	}

	/* alternating :: a photograph and its name side by side, the side swapping each row */
	section[data-layout="alternating"] .ws__gallery {
		columns:								auto;

		display:								flex;
		flex-direction:							column;
		gap:									var(--ws-space);
	}

	section[data-layout="alternating"] .ws__item {
		margin:									0;
		display:								grid;
		grid-template-columns:					3fr 2fr;
		gap:									32px;
		align-items:							center;

		background:								transparent;
	}

	section[data-layout="alternating"] .ws__item:nth-child(even) {
		grid-template-columns:					2fr 3fr;
	}

	section[data-layout="alternating"] .ws__item:nth-child(even) img {
		order:									2;
	}

	section[data-layout="alternating"] .ws__itemcap {
		display:								block;

		font-family:							var(--ws-ff-head);
		font-size:								var(--ws-t-section);
	}

	/* the lightbox :: a dark ground with light controls (a gallery's ground switch puts the site's own in its place, below), the member's font and a quiet
	   caption in the bottom bar above the thumbnails (the bundle pins it to the window's foot, over them); IAAP's lightgallery bundle is a light theme
	   that loads after this file, so each rule here carries .lg-container to outweigh it */
	.lg-container .lg-backdrop {
		background:								rgb(12, 12, 12);
	}

	.lg-container .lg-toolbar .lg-icon,
	.lg-container .lg-counter {
		color:									rgba(255, 255, 255, 0.72);
	}

	.lg-container .lg-next,
	.lg-container .lg-prev {
		background-color:						rgba(255, 255, 255, 0.1);

		color:									rgba(255, 255, 255, 0.72);
	}

	.lg-container .lg-toolbar .lg-icon:hover,
	.lg-container .lg-next:hover:not(.disabled),
	.lg-container .lg-prev:hover:not(.disabled) {
		color:									rgb(255, 255, 255);
	}

	.lg-container .lg-sub-html {
		position:								relative;

		color:									rgb(235, 235, 235);
		font-family:							var(--ws-ff-body);
		font-size:								14px;
	}

	.lg-sub-html p {
		margin:									4px 0 0;

		opacity:								0.8;
	}

	/* the lightbox's EXIF and record lines :: under the title and the line, a step quieter */
	.lg-sub-html .ws__subnote {
		font-size:								12px;

		opacity:								0.65;
	}

	/* a photograph's badge (a gallery's choice) :: the level's word, the salon and the year of its highest award, or its acceptances, low on the photograph */
	.ws__item:has(> .ws__medal) {
		position:								relative;
	}

	.ws__medal {
		max-width:								calc(100% - 16px);
		padding:								3px 9px 3px 8px;
		position:								absolute;
		bottom:									8px;
		left:									8px;
		display:								inline-flex;
		gap:									6px;
		align-items:							center;
		overflow:								hidden;
		pointer-events:							none;

		border-radius:							999px;
		background:								rgba(12, 12, 12, 0.72);

		color:									rgb(255, 255, 255);
		font-family:							var(--ws-ff-body);
		font-size:								11px;
		font-weight:							600;
		letter-spacing:							0.04em;
		line-height:							1.4;
		text-overflow:							ellipsis;
		text-transform:							uppercase;
		white-space:							nowrap;
	}

	.ws__medal::before {
		content:								"";
		height:									8px;
		width:									8px;
		flex:									none;

		border-radius:							50%;
		background:								rgba(255, 255, 255, 0.55);
	}

	.ws__medal--l1::before {
		background:								rgb(214, 175, 55);
	}

	.ws__medal--l2::before {
		background:								rgb(192, 197, 204);
	}

	.ws__medal--l3::before {
		background:								rgb(190, 122, 74);
	}

	.ws__medal--l4::before {
		background:								rgb(120, 170, 220);
	}

	/* the lightbox on the site's own ground (a gallery's choice; site.js puts the class on .lg-container) :: the ground, the bars and the words in the
	   site's palette, one class over the dark ground's rules and the bundle's */
	.lg-container.ws__lg--site .lg-backdrop,
	.lg-container.ws__lg--site .lg-thumb-outer {
		background:								var(--ws-bg);
	}

	.lg-container.ws__lg--site .lg-toolbar,
	.lg-container.ws__lg--site .lg-sub-html {
		background:								none;
	}

	.lg-container.ws__lg--site .lg-next,
	.lg-container.ws__lg--site .lg-prev {
		background-color:						var(--ws-bg);
	}

	.lg-container.ws__lg--site .lg-sub-html,
	.lg-container.ws__lg--site .lg-counter,
	.lg-container.ws__lg--site .lg-icon,
	.lg-container.ws__lg--site .lg-toolbar .lg-icon:hover,
	.lg-container.ws__lg--site .lg-next:hover:not(.disabled),
	.lg-container.ws__lg--site .lg-prev:hover:not(.disabled) {
		color:									var(--ws-ink);
	}
/*	============================================================ */
/*	#endregion END GALLERY */
/*	============================================================ */


/*	============================================================ */
/*	#region *** TREATMENTS */
/*	============================================================ */
	html[data-treat="shadow"] .ws__item,
	html[data-treat="shadow"] .ws__tileimg {
		box-shadow:								var(--ws-shadow);
	}

	html[data-treat="border"] .ws__item,
	html[data-treat="border"] .ws__tileimg {
		border:									1px solid var(--ws-line);
	}

	html[data-treat="frame"] .ws__item,
	html[data-treat="frame"] .ws__tileimg {
		padding:								10px;

		border:									1px solid var(--ws-line);
		outline:								1px solid var(--ws-line);
		outline-offset:							-14px;
		background:								var(--ws-bg);
	}

	html[data-treat="round"] .ws__item,
	html[data-treat="round"] .ws__tileimg {
		border-radius:							16px;
	}

	html[data-treat="grayscale"] .ws__item img,
	html[data-treat="grayscale"] .ws__tileimg img {
		filter:									grayscale(1);

		transition:								filter 0.4s;
	}

	html[data-treat="grayscale"] .ws__item:hover img,
	html[data-treat="grayscale"] .ws__tile:hover .ws__tileimg img {
		filter:									grayscale(0);
	}

	html[data-treat="vignette"] .ws__item,
	html[data-treat="vignette"] .ws__tileimg {
		position:								relative;
	}

	html[data-treat="vignette"] .ws__item::before,
	html[data-treat="vignette"] .ws__tileimg::before {
		content:								"";
		position:								absolute;
		z-index:								1;
		pointer-events:							none;

		box-shadow:								inset 0 0 80px rgba(0, 0, 0, 0.45);
		inset:									0;
	}

	html[data-treat="polaroid"] .ws__item,
	html[data-treat="polaroid"] .ws__tileimg {
		padding:								8px 8px 28px;

		background:								rgb(255, 255, 255);
		box-shadow:								var(--ws-shadow);
	}

	/* the watermark :: the member's text in the corner of every photograph of a gallery, each photograph carrying it (attr() reads only its own element) */
	.ws__item[data-mark] {
		position:								relative;
	}

	.ws__item[data-mark]::after {
		content:								attr(data-mark);
		position:								absolute;
		right:									10px;
		bottom:									10px;
		z-index:								2;
		pointer-events:							none;

		color:									rgba(255, 255, 255, 0.55);
		font-family:							var(--ws-ff-head);
		font-size:								13px;
		letter-spacing:							0.1em;
		text-shadow:							0 1px 6px rgba(0, 0, 0, 0.5);
		text-transform:							uppercase;
	}
/*	============================================================ */
/*	#endregion END TREATMENTS */
/*	============================================================ */


/*	============================================================ */
/*	#region *** ABOUT */
/*	============================================================ */
	.ws__about {
		display:								grid;
		grid-template-columns:					minmax(240px, 360px) minmax(0, 1fr);
		gap:									48px;
		align-items:							start;
	}

	.ws__portrait {
		aspect-ratio:							4 / 5;

		width:									100%;
		overflow:								hidden;

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

	.ws__portrait img {
		height:									100%;
		width:									100%;

		object-fit:								cover;
	}

	.ws__badges {
		margin:									26px 0 0;
		padding:								0;
		display:								flex;
		flex-wrap:								wrap;
		gap:									8px;

		list-style:								none;
	}

	.ws__badge {
		padding:								6px 12px;

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

		font-size:								var(--ws-t-small);
		font-weight:							600;
		letter-spacing:							0.04em;
	}

	.ws__badge--accent {
		border-color:							var(--ws-accent);

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

	.ws__stats {
		margin:									30px 0 0;
		display:								grid;
		grid-template-columns:					repeat(auto-fit, minmax(130px, 1fr));
		gap:									12px;
	}

	.ws__stat {
		padding:								16px;

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

	.ws__statnum {
		display:								block;

		font-family:							var(--ws-ff-head);
		font-size:								calc(var(--ws-t-section) + 6px);
		font-weight:							600;
		line-height:							1.1;
	}

	.ws__statlbl {
		margin-top:								6px;
		display:								block;

		color:									var(--ws-mute);
		font-size:								var(--ws-t-small);
		letter-spacing:							0.08em;
		text-transform:							uppercase;
	}
/*	============================================================ */
/*	#endregion END ABOUT */
/*	============================================================ */


/*	============================================================ */
/*	#region *** AWARDS */
/*	============================================================ */
	.ws__year {
		margin:									34px 0 10px;
		padding-bottom:							8px;

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

		font-size:								calc(var(--ws-t-body) + 3px);
	}

	.ws__year:first-child {
		margin-top:								0;
	}

	.ws__rows {
		margin:									0;
		padding:								0;

		list-style:								none;
	}

	.ws__row {
		padding:								10px 0;
		display:								grid;
		grid-template-columns:					64px minmax(0, 1fr) auto;
		gap:									16px;
		align-items:							center;

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

	.ws__row--noimg {
		grid-template-columns:					minmax(0, 1fr) auto;
	}

	.ws__thumb {
		aspect-ratio:							1;

		width:									64px;
		overflow:								hidden;

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

	.ws__thumb img {
		height:									100%;
		width:									100%;

		object-fit:								cover;
	}

	.ws__rowtitle {
		overflow:								hidden;

		font-weight:							600;
		text-overflow:							ellipsis;
		white-space:							nowrap;
	}

	.ws__rowmeta {
		color:									var(--ws-mute);
		font-size:								calc(var(--ws-t-small) + 1px);
	}

	.ws__award {
		padding:								4px 10px;

		border-radius:							999px;
		background:								var(--ws-accent);

		color:									var(--ws-accent-ink);
		font-size:								11px;
		font-weight:							600;
		letter-spacing:							0.06em;
		text-transform:							uppercase;
		white-space:							nowrap;
	}

	.ws__accepted {
		color:									var(--ws-mute);
		font-size:								11px;
		letter-spacing:							0.06em;
		text-transform:							uppercase;
		white-space:							nowrap;
	}

	/* the IAAP record's tables :: the medals and the years, a year a row, the numbers to the right in even figures, the head small and in capitals; wider
	   than a phone, a table scrolls in its own box */
	.ws__tablewrap {
		max-width:								100%;
		overflow-x:								auto;
	}

	.ws__table {
		width:									100%;

		border-collapse:						collapse;

		font-variant-numeric:					tabular-nums;
	}

	.ws__table th,
	.ws__table td {
		padding:								10px 12px;

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

		text-align:								right;
		white-space:							nowrap;
	}

	.ws__table th:first-child {
		text-align:								left;
	}

	.ws__table thead th {
		color:									var(--ws-mute);
		font-size:								var(--ws-t-small);
		font-weight:							600;
		letter-spacing:							0.06em;
		text-transform:							uppercase;
	}

	.ws__table tbody th {
		font-weight:							600;
	}

	.ws__table tfoot th,
	.ws__table tfoot td {
		border-bottom:							0;

		font-weight:							700;
	}

	/* a medal's dot :: gold, silver, bronze, the other awards */

	.ws__mdot {
		height:									9px;
		width:									9px;
		margin:									0 6px 1px 0;
		display:								inline-block;
		vertical-align:							middle;

		border-radius:							50%;
		background:								var(--ws-mute);
	}

	.ws__mdot--l1 {
		background:								rgb(214, 175, 55);
	}

	.ws__mdot--l2 {
		background:								rgb(192, 197, 204);
	}

	.ws__mdot--l3 {
		background:								rgb(190, 122, 74);
	}

	.ws__mdot--l4 {
		background:								rgb(120, 170, 220);
	}

	/* the years :: the key, then a row a year - the year, the bar (the acceptances quiet, the awards in the accent inside them), the counts */

	.ws__years {
		display:								grid;
		gap:									8px;
	}

	.ws__ykey {
		margin:									0 0 4px;
		display:								flex;
		flex-wrap:								wrap;
		gap:									6px 14px;
		align-items:							center;

		color:									var(--ws-mute);
		font-size:								var(--ws-t-small);
	}

	.ws__ykeyacc,
	.ws__ykeywon {
		height:									10px;
		width:									10px;
		display:								inline-block;

		border-radius:							2px;
	}

	.ws__ykeyacc,
	.ws__yacc {
		background:								var(--ws-line);
	}

	.ws__ykeywon,
	.ws__ywon {
		background:								var(--ws-accent);
	}

	.ws__yrow {
		display:								grid;
		grid-template-columns:					3.5em minmax(0, 1fr) 4.5em;
		gap:									12px;
		align-items:							center;

		font-variant-numeric:					tabular-nums;
	}

	.ws__ylbl {
		font-weight:							600;
	}

	.ws__ybar {
		height:									12px;
		display:								block;
	}

	.ws__yacc,
	.ws__ywon {
		height:									100%;
		display:								block;
		overflow:								hidden;

		border-radius:							2px;
	}

	.ws__ynum {
		color:									var(--ws-mute);
		font-size:								var(--ws-t-small);
		text-align:								right;
	}

	/* the countries' chips :: the count after the name, quieter; what a count leaves out, a line under it */

	.ws__badges--flush {
		margin:									0;
	}

	.ws__chipnum {
		color:									var(--ws-mute);
		font-weight:							400;
	}

	.ws__rest {
		margin:									12px 0 0;

		color:									var(--ws-mute);
		font-size:								var(--ws-t-small);
	}

	/* the salons by year :: a column of years, each year's salons under its number */

	.ws__index {
		column-gap:								var(--ws-gap);
		columns:								3 220px;
	}

	.ws__idxyear {
		margin:									0 0 18px;
		break-inside:							avoid;
	}

	.ws__idxhead {
		margin:									0 0 6px;

		font-family:							var(--ws-ff-head);
		font-size:								var(--ws-t-body);
	}

	.ws__idxlist {
		margin:									0;
		padding:								0;
		display:								grid;
		gap:									3px;

		font-size:								var(--ws-t-small);
		list-style:								none;
	}

	/* the titles :: a card each, its code large; the honours, the judge and the ambassador in the accent */

	.ws__titles {
		display:								grid;
		grid-template-columns:					repeat(auto-fit, minmax(170px, 1fr));
		gap:									12px;
	}

	.ws__titlecard {
		padding:								18px;
		display:								grid;
		gap:									4px;

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

	.ws__titlecard--accent {
		border-color:							var(--ws-accent);
	}

	.ws__titlecode {
		font-family:							var(--ws-ff-head);
		font-size:								var(--ws-t-section);
		font-weight:							700;
		line-height:							1.1;
	}

	.ws__titlecard--accent .ws__titlecode {
		color:									var(--ws-accent);
	}

	.ws__titlename {
		color:									var(--ws-mute);
		font-size:								var(--ws-t-small);
	}/*	============================================================ */
/*	#endregion END AWARDS */
/*	============================================================ */


/*	============================================================ */
/*	#region *** JOURNAL */
/*	============================================================ */
	.ws__posts {
		max-width:								860px;
		margin:									0 auto;
		display:								flex;
		flex-direction:							column;
		gap:									var(--ws-space);
	}

	.ws__post {
		padding-bottom:							var(--ws-space);

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

	.ws__postdate {
		margin-bottom:							10px;

		color:									var(--ws-mute);
		font-size:								var(--ws-t-small);
		letter-spacing:							0.1em;
		text-transform:							uppercase;
	}

	.ws__postimgs {
		margin-top:								16px;
		display:								grid;
		grid-template-columns:					repeat(auto-fill, minmax(200px, 1fr));
		gap:									10px;
	}

	.ws__postimgs a {
		overflow:								hidden;

		border-radius:							var(--ws-radius);
	}

	.ws__postimgs img {
		aspect-ratio:							4 / 3;

		width:									100%;

		object-fit:								cover;
	}

	.ws__postimgs a:only-child img {
		aspect-ratio:							auto;
	}
/*	============================================================ */
/*	#endregion END JOURNAL */
/*	============================================================ */


/*	============================================================ */
/*	#region *** CONTACT AND LOCK */
/*	============================================================ */
	.ws__contact {
		display:								grid;
		grid-template-columns:					minmax(0, 1fr) minmax(0, 1fr);
		gap:									48px;
		align-items:							start;
	}

	.ws__links {
		margin:									24px 0 0;
		padding:								0;
		display:								flex;
		flex-wrap:								wrap;
		gap:									8px;

		list-style:								none;
	}

	.ws__link {
		padding:								8px 14px;
		display:								inline-flex;
		gap:									8px;
		align-items:							center;

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

		font-size:								calc(var(--ws-t-small) + 1px);
		font-weight:							600;

		transition:								border-color 0.15s, color 0.15s;
	}

	.ws__link:hover {
		border-color:							var(--ws-accent);

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

	.ws__link svg {
		height:									16px;
		width:									16px;

		fill:									currentColor;
	}

	.ws__form {
		display:								grid;
		gap:									12px;
	}

	.ws__field {
		display:								flex;
		flex-direction:							column;
		gap:									5px;
	}

	.ws__label {
		color:									var(--ws-mute);
		font-size:								var(--ws-t-small);
		font-weight:							600;
		letter-spacing:							0.1em;
		text-transform:							uppercase;
	}

	.ws__inp {
		width:									100%;
		padding:								12px 14px;

		border:									1px solid var(--ws-line);
		border-radius:							var(--ws-radius);
		outline:								none;
		background:								var(--ws-bg);

		color:									var(--ws-ink);
		font-family:							inherit;
		font-size:								var(--ws-t-body);

		transition:								border-color 0.15s;
	}

	.ws__inp:focus {
		border-color:							var(--ws-accent);
	}

	textarea.ws__inp {
		min-height:								150px;
		resize:									vertical;
	}

	.ws__hp {
		position:								absolute;
		left:									-9999px;
	}

	.ws__note {
		min-height:								22px;

		color:									var(--ws-soft);
		font-size:								calc(var(--ws-t-small) + 1px);
	}

	.ws__note--error {
		color:									rgb(200, 60, 40);
	}

	/* a locked gallery :: the password asked in a small card in the middle of the page */
	.ws__lock {
		max-width:								420px;
		margin:									var(--ws-space) auto;
		padding:								32px;

		border:									1px solid var(--ws-line);
		border-radius:							var(--ws-radius);
		background:								var(--ws-card);

		text-align:								center;
	}

	.ws__lock .ws__form {
		margin-top:								18px;

		text-align:								left;
	}
/*	============================================================ */
/*	#endregion END CONTACT AND LOCK */
/*	============================================================ */


/*	============================================================ */
/*	#region *** FOOT */
/*	============================================================ */
	.ws__foot {
		margin-top:								40px;

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

	.ws__footrow {
		padding:								24px var(--ws-gap);
		display:								flex;
		flex-wrap:								wrap;
		gap:									12px 24px;
		align-items:							center;
		justify-content:						space-between;

		color:									var(--ws-mute);
		font-size:								var(--ws-t-small);
	}

	.ws__iaap {
		display:								inline-flex;
		gap:									8px;
		align-items:							center;

		color:									var(--ws-soft);
		font-size:								11px;
		font-weight:							600;
		letter-spacing:							0.08em;
		text-transform:							uppercase;
	}

	.ws__iaapmark {
		height:									22px;
		width:									22px;
		display:								inline-flex;
		align-items:							center;
		justify-content:						center;

		border-radius:							50%;
		background:								var(--ws-ink);

		color:									var(--ws-bg);
		font-size:								9px;
		font-weight:							700;
		letter-spacing:							0;
	}
/*	============================================================ */
/*	#endregion END FOOT */
/*	============================================================ */


/*	============================================================ */
/*	#region *** TONES */
/*	============================================================ */
	/* a band :: a section in one of the palette's four tones runs from edge to edge; the head of the page writes each tone's colours (wsToneStyle) */
	.ws__band,
	.ws__head[class*="ws__tone--"],
	.ws__foot[class*="ws__tone--"],
	.ws__hero[class*="ws__tone--"] {
		background:								var(--ws-bg);

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

	.ws__foot[class*="ws__tone--"] {
		border-top-color:						transparent;
	}
/*	============================================================ */
/*	#endregion END TONES */
/*	============================================================ */


/*	============================================================ */
/*	#region *** SECTION STYLES */
/*	============================================================ */
	/* the space above and under a section :: a step of the site's own space (--ws-space), on a phone as much smaller as the site's own */
	.ws__section.ws__padt--s {
		padding-top:							calc(var(--ws-space) * 0.35 * var(--ws-pk, 1));
	}

	.ws__section.ws__padt--m {
		padding-top:							calc(var(--ws-space) * var(--ws-pk, 1));
	}

	.ws__section.ws__padt--l {
		padding-top:							calc(var(--ws-space) * 1.6 * var(--ws-pk, 1));
	}

	.ws__section.ws__padt--xl {
		padding-top:							calc(var(--ws-space) * 2.4 * var(--ws-pk, 1));
	}

	.ws__section.ws__padb--s {
		padding-bottom:							calc(var(--ws-space) * 0.35 * var(--ws-pk, 1));
	}

	.ws__section.ws__padb--m {
		padding-bottom:							calc(var(--ws-space) * var(--ws-pk, 1));
	}

	.ws__section.ws__padb--l {
		padding-bottom:							calc(var(--ws-space) * 1.6 * var(--ws-pk, 1));
	}

	.ws__section.ws__padb--xl {
		padding-bottom:							calc(var(--ws-space) * 2.4 * var(--ws-pk, 1));
	}

	/* a divider's space is its margin :: a line's padding would take its colour */
	.ws__divider.ws__padt--s {
		margin-top:								calc(var(--ws-space) * 0.35 * var(--ws-pk, 1));
	}

	.ws__divider.ws__padt--m {
		margin-top:								calc(var(--ws-space) * var(--ws-pk, 1));
	}

	.ws__divider.ws__padt--l {
		margin-top:								calc(var(--ws-space) * 1.6 * var(--ws-pk, 1));
	}

	.ws__divider.ws__padt--xl {
		margin-top:								calc(var(--ws-space) * 2.4 * var(--ws-pk, 1));
	}

	.ws__divider.ws__padb--s {
		margin-bottom:							calc(var(--ws-space) * 0.35 * var(--ws-pk, 1));
	}

	.ws__divider.ws__padb--m {
		margin-bottom:							calc(var(--ws-space) * var(--ws-pk, 1));
	}

	.ws__divider.ws__padb--l {
		margin-bottom:							calc(var(--ws-space) * 1.6 * var(--ws-pk, 1));
	}

	.ws__divider.ws__padb--xl {
		margin-bottom:							calc(var(--ws-space) * 2.4 * var(--ws-pk, 1));
	}

	/* a section's width :: the measure of a text, wider than the page, or the whole window */
	.ws__wrap.ws__wrap--text {
		max-width:								820px;
	}

	.ws__wrap.ws__wrap--wide {
		max-width:								calc(var(--ws-max) + 240px);
	}

	.ws__wrap.ws__wrap--full {
		max-width:								none;
	}

	/* a photograph behind a section :: over the band's ground, under a dark veil (--ws-shade), the words in the dark tone above it */
	.ws__band--photo {
		background-image:						linear-gradient(rgba(0, 0, 0, var(--ws-shade, 0.4)), rgba(0, 0, 0, var(--ws-shade, 0.4))), var(--ws-bgimg);
		background-position:					center;
		background-size:						cover;
	}

	/* a still photograph behind (ws__band--still) :: it stays in place while the page scrolls over it, on a desk only - a phone and a visitor who asked for
	   less motion see it plainly */
	@media all and (min-width: 761px) and (prefers-reduced-motion: no-preference) {
		.ws__band--photo.ws__band--still {
			background-attachment:				fixed;
		}
	}

	/* the marks of a text :: a subheading, points, bold, a link */
	.ws__text h3 {
		margin:									1.4em 0 0.5em;

		color:									var(--ws-ink);
		font-family:							var(--ws-ff-head);
		font-size:								calc(var(--ws-t-section) * 0.85);
		font-weight:							600;
		line-height:							1.25;
	}

	.ws__text h3:first-child {
		margin-top:								0;
	}

	.ws__text ul {
		margin:									0 0 1em;
		padding-left:							1.3em;
	}

	.ws__text li {
		margin:									0 0 0.35em;
	}

	/* centred words :: the points centred with them, their dots beside them */
	.ws__words--centred .ws__text ul {
		padding-left:							0;

		list-style-position:					inside;
	}

	.ws__text strong {
		color:									var(--ws-ink);
		font-weight:							600;
	}

	.ws__text a {
		color:									var(--ws-accent);
		text-decoration:						underline;
		text-underline-offset:					3px;
	}

	/* a section's phone values :: its own space above and under on a phone (ws__padtp-- / ws__padbp--, "site" back to the site's own), and a section in its
	   phone layout - the desktop's drawing and the phone's each in a block of its own (data-pcopy), one shown at each width, in the canvas as on the site */
	@media all and (max-width: 760px) {
		.ws__section.ws__padtp--site {
			padding-top:						var(--ws-space);
		}

		.ws__section.ws__padtp--s {
			padding-top:						calc(var(--ws-space) * 0.35 * var(--ws-pk, 1));
		}

		.ws__section.ws__padtp--m {
			padding-top:						calc(var(--ws-space) * var(--ws-pk, 1));
		}

		.ws__section.ws__padtp--l {
			padding-top:						calc(var(--ws-space) * 1.6 * var(--ws-pk, 1));
		}

		.ws__section.ws__padtp--xl {
			padding-top:						calc(var(--ws-space) * 2.4 * var(--ws-pk, 1));
		}

		.ws__section.ws__padbp--site {
			padding-bottom:						var(--ws-space);
		}

		.ws__section.ws__padbp--s {
			padding-bottom:						calc(var(--ws-space) * 0.35 * var(--ws-pk, 1));
		}

		.ws__section.ws__padbp--m {
			padding-bottom:						calc(var(--ws-space) * var(--ws-pk, 1));
		}

		.ws__section.ws__padbp--l {
			padding-bottom:						calc(var(--ws-space) * 1.6 * var(--ws-pk, 1));
		}

		.ws__section.ws__padbp--xl {
			padding-bottom:						calc(var(--ws-space) * 2.4 * var(--ws-pk, 1));
		}

		.ws__divider.ws__padtp--site {
			margin-top:							0;
		}

		.ws__divider.ws__padtp--s {
			margin-top:							calc(var(--ws-space) * 0.35 * var(--ws-pk, 1));
		}

		.ws__divider.ws__padtp--m {
			margin-top:							calc(var(--ws-space) * var(--ws-pk, 1));
		}

		.ws__divider.ws__padtp--l {
			margin-top:							calc(var(--ws-space) * 1.6 * var(--ws-pk, 1));
		}

		.ws__divider.ws__padtp--xl {
			margin-top:							calc(var(--ws-space) * 2.4 * var(--ws-pk, 1));
		}

		.ws__divider.ws__padbp--site {
			margin-bottom:						0;
		}

		.ws__divider.ws__padbp--s {
			margin-bottom:						calc(var(--ws-space) * 0.35 * var(--ws-pk, 1));
		}

		.ws__divider.ws__padbp--m {
			margin-bottom:						calc(var(--ws-space) * var(--ws-pk, 1));
		}

		.ws__divider.ws__padbp--l {
			margin-bottom:						calc(var(--ws-space) * 1.6 * var(--ws-pk, 1));
		}

		.ws__divider.ws__padbp--xl {
			margin-bottom:						calc(var(--ws-space) * 2.4 * var(--ws-pk, 1));
		}

		.ws__main [data-pcopy="desk"] {
			display:							none;
		}
	}

	@media all and (min-width: 761px) {
		.ws__main [data-pcopy="phone"] {
			display:							none;
		}
	}

	/* a section's cards one at a time on a phone (data-pcar) :: the cards in a row that snaps, the next one showing at the edge, whatever the desktop's
	   layout lays out (the selected work takes the gallery's own phone carousel) */
	@media all and (max-width: 760px) {
		html .ws__main .ws__section[data-pcar] :is(.ws__tiles, .ws__titles, .ws__pkgs, .ws__offers, .ws__voices, .ws__shop, .ws__posts) {
			padding-bottom:						8px;
			display:							flex;
			gap:								12px;
			grid-template-columns:				none;
			overflow-x:							auto;
			scroll-snap-type:					x mandatory;

			columns:							auto;
			scrollbar-width:					none;
		}

		html .ws__main .ws__section[data-pcar] :is(.ws__tiles, .ws__titles, .ws__pkgs, .ws__offers, .ws__voices, .ws__shop, .ws__posts)::-webkit-scrollbar {
			display:							none;
		}

		html .ws__main .ws__section[data-pcar] :is(.ws__tiles, .ws__titles, .ws__pkgs, .ws__offers, .ws__voices, .ws__shop, .ws__posts) > * {
			min-width:							0;
			width:								82%;
			max-width:							none;
			margin:								0;
			flex:								0 0 82%;
			scroll-snap-align:					start;
		}
	}

	/* where a section shows :: every screen, only a desk, only a phone - the canvas draws them all (canvas.css marks the ones this width hides) */
	@media all and (max-width: 760px) {
		.ws__section,
		.ws__divider {
			--ws-pk:							0.7;
		}

		html:not([data-builder]) .ws__main [data-show="desk"] {
			display:							none;
		}
	}

	@media all and (min-width: 761px) {
		html:not([data-builder]) .ws__main [data-show="phone"] {
			display:							none;
		}
	}
/*	============================================================ */
/*	#endregion END SECTION STYLES */
/*	============================================================ */


/*	============================================================ */
/*	#region *** WORDS AND PHOTOGRAPHS */
/*	============================================================ */
	/* words :: a heading and the text; centred, or in two columns */
	.ws__words .ws__sectitle {
		margin:									0 0 16px;
	}

	.ws__words--centred {
		max-width:								760px;
		margin:									0 auto;

		text-align:								center;
	}

	.ws__words--centred .ws__text {
		margin:									0 auto;
	}

	.ws__words--columns .ws__text {
		max-width:								none;
		columns:								2;
		column-gap:								48px;
	}

	/* a photograph with words :: beside it, above it, or over it */
	.ws__pt {
		display:								grid;
		grid-template-columns:					minmax(0, 1fr) minmax(0, 1fr);
		gap:									48px;
		align-items:							center;
	}

	.ws__pt--right .ws__ptimg {
		order:									2;
	}

	.ws__pt--above {
		grid-template-columns:					minmax(0, 1fr);
		gap:									28px;
	}

	.ws__ptimg {
		overflow:								hidden;

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

	.ws__ptimg img {
		max-height:								min(80vh, 760px);
		width:									100%;
		display:								block;

		object-fit:								cover;
	}

	.ws__pttext .ws__sectitle {
		margin:									0 0 16px;
	}

	.ws__pt--over {
		min-height:								min(70vh, 640px);
		position:								relative;
		display:								flex;
		align-items:							flex-end;
		overflow:								hidden;

		border-radius:							var(--ws-radius);
	}

	.ws__pt--over .ws__ptimg {
		position:								absolute;
		inset:									0;

		border-radius:							0;
	}

	.ws__pt--over .ws__ptimg img {
		max-height:								none;
		height:									100%;

		object-fit:								cover;
	}

	.ws__pt--over .ws__ptimg::after {
		position:								absolute;
		inset:									0;
		content:								"";

		background:								linear-gradient(to top, var(--ws-overlay), transparent 70%);
	}

	.ws__pt--over .ws__pttext {
		max-width:								720px;
		padding:								40px;
		position:								relative;

		color:									#ffffff;
	}

	.ws__pt--over .ws__text {
		color:									rgba(255, 255, 255, 0.86);
	}

	/* one photograph :: edge to edge, framed in the page's ground, or with its caption */
	.ws__photo {
		margin:									0;
	}

	/* a tall photograph never runs past the screen :: edge to edge it is cut to the band, framed or captioned it keeps its whole shape */
	.ws__photo img {
		max-height:								min(85vh, 1000px);
		max-width:								100%;
		width:									auto;
		margin:									0 auto;
		display:								block;

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

	.ws__photo--bleed img {
		max-height:								min(92vh, 960px);
		width:									100%;

		object-fit:								cover;
	}

	.ws__section[data-type="photo"][data-layout="bleed"] {
		padding:								0;
	}

	.ws__photo--framed {
		max-width:								100%;
		width:									fit-content;
		margin:									0 auto;
		padding:								18px;

		border:									1px solid var(--ws-line);
		background:								var(--ws-card);
	}

	.ws__photo--caption img {
		border-radius:							var(--ws-radius);
	}

	.ws__photocap {
		margin-top:								12px;

		text-align:								center;

		color:									var(--ws-mute);
		font-size:								var(--ws-t-small);
		letter-spacing:							0.04em;
	}

	/* a list :: points, or numbered steps */
	.ws__list {
		max-width:								760px;
		margin:									0;
		padding:								0 0 0 1.2em;

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

	.ws__list li + li {
		margin-top:								10px;
	}

	.ws__list--steps {
		padding:								0;

		list-style:								none;
		counter-reset:							step;
	}

	.ws__list--steps li {
		padding:								4px 0 4px 52px;
		position:								relative;

		counter-increment:						step;
	}

	.ws__list--steps li::before {
		height:									34px;
		width:									34px;
		position:								absolute;
		top:									0;
		left:									0;
		display:								grid;
		place-items:							center;
		content:								counter(step);

		border:									1px solid var(--ws-accent);
		border-radius:							50%;

		color:									var(--ws-accent);
		font-size:								var(--ws-t-small);
		font-weight:							600;
	}

	/* the typed services and people :: an offer, a step, a question, a voice is a paragraph and its lines block spans (the canvas reads the words back so);
	   a line typed on the canvas stays a line until the room draws it again */
	.ws__offers,
	.ws__steps,
	.ws__faq,
	.ws__voices {
		display:								grid;
		gap:									14px;

		white-space:							pre-line;
	}

	.ws__offer,
	.ws__step,
	.ws__qa,
	.ws__voice {
		margin:									0;
	}

	.ws__offer > span,
	.ws__step > span,
	.ws__qa > span,
	.ws__voice > span {
		display:								block;
	}

	/* prices :: rows, the name and the price on one line with a rule under; cards, an offer a card with its points */
	.ws__offername {
		font-weight:							600;
	}

	.ws__offerprice {
		color:									var(--ws-accent);
		font-weight:							600;
		font-variant-numeric:					tabular-nums;
	}

	.ws__offerline {
		color:									var(--ws-soft);
	}

	.ws__offers--rows {
		max-width:								860px;
		gap:									0;
	}

	.ws__offers--rows .ws__offer {
		padding:								14px 0;
		display:								grid;
		grid-template-columns:					minmax(0, 1fr) auto;
		column-gap:								16px;

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

	.ws__offers--rows .ws__offerprice {
		text-align:								right;
	}

	.ws__offers--rows .ws__offerline {
		margin-top:								4px;
		grid-column:							1 / -1;
	}

	.ws__offers--cards {
		grid-template-columns:					repeat(auto-fit, minmax(220px, 1fr));
		gap:									18px;
	}

	.ws__offers--cards .ws__offer {
		padding:								22px;

		border:									1px solid var(--ws-line);
		border-radius:							var(--ws-radius);
		background:								var(--ws-card);
	}

	.ws__offers--cards .ws__offername {
		font-family:							var(--ws-ff-head);
		font-size:								var(--ws-t-section);
		font-weight:							400;
	}

	.ws__offers--cards .ws__offerprice {
		margin:									6px 0 14px;

		font-size:								calc(var(--ws-t-body) + 3px);
	}

	.ws__offers--cards .ws__offerline {
		padding:								7px 0 7px 18px;
		position:								relative;

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

	.ws__offers--cards .ws__offerline::before {
		height:									6px;
		width:									6px;
		position:								absolute;
		top:									15px;
		left:									2px;
		content:								"";

		border-radius:							50%;
		background:								var(--ws-accent);
	}

	/* steps :: numbered side by side, or down a line */
	.ws__steps {
		counter-reset:							wsstep;
	}

	.ws__step {
		position:								relative;

		counter-increment:						wsstep;
	}

	.ws__stepname {
		font-weight:							600;
	}

	.ws__steptext {
		margin-top:								4px;

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

	.ws__steps--steps {
		grid-template-columns:					repeat(auto-fit, minmax(200px, 1fr));
		gap:									28px;
	}

	.ws__steps--steps .ws__step::before {
		margin-bottom:							10px;
		display:								block;
		content:								counter(wsstep, decimal-leading-zero);

		color:									var(--ws-accent);
		font-family:							var(--ws-ff-head);
		font-size:								var(--ws-t-section);
	}

	.ws__steps--timeline {
		max-width:								760px;
		gap:									0;
	}

	.ws__steps--timeline .ws__step {
		margin-left:							13px;
		padding:								0 0 26px 30px;

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

	.ws__steps--timeline .ws__step:last-child {
		border-left-color:						transparent;
	}

	.ws__steps--timeline .ws__step::before {
		height:									26px;
		width:									26px;
		position:								absolute;
		top:									-3px;
		left:									-14px;
		display:								grid;
		place-items:							center;
		content:								counter(wsstep);

		border:									1px solid var(--ws-accent);
		border-radius:							50%;
		background:								var(--ws-bg);

		color:									var(--ws-accent);
		font-size:								var(--ws-t-small);
		font-weight:							600;
	}

	/* questions and answers :: open, each question over its answer; folded, the answer behind its question (details, no script) */
	.ws__faq {
		max-width:								760px;
		gap:									0;
	}

	.ws__qa {
		padding:								16px 0;

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

	.ws__q {
		font-weight:							600;
	}

	.ws__a {
		margin-top:								6px;

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

	.ws__faq--folded summary {
		display:								flex;
		justify-content:						space-between;
		gap:									16px;
		cursor:									pointer;

		list-style:								none;
	}

	.ws__faq--folded summary::-webkit-details-marker {
		display:								none;
	}

	.ws__faq--folded summary::after {
		flex-shrink:							0;
		content:								"+";

		color:									var(--ws-accent);
		font-size:								var(--ws-t-section);
		line-height:							1;
	}

	.ws__faq--folded details[open] summary::after {
		content:								"\2212";
	}

	.ws__faq--folded .ws__a {
		margin-top:								10px;
	}

	/* testimonials :: large, a voice after another in the heading's face; grid, a voice a card */
	.ws__voicetext {
		line-height:							1.55;
	}

	.ws__voiceby {
		margin-top:								14px;

		color:									var(--ws-mute);
		font-size:								var(--ws-t-small);
		letter-spacing:							0.1em;
		text-transform:							uppercase;
	}

	.ws__voices--large {
		max-width:								860px;
		margin:									0 auto;
		gap:									44px;

		text-align:								center;
	}

	.ws__voices--large .ws__voicetext {
		font-family:							var(--ws-ff-head);
		font-size:								calc(var(--ws-t-section) + 4px);
		line-height:							1.4;
	}

	.ws__voices--grid {
		grid-template-columns:					repeat(auto-fit, minmax(240px, 1fr));
		gap:									18px;
	}

	.ws__voices--grid .ws__voice {
		padding:								22px;

		border:									1px solid var(--ws-line);
		border-radius:							var(--ws-radius);
		background:								var(--ws-card);
	}

	/* a CV :: the year to the left of its line, or a line down the side with the year over the words; a line with no year under the one before (the year
	   an inline block, so the canvas reads the line back whole) */
	.ws__cv {
		max-width:								760px;
		margin:									0;
		padding:								0;

		list-style:								none;
		white-space:							pre-line;
	}

	/* the year's own box keeps no indent (the row's hanging indent is inherited) */
	.ws__cvyear {
		min-width:								6.2em;
		margin-right:							6px;
		display:								inline-block;

		text-indent:							0;
		color:									var(--ws-accent);
		font-weight:							600;
		font-variant-numeric:					tabular-nums;
	}

	.ws__cvtext {
		color:									var(--ws-soft);
	}

	.ws__cv--byyear .ws__cvrow {
		padding:								8px 0 8px calc(6.2em + 10px);

		text-indent:							calc(-6.2em - 10px);
	}

	.ws__cv--byyear .ws__cvrow + .ws__cvrow:not(.ws__cvrow--more) {
		border-top:								1px solid var(--ws-line);
	}

	.ws__cv--byyear .ws__cvrow--more {
		padding-top:							0;

		text-indent:							0;
	}

	.ws__cv--timeline .ws__cvrow {
		margin-left:							5px;
		padding:								0 0 18px 24px;
		position:								relative;

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

	.ws__cv--timeline .ws__cvrow:last-child {
		border-left-color:						transparent;
	}

	.ws__cv--timeline .ws__cvrow::before {
		height:									9px;
		width:									9px;
		position:								absolute;
		top:									6px;
		left:									-5px;
		content:								"";

		border-radius:							50%;
		background:								var(--ws-accent);
	}

	.ws__cv--timeline .ws__cvrow--more::before {
		background:								var(--ws-line);
	}

	.ws__cv--timeline .ws__cvyear {
		width:									100%;
		margin:									0 0 2px;
	}

	/* a photo essay :: a photograph and its paragraph a row; a paragraph's lines block spans (the canvas reads the words back so), pre-line so a line typed
	   on the canvas stays a line */
	.ws__essay {
		display:								grid;
		gap:									44px;

		white-space:							pre-line;
	}

	.ws__essayrow {
		display:								grid;
		gap:									16px;
	}

	.ws__essayimg {
		margin:									0;
	}

	.ws__essayimg img {
		height:									auto;
		width:									100%;
		display:								block;

		border-radius:							var(--ws-radius);
	}

	.ws__essaytext {
		margin:									0;

		color:									var(--ws-soft);
		line-height:							1.7;
	}

	.ws__essaytext > span {
		display:								block;
	}

	/* in the canvas a photograph without words has a place to type them */
	html[data-builder] .ws__essaytext:empty {
		min-height:								1.7em;
	}

	.ws__essay--column {
		max-width:								860px;
		margin:									0 auto;
	}

	.ws__essay--column .ws__essaytext {
		max-width:								680px;
	}

	.ws__essay--margin .ws__essayrow {
		grid-template-columns:					minmax(0, 2fr) minmax(0, 1fr);
		gap:									28px;
		align-items:							start;
	}

	.ws__essay--margin .ws__essaytext {
		padding-top:							10px;

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

		font-size:								calc(var(--ws-t-body) - 1px);
	}

	.ws__essay--bleed {
		gap:									56px;
	}

	.ws__essay--bleed .ws__essayimg img {
		max-height:								min(92vh, 960px);

		border-radius:							0;

		object-fit:								cover;
	}

	.ws__essay--bleed .ws__essaytext {
		width:									min(680px, calc(100% - 40px));
		margin:									0 auto;

		text-align:								center;
	}

	/* before and after :: one over the other with the line at --ba (site.js moves it with the range), or side by side; the labels over the photographs */
	.ws__ba {
		margin:									0;
	}

	.ws__bastage {
		position:								relative;
		overflow:								hidden;

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

		user-select:							none;
	}

	.ws__baafter {
		height:									auto;
		width:									100%;
		display:								block;
	}

	.ws__babefore {
		height:									100%;
		width:									100%;
		position:								absolute;
		inset:									0;

		clip-path:								inset(0 calc(100% - var(--ba)) 0 0);
		object-fit:								cover;
	}

	.ws__baline {
		width:									2px;
		margin-left:							-1px;
		position:								absolute;
		top:									0;
		bottom:									0;
		left:									var(--ba);
		pointer-events:							none;

		background:								var(--ws-bg);
		box-shadow:								0 0 0 1px var(--ws-line);
	}

	.ws__baline::after {
		height:									34px;
		width:									34px;
		margin:									-17px 0 0 -17px;
		position:								absolute;
		top:									50%;
		left:									50%;
		content:								"";

		border:									2px solid var(--ws-accent);
		border-radius:							50%;
		background:								var(--ws-bg);
	}

	.ws__barange {
		height:									100%;
		width:									100%;
		margin:									0;
		position:								absolute;
		inset:									0;
		cursor:									ew-resize;
		touch-action:							pan-y;

		opacity:								0;
	}

	/* the canvas :: a press picks the section, the line stays where it is */
	html[data-builder] .ws__barange {
		pointer-events:							none;
	}

	.ws__balabel {
		padding:								4px 8px;
		position:								absolute;
		top:									12px;
		left:									12px;
		pointer-events:							none;

		border-radius:							var(--ws-radius);
		background:								var(--ws-bg);

		color:									var(--ws-ink);
		font-size:								var(--ws-t-small);
		letter-spacing:							0.06em;
		text-transform:							uppercase;
	}

	.ws__balabel--after {
		right:									12px;
		left:									auto;
	}

	.ws__baside {
		display:								grid;
		grid-template-columns:					minmax(0, 1fr) minmax(0, 1fr);
		gap:									12px;
	}

	.ws__bahalf {
		position:								relative;
	}

	.ws__baimg {
		height:									auto;
		width:									100%;
		display:								block;

		border-radius:							var(--ws-radius);
	}

	/* a photograph not picked yet :: its place in the canvas */
	.ws__baempty {
		aspect-ratio:							3 / 2;
		display:								block;

		border:									1px dashed var(--ws-line);
		background:								var(--ws-card);
	}

	.ws__bacap {
		margin-top:								12px;

		text-align:								center;
		color:									var(--ws-mute);
		font-size:								var(--ws-t-small);
	}

	/* packages :: cards with the price large and a tick a line (the tick drawn, so the canvas reads the words back as typed), or one table with a column a
	   package (the IAAP record's .ws__table) */
	.ws__pkgs {
		display:								grid;
		grid-template-columns:					repeat(auto-fit, minmax(220px, 1fr));
		gap:									18px;

		white-space:							pre-line;
	}

	.ws__pkg {
		margin:									0;
		padding:								24px;

		border:									1px solid var(--ws-line);
		border-radius:							var(--ws-radius);
		background:								var(--ws-card);
	}

	.ws__pkg > span {
		display:								block;
	}

	.ws__pkgname {
		font-family:							var(--ws-ff-head);
		font-size:								var(--ws-t-section);
	}

	.ws__pkgprice {
		margin:									6px 0 16px;

		color:									var(--ws-accent);
		font-size:								calc(var(--ws-t-section) + 4px);
		font-weight:							600;
		font-variant-numeric:					tabular-nums;
	}

	.ws__pkgline {
		padding:								7px 0 7px 24px;
		position:								relative;

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

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

	.ws__pkgline::before {
		position:								absolute;
		top:									7px;
		left:									2px;
		content:								"\2713";

		color:									var(--ws-accent);
		font-weight:							700;
	}

	/* the shop :: a card a product (its photograph over its name, price, words, options and the Request button) or a row a product (a small photograph,
	   the words in the middle, the price and the button at the right); the request form under the products */
	.ws__shop {
		display:								grid;
		grid-template-columns:					repeat(auto-fill, minmax(240px, 1fr));
		gap:									18px;
	}

	.ws__product {
		min-width:								0;
		display:								flex;
		flex-direction:							column;
		overflow:								hidden;

		border:									1px solid var(--ws-line);
		border-radius:							var(--ws-radius);
		background:								var(--ws-card);
	}

	.ws__prodimg {
		aspect-ratio:							4 / 3;
		background:								var(--ws-line);
	}

	.ws__prodimg img {
		width:									100%;
		height:									100%;
		display:								block;
		object-fit:								cover;
	}

	.ws__prodbody {
		padding:								18px 20px 20px;
		display:								flex;
		flex:									1;
		flex-direction:							column;
		gap:									8px;
	}

	.ws__prodname {
		margin:									0;

		font-family:							var(--ws-ff-head);
		font-size:								var(--ws-t-section);
		font-weight:							400;
	}

	.ws__prodprice {
		margin:									0;

		color:									var(--ws-accent);
		font-weight:							600;
		font-variant-numeric:					tabular-nums;
	}

	.ws__prodtext {
		margin:									0;

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

	.ws__prodopts {
		margin:									0;
		padding:								0;
		display:								flex;
		flex-wrap:								wrap;
		gap:									6px;

		list-style:								none;
	}

	.ws__prodopts li {
		padding:								3px 9px;

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

		color:									var(--ws-soft);
		font-size:								var(--ws-t-small);
	}

	.ws__prodask {
		margin-top:								auto;
		align-self:								flex-start;
	}

	.ws__shop--list {
		grid-template-columns:					1fr;
		gap:									0;
	}

	.ws__shop--list .ws__product {
		padding:								14px 0;
		flex-direction:							row;
		align-items:							flex-start;
		gap:									18px;

		border-width:							0 0 1px;
		border-radius:							0;
		background:								transparent;
	}

	.ws__shop--list .ws__prodimg {
		width:									112px;
		flex-shrink:							0;
	}

	.ws__shop--list .ws__prodbody {
		padding:								0;
		display:								grid;
		grid-template-columns:					minmax(0, 1fr) auto;
		align-items:							start;
		column-gap:								18px;
	}

	.ws__shop--list .ws__prodbody > * {
		grid-column:							1;
	}

	.ws__shop--list .ws__prodprice {
		grid-column:							2;
		grid-row:								1;
		text-align:								right;
	}

	.ws__shop--list .ws__prodask {
		margin-top:								0;
		grid-column:							2;
		grid-row:								2 / span 3;
		justify-self:							end;
	}

	.ws__shopempty {
		color:									var(--ws-mute);
	}

	.ws__shopform {
		margin-top:								28px;
	}

	.ws__shopintro {
		margin:									0 0 8px;

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

	.ws__qty {
		max-width:								120px;
	}

	/* the option field of a product without options :: .ws__field's own display would show it through the hidden attribute */
	.ws__optfield[hidden] {
		display:								none;
	}

	@media (max-width: 600px) {
		.ws__shop--list .ws__prodimg {
			width:								72px;
		}

		.ws__shop--list .ws__prodbody {
			grid-template-columns:				minmax(0, 1fr);
		}

		.ws__shop--list .ws__prodprice,
		.ws__shop--list .ws__prodask {
			grid-column:						1;
			grid-row:							auto;
			justify-self:						start;
			text-align:							left;
		}
	}

	/* a client gallery :: the site's name over the project's, the door (the PIN), the pills with their counts, a set a grid of photographs with a heart and
	   a comment on each, the lists' menu and the comment's panel */
	.ws__client {
		padding-block:							calc(var(--ws-space) * 1.5) calc(var(--ws-space) * 2);
	}

	.ws__chead {
		margin-bottom:							24px;
	}

	.ws__ctitle {
		margin:									0;

		font-family:							var(--ws-ff-head);
		font-size:								var(--ws-t-title);
		font-weight:							400;
	}

	.ws__cnote {
		margin:									0 0 16px;

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

	.ws__cnote--closed {
		padding:								10px 14px;

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

	.ws__cpin {
		max-width:								360px;
	}

	.ws__pininp {
		letter-spacing:							0.3em;
		font-variant-numeric:					tabular-nums;
	}

	.ws__cbar {
		margin-bottom:							20px;
		display:								grid;
		gap:									8px;
	}

	.ws__cpills {
		display:								flex;
		flex-wrap:								wrap;
		gap:									8px;
	}

	.ws__cpill {
		padding:								6px 14px;

		border:									1px solid var(--ws-line);
		border-radius:							999px;
		background:								transparent;

		color:									var(--ws-ink);
		font:									inherit;
		font-size:								var(--ws-t-small);
		cursor:									pointer;
	}

	.ws__cpill.is-on {
		border-color:							var(--ws-accent);
		background:								var(--ws-accent);

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

	.ws__cct {
		margin-left:							4px;
		opacity:								0.7;
		font-variant-numeric:					tabular-nums;
	}

	.ws__chint {
		margin:									0;

		color:									var(--ws-mute);
		font-size:								var(--ws-t-small);
	}

	.ws__cset {
		margin-bottom:							calc(var(--ws-space) * 0.75);
	}

	.ws__cgrid {
		display:								grid;
		grid-template-columns:					repeat(auto-fill, minmax(200px, 1fr));
		gap:									var(--ws-gap);
	}

	.ws__cph {
		margin:									0;
		position:								relative;
	}

	/* a cell :: the photograph whole inside its square, as a grid of a shoot shows it - the order reads row by row, nothing is cropped */
	.ws__cph .ws__item {
		margin:									0;
		aspect-ratio:							1;
		display:								block;
	}

	.ws__cph img {
		width:									100%;
		height:									100%;
		display:								block;
		object-fit:								contain;
	}

	/* the heart and the comment :: round buttons in the cell's lower corners, filled once the photograph is in a list or has a comment */
	.ws__heart,
	.ws__cnotebtn {
		width:									36px;
		height:									36px;
		padding:								8px;
		position:								absolute;
		bottom:									6px;

		border:									0;
		border-radius:							50%;
		background:								var(--ws-overlay);

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

	.ws__heart {
		right:									6px;
	}

	.ws__cnotebtn {
		left:									6px;
	}

	.ws__heart svg,
	.ws__cnotebtn svg {
		width:									100%;
		height:									100%;
		display:								block;
		fill:									none;
		stroke:									currentColor;
		stroke-width:							2;
		stroke-linejoin:						round;
	}

	.ws__cph.is-picked .ws__heart svg,
	.ws__cnotebtn.has-note svg {
		fill:									currentColor;
	}

	.ws__cph.is-picked .ws__heart,
	.ws__cnotebtn.has-note {
		background:								var(--ws-accent);
		color:									var(--ws-accent-ink);
	}

	.ws__heart:disabled,
	.ws__cnotebtn:disabled {
		cursor:									default;
	}

	/* the lists' menu :: over the cell, above its heart, a row a list with its count; a checked row is the photograph in that list */
	.ws__clists {
		max-width:								calc(100% - 12px);
		min-width:								min(200px, calc(100% - 12px));
		padding:								6px 0;
		position:								absolute;
		right:									6px;
		bottom:									48px;
		z-index:								3;
		display:								grid;

		border:									1px solid var(--ws-line);
		border-radius:							var(--ws-radius);
		background:								var(--ws-bg);
		box-shadow:								var(--ws-shadow);
	}

	.ws__clists[hidden] {
		display:								none;
	}

	.ws__clist {
		padding:								8px 12px;
		display:								flex;
		justify-content:						space-between;
		gap:									12px;

		border:									0;
		background:								transparent;

		color:									var(--ws-ink);
		font:									inherit;
		font-size:								var(--ws-t-small);
		text-align:								left;
		cursor:									pointer;
	}

	.ws__clist[aria-checked="true"] {
		color:									var(--ws-accent);
		font-weight:							600;
	}

	.ws__clist[aria-checked="true"] .ws__clistname::before {
		content:								"\2713\00a0";
	}

	.ws__clistfull {
		margin:									0;
		padding:								4px 12px 6px;

		color:									var(--ws-mute);
		font-size:								var(--ws-t-small);
	}

	/* the comment's panel :: over the page, the photograph above its text box; on a phone it takes the screen's width */
	.ws__cpanel {
		padding:								16px;
		position:								fixed;
		inset:									0;
		z-index:								1000;
		display:								grid;
		place-items:							center;

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

	.ws__cpanel[hidden] {
		display:								none;
	}

	.ws__cpanelbox {
		width:									min(480px, 100%);
		max-height:								calc(100vh - 32px);
		padding:								20px;
		display:								grid;
		gap:									12px;
		overflow:								auto;

		border-radius:							var(--ws-radius);
		background:								var(--ws-bg);
		box-shadow:								var(--ws-shadow);

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

	.ws__cpanelimg {
		width:									100%;
		max-height:								40vh;
		display:								block;
		object-fit:								contain;

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

	.ws__cpanelbtns {
		display:								flex;
		flex-wrap:								wrap;
		gap:									8px;
	}

	@media (max-width: 600px) {
		.ws__cgrid {
			grid-template-columns:				repeat(2, minmax(0, 1fr));
		}
	}

	.ws__compare th .ws__pkgname,
	.ws__compare th .ws__pkgprice {
		display:								block;
	}

	.ws__compare thead th .ws__pkgname {
		color:									var(--ws-ink);
		font-size:								var(--ws-t-body);
		letter-spacing:							0;
		text-transform:							none;
	}

	.ws__compare thead th .ws__pkgprice {
		margin:									4px 0 0;

		font-size:								var(--ws-t-body);
	}

	.ws__compare tbody th {
		font-weight:							400;
		white-space:							normal;
	}

	.ws__compare td {
		text-align:								center;
	}

	.ws__tick {
		color:									var(--ws-accent);
		font-weight:							700;
	}

	/* a countdown :: the four numbers in boxes, the words and the date under them; hidden parts stay hidden whatever their display */
	.ws__cd {
		display:								grid;
		justify-items:							center;
		gap:									14px;

		text-align:								center;
	}

	.ws__cd [hidden] {
		display:								none;
	}

	.ws__cdtimer {
		display:								flex;
		flex-wrap:								wrap;
		justify-content:						center;
		gap:									12px;
	}

	.ws__cdpart {
		min-width:								86px;
		padding:								14px 10px;
		display:								grid;
		gap:									4px;

		border:									1px solid var(--ws-line);
		border-radius:							var(--ws-radius);
		background:								var(--ws-card);
	}

	.ws__cdnum {
		font-family:							var(--ws-ff-head);
		font-size:								calc(var(--ws-t-title) + 6px);
		line-height:							1;
		font-variant-numeric:					tabular-nums;
	}

	.ws__cdunit {
		color:									var(--ws-mute);
		font-size:								var(--ws-t-small);
		letter-spacing:							0.08em;
		text-transform:							uppercase;
	}

	.ws__cdtext,
	.ws__cddone {
		max-width:								640px;
		margin:									0;

		color:									var(--ws-soft);
		font-size:								calc(var(--ws-t-body) + 2px);
	}

	.ws__cddate {
		color:									var(--ws-mute);
		font-size:								var(--ws-t-small);
	}

	/* the judge card :: the title and its code over the count, the juries a row each (the year, the salon, its country) */
	.ws__judge {
		max-width:								860px;
		padding:								24px;

		border:									1px solid var(--ws-line);
		border-radius:							var(--ws-radius);
		background:								var(--ws-card);
	}

	.ws__judgehead {
		display:								flex;
		flex-wrap:								wrap;
		align-items:							baseline;
		gap:									8px 14px;
	}

	.ws__judgecode {
		padding:								3px 8px;

		border:									1px solid var(--ws-accent);
		border-radius:							var(--ws-radius);

		color:									var(--ws-accent);
		font-size:								var(--ws-t-small);
		font-weight:							700;
		letter-spacing:							0.06em;
	}

	.ws__judgename {
		font-family:							var(--ws-ff-head);
		font-size:								var(--ws-t-section);
	}

	.ws__judgecount {
		margin-left:							auto;
		display:								flex;
		align-items:							baseline;
		gap:									6px;

		color:									var(--ws-mute);
		font-size:								var(--ws-t-small);
		text-transform:							uppercase;
		letter-spacing:							0.06em;
	}

	.ws__judgecount b {
		color:									var(--ws-ink);
		font-family:							var(--ws-ff-head);
		font-size:								var(--ws-t-section);
		letter-spacing:							0;
	}

	.ws__juries {
		margin:									18px 0 0;
		padding:								0;

		list-style:								none;
	}

	.ws__juries li {
		padding:								8px 0;
		display:								grid;
		grid-template-columns:					4em minmax(0, 1fr) auto;
		gap:									12px;

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

	.ws__juryyear {
		color:									var(--ws-accent);
		font-weight:							600;
		font-variant-numeric:					tabular-nums;
	}

	.ws__jurycountry {
		color:									var(--ws-mute);
		font-size:								var(--ws-t-small);
	}

	@media all and (max-width: 760px) {
		.ws__judgecount {
			margin-left:						0;
			width:								100%;
		}

		.ws__juries li {
			grid-template-columns:				3.5em minmax(0, 1fr);
		}

		.ws__jurycountry {
			grid-column:						2;
		}
	}
	@media all and (max-width: 760px) {
		.ws__essay--margin .ws__essayrow,
		.ws__baside {
			grid-template-columns:				minmax(0, 1fr);
		}
	}	/* a button, a line, a space */
	.ws__cta {
		display:								flex;
		justify-content:						center;
	}

	.ws__btn--line {
		background:								transparent;

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

	.ws__divider--line {
		height:									1px;

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

	.ws__divider--space {
		height:									var(--ws-space);
	}

	/* the places to find the member :: a section of their own, the list right under its head */
	.ws__section[data-type="links"] .ws__links {
		margin-top:								0;
	}

	.ws__links--buttons {
		gap:									10px;
	}

	/* the contact form alone :: the words above it, the form at reading width */
	.ws__contact--form {
		max-width:								720px;
		grid-template-columns:					minmax(0, 1fr);
		gap:									24px;
	}

	/* about :: the portrait on the right, or above the words */
	.ws__about--right > div:first-child {
		order:									2;
	}

	.ws__about--right {
		grid-template-columns:					minmax(0, 1fr) minmax(240px, 360px);
	}

	.ws__about--above {
		grid-template-columns:					minmax(0, 1fr);
		gap:									28px;
	}

	.ws__about--above .ws__portrait {
		max-width:								360px;
	}

	/* a quote :: large and to the left, or beside a portrait */
	.ws__quote--large {
		max-width:								none;

		text-align:								left;
	}

	.ws__quote--large .ws__quotetext {
		font-size:								var(--ws-t-title);
		line-height:							1.25;
	}

	.ws__quote--portrait {
		display:								flex;
		gap:									32px;
		align-items:							center;

		text-align:								left;
	}

	.ws__quoteimg {
		aspect-ratio:							1;

		width:									140px;
		flex:									none;

		border-radius:							50%;

		object-fit:								cover;
	}

	/* the record in large numbers :: no cards, the figures in the heading face */
	.ws__statbar--large .ws__stat {
		padding:								0;

		background:								none;

		text-align:								center;
	}

	.ws__statbar--large .ws__statnum {
		font-size:								calc(var(--ws-t-title) + 18px);
	}

	/* a wall of the awarded photographs */
	.ws__wall {
		display:								grid;
		grid-template-columns:					repeat(auto-fill, minmax(220px, 1fr));
		gap:									var(--ws-gap);
	}

	.ws__wallitem {
		margin:									0;
	}

	.ws__wallitem img {
		aspect-ratio:							4 / 3;

		width:									100%;
		display:								block;

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

		object-fit:								cover;
	}

	.ws__wallitem figcaption {
		margin-top:								10px;
		display:								flex;
		flex-direction:							column;
		gap:									4px;
		align-items:							flex-start;
	}

	.ws__wallitem .ws__award {
		max-width:								100%;
		display:								inline-block;
		overflow:								hidden;

		text-overflow:							ellipsis;
	}

	/* the journal as a board :: cards of the latest posts, one photograph each */
	.ws__posts--board {
		max-width:								none;
		display:								grid;
		grid-template-columns:					repeat(auto-fill, minmax(260px, 1fr));
		gap:									var(--ws-gap);
	}

	.ws__posts--board .ws__post {
		padding:								0;
		display:								flex;
		flex-direction:							column;

		border-bottom:							none;
	}

	.ws__posts--board .ws__postimgs {
		margin:									0 0 14px;
		order:									-1;
		grid-template-columns:					minmax(0, 1fr);
	}

	@media all and (max-width: 960px) {
		.ws__pt,
		.ws__about--right {
			grid-template-columns:				minmax(0, 1fr);
			gap:								28px;
		}

		.ws__pt--right .ws__ptimg,
		.ws__about--right > div:first-child {
			order:								0;
		}

		.ws__words--columns .ws__text {
			columns:							1;
		}
	}

	@media all and (max-width: 500px) {
		.ws__quote--portrait {
			flex-direction:						column;

			text-align:							center;
		}

		.ws__pt--over .ws__pttext {
			padding:							24px;
		}
	}
/*	============================================================ */
/*	#endregion END WORDS AND PHOTOGRAPHS */
/*	============================================================ */


/*	============================================================ */
/*	#region *** FREE SECTION */
/*	============================================================ */
	/* a free section :: a stage of its own ratio; each frame placed by its variables (percent of the stage, y and h already in its height), turned and
	   faded by its own; the frames' order lies one over another (their z-index) */
	.ws__free {
		position:								relative;
		width:									100%;
		aspect-ratio:							var(--fr-ar, 1.5);
	}

	.ws__fr {
		height:									var(--h);
		width:									var(--w);
		margin:									0;
		position:								absolute;
		top:									var(--y);
		left:									var(--x);

		transform:								rotate(var(--r, 0deg));
	}

	/* a photograph :: its link (to the lightbox, or to a page or a gallery) fills the frame, the photograph covers it (or shows whole) from where it sits; a
	   rounded, a round and a print's frame, a border and a shadow */
	.ws__fr--img > :is(.ws__fr-a, .ws__fr-to) {
		display:								block;
		position:								absolute;
		inset:									0;
		overflow:								hidden;
	}

	.ws__fr--img img {
		height:									100%;
		width:									100%;
		display:								block;
	}

	.ws__fr--rounded > :is(.ws__fr-a, .ws__fr-to) {
		border-radius:							12px;
	}

	.ws__fr--circle > :is(.ws__fr-a, .ws__fr-to) {
		border-radius:							50%;
	}

	.ws__fr--print {
		background:								var(--fr-bc, var(--ws-card));
		box-shadow:								0 10px 26px rgba(0, 0, 0, 0.22);
	}

	.ws__fr--print > :is(.ws__fr-a, .ws__fr-to) {
		inset:									4.5% 4.5% 14%;
	}

	.ws__fr-cap {
		position:								absolute;
		right:									6%;
		bottom:									3.5%;
		left:									6%;

		color:									var(--ws-mute);
		font-size:								var(--ws-t-small);
		font-style:								italic;
		white-space:							nowrap;
		overflow:								hidden;
		text-overflow:							ellipsis;
	}

	.ws__fr--bthin > :is(.ws__fr-a, .ws__fr-to) {
		border:									1px solid var(--fr-bc, var(--ws-line));
	}

	.ws__fr--bmat > :is(.ws__fr-a, .ws__fr-to) {
		border:									10px solid var(--fr-bc, var(--ws-card));
	}

	.ws__fr--ssoft {
		filter:									drop-shadow(0 6px 14px rgba(0, 0, 0, 0.18));
	}

	.ws__fr--sdeep {
		filter:									drop-shadow(0 14px 30px rgba(0, 0, 0, 0.34));
	}

	/* words :: the role's own class gives the face, the weight, the case and the size; zoomed by the stage's width over 1100 px (site.js's --fr-k), so they
	   keep their place in the composition at any width */
	.ws__fr--text {
		height:									auto;
	}

	.ws__free .ws__fr-words {
		width:									calc(100% / var(--fr-k, 1));
		margin:									0;
		zoom:									var(--fr-k, 1);
	}

	.ws__fr-body p {
		margin:									0 0 0.8em;
	}

	.ws__fr-body p:last-child {
		margin-bottom:							0;
	}

	/* a shape and a line :: in a colour role */
	.ws__fr--shape {
		border-radius:							var(--fr-rad, 0);
		background:								var(--fr-c, var(--ws-card));
	}

	.ws__fr--ellipse {
		border-radius:							50%;
	}

	.ws__fr--line {
		height:									var(--fr-sw, 2px);

		background:								var(--fr-c, var(--ws-accent));
	}

	/* a frame that links :: words keep their colour and stand as they are; a shape is the link over its whole face */
	.ws__fr--text > .ws__fr-to {
		display:								block;

		color:									inherit;
		text-decoration:						none;
	}

	.ws__fr--shape > .ws__fr-to {
		position:								absolute;
		inset:									0;
	}

	/* a frame's own motion :: hidden until it comes into view (site.js, is-in), then in place after its delay (--fr-dl), so frames come one after another;
	   translate and scale leave the frame's own turn as it is; a visitor who asked for less motion sees every frame at once */
	.ws__fr[data-mo] {
		transition:								opacity 0.7s ease var(--fr-dl, 0s), translate 0.7s ease var(--fr-dl, 0s), scale 0.7s ease var(--fr-dl, 0s);
	}

	@media (prefers-reduced-motion: no-preference) {
		.ws__fr[data-mo]:not(.is-in) {
			opacity:							0 !important;
		}

		.ws__fr[data-mo="up"]:not(.is-in) {
			translate:							0 48px;
		}

		.ws__fr[data-mo="left"]:not(.is-in) {
			translate:							-40px 0;
		}

		.ws__fr[data-mo="right"]:not(.is-in) {
			translate:							40px 0;
		}

		.ws__fr[data-mo="zoom"]:not(.is-in) {
			scale:								0.94;
		}
	}

	.ws__main:has(.ws__fr[data-mo="left"], .ws__fr[data-mo="right"]) {
		overflow-x:								clip;
	}

	/* a phone :: stacked (the default) - the frames one under another in reading order, a photograph at its frame's ratio, the lines and the shapes left
	   out; scaled (data-phone="scale") - the desk's composition made smaller (site.js keeps its words at 11 px at least); arranged (data-phone="own") - the
	   frames placed for the phone (ws__fr--p) on a stage of its own height (--fr-hP, percent of its width; their places in percent of its width, read in
	   container units), the others stacked under it */
	@media all and (max-width: 760px) {
		.ws__free:not([data-phone="scale"]) {
			display:							flex;
			flex-direction:						column;
			gap:								18px;
			aspect-ratio:						auto;
		}

		.ws__free:not([data-phone="scale"]) > .ws__fr {
			height:								auto;
			width:								100%;
			position:							relative;
			top:								auto;
			left:								auto;

			transform:							none;
		}

		.ws__free:not([data-phone="scale"]) > .ws__fr--img {
			aspect-ratio:						var(--pr, 1.5);
		}

		.ws__free:not([data-phone="scale"]) > .ws__fr--circle {
			width:								64%;
			align-self:							center;
		}

		.ws__free:not([data-phone="scale"]) > .ws__fr--shape,
		.ws__free:not([data-phone="scale"]) > .ws__fr--line {
			display:							none;
		}

		.ws__free:not([data-phone="scale"]) .ws__fr-words {
			width:								auto;
			zoom:								1;
		}

		.ws__free[data-phone="own"] {
			padding-top:						calc(var(--fr-hP, 150) * 1% + 18px);
			container-type:						inline-size;
		}

		.ws__free[data-phone="own"] > .ws__fr--p {
			height:								calc(var(--hP) * 1cqw);
			width:								calc(var(--wP) * 1cqw);
			position:							absolute;
			top:								calc(var(--yP) * 1cqw);
			left:								calc(var(--xP) * 1cqw);
			align-self:							auto;

			transform:							rotate(var(--r, 0deg));
		}

		.ws__free[data-phone="own"] > .ws__fr--p.ws__fr--text {
			height:								auto;
		}

		.ws__free[data-phone="own"] > .ws__fr--p.ws__fr--img {
			aspect-ratio:						auto;
		}

		.ws__free[data-phone="own"] > .ws__fr--p.ws__fr--shape,
		.ws__free[data-phone="own"] > .ws__fr--p.ws__fr--line {
			display:							block;
		}

		.ws__free[data-phone="own"] > .ws__fr--p.ws__fr--line {
			height:								var(--fr-sw, 2px);
		}
	}
/*	============================================================ */
/*	#endregion END FREE SECTION */
/*	============================================================ */


/*	============================================================ */
/*	#region *** PHONE */
/*	============================================================ */
	@media all and (max-width: 960px) {
		.ws__gallery,
		section[data-layout="columns"] .ws__gallery {
			columns:							2;
		}

		.ws__about, .ws__contact {
			grid-template-columns:				1fr;
			gap:								28px;
		}

		.ws__portrait {
			max-width:							360px;
		}

		.ws__hero--split {
			grid-template-columns:				1fr;
		}

		.ws__hero--split .ws__heroimg {
			grid-column:						1;
			order:								-1;
		}

		.ws__hero--collage {
			grid-template-columns:				1fr 1fr;
			grid-template-rows:					minmax(140px, 26vh) minmax(140px, 26vh);
		}

		section[data-layout="text"] .ws__tilename {
			font-size:							var(--ws-t-section);
		}
	}

	@media all and (max-width: 760px) {
		:root {
			--ws-gap:							16px;
			--ws-head-h:						60px;
		}

		.ws__burger {
			display:							inline-flex;
		}

		.ws__nav {
			position:							absolute;
			top:								100%;
			right:								0;
			left:								0;
			padding:							8px var(--ws-gap) 16px;
			display:							none;
			flex-direction:						column;
			align-items:						stretch;

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

		html[data-nav="split"] .ws__headrow {
			display:							flex;
		}

		html[data-nav="split"] .ws__nav--r {
			display:							none;
		}

		body.is-nav .ws__nav {
			display:							flex;
		}

		html[data-nav="bottom"] .ws__nav {
			position:							fixed;
			top:								auto;
			padding:							6px var(--ws-gap);
			display:							flex;
			flex-direction:						row;
			flex-wrap:							wrap;

			border-bottom:						none;
		}

		html[data-nav="bottom"] .ws__burger {
			display:							none;
		}

		html[data-nav="center"] .ws__headrow {
			padding:							0;
			flex-direction:						row;
		}

		html[data-nav="center"] .ws__brand {
			align-items:						flex-start;

			text-align:							left;
		}

		.ws__navlink {
			padding:							10px 0;

			border-bottom-color:				transparent;
		}

		.ws__navlink.is-on {
			border-bottom-color:				transparent;

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

		.ws__hero {
			height:								min(50vh, 420px);
		}

		.ws__hero--full {
			height:								min(72vh, 640px);
		}

		.ws__hero--type, .ws__hero--split, .ws__hero--framed, .ws__hero--collage, .ws__hero--strip, .ws__hero--stack, .ws__hero--circle {
			height:								auto;
		}

		.ws__section {
			padding:							calc(var(--ws-space) * 0.7) 0;
		}

		.ws__title {
			font-size:							calc(var(--ws-t-title) * 0.8);
		}

		.ws__row {
			grid-template-columns:				48px minmax(0, 1fr);
		}

		.ws__row > .ws__award, .ws__row > .ws__accepted {
			grid-column:						2;
			justify-self:						start;
		}

		.ws__row--noimg {
			grid-template-columns:				minmax(0, 1fr);
		}

		.ws__row--noimg > .ws__award,
		.ws__row--noimg > .ws__accepted {
			grid-column:						1;
		}
		.ws__thumb {
			width:								48px;
		}

		section[data-layout="list"] .ws__tile {
			grid-template-columns:				96px minmax(0, 1fr);
		}

		section[data-layout="alternating"] .ws__item,
		section[data-layout="alternating"] .ws__item:nth-child(even) {
			grid-template-columns:				1fr;
		}

		section[data-layout="alternating"] .ws__item:nth-child(even) img {
			order:								0;
		}

		section[data-layout="justified"] .ws__item {
			height:								200px;
		}

		.ws__stack {
			height:								min(36vh, 300px);
		}
	}

	@media all and (max-width: 500px) {
		.ws__gallery,
		section[data-layout="columns"] .ws__gallery {
			columns:							1;
		}

		section[data-layout="grid"] .ws__gallery,
		section[data-layout="cards"] .ws__gallery {
			grid-template-columns:				1fr 1fr;
		}

		section[data-layout="mosaic"] .ws__gallery {
			grid-template-columns:				1fr 1fr;
			grid-auto-rows:						140px;
		}

		.ws__tiles,
		section[data-layout="square"] .ws__tiles,
		section[data-layout="circle"] .ws__tiles {
			grid-template-columns:				1fr;
		}
	}
	/* a gallery's own phone layout (data-phone, chosen in the builder's Galleries workspace) :: one column, two columns of squares or a carousel that
	   snaps, each undoing the desk layout it sits on (site.js leaves a justified row's sizes off it); the items' rules carry :nth-child(n), the weight of
	   the mosaic's and the cards' own */
	@media all and (max-width: 760px) {
		section[data-phone] .ws__stage {
			display:							none;
		}

		section[data-phone] .ws__gallery {
			padding:							0;
			gap:								10px;
			grid-auto-rows:						auto;
			grid-auto-flow:						row;

			background:							none;
			columns:							auto;
		}

		section[data-phone] .ws__item,
		section[data-phone] .ws__item:nth-child(n) {
			height:								auto;
			margin:								0;
			padding:							0;
			display:							block;
			flex:								none;
			grid-column:						auto;
			grid-row:							auto;
			opacity:							1;
			aspect-ratio:						auto;

			transform:							none;
		}

		section[data-phone] .ws__item img {
			height:								auto;
			width:								100%;
			aspect-ratio:						auto;

			object-fit:							cover;
		}

		section[data-phone] .ws__itemcap {
			display:							none;
		}

		section[data-phone="one"] .ws__gallery {
			display:							flex;
			flex-direction:						column;
		}

		section[data-phone="two"] .ws__gallery {
			display:							grid;
			grid-template-columns:				minmax(0, 1fr) minmax(0, 1fr);
		}

		section[data-phone="two"] .ws__item:nth-child(n) {
			aspect-ratio:						1;
		}

		section[data-phone="two"] .ws__item img {
			height:								100%;
		}

		section[data-phone="carousel"] .ws__gallery {
			padding-bottom:						8px;
			display:							flex;
			overflow-x:							auto;
			scroll-snap-type:					x mandatory;
			scrollbar-width:					none;
		}

		section[data-phone="carousel"] .ws__gallery::-webkit-scrollbar {
			display:							none;
		}

		section[data-phone="carousel"] .ws__item:nth-child(n) {
			height:								min(62vh, 520px);
			min-width:							0;
			flex:								0 0 86%;
			scroll-snap-align:					center;
		}

		section[data-phone="carousel"] .ws__item img {
			height:								100%;
		}
	}
/*	============================================================ */
/*	#endregion END PHONE */
/*	============================================================ */