/* V15 — dark relation field, light reading field, and a clean full-width view switch. */

/* The former narrow viewport margins read as two unexplained side blocks. */
.collection-nav {
  width: 100%;
  margin: 0;
  border: 0;
  background: #f8f4ed;
  box-shadow: 0 1px 0 rgba(134, 125, 107, .13);
  backdrop-filter: none;
}

.collection-nav::after {
  display: none;
}

.collection-nav__inner {
  background: transparent;
}

/* Keep the exhibition unchanged; give the conceptual view its own visual register. */
.concept-view .view-heading {
  background:
    radial-gradient(34% 90% at 50% 0, rgba(181, 103, 114, .12), transparent 76%),
    #f5f0e8;
}

.concept-view .concept-layout {
  gap: clamp(14px, 1.8vw, 28px);
  background:
    linear-gradient(90deg, #29241e 0 67%, #e8e1d6 67% 100%);
}

.concept-view .root-canvas {
  isolation: isolate;
  border: 1px solid rgba(255, 250, 240, .08);
  background:
    radial-gradient(42% 42% at 49% 52%, rgba(167, 95, 105, .21), transparent 72%),
    radial-gradient(36% 42% at 16% 16%, rgba(83, 137, 142, .19), transparent 76%),
    radial-gradient(36% 45% at 88% 82%, rgba(176, 130, 70, .16), transparent 76%),
    linear-gradient(148deg, #211e1a 0%, #151311 58%, #1d1916 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .05),
    0 24px 60px rgba(36, 29, 22, .22);
}

.concept-view .root-canvas::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  opacity: .28;
  pointer-events: none;
  background-image:
    linear-gradient(112deg, transparent 0 47%, rgba(255, 246, 231, .035) 48%, transparent 49%),
    radial-gradient(circle at 30% 40%, rgba(255,255,255,.055) 0 .7px, transparent .9px);
  background-size: 210px 170px, 11px 11px;
  mix-blend-mode: screen;
}

.concept-view .root-svg,
.concept-view .root-node-layer,
.concept-view .ground-line,
.concept-view .root-instruction {
  z-index: 1;
}

.concept-view .root-zone {
  fill-opacity: .16;
  stroke-opacity: .54;
  stroke-width: 1.35;
  mix-blend-mode: screen;
}

.concept-view .root-zone.is-muted {
  opacity: .12;
}

.concept-view .root-zone.is-active {
  fill-opacity: .25;
  stroke-opacity: .9;
}

.concept-view .root-path--under {
  opacity: .2;
  stroke: rgba(246, 236, 219, .55);
}

.concept-view .root-path--line {
  opacity: .58;
  stroke: rgba(248, 239, 223, .78);
}

.concept-view .root-path.is-muted {
  opacity: .055;
}

.concept-view .root-path.is-active.root-path--under {
  opacity: .42;
  stroke: rgba(236, 166, 176, .9);
}

.concept-view .root-path.is-active.root-path--line {
  opacity: 1;
  stroke: #f1aebb;
}

.concept-view .root-path--relation.is-active.root-path--line {
  opacity: .88;
  stroke: #f5bdc6;
}

.concept-view .root-node {
  color: #f7efe3;
  border-color: color-mix(in srgb, var(--node-color) 76%, rgba(255, 247, 231, .42));
  background: color-mix(in srgb, var(--node-color) 24%, rgba(22, 19, 16, .9));
  box-shadow:
    0 10px 28px rgba(0, 0, 0, .3),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}

.concept-view .root-node:hover {
  background: color-mix(in srgb, var(--node-color) 38%, rgba(25, 21, 18, .82));
  box-shadow:
    0 0 0 5px color-mix(in srgb, var(--node-color) 18%, transparent),
    0 15px 38px rgba(0, 0, 0, .38);
}

.concept-view .root-node--core {
  color: #fff9ef;
  border: 1.5px solid #e6a0ac;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 222, 224, .28), transparent 36%),
    linear-gradient(145deg, #7e414c, #48262c 62%, #271b1b);
  box-shadow:
    0 0 0 9px rgba(196, 104, 118, .12),
    0 18px 44px rgba(0, 0, 0, .38);
}

.concept-view .root-node--group {
  color: #fffaf0;
  border-width: 1.6px;
  background: color-mix(in srgb, var(--node-color) 44%, rgba(23, 20, 17, .86));
}

.concept-view .root-node--leaf {
  color: rgba(250, 241, 226, .9);
  background: color-mix(in srgb, var(--node-color) 18%, rgba(20, 18, 16, .93));
}

.concept-view .root-node.is-related {
  color: #fffaf1;
  border-color: color-mix(in srgb, var(--node-color) 88%, white);
  background: color-mix(in srgb, var(--node-color) 38%, #1b1815);
}

.concept-view .root-node.is-active {
  color: #241e19;
  border-color: #fff8ed;
  background: #fff8ed;
  box-shadow:
    0 0 0 7px color-mix(in srgb, var(--node-color) 35%, transparent),
    0 18px 42px rgba(0, 0, 0, .42);
}

.concept-view .ground-line {
  background: linear-gradient(90deg, transparent, rgba(239, 229, 212, .3) 14%, rgba(239, 229, 212, .3) 86%, transparent);
}

.concept-view .ground-line span,
.concept-view .root-instruction {
  color: rgba(239, 229, 212, .58);
}

.concept-view .concept-detail {
  color: #302a24;
  border: 1px solid rgba(255, 255, 255, .5);
  background:
    radial-gradient(70% 44% at 95% 0, color-mix(in srgb, var(--detail-color) 12%, transparent), transparent 75%),
    rgba(252, 249, 243, .92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 22px 58px rgba(35, 28, 21, .13);
}

.concept-view .detail-section {
  background: rgba(255, 253, 249, .72);
}

@media (max-width: 820px) {
  .concept-view .concept-layout {
    background: linear-gradient(180deg, #29241e 0 53%, #e8e1d6 53% 100%);
  }
}

@media (max-width: 760px) {
  .collection-nav {
    width: 100%;
    margin: 0;
    padding-inline: 0;
  }

  .collection-nav__inner {
    width: 100%;
  }
}