.hero { position: relative; min-height: min(76dvh, 720px); overflow: hidden; display: flex; align-items: end; padding: 1.25rem 0 2rem; background: radial-gradient(circle at 70% 30%, #2e2e2e, #090909 70%); margin: 0 calc(-1 * max(1rem, env(safe-area-inset-right))) 1.8rem; padding-inline: max(1rem, env(safe-area-inset-right)); }
.hero__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; opacity: .82; -webkit-mask-image: linear-gradient(#000 0 44%, rgba(0,0,0,.45) 56%, transparent 70%); mask-image: linear-gradient(#000 0 44%, rgba(0,0,0,.45) 56%, transparent 70%); }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.5) 0, transparent 25%, transparent 34%, rgba(8,8,8,.88) 62%, #080808 88%), linear-gradient(90deg, rgba(0,0,0,.42), transparent 70%); }
.hero__content { position: relative; z-index: 1; width: min(100%, 610px); text-shadow: 0 2px 22px rgba(0,0,0,.55); }
.hero__kicker, .title-brand { display: inline-flex; align-items: center; gap: .55rem; color: #eee; letter-spacing: .25em; font-size: .67rem; font-weight: 850; }
.hero__kicker-label, .title-brand__label { letter-spacing: .25em; }
.hero__content h1 { max-width: 11ch; margin: .55rem 0 .8rem; font-size: clamp(2.75rem, 13vw, 5.5rem); }
.hero__meta { margin-bottom: .5rem; color: #eee; font-size: .78rem; font-weight: 650; }
.hero__meta span { padding: 0 .25rem; color: #aaa; }
.hero__description { display: -webkit-box; max-width: 50ch; margin-bottom: 1.1rem; overflow: hidden; color: #e1e1e1; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.hero__actions .button { min-width: 124px; }
.empty-state--hero { min-height: 60dvh; display: grid; place-content: center; }
.eyebrow { color: #9c9c9c; text-transform: uppercase; letter-spacing: .16em; font-size: .68rem; font-weight: 900; }
.section { margin: 1.8rem 0; }
.section__head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: .8rem; }
.section__head h2 { margin: 0; }
.section__head > span { color: #777; font-size: .76rem; }
.card-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(132px, 39vw); gap: .65rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: .15rem 0 1rem; }
.card-row::-webkit-scrollbar { display: none; }
.series-card { scroll-snap-align: start; min-width: 0; transition: transform .2s ease; }
.series-card:hover { transform: translateY(-4px); }
.series-card__poster { aspect-ratio: 16 / 9; border-radius: 5px; overflow: hidden; background: linear-gradient(145deg, #2b2b2b, #111); position: relative; }
.series-card__poster img { width: 100%; height: 100%; object-fit: cover; }
.card-brand { position: absolute; left: .5rem; top: .45rem; }
.series-card__meta { padding: .55rem .1rem; }
.series-card__meta strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .88rem; }
.series-card__meta small { color: #777; font-size: .72rem; }
.continue-card { display: grid; grid-template-columns: 56px 1fr; gap: .8rem; width: min(80vw, 340px); background: var(--surface); border-radius: 6px; padding: .5rem; overflow: hidden; }
.continue-card img, .continue-card__placeholder { width: 56px; aspect-ratio: 9/16; object-fit: cover; border-radius: 3px; background: linear-gradient(145deg, #333, #111); }
.continue-card__body { min-width: 0; align-self: center; }
.continue-card__body p { margin: .3rem 0; font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meter { height: 3px; border-radius: 99px; background: #444; overflow: hidden; margin-top: .7rem; }
.meter span { display: block; height: 100%; background: var(--accent); }
@media (min-width: 700px) {
  .card-row { grid-auto-columns: 180px; gap: .8rem; }
  .hero { margin-inline: -2.5rem; padding-inline: 2.5rem; }
  .hero__content { padding-bottom: 1.5rem; }
}
@media (orientation: portrait) and (max-width: 699px) {
  .hero { min-height: auto; flex-direction: column; align-items: stretch; gap: 1rem; padding-top: calc(68px + .5rem); padding-bottom: 1.5rem; }
  .hero::before { background: linear-gradient(180deg, rgba(0,0,0,.35) 0, transparent 18%, transparent 100%), linear-gradient(90deg, rgba(0,0,0,.2), transparent 70%); }
  .hero__art { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; object-position: center; opacity: 1; -webkit-mask-image: none; mask-image: none; border-radius: 6px; background: linear-gradient(145deg, #2b2b2b, #111); }
  .hero__content { width: 100%; text-shadow: none; }
  .series-card__poster img { object-fit: contain; background: #111; }
}