/* ============================================================
   magazine.css — 杂志特刊「老画报 / 复古」基底（issues 内页）
   ============================================================ */
@import url('../fonts/fonts.css');

:root{
  --paper:#f4efe4;
  --ink:#2a2018;
  --ink2:#4a3a2a;
  --red:#9d2b1f;
  --redink:#b23a26;
  --gold:#8a6a2f;
  --line:#d8cbb0;
  --font-cn:"Noto Serif SC","Songti SC",STSong,serif;
  --font-display:"Ma Shan Zheng","Noto Serif SC","Songti SC",STSong,serif;
  --font-label:"ZCOOL QingKe HuangYou","Noto Serif SC","Songti SC",STSong,serif;
  --font-en:"Cormorant Garamond","Noto Serif SC",Georgia,serif;
  --font-ui:"Archivo","Noto Serif SC",Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:#ddcfb0;color:var(--ink);
  font-family:var(--font-cn);line-height:1.95;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:var(--red);text-decoration:none}

/* paper sheet */
.sheet{
  max-width:900px;margin:30px auto;background:#ece1c8;
  background-image:
    radial-gradient(circle at 18% 28%, rgba(157,43,31,.04) 0, transparent 42%),
    radial-gradient(circle at 82% 72%, rgba(138,106,47,.06) 0, transparent 42%),
    repeating-linear-gradient(0deg, rgba(120,90,40,.025) 0 2px, transparent 2px 4px);
  box-shadow:0 18px 60px rgba(60,40,20,.35);
  border:1px solid #cbb88f;
}
.inner{padding:44px 56px 56px;border:2px double var(--line);margin:14px}

/* sticky in-page issue nav (single-page issue) */
.issue-nav{
  position:sticky;top:0;z-index:10;
  display:flex;justify-content:center;gap:6px;flex-wrap:wrap;
  background:rgba(236,225,200,.94);backdrop-filter:blur(4px);
  border-bottom:2px double var(--ink);padding:10px 8px;margin:0 -56px 0;
}
.issue-nav a{
  font-family:var(--font-label);font-size:14px;letter-spacing:.18em;
  color:var(--ink2);padding:5px 16px;border-radius:30px;transition:all .2s;
}
.issue-nav a:hover,.issue-nav a.active{background:var(--red);color:#f6efe0}
.issue-nav .sep{color:var(--line);align-self:center}
.feature-divider{height:0;border:0;border-top:3px double var(--ink);margin:60px -56px 50px;position:relative}
.feature-divider::after{content:"◆";position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:#ece1c8;color:var(--red);padding:0 14px;font-size:16px}
html{scroll-padding-top:64px}

/* masthead / page nav */
.masthead{
  display:flex;justify-content:space-between;align-items:flex-end;
  border-bottom:3px double var(--ink);padding-bottom:13px;margin-bottom:4px;
}
.masthead .left,.masthead .right{font-family:var(--font-ui);font-size:12px;letter-spacing:.2em;color:var(--gold);font-weight:700;text-transform:uppercase}
.masthead .right a{color:var(--gold);border-bottom:1px solid var(--line)}
.masthead .mid{font-family:var(--font-label);font-size:20px;letter-spacing:.3em;color:var(--red)}
.thinrule{border-bottom:1px solid var(--ink);height:4px;margin-bottom:30px}

/* article header */
.eyebrow{font-family:var(--font-label);color:var(--red);font-size:16px;letter-spacing:.5em;margin-bottom:12px}
.title-cn{font-family:var(--font-display);font-weight:400;font-size:74px;line-height:1;color:var(--ink);letter-spacing:.04em;margin-bottom:12px}
.title-sub{font-family:var(--font-en);font-size:17px;letter-spacing:.22em;color:var(--gold);text-transform:uppercase;font-weight:700;margin-bottom:6px}

/* seal */
.seal{
  width:108px;height:108px;border:3px solid var(--red);border-radius:6px;
  display:flex;align-items:center;justify-content:center;transform:rotate(-4deg);
  box-shadow:0 0 0 4px rgba(157,43,31,.12);background:rgba(157,43,31,.05);
}
.seal span{font-family:var(--font-display);font-synthesis:none;font-weight:400;color:var(--red);font-size:32px;writing-mode:vertical-rl;text-align:center;line-height:1.05}

/* hero figure */
figure{margin:26px 0 6px}
figure .ph{
  height:300px;border:3px solid var(--ink);position:relative;overflow:hidden;
  background:
    linear-gradient(135deg, rgba(42,32,24,.18), rgba(42,32,24,0) 60%),
    repeating-linear-gradient(45deg, #cdb88c 0 12px, #c6b083 12px 24px);
}
figure .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:sepia(.12) saturate(.95)}
figure .ph[data-label]::before{
  content:attr(data-label);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-label);font-size:18px;letter-spacing:.4em;color:rgba(42,32,24,.5);text-align:center;padding:0 30px;
}
figure figcaption{text-align:center;font-family:var(--font-ui);font-size:11px;letter-spacing:.18em;color:var(--gold);margin-top:10px;font-weight:700;text-transform:uppercase}

/* columns body */
.cols{columns:2;column-gap:42px;column-rule:1px solid var(--line);margin-top:34px}
.cols p{margin-bottom:18px;font-size:15.5px;text-align:justify;text-indent:2em;color:var(--ink2)}
.cols p.no-indent,.cols p:first-child{text-indent:0}
.dropcap{text-indent:0!important}
.dropcap::first-letter{font-family:var(--font-display);float:left;font-size:60px;line-height:.8;margin:6px 10px 0 0;color:var(--red)}
.single{margin-top:34px}
.single p{font-size:16px;margin-bottom:22px;text-indent:2em;color:var(--ink2)}
.single p:first-of-type{text-indent:0}

/* headings inside */
h2.sec{font-family:var(--font-cn);font-size:23px;font-weight:700;line-height:1.5;letter-spacing:.08em;color:var(--ink);margin:14px 0 16px;break-after:avoid}
h2.sec .n{font-family:var(--font-display);font-weight:400;color:var(--red);margin-right:.4em}

/* ornament divider */
.ornament{text-align:center;color:var(--red);font-size:16px;letter-spacing:1em;margin:34px 0;break-inside:avoid}

/* pull quote */
.pull{text-align:center;margin:34px 0;padding:26px 10px;break-inside:avoid;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pull p{font-family:var(--font-display);font-size:30px;line-height:1.5;color:var(--red);text-indent:0;margin:0}
.pull cite{display:block;margin-top:14px;font-family:var(--font-en);font-style:normal;font-size:14px;letter-spacing:.2em;color:var(--gold);text-transform:uppercase}

/* boxed table */
.box{break-inside:avoid;margin:30px 0 6px;border:2px solid var(--ink);background:rgba(157,43,31,.04)}
.box h3{font-family:var(--font-label);background:var(--ink);color:var(--paper);font-size:16px;letter-spacing:.4em;text-align:center;padding:9px;font-weight:400}
.box .grid2{display:grid;grid-template-columns:1fr 1fr}
.box .cell{padding:15px 20px;border-right:1px dashed var(--line);border-bottom:1px dashed var(--line)}
.box .cell:nth-child(even){border-right:0}
.box .cell b{display:block;color:var(--red);font-size:13px;letter-spacing:.2em;margin-bottom:4px;font-weight:600}
.box .cell span{font-size:14.5px;color:var(--ink2)}

/* sidebar note (e.g. 盐水鹅 边栏) */
.aside{break-inside:avoid;margin:28px 0;padding:22px 26px;background:rgba(138,106,47,.08);border-left:4px solid var(--red)}
.aside h4{font-family:var(--font-label);color:var(--red);font-size:17px;letter-spacing:.2em;margin-bottom:10px}
.aside p{font-size:14.5px;color:var(--ink2);text-indent:0;margin-bottom:10px}

/* colophon / footer nav */
.colophon{margin-top:40px;border-top:3px double var(--ink);padding-top:16px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;font-family:var(--font-ui);font-size:11px;letter-spacing:.16em;color:var(--gold);font-weight:700;text-transform:uppercase}
.colophon a{color:var(--red);border-bottom:1px solid var(--red)}
.next-prev{display:flex;gap:20px}

/* cover (issue index) */
.cover{text-align:center;padding:10px 0 24px}
.cover .pub{font-family:var(--font-ui);font-size:12px;letter-spacing:.32em;color:var(--gold);font-weight:700;margin-bottom:24px;text-transform:uppercase}
.cover .magname{font-family:var(--font-display);font-size:120px;line-height:.9;color:var(--ink);margin-bottom:6px}
.cover .issue-theme{font-family:var(--font-label);font-size:30px;letter-spacing:.3em;color:var(--red);margin:18px 0 8px}
.cover .issue-en{font-family:var(--font-en);font-size:16px;letter-spacing:.26em;color:var(--gold);text-transform:uppercase;font-weight:700}

/* table of contents */
.toc{margin-top:30px}
.toc a.toc-item{display:flex;align-items:baseline;gap:16px;padding:18px 6px;border-bottom:1px solid var(--line);color:var(--ink)}
.toc a.toc-item:hover{background:rgba(157,43,31,.05)}
.toc .toc-no{font-family:var(--font-display);font-size:34px;color:var(--red);flex:0 0 50px}
.toc .toc-main{flex:1}
.toc .toc-main b{font-family:var(--font-label);font-size:21px;letter-spacing:.1em;display:block}
.toc .toc-main span{font-family:var(--font-en);font-size:15px;letter-spacing:.08em;color:var(--gold)}
.toc .toc-cat{font-family:var(--font-ui);font-size:11px;letter-spacing:.24em;color:var(--red);writing-mode:vertical-rl;align-self:center;text-transform:uppercase}

@media(max-width:680px){
  .inner{padding:28px 24px}
  .cols{columns:1}
  .title-cn{font-size:56px}
  .cover .magname{font-size:84px}
  .box .grid2{grid-template-columns:1fr}
  .box .cell{border-right:0}
  figure .ph{height:220px}
}