/* ============================================================
   松间集 · 风格三：民国复古报纸
   泛黄纸感 / 报纸刊头 / 双线框 / 仿宋正文 / 分栏排版
   ============================================================ */

:root{
  --paper:      #efe4c9;   /* 泛黄纸 */
  --paper-2:    #e8dbb8;   /* 深一档（剪报/广告底） */
  --paper-3:    #f3ead2;   /* 浅一档 */
  --ink:        #2e2820;   /* 报纸黑 */
  --sepia:      #7c6b4e;   /* 褐（次级信息） */
  --red:        #96382a;   /* 老报纸红 */
  --line:       #c4b384;   /* 纸色分隔线 */
  --song: "Songti SC","STSong","SimSun","Noto Serif SC",serif;
  --fang: "FangSong SC","STFangsong","FangSong","Songti SC",serif;
  --hei:  "PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--fang);
  font-size:16px;
  line-height:1.95;
  /* 做旧纸纹：横向霉斑条 + 细颗粒 */
  background-image:
    repeating-linear-gradient(90deg, rgba(124,107,78,.05) 0 2px, transparent 2px 90px),
    repeating-linear-gradient(0deg, rgba(124,107,78,.035) 0 1px, transparent 1px 5px);
}
/* 四角压暗，模拟旧报纸的岁月晕 */
body::after{
  content:"";
  position:fixed; inset:0; z-index:999; pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 58%, rgba(110,88,44,.20) 100%);
}
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:1080px; margin:0 auto; padding:0 30px; }

/* ---------- 页头：报纸刊头 ---------- */
.masthead{ padding:34px 0 0; text-align:center; }
.mast-top{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--fang); font-size:12.5px; color:var(--sepia); letter-spacing:.08em;
}
.mast-title{
  margin:16px 0 12px;
  font-family:var(--song);
  font-size:clamp(44px, 7vw, 62px);
  font-weight:900;
  letter-spacing:.14em;
  text-indent:.14em;
  line-height:1.1;
}
.mast-sub{
  font-family:var(--song);
  font-size:14px;
  letter-spacing:.5em;
  text-indent:.5em;
  color:var(--sepia);
}
.mast-rule{ /* 报头双粗线 */
  margin-top:14px;
  border-top:4px double var(--ink);
}
.mast-rule2{ border-top:1px solid var(--ink); margin-top:3px; }
.mast-nav{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:4px 0;
  padding:12px 0 14px;
  font-family:var(--song);
  font-size:15.5px;
}
.mast-nav a{ padding:2px 18px; color:var(--sepia); transition:color .2s; }
.mast-nav a:hover{ color:var(--red); }
.mast-nav a.active{ color:var(--red); font-weight:700; }
.mast-nav .sep{ color:var(--line); align-self:center; }

/* ---------- 花边框（报纸启事/广告框） ---------- */
.framed{
  border:1px solid var(--ink);
  box-shadow:0 0 0 3px var(--paper), 0 0 0 4px var(--ink);
}

/* ---------- 首页 ---------- */
.frontpage{ padding:38px 0 20px; }
.lead{
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:34px;
  padding-bottom:30px;
  border-bottom:1px solid var(--ink);
}
.lead-kicker{
  font-family:var(--song); font-weight:700;
  font-size:13px; letter-spacing:.3em; color:var(--red);
}
.lead-title{
  margin-top:14px;
  font-family:var(--song);
  font-size:clamp(30px, 4.4vw, 44px);
  font-weight:900;
  line-height:1.4;
}
.lead-title:hover{ color:var(--red); }
.lead-sub{ margin-top:12px; font-size:15px; color:var(--sepia); }
.lead-side .side-box{ border:1px solid var(--ink); padding:20px 22px; background:var(--paper-3); }
.side-box h4{
  font-family:var(--song); font-size:15px; font-weight:900; letter-spacing:.24em;
  padding-bottom:8px; border-bottom:3px double var(--ink); margin-bottom:12px; text-align:center;
}
.side-box p{ font-size:14px; color:#4a4030; }
.side-box .stamp{
  display:inline-block; margin-top:14px;
  border:2px solid var(--red); color:var(--red);
  font-family:var(--song); font-weight:700; font-size:12px;
  padding:2px 10px; letter-spacing:.2em; transform:rotate(-3deg);
}

.col-strip{ padding:26px 0 10px; }
.strip-head{
  display:flex; align-items:baseline; justify-content:space-between;
  font-family:var(--song); font-weight:900; font-size:19px; letter-spacing:.2em;
  padding-bottom:6px; border-bottom:1px solid var(--ink); margin-bottom:6px;
}
.strip-head .more{ font-family:var(--fang); font-weight:400; font-size:13px; color:var(--sepia); letter-spacing:.06em; }
.strip-head .more:hover{ color:var(--red); }

.col4{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.col4 .cell{
  padding:18px 18px 16px;
  border-right:1px dashed var(--line);
}
.col4 .cell:last-child{ border-right:none; }
.col4 .cell h5{ font-family:var(--song); font-size:17px; font-weight:900; letter-spacing:.08em; }
.col4 .cell h5:hover{ color:var(--red); }
.col4 .cell p{ margin-top:6px; font-size:13px; color:#5c5138; line-height:1.8; }
.col4 .cell .n{ display:block; margin-top:10px; font-size:12px; color:var(--sepia); letter-spacing:.1em; }
.col4 .cell.soon h5{ color:var(--sepia); }
.col4 .cell.soon .n{ color:var(--red); }

.news-list{ list-style:none; }
.news-list li{ display:flex; align-items:baseline; gap:16px; padding:12px 2px; border-bottom:1px dotted var(--line); }
.news-list li:first-child{ border-top:1px solid var(--ink); }
.news-list .date{ flex:none; width:96px; font-size:13px; color:var(--sepia); }
.news-list .col{ flex:none; font-family:var(--song); font-size:13px; color:var(--red); width:44px; }
.news-list .ttl{ flex:1; font-family:var(--song); font-size:17.5px; font-weight:700; }
.news-list li:hover .ttl{ color:var(--red); }
.news-list .len{ flex:none; font-size:12.5px; color:var(--sepia); }

/* ---------- 栏目页 ---------- */
.page-head{ padding:52px 0 26px; text-align:center; }
.page-kicker{ font-family:var(--song); font-weight:700; font-size:13px; letter-spacing:.4em; color:var(--red); }
.page-title{ margin-top:12px; font-family:var(--song); font-size:clamp(34px,5vw,46px); font-weight:900; letter-spacing:.12em; }
.page-desc{ margin:14px auto 0; max-width:600px; font-size:15px; color:var(--sepia); }

.filter-bar{ display:flex; justify-content:center; flex-wrap:wrap; gap:6px 22px; padding:24px 0 6px; font-family:var(--song); font-size:15px; }
.filter-bar a{ color:var(--sepia); padding:1px 4px; border-bottom:1px solid transparent; }
.filter-bar a:hover{ color:var(--red); }
.filter-bar a.on{ color:var(--red); font-weight:700; border-bottom-color:var(--red); }

.ad-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding:26px 0 70px; }
.book-ad{
  border:1px solid var(--ink);
  background:var(--paper-3);
  padding:20px 20px 16px;
  transition:transform .25s, box-shadow .25s;
}
.book-ad:hover{ transform:translateY(-3px); box-shadow:4px 4px 0 rgba(46,40,32,.18); }
.book-cover{
  height:150px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  color:var(--paper-3);
  border:1px solid rgba(46,40,32,.35);
}
.book-cover .cov-title{ font-family:var(--song); font-size:20px; font-weight:900; letter-spacing:.14em; }
.book-cover .cov-en{ font-size:10px; opacity:.75; letter-spacing:.18em; }
.book-ad .ad-body{ padding-top:16px; }
.book-ad h3{ font-family:var(--song); font-size:18px; font-weight:900; }
.book-ad .author{ margin-top:3px; font-size:13px; color:var(--sepia); }
.book-stars{ margin-top:8px; font-size:13px; color:var(--red); letter-spacing:4px; }
.book-stars .off{ color:#c9bd9c; }
.book-ad .note{ margin-top:10px; font-size:13.5px; color:#4a4030; line-height:1.85; }
.book-ad .price{
  margin-top:12px; padding-top:8px;
  border-top:1px dotted var(--line);
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:12.5px; color:var(--sepia);
}
.book-ad .price a{ font-family:var(--song); font-weight:700; color:var(--red); letter-spacing:.1em; }

/* ---------- 文章详情页 ---------- */
.article{ max-width:760px; margin:0 auto; padding:54px 30px 50px; }
.a-kicker{ font-family:var(--song); font-weight:700; font-size:13px; letter-spacing:.4em; color:var(--red); text-align:center; }
.article h1{
  margin-top:16px;
  font-family:var(--song);
  font-size:clamp(28px, 4.4vw, 38px);
  font-weight:900;
  line-height:1.5;
  text-align:center;
}
.a-sub{ margin-top:12px; text-align:center; font-size:16px; color:var(--sepia); }
.a-meta{
  margin:20px auto 0;
  display:flex; justify-content:center; flex-wrap:wrap; gap:6px 22px;
  font-size:13px; color:var(--sepia);
  padding:8px 0;
  border-top:3px double var(--ink);
  border-bottom:1px solid var(--ink);
}
.a-body{ padding-top:10px; }
.a-body p{ margin:20px 0; text-indent:2em; text-align:justify; }
.a-body h2{
  margin:40px 0 14px;
  font-family:var(--song); font-weight:900; font-size:21px; letter-spacing:.08em;
}
.a-body h2::before{ content:"■ "; color:var(--red); font-size:.8em; }
.a-body ul{ margin:20px 0 20px 1.8em; }
.a-body li{ margin:6px 0; }
.a-body li::marker{ color:var(--red); }
.pull-quote{
  margin:34px 0;
  padding:14px 22px;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  font-family:var(--song);
  font-size:18px;
  font-weight:700;
  line-height:2;
  text-align:center;
  color:var(--ink);
}
.pull-quote::before{ content:"「"; color:var(--red); }
.pull-quote::after{ content:"」"; color:var(--red); }
.a-end{
  margin-top:44px; text-align:center;
  font-family:var(--song); font-size:14px; color:var(--sepia); letter-spacing:.2em;
}
.a-end .seal{
  display:inline-block; margin-bottom:12px;
  width:52px; height:52px; line-height:24px;
  border:3px double var(--red); color:var(--red);
  font-size:15px; font-weight:900; padding:10px 4px;
  transform:rotate(-4deg);
}
.a-nav{ margin-top:36px; display:grid; grid-template-columns:1fr 1fr; border-top:3px double var(--ink); border-bottom:1px solid var(--ink); }
.a-nav a{ padding:18px 8px; font-family:var(--song); font-size:15.5px; font-weight:700; }
.a-nav a small{ display:block; font-family:var(--fang); font-weight:400; font-size:12px; color:var(--sepia); margin-bottom:4px; }
.a-nav a:hover{ color:var(--red); }
.a-nav .next{ text-align:right; }

.related{ max-width:760px; margin:0 auto; padding:34px 30px 80px; }
.related h3{
  font-family:var(--song); font-weight:900; font-size:18px; letter-spacing:.24em;
  padding-bottom:6px; border-bottom:3px double var(--ink); margin-bottom:8px;
}
.related ul{ list-style:none; }
.related li{ display:flex; justify-content:space-between; align-items:baseline; padding:11px 2px; border-bottom:1px dotted var(--line); font-family:var(--song); font-size:16px; font-weight:700; }
.related li span{ font-family:var(--fang); font-weight:400; font-size:12.5px; color:var(--sepia); }
.related li:hover{ color:var(--red); }

/* ---------- 日记页 · 剪报 ---------- */
.clippings{ max-width:780px; margin:0 auto; padding:44px 30px 80px; }
.clipping{
  background:var(--paper-2);
  border:1px solid rgba(46,40,32,.5);
  padding:24px 26px 20px;
  margin-bottom:30px;
  box-shadow:3px 3px 0 rgba(46,40,32,.14);
}
.clipping .c-meta{
  display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:4px 14px;
  font-size:13px; color:var(--sepia);
  padding-bottom:8px; border-bottom:1px dotted var(--line);
}
.clipping .c-meta .solar{ font-family:var(--song); font-weight:700; color:var(--red); letter-spacing:.14em; }
.clipping h3{ margin:14px 0 10px; font-family:var(--song); font-size:21px; font-weight:900; letter-spacing:.04em; }
.clipping p{ font-size:15px; color:#4a4030; }
.clipping .c-tags{ margin-top:12px; font-size:12.5px; color:var(--sepia); letter-spacing:.08em; }
.clipping .c-tags b{ color:var(--red); font-weight:400; }

/* ---------- 关于页 · 启事 ---------- */
.notice{ max-width:820px; margin:0 auto; padding:52px 30px 80px; }
.notice-top{ display:flex; gap:40px; align-items:flex-start; }
.avatar{
  flex:none; width:136px; height:136px;
  border:3px double var(--ink);
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%, rgba(255,255,255,.35), transparent 60%), linear-gradient(150deg,#5c4a2e,#3a2f1e);
  display:flex; align-items:center; justify-content:center;
  color:var(--paper-3); font-family:var(--song); font-size:36px; font-weight:900;
}
.notice-top h2{ font-family:var(--song); font-size:27px; font-weight:900; letter-spacing:.1em; }
.notice-top .role{ margin-top:6px; font-family:var(--song); font-size:14px; color:var(--red); letter-spacing:.14em; }
.notice-top p{ margin-top:14px; font-size:15.5px; color:#4a4030; }
.notice-block{ margin-top:46px; }
.notice-block h3{
  font-family:var(--song); font-weight:900; font-size:19px; letter-spacing:.3em;
  padding:4px 0; border-top:4px double var(--ink); border-bottom:1px solid var(--ink);
  margin-bottom:18px; text-align:center;
}
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  font-family:var(--song); font-size:14px;
  padding:3px 14px;
  border:1px solid var(--ink);
  background:var(--paper-3);
}
.chip:hover{ background:var(--ink); color:var(--paper); }
.notice-list{ list-style:none; }
.notice-list li{ display:flex; gap:22px; padding:11px 2px; border-bottom:1px dotted var(--line); font-size:15px; color:#4a4030; }
.notice-list .y{ flex:none; width:88px; font-family:var(--song); font-weight:700; color:var(--red); }
.motto{
  margin-top:50px; text-align:center;
  font-family:var(--song); font-size:22px; font-weight:900; letter-spacing:.16em;
}
.motto::before{ content:"「"; color:var(--red); }
.motto::after{ content:"」"; color:var(--red); }

/* ---------- 页脚 ---------- */
.colophon{
  margin-top:20px;
  border-top:4px double var(--ink);
  padding:26px 0 44px;
  text-align:center;
}
.colophon .c-name{ font-family:var(--song); font-size:21px; font-weight:900; letter-spacing:.3em; text-indent:.3em; }
.colophon .c-line{ margin-top:10px; font-size:13px; color:var(--sepia); letter-spacing:.14em; }
.colophon .c-demo{ margin-top:8px; font-size:12px; color:var(--sepia); opacity:.85; }
.colophon .c-stamp{
  display:inline-block; margin-top:16px;
  border:2px solid var(--red); color:var(--red);
  font-family:var(--song); font-weight:700; font-size:12px;
  padding:2px 12px; letter-spacing:.24em; transform:rotate(-2deg);
}

/* ---------- 滚动淡入 ---------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .8s ease, transform .8s ease; }
.reveal.visible{ opacity:1; transform:none; }

/* ---------- 响应式 ---------- */
@media (max-width:860px){
  .lead{ grid-template-columns:1fr; }
  .col4{ grid-template-columns:repeat(2,1fr); }
  .col4 .cell{ border-bottom:1px dashed var(--line); }
  .ad-grid{ grid-template-columns:1fr; }
  .notice-top{ flex-direction:column; align-items:center; text-align:center; }
  .news-list li{ flex-wrap:wrap; gap:4px 14px; }
  .news-list .date, .news-list .col{ width:auto; }
  .mast-top{ display:none; }
}