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

:root {
  /* primary */
  --color-primary-500: #FECB03;
  --color-primary-alpha-10: rgba(254, 203, 3, 0.10);

  /* neutral */
  --color-neutral-50: #FAFAFA;
  --color-neutral-200: #DCDCDC;
  --color-neutral-600: #656565;
  --color-neutral-900: #0D0D0D;

  /* white alpha */
  --color-white-alpha-60: rgba(255, 255, 255, 0.60);

  /* black alpha */
  --color-black-alpha-5: rgba(0, 0, 0, 0.05);
  --color-black-alpha-10: rgba(0, 0, 0, 0.10);
  --color-black-alpha-20: rgba(0, 0, 0, 0.20);
  --color-black-alpha-30: rgba(0, 0, 0, 0.30);

  /* text */
  --text-primary: rgba(0, 0, 0, 0.90);
  --text-secondary: rgba(0, 0, 0, 0.55);
  --text-placeholder: rgba(0, 0, 0, 0.35);
  --text-on-dark: #fff;
  --text-on-dark-secondary: rgba(255, 255, 255, 0.55);
  --dot-on-dark: rgba(255, 255, 255, 0.30);

  /* layout */
  /* PC 版心唯一来源:列表区块 .layout-section、四个详情页容器、个人中心资料卡、
     hero 活动帧全部由它推导,改这一行即可全站生效,勿再写死像素。
     媒体查询里用不了 CSS 变量,全站仅剩本文件下面 @media (max-width: 1280px)
     那一档(窄于版心时收紧纵向间距)需要跟着一起改。 */
  --layout-max-width: 1280px;
  --layout-padding-x: 16px;
  /* hero 外框比版心宽 140px,用于两侧邻帧露出 */
  --hero-width: calc(var(--layout-max-width) + 140px);
  --hero-active-width: var(--layout-max-width);
  --hero-active-height: 350px;
  --hero-side-width: 1050px;
  --hero-side-height: 288px;

  /* surface */
  --surface-input: #fff;
  --surface-foreground: #fff;

  /* font */
  --font-rank-badge: 'Swis721 Blk BT', sans-serif;
}

@font-face {
  font-family: 'Swis721 Blk BT';
  /* 两处存量坑:①字体在 static 下,原来写 /font/... 走 302 落空;
     ②原始 TTF 是 Mac 风格旧格式(OS/2 v0 + PCLT),Chrome 的 OTS 直接判 error,
     故改用重新封装的 woff2,旧 Safari 走清理过的 ttf 兜底。都修好之前名次数字一直是兜底无衬线体 */
  src: url('/static/font/Swis721-Blk-BT-Black-2.woff2') format('woff2'),
       url('/static/font/Swis721-Blk-BT-Black-2.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

body {
  margin: 0;
}
a {
  text-decoration: none;
}

.page-main {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  padding: 30px 0;
}

/* 版心容器:max-width 取「版心 + 左右内边距」,宽屏内容宽正好等于版心,
   窄屏自动退化成两侧留白 —— 不需要再为内边距单开断点 */
.layout-section {
  width: 100%;
  max-width: calc(var(--layout-max-width) + 2 * var(--layout-padding-x));
  padding-left: var(--layout-padding-x);
  padding-right: var(--layout-padding-x);
  margin: 0 auto;
}

/* 视口窄于版心:区块纵向间距收紧 */
@media (max-width: 1280px) {
  .page-main {
    gap: 48px;
    padding: 24px 0;
  }
}

@media (max-width: 768px) {
  .page-main {
    gap: 18px;
    padding: 12px 0 32px;
  }
}

/* 占位图状态:完整显示不裁切(contain),底色与占位图一致(placeholder.png 实测 #464646)保证无缝;
   src 被懒加载换成真图后选择器自动失效,恢复各处原有的 object-fit,加载失败回退占位图时亦自动生效。
   background-color 必须带 !important:本选择器特异度只有 (0,1,1),会被 .home-page .promo-row
   .promo-feature__image / .novel-read .detail-feature__img 这类多类名规则的浅灰底盖掉,
   导致「深灰占位图 + 浅灰留白」的割裂;需要换底色的场景用更高特异度 + !important 覆盖(见 activity-wheel.css) */
img[src$="placeholder.png"] {
  object-fit: contain !important;
  background-color: #464646 !important;
}

.swis721 {
  font-family: 'Swis721 Blk BT';
}

/* 语义化板块/卡片标题（#16 H-03/H-04）：沿用原 class 样式，仅消除 h2/h3 默认边距 */
h2.section-title--sm,
h3.media-card__title,
h3.gossip-feature__title {
  margin: 0;
}

/* 视觉隐藏但可被爬虫/读屏读取（首页 SEO H1，#5 H-01） */
.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}