.page-news {
  background: var(--paper-050);
  color: var(--ink-900);
  overflow-x: hidden;
}

.page-news .breadcrumbs {
  padding-top: 1.25rem;
  font-size: var(--step--1);
}

.page-news .breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--slate-500);
}

.page-news .breadcrumb-list li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--line-200);
}

.page-news .breadcrumb-list a {
  color: var(--jade-600);
  text-decoration: none;
}

.page-news .breadcrumb-list a:hover {
  text-decoration: underline;
}

/* 首屏 */
.page-news .log-hero {
  padding: clamp(1.5rem, 4vw, 2.75rem) 0 clamp(2rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--line-200);
  background:
    linear-gradient(180deg, rgba(220, 232, 225, 0.55) 0%, rgba(251, 248, 242, 0) 62%),
    var(--paper-050);
}

.page-news .log-hero-inner {
  display: grid;
  gap: 1.75rem;
}

.page-news .log-hero-main h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 5.2vw, 3.4rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0.75rem 0 0;
  max-width: 18em;
}

.page-news .log-hero .lede {
  margin: 1rem 0 0;
  max-width: 44ch;
  font-size: var(--step-1);
  line-height: 1.75;
  color: var(--ink-700);
}

.page-news .eyebrow {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  color: var(--gold-500);
  margin: 0;
  padding-left: 2.25rem;
  position: relative;
}

.page-news .eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1.6rem;
  height: 1px;
  background: var(--gold-500);
}

.page-news .log-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.25rem;
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--line-200);
  font-size: var(--step--1);
  color: var(--slate-500);
}

.page-news .log-stats .meta-mono {
  display: block;
  font-size: var(--step-3);
  line-height: 1.1;
  color: var(--ink-900);
}

.page-news .log-hero-aside {
  background: var(--ink-900);
  color: var(--paper-050);
  padding: 1.25rem 1.25rem 1.4rem;
  border-radius: var(--radius);
  border-top: 3px solid var(--gold-500);
  box-shadow: var(--shadow-2);
}

.page-news .log-hero-aside .aside-title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  color: var(--gold-500);
  margin: 0 0 0.6rem;
}

.page-news .log-hero-aside p {
  margin: 0 0 0.9rem;
  font-size: var(--step-0);
  line-height: 1.75;
  color: var(--jade-100);
}

.page-news .log-hero-aside .meta-mono {
  margin: 0;
  font-size: var(--step--1);
  color: var(--gold-500);
  letter-spacing: 0.02em;
}

/* 通用小节标记 */
.page-news .section-index {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  color: var(--slate-500);
}

.page-news .log-num {
  font-family: var(--font-mono);
  font-size: var(--step-2);
  letter-spacing: 0;
  color: var(--gold-500);
}

.page-news .section-head {
  margin-bottom: 1.5rem;
}

.page-news .section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 3.4vw, 2.1rem);
  line-height: 1.28;
  letter-spacing: -0.02em;
  margin: 0;
}

.page-news .section-note {
  margin: 0.75rem 0 0;
  max-width: 52ch;
  font-size: var(--step-0);
  line-height: 1.75;
  color: var(--slate-500);
}

/* 公告带 */
.page-news .notice-card {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 1rem 1.25rem;
  padding: 1.25rem;
  background: var(--gold-100);
  border: 1px solid var(--line-200);
  border-left: 4px solid var(--gold-500);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}

.page-news .notice-body h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem;
}

.page-news .notice-body {
  min-width: 0;
}

.page-news .notice-points {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--ink-700);
}

.page-news .notice-points li {
  position: relative;
  padding-left: 1.1rem;
}

.page-news .notice-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.4rem;
  height: 1px;
  background: var(--jade-600);
}

.page-news .notice-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--step-0);
  color: var(--orange-700);
  text-decoration: none;
  border-bottom: 1px solid var(--orange-600);
}

.page-news .notice-link:hover {
  color: var(--orange-600);
}

/* 图片容器 */
.page-news .media-frame {
  margin: 0;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-200);
  border-radius: var(--radius-sm);
  background: var(--jade-100);
}

.page-news .media-frame img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}

.page-news .media-note {
  margin: 0.6rem 0 0;
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--slate-500);
}

/* 版本记录 */
.page-news .version-grid {
  display: grid;
  gap: 2rem;
}

.page-news .version-main {
  min-width: 0;
}

.page-news .filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.page-news .filter-btn {
  min-height: 44px;
  padding: 0 0.95rem;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--ink-700);
  background: transparent;
  border: 1px solid var(--line-200);
  border-radius: 999px;
  cursor: pointer;
  transition: background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease);
}

.page-news .filter-btn:hover {
  border-color: var(--jade-600);
  color: var(--jade-600);
}

.page-news .filter-btn[aria-pressed="true"] {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: var(--paper-050);
}

.page-news .filter-btn:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
}

.page-news .filter-count {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--slate-500);
  margin-left: 0.25rem;
}

.page-news .version-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-200);
}

.page-news .version-row {
  border-bottom: 1px solid var(--line-200);
}

.page-news .version-row[hidden] {
  display: none;
}

.page-news .version-row details {
  position: relative;
}

.page-news .version-row summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem 0.75rem;
  padding: 1rem 2.25rem 1rem 1rem;
  cursor: pointer;
  list-style: none;
  position: relative;
}

.page-news .version-row summary::-webkit-details-marker {
  display: none;
}

.page-news .version-row summary::after {
  content: "+";
  position: absolute;
  right: 0.35rem;
  top: 0.9rem;
  font-family: var(--font-mono);
  font-size: var(--step-2);
  line-height: 1;
  color: var(--gold-500);
}

.page-news .version-row details[open] summary::after {
  content: "−";
}

.page-news .version-row details[open] summary::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65rem;
  bottom: 0.65rem;
  width: 3px;
  background: var(--gold-500);
}

.page-news .version-row summary:hover .v-title {
  color: var(--jade-600);
}

.page-news .version-row summary:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
}

.page-news .v-ver {
  font-size: var(--step--1);
  color: var(--slate-500);
  letter-spacing: 0;
}

.page-news .v-title {
  grid-column: 1 / -1;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-900);
  transition: color 180ms var(--ease);
}

.page-news .log-tag {
  display: inline-block;
  align-self: start;
  padding: 0.15rem 0.55rem;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--jade-600);
  background: var(--jade-100);
  border-radius: 2px;
  white-space: nowrap;
}

.page-news .log-tag--light {
  background: var(--gold-500);
  color: var(--ink-900);
}

.page-news .version-detail {
  padding: 0 1rem 1.25rem 1rem;
  border-top: 1px dashed var(--line-200);
  margin-top: 0.25rem;
  padding-top: 0.9rem;
}

.page-news .version-detail p {
  margin: 0 0 0.75rem;
  font-size: var(--step-0);
  line-height: 1.8;
  color: var(--ink-700);
  max-width: 60ch;
}

.page-news .version-detail .meta-mono {
  margin: 0;
  font-size: var(--step--1);
  color: var(--slate-500);
}

.page-news .version-aside {
  max-width: 320px;
}

/* 专题文章 */
.page-news .topic-section {
  background: linear-gradient(180deg, var(--paper-050) 0%, rgba(220, 232, 225, 0.45) 100%);
}

.page-news .topic-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.page-news .topic-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.25rem;
  background: var(--paper-050);
  border: 1px solid var(--line-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}

.page-news .topic-card[hidden] {
  display: none;
}

.page-news .topic-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-2);
  line-height: 1.38;
  letter-spacing: -0.01em;
  margin: 0;
}

.page-news .topic-card p {
  margin: 0;
  font-size: var(--step-0);
  line-height: 1.75;
  color: var(--slate-500);
}

.page-news .topic-card .meta-mono {
  margin-top: auto;
  padding-top: 0.4rem;
  font-size: var(--step--1);
  color: var(--jade-600);
}

.page-news .topic-card--sand {
  background: var(--gold-100);
  border-color: var(--gold-500);
}

.page-news .topic-card--sand p {
  color: var(--ink-700);
}

.page-news .topic-card--lead {
  padding: 0;
  overflow: hidden;
  background: var(--ink-900);
  border-color: var(--ink-700);
  color: var(--paper-050);
}

.page-news .topic-card--lead .lead-figure {
  border: 0;
  border-radius: 0;
}

.page-news .lead-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.25rem;
}

.page-news .topic-card--lead h3 {
  color: var(--paper-050);
}

.page-news .topic-card--lead p {
  color: var(--jade-100);
}

.page-news .topic-card--lead .meta-mono {
  color: var(--gold-500);
}

/* 季度联合专题 */
.page-news .joint-section {
  background: var(--ink-900);
  color: var(--paper-050);
}

.page-news .joint-inner {
  display: grid;
  gap: 2rem;
}

.page-news .joint-copy .section-index {
  color: var(--jade-100);
}

.page-news .joint-copy .section-title {
  color: var(--paper-050);
  max-width: 20em;
}

.page-news .joint-copy > p {
  margin: 1rem 0 0;
  max-width: 46ch;
  font-size: var(--step-0);
  line-height: 1.8;
  color: var(--jade-100);
}

.page-news .joint-cols {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0;
}

.page-news .joint-col {
  padding: 1rem 1.1rem;
  border-left: 2px solid var(--gold-500);
  background: var(--ink-700);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.page-news .joint-label {
  margin: 0 0 0.45rem;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  color: var(--gold-500);
}

.page-news .joint-col p:last-child {
  margin: 0;
  font-size: var(--step-0);
  line-height: 1.75;
  color: var(--jade-100);
}

.page-news .joint-copy .btn-outline-accent {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.2rem;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--step-0);
  color: var(--gold-100);
  background: transparent;
  border: 1px solid var(--gold-500);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background 180ms var(--ease), color 180ms var(--ease);
}

.page-news .joint-copy .btn-outline-accent:hover {
  background: var(--gold-500);
  color: var(--ink-900);
}

.page-news .joint-figure {
  border-color: var(--ink-700);
  background: var(--ink-700);
  align-self: start;
}

/* 订阅说明 */
.page-news .sub-section .prose {
  margin: 0.75rem 0 0;
  font-size: var(--step-1);
  line-height: 1.8;
  color: var(--ink-700);
}

.page-news .sub-steps {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  counter-reset: sub;
}

.page-news .sub-steps li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-200);
  font-size: var(--step-0);
  line-height: 1.8;
  color: var(--ink-700);
}

.page-news .step-num {
  font-family: var(--font-mono);
  font-size: var(--step-0);
  color: var(--gold-500);
  letter-spacing: 0.02em;
}

.page-news .sub-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.page-news .sub-actions .btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.3rem;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--step-0);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease);
}

.page-news .sub-actions .btn-primary {
  background: var(--orange-600);
  color: var(--paper-050);
  border: 1px solid var(--orange-600);
}

.page-news .sub-actions .btn-primary:hover {
  background: var(--orange-700);
  border-color: var(--orange-700);
}

.page-news .sub-actions .btn-ghost {
  background: transparent;
  color: var(--ink-900);
  border: 1px solid var(--line-200);
}

.page-news .sub-actions .btn-ghost:hover {
  border-color: var(--jade-600);
  color: var(--jade-600);
}

.page-news .sub-actions .btn:focus-visible,
.page-news .notice-link:focus-visible,
.page-news .joint-copy .btn-outline-accent:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 4px;
}

/* 进入显现 */
.page-news [data-reveal] {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .page-news .has-js [data-reveal] {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 420ms var(--ease), transform 420ms var(--ease);
  }

  .page-news .has-js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }
}

/* 平板及以上 */
@media (min-width: 640px) {
  .page-news .topic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-news .notice-card {
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 1.25rem 1.5rem;
    padding: 1.5rem;
  }

  .page-news .joint-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 760px) {
  .page-news .version-row summary {
    grid-template-columns: 8.5rem minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 1rem;
    padding: 1.15rem 2.5rem 1.15rem 1.15rem;
  }

  .page-news .v-title {
    grid-column: auto;
  }

  .page-news .version-detail {
    padding-left: 1.15rem;
  }

  .page-news .notice-card {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 2rem;
    padding: 1.75rem 2rem;
  }
}

/* 桌面 */
@media (min-width: 1000px) {
  .page-news .log-hero-inner {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: end;
    gap: 3.5rem;
  }

  .page-news .version-grid {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 3rem;
    align-items: start;
  }

  .page-news .version-aside {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
  }

  .page-news .topic-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-news .topic-card--lead {
    grid-column: span 2;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: stretch;
  }

  .page-news .topic-card--lead .lead-body {
    padding: 1.75rem;
    justify-content: center;
  }

  .page-news .joint-inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
    gap: 3.5rem;
  }

  .page-news .joint-figure {
    align-self: center;
  }
}


<main id="main-content" class="page-news">
  <div class="container">
    <nav class="breadcrumbs" aria-label="面包屑">
      <ol class="breadcrumb-list">
        <li><a href="/">首页</a></li>
        <li aria-current="page">华体日志</li>
      </ol>
    </nav>
  </div>

  <header class="log-hero">
    <div class="container log-hero-inner">
      <div class="log-hero-main">
        <p class="eyebrow">版本更新 · 维护公告 · 行业观察</p>
        <h1>入口挪了位置，华体日志告诉您新走法</h1>
        <p class="lede">场馆的活计不等人。分类怎么调、功能挪去了哪、内容新添了什么，这里都按发布时点记成一条，您翻到对应条目就能接着干；想看看同行怎么处理棘手场面，专题文章里也有能直接照着做的经验。</p>
        <ul class="log-stats">
          <li><span class="meta-mono">320</span>篇实务文章</li>
          <li><span class="meta-mono">9</span>个专题方向</li>
          <li><span class="meta-mono">24</span>个月版本可回溯</li>
        </ul>
      </div>
      <aside class="log-hero-aside">
        <p class="aside-title">发布节奏</p>
        <p>维护与版本公告固定在每月最后一个工作日发布，全年约 12 次。发布当天，公告同时出现在首页的拼贴信息板和本页的条目里。</p>
        <p class="meta-mono">每月发布 · 约 12 次／年</p>
      </aside>
    </div>
  </header>

  <section class="section notice-band" aria-labelledby="notice-title">
    <div class="container">
      <div class="notice-card" data-reveal>
        <div class="notice-figure media-frame" data-ratio="1-1">
          <img src="{zhanqunpic:h:600w:600}" width="600" height="600" alt="抽象版本标记图形，同心方块与数字刻度，墨绿底配砂金细线">
        </div>
        <div class="notice-body">
          <p class="section-index"><span class="log-num">01</span>最近一次维护 · 3 月版本</p>
          <h2 id="notice-title">这一轮改了三件事：分类重排、导出并位、窄屏调校</h2>
          <ul class="notice-points">
            <li>一级栏目顺序重排，场馆运营与赛事服务两条线前移，常用入口整体上移一层。</li>
            <li>订阅管理并入使用记录页，筛选、查看、导出在同一页完成。</li>
            <li>窄屏间距重新调过，手机上单手点选栏目更稳。</li>
          </ul>
          <a class="notice-link" href="/projects/">到平台能力页看使用记录与导出 <span aria-hidden="true">→</span></a>
        </div>
      </div>
    </div>
  </section>

  <section class="section version-section" aria-labelledby="versions-title">
    <div class="container">
      <div class="version-grid">
        <div class="version-main">
          <div class="section-head">
            <p class="section-index"><span class="log-num">02</span>版本记录</p>
            <h2 id="versions-title" class="section-title">按发布时点排下来的一列条目</h2>
            <p class="section-note">左边是发布时点，中间写清变了什么、影响到哪些入口，右边标出这条属于版本更新还是维护公告。点开条目能看到完整说明。</p>
          </div>

          <div class="filter-bar" data-filter-group data-filter-target="#version-list">
            <button type="button" class="filter-btn" data-filter="all" aria-pressed="true">全部</button>
            <button type="button" class="filter-btn" data-filter="版本更新" aria-pressed="false">版本更新</button>
            <button type="button" class="filter-btn" data-filter="维护公告" aria-pressed="false">维护公告</button>
            <span class="filter-count" data-filter-count>6 条</span>
          </div>

          <ol class="version-list" id="version-list">
            <li class="version-row" data-filter-item data-tags="版本更新">
              <details>
                <summary>
                  <span class="v-ver meta-mono">3 月版本</span>
                  <span class="v-title">分类重排与常用入口上移</span>
                  <span class="log-tag">版本更新</span>
                </summary>
                <div class="version-detail">
                  <p>一级栏目顺序做了调整，场馆运营、赛事服务两条线移到更靠前的位置；原先压在二级入口里的场地预订与场馆维护相关入口，这次提到一级栏目首页就能看见。老用户从首页进入目标栏目的路径，平均比之前少一步。</p>
                  <p class="meta-mono">影响范围：一级栏目排序、首页拼贴信息板入口位</p>
                </div>
              </details>
            </li>
            <li class="version-row" data-filter-item data-tags="版本更新">
              <details>
                <summary>
                  <span class="v-ver meta-mono">3 月版本</span>
                  <span class="v-title">订阅导出并入使用记录页</span>
                  <span class="log-tag">版本更新</span>
                </summary>
                <div class="version-detail">
                  <p>订阅管理与导出操作合并到使用记录页。需要按栏目与时间组合条件生成文件，在同一页筛选完直接导出；导出完成后，记录列表里会留下一条可回溯的条目，谁在什么时候导过哪批数据都能查到。</p>
                  <p class="meta-mono">影响范围：使用记录页、订阅入口、导出按钮</p>
                </div>
              </details>
            </li>
            <li class="version-row" data-filter-item data-tags="维护公告">
              <details>
                <summary>
                  <span class="v-ver meta-mono">上个维护周期</span>
                  <span class="v-title">窄屏间距与点击区调校</span>
                  <span class="log-tag">维护公告</span>
                </summary>
                <div class="version-detail">
                  <p>针对 360–430 像素宽度的手机屏重新排了区块间距，正文行高 1.75，可点击区域不小于 44×44 像素，正文字号不低于 15 像素。巡检、验收这类常在现场用手机查资料的人，翻页和点选比之前顺手。</p>
                  <p class="meta-mono">影响范围：全部栏目的小屏视图</p>
                </div>
              </details>
            </li>
            <li class="version-row" data-filter-item data-tags="维护公告">
              <details>
                <summary>
                  <span class="v-ver meta-mono">上个维护周期</span>
                  <span class="v-title">使用记录页筛选维度补齐</span>
                  <span class="log-tag">维护公告</span>
                </summary>
                <div class="version-detail">
                  <p>操作与订阅记录现在可以按时间、栏目、操作类型三种维度组合筛选，导出的文件与页面上看到的结果一一对应。记录保留最近 90 天，跨月的操作需要留档时，建议在当期内导出保存。</p>
                  <p class="meta-mono">影响范围：使用记录页筛选与导出</p>
                </div>
              </details>
            </li>
            <li class="version-row" data-filter-item data-tags="维护公告">
              <details>
                <summary>
                  <span class="v-ver meta-mono">上季度</span>
                  <span class="v-title">栏目命名复核与入口归属整理</span>
                  <span class="log-tag">维护公告</span>
                </summary>
                <div class="version-detail">
                  <p>对 12 个一级栏目、86 个二级入口做了一次命名与归属检查，个别入口从原先挂靠的栏目移到更贴近实际业务场景的位置，比如场地周转相关内容集中到空间管理方向下面。入口地址保持不变，机构客户此前设置的收藏可以继续使用。</p>
                  <p class="meta-mono">影响范围：二级入口归属、栏目命名</p>
                </div>
              </details>
            </li>
            <li class="version-row" data-filter-item data-tags="版本更新">
              <details>
                <summary>
                  <span class="v-ver meta-mono">本赛季</span>
                  <span class="v-title">专题库补入赛事服务观察</span>
                  <span class="log-tag">版本更新</span>
                </summary>
                <div class="version-detail">
                  <p>专题库新增赛事服务方向的观察文章，覆盖赛前准备、现场调度与赛后复盘三个环节，分别归入既有的 9 个专题之中，不另开新类目。场馆承办临时赛事时，可以直接从对应专题往下找。</p>
                  <p class="meta-mono">影响范围：专题库、文章列表</p>
                </div>
              </details>
            </li>
          </ol>
        </div>

        <figure class="version-aside media-frame" data-ratio="4-5">
          <img src="{zhanqunpic:h:1000w:800}" width="800" height="1000" alt="横向堆叠的档案纸边缘与标签，米白与砂金配色，带纸张颗粒质感" loading="lazy" decoding="async">
          <figcaption class="media-note">版本变化随维护周期归档，可按版本号回溯最近 24 个月</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="section topic-section" aria-labelledby="topics-title">
    <div class="container">
      <div class="section-head">
        <p class="section-index"><span class="log-num">03</span>专题文章</p>
        <h2 id="topics-title" class="section-title">九个专题里，挑几篇现在就能用的</h2>
        <p class="section-note">场馆运营、赛事服务、空间管理三条线累计 320 篇文章，归入 9 个专题。下面是从近期更新里挑出来的代表篇目，按方向筛选即可。</p>
      </div>

      <div class="filter-bar" data-filter-group data-filter-target="#topic-grid">
        <button type="button" class="filter-btn" data-filter="all" aria-pressed="true">全部</button>
        <button type="button" class="filter-btn" data-filter="场馆运营" aria-pressed="false">场馆运营</button>
        <button type="button" class="filter-btn" data-filter="赛事服务" aria-pressed="false">赛事服务</button>
        <button type="button" class="filter-btn" data-filter="空间管理" aria-pressed="false">空间管理</button>
        <span class="filter-count" data-filter-count>7 篇</span>
      </div>

      <div class="topic-grid" id="topic-grid">
        <article class="topic-card topic-card--lead" data-filter-item data-tags="场馆运营">
          <figure class="lead-figure media-frame" data-ratio="16-9">
            <img src="{zhanqunpic:h:675w:1200}" width="1200" height="675" alt="低饱和的场馆通道与地面线条局部，光线沿看台切口落下" loading="lazy" decoding="async">
          </figure>
          <div class="lead-body">
            <span class="log-tag log-tag--light">场馆运营</span>
            <h3>本赛季场馆动线调整：从入口分流到看台引导</h3>
            <p>把检票口、安检位与看台入口重新串成一条线，散场时段的拥堵点能提前半小时化解。文中给了三条常见场馆的走线对照。</p>
            <p class="meta-mono">阅读 8 分钟 · 专题：大型场馆动线</p>
          </div>
        </article>

        <article class="topic-card" data-filter-item data-tags="赛事服务" data-reveal>
          <span class="log-tag">赛事服务</span>
          <h3>一场市级联赛的赛前 72 小时清单</h3>
          <p>从器材进场到裁判席布置，按小时拆开的准备顺序。</p>
          <p class="meta-mono">阅读 6 分钟</p>
        </article>

        <article class="topic-card topic-card--sand" data-filter-item data-tags="空间管理" data-reveal data-reveal-delay="120">
          <span class="log-tag">空间管理</span>
          <h3>闲置训练房的三种再利用方式</h3>
          <p>改造成体测室、器械存放间或小型课堂，各自的改造成本与排班影响不同，选之前先看这三笔账。</p>
          <p class="meta-mono">阅读 9 分钟</p>
        </article>

        <article class="topic-card" data-filter-item data-tags="场馆运营" data-reveal>
          <span class="log-tag">场馆运营</span>
          <h3>客流高峰期的检票口排班怎么排</h3>
          <p>按到场曲线错峰开闸，人手紧张时优先保哪几个口。</p>
          <p class="meta-mono">阅读 5 分钟</p>
        </article>

        <article class="topic-card" data-filter-item data-tags="赛事服务" data-reveal data-reveal-delay="120">
          <span class="log-tag">赛事服务</span>
          <h3>临时看台的安全检查要点</h3>
          <p>搭建完成到开赛之间，检查项按顺序走一遍，别漏掉连接件与疏散宽度。</p>
          <p class="meta-mono">阅读 7 分钟</p>
        </article>

        <article class="topic-card" data-filter-item data-tags="空间管理" data-reveal>
          <span class="log-tag">空间管理</span>
          <h3>地胶养护与更换周期的经验</h3>
          <p>不同使用强度下的清洁频次与磨损判断，附一份可照着填的周检记录表。</p>
          <p class="meta-mono">阅读 6 分钟</p>
        </article>

        <article class="topic-card" data-filter-item data-tags="场馆运营" data-reveal data-reveal-delay="120">
          <span class="log-tag">场馆运营</span>
          <h3>会员续费的触达节奏</h3>
          <p>到期前几周联系、用什么话术、哪些人交给前台跟进，比统一发通知更管用。</p>
          <p class="meta-mono">阅读 5 分钟</p>
        </article>
      </div>
    </div>
  </section>

  <section class="section joint-section" aria-labelledby="joint-title">
    <div class="container joint-inner">
      <div class="joint-copy">
        <p class="section-index"><span class="log-num">04</span>季度联合专题</p>
        <h2 id="joint-title" class="section-title">和 18 家省级体育服务单位一起做的选题</h2>
        <p>联合专题每季度更新一次，选题由协作单位与场馆一线的实际问题共同提出。地方场馆遇到的共性问题，往往在别处已经有人蹚过一遍。</p>
        <div class="joint-cols">
          <div class="joint-col">
            <p class="joint-label">上季度回顾</p>
            <p>主题落在赛事物流与场地周转：器材从入库到上场的路径怎么压缩，一场赛事结束后几小时能交回场地。</p>
          </div>
          <div class="joint-col">
            <p class="joint-label">下季度预告</p>
            <p>正在征集场馆能耗与开放时段安排的做法，有实操经验的运营团队可以把自己的做法提过来。</p>
          </div>
        </div>
        <a class="btn btn-outline-accent" href="/inquiry/">把选题提给编辑部</a>
      </div>
      <figure class="joint-figure media-frame" data-ratio="5-3">
        <img src="{zhanqunpic:h:600w:1000}" width="1000" height="600" alt="多组细线弧线连接构成的抽象协作关系图，青灰与砂金配色" loading="lazy" decoding="async">
      </figure>
    </div>
  </section>

  <section class="section sub-section" aria-labelledby="sub-title">
    <div class="container container--narrow">
      <p class="section-index"><span class="log-num">05</span>订阅日志更新</p>
      <h2 id="sub-title" class="section-title">新条目发布时，让它自己找到您</h2>
      <p class="prose">关注哪条线就订哪条线，不必每次回来看。订阅与导出都在使用记录页完成，操作完之后，同一页还留着一条记录，隔一段时间回头看也说得清。</p>
      <ol class="sub-steps">
        <li><span class="step-num meta-mono">01</span>进入平台能力页，打开使用记录页，按栏目勾选关心的方向，场馆运营、赛事服务、空间管理可以分开订阅。</li>
        <li><span class="step-num meta-mono">02</span>日志与公告发布后，新条目排在记录列表靠前位置，按时间倒序，与您自己的操作记录并列显示。</li>
        <li><span class="step-num meta-mono">03</span>需要给团队留档时，在同一页按栏目与时间组合条件导出，单次最多 500 条记录，文件为 CSV。</li>
      </ol>
      <div class="sub-actions">
        <a class="btn btn-primary" href="/projects/">打开使用记录页</a>
        <a class="btn btn-ghost" href="/answers/">先看看常见问题</a>
      </div>
    </div>
  </section>
</main>

.page-news {
  background: var(--paper-050);
  color: var(--ink-900);
  overflow-x: hidden;
}

.page-news .breadcrumbs {
  padding-top: 1.25rem;
  font-size: var(--step--1);
}

.page-news .breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--slate-500);
}

.page-news .breadcrumb-list li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--line-200);
}

.page-news .breadcrumb-list a {
  color: var(--jade-600);
  text-decoration: none;
}

.page-news .breadcrumb-list a:hover {
  text-decoration: underline;
}

/* 首屏 */
.page-news .log-hero {
  padding: clamp(1.5rem, 4vw, 2.75rem) 0 clamp(2rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--line-200);
  background:
    linear-gradient(180deg, rgba(220, 232, 225, 0.55) 0%, rgba(251, 248, 242, 0) 62%),
    var(--paper-050);
}

.page-news .log-hero-inner {
  display: grid;
  gap: 1.75rem;
}

.page-news .log-hero-main h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 5.2vw, 3.4rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0.75rem 0 0;
  max-width: 18em;
}

.page-news .log-hero .lede {
  margin: 1rem 0 0;
  max-width: 44ch;
  font-size: var(--step-1);
  line-height: 1.75;
  color: var(--ink-700);
}

.page-news .eyebrow {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  color: var(--gold-500);
  margin: 0;
  padding-left: 2.25rem;
  position: relative;
}

.page-news .eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1.6rem;
  height: 1px;
  background: var(--gold-500);
}

.page-news .log-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.25rem;
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--line-200);
  font-size: var(--step--1);
  color: var(--slate-500);
}

.page-news .log-stats .meta-mono {
  display: block;
  font-size: var(--step-3);
  line-height: 1.1;
  color: var(--ink-900);
}

.page-news .log-hero-aside {
  background: var(--ink-900);
  color: var(--paper-050);
  padding: 1.25rem 1.25rem 1.4rem;
  border-radius: var(--radius);
  border-top: 3px solid var(--gold-500);
  box-shadow: var(--shadow-2);
}

.page-news .log-hero-aside .aside-title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  color: var(--gold-500);
  margin: 0 0 0.6rem;
}

.page-news .log-hero-aside p {
  margin: 0 0 0.9rem;
  font-size: var(--step-0);
  line-height: 1.75;
  color: var(--jade-100);
}

.page-news .log-hero-aside .meta-mono {
  margin: 0;
  font-size: var(--step--1);
  color: var(--gold-500);
  letter-spacing: 0.02em;
}

/* 通用小节标记 */
.page-news .section-index {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  color: var(--slate-500);
}

.page-news .log-num {
  font-family: var(--font-mono);
  font-size: var(--step-2);
  letter-spacing: 0;
  color: var(--gold-500);
}

.page-news .section-head {
  margin-bottom: 1.5rem;
}

.page-news .section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 3.4vw, 2.1rem);
  line-height: 1.28;
  letter-spacing: -0.02em;
  margin: 0;
}

.page-news .section-note {
  margin: 0.75rem 0 0;
  max-width: 52ch;
  font-size: var(--step-0);
  line-height: 1.75;
  color: var(--slate-500);
}

/* 公告带 */
.page-news .notice-card {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 1rem 1.25rem;
  padding: 1.25rem;
  background: var(--gold-100);
  border: 1px solid var(--line-200);
  border-left: 4px solid var(--gold-500);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}

.page-news .notice-body {
  min-width: 0;
}

.page-news .notice-body h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem;
}

.page-news .notice-points {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--ink-700);
}

.page-news .notice-points li {
  position: relative;
  padding-left: 1.1rem;
}

.page-news .notice-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.4rem;
  height: 1px;
  background: var(--jade-600);
}

.page-news .notice-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--step-0);
  color: var(--orange-700);
  text-decoration: none;
  border-bottom: 1px solid var(--orange-600);
}

.page-news .notice-link:hover {
  color: var(--orange-600);
}

/* 图片容器 */
.page-news .media-frame {
  margin: 0;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-200);
  border-radius: var(--radius-sm);
  background: var(--jade-100);
}

.page-news .media-frame img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}

.page-news .media-note {
  margin: 0.6rem 0 0;
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--slate-500);
}

/* 版本记录 */
.page-news .version-grid {
  display: grid;
  gap: 2rem;
}

.page-news .version-main {
  min-width: 0;
}

.page-news .filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.page-news .filter-btn {
  min-height: 44px;
  padding: 0 0.95rem;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  color: var(--ink-700);
  background: transparent;
  border: 1px solid var(--line-200);
  border-radius: 999px;
  cursor: pointer;
  transition: background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease);
}

.page-news .filter-btn:hover {
  border-color: var(--jade-600);
  color: var(--jade-600);
}

.page-news .filter-btn[aria-pressed="true"] {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: var(--paper-050);
}

.page-news .filter-btn:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
}

.page-news .filter-count {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--slate-500);
  margin-left: 0.25rem;
}

.page-news .version-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-200);
}

.page-news .version-row {
  border-bottom: 1px solid var(--line-200);
}

.page-news .version-row[hidden] {
  display: none;
}

.page-news .version-row details {
  position: relative;
}

.page-news .version-row summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem 0.75rem;
  padding: 1rem 2.25rem 1rem 1rem;
  cursor: pointer;
  list-style: none;
  position: relative;
}

.page-news .version-row summary::-webkit-details-marker {
  display: none;
}

.page-news .version-row summary::after {
  content: "+";
  position: absolute;
  right: 0.35rem;
  top: 0.9rem;
  font-family: var(--font-mono);
  font-size: var(--step-2);
  line-height: 1;
  color: var(--gold-500);
}

.page-news .version-row details[open] summary::after {
  content: "−";
}

.page-news .version-row details[open] summary::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65rem;
  bottom: 0.65rem;
  width: 3px;
  background: var(--gold-500);
}

.page-news .version-row summary:hover .v-title {
  color: var(--jade-600);
}

.page-news .version-row summary:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
}

.page-news .v-ver {
  font-size: var(--step--1);
  color: var(--slate-500);
  letter-spacing: 0;
}

.page-news .v-title {
  grid-column: 1 / -1;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-900);
  transition: color 180ms var(--ease);
}

.page-news .log-tag {
  display: inline-block;
  align-self: start;
  padding: 0.15rem 0.55rem;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--jade-600);
  background: var(--jade-100);
  border-radius: 2px;
  white-space: nowrap;
}

.page-news .log-tag--light {
  background: var(--gold-500);
  color: var(--ink-900);
}

.page-news .version-detail {
  padding: 0.9rem 1rem 1.25rem 1rem;
  border-top: 1px dashed var(--line-200);
  margin-top: 0.25rem;
}

.page-news .version-detail p {
  margin: 0 0 0.75rem;
  font-size: var(--step-0);
  line-height: 1.8;
  color: var(--ink-700);
  max-width: 60ch;
}

.page-news .version-detail .meta-mono {
  margin: 0;
  font-size: var(--step--1);
  color: var(--slate-500);
}

.page-news .version-aside {
  max-width: 320px;
}

/* 专题文章 */
.page-news .topic-section {
  background: linear-gradient(180deg, var(--paper-050) 0%, rgba(220, 232, 225, 0.45) 100%);
}

.page-news .topic-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.page-news .topic-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.25rem;
  background: var(--paper-050);
  border: 1px solid var(--line-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}

.page-news .topic-card[hidden] {
  display: none;
}

.page-news .topic-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-2);
  line-height: 1.38;
  letter-spacing: -0.01em;
  margin: 0;
}

.page-news .topic-card p {
  margin: 0;
  font-size: var(--step-0);
  line-height: 1.75;
  color: var(--slate-500);
}

.page-news .topic-card .meta-mono {
  margin-top: auto;
  padding-top: 0.4rem;
  font-size: var(--step--1);
  color: var(--jade-600);
}

.page-news .topic-card--sand {
  background: var(--gold-100);
  border-color: var(--gold-500);
}

.page-news .topic-card--sand p {
  color: var(--ink-700);
}

.page-news .topic-card--lead {
  padding: 0;
  overflow: hidden;
  background: var(--ink-900);
  border-color: var(--ink-700);
  color: var(--paper-050);
}

.page-news .topic-card--lead .lead-figure {
  border: 0;
  border-radius: 0;
}

.page-news .lead-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.25rem;
}

.page-news .topic-card--lead h3 {
  color: var(--paper-050);
}

.page-news .topic-card--lead p {
  color: var(--jade-100);
}

.page-news .topic-card--lead .meta-mono {
  color: var(--gold-500);
}

/* 季度联合专题 */
.page-news .joint-section {
  background: var(--ink-900);
  color: var(--paper-050);
}

.page-news .joint-inner {
  display: grid;
  gap: 2rem;
}

.page-news .joint-copy .section-index {
  color: var(--jade-100);
}

.page-news .joint-copy .section-title {
  color: var(--paper-050);
  max-width: 20em;
}

.page-news .joint-copy > p {
  margin: 1rem 0 0;
  max-width: 46ch;
  font-size: var(--step-0);
  line-height: 1.8;
  color: var(--jade-100);
}

.page-news .joint-cols {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0;
}

.page-news .joint-col {
  padding: 1rem 1.1rem;
  border-left: 2px solid var(--gold-500);
  background: var(--ink-700);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.page-news .joint-label {
  margin: 0 0 0.45rem;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  color: var(--gold-500);
}

.page-news .joint-col p:last-child {
  margin: 0;
  font-size: var(--step-0);
  line-height: 1.75;
  color: var(--jade-100);
}

.page-news .joint-copy .btn-outline-accent {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.2rem;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--step-0);
  color: var(--gold-100);
  background: transparent;
  border: 1px solid var(--gold-500);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background 180ms var(--ease), color 180ms var(--ease);
}

.page-news .joint-copy .btn-outline-accent:hover {
  background: var(--gold-500);
  color: var(--ink-900);
}

.page-news .joint-figure {
  border-color: var(--ink-700);
  background: var(--ink-700);
  align-self: start;
}

/* 订阅说明 */
.page-news .sub-section .prose {
  margin: 0.75rem 0 0;
  font-size: var(--step-1);
  line-height: 1.8;
  color: var(--ink-700);
}

.page-news .sub-steps {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.page-news .sub-steps li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-200);
  font-size: var(--step-0);
  line-height: 1.8;
  color: var(--ink-700);
}

.page-news .step-num {
  font-family: var(--font-mono);
  font-size: var(--step-0);
  letter-spacing: 0.02em;
  color: var(--gold-500);
}

.page-news .sub-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.page-news .sub-actions .btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.3rem;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--step-0);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease);
}

.page-news .sub-actions .btn-primary {
  background: var(--orange-600);
  color: var(--paper-050);
  border: 1px solid var(--orange-600);
}

.page-news .sub-actions .btn-primary:hover {
  background: var(--orange-700);
  border-color: var(--orange-700);
}

.page-news .sub-actions .btn-ghost {
  background: transparent;
  color: var(--ink-900);
  border: 1px solid var(--line-200);
}

.page-news .sub-actions .btn-ghost:hover {
  border-color: var(--jade-600);
  color: var(--jade-600);
}

.page-news .sub-actions .btn:focus-visible,
.page-news .notice-link:focus-visible,
.page-news .joint-copy .btn-outline-accent:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 4px;
}

/* 进入显现 */
.page-news [data-reveal] {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .page-news [data-reveal] {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 420ms var(--ease), transform 420ms var(--ease);
  }

  .page-news [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }
}

/* 平板及以上 */
@media (min-width: 640px) {
  .page-news .topic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-news .notice-card {
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 1.25rem 1.5rem;
    padding: 1.5rem;
  }

  .page-news .joint-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 760px) {
  .page-news .version-row summary {
    grid-template-columns: 8.5rem minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 1rem;
    padding: 1.15rem 2.5rem 1.15rem 1.15rem;
  }

  .page-news .v-title {
    grid-column: auto;
  }

  .page-news .version-detail {
    padding-left: 1.15rem;
  }

  .page-news .notice-card {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 2rem;
    padding: 1.75rem 2rem;
  }
}

/* 桌面 */
@media (min-width: 1000px) {
  .page-news .log-hero-inner {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: end;
    gap: 3.5rem;
  }

  .page-news .version-grid {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 3rem;
    align-items: start;
  }

  .page-news .version-aside {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
  }

  .page-news .topic-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-news .topic-card--lead {
    grid-column: span 2;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: stretch;
  }

  .page-news .topic-card--lead .lead-body {
    padding: 1.75rem;
    justify-content: center;
  }

  .page-news .joint-inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
    gap: 3.5rem;
  }

  .page-news .joint-figure {
    align-self: center;
  }
}