/* ═══ THE LOGO LOCKUP ═══════════════════════════════════════════════════════
   One shared component, used on agencies.html · about.html · chief-of-staff.html.
   Added 2026-08-11. If you change the look, change it HERE — the markup in each
   page is deliberately identical so there is only ever one place to tune.

   TWO ROWS, ALWAYS LABELLED, ALWAYS SEPARATE. Work done FOR someone is a
   different claim from press written ABOUT the work, and merging them is the
   usual way a wall like this stops being believable. Never collapse them.

   TREATMENT: grayscale + opacity, no per-file editing. NOT brightness(0) —
   that flattens a mark to one silhouette, which erases every KNOCKOUT logo
   (Harley, Groupon, Cinnabon are white type inside a dark shape; they rendered
   as featureless blobs on the first attempt). Grayscale keeps the internal
   contrast those depend on.

   SIZING IS OPTICAL, NOT UNIFORM: a peacock, a shield and a wordmark all need
   different pixel heights to carry the same visual weight, which is why the
   per-mark overrides below exist. Add a new logo -> look at it rendered, then
   tune its height here. Do not assume the default is right.

   Tokens are written as var(--x, #fallback) because the three host pages name
   their palettes differently; the fallbacks are the house values.
   ══════════════════════════════════════════════════════════════════════════ */

.proof__k{
  font-family:var(--mono,"JetBrains Mono",ui-monospace,Consolas,monospace);
  font-weight:600;font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--olive,#5C5A30);
  /* The label sits on a faint full-width hairline the logos hang from. padding-bottom is
     label -> rule, margin-bottom is rule -> logos. Grew from a bare .85rem bottom margin
     (2026-08-11) — that read as crunched, the label glued to the row with nothing to
     align to. rgba(92,90,48,.28) is the house olive at low alpha: a shelf, not a divider. */
  margin:0 0 clamp(1.2rem,2.6vw,1.6rem);
  padding-bottom:.6rem;
  border-bottom:1px solid rgba(92,90,48,.28);
}
/* block -> next block must stay clearly LARGER than the label->logos gap above, or the
   second kicker ("Written about in") reads as attached to the row above it rather than to
   its own logos. Grown in step with the label gap so the hierarchy holds. */
.proof__k--2{margin-top:clamp(40px,4.8vw,56px)}
/* When the lockup FOLLOWS PROSE inside a section (about.html, chief-of-staff.html) it needs
   real air above it or it reads as a trailing part of the last paragraph. When it IS its own
   section (agencies.html) it must not, or the section goes top-heavy. This selector separates
   the two cases on its own: only the prose-following kicker has a <p> immediately before it.
   An HTML comment between them doesn't break adjacency. */
p + .proof__k{margin-top:clamp(40px,5vw,64px)}

.logos{
  list-style:none;display:flex;flex-wrap:wrap;align-items:center;
  /* axes split on purpose: the generous horizontal air is what makes the row feel
     unhurried, but the SAME value vertically turns a wrapped row (narrow columns —
     the chief-of-staff page does this) into what looks like a second, unrelated
     group. Keep row-gap tight so a wrap still reads as one lockup. */
  column-gap:clamp(22px,3.6vw,52px);row-gap:16px;margin:0;padding:0;
}
.logos li{display:flex;align-items:center}
.logos img{
  height:26px;width:auto;max-width:150px;object-fit:contain;
  filter:grayscale(1);opacity:.66;
  transition:opacity .18s ease,filter .18s ease;
}
.logos li:hover img{opacity:1;filter:none}

/* optical balance — tall marks come down, small wordmarks come up */
.logos img[alt="NBC"]{height:22px}
.logos img[alt="Harley-Davidson"]{height:34px;opacity:.58}
.logos img[alt="Groupon"]{height:23px;opacity:.55}
.logos img[alt="Cinnabon"]{height:30px;opacity:.6}
.logos img[alt="Applebee's"]{height:32px}
.logos img[alt="Wolverine"]{height:21px}
.logos img[alt="The Atlantic"]{height:46px}
.logos img[alt="Wired"]{height:19px}
.logos img[alt="CNN"]{height:21px}

/* the "see the bigger work" line some hosts carry under the rows */
.proof__more + .proof__more{margin-top:.35rem}
.proof__more{
  margin:clamp(18px,2.4vw,26px) 0 0;font-size:.92rem;
  color:var(--muted,var(--ink-soft,#535B4C));
}

@media (max-width:640px){
  .proof__k{margin-bottom:1.25rem;padding-bottom:.55rem}
  .proof__k--2{margin-top:36px}
  .logos{column-gap:26px;row-gap:14px}
  .logos img{height:21px;max-width:112px}
  .logos img[alt="Harley-Davidson"]{height:28px}
  .logos img[alt="Cinnabon"]{height:24px}
  .logos img[alt="Applebee's"]{height:26px}
  .logos img[alt="The Atlantic"]{height:38px}
  .logos img[alt="Wired"]{height:15px}
}