.work-register-workspace,
.work-register-workspace button,
.work-register-workspace input {
	font-family: "franklin-gothic-urw", sans-serif;
	font-weight: 400;
	text-transform: lowercase;
}

.work-register-workspace {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 1vw;
	min-height: 100vh;
	border-bottom: 2px solid black;
	box-sizing: border-box;
	align-items: start;
}

.work-register-sidebar {
	position: sticky;
	top: 0;
	grid-column: 1 / span 2;
	grid-row: 1;
	height: 100vh;
	padding: 0 0 1vh;
	box-sizing: border-box;
	overflow: hidden;
}

.work-register-sidebar > h3 {
	height: var(--section-heading-block-height);
	margin: 0;
	padding: var(--heading-inset) 0;
	box-sizing: border-box;
	font-size: var(--section-heading-size);
	font-weight: normal;
	line-height: var(--section-heading-line-height);
	letter-spacing: var(--section-heading-letter-spacing);
}

.work-register-column {
	grid-column: 3 / span 10;
	grid-row: 1;
	min-height: 100vh;
	box-sizing: border-box;
}

.work-filter-section {
	display: grid;
	grid-template-columns: 40% 60%;
	padding-top: 1.6vh;
	font-size: .9vw;
	line-height: 1.15vw;
}

.work-filter-section + .work-filter-section { padding-top: 2.2vh; }
.work-filter-section h4,
.work-filter-section label { margin: 0; font: inherit; letter-spacing: 0; }
.work-filter-section h4 { grid-column: 1; }
.work-filter-options { grid-column: 2; }

.work-filter-option {
	grid-column: 2;
	display: grid;
	grid-template-columns: 1.3vw minmax(0, 1fr) auto;
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.work-filter-option.has-box::before {
	content: "";
	width: .72vw;
	height: .72vw;
	margin-top: .12vw;
	border: 1px solid black;
	border-radius: .16vw;
	background: transparent;
	transition: background-color .2s ease;
}

.work-filter-option.has-box:hover::before,
.work-filter-option.has-box.active::before { background: black; }
.work-filter-option .filter-name { grid-column: 2; }
.work-filter-option:hover .filter-name,
.work-filter-option.active .filter-name { text-decoration: underline 1px; text-underline-offset: .12em; }
.work-filter-count { grid-column: 3; justify-self: end; }

.work-filter-search {
	padding-top: 1.5vh;
	padding-bottom: 1.2vh;
	border-top: 2px solid black;
	align-items: center;
}

.work-filter-search label { grid-column: 1; }
.work-search-control {
	position: relative;
	grid-column: 2;
	display: grid;
	align-items: center;
	margin-left: 1.3vw;
	border-bottom: 1px solid black;
}

.work-search-control input {
	width: 100%;
	height: 2.1vh;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	font: inherit;
	outline: none;
}

.work-search-control input::-webkit-search-cancel-button { appearance: none; }
.work-search-icon {
	position: absolute;
	left: -1.3vw;
	width: .6vw;
	height: .6vw;
	border: 1px solid black;
	border-radius: 50%;
}

.work-search-icon::after {
	content: "";
	position: absolute;
	width: .34vw;
	height: 1px;
	right: -.27vw;
	bottom: 0;
	background: black;
	transform: rotate(45deg);
	transform-origin: left center;
}

.work-sort-group { grid-column: 1 / -1; display: grid; grid-template-columns: 40% 60%; }
.work-sort-group h4 { grid-column: 1; }
.work-sort-group .work-filter-option { grid-column: 2; }

.work-register-heading {
	position: sticky;
	top: 0;
	z-index: 2;
	background-color: var(--active-page-color, hsla(0,0%,95%,1));
	transition: background-color 1s ease;
}

.work-register-heading .panel-content {
	height: var(--section-heading-block-height);
	padding: var(--heading-inset) 0;
	grid-template-columns: repeat(10, minmax(0, 1fr));
	box-sizing: border-box;
}

.work-register-heading .year {
	margin: 0;
	font-size: var(--section-heading-size);
	font-weight: normal;
	line-height: var(--section-heading-line-height);
	letter-spacing: var(--section-heading-letter-spacing);
}

.work-sort-heading {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(10, minmax(0, 1fr));
	gap: 1vw;
}

.work-sort-heading .year { white-space: nowrap; }
.work-sort-heading[data-sort-kind="dimensions"] .work-sort-field { grid-column: 1 / span 2; }
.work-sort-heading[data-sort-kind="dimensions"] .work-sort-direction { grid-column: 3 / span 2; }
.work-sort-heading[data-sort-kind="price"] .work-sort-field { grid-column: 1; }
.work-sort-heading[data-sort-kind="price"] .work-sort-direction { grid-column: 2 / span 2; }

.work-register-column > .work-year-group > .panel[hidden],
.work-register-column .panel[hidden],
.work-year-group[hidden],
.work-sorted-results[hidden] { display: none; }

.work-register-column .panel-content {
	grid-template-columns: repeat(10, minmax(0, 1fr));
	box-sizing: border-box;
}

.work-register-column .gallery { grid-column: 1 / span 5; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.work-register-column .gallery .imgBox { grid-column: 2 / span 3; }
.work-register-column .gallery-horizontal { grid-column: 1 / span 7; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.work-register-column .gallery-horizontal .imgBox-horizontal { grid-column: 2 / span 5; }
.work-register-column .info-wrapper { grid-column: 6 / span 3; }
.work-register-column .gallery-horizontal + .info-wrapper { grid-column: 8 / span 3; }
.work-register-column .info-wrapper .info-element { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1vw; }
.work-register-column .info-wrapper .info-element p,
.work-register-column .info-wrapper .info-element .sales-button { grid-column: 2 / -1; }
.work-register-column .info-wrapper,
.work-register-column .info-element,
.work-register-column .info-element p { min-width: 0; }
.work-register-column .info-element p { overflow-wrap: anywhere; }
.work-register-column .panel.is-last-visible .panel-content { border-bottom: 0; }
.work-register-workspace ~ .top,
.work-register-workspace ~ .bottom,
.top,
.bottom { z-index: 10; }

body.color-grey { --active-page-color: hsla(0,0%,95%,1); }
body.color-red { --active-page-color: hsla(348,12%,95%,1); }
body.color-orange { --active-page-color: hsla(20,12%,95%,1); }
body.color-yelloworange { --active-page-color: hsla(40,12%,95%,1); }
body.color-yellow { --active-page-color: hsla(60,10%,95%,1); }
body.color-magenta { --active-page-color: hsla(285,10%,95%,1); }
body.color-violet { --active-page-color: hsla(255,10%,95%,1); }
body.color-blueviolet { --active-page-color: hsla(225,10%,95%,1); }
body.color-blue { --active-page-color: hsla(216,12%,95%,1); }
body.color-cyan { --active-page-color: hsla(195,11%,95%,1); }
body.color-teal { --active-page-color: hsla(176,11%,95%,1); }
body.color-green { --active-page-color: hsla(135,10%,95%,1); }
body.color-yellowgreen { --active-page-color: hsla(90,10%,95%,1); }

@media (max-width: 700px) {
	.work-register-workspace { display: block; min-height: 0; }
	.work-register-sidebar { position: static; height: auto; overflow: visible; }
	.work-register-sidebar > h3 { height: auto; margin-bottom: 8vw; font-size: 9vw; }
	.work-register-column { min-height: 0; }
	.work-register-heading { position: static; }
	.work-filter-section { font-size: 3.5vw; line-height: 4.5vw; }
	.work-filter-option { grid-template-columns: 5vw minmax(0, 1fr) auto; }
	.work-filter-option.has-box::before { width: 3vw; height: 3vw; border-radius: .6vw; }
}