/* FrankBanker Shelf
 *
 * Every selector is prefixed .fb-shelf, so nothing here can reach the
 * theme. Colours and type are the site's own, read off the live pages;
 * the tinted band is the only new device, and it is what makes the
 * section read as separate from the essay listing above it.
 */

.fb-shelf{
  background:#f2f0ea;
  border-top:1px solid #e3dfd6;
  border-bottom:1px solid #e3dfd6;
  margin:52px 0 0;
  padding:38px 20px 42px;
  color:#3d3c38;
  font-family:"Inter",-apple-system,"Segoe UI",sans-serif;
}
.fb-shelf *{box-sizing:border-box}
.fb-shelf__inner{max-width:840px;margin:0 auto}

.fb-shelf__cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.fb-shelf--2 .fb-shelf__cards{grid-template-columns:repeat(2,1fr);max-width:560px;margin:0 auto}
.fb-shelf--1 .fb-shelf__cards{grid-template-columns:1fr;max-width:300px;margin:0 auto}

/* The name of the strand sits outside the card, because it labels the
   strand rather than the one item showing today. */
.fb-shelf__col{display:flex;flex-direction:column;margin:0}
.fb-shelf__head{
  margin:0 0 12px;padding:0 0 9px;
  border-bottom:1px solid #e3dfd6;
}
.fb-shelf__head h3{
  font-family:"Lora",Georgia,"Times New Roman",serif;
  font-size:17px;line-height:1.2;font-weight:600;
  color:#1a1a18;margin:0 0 5px;letter-spacing:-.005em;
  text-transform:none;
}
.fb-shelf__head p{
  margin:0;font-size:12.5px;line-height:1.5;color:#8a8880;
}

.fb-shelf__card{
  background:#fff;
  border:1px solid #e3dfd6;
  display:flex;flex-direction:column;flex:1;
  transition:border-color .15s ease;
  margin:0;
}
.fb-shelf__card:hover{border-color:#d8d4cc}
.fb-shelf__card > a{
  display:flex;flex-direction:column;height:100%;
  color:inherit;text-decoration:none;box-shadow:none;
}

/* ---------- the picture ---------- */

.fb-shelf__thumb{
  aspect-ratio:16/10;width:100%;max-width:100%;
  display:flex;flex-direction:column;justify-content:center;
  padding:14px 16px;gap:7px;overflow:hidden;
}
.fb-shelf__thumb--photo{padding:0;display:block}
.fb-shelf__img{
  width:100%;height:100%;max-width:100%;
  object-fit:cover;display:block;
}

.fb-shelf__thumb--brief{background:#002060}
.fb-shelf__lab{
  display:flex;align-items:center;gap:7px;
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace;
  font-size:8.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;
}
.fb-shelf__lab i{width:6px;height:6px;border-radius:50%;background:#bf9000;flex:0 0 auto}
.fb-shelf__no{
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace;
  font-size:19px;font-weight:700;letter-spacing:-.02em;color:#bf9000;
}
.fb-shelf__dt{
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace;
  font-size:8.5px;letter-spacing:.08em;color:rgba(255,255,255,.62);
}

.fb-shelf__thumb--guide{
  background:#f4f1e8;border-bottom:1px solid #e3dfd6;
  align-items:flex-start;
}
.fb-shelf__sm{
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace;
  font-size:8.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#bf9000;
}
.fb-shelf__cv{
  font-family:"Lora",Georgia,"Times New Roman",serif;
  font-size:15px;font-weight:600;line-height:1.25;color:#002060;
}

.fb-shelf__thumb--pod{background:#1a1a18;align-items:center;justify-content:center}
.fb-shelf__thumb--pod .fb-shelf__sm{color:rgba(250,249,247,.6)}
.fb-shelf__play{
  width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(250,249,247,.55);
  display:flex;align-items:center;justify-content:center;
}
.fb-shelf__play svg{margin-left:2px;display:block}

/* ---------- the words ---------- */

.fb-shelf__body{
  padding:15px 16px 17px;
  display:flex;flex-direction:column;gap:7px;flex:1;
}
.fb-shelf__body h4{
  font-family:"Lora",Georgia,"Times New Roman",serif;
  font-size:16px;line-height:1.32;font-weight:600;
  color:#1a1a18;margin:0;text-wrap:balance;letter-spacing:0;
  text-transform:none;
}
.fb-shelf__card:hover h4{text-decoration:underline;text-underline-offset:3px}
.fb-shelf__ext{
  margin:0;font-size:13.5px;line-height:1.6;color:#8a8880;
}
.fb-shelf__go{
  margin-top:auto;padding-top:9px;
  font-family:"JetBrains Mono","SFMono-Regular",Consolas,monospace;
  font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:#3d3c38;
}
.fb-shelf__card:hover .fb-shelf__go{color:#1a1a18}

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

@media(max-width:720px){
  .fb-shelf{padding:30px 18px 34px;margin-top:40px}
  .fb-shelf__cards,
  .fb-shelf--2 .fb-shelf__cards,
  .fb-shelf--1 .fb-shelf__cards{grid-template-columns:1fr;max-width:420px;gap:26px}
  .fb-shelf__thumb{aspect-ratio:16/7}
}