/* <site-footer> styles */
.footer { background: var(--bg-soft); color: var(--ink-2); padding: 64px 0 56px; border-top: 1px solid var(--line); }
.footer .brand-name { color: var(--ink); }
.footer-main { display: grid; grid-template-columns: 1.3fr 2fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.footer-brand .brand { margin-bottom: 16px; }
.footer-tag { font-size: 15px; color: var(--ink-2); max-width: 32ch; line-height: 1.55; }
.footer-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col h4 { font-family: var(--font-head); font-weight: 600; font-size: 14px; color: var(--ink); margin-bottom: 4px; }
.footer-col a { font-size: 14.5px; color: var(--ink-2); transition: color .2s; }
.footer-col a:hover { color: var(--ink); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: clamp(40px, 6vw, 72px); padding-top: 26px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
@media (max-width: 720px) { .footer-main { grid-template-columns: 1fr; gap: 40px; } }