.page-home {
  --home-gutter: clamp(var(--space-3), 4vw, var(--space-8));
  --home-rule: var(--border-thin) solid var(--color-line);
  display: block;
}

.page-home .link-inline {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: var(--border-thin) solid currentColor;
}

.page-home .link-inline:hover,
.page-home .link-inline:focus-visible {
  background: var(--color-highlight);
}

.page-home a:focus-visible,
.page-home button:focus-visible {
  outline: var(--border-thick) solid var(--color-focus);
  outline-offset: 2px;
}

/* ---------- 上下文条 ---------- */

.page-home .home-context {
  background: var(--color-surface);
  border-bottom: var(--home-rule);
}

.page-home .home-context .breadcrumbs {
  padding: var(--space-2) 0;
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.page-home .home-context__sep {
  margin: 0 var(--space-1);
  color: var(--color-line);
}

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

.page-home .hero {
  border-bottom: var(--home-rule);
}

.page-home .hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 1620px;
  margin: 0 auto;
}

.page-home .hero__aside {
  position: relative;
  overflow: hidden;
  background: var(--color-contrast-surface);
  color: var(--color-contrast-ink);
  padding: var(--section-y) var(--home-gutter);
}

.page-home .hero__aside::before {
  content: "";
  position: absolute;
  inset: -20% -8%;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    repeating-linear-gradient(114deg,
      color-mix(in srgb, var(--color-contrast-accent) 8%, transparent) 0 1px,
      transparent 1px 16px),
    radial-gradient(circle at 22% 28%, color-mix(in srgb, var(--color-contrast-accent) 14%, transparent) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 66%, color-mix(in srgb, var(--color-contrast-accent) 10%, transparent) 0 2px, transparent 3px);
  background-size: auto, 190px 190px, 260px 260px;
  animation: home-drift 24s linear infinite;
}

@keyframes home-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-18px, 0, 0); }
}

.page-home .hero__aside > * {
  position: relative;
  z-index: 1;
}

.page-home .hero__kicker {
  margin: 0 0 var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  color: var(--color-contrast-accent);
}

.page-home .hero__title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--text-display);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.03em;
  color: var(--color-contrast-ink);
}

.page-home .hero__lede {
  max-width: 40ch;
  margin: 0 0 var(--space-6);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: color-mix(in srgb, var(--color-contrast-ink) 84%, transparent);
}

.page-home .hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.page-home .hero__note {
  margin: 0;
  padding-top: var(--space-3);
  border-top: var(--border-thin) solid var(--color-contrast-line);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: color-mix(in srgb, var(--color-contrast-ink) 62%, transparent);
}

.page-home .hero__main {
  background: var(--color-surface-alt);
  padding: var(--home-gutter);
  display: flex;
}

.page-home .hero__figure {
  position: relative;
  flex: 1;
  margin: 0;
  padding: var(--space-1);
  background: var(--color-contrast-surface);
  border: var(--border-thin) solid var(--color-line);
}

.page-home .hero__figure img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 240px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.page-home .hero__cap {
  position: absolute;
  inset: var(--space-1);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-3);
  background: var(--overlay-scrim);
  color: var(--color-contrast-ink);
}

.page-home .hero__cap-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-contrast-accent);
}

.page-home .hero__figure-num {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-figure);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--color-contrast-ink);
}

.page-home .hero__cap-note {
  margin: 0;
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--color-contrast-ink) 78%, transparent);
}

/* ---------- 固定章节索引 ---------- */

.page-home .atlas {
  display: none;
}

.page-home .atlas__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--border-thin);
}

.page-home .atlas__link {
  display: block;
  padding: var(--space-2) 0;
  width: 34px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-decoration: none;
  color: var(--color-contrast-ink);
  background: var(--color-contrast-surface);
  border-left: var(--border-thick) solid transparent;
}

.page-home .atlas__link:hover,
.page-home .atlas__link:focus-visible,
.page-home .atlas__link.is-current {
  border-left-color: var(--color-contrast-accent);
  color: var(--color-contrast-accent);
}

/* ---------- 数字刻度 ---------- */

.page-home .scale__title {
  max-width: 22ch;
  margin: 0 0 var(--space-8);
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
}

.page-home .scale {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.page-home .scale__item {
  padding: var(--space-2) 0;
  border-top: var(--border-thin) solid var(--color-line);
}

.page-home .scale__item--b,
.page-home .scale__item--d {
  padding: var(--space-4);
  border-top: var(--border-thick) solid var(--color-primary);
}

.page-home .scale__item--b {
  background: var(--color-highlight);
}

.page-home .scale__item--d {
  background: var(--color-surface-deep);
}

.page-home .scale__item--a {
  border-top-color: var(--color-accent);
}

.page-home .scale__num {
  margin: 0;
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--color-primary);
}

.page-home .scale__item--b .scale__num {
  font-size: var(--text-4xl);
  color: var(--color-accent);
}

.page-home .scale__item--d .scale__num {
  color: var(--color-ink);
}

.page-home .scale__label {
  margin: var(--space-2) 0 var(--space-1);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-ink);
}

.page-home .scale__desc {
  margin: 0;
  max-width: 46ch;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

/* ---------- 排名速览 ---------- */

.page-home .rank {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

.page-home .rank__lead h2 {
  max-width: 20ch;
  margin: var(--space-2) 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-heading);
  color: var(--color-ink);
}

.page-home .rank__intro {
  max-width: 56ch;
  margin: 0 0 var(--space-6);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-home .rank__figure {
  margin: 0;
}

.page-home .rank__rail {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-2);
}

.page-home .stage {
  flex: 0 0 78%;
  scroll-snap-align: start;
  padding: var(--space-4) var(--space-3);
  background: var(--color-surface);
  border-top: var(--border-thick) solid var(--color-accent);
}

.page-home .stage__no {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-accent);
}

.page-home .stage__name {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-ink);
}

.page-home .stage__text {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-home .stage__meta {
  margin: 0;
  padding-top: var(--space-2);
  border-top: var(--border-thin) solid var(--color-line);
}

/* ---------- 深色档案看板 ---------- */

.page-home .archive__head h2 {
  max-width: 26ch;
  margin: var(--space-2) 0 var(--space-8);
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-heading);
  color: var(--color-contrast-ink);
}

.page-home .archive {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

.page-home .archive__col {
  padding-top: var(--space-4);
  border-top: var(--border-thin) solid var(--color-contrast-line);
}

.page-home .archive__index {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-contrast-accent);
}

.page-home .archive__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-contrast-ink);
}

.page-home .archive__text {
  max-width: 52ch;
  margin: 0 0 var(--space-4);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: color-mix(in srgb, var(--color-contrast-ink) 80%, transparent);
}

.page-home .fields {
  margin: 0 0 var(--space-6);
}

.page-home .fields__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: var(--border-thin) solid var(--color-contrast-line);
}

.page-home .fields__row dt {
  flex: 0 0 8.5em;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-contrast-accent);
}

.page-home .fields__row dd {
  flex: 1 1 12em;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-contrast-ink);
}

.page-home .archive__accordion {
  margin-bottom: var(--space-6);
}

.page-home .archive__accordion .accordion__item {
  border-bottom: var(--border-thin) solid var(--color-contrast-line);
}

.page-home .archive__accordion .accordion__trigger {
  display: block;
  width: 100%;
  padding: var(--space-3) 0;
  text-align: left;
  background: none;
  border: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-contrast-ink);
  cursor: pointer;
}

.page-home .archive__accordion .accordion__trigger::before {
  content: "+ ";
  font-family: var(--font-mono);
  color: var(--color-contrast-accent);
}

.page-home .archive__accordion .accordion__trigger[aria-expanded="true"]::before {
  content: "− ";
}

.page-home .archive__accordion .accordion__panel p {
  margin: 0 0 var(--space-4);
  max-width: 52ch;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: color-mix(in srgb, var(--color-contrast-ink) 78%, transparent);
}

.page-home .archive__col h4 {
  margin: 0;
}

/* ---------- 青训阶梯 ---------- */

.page-home .youth__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

.page-home .youth__intro h2 {
  max-width: 20ch;
  margin: var(--space-2) 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-heading);
  color: var(--color-ink);
}

.page-home .youth__intro p {
  max-width: 66ch;
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-home .youth__figure {
  margin: 0;
}

.page-home .stairs {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  margin: 0 0 var(--space-6);
  padding: 0;
}

.page-home .stair {
  padding: var(--space-3);
  background: var(--color-surface-alt);
  border-top: var(--border-thick) solid var(--color-primary);
}

.page-home .stair__code {
  margin: 0 0 var(--space-2);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-primary);
}

.page-home .stair__name {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-ink);
}

.page-home .stair__tickets {
  margin: 0;
  padding-top: var(--space-2);
  border-top: var(--border-thin) solid var(--color-line);
}

.page-home .youth__foot {
  margin: 0;
  max-width: 74ch;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

/* ---------- 更新与校对 ---------- */

.page-home .ops {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

.page-home .ops__main h2 {
  max-width: 22ch;
  margin: var(--space-2) 0 var(--space-6);
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-heading);
  color: var(--color-ink);
}

.page-home .ops__list {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
}

.page-home .ops__item {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-top: var(--border-thin) solid var(--color-line);
}

.page-home .ops__k {
  flex: 0 0 auto;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-accent);
}

.page-home .ops__n {
  margin: 0 0 var(--space-1);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-ink);
}

.page-home .ops__d {
  margin: 0;
  max-width: 54ch;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-home .ops__note {
  margin: 0;
  max-width: 74ch;
  padding-top: var(--space-4);
  border-top: var(--border-thick) solid var(--color-primary);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-home .ops__figure {
  margin: 0;
  align-self: start;
}

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

@media (min-width: 600px) {
  .page-home .scale__label {
    font-size: var(--text-xl);
  }

  .page-home .stage {
    flex: 0 0 58%;
  }

  .page-home .stairs {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .page-home .hero__grid {
    grid-template-columns: 5fr 7fr;
  }

  .page-home .hero__aside {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--section-y-lg) var(--home-gutter);
  }

  .page-home .hero__main {
    padding: var(--space-8) var(--home-gutter);
  }

  .page-home .hero__figure img {
    min-height: 420px;
  }

  .page-home .scale {
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-6);
    align-items: start;
  }

  .page-home .scale__item--a { grid-column: 1 / 5; grid-row: 1; }
  .page-home .scale__item--b { grid-column: 6 / 13; grid-row: 1; }
  .page-home .scale__item--c { grid-column: 2 / 7; grid-row: 2; }
  .page-home .scale__item--d { grid-column: 8 / 13; grid-row: 2; }

  .page-home .rank {
    grid-template-columns: 7fr 5fr;
    gap: var(--space-8);
  }

  .page-home .rank__rail {
    flex-direction: column;
    overflow: visible;
    padding-bottom: 0;
  }

  .page-home .stage {
    flex: 1 1 auto;
    background: none;
    border-top: var(--border-thin) solid var(--color-line);
    border-left: var(--border-thick) solid var(--color-accent);
    padding: var(--space-3) 0 var(--space-3) var(--space-4);
  }

  .page-home .archive {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-8);
  }

  .page-home .youth__head {
    grid-template-columns: 7fr 5fr;
    align-items: start;
  }

  .page-home .stairs {
    grid-template-columns: repeat(6, 1fr);
    align-items: end;
    gap: var(--space-2);
  }

  .page-home .stair:nth-child(1) { min-height: calc(var(--space-8) * 3); }
  .page-home .stair:nth-child(2) { min-height: calc(var(--space-8) * 3.5); }
  .page-home .stair:nth-child(3) { min-height: calc(var(--space-8) * 4); }
  .page-home .stair:nth-child(4) { min-height: calc(var(--space-8) * 4.5); }
  .page-home .stair:nth-child(5) { min-height: calc(var(--space-8) * 5); }
  .page-home .stair:nth-child(6) { min-height: calc(var(--space-8) * 5.5); }

  .page-home .ops {
    grid-template-columns: 7fr 5fr;
    gap: var(--space-8);
  }
}

@media (min-width: 1280px) {
  .page-home .atlas {
    display: block;
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .hero__aside::before {
    animation: none;
  }
}
</main>
<<<END>>>

等一下——我刚才在末尾把 `</main>` 写进了 CSS 块里。得修掉，不能重写整个回答。让我重新输出正确的版本。其实我该直接把整份回答重发一遍，把错误改掉。

对，重发好了。我把 `</main>` 从 CSS 里删掉，放进 HTML 块里。

我重新生成一下。
<main id="main-content" class="page-home">

  <div class="home-context">
    <div class="container">
      <nav class="breadcrumbs" aria-label="页面位置">
        <span>首页</span>
        <span class="home-context__sep" aria-hidden="true">/</span>
        <span aria-current="page">赛季数据中枢</span>
      </nav>
    </div>
  </div>

  <section class="hero" aria-labelledby="hero-title">
    <div class="hero__grid">
      <div class="hero__aside">
        <p class="hero__kicker">乐鱼体育主站 · 排名与青训双线归档</p>
        <h1 class="hero__title" id="hero-title">赛季排名<br>与青训档案</h1>
        <p class="hero__lede">乐鱼体育把近五个赛季的排名记录、外援名额报名表与伤停补时规则逐条归档，也把 U8 到 U18 六个年龄段的训练安排与季票结构一次列清。所有条目都标注来源口径与更新时点，可按赛季、赛事与阶段检索。</p>
        <div class="hero__actions">
          <a class="btn btn--solid" href="/rankings/">进入积分榜档案</a>
          <a class="btn btn--on-dark" href="/business/">查看业务范围</a>
        </div>
        <p class="hero__note">服务地区 新疆 · 新ICP备35079938号-3</p>
      </div>

      <div class="hero__main">
        <figure class="hero__figure">
          <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="夜间球场灯光下的空旷看台与草皮边缘，画面上叠加半透明数据网格" decoding="async">
          <figcaption class="hero__cap">
            <p class="hero__cap-label">已归档榜单档案</p>
            <p class="hero__figure-num">20</p>
            <p class="hero__cap-note">覆盖 4 项赛事 · 近 5 个赛季 · 18 支参赛球队</p>
          </figcaption>
        </figure>
      </div>
    </div>
  </section>

  <nav class="atlas" aria-label="页内章节索引">
    <ol class="atlas__list">
      <li><a class="atlas__link" href="#scale" data-toc-link>01</a></li>
      <li><a class="atlas__link" href="#rankings-preview" data-toc-link>02</a></li>
      <li><a class="atlas__link" href="#archive" data-toc-link>03</a></li>
      <li><a class="atlas__link" href="#youth" data-toc-link>04</a></li>
      <li><a class="atlas__link" href="#ops" data-toc-link>05</a></li>
    </ol>
  </nav>

  <section class="section section--lg" id="scale" aria-labelledby="scale-title">
    <div class="container">
      <p class="eyebrow">档案纵深</p>
      <h2 class="scale__title" id="scale-title">用四个刻度衡量这块档案的厚度</h2>
      <div class="scale" data-reveal>
        <article class="scale__item scale__item--a">
          <p class="scale__num data-num">4</p>
          <h3 class="scale__label">项赛事分别建档</h3>
          <p class="scale__desc">每项赛事有自己的阶段划分口径，排名记录不跨赛事合并，避免出现口径混用的对照。</p>
        </article>
        <article class="scale__item scale__item--b">
          <p class="scale__num data-num">20</p>
          <h3 class="scale__label">份榜单档案</h3>
          <p class="scale__desc">5 个赛季逐季留档，每份档案保留当时的场次、积分与排名升降幅度，修订不回写历史版本。</p>
        </article>
        <article class="scale__item scale__item--c">
          <p class="scale__num data-num">18</p>
          <h3 class="scale__label">支参赛球队</h3>
          <p class="scale__desc">球队名称与报名表一一对应，位置、名额占用状态与登记轮次在同一份记录里呈现。</p>
        </article>
        <article class="scale__item scale__item--d">
          <p class="scale__num data-num">6</p>
          <h3 class="scale__label">档青训季票</h3>
          <p class="scale__desc">U8 到 U18 每个年龄段一档，每档含单阶段票、整季票与家庭同行票三种票种。</p>
        </article>
      </div>
    </div>
  </section>

  <section class="section section--alt" id="rankings-preview" aria-labelledby="rank-title">
    <div class="container">
      <div class="rank">
        <div class="rank__lead">
          <p class="eyebrow">榜单档案</p>
          <h2 id="rank-title">三个阶段，一条可以倒查的排名线</h2>
          <p class="rank__intro">档案按赛事与阶段分段标注，每条记录包含赛季标识、赛事名称、阶段标签、球队、场次、积分、排名升降幅度与相对更新时间。要核对某一轮的名次变化，先定位阶段，再比对升降幅度即可。LEYU体育赛季积分榜的完整条目在榜单页按目录展开。</p>
          <figure class="figure-box rank__figure">
            <img src="{zhanqunpic:h:667w:1000}" width="1000" height="667" alt="夜间看台上的人群剪影与散射灯光，人物均为背影" loading="lazy" decoding="async">
            <figcaption class="figure-box__caption">看台视角下的赛季现场</figcaption>
          </figure>
        </div>

        <div class="rank__rail">
          <article class="stage">
            <p class="stage__no data-num">01</p>
            <h3 class="stage__name">常规赛中段</h3>
            <p class="stage__text">轮次密度最高的一段，场次与累计积分同步更新，升降幅度以相邻两轮为对照单位。</p>
            <p class="stage__meta meta-note">更新最频繁 · 按轮次入库</p>
          </article>
          <article class="stage">
            <p class="stage__no data-num">02</p>
            <h3 class="stage__name">常规赛收官</h3>
            <p class="stage__text">名次锁定前后会单独标注，各队已赛场次的差异一并留在记录中，不做场次归一化处理。</p>
            <p class="stage__meta meta-note">按轮次更新 · 保留场次差</p>
          </article>
          <article class="stage">
            <p class="stage__no data-num">03</p>
            <h3 class="stage__name">附加赛与季后赛</h3>
            <p class="stage__text">使用独立口径建档，不与常规赛积分合并计算，升降幅度只在同一阶段内部比较。</p>
            <p class="stage__meta meta-note">独立口径 · 不与常规赛合并</p>
          </article>
        </div>
      </div>
    </div>
  </section>

  <section class="section section--contrast" id="archive" aria-labelledby="archive-title">
    <div class="container">
      <header class="archive__head">
        <p class="eyebrow">档案型内容</p>
        <h2 id="archive-title">名额登记与规则版本，两套各自独立的账本</h2>
      </header>

      <div class="archive">
        <article class="archive__col">
          <p class="archive__index data-num">01</p>
          <h3 class="archive__title">外援名额登记</h3>
          <p class="archive__text">按球队报名表逐队登记，单队名额上限 4 人，最近一个完整赛季累计 63 条报名记录。名额占用状态只有三种取值，状态变化需要登记轮次来定位。</p>
          <dl class="fields">
            <div class="fields__row"><dt>球队</dt><dd>按赛季版本记录</dd></div>
            <div class="fields__row"><dt>位置</dt><dd>沿用报名表填写口径</dd></div>
            <div class="fields__row"><dt>名额占用状态</dt><dd>在册 / 替换 / 空缺</dd></div>
            <div class="fields__row"><dt>登记轮次</dt><dd>标注状态生效的那一轮</dd></div>
            <div class="fields__row"><dt>来源说明</dt><dd>注明取自哪一份报名表</dd></div>
          </dl>
          <a class="btn btn--on-dark" href="/rankings/">打开名额登记</a>
        </article>

        <article class="archive__col">
          <p class="archive__index data-num">02</p>
          <h3 class="archive__title">伤停补时规则档案</h3>
          <p class="archive__text">原文件收录至 2024 年修订版，共 12 份档案，时间纵深覆盖 5 个赛季。每份档案都保留修订前后的对照，不覆盖旧版本，方便倒查某一条口径是哪一版引入的。</p>

          <div class="accordion archive__accordion">
            <div class="accordion__item">
              <h4><button class="accordion__trigger" type="button" data-accordion-toggle aria-expanded="false" aria-controls="rule-clock">补时时长按什么口径累加</button></h4>
              <div class="accordion__panel" id="rule-clock">
                <p>补时时长由各段实际停顿累加得出，换人、伤停处理、进球庆祝与视频回看分别计入不同分段，档案里逐段列出换算方式。</p>
              </div>
            </div>
            <div class="accordion__item">
              <h4><button class="accordion__trigger" type="button" data-accordion-toggle aria-expanded="false" aria-controls="rule-subs">暂停与换人如何折算</button></h4>
              <div class="accordion__panel" id="rule-subs">
                <p>换人折算与暂停时长分开列示，同一场比赛内的多次换人不做合并计入，档案保留每次换人的对应时段。</p>
              </div>
            </div>
            <div class="accordion__item">
              <h4><button class="accordion__trigger" type="button" data-accordion-toggle aria-expanded="false" aria-controls="rule-dispute">出现争议走什么流程</button></h4>
              <div class="accordion__panel" id="rule-dispute">
                <p>争议处理流程写在同一份档案内，包含受理范围、需要提交的记录项与对照版本。流程本身属于规则条目，不属于本站的判断。</p>
              </div>
            </div>
          </div>

          <a class="btn btn--on-dark" href="/faq/">查看规则问答</a>
        </article>
      </div>
    </div>
  </section>

  <section class="section section--lg" id="youth" aria-labelledby="youth-title">
    <div class="container">
      <div class="youth__head">
        <div class="youth__intro">
          <p class="eyebrow">青训梯队</p>
          <h2 id="youth-title">六个年龄段的季票阶梯</h2>
          <p>梯队设 U8、U10、U12、U14、U16、U18 六个年龄段，注册学员 540 人，教练与保障人员 68 人，训练基地 3 处。季票按年龄段分 6 档，每档提供单阶段票、整季票与家庭同行票 3 种票种，共 18 种组合，权益含固定看台区域、训练开放日名额与成长档案查询。年龄越高，训练安排越接近比赛节奏，票档覆盖的场次也随之增加。</p>
        </div>
        <figure class="figure-box figure-box--wide youth__figure">
          <img src="{zhanqunpic:h:600w:900}" width="900" height="600" alt="青训少年在傍晚训练场做基础动作，画面偏冷调并叠有淡淡水纹" loading="lazy" decoding="async">
          <figcaption class="figure-box__caption">傍晚训练场上的梯队课程</figcaption>
        </figure>
      </div>

      <ol class="stairs">
        <li class="stair">
          <p class="stair__code data-num">U8</p>
          <p class="stair__name">基础动作与游戏化课程</p>
          <p class="stair__tickets meta-note">3 种票种</p>
        </li>
        <li class="stair">
          <p class="stair__code data-num">U10</p>
          <p class="stair__name">球感与小组配合</p>
          <p class="stair__tickets meta-note">3 种票种</p>
        </li>
        <li class="stair">
          <p class="stair__code data-num">U12</p>
          <p class="stair__name">位置认知与对抗基础</p>
          <p class="stair__tickets meta-note">3 种票种</p>
        </li>
        <li class="stair">
          <p class="stair__code data-num">U14</p>
          <p class="stair__name">战术执行与体能分配</p>
          <p class="stair__tickets meta-note">3 种票种</p>
        </li>
        <li class="stair">
          <p class="stair__code data-num">U16</p>
          <p class="stair__name">比赛节奏与专项训练</p>
          <p class="stair__tickets meta-note">3 种票种</p>
        </li>
        <li class="stair">
          <p class="stair__code data-num">U18</p>
          <p class="stair__name">预备队衔接课程</p>
          <p class="stair__tickets meta-note">3 种票种</p>
        </li>
      </ol>

      <p class="youth__foot"><a class="link-inline" href="/business/">业务范围</a>里按档位列出票种差异与开放日安排，<a class="link-inline" href="/faq/">常见问题</a>里集中处理报名与权益有效期一类的疑问。</p>
    </div>
  </section>

  <section class="section section--alt" id="ops" aria-labelledby="ops-title">
    <div class="container">
      <div class="ops">
        <div class="ops__main">
          <p class="eyebrow">更新与校对</p>
          <h2 id="ops-title">什么时间更新，由谁来校对</h2>
          <ul class="ops__list">
            <li class="ops__item">
              <p class="ops__k data-num">01</p>
              <div>
                <h3 class="ops__n">榜单按轮次更新</h3>
                <p class="ops__d">每轮结束后录入场次与积分，升降幅度同步刷新，不积压到阶段末统一补录。</p>
              </div>
            </li>
            <li class="ops__item">
              <p class="ops__k data-num">02</p>
              <div>
                <h3 class="ops__n">报名表在窗口结束后同步</h3>
                <p class="ops__d">外援名额登记在报名窗口关闭后的 48 小时内完成录入，状态变更保留登记轮次。</p>
              </div>
            </li>
            <li class="ops__item">
              <p class="ops__k data-num">03</p>
              <div>
                <h3 class="ops__n">规则档案随修订入库</h3>
                <p class="ops__d">新修订版本入库后旧版本仍然可查，修订对照随档案一并呈现。</p>
              </div>
            </li>
            <li class="ops__item">
              <p class="ops__k data-num">04</p>
              <div>
                <h3 class="ops__n">季票信息在赛季前统一发布</h3>
                <p class="ops__d">档位、票种与权益在赛季开始前一次性公布，赛季中变更另行标注生效时间。</p>
              </div>
            </li>
          </ul>

          <p class="ops__note">内容团队 24 人，其中数据校对 8 人、青训服务 6 人，另有合作青训机构 12 家。站点已连续更新 6 个赛季，公开条目总量 1800 余条，其中榜单与赛况条目 960 条。运营方式与内容边界写在<a class="link-inline" href="/about/">关于我们</a>，资料更正与栏目建议请走<a class="link-inline" href="/contact/">联系我们</a>，信息处理规则见<a class="link-inline" href="/privacy-policy/">隐私政策</a>。</p>
        </div>

        <figure class="figure-box ops__figure">
          <img src="{zhanqunpic:h:560w:800}" width="800" height="560" alt="编辑工作台上摊开的纸质记录与屏幕上的等宽数字列表，画面中无人物面部" loading="lazy" decoding="async">
          <figcaption class="figure-box__caption">榜单录入与二次核对</figcaption>
        </figure>
      </div>
    </div>
  </section>

</main>

.page-home {
  --home-gutter: clamp(var(--space-3), 4vw, var(--space-8));
  --home-rule: var(--border-thin) solid var(--color-line);
  display: block;
}

.page-home .link-inline {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: var(--border-thin) solid currentColor;
}

.page-home .link-inline:hover,
.page-home .link-inline:focus-visible {
  background: var(--color-highlight);
}

.page-home a:focus-visible,
.page-home button:focus-visible {
  outline: var(--border-thick) solid var(--color-focus);
  outline-offset: 2px;
}

/* ---------- 上下文条 ---------- */

.page-home .home-context {
  background: var(--color-surface);
  border-bottom: var(--home-rule);
}

.page-home .home-context .breadcrumbs {
  padding: var(--space-2) 0;
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.page-home .home-context__sep {
  margin: 0 var(--space-1);
  color: var(--color-line);
}

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

.page-home .hero {
  border-bottom: var(--home-rule);
}

.page-home .hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 1620px;
  margin: 0 auto;
}

.page-home .hero__aside {
  position: relative;
  overflow: hidden;
  background: var(--color-contrast-surface);
  color: var(--color-contrast-ink);
  padding: var(--section-y) var(--home-gutter);
}

.page-home .hero__aside::before {
  content: "";
  position: absolute;
  inset: -20% -8%;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    repeating-linear-gradient(114deg,
      color-mix(in srgb, var(--color-contrast-accent) 8%, transparent) 0 1px,
      transparent 1px 16px),
    radial-gradient(circle at 22% 28%, color-mix(in srgb, var(--color-contrast-accent) 14%, transparent) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 66%, color-mix(in srgb, var(--color-contrast-accent) 10%, transparent) 0 2px, transparent 3px);
  background-size: auto, 190px 190px, 260px 260px;
  animation: home-drift 24s linear infinite;
}

@keyframes home-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-18px, 0, 0); }
}

.page-home .hero__aside > * {
  position: relative;
  z-index: 1;
}

.page-home .hero__kicker {
  margin: 0 0 var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  color: var(--color-contrast-accent);
}

.page-home .hero__title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--text-display);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.03em;
  color: var(--color-contrast-ink);
}

.page-home .hero__lede {
  max-width: 40ch;
  margin: 0 0 var(--space-6);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: color-mix(in srgb, var(--color-contrast-ink) 84%, transparent);
}

.page-home .hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.page-home .hero__note {
  margin: 0;
  padding-top: var(--space-3);
  border-top: var(--border-thin) solid var(--color-contrast-line);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: color-mix(in srgb, var(--color-contrast-ink) 62%, transparent);
}

.page-home .hero__main {
  background: var(--color-surface-alt);
  padding: var(--home-gutter);
  display: flex;
}

.page-home .hero__figure {
  position: relative;
  flex: 1;
  margin: 0;
  padding: var(--space-1);
  background: var(--color-contrast-surface);
  border: var(--border-thin) solid var(--color-line);
}

.page-home .hero__figure img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 240px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.page-home .hero__cap {
  position: absolute;
  inset: var(--space-1);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-3);
  background: var(--overlay-scrim);
  color: var(--color-contrast-ink);
}

.page-home .hero__cap-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-contrast-accent);
}

.page-home .hero__figure-num {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-figure);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--color-contrast-ink);
}

.page-home .hero__cap-note {
  margin: 0;
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--color-contrast-ink) 78%, transparent);
}

/* ---------- 固定章节索引 ---------- */

.page-home .atlas {
  display: none;
}

.page-home .atlas__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--border-thin);
}

.page-home .atlas__link {
  display: block;
  padding: var(--space-2) 0;
  width: 34px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-decoration: none;
  color: var(--color-contrast-ink);
  background: var(--color-contrast-surface);
  border-left: var(--border-thick) solid transparent;
}

.page-home .atlas__link:hover,
.page-home .atlas__link:focus-visible,
.page-home .atlas__link.is-current {
  border-left-color: var(--color-contrast-accent);
  color: var(--color-contrast-accent);
}

/* ---------- 数字刻度 ---------- */

.page-home .scale__title {
  max-width: 22ch;
  margin: 0 0 var(--space-8);
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
}

.page-home .scale {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.page-home .scale__item {
  padding: var(--space-2) 0;
  border-top: var(--border-thin) solid var(--color-line);
}

.page-home .scale__item--a {
  border-top-color: var(--color-accent);
}

.page-home .scale__item--b,
.page-home .scale__item--d {
  padding: var(--space-4);
  border-top: var(--border-thick) solid var(--color-primary);
}

.page-home .scale__item--b {
  background: var(--color-highlight);
}

.page-home .scale__item--d {
  background: var(--color-surface-deep);
}

.page-home .scale__num {
  margin: 0;
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--color-primary);
}

.page-home .scale__item--b .scale__num {
  font-size: var(--text-4xl);
  color: var(--color-accent);
}

.page-home .scale__item--d .scale__num {
  color: var(--color-ink);
}

.page-home .scale__label {
  margin: var(--space-2) 0 var(--space-1);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-ink);
}

.page-home .scale__desc {
  margin: 0;
  max-width: 46ch;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

/* ---------- 排名速览 ---------- */

.page-home .rank {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

.page-home .rank__lead h2 {
  max-width: 20ch;
  margin: var(--space-2) 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-heading);
  color: var(--color-ink);
}

.page-home .rank__intro {
  max-width: 56ch;
  margin: 0 0 var(--space-6);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-home .rank__figure {
  margin: 0;
}

.page-home .rank__rail {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-2);
}

.page-home .stage {
  flex: 0 0 78%;
  scroll-snap-align: start;
  padding: var(--space-4) var(--space-3);
  background: var(--color-surface);
  border-top: var(--border-thick) solid var(--color-accent);
}

.page-home .stage__no {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-accent);
}

.page-home .stage__name {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-ink);
}

.page-home .stage__text {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-home .stage__meta {
  margin: 0;
  padding-top: var(--space-2);
  border-top: var(--border-thin) solid var(--color-line);
}

/* ---------- 深色档案看板 ---------- */

.page-home .archive__head h2 {
  max-width: 26ch;
  margin: var(--space-2) 0 var(--space-8);
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-heading);
  color: var(--color-contrast-ink);
}

.page-home .archive {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

.page-home .archive__col {
  padding-top: var(--space-4);
  border-top: var(--border-thin) solid var(--color-contrast-line);
}

.page-home .archive__index {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-contrast-accent);
}

.page-home .archive__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-contrast-ink);
}

.page-home .archive__text {
  max-width: 52ch;
  margin: 0 0 var(--space-4);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: color-mix(in srgb, var(--color-contrast-ink) 80%, transparent);
}

.page-home .fields {
  margin: 0 0 var(--space-6);
}

.page-home .fields__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: var(--border-thin) solid var(--color-contrast-line);
}

.page-home .fields__row dt {
  flex: 0 0 8.5em;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-contrast-accent);
}

.page-home .fields__row dd {
  flex: 1 1 12em;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-contrast-ink);
}

.page-home .archive__accordion {
  margin-bottom: var(--space-6);
}

.page-home .archive__accordion .accordion__item {
  border-bottom: var(--border-thin) solid var(--color-contrast-line);
}

.page-home .archive__col h4 {
  margin: 0;
}

.page-home .archive__accordion .accordion__trigger {
  display: block;
  width: 100%;
  padding: var(--space-3) 0;
  text-align: left;
  background: none;
  border: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-contrast-ink);
  cursor: pointer;
}

.page-home .archive__accordion .accordion__trigger::before {
  content: "+ ";
  font-family: var(--font-mono);
  color: var(--color-contrast-accent);
}

.page-home .archive__accordion .accordion__trigger[aria-expanded="true"]::before {
  content: "− ";
}

.page-home .archive__accordion .accordion__panel p {
  margin: 0 0 var(--space-4);
  max-width: 52ch;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: color-mix(in srgb, var(--color-contrast-ink) 78%, transparent);
}

/* ---------- 青训阶梯 ---------- */

.page-home .youth__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

.page-home .youth__intro h2 {
  max-width: 20ch;
  margin: var(--space-2) 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-heading);
  color: var(--color-ink);
}

.page-home .youth__intro p {
  max-width: 66ch;
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-home .youth__figure {
  margin: 0;
}

.page-home .stairs {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  margin: 0 0 var(--space-6);
  padding: 0;
}

.page-home .stair {
  padding: var(--space-3);
  background: var(--color-surface-alt);
  border-top: var(--border-thick) solid var(--color-primary);
}

.page-home .stair__code {
  margin: 0 0 var(--space-2);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-primary);
}

.page-home .stair__name {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-ink);
}

.page-home .stair__tickets {
  margin: 0;
  padding-top: var(--space-2);
  border-top: var(--border-thin) solid var(--color-line);
}

.page-home .youth__foot {
  margin: 0;
  max-width: 74ch;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

/* ---------- 更新与校对 ---------- */

.page-home .ops {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

.page-home .ops__main h2 {
  max-width: 22ch;
  margin: var(--space-2) 0 var(--space-6);
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-heading);
  color: var(--color-ink);
}

.page-home .ops__list {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
}

.page-home .ops__item {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-top: var(--border-thin) solid var(--color-line);
}

.page-home .ops__k {
  flex: 0 0 auto;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-accent);
}

.page-home .ops__n {
  margin: 0 0 var(--space-1);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-ink);
}

.page-home .ops__d {
  margin: 0;
  max-width: 54ch;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-home .ops__note {
  margin: 0;
  max-width: 74ch;
  padding-top: var(--space-4);
  border-top: var(--border-thick) solid var(--color-primary);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

.page-home .ops__figure {
  margin: 0;
  align-self: start;
}

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

@media (min-width: 600px) {
  .page-home .scale__label {
    font-size: var(--text-xl);
  }

  .page-home .stage {
    flex: 0 0 58%;
  }

  .page-home .stairs {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .page-home .hero__grid {
    grid-template-columns: 5fr 7fr;
  }

  .page-home .hero__aside {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--section-y-lg) var(--home-gutter);
  }

  .page-home .hero__main {
    padding: var(--space-8) var(--home-gutter);
  }

  .page-home .hero__figure img {
    min-height: 420px;
  }

  .page-home .scale {
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-6);
    align-items: start;
  }

  .page-home .scale__item--a { grid-column: 1 / 5; grid-row: 1; }
  .page-home .scale__item--b { grid-column: 6 / 13; grid-row: 1; }
  .page-home .scale__item--c { grid-column: 2 / 7; grid-row: 2; }
  .page-home .scale__item--d { grid-column: 8 / 13; grid-row: 2; }

  .page-home .rank {
    grid-template-columns: 7fr 5fr;
    gap: var(--space-8);
  }

  .page-home .rank__rail {
    flex-direction: column;
    overflow: visible;
    padding-bottom: 0;
  }

  .page-home .stage {
    flex: 1 1 auto;
    background: none;
    border-top: var(--border-thin) solid var(--color-line);
    border-left: var(--border-thick) solid var(--color-accent);
    padding: var(--space-3) 0 var(--space-3) var(--space-4);
  }

  .page-home .archive {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-8);
  }

  .page-home .youth__head {
    grid-template-columns: 7fr 5fr;
    align-items: start;
  }

  .page-home .stairs {
    grid-template-columns: repeat(6, 1fr);
    align-items: end;
    gap: var(--space-2);
  }

  .page-home .stair:nth-child(1) { min-height: calc(var(--space-8) * 3); }
  .page-home .stair:nth-child(2) { min-height: calc(var(--space-8) * 3.5); }
  .page-home .stair:nth-child(3) { min-height: calc(var(--space-8) * 4); }
  .page-home .stair:nth-child(4) { min-height: calc(var(--space-8) * 4.5); }
  .page-home .stair:nth-child(5) { min-height: calc(var(--space-8) * 5); }
  .page-home .stair:nth-child(6) { min-height: calc(var(--space-8) * 5.5); }

  .page-home .ops {
    grid-template-columns: 7fr 5fr;
    gap: var(--space-8);
  }
}

@media (min-width: 1280px) {
  .page-home .atlas {
    display: block;
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .hero__aside::before {
    animation: none;
  }
}