/* 第 19 版「今天读什么」第 3 稿（2026-11-07）· 页面样式
   颜色、字体、顶栏、页脚全用线上 site-v10.dv19-css 的（tools21/extract-chrome.dv19-py 原样抽出，拼在这份前面）。
   这里只写这一页自己的版式。改完跑 tools21/build-css.dv19-py 生成 fb21-daily-css.dv19-js。

   设计主意：今天这一期是一张编好的版面——
   ① 一屏看全：刊头下面左边是第一篇（图、标题、署名、编辑推荐、原文、读原文），右边是这一期的目录（全部标题）。
   ② 每一篇都按读者挑文章的顺序排四层：写什么（标题）→ 为什么值得读（编辑推荐，正文色、字大一档）→ 作者自己的话（原文，次一级灰）→ 去读。
   ③ 三种来源的图放进同一个 16:10 画框：文章截图从页顶取景、深色下压暗一点；作者的图比例合适就铺满；比例特殊的完整显示，底下垫它自己的模糊放大。
   ④ 不做任何要等、要悬停、要滚到才出现的东西；动效只给操作反馈和原地切换。 */

/* ---------- 版心：和顶栏同一套左右边距（线上 .dv19-page-shell） ---------- */
.daily-v19 { --pad: clamp(16px, 3.4vw, 48px); --gap: 32px; --ttl: var(--display); padding-top: 72px; }
.daily-v19 .dv19-wrap { max-width: 1440px; margin: 0 auto; padding: 0 var(--pad); }
.daily-v19 .dv19-g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.daily-v19 h1, .daily-v19 h2, .daily-v19 h3, .daily-v19 p, .daily-v19 ol, .daily-v19 ul, .daily-v19 figure { margin: 0; padding: 0; }
.daily-v19 ol, .daily-v19 ul { list-style: none; }
.daily-v19 .dv19-num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* ---------- 刊头：刊名和期号同一行同一个字号，期号的数字用橙色；右边订阅；下一行立场句和日期 ---------- */
.dv19-mh { padding: 40px 0 0; }
.dv19-mh-in { display: grid; grid-template-columns: 1fr auto; align-items: end; row-gap: 18px; column-gap: 32px; }
.dv19-mh-t { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .4em; font: 700 52px/1 var(--ttl); letter-spacing: .01em; }
.dv19-mh-no { color: var(--ink3); white-space: nowrap; }
.dv19-mh-no b { margin: 0 .1em; color: var(--vis-text); font-weight: 700; }
.dv19-mh-st { color: var(--ink2); font-size: 16px; line-height: 1.75; }
.dv19-mh-dl { justify-self: end; color: var(--ink3); font-size: 13.5px; line-height: 1.75; white-space: nowrap; }
.dv19-mh-dl .dv19-num { color: var(--ink2); }
.dv19-mh-dl i { margin: 0 .5em; font-style: normal; color: var(--line2); }
.dv19-mh-sub { justify-self: end; align-self: center; }

/* ---------- 按钮：主按钮用正文色实底（深色米白、浅色近黑），橙色只留给期号、编辑推荐胶囊和「在这里」的标记 ---------- */
.daily-v19 .dv19-btn, .daily-v19 .dv19-btn2 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 0; font: 600 14.5px/1 var(--sans); letter-spacing: .02em; cursor: pointer; white-space: nowrap; transition: background-color .2s, color .2s, box-shadow .2s, opacity .2s, transform .12s; }
.daily-v19 .dv19-btn { background: var(--ink); color: var(--bg); }
.daily-v19 .dv19-btn2 { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line2); }
.daily-v19 .dv19-btn:active, .daily-v19 .dv19-btn2:active { transform: scale(.97); }
.daily-v19 .dv19-btn fb-ic, .daily-v19 .dv19-btn2 fb-ic { transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
@media (hover: hover) {
  .daily-v19 .dv19-btn:hover { opacity: .86; }
  .daily-v19 .dv19-btn2:hover { box-shadow: inset 0 0 0 1px var(--ink); }
  .daily-v19 .dv19-btn:hover fb-ic[name="ext"] { transform: translate(2px, -2px); }
}
.daily-v19 .dv19-lnk { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 8px; background: none; border: 0; color: var(--ink2); font: 500 14.5px/1 var(--sans); cursor: pointer; transition: color .2s; }
@media (hover: hover) { .daily-v19 .dv19-lnk:hover { color: var(--ink); } }
.daily-v19 .dv19-lnk.dv19-ok, .daily-v19 .dv19-btn2.dv19-ok { color: var(--ok); }
.daily-v19 .dv19-lnk .dv19-ck, .daily-v19 .dv19-btn2 .dv19-ck { display: none; }
.daily-v19 .dv19-ok .dv19-ck { display: inline-block; animation: dv19-pop .28s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes dv19-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- 一套画框：16:10，三种来源同一个样子 ---------- */
.dv19-fr { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg3); }
.dv19-fr::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; }
.dv19-fr img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.dv19-fr.dv19-k-shot img { object-position: 50% 0; }
.dv19-fr.dv19-k-contain .dv19-bg { inset: -24px; width: calc(100% + 48px); height: calc(100% + 48px); filter: blur(22px) saturate(1.1); opacity: .9; }
.dv19-fr.dv19-k-contain .dv19-fg { object-fit: contain; }
:root:not([data-theme="light"]) .dv19-fr.dv19-k-shot img { filter: brightness(.84); }
:root:not([data-theme="light"]) .dv19-fr.dv19-k-contain .dv19-bg { filter: blur(22px) saturate(1.15) brightness(.9); }
:root[data-theme="light"] .dv19-fr.dv19-k-contain .dv19-bg { filter: blur(22px) saturate(1.05) brightness(1.06); }
a.dv19-fr-a { display: block; }
@media (hover: hover) { a.dv19-fr-a:hover .dv19-fr img:not(.dv19-bg) { transform: scale(1.03); } }
@media (hover: none) { a.dv19-fr-a { pointer-events: none; } }

/* ---------- 每一篇：四层 ---------- */
.dv19-pg-n { display: flex; align-items: baseline; gap: 6px; color: var(--ink3); font-size: 13px; }
.dv19-pg-n b { color: var(--ink); font-weight: 500; }
.dv19-pg-t { font: 700 34px/1.24 var(--ttl); letter-spacing: .005em; text-wrap: pretty; }
.dv19-pg-t a { background: linear-gradient(var(--vis), var(--vis)) 0 100% / 0 2px no-repeat; transition: background-size .6s cubic-bezier(.19, 1, .22, 1); }
@media (hover: hover) { .dv19-pg-t a:hover { background-size: 100% 2px; } }
.dv19-by { display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; row-gap: 2px; color: var(--ink3); font-size: 13.5px; line-height: 1.6; }
.dv19-by .dv19-bn { color: var(--ink); font-weight: 500; }
@media (hover: hover) { .dv19-by a.dv19-bn:hover { color: var(--vis-text); } }
.dv19-cat { display: inline-flex; align-items: center; gap: 6px; }
.dv19-cat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--topic-color, var(--ink3)); }
.dv19-rec { color: var(--ink); font-size: 17px; line-height: 1.78; text-wrap: pretty; }
.dv19-tag-e { display: inline-block; margin-right: 10px; padding: 4px 10px; border-radius: 999px; background: var(--vis); color: #0a0a0a; font: 600 11px/1 var(--sans); letter-spacing: .04em; vertical-align: 2px; }
.dv19-qt { color: var(--ink2); font-size: 15px; line-height: 1.85; text-wrap: pretty; }
.dv19-tag-o { display: inline-block; margin-right: 10px; padding: 3px 6px; box-shadow: inset 0 0 0 1px var(--line2); color: var(--ink2); font: 11px/1 var(--mono); letter-spacing: .06em; vertical-align: 2px; }
.dv19-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.dv19-pg-hit .dv19-pg-n b { animation: dv19-hit 1.4s ease-out; }
@keyframes dv19-hit { 0%, 30% { color: var(--vis-text); } 100% { color: var(--ink); } }

/* ---------- 第一屏：大图舞台（图 7 栏 + 字 5 栏）+ 下面一排篇目（DD 11-07：要美观、有设计感、有交互，不挤）
   一排篇目就是遥控器：电脑悬停或点哪篇，上面就换成哪篇；默认第一篇（分享落点是被分享的那篇）。打开页面时什么都不动。 ---------- */
.dv19-iss { padding: 36px 0 0; }
.dv19-st-track { position: relative; display: grid; }
.dv19-sl { grid-area: 1 / 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.dv19-sl[data-on] { opacity: 1; pointer-events: auto; transition: opacity .18s ease; }
.dv19-sl > .dv19-fig { grid-column: 1 / 8; }
.dv19-sl > .dv19-tx { grid-column: 8 / 13; display: flex; flex-direction: column; }
.dv19-st-n { display: flex; align-items: baseline; gap: 12px; }
.dv19-st-n b { color: var(--vis-text); font: 700 64px/.86 var(--ttl); letter-spacing: -.01em; }
.dv19-st-n .dv19-num { color: var(--ink3); font-size: 13px; }
.dv19-sl .dv19-pg-t { margin-top: 26px; font-size: 34px; line-height: 1.26; }
.dv19-sl .dv19-by { margin-top: 14px; }
.dv19-sl .dv19-rec { margin-top: 24px; }
.dv19-sl .dv19-qt { margin-top: 14px; }
.dv19-sl .dv19-acts { margin-top: 30px; }
/* 换到另一篇：字一层一层浮上来，图从 1.04 落回原大；只在操作的时候出现 */
.dv19-sl.dv19-in > .dv19-tx > * { animation: dv19-rise .5s cubic-bezier(.2, .8, .2, 1) both; }
.dv19-sl.dv19-in > .dv19-tx > :nth-child(2) { animation-delay: .04s; }
.dv19-sl.dv19-in > .dv19-tx > :nth-child(3) { animation-delay: .08s; }
.dv19-sl.dv19-in > .dv19-tx > :nth-child(4) { animation-delay: .12s; }
.dv19-sl.dv19-in > .dv19-tx > :nth-child(5) { animation-delay: .16s; }
.dv19-sl.dv19-in > .dv19-tx > :nth-child(6) { animation-delay: .2s; }
.dv19-sl.dv19-in .dv19-fr img:not(.dv19-bg) { animation: dv19-settle .7s cubic-bezier(.2, .8, .2, 1) both; }
.dv19-sl.dv19-in .dv19-fr img.dv19-bg { animation: dv19-fadein .5s ease both; }
@keyframes dv19-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes dv19-settle { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes dv19-fadein { from { opacity: 0; } to { opacity: .9; } }

.dv19-strip { position: relative; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); column-gap: var(--gap); margin-top: 34px; }
.dv19-si { position: relative; display: grid; grid-template-columns: 104px 1fr; grid-template-rows: auto 1fr; column-gap: 14px; row-gap: 7px; align-items: start; padding: 18px 0 2px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.dv19-si .dv19-fr { grid-row: 1 / 3; transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.dv19-si-n { color: var(--ink3); font: 700 17px/1 var(--ttl); transition: color .2s; }
.dv19-si-t { color: var(--ink2); font-size: 14px; line-height: 1.5; text-wrap: pretty; transition: color .2s; }
.dv19-si.dv19-on .dv19-si-n { color: var(--vis-text); }
.dv19-si.dv19-on .dv19-si-t { color: var(--ink); }
@media (hover: hover) { .dv19-si:hover .dv19-si-t { color: var(--ink); } .dv19-si:hover .dv19-fr { transform: translateY(-3px); } }
.dv19-si:focus-visible { outline: 2px solid var(--vis); outline-offset: 4px; }
.dv19-strip.dv19-many { column-gap: 24px; }
.dv19-strip.dv19-many .dv19-si { grid-template-columns: 1fr; grid-template-rows: auto auto; row-gap: 8px; }
.dv19-strip.dv19-many .dv19-si .dv19-fr { display: none; }
.dv19-strip.dv19-many .dv19-si-t { font-size: 13.5px; }
.dv19-si-bar { position: absolute; left: 0; top: 0; width: 0; height: 2px; background: var(--vis); pointer-events: none; transition: transform .45s cubic-bezier(.2, .8, .2, 1), width .45s cubic-bezier(.2, .8, .2, 1); }

/* ---------- 分区：上周最值得读 + 订阅 / 上个月最值得读 / 专题 / 往期，底色分段，不加分割线 ---------- */
.dv19-band { padding: 112px 0; }
.dv19-band.dv19-alt { background: var(--bg2); }
.dv19-iss + .dv19-band { margin-top: 112px; }
.dv19-sh { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 16px; font: 700 32px/1.2 var(--ttl); }
.dv19-sh .dv19-num, .dv19-sh .dv19-sd { color: var(--ink3); font: 400 15px/1 var(--mono); letter-spacing: .02em; }
.dv19-sh .dv19-sd { font-family: var(--sans); }

/* 小卡（最值得读、往期共用）：小图 + 标题 + 推荐语 + 署名 */
.dv19-mini { display: grid; grid-template-columns: var(--th, 200px) 1fr; column-gap: 24px; align-items: start; }
.dv19-mini .dv19-fr-a { grid-row: 1 / 4; }
.dv19-mini .dv19-mt { font: 700 19px/1.4 var(--ttl); text-wrap: pretty; }
.dv19-mini .dv19-mt a { background: linear-gradient(var(--vis), var(--vis)) 0 100% / 0 2px no-repeat; transition: background-size .6s cubic-bezier(.19, 1, .22, 1); }
@media (hover: hover) { .dv19-mini .dv19-mt a:hover { background-size: 100% 2px; } }
.dv19-mini .dv19-mr { margin-top: 8px; color: var(--ink2); font-size: 14.5px; line-height: 1.75; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dv19-mini .dv19-by { margin-top: 8px; font-size: 13px; }

/* 上周最值得读（左 8 栏）+ 订阅（右 4 栏）：周信寄的就是左边这 3 篇 */
.dv19-wk { align-items: start; }
.dv19-wk-l { grid-column: 1 / 9; }
.dv19-wk-l .dv19-bl { margin-top: 40px; }
.dv19-bl > li + li { margin-top: 36px; }
.dv19-sub { grid-column: 9 / 13; }
.dv19-sub .dv19-sh { margin-bottom: 40px; }
.dv19-sub-w h3 { display: flex; align-items: center; gap: 10px; font: 600 17px/1.4 var(--sans); }
.dv19-sub-w h3 fb-ic { color: var(--ink2); }
.dv19-sub-w p { margin-top: 8px; color: var(--ink2); font-size: 14.5px; line-height: 1.75; }
.dv19-sub-f { display: flex; margin-top: 18px; }
.dv19-sub-f input { flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 14px; border: 0; border-radius: 0; background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line2); font: 15px/1 var(--sans); outline: none; transition: box-shadow .2s; }
.dv19-band.dv19-alt .dv19-sub-f input { background: var(--bg); }
.dv19-sub-f input::placeholder { color: var(--ink3); }
.dv19-sub-f input:focus { box-shadow: inset 0 0 0 1px var(--ink); }
.dv19-sub-f .dv19-btn { min-height: 48px; }
.dv19-sub-r { margin-top: 12px; font-size: 14px; line-height: 1.7; color: var(--ink2); }
.dv19-sub-r:empty { display: none; }
.dv19-sub-r.dv19-is-ok { color: var(--ink); }
.dv19-sub-r.dv19-is-ok::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--ok); vertical-align: 1px; }
.dv19-sub-r.dv19-is-err { color: var(--danger); }
.dv19-sub-r.dv19-in { animation: dv19-rin .24s ease-out; }
@keyframes dv19-rin { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.dv19-sub-rd { margin-top: 40px; }
.dv19-sub-rd .dv19-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dv19-sub-rd .dv19-btn2 { width: 100%; }
.daily-v19 .dv19-btn2.dv19-svc { justify-content: flex-start; gap: 10px; padding: 0 16px; }
.dv19-svc-ic { flex: 0 0 auto; display: block; }
.dv19-sub-u { display: grid; grid-template-columns: auto 1fr auto; align-items: center; margin-top: 8px; box-shadow: inset 0 0 0 1px var(--line2); }
.dv19-sub-u .dv19-ui { display: flex; padding-left: 14px; color: var(--ink3); }
.dv19-sub-u code { overflow: hidden; padding: 0 10px; color: var(--ink2); font: 13px/44px var(--mono); white-space: nowrap; text-overflow: ellipsis; }
.dv19-sub-u .dv19-btn2 { width: auto; gap: 8px; box-shadow: inset 1px 0 0 var(--line2); }
.dv19-sub-u .dv19-btn2 .dv19-ci { display: inline-flex; color: var(--ink2); }
.dv19-sub-u .dv19-btn2.dv19-ok .dv19-ci { display: none; }
.dv19-sub-rd p { margin-top: 10px; color: var(--ink3); font-size: 13px; line-height: 1.7; }
/* 博主群：先说为什么加（线上虫洞规则页的原句），再给明确的按钮 */
.dv19-sub-tg { margin-top: 40px; }
.dv19-sub-tg p { color: var(--ink2); font-size: 14px; line-height: 1.75; }
.daily-v19 .dv19-btn2.dv19-tg { width: 100%; justify-content: flex-start; gap: 10px; margin-top: 14px; padding: 0 16px; }
.dv19-btn2.dv19-tg span { flex: 1 1 auto; }
.dv19-btn2.dv19-tg fb-ic { color: var(--ink2); }
@media (hover: hover) { .dv19-btn2.dv19-tg:hover fb-ic { transform: translateX(3px); } }

/* 上个月最值得读：3 篇一排（电脑图在上；手机和上周一样小图在右） */
.dv19-bm { margin-top: 40px; }
.dv19-bm > li { grid-column: span 4; }
.dv19-bm .dv19-mini { display: block; }
.dv19-bm .dv19-mini .dv19-fr-a { margin-bottom: 18px; }
.dv19-bm .dv19-mini .dv19-mt { font-size: 20px; }
.dv19-bm .dv19-mini .dv19-mr { -webkit-line-clamp: 3; }
.dv19-bm .dv19-mini .dv19-by { margin-top: 10px; }

/* 专题：按话题串起来的几组，组名 + 一句话 + 编号的篇目（和题材筛选的小圆胶囊明显不是一种东西） */
.dv19-tp { margin-top: 48px; row-gap: 72px; }
.dv19-tp-g { grid-column: span 4; }
.dv19-tp-g h3 { font: 700 22px/1.35 var(--ttl); }
.dv19-tp-g > p { margin-top: 10px; color: var(--ink2); font-size: 14.5px; line-height: 1.75; }
.dv19-tp-g ol { margin-top: 18px; counter-reset: tp; }
.dv19-tp-g li { counter-increment: tp; }
.dv19-tp-g li a { display: grid; grid-template-columns: 22px 1fr 88px; column-gap: 12px; align-items: start; padding: 12px 0; }
.dv19-tp-g li a::before { content: counter(tp, decimal-leading-zero); padding-top: 2px; color: var(--ink3); font: 12px/1.6 var(--mono); }
.dv19-tp-g .dv19-tt { color: var(--ink); font-size: 15px; font-weight: 500; line-height: 1.55; text-wrap: pretty; }
.dv19-tp-g .dv19-tb { display: block; margin-top: 4px; color: var(--ink3); font-size: 12.5px; font-weight: 400; }
.dv19-tp-g .dv19-fr { grid-column: 3; }
@media (hover: hover) { .dv19-tp-g li a:hover .dv19-tt { color: var(--vis-text); } }
.dv19-tp-x { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin-top: 56px; color: var(--ink3); font-size: 14px; }
.dv19-tp-x a { min-height: 44px; display: inline-flex; align-items: center; color: var(--ink2); }

/* 往期：题材筛选在往期标题下面；一期一组，期号一行，每篇一行 */
.dv19-cats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.dv19-cats a { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line2); color: var(--ink2); font-size: 14px; transition: background-color .2s, color .2s, box-shadow .2s; }
.dv19-cats a .dv19-num { color: var(--ink3); font-size: 12px; transition: color .2s; }
.dv19-cats a[data-daily-category]:not([data-daily-category=""])::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--topic-color); }
.dv19-cats a.dv19-on { background: var(--ink); color: var(--bg); box-shadow: none; }
.dv19-cats a.dv19-on .dv19-num { color: var(--bg); opacity: .62; }
@media (hover: hover) { .dv19-cats a:not(.dv19-on):hover { box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); } }
.dv19-days { margin-top: 56px; }
.dv19-day + .dv19-day { margin-top: 64px; }
.dv19-day-h { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 14px; }
.dv19-day-h b { font: 700 20px/1.3 var(--ttl); }
.dv19-day-h span { color: var(--ink3); font-size: 13.5px; }
.dv19-day-l { margin-top: 24px; row-gap: 32px; }
.dv19-day-l > li { grid-column: span 6; }
.dv19-day-l .dv19-mini { --th: 176px; }
.dv19-day-l .dv19-mt { font-size: 17.5px; }
/* 选了题材以后每期只剩一两篇：两期并排，不留半边空 */
.dv19-days.dv19-f { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 56px; }
.dv19-days.dv19-f .dv19-day + .dv19-day { margin-top: 0; }
.dv19-days.dv19-f .dv19-day-l > li { grid-column: span 12; }
.dv19-days.dv19-f .dv19-lastseen { grid-column: 1 / -1; }
.dv19-ld { display: flex; justify-content: center; align-items: center; min-height: 96px; margin-top: 48px; color: var(--ink3); font-size: 14px; }
.dv19-ld .dv19-dots { display: inline-flex; gap: 4px; margin-right: 10px; }
.dv19-ld .dv19-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: dv19-dot 1s infinite ease-in-out; }
.dv19-ld .dv19-dots i:nth-child(2) { animation-delay: .15s; } .dv19-ld .dv19-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dv19-dot { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.dv19-day.dv19-ent, .dv19-day-l > li.dv19-ent { animation: dv19-ent .32s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 28ms); }
@keyframes dv19-ent { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.dv19-empty { margin-top: 48px; color: var(--ink2); font-size: 15px; }

/* 单期页：页尾去处，回到今天读什么是主按钮，前一期 / 后一期是次一级 */
.dv19-inav { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; padding-top: 88px; }
.dv19-inav .dv19-sp { flex: 1 1 auto; }
.dv19-inav .dv19-pn { display: inline-flex; flex-direction: column; gap: 4px; min-height: 44px; color: var(--ink2); font-size: 13.5px; }
.dv19-inav .dv19-pn b { color: var(--ink); font: 700 18px/1.3 var(--ttl); }
.dv19-inav .dv19-pn.dv19-nx { align-items: flex-end; text-align: right; }
@media (hover: hover) { .dv19-inav .dv19-pn:hover b { color: var(--vis-text); } }

/* 回头的读者：右下角「接着看」（字不变） */
.dv19-cont { position: fixed; z-index: 50; right: 24px; bottom: 24px; }
.dv19-toast { position: fixed; z-index: 70; left: 50%; bottom: 32px; transform: translateX(-50%); padding: 12px 18px; background: var(--ink); color: var(--bg); font-size: 14px; }
.dv19-lastseen { display: flex; align-items: center; gap: 14px; margin: 64px 0 0; color: var(--vis-text); font-size: 13.5px; }
.dv19-lastseen::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--vis); opacity: .6; }

/* 单期页：订阅单独一块，放在左半边 */
.dv19-sub-solo { grid-column: 1 / 7; }
@media (max-width: 1099px) { .dv19-sub-solo { grid-column: 1 / 13; margin-top: 0; } }

/* ---------- 平板与小电脑 ---------- */
@media (max-width: 1279px) {
  .dv19-mh-t { font-size: 56px; }
  .dv19-pg-t { font-size: 30px; }
  .dv19-sl .dv19-pg-t { font-size: 30px; }
  .dv19-st-n b { font-size: 56px; }
}
@media (max-width: 1099px) {
  .daily-v19 { --gap: 24px; }
  .dv19-mh-t { font-size: 44px; }
  .dv19-sl > .dv19-fig { grid-column: 1 / 7; }
  .dv19-sl > .dv19-tx { grid-column: 7 / 13; }
  .dv19-sl .dv19-pg-t { font-size: 26px; }
  .dv19-st-n b { font-size: 44px; }
  .dv19-si { grid-template-columns: 1fr; }
  .dv19-si .dv19-fr { grid-row: auto; margin-bottom: 4px; }
  .dv19-wk-l, .dv19-sub { grid-column: 1 / 13; }
  .dv19-sub { margin-top: 72px; max-width: 560px; }
  .dv19-bm > li { grid-column: span 6; }
  .dv19-tp-g { grid-column: span 6; }
  .dv19-day-l > li { grid-column: span 12; }
  .dv19-days.dv19-f { display: block; }
  .dv19-days.dv19-f .dv19-day + .dv19-day { margin-top: 52px; }
}

/* ---------- 手机：刊头 → 第一篇（大图）→ 其余几篇（小图在标题右边，一屏多看几篇）→ 回顾 → 订阅 → 往期 ---------- */
@media (max-width: 600px) {
  .daily-v19 { --gap: 16px; padding-top: 64px; }
  .daily-v19 .dv19-g12 { display: block; }
  .dv19-mh { padding-top: 24px; }
  .dv19-mh-in { grid-template-columns: 1fr auto; row-gap: 8px; column-gap: 12px; }
  .dv19-mh-t { grid-column: 1 / 3; grid-row: 1; font-size: 28px; column-gap: .34em; }
  .dv19-mh-dl { grid-column: 1; grid-row: 2; align-self: center; justify-self: start; font-size: 12px; white-space: nowrap; }
  .dv19-mh-dl i { margin: 0 .3em; }
  .dv19-mh-sub { grid-column: 2; grid-row: 2; align-self: center; }
  .dv19-mh-sub.dv19-btn2 { min-height: 44px; padding: 0 10px; gap: 6px; font-size: 13.5px; }
  .dv19-mh-st { grid-column: 1 / 3; grid-row: 3; margin-top: 2px; font-size: 14.5px; line-height: 1.7; }
  .dv19-iss { padding-top: 20px; }
  /* 手机：上面一排编号，下面左右滑；下一篇露出一条边，告诉你能滑 */
  .dv19-st-wrap { display: flex; flex-direction: column; }
  .dv19-strip { order: -1; display: flex; gap: 2px; margin: 0 0 10px -10px; }
  .dv19-si { display: flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0; }
  .dv19-si .dv19-fr, .dv19-si-t { display: none; }
  .dv19-si-n { font-size: 16px; }
  .dv19-si-bar { top: auto; bottom: 5px; }
  .dv19-st { margin: 0 calc(-1 * var(--pad)); }
  .dv19-st-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--pad); scroll-padding: 0 var(--pad); scrollbar-width: none; overscroll-behavior-x: contain; }
  .dv19-st-track::-webkit-scrollbar { display: none; }
  .dv19-sl { flex: 0 0 calc(100% - 22px); display: block; opacity: 1; pointer-events: auto; transition: none; scroll-snap-align: start; scroll-snap-stop: always; }
  .dv19-sl > .dv19-tx { margin-top: 14px; }
  .dv19-st-n b { font-size: 26px; }
  .dv19-st-n .dv19-num { font-size: 12px; }
  .dv19-sl .dv19-pg-t { margin-top: 10px; font-size: 22px; line-height: 1.32; }
  .dv19-sl .dv19-by { margin-top: 8px; font-size: 13px; }
  .dv19-sl .dv19-rec { margin-top: 12px; font-size: 15px; line-height: 1.7; }
  .dv19-sl .dv19-qt { margin-top: 8px; font-size: 14px; line-height: 1.7; }
  .dv19-sl .dv19-acts { margin-top: 14px; }
  .dv19-sl.dv19-in > .dv19-tx > *, .dv19-sl.dv19-in .dv19-fr img { animation: none; }
  .dv19-band { padding: 72px 0; }
  .dv19-iss + .dv19-band { margin-top: 72px; }
  .dv19-sh { font-size: 26px; column-gap: 12px; }
  .dv19-sh .dv19-num, .dv19-sh .dv19-sd { font-size: 13.5px; }
  .dv19-mini { grid-template-columns: 1fr 96px; column-gap: 14px; }
  .dv19-mini .dv19-fr-a { grid-column: 2; grid-row: 1 / 3; }
  .dv19-mini .dv19-mt { grid-column: 1; grid-row: 1; font-size: 17px; }
  .dv19-mini .dv19-mr { grid-column: 1 / 3; -webkit-line-clamp: 3; font-size: 14px; }
  .dv19-mini .dv19-by { grid-column: 1 / 3; font-size: 12.5px; }
  .dv19-wk-l .dv19-bl, .dv19-bm { margin-top: 28px; }
  .dv19-bl > li + li, .dv19-bm > li + li { margin-top: 32px; }
  .dv19-bm .dv19-mini { display: grid; }
  .dv19-bm .dv19-mini .dv19-fr-a { margin-bottom: 0; }
  .dv19-bm .dv19-mini .dv19-mt { font-size: 17px; }
  .dv19-sub { margin-top: 64px; max-width: none; }
  .dv19-sub .dv19-sh { margin-bottom: 24px; }
  .dv19-tp { margin-top: 32px; }
  .dv19-tp-g + .dv19-tp-g { margin-top: 56px; }
  .dv19-tp-g li a { grid-template-columns: 22px 1fr 72px; padding: 10px 0; }
  .dv19-cats { gap: 8px; margin-top: 20px; }
  .dv19-cats a { height: 44px; padding: 0 14px; }
  .dv19-days { margin-top: 40px; }
  .dv19-day + .dv19-day { margin-top: 52px; }
  .dv19-day-l { margin-top: 18px; }
  .dv19-day-l > li + li { margin-top: 28px; }
  .dv19-day-l .dv19-mini { --th: 96px; }
  .dv19-day-l .dv19-mt { font-size: 16.5px; }
  .dv19-inav { gap: 12px 24px; padding-top: 56px; }
  .dv19-inav .dv19-sp { display: none; }
  .dv19-cont { right: 16px; bottom: 16px; left: 16px; }
  .dv19-cont .dv19-btn { width: 100%; }
}
@media (max-width: 380px) {
  .dv19-mh-t { font-size: 26px; }
}

/* ---------- 触屏：卡片里只有标题、读原文、分享可点（发送件第六节），点击区都不小于 44 ---------- */
@media (hover: none) {
  .dv19-by a.dv19-bn { pointer-events: none; }
  .dv19-pg-t a, .dv19-mini .dv19-mt a { display: block; padding: 11px 0; margin: -11px 0; }
}

/* ---------- 减少动态效果：所有过渡、进场、悬停放大都不做，滚动直接跳 ---------- */
@media (prefers-reduced-motion: reduce) {
  .daily-v19 { scroll-behavior: auto; }
  .daily-v19 *, .daily-v19 *::before, .daily-v19 *::after { animation: none !important; transition: none !important; }
}

/* 没有脚本时每篇都摊开；增强后只改变视觉层，未选篇目仍留在读屏树里。 */
.daily-v19:not(.dv19-enhanced) .dv19-st-track { display: block; }
.daily-v19:not(.dv19-enhanced) .dv19-sl { opacity: 1; pointer-events: auto; }
.daily-v19:not(.dv19-enhanced) .dv19-sl + .dv19-sl { margin-top: 64px; }
.daily-v19:not(.dv19-enhanced) .dv19-strip { display: none; }
.daily-v19 [hidden] { display: none !important; }
.daily-v19 .dv19-note { grid-column: 1 / -1; margin-top: 10px; padding: 14px 18px; background: var(--bg2); color: var(--ink2); font-size: 14px; line-height: 1.7; }
.daily-v19 .dv19-sub-solo { margin-top: 0; }
.daily-v19 .dv19-solo-band { margin-top: 112px; }
.daily-v19 .dv19-tx, .daily-v19 .dv19-mini, .daily-v19 .dv19-tp-g { min-width: 0; overflow-wrap: anywhere; }
.daily-v19 .dv19-tx.dv19-no-image { grid-column: 1 / -1; }
.daily-v19 .dv19-sub-f { flex-wrap: wrap; }
.daily-v19 .dv19-sub-f input[type="email"] { flex-basis: 0; }
.daily-v19 .dv19-sub-r { flex: 0 0 100%; }
.daily-v19 .dv19-band, .daily-v19 #subscribe, .daily-v19 .dv19-day { scroll-margin-top: 96px; }
@media (min-width: 601px) { .daily-v19 .dv19-strip:not(.dv19-many) .dv19-si { grid-template-columns: min(104px, 34%) 1fr; } }
@media (min-width: 601px) and (max-width: 1099px) { .daily-v19 .dv19-strip:not(.dv19-many) .dv19-si { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .daily-v19:not(.dv19-enhanced) .dv19-st-track { overflow: visible; }
  .daily-v19:not(.dv19-enhanced) .dv19-st { margin: 0; }
  .daily-v19:not(.dv19-enhanced) .dv19-st-track { padding: 0; }
  .daily-v19 .dv19-solo-band { margin-top: 72px; }
}

.daily-v19 .dv19-mini:not(:has(.dv19-fr-a)) { grid-template-columns: 1fr; }
.daily-v19 .dv19-mini:not(:has(.dv19-fr-a)) > * { grid-column: 1; }
.daily-v19 .dv19-year-muted { color: var(--ink3); }
/* 7–8 篇在窄手机上仍保留 44px 点击区，编号只在这一排内横向滚动。 */
@media (max-width: 600px) {
  .daily-v19 .dv19-strip { max-width: calc(100% + 10px); overflow-x: auto; scrollbar-width: none; }
  .daily-v19 .dv19-strip.dv19-many { column-gap: 2px; }
  .daily-v19 .dv19-si { flex: 0 0 44px; }
}