/* V5 — relation fields below, a vertically flowing digital exhibition above. */

/* ---------- Concept map: color fields + circular nodes + branching lines ---------- */
.root-canvas {
  background:
    radial-gradient(circle at 50% 49%, rgba(255,255,255,.82), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.46), rgba(232,225,213,.14));
}

.soil-field { display: none; }

.root-zone {
  fill-opacity: .105;
  stroke-opacity: .28;
  stroke-width: 1.2;
  transition: opacity 360ms ease, fill-opacity 360ms ease, stroke-opacity 360ms ease;
  vector-effect: non-scaling-stroke;
}

.root-zone.is-muted { opacity: .16; }

.root-zone.is-active {
  fill-opacity: .17;
  stroke-opacity: .58;
  stroke-width: 1.7;
}

.root-path {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  transition: opacity 320ms ease, stroke 320ms ease, stroke-width 320ms ease;
}

.root-path--under {
  opacity: .11;
  stroke: rgba(77,64,47,.58);
}

.root-path--main.root-path--under { stroke-width: 5; }
.root-path--branch.root-path--under { stroke-width: 2.8; }

.root-path--line {
  opacity: .38;
  stroke: rgba(77,64,47,.72);
}

.root-path--main.root-path--line { stroke-width: 1.45; }
.root-path--branch.root-path--line { stroke-width: .9; }

.root-path.is-muted { opacity: .04; }

.root-path.is-active.root-path--under {
  opacity: .2;
  stroke: var(--pink-ink);
}

.root-path.is-active.root-path--line {
  opacity: .94;
  stroke: var(--pink-ink);
}

.root-path--main.is-active.root-path--line { stroke-width: 2.3; }
.root-path--branch.is-active.root-path--line { stroke-width: 1.5; }

.root-node {
  border-width: 1.25px;
  background: rgba(252,250,245,.88);
  box-shadow: 0 7px 22px rgba(66,54,39,.045);
}

.root-node--core {
  box-shadow:
    0 0 0 8px rgba(227,169,174,.12),
    0 14px 34px rgba(80,51,54,.09);
}

.root-node--group {
  background: color-mix(in srgb, var(--node-color) 7%, rgba(252,250,245,.94));
}

.root-node--leaf {
  background: rgba(252,250,245,.94);
}

.root-node.is-active {
  box-shadow:
    0 0 0 7px color-mix(in srgb, var(--node-color) 15%, transparent),
    0 14px 34px rgba(80,51,54,.11);
}

.ground-line {
  opacity: .48;
}

/* ---------- Works: continuous editorial current ---------- */
.gallery-shell.flow-shell {
  position: relative;
  min-height: 100vh;
  overflow: visible;
  background:
    radial-gradient(circle at 10% 12%, rgba(227,169,174,.11), transparent 18%),
    radial-gradient(circle at 88% 45%, rgba(108,145,157,.09), transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(229,222,209,.2));
}

.gallery-shell.flow-shell::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  content: "";
  opacity: .24;
  pointer-events: none;
  background: linear-gradient(transparent, var(--line-strong) 7%, var(--line-strong) 93%, transparent);
}

.flow-index {
  position: sticky;
  top: 50%;
  z-index: 20;
  display: flex;
  width: 42px;
  height: 0;
  margin-left: calc(100% - 54px);
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transform: translateY(-94px);
}

.flow-index button {
  position: relative;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--ash);
  background: rgba(248,245,238,.72);
  font-family: var(--serif-latin);
  font-size: 10px;
  backdrop-filter: blur(8px);
  transition: color 240ms ease, background 240ms ease, box-shadow 240ms ease;
}

.flow-index button small {
  position: absolute;
  top: 50%;
  right: 43px;
  width: 220px;
  overflow: hidden;
  opacity: 0;
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: 10px;
  font-style: normal;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: translate(7px,-50%);
  transition: opacity 220ms ease, transform 220ms ease;
  pointer-events: none;
}

.flow-index button:hover small,
.flow-index button:focus-visible small {
  opacity: 1;
  transform: translate(0,-50%);
}

.flow-index button.is-current {
  color: #fffaf7;
  background: var(--pink-ink);
  box-shadow: 0 0 0 5px rgba(227,169,174,.14);
}

.specimen-gallery.flow-stream {
  position: relative;
  z-index: 2;
  display: block;
  min-height: 0;
  padding: 0;
}

.flow-work {
  --drift: 0px;
  position: relative;
  display: grid;
  min-height: 92vh;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto;
  align-items: center;
  column-gap: clamp(14px, 2vw, 30px);
  padding: clamp(90px, 11vw, 170px) clamp(42px, 7vw, 112px);
  transition: opacity 420ms ease;
}

.flow-work + .flow-work {
  margin-top: clamp(-80px, -5vw, -30px);
}

.flow-work.is-muted { opacity: .16; }

.flow-work::after {
  position: absolute;
  right: 7%;
  bottom: 3%;
  left: 7%;
  height: 1px;
  content: "";
  opacity: .45;
  background: linear-gradient(90deg, transparent, rgba(134,125,107,.34), transparent);
}

.flow-ghost-number {
  position: absolute;
  z-index: -1;
  color: rgba(80,65,47,.045);
  font-family: var(--serif-latin);
  font-size: clamp(180px, 28vw, 430px);
  font-style: italic;
  font-weight: 400;
  line-height: .7;
  pointer-events: none;
}

.flow-visual,
.specimen.flow-visual {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
  color: inherit;
  background: transparent;
  box-shadow: none;
  transform: translate3d(0, calc(var(--drift) * .55), 0);
  transition: opacity 650ms ease, transform 900ms var(--expo), filter 420ms ease;
  text-align: left;
  will-change: transform;
}

.flow-work:not(.is-in-view) .flow-visual {
  opacity: .28;
  transform: translate3d(0, calc(var(--drift) + 46px), 0);
}

.flow-visual:hover,
.flow-visual:focus-visible,
.flow-visual.is-active,
.specimen.flow-visual:hover,
.specimen.flow-visual:focus-visible,
.specimen.flow-visual.is-active {
  border: 0;
  box-shadow: none;
  transform: translate3d(0, calc(var(--drift) * .45 - 7px), 0);
}

.flow-visual.is-muted { opacity: .18; }

.flow-visual .specimen-cover {
  border: 0;
  background: transparent;
  box-shadow: 0 25px 70px rgba(52,42,29,.14);
}

.flow-visual .specimen-cover img {
  filter: saturate(.86) contrast(.98);
  transition: transform 900ms var(--expo), filter 420ms ease;
}

.flow-visual:hover .specimen-cover img,
.flow-visual:focus-visible .specimen-cover img {
  transform: scale(1.018);
  filter: saturate(.98) contrast(1.01);
}

.flow-open {
  position: absolute;
  right: 0;
  bottom: -28px;
  opacity: 0;
  color: var(--pink-ink);
  font-family: var(--serif-latin);
  font-size: 10px;
  font-style: italic;
  letter-spacing: .12em;
  transform: translateY(-6px);
  transition: opacity 240ms ease, transform 240ms ease;
}

.flow-visual:hover .flow-open,
.flow-visual:focus-visible .flow-open {
  opacity: 1;
  transform: translateY(0);
}

.flow-copy {
  position: relative;
  z-index: 3;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms 120ms ease, transform 820ms 120ms var(--expo);
}

.flow-work.is-in-view .flow-copy {
  opacity: 1;
  transform: translateY(0);
}

.flow-copy .specimen-meta {
  margin: 0 0 20px;
  padding: 0 0 11px;
}

.flow-copy h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(27px, 3.3vw, 54px);
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.32;
  text-wrap: pretty;
}

.flow-copy .specimen-question {
  margin: 24px 0 0;
  padding-left: 16px;
  border-left: 2px solid var(--pink-ink);
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.85;
}

.flow-copy .specimen-roots {
  margin-top: 24px;
}

.specimen-cover--placeholder {
  position: relative;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 28% 25%, rgba(227,169,174,.4), transparent 23%),
    radial-gradient(circle at 75% 70%, rgba(106,146,159,.25), transparent 31%),
    linear-gradient(135deg, #e7dfd2, #d6cdbd);
}

.specimen-cover--placeholder small {
  position: absolute;
  top: 28px;
  left: 28px;
  color: var(--ash);
  font-family: var(--serif-latin);
  font-size: 10px;
  font-style: italic;
  letter-spacing: .16em;
}

.specimen-cover--placeholder span {
  font-size: clamp(21px, 3vw, 42px);
}

.specimen-cover--placeholder i {
  position: absolute;
  right: 28px;
  bottom: 12px;
  color: rgba(22,19,14,.12);
  font-family: var(--serif-latin);
  font-size: clamp(76px, 13vw, 180px);
  font-weight: 400;
}

/* Five works, five editorial gestures — one system, not five cards. */
.flow-work--do-self .flow-visual { grid-column: 1 / 8; }
.flow-work--do-self .flow-copy { grid-column: 9 / 13; align-self: end; margin-bottom: 8%; }
.flow-work--do-self .flow-ghost-number { top: 9%; right: 3%; }

.flow-work--low-energy .flow-copy { grid-column: 1 / 5; align-self: start; margin-top: 9%; }
.flow-work--low-energy .flow-visual { grid-column: 6 / 12; }
.flow-work--low-energy .flow-ghost-number { bottom: 12%; left: 2%; }

.flow-work--direction { min-height: 108vh; }
.flow-work--direction .flow-visual { grid-column: 2 / 11; }
.flow-work--direction .flow-copy { grid-column: 7 / 13; margin-top: -7%; }
.flow-work--direction .flow-ghost-number { top: 18%; left: 1%; }

.flow-work--first-work .flow-visual { grid-column: 2 / 7; }
.flow-work--first-work .flow-copy { grid-column: 8 / 12; align-self: start; margin-top: 4%; }
.flow-work--first-work .flow-ghost-number { right: 5%; bottom: 12%; }

.flow-work--inner-order { min-height: 106vh; padding-bottom: 17vh; }
.flow-work--inner-order .flow-visual { grid-column: 4 / 12; }
.flow-work--inner-order .flow-copy { grid-column: 1 / 6; grid-row: 1; align-self: end; margin-bottom: -9%; }
.flow-work--inner-order .flow-ghost-number { top: 7%; left: 5%; }

.flow-ending {
  width: min(760px, calc(100% - 40px));
  margin: 0 auto;
  padding: 10vh 20px 16vh;
  color: var(--ash);
  font-family: var(--serif);
  font-size: clamp(18px, 2.2vw, 30px);
  line-height: 1.9;
  text-align: center;
}