.page-home{
  --home-stripe: rgba(252,251,247,.14);
  --home-glow: rgba(47,211,192,.16);
  background: var(--c-sand);
  color: var(--c-ink);
  font-family: var(--font-body);
  overflow-x: clip;
}

.page-home *,
.page-home *::before,
.page-home *::after{ box-sizing: border-box; }

.page-home [id]{ scroll-margin-top: 24px; }

.page-home .home-wrap{
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--edge);
}

.page-home .eyebrow{
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-lake);
  margin: 0 0 14px;
}

.page-home .eyebrow--light{ color: var(--c-electric); }

.page-home h2{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.55rem, 3.4vw, 2.35rem);
  line-height: 1.16;
  letter-spacing: .01em;
  margin: 0 0 16px;
  text-wrap: balance;
}

.page-home h3{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.3;
  letter-spacing: .01em;
  margin: 0 0 8px;
}

.page-home figure{ margin: 0; }

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

.page-home .mono{
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.page-home [data-reveal]{
  transition: opacity .32s ease, transform .32s ease;
}

/* ---------- 首屏 ---------- */

.page-home .home-hero{
  position: relative;
  background:
    radial-gradient(120% 90% at 82% 0%, var(--home-glow), transparent 62%),
    var(--c-highland);
  color: var(--c-paper);
  padding-block: clamp(30px, 5vw, 64px) clamp(52px, 7vw, 104px);
}

.page-home .home-hero__grid{
  display: grid;
  gap: clamp(22px, 3vw, 36px);
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--edge);
}

.page-home .home-hero__eyebrow{
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-electric);
  margin: 0 0 18px;
}

.page-home .home-hero__eyebrow::before{
  content: "";
  width: 28px;
  height: 2px;
  background: var(--c-electric);
  flex: none;
}

.page-home .home-hero h1{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 6.4vw, 4.2rem);
  line-height: 1.03;
  letter-spacing: .01em;
  margin: 0 0 clamp(14px, 2vw, 22px);
  text-wrap: balance;
}

.page-home .home-hero__lead{
  font-size: clamp(1rem, 1.1vw, 1.1rem);
  line-height: 1.78;
  color: rgba(252,251,247,.82);
  max-width: 30em;
  margin: 0 0 clamp(20px, 2.4vw, 30px);
}

.page-home .home-hero__toc{
  display: grid;
  border-top: 1px solid var(--home-stripe);
}

.page-home .home-hero__toc a{
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 11px 2px;
  color: var(--c-paper);
  text-decoration: none;
  font-size: .935rem;
  border-bottom: 1px solid var(--home-stripe);
  transition: color .16s ease, padding-left .16s ease;
}

.page-home .home-hero__toc a:hover,
.page-home .home-hero__toc a:focus-visible{
  color: var(--c-electric);
  padding-left: 10px;
}

.page-home .home-hero__toc .mono{
  font-size: .75rem;
  letter-spacing: .08em;
  color: var(--c-electric);
}

.page-home .home-hero__media{
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--c-rock);
  clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%);
}

.page-home .home-hero__media img{
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: saturate(.72) contrast(1.06) brightness(.94);
}

.page-home .home-hero__search{
  background: rgba(11,43,60,.94);
  border: 1px solid rgba(47,211,192,.42);
  border-radius: var(--radius-lg);
  padding: 18px clamp(16px, 2vw, 24px) 20px;
  box-shadow: 0 18px 44px rgba(6,22,31,.35);
}

.page-home .home-search__label{
  display: block;
  font-size: .8125rem;
  letter-spacing: .04em;
  color: rgba(252,251,247,.72);
  margin-bottom: 10px;
}

.page-home .home-search__field{
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--c-paper);
  border-radius: 999px;
  padding: 6px 6px 6px 18px;
}

.page-home .home-search__field input{
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--c-ink);
  padding: 9px 0;
}

.page-home .home-search__field input:focus{
  outline: 2px solid var(--c-electric);
  outline-offset: 4px;
  border-radius: 4px;
}

.page-home .home-search__go{
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 20px;
  border-radius: 999px;
  background: var(--c-lake);
  color: var(--c-paper);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .16s ease;
}

.page-home .home-search__go:hover,
.page-home .home-search__go:focus-visible{ background: var(--c-highland); }

.page-home .home-search__hint{
  margin: 12px 0 0;
  font-size: .8125rem;
  line-height: 1.6;
  color: rgba(252,251,247,.66);
}

/* ---------- 三入口 ---------- */

.page-home .home-entries{
  background: var(--c-paper);
  padding-block: clamp(46px, 6vw, 92px);
}

.page-home .home-entries__grid{
  display: grid;
  gap: clamp(22px, 3vw, 40px);
}

.page-home .home-entries__lede{
  margin: 0;
  max-width: 32em;
  font-size: .975rem;
  line-height: 1.75;
  color: var(--c-mist);
}

.page-home .entry-list{
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}

.page-home .entry{ border-bottom: 1px solid var(--hairline); }

.page-home .entry__link{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 14px;
  padding: 20px 6px 20px 4px;
  text-decoration: none;
  color: inherit;
  transition: background-color .16s ease, padding-left .16s ease;
}

.page-home .entry__link:hover,
.page-home .entry__link:focus-visible{
  background: rgba(18,133,127,.06);
  padding-left: 14px;
}

.page-home .entry__num{
  font-size: .75rem;
  letter-spacing: .1em;
  color: var(--c-lake);
  padding-top: 5px;
}

.page-home .entry__body{ display: block; }

.page-home .entry__title{
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.14rem;
  line-height: 1.3;
  margin-bottom: 6px;
}

.page-home .entry__text{
  display: block;
  font-size: .9rem;
  line-height: 1.7;
  color: var(--c-mist);
}

.page-home .entry__arrow{
  width: 20px;
  height: 20px;
  color: var(--c-lake);
  margin-top: 6px;
  transition: transform .16s ease;
}

.page-home .entry__link:hover .entry__arrow,
.page-home .entry__link:focus-visible .entry__arrow{ transform: translate(4px, -4px); }

.page-home .home-entries__media{
  overflow: hidden;
  border-radius: var(--radius-lg);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 8%));
}

.page-home .home-entries__media img{
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  filter: saturate(.7) contrast(1.04);
}

/* ---------- 数据带 ---------- */

.page-home .home-band{
  position: relative;
  background: var(--c-highland);
  color: var(--c-paper);
  padding-block: clamp(50px, 6.5vw, 104px);
}

.page-home .home-band::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-electric), transparent);
  opacity: .55;
}

.page-home .home-band__grid{
  display: grid;
  gap: clamp(24px, 3.4vw, 48px);
}

.page-home .home-band__media{
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--c-rock);
}

.page-home .home-band__media img{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: saturate(.6) contrast(1.1) brightness(.92);
}

.page-home .band-stats{
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  border-top: 1px solid var(--home-stripe);
}

.page-home .band-stats li{
  display: grid;
  grid-template-columns: minmax(84px, auto) 1fr;
  align-items: baseline;
  gap: 12px 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--home-stripe);
}

.page-home .band-stats__num{
  font-size: clamp(1.9rem, 5vw, 3rem);
  font-weight: 600;
  line-height: 1;
  color: var(--c-electric);
}

.page-home .band-stats__label{
  font-size: .875rem;
  line-height: 1.65;
  color: rgba(252,251,247,.78);
}

.page-home .home-band__note{
  margin: 0 0 20px;
  max-width: 34em;
  font-size: .9375rem;
  line-height: 1.78;
  color: rgba(252,251,247,.78);
}

.page-home .home-band__link{
  display: inline-block;
  font-size: .9rem;
  font-weight: 600;
  color: var(--c-electric);
  text-decoration: none;
  border-bottom: 1px solid rgba(47,211,192,.5);
  padding-bottom: 3px;
}

.page-home .home-band__link:hover,
.page-home .home-band__link:focus-visible{ color: var(--c-paper); border-color: var(--c-paper); }

/* ---------- 专栏目录 ---------- */

.page-home .home-notes{
  background: var(--c-sand);
  padding-block: clamp(46px, 6vw, 92px);
}

.page-home .home-notes__grid{
  display: grid;
  gap: clamp(22px, 3vw, 40px);
}

.page-home .home-notes__media{
  overflow: hidden;
  border-radius: var(--radius-lg);
  clip-path: polygon(0 6%, 100% 0, 100% 100%, 0 100%);
}

.page-home .home-notes__media img{
  width: 100%;
  aspect-ratio: 7 / 4;
  object-fit: cover;
  filter: saturate(.62) contrast(1.08);
}

.page-home .home-notes__lede{
  margin: 0;
  max-width: 34em;
  font-size: .975rem;
  line-height: 1.75;
  color: var(--c-mist);
}

.page-home .note-index{
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}

.page-home .note-index__item{ border-bottom: 1px solid var(--hairline); }

.page-home .note-index__link{
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 6px 14px;
  padding: 18px 4px;
  text-decoration: none;
  color: inherit;
  transition: background-color .16s ease, padding-left .16s ease;
}

.page-home .note-index__link:hover,
.page-home .note-index__link:focus-visible{
  background: rgba(18,133,127,.07);
  padding-left: 12px;
}

.page-home .note-index__num{
  grid-column: 1;
  grid-row: 1 / span 3;
  font-size: .75rem;
  letter-spacing: .08em;
  color: var(--c-lake);
  padding-top: 5px;
}

.page-home .note-index__meta{
  grid-column: 2;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.page-home .note-index__time{
  font-size: .75rem;
  color: var(--c-mist);
}

.page-home .note-index__title{
  grid-column: 2;
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.06rem;
  line-height: 1.38;
}

.page-home .note-index__digest{
  grid-column: 2;
  display: block;
  font-size: .875rem;
  line-height: 1.65;
  color: var(--c-mist);
}

.page-home .tag{
  display: inline-block;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.page-home .tag--lake{ background: rgba(18,133,127,.14); color: var(--c-lake); }
.page-home .tag--yellow{ background: var(--c-yellow); color: var(--c-rock); }
.page-home .tag--red{ background: var(--c-red); color: var(--c-paper); }

/* ---------- 检索演示 ---------- */

.page-home .home-demo{
  background: var(--c-paper);
  padding-block: clamp(46px, 6vw, 92px);
}

.page-home .home-demo__head{ margin-bottom: clamp(22px, 3vw, 38px); }

.page-home .home-demo__lede{
  margin: 0;
  max-width: 34em;
  font-size: .975rem;
  line-height: 1.75;
  color: var(--c-mist);
}

.page-home .demo-steps{
  list-style: none;
  margin: 0 0 clamp(20px, 2.6vw, 32px);
  padding: 0;
  display: grid;
  gap: clamp(14px, 2vw, 24px);
}

.page-home .demo-step{
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--c-sand);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: clamp(18px, 2vw, 26px);
}

.page-home .demo-step__num{
  font-size: .75rem;
  letter-spacing: .12em;
  color: var(--c-lake);
}

.page-home .demo-step p{
  margin: 0;
  font-size: .9rem;
  line-height: 1.7;
  color: var(--c-ink);
}

.page-home .demo-ui{
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--hairline);
}

.page-home .demo-ui__field{
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--c-paper);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 9px 16px;
}

.page-home .demo-ui__text{
  font-size: .875rem;
  color: var(--c-ink);
}

.page-home .demo-ui__caret{
  width: 1px;
  height: 15px;
  background: var(--c-lake);
  display: inline-block;
}

.page-home .demo-ui__tip{
  margin: 10px 0 0;
  font-size: .78rem;
  color: var(--c-mist);
}

.page-home .demo-ui__segments{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.page-home .demo-ui__seg{
  font-size: .8rem;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  color: var(--c-mist);
  background: var(--c-paper);
}

.page-home .demo-ui__seg.is-on{
  background: var(--c-lake);
  border-color: var(--c-lake);
  color: var(--c-paper);
  font-weight: 600;
}

.page-home .demo-ui__row{
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px dashed var(--hairline);
  font-size: .82rem;
  color: var(--c-ink);
}

.page-home .demo-ui__row:last-child{ border-bottom: 0; padding-bottom: 0; }

.page-home .demo-ui__key{
  flex: none;
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--c-lake);
}

.page-home .home-demo__foot{
  margin: 0;
  font-size: .9rem;
  line-height: 1.7;
  color: var(--c-mist);
}

.page-home .home-demo__foot a{
  color: var(--c-lake);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(18,133,127,.4);
}

.page-home .home-demo__foot a:hover,
.page-home .home-demo__foot a:focus-visible{ border-color: var(--c-lake); }

/* ---------- 订阅与联系 ---------- */

.page-home .home-close{
  background: var(--c-rock);
  color: var(--c-paper);
  padding-block: clamp(48px, 6.5vw, 100px);
}

.page-home .home-close__grid{
  display: grid;
  gap: clamp(26px, 4vw, 56px);
}

.page-home .home-close__text{
  margin: 0 0 24px;
  max-width: 32em;
  font-size: .975rem;
  line-height: 1.8;
  color: rgba(252,251,247,.8);
}

.page-home .home-close__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-home .home-close__aside{
  background: rgba(11,43,60,.55);
  border: 1px solid var(--home-stripe);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 2.4vw, 30px);
}

.page-home .home-close__aside h3{ color: var(--c-paper); }

.page-home .home-close__aside p{
  margin: 0 0 16px;
  font-size: .9rem;
  line-height: 1.72;
  color: rgba(252,251,247,.76);
}

.page-home .home-close__contacts{
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

.page-home .home-close__contacts li{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--home-stripe);
  font-size: .9rem;
}

.page-home .home-close__contacts li:last-child{ border-bottom: 0; }

.page-home .home-close__contacts .mono{
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--c-electric);
  min-width: 32px;
}

.page-home .home-close__contacts a{
  color: var(--c-paper);
  text-decoration: none;
  border-bottom: 1px solid rgba(252,251,247,.3);
}

.page-home .home-close__contacts a:hover,
.page-home .home-close__contacts a:focus-visible{ color: var(--c-electric); }

/* ---------- 响应式 ---------- */

@media (min-width: 720px){
  .page-home .band-stats li{ grid-template-columns: minmax(110px, auto) 1fr; }
  .page-home .note-index__link{ grid-template-columns: 44px 1fr; }
}

@media (min-width: 880px){
  .page-home .home-entries__grid{
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--gap);
    align-items: start;
  }
  .page-home .home-entries__head{ grid-column: 2 / span 5; grid-row: 1; }
  .page-home .entry-list{ grid-column: 2 / span 5; grid-row: 2; }
  .page-home .home-entries__media{ grid-column: 8 / span 5; grid-row: 1 / span 2; }

  .page-home .home-band__grid{
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--gap);
    align-items: start;
  }
  .page-home .home-band__media{ grid-column: 1 / span 4; }
  .page-home .home-band__body{ grid-column: 6 / span 7; }

  .page-home .home-notes__grid{
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--gap);
    align-items: start;
  }
  .page-home .home-notes__media{ grid-column: 2 / span 4; grid-row: 1 / span 2; }
  .page-home .home-notes__head{ grid-column: 7 / span 6; grid-row: 1; }
  .page-home .note-index{ grid-column: 7 / span 6; grid-row: 2; }

  .page-home .demo-steps{ grid-template-columns: repeat(3, 1fr); }

  .page-home .home-close__grid{
    grid-template-columns: 1.45fr 1fr;
    align-items: start;
  }
}

@media (min-width: 960px){
  .page-home .home-hero__grid{
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--gap);
    align-items: start;
  }
  .page-home .home-hero__intro{ grid-column: 2 / span 5; grid-row: 1; }
  .page-home .home-hero__media{ grid-column: 7 / span 6; grid-row: 1; }
  .page-home .home-hero__search{
    grid-column: 7 / span 6;
    grid-row: 2;
    margin-top: -56px;
    position: relative;
    z-index: 2;
    max-width: 560px;
    margin-left: auto;
  }
}

@media (min-width: 1100px){
  .page-home .home-hero__intro{ grid-column: 2 / span 5; }
  .page-home .home-hero__search{ margin-left: 0; max-width: none; }
}

@media (prefers-reduced-motion: reduce){
  .page-home [data-reveal],
  .page-home .entry__arrow,
  .page-home .home-hero__toc a,
  .page-home .note-index__link,
  .page-home .entry__link,
  .page-home .home-search__go{
    transition: none !important;
  }
  .page-home .entry__link:hover .entry__arrow{ transform: none; }
}
<<<END>>>
</<<<>>>
不对——我不该写那个。让我重新正确输出。


<main id="main-content" class="page-home">
  <section class="home-hero" aria-labelledby="hero-title">
    <div class="home-hero__grid">
      <div class="home-hero__intro">
        <p class="home-hero__eyebrow">首页 · 赛季追踪</p>
        <h1 id="hero-title">看国内赛事，从一个检索框开始</h1>
        <p class="home-hero__lead">6688体育把赛程、赛后复盘与判罚记录收在同一条路径上。写下球队名或轮次，就能在几个栏目之间直接跳转，不用在页面里来回翻。</p>
        <nav class="home-hero__toc" aria-label="本站常用路径">
          <a href="#entries"><span class="mono">01</span><span>第一次查赛程</span></a>
          <a href="#records"><span class="mono">02</span><span>本季判罚记录</span></a>
          <a href="#notes"><span class="mono">03</span><span>专栏与复盘</span></a>
          <a href="#demo"><span class="mono">04</span><span>检索怎么用</span></a>
          <a href="#subscribe"><span class="mono">05</span><span>订阅与联系</span></a>
        </nav>
      </div>

      <figure class="home-hero__media">
        <img src="{zhanqunpic:h:1000w:1600}" width="1600" height="1000" alt="高原体育场看台与天空构成的斜切几何画面，画面中没有人物正脸">
      </figure>

      <div class="home-hero__search" role="search" aria-label="站内检索入口">
        <label class="home-search__label" for="home-query">搜球队、赛事编号或轮次</label>
        <div class="home-search__field">
          <input id="home-query" type="search" placeholder="第18轮 / 排球 / 半决赛">
          <a class="home-search__go" href="/offerings/">检索</a>
        </div>
        <p class="home-search__hint">结果可以按赛程、复盘、记录、专栏切换，换个栏目就是换一种读法。</p>
      </div>
    </div>
  </section>

  <section class="home-entries" id="entries" aria-labelledby="entries-title">
    <div class="home-wrap home-entries__grid">
      <div class="home-entries__head" data-reveal>
        <p class="eyebrow">02 — 常用入口</p>
        <h2 id="entries-title">手里的问题分三类，入口也分三条</h2>
        <p class="home-entries__lede">不确定从哪儿开始，先看自己此刻要什么：查某一场的安排、跟着整季往下走，还是翻某一次判罚的来龙去脉。</p>
      </div>

      <ul class="entry-list">
        <li class="entry" data-reveal style="--reveal-delay:1">
          <a class="entry__link" href="/knowledge/">
            <span class="entry__num mono">01</span>
            <span class="entry__body">
              <span class="entry__title">第一次来查赛程</span>
              <span class="entry__text">选项目、选轮次、设提醒，三步落到具体那一场，不用先熟悉栏目结构。</span>
            </span>
            <svg class="entry__arrow" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M4 12h14M13 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square"/></svg>
          </a>
        </li>
        <li class="entry" data-reveal style="--reveal-delay:2">
          <a class="entry__link" href="/offerings/">
            <span class="entry__num mono">02</span>
            <span class="entry__body">
              <span class="entry__title">跟着整季订阅</span>
              <span class="entry__text">按时段和轮次挑赛事，站内提醒与每日一封邮件摘要，两种方式并着用。</span>
            </span>
            <svg class="entry__arrow" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M4 12h14M13 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square"/></svg>
          </a>
        </li>
        <li class="entry" data-reveal style="--reveal-delay:3">
          <a class="entry__link" href="/notes/">
            <span class="entry__num mono">03</span>
            <span class="entry__body">
              <span class="entry__title">翻某一回判罚</span>
              <span class="entry__text">按赛事、轮次、时间与判罚类型归档，每条带原文出处与状态标记。</span>
            </span>
            <svg class="entry__arrow" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M4 12h14M13 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square"/></svg>
          </a>
        </li>
      </ul>

      <figure class="home-entries__media" data-reveal>
        <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="赛场边线与草地交界的局部俯拍，画面中只有线条与草地质感" loading="lazy" decoding="async">
      </figure>
    </div>
  </section>

  <section class="home-band" id="records" aria-labelledby="records-title">
    <div class="home-wrap home-band__grid">
      <figure class="home-band__media" data-reveal>
        <img src="{zhanqunpic:h:900w:900}" width="900" height="900" alt="裁判举牌的局部剪影，只保留手与牌的轮廓，不出现人物正脸" loading="lazy" decoding="async">
      </figure>

      <div class="home-band__body" data-reveal>
        <p class="eyebrow eyebrow--light">03 — 本季进度</p>
        <h2 id="records-title">赛季走到哪一步，数字比形容词快</h2>

        <ul class="band-stats">
          <li>
            <span class="band-stats__num mono">104</span>
            <span class="band-stats__label">条红黄牌记录，按赛事、轮次、时间与判罚类型归档</span>
          </li>
          <li>
            <span class="band-stats__num mono">268</span>
            <span class="band-stats__label">篇赛后复盘，比赛结束后 24 小时内发布</span>
          </li>
          <li>
            <span class="band-stats__num mono">46</span>
            <span class="band-stats__label">项赛事日历，覆盖国内 26 个省级行政区</span>
          </li>
        </ul>

        <p class="home-band__note">判罚记录保留原文出处链接与状态标记，点开就能回到所属的那一场赛事条目；复盘按摘要、过程、关键判罚三段展开，赶时间可以只读第一段。</p>
        <a class="home-band__link" href="/notes/">看这一季的复盘与记录</a>
      </div>
    </div>
  </section>

  <section class="home-notes" id="notes" aria-labelledby="notes-title">
    <div class="home-wrap home-notes__grid">
      <figure class="home-notes__media" data-reveal>
        <img src="{zhanqunpic:h:800w:1400}" width="1400" height="800" alt="夜间场馆灯带与看台结构的低饱和画面，强调几何形状与光带" loading="lazy" decoding="async">
      </figure>

      <div class="home-notes__head" data-reveal>
        <p class="eyebrow">04 — 专栏目录</p>
        <h2 id="notes-title">本周编辑在追的几场</h2>
        <p class="home-notes__lede">26 位签约观察员覆盖足球、篮球、排球、田径等 9 个项目，每周更新 3 期。下面几条是眼下值得先读的。</p>
      </div>

      <ol class="note-index">
        <li class="note-index__item" data-reveal style="--reveal-delay:1">
          <a class="note-index__link" href="/notes/">
            <span class="note-index__num mono">01</span>
            <span class="note-index__meta"><span class="tag tag--lake">赛后复盘</span><span class="mono note-index__time">8 分钟</span></span>
            <span class="note-index__title">高原主场的第三节：换防提速之后发生了什么</span>
            <span class="note-index__digest">节奏一提，进攻回合数变了，防守轮转却慢半拍，这场的分水岭就在这里。</span>
          </a>
        </li>
        <li class="note-index__item" data-reveal style="--reveal-delay:2">
          <a class="note-index__link" href="/notes/">
            <span class="note-index__num mono">02</span>
            <span class="note-index__meta"><span class="tag tag--yellow">判罚记录</span><span class="mono note-index__time">5 分钟</span></span>
            <span class="note-index__title">第二回合的两张黄牌，类型归属与后续影响</span>
            <span class="note-index__digest">同样是黄牌，战术犯规和延误比赛在记录里是两类，处理方式也不同。</span>
          </a>
        </li>
        <li class="note-index__item" data-reveal style="--reveal-delay:3">
          <a class="note-index__link" href="/notes/">
            <span class="note-index__num mono">03</span>
            <span class="note-index__meta"><span class="tag tag--lake">赛程前瞻</span><span class="mono note-index__time">6 分钟</span></span>
            <span class="note-index__title">排球半决赛的轮次轮换，教练席怎么算这笔账</span>
            <span class="note-index__digest">主力休一场还是抢主场，赛程密度把这道选择题摆到了明面上。</span>
          </a>
        </li>
        <li class="note-index__item" data-reveal style="--reveal-delay:4">
          <a class="note-index__link" href="/notes/">
            <span class="note-index__num mono">04</span>
            <span class="note-index__meta"><span class="tag tag--lake">编辑手记</span><span class="mono note-index__time">4 分钟</span></span>
            <span class="note-index__title">从一场闷平里读出来的三条线索</span>
            <span class="note-index__digest">比分没动，站位动了。三条容易被忽略的调整，值得回看录像。</span>
          </a>
        </li>
        <li class="note-index__item" data-reveal style="--reveal-delay:5">
          <a class="note-index__link" href="/notes/">
            <span class="note-index__num mono">05</span>
            <span class="note-index__meta"><span class="tag tag--red">红牌记录</span><span class="mono note-index__time">3 分钟</span></span>
            <span class="note-index__title">补时阶段的那张红牌，记录里查得到什么</span>
            <span class="note-index__digest">时间戳、轮次、判罚类型与出处链接，一条记录能串起整段经过。</span>
          </a>
        </li>
      </ol>
    </div>
  </section>

  <section class="home-demo" id="demo" aria-labelledby="demo-title">
    <div class="home-wrap">
      <div class="home-demo__head" data-reveal>
        <p class="eyebrow">05 — 检索怎么用</p>
        <h2 id="demo-title">同一个检索框，换栏目就是换一种读法</h2>
        <p class="home-demo__lede">首页大框、侧边快捷框、列表页筛选条，三处输入方式一样，学过一遍就能到处用。</p>
      </div>

      <ol class="demo-steps">
        <li class="demo-step" data-reveal style="--reveal-delay:1">
          <span class="demo-step__num mono">01</span>
          <h3>写下关键词</h3>
          <p>球队名、赛事编号或者轮次都行，中文与数字混着写也能认出来。</p>
          <div class="demo-ui">
            <div class="demo-ui__field"><span class="demo-ui__text mono">第18轮</span><span class="demo-ui__caret" aria-hidden="true"></span></div>
            <p class="demo-ui__tip">常用查询在 0.4 秒内返回结果</p>
          </div>
        </li>

        <li class="demo-step" data-reveal style="--reveal-delay:2">
          <span class="demo-step__num mono">02</span>
          <h3>切换栏目</h3>
          <p>同一组关键词，落在赛程、复盘、记录还是专栏，结果各是一份清单。</p>
          <div class="demo-ui">
            <div class="demo-ui__segments">
              <span class="demo-ui__seg is-on">赛程</span>
              <span class="demo-ui__seg">复盘</span>
              <span class="demo-ui__seg">记录</span>
              <span class="demo-ui__seg">专栏</span>
            </div>
          </div>
        </li>

        <li class="demo-step" data-reveal style="--reveal-delay:3">
          <span class="demo-step__num mono">03</span>
          <h3>读结果摘要</h3>
          <p>每条结果带一行摘要与编号，扫一眼就知道该不该点进去。</p>
          <div class="demo-ui">
            <div class="demo-ui__row"><span class="demo-ui__key mono">SC-18</span><span>该轮次赛程与开赛时间</span></div>
            <div class="demo-ui__row"><span class="demo-ui__key mono">RV-18</span><span>相关复盘与看点段落</span></div>
            <div class="demo-ui__row"><span class="demo-ui__key mono">RC-18</span><span>判罚记录与出处链接</span></div>
          </div>
        </li>
      </ol>

      <p class="home-demo__foot" data-reveal>第一次用可以照着三步走，遇上写不出关键词的时候，去<a href="/knowledge/">知识中心</a>看看常见查法。</p>
    </div>
  </section>

  <section class="home-close" id="subscribe" aria-labelledby="subscribe-title">
    <div class="home-wrap home-close__grid">
      <div class="home-close__primary" data-reveal>
        <p class="eyebrow eyebrow--light">06 — 订阅与联系</p>
        <h2 id="subscribe-title">把要跟的赛程和栏目定下来</h2>
        <p class="home-close__text">订阅中心覆盖 12 个运动项目，可以按时段与轮次挑，站内提醒与每日一封的邮件摘要两种通知并着用。赛程还能导成日历文件放进常用日历里，邮件里也能一键退订。</p>
        <div class="home-close__actions">
          <a class="btn btn--primary" href="/offerings/">进订阅中心</a>
          <a class="btn btn--ghost" href="/values/">看内容方法</a>
        </div>
      </div>

      <aside class="home-close__aside" data-reveal style="--reveal-delay:2">
        <h3>没找到要的那一条</h3>
        <p>把页面截图和关键词一起发过来，工作日 9:00–18:00（青海时间）内会回复。</p>
        <ul class="home-close__contacts">
          <li><span class="mono">邮箱</span><a href="/inquiry/">kefu@proview-6688.com.cn</a></li>
          <li><span class="mono">电话</span><a href="/inquiry/">400-2084-7571</a></li>
        </ul>
        <a class="btn btn--signal" href="/inquiry/">走咨询通道</a>
      </aside>
    </div>
  </section>
</main>

.page-home{
  --home-stripe: rgba(252,251,247,.14);
  --home-glow: rgba(47,211,192,.16);
  background: var(--c-sand);
  color: var(--c-ink);
  font-family: var(--font-body);
  overflow-x: clip;
}

.page-home *,
.page-home *::before,
.page-home *::after{ box-sizing: border-box; }

.page-home [id]{ scroll-margin-top: 24px; }

.page-home .home-wrap{
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--edge);
}

.page-home .eyebrow{
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-lake);
  margin: 0 0 14px;
}

.page-home .eyebrow--light{ color: var(--c-electric); }

.page-home h2{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.55rem, 3.4vw, 2.35rem);
  line-height: 1.16;
  letter-spacing: .01em;
  margin: 0 0 16px;
  text-wrap: balance;
}

.page-home h3{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.3;
  letter-spacing: .01em;
  margin: 0 0 8px;
}

.page-home figure{ margin: 0; }

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

.page-home .mono{
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.page-home [data-reveal]{
  transition: opacity .32s ease, transform .32s ease;
}

/* ---------- 首屏 ---------- */

.page-home .home-hero{
  position: relative;
  background:
    radial-gradient(120% 90% at 82% 0%, var(--home-glow), transparent 62%),
    var(--c-highland);
  color: var(--c-paper);
  padding-block: clamp(30px, 5vw, 64px) clamp(52px, 7vw, 104px);
}

.page-home .home-hero__grid{
  display: grid;
  gap: clamp(22px, 3vw, 36px);
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--edge);
}

.page-home .home-hero__eyebrow{
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-electric);
  margin: 0 0 18px;
}

.page-home .home-hero__eyebrow::before{
  content: "";
  width: 28px;
  height: 2px;
  background: var(--c-electric);
  flex: none;
}

.page-home .home-hero h1{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 6.4vw, 4.2rem);
  line-height: 1.03;
  letter-spacing: .01em;
  margin: 0 0 clamp(14px, 2vw, 22px);
  text-wrap: balance;
}

.page-home .home-hero__lead{
  font-size: clamp(1rem, 1.1vw, 1.1rem);
  line-height: 1.78;
  color: rgba(252,251,247,.82);
  max-width: 30em;
  margin: 0 0 clamp(20px, 2.4vw, 30px);
}

.page-home .home-hero__toc{
  display: grid;
  border-top: 1px solid var(--home-stripe);
}

.page-home .home-hero__toc a{
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 11px 2px;
  color: var(--c-paper);
  text-decoration: none;
  font-size: .935rem;
  border-bottom: 1px solid var(--home-stripe);
  transition: color .16s ease, padding-left .16s ease;
}

.page-home .home-hero__toc a:hover,
.page-home .home-hero__toc a:focus-visible{
  color: var(--c-electric);
  padding-left: 10px;
}

.page-home .home-hero__toc .mono{
  font-size: .75rem;
  letter-spacing: .08em;
  color: var(--c-electric);
}

.page-home .home-hero__media{
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--c-rock);
  clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%);
}

.page-home .home-hero__media img{
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: saturate(.72) contrast(1.06) brightness(.94);
}

.page-home .home-hero__search{
  background: rgba(11,43,60,.94);
  border: 1px solid rgba(47,211,192,.42);
  border-radius: var(--radius-lg);
  padding: 18px clamp(16px, 2vw, 24px) 20px;
  box-shadow: 0 18px 44px rgba(6,22,31,.35);
}

.page-home .home-search__label{
  display: block;
  font-size: .8125rem;
  letter-spacing: .04em;
  color: rgba(252,251,247,.72);
  margin-bottom: 10px;
}

.page-home .home-search__field{
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--c-paper);
  border-radius: 999px;
  padding: 6px 6px 6px 18px;
}

.page-home .home-search__field input{
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--c-ink);
  padding: 9px 0;
}

.page-home .home-search__field input:focus{
  outline: 2px solid var(--c-electric);
  outline-offset: 4px;
  border-radius: 4px;
}

.page-home .home-search__go{
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 20px;
  border-radius: 999px;
  background: var(--c-lake);
  color: var(--c-paper);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .16s ease;
}

.page-home .home-search__go:hover,
.page-home .home-search__go:focus-visible{ background: var(--c-highland); }

.page-home .home-search__hint{
  margin: 12px 0 0;
  font-size: .8125rem;
  line-height: 1.6;
  color: rgba(252,251,247,.66);
}

/* ---------- 三入口 ---------- */

.page-home .home-entries{
  background: var(--c-paper);
  padding-block: clamp(46px, 6vw, 92px);
}

.page-home .home-entries__grid{
  display: grid;
  gap: clamp(22px, 3vw, 40px);
}

.page-home .home-entries__lede{
  margin: 0;
  max-width: 32em;
  font-size: .975rem;
  line-height: 1.75;
  color: var(--c-mist);
}

.page-home .entry-list{
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}

.page-home .entry{ border-bottom: 1px solid var(--hairline); }

.page-home .entry__link{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 14px;
  padding: 20px 6px 20px 4px;
  text-decoration: none;
  color: inherit;
  transition: background-color .16s ease, padding-left .16s ease;
}

.page-home .entry__link:hover,
.page-home .entry__link:focus-visible{
  background: rgba(18,133,127,.06);
  padding-left: 14px;
}

.page-home .entry__num{
  font-size: .75rem;
  letter-spacing: .1em;
  color: var(--c-lake);
  padding-top: 5px;
}

.page-home .entry__body{ display: block; }

.page-home .entry__title{
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.14rem;
  line-height: 1.3;
  margin-bottom: 6px;
}

.page-home .entry__text{
  display: block;
  font-size: .9rem;
  line-height: 1.7;
  color: var(--c-mist);
}

.page-home .entry__arrow{
  width: 20px;
  height: 20px;
  color: var(--c-lake);
  margin-top: 6px;
  transition: transform .16s ease;
}

.page-home .entry__link:hover .entry__arrow,
.page-home .entry__link:focus-visible .entry__arrow{ transform: translate(4px, -4px); }

.page-home .home-entries__media{
  overflow: hidden;
  border-radius: var(--radius-lg);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 8%));
}

.page-home .home-entries__media img{
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  filter: saturate(.7) contrast(1.04);
}

/* ---------- 数据带 ---------- */

.page-home .home-band{
  position: relative;
  background: var(--c-highland);
  color: var(--c-paper);
  padding-block: clamp(50px, 6.5vw, 104px);
}

.page-home .home-band::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-electric), transparent);
  opacity: .55;
}

.page-home .home-band__grid{
  display: grid;
  gap: clamp(24px, 3.4vw, 48px);
}

.page-home .home-band__media{
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--c-rock);
}

.page-home .home-band__media img{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: saturate(.6) contrast(1.1) brightness(.92);
}

.page-home .band-stats{
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  border-top: 1px solid var(--home-stripe);
}

.page-home .band-stats li{
  display: grid;
  grid-template-columns: minmax(84px, auto) 1fr;
  align-items: baseline;
  gap: 12px 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--home-stripe);
}

.page-home .band-stats__num{
  font-size: clamp(1.9rem, 5vw, 3rem);
  font-weight: 600;
  line-height: 1;
  color: var(--c-electric);
}

.page-home .band-stats__label{
  font-size: .875rem;
  line-height: 1.65;
  color: rgba(252,251,247,.78);
}

.page-home .home-band__note{
  margin: 0 0 20px;
  max-width: 34em;
  font-size: .9375rem;
  line-height: 1.78;
  color: rgba(252,251,247,.78);
}

.page-home .home-band__link{
  display: inline-block;
  font-size: .9rem;
  font-weight: 600;
  color: var(--c-electric);
  text-decoration: none;
  border-bottom: 1px solid rgba(47,211,192,.5);
  padding-bottom: 3px;
}

.page-home .home-band__link:hover,
.page-home .home-band__link:focus-visible{ color: var(--c-paper); border-color: var(--c-paper); }

/* ---------- 专栏目录 ---------- */

.page-home .home-notes{
  background: var(--c-sand);
  padding-block: clamp(46px, 6vw, 92px);
}

.page-home .home-notes__grid{
  display: grid;
  gap: clamp(22px, 3vw, 40px);
}

.page-home .home-notes__media{
  overflow: hidden;
  border-radius: var(--radius-lg);
  clip-path: polygon(0 6%, 100% 0, 100% 100%, 0 100%);
}

.page-home .home-notes__media img{
  width: 100%;
  aspect-ratio: 7 / 4;
  object-fit: cover;
  filter: saturate(.62) contrast(1.08);
}

.page-home .home-notes__lede{
  margin: 0;
  max-width: 34em;
  font-size: .975rem;
  line-height: 1.75;
  color: var(--c-mist);
}

.page-home .note-index{
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}

.page-home .note-index__item{ border-bottom: 1px solid var(--hairline); }

.page-home .note-index__link{
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 6px 14px;
  padding: 18px 4px;
  text-decoration: none;
  color: inherit;
  transition: background-color .16s ease, padding-left .16s ease;
}

.page-home .note-index__link:hover,
.page-home .note-index__link:focus-visible{
  background: rgba(18,133,127,.07);
  padding-left: 12px;
}

.page-home .note-index__num{
  grid-column: 1;
  grid-row: 1 / span 3;
  font-size: .75rem;
  letter-spacing: .08em;
  color: var(--c-lake);
  padding-top: 5px;
}

.page-home .note-index__meta{
  grid-column: 2;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.page-home .note-index__time{
  font-size: .75rem;
  color: var(--c-mist);
}

.page-home .note-index__title{
  grid-column: 2;
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.06rem;
  line-height: 1.38;
}

.page-home .note-index__digest{
  grid-column: 2;
  display: block;
  font-size: .875rem;
  line-height: 1.65;
  color: var(--c-mist);
}

.page-home .tag{
  display: inline-block;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.page-home .tag--lake{ background: rgba(18,133,127,.14); color: var(--c-lake); }
.page-home .tag--yellow{ background: var(--c-yellow); color: var(--c-rock); }
.page-home .tag--red{ background: var(--c-red); color: var(--c-paper); }

/* ---------- 检索演示 ---------- */

.page-home .home-demo{
  background: var(--c-paper);
  padding-block: clamp(46px, 6vw, 92px);
}

.page-home .home-demo__head{ margin-bottom: clamp(22px, 3vw, 38px); }

.page-home .home-demo__lede{
  margin: 0;
  max-width: 34em;
  font-size: .975rem;
  line-height: 1.75;
  color: var(--c-mist);
}

.page-home .demo-steps{
  list-style: none;
  margin: 0 0 clamp(20px, 2.6vw, 32px);
  padding: 0;
  display: grid;
  gap: clamp(14px, 2vw, 24px);
}

.page-home .demo-step{
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--c-sand);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: clamp(18px, 2vw, 26px);
}

.page-home .demo-step__num{
  font-size: .75rem;
  letter-spacing: .12em;
  color: var(--c-lake);
}

.page-home .demo-step p{
  margin: 0;
  font-size: .9rem;
  line-height: 1.7;
  color: var(--c-ink);
}

.page-home .demo-ui{
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--hairline);
}

.page-home .demo-ui__field{
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--c-paper);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 9px 16px;
}

.page-home .demo-ui__text{
  font-size: .875rem;
  color: var(--c-ink);
}

.page-home .demo-ui__caret{
  width: 1px;
  height: 15px;
  background: var(--c-lake);
  display: inline-block;
}

.page-home .demo-ui__tip{
  margin: 10px 0 0;
  font-size: .78rem;
  color: var(--c-mist);
}

.page-home .demo-ui__segments{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.page-home .demo-ui__seg{
  font-size: .8rem;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  color: var(--c-mist);
  background: var(--c-paper);
}

.page-home .demo-ui__seg.is-on{
  background: var(--c-lake);
  border-color: var(--c-lake);
  color: var(--c-paper);
  font-weight: 600;
}

.page-home .demo-ui__row{
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px dashed var(--hairline);
  font-size: .82rem;
  color: var(--c-ink);
}

.page-home .demo-ui__row:last-child{ border-bottom: 0; padding-bottom: 0; }

.page-home .demo-ui__key{
  flex: none;
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--c-lake);
}

.page-home .home-demo__foot{
  margin: 0;
  font-size: .9rem;
  line-height: 1.7;
  color: var(--c-mist);
}

.page-home .home-demo__foot a{
  color: var(--c-lake);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(18,133,127,.4);
}

.page-home .home-demo__foot a:hover,
.page-home .home-demo__foot a:focus-visible{ border-color: var(--c-lake); }

/* ---------- 订阅与联系 ---------- */

.page-home .home-close{
  background: var(--c-rock);
  color: var(--c-paper);
  padding-block: clamp(48px, 6.5vw, 100px);
}

.page-home .home-close__grid{
  display: grid;
  gap: clamp(26px, 4vw, 56px);
}

.page-home .home-close__text{
  margin: 0 0 24px;
  max-width: 32em;
  font-size: .975rem;
  line-height: 1.8;
  color: rgba(252,251,247,.8);
}

.page-home .home-close__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-home .home-close__aside{
  background: rgba(11,43,60,.55);
  border: 1px solid var(--home-stripe);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 2.4vw, 30px);
}

.page-home .home-close__aside h3{ color: var(--c-paper); }

.page-home .home-close__aside p{
  margin: 0 0 16px;
  font-size: .9rem;
  line-height: 1.72;
  color: rgba(252,251,247,.76);
}

.page-home .home-close__contacts{
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

.page-home .home-close__contacts li{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--home-stripe);
  font-size: .9rem;
}

.page-home .home-close__contacts li:last-child{ border-bottom: 0; }

.page-home .home-close__contacts .mono{
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--c-electric);
  min-width: 32px;
}

.page-home .home-close__contacts a{
  color: var(--c-paper);
  text-decoration: none;
  border-bottom: 1px solid rgba(252,251,247,.3);
}

.page-home .home-close__contacts a:hover,
.page-home .home-close__contacts a:focus-visible{ color: var(--c-electric); }

/* ---------- 响应式 ---------- */

@media (min-width: 720px){
  .page-home .band-stats li{ grid-template-columns: minmax(110px, auto) 1fr; }
  .page-home .note-index__link{ grid-template-columns: 44px 1fr; }
}

@media (min-width: 880px){
  .page-home .home-entries__grid{
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--gap);
    align-items: start;
  }
  .page-home .home-entries__head{ grid-column: 2 / span 5; grid-row: 1; }
  .page-home .entry-list{ grid-column: 2 / span 5; grid-row: 2; }
  .page-home .home-entries__media{ grid-column: 8 / span 5; grid-row: 1 / span 2; }

  .page-home .home-band__grid{
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--gap);
    align-items: start;
  }
  .page-home .home-band__media{ grid-column: 1 / span 4; }
  .page-home .home-band__body{ grid-column: 6 / span 7; }

  .page-home .home-notes__grid{
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--gap);
    align-items: start;
  }
  .page-home .home-notes__media{ grid-column: 2 / span 4; grid-row: 1 / span 2; }
  .page-home .home-notes__head{ grid-column: 7 / span 6; grid-row: 1; }
  .page-home .note-index{ grid-column: 7 / span 6; grid-row: 2; }

  .page-home .demo-steps{ grid-template-columns: repeat(3, 1fr); }

  .page-home .home-close__grid{
    grid-template-columns: 1.45fr 1fr;
    align-items: start;
  }
}

@media (min-width: 960px){
  .page-home .home-hero__grid{
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--gap);
    align-items: start;
  }
  .page-home .home-hero__intro{ grid-column: 2 / span 5; grid-row: 1; }
  .page-home .home-hero__media{ grid-column: 7 / span 6; grid-row: 1; }
  .page-home .home-hero__search{
    grid-column: 7 / span 6;
    grid-row: 2;
    margin-top: -56px;
    position: relative;
    z-index: 2;
    max-width: 560px;
    margin-left: auto;
  }
}

@media (min-width: 1100px){
  .page-home .home-hero__search{ margin-left: 0; max-width: none; }
}

@media (prefers-reduced-motion: reduce){
  .page-home [data-reveal],
  .page-home .entry__arrow,
  .page-home .home-hero__toc a,
  .page-home .note-index__link,
  .page-home .entry__link,
  .page-home .home-search__go{
    transition: none !important;
  }
  .page-home .entry__link:hover .entry__arrow{ transform: none; }
}