/* SCENE 07 — ASSOCIATIONS. Sixteen corporate names as hairline chips.
   Base (and body.is-static) layout: two wrapped, container-aligned
   chip rows, everything visible with no motion. The .s07--live class
   (added only in the motion branch) turns the rows into full-bleed
   counter-traveling marquees. */

.s07 {
  padding-block: clamp(110px, 15vw, 160px);
  overflow: clip;
}

.s07-h2 {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  max-width: 22ch;
}

.s07-head .s07-rule {
  margin-top: 48px;
  transform-origin: left center;
}

.s07-rows {
  margin-top: var(--rhythm-layer);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* static rows share the container's left grid edge */
.s07-row {
  padding-inline: max(var(--pad), calc((100% - var(--container)) / 2 + var(--pad)));
}

.s07-set {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.s07-chip {
  flex: none;
  padding: 13px 28px;
  border: 1px solid rgba(156, 85, 51, .25);
  border-radius: 999px;
  font-weight: 300;
  font-size: .82rem;
  letter-spacing: .07em;
  color: color-mix(in srgb, var(--ink) 76%, transparent);
  white-space: nowrap;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.s07-chip:hover {
  border-color: var(--earth);
  color: var(--ink);
}

/* ---------- live marquee mode (motion branch only) ---------- */

.s07--live .s07-row {
  padding-inline: 0;
  overflow: hidden;
}
.s07--live .s07-track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.s07--live .s07-set {
  flex: none;
  flex-wrap: nowrap;
  padding-right: 14px; /* keeps the loop seam at the same 14px gap */
  will-change: transform;
}

@media (max-width: 599px) {
  .s07-chip { padding: 11px 20px; font-size: .76rem; }
}

/* official partner logos (auto-swap when files exist): monochrome
   treatment keeps mixed marks cohesive on the bone marquee */
.s07-chip--logo .s07-chip__name { display: none; }
.s07-chip__logo {
  height: 26px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  filter: grayscale(1) opacity(.75);
  transition: filter .3s var(--ease);
}
.s07-chip--logo:hover .s07-chip__logo { filter: none; }

/* ember band (round 12): bone chips and white logo knockouts on the
   dark orange gradient */
.s07 .s07-chip {
  border-color: rgba(243, 240, 232, .34);
  color: color-mix(in srgb, var(--bone) 88%, transparent);
  background: rgba(243, 240, 232, .04);
}
.s07 .s07-chip:hover { border-color: rgba(243, 240, 232, .7); }
.s07 .s07-chip__logo {
  filter: brightness(0) invert(1) opacity(.92);
}
.s07 .s07-chip--logo:hover .s07-chip__logo { filter: brightness(0) invert(1); }
.s07 .s07-chip:hover { color: var(--bone); }