/* 电影天堂在线观看 — 《天堂电影院》档案与意大利影史年表 */
:root{
  --paper:#f7f2e6;
  --paper2:#fffdf6;
  --ink:#201d19;
  --ink-soft:#4a443b;
  --muted:#796f5f;
  --rule:#ded2b9;
  --rule2:#efe7d6;
  --ox:#8c1c2b;
  --ox-soft:#f6e5e3;
  --gold:#a9792a;
  --booth:#1d1b18;
  --booth2:#272320;
  --serif:Georgia,"Iowan Old Style","Times New Roman","Songti SC","Noto Serif CJK SC",serif;
  --sans:system-ui,-apple-system,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.8;
}
.wrap{width:100%;max-width:980px;margin:0 auto;padding:0 18px}
a{color:var(--ox)}
img,svg{max-width:100%}

/* 齿孔条 */
.perf-band{
  height:17px;background:var(--booth);
  background-image:repeating-linear-gradient(90deg,transparent 0 11px,var(--paper) 11px 20px);
  background-size:auto 100%;
}
.perf-band.dark{background-color:#0f0e0d;background-image:repeating-linear-gradient(90deg,transparent 0 11px,#b9ae97 11px 20px)}

/* 报头 */
.masthead{background:var(--paper2);border-bottom:1px solid var(--rule)}
.mast-in{display:flex;align-items:center;gap:11px;flex-wrap:wrap;padding-top:13px;padding-bottom:13px}
.logo{flex:none}
.mast-name{
  margin:0;margin-right:auto;font-family:var(--serif);font-size:1.06rem;
  letter-spacing:.06em;color:var(--ox);font-weight:700;
}
.mast-nav{display:flex;gap:14px;flex-wrap:wrap}
.mast-nav a{font-size:.84rem;color:var(--muted);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px}
.mast-nav a:hover,.mast-nav a:focus{color:var(--ox);border-bottom-color:var(--ox)}

/* 开篇 */
.opening{padding:38px 0 30px;background:linear-gradient(180deg,var(--paper2),var(--paper))}
h1{margin:0 0 16px;font-family:var(--serif);font-weight:700;line-height:1.22}
.kw{
  display:block;white-space:nowrap;color:var(--ox);
  font-size:clamp(1.55rem,5.4vw,2.6rem);letter-spacing:.01em;
}
.h1-sub{
  display:block;margin-top:7px;font-family:var(--sans);font-weight:600;color:var(--ink-soft);
  font-size:clamp(.9rem,2.5vw,1.14rem);line-height:1.5;
}
.lede{margin:0 0 18px;font-size:1.04rem;max-width:64ch;color:var(--ink-soft)}
.disclosure{
  margin:0;padding:14px 17px;background:var(--ox-soft);
  border:1px solid #e8c9c6;border-radius:3px;
}
.disclosure-h{
  margin:0 0 5px;font-family:var(--sans);font-size:.8rem;letter-spacing:.14em;
  color:var(--ox);text-transform:none;border:0;padding:0;
}
.disclosure p{margin:0;font-size:.91rem;color:#53322f}
.disclosure strong{color:var(--ox)}

/* 章节 */
.chapter{padding:36px 0;border-top:1px solid var(--rule)}
.chap-no{
  margin:0 0 2px;font-family:var(--serif);font-size:.82rem;letter-spacing:.3em;
  color:var(--gold);text-transform:uppercase;
}
.chapter h2{
  margin:0 0 9px;font-family:var(--serif);font-weight:700;
  font-size:clamp(1.3rem,4vw,1.85rem);line-height:1.3;
}
.chapter h3{margin:26px 0 7px;font-family:var(--serif);font-size:1.08rem;color:var(--ox)}
.chap-lede{margin:0 0 20px;color:var(--muted);font-size:.93rem;max-width:68ch}
.plain{margin:6px 0 0;padding-left:1.15em;font-size:.92rem;color:var(--ink-soft)}
.plain li{margin-bottom:5px}

/* 档案表 */
.dossier{
  width:100%;border-collapse:collapse;margin:0 0 22px;
  background:var(--paper2);border:1px solid var(--rule);
}
.dossier caption{
  text-align:left;font-family:var(--serif);font-size:.95rem;font-weight:700;
  color:var(--ox);padding:9px 12px 7px;border-bottom:2px solid var(--ox);
  background:var(--paper2);
}
.dossier th,.dossier td{
  border-top:1px solid var(--rule2);padding:9px 12px;
  text-align:left;vertical-align:top;font-size:.91rem;
}
.dossier th{
  width:30%;min-width:96px;font-weight:650;color:var(--ox);
  font-family:var(--serif);background:#fbf7ec;
}
.dossier td{color:var(--ink-soft)}

/* 放映室面板 */
.booth .panel{
  background:var(--booth);color:#efe6d4;border-radius:5px;padding:18px;
  box-shadow:inset 0 0 0 1px #3a3530;
}
.knobs{display:grid;gap:12px;grid-template-columns:1fr}
.knob{display:flex;flex-direction:column;gap:5px;min-width:0}
.knob label{font-size:.73rem;letter-spacing:.14em;color:#b5a88c}
.knob select,.knob input{
  width:100%;min-width:0;font:inherit;font-size:.93rem;
  padding:8px 10px;border:1px solid #4a443c;border-radius:3px;
  background:var(--booth2);color:#f3ecdc;
}
.knob input{font-family:var(--mono)}
.knob select:focus,.knob input:focus{outline:2px solid var(--gold);outline-offset:1px}

.dials{margin:17px 0 0;display:grid;gap:0;grid-template-columns:1fr;border-top:1px solid #3a3530}
.dials>div{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:9px 0;border-bottom:1px solid #322e29;
}
.dials dt{color:#b5a88c;font-size:.84rem;flex:none}
.dials dd{
  margin:0;text-align:right;font-family:var(--mono);color:#f8d99a;
  font-size:1rem;word-break:break-word;
}
.dials .wide dd{font-size:.92rem;color:#efe6d4}

.strip-cap{margin:15px 0 7px;font-size:.84rem;color:#b5a88c}
.strip{
  list-style:none;margin:0;padding:0;
  display:grid;gap:5px;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));
}
.strip li{
  background:var(--booth2);border:1px solid #4a443c;border-radius:3px;
  padding:7px 8px;font-size:.75rem;line-height:1.45;
}
.strip li.part{border-color:var(--gold);background:#332b1e}
.strip .rn{display:block;font-family:var(--mono);color:#f8d99a;font-size:.82rem}
.strip .rf{display:block;color:#b5a88c}

/* 年表 */
.range{display:flex;align-items:flex-end;gap:11px;flex-wrap:wrap;margin-bottom:11px}
.range-f{display:flex;flex-direction:column;gap:4px}
.range-f label{font-size:.73rem;letter-spacing:.12em;color:var(--muted)}
.range-f input{
  width:108px;font:inherit;font-family:var(--mono);font-size:.93rem;
  padding:7px 9px;border:1px solid var(--rule);border-radius:3px;background:var(--paper2);color:var(--ink);
}
.range-f input:focus{outline:2px solid var(--ox);outline-offset:1px}
.dash{color:var(--muted);padding-bottom:9px}
.tl-count{font-family:var(--mono);font-size:.84rem;color:var(--muted);padding-bottom:9px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:17px}
.tl-chip{
  font:inherit;font-size:.82rem;cursor:pointer;padding:4px 13px;
  border:1px solid var(--rule);border-radius:2px;background:var(--paper2);color:var(--muted);
}
.tl-chip.is-on{background:var(--ox);border-color:var(--ox);color:#fff8f0}

.chrono{list-style:none;margin:0;padding:0 0 0 26px;position:relative}
.chrono::before{content:"";position:absolute;left:5px;top:5px;bottom:5px;width:2px;background:var(--rule)}
.chrono li{position:relative;padding:0 0 19px}
.chrono li::before{
  content:"";position:absolute;left:-26px;top:9px;width:12px;height:12px;
  border-radius:50%;background:var(--paper);border:2px solid var(--ox);
}
.chrono .yr{
  font-family:var(--mono);font-size:1rem;color:var(--ox);font-weight:700;
  margin-right:9px;
}
.chrono .cat{
  font-size:.7rem;letter-spacing:.08em;color:var(--gold);
  border:1px solid #e3cfa6;background:#fbf4e4;border-radius:2px;padding:1px 6px;
}
.chrono h3{margin:1px 0 2px;font-family:var(--serif);font-size:1.02rem;color:var(--ink)}
.chrono p{margin:0;font-size:.9rem;color:var(--ink-soft)}
.chrono .none{color:var(--muted);font-size:.92rem}

/* 术语 */
.term{
  background:var(--paper2);border:1px solid var(--rule);border-left:4px solid var(--gold);
  border-radius:0 3px 3px 0;margin-bottom:8px;
}
.term summary{
  cursor:pointer;padding:10px 14px;font-family:var(--serif);
  font-size:1rem;font-weight:700;color:var(--ink);
}
.term summary::marker{color:var(--ox)}
.term p{margin:0;padding:0 14px 13px;font-size:.9rem;color:var(--ink-soft)}

.sources p{font-size:.91rem;color:var(--ink-soft);max-width:72ch}

/* 页脚 */
.colophon{background:#171513;color:#bdb29b;margin-top:8px}
.colophon .wrap{padding-top:22px;padding-bottom:26px}
.colophon p{margin:0 0 8px;font-size:.88rem}
.col-name{font-family:var(--serif);color:#f0e6d2;font-size:1.02rem;letter-spacing:.06em}
.colophon a{color:#e2b08a}
.small{font-size:.83rem}

@media (min-width:640px){
  .knobs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dials{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22px}
  .dials .wide{grid-column:span 2}
}
@media (min-width:900px){
  .knobs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dials{grid-template-columns:repeat(4,minmax(0,1fr))}
  .dials .wide{grid-column:span 2}
  .dossier th{width:22%}
}