/* ============================================================
   BRAND DIRECTORY + BRAND PAGE
   ============================================================ */
.alpha{position:sticky;top:var(--bar-h-stuck);z-index:30;background:var(--milk);border-block:1px solid var(--line-soft);
  transition:top .45s var(--slow)}
.alpha__in{display:flex;align-items:center;gap:clamp(4px,.8vw,12px);height:56px;overflow-x:auto;scrollbar-width:none}
.alpha__in::-webkit-scrollbar{display:none}
.alpha a,.alpha span{flex:none;min-width:26px;height:30px;display:grid;place-items:center;font-size:var(--t-meta);
  color:var(--ink-45);transition:color .3s,background .3s;font-variant-numeric:tabular-nums}
.alpha a:hover{color:var(--ink);background:var(--ivory)}
.alpha .is-off{opacity:.3;pointer-events:none}

.bfeat{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,26px);padding-block:clamp(26px,3.4vw,52px)}
/* under a heading the row already has the heading's own air, so it only
   adds the little that keeps the two from touching */
.sec-head + .bfeat{padding-top:clamp(6px,1vw,15px)}
.bcard{display:grid;gap:12px}
.bcard__media{border-radius:var(--radius-md);aspect-ratio:4/5;overflow:hidden;background:var(--ivory);position:relative}
.bcard__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--slow),opacity .6s}
.bcard__media .alt{position:absolute;inset:0;opacity:0}
.bcard:hover .bcard__media .main{opacity:0}
.bcard:hover .bcard__media .alt{opacity:1;transform:scale(1.03)}
.bcard__n{font-family:var(--display);font-weight:300;font-size:var(--d4);line-height:1;letter-spacing:-.015em}
.bcard__k{font-size:var(--t-meta);color:var(--ink-45)}
.bcard__c{font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-25)}
@media (max-width:1024px){.bfeat{grid-template-columns:repeat(2,1fr)}}

.bletter{padding-top:clamp(26px,3vw,44px);scroll-margin-top:calc(var(--bar-h-stuck) + 70px)}
.bletter__h{font-family:var(--display);font-weight:300;font-size:var(--d3);line-height:1;
  padding-bottom:14px;border-bottom:1px solid var(--line)}
.blist{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.blist a{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:15px 24px 15px 0;
  border-bottom:1px solid var(--line-soft);transition:padding-left .45s var(--slow)}
.blist a:hover{padding-left:10px}
.blist b{font-weight:500;font-size:clamp(1rem,.8vw + .84rem,1.125rem)}
.blist span{font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-25)}
@media (max-width:860px){.blist{grid-template-columns:1fr}}

/* ---------- brand page ---------- */
/* the statistics row is framed evenly: the air under it answers the air
   between the copy above and the rule, so the band reads as one grid */
.bhero{position:relative;background:var(--ivory);overflow:hidden;
  padding-bottom:clamp(26px,2.4vw,36px)}
/* same hero system as the category pages: top-aligned split, one image height */
.bhero__in{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(18px,2.4vw,40px);align-items:end;
  padding-block:clamp(20px,2.6vw,40px) clamp(16px,1.9vw,28px)}
/* the copy keeps a measure of its own but starts on the container's own grid
   line, the same one the rule and the statistics below it start from */
.bhero__text{
  grid-column:1/7;display:grid;gap:0;justify-items:start;align-content:end;
  max-width:560px;margin-inline:0 auto;
}
.bhero__text .btn{margin-top:clamp(20px,2vw,26px)}
.bhero__n{font-family:var(--display);font-weight:300;font-size:var(--d1);line-height:.98;
  letter-spacing:-.022em;text-wrap:balance}
.bhero__p{color:var(--ink-70);font-size:var(--t-lead);max-width:46ch;text-wrap:pretty;
  margin-top:clamp(24px,2.4vw,32px)}
.bhero__fig{border-radius:var(--radius-lg);grid-column:8/13;height:clamp(300px,33vw,500px);
  overflow:hidden;background:var(--stone)}
.bhero__fig img{width:100%;height:100%;object-fit:cover}
.bmeta{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border-top:1px solid var(--line);
  margin-top:calc(var(--section-default) / 2)}
.bmeta div{padding:16px 16px 0 0;display:grid;gap:5px}
.bmeta b{font-size:var(--t-meta);font-weight:500}
.bmeta span{font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-45)}
@media (max-width:900px){
  .bhero__text{grid-column:1/13;max-width:none;margin-inline:0}
  .bhero__fig{grid-column:1/13;aspect-ratio:16/9}
  .bmeta{grid-auto-flow:row;gap:0}
  .bmeta div{border-bottom:1px solid var(--line-soft);padding-bottom:12px;
    display:flex;justify-content:space-between;align-items:baseline}
}