/* ===== Footer =====
   Static — no reveal-on-scroll animation is implemented (an earlier stub
   module claimed one was "wired up" here; it was an empty no-op and has
   been removed). Add a real reveal effect here if/when one is designed. */
.footer {
  background: transparent;           /* continues the site-wide themed background */
  color: var(--c-ink);
  padding-block: var(--sp-6);
  /* the nav dock is fixed over the bottom of the viewport, so the last thing
     on the page needs its own clearance or the contact buttons end up tucked
     right under the pill */
  padding-bottom: calc(var(--dock-space) + var(--sp-5));
  /* No border-top. The rule that used to divide Blog from Contact was the only
     hard line between two sections anywhere on the page — every other break is
     spacing alone — so it read as a stray edge rather than as structure. The
     padding above already separates them. */
  position: relative;
  z-index: var(--z-content);
}
/* same lowercase-italic treatment as .section__title (see typography.css) —
   kept as its own class since the footer heading isn't inside a .section */
.footer__title {
  font-size: var(--fs-500);
  font-style: italic;
  text-transform: lowercase;
}
/* contacts are .pill-link buttons (css/components/pill-bar.css), same capsule
   language as the nav — not inline accent-coloured text */
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

/* On a phone the three pills are stretched to fill the row instead of sitting
   at their content width, so the run starts and ends on the same lines as the
   "contacts" heading and the nav dock above it — the whole footer squares up
   on one pair of edges. Equal flex shares (not each pill's own text width)
   because three capsules of visibly different lengths read as ragged.
   Desktop keeps them content-sized: stretched across 68rem they'd be absurd.
   `flex` goes on the <li>, with the <a> filling it — the pill is the link, and
   the li is what the flex row actually lays out. */
@media (max-width: 768px) {
  .footer__links { flex-wrap: nowrap; }
  .footer__links li { flex: 1; min-width: 0; }
  .footer__links .pill-link {
    width: 100%;
    justify-content: center;
    padding-inline: var(--space-2);
    /* one step below the nav tabs (layout.css) — the dock is the primary
       control, these are secondary, and the two rows sit close enough on a
       phone that the old inverted sizing was plainly visible */
    font-size: var(--text-sm);
  }
}