/* THE DIAL: a side-scroll of tall portrait idents, one per channel, in the curator's order.
   One file for the front and the CMS worlds tab, so the tab IS the front's row, not a copy of it.
   No zone label -- the portrait format + horizontal scroll imply it. */
.sp-posterrow {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: var(--space-md) var(--space-md) var(--space-lg);
  scrollbar-width: none
}

.sp-posterrow::-webkit-scrollbar {
  display: none
}

/* the ident -- 3:4, intentionally a different format from the landscape feed hero, so a channel
   can never be mistaken for a story. A world supplies a portrait `poster`, else it borrows its
   newest post's landscape hero (A4) center-cropped into the frame. 40% = two and a half visible,
   so the row obviously scrolls. */
.sp-poster {
  position: relative;
  flex: 0 0 40%;
  scroll-snap-align: start;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  text-decoration: none;
  background: var(--bg-elevated);
  border: var(--border-width) solid var(--border-subtle);
  cursor: pointer
}

/* at two channels a scroll rail is a lie -- the row becomes a fitted pair instead. This is the
   shipping shape (the live corpus has two worlds), not an edge case. */
.sp-posterrow.fit .sp-poster {
  flex: 1 1 0
}

/* the record's frame reaches the reader as its CSS sink and nothing else: `--pos` IS the
   object-position, so no client parses "ar,px%,py%" a fifth time. */
.sp-posterimg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 38%)
}

/* legibility scrim over arbitrary photos -- fixed dark gradient + light text is a deliberate
   exception to theme tokens (text must read on any image, regardless of light/dark mode). */
.sp-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0) 58%)
}

.sp-postermeta {
  position: relative;
  z-index: 1;
  padding: var(--space-sm)
}

.sp-postername {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-base);
  line-height: var(--leading-tight);
  color: #fff
}

.sp-postercount {
  display: block;
  margin-top: var(--space-3xs);
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  opacity: .7
}