/* ============ MARKAT — typographic brand index ============ */
.bp{max-width:var(--maxw);margin:0 auto;padding:clamp(110px,15vh,150px) clamp(20px,4vw,56px) 100px}
.bp__head{max-width:760px;margin-bottom:52px}
.bp__head .eyebrow{margin-bottom:16px}
.bp__lead{margin-top:18px;color:var(--text-2);max-width:52ch}

.bindex{border-top:1px solid var(--line)}
.brow{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr) auto auto;align-items:center;gap:clamp(14px,3vw,36px);
  padding:clamp(16px,2.4vw,26px) 6px;border-bottom:1px solid var(--line);transition:background .35s var(--ease),padding-left .35s var(--ease)}
.brow:hover{background:rgba(255,255,255,.018);padding-left:16px}
.brow__idx{font-family:var(--mono);font-size:.7rem;color:var(--text-3);letter-spacing:.1em}
.brow__name{font-size:clamp(1.6rem,4.4vw,3.2rem);font-weight:600;letter-spacing:-.02em;line-height:1.04;
  transition:color .3s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brow:hover .brow__name{color:#fff}
.brow__models{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--text-3);max-width:300px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right;transition:opacity .3s var(--ease)}
/* the hover-peek photo lands where the models column sits — fade the column
   under it instead of letting "URUS · Revuelto…" poke out from behind */
.brow:hover .brow__models,.brow:focus-visible .brow__models{opacity:0}
.brow__count{font-family:var(--mono);font-size:.78rem;color:var(--text-2);border:1px solid var(--line);border-radius:100px;
  padding:.45em 1em;white-space:nowrap;transition:border-color .3s,color .3s}
.brow:hover .brow__count{border-color:var(--line-3);color:var(--text)}
.brow__count b{color:var(--accent);font-weight:600}

/* hover image reveal */
.brow__peek{position:absolute;right:clamp(120px,22vw,320px);top:50%;width:230px;aspect-ratio:16/10;border-radius:12px;overflow:hidden;
  transform:translateY(-50%) scale(.86) rotate(-2deg);opacity:0;pointer-events:none;z-index:3;border:1px solid var(--line-2);
  transition:opacity .35s var(--ease-out),transform .45s var(--ease-out);box-shadow:0 24px 60px rgba(0,0,0,.55)}
.brow:hover .brow__peek,.brow:focus-visible .brow__peek{opacity:1;transform:translateY(-50%) scale(1) rotate(0)}
.brow__peek img{width:100%;height:100%;object-fit:cover}

/* on-order brands */
.border-sec{margin-top:64px}
.border-sec .eyebrow{margin-bottom:20px}
.bmuted{display:flex;flex-wrap:wrap;gap:10px}
.bmuted a{font-family:var(--mono);font-size:.76rem;letter-spacing:.06em;color:var(--text-3);border:1px dashed var(--line);
  border-radius:100px;padding:.6em 1.15em;transition:color .3s,border-color .3s}
.bmuted a:hover{color:var(--text);border-color:var(--line-3)}

@media (max-width:760px){
  .brow{grid-template-columns:36px minmax(0,1fr) auto}
  .brow__models{display:none}
  .brow__peek{display:none}
}

/* --- Night Visit: illuminated signage — the name flickers ON like a sign --- */
.brow:hover .brow__name,.brow:focus-visible .brow__name{color:#fff;
  text-shadow:0 0 22px rgba(255,233,196,.22),0 0 64px rgba(255,233,196,.09);
  animation:signflick .55s var(--ease) 1}
@keyframes signflick{0%{opacity:.55}14%{opacity:.95}26%{opacity:.45}40%{opacity:1}58%{opacity:.85}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.brow:hover .brow__name,.brow:focus-visible .brow__name{animation:none}}