/* ============================================================
   03 · BRANDS
   ============================================================ */
/* ---- the film behind the wall ----
   Hard rule from Tanyi: this section sits on photography, and the photography
   stays black-and-white here even though the hero strip is now in colour.
   Legibility is bought with the scrim, never by removing the film. */
.brands{position:relative;isolation:isolate}
.brands__film{
  position:absolute;inset:0;z-index:0;
  overflow:hidden;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
}
/* The reel Tanyi asked for: the ORIGINAL centred vertical strip, rebuilt to the
   same geometry the hero backdrop used before it moved right and turned colour
   (width min(880px,94vw), -4deg, sprockets punched in linen, 46vh frames).
   It is centred and it is black-and-white. Both are the point — do not turn
   this into the horizontal strip again, and do not drop the grayscale. */
.brands__strip{
  position:relative;
  width:min(880px,94vw);
  padding:clamp(18px,2vw,30px) clamp(42px,4.6vw,64px);
  display:flex;flex-direction:column;
  gap:clamp(20px,2.6vw,38px);
  background:var(--espresso);
  transform:rotate(-4deg);
  box-shadow:0 26px 70px rgba(23,23,23,.34);
}
.brands__strip::before,.brands__strip::after{
  content:"";position:absolute;top:0;bottom:0;
  width:clamp(16px,1.6vw,24px);border-radius:4px;
  background-image:linear-gradient(to bottom,var(--linen) 0 26px,transparent 26px 62px);
  background-size:100% 62px;
}
.brands__strip::before{left:clamp(11px,1.2vw,17px)}
.brands__strip::after {right:clamp(11px,1.2vw,17px)}
.brands__strip .film-frame img{
  width:100%;height:clamp(230px,46vh,520px);
  object-fit:cover;object-position:center 32%;
  filter:grayscale(1) contrast(1.2);
}
/* The scrim IS the legibility. Linen over the film where the marks sit,
   thinning at the edges so the film reads as a photograph rather than a
   texture. Tuned against the faintest mark in the set (STK, a hairline
   outline) — if a mark is ever added that is lighter than that, raise the
   centre stop rather than dropping the film.
   Opened up from 94/91/78/66: at 94% the photography behind the wall was
   barely there. 72% centre lets roughly five times as much frame through and
   still holds the marks at 7.1:1 against a worst-case black frame — AA wants
   4.5:1. The room for that came from taking .brands__mark to full opacity;
   the two changes go together, so do not lower the scrim further without
   re-measuring. */
.brands__film::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(128% 92% at 50% 50%,
      color-mix(in srgb,var(--linen) 72%,transparent) 0%,
      color-mix(in srgb,var(--linen) 68%,transparent) 46%,
      color-mix(in srgb,var(--linen) 60%,transparent) 78%,
      color-mix(in srgb,var(--linen) 52%,transparent) 100%),
    linear-gradient(to bottom,
      var(--linen) 0,color-mix(in srgb,var(--linen) 0%,transparent) 16%,
      color-mix(in srgb,var(--linen) 0%,transparent) 84%,var(--linen) 100%);
}
/* the wall and its copy ride above the film */
.brands > .wrap{position:relative;z-index:1}

.brands__lead{
  margin-top:clamp(1.5rem,2.8vw,2.4rem);
  max-width:52ch;margin-inline:auto;
  text-align:center;text-wrap:pretty;
  font-size:var(--t-lead);font-weight:300;line-height:1.7;
}
/* Flex rather than grid so the ragged final row (24 marks over 5 columns)
   centres itself instead of hanging left against an empty cell. */
.brands__grid{
  --bcols:3;
  --bgap-x:clamp(1.25rem,3vw,3rem);
  --bgap-y:clamp(2.2rem,3.6vw,3.4rem);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--bgap-y) var(--bgap-x);
  margin-top:clamp(3.25rem,6.5vw,6rem);
  padding:0;list-style:none;
}
@media (min-width:640px){.brands__grid{--bcols:4}}
@media (min-width:1080px){.brands__grid{--bcols:5}}
.brands__item{
  /* the epsilon keeps sub-pixel rounding from wrapping the last item early */
  flex:0 0 calc((100% - (var(--bcols) - 1) * var(--bgap-x)) / var(--bcols) - .02px);
  display:flex;align-items:center;justify-content:center;min-width:0;
}

/* Optical balancing.
   Every source shares one 600x200 canvas, so a plain contain-fit would set
   BENIHANA (540x109 of ink at 81% coverage — a solid slab) at the same visual
   weight as STK (540x127 at 11% — a hairline outline). --k is a per-mark scale
   derived from measured ink area, (median_mass / mark_mass)^0.45 where
   mass = sqrt(ink pixels), clamped to 0.78–1.30. It is applied as a transform
   rather than a width/height so it holds whichever axis the column constrains.
   Values live inline on each <li>, next to the mark they correct. */
.brands__mark{
  width:100%;
  /* height:auto is load-bearing — the width/height attributes that reserve
     space during load also act as presentational hints, and height="200"
     would otherwise beat aspect-ratio and leave every box 200px tall */
  height:auto;
  max-width:clamp(132px,17vw,240px);
  aspect-ratio:3 / 1;
  object-fit:contain;
  transform:scale(var(--k,1));
  /* was .72, then .92 — full opacity now, because the scrim was opened up to
     let the film through and the marks have to win back what that cost them.
     The set still reads as one wall because --k equalises their ink weight,
     not their opacity. */
  opacity:1;
  /* A tight linen halo, not a glow: it separates a hairline mark like STK from
     whatever frame happens to sit behind it, without putting a card or a chip
     under the logo — that rule still stands. */
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--linen) 88%,transparent));
  transition:transform .55s var(--ease-soft),filter .55s var(--ease-soft);
}
.brands__item:hover .brands__mark{
  transform:scale(calc(var(--k,1) * 1.04));
  filter:drop-shadow(0 0 8px color-mix(in srgb,var(--linen) 94%,transparent));
}