footer.css

 1.site-footer {
 2  border-top: 1px solid var(--color-mist);
 3  padding: var(--spacing-xl) var(--spacing-lg);
 4  background: var(--color-cream);
 5}
 6
 7/* Single horizontal row: wordmark left, nav centered, credit right.
 8   Three groups, no two-tier split, no dividers. */
 9.footer-row {
10  max-width: var(--width-max);
11  margin: 0 auto;
12  display: grid;
13  grid-template-columns: auto 1fr auto;
14  align-items: center;
15  gap: var(--spacing-xl);
16}
17
18.footer-logo {
19  font-family: var(--font-display);
20  font-size: 1.25rem;
21  font-weight: 400;
22  color: var(--color-ink);
23  text-decoration: none;
24}
25
26.footer-links {
27  display: flex;
28  justify-content: center;
29  gap: var(--spacing-lg);
30  flex-wrap: wrap;
31}
32
33.footer-links a {
34  font-size: 0.875rem;
35  color: var(--color-ash);
36  text-decoration: none;
37  transition: color var(--duration-fast) var(--ease-out);
38}
39
40.footer-links a:hover {
41  color: var(--color-accent);
42}
43
44.footer-credit {
45  display: flex;
46  align-items: center;
47  gap: var(--spacing-sm);
48  font-size: 0.875rem;
49  color: var(--color-ash);
50  white-space: nowrap;
51}
52
53.footer-credit a {
54  color: var(--color-text);
55  text-decoration: none;
56  transition: color var(--duration-fast) var(--ease-out);
57}
58
59.footer-credit a:hover {
60  color: var(--color-accent);
61}
62
63.footer-social-link {
64  display: inline-flex;
65  align-items: center;
66  justify-content: center;
67  padding: 4px;
68  color: var(--color-ash);
69  transition: color var(--duration-fast) var(--ease-out);
70}
71
72.footer-social-link:hover {
73  color: var(--color-accent);
74}
75
76@media (max-width: 900px) {
77  .footer-row {
78    grid-template-columns: 1fr;
79    justify-items: center;
80    text-align: center;
81    gap: var(--spacing-md);
82  }
83
84  .footer-links {
85    justify-content: center;
86    gap: var(--spacing-sm) var(--spacing-md);
87    font-size: 0.8125rem;
88  }
89
90  .site-footer {
91    padding: var(--spacing-lg) var(--spacing-md);
92  }
93}
94
95/* ============================================