:root {
  --bg: #fff5e6;
  --text: #24201c;
  --panel: color-mix(in srgb, #fff5e6 84%, white 16%);
  --panel-2: color-mix(in srgb, #fff5e6 74%, #24201c 12%);
  --gold: #8b2e2e;
  --jade: #36635a;
  --rose: #cc8b2c;
  --blue: #fff5e6;
  --line: color-mix(in srgb, #24201c 22%, transparent);
  --shadow: 0 18px 42px color-mix(in srgb, #24201c 18%, transparent);
}
body {
  color-scheme: light;
  color: var(--text);
  font-family: "Trebuchet MS","Microsoft YaHei UI",Arial,sans-serif;
  background:
    linear-gradient(146deg, color-mix(in srgb, #8b2e2e 14%, transparent), transparent 28%),
    repeating-linear-gradient(0deg, color-mix(in srgb, #24201c 6%, transparent) 0 1px, transparent 1px 102px),
    var(--bg);
}
.site-header {
  background: color-mix(in srgb, var(--bg) 88%, white 12%);
  border-bottom: 2px solid var(--text);
  box-shadow: none;
}
.brand span, .main-nav a:hover, .main-nav a[aria-current="page"], .badge, .btn.primary {
  color: var(--bg);
}
.brand span {
  border-radius: 8px;
  background: var(--text);
  box-shadow: none;
}
.main-nav a {
  border-radius: 8px;
}
.search {
  border: 2px solid var(--text);
  background: transparent;
}
.search input {
  color: var(--text);
}
.search button {
  background: var(--text);
  color: var(--bg);
}
.hero-shell {
  grid-template-columns: 1.25fr .75fr;
  min-height: 660px;
  align-items: center;
}
.hero-copy h1 {
  font-size: clamp(42px, 6.4vw, 92px);
  line-height: .92;
}
.feature-poster, .movie-card, .story-item, .rank-card, .intro-band, .filter-panel, .meta-grid div, .play-info, .side-panel {
  border: 2px solid color-mix(in srgb, var(--text) 52%, transparent);
  border-radius: 8px;
  box-shadow: none;
}
.feature-poster {
  transform: rotate(1deg);
}
.feature-poster img, .feature-poster {
  min-height: 540px;
}
.mini-card {
  border: 2px solid color-mix(in srgb, var(--text) 38%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg) 74%, white 26%);
}
.entry-ribbon a, .category-wall a {
  border: 2px solid var(--text);
  background: color-mix(in srgb, var(--bg) 82%, var(--gold) 18%);
}
.intro-band {
  border-left: 12px solid var(--gold);
  background: color-mix(in srgb, var(--bg) 76%, var(--jade) 24%);
}
.rail-grid, .library-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.poster {
  aspect-ratio: 2 / 3;
}
.movie-card {
  background: color-mix(in srgb, var(--bg) 76%, white 24%);
}
.movie-card:hover {
  transform: translateY(-8px) rotate(1deg);
  border-color: var(--gold);
}
.split-area {
  grid-template-columns: minmax(0, 1fr) 390px;
}

.rank-card {
  background: color-mix(in srgb, var(--bg) 72%, var(--rose) 28%);
}
.site-footer {
  background: var(--text);
  color: var(--bg);
}
.site-footer p, .site-footer a {
  color: color-mix(in srgb, var(--bg) 72%, white 28%);
}
@media (max-width:1120px) {
  .rail-grid, .library-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width:720px) {
  .rail-grid, .library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}