/* Site footer for pages that don't load sections.css (My work, project pages, Free guide). Same rules as sections.css. */
.site-foot .wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }
.site-foot { border-top: 1px solid var(--line); padding: clamp(40px, 6vw, 64px) 0 28px; color: var(--muted); margin-top: clamp(56px, 8vw, 96px); }
.foot-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 32px; }
.foot-grid .brand { margin-bottom: 1rem; }
.foot-grid p { margin: 0; max-width: 30ch; }
.foot-grid h4 { margin: 0 0 1rem; color: var(--text); }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.foot-grid a:hover { color: var(--text); }
.foot-base { margin-top: clamp(36px, 5vw, 56px); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .85rem; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > :first-child { grid-column: 1 / -1; } }