/* HEADER */

.header-logo {
	top: -7px;
	left: -14px;
}
.header-sig {
	display: none;
}


/* MATTE */

#matte {
	margin-top: -6px;
}
#footer {
	padding-top: 40px;
}


/* WALL */

.wall {
	position: relative;
	text-align: center;
	color: var(--brown_text_mid);
	background: var(--brown_gallery_bg) var(--brown_gallery_bg_img);
	padding: 0;
	border-style: solid; 
	border-width: 2px;
	border-radius: 5px;
	border-color: var(--brown_gallery_bevel_light);
	box-shadow: 0px 0px 3px 3px var(--brown_info_bevel_dark) inset;
}
@media only screen and (max-width: 440px) {
	.wall {
		min-height: calc(100% - 160px);
	}
	@supports (-moz-appearance:none) {
	    .wall-content { min-height: calc(100vh - 180px); } 
	}
}
.wall-content {
	padding-top: 10%;
}


/* SIG */

.text-block {
	margin: 0;
}
.sig-block {
	width: 68vw;
	margin: 0 auto;
}
.sig-block h3 {
	color: #7e6161;
}
.sig-image {
	position: relative; 
	top: 16px;
	width: 100%;
	margin-top: -16px;
	z-index: 1;
}


/* SPLASH */

.splash-block {
	position: absolute; 
	top: calc(10% + 15vw);
	left: 0;
	right:  0;
	width: 74vw;
	aspect-ratio: 1;
	margin: 0 auto .8em auto;
	overflow: hidden;
	border: 1px solid var(--brown_gallery_item_bevel_light);
	box-shadow: 0px 0px 1px 2px var(--brown_gallery_item_bevel_light);
	border-radius: 8px;
}
.splash-image {
	width: 100%;
	height: 100%;
	border-radius: 7px;
}


/* NAV */

.nav-block {
	position: relative; 
	display: block;
	margin: 0 auto;
	margin-top: calc(74vw + 1em);
	width: 100%;
}
.nav-block ul {
	list-style: none;
	margin: .1em auto;
}
.nav-block ul li {
	display: inline;
	line-height: 1.4em;
}
.nav-block ul li a {
	text-decoration: none;
	font-size: 1.2em;
	font-weight: 600;
	color: #8b6e6c;
}
.nav-block ul:last-child a {
	color: var(--brown_text_dark);
	font-size: 1em;
	font-weight: 400;
	line-height: 3em;
}


/* Hover */
.nav-block ul li a:hover,
.sig-block:hover + .nav-block .inline-list:first-child li a,
.splash-block:hover + .text-block .nav-block .inline-list:first-child li a {
	color: var(--brown_text_lightest);
	text-shadow: 1px 1px 2px var(--brown_gallery_shadow);
}
.splash-block:hover,
.wall-content:has(.nav-block .inline-list:first-child li a:hover) .splash-block,
.wall-content:has(.sig-block:hover) .splash-block {
	border-color: var(--brown_text_lightest);
}


/* CONDITIONAL SEPARATORS */
/* https://codepen.io/chriskirknielsen/pen/KKVryZB */

.inline-list {
	padding: 0;
}
.inline-list > li {
	display: inline;
	padding-left: .4em;
}
.inline-list > li::after {
	content: ' ';
	letter-spacing: 0;
	background: linear-gradient(90deg, transparent calc(50% - 0.03125em), currentColor 0, currentColor calc(50% + 0.03125em), transparent 0);
	color: var(--brown_text_shadow);
	margin-left: .4em;
}


/* Vertical condensed */
@media only screen and (max-height: 480px) and (max-width: 440px) {
	.wall-content {
		padding-top: 3%;
	}
	.splash-block {
		top: calc(3% + 18vw);
		width: 64vw;
	}
	.sig-block h3 {
		font-size: 1em;
	}
	.sig-image {
		position: relative; 
		top: 16px;
		margin-top: -16px;
		width: 60vw;
	}
	.nav-block {
		margin-top: calc(64vw + .75em);
	}
	.nav-block ul li a {
		font-size: 1em;
	}
	.nav-block ul li {
		line-height: 1em;
	}
}


/* DESKTOP */
@media only screen and (min-width: 440px) and (min-height: 400px) {

	/* INDEX MENU on DESKTOP */

	#menu-button-toggle:checked ~ .menu-box {
		width: 11em;
		height: 19em;
		padding-bottom: 6px;
		padding-left: 6px;
	}
	.menu-box ul {
		width: 7.5em;
	}
	.menu-item {	
		font-size: 1em;
		height: 1em;
	}
	.menu-box li:hover .arrow, 
	.menu-box .selected .arrow {
		border: .5em solid black;
		border-color: transparent transparent var(--blue_text_mid) var(--blue_text_mid);
		left:  -.5em;
		margin-top: 1.6em;
	}
	.menu-item:hover, 
	.selected .menu-item {
		font-size: 1.05em;
		margin-top: -.048em;
	}

	
	/* INDEX CONTENT on DESKTOP */

	#content {
		padding: calc(46px + 14px) 3% 32px 3%;
		min-height: calc(100% - 9em - 32px);
	}
	#matte {
		width: calc(100% - 44px);
		margin: 0 20px;
		box-shadow: 0px 0px 8px 2px var(--brown_content_shadow) inset;
		padding:0;
		border-width: 2px;
		border-radius: 4px;
	}
	.wall-content {
		padding-top: 0;
		padding-bottom: calc(96vh - 5em - 520px);
	}
	.sig-block {
		margin-top: 4vh;
		width: 16em;
	}
	.splash-block {
		width: 200px;
		top: calc(4vh + 4em + 14px);
	}
	.nav-block {
		margin-top: calc(200px + 1em);
	}
}


/* DESKTOP LARGE */
@media only screen and (min-width: 600px) and (min-height: 800px) {
	.wall-content {
		padding-bottom: calc(96vh - 6em - 720px);
	}
	.sig-block {
		margin-top: 4vh;
		width: 25em;
	}
	.splash-block {
		width: 320px;
		top: calc(4vh + 6em + 14px);
	}
	.nav-block {
		margin-top: calc(320px + .5em);
	}
	.nav-block ul li {
		line-height: 1.4em;
	}
	.nav-block ul li a {
		font-size: 1.3em;
		font-weight: 600;
	}
	.nav-block ul:last-child li a {
		font-size: 1.2em;
	}
}


/* Horizontal */
@media only screen and (min-width: 440px) and (max-height: 400px) {

	#content {
		padding: calc(46px + 32px) 3% 32px 3%;
		height: calc(100% - 160px);
		min-height: 200px;
	}
	@supports (-moz-appearance:none) {
	    #content { height: calc(100vh - 160px); } 
	}
	#matte {
		width: calc(100% - 44px);
		margin: 0 20px;
		box-shadow: 0px 0px 8px 2px var(--brown_content_shadow) inset;
		padding: 0;
		border-width: 2px;
		border-radius: 4px;
	}
	.wall {
		display: flex;
		align-items: center;
		width: calc(240px + 21em);
		margin: -20px auto -15px auto;
		border-radius: 12px;
	}
	.wall-content {
		display: flex;
		flex-direction: row;
		justify-content: start;
		align-items: center;
		padding: 0;
		margin: 0;
	}
	.splash-block {
		position: static;
		overflow: hidden;
		width: 200px;
		height: 200px;
		padding: 0;
		margin: 10px;
	}
	.splash-block, .splash-image {
		border-radius: 5px;
		transition-duration: .2s;
	}
	.text-block {
		text-align: left;
		margin-top: 10px;
		margin-left: 0;
		margin-bottom: 0;
	}
	.sig-block {
		margin: 0;
		width: 16em;
	}
	.nav-block {
		margin-top: 1.2em;
	}
}


/* Horizontal condensed */
@media only screen and (min-width: 440px) and (max-width: 660px) and (max-height: 400px) {

	#content {
		min-height: 160px;
	}
	.wall {
		width: calc(240px + 13em);
	}
	.splash-block {
		width: 160px;
		height: 160px;
	}
	.sig-block h3 {
		font-size: 1em;
		font-weight: 600;
	}
	.sig-block {
		width: 14em;
	}
	.nav-block {
		margin-top: 1em;
	}
	.nav-block ul {
		margin: 0 auto;
	}
	.nav-block ul li {
		line-height: 1em;
	}
	.nav-block ul li a {
		font-size: .9em;
	}
	.nav-block ul:last-child li a {
		font-size: .8em;
	}
	.nav-block ul li:not(:last-child):after {
		font-size: .6em;
		content: '|';
		margin-left: .5em;
		margin-right: 0;
	}
	.inline-list > li {
		padding: 0;
	}
}


/* Horizontal ultra condensed */
@media only screen and (min-width: 440px) and (max-width: 540px) and (max-height: 400px) {

	#content {
		min-height: 130px;
	}
	.wall {
		width: calc(240px + 9em);
	}
	.splash-block {
		width: 74vw;
		width: 135px;
		height: 135px;
	}
	.sig-block h3 {
		font-size: .8em;
		font-weight: 600;
	}
	.sig-block {
		width: 11em;
	}
	.nav-block {
		margin-top: 1em;
	}
	.nav-block ul li {
		font-weight: 600;
		line-height: .6em;
	}
	.nav-block ul li a {
		font-size: .75em;
	}
	.nav-block ul:last-child li a {
		font-size: .7em;
	}
}


/* Remove side matte */
@media only screen and (min-width: 440px) and (max-width: 470px) {
	#matte {
		margin: 0;
		padding: 0;
		border: 0;
		width: 100%;
	}
}


/* Transition 	*/
.wall, .text-block, .splash-block, .sig-block  {
	transition-duration: .2s;
}
.splash-block {
	transition: border-color 0s;
}
#matte, #content, .wall-content, .footer, .nav-block, .nav-block ul li {
	transition-duration: 0;
}	


/* END */