/* ==========================================================================
   06 — FOOTER  (js/ui/footer.js)

   v2's content and layout (css/styles.css:560-583) — the same three-item mono
   row: wordmark, tag, copyright. Three changes, all forced by v3's shell:

     1. z-index 10, not v2's 1. The footer sits OUTSIDE <main> (which is z 10),
        and `.screen` — the 4px grain — is z 5. At z 1 the footer would render
        underneath the grain.
     2. min-height 34vh, and the row sits at the bottom of it. The direction
        budgets the footer 0.35vh of scroll; v2's bare 78px bar is 0.09vh. The
        room is not decoration — it is what gives the bottom-bar readout swap
        (`exe.cute © 2026`) time to be read before the document ends.
     3. Bottom padding clears --bar-h. v3 has a FIXED bottom chrome bar; v2's
        32px would have parked this row underneath it.
   ========================================================================== */

.footer {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  /* Clamped: raw 34vh is 490px at 2560x1440 — a footer taller than its own content by an order
     of magnitude. The cap only binds past ~1100px of viewport height. */
  min-height: min(34vh, 340px);
  padding:
    clamp(40px, 8vh, 96px)
    var(--gutter)
    calc(var(--bar-h) + clamp(16px, 2.4vh, 30px));
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--bone-70);           /* 8.27:1. See the note on .section__meta in base.css. */
}

.footer__brand {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.footer__logo {
  height: 18px;
  width: auto;
  display: block;
  opacity: 0.85;
  transition: opacity 0.4s var(--ease-out);
}
.footer__brand:hover .footer__logo { opacity: 1; }

/* "Built with intent." — auto-scrambled from the markup at letterDelay 40. */
.footer__tag { text-transform: lowercase; }

.footer__copy { white-space: nowrap; }

/* --------------------------------------------------------------------------
   Responsive — v2 wrapped below 560px. The tag drops to its own line so the
   wordmark and the copyright keep the two ends of the row.
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .footer {
    flex-wrap: wrap;
    /* Once the row wraps the container has two flex lines, and the default
       align-content: stretch would spread them across the whole min-height.
       Both lines belong together at the bottom. */
    align-content: flex-end;
    row-gap: 14px;
    min-height: min(30vh, 300px);
  }
  .footer__tag { order: 3; flex-basis: 100%; }
}