, and only to anchors with no class of
their own. That covers prose wherever it appears, including the custom
pages which style their paragraphs inline rather than through a wrapper
class, while leaving every styled component alone: .btn, .related-card,
.tool-card and the listing entries all carry classes, and card links wrap
their rather than sitting inside one. Header, footer and nav are
outside and keep the reset. */
main p a:not([class]),
main li a:not([class]) {
color: var(--primary-blue);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
main p a:not([class]):hover,
main li a:not([class]):hover,
main p a:not([class]):focus-visible,
main li a:not([class]):focus-visible {
color: var(--primary-blue-dark);
text-decoration-thickness: 2px;
}
/* --- Small screens ----------------------------------------------------- */
/* Below this there is no spare margin left to spend, so the rail goes and the
text column takes the full width. */
@media (max-width: 1080px) {
.post-layout {
grid-template-columns: minmax(0, 68ch);
gap: 0;
}
.outline {
display: none;
}
}
@media (max-width: 680px) {
/* The leader depends on horizontal room it doesn't have on a phone, so the
row stacks and the leader is dropped rather than squeezed to a stub. */
.entry__head {
display: block;
}
.entry__leader {
display: none;
}
.entry__meta {
margin-top: 7px;
}
.entry__title {
font-size: 1.14rem;
}
.prose {
font-size: 1rem;
}
.prose h2 {
font-size: 1.24rem;
}
.tool-list-plain {
grid-template-columns: 1fr;
}
}
@media (prefers-reduced-motion: reduce) {
* {
transition: none !important;
animation: none !important;
}
}