:root {
  --default-z-index: auto;
  --header-z-index: 1;
  --menu-z-index: 3;
  --control-z-index: 3;
  --modal-img-z-index: 2;
  --modal-z-index: 2;
  --modal-margin: var(--normal-spacing);
  --header-height: 2.5rem;
  --header-height-small: 2rem;
}
body {
  max-height: 100vh;
  padding: 0;
  margin: 0;
  margin-left: auto;
  margin-right: auto;
}
figure > img {
  display: block; /* gets rid of annoying space on the bottom */
}
/*
main [id]:not(.active) {
  display: none;
}
*/
.figures {
  justify-content: space-between;
}
/* 
.figures::after {
  content: "";
  flex: auto;
}
*/
.filter,
.search {
  font-size: 1em;
}
.filter input,
.search input {
  font-size: 1.25em
}
.results > .main,
.list > .main {
  columns: 18em auto;
}
.block.match {
  break-inside: avoid;
}
main > article {
  margin: 0;
  padding: var(--normal-spacing);
  padding-top: 0;
  padding-bottom: calc(var(--footer-height) + var(--normal-spacing));
}
main > article.active {
  display: block;
}
.page > .search {
  display: block;
}

.modal .icon svg {
  transform: scale(2);
  fill: transparent;
}
.modal.block {
  overflow: scroll;
  position: fixed;
  z-index: var(--modal-z-index);
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
/*   background-color: hsl(0deg 0% 0% / 75%); */
  left: var(--normal-spacing);
  right: var(--normal-spacing);
  bottom: var(--normal-spacing);
  top: var(--normal-spacing);
  width: auto;
  height: auto;
}
.modal article {
  background-color: var(--primary-color-light);
  -webkit-box-shadow: var(--box-shadow);
  box-shadow: var(--box-shadow);
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
  height: fit-content;
  padding: var(--normal-spacing);
}
.modal article header {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: var(--normal-spacing);
}
.modal > a:first-of-type {
  right: var(--normal-spacing);
  position: absolute;
  top: var(--normal-spacing);
}
.modal .icon {
  display: initial;
}
.modal .icon g .foreground {
  fill: var(--action-color);
}
.modal .icon g .background {
  fill: transparent;
}
.modal a figure g:hover .foreground {
  fill: var(--primary-color);
}
.modal figure.main img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  vertical-align: top;
}
/* modal - end */

/* lightbox - start */
#lightbox {
/*   width: 100vw;
  height: 100vw;
  max-width: 100vw;
  max-height: 100vh; */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
/* #lightbox nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: min-content auto min-content;
  z-index: var(--menu-z-index);
}
#lightbox nav .top {
  grid-row: 1 / 2;
  grid-column: 1 / 3;
}
#lightbox nav .left {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
}
#lightbox nav .right {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}
#lightbox nav .bottom {
  grid-row: 3 / 4;
  grid-column: 1 / 2;
} */
.modal > .icon,
#lightbox .icon {
  width: calc(var(--control-size) * 2);
  height: calc(var(--control-size) * 2);
}
#lightbox .icon svg {
  width: 100%;
  height: 100%;
}
#lightbox.xc {
  display: none;
}
#lightbox {
  z-index: var(--modal-z-index);
}
#lightbox a.previous {
  position: absolute;
  left: 0;
  top: 50vh;
  top: calc(50vh - var(--control-size) * 2);
}
#lightbox a.next {
  position: absolute;
  right: 0;
  top: 50vh;
  top: calc(50vh - var(--control-size) * 2);
}
#lightbox a.close {
  position: absolute;
  right: 0;
  top: 0;
}
#lightbox figure.main {
  margin: 0;
  text-align: center;
  height: 100vh;
}
#lightbox figure.main img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  max-height: calc(100vh - 2rem);
}
#lightbox figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 2rem;
  overflow-y: auto;
}
/* lightbox - stop */

.page > header {
  position: sticky;
  top: var(--header-height);
}
.page.gallery > * {
  grid-row: 1 / 2;
}
.page.gallery > aside,
.page.gallery > section {
  grid-row: 2 / 3;
}
.page.gallery > .main {
  grid-row: 3 / 4;
  margin-top: 1em;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 1em;
}
/*
.results > .main > article:not([data-k="1"]),
.gallery .filter p {
  color: red;
  font-style: italic;
}
.results > .main > article:not([data-k="1"]) > header > h2:after,
.gallery .filter p:before {
  content: " * ";
}
*/
#references > ul > li {
  margin-bottom: 1em;
}
/* gallery - end */

/* header - start */
#header,
#footer {
/*   width: 100vw; */
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  padding-left: 1em;
  padding-right: 1em;
  position: fixed;
}
#header .content,
#footer .content {
  align-items: center;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--page-width);
  justify-content: space-between;
}
#header {
/*   height: var(--header-height); */
  top: 0;
  z-index: var(--header-z-index);
  padding-left: 0;
}
#header .content {
  display: grid;
  grid-gap: var(--normal-spacing);
  grid-template-rows: min-content;
  grid-template-columns: min-content auto min-content min-content;
}
#footer {
/*   height: var(--footer-height); */
  bottom: 0;
  z-index: var(--footer-z-index);;
}
#footer .content {
  display: flex;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}
#header #product {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}
#header #menu {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}
@media only screen and (max-width: 480px) {
  #menu {
    opacity: 0;
  }
}
#drop {
  grid-row: 1 / 2;
  grid-column: 3 / 4;
}
#header .open.close {
  grid-row: 1 / 2;
  grid-column: 4 / 5;
/*   padding-right: 1em;
  margin-right: 1em;
 */}
/* header - end */

/* we want this to be last */
nav#drop {
  font-size: 1.25rem;
  position: absolute;
  top: 100%;
  right: 1em;
}
nav#drop.closed {
  display: none;
}
.xh {
  display: none !important;
}