.blog-footer {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 2rem;
  padding: 3rem max(1.5rem, calc((100vw - 1000px) / 2));
  background: var(--ink);
  color: var(--paper);
}

.blog-footer strong { font: 400 clamp(1.8rem, 4vw, 3rem)/1 var(--font-serif); }
.blog-footer p { max-width: 46ch; margin: 0.9rem 0 0; color: color-mix(in srgb, var(--paper) 68%, transparent); font-size: 0.82rem; }
.blog-footer nav { display: flex; flex-wrap: wrap; align-content: start; justify-content: flex-end; gap: 1rem 1.5rem; }
.blog-footer a { border-bottom: 1px solid color-mix(in srgb, var(--paper) 35%, transparent); color: var(--paper); font: 500 0.67rem/1.5 var(--font-mono); letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; }
.blog-footer a:hover, .blog-footer a:focus-visible { border-color: var(--yellow); color: var(--yellow); }

@media (max-width: 768px) {
  .blog-footer { grid-template-columns: 1fr; padding-bottom: calc(var(--header-height) + 2rem); }
  .blog-footer nav { justify-content: flex-start; }
}