/* Chinaroutemap — shared styles (tokens, header, notices, posts, rail, footer) */
:root{
  --accent:#C73B22;
  --accent-deep:color-mix(in oklab, var(--accent), black 22%);
  --accent-soft:color-mix(in oklab, var(--accent), white 88%);
  --ink:#211C15;
  --ink-soft:#5C5346;
  --paper:#FBF7EE;
  --cream:#F4EDDF;
  --line:#E2D8C4;
  --green:#2E6B4F;
  /* 设计稿的绿（Figma 19:2752 / 15:1595 / 17:1180 都是这一个值）。
     和上面的 --green 不是一回事：那个是站上原有的语义色。 */
  --brand-green:#558729;
  --blue:#2C5E8A;
  --amber:#B07818;
  --teal:#1F6E6B;
  --card-shadow:0 1px 2px rgba(40,28,12,.18), 0 10px 24px -12px rgba(40,28,12,.45);
  --tilt-scale:1;
  /* 页面左右留白（站长 2026-09-10：「56px 28px 15px 设置成css变量，整个网站统一都用」，
     「通栏不需要用」）。三档各一个变量，--gutter 按窗口宽度在三档之间切换（见 :root 后面
     那两条 @media）—— 页面上写 padding-left:var(--gutter) 就够了，不用再在每页的
     ≤1080 / ≤720 里各自重写一遍。
     通栏的块（首页轮播、订阅那块、地图画布、手机上顶部那条黑带）不用它，保持各自的值。

     原来这里是 --gutter:28px、手机 10px，用的地方写 var(--gutter,28px) 带回落值，防这份
     文件没加载时整条声明作废。每页都经 base.html 加载它；回落值一并去掉了 —— 留着的话
     数值是错的（桌面已经不是 28），读的人会被它误导。 */
  --gutter-desktop:56px;
  --gutter-tablet:28px;
  --gutter-mobile:15px;
  --gutter:var(--gutter-desktop);

  /* The content width. Every centred block on every page — hero, section
     wrapper, city hero inner, the footer row — stops here, so the site has one
     column width instead of the two it grew: 1280px on the hubs and 920px on
     the five document pages, which put a twenty-pixel step between the page
     and the footer below it.

     Written var(--content-max,1300px) at each use: an undefined custom property
     invalidates the whole declaration, and a container with no max-width at all
     would run the full width of the window. (--gutter used to carry a fallback
     for the same reason. It dropped it on 2026-09-10 when it became three
     breakpoint values: any single fallback figure would be wrong at two of them.) */
  --content-max:1300px;
  /* ---- 2026-09-03 抽出来的：页面底色、字体栈、几个高频的角色色、三种阴影 ----
     命名按角色不按颜色：--muted 明天换成别的灰，用它的地方一个都不用改。 */
  --page:#fff;                 /* 页面底色。之前非首页是 --paper（米色），设计稿全站白底。
                                  --paper 留着：它还是输入框/评论框/隔行条纹的浅底色 */
  --card:#FFFDF6;              /* 卡片、便笺、引文的暖白底 */
  --ink-body:#3B342A;          /* 正文段落字色，比 --ink 淡一档 */
  --on-accent:#FFF6EA;         /* 压在 --accent / --green 实心按钮上的字色 */
  --muted:#666;                /* 次要文字、标签底 */
  --muted-soft:#999;           /* 占位符、更淡的提示 */
  --green-soft:#EEFFF2;        /* 淡绿：定位圆的底、城市格的悬停 */
  --field:#ECECEC;             /* 浅灰控件底（语言选择器） */
  --blue-cta:#3E82F3;          /* 订阅按钮的套蓝 —— 设计稿指定，不在品牌色里，
                                  抽出来正是为了让这件事在一个地方看得见 */
  /* 字体：设计稿全站 Manrope（站长 2026-09-03：其他页面跟首页同一套颜色和字体）。
     body 之前是 Bricolage Grotesque，首页和新做的组件各自覆盖成 Manrope，
     29 处 —— 现在 body 本身就是 Manrope，那 29 处和它是同一个栈，一个变量。
     回落位就是 sans-serif（系统无衬线）——Bricolage 的 woff2 在 #96 已经删了，
     所以 Manrope 没加载出来时就是系统字体，没有第二道 webfont 兜底。 */
  --font-sans:"Manrope", sans-serif;
  /* 2026-09-09 字体精简：--font-mono 也并入 Manrope（站长定稿只留两款字体）。
     首页设计稿里没有等宽字，但其他页面的设计稿还没出，不猜它换成什么 ——
     先抽成变量，设计稿到了改这一行就行。 */
  --font-mono:"Manrope", sans-serif;
  --shadow-postcard:5px 5px 0 var(--cream), 5px 5px 0 1.5px var(--line);
  --shadow-postcard-sm:4px 4px 0 var(--cream), 4px 4px 0 1.5px var(--line);
  --shadow-press:0 3px 0 var(--accent-deep);
  font-size:16px;
}
@media (max-width:1080px){ :root{ --gutter:var(--gutter-tablet); } }
@media (max-width:720px){ :root{ --gutter:var(--gutter-mobile); } }
body.no-tilt{ --tilt-scale:0; }
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:auto; }
body{
  font-family:var(--font-sans);
  background:var(--page);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
}
.mono{ font-family:var(--font-mono); }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; background:none; border:none; color:inherit; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ---------- utility strip ---------- */
.strip{
  background:var(--ink); color:#EFE6D4;
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.04em;
  text-transform:uppercase;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  /* 和页头、和站上每个内容容器落在同一列上（内容 1188）。原来是
     var(--gutter)，于是这条黑带里的字比下面所有东西都往外探。
     不用 max-width：这条带是通栏深色的，加 max-width 黑底也会跟着只剩
     1300 宽，两侧露出页面底色。式子的来历见 header.site 那段注释。 */
  padding:7px calc(max(0px, (100% - var(--content-max,1300px)) / 2) + var(--gutter));
}
.strip .dot{ color:var(--accent); }

/* Controls at the right end of the strip: the theme toggle, then the language
   switcher on its right. They sit at the end on their own margin-left:auto
   rather than being pushed there by whatever precedes them, so the strip
   holds its shape however much or little the left side has to say. */
.strip-controls{ display:flex; gap:10px; align-items:center; flex:none; margin-left:auto; }
/* 语言控件用设计稿的 Manrope，不跟 .strip 那条 Courier Prime 走（站长 2026-09-03）。
   三个选择符各有原因：
   · .strip-controls        —— 盒子自己，也把 letter-spacing 从 .strip 的 .04em 收回来，
                               那个字距是给等宽状态条设计的，Manrope 上会散
   · .lang-select           —— chinaroutemap-i18n.js 运行时注入的那份写死了
                               Courier Prime；用 .strip-controls .lang-select（0,2,0）
                               压过它的单类选择符（0,1,0） */
.strip-controls,
.strip-controls .lang-select{
  font-family:var(--font-sans);
  letter-spacing:normal;
}

/* .lang-toggle 是空挂载点（2026-09-10：EN/中文 双按钮占位删除——死按钮点了
   没反应，还在每次刷新时先闪出来）。mount() 把它整个换成 <select>；
   换成 <select> 之前它什么都不该画，所以没有样式。 */

/* ---------- header ---------- */
/* 2026-09-01 按 Figma 新导航稿改：白底、细分隔线。
   原来是 --paper（#FBF7EE 米色）加一道 2px 的墨色粗线，设计稿两样都不要——
   页头退成一条几乎看不见的边，重量交给内容。链接本身的字号、字重、颜色、
   内边距、圆角在改之前就已经和设计稿逐项一致，一个字没动。 */
header.site{
  /* gap 65：设计稿 33:3548 的 gap-[65px]。另一个变体 13:1165 写的是 100px，
     两份不一致——取带搜索、按内容区对齐的那一版，它和站长给的截图是同一版。 */
  display:flex; align-items:center; gap:65px;
  /* 内容和站上所有容器落在同一列上。那些容器写的是
       max-width:1300px; margin:0 auto; padding:… 56px
     —— 外框 1300 居中、内容再收 56，真正的列是 **1188**。下面这个 calc 是
     同一个式子的展开：视口 ≥1300 时留出 (100%-1300)/2 再加 56，视口更窄时
     就只剩 56。2026-09-02 之前这里少了那个 +56，页头的标志和搜索框于是各自
     比下面每一块多探出 56px。
     不用 max-width：header.site 是 sticky 的通栏，自带白底，加 max-width
     会让白条也只有 1300px 宽，两侧露出底色。只能用内边距顶。
     原来还有一道 1px solid var(--line) 的底线，2026-09-03 按站长要求去掉了。 */
  padding:10px calc(max(0px, (100% - var(--content-max,1300px)) / 2) + var(--gutter));
  background:#fff; position:sticky; top:0; z-index:50;
}
.logo{ display:flex; align-items:center; gap:12px; }
/* 标志是一张整图（1000×375）。按高度定尺寸、宽度自动；width/height 属性
   写文件真实像素，浏览器靠它在图加载完之前留出位置，少了页头会抖一下。
   这张图带白底（导出时没勾透明），所以在深色页头上会是一块白 —— 换成带
   Alpha 通道的版本后这行不用改，覆盖同名文件即可。 */
.logo-img{ height:64px; width:auto; display:block; }   /* 设计稿 33:3549 是 64 */
/* 手机页头（站长 2026-09-11）：上下内边距归零、标志加到 60px——
   页头正好 60px 高，整条都是标志。页脚标志不受影响（.foot-inner
   两级选择器压得住这条）。 */
@media (max-width:720px){
  header.site{ padding-top:0; padding-bottom:0; }
  .logo-img{ height:60px; }
  /* 手机页头三格：菜单 · 标志 · 登录/搜索（稿 250:445）。两侧都是 1fr 而不是
     auto —— 按内容定宽的话左 42、右 117，标志会停在两者之间的缝里而不是页头
     正中。2026-09-16 从 mobile.js 的注入字符串搬回这里：注入发生在页尾脚本
     执行之后，浏览器先按桌面版画一帧，于是每次加载都有一次整页重排
     （CLS 约 0.18，标志横移约 110px），注入的 padding:10px 还盖掉了上面那条
     padding:0，页头实际 80px 而不是站长 09-11 定的 60px。
     * 这一档不写左右内边距：full-bleed 契约只允许 .strip 在 720 重述它。 */
  html.crm-js header.site{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; flex-wrap:nowrap; }
  html.crm-js header.site nav.primary{ display:none; }
  html.crm-js header.site .logo{ justify-self:center; }
  html.crm-js header.site .header-actions{ margin-left:0; justify-self:end; }
  /* 稿里菜单是 24 的纯图标，没有米色方框（那是 ≤1080 平板档的）。
     padding 10 + 负外边距 -10：可点范围凑够 44 见方，图标边缘仍落在 15 的内缩线上。 */
  html.crm-js header.site .crm-burger{ justify-self:start; border:0; background:none; border-radius:0; width:auto; height:auto; font-size:24px; padding:10px; margin:-10px; }
}
nav.primary{ display:flex; gap:10px; align-self:stretch; align-items:center; }   /* 设计稿 33:3589 gap-[10px] */
/* ★ 只认直接子代。写成 `nav.primary a` 的话，下拉面板整个在 .nav-mega
   里面，这条（0,1,1）会盖过 .mega-more / .mega-card（0,1,0）：Learn More
   变灰、行高多 16、每张卡片左右各缩 13px。都是浏览器里量出来的。 */
nav.primary > a, nav.primary > .nav-mega > a{
  padding:8px 13px; font-weight:600; font-size:15px;
  /* 2026-09-03 站长改：--ink-soft -> --ink；原来那条 :hover{ color:var(--ink) }
     因此成了空操作，一并删了。 */
  border-radius:5px; color:var(--ink);
}
/* 激活条：设计稿 19:2752 是 4px #558729，x=537 w=94——正好是文字宽度
   两边各多 1px，不是整个带内边距的链接盒（那是 118 宽）。所以挂在
   <span> 上而不是 <a> 上。那层 span 本来就在（五个导航词典键靠它），
   这里只是借用，结构一个字没动。
   纵向：链接盒 34 高，文字占 8..26，设计稿的条在 29..33，所以往下 3px。
   设计稿里激活项的字色和其他四个一样（都是 #5c5346），不加深。 */
nav.primary > a span, nav.primary > .nav-mega > a span{ position:relative; }
nav.primary > a.active span::after,
nav.primary > .nav-mega > a.active span::after,
.nav-mega:hover > a span::after{
  content:''; position:absolute; left:-1px; right:-1px;
  top:calc(100% + 3px); height:4px; background:var(--brand-green);
}
/* 页头搜索。是一个普通的 GET 表单，action 指向已有的 /search/ 页——那一页
   开头就读 ?q=（search.html:331），所以这里不需要任何脚本，禁用 JS 也能用。
   放在 margin-left:auto 前面，于是它靠右、账号块再靠右。 */
.hdr-search{ margin-left:auto; position:relative; display:flex; align-items:center; }
.hdr-search input{
  /* 设计稿 33:3602：180x32、描边 #999、圆角 20；文字距左 39（33:3605），
     Manrope Regular 12px。box-sizing 写死，别指望页面的重置。 */
  box-sizing:border-box; width:180px; height:32px;
  font-family:var(--font-sans);
  font-size:12px; color:var(--ink);
  padding:0 14px 0 39px;
  border:1px solid var(--muted-soft); border-radius:20px; background:#fff;
}
.hdr-search input::placeholder{ color:#ccc; }
.hdr-search input:focus{ outline:0; border-color:var(--ink-soft); }
.hdr-search svg{
  position:absolute; left:17px; width:14px; height:14px; pointer-events:none;
  stroke:#B7AC97; fill:none; stroke-width:2;
}
/* 搜索框在窄屏上和汉堡按钮抢地方，而 /search/ 那一页本来就在菜单里。 */
@media (max-width:860px){ .hdr-search{ display:none; } }
/* 手机上的搜索入口（设计稿 250:445）。默认不出现 —— 宽屏有上面那个真表单，
   两个搜索入口并排只会让人愣一下。尺寸和位置在文件末尾那个 ≤720 里。 */
.hdr-search-go{ display:none; }
.hdr-search-go svg{
  display:block; width:24px; height:24px;
  fill:none; stroke:var(--ink); stroke-width:1.6; stroke-linecap:round;
}
/* ---------- Destinations 悬停下拉（Figma 13:1130） ---------- */
/* 面板通宽（1920×480 @y=122，正好接在页头下面），内容和页头一样收进
   --content-max。悬停打开，:focus-within 让键盘也能进——只有 :hover 的话
   Tab 到 Destinations 就是一堵墙。 */
/* 包裹层必须一直长到页头底边，中间不能有缝：量过，链接底边 94.5、
   面板顶边 120，中间 25.5px 鼠标既不在链接上也不在面板上，:hover 一断
   面板就没了，人根本点不进去。stretch 撑的是外边距盒，所以负的下外边距
   把边框盒往下顶 10px（页头的下内边距），缝就没了。横向只有这一格宽，
   不挡搜索框。 */
.nav-mega{ position:static; display:flex; align-items:center;
           align-self:stretch; margin-bottom:-10px;
           /* ★ 这 10px 不是留白，是把居中的参照物改回来。少了它，<a> 会在
              被顶高到 74 的盒子里居中，比另外四个导航项低 5px（量过：
              Destinations y=65，其余 y=60）。加上之后边框盒仍是 74、桥不断，
              内容盒回到 64，五项对齐。 */
           padding-bottom:10px; }
.mega{
  position:absolute; left:0; right:0; top:100%;
  background:#fff; border-bottom:1px solid var(--line);
  box-shadow:0 12px 24px rgba(33,28,21,.07);
  display:none; z-index:49;
}
/* 一条看不见的通栏悬停桥（2026-09-03）。
   站长报「鼠标一动下拉就没了」。量出来的几何：链接底 100、.nav-mega 底 123、
   面板顶 123 —— 垂直方向是连着的，问题在**横向**：那 23px 只有链接那一列
   宽，鼠标斜着往下走就出了 .nav-mega，面板当场关。
   这条桥补的正是那 23px，而且是整幅宽度。它是 .mega 的伪元素，所以只在面板
   已经打开时存在 —— 不会让别的导航项被"顺路"点开。
   为什么不是把面板往上挪（试过 top:80%）：那是页头高度的百分比，而页头高度
   是内容撑的（宽屏量到 85、窄屏 93），比例会跟着飘；而且会把面板推进页头、
   盖住它自己的底边线。桥保持了设计稿的位置，治的是成因。 */
.mega::before{
  content:''; position:absolute; left:0; right:0;
  /* 实测：链接底 100、面板顶 124 —— 正好 24。bottom:100% 让它永远贴着面板
     上沿，所以页头高度变了它也跟着走，不像写死的百分比会飘。 */
  bottom:100%; height:24px;
}
.nav-mega:hover .mega, .nav-mega:focus-within .mega{ display:block; }
.mega-in{
  /* 横向和页头一模一样的算法。原来用 max-width + margin:auto + gutter，
     宽屏下内容左缘比页头的多 28px（量到的），分类列、网格、Learn More
     三处一起偏。面板本来就是通栏，照抄页头那一行即可。 */
  /* 面板顶边 = 页头底边（设计稿 y=122）。往下量：Learn More 142、
     分类第一颗 146、网格 178、面板底 602。于是 20 / +4 / 行距 16 / 底 24。
     列：分类列 138 宽（绿丸的宽度），网格从内容左缘起 273 → 列距 135。 */
  padding:20px calc(max(0px, (100% - var(--content-max,1300px)) / 2) + var(--gutter)) 24px;
  display:grid; grid-template-columns:138px 1fr; grid-template-rows:auto 1fr;
  gap:16px 135px; align-items:start;
}
/* 分类列 */
/* 分类列比 Learn More 低 4px（设计稿 146 vs 142），行距 42 = 22 + 20。 */
.mega-cats{ grid-column:1; grid-row:1 / 3; margin-top:4px;
            display:flex; flex-direction:column;
            align-items:flex-start; gap:20px; }
.mega-cat{
  /* 绿丸 138x22、文字距左 5（设计稿 15:1595 对 15:1597）。原来写的
     30 高 10 内边距，丸比设计稿胖一圈。 */
  font:inherit; font-size:14px; line-height:22px; padding:0 5px;
  border:0; border-radius:3px; background:none; color:var(--ink-soft);
  cursor:pointer; text-align:left; white-space:nowrap;
}
.mega-cat:hover{ color:var(--ink); }
/* 选中态：设计稿给的绿（#558729），站上原来没有这个色。 */
.mega-cat.on{ background:var(--brand-green); color:#fff; }
/* 卡片网格：三列，卡片 320×128 圆角 10，和设计稿一致。
   面板高度封顶后网格自己滚——设计稿右侧那根 6px 的滚动条就是这个意思。 */
/* 可视高 400（设计稿滚动槽 y=178..578）。写死 height 而不是 max-height：
   设计稿七屏的面板都是 480，而且用 max- 的话面板会随分类换大小——
   鼠标在分类列上一路往下走，面板在脚下一下一下地跳。
   代价是只有一两张卡的分区下面留一大块白。右边留 20 给网格和滚动条之间的
   空当，滚动条本身 6px，合起来正好顶到内容右缘。 */
.mega-panes{ grid-column:2; grid-row:2; height:400px; overflow-y:auto;
             overscroll-behavior:contain; padding-right:20px;
             scrollbar-width:thin; scrollbar-color:#c9c9c9 #efefef; }
.mega-panes::-webkit-scrollbar{ width:6px; }
.mega-panes::-webkit-scrollbar-track{ background:#efefef; border-radius:3px; }
.mega-panes::-webkit-scrollbar-thumb{ background:#c9c9c9; border-radius:3px; }
/* minmax(0,...) 而不是裸的 1fr：1fr 的最小值是 min-content，而标签是
   nowrap 的，于是列宽被最长那行字锁死、不跟着容器缩（量到过：视口 1100
   时列卡在 238，正好是 Lijiang→Dali→Kunming 加内边距的宽度）。 */
.mega-pane{ display:none; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px 20px; }
.mega-pane.on{ display:grid; }
.mega-card{ display:block; }
.mega-card img{
  width:100%; aspect-ratio:320/128; object-fit:cover;
  border-radius:10px; display:block; background:var(--cream);
}
.mega-card > span{
  /* 设计稿指定 Manrope Medium 18px/20（Figma 13:1233 等）。Manrope 现在是全站
     body 字体（--font-sans），不是只有这一处用；两个子集合计 39 KB
     （latin 24,836 + latin-ext 15,120，可变字体一份覆盖 200-800）。
     2026-09-03 站长改：margin-top 6 -> 2，line-height 20 -> 24。 */
  /* 设计稿 13:1233：文字盒在 320 宽的卡里缩进 17，超长省略号。
     ★ 必须是 > span 而不是 span：路线卡的标签里嵌了一层
     <span class="arr">→</span>，写成 span 的话下面那个 display:block
     会把箭头也变成块级，“Suzhou→Nanjing” 就断成三行。 */
  /* 内边距 8 而不是设计稿的 17：17 是文字框在 320 宽卡片里的缩进
     （设计稿 13:1233 文字框 x=17 w=286），到窄屏卡片只剩 238 时它吃掉
     14% 的宽度，长路线名恰好顶满、贴着边看着像被切了。
     标签是居中的，所以宽屏下改小它观感一点不变，只在窄屏多出周转。 */
  display:block; margin-top:2px; text-align:center; padding:0 8px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:var(--font-sans);
  font-size:18px; font-weight:500; line-height:24px; color:#000;
}
.mega-card:hover > span{ color:var(--brand-green); }
/* 路线卡的停靠点之间那个箭头。淡一档，让城市名先被读到；左右各留 2px，
   不然 “Suzhou→Nanjing” 挤成一坨。 */
.mega-card .arr{ color:var(--ink-soft); margin:0 2px; font-weight:400; }
/* 「Learn More」在网格**上方**一行，不是浮在卡片上——设计稿里它在 y=142、
   网格在 y=178。第一版用了 position:absolute，结果压在第三张卡上（浏览器里
   看出来的）。 */
/* 面板第一行：状态片在左、Learn More / All regions 在右。设计稿里它们
   同一行——片 y=139..164、右上角文字 y=142..162。

   两个网格项共用同一格，不包 flex 容器：包了的话 .mega-more 就从
   「自己就是块级容器」变成「容器里的行内内容」，词典键会把 <a> 包进去，
   Learn More / All regions 的存量译文当场作废（header.html 那段注释）。
   片 ~194 宽、右上角 ~80 宽、格子 ~1027，撞不上。 */
/* 片 25 高而这一行按 20 排（右边那行文字的行高），上下各溢出 2.5px，
   于是片的顶边落在 17.5，设计稿是 17。这样整块面板高度不用为它改。 */
.mega-chips{ grid-column:2; grid-row:1; justify-self:start;
             display:flex; gap:10px; margin:-3px 0; }
.mega-chip{
  /* 设计稿 19:2723 / 19:2724：92x25、圆角 12.5、Manrope Medium 14 白字。
     选中是品牌绿，未选中 #d2d7d3。 */
  font-family:var(--font-sans);
  font-size:14px; font-weight:500; line-height:20px;
  height:25px; min-width:92px; padding:0 12px; text-align:center;
  border:0; border-radius:12.5px; background:#d2d7d3; color:#fff; cursor:pointer;
}
.mega-chip.on{ background:var(--brand-green); }
/* 事件卡的主次和城市/路线卡是反的：时间 18px 绿色在上，标题 14px 灰色在下，
   两行都左对齐（设计稿 17:2610 / 17:1395）。用类选择器压过 .mega-card > span
   那条，不靠书写顺序。 */
.mega-card > .mega-when,
.mega-card > .mega-evt{
  display:block; margin-top:2px; padding:0 2px; text-align:left;
  font-family:var(--font-sans);
  font-weight:500; line-height:20px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mega-card > .mega-when{ margin-top:6px; font-size:18px; color:var(--brand-green); }
.mega-card > .mega-evt{ font-size:14px; color:var(--ink-soft); }
/* when_top 和 when_bottom 之间要有个空隙。用 ::before 而不是模板里写空格：
   那两段是相邻行内元素、会被词典折成一个键，多一个空格就换了一个键，
   /events/ 已经翻好的那些串（DLYeve、DLY7:30p）当场作废。 */
.mega-card > .mega-when .d::before{ content:" "; }
.mega-card:hover > .mega-evt{ color:var(--ink); }
/* 状态片过滤掉的卡。禁用 JS 时这个类由模板直接渲染，于是默认视图也是
   「进行中」，不会进行中和已结束混在一起。 */
.mega-card.hide{ display:none; }
/* 空状态（设计稿 17:2616）：Manrope Medium 18/20 #999，落在网格左上角——
   和第一张卡片同一个坐标，所以它就长在 .mega-pane 里、不另外定位。
   .mega-pane 是 grid，这句要横跨整行，不然会被挤成第一列那么宽。 */
.mega-empty{
  display:none; grid-column:1 / -1;
  font-family:var(--font-sans);
  font-size:18px; font-weight:500; line-height:20px; color:var(--muted-soft);
}
.mega-pane.is-empty .mega-empty{ display:block; }
.mega-more{
  /* 设计稿 17:1180：Manrope Medium 14/20 #558729，右对齐。原来是灰的。 */
  grid-column:2; grid-row:1; justify-self:end;
  font-family:var(--font-sans);
  font-size:14px; font-weight:500; line-height:20px;
  color:var(--brand-green);
}
.mega-more::after{ content:" \203A"; }
.mega-more:hover{ color:var(--brand-green); text-decoration:underline; }
/* 窄屏不出下拉：那里走汉堡菜单，浮层会盖住整个屏。 */
@media (max-width:860px){ .mega{ display:none !important; } }

.header-actions{ display:flex; gap:12px; align-items:center; }
/* 登录按钮 2026-09-01 先藏起来（站长要求）。
   用 display:none 而不是删标记：删了标记，账号面板里那些文案
   （Sign in / Email / Password / Display name…）会从词典抽取里消失，
   想加回来时就是一批新键、八种语言重新机翻。藏着则一个键都不动。
   要放回来：删掉下面这一条。 */
.header-actions{ display:none; }
.btn-pin{
  background:var(--accent); color:var(--on-accent); font-weight:650; font-size:15px;
  padding:10px 18px; border-radius:6px; box-shadow:0 2px 0 var(--accent-deep);
  display:flex; gap:8px; align-items:center;
}
.btn-pin:hover{ transform:translateY(-1px); box-shadow:var(--shadow-press); }
.stamp{
  font-family:var(--font-mono); font-weight:700; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  border:1.5px solid currentColor; padding:2px 6px; border-radius:2px;
}
.st-ok{ color:var(--green); } .st-exp{ color:#8A5A10; } .st-official{ color:var(--blue); } .st-warn{ color:var(--accent); }
.kicker{
  font-family:var(--font-mono); font-size:13px; letter-spacing:.18em;
  color:var(--accent); text-transform:uppercase; margin-bottom:18px; display:flex; align-items:center; gap:10px;
}
.kicker::before{ content:""; width:34px; height:2px; background:var(--accent); display:inline-block; }
.tape{
  position:absolute; top:-9px; left:50%; width:90px; height:24px; margin-left:-45px;
  background:rgba(244,235,205,.7); border-left:1px dashed rgba(160,140,90,.5); border-right:1px dashed rgba(160,140,90,.5);
  transform:rotate(calc(-2deg * var(--tilt-scale))); box-shadow:0 1px 2px rgba(0,0,0,.18);
}
.ncat{
  position:absolute; top:12px; left:14px;
  font-family:var(--font-mono); font-weight:700; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:#fff; background:var(--cat,#666); padding:3px 8px; border-radius:2px;
}
.checklist{ margin:10px 0 2px; list-style:none; }
.checklist li{
  font-family:var(--font-mono); font-size:12.5px; line-height:1.45; color:var(--ink); padding:3px 0 3px 22px; position:relative;
}
.checklist li::before{ content:"☐"; position:absolute; left:2px; color:var(--accent); font-size:14px; }
.checklist li.done::before{ content:"☑"; color:var(--green); }
.tabs{ margin-left:auto; display:flex; gap:2px; }
.tabs button{ font-weight:650; font-size:14px; padding:8px 14px 12px; color:var(--ink-soft); position:relative; }
.tabs button.on{ color:var(--ink); }
.tabs button.on::after{ content:""; position:absolute; left:10px; right:10px; bottom:-2px; height:3px; background:var(--accent); }
.post{
  display:grid; grid-template-columns:52px 1fr; gap:14px;
  padding:18px 4px; border-bottom:1px solid var(--line);
}
.post-votes{ display:flex; flex-direction:column; align-items:center; gap:2px; padding-top:2px; }
.post-votes button{ color:#B3A78F; font-size:15px; line-height:1; padding:3px 8px; border-radius:4px; }
.post-votes button:hover{ background:var(--cream); color:var(--ink); }
.post-votes .count{ font-family:var(--font-mono); font-weight:700; font-size:14px; }
.post-votes button.voted-up{ color:var(--accent); }
.post-tags{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-bottom:6px; }
.ptag{
  font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:2px 7px; border-radius:2px; color:#fff; background:var(--cat,#666);
}
.ptag.outline{ color:var(--ink-soft); background:none; border:1px solid var(--line); font-weight:400; }
.post h3{ font-size:17.5px; font-weight:700; letter-spacing:-.01em; line-height:1.3; }
.post h3 a:hover{ color:var(--accent); }
.post .excerpt{ margin-top:6px; font-size:14.5px; line-height:1.5; color:var(--ink-soft); max-width:64ch; }
.post-meta{
  display:flex; gap:14px; align-items:center; margin-top:10px;
  font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); flex-wrap:wrap;
}

/* ---------- rail cards ---------- */
.rail{ display:flex; flex-direction:column; gap:26px; position:sticky; top:92px; }
.rail-card{
  background:#fff; border:1.5px solid var(--ink); border-radius:8px; padding:20px;
  box-shadow:var(--shadow-postcard);
}
.rail-card.accent{ background:var(--accent-soft); }
.rail-kicker{ font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.rail-card h3{ font-size:19px; font-weight:740; letter-spacing:-.015em; margin-top:6px; }
.week-list{ list-style:none; margin-top:12px; }
.week-list li{ display:grid; grid-template-columns:52px 1fr; gap:12px; padding:9px 0; border-bottom:1px dashed color-mix(in oklab, var(--ink), transparent 82%); align-items:start; }
.week-list li:last-child{ border-bottom:none; }
.week-date{
  font-family:var(--font-mono); font-size:11px; font-weight:700; line-height:1.35; color:var(--ink); text-align:center;
  border:1.5px solid var(--line); border-radius:4px; padding:4px 2px; background:var(--paper);
}
.week-date b{ display:block; font-size:14px; }
.week-list h4{ font-size:14px; font-weight:650; line-height:1.3; }
.week-list p{ font-family:var(--font-mono); font-size:11px; color:var(--ink-soft); margin-top:3px; }
/* .city-grid used to be defined here and, byte for byte, again in the
   homepage's own <style>. The card it dressed is gone — the homepage now
   sends people to a city from the banner picker — and it was never used
   anywhere else, so both copies went with it. */

/* ---------- footer ---------- */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.site-author-line{
  max-width:var(--content-max,1300px); margin:0 auto; padding:0 var(--gutter);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft);
}
.site-author-line a{ color:var(--ink); font-weight:700; }
.site-author-line a:hover{ color:var(--accent); }
/* ---------- 页脚（设计稿 7:380「底部」）----------
   白底，不再是米色带 + 2px 墨色粗线 —— 设计稿里页脚就是页面底色上
   的一块内容，唯一的线是里面那条 1px 分割线。
   padding-top:48 是设计稿里订阅带底(4710) 到标志顶(4758) 的那 48；
   站长要求两个盒子贴住，所以那段留白改成页脚自己的内边距。 */
footer{ margin-top:56px; background:#fff; }
.foot-inner, .foot-bottom{
  max-width:var(--content-max,1300px); margin:0 auto; padding:0 var(--gutter);
}
.foot-inner{
  padding-top:48px;
  display:grid; gap:0 0;
  /* 设计稿的四列：品牌 376、三栏 259 / 202 / 351，加起来正好 1188。
     用 fr 而不是定值：窄屏能按比例缩，而不是溢出。 */
  grid-template-columns:minmax(0,376fr) minmax(0,259fr) minmax(0,202fr) minmax(0,351fr);
}
.foot-brand{ display:flex; flex-direction:column; }
/* 设计稿标志 192x82。只写 height：盘上那张 PNG 是 300x126（比例 2.381）、
   设计稿是 2.341，两边都写死会把它压扁。 */
.foot-inner .logo-img{ height:82px; width:auto; }
/* 图标在标志顶下 117，标志高 82 —— 中间 35。 */
.foot-social{ display:flex; gap:20px; margin-top:35px; }   /* 24 + 20 = 间距 44 */
.foot-social .fs{ display:block; line-height:0; transition:opacity .15s ease; }
.foot-social a.fs:hover{ opacity:.6; }
/* 还没有账号的两个：渲出来但不可点，用变淡说明它不是链接。 */
.foot-social .is-off{ opacity:.35; cursor:default; }
.foot-col{ font-family:var(--font-sans); }
.foot-col .fc-h{
  /* 设计稿 37:14：Manrope ExtraBold 16/20 黑，中心线在段顶下 28。 */
  margin:18px 0 0; font-size:16px; font-weight:800; line-height:20px; color:#000;
}
/* 标题中心线在段顶下 28（框 18..38），第一条链接中心线 68 —— 所以 ul
   从 58 开始，即标题下 20。 */
.foot-col ul{ list-style:none; margin:20px 0 0; padding:0; }
/* 行高写在 li 上，不只写在里面的 <a>/<span> 上：li 自己的行盒撑不撑得住
   由它自己的 line-height 决定，只设内层的话 li 继承 body 的 1.5，量出来
   行距是 33 而不是设计稿的 30。 */
/* 字号也要写在 li 上。只给里面的 <a> 设 14 的话，li 的行盒基准（strut）
   还是继承来的 16，两者基线对齐之后行盒会被撑大，行距就不是 30 了。
   2026-09-11 站长：页脚这些 12px 全部抬到 14（14px 地板覆盖页脚全域，
   基础层这三条手机端一样继承，不能只改媒体块）。 */
.foot-col li{ font-size:14px; line-height:20px; }
.foot-col li + li{ margin-top:10px; }        /* 20 + 10 = 行距 30 */
.foot-col li a, .foot-col li span{
  font-size:14px; font-weight:500; line-height:20px; color:var(--muted);
}
.foot-col li a:hover{ color:var(--accent); }
/* 分割线（设计稿 37:12）：1px 黑、1188 宽，在段顶下 188。
   画在 .foot-bottom 的上边框上，省一个空元素。 */
.foot-bottom{
  /* 分割线落在段顶下 188：上面最高的一列是品牌列 141（标志 82 + 35 + 图标 24），
     188 - 141 = 47。上内边距 26 让底行内容落在 215，正好是设计稿的 4973。 */
  margin-top:47px; padding-top:26px; padding-bottom:40px;
  border-top:1px solid #000;
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  font-family:var(--font-sans);
}
.fb-copy{ margin:0; font-size:14px; font-weight:500; line-height:20px; color:var(--muted); }
.fb-legal{
  list-style:none; margin:0 0 0 auto; padding:0; display:flex; gap:44px;
}
.fb-legal a{ font-size:14px; font-weight:500; line-height:20px; color:var(--muted); }
.fb-legal a:hover{ color:var(--accent); }
/* 语言选择器（设计稿 37:55）：175x28、圆角 6、底色 #ECECEC、字 #333 12。
   控件本身是 chinaroutemap-i18n.js 造的，它注的那份 .lang-select 样式是
   给顶栏那条黑带配的（深底浅字），这里用更高的选择符盖掉。 */
.foot-lang{ margin-left:auto; }
.foot-lang .lang-select{
  width:175px; height:28px; padding:0 12px;
  background:var(--field); border:0; border-radius:6px;
  font-family:var(--font-sans);
  font-size:14px; font-weight:500; color:#333;
}
@media (max-width: 900px){
  .foot-inner{ grid-template-columns:1fr 1fr; row-gap:32px; }
  .foot-bottom{ gap:16px; }
  .fb-legal{ margin-left:0; gap:24px; }
  .foot-lang{ margin-left:0; }
}
@media (max-width: 560px){
  .foot-inner{ grid-template-columns:1fr; row-gap:28px; }
}

@media (max-width: 1080px){
  html.crm-js nav.primary{ display:none; }
  /* 平板档的页头与汉堡（2026-09-16 从 mobile.js 搬来）。米色方框只有这一档有。
     * 上下内边距只给平板：375px 同时匹配 ≤1080 和 ≤720，而手机档把它归零的那条
       是 header.site（0,1,1），压不过这里的 html.crm-js header.site（0,2,1）——
       搬家前两条同权重、靠后写的赢，权重一提手机页头就被撑成 88（实测），
       站长 09-11 定的是 60。所以这条单独关进 min-width:721px。 */
  html.crm-js header.site{ flex-wrap:wrap; gap:12px 16px; }
  html.crm-js header.site .header-actions{ gap:8px; }
  html.crm-js .crm-burger{ display:inline-grid; place-items:center; width:42px; height:42px; border:1.5px solid var(--ink); border-radius:8px; background:var(--paper); color:var(--ink); font-size:20px; line-height:1; }
  html.crm-js .btn-pin{ font-size:14px; padding:9px 13px; }
}
@media (min-width:721px) and (max-width:1080px){
  html.crm-js header.site{ padding-top:14px; padding-bottom:14px; }
}

/* ---------- 手机抽屉（2026-09-16 从 chinaroutemap-mobile.js 的注入字符串搬来）----------
   搬家的理由：那段 CSS 由页尾脚本注入，首帧按桌面版画、脚本到了再重排。
   现在几何全在样式表里，JS 只负责开关类名与填内容。
   * 两个按钮默认隐藏：没有 JS 时它们按不动，nav.primary 仍然可见。
   * 这些规则保持全局（不放进 @media）：和搬家前一致；字号地板那道门只扫
     媒体查询块，塞进 720 会让抽屉里 13/12/11px 的字一次性触发一批失败。 */
.crm-burger{ display:none; }
.crm-nav-close{ display:none; background:none; border:0; padding:10px; margin:-10px; justify-self:end; cursor:pointer; color:var(--ink); font-size:24px; line-height:1; }
html.crm-nav-open .crm-nav-close{ display:inline-flex; align-items:center; justify-content:center; }
html.crm-nav-open .hdr-search-go{ display:none; }
/* 抽屉：整屏白底，从页头下沿铺到屏幕底。top 由 open() 按页头实际下沿写死 ——
   页头是 sticky，滚动后状态带滑走，下沿会从 101 变成 62。 */
.crm-mnav{ position:fixed; left:0; right:0; bottom:0; z-index:190; display:none; background:#fff; overflow:auto; -webkit-overflow-scrolling:touch; padding:30px var(--gutter) 15px; }
.crm-mnav.open{ display:block; }
html.crm-nav-open{ overflow:hidden; }
.crm-mnav{ --chev:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6 9l6 6 6-6%27/%3E%3C/svg%3E"); }
.crm-mnav-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; padding:5px 0; background:none; border:0; text-align:left; cursor:pointer; font-family:var(--font-sans); font-size:13px; line-height:18px; font-weight:400; color:var(--ink-body); }
.crm-mnav-row + .crm-mnav-row{ margin-top:10px; }
/* 挂在 .sec 上而不是 .on：三级里两行都是展开态，但只有大项是绿的大字。 */
.crm-mnav-row.sec{ font-size:17px; line-height:23px; font-weight:700; color:var(--green); }
.crm-mnav-l3{ margin:10px 0 15px; }
.crm-mnav-chips{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.crm-mnav-chips .mega-chip{ flex:none; border:0; cursor:pointer; border-radius:999px; padding:4px 10px; font-family:var(--font-sans); font-size:12px; font-weight:700; color:#fff; background:#D2D7D3; }
.crm-mnav-chips .mega-chip.on{ background:var(--green); }
.crm-mnav-chips .mega-more{ margin-left:auto; font-family:var(--font-sans); font-size:12px; line-height:18px; color:var(--green); white-space:nowrap; }
.crm-mnav-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; max-height:300px; overflow-y:auto; padding-right:12px; scrollbar-width:thin; scrollbar-color:#D2D7D3 #F5F5F7; }
.crm-mnav-grid::-webkit-scrollbar{ width:3px; }
.crm-mnav-grid::-webkit-scrollbar-track{ background:#F5F5F7; border-radius:2.5px; }
.crm-mnav-grid::-webkit-scrollbar-thumb{ background:#D2D7D3; border-radius:2.5px; }
.crm-mnav-grid .mega-card{ display:block; min-width:0; text-align:center; font-family:var(--font-sans); font-size:12px; line-height:18px; color:#000; white-space:normal; overflow-wrap:anywhere; }
.crm-mnav-grid .mega-card.hide{ display:none; }
.crm-mnav-grid .mega-card > span{ font-size:12px; font-weight:400; line-height:18px; padding:0; }
.crm-mnav-grid .mega-card img{ display:block; width:100%; height:66px; object-fit:cover; border-radius:5px; margin-bottom:3px; }
.crm-mnav-grid .mega-when{ display:block; font-size:11px; color:var(--muted); }
.crm-mnav-empty{ font-family:var(--font-sans); font-size:13px; line-height:18px; color:var(--muted-soft); }
/* 箭头用 mask 不用 background-image：颜色跟 currentColor 走，展开那行是绿的箭头就跟着绿。 */
.crm-mnav-row .c{ flex:none; width:15px; height:15px; background:currentColor; transition:transform .15s ease; -webkit-mask:var(--chev) center/15px 15px no-repeat; mask:var(--chev) center/15px 15px no-repeat; }
.crm-mnav-row.on .c{ transform:rotate(180deg); }
.crm-mnav-top{ font-size:17px; line-height:23px; font-weight:700; color:var(--ink); }
.crm-mnav-top + .crm-mnav-top{ margin-top:15px; }
.crm-mnav-top.active{ color:var(--green); }
.crm-mnav-kids{ margin-top:15px; }

/* ---------- 页脚手机版（设计稿 190:2007「Mob」的 290:372 + 290:292）----------
   稿是 2 倍的，数值取一半。
   ★ 写在这里而不是 home.html：页脚是 partials/footer.html，90 个页面共用，
     写进首页那段 <style> 只有首页会变。
   ★ 左右内边距不在这一段写：页头、页脚的基础规则已经是 var(--gutter)，
     ≤720 时变量自己就是 15（--gutter-mobile）。状态带那条 12 是特意压掉它的。 */
@media (max-width:720px){
  /* ---- 页头（设计稿 250:445 里那个「头部」）----
     稿里 120 高、左右内缩 30、菜单和放大镜各 48、标志高 80 —— 折半就是
     60 / 15 / 24 / 40。标志本来就是 40，高度靠内边距 10 + 标志 40 自然到 60。
     负外边距是为了触摸区：图标本身 24，四周各留 10 的可点范围（44 见方），
     但负外边距把这层留白吃回去，图标的边缘仍然落在 15 那条线上。 */
  .hdr-search-go{
    display:inline-flex; align-items:center; justify-content:center;
    padding:10px; margin:-10px;
    justify-self:end;          /* 第三格是 1fr，不贴右就会停在格子中间 */
  }

  /* ---- 状态带（设计稿 250:433）----
     稿里内缩 24（=12）、整句话**一行**。站上现在这句在 375 下折成两行：
     带子从 39 涨到 69，等时钟脚本把它换成一串时间才缩回去 —— 每次进首页
     都要抖一下 30px，下面所有东西跟着跳。截断掉，一行到底。
     ★ 语言选择器不动（站长 2026-09-09）。它是 118x25，加上下各 7 的内边距
       正好就是这条带子的 39 —— 稿里那个 30 高在不碰它的前提下做不到，
       所以这一轮只改内缩和折行。 */
  /* min-height 预留最终高度：语言控件挂上来之前这条带子 33，之后 39，每次
     加载都要撑高 6px、下面所有东西跟着往下跳（2026-09-16 实测）。
     预留不碰语言选择器本身（站长 2026-09-09：那个不要改）。 */
  .strip{ padding-left:12px; padding-right:12px; min-height:39px; }
  .strip > div:first-child{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  /* 单列从 ≤560 提到 ≤720：否则 561~720 会是「手机的内边距和字号 + 桌面的
     两列网格」，两头不靠。 */
  .foot-inner{ padding-top:30px; grid-template-columns:1fr; row-gap:30px; }
  /* ★ 必须两级：上面有 .foot-inner .logo-img{height:82px}（0,2,0），
     文件前面那条 ≤720 的 .logo-img{height:40px}（0,1,0）压不动它 ——
     所以手机上页脚的标志至今还是 82。 */
  .foot-inner .logo-img{ height:68px; }
  .foot-social{ margin-top:20px; }
  /* 社媒图标的尺寸原来只由标记上的 width/height 属性决定，这是第一条 CSS。 */
  .foot-social .fs img{ width:30px; height:30px; }
  /* 桌面那 18px 上外边距是四列网格里跟标志对齐用的，单列堆叠后它会叠进
     row-gap，栏距变成 48 而不是 30。 */
  .foot-col .fc-h{ margin-top:0; font-size:14px; line-height:18px; }
  .foot-col li + li{ margin-top:11px; }
  .foot-bottom{
    margin-top:20px; padding-top:0; padding-bottom:15px; border-top:0;
    flex-direction:column; align-items:flex-start; gap:15px;
  }
  /* 稿里那条线宽 690 = 内容宽。border-top 画在 border-box 上，会连左右那
     15px 内边距一起铺满 375，两端各多出一截。改成这一列的第一个 flex 项，
     align-self:stretch 让它只占内容宽。 */
  .foot-bottom::before{
    content:""; align-self:stretch; height:1px; background:#000; margin-bottom:5px;
  }
  .fb-copy{ font-size:14px; line-height:14px; }
  /* ★ li 上原本没有字号和行高，只有里面的 <a> 有。li 继承 body 的 16/1.5，
     行盒被撑到 24，只改 <a> 压不下来 —— 这正是上面 .foot-col li 那两段注释
     写死的同一个坑，底行这一栏当初漏配了。 */
  .fb-legal li, .fb-legal a{ font-size:14px; line-height:14px; }
  .fb-legal{ gap:30px; flex-wrap:wrap; }
  .foot-lang{ margin-top:5px; }
  .foot-lang .lang-select{
    width:163px; height:26px; padding:0 16px; border-radius:3px; font-size:14px;
  }
}

/* ---------- print ---------- */
@media print{
  .strip, header.site, nav.primary, .crm-burger, .crm-mnav, .crm-mnav-back{ display:none !important; }
  [class*="hero"] img{ display:none !important; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;
  }
}

/* ---------- i18n: language memory now redirects inline (拍板 #7 方案 B, 2026-08-23) ----------
   语言记忆改为内联脚本 redirect：页面按语言预渲染，不再有 JS 现场翻译，
   flash-guard（crm-i18n-wait 藏 body）已随之删除。 */

/* 移动端顶条防横向溢出（与城市页内联规则同款） */

/* ---------- 账号与评论 ----------
   所有文案都在 HTML 里（构建时才会被采集为翻译 key），这里只管样子。 */
.crm-comments{ max-width:760px; }
.crm-comment-list{ list-style:none; margin:0 0 18px; padding:0; display:grid; gap:14px; }
.crm-comment{ background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:13px 16px;
  box-shadow:var(--card-shadow); }
.crm-comment-head{ display:flex; gap:10px; align-items:baseline; margin-bottom:5px; }
.crm-comment-head b{ font-weight:700; font-size:14px; }
.crm-comment-head time{ font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); }
.crm-comment p{ margin:0; font-size:14.5px; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; }
.crm-empty{ color:var(--ink-soft); font-size:14px; margin:0 0 18px; }

.crm-post{ background:var(--card);   /* 原来写的 --surface 从没定义过，帖子卡一直没底色（2026-09-03 修） */ border:1px solid var(--line); border-radius:8px; padding:16px 18px; }
.crm-tabs{ display:flex; gap:6px; margin-bottom:14px; border-bottom:1px solid var(--line); }
.crm-tab{ background:none; border:0; padding:8px 13px; font:inherit; font-size:14px; color:var(--ink-soft);
  cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; }
.crm-tab.is-on{ color:var(--ink); border-bottom-color:var(--accent); font-weight:700; }

.crm-form{ display:grid; gap:12px; max-width:420px; }
.crm-form label{ display:grid; gap:4px; font-size:13px; font-weight:600; color:var(--ink-soft); }
.crm-form input,.crm-form textarea{ font:inherit; font-size:15px; padding:9px 11px; border:1px solid var(--line);
  border-radius:6px; background:var(--paper); color:var(--ink); width:100%; }
.crm-form input:focus,.crm-form textarea:focus{ outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.crm-form small{ font-weight:400; font-size:12px; color:var(--ink-soft); }
.crm-form button[type=submit]{ justify-self:start; font:inherit; font-size:14.5px; font-weight:700;
  padding:9px 20px; border:0; border-radius:6px; background:var(--ink); color:var(--paper); cursor:pointer; }
.crm-form button[type=submit]:disabled{ opacity:.5; cursor:default; }
.crm-small{ font-size:12.5px; color:var(--ink-soft); margin:0; }

/* 提示既用于服务端英文报错，也用于页面自带的译文，所以样式保持中性 */
.crm-note{ margin:12px 0 0; padding:9px 13px; border-radius:6px; font-size:13.5px;
  background:color-mix(in srgb, var(--amber) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--amber) 35%, transparent); }
.crm-comments [hidden]{ display:none; }

/* ---------- 页头登录 ----------
   按钮在 header-actions 里；面板绝对定位挂在按钮下方。 */
.crm-account{ position:relative; display:flex; align-items:center; gap:10px; }
.crm-signin-btn{ font:inherit; font-size:13.5px; font-weight:650; padding:7px 15px; cursor:pointer;
  border:1.5px solid var(--ink); border-radius:6px; background:var(--paper); color:var(--ink); }
.crm-signin-btn:hover{ background:var(--ink); color:var(--paper); }
.crm-me{ display:flex; align-items:center; gap:9px; font-size:13.5px; }
.crm-me-name{ font-weight:700; }
.crm-me button{ background:none; border:0; padding:0; font:inherit; font-size:12.5px;
  color:var(--ink-soft); text-decoration:underline; cursor:pointer; }
.crm-me button:hover{ color:var(--accent); }
/* A native <dialog>: the browser centres it, dims behind it, closes it on
   Escape, keeps focus inside it and hands focus back to the button after. */
.crm-modal{
  width:min(400px,92vw); padding:26px 26px 24px; border:1.5px solid var(--ink);
  border-radius:12px; background:var(--paper); color:var(--ink); text-align:left;
  box-shadow:0 24px 60px -12px rgba(0,0,0,.45);
  /* A modal dialog is centred by the browser's own margin:auto — which the
     `*{margin:0}` reset at the top of this file removes. Put it back, or the
     panel sits in the top-left corner. */
  margin:auto;
}
.crm-modal::backdrop{ background:rgba(20,14,6,.55); }
.crm-modal-x{
  position:absolute; top:8px; right:12px; font-size:26px; line-height:1;
  color:var(--ink-soft); background:none; border:0; cursor:pointer;
}
.crm-modal-x:hover{ color:var(--ink); }
.crm-account [hidden]{ display:none; }

/* Google above the email form, and clearly a separate route in. */
.crm-google{ margin-bottom:6px; }
.crm-or{
  display:flex; align-items:center; gap:12px; margin:18px 0 4px;
  font-size:12px; color:var(--ink-soft);
}
.crm-or::before, .crm-or::after{ content:""; flex:1; height:1px; background:var(--line); }

/* 评论区只提示，登录本身在页头 */
.crm-askin{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; font-size:14px;
  color:var(--ink-soft); margin:0; }
.crm-askin button{ font:inherit; font-size:14px; font-weight:700; padding:0; background:none;
  border:0; color:var(--accent); text-decoration:underline; cursor:pointer; }

/* On a phone the wordmark is 190px of a 375px header, and the seal already
   says which site this is. Dropping it takes the header from two rows to one. */
@media (max-width:720px){
  /* 原来这里藏的是文字标。标志换成一张图之后没有可藏的东西了，
     窄屏改为把图缩到 40px（见 .logo-img 那条媒体查询）。 */
  /* The same height as the menu button beside it — 42px is also a comfortable
     touch target, which the 31px the padding alone gave was not. */
  .crm-signin-btn{ height:42px; padding:0 15px; }
  .crm-me{ height:42px; }
}

/* 面包屑（2026-10-01 SEO 审查 P1-4）。全站每一页都有一条，所以它必须轻：
   一行、小字号、低对比，落在页头和正文之间。文案与页头里的 JSON-LD 同源
   （build-pages.py 的 breadcrumbs()），层级是 根 › 版块 › 本页。
   ★ 八种语言的文字由 prerender 写（partials/crumbs.html 的注释解释了为什么
     不走通用翻译），分隔符用 ::before 生成、不进 DOM，免得粘进 li 的文案。
   ★ 末级是本页标题，而标题最长可以到 70 字符（城市/路线/长文都这样），
     所以最后一格必须能截断——否则一行面包屑会把整页横向撑破。 */
.crumbs{ max-width:var(--content-max); margin:0 auto; padding:14px var(--gutter) 0; }
.crumbs-list{ display:flex; flex-wrap:wrap; align-items:baseline;
  margin:0; padding:0; list-style:none;
  font-family:'Manrope',system-ui,sans-serif; font-size:12.5px; letter-spacing:.01em; }
.crumbs-item{ min-width:0; color:var(--ink-soft); }
.crumbs-item + .crumbs-item::before{ content:"\203A"; margin-right:8px; color:var(--line); }
.crumbs-item a{ color:var(--ink-soft); text-decoration:none; }
.crumbs-item a:hover{ color:var(--accent); text-decoration:underline; }
.crumbs-item [aria-current="page"]{ display:inline-block; max-width:60ch; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; color:var(--ink); }
@media (max-width:720px){
  /* 手机端字号地板是 14px（站长 2026-09-11，test_mobile_font_floor 钉着），
     桌面那条 12.5px 在窄屏必须让位。 */
  .crumbs{ padding-top:10px; }
  .crumbs-list{ font-size:14px; }
  .crumbs-item [aria-current="page"]{ max-width:20ch; }
}

/* Standalone forum account controls. */
.header-actions{display:flex;}
@media(max-width:720px){.hdr-search-go{display:none;}}