/* xishun-beilei.cn — 1991 年影坛索引：暗底 + 琥珀灯光 + 片孔条 */
:root{
  --void:#100e14;
  --panel:#191620;
  --panel-2:#221e2b;
  --edge:#312b3d;
  --text:#ece7e0;
  --dim:#9d93a8;
  --lamp:#e9a93f;
  --lamp-dim:#8a6522;
  --flare:#d8533f;
  --cool:#6fb4c6;
  --mono:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--void);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB",sans-serif;
  font-size:16px;line-height:1.75;
}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}

/* ── 片孔条（纯 CSS 齿孔） ─────────────────────────── */
.perf{
  height:16px;
  background:
    repeating-linear-gradient(90deg,transparent 0 14px,var(--panel-2) 14px 26px);
  border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);
}

/* ── 头部 ───────────────────────────────────────── */
.top{padding:46px 0 30px;background:radial-gradient(120% 130% at 12% 0%,#241d2e 0%,var(--void) 62%)}
.badge{
  display:inline-block;font-family:var(--mono);font-size:11.5px;letter-spacing:.24em;
  color:var(--lamp);border:1px solid var(--lamp-dim);border-radius:2px;padding:4px 11px;margin-bottom:18px;
}
h1{
  margin:0;font-weight:800;line-height:1.16;letter-spacing:-.01em;
  font-size:clamp(28px,7vw,54px);
}
h1 .kicker{
  display:block;margin-top:12px;font-size:clamp(14px,3.4vw,20px);font-weight:400;
  color:var(--lamp);letter-spacing:.04em;
}
.blurb{margin:20px 0 0;color:var(--dim);font-size:15.5px;max-width:60ch}

.disclose{
  margin:24px 0 0;padding:16px 18px;border:1px dashed var(--edge);border-radius:7px;
  background:rgba(233,169,63,.05);font-size:14.5px;color:#cfc4b4;
}
.disclose b{color:var(--lamp)}

/* ── 主体双栏 ───────────────────────────────────── */
.stage{display:grid;gap:30px;grid-template-columns:260px minmax(0,1fr);padding:34px 0 10px}
@media (max-width:860px){ .stage{grid-template-columns:1fr} }

.rail{align-self:start}
@media (min-width:861px){ .rail{position:sticky;top:18px} }
.rail h2{
  margin:0 0 12px;font-size:12.5px;font-family:var(--mono);letter-spacing:.2em;color:var(--dim);
  font-weight:400;text-transform:uppercase;
}
.rail .grp{margin-bottom:24px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  font:inherit;font-size:13.5px;cursor:pointer;
  background:var(--panel);color:var(--text);border:1px solid var(--edge);
  border-radius:999px;padding:6px 13px;line-height:1.4;
}
.chip:hover{border-color:var(--lamp-dim)}
.chip[aria-pressed=true]{background:var(--lamp);color:#1a1206;border-color:var(--lamp);font-weight:700}
.chip:focus-visible{outline:2px solid var(--cool);outline-offset:2px}

.seek input,.seek select{
  font:inherit;font-size:14.5px;width:100%;padding:9px 11px;border-radius:6px;
  background:var(--panel);color:var(--text);border:1px solid var(--edge);
}
.seek input::placeholder{color:#6f6579}
.seek input:focus,.seek select:focus{outline:2px solid var(--lamp);outline-offset:1px}
.seek label{display:block;font-size:12px;color:var(--dim);margin:0 0 6px;letter-spacing:.06em}

.tally{
  font-family:var(--mono);font-size:12.5px;color:var(--dim);
  border-top:1px solid var(--edge);padding-top:14px;margin-top:6px;
}
.tally b{color:var(--lamp);font-size:17px}

/* ── 作品条目 ───────────────────────────────────── */
.reel{list-style:none;margin:0;padding:0;counter-reset:f}
.entry{
  display:grid;gap:4px 18px;grid-template-columns:52px minmax(0,1fr);
  border-top:1px solid var(--edge);padding:18px 0;
}
.entry:last-child{border-bottom:1px solid var(--edge)}
.entry .slot{
  font-family:var(--mono);font-size:12px;color:var(--lamp-dim);padding-top:5px;
  border-right:1px solid var(--edge);
}
.entry .cn{margin:0;font-size:18.5px;font-weight:700;line-height:1.35}
.entry .orig{margin:2px 0 0;font-family:var(--mono);font-size:12.5px;color:var(--cool);word-break:break-word}
.meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin:9px 0 0;padding:0;list-style:none;font-size:13.5px;color:var(--dim)}
.meta li b{color:var(--text);font-weight:600;margin-right:7px}
.note{
  margin:9px 0 0;font-size:13.5px;color:#c8bca9;border-left:2px solid var(--lamp-dim);padding-left:11px;
}
.empty{padding:40px 0;color:var(--dim);font-size:15px}

/* ── 普通区块 ───────────────────────────────────── */
section.block{padding:40px 0;border-top:1px solid var(--edge)}
section.block h2{margin:0 0 10px;font-size:clamp(20px,4.6vw,28px);font-weight:700}
section.block p{margin:0 0 14px;max-width:72ch;color:#ded7cf}
section.block p.sub{color:var(--dim);font-size:15px}
.sources{margin:0;padding:0;list-style:none}
.sources li{
  padding:11px 0;border-bottom:1px dotted var(--edge);font-size:14.5px;color:#ded7cf;
}
.sources li:last-child{border-bottom:0}
.sources b{color:var(--lamp)}

footer{padding:28px 0 46px;border-top:1px solid var(--edge);color:var(--dim);font-size:13.5px}
footer a{color:var(--lamp)}

/* ── 404 ────────────────────────────────────────── */
.lost{padding:64px 0 86px;max-width:640px}
.lost .sig{font-family:var(--mono);font-size:12.5px;letter-spacing:.22em;color:var(--flare)}
.lost p{color:var(--dim)}
.lost a.home{
  display:inline-block;margin-top:16px;padding:11px 22px;border-radius:6px;
  background:var(--lamp);color:#1a1206;text-decoration:none;font-weight:700;font-size:15px;
}

@media (max-width:520px){
  .wrap{padding:0 16px}
  body{font-size:15.5px}
  .entry{grid-template-columns:38px minmax(0,1fr);gap:4px 12px}
  .entry .cn{font-size:17px}
}