/* Instagram follow button — one rule set shared by the homepage footer, the
   server-rendered watch/hub pages, the blog, and the static pages, so the
   button looks identical wherever it sits. Colours fall back to the dark
   theme values when a page's stylesheet does not define the variables.
   The phone padding keeps the tap target at ~44px, matching the footer nav
   links. */
.ig-follow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
  padding: 10px 16px;
  border: 1px solid var(--line, #232326);
  border-radius: 999px;
  background: var(--panel-2, #131316);
  color: var(--text, #f2f2f5);
  font: 700 12.5px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.3px;
  text-decoration: none;
  transition: border-color 0.16s, color 0.16s, transform 0.16s;
}

.ig-follow svg { flex: none; }

.ig-follow:hover {
  border-color: var(--red-bright, #ff1f2d);
  color: var(--red-bright, #ff1f2d);
  transform: translateY(-1px);
}

.ig-follow:active { transform: none; }

.ig-follow:focus-visible {
  outline: 2px solid var(--red-bright, #ff1f2d);
  outline-offset: 3px;
}

/* The server-rendered watch/hub footer puts the button beside the logo in a
   flex row, so it needs a side margin instead of the stacked top margin. */
.foot .ig-follow { margin: 0 0 0 16px; }

/* Centered variant for the blog/advertise/merch footers, which are a single
   centered line of text rather than a column. */
.ig-follow.ig-follow-center { margin: 14px auto 0; }

.ig-follow-inside { text-align: center; }

@media (max-width: 560px) {
  .ig-follow { padding: 13px 18px; }
  .foot .ig-follow { margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ig-follow, .ig-follow:hover { transform: none; transition: none; }
}