/* ==========================================================================
   锦湖文苑 · 网络版
   色：新闻纸 / 墨 / 锦湖紫（社徽外圈）/ 朱砂（仅用于印章与朱批）/ 湖青 / 秋金
   字：马善政毛笔楷（报头、版名、朱批）· 思源宋体（标题与正文）· Old Standard（期号数字）
   ========================================================================== */

@property --r { syntax: '<length>'; inherits: true; initial-value: 0px; }

:root {
  color-scheme: light;
  --paper: #f0eee7;
  --paper-deep: #e6e3d9;
  --paper-hi: #f8f7f3;
  --ink: #1c1d24;
  --ink-2: #44454e;
  --ink-3: #606069;
  --rule: #1c1d24;
  --hair: rgba(28, 29, 36, .2);
  --hair-2: rgba(28, 29, 36, .08);
  --brand: #5e5fc9;
  --brand-ink: #4546aa;
  --brand-soft: rgba(94, 95, 201, .12);
  --seal: #c0392b;
  --seal-soft: rgba(192, 57, 43, .1);
  --lake: #2e9c9f;   --lake-ink: #1b7679;
  --grass: #5c9a36;  --grass-ink: #3d7520;
  --sun: #d9733a;    --sun-ink: #ad5019;
  --gold: #d9a21b;   --gold-ink: #8c6405;
  --mute: #8b8a86;   --mute-ink: #66655f;
  --on-ink: #f0eee7;
  --grid-line: rgba(192, 57, 43, .55);
  --grid-soft: rgba(192, 57, 43, .16);
  --print-dim: 1;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .1 0 0 0 0 .06 0 0 0 .6 -.24'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --shadow: 0 1px 2px rgba(28, 29, 36, .06), 0 14px 34px -18px rgba(28, 29, 36, .35);
  --shadow-pop: 0 2px 6px rgba(28, 29, 36, .1), 0 28px 64px -22px rgba(28, 29, 36, .5);

  --f-brush: "Ma Shan Zheng", "STKaiti", "KaiTi", "楷体", serif;
  --f-serif: "Noto Serif SC", "Source Han Serif SC", "Source Han Serif CN", "Songti SC", "STSong", "SimSun", serif;
  --f-num: "Old Standard TT", "Noto Serif SC", Georgia, serif;
  --f-ui: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Hiragino Sans GB", sans-serif;

  --wrap: 1240px;
  --gut: clamp(16px, 3.2vw, 36px);
  --col: clamp(14px, 1.7vw, 24px);
  --bar-h: 54px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --read-fs: 18.5px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #15161b;
    --paper-deep: #1c1d24;
    --paper-hi: #202129;
    --ink: #e9e6dd;
    --ink-2: #c0bdb4;
    --ink-3: #95938d;
    --rule: #e9e6dd;
    --hair: rgba(233, 230, 221, .2);
    --hair-2: rgba(233, 230, 221, .08);
    --brand: #9192f3;
    --brand-ink: #aaabf8;
    --brand-soft: rgba(145, 146, 243, .15);
    --seal: #e2604f;
    --seal-soft: rgba(226, 96, 79, .14);
    --lake: #4cc0c2;   --lake-ink: #78d6d7;
    --grass: #88c45e;  --grass-ink: #a4d77f;
    --sun: #ee915c;    --sun-ink: #f5ad80;
    --gold: #e8bb45;   --gold-ink: #f1cd6c;
    --mute: #8f8d87;   --mute-ink: #aaa8a1;
    --on-ink: #15161b;
    --grid-line: rgba(226, 96, 79, .45);
    --grid-soft: rgba(226, 96, 79, .14);
    --print-dim: .84;
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 .95 0 0 0 .35 -.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 14px 34px -18px rgba(0, 0, 0, .8);
    --shadow-pop: 0 2px 6px rgba(0, 0, 0, .4), 0 28px 64px -22px rgba(0, 0, 0, .9);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #15161b;
  --paper-deep: #1c1d24;
  --paper-hi: #202129;
  --ink: #e9e6dd;
  --ink-2: #c0bdb4;
  --ink-3: #95938d;
  --rule: #e9e6dd;
  --hair: rgba(233, 230, 221, .2);
  --hair-2: rgba(233, 230, 221, .08);
  --brand: #9192f3;
  --brand-ink: #aaabf8;
  --brand-soft: rgba(145, 146, 243, .15);
  --seal: #e2604f;
  --seal-soft: rgba(226, 96, 79, .14);
  --lake: #4cc0c2;   --lake-ink: #78d6d7;
  --grass: #88c45e;  --grass-ink: #a4d77f;
  --sun: #ee915c;    --sun-ink: #f5ad80;
  --gold: #e8bb45;   --gold-ink: #f1cd6c;
  --mute: #8f8d87;   --mute-ink: #aaa8a1;
  --on-ink: #15161b;
  --grid-line: rgba(226, 96, 79, .45);
  --grid-soft: rgba(226, 96, 79, .14);
  --print-dim: .84;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 .95 0 0 0 .35 -.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 14px 34px -18px rgba(0, 0, 0, .8);
  --shadow-pop: 0 2px 6px rgba(0, 0, 0, .4), 0 28px 64px -22px rgba(0, 0, 0, .9);
}

/* ---------- 基础 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h) + 20px); }
body {
  margin: 0;
  background: var(--grain), var(--paper);
  color: var(--ink);
  font: 400 17px/1.85 var(--f-serif);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .4s, color .4s;
}
img, svg, canvas { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--brand-soft); color: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 2px; }
[hidden] { display: none !important; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.num { font-family: var(--f-num); font-variant-numeric: lining-nums tabular-nums; }
.ui { font-family: var(--f-ui); }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 300;
  background: var(--ink); color: var(--on-ink); padding: 8px 14px; font: 600 14px var(--f-ui);
}
.skip:focus { top: 12px; }

/* ---------- 报头 ---------- */
.site-head { display: contents; }
.masthead { padding-top: clamp(10px, 1.6vw, 20px); }
body:not(.is-front) .masthead { display: none; }
.mh-top {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font: 500 12px/1.4 var(--f-ui); letter-spacing: .14em; color: var(--ink-3);
  padding-bottom: 8px; border-bottom: 1px solid var(--hair);
}
.mh {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 330px);
  gap: clamp(16px, 3vw, 44px); align-items: stretch;
  padding-block: clamp(12px, 2vw, 22px);
}
.mh-title { display: flex; align-items: center; gap: clamp(10px, 1.8vw, 22px); position: relative; min-width: 0; }
.mh-logo {
  width: clamp(64px, 9.5vw, 124px); height: auto; aspect-ratio: 1; border-radius: 50%; flex: none;
  box-shadow: 0 0 0 1px var(--hair), var(--shadow);
  animation: logo-in .9s var(--ease) both;
}
.mh-name {
  font: 400 clamp(78px, 13.5vw, 172px)/.86 var(--f-brush);
  letter-spacing: -.04em; display: flex; margin: 0; white-space: nowrap;
}
.mh-name span {
  display: inline-block;
  -webkit-mask-image: linear-gradient(172deg, #000 44%, transparent 56%);
  mask-image: linear-gradient(172deg, #000 44%, transparent 56%);
  -webkit-mask-size: 100% 320%; mask-size: 100% 320%;
  -webkit-mask-position: 0 0; mask-position: 0 0;
  animation: brush 1.15s var(--ease) both;
}
.mh-name span + span { animation-delay: .38s; }
.mh-vert {
  writing-mode: vertical-rl; text-orientation: upright;
  font: 700 clamp(12px, 1.3vw, 16px)/1.25 var(--f-serif); letter-spacing: .32em;
  border-inline: 1px solid var(--rule); padding: 8px 5px; align-self: center; white-space: nowrap;
}
.mh-seal { width: clamp(40px, 5vw, 64px); color: var(--seal); align-self: flex-start; margin-top: 4%; transform: rotate(-6deg); animation: stamp .55s 1.05s cubic-bezier(.3, 1.5, .5, 1) both; flex: none; }
.mh-en {
  position: absolute; left: calc(clamp(64px, 9.5vw, 124px) + clamp(10px, 1.8vw, 22px)); bottom: -4px;
  font: italic 400 clamp(11px, 1.05vw, 14px)/1.2 var(--f-num); letter-spacing: .16em; color: var(--ink-3); white-space: nowrap;
}
.twinkle { position: absolute; width: 16px; height: 16px; color: var(--gold); animation: twinkle 3.6s ease-in-out infinite; pointer-events: none; }
.twinkle.b { width: 10px; height: 10px; color: var(--lake); animation-delay: 1.3s; }
.twinkle.c { width: 12px; height: 12px; animation-delay: 2.1s; }

.ear {
  border: 1px solid var(--rule); padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 4px;
  position: relative; background: var(--paper);
}
.ear::before { content: ""; position: absolute; inset: 3px; border: 1px solid var(--hair); pointer-events: none; }
.ear-k { font: 700 12px/1 var(--f-ui); letter-spacing: .2em; color: var(--ink-3); }
.ear-t { font: 700 16px/1.4 var(--f-serif); margin-top: 6px; }
.ear-n { display: flex; align-items: baseline; gap: 6px; line-height: 1; margin: 2px 0 4px; }
.ear-n .num { font-size: clamp(54px, 6vw, 76px); font-weight: 700; letter-spacing: -.02em; }
.ear-n span:last-child { font: 700 20px var(--f-serif); }
.ear-s { font: 13px/1.5 var(--f-ui); color: var(--ink-2); }
.ear-btn {
  margin-top: 8px; align-self: stretch; text-align: left; cursor: pointer;
  background: var(--ink); color: var(--on-ink); border: 0; padding: 9px 12px;
  font: 600 14px/1.3 var(--f-ui); display: flex; justify-content: space-between; align-items: center; gap: 8px;
  transition: background .2s;
}
.ear-btn:hover { background: var(--brand-ink); }
.ear-btn .ico { width: 16px; height: 16px; flex: none; }

.mh-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0;
  font: 500 13.5px/1.5 var(--f-ui); color: var(--ink-2);
  padding: 13px 0 7px; border-bottom: 1px solid var(--rule); position: relative;
}
.mh-line::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--rule); }
.mh-line::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--rule); }
.mh-line > span { padding-inline: 12px; border-left: 1px solid var(--hair); white-space: nowrap; }
.mh-line > span:first-child { padding-left: 0; border-left: 0; }
.mh-line b { font-weight: 700; color: var(--ink); }
.mh-line .yi { margin-left: auto; border-left: 0; color: var(--ink-3); }
.mh-line .yi em { font-style: normal; font: 400 15px var(--f-brush); color: var(--seal); margin-right: 4px; }

@keyframes brush { from { -webkit-mask-position: 0 100%; mask-position: 0 100%; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes stamp { 0% { transform: scale(2.4) rotate(-22deg); opacity: 0; } 55% { opacity: 1; } 100% { transform: scale(1) rotate(-6deg); opacity: 1; } }
@keyframes logo-in { from { transform: rotate(-120deg) scale(.6); opacity: 0; } }
@keyframes twinkle { 0%, 100% { transform: scale(.55) rotate(0); opacity: .4; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }

/* ---------- 导航条 ---------- */
.bar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  -webkit-backdrop-filter: saturate(1.2) blur(12px); backdrop-filter: saturate(1.2) blur(12px);
  border-bottom: 1px solid var(--rule);
  view-transition-name: bar;
}
.bar-in { display: flex; align-items: center; gap: 6px; height: var(--bar-h); }
.bar-brand {
  display: flex; align-items: center; gap: 8px; flex: none; overflow: hidden;
  width: 0; opacity: 0; transition: width .4s var(--ease), opacity .3s, margin .4s var(--ease);
  font: 400 27px/1 var(--f-brush); white-space: nowrap;
}
.bar-brand img { width: 30px; height: 30px; border-radius: 50%; }
.bar.condensed .bar-brand { width: 96px; opacity: 1; margin-right: 6px; }
.tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; height: 100%; align-items: stretch; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: flex; align-items: center; gap: 7px; padding: 0 12px; position: relative;
  font: 700 15.5px/1 var(--f-serif); color: var(--ink-2); white-space: nowrap; transition: color .2s, background .2s;
}
.tab b { font: 400 12px/1 var(--f-num); color: var(--ink-3); letter-spacing: .04em; }
.tab:hover { color: var(--ink); background: var(--hair-2); }
.tab[aria-current="page"] { color: var(--ink); }
.tab[aria-current="page"] b { color: var(--brand-ink); }
.tab[aria-current="page"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; background: var(--brand); }
.bar-tools { display: flex; align-items: center; gap: 6px; flex: none; }
.icon-btn {
  height: 36px; min-width: 36px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--hair); background: transparent; border-radius: 999px; cursor: pointer;
  font: 500 13px/1 var(--f-ui); color: var(--ink-2); transition: border-color .2s, color .2s, background .2s;
}
.icon-btn:hover { border-color: var(--ink); color: var(--ink); }
.icon-btn .ico { width: 17px; height: 17px; }
.icon-btn kbd { font: 500 11px/1 var(--f-ui); border: 1px solid var(--hair); border-radius: 4px; padding: 2px 5px; color: var(--ink-3); }
.btn-write {
  height: 36px; padding: 0 14px 0 12px; display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer;
  background: var(--ink); color: var(--on-ink); border-radius: 999px; font: 700 14px/1 var(--f-ui); transition: background .2s, transform .2s;
}
.btn-write:hover { background: var(--brand-ink); }
.btn-write[aria-current="page"] { background: var(--brand); color: var(--on-ink); }
.btn-write .ico { width: 16px; height: 16px; }
.ico { display: inline-block; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }

/* 快讯 */
.ticker { display: flex; align-items: stretch; border-bottom: 1px solid var(--hair); height: 38px; overflow: hidden; font: 500 14px/38px var(--f-ui); cursor: pointer; }
.ticker-k { flex: none; background: var(--ink); color: var(--on-ink); padding: 0 10px 0 12px; font-weight: 700; letter-spacing: .2em; border: 0; cursor: pointer; display: flex; align-items: center; gap: 2px; }
/* 点一下暂停 / 继续：快讯右边的小符号跟着变 */
.ticker-k::after { content: ""; width: 8px; height: 10px; border-inline: 2.5px solid currentColor; opacity: .75; }
.ticker.paused .ticker-k::after { width: 0; height: 0; border-inline: 0; border-left: 8px solid currentColor; border-block: 5px solid transparent; }
.ticker-view { overflow: hidden; flex: 1; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.ticker-track { display: flex; width: max-content; animation: tick 70s linear infinite; }
.ticker-track span { padding-inline: 22px; white-space: nowrap; color: var(--ink-2); }
.ticker-track span::before { content: "◆"; color: var(--brand); font-size: 9px; margin-right: 10px; vertical-align: 2px; }
.ticker:hover .ticker-track, .ticker.paused .ticker-track { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- 通用排版 ---------- */
.page { padding-bottom: 20px; }
.np { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.np > * { min-width: 0; padding-inline: var(--col); }
.np > :first-child { padding-left: 0; }
.np > :last-child { padding-right: 0; }
.np > * + * { border-left: 1px solid var(--hair); }
.s3 { grid-column: span 3; } .s4 { grid-column: span 4; } .s5 { grid-column: span 5; } .s6 { grid-column: span 6; }
.s7 { grid-column: span 7; } .s8 { grid-column: span 8; } .s9 { grid-column: span 9; } .s12 { grid-column: span 12; }
.sec { padding-block: clamp(20px, 2.6vw, 32px); }
.sec + .sec { border-top: 1px solid var(--rule); }
.rule2 { height: 6px; border-top: 3px solid var(--rule); border-bottom: 1px solid var(--rule); margin: 0; }

.kicker { font: 700 13.5px/1.4 var(--f-serif); color: var(--brand-ink); letter-spacing: .14em; margin-bottom: 8px; }
.hl { font-family: var(--f-serif); font-weight: 900; line-height: 1.22; letter-spacing: .01em; text-wrap: balance; font-feature-settings: "palt" 1; }
.hl-xl { font-size: clamp(30px, 4.4vw, 56px); line-height: 1.16; }
.hl-l { font-size: clamp(26px, 3.2vw, 40px); }
.hl-m { font-size: clamp(20px, 2vw, 25px); }
.hl-s { font-size: 19px; line-height: 1.4; }
.subhead { font: 600 clamp(15px, 1.35vw, 18px)/1.65 var(--f-serif); color: var(--ink-2); margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--hair); text-wrap: pretty; }
.label {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  font: 400 26px/1 var(--f-brush); color: var(--ink);
}
.label small { font: 600 12px/1 var(--f-ui); letter-spacing: .16em; color: var(--ink-3); }
.label::after { content: ""; flex: 1; height: 1px; background: var(--hair); }
.prose p { text-indent: 2em; text-align: justify; line-break: strict; margin-bottom: .75em; }
.prose p:last-child { margin-bottom: 0; }
.cols2 { columns: 2 15em; column-gap: calc(var(--col) * 2); column-rule: 1px solid var(--hair); }
.dateline { font-weight: 900; }
.jump {
  display: inline-flex; align-items: center; gap: 4px; font: 700 13px/1 var(--f-ui); color: var(--brand-ink);
  border-bottom: 1px solid currentColor; padding-bottom: 2px; white-space: nowrap; text-indent: 0;
}
.jump:hover { color: var(--ink); }
.jump .ico { width: 14px; height: 14px; }
.muted { color: var(--ink-3); }
.small { font-size: 14px; }
.ui-s { font: 13px/1.5 var(--f-ui); color: var(--ink-3); }

/* 体裁色标 */
.t-lake { --tone: var(--lake); --tone-ink: var(--lake-ink); }
.t-brand { --tone: var(--brand); --tone-ink: var(--brand-ink); }
.t-sun { --tone: var(--sun); --tone-ink: var(--sun-ink); }
.t-grass { --tone: var(--grass); --tone-ink: var(--grass-ink); }
.t-gold { --tone: var(--gold); --tone-ink: var(--gold-ink); }
.t-mute { --tone: var(--mute); --tone-ink: var(--mute-ink); }
.g { display: inline-flex; align-items: center; gap: 6px; font: 700 12px/1 var(--f-ui); letter-spacing: .1em; color: var(--tone-ink); }
.g::before { content: ""; width: 8px; height: 8px; background: var(--tone); transform: rotate(45deg); }
.pill {
  display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--f-ui); padding: 5px 9px 5px 8px;
  border: 1px solid var(--tone); color: var(--tone-ink); border-radius: 999px; white-space: nowrap;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tone); }
.new-badge { font: 700 11px/1 var(--f-ui); color: var(--seal); border: 1.5px solid var(--seal); padding: 3px 5px; transform: rotate(-4deg); display: inline-block; letter-spacing: .1em; }

/* 按钮与表单 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  font: 600 14.5px/1 var(--f-ui); padding: 11px 18px; border: 1px solid var(--ink); background: transparent; color: var(--ink);
  transition: background .2s, color .2s, transform .15s, border-color .2s;
}
.btn:hover { background: var(--ink); color: var(--on-ink); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--ink); color: var(--on-ink); }
.btn.primary:hover { background: var(--brand-ink); border-color: var(--brand-ink); }
.btn.brand { background: var(--brand); border-color: var(--brand); color: var(--on-ink); }
.btn.brand:hover { background: var(--brand-ink); border-color: var(--brand-ink); }
.btn.ghost { border-color: var(--hair); color: var(--ink-2); }
.btn.ghost:hover { border-color: var(--ink); background: transparent; color: var(--ink); }
.btn.sm { padding: 8px 12px; font-size: 13px; }
.btn .ico { width: 16px; height: 16px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.field { display: grid; gap: 6px; }
.field > span, .field > label { font: 600 13px/1.3 var(--f-ui); color: var(--ink-2); letter-spacing: .04em; }
.field small { font: 12px/1.4 var(--f-ui); color: var(--ink-3); }
.in {
  width: 100%; font: 400 16px/1.5 var(--f-serif); color: var(--ink); background: var(--paper-hi);
  border: 1px solid var(--hair); border-radius: 0; padding: 10px 12px; transition: border-color .2s, box-shadow .2s;
}
.in:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
textarea.in { resize: vertical; min-height: 110px; line-height: 1.8; }
select.in { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.check { display: flex; gap: 10px; align-items: flex-start; font: 14px/1.5 var(--f-ui); color: var(--ink-2); cursor: pointer; }
.check input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--brand); flex: none; }
.seg { display: inline-flex; border: 1px solid var(--ink); }
.seg button, .seg label { padding: 8px 14px; font: 600 14px/1 var(--f-ui); background: transparent; border: 0; cursor: pointer; color: var(--ink-2); display: inline-flex; align-items: center; }
.seg button + button, .seg label + label { border-left: 1px solid var(--ink); }
.seg [aria-pressed="true"], .seg input:checked + span { background: var(--ink); color: var(--on-ink); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label { padding: 0; }
.seg label span { padding: 8px 14px; display: block; }
.seg label:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font: 500 14px/1 var(--f-ui); padding: 8px 13px; border: 1px solid var(--hair); background: transparent;
  color: var(--ink-2); border-radius: 999px; cursor: pointer; transition: all .2s; display: inline-flex; gap: 6px; align-items: center;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.chip .n { font: 12px var(--f-num); opacity: .7; }

/* ---------- 网点图 ---------- */
.ht { margin: 0; }
.ht-frame {
  position: relative; width: 100%; max-width: 100%; overflow: hidden; --r: 0px;
  background: repeating-linear-gradient(45deg, var(--hair-2) 0 2px, transparent 2px 7px), var(--paper-deep);
  transition: --r .7s var(--ease);
  filter: brightness(var(--print-dim));
  cursor: crosshair; display: block; isolation: isolate;
}
.ht-frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ht-print { opacity: 0; transition: opacity .6s; }
.ht-frame.is-painted .ht-print { opacity: 1; }
.ht-color {
  -webkit-mask-image: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), #000 calc(var(--r) * .5), transparent var(--r));
  mask-image: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), #000 calc(var(--r) * .5), transparent var(--r));
}
.ht-frame.dev { --r: 170px; }
.ht-frame.dev-all { --r: 2400px; }
.ht-hint {
  position: absolute; right: 8px; bottom: 8px; z-index: 2; font: 500 11px/1 var(--f-ui); letter-spacing: .08em;
  background: rgba(20, 20, 26, .72); color: #f0eee7; padding: 5px 8px; opacity: 0; transition: opacity .3s; pointer-events: none;
}
.ht.hinted .ht-hint { opacity: 1; }
.ht-frame.dev .ht-hint, .ht-frame.dev-all .ht-hint { opacity: 0; }
@media (hover: none) { .ht-hint { display: none; } }
.ht figcaption {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font: 12.5px/1.5 var(--f-ui); color: var(--ink-3); padding: 7px 0; border-bottom: 1px solid var(--hair);
}
.ht .cap { color: var(--ink-2); font: 600 13.5px/1.5 var(--f-serif); }

/* ---------- 版头 ---------- */
.ph {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: end; gap: 0 clamp(14px, 2vw, 26px);
  padding-top: clamp(20px, 3.2vw, 38px); padding-bottom: 12px; border-bottom: 1px solid var(--rule); position: relative; margin-bottom: 30px;
}
.ph::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; background: var(--rule); }
.ph-no { font: 700 clamp(18px, 2.2vw, 28px)/1 var(--f-num); background: var(--ink); color: var(--on-ink); padding: 11px 12px 9px; align-self: center; letter-spacing: .02em; }
.ph-name { font: 400 clamp(56px, 8.4vw, 104px)/.86 var(--f-brush); }
.ph-meta { justify-self: end; text-align: right; font: 12.5px/1.75 var(--f-ui); color: var(--ink-3); }
.ph-meta b { color: var(--ink-2); font-weight: 600; }
.ph-desc { grid-column: 1 / -1; margin-top: 14px; font: 600 15px/1.6 var(--f-serif); color: var(--ink-2); letter-spacing: .04em; }

/* 翻版 */
.pager { display: grid; grid-template-columns: 1fr 1fr; border-top: 3px solid var(--rule); margin-top: clamp(40px, 6vw, 72px); }
.pager a { padding: 18px 0 8px; display: flex; flex-direction: column; gap: 6px; transition: color .2s; }
.pager a:last-child { text-align: right; align-items: flex-end; border-left: 1px solid var(--hair); padding-left: 20px; }
.pager small { font: 600 12px/1 var(--f-ui); color: var(--ink-3); letter-spacing: .14em; }
.pager b { font: 400 clamp(30px, 4vw, 44px)/1 var(--f-brush); }
.pager a:hover b { color: var(--brand-ink); }

/* ---------- A01 要闻 ---------- */
.lead-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--col); margin-top: 20px; }
.lead-text { font-size: 16.5px; line-height: 1.9; }
.lead-text .cols2 { columns: 1; }
.editor-note { border: 1px solid var(--rule); padding: 16px 18px 14px; position: relative; }
.editor-note h3 { font: 400 24px/1 var(--f-brush); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.editor-note p { font-size: 15px; line-height: 1.85; color: var(--ink-2); text-align: justify; }
.editor-note .sign { text-align: right; margin-top: 6px; font: 13px var(--f-ui); color: var(--ink-3); }
.index-list { margin-top: 18px; }
.index-list a { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--hair); transition: background .2s; }
.index-list a:hover { background: var(--hair-2); }
.index-list .no { font: 700 14px/1 var(--f-num); color: var(--brand-ink); }
.index-list .nm { font: 700 16px/1.4 var(--f-serif); }
.index-list .nm small { display: block; font: 13px/1.5 var(--f-ui); color: var(--ink-3); font-weight: 400; margin-top: 2px; }
.index-list .go { width: 16px; height: 16px; color: var(--ink-3); }

.poem-box {
  position: relative; padding: 22px 14px; display: flex; justify-content: center;
  border: 2px solid var(--grid-line); outline: 1px solid var(--grid-line); outline-offset: -7px;
  background: var(--paper-hi);
}
.vpoem {
  --vlh: 2.15em;
  writing-mode: vertical-rl; font: 400 clamp(17px, 1.45vw, 21px)/var(--vlh) var(--f-brush); letter-spacing: .16em;
  height: 9.9em; white-space: pre-line; max-width: 100%; overflow-x: auto; scrollbar-width: none;
  background: repeating-linear-gradient(to left, transparent 0 calc(var(--vlh) - 1px), var(--grid-soft) calc(var(--vlh) - 1px) var(--vlh));
}
.vpoem h3 { font: 900 .82em/var(--vlh) var(--f-serif); letter-spacing: .4em; }
.vpoem .by { display: block; font: 600 .66em/var(--vlh) var(--f-serif); color: var(--ink-3); padding-top: 10.5em; letter-spacing: .3em; }
.index-list a > .ico { width: 16px; height: 16px; color: var(--ink-3); transition: transform .25s var(--ease), color .2s; }
.index-list a:hover > .ico { transform: translateX(3px); color: var(--brand-ink); }
.dt-mini blockquote .bq { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.card-foot > span { display: inline-flex; align-items: center; gap: 4px; }
.card-foot .ico { width: 14px; height: 14px; }
.chip-r { position: relative; }
.chip-r input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-r input:checked + .chip { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.chip-r input:focus-visible + .chip { outline: 2px solid var(--brand); outline-offset: 2px; }
@keyframes bob { 50% { transform: translateY(-4px); } }

.fw-main .hl { margin: 4px 0 8px; }
.fw-main .hl a:hover { color: var(--brand-ink); }
.byline { font: 13.5px/1.5 var(--f-ui); color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.byline b { color: var(--ink); font: 700 14px var(--f-serif); }
.fw-main .prose { margin-top: 12px; font-size: 16px; }
.fw-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 18px; border-top: 1px solid var(--hair); }
.fw-mini > article { padding: 14px var(--col) 4px 0; }
.fw-mini > article + article { border-left: 1px solid var(--hair); padding-left: var(--col); padding-right: 0; }
.fw-mini h4 { font: 900 18px/1.4 var(--f-serif); margin: 6px 0 4px; }
.fw-mini h4 a:hover { color: var(--brand-ink); }
.fw-mini p.ex { font-size: 14.5px; line-height: 1.8; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 6px; }

.dt-mini .q { font: 900 21px/1.45 var(--f-serif); margin-bottom: 14px; text-wrap: balance; }
.dt-mini .bar2 { display: flex; height: 10px; margin: 8px 0 6px; }
.dt-mini .bar2 i { display: block; height: 100%; transition: flex-grow .8s var(--ease); }
.dt-mini .bar2 .p { background: var(--brand); }
.dt-mini .bar2 .c { background: var(--lake); }
.dt-mini .legend { display: flex; justify-content: space-between; font: 13px/1.4 var(--f-ui); color: var(--ink-2); }
.dt-mini .legend b { font: 700 18px var(--f-num); }
.dt-mini blockquote { font-size: 14.5px; line-height: 1.8; color: var(--ink-2); padding: 12px 0; border-top: 1px dashed var(--hair); margin-top: 12px; }
.dt-mini blockquote cite { display: block; font: 12.5px var(--f-ui); color: var(--ink-3); font-style: normal; margin-top: 4px; }

.strip { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--col); }
.strip .ht-frame { cursor: pointer; }
.coop-note { display: flex; gap: 14px; align-items: flex-start; margin-top: 16px; padding: 14px 16px; background: var(--paper-deep); font-size: 14.5px; line-height: 1.8; color: var(--ink-2); }
.coop-note .ico { width: 22px; height: 22px; color: var(--brand); margin-top: 3px; }

.progress-list { position: relative; margin-top: 4px; }
.progress-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; padding-bottom: 14px; position: relative; }
.progress-list li::before { content: ""; position: absolute; left: 8px; top: 18px; bottom: -2px; width: 1px; background: var(--hair); }
.progress-list li:last-child::before { display: none; }
.progress-list .dot { width: 17px; height: 17px; border: 1.5px solid var(--ink-3); border-radius: 50%; margin-top: 4px; background: var(--paper); display: grid; place-items: center; }
.progress-list .done .dot { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.progress-list .done .dot .ico { width: 11px; height: 11px; stroke-width: 2.4; }
.progress-list .now .dot { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.progress-list .now .dot::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); animation: pulse 1.8s infinite; }
.progress-list .when { font: 700 12.5px/1.2 var(--f-ui); color: var(--ink-3); letter-spacing: .06em; }
.progress-list .ttl { font: 700 16px/1.5 var(--f-serif); }
.progress-list .txt { font: 13.5px/1.6 var(--f-ui); color: var(--ink-3); }
@keyframes pulse { 50% { transform: scale(.6); opacity: .5; } }

/* 书架 */
.shelf-wrap { margin-top: 18px; }
.shelf {
  display: flex; align-items: flex-end; gap: 3px; min-height: 150px; padding: 0 8px; overflow-x: auto; scrollbar-width: thin;
  border-bottom: 9px solid #7a5234; position: relative;
  background: linear-gradient(to top, var(--hair-2), transparent 70%);
}
.spine {
  flex: none; width: var(--w, 30px); height: var(--h, 120px); background: var(--c, #5e5fc9); color: #fdfaf0;
  writing-mode: vertical-rl; text-orientation: upright; display: flex; align-items: center; justify-content: flex-start;
  padding: 10px 0; font: 700 13px/1 var(--f-serif); letter-spacing: .15em; position: relative; cursor: default;
  box-shadow: inset -3px 0 0 rgba(0, 0, 0, .18), inset 2px 0 0 rgba(255, 255, 255, .12);
  transition: transform .3s var(--ease); transform-origin: bottom center;
}
.spine::before, .spine::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: rgba(255, 240, 200, .45); }
.spine::before { top: 7px; } .spine::after { bottom: 7px; }
.spine:hover { transform: translateY(-8px); }
.spine.lean { transform: rotate(-7deg); margin-inline: 6px 3px; }
.spine.lean:hover { transform: rotate(-7deg) translateY(-8px); }
.spine.drop { animation: drop .8s cubic-bezier(.3, 1.4, .5, 1) both; }
.spine .who {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); writing-mode: horizontal-tb;
  background: var(--ink); color: var(--on-ink); font: 500 12px/1.3 var(--f-ui); padding: 5px 8px; white-space: nowrap; letter-spacing: 0;
  opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 3;
}
.spine:hover .who, .spine:focus .who { opacity: 1; }
@keyframes drop { from { transform: translateY(-160px) rotate(-12deg); opacity: 0; } }
.shelf-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

.letters-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.letters-row > article { padding: 4px var(--col); }
.letters-row > article:first-child { padding-left: 0; }
.letters-row > article + article { border-left: 1px solid var(--hair); }
.letters-row p { font-size: 15px; line-height: 1.85; color: var(--ink-2); }
.letters-row p:not(.from)::before { content: "“"; font: 700 28px/0 var(--f-num); color: var(--brand); vertical-align: -10px; margin-right: 2px; }
.letters-row .from { font: 13px/1.5 var(--f-ui); color: var(--ink-3); margin-top: 8px; }
.letters-row .from a { color: var(--brand-ink); }

/* ---------- A02 文苑 ---------- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding-bottom: 18px; border-bottom: 1px solid var(--hair); margin-bottom: 26px; }
.toolbar .grow { flex: 1; }
.toolbar .count { font: 13px var(--f-ui); color: var(--ink-3); }
.wk-lead { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: calc(var(--col) * 2); padding-bottom: 28px; margin-bottom: 8px; border-bottom: 3px double var(--rule); }
.wk-lead .hl a:hover { color: var(--brand-ink); }
.wk-lead .prose { margin-top: 14px; font-size: 16.5px; }
.wk-cols { columns: 3 17rem; column-gap: calc(var(--col) * 2); column-rule: 1px solid var(--hair); }
.card { break-inside: avoid; padding: 18px 0 20px; border-top: 1px solid var(--hair); display: flow-root; }
.card-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 12.5px/1.4 var(--f-ui); color: var(--ink-3); }
.card-title { font: 900 21px/1.4 var(--f-serif); margin: 8px 0 6px; text-wrap: balance; font-feature-settings: "palt" 1; }
.card-title a, .u-link {
  background-image: linear-gradient(var(--brand), var(--brand)); background-size: 0 2px; background-position: 0 100%;
  background-repeat: no-repeat; transition: background-size .35s var(--ease);
}
.card-title a:hover, .u-link:hover { background-size: 100% 2px; }
.card .ex { font-size: 15px; line-height: 1.85; color: var(--ink-2); margin-top: 10px; text-align: justify; }
.card .ex.poem { white-space: pre-line; text-align: left; font-family: var(--f-serif); }
.card-foot { display: flex; gap: 14px; align-items: center; margin-top: 12px; font: 12.5px/1 var(--f-ui); color: var(--ink-3); }
.card-foot .more { margin-left: auto; color: var(--brand-ink); font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.card-foot .more .ico { width: 13px; height: 13px; }
.card.mine { background: linear-gradient(var(--brand-soft), transparent 70%); padding-inline: 12px; margin-inline: -12px; }
.empty { padding: 48px 0; text-align: center; color: var(--ink-3); font: 15px var(--f-ui); }
.empty b { display: block; font: 400 34px var(--f-brush); color: var(--ink-2); margin-bottom: 6px; }

/* ---------- 阅读页 ---------- */
.read-grid { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: clamp(16px, 3vw, 44px); }
.tools { position: sticky; top: calc(var(--bar-h) + 24px); display: flex; flex-direction: column; gap: 6px; align-self: start; z-index: 5; }
.tool {
  width: 52px; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font: 500 11px/1.1 var(--f-ui); color: var(--ink-2); border: 1px solid var(--hair); background: var(--paper); cursor: pointer;
  transition: all .2s; padding: 6px 2px; position: relative;
}
.tool .ico { width: 19px; height: 19px; }
.tool:hover { border-color: var(--ink); color: var(--ink); }
.tool[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.tool.liked { color: var(--seal); border-color: var(--seal); }
.tool .cnt { font: 600 11px var(--f-num); }
.tool-sep { height: 1px; background: var(--hair); margin: 4px 8px; }
.burst { position: absolute; inset: 0; pointer-events: none; }
.burst i { position: absolute; left: 50%; top: 40%; width: 5px; height: 5px; background: var(--seal); border-radius: 50%; animation: burst .6s var(--ease) forwards; }
@keyframes burst { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }

.article { min-width: 0; --measure: calc(var(--read-fs) * 38); --mgap: clamp(20px, 3.4vw, 48px); --mw: 240px; }
.art-head { text-align: center; max-width: 820px; margin: 6px auto 0; padding-bottom: 22px; }
.art-head .kicker { display: inline-flex; gap: 10px; align-items: center; }
.art-title { margin: 6px 0 14px; }
.art-by { justify-content: center; }
.art-note { font: 13px var(--f-ui); color: var(--ink-3); margin-top: 6px; }
.art-fig { max-width: calc(var(--measure) + var(--mgap) + var(--mw)); margin: 0 auto 30px; }
.art-body-wrap { display: grid; grid-template-columns: minmax(0, var(--measure)) minmax(150px, var(--mw)); gap: var(--mgap); justify-content: center; position: relative; }
.art-body { font-size: var(--read-fs); line-height: 2.05; position: relative; min-width: 0; transition: font-size .25s; }
.art-body p { margin: 0 0 1.05em; text-indent: 2em; text-align: justify; line-break: strict; }
/* 键盘移到某一段时：朱砂虚线框 + 一句提示（鼠标点击不会出现） */
.art-body p:focus-visible { outline: 1.5px dashed var(--seal); outline-offset: 6px; border-radius: 0; position: relative; }
.art-body p:focus-visible::after {
  content: "按回车 · 选句朱批"; position: absolute; right: 0; top: -1.9em; text-indent: 0; white-space: nowrap;
  font: 600 12px/1.6 var(--f-ui); color: var(--seal); background: var(--paper); padding: 0 6px;
}
.article.is-vert .art-body p:focus-visible::after { display: none; }
.art-body.prose-first > p:first-child { text-indent: 0; display: flow-root; }
.art-body.prose-first > p:first-child::first-letter {
  float: left; font: 400 3.35em/1 var(--f-brush); margin: .08em .12em 0 0; color: var(--ink); padding: 0 .04em;
}
.art-body.poem p { text-indent: 0; white-space: pre-line; text-align: left; margin-bottom: 1.6em; }
.art-body.poem.classical { text-align: center; font-size: calc(var(--read-fs) * 1.25); letter-spacing: .12em; }
.art-body.poem.classical p { text-align: center; }
.tcy { text-combine-upright: none; }
mark.zp {
  background: none; color: inherit; cursor: pointer; border-radius: 2px;
  text-decoration: underline wavy var(--seal); text-decoration-thickness: 1.4px; text-underline-offset: .34em; text-decoration-skip-ink: none;
  transition: background .2s;
}
mark.zp.hot { background: var(--seal-soft); }
mark.zp.fresh { animation: fresh 1.6s var(--ease); }
@keyframes fresh { 0% { background: var(--seal-soft); } 100% { background: transparent; } }
.margin { position: relative; min-height: 10px; }
.mnote {
  position: absolute; left: 0; right: 0; padding: 2px 0 2px 14px; border-left: 1.5px solid var(--seal);
  font: 400 17px/1.55 var(--f-brush); color: var(--seal); transition: top .35s var(--ease), background .2s; cursor: pointer;
}
.mnote small { display: block; font: 12px/1.4 var(--f-ui); color: var(--ink-3); margin-top: 3px; }
.mnote.hot { background: var(--seal-soft); }
.mnote.fresh { animation: ink-in .9s var(--ease) both; }
@keyframes ink-in { from { opacity: 0; transform: translateX(10px); filter: blur(3px); } }
.margin-hint { font: 12.5px/1.6 var(--f-ui); color: var(--ink-3); padding-left: 14px; border-left: 1.5px dashed var(--hair); }
.vnotes { display: none; }
.art-end { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 20px 0 8px; font: 14px var(--f-ui); color: var(--ink-3); }
.art-end .seal { width: 44px; color: var(--seal); transform: rotate(-5deg); }

.article.is-vert .art-body-wrap { grid-template-columns: minmax(0, 1fr); }
.article.is-vert .margin { display: none; }
.article.is-vert .art-body {
  writing-mode: vertical-rl; height: min(72vh, 700px); overflow-x: auto; overflow-y: hidden; padding: 18px 8px; line-height: 2.2;
  border-block: 1px solid var(--rule); scrollbar-width: thin; overscroll-behavior-x: contain;
  background-image: repeating-linear-gradient(to left, transparent 0 calc(var(--read-fs) * 2.2 - 1px), var(--grid-soft) calc(var(--read-fs) * 2.2 - 1px) calc(var(--read-fs) * 2.2));
  background-attachment: local; background-position: right top;
}
.article.is-vert .art-body p { margin: 0; text-align: justify; }
.article.is-vert .art-body.poem p { margin-left: 1.2em; }
.article.is-vert .art-body.prose-first > p:first-child { text-indent: 2em; }
.article.is-vert .art-body.prose-first > p:first-child::first-letter { float: none; font: inherit; margin: 0; padding: 0; }
.article.is-vert mark.zp { text-underline-position: left; text-underline-offset: .28em; }
.article.is-vert .tcy { text-combine-upright: all; }
.article.is-vert .vnotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px 24px; margin-top: 20px; }
.article.is-vert .vnotes .mnote { position: static; }
.vert-hint { display: none; font: 12.5px var(--f-ui); color: var(--ink-3); text-align: center; margin-bottom: 8px; }
.article.is-vert .vert-hint { display: block; }

/* 读者来信 */
.letters { max-width: 820px; margin: clamp(40px, 6vw, 64px) auto 0; }
.sec-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-bottom: 8px; border-bottom: 3px solid var(--rule); margin-bottom: 4px; }
.sec-h h2 { font: 400 34px/1 var(--f-brush); white-space: nowrap; }
.sec-h small { font: 13px var(--f-ui); color: var(--ink-3); }
.letter { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px dashed var(--hair); }
.letter.fresh { animation: ink-in .8s var(--ease) both; }
.stamp {
  --r: 3.5px; width: 58px; height: 68px; padding: 6px; background: var(--paper-hi); position: relative;
  -webkit-mask: radial-gradient(var(--r), #0000 97%, #000) round calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)), linear-gradient(#000 0 0) no-repeat 50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r));
  mask: radial-gradient(var(--r), #0000 97%, #000) round calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)), linear-gradient(#000 0 0) no-repeat 50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r));
  filter: drop-shadow(0 1px 0 var(--hair));
}
.stamp-in { height: 100%; border: 1px solid var(--tone); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--tone-ink); background: color-mix(in srgb, var(--tone) 10%, transparent); }
.stamp-in b { font: 400 25px/1 var(--f-brush); }
.stamp-in small { font: 600 8px/1 var(--f-ui); margin-top: 4px; letter-spacing: .05em; }
.letter-h { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font: 13px/1.5 var(--f-ui); color: var(--ink-3); }
.letter-h b { font: 700 15.5px var(--f-serif); color: var(--ink); }
.letter p { margin-top: 4px; font-size: 16px; line-height: 1.85; text-align: justify; }
.letter.editor p { color: var(--brand-ink); }
.letter-form { display: grid; gap: 12px; margin-top: 20px; padding: 18px; background: var(--paper-deep); }
.letter-form .actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.art-nav { max-width: 820px; margin: 40px auto 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule); }
.art-nav a { padding: 16px 0; display: grid; gap: 4px; }
.art-nav a + a { text-align: right; border-left: 1px solid var(--hair); padding-left: 16px; }
.art-nav small { font: 600 12px var(--f-ui); color: var(--ink-3); letter-spacing: .1em; }
.art-nav b { font: 900 18px/1.4 var(--f-serif); }
.art-nav a:hover b { color: var(--brand-ink); }

.read-progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 60; background: var(--seal); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); pointer-events: none; }

/* 划词浮层：日读、夜读都用同一块深色底，里面的浅色字才始终看得清 */
.selpop {
  --pop: #1c1d24; --pop-fg: #f0eee7;
  position: absolute; z-index: 70; background: var(--pop); color: var(--pop-fg); box-shadow: var(--shadow-pop); color-scheme: dark;
  border: 1px solid rgba(255, 255, 255, .14); width: max-content; max-width: calc(100vw - 24px);
  display: flex; padding: 4px; gap: 2px; transform: translate(-50%, calc(-100% - 10px)); animation: pop .18s var(--ease);
}
.selpop::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; background: var(--pop); transform: translateX(-50%) rotate(45deg); }
.selpop.below { transform: translate(-50%, 12px); }
.selpop.below::after { bottom: auto; top: -6px; }
.selpop button { background: transparent; border: 0; color: inherit; font: 600 13px/1 var(--f-ui); padding: 9px 11px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; position: relative; z-index: 1; white-space: nowrap; }
.selpop button:hover { background: rgba(255, 255, 255, .12); }
.selpop button .ico { width: 15px; height: 15px; }
.selpop .zp-btn { color: #ff8f80; }
.selpop .sel-step { font-size: 18px; padding-inline: 9px; }
.selpop .pop-note { color: rgba(255, 255, 255, .6); }
.selpop form { display: grid; gap: 8px; padding: 8px; width: min(320px, 80vw); position: relative; z-index: 1; }
.selpop form q { font: 13px/1.6 var(--f-serif); color: rgba(255, 255, 255, .7); quotes: "“" "”"; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.selpop textarea, .selpop input { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); color: inherit; font: 15px/1.6 var(--f-serif); padding: 8px; width: 100%; }
.selpop textarea { min-height: 70px; resize: none; font-family: var(--f-brush); font-size: 18px; color: #ffb3a8; }
.selpop textarea::placeholder { color: rgba(255, 255, 255, .55); }
.selpop .btn.brand { background: #5e5fc9; border-color: #5e5fc9; color: #fff; }
.selpop .btn.brand:hover { background: #4546aa; border-color: #4546aa; }
.selpop .row { display: flex; gap: 8px; justify-content: flex-end; }
.selpop .row input { flex: 1; }
@keyframes pop { from { opacity: 0; margin-top: 6px; } }

/* ---------- A03 争鸣 ---------- */
.db-hero { text-align: center; max-width: 900px; margin: 0 auto; }
.db-hero .kicker { color: var(--ink-3); }
.db-title { margin: 8px 0 16px; }
.db-title .q { color: var(--brand-ink); }
.db-intro { font-size: 16px; line-height: 1.95; color: var(--ink-2); text-align: justify; max-width: 44em; margin: 0 auto; }
.db-intro b { font: 400 20px var(--f-brush); color: var(--ink); margin-right: 6px; }
.tug { margin: clamp(26px, 4vw, 44px) 0 8px; }
.tug-sides { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: end; }
.tug-side { display: grid; gap: 4px; justify-items: start; }
.tug-side.con { text-align: right; justify-items: end; }
.tug-side .who { font: 400 40px/1 var(--f-brush); }
.tug-side.pro .who { color: var(--brand-ink); }
.tug-side.con .who { color: var(--lake-ink); }
.tug-side .claim { font: 900 19px/1.4 var(--f-serif); }
.tug-side .sub { font: 13.5px/1.5 var(--f-ui); color: var(--ink-3); }
.tug-side .btn { margin-top: 8px; }
.tug-side.pro .btn.on { background: var(--brand-ink); border-color: var(--brand-ink); color: var(--on-ink); }
.tug-side.con .btn.on { background: var(--lake-ink); border-color: var(--lake-ink); color: var(--on-ink); }
.tug-vs { font: 400 56px/1 var(--f-brush); color: var(--ink-3); padding-bottom: 6px; }
.tug-svg { width: 100%; height: auto; display: block; margin-top: 12px; overflow: visible; }
.tug-meter { display: flex; justify-content: space-between; align-items: baseline; font: 13px var(--f-ui); color: var(--ink-3); }
.tug-meter b { font: 700 30px var(--f-num); color: var(--ink); margin-right: 4px; }
.tug-meter .pro b { color: var(--brand-ink); }
.tug-meter .con b { color: var(--lake-ink); }
.db-cols { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); gap: 0 calc(var(--col) * 1.4); margin-top: 26px; border-top: 3px solid var(--rule); padding-top: 6px; }
.db-cols .divider { background: var(--hair); }
.db-col h3 { display: flex; justify-content: space-between; align-items: baseline; font: 400 30px/1 var(--f-brush); padding: 14px 0 10px; border-bottom: 1px solid var(--hair); }
.db-col h3 small { font: 13px var(--f-ui); color: var(--ink-3); }
.db-col.pro h3 { color: var(--brand-ink); }
.db-col.con h3 { color: var(--lake-ink); }
.arg { padding: 16px 0; border-bottom: 1px solid var(--hair); position: relative; scroll-margin-top: calc(var(--bar-h) + 30px); }
.arg.flash { animation: flash 1.6s var(--ease); }
@keyframes flash { 0%, 30% { background: var(--brand-soft); } 100% { background: transparent; } }
.arg header { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font: 13px/1.5 var(--f-ui); color: var(--ink-3); }
.arg header b { font: 700 15.5px var(--f-serif); color: var(--ink); }
.arg-type { font: 700 11.5px/1 var(--f-ui); padding: 4px 6px; border: 1px solid currentColor; letter-spacing: .1em; }
.pro .arg-type { color: var(--brand-ink); }
.con .arg-type { color: var(--lake-ink); }
.arg p { font-size: 16px; line-height: 1.9; margin-top: 8px; text-align: justify; }
.arg .reply-to {
  display: block; width: 100%; text-align: left; margin-top: 10px; padding: 8px 12px; font: 13.5px/1.7 var(--f-serif); color: var(--ink-3);
  background: var(--hair-2); border: 0; border-left: 2px solid var(--ink-3); cursor: pointer;
}
.arg .reply-to:hover { color: var(--ink-2); border-left-color: var(--ink); }
.arg .reply-to b { color: var(--ink-2); }
.arg footer { display: flex; gap: 8px; margin-top: 10px; }
.agree { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1 var(--f-ui); padding: 7px 11px; border: 1px solid var(--hair); background: transparent; cursor: pointer; color: var(--ink-2); transition: all .2s; }
.agree:hover { border-color: var(--ink); color: var(--ink); }
.agree .ico { width: 14px; height: 14px; }
.agree.on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.agree .n { font-family: var(--f-num); }
.db-form { margin-top: 36px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 calc(var(--col) * 2); }
.db-form form[data-form="arg"] { display: grid; gap: 14px; }
.db-form .opts { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
.proposals li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.proposals .t { font: 700 16px/1.5 var(--f-serif); }
.proposals .bar3 { height: 4px; background: var(--hair-2); margin-top: 6px; }
.proposals .bar3 i { display: block; height: 100%; background: var(--gold); transition: width .6s var(--ease); }
.propose { display: flex; gap: 8px; margin-top: 14px; }
.propose .in { flex: 1; }

/* ---------- A04 光影 ---------- */
.lede { font: 600 16px/1.8 var(--f-serif); color: var(--ink-2); max-width: 46em; }
.masonry { columns: 3 260px; column-gap: var(--col); margin-top: 22px; }
.masonry .ht { break-inside: avoid; margin-bottom: var(--col); }
.masonry .ht-frame { cursor: zoom-in; }
.dy-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.phones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 32px); }
.phone { display: grid; gap: 10px; justify-items: center; }
.phone-screen {
  width: 100%; max-width: 230px; aspect-ratio: 9 / 16; border-radius: 26px; border: 7px solid #111217; background: #000;
  position: relative; overflow: hidden; box-shadow: var(--shadow); cursor: pointer; transition: transform .35s var(--ease), box-shadow .35s;
  color: #fff; padding: 0; display: block;
}
.phone-screen:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: var(--shadow-pop); }
.phone-screen canvas { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 60% 40%; transition: transform 1.2s var(--ease); }
.phone.playing .phone-screen canvas { animation: kenburns 10s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.22) translate(-4%, 3%); } }
.phone-screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .65), transparent 45%, transparent 80%, rgba(0, 0, 0, .35)); pointer-events: none; }
.pv-notch { position: absolute; top: 6px; left: 50%; width: 34%; height: 14px; background: #111217; border-radius: 0 0 10px 10px; transform: translateX(-50%); z-index: 3; }
.pv-sub { position: absolute; left: 10%; right: 18%; bottom: 30%; z-index: 2; font: 400 clamp(15px, 1.6vw, 19px)/1.5 var(--f-brush); text-shadow: 0 1px 6px rgba(0, 0, 0, .7); text-align: left; min-height: 3em; }
.pv-sub span { display: block; animation: sub-in .6s var(--ease) both; }
@keyframes sub-in { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } }
.pv-side { position: absolute; right: 8px; bottom: 26%; z-index: 2; display: flex; flex-direction: column; gap: 12px; align-items: center; font: 600 10px/1.2 var(--f-ui); }
.pv-side i { width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .18); display: grid; place-items: center; font-style: normal; margin-bottom: 2px; }
.pv-side i .ico { width: 15px; height: 15px; }
.pv-side .av { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff; background: #fff; overflow: hidden; }
.pv-side .av img { width: 100%; height: 100%; }
.pv-meta { position: absolute; left: 12px; right: 52px; bottom: 16px; z-index: 2; font: 12px/1.5 var(--f-ui); text-align: left; }
.pv-meta b { display: block; font-size: 13px; }
.pv-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, .25); z-index: 3; }
.pv-bar i { display: block; height: 100%; width: 0; background: #fff; }
.phone.playing .pv-bar i { animation: prog var(--dur, 10s) linear infinite; }
@keyframes prog { to { width: 100%; } }
.pv-play { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; transition: opacity .3s; }
.pv-play span { width: 54px; height: 54px; border-radius: 50%; background: rgba(0, 0, 0, .35); display: grid; place-items: center; backdrop-filter: blur(4px); }
.pv-play .ico { width: 22px; height: 22px; fill: #fff; stroke: none; margin-left: 3px; }
.phone.playing .pv-play { opacity: 0; }
.phone-cap { text-align: center; font: 700 15px/1.4 var(--f-serif); }
.phone-cap small { display: block; font: 12.5px var(--f-ui); color: var(--ink-3); font-weight: 400; margin-top: 2px; }
.phone-cap a { color: var(--brand-ink); }
.coop { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 10px; }
.coop > div { padding: 4px var(--col); }
.coop > div:first-child { padding-left: 0; }
.coop > div + div { border-left: 1px solid var(--hair); }
.coop h2 { font: 900 18px/1.4 var(--f-serif); margin-bottom: 6px; display: flex; gap: 8px; align-items: center; }
.coop h2 .ico { width: 20px; height: 20px; color: var(--brand); }
.coop p { font-size: 15px; line-height: 1.85; color: var(--ink-2); }

/* 灯箱 */
.lightbox { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 22px; }
.lightbox canvas { width: 100%; height: auto; display: block; background: var(--paper-deep); }
.lb-side h3 { font: 900 24px/1.3 var(--f-serif); margin: 6px 0 10px; }
.lb-side p { font-size: 15.5px; line-height: 1.85; color: var(--ink-2); }
.lb-side .seg { margin-top: 16px; }
.lb-side .nav { display: flex; gap: 8px; margin-top: 18px; }

/* ---------- A05 联谊 ---------- */
.nw-top { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: calc(var(--col) * 2); align-items: start; }
.nw-map { width: 100%; height: auto; display: block; overflow: visible; }
.nw-ring { fill: none; stroke: var(--hair); stroke-dasharray: 2 6; }
.nw-ripple { fill: none; stroke: var(--lake); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: ripple 6s cubic-bezier(.2, .6, .3, 1) infinite; opacity: 0; }
.nw-ripple.r2 { animation-delay: 2s; } .nw-ripple.r3 { animation-delay: 4s; }
@keyframes ripple { 0% { transform: scale(.25); opacity: .7; } 100% { transform: scale(1); opacity: 0; } }
.nw-link { fill: none; stroke-width: 1.6; transition: stroke-width .25s, opacity .25s; }
.nw-link.ok { stroke: var(--grass); }
.nw-link.partner { stroke: var(--lake); }
.nw-link.talk { stroke: var(--gold); stroke-dasharray: 7 6; animation: dash 1.2s linear infinite; }
.nw-link.lost { stroke: var(--mute); stroke-dasharray: 1.5 6; stroke-linecap: round; }
@keyframes dash { to { stroke-dashoffset: -13; } }
.nw-map.has-hot .nw-link:not(.hot), .nw-map.has-hot .nw-node:not(.hot) { opacity: .35; }
.nw-link.hot { stroke-width: 3; }
.nw-node { cursor: pointer; transition: opacity .25s; outline: none; }
.nw-node .disc { fill: var(--paper-hi); stroke-width: 2; transition: transform .3s var(--ease); transform-box: fill-box; transform-origin: center; }
.nw-node.ok .disc { stroke: var(--grass); }
.nw-node.talk .disc { stroke: var(--gold); }
.nw-node.lost .disc { stroke: var(--mute); stroke-dasharray: 3 3; }
.nw-node.partner .disc { stroke: var(--lake); }
.nw-node .ch { font: 400 25px var(--f-brush); fill: var(--ink); }
.nw-node .nm { font: 700 13px var(--f-serif); fill: var(--ink); }
.nw-node .sc { font: 11px var(--f-ui); fill: var(--ink-3); }
.nw-node:hover .disc, .nw-node.hot .disc, .nw-node:focus-visible .disc { transform: scale(1.15); }
.nw-node:focus-visible .disc { stroke: var(--brand); stroke-width: 3; }
.nw-center .ring { fill: none; stroke: var(--brand); stroke-width: 3; }
.nw-center .lbl { font: 400 22px var(--f-brush); fill: var(--ink); }
.nw-dotmove { fill: var(--grass); }
.nw-detail { border: 1px solid var(--rule); padding: 20px; position: sticky; top: calc(var(--bar-h) + 20px); margin-top: 8px; }
.nw-detail::before { content: ""; position: absolute; inset: 3px; border: 1px solid var(--hair); pointer-events: none; }
.nw-detail .big { font: 400 64px/1 var(--f-brush); float: right; color: var(--tone-ink); margin: -4px 0 0 12px; opacity: .9; }
.nw-detail h3 { font: 900 26px/1.3 var(--f-serif); margin: 10px 0 2px; }
.nw-detail .sch { font: 14px var(--f-ui); color: var(--ink-3); }
.nw-detail dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 16px 0; font: 14px/1.6 var(--f-ui); clear: both; }
.nw-detail dt { color: var(--ink-3); }
.nw-detail dd { margin: 0; color: var(--ink); }
.nw-detail p { font-size: 15.5px; line-height: 1.85; color: var(--ink-2); padding-top: 12px; border-top: 1px dashed var(--hair); }
.nw-detail .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.nw-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; font: 13px var(--f-ui); color: var(--ink-3); align-items: center; }
.soc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0; border-top: 1px solid var(--rule); }
.soc {
  padding: 16px 18px 16px 0; border-bottom: 1px solid var(--hair); display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; cursor: pointer;
  text-align: left; background: transparent; border-top: 0; border-left: 0; border-right: 0; transition: background .2s;
}
.soc:hover { background: var(--hair-2); }
.soc .av { width: 44px; height: 44px; display: grid; place-items: center; font: 400 24px/1 var(--f-brush); color: var(--tone-ink); border: 1.5px solid var(--tone); border-radius: 50%; }
.soc b { font: 700 16px/1.4 var(--f-serif); display: block; }
.soc small { font: 12.5px/1.5 var(--f-ui); color: var(--ink-3); display: block; margin-bottom: 6px; }
.tl { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); position: relative; margin-top: 8px; }
.tl::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: linear-gradient(90deg, var(--ink) var(--done, 30%), var(--hair) var(--done, 30%)); }
.tl li { padding: 0 var(--col) 0 0; position: relative; }
.tl .dot { width: 24px; height: 24px; border-radius: 50%; background: var(--paper); border: 2px solid var(--hair); display: grid; place-items: center; position: relative; }
.tl .done .dot { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.tl .done .dot .ico { width: 12px; height: 12px; stroke-width: 2.6; }
.tl .now .dot { border-color: var(--brand); box-shadow: 0 0 0 5px var(--brand-soft); }
.tl .now .dot::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--brand); animation: pulse 1.8s infinite; }
.tl .when { font: 700 13px var(--f-ui); color: var(--ink-3); margin-top: 12px; letter-spacing: .06em; }
.tl .ttl { font: 900 18px/1.4 var(--f-serif); margin-top: 2px; }
.tl .txt { font-size: 14.5px; line-height: 1.75; color: var(--ink-2); margin-top: 4px; }

/* 八行笺 */
.bahang {
  --lh: 2.4em; writing-mode: vertical-rl; text-orientation: upright; height: 25em; overflow-x: auto; padding: 24px 22px; margin: 0 auto;
  font: 400 19px/var(--lh) var(--f-brush); color: var(--ink); letter-spacing: .08em;
  background:
    repeating-linear-gradient(to left, transparent 0 calc(var(--lh) - 1.5px), var(--grid-line) calc(var(--lh) - 1.5px) var(--lh)) right 22px top 24px / calc(100% - 44px) calc(100% - 48px) no-repeat,
    var(--paper-hi);
  border: 2px solid var(--grid-line); outline: 1px solid var(--grid-line); outline-offset: 4px; background-attachment: local;
  scrollbar-width: thin; white-space: pre-wrap;
}
.bahang .sign { display: block; text-align: end; }
.letter-tools { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.letter-plain { width: 100%; min-height: 180px; margin-top: 12px; }

/* ---------- 投稿 · 稿纸 ---------- */
.sub-grid { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: clamp(20px, 3.4vw, 48px); align-items: start; }
.sub-form { display: grid; gap: 16px; }
.sub-form .body-in { min-height: 300px; }
.sub-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 6px; }
.draft-state { font: 12.5px var(--f-ui); color: var(--ink-3); display: inline-flex; gap: 6px; align-items: center; }
.draft-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--grass); }
.sub-notes { padding: 16px 18px; background: var(--paper-deep); font: 14px/1.8 var(--f-ui); color: var(--ink-2); }
.sub-notes h2 { font: 400 22px var(--f-brush); color: var(--ink); margin-bottom: 4px; }
.sub-notes li { padding-left: 16px; position: relative; }
.sub-notes li::before { content: ""; position: absolute; left: 2px; top: .75em; width: 5px; height: 5px; background: var(--seal); transform: rotate(45deg); }
.sub-paper { position: sticky; top: calc(var(--bar-h) + 20px); }
.gz-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; font: 13px var(--f-ui); color: var(--ink-3); margin-bottom: 10px; }
.gz-head b { font: 700 18px var(--f-num); color: var(--ink); }
.gz-pages { max-height: calc(100vh - var(--bar-h) - 110px); overflow-y: auto; padding: 4px 10px 20px 4px; scrollbar-width: thin; display: grid; gap: 22px; }
.gz {
  container-type: inline-size; background: var(--paper-hi); padding: 4.2% 4.2% 2.6%; box-shadow: var(--shadow);
  position: relative;
}
.gz-rows { display: grid; gap: 1.2cqi; }
.gz-row { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); border: 1px solid var(--grid-line); }
.gz-row > span {
  aspect-ratio: 1; display: grid; place-items: center; position: relative; min-width: 0;
  font: 400 calc(4.55cqi * .62)/1 var(--f-brush); color: var(--ink);
}
.gz-row > span + span { border-left: 1px solid var(--grid-line); }
.gz-row > span.pu { place-items: end start; padding: 0 0 12% 14%; }
.gz-row > span.pu.op { place-items: center end; padding: 0 8% 0 0; }
.gz-row > span.la { font: 500 calc(4.55cqi * .42)/1 var(--f-num); letter-spacing: -.02em; }
.gz-row > span.t { font-weight: 700; font-family: var(--f-serif); font-size: calc(4.55cqi * .56); }
.gz-row > span i { position: absolute; right: -18%; bottom: -8%; font-style: normal; font-size: .9em; }
.gz-row > span.new { animation: ink .5s var(--ease) both; }
@keyframes ink { from { opacity: 0; transform: scale(1.6); filter: blur(2px); } }
.gz-foot { display: flex; justify-content: space-between; font: 500 max(9px, 1.9cqi)/1 var(--f-ui); color: var(--grid-line); margin-top: 2.2cqi; letter-spacing: .1em; }
.gz .stamp-hit { position: absolute; right: 7%; top: 5%; width: 30%; color: var(--seal); opacity: .92; animation: stamp2 .6s cubic-bezier(.3, 1.5, .5, 1) both; pointer-events: none; mix-blend-mode: multiply; }
:root[data-theme="dark"] .gz .stamp-hit { mix-blend-mode: normal; }
@keyframes stamp2 { 0% { transform: scale(2.6) rotate(-30deg); opacity: 0; } 60% { opacity: .95; } 100% { transform: scale(1) rotate(-14deg); } }
.receipt { display: grid; gap: 12px; padding: 20px; border: 1px solid var(--rule); background: var(--paper-hi); }
.receipt h3 { font: 400 30px/1.2 var(--f-brush); }
.receipt p { font-size: 15px; line-height: 1.8; color: var(--ink-2); }
.receipt .acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- 对话框 ---------- */
dialog.dlg {
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink); padding: 0; margin: auto;
  width: min(720px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); box-shadow: var(--shadow-pop); overflow: hidden;
}
dialog.dlg[open] { display: flex; flex-direction: column; animation: dlg-in .35s var(--ease); }
dialog.dlg::backdrop { background: rgba(16, 16, 22, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
dialog.dlg.wide { width: min(1080px, calc(100vw - 32px)); }
dialog.dlg.search { margin-top: min(12vh, 110px); width: min(680px, calc(100vw - 32px)); }
@keyframes dlg-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--rule); flex: none; }
.dlg-head h2 { font: 400 26px/1.1 var(--f-brush); }
.dlg-head h2 small { font: 13px var(--f-ui); color: var(--ink-3); margin-left: 8px; }
.dlg-x { width: 34px; height: 34px; border: 1px solid var(--hair); background: transparent; border-radius: 50%; cursor: pointer; display: grid; place-items: center; color: var(--ink-2); }
.dlg-x:hover { border-color: var(--ink); color: var(--ink); }
.dlg-x .ico { width: 16px; height: 16px; }
.dlg-body { padding: 18px; overflow: auto; flex: 1; }
.dlg-body form { display: grid; gap: 14px; }

/* 摘句卡 */
.qc { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 24px; align-items: start; }
.qc-canvas { width: 100%; height: auto; aspect-ratio: 9 / 16; box-shadow: var(--shadow); background: var(--paper-deep); display: block; }
.qc-side { display: grid; gap: 16px; }
.qc-side blockquote { font: 400 20px/1.7 var(--f-brush); padding-left: 14px; border-left: 2px solid var(--brand); color: var(--ink); }
.qc-side .opt { display: grid; gap: 6px; }
.qc-side .opt > span { font: 600 13px var(--f-ui); color: var(--ink-2); }
.qc-side .note { font: 13px/1.6 var(--f-ui); color: var(--ink-3); }

/* 检索 */
.sx-in { display: flex; align-items: center; gap: 10px; padding: 6px 16px; border-bottom: 1px solid var(--rule); }
.sx-in .ico { width: 20px; height: 20px; color: var(--ink-3); }
.sx-in input { flex: 1; min-width: 0; border: 0; background: transparent; font: 400 20px/1.5 var(--f-serif); color: var(--ink); padding: 12px 0; outline: none; }
.sx-in .dlg-x { flex: none; }
.sx-res { max-height: min(60vh, 520px); overflow-y: auto; padding: 8px; }
.sx-res a { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 12px; padding: 10px 10px; align-items: start; }
.sx-res a[aria-selected="true"], .sx-res a:hover { background: var(--brand-soft); }
.sx-res .ty { font: 700 11px/1 var(--f-ui); color: var(--ink-3); border: 1px solid var(--hair); padding: 5px 0; text-align: center; margin-top: 3px; }
.sx-res b { font: 700 16px/1.5 var(--f-serif); display: block; }
.sx-res .sn { font: 13.5px/1.6 var(--f-serif); color: var(--ink-3); }
.sx-res mark { background: none; color: var(--seal); font-weight: 700; }
.sx-foot { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--hair); font: 12px var(--f-ui); color: var(--ink-3); }
.sx-foot kbd { font: 11px var(--f-ui); border: 1px solid var(--hair); padding: 1px 5px; border-radius: 3px; margin-right: 3px; }
.sx-empty { padding: 30px; text-align: center; font: 14px var(--f-ui); color: var(--ink-3); }

/* 提示 */
.toasts { position: fixed; inset: auto auto calc(22px + env(safe-area-inset-bottom, 0px)) 50%; transform: translateX(-50%); margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; display: flex; flex-direction: column; gap: 8px; align-items: center; z-index: 400; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
.toast { background: var(--ink); color: var(--on-ink); font: 500 14px/1.45 var(--f-ui); padding: 11px 16px; box-shadow: var(--shadow-pop); animation: toast-in .4s var(--ease) both; display: flex; gap: 10px; align-items: center; pointer-events: auto; }
.toast::before { content: ""; width: 9px; height: 9px; background: var(--seal); transform: rotate(45deg); flex: none; }
.toast.out { animation: toast-out .3s ease-in forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }

/* ---------- 报尾 ---------- */
.colophon { margin-top: clamp(48px, 7vw, 90px); border-top: 4px solid var(--rule); position: relative; padding-bottom: 36px; }
.colophon::before { content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 1px; background: var(--rule); }
.colo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px 28px; padding-top: 22px; align-items: start; }
.colo-brand { display: flex; gap: 12px; align-items: center; }
.colo-brand img { width: 56px; height: 56px; border-radius: 50%; }
.colo-brand b { font: 400 40px/1 var(--f-brush); display: block; }
.colo-brand small { font: 12px var(--f-ui); color: var(--ink-3); letter-spacing: .1em; }
.colo-info { font: 13px/1.9 var(--f-ui); color: var(--ink-2); columns: 2 18em; column-gap: 28px; }
.colo-info p { break-inside: avoid; }
.colo-info b { color: var(--ink); font-weight: 600; }
.colo-price { text-align: right; font: 13px/1.8 var(--f-ui); color: var(--ink-3); }
.colo-price b { display: block; font: 700 17px var(--f-serif); color: var(--ink); }
.colo-demo { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--hair); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font: 12.5px/1.7 var(--f-ui); color: var(--ink-3); }
.colo-demo kbd { font: 11px var(--f-ui); border: 1px solid var(--hair); border-radius: 3px; padding: 1px 5px; }
.linkish { background: none; border: 0; padding: 0; color: var(--brand-ink); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 页面切换（翻版） ---------- */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: turn-out .26s cubic-bezier(.4, 0, 1, 1) both; }
  ::view-transition-new(root) { animation: turn-in .5s var(--ease) both; }
  html[data-dir="back"]::view-transition-old(root) { animation-name: turn-out-back; }
  html[data-dir="back"]::view-transition-new(root) { animation-name: turn-in-back; }
  ::view-transition-group(*) { animation-duration: .45s; animation-timing-function: var(--ease); }
}
html[data-vt="theme"]::view-transition-old(root), html[data-vt="theme"]::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html[data-vt="theme"] .bar, html[data-vt="theme"] .art-title { view-transition-name: none !important; }
html[data-vt="fade"]::view-transition-old(root) { animation: fade-out .22s ease both; }
html[data-vt="fade"]::view-transition-new(root) { animation: fade-in .38s ease both; }
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes turn-out { to { opacity: 0; transform: translateX(-36px) scale(.99); } }
@keyframes turn-in { from { opacity: 0; transform: translateX(48px); } }
@keyframes turn-out-back { to { opacity: 0; transform: translateX(36px) scale(.99); } }
@keyframes turn-in-back { from { opacity: 0; transform: translateX(-48px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  /* 快讯不滚动时改成可以左右滑着看，重复的那一份藏起来 */
  .ticker-track { animation: none; }
  .ticker-view { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .ticker-view::-webkit-scrollbar { display: none; }
  .ticker-track span[aria-hidden] { display: none; }
  .ticker-k::after { display: none; }
}

/* ---------- 响应式 ---------- */
@media (max-width: 1080px) {
  .np > .s8, .np > .s7, .np > .s6, .np > .s5, .np > .s9 { grid-column: span 12; }
  .np > .s4, .np > .s3 { grid-column: span 6; }
  .np > * { padding-inline: 0; border-left: 0; }
  .np > .s4:nth-child(even), .np > .s3.pair-r { padding-left: var(--col); border-left: 1px solid var(--hair); }
  .np > .s4:nth-child(odd):not(:first-child), .np > .s3.pair-l { padding-right: var(--col); }
  .np > * + * { border-top: 1px solid var(--hair); padding-top: 22px; margin-top: 22px; }
  .np > .s4 + .s4:nth-child(even), .np > .s3.pair-r { border-top: 0; }
  .np.front-mid > .s6 { order: -1; }
  .nw-top { grid-template-columns: 1fr; }
  .phones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article { --mw: 200px; }
}
@media (max-width: 860px) {
  .mh { grid-template-columns: 1fr; }
  .mh-en { display: none; }
  .lead-grid, .wk-lead, .sub-grid, .db-form, .lightbox, .qc { grid-template-columns: 1fr; }
  .sub-paper { position: static; }
  .gz-pages { max-height: none; overflow: visible; }
  .read-grid { grid-template-columns: minmax(0, 1fr); }
  .tools {
    position: fixed; top: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%);
    flex-direction: row; background: var(--paper-hi); box-shadow: var(--shadow-pop); padding: 5px; border: 1px solid var(--hair); z-index: 45;
    max-width: calc(100vw - 16px);
  }
  .tool { width: 46px; min-height: 46px; flex: 0 1 46px; min-width: 36px; }
  .tool-sep { width: 1px; height: auto; margin: 8px 2px; }
  .article { padding-bottom: 80px; }
  .art-body-wrap { grid-template-columns: minmax(0, 1fr); }
  .article { --mw: 0px; --mgap: 0px; }
  .margin { display: none; }
  .article:not(.is-vert) .vnotes { display: grid; gap: 12px; margin-top: 20px; }
  .article .vnotes .mnote { position: static; }
  .strip { grid-template-columns: 1fr 1fr; }
  .strip > :first-child { grid-column: 1 / -1; }
  .letters-row, .coop { grid-template-columns: 1fr; }
  .letters-row > article, .coop > div { padding: 14px 0; }
  .letters-row > article + article, .coop > div + div { border-left: 0; border-top: 1px solid var(--hair); }
  .tl { grid-template-columns: 1fr; gap: 18px; }
  .tl::before { left: 11px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: var(--hair); }
  .tl li { display: grid; grid-template-columns: 24px 1fr; gap: 0 14px; padding: 0; }
  .tl li > :not(.dot) { grid-column: 2; }
  .tl .when { margin-top: 2px; }
  .db-cols { grid-template-columns: 1fr; }
  .db-cols .divider { display: none; }
  .colo { grid-template-columns: 1fr; }
  .colo-price { text-align: left; }
  .ph { grid-template-columns: auto minmax(0, 1fr); }
  .ph-meta { grid-column: 1 / -1; justify-self: start; text-align: left; margin-top: 10px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  :root { --read-fs: 17.5px; }
  .np > .s4, .np > .s3 { grid-column: span 12; padding-inline: 0 !important; border-left: 0 !important; }
  .np > .s4 + .s4:nth-child(even), .np > .s3.pair-r { border-top: 1px solid var(--hair); }
  .mh-title { gap: 10px; }
  .mh-vert { display: none; }
  .mh-line .yi { margin-left: 0; }
  .fw-mini { grid-template-columns: 1fr; }
  .fw-mini > article + article { border-left: 0; padding-left: 0; border-top: 1px solid var(--hair); }
  .phones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .phone-screen { border-width: 5px; border-radius: 20px; }
  .bar-tools .icon-btn span, .bar-tools .icon-btn kbd { display: none; }
  .btn-write span { display: none; }
  .btn-write { padding: 0 10px; }
  .tab { padding: 0 9px; font-size: 15px; }
  .tab b { display: none; }
  /* 手机上版面标签单独占第二行，五个版一眼都能看到 */
  :root { --bar-h: 97px; }
  .bar-in { flex-wrap: wrap; height: auto; gap: 0 6px; }
  .bar-brand, .bar-tools { height: 54px; }
  .bar-tools { margin-left: auto; }
  .tabs { order: 3; flex: 1 0 100%; height: 42px; border-top: 1px solid var(--hair); }
  .tab { flex: 1 0 auto; justify-content: center; }
  .tools { gap: 3px; }
  .nw-node .nm { font-size: 24px; }
  .nw-node .sc { display: none; }
  .row2 { grid-template-columns: 1fr; }
  .tug-vs { font-size: 34px; }
  .tug-side .who { font-size: 30px; }
  .tug-side .claim { font-size: 16px; }
  .strip { grid-template-columns: 1fr; }
  .pager b { font-size: 28px; }

  /* ---- 手机第一屏：报头压到一小块，头条尽早露出来 ---- */
  .mh-top { display: none; }
  /* 报头压成一行：小社徽 + 报名 + 印章；日期行不要了 */
  .mh { padding-block: 8px; gap: 8px; }
  .mh-title { gap: 10px; }
  .mh-logo { width: 38px; box-shadow: 0 0 0 1px var(--hair); }
  .mh-name { font-size: 42px; line-height: 1; }
  .mh-seal { width: 26px; align-self: center; margin-top: 0; }
  .mh-line { display: none; }
  .front .ticker { display: none; }
  /* 报眼：大方框改成一行——“20 天 · 距某活动 · 报名 →” */
  .ear { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "n t b" "n s b"; align-items: center; gap: 0 10px; padding: 8px 8px 8px 10px; }
  .ear .ear-k, .ear .ear-poster { display: none; }
  .ear-n { grid-area: n; margin: 0; }
  .ear-n .num { font-size: 32px; }
  .ear-n span:last-child { font-size: 15px; }
  .ear-t { grid-area: t; margin: 0; font-size: 14px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .ear-s { grid-area: s; font-size: 12px; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
  .ear-btn { grid-area: b; margin: 0; padding: 9px 10px; gap: 4px; }
  .ear-btn .cta-l { display: none; }
  /* ---- 工具栏：书房、登录、投稿带字，新来的人一眼能认出来；检索、夜读只留图标 ---- */
  .bar-brand, .bar.condensed .bar-brand { display: none; }
  .bar-tools { gap: 6px; }
  .bar-tools .bar-shelf span, .bar-tools .bar-login span, .btn-write span { display: inline; }
  .bar-shelf { order: -1; margin-right: auto; border-color: var(--brand); color: var(--brand-ink); background: color-mix(in srgb, var(--brand) 8%, transparent); font-weight: 700; }
  .bar-tools { flex: 1; }
  .btn-write { padding: 0 12px 0 10px; }
  .user-chip { padding: 0 4px; }
  .user-chip .nm { display: none; }

  /* ---- 手机寸土寸金：非必要的信息直接不显示（电脑上照旧） ---- */
  .m-hide, .twinkle { display: none !important; }
  .front .index-list, .front .lead .jumps { display: none; }   /* 本期导读和版面标签重复；“详见某版”在手机上用标签栏就行 */
  .ph-meta { display: none; }                                   /* 版头的“网络版 · 日期 · 本版编辑” */
  .colo-info > p:not(.colo-dev), .colo-price { display: none; } /* 报尾只留名字和开发者 */
  .colo { gap: 10px; }
  .colo-info { margin: 0; }
  /* 光影照片墙：一排两张（点开是大图），图注只留标题 */
  .masonry { columns: 2; column-gap: 10px; margin-top: 14px; }
  .masonry .ht { margin-bottom: 10px; }
  .masonry figcaption .credit { display: none; }
  .masonry figcaption { font-size: 12px; }

  /* ---- 没有真照片的地方不放程序画的示意图（光影版的示例图除外） ---- */
  .ht:not([data-src]) { display: none; }
  .masonry .ht:not([data-src]) { display: block; }

  /* ---- 往下读时顶栏、底部工具条收起（app.js 给 body 加 chrome-hidden） ---- */
  .bar { transition: transform .28s var(--ease); }
  body.chrome-hidden .bar { transform: translateY(calc(-100% - 2px)); }

  /* ---- 阅读页：版头不要，工具条只留图标、变矮，首字放大也收一点 ---- */
  body[data-route="read"] .ph { display: none; }
  .tools { width: calc(100vw - 24px); justify-content: space-between; gap: 2px; padding: 3px; transition: transform .28s var(--ease), opacity .2s; }
  body.chrome-hidden .tools { transform: translate(-50%, calc(100% + 24px)); opacity: 0; pointer-events: none; }
  .tool { flex: 1 1 0; width: auto; min-width: 0; min-height: 40px; padding: 0; border-color: transparent; }
  .tool span:not(.cnt) { display: none; }
  .tool .cnt { font-size: 10px; }
  .tool-sep { display: none; }
  .art-body.prose-first > p:first-child::first-letter { font-size: 2.3em; }
  .art-head { padding-top: 14px; }

  /* ---- 各版的大版头：顶部标签已经标出在哪一版，手机上不要了 ---- */
  .ph { display: none; }
  .page { padding-top: 14px; }
  /* ---- 筛选压成一行：体裁左右滑，排序缩小放右边；“来源”筛选、“本版头条”“共 N 篇”不要 ---- */
  .toolbar { flex-wrap: nowrap; gap: 8px; padding-bottom: 10px; margin-bottom: 14px; }
  .toolbar .grow, .toolbar .seg[aria-label="来源"] { display: none; }
  .toolbar .chips, .page > .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; flex: 1; }
  .toolbar .chips::-webkit-scrollbar, .page > .chips::-webkit-scrollbar { display: none; }
  .toolbar .chips .chip, .page > .chips .chip { flex: none; }
  .toolbar .chips, .page > .chips { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); padding-right: 24px; }   /* 右边淡出：提示还能往左滑 */
  .toolbar .seg { flex: none; }
  .toolbar .seg button { padding: 7px 9px; font-size: 13px; }
  .wk-lead .card-meta .ui-s, .page > .count { display: none; }
  .wk-lead { padding-bottom: 18px; }
}
@media (min-width: 641px) { .ear-btn .cta-s { display: none; } }

/* ---------- 打印（剪报） ---------- */
@media print {
  body { background: #fff; color: #000; }
  .bar, .masthead, .tools, .colophon, .pager, .letter-form, .ticker, .selpop, .read-progress, .toasts { display: none !important; }
  .art-body-wrap { grid-template-columns: 1fr 200px; }
}

/* ==========================================================================
   账户 · 我的 · 加载
   ========================================================================== */
.boot-wait { padding: 140px 0; text-align: center; font: 400 28px var(--f-brush); color: var(--ink-3); }
.loadbar { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 90; pointer-events: none; opacity: 0; transition: opacity .2s; overflow: hidden; }
.loadbar::before { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; background: var(--brand); animation: loadbar 1s ease-in-out infinite; }
body.is-loading .loadbar { opacity: 1; }
body.is-loading main { opacity: .72; transition: opacity .2s .1s; }
@keyframes loadbar { from { left: -40%; } to { left: 100%; } }

.user-chip { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px 0 4px; border: 1px solid var(--hair); border-radius: 999px; font: 600 13px/1 var(--f-ui); color: var(--ink-2); transition: border-color .2s, color .2s; max-width: 150px; }
.user-chip:hover, .user-chip[aria-current] { border-color: var(--ink); color: var(--ink); }
.user-chip .av { width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: var(--on-ink); display: grid; place-items: center; font: 400 16px/1 var(--f-brush); flex: none; }
.user-chip .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#userSlot { display: contents; }

.btn.wide { width: 100%; }
.btn.is-busy { position: relative; color: transparent !important; }
.btn.is-busy::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 2px solid var(--on-ink); border-right-color: transparent; animation: spin .7s linear infinite; }
.btn:not(.primary):not(.brand).is-busy::after { border-color: var(--ink); border-right-color: transparent; }
@keyframes spin { to { transform: rotate(360deg); } }

.notice { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 22px; background: var(--brand-soft); border-left: 3px solid var(--brand); font: 14.5px/1.6 var(--f-ui); color: var(--ink); }
.notice > span { flex: 1; min-width: 200px; }
.notice .ico { width: 18px; height: 18px; color: var(--brand-ink); }
.notice.warn { background: var(--seal-soft); border-left-color: var(--seal); }
.pend-tag { font: 700 11px/1 var(--f-ui); color: var(--gold-ink); border: 1px solid var(--gold); padding: 3px 5px; letter-spacing: .06em; }
.signer { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font: 13.5px/1.6 var(--f-ui); color: var(--ink-3); }
.signer b { color: var(--ink); font-weight: 600; }
.signer .ico { width: 15px; height: 15px; }
.signer-block { margin: 2px 0 4px; }
.letter-form .actions { align-items: center; }
.pop-sign { flex: 1; font: 15px var(--f-brush); color: rgba(255, 255, 255, .75); align-self: center; }

/* 登录 / 注册 */
dialog.dlg.auth-dlg { width: min(460px, calc(100vw - 32px)); }
.auth { display: grid; gap: 14px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--hair); margin: -4px 0 4px; }
.auth-tabs button { background: none; border: 0; padding: 10px 0 12px; font: 400 22px/1 var(--f-brush); color: var(--ink-3); cursor: pointer; position: relative; }
.auth-tabs button[aria-selected="true"] { color: var(--ink); }
.auth-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: -1px; height: 3px; background: var(--brand); }
.auth-form { display: grid; gap: 14px; }
.auth-form .row2 { gap: 10px; }
.auth-why { display: flex; gap: 8px; align-items: center; font: 14px/1.5 var(--f-ui); color: var(--brand-ink); background: var(--brand-soft); padding: 9px 12px; }
.auth-why .ico { width: 16px; height: 16px; }
.auth-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font: 13.5px var(--f-ui); color: var(--ink-3); }
.auth-step { display: grid; gap: 10px; }
.auth-big { font: 400 30px/1.2 var(--f-brush); }
.auth-hint { font: 13px/1.6 var(--f-ui); color: var(--gold-ink); background: color-mix(in srgb, var(--gold) 12%, transparent); padding: 8px 12px; }
.otp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 6px 0 2px; }
.otp-i {
  width: 100%; aspect-ratio: 5 / 6; text-align: center; font: 700 26px/1 var(--f-num); color: var(--seal);
  background: var(--paper-hi); border: 1.5px solid var(--hair); border-radius: 0; caret-color: var(--seal); transition: border-color .15s, box-shadow .15s;
}
.otp-i:focus { outline: none; border-color: var(--seal); box-shadow: 0 0 0 3px var(--seal-soft); }
.linkish[disabled] { color: var(--ink-3); cursor: default; text-decoration: none; }

/* 我的 */
.auth-hero { max-width: 560px; padding: 20px 0 40px; }
.me-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: calc(var(--col) * 2); align-items: start; }
.my-works li { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--hair); }
.my-works .card-title { margin: 6px 0 4px; }
.review-note { font: 14px/1.7 var(--f-serif); color: var(--ink-2); border-left: 2px solid var(--seal); padding-left: 10px; margin: 6px 0; }
.me-card { border: 1px solid var(--rule); padding: 18px; display: grid; gap: 16px; position: sticky; top: calc(var(--bar-h) + 20px); background: var(--paper); }
.me-id { display: flex; gap: 12px; align-items: center; }
.me-id .av { width: 52px; height: 52px; border-radius: 50%; background: var(--brand); color: var(--on-ink); display: grid; place-items: center; font: 400 28px/1 var(--f-brush); flex: none; }
.me-id b { display: block; font: 900 20px/1.3 var(--f-serif); }
.me-id small { display: block; font: 12.5px var(--f-ui); color: var(--ink-3); margin-bottom: 5px; word-break: break-all; }
.me-form { display: grid; gap: 12px; }
.me-pw summary { cursor: pointer; font: 600 14px var(--f-ui); color: var(--ink-2); padding: 4px 0; }
.me-pw[open] summary { margin-bottom: 10px; }
@media (max-width: 860px) {
  .me-grid { grid-template-columns: 1fr; }
  .me-card { position: static; }
  .user-chip .nm { display: none; }
  .user-chip { padding: 0 4px; }
}

/* 往期争鸣 · 我的：修改与提醒 */
.db-archive ul { display: grid; }
.db-archive li a { display: grid; grid-template-columns: minmax(0, 1fr) 160px auto; gap: 8px 18px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.db-archive li a:hover .t { color: var(--brand-ink); }
.db-archive .t { font: 700 16px/1.5 var(--f-serif); }
.db-archive .bar2 { display: flex; height: 8px; }
.db-archive .bar2 i { display: block; height: 100%; }
.db-archive .bar2 .p { background: var(--brand); }
.db-archive .bar2 .c { background: var(--lake); }
.my-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.me-notify { display: grid; gap: 8px; padding-top: 12px; border-top: 1px dashed var(--hair); }
.field-t { font: 600 13px/1.3 var(--f-ui); color: var(--ink-2); letter-spacing: .04em; }
@media (max-width: 640px) { .db-archive li a { grid-template-columns: 1fr; } }

.arg footer > .ui-s { display: inline-flex; align-items: center; gap: 5px; }
.arg footer .ico { width: 14px; height: 14px; }

/* ---------------------------------------------------------------- 作者 */
a.au { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .25s var(--ease), color .2s; }
a.au:hover, a.au:focus-visible { background-size: 100% 1px; color: var(--brand-ink); }
a.au:hover b, a.au:focus-visible b { color: var(--brand-ink); }
.au-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(18px, 3vw, 40px); align-items: center; padding: 30px 0 24px; border-bottom: 3px double var(--rule); }
.au-seal .seal { display: block; width: clamp(78px, 10vw, 120px); height: auto; color: var(--seal); transform: rotate(-4deg); }
.au-id .kicker { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-bottom: 4px; }
.au-id .kicker > span:not(.g) { font: 13.5px var(--f-ui); color: var(--ink-3); letter-spacing: .06em; }
.au-name { font: 400 clamp(54px, 8.4vw, 104px)/1.02 var(--f-brush); letter-spacing: .03em; overflow-wrap: anywhere; }
.au-sub { margin-top: 8px; font: 14px/1.6 var(--f-ui); color: var(--ink-3); }
.au-stats { display: grid; grid-template-columns: repeat(5, auto); margin: 0; border-left: 1px solid var(--hair); }
.au-stats div { padding: 2px clamp(10px, 1.6vw, 20px); border-right: 1px solid var(--hair); text-align: center; }
.au-stats dt { font: 12px/1.4 var(--f-ui); color: var(--ink-3); letter-spacing: .12em; white-space: nowrap; }
.au-stats dd { margin: 6px 0 0; font-size: clamp(24px, 2.6vw, 34px); line-height: 1; }
.au-stats dd small { font: 13px var(--f-ui); margin-left: 1px; }
.au-genres { display: flex; height: 30px; margin: 18px 0 34px; border: 1px solid var(--rule); background: var(--paper-deep); }
.au-genres.empty-bar { height: 0; border: 0; margin-bottom: 28px; }
.au-genres span { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; overflow: hidden; white-space: nowrap; background: var(--tone-ink); color: var(--on-ink); font: 600 12.5px var(--f-ui); letter-spacing: .1em; }
.au-genres span + span { box-shadow: inset 1px 0 0 var(--paper); }
.au-genres i { font-style: normal; }
.au-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.au-toc { list-style: none; margin: 0; padding: 0; }
.au-toc li { border-bottom: 1px solid var(--hair); }
.au-toc a { display: grid; grid-template-columns: 3.1em minmax(0, auto) minmax(24px, 1fr) auto; gap: 0 12px; align-items: baseline; padding: 16px 0; color: inherit; text-decoration: none; }
.au-toc .no { font-size: 22px; color: var(--ink-3); }
.au-toc .tt { display: grid; gap: 4px; min-width: 0; }
.au-toc .tt b { font: 900 21px/1.35 var(--f-serif); transition: color .2s; }
.au-toc a:hover .tt b { color: var(--brand-ink); }
.au-toc .meta { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font: 12.5px var(--f-ui); color: var(--ink-3); }
.au-toc .ex { font: 14.5px/1.7 var(--f-serif); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.au-toc .dots { align-self: end; margin-bottom: 7px; border-bottom: 2px dotted var(--hair); min-width: 24px; }
.au-toc .cc { align-self: end; font-size: 18px; white-space: nowrap; }
.au-toc .cc small { font: 12px var(--f-ui); color: var(--ink-3); margin-left: 2px; }
.au-side { display: grid; gap: 34px; }
.au-side > section { display: grid; gap: 0; }
.au-anno, .au-arg, .au-letter { display: block; padding: 14px 0; border-bottom: 1px solid var(--hair); color: inherit; text-decoration: none; }
.au-anno q { display: block; font: 15px/1.7 var(--f-serif); color: var(--ink-2); quotes: "“" "”"; background: linear-gradient(transparent 62%, var(--seal-soft) 0); }
.au-anno p { margin-top: 6px; font: 400 20px/1.5 var(--f-brush); color: var(--seal); }
.au-anno small, .au-arg small, .au-letter small { display: block; font: 12.5px/1.5 var(--f-ui); color: var(--ink-3); }
.au-arg { padding-left: 14px; border-left: 3px solid var(--brand); }
.au-arg.con { border-left-color: var(--lake); }
.au-arg + .au-arg { margin-top: 0; }
.au-arg p, .au-letter p { margin: 4px 0; font: 15px/1.7 var(--f-serif); color: var(--ink); }
.au-anno:hover p, .au-arg:hover p, .au-letter:hover p { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.au-none { padding: 24px 0; color: var(--ink-3); font: 15px/1.8 var(--f-ui); }
/* ---------------------------------------------------------------- 关于本站 */
.about-head { padding: 34px 0 26px; border-bottom: 3px double var(--rule); text-align: center; }
.about-name { font: 400 clamp(56px, 9vw, 112px)/1.05 var(--f-brush); letter-spacing: .08em; }
.about-sub { margin-top: 10px; font: italic 15px/1.6 var(--f-serif); color: var(--ink-3); }
.about-host { margin-top: 6px; font: 13px/1.6 var(--f-ui); color: var(--ink-3); letter-spacing: .1em; }
.about-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; padding-top: 30px; }
.about-secs ol { list-style: none; margin: 0; padding: 0; }
.about-secs li { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 2px 16px; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.about-secs li a { grid-row: span 2; display: flex; align-items: baseline; gap: 10px; color: inherit; text-decoration: none; }
.about-secs li a b { font-size: 15px; color: var(--ink-3); font-weight: 400; }
.about-secs li a span { font: 400 26px/1.1 var(--f-brush); transition: color .2s; }
.about-secs li a:hover span { color: var(--brand-ink); }
.about-secs li p { font: 15px/1.7 var(--f-serif); color: var(--ink-2); }
.about-secs li small { font: 12.5px var(--f-ui); color: var(--ink-3); }
.about-dev { position: relative; display: grid; justify-items: center; text-align: center; padding: 34px clamp(18px, 3vw, 34px) 30px; border: 1px solid var(--rule); outline: 1px solid var(--rule); outline-offset: 4px; background: var(--paper-deep); }
.dev-label { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 0 12px; background: var(--paper); font: 700 13px/24px var(--f-ui); letter-spacing: .3em; color: var(--ink-2); white-space: nowrap; }
.dev-seal .seal { display: block; width: 84px; height: auto; color: var(--seal); transform: rotate(-5deg); margin-bottom: 14px; }
.dev-name { font: 400 clamp(44px, 5.4vw, 64px)/1.1 var(--f-brush); letter-spacing: .06em; overflow-wrap: anywhere; }
.dev-role { margin-top: 10px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font: 14px/1.6 var(--f-ui); color: var(--ink-3); letter-spacing: .12em; }
.dev-note { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hair); font: 15.5px/1.9 var(--f-serif); color: var(--ink-2); text-align: left; white-space: pre-line; }
@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-dev { margin-top: 8px; }
  .about-secs li { grid-template-columns: 1fr; }
  .about-secs li a { grid-row: auto; }
}
@media (max-width: 900px) {
  .au-head { grid-template-columns: auto minmax(0, 1fr); }
  .au-stats { grid-column: 1 / -1; grid-template-columns: repeat(5, minmax(0, 1fr)); border-left: 0; border-top: 1px solid var(--hair); padding-top: 14px; }
  .au-stats div:last-child { border-right: 0; }
  .au-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .au-stats div { padding: 2px 4px; }
  .au-toc a { grid-template-columns: 2.4em minmax(0, 1fr) auto; }
  .au-toc .dots { display: none; }
}

/* 手指点的屏幕：按钮至少 40px 高，文字链接把可点范围往外扩一圈 */
@media (pointer: coarse) {
  .icon-btn, .btn-write, .user-chip { height: 40px; }
  .icon-btn { min-width: 40px; }
  .dlg-x { width: 40px; height: 40px; }
  .agree, .chip, .seg button, .btn.sm { min-height: 40px; }
  .seg label span { display: flex; align-items: center; min-height: 40px; }
  .jump, .card-foot .more { position: relative; }
  .jump::after, .card-foot .more::after { content: ""; position: absolute; inset: -12px -6px; }
}
.me-form .hint { margin: 0 0 4px; font: 13px/1.7 var(--f-ui); color: var(--ink-3); }

/* ---------------------------------------------------------------- 分享海报 */
.poster { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
.poster-frame { position: relative; aspect-ratio: 2 / 3; background: var(--paper-deep); box-shadow: var(--shadow); }
.poster-img { display: block; width: 100%; height: 100%; object-fit: contain; -webkit-touch-callout: default; user-select: auto; }
.poster-wait { position: absolute; inset: 0; display: grid; place-items: center; font: 14px var(--f-ui); color: var(--ink-3); }
.poster-tip { font: 15px/1.7 var(--f-ui); color: var(--ink-2); }
.poster-tip b { color: var(--seal); }
.qc-side .note.warn { color: var(--gold-ink); }
.ear-poster { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 0; border: 0; background: none; cursor: pointer; font: 13px/1.4 var(--f-ui); color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 3px; }
.ear-poster:hover, .ear-poster:focus-visible { color: var(--brand-ink); text-decoration-color: currentColor; }
.ear-poster .ico { width: 14px; height: 14px; }
@media (max-width: 720px) {
  .poster { grid-template-columns: 1fr; }
  .poster-frame { max-width: 360px; width: 100%; margin: 0 auto; }
}