/* Related cards (.rn), shared by the reading kinds and the listing (work order 51). From the blog's style block
   (content/blog-new), the later of the two copies, word for word, and at the end the article's "less motion" rule
   for them. */
.svc .rn small{display:block;font:800 11px var(--body);letter-spacing:.09em;text-transform:uppercase;margin-bottom:6px;opacity:.95}
.svc .rn{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.svc .rn a{position:relative;display:block;aspect-ratio:3/4;border-radius:18px;overflow:hidden;color:#fff;text-decoration:none;background:linear-gradient(135deg,var(--tint-from,#DDF4F8),var(--tint-to,#E1E6FF));box-shadow:0 8px 24px rgba(15,34,51,.12);transition:transform .25s}
.svc .rn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.svc .rn a::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,34,51,.05) 30%,rgba(15,34,51,.9) 100%)}
.svc .rn span{position:absolute;left:16px;right:16px;bottom:14px;z-index:1}
.svc .rn b{display:block;font:700 19px/1.2 var(--disp);color:#fff}
.svc .rn i{display:block;font-style:normal;font-size:13.5px;margin-top:6px;opacity:.92}
.svc .rn a:hover{transform:translateY(-4px)}
.svc .rn a:hover img{transform:scale(1.06)}
@media(max-width:719px){.svc .rn{grid-template-columns:repeat(3,74%);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:8px;margin-right:-16px;padding-right:16px}.svc .rn a{scroll-snap-align:start}}
@media(prefers-reduced-motion:reduce){.svc .rn a,.svc .rn img{transition:none}}
/* Work order 54: a card whose picture has not arrived yet shows the pale tinted ground of the other cards (it was #0F2233). */