/* ============================================================
   RQ正撰 · 前台
   纪实（左）日光下 ／ 故事（右）从暖到深
   ============================================================ */
:root{
  --day1:#FBFAF7;   /* 有客有 AI */
  --day2:#F4EFE3;   /* RQ 有话说 */
  --dusk1:#F6E9D5;  /* 哇嘎里贡 顶 */
  --dusk2:#E2C69C;  /* 哇嘎里贡 底 */
  --night:#161E29;  /* 吕小小啊 底（不是纯黑） */

  --ink:#1F1D1A;
  --ink-2:#55504A;
  --ink-3:#8C8579;
  --line:#E7E2D8;
  --brick:#8E2F26;

  /* 中文字体：**全站一套**。
     免费优先（思源黑体 / Noto Sans CJK 都是 SIL OFL，可商用），后面才是各系统自带的
     微软雅黑（Windows）、苹方（Mac/iOS）—— 字体名写在这里只是让浏览器用**访客本机**
     已有的那份，不涉及分发；本机没有思源黑体就退到雅黑/苹方，观感仍是黑体。
     想所有系统长得一模一样，得自托管思源黑体子集（首屏多下载 1–3MB），那是另一条路。 */
  --font-sans:"Source Han Sans SC","Noto Sans CJK SC","HarmonyOS Sans SC","MiSans",
              "Microsoft YaHei","PingFang SC","Hiragino Sans GB","WenQuanYi Micro Hei",sans-serif;
  /* 四格用衬线（宋体）：跟全站黑体拉开对比，四块才有「版面」的意思 */
  --font-serif:"Songti SC","STSong","Source Han Serif SC","Noto Serif CJK SC",Georgia,serif;

  /* 品牌色：从 LOGO 里采出来的（深蓝是主色，橙是那个小方块/笔画） */
  --brand:#003078;
  /* 橙色是 LOGO 橙色像素的均值（#EE6F0E）。原来那档 #F06000 偏暗一点；
     这档在标题字号下对白底 3.04:1，刚好过 AA 大字线的 3:1 —— 再亮（#FE7B06）就只有 2.6:1。 */
  --brand-2:#EE6F0E;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:#fff;color:var(--ink);
  font-family:var(--font-sans);
  font-size:16px;line-height:1.9;
}
a{color:inherit}
img{display:block}

.shell{min-height:100vh;display:flex;flex-direction:column}
main.home{flex:1}

/* ---------------- 页头 ---------------- */
/* 三列网格：logo 占左列，导航占中间那列。
   用「1fr auto 1fr」是为了让导航按**整行**居中 —— 右列留空但等宽，
   所以不管 logo 多宽，导航都在正中间，不是「剩下的空间里居中」。 */
.masthead{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
  padding:22px 40px 18px;
}
.masthead img{border-radius:14px}

.masthead .brand{grid-column:1;justify-self:start;
  display:flex;align-items:center;gap:16px;text-decoration:none;color:inherit}

.masthead .domain{
  font-size:26px;font-weight:700;letter-spacing:-.005em;
  font-family:var(--font-sans);
  /* 用 LOGO 里的深蓝 —— 原来跟正文一样是近黑色，等于没跟上品牌 */
  color:var(--brand);
}
/* 「RQ」两个字跟 LOGO 的橙色同色（app.brand_html 套的 span） */
.masthead .domain .brand-o{color:var(--brand-2)}

/* 导航：**刊物式**—— 不加底、不加框，靠「项与项之间一根竖细线 + 当前项底下
   一道品牌橙的线」立住。原来是一排灰底胶囊（像工具栏），不带刊物气。
   橙色取的是 LOGO 那支橙（--brand-2），跟刊头的 RQ 呼应。 */
.site-nav{grid-column:2;justify-self:center;
  display:flex;align-items:center;flex-wrap:wrap;justify-content:center;}

.site-nav a{
  position:relative;
  font-family:var(--font-sans);font-size:15px;color:var(--ink-2);
  letter-spacing:.06em;text-decoration:none;
  padding:9px 20px;white-space:nowrap;
  transition:color .18s ease;
}
/* 项与项之间的竖细线（每项的左边一根，第一项不画） */
.site-nav a + a::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:2px;height:16px;border-radius:1px;
}
/* 三条分隔线：**绿、红、黄**（本人指定）—— 取四格自己的那三套色（墨绿 / 砖红 / 赭黄），
   刊头这一排就跟下面四块是同一套颜色了。（第 5 项以后就回到品牌橙） */
.site-nav a:nth-child(2)::before{background:#1E4A3C}   /* 绿 */
.site-nav a:nth-child(3)::before{background:#9E3B2E}   /* 红 */
.site-nav a:nth-child(4)::before{background:#E8C86A}   /* 黄 */
.site-nav a:nth-child(n+5)::before{background:var(--brand-2)}
/* 悬停 / 当前所在：一道品牌橙的线从中间往两边划开 */
.site-nav a::after{
  content:"";position:absolute;left:20px;right:20px;bottom:4px;height:2px;border-radius:2px;
  background:var(--brand-2);transform:scaleX(0);transform-origin:center;
  transition:transform .22s ease;
}

/* 悬停要看得出来，但**不用色块**：字转品牌深蓝 + 底下那道橙线划出来。
   当前所在的那一项（.on）跟悬停同一个样子 —— 进内页也知道自己在哪。 */
.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a.on{color:var(--brand);outline:none}
.site-nav a.on{font-weight:600}
.site-nav a:hover::after,
.site-nav a:focus-visible::after,
.site-nav a.on::after{transform:scaleX(1)}

/* ---------------- 刊首语 ---------------- */
.foreword{
  position:relative;
  margin:0;
  padding:34px 40px 34px 68px;
  background:#FBFAF7;
  border-bottom:1px solid #E7E0D2;
  /* 题记的排法：左对齐、和刊头左边线对齐、行距放松；不用居中大字 */
  font-size:19px;
  line-height:2;
  letter-spacing:.01em;
  color:var(--ink-2);
  max-width:60em;
}
/* 左边一道竖线，把这句话「钉」在版面上，不再是飘在中间的一行字 */
.foreword::before{
  content:"";
  position:absolute;left:40px;top:34px;bottom:34px;
  width:3px;border-radius:2px;
  background:var(--brick);
}

/* ---------------- 首页网格 ---------------- */
main.home-grid{display:flex;flex-direction:column}
/* minmax(0,1fr) 而不是 1fr：1fr 的最小尺寸是 min-content，而格子里的引言是
   nowrap —— 长引言会把**右栏自己撑宽**，于是两栏不等宽、整页横向溢出
  （实测：1280 视口下文档宽 1706，右栏 980 / 左栏 726）。minmax(0,1fr) 才真等宽。 */
.home-grid .grid{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.home-grid .grid.one-col{grid-template-columns:minmax(0,1fr)}
.col{display:flex;flex-direction:column;min-height:0;min-width:0}

.cell{
  flex:1;min-height:320px;
  display:flex;flex-direction:column;justify-content:flex-start;
  text-decoration:none;position:relative;overflow:hidden;
  padding:40px 40px 30px;
  color:var(--c-ink,#1F1D1A);
  background:var(--c-bg,#FBFAF7);
  font-family:var(--font-serif);
}
/* 背景图单独一层，贴**外侧**边：右栏贴右，左栏贴左（.mirror）。
   关键一：渐隐层的**尺寸就是图的尺寸**（高度撑满 + 与图一致的宽高比），
          这样 mask 的 0% 永远正好落在图的边缘 —— 按格子宽度的百分比写
          是对不上的（图的边缘位置会随格子宽高比变）。
   关键二：让**图自己**向外渐隐，而不是拿主题色去盖它。色块盖会在交界处
          留一条明显的边，越盖越显眼。
   关键三：左栏用 transform:scaleX(-1) 把图**镜像**过来（人就朝中间看了）。
          镜像会连 mask 一起翻 —— 所以左栏不用另写一套 mask 方向：
          同一段「向左渐隐」翻过来正好变成「向右渐隐」。 */
.cellbg{
  position:absolute;top:0;bottom:0;right:0;
  height:100%;width:auto;aspect-ratio:1536 / 1024;
  /* cover 而不是 100% 100%：以后换非 3:2 的图也不会被拉伸 */
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  pointer-events:none;z-index:0;
  -webkit-mask-image:linear-gradient(to right,
      transparent 0%, rgba(0,0,0,.30) 26%, rgba(0,0,0,.78) 52%, #000 78%);
  mask-image:linear-gradient(to right,
      transparent 0%, rgba(0,0,0,.30) 26%, rgba(0,0,0,.78) 52%, #000 78%);
}

/* 左栏（.mirror）：图贴左 + 水平镜像（人脸朝右），文字**靠右**（也就是靠中间） */
.cell.mirror .cellbg{right:auto;left:0;transform:scaleX(-1)}
.cell.mirror{align-items:flex-end;text-align:right}
.cell.mirror .pill{align-self:flex-end}
.cell.mirror .latest li{padding-left:0;padding-right:14px}
.cell.mirror .latest li::before{left:auto;right:2px}

/* 整格的可点层：盖满格子，去栏目页。
   格子里的文章标题自己是一条链接，z-index 更高 → 点标题直接进**文章页**。
   为什么不是「<a> 包住整格」：HTML 不允许 <a> 套 <a>，那样标题只能跟着跳栏目页。
   为什么下面几层要 pointer-events:none：它们盖在 .cellhit 上面，
   不写的话「标题那一行的左右空白」「胶囊」「副标题」都会变成点不动的死区；
   关掉指针事件，点击就会穿到下面的 .cellhit 上。 */
.cell .cellhit{position:absolute;inset:0;z-index:1}
.cell > *:not(.cellbg):not(.cellhit){position:relative;z-index:2}
.cell .pill,.cell .sub,.cell h2,.cell .latest{pointer-events:none}
.cell h2 a,.cell .intro,.cell .latest li a{pointer-events:auto;color:inherit;text-decoration:none}

/* 胶囊标签（可带图标） */
.pill{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-family:var(--font-sans);
  font-size:12.5px;line-height:1;letter-spacing:.04em;
  padding:8px 14px;border-radius:999px;margin:0 0 20px;
  background:var(--c-pill-bg,rgba(31,29,26,.07));
  color:var(--c-pill-fg,#55504A);
}
.pill .ico{width:17px;height:17px;flex:none;stroke-width:1.75;opacity:.9}

/* 四格的字**一律不描边**（本人要求去掉）。原来 h2/副标题/列表/引言各带一层
   同色光晕兜反差；现在靠底色带与图自己的留白，字是平的。 */

.cell h2{
  font-size:32px;line-height:1.25;margin:0 0 12px;
  letter-spacing:.01em;font-weight:700;
  color:var(--c-ink,#1F1D1A);transition:opacity .18s;
}
.cell .sub{
  /* 字号跟引言一样大（本人要求：四格的副标题不要比引言大一档） */
  font-size:15px;line-height:1.7;margin:0 0 12px;
  color:var(--c-sub,#55504A);
}
/* 只有**引言**带底色带（副标题不带：图挪到外侧、字靠中间之后，副标题基本落不到图上）。
   带子比原来透（.55~.66），因为文字同样往中间挪了 —— 压在图上的是引言的长尾。
   写法上的两个坑（都踩过）：
   ① `align-self` 必须给：格子是 flex 列，默认把子元素**拉满整格宽**，
      不写就是整格一条横贯的色块（实测像一块脏印子）；
   ② **不加 backdrop-filter**：毛玻璃在乱麻那样的图上把线条糊成灰雾，比不加更难看。 */
.cell .intro{
  align-self:flex-start;
  max-width:calc(100% + 10px);
  background:var(--c-band,rgba(255,255,255,.55));
  border-radius:7px;
  padding:2px 10px;margin-left:-10px;margin-bottom:0;
  font-size:15px;line-height:1.8;
  /* 带子比 v56 更透（本人要求「透明度再多一些」），用字重补一点可读性 */
  font-weight:500;
  color:var(--c-intro,#8C8579);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* 左栏（.mirror）：带子跟着字一起靠右 */
.cell.mirror .intro{align-self:flex-end;margin-left:0;margin-right:-10px}
/* 悬停动效：**整格推近 + 栏目名划线**（两个都做，都很轻）。
   图推近：只动 .cellbg 的 transform，格子尺寸不变 → 不会引起周围重排。
   左栏的图带 scaleX(-1) 镜像，动效必须**连着镜像一起写**，否则一悬停图就翻回去。 */
.cellbg{transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.cell:hover .cellbg{transform:scale(1.032)}
.cell.mirror:hover .cellbg{transform:scaleX(-1) scale(1.032)}
/* 栏目名底下划一条线（左栏从右往左划，跟文字靠右一致） */
.cell h2 a{position:relative}
.cell h2 a::after{
  content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;border-radius:2px;
  background:currentColor;opacity:.5;
  transform:scaleX(0);transform-origin:left;
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.cell.mirror h2 a::after{transform-origin:right}
.cell:hover h2 a::after,.cell:focus-within h2 a::after{transform:scaleX(1)}
.cell:hover h2{opacity:.82}
@media (prefers-reduced-motion:reduce){
  .cellbg,.cell h2 a::after{transition:none}
}

/* 最新两篇：钉在格子底部 */
.cell .latest{
  list-style:none;margin:auto 0 0;padding:14px 0 0;
  border-top:1px solid var(--c-line,rgba(31,29,26,.10));
  font-family:var(--font-sans);
}
.cell .latest li{
  /* 本人要求：首页那串（置顶的）标题再小一档（原来 13.5） */
  font-size:12.5px;line-height:1.6;color:var(--c-intro,#8C8579);
  padding-left:14px;position:relative;margin-top:6px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cell .latest li:first-child{margin-top:0}
.cell .latest li::before{
  content:"";position:absolute;left:2px;top:.62em;
  width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.5;
}

/* 两栏之间的分隔 */
.col-doc{border-right:1px solid var(--line)}
.col-doc .cell:nth-child(2){border-top:1px solid var(--line)}

/* ---------------- 列表 ---------------- */
.postlist{list-style:none;margin:0;padding:40px 38px}
.postlist li{padding:12px 0;border-top:1px solid var(--line)}
.postlist li:first-child{border-top:0}
.postlist a{text-decoration:none;font-size:19px}
.postlist a:hover{color:var(--brick)}

/* ---------------- 面包屑 ---------------- */
.crumb{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:18px 40px;border-bottom:1px solid var(--line);
  font-family:var(--font-sans);
  font-size:13px;color:var(--ink-3);background:#FCFBF8;
}
.crumb a{color:var(--ink-3);text-decoration:none}
.crumb a:hover{color:var(--brick)}
.crumb .sep{color:#CFC7B8}
.crumb .cur{color:var(--ink-2)}

/* ---------------- 阅读器：左列表 右正文 ---------------- */
.reader{
  flex:1;display:grid;grid-template-columns:250px 1fr;
  min-height:calc(100vh - 150px);   /* 让分隔线通到页底 */
}
.rnav{
  padding:26px 16px 60px 40px;
  position:sticky;top:0;align-self:start;max-height:100vh;overflow-y:auto;
}
.rgrp{
  font-family:var(--font-sans);
  font-size:11px;letter-spacing:.2em;color:var(--ink-3);
  margin:0 0 10px;padding-left:10px;
}
.rgrp + .rlist{margin-bottom:24px}
.rlist{list-style:none;margin:0;padding:0}
.rlist li{margin:1px 0}
.rlist a{
  display:block;padding:7px 10px;border-radius:7px;text-decoration:none;
  font-size:14px;line-height:1.6;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rlist a:hover{background:#F2EFE8;color:var(--ink)}
.rlist li.on a{background:var(--day2);color:var(--ink);font-weight:600}
.rnone{
  font-family:var(--font-sans);font-size:13px;
  color:var(--ink-3);padding-left:10px;
}

.rmain{padding:20px 40px 90px;min-width:0;border-left:1px solid var(--line)}
.rmain .post{max-width:760px;margin:0;padding:0}

/* ---------------- 文章 ---------------- */
.post-head{padding:0 0 22px;border-bottom:1px solid var(--line);margin-bottom:30px}
.post-head h1{font-size:32px;line-height:1.35;margin:0 0 10px;letter-spacing:.02em}
.post-head .sub{margin:0 0 12px;color:var(--ink-2);font-size:17px}
.post-head .meta{margin:0;font-family:var(--font-sans);font-size:12.5px;color:var(--ink-3)}

.post-body{font-size:16.5px;line-height:2.05;color:var(--ink)}
.post-body p{margin:0 0 1.35em}
.post-body h2{font-size:24px;margin:1.8em 0 .7em;letter-spacing:.02em}
.post-body h3{font-size:19px;margin:1.6em 0 .6em}
.post-body blockquote{margin:1.6em 0;padding:2px 0 2px 20px;border-left:3px solid var(--rule);color:var(--ink-2)}
.post-body blockquote p{margin:0 0 .6em}
.post-body ul,.post-body ol{margin:0 0 1.35em;padding-left:1.4em}
.post-body li{margin-bottom:.45em}
.post-body img{max-width:100%;height:auto;border-radius:4px;margin:1.6em 0}
.post-body hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
.post-body a{color:var(--brick)}
.post-body pre{background:#F6F4EF;border-radius:6px;padding:14px 16px;overflow-x:auto;font-size:14px}
.post-body code{background:#F6F4EF;border-radius:4px;padding:1px 5px;font-size:.92em}
.post-body pre code{background:none;padding:0}
.post-body table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:15px}
.post-body th,.post-body td{border:1px solid var(--line);padding:8px 12px;text-align:left}
.post-body ruby rt{font-size:.55em;color:var(--ink-3)}

.empty{color:var(--ink-3);font-family:var(--font-sans);font-size:14px;
  padding:60px 0;text-align:center}

/* ---------------- 页脚：刊首语 + 备案号，一行 ---------------- */
.site-foot{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:8px 28px;flex-wrap:wrap;
  padding:20px 40px;
}
.foot-note{
  margin:0;flex:1 1 auto;min-width:0;
  font-size:14.5px;line-height:1.7;color:var(--ink-2);
}
.foot-note:empty{display:none}
.foot-icp{
  flex:none;
  font-family:var(--font-sans);font-size:12.5px;color:var(--ink-3);
  text-decoration:none;white-space:nowrap;
}
.foot-icp:hover{color:#00417D}


@media (max-width:860px){
  /* ---- 刊头：竖排居中（一行放不下 logo+导航+印签） ---- */
  .masthead{
    grid-template-columns:1fr;
    justify-items:center;
    gap:10px;
    padding:16px 18px 13px;
  }
  .masthead .brand{grid-column:1;justify-self:center;gap:11px}
  .masthead img{width:44px !important;height:44px !important}
  .masthead .domain{font-size:20px}
  .sitename{display:none}
  /* 横向滑动会把最后一个词切一半，看着像坏了；改成换行，全都看得见 */
  .site-nav{
    grid-column:1;justify-self:center;width:100%;
    flex-wrap:wrap;justify-content:center;gap:6px;
  }
  .site-nav a{padding:7px 13px;font-size:14px}
  .site-nav a::after{left:13px;right:13px}

  /* ---- 四格：一列；每格给足高度，文字才压得住图 ---- */
  .home-grid .grid{grid-template-columns:1fr}
  .col-doc{border-right:0}
  .col-doc .cell:nth-child(2){border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .cell{min-height:250px;padding:26px 22px 24px}
  .cellbg{
    /* 手机上格子窄，图会更"满"，把渐隐再往右推一点，左侧文字区留干净 */
    -webkit-mask-image:linear-gradient(to right,
        transparent 0%, rgba(0,0,0,.14) 38%, rgba(0,0,0,.62) 66%, #000 90%);
    mask-image:linear-gradient(to right,
        transparent 0%, rgba(0,0,0,.14) 38%, rgba(0,0,0,.62) 66%, #000 90%);
  }
  .pill{font-size:12px;padding:7px 12px;margin-bottom:13px}
  .pill .ico{width:16px;height:16px}
  .cell h2{font-size:26px;margin-bottom:9px}
  .cell .sub{font-size:14.5px;margin-bottom:9px}
  .cell .intro{font-size:14.5px;white-space:normal;overflow:visible;text-overflow:clip}
  .cell .latest{margin-top:16px}

  /* ---- 内页 ---- */
  .entries{padding:16px 20px 50px}
  .crumb{padding:14px 20px;font-size:12.5px}
  .reader{grid-template-columns:1fr;min-height:0;align-content:start}
  .rnav{position:static;max-height:none;padding:16px 20px 18px;
    border-bottom:1px solid var(--line)}
  .rmain{border-left:0;padding:12px 20px 60px}
  .post-head{padding:0 0 16px;margin-bottom:20px}
  .post-head h1{font-size:24px}
  .post-body{font-size:16px;line-height:1.95}

  /* ---- 页脚：窄屏放不下一行 ---- */
  .site-foot{padding:16px 20px;flex-direction:column;align-items:flex-start;gap:8px}
  .foot-note{font-size:13.5px}
}


/* ---------------- 文章页 ---------------- */
.post{max-width:760px;margin:0 auto;padding:0 40px 80px}
.post-head{padding:2px 0 22px;border-bottom:1px solid var(--line);margin-bottom:30px}
.post-head .tag{margin:0 0 14px;font-family:var(--font-sans);font-size:11px;
  letter-spacing:.2em;color:var(--ink-3)}
.post-head .tag a{color:var(--ink-3);text-decoration:none}
.post-head .tag a:hover{color:var(--brick)}
.post-head h1{font-size:34px;line-height:1.35;margin:0 0 10px;letter-spacing:.02em}
.post-head .sub{margin:0 0 12px;color:var(--ink-2);font-size:17px}
.post-head .meta{margin:0;font-family:var(--font-sans);font-size:12.5px;color:var(--ink-3)}

.post-body{font-size:16.5px;line-height:2.05;color:var(--ink)}
.post-body p{margin:0 0 1.35em}
.post-body h2{font-size:24px;margin:1.8em 0 .7em;letter-spacing:.02em}
.post-body h3{font-size:19px;margin:1.6em 0 .6em}
.post-body blockquote{margin:1.6em 0;padding:2px 0 2px 20px;border-left:3px solid var(--rule);
  color:var(--ink-2)}
.post-body blockquote p{margin:0 0 .6em}
.post-body ul,.post-body ol{margin:0 0 1.35em;padding-left:1.4em}
.post-body li{margin-bottom:.45em}
.post-body img{max-width:100%;height:auto;border-radius:4px;margin:1.6em 0}
.post-body hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
.post-body a{color:var(--brick)}
.post-body pre{background:#F6F4EF;border-radius:6px;padding:14px 16px;overflow-x:auto;font-size:14px}
.post-body code{background:#F6F4EF;border-radius:4px;padding:1px 5px;font-size:.92em}
.post-body pre code{background:none;padding:0}
.post-body table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:15px}
.post-body th,.post-body td{border:1px solid var(--line);padding:8px 12px;text-align:left}
.post-body ruby rt{font-size:.55em;color:var(--ink-3)}

/* ---------------- 封存页 ---------------- */
.sealed{min-height:52vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:60px 24px}
.sealed .seal{width:92px;height:92px;border-radius:50%;margin-bottom:26px;
  background:radial-gradient(circle at 34% 30%,#B04136 0%,#8E2F26 52%,#6C221B 100%);
  box-shadow:0 8px 22px rgba(110,34,27,.26), inset 0 -3px 10px rgba(0,0,0,.22);
  display:flex;align-items:center;justify-content:center;color:#F6E7E2;font-size:27px;
  letter-spacing:.1em;text-indent:.1em}
.sealed .s1{font-size:19px;margin:0 0 8px}
.sealed .s2{font-family:var(--font-sans);font-size:13px;color:var(--ink-3);
  letter-spacing:.08em;margin:0}

/* ---------------- 刊头右上站名 ---------------- */
.sitename{
  grid-column:3;justify-self:end;
  font-family:var(--font-sans);
  font-size:14px;font-weight:600;letter-spacing:.22em;
  color:var(--brand);white-space:nowrap;
  /* 加个细框，让右侧也有分量，和左边 LOGO 呼应 */
  border:1px solid var(--brand);
  border-radius:6px;
  padding:6px 10px 6px 12px;
  line-height:1;
  /* 字距把最后一个字也推开了，补回来让框内左右留白均匀 */
  text-indent:.22em;
}


/* ---------------- 正文里的视频 / 音频 ----------------
   靠 CSS 限制宽度，**不靠行内 style** —— 净化器会把 style 剥掉，
   于是大视频会横着撑破正文栏（这就是「传上去了但看着坏了」的一种）。 */
.post-body video,.post-body audio{
  max-width:100%;height:auto;border-radius:4px;margin:1.6em 0;display:block;
}