.page-about{
  --about-line:rgba(53,242,208,.18);
  --about-line-soft:rgba(214,228,221,.1);
}

.page-about .breadcrumb{margin-top:clamp(16px,3vw,28px);}

/* ---------- hero ---------- */
.page-about .about-hero{padding-top:clamp(14px,2.6vw,26px);}
.page-about .about-hero__inner{display:grid;gap:clamp(26px,4.5vw,54px);}
.page-about .about-hero__text>*{margin:0;}
.page-about .about-hero__text>*+*{margin-top:clamp(14px,2vw,20px);}
.page-about .about-hero h1{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(32px,6.4vw,58px);
  line-height:1.03;
  letter-spacing:-.02em;
  color:var(--text);
}
.page-about .about-hero__lead{
  font-size:clamp(15.5px,2.1vw,18px);
  line-height:1.88;
  color:var(--text);
  max-width:60ch;
}
.page-about .about-hero__note{
  padding-left:14px;
  border-left:2px solid var(--orange);
  font-size:14.5px;
  line-height:1.8;
  color:var(--muted);
  max-width:56ch;
}

.page-about .about-index{
  list-style:none;
  margin:clamp(22px,3.5vw,32px) 0 0;
  padding:0;
  display:grid;
  gap:8px;
}
.page-about .about-index__link{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding:10px 12px;
  font-size:14px;
  color:var(--text);
  text-decoration:none;
  border-left:2px solid rgba(53,242,208,.35);
  background:linear-gradient(90deg,rgba(53,242,208,.07),rgba(53,242,208,0));
  transition:border-color var(--t) var(--ease),background var(--t) var(--ease),color var(--t) var(--ease);
}
.page-about .about-index__link:hover,
.page-about .about-index__link:focus-visible{
  border-left-color:var(--orange);
  background:linear-gradient(90deg,rgba(255,154,60,.16),rgba(255,154,60,0));
  color:#fff;
  outline:none;
}
.page-about .about-index__link:focus-visible{box-shadow:inset 0 0 0 1px var(--cyan);}
.page-about .about-index__no{color:var(--cyan);font-size:13px;letter-spacing:.04em;}

.page-about .about-hero__figure{
  position:relative;
  margin:0;
  border:1px solid var(--about-line);
}
.page-about .about-hero__figure img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:5/6;
  object-fit:cover;
  filter:saturate(.82);
}
.page-about .about-hero__figure::after{
  content:"";
  position:absolute;
  inset:auto 0 0 auto;
  width:38%;
  height:2px;
  background:linear-gradient(90deg,rgba(255,154,60,0),var(--orange));
}

@media (min-width:560px){
  .page-about .about-index{grid-template-columns:1fr 1fr;}
}
@media (min-width:880px){
  .page-about .about-hero__inner{
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
    align-items:start;
  }
  .page-about .about-hero__figure{margin-top:6px;}
}

/* ---------- 小节标题 ---------- */
.page-about .about-head{max-width:760px;}
.page-about .about-head h2{
  margin:10px 0 0;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(25px,4.2vw,40px);
  line-height:1.1;
  letter-spacing:-.015em;
  color:var(--text);
}
.page-about .about-head__sub{
  margin:14px 0 0;
  font-size:15.5px;
  line-height:1.85;
  color:var(--muted);
  max-width:64ch;
}

/* ---------- 方法步骤 ---------- */
.page-about .about-steps{
  list-style:none;
  margin:clamp(26px,4vw,44px) 0 0;
  padding:0;
  display:grid;
  gap:clamp(14px,2.2vw,20px);
}
.page-about .about-steps__item{
  position:relative;
  padding:clamp(20px,3vw,28px);
  border:1px solid var(--about-line);
  transition:transform var(--t-slow) var(--ease),border-color var(--t) var(--ease),background var(--t) var(--ease);
}
.page-about .about-steps__item:hover{
  transform:translateY(-4px);
  border-color:var(--line-strong);
  background:var(--ink-700);
}
.page-about .about-steps__item:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
}
.page-about .about-steps__no{
  display:block;
  font-size:13px;
  letter-spacing:.14em;
  color:var(--cyan);
  margin-bottom:12px;
}
.page-about .about-steps__item h3{
  margin:0;
  font-family:var(--font-display);
  font-weight:800;
  font-size:19px;
  line-height:1.35;
  letter-spacing:-.01em;
  color:var(--text);
}
.page-about .about-steps__item p{
  margin:10px 0 0;
  font-size:14.5px;
  line-height:1.8;
  color:var(--muted);
}
.page-about .about-steps__link{margin:14px 0 0;}
.page-about .about-steps__item a{
  display:inline-block;
  font-size:13.5px;
  color:var(--orange);
  text-decoration:none;
  border-bottom:1px solid rgba(255,154,60,.4);
  padding-bottom:2px;
  transition:color var(--t) var(--ease),border-color var(--t) var(--ease);
}
.page-about .about-steps__item a:hover,
.page-about .about-steps__item a:focus-visible{
  color:var(--cyan);
  border-color:var(--cyan);
  outline:none;
}

@media (min-width:680px){
  .page-about .about-steps{grid-template-columns:1fr 1fr;}
}
@media (min-width:1040px){
  .page-about .about-steps__item:nth-child(even){margin-top:36px;}
  .page-about .about-steps{padding-bottom:36px;}
}

/* ---------- 栏目与归档 ---------- */
.page-about .about-system__inner{display:grid;gap:clamp(26px,4vw,48px);}
.page-about .about-system__lede>*{margin:0;}
.page-about .about-system__lede>*+*{margin-top:14px;}
.page-about .about-system__lede h2{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(25px,4.2vw,38px);
  line-height:1.12;
  letter-spacing:-.015em;
  color:var(--text);
}
.page-about .about-system__lede p{
  font-size:15.5px;
  line-height:1.88;
  color:var(--muted);
  max-width:60ch;
}
.page-about .about-stats{
  margin:0;
  border-top:1px solid var(--about-line);
}
.page-about .about-stats__row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding:16px 2px;
  border-bottom:1px solid var(--about-line-soft);
  transition:background var(--t) var(--ease),padding-left var(--t) var(--ease);
}
.page-about .about-stats__row:hover{
  background:rgba(53,242,208,.06);
  padding-left:12px;
}
.page-about .about-stats__row dt{
  font-size:13.5px;
  letter-spacing:.1em;
  color:var(--muted);
}
.page-about .about-stats__row dd{
  margin:0;
  display:flex;
  align-items:baseline;
  gap:5px;
}
.page-about .about-stats__val{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(24px,3.4vw,32px);
  line-height:1;
  color:var(--cyan);
  letter-spacing:-.01em;
}
.page-about .about-stats__unit{
  font-size:13px;
  color:var(--muted);
  letter-spacing:.08em;
}

@media (min-width:880px){
  .page-about .about-system__inner{
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    align-items:start;
  }
  .page-about .about-stats{margin-top:8px;}
}

/* ---------- 团队 ---------- */
.page-about .about-team__box{
  display:grid;
  gap:clamp(24px,4vw,44px);
  padding:clamp(22px,4vw,44px);
  border:1px solid rgba(53,242,208,.16);
}
.page-about .about-team__text>*{margin:0;}
.page-about .about-team__text>*+*{margin-top:14px;}
.page-about .about-team__text h2{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(24px,4vw,36px);
  line-height:1.14;
  letter-spacing:-.015em;
  color:var(--text);
}
.page-about .about-team__text p{
  font-size:15.5px;
  line-height:1.88;
  color:var(--text);
  opacity:.92;
  max-width:58ch;
}
.page-about .about-team__list{
  list-style:none;
  margin:18px 0 0;
  padding:0;
  display:grid;
  gap:10px;
}
.page-about .about-team__list li{
  position:relative;
  padding-left:20px;
  font-size:14px;
  line-height:1.75;
  color:var(--muted);
}
.page-about .about-team__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:9px;
  height:2px;
  background:var(--orange);
}
.page-about .about-team__figure{margin:0;border:1px solid rgba(53,242,208,.14);}
.page-about .about-team__figure img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:12/7;
  object-fit:cover;
  filter:saturate(.78);
  transition:transform var(--t-slow) var(--ease);
}
.page-about .about-team__figure:hover img{transform:scale(1.02);}

@media (min-width:880px){
  .page-about .about-team__box{
    grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
    align-items:center;
  }
}

/* ---------- 时间线 ---------- */
.page-about .about-timeline__inner{display:grid;gap:clamp(28px,4vw,50px);}
.page-about .about-timeline__aside>*{margin:0;}
.page-about .about-timeline__aside>*+*{margin-top:14px;}
.page-about .about-timeline__aside h2{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(25px,4.2vw,38px);
  line-height:1.12;
  letter-spacing:-.015em;
  color:var(--text);
}
.page-about .about-timeline__sub{
  font-size:15px;
  line-height:1.88;
  color:var(--muted);
  max-width:44ch;
}
.page-about .about-timeline__figure{margin:20px 0 0;border:1px solid var(--about-line);}
.page-about .about-timeline__figure img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  object-fit:cover;
  filter:saturate(.7);
}

.page-about .about-tl{
  list-style:none;
  margin:0;
  padding:0 0 0 24px;
  position:relative;
}
.page-about .about-tl::before{
  content:"";
  position:absolute;
  left:6px;
  top:8px;
  bottom:10px;
  width:2px;
  background:linear-gradient(180deg,var(--cyan),rgba(53,242,208,.06));
}
.page-about .about-tl__node{
  position:relative;
  padding:0 0 clamp(20px,3vw,30px);
  outline:none;
}
.page-about .about-tl__node::before{
  content:"";
  position:absolute;
  left:-24px;
  top:5px;
  width:11px;
  height:11px;
  transform:rotate(45deg);
  background:var(--ink-900);
  border:2px solid var(--cyan);
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease),transform var(--t) var(--ease);
}
.page-about .about-tl__node:hover::before,
.page-about .about-tl__node:focus-within::before{
  background:var(--orange);
  border-color:var(--orange);
  transform:rotate(45deg) scale(1.15);
}
.page-about .about-tl__node:focus-visible{
  box-shadow:0 0 0 2px var(--cyan);
  border-radius:2px;
}
.page-about .about-tl__head{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
}
.page-about .about-tl__tag{
  font-size:12.5px;
  letter-spacing:.12em;
  color:var(--orange);
  border:1px solid rgba(255,154,60,.4);
  padding:2px 8px;
}
.page-about .about-tl__head h3{
  margin:0;
  font-family:var(--font-display);
  font-weight:800;
  font-size:18px;
  line-height:1.35;
  color:var(--text);
}
.page-about .about-tl__hint{
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:15px;
  color:var(--muted);
  transition:color var(--t) var(--ease),transform var(--t) var(--ease);
}
.page-about .about-tl__node:hover .about-tl__hint,
.page-about .about-tl__node:focus-within .about-tl__hint{
  color:var(--cyan);
  transform:rotate(45deg);
}
.page-about .about-tl__desc{
  margin:8px 0 0;
  font-size:14.5px;
  line-height:1.82;
  color:var(--text);
  opacity:.9;
  max-width:56ch;
}
.page-about .about-tl__more{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows var(--t-slow) var(--ease);
}
.page-about .about-tl__more>span{
  overflow:hidden;
  display:block;
  font-size:13.5px;
  line-height:1.8;
  color:var(--muted);
  max-width:56ch;
}
.page-about .about-tl__more>span::before{
  content:"";
  display:block;
  height:8px;
}
.page-about .about-tl__node:hover .about-tl__more,
.page-about .about-tl__node:focus-within .about-tl__more{
  grid-template-rows:1fr;
}

@media (min-width:900px){
  .page-about .about-timeline__inner{
    grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
    align-items:start;
  }
  .page-about .about-timeline__aside{position:sticky;top:calc(var(--bar-h) + 24px);}
}

/* ---------- 更新节奏 ---------- */
.page-about .about-cadence__grid{margin-top:clamp(24px,4vw,40px);}
.page-about .about-cadence__card{
  padding:clamp(20px,3vw,28px);
  border-left:3px solid var(--cyan);
  transition:transform var(--t-slow) var(--ease),border-color var(--t) var(--ease);
}
.page-about .about-cadence__card:hover{
  transform:translateY(-3px);
  border-left-color:var(--orange);
}
.page-about .about-cadence__card h3{
  margin:0;
  font-family:var(--font-display);
  font-weight:800;
  font-size:18px;
  line-height:1.4;
  color:var(--text);
}
.page-about .about-cadence__card p{
  margin:10px 0 0;
  font-size:14.5px;
  line-height:1.82;
  color:var(--muted);
}

.page-about .about-cadence__next{
  margin:clamp(24px,4vw,36px) 0 0;
  font-size:14px;
  line-height:2.1;
  color:var(--muted);
  border-top:1px solid var(--about-line);
  padding-top:18px;
}
.page-about .about-cadence__next a{
  color:var(--text);
  text-decoration:none;
  border-bottom:1px solid rgba(53,242,208,.4);
  padding-bottom:2px;
  margin-left:10px;
  transition:color var(--t) var(--ease),border-color var(--t) var(--ease);
}
.page-about .about-cadence__next a:first-of-type{margin-left:8px;}
.page-about .about-cadence__next a:hover,
.page-about .about-cadence__next a:focus-visible{
  color:var(--cyan);
  border-color:var(--cyan);
  outline:none;
}

@media (min-width:880px){
  .page-about .about-cadence__card:first-child{grid-column:1 / -1;}
  .page-about .about-cadence__card:first-child p{max-width:78ch;}
}

@media (min-width:1024px){
  .page-about .about-cadence__next a{margin-left:16px;}
}

@media (prefers-reduced-motion:reduce){
  .page-about *{transition:none!important;animation:none!important;}
  .page-about .about-team__figure:hover img{transform:none;}
}

<main id="main-content" class="page-about">
  <div class="wrap">
    <nav class="breadcrumb" aria-label="面包屑">
      <ol class="breadcrumb__list">
        <li><a class="breadcrumb__link" href="/">首页概览</a></li>
        <li aria-current="page">关于博奥</li>
      </ol>
    </nav>
  </div>

  <section class="section about-hero">
    <div class="wrap about-hero__inner">
      <div class="about-hero__text">
        <p class="kicker">关于博奥体育</p>
        <h1>把一整个赛季，读成一条接得上的线</h1>
        <p class="about-hero__lead">周末连着看两场，麻烦的往往不是找比赛，而是把上一轮的走势、两队过往的交手、这一轮的看点接在一起。博奥体育从 2019 年起就在做这件事：轮次安排、历史交锋和你关注的联赛被放进同一条路径，从下午翻到深夜不用来回跳页。</p>
        <p class="about-hero__note">目前覆盖 12 个联赛栏目，欧洲五大联赛、洲际杯赛和国内职业联赛各自成栏，按赛季阶段归档。</p>
        <ol class="about-index">
          <li><a class="about-index__link" href="#method"><span class="num about-index__no">01</span><span>一条路线怎么串起来</span></a></li>
          <li><a class="about-index__link" href="#system"><span class="num about-index__no">02</span><span>栏目与归档</span></a></li>
          <li><a class="about-index__link" href="#team"><span class="num about-index__no">03</span><span>谁来维护每一轮</span></a></li>
          <li><a class="about-index__link" href="#timeline"><span class="num about-index__no">04</span><span>走过来的阶段</span></a></li>
          <li><a class="about-index__link" href="#cadence"><span class="num about-index__no">05</span><span>每周与每季的节奏</span></a></li>
        </ol>
      </div>
      <figure class="media media--tall about-hero__figure">
        <img src="{zhanqunpic:h:1200w:1000}" width="1000" height="1200" alt="战术板线条与箭头延伸出的抽象局部，示意轮次推进的方向">
        <figcaption class="media__caption">战术板线条 / 轮次推进示意</figcaption>
      </figure>
    </div>
  </section>

  <section class="section about-method" id="method">
    <div class="wrap">
      <header class="about-head">
        <p class="kicker">方法</p>
        <h2>四处接口，把零散资料接成一段连续阅读</h2>
        <p class="about-head__sub">赛程表、交锋记录、关注标记和公告原本各在一处。我们把它们按同一套顺序摆好：先看这一轮排在哪一周，再看两队过去怎么交手，最后确认安排有没有临时变化。读者顺着这个顺序走，一次就能把周末的比赛安排清楚。</p>
      </header>
      <ol class="about-steps">
        <li class="about-steps__item panel" tabindex="0">
          <span class="num about-steps__no">01</span>
          <h3>轮次速查先铺底</h3>
          <p>最近两个赛季的安排压在一页里，按周横向翻，哪几天连着有球、哪一轮夹在杯赛中间，一眼能看出来。周末连看两场时，先用它把时间空出来。</p>
          <p class="about-steps__link"><a href="/features/">看轮次速查怎么用</a></p>
        </li>
        <li class="about-steps__item panel" tabindex="0">
          <span class="num about-steps__no">02</span>
          <h3>交锋记录提供依据</h3>
          <p>4,800 余场对阵按联赛、轮次和栏目三类索引归档。翻到某一场时，两队此前在同一阶段的表现就在旁边，不必另开搜索。关注列表里的对阵也能直接跳进来。</p>
          <p class="about-steps__link"><a href="/press/">看近期栏目调整</a></p>
        </li>
        <li class="about-steps__item panel" tabindex="0">
          <span class="num about-steps__no">03</span>
          <h3>关注列表留住重点</h3>
          <p>最多 8 个联赛可以并行追踪，每个联赛单独设提醒标记。多线并行的时候，先看被标记的那几条，剩下的按时间顺着翻，不会漏掉某一轮的轮换。</p>
          <p class="about-steps__link"><a href="/guide/">了解关注列表操作</a></p>
        </li>
        <li class="about-steps__item panel" tabindex="0">
          <span class="num about-steps__no">04</span>
          <h3>公告兜住临时变化</h3>
          <p>轮次改期、栏目调整、设备上的显示变动都集中在公告栏，按周同步一次。看完安排再扫一遍公告，就不会照着旧时间白等一个晚上。</p>
          <p class="about-steps__link"><a href="/press/">打开公告栏</a></p>
        </li>
      </ol>
    </div>
  </section>

  <section class="section about-system" id="system">
    <div class="wrap about-system__inner">
      <div class="about-system__lede">
        <p class="kicker">栏目与归档</p>
        <h2>联赛各占一栏，赛季阶段各归各位</h2>
        <p>每个联赛有独立的赛季时间线，节点直接跳转到对应的轮次卡片。常规轮次、杯赛淘汰和收官阶段分开摆放，赛事密集的时候不用在同一条长列表里翻找。</p>
        <p>专题路线按看球场景组织：赛季开局看阵容磨合，密集赛程看轮换节奏，杯赛淘汰看对阵关系，历史交锋看长期走势，周末连看排两场的衔接，赛季收官收拢整个阶段的结果。6 类路线覆盖了一个赛季里大部分阅读需求。</p>
      </div>
      <dl class="about-stats">
        <div class="about-stats__row">
          <dt>联赛栏目</dt>
          <dd><span class="num about-stats__val">12</span><span class="about-stats__unit">个</span></dd>
        </div>
        <div class="about-stats__row">
          <dt>归档对阵记录</dt>
          <dd><span class="num about-stats__val">4,800</span><span class="about-stats__unit">余场</span></dd>
        </div>
        <div class="about-stats__row">
          <dt>专题路线</dt>
          <dd><span class="num about-stats__val">6</span><span class="about-stats__unit">类</span></dd>
        </div>
        <div class="about-stats__row">
          <dt>轮次速查页</dt>
          <dd><span class="num about-stats__val">1,200</span><span class="about-stats__unit">余期</span></dd>
        </div>
      </dl>
    </div>
  </section>

  <section class="section about-team" id="team">
    <div class="wrap">
      <div class="about-team__box panel panel--indigo">
        <div class="about-team__text">
          <p class="kicker">编辑团队</p>
          <h2>18 名编辑，按联赛分组守住每一轮</h2>
          <p>编辑与数据整理人员按联赛分组，各自盯住本组的排期、对阵和栏目更新。跨联赛撞期、轮次临时调整这类情况在组间传递，同一轮安排不会出现两种写法。</p>
          <p>9 家体育数据服务方提供的资料用于互相印证。遇到对阵记录有出入，编辑回到原始排期比对，确认之后才改动已上线的内容。</p>
          <ul class="about-team__list">
            <li>每个联赛固定对接人，长期跟进同一组球队</li>
            <li>轮次与交锋记录同步更新，改一处即连带更新索引</li>
            <li>读者发现记录有误，可通过客服邮箱提交更正建议</li>
          </ul>
        </div>
        <figure class="media media--wide about-team__figure">
          <img src="{zhanqunpic:h:700w:1200}" width="1200" height="700" alt="看台灯光与编辑桌面线条的抽象合成画面，不出现可识别人物" loading="lazy" decoding="async">
          <figcaption class="media__caption">看台灯光 / 桌面线条</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="section about-timeline" id="timeline">
    <div class="wrap about-timeline__inner">
      <div class="about-timeline__aside">
        <p class="kicker">走过的阶段</p>
        <h2>从一张轮次表，到一套能顺着读的安排</h2>
        <p class="about-timeline__sub">六年多的时间里，改动大多来自读者在具体场景里遇到的麻烦：找不到某一场的交锋、盯不住第三个联赛、换了设备看不清密度。下面几个阶段对应这些麻烦被解决的过程。</p>
        <figure class="media media--square about-timeline__figure">
          <img src="{zhanqunpic:h:800w:800}" width="800" height="800" alt="球场边线延伸成纵向轨迹的抽象纹理，无人物" loading="lazy" decoding="async">
          <figcaption class="media__caption">边线 / 纵向轨迹</figcaption>
        </figure>
      </div>
      <ol class="about-tl">
        <li class="about-tl__node" tabindex="0">
          <div class="about-tl__head">
            <span class="num about-tl__tag">2019</span>
            <h3>先把轮次排整齐</h3>
            <span class="about-tl__hint" aria-hidden="true">+</span>
          </div>
          <p class="about-tl__desc">起步时只做一件事：把散落各处的轮次表整理成能按周翻阅的页面，让一个赛季的安排有个固定位置可查。</p>
          <div class="about-tl__more"><span>最早的版本只有轮次和时间，交锋资料仍要另外去找。</span></div>
        </li>
        <li class="about-tl__node" tabindex="0">
          <div class="about-tl__head">
            <span class="num about-tl__tag">归档</span>
            <h3>交锋记录找到自己的位置</h3>
            <span class="about-tl__hint" aria-hidden="true">+</span>
          </div>
          <p class="about-tl__desc">对阵记录开始按联赛、轮次和栏目分类归档，累计收录 4,800 余场，翻轮次时能顺手看到两队此前的交手。</p>
          <div class="about-tl__more"><span>三类索引同时保留，从任何一个入口进来都能落到同一场对阵。</span></div>
        </li>
        <li class="about-tl__node" tabindex="0">
          <div class="about-tl__head">
            <span class="num about-tl__tag">连载</span>
            <h3>多联赛可以一起追</h3>
            <span class="about-tl__hint" aria-hidden="true">+</span>
          </div>
          <p class="about-tl__desc">关注列表支持 8 个联赛并行追踪，阅读路线把多张轮次卡片串成一条连续浏览的路径，周末连看之前先排好顺序。</p>
          <div class="about-tl__more"><span>路线可以生成分享链接，转给朋友时只带安排本身，个人的关注内容留在自己账号里。</span></div>
        </li>
        <li class="about-tl__node" tabindex="0">
          <div class="about-tl__head">
            <span class="num about-tl__tag">适配</span>
            <h3>换到平板也能读</h3>
            <span class="about-tl__hint" aria-hidden="true">+</span>
          </div>
          <p class="about-tl__desc">内地版导航按手机、平板、桌面三类设备拆分入口，平板端配了独立的适配清单，写明屏幕比例、阅读密度和横屏布局的建议。</p>
          <div class="about-tl__more"><span>首次在平板上使用需要完成换平板登录，登录状态可在设备之间切换。</span></div>
        </li>
        <li class="about-tl__node" tabindex="0">
          <div class="about-tl__head">
            <span class="num about-tl__tag">最近</span>
            <h3>导航按季度复盘一次</h3>
            <span class="about-tl__hint" aria-hidden="true">+</span>
          </div>
          <p class="about-tl__desc">最近一次复盘后，平板适配清单单独成页，手机上要先找的功能在平板入口里一步到位。轮次速查页累计发布 1,200 余期。</p>
          <div class="about-tl__more"><span>复盘依据来自读者在换设备、找栏目时提出的具体问题。</span></div>
        </li>
      </ol>
    </div>
  </section>

  <section class="section about-cadence" id="cadence">
    <div class="wrap">
      <header class="about-head">
        <p class="kicker">更新节奏</p>
        <h2>每天过一遍，每周说清楚，每季收一次</h2>
        <p class="about-head__sub">赛季里安排变得频繁，读者最怕的是照着旧信息等了半天。工作日的校对、周一公告和赛季节点的专题，让变化在发生的那一周就被看见。</p>
      </header>
      <div class="grid grid--2 about-cadence__grid">
        <article class="panel about-cadence__card">
          <h3>工作日逐日校对</h3>
          <p>每个工作日的轮次、对阵与栏目状态当天过一遍，临时改期在下一个工作日之前完成修订，跨联赛撞期在两组的对接人之间先对齐。</p>
        </article>
        <article class="panel about-cadence__card">
          <h3>每周一公告</h3>
          <p>公告栏按轮次调整、栏目更新、设备适配、专题上线四类标签归档，一周内的变化在周一集中发布一次，翻标签就能找到自己关心的那一类。</p>
        </article>
        <article class="panel about-cadence__card">
          <h3>赛季节点专题</h3>
          <p>开局、密集赛程、杯赛淘汰、历史交锋、周末连看、赛季收官，六类专题路线在对应的时点上线，把一个阶段的看点按阅读顺序串好。</p>
        </article>
        <article class="panel about-cadence__card">
          <h3>季度导航复盘</h3>
          <p>每季度回看一次导航结构，最近一次调整新增了平板适配清单页，把换设备时最常问的几件事放在同一个入口下。</p>
        </article>
      </div>
      <p class="about-cadence__next">继续往下看：<a href="/features/">轮次速查与适配清单</a><a href="/press/">最近一周的公告</a><a href="/guide/">换平板登录的操作步骤</a><a href="/connect/">内容纠错与合作咨询</a></p>
    </div>
  </section>
</main>

.page-about{
  --about-line:rgba(53,242,208,.18);
  --about-line-soft:rgba(214,228,221,.1);
}

.page-about .breadcrumb{margin-top:clamp(16px,3vw,28px);}

/* ---------- hero ---------- */
.page-about .about-hero{padding-top:clamp(14px,2.6vw,26px);}
.page-about .about-hero__inner{display:grid;gap:clamp(26px,4.5vw,54px);}
.page-about .about-hero__text>*{margin:0;}
.page-about .about-hero__text>*+*{margin-top:clamp(14px,2vw,20px);}
.page-about .about-hero h1{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(32px,6.4vw,58px);
  line-height:1.03;
  letter-spacing:-.02em;
  color:var(--text);
}
.page-about .about-hero__lead{
  font-size:clamp(15.5px,2.1vw,18px);
  line-height:1.88;
  color:var(--text);
  max-width:60ch;
}
.page-about .about-hero__note{
  padding-left:14px;
  border-left:2px solid var(--orange);
  font-size:14.5px;
  line-height:1.8;
  color:var(--muted);
  max-width:56ch;
}

.page-about .about-index{
  list-style:none;
  margin:clamp(22px,3.5vw,32px) 0 0;
  padding:0;
  display:grid;
  gap:8px;
}
.page-about .about-index__link{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding:10px 12px;
  font-size:14px;
  color:var(--text);
  text-decoration:none;
  border-left:2px solid rgba(53,242,208,.35);
  background:linear-gradient(90deg,rgba(53,242,208,.07),rgba(53,242,208,0));
  transition:border-color var(--t) var(--ease),background var(--t) var(--ease),color var(--t) var(--ease);
}
.page-about .about-index__link:hover,
.page-about .about-index__link:focus-visible{
  border-left-color:var(--orange);
  background:linear-gradient(90deg,rgba(255,154,60,.16),rgba(255,154,60,0));
  color:#fff;
  outline:none;
}
.page-about .about-index__link:focus-visible{box-shadow:inset 0 0 0 1px var(--cyan);}
.page-about .about-index__no{color:var(--cyan);font-size:13px;letter-spacing:.04em;}

.page-about .about-hero__figure{
  position:relative;
  margin:0;
  border:1px solid var(--about-line);
}
.page-about .about-hero__figure img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:5/6;
  object-fit:cover;
  filter:saturate(.82);
}
.page-about .about-hero__figure::after{
  content:"";
  position:absolute;
  inset:auto 0 0 auto;
  width:38%;
  height:2px;
  background:linear-gradient(90deg,rgba(255,154,60,0),var(--orange));
}

@media (min-width:560px){
  .page-about .about-index{grid-template-columns:1fr 1fr;}
}
@media (min-width:880px){
  .page-about .about-hero__inner{
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
    align-items:start;
  }
  .page-about .about-hero__figure{margin-top:6px;}
}

/* ---------- 小节标题 ---------- */
.page-about .about-head{max-width:760px;}
.page-about .about-head h2{
  margin:10px 0 0;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(25px,4.2vw,40px);
  line-height:1.1;
  letter-spacing:-.015em;
  color:var(--text);
}
.page-about .about-head__sub{
  margin:14px 0 0;
  font-size:15.5px;
  line-height:1.85;
  color:var(--muted);
  max-width:64ch;
}

/* ---------- 方法步骤 ---------- */
.page-about .about-steps{
  list-style:none;
  margin:clamp(26px,4vw,44px) 0 0;
  padding:0;
  display:grid;
  gap:clamp(14px,2.2vw,20px);
}
.page-about .about-steps__item{
  position:relative;
  padding:clamp(20px,3vw,28px);
  border:1px solid var(--about-line);
  transition:transform var(--t-slow) var(--ease),border-color var(--t) var(--ease),background var(--t) var(--ease);
}
.page-about .about-steps__item:hover{
  transform:translateY(-4px);
  border-color:var(--line-strong);
  background:var(--ink-700);
}
.page-about .about-steps__item:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
}
.page-about .about-steps__no{
  display:block;
  font-size:13px;
  letter-spacing:.14em;
  color:var(--cyan);
  margin-bottom:12px;
}
.page-about .about-steps__item h3{
  margin:0;
  font-family:var(--font-display);
  font-weight:800;
  font-size:19px;
  line-height:1.35;
  letter-spacing:-.01em;
  color:var(--text);
}
.page-about .about-steps__item p{
  margin:10px 0 0;
  font-size:14.5px;
  line-height:1.8;
  color:var(--muted);
}
.page-about .about-steps__link{margin:14px 0 0;}
.page-about .about-steps__item a{
  display:inline-block;
  font-size:13.5px;
  color:var(--orange);
  text-decoration:none;
  border-bottom:1px solid rgba(255,154,60,.4);
  padding-bottom:2px;
  transition:color var(--t) var(--ease),border-color var(--t) var(--ease);
}
.page-about .about-steps__item a:hover,
.page-about .about-steps__item a:focus-visible{
  color:var(--cyan);
  border-color:var(--cyan);
  outline:none;
}

@media (min-width:680px){
  .page-about .about-steps{grid-template-columns:1fr 1fr;}
}
@media (min-width:1040px){
  .page-about .about-steps__item:nth-child(even){margin-top:36px;}
  .page-about .about-steps{padding-bottom:36px;}
}

/* ---------- 栏目与归档 ---------- */
.page-about .about-system__inner{display:grid;gap:clamp(26px,4vw,48px);}
.page-about .about-system__lede>*{margin:0;}
.page-about .about-system__lede>*+*{margin-top:14px;}
.page-about .about-system__lede h2{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(25px,4.2vw,38px);
  line-height:1.12;
  letter-spacing:-.015em;
  color:var(--text);
}
.page-about .about-system__lede p{
  font-size:15.5px;
  line-height:1.88;
  color:var(--muted);
  max-width:60ch;
}
.page-about .about-stats{
  margin:0;
  border-top:1px solid var(--about-line);
}
.page-about .about-stats__row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding:16px 2px;
  border-bottom:1px solid var(--about-line-soft);
  transition:background var(--t) var(--ease),padding-left var(--t) var(--ease);
}
.page-about .about-stats__row:hover{
  background:rgba(53,242,208,.06);
  padding-left:12px;
}
.page-about .about-stats__row dt{
  font-size:13.5px;
  letter-spacing:.1em;
  color:var(--muted);
}
.page-about .about-stats__row dd{
  margin:0;
  display:flex;
  align-items:baseline;
  gap:5px;
}
.page-about .about-stats__val{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(24px,3.4vw,32px);
  line-height:1;
  color:var(--cyan);
  letter-spacing:-.01em;
}
.page-about .about-stats__unit{
  font-size:13px;
  color:var(--muted);
  letter-spacing:.08em;
}

@media (min-width:880px){
  .page-about .about-system__inner{
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    align-items:start;
  }
  .page-about .about-stats{margin-top:8px;}
}

/* ---------- 团队 ---------- */
.page-about .about-team__box{
  display:grid;
  gap:clamp(24px,4vw,44px);
  padding:clamp(22px,4vw,44px);
  border:1px solid rgba(53,242,208,.16);
}
.page-about .about-team__text>*{margin:0;}
.page-about .about-team__text>*+*{margin-top:14px;}
.page-about .about-team__text h2{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(24px,4vw,36px);
  line-height:1.14;
  letter-spacing:-.015em;
  color:var(--text);
}
.page-about .about-team__text p{
  font-size:15.5px;
  line-height:1.88;
  color:var(--text);
  opacity:.92;
  max-width:58ch;
}
.page-about .about-team__list{
  list-style:none;
  margin:18px 0 0;
  padding:0;
  display:grid;
  gap:10px;
}
.page-about .about-team__list li{
  position:relative;
  padding-left:20px;
  font-size:14px;
  line-height:1.75;
  color:var(--muted);
}
.page-about .about-team__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:9px;
  height:2px;
  background:var(--orange);
}
.page-about .about-team__figure{margin:0;border:1px solid rgba(53,242,208,.14);}
.page-about .about-team__figure img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:12/7;
  object-fit:cover;
  filter:saturate(.78);
  transition:transform var(--t-slow) var(--ease);
}
.page-about .about-team__figure:hover img{transform:scale(1.02);}

@media (min-width:880px){
  .page-about .about-team__box{
    grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
    align-items:center;
  }
}

/* ---------- 时间线 ---------- */
.page-about .about-timeline__inner{display:grid;gap:clamp(28px,4vw,50px);}
.page-about .about-timeline__aside>*{margin:0;}
.page-about .about-timeline__aside>*+*{margin-top:14px;}
.page-about .about-timeline__aside h2{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(25px,4.2vw,38px);
  line-height:1.12;
  letter-spacing:-.015em;
  color:var(--text);
}
.page-about .about-timeline__sub{
  font-size:15px;
  line-height:1.88;
  color:var(--muted);
  max-width:44ch;
}
.page-about .about-timeline__figure{margin:20px 0 0;border:1px solid var(--about-line);}
.page-about .about-timeline__figure img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  object-fit:cover;
  filter:saturate(.7);
}

.page-about .about-tl{
  list-style:none;
  margin:0;
  padding:0 0 0 24px;
  position:relative;
}
.page-about .about-tl::before{
  content:"";
  position:absolute;
  left:6px;
  top:8px;
  bottom:10px;
  width:2px;
  background:linear-gradient(180deg,var(--cyan),rgba(53,242,208,.06));
}
.page-about .about-tl__node{
  position:relative;
  padding:0 0 clamp(20px,3vw,30px);
  outline:none;
}
.page-about .about-tl__node::before{
  content:"";
  position:absolute;
  left:-24px;
  top:5px;
  width:11px;
  height:11px;
  transform:rotate(45deg);
  background:var(--ink-900);
  border:2px solid var(--cyan);
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease),transform var(--t) var(--ease);
}
.page-about .about-tl__node:hover::before,
.page-about .about-tl__node:focus-within::before{
  background:var(--orange);
  border-color:var(--orange);
  transform:rotate(45deg) scale(1.15);
}
.page-about .about-tl__node:focus-visible{
  box-shadow:0 0 0 2px var(--cyan);
  border-radius:2px;
}
.page-about .about-tl__head{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
}
.page-about .about-tl__tag{
  font-size:12.5px;
  letter-spacing:.12em;
  color:var(--orange);
  border:1px solid rgba(255,154,60,.4);
  padding:2px 8px;
}
.page-about .about-tl__head h3{
  margin:0;
  font-family:var(--font-display);
  font-weight:800;
  font-size:18px;
  line-height:1.35;
  color:var(--text);
}
.page-about .about-tl__hint{
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:15px;
  color:var(--muted);
  transition:color var(--t) var(--ease),transform var(--t) var(--ease);
}
.page-about .about-tl__node:hover .about-tl__hint,
.page-about .about-tl__node:focus-within .about-tl__hint{
  color:var(--cyan);
  transform:rotate(45deg);
}
.page-about .about-tl__desc{
  margin:8px 0 0;
  font-size:14.5px;
  line-height:1.82;
  color:var(--text);
  opacity:.9;
  max-width:56ch;
}
.page-about .about-tl__more{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows var(--t-slow) var(--ease);
}
.page-about .about-tl__more>span{
  overflow:hidden;
  display:block;
  font-size:13.5px;
  line-height:1.8;
  color:var(--muted);
  max-width:56ch;
}
.page-about .about-tl__more>span::before{
  content:"";
  display:block;
  height:8px;
}
.page-about .about-tl__node:hover .about-tl__more,
.page-about .about-tl__node:focus-within .about-tl__more{
  grid-template-rows:1fr;
}

@media (min-width:900px){
  .page-about .about-timeline__inner{
    grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
    align-items:start;
  }
  .page-about .about-timeline__aside{position:sticky;top:calc(var(--bar-h) + 24px);}
}

/* ---------- 更新节奏 ---------- */
.page-about .about-cadence__grid{margin-top:clamp(24px,4vw,40px);}
.page-about .about-cadence__card{
  padding:clamp(20px,3vw,28px);
  border-left:3px solid var(--cyan);
  transition:transform var(--t-slow) var(--ease),border-color var(--t) var(--ease);
}
.page-about .about-cadence__card:hover{
  transform:translateY(-3px);
  border-left-color:var(--orange);
}
.page-about .about-cadence__card h3{
  margin:0;
  font-family:var(--font-display);
  font-weight:800;
  font-size:18px;
  line-height:1.4;
  color:var(--text);
}
.page-about .about-cadence__card p{
  margin:10px 0 0;
  font-size:14.5px;
  line-height:1.82;
  color:var(--muted);
}

.page-about .about-cadence__next{
  margin:clamp(24px,4vw,36px) 0 0;
  font-size:14px;
  line-height:2.1;
  color:var(--muted);
  border-top:1px solid var(--about-line);
  padding-top:18px;
}
.page-about .about-cadence__next a{
  color:var(--text);
  text-decoration:none;
  border-bottom:1px solid rgba(53,242,208,.4);
  padding-bottom:2px;
  margin-left:10px;
  transition:color var(--t) var(--ease),border-color var(--t) var(--ease);
}
.page-about .about-cadence__next a:first-of-type{margin-left:8px;}
.page-about .about-cadence__next a:hover,
.page-about .about-cadence__next a:focus-visible{
  color:var(--cyan);
  border-color:var(--cyan);
  outline:none;
}

@media (min-width:880px){
  .page-about .about-cadence__card:first-child{grid-column:1 / -1;}
  .page-about .about-cadence__card:first-child p{max-width:78ch;}
}

@media (min-width:1024px){
  .page-about .about-cadence__next a{margin-left:16px;}
}

@media (prefers-reduced-motion:reduce){
  .page-about *{transition:none!important;animation:none!important;}
  .page-about .about-team__figure:hover img{transform:none;}
}