.homepage-mobile {
  display: none;
}

@media (max-width: 768px) {

  .homepage-mobile {
    display: block;
    padding-top: 64px;
  }

  /* ── Toggle bar ── */

  .mobile-toggle-bar {
    position: sticky;
    top: 64px;
    z-index: 40;
    background: var(--bg);
    border-bottom: 1px solid var(--ink-ghost);
    padding: 12px 20px;
    display: flex;
    justify-content: center;
  }

  .pill-toggle {
    display: inline-flex;
    background: var(--bg-card);
    border: 1px solid var(--ink-ghost);
    border-radius: 100px;
    padding: 3px;
    gap: 2px;
  }

  .pill-toggle__btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 100px;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 400;
    color: var(--ink-mid);
    padding: 6px 18px;
    cursor: pointer;
    transition: all 0.18s ease;
    letter-spacing: 0.02em;
  }

  .pill-toggle__btn--yar.is-active {
    background: var(--yar-bg);
    border-color: oklch(78% 0.07 240);
    color: var(--yar);
    font-weight: 500;
  }

  .pill-toggle__btn--mar.is-active {
    background: var(--mar-bg);
    border-color: oklch(78% 0.08 42);
    color: var(--mar);
    font-weight: 500;
  }

  /* ── Feeds ── */

  .mobile-feed {
    padding: 28px 20px 80px;
  }

  .mobile-feed.is-hidden {
    display: none;
  }

  .mobile-feed .col__feed {
    gap: 16px;
  }

  /* ── Admin bar offset (mobile admin bar is 46px) ── */

  .admin-bar .mobile-toggle-bar {
    top: 110px; /* 64px header + 46px admin bar */
  }

}