/* Companies and creators on Roster: a table of 12 cells (4 columns x 3 rows from 640px, 3 x 4 on phones).
   Inner hairlines only, drawn in when the section enters; logos then appear in a scattered order.
   Brands are monochrome marks; creators are small neutral cards (avatar, name, total followers).
   Nothing here is clickable: full opacity, no hover reaction, no ambient highlight. */
.onr-sec { padding: 64px 0 16px; }
.onr-tbl { --line: rgba(20,18,16,.14); --cell-h: 148px; list-style: none; margin: 32px auto 0; padding: 0; max-width: 1080px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.onr-cell { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; height: var(--cell-h); padding: 18px; }

/* hairlines: right edge and bottom edge of each cell, inner ones only */
.onr-cell::before, .onr-cell::after { content: ""; position: absolute; pointer-events: none;
  transition: transform 1s cubic-bezier(.65, 0, .35, 1); transition-delay: calc(var(--row, 0) * 90ms); }
.onr-cell::before { top: 8%; bottom: 8%; right: 0; width: 1px; transform: scaleY(0); transform-origin: 50% 0;
  background: linear-gradient(180deg, transparent, var(--line) 28%, var(--line) 72%, transparent); } /* each segment fades out at both ends */
.onr-cell::after { left: 4%; right: 4%; bottom: 0; height: 1px; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, transparent, var(--line) 28%, var(--line) 72%, transparent); }
.onr-tbl.is-in .onr-cell::before { transform: scaleY(1); }
.onr-tbl.is-in .onr-cell::after { transform: scaleX(1); }
.onr-cell:nth-child(4n)::before { display: none; }
.onr-cell:nth-child(n+9)::after { display: none; }
.onr-cell:nth-child(n+5) { --row: 1; } .onr-cell:nth-child(n+9) { --row: 2; }

/* content reveal: scattered order (--o set by sections/onr.js), after the lines */
.onr-cell > * { opacity: 0; transform: translateY(8px); filter: blur(6px);
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1), filter .7s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(420ms + var(--o, 0) * 70ms); }
.onr-tbl.is-in .onr-cell > * { opacity: 1; transform: none; filter: none; }

/* brands: solid marks at full opacity (nothing here is clickable, so nothing looks dimmed or "hoverable") */
.onr-cell:not(.onr-cell--cr) > img { display: block; height: calc(var(--h) * 1.1px); width: auto; max-width: 78%; }

/* creators: light neutral square cards */
.onr-card { display: grid; justify-items: center; align-content: center; gap: 4px; width: 112px; aspect-ratio: 1; padding: 12px 8px; border-radius: 18px; text-align: center;
  background: rgba(255,255,255,.5); box-shadow: inset 0 0 0 1px rgba(20,18,16,.07), 0 1px 2px rgba(20,18,16,.03), 0 8px 20px -16px rgba(20,18,16,.22); }
.onr-card img { width: 40px; height: 40px; border-radius: 99px; object-fit: cover; margin-bottom: 4px; filter: grayscale(1) contrast(1.1); box-shadow: 0 0 0 1px rgba(20,18,16,.1); }
.onr-card-n { font-size: 13px; font-weight: 600; letter-spacing: -.015em; line-height: 1.15; color: var(--ink, #141210); }
.onr-card-f { font-size: 11.5px; font-weight: 500; line-height: 1.1; color: var(--mute, #6E675D); font-variant-numeric: tabular-nums; }

@media (max-width: 1023px) { .onr-tbl { --cell-h: 132px; max-width: 760px; } .onr-card { width: 104px; } }
@media (max-width: 639px) {
  .onr-sec { padding-top: 48px; }
  .onr-tbl { --cell-h: 112px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 22px; }
  .onr-cell { padding: 10px 6px; }
  .onr-cell:nth-child(4n)::before { display: block; } .onr-cell:nth-child(n+9)::after { display: block; }
  .onr-cell:nth-child(3n)::before { display: none; } .onr-cell:nth-child(n+10)::after { display: none; }
  .onr-cell { --row: 0; } .onr-cell:nth-child(n+4) { --row: 1; } .onr-cell:nth-child(n+7) { --row: 2; } .onr-cell:nth-child(n+10) { --row: 3; }
  .onr-cell:not(.onr-cell--cr) > img { height: calc(var(--h) * .8px); max-width: 84%; }
  .onr-card { width: 96px; padding: 8px 5px; border-radius: 15px; gap: 3px; }
  .onr-card img { width: 30px; height: 30px; margin-bottom: 2px; }
  .onr-card-n { font-size: 10.5px; letter-spacing: -.02em; white-space: nowrap; } .onr-card-f { font-size: 9.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .onr-cell::before, .onr-cell::after { transform: none !important; transition: none; }
  .onr-cell > * { opacity: 1; transform: none; filter: none; transition: none; }
}