/* 黄果AI短剧：电影感黑金暖红主题 */
:root {
  --ink: #111214;
  --paper: #f3efe5;
  --wine: #a72d25;
  --rose: #dc6241;
  --gold: #d4a64f;
  --muted: #716d64;
  --line: rgba(31, 29, 25, .14);
  --cream: #e9dfcf;
}

body { background: #f3efe5; color: #171615; }

.header {
  color: #f4ead9;
  background: rgba(15, 16, 17, .96);
  border-bottom-color: rgba(212, 166, 79, .24);
}
.header .brand b { color: #f4ead9; }
.header .brand small { color: #d4a64f; }
.header .logo {
  color: #f0c66d;
  border-color: #d4a64f;
  box-shadow: inset 0 0 0 8px #101112, inset 0 0 0 9px #a72d25;
}
.header nav a { color: #cfc6b7; }
.header nav a:hover,
.header nav a.active { color: #f2c66d; border-color: #d4a64f; }
.header .menu { color: #f3e9d8; }

.hero {
  color: #f5ecdc;
  background:
    radial-gradient(circle at 75% 28%, rgba(202, 59, 40, .25), transparent 28%),
    radial-gradient(circle at 18% 18%, rgba(212, 166, 79, .12), transparent 33%),
    linear-gradient(128deg, #0c0e10 0%, #191716 52%, #311510 100%);
}
.hero .eyebrow { color: #e8bc63; }
.hero h1 { color: #f8f0df; }
.hero h1 em { color: #e6ad48; }
.hero .lead { color: #d1c7b6; }
.hero .note { color: #a99f90; }
.hero .pills span {
  color: #e6c77f;
  border-color: rgba(230, 199, 127, .32);
  background: rgba(255, 255, 255, .025);
}
.hero .button { color: #fff6e7; background: #c13b2b; }
.hero .button:hover { color: #151515; background: #d4a64f; }
.hero-art {
  background: linear-gradient(180deg, #11191f 0%, #34231c 48%, #a83827 100%);
  box-shadow: 0 30px 85px rgba(0, 0, 0, .42);
}
.hero-photo {
  background-image: linear-gradient(90deg, rgba(10, 12, 13, .08), rgba(10, 12, 13, 0)), url("images/hero.webp");
  background-size: cover;
  background-position: center;
}
.moon {
  background: radial-gradient(circle at 34% 34%, #fff4c7, #e1ad55 56%, #bd3c29);
  box-shadow: 0 0 90px rgba(222, 149, 52, .36);
}
.float-card { color: #171411; background: rgba(246, 237, 217, .93); }
.float-card i { color: #b52f23; }

.heading h2,
.genre-head h3,
.about-band h2,
.statement h2,
.page-hero h1 { color: #211c17; }
.eyebrow,
.genre-head small { color: #a72d25; }
.pills span { color: #982a23; border-color: rgba(167, 45, 37, .28); }

.p1 { background: radial-gradient(circle at 67% 25%, #dfac69, transparent 30%), linear-gradient(150deg, #6f201b, #13191c); }
.p2 { background: linear-gradient(120deg, transparent 45%, rgba(234, 181, 82, .45) 46% 52%, transparent 53%), linear-gradient(#0e2830, #762a20); }
.p3 { background: radial-gradient(circle at 50% 26%, #f0c778 0 13%, transparent 14%), linear-gradient(#8a2d20, #191c1c); }
.p4 { background: linear-gradient(90deg, #101b20 48%, #c84930 49%); }
.p5 { background: linear-gradient(165deg, #dba353 0 30%, #73271f 31% 54%, #11191d 55%); }
.p6 { background: radial-gradient(circle at 50% 48%, transparent 0 20%, #e1b45d 21% 23%, transparent 24%), linear-gradient(#172329, #a63325); }
.p7 { background: linear-gradient(140deg, #0d181e 50%, #a72d25 51%); }
.p8 { background: radial-gradient(ellipse at 50% 40%, #dfb46d 0 9%, #161717 10% 20%, #8c281f 21%); }
.p9 { background: linear-gradient(90deg, #171a1a, #b03a29 49%, #111616 50%); }
.p10 { background: repeating-radial-gradient(circle at 50% 46%, transparent 0 24px, rgba(225, 163, 70, .25) 25px 27px), #101b21; }
.p11 { background: linear-gradient(135deg, #0c2a32, #71402a 45%, #d46b35); }
.p12 { background: radial-gradient(circle at 50% 32%, #efc374 0 9%, transparent 10%), linear-gradient(160deg, #9d3827 45%, #10252d 46%); }
.p13 { background: linear-gradient(90deg, #101d22 47%, #d9a84c 48% 51%, #6e251f 52%); }
.p14 { background: repeating-linear-gradient(130deg, transparent 0 22px, rgba(255, 220, 152, .08) 23px 24px), linear-gradient(#0e3037, #a72d25); }

.feature { background: #101314; }
.feature-art {
  background: radial-gradient(circle, rgba(201, 67, 40, .48), transparent 26%), linear-gradient(130deg, #0b1519, #54251d);
}
.feature-photo {
  background-image: url("images/brand-banner.webp");
  background-size: cover;
  background-position: center;
}
.feature-art > small { color: #e7bd67; }
.feature-copy .eyebrow { color: #e2b55e; }
.feature .pills span { color: #edc875; border-color: rgba(237, 200, 117, .28); }
.about-band { background: linear-gradient(135deg, #e9dfcf, #f3ecdf); }
.emblem {
  color: #a72d25;
  background: radial-gradient(circle, #f6ecd8 30%, #ddbf82);
  border-color: rgba(167, 45, 37, .35);
}
.page-hero {
  background: radial-gradient(circle at 70% 20%, rgba(212, 166, 79, .25), transparent 32%), linear-gradient(135deg, #eee4d2, #f8f3e9);
}
footer { background: #0d1011; }
footer .logo {
  color: #efc76f;
  border-color: #d4a64f;
  box-shadow: inset 0 0 0 8px #0d1011, inset 0 0 0 9px #a72d25;
}
footer .brand small { color: #d4a64f; }

.section-nav {
  position: sticky;
  top: 86px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: -24px 0 56px;
  padding: 12px 14px;
  color: #ded4c4;
  background: rgba(17, 18, 20, .95);
  border: 1px solid rgba(212, 166, 79, .22);
  backdrop-filter: blur(12px);
}
.section-nav span {
  padding: 7px 12px;
  color: #e7bd67;
  font-size: 12px;
  font-weight: 700;
}
.section-nav a {
  padding: 7px 14px;
  color: #d2c8b8;
  font-size: 13px;
  border: 1px solid transparent;
}
.section-nav a:hover {
  color: #f4ca72;
  border-color: rgba(212, 166, 79, .3);
  background: rgba(212, 166, 79, .08);
}
.section-nav .all-link { margin-left: auto; color: #e7bd67; }
.genre-head a { color: #a72d25; font-weight: 700; }

.real-poster {
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0d1011;
}
.real-poster::before,
.real-poster::after { display: none; }
.real-poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 1100px) {
  .header nav {
    background: #121516;
    border-bottom: 1px solid rgba(212, 166, 79, .25);
  }
}
@media (max-width: 760px) {
  .section-nav {
    top: 72px;
    overflow-x: auto;
    margin-top: -18px;
    padding: 10px;
    white-space: nowrap;
    scrollbar-width: none;
  }
  .section-nav::-webkit-scrollbar { display: none; }
  .section-nav span { display: none; }
  .section-nav .all-link { margin-left: 0; }
}