/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--color-indigo);
  color: var(--color-paper);
  padding-top: var(--space-xl);
  padding-bottom: env(safe-area-inset-bottom, 0);
  position: relative;
}
/* Mirrors the nav's ribbon seam at the top of the footer, so the
   dark chrome reads as one deliberate frame around the poster-colored
   page content instead of two unrelated dark blocks. */
.site-footer::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--color-flame) 0 20%,
    var(--color-brass) 20% 40%,
    var(--color-green) 40% 60%,
    var(--color-sky)   60% 80%,
    var(--color-pink)  80% 100%);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(241,231,210,.1);
}
.footer-brand { display: flex; align-items: center; gap: 1rem; }
.footer-word { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 1.05rem; letter-spacing: .02em; }

.footer-nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.footer-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--font-mono); font-size: .78rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--color-muted-on-indigo);
  transition: color var(--duration-fast) ease;
}
.footer-nav a:hover { color: var(--color-paper); }

.footer-ig {
  color: var(--color-paper);
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid rgba(241,231,210,.2);
  transition: all var(--duration-fast) ease;
}
.footer-ig:hover { background: var(--color-flame); border-color: var(--color-flame); color: var(--color-ink); }

.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm);
  padding: var(--space-lg) 0;
  font-family: var(--font-mono); font-size: .72rem; color: var(--color-muted-on-indigo); letter-spacing: .03em;
}
.footer-bottom a { color: var(--color-brass); text-decoration: none; }
.footer-bottom a:hover { text-decoration: underline; }