/* The footer every public page ends with: the brand and its line on the
   left, three short groups of links on the right. It keeps the header's side
   padding, so the brand at the foot sits under the brand at the head. */

.site-footer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 2.5rem 3rem; padding: 3rem 1.5rem 2.75rem; border-top: 1px solid var(--line); color: var(--ink-soft); font-family: var(--font-body); font-size: 0.85rem; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer__about { display: grid; align-content: start; gap: 0.9rem; }
.site-footer__about .discover-brand { justify-self: start; min-height: 2.75rem; color: var(--ink); }
.site-footer__about p { max-width: 22rem; margin: 0; line-height: 1.65; }
.site-footer__copyright { font-size: 0.76rem; }

.site-footer__nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.site-footer__group h2 { margin: 0 0 0.75rem; color: var(--ink); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.site-footer__group ul { display: grid; gap: 0.1rem; margin: 0; padding: 0; list-style: none; }
.site-footer__group a { display: inline-flex; align-items: center; min-height: 2.25rem; }
.site-footer__group a:hover { color: var(--ink); }
.site-footer__group a[aria-current="page"] { color: var(--ink); font-weight: 650; }

@media (max-width: 680px) {
  .site-footer { grid-template-columns: 1fr; padding-inline: 1rem; }
  .site-footer__nav { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); row-gap: 1.75rem; }
}