/* =====================================================================
   BANDS — the ground/foreground pairs
   Each band takes a --ground-* and its matching --on-*. THAT PAIRING IS
   THE POINT: a band never takes a raw palette token directly, so a future
   split of --ink or --cream into separate ground and foreground values
   lands here without re-auditing every section.
   ===================================================================== */

.band-plum{background:var(--ground-dark);color:var(--on-dark)}
.band-plum .in{display:flex;gap:5vw;align-items:center}
.band-plum .dots{flex:0 0 min(30vw,340px);position:relative}
.band-plum .dots svg{width:100%;height:auto}
.band-plum .body{color:var(--on-dark-body)}
@media(max-width:920px){
  .band-plum .in{flex-direction:column;align-items:flex-start}
  .band-plum .dots{width:min(260px,60vw)}
}

.band-cream{background:var(--ground-alt);color:var(--on-alt)}

.band-slate{background:var(--ground-slate);color:var(--on-slate)}
.band-slate .in{display:flex;gap:4vw;align-items:center;max-width:1040px}
@media(max-width:760px){.band-slate .in{flex-direction:column;align-items:flex-start}}

/* ---- the photo band ----
   The wash sits OVER the photograph and UNDER the text. Every text
   element on this band carries its own opaque backing — see
   components/stat-arc.css for why that is a guarantee and not a style. */
.photo{
  position:relative;
  min-height:56vh;
  display:flex;align-items:flex-end;
  overflow:hidden;
  padding:96px 34px;
  color:var(--on-dark);
  background:
    linear-gradient(160deg,var(--photo-wash-a),var(--photo-wash-b)),
    radial-gradient(120% 90% at 20% 10%,var(--photo-glow-gold),transparent 60%),
    radial-gradient(100% 80% at 85% 85%,var(--photo-glow-accent),transparent 55%);
}
.photo .ph{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;
  mix-blend-mode:luminosity;opacity:.5;
}
.photo .in{position:relative;z-index:2;width:100%}
.photo h2{max-width:22ch}