.page-news {
  --jn-track: 108px;
  --jn-gap: 28px;
  color: var(--c-ink);
  font-family: var(--font-body);
}

.page-news img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 面包屑 */
.page-news .breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 20px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--c-muted);
}

.page-news .breadcrumb a {
  color: var(--c-muted);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.page-news .breadcrumb a:hover {
  color: var(--c-red);
}

.page-news .crumb-current {
  color: var(--c-ink);
}

/* 首屏 */
.jn-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--c-paper);
  border-bottom: 1px solid var(--c-line);
}

.jn-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(116deg, rgba(176, 18, 47, .09) 0 38%, rgba(176, 18, 47, 0) 38%),
    repeating-linear-gradient(90deg, rgba(216, 210, 199, .55) 0 1px, transparent 1px 76px);
}

.jn-hero__inner {
  display: grid;
  gap: 26px;
  padding: clamp(22px, 4vw, 42px) 0 clamp(30px, 5vw, 56px);
}

.page-news .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--c-muted);
}

.page-news .eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--c-gold);
}

.jn-hero__title {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 6.6vw, 62px);
  line-height: 1.1;
  letter-spacing: -.012em;
  color: var(--c-ink);
}

.jn-mark {
  color: var(--c-red);
}

.jn-hero__lede {
  margin: 16px 0 0;
  max-width: 620px;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.78;
  color: var(--c-ink-2);
}

.jn-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 24px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.jn-stat {
  background: var(--c-paper);
  padding: 14px 13px;
}

.jn-stat__num {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(19px, 2.6vw, 27px);
  letter-spacing: -.02em;
  color: var(--c-red);
}

.jn-stat__label {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--c-muted);
}

.jn-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.jn-jump a {
  padding: 6px 13px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--c-ink-2);
  text-decoration: none;
  background: rgba(250, 248, 244, .78);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.jn-jump a:hover,
.jn-jump a:focus-visible {
  color: var(--c-red);
  border-color: var(--c-gold);
  background: var(--c-warm);
}

/* 图片容器 */
.jn-fig {
  margin: 0;
  background: var(--c-warm);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.jn-fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jn-fig--hero {
  aspect-ratio: 16 / 9;
  box-shadow: var(--shadow-2);
}

.jn-fig--cadence {
  aspect-ratio: 3 / 2;
}

.jn-fig--side {
  aspect-ratio: 10 / 7;
}

.jn-fig--strip {
  aspect-ratio: 16 / 9;
}

/* 区块骨架 */
.jn-section {
  padding: clamp(44px, 6vw, 80px) 0;
  border-top: 1px solid var(--c-line);
  background: var(--c-paper);
}

.jn-head {
  display: grid;
  gap: 10px;
  max-width: 760px;
  margin-bottom: 28px;
}

.jn-h2 {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(23px, 3.4vw, 34px);
  line-height: 1.28;
  color: var(--c-ink);
}

.jn-sub {
  margin: 0;
  font-size: 15px;
  line-height: 1.78;
  color: var(--c-ink-2);
}

/* 更新节奏 */
.jn-cadence {
  display: grid;
  gap: 26px;
}

.jn-cadence__main {
  min-width: 0;
}

.jn-cadence__grid {
  display: grid;
  gap: 14px;
}

.jn-note {
  padding: 18px 18px 20px;
  background: var(--c-warm);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}

.jn-note__k {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--c-red);
}

.jn-note__v {
  margin: 0;
  font-size: 14px;
  line-height: 1.72;
  color: var(--c-ink-2);
}

/* 日志 */
.jn-log__grid {
  display: grid;
  gap: 30px;
}

.jn-stream {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.jn-entry {
  display: grid;
  gap: 8px;
  padding: 20px 0;
  border-bottom: 1px solid var(--c-line);
  transition: background var(--dur) var(--ease);
}

.jn-entry:hover {
  background: linear-gradient(90deg, rgba(239, 234, 226, .9), rgba(239, 234, 226, 0) 72%);
}

.jn-entry__rail {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
}

.jn-entry__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-red);
  box-shadow: 0 0 0 3px var(--c-paper), 0 0 0 4px var(--c-line);
}

.jn-entry--cat .jn-entry__dot { background: var(--c-gold); }
.jn-entry--res .jn-entry__dot { background: var(--c-green); }
.jn-entry--svc .jn-entry__dot { background: var(--c-amber); }

.jn-entry__time {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--c-muted);
  white-space: nowrap;
}

.jn-entry__body {
  min-width: 0;
}

.jn-entry__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.jn-entry__ver {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .05em;
  color: var(--c-muted);
}

.jn-entry__title {
  margin: 8px 0 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.42;
  color: var(--c-ink);
}

.jn-entry__desc {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.74;
  color: var(--c-ink-2);
}

.jn-side {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.jn-cats {
  padding: 16px 16px 8px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}

.jn-cats__title {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--c-muted);
}

.jn-cats__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.jn-cats__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  font-size: 13.5px;
  border-bottom: 1px solid var(--c-line);
}

.jn-cats__item:last-child {
  border-bottom: 0;
}

.jn-cats__name {
  display: inline-flex;
  align-items: center;
  color: var(--c-ink);
}

.jn-cats__sw {
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 2px;
  display: inline-block;
}

.jn-cats__sw--red { background: var(--c-red); }
.jn-cats__sw--gold { background: var(--c-gold); }
.jn-cats__sw--green { background: var(--c-green); }
.jn-cats__sw--amber { background: var(--c-amber); }

.jn-cats__count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--c-muted);
}

.jn-log__more {
  margin: 24px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--c-ink-2);
}

.jn-link {
  color: var(--c-red);
  text-decoration: none;
  border-bottom: 1px solid rgba(176, 18, 47, .35);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.jn-link:hover,
.jn-link:focus-visible {
  border-bottom-color: var(--c-red);
}

/* 专题回溯 */
.jn-series {
  display: grid;
  gap: 14px;
}

.jn-series__item {
  position: relative;
  padding: 22px 20px 20px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.jn-series__item::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c-red), var(--c-gold));
}

.jn-series__item:nth-child(2)::before {
  background: linear-gradient(90deg, var(--c-gold), var(--c-green));
}

.jn-series__item:nth-child(3)::before {
  background: linear-gradient(90deg, var(--c-ink), var(--c-red));
}

.jn-series__item:hover {
  transform: translateY(-2px);
  border-color: var(--c-gold);
  box-shadow: var(--shadow-2);
}

.jn-series__span {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--c-red);
}

.jn-series__title {
  margin: 8px 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.4;
  color: var(--c-ink);
}

.jn-series__desc {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.72;
  color: var(--c-ink-2);
}

.jn-series__count {
  display: block;
  padding-top: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--c-muted);
  border-top: 1px solid var(--c-line);
}

.jn-series__fig {
  margin-top: 22px;
}

/* 上架记录表格 */
.jn-table-wrap {
  overflow-x: auto;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}

.jn-table {
  width: 100%;
  min-width: 700px;
  border-collapse: collapse;
  font-size: 14px;
}

.jn-table th {
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: .1em;
  color: var(--c-muted);
  text-align: left;
  white-space: nowrap;
  background: var(--c-warm);
  border-bottom: 1px solid var(--c-line);
}

.jn-table td {
  padding: 13px 14px;
  vertical-align: top;
  color: var(--c-ink-2);
  border-bottom: 1px solid var(--c-line);
}

.jn-table tbody tr:last-child td {
  border-bottom: 0;
}

.jn-table tbody tr:hover {
  background: rgba(239, 234, 226, .55);
}

.jn-table__name {
  color: var(--c-ink);
  font-weight: 500;
}

.jn-table__type {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--c-ink-2);
  white-space: nowrap;
}

.jn-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  white-space: nowrap;
  color: var(--c-green);
}

.jn-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-green);
}

.jn-status--amber {
  color: var(--c-amber);
}

.jn-status--amber .jn-dot {
  background: var(--c-amber);
}

/* 订阅提醒 */
.jn-sub {
  display: grid;
  gap: 14px;
}

.jn-sub__item {
  padding: 20px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}

.jn-sub__item--dark {
  background: var(--c-ink);
  border-color: var(--c-ink);
}

.jn-sub__num {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--c-gold);
}

.jn-sub__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  color: var(--c-ink);
}

.jn-sub__item--dark .jn-sub__title {
  color: var(--c-paper);
}

.jn-sub__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.74;
  color: var(--c-ink-2);
}

.jn-sub__item--dark .jn-sub__text {
  color: rgba(250, 248, 244, .82);
}

.jn-mail {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--c-red);
  word-break: break-all;
}

.jn-sub__item--dark .jn-mail {
  color: var(--c-gold);
}

.jn-cta {
  display: grid;
  gap: 16px;
  margin-top: 30px;
  padding: 22px;
  background: var(--c-warm);
  border-left: 3px solid var(--c-red);
  border-radius: var(--r-sm);
}

.jn-cta__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.72;
  color: var(--c-ink);
}

.jn-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 响应式 */
@media (min-width: 700px) {
  .jn-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .jn-cadence__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .jn-entry {
    grid-template-columns: var(--jn-track) minmax(0, 1fr);
    gap: 20px;
  }

  .jn-entry__rail {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .jn-entry__rail::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 16px;
    bottom: -21px;
    width: 1px;
    background: linear-gradient(180deg, var(--c-line), rgba(216, 210, 199, 0));
  }

  .jn-entry:last-child .jn-entry__rail::after {
    display: none;
  }

  .jn-cta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

@media (min-width: 900px) {
  .jn-hero__inner {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    align-items: center;
    gap: clamp(28px, 4vw, 56px);
  }

  .jn-fig--hero {
    border-radius: 4px;
    clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%);
  }

  .jn-cadence {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-items: start;
    gap: clamp(26px, 4vw, 48px);
  }

  .jn-series {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .jn-fig--strip {
    aspect-ratio: 21 / 9;
  }
}

@media (min-width: 1000px) {
  .jn-log__grid {
    grid-template-columns: minmax(0, 1fr) 296px;
    align-items: start;
    gap: 40px;
  }

  .jn-side {
    position: sticky;
    top: calc(var(--header-gap) + 12px);
  }

  .jn-entry:nth-child(3n + 2) {
    padding-left: 14px;
  }

  .jn-entry:nth-child(4n) .jn-entry__desc {
    max-width: 92%;
  }
}

@media (min-width: 860px) {
  .jn-sub {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .jn-jump a,
  .jn-entry,
  .jn-series__item {
    transition: none;
  }

  .jn-series__item:hover {
    transform: none;
  }
}


<main id="main-content" class="page-news">
  <div class="container">
    <nav class="breadcrumb" aria-label="面包屑">
      <a href="/">首页</a>
      <span class="crumb-sep" aria-hidden="true">/</span>
      <span class="crumb-current">版本日志</span>
    </nav>
  </div>

  <header class="jn-hero">
    <div class="container">
      <div class="jn-hero__inner">
        <div class="jn-hero__text">
          <span class="eyebrow">版本记录 · 近三个月</span>
          <h1 class="jn-hero__title">每一次更新，<span class="jn-mark">都能翻回原页</span></h1>
          <p class="jn-hero__lede">盛世中心把栏目调整、文件上架和服务安排都记成带版本号的条目。您手上那份 PDF 是不是最新一版、上周到底改了什么、两个月前的渠道模板还在不在，从这里往下翻就能对上号。</p>
          <div class="jn-stats">
            <div class="jn-stat">
              <span class="jn-stat__num">24–26</span>
              <span class="jn-stat__label">近三个月形成版本节点</span>
            </div>
            <div class="jn-stat">
              <span class="jn-stat__num">420</span>
              <span class="jn-stat__label">累计发布版本速览期数</span>
            </div>
            <div class="jn-stat">
              <span class="jn-stat__num">周三 / 周五</span>
              <span class="jn-stat__label">常规发布日</span>
            </div>
            <div class="jn-stat">
              <span class="jn-stat__num">35</span>
              <span class="jn-stat__label">每月上架新文件约数</span>
            </div>
          </div>
          <nav class="jn-jump" aria-label="页内快速定位">
            <a href="#cadence">更新节奏</a>
            <a href="#log">最近条目</a>
            <a href="#series">专题回溯</a>
            <a href="#uploads">上架记录</a>
            <a href="#subscribe">获取提醒</a>
          </nav>
        </div>
        <figure class="jn-fig jn-fig--hero jn-hero__figure">
          <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="红色印章与横向时间轴叠合的抽象档案图" decoding="async">
        </figure>
      </div>
    </div>
  </header>

  <section class="jn-section" id="cadence" aria-labelledby="cadence-title">
    <div class="container">
      <div class="jn-cadence">
        <div class="jn-cadence__main" data-reveal>
          <div class="jn-head">
            <span class="eyebrow">更新节奏</span>
            <h2 class="jn-h2" id="cadence-title">发布日固定，改动都留痕</h2>
            <p class="jn-sub">常规更新排在每周三与周五，栏目页面和可下载文件同一批提交。近三个月通常形成 24–26 个版本节点，涉及品牌视觉或全站结构的大改动，会单独出一期速览，把调整前后的差别摆在一起。</p>
          </div>
          <div class="jn-cadence__grid">
            <div class="jn-note">
              <span class="jn-note__k">常规发布</span>
              <p class="jn-note__v">周三与周五各一次，栏目调整、文件上架与通知同批发布，您在周一就能预判下一次刷新的时间。</p>
            </div>
            <div class="jn-note">
              <span class="jn-note__k">版本编号</span>
              <p class="jn-note__v">采用 V2025-18 这样的写法，年份加两位序号。编号越大越新，凭编号就能排出先后，不必比对日期。</p>
            </div>
            <div class="jn-note">
              <span class="jn-note__k">重大版本</span>
              <p class="jn-note__v">遇到视觉体系或栏目结构成批调整，另发一期速览，附上新旧对照，方便品牌部和渠道团队同步转达。</p>
            </div>
          </div>
        </div>
        <figure class="jn-fig jn-fig--cadence jn-cadence__fig" data-reveal>
          <img src="{zhanqunpic:h:600w:900}" width="900" height="600" alt="无正脸的文件桌面、印章与校对标记特写" loading="lazy" decoding="async">
        </figure>
      </div>
    </div>
  </section>

  <section class="jn-section" id="log" aria-labelledby="log-title">
    <div class="container">
      <div class="jn-head">
        <span class="eyebrow">最近条目</span>
        <h2 class="jn-h2" id="log-title">最近十次记录，按时间往下排</h2>
        <p class="jn-sub">每条都带分类、版本号与一句摘要。悬停可以看到摘要与编号，点开对应页面即能取到那一版的文件。</p>
      </div>

      <div class="jn-log__grid">
        <ol class="jn-stream">
          <li class="jn-entry jn-entry--brief" data-reveal>
            <div class="jn-entry__rail">
              <span class="jn-entry__dot" aria-hidden="true"></span>
              <span class="jn-entry__time">本周三</span>
            </div>
            <div class="jn-entry__body">
              <div class="jn-entry__meta">
                <span class="tag tag-red">更新速览</span>
                <span class="jn-entry__ver">V2025-26</span>
              </div>
              <h3 class="jn-entry__title">品牌视觉焕新速览：三期调整合并成一份对照</h3>
              <p class="jn-entry__desc">主色在包装、门店与线上三个场景的前后对照排在同一页，鎏金细线的使用时附了位置示意，拿去开会可以直接投影。</p>
            </div>
          </li>

          <li class="jn-entry jn-entry--res" data-reveal>
            <div class="jn-entry__rail">
              <span class="jn-entry__dot" aria-hidden="true"></span>
              <span class="jn-entry__time">本周三</span>
            </div>
            <div class="jn-entry__body">
              <div class="jn-entry__meta">
                <span class="tag tag-green">资源上架</span>
                <span class="jn-entry__ver">V2025-25</span>
              </div>
              <h3 class="jn-entry__title">华东区域促销物料包补入两套模板</h3>
              <p class="jn-entry__desc">台卡、海报与价签三件套的表格模板同步上架，可替换字段写在同一张工作表里，经销商改完就能直接送印。</p>
            </div>
          </li>

          <li class="jn-entry jn-entry--svc" data-reveal>
            <div class="jn-entry__rail">
              <span class="jn-entry__dot" aria-hidden="true"></span>
              <span class="jn-entry__time">本周一</span>
            </div>
            <div class="jn-entry__body">
              <div class="jn-entry__meta">
                <span class="tag tag-amber">服务通知</span>
                <span class="jn-entry__ver">V2025-24</span>
              </div>
              <h3 class="jn-entry__title">假期前后资料交付顺延一个工作日</h3>
              <p class="jn-entry__desc">这段时间提交的下载授权申请按顺延一天安排，急件可直接拨打 400-7287-6356 说明用途，值班同事会先处理。</p>
            </div>
          </li>

          <li class="jn-entry jn-entry--cat" data-reveal>
            <div class="jn-entry__rail">
              <span class="jn-entry__dot" aria-hidden="true"></span>
              <span class="jn-entry__time">上周五</span>
            </div>
            <div class="jn-entry__body">
              <div class="jn-entry__meta">
                <span class="tag tag-gold">栏目变更</span>
                <span class="jn-entry__ver">V2025-23</span>
              </div>
              <h3 class="jn-entry__title">资源下载页把文件类型入口提到顶部</h3>
              <p class="jn-entry__desc">先选 PDF 或表格，再选资源分类，找一份文件比以前少点两次；手机端同样可用，不必左右拖动表格。</p>
            </div>
          </li>

          <li class="jn-entry jn-entry--brief" data-reveal>
            <div class="jn-entry__rail">
              <span class="jn-entry__dot" aria-hidden="true"></span>
              <span class="jn-entry__time">上周三</span>
            </div>
            <div class="jn-entry__body">
              <div class="jn-entry__meta">
                <span class="tag tag-red">更新速览</span>
                <span class="jn-entry__ver">V2025-22</span>
              </div>
              <h3 class="jn-entry__title">季度数据模板完成一轮修订</h3>
              <p class="jn-entry__desc">媒体投放与渠道动销两张表补上了字段说明行，旧表仍可按编号取到，和历史报表对齐时不用重新推算。</p>
            </div>
          </li>

          <li class="jn-entry jn-entry--res" data-reveal>
            <div class="jn-entry__rail">
              <span class="jn-entry__dot" aria-hidden="true"></span>
              <span class="jn-entry__time">上周一</span>
            </div>
            <div class="jn-entry__body">
              <div class="jn-entry__meta">
                <span class="tag tag-green">资源上架</span>
                <span class="jn-entry__ver">V2025-21</span>
              </div>
              <h3 class="jn-entry__title">门店灯箱补充三种常用尺寸标注</h3>
              <p class="jn-entry__desc">新增的 PDF 标清出血与安全区，刀版示意放在末页，制作方拿到文件即可报价，省掉一轮来回确认。</p>
            </div>
          </li>

          <li class="jn-entry jn-entry--cat" data-reveal>
            <div class="jn-entry__rail">
              <span class="jn-entry__dot" aria-hidden="true"></span>
              <span class="jn-entry__time">本月上旬</span>
            </div>
            <div class="jn-entry__body">
              <div class="jn-entry__meta">
                <span class="tag tag-gold">栏目变更</span>
                <span class="jn-entry__ver">V2025-20</span>
              </div>
              <h3 class="jn-entry__title">品牌档案页补上团队分工与服务覆盖</h3>
              <p class="jn-entry__desc">内容编辑、版本管理、客户成功与技术支持四组人的职责写清楚了，服务覆盖的省级区域也一并列明，评估合作时更好判断。</p>
            </div>
          </li>

          <li class="jn-entry jn-entry--svc" data-reveal>
            <div class="jn-entry__rail">
              <span class="jn-entry__dot" aria-hidden="true"></span>
              <span class="jn-entry__time">本月上旬</span>
            </div>
            <div class="jn-entry__body">
              <div class="jn-entry__meta">
                <span class="tag tag-amber">服务通知</span>
                <span class="jn-entry__ver">V2025-19</span>
              </div>
              <h3 class="jn-entry__title">站内检索响应做了一次优化</h3>
              <p class="jn-entry__desc">按栏目名与版本号查找的平均返回时间保持在 1.2 秒，工作日上午的高峰时段同样稳定，批量找资料不必反复等待。</p>
            </div>
          </li>

          <li class="jn-entry jn-entry--brief" data-reveal>
            <div class="jn-entry__rail">
              <span class="jn-entry__dot" aria-hidden="true"></span>
              <span class="jn-entry__time">上月中旬</span>
            </div>
            <div class="jn-entry__body">
              <div class="jn-entry__meta">
                <span class="tag tag-red">更新速览</span>
                <span class="jn-entry__ver">V2025-18</span>
              </div>
              <h3 class="jn-entry__title">年中品牌手册修订速览</h3>
              <p class="jn-entry__desc">手册第 4 至第 6 章重新编排，渠道联名物料的申请图示换成新版，旧版手册仍留在索引里供回溯。</p>
            </div>
          </li>

          <li class="jn-entry jn-entry--res" data-reveal>
            <div class="jn-entry__rail">
              <span class="jn-entry__dot" aria-hidden="true"></span>
              <span class="jn-entry__time">近一个月前</span>
            </div>
            <div class="jn-entry__body">
              <div class="jn-entry__meta">
                <span class="tag tag-green">资源上架</span>
                <span class="jn-entry__ver">V2025-17</span>
              </div>
              <h3 class="jn-entry__title">媒体资料包补入产品场景图组</h3>
              <p class="jn-entry__desc">图片按 16:9 与 1:1 两种比例交付，附一页使用范围说明，媒体朋友发稿时可以直接取用。</p>
            </div>
          </li>
        </ol>

        <aside class="jn-side">
          <figure class="jn-fig jn-fig--side" data-reveal>
            <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="层叠档案卡与版本号标签的局部特写" loading="lazy" decoding="async">
          </figure>
          <div class="jn-cats">
            <p class="jn-cats__title">四类记录 · 条目数</p>
            <ul class="jn-cats__list">
              <li class="jn-cats__item">
                <span class="jn-cats__name"><span class="jn-cats__sw jn-cats__sw--red" aria-hidden="true"></span>更新速览</span>
                <span class="jn-cats__count">3</span>
              </li>
              <li class="jn-cats__item">
                <span class="jn-cats__name"><span class="jn-cats__sw jn-cats__sw--gold" aria-hidden="true"></span>栏目变更</span>
                <span class="jn-cats__count">2</span>
              </li>
              <li class="jn-cats__item">
                <span class="jn-cats__name"><span class="jn-cats__sw jn-cats__sw--green" aria-hidden="true"></span>资源上架</span>
                <span class="jn-cats__count">3</span>
              </li>
              <li class="jn-cats__item">
                <span class="jn-cats__name"><span class="jn-cats__sw jn-cats__sw--amber" aria-hidden="true"></span>服务通知</span>
                <span class="jn-cats__count">2</span>
              </li>
            </ul>
          </div>
        </aside>
      </div>

      <p class="jn-log__more">近三个月共 24–26 个版本节点，上面的十条是最近的一批。更早的记录可以从首页侧边索引翻到往前的十一个入口，也可以在资源下载页用版本号直接搜文件；找不着时看看<a class="jn-link" href="/help/">帮助中心的检索说明</a>，或到<a class="jn-link" href="/company/">品牌档案</a>了解负责版本管理的团队。</p>
    </div>
  </section>

  <section class="jn-section" id="series" aria-labelledby="series-title">
    <div class="container">
      <div class="jn-head">
        <span class="eyebrow">专题回溯</span>
        <h2 class="jn-h2" id="series-title">按一条线索，把跨版本的变化连起来</h2>
        <p class="jn-sub">同一件事往往散落在好几个版本里。下面三个专题把相关条目串成一串，需要看演进过程时从这里进，比逐条翻快得多。</p>
      </div>

      <div class="jn-series">
        <article class="jn-series__item" data-reveal>
          <span class="jn-series__span">V2025-10 → V2025-26</span>
          <h3 class="jn-series__title">品牌视觉焕新</h3>
          <p class="jn-series__desc">从主色应用范围到印章符号的落地尺寸，视觉调整按时间顺序排开，最新一期速览已把三期改动合并成对照页。</p>
          <span class="jn-series__count">收录 9 条相关记录</span>
        </article>
        <article class="jn-series__item" data-reveal>
          <span class="jn-series__span">V2025-08 → V2025-25</span>
          <h3 class="jn-series__title">渠道资料包</h3>
          <p class="jn-series__desc">各地物料模板的上架与替换都归在这串里，做区域活动前先翻一遍，能少走回头路，也不会错用上一季的价签。</p>
          <span class="jn-series__count">收录 7 条相关记录</span>
        </article>
        <article class="jn-series__item" data-reveal>
          <span class="jn-series__span">V2025-06 → V2025-22</span>
          <h3 class="jn-series__title">数据模板季</h3>
          <p class="jn-series__desc">投放、动销、会员三张表的字段增补过程都在这里，需要和历史报表对齐时按编号取旧表，字段差异一眼能看出来。</p>
          <span class="jn-series__count">收录 5 条相关记录</span>
        </article>
      </div>

      <figure class="jn-fig jn-fig--strip jn-series__fig" data-reveal>
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="黄昏城市天际线剪影与档案线条叠合的图景" loading="lazy" decoding="async">
      </figure>
    </div>
  </section>

  <section class="jn-section" id="uploads" aria-labelledby="uploads-title">
    <div class="container">
      <div class="jn-head">
        <span class="eyebrow">上架记录</span>
        <h2 class="jn-h2" id="uploads-title">最近放进库里的文件</h2>
        <p class="jn-sub">资源库每月上架约 35 份新文件，过期版本下架后仍保留回溯记录。下表是最近的一批，按分类与版本号可以继续往下查。</p>
      </div>

      <div class="jn-table-wrap">
        <table class="jn-table">
          <thead>
            <tr>
              <th scope="col">文件名称</th>
              <th scope="col">资源分类</th>
              <th scope="col">类型</th>
              <th scope="col">版本号</th>
              <th scope="col">上架时间</th>
              <th scope="col">状态</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="jn-table__name">品牌手册（2025 修订版）</td>
              <td>品牌手册</td>
              <td class="jn-table__type">PDF</td>
              <td class="jn-table__type">V2025-18</td>
              <td>上月中旬</td>
              <td><span class="jn-status"><span class="jn-dot" aria-hidden="true"></span>可下载</span></td>
            </tr>
            <tr>
              <td class="jn-table__name">门店灯箱尺寸与出血标注</td>
              <td>视觉规范</td>
              <td class="jn-table__type">PDF</td>
              <td class="jn-table__type">V2025-21</td>
              <td>上周一</td>
              <td><span class="jn-status"><span class="jn-dot" aria-hidden="true"></span>可下载</span></td>
            </tr>
            <tr>
              <td class="jn-table__name">华东区域促销台卡模板</td>
              <td>渠道支持</td>
              <td class="jn-table__type">表格</td>
              <td class="jn-table__type">V2025-25</td>
              <td>本周三</td>
              <td><span class="jn-status"><span class="jn-dot" aria-hidden="true"></span>可下载</span></td>
            </tr>
            <tr>
              <td class="jn-table__name">媒体投放数据模板</td>
              <td>数据模板</td>
              <td class="jn-table__type">表格</td>
              <td class="jn-table__type">V2025-22</td>
              <td>上周三</td>
              <td><span class="jn-status"><span class="jn-dot" aria-hidden="true"></span>可下载</span></td>
            </tr>
            <tr>
              <td class="jn-table__name">渠道联名物料申请清单</td>
              <td>渠道支持</td>
              <td class="jn-table__type">表格</td>
              <td class="jn-table__type">V2025-20</td>
              <td>本月上旬</td>
              <td><span class="jn-status"><span class="jn-dot" aria-hidden="true"></span>可下载</span></td>
            </tr>
            <tr>
              <td class="jn-table__name">品牌联合标识组合规范</td>
              <td>品牌手册</td>
              <td class="jn-table__type">PDF</td>
              <td class="jn-table__type">V2025-19</td>
              <td>本月上旬</td>
              <td><span class="jn-status jn-status--amber"><span class="jn-dot" aria-hidden="true"></span>授权待确认</span></td>
            </tr>
            <tr>
              <td class="jn-table__name">新品上市传播物料清单</td>
              <td>传播物料</td>
              <td class="jn-table__type">表格</td>
              <td class="jn-table__type">V2025-24</td>
              <td>本周一</td>
              <td><span class="jn-status"><span class="jn-dot" aria-hidden="true"></span>可下载</span></td>
            </tr>
          </tbody>
        </table>
      </div>

      <p class="jn-log__more">文件按品牌手册、视觉规范、传播物料、数据模板、渠道支持、媒体资料六类归档，累计 860 余份。要取用某一份，到<a class="jn-link" href="/apps/">资源下载</a>页按类型与版本号定位即可。</p>
    </div>
  </section>

  <section class="jn-section" id="subscribe" aria-labelledby="subscribe-title">
    <div class="container">
      <div class="jn-head">
        <span class="eyebrow">获取提醒</span>
        <h2 class="jn-h2" id="subscribe-title">不想每次来翻，就让更新找您</h2>
        <p class="jn-sub">三种留存方式，按团队习惯挑一种即可。都不需要注册账号，也不会向您索取额外信息。</p>
      </div>

      <div class="jn-sub">
        <div class="jn-sub__item jn-sub__item--dark" data-reveal>
          <span class="jn-sub__num">01</span>
          <h3 class="jn-sub__title">邮件订阅速览</h3>
          <p class="jn-sub__text">发一封邮件到 <span class="jn-mail">support@shengshi-3s-update.com.cn</span>，主题写「订阅版本速览」，正文注明接收邮箱和您关注的文件分类。工作日内会有同事回复，并把您加入每周速览名单。</p>
        </div>
        <div class="jn-sub__item" data-reveal>
          <span class="jn-sub__num">02</span>
          <h3 class="jn-sub__title">把本页收进收藏夹</h3>
          <p class="jn-sub__text">在浏览器按 Ctrl+D 存下这个地址，或把首页设为常用入口。下次打开，最上面就是新发布的条目，不必重新找路。</p>
        </div>
        <div class="jn-sub__item" data-reveal>
          <span class="jn-sub__num">03</span>
          <h3 class="jn-sub__title">二维码转给同事</h3>
          <p class="jn-sub__text">把本页地址生成二维码发到项目群，扫码即达。渠道同事要查旧版价签、媒体朋友要确认手册版本，都不用再问一遍。</p>
        </div>
      </div>

      <div class="jn-cta">
        <p class="jn-cta__text">拿不准手上的文件是不是最新一版？把文件名和版本号发到客服邮箱，或者直接告诉我们您要用在哪个场景，工作日内给您答复。</p>
        <div class="jn-cta__actions">
          <a class="btn btn-primary" href="/apps/">打开资源下载</a>
          <a class="btn btn-ghost" href="/help/">查看检索方法</a>
        </div>
      </div>
    </div>
  </section>
</main>

.page-news {
  --jn-track: 108px;
  --jn-gap: 28px;
  color: var(--c-ink);
  font-family: var(--font-body);
}

.page-news img {
  max-width: 100%;
  height: auto;
  display: block;
}

.page-news .breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 20px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--c-muted);
}

.page-news .breadcrumb a {
  color: var(--c-muted);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.page-news .breadcrumb a:hover {
  color: var(--c-red);
}

.page-news .crumb-current {
  color: var(--c-ink);
}

.jn-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--c-paper);
  border-bottom: 1px solid var(--c-line);
}

.jn-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(116deg, rgba(176, 18, 47, .09) 0 38%, rgba(176, 18, 47, 0) 38%),
    repeating-linear-gradient(90deg, rgba(216, 210, 199, .55) 0 1px, transparent 1px 76px);
}

.jn-hero__inner {
  display: grid;
  gap: 26px;
  padding: clamp(22px, 4vw, 42px) 0 clamp(30px, 5vw, 56px);
}

.page-news .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--c-muted);
}

.page-news .eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--c-gold);
}

.jn-hero__title {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 6.6vw, 62px);
  line-height: 1.1;
  letter-spacing: -.012em;
  color: var(--c-ink);
}

.jn-mark {
  color: var(--c-red);
}

.jn-hero__lede {
  margin: 16px 0 0;
  max-width: 620px;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.78;
  color: var(--c-ink-2);
}

.jn-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 24px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.jn-stat {
  background: var(--c-paper);
  padding: 14px 13px;
}

.jn-stat__num {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(19px, 2.6vw, 27px);
  letter-spacing: -.02em;
  color: var(--c-red);
}

.jn-stat__label {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--c-muted);
}

.jn-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.jn-jump a {
  padding: 6px 13px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--c-ink-2);
  text-decoration: none;
  background: rgba(250, 248, 244, .78);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.jn-jump a:hover,
.jn-jump a:focus-visible {
  color: var(--c-red);
  border-color: var(--c-gold);
  background: var(--c-warm);
}

.jn-fig {
  margin: 0;
  background: var(--c-warm);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.jn-fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jn-fig--hero {
  aspect-ratio: 16 / 9;
  box-shadow: var(--shadow-2);
}

.jn-fig--cadence {
  aspect-ratio: 3 / 2;
}

.jn-fig--side {
  aspect-ratio: 10 / 7;
}

.jn-fig--strip {
  aspect-ratio: 16 / 9;
}

.jn-section {
  padding: clamp(44px, 6vw, 80px) 0;
  border-top: 1px solid var(--c-line);
  background: var(--c-paper);
}

.jn-head {
  display: grid;
  gap: 10px;
  max-width: 760px;
  margin-bottom: 28px;
}

.jn-h2 {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(23px, 3.4vw, 34px);
  line-height: 1.28;
  color: var(--c-ink);
}

.jn-sub {
  margin: 0;
  font-size: 15px;
  line-height: 1.78;
  color: var(--c-ink-2);
}

.jn-cadence {
  display: grid;
  gap: 26px;
}

.jn-cadence__main {
  min-width: 0;
}

.jn-cadence__grid {
  display: grid;
  gap: 14px;
}

.jn-note {
  padding: 18px 18px 20px;
  background: var(--c-warm);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}

.jn-note__k {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--c-red);
}

.jn-note__v {
  margin: 0;
  font-size: 14px;
  line-height: 1.72;
  color: var(--c-ink-2);
}

.jn-log__grid {
  display: grid;
  gap: 30px;
}

.jn-stream {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.jn-entry {
  display: grid;
  gap: 8px;
  padding: 20px 0;
  border-bottom: 1px solid var(--c-line);
  transition: background var(--dur) var(--ease);
}

.jn-entry:hover {
  background: linear-gradient(90deg, rgba(239, 234, 226, .9), rgba(239, 234, 226, 0) 72%);
}

.jn-entry__rail {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
}

.jn-entry__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-red);
  box-shadow: 0 0 0 3px var(--c-paper), 0 0 0 4px var(--c-line);
}

.jn-entry--cat .jn-entry__dot { background: var(--c-gold); }
.jn-entry--res .jn-entry__dot { background: var(--c-green); }
.jn-entry--svc .jn-entry__dot { background: var(--c-amber); }

.jn-entry__time {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--c-muted);
  white-space: nowrap;
}

.jn-entry__body {
  min-width: 0;
}

.jn-entry__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.jn-entry__ver {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .05em;
  color: var(--c-muted);
}

.jn-entry__title {
  margin: 8px 0 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.42;
  color: var(--c-ink);
}

.jn-entry__desc {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.74;
  color: var(--c-ink-2);
}

.jn-side {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.jn-cats {
  padding: 16px 16px 8px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}

.jn-cats__title {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--c-muted);
}

.jn-cats__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.jn-cats__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  font-size: 13.5px;
  border-bottom: 1px solid var(--c-line);
}

.jn-cats__item:last-child {
  border-bottom: 0;
}

.jn-cats__name {
  display: inline-flex;
  align-items: center;
  color: var(--c-ink);
}

.jn-cats__sw {
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 2px;
  display: inline-block;
}

.jn-cats__sw--red { background: var(--c-red); }
.jn-cats__sw--gold { background: var(--c-gold); }
.jn-cats__sw--green { background: var(--c-green); }
.jn-cats__sw--amber { background: var(--c-amber); }

.jn-cats__count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--c-muted);
}

.jn-log__more {
  margin: 24px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--c-ink-2);
}

.jn-link {
  color: var(--c-red);
  text-decoration: none;
  border-bottom: 1px solid rgba(176, 18, 47, .35);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.jn-link:hover,
.jn-link:focus-visible {
  border-bottom-color: var(--c-red);
}

.jn-series {
  display: grid;
  gap: 14px;
}

.jn-series__item {
  position: relative;
  padding: 22px 20px 20px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.jn-series__item::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c-red), var(--c-gold));
}

.jn-series__item:nth-child(2)::before {
  background: linear-gradient(90deg, var(--c-gold), var(--c-green));
}

.jn-series__item:nth-child(3)::before {
  background: linear-gradient(90deg, var(--c-ink), var(--c-red));
}

.jn-series__item:hover {
  transform: translateY(-2px);
  border-color: var(--c-gold);
  box-shadow: var(--shadow-2);
}

.jn-series__span {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--c-red);
}

.jn-series__title {
  margin: 8px 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.4;
  color: var(--c-ink);
}

.jn-series__desc {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.72;
  color: var(--c-ink-2);
}

.jn-series__count {
  display: block;
  padding-top: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--c-muted);
  border-top: 1px solid var(--c-line);
}

.jn-series__fig {
  margin-top: 22px;
}

.jn-table-wrap {
  overflow-x: auto;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}

.jn-table {
  width: 100%;
  min-width: 700px;
  border-collapse: collapse;
  font-size: 14px;
}

.jn-table th {
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: .1em;
  color: var(--c-muted);
  text-align: left;
  white-space: nowrap;
  background: var(--c-warm);
  border-bottom: 1px solid var(--c-line);
}

.jn-table td {
  padding: 13px 14px;
  vertical-align: top;
  color: var(--c-ink-2);
  border-bottom: 1px solid var(--c-line);
}

.jn-table tbody tr:last-child td {
  border-bottom: 0;
}

.jn-table tbody tr:hover {
  background: rgba(239, 234, 226, .55);
}

.jn-table__name {
  color: var(--c-ink);
  font-weight: 500;
}

.jn-table__type {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--c-ink-2);
  white-space: nowrap;
}

.jn-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  white-space: nowrap;
  color: var(--c-green);
}

.jn-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-green);
}

.jn-status--amber {
  color: var(--c-amber);
}

.jn-status--amber .jn-dot {
  background: var(--c-amber);
}

.jn-sub {
  display: grid;
  gap: 14px;
}

.jn-sub__item {
  padding: 20px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}

.jn-sub__item--dark {
  background: var(--c-ink);
  border-color: var(--c-ink);
}

.jn-sub__num {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--c-gold);
}

.jn-sub__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.4;
  color: var(--c-ink);
}

.jn-sub__item--dark .jn-sub__title {
  color: var(--c-paper);
}

.jn-sub__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.74;
  color: var(--c-ink-2);
}

.jn-sub__item--dark .jn-sub__text {
  color: rgba(250, 248, 244, .82);
}

.jn-mail {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--c-red);
  word-break: break-all;
}

.jn-sub__item--dark .jn-mail {
  color: var(--c-gold);
}

.jn-cta {
  display: grid;
  gap: 16px;
  margin-top: 30px;
  padding: 22px;
  background: var(--c-warm);
  border-left: 3px solid var(--c-red);
  border-radius: var(--r-sm);
}

.jn-cta__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.72;
  color: var(--c-ink);
}

.jn-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (min-width: 700px) {
  .jn-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .jn-cadence__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .jn-entry {
    grid-template-columns: var(--jn-track) minmax(0, 1fr);
    gap: 20px;
  }

  .jn-entry__rail {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .jn-entry__rail::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 16px;
    bottom: -21px;
    width: 1px;
    background: linear-gradient(180deg, var(--c-line), rgba(216, 210, 199, 0));
  }

  .jn-entry:last-child .jn-entry__rail::after {
    display: none;
  }

  .jn-cta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

@media (min-width: 860px) {
  .jn-sub {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .jn-hero__inner {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    align-items: center;
    gap: clamp(28px, 4vw, 56px);
  }

  .jn-fig--hero {
    border-radius: 4px;
    clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%);
  }

  .jn-cadence {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-items: start;
    gap: clamp(26px, 4vw, 48px);
  }

  .jn-series {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .jn-fig--strip {
    aspect-ratio: 21 / 9;
  }
}

@media (min-width: 1000px) {
  .jn-log__grid {
    grid-template-columns: minmax(0, 1fr) 296px;
    align-items: start;
    gap: 40px;
  }

  .jn-side {
    position: sticky;
    top: calc(var(--header-gap) + 12px);
  }

  .jn-entry:nth-child(3n + 2) {
    padding-left: 14px;
  }

  .jn-entry:nth-child(4n) .jn-entry__desc {
    max-width: 92%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .jn-jump a,
  .jn-entry,
  .jn-series__item {
    transition: none;
  }

  .jn-series__item:hover {
    transform: none;
  }
}