/* The footer (2026-10-11). He, of the end of the page: "we need a footer", then picked "A sign off" from the /footers
   board; then, of it live: "it has lots of empty spaces and the black backgroudn is bad", and picked "cream" from
   /footers-2. A cream panel with rounded top corners, the page turning inside out at the end, dark ink on it. One row:
   the nav's three links (an ink squiggle under them) and his four channels as dark keys (dark so every icon reads; the
   x is cream). Under it "ghayzal" across the width in Saira, its line box cut to the letters so nothing sits empty
   around it: its letters rise in as you reach it, a width wave runs through them every few seconds and when you point
   at it, a letter you point at hops. © and back to top on one line under that. "© 2026 ghayzal" kept (he, 2026-10-11).
   m-footer.js drives it. */
.foot { --ink: #090b0c; position: relative; z-index: 2; background: var(--white); color: var(--ink); border-radius: 28px 28px 0 0; padding: 22px 32px 18px; }
.f-row { display: flex; align-items: center; justify-content: space-between; gap: 14px 28px; flex-wrap: wrap; }

/* the links, as the nav's: a 38 px tall target and a wavy line drawing under the word, here in the ink */
.f-site { display: flex; gap: 26px; font-size: 22px; font-weight: 700; letter-spacing: -.015em; padding: 0 6px; margin: 0 -6px; }   /* holds the links' 6 px of hit area, nothing moves */
.f-site a { position: relative; display: inline-flex; padding: 10px 6px; margin: -10px -6px; line-height: 1.2; color: var(--ink); text-decoration: none; outline: none; }
.f-site a svg { position: absolute; left: 4px; top: calc(100% - 10px); height: 8px; overflow: visible; pointer-events: none; }
.f-site a path { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }

/* his channels as keys; pointing lifts one and its icon wiggles */
.f-keys { display: flex; gap: 8px; }
.f-key { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--ink); outline: none; transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
.f-ci { width: 20px; height: 20px; }
.f-ci svg { display: block; width: 100%; height: 100%; overflow: visible; }
@media (hover: hover) { .f-key:hover { transform: translateY(-3px) rotate(-4deg); } }

/* the wordmark across the width (m-footer.js sizes it); the padding is room for g and y's tails, which the clip would
   otherwise cut as the letters rise */
.f-mark { display: flex; justify-content: center; margin: 14px 0 0; padding-bottom: .16em; overflow: hidden; font-family: 'Saira', sans-serif; font-weight: 800;
  font-size: 26vw; line-height: .86; letter-spacing: -.01em; white-space: nowrap; user-select: none; -webkit-user-select: none; }
.f-mark .ml { display: inline-block; font-stretch: 62%; transform-origin: 50% 100%; }

/* © and back to top, its arrow drawn (an iPhone draws ↑ as an emoji) */
.f-base { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 6px; font: 500 14px/1.35 'Azeret Mono', monospace; letter-spacing: .02em; }
.f-base > span { opacity: .7; }
.f-top { display: inline-flex; align-items: center; gap: .45em; padding: 8px 0; margin: -8px 0; color: var(--ink); text-decoration: none; white-space: nowrap; outline: none; }
.f-top .up { display: inline-block; width: 1em; height: 1em; }
.f-top .up svg { display: block; width: 100%; height: 100%; overflow: visible; }
.f-top .up path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.foot a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 6px; }

@media (max-width: 760px) {
  .foot { border-radius: 22px 22px 0 0; padding: 18px 18px 14px; }
  .f-site { font-size: 20px; gap: 22px; }
  .f-key { width: 42px; height: 42px; border-radius: 11px; }
  .f-mark { margin-top: 12px; }
  .f-base { font-size: 12px; }
}