/* V17 — hierarchy through soft shadow and spacing, never through downward connector lines. */

.collection-nav {
  border: 0;
  background:
    radial-gradient(34% 70% at 50% 100%, rgba(227, 169, 174, .13), transparent 78%),
    #f8f4ed;
  box-shadow: none;
}

/* The underline read as another connector between levels. */
.collection-nav .view-switch button::after {
  display: none;
}

.collection-nav .view-switch button {
  transition: color 260ms ease, background 360ms ease;
}

.collection-nav .view-switch button.is-active {
  color: var(--ink);
  background: radial-gradient(ellipse at center, rgba(227, 169, 174, .14), transparent 68%);
}

.view-stage {
  border: 0;
}

.view-panel > .view-heading,
.concept-view .view-heading,
.works-view .view-heading {
  min-height: 94px;
  border: 0;
  background:
    radial-gradient(34% 100% at 50% 0, rgba(227, 169, 174, .14), transparent 76%),
    linear-gradient(180deg, #f7f2eb 0%, #f3eee6 100%);
  box-shadow: none;
}

.view-panel > .view-heading::before,
.view-panel > .view-heading::after,
.branch-map {
  display: none;
}

.lens-switch,
.series-switch,
.concept-view .lens-switch {
  height: 94px;
  align-items: stretch;
  padding-top: 0;
}

.lens-switch button,
.series-switch button,
.concept-view .lens-switch button {
  min-height: 94px;
  padding: 0 10px;
  color: rgba(74, 65, 54, .67);
  background: transparent;
  font-weight: 400;
  transition: color 260ms ease, background 360ms ease, transform 340ms var(--expo);
}

.lens-switch button::before,
.lens-switch button::after,
.series-switch button::before,
.series-switch button::after {
  display: none;
}

.lens-switch button:hover,
.series-switch button:hover,
.lens-switch button:focus-visible,
.series-switch button:focus-visible {
  color: var(--ink);
  background: radial-gradient(ellipse at center, rgba(227, 169, 174, .085), transparent 68%);
}

.lens-switch button.is-active,
.series-switch button.is-active {
  color: var(--pink-ink);
  background: radial-gradient(ellipse at center, rgba(227, 169, 174, .19), transparent 69%);
  font-weight: 500;
}

.series-switch small {
  border-color: rgba(190, 112, 121, .25);
  color: color-mix(in srgb, var(--pink-ink) 72%, var(--ash));
  background: rgba(255, 253, 249, .42);
}

@media (max-width: 760px) {
  .view-panel > .view-heading,
  .concept-view .view-heading,
  .works-view .view-heading,
  .lens-switch,
  .series-switch,
  .concept-view .lens-switch {
    min-height: 86px;
    height: 86px;
  }

  .lens-switch button,
  .series-switch button,
  .concept-view .lens-switch button {
    min-height: 86px;
  }
}