/* Tumor — project layer on top of Swiss Grid.
   The tall orange stripes of the facade. */

/* one orange stripe runs down the edge of the hero render and grows in */
.sg--motif-stripe .sg-hero__media::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  width: clamp(10px, 1.2vw, 18px);
  background: var(--pdx-accent);
  transform-origin: top;
  animation: tumor-stripe 1.4s var(--pdx-ease) 1.6s both;
}
@keyframes tumor-stripe { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* section rules carry a short orange stripe at their start */
.sg--motif-stripe .sg-head,
.sg--motif-stripe .sg-chhead { position: relative; }
.sg--motif-stripe .sg-head::before,
.sg--motif-stripe .sg-chhead::before { content: ''; position: absolute; left: 0; top: -2px; width: calc((100% + var(--sg-gap)) / 12 - var(--sg-gap)); height: 6px; background: var(--pdx-accent); }

/* matrix numerals in the stripe colour */
.sg--motif-stripe .sg-features--matrix .sg-feat__no { color: var(--pdx-accent); }
.sg--motif-stripe .sg-features--matrix .sg-feat:hover .sg-feat__no { color: inherit; }