/* Structure for the feed. Every colour, size and font comes from custom properties so each concept skins it.
 * --feed-ink  --feed-ink-soft  --feed-accent  --feed-card-bg  --feed-card-border  --feed-radius  --feed-gap
 * --feed-min (card width)  --feed-aspect (picture shape, e.g. 16/9)  --feed-font  --feed-heading-font  --feed-focus
 */
.feed { font-family: var(--feed-font, inherit); color: var(--feed-ink, inherit); }
.feed__heading { font-family: var(--feed-heading-font, inherit); margin: 0 0 1rem; }
.feed__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--feed-gap, 1.25rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--feed-min, 17rem)), 1fr)); align-items: start; }
.feed__item { margin: 0; min-width: 0; }
.feed__card { display: flex; flex-direction: column; height: 100%; background: var(--feed-card-bg, transparent); border: var(--feed-card-border, 1px solid color-mix(in srgb, currentColor 15%, transparent)); border-radius: var(--feed-radius, .75rem); overflow: hidden; }
.feed__media { position: relative; aspect-ratio: var(--feed-aspect, 16 / 9); background: var(--feed-media-bg, color-mix(in srgb, currentColor 8%, transparent)); display: grid; place-items: center; }
.feed__item[data-kind="short"] .feed__media, .feed__item[data-kind="reel"] .feed__media { aspect-ratio: var(--feed-aspect-tall, 9 / 16); max-height: var(--feed-tall-max, 28rem); }
.feed__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feed__network { position: absolute; left: .75rem; bottom: .6rem; font-family: var(--feed-heading-font, inherit); color: var(--feed-ink-soft, inherit); }
.feed__play { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; color: var(--feed-play-ink, currentColor); text-decoration: none; }
.feed__icon { width: var(--feed-play-size, 3.5rem); height: var(--feed-play-size, 3.5rem); border-radius: 50%; background: var(--feed-play-bg, var(--feed-accent, currentColor)); display: grid; place-items: center; transition: transform var(--feed-dur, .18s); }
.feed__icon::before { content: ""; margin-left: 12%; border-style: solid; border-width: .55rem 0 .55rem .9rem; border-color: transparent transparent transparent var(--feed-play-ink, var(--feed-card-bg, canvas)); }
.feed__play:hover .feed__icon { transform: scale(1.06); }
.feed__play:focus-visible, .feed__nav:focus-visible, .feed__follow-link:focus-visible, .feed__link:focus-visible, .feed__list:focus-visible { outline: 3px solid var(--feed-focus, currentColor); outline-offset: 3px; }
.feed__badge { position: absolute; left: .6rem; top: .6rem; padding: .15rem .55rem; font-size: .75rem; border-radius: 999px; background: var(--feed-badge-bg, var(--feed-card-bg, canvas)); color: var(--feed-badge-ink, var(--feed-ink, inherit)); pointer-events: none; }
.feed__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.feed__body { padding: var(--feed-pad, 1rem); display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.feed__title { font-family: var(--feed-heading-font, inherit); font-size: var(--feed-title-size, 1.125rem); line-height: 1.3; margin: 0; }
.feed__caption { margin: 0; color: var(--feed-ink-soft, inherit); font-size: .9375rem; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.feed__meta { margin: auto 0 0; font-size: .875rem; }
.feed__link, .feed__follow-link { color: var(--feed-accent, inherit); text-underline-offset: .2em; }
.feed__follow { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: baseline; margin-top: 1.5rem; }
.feed__follow-label { color: var(--feed-ink-soft, inherit); }
.feed__empty { color: var(--feed-ink-soft, inherit); }
.feed__rail { position: relative; }
.feed--carousel .feed__list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: .25rem; padding-bottom: .75rem; -webkit-overflow-scrolling: touch; }
.feed--carousel .feed__item { flex: 0 0 min(80%, var(--feed-min, 17rem)); scroll-snap-align: start; }
.feed__nav { position: absolute; top: 35%; z-index: 2; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: var(--feed-card-border, 1px solid currentColor); background: var(--feed-card-bg, canvas); color: var(--feed-ink, inherit); font-size: 1.5rem; line-height: 1; cursor: pointer; display: none; }
.feed__nav--prev { left: -.5rem; } .feed__nav--next { right: -.5rem; }
@media (hover: hover) and (min-width: 48rem) { .feed__nav { display: block; } }
@media (prefers-reduced-motion: reduce) { .feed__icon { transition: none; } .feed--carousel .feed__list { scroll-behavior: auto; } }
.feed__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }