@layer components {
  /* mattemotto: pie discreto. estampa de cierre. */

  .footer {
    background: var(--ink);
    color: var(--on-ink);
    border-block-start: 1px solid var(--hairline-on-ink);
    padding-block: clamp(2.5rem, 5vw, 4rem);
  }
  .footer__grid {
    display: grid;
    grid-template-columns: minmax(auto, 18rem) 1fr auto;
    column-gap: var(--gutter);
    row-gap: var(--space-xl);
    align-items: start;
  }
  .footer__brand img {
    block-size: clamp(2.6rem, 3.5vw, 3.2rem);
    inline-size: auto;
    margin-block-end: var(--space-sm);
  }
  .footer__brand .caps { color: var(--on-ink-quiet); }
  .footer__nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    align-self: start;
  }
  .footer__nav a {
    font-family: var(--font-sans);
    font-size: var(--fs-200);
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--on-ink);
    text-decoration: none;
    padding-block: 0.4rem;
    border-block-end: 1px solid transparent;
    transition: border-color var(--dur-quick) var(--ease-out-quint);
  }
  .footer__nav a:hover { border-block-end-color: var(--orange); }
  .footer__meta {
    text-align: end;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
  }
  .footer__meta .caps { color: var(--on-ink-quiet); font-size: var(--fs-mono-100); }
  .footer__meta .coord { color: var(--cyan-bright); font-size: var(--fs-mono-200); }

  @media (aspect-ratio < 1/1) {
    .footer__grid { grid-template-columns: 1fr; }
    .footer__meta { text-align: start; }
  }
}