@charset "utf-8";

html, body {
	height: 100%;
}

body {

font-family:"Hoefler Text";
font-size:13px;
background: #fff;
margin: 0;
overflow: hidden;
}

#mark {
	position: fixed;
	left: 26px;
	bottom: 20px;
	z-index: 100;
	display: block;
	width: 130px;
	line-height: 0;
	opacity: 0.9;
	transition: opacity 200ms;
}

#mark img {
	display: block;
	width: 100%;
	height: auto;
	border: 0;
}

#mark:hover,
#mark:focus-visible {
	opacity: 1;
}

#mark:focus-visible {
	outline: 1px solid #bfaf96;
	outline-offset: 6px;
}

#container h1,
#container h1 a {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: 0;
}


a:link {
color:#000;
text-decoration:none;

}

a:hover {
text-decoration:none;
color:#666;
}

#container {

	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: flex-start;
	gap: 13px;
	padding: max(40px, calc((100vh - 700px) / 2)) 60px 60px 190px;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	scrollbar-color: #ccc transparent;

}

#container::-webkit-scrollbar { height: 9px; }
#container::-webkit-scrollbar-track { background: transparent; }
#container::-webkit-scrollbar-thumb { background: #e0dcd4; border-radius: 5px; }
#container:hover::-webkit-scrollbar-thumb { background: #bfaf96; }

#container > * {
	flex: 0 0 auto;
}

#container img {

display: block;
border: 0;
max-height: calc(100vh - 130px);
width: auto;

}

.caption {

	margin-left: 100px;

}

a:visited,a:active {

text-decoration:none;
color:#333;

}

#progress {
	position: fixed;
	left: 0;
	bottom: 0;
	height: 2px;
	width: 0;
	background: #bfaf96;
	z-index: 50;
	pointer-events: none;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 900px) {

	html, body {
		height: auto;
		overflow: visible;
	}

	#container {
		position: static;
		display: block;
		padding: 16px 12px 40px;
		overflow: visible;
		text-align: center;
	}

	#container img {
		display: inline-block;
		max-width: 100%;
		max-height: none;
		height: auto;
		margin: 0 0 16px 0;
	}

	#mark {
		position: static;
		display: block;
		width: 130px;
		margin: 12px auto 26px;
		opacity: 1;
	}

	.caption {
		margin-left: 0;
		margin-top: 24px;
	}

	#progress {
		display: none;
	}

}

@media (prefers-reduced-motion: reduce) {
	#container {
		scroll-behavior: auto !important;
	}
}