/*
Description:
Version: 0001
Author: nino bänninger
Author URI: http://www.ninobanninger.com/
*/
*{
	margin:0;
	padding:0;
	box-sizing: border-box;
}

.right{text-align:right;}
.center{text-align:center;}
.clr{clear:both;}


/* Typography */
html{
	font-size: 18px;

	--shadow: #212121;
	--light: white;
	--green: #004225;

}

@media (prefers-color-scheme: dark) {
  html{
		--shadow: white;
		--light: #212121;
	}
}

body {
	font-family: PrestigeElite;
	font-size: 1rem;
	line-height:1.6;

	background: var(--light);
	color: var(--shadow);
	text-align: left;
}

a{ color: var(--shadow);text-decoration:none;}
a:hover, label:hover{color: var(--green) !important;text-decoration:none;}

.dark{
	background-color: #212121;
	color: white;
}
.dark a,
.dark .quick-nav a,
.dark .quick-nav label{ color: white;}



h2{
	font-family:BrandonGrotesque;
	text-transform: uppercase;
	font-weight:normal;
	padding-bottom:0.8em;

	line-height: 1;
}
.gallery article h2{	text-indent: 1em;margin-left: -1.1em;}

.home.title h1{
	font-size: 2em;
	line-height: 1;
	font-family:BrandonGrotesque;
	text-transform: uppercase;
	font-weight:normal;
}

.home.title h2{
	font-family: PrestigeElite;
	font-weight:normal;
	text-transform: none;
}


p{
/*	font-size:0.8em;*/
	padding-bottom:1.6em;
}


/* Layout */


main{

}

.padded{padding:2em 0;}

.click_here{
	  position: absolute;
    top: 2.5rem;
    right: 0.5rem;
    width: 100px;

    opacity:0;
    animation: 4s fade-away;
}

@keyframes fade-away{
	0%{opacity:0;}
	1%{opacity:1;}
	97%{opacity:1;}
	100%{opacity:0;}
}

.home.title{
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);

	text-align: center;
}

.gallery{
	display:grid;
	grid-auto-flow: column;
	grid-auto-columns:100%;

	height: 100vh;
	align-items:center;

	overflow-x: auto;
	scroll-snap-type: x mandatory;

}
.home.gallery{line-height:0;}

.gallery::scroll-button(*){
	position:absolute;
	top: 50%;
	translate:transformY(-50%);

	cursor: pointer;

	background-color:transparent;
	color:var(--shadow);
	border:0;
	font-size:1.2rem;

	opacity:1;
	transition: opacity 0.5s ease-in;
}
.dark .gallery::scroll-button(*){color:white;}

.gallery::scroll-button(left){content: '〈';left: 1rem;}
.gallery::scroll-button(right){content: '〉';right: 1rem;}
.gallery::scroll-button(*):disabled {opacity: 0.2;cursor: unset;}

.gallery figure, .gallery article{scroll-snap-align: center;}

figure{
	display:grid;
	max-width:80%;
	margin: 0 auto;
	grid-template-columns:auto;
	grid-template-rows:1fr auto;
	gap:1em;
}

.home figure{
	display:block;
	width:100%;
	max-width:100%;
	height:100vh;
	margin: auto;
}

.one{grid-template-columns:auto;}
.two{grid-template-columns:auto auto;}
.two figcaption{grid-column-end: span 2;}
.three{grid-template-columns:auto auto auto;}
.three figcaption{grid-column-end: span 3;}
.four{grid-template-columns:auto auto auto auto;}
.four figcaption{grid-column-end: span 4;}

figure img{align-self:center;justify-self:center;height:46vw; }/*49 border: 3px solid var(--shadow);*/
.home figure img{width:100%; height:100vh; object-fit:cover;}

.wide img{height:32vw;}/*36*/
.wider img{height:24vw;}/*27*/
.widest img{height:22vw;}/*24*/
.widestplus img {height: 17vw;}

figcaption{
	opacity:1;

	align-self:end;
	justify-self:end;


	font-size: 0.5em;
	line-height:1;

	transition: opacity 0.5s ease-in;
}

ol li{list-style-type: lower-roman;text-align:right;padding-left:1rem;}

.gallery article{
	position:relative;
	max-height:80vh;
	overflow-x:scroll;

	-ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */

	display:grid;
	justify-items:start;

	padding:1em;
}
.gallery article::-webkit-scrollbar {display: none;}

.gallery div{
	max-width:69ch;
	margin: 0 auto;
}

.gallery article iframe{
	width: 100%;
	height: 60vh;
}

/*TODO: figure out how this works*/
/*article:before{
	  content:'';
	  position:fixed;
	  z-index:1;
	  top:0;
	  height:2em;
	  width:100%;

	  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
	  background-image: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
}
article:after{
	  content:'';
	  position:fixed;
	  z-index:1;
	  bottom:0;
	  height:2em;
	  width:100%;

	  background-image: -webkit-linear-gradient(transparent, var(--light));
	  background-image: linear-gradient(transparent, var(--light));
}*/

dl{display:grid;grid-template-columns:auto 1fr;justify-items:start;gap: 0.5em 1em;}

.me{
	width:100%;
	aspect-ratio: 1/1;
	object-fit: cover;
	object-position: center bottom;
}

.about{
	display:grid;
	grid-auto-flow: row;
	align-items:center;

	overlow-y:auto;
	scroll-snap-type: y mandatory;
}

.about section{
 	max-width:min(69ch, calc(100% - 4rem));
 	padding:3rem 3rem 3rem 1rem;
 	scroll-snap-align: center;

 }

.client-list ul{list-style:none;}
.client-list ul li{display:inline-block;}
.client-list ul li:after{content:',';padding-right:0.1em;}









/* begin navigation */
header{position:absolute;width:100%;padding:1rem;text-align:right;}
#show_nav{ opacity:0; height: 0;width: 0; }
header .quick-nav{
  position: fixed;
  top: 1rem;
  right: 1rem;
}
.quick-nav {z-index:69;}
header label{display:inline-block;}


nav{
	position:fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;

	overflow-y: auto;

	display:grid;
	grid-template-rows:1fr auto 1fr;

	z-index:42;
	width:100vw;
	height:100vh;

	text-align:left;

	background-color:var(--light);
	color:var(--shadow);

	opacity: 0;
	transform: translateY(-100%);
	transition: opacity 500ms ease-in,
							transform 500ms ease-in;
}
nav > *{padding:1rem;}

nav header{
	position:relative;
	display:grid;
	grid-template-rows:auto 1fr;
	justify-items:start;
	align-items:end;
	padding:0.75rem 3rem 0 1rem;
}

nav h1{font-family:BrandonGrotesque;font-size: 1.5em;text-transform: uppercase;font-weight:normal;}

nav a, .dark nav a{color: var(--shadow);}
#show_nav:checked ~ .quick-nav label{color:var(--shadow);}
#show_nav:checked ~ .quick-nav .back{color:var(--shadow);}
#show_nav:checked ~ nav{transform: translateY(0);opacity:1;}


nav > a{align-self:start;}
nav p{align-self:end;font-size:0.6rem;}

nav ul{list-style:none;}
nav ul li{padding-bottom:1em;}
nav ul li ul{
	width:calc(100vw - 2em);
	white-space: nowrap;
	overflow-x:scroll;

	-ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
nav ul li ul::-webkit-scrollbar {display: none;}

nav ul li ul li{display:inline-block;}
nav img{max-height:20vh;}

/* end navigation */
/* end layout style*/





/* AUCTION */
  .lot{padding:3rem 0 0 0;}
  .lot figure{max-width:100%;}
  .lot figure img{height:auto;width:100%;padding-bottom:3rem;}
  .lot article{width:80%;padding:0 2em; margin:0 auto;}
  .lot article h2{padding-bottom:0;}
  .auction{width:80%;margin:0 auto;}
  .auction .sold{
  	display:grid;
  	
  }
  .auction .sold span{
  	border-radius: 50%;
  	background-color:red;
  	
  	justify-self: right;
  	align-content:center;
		text-align: center;
		aspect-ratio: 1/1;
		position: relative;
		width:140px;
		height:140px;
		
		font-size: 1.5em;
  }
  form{
  	display:grid;
  	gap:1em;
    background-color: rgb(214, 222, 51);
    padding: 2em;
  
    border-radius: 3px;
  }
  
  form input, textarea{
    font-family: PrestigeElite, monospace;
  
    font-size: 1em;
  }
  
  form input:focus, textarea:focus{
    background-color: rgba(102, 160, 175, 1);
    color:rgb(246, 239, 255);
  }
  
  form input:focus::placeholder , textarea:focus::placeholder,
  form input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder,
  form input:focus:-moz-placeholder, textarea:focus:-moz-placeholder,
  form input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder {
    color:rgb(246, 239, 255);
  }
  
  
  form [type="text"], form [type="email"], form [type="number"], textarea{
    display: block;
    border-radius: 3px;
    padding:1em;
    width:100%;
  
  
    border:0;
    background-color: rgb(246, 239, 255);
    color:rgb(66, 72, 82);
  
  }
  form [type="text"]:focus, form [type="email"]:focus, form textarea:focus{
    outline: none;
  }
  
  
  form div{
    font-size:1rem;
    display:grid;
    grid-template-rows: auto auto;
    gap: 1em;
    
    align-items:center;
  }
  form div.submit-wrapper{grid-template-columns:1fr;padding-top:2em;}

  form div.address{grid-template-rows: 1fr 1fr; gap:0.5em;}
  form input, form output {
    text-align: right;
    padding: 1em;
	}
	
	#highest, #bid{text-align: left;}
	#highest{padding: 0 0 1em 0;}
	
	/* Chrome, Safari, Edge, Opera */
	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
	  -webkit-appearance: none;
	  margin: 0;
	}
	
	/* Firefox */
	input[type=number] {
	  -moz-appearance: textfield;
	}
	
	
	
	#highest::after, #bid::after{
		display: inline-block;
		content: "CHF";
		padding-left: 0.25em;
	}
	
  .align-right{display:block;text-align: center;}
  
  form [type="submit"]{
  	justify-self:center;
  
  	text-align:center;
  
    aspect-ratio: 1/1;
    position: relative;
    background-color: rgb(233, 142, 46);
    color:rgb(66, 72, 82);
  
    font-size: 1.5em;
  
    z-index:10;
  
    border-radius: 50%;
    border: 0;
    padding: 1rem;
  
		width: 140px;
  }
  
  
  form [type="submit"]:after{
  	content:' ';
  	clear:both;
  }
  
  form [type="submit"]:focus, form [type="submit"]n:hover{
    background-color: rgba(102, 160, 175, 1);
    color:rgb(246, 239, 255);
    outline: none;
  }
  
  
  
  label{
    display:flex;
    align-items: baseline;
  
    gap:0.5em;
  }
  
  
  hr {
    margin: 3rem 0;
    border: 1px dashed rgb(233, 142, 46);
  }
  
/* AUCTION END */





@media screen and (min-width: 600px){
	form div.address{
		grid-template-rows:none;
		grid-template-columns: 1fr 2fr;
	}

	/* Auction */
  form div{
		grid-template-rows:none;
    grid-template-columns: 1fr 1fr;
    
    align-items:center;
  }
  
  #highest, #bid{padding: 1em;text-align: right;}
	

}



/* wide specials */
@media screen and (min-width: 945px){
	html{font-size: 21px;}
	.gallery::scroll-button(*),.gallery::scroll-button(*):disabled{opacity:0;}
	.gallery:hover::scroll-button(*){opacity:1;}
	.gallery:hover::scroll-button(*):disabled {opacity: 0.2;}



	article{padding-left:calc((100% - 69ch)/2);padding-right:calc((100% - 69ch)/2);}
	figcaption{opacity:0;}

	.gallery:hover figcaption{opacity:1;}

	.me{
		position: sticky;
		top: 0;
  	left: 0;

		max-width:50vw;
		height:100vh;

  	align-self: start;
	}

	.about{
		display:grid;
		grid-auto-flow: row;
		grid-auto-rows:100vh;
		align-items:center;
		overflow-y:auto;
		scroll-snap-type: y mandatory;

	}
	.about section{padding:0 3rem 0 0;max-width:69ch;}
	dl{gap: 1em 2em;}



	/* navigation */
	nav header{
		position:relative;
		display:grid;
		grid-template-columns:auto 1fr;
		justify-items:start;
		align-items:end;
		padding:0.75rem 3rem 0 1rem;
	}
	nav header div{justify-self:end;padding-bottom:0.2em;}

}

/* zeke the freak was here */