/* QQPOKER 首页样式 —— 移动优先，一套 DOM 兼容 PC
 *
 * 改配色只动下面这段 :root。
 * 布局尺寸沿用原版节奏：首屏 2.09:1，特性带桌面端固定 386px 高，代言人卡 312×580。
 */

:root {
  --brand:        #12639F;   /* 主色，取自 LOGO 的 #115C93，略提亮让白字更稳 */
  --brand-light:  #2E93D6;   /* 主色浅调，用于渐变与高亮 */
  --brand-dark:   #FFFFFF;   /* 主色上的文字色。深蓝底必须用白字，不能沿用深色 */
  --ink:          #1E1E1E;   /* 正文黑 */
  --ink-soft:     #6B7280;   /* 次要文字 */
  --line:         #E5E7EB;   /* 分隔线 */
  --page:         #FFFFFF;
  --footer-bg:    #F8F8F8;
  --header-bg:    rgba(0, 0, 0, .8);

  --wrap:  1200px;           /* 桌面内容最大宽度 */
  --pad:   16px;             /* 窄屏左右留白 */
  --cta-h: 56px;             /* 底部常驻按钮高度 */

  --font: "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--page);
  line-height: 1.6;
  /* 给底部常驻按钮让位，否则会盖住页脚最后一行 */
  padding-bottom: calc(var(--cta-h) + env(safe-area-inset-bottom, 0px));
}

img { max-width: 100%; height: auto; display: block; border: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ============ 页头 ============ */

/* 原版是 fixed —— 浮在首屏图之上、不占文档流。用 sticky 的话整页会被顶下去 46px。 */
.hdr {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 46px;
  padding: 0 var(--pad);
  background: var(--header-bg);
  backdrop-filter: blur(6px);
  color: #fff;
}

.logo { display: inline-flex; align-items: center; flex-shrink: 0; }
/* 页头 34px 高，页头总高 46px，上下各留 6px。
 * 两个文件由 tools/make-logo.py 生成：
 *   logo.webp       浅蓝、无标语，给深色页头
 *   logo-dark.webp  主色、含标语，给浅色页脚
 * 换品牌只要替换 brand/logo-lockup.png 再跑一次那个脚本。 */
.logo-img { display: block; height: 34px; width: auto; }

.nav-pc { display: none; }

/* 窄屏右上角的下载按钮。宽屏由 .nav-pc 里那个接管，这里隐藏 */
.hdr-cta {
  flex-shrink: 0; height: 32px; padding: 0 18px;
  font-size: 13px; letter-spacing: .3px;
  box-shadow: 0 2px 10px rgba(9, 58, 95, .45), inset 0 1px 0 rgba(255, 255, 255, .25);
}

/* ============ 首屏 ============ */

.hero { position: relative; overflow: hidden; background: #000; }
.hero-track { display: flex; transition: transform .5s cubic-bezier(.4, 0, .2, 1); }
.hero-track > picture { flex: 0 0 100%; min-width: 0; }
/* 窄屏 375×540（约 1:1.44），跟原版一致 */
.hero-track img { width: 100%; aspect-ratio: 375 / 540; object-fit: cover; display: block; }

/* 源码：.slick-dots { bottom: 60px; gap: 3px }，圆点 10px 宽 */
.hero-dots {
  position: absolute; left: 0; right: 0; bottom: 60px;
  z-index: 3;
  display: flex; justify-content: center; gap: 3px;
}
.hero-dots button {
  width: 10px; height: 3px; padding: 0;
  border-radius: 2px; background: rgba(255, 255, 255, .45);
  /* 首屏图有深有浅，加一点投影保证浅色图上也看得见 */
  box-shadow: 0 0 3px rgba(0, 0, 0, .45);
  transition: background .25s, width .25s;
}
.hero-dots button[aria-selected="true"] { background: #fff; }

/* 下载按钮压在首屏图的底部，跟原版一样（不是图下面另起一条白底）。
   源码：.downloadBar.mobile{padding:30px 0 10px}  .downloadBtns{gap:8px;padding:0 16px}  .dlBtn{height:40px} */
.hero-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  display: flex;
  gap: 8px;
  padding: 30px 16px 10px;
  background: linear-gradient(to top, rgba(0, 0, 0, .5), transparent);
}

/* 原站是 height:40 / font-size:12 / letter-spacing:-.5px，字挤成一团不好看，
   这里放宽到 44 / 14 / 0。内层那道 inset 高光是给渐变按钮做立体感的，
   没有它在深蓝上会显得很平。 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  flex: 1; min-width: 0; height: 44px; padding: 0 10px;
  font-size: 14px; white-space: nowrap;
  border-radius: 999px;
  font-weight: 600;
  color: var(--brand-dark);
  background: linear-gradient(180deg, var(--brand-light), var(--brand));
  box-shadow: 0 6px 16px rgba(9, 58, 95, .38),
              inset 0 1px 0 rgba(255, 255, 255, .28);
  transition: filter .2s, transform .15s, box-shadow .2s;
}
.btn:hover { filter: brightness(1.06); box-shadow: 0 8px 20px rgba(9, 58, 95, .45), inset 0 1px 0 rgba(255, 255, 255, .3); }
.btn:active { transform: translateY(1px); box-shadow: 0 3px 10px rgba(9, 58, 95, .4), inset 0 1px 0 rgba(255, 255, 255, .2); }

.btn-sm {
  display: inline-flex; align-items: center; height: 32px; padding: 0 16px;
  border-radius: 999px; font-size: 14px; font-weight: 600;
  color: var(--brand-dark);
  background: linear-gradient(180deg, var(--brand-light), var(--brand));
}

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  height: 42px; padding: 0 28px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 14px; color: var(--ink);
  transition: border-color .2s, color .2s;
}
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }

/* 平台小图标，纯 CSS 画的，换成自己的 svg 就替掉 */
/* 源码 .dlIcon 窄屏是 20×20 */
/* 描边式图标，颜色跟按钮文字走。原来是用 CSS 渐变遮罩拼的几何形状，
   缩到 20px 只剩一个点和一个方块，看着像图没加载出来。 */
.ico {
  width: 19px; height: 19px; flex-shrink: 0;
  fill: none;
  stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ============ 特性带 ============ */

/* 以下数值全部照原站源码来（p__home__index.chunk.css 里的 .container / .textArea /
   .numberBg / .titleBg / .mainBg 及其 .mobile___ 变体）。
   窄屏：min-height 336，容器 padding 20px 14px 0，文字竖排，三个装饰层绝对定位叠在底下。 */
.band {
  position: relative;
  overflow: hidden;
  min-height: 336px;
  padding: 20px 14px 0;
  background: linear-gradient(to right, #fff 18.19%, var(--tint, #f7f7f7) 80.31%);
}
.band.flip { background: linear-gradient(to right, var(--tint) 21.67%, #fff 80.9%); }

/* 主图：贴带底，按 --shot-w 定宽（高度自适应，超出部分裁掉），横向锚在文字对侧。
   等价于原版的 background-size:<N>px auto + background-position:<侧> bottom。
   不能用 object-fit:contain —— 那会把整张图缩进盒内，比原版小一圈。
   另外原版那个 ±60px 是入场动画的位移，不是版式，别照抄。 */
.band .shot {
  position: absolute;
  bottom: var(--shot-y, 0px);
  right: var(--shot-x, 0px);
  z-index: 2;
  width: var(--shot-w, 385px);
  height: auto;
  max-width: none;
  pointer-events: none;
}
.band.flip .shot { right: auto; left: var(--shot-x, 0px); }

/* 大号序号 01～06：跟原站一样用图。
   那套窄体字形系统字排不出来，之前用 scaleX 硬压，形不对。
   图片路径在本文件末尾按 .band-N 指定（不能写进 HTML，见那里的注释）。 */
.band .num {
  position: absolute;
  top: 0;
  right: 20px;
  bottom: 0;
  z-index: 0;
  width: var(--num-w, 160px);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: top 30px center;
  font-size: 0;              /* 用图，文字只作为语义兜底 */
  pointer-events: none;
  user-select: none;
}
.band.flip .num { right: auto; left: 20px; }

/* 英文水印：同样用图，距带底 72px、高 100px、横向距边 15px */
.band .wm {
  position: absolute;
  bottom: 72px;
  right: 15px;
  left: 15px;
  z-index: 1;
  height: 100px;
  margin: 0;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: right center;
  font-size: 0;              /* 有图，文字只作为语义兜底 */
  pointer-events: none;
  user-select: none;
}
.band.flip .wm { background-position: left center; }

/* 文字层：普通文档流，压在装饰层之上 */
.band .copy { position: relative; z-index: 3; width: 100%; }
.band.flip .copy { text-align: right; }

/* 标题的斜体是 skew(-10deg) 做的，不是 italic —— 原站字体 Alimama ShuHeiTi 没随包，
   这里退到系统字，形不完全一样但版式对得上 */
.band h2 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.4;
  transform: skew(-10deg);
  transform-origin: left center;
}
.band.flip h2 { transform-origin: right center; }
.band .sub { margin-top: 5px; font-size: 24px; font-weight: 400; line-height: 30px; }
.band .desc { margin-top: 6px; font-size: 14px; line-height: 24px; opacity: .8; max-width: 100%; }
.band .desc br { display: none; }   /* 窄屏让它自然折行 */

/* 第 2 带在窄屏换成专属图 */
.band .shot-m { display: block; }
.band .shot-pc { display: none; }

/* ---- 每一带的图片与偏移 ----
 * 图片路径必须写在这里、不能写进 HTML 的内联变量：
 * url() 在 var() 里是按「样式表所在位置」解析相对路径的，
 * 写在 HTML 里会被当成 assets/images/… 找不到文件。
 * 换图就改这几行。
 */
.band-1 .num { background-image: url(../images/num-1.webp); }
.band-2 .num { background-image: url(../images/num-2.webp); }
.band-3 .num { background-image: url(../images/num-3.webp); }
.band-4 .num { background-image: url(../images/num-4.webp); }
.band-5 .num { background-image: url(../images/num-5.webp); }
.band-6 .num { background-image: url(../images/num-6.webp); }

.band-1 .wm { background-image: url(../images/wm-1.webp); }
.band-2 .wm { background-image: url(../images/wm-2.webp); }
.band-3 .wm { background-image: url(../images/wm-3.webp); }
.band-4 .wm { background-image: url(../images/wm-4.webp); }
.band-5 .wm { background-image: url(../images/wm-5.webp); }
.band-6 .wm { background-image: url(../images/wm-6.webp); }

/* 主图的每带偏移，对应原版的 background-position */
.band-1 { --shot-x: -5px; }                    /* right -5px bottom */
.band-5 { --shot-y: -18px; }                   /* right bottom -18px */
.band-6 { --shot-y: -10px; }                   /* left  bottom -10px */

/* 序号宽度：原版第 1 带 120px（“01”窄），其余 160px */
.band .num { --num-w: 160px; }
.band-1 .num { --num-w: 120px; }

/* ============ 代言人 ============ */

/* 原版是「标题区 158 + 轮播 500 + 下留白 80」，整块 738 高。
   实际卡片只有 483，上下空得太厉害，这里收到 104 + 492 + 36。 */
.stars { padding: 0 0 36px; }

.sec-title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 104px;
  padding: 0 var(--pad);
  font-size: 24px;
  font-weight: 700;
  text-align: center;
}

/* 窄屏是居中层叠轮播，不是横滑：
   卡片全部绝对定位叠在中心，活动卡放大居中，左右两张各偏 210px、缩到 .87、透明度 .4。
   位移由 app.js 逐张写内联 transform（原站也是这么做的）。 */
.star-row {
  position: relative;
  height: 492px;              /* 活动卡 483，留一点点呼吸即可 */
  overflow: hidden;
  padding: 0;
}

/* 原版基础卡 226×421，活动卡 260×483；非活动再乘 scale(.87) → 视觉 197×366 */
.star {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 226px;
  height: 421px;
  transform: translate(-50%, -50%);
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  /* 代言人图是 482×900：卡片本身斜 3.95°，四角原本透明，会露出白底。
   * 已在素材上把两侧显示不全的部分裁掉，比例 0.536 与本容器一致，
   * 所以这里不需要铺底色。换图时请沿用 482×900。 */
  transition: transform .45s ease, opacity .45s ease, width .45s ease, height .45s ease;
}
.star.is-on { width: 260px; height: 483px; }
.star img { width: 100%; height: 100%; object-fit: cover; }

.star-info {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 16px 18px 20px;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
}
.star-name { font-size: 18px; font-weight: 700; }
.star-desc {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.55;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .35s, opacity .3s;
}
.star.is-on { box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
.star.is-on .star-desc { max-height: 140px; opacity: 1; }

/* ============ 资讯 ============ */

/* 原版：整块 2053 高 = 标题区 117 + 列表 1833 + 「查看更多」43 + 留白 */
.news { padding: 0 0 40px; }

.news-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--pad);
}
.news-head .sec-title { height: 84px; padding: 0; text-align: left; }   /* 原版 117，同样偏空 */
.news-arrows { display: none; gap: 8px; }   /* 窄屏是竖列，用不上左右箭头 */
.arw {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line);
  font-size: 20px; line-height: 1; color: var(--ink-soft);
  transition: border-color .2s, color .2s, opacity .2s;
}
.arw:hover { border-color: var(--brand); color: var(--brand); }
.arw[disabled] { opacity: .35; cursor: default; }

/* 窄屏是竖向时间线列表（不是横滑）—— 原版手机版就是这么排的：
   每张卡 345×291，左侧一个 10px 圆点连着 1px 竖线，
   卡内从上到下是 日期 / 封面 / 标题。 */
.news-row {
  display: block;
  padding: 18px var(--pad) 0;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 291px;
  padding-left: 22px;      /* 给左边时间线让位 */
}
/* 时间线圆点 */
.card::before {
  content: "";
  position: absolute;
  left: 2px; top: 8px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--brand);
  z-index: 1;
}
/* 时间线竖线，最后一张不画。
   不能用 --line（#E5E7EB）—— 1px 压在白底上肉眼基本看不见，
   看起来就像线断了。用圆点同色系的淡蓝。 */
.card::after {
  content: "";
  position: absolute;
  left: 7px; top: 22px; bottom: -1px;
  width: 1px;
  background: rgba(18, 99, 159, .28);
}
/* 最后一张也要画线，否则最后那张图旁边空一条，看着像断了 */
.card:last-child::after { bottom: 0; }

.card time { order: 1; font-size: 14px; line-height: 30px; color: var(--ink); font-weight: 600; }
.card img {
  order: 2;
  width: 100%;
  aspect-ratio: 323 / 182;
  object-fit: cover;
  border-radius: 12px;
  background: #f2f2f2;
  margin-top: 12px;
}
.card h3 {
  order: 3;
  margin-top: 12px;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card:hover h3 { color: var(--brand); }

.news-more { display: flex; justify-content: center; padding-top: 6px; }

/* ============ 页脚 ============ */

/* 原版页脚 291 高：Logo 136×38（距顶 50）、认证图 94×94、版权行（距顶 172） */
/* 原站这里是 min-height:291px，那个高度是为了容纳认证徽章的。
   徽章去掉之后不能再撑着，否则下面空出一大块。改成由内容决定高度。 */
.ftr {
  padding: 40px var(--pad) 30px;
  background: var(--footer-bg);
  text-align: center;
}
.ftr .logo { justify-content: center; }
.logo-dark .logo-img { height: 52px; }   /* 页脚有空间，放完整版（含标语） */
.ftr-domain { margin-top: 4px; font-size: 12px; color: var(--ink-soft); }
.cert { width: 94px; height: 94px; object-fit: contain; margin: 10px auto 0; }
.copy-line { margin-top: 10px; font-size: 13px; color: var(--ink-soft); }
.ftr-tip { margin-top: 6px; font-size: 12px; color: var(--ink-soft); padding-bottom: 20px; }

/* ============ 常驻底部按钮 ============ */

.cta-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  height: calc(var(--cta-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  font-size: 16px; font-weight: 600; letter-spacing: .3px;
  color: var(--brand-dark);
  background: linear-gradient(180deg, var(--brand-light), var(--brand));
  box-shadow: 0 -6px 20px rgba(0, 0, 0, .18),
              inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: filter .2s;
}
.cta-bar:hover { filter: brightness(1.06); }
.cta-bar:active { filter: brightness(.94); }

/* ============ 滚动入场 ============ */
/* 由 app.js 加 .in 触发；关了动画偏好的用户直接显示 */

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .5s, transform .5s; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-track { transition: none; }
}

/* ============================================================
   平板 / 桌面
   ============================================================ */

@media (min-width: 768px) {
  :root { --pad: 40px; }

  body { padding-bottom: 0; }          /* 宽屏不显示常驻按钮，也就不用垫底 */
  .cta-bar { display: none; }

  .hdr { height: 60px; }
  .hdr-cta { display: none; }
  .nav-pc { display: flex; align-items: center; gap: 32px; font-size: 14px; }
  .nav-pc a:not(.btn-sm):hover { color: var(--brand-light); }

  /* 首屏封顶 690 高、图居中，照原版 .carousel{aspect-ratio:1440/690; max-height:690px}。
     没有这个上限的话，屏幕越宽图就越大，1900px 宽的屏上会整个霸屏。
     超出 1440 的部分留黑（.hero 的 background 就是 #000）。 */
  .hero { max-height: 690px; }
  .hero-track > picture { display: flex; justify-content: center; }
  .hero-track img {
    aspect-ratio: 2880 / 1380;                     /* 宽屏换回横版比例 */
    width: auto; max-width: 100%; height: 100%; max-height: 690px;
    object-fit: contain;
  }
  .hero-dots { bottom: 104px; }
  .hero-bar { justify-content: center; gap: 20px; padding: 0 0 28px; }
  .btn { flex: 0 0 auto; min-width: 220px; height: 56px; font-size: 17px; padding: 0 20px; }

  /* —— 特性带 —— 照原版基础规则：1200 居中容器、高 386、顶部内边距 50、文字区占一半 —— */
  .band {
    /* 内容居中到 1200，两侧余量记在 --gut，装饰层的绝对定位要用它对齐 */
    --gut: max(var(--pad), calc((100% - var(--wrap)) / 2));
    height: 386px;
    min-height: 0;
    padding: 50px var(--gut) 0;
  }

  .band .copy { width: 50%; }
  .band.flip .copy { margin-left: auto; }

  .band h2 { font-size: 46px; line-height: 1.4; }
  .band .sub { margin-top: 20px; font-size: 36px; line-height: 40px; }
  .band .desc { margin-top: 10px; font-size: 16px; line-height: 24px; max-width: 531px; }
  .band.flip .desc { margin-left: auto; }
  .band .desc br { display: inline; }

  .band .shot {
    inset: auto;
    right: var(--gut);
    bottom: 0;
    width: 641px;
    height: 294px;
    object-position: center bottom;
  }
  .band.flip .shot { right: auto; left: var(--gut); }

  /* 序号：源码 left:0 bottom:-130 width:184 height:326，下缘出血到带外 */
  .band .num {
    top: auto;
    bottom: -130px;
    left: var(--gut);
    right: auto;
    width: 184px;
    height: 326px;
    background-position: top center;
  }
  .band.flip .num { left: auto; right: var(--gut); }
  .band .num { --num-w: 184px; }   /* 宽屏源码就是 184×326 */

  /* 水印：源码 right:0 top:70 width:100% height:215 */
  .band .wm {
    top: 70px;
    bottom: auto;
    left: var(--gut);
    right: var(--gut);
    height: 215px;
  }

  /* 宽屏换回横版主图 */
  .band .shot-m { display: none; }
  .band .shot-pc { display: block; }

  /* —— 代言人 —— */
  .stars { padding: 60px 0 20px; }
  .sec-title { height: auto; padding: 0 var(--pad); font-size: 34px; }
  /* 宽屏改回并排一行（原版 .pcCards 就是 flex，卡片互相压 -16px） */
  .star-row {
    position: static;
    display: flex;
    justify-content: center;
    gap: 0;
    height: auto;
    padding: 32px var(--pad) 40px;
    overflow: visible;
  }
  /* 宽屏卡固定 312×580，不再用窄屏那套层叠。
     注意必须是 relative 不能是 static —— 卡片里的 .star-info（姓名+简介）是
     absolute 定位的，卡片一旦 static 就找不到定位祖先，会跑到视口左下角去。 */
  .star, .star.is-on {
    position: relative;
    /* 窄屏那条 top:50%/left:50% 必须一起复位 —— absolute 改成 relative 之后
       这两个属性会变成相对自身的偏移，把每张卡往右下推半屏，卡片会挤到右边
       并撑出横向滚动条 */
    top: auto; left: auto;
    flex: 0 0 312px;
    width: 312px;
    height: 580px;
    margin-right: -16px;
    border-radius: 24px;
    transform: none !important;   /* 清掉窄屏时 JS 写进去的层叠位移 */
    opacity: 1 !important;
  }
  .star:last-child { margin-right: 0; }
  .star:hover { transform: translateY(-4px); }

  /* —— 资讯 —— */
  .news { padding: 20px 0 60px; }
  .news-head { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad); }
  .news-arrows { display: flex; }
  /* 宽屏换回横滑（原版桌面版就是横滑，pcScroll） */
  .news-row {
    display: flex;
    gap: 24px;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 18px var(--pad);
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }
  .news-row::-webkit-scrollbar { display: none; }

  .card {
    flex: 0 0 378px;
    min-height: 0;
    padding-left: 0;
  }
  .card::before, .card::after { display: none; }   /* 宽屏没有时间线 */
  .card img { order: 1; margin-top: 0; aspect-ratio: 16 / 9; }
  .card time { order: 2; margin-top: 10px; font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--ink-soft); }
  .card h3 { order: 3; margin-top: 4px; font-size: 15px; }

  /* —— 页脚 —— */
  .ftr { padding: 44px var(--pad) 52px; }
  .cert { width: 76px; }
}

@media (min-width: 1280px) {
  /* 超宽屏水印略放大一点。字号必须保持 0 —— 水印是背景图，露出文字会叠字 */
  .band .wm { background-size: auto 100%; }
}