/* Frame the original artwork in SVG viewports; balance wide and tall marks. */
.brandov {
  --brand-logo-width: 120px;
  --brand-logo-gap: 24px;
  background: #fff;
  padding: 88px 32px 64px;
}
.brandov-inner {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px 64px;
}
.brandov-inner > div { min-width: 0; }
.brandov h3 { color: var(--body-text); }
.brandov ul { margin: 22px 0 0; padding: 0; }
.brandov li a {
  display: grid;
  grid-template-columns: var(--brand-logo-width) minmax(0, 1fr);
  align-items: center;
  column-gap: var(--brand-logo-gap);
  min-height: 60px;
  padding: 4px 0;
  border-bottom-width: 2px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .01em;
}
.brandov-logo {
  display: block;
  justify-self: center;
  width: min(100%, var(--brand-mark-width, 112px));
  height: var(--brand-mark-height, 44px);
  overflow: hidden;
}
/* Balance detailed wordmarks against dense symbols without altering artwork. */
.brandov a[href$="brand=REGNOMON"],
.brandov a[href$="brand=BELAFONTE"] { --brand-mark-height: 50px; }
.brandov a[href$="brand=RATS"] { --brand-mark-height: 48px; }
.brandov a[href$="brand=HIDE%26SEEK"],
.brandov a[href$="brand=Mr.GOODMAN%20%26%20PARTNERS"],
.brandov a[href$="brand=BLACK%20FLYS"] { --brand-mark-width: 120px; }
.brandov a[href$="brand=LIBE"] {
  --brand-mark-width: 72px;
  --brand-mark-height: 40px;
}
.brandov a[href$="brand=VANS"],
.brandov a[href$="brand=REAL"] { --brand-mark-width: 96px; --brand-mark-height: 40px; }
.brandov a[href$="brand=HTC"],
.brandov a[href$="brand=SPITFIRE"] { --brand-mark-height: 42px; }
.brandov li a > span {
  grid-column: 2;
  min-width: 0;
  overflow-wrap: anywhere;
}
.brandov li a:hover { -webkit-text-stroke: 0; }
.brandov li a:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 4px;
}
@media (max-width: 1023px) {
  .brandov-inner {
    grid-template-columns: minmax(0, 1fr);
    max-width: 600px;
  }
  .brandov li a { font-size: 20px; }
}
@media (max-width: 600px) {
  .brandov {
    --brand-logo-width: 96px;
    --brand-logo-gap: 16px;
    padding: 80px 24px 48px;
  }
  .brandov-logo { height: min(var(--brand-mark-height, 44px), 46px); }
  .brandov li a { font-size: 18px; }
}
@media (max-width: 360px) {
  .brandov {
    --brand-logo-width: 80px;
    --brand-logo-gap: 16px;
    padding-inline: 20px;
  }
  .brandov li a { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .brandov.open { animation: none; }
}