/* V16 — the dark map floats on a light field; secondary lenses connect through atmosphere, not diagram lines. */

.concept-view .concept-layout {
  background:
    radial-gradient(34% 44% at 13% 10%, rgba(227, 169, 174, .09), transparent 74%),
    radial-gradient(34% 46% at 92% 86%, rgba(100, 143, 160, .07), transparent 76%),
    #ece5d9;
}

/* A soft transition from the primary view into the three conceptual lenses. */
.concept-view .view-heading {
  min-height: 94px;
  background:
    radial-gradient(28% 95% at 50% 0, rgba(227, 169, 174, .16), transparent 76%),
    linear-gradient(180deg, #f8f4ed 0%, #f3eee6 100%);
}

.concept-view .lens-switch {
  width: min(660px, calc(100% - 36px)) !important;
  height: 94px;
  align-items: stretch;
  padding-top: 0;
}

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

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

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

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

/* Related works carry their own topic color instead of becoming one beige stack. */
.concept-view .related-work {
  --work-color: #a75f69;
  --work-wash: color-mix(in srgb, var(--work-color) 9%, #fffdf8);
  position: relative;
  min-height: 66px;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--work-color) 22%, rgba(134, 125, 107, .14));
  border-radius: 11px;
  background:
    radial-gradient(56% 120% at 0 50%, color-mix(in srgb, var(--work-color) 13%, transparent), transparent 78%),
    var(--work-wash);
  box-shadow: 0 5px 15px rgba(62, 49, 34, .035);
}

.concept-view .related-work--do-self { --work-color: #a75f69; }
.concept-view .related-work--low-energy { --work-color: #4f7f84; }
.concept-view .related-work--direction { --work-color: #9a713e; }
.concept-view .related-work--first-work { --work-color: #56775d; }
.concept-view .related-work--inner-order { --work-color: #74658f; }
.concept-view .related-work--letter-knowledge { --work-color: #56758d; }
.concept-view .related-work--letter-gain-loss { --work-color: #956d4d; }

.concept-view .related-work small {
  align-self: start;
  min-width: 22px;
  padding-top: 2px;
  color: var(--work-color);
  font-family: var(--sans);
  font-size: 9px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .12em;
}

.concept-view .related-work span {
  display: grid;
  gap: 5px;
}

.concept-view .related-work strong {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5;
}

.concept-view .related-work em {
  color: color-mix(in srgb, var(--work-color) 78%, var(--ash));
  font-family: var(--sans);
  font-size: 9px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: .08em;
}

.concept-view .related-work b {
  color: var(--work-color);
  font-size: 14px;
  font-weight: 400;
}

.concept-view .related-work:hover,
.concept-view .related-work:focus-visible {
  border-color: color-mix(in srgb, var(--work-color) 52%, transparent);
  background:
    radial-gradient(65% 130% at 0 50%, color-mix(in srgb, var(--work-color) 20%, transparent), transparent 80%),
    color-mix(in srgb, var(--work-color) 11%, #fffdf8);
  box-shadow: 0 9px 22px color-mix(in srgb, var(--work-color) 10%, transparent);
  transform: translateY(-1px);
}

@media (max-width: 820px) {
  .concept-view .concept-layout {
    background:
      radial-gradient(75% 28% at 18% 2%, rgba(227, 169, 174, .09), transparent 75%),
      #ece5d9;
  }
}

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

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