/* MAIN */

:root {
	--textcolor:#ccc;
	--bgcolor:#333;
	--maxwidth:55em;
}
*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}
body{
	font-family: Liberation Mono, monospace;
	max-width: var(--maxwidth);
	margin: auto;
	color:var(--textcolor);
	background:var(--bgcolor);
	position:relative;
}
p{
	padding-bottom: 0.5em;
}
header{
	display:flex;
	font-weight: 300;
	padding: 0.5em 2em 1em 2em;
  	border-bottom: 1px solid #555;
	flex-wrap:wrap;
	width:100%;
}
.page{
	padding:6em 2em 6em 2em;
	top:0;
	min-height:50em;
	width:100%;
	background:var(--bgcolor);
}
.footer {
	padding: 0.5em 2em 1em 2em;
	bottom: 0;
  	border-top: 1px solid #555;
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	align-items:center;
	position: fixed;
	width: 100%;
	z-index:2;
	margin: auto;
	max-width: var(--maxwidth);
	background:var(--bgcolor);
}
.footer-mark{
	color:#aaa;
	justify-self:end;
	text-align:right;
}
.footer-contact,
.footer-mark{
	font-size:0.75em;
}
.footer-contact a{
	font-size:inherit;
}
header h1{
	line-height :0.75;
	margin-top: 0.25em;
}
header .brand{
	flex: 1;
	white-space:nowrap;
}
nav {
	margin: 1em 0em 0em 0em;
	white-space: nowrap;
}
nav a:not(:last-of-type){
	margin-right:1.5vw;
}
.section-prompt{
	color:#888;
}
.section-command [data-section-command]{
	display:none;
}
.section-command [data-section-command="home"]{
	display:inline;
}
body:has(#photos:target) .section-command [data-section-command="home"],
body:has(#projects:target) .section-command [data-section-command="home"]{
	display:none;
}
body:has(#photos:target) .section-command [data-section-command="photos"],
body:has(#projects:target) .section-command [data-section-command="projects"]{
	display:inline;
}
a {
	color: #5efa;
	text-decoration:none;
}
a:hover,.active-page {
	color:#afe5;
}

/* CSS SINGLEPAGE */
.page{
	display:none;
	position:absolute;
}
.page:target{
	display:block;
}
.page#home{
	display:block;
}
.landing main:has(.page:target) .page#home:not(:target){
	display:none;
}
header{
	position:absolute;
	z-index:2;
}

/* PROJECT */
ul.project{
	padding-top:1em;
}
ul.project li{
	display:flex;
	padding-bottom:4px;
	text-align: left;
}
ul.project li span.col1{
	width:8em;
	margin-right:1em; 
	text-align: right;
	flex-wrap:wrap;
}	
ul.project li span.col2{
	flex:1; 
	text-align: left;
	  border-top: 1px solid #555;
}
.project_link{
	margin: 0.25em;
	padding: 2px 8px 2px 8px; 
	float: left;
	border-bottom: 1px solid #555;
	background: #222;
	border-radius: 5px;
}
.project_linkr{
	margin: 0.25em;
	padding: 2px 8px 2px 8px; 
	float: right;
	border-bottom: 1px solid #555;
	background: #222;
	border-radius: 5px;
}

/* GALLERY */
.photo-page{
	padding-bottom:8em;
}
.photo-heading{
	display:flex;
	gap:2em;
	align-items:flex-start;
	justify-content:space-between;
	padding-bottom:1em;
	border-bottom:1px solid #555;
}
.photo-heading h2{
	margin-bottom:0;
	color:#eee;
	font-size:1.35em;
	font-weight:600;
	line-height:1.1;
}
.photo-heading p{
	padding:0;
	color:#909090;
}
.gallery {
	columns:3 14em;
	column-gap:0.55em;
	padding-top:1.25em;
}
.gallery_item {
	display:block;
	position:relative;
	width:100%;
	margin:0 0 0.55em;
	border:0;
	border-radius:10px;
	break-inside:avoid;
	overflow:hidden;
	line-height:0;
	background:#222;
}
.gallery_image {
	display:block;
	width:100%;
	height:auto;
	filter:grayscale(0) saturate(0.88);
	transition:filter 450ms ease, transform 300ms ease;
}
.gallery:hover .gallery_image{
	filter:grayscale(0.65) saturate(0.88);
}
.gallery:has(.gallery_item:focus-visible) .gallery_image{
	filter:grayscale(0.65) saturate(0.88);
}
.gallery_item::after{
	content:"";
	position:absolute;
	inset:45% 0 0;
	background:linear-gradient(transparent, rgba(0, 0, 0, 0.82));
	pointer-events:none;
}
.gallery_item:hover .gallery_image,
.gallery_item:focus-visible .gallery_image{
	filter:grayscale(0) saturate(1);
	transform:scale(1.15);
}
.gallery_item:focus-visible{
	outline:2px solid #5efa;
	outline-offset:2px;
}
.gallery_caption{
	display:block;
	position:absolute;
	left:0.7em;
	right:0.7em;
	bottom:0.65em;
	z-index:1;
	line-height:1.25;
}
.gallery_caption strong,
.gallery_caption small{
	display:block;
}
.gallery_caption strong{
	color:#eee;
	font-size:0.8em;
	font-style:normal;
	font-weight:500;
}
.gallery_caption strong:empty{
	display:none;
}
.gallery_caption small{
	margin-top:0.25em;
	color:#aaa;
	font-size:0.6em;
}
.gallery_caption strong:empty + small{
	margin-top:0;
}
/* PHOTO VIEWER */
.photo-viewer{
	width:min(94vw, 90rem);
	height:min(92vh, 60rem);
	max-width:none;
	max-height:none;
	margin:auto;
	padding:0;
	border:1px solid #555;
	border-radius:5px;
	color:var(--textcolor);
	background:#222;
	overflow:hidden;
}
.photo-viewer::backdrop{
	background:rgba(0, 0, 0, 0.84);
	backdrop-filter:blur(2px);
}
body:has(.photo-viewer[open]){
	overflow:hidden;
}
.photo-viewer-shell{
	display:grid;
	grid-template-columns:minmax(0, 1fr) minmax(18em, 21em);
	height:100%;
}
.photo-stage{
	position:relative;
	min-width:0;
	min-height:0;
	overflow:hidden;
	background:#151515;
	touch-action:pan-y;
}
.photo-progressive{
	display:grid;
	position:absolute;
	inset:0;
	place-items:center;
	padding:3.5em 4.5em;
}
.photo-preview,
.photo-full{
	grid-area:1 / 1;
	display:block;
	width:100%;
	height:100%;
	max-width:100%;
	max-height:100%;
	object-fit:contain;
}
.photo-preview{
	filter:blur(1.2px);
	transform:scale(1.004);
	opacity:1;
	transition:opacity 180ms ease;
}
.photo-full{
	opacity:0;
	transition:opacity 180ms ease;
}
.photo-viewer[data-load-state="ready"] .photo-preview{
	opacity:0;
}
.photo-viewer[data-load-state="ready"] .photo-full{
	opacity:1;
}
.photo-control,
.photo-close{
	border:1px solid #555;
	border-bottom-color:#777;
	border-radius:4px;
	color:var(--textcolor);
	font:inherit;
	background:rgba(34, 34, 34, 0.9);
	cursor:pointer;
}
.photo-control{
	display:grid;
	position:absolute;
	top:50%;
	z-index:2;
	place-items:center;
	width:2.5em;
	height:2.5em;
	padding:0;
	font-size:1.05em;
	font-weight:700;
	transform:translateY(-50%);
}
.photo-previous{
	left:1em;
}
.photo-next{
	right:1em;
}
.photo-control:hover,
.photo-close:hover{
	color:#afe5;
}
.photo-control:focus-visible,
.photo-close:focus-visible{
	outline:2px solid #5efa;
	outline-offset:2px;
}
.photo-load-state{
	position:absolute;
	z-index:2;
	padding:0.35em 0.55em;
	border:1px solid #444;
	border-radius:3px;
	color:#999;
	background:rgba(34, 34, 34, 0.88);
	font-size:0.68em;
}
.photo-load-state{
	top:1em;
	left:1em;
	display:grid;
	place-items:center;
	width:2em;
	height:2em;
	padding:0;
}
.photo-load-icon{
	display:block;
	width:0.7em;
	height:0.7em;
	border:1px solid #777;
	border-radius:50%;
	transition:border-color 120ms ease, background 120ms ease;
}
.photo-viewer[data-load-state="loading"] .photo-load-icon{
	border-color:#555;
	border-top-color:#5efa;
	animation:photo-load-spin 700ms linear infinite;
}
.photo-viewer[data-load-state="ready"] .photo-load-icon{
	border-color:#5efa;
	background:#5efa;
}
.photo-viewer[data-load-state="error"] .photo-load-icon{
	border-color:#e9b0b0;
	border-radius:0;
	transform:rotate(45deg);
}
.photo-info{
	display:flex;
	min-width:0;
	min-height:0;
	flex-direction:column;
	padding:1.25em;
	border-left:1px solid #555;
	overflow-y:auto;
	background:#292929;
}
.photo-info-head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding-bottom:1.2em;
	color:#888;
	font-size:0.75em;
}
.photo-close{
	display:grid;
	place-items:center;
	width:2.2em;
	height:2.2em;
	padding:0;
	font-size:1.05em;
}
.photo-title{
	padding-bottom:0.8em;
	color:#eee;
	font-size:1.25em;
	font-weight:500;
}
.photo-title[hidden]{
	display:none;
}
.photo-description{
	padding-bottom:0.9em;
	color:#aaa;
	font-size:0.78em;
	line-height:1.5;
}
.photo-description[hidden]{
	display:none;
}
.photo-specs{
	font-size:0.78em;
}
.photo-specs div{
	display:grid;
	grid-template-columns:7em minmax(0, 1fr);
	gap:1em;
	padding:0.65em 0;
	border-top:1px solid #444;
}
.photo-specs [hidden]{
	display:none;
}
.photo-specs dt{
	color:#888;
}
.photo-specs dd{
	min-width:0;
	color:#ccc;
	text-align:right;
	overflow-wrap:anywhere;
}
.visually-hidden{
	position:absolute !important;
	width:1px !important;
	height:1px !important;
	padding:0 !important;
	margin:-1px !important;
	overflow:hidden !important;
	clip:rect(0, 0, 0, 0) !important;
	white-space:nowrap !important;
	border:0 !important;
}

@keyframes photo-load-spin{
	to{
		transform:rotate(1turn);
	}
}

@media only screen and (max-width:760px){
	.photo-page{
		padding:7em 1em 7em;
	}
	.photo-heading{
		gap:1em;
	}
	.photo-heading h2{
		font-size:1.15em;
	}
	.gallery{
		columns:2 9em;
		column-gap:0.45em;
	}
	.gallery_item{
		margin-bottom:0.45em;
	}
	.gallery_caption{
		left:0.55em;
		right:0.55em;
		bottom:0.5em;
	}
	.gallery_caption small{
		display:none;
	}
	.photo-viewer{
		width:calc(100vw - 0.75em);
		height:calc(100dvh - 0.75em);
	}
	.photo-viewer-shell{
		grid-template-columns:1fr;
		grid-template-rows:minmax(17em, 58dvh) minmax(0, 1fr);
	}
	.photo-progressive{
		padding:3.5em 0.75em 4.5em;
	}
	.photo-control{
		top:auto;
		bottom:0.75em;
		transform:none;
	}
	.photo-previous{
		left:0.75em;
	}
	.photo-next{
		right:0.75em;
	}
	.photo-load-state{
		top:auto;
		bottom:0.85em;
		left:50%;
		transform:translateX(-50%);
	}
	.photo-info{
		padding:1em;
		border-top:1px solid #555;
		border-left:0;
	}
	.photo-info-head{
		padding-bottom:0.8em;
	}
	.photo-title{
		padding-bottom:0.6em;
	}
	.photo-specs div{
		padding:0.48em 0;
	}
}

@media only screen and (max-width:400px){
	.section-command{
		font-size:1.5em;
	}
}

@media (prefers-reduced-motion:reduce){
	.gallery_image,
	.photo-preview,
	.photo-full{
		transition:none;
	}
	.photo-viewer[data-load-state="loading"] .photo-load-icon{
		animation:none;
	}
}