/* ===================================================================
   workbook.css — the workbooks index
   sits on top of blog.css, same sheet, same palette, same fonts.
   only the workbook cards live here. the workbooks themselves are
   self-contained files and carry their own styles, because the copy
   you download has to work with no network.
=================================================================== */

.wb-list{ list-style:none; margin:0; padding:0; }
.wb-list li{ margin-bottom:20px; }

.wb-card{
  display:block;
  border:1px solid var(--rule);
  border-radius:10px;
  background:#fff;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  transition:border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.wb-card:hover,
.wb-card:focus-visible{
  border-color:var(--accent);
  box-shadow:0 8px 22px rgba(33,31,26,.10);
  transform:translateY(-1px);
  color:inherit;
}
.wb-card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* the aqua titlebar as the card's lid. foundations: opening is loud. */
.wb-card__chrome{
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  background:linear-gradient(#fdfdfd,#e8e8ea);
  border-bottom:1px solid #d1d1d6;
}
.wb-card__lights{ display:flex; gap:6px; }
.wb-card__light{ width:10px; height:10px; border-radius:50%; }
.wb-card__light--r{ background:#ff5f57; }
.wb-card__light--y{ background:#febc2e; }
.wb-card__light--g{ background:#28c840; }
.wb-card__file{
  margin:0 auto;
  padding-right:36px;
  font-family:"Lucida Grande","Segoe UI",system-ui,sans-serif;
  font-size:12px;
  font-weight:600;
  color:#5a616b;
}

.wb-card__body{ display:block; padding:18px clamp(16px,3vw,22px) 20px; }
.wb-card__title{
  display:block;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(21px,3.6vw,26px);
  line-height:1.2;
  color:var(--ink);
}
.wb-card:hover .wb-card__title{ color:var(--accent); }
.wb-card__desc{
  display:block;
  margin-top:7px;
  max-width:58ch;
  font-size:15px;
  line-height:1.55;
  color:var(--muted);
}
.wb-card__meta{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.wb-tag{
  padding:3px 9px;
  border:1px solid var(--rule);
  border-radius:999px;
  background:var(--paper);
  font-size:11px;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--faint);
}

.wb-note{
  margin:26px 0 0;
  padding-top:20px;
  border-top:1px solid var(--rule);
  font-size:14px;
  line-height:1.6;
  color:var(--muted);
  max-width:60ch;
}

.wb-more{ margin-top:26px; }
.wb-more__title{
  margin:0 0 6px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--faint);
}
.wb-more__body{
  margin:0;
  font-size:15px;
  line-height:1.6;
  color:var(--muted);
  max-width:60ch;
}