/*
 * This site's home page, loaded after site.css (which stays byte for byte the
 * shared file) on / only. PainFreeWorking's home is its own (Dean, 2026-09-26):
 * a tile per hub, then a section per hub led by its top picks, where the other
 * sites show one filtered list. Tokens only; no colour is named here.
 */
.home-shop__h { margin: 2.5rem 0 1rem; }
.home-shop { margin-bottom: 1rem; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 36rem) { .home-shop { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64rem) { .home-shop { grid-template-columns: repeat(6, 1fr); } }
.home-shop .tile__shot { aspect-ratio: 4 / 3; }

.home-hub { padding-top: 2.5rem; margin-top: 2.5rem; border-top: 1px solid var(--line); scroll-margin-top: 5rem; }
.home-hub > h2 { margin: 0 0 .4rem; }
.home-hub > h2 a { color: var(--ink); text-decoration: none; }
.home-hub > h2 a:hover { color: var(--brand); }
.home-hub > .lede { margin: 0 0 1.5rem; }
.home-hub .toppicks { margin-bottom: 1.25rem; }
.home-hub__more { margin: 0; font-size: .95rem; color: var(--ink-soft); }

/* On a phone the three picks of a hub sit in one row you swipe (Dean,
   2026-09-26), so six hubs stop being eighteen stacked cards. Each card is
   85% wide so the next one shows at the edge: that sliver is the hint. */
@media (max-width: 35.99rem) {
  .home-hub .toppicks__grid {
    grid-template-columns: none; grid-template-rows: repeat(3, auto); grid-auto-flow: column; grid-auto-columns: 85%;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    padding-bottom: .75rem;
  }
  .home-hub .pick { scroll-snap-align: start; }
}