/* V14 — hierarchy through materials, space, and depth instead of more dividers. */

.site-header {
  border-bottom: 0;
  background: rgba(252, 249, 243, .86);
  box-shadow: 0 1px 0 rgba(134, 125, 107, .16), 0 8px 28px rgba(67, 54, 38, .035);
  backdrop-filter: blur(22px) saturate(.9);
}

.collection-nav {
  position: relative;
  z-index: 4;
  border: 0;
  background: rgba(249, 246, 239, .72);
  box-shadow: 0 10px 32px rgba(64, 50, 34, .045);
  backdrop-filter: blur(18px) saturate(.92);
}

.collection-nav::after {
  content: "";
  position: absolute;
  right: 18%;
  bottom: -18px;
  left: 18%;
  height: 28px;
  border-radius: 50%;
  background: rgba(190, 112, 121, .055);
  filter: blur(18px);
  pointer-events: none;
}

.view-stage {
  background: #eee8dc;
}

.view-panel > .view-heading {
  border: 0;
  background:
    radial-gradient(38% 100% at 50% 0, rgba(227, 169, 174, .12), transparent 72%),
    linear-gradient(180deg, rgba(251, 248, 242, .94), rgba(241, 235, 224, .74));
  box-shadow: 0 18px 40px rgba(69, 55, 38, .045);
}

.branch-map path {
  stroke: rgba(116, 105, 87, .32);
}

.branch-map circle {
  filter: drop-shadow(0 0 5px rgba(227, 169, 174, .34));
}

.concept-layout {
  gap: clamp(14px, 1.8vw, 28px);
  padding: clamp(14px, 2vw, 30px);
  background:
    radial-gradient(42% 52% at 18% 10%, rgba(227, 169, 174, .105), transparent 72%),
    radial-gradient(42% 50% at 88% 78%, rgba(100, 143, 160, .08), transparent 72%),
    #ece5d9;
}

.root-canvas {
  min-height: 650px;
  border: 0;
  border-radius: 24px;
  background:
    linear-gradient(155deg, rgba(255, 253, 249, .76), rgba(230, 222, 208, .38)),
    repeating-linear-gradient(172deg, transparent 0 88px, rgba(134, 125, 107, .035) 89px, transparent 90px 152px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .76),
    0 20px 55px rgba(70, 55, 37, .075);
}

.concept-detail {
  min-height: 650px;
  border: 0;
  border-radius: 24px;
  background: rgba(251, 248, 242, .72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .86),
    0 22px 58px rgba(70, 55, 37, .085);
  backdrop-filter: blur(15px);
}

.detail-section {
  margin-top: 28px;
  padding: 18px;
  border: 0;
  border-radius: 16px;
  background: rgba(255, 253, 249, .58);
  box-shadow: inset 0 0 0 1px rgba(134, 125, 107, .13);
}

.related-work {
  border: 0;
  border-radius: 10px;
  background: rgba(239, 233, 222, .62);
  box-shadow: inset 0 0 0 1px rgba(134, 125, 107, .1);
}

.related-work:hover,
.related-work:focus-visible {
  border: 0;
  background: rgba(255, 253, 249, .9);
  box-shadow: 0 8px 22px rgba(66, 52, 35, .07), inset 0 0 0 1px color-mix(in srgb, var(--detail-color) 38%, transparent);
}

.gallery-shell.masonry-shell {
  background:
    radial-gradient(36% 28% at 6% 8%, rgba(227, 169, 174, .15), transparent 74%),
    radial-gradient(34% 32% at 94% 70%, rgba(100, 143, 160, .095), transparent 74%),
    linear-gradient(160deg, #eee7da 0%, #f5f0e7 45%, #e8e1d5 100%);
}

.work-card__button,
.specimen.work-card__button {
  border-color: rgba(134, 125, 107, .16);
  background: rgba(253, 250, 244, .82);
  box-shadow:
    0 2px 4px rgba(58, 46, 31, .025),
    0 18px 46px rgba(58, 46, 31, .075);
}

.work-card__button:hover,
.work-card__button:focus-visible,
.specimen.work-card__button:hover,
.specimen.work-card__button:focus-visible {
  border-color: rgba(190, 112, 121, .3);
  box-shadow:
    0 4px 8px rgba(58, 46, 31, .035),
    0 28px 62px rgba(58, 46, 31, .12);
  transform: translateY(-4px) scale(1.002);
}

@media (max-width: 820px) {
  .concept-layout {
    gap: 14px;
    padding: 14px;
  }

  .root-canvas {
    min-height: 520px;
    border: 0;
    border-radius: 19px;
  }

  .concept-detail {
    min-height: auto;
    border-radius: 19px;
  }
}

@media (max-width: 680px) {
  .gallery-shell.masonry-shell {
    padding-top: 32px;
  }
}