.page-news{
  --news-hair: rgba(200,162,74,.18);
  --news-hair-strong: rgba(200,162,74,.34);
  background: var(--ink);
  color: var(--ivory);
}

/* ---------- 首屏 ---------- */
.page-news .news-hero{
  display: grid;
  grid-template-columns: 1fr;
  background:
    radial-gradient(140% 120% at 92% -10%, rgba(200,162,74,.18), rgba(13,15,18,0) 58%),
    linear-gradient(180deg, rgba(94,78,44,.20), rgba(13,15,18,0) 42%),
    var(--ink);
  border-bottom: 1px solid var(--news-hair);
}

.page-news .news-hero__panel{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-2);
  padding: clamp(24px, 6vw, 48px) var(--gutter) clamp(30px, 6vw, 56px);
}

.page-news .news-hero__panel::before{
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), rgba(200,162,74,0));
}

.page-news .news-hero .breadcrumb{
  margin-bottom: var(--sp-1);
}

.page-news .news-hero .eyebrow{
  color: var(--gold-bright);
  margin: 0;
}

.page-news .news-hero h1{
  margin: 0;
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(1.85rem, 5.4vw, 3.4rem);
  line-height: 1.16;
  letter-spacing: -.01em;
  max-width: 14em;
}

.page-news .news-hero__lede{
  margin: 0;
  max-width: 34em;
  color: var(--ivory-80);
  font-size: clamp(.95rem, 1.7vw, 1.05rem);
  line-height: 1.88;
}

.page-news .news-hero__meta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--sp-1);
}

.page-news .news-hero__meta span{
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
  padding: 6px 11px;
  color: var(--gold-bright);
  border: 1px solid var(--news-hair-strong);
  background: rgba(200,162,74,.06);
}

.page-news .news-hero__media{
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--news-hair);
  background: linear-gradient(135deg, rgba(23,26,31,.9), rgba(13,15,18,.9));
}

.page-news .news-hero__media img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: saturate(.86) contrast(1.06);
}

.page-news .news-hero__media::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(205deg, rgba(13,15,18,0) 38%, rgba(13,15,18,.72));
}

/* ---------- 通用区块标题 ---------- */
.page-news .notes-block__head{
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 46em;
  margin-bottom: var(--sp-4);
}

.page-news .notes-block__title{
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.35rem, 3.2vw, 2rem);
  line-height: 1.32;
  letter-spacing: -.005em;
}

.page-news .notes-block__lede{
  margin: 0;
  max-width: 40em;
  color: var(--ivory-60);
  font-size: .95rem;
  line-height: 1.85;
}

/* ---------- 横向主题带 ---------- */
.page-news .theme-band{
  padding: clamp(36px, 6vw, 68px) 0 clamp(24px, 4vw, 40px);
  border-bottom: 1px solid var(--news-hair);
  background: linear-gradient(180deg, rgba(23,26,31,.55), rgba(13,15,18,0) 70%);
  overflow: hidden;
}

.page-news .theme-band__head{
  margin-bottom: var(--sp-3);
}

.page-news .theme-band__head .notes-block__lede{
  max-width: 34em;
}

.page-news .theme-band__track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(84%, 400px);
  gap: var(--sp-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-2) var(--gutter) var(--sp-3);
  scrollbar-width: thin;
  scrollbar-color: var(--gold) rgba(200,162,74,.12);
}

.page-news .theme-card{
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 250px;
  padding: var(--sp-3);
  border: 1px solid var(--news-hair);
  border-top: 2px solid var(--gold);
  background: linear-gradient(158deg, rgba(23,26,31,.96), rgba(13,15,18,.98));
  box-shadow: 0 18px 40px -32px rgba(0,0,0,.9);
}

.page-news .theme-card--peacock{ border-top-color: var(--peacock); }
.page-news .theme-card--cinnabar{ border-top-color: var(--cinnabar); }

.page-news .theme-card__num{
  font-family: var(--mono);
  font-size: 2.35rem;
  line-height: 1;
  color: rgba(200,162,74,.34);
  letter-spacing: .04em;
}

.page-news .theme-card__title{
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.14rem;
  line-height: 1.45;
}

.page-news .theme-card__text{
  margin: 0;
  flex: 1;
  color: var(--ivory-60);
  font-size: .9rem;
  line-height: 1.8;
}

.page-news .theme-card__link{
  align-self: flex-start;
  font-size: .84rem;
  letter-spacing: .04em;
}

/* ---------- 笔记列表 ---------- */
.page-news .notes-block{
  padding: clamp(40px, 6vw, 76px) 0;
  border-bottom: 1px solid var(--news-hair);
}

.page-news .notes__toolbar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-1);
}

.page-news .filter-bar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.page-news .filter-btn{
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .07em;
  padding: 7px 13px;
  color: var(--ivory-60);
  background: transparent;
  border: 1px solid var(--news-hair-strong);
  border-radius: 0;
  cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

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

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

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

.page-news .filter-status{
  margin-left: auto;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--mist);
}

.page-news .note-row{
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: var(--sp-2);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--news-hair);
  transition: background var(--dur) var(--ease);
}

.page-news .note-row:hover{
  background: rgba(200,162,74,.035);
}

.page-news .note-row__num{
  font-family: var(--mono);
  font-size: 1rem;
  letter-spacing: .05em;
  color: var(--gold);
  padding-top: .2em;
}

.page-news .note-row__body{
  min-width: 0;
}

.page-news .note-row__meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.page-news .note-row__time{
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .05em;
  color: var(--mist);
}

.page-news .note-row__title{
  margin: 8px 0 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.04rem, 2.4vw, 1.32rem);
  line-height: 1.5;
}

.page-news .note-row__more{
  margin-top: 10px;
}

.page-news .note-row__more summary{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  font-size: .82rem;
  letter-spacing: .05em;
  color: var(--gold);
  border-bottom: 1px dashed rgba(200,162,74,.45);
  padding-bottom: 2px;
}

.page-news .note-row__more summary::-webkit-details-marker{ display: none; }

.page-news .note-row__more summary::after{
  content: "+";
  font-family: var(--mono);
  font-size: .95rem;
  line-height: 1;
}

.page-news .note-row__more[open] summary::after{ content: "−"; }

.page-news .note-row__more summary:focus-visible{
  outline: 2px solid var(--electric);
  outline-offset: 3px;
}

.page-news .note-row__more p{
  margin: 12px 0 0;
  max-width: 38em;
  color: var(--ivory-60);
  font-size: .92rem;
  line-height: 1.85;
}

.page-news .note-row__copy{
  margin-top: 12px;
  padding: 0 0 2px;
  background: none;
  border: 0;
  border-bottom: 1px dotted rgba(200,162,74,.5);
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .05em;
  color: var(--gold);
  cursor: pointer;
}

.page-news .note-row__copy:hover{ color: var(--gold-bright); }

.page-news .note-row__copy:focus-visible{
  outline: 2px solid var(--electric);
  outline-offset: 3px;
}

.page-news .note-row.is-hidden{ display: none; }

/* ---------- 活动与旧版资源 ---------- */
.page-news .events__grid,
.page-news .archive__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}

.page-news .event-list{
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.page-news .event-item{
  display: grid;
  gap: 8px;
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--news-hair);
}

.page-news .event-item:first-child{
  border-top: 0;
  padding-top: 0;
}

.page-news .event-item__meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.page-news .event-item__time{
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .05em;
  color: var(--mist);
}

.page-news .event-item__title{
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.5;
}

.page-news .event-item__text{
  margin: 0;
  max-width: 36em;
  color: var(--ivory-60);
  font-size: .91rem;
  line-height: 1.85;
}

.page-news .events__media,
.page-news .archive__media{
  margin: 0;
  width: 100%;
  border: 1px solid var(--news-hair-strong);
}

.page-news .events__media img,
.page-news .archive__media img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------- 编辑推荐 ---------- */
.page-news .picks{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(48px, 7vw, 92px) 0;
  background: var(--stone);
}

.page-news .picks__media{
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-news .picks__media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .26;
  filter: saturate(.8);
}

.page-news .picks::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(13,15,18,.92), rgba(13,15,18,.74) 46%, rgba(13,15,18,.96));
}

.page-news .picks__inner{
  position: relative;
  z-index: 2;
}

.page-news .picks__list{
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--news-hair-strong);
}

.page-news .picks__link{
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) 4px;
  border-bottom: 1px solid var(--news-hair);
  color: var(--ivory);
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.page-news .picks__link:hover,
.page-news .picks__link:focus-visible{
  background: rgba(200,162,74,.09);
  color: var(--gold-bright);
  outline: none;
}

.page-news .picks__link:focus-visible{
  outline: 2px solid var(--electric);
  outline-offset: -2px;
}

.page-news .picks__idx{
  font-family: var(--mono);
  font-size: .84rem;
  letter-spacing: .04em;
  color: var(--gold);
}

.page-news .picks__body{
  display: block;
  min-width: 0;
}

.page-news .picks__label{
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.06rem;
  line-height: 1.4;
}

.page-news .picks__desc{
  display: block;
  margin-top: 4px;
  color: var(--ivory-60);
  font-size: .88rem;
  line-height: 1.75;
}

.page-news .picks__arrow{
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--gold);
}

/* ---------- 响应式 ---------- */
@media (min-width: 720px){
  .page-news .theme-band__track{
    grid-auto-columns: min(52%, 380px);
  }

  .page-news .note-row{
    grid-template-columns: 3.6rem minmax(0, 1fr);
    gap: var(--sp-3);
    padding: var(--sp-4) 0;
  }

  .page-news .note-row__num{
    font-size: 1.6rem;
    color: rgba(200,162,74,.6);
  }

  .page-news .events__grid{
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
    gap: var(--sp-4);
    align-items: start;
  }

  .page-news .archive__grid{
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    gap: var(--sp-4);
    align-items: start;
  }

  .page-news .picks__link{
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    padding: var(--sp-3) 8px;
  }
}

@media (min-width: 900px){
  .page-news .news-hero{
    grid-template-columns: 1.04fr .96fr;
    align-items: stretch;
    min-height: 460px;
  }

  .page-news .news-hero__panel{
    padding-left: max(var(--gutter), calc((100vw - var(--shell)) / 2));
    padding-right: clamp(24px, 4vw, 56px);
    padding-top: clamp(40px, 5vw, 72px);
    padding-bottom: clamp(40px, 5vw, 72px);
  }

  .page-news .news-hero__media{
    border-top: 0;
    border-left: 1px solid var(--news-hair-strong);
    clip-path: polygon(6% 0, 100% 0, 100% 100%, 0 100%);
  }

  .page-news .news-hero__media img{
    height: 100%;
    aspect-ratio: auto;
  }

  .page-news .theme-band__track{
    grid-auto-columns: min(31%, 380px);
    padding-left: max(var(--gutter), calc((100vw - var(--shell)) / 2));
    padding-right: max(var(--gutter), calc((100vw - var(--shell)) / 2));
  }
}

@media (prefers-reduced-motion: reduce){
  .page-news .theme-band__track{ scroll-behavior: auto; }
  .page-news .note-row,
  .page-news .filter-btn,
  .page-news .picks__link{ transition: none; }
}

<main id="main-content" class="page-news">
  <section class="news-hero">
    <div class="news-hero__panel">
      <nav class="breadcrumb" aria-label="面包屑">
        <ol class="breadcrumb__list">
          <li class="breadcrumb__item"><a class="breadcrumb__link" href="/">主站入口</a></li>
          <li class="breadcrumb__item"><span class="breadcrumb__current" aria-current="page">内容笔记</span></li>
        </ol>
      </nav>
      <p class="eyebrow">编辑手记 · 持续更新</p>
      <h1>近期版本观察与会馆活动笔记</h1>
      <p class="news-hero__lede">最近一轮版本对照评测给出了什么结论、帮助文档改了哪几处、旧版入口又整理到第几批、会馆里刚办完哪一场主题沙龙，都能在下面读到。尊龙娱乐会馆把这些观察与现场记录写成同一份笔记，您可以先从横向主题带扫一眼方向，再挑感兴趣的条目展开细读。</p>
      <div class="news-hero__meta">
        <span>6 类 72 项内容</span>
        <span>每月约 18 条更新</span>
        <span>2024 年 10 月版本周期</span>
      </div>
    </div>
    <div class="news-hero__media">
      <img src="{zhanqunpic:h:1000w:1600}" width="1600" height="1000" alt="暗色纸张与金属压纹的抽象纹理，暖金侧光斜照" decoding="async">
    </div>
  </section>

  <section class="theme-band" aria-labelledby="theme-band-title">
    <div class="shell theme-band__head">
      <h2 class="notes-block__title" id="theme-band-title">本期关注的三条线索</h2>
      <p class="notes-block__lede">版本、帮助与现场，是最近这段时间变化最集中的三个方向。左右滑动，把三条都看一遍。</p>
    </div>
    <div class="theme-band__track">
      <article class="theme-card" data-reveal>
        <span class="theme-card__num mono">01</span>
        <span class="tag tag--cinnabar">版本观察</span>
        <h3 class="theme-card__title">最新一轮版本对照评测已经出结论</h3>
        <p class="theme-card__text">最新版本对照评测更新至 2024 年 10 月，把设备、功能与操作路径的差异并排放在一起，方便您判断眼下该用哪一版。</p>
        <a class="link-gold theme-card__link" href="/services/">去服务中心看评测</a>
      </article>
      <article class="theme-card theme-card--peacock" data-reveal>
        <span class="theme-card__num mono">02</span>
        <span class="tag tag--peacock">帮助文档</span>
        <h3 class="theme-card__title">换设备登录注意事项排在第 3 项</h3>
        <p class="theme-card__text">换机、临时借用设备、多端来回切换，三种情形对应三套检查动作。想少走回头路，直接从这一条看起。</p>
        <a class="link-gold theme-card__link" href="/tutorial/">看一步步的操作说明</a>
      </article>
      <article class="theme-card theme-card--cinnabar" data-reveal>
        <span class="theme-card__num mono">03</span>
        <span class="tag tag--cinnabar">会馆现场</span>
        <h3 class="theme-card__title">从 20 人到 120 人，本季都有合适的空间</h3>
        <p class="theme-card__text">8 个功能空间承接不同规模的主题沙龙、茶叙品鉴与文化交流活动，本季的现场记录陆续补进下面的活动手记。</p>
        <a class="link-gold theme-card__link" href="/culture/">了解会馆空间</a>
      </article>
    </div>
  </section>

  <section class="notes-block" id="notes">
    <div class="shell">
      <div class="notes-block__head">
        <h2 class="notes-block__title">版本与帮助文档观察</h2>
        <p class="notes-block__lede">版本号变了、文档改了一句话、入口换了个位置，都会影响下一次操作。下面几则把最近的变化写清楚，可以按栏目筛一筛再看。</p>
      </div>

      <div class="notes__toolbar">
        <div class="filter-bar" data-filter-group>
          <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>
          <p class="filter-status" data-filter-status aria-live="polite">共 6 则笔记</p>
        </div>
      </div>

      <article class="note-row" data-filter-item data-tags="版本" data-reveal>
        <span class="note-row__num mono">01</span>
        <div class="note-row__body">
          <div class="note-row__meta">
            <span class="tag tag--cinnabar">版本观察</span>
            <span class="note-row__time">2024 年 10 月版本周期</span>
          </div>
          <h3 class="note-row__title" id="note-01">新旧版本同时在用，先确认自己在看哪一版</h3>
          <details class="note-row__more">
            <summary>展开摘要</summary>
            <p>版本号通常出现在入口页脚和说明页顶部两处，两处对得上再往下操作。评测把界面差异分成三档，翻到与自己在用设备对应的那一档，比从头顺着读省时间得多。</p>
          </details>
          <button type="button" class="copy-btn note-row__copy" data-copy="内容笔记 No.01 · 新旧版本同时在用，先确认自己在看哪一版 · /notes/#note-01">复制条目引用</button>
        </div>
      </article>

      <article class="note-row" data-filter-item data-tags="帮助" data-reveal>
        <span class="note-row__num mono">02</span>
        <div class="note-row__body">
          <div class="note-row__meta">
            <span class="tag tag--peacock">帮助文档</span>
            <span class="note-row__time">上月批次</span>
          </div>
          <h3 class="note-row__title" id="note-02">换设备之后，先做这四项检查</h3>
          <details class="note-row__more">
            <summary>展开摘要</summary>
            <p>帮助文档第 3 项把换设备登录的注意事项拆成了四项：设备是否可信任、网络环境是否稳定、旧设备是否需要先退出、常用入口是否需要重新收藏。四项都过了再进入正式操作，中途卡住的次数会明显减少。</p>
          </details>
          <button type="button" class="copy-btn note-row__copy" data-copy="内容笔记 No.02 · 换设备之后，先做这四项检查 · /notes/#note-02">复制条目引用</button>
        </div>
      </article>

      <article class="note-row" data-filter-item data-tags="检索" data-reveal>
        <span class="note-row__num mono">03</span>
        <div class="note-row__body">
          <div class="note-row__meta">
            <span class="tag">检索技巧</span>
            <span class="note-row__time">近期</span>
          </div>
          <h3 class="note-row__title" id="note-03">按编号找条目，往往比按关键词更快</h3>
          <details class="note-row__more">
            <summary>展开摘要</summary>
            <p>检索支持按分类、编号、关键词三种方式定位，结果会保留所属分类与编号。记得住“第 3 项”“第 6 类”这类位置的，直接输编号；只记得内容大概的，用关键词更省事。</p>
          </details>
          <button type="button" class="copy-btn note-row__copy" data-copy="内容笔记 No.03 · 按编号找条目，往往比按关键词更快 · /notes/#note-03">复制条目引用</button>
        </div>
      </article>

      <article class="note-row" data-filter-item data-tags="帮助" data-reveal>
        <span class="note-row__num mono">04</span>
        <div class="note-row__body">
          <div class="note-row__meta">
            <span class="tag tag--peacock">帮助文档</span>
            <span class="note-row__time">近期</span>
          </div>
          <h3 class="note-row__title" id="note-04">反馈入口能接住哪些问题</h3>
          <details class="note-row__more">
            <summary>展开摘要</summary>
            <p>内容咨询、到访预约、合作洽谈、使用问题，都可以从内容中心固定分类里的问题反馈入口提交。写清楚涉及的栏目和编号，回复会更准确；客服邮箱在工作日 9:00–18:00 内回复。</p>
          </details>
          <button type="button" class="copy-btn note-row__copy" data-copy="内容笔记 No.04 · 反馈入口能接住哪些问题 · /notes/#note-04">复制条目引用</button>
        </div>
      </article>

      <article class="note-row" data-filter-item data-tags="版本" data-reveal>
        <span class="note-row__num mono">05</span>
        <div class="note-row__body">
          <div class="note-row__meta">
            <span class="tag tag--cinnabar">版本观察</span>
            <span class="note-row__time">本季</span>
          </div>
          <h3 class="note-row__title" id="note-05">对照评测怎么看才不费时间</h3>
          <details class="note-row__more">
            <summary>展开摘要</summary>
            <p>先看与自己在用设备对应的那一段，再回头扫整体差异。对照评测每季度整理一次摘要，最近一期标注为 2024 年 10 月，不必从头读到尾。</p>
          </details>
          <button type="button" class="copy-btn note-row__copy" data-copy="内容笔记 No.05 · 对照评测怎么看才不费时间 · /notes/#note-05">复制条目引用</button>
        </div>
      </article>

      <article class="note-row" data-filter-item data-tags="帮助" data-reveal>
        <span class="note-row__num mono">06</span>
        <div class="note-row__body">
          <div class="note-row__meta">
            <span class="tag tag--peacock">帮助文档</span>
            <span class="note-row__time">本季</span>
          </div>
          <h3 class="note-row__title" id="note-06">多设备切换最容易漏掉的两个动作</h3>
          <details class="note-row__more">
            <summary>展开摘要</summary>
            <p>一是离开旧设备前先退出登录状态，二是确认常用入口的收藏路径没有在更新中变动。两件小事都做过，下一次换设备基本不会卡在验证环节。</p>
          </details>
          <button type="button" class="copy-btn note-row__copy" data-copy="内容笔记 No.06 · 多设备切换最容易漏掉的两个动作 · /notes/#note-06">复制条目引用</button>
        </div>
      </article>
    </div>
  </section>

  <section class="notes-block" id="events">
    <div class="shell">
      <div class="notes-block__head">
        <h2 class="notes-block__title">会馆现场与活动手记</h2>
        <p class="notes-block__lede">自 2016 年在昆明运营以来，会馆每年举办约 60 场主题沙龙、品鉴与文化交流活动，8 个功能空间可承接 20 至 120 人的中小型活动。下面是最近几场的现场记录。</p>
      </div>
      <div class="events__grid">
        <figure class="media-frame media-frame--tall events__media" data-reveal>
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="会馆茶叙空间的局部陈设，灯光与花艺细节" loading="lazy" decoding="async">
          <figcaption class="media-frame__caption">会馆茶叙空间 · 开场前的陈设调整</figcaption>
        </figure>
        <ol class="event-list">
          <li class="event-item" data-reveal>
            <div class="event-item__meta"><span class="tag tag--peacock">主题沙龙</span><span class="event-item__time">本季</span></div>
            <h3 class="event-item__title">一场以云南茶山为主题的品鉴沙龙</h3>
            <p class="event-item__text">五款茶样按海拔从低到高排开，参与者从香气、汤色一直记到回甘。用的是中庭一侧的茶叙空间，二十多人坐满，节奏刚好不赶。</p>
          </li>
          <li class="event-item" data-reveal>
            <div class="event-item__meta"><span class="tag tag--cinnabar">会务接待</span><span class="event-item__time">上月批次</span></div>
            <h3 class="event-item__title">面向企业行政负责人的会务开放日</h3>
            <p class="event-item__text">从签到动线、设备调试到茶歇衔接，把一场六十人规模活动的准备流程完整走了一遍。接待与活动执行团队现场回答了档期、布置时间与餐饮安排的问题。</p>
          </li>
          <li class="event-item" data-reveal>
            <div class="event-item__meta"><span class="tag">文化交流</span><span class="event-item__time">本季</span></div>
            <h3 class="event-item__title">一场跨城来访的半天行程</h3>
            <p class="event-item__text">西南地区的来访客户把行程压到半天，会馆把参观、茶叙与座谈安排在两个相邻空间，中间不用转场，下午就能返程。</p>
          </li>
          <li class="event-item" data-reveal>
            <div class="event-item__meta"><span class="tag">现场调整</span><span class="event-item__time">近期</span></div>
            <h3 class="event-item__title">夜间场地的灯光与座椅重新排过一次</h3>
            <p class="event-item__text">主灯调低、座位间距放宽，夜里活动的氛围更稳，发言与交谈也不互相打扰。这套排布后来沿用到了当季的几场晚间沙龙。</p>
          </li>
        </ol>
      </div>
    </div>
  </section>

  <section class="notes-block" id="archive">
    <div class="shell">
      <div class="notes-block__head">
        <h2 class="notes-block__title">旧版入口整理札记</h2>
        <p class="notes-block__lede">旧版资源下载导航累计整理了 36 个常用历史入口，按版本阶段与适用设备分组，找旧版本不用再从名字猜起。下面是最近几批整理的内容。</p>
      </div>
      <div class="archive__grid">
        <ol class="event-list">
          <li class="event-item" data-reveal>
            <div class="event-item__meta"><span class="tag tag--peacock">分组合并</span><span class="event-item__time">上月批次</span></div>
            <h3 class="event-item__title">把同一版本阶段的入口收拢到一页</h3>
            <p class="event-item__text">过去同一阶段的入口分散在三处，找之前要先想清楚它归哪一类。收拢之后，按阶段名称检索一次就能命中，翻找的时间省下不少。</p>
          </li>
          <li class="event-item" data-reveal>
            <div class="event-item__meta"><span class="tag tag--cinnabar">设备标记</span><span class="event-item__time">本季</span></div>
            <h3 class="event-item__title">小屏设备补上适用标记</h3>
            <p class="event-item__text">平板和手机的差别主要在按钮位置与滚动长度。入口详情里标出适用设备之后，选错版本、回头重来的情况少了很多。</p>
          </li>
          <li class="event-item" data-reveal>
            <div class="event-item__meta"><span class="tag">命名统一</span><span class="event-item__time">近期</span></div>
            <h3 class="event-item__title">历史入口的命名统一了一遍</h3>
            <p class="event-item__text">旧入口的名字里常带着改版前的叫法，按分类找和按关键词搜会得到两套结果。命名统一之后，两条路径终于指向同一处。</p>
          </li>
        </ol>
        <figure class="media-frame archive__media" data-reveal>
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="编号档案盒与索引卡的抽象特写，孔雀青与鎏金点缀" loading="lazy" decoding="async">
          <figcaption class="media-frame__caption">历史入口按版本阶段归档整理</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="picks" id="picks">
    <div class="picks__media">
      <img src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="茶山与梯田的抽象剪影，低饱和暖金渐变" loading="lazy" decoding="async">
    </div>
    <div class="shell picks__inner">
      <div class="notes-block__head">
        <h2 class="notes-block__title">读完接着去哪儿</h2>
        <p class="notes-block__lede">笔记只是入口。要查版本资料、跟一遍操作步骤，或者直接约一次到访，从下面几处继续。</p>
      </div>
      <ul class="picks__list">
        <li>
          <a class="picks__link" href="/services/">
            <span class="picks__idx mono">01</span>
            <span class="picks__body">
              <span class="picks__label">服务中心</span>
              <span class="picks__desc">按版本阶段查对照评测与旧版资源入口，也能看到会务接待与主题活动的承接范围。</span>
            </span>
            <span class="picks__arrow" aria-hidden="true">→</span>
          </a>
        </li>
        <li>
          <a class="picks__link" href="/tutorial/">
            <span class="picks__idx mono">02</span>
            <span class="picks__body">
              <span class="picks__label">使用教程</span>
              <span class="picks__desc">换设备、找入口、提交反馈，每一步该点什么，照着做就行。</span>
            </span>
            <span class="picks__arrow" aria-hidden="true">→</span>
          </a>
        </li>
        <li>
          <a class="picks__link" href="/culture/">
            <span class="picks__idx mono">03</span>
            <span class="picks__body">
              <span class="picks__label">会馆文化</span>
              <span class="picks__desc">八个功能空间、团队构成与服务标准，到访之前先有个底。</span>
            </span>
            <span class="picks__arrow" aria-hidden="true">→</span>
          </a>
        </li>
        <li>
          <a class="picks__link" href="/connect/">
            <span class="picks__idx mono">04</span>
            <span class="picks__body">
              <span class="picks__label">联系通道</span>
              <span class="picks__desc">客服邮箱、联系电话与昆明联系地址，咨询和到访预约从这里开始。</span>
            </span>
            <span class="picks__arrow" aria-hidden="true">→</span>
          </a>
        </li>
      </ul>
    </div>
  </section>
</main>

.page-news{
  --news-hair: rgba(200,162,74,.18);
  --news-hair-strong: rgba(200,162,74,.34);
  background: var(--ink);
  color: var(--ivory);
}

/* ---------- 首屏 ---------- */
.page-news .news-hero{
  display: grid;
  grid-template-columns: 1fr;
  background:
    radial-gradient(140% 120% at 92% -10%, rgba(200,162,74,.18), rgba(13,15,18,0) 58%),
    linear-gradient(180deg, rgba(94,78,44,.20), rgba(13,15,18,0) 42%),
    var(--ink);
  border-bottom: 1px solid var(--news-hair);
}

.page-news .news-hero__panel{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-2);
  padding: clamp(24px, 6vw, 48px) var(--gutter) clamp(30px, 6vw, 56px);
}

.page-news .news-hero__panel::before{
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), rgba(200,162,74,0));
}

.page-news .news-hero .breadcrumb{
  margin-bottom: var(--sp-1);
}

.page-news .news-hero .eyebrow{
  color: var(--gold-bright);
  margin: 0;
}

.page-news .news-hero h1{
  margin: 0;
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(1.85rem, 5.4vw, 3.4rem);
  line-height: 1.16;
  letter-spacing: -.01em;
  max-width: 14em;
}

.page-news .news-hero__lede{
  margin: 0;
  max-width: 34em;
  color: var(--ivory-80);
  font-size: clamp(.95rem, 1.7vw, 1.05rem);
  line-height: 1.88;
}

.page-news .news-hero__meta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--sp-1);
}

.page-news .news-hero__meta span{
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
  padding: 6px 11px;
  color: var(--gold-bright);
  border: 1px solid var(--news-hair-strong);
  background: rgba(200,162,74,.06);
}

.page-news .news-hero__media{
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--news-hair);
  background: linear-gradient(135deg, rgba(23,26,31,.9), rgba(13,15,18,.9));
}

.page-news .news-hero__media img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: saturate(.86) contrast(1.06);
}

.page-news .news-hero__media::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(205deg, rgba(13,15,18,0) 38%, rgba(13,15,18,.72));
}

/* ---------- 通用区块标题 ---------- */
.page-news .notes-block__head{
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 46em;
  margin-bottom: var(--sp-4);
}

.page-news .notes-block__title{
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.35rem, 3.2vw, 2rem);
  line-height: 1.32;
  letter-spacing: -.005em;
}

.page-news .notes-block__lede{
  margin: 0;
  max-width: 40em;
  color: var(--ivory-60);
  font-size: .95rem;
  line-height: 1.85;
}

/* ---------- 横向主题带 ---------- */
.page-news .theme-band{
  padding: clamp(36px, 6vw, 68px) 0 clamp(24px, 4vw, 40px);
  border-bottom: 1px solid var(--news-hair);
  background: linear-gradient(180deg, rgba(23,26,31,.55), rgba(13,15,18,0) 70%);
  overflow: hidden;
}

.page-news .theme-band__head{
  margin-bottom: var(--sp-3);
}

.page-news .theme-band__head .notes-block__lede{
  max-width: 34em;
}

.page-news .theme-band__track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(84%, 400px);
  gap: var(--sp-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-2) var(--gutter) var(--sp-3);
  scrollbar-width: thin;
  scrollbar-color: var(--gold) rgba(200,162,74,.12);
}

.page-news .theme-card{
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 250px;
  padding: var(--sp-3);
  border: 1px solid var(--news-hair);
  border-top: 2px solid var(--gold);
  background: linear-gradient(158deg, rgba(23,26,31,.96), rgba(13,15,18,.98));
  box-shadow: 0 18px 40px -32px rgba(0,0,0,.9);
}

.page-news .theme-card--peacock{ border-top-color: var(--peacock); }
.page-news .theme-card--cinnabar{ border-top-color: var(--cinnabar); }

.page-news .theme-card__num{
  font-family: var(--mono);
  font-size: 2.35rem;
  line-height: 1;
  color: rgba(200,162,74,.34);
  letter-spacing: .04em;
}

.page-news .theme-card__title{
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.14rem;
  line-height: 1.45;
}

.page-news .theme-card__text{
  margin: 0;
  flex: 1;
  color: var(--ivory-60);
  font-size: .9rem;
  line-height: 1.8;
}

.page-news .theme-card__link{
  align-self: flex-start;
  font-size: .84rem;
  letter-spacing: .04em;
}

/* ---------- 笔记列表 ---------- */
.page-news .notes-block{
  padding: clamp(40px, 6vw, 76px) 0;
  border-bottom: 1px solid var(--news-hair);
}

.page-news .notes__toolbar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-1);
}

.page-news .filter-bar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.page-news .filter-btn{
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .07em;
  padding: 7px 13px;
  color: var(--ivory-60);
  background: transparent;
  border: 1px solid var(--news-hair-strong);
  border-radius: 0;
  cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

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

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

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

.page-news .filter-status{
  margin-left: auto;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--mist);
}

.page-news .note-row{
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: var(--sp-2);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--news-hair);
  transition: background var(--dur) var(--ease);
}

.page-news .note-row:hover{
  background: rgba(200,162,74,.035);
}

.page-news .note-row__num{
  font-family: var(--mono);
  font-size: 1rem;
  letter-spacing: .05em;
  color: var(--gold);
  padding-top: .2em;
}

.page-news .note-row__body{
  min-width: 0;
}

.page-news .note-row__meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.page-news .note-row__time{
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .05em;
  color: var(--mist);
}

.page-news .note-row__title{
  margin: 8px 0 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.04rem, 2.4vw, 1.32rem);
  line-height: 1.5;
}

.page-news .note-row__more{
  margin-top: 10px;
}

.page-news .note-row__more summary{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  font-size: .82rem;
  letter-spacing: .05em;
  color: var(--gold);
  border-bottom: 1px dashed rgba(200,162,74,.45);
  padding-bottom: 2px;
}

.page-news .note-row__more summary::-webkit-details-marker{ display: none; }

.page-news .note-row__more summary::after{
  content: "+";
  font-family: var(--mono);
  font-size: .95rem;
  line-height: 1;
}

.page-news .note-row__more[open] summary::after{ content: "−"; }

.page-news .note-row__more summary:focus-visible{
  outline: 2px solid var(--electric);
  outline-offset: 3px;
}

.page-news .note-row__more p{
  margin: 12px 0 0;
  max-width: 38em;
  color: var(--ivory-60);
  font-size: .92rem;
  line-height: 1.85;
}

.page-news .note-row__copy{
  margin-top: 12px;
  padding: 0 0 2px;
  background: none;
  border: 0;
  border-bottom: 1px dotted rgba(200,162,74,.5);
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .05em;
  color: var(--gold);
  cursor: pointer;
}

.page-news .note-row__copy:hover{ color: var(--gold-bright); }

.page-news .note-row__copy:focus-visible{
  outline: 2px solid var(--electric);
  outline-offset: 3px;
}

.page-news .note-row.is-hidden{ display: none; }

/* ---------- 活动与旧版资源 ---------- */
.page-news .events__grid,
.page-news .archive__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}

.page-news .event-list{
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.page-news .event-item{
  display: grid;
  gap: 8px;
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--news-hair);
}

.page-news .event-item:first-child{
  border-top: 0;
  padding-top: 0;
}

.page-news .event-item__meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.page-news .event-item__time{
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .05em;
  color: var(--mist);
}

.page-news .event-item__title{
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.5;
}

.page-news .event-item__text{
  margin: 0;
  max-width: 36em;
  color: var(--ivory-60);
  font-size: .91rem;
  line-height: 1.85;
}

.page-news .events__media,
.page-news .archive__media{
  margin: 0;
  width: 100%;
  border: 1px solid var(--news-hair-strong);
}

.page-news .events__media img,
.page-news .archive__media img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------- 编辑推荐 ---------- */
.page-news .picks{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(48px, 7vw, 92px) 0;
  background: var(--stone);
}

.page-news .picks__media{
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-news .picks__media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .26;
  filter: saturate(.8);
}

.page-news .picks::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(13,15,18,.92), rgba(13,15,18,.74) 46%, rgba(13,15,18,.96));
}

.page-news .picks__inner{
  position: relative;
  z-index: 2;
}

.page-news .picks__list{
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--news-hair-strong);
}

.page-news .picks__link{
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) 4px;
  border-bottom: 1px solid var(--news-hair);
  color: var(--ivory);
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.page-news .picks__link:hover,
.page-news .picks__link:focus-visible{
  background: rgba(200,162,74,.09);
  color: var(--gold-bright);
  outline: none;
}

.page-news .picks__link:focus-visible{
  outline: 2px solid var(--electric);
  outline-offset: -2px;
}

.page-news .picks__idx{
  font-family: var(--mono);
  font-size: .84rem;
  letter-spacing: .04em;
  color: var(--gold);
}

.page-news .picks__body{
  display: block;
  min-width: 0;
}

.page-news .picks__label{
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.06rem;
  line-height: 1.4;
}

.page-news .picks__desc{
  display: block;
  margin-top: 4px;
  color: var(--ivory-60);
  font-size: .88rem;
  line-height: 1.75;
}

.page-news .picks__arrow{
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--gold);
}

/* ---------- 响应式 ---------- */
@media (min-width: 720px){
  .page-news .theme-band__track{
    grid-auto-columns: min(52%, 380px);
  }

  .page-news .note-row{
    grid-template-columns: 3.6rem minmax(0, 1fr);
    gap: var(--sp-3);
    padding: var(--sp-4) 0;
  }

  .page-news .note-row__num{
    font-size: 1.6rem;
    color: rgba(200,162,74,.6);
  }

  .page-news .events__grid{
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
    gap: var(--sp-4);
    align-items: start;
  }

  .page-news .archive__grid{
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    gap: var(--sp-4);
    align-items: start;
  }

  .page-news .picks__link{
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    padding: var(--sp-3) 8px;
  }
}

@media (min-width: 900px){
  .page-news .news-hero{
    grid-template-columns: 1.04fr .96fr;
    align-items: stretch;
    min-height: 460px;
  }

  .page-news .news-hero__panel{
    padding-left: max(var(--gutter), calc((100vw - var(--shell)) / 2));
    padding-right: clamp(24px, 4vw, 56px);
    padding-top: clamp(40px, 5vw, 72px);
    padding-bottom: clamp(40px, 5vw, 72px);
  }

  .page-news .news-hero__media{
    border-top: 0;
    border-left: 1px solid var(--news-hair-strong);
    clip-path: polygon(6% 0, 100% 0, 100% 100%, 0 100%);
  }

  .page-news .news-hero__media img{
    height: 100%;
    aspect-ratio: auto;
  }

  .page-news .theme-band__track{
    grid-auto-columns: min(31%, 380px);
    padding-left: max(var(--gutter), calc((100vw - var(--shell)) / 2));
    padding-right: max(var(--gutter), calc((100vw - var(--shell)) / 2));
  }
}

@media (prefers-reduced-motion: reduce){
  .page-news .theme-band__track{ scroll-behavior: auto; }
  .page-news .note-row,
  .page-news .filter-btn,
  .page-news .picks__link{ transition: none; }
}