/* selr-article-links.css — the "More reading" block at the foot of every
 * insight article (2026-08-28). Pairs with scripts/inject_article_links.py.
 *
 * WHY IT IS TEXT ONLY. Article cards were pulled out of the Gallery and out of
 * the home / about "Insights" blocks on 2026-08-19 because their covers are the
 * template's stock imagery, "not our workshop" (see the header comments in
 * selr-gallery-data.js and selr-gallery-strip.js). That call stands. This block
 * carries no cover, no thumbnail, no image of any kind. It sits BELOW the
 * existing "More Insights" photo section and never replaces it.
 *
 * WHY IT EXISTS. Four of the nine articles were reachable from nowhere on the
 * site. Plain crawlable links in the page source fix that without putting a
 * single stock picture back on screen.
 *
 * Tokens are the measured ones from selr-design-language: Manrope 600 only,
 * ink #242424, muted ink #616161, accent #6736E2, hairline #E6E6E6, ground
 * #FCFCFA. Tracking -0.03em at 17px and -0.025em at 13px. No shadows, the site
 * has no elevation system. Horizontal padding follows the "Inside Container" of
 * the photo block above it, 60 / 40 / 20 by breakpoint, but the measure is
 * capped at 1000px: three short lines stretched across 1600 leaves the category
 * stranded half a screen from its title. Breakpoints are Framer's own, 810
 * and 1200.
 */

.selr-more-reading {
  width: 100%;
  padding: 0 0 60px;
  background: var(--token-f38aea48-6bef-484a-bce0-48ae27ef2b1a, #FCFCFA);
  font-family: Manrope, "Manrope Placeholder", sans-serif;
}

.selr-more-reading-inner {
  box-sizing: border-box;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 30px 60px 0;
  border-top: 1px solid var(--token-e4766650-8ada-4746-8f1c-cc01ab0d10f6, #E6E6E6);
}

/* The heading is a quiet eyebrow, not a section title. 13px is the site's meta
   size and it never scales down on mobile. */
.selr-more-reading-title {
  margin: 0 0 5px;
  color: #616161;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.5;
}

.selr-more-reading-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.selr-more-reading-item + .selr-more-reading-item {
  border-top: 1px solid var(--token-e4766650-8ada-4746-8f1c-cc01ab0d10f6, #E6E6E6);
}

.selr-more-reading-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 0;
  color: inherit;
  text-decoration: none;
}

.selr-more-reading-name {
  color: #242424;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.5;
  transition: color 0.3s cubic-bezier(0.44, 0, 0.56, 1);
}

.selr-more-reading-cat {
  flex: 0 0 auto;
  color: #616161;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.5;
  white-space: nowrap;
}

@media (hover: hover) {
  .selr-more-reading-link:hover .selr-more-reading-name { color: #6736E2; }
}

/* Keyboard focus is already handled globally by selr-focus.css (a:focus-visible
   draws the 2px purple ring), so nothing is repeated here. */

@media (max-width: 1199px) {
  .selr-more-reading-inner { padding: 30px 40px 0; }
}

@media (max-width: 809px) {
  .selr-more-reading { padding: 0 0 40px; }
  .selr-more-reading-inner { padding: 30px 20px 0; }
  .selr-more-reading-link {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  .selr-more-reading-name { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .selr-more-reading-name { transition: none; }
}