/* Brands (2026-10-10, he: "where should we add the brands that I worked with ?", then his list). Between his story
   and the projects, set to the right as the story is, so the page keeps its rhythm (left, right, left, right, left)
   and the green line has the open column beside it. The names in the big type, each with its logo in front like a
   letter (from each brand's own site), each name its own colour from the landing's palette when it moves.
   m-brands.js drives it. */
.brands { position: relative; z-index: 2; padding: 6vh 32px 4vh; color: var(--white); }
.b-in { margin-left: auto; width: min(66vw, 1100px); }
/* bigger and at full strength (the audit's item 10: at 13 px and 62% the proof read as decoration) */
.b-title { margin: 0 0 .9em; font: 600 20px/1.35 'Azeret Mono', monospace; letter-spacing: .02em; color: var(--white); }
.b-list { list-style: none; margin: 0; padding: 0; font-size: clamp(28px, 3.7vw, 68px); line-height: 1.14; }
.b-item { display: inline; white-space: nowrap; margin-right: .5em; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }   /* a click or a tap plays it */
.b-name { font-weight: 800; letter-spacing: -.035em; font-variation-settings: 'opsz' 96; font-kerning: none; transition: color .3s; }
.b-name .bc { display: inline-block; transform-origin: 50% 80%; }
/* the logos, a capital's height, in their own colours */
.b-logo { display: inline-block; width: auto; height: .8em; margin-right: .22em; vertical-align: -.08em; }
.b-logo.b-tile { border-radius: .2em; }
.b-logo.b-wide { height: .46em; vertical-align: .08em; }
.b-item.on .b-name { color: var(--bc); }

@media (max-width: 760px) {
  .brands { padding: 4vh 18px 2vh; }
  .b-in { width: 100%; }
  .b-title { font-size: 16px; }
  .b-list { line-height: 1.2; }
}