/* The footer of every public page: the brand beside the regions, then the copyright with the pages about the publication.
   It is dark in both themes, so it carries the dark colours itself. */
.site-footer{--paper:#20201f;--ink:#f4f2ee;--muted:#aaa7a2;--line:#47433e;color-scheme:dark;margin-top:80px;border-top:1px solid var(--line);background:var(--paper);color:var(--ink)}
.site-footer ul{margin:0;padding:0;list-style:none}
.site-footer nav a{display:inline-block;padding:5px 0;color:inherit}
.site-footer a:focus-visible{outline:2px solid var(--brand-accent-color);outline-offset:2px}
.footer-main{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;margin-inline:auto;padding:44px 0 32px}
.footer-brand{display:grid;gap:18px;align-content:start;justify-items:start}
.footer-logo{display:block;width:170px}
.footer-logo img{width:100%;height:auto}
.footer-brand p{margin:0;color:var(--muted);font:400 13px/1.7 var(--sans);text-wrap:pretty}
.footer-socials{display:flex;align-items:center;margin:-8px}
.footer-socials a{display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;color:var(--ink);font-size:18px;line-height:1}
/* The mark of the feeds keeps its orange, and Bluesky's and Facebook's their blue, under the pointer too. */
.footer-socials a.social-link-rss,.footer-socials a.social-link-rss:hover{color:var(--brand-accent-color)}
.footer-socials a.social-link-bluesky,.footer-socials a.social-link-bluesky:hover{color:var(--bluesky)}
.footer-socials a.social-link-facebook,.footer-socials a.social-link-facebook:hover{color:var(--facebook)}
.footer-group h2{margin:0 0 8px;padding-bottom:11px;border-bottom:1px solid var(--line);font:600 15px/1.3 var(--sans);letter-spacing:-.01em}
.footer-group ul{column-gap:40px;font:400 14px/1.4 var(--sans)}
.footer-group li{break-inside:avoid}
.footer-regions{grid-column:span 3}
.footer-regions ul{columns:6}
.footer-bottom{border-top:1px solid var(--line)}
.footer-bottom .wrap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 32px;margin-inline:auto;padding:10px 0 18px;font:400 13px/1.7 var(--sans)}
.footer-bottom p{margin:0;padding:4px 0;color:var(--muted)}
.footer-pages ul{display:flex;flex-wrap:wrap;gap:0 24px}
.footer-pages a{padding:4px 0}
@media(max-width:1024px){.footer-main{grid-template-columns:minmax(0,1fr);gap:32px;padding:40px 0 28px}.footer-group ul{column-gap:32px}.footer-regions{grid-column:auto}}
@media(max-width:767px){.site-footer{margin-top:45px}.footer-logo{width:135px}.footer-regions ul{columns:3}}
@media(max-width:600px){.footer-regions ul{columns:2}}
@media(pointer:coarse){.site-footer nav a{padding:7px 0}.footer-socials{margin:-12px}.footer-socials a{width:44px;height:44px}}
/* Google's "add as a preferred source" button, after the social links as one more of them:
   only its mark shows, where the next icon would stand. Google's script draws it at the first
   interaction; its height is kept so that nothing moves when it arrives. What it looks like
   inside is set by the script that fetches it (site.js). */
.footer-preferred{display:flex;align-items:center;min-width:0;min-height:36px}
@media(pointer:coarse){.footer-preferred{min-height:44px}}