* {margin:0;padding:0;box-sizing:border-box}
:root {
--ochre:#8a6a4a;
--ochre-deep:#5f4630;
--ochre-dark:#3f2f20;
--straw:#c9b48a;
--straw-soft:#ded1b0;
--soil:#4a3a2a;
--soil-light:#6b5842;
--grey-green:#8a9179;
--grey-green-deep:#5f6a55;
--wheat:#d9a94c;
--wheat-bright:#e8c063;
--paper:#efe8d8;
--paper-deep:#e3d9c4;
--ink:#2e2418;
--line:rgba(95,70,48,.28)
}
html {-webkit-text-size-adjust:100%}
body {
font-family:"Songti SC","STSong","SimSun","Noto Serif SC",Georgia,serif;
background:var(--paper);
color:var(--ink);
line-height:1.5;
font-size:15px;
letter-spacing:.01em;
background-image:
repeating-linear-gradient(90deg,rgba(138,106,74,.035) 0 1px,transparent 1px 7px),
repeating-linear-gradient(0deg,rgba(138,106,74,.03) 0 1px,transparent 1px 9px);
}
img {display:block;max-width:100%}
a {color:var(--ochre-deep);text-decoration:none}
button, select, input {font:inherit;color:inherit}
ul, ol {list-style:none}
h1, h2, h3 {font-weight:600;line-height:1.25}
.site-header {
position:sticky;top:0;z-index:60;
background:linear-gradient(180deg,#3f2f20,#4a3826);
border-bottom:2px solid var(--wheat);
}
.site-header-bar {
display:flex;align-items:center;gap:14px;
flex-wrap:wrap;
padding:8px 16px;
max-width:1280px;margin:0 auto;
}
.site-brand {
font-size:17px;letter-spacing:.14em;color:var(--straw);
border-left:3px solid var(--wheat);
padding-left:9px;
}
a[data-contract="site-name"] {color:var(--straw);text-decoration:none}
a[data-contract="site-name"]:hover {color:var(--wheat-bright)}
.category-nav {
display:flex;flex-wrap:wrap;gap:6px;
flex:1 1 auto;justify-content:flex-end;
}
a.runtime-category {
white-space:nowrap;
font-size:12.5px;
color:var(--straw-soft);
padding:3px 9px;
border:1px solid rgba(217,169,76,.4);
border-radius:2px;
background:rgba(217,169,76,.07);
text-decoration:none;
transition:background .18s,color .18s,border-color .18s;
}
a.runtime-category:hover {
background:var(--wheat);color:var(--ochre-dark);border-color:var(--wheat);
}
.page-main {
max-width:1280px;margin:0 auto;
padding:0 16px 20px;
display:flex;flex-direction:column;gap:18px;
}
.hero-panel {
display:grid;
grid-template-columns:minmax(0,320px) minmax(0,1fr);
grid-template-areas:
"still info"
"still player"
"body body";
gap:12px 18px;
align-items:start;
padding-top:16px;
border-bottom:1px solid var(--line);
padding-bottom:18px;
}
.hero-still {
grid-area:still;
position:relative;
align-self:start;
}
.poster-frame {
width:100%;
aspect-ratio:9 / 16;
object-fit:cover;
border:1px solid var(--ochre-deep);
box-shadow:4px 4px 0 rgba(95,70,48,.22);
filter:saturate(.82) contrast(1.03);
}
.hero-slogan {
position:absolute;left:0;right:0;bottom:0;
padding:14px 12px 12px;
background:linear-gradient(180deg,transparent,rgba(63,47,32,.86) 42%,rgba(63,47,32,.96));
}
.movie-title {
font-size:clamp(20px,3.2vw,28px);
letter-spacing:.12em;
color:var(--straw);
text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.movie-tagline {
margin-top:5px;
font-size:12.5px;
color:var(--wheat-bright);
letter-spacing:.03em;
line-height:1.45;
}
.hero-info-bar {grid-area:info}
.info-strip {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
border:1px solid var(--line);
background:var(--paper-deep);
}
.info-cell {
display:flex;flex-direction:column;gap:3px;
padding:8px 11px;
border-right:1px dashed var(--line);
}
.info-cell:last-child {border-right:0}
.info-label {
font-size:11px;letter-spacing:.24em;
color:var(--grey-green-deep);
text-transform:uppercase;
}
.info-value {
font-size:14px;color:var(--ochre-dark);
font-weight:600;
}
.player-shell {
grid-area:player;
position:relative;
width:100%;
background:#241a11;
border:1px solid var(--ochre-dark);
}
.player-shell video {display:block;width:100%;background:#000}
.player-controls {
display:flex;flex-wrap:wrap;align-items:center;gap:6px;
padding:7px 8px;
background:linear-gradient(180deg,#3a2c1e,#2b2015);
border-top:1px solid rgba(217,169,76,.32);
}
.player-controls button, .player-controls select {
font-size:12px;
letter-spacing:.04em;
padding:4px 9px;
color:var(--straw-soft);
background:rgba(217,169,76,.08);
border:1px solid rgba(217,169,76,.34);
border-radius:2px;
cursor:pointer;
transition:background .16s,color .16s;
}
.player-controls button:hover, .player-controls select:hover {background:rgba(217,169,76,.24);color:var(--wheat-bright)}
.control-play {min-width:56px;font-weight:600}
.control-play.is-playing {background:var(--wheat);color:var(--ochre-dark);border-color:var(--wheat)}
.control-progress {
flex:1 1 120px;min-width:80px;
height:16px;
appearance:none;-webkit-appearance:none;
background:transparent;cursor:pointer;
}
.control-progress::-webkit-slider-runnable-track {
height:4px;background:rgba(201,180,138,.38);border-radius:2px;
}
.control-progress::-webkit-slider-thumb {
-webkit-appearance:none;appearance:none;
width:11px;height:11px;margin-top:-3.5px;
border-radius:50%;background:var(--wheat);border:0;
}
.control-progress::-moz-range-track {
height:4px;background:rgba(201,180,138,.38);border-radius:2px;
}
.control-progress::-moz-range-thumb {
width:11px;height:11px;border:0;border-radius:50%;background:var(--wheat);
}
.control-volume {
flex:0 1 84px;min-width:52px;
height:16px;
appearance:none;-webkit-appearance:none;
background:transparent;cursor:pointer;
}
.control-volume::-webkit-slider-runnable-track {
height:3px;background:rgba(201,180,138,.35);
}
.control-volume::-webkit-slider-thumb {
-webkit-appearance:none;appearance:none;
width:10px;height:10px;margin-top:-3.5px;
border-radius:50%;background:var(--grey-green);border:0;
}
.control-volume::-moz-range-track {height:3px;background:rgba(201,180,138,.35)}
.control-volume::-moz-range-thumb {width:10px;height:10px;border:0;border-radius:50%;background:var(--grey-green)}
.control-mute.is-muted, .control-pip.is-active, .control-fullscreen.is-active, .control-theater.is-active, .control-light.is-active {
background:var(--wheat);color:var(--ochre-dark);border-color:var(--wheat);
}
.player-shell.is-theater {
box-shadow:0 0 0 3px rgba(217,169,76,.3);
}
.player-shell.is-lights-off {
background:#000;
}
.player-shell.is-lights-off .player-controls {
background:linear-gradient(180deg,#161009,#0b0805);
}
.overview-body {
grid-area:body;
display:grid;
grid-template-columns:minmax(0,1.05fr) minmax(0,1.35fr) minmax(0,.9fr);
grid-template-areas:
"cast cast cast"
"synopsis synopsis status"
"synopsis synopsis details";
gap:14px 18px;
align-items:start;
}
.cast-strip {
grid-area:cast;
border-top:2px solid var(--ochre-deep);
border-bottom:1px solid var(--line);
padding:10px 0 12px;
}
.cast-heading, .synopsis-heading, .details-heading, .timeline-heading, .episodes-heading, .comments-heading {
font-size:14px;
letter-spacing:.3em;
color:var(--ochre-deep);
padding-left:10px;
border-left:4px solid var(--wheat);
margin-bottom:9px;
}
.cast-list {
display:flex;flex-wrap:wrap;gap:8px 10px;
}
.cast-card {
display:flex;align-items:center;gap:6px;
padding:5px 6px 5px 5px;
background:var(--paper-deep);
border:1px solid var(--line);
border-radius:2px;
}
.cast-avatar {
display:block;
width:46px;height:62px;
background:
linear-gradient(160deg,var(--grey-green) 0%,var(--ochre) 55%,var(--ochre-deep) 100%);
border:1px solid var(--ochre-deep);
border-radius:2px 2px 0 0;
position:relative;
overflow:hidden;
}
.cast-avatar::after {
content:"";
position:absolute;inset:auto 0 0 0;height:38%;
background:linear-gradient(180deg,transparent,rgba(63,47,32,.55));
}
.cast-name {
writing-mode:vertical-rl;
text-orientation:upright;
font-size:12.5px;
letter-spacing:.16em;
color:var(--ochre-dark);
align-self:stretch;
display:flex;align-items:center;
border-left:2px solid var(--straw);
padding-left:5px;
}
.synopsis-panel {
grid-area:synopsis;
background:var(--paper-deep);
border:1px solid var(--line);
border-top:2px solid var(--ochre-deep);
padding:12px 14px 14px;
}
.synopsis-lead {
font-size:14.5px;
line-height:1.72;
color:var(--ochre-dark);
padding-bottom:9px;
margin-bottom:9px;
border-bottom:1px dashed var(--line);
}
.synopsis-paragraphs {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px 14px;
}
.synopsis-paragraph {
font-size:13px;
line-height:1.68;
color:var(--soil-light);
}
.episode-status {
grid-area:status;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
border:1px solid var(--line);
background:var(--paper-deep);
align-self:start;
}
.status-cell {
display:flex;flex-direction:column;gap:2px;
padding:9px 10px;
border-right:1px dashed var(--line);
}
.status-cell:last-child {border-right:0}
.status-label {font-size:11px;letter-spacing:.2em;color:var(--grey-green-deep)}
.status-value {font-size:20px;font-weight:600;color:var(--ochre-dark);line-height:1.1}
.details-panel {
grid-area:details;
background:var(--paper-deep);
border:1px solid var(--line);
border-top:2px solid var(--grey-green);
padding:11px 12px 12px;
}
.details-list {display:flex;flex-direction:column}
.details-row {
display:flex;gap:8px;
padding:4px 0;
border-bottom:1px dotted var(--line);
}
.details-row:last-child {border-bottom:0}
.details-key {
flex:0 0 68px;
font-size:12px;
color:var(--grey-green-deep);
letter-spacing:.08em;
}
.details-value {
flex:1 1 auto;
font-size:12.5px;
color:var(--ochre-dark);
}
.timeline-section {
border-top:1px solid var(--line);
padding-top:14px;
margin-top:2px;
}
.timeline-track {
position:relative;
padding:26px 0 16px;
}
.timeline-track::before {
content:"";
position:absolute;left:0;right:0;top:44px;
height:14px;
background:linear-gradient(180deg,transparent 0,var(--ochre) 30%,var(--ochre-deep) 62%,transparent 100%);
clip-path:polygon(0 58%,3% 34%,7% 66%,12% 30%,17% 62%,23% 40%,29% 70%,35% 32%,41% 60%,48% 38%,55% 68%,62% 34%,69% 62%,76% 42%,83% 68%,90% 36%,96% 60%,100% 44%,100% 100%,0 100%);
opacity:.75;
}
.timeline-list {
display:grid;
grid-template-columns:repeat(7,minmax(0,1fr));
gap:8px;
position:relative;
}
.timeline-node {
display:flex;flex-direction:column;align-items:flex-start;gap:6px;
padding-top:0;
}
.timeline-grain {
display:block;
width:20px;height:26px;
background:linear-gradient(160deg,var(--wheat-bright),var(--wheat) 45%,var(--ochre));
border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;
border:1px solid var(--ochre-deep);
position:relative;
margin-top:22px;
box-shadow:0 2px 0 rgba(95,70,48,.25);
font-size:9px;color:var(--ochre-dark);
text-align:center;line-height:26px;
letter-spacing:0;
overflow:hidden;
}
.timeline-grain::after {
content:"";
position:absolute;left:50%;top:2px;bottom:2px;
width:1px;background:rgba(95,70,48,.4);
transform:translateX(-50%);
}
.timeline-label {
font-size:11.5px;
line-height:1.5;
color:var(--soil-light);
border-top:1px solid var(--line);
padding-top:6px;
width:100%;
}
.episodes-section {
border-top:1px solid var(--line);
padding-top:14px;
}
.episodes-grid {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px 12px;
}
.episode-card {
display:flex;gap:10px;
padding:9px 10px;
background:var(--paper-deep);
border:1px solid var(--line);
border-left:3px solid var(--grey-green);
transition:background .18s,border-color .18s;
}
.episode-card:hover {
background:var(--straw-soft);
border-left-color:var(--wheat);
}
.episode-number {
writing-mode:vertical-rl;
text-orientation:upright;
flex:0 0 auto;
font-size:15px;
font-weight:600;
letter-spacing:.1em;
color:var(--ochre-deep);
padding:2px 4px;
border-right:1px solid var(--line);
display:flex;align-items:center;
}
.episode-body {flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.episode-title {font-size:14px;color:var(--ochre-dark);letter-spacing:.06em}
.episode-summary {font-size:12px;line-height:1.5;color:var(--soil-light)}
.episode-duration {
align-self:flex-start;
font-size:10.5px;
letter-spacing:.1em;
color:var(--ochre-deep);
background:rgba(217,169,76,.18);
border:1px solid rgba(217,169,76,.42);
padding:1px 6px;
border-radius:2px;
}
.comments-section {
border-top:1px solid var(--line);
padding-top:14px;
}
.comments-columns {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px 14px;
align-items:start;
}
.comment-note {
background:var(--paper-deep);
border:1px solid var(--line);
border-bottom:2px solid var(--straw);
padding:10px 11px 11px;
display:flex;flex-direction:column;gap:5px;
box-shadow:2px 3px 0 rgba(95,70,48,.12);
}
.comment-note:nth-child(1) {transform:rotate(-.5deg)}
.comment-note:nth-child(2) {transform:rotate(.6deg)}
.comment-note:nth-child(3) {transform:rotate(-.35deg)}
.comment-note:nth-child(4) {transform:rotate(.45deg)}
.comment-note:nth-child(5) {transform:rotate(-.6deg)}
.comment-note:nth-child(6) {transform:rotate(.3deg)}
.comment-nickname {
font-size:12px;
letter-spacing:.12em;
color:var(--ochre-deep);
font-weight:600;
border-bottom:1px dashed var(--line);
padding-bottom:4px;
}
.comment-text {font-size:12.5px;line-height:1.62;color:var(--soil-light)}
.rec-region {
border-top:1px solid var(--line);
padding-top:12px;
}
.rec-heading {
font-size:14px;
letter-spacing:.24em;
color:var(--ochre-deep);
writing-mode:vertical-rl;
text-orientation:upright;
float:left;
margin:2px 12px 6px 0;
padding-top:8px;
border-top:3px solid var(--wheat);
height:auto;
}
.rec-grid {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
gap:9px;
clear:none;
}
.rec-item {
display:flex;flex-direction:column;gap:5px;
padding:7px;
background:var(--paper-deep);
border:1px solid var(--line);
border-radius:2px;
color:var(--ochre-dark);
text-decoration:none;
transition:background .18s,border-color .18s,transform .18s;
}
a.rec-item:hover {
background:var(--straw-soft);
border-color:var(--ochre);
transform:translateY(-2px);
}
[data-runtime="recommendation"] img {
width:100%;
aspect-ratio:16 / 10;
height:auto;
object-fit:cover;
border:1px solid var(--line);
filter:saturate(.85);
}
.rec-name {
font-size:13px;
font-weight:600;
letter-spacing:.05em;
color:var(--ochre-dark);
}
.rec-blurb {
font-size:11.5px;
line-height:1.5;
color:var(--soil-light);
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.site-footer {
margin-top:20px;
background:linear-gradient(180deg,#3f2f20,#33261a);
border-top:3px solid var(--wheat);
color:var(--straw-soft);
}
.footer-inner {
max-width:1280px;margin:0 auto;
padding:14px 16px 18px;
display:flex;flex-direction:column;gap:10px;
}
.footer-disclaimer {
font-size:11.5px;line-height:1.6;
color:rgba(222,209,176,.72);
max-width:760px;
}
.footer-nav {display:flex;flex-wrap:wrap;gap:10px}
a[data-contract="footer-home"], a[data-contract="footer-sitemap"] {
font-size:12.5px;letter-spacing:.08em;
color:var(--straw);
border-bottom:1px solid rgba(217,169,76,.5);
padding-bottom:1px;
text-decoration:none;
}
a[data-contract="footer-home"]:hover, a[data-contract="footer-sitemap"]:hover {color:var(--wheat-bright);border-color:var(--wheat-bright)}
.friend-links {
display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;
padding-top:9px;
border-top:1px solid rgba(217,169,76,.24);
}
.friend-links-label {
font-size:11px;letter-spacing:.24em;
color:var(--wheat);
}
a.runtime-friend-link {
font-size:11.5px;
color:rgba(222,209,176,.78);
text-decoration:none;
white-space:nowrap;
}
a.runtime-friend-link:hover {
color:var(--wheat-bright);
text-decoration:underline;
}
@media (max-width:1024px){.hero-panel {
grid-template-columns:minmax(0,240px) minmax(0,1fr);
}
.overview-body {
grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
grid-template-areas:
"cast cast"
"synopsis status"
"synopsis details";
}
.timeline-list {grid-template-columns:repeat(4,minmax(0,1fr))}
.timeline-track::before {display:none}
.timeline-grain {margin-top:0}}
@media (max-width:760px){.site-header-bar {padding:7px 12px;gap:9px}
.category-nav {justify-content:flex-start}
.page-main {padding:0 12px 16px;gap:14px}
.hero-panel {
grid-template-columns:minmax(0,1fr);
grid-template-areas:
"still"
"info"
"player"
"body";
gap:10px;
}
.poster-frame {max-width:260px}
.hero-slogan {max-width:260px}
.info-strip {grid-template-columns:repeat(3,minmax(0,1fr))}
.info-cell {padding:7px 8px}
.info-value {font-size:12.5px}
.overview-body {
grid-template-columns:minmax(0,1fr);
grid-template-areas:
"cast"
"synopsis"
"status"
"details";
gap:12px;
}
.synopsis-paragraphs {grid-template-columns:minmax(0,1fr)}
.timeline-list {grid-template-columns:repeat(2,minmax(0,1fr))}
.episodes-grid {grid-template-columns:minmax(0,1fr)}
.comments-columns {grid-template-columns:minmax(0,1fr)}
.comment-note {transform:none!important}
.rec-heading {float:none;writing-mode:horizontal-tb;border-top:0;border-left:4px solid var(--wheat);padding:0 0 0 10px;margin:0 0 9px}
.rec-grid {grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.player-controls button, .player-controls select {font-size:11px;padding:3px 7px}}
@media (max-width:420px){.info-strip {grid-template-columns:minmax(0,1fr)}
.info-cell {border-right:0;border-bottom:1px dashed var(--line)}
.info-cell:last-child {border-bottom:0}
.episode-status {grid-template-columns:minmax(0,1fr)}
.status-cell {border-right:0;border-bottom:1px dashed var(--line)}
.status-cell:last-child {border-bottom:0}
.timeline-list {grid-template-columns:minmax(0,1fr)}
.rec-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.cast-avatar {width:38px;height:52px}}

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}