/* Case studies, security, toolbox and lab pages. */

.case > section > * + * {
  margin-top: var(--s4);
}

.shot {
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--paper-2);
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
}

.shot figcaption {
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--rule);
}

.facts {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule-strong);
}

.facts div {
  display: grid;
  gap: var(--s1) var(--s5);
  padding-block: var(--s3);
  border-bottom: 1px solid var(--rule);
}

.facts dt {
  color: var(--ink-2);
}

.facts dd {
  overflow-wrap: anywhere;
}

.built li {
  max-width: 66ch;
  padding-left: var(--s4);
  border-left: 1px solid var(--rule-strong);
}

.built li + li {
  margin-top: var(--s3);
}

.case code {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.case-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s6);
  justify-content: space-between;
  padding-top: var(--s5);
  border-top: 1px solid var(--rule-strong);
}

.case-nav a {
  display: inline-block;
  padding-block: var(--s3);
}

/* The link sits above the row-wide link of the work list. */

.case-link {
  position: relative;
  z-index: 1;
  margin-top: var(--s3);
}

.case-link a {
  display: inline-block;
  padding-block: var(--s2);
  color: var(--accent);
}

/* A band moved onto its own page keeps its layout without the docs section rule. */

.docs-body > .band {
  margin-top: var(--s7);
  padding-top: var(--s6);
}

@media (min-width: 880px) {
  .facts div {
    grid-template-columns: 200px minmax(0, 1fr);
  }
}

/* Lab: one card per public repository. */

.shelf-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 var(--s6);
  margin-top: var(--s6);
}

.shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0 var(--s6);
  margin-block: var(--s3) var(--s4);
}

.shelf li {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--s1);
  padding-block: var(--s3) var(--s5);
  border-top: 1px solid var(--rule-strong);
}

.shelf li > .mono:first-child {
  color: var(--accent);
}

.shelf a {
  font-family: var(--font-serif);
  font-size: var(--t24);
  line-height: 1.15;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.shelf a:hover {
  text-decoration: underline;
}

.shelf p {
  color: var(--ink-2);
}

.shelf + .mono {
  margin-bottom: var(--s7);
}

.seg {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-block: var(--s4);
}

.seg .button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}

.rhythm .bars li {
  grid-template-columns: 11ch minmax(0, 1fr) 6ch;
}

.rhythm .bars .bar {
  transition: width 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.rhythm .bars li > span:first-child {
  text-transform: capitalize;
}

.filter {
  margin-block: var(--s5) var(--s3);
}

/* Previous and next page, at the foot of the inner pages. */

.pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s5);
  margin-top: var(--s8);
  border-top: 1px solid var(--rule-strong);
}

.pager a {
  display: grid;
  min-width: 0;
  gap: var(--s1);
  padding-block: var(--s4) var(--s5);
  text-decoration: none;
}

.pager a:last-child {
  text-align: right;
}

.pager a span:last-child {
  font-family: var(--font-serif);
  font-size: clamp(var(--t21), 6vw, var(--t40));
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.pager a:hover span:last-child {
  color: var(--accent);
}

.seg .button[aria-pressed="true"] .faint {
  color: inherit;
}