/* ═══════════════════════════════════════════════════════════════════
   rainbow.css — one tested implementation, shared by all three builds.

   This is the single most-rewritten thing in the project's history, so
   the reasoning is written down rather than rediscovered:

   · It is the SIX-STRIPE PRIDE FLAG, not a smooth spectrum sweep. A
     swept gradient only ever shows part of the spectrum at any instant
     — a word can read blue-to-orange with no green in it at all, which
     is why earlier attempts kept getting called "not rainbow".
     Hard-stopped bands show all six colours, always.

   · background-size is set in `em`, with repeat-y, so EVERY line of a
     wrapped heading gets its own complete flag. Sizing the gradient to
     the element instead would smear one flag across all the lines and
     give each line a single colour.

   · display:inline-block is required. Without a laid-out box the
     gradient has nothing to paint into and the transparent text simply
     disappears.

   · NO -webkit-text-stroke, ever. A stroke is centred on the glyph
     edge, so half its width lands inside the letter; on a heavy face it
     swallows the fill and the word renders as a dark blob. That is the
     "GAY is completely blurred out / it's black" bug. Separation comes
     from drop-shadow, which paints entirely outside the glyph.

   · Both -webkit-text-fill-color and color must be transparent, for
     Safari and for everything else respectively.
   ═══════════════════════════════════════════════════════════════════ */

.rainbow {
  display: inline-block;
  background-image: linear-gradient(
    180deg,
    #E40303 0    16.67%,   /* red    */
    #FF8C00 16.67% 33.33%, /* orange */
    #FFED00 33.33% 50%,    /* yellow */
    #008026 50%    66.67%, /* green  */
    #004DFF 66.67% 83.33%, /* blue   */
    #750787 83.33% 100%    /* violet */
  );
  /* Tunable so a hero word can fit all six bands inside its cap height
     while a wrapping heading keeps one flag per line. Defaults suit a
     multi-line heading; use .rainbow-fit for a single big word. */
  --flag-h: 1em;
  --flag-y: 0em;
  background-size: 100% var(--flag-h);
  background-repeat: repeat-y;
  background-position: 0 var(--flag-y);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* Yellow band against a light panel needs help; this is enough edge
     to hold the letterform without touching the fill. */
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.38));
}

/* Single-line hero word: squeeze the flag into the cap height, so
   violet isn't left below the baseline where the glyph never reaches. */
.rainbow-fit {
  --flag-h: .84em;
  --flag-y: .025em;
  background-repeat: no-repeat;
}

/* Over a photo the word has to survive whatever is behind it. */
.rainbow-onphoto {
  filter:
    drop-shadow(0 0 3px rgba(0,0,0,.95))
    drop-shadow(0 4px 18px rgba(0,0,0,.8));
}

/* Optional: a slow drift of the bands, for versions that want motion.
   Kept off by default — a flag that stays still reads as a flag. */
.rainbow-drift { animation: rainbow-drift 2.4s linear infinite; }
@keyframes rainbow-drift { to { background-position: 0 1.04em; } }

/* If background-clip:text isn't supported, transparent text would leave
   the word invisible — fall back to a flat colour rather than nothing. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .rainbow {
    background: none;
    -webkit-text-fill-color: #E40303;
    color: #E40303;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rainbow-drift { animation: none; }
}