/* Only the editorial related-reading block. Existing blog designs, shared
   navigation, article layout and footers remain unchanged. */
.ss-related-reading {
  max-width: 960px;
  margin: 2rem auto 2.5rem;
  padding: 1.2rem 1.4rem;
  border: 1px solid rgba(245,242,235,.15);
  border-radius: 16px;
  background: rgba(245,242,235,.035);
  color: #f5f2eb;
  font-family: 'Figtree', system-ui, sans-serif;
  line-height: 1.55;
}
.ss-related-reading h2 {
  margin: 0 0 .35rem;
  font-size: clamp(1.12rem,2vw,1.35rem);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -.015em;
}
.ss-related-reading p {
  margin: 0 0 .95rem;
  color: rgba(245,242,235,.72);
  font-size: .9rem;
  line-height: 1.6;
}
.ss-related-reading ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,230px),1fr));
  gap: .6rem;
}
.ss-related-reading li {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.ss-related-reading li a {
  display: block;
  padding: .78rem .9rem;
  border: 1px solid rgba(245,242,235,.13);
  border-radius: 12px;
  color: #c8f53e;
  background: rgba(8,8,8,.22);
  font-size: .91rem;
  font-weight: 650;
  line-height: 1.45;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: border-color .2s,background .2s;
}
.ss-related-reading li a:hover,
.ss-related-reading li a:focus-visible {
  border-color: rgba(200,245,62,.55);
  background: rgba(200,245,62,.075);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ss-related-reading li a:focus-visible {
  outline: 2px solid #c8f53e;
  outline-offset: 2px;
}
@media (max-width:600px) {
  .ss-related-reading { margin: 1.5rem 0 2rem; padding: 1rem; }
  .ss-related-reading ul { grid-template-columns: 1fr; }
}