*,*:before,*:after{box-sizing:border-box;}html,body{margin:0;height:100%;}a{text-decoration:inherit;color:inherit;}
p,h1,h2,h3,h4,h5,h6{margin:0;font-size:inherit;font-weight:inherit;}ul,ol{margin:0;padding:0;list-style-type:none;}
img{display:inline-block;border:0;max-width:100%;height:auto;vertical-align:middle;}figure{margin:0;}

html {
    -webkit-text-size-adjust : 100%;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
}


@font-face {
	font-family: Hellix;
	src: url('fonts/Hellix-Medium.woff2') format('woff2'),
			 url('fonts/Hellix-Medium.woff') format('woff');
}
@font-face {
	font-family: Hellix;
	src: url('fonts/Hellix-MediumItalic.woff2') format('woff2'),
			 url('fonts/Hellix-MediumItalic.woff') format('woff');
	font-style: italic;
}

/*
        This font software is the property of Commercial Type.

        You may not modify the font software, use it on another website, or install it on a computer.

        License information is available at http://commercialtype.com/eula
        For more information please visit Commercial Type at http://commercialtype.com or email us at info[at]commercialtype.com

        Copyright (C) 2024 Schwartzco Inc.
        License 2403-XXEPMN      
*/

@font-face {
	font-family: 'Lyon Display Web';
	src: url('fonts/LyonDisplay-Regular-Web.woff2') format('woff2'),
		 url('fonts/LyonDisplay-Regular-Web.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	}

@font-face {
	font-family: 'Lyon Display Web';
	src: url('fonts/LyonDisplay-RegularItalic-Web.woff2') format('woff2'),
		 url('fonts/LyonDisplay-RegularItalic-Web.woff') format('woff');
	font-weight: 400;
	font-style: italic;
	}



:root {
	--margin: 32px;
	--margin-big: calc(var(--margin) * 1.5);
	--nav-color: white;
	--overlay-color:  #FBF9EE;
}


::selection {
	background-color: rgba(0,0,0,0.05);
}
body.invert {
	--nav-color: black;
}
body {
	display: flex;
	flex-wrap: wrap;
	font-size: 15px;
	font-family: "Hellix", sans-serif;
}
@media (orientation: portrait){
	body {
		position: fixed;
		width: 100%;
		overflow: hidden;
	}
}

.pd {
	padding: var(--margin);
}
.pd-big {
	padding: var(--margin-big);
}

nav {
	color: var(--nav-color);
	text-shadow: 0 0 20px rgba(0,0,0,0.25);
	z-index: 100;
	margin-bottom: -4px;
}
nav span {
	cursor: pointer;
}
body[data-overlay="index"] nav span#index-toggle,
body[data-overlay="about"] nav span#about-toggle {
	text-decoration: underline;
	text-underline-position: under;
	text-underline-offset: -0.1em;
	text-decoration: none;
	/*opacity: 0.5;*/
	font-style: italic;
}

.slideshow {
	width: 50%;
	height: 100vh;
	height: 100svh;
	position: relative;
}
.slide {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	cursor:  e-resize;
}

aside .slide {
	
}

.slide-num {
	position: absolute;
	right: var(--margin);
	top: 50%;
	transform: translateY(-50%);
	text-align: right;
	color: white;
	cursor: pointer;
	min-width: 4ch;
	max-width: calc(100vw - 2 * var(--margin));
	text-shadow: 0 0 20px rgba(0,0,0,0.25);
}
@media (orientation: landscape){
	.slide-num {
		max-width: 33vw;
	}
}
.slide-num:after {
	content: attr(data-index);
}
.show-caption .slide-num:after, .slide-num:hover:after {
	content: attr(data-caption);
}
aside .slide-num {
	text-align: left;
	right: unset;
	left: var(--margin);
}



img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
}
.landscape img, .landscape .color-overlay {
	height: calc(50% + 32px);
}

.color-overlay {
	image-rendering: pixelated;
	pointer-events: none;
	transition: opacity 0.4s ease-out, visibility 0.4s ease-out;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.transition.loaded .color-overlay, .no-lazy .color-overlay {
	/*display: none;*/
	visibility: hidden;
	opacity: 0;
	/*display: none;*/
}


.fixed {
	position: fixed;
}
.bottom {
	bottom: 0;
	padding: var(--margin);
}
.right {
	right: 0;
}

@media (orientation: landscape) {
	.fixed.bottom {
		top: 50%;
		transform: translateY(-50%);
		bottom: unset;
		--nav-color: white;
		z-index: 10;
	}
}

.overlay-bg {
	display: none;
	position: fixed;
	left: 50%;
	width: 50%;
	height: 100%;
	top: 0;
	/*background: rgba(0,0,0,0.2);*/
	cursor: zoom-out;
	z-index: 15;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}
body[data-overlay] .overlay-bg {
	display: block;
}
@media (orientation: landscape){

	body[data-overlay="about"] .overlay-bg {
		left: unset;
		right: 50%;
	}
}

.overlay {
	position: fixed;
	/*right: 0;*/
	left: 50%;
	top: 0;
	width: 50%;
	width: 50ch;
	width: min(50ch, calc(50% - 100px));
	height: 100vh;
	height: 100svh;
	display: none;
	z-index: 20;
}

.overlay.about {
	left: unset;
	right: 50%;
}

body[data-overlay="index"] .overlay.index,
body[data-overlay="about"] .overlay.about {
	display: flex;
}

.overlay .content-container {
	width: 100%;
	height: 100%;
	background: var(--overlay-color);
	overflow-y: scroll;
}
.overlay .content-container::-webkit-scrollbar {
	display: none;
}

.overlay.index .content-container {
	padding-top: calc(var(--margin) + 4px);
}


.index .item {
	padding: 12px 0 9px;
	border-top: 0.75px solid transparent;
	border-bottom: 0.75px solid transparent;
	margin-bottom: -0.75px;
	cursor: pointer;
	display: flex;
	flex-wrap: wrap;
}
.index .item.active{
	cursor: e-resize;
}
.index .header {
	display: flex;
	flex-wrap: wrap;
	display: none;
	padding-bottom: 8px;
	border-bottom: 0.75px solid rgba(0,0,0,0.1);
}
.index .item .num, .index .header .num {
	width: 10%;
	color: transparent;
	display: none;
}
.index .item .name, .index .header .name {
	flex: 1;
	/*padding-left: 16px;*/
} 
.index .item .producer, .index .header .producer {
	flex: 1;
	font-style: italic;
	text-transform: capitalize;
	/*padding-left: 16px;*/
} 
.index .item:hover {
	/*opacity: 0.8;*/
	border-color: rgba(0,0,0,0.1);
}
.index .item.active {
	border-color: rgba(0,0,0,1.0);
}

.txt-lyon {
	font-family: 'Lyon Display Web', serif;
	font-size: 1.15em;
}
.txt-lyon * + p:before {
	content: '\a';
	white-space: pre-line;
}
.txt-lyon h3 {
	/*font-style: italic;*/
}
.txt-lyon * + h3:before {
	content: '\a\a';
	white-space: pre-line;
	display: block;
	border-bottom: 0.75px solid;
	margin-bottom: 2.5rem;
}

@media (orientation: portrait) {
	:root {
		--margin: 25px;	
	}
	/*body[data-overlay] nav {
		color: black !important;
	}*/
	aside.slideshow {
		display: none;
	}
	.slideshow {
		width: 100%;
	}
	.slide-num {
		text-align: left;
		right: unset;
		left: var(--margin);
	}
	/*body[data-overlay="index"] img {
		height: calc(50% + 32px);
	}*/

	.overlay.index, .overlay.about {
		width: 77%;
		min-width: 300px;
		max-width: 400px;
		right: 0;
		left: 0;
		height: 100vh;
		height: 100svh;
		top: unset;
		bottom: 0;
		z-index: 120;
	}
	.overlay.index {
		left: unset;
	}
	.overlay-bg {
		width: 100%;
		left: 0;
		z-index: 110;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	/*.overlay:after, .overlay.index:before {
		content: '';
		width: 100%;
		height: 70px;
		bottom: 0;
		left: 0;
		background: linear-gradient(transparent 0%, var(--overlay-color) 5%);
		position: absolute;
		pointer-events: none;
	}
	.overlay.index:before {
		bottom: unset;
		top: 0;
		height: 16px;
		background: linear-gradient(var(--overlay-color) 0%, transparent 50%);
		display: none;
	}*/
	.overlay .content-container {
		padding: var(--margin);
		padding-bottom: calc(var(--margin) * 1);
	}

	.overlay.index .content-container {
		padding-top: calc(var(--margin) - 6px);
		/*padding-bottom: 0;*/
	}
	.index .item .name, .index .item .producer {
		padding-left: 0;
	}
	/*.overlay.index {
		padding-bottom: 64px;
	}*/
	/*.overlay .content-container > div:last-child {
		margin-bottom: 64px;
	}*/
	.overlay.about {
		height: 100%;
	}
}