/* V10 — natural two-level navigation and two work series. */

.collection-nav {
  display: block;
  padding: 0 var(--page-pad);
  background: rgba(250,247,241,.36);
}

.collection-nav__inner {
  display: grid;
  grid-template-columns: minmax(110px, .28fr) minmax(360px, .72fr);
  align-items: end;
  width: min(1324px, 100%);
  min-height: 92px;
  margin: 0 auto;
}

.collection-nav__label,
.subview-label {
  padding-bottom: 24px;
  color: var(--ash);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
}

.collection-nav .view-switch {
  display: flex;
  width: auto;
  gap: clamp(28px, 5vw, 74px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.collection-nav .view-switch button {
  position: relative;
  display: flex;
  min-height: 92px;
  align-items: center;
  gap: 10px;
  padding: 10px 2px 0;
  border: 0;
  border-radius: 0;
  color: var(--ash);
  background: transparent;
  box-shadow: none;
  text-align: left;
}

.collection-nav .view-switch button::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--pink-ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms var(--expo);
}

.collection-nav .view-switch button.is-active {
  color: var(--ink);
  background: transparent;
  box-shadow: none;
}

.collection-nav .view-switch button.is-active::after { transform: scaleX(1); }

.collection-nav .view-switch span {
  font-size: clamp(18px, 1.65vw, 23px);
  font-weight: 500;
  letter-spacing: .06em;
}

.collection-nav .view-switch small {
  order: -1;
  margin: 0;
  color: var(--pink-ink);
  font-family: var(--sans);
  font-size: 9px;
  font-style: normal;
  letter-spacing: .1em;
}

.view-panel > .view-heading {
  display: grid;
  grid-template-columns: minmax(110px, .28fr) minmax(360px, .72fr);
  align-items: end;
  min-height: 86px;
  padding: 0 var(--page-pad);
  border-bottom: 1px solid rgba(134,125,107,.27);
}

.view-panel > .view-heading > * {
  width: 100%;
  max-width: none;
}

.lens-switch,
.series-switch {
  display: flex;
  align-items: stretch;
  gap: clamp(24px, 4vw, 58px);
}

.lens-switch button,
.series-switch button {
  position: relative;
  display: flex;
  min-height: 86px;
  align-items: center;
  gap: 8px;
  padding: 10px 1px 0;
  border: 0;
  color: var(--ash);
  background: transparent;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .08em;
}

.lens-switch button::after,
.series-switch button::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--pink-ink);
  transform: scaleX(0);
  transition: transform 240ms var(--expo);
}

.lens-switch button.is-active,
.series-switch button.is-active { color: var(--ink); }
.lens-switch button.is-active::after,
.series-switch button.is-active::after { transform: scaleX(1); }

.series-switch small {
  min-width: 19px;
  padding: 2px 5px;
  border: 1px solid rgba(134,125,107,.35);
  border-radius: 999px;
  color: var(--ash);
  font-size: 9px;
  line-height: 1;
  text-align: center;
}

.works-view .gallery-shell { padding-top: clamp(38px, 5vw, 70px); }

.work-card__caption { min-height: 150px; padding-bottom: 42px; }

.work-card__date {
  position: absolute;
  left: 18px;
  bottom: 17px;
  color: var(--ash);
  font-family: var(--sans);
  font-size: 9px;
  font-style: normal;
  letter-spacing: .08em;
}

.work-card__date--pending { opacity: .62; }

@media (max-width: 760px) {
  .collection-nav { padding-inline: 18px; }
  .collection-nav__inner,
  .view-panel > .view-heading {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .collection-nav__label,
  .subview-label { padding: 18px 0 0; }
  .collection-nav .view-switch,
  .lens-switch,
  .series-switch {
    justify-content: space-between;
    gap: 18px;
  }
  .collection-nav .view-switch button { min-height: 68px; }
  .view-panel > .view-heading { padding-inline: 18px; }
  .lens-switch button,
  .series-switch button { min-height: 64px; font-size: 12px; }
}

@media (max-width: 390px) {
  .collection-nav .view-switch span { font-size: 16px; }
  .lens-switch,
  .series-switch { gap: 12px; }
  .lens-switch button,
  .series-switch button { font-size: 11px; }
}