/* FrankBanker essay topics line
 *
 * Every selector is prefixed .fb-topics. A mono label with a hairline
 * under it, the way MORE FROM FRANKBANKER is set, then the leading
 * topics with counts on one wrapping line, divided by thin rules, and
 * More topics on a line of its own.
 *
 * The dividers are each topic's left border. The list is pulled left by
 * one divider's width inside a wrapper that clips, so the divider of the
 * topic starting each line is cut away and no line ever begins or ends
 * with a stray pipe.
 */

.fb-topics{
  max-width:632px;margin:52px auto 0;
  font-family:"Inter",-apple-system,"Segoe UI",sans-serif;
}
.fb-topics *{box-sizing:border-box}

.fb-topics .fb-topics__label{
  margin:0 0 12px;padding:0 0 10px;
  border-bottom:1px solid #e3dfd6;
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#8a8880;
}

.fb-topics__clip{overflow:hidden}
.fb-topics .fb-topics__list{
  display:flex;flex-wrap:wrap;row-gap:4px;
  list-style:none;margin:0 0 0 -15px;padding:0;
}
.fb-topics .fb-topics__list li{
  margin:0;padding:0 14px;
  border-left:1px solid #d8d3c9;
  line-height:1.15;
}
.fb-topics .fb-topics__list li::marker{content:none}

.fb-topics__item{
  font-size:15px;color:#1a1a18;
  text-decoration:none;box-shadow:none;white-space:nowrap;
}
.fb-topics__item:hover{text-decoration:underline;text-underline-offset:3px}

.fb-topics__count{
  display:inline-block;padding-left:6px;
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace;
  font-size:11px;color:#a8a69f;
}

.fb-topics .fb-topics__foot{margin:14px 0 0}
.fb-topics__more{
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace;
  font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:#3d3c38;
  text-decoration:none;box-shadow:none;
}
.fb-topics__more:hover{color:#1a1a18}

.fb-topics a:focus-visible{outline:2px solid #1a1a18;outline-offset:3px}

@media(max-width:600px){
  .fb-topics{margin-top:40px}
  .fb-topics .fb-topics__list{row-gap:10px;margin-left:-11px}
  .fb-topics .fb-topics__list li{padding:0 10px}
  .fb-topics__item{font-size:14.5px}
}