/* Mussolini l'alleato II —— 双语阅读站 */

:root {
  --bg: #fbfaf7;
  --paper: #fff;
  --ink: #23201c;
  --ink-soft: #55504a;
  --dim: #9b948a;
  --rule: #e3ded5;
  --accent: #8a2f24;
  --accent-soft: #f0e6e2;
  --side: #f4f1ea;
  --shadow: 0 1px 2px rgba(0, 0, 0, .05);

  --serif-it: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  /* zh-body 由 site/build_font.py 生成，unicode-range 只圈 CJK；
     正文里的拉丁文与数字因此落到后面的西文衬线栈上，汉字缺字再退到系统中文字体。 */
  --serif-zh: "zh-body", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
              "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", "STSong", "SimSun", serif;
}

html[data-theme="dark"] {
  --bg: #16171a;
  --paper: #1c1e22;
  --ink: #d9d5ce;
  --ink-soft: #a8a29a;
  --dim: #6e6960;
  --rule: #2e3136;
  --accent: #d98a7a;
  --accent-soft: #332623;
  --side: #191b1f;
  --shadow: none;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif-zh);
  font-size: var(--text-size, 17px);
  line-height: 1.85;
  -webkit-text-size-adjust: 100%;
}

body.lang-it { font-family: var(--serif-it); line-height: 1.7; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- 侧栏 */

#side {
  position: fixed;
  inset: 0 auto 0 0;
  width: 16.5rem;
  background: var(--side);
  border-right: 1px solid var(--rule);
  overflow-y: auto;
  padding: 1.25rem 0 1rem;
  z-index: 30;
  font-family: system-ui, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

.brand { display: block; padding: 0 1.25rem 1rem; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand b { display: block; font-size: 15px; letter-spacing: .02em; }
.brand span { display: block; color: var(--dim); font-size: 12px; margin-top: .2rem; }

#side ul { list-style: none; margin: 0; padding: 0; }
#side li a {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  padding: .38rem 1.25rem;
  color: var(--ink-soft);
  border-left: 2px solid transparent;
}
#side li a:hover { background: var(--accent-soft); color: var(--ink); text-decoration: none; }
#side li.on a { color: var(--accent); border-left-color: var(--accent); font-weight: 600; }
.nav-group {
  padding: 1rem 1.25rem .25rem;
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--dim);
  text-transform: uppercase;
}
.nav-pp { color: var(--dim); font-size: 11px; font-variant-numeric: tabular-nums; flex: none; }

.side-foot {
  margin-top: 1.25rem;
  padding: .9rem 1.25rem 0;
  border-top: 1px solid var(--rule);
  color: var(--dim);
  font-size: 12px;
}
.foot-row { display: flex; align-items: center; gap: .5rem; }
.foot-row + .foot-row { margin-top: .55rem; }
.side-foot input {
  width: 4.2rem;
  padding: .2rem .4rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}
.side-foot button {
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink-soft);
  border-radius: 3px;
  cursor: pointer;
  padding: .12rem .45rem;
  font-size: 13px;
  line-height: 1.3;
}
.side-foot button:hover { background: var(--accent-soft); color: var(--ink); }
#theme { margin-left: auto; }
.step { min-width: 1.9rem; }
#size-now {
  min-width: 2.1rem;
  text-align: center;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

#menu, #scrim { display: none; }

/* ---------------------------------------------------------------- 主栏 */

main {
  margin-left: 16.5rem;
  /* 可横滚的宽表在窄屏上仍会把整页的滚动区域撑大几十像素（元素本身没越界，
     是滚动容器的溢出渗到了初始包含块）。clip 不会建立滚动容器，所以顶栏的
     sticky 仍然有效——这里不能换成 hidden。 */
  overflow-x: clip;
}

.bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem 1.5rem;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--rule);
  font-family: system-ui, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 13px;
}
.crumb { color: var(--dim); }

.switch { display: flex; border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; }
.switch > * {
  padding: .22rem .7rem;
  color: var(--ink-soft);
  border-left: 1px solid var(--rule);
  white-space: nowrap;
}
.switch > :first-child { border-left: 0; }
.switch .on { background: var(--accent); color: #fff; }
.switch a:hover { background: var(--accent-soft); text-decoration: none; }

.doc {
  /* 栏宽跟着正文字号走：放大字号时每行仍是四十来个字，而不是越来越挤。 */
  max-width: calc(42 * var(--text-size, 17px));
  margin: 0 auto;
  padding: 2.5rem 1.25rem 8rem;
}
body.wide .doc { max-width: calc(78 * var(--text-size, 17px)); }

/* ---------------------------------------------------------------- 正文 */

.doc h1 {
  font-size: 1.5rem;
  line-height: 1.45;
  margin: 0 0 2.5rem;
  padding-bottom: .9rem;
  border-bottom: 2px solid var(--rule);
  font-weight: 600;
}
.doc h2 { font-size: 1.2rem; margin: 2.5rem 0 1rem; font-weight: 600; }
.doc h3 { font-size: 1.05rem; margin: 2rem 0 .8rem; font-weight: 600; }
.doc h4 { font-size: 1rem; margin: 1.5rem 0 .6rem; color: var(--ink-soft); }

.doc p { margin: 0 0 1.15em; text-align: justify; }
body.lang-zh .doc p, body.lang-bi .col.zh p { text-indent: 2em; }
body.lang-zh .doc li p, body.lang-bi .col.zh li p { text-indent: 0; }

.doc blockquote {
  margin: 1.4em 0;
  padding: .1em 0 .1em 1.2em;
  border-left: 2px solid var(--rule);
  color: var(--ink-soft);
}
.doc hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5em 0; }
.doc ul, .doc ol { padding-left: 1.6em; }
.doc li { margin: .2em 0; }
.doc em { font-style: italic; }
.doc strong { font-weight: 600; }

.tbl {
  max-width: 100%;
  overflow-x: auto;
  margin: 1.5em 0;
  -webkit-overflow-scrolling: touch;
}
.doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9em;
  font-variant-numeric: tabular-nums;
}
.doc th, .doc td {
  border: 1px solid var(--rule);
  padding: .35em .6em;
  text-align: left;
  vertical-align: top;
}
.doc th { background: var(--side); font-weight: 600; }
.doc td p, .doc th p { text-indent: 0 !important; margin: 0; }

.doc pre {
  overflow-x: auto;
  background: var(--side);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: .8em 1em;
  font-size: .82em;
  line-height: 1.55;
}
.doc pre code { font-family: "DejaVu Sans Mono", "Cascadia Mono", Consolas, monospace; }
.doc code { font-size: .9em; }

.doc img { max-width: 100%; height: auto; display: block; margin: 1.5em auto; border: 1px solid var(--rule); background: #fff; }

/* 印刷页码 */

.pg { position: relative; }
.pb {
  position: absolute;
  left: -5.2rem;
  width: 4rem;
  text-align: right;
  font-family: system-ui, sans-serif;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--dim);
  letter-spacing: .04em;
  padding-top: .45em;
  user-select: none;
}
.pb::before { content: "p."; opacity: .55; margin-right: .25em; }
.pb:empty { display: none; }

/* ---------------------------------------------------------------- 对照 */

.row { display: grid; grid-template-columns: 3.4rem 1fr 1fr; gap: 0 2rem; align-items: start; padding: .4rem 0; }
.row > .pb { position: static; width: auto; text-align: right; padding-top: .55em; }
.row + .row { border-top: 1px dashed var(--rule); }
.row .col.zh { font-family: var(--serif-zh); line-height: 1.85; }
.row .col.it { font-family: var(--serif-it); line-height: 1.7; color: var(--ink-soft); font-size: .94em; }
.row .col { min-width: 0; }
.row .col > :last-child { margin-bottom: 0; }
.row.notes { font-size: .85em; }

/* ---------------------------------------------------------------- 脚注 */

.notes-h {
  margin: 4rem 0 1rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  font-size: 1.05rem;
  color: var(--ink-soft);
  font-weight: 600;
}
.footnote { font-size: .85em; line-height: 1.7; color: var(--ink-soft); }
.footnote hr { display: none; }
.footnote ol { padding-left: 2em; }
.footnote li { margin: .5em 0; }
.footnote li p { text-indent: 0 !important; margin: 0 0 .4em; }
.footnote li pre { font-size: .9em; }
.footnote-ref { text-decoration: none; }
sup a { padding: 0 .12em; }
.footnote-backref { text-decoration: none; opacity: .5; margin-left: .3em; }
li:target { background: var(--accent-soft); border-radius: 3px; }

#pop {
  position: absolute;
  z-index: 50;
  max-width: min(30rem, 88vw);
  max-height: 22rem;
  overflow-y: auto;
  padding: .7rem .9rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 5px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .14);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-soft);
}
#pop p { margin: 0 0 .4em; text-indent: 0 !important; }
#pop > :last-child { margin-bottom: 0; }
#pop .footnote-backref { display: none; }

/* ---------------------------------------------------------------- 翻页 */

.pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  max-width: calc(42 * var(--text-size, 17px));
  margin: 0 auto;
  padding: 0 1.25rem 5rem;
  font-family: system-ui, "PingFang SC", sans-serif;
  font-size: 13px;
}
body.wide .pager { max-width: calc(78 * var(--text-size, 17px)); }
.pager .next { margin-left: auto; }

/* ---------------------------------------------------------------- 首页 */

body.home { background: var(--bg); }
.cover { max-width: 60rem; margin: 0 auto; padding: 4rem 1.5rem 6rem; }
.cover header { text-align: center; margin-bottom: 3.5rem; }
.cover .author { color: var(--dim); letter-spacing: .12em; margin: 0 0 .8rem; font-size: 14px; }
.cover h1 { font-size: 2.1rem; margin: 0; font-weight: 600; letter-spacing: .04em; }
.cover .sub { color: var(--ink-soft); margin: .8rem 0 0; line-height: 1.7; }
.cover .imprint { color: var(--dim); font-size: 13px; margin-top: 1.2rem; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.25rem; }
.card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 1.1rem 1.25rem 1.3rem;
  box-shadow: var(--shadow);
}
.card h2 {
  margin: 0 0 .7rem;
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--dim);
  font-family: system-ui, sans-serif;
  text-transform: uppercase;
}
.card ul { list-style: none; margin: 0; padding: 0; }
.card li { display: flex; align-items: baseline; gap: .5rem; padding: .32rem 0; border-top: 1px solid var(--rule); }
.card li:first-child { border-top: 0; }
.card li > a { flex: 1; display: flex; align-items: baseline; gap: .5rem; color: var(--ink); min-width: 0; }
.card li b { font-weight: 600; white-space: nowrap; }
.card li em {
  font-style: normal;
  color: var(--dim);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card .alt { display: flex; gap: .45rem; font-size: 11px; font-family: system-ui, sans-serif; }
.card .alt a { color: var(--dim); }
.cover-foot { margin-top: 3rem; color: var(--dim); font-size: 13px; line-height: 1.9; text-align: center; }


/* 对照视图：两栏挤到 290px 以下就读不下去了，提前堆叠 */
@media (max-width: 1100px) {
  .row { grid-template-columns: 1fr; gap: .3rem; padding: .8rem 0; }
  .row > .pb { justify-self: start; text-align: left; }
  .row .col.it {
    margin-top: .6rem;
    padding-left: .9rem;
    border-left: 2px solid var(--rule);
  }
  .row .col.it::before {
    content: "IT";
    display: block;
    margin-bottom: .35rem;
    font: 10px/1 system-ui, sans-serif;
    letter-spacing: .16em;
    color: var(--dim);
  }
  .row .col.it:empty { display: none; }
}

/* ---------------------------------------------------------------- 窄屏 */

/* 宽屏时页码排在正文左侧的栏外。字号调大以后正文会变宽，必须留住这条
   空白，否则页码会顶到侧栏底下（而 main 的 overflow-x: clip 会把它裁掉）。 */
@media (min-width: 1181px) {
  body:not(.wide) .doc,
  body:not(.wide) .pager {
    max-width: min(calc(42 * var(--text-size, 17px)), calc(100% - 13rem));
  }
}

@media (max-width: 1180px) {
  .pb {
    position: static;
    width: auto;
    display: inline-block;
    text-align: left;
    margin: 0 0 .35rem;
    padding: .05rem .4rem;
    border: 1px solid var(--rule);
    border-radius: 3px;
  }
}

@media (max-width: 900px) {
  /* 窄屏默认小一号，但读者自己选过字号就以他选的为准（别让这条硬值盖过变量）。 */
  body { font-size: var(--text-size, 16px); }
  main { margin-left: 0; }
  #side {
    transform: translateX(-100%);
    transition: transform .22s ease;
    width: 15rem;
  }
  body.nav-open #side { transform: none; }
  body.nav-open #scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    z-index: 25;
  }
  #menu {
    display: block;
    position: fixed;
    left: .6rem;
    top: .45rem;
    z-index: 40;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--rule);
    border-radius: 4px;
    background: var(--paper);
    color: var(--ink);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
  }
  .bar { padding-left: 3.2rem; }
  .row .col.it { padding-top: .5rem; }
  .doc { padding-top: 1.5rem; }
  /* 九列的数字表硬塞进 335px 会每格折成好几行，改成表格保持原宽、容器横滚 */
  .tbl table { width: auto; min-width: 100%; }
  .tbl th, .tbl td { white-space: nowrap; }
}
.pa { position: absolute; }
.pb.nonum::before { content: none; }