/* --- Home -------------------------------------------------------------------------------------- */

.feature {
  display: grid;
  grid-template-columns: minmax(0, clamp(9rem, 18vw, 15rem)) minmax(0, 1fr);
  align-items: end;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin: 0 0 var(--space-7);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border-radius: var(--radius-xl);
  background: var(--surface);
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--tint) 92%, var(--bg)) 0%,
    color-mix(in oklab, var(--tint) 45%, var(--bg)) 70%,
    color-mix(in oklab, var(--tint) 28%, var(--bg)) 100%);
}
.feature-art { border-radius: var(--radius-cover); }
.feature-art .cover { width: 100%; height: auto; box-shadow: var(--shadow-cover); }
.feature-info { min-width: 0; }
.feature-title {
  display: block;
  margin: 0 0 var(--space-2);
  color: var(--fg);
  font-family: var(--font-display);
  font-weight: 850;
  font-stretch: 125%;
  font-size: clamp(1.875rem, 3.4vw + 1rem, 4rem);
  line-height: .94;
  letter-spacing: -.035em;
  text-decoration: none;
  text-wrap: balance;
}
.feature-title:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.feature-artist { margin: 0; color: var(--fg-muted); font-size: 1.0625rem; font-weight: 500; }

.shelves { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
.shelf-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.see-all { color: var(--fg-muted); font-family: var(--font-chrome); font-size: var(--meta); font-weight: 500; text-decoration: none; }
.see-all:hover { color: var(--fg); text-decoration: underline; }
.shelf-error { margin: 0; }
/* A failure banner (retry.js): an error notice (components/notice.css), the message
   and then Try again beside it, the button wrapping under it on a phone. */
.retry { flex-wrap: wrap; max-width: var(--measure); margin: var(--space-4) 0; }
.retry .notice-text { flex: 1 1 14rem; align-self: center; }

/* A shelf scrolls sideways inside itself and bleeds to the page edges; the page never
   scrolls sideways (main clips). */
/* A scroll container clips what overflows it, focus rings included, so the row keeps
   a few pixels of room above the tiles (and takes them back with the margin). */
.shelf-row {
  list-style: none;
  margin: calc(-1 * var(--space-1)) calc(-1 * var(--page-x)) 0;
  padding: var(--space-1) var(--page-x) var(--space-3);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(8.5rem, 13vw, 11.5rem);
  gap: var(--space-5);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding: 0 var(--page-x);
  scrollbar-width: thin;
  scrollbar-color: var(--surface-3) transparent;
}
.shelf-row > li { scroll-snap-align: start; }

/* A page with nothing to list (notice.js emptyState): a panel centred in the content
   column with a round icon chip, one sentence, and at most one action. */
.empty-state {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  max-width: 28rem;
  margin: var(--space-7) auto var(--space-4);
  text-align: center;
}
.empty-state-icon {
  width: 3.5rem;
  height: 3.5rem;
  padding: .875rem;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--fg);
}
.empty-state-text { margin: 0; color: var(--fg); }
.empty-state > .btn { margin-top: var(--space-2); }