/* ADR-3396 指南列表页与文章页:叠在 site.css 与 site-sections.css(眉标、收尾带)之上,字号阶梯与卡片沿用首页 home.css 的处方。
   颜色一律走 token,暗色模式随 token 生效。原来内联的示例代码块与视频样式也在这里;设备按钮的显隐仍由生成器按需内联(site-mobile-app 测试解析它)。 */
:root{--home-section:96px;--guide-h1:clamp(40px,5.2vw,68px);--guide-article-h1:clamp(36px,4.4vw,54px);--guide-h2:clamp(26px,2.8vw,34px);--guide-article-h2:clamp(24px,2.6vw,30px)}
:root:lang(zh-CN),:root:lang(zh-TW),:root:lang(ja),:root:lang(ko){--guide-h1:clamp(36px,4.6vw,58px);--guide-article-h1:clamp(32px,3.8vw,46px);--guide-h2:clamp(24px,2.5vw,30px);--guide-article-h2:clamp(22px,2.3vw,26px)}
@media(max-width:720px){:root{--home-section:64px}}
body{font-size:16px}

/* 面包屑:与下方版心同一条左边(文章 720px,列表页 1120px) */
.breadcrumb{display:block;width:min(720px,calc(100% - 48px));margin:20px auto 0;padding-top:0;font-size:13.5px;color:var(--muted)} /* 不继承全站 nav 的 flex 两端对齐(设计师门 M5 实拍第 1 轮) */
body:has(.guide-hub) .breadcrumb{width:min(1120px,calc(100% - 48px))}
.breadcrumb a{color:inherit;text-decoration:none}.breadcrumb a:hover{color:var(--text);text-decoration:underline}
.breadcrumb span[aria-hidden]{margin-inline:6px;opacity:.6}
.breadcrumb [aria-current]{display:inline-block} /* 本页名整块换行,不在词中间断开(设计师门 面包屑实拍第 1 轮) */

article h1,article h2{text-wrap:balance}
:root:lang(zh-CN) article :is(h1,h2,strong),:root:lang(zh-TW) article :is(h1,h2,strong),:root:lang(ja) article :is(h1,h2,strong),:root:lang(ko) article :is(h1,h2,strong){letter-spacing:0;word-break:keep-all;overflow-wrap:anywhere}
:root:is(:lang(ar),:lang(zh-CN),:lang(zh-TW),:lang(ja),:lang(ko)) .eyebrow{letter-spacing:0}
/* 衬线字体(Noto Serif SC 子集)里的 ’‘ 是全角字形,拉丁语言下 qu’une 中间会出现空隙(palt 只能收一半)。
   只把这两个字符交给系统里的拉丁衬线字体;找不到时落回原字体链。 */
@font-face{font-family:"WT Latin Quote";font-weight:400 500;src:local("Georgia"),local("Times New Roman"),local("Noto Serif"),local("DejaVu Serif");unicode-range:U+2018-2019}
@font-face{font-family:"WT Latin Quote";font-weight:600 900;src:local("Georgia Bold"),local("Georgia-Bold"),local("Times New Roman Bold"),local("TimesNewRomanPS-BoldMT"),local("Noto Serif Bold"),local("DejaVu Serif Bold");unicode-range:U+2018-2019}
/* 选择器保持简单:scripts/site-serif-text.mjs 按它收集衬线文字做字体子集。中日韩正文几乎不用 ’‘,不再按语言区分。 */
article h1,article h2,article .faq-item summary h3,.guide-card strong,.guide-related>ul a{font-family:"WT Latin Quote",var(--serif)}

/* 列表页 */
.guide-hub{margin:56px auto 0}
.guide-hub h1{font-size:var(--guide-h1);line-height:1.05;letter-spacing:-.015em;margin:0 0 20px;max-width:14em}
.guide-hub .lede{font-size:19px;line-height:1.6;color:var(--muted);max-width:52ch;margin:0}
.guide-group{padding-top:var(--home-section)}
.guide-group h2{font-size:var(--guide-h2);line-height:1.15;letter-spacing:-.01em;margin:0 0 28px}
.guide-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.guide-card{display:flex;flex-direction:column;gap:10px;padding:28px 26px 24px;background:var(--surface);border:1px solid var(--line);border-radius:20px;text-decoration:none;color:var(--text)}
.guide-card strong{font-size:20px;font-weight:600;line-height:1.3;text-wrap:balance}
.guide-card span{font-size:14.5px;line-height:1.6;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.guide-card b{margin-top:auto;padding-top:6px;font-size:14px;font-weight:650;color:var(--wt-link)}
.guide-site-others{margin-top:28px}.guide-cards+.guide-site-others{margin-top:32px}
.guide-site-others h3{margin:0 0 10px;font-size:15px;font-weight:650;color:var(--muted)}
.guide-site-others ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(9em,max-content) 1fr}
.guide-site-others li{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:baseline;gap:4px 12px;padding:11px 2px;border-bottom:1px solid var(--line);font-size:15.5px;color:var(--muted)}
.guide-site-others strong{font-weight:650;color:var(--text)}.guide-site-others a{color:var(--wt-link);font-weight:600;white-space:nowrap}
.guide-group-more{margin:22px 0 0;font-size:15px;font-weight:650}.guide-group-more a{color:var(--wt-link);text-decoration:none}.guide-group-more a::after{content:"\00a0→"}[dir=rtl] .guide-group-more a::after{content:"\00a0←"}
.guide-card i{display:inline-block;font-style:normal}[dir=rtl] .guide-card i{transform:scaleX(-1)}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.guide-card{transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,border-color .25s}.guide-card:hover{transform:translateY(-4px);border-color:var(--bright);box-shadow:0 2px 4px #0C14200A,0 24px 48px #0C14201A}}
@media(hover:hover) and (pointer:fine){.guide-card:hover{border-color:var(--bright)}}
/* 桌面三列不留孤卡:6 列底网格每卡占 2;最后一行 2 张各占 3,只剩 1 张占满一行;整组正好 4 张时 2×2。 */
@media(min-width:1000px){
  .guide-cards{grid-template-columns:repeat(6,minmax(0,1fr))}
  .guide-card{grid-column:span 2}
  .guide-card:nth-child(3n+1):nth-last-child(2),.guide-card:nth-child(3n+2):last-child{grid-column:span 3}
  .guide-card:nth-child(3n+1):last-child{grid-column:span 6}
  .guide-cards:has(>.guide-card:nth-child(4):last-child)>.guide-card{grid-column:span 3}
}

/* 文章页 */
article:not(.guide-hub){max-width:720px;margin:56px auto 0}
article:not(.guide-hub) h1{font-size:var(--guide-article-h1);line-height:1.08;letter-spacing:-.015em;margin:0 0 22px}
article .lede{font-size:19px;line-height:1.65;color:var(--text);max-width:none;margin:0 0 8px}
article:not(.guide-hub) h2{font-size:var(--guide-article-h2);line-height:1.2;letter-spacing:-.01em;margin:52px 0 14px}
article:not(.guide-hub) :is(p:not(.eyebrow),li){font-size:17px;line-height:1.75}
article:not(.guide-hub) p{max-width:none}
article:not(.guide-hub)>ul{list-style:none;padding:0;margin:0 0 14px}
article:not(.guide-hub)>ul>li{position:relative;padding-inline-start:22px;margin-bottom:8px}
article:not(.guide-hub)>ul>li::before{content:"";position:absolute;inset-inline-start:2px;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--bright)}
article .faq-item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px}
article .faq-item summary::-webkit-details-marker{display:none}
article .faq-item summary h3{flex:1;font-size:18px;font-weight:600}
article .faq-item summary::after{content:"+";flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--soft);color:var(--text);font-size:18px;line-height:1}
article .faq-item[open] summary::after{content:"−"}
article .faq-item p{font-size:15.5px}
.article-cta{margin:40px 0 32px}
.guide-install-image{display:block;width:100%;height:auto;margin:24px 0}
.guide-related{display:block;margin:24px 0;line-height:2}
.guide-related a{white-space:normal;overflow-wrap:anywhere}
/* 相关指南(带标题与列表的那种):眉标 + 卡片列表 */
.guide-related:has(>ul){margin:64px 0 0;padding-top:32px;border-top:1px solid var(--line);line-height:inherit}
article .guide-related>h2{margin:0 0 16px;font:700 12.5px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--home-eyebrow)}
:root:lang(ar) .guide-related>h2{letter-spacing:0}
.guide-related>ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.guide-related>ul>li{font-size:17px}
.guide-related>ul a{display:block;padding:16px 20px;border:1px solid var(--line);border-radius:14px;background:var(--surface);font-weight:600;line-height:1.4;text-decoration:none}
.guide-related>ul a::after{content:"\00a0→";color:var(--wt-link)}[dir=rtl] .guide-related>ul a::after{content:"\00a0←"}
@media(hover:hover) and (pointer:fine){.guide-related>ul a:hover{border-color:var(--bright)}}

/* 带设备按钮的指南沿用下载页的设备脚本,电脑上也会写 data-device=windows|mac;收尾带按「没有手机标记」显示扩展按钮。 */
:is([data-device=windows],[data-device=mac]) .closing .actions .cta-ext{display:inline-flex}
@media(max-width:720px){:is([data-device=windows],[data-device=mac]) .closing .actions .cta-ext{display:none}
  html:root:is([data-device=windows],[data-device=mac]) .closing .actions .cta-player{background:var(--cta);border-color:transparent;box-shadow:none;color:var(--cta-ink)}}
/* 示例代码与视频 */
.shell pre{overflow:auto;padding:16px;background:var(--soft);border-radius:8px}
.shell video{display:block;width:100%;max-width:640px;margin:20px 0}

.footer{margin-top:72px}
@media(max-width:720px){
  .breadcrumb,body:has(.guide-hub) .breadcrumb{width:calc(100% - 36px)}
  .guide-hub,article:not(.guide-hub){margin-top:36px}
  .guide-hub .lede,article .lede{font-size:17px}
  .guide-cards{grid-template-columns:1fr;gap:12px}
  .guide-card{padding:22px 20px 20px;border-radius:18px}.guide-card strong{font-size:18.5px}
  article:not(.guide-hub) :is(p:not(.eyebrow),li){font-size:16.5px}
}

/* ADR-5510 D3a:博客首页 = 内容中心(左栏搜索 + 分类,参考沉浸式翻译博客)。样式同 M5 样稿(设计师门第 2 轮 PASS),只用现有 token。 */
.center .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.center-head h1{margin-bottom:12px}
.center-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:40px;align-items:start;margin-top:36px}
.center-side{position:sticky;top:24px;display:flex;flex-direction:column;gap:28px}
.center-search{display:flex}
.center-search,.center-search-box{width:100%;box-sizing:border-box}
.center-search-box{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--muted)}
.center-search-box:focus-within{border-color:var(--bright)}
.center-search-box input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font:inherit;font-size:15px}
.center-search-box input::placeholder{color:var(--muted)}
.center-nav{display:block;padding:0;font-size:inherit}
.center-nav-title{margin:0 0 8px;font-size:13px;font-weight:650;color:var(--muted);letter-spacing:.02em}
.center-nav ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px}
.center-nav a{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:38px;padding:0 12px;border-radius:10px;color:var(--text);font-size:15px;text-decoration:none}
.center-nav a small{font-size:12.5px;color:var(--muted)}
.center-nav a[aria-current=page]{background:var(--text);color:var(--bg);font-weight:650}
.center-nav a[aria-current=page] small{color:inherit;opacity:.7}
/* ADR-5510 增补 2026-11-11:「按需求找」的名字可能比分类长,桌面在侧栏内换行。 */
.center-needs a{white-space:normal;overflow-wrap:anywhere;line-height:1.35;padding-block:8px}
@media(hover:hover) and (pointer:fine){.center-nav a:not([aria-current]):hover{background:var(--soft)}}
.center-main{min-width:0}
.center-main > .blog-main > .guide-group:first-child{padding-top:0;margin-top:0}
.center-count{margin:0 0 14px;font-size:14px;color:var(--muted)}
.center-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.center-list a{display:flex;flex-direction:column;gap:4px;height:100%;padding:14px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--text);text-decoration:none}
.center-list strong{font-size:16px;line-height:1.4;font-weight:600;overflow-wrap:break-word}
.center-list span{font-size:13px;color:var(--muted)}
@media(hover:hover) and (pointer:fine){.center-list a:hover{border-color:var(--bright)}}
.center-empty{padding-top:24px;color:var(--muted)}
@media(max-width:860px){
  .center-head h1{margin-bottom:8px}
  .center-layout{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:16px}
  .center-side{display:contents}
  .center-side .center-search{order:1}
  .center-side .center-nav:not(.center-topics):not(.center-needs){order:2}
  .center-main{order:3}
  .center-topics{order:4;margin-top:8px}
  .center-needs{order:5;margin-top:8px}
  .center-needs a{max-width:72vw;overflow:hidden;text-overflow:ellipsis;padding-block:0}
  .center-nav ul{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:8px;margin-inline:-18px;padding:2px 18px 6px;scrollbar-width:none}
  .center-nav ul::-webkit-scrollbar{display:none}
  .center-nav a{flex:none;gap:6px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:14.5px;font-weight:600;white-space:nowrap}
}
@media(max-width:720px){.center-list{grid-template-columns:1fr}}

/* ADR-5510 D3a / ADR-5500 拆分③:右栏文章列表(scripts/guide-list.mjs)。同内容中心样稿(设计师门第 2 轮 PASS)的头条 + 双列卡片 + 分页。 */
.center-main .hub-latest{padding-top:0}
.post-feature{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px;align-items:center;margin:0 0 28px;color:var(--text);text-decoration:none}
.post-feature img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:50% 85%;border-radius:18px;border:1px solid var(--line);background:var(--soft)}
.post-feature strong{display:block;margin:8px 0 10px;font-family:"WT Latin Quote",var(--serif);font-size:clamp(24px,2.6vw,32px);line-height:1.2;font-weight:600;text-wrap:balance}
/* 设计师遗留项:头条标题不在词中间断开——中日文只在标点与空格处换行 */
.post-feature strong:lang(zh),.post-feature strong:lang(ja){word-break:keep-all;overflow-wrap:anywhere}
.post-feature .post-card-sum{display:block;font-size:16px;line-height:1.65;color:var(--muted)}
.post-card-meta{display:flex;flex-wrap:wrap;align-items:baseline;font-size:13px;color:var(--muted)}
.post-card-meta b{font-weight:650;color:var(--home-eyebrow,var(--wt-link))}
.post-card-meta>*{white-space:nowrap}
.post-card-meta>b:not(:last-child)::after{content:"·";margin-inline:6px;font-weight:400;color:var(--muted);opacity:.6}
.post-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.post-card{display:flex;flex-direction:column;gap:8px;padding:0 0 20px;border:1px solid var(--line);border-radius:18px;background:var(--surface);overflow:hidden;color:var(--text);text-decoration:none}
.post-card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 85%;background:var(--soft)}
/* 实拍截图的字幕在画面下部:裁切时保留下部,不把字幕裁掉 */
.post-card .post-card-meta{padding:6px 20px 0}
.post-card strong{padding:0 20px;font-family:"WT Latin Quote",var(--serif);font-size:19px;line-height:1.3;font-weight:600;text-wrap:balance;overflow-wrap:break-word}
.post-card .post-card-sum{padding:0 20px;font-size:14.5px;line-height:1.6;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(min-width:721px){.post-card-body{display:contents}}
@media(hover:hover) and (pointer:fine){.post-card:hover{border-color:var(--bright)}.post-feature:hover strong{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}}
.hub-pager{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:28px 0 0;padding:0;list-style:none;font-size:15px}
.hub-pager a,.hub-pager span{display:inline-grid;place-items:center;min-width:40px;min-height:40px;padding:0 12px;border:1px solid var(--line);border-radius:10px;color:var(--text);text-decoration:none}
.hub-pager [aria-current=page]{background:var(--text);border-color:var(--text);color:var(--bg);font-weight:650}
.hub-pager :is(.hub-pager-next,.hub-pager-prev) a{font-weight:650;color:var(--wt-link)}
@media(max-width:860px){.post-feature{grid-template-columns:1fr;gap:14px}}
@media(max-width:720px){
  .post-grid{grid-template-columns:1fr;gap:12px}
  .post-card{flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:6px 14px;padding:14px;border-radius:16px}
  .post-card img{width:104px;flex:none;border-radius:10px;aspect-ratio:4/3}
  .post-card-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
  .post-card .post-card-meta,.post-card strong{padding:0}
  .post-card strong{font-size:16.5px}
  .post-card .post-card-sum{display:none}
}
.post-feature img.is-ui,.post-card img.is-ui{object-position:50% 0}
.post-card strong{text-wrap:pretty}
.post-feature .post-card-sum{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* 分区页(对比与推荐)三列卡片:标题用 pretty,不被 balance 拆成三行(设计师门 分区页第 1 轮) */
.guide-hub .guide-card strong{text-wrap:pretty}
/* CJK card titles (hub and list cards) break at phrases, never leaving a lone 「？」 or splitting a word. Japanese needs :root to outrank
   the keep-all rule for article strong above; Chromium's auto-phrase segments Japanese only, so Chinese and Korean hub cards keep keep-all
   (list cards keep their own strict line-break rule above). */
:root :is(.guide-card,.post-card) strong:lang(ja){word-break:auto-phrase}.guide-card strong:is(:lang(zh),:lang(ko)){word-break:keep-all;overflow-wrap:anywhere}
/* 模板封面(总协调代定,2026-11-09):文章自己的配图都已被别的文章用作封面时,用分类色块 + 标题;两条字幕条呼应产品(原文 + 译文)。
   影院底在两种主题下都是深色(浅色 #1B2A3A、深色 #0A0F14),分类只换强调色。 */
.post-cover{--cover-hue:var(--wt-cta);position:relative;display:flex;flex-direction:column;gap:10px;width:100%;aspect-ratio:16/9;padding:22px 24px 0;box-sizing:border-box;overflow:hidden;
  background:radial-gradient(120% 90% at 0% 0%,color-mix(in srgb,var(--cover-hue) 30%,transparent),transparent 62%),var(--wt-cinema-band);color:#FAF8F3}
.post-cover[data-cat="no-subtitles"]{--cover-hue:#8DB4FF}
.post-cover[data-cat="bilingual"]{--cover-hue:#6FD3C1}
.post-cover[data-cat="subtitle-files"]{--cover-hue:#C3ADFF}
.post-cover[data-cat="local-and-phone"]{--cover-hue:#FF9B7A}
.post-cover[data-cat="compare"]{--cover-hue:#E3C88E}
.post-cover-cat{font-size:12px;font-weight:650;letter-spacing:.02em;color:var(--cover-hue)}
.post-cover-title{font-family:"WT Latin Quote",var(--serif);font-size:25px;line-height:1.25;font-weight:600;text-wrap:balance;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-cover-title:lang(zh){word-break:normal;line-break:strict}
.post-cover-subs{position:absolute;inset:auto 0 13%;display:flex;flex-direction:column;align-items:center;gap:6px}
.post-cover-subs i{display:block;height:6px;width:40%;border-radius:3px;background:rgba(250,248,243,.42)}
.post-cover-subs i+i{height:8px;width:56%;border-radius:4px;background:var(--cover-hue)}
.post-feature .post-cover{border-radius:18px;padding:28px 32px 0;gap:14px}
.post-feature .post-cover-cat{font-size:14px}
.post-feature .post-cover-title{font-size:clamp(24px,2.6vw,32px)}
.post-feature .post-cover-subs i{height:8px}.post-feature .post-cover-subs i+i{height:10px}
@media(max-width:720px){
  .post-card .post-cover{width:104px;flex:none;border-radius:10px;aspect-ratio:4/3;padding:9px 9px 0}
  .post-card .post-cover-cat{display:none}
  .post-card .post-cover-title{font-size:11.5px;line-height:1.25;-webkit-line-clamp:3;word-break:normal;line-break:strict;overflow-wrap:anywhere;hyphens:auto}
  .post-card .post-cover-subs{inset:auto 0 11%;gap:3px}.post-card .post-cover-subs i{height:3px}.post-card .post-cover-subs i+i{height:4px}
}
/* 博客列表卡片的中文标题:article 里 strong 的 keep-all 会把整句当成一个词,放不下时由 anywhere 硬断,问号会落到行首、末行剩孤字。
   卡片标题改回普通中文断行(标点避头尾 strict),pretty 避免末行孤字;选择器要比上面 :root:lang() article strong 更具体。 */
.post-grid .post-card strong:lang(zh){word-break:normal;overflow-wrap:break-word;line-break:strict;text-wrap:pretty}