/* =========================================================
   关于 · 这个小站的第二版
   ========================================================= */

.about-hero {
  position: relative;
  padding: clamp(60px, 10vh, 130px) 0 clamp(40px, 6vh, 72px);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.about-hero__inner {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-8); position: relative;
}
.about-hero__text { max-width: 780px; display: flex; flex-direction: column; gap: var(--sp-5); }
.about-hero__title { font-size: clamp(40px, 6.4vw, 84px); letter-spacing: .08em; }
.about-hero__mark {
  font-family: var(--font-serif); font-size: clamp(120px, 20vw, 260px); line-height: .8;
  color: color-mix(in srgb, var(--ink) 7%, transparent);
  user-select: none; pointer-events: none; letter-spacing: 0;
  transform: translateY(8%);
}

.about-layout {
  display: grid; grid-template-columns: 220px minmax(0, 760px);
  gap: clamp(36px, 7vw, 110px);
  justify-content: center;
  padding-top: clamp(40px, 6vw, 72px);
}
.about-toc {
  position: sticky; top: calc(var(--nav-h) + 40px);
  align-self: start; display: flex; flex-direction: column; gap: var(--sp-4);
  border-left: 1px solid var(--line); padding-left: var(--sp-4);
}
.about-toc__nav { display: flex; flex-direction: column; gap: 2px; }
.about-toc__nav a {
  padding: 7px 0; font-size: var(--fs-sm); color: var(--ink-3);
  letter-spacing: .04em; transition: color var(--dur-mic), padding var(--dur-mic);
  border-bottom: 1px solid transparent;
}
.about-toc__nav a:hover { color: var(--ink); padding-left: 4px; }
.about-toc__nav a.is-on { color: var(--accent); padding-left: 4px; }
.about-toc__foot { margin-top: var(--sp-6); color: var(--ink-3); }

.about-body { display: flex; flex-direction: column; gap: clamp(56px, 8vw, 104px); padding-bottom: var(--sp-12); }
.about-section { display: flex; flex-direction: column; gap: var(--sp-5); scroll-margin-top: calc(var(--nav-h) + 40px); }
.about-section .eyebrow { color: var(--accent-2); }
.about-section p { font-family: var(--font-serif); font-size: clamp(15.5px, 1.15vw, 17px); line-height: 2.05; color: var(--ink-2); letter-spacing: .02em; }
.about-section p b { color: var(--ink); font-weight: 500; }
.about-section .h2 { margin-bottom: var(--sp-2); }
.about-intro { color: var(--ink-3) !important; }

.about-list { display: flex; flex-direction: column; gap: var(--sp-4); }
.about-list li {
  position: relative; padding-left: var(--sp-6);
  font-family: var(--font-serif); font-size: clamp(15px, 1.1vw, 16.5px);
  line-height: 2; color: var(--ink-2);
}
.about-list li::before {
  content: "——"; position: absolute; left: 0; top: 0;
  color: var(--accent-2); opacity: .6; font-size: 12px; letter-spacing: -.1em;
}
.about-list b { color: var(--ink); font-weight: 500; }

.about-changes { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.about-changes li {
  display: grid; grid-template-columns: 46px 190px minmax(0, 1fr);
  gap: var(--sp-4); align-items: baseline;
  padding: var(--sp-4) 0; border-bottom: 1px solid var(--line);
  transition: background var(--dur-mic);
}
.about-changes li:hover { background: color-mix(in srgb, var(--surface) 40%, transparent); }
.about-changes__no { font-size: 11px; letter-spacing: .18em; color: var(--accent-2); }
.about-changes b { font-family: var(--font-serif); font-weight: 400; font-size: 16.5px; letter-spacing: .06em; color: var(--ink); }
.about-changes span:last-child { font-size: var(--fs-sm); color: var(--ink-3); line-height: 1.9; }

.about-pull {
  margin: var(--sp-6) 0; padding: var(--sp-6) 0 var(--sp-6) var(--sp-6);
  border-left: 1px solid var(--accent-2) !important;
  font-size: clamp(17px, 1.8vw, 22px) !important; color: var(--ink) !important;
  line-height: 1.95 !important; letter-spacing: .04em !important;
}

.about-section .btn { align-self: flex-start; gap: 6px; }
.about-signoff { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); margin-top: var(--sp-6); flex-wrap: wrap; }
.about-section a.link { color: var(--ink); }

@media (max-width: 900px) {
  .about-hero__mark { display: none; }
  .about-layout { grid-template-columns: 1fr; gap: var(--sp-8); }
  .about-toc { display: none; }
  .about-changes li { grid-template-columns: 36px 1fr; }
  .about-changes span:last-child { grid-column: 2; }
}