/* ————————————————————————————————————————————
   lil bit cycling v2 — the foot

   Ported from the first theme's blog.css (footer section). The separator is
   the ride itself: the elevation profile of the whole route
   (assets/img/footer-profile.svg), filled with the foot's paper so the
   boundary between the two colours is the mountains. --elevation-scale is
   the one knob: the height the route's high point (~4,000 m) renders at —
   sea level always sits on the foot's top edge, so raising it simply makes
   the relief taller.

   Every class is lbc-prefixed and the tokens are scoped, so nothing here
   touches the parent's or the base's rules for the page.
   ———————————————————————————————————————————— */

.lbc-foot-profile, .lbc-foot {
  --paper-2:   #faf9f7;
  --ink-soft:  #6e6e6e;
  --rule:      rgba(0, 0, 0, .09);
  --coral:     #fc4c02;
  --sans:      "Quicksand", "helvetica neue", helvetica, arial, sans-serif;
  --wrap:      74rem;
  --gutter:    1.4rem;
}

.lbc-foot-profile {
  --elevation-scale: 3.5rem;
  height: var(--elevation-scale);
  margin-top: 4rem;
  color: var(--paper-2);
  line-height: 0;
}
.lbc-foot-profile svg { display: block; width: 100%; height: 100%; }
.lbc-foot-profile + .lbc-foot { border-top: 0; margin-top: 0; }

.lbc-foot {
  border-top: 1px solid var(--rule);
  background: var(--paper-2);
  margin-top: 4rem;
  padding: 0;
}
.lbc-foot-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 2.5rem var(--gutter);
  text-align: center;
  font-family: var(--sans);
  font-size: .76rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.lbc-foot-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin: 0 0 1.2rem;
}
.lbc-foot-links a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  text-decoration: none;
  color: var(--ink-soft);
}
.lbc-foot-links a:hover { color: var(--coral); }
.lbc-foot-links .icon { width: 1rem; height: 1rem; }
.lbc-foot-by { margin: 0; }
.lbc-foot-by a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.lbc-foot-by a:hover { color: var(--coral); }

/* the foot sits on the window's bottom edge even when a page is shorter
   than the viewport: the parent's #page becomes a column and #content, the
   one block between head and foot, takes the slack */
#page.site {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
#page.site > #content { flex: 1 0 auto; }