/* ============================================================================
* site.css — 壳中客 × ideogram-visual-intelligence
* 1) 中文排印覆盖（字体栈 / 字距 / 行高）
* 2) 子页组件扩展（页头 / 卡片 / 议题 / 正文 / 表单），全部基于 --sg-* 变量
* 组件库文件零修改，此处只做增量扩展。
* ==========================================================================*/
/* ---------- 1. 中文字体栈 + Kezhongke 原设计系统配色 ---------- */
.sg-frame {
--sg-font-display: "Source Han Serif SC", "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
--sg-font-sans: "PingFang SC", "Hiragino Sans GB", "Inter", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
--sg-primary: #d94b2b;
--sg-primary-soft: #ffdad2;
--sg-accent: #c0ecdc;
--sg-accent-soft: #fff0ed;
--sg-ink: #261815;
--sg-muted: #5a413b;
--sg-subtle: #6f504a;
--sg-line: #e2bfb7;
--sg-line-strong: #6f504a;
--sg-primary-ink: #9f2f1d;
--sg-primary-accessible: #b33620;
--sg-primary-on-dark: #ff9a78;
/* 板块题注用的更轻文本色（纸面 6.08:1，暖纸 5.80:1，仍满足 AA） */
--sg-copy-ink: #7a5b54;
/* 卡片面色 = header 毛玻璃浮岛同色；比页面底更亮、同为黄调，
--sg-paper 在本站被覆盖为近白，不能复用 */
--sg-card-paper: #fffefb;
/* 卡片圆角收敛为两级：卡片 14px、pill 999px，其余为 0 */
--sg-radius-card: 14px;
/* 卡片统一描边：极淡的墨色，只负责界定边界，不参与视觉层级 */
--sg-card-line: rgba(38, 24, 21, 0.08);
--sg-paper: #fffffd; /* 纯白在暖底上会读成冷斑，留一丝暖 */
/* 暖纸底：页面与卡片保留细微色阶，边界由 --sg-card-line 承担 */
--sg-stage: #fffdf7;
--sg-overlay: rgba(38, 24, 21, 0.56);
--sg-shadow: rgba(38, 24, 21, 0.14);
--sg-open-gradient: linear-gradient(180deg, #fff0ed 20%, #c0ecdc 58%, #e4dfff 100%);
--sg-image-gradient: linear-gradient(145deg, #ffdad2, #c0ecdc, #e4dfff);
}
/* ---------- 2. 中文排印修正：拉丁负字距对汉字过紧 ---------- */
.sg-frame .sg-heading { letter-spacing: 0; line-height: 1.18; }
.sg-frame .sg-hero-heading > .sg-heading { letter-spacing: -0.01em; line-height: 1.14; }
.sg-frame .sg-footer-wordmark { letter-spacing: -0.02em; }
.sg-frame .sg-kicker { letter-spacing: 0.1em; }
/* 浏览器默认给 body 留 8px 外边距，而 .sg-frame 本就是一块满视口画布：
这 8px 会让满宽出血的区块（工坊横幅）两侧漏出白边，也让 min-height:100vh
多出 16px 凭空触发滚动条。内容仍由 .sg-shell 居中，去掉不改变对齐。 */
body { margin: 0; }
/* 子页主体容器 */
.sg-page { padding-bottom: 80px; }
/* 组件库仅对部分组件守护 [hidden]，此处全局兜底（auth 表单切换等依赖） */
.sg-frame [hidden] { display: none !important; }
/* 内联图标基座（2026-09-03 图标规范化）：随字号缩放、基线对齐、flex 容器不压缩；
图标词表在 assets/js/icons-data.js（KZK_ICONS / KZK_ICON） */
.sg-ico { width: 1em; height: 1em; flex: none; vertical-align: -0.125em; }
/* ---------- 3. 子页页头 ---------- */
.sg-page-head {
padding-top: 168px; /* 让开 absolute 悬浮导航 */
padding-bottom: 56px;
}
.sg-page-head .sg-kicker { margin-bottom: 20px; }
.sg-page-title {
font-family: var(--sg-font-display);
font-size: clamp(2.75rem, 6vw, 4.25rem);
line-height: 1.12;
letter-spacing: -0.01em;
font-weight: 400;
max-width: 16em;
}
.sg-page-title .sg-page-title-sub {
display: block;
margin-top: 10px;
font-size: clamp(1.25rem, 2.4vw, 1.75rem);
color: var(--sg-muted);
font-family: var(--sg-font-sans);
letter-spacing: 0.02em;
}
.sg-page-copy {
margin-top: 24px;
max-width: 640px;
font-size: var(--sg-copy-lg);
color: var(--sg-muted);
line-height: 1.7;
}
/* 页头行动区：与首页 Hero 主 CTA 同一枚样式 */
.sg-page-actions { margin-top: 32px; }
/* 带插图的页头：左图 + 右侧右对齐文字。
这里整块右对齐（含说明句与按钮），与关于页只让 h1 贴右轴的做法不同——
本页说明句只有两行，右对齐不会造成每行起点参差；关于页那段更长，故只对齐标题。 */
.sg-page-head.has-art {
display: grid;
grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
align-items: center;
gap: 0 clamp(32px, 5vw, 72px);
}
.sg-page-head-art {
overflow: hidden;
border-radius: var(--sg-radius-md);
line-height: 0; /* 去掉 inline 图片底部的行高留白 */
}
.sg-page-head-art img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 5 / 4; /* 与文件固有比例一致，图片到位前后不抖动 */
}
.sg-page-head.has-art .sg-page-head-copy { text-align: right; }
.sg-page-head.has-art .sg-page-title { max-width: none; }
.sg-page-head.has-art .sg-page-copy { margin-left: auto; max-width: 24em; }
.sg-page-head.has-art .sg-page-actions { justify-content: flex-end; }
@media (max-width: 900px) {
/* 收单列：插图在上、文字在下，两者共用同一条右轴 */
.sg-page-head.has-art { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.sg-page-head-art { max-width: 460px; margin-left: auto; }
}
@media (max-width: 560px) {
/* 窄屏行短，右对齐会让左边缘参差难读，回到左对齐 */
.sg-page-head.has-art .sg-page-head-copy { text-align: left; }
.sg-page-head.has-art .sg-page-copy { margin-left: 0; }
.sg-page-head.has-art .sg-page-actions { justify-content: flex-start; }
.sg-page-head-art { max-width: none; margin-left: 0; }
}
/* 页头右侧伙伴轨道：左文字 + 右一条纵向无缝滚动的社区名录。
放在页头而不另开一节，是因为这条信息就是「生长」的来源说明——课程从哪儿来，
与标题下那句「汇集与开源社区共建的课程」是同一件事；隔开反而要把话说两遍。
列数与是否循环由 JS 按伙伴数量决定，见 partners-rail.js。 */
.sg-page-head.has-rail {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
/* 与 has-art 同一条对齐规则：轨道比文字块高一大截，居中让两列的空白匀开，
top 对齐会在左下角留一整块死白 */
align-items: center;
gap: 0 clamp(32px, 4.5vw, 72px);
}
/* 左列变窄后 640px 的说明句会顶到轨道：改用 em 让它跟着字号收 */
.sg-page-head.has-rail .sg-page-copy { max-width: 26em; }
.sg-partner-rail { min-width: 0; }
.sg-partner-rail-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding-bottom: 14px;
border-bottom: 1px solid var(--sg-line);
}
.sg-partner-rail-head .sg-kicker { margin-bottom: 0; }
.sg-partner-count {
font-size: 12px;
letter-spacing: 0.03em;
color: var(--sg-copy-ink);
white-space: nowrap;
}
/* 视口负责裁切与上下渐隐。渐隐用纸色渐变盖住上下边缘，而不是给容器加 mask-image：
本页实测 mask 整个不渲染（同一坑与成因见下方 .sg-grow-band 的注释），
渐变只用 background，没有合成层的问题。代价是渐变色写死 --sg-stage。 */
.sg-partner-viewport {
position: relative;
height: clamp(250px, 24vw, 320px);
margin-top: 16px;
overflow: hidden;
}
.sg-partner-viewport::before,
.sg-partner-viewport::after {
content: "";
position: absolute;
left: 0;
right: 0;
z-index: 2;
/* 12% 而非更高：320px 高的视口里，20% 就是 64px，正好压住第一张卡的 logo，
让品牌色看起来发灰。只需要把上下切口糊掉，不必吃进内容 */
height: 12%;
pointer-events: none;
}
/* 显式写 rgba(...,0) 而非 transparent，理由同 .sg-grow-band */
.sg-partner-viewport::before {
top: 0;
background: linear-gradient(to bottom, var(--sg-stage) 0%, rgba(255, 253, 247, 0) 100%);
}
.sg-partner-viewport::after {
bottom: 0;
background: linear-gradient(to top, var(--sg-stage) 0%, rgba(255, 253, 247, 0) 100%);
}
/* 条目间距只能走 margin-bottom：轨道里放的是两份相同列表、动画走 -50%，
若用 gap，总高是 2n 个条目 + (2n-1) 个间距，-50% 会差半个间距，接缝处跳一下。 */
.sg-partner-track {
display: flex;
flex-direction: column;
animation: sg-partner-scroll var(--sg-rail-dur, 15s) linear infinite;
will-change: transform;
}
/* 伙伴不足三家时不循环：两三张卡在高盒子里滚只显得空 */
.sg-partner-rail.is-static .sg-partner-track { animation: none; }
@keyframes sg-partner-scroll {
from { transform: translateY(0); }
to { transform: translateY(-50%); }
}
/* 想看清某一家时停下来。键盘聚焦也暂停，否则拿到焦点的卡片会滑出视口 */
.sg-partner-viewport:hover .sg-partner-track,
.sg-partner-viewport:focus-within .sg-partner-track { animation-play-state: paused; }
.sg-partner-card {
display: block;
flex: 0 0 auto;
margin-bottom: 14px;
padding: 18px 20px;
border: 1px solid var(--sg-card-line);
border-radius: var(--sg-radius-card);
background: var(--sg-card-paper);
color: inherit;
text-decoration: none;
transition: border-color var(--sg-transition), transform var(--sg-transition);
}
a.sg-partner-card:hover { border-color: var(--sg-line); transform: translateX(3px); }
.sg-partner-logo { display: block; line-height: 0; }
/* .sg-frame 前缀不能省：组件库的 .sg-frame img { width: 100% } 特异度 0,1,1，
压得住任何单类选择器；少了它 logo 会被拉满列宽而变形 */
.sg-frame .sg-partner-logo img {
display: block;
width: auto;
max-width: 100%;
height: 30px;
object-fit: contain;
object-position: left center;
}
.sg-partner-name {
display: block;
margin-top: 14px;
font-size: 14.5px;
font-weight: 650;
color: var(--sg-ink);
}
.sg-partner-role {
display: block;
margin-top: 4px;
font-size: 12.5px;
line-height: 1.6;
color: var(--sg-copy-ink);
}
/* 协作标签：只在数据层的 tag 字段确有事实依据时才出现，所以给它品牌色，
与「是什么」的客观描述区分开。当前三条数据都没填 tag，这条规则暂时用不上，
保留是因为将来真有可指认的共建时要用（见 partners-data.js 的字段说明）。 */
.sg-partner-tag {
display: inline-block;
margin-top: 10px;
padding: 3px 10px;
border-radius: 999px;
background: var(--sg-accent-soft);
font-size: 11.5px;
letter-spacing: 0.02em;
color: var(--sg-primary-ink);
}
@media (max-width: 1040px) {
/* 收单列：文字在上、轨道在下。轨道限宽 420px，否则卡片被拉到满宽，
一枚 100px 的 logo 配一行小字，右边全是空的 */
.sg-page-head.has-rail { grid-template-columns: minmax(0, 1fr); gap: 36px; }
.sg-page-head.has-rail .sg-page-copy { max-width: 640px; }
.sg-partner-rail { max-width: 420px; }
.sg-partner-viewport { height: 240px; }
}
@media (max-width: 560px) {
.sg-partner-viewport { height: 210px; }
.sg-partner-card { padding: 16px 18px; }
}
@media (prefers-reduced-motion: reduce) {
/* 不滚动就得让人自己看全：视口改成可竖向滚动的列表。
同时藏掉为无缝循环准备的克隆件——不动的列表里它们只是把同一批伙伴重复一遍。 */
.sg-frame .sg-partner-track { animation: none; }
.sg-partner-track > [aria-hidden="true"] { display: none; }
.sg-partner-viewport { overflow-y: auto; }
}
/* 右对齐页头：只有英文主张贴右轴；说明句与按钮保持左对齐，
长中文右对齐会让每行起点参差、读起来吃力。
字体用 Fraunces 斜体可变字体：2026-09-06 起取 wght 500 + WONK/SOFT 归零——
用户确认更饱满端正的字形（此前 400 + WONK 1 的手工雕刻感被嫌太瘦）。
字体未加载时回落到站内衬线栈，只是少了个性。 */
.sg-page-head.is-aligned-end .sg-page-title {
margin-left: auto;
max-width: 20em;
font-family: "Fraunces", var(--sg-font-display);
font-style: italic;
font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 144;
font-size: clamp(3.25rem, 7.4vw, 5.75rem);
font-weight: 500;
line-height: 1.04;
letter-spacing: -0.01em;
text-align: right;
text-wrap: balance;
}
@media (max-width: 760px) {
/* 窄屏右对齐的长文本可读性差：回到左对齐，字号也收一档 */
.sg-page-head.is-aligned-end .sg-page-title {
margin-left: 0;
font-size: clamp(2.5rem, 10vw, 3.5rem);
line-height: 1.08;
text-align: left;
}
}
/* 横幅首图页头（工坊）：插图满宽出血成一条横幅，标题块压在图上、沉在左下。
这张插图是满面高彩度色块（红 / 蓝 / 金 / 黑拼图），直接压字读不出来，
所以叠三层暖墨蒙版：整幅轻压把插图退成背景、暗角收住四周、读区自下而上
收紧。蒙版层顶部 11% 用遮罩挖空，让图自带的留白直接接页面纸底，探头的
人像就像从纸里长出来，不会糊出一道灰带。
叠完的对比度按最亮的奶白色块验算过，小字号也在 AA 之上。
导航仍落在横幅上方的纸面上，故不动它的深色字。 */
.sg-page-head.has-banner {
padding-top: 0;
padding-bottom: 56px;
}
/* 生长页页头下的过渡带：满宽出血 + 上下边缘渐隐。
没有沿用上面工坊那套 has-banner（文字压在横幅上 + 三层深色蒙版）：那张插图是
高彩度实色块，压深底才读得出反白字；而生长这张是高调的浅色抽象（图自带纸底
248,242,235，与页面纸底 255,253,247 只差一档），压蒙版正好会盖掉它唯一的好处
——通透。所以文字留在纸面上，图单独成一条带，不承载任何文字。
渐隐用两条纸色渐变盖在上下边缘，而不是给容器加 mask-image：本页的 mask 版本
实测整条带不渲染（同一段 mask 在裸页面里正常，放进 .sg-frame > .sg-page 就没了，
与页面过渡脚本给祖先元素留下的合成层有关），而渐变覆盖只用 background，
没有合成层的坑。代价是渐变色写死为 --sg-stage，页面底色若改需同步。
高度用 clamp 定死、object-fit 裁切：图是无焦点抽象，任何裁切都不丢构图，
于是可以按版面需要定高，而不必迁就原图比例。 */
.sg-grow-band {
position: relative;
width: 100%; /* 用 100% 而非 100vw：竖向滚动条不会造成横向溢出 */
margin: 0 0 clamp(30px, 3.2vw, 48px);
overflow: hidden;
}
.sg-grow-band img {
display: block;
width: 100%;
/* 2026-09-02 综合优化：横幅收成一条分隔带——它没有信息价值，
原来的 240–360px 把课程推出了首屏 */
height: clamp(72px, 9vw, 120px);
object-fit: cover;
object-position: 50% 50%;
}
.sg-grow-band::before,
.sg-grow-band::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 18%;
pointer-events: none;
}
/* 显式写 rgba(...,0) 而不是 transparent：避免个别渲染器把 transparent 当成
透明黑去插值，在渐变中段透出一道灰 */
.sg-grow-band::before {
top: 0;
background: linear-gradient(to bottom, var(--sg-stage) 0%, rgba(255, 253, 247, 0) 100%);
}
.sg-grow-band::after {
bottom: 0;
background: linear-gradient(to top, var(--sg-stage) 0%, rgba(255, 253, 247, 0) 100%);
}
@media (max-width: 560px) {
/* 窄屏同样保持分隔带（2026-09-02 综合优化同桌面一并收窄） */
.sg-grow-band img { height: 64px; }
.sg-grow-band { margin-bottom: 24px; }
}
.sg-page-head-banner {
position: relative;
display: grid;
align-content: end; /* 文字沉底：横幅上半留给插图 */
/* 满宽出血：本页头不再是 .sg-shell，横向由视口决定，两侧不留 gutter。
用 100%（而非 100vw）以免竖向滚动条造成横向溢出。 */
width: 100%;
min-height: clamp(430px, 46vw, 620px);
margin-top: clamp(96px, 9vw, 116px); /* 让开 fixed 导航 */
padding-bottom: clamp(40px, 4vw, 64px);
overflow: hidden;
}
.sg-page-head-banner img {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 6%; /* 顶部留白与探头的人像留下，裁剪从下沿吃 */
filter: saturate(0.96); /* 只收一点艳度；不降亮——降亮会把顶部留白压成一道灰带 */
}
.sg-page-head-banner::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
/* 上沿 11% 不落任何蒙版：那里是图自带的近白留白，保持洁净才能与页面纸底
无缝相接，探头的人像看起来就像从纸里长出来。 */
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 11%);
mask-image: linear-gradient(to bottom, transparent 0, #000 11%);
background:
/* 读区：自下而上收紧，标题整块落在 ≥0.62 的段里 */
linear-gradient(to top,
rgba(26, 15, 13, 0.64) 0%,
rgba(26, 15, 13, 0.62) 42%,
rgba(26, 15, 13, 0.36) 60%,
rgba(26, 15, 13, 0.08) 80%,
rgba(26, 15, 13, 0) 100%),
/* 暗角：四周吃进一圈阴影，把视线从满面色块收回中间与左下的标题 */
radial-gradient(130% 96% at 50% 40%,
rgba(26, 15, 13, 0) 44%,
rgba(26, 15, 13, 0.3) 100%),
/* 整幅压暗：把插图从主角降为背景 */
linear-gradient(rgba(26, 15, 13, 0.16), rgba(26, 15, 13, 0.16));
}
.sg-page-head.has-banner .sg-page-head-copy {
position: relative;
z-index: 2;
}
/* 反白文字：色值按蒙版后最亮处（原图奶白块）验算，标题 / 说明 / kicker 均过 AA。
text-shadow 只做兜底，正常观感上看不出来。 */
.sg-page-head.has-banner .sg-kicker {
color: #f0ddd2;
text-shadow: 0 1px 18px rgba(20, 10, 8, 0.55);
}
.sg-page-head.has-banner .sg-page-title {
color: #fffdf7;
text-shadow: 0 2px 28px rgba(20, 10, 8, 0.5);
}
.sg-page-head.has-banner .sg-page-copy {
color: #f2e6de;
text-shadow: 0 1px 20px rgba(20, 10, 8, 0.55);
}
@media (max-width: 900px) {
.sg-page-head-banner {
min-height: clamp(420px, 62vw, 540px);
/* 窄屏画面变方，主体往中间靠一点才不至于只剩色块 */
padding-bottom: 40px;
}
.sg-page-head-banner img { object-position: 50% 14%; }
}
@media (max-width: 500px) {
.sg-page-head-banner {
min-height: 470px;
margin-top: 76px; /* 移动端导航 min-height 64px */
padding-bottom: 32px;
}
}
/* 区块引言：块标题与卡片组之间的一句陈述，比正文略大、比标题克制 */
.sg-section-lede {
max-width: 46em;
margin: 0 0 28px;
color: var(--sg-copy-ink);
font-family: var(--sg-font-display);
font-size: 17px;
line-height: 1.9;
}
/* 段落里的论点句：左侧朱砂细线 + 稍深字色，把结论从叙述里提出来 */
.sg-concept-copy p.is-lead,
.sg-invite-copy p.is-lead {
margin-top: 26px;
padding-left: 18px;
border-left: 2px solid var(--sg-primary);
color: var(--sg-ink);
}
/* 收尾邀请区：左文右列参与方式，取代原先的单行 CTA 面板 */
.sg-invite {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
gap: 56px;
align-items: start;
padding: 52px 56px;
border: 1px solid var(--sg-card-line);
border-radius: var(--sg-radius-card);
background: var(--sg-card-paper);
}
.sg-invite-copy h2 {
margin: 0;
font-family: var(--sg-font-display);
font-size: var(--sg-heading-md);
font-weight: 400;
letter-spacing: 0;
line-height: 1.25;
}
.sg-invite-copy p {
margin: 20px 0 0;
max-width: 34em;
color: var(--sg-muted);
line-height: 1.9;
}
/* 参与方式清单：每项一条细线，可用的走朱砂箭头，未开放的照实标注 */
.sg-invite-ways {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 0;
}
.sg-invite-ways li {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 6px 12px;
padding: 16px 0;
border-top: 1px solid var(--sg-card-line);
}
.sg-invite-ways li:last-child { border-bottom: 1px solid var(--sg-card-line); }
.sg-invite-ways a {
color: var(--sg-ink);
font-size: 15.5px;
font-weight: 600;
text-decoration: none;
transition: color var(--sg-transition);
}
.sg-invite-ways a:hover { color: var(--sg-primary-ink); }
.sg-invite-ways a:focus-visible {
outline: 2px solid var(--sg-primary-accessible);
outline-offset: 3px;
}
.sg-invite-ways .sg-soon { font-size: 12px; }
/* 按钮跟在文案末尾（同属左列），不做成 grid 的第三个子项——那样会被推到
第二行、与文案之间空出一整个 gap */
.sg-invite-actions { margin-top: 30px; }
@media (max-width: 900px) {
.sg-invite { grid-template-columns: 1fr; gap: 32px; padding: 40px 32px; }
.sg-invite-actions { margin-top: 26px; }
}
@media (max-width: 500px) {
.sg-invite { padding: 32px 24px; }
}
/* ---------- 关于页三段的形态分化 ----------
三段性质不同，视觉重量刻意做成「中 → 强 → 弱」：
理念用无边框排版（.sg-tenets）、导航用大字条目（.sg-places）、
未开放的频道压到最轻（.sg-channels）。都用卡片会让三段读起来一模一样。 */
/* 一、理念三栏：没有边框与底色，只靠品牌色大序号与一道细线立住 */
.sg-tenets {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px 48px;
}
.sg-tenet {
padding-top: 20px;
border-top: 2px solid var(--tenet-hue);
}
.sg-tenet[data-value="resonance"] { --tenet-hue: #d94b2b; --tenet-ink: #cf4425; }
.sg-tenet[data-value="synergy"] { --tenet-hue: #6aa89b; --tenet-ink: #4a7e73; }
.sg-tenet[data-value="cocreation"] { --tenet-hue: #8f86c4; --tenet-ink: #766bb7; }
.sg-tenet-index {
display: block;
color: var(--tenet-ink);
font-family: var(--sg-font-display);
font-size: 34px;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.sg-tenet-label {
margin: 14px 0 0;
color: var(--tenet-ink);
font-size: 12px;
font-weight: 650;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.sg-tenet h3 {
margin: 10px 0 0;
color: var(--sg-ink);
font-family: var(--sg-font-display);
font-size: 23px;
font-weight: 400;
line-height: 1.35;
}
.sg-tenet-copy {
margin: 12px 0 0;
color: var(--sg-copy-ink);
font-size: 14.5px;
line-height: 1.85;
}
/* 二、去处大字条目：全页视觉重量最高的一段，序号 + 大字 + 右侧箭头 */
.sg-places { display: grid; }
.sg-place {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: baseline;
gap: 28px;
padding: 28px 0;
border-top: 1px solid rgba(38, 24, 21, 0.14);
color: inherit;
text-decoration: none;
transition: border-color var(--sg-transition);
}
.sg-place:last-child { border-bottom: 1px solid rgba(38, 24, 21, 0.14); }
.sg-place-index {
color: var(--sg-subtle);
font-family: var(--sg-font-display);
font-size: 15px;
font-variant-numeric: tabular-nums;
transition: color var(--sg-transition);
}
.sg-place-body { display: grid; gap: 10px; }
.sg-place-name {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 8px 16px;
color: var(--sg-ink);
font-family: var(--sg-font-display);
font-size: clamp(1.5rem, 2.4vw, 2rem);
line-height: 1.25;
transition: color var(--sg-transition), transform var(--sg-transition);
}
.sg-place-kind {
color: var(--sg-subtle);
font-family: var(--sg-font-sans);
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.06em;
}
.sg-place-copy {
max-width: 52em;
color: var(--sg-copy-ink);
font-size: 15px;
line-height: 1.85;
}
.sg-place-go {
color: var(--sg-primary-ink);
font-size: 20px;
transition: transform var(--sg-transition);
}
.sg-place:hover { border-color: rgba(159, 47, 29, 0.34); }
.sg-place:hover .sg-place-name,
.sg-place:focus-visible .sg-place-name { color: var(--sg-primary-ink); transform: translateX(4px); }
.sg-place:hover .sg-place-go { transform: translateX(6px); }
.sg-place:hover .sg-place-index { color: var(--sg-primary-ink); }
.sg-place:focus-visible {
outline: 2px solid var(--sg-primary-accessible);
outline-offset: 4px;
}
/* 三、频道预告：最低视觉重量，一行一条，不做成卡片也不可点 */
.sg-channels {
margin: 0;
padding: 0;
list-style: none;
display: grid;
}
.sg-channels li {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 6px 16px;
padding: 15px 0;
border-top: 1px solid var(--sg-card-line);
}
.sg-channels li:last-child { border-bottom: 1px solid var(--sg-card-line); }
.sg-channel-name {
min-width: 8em;
color: var(--sg-ink);
font-size: 14.5px;
font-weight: 650;
}
.sg-channel-copy {
flex: 1;
min-width: 12em;
color: var(--sg-copy-ink);
font-size: 13.5px;
line-height: 1.7;
}
.sg-channels .sg-soon { font-size: 12px; white-space: nowrap; }
@media (max-width: 900px) {
.sg-tenets { grid-template-columns: 1fr; gap: 4px; }
.sg-tenet { padding-top: 18px; padding-bottom: 14px; }
.sg-place { grid-template-columns: auto minmax(0, 1fr); gap: 16px 20px; padding: 24px 0; }
.sg-place-go { grid-column: 2; justify-self: start; }
}
@media (max-width: 560px) {
.sg-place-index { display: none; }
.sg-place { grid-template-columns: 1fr; }
.sg-place-go { grid-column: 1; }
.sg-channel-name { min-width: 0; }
}
/* 关于页数字条：真实产出的量化陈述。
复用 hero metric 的「数字 + 标签」语义，但放大到独立区块的尺度——
hero 里那套是 20px 的紧凑内联条，撑不起一个 section。 */
.sg-about-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.sg-about-stat {
display: flex;
flex-direction: column;
gap: 8px;
padding: 26px 24px 24px;
border: 1px solid var(--sg-card-line);
border-radius: var(--sg-radius-card);
background: var(--sg-card-paper);
color: inherit;
text-decoration: none;
transition: border-color var(--sg-transition), transform var(--sg-transition);
}
.sg-about-stat strong {
color: var(--sg-primary-ink);
font-family: var(--sg-font-display);
font-size: 40px;
font-weight: 400;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.sg-about-stat span {
color: var(--sg-copy-ink);
font-size: 13px;
letter-spacing: .02em;
}
.sg-about-stat:hover {
border-color: rgba(159, 47, 29, 0.34);
transform: translateY(-3px);
}
.sg-about-stat:focus-visible {
outline: 2px solid var(--sg-primary-accessible);
outline-offset: 3px;
}
@media (max-width: 760px) {
.sg-about-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
.sg-about-stat { padding: 20px 18px 18px; }
.sg-about-stat strong { font-size: 34px; }
}
/* 频道行内的链接（GitHub 组织已开放后的「前往」、合作页联系渠道）：
与 .sg-soon 同一视觉量级——小字、不抢名称与简介，悬停才强调 */
.sg-channels a {
color: var(--sg-primary-accessible);
font-size: 12.5px;
white-space: nowrap;
text-decoration: none;
}
.sg-channels a:hover,
.sg-channels a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
/* 合作页事实带：已落地案例的量化证明。比数字条轻——它是页头主张的佐证，
不是独立区块的主角，所以不要卡片、不要大数字，一栏一行。 */
.sg-collab-facts {
margin: 0;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px 24px;
}
.sg-collab-facts li {
display: grid;
gap: 6px;
align-content: start;
padding-top: 14px;
border-top: 2px solid var(--sg-ink);
}
.sg-collab-facts strong {
color: var(--sg-primary-ink);
font-family: var(--sg-font-display);
font-size: 22px;
font-weight: 400;
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
.sg-collab-facts span {
color: var(--sg-copy-ink);
font-size: 13px;
line-height: 1.7;
}
.sg-collab-facts a {
color: inherit;
text-decoration: underline;
text-underline-offset: 3px;
}
.sg-collab-facts a:hover { color: var(--sg-primary-accessible); }
@media (max-width: 900px) {
.sg-collab-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
.sg-collab-facts { grid-template-columns: 1fr; }
}
/* 合作模式卡：与方案矩阵同构的「提供 / 交付」两列。
卡片样式与数字条同族（纸面 + 细线边），五张卡两列排，末张自然落单。 */
.sg-collab-modes {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.sg-collab-mode {
display: grid;
gap: 12px;
align-content: start;
padding: 24px 24px 20px;
border: 1px solid var(--sg-card-line);
border-radius: var(--sg-radius-card);
background: var(--sg-card-paper);
}
.sg-collab-mode h3 {
margin: 0;
color: var(--sg-ink);
font-size: 16.5px;
font-weight: 650;
}
.sg-collab-mode h3 span {
margin-right: 10px;
color: var(--sg-primary-ink);
font-family: var(--sg-font-display);
font-weight: 400;
}
.sg-collab-mode-lead {
margin: 0;
color: var(--sg-copy-ink);
font-size: 13.5px;
line-height: 1.7;
}
.sg-collab-mode-cols {
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.sg-collab-mode-cols dt {
margin-bottom: 6px;
color: var(--sg-primary-accessible);
font-size: 12px;
font-weight: 650;
letter-spacing: .04em;
}
.sg-collab-mode-cols dd {
margin: 0 0 5px;
padding-left: 12px;
position: relative;
color: var(--sg-copy-ink);
font-size: 13px;
line-height: 1.65;
}
.sg-collab-mode-cols dd::before {
content: '·';
position: absolute;
left: 0;
color: var(--sg-primary-ink);
}
.sg-collab-mode-value {
margin: 0;
padding-top: 10px;
border-top: 1px solid var(--sg-card-line);
color: var(--sg-copy-ink);
font-size: 12.5px;
line-height: 1.7;
}
@media (max-width: 900px) {
.sg-collab-modes { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
.sg-collab-mode-cols { grid-template-columns: 1fr; }
}
/* 落地流程：四步编号横排。ol 语义承载顺序，视觉只留编号、短题、一句产出 */
.sg-collab-steps {
margin: 0;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px 24px;
}
.sg-collab-steps li {
display: grid;
gap: 8px;
align-content: start;
padding-top: 14px;
border-top: 1px solid var(--sg-card-line);
}
.sg-collab-step-index {
color: var(--sg-primary-ink);
font-family: var(--sg-font-display);
font-size: 26px;
line-height: 1;
}
.sg-collab-steps h3 {
margin: 0;
color: var(--sg-ink);
font-size: 15px;
font-weight: 650;
}
.sg-collab-steps p {
margin: 0;
color: var(--sg-copy-ink);
font-size: 13px;
line-height: 1.7;
}
@media (max-width: 900px) {
.sg-collab-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
.sg-collab-steps { grid-template-columns: 1fr; }
}
/* 议题站内报名组件（issue-enroll.js 渲染）：与报名表单同一视觉家族，
容器在 API 兜底为空时用 :empty 收起，不留多余空隙。 */
.sg-enroll { margin-bottom: 18px; }
.sg-enroll:empty { margin-bottom: 0; }
.sg-enroll-hint {
margin: 0;
padding: 14px 18px;
border: 1px dashed var(--sg-card-line);
border-radius: var(--sg-radius-card);
color: var(--sg-copy-ink);
font-size: 13px;
line-height: 1.7;
}
.sg-enroll-hint a {
color: var(--sg-primary-accessible);
text-decoration: underline;
text-underline-offset: 3px;
}
.sg-enroll-head {
display: flex;
align-items: baseline;
gap: 12px;
margin-bottom: 8px;
}
.sg-enroll-head h3 { margin: 0; font-size: 16px; font-weight: 650; }
.sg-enroll-count {
color: var(--sg-muted);
font-size: 12.5px;
font-variant-numeric: tabular-nums;
}
.sg-enroll-note {
margin: 0 0 10px;
color: var(--sg-copy-ink);
font-size: 13.5px;
line-height: 1.7;
}
.sg-enroll-fields {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
.sg-enroll-fields input {
flex: 1;
min-width: 14em;
padding: 10px 14px;
border: 1px solid var(--sg-card-line);
border-radius: 999px;
background: var(--sg-card-paper);
color: var(--sg-ink);
font-size: 13.5px;
}
.sg-enroll-fields input:focus-visible {
outline: 2px solid var(--sg-primary-accessible);
outline-offset: 2px;
}
.sg-enroll-state {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}
.sg-enroll-withdraw {
margin-top: 4px;
padding: 0;
border: 0;
background: none;
color: var(--sg-muted);
font-size: 12.5px;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.sg-enroll-withdraw:hover { color: var(--sg-primary-accessible); }
.sg-enroll-withdraw:disabled { opacity: .5; cursor: default; }
/* 时间线：早期社区用有日期、可核对的产出替代规模型社会证明。
视觉重量刻意排在数字条与去处条目之下——它是证据，不是入口。 */
.sg-timeline {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--sg-card-line);
}
.sg-timeline > li {
display: grid;
grid-template-columns: 148px minmax(0, 1fr);
gap: 6px 36px;
padding: 22px 0;
border-bottom: 1px solid var(--sg-card-line);
}
.sg-timeline-when {
color: var(--sg-primary-ink);
font-size: 13px;
font-weight: 650;
letter-spacing: .06em;
line-height: 1.7;
white-space: nowrap;
}
.sg-timeline-what {
max-width: 46em;
color: var(--sg-copy-ink);
font-size: 15px;
line-height: 1.85;
}
.sg-timeline-what a {
color: var(--sg-ink);
text-decoration: underline;
text-decoration-color: rgba(159, 47, 29, 0.38);
text-underline-offset: 3px;
transition: color 200ms ease, text-decoration-color 200ms ease;
}
.sg-timeline-what a:hover {
color: var(--sg-primary-ink);
text-decoration-color: var(--sg-primary);
}
/* 「现在」是收束项：换成墨色以退出日期序列，避免读成又一个历史节点 */
.sg-timeline > li.is-now .sg-timeline-when { color: var(--sg-ink); }
.sg-timeline > li.is-now .sg-timeline-what { color: var(--sg-ink); }
@media (max-width: 620px) {
.sg-timeline > li { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
}
/* ---------- 4. 通用小节 ---------- */
.sg-block { padding-block: 40px; }
.sg-block-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
padding-bottom: 24px;
}
.sg-block-head h2 {
font-family: var(--sg-font-display);
font-size: var(--sg-heading-md);
letter-spacing: 0;
line-height: 1.2;
font-weight: 400;
}
.sg-block-head .sg-block-note {
font-size: 13px;
color: var(--sg-subtle);
letter-spacing: 0.05em;
white-space: nowrap;
}
/* 窄屏两者争宽会把中文标题压成三行：改为纵向堆叠，题注退到标题下方 */
@media (max-width: 620px) {
.sg-block-head {
align-items: flex-start;
flex-direction: column;
gap: 10px;
}
.sg-block-head .sg-block-note { white-space: normal; }
}
.sg-divider { border: 0; border-top: 1px solid var(--sg-line); margin: 0; }
/* ---------- 4.5 项目生态：成熟度分层 + 真实项目卡 ---------- */
.sg-project-tier-head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 28px;
margin: 32px 0 20px;
padding-top: 20px;
border-top: 1px solid var(--sg-line);
}
.sg-project-tier-head-building { margin-top: 64px; }
.sg-project-tier-head > div { display: flex; align-items: baseline; gap: 14px; }
.sg-project-tier-index {
color: var(--sg-primary);
font-size: 12px;
font-weight: 650;
letter-spacing: .08em;
}
.sg-project-tier-head h3 {
margin: 0;
font-family: var(--sg-font-display);
font-size: 28px;
font-weight: 400;
line-height: 1.2;
}
.sg-project-tier-head p {
max-width: 520px;
margin: 0;
color: var(--sg-muted);
font-size: 14px;
line-height: 1.6;
text-align: right;
}
.sg-product-grid {
display: grid;
/* 卡片数量随项目增减（当前 4 个可访问项目），按最小宽度自适应列数，
避免固定三列时最后一张卡单独占一行留下空白。 */
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
border: 0;
background: transparent;
}
.sg-product-card {
min-width: 0;
overflow: hidden;
border: 1px solid var(--sg-card-line);
border-radius: var(--sg-radius-card);
background: var(--sg-paper);
color: inherit;
text-decoration: none;
transition: transform var(--sg-transition), background-color var(--sg-transition);
}
.sg-product-card:hover,
.sg-product-card:focus-visible {
z-index: 1;
background: var(--sg-primary-soft);
transform: translateY(-4px);
}
.sg-product-cover {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--sg-image-gradient);
}
.sg-product-cover img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform 600ms cubic-bezier(.2,.7,.2,1), filter 600ms ease;
}
.sg-product-card:hover .sg-product-cover img { transform: scale(1.035); filter: saturate(1.05); }
.sg-product-cover-index {
position: absolute;
z-index: 2;
top: 16px;
left: 16px;
padding: 7px 10px;
border: 1px solid rgba(38,24,21,.14);
border-radius: var(--sg-radius-pill);
background: rgba(255,248,246,.84);
color: var(--sg-ink);
font-size: 10px;
font-weight: 650;
letter-spacing: .08em;
backdrop-filter: blur(10px);
}
.sg-product-copy { display: grid; gap: 12px; min-height: 220px; padding: 24px 22px 30px; }
/* 组件库的 card-meta 在产品卡内没有分栏，标签与状态会粘连成一行文字 */
.sg-product-copy .sg-card-meta {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
color: var(--sg-subtle);
font-size: 12px;
letter-spacing: .05em;
}
.sg-product-copy .sg-card-meta .sg-tag {
color: var(--sg-primary-ink);
font-weight: 650;
}
.sg-product-copy h3 {
margin: 0;
font-family: var(--sg-font-display);
font-size: 24px;
font-weight: 400;
line-height: 1.3;
}
.sg-product-copy p { margin: 0; color: var(--sg-muted); font-size: 14px; line-height: 1.7; }
/* DUDesign 单文件页面无外部封面，用其荧光绿/黑色视觉 DNA 生成真实风格封面 */
.sg-product-cover-dudesign {
display: grid;
align-content: center;
gap: 10px;
padding: 28px;
background: #111311;
color: #f8fff0;
}
.sg-product-cover-dudesign strong {
position: relative;
z-index: 1;
font-family: var(--sg-font-sans);
font-size: clamp(2rem, 4vw, 3.5rem);
line-height: .95;
letter-spacing: -.06em;
}
.sg-product-cover-dudesign > span:not(.sg-product-cover-index) {
position: relative;
z-index: 1;
color: #b7ff3c;
font-size: 14px;
font-weight: 650;
letter-spacing: .06em;
}
.sg-product-cover-dudesign i {
position: absolute;
border: 1px solid rgba(183,255,60,.65);
border-radius: 50%;
}
.sg-product-cover-dudesign i:nth-of-type(1) { width: 190px; height: 190px; right: -50px; top: -60px; }
.sg-product-cover-dudesign i:nth-of-type(2) { width: 105px; height: 105px; right: 38px; top: 48px; }
.sg-product-cover-dudesign i:nth-of-type(3) { width: 24px; height: 24px; right: 98px; bottom: 35px; background: #b7ff3c; }
.sg-product-cover-dark { background: #272b33; }
.sg-product-cover-dark .sg-product-cover-index { background: rgba(39,43,51,.82); color: #ff5bac; border-color: rgba(255,91,172,.38); }
@media (max-width: 900px) {
.sg-project-tier-head { align-items: start; flex-direction: column; gap: 8px; }
.sg-project-tier-head p { text-align: left; }
.sg-product-grid { grid-template-columns: 1fr; }
.sg-product-cover { aspect-ratio: 16 / 8; }
}
@media (max-width: 500px) {
.sg-project-tier-head-building { margin-top: 44px; }
.sg-product-cover { aspect-ratio: 4 / 3; }
.sg-product-copy { min-height: 0; }
}
/* ---------- 5. 线框卡片网格（与 sg-surface-grid 同一语言） ---------- */
.sg-wire-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border-top: 1px solid var(--sg-line);
border-left: 1px solid var(--sg-line);
}
.sg-wire-grid[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sg-wire-card {
display: flex;
flex-direction: column;
gap: 14px;
padding: 32px;
border-right: 1px solid var(--sg-line);
border-bottom: 1px solid var(--sg-line);
background: var(--sg-paper);
color: inherit;
text-decoration: none;
transition: background-color var(--sg-transition), transform var(--sg-transition);
}
.sg-wire-card:hover { background: var(--sg-primary-soft); transform: translateY(-4px); }
.sg-wire-card .sg-card-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
font-size: 12px;
font-weight: 650;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--sg-subtle);
}
.sg-wire-card .sg-card-meta .sg-tag { color: var(--sg-primary); }
.sg-wire-card h3 {
font-family: var(--sg-font-display);
font-size: 24px;
line-height: 1.3;
letter-spacing: 0;
font-weight: 400;
}
.sg-wire-card .sg-card-copy {
font-size: 14.5px;
line-height: 1.7;
color: var(--sg-muted);
flex: 1;
}
.sg-wire-card .sg-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-top: 6px;
font-size: 12px;
letter-spacing: 0.05em;
color: var(--sg-subtle);
}
.sg-wire-card .sg-card-foot .sg-go { color: var(--sg-primary); font-weight: 650; }
/* 课程卡「需求池」行（课程×议题闭环 2026-08-29）：卡脚上方一条弱提示，
点击跳议题页对应主题筛选；span 伪链接是因为卡片本体已是 */
.sg-card-pool {
display: inline-block;
margin-top: 2px;
color: var(--sg-subtle);
font-size: 12px;
letter-spacing: 0.04em;
cursor: pointer;
}
.sg-card-pool:hover { color: var(--sg-primary); }
.sg-card-pool .sg-pool-go { color: var(--sg-primary); }
.sg-wire-card .sg-card-badge {
align-self: flex-start;
padding: 5px 12px;
border: 1px solid var(--sg-line);
border-radius: var(--sg-radius-pill);
font-size: 12px;
color: var(--sg-muted);
background: var(--sg-stage);
}
.sg-wire-card .sg-card-badge.is-primary {
border-color: transparent;
background: var(--sg-primary);
color: var(--sg-ink);
font-weight: 650;
}
/* 卡片配图（线框卡顶部方形图） */
.sg-wire-card .sg-card-art {
margin: -32px -32px 4px;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--sg-image-gradient);
}
.sg-wire-card .sg-card-art img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
/* ---------- 6. 文章卡（期刊/博客列表） ---------- */
.sg-article-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
background: var(--sg-line);
border: 1px solid var(--sg-line);
}
.sg-article-card {
display: flex;
flex-direction: column;
background: var(--sg-paper);
color: inherit;
text-decoration: none;
transition: background-color var(--sg-transition);
}
.sg-article-card:hover { background: var(--sg-primary-soft); }
.sg-article-card .sg-article-art {
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--sg-image-gradient);
display: grid;
place-items: center;
}
.sg-article-card .sg-article-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-article-card .sg-article-art .sg-article-fallback {
font-family: var(--sg-font-display);
font-size: 64px;
color: var(--sg-ink);
opacity: 0.55;
}
.sg-article-card .sg-article-body { padding: 28px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.sg-article-card .sg-article-meta {
font-size: 12px;
font-weight: 650;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--sg-primary);
}
.sg-article-card .sg-article-meta time { color: var(--sg-subtle); font-weight: 500; margin-left: 8px; }
.sg-article-card h3 {
font-family: var(--sg-font-display);
font-size: 22px;
line-height: 1.35;
letter-spacing: 0;
font-weight: 400;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sg-article-card .sg-article-excerpt {
font-size: 14px;
line-height: 1.7;
color: var(--sg-muted);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
flex: 1;
}
.sg-article-card .sg-article-more { font-size: 13px; font-weight: 650; color: var(--sg-ink); letter-spacing: 0.04em; }
.sg-article-card .sg-article-more::after { content: " →"; color: var(--sg-primary); }
/* ---------- 7. 议题页：检索栏 / 议题卡 / 投稿表单 ---------- */
/* 类型说明不再单独占一个区块（那份说明在页面上曾有三份副本，必然写漂）：
完整标准写在筛选项与投稿表单的选项里，两处都从 KZK_ISSUE_KINDS 渲染。 */
/* 列表区引言：全页除标题外唯一的大字，用衬线放大 + 顶部朱砂短线做编辑体裁的开场。
「正在生长」用马克笔式渐变底纹强调——比换个字色更有手感，也呼应导航里的「生长」。
段落级艺术化只到这一处，避免与页头标题抢注意力。 */
.sg-issue-lede {
position: relative;
max-width: 26em;
margin: 0 0 44px;
padding-top: 26px;
color: var(--sg-ink);
font-family: var(--sg-font-display);
font-size: clamp(1.375rem, 2.4vw, 2rem);
font-weight: 400;
letter-spacing: 0.015em;
line-height: 1.75;
text-wrap: balance;
}
.sg-issue-lede::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 44px;
height: 2px;
background: var(--sg-primary);
}
.sg-issue-lede em {
font-style: normal;
color: var(--sg-primary-ink);
/* 底纹从 64% 高度起，正好压在汉字基线附近，像用马克笔划过 */
background: linear-gradient(transparent 64%, var(--sg-primary-soft) 64%);
}
/* 检索区两列：左筛选栏 + 右搜索与卡片 */
/* 本页正文的量度轴：比 1344px 的 shell 窄，并在 shell 内居中。
通栏的进行中卡片原来有 1068px，一张卡横跨整屏就失去了「卡片」的感觉；
收窄后卡片约 764px，两列预告卡各约 372px。
居中而非左对齐：页头横跨整个 shell，若正文只贴左边缘，右侧会留下一条
约 300px 的单边空白，与任何元素都不对齐。引言、检索区、投稿区共用这条轴，
左边缘因此落在同一条线上。 */
.sg-issue-measure {
max-width: 1040px;
margin-inline: auto;
}
.sg-issue-layout {
display: grid;
grid-template-columns: 236px minmax(0, 1fr);
align-items: start;
gap: 0 40px;
}
/* 筛选栏在左上并吸顶：网格行高由内容列决定，比它自身高，sticky 才有位移空间 */
.sg-issue-filters {
grid-column: 1;
grid-row: 1;
position: sticky;
top: 108px; /* 与锚点让位一致，避开悬浮导航 */
align-self: start;
display: grid;
gap: 0;
}
.sg-issue-main { grid-column: 2; grid-row: 1; }
.sg-filter-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(38, 24, 21, 0.14);
}
.sg-filter-title {
margin: 0;
color: var(--sg-ink);
font-family: var(--sg-font-display);
font-size: 17px;
font-weight: 600;
}
.sg-filter-clear {
border: 0;
background: none;
color: var(--sg-primary-ink);
cursor: pointer;
font: inherit;
font-size: 12.5px;
font-weight: 650;
text-decoration: underline;
text-underline-offset: 3px;
}
.sg-filter-clear:focus-visible { outline: 2px solid var(--sg-primary-accessible); outline-offset: 2px; }
/* 分组可折叠：用原生 details 拿到键盘可达性，summary 右侧自绘折叠箭头 */
.sg-filter-group { border-bottom: 1px solid var(--sg-card-line); }
.sg-filter-group > summary {
display: flex;
align-items: center;
justify-content: flex-start;
padding: 16px 0 12px;
color: var(--sg-muted);
cursor: pointer;
font-size: 12.5px;
font-weight: 650;
letter-spacing: .08em;
list-style: none;
}
.sg-filter-group > summary::-webkit-details-marker { display: none; }
.sg-filter-active {
margin-left: 8px;
padding: 1px 7px;
border-radius: var(--sg-radius-pill);
background: var(--sg-primary-accessible);
color: #fff;
font-size: 10.5px;
font-variant-numeric: tabular-nums;
letter-spacing: 0;
}
.sg-filter-group > summary::after {
content: "";
width: 7px;
height: 7px;
border: solid currentColor;
border-width: 0 1.5px 1.5px 0;
transform: rotate(45deg) translateY(-2px);
transition: transform 200ms ease;
}
.sg-filter-group[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.sg-filter-group > summary::after { margin-left: auto; }
.sg-filter-group > summary:focus-visible { outline: 2px solid var(--sg-primary-accessible); outline-offset: 2px; }
.sg-filter-hint {
margin: 0 0 10px;
color: var(--sg-subtle);
font-size: 11.5px;
line-height: 1.65;
}
.sg-filter-options { display: grid; gap: 4px; padding-bottom: 14px; }
/* 复选项：保留原生 input（键盘与读屏可用），只重绘外观 */
.sg-check {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: start;
gap: 10px;
padding: 7px 8px 7px 0;
border-radius: var(--sg-radius-sm);
cursor: pointer;
}
.sg-check:hover { background: var(--sg-accent-soft); }
.sg-check input {
appearance: none;
-webkit-appearance: none;
position: relative;
flex: none;
width: 18px;
height: 18px;
margin: 1px 0 0;
border: 1.5px solid rgba(38, 24, 21, 0.3);
border-radius: 5px;
background: var(--sg-paper);
cursor: pointer;
transition: background-color 160ms ease, border-color 160ms ease;
}
.sg-check input:checked { border-color: var(--sg-ink); background: var(--sg-ink); }
.sg-check input:checked::after {
content: "";
position: absolute;
left: 5px;
top: 2px;
width: 5px;
height: 9px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.sg-check input:focus-visible { outline: 2px solid var(--sg-primary-accessible); outline-offset: 2px; }
.sg-check-text {
color: var(--sg-ink);
font-size: 14px;
line-height: 1.5;
}
.sg-check-text em {
display: block;
margin-top: 2px;
color: var(--sg-muted);
font-size: 11.5px;
font-style: normal;
line-height: 1.55;
}
.sg-check-count {
color: var(--sg-subtle);
font-size: 12px;
font-variant-numeric: tabular-nums;
line-height: 1.6;
}
.sg-check input:checked ~ .sg-check-count { color: var(--sg-ink); font-weight: 650; }
/* 搜索与排序同一行，排序作为搜索的轻量辅助控制。 */
.sg-issue-controls {
display: flex;
align-items: center;
gap: 12px;
}
.sg-issue-search {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
gap: 10px;
padding: 0 18px;
border: 1px solid rgba(38, 24, 21, 0.2);
border-radius: var(--sg-radius-pill);
background: var(--sg-paper);
}
.sg-issue-search svg { flex: none; width: 18px; height: 18px; color: var(--sg-subtle); }
.sg-issue-search input {
width: 100%;
min-height: 40px;
padding: 0;
border: 0;
background: none;
color: var(--sg-ink);
font: inherit;
font-size: 14.5px;
}
.sg-issue-search input:focus { outline: none; }
.sg-issue-search:focus-within { border-color: var(--sg-primary-accessible); box-shadow: 0 0 0 1px var(--sg-primary-accessible); }
.sg-issue-count {
display: none;
margin: 14px 0 0;
color: var(--sg-muted);
font-size: 13px;
letter-spacing: .02em;
}
/* 议题卡：进行中通栏、预告两列紧凑。两种密度让「能参与」和「还不能」在扫视时
就已分开，不必去读状态文字——这也是替换掉原来全是分割线的同质排版的主要手段。 */
.sg-issue-cards {
column-count: 3;
column-gap: 18px;
margin-top: 24px;
}
.sg-issue-card {
break-inside: avoid;
margin: 0 0 18px;
}
/* 瀑布流中的重点卡不跨列：跨列会重新引入同行对齐，重点通过封面和字号表达。 */
.sg-issue-card.is-featured,
.sg-issue-card.is-standard { break-inside: avoid; }
.sg-issue-card-state {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 5px 10px;
color: var(--sg-muted);
font-size: 12px;
}
.sg-issue-card-state > span:first-child {
color: var(--kind-ink);
font-weight: 650;
}
.sg-issue-card-action { color: var(--sg-subtle); }
.sg-issue-card.has-cover { padding-top: 24px; }
.sg-issue-card.has-cover .sg-issue-cover + .sg-issue-card-top { margin-top: 0; }
.sg-issue-card {
display: grid;
align-content: start;
border-color: rgba(38, 24, 21, .1);
border-left-width: 0;
border-radius: 18px;
box-shadow: 0 4px 18px rgba(38, 24, 21, .045);
transition: transform var(--sg-transition), box-shadow var(--sg-transition), border-color var(--sg-transition);
/* 网格项默认 min-width:auto，长英文标题与标签行会把轨道顶宽、窄屏横向溢出。
卡片与其子项都归零最小宽度，标题再允许任意处断行。 */
min-width: 0;
gap: 12px;
padding: 24px 26px 22px;
border: 1px solid var(--sg-card-line);
border-left: 0;
border-radius: var(--sg-radius-sm);
background: var(--sg-card-paper);
color: inherit;
text-decoration: none;
}
.sg-issue-card > * { min-width: 0; }
.sg-issue-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(38, 24, 21, .1); }
.sg-issue-card:focus-visible { outline: 2px solid var(--sg-primary-accessible); outline-offset: 3px; }
.sg-issue-card.is-featured h3 { font-size: clamp(1.35rem, 2.2vw, 1.85rem); }
.sg-issue-card.is-plain { background: rgba(255,255,255,.58); }
/* 封面卡：图在上、内容在下；纯文字卡保持原布局。cover 图失败自动隐藏回退纯文字。 */
.sg-issue-cover {
position: relative;
display: block;
margin: -24px -26px 0;
border-radius: var(--sg-radius-sm) var(--sg-radius-sm) 0 0;
overflow: hidden;
aspect-ratio: 16 / 10;
background: var(--sg-primary-soft);
}
.sg-issue-card.is-open .sg-issue-cover { margin: -30px -32px 0; }
.sg-issue-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 排序切换：与搜索框同一行的小型分段控件 */
.sg-issue-sort {
display: inline-flex;
align-items: center;
gap: 4px;
margin: 6px 0 0;
}
.sg-issue-sort button {
padding: 4px 12px;
border: 1px solid var(--sg-card-line);
border-radius: var(--sg-radius-pill);
background: transparent;
color: var(--sg-muted);
font-size: 12px;
font-weight: 650;
letter-spacing: .04em;
cursor: pointer;
transition: color var(--sg-transition), border-color var(--sg-transition), background var(--sg-transition);
}
.sg-issue-sort button.is-active {
border-color: var(--sg-primary);
background: var(--sg-primary-soft);
color: var(--sg-primary-ink);
}
.sg-issue-sort button:focus-visible { outline: 2px solid var(--sg-primary-accessible); outline-offset: 2px; }
/* 色相由 issues-list.js 从词表写成内联自定义属性，新增类型不必在这里加规则；
下面两行只是词表缺色时的兜底 */
.sg-issue-card { --kind-hue: var(--sg-line-strong); --kind-ink: var(--sg-muted); }
/* 进行中通栏，并把内容压在可读行宽内，避免 1200px 通栏下文字横跨太长 */
.sg-issue-card.is-open { padding: 30px 32px 26px; }
.sg-issue-card.is-open > * { max-width: min(52em, 100%); }
/* 封面靠负 margin 出血到卡片左右边缘，行宽钳制（100% 按内容盒解析）会把它
钳短、右缘永远够不到卡片边——封面必须豁免 max-width */
.sg-issue-card.is-open > .sg-issue-cover { max-width: none; }
.sg-issue-card-top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
/* 发起人位进了顶部 flex 行后不能再带 margin-top：居中对齐把外边距算进
对齐盒，12px 会让头像比徽标低半格（2026-08-26 同行对齐修复） */
.sg-issue-card-top .sg-issue-proposer { margin-top: 0; }
.sg-issue-kind {
display: inline-flex;
align-items: center;
gap: 7px;
color: var(--sg-muted);
font-size: 12px;
font-weight: 650;
letter-spacing: .06em;
}
.sg-issue-kind::before {
content: '';
width: 9px;
height: 9px;
flex: 0 0 9px;
border-radius: 50%;
background: var(--kind-hue);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--kind-hue) 16%, transparent);
}
.sg-issue-badge {
padding: 4px 11px;
border: 1px solid var(--sg-card-line);
border-radius: var(--sg-radius-pill);
color: var(--sg-muted);
font-size: 11.5px;
letter-spacing: .04em;
}
.sg-issue-badge.is-open {
border-color: transparent;
/* 用可访问版朱砂而非 --sg-primary：11.5px 白字在 #d94b2b 上只有 4.21，不足 AA */
background: var(--sg-primary-accessible);
color: #fff;
font-weight: 650;
}
/* 已完结 = 已交付：用拱形色板里的收成暗绿（#26422B），与「进行中」朱砂拉开 */
.sg-issue-badge.is-finished {
border-color: transparent;
background: #26422B;
color: #fff;
font-weight: 650;
}
.sg-issue-card h3 {
margin: 0;
font-family: var(--sg-font-display);
font-size: 20px;
font-weight: 600;
letter-spacing: 0;
line-height: 1.45;
overflow-wrap: anywhere; /* Tool-Side Harness 这类长英文串在窄屏要能断 */
}
.sg-issue-card.is-open h3 { font-size: clamp(1.4rem, 2vw, 1.75rem); font-weight: 400; }
/* 一句钩子：卡片上唯一的正文，写成问句，不铺开成介绍 */
.sg-issue-brief {
margin: 0;
color: var(--sg-copy-ink);
font-size: 15px;
line-height: 1.8;
}
/* 「下一步 / 现在最缺」正文行：进行中与筹备中议题的机制边界字段
（OPERATIONS.md 2026-08-27：卡片须可见当前阶段、下一步动作、参与角色、
完成去处）。字段无值时整行不出现，不伪造。 */
.sg-issue-need {
margin: 0;
color: var(--sg-ink);
font-size: 13.5px;
line-height: 1.7;
}
.sg-issue-need > span {
margin-right: 8px;
padding: 2px 8px;
border-radius: var(--sg-radius-pill);
background: var(--sg-primary-soft);
color: var(--sg-primary-ink);
font-size: 11px;
font-weight: 650;
letter-spacing: .06em;
white-space: nowrap;
}
/* 发起人位（头像 + 用户名）：来自后端记录系统；静态兜底数据无此字段，整行不出现 */
.sg-issue-proposer {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 12px;
color: var(--sg-muted);
font-size: 12.5px;
letter-spacing: .02em;
}
/* 头像必须带 .sg-frame 前缀：组件库有 `.sg-frame img { width: 100% }`，
类+标签的权重高于单个 .sg-issue-face，不提权重的话 22px 的圆头像会被拉成
容器满宽、只有高度还是 22px，整张脸压扁变形。flex 项还要 flex: 0 0 auto，
否则在 flex 行里会被挤扁。 */
.sg-frame .sg-issue-face {
width: 22px;
height: 22px;
flex: 0 0 auto;
border-radius: 50%;
object-fit: cover;
border: 1px solid var(--sg-card-line);
background: var(--sg-paper);
}
.sg-issue-person-link { display: inline-flex; text-decoration: none; }
.sg-issue-person-link:focus-visible { outline: 2px solid var(--sg-primary-accessible); outline-offset: 2px; border-radius: 50%; }
.sg-issue-participant-face {
margin-left: -6px;
}
.sg-issue-face-more {
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: -6px;
background: var(--sg-card-paper);
color: var(--sg-muted);
font-size: 10px;
font-weight: 700;
}
.sg-issue-face-initial {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--sg-primary-soft);
color: var(--sg-primary-ink);
font-size: 11px;
font-weight: 700;
}
.sg-issue-card-foot {
display: flex;
align-items: baseline;
justify-content: flex-start;
flex-wrap: wrap;
gap: 8px 18px;
margin-top: 4px;
padding-top: 14px;
border-top: 1px solid var(--sg-card-line);
font-size: 12.5px;
}
/* 脚部协作头像串：负责人/助理/已确认参与者（均经 public_profile 授权），
叠放复用详情页的 .sg-issue-participant-face；第一个是串首，不回叠 */
.sg-issue-participants { display: inline-flex; align-items: center; }
.sg-issue-participants .sg-issue-person-link:first-child .sg-issue-participant-face,
.sg-issue-participants > .sg-issue-face:first-child { margin-left: 0; }
/* 完成去处：已交付议题的成果入口，用收成暗绿，比 muted 更可见 */
.sg-issue-dest { color: #26422B; font-weight: 650; letter-spacing: .02em; }
/* 参与方式标签（learn/create，2026-09-08）：脚注里的轻文字标记，
与主题/成果去向同层，不另做胶囊——类型语义交给词表，视觉不抢状态徽标 */
.sg-issue-participation { color: var(--sg-subtle); font-weight: 600; letter-spacing: .02em; }
.sg-issue-preview {
position: absolute;
inset: 0;
z-index: 3;
display: flex;
align-items: flex-end;
justify-content: flex-start;
padding: 18px;
background: linear-gradient(180deg, rgba(38,24,21,.42) 0%, rgba(38,24,21,.12) 52%, rgba(38,24,21,.02) 100%);
color: #fff;
opacity: 0;
pointer-events: none;
transition: opacity 180ms ease;
}
.sg-issue-card { position: relative; overflow: hidden; }
.sg-issue-card:hover .sg-issue-preview,
.sg-issue-card:focus-visible .sg-issue-preview { opacity: 1; }
.sg-issue-preview-state {
position: absolute;
left: 14px;
bottom: 14px;
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 6px 11px;
border-radius: 999px;
background: #ffffff;
color: var(--sg-ink);
font-size: 12px;
font-weight: 650;
text-shadow: none;
}
.sg-issue-preview-action {
position: absolute;
top: 14px;
right: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 68px;
min-height: 36px;
padding: 8px 16px;
border-radius: 999px;
background: var(--sg-primary-accessible);
color: #ffffff;
font-size: 13px;
font-weight: 700;
box-shadow: 0 5px 14px rgba(179,54,32,.24);
}
.sg-issue-card.is-upcoming .sg-issue-preview { background: linear-gradient(180deg, rgba(38,24,21,.34) 0%, rgba(38,24,21,.1) 52%, rgba(38,24,21,.02) 100%); }
/* 「暂未开放」前缀落在白色 pill 上，必须用可见色——rgba(255,255,255,.72)
白底白字等于隐形，只留下一段谜之空白（2026-08-26 修复） */
.sg-issue-card.is-upcoming .sg-issue-preview-state::before { content: '暂未开放 · '; color: var(--sg-subtle); }
@media (max-width: 560px) {
/* 触屏没有 hover：桌面悬停层在窄屏改为常显。但绝对定位蒙层版会压住卡片
真实脚部的分区/成果文字（状态徽标还与顶部重复），改为文档流内一行：
仅开放议题在脚部行右侧出一枚「参与」，其余阶段不出空条。 */
.sg-issue-preview {
position: static;
inset: auto;
display: flex;
align-items: center;
justify-content: flex-end;
min-height: 0;
margin-top: -2px;
padding: 0;
background: none;
color: inherit;
opacity: 1;
pointer-events: auto;
transition: none;
}
.sg-issue-preview-state { display: none; } /* 阶段状态保留在顶部徽标，不重复 */
.sg-issue-card.is-upcoming .sg-issue-preview { display: none; }
.sg-issue-preview-action {
position: static;
top: auto;
right: auto;
min-height: 34px;
min-width: 74px;
padding: 6px 14px;
}
}
/* .sg-issue-dest 已前移到卡片脚部规则区（收成暗绿版），此处不再重复定义 */
.sg-issue-card-foot .sg-go { font-weight: 650; }
.sg-issue-card.is-open:hover,
.sg-issue-card.is-open:focus-visible { border-color: rgba(159, 47, 29, 0.3); }
a.sg-issue-card:hover .sg-go { transform: translateX(4px); }
a.sg-issue-card .sg-go { display: none; }
a.sg-issue-card:focus-visible { outline: 2px solid var(--sg-primary-accessible); outline-offset: 3px; }
.sg-issue-empty {
grid-column: 1 / -1;
margin: 0;
padding: 48px 0;
color: var(--sg-muted);
font-size: 14.5px;
text-align: center;
}
.sg-issue-empty button {
margin-left: 8px;
border: 0;
background: none;
color: var(--sg-primary-ink);
cursor: pointer;
font: inherit;
font-weight: 650;
text-decoration: underline;
text-underline-offset: 3px;
}
/* 浏览区与发起入口之间的过渡插图。只做一次呼吸，不承载信息，所以没有标题与说明。
底色给纸白而不是留空：图未解码完时占位是纸面而不是一块透明的洞。
与下面的空位卡同宽，都落在 .sg-issue-measure 那条居中的量度轴上——引言、
筛选栏、卡片列表的左右缘都在这条轴上，这一组不另起一条轴。
试过「上靠右、下靠左」的错位版本，退回居中：偏移轴会把这一页好不容易
统一起来的量度打散。
上边距 96px 比区块内任何间距都大，让这一组从列表里脱开成独立一段；
两块之间只留 20px，插图与卡片读成一组，而不是两件事。 */
.sg-issue-invite-art {
margin: 96px 0 20px;
border: 1px solid var(--sg-card-line);
border-radius: var(--sg-radius-sm);
overflow: hidden; /* 圆角要裁到图上，否则四角露出直角 */
background: var(--sg-card-paper);
}
.sg-issue-invite-art img {
display: block;
width: 100%;
height: auto;
}
/* 插图在上时收掉空位卡自己的上边距，间距由插图的 margin-bottom 单独决定，
两条外边距不叠加，也不必去算谁大谁小 */
.sg-issue-invite-art + .sg-issue-outro { margin-top: 0; }
/* 浏览区末尾的发起入口（空位卡）。做成虚线描边 + 加号，而不是又一张实线卡：
上面每张实线卡都是一条已存在的议题，这一张不是内容，是等着被填上的那一格。
注意不要在这块自身上用 transform 做 hover 位移——它由 effects.js 的 reveal
入场，GSAP 会留下内联 transform，内联样式会压掉 CSS 的 hover 位移。
抬升感改用 box-shadow 表达，这也是站内其它被 reveal 的卡片的做法。 */
.sg-issue-outro {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 18px 24px;
margin-top: 40px;
padding: 26px 28px;
border: 1.5px dashed var(--sg-line);
border-radius: var(--sg-radius-sm);
color: inherit;
text-decoration: none;
transition: border-color 260ms ease, background-color 260ms ease, box-shadow 260ms ease;
}
.sg-issue-outro:hover,
.sg-issue-outro:focus-visible {
border-style: solid;
border-color: rgba(159, 47, 29, 0.34);
background: var(--sg-card-paper);
box-shadow: 0 8px 22px rgba(38, 24, 21, 0.07);
}
.sg-issue-outro:focus-visible { outline: 2px solid var(--sg-primary-accessible); outline-offset: 3px; }
/* 加号用两条伪元素画：不依赖字体里有没有对齐得当的加号字形，也便于 hover 反色 */
.sg-issue-outro-mark {
position: relative;
flex: none;
width: 46px;
height: 46px;
border-radius: 50%;
background: var(--sg-primary-soft);
transition: background-color 260ms ease;
/* 呼吸式扩散环：只动 box-shadow，不占布局、不推动任何元素。周期放到 3.6s、
峰值透明度压到 0.3，意图是在页面底部提示「这里可以按」，而不是抢注意力。 */
animation: sg-outro-pulse 3.6s ease-out infinite;
}
.sg-issue-outro-mark::before,
.sg-issue-outro-mark::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: var(--sg-primary-ink);
transition: background-color 260ms ease;
}
.sg-issue-outro-mark::before { width: 16px; height: 2px; transform: translate(-50%, -50%); }
.sg-issue-outro-mark::after { width: 2px; height: 16px; transform: translate(-50%, -50%); }
@keyframes sg-outro-pulse {
0% { box-shadow: 0 0 0 0 rgba(217, 75, 43, 0.3); }
70%, 100% { box-shadow: 0 0 0 13px rgba(217, 75, 43, 0); }
}
.sg-issue-outro:hover .sg-issue-outro-mark,
.sg-issue-outro:focus-visible .sg-issue-outro-mark { background: var(--sg-primary-accessible); }
.sg-issue-outro:hover .sg-issue-outro-mark::before,
.sg-issue-outro:hover .sg-issue-outro-mark::after,
.sg-issue-outro:focus-visible .sg-issue-outro-mark::before,
.sg-issue-outro:focus-visible .sg-issue-outro-mark::after { background: #fff; }
.sg-issue-outro-copy { display: grid; gap: 6px; flex: 1 1 18em; min-width: 0; }
.sg-issue-outro-copy strong {
color: var(--sg-ink);
font-family: var(--sg-font-display);
font-size: 18px;
font-weight: 600;
letter-spacing: 0;
line-height: 1.5;
}
.sg-issue-outro-copy > span { color: var(--sg-copy-ink); font-size: 14px; line-height: 1.75; }
.sg-issue-outro-go {
flex: none;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 40px;
padding: 10px 18px;
border-radius: var(--sg-radius-pill);
background: var(--sg-primary-accessible);
color: #fff;
font-size: 13px;
font-weight: 650;
transition: background-color 260ms ease;
}
.sg-issue-outro-go em { display: inline-block; font-style: normal; transition: transform 240ms ease; }
.sg-issue-outro:hover .sg-issue-outro-go,
.sg-issue-outro:focus-visible .sg-issue-outro-go { background: #8f2819; }
.sg-issue-outro:hover .sg-issue-outro-go em,
.sg-issue-outro:focus-visible .sg-issue-outro-go em { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
.sg-issue-outro,
.sg-issue-outro-mark,
.sg-issue-outro-go,
.sg-issue-outro-go em { transition: none; }
.sg-issue-outro-mark { animation: none; }
}
@media (max-width: 860px) {
/* 收单列：筛选栏在上、搜索与卡片其次，按 DOM 顺序。
单列下筛选栏必须取消吸顶：它在内容之上、自成一行，吸顶不但没有意义，
还会在行高变化时把自己钉在内容上方。上一次提交误删了这条，此处恢复。 */
.sg-issue-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 28px; }
.sg-issue-filters { grid-column: 1; grid-row: auto; position: static; top: auto; }
.sg-issue-main { grid-column: 1; grid-row: auto; }
/* 复选项由竖列表改为横向胶囊：窄屏竖着排两组会把卡片挤到很下面 */
.sg-filter-options { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 16px; }
.sg-check {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border: 1px solid var(--sg-card-line);
border-radius: var(--sg-radius-pill);
}
.sg-check-text em { display: none; } /* 胶囊里放不下副说明 */
.sg-issue-cards { column-count: 2; column-gap: 14px; }
.sg-issue-card { margin-bottom: 14px; }
.sg-issue-card.is-featured { grid-column: auto; }
.sg-issue-card.is-open { padding: 24px 22px 20px; }
/* 封面靠负 margin 出血到卡片边缘，margin 必须跟着上面的内边距同步收窄，
否则封面会顶出卡片左右两侧（移动端出血 bug 的根因） */
.sg-issue-card.is-open .sg-issue-cover { margin: -24px -22px 0; }
/* 窄屏把这一组与列表的距离收一半：单列下 96px 会让插图看起来跟列表断开 */
.sg-issue-invite-art { margin: 64px 0 16px; }
}
/* 窄屏：整块竖排成 加号 / 标题 / 说明 / 按钮。
copy 的 flex-basis 显式写成 100%，让换行是定下来的而不是「刚好挤不下」——
18em 随根字号浮动，靠临界宽度决定版式会在不同设备上给出不同结果。
按钮拉满整行，在拇指区成为一个完整的点击目标。 */
@media (max-width: 560px) {
.sg-issue-cards { column-count: 1; }
.sg-issue-card { margin-bottom: 14px; }
.sg-issue-card.is-featured, .sg-issue-card.is-standard { grid-column: auto; }
.sg-issue-card.is-featured h3 { font-size: 1.35rem; }
.sg-issue-card:hover { transform: none; box-shadow: 0 4px 18px rgba(38, 24, 21, .06); }
.sg-issue-invite-art { margin: 32px 0 16px; }
.sg-issue-outro { gap: 14px 18px; padding: 22px 20px; }
.sg-issue-outro-mark { width: 38px; height: 38px; }
.sg-issue-outro-copy { flex-basis: 100%; }
.sg-issue-outro-go { width: 100%; justify-content: center; }
}
/* 发起页的流程说明：把「谁做什么、多久回」逐条写清楚，减少提交前的不确定 */
.sg-flow {
counter-reset: flow;
display: grid;
max-width: 46em;
margin: 34px 0 0;
padding: 0;
list-style: none;
}
.sg-flow > li {
counter-increment: flow;
position: relative;
padding: 14px 0 14px 40px;
border-top: 1px solid var(--sg-card-line);
color: var(--sg-copy-ink);
font-size: 14.5px;
line-height: 1.8;
}
.sg-flow > li:last-child { border-bottom: 1px solid var(--sg-card-line); }
.sg-flow > li::before {
content: counter(flow);
position: absolute;
left: 0;
top: 16px;
display: grid;
place-items: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--sg-primary-soft);
color: var(--sg-primary-ink);
font-size: 11.5px;
font-weight: 650;
}
.sg-flow strong { color: var(--sg-ink); font-weight: 650; }
/* 议题详情页：英文副标题 + 事实条（类型/状态/阶段/产出/更新时间） */
.sg-issue-title-en {
margin-top: 16px;
max-width: 44em;
color: var(--sg-copy-ink);
font-family: var(--sg-font-sans);
font-size: 15px;
font-style: italic;
line-height: 1.6;
letter-spacing: 0.01em;
}
/* 事实条：四项（更新日期已移到下面的历史入口行）。四项能在 4 / 2 / 1 三种列数下
都排满，不再出现 auto-fit 在 3 列时空一格、值参差的情况。
顶线换成朱砂细线：这一条是全页的「规格栏」，与右侧导览的朱砂顶线同一种记号，
读者能认出「这是索引类信息，不是正文」。 */
.sg-issue-facts {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
margin: 0;
border-top: 2px solid var(--sg-primary);
border-bottom: 1px solid var(--sg-card-line);
}
/* 左右都留内边距，只有每行第一格贴着量度轴：没有左内边距时，第 2–4 格的文字会
直接顶在自己左边那条分隔线上，读起来像贴着边框。行首是哪一格随列数变化，
所以下面每个断点各自把行首的左内边距归零。 */
.sg-issue-facts > div {
padding: 18px 26px;
border-right: 1px solid var(--sg-card-line);
}
.sg-issue-facts > div:first-child { padding-left: 0; }
.sg-issue-facts > div:last-child { border-right: 0; }
.sg-issue-facts dt {
margin-bottom: 9px;
color: var(--sg-subtle);
font-size: 11px;
font-weight: 650;
letter-spacing: 0.12em;
}
/* 值比标签重一档：扫视时先看到内容，标签只作定位 */
.sg-issue-facts dd {
margin: 0;
color: var(--sg-ink);
font-size: 15px;
font-weight: 500;
line-height: 1.65;
text-wrap: pretty;
}
.sg-issue-facts dd.is-open { color: var(--sg-primary-ink); font-weight: 650; }
@media (max-width: 1000px) {
.sg-issue-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 两列时第二行要自己的上边线，否则两行之间没有分隔 */
.sg-issue-facts > div:nth-child(n + 3) { border-top: 1px solid var(--sg-card-line); }
.sg-issue-facts > div:nth-child(2n) { border-right: 0; }
/* 两列下行首是第 1、3 格 */
.sg-issue-facts > div:nth-child(odd) { padding-left: 0; }
}
@media (max-width: 620px) {
.sg-issue-facts { grid-template-columns: 1fr; }
.sg-issue-facts > div:nth-child(n + 3) { border-top: 0; }
.sg-issue-facts > div { border-right: 0; border-bottom: 1px solid var(--sg-card-line); padding: 16px 0; }
.sg-issue-facts > div:last-child { border-bottom: 0; }
}
/* 详情页正文：议题说明比文章更偏文档，行宽略窄于 .sg-prose 默认。
.sg-prose 本身是 margin: 0 auto 居中（文章页没有页头对齐要求），且它在本文件里
出现得更晚，所以这里必须用双类选择器提高优先级才能改成左对齐、与页头 h1 同起始线。
首个 h2 的顶部分隔线去掉，上方紧接事实条已有边框，两条线会叠成双线。 */
.sg-prose.sg-issue-prose { max-width: 46em; margin-left: 0; margin-right: 0; margin-top: 8px; }
.sg-issue-prose > h2:first-child { margin-top: 8px; padding-top: 0; border-top: 0; }
/* ---------- 议题详情页：整页量度轴 ---------- */
/* 详情页此前直接用 1344px 的 shell：正文为可读性限在 52em（约 858px），右侧导览
240px，于是两者之间空出约 140px 没有内容的带，整块读起来像被推到了左边。
这里给详情页一条专属量度轴：52em 正文 + 56px 间距 + 240px 导览 ≈ 1160px。
收窄之后正文与导览之间只剩几十像素的自然间距，而页头、事实条、时间线、报名区
全部落在同一条轴上一起居中——偏左的观感来自「轴太宽、内容填不满」，不是对齐错了。
仍然用 .sg-shell 的 width: min() 打底，所以窄屏行为不变。 */
.sg-issue-detail > .sg-shell,
.sg-issue-detail > section.sg-shell,
.sg-issue-detail > div.sg-shell { max-width: 1160px; }
/* ---------- 议题详情页：正文两列 + 右侧常驻导览 ---------- */
/* 复用文章页的 .sg-toc-* 视觉与交互，只换一层布局容器：正文左、导览右。
目录条目由 issue-toc.js 按正文 h2 生成——正文的节会随研究进展增删，手写目录
必然脱节。sticky 能生效的前提（.sg-frame 用 overflow: clip 而非 hidden）已由
文章页那一节处理过，这里直接受益。 */
.sg-issue-toc-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 240px;
gap: 56px;
align-items: start;
}
.sg-issue-toc-main { min-width: 0; }
/* 正文原本靠 .sg-prose.sg-issue-prose 的 46em 限宽，两列下由左列决定宽度，
但仍保留一个上限：一行 70 多个汉字读起来会丢行 */
.sg-issue-toc-main .sg-issue-prose { max-width: 52em; }
.sg-issue-toc {
position: sticky;
top: 104px;
padding-top: 18px;
border-top: 2px solid var(--sg-primary);
max-height: calc(100vh - 132px);
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
}
/* 目录里的两条页面级锚点（变更历史 / 报名参与）：它们不在正文里，用一条分隔线
与正文小节分开，颜色也压低一档，避免读成正文的一节 */
.sg-issue-toc .sg-toc-nav a.is-page-anchor { color: var(--sg-subtle); }
.sg-issue-toc .sg-toc-nav a.has-rule {
margin-top: 10px;
padding-top: 13px;
border-top: 1px solid var(--sg-card-line);
}
.sg-issue-toc-mobile { display: none; }
/* 目录列放不下就收掉，改用正文上方的折叠版：1080px 是 240px 目录 + 56px 间距
之后左列还能剩 600px 出头的临界点，再窄正文就开始难读 */
@media (max-width: 1080px) {
.sg-issue-toc-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
.sg-issue-toc { display: none; }
.sg-issue-toc-main .sg-issue-prose { max-width: 46em; }
.sg-issue-toc-mobile {
display: block;
margin: 0 0 26px;
padding: 14px 18px;
border: 1px solid var(--sg-card-line);
border-radius: var(--sg-radius-sm);
background: var(--sg-card-paper);
}
.sg-issue-toc-mobile summary { cursor: pointer; color: var(--sg-muted); font-size: 13px; font-weight: 650; }
.sg-issue-toc-mobile summary:focus-visible { outline: 2px solid var(--sg-primary-accessible); outline-offset: 2px; }
.sg-issue-toc-mobile .sg-toc-nav { margin-top: 10px; }
}
/* ---------- 议题详情页：页头标签行 ---------- */
/* 标签紧跟在定位句之后：进页第一屏要让人同时看到「是什么」与「属于哪些领域」，
不必先滚到事实条。标签是静态写在 HTML 里的（本页整体就是静态页，见页内注释），
与 issues-data.js 的 tags 保持一致，改数据时请一并改这里。 */
.sg-issue-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 22px;
padding: 0;
list-style: none;
}
.sg-issue-tags li {
padding: 5px 12px;
border: 1px solid var(--sg-card-line);
border-radius: var(--sg-radius-pill);
background: var(--sg-card-paper);
color: var(--sg-muted);
font-size: 12.5px;
letter-spacing: .02em;
white-space: nowrap;
}
/* 事实条区块紧贴页头：页头的行动行已经收尾，再叠一个 40px 的区块上边距会把
「规格栏」推得离标题太远 */
.sg-issue-facts-block { padding-top: 8px; }
/* ---------- 议题详情页：卡片式页头 ---------- */
/* 对标活动/竞赛详情页的卡：一行放徽标+标题、一行放元数据、底部左文案右主 CTA。
页头此前沿用 Hero 级规格（168px 顶距 + 68px 标题 + 八层纵向堆叠），首屏被页头
吃满；卡片化后同样信息压进约 400px，主 CTA 首屏可见。 */
.sg-page-head.is-issue { padding-top: 120px; padding-bottom: 40px; }
.sg-issue-breadcrumb {
margin: 0 0 14px;
color: var(--sg-subtle);
font-size: 13px;
letter-spacing: .02em;
}
.sg-issue-breadcrumb a { color: var(--sg-muted); text-decoration: none; }
.sg-issue-breadcrumb a:hover { color: var(--sg-ink); }
.sg-issue-breadcrumb span { margin: 0 6px; color: var(--sg-subtle); }
.sg-issue-masthead {
padding: 26px 30px 24px;
border: 1px solid var(--sg-card-line);
border-radius: var(--sg-radius-md);
background: #fff;
box-shadow: 0 1px 2px rgba(38, 24, 21, 0.04);
}
.sg-issue-masthead-title {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 8px 14px;
}
.sg-issue-masthead-title .sg-page-title {
margin: 0;
font-size: clamp(1.35rem, 2.4vw, 1.75rem);
line-height: 1.3;
max-width: none;
}
.sg-issue-masthead .sg-page-copy { margin-top: 10px; max-width: 46em; font-size: 15.5px; }
.sg-issue-masthead .sg-issue-tags { margin-top: 14px; }
.sg-issue-byline {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px 14px;
margin-top: 14px;
}
/* 两槽各自的历史上边距在行内会变成不均匀的空隙，归零后由容器 gap 统一 */
.sg-issue-byline .sg-issue-proposer-line,
.sg-issue-byline .sg-issue-collaboration-line { margin-top: 0; }
/* 底部行：左说明短语 + 右主 CTA（参考图「期待您的参与」+「立即报名」的排布） */
.sg-issue-masthead-foot {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px 18px;
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid var(--sg-card-line);
}
.sg-issue-masthead-foot .sg-issue-act-note { margin: 0; flex: 1 1 240px; }
.sg-issue-masthead-foot .sg-issue-act { margin-top: 0; }
.sg-page-head.is-issue .sg-issue-edit { margin-top: 18px; }
@media (max-width: 620px) {
.sg-issue-masthead { padding: 22px 20px 20px; }
.sg-issue-masthead-foot { padding-top: 14px; }
}
/* 议题详情页：全部区块头统一为左对齐小标题（kicker 在上、标题 20px、说明句跟下），
与摘要块「我们要做什么」同一套块头语言；此前各块头是 kicker 左 + 特大标题右
（space-between），同页两套标题语言——「最新进展 / 这个方向上已有的研究」等块头
都割裂成左右两栏，扫视时先看到的是大字标题而不是内容（2026-08-28 页面编排修复）。
作用域限 .sg-issue-detail，不影响文章页等其它页面 */
.sg-issue-detail .sg-block-head {
justify-content: flex-start;
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding-bottom: 14px;
}
.sg-issue-detail .sg-block-head h2 { font-size: 20px; }
.sg-issue-detail .sg-section-lede { margin: 4px 0 0; font-size: 14px; line-height: 1.8; }
/* ---------- 议题详情页：行动行 ---------- */
/* 「报名参与」在页头：读完标题、署名与状态就已经够决定要不要参与了，
把报名按钮压在几千字正文之后，等于要求先读完研究说明才允许动念头。
这里的按钮是锚点，跳到页面下方真正的表单——表单仍留在后面，因为填写是收尾
动作，而决定参与是开头动作，两者不必在同一个位置。 */
.sg-issue-act {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 14px 18px;
margin-top: 26px;
}
.sg-issue-act-note {
margin: 0;
color: var(--sg-copy-ink);
font-size: 13.5px;
line-height: 1.7;
}
.sg-issue-facts-more {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 18px;
color: var(--sg-primary-ink);
font-size: 13.5px;
font-weight: 650;
text-decoration: none;
border-bottom: 1px solid var(--sg-line);
transition: border-color var(--sg-transition);
}
.sg-issue-facts-more:hover { border-color: var(--sg-primary); }
/* 更新日期 + 变更历史入口同一行：日期是「什么时候的信息」，入口是「怎么看变化」，
两件事本就该挨着；也顺带把事实条从五项收成能排满的四项。 */
.sg-issue-updated {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 6px 16px;
margin: 14px 0 0;
color: var(--sg-subtle);
font-size: 13px;
}
.sg-issue-updated .sg-issue-facts-more { margin-top: 0; }
.sg-issue-facts-more:focus-visible { outline: 2px solid var(--sg-primary-accessible); outline-offset: 3px; }
/* ---------- 议题详情页：正文里的细节折叠 ---------- */
/* 正文原本是几千字连续铺开：研究问题、方法链、角色表、参与前提、研究纪律全部
同权重展开，进页的人要滚很久才知道自己能不能参与。现在把「决定要不要参与」
需要的关键信息留在展开状态，把只有真正动手时才需要的细节（大表格、方法链、
前置知识清单、研究纪律）收进折叠块。
内容一条没删——研究说明是这一页的价值所在，收起不等于砍掉；折叠标题写清里面
是什么，让人知道展开会得到什么。 */
.sg-prose-more {
margin: 18px 0 26px;
border: 1px solid var(--sg-card-line);
border-radius: var(--sg-radius-sm);
background: var(--sg-card-paper);
}
.sg-prose-more > summary {
padding: 13px 18px;
color: var(--sg-ink);
cursor: pointer;
font-size: 14px;
font-weight: 650;
letter-spacing: .01em;
list-style: none;
}
.sg-prose-more > summary::-webkit-details-marker { display: none; }
.sg-prose-more > summary::after {
content: "";
display: inline-block;
width: 6px;
height: 6px;
margin-left: 10px;
border-right: 1.5px solid var(--sg-subtle);
border-bottom: 1.5px solid var(--sg-subtle);
transform: rotate(45deg) translateY(-2px);
transition: transform var(--sg-transition);
}
.sg-prose-more[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.sg-prose-more > summary:focus-visible { outline: 2px solid var(--sg-primary-accessible); outline-offset: 2px; }
.sg-prose-more > summary:hover { color: var(--sg-primary-ink); }
/* 折叠内容缩进并压掉首个标题的上边距：它已经紧贴 summary，不需要再留段距 */
.sg-prose-more > :not(summary) { padding-inline: 18px; }
.sg-prose-more > :not(summary):first-of-type { margin-top: 4px; }
.sg-prose-more > :last-child { padding-bottom: 16px; }
.sg-prose-more h3 { margin-top: 20px; padding-top: 0; border-top: 0; }
.sg-prose-more table { margin-inline: 18px; width: calc(100% - 36px); }
/* ---------- 议题详情页：横向变更时间线 ---------- */
/* 研究是一步步长出来的，纵向长文读不出「先后」；横向时间线把里程碑按发生顺序
摊开，一眼能看到走到哪一步、哪一步被撤回了。
节点没有日期：源材料里只有「更新于」一个日期，逐条编日期就是编造。所以节点按
阶段先后排列，状态由 is-done / is-current / is-next 三个修饰类表达，最后一个
已发生的节点带上那个唯一可靠的日期。
横向滚动是有意的：节点比屏幕宽时不折行，因为折行会毁掉「时间往右走」这个读法。
容器带 tabindex 与 aria-label，键盘可聚焦后用方向键滚动。 */
.sg-changelog {
position: relative;
margin-top: 30px;
}
.sg-changelog-track {
display: flex;
gap: 0;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
padding-bottom: 10px; /* 给滚动条留位，避免压住卡片底部文字 */
}
.sg-changelog-track:focus-visible { outline: 2px solid var(--sg-primary-accessible); outline-offset: 4px; }
.sg-changelog-item {
position: relative;
flex: 0 0 clamp(232px, 25vw, 292px);
min-width: 0;
padding: 30px 24px 0 0;
scroll-snap-align: start;
}
/* 连线从本节点的圆点起、到本项右缘止；最后一项不画，线因此不会出头 */
.sg-changelog-item::before {
content: "";
position: absolute;
top: 9px;
left: 9px;
right: 0;
height: 1px;
/* 用 --sg-line 而不是 --sg-card-line：后者只有 8% 不透明度，横跨 260px 后
几乎看不见，节点会散成一排孤立的点，读不出「一条时间线」 */
background: var(--sg-line);
}
.sg-changelog-item:last-child::before { display: none; }
.sg-changelog-item::after {
content: "";
position: absolute;
top: 4px;
left: 0;
width: 11px;
height: 11px;
border-radius: 50%;
border: 2px solid var(--sg-line-strong);
background: var(--sg-stage);
box-sizing: border-box;
}
.sg-changelog-item.is-done::after { background: var(--sg-line-strong); }
.sg-changelog-item.is-current::after {
border-color: var(--sg-primary-accessible);
background: var(--sg-primary-accessible);
box-shadow: 0 0 0 4px var(--sg-primary-soft);
}
.sg-changelog-item.is-next::after { border-style: dashed; border-color: var(--sg-subtle); }
/* 被撤回的节点：空心 + 朱砂描边——它确实发生过（不是虚线的「还没发生」），
但结论已经收回（不是实心的「已站住」） */
.sg-changelog-item.is-withdrawn::after { border-color: var(--sg-primary-ink); background: var(--sg-stage); }
.sg-changelog-stage {
display: block;
color: var(--sg-subtle);
font-size: 11.5px;
font-weight: 650;
letter-spacing: .06em;
}
.sg-changelog-item.is-current .sg-changelog-stage { color: var(--sg-primary-ink); }
.sg-changelog-item h3 {
margin: 8px 0 0;
font-family: var(--sg-font-display);
font-size: 16px;
font-weight: 600;
line-height: 1.5;
}
.sg-changelog-item p {
margin: 6px 0 0;
color: var(--sg-copy-ink);
font-size: 13px;
line-height: 1.7;
}
.sg-changelog-level {
display: inline-block;
margin-top: 10px;
padding: 3px 9px;
border-radius: var(--sg-radius-pill);
background: var(--sg-accent-soft);
color: var(--sg-muted);
font-size: 11px;
letter-spacing: .03em;
}
.sg-changelog-item.is-withdrawn .sg-changelog-level { background: #f6e2dd; color: var(--sg-primary-ink); }
/* 右缘渐隐：节点通常比容器宽，给一个「右边还有」的提示，而不是硬切 */
.sg-changelog::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 10px;
width: 56px;
pointer-events: none;
background: linear-gradient(to left, var(--sg-stage) 0%, rgba(255, 253, 247, 0) 100%);
}
@media (max-width: 560px) {
.sg-changelog-item { flex-basis: 78vw; padding-right: 18px; }
.sg-changelog::after { width: 28px; }
}
/* 预告登记表单：讨论功能开放前收集参与方向，状态对用户可见 */
.sg-notify {
display: grid;
gap: 18px;
margin-top: 32px;
padding: 26px 28px 28px;
border: 1px solid var(--sg-line);
border-radius: var(--sg-radius-card);
background: var(--sg-paper);
}
.sg-notify-copy { display: grid; gap: 8px; }
.sg-notify-copy h3 {
margin: 0;
font-family: var(--sg-font-display);
font-size: 21px;
font-weight: 400;
line-height: 1.35;
}
.sg-notify-copy p {
max-width: 46em;
margin: 0;
color: var(--sg-muted);
font-size: 14px;
line-height: 1.7;
}
.sg-notify-fields {
display: grid;
align-items: end;
gap: 14px;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
}
/* 字段样式由预告登记表单与议题投稿表单共用，不各写一份 */
.sg-notify .sg-field,
.sg-propose .sg-field { display: grid; min-width: 0; gap: 6px; }
/* 已登录时的署名说明：替代邮箱输入行，头像 + 用户名上站的口径 */
/* 署名说明：原来是 primary-soft 填色 + 描边的一整条，在提交区里比旁边的
深色按钮还抢眼，读起来像一条警告。改成安静的一行小字，只用左侧一条朱砂细线
点出「这是关于你身份的信息」——与卡片左侧色锚同一套做法。 */
.sg-propose-identity {
margin: 0;
padding: 2px 0 2px 12px;
border-left: 2px solid var(--sg-primary);
color: var(--sg-muted);
font-size: 13px;
line-height: 1.75;
}
.sg-propose-identity strong { color: var(--sg-ink); font-weight: 650; }
.sg-notify .sg-field > span,
.sg-propose .sg-field > span {
color: var(--sg-subtle);
font-size: 12px;
font-weight: 650;
letter-spacing: .06em;
}
.sg-notify .sg-field input,
.sg-propose .sg-field input,
.sg-propose .sg-field textarea {
width: 100%;
min-height: 44px;
padding: 10px 14px;
border: 1px solid rgba(38, 24, 21, 0.22);
border-radius: var(--sg-radius-sm);
background: var(--sg-stage);
color: var(--sg-ink);
font-family: inherit;
font-size: 14.5px;
}
.sg-propose .sg-field textarea { line-height: 1.7; resize: vertical; }
.sg-notify .sg-field input:focus-visible,
.sg-propose .sg-field input:focus-visible,
.sg-propose .sg-field textarea:focus-visible {
outline: 2px solid var(--sg-primary-accessible);
outline-offset: 3px;
}
/* ===== 投稿页正文区（propose-body.js：只读预览 + 去编辑页的入口） =====
投稿页不再挂 Vditor，所以这一节只有入口卡、预览与脚部三块；
.vditor 相关规则只剩下面沉浸页那一节还在用。 */
/* 组件库 `.sg-frame img { width: 100% }` 是专类+类型选择器（0,1,1），会把
编辑器与预览里的行内图片、emoji 拉满宽——头像变形同源的坑。必须带
.sg-frame 前缀压到 0,2,1，单写 `.vditor img` 压不过它。 */
.sg-frame .vditor img,
.sg-frame .vditor svg { width: auto; max-width: 100%; }
/* 正文区的入口卡：两枚并排等宽的按钮——左进空白编辑器（深色主按钮），
右从 .md 文件来（浅色次按钮，读完直接落在编辑模式里）。
字段标题「正文（Markdown）」已在上方说明这是什么，卡内不再重复文字。 */
.sg-body-entry {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin: 2px 0 14px;
padding: 14px 16px;
border: 1px solid var(--sg-card-line);
border-radius: var(--sg-radius-card);
background: var(--sg-card-paper);
}
/* .sg-pill 是 inline-flex，宽度由内容决定——grid 单元里要占满得显式给宽 */
.sg-body-entry .sg-pill { width: 100%; }
@media (max-width: 560px) {
/* 两枚标签都短，430px 下并排仍放得下；再窄才收单列 */
.sg-body-entry { grid-template-columns: minmax(0, 1fr); }
}
/* 投稿页正文区已经不做预览：正文的写与看都归到编辑模式 /write（见下方沉浸页
那一节），这里只剩「表单 or 登录门」这一层容器，不需要分栏。 */
/* 提交前的流程说明已搬到底部「投稿须知」（.sg-propose-notes），
这里只留署名说明的样式 */
/* 字数提示与「去编辑模式修改」同一行：左边是会真的拦提交的 20 字下限，
右边是回到编辑页的次要入口 */
.sg-body-foot {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px 20px;
flex-wrap: wrap;
margin-top: 8px;
}
.sg-body-foot small { margin: 0; }
/* button 复位：它读起来该是一行小字动作，而不是一枚灰色系统按钮 */
.sg-body-inline {
flex: 0 0 auto;
padding: 0;
border: 0;
background: none;
font: inherit;
font-size: 13px;
font-weight: 550;
color: var(--sg-subtle);
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.sg-body-inline:hover { color: var(--sg-ink); }
.sg-body-inline:disabled { color: var(--sg-copy-ink); text-decoration: none; cursor: default; }
/* 收窄断点的收单列已并入上面 .sg-body-entry 自己的媒体查询，此处无需再写 */
/* 法律文件页（privacy.html / terms.html）已改为独立成页，样式在
assets/css/legal.css，不再走 site.css——原来那批 .sg-legal-* 规则
（日期戳、待补充占位高亮、联系二维码图注）随之删除。 */
/* 注册表单底的同意提示：一句话带两枚链接，不与「完成注册」抢视觉 */
.sg-auth-agree {
margin: 14px 0 0;
font-size: 12px;
line-height: 1.7;
color: var(--sg-copy-ink);
}
.sg-auth-agree a { color: var(--sg-primary); }
/* 页脚版权行：© … 保留所有权利 ｜ 隐私政策 · 服务条款 ｜ 京ICP备…
三段同一行，用全角竖线分隔。窄屏允许整行折行，但每一段内部不断开
（备案号被折成两截既难读也不符合备案展示习惯）。 */
.sg-footer-meta {
white-space: normal;
}
.sg-footer-meta .sg-footer-legal-inline,
.sg-footer-meta .sg-footer-icp-line {
color: inherit;
white-space: nowrap;
}
.sg-footer-meta .sg-footer-legal-inline a,
.sg-footer-meta .sg-footer-icp-line a,
.sg-footer-meta .sg-footer-icp {
color: inherit;
text-decoration: none;
}
.sg-footer-meta .sg-footer-legal-inline a:hover,
.sg-footer-meta .sg-footer-icp-line a:hover,
.sg-footer-meta .sg-footer-icp:hover {
color: var(--sg-ink);
text-decoration: underline;
}
/* ===== 沉浸式写作页 /write（write.html；入口卡在投稿页正文区） ===== */
.sg-compose {
display: flex;
flex-direction: column;
min-height: 100vh; /* 顶栏固定，编辑器占满余下全部高度 */
}
.sg-compose-bar {
display: flex;
align-items: center;
gap: 14px;
padding: 10px clamp(16px, 4vw, 32px);
border-bottom: 1px solid var(--sg-line);
background: var(--sg-stage);
position: sticky;
top: 0;
z-index: 20;
}
.sg-compose-back {
flex: 0 0 auto;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--sg-subtle);
text-decoration: none;
white-space: nowrap;
padding: 8px 12px;
margin-left: -12px; /* 视觉上与标题对齐（点按热区保持宽裕） */
border-radius: 999px;
transition: color 0.15s ease, background 0.15s ease;
}
.sg-compose-back:hover { color: var(--sg-ink); background: var(--sg-accent-soft); }
/* 标题用发表页同款衬线字面：写下的样子就是上架的样子 */
.sg-compose-bar input[data-draft-title] {
flex: 1 1 auto;
min-width: 0;
border: none;
background: transparent;
padding: 10px 6px;
color: var(--sg-ink);
font-family: var(--sg-font-display);
font-size: 19px;
font-weight: 600;
letter-spacing: 0.01em;
}
.sg-compose-bar input[data-draft-title]::placeholder {
color: var(--sg-subtle);
opacity: 0.55;
font-weight: 400;
}
.sg-compose-bar input[data-draft-title]:focus-visible {
outline: 2px solid var(--sg-primary-accessible);
outline-offset: -2px;
border-radius: 6px;
}
.sg-compose-state {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 6px;
margin: 0;
font-size: 12px;
color: var(--sg-subtle);
white-space: nowrap;
}
.sg-compose-state::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--sg-primary);
}
.sg-compose-bar .sg-pill { flex: 0 0 auto; }
/* 顶栏的「预览 ↗」：投稿页不再做预览，预览与编辑在这一页复合——编辑器本身是
即时渲染，这条通往按发表宽度渲染的 /preview。做成安静的小字动作，
不与右边「完成写作」那枚主按钮抢。 */
.sg-compose-preview {
flex: 0 0 auto;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--sg-subtle);
text-decoration: none;
white-space: nowrap;
padding: 8px 10px;
border-radius: 999px;
transition: color 0.15s ease, background 0.15s ease;
}
.sg-compose-preview:hover { color: var(--sg-ink); background: var(--sg-accent-soft); }
.sg-compose-editor {
flex: 1 1 auto;
display: flex;
min-height: 0;
/* 挂载容器会被 Vditor 变成 .vditor 根（类名合并）：无边框全幅 */
border: none;
border-radius: 0;
font-family: inherit;
/* Vditor 的取色全部走它自己的 CSS 变量，在挂载容器上重定义比逐条盖选择器可靠。
唯一不能设成 transparent 的是 --panel-background-color：除了编辑层，
链接/表格弹层（.vditor-panel）、自动补全（.vditor-hint）以及弹层里的输入框
都读它，透明会让这些浮层只剩一层阴影、内容压在正文上读不出来。
编辑层的透明改由下面那条足特异度的选择器负责。 */
--panel-background-color: var(--sg-card-paper);
--textarea-background-color: var(--sg-stage); /* 预览层与聚焦态底色 = 页面暖纸 */
--toolbar-background-color: var(--sg-stage); /* 工具栏与预览操作条同底 */
--toolbar-icon-color: var(--sg-subtle);
--toolbar-icon-hover-color: var(--sg-primary);
}
/* 编辑层透明，暖纸底才能贯穿全页。必须写足特异度：Vditor 的
`.vditor-ir pre.vditor-reset` 与 `...:focus` 都是 0,2,1，而
`.sg-compose-editor .vditor-reset` 只有 0,2,0——少了这几条，一聚焦就被压回
冷灰 #fafbfc，真正在写的时候正文栏是一条冷色块压在暖纸上。
wysiwyg / sv 是工具栏「切换编辑模式」能到的另两种模式，一并处理。 */
.sg-compose-editor .vditor-reset,
.sg-compose .vditor-ir pre.vditor-reset,
.sg-compose .vditor-wysiwyg pre.vditor-reset,
.sg-compose .vditor-sv { background-color: transparent; }
/* 预览操作条（Desktop / Tablet / Mobile 与导出按钮）底色已由上面的变量拉成暖纸，
再补一条下边线，让它和工具栏一样读成一条横条而不是浮着的一排字 */
.sg-compose .vditor-preview__action { border-bottom: 1px solid var(--sg-line); }
/* 编辑内容直接复用 .sg-prose（compose-editor.js 挂类）：正文、标题、引用、
代码块、表格的排版与发表页一套。这里只做三处增量——
字体继承（盖过 Vditor 自带字面栈）、编辑态留白、h1（.sg-prose 从 h2 起定义）。
padding 必须带 !important，这是唯一能生效的写法：Vditor 的 setPadding()
（dist/index.js:6389）会往编辑层写**行内** padding，值是
(容器 clientWidth - options.preview.maxWidth) / 2，用来把内容居中成一条
maxWidth 宽的栏。它假定自己独占整幅宽度，而本页已经用 max-width + margin
auto 居中过一次，两套居中叠加：1440 视口下行内 padding 是 320px，760px 的
盒子被两边各吃 320，正文只剩 120px——「生产环境全链路」会断成三行。
行内样式压过任何非 !important 规则，改 vendor 又违反零修改约定，所以在这里
夺回控制权。同理下面工具栏那条也要 !important（setPadding 顺带给它写了
padding-left: 320px，把按钮推到了版面中间）。 */
.sg-compose .sg-prose.vditor-reset {
font-family: inherit;
max-width: 760px;
width: 100%;
margin: 0 auto;
padding: 40px clamp(18px, 4vw, 44px) 30vh !important; /* 底部留白：写到最后一行也停在视口中上部 */
}
.sg-compose .sg-prose.vditor-reset h1 {
font-family: var(--sg-font-display);
font-size: 32px;
font-weight: 600;
line-height: 1.25;
margin: 0 0 24px;
}
/* Vditor 的行内代码规则带 :not() 链（.vditor-reset code:not(.hljs):not(...)），
特异度 0,3,1，压过 .sg-prose code 的 0,1,1——这一条实测被抢。
其余元素（引用块等）靠样式表顺序（site.css 在 vditor 之后）平特异度取胜，
这里统一抬到 .sg-compose 前缀做保险，防将来 vditor 升级加深作用域。 */
.sg-compose .sg-prose.vditor-reset blockquote {
margin: 28px 0;
padding: 20px 28px;
border-left: 3px solid var(--sg-primary);
background: var(--sg-primary-soft);
border-radius: 0 var(--sg-radius-sm) var(--sg-radius-sm) 0;
color: var(--sg-ink);
}
.sg-compose .sg-prose.vditor-reset p code,
.sg-compose .sg-prose.vditor-reset li code {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.88em;
background: var(--sg-accent-soft);
padding: 2px 6px;
border-radius: 6px;
}
.sg-compose .sg-prose.vditor-reset pre {
background: var(--sg-ink);
color: #f5f2ee;
padding: 24px 28px;
border-radius: var(--sg-radius-md);
font-size: 13.5px;
line-height: 1.7;
}
.sg-compose .sg-prose.vditor-reset pre code { color: inherit; background: transparent; padding: 0; }
.sg-compose .sg-prose.vditor-reset a { color: var(--sg-primary); }
.sg-compose .sg-prose.vditor-reset th { background: var(--sg-accent-soft); }
.sg-compose .sg-prose.vditor-reset th,
.sg-compose .sg-prose.vditor-reset td { border-color: var(--sg-line); }
.sg-compose .sg-prose.vditor-reset hr { border-top: 1px solid var(--sg-line); }
.sg-compose .sg-prose.vditor-reset img { border-radius: var(--sg-radius-md); }
/* 深色代码块与 .sg-prose pre 一致；IR 围栏标记要在深底上可读 */
.sg-compose .sg-prose.vditor-reset pre .vditor-ir__marker {
color: rgba(245, 242, 238, 0.62);
background: transparent;
border-color: rgba(245, 242, 238, 0.28);
}
/* IR 的语法标记（**、##、`` ` ``）默认是 IDE 系荧光色，统一收进暖色次级；
标记平时隐藏、光标所在行才浮现，压色不影响可读性 */
.sg-compose .vditor-reset .vditor-ir__marker { color: var(--sg-subtle); }
/* 工具栏安静化：暖底、细线、悬停暖色 */
.sg-compose .vditor-toolbar {
background: var(--sg-stage);
border-bottom: 1px solid var(--sg-line);
}
/* !important 的理由同上：setPadding() 会给工具栏写行内 padding-left，
值取自编辑层的行内左内边距（1440 视口下是 320px），按钮会被推到版面中间。
工具栏是与顶栏同宽的一条，缩进应当对齐顶栏而不是正文栏。 */
.sg-compose .vditor-toolbar { padding: 6px clamp(12px, 3vw, 24px) !important; }
.sg-compose .vditor-toolbar button {
color: var(--sg-subtle);
border-radius: 6px;
transition: color 0.15s ease, background 0.15s ease;
}
.sg-compose .vditor-toolbar button:hover {
color: var(--sg-ink);
background: var(--sg-accent-soft);
}
.sg-compose .vditor-counter {
color: var(--sg-subtle);
background: transparent;
}
.sg-compose-fallback {
padding: 48px 20px;
text-align: center;
color: var(--sg-subtle);
}
/* ===== 草稿预览页 /preview（preview.html + preview-draft.js） =====
与沉浸页同一类工具页，复用它的顶栏（.sg-compose-bar / .sg-compose-back）。
正文用 .sg-prose 原本的 760px——这一页存在的全部理由就是「真实测量」，
投稿页右侧那块面板给不了这个宽度。 */
.sg-preview-note {
flex: 1 1 auto;
min-width: 0;
font-size: 12px;
letter-spacing: 0.03em;
color: var(--sg-subtle);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sg-preview-doc {
max-width: 760px;
margin: 0 auto;
padding: clamp(32px, 5vw, 56px) 0 96px;
}
.sg-preview-title {
font-family: var(--sg-font-display);
font-size: clamp(1.9rem, 4vw, 2.75rem);
line-height: 1.2;
font-weight: 600;
margin-bottom: 28px;
color: var(--sg-ink);
}
/* .sg-prose 的 760px 由 .sg-preview-doc 承担，这里去掉重复限宽与底部留白 */
.sg-preview-doc .sg-prose { max-width: none; padding-bottom: 0; }
.sg-preview-empty {
font-size: 15px;
line-height: 1.8;
color: var(--sg-copy-ink);
}
.sg-preview-empty a { color: var(--sg-primary); font-weight: 600; }
.sg-preview-raw {
margin: 0;
white-space: pre-wrap;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 13.5px;
line-height: 1.8;
color: var(--sg-muted);
}
@media (max-width: 640px) {
/* 窄屏状态字挤占标题输入：只留返回/标题/完成 */
.sg-compose-state { display: none; }
.sg-compose-bar { gap: 10px; }
}
.sg-notify button[type="submit"] { min-height: 44px; }
.sg-notify button[type="submit"][disabled] { cursor: progress; opacity: .72; }
.sg-notify-status {
min-height: 1.4em;
margin: 0;
font-size: 13.5px;
line-height: 1.6;
}
.sg-notify-status.is-pending { color: var(--sg-muted); }
.sg-notify-status.is-ok { color: #1f5c3d; font-weight: 650; }
.sg-notify-status.is-error { color: #a32414; font-weight: 650; }
/* 议题投稿表单：类型必选（类型即完成的定义），两列字段 + 理由整宽 */
/* 表单比列表更窄：一句话投稿的框不该拉成一整屏宽，窄一点也更像「随手写两句」 */
.sg-propose {
display: grid;
gap: 22px;
max-width: 780px;
width: 100%;
margin-top: 24px;
margin-inline: auto;
padding: 28px 30px 30px;
border: 1px solid var(--sg-line);
border-radius: var(--sg-radius-md);
background: var(--sg-card-paper);
}
/* 鼓励句：把「一句话就够」写在表单第一行，降低动手前的心理阻力 */
.sg-propose-lede {
margin: 0;
max-width: 42em;
color: var(--sg-copy-ink);
font-size: 14.5px;
line-height: 1.8;
}
/* 单独落在表单里的半宽字段（议题页邮箱）收窄；两列网格里的半宽字段要填满格子。 */
.sg-propose > .sg-field-half { max-width: 26em; }
.sg-propose-fields .sg-field-half { max-width: none; }
/* 选填区默认折叠：类型与目标产出不是提出议题的前置条件 */
.sg-propose-more { border-top: 1px solid var(--sg-card-line); padding-top: 6px; }
.sg-propose-more > summary {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 0;
color: var(--sg-muted);
cursor: pointer;
font-size: 13px;
font-weight: 650;
list-style: none;
}
.sg-propose-more > summary::-webkit-details-marker { display: none; }
.sg-propose-more > summary::after {
content: "";
width: 6px;
height: 6px;
border: solid currentColor;
border-width: 0 1.5px 1.5px 0;
transform: rotate(45deg) translateY(-2px);
transition: transform 200ms ease;
}
.sg-propose-more[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.sg-propose-more > summary:focus-visible { outline: 2px solid var(--sg-primary-accessible); outline-offset: 2px; }
.sg-propose-more > *:not(summary) { margin-top: 16px; }
/* ---------- 发起页：整页收成表单那一列并居中 ---------- */
/* 表单本身限宽 780px，而这一页原来沿用议题列表页 1040px 的量度轴，于是表单贴在
量度轴左侧、右边空出 260px，读成整块被推到左边。把本页的量度轴直接收成表单的
宽度：页头、表单、流程说明、收尾 CTA 因此共用同一条居中的轴，表单正好填满它。
只作用于 .sg-propose-page（发起页），列表页与详情页的量度轴不受影响。 */
.sg-propose-page .sg-issue-measure { max-width: 780px; }
/* 流程说明原来另有 46em 上限，会比表单窄一截、右边缘对不上；这里让它跟着轴走 */
.sg-propose-page .sg-flow { max-width: none; }
/* 文章投稿正文是长文本：量度轴略宽于议题发起页，Markdown 编辑区更接近正文阅读宽度。
表单填满这条轴，不再自己限宽，避免「卡在宽壳左侧」。 */
body[data-page="articles"] .sg-propose-page .sg-issue-measure { max-width: 820px; }
/* ---------- 投稿页：登录门 ---------- */
/* 投稿必须登录，未登录时它替掉整块表单（article-submit.js 控制显隐）。
限宽跟表单同一条轴，不做整宽——它是「表单的位置上现在放着别的东西」。 */
.sg-propose-gate {
max-width: 820px;
margin-inline: auto; /* 与页头、表单同一条居中轴 */
padding: clamp(28px, 4vw, 44px) clamp(24px, 3.5vw, 40px);
border: 1px solid var(--sg-card-line);
border-radius: var(--sg-radius-card);
background: var(--sg-card-paper);
}
.sg-propose-gate h2 {
margin-top: 6px;
font-family: var(--sg-font-display);
font-size: clamp(1.5rem, 3vw, 2rem);
line-height: 1.3;
font-weight: 400;
}
.sg-propose-gate > p {
margin-top: 12px;
font-size: 15px;
line-height: 1.75;
color: var(--sg-muted);
}
.sg-propose-gate ul {
margin: 18px 0 0;
padding: 0;
list-style: none;
display: grid;
gap: 8px;
}
.sg-propose-gate li {
position: relative;
padding-left: 18px;
font-size: 13.5px;
line-height: 1.7;
color: var(--sg-copy-ink);
}
.sg-propose-gate li::before {
content: "";
position: absolute;
left: 2px;
top: 0.72em;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--sg-primary);
}
.sg-propose-gate-actions {
display: flex;
align-items: center;
gap: 12px 20px;
flex-wrap: wrap;
margin-top: 26px;
}
/* ---------- 投稿页底部：CTA + 其下的投稿须知 ---------- */
/* 说明原来散在正文脚注、附件脚注与提交区上方三处小字里，集中到这里。
曾试过放在 CTA 右侧的边带里，但那条带在 1300 视口下只剩 174px，五条说明被压成
十几行竖条，比散着更难读。改成压在 CTA 下面、与它共用同一条 820px 居中轴，
宽度够了就把五条分两列排，读起来是一小块规整的细则而不是一条窄缝。 */
.sg-propose-outro {
/* 与页头、表单同一条 820px 居中轴：CTA 面板与它下面的须知因此左右边缘齐平。
不加这条的话面板会跟着 .sg-shell 撑到 1344，比须知宽一截。
64px 原来挂在 .sg-cta-panel 上，移到容器好统一管两块的间距。 */
max-width: 820px;
margin: 64px auto 0;
}
.sg-propose-outro > .sg-cta-panel { margin-top: 0; }
.sg-propose-notes {
margin-top: 28px;
padding-top: 20px;
border-top: 1px solid var(--sg-line);
}
.sg-propose-notes .sg-kicker { margin-bottom: 14px; color: var(--sg-primary-ink); }
.sg-propose-notes ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 10px 32px;
}
.sg-propose-notes li {
font-size: 12.5px;
line-height: 1.8;
color: var(--sg-copy-ink);
}
.sg-propose-notes strong { color: var(--sg-ink); font-weight: 650; }
.sg-propose-page .sg-propose {
max-width: none;
margin-top: 0;
}
.sg-propose-page .sg-propose-lede,
.sg-propose-page .sg-page-copy { max-width: none; }
.sg-propose-page .sg-block { padding-top: 8px; }
/* 必填标记：只有两处（标题、邮箱），所以用最轻的记号——朱砂小字，不用星号。
星号需要额外一句「* 为必填」去解释，而两个字直接就是解释。 */
.sg-req {
margin-left: 8px;
padding: 2px 7px;
border-radius: var(--sg-radius-pill);
background: var(--sg-primary-soft);
color: var(--sg-primary-ink);
font-size: 10.5px;
font-style: normal;
font-weight: 650;
letter-spacing: .04em;
vertical-align: 1px;
}
/* 字段助语：说明这一项将来落在页面哪里。放在输入框下方而不是 placeholder 里——
placeholder 一开始打字就消失，而「它会变成标题」这件事需要一直看得见。 */
.sg-field small {
display: block;
margin-top: 6px;
color: var(--sg-subtle);
font-size: 12px;
line-height: 1.6;
}
/* 折叠区顶部对应关系说明已于 2026-09-04 随文案精简下线（解释文本只留一次） */
/* 选填区按议题页的板块分三组，legend 写明落点 */
.sg-propose-group {
margin: 0;
padding: 18px 0 0;
border: 0;
border-top: 1px solid var(--sg-card-line);
display: grid;
gap: 16px;
}
.sg-propose-group > legend {
padding: 0;
color: var(--sg-subtle);
font-size: 11px;
font-weight: 650;
letter-spacing: .1em;
}
/* 领域多选：复用议题筛选栏的 .sg-check 外观，横向排 */
.sg-propose-dirs { margin: 0; padding: 0; border: 0; display: grid; gap: 10px; }
.sg-propose-dirs legend {
padding: 0;
color: var(--sg-muted);
font-size: 12.5px;
line-height: 1.6;
}
.sg-propose-checks { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.sg-propose-checks .sg-check {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border: 1px solid var(--sg-card-line);
border-radius: var(--sg-radius-pill);
}
.sg-propose-checks .sg-check:hover { background: var(--sg-accent-soft); }
.sg-propose-kind { margin: 0; padding: 0; border: 0; display: grid; gap: 10px; }
.sg-propose-kind.is-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sg-propose-kind legend {
padding: 0 0 4px;
color: var(--sg-ink);
font-family: var(--sg-font-display);
font-size: 17px;
font-weight: 600;
}
.sg-propose-kind label {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: 12px;
padding: 14px 16px;
border: 1px solid var(--sg-card-line);
border-radius: var(--sg-radius-sm);
cursor: pointer;
transition: border-color var(--sg-transition), background-color var(--sg-transition);
}
.sg-propose-kind label:hover { border-color: rgba(38, 24, 21, 0.2); background: var(--sg-stage); }
.sg-propose-kind input { margin-top: 4px; accent-color: var(--sg-primary); }
.sg-propose-kind label span { color: var(--sg-copy-ink); font-size: 13.5px; line-height: 1.7; }
.sg-propose-kind label strong {
display: block;
margin-bottom: 2px;
color: var(--sg-ink);
font-size: 15px;
font-weight: 650;
}
/* 选中态用朱砂描边标出，键盘与鼠标都能看清当前选择 */
.sg-propose-kind input:checked + span strong { color: var(--sg-primary-ink); }
.sg-propose-kind label:has(input:checked) { border-color: var(--sg-primary); background: var(--sg-accent-soft); }
.sg-propose-kind label:focus-within { outline: 2px solid var(--sg-primary-accessible); outline-offset: 2px; }
.sg-propose-fields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px 22px;
}
.sg-propose .sg-field-full { grid-column: 1 / -1; }
.sg-propose-foot {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px 20px;
}
/* .sg-propose-note 已随 2026-09-04 文案精简下线（「可留空」只由折叠区 summary 说一次） */
.sg-propose button[type="submit"] { min-height: 44px; }
.sg-propose button[type="submit"][disabled] { cursor: progress; opacity: .72; }
/* 文章投稿页脚：邮箱（或登录署名）与提交按钮同一行，窄屏再叠成一列。
垂直对齐取 center 而不是 end：邮箱字段下面还有一行助语，按 end 对齐会把按钮
压到助语那一行去，读起来像掉了一截。
状态文本不放在这一行里：提交成功后那句话很长，auto 列会被它撑开，左边的署名
说明就被挤成一字一行（改版第一版真出过这个问题）。状态另起一整行。 */
.sg-propose-submit {
display: grid;
grid-template-columns: minmax(0, 1fr) max-content;
align-items: center;
gap: 18px 24px;
padding-top: 6px;
border-top: 1px solid var(--sg-card-line);
}
.sg-propose-submit > button[type="submit"] { justify-self: end; white-space: nowrap; }
.sg-propose-submit .sg-propose-actions { margin-top: 0; padding-bottom: 2px; }
/* 状态行：整宽、空态不占位 */
.sg-propose > .sg-notify-status { margin: 0; }
.sg-propose > .sg-notify-status:empty { display: none; }
.sg-upload {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 16px;
margin-top: 8px;
padding: 14px 16px;
border: 1px dashed rgba(38, 24, 21, 0.16);
border-radius: var(--sg-radius-sm);
background: var(--sg-stage);
}
.sg-upload .sg-pill { margin-top: 0; }
.sg-upload small {
flex: 1 1 16em;
margin: 0;
color: var(--sg-subtle);
font-size: 12px;
line-height: 1.6;
}
@media (max-width: 700px) {
.sg-propose { padding: 22px 20px 24px; }
.sg-propose-fields { grid-template-columns: 1fr; }
.sg-propose-kind.is-pair { grid-template-columns: 1fr; }
.sg-propose-submit { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
.sg-notify-fields { grid-template-columns: 1fr; }
.sg-notify { padding: 22px 20px 24px; }
}
/* ---------- 8. 贡献者 / CTA ---------- */
.sg-cta-panel {
position: relative;
overflow: hidden;
margin-top: 64px;
padding: 56px 56px 56px 64px;
border: 1px solid var(--sg-card-line);
border-radius: var(--sg-radius-card);
/* 原先是粉→绿→紫的大面积冷渐变：在暖纸底上偏跳，也是全页唯一的例外语言。
改为纸面 + 细描边 + 左侧朱砂竖条，与核心价值卡的色彩锚点同一套做法。 */
background: var(--sg-card-paper);
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
}
.sg-cta-panel::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: var(--sg-primary);
}
.sg-cta-panel h2 {
font-family: var(--sg-font-display);
font-size: var(--sg-heading-md);
font-weight: 400;
letter-spacing: 0;
}
.sg-cta-panel p { margin-top: 12px; color: var(--sg-ink); opacity: 0.75; max-width: 46em; line-height: 1.7; }
/* ---------- 9. 文章正文（prose） ---------- */
/* 文章页头：有封面的文章左文右图同级并排；无封面时保持单列。
顶部留白挂在 hero 上（让开 fixed 头部），页头本体只管排印。 */
.sg-article-hero { padding-top: 168px; padding-bottom: 40px; }
/* 头部：标题与正文同一中列（42em 居中）；封面不再是右列配图，
而是标题之下居中的宽块（≤1080px）——正文居中的形态下，
宽图、窄文并置是编辑排版的惯例，不会和正文中轴打架。 */
.sg-article-hero.has-cover { display: block; }
.sg-article-hero.has-cover .sg-article-head { max-width: 42em; margin-inline: auto; }
.sg-article-head { max-width: 860px; }
/* 无封面时头部与正文同一中列（42em 居中） */
.sg-article-hero:not(.has-cover) .sg-article-head { max-width: 42em; margin-inline: auto; }
/* 居中已由上方 .sg-article-hero.has-cover .sg-article-head 的 42em + auto 承担 */
.sg-article-head .sg-article-meta {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--sg-subtle);
}
.sg-article-head .sg-article-meta .sg-tag {
padding: 5px 14px;
border-radius: var(--sg-radius-pill);
background: var(--sg-primary);
color: var(--sg-ink);
font-weight: 650;
}
.sg-article-head h1 {
margin-top: 24px;
font-family: var(--sg-font-display);
font-size: clamp(2rem, 4.5vw, 3.25rem);
line-height: 1.25;
letter-spacing: 0;
font-weight: 400;
}
.sg-article-head .sg-article-tags { margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; }
.sg-article-head .sg-article-tags span {
font-size: 12px; color: var(--sg-muted);
padding: 5px 12px; border: 1px solid var(--sg-line); border-radius: var(--sg-radius-pill);
}
.sg-article-cover {
max-width: 1080px; margin: 0 auto 48px;
border-radius: var(--sg-radius-md); overflow: hidden;
border: 1px solid var(--sg-line);
}
/* 封面与标题、正文同一中列（42em）：不再做满幅大图块——它的职责是
定调与留白，不是首屏广告牌。保留原始比例不裁切。 */
.sg-article-hero.has-cover .sg-article-cover { max-width: 42em; margin: 32px auto 0; }
/* height: auto 必须显式写出：img 的 width/height 属性是表现性提示，会落成
height: 747px，与 width: 100% 一起把图纵向拉伸 */
.sg-article-cover img { width: 100%; height: auto; display: block; }
/* 窄屏改为上下：标题先行，封面跟随 */
@media (max-width: 900px) {
.sg-article-hero.has-cover { grid-template-columns: 1fr; gap: 28px; }
.sg-article-hero:not(.has-cover) { grid-template-columns: 1fr; gap: 0; }
}
.sg-prose {
max-width: 760px;
margin: 0 auto;
padding-bottom: 80px;
font-size: 16.5px;
line-height: 1.9;
color: var(--sg-ink);
}
.sg-prose h2 {
font-family: var(--sg-font-display);
font-size: 28px; font-weight: 600; letter-spacing: 0;
margin: 56px 0 20px; line-height: 1.35;
padding-top: 28px; border-top: 1px solid var(--sg-line);
}
.sg-prose h3 {
font-family: var(--sg-font-display);
font-size: 22px; font-weight: 600; letter-spacing: 0;
margin: 40px 0 14px; line-height: 1.4;
}
.sg-prose h4 { font-size: 17px; font-weight: 650; margin: 32px 0 10px; }
.sg-prose p { margin: 0 0 20px; }
.sg-prose strong { font-weight: 650; }
.sg-prose a { color: var(--sg-primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sg-prose blockquote {
margin: 28px 0; padding: 20px 28px;
border-left: 3px solid var(--sg-primary);
background: var(--sg-primary-soft);
border-radius: 0 var(--sg-radius-sm) var(--sg-radius-sm) 0;
color: var(--sg-ink);
}
.sg-prose blockquote p { margin: 0; }
.sg-prose ul, .sg-prose ol { margin: 0 0 20px; padding-left: 1.6em; }
.sg-prose li { margin-bottom: 8px; }
.sg-prose code {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.88em;
background: var(--sg-accent-soft);
padding: 2px 6px;
border-radius: 6px;
}
.sg-prose pre {
background: var(--sg-ink);
color: #f5f2ee;
padding: 24px 28px;
border-radius: var(--sg-radius-md);
overflow-x: auto;
margin: 28px 0;
font-size: 13.5px;
line-height: 1.7;
}
.sg-prose pre code { background: transparent; padding: 0; color: inherit; }
.sg-prose table {
width: 100%; border-collapse: collapse; margin: 28px 0;
font-size: 14.5px;
}
.sg-prose th, .sg-prose td {
border: 1px solid var(--sg-line);
padding: 12px 16px;
text-align: left;
line-height: 1.6;
}
.sg-prose th { background: var(--sg-accent-soft); font-weight: 650; }
.sg-prose img { max-width: 100%; border-radius: var(--sg-radius-md); }
.sg-prose hr { border: 0; border-top: 1px solid var(--sg-line); margin: 40px 0; }
.sg-article-state { padding: 160px 0 120px; text-align: center; color: var(--sg-muted); }
.sg-article-state h1 {
font-family: var(--sg-font-display); font-size: 32px; font-weight: 400;
color: var(--sg-ink); margin-bottom: 16px; letter-spacing: 0;
}
/* ---------- 10. 登录 / 注册 ---------- */
.sg-auth {
min-height: 100vh;
display: grid;
grid-template-columns: minmax(360px, 46%) 1fr;
}
.sg-auth-brand {
position: relative;
overflow: hidden;
/* 底色取自主视觉的均色：图片解码前后不出现白闪或色跳 */
background: #e2915b;
color: var(--sg-paper);
padding: 56px 56px 48px;
/* 用 grid 分两行：上行占满剩余高度、文案在其中垂直居中；下行是贴底的关键词条。
不用 flex + justify-content:center——一旦子元素带 auto margin，
justify-content 就会失效，文案会被重新顶到上方。 */
display: grid;
grid-template-rows: 1fr auto;
gap: 34px;
}
/* Hermes 主视觉：铺满左栏，焦点偏上保住头部与权杖 */
.sg-auth-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 62% 22%;
/* 朱砂海报本身偏亮：压暗并轻微去饱和，才托得住纸白文字 */
filter: saturate(0.82) brightness(0.52);
}
/* 遮罩：暗度峰值跟着文案落在中部——上方留出头像与权杖细节，
中段压足以托住纸白文字，底部略回收给关键词条留呼吸 */
.sg-auth-brand::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(178deg, rgba(20, 13, 11, 0.3) 0%, rgba(22, 15, 12, 0.66) 38%, rgba(18, 12, 10, 0.82) 62%, rgba(18, 12, 10, 0.78) 100%),
radial-gradient(115% 62% at 22% 58%, rgba(15, 10, 8, 0.42) 0%, rgba(15, 10, 8, 0) 68%);
pointer-events: none;
}
.sg-auth-brand-head { position: relative; z-index: 1; align-self: center; }
.sg-auth-brand .sg-auth-back {
color: var(--sg-paper);
opacity: 0.88;
text-decoration: none;
font-size: 13px;
letter-spacing: 0.05em;
/* 顶部压在图片纹理上，加一层极轻投影保住小字边缘 */
text-shadow: 0 1px 6px rgba(12, 8, 6, 0.55);
}
.sg-auth-brand .sg-auth-back:hover { opacity: 1; }
/* kicker 与首页 Hero 同款：朱砂短横 + 全大写小字 */
.sg-auth-brand .sg-auth-kicker {
display: flex;
align-items: center;
gap: 12px;
/* 文案已整体靠下，返回链接与 kicker 之间不需要原来的大段留白 */
margin: 26px 0 20px;
color: var(--sg-primary-on-dark);
font-size: 11.5px;
font-weight: 650;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.sg-auth-brand .sg-auth-kicker::before {
content: "";
width: 28px;
height: 1px;
background: var(--sg-primary-on-dark);
}
.sg-auth-brand h1 {
font-family: var(--sg-font-display);
font-size: clamp(2rem, 3.4vw, 3rem);
font-weight: 400;
letter-spacing: 0;
line-height: 1.25;
margin: 0;
}
.sg-auth-brand .sg-auth-lede {
margin-top: 20px;
max-width: 26em;
color: rgba(255, 254, 250, 0.72);
font-family: var(--sg-font-display);
font-size: 16px;
line-height: 1.85;
}
/* 细线关键词条：与首页 hero-rail 同构，作为深色区的收尾（grid 第二行，天然贴底） */
.sg-auth-rail {
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
gap: 10px 32px;
padding-top: 22px;
border-top: 1px solid rgba(255, 254, 250, 0.16);
}
.sg-auth-rail span {
color: rgba(255, 254, 250, 0.66);
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.06em;
}
.sg-auth-main {
display: grid;
place-items: center;
padding: 64px 24px;
}
.sg-auth-panel { width: min(440px, 100%); }
.sg-auth-panel .sg-auth-wordmark {
font-family: var(--sg-font-display);
font-size: 26px;
margin-bottom: 10px;
display: block;
color: var(--sg-ink);
text-decoration: none;
}
/* 面板小题注：说明这一栏在做什么，补上原先缺失的层次 */
.sg-auth-panel .sg-auth-caption {
margin: 0 0 30px;
color: var(--sg-copy-ink);
font-family: var(--sg-font-display);
font-size: 15px;
line-height: 1.8;
}
.sg-auth-tabs { display: flex; gap: 10px; margin-bottom: 30px; }
.sg-auth-form { display: flex; flex-direction: column; gap: 20px; }
.sg-auth-form .sg-field label {
display: block;
font-size: 12px; font-weight: 650; letter-spacing: 0.08em;
color: var(--sg-muted); margin-bottom: 8px;
}
.sg-auth-form .sg-field input {
width: 100%;
padding: 14px 18px;
border: 1px solid var(--sg-line);
border-radius: var(--sg-radius-md);
background: var(--sg-paper);
font-size: 15px;
color: var(--sg-ink);
font-family: inherit;
transition: border-color var(--sg-transition), box-shadow var(--sg-transition);
}
.sg-auth-form .sg-field input:focus {
outline: none;
border-color: var(--sg-primary);
box-shadow: 0 0 0 4px var(--sg-primary-soft);
}
.sg-auth-form .sg-auth-note { font-size: 13px; color: var(--sg-subtle); line-height: 1.7; }
.sg-auth-form .sg-auth-note a { color: var(--sg-primary); }
/* ---------- 第三方登录（GitHub / Google） ---------- */
.sg-oauth { display: grid; gap: 14px; }
.sg-oauth-divider {
display: flex;
align-items: center;
gap: 14px;
margin: 0;
color: var(--sg-subtle);
font-size: 12.5px;
letter-spacing: .04em;
}
.sg-oauth-divider::before,
.sg-oauth-divider::after { content: ""; flex: 1; height: 1px; background: rgba(38, 24, 21, 0.12); }
/* auto-fit：只有一个 provider 时按钮占满整行，两个时自动并排——
Google 入口恢复后不需要再改这条规则 */
.sg-oauth-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.sg-oauth-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 46px;
padding: 10px 14px;
border: 1px solid rgba(38, 24, 21, 0.14);
border-radius: 999px;
background: var(--sg-paper);
color: var(--sg-ink);
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: border-color var(--sg-transition), background-color var(--sg-transition), transform var(--sg-transition);
}
.sg-oauth-btn svg { width: 18px; height: 18px; flex: none; }
.sg-oauth-btn:hover { background: var(--sg-primary-soft); border-color: rgba(38, 24, 21, 0.3); }
.sg-oauth-btn:focus-visible {
outline: 2px solid var(--sg-primary-accessible);
outline-offset: 2px;
}
@media (max-width: 560px) {
.sg-oauth-row { grid-template-columns: 1fr; }
}
.sg-auth-msg {
display: none;
padding: 14px 18px;
border-radius: var(--sg-radius-md);
background: var(--sg-primary-soft);
border: 1px solid var(--sg-primary);
font-size: 13.5px;
color: var(--sg-ink);
}
.sg-auth-msg.is-visible { display: block; }
.sg-auth-foot { margin-top: 40px; font-size: 12px; color: var(--sg-subtle); letter-spacing: 0.04em; }
/* ---------- 11. 关于页 ---------- */
.sg-concept {
display: grid;
/* 文字略退、插图略进：正方形拼贴图需要足够宽度才不显局促 */
grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.86fr);
gap: 72px;
/* 顶对齐而非居中：两段短文对高大的方形插图居中会在上方留下断裂的空白，
顶对齐让文字紧跟插图上沿，阅读动线从左上连到右侧 */
align-items: start;
}
/* 标题一同进入左列：两行网格 + 插图跨两行，图顶与标题顶严格对齐。
标题若横跨整宽，图片只能从正文那一行起算，顶部就对不上。 */
.sg-concept.has-head {
grid-template-areas:
"head art"
"copy art";
grid-template-rows: auto 1fr;
gap: 0 72px;
}
.sg-concept.has-head > .sg-block-head { grid-area: head; }
.sg-concept.has-head > .sg-concept-copy { grid-area: copy; }
.sg-concept.has-head > .sg-concept-art { grid-area: art; }
/* 左列宽度有限，标题与题注横排会互相挤压：改纵向堆叠 */
.sg-concept.has-head > .sg-block-head {
align-items: flex-start;
flex-direction: column;
gap: 10px;
padding-bottom: 26px;
}
.sg-concept.has-head > .sg-block-head .sg-block-note { white-space: normal; }
/* 左列窄，长中文标题会断出孤立的尾行：balance 让两行长度接近（渐进增强） */
.sg-concept.has-head > .sg-block-head h2 { text-wrap: balance; }
/* 标题已占掉首行，正文不再需要补首字基线的 6px */
.sg-concept.has-head > .sg-concept-copy { padding-top: 0; }
.sg-concept .sg-concept-copy {
/* 首段有放大的朱砂首字，视觉基线略低，补 6px 让它与插图上沿齐平 */
padding-top: 6px;
}
.sg-concept .sg-concept-copy p {
font-size: 17px; line-height: 2; color: var(--sg-ink);
margin-bottom: 24px;
}
.sg-concept .sg-concept-copy p:first-child::first-letter {
font-family: var(--sg-font-display);
font-size: 2.6em;
line-height: 1;
color: var(--sg-primary);
padding-right: 6px;
}
/* 首字下沉只在首字本身有意义时才成立：文案以虚词开头（「很多人…」）时
放大它既突兀也没有信息，用这个修饰类关掉 */
.sg-concept .sg-concept-copy.no-dropcap p:first-child::first-letter {
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: inherit;
padding-right: 0;
}
.sg-concept .sg-concept-art {
border-radius: var(--sg-radius-lg);
overflow: hidden;
background: var(--sg-open-gradient);
display: grid; place-items: center;
padding: 40px;
}
.sg-concept .sg-concept-art img { width: 100%; max-width: 360px; display: block; }
/* 拼贴插图本身是米白底：不套彩色卡片、不裁切，直接以完整构图融入页面。
只留一圈极淡描边界定边界，与全站卡片语言一致。 */
.sg-concept .sg-concept-art.is-photo {
padding: 0;
aspect-ratio: auto;
border: 1px solid var(--sg-card-line);
border-radius: var(--sg-radius-card);
background: var(--sg-card-paper);
}
.sg-concept .sg-concept-art.is-photo img {
max-width: none;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: contain;
}
/* ---------- 12. 筛选 Tab（grow 页，复用 sg-tab 样式） ---------- */
.sg-filter-bar { display: flex; gap: 10px; flex-wrap: wrap; padding-bottom: 32px; }
/* ---------- 13. 导航 Tab 样式优化（全站） ---------- */
/* 顶部右上角账户区：未登录是一个入口 pill，登录后为「用户名 + 登出」两枚。
两种状态共用同一位置与高度，避免登录前后导航右侧发生跳动。 */
.sg-frame .sg-header-actions {
display: flex;
align-items: center;
gap: 8px;
}
.sg-frame .sg-header-actions .sg-pill {
min-height: 40px;
white-space: nowrap;
}
/* 登录态账户区：导航里只放「圆形头像 + ∨」，昵称/邮箱/入口/登出都在下拉面板里。
之前是把头像和用户名并排塞进一枚 pill，两个问题：昵称一长就把导航挤变形；
而且组件库有 `.sg-frame img { width: 100% }`（专类+类型选择器，权重高于单个
.sg-user-avatar），头像 img 的宽度被改成 pill 满宽、整张脸糊出边框。
所以下面凡是给头像定尺寸的规则都必须带上 .sg-frame 才压得住 vendor
——vendor 文件本身不允许改。 */
.sg-account-menu { position: relative; display: flex; align-items: center; }
.sg-frame .sg-account-trigger {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 40px;
padding: 0 4px 0 0;
border: 0;
background: transparent;
cursor: pointer;
border-radius: 999px;
}
.sg-frame .sg-account-face {
width: 32px;
height: 32px;
flex: 0 0 auto;
border-radius: 50%;
object-fit: cover;
background: var(--sg-primary-soft);
box-shadow: 0 0 0 1px var(--sg-line);
}
.sg-frame .sg-account-face.is-initial {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--sg-primary-ink);
font-family: var(--sg-font-display);
font-size: 15px;
font-weight: 700;
line-height: 1;
}
/* ∨：用两条边框转 45° 拼，不引入图标依赖。展开时翻成 ∧ */
.sg-account-caret {
width: 8px;
height: 8px;
margin-top: -3px;
border-right: 1.6px solid var(--sg-muted);
border-bottom: 1.6px solid var(--sg-muted);
transform: rotate(45deg);
transition: transform .18s ease, border-color .18s ease;
}
.sg-account-menu.is-open .sg-account-caret {
margin-top: 3px;
transform: rotate(-135deg);
}
.sg-frame .sg-account-trigger:hover .sg-account-caret,
.sg-frame .sg-account-trigger:focus-visible .sg-account-caret {
border-color: var(--sg-primary-ink);
}
.sg-frame .sg-account-trigger:hover .sg-account-face {
box-shadow: 0 0 0 2px var(--sg-primary-accessible);
}
/* 下拉面板：右对齐挂在触发器下方。父级 .sg-header 是 position:absolute、
z-index:20，面板只需高于同层内容即可 */
.sg-account-panel {
position: absolute;
z-index: 30;
top: calc(100% + 10px);
right: 0;
min-width: 232px;
padding: 6px;
border: 1px solid var(--sg-line);
border-radius: 14px;
background: var(--sg-paper);
box-shadow: 0 18px 44px rgba(35, 36, 37, 0.14);
text-align: left;
}
.sg-account-panel[hidden] { display: none; }
.sg-account-id {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px 12px;
border-bottom: 1px solid var(--sg-card-line);
}
.sg-frame .sg-account-id .sg-account-face { width: 40px; height: 40px; font-size: 17px; }
.sg-account-who { display: grid; gap: 2px; min-width: 0; }
.sg-account-who strong {
font-size: 14.5px;
font-weight: 650;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sg-account-who small {
color: var(--sg-muted);
font-size: 12px;
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sg-account-links { display: grid; padding: 6px 0; }
.sg-frame .sg-account-links a {
padding: 9px 12px;
border-radius: 9px;
color: var(--sg-ink);
font-size: 14px;
line-height: 1.4;
text-decoration: none;
}
/* 「我的消息」入口的未读徽标：朱砂小丸，右缘对齐 */
.sg-account-badge {
display: inline-block;
min-width: 18px;
margin-left: 8px;
padding: 1px 6px;
border-radius: var(--sg-radius-pill);
background: var(--sg-primary);
color: #fff;
font-size: 11px;
font-weight: 700;
line-height: 1.5;
text-align: center;
vertical-align: 1px;
}
.sg-frame .sg-account-links a:hover,
.sg-frame .sg-account-links a:focus-visible {
background: var(--sg-accent-soft);
color: var(--sg-primary-ink);
}
.sg-frame .sg-account-panel .sg-account-signout {
display: block;
width: 100%;
padding: 9px 12px;
border: 0;
border-top: 1px solid var(--sg-card-line);
border-radius: 0 0 9px 9px;
background: transparent;
color: var(--sg-muted);
font: inherit;
font-size: 14px;
text-align: left;
cursor: pointer;
}
.sg-frame .sg-account-panel .sg-account-signout:hover,
.sg-frame .sg-account-panel .sg-account-signout:focus-visible {
background: var(--sg-primary-soft);
color: var(--sg-primary-ink);
}
.sg-frame .sg-account-signout { cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
.sg-account-caret { transition: none; }
}
/* ≤500px 组件库把导航与右上角操作收进汉堡菜单；上面的 display:flex 覆盖了
它的 display:none，这里显式还原，否则移动端会出现「品牌 + 账户 + 菜单」三件挤压。 */
@media (max-width: 500px) {
.sg-frame .sg-header-actions { display: none; }
}
/* 移动菜单里的登出与其它菜单项对齐（菜单项是 a，这里是 button） */
.sg-frame .sg-mobile-menu .sg-account-signout {
width: 100%;
border: 0;
background: transparent;
font: inherit;
text-align: left;
}
/* 品牌位为「纸雕波纹图标 + 衬线字标」：组件库原按 145px 宽横幅 logo 设计
（固定 width + auto height），方形图标必须改为按高度约束。
使用 kezhongke-icon-flat.svg（无 filter 版本），栅格化结果确定。 */
.sg-brand-image,
.sg-frame .sg-brand-image {
width: auto;
height: 32px;
flex: none;
}
.sg-brand { text-decoration: none; color: inherit; gap: 10px; }
.sg-brand-word {
font-family: var(--sg-font-display);
font-size: 26px;
letter-spacing: -.02em;
line-height: 1;
}
@media (max-width: 900px) {
.sg-brand-image,
.sg-frame .sg-brand-image { height: 30px; }
.sg-brand-word { font-size: 23px; }
}
@media (max-width: 500px) {
.sg-brand { gap: 8px; }
.sg-brand-image,
.sg-frame .sg-brand-image { height: 28px; }
.sg-brand-word { font-size: 21px; }
}
/* 注意：仅作用于头部导航（.sg-nav 内），不影响深色区的 spec/footer 链接 */
.sg-frame .sg-nav .sg-nav-link {
padding: 8px 13px;
border-radius: var(--sg-radius-pill);
text-decoration: none;
color: var(--sg-ink);
transition: background-color var(--sg-transition), color var(--sg-transition);
}
.sg-frame .sg-nav .sg-nav-link:hover,
.sg-frame .sg-nav .sg-nav-link:focus-visible {
background: var(--sg-primary-soft);
color: var(--sg-primary);
}
.sg-frame .sg-nav .sg-nav-link.is-active {
background: var(--sg-primary-soft);
color: var(--sg-primary);
font-weight: 650;
}
.sg-frame .sg-nav-trigger { transition: background-color var(--sg-transition), color var(--sg-transition); }
.sg-frame .sg-nav-trigger:hover,
.sg-frame .sg-nav-group.is-open .sg-nav-trigger {
background: var(--sg-primary-soft);
color: var(--sg-primary);
}
/* 下拉菜单更柔和 */
.sg-frame .sg-nav-menu {
border-radius: var(--sg-radius-lg);
padding: 10px;
box-shadow: 0 24px 60px rgba(38, 24, 21, 0.12);
}
/* 悬停展开：按钮与菜单之间有 8px 空档，指针经过时 hover 会断，菜单随即收起。
在空档上补一块与菜单同宽的透明「桥」，让整条路径都算在 .sg-nav-group 内；
配合 site-nav.js 的收起延时，斜向移动也不会闪。 */
.sg-frame .sg-nav-group.is-open::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
width: 240px; /* 与 .sg-nav-menu 同宽 */
height: 10px; /* 盖住 top: calc(100% + 8px) 的空档 */
transform: translateX(-50%);
}
/* 展开动效：hidden 的切换本身是硬显示，用关键帧补出真正「展开」的观感。
用 clip-path 自上而下揭开面板（而不是 scaleY，后者会把文字压扁），
inset 带 round 是必须的 —— 不写 round 会在动画结束时把 28px 圆角切成直角。
菜单本身带 translateX(-50%) 居中，关键帧里必须一并保留，否则会跳位。
菜单项再跟一段极短的错峰，让内容看起来是随面板落下来的。 */
.sg-frame .sg-nav-group.is-open .sg-nav-menu {
transform-origin: top center;
animation: sg-nav-menu-in 240ms cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes sg-nav-menu-in {
from {
opacity: 0;
transform: translateX(-50%) translateY(-8px);
clip-path: inset(0 0 100% 0 round var(--sg-radius-lg));
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
clip-path: inset(0 0 0 0 round var(--sg-radius-lg));
}
}
.sg-frame .sg-nav-group.is-open .sg-nav-menu .sg-nav-link {
animation: sg-nav-item-in 260ms cubic-bezier(.2, .7, .2, 1) both;
}
.sg-frame .sg-nav-group.is-open .sg-nav-menu .sg-nav-link:nth-child(1) { animation-delay: 70ms; }
.sg-frame .sg-nav-group.is-open .sg-nav-menu .sg-nav-link:nth-child(2) { animation-delay: 115ms; }
.sg-frame .sg-nav-group.is-open .sg-nav-menu .sg-nav-link:nth-child(3) { animation-delay: 160ms; }
@keyframes sg-nav-item-in {
from { opacity: 0; transform: translateY(-5px); }
to { opacity: 1; transform: translateY(0); }
}
/* 收起动效：is-open 摘掉后菜单先留在 is-closing 里淡出，150ms 后 JS 才置 hidden。
pointer-events 关掉，避免指针擦到正在淡出的面板又把它拉回来。 */
.sg-frame .sg-nav-group.is-closing .sg-nav-menu {
pointer-events: none;
transform-origin: top center;
animation: sg-nav-menu-out 150ms cubic-bezier(.4, 0, 1, 1) both;
}
@keyframes sg-nav-menu-out {
from {
opacity: 1;
transform: translateX(-50%) translateY(0);
clip-path: inset(0 0 0 0 round var(--sg-radius-lg));
}
to {
opacity: 0;
transform: translateX(-50%) translateY(-6px);
clip-path: inset(0 0 62% 0 round var(--sg-radius-lg));
}
}
@media (prefers-reduced-motion: reduce) {
.sg-frame .sg-nav-group.is-open .sg-nav-menu,
.sg-frame .sg-nav-group.is-open .sg-nav-menu .sg-nav-link,
.sg-frame .sg-nav-group.is-closing .sg-nav-menu { animation: none; }
}
/* 头部滚动浮岛：::before 扩出内容外的 pill 底，不影响栅格布局。
注意这里对 effects.js 有硬依赖：浮岛底默认 opacity: 0，只有 effects.js 加上
.is-scrolled 才显形，而下面又把 Header 设成 position: fixed。页面漏引
effects.js 就会得到「一条透明的吸顶条 + 正文从底下透出来」——terms/privacy
两页曾经就是这样。新页面务必带上 effects.js。 */
.sg-frame .sg-header { align-items: center; }
.sg-frame .sg-header::before {
content: "";
position: absolute;
inset: 8px -18px;
z-index: -1;
border-radius: var(--sg-radius-pill);
background: rgba(255, 254, 251, 0.88);
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
box-shadow: 0 1px 0 var(--sg-line), 0 14px 36px rgba(38, 24, 21, 0.08);
opacity: 0;
transition: opacity var(--sg-transition);
}
.sg-frame .sg-header.is-scrolled::before { opacity: 1; }
/* 组件库把 Header 设为 position:absolute，滚动时它会随页面上移——先被视口
上边裁掉半截（只剩毛玻璃胶囊下沿），再整体消失。而 is-scrolled 的浮岛
样式本就是为吸顶设计的，这里改为 fixed 让它真正驻留在视口顶部。
仅桌面断点生效：≤500px 组件库把 Header 改成 relative 流内元素，
吸顶会遮住首屏 kicker，保持其原有行为。 */
@media (min-width: 501px) {
.sg-frame .sg-header {
position: fixed;
/* 组件库用 padding-top:20px 把内容压到下半部，而毛玻璃胶囊是按上下
各 inset 8px 画的 —— 于是内容相对胶囊整体偏下（实测偏 5px）。
这里去掉单侧 padding，改为固定行高 + 垂直居中，内容与胶囊同心。 */
min-height: 88px;
padding-block: 0;
align-items: center;
transition: min-height var(--sg-transition);
}
/* 滚动后整条收紧，仍保持内容与胶囊同心 */
.sg-frame .sg-header.is-scrolled { min-height: 72px; }
}
/* 移动端 Header 使用独立流式定位，避免桌面端居中 transform 残留造成横向偏移。 */
@media (max-width: 500px) {
/* 移动端同样吸顶：组件库把 Header 设为流内 relative，滚动即离开视口。 */
.sg-frame .sg-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
/* 组件库这里也用 padding-top:18px 压低内容，滚动后毛玻璃胶囊亮起时
内容会相对胶囊偏下（实测 8px）。改为固定行高 + 垂直居中。 */
min-height: 64px;
padding-block: 0;
align-items: center;
transform: none !important;
}
/* 胶囊改为满宽横条：桌面那套 inset:8px -18px 的左右外扩在 fixed + 100% 宽下
会溢出视口右侧，且 fixed 不受 .sg-frame 的 overflow:clip 裁剪。 */
.sg-frame .sg-header::before {
inset: 0;
border-radius: 0;
}
/* 吸顶后 Header 脱离文档流：子页头部要留出它的高度（首屏在第 16 节统一给） */
.sg-page-head { padding-top: 116px; }
.sg-article-hero { padding-top: 108px; }
}
/* 精选研究卡升级为链接后，保留原卡片的视觉交互并明确可点击语义。 */
.sg-frame a.sg-proof {
display: grid;
color: inherit;
text-decoration: none;
cursor: pointer;
}
.sg-frame a.sg-proof:focus-visible {
outline: 2px solid var(--sg-primary-accessible);
outline-offset: 3px;
}
/* ---------- 14. Hero 背景流动粒子画布（flow-canvas.js） ---------- */
.sg-hero { position: relative; }
.sg-flow-canvas {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.sg-hero > *:not(.sg-flow-canvas) { position: relative; z-index: 1; }
/* ---------- 16. Hero 精简 + 首屏克制信息层 ---------- */
/* 顶部留白拉开，让主张与悬浮导航之间有明确的空气：
88px 头部浮岛 + 约 110px 空气，首屏起笔不贴着导航 */
/* 首屏高度跟随视窗，内容在「header 之下的可视区」里垂直居中：
短屏不再顶到导航、高屏不再把大片空白留在下方。
min-height 而非 height——内容比视窗高时容器跟着长，绝不裁切。
svh 避开移动端地址栏伸缩造成的跳动，不支持时回落到 vh。 */
.sg-frame .sg-hero {
min-height: 100vh;
min-height: 100svh;
display: grid;
align-content: center;
padding-block: 148px 60px;
}
.sg-frame .sg-hero-showcase { display: none !important; }
/* 一句说明 + 按钮 + 一条细线信息条，不使用卡片或深色面板。
间距刻意不等距：标签贴紧标题，说明与按钮逐级拉开，信息条距离最大。 */
.sg-frame .sg-hero-heading { max-width: none; gap: 0; padding-bottom: 8px; }
.sg-frame .sg-hero-heading > .sg-kicker { margin-bottom: 22px; color: var(--sg-primary-ink); }
/* H1 单独限宽：粒子采样以真实 H1 宽度换行，不能跟随 shell 全宽 */
.sg-frame .sg-hero-heading > .sg-heading { max-width: 20em; }
/* 说明句与行动按钮同处一带：左陈述、右行动，按钮底线与说明句末行齐平，
右轴与下方信息条的数字概览对齐，右侧空白不再闲置。 */
.sg-frame .sg-hero-lede {
display: flex;
align-items: flex-end;
justify-content: space-between;
flex-wrap: wrap;
gap: 22px 48px;
margin-top: 48px;
}
.sg-frame .sg-hero-support-copy {
max-width: 34em;
margin: 0;
color: var(--sg-ink);
font-size: clamp(16px, 1.35vw, 18px);
/* 避免尾行只剩两三个字的孤行（不支持时无副作用） */
text-wrap: pretty;
line-height: 1.7;
}
.sg-frame .sg-hero-actions { flex: none; margin-top: 0; }
/* 细线信息条：左侧关注方向，右侧内容数量；与按钮之间留最大间距，
使「主张 → 说明 → 行动 → 概览」四层的呼吸逐级放大 */
.sg-frame .sg-hero-rail {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 18px 32px;
flex-wrap: wrap;
margin-top: 68px;
padding-top: 24px;
border-top: 1px solid rgba(38, 24, 21, 0.14);
}
.sg-frame .sg-hero-keywords,
.sg-frame .sg-hero-metrics {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 6px 20px;
}
.sg-frame .sg-hero-keyword {
color: var(--sg-muted);
font-size: 12.5px;
font-weight: 650;
letter-spacing: .04em;
}
.sg-frame .sg-hero-keyword + .sg-hero-keyword::before {
margin-right: 20px;
color: var(--sg-line);
content: "·";
}
.sg-frame .sg-hero-metric {
display: flex;
align-items: baseline;
gap: 6px;
color: inherit;
text-decoration: none;
}
/* 数字入口：默认与纯文本同样克制，仅在 hover/focus 时给出可点击反馈 */
.sg-frame a.sg-hero-metric:hover strong,
.sg-frame a.sg-hero-metric:focus-visible strong { color: #8f2819; }
.sg-frame a.sg-hero-metric:hover span,
.sg-frame a.sg-hero-metric:focus-visible span {
color: var(--sg-ink);
text-decoration: underline;
text-underline-offset: 3px;
}
.sg-frame a.sg-hero-metric:focus-visible {
outline: 2px solid var(--sg-primary-accessible);
outline-offset: 4px;
}
.sg-frame .sg-hero-metric strong {
color: var(--sg-primary-ink);
font-family: var(--sg-font-display);
font-size: 20px;
font-weight: 600;
line-height: 1;
}
.sg-frame .sg-hero-metric span {
color: var(--sg-muted);
font-size: 12.5px;
line-height: 1.45;
}
/* 向下滚动提示：标签在上、细轨在下，整体在首屏水平居中；
轨内朱砂小点循环下行。只用 transform / opacity，不参与布局；
滚动后整体淡出（见 .kzk-scrolled）。 */
.sg-frame .sg-hero-scroll {
display: flex;
align-items: center;
flex-direction: column;
gap: 10px;
/* .sg-hero-heading 是 grid：justify-self 居中 + fit-content 让点击区贴合内容 */
justify-self: center;
align-self: start;
width: fit-content;
margin-top: 34px;
color: var(--sg-muted);
text-decoration: none;
transition: color var(--sg-transition), opacity 0.4s ease;
/* 入场接在信息条（0.46s）之后。fill-mode 用 backwards 而不是 both：
延迟期间保持隐藏，动画结束后把 opacity 交回层叠，.kzk-scrolled 才能淡出它。 */
animation: sg-hero-cue-in 0.62s cubic-bezier(.2, .7, .2, 1) 0.58s backwards;
}
@keyframes sg-hero-cue-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
.sg-frame .sg-hero-scroll-label {
font-size: 11px;
font-weight: 650;
letter-spacing: .14em;
text-transform: uppercase;
}
.sg-frame .sg-hero-scroll-track {
position: relative;
width: 1px;
height: 34px;
overflow: hidden;
background: rgba(38, 24, 21, 0.16);
--cue-travel: 34px;
}
.sg-frame .sg-hero-scroll-track::after {
position: absolute;
top: 0;
left: -1px;
width: 3px;
height: 10px;
border-radius: 2px;
background: var(--sg-primary-ink);
content: "";
animation: sg-scroll-cue 1.9s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes sg-scroll-cue {
0% { opacity: 0; transform: translateY(-10px); }
30% { opacity: 1; }
70% { opacity: 1; }
100% { opacity: 0; transform: translateY(var(--cue-travel, 34px)); }
}
.sg-frame .sg-hero-scroll:hover,
.sg-frame .sg-hero-scroll:focus-visible { color: var(--sg-primary-ink); }
.sg-frame .sg-hero-scroll:hover .sg-hero-scroll-track { background: rgba(159, 47, 29, 0.3); }
.sg-frame .sg-hero-scroll:focus-visible {
outline: 2px solid var(--sg-primary-accessible);
outline-offset: 6px;
}
/* 离开首屏即隐藏：提示只在第一屏承担引导，滚动后不再占注意力 */
.kzk-scrolled .sg-frame .sg-hero-scroll {
opacity: 0;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.sg-frame .sg-hero-scroll { animation: none; }
.sg-frame .sg-hero-scroll-track::after { animation: none; opacity: 1; transform: translateY(12px); }
}
/* 窄屏收紧：首屏纵向空间有限，标签与细轨同步压小 */
@media (max-width: 560px) {
.sg-frame .sg-hero-scroll { gap: 8px; margin-top: 26px; }
.sg-frame .sg-hero-scroll-track { height: 26px; --cue-travel: 26px; }
.sg-frame .sg-hero-scroll-label { font-size: 10.5px; letter-spacing: .12em; }
}
/* 锚点落点让开 fixed 头部，避免标题被浮岛压住 */
.sg-frame #surfaces { scroll-margin-top: 108px; }
/* 子页所有可锚定区块同样让开：#issues / #timeline / #journal / #project-ecosystem 等
此前只有 #surfaces 做了处理，其余深链落点都被悬浮导航压住 */
.sg-frame .sg-page section[id],
.sg-frame .sg-page [id].sg-block { scroll-margin-top: 108px; }
/* 首屏之后的垂直节奏（第一批）：三档间距而不是等距铺排。
A 档 112px 用于主张/收束，B 档 80px 用于展示，C 档 56px 用于紧凑收口。 */
.sg-frame .sg-hero + .sg-section { padding-top: 80px; padding-bottom: 96px; }
.sg-frame .sg-hero + .sg-section .sg-surface-grid { margin-top: 36px; }
/* 900px 起说明句已占满可用宽度，右对齐会被迫换行，改为显式纵向 */
@media (max-width: 900px) {
.sg-frame .sg-hero { padding-block: 156px 48px; }
.sg-frame .sg-hero-lede { align-items: flex-start; flex-direction: column; gap: 24px; margin-top: 38px; }
.sg-frame .sg-hero-rail { margin-top: 52px; }
}
@media (max-width: 760px) {
.sg-frame .sg-hero-heading > .sg-heading { max-width: none; }
.sg-frame .sg-hero-rail { align-items: start; flex-direction: column; gap: 14px; }
.sg-frame .sg-hero + .sg-section { padding-top: 48px; padding-bottom: 64px; }
}
@media (max-width: 500px) {
/* 窄屏内容高、首屏矮：撑满视窗会把信息条挤出屏外，退回固定上边距 */
.sg-frame .sg-hero {
min-height: 0;
display: block;
padding-block: 116px 44px; /* 含吸顶 Header 的 64px */
}
.sg-frame .sg-hero-heading { gap: 0; }
.sg-frame .sg-hero-heading > .sg-kicker { margin-bottom: 18px; }
.sg-frame .sg-hero-heading > .sg-heading { font-size: 2.85rem; line-height: 1.16; }
.sg-frame .sg-hero-lede { margin-top: 30px; gap: 22px; }
.sg-frame .sg-hero-support-copy { font-size: 15.5px; }
.sg-frame .sg-hero-rail { margin-top: 42px; }
.sg-frame .sg-hero-keywords,
.sg-frame .sg-hero-metrics { gap: 6px 14px; }
.sg-frame .sg-hero-keyword + .sg-hero-keyword::before { margin-right: 14px; }
.sg-frame .sg-hero-metric strong { font-size: 18px; }
.sg-frame .sg-hero-metric span { font-size: 12px; }
}
@media (max-width: 320px) {
.sg-frame .sg-hero-heading > .sg-heading { font-size: 2.5rem; }
}
/* ---------- 18. 精选研究：浅纸底 + 朱砂序号（原为深墨插页） ----------
组件库把 .sg-quality 设为 --sg-ink 底并用 ::before 向左出血；改为纸面底后
全站材质统一，层级改由序号、细线、字号跨度承担，不再有硬切的深色块。 */
.sg-frame .sg-quality {
grid-template-columns: 1fr;
gap: 40px;
padding-block: 104px;
background: transparent;
color: var(--sg-ink);
}
.sg-frame .sg-quality::before { display: none; }
.sg-frame .sg-quality-copy {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: 24px;
}
.sg-frame .sg-quality .sg-split-heading .sg-kicker { color: var(--sg-primary-ink); }
.sg-frame .sg-quality .sg-split-heading .sg-kicker::before { background-color: var(--sg-primary-ink); }
.sg-frame .sg-quality-copy .sg-split-heading {
grid-template-columns: 160px minmax(0, 1fr);
align-items: start;
gap: 32px;
}
.sg-frame .sg-quality-copy .sg-split-heading > div { max-width: 760px; gap: 16px; }
/* 关键区块拉大字号跨度（第一批），次要区块另行压小 */
.sg-frame .sg-quality-copy .sg-heading {
max-width: 760px;
color: var(--sg-ink);
font-size: clamp(2.4rem, 3.6vw, 3.4rem);
line-height: 1.12;
}
.sg-frame .sg-quality-copy .sg-copy {
max-width: 42em;
}
/* 三篇文章使用横向纸面卡，不再保留中央视觉。
组件库把 proofs 按 ceil(n/2) 拆进左右两个 stack（3 篇 = 左 2 + 右 1），
所以让 stack 透明化（display:contents），三张卡在同一个三列网格里排齐。 */
.sg-frame .sg-quality-proof {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.sg-frame .sg-proof-stack { display: contents; }
.sg-frame .sg-quality-media { display: none; }
.sg-frame .sg-proof {
min-height: 220px;
padding: 24px;
gap: 16px;
border: 1px solid var(--sg-card-line);
border-radius: var(--sg-radius-card);
background: var(--sg-paper);
transition: background-color var(--sg-transition), border-color var(--sg-transition), transform var(--sg-transition);
}
.sg-frame .sg-proof .sg-heading { color: var(--sg-ink); font-size: 21px; line-height: 1.35; }
.sg-frame .sg-proof .sg-copy { color: var(--sg-muted); font-size: 14px; line-height: 1.65; }
.sg-frame .sg-proof:hover,
.sg-frame .sg-proof:focus-visible {
border-color: rgba(217, 75, 43, 0.42);
background: var(--sg-accent-soft);
transform: translateY(-3px);
}
/* 朱砂序号作为浅底上的层级锚点 */
.sg-frame .sg-proof-number {
color: var(--sg-primary-ink);
font-family: var(--sg-font-display);
font-size: 15px;
font-weight: 600;
letter-spacing: .06em;
}
.sg-frame .sg-home-research-meta {
display: flex;
flex-wrap: wrap;
gap: 5px 10px;
color: var(--sg-subtle);
font-size: 11.5px;
line-height: 1.45;
letter-spacing: .025em;
}
.sg-frame .sg-home-research-meta span + span::before,
.sg-frame .sg-home-research-meta time + span::before,
.sg-frame .sg-home-research-meta span + time::before { content: '·'; margin-right: 10px; color: var(--sg-line-strong); }
.sg-frame .sg-home-research-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: auto;
}
.sg-frame .sg-home-research-tags span {
padding: 4px 8px;
border: 1px solid rgba(38, 24, 21, 0.16);
border-radius: var(--sg-radius-pill);
color: var(--sg-muted);
font-size: 11px;
line-height: 1.2;
}
.sg-frame .sg-home-research-more {
color: var(--sg-primary-ink);
font-size: 12.5px;
font-weight: 700;
letter-spacing: .035em;
}
.sg-frame .sg-home-research-more::after { content: ' →'; }
@media (max-width: 500px) {
.sg-frame .sg-home-research-meta { font-size: 11px; }
.sg-frame .sg-home-research-tags span { font-size: 10.5px; }
}
@media (max-width: 900px) {
.sg-frame .sg-quality-copy,
.sg-frame .sg-quality-copy .sg-split-heading { grid-template-columns: 1fr; }
.sg-frame .sg-quality-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
.sg-frame .sg-quality-proof { grid-template-columns: 1fr; }
}
@media (max-width: 500px) {
.sg-frame .sg-quality { padding-block: 48px; gap: 26px; }
.sg-frame .sg-quality-copy .sg-heading { font-size: 2rem; }
.sg-frame .sg-proof { min-height: 0; padding: 20px; }
}
/* ---------- 19. 体系入口图片卡（所有文字悬浮于图片） ---------- */
.sg-frame .sg-surface-card {
display: block;
overflow: hidden;
border-radius: var(--sg-radius-card);
background: var(--sg-ink);
isolation: isolate;
}
.sg-frame .sg-surface-card .sg-surface-art {
--spot-x: 50%;
--spot-y: 50%;
--pan-x: 0px;
--pan-y: 0px;
position: relative;
width: 100%;
min-height: 0;
aspect-ratio: 1 / 1;
overflow: hidden;
}
/* 图片轻微视差，避免静态海报感 */
.sg-frame .sg-surface-card .sg-surface-art > img.sg-image {
transform: translate3d(var(--pan-x), var(--pan-y), 0) scale(1.035);
transition: transform 420ms cubic-bezier(.2,.7,.2,1), filter 420ms ease;
will-change: transform;
}
.sg-frame .sg-surface-card:hover .sg-surface-art > img.sg-image {
transform: translate3d(var(--pan-x), var(--pan-y), 0) scale(1.075);
filter: saturate(1.08) contrast(1.025);
}
/* Canvas UI 风格的指针跟随光泽 */
.sg-frame .sg-surface-card .sg-surface-art::after {
content: "";
position: absolute;
z-index: 1;
inset: 0;
pointer-events: none;
background: radial-gradient(circle 130px at var(--spot-x) var(--spot-y), rgba(255,255,255,.34), rgba(255,255,255,.08) 35%, transparent 72%);
opacity: 0;
mix-blend-mode: screen;
transition: opacity 260ms ease;
}
.sg-frame .sg-surface-card:hover .sg-surface-art::after { opacity: 1; }
.sg-frame .sg-ripple-canvas {
position: absolute;
z-index: 2;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
mix-blend-mode: screen;
}
/* 顶部编号胶囊 */
.sg-frame .sg-surface-card .sg-surface-meta {
position: absolute;
z-index: 3;
top: 20px;
left: 20px;
width: fit-content;
padding: 8px 12px;
border: 1px solid rgba(38, 24, 21, 0.14);
border-radius: var(--sg-radius-pill);
background: rgba(255, 253, 251, 0.78);
color: var(--sg-ink);
font-size: 11px;
line-height: 1.2;
letter-spacing: 0.06em;
backdrop-filter: blur(10px) saturate(130%);
-webkit-backdrop-filter: blur(10px) saturate(130%);
}
/* 标题和说明悬浮在图片底部，深色渐变保证三张图均可读 */
.sg-frame .sg-surface-card .sg-surface-copy {
position: absolute;
z-index: 2;
inset: auto 0 0;
gap: 10px;
padding: 92px 24px 24px;
background: linear-gradient(180deg, rgba(38, 24, 21, 0) 0%, rgba(38, 24, 21, 0.82) 68%, rgba(38, 24, 21, 0.94) 100%);
color: var(--sg-white);
}
.sg-frame .sg-surface-card .sg-surface-copy .sg-heading {
color: var(--sg-white);
font-size: 26px;
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.28);
}
.sg-frame .sg-surface-card .sg-surface-copy .sg-copy {
max-width: 30em;
color: rgba(255, 255, 255, 0.82);
font-size: 14px;
line-height: 1.55;
}
.sg-frame .sg-surface-card:hover .sg-surface-meta {
border-color: rgba(217, 75, 43, 0.5);
background: rgba(255, 218, 210, 0.92);
}
/* 悬停时底部遮罩只加深，不带红调：原先中段用 rgba(83,28,17,.84)，
在图片上会读成一层红色投影。 */
.sg-frame .sg-surface-card:hover .sg-surface-copy {
background: linear-gradient(180deg, rgba(38, 24, 21, 0) 0%, rgba(38, 24, 21, 0.88) 66%, rgba(38, 24, 21, 0.97) 100%);
}
/* ---------- 17. 核心价值板块（editing tiles）：2:1 非对称 ----------
与上一屏体系入口的等宽三列拉开差异：首项大图占两行，另两项小图叠放。 */
.sg-frame .sg-editing { padding-block: 80px; }
.sg-frame .sg-editing .sg-tile-grid {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
gap: 16px;
border: 0;
}
.sg-frame .sg-editing .sg-tile {
min-width: 0;
border: 0;
}
/* 组件库给 tile-copy 设了 180px 保底并在网格里被拉伸，这里按内容收紧，
去掉每张卡下方约 100–150px 的死白 */
.sg-frame .sg-editing .sg-tile-copy {
align-content: start;
min-height: 0;
padding: 18px 4px 8px;
}
.sg-frame .sg-editing .sg-tile:nth-child(1) { grid-row: span 2; }
/* 卡片在网格里会被拉伸：若只让 copy 顶对齐，多余高度会积在文字下方，
导致左侧大卡与右侧小卡的文字块高度差出几十像素、底部看起来不齐。
这里让每张卡都成为纵向弹性盒、由图片吸收多余高度，文字始终贴住卡片底部。 */
@media (min-width: 761px) {
.sg-frame .sg-editing .sg-tile { display: flex; flex-direction: column; }
.sg-frame .sg-editing .sg-tile .sg-tile-media {
flex: 1;
aspect-ratio: auto;
min-height: 200px;
}
.sg-frame .sg-editing .sg-tile:nth-child(1) .sg-tile-media { min-height: 360px; }
.sg-frame .sg-editing .sg-tile .sg-tile-media > img.sg-image { height: 100%; }
/* 文字块统一贴底并给出一致的最小高度，标题/描述行数不同也不会错层 */
.sg-frame .sg-editing .sg-tile-copy {
flex: none;
align-content: end;
min-height: 84px;
}
}
/* 媒体区：主项用 4:5 立幅，副项用 16:10 横幅，比例收敛为两套 */
.sg-frame .sg-tile-media {
min-height: 0;
aspect-ratio: 16 / 10;
border-radius: var(--sg-radius-card);
overflow: hidden;
}
.sg-frame .sg-editing .sg-tile:nth-child(1) .sg-tile-media { aspect-ratio: 4 / 5; }
/* 次要区块标题压小，把字号跨度让给主张与研究区 */
.sg-frame .sg-editing .sg-editing-heading .sg-heading { font-size: clamp(1.9rem, 2.4vw, 2.3rem); }
.sg-frame .sg-editing .sg-tile-copy .sg-heading { font-size: 20px; }
.sg-frame .sg-editing .sg-tile:nth-child(1) .sg-tile-copy .sg-heading { font-size: 24px; }
/* 三张图片加载前的 Kezhongke 原色占位渐变 */
.sg-frame .sg-tile:nth-child(1) .sg-tile-media { background: linear-gradient(150deg, #fff0ed 0%, #ffb4a3 58%, #cf4425 100%); }
.sg-frame .sg-tile:nth-child(2) .sg-tile-media { background: linear-gradient(150deg, #effbf7 0%, #c0ecdc 58%, #3e6659 100%); }
.sg-frame .sg-tile:nth-child(3) .sg-tile-media { background: linear-gradient(150deg, #f5f2ff 0%, #e4dfff 58%, #747191 100%); }
/* 竖图裁入不同比例容器时保留各自视觉主体 */
.sg-frame .sg-tile:nth-child(1) .sg-tile-media > img.sg-image { object-position: 50% 42%; }
.sg-frame .sg-tile:nth-child(2) .sg-tile-media > img.sg-image { object-position: 50% 50%; }
.sg-frame .sg-tile:nth-child(3) .sg-tile-media > img.sg-image { object-position: 50% 64%; }
.sg-frame .sg-tile .sg-tile-media > img.sg-image {
transition: transform 500ms cubic-bezier(.2,.7,.2,1), filter 500ms ease;
}
.sg-frame .sg-tile:hover .sg-tile-media > img.sg-image {
transform: scale(1.035);
filter: saturate(1.04) contrast(1.02);
}
/* 占位字放大，强化单字排版感 */
.sg-frame .sg-tile .sg-image-fallback { font-size: 84px; }
@media (max-width: 760px) {
.sg-frame .sg-editing { padding-block: 64px; }
.sg-frame .sg-editing .sg-tile-grid { grid-template-columns: 1fr; }
.sg-frame .sg-editing .sg-tile:nth-child(1) { grid-row: auto; }
.sg-frame .sg-editing .sg-tile:nth-child(1) .sg-tile-media { aspect-ratio: 16 / 10; }
}
@media (max-width: 500px) {
.sg-frame .sg-tile .sg-image-fallback { font-size: 56px; }
.sg-frame .sg-editing .sg-tile:nth-child(1) .sg-tile-copy .sg-heading { font-size: 21px; }
}
/* ---------- 15. Hero 主标题粒子接管（particle-title.js） ---------- */
.sg-hero-heading { position: relative; }
/* 粒子形成完成后才隐藏原文字；加载中/失败/无 JS 时保持可见 */
.kzk-particle-title .sg-hero-heading .sg-heading { opacity: 1; }
.kzk-particle-title.kzk-particle-ready .sg-hero-heading .sg-heading { opacity: 0 !important; }
.sg-title-particles {
position: absolute;
z-index: 2;
pointer-events: none;
opacity: 0;
/* 揭幕即为散乱首帧，淡入要短，否则会盖掉汇聚过程的前段 */
transition: opacity 90ms linear;
}
.kzk-particle-title.kzk-particle-ready .sg-title-particles { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.sg-title-particles { display: none; }
}
/* ---------- 22. 首页项目生态收尾（合并工坊/项目/社区/CTA） ---------- */
.sg-frame .sg-hero-actions { margin-top: 8px; }
.sg-frame .sg-home-ecosystem { padding-top: 104px; }
.sg-frame .sg-home-ecosystem-intro {
max-width: 760px;
margin: -8px 0 40px;
color: var(--sg-muted);
font-size: 17px;
line-height: 1.7;
}
.sg-frame .sg-home-tier-head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 24px;
margin: 40px 0 18px;
padding-top: 18px;
border-top: 1px solid rgba(38, 24, 21, 0.12);
}
.sg-frame .sg-home-tier-head span:first-child {
color: var(--sg-ink);
font-size: 13px;
font-weight: 650;
letter-spacing: .08em;
}
.sg-frame .sg-home-tier-head span:last-child {
color: var(--sg-subtle);
font-size: 12.5px;
}
.sg-frame .sg-home-ecosystem-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.sg-frame .sg-home-ecosystem-card {
display: flex;
min-height: 230px;
flex-direction: column;
gap: 14px;
padding: 26px 24px;
border: 1px solid var(--sg-card-line);
border-radius: var(--sg-radius-card);
background: var(--sg-paper);
color: inherit;
text-decoration: none;
transition: transform var(--sg-transition), background-color var(--sg-transition);
}
.sg-frame .sg-home-ecosystem-card.is-status-live { background: var(--sg-ink); color: var(--sg-paper); }
.sg-frame .sg-home-ecosystem-card:hover { background: var(--sg-primary-soft); transform: translateY(-4px); }
.sg-frame .sg-home-ecosystem-card.is-status-live:hover { background: #38241e; }
.sg-frame .sg-home-ecosystem-status {
color: var(--sg-primary-ink);
font-size: 12px;
font-weight: 700;
letter-spacing: .05em;
}
.sg-frame .sg-home-project-frame .sg-home-ecosystem-status,
.sg-frame .sg-home-project-frame .sg-home-ecosystem-action {
color: var(--sg-primary-on-dark);
}
.sg-frame .sg-home-ecosystem-card.is-status-building .sg-home-ecosystem-status,
.sg-frame .sg-home-ecosystem-card.is-status-building .sg-home-ecosystem-action,
.sg-frame .sg-home-ecosystem-card.is-status-testing .sg-home-ecosystem-status,
.sg-frame .sg-home-ecosystem-card.is-status-testing .sg-home-ecosystem-action,
.sg-frame .sg-home-ecosystem-card.is-status-exploring .sg-home-ecosystem-status,
.sg-frame .sg-home-ecosystem-card.is-status-exploring .sg-home-ecosystem-action {
color: var(--sg-primary-ink);
}
.sg-frame .sg-home-ecosystem-card h3 {
margin: 0;
font-family: var(--sg-font-display);
font-size: 26px;
font-weight: 400;
line-height: 1.25;
}
.sg-frame .sg-home-ecosystem-card p {
margin: 0;
color: var(--sg-muted);
font-size: 14px;
line-height: 1.65;
}
.sg-frame .sg-home-ecosystem-card.is-status-live p { color: var(--sg-line); }
.sg-frame .sg-home-ecosystem-action {
margin-top: auto;
color: var(--sg-primary);
font-size: 13px;
font-weight: 650;
}
.sg-frame .sg-home-ecosystem-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-top: 44px;
padding-top: 26px;
border-top: 1px solid rgba(38, 24, 21, 0.12);
}
.sg-frame .sg-home-ecosystem-foot p {
max-width: 760px;
margin: 0;
color: var(--sg-muted);
font-size: 14px;
line-height: 1.7;
}
/* 重点项目展台：绝对定位舞台 + 自动翻页轮播（4 卡：中心/右/后/左） */
.sg-frame .sg-home-project-stage {
position: relative;
height: clamp(440px, 42vw, 540px);
perspective: 1500px;
}
.sg-frame .sg-home-project-frame {
position: absolute;
top: 0;
left: 50%;
display: block;
width: min(500px, 40%);
min-width: 0;
overflow: hidden;
border-radius: 24px;
background: var(--sg-ink);
color: var(--sg-paper);
text-decoration: none;
transform-style: preserve-3d;
will-change: transform;
/* 纯 CSS 驱动翻页：20.8s = 4 × 5.2s，合成器执行，不依赖 JS 定时器 */
animation: sg-stage-flip 30s linear infinite;
}
/* 四张卡共享同一时间轴，相位各错开 1/4 周期 */
.sg-frame .sg-home-project-frame.is-center { animation-delay: 0s; }
.sg-frame .sg-home-project-frame.is-right { animation-delay: -7.5s; }
.sg-frame .sg-home-project-frame.is-back { animation-delay: -15s; }
.sg-frame .sg-home-project-frame.is-left { animation-delay: -22.5s; }
@keyframes sg-stage-flip {
0% {
z-index: 3;
transform: translateX(-50%) translateZ(48px) scale(1);
box-shadow: 0 26px 70px rgba(38, 24, 21, 0.18);
filter: none;
animation-timing-function: linear;
}
21% {
z-index: 3;
transform: translateX(-50%) translateZ(48px) scale(1);
box-shadow: 0 26px 70px rgba(38, 24, 21, 0.18);
filter: none;
animation-timing-function: cubic-bezier(.2,.72,.18,1);
}
25% {
z-index: 1;
transform: translateX(20%) translateZ(-44px) rotateY(-11deg) scale(0.91);
box-shadow: 0 18px 52px rgba(38, 24, 21, 0.14);
filter: saturate(0.95) brightness(0.94);
animation-timing-function: linear;
}
46% {
z-index: 1;
transform: translateX(20%) translateZ(-44px) rotateY(-11deg) scale(0.91);
box-shadow: 0 18px 52px rgba(38, 24, 21, 0.14);
filter: saturate(0.95) brightness(0.94);
animation-timing-function: cubic-bezier(.2,.72,.18,1);
}
50% {
z-index: 0;
transform: translateX(-50%) translateZ(-150px) scale(0.8);
box-shadow: 0 12px 38px rgba(38, 24, 21, 0.1);
filter: saturate(0.9) brightness(0.74);
animation-timing-function: linear;
}
71% {
z-index: 0;
transform: translateX(-50%) translateZ(-150px) scale(0.8);
box-shadow: 0 12px 38px rgba(38, 24, 21, 0.1);
filter: saturate(0.9) brightness(0.74);
animation-timing-function: cubic-bezier(.2,.72,.18,1);
}
75% {
z-index: 1;
transform: translateX(-120%) translateZ(-44px) rotateY(11deg) scale(0.91);
box-shadow: 0 18px 52px rgba(38, 24, 21, 0.14);
filter: saturate(0.95) brightness(0.94);
animation-timing-function: linear;
}
96% {
z-index: 1;
transform: translateX(-120%) translateZ(-44px) rotateY(11deg) scale(0.91);
box-shadow: 0 18px 52px rgba(38, 24, 21, 0.14);
filter: saturate(0.95) brightness(0.94);
animation-timing-function: cubic-bezier(.2,.72,.18,1);
}
100% {
z-index: 3;
transform: translateX(-50%) translateZ(48px) scale(1);
box-shadow: 0 26px 70px rgba(38, 24, 21, 0.18);
filter: none;
}
}
/* 指针悬停或键盘聚焦时暂停播放，读内容时不被轮播抢走注意力 */
.sg-frame .sg-home-project-stage:hover .sg-home-project-frame,
.sg-frame .sg-home-project-stage:hover .sg-home-stage-dots button,
.sg-frame .sg-home-project-stage:focus-within .sg-home-project-frame,
.sg-frame .sg-home-project-stage:focus-within .sg-home-stage-dots button {
animation-play-state: paused;
}
/* 翻页指示圆点 */
.sg-frame .sg-home-stage-dots {
position: absolute;
z-index: 5;
bottom: 4px;
left: 50%;
display: flex;
gap: 10px;
transform: translateX(-50%);
}
.sg-frame .sg-home-stage-dots button {
width: 26px;
height: 3px;
padding: 0;
border: 0;
border-radius: 99px;
background: rgba(38, 24, 21, 0.16);
cursor: pointer;
animation: sg-stage-dot 20.8s linear infinite;
}
.sg-frame .sg-home-stage-dots button:nth-child(1) { animation-delay: -15.6s; }
.sg-frame .sg-home-stage-dots button:nth-child(2) { animation-delay: 0s; }
.sg-frame .sg-home-stage-dots button:nth-child(3) { animation-delay: -5.2s; }
.sg-frame .sg-home-stage-dots button:nth-child(4) { animation-delay: -10.4s; }
@keyframes sg-stage-dot {
0%, 21%, 100% { width: 44px; background: var(--sg-primary); }
25%, 96% { width: 26px; background: rgba(38, 24, 21, 0.16); }
}
/* 减少动画偏好：关闭翻页，静态展示中央项 */
@media (prefers-reduced-motion: reduce) {
.sg-frame .sg-home-project-frame,
.sg-frame .sg-home-stage-dots button { animation: none !important; }
.sg-frame .sg-home-project-frame.is-center {
z-index: 3;
transform: translateX(-50%) translateZ(48px) scale(1);
}
.sg-frame .sg-home-project-frame.is-right {
z-index: 1;
transform: translateX(20%) translateZ(-44px) rotateY(-11deg) scale(0.91);
filter: saturate(0.95) brightness(0.94);
}
.sg-frame .sg-home-project-frame.is-back {
z-index: 0;
transform: translateX(-50%) translateZ(-150px) scale(0.8);
filter: saturate(0.9) brightness(0.74);
}
.sg-frame .sg-home-project-frame.is-left {
z-index: 1;
transform: translateX(-120%) translateZ(-44px) rotateY(11deg) scale(0.91);
filter: saturate(0.95) brightness(0.94);
}
}
.sg-frame .sg-home-project-chrome {
display: flex;
align-items: center;
gap: 6px;
height: 30px;
padding: 0 14px;
background: rgba(255, 255, 255, 0.07);
}
.sg-frame .sg-home-project-chrome i {
width: 7px;
height: 7px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.34);
}
.sg-frame .sg-home-project-chrome i:first-child { background: var(--sg-primary); }
.sg-frame .sg-home-project-chrome span {
margin-left: 8px;
overflow: hidden;
color: rgba(255, 255, 255, 0.68);
font-size: 10px;
font-weight: 650;
letter-spacing: .08em;
text-overflow: ellipsis;
text-transform: uppercase;
white-space: nowrap;
}
.sg-frame .sg-home-project-shot {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--sg-image-gradient);
}
.sg-frame .sg-home-project-shot img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform 700ms cubic-bezier(.2,.72,.18,1), filter 700ms ease;
}
.sg-frame .sg-home-project-frame:hover .sg-home-project-shot img { transform: scale(1.035); filter: saturate(1.06); }
.sg-frame .sg-home-project-shot.is-left { background: #111311; }
.sg-frame .sg-home-project-shot.is-right { background: #272b33; }
/* DUDesign 单文件项目无封面，按其黑/荧光绿视觉生成 */
.sg-frame .sg-du-cover {
position: relative;
display: grid;
height: 100%;
align-content: center;
gap: 10px;
padding: 26px;
background: #111311;
color: #f8fff0;
overflow: hidden;
}
.sg-frame .sg-du-cover strong {
position: relative;
z-index: 1;
font-family: var(--sg-font-sans);
font-size: clamp(2rem, 3.5vw, 3.2rem);
line-height: .95;
letter-spacing: -.06em;
}
.sg-frame .sg-du-cover span {
position: relative;
z-index: 1;
color: #baff00;
font-size: 13px;
font-weight: 650;
letter-spacing: .04em;
}
.sg-frame .sg-du-cover i {
position: absolute;
border: 1px solid rgba(186, 255, 0, 0.68);
border-radius: 50%;
}
.sg-frame .sg-du-cover i:nth-of-type(1) { width: 180px; height: 180px; top: -60px; right: -42px; }
.sg-frame .sg-du-cover i:nth-of-type(2) { width: 22px; height: 22px; right: 72px; bottom: 28px; background: #baff00; }
.sg-frame .sg-home-project-info {
display: grid;
gap: 9px;
padding: 18px 20px 22px;
}
.sg-frame .sg-home-project-info h3 {
margin: 0;
font-family: var(--sg-font-display);
font-size: 24px;
font-weight: 400;
line-height: 1.2;
}
.sg-frame .sg-home-project-info p {
margin: 0;
color: var(--sg-line);
font-size: 13.5px;
line-height: 1.55;
}
.sg-frame .sg-home-project-info .sg-home-ecosystem-action { font-size: 12.5px; }
@media (max-width: 900px) {
.sg-frame .sg-home-project-stage {
display: grid;
height: auto;
gap: 18px;
perspective: none;
}
.sg-frame .sg-home-project-frame,
.sg-frame .sg-home-project-frame.is-left,
.sg-frame .sg-home-project-frame.is-center,
.sg-frame .sg-home-project-frame.is-right {
position: relative;
left: auto;
width: 100%;
transform: none;
filter: none;
animation: none;
}
.sg-frame .sg-home-project-frame:hover { transform: translateY(-4px); }
.sg-frame .sg-home-stage-dots { display: none; }
.sg-frame .sg-home-ecosystem-grid { grid-template-columns: 1fr; }
.sg-frame .sg-home-ecosystem-foot { align-items: start; flex-direction: column; }
}
@media (max-width: 500px) {
.sg-frame .sg-home-ecosystem { padding-top: 56px; }
.sg-frame .sg-home-ecosystem-card { min-height: 0; }
}
/* ---------- 21. 首页信息架构精简：隐藏重复的教程/工坊/社区板块 ---------- */
.sg-frame .sg-practice,
.sg-frame .sg-open,
.sg-frame .sg-enterprise,
.sg-frame .sg-cta {
display: none !important;
}
/* 隐藏重复板块后，页脚承接内容时增加适当呼吸空间 */
.sg-frame .sg-footer { margin-top: 56px; }
/* ---------- 31. 文章阅读体验增强 ---------- */
/* 阅读进度条 */
.sg-progress { position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: 2px; pointer-events: none; }
.sg-progress i { display: block; width: 0; height: 100%; background: var(--sg-primary); transition: width 80ms linear; }
/* 正文 + TOC 布局 */
/* 复制链接：署名行下的无声小控件，成功变绿 1.6s 后复原 */
.sg-article-share { display: inline-flex; gap: 14px; margin-left: 2px; }
.sg-article-share-btn {
padding: 0;
border: 0;
background: none;
color: var(--sg-muted);
font-size: 12.5px;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
transition: color var(--sg-transition);
}
.sg-article-share-btn:hover { color: var(--sg-primary-accessible); }
.sg-article-share-btn.is-ok {
color: #1f5c3d;
text-decoration: none;
font-weight: 650;
}
/* 正文单栏居中：目录改成右侧抽屉（.sg-article-toc 见下），不再占布局轨道。
正文列 = 42em（约 42 个全角字/行），在视口正中——Claude 式阅读形态。 */
.sg-article-layout {
display: grid;
grid-template-columns: minmax(0, 42em);
justify-content: center;
gap: 0;
align-items: start;
}
.sg-article-main { min-width: 0; }
/* 文章页阅读体验：窄栏 + 衬线正文（Claude 式长文排版）。
此前这里刻意放开 .sg-prose 的 760px 限宽，让正文填满主列——在 1240px
栅格里一行跑到 55+ 个全角字，远超中文舒适区（36-44）。收回 42em
（17px 字号下 ≈42 字/行），右留呼吸位给常驻目录。
正文改用与标题同族的衬线：长文阅读是这页的唯一任务；字重 400、
strong 落 600/700（article.html 的字体请求已同步补 400/500）。
范围只限文章页：议题/教程页与编辑器共用 .sg-prose，各自有既定排版。 */
.sg-article-main .sg-prose {
max-width: 42em;
margin: 0;
font-family: var(--sg-font-display);
font-size: 17px;
font-weight: 400;
line-height: 1.95;
}
.sg-article-main .sg-prose strong { font-weight: 600; }
/* 章节标题不自动渲染分割线：56px 的段前间距已足够分节，顶边线在衬线长文里
反而打断连续性。只限文章页；议题/教程页的标题分节样式各自独立。 */
.sg-article-main .sg-prose h2 { padding-top: 0; border-top: 0; }
/* 目录常驻右侧：sticky 生效的前提是祖先不建立滚动容器。
组件库给 .sg-frame 设了 overflow: hidden，会把它变成 sticky 的参照 scrollport
而那个容器本身不滚动，于是目录跟着正文一起走。这里把 frame 改成 overflow: clip：
同样裁掉页脚字标的出血，但不创建滚动容器，sticky 重新以视口为参照。
（clip 不被支持的旧浏览器会回落到组件库的 hidden，即当前的随页滚动行为。） */
.sg-frame { overflow: clip; }
/* 目录线轨：右缘一组细线，每节一条；当前节加深加长（scrollspy 同步），
悬停/聚焦浮出该节标题与首句。形态参照 Anthropic 工程师文集页——
不占布局宽度，还自带「共几节、读到哪」的进度信息。 */
.sg-toc-rail {
position: fixed;
left: 0;
top: 50%;
transform: translateY(-50%);
z-index: 30;
display: grid;
gap: 12px;
padding: 6px 4px 6px 8px;
/* 左对齐：所有线的左缘贴同一根轴，长度向右生长 */
justify-items: start;
}
/* 三级长度随阅读位置流动：
一级（其余节）16px 浅灰、二级（当前节相邻两节）24px 中灰、
三级（当前节）34px 墨色——未滚进正文前全部一级。
width 过渡让滚动时的档位切换是一组流动的线，而不是硬跳。 */
.sg-toc-rail-line {
width: 16px;
height: 3px;
padding: 0;
border: 0;
border-radius: 0 2px 2px 0;
background: rgba(38, 24, 21, 0.16);
cursor: pointer;
transition: width 0.22s ease, background-color 0.22s ease;
}
.sg-toc-rail-line.is-near {
width: 24px;
background: rgba(38, 24, 21, 0.34);
}
.sg-toc-rail-line.is-active {
width: 34px;
background: var(--sg-ink);
}
/* 鼠标预览：悬停/聚焦时线条延长到 30px（同时给浮卡），
当前节本就 34px，悬停不缩短 */
.sg-toc-rail-line:hover,
.sg-toc-rail-line:focus-visible {
width: 30px;
background: rgba(38, 24, 21, 0.5);
outline: none;
}
.sg-toc-rail-line.is-active:hover,
.sg-toc-rail-line.is-active:focus-visible { width: 34px; }
.sg-toc-peek {
position: fixed;
left: 52px;
z-index: 31;
width: 280px;
max-width: 72vw;
padding: 14px 18px 12px;
background: var(--sg-card-paper);
border: 1px solid var(--sg-line);
border-radius: var(--sg-radius-md);
box-shadow: 0 12px 36px rgba(38, 24, 21, 0.14);
transform: translateY(-50%);
}
.sg-toc-peek strong {
display: block;
margin-bottom: 4px;
color: var(--sg-ink);
font-size: 14px;
font-weight: 650;
line-height: 1.5;
}
.sg-toc-peek p {
margin: 0;
color: var(--sg-copy-ink);
font-size: 12.5px;
line-height: 1.7;
}
.sg-toc-title {
margin: 0 0 14px;
color: var(--sg-subtle);
font-size: 11px;
font-weight: 650;
letter-spacing: 0.1em;
}
.sg-toc-nav { display: grid; gap: 2px; }
.sg-toc-nav a {
display: block;
padding: 7px 12px;
border-left: 2px solid transparent;
color: var(--sg-muted);
font-size: 13px;
line-height: 1.5;
text-decoration: none;
transition: color var(--sg-transition), border-color var(--sg-transition), background-color var(--sg-transition);
}
.sg-toc-nav a:hover { color: var(--sg-primary); background: var(--sg-primary-soft); }
.sg-toc-nav a.is-active {
border-left-color: var(--sg-primary);
color: var(--sg-primary);
font-weight: 650;
}
.sg-toc-mobile { display: none; }
/* 中文段落首行缩进（仅正文直接段落） */
/* 段落不做首行缩进：段首一律齐平（2026-08-24 定）。中文书排的缩进两字
在网页长文里与列表、引文、代码块混排时反而参差不齐。 */
/* 表格横向滚动 */
.sg-table-wrap { overflow-x: auto; margin: 28px 0; }
.sg-table-wrap table { min-width: 560px; margin: 0; }
/* 代码块复制按钮 */
.sg-prose pre { position: relative; }
.sg-copy-btn {
position: absolute;
top: 10px;
right: 10px;
padding: 5px 12px;
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: var(--sg-radius-pill);
background: rgba(255, 255, 255, 0.08);
color: #f5f2ee;
font-size: 11px;
cursor: pointer;
transition: background-color var(--sg-transition), border-color var(--sg-transition);
}
.sg-copy-btn:hover { background: var(--sg-primary); border-color: transparent; }
/* 上一篇 / 下一篇 */
.sg-article-prevnext {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 64px;
}
.sg-pn {
display: grid;
gap: 10px;
padding: 22px 24px;
border-top: 1px solid var(--sg-line);
color: inherit;
text-decoration: none;
transition: background-color var(--sg-transition);
}
.sg-pn:hover { background: var(--sg-primary-soft); }
.sg-pn span { color: var(--sg-subtle); font-size: 12px; letter-spacing: 0.06em; }
.sg-pn strong {
font-family: var(--sg-font-display);
font-size: 17.5px;
font-weight: 400;
line-height: 1.5;
}
.sg-pn.is-next { text-align: right; justify-items: end; }
/* 相关阅读 */
.sg-article-related { margin-top: 56px; }
.sg-related-title {
margin: 0 0 22px;
font-family: var(--sg-font-display);
font-size: 26px;
font-weight: 400;
letter-spacing: -0.01em;
}
.sg-related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sg-related-card {
display: grid;
align-content: start;
gap: 10px;
padding: 22px 24px;
border: 1px solid var(--sg-card-line);
border-top: 2px solid var(--sg-primary);
background: var(--sg-paper);
color: inherit;
text-decoration: none;
transition: background-color var(--sg-transition), transform var(--sg-transition);
}
.sg-related-card:hover { background: var(--sg-primary-soft); transform: translateY(-3px); }
.sg-related-card span {
color: var(--sg-primary);
font-size: 11px;
font-weight: 650;
letter-spacing: 0.07em;
text-transform: uppercase;
}
.sg-related-card strong {
font-family: var(--sg-font-display);
font-size: 19px;
font-weight: 400;
line-height: 1.45;
}
.sg-related-card p {
margin: 0;
color: var(--sg-muted);
font-size: 13px;
line-height: 1.65;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* 返回顶部 */
.sg-backtop {
position: fixed;
z-index: 60;
right: 28px;
bottom: 28px;
width: 44px;
height: 44px;
border: 1px solid var(--sg-line);
border-radius: 50%;
background: var(--sg-paper);
color: var(--sg-ink);
font-size: 17px;
cursor: pointer;
opacity: 0;
pointer-events: none;
transform: translateY(8px);
box-shadow: 0 10px 28px rgba(38, 24, 21, 0.12);
transition: opacity var(--sg-transition), transform var(--sg-transition), background-color var(--sg-transition), color var(--sg-transition);
}
.sg-backtop.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.sg-backtop:hover { background: var(--sg-primary); border-color: transparent; color: #fffdfb; }
@media (max-width: 1080px) {
.sg-article-layout { grid-template-columns: 1fr; }
.sg-toc-rail, .sg-toc-peek { display: none; }
.sg-toc-mobile {
display: block;
margin-bottom: 32px;
padding: 14px 18px;
border: 1px solid rgba(38, 24, 21, 0.14);
border-radius: var(--sg-radius-md);
background: var(--sg-paper);
}
.sg-toc-mobile summary { cursor: pointer; color: var(--sg-muted); font-size: 13px; font-weight: 650; }
.sg-toc-mobile .sg-toc-nav { margin-top: 10px; }
}
@media (max-width: 560px) {
.sg-article-prevnext, .sg-related-grid { grid-template-columns: 1fr; }
.sg-pn.is-next { text-align: left; justify-items: start; }
.sg-backtop { right: 18px; bottom: 18px; }
}
/* ---------- 30. about 页（无页头标题） ---------- */
.sg-block.sg-first-block { padding-top: 168px; }
@media (max-width: 560px) {
.sg-block.sg-first-block { padding-top: 128px; }
}
/* ---------- 29. 生长页筛选区分段控件 + 统计 + 主推角标 ---------- */
.sg-filter-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
padding-bottom: 32px;
}
/* 连体分段控件：一个胶囊容器内嵌选项 */
.sg-filter-bar {
display: inline-flex;
gap: 4px;
width: fit-content;
max-width: 100%;
padding: 5px;
border: 1px solid rgba(38, 24, 21, 0.14);
border-radius: var(--sg-radius-pill);
background: var(--sg-paper);
overflow-x: auto;
}
.sg-filter-bar .sg-tab {
flex: 0 0 auto;
border: 0;
background: transparent;
}
.sg-filter-bar .sg-tab:hover { background: var(--sg-primary-soft); }
.sg-filter-bar .sg-tab.is-active { background: var(--sg-ink); color: var(--sg-paper); }
/* 内容统计：随筛选实时更新 */
.sg-grow-stats {
margin: 0;
color: var(--sg-subtle);
font-size: 12.5px;
letter-spacing: 0.05em;
white-space: nowrap;
}
/* 主推卡封面右上角标 */
.sg-wire-card .sg-card-art { position: relative; }
.sg-card-feature-tag {
position: absolute;
top: 14px;
right: 14px;
padding: 6px 12px;
border-radius: var(--sg-radius-pill);
background: var(--sg-primary);
color: #fffdfb;
font-size: 10.5px;
font-weight: 650;
letter-spacing: 0.08em;
box-shadow: 0 6px 18px rgba(217, 75, 43, 0.32);
}
@media (max-width: 560px) {
.sg-filter-row { align-items: flex-start; flex-direction: column; gap: 12px; }
}
/* ---------- 28. 页脚 wordmark：全页唯一的大面积视觉收尾 ---------- */
.sg-frame .sg-footer-wordmark:empty { display: none; }
.sg-frame .sg-footer-wordmark {
margin-top: 8px;
/* 贴边裁切：右侧溢出由组件库的 overflow:hidden 裁掉，形成收尾感 */
color: rgba(217, 75, 43, 0.16);
font-size: clamp(4.5rem, 17vw, 14rem);
letter-spacing: -0.03em;
line-height: .8;
user-select: none;
}
@media (max-width: 760px) {
.sg-frame .sg-footer-wordmark { font-size: 22vw; }
}
/* ---------- 26. 生长页 ALL 瀑布流模式 ---------- */
/* 课程不足三门：收窄列宽，单张卡不至于孤零零占满三分之一网格 */
#tutorial-grid.is-sparse {
grid-template-columns: repeat(auto-fit, minmax(280px, 400px));
justify-content: start;
}
/* 课程封面固定窗口规范（2026-08-26 确立）：所有课程卡图片统一 16/9 窗口。
主推卡不跨列、不跨行，图片窗口与其他课程等大——主推只靠「首位排序 +
FEATURED 标签」体现，网格几何完全均一（2026-08-26 二度校准：跨两列的
双宽窗口破坏了一致性）。原「跨两行 + dense 填缝」让左列被竖图拉得极长、
中列留下填不进去的死空白；4:1 横幅的 is-banner 特例取消，宽幅官方素材在
资产层派生 16/9（模糊底衬 + 原图居中）。 */
#tutorial-grid .sg-wire-card .sg-card-art { aspect-ratio: 16 / 9; }
#tutorial-grid.is-waterfall { grid-auto-flow: row; }
/* 主推卡封面轻微放大反馈 */
#tutorial-grid .sg-wire-card .sg-card-art img { transition: transform 500ms cubic-bezier(.2,.7,.2,1); }
#tutorial-grid .sg-wire-card:hover .sg-card-art img { transform: scale(1.03); }
/* ---------- 26b. 生长页方向地图（2026-08-29：词表驱动的引导层） ----------
视觉重量刻意低于上面的课程卡：细边框、无阴影、状态行灰字——它是「候选
方向」陈列，不是课程；真课与候选的差异本身就是诚实度 */
.sg-dir-layout {
display: grid;
grid-template-columns: 168px minmax(0, 1fr);
gap: 0 28px;
align-items: start;
}
/* 侧边分类轨：sticky 跟随（与议题页筛选栏同一语言），滚动高亮当前组 */
.sg-dir-rail {
position: sticky;
top: 104px;
display: flex;
flex-direction: column;
gap: 2px;
}
.sg-dir-rail-link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 12px;
border: 0;
border-left: 2px solid transparent;
background: none;
color: var(--sg-muted);
font: inherit;
font-size: 13px;
text-align: left;
cursor: pointer;
border-radius: 0 8px 8px 0;
}
.sg-dir-rail-link:hover { color: var(--sg-ink); background: rgba(255, 255, 255, .6); }
.sg-dir-rail-link.is-active {
color: var(--sg-ink);
border-left-color: var(--sg-primary-accessible);
background: rgba(255, 255, 255, .6);
font-weight: 650;
}
.sg-dir-rail-n { color: var(--sg-subtle); font-size: 11px; }
.sg-dir-rail-link.is-active .sg-dir-rail-n { color: var(--sg-primary-accessible); }
/* 难度单选 pill：方向地图区块头右上（原 block-note 位），与议题页排序 pill 同一语言 */
.sg-dir-filter {
display: inline-flex;
gap: 3px;
padding: 3px;
border: 1px solid var(--sg-card-line);
border-radius: 999px;
background: rgba(255, 255, 255, .62);
}
.sg-dir-level-btn {
min-width: 58px;
height: 30px;
padding: 0 13px;
border: 0;
border-radius: 999px;
background: none;
color: var(--sg-muted);
font: inherit;
font-size: 12.5px;
cursor: pointer;
}
.sg-dir-level-btn:hover { color: var(--sg-ink); }
.sg-dir-level-btn.is-active { background: var(--sg-ink); color: var(--sg-stage, #fffdf7); }
@media (max-width: 900px) {
/* 窄屏轨道收平为顶部横滑条，sticky 语义不变 */
.sg-dir-layout { grid-template-columns: minmax(0, 1fr); }
.sg-dir-rail {
flex-direction: row;
overflow-x: auto;
top: 64px;
padding-bottom: 6px;
background: var(--sg-paper);
z-index: 5;
scrollbar-width: none;
}
.sg-dir-rail::-webkit-scrollbar { display: none; }
.sg-dir-rail-link { border-left: 0; border-bottom: 2px solid transparent; border-radius: 8px 8px 0 0; white-space: nowrap; }
.sg-dir-rail-link.is-active { border-bottom-color: var(--sg-primary-accessible); }
}
.sg-dir-group { margin-top: 34px; scroll-margin-top: 96px; }
.sg-dir-group:first-child { margin-top: 8px; }
.sg-dir-cat {
display: flex;
align-items: baseline;
gap: 10px;
margin: 0 0 14px;
font-family: var(--sg-font-display);
font-size: 19px;
font-weight: 600;
}
.sg-dir-cat-count { color: var(--sg-subtle); font-size: 12px; font-weight: 500; font-family: var(--sg-font-sans); }
.sg-dir-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.sg-dir-card {
display: flex;
flex-direction: column;
gap: 8px;
padding: 18px 20px 14px;
border: 1px solid var(--sg-card-line);
border-radius: var(--sg-radius-card);
background: rgba(255, 255, 255, .5);
color: inherit;
text-decoration: none;
transition: transform var(--sg-transition), border-color var(--sg-transition);
}
.sg-dir-card:hover { transform: translateY(-2px); border-color: var(--sg-line-strong); }
.sg-dir-top { display: flex; align-items: center; justify-content: space-between; }
.sg-dir-top-right { display: inline-flex; align-items: center; gap: 8px; }
/* 关注星标：个人关注态（实心）只有自己可见，永不显示总数（Muchnik 纪律） */
.sg-dir-follow {
display: inline-grid;
place-items: center;
width: 26px;
height: 26px;
padding: 0;
border: 0;
border-radius: 50%;
background: none;
color: var(--sg-subtle);
cursor: pointer;
transition: color var(--sg-transition), background var(--sg-transition);
}
.sg-dir-follow svg { width: 17px; height: 17px; }
.sg-dir-follow:hover { color: var(--sg-primary-accessible); background: rgba(179, 54, 32, .07); }
.sg-dir-follow.is-following { color: var(--sg-primary-accessible); }
.sg-dir-follow.is-following svg { fill: currentColor; }
.sg-dir-follow:focus-visible { outline: 2px solid var(--sg-primary-accessible); outline-offset: 2px; }
.sg-dir-no { color: var(--sg-subtle); font-size: 11px; font-weight: 650; letter-spacing: .08em; }
/* 难度分级微色（2026-09-03 综合优化 R2）：难度是选方向的第一判据，原来
灰弱到看不见。芽绿/琥珀/拱红与拱形色板同族，浅晕底 + 墨色字 */
.sg-dir-level {
padding: 2px 9px;
border-radius: var(--sg-radius-pill);
font-size: 10.5px;
font-weight: 650;
letter-spacing: .06em;
}
.sg-dir-level.is-初级 { background: color-mix(in srgb, #4c7214 10%, transparent); color: #4c7214; }
.sg-dir-level.is-中级 { background: color-mix(in srgb, #b0492a 10%, transparent); color: #b0492a; }
.sg-dir-level.is-高级 { background: color-mix(in srgb, #b42318 10%, transparent); color: #b42318; }
.sg-dir-card h3 {
margin: 0;
font-family: var(--sg-font-display);
font-size: 16.5px;
font-weight: 600;
line-height: 1.4;
}
.sg-dir-tagline { margin: 0; color: var(--sg-copy-ink); font-size: 13px; line-height: 1.6; }
.sg-dir-meta { margin: 0; color: var(--sg-subtle); font-size: 11.5px; line-height: 1.55; }
.sg-dir-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: auto;
padding-top: 10px;
border-top: 1px dashed var(--sg-card-line);
font-size: 11px;
}
.sg-dir-actions { display: inline-flex; align-items: center; gap: 12px; }
/* 「看池子」灰链（辅助出口）：有主题墨色的卡由内联 style 染成池色
（2026-09-03：池名与主题板块同色，一眼认出归属），无主题时保持灰 */
.sg-dir-pool { display: inline-flex; align-items: center; gap: 4px; color: var(--sg-subtle); font-weight: 500; }
.sg-dir-pool svg { width: 12px; height: 12px; flex: none; }
/* 「按此发起」跟随主题墨色的描边 ghost（R1+R4）：主色实心铺 36 次会让 CTA
失去意义且与池色红互撞；ghost 默认、hover/聚焦才实心，红重新稀缺 */
.sg-dir-propose {
padding: 4px 12px;
border: 1px solid var(--dir-ink, var(--sg-primary-accessible));
border-radius: var(--sg-radius-pill);
background: none;
color: var(--dir-ink, var(--sg-primary-accessible));
font-weight: 650;
cursor: pointer;
transition: background var(--sg-transition), color var(--sg-transition), transform var(--sg-transition);
}
.sg-dir-propose:hover {
background: var(--dir-ink, var(--sg-primary-accessible));
color: #fff;
transform: translateY(-1px);
}
@media (max-width: 900px) { .sg-dir-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sg-dir-grid { grid-template-columns: minmax(0, 1fr); } }
/* ---------- 25. 教程/文章卡 hover 微交互 ---------- */
/* 标题左侧主色短条生长 */
.sg-wire-card h3 { position: relative; }
.sg-wire-card h3::before {
content: "";
position: absolute;
left: -32px;
top: 0.18em;
width: 4px;
height: 1.1em;
border-radius: 2px;
background: var(--sg-primary);
transform: scaleY(0);
transform-origin: top;
transition: transform var(--sg-transition);
}
.sg-wire-card:hover h3::before,
.sg-wire-card:focus-visible h3::before { transform: scaleY(1); }
/* 「开始学习 / 阅读全文 →」箭头位移 */
.sg-wire-card .sg-card-foot .sg-go {
display: inline-flex;
align-items: center;
transition: transform var(--sg-transition);
}
.sg-wire-card:hover .sg-go,
.sg-wire-card:focus-visible .sg-go { transform: translateX(5px); }
/* 无详情页的预告卡：不使用箭头/主色，避免被当成可点击入口 */
.sg-wire-card .sg-card-foot .sg-soon {
color: var(--sg-subtle);
font-weight: 650;
letter-spacing: .03em;
}
/* 分类标签轻微点亮 */
.sg-wire-card .sg-card-meta .sg-tag { transition: letter-spacing var(--sg-transition); }
.sg-wire-card:hover .sg-card-meta .sg-tag { letter-spacing: 0.12em; }
/* ---------- 24. 主色按钮配色逻辑修正 ---------- */
/* 组件库按「浅主色 + 深字」设计；深朱砂背景配白字达到更稳定的对比度 */
.sg-frame .sg-pill-primary {
background: var(--sg-primary-accessible);
color: #ffffff;
font-weight: 650;
}
.sg-frame .sg-pill-primary:hover,
.sg-frame .sg-pill-primary:focus-visible {
background: #8f2819;
color: #ffffff;
}
/* 次级浅色按钮：浅底使用深朱砂文字，避免小字号对比度不足 */
.sg-frame .sg-pill-light:hover,
.sg-frame .sg-pill-light:focus-visible {
background: var(--sg-primary-soft);
border-color: transparent;
color: var(--sg-primary-ink);
}
.sg-frame .sg-nav .sg-nav-link:hover,
.sg-frame .sg-nav .sg-nav-link:focus-visible,
.sg-frame .sg-nav .sg-nav-link.is-active,
.sg-frame .sg-nav-group.is-open .sg-nav-trigger {
color: var(--sg-primary-ink);
}
/* 研究区改浅纸底后，kicker 与焦点环回到深朱砂（浅底上的可读主色） */
.sg-frame .sg-quality .sg-split-heading .sg-kicker { color: var(--sg-primary-ink); }
.sg-frame .sg-quality .sg-split-heading .sg-kicker::before { background-color: var(--sg-primary-ink); }
.sg-frame a.sg-proof:focus-visible {
outline-color: var(--sg-primary-accessible);
}
/* ---------- 23. 板块标题文字排版美化 ---------- */
/* kicker 加主色引导短线，形成统一的板块识别 */
.sg-frame .sg-split-heading .sg-kicker {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--sg-primary);
}
.sg-frame .sg-split-heading .sg-kicker::before {
content: "";
width: 24px;
height: 2px;
border-radius: 2px;
background: var(--sg-primary);
}
/* 研究区改浅纸底后，kicker 用浅底可读的深朱砂 */
.sg-frame .sg-quality .sg-split-heading .sg-kicker { color: var(--sg-primary-ink); }
/* 板块大标题：中文排版收紧并放开行高 */
.sg-frame .sg-split-heading .sg-heading {
letter-spacing: -0.01em;
line-height: 1.22;
}
/* 板块副标题统一降级：组件库用 --sg-copy-lg（最大 24px），与大标题重量太接近。
三处板块导语统一为衬线小字：字号 16.5→17px 补偿宋体的视觉字面，色重从
--sg-muted 降到更轻的 #7a5b54（纸面 6.08:1 / 暖纸 5.80:1，仍过 AA），
并放开行高与字距，让它读起来是「题注」而不是第二个标题。 */
.sg-frame .sg-split-heading .sg-copy {
max-width: 42em;
color: var(--sg-copy-ink);
font-family: var(--sg-font-display);
font-size: 17px;
font-weight: 400;
letter-spacing: .012em;
line-height: 1.85;
}
/* 项目生态导语：呼应组件库 ✳ 装饰母题，导语前置主色符号 */
.sg-frame .sg-home-ecosystem-intro {
position: relative;
padding-left: 26px;
}
.sg-frame .sg-home-ecosystem-intro::before {
content: "✳";
position: absolute;
left: 0;
top: 2px;
color: var(--sg-primary);
font-size: 15px;
}
/* 项目生态板块头与导语节奏 */
.sg-frame .sg-home-ecosystem .sg-block-head h2 {
font-size: clamp(2rem, 3vw, 3rem);
font-weight: 400;
letter-spacing: -0.01em;
}
/* ---------- 20. 全站装饰性红框清理 ---------- */
/* 卡片型网格统一使用留白，不再用 --sg-line 粉红描边拼格 */
.sg-frame .sg-surface-grid,
.sg-frame .sg-wire-grid,
.sg-frame .sg-article-grid,
.sg-frame .sg-tile-grid,
.sg-frame .sg-capability-grid,
.sg-frame .sg-enterprise-proofs {
border: 0;
background: transparent;
gap: 16px;
}
.sg-frame .sg-surface-card,
.sg-frame .sg-wire-card,
.sg-frame .sg-article-card,
.sg-frame .sg-tile,
.sg-frame .sg-capability,
.sg-frame .sg-proof-card {
border: 0;
}
/* 深色区卡片用极弱面层代替线框 */
.sg-frame .sg-capability,
.sg-frame .sg-proof-card {
background: rgba(255, 255, 255, 0.035);
}
/* 其他装饰型容器不使用红框 */
.sg-frame .sg-article-cover {
border: 0;
}
/* CTA 面板改为纸面卡片后需要保留细描边（原先它靠大面积渐变界定边界） */
.sg-frame .sg-cta-panel {
border: 1px solid var(--sg-card-line);
}
/* 功能控件仍保留可识别边界，但改为中性暖墨透明色 */
.sg-frame .sg-tab,
.sg-frame .sg-wire-card .sg-card-badge,
.sg-frame .sg-auth-form .sg-field input,
.sg-frame .sg-article-head .sg-article-tags span {
border-color: rgba(38, 24, 21, 0.16);
}
/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
.sg-wire-grid, .sg-wire-grid[data-cols="2"], .sg-article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sg-concept { grid-template-columns: 1fr; gap: 40px; }
/* 单列时回到自然文档流：标题 → 正文 → 插图 */
.sg-concept.has-head {
grid-template-areas: "head" "copy" "art";
grid-template-rows: auto auto auto;
gap: 0;
}
.sg-concept.has-head > .sg-concept-copy { padding-bottom: 40px; }
.sg-auth { grid-template-columns: 1fr; }
.sg-auth-brand { display: none; }
}
@media (max-width: 560px) {
.sg-wire-grid, .sg-wire-grid[data-cols="2"], .sg-article-grid { grid-template-columns: 1fr; }
.sg-issue-collaboration-line { align-items: flex-start; }
.sg-issue-collaboration-people { flex-basis: 100%; gap: 5px; }
.sg-frame .sg-issue-collaboration-face { width: 28px; height: 28px; margin-left: -8px; }
.sg-issue-collaboration-face:first-of-type { margin-left: 0; }
.sg-issue-collaboration-assistant,
.sg-issue-collaboration-owner,
.sg-issue-collaboration-link { margin-left: 0; flex-basis: 100%; }
.sg-issue-card { padding: 20px 18px 18px; }
.sg-issue-card.is-open { padding: 22px 18px 18px; }
/* 同步出血：has-cover 卡的 padding-top 由更高优先级规则固定为 24px，故普通卡 -24px */
.sg-issue-card .sg-issue-cover { margin: -24px -18px 0; }
.sg-issue-card.is-open .sg-issue-cover { margin: -22px -18px 0; }
.sg-page-head { padding-top: 128px; }
.sg-cta-panel { padding: 36px 28px; }
}
/* ---------- 32. 首次访问揭幕层（preloader.js） ----------
遮罩 DOM 由 JS 创建：无脚本时页面不会被任何东西挡住。
.kzk-intro-active 期间锁滚动，揭幕后立即移除，不残留任何层。 */
.kzk-intro-active,
.kzk-intro-active body { overflow: hidden; }
.kzk-intro {
position: fixed;
z-index: 999;
inset: 0;
display: grid;
place-items: center;
padding: 32px;
background: #fffdf7; /* 与 --sg-stage 同色，揭幕瞬间不闪色差 */
transition: opacity 520ms cubic-bezier(.2,.7,.2,1), transform 620ms cubic-bezier(.2,.7,.2,1);
}
.kzk-intro.is-leaving {
opacity: 0;
transform: translateY(-10px);
pointer-events: none;
}
.kzk-intro-inner {
display: grid;
width: min(420px, 100%);
justify-items: center;
gap: 18px;
}
.kzk-intro-mark {
width: 72px;
height: 72px;
animation: kzk-intro-breathe 2.6s ease-in-out infinite;
}
.kzk-intro-word {
margin: 0;
color: #261815;
font-family: "Source Han Serif SC", "Noto Serif SC", "Songti SC", STSong, serif;
font-size: 26px;
letter-spacing: -.02em;
line-height: 1;
}
.kzk-intro-meter {
display: flex;
width: 100%;
align-items: center;
gap: 14px;
margin-top: 10px;
}
.kzk-intro-bar {
position: relative;
flex: 1;
height: 1px;
background: rgba(38, 24, 21, 0.16);
}
.kzk-intro-fill {
position: absolute;
inset: 0;
background: #b33620;
transform: scaleX(0);
transform-origin: left center;
transition: transform 260ms ease-out;
}
.kzk-intro-num {
min-width: 2.4em;
margin: 0;
color: #7a5b54;
font-family: "Source Han Serif SC", "Noto Serif SC", "Songti SC", STSong, serif;
font-size: 15px;
font-variant-numeric: tabular-nums;
text-align: right;
}
@keyframes kzk-intro-breathe {
0%, 100% { opacity: .78; transform: scale(1); }
50% { opacity: 1; transform: scale(1.045); }
}
@media (prefers-reduced-motion: reduce) {
.kzk-intro { transition: none; }
.kzk-intro-mark { animation: none; }
.kzk-intro-fill { transition: none; }
}
@media (max-width: 500px) {
.kzk-intro-mark { width: 60px; height: 60px; }
.kzk-intro-word { font-size: 22px; }
}
/* ---------- 35. 站内页面切换遮罩（page-transition.js） ----------
与揭幕层同一套暖纸视觉，但只做淡入淡出：切换是短过程，进度条与百分数
会显得吵。z-index 998 低于揭幕层 999，首页首访时不会两层叠在一起。
遮罩用伪元素实现，不插入任何 DOM 节点，无脚本时完全不存在。 */
.kzk-nav-leaving::before,
.kzk-nav-arriving::before {
content: "";
position: fixed;
z-index: 998;
inset: 0;
background: #fffdf7;
pointer-events: none;
}
/* 离场：淡入盖住旧页面 */
.kzk-nav-leaving::before {
opacity: 0;
animation: kzk-nav-in 180ms ease-out forwards;
}
/* 落地：新页面先被盖住，可交互后淡出 */
.kzk-nav-arriving::before { opacity: 1; }
.kzk-nav-arrived::before {
animation: kzk-nav-out 220ms ease-in forwards;
}
/* 圆形 K 标：两个阶段都居中显示，与揭幕层同一枚标识 */
.kzk-nav-leaving::after,
.kzk-nav-arriving::after {
content: "";
position: fixed;
z-index: 999;
top: 50%;
left: 50%;
width: 56px;
height: 56px;
margin: -28px 0 0 -28px;
background: url("../img/kezhongke-icon-flat.svg") center / contain no-repeat;
pointer-events: none;
animation: kzk-nav-pulse 1.1s ease-in-out infinite;
}
.kzk-nav-leaving::after { opacity: 0; animation: kzk-nav-in 180ms ease-out forwards, kzk-nav-pulse 1.1s ease-in-out infinite; }
.kzk-nav-arrived::after { animation: kzk-nav-out 220ms ease-in forwards; }
@keyframes kzk-nav-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes kzk-nav-out {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes kzk-nav-pulse {
0%, 100% { transform: scale(1); opacity: .82; }
50% { transform: scale(1.06); opacity: 1; }
}
/* 减少动画偏好：JS already 不挂 class，这里再兜一层，确保永不出现 */
@media (prefers-reduced-motion: reduce) {
.kzk-nav-leaving::before, .kzk-nav-arriving::before,
.kzk-nav-leaving::after, .kzk-nav-arriving::after { display: none; }
}
/* ---------- 33. 研究列表（articles.html）：单列表 + 分区 Tab ----------
参考 Claude blog 的信息层级：页头 H1、分区 Tab、极简卡片（图/日期/标题/分区·主题），
摘要与阅读时长留给详情页。配色与字体仍沿用壳中客暖纸 + 朱砂 + 衬线体系。 */
.sg-research-anchor { height: 0; scroll-margin-top: 96px; }
.sg-research-toolbar {
display: flex;
align-items: end;
justify-content: space-between;
flex-wrap: wrap;
gap: 18px 32px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(38, 24, 21, 0.14);
}
.sg-research-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.sg-research-tab {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 14px;
border: 0;
border-radius: var(--sg-radius-pill);
background: transparent;
color: var(--sg-muted);
cursor: pointer;
font: inherit;
font-size: 14px;
transition: background-color var(--sg-transition), color var(--sg-transition);
}
.sg-research-tab span {
color: var(--sg-subtle);
font-size: 12px;
font-variant-numeric: tabular-nums;
}
.sg-research-tab:hover { background: var(--sg-accent-soft); color: var(--sg-ink); }
.sg-research-tab.is-active {
background: var(--sg-ink);
color: var(--sg-paper);
}
.sg-research-tab.is-active span { color: var(--sg-line); }
.sg-research-tab:focus-visible {
outline: 2px solid var(--sg-primary-accessible);
outline-offset: 2px;
}
.sg-research-controls { display: flex; align-items: center; gap: 10px; }
.sg-research-search input,
.sg-research-sort select {
min-height: 40px;
padding: 8px 14px;
border: 1px solid rgba(38, 24, 21, 0.2);
border-radius: var(--sg-radius-pill);
background: var(--sg-paper);
color: var(--sg-ink);
font: inherit;
font-size: 13.5px;
}
.sg-research-search input { width: min(280px, 52vw); }
.sg-research-search input:focus-visible,
.sg-research-sort select:focus-visible {
outline: 2px solid var(--sg-primary-accessible);
outline-offset: 2px;
}
.sg-research-topics {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 18px;
}
.sg-research-topics:empty { display: none; }
.sg-research-topic {
padding: 6px 12px;
border: 1px solid rgba(38, 24, 21, 0.16);
border-radius: var(--sg-radius-pill);
background: transparent;
color: var(--sg-muted);
cursor: pointer;
font: inherit;
font-size: 12.5px;
transition: border-color var(--sg-transition), color var(--sg-transition), background-color var(--sg-transition);
}
.sg-research-topic:hover { border-color: var(--sg-primary-accessible); color: var(--sg-primary-ink); }
.sg-research-topic.is-active {
border-color: transparent;
background: var(--sg-primary-soft);
color: var(--sg-primary-ink);
font-weight: 650;
}
.sg-research-topic:focus-visible {
outline: 2px solid var(--sg-primary-accessible);
outline-offset: 2px;
}
.sg-research-status {
margin: 20px 0 0;
color: var(--sg-subtle);
font-size: 12.5px;
letter-spacing: .04em;
}
.sg-research-grid {
display: grid;
/* 参考 Claude blog 的 auto-fill 窄卡（实测卡片约 302px 宽）：
1344px shell 下自然排 4 列，卡片变窄后图片的视觉占比随之下降。 */
grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
gap: 44px 32px;
margin-top: 22px;
}
.sg-research-card {
display: grid;
align-content: start;
overflow: hidden;
border: 1px solid var(--sg-card-line);
border-radius: var(--sg-radius-card);
background: var(--sg-card-paper);
color: inherit;
text-decoration: none;
transition: box-shadow var(--sg-transition), transform var(--sg-transition);
}
.sg-research-card:hover {
transform: translateY(-3px);
box-shadow: 0 14px 30px rgba(38, 24, 21, 0.09);
}
/* 文字块：底色与 header 浮岛一致的米白纸色 */
.sg-research-body {
display: grid;
gap: 8px;
padding: 16px 18px 20px;
background: var(--sg-card-paper);
}
.sg-research-art {
display: grid;
overflow: hidden;
position: relative; /* 登录可读角标的定位父级 */
/* 16:9：图片再矮一档，重心明确落在标题上（Claude 的窄卡也是这个观感） */
aspect-ratio: 16 / 9;
place-items: center;
background: var(--sg-image-gradient);
}
/* 行业分析分区的「登录可读」角标（2026-08-29 gated 起）：如实标注，不伪装可直读 */
.sg-research-lock {
position: absolute;
top: 10px;
right: 10px;
padding: 4px 10px;
border-radius: var(--sg-radius-pill);
background: rgba(26, 24, 21, 0.78);
color: #fffdfb;
font-size: 11px;
font-weight: 650;
letter-spacing: 0.04em;
backdrop-filter: blur(3px);
}
.sg-research-art img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform 500ms cubic-bezier(.2,.7,.2,1);
}
.sg-research-card:hover .sg-research-art img { transform: scale(1.035); }
.sg-research-fallback {
color: rgba(38, 24, 21, 0.5);
font-family: var(--sg-font-display);
font-size: 38px;
}
.sg-research-date {
color: var(--sg-subtle);
font-size: 12.5px;
letter-spacing: .04em;
}
.sg-research-title {
margin: 0;
color: var(--sg-ink);
font-family: var(--sg-font-display);
font-size: 21px;
font-weight: 400;
line-height: 1.45;
}
.sg-research-card:hover .sg-research-title { color: var(--sg-primary-ink); }
.sg-research-meta {
margin: 0;
color: var(--sg-muted);
font-size: 12.5px;
}
/* 预览卡不再渲染署名（research-list.js 已不生成），样式保留给可能的复用；
若确认不再需要可整段删掉。 */
.sg-research-author {
display: flex;
align-items: center;
gap: 7px;
margin: 6px 0 0;
color: var(--sg-subtle);
font-size: 12px;
letter-spacing: .02em;
}
.sg-frame .sg-research-author-face {
width: 20px;
height: 20px;
flex: 0 0 auto;
border-radius: 50%;
object-fit: cover;
border: 1px solid var(--sg-card-line);
}
.sg-research-author-initial {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--sg-primary-soft);
color: var(--sg-primary-ink);
font-size: 10px;
font-weight: 700;
}
.sg-research-card:focus-visible {
outline: 2px solid var(--sg-primary-accessible);
outline-offset: 6px;
}
.sg-research-empty {
grid-column: 1 / -1;
margin: 8px 0 0;
color: var(--sg-muted);
font-size: 15px;
}
.sg-research-grid > .sg-pill { justify-self: start; }
@media (max-width: 900px) {
.sg-research-grid { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 36px 24px; }
}
@media (max-width: 760px) {
.sg-research-toolbar { align-items: start; flex-direction: column; }
.sg-research-controls { width: 100%; }
.sg-research-search { flex: 1; }
.sg-research-search input { width: 100%; }
}
@media (max-width: 620px) {
.sg-research-grid { grid-template-columns: 1fr; gap: 30px; }
.sg-research-title { font-size: 19px; }
/* 单列时卡片变宽，16:9 会把图片顶到 300px 高（占卡片 3/4）：
改为 2:1 并加高度上限，图片始终只是标题的引子。 */
.sg-research-art {
aspect-ratio: 2 / 1;
max-height: 200px;
}
}
/* ---------- 34. 研究页头：左侧定位 + 右侧四个研究方向 ----------
参考 Claude blog 的两栏页头：左列小标题与入口，右列大字方向清单。
方向命中数来自真实文章统计；0 篇的方向显示「暂无公开文章」且不可点。 */
.sg-research-head {
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.5fr);
align-items: start;
gap: 48px 72px;
}
.sg-research-intro { display: grid; gap: 18px; justify-items: start; max-width: 30em; }
.sg-research-intro .sg-page-title { margin: 0; font-size: clamp(2.4rem, 4.4vw, 3.4rem); }
.sg-research-intro .sg-page-copy { margin: 0; max-width: 24em; }
.sg-research-directions {
display: grid;
gap: 4px;
padding-top: 8px;
}
/* 方向清单入场：接在页头 kicker / 标题 / 说明（0.1 / 0.22 / 0.34s）之后逐条落位。
.sg-anim-in 只由 research-list.js 在首次渲染时挂上、动画结束即移除：
默认态是完全可见的（脚本失败不会留下隐形内容），筛选重绘也不会重复播放。 */
.sg-research-directions.sg-anim-in .sg-research-dir {
animation: sg-dir-in 0.62s cubic-bezier(.2, .7, .2, 1) both;
animation-delay: calc(0.42s + var(--i, 0) * 0.09s);
}
@keyframes sg-dir-in {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.sg-research-directions.sg-anim-in .sg-research-dir { animation: none; }
}
.sg-research-dir {
display: grid;
gap: 6px;
padding: 14px 0;
border: 0;
border-top: 1px solid rgba(38, 24, 21, 0.12);
background: transparent;
color: inherit;
cursor: pointer;
font: inherit;
text-align: left;
transition: color var(--sg-transition), border-color var(--sg-transition);
}
.sg-research-dir:first-child { border-top: 0; }
.sg-research-dir-title {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 8px 14px;
color: var(--sg-ink);
font-family: var(--sg-font-display);
font-size: clamp(1.35rem, 2.3vw, 2rem);
line-height: 1.25;
}
/* 箭头紧跟标题文字（挂在 name 上），hover 前移，呼应参考页的「Agents →」 */
.sg-research-dir-name {
display: inline-flex;
align-items: baseline;
gap: 12px;
transition: transform var(--sg-transition);
}
.sg-research-dir-name::after {
color: var(--sg-primary-ink);
content: "→";
font-family: var(--sg-font-sans);
font-size: .62em;
transition: transform var(--sg-transition);
}
.sg-research-dir:hover .sg-research-dir-title,
.sg-research-dir:focus-visible .sg-research-dir-title { color: var(--sg-primary-ink); }
.sg-research-dir:hover .sg-research-dir-name::after { transform: translateX(5px); }
/* 标题整体轻推 4px：与箭头同向，读作被「拉」向目标；只动 transform，不触发布局 */
.sg-research-dir:hover .sg-research-dir-name,
.sg-research-dir:focus-visible .sg-research-dir-name { transform: translateX(4px); }
.sg-research-dir:hover,
.sg-research-dir:focus-visible { border-top-color: rgba(159, 47, 29, 0.34); }
.sg-research-dir.is-empty:hover { border-top-color: rgba(38, 24, 21, 0.12); }
.sg-research-dir.is-empty:hover .sg-research-dir-name { transform: none; }
.sg-research-dir-count {
margin-left: auto;
color: var(--sg-subtle);
font-family: var(--sg-font-sans);
font-size: 12px;
font-variant-numeric: tabular-nums;
letter-spacing: .04em;
}
.sg-research-dir-facets {
color: var(--sg-copy-ink);
font-family: var(--sg-font-display);
font-size: 13.5px;
line-height: 1.6;
}
.sg-research-dir.is-active .sg-research-dir-title { color: var(--sg-primary-ink); }
.sg-research-dir.is-active .sg-research-dir-name { transform: translateX(4px); }
.sg-research-dir.is-active .sg-research-dir-name::after { transform: translateX(5px); }
.sg-research-dir.is-empty { cursor: default; }
.sg-research-dir.is-empty .sg-research-dir-title { color: var(--sg-muted); }
.sg-research-dir.is-empty .sg-research-dir-name::after { content: ""; }
.sg-research-dir:focus-visible {
outline: 2px solid var(--sg-primary-accessible);
outline-offset: 4px;
}
/* 状态行：当前方向标签 + 清除入口 */
.sg-research-status { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.sg-research-active-dir {
padding: 4px 10px;
border-radius: var(--sg-radius-pill);
background: var(--sg-primary-soft);
color: var(--sg-primary-ink);
font-size: 12px;
font-weight: 650;
}
.sg-research-clear-dir {
border: 0;
background: transparent;
color: var(--sg-primary-ink);
cursor: pointer;
font: inherit;
font-size: 12.5px;
text-decoration: underline;
text-underline-offset: 3px;
}
.sg-research-clear-dir:focus-visible {
outline: 2px solid var(--sg-primary-accessible);
outline-offset: 2px;
}
@media (max-width: 900px) {
.sg-research-head { grid-template-columns: 1fr; gap: 36px; }
.sg-research-intro { max-width: none; }
}
@media (max-width: 560px) {
.sg-research-dir { padding: 12px 0; }
.sg-research-dir-title { font-size: 1.25rem; }
.sg-research-dir-count { margin-left: 0; }
.sg-research-dir-facets { font-size: 12.5px; }
}
/* ---------- 论文检索页 papers.html ---------- */
.sg-papers-head {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr);
align-items: start;
gap: 48px 72px;
}
.sg-papers-searchform {
display: flex;
gap: 10px;
margin-top: 26px;
max-width: 560px;
}
.sg-papers-searchform input {
flex: 1;
min-width: 0;
padding: 12px 16px;
border: 1px solid var(--sg-line);
border-radius: 999px;
background: var(--sg-paper);
color: var(--sg-ink);
font-family: var(--sg-font-sans);
font-size: 15px;
}
.sg-papers-searchform input:focus-visible {
outline: 2px solid var(--sg-primary-accessible);
outline-offset: 2px;
}
.sg-papers-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 14px;
}
.sg-papers-chip {
padding: 6px 14px;
border: 1px solid var(--sg-line);
border-radius: 999px;
background: transparent;
color: var(--sg-subtle);
font-family: var(--sg-font-sans);
font-size: 13px;
cursor: pointer;
transition: border-color var(--sg-transition), color var(--sg-transition), background var(--sg-transition);
}
.sg-papers-chip:hover {
border-color: var(--sg-primary);
color: var(--sg-primary-ink);
background: var(--sg-accent-soft);
}
.sg-papers-aside {
padding: 18px 22px;
border-left: 2px solid var(--sg-line);
}
.sg-papers-aside-title {
margin: 0 0 8px;
color: var(--sg-ink);
font-family: var(--sg-font-display);
font-size: 17px;
}
.sg-papers-aside-copy {
margin: 0 0 10px;
color: var(--sg-muted);
font-size: 13.5px;
line-height: 1.7;
}
.sg-papers-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.sg-papers-tabs {
display: flex;
gap: 6px;
}
.sg-papers-tab {
padding: 8px 16px;
border: 1px solid transparent;
border-radius: 999px;
background: transparent;
color: var(--sg-muted);
font-family: var(--sg-font-sans);
font-size: 14px;
cursor: pointer;
}
.sg-papers-tab.is-active {
border-color: var(--sg-ink);
color: var(--sg-ink);
font-weight: 600;
}
.sg-papers-sort select {
padding: 8px 12px;
border: 1px solid var(--sg-line);
border-radius: 10px;
background: var(--sg-paper);
color: var(--sg-ink);
font-family: var(--sg-font-sans);
font-size: 13.5px;
}
.sg-papers-status {
margin: 18px 0 0;
color: var(--sg-muted);
font-size: 14px;
}
.sg-papers-status.is-error { color: var(--sg-primary-ink); }
.sg-papers-list {
display: grid;
gap: 16px;
margin-top: 18px;
}
.sg-papers-card {
display: grid;
gap: 10px;
padding: 18px 22px;
border: 1px solid var(--sg-card-line);
border-radius: var(--sg-radius-card);
background: var(--sg-card-paper);
transition: box-shadow var(--sg-transition), transform var(--sg-transition);
}
.sg-papers-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(38, 24, 21, 0.08);
}
.sg-papers-meta {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px 12px;
margin: 0;
color: var(--sg-subtle);
font-size: 12.5px;
}
.sg-papers-source {
padding: 2px 10px;
border-radius: 999px;
background: var(--sg-primary-soft);
color: var(--sg-primary-ink);
font-weight: 600;
font-size: 11.5px;
letter-spacing: .03em;
}
.sg-papers-cited { color: var(--sg-primary-ink); }
.sg-papers-title {
margin: 0;
font-family: var(--sg-font-display);
font-size: 19px;
font-weight: 400;
line-height: 1.5;
}
.sg-papers-title a {
color: var(--sg-ink);
text-decoration: none;
}
.sg-papers-card:hover .sg-papers-title a { color: var(--sg-primary-ink); }
.sg-papers-authors {
margin: 0;
color: var(--sg-muted);
font-size: 13px;
line-height: 1.6;
}
.sg-papers-abstract {
border-top: 1px dashed var(--sg-line);
padding-top: 8px;
}
.sg-papers-abstract summary {
color: var(--sg-subtle);
font-size: 13px;
cursor: pointer;
user-select: none;
}
.sg-papers-abstract p {
margin: 8px 0 0;
color: var(--sg-copy-ink);
font-size: 13.5px;
line-height: 1.75;
}
.sg-papers-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.sg-papers-actions .sg-pill { font-size: 13px; }
.sg-papers-attribution {
margin: 26px 0 0;
padding-top: 14px;
border-top: 1px solid var(--sg-card-line);
color: var(--sg-subtle);
font-size: 12.5px;
}
@media (max-width: 900px) {
.sg-papers-head { grid-template-columns: 1fr; gap: 28px; }
.sg-papers-aside { border-left: none; border-top: 2px solid var(--sg-line); padding: 18px 0 0; }
}
/* papers.html 左栏容器：默认块流即可，补类定义保持命名完整 */
.sg-papers-intro { display: grid; align-content: start; }
/* ---------- 论文检索 ⇄ 议题联动 ---------- */
/* 研究方向入口：与研究页/议题页共用同一套词表，点选即按该方向英文检索式查询 */
.sg-papers-dirs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 16px;
}
.sg-papers-dir {
padding: 6px 14px;
border: 1px solid var(--sg-line);
border-radius: 999px;
background: transparent;
color: var(--sg-subtle);
font-family: var(--sg-font-sans);
font-size: 13px;
cursor: pointer;
transition: border-color var(--sg-transition), color var(--sg-transition), background var(--sg-transition);
}
.sg-papers-dir:hover,
.sg-papers-dir.is-active {
border-color: var(--sg-primary);
color: var(--sg-primary-ink);
background: var(--sg-accent-soft);
}
.sg-papers-dir.is-active { font-weight: 600; }
/* 右侧相关议题面板：选择方向或检索式命中时出现 */
.sg-papers-issues {
margin-top: 20px;
padding-top: 16px;
border-top: 1px dashed var(--sg-line);
}
.sg-papers-issues-note {
margin: 0 0 10px;
color: var(--sg-subtle);
font-size: 12px;
line-height: 1.6;
}
.sg-papers-issues-list {
display: grid;
gap: 10px;
}
.sg-papers-issue {
display: grid;
gap: 4px;
padding: 10px 12px;
border: 1px solid var(--sg-card-line);
border-radius: 10px;
background: var(--sg-card-paper);
color: inherit;
text-decoration: none;
transition: border-color var(--sg-transition), box-shadow var(--sg-transition);
}
.sg-papers-issue:hover {
border-color: var(--sg-primary);
box-shadow: 0 6px 16px rgba(38, 24, 21, 0.07);
}
.sg-papers-issue-top {
color: var(--sg-primary-ink);
font-size: 11.5px;
font-weight: 600;
letter-spacing: .03em;
}
.sg-papers-issue strong {
font-family: var(--sg-font-display);
font-size: 15px;
font-weight: 500;
line-height: 1.5;
}
.sg-papers-issue-brief {
color: var(--sg-muted);
font-size: 12.5px;
line-height: 1.6;
}
/* issues.html 的论文检索入口（计数行下方） */
.sg-issue-papers {
margin: 2px 0 0;
font-size: 13px;
}
.sg-issue-papers a {
color: var(--sg-primary-ink);
text-decoration: none;
border-bottom: 1px solid var(--sg-line);
transition: border-color var(--sg-transition);
}
.sg-issue-papers a:hover { border-color: var(--sg-primary); }
/* 方向按钮的键盘焦点：站内其它可聚焦元素统一 2px 可访问朱砂描边，这里原来只吃
浏览器默认焦点环，与全站不一致 */
.sg-papers-dir:focus-visible {
outline: 2px solid var(--sg-primary-accessible);
outline-offset: 2px;
}
.sg-papers-dir[disabled] { opacity: 0.45; cursor: default; }
/* 相关议题面板里的预告条：不可点。与 issues.html 上的规则一致——没有详情页、
也无法报名的条目不做成链接，免得「点进去能看详情」变成一句空话。 */
.sg-papers-issue.is-soon { cursor: default; }
.sg-papers-issue.is-soon:hover { border-color: var(--sg-card-line); box-shadow: none; }
.sg-papers-issue.is-soon .sg-papers-issue-top { color: var(--sg-muted); }
.sg-papers-issue-soon {
color: var(--sg-subtle);
font-size: 11.5px;
letter-spacing: .02em;
}
/* 检索骨架卡：只在冷检索时出现（papers-search.js 延迟 200ms 再画，命中缓存的
约 50ms 响应根本等不到它），填住结果区那两秒多的空白。 */
.sg-papers-skeleton {
display: grid;
gap: 10px;
padding: 22px 24px;
border: 1px solid var(--sg-card-line);
border-radius: var(--sg-radius-sm);
background: var(--sg-card-paper);
}
.sg-skel-line {
display: block;
height: 12px;
border-radius: 6px;
/* 三段渐变做扫光：只动 background-position，不触发布局 */
background: linear-gradient(90deg, rgba(38, 24, 21, 0.06) 25%, rgba(38, 24, 21, 0.11) 37%, rgba(38, 24, 21, 0.06) 63%);
background-size: 400% 100%;
animation: sg-skel-sweep 1.4s ease-in-out infinite;
}
.sg-skel-line.is-meta { width: 42%; height: 10px; }
.sg-skel-line.is-title { width: 92%; height: 18px; }
.sg-skel-line.is-title.short { width: 64%; }
.sg-skel-line.is-authors { width: 34%; height: 10px; }
@keyframes sg-skel-sweep {
0% { background-position: 100% 0; }
100% { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
.sg-skel-line { animation: none; }
}
/* 议题详情页的内联文献块：拿到结果才由 issue-papers.js 取消 hidden，
所以这里不需要空态样式——空态就是整块不存在。 */
.sg-related-papers .sg-pill { margin-top: 24px; }
.sg-paper-mini-list {
display: grid;
gap: 14px;
max-width: 52em;
margin-top: 28px;
}
.sg-paper-mini {
display: grid;
gap: 6px;
min-width: 0;
padding: 16px 18px;
border: 1px solid var(--sg-card-line);
border-left: 3px solid var(--sg-line);
border-radius: var(--sg-radius-sm);
background: var(--sg-card-paper);
}
.sg-paper-mini-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 12px;
margin: 0;
color: var(--sg-muted);
font-size: 12px;
}
.sg-paper-mini-title {
margin: 0;
font-family: var(--sg-font-display);
font-size: 16px;
font-weight: 500;
line-height: 1.55;
overflow-wrap: anywhere; /* 英文长标题在窄屏要能断 */
}
.sg-paper-mini-title a {
color: var(--sg-ink);
text-decoration: none;
border-bottom: 1px solid var(--sg-line);
transition: color var(--sg-transition), border-color var(--sg-transition);
}
.sg-paper-mini-title a:hover { color: var(--sg-primary-ink); border-color: var(--sg-primary); }
.sg-paper-mini-authors { margin: 0; color: var(--sg-subtle); font-size: 12.5px; line-height: 1.6; }
/* ---------- 旧内核降级：不支持 flex gap 的浏览器（部分微信 WebView / 旧 Safari / 旧 Chromium）
gap 失效会让行内元素全部贴在一起（如「智能体 Agent界面与前端 UI/UX…」连排）。
@supports 判断精确到 gap 本身，现代浏览器不受影响。 ---------- */
@supports not (gap: 8px) {
.sg-papers-dirs,
.sg-papers-chips { gap: normal; }
.sg-papers-dir,
.sg-papers-chip { margin: 0 8px 8px 0; }
.sg-papers-searchform { gap: normal; }
.sg-papers-searchform input { margin-right: 10px; }
.sg-papers-actions { gap: normal; }
.sg-papers-actions > * { margin: 0 8px 8px 0; }
.sg-papers-meta { gap: normal; }
.sg-papers-meta > * { margin: 0 12px 8px 0; }
.sg-papers-tabs { gap: normal; }
.sg-papers-tab { margin-right: 6px; }
/* 议题页领域筛选（≤760px 时是 flex 行） */
.sg-filter-options { gap: normal; }
.sg-filter-options .sg-check { margin: 0 8px 8px 0; }
}
/* ================= 个人中心（profile.html）================= */
/* 双栏「身份 + 产出」：左栏常驻署名、统计与账号状态（宽屏 sticky），
右栏是我的议题与投稿两组内容。整页收窄到 1240px——1344px 下双栏会把
左栏推得离正文太远，统计与内容失去关联感。 */
.sg-profile-page { --sg-shell: 1240px; }
/* 个人中心是「看自己的东西」的页面，不是宣读页：页头到内容之间的
56 + 40px 标准留白在这里显得空，收紧到 24px，让身份卡尽早进入视野。 */
.sg-profile-page .sg-page-head { padding-bottom: 24px; }
.sg-profile-page .sg-block { padding-top: 0; }
/* 空间背景图：整幅横幅，点任意处即可换图。
宽度用 100% 而不是 100vw——竖向滚动条存在时 100vw 会造成横向溢出。
顶部留 96px 让开悬浮导航（导航是 absolute，min-height 72px + 20px 上边距）。 */
.sg-profile-cover {
position: relative;
width: 100%;
height: clamp(190px, 21vw, 300px);
margin: 96px 0 0;
overflow: hidden;
/* 没设背景图时的兜底：纸色斜向渐变，不是空白也不是占位图 */
background:
linear-gradient(122deg, var(--sg-primary-soft) 0%, var(--sg-accent-soft) 46%, var(--sg-stage) 100%);
}
.sg-frame .sg-profile-cover img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
}
/* 底缘向纸色收：身份卡压上来时不会出现一条硬边 */
.sg-profile-cover::after {
content: "";
position: absolute;
inset: auto 0 0;
height: 46%;
background: linear-gradient(rgba(255, 253, 247, 0), var(--sg-stage));
pointer-events: none;
}
/* 换图入口常驻可见（不做纯 hover 才出现——那样没人知道能换），
hover / 键盘聚焦时加深。整块 label 包着 file input。 */
.sg-frame .sg-profile-cover-change {
position: absolute;
z-index: 2;
right: clamp(16px, 4vw, 40px);
top: 20px;
padding: 7px 15px;
border-radius: var(--sg-radius-pill);
background: rgba(35, 36, 37, 0.55);
color: #fff;
font-size: 12.5px;
letter-spacing: .02em;
cursor: pointer;
transition: background .18s ease;
}
.sg-frame .sg-profile-cover-change:hover,
.sg-frame .sg-profile-cover-change:focus-within { background: rgba(35, 36, 37, 0.82); }
.sg-profile-cover-status {
position: absolute;
z-index: 2;
left: clamp(16px, 4vw, 40px);
top: 20px;
margin: 0;
padding: 6px 14px;
border-radius: var(--sg-radius-pill);
background: var(--sg-paper);
font-size: 12.5px;
}
.sg-profile-cover-status:empty { display: none; }
/* 身份卡压到背景图上，是这类个人空间页的常见关系 */
.sg-profile-page .sg-profile-layout {
position: relative;
z-index: 1;
margin-top: clamp(-76px, -5vw, -40px);
}
@media (prefers-reduced-motion: reduce) {
.sg-frame .sg-profile-cover-change { transition: none; }
}
.sg-profile-guest {
max-width: 560px;
padding: 40px 0 16px;
}
/* 未登录时背景图整块不出现，页面第一个可见元素就是这块引导——
自己让开悬浮导航，否则会被导航压住。 */
.sg-profile-page .sg-profile-guest { padding-top: 176px; }
.sg-profile-guest h2 { margin: 0 0 8px; font-weight: 400; }
.sg-profile-guest p { color: var(--sg-subtle); line-height: 1.8; }
.sg-profile-guest .sg-pill { margin-top: 16px; }
.sg-profile-layout {
display: grid;
grid-template-columns: 300px minmax(0, 1fr);
gap: 48px;
align-items: start;
padding-top: 8px;
}
.sg-profile-aside {
display: grid;
gap: 18px;
position: sticky;
top: 96px;
}
/* 身份卡 */
.sg-profile-id {
padding: 26px 24px 24px;
border: 1px solid var(--sg-line);
border-radius: var(--sg-radius-card);
background: var(--sg-paper);
text-align: center;
}
/* 头像本身就是上传入口：hover / 键盘聚焦时压出一层「更换头像」蒙版。
带 .sg-frame 前缀是因为组件库有 `.sg-frame img { width: 100% }`，
不提权重的话内部 img 的尺寸会被它接管。 */
.sg-frame .sg-profile-avatar {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 112px;
height: 112px;
margin: 0 auto 16px;
border: 1px solid var(--sg-card-line);
border-radius: 50%;
overflow: hidden;
background: var(--sg-stage);
cursor: pointer;
}
.sg-frame .sg-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sg-profile-avatar-initial {
font-family: var(--sg-font-display);
font-size: 42px;
color: var(--sg-primary-ink);
}
.sg-profile-avatar-edit {
position: absolute;
inset: auto 0 0;
padding: 6px 0;
background: rgba(35, 36, 37, 0.72);
color: #fff;
font-size: 11.5px;
letter-spacing: .04em;
opacity: 0;
transition: opacity .18s ease;
}
.sg-frame .sg-profile-avatar:hover .sg-profile-avatar-edit,
.sg-frame .sg-profile-avatar:focus-within .sg-profile-avatar-edit { opacity: 1; }
.sg-profile-name {
margin: 0 0 4px;
font-family: var(--sg-font-display);
font-size: 21px;
font-weight: 700;
line-height: 1.35;
word-break: break-word;
}
.sg-profile-mail { margin: 0 0 12px; color: var(--sg-muted); font-size: 12.5px; word-break: break-all; }
.sg-profile-chips {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 6px;
margin: 0 0 16px;
}
.sg-profile-chip {
padding: 3px 10px;
border-radius: var(--sg-radius-pill);
background: var(--sg-primary-soft);
color: var(--sg-primary-ink);
font-size: 11.5px;
font-weight: 650;
}
.sg-profile-chip.is-quiet { background: var(--sg-stage); color: var(--sg-muted); }
/* 统计只放站上真实存在的两个数：发起议题数、投稿数。不做下载 / 关注者这类
我们没有的指标，宁可少两个数字也不摆看不出来源的计数。 */
.sg-profile-stats {
display: grid;
grid-template-columns: 1fr 1fr;
margin: 0 0 18px;
padding: 14px 0;
border-top: 1px solid var(--sg-card-line);
border-bottom: 1px solid var(--sg-card-line);
}
.sg-profile-stats > div + div { border-left: 1px solid var(--sg-card-line); }
.sg-profile-stats dd {
margin: 0 0 2px;
font-family: var(--sg-font-display);
font-size: 22px;
color: var(--sg-primary-ink);
line-height: 1;
}
.sg-profile-stats dt { color: var(--sg-muted); font-size: 12px; }
.sg-frame .sg-profile-edit-btn { width: 100%; justify-content: center; }
.sg-profile-bio {
margin: 16px 0 0;
color: var(--sg-copy-ink);
font-size: 13.5px;
line-height: 1.8;
text-align: left;
}
.sg-profile-bio.is-empty { color: var(--sg-subtle); }
.sg-profile-avatar-status { margin: 12px 0 0; }
.sg-profile-avatar-status:empty { display: none; }
/* 左栏附卡：账号信息 / 可以做什么 */
.sg-profile-side {
padding: 20px 22px;
border: 1px solid var(--sg-line);
border-radius: var(--sg-radius-card);
background: var(--sg-paper);
}
.sg-profile-side h3 {
margin: 0 0 12px;
color: var(--sg-muted);
font-size: 11.5px;
font-weight: 650;
letter-spacing: .1em;
}
.sg-profile-side dl {
display: grid;
grid-template-columns: auto 1fr;
gap: 8px 14px;
margin: 0;
font-size: 13px;
}
.sg-profile-side dt { color: var(--sg-muted); }
.sg-profile-side dd { margin: 0; text-align: right; }
.sg-frame .sg-profile-do {
display: grid;
gap: 3px;
padding: 12px 0;
border-top: 1px solid var(--sg-card-line);
text-decoration: none;
}
.sg-profile-side .sg-profile-do:first-of-type { padding-top: 0; border-top: 0; }
.sg-profile-do strong { color: var(--sg-ink); font-size: 14px; font-weight: 650; }
.sg-profile-do span { color: var(--sg-subtle); font-size: 12.5px; line-height: 1.6; }
.sg-frame .sg-profile-do:hover strong,
.sg-frame .sg-profile-do:focus-visible strong { color: var(--sg-primary-ink); }
/* 右栏：计数筛选条 */
.sg-profile-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 22px;
}
.sg-profile-tabs button {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 16px;
border: 1px solid transparent;
border-radius: var(--sg-radius-pill);
background: var(--sg-stage);
color: var(--sg-muted);
font-family: inherit;
font-size: 13.5px;
font-weight: 650;
cursor: pointer;
}
.sg-profile-tabs button em {
padding: 0 6px;
border-radius: var(--sg-radius-pill);
background: rgba(35, 36, 37, 0.08);
font-style: normal;
font-size: 12px;
}
.sg-profile-tabs button.is-active { background: var(--sg-ink); color: var(--sg-paper); }
/* 有未读时把消息胶囊的计数染成朱砂：胶囊本身显示的是总条数（与其它胶囊同义），
「有没有新的」由颜色承担，不必把两种语义塞进同一个数字。 */
.sg-profile-tabs button em.has-unread { background: var(--sg-primary-accessible); color: #fff; }
.sg-profile-tabs button.is-active em.has-unread { background: var(--sg-primary-on-dark); color: var(--sg-ink); }
.sg-profile-tabs button.is-active em { background: rgba(255, 255, 255, 0.18); }
.sg-profile-tabs button:focus-visible { outline: 2px solid var(--sg-primary-accessible); outline-offset: 2px; }
/* 右栏：内容分组卡 */
.sg-profile-groups { display: grid; gap: 22px; }
.sg-profile-group {
border: 1px solid var(--sg-line);
border-radius: var(--sg-radius-card);
background: var(--sg-paper);
overflow: hidden;
}
.sg-profile-group > header {
display: flex;
align-items: center;
gap: 10px;
padding: 16px 22px;
border-bottom: 1px solid var(--sg-card-line);
}
.sg-profile-group h3 { margin: 0; font-size: 15px; font-weight: 650; }
.sg-profile-group-glyph {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 8px;
background: var(--sg-primary-soft);
color: var(--sg-primary-ink);
font-size: 13px;
font-weight: 700;
}
.sg-profile-group-glyph.is-alt { background: var(--sg-accent-soft); color: #20604a; }
.sg-profile-group-glyph.is-msg { background: #f3ecd2; color: #7a5b1e; }
.sg-profile-group-count {
padding: 1px 8px;
border-radius: var(--sg-radius-pill);
background: var(--sg-stage);
color: var(--sg-muted);
font-size: 12px;
font-weight: 650;
}
/* 同一个类既用在 （投一篇新稿 →）也用在