/* BEGIN: COMMON VARIABLES: ///////////////////////////////////////////////// */

:root {

	/* BEGIN: GOLDEN RATIO: /////////////////////////////////////////////////// */

	--phi: 1.6;
	--PHI: 0.6;

/* 	--phi: 1.618034; */
/* 	--PHI: 0.618034; */

	/* END: GOLDEN RATIO: ///////////////////////////////////////////////////// */

	/* BEGIN: FONT-SIZE & LINE-HEIGHT: //////////////////////////////////////// */

	--fs-from: 14.5;
	--fs-to: 20;

	--fs: calc( 100vw * ( var( --fs-to ) - var( --fs-from ) )
		/ 3840 + var( --fs-from ) * 1px );

	--lh: var( --phi );

	/* END: FONT-SIZE & LINE-HEIGHT: ////////////////////////////////////////// */

	/* BEGIN: ROW-GAP: //////////////////////////////////////////////////////// */

	--rg-from: calc( var( --PHI )
		* var( --fs-from ) );

	--rg-to: calc( var( --phi ) * var( --phi )
		* var( --fs-to ) );

/* 	--rg: calc( ( 100vw * ( var( --rg-to ) - var( --rg-from ) ) */
/* 		/ 3840 + var( --rg-from ) * 1px ) * 2 ); */

/* 		--rg: calc( 100vw * ( var( --rg-to ) - var( --rg-from ) ) */
/* 		/ 3840 + var( --rg-from ) * 2px  ); */

		--rg: calc( 100vw * ( var( --rg-to ) - var( --rg-from ) )
		/ 3840 + var( --rg-from ) * var( --phi ) * 1px );

	/* END: ROW-GAP: ////////////////////////////////////////////////////////// */

	/* BEGIN: COLUMN-GAP: ///////////////////////////////////////////////////// */

	--cg-from: calc( var( --PHI ) * var( --PHI ) * var( --PHI )
		* var( --fs-from ) );

	--cg-to: calc( var( --phi ) * var( --phi ) * var( --phi ) * var( --phi )
		* var( --fs-to ) );

	--cg: calc( 100vw * ( var( --cg-to ) - var( --cg-from ) )
		/ 3840 + var( --cg-from ) * 1px );

	/* END: COLUMN-GAP: /////////////////////////////////////////////////////// */

	/* BEGIN: BUTTON SIZE: //////////////////////////////////////////////////// */

	--fbs-from: calc( var( --lh ) * var( --fs-from ) * 2 );
	--fbs-to: calc( var( --lh ) * var( --fs-to ) * 3 );

	--fbs: calc( 100vw * ( var( --fbs-to ) - var( --fbs-from ) )
		/ 3840 + var( --fbs-from ) * 1px );

	/* END: BUTTON SIZE: ////////////////////////////////////////////////////// */

	/* BEGIN: COLUMN GAP * 2 + BUTTON SIZE: /////////////////////////////////// */

	--cg-fbs-cg: calc( var( --cg ) * 2 + var( --fbs ) );

	/* END: COLUMN GAP * 2 + BUTTON SIZE: ///////////////////////////////////// */

	--white: #d2d8d6;
	--black: #000;

	--bw: 1px; /* border-width */
	--br: 0.6em;

	--anim-sd: 0.4s;
}

/* END: COMMON VARIABLES: /////////////////////////////////////////////////// */

/* BEGIN: COMMON ELEMENTS /////////////////////////////////////////////////// */

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	-webkit-tap-highlight-color: transparent;
}

*:focus {
	outline: none;
}

a {
	color: inherit;
	text-decoration: none;
	display: inline-block;
	border-bottom: 1px dashed var( --white );
}

b {
	font-weight: 700;
}

body {
	background-color: var( --black );
	color: var( --white );
	font-family: 'Hanken Grotesk', sans-serif;
	font-weight: 300;
	font-size: var( --fs );
	line-height: var( --lh );
	text-size-adjust: none;
}

	body > .wrapper {
/* 		border-bottom: 1px solid var( --white ); */
/*		background: url( /graphics/lt-black-1.jpg ) no-repeat;
		background-size: auto var( --fbs );
		background-position: top var( --cg ) right var( --cg );*/
		position: relative;
	}

html {
	scroll-behavior: smooth;
}

@media ( min-width: 640px ) {

	body > .wrapper {
		background-position: top var( --cg ) right var( --cg-fbs-cg );
	}

}

/* END: COMMON ELEMENTS ///////////////////////////////////////////////////// */

/* BEGIN: COMMON FIXED BUTTONS ////////////////////////////////////////////// */

.button {
	background-color: var( --black );
	border: var( --bw ) solid var( --white );
/* 	border-radius: 0.6em; */
	cursor: pointer;
	display: block;
	height: var( --fbs );
	width: var( --fbs );
}

	.button > svg {
		margin: 30%;
	}

		.button > svg > path {
			fill: var( --white );
		}

.button.fixed {
	position: fixed;
}

#fixed_button-menu {
	left: var( --cg );
	top: var( --cg );
	transform: scaleY( 1 );
	transition: transform var( --anim-sd ) ease-in-out;
	z-index: 3;
/* 	display: none !important; */
}

#fixed_button-menu.on {
	transform: scaleY( -1 );
}

#fixed_button-up {
	bottom: calc( var( --cg ) + var( --fbs ) + var( --fs ) * var( --phi ) );
	right: var( --cg );
}

#fixed_button-down {
	bottom: var( --cg );
	right: var( --cg );
}

#fixed_button-menu-caption {
	background-color: transparent;
	border-color: transparent;
	color: var( --white );
	display: none;
/* 	font-family: 'Tinos', serif; */
	font-size: 1.6em;
	font-size: 1em;
/* 	font-weight: 700; */
	height: auto;
	left: var( --cg );
	padding: calc( var( --rg ) * var( --PHI ) ) 0;
	text-align: center;
	top: calc(var( --cg ) + var( --fbs ) );
	z-index: 3;
/* 	display: none !important; */
}

@media ( min-width: 640px ) {

	#fixed_button-menu-caption {
		display: block;
	}

}

#fixed_button-up,
#fixed_button-down {
	opacity: 1;
	transition: opacity var( --anim-sd ) ease-in-out;
	z-index: 1;
}

#fixed_button-up.off,
#fixed_button-down.off {
	opacity: 0.5;
	cursor: default;
}

/* END: COMMON FIXED BUTTONS///////////////////////////////////////////////// */

/* BEGIN: COMMON MENU /////////////////////////////////////////////////////// */

#menu {
	background-color: var( --black );
	bottom: 0;
	display: grid;
	font-size: 1.125em;
	height: 100vh;
	left: 0;
	overflow-y: auto;
	position: fixed;
	right: 0;
	top: 0;
	transform: translateY( -100% );
	transition: transform var( --anim-sd ) ease-in-out;
	will-change: transform;
	z-index: 2;
}

#menu.on {
	transform: translateY( 0% );
}

	#menu-wrapper {
	background: url( '/graphics/lt-black-1-f-2.jpg' ) center no-repeat;
	background-color: var( --black );
	background-size: calc( 100vw * ( 640 - 320 ) / 3840 + 320 * 1px );
	display: grid;
	place-items: center;
	}

/*	#menu a {
		align-items: center;
		display: flex;
		text-decoration: none;
		border-bottom: 0;
	}

	#menu a.current {
		font-weight: 800;
	}

		#menu a > svg {
			display: inline-block;
			height: 1em;
			margin-right: 0.5em;
			opacity: 0;
		}

		#menu a:hover > svg,
		#menu a.current > svg {
			opacity: 1;
		}

			#menu a > svg > path {
				fill: var( --white );
			}*/




	#menu .link {
		align-items: center;
		display: flex;
		text-decoration: none;
		border-bottom: 0;
	}

	#menu .link.current {
		font-weight: 800;
	}

		#menu .link > svg {
			display: inline-block;
			height: 1em;
			margin-right: 0.5em;
			opacity: 0;
		}

		#menu a.link:hover > svg,
		#menu .link.current > svg {
			opacity: 1;
		}

			#menu a.link > svg > path {
				fill: var( --white );
			}





	#menu div.block {
		margin-top: 0.75em;
		margin-bottom: 0.75em;
		overflow: auto;
	}

		#menu div.block > * {
			margin-top: 0.75em;
			margin-bottom: 0.75em;
		}

	#menu div.indent {
		margin-left: 2em;
	}

/* END: COMMON MENU ///////////////////////////////////////////////////////// */

/* BEGIN: COMMON CONTAINER ////////////////////////////////////////////////// */

.container {
	display: grid;
	grid-gap: var( --rg ) var( --cg );
	margin: 0 var( --cg );
	padding: var( --cg-fbs-cg ) 0;
	padding-bottom: 0;
	padding-bottom: var( --rg )
/* 	border-bottom: 1px solid red; */
}

/*.container:not(.gallery ) {
	background: url( /graphics/lt-black-1.jpg ) no-repeat;
	background-size: auto var( --fbs );
	background-position: top calc( var( --cg ) + 0em ) right 0;
}*/

.container:not(.gallery ) {
	background: url( /graphics/lt-black-1.jpg ) no-repeat;
/* 	background-size: auto calc(var( --fbs ) * var( --phi ) ); */
	background-size: auto calc(var( --fbs ) * 1.25 );
	background-position: top calc( var( --cg ) + 0em ) right 0;
}


.container.no-logo {
	background: none !important;
/* 	background-color: red; */
/* 	border: 4px solid red; */
}

	.container.columns > .header > .title {
/* 		font-family: 'Tinos', serif; */
		font-size: calc( 1em * var( --phi ) );
/* 		font-style: italic; */
		font-weight: 700;
	}

		.container.columns > .header > .subtitle {
			display: block;
/* 			font-family: 'Tinos', serif; */
			font-style: italic;
			margin-top: var( --rg );
			font-size: 1.05em;
/* 			font-size: 1.1em; */
			font-weight: 400;
		}

		.container.columns > .header > .subtitle > b:not(:first-child) {
/* 			display: none; */
		}

		.container.columns > figure {
			cursor: pointer;
		}

		.container.columns > figure > div {
			border: var( --bw ) solid var( --white );
			display: grid;
			place-items: center;
			justify-items: center;
		}

			.container.columns > figure > div > img {
				display: block;
				grid-column: 1 / 2;
				grid-row: 1 / 2;
				width: 100%;
				height: 100%;
			}

			.container.columns > figure > div > button {
				display: block;
				grid-column: 1 / 2;
				grid-row: 1 / 2;
				height: calc( var( --fbs ) * var( --PHI ) );
				width: calc( var( --fbs ) * var( --PHI ) );
				opacity: 0;
				transition: opacity var( --anim-sd ) ease-in-out;
			}

			.container.columns > figure:hover > div > button {
				opacity: 1;
			}

		.container.columns > figure > img {
			border: var( --bw ) solid var( --white );
			display: block;
			width: 100%;
		}

		.container.columns > figure > figcaption {
/* 			font-family: 'Tinos', serif; */
			font-style: italic;
			font-size: 1em;
			margin-top: var( --rg );
		}

			.container.columns > figure > figcaption > span:nth-of-type(1) {
				font-weight: 700;
			}

			.container.columns > figure > figcaption > * {
				display: block;
				text-align: right;
			}

	.container.columns > .footer > .caption {
/* 		font-family: 'Tinos', serif; */
		font-style: italic;
		font-size: 1.05em;
		font-size: 1em;
		font-weight: 400;
	}

	.container.columns.gallery {
		grid-template-columns: 1fr 1fr;
		padding-top: calc( var( --rg ) * var( --phi ) );
	}

@media ( min-width: 640px ) {

	.container {
		margin: 0 var( --cg-fbs-cg );
	}

}

@media ( min-width: 1280px ) {

	.container {
		grid-template-columns: 1fr 1fr;
	}

		.container.columns > .header {
			grid-column: 1 / 2;
		}

		.container.columns > p:nth-of-type(1) {
			grid-column: 1 / 2;
		}

		.container.columns > p:nth-of-type(2) {
/* 			grid-column: 2 / 3; */
		}

		.container.columns > .footer {
			grid-column: 2 / 3;
/* 			text-align: right; */
		}

	.container.columns.gallery {
		grid-template-columns: 1fr 1fr 1fr;
	}

		.container.columns.gallery > .header {
			grid-column: 1 / 4;
		}

			.container.columns > figure > div > button {
/* 				height: var( --fbs ); */
/* 				width: var( --fbs ); */
			}

}

/* END: COMMON: CONTAINER /////////////////////////////////////////////////// */

/* BEGIN: COMMON: FOOTER: /////////////////////////////////////////////////// */

#footer {
	margin-bottom: var( --cg-fbs-cg );
	padding-bottom: 0;
/* 	padding-bottom: var( --cg ); */
/* 	margin-bottom: var( --cg ); */
}

#footer > .header {
/* 	grid-column: 1 / 3; */
}

#footer > dl {
	display: grid;
	grid-template-columns: auto 1fr;

}

#footer-contact {
/* 	margin-right: calc(var( --cg-fbs-cg ) - var( --cg ) ); */
}

	#footer > dl > dd {
		margin-left: calc( var( --cg ) * var( --PHI ) );
	}

@media ( min-width: 480px ) {

	#footer-name > span {
		display: block;
	}

}

@media ( min-width: 640px ) {

	#footer-contact {
/* 		margin-right: 0; */
	}

}

@media ( min-width: 960px ) {

	#footer-contact {
/* 		margin-right: 0; */
	}

	#footer > .header {
	grid-column: 1 / 3;
}

		#footer-ids {
		grid-row: 3 / 4;
	}

	#footer-contact {
		grid-row: 3 / 4;
	}

}

@media ( min-width: 1280px ) {

/*	#footer > .header {
	grid-column: 1 / 3;
}*/

	#footer-ids {
		grid-row: 3 / 4;
	}

	#footer-contact {
		grid-row: 3 / 4;
	}

}

/*END: COMMON :FOOTER: ////////////////////////////////////////////////////// */


/* BEGIN: COMMON FOTO SHOW ================================================== */

#photo-show {
	align-items: center;
	background-color: rgba( 0, 0, 0, 0 );
	bottom: 0;
	display: none;
	justify-items: center;
	left: 0;
	right: 0;
	top: 0;
	position: fixed;
	transition: background-color var( --anim-sd ) ease-in-out;
	z-index: 3;
}

#photo-show.on {
	background-color: rgba( 0, 0, 0, 0.666 );
/* 	transition: background-color calc(var( --anim-sd ) * 2 ) ease-in-out; */
}

	#photo-show-wrapper {

		border: 1px solid var( --white );
		display: block;
		height: auto;
		opacity: 0;
		position: relative;
		transition: opacity var( --anim-sd ) ease-in-out;
		width: calc( 100vw - var( --cg ) * 2 );
	}

	#photo-show-wrapper.on {
/* 		transform: scale( 1 ); */
		opacity: 1;
	}

		#photo-show-wrapper > img {
			width: 100%;
		}

		#photo-show-wrapper > button {
			opacity: 0;
			position: absolute;
			right: var( --cg );
			top: var( --cg );
			transition: opacity var( --anim-sd ) ease-in-out;
			height: calc( var( --fbs ) * var( --PHI ) );
			width: calc( var( --fbs ) * var( --PHI ) );
		}

		#photo-show-wrapper > button.on {
			opacity: 1;
		}

@media ( min-width: 1280px ) {

	#photo-show-wrapper > button {
		height: var( --fbs );
		width: var( --fbs );
	}

}

@media screen and ( min-aspect-ratio: 2738 / 1692 ) {

	#photo-show-wrapper {
		height: calc( 100vh - var( --cg ) * 2 );
		width: auto;
	}

		#photo-show-wrapper > img {
			height: 100%;
			width: auto;
		}

}

/* END: COMMON FOTO SHOW ==================================================== */


/* BEGIN: COMMON SLIDESHOW ================================================== */

#slideshow {
	border: var( --bw ) solid var( --white );
	display: grid;
	overflow: hidden;
	position: relative;
}

	#slideshow > img {
/* 		border-bottom: var( --bw ) solid var( --white ); */
		display: block;
		height: 100%;
/* 		position: absolute; */
		width: 100%;
		grid-column: 1 / 2;
		grid-row:  1 / 2;
		transform: translate3d( 0, 0, 0 );
		will-change: transform;
		backface-visibility: hidden;
	}

	#slideshow > img {
/* 		transform: translate3d( 0, -50%, 0 ); */

	}

	#slideshow > .caption {
		align-self: start;
		border-bottom: 0;
/* 		font-family: 'Tinos', serif; */
		font-style: italic;
		font-size: 1em;
		grid-column: 1 / 2;
		grid-row:  1 / 2;
		justify-self: end;
		padding-right: var( --rg );
		padding-top: calc( var( --rg ) * var( --PHI ) );
		transform: translate3d( 0, 0, 0 );
		will-change: transform;
	}

	#slideshow > a:not(:last-of-type) {
		transform: translateY( -200% );
	}

			#slideshow > .caption > span:nth-of-type(1) {
				font-weight: 700;
			}

			#slideshow > .caption > * {
				display: block;
				text-align: left;
				text-align: right;
			}

			#slideshow > .caption > span {
/* 				padding-right: var( --rg ); */
			}
/*
		#slideshow > button {
			background-color: transparent;
			border: 0;
			position: absolute;
			bottom: 0;
			right: calc( var( --rg ) * var( --PHI ) * var( --PHI ) * var( --PHI )  );
		}*/

		#slideshow > button {
			align-self: end;
			grid-column: 1 / 2;
			grid-row:  1 / 2;
			justify-self: center;
			margin: var( --rg );
			position: static;
			z-index: 1;
			height: calc( var( --fbs ) * var( --PHI ) );
			width: calc( var( --fbs ) * var( --PHI ) );
		}

			#slideshow > button > svg {
				margin-bottom: 25%;
			}


@media ( min-width: 1280px ) {

	#slideshow {
		grid-column: 1 / 3;
		grid-row: 2 / 3;
	}

		#slideshow > button {
/* 		border: 4px solid red; */
			height: var( --fbs );
			width: var( --fbs );
		}
}

/* END: COMMON SLIDESHOW ================================================== */

.paragraph {
	display: block;
/* 	font-family: 'Tinos', serif; */
	font-size: 1.05em;
	font-weight: 700;
	margin-bottom: var( --rg );
	text-align: center;
}


#copyright {
	align-items: center;
	display: flex;
}

	#copyright > span {
		font-size: 1.618em;
		font-weight: 700;
	}