/* #hubs: the wall, the topic hub and the country hubs. */
/* ---------- 3. hubs ---------- */
.wall{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0 26px;align-content:center;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 90%,transparent);mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 90%,transparent)}
.wl{font:500 13.5px/1.25 var(--sans);color:#B9B6AF;padding:5px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background-image:linear-gradient(var(--hl),var(--hl));background-repeat:no-repeat;background-size:0% 100%;background-position:0 0}
.wl.on{color:var(--ink)}
.js .hubfr{visibility:hidden}
.hublist{margin:14px 0 0;font:400 15px/1.7 var(--sans);color:var(--text)}
.hublist span{white-space:nowrap}
.hublist span.f{color:var(--red);font-weight:650}
@media (max-width:959px){
  #hubs .sc-stage{height:min(130vw,600px)}
  .wall{grid-template-columns:1fr}
  .wall .wc:nth-child(n+2){display:none}
}

/* the hub list sits under a rule and says what it is */
.hublist{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line2)}
.hublist .hl-k{display:block;margin:0 0 5px;font:600 13.5px/1.3 var(--sans);letter-spacing:.01em;color:var(--ink)}

/* a window under 760px high: the list of hubs and the notes beside the wall take less room */
@media (min-width:960px) and (max-height:759px){
  #hubs .lede{margin-top:10px}
  .hublist{margin-top:10px;padding-top:8px;font-size:14px;line-height:1.5}
  #hubs .specs{margin-top:10px}
  #hubs .specs li{padding:6px 0}
  #hubs .count{margin-top:8px}
  .hublist .hl-k{margin-bottom:2px;font-size:13px}
}

/* a narrow desk window (960 to 1199 wide): the words get a wider column, so the longest kit's hub notes still end on the screen */
@media (min-width:960px) and (max-width:1199px){
  #hubs .sc-copy{grid-column:1/6}
  #hubs .sc-stage{grid-column:6/13}
}
@media (min-width:960px) and (max-width:1199px) and (max-height:800px){
  #hubs .lede{margin-top:10px;font-size:15px;line-height:1.5}
  .hublist{margin-top:10px;padding-top:8px;font-size:14px;line-height:1.5}
  #hubs .specs{margin-top:10px}
  #hubs .specs li{padding:6px 0}
}