/* Nearby: links from a page to related entries, each with the reason it is related. Written into each page by
   tools/build-nearby.mjs from catalog.json. Text only, calm, in the collection's own kickers. */
.nearby{display:block;margin:clamp(64px,8vw,120px) 0 0;padding-top:24px;border-top:1px solid #ffffff24;color:#eff2fb}
.nearby h2{margin:0 0 22px;font-size:12px;font-weight:500;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:#9aa2b4}
.nearby ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:30px clamp(28px,4vw,64px)}
.nearby li{margin:0;min-width:0}
.nearby a{display:grid;gap:9px;color:inherit;text-decoration:none}
.nearby-kicker{font-size:11px;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;color:#9aa2b4}
.nearby-title{font-size:clamp(21px,1.75vw,27px);line-height:1.18;letter-spacing:-.03em;font-weight:400;color:#eef1fa;transition:color .2s}
.nearby-why{font-size:14px;line-height:1.55;color:#aeb4c7;max-width:42ch}
.nearby a:hover .nearby-title,.nearby a:focus-visible .nearby-title{color:#a9b8ff}
.nearby a:focus-visible{outline:2px solid #a9b8ff;outline-offset:8px;border-radius:2px}
/* Pages whose <main> runs edge to edge align the block with their own gutter. */
.nearby[data-page=diffusion]{margin-inline:var(--gutter)}
.nearby[data-page=nanoparticle]{margin-inline:4.5%}
@media(max-width:760px){.nearby[data-page=nanoparticle]{margin-inline:6%}}
.nearby[data-page=rocksalt]{margin-top:clamp(48px,6vw,88px)}
@media(prefers-reduced-motion:reduce){.nearby-title{transition:none}}