/* Section: Footer. Link columns, copyright and the logo as a faint watermark.
   Independent of the other sections. Needs section-base.css (uses .s__inner). */

.ftr { position: relative; overflow: hidden; padding-top: var(--s-9); }
.ftr__cols { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-8); padding-bottom: var(--s-9); }
.ftr__brand { max-width: 36ch; }
.ftr__brand p { margin: var(--s-4) 0 0; color: var(--t-3); font-size: var(--fs-small); line-height: 1.55; }
.ftr__brand img { display: block; height: 24px; width: auto; }
.ftr__nav { display: flex; flex-wrap: wrap; gap: var(--s-9); }
.ftr__nav h2 { margin: 0 0 var(--s-4); font: 400 var(--fs-mono)/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--t-4); }
.ftr__nav ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-3); }
.ftr__nav a { color: var(--t-2); font-size: var(--fs-small); text-decoration: none; }
.ftr__nav a:hover { color: var(--t-head); }
.ftr__legal { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) 0 var(--s-6); border-top: 1px solid var(--border); color: var(--t-4); font-size: var(--fs-small); }
.ftr__legal p { margin: 0; }

.ftr__mark { pointer-events: none; user-select: none; margin: 0 auto; max-width: 1160px; padding-inline: var(--inset); }
.ftr__mark img { display: block; width: 100%; height: auto; opacity: 0.06; margin-bottom: calc(-1 * clamp(8px, 2.4vw, 36px)); }