/* brand.css — brand landing intro + brand index grid (reuses .listing grid/cards) */
.brandhead { padding: 44px 20px 8px; max-width: 1180px; margin: 0 auto; }
.brandhead .brandhead-crumb { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: #6b6157; margin-bottom: 14px; }
.brandhead .brandhead-crumb a { color: #b8482a; }
.brandhead .brandhead-title { font-size: 32px; margin: 0 0 6px; }
.brandhead .brandhead-kicker { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: #b8482a; }
.brandhead .brandhead-intro { max-width: 70ch; color: #43392f; font-size: 16px; line-height: 1.6; margin: 14px 0 0; }

.brand-index { padding: 16px 20px 56px; max-width: 1180px; margin: 0 auto; }
.brand-index .brand-index-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.brand-index .brand-card { display: flex; flex-direction: column; justify-content: center; border: 1px solid #d8cfc0; background: #faf6ef; color: #211c17; padding: 20px 22px; }
.brand-index .brand-card:hover { text-decoration: none; box-shadow: 0 6px 22px rgba(33,28,23,0.10); }
.brand-index .brand-card-name { font-size: 21px; font-weight: 800; }
.brand-index .brand-card-count { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: #6b6157; margin-top: 4px; }

@media (min-width: 760px) { .brand-index .brand-index-grid { grid-template-columns: repeat(4, 1fr); } }