/* A brand's own page (/wheels/fuel-off-road, /tires/toyo, /lift-kits/...):
   its mark at the top, its name as the heading in words, and the row of
   other marks under the wheels. Loaded only on a brand page -- theme.css is
   fetched by every page before it is useful and sits at its budget
   (test_what_a_page_costs). */
.brand-head {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 22px 16px 20px; margin: 0 0 18px;
  background: linear-gradient(180deg, var(--ink-1), var(--ink-0));
  border: 1px solid var(--line-bright); border-radius: 14px; text-align: center;
}
.brand-head-title { margin: 0; line-height: 1; }
/* The page's subject, not one of 35 doors. Width-capped for long marks. */
.brand-head-logo {
  height: 56px; max-height: 56px; max-width: min(300px, 74vw);
  object-fit: contain; display: block;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55));
}
/* The heading in words, under the mark: the mark is the picture, this is
   what the page is called ("Fuel Off-Road Wheels"). */
.brand-head-words { font-size: var(--text-section); line-height: 1.1; color: var(--text-0); }
/* What we carry of the brand, counted, under the products (_brand_facts.html). */
.brand-facts { margin: 8px 0 0; padding-top: 18px; border-top: 1px solid var(--line); max-width: 72ch; }
.brand-facts h2 { font-size: var(--text-name); margin: 0 0 6px; }
.brand-facts p { margin: 0; color: var(--text-1); }
/* Count and way-out on one line: a corner link needs a row of its own on a
   phone, and that row sat 37px above the wheels. */
.brand-head-meta {
  margin: 0; display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: center; gap: 4px 12px;
}
.brand-head-count {
  font-size: var(--text-label); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-2);
}
.brand-head-back {
  color: var(--text-2); font-size: var(--text-small); text-decoration: none;
  padding: 8px; margin: -8px;  /* 44px tap target without moving the text */
}
.brand-head-back:hover { color: var(--volt); }

/* The other marks, under the wheels: a sideways row of .brand-tile doors at a
   fixed width, so it scrolls instead of stretching. */
.brand-strip {
  display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none;
  margin: 0 0 18px; padding-bottom: 4px;
}
.brand-strip::-webkit-scrollbar { display: none; }
.brand-strip-item {
  flex: 0 0 auto; width: 132px; min-height: 0; padding: 14px 10px 12px; gap: 10px;
}
.brand-strip-item img.brand-logo { height: 26px; max-height: 26px; }
.brand-strip-item .brand-tile-name { height: 26px; font-size: var(--text-label); }

@media (max-width: 620px) {
  .brand-head { padding: 16px 14px 14px; gap: 8px; }
  .brand-head-logo { height: 44px; max-height: 44px; }
}