* {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI';
	font-size: clamp(16px, 1.2vw, 28px);
	text-decoration: none;
	margin: 0;
	padding: 0;
	box-sizing:border-box;
	color:var(--dk-text);
}

html {scrollbar-gutter: stable;}

body {
	background: var(--accent);
	display: grid;
	/*! grid-template-rows: auto 300px; */
	overflow-x: hidden;
}

header {
	/* position: sticky;
	top: 0;
	/*! height: 100vh; */
	padding:25px 50px;
	display:flex;
	justify-content: space-between;
	align-items:center;
	/*! height: 30vh; */
	background-color: var(--accent);
	z-index: 4;
	flex-direction: row;
	grid-row: 1/2;
}

header object {
	width: 192px;
	pointer-events:none;
}

header hgroup * {
	font-size: 16px;
	font-weight: 400;
	color: #ffffff;
}

.credits {
	padding-bottom: 3px;
	/* border-bottom: 2.5px solid #94F2FF; */
}

.credits:hover {
	font-weight: bold;
}
.credits:hover::after {
	content: ' ‣‣‣';
}

main {
	/*! margin-left:max(300px, 25vw); */
	padding: 50px;
	grid-row: 2/3;
	/* background-color: #EAF5FC; */
}

.table {
	margin: 0 auto 33vh;
	width: max(45%, 50ch);
	/* display: flex; */
	/* flex-direction: column; */
	background-color: #ffffff;
	z-index:2;
	box-shadow: 0px 2px 9px -5px var(--side-material);
}

.news::after, .news:hover::after {
	content: 'NEW!';
	font-size: smaller;
	position: relative;
	left:1ch;
	padding: 0 8px 1px;
    background: #efc143;
	text-decoration:none !important;
	/* box-shadow: 1px 2px 4px rgb(0 0 0 / 0.4); */
}

.text::after {
	content: 'text only';
	font-feature-settings: 'smcp';
	margin-left:1ch;
	padding: 0 8px 2px;
    background: #efdb43;
	text-align: text-top;
    border-radius: 4px;
}
.soon::after {
	content: 'soon';
	font-feature-settings: 'smcp';
	margin-left:1ch;
	padding: 0 8px 2px;
    background: #bda6ed;
	text-align: text-top;
    border-radius: 4px;
}

span + span {
	padding-top: 3px;
}

.author {
	/*! width: 50%; */
	padding:10px 15px;
	/* border-bottom: 1px solid #000; */
	/* display:; */
	/* justify-content: space-between; */
}

.name {
	display: block;
	/* font-feature-variant: 'c2sc','smcp'; */
	font-weight: bold;
	font-size: 120%;
	/* padding-top:1px; */
	/* padding-bottom:5px; */
}
.dates {
	display: block;
	font-size: 80%;
	color:rgba(0,0,0, 0.6);
}

.works {
	padding: 15px;
	display: block;
}

.attrib {
	color: rgba(0, 0, 0, 0.75) !important;
	display: inline-block;
}

.item{
	padding: 10px 10px 25px 10px;
	display:grid;
	grid-template-columns: 25ch auto;
}

.works a{
	display: block;
	/* padding: 10px; */
	border-radius: 3px;
	font-weight: bold;
	color: #000;
	/* background-color: #2d9de223; */
	text-decoration: none;
	width:fit-content;
}

.works a:not(:last-of-type) {margin-bottom:15px;}
/* .works a:not(:last-of-type)::after {content: ' · '} */

.table a:hover{
	cursor: pointer;
	text-decoration: underline;
	text-decoration-color: var(--highlight);
	text-decoration-thickness: 2.5px;
	text-underline-offset: 3.5px;
	text-decoration-skip-ink: none;
}

.item:hover {
/* 	box-shadow: 0px 5px 20px rgba(6, 8, 21, 0.4); */
/* 	outline: 10px solid var(--highlight); */
/* 	outline-offset:-2px; */
	background-color: #f9f8f7;
}

.coming, .coming * {
	color: rgba(0, 0, 0, 0.15);
	/* pointer-events:none; */
	display:none !important;
}

.hidden {
	display: none !important;
	border-top:0px solid #fff;
}

.item:not(.hidden):not(.coming) ~ .item {border-top:.5px solid #c0bdbb;}

.filter {
	display:grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 15px;
	margin: 0 auto 25px;
	width: max(45%, 50ch);
	padding:0 25px;
}

.filter-btn {
	background-color: #FFFFFF70;
	padding:8px;
	border: none;
	font-size:80%;
	border-radius:5px;
}

.filter-btn:hover,.filter-on {
	background-color: #fff;
	box-shadow:0px 5px 10px #0c073441;
	cursor:pointer;
}
.filter-on {
	font-weight:bold;
}

#no-results {color: rgba(0,0,0, 0.6); text-align:center; padding: 20px}

@media screen and (max-width:800px){
	body {
		width:100%;
		display:flex;
		flex-direction:column;
	}
	header {
		margin-bottom: 0;
		height: auto;
		z-index: 4;
		padding: 40px 0;
		display: flex;
		position: relative;
		width: 100vw;
	}
	header object{
		padding: 0 25px;
		margin:0;
}
	header hgroup {display: none;}
	main {
		width: 100vw;
		margin: 0 0 75px 0;
	}
	.table {
		margin: 0;
		width:100%;
	}
	.table div.header {display:none}
	.item {
		display:flex;
		flex-direction: column;
		border-color: #000;
	}
	.filter {
		margin: 0 auto 25px;
		width: 75vw;
		padding:0 25px;
		display:flex;
		flex-wrap:wrap;
		justify-content:center;
		/* grid-template-columns: repeat(auto-fit,minmax(10ch,1fr)); */
	}
	.filter-btn {
	}
}