.page-about{
  --about-rail:92px;
  --about-muted:#A6B3AC;
  background:var(--ink);
  color:var(--text);
  font-family:var(--font-cn);
  padding-bottom:8px;
  -webkit-font-smoothing:antialiased;
}

.page-about .about-topbar{
  padding-top:20px;
  padding-bottom:6px;
}

/* ---------- hero ---------- */
.page-about .about-hero{
  padding:6px 0 46px;
  border-bottom:1px solid var(--hair);
}

.page-about .about-hero__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:30px;
  align-items:end;
}

.page-about .about-hero h1{
  margin:16px 0 18px;
  font-size:clamp(30px,6.4vw,64px);
  line-height:1.06;
  letter-spacing:-0.02em;
  font-weight:900;
  color:var(--text);
}

.page-about .about-hero__desc{
  margin:0;
  max-width:60ch;
  font-size:16px;
  line-height:1.75;
  color:var(--text);
}

.page-about .about-hero__links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:26px;
}

.page-about .about-hero__facts{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--hair);
}

.page-about .about-hero__facts li{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  padding:10px 0;
  border-bottom:1px solid var(--hair);
}

.page-about .about-hero__facts b{
  font-family:var(--font-mono);
  font-size:22px;
  font-weight:500;
  line-height:1.1;
  color:var(--signal);
  white-space:nowrap;
}

.page-about .about-hero__facts span{
  font-size:13px;
  color:var(--about-muted);
  text-align:right;
}

@media (min-width:900px){
  .page-about .about-hero{
    padding-bottom:60px;
  }
  .page-about .about-hero__inner{
    grid-template-columns:minmax(0,1.85fr) minmax(216px,.7fr);
    gap:56px;
  }
  .page-about .about-hero h1{
    max-width:16ch;
  }
}

/* ---------- .page-about grid ---------- */
.page-about .about-body{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:32px;
  padding-top:8px;
  padding-bottom:56px;
}

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

/* ---------- rail ---------- */
.page-about .about-rail{
  display:none;
}

.page-about .about-rail__label{
  margin:0 0 16px;
  font-size:11px;
  letter-spacing:.22em;
  color:var(--about-muted);
}

.page-about .about-rail__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:14px;
  border-left:1px solid var(--line);
  padding-left:12px;
}

.page-about .about-rail__link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.06em;
  color:#6E7C76;
  text-decoration:none;
  transition:color .12s linear;
}

.page-about .about-rail__link::before{
  content:"";
  width:10px;
  height:1px;
  flex:none;
  background:currentColor;
  transition:width .12s linear;
}

.page-about .about-rail__link:hover,
.page-about .about-rail__link:focus-visible{
  color:var(--signal);
}

.page-about .about-rail__link:hover::before,
.page-about .about-rail__link:focus-visible::before{
  width:20px;
}

@media (min-width:1000px){
  .page-about .about-body{
    grid-template-columns:var(--about-rail) minmax(0,1fr);
    gap:52px;
    padding-top:26px;
    padding-bottom:72px;
  }
  .page-about .about-rail{
    display:block;
    position:sticky;
    top:calc(var(--bar-h) + 28px);
    align-self:start;
    padding-top:6px;
  }
}

/* ---------- section shell ---------- */
.page-about .about-sec{
  padding:44px 0;
  border-top:1px solid var(--hair);
}

.page-about .about-sec:first-child{
  border-top:0;
  padding-top:8px;
}

.page-about .about-sec__head{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:6px 16px;
  align-items:start;
  margin-bottom:24px;
}

.page-about .about-sec__num{
  font-family:var(--font-mono);
  font-size:clamp(28px,7vw,54px);
  line-height:.9;
  font-weight:500;
  color:var(--signal);
  opacity:.32;
  transform:translateY(-2px);
}

.page-about .about-sec__kicker{
  margin:0 0 8px;
  font-size:14px;
  letter-spacing:.02em;
  color:var(--about-muted);
}

.page-about .about-sec__title{
  margin:0;
  font-size:clamp(22px,4.2vw,34px);
  line-height:1.16;
  letter-spacing:-0.02em;
  font-weight:800;
  color:var(--text);
}

.page-about .about-quote{
  margin:0 0 24px;
  padding-left:16px;
  border-left:2px solid var(--signal);
  font-family:var(--font-serif);
  font-size:clamp(16px,2.6vw,20px);
  line-height:1.55;
  color:var(--text);
}

.page-about .about-prose{
  max-width:64ch;
  font-size:16px;
  line-height:1.75;
}

.page-about .about-prose p{
  margin:0 0 1.05em;
}

.page-about .about-prose p:last-child{
  margin-bottom:0;
}

.page-about .about-prose a{
  color:var(--signal);
  text-decoration:none;
  border-bottom:1px solid #2CE8C466;
}

.page-about .about-prose a:hover{
  border-bottom-color:var(--signal);
}

/* ---------- figures ---------- */
.page-about .about-figure{
  margin:0 0 28px;
}

.page-about .about-figure img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:cover;
  border:1px solid var(--hair);
  background:var(--moss);
}

.page-about .about-figure figcaption{
  margin-top:10px;
  font-size:13px;
  line-height:1.6;
  color:var(--about-muted);
}

.page-about .about-figure--wide img{
  aspect-ratio:16/7;
}

/* ---------- timeline ---------- */
.page-about .about-tl{
  list-style:none;
  margin:0;
  padding:0;
  position:relative;
}

.page-about .about-tl::before{
  content:"";
  position:absolute;
  left:5px;
  top:8px;
  bottom:8px;
  width:1px;
  background:var(--line);
}

.page-about .about-tl__item{
  position:relative;
  padding:0 0 26px 30px;
}

.page-about .about-tl__item:last-child{
  padding-bottom:0;
}

.page-about .about-tl__item::before{
  content:"";
  position:absolute;
  left:0;
  top:6px;
  width:11px;
  height:11px;
  border-radius:50%;
  border:1px solid var(--signal);
  background:var(--ink);
  transition:background .12s linear;
}

.page-about .about-tl__item:hover::before,
.page-about .about-tl__item:focus-within::before{
  background:var(--signal);
}

.page-about .about-tl__year{
  display:block;
  margin-bottom:6px;
  font-family:var(--font-mono);
  font-size:19px;
  line-height:1;
  color:var(--signal);
}

.page-about .about-tl__title{
  margin:0;
  font-size:17px;
  line-height:1.5;
  font-weight:700;
  color:var(--text);
}

.page-about .about-tl__more{
  margin:0;
  max-height:0;
  overflow:hidden;
  font-size:14px;
  line-height:1.7;
  color:var(--about-muted);
  transition:max-height .18s var(--ease),margin-top .18s var(--ease);
}

.page-about .about-tl__item:hover .about-tl__more,
.page-about .about-tl__item:focus-within .about-tl__more{
  max-height:8em;
  margin-top:8px;
}

/* ---------- split & team ---------- */
.page-about .about-split{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:26px;
}

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

.page-about .about-split__aside{
  margin:0;
}

.page-about .about-team{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1px;
  margin-top:26px;
  background:var(--hair);
  border:1px solid var(--hair);
}

.page-about .about-team__item{
  background:var(--moss);
  padding:22px 20px;
  transition:background .12s linear;
}

.page-about .about-team__item:hover{
  background:var(--board);
}

.page-about .about-team__n{
  display:block;
  margin-bottom:10px;
  font-family:var(--font-mono);
  font-size:32px;
  line-height:1;
  color:var(--signal);
}

.page-about .about-team__h{
  margin:0 0 8px;
  font-size:16px;
  font-weight:700;
  color:var(--text);
}

.page-about .about-team__item p{
  margin:0;
  font-size:14px;
  line-height:1.7;
  color:var(--about-muted);
}

@media (min-width:720px){
  .page-about .about-team{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (min-width:860px){
  .page-about .about-split{
    grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
    gap:40px;
    align-items:start;
  }
}

/* ---------- paper block ---------- */
.page-about .about-sec--paper{
  --text:#0A1411;
  --about-muted:#55635D;
  background:var(--paper);
  color:var(--ink);
  border-top:0;
  padding:32px 20px;
  margin:18px 0;
}

.page-about .about-sec--paper .about-sec__num{
  color:var(--ink);
  opacity:.16;
}

.page-about .about-sec--paper .about-sec__kicker{
  color:var(--graphite);
}

.page-about .about-sec--paper .about-sec__title{
  color:var(--ink);
}

.page-about .about-sec--paper .about-quote{
  border-left-color:var(--ink);
  color:var(--ink);
}

.page-about .about-sec--paper .about-prose{
  color:#16211C;
}

@media (min-width:768px){
  .page-about .about-sec--paper{
    padding:44px 40px;
    margin:24px 0;
  }
}

/* ---------- facts list ---------- */
.page-about .about-facts{
  list-style:none;
  margin:6px 0 0;
  padding:0;
  border-top:1px solid var(--hair);
}

.page-about .about-facts__item{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:6px;
  padding:16px 0;
  border-bottom:1px solid var(--hair);
}

.page-about .about-facts__item b{
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--signal);
}

.page-about .about-facts__item span{
  font-size:15px;
  line-height:1.7;
  color:var(--text);
}

@media (min-width:640px){
  .page-about .about-facts__item{
    grid-template-columns:110px minmax(0,1fr);
    gap:20px;
    align-items:baseline;
  }
}

/* ---------- next link & end links ---------- */
.page-about .about-nextlink{
  margin:26px 0 0;
}

.page-about .about-nextlink a{
  font-family:var(--font-mono);
  font-size:14px;
  letter-spacing:.02em;
  color:var(--signal);
  text-decoration:none;
  border-bottom:1px solid #2CE8C455;
  padding-bottom:2px;
}

.page-about .about-nextlink a:hover{
  border-bottom-color:var(--signal);
}

.page-about .about-sec--end{
  border-bottom:1px solid var(--hair);
}

.page-about .about-endlinks{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:28px;
}

/* ---------- focus ---------- */
.page-about a:focus-visible,
.page-about .about-tl__item:focus-within{
  outline:2px solid var(--signal);
  outline-offset:3px;
}
<<<END>>>