.series-hero { display: grid; gap: 1.5rem; margin: 1rem 0 2.5rem; }
.series-cover { width: min(100%, 560px); aspect-ratio: 16/9; object-fit: cover; border-radius: 6px; background: linear-gradient(145deg, #333, #111); box-shadow: var(--shadow); }
.series-copy { align-self: end; }
.series-copy h1 { margin: .45rem 0 1rem; }
.series-copy > p:not(.title-brand):not(.series-facts) { max-width: 65ch; }
.series-facts { color: #bdbdbd; font-size: .8rem; }
.series-facts strong { color: #58c879; }
.episodes-section { padding-top: 1rem; border-top: 1px solid var(--line); }
.episode-list { display: grid; }
.episode-item { display: grid; grid-template-columns: 72px minmax(0,1fr) auto; align-items: center; gap: .8rem; min-height: 102px; border-bottom: 1px solid var(--line); padding: .8rem 0; text-align: left; cursor: pointer; }
.episode-item:hover { background: rgba(255,255,255,.025); }
.episode-thumb { width: 72px; aspect-ratio: 9/16; position: relative; border-radius: 4px; overflow: hidden; background: #222; }
.episode-thumb img { width: 100%; height: 100%; object-fit: cover; }
.episode-play { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%,-50%); width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; background: rgba(0,0,0,.55); }
.episode-play svg { width: 15px; height: 15px; margin-left: 2px; }
.episode-copy { min-width: 0; }
.episode-copy > span:first-child { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.episode-copy strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.episode-copy small { color: #999; font-size: .75rem; }
.episode-copy p { display: none; margin: .5rem 0 0; font-size: .8rem; }
.episode-progress { display: block; height: 3px; margin-top: .65rem; background: #444; }
.episode-progress i { display: block; height: 100%; background: var(--accent); }
.watched { color: #aaa; font-weight: 900; }
.watched svg { width: 1rem; }
@media (max-width: 480px) { .button--wide-mobile { width: 100%; } }
@media (orientation: portrait) and (max-width: 699px) {
  .series-cover { width: 100%; object-fit: contain; background: linear-gradient(145deg, #2b2b2b, #111); }
}
@media (min-width: 700px) {
  .series-hero { grid-template-columns: 300px 1fr; gap: 3rem; margin-top: 2rem; }
  .series-cover { width: 300px; }
  .episode-item { grid-template-columns: 101px minmax(0,1fr) auto; min-height: 130px; padding: 1rem; }
  .episode-thumb { width: 101px; }
  .episode-copy p { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}