/* ===========================
   Juliana — Footer styles
   =========================== */

/*
 * P-footer / G-FOOT vertex.
 * #0D0D09 bg · circular J monogram · 3-col layout:
 *   Connect (Instagram, Substack) | Explore (Writing, Gallery) | Say Hello.
 * Column heads: oxblood eyebrow. Links: ink-dim, hover → ink.
 * Mobile-first: monogram centred, columns stacked → 3-col at 769px.
 */

/* ===========================
   Footer styles
   =========================== */

.j-footer {
  /* color */
  color: var(--c-ink);
  background-color: var(--c-footer);

  /* box model */
  width: 100%;

}

/* Mobile-first: stacked layout */
.j-footer__inner {
  /* box model */
  padding-block: var(--sp-64);

  /* display */
  display: flex;

  /* flexbox */
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-32);

}

@media (min-width: 769px) {
  .j-footer__inner {
    /* flexbox */
    flex-direction: row;
    align-items: flex-start;
    gap: var(--sp-48);

  }
}

.j-footer__brand {
  /* display */
  display: flex;

  /* flexbox */
  align-items: center;

}

.j-footer__monogram {
  /* text */
  text-decoration: none;

  /* color */
  color: var(--c-ink);

  /* display */
  display: inline-flex;

  /* transition */
  transition: opacity 0.2s ease;

}

.j-footer__monogram:hover {
  /* other */
  opacity: 0.8;

}

.j-footer__monogram svg {
  /* box model */
  width: 64px;
  height: 64px;

}

@media (min-width: 769px) {
  .j-footer__monogram svg {
    /* box model */
    width: 88px;
    height: 88px;

  }
}

.j-footer__monogram:focus-visible {
  /* border */
  border-radius: 50%;

  /* other */
  outline: 2px solid var(--c-ink);
  outline-offset: 4px;

}

.j-footer__col {
  /* box model */
  min-width: 120px;

  /* display */
  display: flex;

  /* flexbox */
  flex-direction: column;
  align-items: center;
  gap: var(--sp-16);

}

@media (min-width: 769px) {
  .j-footer__col {
    /* flexbox */
    align-items: flex-start;

  }
}

/* Column heading — j-eyebrow handles base styles */
.j-footer__col-head {
  /* box model */
  margin-bottom: var(--sp-4);

}

.j-footer__links {
  /* box model */
  margin: 0;
  padding: 0;

  /* display */
  display: flex;

  /* flexbox */
  flex-direction: column;
  align-items: center;
  gap: var(--sp-8);

  /* other */
  list-style: none;

}

@media (min-width: 769px) {
  .j-footer__links {
    /* flexbox */
    align-items: flex-start;

  }
}

.j-footer__link {
  /* text */
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  text-decoration: none;

  /* color */
  color: var(--c-ink-dim);

  /* box model */
  min-height: var(--sp-44); /* WCAG 44px touch target */

  /* display */
  display: inline-flex;

  /* flexbox */
  align-items: center;

  /* transition */
  transition: color 0.2s ease;

}

.j-footer__link:hover {
  /* color */
  color: var(--c-ink);

}

.j-footer__link:focus-visible {
  /* other */
  outline: 2px solid var(--c-ink);
  outline-offset: 2px;

}

.j-footer__email {
  /* text */
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;

  /* color */
  color: var(--c-ink-dim);

}

.j-footer__copy {
  /* text */
  text-align: center;

  /* box model */
  padding-block: var(--sp-24);

  /* border */
  border-top: 1px solid var(--c-hairline);

}

.j-footer__copy .j-meta {
  /* color */
  color: var(--c-ink-muted);

}