/* ==========================================================================
   通用：内容区"小标签"跟随所在板块滚动可见性变化（区别于顶部导航栏的高亮逻辑）
   ========================================================================== */

.sub-label-tag {
  display: inline-block;
  font-family: var(--font-nav); /* Red Hat Text */
  font-weight: 600; /* SemiBold */
  font-size: 16px;
  color: #000000;
  border-radius: 5px;
  padding: 4px 8px;
  margin-left: 16px;
  margin-bottom: 16px;
  background: #FFFFFF; /* 默认（未高亮）态：纯白 */
  box-shadow: 0px 0px 6px 0px rgba(128, 128, 128, 0.2); /* 无论是否高亮都有投影 — 2026-08 从0.25统一为全站主流值0.2，参考 othernetwork.io 实测同款投影(0/0/6/0.2)校准 */
  transition: background-color 0.15s ease;
}

.sub-label-tag.is-in-view {
  background: #DCCDFB; /* 所在区域可见时高亮为中紫 */
}

/* ==========================================================================
   Conference theme 板块
   ========================================================================== */

/* 2026-08 用户明确重申全站间距规范：8个tab各自对应的子标签区域之间
   （跨tab）统一都是72px。公式同其余各处：上一板块（Call for Papers）
   cfp-bg padding-bottom:32 + 这里的gap div + theme-bg自己的
   padding-top:24 = 72，gap div = 72-32-24=16px（此前误写成40，
   实际总间距变成了32+40+24=96，不对，改回16px） */
.theme-section-gap {
  height: 16px;
}

.theme-bg {
  width: 100%;
  background: var(--color-section-bg);
  /* 2026-08 Visual Refinement：跨tab板块间距整体从72收紧到64 */
  padding-top: var(--space-section-top);
  padding-bottom: var(--space-section-bottom);
}

/* 2026-08 用户明确要求：会被遮挡的地方都要补上横向滑动交互，不再是单纯
   "低于770px直接遮挡"——外层滚动容器负责横向滚动查看，隐藏滚动条本身，
   .theme-highlight-banner自身的min-width:770px保留（作为"最小可读宽度"的
   下限，低于此宽度不再压缩，交给外层滚动查看，而不是压变形） */
.theme-highlight-scroll {
  margin: 0 0 32px 0; /* 标语色块底边 -> 下方段落文字，间距32，从banner自身移到这层 */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.theme-highlight-scroll::-webkit-scrollbar {
  display: none;
}

/* ---- 高亮块"标语" ---- */
.theme-highlight-banner {
  background: #DCCDFB;
  box-shadow: 0px 0px 6px 0px rgba(128, 128, 128, 0.2); /* 2026-08 从0.25统一为全站主流值0.2 */
  /* 2026-08 用户明确要求：全站圆角统一为5（原6px） */
  border-radius: 5px;
  margin-left: 16px;
  width: calc(100% - 32px); /* 16左 + 16右，随视口宽度自适应收缩 */
  min-width: 770px;         /* 收缩下限，低于此宽度交给外层横向滚动查看 */
  padding: 14px 8px 14px 12px; /* 上14 右8(沿用) 下14 左12 */
  box-sizing: border-box;
  /* 高度不再写死，随文字换行行数自动撑开 */
}

.theme-highlight-banner p {
  font-family: var(--font-nav);
  font-weight: 700; /* Bold */
  /* 2026-08 第二轮：全站唯一的"Display"陈述句级字号，这轮从30/38明显放大到
     34/40（--fs-display/--lh-display，token定义见base.css），作为全站唯一
     真正的视觉断层/记忆点，与其余收紧的正文形成对比 */
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  /* 字号放大后，字距从原来偏松的+0.5px改为收紧的-0.3px——大字号标题收紧
     字距是常见的"更有主张"的排版处理，此前+0.5px的正值方向反而是松开的 */
  letter-spacing: -0.3px;
  margin: 0;
  text-align: left;
  width: fit-content; /* 对应 Figma 的 Hug：文字框不拉伸，始终贴左 */
  /* 跨两行的连续垂直渐变填色（180°：从上到下） */
  background: linear-gradient(180deg, var(--color-ink) 0%, #7533FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- 正文段落（含内联引用序号） ---- */
.theme-paragraphs {
  margin: 0 24px 24px 24px;
  font-family: var(--font-nav); /* Red Hat Text */
  font-weight: 400; /* Regular */
  /* 2026-08 Visual Refinement：正文统一收紧为18/27（--fs-body/--lh-body） */
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: 0px;
  color: var(--color-ink); /* 000000 75% */
}

.theme-paragraphs p {
  /* 2026-08 第二轮：段落间距从32收紧到22——这是全站最长的一段连续学术
     正文，段落间距对"阅读是否显得散"的影响最直接，收紧幅度也最大 */
  margin: 0 0 22px 0;
}

.theme-paragraphs .theme-indented {
  margin-left: 101px;
  margin-bottom: 22px;
}

.theme-paragraphs .theme-indented p {
  margin-bottom: 22px;
}

.theme-paragraphs .theme-indented p:last-child {
  margin-bottom: 0;
}

.theme-paragraphs p:last-child {
  margin-bottom: 0;
}

/* 内联引用序号组：整组作为一个容器，与前后文字的间距、组内数字间的间距统一 */
.cite-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 4px; /* 与左侧文字、右侧句号的间距 */
}

.cite {
  /* 2026-09 用户明确要求：形状改成圆角正方形（不再是原来"宽度随数字自适应
     的胶囊形"），数字上下左右的空白都在原基础上各增加1px、居中对齐。
     推算：原高度17px = 字号15 + 上下各1px；+1px后上下各2px，高度变成
     15+2+2=19px。原左右内边距4px；+1px后左右各5px，单个数字（宽度约
     15*0.55≈8.25px）算出来的宽度=8.25+5+5≈18.25px，和上面推出的19px
     高度非常接近——用19×19px做正方形，两位数（目前只有"11"这一个）会比
     其余一位数的略挤一点，但视觉上仍然居中，这是固定正方形容纳不定长
     数字的正常取舍，不专门为它再单独放大整个方框 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  padding: 0;
  flex-shrink: 0;
  font-family: var(--font-nav);
  font-weight: 500; /* Medium */
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0px;
  color: #000000;
  background: #DCCDFB;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.12s ease, font-weight 0.12s ease;
  vertical-align: middle;
  box-sizing: border-box;
}

.cite:hover,
.cite.is-hover {
  background: var(--color-accent-orange-lt);
  font-weight: 600; /* SemiBold 高亮态 */
}

/* ---- 虚线分隔线 ----
   2026-08 用户明确要求：去掉这条线本身，但保留原来"正文到线"的32px间距——
   下方 References 标签的顶部边缘现在正好落在原来这条虚线所在的位置。
   不删除HTML里的空div（避免改动结构），改用display:none隐藏，间距改由
   .theme-references自己的margin-top:32px承担（原来是靠这条线的
   margin-top:32+线本身+margin-bottom:16间接给出这32px间距的一部分） */
.theme-divider-dotted {
  display: none;
}

/* ---- References 折叠区 ---- */
.theme-references {
  margin: 32px 24px 32px 24px; /* 上32px = 原虚线的margin-top，让标签顶边落在原虚线位置 */
  position: relative;
}

/* References 标签无论收起/展开都是与面板等宽的长条（不再是收起态下貼合文字的小药丸），
   颜色只跟"面板是否展开"绑定：收起=默认紫，展开=橙，且展开期间不再随 hover 其他序号变化，
   只有点击收起图标回到收起态才会变回紫色 */
.references-tag {
  /* 字号和整条高度需要和顶部Tab栏当前的真实渲染尺寸保持一致——顶部Tab的字号/高度
     会随 nav.js 里 layoutHeader() 的四段式自适应逻辑动态变化，不是一个固定值，
     所以这里改由 nav.js 的 syncReferencesTagSize() 在每次顶部Tab布局重算后，
     直接读顶部Tab当下的真实computed font-size/height 覆盖到内联样式上；
     下面写的24px/12px内边距只是JS执行前的兜底初始值，不是最终效果 */
  display: flex;
  align-items: center; /* 改用flex居中：高度由JS直接设成和顶部Tab一致的px值后，
                            不再依赖上下padding撑出高度，文字改为在固定高度内垂直居中 */
  width: 100%;
  font-family: var(--font-nav);
  font-weight: 600;
  font-size: 24px;
  color: #000000;
  background: #DCCDFB; /* 收起态（默认）：中紫，与引用序号默认态同色 */
  border: none;
  border-radius: 5px; /* 收起态：四角都是5 */
  padding: 0 16px; /* 左右16px不变；上下不再用padding撑高度 */
  text-align: left; /* <button> 默认会把文字居中，这里改回左对齐 */
  cursor: pointer;
  transition: background-color 0.12s ease;
  box-sizing: border-box;
  /* 投影加在标签条本身上，展开时贴着下方面板顶边，视觉上自然叠加成一个整体，
     不再需要面板自己再重复一层投影（两层投影在拼接处叠加会显得很奇怪） */
  box-shadow: 0px 0px 6px 0px rgba(128, 128, 128, 0.2); /* 2026-08 从0.25统一为全站主流值0.2 */
}

.theme-references.is-expanded .references-tag {
  border-radius: 5px 5px 0 0; /* 展开态：仅顶部两角圆角，与面板顶边拼接 */
  background: var(--color-accent-orange-lt); /* 展开态：橙色，且状态固定，不随内部 hover 变化 */
}

/* 2026-08 第二轮：收起态之前完全没有hover反馈——补一个轻微加深的悬停背景，
   预告"这里可点开"，展开态维持固定橙色不受hover影响（保持原有规则不变） */
.theme-references:not(.is-expanded) .references-tag:hover {
  background: #CFBBFB; /* 比默认态#DCCDFB略深一档的同色系紫 */
}

.references-panel {
  margin-top: 0; /* 与上方 References 标签底边贴合 */
  background: #FFFFFF;
  border-radius: 0 0 5px 5px; /* 左上右上0，左下右下5 */
  /* 2026-09 用户明确要求：全站展开卡片的收起icon统一为"距上方文字/距右侧
     卡片边缘/距下方卡片边缘均16px"。右/下边缘本来就是16px(见下方
     .references-collapse-btn)不用动；这里的padding-bottom从32px改成
     50px，反推方式：icon本身高18px+下方偏移16px=占用34px，"文字到icon
     顶边"再留16px，34+16=50px */
  padding: 16px 56px 50px 16px; /* 上16 右56(右列到面板右边缘的内边距) 下50(给右下角收起图标留出16/16/18) 左16 */
  position: relative;
}

.references-panel[hidden] {
  display: none;
}

/* 两列容器：列间距固定44，两列宽度随窗口自适应等分（flex:1 1 0 保证两列始终等宽）；
   收起图标以绝对定位浮在右下角，不占布局空间，靠"前6条在左/其余在右"的分配
   天然在右列底部留出空白来避让，不依赖 padding 撑开 */
.references-columns {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

.references-list {
  flex: 1 1 0;
  min-width: 0; /* 允许列在收缩时把宽度让给文字换行，而不是被内容撑开溢出 */
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.references-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px; /* 徽章到右侧文字的间距 */
  cursor: pointer; /* 整行可点击：跳转回正文对应引用序号所在段落 */
}

/* 移动端：两列堆叠为单列，因固定"前6条在左/其余在右"的分配规则，
   纵向堆叠后天然保持 1→10 的顺序，不会错序 */
@media (max-width: 768px) {
  .references-columns {
    flex-direction: column;
  }
}

.ref-num {
  /* 2026-08 用户核对纠正：与正文的.cite同一套缩小规格——高度=文字行高+2px */
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 17px;
  padding: 0 4px;
  box-sizing: border-box;
  font-family: var(--font-nav);
  font-weight: 500; /* Medium 默认态 */
  font-size: 15px;
  line-height: 1;
  color: var(--color-ink);
  background: #DCCDFB; /* 默认态 */
  border-radius: 5px;
  transition: background-color 0.12s ease, font-weight 0.12s ease;
}

.references-list li.is-hover .ref-num {
  background: #FFE5BF; /* 高亮态 */
  font-weight: 600; /* SemiBold 高亮态 */
}

.ref-text {
  flex: 1 1 auto;
  min-width: 0; /* 保证列变窄时文字正常换行，而不是撑破父容器 */
  overflow-wrap: anywhere; /* DOI 链接等长英文字符串没有天然断点，列变窄时需要强制断行，否则会溢出列宽 */
  font-family: var(--font-nav);
  font-weight: 300; /* Light 默认态 */
  /* 2026-08 Visual Refinement：引注类文字属于全站最小一档，从18/24收紧为
     14/19（--fs-caption/--lh-caption） */
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  letter-spacing: 0px;
  color: var(--color-ink);
  transition: font-weight 0.12s ease;
}

.references-list li.is-hover .ref-text {
  font-weight: 400; /* Regular 高亮态 */
}

.ref-text a {
  color: inherit;
  text-decoration: none;
}

.references-collapse-btn {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 18px; /* 等比缩小为原来(36)的一半，右/下边距不变 */
  height: 18px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.references-collapse-btn img {
  width: 100%;
  height: 100%;
  max-width: none;
}

/* ---- 箭头分隔线 ----
   与上一模块（References 展开面板）之间的 32px 间距，由 .theme-references 自身的
   margin-bottom:32px 提供（两者是普通块级兄弟元素，纵向 margin 会自动合并，
   这里不再重复设置 margin-top，避免叠加成 64px） */
.theme-arrow-divider {
  margin: 0 24px 32px 24px; /* 下方到"线框标语"32px，与 Figma 中 92-(32+28)=32 一致；
                               左右24与 References 面板同一套边距，宽度天然与其对齐 */
  display: flex;
  justify-content: space-between; /* 箭头组由 JS 按当前容器宽度动态生成，两端贴边、间距均匀铺满 */
  align-items: center;
  font-family: var(--font-nav);
  font-weight: 400; /* Regular */
  /* 2026-08 Visual Refinement：与正文一起等比收紧（原24/28） */
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow: hidden; /* 兜底：极端窄宽度下避免溢出 */
  /* 2026-08 用户要求：网站里所有箭头分割线的填色统一改为黑到紫的纵向渐变
     （上黑下紫），黑/紫两个色值复用 .intro-gradient-block 同一组数值——
     从纯色var(--color-primary-purple)改为background-clip:text渐变 */
  background-image: linear-gradient(180deg, var(--color-ink) 0%, var(--color-primary-purple) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.theme-arrow-divider span {
  flex-shrink: 0;
}

/* ---- 线框"标语"（We invite contributions...）：改用用户导出的 4x 成品素材（含文字+
   描边"错位方框"轮廓+投影，均已烘焙在图内），保证与 Figma 完全一致，不再手绘 SVG ----
   2026-08 用户明确要求：会被遮挡的地方都要补上横向滑动交互——这张图片是
   固定854px宽的素材，本身不能压缩变形，窄屏下交给外层滚动容器查看 */
.theme-boxed-scroll {
  /* 2026-08 用户核对纠正：左边距从16px改为24px，与上方References标签条的
     左边缘对齐（References左边缘=24px，原来这里的16px是没对照过的估测值） */
  margin: 0 0 32px 24px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.theme-boxed-scroll::-webkit-scrollbar {
  display: none;
}

.theme-boxed-banner img {
  display: block;
  width: 854px;
  height: 78px;
  max-width: none;
}

/* 2026-08 用户明确要求：视口<=500px时，这块"线框标语"改成等比缩放（不再
   靠横向滚动查看），左右边缘距页面左右边缘各16px；且必须和上方箭头分隔线
   的左右边缘保持对齐——箭头分隔线原来是24px左右边距，这里一并改成16px，
   两者才能真正对齐。图片本身换成用户导出的手机端专用换行版（见index.html
   的<picture>），不是同一张图片缩小，是换了一张断行方式不同的新素材；
   缩放交给width:100%（配合img的max-width:none覆盖全局限制、height:auto
   保持新图片自身比例），不用JS/transform硬算缩放系数 */
@media (max-width: 500px) {
  .theme-arrow-divider {
    margin-left: 16px;
    margin-right: 16px;
  }
  .theme-boxed-scroll {
    margin-left: 16px;
    margin-right: 16px;
    overflow-x: visible; /* 等比缩放后不会再溢出，不需要横向滚动 */
  }
  .theme-boxed-banner img {
    width: 100%;
    height: auto;
    max-width: none;
  }
}

/* ---- 分点式标签组 ----
   自适应规则：容器右侧固定距页面右边缘24px（与 References 面板/箭头分隔线同一套
   右边距），左侧仍保持406px大段留白与 Figma 一致；单个标签的文字框改为弹性拉伸
   （flex:1），随容器宽度变化自动伸缩，不再是写死的967px定宽 */
/* 2026-08 用户明确要求的自适应规则：容器左侧固定锚定在现在的位置
   （margin-left:406px这个固定像素值本身随视口收窄不会移动，天然满足
   "左侧始终固定"）；文字框正常情况下随容器变窄继续自适应收缩换行，但每个
   标签的文字最多只允许两行——一旦有任意一个标签在继续收缩的过程中即将
   换到第三行，就不再继续收缩，转为整组水平方向可滑动查看（不显示滚动条
   UI本身），具体的"是否需要冻结/冻结到多宽"由 theme-section.js 的
   initThemeTagListAdaptive() 动态测量决定，这里的CSS只负责默认（流式）
   状态和滚动容器本身的滚动行为 */
.theme-tag-list-scroll {
  margin: 0 24px 0 406px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.theme-tag-list-scroll::-webkit-scrollbar {
  display: none;
}

/* 2026-09 用户明确要求：视口500~1425px这个中间范围内，原来左侧406px留白
   是写死不变的，导致容器可用宽度只随视口收窄而收窄，标签文字框很快撑到
   "冻结宽度"、多出来的部分只能靠隐藏滚动条的横向滚动才能看到——观感上像
   被遮挡了一截。现在改成：右侧仍然固定贴24px不动，左侧留白跟着视口宽度
   连续变窄——从1425px时的406px，线性过渡到500px时的24px（24px正好是
   下方<=500px断点本来就在用的值，也是上方"We invite contributions..."
   线框标语/References标签条共用的左边缘，两头都能对上，过渡不会有跳变），
   给标签文字框腾出更多空间，尽量避免/推迟需要横向滚动才能看全的情况；
   左侧留白最多只会缩到和线框标语左边缘对齐，不会再继续往左超出。
   1425px以上维持上面写死的406px不变（Conference theme不在"大屏放大"
   范围内），500px及以下维持原有的24px不变，都不受这条新规则影响 */
@media (min-width: 500.02px) and (max-width: 1425px) {
  .theme-tag-list-scroll {
    margin-left: calc(24px + (100vw - 500px) * 382 / 925);
  }
}

.theme-tag-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%; /* 默认铺满滚动容器、随视口自适应收缩；JS判定需要冻结时会
                  改写成具体像素值，此时若超出滚动容器宽度就会出现横向滚动 */
}

/* 2026-08 用户明确要求的新规则：紫色标签框不再撑满整行流式伸缩，改为固定
   宽度（宽度由theme-section.js按"第5条标签单行不换行的临界宽度"统一计算，
   见下方.theme-tag-item p），整组（圆点+紫色框）右对齐——width:fit-content
   让.theme-tag-item自身收缩到内容宽度，margin-left:auto把这个宽度不固定的
   块推到行的最右侧；空间足够时贴住右边缘，空间不够时auto退化为0、整组自然
   从左边缘开始向右溢出，交给外层.theme-tag-list-scroll的横向滚动查看
   （避免用justify-content:flex-end在溢出时把内容"顶"到不可滚动查看的左侧） */
.theme-tag-item {
  display: flex;
  align-items: flex-start;
  width: fit-content;
  margin-left: auto;
}

.theme-tag-item .dot {
  flex-shrink: 0;
  width: 36px; /* 项目符号预留列宽，与文字方框之间零间距——两者紧贴 */
  padding-top: 10px; /* 让圆点对齐文字方框的第一行，而不是整个（可能多行）方框的垂直居中 */
  display: flex;
  justify-content: center;
}

.theme-tag-item .dot::before {
  content: "•";
  /* 2026-08 Visual Refinement：随右侧标签文字等比缩小（原24px），保持与
     文字的相对比例不变 */
  font-size: 18px;
  line-height: 1;
  /* 2026-08 用户明确要求：填色透明度改为75%（原来是纯黑#000000不透明度100%） */
  color: var(--color-ink);
}

.theme-tag-item p {
  /* 2026-08 用户明确要求：不再flex:1撑满，改为theme-section.js动态算出的
     固定宽度（内边距减半为12px后，"第5条标签单行不换行的临界宽度"），
     所有标签统一使用这一个宽度 */
  flex: 0 0 auto;
  width: auto; /* 初始值，JS会在DOMContentLoaded后立即改写为具体像素值 */
  box-sizing: border-box;
  background: var(--color-tag-bg);
  border-radius: 5px;
  padding: 10px 12px; /* 上下10不变；左右从24减半为12 */
  font-family: var(--font-nav);
  font-weight: 500; /* Medium */
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  color: var(--color-ink);
  margin: 0;
}

/* 2026-08 用户明确要求：视口<=500px（全站冻结断点）时——
   1. 整组（圆点+紫色框）左侧留白从桌面端的406px改成24px，让"圆点"的
      左边缘和上方"We invite contributions..."线框标语的左边缘
      （.theme-boxed-scroll的左margin也是24px）对齐；
   2. 紫色文字框改为自适应收缩（不再是theme-section.js算出来的固定像素
      宽度）——框的右边缘距页面右边缘固定16px，宽度由.theme-tag-item的
      flex布局自动算出（100%容器宽度减去左侧圆点列），文字在框内正常
      换行，不再需要横向滚动才能看到紫色框的内容。
   这条规则必须放在上面 .theme-tag-item / .theme-tag-item p 的基础规则
   之后——CSS按源码顺序层叠，选择器权重相同时写在后面的才会生效，放前面
   会被后面的桌面端基础规则盖掉（之前踩过这个坑）。具体的"不再写死内联
   宽度"由theme-section.js里的window.innerWidth<=500分支负责 */
@media (max-width: 500px) {
  .theme-tag-list-scroll {
    margin-left: 24px;
    margin-right: 16px;
  }
  .theme-tag-item {
    width: 100%;
    margin-left: 0;
  }
  .theme-tag-item p {
    flex: 1 1 auto;
    width: auto;
    min-width: 0; /* flex子项默认min-width:auto，会被文字的自然内容宽度撑开、
      拒绝收缩到比内容更窄——这里显式清零，才能让文字真正换行收进容器里，
      而不是把容器撑爆 */
  }
}

/* 2026-08 用户明确要求：视口<=500px时，"Designing with Hybrid
   Intelligence..."这块标语取消强制两行换行，改成连贯的一段文字，根据容器
   宽度自动换行——.theme-highlight-banner本身的16px左右边距（margin-left:16px
   + width:calc(100%-32px)）在桌面端已经是这个数值了，之前窄屏下不生效
   是因为min-width:770px这个收缩下限挡住了，这里解除；.theme-highlight-break
   这个具名class的<br>只在这个断点隐藏（配合index.html里手动加的空格，
   隐藏后两句话之间保留一个空格，不会读起来粘在一起）；width:fit-content
   改回100%让文字真正利用整个容器宽度去自动换行，而不是按内容自身宽度hug。
   这条规则必须放在最后——CSS按源码顺序层叠，选择器权重相同时写在后面的
   才会生效 */
@media (max-width: 500px) {
  .theme-highlight-banner {
    min-width: 0;
  }
  .theme-highlight-banner p {
    width: 100%;
    white-space: normal;
    /* 用户先要求缩小2个字号(Display→H2→H3, 34/40→22/27)，这轮又要求
       增大1个字号，退回H2档(26/31)——两次改动加起来相当于最终只比原始
       Display档小了1级 */
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
  }
  .theme-highlight-banner br.theme-highlight-break {
    display: none;
  }
}