/* ---------------------------------------------------------------- tokens --
   Palette and feel follow the approved reference design: light and airy, one
   fresh green accent, near-black CTAs, a soft green hero gradient, rounded
   cards. Dark mode follows the OS, or :root[data-theme="dark"]. */
/* 2026-11-04 视觉改版:月夜江畔。深底 + 冷白字 + 杏花粉强调色。
   旧版是浅色绿调;这里只换 token,组件规则一条没动 —— 所以弹窗 / 页脚 / 列表
   全部跟着变,不需要逐个重写。 */
/* 2026-11-04 方案 B:浅色主题(深字浅底),配"春日杏花湖岸"那张亮背景。
   对比度(在 --bg #fdfaf4 上):正文 ≈ 16:1,次要文字 ≈ 8:1,强调色 ≈ 6.5:1 ——
   都远超 WCAG AA 的 4.5:1。深色主题那套(纯白字 + 暗纱)在亮照片上只有 1.2:1,
   所以不是"调个颜色",是整套反过来。 */
:root {
  --bg: #fdfaf4; --bg2: rgba(255,255,255,.55); --text: #1b1a17; --muted: #4a463f;
  --line: rgba(27,26,23,.16);
  --accent: #b03a6a; --accent2: rgba(176,58,106,.12); --glow: rgba(176,58,106,.28);
  --btn: #1b1a17; --btntext: #ffffff; --hero1: transparent; --hero2: transparent;
  --ok: #0f7a4f; --err: #b3261e; --radius: 18px; --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(27,26,23,.06), 0 18px 44px -24px rgba(27,26,23,.28);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { height: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--bg); color: var(--text); line-height: 1.65;
  font-family: Inter, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* 2026-11-04:卡片透明之后,文字直接压在照片上 —— 这层阴影是**可读性的唯一保险**。
     照片亮处(月光 / 江面)会把白字吃掉,阴影给每个字一圈暗边,对比度就稳了。
     弹窗里要关掉(见 `.modal`),那里是实底,不需要。 */
  /* 2026-11-04 用户:"字体对比度不行看不清" —— 白晕阴影是元凶:深字 + 白晕 = 发虚。
     现在文字都坐在**半透明磨砂面板**上(见 `.glass`),不需要任何阴影,字才锐。 */
  text-shadow: none; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { letter-spacing: -.02em; }
sup { font-size: .5em; font-weight: 600; vertical-align: super; line-height: 0; margin-left: 1px; }

/* ------------------------------------------------------------- top bar -- */
header { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); }
.bar { max-width: 1240px; margin: 0 auto; height: 64px; display: flex; align-items: center; gap: 8px; padding: 0 24px; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 20px; margin-right: 20px; white-space: nowrap; }
.brand svg { width: 30px; height: 30px; flex: none; }
.tabs { display: flex; align-items: center; gap: 4px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { border: 0; background: none; font: inherit; font-size: 15px; font-weight: 500; color: var(--text);
  padding: 8px 14px; border-radius: 8px; white-space: nowrap; cursor: pointer; transition: .18s; }
.tab:hover { background: var(--bg2); }
.tab.active { color: var(--accent); font-weight: 600; }
.right { display: flex; align-items: center; gap: 8px; }
/* 2026-11-03 用户:"右上角的『你好,demoA』中间没有空格,排版太丑了" —— 对,那个逗号是**半角**的,
   两侧天然没有间距,于是问候和名字挤成一团。这里**照 home.html 的 `.me` 抄**(站内顶栏那句问候的
   规范样式;两页的 `.tab` / `.btn` 本来就逐字相同,是同一把尺子):问候与昵称是**两个节点**,
   由 `gap: 8px` 拉开,而不是塞进同一个字符串里。 */
.user-chip { display: inline-flex; align-items: baseline; gap: 8px; color: var(--accent);
  font-size: 16px; font-weight: 600; white-space: nowrap; }
/* 上面写死了 `display` ⇒ 作者样式会压过 UA 给 `[hidden]` 的 `display:none`,所以这一条必须自己补,
   否则未Sign in时它也杵在右上角。 */
.user-chip[hidden] { display: none; }
/* 昵称保持深色(`--accent` 是浅绿,16px 的整串都用它对比度不够;问候语有颜色就够"亮"了)。
   它同时是个**链接**(点进自己的空间,新标签页)⇒ 悬停给个反馈。 */
.user-chip .me-name { color: var(--text); text-decoration: none; }
.user-chip .me-name:hover { color: var(--accent); text-decoration: underline; }

/* ------------------------------------------------------------- buttons -- */
.btn { border: 1px solid transparent; border-radius: var(--radius-sm); padding: 10px 18px; font: inherit;
  font-size: 15px; font-weight: 600; cursor: pointer; transition: .18s; }
.btn-primary { background: var(--btn); color: var(--btntext); }
.btn-primary:hover { opacity: .86; transform: translateY(-1px); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--text); }
.btn-ghost:hover { background: var(--bg2); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* --------------------------------------------------------------- pages -- */
.page { display: none; min-height: calc(100vh - 64px); }
.page.active { display: block; animation: fade .3s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.wrap { max-width: 1100px; margin: 0 auto; padding: 64px 24px 96px; }


.pill { display: inline-block; background: var(--accent2); color: var(--accent); font-weight: 600;
  font-size: 13px; padding: 6px 14px; border-radius: 999px; margin-bottom: 22px; }
.cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta .btn { padding: 14px 26px; border-radius: 12px; font-size: 16px; }
.section-head { margin: 0 0 6px; font-size: 26px; }
/* (2026-11-04:`.section-sub` 下线 —— 两个产品卡片的那句话都改用 `.pitch` 了。) */

/* 2026-11-03:卡片墙那套样式(网格 / 卡 / 图标)随 `#page-prose` 分节一起下线 ——
   那四张卡说的 400 chars / 审核 / Columns / My space,在 `about.html` and `/home.html` 里都有。 */
.tag { display: inline-block; background: var(--accent2); color: var(--accent); font-size: 12px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px; margin-left: 8px; vertical-align: middle; }

/* 2026-11-03:视频占位块的那六条样式随块一起下线(视频还没拍,那块只是版式占位 ——
   见 `#page-home` 那笔重复账)。 */
/* (2026-11-03:那行小字说明的样式随两个分节一起撤了 —— 诚实清单搬进了 `about.html`。) */

/* --------------------------------------------------------------- forms -- */
label { display: block; font-size: 13px; color: var(--muted); margin: 14px 0 6px; }
.input, textarea { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 13px; font: inherit; color: var(--text); outline: none; transition: .18s; }
.input:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent2); }
textarea { min-height: 260px; resize: vertical; font-family: "Cascadia Code", Consolas, monospace; font-size: 14px; }
.hint { font-size: 12px; color: var(--muted); font-weight: 400; }
.row { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-top: 18px; flex-wrap: wrap; }
.msg { font-size: 14px; min-height: 20px; }
.msg.ok { color: var(--ok); } .msg.err { color: var(--err); }

/* ------------------------------------------------------------ articles -- */
/* 2026-11-04 用户:"ArticlesTitle无需加粗,减小Articles之间的间距,每篇Articles所有内容在同一行"。
   一行 = Title(不加粗、超长省略) + Time/字数/标签 + 正文开头(占满剩余宽度、省略)。 */
.article { display: flex; align-items: baseline; gap: 12px; margin: 0;
  padding: 8px 12px; background: transparent; border: 0;
  border-bottom: 1px solid var(--line); border-radius: 0; }
.article:last-child { border-bottom: 0; }
.article h4 { margin: 0; font-size: 15px; font-weight: 400; flex: 0 1 auto; max-width: 42%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.article h4 a:hover { color: var(--accent); }
/* 2026-11-04:按日期分组的分组Title(同一天的排在一起)。 */
.day-head { margin: 24px 0 10px; font-size: 15px; font-weight: 700; color: var(--muted);
  padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.day-head:first-child { margin-top: 0; }
.article .meta { margin: 0; flex: none; font-size: 12px; white-space: nowrap; }
.article .excerpt { margin: 0; flex: 1; min-width: 0; color: var(--muted); font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 窄屏折成两行,否则一行挤成一团。 */
@media (max-width: 760px) {
  .article { flex-wrap: wrap; gap: 4px 10px; }
  .article h4 { flex: 1 1 100%; max-width: 100%; }
  .article .excerpt { flex: 1 1 100%; }
}
.meta { color: var(--muted); font-size: 12px; margin-bottom: 10px; }
/* (2026-11-04:`.author-link` 下线 —— 「All works」只列自己的,不再逐行重复作者名。) */
select.input { cursor: pointer; }
.md { white-space: pre-wrap; word-break: break-word; margin: 0; max-height: 320px; overflow: auto;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px;
  color: var(--text); font-family: "Cascadia Code", Consolas, monospace; font-size: 13.5px; }
.empty { color: var(--muted); text-align: center; padding: 28px; border: 1px dashed var(--line); border-radius: var(--radius); }


/* ----------------------------------------------------- landing sections -- */
/* 2026-11-03:Home那两组"横向小卡"的样式随内容一起下线 —— 见那块的重复账(版权 / 审核 /
   申诉在 terms and about 里;My space那三件事就是 `/home.html` 本身)。下面这条仍在用。 */
.cta-left { justify-content: flex-start; margin-top: 18px; }
.steps { list-style: none; margin: 22px 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.steps li { display: flex; gap: 12px; align-items: flex-start; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.steps b { width: 26px; height: 26px; flex: none; border-radius: 9px; background: var(--accent2);
  color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 13px; }
.steps span { font-size: 14px; color: var(--muted); }
.steps strong { display: block; color: var(--text); font-size: 15px; margin-bottom: 2px; }
/* (2026-11-03:样例表那套样式随 `#page-director` 分节一起撤了 —— 流程在 `director/home.html`。) */
/* 2026-11-04 用户:"索取其上面的留白到一半" ⇒ 上边距 34 → 17px。 */
.strip-head { margin: 17px 0 10px; font-size: 16px; color: var(--muted); font-weight: 600; }
.latest { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.latest-card { display: block; background: var(--bg2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px; transition: .18s; }
.latest-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.latest-card h4 { margin: 0 0 6px; font-size: 16px; }
.latest-card .meta { margin: 0; }
.latest-card p { margin: 8px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hint.ok { color: var(--ok); font-weight: 600; }
/* (2026-11-03:小卡那套样式撤了之后,它那条响应式也一并撤掉。) */

/* --------------------------------------------------------------- modal -- */
.overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px;
  background: rgba(20,23,31,.42); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .25s; }
.overlay.open { opacity: 1; pointer-events: auto; }
.modal { position: relative; width: 100%; max-width: 440px; background: var(--bg); border: 1px solid var(--line);
  border-radius: 22px; padding: 30px 28px 26px; box-shadow: var(--shadow); text-shadow: none;
  transform: translateY(14px) scale(.97); transition: transform .28s cubic-bezier(.2,.9,.3,1.2); }
.overlay.open .modal { transform: none; }
.modal::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; border-radius: 22px 22px 0 0; background: var(--accent); }
.modal h3 { margin: 0 0 4px; font-size: 22px; }
.modal .sub { margin: 0 0 6px; color: var(--muted); font-size: 14px; }
.close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border: 0; border-radius: 8px;
  background: transparent; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; }
.close:hover { background: var(--bg2); color: var(--text); }
.steps { display: flex; gap: 8px; margin: 18px 0 4px; }
.step-dot { flex: 1; height: 4px; border-radius: 4px; background: var(--line); transition: background .3s; }
.step-dot.on { background: var(--accent); }
.step-panel { display: none; }
.step-panel.active { display: block; animation: fade .25s ease; }
.modal .btn { width: 100%; margin-top: 20px; padding: 12px; }
.code-input { letter-spacing: 14px; text-align: center; font-size: 30px; font-weight: 800;
  font-family: "Cascadia Code", Consolas, monospace; color: var(--accent); background: var(--accent2);
  border-color: var(--accent); text-shadow: 0 0 18px var(--glow); }
.code-input::placeholder { color: var(--accent); opacity: .38; letter-spacing: 14px; }
.code-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent2); }
.linkish { border: 0; background: none; color: var(--accent); font: inherit; font-size: 13px; cursor: pointer; padding: 0; }
.linkish:disabled { color: var(--muted); cursor: default; }
.switch { text-align: center; margin-top: 14px; font-size: 13px; color: var(--muted); }
.consent { display: flex; gap: 9px; align-items: flex-start; margin-top: 14px; }
.consent input { width: 16px; height: 16px; margin: 2px 0 0; flex: none; accent-color: var(--accent); }
.consent label { font-size: 13.5px; color: var(--muted); cursor: pointer; margin: 0; line-height: 1.5; }
.help { margin-top: 12px; font-size: 13px; color: var(--muted); }
.help summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.help ul { margin: 8px 0 0; padding-left: 20px; }
.help li { margin: 4px 0; line-height: 1.55; }
/* `.edit-bar`(+ `.edit-bar .linkish`)**删掉了**(2026-10-31 清理):它属于更早那一版"注册 /
   编辑中"的提示条,现在整页 markup 里没人挂它(`.linkish` 自己还在用,别一起删)。 */

/* --------------------------------------------------------------- toast -- */
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 60; max-width: 90vw; padding: 12px 20px;
  border-radius: 12px; background: var(--btn); color: var(--btntext); box-shadow: var(--shadow);
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: .3s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.ok { border-bottom: 3px solid var(--ok); }
.toast.err { border-bottom: 3px solid var(--err); }

/* ---------------------------------------------------------- responsive -- */
/* (2026-11-03:视频网格那条响应式随视频块一起撤了。) */
@media (max-width: 760px) {
  .bar { padding: 0 12px; gap: 6px; }
  .brand { margin-right: 6px; font-size: 17px; }
  .brand svg { width: 26px; height: 26px; }
  .user-chip { display: none; }
  .wrap { padding: 44px 20px 72px; }
}

/* 2026-11-03 页脚(一天里改了两轮,记录最终形态):
   1. 「整理一下,对齐,都在一行或者两行」 ⇒ 品牌名与诗句从**竖排**改成并排,去掉版权那句
      上面的分隔线 —— 三行收到两行。
   2. 「Terms重叠了;把末尾的『About My space Terms Privacy Rules』都删掉;把版权那句
      移到他们的位置,字体放大 2-3 号;品牌那句合成 `ApriFlute AI™ · Amid apricot shadows, a flute plays till dawn`,
      chars体放大,颜色改亮色」 ⇒ 那排链接**整排删掉**(它与顶栏的「Terms」标签重叠),版权那句
      **落到链接原来的位置**(右侧;靠品牌这行的 `margin-right: auto` 顶开),两句都放大
      (品牌 17px、版权 15px),品牌那句改用**强调色**。
   注:页脚不再放法律页链接之后,落地页依然链着它们 —— Home末尾那条 `.note` 与注册弹窗里都有
      (`tests/test_server.py` 的 "the landing page links the legal pages" 钉的就是这个)。 */
.site-footer { border-top: 1px solid var(--line); background: var(--bg); }
/* ③ 2026-11-04 用户:"banner 高度太高,字体改小 2-3 号,让整页不用上下滚" */
.fwrap { max-width: 1240px; margin: 0 auto; padding: 14px 24px 16px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.fbrand { margin: 0 auto 0 0; color: var(--accent); font-size: 14px; }
.fbrand .fname { font-weight: 700; }
.fbrand .fdesc { font-weight: 400; }
.ffine { margin: 0; color: var(--muted); font-size: 12.5px; }
/* (2026-11-03:卡片里的链接色随卡片墙一起撤了。) */
@media (max-width: 760px) { .fwrap { padding: 22px 20px 34px; } }

/* ================= 2026-11-04 视觉改版:背景层 / 磨砂玻璃 / 60:40 ================= */
/* 背景图是**一张静态图**,不是运行时 filter:blur() —— 全屏模糊在低端安卓上会掉帧。
   图本身已经够柔,这里只叠一层渐变保证文字对比度(照片亮处会吃掉白chars)。 */
.bg-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg-layer img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bg-layer::after { content: ""; position: absolute; inset: 0;
  /* 浅色主题:不再压暗,而是**提亮**(暖白纱)。既然文字现在坐在半透明面板上,
     这层就可以很淡 —— 照片尽量原样呈现,只把最亮处压平一点点。 */
  background: linear-gradient(160deg, rgba(226,241,244,.34), rgba(226,241,244,.18) 45%, rgba(226,241,244,.48)); }
header, main, footer { position: relative; z-index: 1; }
header { background: rgba(226,241,244,.88); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.site-footer { background: rgba(226,241,244,.88); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
/* 2026-11-04 用户:"每个版块还是不能完全透明,能做到半透明吗?" ⇒ **半透明磨砂面板**。
   72% 暖白 + 14px 模糊:照片还透得出来(能看见花树和湖),但文字底下是稳定的浅底,
   深字对比度 ≈ 14:1。这是"能读"和"能看见背景"之间的那个点。
   想更透就把 .72 调到 .55;想更实就调到 .85。 */
.glass { background: rgba(226,241,244,.88); border: 1px solid rgba(27,26,23,.10);
  border-radius: var(--radius); padding: 26px 28px;
  backdrop-filter: blur(14px) saturate(110%); -webkit-backdrop-filter: blur(14px) saturate(110%);
  box-shadow: 0 1px 2px rgba(27,26,23,.05), 0 16px 40px -26px rgba(27,26,23,.35); }
/* 2026-11-04 用户澄清:"总体宽度和之前一样,不要全屏占满;下面两个框子对半分;
   最上面的框子变窄" ⇒ 一层 `.home-wrap`(1550 居中)包住横幅与两栏:
     横幅 = 容器的 70%(居中),两栏 = 容器内 1fr 1fr。 */
.home-wrap { max-width: 1550px; margin: 0 auto; padding: 28px 24px 72px; }
.home-grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: stretch; }
@media (min-width: 1024px) { .home-grid { grid-template-columns: 1fr 1fr; } }
.home-col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
/* ② 两栏等高:卡片吃掉整栏高度(内容少的那个留白,但边框对齐)。 */
.home-col > .glass { flex: 1; }
@media (min-width: 1024px) { .home-col.side { position: sticky; top: 88px; } }
/* 衬线体在 400 下笔画很细,压在照片上会"发虚" ⇒ Title统一 600(2026-11-04)。 */
h1, h2, h3 { font-family: "Songti SC", "Noto Serif SC", "Source Han Serif SC", "SimSun", Georgia, serif;
  font-weight: 600; }
.hero-card .pill { margin-bottom: 18px; }
/* 2026-11-04 用户:"左上那个框子的几句话是网站的核心" ⇒ 四层排版,见 markup 里的注释。 */
/* 2026-11-04 用户:"贯通全屏,宽度 70%,中间对齐,两侧各缩进 15%" ⇒ 横幅独立于 60/40 网格。 */
.home-hero { width: 70%; margin: 0 auto 24px; }
@media (max-width: 1024px) { .home-hero { width: 100%; } }
/* 诗句 + 承诺**同一行**,红色,字号比原来小一档(原来 28–44px)。 */
/* ① 横幅文字居中;颜色从红改成青(深一档,浅青在浅底上读不清)。 */
.hero-card { text-align: center; }
/* 2026-11-04 用户:"颜色改成浅粉或浅紫,当前和背景区分度不够"。
   浅青底上真正的"浅粉"只有 1.6:1 ⇒ 用**深玫粉**(色相是粉,亮度够低):≈ 5.4:1。 */
.hero-line { font-size: clamp(20px, 2.2vw, 28px); line-height: 1.55; margin: 0 0 18px;
  color: #9d174d; letter-spacing: .03em; }
/* ③ 卡片Title条:带背景色(与顶部 pill 同一套强调色)+ 下面一条分割线。 */
.card-head { margin: 0 0 18px; padding: 10px 14px; border-radius: 12px;
  background: var(--accent2); border-bottom: 2px solid var(--accent); }
.card-head .section-head { margin: 0; }
.hero-sub { font-weight: 600; }
/* ① 居中:光有 `text-align: center` 不够 —— `max-width` 会把块卡在左边,要 `margin: auto`。 */
/* 第二句用**深紫** —— 与诗句的玫粉同色系、又分得开;≈ 6:1。 */
.hero-lead { margin: 0 auto 16px; font-size: 15.5px; line-height: 1.85; color: #6b21a8;
  max-width: 44em; }
.cta-left { justify-content: flex-start; }
.latest { grid-template-columns: 1fr; }
.latest-card { background: rgba(226,241,244,.55); }
.latest-card:hover { background: rgba(226,241,244,.80); }
.flow { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.flow li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--muted); }
.flow b { flex: none; width: 24px; height: 24px; border-radius: 8px; background: var(--accent2);
  color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 12px; }
.flow strong { display: block; color: var(--text); font-size: 14.5px; font-weight: 600; }
@media (max-width: 760px) { .home-grid { padding: 20px 16px 56px; } .glass { padding: 20px 18px; } }

/* 2026-11-04 用户:Prose Title后面带一句定位;那句"精品Long-form…"要加粗、用亮色(浅青)。
   浅青压在浅色面板上读不清 ⇒ 给它一条**深色高亮条**:#67e8f9 在 78% 深底上 ≈ 7.5:1。 */
/* 2026-11-04 用户:"字号要和前面一样大小并且加粗" ⇒ 继承Title字号(26px)+ 700。 */
.head-tag { display: inline-block; margin-left: 12px; font-size: inherit; font-weight: 700;
  color: var(--text); letter-spacing: .01em; vertical-align: baseline; }
/* 2026-11-04 用户:"去掉背景框" ⇒ 不再有深色底。浅青在浅面板上读不清(1.6:1),
   所以换成**深青** #0e7490(≈5.5:1,AA 达标)—— 仍然是青色、仍然加粗醒目。 */
/* 两个产品卡片的"一句话定位"共用这一个类(2026-11-04 用户要求两边同色)。 */
.pitch { margin: 0 0 20px; color: #0e7490; font-weight: 700; font-size: 15.5px;
  line-height: 1.8; letter-spacing: .01em; }
/* 最新发表:5 条,一行一条 —— 比卡片网格省一半高度。 */
/* 最新发表:5 条,每条两行 —— 第 1 行Title + 作者/字数,第 2 行一行正文开头。
   观感照 home.html 的「My columns」(`.mini`):Title 14.5px、摘录 12.5px、日期 11.5px。 */
.latest { display: flex; flex-direction: column; gap: 0; }
/* 2026-11-04 用户:"5 articlesArticles之间的留白也减半" ⇒ 上下内边距 9 → 5px。 */
.latest-card { display: block; padding: 5px 8px; background: transparent; border: 0;
  border-bottom: 1px solid rgba(27,26,23,.10); border-radius: 9px; }
.latest-card:last-child { border-bottom: 0; }
.latest-card:hover { background: rgba(27,26,23,.05); }
.latest-line { display: flex; align-items: baseline; gap: 12px; }
.latest-card h4 { margin: 0; font-size: 14.5px; font-weight: 600; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.latest-card .meta { margin: 0; font-size: 11.5px; flex: none; white-space: nowrap; }
.latest-excerpt { margin: 2px 0 0; color: var(--muted); font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 2026-11-04 用户:"「Articles」指向的链接背景透明没法看,改为和 read.html 一样的设置"
   ⇒ 实底浅青面板(与 read.html 的 `.reader` 同一套色),照片只在四周露出来。 */
#page-articles .wrap { background: rgba(226,241,244,.88); border: 1px solid var(--line);
  border-radius: var(--radius); margin-top: 24px; }

/* 2026-11-04:语言开关。中文页上写 English,英文页上写 中文。 */
.lang-switch { font-size: 13px; font-weight: 600; color: var(--accent);
  border: 1px solid var(--line); border-radius: 12px; padding: 4px 12px;
  white-space: nowrap; }
.lang-switch:hover { border-color: var(--accent); background: var(--accent2); }

  /* ---- 英文首屏(2026-11-07) ---- */
  /* 中文那套字体栈(`Songti SC` / 思源宋体 / `SimSun`)在英文下会落到 **SimSun** ——
     拉丁字母很难看。英文标题换成衬线体:Mac 用 Iowan Old Style,Windows 用 Palatino。 */
  h1, h2, h3, .hero-line, .hero-lead {
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino,
                 "Book Antiqua", Georgia, "Times New Roman", serif;
  }
  /* 框子放大 10%(70% -> 77%)。只在宽屏生效 —— 窄屏那条 `width: 100%` 要留着。 */
  @media (min-width: 1025px) { .home-hero { width: 77%; } }
  /* 第一行压到一行。字号 = 卡片内容宽 / 39,再夹在 17–26px 之间:
       39 ≈ 76 个字符 × 0.5em(衬线体的平均字宽),留了一点余量;
       卡片内容宽 = 77vw - 93px(77% 的 (100vw - 48px),再减掉 .glass 的左右 padding 56px)。
     这样**任何宽度下都刚好放得下**,不用猜某个断点会不会换行。
     `letter-spacing` 归零 —— 中文那 .03em 是给汉字调的,英文会显得松。 */
  .hero-line { font-size: clamp(17px, calc((77vw - 93px) / 39), 26px); letter-spacing: 0; }
  /* 第二行放大 3.5 号(15.5px -> 19px)。 */
  .hero-lead { font-size: 19px; }