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/* ============================================