/* A spacious directory-style footer based on the supplied references. */
.site-footer { margin-top: 72px; padding: 0; background: var(--surface, #121212); color: var(--fg, #f4f4f5); font-family: var(--font-ui, system-ui, sans-serif); }
.footer-inner { max-width: none; margin: 0; padding: 0 56px; border: 0; border-radius: 0; background: transparent; }
.footer-masthead { padding: 34px 0 30px; border-top: 1px solid var(--border, #262626); text-align: center; }
.footer-masthead .footer-logo { display: inline-flex; align-items: center; gap: 9px; color: var(--fg); font: 700 16px var(--font-mono, monospace); text-decoration: none; }
.footer-logo-mark { display: grid; width: 29px; height: 29px; place-items: center; color: var(--accent-fg); background: var(--accent); border-radius: 7px; font-size: 11px; }
.footer-masthead nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin-top: 22px; }
.footer-masthead nav a { color: var(--fg-dim, #999); font-size: 13px; text-decoration: none; }
.footer-masthead nav a:hover, .footer-masthead nav a:focus-visible, .footer-directory a:hover, .footer-directory a:focus-visible { color: var(--accent); }
.footer-directory { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 56px; padding: 44px 24px 46px; border-top: 1px solid var(--border, #262626); }
.footer-column { display: flex; flex-direction: column; gap: 13px; }
.footer-column h4 { margin: 0 0 5px; color: var(--fg); font-size: 13px; }
.footer-column a { color: var(--fg-dim, #999); font-size: 13px; line-height: 1.38; text-decoration: none; transition: color .15s ease; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 23px 0; border-top: 1px solid var(--border, #262626); color: var(--fg-dim, #999); font-size: 12px; }
.footer-bottom-links { display: flex; flex-wrap: wrap; gap: 17px; }
.footer-bottom a { color: inherit; text-decoration: none; }
.footer-bottom a:hover, .footer-bottom a:focus-visible { color: var(--accent); }
.footer-socials { display: flex; align-items: center; gap: 15px; }
.footer-socials a { display: grid; width: 22px; height: 22px; place-items: center; }
.footer-socials svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 850px) { .footer-inner { padding: 0 28px; } .footer-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-left: 0; padding-right: 0; gap: 36px; } }
@media (max-width: 540px) { .site-footer { margin-top: 48px; } .footer-inner { padding: 0 18px; } .footer-masthead { padding: 27px 0; } .footer-directory { grid-template-columns: 1fr 1fr; gap: 30px 22px; padding: 33px 0; } .footer-bottom { align-items: flex-start; flex-direction: column; } }