/* Footer styled by @elements/style/layout.css (.footer). The
   default uses var(--rule) which reads heavier than the topbar's
   nearly-invisible border-bottom — here we soften the footer
   border-top to match so the page top and bottom feel balanced. */

.footer {
  border-top: 1px solid rgba(23, 23, 26, 0.04);
}

/* Align horizontal gutters and width with the project's topbar
   override (1240px / 1.5rem). The framework default uses
   --space-8 (2rem) which made the footer feel inset relative
   to the topbar. */
.footer .footer-inner {
  max-width: 1240px;
  padding-left:  1.5rem;
  padding-right: 1.5rem;
}

/* Mobile: keep both halves on the SAME row. The content is short
   (handle email + copyright) and the row reads cleaner as a single
   strip than as a stacked block. flex-wrap lets it break gracefully
   if a future tagline pushes the width past iPhone. */
@media (max-width: 700px) {
  .footer-inner {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
}