.social-follow {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.25rem 2rem;
  padding: 1.75rem clamp(1.2rem, 4vw, 4.5rem);
  border-top: 3px solid var(--ink, #15100d);
  background: var(--paper, #fff9e9);
  color: var(--brown, #451800);
  font-family: 'DM Sans', Arial, sans-serif;
  line-height: 1.5;
}

.social-follow-copy { flex: 1 1 25rem; max-width: 43rem; }
.social-follow-copy h2 { margin: 0 0 .4rem; color: inherit; font-family: 'Bangers', Impact, sans-serif; font-size: clamp(2rem, 3vw, 2.75rem); font-weight: 400; line-height: 1.1; }
.social-follow-copy p { margin: 0; font-size: .9375rem; }
.social-follow-links { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.social-follow-links li { margin: 0; padding: 0; }

.social-follow-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-width: 4.2rem;
  min-height: 4.75rem;
  padding: .45rem;
  color: inherit;
  border-radius: .25rem;
  font-size: .8125rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
}

.social-follow-link svg { display: block; width: 2.2rem; height: 2.2rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.social-follow-link:hover { background: var(--yellow, #ffe52b); }
.social-follow-link:focus-visible { outline: 3px solid var(--brown, #451800); outline-offset: 3px; }

@media (max-width: 760px) {
  .social-follow { flex-direction: column; align-items: flex-start; gap: 1rem; padding-block: 1.5rem; }
  .social-follow-copy { flex: none; }
  .social-follow-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; width: min(100%, 24rem); }
  .social-follow-link { min-width: 0; padding: .45rem .1rem; font-size: .75rem; }
}