/* With BOISE AI: flow figures (src/vignettes/boise/*). Gold = Rillwright / the atlas / facts, cyan = BOISE AI.
 * Labels inside figures are real DOM text in the site's tokens; cyan appears only as a legend mark (--color-partner). */
.page-boise .vig--duo { height: clamp(300px, 24vw, 360px); margin: calc(-1 * var(--space-4)) 0 var(--space-6); }
.page-boise .vig--optional { height: clamp(240px, 20vw, 300px); margin: calc(-1 * var(--space-4)) 0 var(--space-5); }

.page-boise .vig-lbl {
  position: absolute; left: 0; top: 0; z-index: 1; display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap; font: 500 var(--text-xs)/1.25 var(--font-mono); letter-spacing: var(--track-wide); text-transform: uppercase;
  color: var(--color-ink); opacity: 0; transition: opacity 600ms var(--ease-out);
}
.page-boise .vig-lbl::before { content: none; }
.page-boise .vig-lbl.is-on { opacity: 1; }

@media (max-width: 760px) {
  /* figures run edge to edge on phones; the duo turns to run top to bottom */
  .page-boise .vig--duo { height: 560px; margin: calc(-1 * var(--space-3)) calc(-1 * var(--gutter)) var(--space-5); }
  .page-boise .vig--optional { height: 230px; margin: calc(-1 * var(--space-3)) calc(-1 * var(--gutter)) var(--space-4); }
  .page-boise .vig--duo.is-vert .vig-lbl--ch { width: 74px; white-space: normal; text-align: center; flex-direction: column; gap: 6px; line-height: 1.3; }
}
@media (prefers-reduced-motion: reduce) { .page-boise .vig-lbl { transition: none; } }