/* 《底片》 · 构成主义：放映红、墨黑、旧纸。版式：12 栏网格，标题与色块沿对角线打破网格；阅读页克制。 */
:root {
  --red: #d8261c;
  --red-deep: #a3170f;
  --ink: #141210;
  --paper: #ebe5d6;
  --paper-2: #e0d8c4;
  --gray: #77716a;
  --line: rgba(20, 18, 16, .2);
  --night: #0e0d0c;
  --night-2: #1b1917;
  --night-line: rgba(235, 229, 214, .16);
  --f-display: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --f-body: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --f-num: "Big Shoulders Display", "Oswald", "Arial Narrow", sans-serif;
  --nav-h: 64px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  min-width: 1100px;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 900; text-wrap: balance; margin: 0; line-height: 1.15; }
.num { font-family: var(--f-num); font-weight: 800; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.wrap { width: min(1280px, calc(100% - 96px)); margin: 0 auto; }

/* ---------- 导航 ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; height: var(--nav-h); z-index: 50;
  background: var(--paper); border-bottom: 3px solid var(--ink);
  display: flex; align-items: stretch;
}
.nav .logo {
  display: flex; align-items: center; gap: 12px; padding: 0 28px 0 22px;
  background: var(--ink); color: var(--paper); text-decoration: none;
  clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 0 100%);
}
.nav .logo b { font-family: var(--f-display); font-weight: 900; font-size: 26px; letter-spacing: .12em; }
.nav .logo i { width: 18px; height: 18px; border-radius: 50%; background: var(--red); display: block; }
.nav .logo small { font-family: var(--f-num); font-size: 12px; letter-spacing: .25em; opacity: .7; }
.nav ul { list-style: none; display: flex; margin: 0 0 0 18px; padding: 0; align-items: stretch; }
.nav li a {
  display: flex; align-items: center; height: 100%; padding: 0 16px; text-decoration: none;
  font-family: var(--f-display); font-weight: 700; font-size: 15px; position: relative;
}
.nav li a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 10px; height: 4px; background: var(--red);
  transform: scaleX(0) skewX(-30deg); transform-origin: left; transition: transform .25s var(--ease);
}
.nav li a:hover::after, .nav li a[aria-current="page"]::after { transform: scaleX(1) skewX(-30deg); }
.nav .spacer { flex: 1; }
.nav .mode { align-self: center; font-size: 12px; color: var(--gray); margin-right: 14px; font-family: var(--f-display); }
.nav .admin-link { align-self: center; margin-right: 12px; font-family: var(--f-display); font-weight: 700; font-size: 14px; text-decoration: none; padding: 6px 12px; border: 2px solid var(--ink); }
.nav .admin-link .badge { background: var(--red); color: #fff; font-family: var(--f-num); padding: 0 6px; margin-left: 6px; }
.btn-seat {
  align-self: stretch; display: flex; align-items: center; gap: 10px;
  background: var(--red); color: #fff; border: 0; padding: 0 28px 0 40px; font-family: var(--f-display); font-weight: 900; font-size: 16px;
  clip-path: polygon(22px 0, 100% 0, 100% 100%, 0 100%); transition: background .2s;
}
.btn-seat:hover { background: var(--red-deep); }

main { padding-top: var(--nav-h); min-height: 100vh; }

/* ---------- 通用按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; border: 2px solid var(--ink); background: transparent;
  padding: 10px 20px; font-family: var(--f-display); font-weight: 700; font-size: 15px; text-decoration: none;
  transition: transform .2s var(--ease), background .2s, color .2s;
}
.btn:hover { transform: translate(3px, -3px); box-shadow: -3px 3px 0 var(--ink); }
.btn.red { background: var(--red); color: #fff; border-color: var(--red); }
.btn.red:hover { box-shadow: -3px 3px 0 var(--ink); }
.btn.ink { background: var(--ink); color: var(--paper); }
.btn.small { padding: 6px 12px; font-size: 13px; }
.btn[disabled] { opacity: .4; pointer-events: none; }
.link-arrow { font-family: var(--f-display); font-weight: 700; text-decoration: none; border-bottom: 3px solid var(--red); }

/* ---------- 首页海报 ---------- */
.hero { position: relative; background: var(--paper); border-bottom: 3px solid var(--ink); overflow: hidden; }
.hero .art { width: 100%; height: max(600px, 37.5vw); }
.hero .art svg { width: 100%; height: 100%; }
.hero .copy {
  position: absolute; left: max(48px, calc((100% - 1280px) / 2)); top: 44px; width: 520px;
}
.hero .kicker { display: inline-flex; gap: 10px; align-items: center; background: var(--ink); color: var(--paper); padding: 4px 14px; font-family: var(--f-display); font-weight: 700; font-size: 14px; }
.hero .kicker .num { color: var(--red); font-size: 18px; }
.hero h1 { font-size: 84px; margin: 16px 0 6px; letter-spacing: .02em; }
.hero h1 > span { display: block; }
/* 标题右侧的旁注：跟着标题走，不再画在海报里，窄屏也不会压到字上 */
.hero .ht { position: relative; width: fit-content; }
.hero-note { position: absolute; left: calc(100% + 52px); top: -18px; bottom: -14px; display: flex; gap: 8px; pointer-events: none; }
.hero-note .k { width: 14px; background: var(--ink); }
.hero-note .r { width: 6px; background: var(--red); }
.hero-note div { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 4px 0 0 6px; }
.hero-note b, .hero-note span { background: var(--paper); padding: 0 8px 0 4px; white-space: nowrap; }
.hero-note b { font-family: var(--f-display); font-weight: 900; font-size: 22px; line-height: 1.3; color: var(--ink); margin-bottom: 4px; }
.hero-note span { font-family: var(--f-num); font-weight: 900; font-size: 19px; line-height: 1.45; letter-spacing: 4px; color: var(--gray); }
.hero .art [data-layer="note"] { display: none; }
.hero .copy .btn:not(.ink) { background: var(--paper); }
/* 窄一些的窗口：海报靠右对齐，保证红日、帽子和“1964”完整；标题字号相应收一点 */
@media (max-width: 1459px) {
  .hero .art { position: relative; overflow: hidden; }
  .hero .art svg { position: absolute; top: 0; left: calc(100% - 1530px); width: 1600px; max-width: none; height: 600px; }
  .hero h1 { font-size: 74px; }
}
@media (max-width: 1199px) {
  .hero h1 { font-size: 64px; }
  .hero-note { left: calc(100% + 36px); }
}
.hero .sub { font-family: var(--f-display); font-weight: 700; font-size: 24px; margin-bottom: 18px; }
.hero .lead { font-size: 16px; line-height: 1.85; background: rgba(235, 229, 214, .92); padding: 14px 18px; border-left: 6px solid var(--red); margin-bottom: 20px; }

/* ---------- 区块标题 ---------- */
.section { padding: 64px 0; }
.section-head { display: flex; align-items: flex-end; gap: 18px; margin-bottom: 26px; }
.section-head .idx { font-family: var(--f-num); font-weight: 900; font-size: 56px; line-height: .8; color: var(--red); }
.section-head h2 { font-size: 30px; }
.section-head p { margin: 0 0 2px; color: var(--gray); font-size: 15px; }
.section-head .rule { flex: 1; height: 3px; background: var(--ink); margin-bottom: 10px; transform: skewX(-40deg); }

/* ---------- 年代时间轴（胶片） ---------- */
.timeline { position: relative; user-select: none; }
.strip {
  position: relative; height: 128px; background: var(--ink); border-radius: 2px;
}
.strip .holes { position: absolute; left: 0; right: 0; height: 14px; display: flex; gap: 12px; padding: 0 8px; overflow: hidden; }
.strip .holes.top { top: 8px; }
.strip .holes.bot { bottom: 8px; }
.strip .holes span { flex: 0 0 18px; height: 12px; border-radius: 2px; background: var(--paper); opacity: .9; }
.strip .frames { position: absolute; left: 0; right: 0; top: 30px; bottom: 30px; display: flex; }
.strip .frames div { flex: 1; border-right: 2px solid #2c2925; position: relative; }
.strip .frames div:last-child { border-right: 0; }
.strip .frames div span { position: absolute; left: 8px; bottom: 4px; font-family: var(--f-num); font-weight: 700; font-size: 13px; color: #6b655c; }
.tl-mark {
  position: absolute; top: 34px; height: 60px; min-width: 64px; transform: translateX(-50%);
  background: var(--paper); color: var(--ink); border: 0; padding: 0 12px; display: flex; flex-direction: column; justify-content: center; align-items: center;
  font-family: var(--f-num); font-weight: 900; font-size: 22px; line-height: 1; transition: transform .25s var(--ease), background .2s;
  box-shadow: 0 0 0 3px var(--ink);
}
.tl-mark small { font-size: 12px; font-weight: 700; color: var(--red); margin-top: 4px; letter-spacing: .08em; }
.tl-mark.range { transform: none; }
.tl-mark:hover, .tl-mark.hot { background: var(--red); color: #fff; transform: translateX(-50%) scale(1.18); z-index: 3; }
.tl-mark:hover small, .tl-mark.hot small { color: #fff; }
.tl-mark.range:hover, .tl-mark.range.hot { transform: scaleY(1.12); }
.tl-scale { position: relative; height: 30px; margin-top: 8px; }
.tl-scale span { position: absolute; transform: translateX(-50%); font-family: var(--f-num); font-weight: 700; font-size: 14px; color: var(--gray); }
.tl-scale span.major { color: var(--ink); }
.tl-hint { font-size: 14px; color: var(--gray); margin-top: 8px; }
.tl-preview {
  position: absolute; z-index: 10; width: 320px; background: var(--paper); border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--red);
  pointer-events: none; opacity: 0; transform: translateY(8px); transition: opacity .18s, transform .18s var(--ease);
}
.tl-preview.on { opacity: 1; transform: none; }
.tl-preview .pv-art { height: 140px; border-bottom: 3px solid var(--ink); overflow: hidden; }
.tl-preview .pv-art svg { width: 100%; height: 100%; }
.tl-preview .pv-body { padding: 12px 16px 14px; }
.tl-preview .pv-no { font-family: var(--f-num); font-weight: 900; color: var(--red); font-size: 20px; }
.tl-preview h4 { font-family: var(--f-display); font-weight: 900; font-size: 22px; margin: 2px 0 4px; }
.tl-preview p { margin: 0; font-size: 14px; line-height: 1.6; color: #3a3631; }

/* ---------- 放映排片表 ---------- */
.schedule { border-top: 3px solid var(--ink); }
.schedule .row {
  display: grid; grid-template-columns: 120px 140px 1fr 200px 160px; align-items: center; gap: 0;
  border-bottom: 2px solid var(--ink); text-decoration: none; min-height: 72px; position: relative; transition: background .2s;
}
.schedule .row.head { min-height: 40px; font-family: var(--f-display); font-weight: 700; font-size: 13px; color: var(--gray); border-bottom-width: 1px; }
.schedule .row > * { padding: 0 18px; }
.schedule .row .no { font-family: var(--f-num); font-weight: 900; font-size: 30px; }
.schedule .row .yr { font-family: var(--f-num); font-weight: 800; font-size: 26px; color: var(--red); }
.schedule .row .tt { font-family: var(--f-display); font-weight: 900; font-size: 22px; }
.schedule .row .tt small { display: block; font-weight: 400; font-family: var(--f-body); font-size: 14px; color: var(--gray); }
.schedule .row .dt { font-family: var(--f-num); font-weight: 700; font-size: 18px; }
.schedule .row .go { justify-self: end; font-family: var(--f-display); font-weight: 700; font-size: 14px; }
.schedule a.row:hover, .schedule a.row.hot { background: var(--ink); color: var(--paper); }
.schedule a.row:hover .yr, .schedule a.row.hot .yr { color: var(--red); }
.schedule .row.ghost { color: var(--gray); }
.schedule .row.ghost .no { color: #b9b2a3; }

/* ---------- 观众席预告条 ---------- */
.hall-teaser { background: var(--night); color: var(--paper); padding: 56px 0; position: relative; overflow: hidden; }
.hall-teaser .inner { display: grid; grid-template-columns: 1fr 520px; gap: 56px; align-items: center; }
.hall-teaser h2 { font-size: 46px; }
.hall-teaser h2 em { font-style: normal; color: var(--red); }
.hall-teaser p { color: #bdb5a5; }
.mini-hall { display: grid; grid-template-columns: repeat(20, 1fr); gap: 5px; padding: 18px; border: 2px solid var(--night-line); }
.mini-hall i { aspect-ratio: 1; border: 1.5px solid #3b3733; display: block; }
.mini-hall i.on { background: var(--red); border-color: var(--red); }
.mini-hall i.aisle { margin-left: 8px; }

/* ---------- 文章卡片 ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.card { text-decoration: none; display: flex; flex-direction: column; border: 3px solid var(--ink); background: var(--paper); transition: transform .25s var(--ease), box-shadow .25s var(--ease); position: relative; }
.card:hover { transform: translate(6px, -6px); box-shadow: -6px 6px 0 var(--ink); }
.card::before { content: ""; position: absolute; top: 0; right: 0; width: 0; height: 8px; background: var(--red); transition: width .3s var(--ease); z-index: 2; }
.card:hover::before { width: 100%; }
.card .c-art { aspect-ratio: 16 / 9; border-bottom: 3px solid var(--ink); overflow: hidden; }
.card .c-art svg { width: 100%; height: 100%; }
.card .c-body { padding: 16px 20px 22px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card .c-col { font-family: var(--f-display); font-weight: 700; font-size: 13px; display: flex; gap: 8px; }
.card .c-col b { background: var(--ink); color: var(--paper); padding: 0 8px; }
.card .c-col span { color: var(--red); }
.card h3 { font-size: 23px; }
.card p { margin: 0; font-size: 15px; line-height: 1.7; color: #3e3a34; }

/* ---------- 期刊页 ---------- */
.issue-head { position: relative; border-bottom: 3px solid var(--ink); }
.issue-head .art { height: 460px; }
.issue-head .art svg { width: 100%; height: 100%; }
.issue-intro { display: grid; grid-template-columns: 300px 1fr; gap: 56px; padding: 48px 0; border-bottom: 3px solid var(--ink); }
.issue-intro .meta { font-family: var(--f-display); }
.issue-intro .meta .no { font-family: var(--f-num); font-weight: 900; font-size: 84px; line-height: .9; color: var(--red); }
.issue-intro .meta dl { margin: 18px 0 0; display: grid; grid-template-columns: 72px 1fr; gap: 6px 10px; font-size: 14px; }
.issue-intro .meta dt { color: var(--gray); }
.issue-intro .meta dd { margin: 0; font-weight: 700; }
.issue-intro h1 { font-size: 60px; }
.issue-intro .sub { font-family: var(--f-display); font-weight: 700; font-size: 22px; margin: 8px 0 18px; }
.issue-intro .lead { font-size: 18px; max-width: 46em; }
.channel-block { padding: 40px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 300px 1fr; gap: 56px; }
.channel-block .ch-name { font-family: var(--f-display); font-weight: 900; font-size: 30px; }
.channel-block .ch-en { font-family: var(--f-num); font-weight: 800; color: var(--red); letter-spacing: .2em; font-size: 14px; }
.channel-block .list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.ask-box { background: var(--red); color: #fff; padding: 36px 40px; display: flex; align-items: center; gap: 32px; margin: 48px 0; clip-path: polygon(0 0, 100% 0, calc(100% - 40px) 100%, 0 100%); }
.ask-box h3 { font-size: 30px; flex: 1; }
.ask-box .btn { border-color: #fff; color: #fff; }
.ask-box .btn:hover { box-shadow: -3px 3px 0 var(--ink); }

/* ---------- 文章页 ---------- */
.progress { position: fixed; top: var(--nav-h); left: 0; right: 0; height: 18px; background: var(--ink); z-index: 40; overflow: hidden; }
.progress .film { position: absolute; inset: 3px 0; background-image: linear-gradient(90deg, var(--paper) 0 10px, transparent 10px 22px); background-size: 22px 100%; opacity: .25; transform: translateX(0); }
.progress .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--red); }
.progress .end { position: absolute; right: 10px; top: 0; font-family: var(--f-display); font-weight: 900; font-size: 12px; color: #6b655c; line-height: 18px; transition: color .3s; }
.progress.done .end { color: #fff; }
.article-head { padding: 54px 0 46px; border-bottom: 3px solid var(--ink); }
.ah-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px); gap: 56px; align-items: center; }
.article-head .art { aspect-ratio: 16 / 9; border: 3px solid var(--ink); box-shadow: 14px 14px 0 var(--ink); overflow: hidden; background: var(--ink); }
.article-head .art svg { width: 100%; height: 100%; display: block; }
.article-title .col { font-family: var(--f-display); font-weight: 700; font-size: 14px; display: flex; gap: 10px; margin-bottom: 18px; }
.article-title .col b { background: var(--ink); color: var(--paper); padding: 1px 10px; }
.article-title .col span { color: var(--red); }
.article-title h1 { font-size: 50px; line-height: 1.18; }
.article-title .dek { font-size: 19px; margin-top: 18px; color: #3e3a34; max-width: 32em; }
.article-title aside { margin-top: 26px; padding-top: 14px; border-top: 3px solid var(--ink); font-family: var(--f-display); font-size: 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.article-title aside .num { font-family: var(--f-num); font-weight: 900; font-size: 22px; color: var(--red); text-decoration: none; }
.article-title aside span + span::before { content: "/"; color: var(--gray); margin-right: 18px; }
.article-body { display: grid; grid-template-columns: 1fr 680px 1fr; padding: 32px 0 64px; }
.article-body .text { grid-column: 2; }
.article-body p { margin: 0 0 1.25em; text-indent: 2em; }
.article-body h2 { font-size: 26px; margin: 2em 0 .8em; display: flex; gap: 12px; align-items: center; }
.article-body h2::before { content: ""; width: 22px; height: 22px; background: var(--red); flex: 0 0 auto; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.article-body blockquote {
  margin: 2em -80px 2em -40px; padding: 26px 34px 26px 40px; background: var(--ink); color: var(--paper);
  font-family: var(--f-display); font-weight: 900; font-size: 26px; line-height: 1.5; position: relative;
  clip-path: polygon(0 0, 100% 0, calc(100% - 26px) 100%, 0 100%);
}
.article-body blockquote::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; background: var(--red); }
.article-body blockquote cite { display: block; font-style: normal; font-weight: 400; font-size: 14px; color: #a9a193; margin-top: 10px; font-family: var(--f-body); }
.sources { border-top: 3px solid var(--ink); margin-top: 3em; padding-top: 16px; font-size: 14px; }
.sources h4 { font-family: var(--f-display); font-weight: 900; font-size: 15px; margin: 0 0 8px; }
.sources ol { margin: 0; padding-left: 1.4em; }
.sources a { color: var(--ink); }
.article-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 40px 0 72px; border-top: 3px solid var(--ink); }
.article-nav a { text-decoration: none; padding: 20px 24px; border: 3px solid var(--ink); display: block; transition: background .2s, color .2s; }
.article-nav a:hover { background: var(--ink); color: var(--paper); }
.article-nav small { font-family: var(--f-display); font-weight: 700; color: var(--red); }
.article-nav b { display: block; font-family: var(--f-display); font-size: 22px; }
.article-nav .next { text-align: right; }

/* 显影：图片从负片过渡到正片 */
.develop { transition: filter 1.1s ease-out; }
.develop.neg { filter: invert(1) hue-rotate(180deg); }

/* ---------- 显影地图 ---------- */
.map-page { display: grid; grid-template-columns: 1fr 380px; min-height: calc(100vh - var(--nav-h)); }
.map-wrap { position: relative; background: var(--paper); border-right: 3px solid var(--ink); padding: 28px; }
.map-wrap h1 { font-size: 40px; margin-bottom: 4px; }
.map-wrap .sub { color: var(--gray); margin: 0 0 12px; }
.map-svg { width: 100%; height: auto; }
.map-svg .sphere { fill: var(--paper-2); }
.map-svg .grat { fill: none; stroke: rgba(20, 18, 16, .12); stroke-width: .6; }
.map-svg .land { fill: var(--ink); }
.map-svg .pin { cursor: pointer; }
.map-svg .pin circle.ring { fill: none; stroke: var(--red); stroke-width: 2; opacity: .0; transition: opacity .2s, r .2s; }
.map-svg .pin circle.dot { fill: var(--red); stroke: var(--paper); stroke-width: 2.5; transition: r .2s; }
.map-svg .pin text { font-family: var(--f-display); font-weight: 700; font-size: 13px; fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 4px; }
.map-svg .pin:hover circle.ring, .map-svg .pin.on circle.ring { opacity: 1; }
.map-svg .pin.on circle.dot { fill: var(--ink); stroke: var(--red); }
.map-svg .route { fill: none; stroke: var(--red); stroke-width: 2; stroke-dasharray: 6 6; }
.map-side { background: var(--paper); padding: 28px; overflow-y: auto; }
.map-side .place-name { font-size: 32px; }
.map-side .films { margin: 18px 0; display: flex; flex-direction: column; gap: 10px; }
.map-side .film { border: 2px solid var(--ink); padding: 10px 14px; }
.map-side .film b { font-family: var(--f-display); }
.map-side .film .num { color: var(--red); margin-right: 8px; }
.map-side .film p { margin: 4px 0 0; font-size: 14px; line-height: 1.6; }
.map-side .arts a { display: block; padding: 8px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-family: var(--f-display); font-weight: 700; }
.map-side .arts a:hover { color: var(--red); }
.map-legend { display: flex; gap: 18px; font-size: 13px; color: var(--gray); margin-top: 10px; font-family: var(--f-display); }

/* ---------- 底片档案 ---------- */
.archive-tools { display: flex; gap: 14px; align-items: center; margin-bottom: 22px; flex-wrap: wrap; }
.archive-tools label { font-family: var(--f-display); font-weight: 700; font-size: 14px; }
.archive-tools label + select, .archive-tools label + input { margin-right: 14px; }
.archive-tools select, .archive-tools input, .field input, .field select, .field textarea {
  font: inherit; font-size: 15px; padding: 8px 12px; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); border-radius: 0;
}
.archive-table { width: 100%; border-collapse: collapse; }
.archive-table th { text-align: left; font-family: var(--f-display); font-size: 13px; color: var(--gray); font-weight: 700; padding: 8px 14px; border-bottom: 3px solid var(--ink); }
.archive-table td { padding: 14px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 15px; }
.archive-table td.yr { font-family: var(--f-num); font-weight: 900; font-size: 24px; color: var(--red); width: 90px; }
.archive-table td.ttl b { font-family: var(--f-display); font-size: 18px; display: block; }
.archive-table td.ttl small { color: var(--gray); }
.archive-table td .tag { display: inline-block; font-family: var(--f-display); font-size: 12px; font-weight: 700; border: 1.5px solid var(--ink); padding: 0 6px; margin: 0 4px 4px 0; }
.archive-table td a { font-family: var(--f-display); font-size: 13px; font-weight: 700; display: block; }
.archive-table tr:hover td { background: var(--paper-2); }
.decade-bar { display: flex; height: 64px; align-items: flex-end; gap: 4px; margin: 6px 0 28px; }
.decade-bar div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.decade-bar i { width: 100%; background: var(--ink); display: block; }
.decade-bar i.has { background: var(--red); }
.decade-bar span { font-family: var(--f-num); font-size: 12px; font-weight: 700; color: var(--gray); margin-top: 4px; }

/* ---------- 观众席 ---------- */
.hall-page { background: var(--night); color: var(--paper); min-height: calc(100vh - var(--nav-h)); }
.hall-top { position: relative; padding: 36px 0 0; }
.screen {
  margin: 0 auto; width: 860px; height: 170px; position: relative; color: var(--ink);
  background: var(--paper); clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px;
}
.screen::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--red); }
.screen small { font-family: var(--f-display); font-weight: 700; font-size: 13px; letter-spacing: .1em; color: var(--red); }
.screen h2 { font-size: 34px; }
.screen .btns { display: flex; gap: 12px; }
.beam { width: 860px; height: 46px; margin: 0 auto; background: linear-gradient(180deg, rgba(235, 229, 214, .16), rgba(235, 229, 214, 0)); clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%); }
.hall-controls { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; margin: 10px 0 8px; font-family: var(--f-display); font-size: 14px; }
.hall-controls select, .hall-controls input { font: inherit; font-size: 14px; background: var(--night-2); color: var(--paper); border: 1.5px solid #4a4540; padding: 6px 10px; }
.hall-controls .seg { display: inline-flex; border: 1.5px solid #4a4540; }
.hall-controls .seg button { background: transparent; border: 0; padding: 6px 12px; }
.hall-controls .seg button[aria-pressed="true"] { background: var(--red); color: #fff; }
.hall-controls .count { color: #bdb5a5; }
.hall-controls .count b { color: var(--red); font-family: var(--f-num); font-size: 20px; }
.hall-stage { position: relative; width: 1180px; margin: 0 auto; overflow: hidden; cursor: grab; border-top: 1px solid var(--night-line); }
.hall-stage.dragging { cursor: grabbing; }
.hall-stage svg { width: 100%; height: auto; transform-origin: 0 0; }
.seat-empty rect { fill: none; stroke: #4a4540; stroke-width: 1.6; }
.seat-empty:hover rect { stroke: #8a8378; }
.person { cursor: pointer; }
.person .body { fill: var(--red); }
.person .head { fill: var(--paper); }
.person .glyph { fill: var(--paper); }
.person:hover .body, .person.sel .body { fill: #ff4a3c; }
.person.dim { opacity: .14; }
.person.new .dot { fill: var(--red); }
.person.demo .body { fill: #8b5a52; }
.person.enter { animation: enter 1.1s var(--ease) both; }
@keyframes enter { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } }
.aisle-label { fill: #5d5750; font-family: var(--f-num); font-weight: 700; font-size: 12px; }
.row-label { fill: #6d665d; font-family: var(--f-num); font-weight: 700; font-size: 13px; }
.hall-foot { display: flex; justify-content: space-between; align-items: center; width: 1180px; margin: 10px auto 0; padding: 0 0 40px; font-size: 13px; color: #9c9486; font-family: var(--f-display); }
.legend { display: flex; gap: 18px; align-items: center; }
.legend i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; }
.hall-list { width: 1180px; margin: 10px auto 40px; }
.hall-list .row-group { border-top: 1px solid var(--night-line); padding: 12px 0; display: grid; grid-template-columns: 80px 1fr; gap: 12px; }
.hall-list .row-group > b { font-family: var(--f-num); font-size: 20px; color: var(--red); }
.hall-list .people { display: flex; flex-wrap: wrap; gap: 8px; }
.hall-list .people button { background: var(--night-2); border: 1.5px solid #4a4540; padding: 6px 12px; text-align: left; font-family: var(--f-display); font-size: 14px; }
.hall-list .people button:hover { border-color: var(--red); }
.hall-list .people button small { display: block; color: #9c9486; font-size: 12px; }
.hall-empty-note { text-align: center; color: #9c9486; margin: 6px 0 0; font-family: var(--f-display); }
.seat-tip { position: fixed; z-index: 60; pointer-events: none; background: var(--paper); color: var(--ink); padding: 8px 12px; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--red); font-family: var(--f-display); font-size: 13px; opacity: 0; transition: opacity .12s; max-width: 260px; }
.seat-tip.on { opacity: 1; }
.seat-tip b { display: block; font-size: 15px; }
.zoom-btns { position: absolute; right: 16px; top: 16px; display: flex; flex-direction: column; gap: 6px; }
.zoom-btns button { width: 34px; height: 34px; background: var(--night-2); color: var(--paper); border: 1.5px solid #4a4540; font-family: var(--f-num); font-size: 18px; font-weight: 800; }

/* ---------- 弹窗 / 票根 ---------- */
.modal { position: fixed; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center; background: rgba(14, 13, 12, .78); padding: 30px; }
.modal.on { display: flex; }
.modal .box { background: var(--paper); color: var(--ink); width: 860px; max-height: calc(100vh - 60px); overflow-y: auto; position: relative; animation: pop .35s var(--ease); }
@keyframes pop { from { transform: translateY(24px) rotate(-1deg); opacity: 0; } to { transform: none; opacity: 1; } }
.modal .x { position: absolute; right: 12px; top: 12px; width: 40px; height: 40px; border: 0; background: var(--ink); color: var(--paper); font-size: 22px; z-index: 2; }
.ticket { display: grid; grid-template-columns: 1fr 220px; }
.ticket .main { padding: 34px 40px 30px; border-right: 3px dashed var(--ink); position: relative; }
.ticket .stub { background: var(--red); color: #fff; padding: 34px 24px; display: flex; flex-direction: column; gap: 14px; position: relative; }
.ticket .stub .label { font-family: var(--f-display); font-weight: 700; font-size: 12px; opacity: .85; }
.ticket .stub .big { font-family: var(--f-num); font-weight: 900; font-size: 46px; line-height: 1; }
.ticket .stub .mid { font-family: var(--f-num); font-weight: 800; font-size: 24px; line-height: 1.1; }
.ticket .stub .logo { margin-top: auto; font-family: var(--f-display); font-weight: 900; font-size: 26px; letter-spacing: .15em; }
.ticket .t-kicker { font-family: var(--f-display); font-weight: 700; font-size: 13px; color: var(--red); letter-spacing: .1em; }
.ticket h3 { font-size: 34px; margin: 6px 0 2px; }
.ticket .who { font-family: var(--f-display); font-weight: 700; font-size: 16px; margin-bottom: 16px; }
.ticket .facts { display: flex; gap: 22px; font-family: var(--f-display); font-size: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.ticket .facts span { color: var(--gray); margin-right: 6px; }
.ticket .story { white-space: pre-wrap; font-size: 16px; line-height: 1.9; border-top: 2px solid var(--ink); padding-top: 16px; }
.ticket .photos { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.ticket .photos img { height: 150px; width: auto; border: 3px solid var(--ink); background: var(--paper-2); cursor: zoom-in; }
.ticket .photos img.big { height: auto; width: 100%; cursor: zoom-out; }
.ticket audio { width: 100%; margin-top: 14px; }
.ticket .demo-flag { display: inline-block; background: var(--ink); color: var(--paper); font-family: var(--f-display); font-size: 12px; padding: 1px 8px; margin-left: 8px; vertical-align: 4px; }
.ticket-actions { display: flex; gap: 10px; padding: 16px 40px 24px; border-top: 3px solid var(--ink); align-items: center; flex-wrap: wrap; }
.ticket-actions .sp { flex: 1; }
.ticket-img { width: 100%; border: 3px solid var(--ink); margin-top: 10px; }

/* ---------- 表单 ---------- */
.form { padding: 36px 44px 30px; }
.form h2 { font-size: 34px; margin-bottom: 4px; }
.form .intro { color: #3e3a34; margin: 0 0 22px; font-size: 15px; }
.form .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-family: var(--f-display); font-weight: 700; font-size: 14px; }
.field label em { color: var(--red); font-style: normal; margin-left: 2px; }
.field .hint { font-size: 13px; color: var(--gray); line-height: 1.5; }
.field textarea { min-height: 220px; resize: vertical; line-height: 1.8; }
.field .counter { align-self: flex-end; font-family: var(--f-num); font-size: 14px; color: var(--gray); }
.field .counter.bad { color: var(--red); }
.drop { border: 2px dashed var(--ink); padding: 14px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: var(--paper-2); }
.drop.over { background: #f3d9d5; border-color: var(--red); }
.drop .pick { position: relative; display: inline-flex; align-items: center; background: var(--ink); color: var(--paper); font-family: var(--f-display); font-weight: 700; font-size: 14px; padding: 8px 16px; cursor: pointer; transition: background .2s; }
.drop .pick:hover { background: var(--red); }
.drop .pick input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.drop .pick:focus-within { outline: 3px solid var(--red); outline-offset: 2px; }
.drop .drop-hint { margin: 0; }
.drop .thumbs { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; }
.drop .thumbs:empty { display: none; }
.drop .thumbs div { position: relative; }
.drop .thumbs img { height: 70px; border: 2px solid var(--ink); }
.drop .thumbs button { position: absolute; right: -8px; top: -8px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--red); color: #fff; font-size: 13px; line-height: 1; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.6; }
.check input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--red); }
.form .actions { display: flex; gap: 12px; align-items: center; margin-top: 22px; }
.form .msg { font-family: var(--f-display); font-size: 14px; }
.form .msg.err { color: var(--red); }
.notice { background: var(--ink); color: var(--paper); padding: 12px 16px; font-size: 14px; line-height: 1.7; margin-bottom: 18px; }
.notice b { color: #ff8c84; }

/* ---------- 我的投稿 / 后台 ---------- */
.page-pad { padding: 48px 0 80px; }
.page-title { display: flex; align-items: flex-end; gap: 20px; margin-bottom: 28px; border-bottom: 3px solid var(--ink); padding-bottom: 14px; }
.page-title h1 { font-size: 44px; }
.page-title p { margin: 0; color: var(--gray); }
.tabs { display: flex; gap: 0; border: 3px solid var(--ink); width: max-content; margin-bottom: 22px; }
.tabs button { background: transparent; border: 0; padding: 10px 20px; font-family: var(--f-display); font-weight: 700; font-size: 15px; border-right: 2px solid var(--ink); }
.tabs button:last-child { border-right: 0; }
.tabs button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.tabs button .n { font-family: var(--f-num); margin-left: 6px; color: var(--red); }
.mod-list { display: flex; flex-direction: column; gap: 22px; }
.mod-card { border: 3px solid var(--ink); display: grid; grid-template-columns: 1fr 340px; }
.mod-card .c { padding: 22px 26px; }
.mod-card .c h3 { font-size: 24px; margin-bottom: 4px; }
.mod-card .c .meta { font-family: var(--f-display); font-size: 13px; color: var(--gray); margin-bottom: 12px; display: flex; gap: 14px; flex-wrap: wrap; }
.mod-card .c .story { white-space: pre-wrap; font-size: 15px; line-height: 1.8; max-height: 260px; overflow-y: auto; border-top: 1px solid var(--line); padding-top: 10px; }
.mod-card .c .photos { display: flex; gap: 8px; margin-top: 10px; }
.mod-card .c .photos img { height: 90px; border: 2px solid var(--ink); }
.mod-card .side { border-left: 3px solid var(--ink); padding: 22px; background: var(--paper-2); display: flex; flex-direction: column; gap: 10px; }
.mod-card .side .field input, .mod-card .side .field select, .mod-card .side textarea { font-size: 14px; padding: 6px 8px; }
.mod-card .side textarea { min-height: 70px; font: inherit; font-size: 14px; border: 2px solid var(--ink); background: var(--paper); padding: 6px 8px; }
.mod-card .side .row-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.status { display: inline-block; font-family: var(--f-display); font-weight: 700; font-size: 12px; padding: 1px 8px; border: 2px solid currentColor; }
.status.pending { color: #8a6b00; }
.status.approved { color: #1d6b2b; }
.status.returned { color: var(--red); }
.status.rejected { color: var(--gray); }
.empty { border: 3px dashed var(--line); padding: 40px; text-align: center; color: var(--gray); font-family: var(--f-display); }
.log { font-size: 13px; font-family: var(--f-display); }
.log div { padding: 6px 0; border-bottom: 1px solid var(--line); display: flex; gap: 14px; }
.log div span { color: var(--gray); font-family: var(--f-num); }
.guide { border: 3px solid var(--ink); padding: 22px 26px; font-size: 15px; }
.guide h3 { font-size: 20px; margin-bottom: 8px; }
.guide code { background: var(--paper-2); padding: 1px 6px; font-size: 13px; }

/* ---------- 关于 ---------- */
.about { display: grid; grid-template-columns: 1fr 680px 1fr; padding: 48px 0 80px; }
.about .text { grid-column: 2; }
.about h1 { font-size: 52px; margin-bottom: 20px; }
.about h2 { font-size: 24px; margin: 1.8em 0 .6em; }
.about p { margin: 0 0 1em; }

/* ---------- 页脚 ---------- */
.foot { background: var(--ink); color: #a9a193; padding: 40px 0; font-size: 13px; line-height: 1.8; }
.foot .wrap { display: grid; grid-template-columns: 260px 1fr 1fr; gap: 40px; }
.foot b { color: var(--paper); font-family: var(--f-display); font-size: 28px; letter-spacing: .15em; display: flex; align-items: center; gap: 10px; }
.foot b i { width: 16px; height: 16px; border-radius: 50%; background: var(--red); display: block; }
.foot a { color: var(--paper); }

/* ---------- 横幅提示 ---------- */
#admin-slot { display: flex; align-items: center; }
body.has-banner .foot { padding-bottom: 72px; }
.banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--red); color: #fff; font-family: var(--f-display); font-size: 13px; padding: 6px 0; text-align: center; }
.banner a { color: #fff; }
.banner button { margin-left: 16px; background: transparent; color: #fff; border: 1.5px solid #fff; font-family: var(--f-display); font-size: 12px; padding: 0 10px; line-height: 20px; cursor: pointer; }
.banner button:hover { background: #fff; color: var(--red); }
.toast { position: fixed; left: 50%; bottom: 30px; transform: translate(-50%, 20px); background: var(--ink); color: var(--paper); padding: 12px 22px; font-family: var(--f-display); font-size: 15px; z-index: 90; opacity: 0; transition: opacity .25s, transform .25s var(--ease); border-left: 6px solid var(--red); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 开场与转场 ---------- */
.splash {
  position: fixed; inset: 0; z-index: 100; background: var(--night); overflow: hidden; cursor: pointer;
  transition: opacity .35s ease .05s;
}
.splash.out { opacity: 0; pointer-events: none; }
.splash .beam2 { position: absolute; left: -10%; top: -20%; width: 40%; height: 160%; background: linear-gradient(90deg, transparent, rgba(235, 229, 214, .55), transparent); transform: rotate(18deg) translateX(-120%); animation: sweep .7s var(--ease) .1s forwards; }
@keyframes sweep { to { transform: rotate(18deg) translateX(420%); } }
.splash .blk { position: absolute; background: var(--red); transform: scale(0); animation: blk .45s var(--ease) forwards; }
.splash .blk.b1 { left: 18%; top: 22%; width: 30vw; height: 30vw; border-radius: 50%; animation-delay: .5s; }
.splash .blk.b2 { left: 0; top: 58%; width: 120%; height: 90px; background: var(--paper); transform-origin: left; animation-delay: .62s; rotate: -12deg; }
.splash .blk.b3 { right: 12%; top: 16%; width: 120px; height: 52vh; background: var(--paper); animation-delay: .72s; }
@keyframes blk { to { transform: scale(1); } }
.splash .word { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--ink); font-family: var(--f-display); font-weight: 900; font-size: 18vw; letter-spacing: .1em; opacity: 0; animation: word .4s ease .85s forwards; mix-blend-mode: normal; }
.splash .word span { color: var(--paper); text-shadow: 0 0 0 transparent; -webkit-text-stroke: 3px var(--ink); }
@keyframes word { to { opacity: 1; } }
.splash .skip { position: absolute; right: 24px; bottom: 20px; color: #9c9486; font-family: var(--f-display); font-size: 13px; }
.wipe { position: fixed; inset: 0; z-index: 95; pointer-events: none; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
  .develop.neg { filter: none; }
}

/* 导航在较窄的窗口里收紧，不让字竖着排 */
.nav li a, .nav .mode, .nav .admin-link, .nav .mo-toggle, .btn-seat, .nav .logo { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 1279px) {
  .nav .logo small { display: none; }
  .nav .logo { padding-right: 24px; }
  .nav ul { margin-left: 8px; }
  .nav li a { padding: 0 11px; }
  .nav li a::after { left: 9px; right: 9px; }
  .btn-seat { padding: 0 22px 0 34px; }
}
@media (max-width: 1099px) {
  .nav li a { padding: 0 8px; font-size: 14px; }
  .nav li a::after { left: 6px; right: 6px; }
  .nav .mode { display: none; }
  .nav .mo-toggle, .nav .admin-link { margin-right: 8px; }
  .btn-seat { font-size: 15px; padding: 0 18px 0 30px; }
}