/* 科技史宇宙 Civiliverse — entry pages, index, about */
@font-face{font-family:"Civ Serif SC";src:url(../fonts/civ-serif-sc.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(../fonts/ebgaramond.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(../fonts/ebgaramond-italic.woff2) format("woff2");font-weight:400 700;font-style:italic;font-display:swap}
:root{
  --night:#050a16;--star:#e8eef8;--muted:#93a3bd;
  --brass:#c9a15a;--brass-hi:#e7cb8c;--brass-dk:#8f6a2c;
  --paper:#eceeea;--paper-2:#e2e6e1;--ink:#1d2633;--ink-2:#4a5562;--prussian:#1f4a7a;--rule:rgba(31,74,122,.2);
  --serif-zh:"EB Garamond","Civ Serif SC","Songti SC","STSong",serif;
  --sans:system-ui,-apple-system,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  --kai:"Kaiti SC","STKaiti","KaiTi","BiauKai",serif;
  --glow:rgba(201,161,90,.4);
}
*{box-sizing:border-box}
html{background:var(--night);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.8 var(--sans)}
body.lang-en{font:18.5px/1.6 "EB Garamond",Georgia,serif}
a{color:var(--prussian);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:#0f2f55}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.in{max-width:760px;margin:0 auto;padding-left:20px;padding-right:20px}
.in.wide{max-width:900px}
.t-tech{--glow:rgba(240,180,80,.5)}.t-idea{--glow:rgba(99,199,255,.5)}.t-person{--glow:rgba(255,143,126,.5)}.t-wonder{--glow:rgba(89,224,180,.5)}.t-disaster{--glow:rgba(255,88,101,.5)}

/* top bar */
.top{background:var(--night);color:var(--star);border-bottom:1px solid rgba(201,161,90,.22)}
.top .in{max-width:1100px;display:flex;align-items:center;gap:10px 16px;padding-top:10px;padding-bottom:10px;flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none}
.brand b{font:600 19px/1.2 var(--serif-zh);letter-spacing:.14em;color:#f4ead2}
.brand i{font:italic 500 15px/1.2 "EB Garamond",Georgia,serif;letter-spacing:.06em;color:var(--brass)}
.top nav{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(201,161,90,.45);background:rgba(8,15,32,.6);color:#f1e6c9;padding:5px 12px;border-radius:999px;font:13.5px/1.3 var(--sans);text-decoration:none;white-space:nowrap}
.chip:hover{background:rgba(24,40,74,.92);color:#fff}
.chip.on{border-color:var(--brass-hi);color:var(--brass-hi)}
.chip.go{background:var(--brass);color:#0b1428;border-color:var(--brass)}
.chip.go:hover{background:var(--brass-hi);color:#0b1428}

/* night strip */
.hero{position:relative;overflow:hidden;color:var(--star);padding:34px 0 30px;
  background:radial-gradient(80% 160% at 12% 0%,#16305f 0%,#0a1630 46%,#050a16 100%)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.75;
  background-image:radial-gradient(1.2px 1.2px at 8% 22%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 23% 74%,#cfe0ff 50%,transparent 51%),
  radial-gradient(1.4px 1.4px at 41% 15%,#fff3d6 50%,transparent 51%),radial-gradient(1px 1px at 57% 63%,#fff 50%,transparent 51%),
  radial-gradient(1.2px 1.2px at 69% 30%,#cfe0ff 50%,transparent 51%),radial-gradient(1px 1px at 81% 80%,#fff 50%,transparent 51%),
  radial-gradient(1.6px 1.6px at 90% 18%,#fff3d6 50%,transparent 51%),radial-gradient(1px 1px at 96% 55%,#fff 50%,transparent 51%),
  radial-gradient(1px 1px at 33% 42%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 63% 88%,#cfe0ff 50%,transparent 51%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(201,161,90,.6),transparent)}
.hero .in{position:relative;display:grid;grid-template-columns:auto 1fr;gap:6px 22px;align-items:center}
.hero.slim .in{grid-template-columns:1fr}
.hero .hb{filter:drop-shadow(0 0 16px var(--glow))}
.hero .hb svg{display:block}
.hero .kind{margin:0;font:13px/1.4 var(--sans);color:var(--muted);letter-spacing:.06em}
.hero h1{margin:2px 0 0;font:600 clamp(30px,5.4vw,46px)/1.12 var(--serif-zh);letter-spacing:.03em;color:#f6ecd3}
.hero .alt{margin:6px 0 0;font:italic 19px/1.3 "EB Garamond",var(--serif-zh);color:var(--brass);font-synthesis:none}
.hero .orig{font-style:normal;color:var(--muted);margin-left:10px;font-size:16px}
.hero .tagline{grid-column:1/-1;margin:16px 0 0;max-width:640px;font:19px/1.65 var(--kai);color:#dfe6f1}
.lang-en .hero .tagline{font:italic 21px/1.45 "EB Garamond",Georgia,serif}
.hero .see{grid-column:1/-1;justify-self:start;margin-top:14px}
.hero .lead{margin:8px 0 0;max-width:620px;color:#cdd6e4}

main{padding-top:26px;padding-bottom:56px}
.summary{margin:0 0 16px;font-size:17px;line-height:1.75;color:#17202c}
.lang-en .summary{font-size:20.5px;line-height:1.5}
.meta{display:grid;grid-template-columns:auto 1fr;gap:2px 16px;margin:0;padding:12px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font:14px/1.6 var(--sans)}
.meta dt{color:var(--ink-2)}
.meta dd{margin:0}
.quote{margin:24px 0 0;padding:14px 18px;border-left:3px solid var(--brass-dk);background:rgba(31,74,122,.05)}
.quote p{margin:0;font:17px/1.8 var(--kai);color:#1e2a3b}
.lang-en .quote p{font:italic 19.5px/1.5 "EB Garamond",Georgia,serif}
.quote cite{display:block;margin-top:8px;font:normal 13px/1.5 var(--sans);color:var(--ink-2)}
figure{margin:26px 0 0}
figure .frame{display:flex;justify-content:center;background:#141a24;border-radius:2px}
figure img{display:block;max-width:100%;width:auto;height:auto;max-height:min(72vh,620px)}
figcaption{margin-top:8px;font:13.5px/1.6 var(--sans);color:#2c3746}
figcaption small{display:block;margin-top:2px;font-size:12px;color:#5b6674}
.ai{display:inline-block;font:11.5px/1.6 var(--sans);padding:0 7px;border-radius:3px;background:var(--prussian);color:#eef2f7;margin-right:7px;vertical-align:1px}
h2{display:flex;align-items:center;gap:12px;margin:38px 0 12px;font:600 17px/1.3 var(--serif-zh);letter-spacing:.16em;color:var(--prussian)}
.lang-en h2{letter-spacing:.02em;font-size:22px}
h2::after{content:"";flex:1;height:1px;background:var(--rule)}
h2 small{font:400 12.5px var(--sans);letter-spacing:0;color:var(--ink-2)}
h2 .conf{font:12px/1.5 var(--sans);letter-spacing:0;color:#7a5621;border:1px solid rgba(143,106,44,.4);border-radius:999px;padding:0 8px}
.prose p{margin:0 0 14px}
.lang-zh .prose p{text-align:justify}
.comment{margin-top:34px;padding:2px 22px 10px;background:rgba(201,161,90,.13);border-radius:3px}
.comment h2{margin-top:20px;color:#7a5621}
.comment h2::after{background:rgba(143,106,44,.3)}
.model-cta{display:flex;gap:14px;align-items:center;margin:26px 0 0;padding:14px 16px;border:1px solid var(--prussian);border-radius:6px;background:rgba(31,74,122,.07);text-decoration:none;color:var(--ink);font:14px/1.5 var(--sans)}
.model-cta:hover{background:rgba(31,74,122,.12)}
.model-cta svg{width:30px;height:30px;fill:var(--prussian);flex:none}
.model-cta b{display:block;font:600 15px/1.4 var(--serif-zh);color:var(--prussian)}
.model-cta small{display:block;color:var(--ink-2);font-size:12.5px}
.rels h3{display:flex;gap:8px;align-items:baseline;margin:18px 0 4px;font:600 13.5px var(--sans);color:var(--ink-2)}
.rels h3 span{font-weight:400;color:#7d8794}
.rels ul,.entries,.keys{list-style:none;margin:0;padding:0}
.rels li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--rule)}
.rels .bd{flex:none;margin-top:3px}
.rels b a{font:600 16px/1.4 var(--serif-zh);color:#13223d;text-decoration:none}
.rels b a:hover{text-decoration:underline}
.rels em{font:normal 12px var(--sans);color:#7a5621;margin-left:8px}
.rels span{display:block;font:14px/1.6 var(--sans);color:#3d4957}
.refs,.caveats{margin:0;padding-left:20px;font:14px/1.65 var(--sans);color:#33404f}
.refs li,.caveats li{margin:3px 0}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:44px;padding-top:16px;border-top:1px solid var(--rule)}
.pn a{text-decoration:none;font:600 16px/1.4 var(--serif-zh);color:#13223d}
.pn a:hover{color:var(--prussian)}
.pn a.n{text-align:right}
.pn small{display:block;margin-bottom:2px;font:12px var(--sans);color:var(--ink-2)}
.foot{background:var(--night);color:var(--muted);font:13px/1.6 var(--sans);padding:22px 0 30px}
.foot .in{max-width:1100px}
.foot p{margin:0 0 6px}
.foot a{color:var(--brass-hi)}

/* index */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.tf{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--rule);background:#f6f7f4;border-radius:999px;padding:4px 12px 4px 6px;font:13.5px var(--sans);color:var(--ink);cursor:pointer}
.tf span{color:var(--ink-2);font-size:12px}
.tf[aria-pressed="false"]{opacity:.4}
.eras{display:flex;flex-wrap:wrap;gap:4px 16px;font:14px/1.6 var(--sans);margin:0 0 6px}
.entries li{display:grid;grid-template-columns:40px 1fr;gap:14px;padding:13px 0;border-top:1px solid var(--rule)}
.entries li[hidden]{display:none}
.entries a{font:600 18px/1.35 var(--serif-zh);color:#13223d;text-decoration:none}
.entries a:hover{text-decoration:underline}
.entries .d{display:flex;gap:10px;font:12.5px/1.5 var(--sans);color:var(--ink-2);margin-top:1px}
.entries p{margin:3px 0 0;font:14px/1.65 var(--sans);color:#3d4957}

/* about */
.keys li{display:flex;gap:14px;align-items:center;padding:10px 0;border-top:1px solid var(--rule)}
.keys b{display:block;font:600 16px/1.4 var(--serif-zh);color:#13223d}
.keys span{display:block;font:14px/1.6 var(--sans);color:#3d4957}
.keys .bd,.keys .ln{flex:none}

@media (max-width:640px){
  .top nav{margin-left:0}
  .top nav .chip{padding:4px 10px;font-size:12.5px}
  .hero{padding:26px 0 24px}
  .hero .in{grid-template-columns:1fr}
  .hero .hb svg{width:58px;height:58px}
  .pn{grid-template-columns:1fr}
  .pn a.n{text-align:left}
  .comment{padding:2px 16px 8px}
  body.lang-en{font-size:18px}
}