/* ==========================================================================
   related.css -- the Related list at the foot of a page: the other pages on
   this site the one you just read draws on, argues, builds or describes.

   Loaded by the seventeen pages that end on one: ten articles, two
   prototypes, the Agent Review and Lucy Learns write-ups, and three
   case studies. Both families load it, because the case studies under
   case-study-base.css do not load style.css, and this is one component
   rather than two copies of it.

   WHY A LIST AND NOT A SENTENCE. Until 2026-10-12 this was a paragraph at
   --text-sm with every link inside it ("The account this draws on: ... How
   I do this on a team: ..."), as many as four underlined, semibold titles
   run together in one block of small type. Adam: "it just feels really hard
   to read and overwhelming". A reader at the foot of a page is choosing
   where to go next, so each destination is a row of its own, its kind on
   the left and its title beside it, and the eye can run straight down the
   kinds or the titles.

   THE KIND IS A FIELD LABEL, so it is the site's label treatment: 12px,
   uppercase on --tracking-caps, sage (TYPOGRAPHY.md, "Kickers and
   eyebrows" and "Field labels"). The title is each page's own h1, in the
   sans at the body size and 600, a block title. Every kind takes the width
   of the widest one, through a subgrid, so the titles start on one line
   without a column width invented for it.

   THE WHOLE ROW IS THE LINK, so the hit area is the row: 16px of space
   above and below a 16px title is a 55px target. The rows are divided by
   --color-rule, the palette's row divider. Charcoal at rest, the text sage
   on hover and focus, the same way .build-next's title moves, and the arrow
   travels --space-2xs on the compositor, the way .case-go's does.

   ON A PHONE the kind sits over the title, and the arrow keeps its own
   column at the right of both lines. */
.related {
  max-width: var(--measure);
  margin: 0 0 var(--space-2xl);
}
.related-label {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-ui);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-accent-text);
}
.related-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-rule);
}
.related-list > li {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  margin: 0;
  border-bottom: 1px solid var(--color-rule);
}
.related-link {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  row-gap: var(--space-2xs);
  align-items: baseline;
  padding: var(--space-md) 0;
  font-family: var(--font-sans);
  color: var(--color-charcoal);
  text-decoration: none;
}
.related-kind {
  grid-column: 1;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-ui);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-accent-text);
}
.related-title {
  grid-column: 1;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-ui);
  transition: color var(--motion-state) var(--ease);
}
.related-go {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: var(--text-base);
  line-height: var(--leading-ui);
  color: var(--color-accent-text);
  transition: transform var(--motion-move) var(--ease);
}
@media (min-width: 40rem) {
  .related-list { grid-template-columns: max-content minmax(0, 1fr) auto; column-gap: var(--space-xl); }
  .related-title { grid-column: 2; }
  .related-go { grid-column: 3; grid-row: auto; align-self: baseline; }
}
.related-link:focus-visible .related-title { color: var(--color-accent-text); }
.related-link:focus-visible .related-go { transform: translateX(var(--space-2xs)); }
@media (hover: hover) and (pointer: fine) {
  .related-link:hover .related-title { color: var(--color-accent-text); }
  .related-link:hover .related-go { transform: translateX(var(--space-2xs)); }
}
@media (prefers-reduced-motion: reduce) {
  .related-go { transition: none; }
  .related-link:focus-visible .related-go { transform: none; }
  @media (hover: hover) and (pointer: fine) { .related-link:hover .related-go { transform: none; } }
}