/*!
Theme Name: era
Theme URI: http://underscores.me/
Author: Oliver Udeküll
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: era
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

era is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

#primary {
  opacity: 1;

  transition: opacity 0.3s ease-in-out;
}

#primary.is-leaving,
#primary.is-entering {
  opacity: 0;
}

html {
  scrollbar-gutter: stable;
}

html > *:has(.nav__menu-container--active),
html > *:has(.collective-filter-container--active) {
  overflow: hidden;
}

body {
  color: var(--color-primary);
  background-color: var(--color-bg);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

main {
  position: relative;
  top: var(--sizes-top-offset--absolute);

  animation: fadeIn 0.6s ease-in-out;
}

.site-not-found {
  position: relative;
  padding: 0 var(--padding);

  display: flex;
  flex-flow: column;
  gap: var(--gap);
}

.site-not-found > * {
  position: relative;
  width: fit-content;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--sizes-header-height);

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);

  z-index: var(--z-index-max);
  pointer-events: none;
}

.site-header > * {
  height: 100%;

  display: flex;
  align-items: center;
  justify-self: flex-start;

  pointer-events: auto;
}

.site-header__announcement,
.site-header,
.site-header > * > button,
.site-header > * > a {
  padding: var(--gap-sm) var(--padding-sm);
}

.site-header__announcement,
.collective-filter__toggle,
.single__back-nav a {
  padding-left: 0 !important;
}

.site-header__announcement {
  position: relative;
  top: var(--gap-sm);
  height: fit-content;
  grid-column: 3/4;
  padding-top: calc((var(--sizes-header-height--inner) - var(--gap-body)) / 2);

  white-space: nowrap;
}

.site-header__announcement--nav {
  position: absolute;
  left: calc(50dvw + var(--gap-sm));
  top: var(--gap);
}

.site-title,
.site__nav {
  width: 100%;
  height: fit-content;
}

.site-title a,
.site__nav button,
.collective-filter__toggle {
}
.site-title a,
.site__nav button,
.collective-filter__toggle {
  height: var(--sizes-header-height--inner);
}

.site__nav {
  grid-column: 4/5;
  justify-self: flex-end;

  display: flex;
  justify-content: flex-end;
}

.single__back-nav {
  grid-column: 3/4;
  text-transform: uppercase;
  z-index: -1;
}

.nav__menu-toggle {
  text-transform: uppercase;
}

.nav__menu-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100dvw;
  height: 100dvh;
  padding: var(--padding);
  padding-top: var(--sizes-top-offset--absolute);

  z-index: -1;
  opacity: 0;

  background-color: var(--color-bg--overlay);

  transition: opacity 0.3s ease-out;
  pointer-events: none;
}

.nav__menu-container--active {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}

.nav__menu {
  position: relative;
  width: 100%;

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
}

.nav__menu-list,
.nav__gallery,
.nav__links {
  opacity: 0;
  transition: opacity 0.3s ease-out;
  transition-delay: 0s;
}

.nav__menu-container--active .nav__menu-list {
  opacity: 1;
  transition-delay: 0.3s;
}

.nav__menu-container--active .nav__gallery,
.nav__menu-container--active .nav__links {
  opacity: 1;
  transition-delay: 0.5s;
}

.nav__menu-container--active .nav__links {
  transition-delay: 0.6s;
  transition-duration: 0.5s;
}

.nav__menu-container:not(.nav__menu-container--active) .nav__menu-list,
.nav__menu-container:not(.nav__menu-container--active) .nav__gallery,
.nav__menu-container:not(.nav__menu-container--active) .nav__links {
  opacity: 0;
  transition:
    transform 0s,
    opacity 0.3s ease-out;
}

.nav__menu-list {
  position: relative;
  width: 100%;
  grid-column: 1/2;

  display: flex;
  flex-flow: column;
}

.nav__gallery {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 0;
  max-height: fit-content;
  grid-column: 2/3;

  display: flex;
  justify-content: flex-end;
  gap: var(--gap-sm);

  filter: grayscale(1);
}

.nav__gallery-item {
  position: relative;
  width: auto;
  min-width: 0;
  max-width: 100%;
  height: fit-content;
  max-height: 100%;
  aspect-ratio: 1;

  display: block;
  flex: 1 1 0;
  object-fit: cover;
}

.gallery {
  position: relative;
  height: max(calc(100dvh - var(--sizes-top-offset--absolute)), 350px);
  padding: var(--padding);
  padding-top: 0;

  display: flex;
  flex-flow: column;
  justify-content: flex-end;
  gap: var(--gap);
}

.nav__links {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;

  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--gap);

  list-style: none;
  text-transform: uppercase;
}

.nav__links li {
  display: contents;
}

.nav__links li:first-child .nav__link-item {
  grid-column-start: 5;
}

.nav__link-item {
  width: fit-content;
  height: fit-content;
}

.swiper-slide__credits {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(80dvh / 2);
  max-width: 50%;
  min-width: 25ch;
  height: fit-content;
  padding: var(--gap);

  display: none;
  flex-flow: column;
  gap: var(--gap-body);

  background-color: var(--color-bg);
  background-color: var(--color-bg--muted);
  cursor: auto;
  z-index: 1;
}

.gallery .swiper {
  width: 100%;
  height: auto;

  filter: grayscale(1);
}

.swiper-wrapper {
  height: fit-content !important;
  cursor: grab;

  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;

  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;

  will-change: transform;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) !important;
}

.gallery .swiper-slide {
  position: relative;
  width: auto;
  height: 80dvh;
  min-height: 350px;
  max-width: calc(100dvw - var(--padding-lg));

  display: flex;
  align-items: center;
  justify-content: center;
}

.swiper-slide img {
  display: block;
  height: 100%;
  width: auto;
  min-width: 0;
  min-height: 0;
  flex: 1;

  object-fit: cover;
}

.gallery--single .swiper,
.gallery--single .swiper-wrapper,
.gallery--single .swiper-slide {
  width: auto;
  max-width: 100%;
  margin: 0;
}

.gallery--single .swiper-wrapper {
  cursor: default;
  justify-content: flex-end;
}

.gallery--single .swiper-slide img {
  flex: none;
  width: auto;
  max-width: 100%;
}

.archive__feed,
.artists__feed {
  position: relative;
  padding: var(--padding);
  padding-top: 0;
  padding-bottom: var(--sizes-top-offset--absolute);

  display: grid;
  gap: var(--gap);
}

.collective-filter-wrap {
  width: 100%;
  height: fit-content;
  grid-column: 3/4;

  z-index: -1;
}

.collective-filter__toggle {
  text-transform: uppercase;
}

.collective-filter-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100dvh;
  padding: 0 var(--padding);

  z-index: -1;
  opacity: 0;

  background-color: var(--color-bg--overlay);

  transition: opacity 0.3s ease-out;
  pointer-events: none;
}

.collective-filter-container--active {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}

.collective-filter {
  position: relative;
  width: 100%;
  top: var(--sizes-top-offset--absolute);

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
}

.collective-filter__list {
  grid-column: 2 / 3;
  width: min-content;
  columns: 2;
  column-gap: var(--padding-lg);
  align-self: flex-start;

  opacity: 0;
  transition: opacity 0.3s ease-out;
  transition-delay: 0s;
}

.collective-filter-container--active .collective-filter__list {
  opacity: 1;
  transition-delay: 0.3s;
}

.collective-filter-container:not(.collective-filter-container--active)
  .collective-filter__list {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.collective-filter__list li {
  width: 100%;
  break-inside: avoid;
}

.collective-filter__item {
  padding: 0;
  border: 0;
  white-space: nowrap;

  color: var(--color-primary);
  background: none;
  cursor: pointer;

  font: inherit;
}

.collective-filter__item--active {
  color: var(--color-primary--muted);
}

.artist-card[hidden] {
  display: none;
}

.archive__feed {
  grid-template-columns: repeat(2, 1fr);
}

.artists__feed {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.archive-card {
  position: relative;
  width: 100%;

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--padding);
}

.archive-card,
.artist-card {
  filter: grayscale(1);

  transition:
    filter 0.1s ease-out,
    opacity 0.1s ease-out;
}

.artist-card {
  position: relative;
  width: 100%;

  display: flex;
  flex-flow: column;
  justify-content: center;

  text-transform: uppercase;
}

.artist-card img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4/5;

  object-fit: cover;
}

.archive-card__img {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 5/4;

  object-fit: cover;
}

.archive-card__info {
  position: relative;

  display: flex;
  flex-flow: column;
}

.artist-card__title {
  position: relative;
  padding: var(--gap-sm) 0;
}

.post {
  position: relative;
  padding-bottom: var(--padding);

  display: flex;
  flex-flow: column;
  gap: var(--gap-lg);
}

.post__preview {
  position: relative;
  width: 100%;
  height: fit-content;

  display: grid;
  grid-template-rows: auto minmax(350px, 1fr);
  gap: var(--gap-lg);
}

.post__header {
  position: relative;
  width: 100%;
  padding: 0 var(--padding);

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}

.post__meta {
  position: relative;

  display: flex;
  flex-flow: column;
}

.post__meta a {
  width: fit-content;
}

.post__meta p:not(:last-child) {
  margin-bottom: var(--gap-body);
}

.post__hgroup {
  position: relative;
  grid-column: 1/3;
}

.post__image-container,
.post__gallery {
  position: relative;
  width: 100%;
  width: 100dvw;

  height: auto;
  padding: 0 var(--padding);

  display: flex;
  flex-flow: column;
  flex: 1;
}

.post__preview .gallery .swiper {
  flex: 1;
  height: auto;
  min-height: 0;

  filter: unset;
}

.post__gallery .swiper-slide.post__gallery-spacer {
  width: calc(50dvw - var(--padding) - var(--gap-sm)) !important;
  min-width: calc(50dvw - var(--padding) - var(--gap-sm)) !important;
  height: 100%;
  flex-shrink: 0;

  pointer-events: none;
}

.post__content-container {
  position: relative;
  padding: 0 var(--padding-lg);

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
}

.post__image-container {
  position: relative;
  width: auto;
}

.post__image-wrapper {
  position: relative;
  height: 80dvh;
  margin-left: auto;
  width: calc(50% - var(--gap-sm));
}

.post__image {
  display: block;
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.post__content {
  max-width: 60ch;
  margin-bottom: var(--sizes-top-offset--absolute);
  grid-column: 2/3;
}

.post__content p:not(:last-child),
.gallery-section__body p:not(:last-child),
.single-image-section__body p:not(:last-child) {
  margin-bottom: var(--gap-paragraph-medium);
}

.post__content p:has(+ blockquote) {
  margin-bottom: 0 !important;
}

.post__content blockquote {
  font-family: var(--font-fm);
  font-size: var(--font-size-body--quote);
  line-height: var(--font-line-height-body--quote);
  letter-spacing: var(--font-letter-spacing-quote);
  font-weight: normal;
}
.post__content blockquote:not(:last-child) {
  margin-bottom: var(--gap-paragraph-medium--double);
}

.about {
  position: relative;
  width: 100%;
  padding: var(--padding);
  padding-top: 0;

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
}

.about__content {
  position: relative;
  height: 100%;

  display: flex;
  flex-flow: column;
  justify-content: space-between;
  gap: var(--padding);
}

.about__description {
  max-width: 28ch;
}

.about__contact-info {
  position: relative;
  width: 100%;

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--padding);
}

.about__contact-info > * {
  align-self: flex-end;
}

.about__contact-info > * p:not(:last-child) {
  margin-bottom: var(--gap-body);
}

.about__image {
  position: relative;
  width: 100%;
  height: 55dvh;

  object-fit: cover;
}

.sections-page {
  position: relative;

  display: flex;
  flex-flow: column;
  gap: var(--gap-xl);
}

.sections-container {
  position: relative;
  padding-bottom: var(--sizes-top-offset--absolute);

  display: flex;
  flex-flow: column;
  gap: var(--sizes-top-offset--absolute);
}

.gallery-section {
  position: relative;
  display: flex;
  flex-flow: column;
  gap: var(--padding);
}

.gallery-section__header {
  position: relative;
  padding: 0 var(--padding);

  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.gallery-section__title {
  grid-column: 1/3;
  max-width: 35ch;
}

.gallery-section__body {
  grid-column: 4/5;
}

.gallery-section__gallery {
  height: 80dvh;
  padding: 0 var(--padding);
}

.gallery-section__gallery .swiper {
  filter: none;
}

.single-image-section {
  position: relative;
  padding: 0 var(--padding);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
}

.single-image-section__content {
  position: relative;

  display: flex;
  flex-flow: column;
  justify-content: space-between;
}

.single-image-section__title {
  max-width: 35ch;
  padding-right: var(--gap);
}

.single-image-section__body,
.gallery-section__body,
.single-image-section__title,
.gallery-section__title,
.post__content p,
.post__content blockquote,
.post__excerpt {
  text-wrap: balance;
}

.post__excerpt p:not(:last-child) {
  margin-bottom: var(--gap-body);
}

.single-image-section__body {
  position: relative;
  max-width: 45ch;
  width: 50%;
}

.single-image-section__img {
  position: relative;
  width: 100%;
  height: auto;
  max-height: 80dvh;
  aspect-ratio: 5/4;

  object-fit: cover;
}

@media screen and (pointer: fine) {
  .artist-card:hover,
  .archive-card:hover {
    opacity: 0.5;
    filter: grayscale(0);
  }

  .swiper-slide:hover .swiper-slide__credits {
    display: flex;
  }
}

@media screen and (width < 1000px) {
  .nav__menu {
    height: 100%;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    gap: var(--gap-lg);
  }

  .site-header {
    gap: 0;
  }

  .site-header__announcement {
    position: absolute;
    grid-column: 1/2;
    padding-top: var(--gap);
    padding-left: var(--padding-sm) !important;
    top: var(--sizes-header-height);

    z-index: -1;
  }

  .site-header__announcement--nav {
    left: var(--padding-sm);
  }

  .nav__links {
    position: relative;
    grid-template-columns: repeat(2, 1fr);
  }

  .nav__links li:first-child .nav__link-item {
    grid-column-start: unset;
  }

  .archive__feed {
    grid-template-columns: 1fr;
  }

  .artists__feed {
    grid-template-columns: repeat(2, 1fr);
  }

  .collective-filter {
    gap: 0;
  }

  .collective-filter__list {
    grid-column: 2 / 3;
    width: min-content;
    columns: 1;
    column-gap: var(--padding-lg);
    align-self: flex-start;

    opacity: 0;
    transition: opacity 0.3s ease-out;
    transition-delay: 0s;
  }

  .about {
    min-height: var(--sizes-content-height);

    display: flex;
    flex-flow: column;
    gap: var(--gap-lg);
  }

  .about__content {
    flex-shrink: 0;
    height: auto;
    gap: var(--padding);
  }

  .about__description {
    font-size: var(--font-size-medium) !important;
  }

  .about__contact-info {
    gap: var(--gap);
  }

  .about__contact-info > * {
    display: contents;
  }

  .about__contact-info > * p:not(:last-child) {
    margin-bottom: 0;
  }

  .about__image {
    min-height: 0;
    width: 100%;
    aspect-ratio: 5/4;
    height: auto;
    object-fit: cover;
  }

  .site-not-found {
    gap: var(--gap-sm);
  }

  .post {
    gap: 0;
  }

  .post__preview {
    grid-template-rows: auto minmax(250px, 1fr);
    gap: var(--gap-lg);
  }

  .post__preview .gallery {
    min-height: 250px;
  }

  .post__header {
    display: flex;
    flex-flow: column;
    gap: var(--gap);
  }

  .post__hgroup {
    grid-column: 1/1;
  }

  .post__excerpt {
    grid-column: 1/3;
  }

  .post__meta {
    flex-flow: row;
    gap: var(--padding);
    opacity: 0.5;
  }

  .sections-page {
    gap: var(--gap-lg);
  }

  .sections-page .post__header .post__meta {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(2, 1fr);
  }

  .post__meta p:not(:last-child) {
    margin-bottom: 0;
  }

  .sections-container {
    gap: var(--gap-xl);
  }

  .gallery-section,
  .single-image-section {
    gap: var(--gap-paragraph-medium);
  }

  .gallery-section__header {
    display: flex;
    flex-flow: column;
    gap: var(--gap-paragraph-medium);
  }

  .gallery-section__gallery {
    width: 100%;
    height: auto;
  }

  .single-image-section {
    display: flex;
    flex-flow: column;
  }

  .single-image-section__content {
    order: 1;
    gap: var(--gap-paragraph-medium);
  }

  .single-image-section__body,
  .gallery-section__body {
    line-height: var(--font-line-height-body--quote) !important;
  }

  .single-image-section__body {
    width: 100%;
  }

  .gallery__nav {
    padding: 0 var(--padding);
  }

  .gallery {
    overflow: hidden;
    gap: var(--gap-sm);
  }

  .swiper-wrapper {
    transition-timing-function: inherit !important;
  }

  .gallery-section__gallery .swiper,
  .post__gallery .swiper {
    overflow: visible !important;
    touch-action: pan-y pinch-zoom;
  }

  .gallery .swiper-slide {
    width: auto;
    max-width: calc(100dvw - var(--padding-lg));
    min-height: 0;
    max-height: unset;
    height: calc(100dvw - var(--padding-lg));
    flex-shrink: 0;
  }

  .gallery .swiper-slide img {
    width: auto;
    height: 100%;
    object-fit: cover;
  }

  .gallery--single .swiper-wrapper {
    justify-content: flex-start;
  }

  .swiper-slide__credits {
    max-width: fit-content;
  }

  .post__image-wrapper {
    width: auto;
    height: auto;
    margin-left: 0;
    height: 80dvh;
    max-height: calc(100dvw - var(--padding-lg));
    padding-top: 0;
  }

  .post__content-container {
    padding: var(--padding);
    padding-top: var(--gap-lg);

    display: flex;
    flex-flow: column;
  }
}

@media screen and (width<800px) {
  .artists__feed {
    grid-template-columns: 1fr;
  }
}