/* Related pages: the end of a page points on to three others, each its card from /psychedelics, smaller */
.related { margin: 56px 0 0; padding: 28px 0 0; border-top: 1px dotted var(--line) }
nav.related h2 { margin: 0 0 16px; font: 500 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--soft) }
.related ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px }
.related a { display: flex; flex-direction: column; gap: 6px; color: var(--ink); text-decoration: none; border-radius: 14px }
.related img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; margin-bottom: 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--wash); transition: border-color var(--duration-quick, .2s) var(--ease-smooth-out, ease) }
.related b { font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em }
.related span { font-size: 13px; line-height: 1.45; color: var(--soft); text-wrap: pretty }
.related a:hover img { border-color: var(--ink) }
.related a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px }
/* on a phone each is a row: a small picture, then its words */
@media (max-width: 640px) {
  .related { margin-top: 40px }
  .related ul { grid-template-columns: minmax(0, 1fr); gap: 14px }
  .related a { display: grid; grid-template-columns: 120px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 14px; row-gap: 4px }
  .related img { grid-row: 1 / 3; margin: 0; border-radius: 10px }
  .related b { align-self: end }
}
@media (prefers-reduced-motion: reduce) { .related img { transition: none } }