.page-about {
  --about-gap: clamp(18px, 3vw, 40px);
  --about-dark-line: rgba(246, 240, 226, 0.22);
  background: var(--cream);
  color: var(--brown);
  font-family: var(--font-body);
  line-height: 1.65;
  overflow-x: clip;
}

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

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

.page-about h1,
.page-about h2,
.page-about h3,
.page-about p {
  margin-top: 0;
}

.page-about .about-opening {
  padding-block: clamp(20px, 5vw, 56px) clamp(34px, 6vw, 78px);
}

.page-about .about-opening__grid {
  display: grid;
  gap: clamp(30px, 6vw, 64px);
  align-items: end;
}

.page-about .about-opening__copy {
  min-width: 0;
}

.page-about .breadcrumb {
  margin-bottom: clamp(28px, 5vw, 58px);
}

.page-about .about-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 18px;
  color: var(--sage);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page-about .about-kicker .index-label {
  color: var(--ink);
  font-weight: 700;
}

.page-about h1 {
  max-width: 13ch;
  margin-bottom: 22px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 10vw, 6.4rem);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.045em;
  overflow-wrap: anywhere;
}

.page-about .about-lead {
  max-width: 54ch;
  margin-bottom: 28px;
  color: var(--brown);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  line-height: 1.75;
}

.page-about .about-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 26px;
  padding-block: 16px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.page-about .about-stat {
  min-width: 0;
  padding-right: 8px;
}

.page-about .about-stat + .about-stat {
  padding-left: 10px;
  border-left: 1px solid var(--rule);
}

.page-about .about-stat__num {
  display: block;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: clamp(1.55rem, 4.4vw, 2.8rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.06em;
}

.page-about .about-stat__label {
  display: block;
  margin-top: 7px;
  color: var(--sage);
  font-size: 0.72rem;
  line-height: 1.35;
}

.page-about .about-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.page-about .about-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .about-chips .chip {
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}

.page-about .about-figure {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: clamp(12px, 2vw, 20px);
  background: var(--ink);
  color: var(--bone);
  clip-path: polygon(0 var(--cut), 100% 0, 100% calc(100% - var(--cut)), 0 100%);
}

.page-about .about-figure__frame {
  padding: 9px;
  border: 1px solid var(--dark-line);
}

.page-about .about-figure__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.page-about .about-figure__caption {
  margin-top: 12px;
  color: var(--flesh);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.55;
}

.page-about .about-figure__caption span {
  margin-right: 8px;
  color: var(--lime);
  letter-spacing: 0.08em;
}

.page-about .about-layout {
  display: grid;
  gap: clamp(34px, 5vw, 56px);
  padding-bottom: clamp(54px, 8vw, 96px);
}

.page-about .about-index {
  min-width: 0;
  padding-top: 13px;
  border-top: 3px solid var(--ink);
}

.page-about .about-index__label {
  margin-bottom: 12px;
  color: var(--sage);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.page-about .about-index__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .about-index__link {
  display: grid;
  grid-template-columns: 2.1em minmax(0, 1fr);
  gap: 6px;
  align-items: baseline;
  padding-block: 9px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.page-about .about-index__link span {
  color: var(--sage);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 400;
}

.page-about .about-index__link:hover,
.page-about .about-index__link:focus-visible {
  color: var(--kiwi);
  border-bottom-color: var(--kiwi);
}

.page-about .about-index__note {
  margin: 18px 0 0;
  padding: 12px 14px;
  border-left: 4px solid var(--lime);
  background: var(--ink);
  color: var(--bone);
  font-size: 0.75rem;
  line-height: 1.45;
}

.page-about .about-index__note strong {
  display: block;
  margin-top: 3px;
  color: var(--lime);
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: -0.02em;
}

.page-about .about-content {
  display: grid;
  gap: clamp(58px, 9vw, 104px);
  min-width: 0;
}

.page-about .about-section {
  min-width: 0;
  scroll-margin-top: 100px;
}

.page-about .about-section__head {
  max-width: 760px;
  margin-bottom: clamp(22px, 4vw, 38px);
}

.page-about .about-section__head .eyebrow {
  margin-bottom: 10px;
  color: var(--kiwi);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.page-about .about-section__title {
  max-width: 15ch;
  margin-bottom: 16px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5vw, 3.6rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.page-about .about-section__lead {
  max-width: 65ch;
  margin-bottom: 0;
  color: var(--sage);
  font-size: 0.98rem;
  line-height: 1.75;
}

.page-about .about-scenes {
  display: grid;
  gap: 16px;
}

.page-about .about-scene {
  min-width: 0;
  padding: clamp(20px, 4vw, 32px);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--kiwi);
  background: var(--bone);
}

.page-about .about-scene--season {
  border-top-color: var(--orange);
}

.page-about .about-scene .tag {
  margin-bottom: 16px;
}

.page-about .about-scene__title {
  margin-bottom: 12px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-weight: 800;
  line-height: 1.15;
}

.page-about .about-scene__text {
  margin-bottom: 14px;
  color: var(--brown);
  font-size: 0.92rem;
}

.page-about .about-scene__text:last-of-type {
  margin-bottom: 18px;
}

.page-about .about-list,
.page-about .about-work__list {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.page-about .about-list li,
.page-about .about-work__list li {
  position: relative;
  padding-left: 1.15em;
  color: var(--brown);
  font-size: 0.88rem;
  line-height: 1.55;
}

.page-about .about-list li + li,
.page-about .about-work__list li + li {
  margin-top: 8px;
}

.page-about .about-list li::before,
.page-about .about-work__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 6px;
  background: var(--kiwi);
  transform: rotate(45deg);
}

.page-about .about-inline-link {
  display: inline-block;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--kiwi);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.page-about .about-inline-link:hover,
.page-about .about-inline-link:focus-visible {
  color: var(--kiwi);
}

.page-about .about-timeline-media {
  margin: 0 0 clamp(24px, 4vw, 40px);
  padding: 10px;
  background: var(--ink);
}

.page-about .about-timeline-media img {
  width: 100%;
  aspect-ratio: 14 / 6;
  object-fit: cover;
}

.page-about .about-timeline-media figcaption {
  margin-top: 10px;
  color: var(--flesh);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.5;
}

.page-about .about-timeline {
  position: relative;
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .about-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 19px;
  width: 2px;
  background: linear-gradient(var(--kiwi), var(--lime));
}

.page-about .about-timeline__entry {
  position: relative;
  min-width: 0;
}

.page-about .about-timeline__item {
  border: 1px solid var(--rule);
  background: var(--bone);
}

.page-about .about-timeline__summary {
  position: relative;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px 12px;
  align-items: center;
  padding: 16px 42px 16px 48px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.page-about .about-timeline__summary::-webkit-details-marker {
  display: none;
}

.page-about .about-timeline__summary::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 13px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--ink);
  background: var(--lime);
  transform: translateY(-50%) rotate(45deg);
}

.page-about .about-timeline__summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 17px;
  color: var(--kiwi);
  font-family: var(--font-mono);
  font-size: 1.25rem;
  line-height: 1;
  transform: translateY(-50%);
}

.page-about .about-timeline__item[open] .about-timeline__summary::after {
  content: "−";
}

.page-about .about-timeline__stage {
  justify-self: start;
  padding: 3px 7px;
  background: var(--ink);
  color: var(--lime);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.page-about .about-timeline__title {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.4;
}

.page-about .about-timeline__body {
  padding: 0 18px 17px 48px;
}

.page-about .about-timeline__body p {
  margin: 0;
  color: var(--brown);
  font-size: 0.88rem;
  line-height: 1.7;
}

.page-about .about-work__grid {
  display: grid;
  gap: clamp(24px, 5vw, 44px);
  align-items: start;
}

.page-about .about-work__copy {
  min-width: 0;
}

.page-about .about-work__copy .eyebrow {
  margin-bottom: 10px;
  color: var(--kiwi);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.page-about .about-work__copy .about-section__title {
  max-width: 18ch;
}

.page-about .about-work__copy p {
  color: var(--brown);
  font-size: 0.94rem;
  line-height: 1.75;
}

.page-about .about-work__figure {
  margin: 0;
  padding: 10px;
  background: var(--kiwi);
}

.page-about .about-work__figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.page-about .about-work__figure figcaption {
  margin-top: 10px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.5;
}

.page-about .about-section--dark {
  padding: clamp(26px, 5vw, 56px);
  background: var(--ink);
  color: var(--bone);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
}

.page-about .about-section--dark .about-section__title {
  color: var(--bone);
}

.page-about .about-section--dark .about-section__lead {
  color: rgba(255, 253, 246, 0.75);
}

.page-about .about-section--dark .eyebrow {
  color: var(--lime);
}

.page-about .about-team__grid {
  display: grid;
  gap: 20px;
}

.page-about .about-role {
  min-width: 0;
  padding-top: 16px;
  border-top: 1px solid var(--dark-line);
}

.page-about .about-role__index {
  display: block;
  margin-bottom: 14px;
  color: var(--lime);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
}

.page-about .about-role__title {
  margin-bottom: 10px;
  color: var(--bone);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
}

.page-about .about-role__text {
  margin-bottom: 0;
  color: rgba(255, 253, 246, 0.76);
  font-size: 0.88rem;
  line-height: 1.7;
}

.page-about .about-rhythm {
  display: grid;
  gap: 12px;
  margin-top: clamp(28px, 5vw, 46px);
  padding-top: 20px;
  border-top: 1px solid var(--dark-line);
}

.page-about .about-rhythm__item {
  min-width: 0;
  padding-left: 12px;
  border-left: 2px solid var(--kiwi);
}

.page-about .about-rhythm__step {
  display: block;
  color: var(--lime);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}

.page-about .about-rhythm__label {
  display: block;
  margin-top: 4px;
  color: var(--bone);
  font-size: 0.8rem;
  line-height: 1.45;
}

.page-about .about-promises {
  display: grid;
  gap: 12px;
}

.page-about .about-promise {
  border: 1px solid var(--rule);
  background: var(--bone);
}

.page-about .about-promise__summary {
  position: relative;
  padding: 16px 48px 16px 18px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.page-about .about-promise__summary::-webkit-details-marker {
  display: none;
}

.page-about .about-promise__summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 17px;
  color: var(--orange);
  font-family: var(--font-mono);
  font-size: 1.2rem;
  line-height: 1;
  transform: translateY(-50%);
}

.page-about .about-promise[open] .about-promise__summary::after {
  content: "−";
}

.page-about .about-promise__title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.2;
}

.page-about .about-promise__body {
  padding: 0 18px 18px;
}

.page-about .about-promise__body p {
  margin: 0;
  color: var(--brown);
  font-size: 0.88rem;
  line-height: 1.7;
}

.page-about .about-next {
  padding-block: clamp(34px, 6vw, 72px);
  background: var(--lime);
  color: var(--ink);
}

.page-about .about-next .eyebrow {
  margin-bottom: 10px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.page-about .about-next h2 {
  max-width: 18ch;
  margin-bottom: 14px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}

.page-about .about-next p {
  max-width: 64ch;
  margin-bottom: 22px;
  color: var(--ink);
  font-size: 0.94rem;
  line-height: 1.7;
}

.page-about .about-next__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (min-width: 720px) {
  .page-about .about-index__list {
    grid-template-columns: 1fr;
  }

  .page-about .about-scenes,
  .page-about .about-promises {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-about .about-team__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }

  .page-about .about-rhythm {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-about .about-work__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}

@media (min-width: 960px) {
  .page-about .about-opening__grid {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  }

  .page-about .about-layout {
    grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
    align-items: start;
  }

  .page-about .about-index {
    position: sticky;
    top: 24px;
  }

  .page-about .about-content {
    max-width: 820px;
    justify-self: end;
    width: 100%;
  }

  .page-about .about-work__copy {
    padding-top: 6px;
  }
}
</PAGE_CSS>>>

<main id="main-content" class="page-about">
  <section class="about-opening" aria-labelledby="about-title">
    <div class="wrap about-opening__grid">
      <div class="about-opening__copy">
        <nav class="breadcrumb" aria-label="面包屑">
          <ol class="breadcrumb__list">
            <li class="breadcrumb__item"><a class="breadcrumb__link" href="/">首页</a></li>
            <li class="breadcrumb__item"><span class="breadcrumb__current" aria-current="page">品牌价值</span></li>
          </ol>
        </nav>

        <p class="about-kicker"><span class="index-label">品牌别册</span> 多联赛比分与球队订阅 · 当前第30轮区间</p>
        <h1 id="about-title">把查比分这件事，做得更快，也更顺手</h1>
        <p class="about-lead">奇异果赛场服务中文体育迷：临时打开，按联赛和轮次快速找到第30轮比分；想跟一个赛季，三步订阅球队，把提醒留在手机里。我们把导航、比分和说明放在清楚的位置，让看球这件事少一点绕路。</p>

        <div class="about-stats" aria-label="奇异果赛场内容概览">
          <div class="about-stat">
            <span class="about-stat__num">6</span>
            <span class="about-stat__label">类联赛内容</span>
          </div>
          <div class="about-stat">
            <span class="about-stat__num">28</span>
            <span class="about-stat__label">支球队订阅卡</span>
          </div>
          <div class="about-stat">
            <span class="about-stat__num">320+</span>
            <span class="about-stat__label">篇赛季观察与说明</span>
          </div>
        </div>

        <div class="about-actions">
          <a class="btn btn--orange" href="/solutions/">查看三步订阅</a>
          <a class="btn btn--ghost" href="/questions/">下载与登录指引</a>
        </div>

        <ul class="about-chips" aria-label="覆盖的联赛类型">
          <li class="chip">足球</li>
          <li class="chip">篮球</li>
          <li class="chip">网球</li>
          <li class="chip">排球</li>
          <li class="chip">手球</li>
          <li class="chip">电竞</li>
        </ul>
      </div>

      <figure class="about-figure">
        <div class="about-figure__frame">
          <img class="about-figure__img" src="{zhanqunpic:h:1500w:1200}" width="1200" height="1500" alt="奶油纸底上的深绿赛场斜切与奇异果籽抽象画册主视觉">
        </div>
        <figcaption class="about-figure__caption"><span>品牌画册 / 跨页</span> 夜场灯下的比分窗口，把联赛、轮次和球队放进同一幅画面。</figcaption>
      </figure>
    </div>
  </section>

  <div class="wrap about-layout">
    <aside class="about-index" aria-label="章节目录">
      <p class="about-index__label">品牌别册 · 目录</p>
      <ol class="about-index__list">
        <li><a class="about-index__link" href="#scenes"><span>01</span>两种打开方式</a></li>
        <li><a class="about-index__link" href="#timeline"><span>02</span>栏目演进</a></li>
        <li><a class="about-index__link" href="#work"><span>03</span>更新方式</a></li>
        <li><a class="about-index__link" href="#team"><span>04</span>谁在做</a></li>
        <li><a class="about-index__link" href="#promise"><span>05</span>品牌承诺</a></li>
      </ol>
      <p class="about-index__note">当前赛季阶段<strong>第30轮区间</strong></p>
    </aside>

    <div class="about-content">
      <section id="scenes" class="about-section" aria-labelledby="scenes-title" data-reveal>
        <div class="about-section__head">
          <p class="eyebrow">01 / 两种打开方式</p>
          <h2 class="about-section__title" id="scenes-title">临时查一眼，和整个赛季跟着走</h2>
          <p class="about-section__lead">同一群球迷，有时只想确认一场比分，有时想把一支球队从头跟到尾。奇异果赛场把这两种打开方式分开设计，也放在同一条路径上。</p>
        </div>

        <div class="about-scenes">
          <article class="about-scene about-scene--quick">
            <span class="tag tag--lime">临时查比分</span>
            <h3 class="about-scene__title">先看到比分，再决定看哪场</h3>
            <p class="about-scene__text">打开首页就能看到第30轮区间的比分摘要。分联赛胶囊轨道把足球、篮球、网球、排球、手球和电竞分开列好，切换项目不用层层返回。</p>
            <ul class="about-list">
              <li>按联赛切换，先锁定你关心的赛场。</li>
              <li>按第1至第30轮区间定位，翻找更直接。</li>
              <li>比分数字大字号排布，比赛间隙扫一眼就够。</li>
            </ul>
          </article>

          <article class="about-scene about-scene--season">
            <span class="tag tag--orange">赛季跟队</span>
            <h3 class="about-scene__title">把关注的球队收进提醒里</h3>
            <p class="about-scene__text">常看的球队值得一个固定入口。选好联赛和球队，确认提醒偏好，再完成 iOS 下载并开启比分提醒，三步之后不用每次重新搜索。</p>
            <p class="about-scene__text">赛季推进时，比分摘要和轮次标签继续更新，球队订阅卡按联赛分组展示，想看的队伍更容易被记住。</p>
            <a class="about-inline-link" href="/solutions/">了解球队订阅与 iOS 入口 →</a>
          </article>
        </div>
      </section>

      <section id="timeline" class="about-section about-section--timeline" aria-labelledby="timeline-title" data-reveal>
        <div class="about-section__head">
          <p class="eyebrow">02 / 栏目演进</p>
          <h2 class="about-section__title" id="timeline-title">从单场入口，到一张能扫读的联赛地图</h2>
          <p class="about-section__lead">奇异果赛场不是一开始就把所有内容摊在首页。我们先解决“比分在哪”，再解决“不同联赛怎么找”，最后把下载、登录和订阅说明放到顺手的位置。</p>
        </div>

        <figure class="about-timeline-media">
          <img src="{zhanqunpic:h:600w:1400}" width="1400" height="600" alt="多联赛导航与轮次标签组成的时间轴抽象图" loading="lazy" decoding="async">
          <figcaption>栏目结构沿着赛季推进展开：单场入口、多联赛导航、专区说明与比分带逐步连成一条线。</figcaption>
        </figure>

        <ol class="about-timeline">
          <li class="about-timeline__entry">
            <details class="about-timeline__item">
              <summary class="about-timeline__summary">
                <span class="about-timeline__stage">起版</span>
                <span class="about-timeline__title">先把比分查清楚</span>
              </summary>
              <div class="about-timeline__body">
                <p>最早只做一件事：把正在进行的比赛结果放在首页最显眼的位置。页面轻、路径短，适合比赛间隙打开看一眼。</p>
              </div>
            </details>
          </li>
          <li class="about-timeline__entry">
            <details class="about-timeline__item">
              <summary class="about-timeline__summary">
                <span class="about-timeline__stage">多联赛</span>
                <span class="about-timeline__title">导航第二栏成为联赛直入通道</span>
              </summary>
              <div class="about-timeline__body">
                <p>足球、篮球、网球、排球、手球和电竞逐步加入后，导航第二栏成为联赛直接入口。常看不同项目的读者，不用回到首页重新找。</p>
              </div>
            </details>
          </li>
          <li class="about-timeline__entry">
            <details class="about-timeline__item">
              <summary class="about-timeline__summary">
                <span class="about-timeline__stage">专区说明</span>
                <span class="about-timeline__title">下载与登录问题有了分步卡片</span>
              </summary>
              <div class="about-timeline__body">
                <p>首次访问的人常卡在下载和登录。我们把专区说明做成卡片，放在问答中心和各页入口附近，遇到问题能顺着步骤往下走。</p>
              </div>
            </details>
          </li>
          <li class="about-timeline__entry">
            <details class="about-timeline__item">
              <summary class="about-timeline__summary">
                <span class="about-timeline__stage">第30轮</span>
                <span class="about-timeline__title">比分带和订阅卡同屏出现</span>
              </summary>
              <div class="about-timeline__body">
                <p>当前赛季比分更新到第30轮区间。首页顶部，比分带按联赛与轮次定位，下方紧接球队订阅卡；先看结果，再决定要不要长期关注。</p>
              </div>
            </details>
          </li>
        </ol>
      </section>

      <section id="work" class="about-section about-section--work" aria-labelledby="work-title" data-reveal>
        <div class="about-work__grid">
          <div class="about-work__copy">
            <p class="eyebrow">03 / 更新方式</p>
            <h2 class="about-section__title" id="work-title">每一轮比分背后，都有一条清楚的处理线</h2>
            <p>比赛结束后，数据整理先更新比分摘要和轮次标签，编辑补上赛季观察与栏目笔记，体验设计检查移动端的数字大小、链接位置和折叠展开。读起来顺，先从更新流程顺开始。</p>
            <p>比分摘要支持按联赛和第1至第30轮区间定位。发现显示错误，带上截图通过反馈通道发来，工作日 9:00-18:00 内会有人跟进。</p>
            <ul class="about-work__list">
              <li>先更新当前轮次，再补充观察与说明。</li>
              <li>比分数字、轮次标签和球队分组一起检查。</li>
              <li>读者反馈进入对应分类，比分纠错优先处理。</li>
            </ul>
            <a class="about-inline-link" href="/feedback/">发现比分问题，去反馈通道 →</a>
          </div>

          <figure class="about-work__figure">
            <img src="{zhanqunpic:h:750w:1000}" width="1000" height="750" alt="比分卡、轮次标签与编辑索引铺在桌面的抽象场景" loading="lazy" decoding="async">
            <figcaption>比分卡、轮次标签和编辑索引摊在同一张工作台上，更新和阅读都从清楚开始。</figcaption>
          </figure>
        </div>
      </section>

      <section id="team" class="about-section about-section--dark" aria-labelledby="team-title" data-reveal>
        <div class="about-section__head">
          <p class="eyebrow">04 / 谁在做</p>
          <h2 class="about-section__title" id="team-title">一支按赛季节奏工作的内容团队</h2>
          <p class="about-section__lead">编辑、数据整理和体验设计三个角色一起决定页面上的内容怎么出现。有人盯比分，有人写观察，也有人把手机上的阅读路径走一遍。</p>
        </div>

        <div class="about-team__grid">
          <article class="about-role">
            <span class="about-role__index">01</span>
            <h3 class="about-role__title">编辑</h3>
            <p class="about-role__text">负责赛季观察、栏目笔记和专区说明。每周更新，按联赛、轮次与专题组织，让长内容可以一段段读下去。</p>
          </article>
          <article class="about-role">
            <span class="about-role__index">02</span>
            <h3 class="about-role__title">数据整理</h3>
            <p class="about-role__text">负责比分摘要、轮次标签和球队分组。比分随第30轮区间更新，按联赛与轮次可以快速定位。</p>
          </article>
          <article class="about-role">
            <span class="about-role__index">03</span>
            <h3 class="about-role__title">体验设计</h3>
            <p class="about-role__text">负责导航、移动端阅读、比分数字与折叠面板。临时查分要快，连续阅读也要稳，不能让人来回找。</p>
          </article>
        </div>

        <div class="about-rhythm" aria-label="赛季更新节奏">
          <div class="about-rhythm__item">
            <span class="about-rhythm__step">赛季初</span>
            <span class="about-rhythm__label">整理栏目与球队入口</span>
          </div>
          <div class="about-rhythm__item">
            <span class="about-rhythm__step">赛季中</span>
            <span class="about-rhythm__label">每周更新观察与专区说明</span>
          </div>
          <div class="about-rhythm__item">
            <span class="about-rhythm__step">轮次推进</span>
            <span class="about-rhythm__label">比分摘要跟进当前区间</span>
          </div>
          <div class="about-rhythm__item">
            <span class="about-rhythm__step">休赛期</span>
            <span class="about-rhythm__label">专题回看与说明页维护</span>
          </div>
        </div>
      </section>

      <section id="promise" class="about-section about-section--promise" aria-labelledby="promise-title" data-reveal>
        <div class="about-section__head">
          <p class="eyebrow">05 / 品牌承诺</p>
          <h2 class="about-section__title" id="promise-title">把简单的事，长期做稳</h2>
          <p class="about-section__lead">你打开奇异果赛场，通常只想要一个结果：比分清楚，入口好找，步骤别绕。我们把这件事拆成四条长期坚持。</p>
        </div>

        <div class="about-promises">
          <details class="about-promise">
            <summary class="about-promise__summary">
              <span class="about-promise__title">快定位</span>
            </summary>
            <div class="about-promise__body">
              <p>比分带按联赛和轮次排，首页顶部先给你第30轮区间的摘要；分联赛胶囊轨道在导航第二栏横向排开，切换项目不用层层返回。</p>
            </div>
          </details>
          <details class="about-promise">
            <summary class="about-promise__summary">
              <span class="about-promise__title">少干扰</span>
            </summary>
            <div class="about-promise__body">
              <p>比分数字用大字号和等宽字体，长文放在奶油纸底上，折叠面板按需展开。临时查比分时不挡路，连续阅读时也不累。</p>
            </div>
          </details>
          <details class="about-promise">
            <summary class="about-promise__summary">
              <span class="about-promise__title">步骤清楚</span>
            </summary>
            <div class="about-promise__body">
              <p>球队订阅压缩为三步：选联赛与球队、确认提醒偏好、完成 iOS 下载并开启比分提醒。首次访问和登录问题，问答中心有分步说明。</p>
            </div>
          </details>
          <details class="about-promise">
            <summary class="about-promise__summary">
              <span class="about-promise__title">持续维护</span>
            </summary>
            <div class="about-promise__body">
              <p>赛季推进时，比分摘要和轮次标签跟着更新；每周补充赛季观察与专区说明。遇到显示错误，可以通过反馈通道附截图说明，工作日内收到回复。</p>
            </div>
          </details>
        </div>
      </section>
    </div>
  </div>

  <section class="about-next" aria-labelledby="about-next-title">
    <div class="wrap about-next__inner">
      <p class="eyebrow">继续翻翻</p>
      <h2 id="about-next-title">从比分入口，走到赛季现场</h2>
      <p>想先感受节奏，去读赛季观察；有使用问题，问答中心按首次访问、登录专区、下载订阅、比分查询和账号反馈分组。要做合作或反馈，也可以直接联系。</p>
      <div class="about-next__actions">
        <a class="btn btn--ink" href="/insights/">读赛季观察</a>
        <a class="btn btn--ghost" href="/questions/">去问答中心</a>
        <a class="btn btn--orange" href="/feedback/">联系与反馈</a>
      </div>
    </div>
  </section>
</main>

.page-about {
  --about-gap: clamp(18px, 3vw, 40px);
  --about-dark-line: rgba(246, 240, 226, 0.22);
  background: var(--cream);
  color: var(--brown);
  font-family: var(--font-body);
  line-height: 1.65;
  overflow-x: clip;
}

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

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

.page-about h1,
.page-about h2,
.page-about h3,
.page-about p {
  margin-top: 0;
}

.page-about .about-opening {
  padding-block: clamp(20px, 5vw, 56px) clamp(34px, 6vw, 78px);
}

.page-about .about-opening__grid {
  display: grid;
  gap: clamp(30px, 6vw, 64px);
  align-items: end;
}

.page-about .about-opening__copy {
  min-width: 0;
}

.page-about .breadcrumb {
  margin-bottom: clamp(28px, 5vw, 58px);
}

.page-about .about-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 18px;
  color: var(--sage);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page-about .about-kicker .index-label {
  color: var(--ink);
  font-weight: 700;
}

.page-about h1 {
  max-width: 13ch;
  margin-bottom: 22px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 10vw, 6.4rem);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.045em;
  overflow-wrap: anywhere;
}

.page-about .about-lead {
  max-width: 54ch;
  margin-bottom: 28px;
  color: var(--brown);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  line-height: 1.75;
}

.page-about .about-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 26px;
  padding-block: 16px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.page-about .about-stat {
  min-width: 0;
  padding-right: 8px;
}

.page-about .about-stat + .about-stat {
  padding-left: 10px;
  border-left: 1px solid var(--rule);
}

.page-about .about-stat__num {
  display: block;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: clamp(1.55rem, 4.4vw, 2.8rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.06em;
}

.page-about .about-stat__label {
  display: block;
  margin-top: 7px;
  color: var(--sage);
  font-size: 0.72rem;
  line-height: 1.35;
}

.page-about .about-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.page-about .about-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .about-chips .chip {
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}

.page-about .about-figure {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: clamp(12px, 2vw, 20px);
  background: var(--ink);
  color: var(--bone);
  clip-path: polygon(0 var(--cut), 100% 0, 100% calc(100% - var(--cut)), 0 100%);
}

.page-about .about-figure__frame {
  padding: 9px;
  border: 1px solid var(--dark-line);
}

.page-about .about-figure__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.page-about .about-figure__caption {
  margin-top: 12px;
  color: var(--flesh);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.55;
}

.page-about .about-figure__caption span {
  margin-right: 8px;
  color: var(--lime);
  letter-spacing: 0.08em;
}

.page-about .about-layout {
  display: grid;
  gap: clamp(34px, 5vw, 56px);
  padding-bottom: clamp(54px, 8vw, 96px);
}

.page-about .about-index {
  min-width: 0;
  padding-top: 13px;
  border-top: 3px solid var(--ink);
}

.page-about .about-index__label {
  margin-bottom: 12px;
  color: var(--sage);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.page-about .about-index__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .about-index__link {
  display: grid;
  grid-template-columns: 2.1em minmax(0, 1fr);
  gap: 6px;
  align-items: baseline;
  padding-block: 9px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.page-about .about-index__link span {
  color: var(--sage);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 400;
}

.page-about .about-index__link:hover,
.page-about .about-index__link:focus-visible {
  color: var(--kiwi);
  border-bottom-color: var(--kiwi);
}

.page-about .about-index__note {
  margin: 18px 0 0;
  padding: 12px 14px;
  border-left: 4px solid var(--lime);
  background: var(--ink);
  color: var(--bone);
  font-size: 0.75rem;
  line-height: 1.45;
}

.page-about .about-index__note strong {
  display: block;
  margin-top: 3px;
  color: var(--lime);
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: -0.02em;
}

.page-about .about-content {
  display: grid;
  gap: clamp(58px, 9vw, 104px);
  min-width: 0;
}

.page-about .about-section {
  min-width: 0;
  scroll-margin-top: 100px;
}

.page-about .about-section__head {
  max-width: 760px;
  margin-bottom: clamp(22px, 4vw, 38px);
}

.page-about .about-section__head .eyebrow {
  margin-bottom: 10px;
  color: var(--kiwi);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.page-about .about-section__title {
  max-width: 15ch;
  margin-bottom: 16px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5vw, 3.6rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.page-about .about-section__lead {
  max-width: 65ch;
  margin-bottom: 0;
  color: var(--sage);
  font-size: 0.98rem;
  line-height: 1.75;
}

.page-about .about-scenes {
  display: grid;
  gap: 16px;
}

.page-about .about-scene {
  min-width: 0;
  padding: clamp(20px, 4vw, 32px);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--kiwi);
  background: var(--bone);
}

.page-about .about-scene--season {
  border-top-color: var(--orange);
}

.page-about .about-scene .tag {
  margin-bottom: 16px;
}

.page-about .about-scene__title {
  margin-bottom: 12px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-weight: 800;
  line-height: 1.15;
}

.page-about .about-scene__text {
  margin-bottom: 14px;
  color: var(--brown);
  font-size: 0.92rem;
}

.page-about .about-scene__text:last-of-type {
  margin-bottom: 18px;
}

.page-about .about-list,
.page-about .about-work__list {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.page-about .about-list li,
.page-about .about-work__list li {
  position: relative;
  padding-left: 1.15em;
  color: var(--brown);
  font-size: 0.88rem;
  line-height: 1.55;
}

.page-about .about-list li + li,
.page-about .about-work__list li + li {
  margin-top: 8px;
}

.page-about .about-list li::before,
.page-about .about-work__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 6px;
  background: var(--kiwi);
  transform: rotate(45deg);
}

.page-about .about-inline-link {
  display: inline-block;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--kiwi);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.page-about .about-inline-link:hover,
.page-about .about-inline-link:focus-visible {
  color: var(--kiwi);
}

.page-about .about-timeline-media {
  margin: 0 0 clamp(24px, 4vw, 40px);
  padding: 10px;
  background: var(--ink);
}

.page-about .about-timeline-media img {
  width: 100%;
  aspect-ratio: 14 / 6;
  object-fit: cover;
}

.page-about .about-timeline-media figcaption {
  margin-top: 10px;
  color: var(--flesh);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.5;
}

.page-about .about-timeline {
  position: relative;
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-about .about-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 19px;
  width: 2px;
  background: linear-gradient(var(--kiwi), var(--lime));
}

.page-about .about-timeline__entry {
  position: relative;
  min-width: 0;
}

.page-about .about-timeline__item {
  border: 1px solid var(--rule);
  background: var(--bone);
}

.page-about .about-timeline__summary {
  position: relative;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px 12px;
  align-items: center;
  padding: 16px 42px 16px 48px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.page-about .about-timeline__summary::-webkit-details-marker {
  display: none;
}

.page-about .about-timeline__summary::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 13px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--ink);
  background: var(--lime);
  transform: translateY(-50%) rotate(45deg);
}

.page-about .about-timeline__summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 17px;
  color: var(--kiwi);
  font-family: var(--font-mono);
  font-size: 1.25rem;
  line-height: 1;
  transform: translateY(-50%);
}

.page-about .about-timeline__item[open] .about-timeline__summary::after {
  content: "−";
}

.page-about .about-timeline__stage {
  justify-self: start;
  padding: 3px 7px;
  background: var(--ink);
  color: var(--lime);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.page-about .about-timeline__title {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.4;
}

.page-about .about-timeline__body {
  padding: 0 18px 17px 48px;
}

.page-about .about-timeline__body p {
  margin: 0;
  color: var(--brown);
  font-size: 0.88rem;
  line-height: 1.7;
}

.page-about .about-work__grid {
  display: grid;
  gap: clamp(24px, 5vw, 44px);
  align-items: start;
}

.page-about .about-work__copy {
  min-width: 0;
}

.page-about .about-work__copy .eyebrow {
  margin-bottom: 10px;
  color: var(--kiwi);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.page-about .about-work__copy .about-section__title {
  max-width: 18ch;
}

.page-about .about-work__copy p {
  color: var(--brown);
  font-size: 0.94rem;
  line-height: 1.75;
}

.page-about .about-work__figure {
  margin: 0;
  padding: 10px;
  background: var(--kiwi);
}

.page-about .about-work__figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.page-about .about-work__figure figcaption {
  margin-top: 10px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.5;
}

.page-about .about-section--dark {
  padding: clamp(26px, 5vw, 56px);
  background: var(--ink);
  color: var(--bone);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
}

.page-about .about-section--dark .about-section__title {
  color: var(--bone);
}

.page-about .about-section--dark .about-section__lead {
  color: rgba(255, 253, 246, 0.75);
}

.page-about .about-section--dark .eyebrow {
  color: var(--lime);
}

.page-about .about-team__grid {
  display: grid;
  gap: 20px;
}

.page-about .about-role {
  min-width: 0;
  padding-top: 16px;
  border-top: 1px solid var(--dark-line);
}

.page-about .about-role__index {
  display: block;
  margin-bottom: 14px;
  color: var(--lime);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
}

.page-about .about-role__title {
  margin-bottom: 10px;
  color: var(--bone);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
}

.page-about .about-role__text {
  margin-bottom: 0;
  color: rgba(255, 253, 246, 0.76);
  font-size: 0.88rem;
  line-height: 1.7;
}

.page-about .about-rhythm {
  display: grid;
  gap: 12px;
  margin-top: clamp(28px, 5vw, 46px);
  padding-top: 20px;
  border-top: 1px solid var(--dark-line);
}

.page-about .about-rhythm__item {
  min-width: 0;
  padding-left: 12px;
  border-left: 2px solid var(--kiwi);
}

.page-about .about-rhythm__step {
  display: block;
  color: var(--lime);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}

.page-about .about-rhythm__label {
  display: block;
  margin-top: 4px;
  color: var(--bone);
  font-size: 0.8rem;
  line-height: 1.45;
}

.page-about .about-promises {
  display: grid;
  gap: 12px;
}

.page-about .about-promise {
  border: 1px solid var(--rule);
  background: var(--bone);
}

.page-about .about-promise__summary {
  position: relative;
  padding: 16px 48px 16px 18px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.page-about .about-promise__summary::-webkit-details-marker {
  display: none;
}

.page-about .about-promise__summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 17px;
  color: var(--orange);
  font-family: var(--font-mono);
  font-size: 1.2rem;
  line-height: 1;
  transform: translateY(-50%);
}

.page-about .about-promise[open] .about-promise__summary::after {
  content: "−";
}

.page-about .about-promise__title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.2;
}

.page-about .about-promise__body {
  padding: 0 18px 18px;
}

.page-about .about-promise__body p {
  margin: 0;
  color: var(--brown);
  font-size: 0.88rem;
  line-height: 1.7;
}

.page-about .about-next {
  padding-block: clamp(34px, 6vw, 72px);
  background: var(--lime);
  color: var(--ink);
}

.page-about .about-next .eyebrow {
  margin-bottom: 10px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.page-about .about-next h2 {
  max-width: 18ch;
  margin-bottom: 14px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}

.page-about .about-next p {
  max-width: 64ch;
  margin-bottom: 22px;
  color: var(--ink);
  font-size: 0.94rem;
  line-height: 1.7;
}

.page-about .about-next__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (min-width: 720px) {
  .page-about .about-index__list {
    grid-template-columns: 1fr;
  }

  .page-about .about-scenes,
  .page-about .about-promises {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-about .about-team__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }

  .page-about .about-rhythm {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-about .about-work__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}

@media (min-width: 960px) {
  .page-about .about-opening__grid {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  }

  .page-about .about-layout {
    grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
    align-items: start;
  }

  .page-about .about-index {
    position: sticky;
    top: 24px;
  }

  .page-about .about-content {
    max-width: 820px;
    justify-self: end;
    width: 100%;
  }

  .page-about .about-work__copy {
    padding-top: 6px;
  }
}
<<<END>>>

.page-about {
  --dark-line: currentColor;
}
