*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  overflow-x:hidden;
  font-family:serif;
  background:#fff;
}

.header{
  padding:calc(var(--unit) * var(--size-nav-outer-margin));
  display:flex;
  justify-content:center;
}

.nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  column-gap:calc(var(--unit) * var(--size-nav-column-gap));
  row-gap:calc(var(--unit) * var(--size-nav-row-gap));
}

.nav button{
  border:0;
  background:none;
  color:#000;
  font-family: Baskerville, serif;
  font-weight: 400;
  font-size:calc(var(--unit) * var(--size-nav-font));
  letter-spacing:var(--text-letter-spacing);
  opacity:0.35;
  cursor:pointer;
}

.nav button.active{
  color:#000;
  opacity:1;
  text-decoration:underline;
  text-underline-offset:calc(var(--unit) * var(--size-nav-underline-offset));
}

.footer-right{
  position:fixed;
  right:calc(var(--unit) * var(--size-corner-text-inset));
  bottom:calc(var(--unit) * var(--size-corner-text-inset));
  z-index:10001;
  font-family:Arial, Helvetica, sans-serif;
  font-size:calc(var(--unit) * var(--size-small-text-font));
  line-height:var(--text-info-line-height);
  letter-spacing:var(--text-letter-spacing);
  color:#000;
  white-space:pre-line;
  pointer-events:none;
}

.grid{
  display:grid;
  column-gap:calc(var(--unit) * var(--size-grid-column-gap));
  row-gap:calc(var(--unit) * var(--size-grid-row-gap));
  padding:calc(var(--unit) * var(--size-grid-padding));
  grid-template-columns:repeat(auto-fill,minmax(calc(var(--unit) * var(--size-grid-min-column)),1fr));
}

.item{
  display:flex;
  flex-direction:column;
}

.item.expanded{
  position:fixed;
  inset:0;
  z-index:9999;
  background:#fff;
  cursor:pointer;
  display:flex;
  justify-content:center;
  align-items:center;
}

.media{
  position:relative;
  aspect-ratio:var(--ratio-media-width)/var(--ratio-media-height);
  overflow:hidden;
  display:flex;
  justify-content:center;
  align-items:center;
}

.item.expanded .media{
  width:var(--expanded-w);
  height:var(--expanded-h);
  aspect-ratio:auto;
}

.media img,
.media video,
.media iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

.media img,
.media video{
  object-fit:contain;
}

.item.expanded .media img,
.item.expanded .media video,
.item.expanded .media iframe{
  width:100%;
  height:100%;
  object-fit:contain;
}

.click-area{
  position:absolute;
  inset:0;
  z-index:2;
  cursor:pointer;
}

.label{
  margin-top:calc(var(--unit) * var(--size-label-margin-top));
  font-family:Arial, Helvetica, sans-serif;
  font-size:calc(var(--unit) * var(--size-small-text-font));
  line-height:var(--text-label-line-height);
  letter-spacing:var(--text-letter-spacing);
}

.item.expanded .label{
  display:none;
}

.expanded-info{
  position:fixed;
  left:calc(var(--unit) * var(--size-corner-text-inset));
  bottom:calc(var(--unit) * var(--size-corner-text-inset));
  z-index:10001;
  font-family:Arial, Helvetica, sans-serif;
  font-size:calc(var(--unit) * var(--size-small-text-font));
  line-height:var(--text-info-line-height);
  letter-spacing:var(--text-letter-spacing);
  color:#000;
  white-space:pre-line;
  pointer-events:none;
}

.placeholder{
  visibility:hidden;
}

.progress{
  position:absolute;
  left:0;
  right:0;
  top:0;
  z-index:3;
  pointer-events:none;
  display:none;
}

.progress-track{
  height:calc(var(--unit) * var(--size-progress-height));
  background:transparent;
}

.progress-fill{
  height:100%;
  width:0%;
  background:transparent;
}

.video-lazy{
  opacity:0;
  transition:opacity var(--timing-video-fade) ease-in;
  will-change:opacity;
}

.video-lazy.videoload,
.video-lazy.videoloading{
  opacity:0;
}

.video-lazy.videoloaded{
  opacity:1;
}

@media (hover:none) and (pointer:coarse){
  .item:not(.expanded) .vimeo-grid:not(.vimeo-mobile-thumb){
    display:none;
  }
}