@layer components {
  /* A run of a page on its own ground, edge to edge, so one part of the story reads apart from
     the next. The deep stage turns the ink inside it to the stage's own. */
  .site-band {
    background-color: var(--site-band-ground);
  }

  .site-band--canvas { --site-band-ground: var(--color-bg); }
  .site-band--sunken { --site-band-ground: var(--color-surface-sunken); }
  .site-band--sage { --site-band-ground: var(--color-done-soft); }
  .site-band--steel { --site-band-ground: var(--color-info-soft); }
  .site-band--brass { --site-band-ground: var(--color-celebrate-soft); }

  /* On a tinted ground the page's warm hairline turns to a smudge; there the rules are drawn in
     the ink itself, faintly. */
  .site-band:is(.site-band--sunken, .site-band--sage, .site-band--steel, .site-band--brass) {
    --color-border: oklch(var(--lch-ink-display) / var(--site-band-rule-alpha));
    --color-border-strong: oklch(var(--lch-ink-display) / var(--site-band-rule-strong-alpha));
  }

  .site-band--stage {
    --site-band-ground: var(--color-stage);
    --color-ink: var(--color-stage-ink);
    --color-ink-display: var(--color-stage-ink);
    --color-ink-muted: var(--color-stage-muted);
    --color-ink-faint: var(--color-stage-muted);
    --color-border: var(--color-stage-rule);
    --color-accent-ink: var(--color-stage-ink);
    --color-link: var(--color-stage-ink);
    background:
      radial-gradient(ellipse at 50% 40%, var(--color-stage-glow) var(--length-zero), transparent var(--site-glow-reach)),
      var(--site-band-ground);
    color: var(--color-stage-ink);
  }

  /* A part that brings its own ground lets the band's show through. */
  .site-band > :is(.hero, .site-call, .site-section, .site-read, .site-beliefs, .site-facts, .site-quote, .site-legal) {
    background: none;
  }
}