/* Joyvane Studios stripes: the staggered stack of colored pills from the design system cover.
   Pure CSS, decorative only. Load after tokens.css.

   Markup (always aria-hidden, always exactly five empty spans):
   <div class="stripes" aria-hidden="true"><span></span><span></span><span></span><span></span><span></span></div>

   Place it at the right edge of a section or the viewport so the pills bleed off that edge, as on the cover.
   Colors from top to bottom: sun, orange, red, magenta, blue. */

.stripes {
  --stripe-h: var(--space-12);          /* pill height: 48px */
  --stripe-gap: var(--space-4);         /* space between pills: 16px */
  --stripe-ground: var(--surface);      /* color of the dots: set to the section's background */
  display: flex;
  flex-direction: column;
  gap: var(--stripe-gap);
  overflow: hidden;
  pointer-events: none;
}

.stripes > span {
  --dot: calc(var(--stripe-h) / 4);
  --pitch: calc(var(--stripe-h) / 2);
  position: relative;
  display: block;
  height: var(--stripe-h);
  margin-left: var(--offset);
  margin-right: calc(var(--stripe-h) / -2);   /* the right end bleeds past the edge */
  border-radius: var(--radius-pill);
  background: var(--fill);
}

/* Three dots near the bleeding end, cut out in the ground color. */
.stripes > span::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(var(--stripe-h) * 0.75);
  width: calc(var(--pitch) * 3);
  height: var(--dot);
  transform: translateY(-50%);
  background:
    radial-gradient(circle at 50% 50%, var(--stripe-ground) calc(var(--dot) / 2), transparent calc(var(--dot) / 2 + 0.5px))
    0 0 / var(--pitch) var(--dot) repeat-x;
}

.stripes > span:nth-child(1) { --fill: var(--sun);     --offset: 16.7%; }
.stripes > span:nth-child(2) { --fill: var(--orange);  --offset: 8.3%; }
.stripes > span:nth-child(3) { --fill: var(--red);     --offset: 25%; }
.stripes > span:nth-child(4) { --fill: var(--magenta); --offset: 12.5%; }
.stripes > span:nth-child(5) { --fill: var(--blue);    --offset: 20.8%; }

/* Smaller pills on phones. */
@media (max-width: 600px) {
  .stripes { --stripe-h: var(--space-8); --stripe-gap: var(--space-3); }
}

/* Thin version for dividers and the footer: no dots. */
.stripes--thin { --stripe-h: var(--space-3); --stripe-gap: var(--space-2); }
.stripes--thin > span::after { display: none; }

/* Color bands: full-width sections in sun or orange that give the page rhythm.
   Markup: <section class="band band--sun"><div class="container"> heading, text, cards... </div></section>
   Text placed directly in the band is always --on-brand (navy).
   Anything inside a card keeps the card's own colors, so cards stay readable. */
.band { padding-block: var(--space-12); color: var(--on-brand); }
.band--sun { background: var(--sun); }
.band--orange { background: var(--orange); }
.band > .container > :is(h1, h2, h3, p) { color: inherit; }
.band > .container > p a:not(.btn) { color: inherit; }
.band .card { color: var(--ink); }

/* Hero layout helpers.
   Put the hero text and the stripes inside a .container, add .stripes--bleed to the stripes so they run
   to the right edge of the page, and wrap the section in .bleed-clip so the bleed never causes sideways scrolling.
   The text then lines up with the rest of the page, with no empty gap on wide screens. */
.bleed-clip { overflow-x: clip; }
.stripes--bleed {
  margin-right: calc(-1 * (max(0px, (100vw - var(--page-max, 1120px)) / 2) + max(var(--space-4), env(safe-area-inset-left, 0px))));
}