* {margin:0;padding:0;box-sizing:border-box}
:root {
--bg-deep:#160f0a;
--bg-panel:#1f1610;
--bg-panel-2:#271b13;
--copper:#c98a4b;
--copper-bright:#e8b06a;
--copper-dim:#8a5f33;
--gold-text:#e6c79b;
--patina:#3f8f7f;
--cold-blue:#4a7fb5;
--cold-blue-bright:#7cb6e8;
--rust:#7a3f22;
--line:rgba(201,138,75,.28);
--line-strong:rgba(201,138,75,.55);
--font-head:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,"Helvetica Neue",sans-serif;
--font-body:"Songti SC","SimSun","Noto Serif SC",Georgia,serif;
}
html {-webkit-text-size-adjust:100%}
body {
background:
radial-gradient(circle at 12% 8%,rgba(201,138,75,.10),transparent 42%),
radial-gradient(circle at 88% 4%,rgba(74,127,181,.14),transparent 46%),
var(--bg-deep);
color:var(--gold-text);
font-family:var(--font-body);
font-size:14px;
line-height:1.5;
letter-spacing:.02em;
min-height:100vh;
overflow-x:hidden;
}
img, video {display:block;max-width:100%}
ul, ol {list-style:none}
a {color:inherit;text-decoration:none}
button {font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1, h2, h3 {font-family:var(--font-head);font-weight:700;line-height:1.25;letter-spacing:.04em}
.site-header {
position:relative;
padding:10px clamp(12px,3vw,28px) 8px;
border-bottom:1px solid var(--line);
background:linear-gradient(180deg,rgba(39,27,19,.92),rgba(22,15,10,.7));
}
.site-header__brand-row {
display:flex;
flex-wrap:wrap;
align-items:baseline;
gap:6px 14px;
}
a[data-contract="site-name"] {
font-family:var(--font-head);
font-size:clamp(18px,3.4vw,24px);
font-weight:800;
letter-spacing:.14em;
color:var(--copper-bright);
text-decoration:none;
text-shadow:0 0 14px rgba(201,138,75,.35);
position:relative;
padding-left:14px;
}
a[data-contract="site-name"]::before {
content:"";
position:absolute;
left:0;top:50%;
transform:translateY(-50%);
width:6px;height:6px;
border-radius:50%;
background:var(--copper);
box-shadow:0 0 0 2px rgba(201,138,75,.25),0 0 10px rgba(232,176,106,.6);
}
a[data-contract="site-name"]:hover {color:#fff0d6}
.site-header__note {
font-size:11.5px;
color:var(--copper-dim);
letter-spacing:.16em;
}
.site-header__categories {
display:flex;
flex-wrap:wrap;
gap:6px;
margin-top:8px;
}
a.runtime-category {
white-space:nowrap;
display:inline-block;
font-family:var(--font-head);
font-size:12px;
letter-spacing:.1em;
padding:3px 10px;
border:1px solid var(--line);
border-radius:2px;
color:var(--copper);
text-decoration:none;
background:rgba(201,138,75,.06);
transition:color .18s,border-color .18s,background .18s;
}
a.runtime-category:hover {
color:var(--cold-blue-bright);
border-color:var(--cold-blue);
background:rgba(74,127,181,.14);
}
.page-main {
padding:clamp(12px,2.6vw,26px) clamp(12px,3vw,28px) 20px;
display:flex;
flex-direction:column;
gap:clamp(14px,2.4vw,22px);
max-width:1280px;
margin:0 auto;
}
.hero {
position:relative;
display:grid;
grid-template-columns:minmax(0,1fr);
gap:12px;
}
.hero__poster-wrap {
position:relative;
width:100%;
max-width:280px;
margin:0 auto;
}
.hero__poster {
width:100%;
height:auto;
aspect-ratio:9/16;
object-fit:cover;
border:1px solid var(--line-strong);
border-radius:3px;
box-shadow:0 0 0 1px rgba(0,0,0,.6),0 14px 40px rgba(0,0,0,.6),0 0 34px rgba(201,138,75,.12);
}
.hero__poster-rivet {
position:absolute;
width:12px;height:12px;
border-radius:50%;
background:radial-gradient(circle at 34% 30%,var(--copper-bright),var(--copper-dim) 70%,#4a2f16);
box-shadow:inset 0 0 3px rgba(0,0,0,.7);
}
.hero__poster-rivet--tl {top:-6px;left:-6px}
.hero__poster-rivet--br {bottom:-6px;right:-6px}
.hero__face {
position:relative;
width:100%;
aspect-ratio:16/9;
max-height:340px;
border:1px solid var(--line);
border-radius:3px;
overflow:hidden;
background:#0d0806;
display:flex;
}
.hero__face-half {
flex:1 1 50%;
position:relative;
min-width:0;
}
.hero__face-half--polished {
background:
linear-gradient(115deg,rgba(255,240,214,.4),rgba(201,138,75,.16) 42%,transparent 62%),
repeating-linear-gradient(96deg,rgba(255,235,205,.10) 0 2px,transparent 2px 7px),
linear-gradient(160deg,#8b5a2c,#4d2f16 60%,#2a1a0c);
}
.hero__face-half--oxidized {
background:
radial-gradient(circle at 28% 32%,rgba(63,143,127,.55),transparent 24%),
radial-gradient(circle at 68% 66%,rgba(63,143,127,.42),transparent 20%),
radial-gradient(circle at 46% 82%,rgba(122,63,34,.6),transparent 26%),
repeating-linear-gradient(72deg,rgba(20,12,8,.55) 0 3px,transparent 3px 11px),
linear-gradient(200deg,#5d3a1c,#2c1c0e 70%);
}
.hero__face-half--oxidized::after {
content:"";
position:absolute;
inset:0;
background:
conic-gradient(from 40deg at 60% 50%,transparent 0 12deg,rgba(201,138,75,.25) 12deg 14deg,transparent 14deg 40deg),
repeating-radial-gradient(circle at 66% 42%,rgba(201,138,75,.18) 0 1px,transparent 1px 9px);
mix-blend-mode:screen;
}
.hero__face-caption {
position:absolute;
left:10px;
bottom:8px;
font-family:var(--font-head);
font-size:11px;
letter-spacing:.18em;
color:var(--copper-bright);
background:rgba(13,8,6,.72);
border-left:2px solid var(--copper);
padding:3px 8px;
}
.hero__overlay {
position:relative;
z-index:2;
background:linear-gradient(180deg,rgba(31,22,16,.96),rgba(22,15,10,.98));
border:1px solid var(--line);
border-radius:3px;
padding:12px 14px 14px;
display:flex;
flex-direction:column;
gap:8px;
}
.hero__title {
font-size:clamp(20px,4.6vw,30px);
color:var(--copper-bright);
letter-spacing:.06em;
}
.hero__tagline {
font-family:var(--font-head);
font-size:13px;
letter-spacing:.14em;
color:var(--patina);
}
.hero__tagline::before {
content:"◈ ";
color:var(--copper-dim);
}
.hero__seo {
font-size:12.5px;
line-height:1.65;
color:#c7a97d;
}
.hero__actions {
display:flex;
flex-wrap:wrap;
gap:7px;
margin-top:2px;
}
.hero__cta {
font-family:var(--font-head);
font-size:12px;
letter-spacing:.12em;
padding:6px 13px;
border:1px solid var(--line-strong);
border-radius:2px;
color:var(--copper-bright);
background:rgba(201,138,75,.08);
transition:color .18s,background .18s,border-color .18s,box-shadow .18s;
}
.hero__cta:hover {
color:#fff3dd;
background:rgba(201,138,75,.2);
box-shadow:0 0 14px rgba(201,138,75,.3);
}
.hero__cta--primary {
background:linear-gradient(180deg,var(--copper),var(--copper-dim));
color:#22150a;
border-color:var(--copper-bright);
font-weight:700;
}
.hero__cta--primary:hover {color:#160f0a;background:var(--copper-bright)}
.hero__cta--theater:hover, .hero__cta--light:hover {
border-color:var(--cold-blue);
color:var(--cold-blue-bright);
background:rgba(74,127,181,.16);
box-shadow:0 0 14px rgba(74,127,181,.3);
}
.hero__player-shell {
position:relative;
width:100%;
border:1px solid var(--line);
border-radius:3px;
background:#0b0604;
padding:6px;
transition:box-shadow .25s,filter .25s;
}
.hero__player {
width:100%;
aspect-ratio:16/9;
object-fit:cover;
background:#000;
border-radius:2px;
}
.hero__player-bar {
display:flex;
flex-wrap:wrap;
gap:5px;
margin-top:6px;
}
.player-btn {
font-family:var(--font-head);
font-size:11px;
letter-spacing:.1em;
padding:4px 9px;
border:1px solid var(--line);
border-radius:2px;
color:var(--copper);
background:rgba(201,138,75,.06);
transition:color .16s,background .16s,border-color .16s;
}
.player-btn:hover {color:var(--cold-blue-bright);border-color:var(--cold-blue)}
.player-btn.is-active {
color:#0d0806;
background:linear-gradient(180deg,var(--copper-bright),var(--copper));
border-color:var(--copper-bright);
}
.hero__player-shell.is-theater {
box-shadow:0 0 0 1px var(--cold-blue),0 0 40px rgba(74,127,181,.35);
}
.hero__player-shell.is-lights-off {
filter:brightness(.62) saturate(1.15);
}
.hero__player-shell.is-lights-off:hover {filter:brightness(.92)}
.cast {
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
padding-top:10px;
padding-bottom:12px;
background:
repeating-linear-gradient(90deg,transparent 0 22px,rgba(201,138,75,.05) 22px 23px);
}
.cast__heading, .synopsis__heading, .episode-status__heading, .details__heading, .timeline__heading, .episodes__heading, .comments__heading, .rec-strip__heading {
font-size:15px;
letter-spacing:.16em;
color:var(--copper-bright);
margin-bottom:9px;
position:relative;
padding-left:16px;
}
.cast__heading::before, .synopsis__heading::before, .episode-status__heading::before, .details__heading::before, .timeline__heading::before, .episodes__heading::before, .comments__heading::before, .rec-strip__heading::before {
content:"";
position:absolute;
left:0;top:50%;
transform:translateY(-50%);
width:9px;height:9px;
border-radius:50%;
border:1px solid var(--copper);
background:radial-gradient(circle,var(--copper-dim),transparent 70%);
}
.cast__strip {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
gap:8px;
align-items:start;
}
.cast__item {
display:flex;
flex-direction:column;
align-items:center;
gap:4px;
padding:8px 6px;
border:1px solid var(--line);
border-radius:2px;
background:linear-gradient(180deg,rgba(39,27,19,.9),rgba(22,15,10,.9));
position:relative;
text-align:center;
}
.cast__item::before, .cast__item::after {
content:"";
position:absolute;
top:4px;bottom:4px;
width:2px;
background:linear-gradient(180deg,transparent,var(--copper-dim),transparent);
}
.cast__item::before {left:3px}
.cast__item::after {right:3px}
.cast__avatar {
width:44px;height:44px;
border-radius:50%;
background:
radial-gradient(circle at 36% 30%,var(--copper-bright),var(--copper-dim) 58%,#3a2410 100%);
box-shadow:0 0 0 2px rgba(201,138,75,.22),inset 0 0 8px rgba(0,0,0,.6);
position:relative;
}
.cast__avatar::after {
content:"";
position:absolute;
inset:8px;
border-radius:50%;
border:1px dashed rgba(22,15,10,.6);
}
.cast__name {
font-family:var(--font-head);
font-size:12.5px;
letter-spacing:.08em;
color:var(--gold-text);
}
.cast__role-line {
font-size:10.5px;
line-height:1.4;
color:var(--copper-dim);
letter-spacing:.04em;
padding-top:3px;
border-top:1px solid var(--line);
width:100%;
}
.synopsis {
border-left:2px solid var(--line-strong);
padding-left:12px;
}
.synopsis__paras {
display:grid;
grid-template-columns:minmax(0,1fr);
gap:7px;
}
.synopsis__para {
font-size:13px;
line-height:1.72;
color:#cbae83;
}
.synopsis__para::first-letter {
color:var(--copper-bright);
font-family:var(--font-head);
}
.episode-status {
background:linear-gradient(180deg,rgba(39,27,19,.9),rgba(24,16,10,.9));
border:1px solid var(--line);
border-radius:3px;
padding:11px 13px;
display:flex;
flex-direction:column;
gap:7px;
max-width:640px;
}
.episode-status__line {
font-family:var(--font-head);
font-size:13px;
letter-spacing:.08em;
color:var(--gold-text);
}
.episode-status__gauge {
position:relative;
height:14px;
display:flex;
align-items:center;
}
.episode-status__gauge-track {
position:absolute;
left:0;right:0;
height:6px;
border-radius:3px;
background:
repeating-linear-gradient(90deg,rgba(201,138,75,.18) 0 1px,transparent 1px 9px),
linear-gradient(90deg,var(--copper-dim),rgba(201,138,75,.1));
border:1px solid var(--line);
}
.episode-status__gauge-needle {
position:absolute;
left:75%;
top:50%;
width:3px;height:14px;
margin-left:-1px;
transform:translateY(-50%);
background:var(--cold-blue-bright);
box-shadow:0 0 10px var(--cold-blue-bright);
border-radius:1px;
transition:left .4s ease;
}
.episode-status__gauge-needle.is-past-half {
background:var(--copper-bright);
box-shadow:0 0 12px var(--copper-bright);
}
.episode-status__meta {
font-size:11.5px;
letter-spacing:.05em;
color:var(--copper-dim);
}
.details {
border:1px solid var(--line);
border-radius:3px;
background:linear-gradient(180deg,rgba(31,22,16,.85),rgba(22,15,10,.85));
padding:11px 13px;
}
.details__list {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:0 18px;
}
.details__row {
display:flex;
gap:8px;
align-items:baseline;
padding:4px 0;
border-bottom:1px dashed rgba(201,138,75,.16);
min-width:0;
}
.details__key {
flex:0 0 auto;
font-family:var(--font-head);
font-size:11.5px;
letter-spacing:.1em;
color:var(--copper-dim);
}
.details__value {
font-size:12.5px;
color:var(--gold-text);
min-width:0;
word-break:break-word;
}
.timeline {
position:relative;
border:1px solid var(--line);
border-radius:3px;
background:
linear-gradient(180deg,rgba(31,22,16,.9),rgba(20,13,9,.9));
padding:12px 13px 14px;
}
.timeline__list {
position:relative;
display:flex;
flex-direction:column;
gap:6px;
padding-left:20px;
}
.timeline__list::before {
content:"";
position:absolute;
left:6px;
top:4px;
bottom:4px;
width:2px;
background:
repeating-linear-gradient(180deg,var(--copper-dim) 0 4px,transparent 4px 9px);
}
.timeline__item {
position:relative;
display:grid;
grid-template-columns:auto 1fr;
gap:2px 10px;
align-items:baseline;
padding:4px 6px 4px 8px;
border-radius:2px;
border-left:1px solid transparent;
transition:background .18s,border-color .18s;
}
.timeline__item:hover {
background:rgba(201,138,75,.07);
border-left-color:var(--cold-blue);
}
.timeline__tick {
position:absolute;
left:-20px;
top:9px;
width:9px;height:9px;
border-radius:50%;
border:1px solid var(--copper);
background:var(--bg-deep);
box-shadow:0 0 0 2px rgba(22,15,10,.9);
}
.timeline__item:hover .timeline__tick {
border-color:var(--cold-blue-bright);
box-shadow:0 0 8px var(--cold-blue);
}
.timeline__timecode {
font-family:var(--font-head);
font-size:11.5px;
letter-spacing:.08em;
color:var(--cold-blue-bright);
grid-column:1;
white-space:nowrap;
}
.timeline__label {
font-size:12.5px;
line-height:1.5;
color:#c8ab80;
grid-column:2;
}
.timeline__needle {
position:absolute;
right:10px;
top:12px;
bottom:14px;
width:26px;
pointer-events:none;
}
.timeline__needle-pin {
position:absolute;
right:6px;
top:0;
width:11px;height:11px;
border-radius:50%;
background:radial-gradient(circle at 34% 30%,var(--cold-blue-bright),var(--cold-blue) 70%,#183350);
box-shadow:0 0 10px rgba(124,182,232,.7);
}
.timeline__needle-arc {
position:absolute;
right:0;
top:12px;
bottom:0;
width:22px;
border-right:2px solid rgba(74,127,181,.45);
border-radius:0 22px 22px 0;
}
.episodes {
border-top:1px solid var(--line);
padding-top:12px;
}
.episodes__grid {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
gap:8px;
align-items:start;
}
.episodes__card {
position:relative;
display:flex;
flex-direction:column;
gap:4px;
padding:10px 11px 9px;
border:1px solid var(--line);
border-radius:2px;
background:linear-gradient(180deg,rgba(39,27,19,.85),rgba(22,15,10,.9));
overflow:hidden;
transition:border-color .18s,box-shadow .18s,transform .18s;
}
.episodes__card:hover {
border-color:var(--line-strong);
box-shadow:0 6px 20px rgba(0,0,0,.5),0 0 16px rgba(201,138,75,.14);
transform:translateY(-2px);
}
.episodes__card--active {
border-color:var(--copper-bright);
box-shadow:0 0 0 1px rgba(232,176,106,.4),0 0 22px rgba(201,138,75,.22);
}
.episodes__card--active::after {
content:"";
position:absolute;
left:0;top:0;bottom:0;
width:2px;
background:linear-gradient(180deg,var(--copper-bright),transparent);
}
.episodes__cog {
position:absolute;
right:7px;
top:7px;
width:13px;height:13px;
border-radius:50%;
border:2px dotted var(--copper-dim);
background:radial-gradient(circle,var(--copper-dim) 0 22%,transparent 24%);
opacity:.75;
}
.episodes__card--active .episodes__cog {
border-color:var(--copper-bright);
opacity:1;
}
.episodes__number {
font-family:var(--font-head);
font-size:10.5px;
letter-spacing:.14em;
color:var(--patina);
}
.episodes__title {
font-size:14px;
color:var(--copper-bright);
letter-spacing:.05em;
padding-right:18px;
}
.episodes__summary {
font-size:12px;
line-height:1.55;
color:#bda079;
}
.episodes__duration {
font-family:var(--font-head);
font-size:10.5px;
letter-spacing:.1em;
color:var(--copper-dim);
border-top:1px solid var(--line);
padding-top:4px;
margin-top:2px;
}
.comments {
position:relative;
border:1px solid var(--line);
border-radius:3px;
background:linear-gradient(180deg,rgba(31,22,16,.85),rgba(20,13,9,.9));
padding:12px 13px 16px;
}
.comments__columns {
display:grid;
grid-template-columns:minmax(0,1fr);
gap:10px;
align-items:start;
}
.comments__column {
display:flex;
flex-direction:column;
gap:8px;
min-width:0;
}
.comments__card {
display:flex;
flex-direction:column;
gap:4px;
padding:9px 11px;
border:1px solid var(--line);
border-left:2px solid var(--copper-dim);
border-radius:2px;
background:linear-gradient(180deg,rgba(42,29,20,.9),rgba(24,16,10,.9));
}
.comments__card--float {
transform:translateY(-5px);
border-left-color:var(--cold-blue);
box-shadow:0 8px 22px rgba(0,0,0,.5);
}
.comments__nickname {
font-family:var(--font-head);
font-size:11.5px;
letter-spacing:.1em;
color:var(--copper-bright);
}
.comments__card--float .comments__nickname {color:var(--cold-blue-bright)}
.comments__text {
font-size:12.5px;
line-height:1.62;
color:#c3a77e;
}
.comments__divider {
display:block;
height:7px;
margin-top:10px;
background:
repeating-linear-gradient(90deg,var(--copper-dim) 0 2px,transparent 2px 11px);
opacity:.5;
border-radius:2px;
}
.rec-strip {
position:relative;
border-top:1px solid var(--line);
padding:11px 13px 14px;
background:linear-gradient(180deg,rgba(31,22,16,.55),transparent);
}
.rec-strip__heading {
font-size:14px;
letter-spacing:.14em;
color:var(--copper-bright);
margin-bottom:9px;
}
.rec-strip__track {
display:grid;
grid-auto-flow:column;
grid-auto-columns:minmax(150px,1fr);
gap:8px;
overflow-x:auto;
padding-bottom:8px;
scrollbar-width:thin;
scrollbar-color:var(--copper-dim) transparent;
}
.rec-strip__track::-webkit-scrollbar {height:6px}
.rec-strip__track::-webkit-scrollbar-track {background:rgba(201,138,75,.08)}
.rec-strip__track::-webkit-scrollbar-thumb {background:var(--copper-dim);border-radius:3px}
.rec-strip__item {
min-width:0;
}
a.rec-strip__link {
display:flex;
flex-direction:column;
gap:5px;
height:100%;
padding:7px;
border:1px solid var(--line);
border-radius:2px;
background:linear-gradient(180deg,rgba(39,27,19,.9),rgba(22,15,10,.92));
color:var(--gold-text);
text-decoration:none;
transition:border-color .18s,box-shadow .18s,transform .18s;
}
a.rec-strip__link:hover {
border-color:var(--copper-bright);
box-shadow:0 0 18px rgba(201,138,75,.22);
transform:translateY(-2px);
color:#fff0d6;
}
[data-runtime="recommendation"] img, .rec-strip__pic {
width:100%;
height:auto;
aspect-ratio:16/10;
object-fit:cover;
border-radius:2px;
border:1px solid rgba(201,138,75,.2);
background:#160f0a;
}
.rec-strip__name {
font-family:var(--font-head);
font-size:12.5px;
letter-spacing:.06em;
color:var(--copper-bright);
}
.rec-strip__blurb {
font-size:11.5px;
line-height:1.5;
color:#b0966f;
}
.rec-strip__knob {
position:absolute;
right:9px;
top:12px;
width:15px;height:15px;
border-radius:50%;
border:2px dotted var(--copper);
background:
radial-gradient(circle,var(--copper-dim) 0 26%,transparent 28%),
var(--bg-panel-2);
box-shadow:0 0 10px rgba(201,138,75,.3);
}
.site-footer {
margin-top:14px;
padding:14px clamp(12px,3vw,28px) 22px;
border-top:1px solid var(--line);
background:linear-gradient(180deg,rgba(24,16,10,.9),rgba(13,8,6,.95));
display:flex;
flex-direction:column;
gap:9px;
}
.site-footer__disclaimer {
font-size:11.5px;
line-height:1.7;
color:#8f7550;
max-width:760px;
}
.site-footer__nav {
display:flex;
flex-wrap:wrap;
gap:8px 16px;
}
a[data-contract="footer-home"], a[data-contract="footer-sitemap"] {
font-family:var(--font-head);
font-size:12px;
letter-spacing:.12em;
color:var(--copper);
text-decoration:none;
transition:color .18s;
}
a[data-contract="footer-home"]:hover, a[data-contract="footer-sitemap"]:hover {
color:var(--cold-blue-bright);
text-decoration:underline;
}
.site-footer__friends {
display:flex;
flex-wrap:wrap;
align-items:baseline;
gap:6px 12px;
}
.site-footer__friends-label {
font-family:var(--font-head);
font-size:11px;
letter-spacing:.14em;
color:var(--copper-dim);
border-right:1px solid var(--line);
padding-right:10px;
}
a.runtime-friend-link {
font-size:11.5px;
letter-spacing:.04em;
color:#9d8259;
text-decoration:none;
transition:color .18s;
}
a.runtime-friend-link:hover {
color:var(--cold-blue-bright);
text-decoration:underline;
}
@media (min-width:600px){.cast__strip {grid-template-columns:repeat(auto-fit,minmax(104px,1fr))}
.episodes__grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.comments__columns {grid-template-columns:repeat(2,minmax(0,1fr))}
.rec-strip__track {grid-auto-columns:minmax(168px,1fr)}
.synopsis__paras {grid-template-columns:minmax(0,1fr)}}
@media (min-width:760px){.hero {
grid-template-columns:minmax(0,240px) minmax(0,1fr);
grid-template-areas:
"poster face"
"poster overlay"
"player player"
"cast cast"
"synopsis synopsis"
"status details";
align-items:start;
gap:12px 16px;
}
.hero__poster-wrap {grid-area:poster}
.hero__face {grid-area:face;max-height:none;height:100%}
.hero__overlay {grid-area:overlay}
.hero__player-shell {grid-area:player}
.cast {grid-area:cast}
.synopsis {grid-area:synopsis}
.episode-status {grid-area:status}
.details {grid-area:details}
.episodes__grid {grid-template-columns:repeat(3,minmax(0,1fr))}
.timeline__list {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:6px 28px;
}
.timeline__list::before {display:none}
.timeline__item {padding-left:16px}
.timeline__tick {left:0}}
@media (min-width:980px){.hero {
grid-template-columns:minmax(0,260px) minmax(0,1fr) minmax(0,260px);
grid-template-areas:
"poster face face"
"poster overlay status"
"player player player"
"cast cast cast"
"synopsis synopsis details";
gap:12px 18px;
}
.episodes__grid {grid-template-columns:repeat(4,minmax(0,1fr))}
.timeline__list {grid-template-columns:repeat(3,minmax(0,1fr))}
.comments__columns {grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.rec-strip__track {grid-auto-columns:minmax(190px,1fr)}
.synopsis__paras {grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px}}
@media (max-width:420px){.hero__cta {padding:5px 10px;font-size:11px}
.episodes__grid {grid-template-columns:minmax(0,1fr)}
.cast__strip {grid-template-columns:repeat(2,minmax(0,1fr))}
.rec-strip__track {grid-auto-columns:minmax(140px,1fr)}
.timeline__needle {display:none}}

footer{text-align:center!important}
footer *{justify-content:center!important}
footer :is(div,nav,ul,ol,p,section,address){margin-left:auto!important;margin-right:auto!important}