）。此前它只在页面最底部孤零零地出现一次，里面就一个裸 @商务账号，
用户根本看不出那是 Telegram。现在它被放进「商务合作 / 内容合作」卡片里，
和一句「Telegram ✈️」并排 —— 所以它必须能参与同一行的排版。
改成 inline-flex 而不是去动插件：账号值仍然只有 edgua_site_settings 一个
来源，短代码一个字符没碰（§三十四 的 Theme/Plugin 边界）。
-------------------------------------------------------------------------- */
.ed-page-contact {
display: inline-flex;
align-items: center;
}
.ed-page-contact a {
font-weight: 600;
color: var(--ed-gold);
overflow-wrap: anywhere;
}
.ed-page-contact a:hover {
text-decoration: underline;
}
.ed-page-block__contact {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 8px;
margin: 12px 0 0;
font-size: 14.5px;
line-height: 1.7;
}
.ed-page-block__contact-label {
font-weight: 700;
color: var(--ed-text);
flex-shrink: 0;
}
.ed-page-placeholder {
border: 1px dashed var(--ed-border);
border-radius: var(--ed-radius-md);
padding: 14px 16px;
margin: 0 0 18px;
font-size: 14px;
color: var(--ed-text-faint);
background: var(--ed-bg-soft);
}
.ed-page-meta {
color: var(--ed-text-faint);
font-size: 12.5px;
margin-top: 32px;
padding-top: 16px;
border-top: 1px solid var(--ed-border);
}
.ed-single__nav {
display: grid;
/* FRONTEND V2-I1：基础是单列。过去基础规则就是 1fr 1fr，手机上两个
长标题各占半屏，只能靠 ellipsis 截断，谁都读不出下一篇是什么。
两列从 640px 起（见 Responsive 段）。 */
grid-template-columns: 1fr;
gap: 12px;
margin: 28px 0;
}
.ed-single__nav-item {
border: 1px solid var(--ed-border);
border-radius: var(--ed-radius-md);
padding: 12px 14px;
min-width: 0;
}
.ed-single__nav-item.is-next {
text-align: right;
}
.ed-single__nav-label {
font-size: 11px;
color: var(--ed-text-faint);
margin-bottom: 4px;
}
.ed-single__nav-title {
font-size: 13px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ed-single__nav-item:hover .ed-single__nav-title {
color: var(--ed-gold);
}
.ed-related {
margin-top: 36px;
}
/* ==========================================================================
Search
========================================================================== */
.ed-search-page {
padding: 28px 0 60px;
}
.ed-search-page__head {
margin-bottom: 24px;
}
.ed-search-page__title {
font-size: 22px;
font-weight: 700;
}
.ed-search-page__title mark {
background: none;
color: var(--ed-gold);
}
/* ==========================================================================
404
========================================================================== */
.ed-404 {
padding: 60px 0;
text-align: center;
}
.ed-404__code {
font-size: 72px;
font-weight: 800;
color: var(--ed-gold);
line-height: 1;
margin-bottom: 8px;
}
.ed-404__title {
font-size: 20px;
margin-bottom: 8px;
}
.ed-404__desc {
color: var(--ed-text-muted);
margin-bottom: 24px;
}
.ed-404__search {
max-width: 480px;
margin: 0 auto 32px;
}
.ed-404__actions {
display: flex;
justify-content: center;
gap: 12px;
margin-bottom: 40px;
flex-wrap: wrap;
}
.ed-404__hot {
text-align: left;
max-width: 800px;
margin: 0 auto;
}
/* ==========================================================================
Footer
========================================================================== */
.ed-footer {
background: var(--ed-bg-soft);
border-top: 1px solid var(--ed-border);
padding: 40px 0 24px;
margin-top: 40px;
}
/* --------------------------------------------------------------------------
FRONTEND_TRUST_FOOTER_CATEGORY_VISUAL_CLEANUP §十三 —— 页脚字重与对比度。
Owner 的原话是「底部信息栏这些字体都搞成加粗加黑」。照字面做成
font-weight: 900 是错的：一整块全是最粗，层级反而消失，读起来是一堵墙。
Owner 真正在抱怨的是**看不清** —— 之前整个页脚只有品牌那三行用了
--ed-text，其余全部是 --ed-text-muted / --ed-text-faint 的 13px 常规字重，
在 Light 的 #efede8 暖白底上是一片糊掉的浅灰。
所以这里做的是分档，不是一刀切：
栏目标题 14px / 700 / --ed-text 最重，四列的锚点
官方联系 label 13px / 700 / --ed-text 与账号同一行，靠字重分开
官方账号 13.5px / 600 / --ed-text 半粗，深色，可点
普通链接 13.5px / 500 / --ed-text 从 muted 提到正文色
品牌 20px / 700 仍然最醒目
底栏 12.5px / --ed-text-muted 稍弱但仍清晰（原来是 faint）
两个主题共用这一套规则，颜色全部走 token，所以 Dark 自动跟着换值。
-------------------------------------------------------------------------- */
.ed-footer__top {
display: grid;
grid-template-columns: 1fr;
gap: 28px;
margin-bottom: 28px;
}
.ed-footer__brand-en {
font-size: 20px;
font-weight: 700;
}
.ed-footer__brand-cn {
color: var(--ed-gold);
font-size: 12px;
margin: 4px 0 10px;
}
.ed-footer__domain {
color: var(--ed-text-muted);
font-size: 12px;
font-weight: 600;
}
/* 品牌列此前只有三行短字（最宽约 95px），在桌面四列里必然留下一整片死白。
补的这一句不是填充物：它就是 /terms/「内容性质」那一条的一句话版本，
说的是这个站是什么。它让第一列有了和其他三列相当的内容体量。 */
.ed-footer__brand-desc {
margin: 12px 0 0;
font-size: 13px;
line-height: 1.75;
color: var(--ed-text-muted);
max-width: 30em;
}
.ed-footer__col-title {
font-size: 14px;
color: var(--ed-text);
margin-bottom: 14px;
font-weight: 700;
}
.ed-footer__links {
display: flex;
flex-direction: column;
gap: 10px;
}
.ed-footer__links a {
font-size: 13.5px;
font-weight: 500;
color: var(--ed-text);
}
.ed-footer__links a:hover {
color: var(--ed-gold);
}
/* --------------------------------------------------------------------------
官方信息列（Owner 追加裁定 §一 / §二 / §三）。
上一版这里有一整套 .ed-footer__contact* ：label 一段、图标一段、@handle
一段，三段拼在一行。Owner 判定「仍然信息过密」，并裁定不再视觉显示账号 ——
于是这一列变成了纯文字链接列，和「关于 09GUA」「安全与规则」完全同构，
那套规则整块删掉（不是留着不用：留着的死规则下一个人读起来会以为还在生效）。
共用 .ed-footer__links 之后自动拿到统一的行高、字重与列间距，也不会再因为
@商务账号 与 @官方频道 长度差一倍而撑动列宽（§三 最后一条）。
这里只补一条外链的可达性：键盘 focus 必须看得见。
-------------------------------------------------------------------------- */
.ed-footer__links a:focus-visible {
outline: 2px solid var(--ed-gold);
outline-offset: 3px;
border-radius: 2px;
}
.ed-footer__bottom {
border-top: 1px solid var(--ed-border);
padding-top: 18px;
display: flex;
flex-direction: column;
gap: 10px;
font-size: 12.5px;
color: var(--ed-text-muted);
}
.ed-footer__age-gate {
display: inline-block;
padding: 3px 8px;
border: 1px solid var(--ed-border);
border-radius: var(--ed-radius-sm);
color: var(--ed-text-muted);
width: fit-content;
}
/* ==========================================================================
Demo badge
========================================================================== */
.ed-demo-badge {
display: inline-block;
padding: 2px 7px;
border-radius: var(--ed-radius-sm);
background: var(--ed-danger-bg);
color: var(--ed-danger);
font-size: 11px;
font-weight: 700;
margin-right: 6px;
vertical-align: middle;
}
.ed-badge-submission {
display: inline-block;
padding: 2px 7px;
border-radius: var(--ed-radius-sm);
background: var(--ed-gold-bg);
color: var(--ed-gold);
font-size: 11px;
font-weight: 700;
margin-right: 6px;
vertical-align: middle;
}
/* ==========================================================================
FRONTEND V2-I1 — A/B grids, article layout, unified cards, comments
========================================================================== */
/* --------------------------------------------------------------------------
A/B 网格（§三 D-7 / §十）
.ed-grid--article A 类文章流：Mobile 1 / Tablet 2 / Desktop 3
.ed-grid--video B 类视频资源：Mobile 2 / Tablet 2 / Desktop 4
两条基线都写在这里（mobile-first），断点里只写升列。B 类在手机上就是
2 列 —— 375px 下每卡约 159px，16:9 缩略图足以辨认画面，标题 15px 两行
放得下 18–20 个汉字；1 列会让每屏只剩约 2 个视频，与「视频资源网格」
的产品定位不符。A 类反过来：文章要读，Mobile 保持单列大图。
-------------------------------------------------------------------------- */
.ed-grid--article {
grid-template-columns: 1fr;
}
.ed-grid--video {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
/* B 类卡片在手机上更窄，标题给到 15px 保证两行可读（Discovery §17.3
记的「移动端 14–15px 中文偏小」）。 */
.ed-grid--video .ed-card__title {
font-size: 15px;
line-height: 1.45;
}
/* --------------------------------------------------------------------------
CATEGORY_TOP4_REAL_VIEWS §九 —— 电子书封面网格（第三种版式）
mobile-first，断点里只写升列：
320–767 2 列 ← 这条基线
768–1023 3 列
1024–1279 4 列
≥1280 5 列
手机就是 2 列而不是 1 列：Owner 的原话是「普通手机继续一排一本」属于
禁止项。320px 下容器可用 280px，两列每张 134px，一张 16:9 封面高 75px，
书名 14px 两行放得下 16–18 个汉字。
没有任何 min-width / 固定列宽 / overflow-x：列宽全部是 1fr，所以任何
视口下都不会产生横向滚动（Owner §九 禁止项第 2 条）。
-------------------------------------------------------------------------- */
.ed-grid--ebook {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
/* OWNER_FRONTEND_CORRECTION §七.A.7 —— 重复的小说卡片视觉 CSS 已删除。
这里曾经覆写 .ed-grid--ebook 下的 .ed-card__title 字号、.ed-card__body
内边距与 .ed-card__meta 字号。Owner 要的是「真正复用首页普通卡片组件」，
而那三条覆写恰恰是「看起来一样、实际两套」的那一半。删掉之后书卡与
视频卡用的是**同一组**卡片视觉规则，一个字节都不差。
只保留下面这一条语义差异：书卡的 meta 是「日期 + 真实阅读量」，两项都可能
被 2 列窄卡挤到换行。nowrap 让它们留在同一行（Owner 上一轮 §十 的要求），
不改字号、不改内边距 —— 它不是视觉分叉，是一条防换行的约束。 */
.ed-grid--ebook .ed-card__meta {
flex-wrap: nowrap;
white-space: nowrap;
}
/* OWNER_EBOOK_VISUAL §六.1「标题最多两行，日期固定在卡片底部，卡片整体高度
一致」**不需要**为小说网格新写规则 —— 站上既有的卡片组件已经做到了：
.ed-card 是 height:100% 的 flex 列（整行等高）、.ed-card__title 已经
clamp 到 2 行、.ed-card__meta 是 margin-top:auto（永远贴卡片底）。
1440 实测同一排五张卡的 meta 顶边全部落在 y=727，书名一行还是两行都一样。
这里刻意**不加**一条只作用于小说网格的标题 min-height 覆写：那会让书卡
与视频卡重新分叉，正是 Owner 上一轮 §七.A.7 裁掉的那半（既有断言 S-10
钉着它）。两条 Owner 裁定在这里没有冲突 —— 复用既有机制两条都满足。 */
/* 真实阅读量胶囊。与热度胶囊 .ed-metric 共用同一套排版，只是图标不同 ——
两者在同一张卡上不会同时出现（视频卡只有热度，电子书卡只有阅读量）。 */
.ed-metric--reads {
display: inline-flex;
align-items: center;
gap: 4px;
}
/* --------------------------------------------------------------------------
A-CLASS HORIZONTAL FEED（FRONTEND OWNER UX FINAL CLOSURE / Owner Req. A）
今日吃瓜 / 热门大瓜 / 情色小说 / Ed戒赌吧 四个 surface 共用这一套。
.ed-grid--article 没有被删 —— 搜索结果页仍然用它（§三十一：Search 版式
保持现状），所以那条契约还在，只是 A 类栏目页不再走它。
形态（§九 方案 B）：宽横图 + 信息区形成一整条。
Mobile 是「封面满宽 + 信息在下」的单列；768 起变成「左封面 + 右信息」
的横条。两者都是**单列纵向流**，任何断点上都不会出现第二列 ——
这正是 Owner 否决三列小卡网格时要的东西。
为什么封面用固定比例的定宽块而不是满宽大图：container 是 1200px，
一张真正满宽的 16:9 封面高 675px，一屏放不下两条。§九 明确要求
「不造成巨大图片无限拉长」。
-------------------------------------------------------------------------- */
.ed-feed {
display: grid;
grid-template-columns: 1fr;
gap: 0;
}
.ed-feed__item {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
padding: 18px 0;
border-bottom: 1px solid var(--ed-border-soft);
align-items: start;
}
.ed-feed__item:first-child {
padding-top: 4px;
}
.ed-feed__item:last-child {
border-bottom: none;
}
.ed-feed__thumb {
position: relative;
aspect-ratio: 16 / 9;
border-radius: var(--ed-radius-md);
overflow: hidden;
background: var(--ed-bg-soft);
border: 1px solid var(--ed-border);
}
.ed-feed__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.25s ease;
}
.ed-feed__item:hover .ed-feed__thumb {
border-color: var(--ed-gold-soft);
}
.ed-feed__item:hover .ed-feed__thumb img {
transform: scale(1.02);
}
.ed-feed__body {
/* min-width: 0 是网格子项能收缩的前提。没有它，长标题会把这一列
撑出容器 —— 与抽屉搜索框那笔债同一个成因。 */
min-width: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.ed-feed__top {
display: flex;
align-items: center;
gap: 8px;
min-height: 0;
}
.ed-feed__cat {
display: inline-block;
padding: 3px 9px;
border-radius: var(--ed-radius-sm);
background: var(--ed-gold-bg);
color: var(--ed-gold);
font-size: 12px;
font-weight: 600;
line-height: 1.5;
}
.ed-feed__title {
margin: 0;
font-size: 17px;
font-weight: 600;
line-height: 1.5;
color: var(--ed-text);
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.ed-feed__item:hover .ed-feed__title {
color: var(--ed-gold);
}
.ed-feed__excerpt {
font-size: 14px;
color: var(--ed-text-muted);
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.ed-feed__meta {
margin-top: auto;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
font-size: 13px;
color: var(--ed-text-faint);
}
/* --------------------------------------------------------------------------
单文章两栏布局（§十一）
Mobile 单列，DOM 顺序即阅读顺序；Desktop 左正文 + 右相关视频侧栏。
侧栏没有内容时 single.php 根本不渲染