.page-news{
  --news-gutter:clamp(18px,4vw,40px);
  --news-maxw:1120px;
  position:relative;
  overflow-x:hidden;
  color:var(--ivory);
  font-family:var(--font-body);
  background:
    radial-gradient(120% 55% at 100% 0%, rgba(178,122,60,.16), transparent 60%),
    radial-gradient(90% 40% at 0% 88%, rgba(17,59,58,.5), transparent 70%),
    linear-gradient(180deg, var(--ink-deep) 0%, var(--ink-deeper) 48%, var(--ink-deep) 100%);
}

.page-news .news-wrap{
  max-width:var(--news-maxw);
  margin:0 auto;
  padding:0 var(--news-gutter) 72px;
}

.page-news .crumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.55em;
  padding:20px 0 6px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:rgba(242,232,216,.6);
}
.page-news .crumbs a{
  color:var(--brass-bright);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.page-news .crumbs a:hover,
.page-news .crumbs a:focus-visible{
  color:var(--ivory);
  border-bottom-color:var(--brass);
}
.page-news .crumbs__sep{color:var(--brass);opacity:.7;}

.page-news .news-hero{
  position:relative;
  isolation:isolate;
  padding:14px 0 4px;
}
.page-news .news-hero__grid{
  position:absolute;
  inset:-16px -14vw 0 -14vw;
  z-index:-1;
  pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(178,122,60,.14) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(178,122,60,.14) 1px, transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(72% 66% at 20% 6%, #000 0%, transparent 74%);
  mask-image:radial-gradient(72% 66% at 20% 6%, #000 0%, transparent 74%);
}

.page-news .eyebrow{
  margin:0 0 14px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--brass-bright);
  display:flex;
  align-items:center;
  gap:10px;
}
.page-news .eyebrow::after{
  content:"";
  flex:1 1 auto;
  height:1px;
  max-width:120px;
  background:linear-gradient(90deg, var(--line), transparent);
}

.page-news h1{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(30px,6.4vw,58px);
  line-height:1.14;
  letter-spacing:.01em;
  color:var(--ivory);
  text-wrap:balance;
}

.page-news .lead{
  margin:18px 0 0;
  max-width:62ch;
  font-size:clamp(15.5px,2.1vw,18px);
  line-height:1.85;
  color:rgba(242,232,216,.82);
}

.page-news .hero-meta{
  list-style:none;
  margin:26px 0 0;
  padding:0;
  display:grid;
  gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
}
.page-news .hero-meta li{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:12px 14px;
  background:rgba(11,31,42,.9);
}
.page-news .hero-meta__k{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--brass-bright);
}
.page-news .hero-meta__v{
  font-family:var(--font-mono);
  font-size:14px;
  line-height:1.5;
  color:var(--ivory);
  overflow-wrap:anywhere;
}

.page-news .news-figure{
  margin:26px 0 0;
  min-width:0;
}
.page-news .news-figure img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:cover;
  border:1px solid var(--line);
  background:var(--teal-deep);
  clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
.page-news .news-figure figcaption{
  margin-top:10px;
  display:flex;
  gap:9px;
  font-family:var(--font-mono);
  font-size:11.5px;
  line-height:1.7;
  letter-spacing:.04em;
  color:rgba(242,232,216,.58);
}
.page-news .news-figure figcaption::before{
  content:"";
  flex:0 0 auto;
  width:12px;
  height:1px;
  margin-top:.78em;
  background:var(--brass);
}

.page-news .news-dial{
  display:flex;
  gap:9px;
  padding:24px 0 4px;
  margin-top:8px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scrollbar-width:thin;
  border-bottom:1px solid var(--line-soft);
  padding-bottom:18px;
}
.page-news .dial-tab{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  border:1px solid var(--line);
  border-radius:2px;
  background:linear-gradient(180deg, rgba(178,122,60,.18), rgba(7,22,32,.62));
  color:var(--ivory);
  text-decoration:none;
  font-size:13px;
  letter-spacing:.04em;
  white-space:nowrap;
  transition:border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.page-news .dial-tab__i{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.1em;
  color:var(--brass-bright);
}
.page-news .dial-tab:hover,
.page-news .dial-tab:focus-visible{
  border-color:var(--brass-bright);
  background:linear-gradient(180deg, rgba(217,160,91,.28), rgba(7,22,32,.7));
  transform:translateY(-1px);
}
.page-news .dial-tab:focus-visible{
  outline:2px solid var(--brass-bright);
  outline-offset:2px;
}

.page-news .news-section{
  position:relative;
  padding:38px 0 30px;
  border-top:1px solid var(--line-soft);
  margin-top:26px;
  scroll-margin-top:calc(var(--topbar-h) + 18px);
}
.page-news .news-section:first-of-type{border-top:0;}

.page-news .news-section__head{display:block;margin-bottom:22px;}
.page-news .news-section__idx{
  display:inline-block;
  padding-top:8px;
  margin-bottom:12px;
  border-top:2px solid var(--brass);
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.22em;
  color:var(--brass);
}
.page-news .news-section h2{
  margin:0 0 12px;
  font-family:var(--font-display);
  font-size:clamp(23px,4.2vw,34px);
  line-height:1.28;
  letter-spacing:.01em;
  color:var(--ivory);
  text-wrap:balance;
}
.page-news .news-section__note{
  margin:0;
  max-width:60ch;
  font-size:15px;
  line-height:1.85;
  color:rgba(242,232,216,.74);
}
.page-news .news-section__foot{
  margin:20px 0 0;
  padding:14px 16px;
  border-left:2px solid var(--brass);
  background:rgba(17,59,58,.42);
  font-size:14.5px;
  line-height:1.8;
  color:rgba(242,232,216,.8);
}
.page-news .news-section__foot a{
  color:var(--brass-bright);
  text-decoration:none;
  border-bottom:1px solid var(--line);
}
.page-news .news-section__foot a:hover,
.page-news .news-section__foot a:focus-visible{
  border-bottom-color:var(--brass-bright);
  color:var(--ivory);
}

.page-news .entry-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
}
.page-news .entry{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
  min-width:0;
  padding:18px 0 18px 18px;
  border-bottom:1px solid var(--line-soft);
}
.page-news .entry::before{
  content:"";
  position:absolute;
  left:0;
  top:24px;
  width:7px;
  height:7px;
  background:rgba(178,122,60,.3);
  border:1px solid var(--brass);
  transform:rotate(45deg);
}
.page-news .entry__num{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
  color:var(--brass-bright);
}
.page-news .entry__body{min-width:0;}
.page-news .entry h3{
  margin:4px 0 6px;
  font-family:var(--font-display);
  font-size:18px;
  line-height:1.42;
  color:var(--ivory);
}
.page-news .entry p{
  margin:0;
  font-size:14.5px;
  line-height:1.82;
  color:rgba(242,232,216,.76);
}
.page-news .entry__cat{
  justify-self:start;
  align-self:start;
  padding:4px 9px;
  border:1px solid var(--line);
  border-radius:2px;
  background:rgba(178,122,60,.09);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--brass-bright);
  white-space:nowrap;
}

.page-news .compare-layout{
  display:grid;
  gap:24px;
  min-width:0;
}
.page-news .compare-layout .news-figure{margin:0;}
.page-news .compare-grid{
  display:grid;
  gap:12px;
  min-width:0;
}
.page-news .compare-card{
  position:relative;
  min-width:0;
  padding:16px 16px 16px 18px;
  border:1px solid var(--line-soft);
  border-left:2px solid var(--brass);
  background:linear-gradient(160deg, rgba(17,59,58,.82), rgba(11,31,42,.88));
}
.page-news .compare-card h3{
  margin:0 0 8px;
  font-family:var(--font-display);
  font-size:17px;
  line-height:1.4;
  color:var(--ivory);
  letter-spacing:.02em;
}
.page-news .compare-card p{
  margin:0;
  font-size:14px;
  line-height:1.8;
  color:rgba(242,232,216,.76);
}
.page-news .compare-card__hint{
  margin-top:10px !important;
  font-family:var(--font-mono) !important;
  font-size:11.5px !important;
  letter-spacing:.05em;
  color:var(--mint) !important;
}

.page-news .log-line{
  list-style:none;
  margin:0;
  padding:0 0 0 4px;
  display:grid;
}
.page-news .log-line .timeline__item{
  position:relative;
  margin-left:6px;
  padding:0 0 24px 24px;
  border-left:1px solid var(--line-soft);
  min-width:0;
}
.page-news .log-line .timeline__item::before{
  content:"";
  position:absolute;
  left:-5px;
  top:5px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--ink-deep);
  border:1px solid var(--brass-bright);
}
.page-news .log-line .timeline__item:last-child{
  border-left-color:transparent;
  padding-bottom:6px;
}
.page-news .log-time{
  display:block;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.16em;
  color:var(--brass-bright);
  margin-bottom:6px;
}
.page-news .log-line h3{
  margin:0 0 6px;
  font-family:var(--font-display);
  font-size:16.5px;
  line-height:1.45;
  color:var(--ivory);
}
.page-news .log-line p{
  margin:0;
  font-size:14px;
  line-height:1.8;
  color:rgba(242,232,216,.74);
}
.page-news .news-figure--log{margin-top:24px;}

.page-news .save-grid{
  display:grid;
  gap:18px;
  min-width:0;
}
.page-news .save-steps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
  min-width:0;
}
.page-news .save-step{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  align-items:start;
  min-width:0;
  padding:14px;
  border:1px solid var(--line-soft);
  background:rgba(17,59,58,.5);
}
.page-news .save-step__n{
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--brass-bright);
  background:rgba(178,122,60,.1);
}
.page-news .save-step h3{
  margin:1px 0 5px;
  font-family:var(--font-display);
  font-size:16px;
  line-height:1.4;
  color:var(--ivory);
}
.page-news .save-step p{
  margin:0;
  font-size:14px;
  line-height:1.78;
  color:rgba(242,232,216,.76);
}
.page-news .panel{
  min-width:0;
  padding:18px;
  border:1px solid rgba(110,46,62,.7);
  border-left:2px solid var(--wine);
  background:linear-gradient(160deg, rgba(110,46,62,.34), rgba(11,31,42,.9));
  border-radius:2px;
}
.page-news .feedback__k{
  margin:0 0 8px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--brass-bright);
}
.page-news .feedback h3{
  margin:0 0 8px;
  font-family:var(--font-display);
  font-size:18px;
  line-height:1.42;
  color:var(--ivory);
}
.page-news .feedback p{
  margin:0;
  font-size:14px;
  line-height:1.82;
  color:rgba(242,232,216,.78);
}
.page-news .feedback__links{
  margin-top:14px !important;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.page-news .feedback__links a{
  display:inline-block;
  padding:8px 13px;
  border:1px solid var(--line);
  border-radius:2px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--brass-bright);
  text-decoration:none;
  background:rgba(11,31,42,.55);
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.page-news .feedback__links a:hover,
.page-news .feedback__links a:focus-visible{
  border-color:var(--brass-bright);
  color:var(--ivory);
}

.page-news .archive-layout{
  display:grid;
  gap:24px;
  min-width:0;
}
.page-news .archive-list{
  display:grid;
  gap:9px;
  min-width:0;
}
.page-news .fold{
  min-width:0;
  border:1px solid var(--line-soft);
  border-left:2px solid transparent;
  border-radius:2px;
  background:linear-gradient(180deg, rgba(7,22,32,.55), rgba(11,31,42,.5));
  transition:border-color .22s var(--ease), background .22s var(--ease);
}
.page-news .fold[open]{
  border-left-color:var(--brass);
  background:linear-gradient(180deg, rgba(17,59,58,.6), rgba(11,31,42,.55));
}
.page-news .fold__sum{
  position:relative;
  list-style:none;
  cursor:pointer;
  display:grid;
  grid-template-columns:1fr auto;
  gap:4px 12px;
  align-items:center;
  padding:13px 38px 13px 14px;
}
.page-news .fold__sum::-webkit-details-marker{display:none;}
.page-news .fold__sum::after{
  content:"+";
  position:absolute;
  right:14px;
  top:12px;
  font-family:var(--font-mono);
  font-size:15px;
  line-height:1;
  color:var(--brass);
}
.page-news .fold[open] .fold__sum::after{content:"–";}
.page-news .fold__sum:focus-visible{
  outline:2px solid var(--brass-bright);
  outline-offset:-2px;
}
.page-news .fold__time{
  grid-column:1;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  color:var(--brass-bright);
}
.page-news .fold__title{
  grid-column:1;
  font-size:15.5px;
  line-height:1.5;
  color:var(--ivory);
}
.page-news .fold__sum .entry__cat{
  grid-column:2;
  grid-row:1 / span 2;
  align-self:center;
}
.page-news .fold__body{
  padding:0 14px 15px;
  font-size:14px;
  line-height:1.82;
  color:rgba(242,232,216,.76);
  border-top:1px solid var(--line-soft);
  margin-top:2px;
  padding-top:12px;
}
.page-news .fold__body p{margin:0;}
.page-news .fold__body a{
  color:var(--brass-bright);
  text-decoration:none;
  border-bottom:1px solid var(--line);
}

.page-news .archive-aside{
  display:grid;
  gap:14px;
  min-width:0;
  align-content:start;
}
.page-news .news-figure--archive{margin:0;}
.page-news .aside-card{
  padding:16px;
  border:1px solid var(--line-soft);
  border-top:2px solid var(--brass);
  background:linear-gradient(180deg, rgba(17,59,58,.6), rgba(11,31,42,.72));
  min-width:0;
}
.page-news .aside-card__k{
  margin:0 0 8px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--brass-bright);
}
.page-news .aside-card h3{
  margin:0 0 8px;
  font-family:var(--font-display);
  font-size:17px;
  line-height:1.42;
  color:var(--ivory);
}
.page-news .aside-card p{
  margin:0;
  font-size:14px;
  line-height:1.82;
  color:rgba(242,232,216,.76);
}
.page-news .aside-card__link{
  margin-top:12px !important;
}
.page-news .aside-card__link a{
  color:var(--brass-bright);
  text-decoration:none;
  border-bottom:1px solid var(--line);
  font-size:14px;
}

.page-news .to-top-wrap{
  margin:34px 0 0;
  padding:0;
}
.page-news .to-top{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:10px 16px;
  border:1px solid var(--line);
  border-radius:2px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
  color:var(--brass-bright);
  text-decoration:none;
  background:linear-gradient(180deg, rgba(178,122,60,.16), rgba(7,22,32,.6));
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.page-news .to-top::before{
  content:"↑";
  font-size:13px;
  color:var(--brass);
}
.page-news .to-top:hover,
.page-news .to-top:focus-visible{
  border-color:var(--brass-bright);
  color:var(--ivory);
}

@media (min-width:720px){
  .page-news .hero-meta{grid-template-columns:repeat(3,1fr);}
  .page-news .news-dial{flex-wrap:wrap;overflow-x:visible;}
  .page-news .entry{
    grid-template-columns:112px 1fr auto;
    gap:6px 20px;
    align-items:start;
    padding-left:22px;
  }
  .page-news .entry__num{padding-top:5px;}
  .page-news .compare-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .page-news .save-grid{grid-template-columns:1.15fr .85fr;}
  .page-news .archive-layout{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);}
}

@media (min-width:940px){
  .page-news .news-hero{padding-top:22px;}
  .page-news .compare-layout{
    grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
    align-items:start;
    gap:28px;
  }
  .page-news .compare-layout .news-figure{margin-top:6px;}
  .page-news .news-section{padding:46px 0 36px;}
  .page-news .news-figure--hero{max-width:960px;}
}

@media (prefers-reduced-motion:reduce){
  .page-news .dial-tab,
  .page-news .fold,
  .page-news .to-top,
  .page-news .feedback__links a,
  .page-news .crumbs a{
    transition:none;
  }
  .page-news .dial-tab:hover{transform:none;}
}

<main id="main-content" class="page-news">
  <div class="news-wrap">

    <nav class="crumbs" aria-label="面包屑导航">
      <a href="/">首页</a>
      <span class="crumbs__sep" aria-hidden="true">/</span>
      <span aria-current="page">规则专栏</span>
    </nav>

    <header class="news-hero" id="news-top">
      <div class="news-hero__grid" aria-hidden="true"></div>
      <p class="eyebrow">RULE JOURNAL · 第 12 期</p>
      <h1>版本一动，规则说明先跟上</h1>
      <p class="lead">旧版客户端上的活动说明，常在版本更新后换一处位置、改一句条件。发条娱乐苹果把每期变化的规则、入口和设置提示写成条目，您先看清这一期改了什么，再决定要不要动手调整。</p>
      <ul class="hero-meta">
        <li>
          <span class="hero-meta__k">本期编号</span>
          <span class="hero-meta__v">E-07 · 第 12 期</span>
        </li>
        <li>
          <span class="hero-meta__k">覆盖区间</span>
          <span class="hero-meta__v">5 个旧系统区间</span>
        </li>
        <li>
          <span class="hero-meta__k">累计条目</span>
          <span class="hero-meta__v">128 条 · 高频 42 条</span>
        </li>
      </ul>
      <figure class="news-figure news-figure--hero">
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="规则编号与刻度盘组合的信息图，概括本期旧版客户端规则更新的重点条目">
        <figcaption>本期重点条目按编号排列，换设备或咨询客服时报编号就能对上。</figcaption>
      </figure>
    </header>

    <nav class="news-dial" aria-label="栏目拨档">
      <a class="dial-tab" href="#digest"><span class="dial-tab__i">01</span>本期要点</a>
      <a class="dial-tab" href="#compare"><span class="dial-tab__i">02</span>活动对照</a>
      <a class="dial-tab" href="#log"><span class="dial-tab__i">03</span>版本日志</a>
      <a class="dial-tab" href="#save"><span class="dial-tab__i">04</span>收藏与反馈</a>
      <a class="dial-tab" href="#archive"><span class="dial-tab__i">05</span>往期条目</a>
    </nav>

    <section class="news-section" id="digest" aria-labelledby="digest-title">
      <div class="news-section__head">
        <span class="news-section__idx" aria-hidden="true">01</span>
        <h2 id="digest-title">这一周改了哪几条</h2>
        <p class="news-section__note">规则说明页每周更新一次。本期新写与改写的条目集中在下面四条，按活动条件、入口位置、设置步骤、专题对照分开整理，读完再动手也不迟。</p>
      </div>

      <ol class="entry-list">
        <li class="entry">
          <span class="entry__num">R-03·014</span>
          <div class="entry__body">
            <h3>领页面条件拆成三行说明</h3>
            <p>原先挤成一段的活动条件，按账号状态、可见范围、领取时段分行写清。对着自己所在的系统区间读一遍，就知道这一步能不能走。</p>
          </div>
          <span class="entry__cat">规则更新</span>
        </li>
        <li class="entry">
          <span class="entry__num">R-03·021</span>
          <div class="entry__body">
            <h3>入口收藏区改成双维度分类</h3>
            <p>收藏页现在同时按版本阶段和主题排列，同一主题下能直接看到各阶段入口。之前存过旧地址的，建议重新确认一次位置。</p>
          </div>
          <span class="entry__cat">收藏指引</span>
        </li>
        <li class="entry">
          <span class="entry__num">R-02·036</span>
          <div class="entry__body">
            <h3>设置前的三项检查补上了说明</h3>
            <p>涉及显示与权限的三个常见场景，补上了改之前要先看的两件事：当前开关状态、改动后需要重新进入页面。步骤图跟着一起更新了。</p>
          </div>
          <span class="entry__cat">版本说明</span>
        </li>
        <li class="entry">
          <span class="entry__num">R-03·002</span>
          <div class="entry__body">
            <h3>活动对照专题第 6 期上线</h3>
            <p>这一期把条件表述与入口位置的差异并排摆开，用类别说明代替逐字罗列，换版本前扫一遍就能抓到要重新确认的地方。</p>
          </div>
          <span class="entry__cat">对照专题</span>
        </li>
      </ol>

      <p class="news-section__foot">哪一条读不通，可以<a href="/support/">到支持中心按编号查说明</a>，或直接通过客服通道问一次。</p>
    </section>

    <section class="news-section" id="compare" aria-labelledby="compare-title">
      <div class="news-section__head">
        <span class="news-section__idx" aria-hidden="true">02</span>
        <h2 id="compare-title">同一活动，两处说明摆在一起看</h2>
        <p class="news-section__note">专题按四个维度整理差异。您不需要记住每一条改动，只要知道换版本之后哪几栏值得重新读一遍。</p>
      </div>

      <div class="compare-layout">
        <figure class="news-figure news-figure--compare">
          <img src="{zhanqunpic:h:750w:1000}" width="1000" height="750" alt="多圈刻度盘与对照标签组成的抽象信息图，表现活动说明的类别化比较" loading="lazy" decoding="async">
          <figcaption>四个维度各有一圈刻度，对应条目编号写在圈外。</figcaption>
        </figure>

        <div class="compare-grid">
          <article class="compare-card">
            <h3>规则条件</h3>
            <p>同一活动的参与条件，在不同版本里可能写法不同：有的按账号状态分条，有的按领取时段分条。逐条读完再判断自己属于哪一类。</p>
            <p class="compare-card__hint">先看：条件是否分条、有无时间范围。</p>
          </article>
          <article class="compare-card">
            <h3>入口位置</h3>
            <p>新版把入口放在侧栏，旧版仍留在活动页里。收藏之前先看一眼当前版本的位置，避免书签指向已经调整过的地址。</p>
            <p class="compare-card__hint">先看：入口在页面第几层。</p>
          </article>
          <article class="compare-card">
            <h3>设置步骤</h3>
            <p>开关名称和先后顺序会有差别，改动之前把顺序读一遍，能少走来回切换的弯路。18 个常见设置场景都配了步骤图。</p>
            <p class="compare-card__hint">先看：改动后是否需要重进页面。</p>
          </article>
          <article class="compare-card">
            <h3>客服响应</h3>
            <p>复杂问题会转交技术支持，并给出后续反馈的时间。工作日首次响应平均约 20 分钟，附上系统版本与截图能更快定位。</p>
            <p class="compare-card__hint">先看：问题属于规则还是设置。</p>
          </article>
        </div>
      </div>

      <p class="news-section__foot">如果您习惯先做一轮华人娱乐平台比活动对照，就照这四栏逐项走：条件、入口、步骤、响应，哪一栏对不上，先停手把说明读完。</p>
    </section>

    <section class="news-section" id="log" aria-labelledby="log-title">
      <div class="news-section__head">
        <span class="news-section__idx" aria-hidden="true">03</span>
        <h2 id="log-title">版本日志：最近几轮都动了什么</h2>
        <p class="news-section__note">6 个旧版客户端阶段的说明按先后顺序串在这里，越靠前越新。重要变更会在两小时内同步到收藏页的提示位。</p>
      </div>

      <ol class="timeline log-line">
        <li class="timeline__item">
          <span class="log-time">本周</span>
          <h3>E-07 阶段规则说明页上线</h3>
          <p>7 个主题分类全部同步到收藏页，高频问题按主题重新分组，42 条高频条目加上了短标签。</p>
        </li>
        <li class="timeline__item">
          <span class="log-time">上周</span>
          <h3>旧版入口分类调整</h3>
          <p>收藏区从单层列表改为版本阶段与主题两条轴，入口数量没变，找起来少绕一步。</p>
        </li>
        <li class="timeline__item">
          <span class="log-time">本月上旬</span>
          <h3>设置指引补了三个场景</h3>
          <p>显示与权限相关的三个场景补上步骤图和警示标签，改动前需要确认的开关状态写在最前面。</p>
        </li>
        <li class="timeline__item">
          <span class="log-time">上一迭代阶段</span>
          <h3>校验字段写法统一</h3>
          <p>5 个旧系统区间的校验说明改成同一种写法，报错时对照起来更直观。</p>
        </li>
        <li class="timeline__item">
          <span class="log-time">上月</span>
          <h3>客服答复与说明页对齐</h3>
          <p>客服通道的常见答复同步到当期条目，复杂问题转技术支持时会给出后续反馈时间。</p>
        </li>
      </ol>

      <figure class="news-figure news-figure--log">
        <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="齿轮链条与版本编号组成的时间轴图形，呈现旧版客户端版本迭代的时间线索" loading="lazy" decoding="async">
        <figcaption>每一格对应一个版本阶段，节点上的编号可回到当期条目查询。</figcaption>
      </figure>
    </section>

    <section class="news-section" id="save" aria-labelledby="save-title">
      <div class="news-section__head">
        <span class="news-section__idx" aria-hidden="true">04</span>
        <h2 id="save-title">收藏一次，下次少找一遍</h2>
        <p class="news-section__note">三种收藏方式各有适用场合。挑一种自己顺手的，把常用入口放在伸手可及的位置，换设备时也能找回。</p>
      </div>

      <div class="save-grid">
        <ol class="save-steps">
          <li class="save-step">
            <span class="save-step__n">1</span>
            <div>
              <h3>复制链接</h3>
              <p>把收藏页的链接复制到备忘录或聊天窗口，换一台设备粘贴就能打开，适合短期使用。</p>
            </div>
          </li>
          <li class="save-step">
            <span class="save-step__n">2</span>
            <div>
              <h3>浏览器书签</h3>
              <p>在旧版浏览器里把收藏页加入书签，命名时带上版本阶段，几个阶段并列也不会认错。</p>
            </div>
          </li>
          <li class="save-step">
            <span class="save-step__n">3</span>
            <div>
              <h3>页面内标记</h3>
              <p>收藏页上可以直接给常用入口打标记，下次进入从标记处跳转，不必重新翻分类。</p>
            </div>
          </li>
        </ol>

        <div class="panel feedback">
          <p class="feedback__k">读者反馈</p>
          <h3>说明和界面对不上，告诉我们一声</h3>
          <p>如果某个入口在您的系统上打不开，或者读到的条件与实际显示不一样，请把系统版本和一张截图发过来。技术校验小组会跟着复现，确认后写进下一期条目。</p>
          <p class="feedback__links"><a href="/support/">打开支持中心</a><a href="/download/">到版本下载看入口</a></p>
        </div>
      </div>
    </section>

    <section class="news-section" id="archive" aria-labelledby="archive-title">
      <div class="news-section__head">
        <span class="news-section__idx" aria-hidden="true">05</span>
        <h2 id="archive-title">往期条目，按主题翻</h2>
        <p class="news-section__note">每月 4 期规则说明、2 期活动对照专题，按规则更新、版本说明、收藏指引、对照专题四类归档。点开任一条看摘要。</p>
      </div>

      <div class="archive-layout">
        <div class="archive-list">
          <details class="fold">
            <summary class="fold__sum">
              <span class="fold__time">本周</span>
              <span class="fold__title">E-07 阶段规则说明页上线</span>
              <span class="entry__cat">规则更新</span>
            </summary>
            <div class="fold__body">
              <p>128 条说明按 7 个主题重排，其中 42 条列为高频问题。每一条都带阶段码、主题码和序号，查询时报编号最快。</p>
            </div>
          </details>

          <details class="fold">
            <summary class="fold__sum">
              <span class="fold__time">本周</span>
              <span class="fold__title">入口收藏区改为双维度分类</span>
              <span class="entry__cat">收藏指引</span>
            </summary>
            <div class="fold__body">
              <p>收藏页同时按版本阶段和主题排列，同一主题下能看到各阶段入口。原先按单层列表存下的书签，建议重新走一次分类。</p>
            </div>
          </details>

          <details class="fold">
            <summary class="fold__sum">
              <span class="fold__time">上周</span>
              <span class="fold__title">设置指引补充三处常见场景</span>
              <span class="entry__cat">版本说明</span>
            </summary>
            <div class="fold__body">
              <p>显示、通知、权限三个场景补上步骤图，改动前需要确认的开关状态写在最前面。余下场景按顺序陆续补齐。</p>
            </div>
          </details>

          <details class="fold">
            <summary class="fold__sum">
              <span class="fold__time">上周</span>
              <span class="fold__title">对照专题第 6 期：条件与入口的差异</span>
              <span class="entry__cat">对照专题</span>
            </summary>
            <div class="fold__body">
              <p>这一期把参与条件的写法和入口所在层级并排说明，举的是类别例子，不逐字照搬他处条文。换版本前扫一遍，就知道先读哪一栏。</p>
            </div>
          </details>

          <details class="fold">
            <summary class="fold__sum">
              <span class="fold__time">本月上旬</span>
              <span class="fold__title">5 个旧系统区间的校验说明统一</span>
              <span class="entry__cat">版本说明</span>
            </summary>
            <div class="fold__body">
              <p>校验字段改成同一种写法，报错位置一眼能对上。下载指引页的校验部分同步更新，两处读到的顺序一致。</p>
            </div>
          </details>

          <details class="fold">
            <summary class="fold__sum">
              <span class="fold__time">上月中旬</span>
              <span class="fold__title">书签与复制链接的收藏写法</span>
              <span class="entry__cat">收藏指引</span>
            </summary>
            <div class="fold__body">
              <p>整理了三种收藏方式各自的适用场合，以及命名时带上版本阶段的小习惯。换设备找回入口，靠的就是这一步。</p>
            </div>
          </details>

          <details class="fold">
            <summary class="fold__sum">
              <span class="fold__time">上一版本阶段</span>
              <span class="fold__title">7 个主题分类重新归并</span>
              <span class="entry__cat">规则更新</span>
            </summary>
            <div class="fold__body">
              <p>活动规则、入口收藏、设置步骤、版本兼容、客服通道、安全提示、常见问题七类重新划分，内容偏多的长条拆成两三条写。</p>
            </div>
          </details>

          <details class="fold">
            <summary class="fold__sum">
              <span class="fold__time">第 11 期</span>
              <span class="fold__title">对照专题第 5 期：响应速度的差异</span>
              <span class="entry__cat">对照专题</span>
            </summary>
            <div class="fold__body">
              <p>按问题类型说明客服通道的处理顺序，复杂问题转技术支持时会给出后续反馈时间。工作日首次响应平均约 20 分钟。</p>
            </div>
          </details>
        </div>

        <aside class="archive-aside">
          <figure class="news-figure news-figure--archive">
            <img src="{zhanqunpic:h:700w:900}" width="900" height="700" alt="复古工坊档案柜与金属标签纹理，表现规则条目的持续归档与更新" loading="lazy" decoding="async">
          </figure>
          <div class="aside-card">
            <p class="aside-card__k">归档说明</p>
            <h3>条目一直在长</h3>
            <p>月更节奏之外，遇到版本调整会加发一期。12 个内容维护伙伴与 3 个技术校验小组按季度参与条目整理，把读者反映的问题补进对应分类。</p>
            <p class="aside-card__link"><a href="/brand/">看看品牌工坊这些年的服务沿革</a></p>
          </div>
        </aside>
      </div>

      <p class="to-top-wrap"><a class="to-top" href="#news-top">回到本期开头</a></p>
    </section>

  </div>
</main>

.page-news{
  --news-gutter:clamp(18px,4vw,40px);
  --news-maxw:1120px;
  position:relative;
  overflow-x:hidden;
  color:var(--ivory);
  font-family:var(--font-body);
  background:
    radial-gradient(120% 55% at 100% 0%, rgba(178,122,60,.16), transparent 60%),
    radial-gradient(90% 40% at 0% 88%, rgba(17,59,58,.5), transparent 70%),
    linear-gradient(180deg, var(--ink-deep) 0%, var(--ink-deeper) 48%, var(--ink-deep) 100%);
}

.page-news .news-wrap{
  max-width:var(--news-maxw);
  margin:0 auto;
  padding:0 var(--news-gutter) 72px;
}

.page-news .crumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.55em;
  padding:20px 0 6px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:rgba(242,232,216,.6);
}
.page-news .crumbs a{
  color:var(--brass-bright);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.page-news .crumbs a:hover,
.page-news .crumbs a:focus-visible{
  color:var(--ivory);
  border-bottom-color:var(--brass);
}
.page-news .crumbs__sep{color:var(--brass);opacity:.7;}

.page-news .news-hero{
  position:relative;
  isolation:isolate;
  padding:14px 0 4px;
}
.page-news .news-hero__grid{
  position:absolute;
  inset:-16px -14vw 0 -14vw;
  z-index:-1;
  pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(178,122,60,.14) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(178,122,60,.14) 1px, transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(72% 66% at 20% 6%, #000 0%, transparent 74%);
  mask-image:radial-gradient(72% 66% at 20% 6%, #000 0%, transparent 74%);
}

.page-news .eyebrow{
  margin:0 0 14px;
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--brass-bright);
}
.page-news .eyebrow::after{
  content:"";
  flex:1 1 auto;
  height:1px;
  max-width:120px;
  background:linear-gradient(90deg, var(--line), transparent);
}

.page-news h1{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(30px,6.4vw,58px);
  line-height:1.14;
  letter-spacing:.01em;
  color:var(--ivory);
  text-wrap:balance;
}

.page-news .lead{
  margin:18px 0 0;
  max-width:62ch;
  font-size:clamp(15.5px,2.1vw,18px);
  line-height:1.85;
  color:rgba(242,232,216,.82);
}

.page-news .hero-meta{
  list-style:none;
  margin:26px 0 0;
  padding:0;
  display:grid;
  gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
}
.page-news .hero-meta li{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:12px 14px;
  background:rgba(11,31,42,.9);
}
.page-news .hero-meta__k{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--brass-bright);
}
.page-news .hero-meta__v{
  font-family:var(--font-mono);
  font-size:14px;
  line-height:1.5;
  color:var(--ivory);
  overflow-wrap:anywhere;
}

.page-news .news-figure{
  margin:26px 0 0;
  min-width:0;
}
.page-news .news-figure img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:cover;
  border:1px solid var(--line);
  background:var(--teal-deep);
  clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
.page-news .news-figure figcaption{
  margin-top:10px;
  display:flex;
  gap:9px;
  font-family:var(--font-mono);
  font-size:11.5px;
  line-height:1.7;
  letter-spacing:.04em;
  color:rgba(242,232,216,.58);
}
.page-news .news-figure figcaption::before{
  content:"";
  flex:0 0 auto;
  width:12px;
  height:1px;
  margin-top:.78em;
  background:var(--brass);
}

.page-news .news-dial{
  display:flex;
  gap:9px;
  margin-top:8px;
  padding:24px 0 18px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scrollbar-width:thin;
  border-bottom:1px solid var(--line-soft);
}
.page-news .dial-tab{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  border:1px solid var(--line);
  border-radius:2px;
  background:linear-gradient(180deg, rgba(178,122,60,.18), rgba(7,22,32,.62));
  color:var(--ivory);
  text-decoration:none;
  font-size:13px;
  letter-spacing:.04em;
  white-space:nowrap;
  transition:border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.page-news .dial-tab__i{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.1em;
  color:var(--brass-bright);
}
.page-news .dial-tab:hover,
.page-news .dial-tab:focus-visible{
  border-color:var(--brass-bright);
  background:linear-gradient(180deg, rgba(217,160,91,.28), rgba(7,22,32,.7));
  transform:translateY(-1px);
}
.page-news .dial-tab:focus-visible{
  outline:2px solid var(--brass-bright);
  outline-offset:2px;
}

.page-news .news-section{
  position:relative;
  padding:38px 0 30px;
  border-top:1px solid var(--line-soft);
  margin-top:26px;
  scroll-margin-top:calc(var(--topbar-h) + 18px);
}
.page-news .news-section__head{display:block;margin-bottom:22px;}
.page-news .news-section__idx{
  display:inline-block;
  padding-top:8px;
  margin-bottom:12px;
  border-top:2px solid var(--brass);
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.22em;
  color:var(--brass);
}
.page-news .news-section h2{
  margin:0 0 12px;
  font-family:var(--font-display);
  font-size:clamp(23px,4.2vw,34px);
  line-height:1.28;
  letter-spacing:.01em;
  color:var(--ivory);
  text-wrap:balance;
}
.page-news .news-section__note{
  margin:0;
  max-width:60ch;
  font-size:15px;
  line-height:1.85;
  color:rgba(242,232,216,.74);
}
.page-news .news-section__foot{
  margin:20px 0 0;
  padding:14px 16px;
  border-left:2px solid var(--brass);
  background:rgba(17,59,58,.42);
  font-size:14.5px;
  line-height:1.8;
  color:rgba(242,232,216,.8);
}
.page-news .news-section__foot a{
  color:var(--brass-bright);
  text-decoration:none;
  border-bottom:1px solid var(--line);
}
.page-news .news-section__foot a:hover,
.page-news .news-section__foot a:focus-visible{
  border-bottom-color:var(--brass-bright);
  color:var(--ivory);
}

.page-news .entry-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
}
.page-news .entry{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
  min-width:0;
  padding:18px 0 18px 18px;
  border-bottom:1px solid var(--line-soft);
}
.page-news .entry::before{
  content:"";
  position:absolute;
  left:0;
  top:24px;
  width:7px;
  height:7px;
  background:rgba(178,122,60,.3);
  border:1px solid var(--brass);
  transform:rotate(45deg);
}
.page-news .entry__num{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
  color:var(--brass-bright);
}
.page-news .entry__body{min-width:0;}
.page-news .entry h3{
  margin:4px 0 6px;
  font-family:var(--font-display);
  font-size:18px;
  line-height:1.42;
  color:var(--ivory);
}
.page-news .entry p{
  margin:0;
  font-size:14.5px;
  line-height:1.82;
  color:rgba(242,232,216,.76);
}
.page-news .entry__cat{
  justify-self:start;
  align-self:start;
  padding:4px 9px;
  border:1px solid var(--line);
  border-radius:2px;
  background:rgba(178,122,60,.09);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--brass-bright);
  white-space:nowrap;
}

.page-news .compare-layout{
  display:grid;
  gap:24px;
  min-width:0;
}
.page-news .compare-layout .news-figure{margin:0;}
.page-news .compare-grid{
  display:grid;
  gap:12px;
  min-width:0;
}
.page-news .compare-card{
  position:relative;
  min-width:0;
  padding:16px 16px 16px 18px;
  border:1px solid var(--line-soft);
  border-left:2px solid var(--brass);
  background:linear-gradient(160deg, rgba(17,59,58,.82), rgba(11,31,42,.88));
}
.page-news .compare-card h3{
  margin:0 0 8px;
  font-family:var(--font-display);
  font-size:17px;
  line-height:1.4;
  letter-spacing:.02em;
  color:var(--ivory);
}
.page-news .compare-card p{
  margin:0;
  font-size:14px;
  line-height:1.8;
  color:rgba(242,232,216,.76);
}
.page-news .compare-card .compare-card__hint{
  margin-top:10px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.05em;
  color:var(--mint);
}

.page-news .log-line{
  list-style:none;
  margin:0;
  padding:0 0 0 4px;
  display:grid;
}
.page-news .log-line .timeline__item{
  position:relative;
  margin-left:6px;
  padding:0 0 24px 24px;
  border-left:1px solid var(--line-soft);
  min-width:0;
}
.page-news .log-line .timeline__item::before{
  content:"";
  position:absolute;
  left:-5px;
  top:5px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--ink-deep);
  border:1px solid var(--brass-bright);
}
.page-news .log-line .timeline__item:last-child{
  border-left-color:transparent;
  padding-bottom:6px;
}
.page-news .log-time{
  display:block;
  margin-bottom:6px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.16em;
  color:var(--brass-bright);
}
.page-news .log-line h3{
  margin:0 0 6px;
  font-family:var(--font-display);
  font-size:16.5px;
  line-height:1.45;
  color:var(--ivory);
}
.page-news .log-line p{
  margin:0;
  font-size:14px;
  line-height:1.8;
  color:rgba(242,232,216,.74);
}
.page-news .news-figure--log{margin-top:24px;}

.page-news .save-grid{
  display:grid;
  gap:18px;
  min-width:0;
}
.page-news .save-steps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
  min-width:0;
}
.page-news .save-step{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  align-items:start;
  min-width:0;
  padding:14px;
  border:1px solid var(--line-soft);
  background:rgba(17,59,58,.5);
}
.page-news .save-step__n{
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  background:rgba(178,122,60,.1);
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--brass-bright);
}
.page-news .save-step h3{
  margin:1px 0 5px;
  font-family:var(--font-display);
  font-size:16px;
  line-height:1.4;
  color:var(--ivory);
}
.page-news .save-step p{
  margin:0;
  font-size:14px;
  line-height:1.78;
  color:rgba(242,232,216,.76);
}
.page-news .panel{
  min-width:0;
  padding:18px;
  border:1px solid rgba(110,46,62,.7);
  border-left:2px solid var(--wine);
  border-radius:2px;
  background:linear-gradient(160deg, rgba(110,46,62,.34), rgba(11,31,42,.9));
}
.page-news .feedback__k{
  margin:0 0 8px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--brass-bright);
}
.page-news .feedback h3{
  margin:0 0 8px;
  font-family:var(--font-display);
  font-size:18px;
  line-height:1.42;
  color:var(--ivory);
}
.page-news .feedback p{
  margin:0;
  font-size:14px;
  line-height:1.82;
  color:rgba(242,232,216,.78);
}
.page-news .feedback .feedback__links{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.page-news .feedback__links a{
  display:inline-block;
  padding:8px 13px;
  border:1px solid var(--line);
  border-radius:2px;
  background:rgba(11,31,42,.55);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--brass-bright);
  text-decoration:none;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.page-news .feedback__links a:hover,
.page-news .feedback__links a:focus-visible{
  border-color:var(--brass-bright);
  color:var(--ivory);
}

.page-news .archive-layout{
  display:grid;
  gap:24px;
  min-width:0;
}
.page-news .archive-list{
  display:grid;
  gap:9px;
  min-width:0;
}
.page-news .fold{
  min-width:0;
  border:1px solid var(--line-soft);
  border-left:2px solid transparent;
  border-radius:2px;
  background:linear-gradient(180deg, rgba(7,22,32,.55), rgba(11,31,42,.5));
  transition:border-color .22s var(--ease), background .22s var(--ease);
}
.page-news .fold[open]{
  border-left-color:var(--brass);
  background:linear-gradient(180deg, rgba(17,59,58,.6), rgba(11,31,42,.55));
}
.page-news .fold__sum{
  position:relative;
  list-style:none;
  cursor:pointer;
  display:grid;
  grid-template-columns:1fr auto;
  gap:4px 12px;
  align-items:center;
  padding:13px 38px 13px 14px;
}
.page-news .fold__sum::-webkit-details-marker{display:none;}
.page-news .fold__sum::after{
  content:"+";
  position:absolute;
  right:14px;
  top:12px;
  font-family:var(--font-mono);
  font-size:15px;
  line-height:1;
  color:var(--brass);
}
.page-news .fold[open] .fold__sum::after{content:"–";}
.page-news .fold__sum:focus-visible{
  outline:2px solid var(--brass-bright);
  outline-offset:-2px;
}
.page-news .fold__time{
  grid-column:1;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  color:var(--brass-bright);
}
.page-news .fold__title{
  grid-column:1;
  font-size:15.5px;
  line-height:1.5;
  color:var(--ivory);
}
.page-news .fold__sum .entry__cat{
  grid-column:2;
  grid-row:1 / span 2;
  align-self:center;
}
.page-news .fold__body{
  margin-top:2px;
  padding:12px 14px 15px;
  border-top:1px solid var(--line-soft);
  font-size:14px;
  line-height:1.82;
  color:rgba(242,232,216,.76);
}
.page-news .fold__body p{margin:0;}
.page-news .fold__body a{
  color:var(--brass-bright);
  text-decoration:none;
  border-bottom:1px solid var(--line);
}

.page-news .archive-aside{
  display:grid;
  gap:14px;
  align-content:start;
  min-width:0;
}
.page-news .news-figure--archive{margin:0;}
.page-news .aside-card{
  min-width:0;
  padding:16px;
  border:1px solid var(--line-soft);
  border-top:2px solid var(--brass);
  background:linear-gradient(180deg, rgba(17,59,58,.6), rgba(11,31,42,.72));
}
.page-news .aside-card__k{
  margin:0 0 8px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--brass-bright);
}
.page-news .aside-card h3{
  margin:0 0 8px;
  font-family:var(--font-display);
  font-size:17px;
  line-height:1.42;
  color:var(--ivory);
}
.page-news .aside-card p{
  margin:0;
  font-size:14px;
  line-height:1.82;
  color:rgba(242,232,216,.76);
}
.page-news .aside-card .aside-card__link{margin-top:12px;}
.page-news .aside-card__link a{
  font-size:14px;
  color:var(--brass-bright);
  text-decoration:none;
  border-bottom:1px solid var(--line);
}

.page-news .to-top-wrap{
  margin:34px 0 0;
  padding:0;
}
.page-news .to-top{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:10px 16px;
  border:1px solid var(--line);
  border-radius:2px;
  background:linear-gradient(180deg, rgba(178,122,60,.16), rgba(7,22,32,.6));
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
  color:var(--brass-bright);
  text-decoration:none;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.page-news .to-top::before{
  content:"↑";
  font-size:13px;
  color:var(--brass);
}
.page-news .to-top:hover,
.page-news .to-top:focus-visible{
  border-color:var(--brass-bright);
  color:var(--ivory);
}

@media (min-width:720px){
  .page-news .hero-meta{grid-template-columns:repeat(3,1fr);}
  .page-news .news-dial{flex-wrap:wrap;overflow-x:visible;}
  .page-news .entry{
    grid-template-columns:112px 1fr auto;
    gap:6px 20px;
    align-items:start;
    padding-left:22px;
  }
  .page-news .entry__num{padding-top:5px;}
  .page-news .compare-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .page-news .save-grid{grid-template-columns:1.15fr .85fr;}
  .page-news .archive-layout{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);}
}

@media (min-width:940px){
  .page-news .news-hero{padding-top:22px;}
  .page-news .news-section{padding:46px 0 36px;}
  .page-news .compare-layout{
    grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
    align-items:start;
    gap:28px;
  }
  .page-news .compare-layout .news-figure{margin-top:6px;}
  .page-news .news-figure--hero{max-width:960px;}
}

@media (prefers-reduced-motion:reduce){
  .page-news .dial-tab,
  .page-news .fold,
  .page-news .to-top,
  .page-news .feedback__links a,
  .page-news .crumbs a{
    transition:none;
  }
  .page-news .dial-tab:hover{transform:none;}
}